Add lab examples

panel/lab/components/item/1_list/index.vue

@@ -77,5 +77,20 @@
 				theme="disabled"
 			/>
 		</k-lab-example>
+		<k-lab-example label="Wrap for long title/info">
+			<k-item
+				:buttons="[
+					{
+						icon: 'edit'
+					},
+					{
+						icon: 'trash'
+					}
+				]"
+				:image="{ src: 'https://picsum.photos/800/600' }"
+				info="With some more information than usual"
+				text="This is a nice item with a rather long title that should wrap"
+			/>
+		</k-lab-example>
 	</k-lab-examples>
 </template>

panel/lab/components/item/2_cards/index.vue

@@ -82,5 +82,21 @@
 				theme="disabled"
 			/>
 		</k-lab-example>
+		<k-lab-example label="Wrap for long title/info">
+			<k-item
+				:buttons="[
+					{
+						icon: 'edit'
+					},
+					{
+						icon: 'trash'
+					}
+				]"
+				:image="{ src: 'https://picsum.photos/800/600' }"
+				info="With some more information than usual"
+				layout="cards"
+				text="This is a nice item with a rather long title that should wrap"
+			/>
+		</k-lab-example>
 	</k-lab-examples>
 </template>

panel/lab/components/item/3_cardlets/index.vue

@@ -86,5 +86,21 @@
 				theme="disabled"
 			/>
 		</k-lab-example>
+		<k-lab-example label="Wrap for long title/info">
+			<k-item
+				:buttons="[
+					{
+						icon: 'edit'
+					},
+					{
+						icon: 'trash'
+					}
+				]"
+				:image="{ src: 'https://picsum.photos/800/600' }"
+				info="With some more information than usual"
+				layout="cardlets"
+				text="This is a nice item with a rather long title that should wrap"
+			/>
+		</k-lab-example>
 	</k-lab-examples>
 </template>

panel/src/components/Collection/Item.vue

@@ -37,6 +37,7 @@
 		</div>
 
 		<div
+			v-if="buttons?.length || options || $slots.options"
 			class="k-item-options"
 			:data-only-option="!buttons?.length || (!options && !$slots.options)"
 		>