vueless 1.0.2-beta.21 → 1.0.2-beta.23

package/icons/storybook/asterisk.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M445.93-114.02V-398.2l-200.6 200.37-47.74-47.74L397.72-445.7h-283.7v-68.37H399.2L197.83-715.43l47.5-47.98 200.6 200.37v-283.18h68.14v283.7L715.2-763.41l47.97 47.98L561.8-514.07h284.42v68.37H563.28l199.89 200.13-47.74 47.74-201.36-201.13v284.94h-68.14Z"/></svg>

package/icons/storybook/contract.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M227.15-74.02q-47.14 0-80.13-33.03-33-33.03-33-80.22v-142.77h120.24v-556.18h611.96v699.07q0 47.14-33 80.13-33 33-80.13 33H227.15ZM733-142.15q19.09 0 32.09-12.94 13-12.94 13-32.06v-630.7H302.63v487.81h385.46v142.89q0 19.12 12.91 32.06 12.91 12.94 32 12.94ZM362.63-640.48v-64.54h355.46v64.54H362.63Zm0 124.78v-64.78h355.46v64.78H362.63ZM226.15-142.15h393.57v-119.76H182.15v74.64q0 19.17 13 32.15 13 12.97 31 12.97Zm0 0h-44 437.57-393.57Z"/></svg>

package/icons/storybook/notifications.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M154.02-194.02v-68.13h77.85v-298.02q0-86.08 50.34-154.77 50.33-68.69 133.72-86.41v-20.56q0-26.8 18.69-45.55 18.69-18.76 45.38-18.76t45.38 18.76q18.69 18.75 18.69 45.55v20.56q83.39 17.48 133.84 86.25 50.46 68.77 50.46 154.93v298.02h77.85v68.13h-652.2ZM480-501.04Zm.12 429.17q-33.83 0-57.93-24.13t-24.1-58.02h164.06q0 33.95-24.15 58.05-24.15 24.1-57.88 24.1ZM300-262.15h360v-298.02q0-74.76-52.5-127.38Q555-740.17 480-740.17t-127.5 52.62Q300-634.93 300-560.17v298.02Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.0.2-beta.21",
+  "version": "1.0.2-beta.23",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.button/storybook/stories.ts

@@ -138,7 +138,7 @@ export const Slots: StoryFn<UButtonArgs> = (args) => ({
     <URow>
       <UButton v-bind="args" label="Profile">
         <template #left>
-          <UAvatar src="https://avatar.iran.liara.run/public" size="2xs" rounded="full" />
+          <UAvatar src="https://i.pravatar.cc/300" size="2xs" rounded="full" />
         </template>
       </UButton>
 

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

@@ -186,7 +186,7 @@ DefaultSlot.args = {
   slotTemplate: `
     <template #default>
       <URow align="center" gap="xs">
-        <UAvatar size="3xs" src="https://avatar.iran.liara.run/public/boy" />
+        <UAvatar size="3xs" src="https://i.pravatar.cc/300" />
         <span class="text-small font-semibold">John Doe</span>
       </URow>
     </template>

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

@@ -197,10 +197,17 @@ DefaultSlot.args = {
   ],
   slotTemplate: `
     <template #default>
-      <UAvatar size="sm" rounded="full" src="https://avatar.iran.liara.run/public" />
+      <UAvatar size="sm" rounded="full" src="https://i.pravatar.cc/300" />
     </template>
   `,
 };
+DefaultSlot.parameters = {
+  docs: {
+    story: {
+      height: "250px",
+    },
+  },
+};
 
 export const LeftSlot = DefaultTemplate.bind({});
 LeftSlot.args = {

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

@@ -165,12 +165,19 @@ DefaultSlot.args = {
     <template #default="{ opened }">
       <UAvatar
         rounded="full"
-        src="https://avatar.iran.liara.run/public"
+        src="https://i.pravatar.cc/300"
         :class="{ 'outline-medium outline-primary': opened }"
       />
     </template>
   `,
 };
+DefaultSlot.parameters = {
+  docs: {
+    story: {
+      height: "220px",
+    },
+  },
+};
 
 export const LeftSlot = DefaultTemplate.bind({});
 LeftSlot.args = {
@@ -186,7 +193,7 @@ ToggleSlot.args = {
   slotTemplate: `
     <template #toggle="{ opened, toggle }">
       <UAvatar
-        src="https://avatar.iran.liara.run/public"
+        src="https://i.pravatar.cc/300"
         size="3xs"
         rounded="full"
         :class="{ 'outline-medium outline-primary': opened }"

package/ui.form-calendar/UCalendarDayView.vue

@@ -168,6 +168,8 @@ function getDayState(day: Date) {
     hoveredDay.value &&
     !props.selectedDateTo &&
     !dateIsOutOfRange(day, props.selectedDate, hoveredDay.value, props.locale, props.dateFormat);
+  const isLastRangePreview =
+    hoveredDay.value && isInRangePreview && isSameDay(day, hoveredDay.value);
 
   const isInRangePreviewAnotherMonth = isInRangePreview && isAnotherMonthDay;
 
@@ -185,6 +187,7 @@ function getDayState(day: Date) {
     isRangeSameDay,
     isInRangePreview,
     isInRangePreviewAnotherMonth,
+    isLastRangePreview,
   };
 }
 
@@ -341,6 +344,21 @@ defineExpose({
           @mouseover="onMouseoverDay(day)"
         />
 
+        <UButton
+          v-else-if="getDayState(day).isLastRangePreview"
+          tabindex="-1"
+          variant="ghost"
+          color="primary"
+          size="md"
+          square
+          v-bind="lastDayInRangeAttrs"
+          :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
+          :label="formatDate(day, 'j', locale)"
+          @mousedown.prevent.capture
+          @click="onClickDay(day)"
+          @mouseover="onMouseoverDay(day)"
+        />
+
         <UButton
           v-else-if="
             getDayState(day).isAnotherMonthDayInRange ||

package/ui.form-checkbox/storybook/stories.ts

@@ -10,6 +10,11 @@ import UCheckbox from "../../ui.form-checkbox/UCheckbox.vue";
 import UCheckboxGroup from "../../ui.form-checkbox-group/UCheckboxGroup.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
 import UCol from "../../ui.container-col/UCol.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+import ULink from "../../ui.button-link/ULink.vue";
+import UText from "../../ui.text-block/UText.vue";
+import URow from "../../ui.container-row/URow.vue";
+import UChip from "../../ui.other-chip/UChip.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -37,7 +42,7 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<UCheckboxArgs> = (args: UCheckboxArgs) => ({
-  components: { UCheckbox, UBadge },
+  components: { UCheckbox, UBadge, UIcon, ULink, UText, URow, UChip },
   setup: () => ({ args, slots: getSlotNames(UCheckbox.__name) }),
   template: `
     <UCheckbox v-bind="args" v-model="args.modelValue">
@@ -162,7 +167,10 @@ export const LabelSlot = DefaultTemplate.bind({});
 LabelSlot.args = {
   slotTemplate: `
     <template #label>
-      <UBadge label="This option is required" color="error" size="sm" />
+      <URow gap="2xs" align="center">
+        <UText>I agree to the <ULink label="Privacy Policy" /></UText>
+        <UIcon name="contract" size="xs" />
+      </URow>
     </template>
   `,
 };
@@ -171,7 +179,9 @@ export const BottomSlot = DefaultTemplate.bind({});
 BottomSlot.args = {
   slotTemplate: `
     <template #bottom>
-      <UBadge label="Subscription is optional" color="success" size="sm" />
+      <UChip icon="arrow_outward" size="3xs" class="mt-2">
+        <ULink label="Learn more" size="sm" class="mr-1.5" />
+      </UChip>
     </template>
   `,
 };

package/ui.form-checkbox-group/UCheckboxGroup.vue

@@ -110,7 +110,7 @@ const { getDataTest, groupLabelAttrs, groupCheckboxAttrs, listAttrs } =
           :description="option.description"
           :disabled="disabled"
           v-bind="groupCheckboxAttrs"
-          :data-test="getDataTest('item-${index}')"
+          :data-test="getDataTest(`item-${index}`)"
         />
       </slot>
     </div>

package/ui.form-checkbox-group/storybook/stories.ts

@@ -12,6 +12,9 @@ import UAlert from "../../ui.text-alert/UAlert.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
+import UText from "../../ui.text-block/UText.vue";
+import ULink from "../../ui.button-link/ULink.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -47,7 +50,7 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<UCheckboxGroupArgs> = (args: UCheckboxGroupArgs) => ({
-  components: { UCheckboxGroup, UCheckbox, UAlert, URow, UCol, UBadge },
+  components: { UCheckboxGroup, UCheckbox, UAlert, URow, UCol, UBadge, UText, ULink, UIcon },
   setup: () => ({ args, slots: getSlotNames(UCheckboxGroup.__name) }),
   template: `
     <UCol>
@@ -124,7 +127,10 @@ export const LabelSlot = DefaultTemplate.bind({});
 LabelSlot.args = {
   slotTemplate: `
     <template #label>
-      <UBadge label="At least one option is required" color="success" />
+      <URow gap="2xs" align="center">
+        <UText>Select your <ULink label="notification preferences" /></UText>
+        <UIcon name="notifications" size="xs" />
+      </URow>
     </template>
   `,
 };

package/ui.form-date-picker/storybook/stories.ts

@@ -251,9 +251,7 @@ export const IconProps: StoryFn<DefaultUDatePickerArgs> = (args) => ({
 
 export const Slots: StoryFn<DefaultUDatePickerArgs> = (args) => ({
   components: { UDatePicker, URow, UButton },
-  setup() {
-    return { args };
-  },
+  setup: () => ({ args }),
   template: `
     <URow align="stretch">
       <UDatePicker
@@ -263,9 +261,16 @@ export const Slots: StoryFn<DefaultUDatePickerArgs> = (args) => ({
         :config="{ datepickerInput: { leftSlot: 'pl-0' } }"
       >
         <template #left>
-          <UButton label="Export" size="xs" class="h-full rounded-r-none" />
+          <UButton
+            label="Today"
+            size="sm"
+            variant="ghost"
+            class="h-full rounded-r-none"
+            @click="args.modelValue = new Date()"
+          />
         </template>
       </UDatePicker>
+
       <UDatePicker
         v-bind="args"
         v-model="args.modelValue"
@@ -273,7 +278,13 @@ export const Slots: StoryFn<DefaultUDatePickerArgs> = (args) => ({
         :config="{ datepickerInput: { rightSlot: 'pr-0' } }"
       >
         <template #right>
-          <UButton label="Schedule" size="xs" class="h-full rounded-l-none" />
+          <UButton
+            label="Clear"
+            size="sm"
+            variant="ghost"
+            class="h-full rounded-l-none"
+            @click="args.modelValue = null"
+          />
         </template>
       </UDatePicker>
     </URow>

package/ui.form-date-picker-range/UDatePickerRange.vue

@@ -305,7 +305,7 @@ function activate() {
     adjustPositionY();
     adjustPositionX();
 
-    menuRef.value?.focus();
+    menuRef.value?.focus({ preventScroll: true });
   });
 }
 

package/ui.form-input/config.ts

@@ -1,5 +1,14 @@
 export default /*tw*/ {
-  inputLabel: "{ULabel}",
+  inputLabel: {
+    base: "{ULabel}",
+    content: "w-full",
+    variants: {
+      labelAlign: {
+        right: "w-full",
+        left: "w-full",
+      },
+    },
+  },
   wrapper: {
     base: `
       flex w-full relative bg-default transition

package/ui.form-input/storybook/stories.ts

@@ -20,6 +20,7 @@ import { ref } from "vue";
 interface UInputArgs extends Props {
   slotTemplate?: string;
   enum: "labelAlign" | "size" | "validationRule";
+  gap?: string;
 }
 
 export default {
@@ -58,7 +59,7 @@ const EnumTemplate: StoryFn<UInputArgs> = (args: UInputArgs, { argTypes }) => ({
   components: { UInput, UCol },
   setup: () => ({ args, argTypes, getArgs }),
   template: `
-    <UCol>
+    <UCol :gap="args.gap">
       <UInput
         v-for="option in argTypes?.[args.enum]?.options"
         v-bind="getArgs(args, option)"
@@ -98,8 +99,10 @@ export const LabelAlign = EnumTemplate.bind({});
 LabelAlign.args = {
   enum: "labelAlign",
   label: "Full Name",
+  description: "Provide additional details if necessary.",
   modelValue: "",
   placeholder: "{enumValue}",
+  gap: "2xl",
 };
 
 export const Sizes = EnumTemplate.bind({});

package/ui.form-label/config.ts

@@ -40,7 +40,7 @@ export default /*tw*/ {
         right: "font-normal",
       },
       error: {
-        true: "text-error group-focus-within:text-error",
+        true: "text-error group-focus-within:!text-error",
       },
       disabled: {
         true: "text-lifted cursor-not-allowed",

package/ui.form-label/storybook/stories.ts

@@ -11,6 +11,9 @@ import UCol from "../../ui.container-col/UCol.vue";
 import UText from "../../ui.text-block/UText.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
+import URow from "../../ui.container-row/URow.vue";
+import ULink from "../../ui.button-link/ULink.vue";
+import UChip from "../../ui.other-chip/UChip.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -49,7 +52,7 @@ export default {
 const defaultTemplate = "johndoe@example.com";
 
 const DefaultTemplate: StoryFn<ULabelArgs> = (args: ULabelArgs) => ({
-  components: { ULabel, UText, UIcon, UBadge },
+  components: { ULabel, UText, UIcon, UBadge, URow, ULink, UChip },
   setup: () => ({ args, slots: getSlotNames(ULabel.__name) }),
   template: `
     <ULabel v-bind="args">
@@ -111,7 +114,12 @@ LabelSlot.args = {
   label: "Email Address",
   slotTemplate: `
     <template #label="{ label }">
-      <UBadge :label="label" color="success" />
+      <URow align="center" gap="xs">
+        <UIcon name="mail" size="sm" class="text-primary" />
+        <UChip icon="asterisk" color="error" size="2xs">
+          <UText :label="label" class="mr-2" />
+        </UChip>
+      </URow>
     </template>
   `,
 };
@@ -120,7 +128,10 @@ export const BottomSlot = DefaultTemplate.bind({});
 BottomSlot.args = {
   slotTemplate: `
     <template #bottom>
-      <UBadge label="Your opinion is important for us!" color="success" class="max-w-fit" />
+      <URow align="center" gap="2xs" class="mt-1">
+        <UIcon name="error" size="xs" />
+        <UText>Invalid email address. <ULink label="Need help?" /></UText>
+      </URow>
     </template>
   `,
 };

package/ui.form-listbox/storybook/stories.ts

@@ -48,19 +48,12 @@ export default {
 
 const DefaultTemplate: StoryFn<DefaultUListboxArgs> = (args: DefaultUListboxArgs) => ({
   components: { UListbox },
-  setup() {
-    const slots = getSlotNames(UListbox.__name);
-
-    const showAlert = (message: string) => alert(message);
-
-    return { args, slots, showAlert };
-  },
+  setup: () => ({ args, slots: getSlotNames(UListbox.__name) }),
   template: `
     <UListbox
       v-bind="args"
       v-model="args.modelValue"
       class="mx-4 w-[24rem]"
-      @add="showAlert('You triggered the add action!')"
     >
       ${args.slotTemplate || getSlotsFragment("")}
     </UListbox>
@@ -92,7 +85,22 @@ Searchable.args = { searchable: true };
 export const Multiple = DefaultTemplate.bind({});
 Multiple.args = { multiple: true, modelValue: [] };
 
-export const AddOption = DefaultTemplate.bind({});
+export const AddOption: StoryFn<DefaultUListboxArgs> = (args: DefaultUListboxArgs) => ({
+  components: { UListbox },
+  setup() {
+    const showAlert = (message: string) => alert(message);
+
+    return { args, showAlert };
+  },
+  template: `
+    <UListbox
+      v-bind="args"
+      v-model="args.modelValue"
+      class="mx-4 w-[24rem]"
+      @add="showAlert('You triggered the add action!')"
+    />
+  `,
+});
 AddOption.args = { addOption: true };
 AddOption.parameters = {
   docs: {

package/ui.form-radio/storybook/stories.ts

@@ -9,6 +9,8 @@ import {
 import URadio from "../../ui.form-radio/URadio.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
 import URow from "../../ui.container-row/URow.vue";
+import UText from "../../ui.text-block/UText.vue";
+import ULink from "../../ui.button-link/ULink.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -39,7 +41,7 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<URadioArgs> = (args: URadioArgs) => ({
-  components: { URadio, UBadge },
+  components: { URadio, UBadge, UText, ULink, URow },
   setup: () => ({ args, slots: getSlotNames(URadio.__name) }),
   template: `
     <URadio v-bind="args">
@@ -95,20 +97,29 @@ Colors.args = { enum: "color", label: "{enumValue}" };
 
 export const LabelSlot = DefaultTemplate.bind({});
 LabelSlot.args = {
+  name: "delivery-method",
+  label: "Courier Delivery",
+  value: "courier",
+  color: "primary",
   slotTemplate: `
     <template #label="{ label }">
-      <UBadge :label="label" color="success" />
+      <URow gap="xs" align="center">
+        <UText :label="label" />
+        <UBadge label="Recommended" color="success" size="sm" variant="soft" />
+      </URow>
     </template>
   `,
 };
 
 export const BottomSlot = DefaultTemplate.bind({});
 BottomSlot.args = {
-  name: "radio5",
-  value: "radio",
+  name: "terms",
+  label: "I agree to the Terms and Conditions",
+  value: "terms",
+  color: "primary",
   slotTemplate: `
     <template #bottom>
-      <UBadge label="Add to favorite" color="success" size="sm" />
+      <UBadge label="Required to proceed" color="warning" variant="outlined" size="sm" class="mt-2" />
     </template>
   `,
 };

package/ui.form-radio-group/storybook/stories.ts

@@ -11,6 +11,8 @@ import URadio from "../../ui.form-radio/URadio.vue";
 import UAlert from "../../ui.text-alert/UAlert.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
+import UText from "../../ui.text-block/UText.vue";
+import URow from "../../ui.container-row/URow.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -43,18 +45,12 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<URadioGroupArgs> = (args: URadioGroupArgs) => ({
-  components: { URadioGroup, URadio, UAlert, UCol, UBadge },
+  components: { URadioGroup, URadio, UAlert, UCol, UBadge, UText, URow },
   setup: () => ({ args, slots: getSlotNames(URadioGroup.__name) }),
   template: `
     <UCol gap="2xl">
       <URadioGroup v-bind="args" v-model="args.modelValue">
-        <URadio
-          v-for="(radio, index) in args.options"
-          :key="index"
-          v-bind="radio"
-        >
-          ${args.slotTemplate || getSlotsFragment("")}
-        </URadio>
+        ${args.slotTemplate || getSlotsFragment("")}
       </URadioGroup>
 
       <UAlert size="sm" variant="ghost" color="success" bordered>
@@ -126,7 +122,10 @@ LabelSlot.args = {
   name: "LabelSlot",
   slotTemplate: `
     <template #label="{ label }">
-      <UBadge :label="label" color="success" variant="soft" />
+      <URow gap="xs" align="center">
+        <UBadge label="Cannot be changed" color="warning" size="sm" variant="outlined" />
+        <UText :label="label" />
+      </URow>
     </template>
   `,
 };

package/ui.form-select/config.ts

@@ -1,5 +1,14 @@
 export default /*tw*/ {
-  selectLabel: "{ULabel}",
+  selectLabel: {
+    base: "{ULabel}",
+    content: "w-full",
+    variants: {
+      labelAlign: {
+        right: "w-full",
+        left: "w-full",
+      },
+    },
+  },
   wrapper: {
     base: `
       flex flex-row-reverse justify-between w-full min-h-full box-border relative

package/ui.form-select/storybook/stories.ts

@@ -27,6 +27,7 @@ import type { Props } from "../types.ts";
 interface USelectArgs extends Props {
   slotTemplate?: string;
   enum: "size" | "openDirection" | "labelAlign";
+  gap?: string;
 }
 
 interface SelectOption {
@@ -91,7 +92,7 @@ const EnumTemplate: StoryFn<USelectArgs> = (args: USelectArgs, { argTypes }) =>
   components: { USelect, UCol },
   setup: () => ({ args, argTypes, getArgs }),
   template: `
-    <UCol>
+    <UCol :gap="args.gap">
       <USelect
         v-for="option in argTypes?.[args.enum]?.options"
         v-bind="getArgs(args, option)"
@@ -152,7 +153,12 @@ export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };
 
 export const LabelAlign = EnumTemplate.bind({});
-LabelAlign.args = { enum: "labelAlign", label: "{enumValue}" };
+LabelAlign.args = {
+  enum: "labelAlign",
+  label: "{enumValue}",
+  description: "Select a city from the list.",
+  gap: "2xl",
+};
 
 export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size", multiple: true, modelValue: [], label: "{enumValue}" };

package/ui.form-switch/storybook/stories.ts

@@ -9,7 +9,8 @@ import {
 import USwitch from "../../ui.form-switch/USwitch.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import URow from "../../ui.container-row/URow.vue";
-import UBadge from "../../ui.text-badge/UBadge.vue";
+import UText from "../../ui.text-block/UText.vue";
+import ULink from "../../ui.button-link/ULink.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -37,7 +38,7 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<USwitchArgs> = (args: USwitchArgs) => ({
-  components: { USwitch, UIcon, UBadge },
+  components: { USwitch, UIcon, UText, ULink, URow },
   setup: () => ({ args, slots: getSlotNames(USwitch.__name) }),
   template: `
     <USwitch v-bind="args" v-model="args.modelValue">
@@ -96,7 +97,10 @@ LabelSlot.args = {
   label: "Enable Notifications",
   slotTemplate: `
     <template #label="{ label }">
-      <UBadge :label="label" color="success" />
+      <URow gap="2xs" align="center">
+        <UText>I agree to the <ULink label="Privacy Policy" /></UText>
+        <UIcon name="contract" size="xs" />
+      </URow>
     </template>
   `,
 };

package/ui.form-textarea/config.ts

@@ -1,5 +1,14 @@
 export default /*tw*/ {
-  textareaLabel: "{ULabel}",
+  textareaLabel: {
+    base: "{ULabel}",
+    content: "w-full",
+    variants: {
+      labelAlign: {
+        right: "w-full",
+        left: "w-full",
+      },
+    },
+  },
   slot: "flex items-center justify-center whitespace-nowrap gap-1 rounded-medium",
   leftSlot: "{>slot} pl-2.5 rounded-r-none",
   rightSlot: "{>slot} pr-2.5 rounded-l-none",

package/ui.form-textarea/storybook/stories.ts

@@ -19,6 +19,7 @@ import type { Props } from "../types.ts";
 interface UTextareaArgs extends Props {
   slotTemplate?: string;
   enum: "size" | "labelAlign";
+  gap?: string;
 }
 
 export default {
@@ -58,7 +59,7 @@ const EnumTemplate: StoryFn<UTextareaArgs> = (args: UTextareaArgs, { argTypes })
   components: { UTextarea, UCol },
   setup: () => ({ args, argTypes, getArgs }),
   template: `
-    <UCol>
+    <UCol :gap="args.gap">
       <UTextarea
         v-for="option in argTypes?.[args.enum]?.options"
         v-bind="getArgs(args, option)"
@@ -86,7 +87,11 @@ export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };
 
 export const LabelAlign = EnumTemplate.bind({});
-LabelAlign.args = { enum: "labelAlign", description: "{enumValue}" };
+LabelAlign.args = {
+  enum: "labelAlign",
+  description: "{enumValue}",
+  gap: "2xl",
+};
 
 export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size", description: "{enumValue}" };

package/ui.other-chip/storybook/stories.ts

@@ -96,7 +96,7 @@ Text.args = {
 export const Inset = DefaultTemplate.bind({});
 Inset.args = {
   inset: true,
-  slotTemplate: `<UAvatar src="https://avatar.iran.liara.run/public/11" rounded="full" />`,
+  slotTemplate: `<UAvatar src="https://i.pravatar.cc/300" rounded="full" />`,
 };
 
 export const Size = EnumTemplate.bind({});