vueless 1.4.7-beta.5 → 1.4.7-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.7-beta.5",
+  "version": "1.4.7-beta.6",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
@@ -58,7 +58,7 @@
     "@vue/eslint-config-typescript": "^14.7.0",
     "@vue/test-utils": "^2.4.8",
     "@vue/tsconfig": "^0.9.1",
-    "@vueless/storybook": "^1.5.3",
+    "@vueless/storybook": "^1.5.4",
     "eslint": "^10.2.1",
     "eslint-plugin-storybook": "^10.3.5",
     "eslint-plugin-vue": "^10.9.0",

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

@@ -25,7 +25,7 @@ interface UAccordionArgs extends Props {
 }
 
 export default {
-  id: "5040",
+  id: "5050",
   title: "Containers / Accordion",
   component: UAccordion,
   args: {

package/ui.container-accordion-item/storybook/stories.ts

@@ -23,7 +23,7 @@ interface UAccordionItemArgs extends Props {
 }
 
 export default {
-  id: "5050",
+  id: "5040",
   title: "Containers / Accordion Item",
   component: UAccordionItem,
   args: {

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

@@ -44,34 +44,34 @@ export default {
   },
 } as Meta;
 
-const defaultTemplate = `
-  <UCol
-    justify="between"
-    class="h-full"
-  >
-    <URow
-      v-for="(cookie, index) in cookieSettings"
-      :key="cookie.label"
-      justify="between"
-      align="center"
-      block
-    >
-      <UCol gap="2xs">
-        <UHeader
-          :label="cookie.label"
-          class="text-sm"
-        />
-        <UText
-          :label="cookie.description"
-          size="sm"
-          variant="lifted"
-        />
-      </UCol>
-
-      <USwitch v-model="cookieValues[index]" />
-    </URow>
-  </UCol>
-`;
+const defaultTemplate = (isInvertedExpr: string = "false") => {
+  return `
+    <UCol justify="between" block class="h-full">
+      <URow
+        v-for="(cookie, index) in cookieSettings"
+        :key="cookie.label"
+        align="center"
+        block
+        gap="sm"
+      >
+        <UCol gap="2xs" class="min-w-0 flex-1">
+          <UHeader
+            :label="cookie.label"
+            class="text-sm"
+            :class="{ 'text-inverted': ${isInvertedExpr} }"
+          />
+          <UText
+            :label="cookie.description"
+            size="sm"
+            variant="lifted"
+          />
+        </UCol>
+
+        <USwitch v-model="cookieValues[index]" class="shrink-0" />
+      </URow>
+    </UCol>
+  `;
+};
 
 const cookieSettings = ref([
   {
@@ -95,7 +95,7 @@ const DefaultTemplate: StoryFn<UCardArgs> = (args: UCardArgs) => ({
   setup: () => ({ args, slots: getSlotNames(UCard.__name), cookieSettings, cookieValues }),
   template: `
     <UCard v-bind="args" class="max-w-96">
-      ${args.slotTemplate || getSlotsFragment(defaultTemplate)}
+      ${args.slotTemplate || getSlotsFragment(defaultTemplate())}
     </UCard>
   `,
 });
@@ -109,9 +109,10 @@ const EnumTemplate: StoryFn<UCardArgs> = (args: UCardArgs, { argTypes }) => ({
         v-for="option in argTypes?.[args.enum]?.options"
         v-bind="getArgs(args, option)"
         :key="option"
+        :config="{ title: option === 'inverted' ? 'text-inverted' : 'text-default' }"
         class="max-w-96"
       >
-        ${defaultTemplate}
+        ${defaultTemplate("option === 'inverted'")}
       </UCard>
     </URow>
   `,
@@ -135,7 +136,7 @@ NoDivided.args = {
     <template #footer-left>
       <UButton size="sm" label="Save" variant="subtle" />
     </template>
-    ${defaultTemplate}
+    ${defaultTemplate()}
   `,
 };
 
@@ -145,7 +146,7 @@ BeforeTitleSlot.args = {
     <template #before-title>
       <UIcon name="cookie" color="success" size="sm" />
     </template>
-    ${defaultTemplate}
+    ${defaultTemplate()}
   `,
 };
 
@@ -155,7 +156,7 @@ TitleSlot.args = {
     <template #title="{ title }">
       <UHeader :label="title" color="primary" />
     </template>
-    ${defaultTemplate}
+    ${defaultTemplate()}
   `,
 };
 
@@ -165,7 +166,7 @@ AfterTitleSlot.args = {
     <template #after-title>
       <UIcon name="cookie" color="success" size="sm" />
     </template>
-    ${defaultTemplate}
+    ${defaultTemplate()}
   `,
 };
 
@@ -175,18 +176,18 @@ ActionsSlot.args = {
   slotTemplate: `
     <template #actions>
       <URow align="center" class="max-w-fit">
-        <ULink label="Learn more" />
-        <UButton size="sm" label="Manage" variant="subtle" />
+        <ULink label="Learn more" size="sm" />
+        <UButton label="Manage" variant="subtle" size="xs" />
       </URow>
     </template>
-    ${defaultTemplate}
+    ${defaultTemplate()}
   `,
 };
 
 export const FooterLeftSlot = DefaultTemplate.bind({});
 FooterLeftSlot.args = {
   slotTemplate: `
-    ${defaultTemplate}
+    ${defaultTemplate()}
     <template #footer-left>
       <UButton size="sm" label="Cancel" variant="outlined" />
     </template>
@@ -196,7 +197,7 @@ FooterLeftSlot.args = {
 export const FooterRightSlot = DefaultTemplate.bind({});
 FooterRightSlot.args = {
   slotTemplate: `
-    ${defaultTemplate}
+    ${defaultTemplate()}
     <template #footer-right>
       <UButton size="sm" label="Save" />
     </template>

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

@@ -264,7 +264,7 @@ WithoutDivider.args = {
   slotTemplate: `
     ${defaultTemplate}
     <template #footer-left>
-      <UButton label="Back" color="neutral" variant="subtle" />
+      <UButton label="Back" color="neutral" variant="subtle" block />
     </template>`,
 };
 WithoutDivider.parameters = {
@@ -404,7 +404,7 @@ FooterRightSlot.args = {
     </template>
 
     <template #footer-right>
-      <UButton label="Submit" variant="subtle" />
+      <UButton label="Not now" variant="subtle" color="neutral" />
     </template>
   `,
 };

package/ui.container-modal-confirm/storybook/stories.ts

@@ -27,6 +27,10 @@ interface UModalConfirmArgs extends Props {
   modelValues?: UnknownObject;
 }
 
+const confirmModalDocsLayout = {
+  innerWrapper: "w-full max-h-full",
+};
+
 export default {
   id: "5080",
   title: "Containers / Modal Confirm",
@@ -35,6 +39,9 @@ export default {
     title: "Confirm Subscription Upgrade",
     confirmLabel: "Confirm",
     modelValue: true,
+    config: {
+      confirmModal: confirmModalDocsLayout,
+    },
   },
   argTypes: {
     ...getArgTypes(UModalConfirm.__name),
@@ -152,7 +159,14 @@ export const Inner: StoryFn<UModalConfirmArgs> = (args: UModalConfirmArgs) => ({
       resetBodyOverflow();
     }
 
-    return { args, showMainModal, showInnerModal, openMainModal, openInnerModal };
+    return {
+      args,
+      showMainModal,
+      showInnerModal,
+      openMainModal,
+      openInnerModal,
+      confirmModalDocsLayout,
+    };
   },
   template: `
     <div>
@@ -181,6 +195,7 @@ export const Inner: StoryFn<UModalConfirmArgs> = (args: UModalConfirmArgs) => ({
           "
           confirm-label="Agree"
           inner
+          :config="{ confirmModal: confirmModalDocsLayout }"
         >
           <UText label="Click Agree to proceed with subscription upgrade." />
         </UModalConfirm>
@@ -291,7 +306,7 @@ AfterTitleSlot.args = {
 
 export const ActionsSlot = DefaultTemplate.bind({});
 ActionsSlot.args = {
-  config: { confirmModal: { closeButton: "p-0" } },
+  config: { confirmModal: { closeButton: "p-0", innerWrapper: "w-full max-h-full" } },
   slotTemplate: `
     <template #actions="{ close }">
       <UButton

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

@@ -35,6 +35,7 @@ export default {
   component: UPage,
   args: {
     title: "Join Our Community",
+    config: { wrapper: "min-h-max", page: "min-h-max" },
   },
   argTypes: {
     ...getArgTypes(UPage.__name),
@@ -142,7 +143,11 @@ const EnumTemplate: StoryFn<UPageArgs> = (args: UPageArgs, { argTypes }) => ({
         v-for="option in argTypes?.[args.enum]?.options"
         v-bind="getArgs(args, option)"
         :key="option"
-        :config="{ wrapper: 'min-h-max', page: 'min-h-max mb-4' }"
+        :config="{
+          wrapper: 'min-h-max',
+          page: 'min-h-max mb-4',
+          title: option === 'inverted' ? 'text-inverted' : 'text-default'
+        }"
       >
         ${defaultTemplate}
       </UPage>

package/ui.data-table/storybook/stories.ts

@@ -184,7 +184,7 @@ Loading.parameters = {
 
 export const EmptyCellLabel = DefaultTemplate.bind({});
 EmptyCellLabel.args = {
-  emptyCellLabel: "---",
+  emptyCellLabel: "NO DATA",
   rows: [
     {
       id: getRandomId(),

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

@@ -168,13 +168,10 @@ export const Slots: StoryFn<UCheckboxArgs> = (args) => ({
         label="Email me product updates"
       >
         <template #description>
-          <URow align="center" gap="2xs" class="text-neutral">
-            <UIcon name="mail" size="xs" class="mt-0.5" color="primary" />
-            <UText size="sm">
-              Unsubscribe anytime.
-              <ULink label="Privacy policy" underlined size="sm" />.
-            </UText>
-          </URow>
+          <UText size="sm" variant="lifted">
+            Unsubscribe anytime, see our
+            <ULink label="privacy policy" underlined size="sm" />.
+          </UText>
         </template>
       </UCheckbox>
 
@@ -185,16 +182,13 @@ export const Slots: StoryFn<UCheckboxArgs> = (args) => ({
         :error="true"
       >
         <template #error>
-          <URow align="center" gap="2xs">
-            <UIcon name="error" size="xs" color="error" />
-            <UText size="sm" color="error">
-              <ul>
-                <li>You must accept the terms to continue</li>
-                <li>This checkbox is required for registration</li>
-                <li>Clear the error by checking the box above</li>
-              </ul>
-            </UText>
-          </URow>
+          <UText size="sm" color="error">
+            <ul>
+              <li>You must accept the terms to continue</li>
+              <li>This checkbox is required for registration</li>
+              <li>Clear the error by checking the box above</li>
+            </ul>
+          </UText>
         </template>
       </UCheckbox>
     </UCol>

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

@@ -222,9 +222,9 @@ export const Slots: StoryFn<UCheckboxGroupArgs> = (args) => ({
         <template #description>
           <URow align="center" gap="2xs" class="text-neutral">
             <UIcon name="notifications" size="xs" color="primary" />
-            <UText size="sm">
-              You can change this later.
-              <ULink label="Notification settings" underlined size="sm" />.
+            <UText size="sm" variant="lifted">
+              You can change this later in
+              <ULink label="notification settings" underlined size="sm" />.
             </UText>
           </URow>
         </template>

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

@@ -418,13 +418,10 @@ export const Slots: StoryFn<DefaultUDatePickerArgs> = (args) => ({
           class="w-full"
         >
           <template #description>
-            <URow align="center" gap="2xs" class="text-neutral">
-              <UIcon name="event" size="xs" color="primary" />
-              <UText size="sm">
-                Uses your local timezone.
-                <ULink label="Date policy" underlined size="sm" />.
-              </UText>
-            </URow>
+            <UText size="sm" variant="lifted">
+              Uses your local timezone, see our
+              <ULink label="date policy" underlined size="sm" />.
+            </UText>
           </template>
         </UDatePicker>
 
@@ -436,19 +433,24 @@ export const Slots: StoryFn<DefaultUDatePickerArgs> = (args) => ({
           class="w-full"
         >
           <template #error>
-            <URow align="center" gap="2xs">
-              <UIcon name="error" size="xs" color="error" />
-              <UText size="sm" color="error">
-                <ul>
-                  <li>The selected date is not available</li>
-                  <li>Pick a day within the allowed range</li>
-                  <li>Weekends and holidays are excluded</li>
-                </ul>
-              </UText>
-            </URow>
+            <UText size="sm" color="error">
+              <ul>
+                <li>The selected date is not available</li>
+                <li>Pick a day within the allowed range</li>
+                <li>Weekends and holidays are excluded</li>
+              </ul>
+            </UText>
           </template>
         </UDatePicker>
       </URow>
     </UCol>
   `,
 });
+
+Slots.parameters = {
+  docs: {
+    story: {
+      height: "550px",
+    },
+  },
+};

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

@@ -354,13 +354,10 @@ export const Slots: StoryFn<DefaultUDatePickerRangeArgs> = (args) => ({
           class="w-full"
         >
           <template #description>
-            <URow align="center" gap="2xs" class="text-neutral">
-              <UIcon name="date_range" size="xs" color="primary" />
-              <UText size="sm">
-                Inclusive of start and end.
-                <ULink label="Fiscal calendar" underlined size="sm" />.
-              </UText>
-            </URow>
+            <UText size="sm" variant="lifted">
+              Inclusive of start and end, see the
+              <ULink label="fiscal calendar" underlined size="sm" />.
+            </UText>
           </template>
         </UDatePickerRange>
 
@@ -373,16 +370,13 @@ export const Slots: StoryFn<DefaultUDatePickerRangeArgs> = (args) => ({
           class="w-full"
         >
           <template #error>
-            <URow align="center" gap="2xs">
-              <UIcon name="error" size="xs" color="error" />
-              <UText size="sm" color="error">
-                <ul>
-                  <li>End date must be after the start date</li>
-                  <li>Range cannot span more than 30 days</li>
-                  <li>Select both dates from the calendar</li>
-                </ul>
-              </UText>
-            </URow>
+            <UText size="sm" color="error">
+              <ul>
+                <li>End date must be after the start date</li>
+                <li>Range cannot span more than 30 days</li>
+                <li>Select both dates from the calendar</li>
+              </ul>
+            </UText>
           </template>
         </UDatePickerRange>
       </URow>

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

@@ -245,13 +245,10 @@ export const Slots: StoryFn<UInputArgs> = (args) => ({
       <URow block>
         <UInput v-model="descriptionSlotValue" label="Display name">
           <template #description>
-            <URow align="center" gap="2xs" class="text-neutral">
-              <UIcon name="info" size="xs" color="primary" />
-              <UText size="sm">
-                Shown on your public profile. Read the
-                <ULink label="naming policy" underlined size="sm" />.
-              </UText>
-            </URow>
+            <UText size="sm" variant="lifted">
+              Shown on your public profile, read the
+              <ULink label="naming policy" underlined size="sm" />.
+            </UText>
           </template>
         </UInput>
 
@@ -262,7 +259,6 @@ export const Slots: StoryFn<UInputArgs> = (args) => ({
         >
           <template #error>
             <URow align="center" gap="2xs">
-              <UIcon name="error" size="xs" color="error" />
               <UText size="sm" color="error">
                 <ul>
                   <li>This field failed validation</li>

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

@@ -168,13 +168,10 @@ export const Slots: StoryFn<UInputFileArgs> = (args) => ({
         label="Upload document"
       >
         <template #description>
-          <URow align="center" gap="2xs">
-            <UIcon name="description" size="xs" color="primary" />
-            <UText size="sm">
-              PDF or image, max 5MB.
-              <ULink label="See requirements" underlined size="sm" />.
-            </UText>
-          </URow>
+          <UText size="sm" variant="lifted">
+            PDF or image, max 5MB, see
+            <ULink label="requirements" underlined size="sm" />.
+          </UText>
         </template>
       </UInputFile>
 
@@ -185,16 +182,13 @@ export const Slots: StoryFn<UInputFileArgs> = (args) => ({
         :error="true"
       >
         <template #error>
-          <URow align="center" gap="2xs">
-            <UIcon name="error" size="xs" color="error" />
-            <UText size="sm" color="error">
-              <ul>
-                <li>File type is not accepted for this field</li>
-                <li>Maximum file size has been exceeded</li>
-                <li>Choose another file and upload again</li>
-              </ul>
-            </UText>
-          </URow>
+          <UText size="sm" color="error">
+            <ul>
+              <li>File type is not accepted for this field</li>
+              <li>Maximum file size has been exceeded</li>
+              <li>Choose another file and upload again</li>
+            </ul>
+          </UText>
         </template>
       </UInputFile>
     </UCol>

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

@@ -247,13 +247,10 @@ export const Slots: StoryFn<UInputNumberArgs> = (args) => ({
       <URow block>
         <UInputNumber v-model="descriptionSlotValue" label="Amount">
           <template #description>
-            <URow align="center" gap="2xs" class="text-neutral">
-              <UIcon name="payments" size="xs" color="primary" />
-              <UText size="sm">
-                Net amount in
-                <ULink label="account currency" underlined size="sm" />.
-              </UText>
-            </URow>
+            <UText size="sm" variant="lifted">
+              Net amount in
+              <ULink label="account currency" underlined size="sm" />.
+            </UText>
           </template>
         </UInputNumber>
 
@@ -263,16 +260,13 @@ export const Slots: StoryFn<UInputNumberArgs> = (args) => ({
           :error="true"
         >
           <template #error>
-            <URow align="center" gap="2xs">
-              <UIcon name="error" size="xs" color="error" />
-              <UText size="sm" color="error">
-                <ul>
-                  <li>Value is outside the allowed range</li>
-                  <li>Use up to two decimal places for this currency</li>
-                  <li>Enter a number greater than zero</li>
-                </ul>
-              </UText>
-            </URow>
+            <UText size="sm" color="error">
+              <ul>
+                <li>Value is outside the allowed range</li>
+                <li>Use up to two decimal places for this currency</li>
+                <li>Enter a number greater than zero</li>
+              </ul>
+            </UText>
           </template>
         </UInputNumber>
       </URow>

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

@@ -210,13 +210,10 @@ export const Slots: StoryFn<UInputPasswordArgs> = (args) => ({
           label="Password"
         >
           <template #description>
-            <URow align="center" gap="2xs" class="text-neutral">
-              <UIcon name="shield" size="xs" color="primary" />
-              <UText size="sm">
-                Minimum 8 characters.
-                <ULink label="Password rules" underlined size="sm" />.
-              </UText>
-            </URow>
+            <UText size="sm" variant="lifted">
+              Minimum 8 characters, see
+              <ULink label="password rules" underlined size="sm" />.
+            </UText>
           </template>
         </UInputPassword>
 
@@ -226,16 +223,13 @@ export const Slots: StoryFn<UInputPasswordArgs> = (args) => ({
           :error="true"
         >
           <template #error>
-            <URow align="center" gap="2xs">
-              <UIcon name="error" size="xs" color="error" />
-              <UText size="sm" color="error">
-                <ul>
-                  <li>Password does not meet strength requirements</li>
-                  <li>Use at least 8 characters with mixed case and numbers</li>
-                  <li>Avoid common words and repeated characters</li>
-                </ul>
-              </UText>
-            </URow>
+            <UText size="sm" color="error">
+              <ul>
+                <li>Password does not meet strength requirements</li>
+                <li>Use at least 8 characters with mixed case and numbers</li>
+                <li>Avoid common words and repeated characters</li>
+              </ul>
+            </UText>
           </template>
         </UInputPassword>
       </URow>

package/ui.form-input-rating/UInputRating.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, useTemplateRef } from "vue";
+import { computed, ref, useId, useTemplateRef } from "vue";
 
 import { useUI } from "../composables/useUI";
 import { hasSlotContent } from "../utils/helper";
@@ -27,6 +27,7 @@ const emit = defineEmits([
 ]);
 
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
+const instanceId = useId();
 
 const hovered = ref<number | null>(null);
 const preventHover = ref(false);
@@ -66,6 +67,10 @@ function onMouseHover(overStar: number | null = null) {
   }
 }
 
+function getStarInputId(index: number) {
+  return `${props.id ?? instanceId}-${index}`;
+}
+
 defineExpose({
   /**
    * A reference to the component's wrapper element for direct DOM manipulation.
@@ -112,13 +117,13 @@ const {
         v-for="(star, index) in stars"
         :key="star"
         tabindex="0"
-        :for="String(index)"
+        :for="getStarInputId(index)"
         v-bind="starLabelAttrs"
         @keydown.enter="onClickStar(star)"
         @keydown.space.prevent="onClickStar(star)"
       >
         <input
-          :id="String(index)"
+          :id="getStarInputId(index)"
           tabindex="-1"
           type="radio"
           :disabled="disabled"

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

@@ -195,14 +195,11 @@ export const Slots: StoryFn<UInputSearchArgs> = (args) => ({
 
       <UInputSearch v-model="descriptionSlotValue" label="Search products">
         <template #description>
-          <URow align="center" gap="2xs" class="text-neutral">
-            <UIcon name="travel_explore" size="xs" color="primary" />
-            <UText size="sm">
-              Tip: use
-              <ULink label="filters" underlined size="sm" />
-              for exact matches.
-            </UText>
-          </URow>
+          <UText size="sm" variant="lifted">
+            Tip: use
+            <ULink label="filters" underlined size="sm" />
+            for exact matches.
+          </UText>
         </template>
       </UInputSearch>
 
@@ -212,16 +209,13 @@ export const Slots: StoryFn<UInputSearchArgs> = (args) => ({
         :error="true"
       >
         <template #error>
-          <URow align="center" gap="2xs">
-            <UIcon name="error" size="xs" color="error" />
-            <UText size="sm" color="error">
-              <ul>
-                <li>Search query is too short</li>
-                <li>Remove unsupported symbols from your search</li>
-                <li>Try different keywords and search again</li>
-              </ul>
-            </UText>
-          </URow>
+          <UText size="sm" color="error">
+            <ul>
+              <li>Search query is too short</li>
+              <li>Remove unsupported symbols from your search</li>
+              <li>Try different keywords and search again</li>
+            </ul>
+          </UText>
         </template>
       </UInputSearch>
     </UCol>

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

@@ -133,30 +133,24 @@ export const Slots: StoryFn<ULabelArgs> = () => ({
       <ULabel label="Work email">
         <UText label="johndoe@example.com" />
         <template #description>
-          <URow align="center" gap="2xs" class="text-neutral">
-            <UIcon name="mark_email_unread" size="xs" color="primary" />
-            <UText size="sm">
-              We will send a
-              <ULink label="confirmation link" underlined size="sm" />
-              to this address.
-            </UText>
-          </URow>
+          <UText size="sm" variant="lifted">
+            We will send a
+            <ULink label="confirmation link" underlined size="sm" />
+            to this address.
+          </UText>
         </template>
       </ULabel>
 
       <ULabel label="Email" :error="true">
         <UText label="not-an-email" />
         <template #error>
-          <URow align="center" gap="2xs">
-            <UIcon name="error" size="xs" color="error" />
-            <UText size="sm" color="error">
-              <ul>
-                <li>Email address format is invalid</li>
-                <li>Use a name@domain.com style address</li>
-                <li>Remove spaces and special characters from the local part</li>
-              </ul>
-            </UText>
-          </URow>
+          <UText size="sm" color="error">
+            <ul>
+              <li>Email address format is invalid</li>
+              <li>Use a name@domain.com style address</li>
+              <li>Remove spaces and special characters from the local part</li>
+            </ul>
+          </UText>
         </template>
       </ULabel>
     </UCol>

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

@@ -140,13 +140,11 @@ export const Slots: StoryFn<URadioArgs> = (args) => ({
         value="pro"
       >
         <template #description>
-          <URow align="center" gap="2xs" class="text-neutral">
-            <UIcon name="workspace_premium" size="xs" class="mt-0.5" color="primary" />
-            <UText size="sm">
-              Includes all core features.
-              <ULink label="Compare plans" underlined size="sm" />.
-            </UText>
-          </URow>
+          <UText size="sm" variant="lifted">
+            Includes all core features,
+            <ULink label="compare plans" underlined size="sm" />
+            for upgrades.
+          </UText>
         </template>
       </URadio>
 
@@ -159,16 +157,13 @@ export const Slots: StoryFn<URadioArgs> = (args) => ({
         :error="true"
       >
         <template #error>
-          <URow align="center" gap="2xs">
-            <UIcon name="error" size="xs" color="error" />
-            <UText size="sm" color="error">
-              <ul>
-                <li>You must select one of the available options</li>
-                <li>This field is required to proceed</li>
-                <li>Choose an option above to clear this error</li>
-              </ul>
-            </UText>
-          </URow>
+          <UText size="sm" color="error">
+            <ul>
+              <li>You must select one of the available options</li>
+              <li>This field is required to proceed</li>
+              <li>Choose an option above to clear this error</li>
+            </ul>
+          </UText>
         </template>
       </URadio>
     </UCol>

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

@@ -204,13 +204,10 @@ export const Slots: StoryFn<URadioGroupArgs> = (args) => ({
         label="Delivery"
       >
         <template #description>
-          <URow align="center" gap="2xs" class="text-neutral">
-            <UIcon name="local_shipping" size="xs" color="primary" />
-            <UText size="sm">
-              Shipping times are estimates.
-              <ULink label="Full policy" underlined size="sm" />.
-            </UText>
-          </URow>
+          <UText size="sm" variant="lifted">
+            Shipping times are estimates, see the
+            <ULink label="full policy" underlined size="sm" />.
+          </UText>
         </template>
       </URadioGroup>
 
@@ -222,16 +219,13 @@ export const Slots: StoryFn<URadioGroupArgs> = (args) => ({
         :error="true"
       >
         <template #error>
-          <URow align="center" gap="2xs">
-            <UIcon name="error" size="xs" color="error" />
-            <UText size="sm" color="error">
-              <ul>
-                <li>Please choose one option from the group</li>
-                <li>At least one selection is required</li>
-                <li>Review the labels and pick a valid answer</li>
-              </ul>
-            </UText>
-          </URow>
+          <UText size="sm" color="error">
+            <ul>
+              <li>Please choose one option from the group</li>
+              <li>At least one selection is required</li>
+              <li>Review the labels and pick a valid answer</li>
+            </ul>
+          </UText>
         </template>
       </URadioGroup>
     </UCol>

package/ui.form-select/config.ts

@@ -117,7 +117,10 @@ export default /*tw*/ {
     ],
   },
   toggleWrapper: "{>toggle} mr-3",
-  toggleIcon: "{UIcon} {>selectIcon} -mr-1 transition duration-300 group-[*]/active:rotate-180",
+  toggleIcon: {
+    base: "{UIcon} {>selectIcon} -mr-1 transition duration-300",
+    compoundVariants: [{ opened: true, class: "rotate-180" }],
+  },
   leftIcon: "{UIcon} {>selectIcon}",
   rightIcon: "{UIcon} {>selectIcon}",
   leftSlot: "{>toggle} pl-2.5",

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

@@ -148,6 +148,13 @@ NotClearable.args = { clearable: false };
 
 export const Searchable = DefaultTemplate.bind({});
 Searchable.args = { searchable: true };
+Searchable.parameters = {
+  docs: {
+    story: {
+      height: "350px",
+    },
+  },
+};
 
 export const SearchModelValue = DefaultTemplate.bind({});
 SearchModelValue.args = { search: "New York", searchable: true };
@@ -163,10 +170,10 @@ export const NoCloseOnSelect = DefaultTemplate.bind({});
 NoCloseOnSelect.args = { modelValue: 3, closeOnSelect: false };
 
 export const Readonly = DefaultTemplate.bind({});
-Readonly.args = { readonly: true, modelValue: "1", clearable: false };
+Readonly.args = { readonly: true, modelValue: 1, clearable: false };
 
 export const Disabled = DefaultTemplate.bind({});
-Disabled.args = { disabled: true, modelValue: "2", clearable: false };
+Disabled.args = { disabled: true, modelValue: 2, clearable: false };
 
 export const LabelAlign = EnumTemplate.bind({});
 LabelAlign.args = {
@@ -184,6 +191,13 @@ LargeItemList.args = {
     return { value: index + 1, label: `value ${index + 1}`, badge: "badge" };
   }),
 };
+LargeItemList.parameters = {
+  docs: {
+    story: {
+      height: "400px",
+    },
+  },
+};
 
 export const Multiple = DefaultTemplate.bind({});
 Multiple.args = { multiple: true, modelValue: [] };
@@ -396,13 +410,10 @@ export const Slots: StoryFn<USelectArgs> = (args) => ({
           :options="args.options"
         >
           <template #description>
-            <URow align="center" gap="2xs" class="text-neutral">
-              <UIcon name="location_city" size="xs" color="primary" />
-              <UText size="sm">
-                Only cities we ship to.
-                <ULink label="Shipping zones" underlined size="sm" />.
-              </UText>
-            </URow>
+            <UText size="sm" variant="lifted">
+              Only cities we ship to, see
+              <ULink label="shipping zones" underlined size="sm" />.
+            </UText>
           </template>
         </USelect>
 
@@ -414,16 +425,13 @@ export const Slots: StoryFn<USelectArgs> = (args) => ({
           :error="true"
         >
           <template #error>
-            <URow align="center" gap="2xs">
-              <UIcon name="error" size="xs" color="error" />
-              <UText size="sm" color="error">
-                <ul>
-                  <li>Please select an option from the list</li>
-                  <li>The current value is not available anymore</li>
-                  <li>Pick a valid choice to continue</li>
-                </ul>
-              </UText>
-            </URow>
+            <UText size="sm" color="error">
+              <ul>
+                <li>Please select an option from the list</li>
+                <li>The current value is not available anymore</li>
+                <li>Pick a valid choice to continue</li>
+              </ul>
+            </UText>
           </template>
         </USelect>
       </URow>

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

@@ -115,9 +115,9 @@ export const Slots: StoryFn<USwitchArgs> = (args) => ({
         <template #description>
           <URow align="center" gap="2xs" class="text-neutral">
             <UIcon name="cloud_sync" size="xs" class="mt-0.5" color="primary" />
-            <UText size="sm">
-              Drafts sync across devices.
-              <ULink label="Learn more" underlined size="sm" />.
+            <UText size="sm" variant="lifted">
+              Drafts sync across devices,
+              <ULink label="learn more" underlined size="sm" />.
             </UText>
           </URow>
         </template>

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

@@ -171,13 +171,10 @@ export const Slots: StoryFn<UTextareaArgs> = (args) => ({
       <URow block>
         <UTextarea v-model="descriptionSlotValue" label="Feedback">
           <template #description>
-            <URow align="center" gap="2xs" class="text-neutral">
-              <UIcon name="format_quote" size="xs" class="mt-0.5" color="primary" />
-              <UText size="sm">
-                Markdown is not supported. See
-                <ULink label="content guidelines" underlined size="sm" />.
-              </UText>
-            </URow>
+            <UText size="sm" variant="lifted">
+              Markdown is not supported, see
+              <ULink label="content guidelines" underlined size="sm" />.
+            </UText>
           </template>
         </UTextarea>
 
@@ -187,16 +184,13 @@ export const Slots: StoryFn<UTextareaArgs> = (args) => ({
           :error="true"
         >
           <template #error>
-            <URow align="center" gap="2xs">
-              <UIcon name="error" size="xs" color="error" />
-              <UText size="sm" color="error">
-                <ul>
-                  <li>Message is too short (minimum 10 characters)</li>
-                  <li>Remove disallowed characters from your text</li>
-                  <li>Try again after fixing the issues above</li>
-                </ul>
-              </UText>
-            </URow>
+            <UText size="sm" color="error">
+              <ul>
+                <li>Message is too short (minimum 10 characters)</li>
+                <li>Remove disallowed characters from your text</li>
+                <li>Try again after fixing the issues above</li>
+              </ul>
+            </UText>
           </template>
         </UTextarea>
       </URow>

package/ui.text-files/storybook/stories.ts

@@ -109,9 +109,9 @@ export const Slots: StoryFn<UFilesArgs> = (args) => ({
         <template #description>
           <URow align="center" gap="2xs" class="text-neutral">
             <UIcon name="folder" size="xs" class="mt-0.5" color="primary" />
-            <UText size="sm">
-              Files are read-only here.
-              <ULink label="Manage in storage" underlined size="sm" />.
+            <UText size="sm" variant="lifted">
+              Files are read-only here,
+              <ULink label="manage in storage" underlined size="sm" />.
             </UText>
           </URow>
         </template>

package/icons/storybook/date_range.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M273.08-406.68q-12.1-12.2-12.1-30.06 0-17.85 12.13-30.07 12.12-12.21 30.05-12.21t30.02 12.21q12.1 12.22 12.1 30.07 0 17.86-12.12 30.06-12.13 12.2-30.06 12.2t-30.02-12.2Zm179.87 0q-12.1-12.2-12.1-30.06 0-17.85 12.12-30.07 12.13-12.21 30.06-12.21t30.02 12.21q12.1 12.22 12.1 30.07 0 17.86-12.12 30.06-12.13 12.2-30.06 12.2t-30.02-12.2Zm172.87 0q-12.1-12.2-12.1-30.06 0-17.85 12.12-30.07 12.13-12.21 30.06-12.21t30.02 12.21q12.1 12.22 12.1 30.07 0 17.86-12.13 30.06-12.12 12.2-30.05 12.2t-30.02-12.2ZM182.15-74.02q-27.6 0-47.86-20.27-20.27-20.26-20.27-47.86v-615.7q0-27.7 20.27-48.03 20.26-20.34 47.86-20.34H245v-60h69.07v60h331.86v-60H715v60h62.85q27.7 0 48.03 20.34 20.34 20.33 20.34 48.03v615.7q0 27.6-20.34 47.86-20.33 20.27-48.03 20.27h-595.7Zm0-68.13h595.7V-570h-595.7v427.85Zm0-487.85h595.7v-127.85h-595.7V-630Zm0 0v-127.85V-630Z"/></svg>

package/icons/storybook/event.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M528-248.18q-28-28.19-28-69Q500-358 528.18-386q28.19-28 69-28Q638-414 666-385.82q28 28.19 28 69Q694-276 665.82-248q-28.19 28-69 28Q556-220 528-248.18ZM182.15-74.02q-27.6 0-47.86-20.27-20.27-20.26-20.27-47.86v-615.7q0-27.7 20.27-48.03 20.26-20.34 47.86-20.34H245v-60h69.07v60h331.86v-60H715v60h62.85q27.7 0 48.03 20.34 20.34 20.33 20.34 48.03v615.7q0 27.6-20.34 47.86-20.33 20.27-48.03 20.27h-595.7Zm0-68.13h595.7V-570h-595.7v427.85Zm0-487.85h595.7v-127.85h-595.7V-630Zm0 0v-127.85V-630Z"/></svg>

package/icons/storybook/format_quote.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m238.67-234.5 95.92-164.87q-5 1-11 1.5t-11 .5q-66.48-1.43-112.88-49.03Q153.3-494 153.3-560q0-67.76 47.92-115.55 47.91-47.8 115.67-47.8 67.44 0 115.27 47.8Q480-627.76 480-560q0 21.09-5.44 41.16-5.44 20.08-16.08 38.84L317.37-234.5h-78.7Zm366.7 0 95.67-164.87q-5 1-11 1.5t-11 .5q-66.47-1.43-112.76-49.03Q520-494 520-560q0-67.76 47.8-115.55 47.79-47.8 115.55-47.8 67.43 0 115.39 47.8Q846.7-627.76 846.7-560q0 21.09-5.44 41.16-5.44 20.08-16.09 38.84L683.83-234.5h-78.46ZM371.71-505.01q22.79-22.86 22.79-54.95 0-32.08-22.79-54.99-22.79-22.9-54.95-22.9-32.15 0-54.93 22.86-22.79 22.86-22.79 54.95 0 32.08 22.79 54.99 22.78 22.9 54.93 22.9 32.16 0 54.95-22.86Zm366.58 0q22.91-22.86 22.91-54.95 0-32.08-22.91-54.99-22.91-22.9-55.07-22.9-32.15 0-54.94 22.86-22.78 22.86-22.78 54.95 0 32.08 22.79 54.99 22.79 22.9 54.95 22.9 32.15 0 55.05-22.86ZM683.35-560Zm-366.46 0Z"/></svg>

package/icons/storybook/location_city.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M111.87-111.87v-574.5h247v-86.26L480-891l121.37 118.37v252.26h247v408.5h-736.5ZM180-180h106v-106H180v106Zm0-166h106v-106H180v106Zm0-166h106v-106H180v106Zm247 332h106v-106H427v106Zm0-166h106v-106H427v106Zm0-166h106v-106H427v106Zm0-166h106v-106H427v106Zm247 498h106v-106H674v106Zm0-166h106v-106H674v106Z"/></svg>

package/icons/storybook/mark_email_unread.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M142.15-154.02q-27.6 0-47.86-20.27-20.27-20.26-20.27-47.86v-515.7q0-27.7 20.27-48.03 20.26-20.34 47.86-20.34h429.46q-4.44 17.15-5.68 34.19-1.23 17.03 1.24 34.18H147.15l332.85 218 148.37-97.04q10.96 9.96 23.39 18.11 12.44 8.15 25.87 13.8L480-454.35l-337.85-223v455.2h675.7v-353.31q19.18-5.02 36.07-14.7 16.88-9.67 32.3-22.6v390.61q0 27.6-20.34 47.86-20.33 20.27-48.03 20.27h-675.7Zm0-583.83v515.7-515.7Zm536.98 58.6q-33.2-33.31-33.2-80.87 0-47.55 33.32-80.75 33.31-33.2 80.87-33.2 47.55 0 80.75 33.32 33.2 33.31 33.2 80.87 0 47.55-33.32 80.75-33.31 33.2-80.87 33.2-47.55 0-80.75-33.32Z"/></svg>

package/icons/storybook/shield.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M479.98-74.78q-142.59-35.67-234.27-164.87-91.69-129.2-91.69-283.27v-242.26L480-887.22l326.22 122.05V-523q0 154.1-91.82 283.32-91.82 129.23-234.42 164.9Zm.02-70.13q113.8-39.2 185.83-143.62 72.02-104.43 72.02-234.4v-194.4L480-814.61l-257.85 97.4v194.17q0 130.08 72.02 234.51Q366.2-184.11 480-144.91Zm0-334.85Z"/></svg>

package/icons/storybook/workspace_premium.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m381.89-408.89 36.96-119.31-98.59-75.43h120.31L480-728.37l38.43 124.74h121.31l-98.35 75.43 35.96 119.31L480-482.76l-98.11 73.87ZM241.37-34.5v-304.72q-46.44-47.95-66.89-105.63-20.46-57.67-20.46-116.35 0-138.39 93.8-232.18 93.79-93.79 232.18-93.79t232.3 93.79q93.92 93.79 93.92 232.18 0 58.68-20.58 116.35-20.57 57.68-67.01 105.63V-34.5L480-113.98 241.37-34.5Zm421.58-343.63q74.9-74.78 74.9-182.95 0-108.16-74.9-183.06-74.91-74.9-182.95-74.9-108.04 0-182.95 74.9-74.9 74.9-74.9 183.06 0 108.17 74.9 182.95 74.91 74.78 182.95 74.78 108.04 0 182.95-74.78ZM304-121.13l176-56.2 176 56.2V-289.5q-40.24 28.76-86.12 41.64Q524-234.98 480-234.98q-44 0-89.88-12.88-45.88-12.88-86.12-41.64v168.37Zm176-84.57Z"/></svg>