vueless 1.3.7-beta.3 → 1.3.7-beta.4

package/icons/storybook/help.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M483.52-247q16.48 0 28.2-11.72 11.71-11.71 11.71-28.35 0-16.63-11.71-28.19-11.72-11.57-28.32-11.57t-28.19 11.55q-11.6 11.54-11.6 28.33 0 16.52 11.63 28.23Q466.87-247 483.52-247Zm-36.91-146h62.59q0-25.52 6.5-47.02 6.5-21.5 39.78-49.02 30.52-25.05 43.4-50.34 12.88-25.29 12.88-55.69 0-53.69-34.09-86.05t-91.19-32.36q-49.72 0-88.06 25.46-38.33 25.45-55.81 69.45l56.82 21.4q11.24-28.24 32.88-43.62 21.64-15.38 50.21-15.38 31.73 0 51.83 17.58 20.11 17.58 20.11 45.47 0 21.12-12.64 40.38-12.65 19.26-36.45 39.07-29.52 25.52-44.14 51.75-14.62 26.24-14.62 68.92Zm33.42 318.98q-83.46 0-157.54-31.88-74.07-31.88-129.39-87.2-55.32-55.32-87.2-129.36-31.88-74.04-31.88-157.51 0-84.46 31.88-158.54 31.88-74.07 87.16-128.9 55.28-54.84 129.34-86.82 74.06-31.99 157.55-31.99 84.48 0 158.59 31.97 74.1 31.97 128.91 86.77 54.82 54.8 86.79 128.88 31.98 74.08 31.98 158.6 0 83.5-31.99 157.57-31.98 74.07-86.82 129.36-54.83 55.29-128.87 87.17-74.04 31.88-158.51 31.88Zm-.03-68.13q141.04 0 239.45-98.75 98.4-98.76 98.4-239.1 0-141.04-98.4-239.45-98.41-98.4-239.57-98.4-140.16 0-238.95 98.4-98.78 98.41-98.78 239.57 0 140.16 98.75 238.95 98.76 98.78 239.1 98.78ZM480-480Z"/></svg>

package/icons/storybook/logout.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M182.15-114.02q-27.6 0-47.86-20.27-20.27-20.26-20.27-47.86v-595.7q0-27.7 20.27-48.03 20.26-20.34 47.86-20.34h298.28v68.37H182.15v595.7h298.28v68.13H182.15Zm481.46-182.37-48.74-48.5 100.8-101.04h-357.1v-68.14h355.1l-100.8-101.04 48.74-48.5L846.22-479 663.61-296.39Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.3.7-beta.3",
+  "version": "1.3.7-beta.4",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/ui.container-collapsible/config.ts

@@ -10,7 +10,7 @@ export default /*tw*/ {
     },
   },
   content: {
-    base: "z-10 w-fit",
+    base: "z-10 w-max",
     variants: {
       absolute: {
         true: "absolute",

package/ui.container-collapsible/storybook/stories.ts

@@ -12,6 +12,10 @@ import UButton from "../../ui.button/UButton.vue";
 import UCard from "../../ui.container-card/UCard.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UCol from "../../ui.container-col/UCol.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+import UAvatar from "../../ui.image-avatar/UAvatar.vue";
+import UDivider from "../../ui.container-divider/UDivider.vue";
+import UText from "../../ui.text-block/UText.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types";
@@ -19,15 +23,56 @@ import type { Props } from "../types";
 interface UCollapsibleArgs extends Props {
   slotTemplate?: string;
   enum: "yPosition" | "xPosition";
+  class?: string;
+  label?: string;
+  rowClass?: string;
 }
 
 const defaultTemplate = `
-  <template #default="{ opened }">
-    <UButton :label="opened ? 'Close' : 'Open'" />
+  <template #default>
+    <UButton label="John Doe" variant="outlined" size="sm" />
   </template>
 
   <template #content>
-    <UCard title="Collapsible Content" description="This is the collapsible content area." />
+    <UCard class="min-w-[280px] !p-2.5">
+      <URow align="center" gap="sm" class="mb-2">
+        <UAvatar label="John Doe" size="md" />
+        <UCol gap="none">
+          <UText size="sm">John Doe</UText>
+          <UText variant="lifted" size="xs">john.doe@example.com</UText>
+        </UCol>
+      </URow>
+      <UDivider />
+      <UCol gap="2xs" class="mt-2">
+        <UButton
+          label="Settings"
+          variant="subtle"
+          size="sm"
+          left-icon="settings"
+          color="neutral"
+          block
+          class="justify-start"
+        />
+        <UButton
+          label="Help & Support"
+          variant="subtle"
+          size="sm"
+          left-icon="help"
+          color="info"
+          block
+          class="justify-start"
+        />
+        <UButton
+          label="Sign Out"
+          variant="subtle"
+          size="sm"
+          left-icon="logout"
+          color="error"
+          block
+          class="justify-start"
+        />
+      </UCol>
+    </UCard>
   </template>
 `;
 
@@ -52,7 +97,7 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<UCollapsibleArgs> = (args: UCollapsibleArgs) => ({
-  components: { UCollapsible, UButton, UCard },
+  components: { UCollapsible, UButton, UCard, UIcon, UAvatar, UDivider, UText, UCol, URow },
   setup: () => ({ args, slots: getSlotNames(UCollapsible.__name) }),
   template: `
     <UCollapsible v-bind="args">
@@ -62,17 +107,65 @@ const DefaultTemplate: StoryFn<UCollapsibleArgs> = (args: UCollapsibleArgs) => (
 });
 
 const EnumTemplate: StoryFn<UCollapsibleArgs> = (args: UCollapsibleArgs, { argTypes }) => ({
-  components: { UCollapsible, UButton, UCard, URow },
-  setup: () => ({ args, argTypes, getArgs }),
+  components: { UCollapsible, UButton, UCard, UIcon, UAvatar, UDivider, UText, UCol, URow },
+  setup: () => {
+    const openStates = ref<Record<string, boolean>>({});
+
+    return { args, argTypes, getArgs, openStates };
+  },
   template: `
-    <URow>
+    <URow :class="args.rowClass">
       <UCollapsible
         v-for="option in argTypes?.[args.enum]?.options"
         v-bind="getArgs(args, option)"
-        v-model:open="args.open"
+        v-model:open="openStates[option]"
         :key="option"
       >
-        ${args.slotTemplate}
+        <template #default>
+          <UButton :label="option" variant="outlined" size="sm" />
+        </template>
+
+        <template #content>
+          <UCard class="min-w-[280px] !p-2.5">
+            <URow align="center" gap="sm" class="mb-2">
+              <UAvatar label="John Doe" size="md" />
+              <UCol gap="none">
+                <UText size="sm">John Doe</UText>
+                <UText variant="lifted" size="xs">john.doe@example.com</UText>
+              </UCol>
+            </URow>
+            <UDivider />
+            <UCol gap="2xs" class="mt-2">
+              <UButton
+                label="Settings"
+                variant="subtle"
+                size="sm"
+                left-icon="settings"
+                color="neutral"
+                block
+                class="justify-start"
+              />
+              <UButton
+                label="Help & Support"
+                variant="subtle"
+                size="sm"
+                left-icon="help"
+                color="info"
+                block
+                class="justify-start"
+              />
+              <UButton
+                label="Sign Out"
+                variant="subtle"
+                size="sm"
+                left-icon="logout"
+                color="error"
+                block
+                class="justify-start"
+              />
+            </UCol>
+          </UCard>
+        </template>
       </UCollapsible>
     </URow>
   `,
@@ -81,14 +174,40 @@ const EnumTemplate: StoryFn<UCollapsibleArgs> = (args: UCollapsibleArgs, { argTy
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const YPositions = EnumTemplate.bind({});
-YPositions.args = { enum: "yPosition", slotTemplate: defaultTemplate };
+export const Disabled: StoryFn<UCollapsibleArgs> = (args) => ({
+  components: { UCollapsible, UButton, UCard, UDivider, UText, UIcon, UCol, URow },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UCollapsible disabled>
+      <UButton label="John Doe" disabled variant="subtle" size="sm" />
+    </UCollapsible>
+  `,
+});
+Disabled.parameters = {
+  docs: {
+    story: {
+      height: "120px",
+    },
+  },
+};
+
+export const XPosition = EnumTemplate.bind({});
+XPosition.args = {
+  enum: "xPosition",
+  label: "{enumValue}",
+  rowClass: "w-full justify-center gap-96",
+};
 
-export const XPositions = EnumTemplate.bind({});
-XPositions.args = { enum: "xPosition" };
+export const YPosition = EnumTemplate.bind({});
+YPosition.args = { enum: "yPosition", label: "{enumValue}" };
+YPosition.parameters = {
+  storyClasses: "h-[500px] flex items-center px-6 pt-8 pb-12",
+};
 
 export const NonAbsolute: StoryFn<UCollapsibleArgs> = (args) => ({
-  components: { UCollapsible, UButton, UCard, UCol },
+  components: { UCollapsible, UButton, UCard, UCol, UDivider, UText },
   setup() {
     return { args };
   },
@@ -112,150 +231,8 @@ export const NonAbsolute: StoryFn<UCollapsibleArgs> = (args) => ({
   `,
 });
 
-export const VModel: StoryFn<UCollapsibleArgs> = (args) => ({
-  components: { UCollapsible, UButton, UCard, URow },
-  setup() {
-    const isOpen = ref(false);
-
-    function toggle() {
-      isOpen.value = !isOpen.value;
-    }
-
-    return { args, isOpen, toggle };
-  },
-  template: `
-    <UCol gap="md">
-      <URow gap="md">
-        <UButton label="Toggle Collapsible" @click="toggle" />
-        <UButton :label="isOpen ? 'Close' : 'Open'" variant="outlined" @click="isOpen = !isOpen" />
-      </URow>
-
-      <UCollapsible v-model:open="isOpen">
-        <template #default="{ opened }">
-          <UButton :label="opened ? 'Opened' : 'Closed'" color="secondary" />
-        </template>
-        <template #content>
-          <UCard
-            title="Controlled Content"
-            description="This collapsible is controlled by v-model. Use the buttons above to toggle it."
-          />
-        </template>
-      </UCollapsible>
-    </UCol>
-  `,
-});
-
-export const CloseOnOutside: StoryFn<UCollapsibleArgs> = (args) => ({
-  components: { UCollapsible, UButton, UCard },
-  setup() {
-    return { args };
-  },
-  template: `
-    <div class="p-8">
-      <p class="mb-4 text-sm text-gray-600">Click outside the collapsible content to close it.</p>
-      <UCollapsible close-on-outside>
-        <template #default="{ opened }">
-          <UButton :label="opened ? 'Close' : 'Open'" />
-        </template>
-        <template #content>
-          <UCard
-            title="Click Outside to Close"
-            description="This collapsible will close when you click outside of it."
-          />
-        </template>
-      </UCollapsible>
-    </div>
-  `,
-});
-
-export const CloseOnContent: StoryFn<UCollapsibleArgs> = (args) => ({
-  components: { UCollapsible, UButton, UCard },
-  setup() {
-    return { args };
-  },
-  template: `
-    <div class="p-8">
-      <p class="mb-4 text-sm text-gray-600">Click on the content to close the collapsible.</p>
-      <UCollapsible close-on-content>
-        <template #default="{ opened }">
-          <UButton :label="opened ? 'Close' : 'Open'" />
-        </template>
-        <template #content>
-          <UCard
-            title="Click Content to Close"
-            description="Click anywhere on this card to close the collapsible."
-          />
-        </template>
-      </UCollapsible>
-    </div>
-  `,
-});
-
-export const Disabled: StoryFn<UCollapsibleArgs> = (args) => ({
-  components: { UCollapsible, UButton, UCard },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UCollapsible disabled>
-      <template #default="{ opened }">
-        <UButton :label="opened ? 'Close' : 'Open'" disabled />
-      </template>
-      <template #content>
-        <UCard title="Disabled Content" description="This content cannot be shown." />
-      </template>
-    </UCollapsible>
-  `,
-});
+export const NoCloseOnOutside = DefaultTemplate.bind({});
+NoCloseOnOutside.args = { closeOnOutside: false };
 
-export const CustomContent: StoryFn<UCollapsibleArgs> = (args) => ({
-  components: { UCollapsible, UButton, UCard, URow },
-  setup() {
-    return { args };
-  },
-  template: `
-    <URow gap="xl">
-      <UCollapsible>
-        <template #default="{ opened }">
-          <UButton
-            :label="opened ? 'Hide Menu' : 'Show Menu'"
-            :left-icon="opened ? 'expand_less' : 'expand_more'"
-          />
-        </template>
-        <template #content>
-          <UCard class="w-64">
-            <div class="p-4 space-y-2">
-              <div class="hover:bg-gray-100 p-2 rounded cursor-pointer">Menu Item 1</div>
-              <div class="hover:bg-gray-100 p-2 rounded cursor-pointer">Menu Item 2</div>
-              <div class="hover:bg-gray-100 p-2 rounded cursor-pointer">Menu Item 3</div>
-              <div class="hover:bg-gray-100 p-2 rounded cursor-pointer">Menu Item 4</div>
-            </div>
-          </UCard>
-        </template>
-      </UCollapsible>
-
-      <UCollapsible y-position="top">
-        <template #default="{ opened }">
-          <UButton
-            :label="opened ? 'Hide Tooltip' : 'Show Tooltip'"
-            variant="outlined"
-          />
-        </template>
-        <template #content>
-          <UCard class="w-48">
-            <div class="p-3 text-sm">
-              This is a tooltip-like collapsible that appears above the trigger.
-            </div>
-          </UCard>
-        </template>
-      </UCollapsible>
-    </URow>
-  `,
-});
-CustomContent.parameters = {
-  docs: {
-    story: {
-      height: "300px",
-    },
-  },
-};
+export const CloseOnContent = DefaultTemplate.bind({});
+CloseOnContent.args = { closeOnContent: true };

package/ui.dropdown/storybook/stories.ts

@@ -56,7 +56,7 @@ export default {
 } as Meta;
 
 const defaultTemplate = `
-  <UAvatar label="JD" interactive />
+  <UAvatar label="John Doe" />
 `;
 
 const DefaultTemplate: StoryFn<DefaultUDropdownArgs> = (args: DefaultUDropdownArgs) => ({
@@ -90,7 +90,7 @@ const EnumTemplate: StoryFn<EnumUDropdownArgs> = (args: EnumUDropdownArgs, { arg
         :key="option"
         #default="{ opened }"
       >
-        <UButton :[args.enum]="option" :label="option" :class="args.buttonClass" interactive />
+        <UButton :[args.enum]="option" :label="option" :class="args.buttonClass" />
       </UDropdown>
     </URow>
   `,
@@ -237,7 +237,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownArgs> = (args) => ({
           { label: 'Mike Johnson', value: '3', role: 'Product Manager' },
         ]"
       >
-        <UAvatar label="JD" interactive />
+        <UAvatar label="John Doe" />
         <template #before-option="{ option }">
           <UIcon name="person" size="xs" color="neutral" />
         </template>
@@ -250,7 +250,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownArgs> = (args) => ({
           { label: 'Mike Johnson', value: '3', role: 'Product Manager', status: 'offline', statusColor: 'grayscale' },
         ]"
       >
-        <UAvatar label="JD" interactive />
+        <UAvatar label="Jane Smith" />
         <template #option="{ option }">
           <URow align="center" gap="xs" justify="between" class="w-40">
             <UCol gap="none">
@@ -269,7 +269,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownArgs> = (args) => ({
           { label: 'Mike Johnson', value: '3', verified: false },
         ]"
       >
-        <UAvatar label="JD" interactive />
+        <UAvatar label="Mike Johnson" />
         <template #after-option="{ option }">
           <UIcon v-if="option.verified" name="verified" size="xs" color="success" />
         </template>

package/ui.dropdown-badge/storybook/stories.ts

@@ -158,6 +158,13 @@ Default.parameters = {
 
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };
+Disabled.parameters = {
+  docs: {
+    story: {
+      height: "120px",
+    },
+  },
+};
 
 export const Searchable = DefaultTemplate.bind({});
 Searchable.args = { searchable: true };
@@ -378,7 +385,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownBadgeArgs> = (args) => ({
         ]"
       >
         <template #before-option="{ option }">
-          <UAvatar :src="option.avatar" size="sm" />
+          <UAvatar :src="option.avatar" size="xs" />
         </template>
       </UDropdownBadge>
 
@@ -421,7 +428,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownBadgeArgs> = (args) => ({
         ]"
       >
         <template #option="{ option }">
-          <URow align="center" gap="xs">
+          <URow justify="between" align="center" gap="xs" block>
             <UCol gap="none">
               <UText size="sm">{{ option.label }}</UText>
               <UText variant="lifted" size="xs">{{ option.role }}</UText>
@@ -440,47 +447,13 @@ export const OptionSlots: StoryFn<DefaultUDropdownBadgeArgs> = (args) => ({
         v-model="args.afterOptionModel"
         label="After option slot"
         :options="[
-          {
-            label: 'John Doe',
-            value: '1',
-            role: 'Developer',
-            avatar: johnDoe,
-            status: 'online',
-            statusColor: 'success',
-          },
-          {
-            label: 'Jane Smith',
-            value: '2',
-            role: 'Designer',
-            avatar: emilyDavis,
-            status: 'away',
-            statusColor: 'warning',
-          },
-          {
-            label: 'Mike Johnson',
-            value: '3',
-            role: 'Product Manager',
-            avatar: alexJohnson,
-            status: 'offline',
-            statusColor: 'grayscale',
-          },
-          {
-            label: 'Sarah Wilson',
-            value: '4',
-            role: 'QA Engineer',
-            avatar: patMorgan,
-            status: 'online',
-            statusColor: 'success',
-          },
+          { label: 'John Doe', value: '1', verified: true },
+          { label: 'Jane Smith', value: '2', verified: true },
+          { label: 'Mike Johnson', value: '3', verified: false },
         ]"
       >
         <template #after-option="{ option }">
-          <UBadge
-            :label="option.status"
-            :color="option.statusColor"
-            size="sm"
-            variant="subtle"
-          />
+          <UIcon v-if="option.verified" name="verified" size="xs" color="success" />
         </template>
       </UDropdownBadge>
     </URow>

package/ui.dropdown-button/storybook/stories.ts

@@ -160,13 +160,20 @@ Default.parameters = {
 
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };
+Disabled.parameters = {
+  docs: {
+    story: {
+      height: "120px",
+    },
+  },
+};
 
 export const Searchable = DefaultTemplate.bind({});
 Searchable.args = { searchable: true };
 Searchable.parameters = {
   docs: {
     story: {
-      height: "250px",
+      height: "270px",
     },
   },
 };
@@ -176,7 +183,7 @@ SearchModelValue.args = { searchable: true, search: "Copy" };
 SearchModelValue.parameters = {
   docs: {
     story: {
-      height: "250px",
+      height: "270px",
     },
   },
 };
@@ -398,7 +405,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownButtonArgs> = (args) => ({
         ]"
       >
         <template #before-option="{ option }">
-          <UAvatar :src="option.avatar" size="sm" />
+          <UAvatar :src="option.avatar" size="xs" />
         </template>
       </UDropdownButton>
 
@@ -441,7 +448,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownButtonArgs> = (args) => ({
         ]"
       >
         <template #option="{ option }">
-          <URow align="center" gap="xs">
+          <URow justify="between" align="center" gap="xs" block>
             <UCol gap="none">
               <UText size="sm">{{ option.label }}</UText>
               <UText variant="lifted" size="xs">{{ option.role }}</UText>
@@ -460,47 +467,13 @@ export const OptionSlots: StoryFn<DefaultUDropdownButtonArgs> = (args) => ({
         v-model="args.afterOptionModel"
         label="After option slot"
         :options="[
-          {
-            label: 'John Doe',
-            value: '1',
-            role: 'Developer',
-            avatar: johnDoe,
-            status: 'online',
-            statusColor: 'success',
-          },
-          {
-            label: 'Jane Smith',
-            value: '2',
-            role: 'Designer',
-            avatar: emilyDavis,
-            status: 'away',
-            statusColor: 'warning',
-          },
-          {
-            label: 'Mike Johnson',
-            value: '3',
-            role: 'Product Manager',
-            avatar: alexJohnson,
-            status: 'offline',
-            statusColor: 'grayscale',
-          },
-          {
-            label: 'Sarah Wilson',
-            value: '4',
-            role: 'QA Engineer',
-            avatar: patMorgan,
-            status: 'online',
-            statusColor: 'success',
-          },
+          { label: 'John Doe', value: '1', verified: true },
+          { label: 'Jane Smith', value: '2', verified: true },
+          { label: 'Mike Johnson', value: '3', verified: false },
         ]"
       >
         <template #after-option="{ option }">
-          <UBadge
-            :label="option.status"
-            :color="option.statusColor"
-            size="sm"
-            variant="subtle"
-          />
+          <UIcon v-if="option.verified" name="verified" size="xs" color="success" />
         </template>
       </UDropdownButton>
     </URow>

package/ui.dropdown-link/storybook/stories.ts

@@ -98,29 +98,29 @@ const EnumTemplate: StoryFn<EnumUDropdownLinkArgs> = (
 const GroupValuesTemplate: StoryFn<DefaultUDropdownLinkArgs> = (
   args: DefaultUDropdownLinkArgs,
 ) => ({
-  components: { UDropdownLink },
+  components: { UDropdownLink, URow },
   setup() {
     return {
       args,
     };
   },
   template: `
-    <UDropdownLink
-      v-bind="args"
-      v-model="args.modelValue"
-      label="Single"
-      :config="{ listbox: 'min-w-[200px]' }"
-      class="max-w-96 mr-20"
-    />
-
-    <UDropdownLink
-      v-bind="args"
-      v-model="args.modelValueMultiple"
-      label="Multiple"
-      multiple
-      :config="{ listbox: 'min-w-[200px]' }"
-      class="mt-5 max-w-96"
-    />
+    <URow gap="2xl">
+      <UDropdownLink
+        v-bind="args"
+        v-model="args.modelValue"
+        label="Single"
+        :config="{ listbox: 'min-w-[200px]' }"
+      />
+
+      <UDropdownLink
+        v-bind="args"
+        v-model="args.modelValueMultiple"
+        label="Multiple"
+        multiple
+        :config="{ listbox: 'min-w-[200px]' }"
+      />
+    </URow>
   `,
 });
 
@@ -136,6 +136,13 @@ Default.parameters = {
 
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };
+Disabled.parameters = {
+  docs: {
+    story: {
+      height: "120px",
+    },
+  },
+};
 
 export const Searchable = DefaultTemplate.bind({});
 Searchable.args = { searchable: true };
@@ -176,7 +183,7 @@ export const ListboxXPosition = EnumTemplate.bind({});
 ListboxXPosition.args = {
   enum: "xPosition",
   label: "{enumValue}",
-  class: "w-40 py-1 px-2.5 border border-dashed border-primary",
+  config: { dropdownLink: "w-40 py-1 px-2.5 border border-dashed border-primary" },
 };
 
 export const ListboxYPosition = EnumTemplate.bind({});
@@ -364,7 +371,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownLinkArgs> = (args) => ({
         ]"
       >
         <template #before-option="{ option }">
-          <UAvatar :src="option.avatar" size="sm" />
+          <UAvatar :src="option.avatar" size="xs" />
         </template>
       </UDropdownLink>
 
@@ -407,7 +414,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownLinkArgs> = (args) => ({
         ]"
       >
         <template #option="{ option }">
-          <URow align="center" gap="xs">
+          <URow justify="between" align="center" gap="xs" block>
             <UCol gap="none">
               <UText size="sm">{{ option.label }}</UText>
               <UText variant="lifted" size="xs">{{ option.role }}</UText>
@@ -426,47 +433,13 @@ export const OptionSlots: StoryFn<DefaultUDropdownLinkArgs> = (args) => ({
         v-model="args.afterOptionModel"
         label="After option slot"
         :options="[
-          {
-            label: 'John Doe',
-            value: '1',
-            role: 'Developer',
-            avatar: johnDoe,
-            status: 'online',
-            statusColor: 'success',
-          },
-          {
-            label: 'Jane Smith',
-            value: '2',
-            role: 'Designer',
-            avatar: emilyDavis,
-            status: 'away',
-            statusColor: 'warning',
-          },
-          {
-            label: 'Mike Johnson',
-            value: '3',
-            role: 'Product Manager',
-            avatar: alexJohnson,
-            status: 'offline',
-            statusColor: 'grayscale',
-          },
-          {
-            label: 'Sarah Wilson',
-            value: '4',
-            role: 'QA Engineer',
-            avatar: patMorgan,
-            status: 'online',
-            statusColor: 'success',
-          },
+          { label: 'John Doe', value: '1', verified: true },
+          { label: 'Jane Smith', value: '2', verified: true },
+          { label: 'Mike Johnson', value: '3', verified: false },
         ]"
       >
         <template #after-option="{ option }">
-          <UBadge
-            :label="option.status"
-            :color="option.statusColor"
-            size="sm"
-            variant="subtle"
-          />
+          <UIcon v-if="option.verified" name="verified" size="xs" color="success" />
         </template>
       </UDropdownLink>
     </URow>