vueless 1.0.2-beta.27 → 1.0.2-beta.29

package/icons/storybook/celebration.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m73.3-69 193.42-540.8 350.39 346.39L73.3-69Zm114.63-114.63L494.04-293 296.3-491.74 187.93-183.63Zm376-258.74L527.3-479l236.9-236.89q32.95-32.96 83.75-33.46 50.79-.5 83.98 32.46l17 17-36.86 36.63-19-19q-19-19-44.12-19.5-25.12-.5-44.88 19.5L563.93-442.37Zm-164.5-160.26L362.8-639.5l28.81-29.04q23.24-23 21.74-52.38-1.5-29.38-21.74-49.62l-28-28 36.87-36.63 26 26q35.95 36.19 35.45 90.25-.5 54.05-36.45 90.25l-26.05 26.04ZM483.3-523l-36.87-36.63 149.85-149.85q19-19 18.5-48.5t-19.5-48.5l-61-61 36.87-36.87 63 63q31.96 33.2 32.96 83.37 1 50.18-31.96 83.13L483.3-523Zm163.5 164.5-36.87-36.87 46.05-45.8q36.19-36.2 86.75-37.2 50.55-1 86.75 35.2l51 51-36.87 36.87-52-52q-23-23-48-23t-48 23l-48.81 48.8ZM187.93-183.63Z"/></svg>

package/icons/storybook/mark_email_unread.svg

@@ -0,0 +1 @@
+<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.7Zm617.73 91.92q-47.57 0-80.76-33.31-33.19-33.3-33.19-80.88 0-47.57 33.31-80.76 33.3-33.19 80.88-33.19 47.57 0 80.76 33.31 33.19 33.3 33.19 80.88 0 47.57-33.31 80.76-33.3 33.19-80.88 33.19Z"/></svg>

package/package.json

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

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

@@ -57,14 +57,14 @@ const DefaultTemplate: StoryFn<UToggleArgs> = (args: UToggleArgs) => ({
 
 const EnumTemplate: StoryFn<UToggleArgs> = (args: UToggleArgs, { argTypes }) => ({
   components: { UToggle, URow },
-  setup: () => ({ args, argTypes, getArgs, values: ref(argTypes.size?.options) }),
+  setup: () => ({ args, argTypes, getArgs }),
   template: `
     <URow>
       <UToggle
         v-for="option in argTypes?.[args.enum]?.options"
         v-bind="getArgs(args, option)"
         :key="option"
-        v-model="values[option]"
+        v-model="args.modelValue"
         class="w-auto"
       />
     </URow>
@@ -78,6 +78,7 @@ export const Sizes = EnumTemplate.bind({});
 Sizes.args = {
   name: "sizeTemplate",
   enum: "size",
+  modelValue: 1,
   options: [
     { value: 1, label: "{enumValue}" },
     { value: 2, label: "{enumValue}" },

package/ui.container-card/UCard.vue

@@ -66,8 +66,11 @@ const {
         <!-- @slot Use it to add something before left side of the header. -->
         <slot name="before-title" />
 
-        <!-- @slot Use it to customize left side of the header. -->
-        <slot name="title">
+        <!--
+          @slot Use it to customize left side of the header.
+          @binding {string} title
+        -->
+        <slot name="title" :title="title">
           <div v-bind="titleFallbackAttrs">
             <UHeader :label="title" size="xs" v-bind="titleAttrs" />
             <div v-if="description" v-bind="descriptionAttrs" v-text="description" />

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

@@ -104,21 +104,21 @@ export const Slots: StoryFn<UCardArgs> = (args) => ({
     <UCol gap="lg">
       <UCard v-bind="args" description="Before Title Slot">
         <template #before-title>
-          <UIcon name="account_circle" size="sm" />
+          <UIcon name="account_circle" color="success" />
         </template>
         ${defaultTemplate}
       </UCard>
 
-      <UCard v-bind="args">
-        <template #title>
-          <UBadge label="Title Slot" size="lg" />
+      <UCard title="Title Slot">
+        <template #title="{ title }">
+          <UBadge :label="title" size="lg" color="primary" variant="outlined" />
         </template>
         ${defaultTemplate}
       </UCard>
 
       <UCard v-bind="args" description="After Title Slot">
         <template #after-title>
-          <UIcon name="verified" size="sm" />
+          <UIcon name="verified" color="success" />
         </template>
         ${defaultTemplate}
       </UCard>
@@ -126,7 +126,7 @@ export const Slots: StoryFn<UCardArgs> = (args) => ({
       <UCard v-bind="args" description="Actions Slot">
         <template #actions>
           <URow class="max-w-fit">
-            <UButton size="sm" label="Follow" />
+            <UButton size="sm" label="Follow" variant="subtle" />
             <UButton size="sm" label="Message" />
           </URow>
         </template>
@@ -136,7 +136,7 @@ export const Slots: StoryFn<UCardArgs> = (args) => ({
       <UCard v-bind="args" description="Footer Left Slot">
         ${defaultTemplate}
         <template #footer-left>
-          <UButton size="sm" label="Cancel" />
+          <UButton size="sm" label="Cancel" variant="outlined" />
         </template>
       </UCard>
 

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

@@ -12,6 +12,7 @@ import UButton from "../../ui.button/UButton.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 UAlert from "../../ui.text-alert/UAlert.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -39,14 +40,20 @@ export default {
 
 const defaultTemplate = `
   <UCol>
-    <UInput placeholder="Vasyl" label="First Name" />
-    <UInput placeholder="Vasylenko" label="Last Name" />
-    <UInput placeholder="Kyiv" label="City" />
+    <UInput label="First Name" placeholder="John" />
+    <UInput label="Last Name" placeholder="Doe" />
+    <UAlert
+      title="Attention!"
+      description="Please check your email for verification."
+      color="warning"
+      icon="mark_email_unread"
+      class="w-full"
+    />
   </UCol>
 `;
 
 const DefaultTemplate: StoryFn<UGroupArgs> = (args: UGroupArgs) => ({
-  components: { UGroup, UCol, UInput, UButton },
+  components: { UGroup, UCol, UInput, UAlert },
   setup: () => ({ args, slots: getSlotNames(UGroup.__name) }),
   template: `
     <UGroup v-bind="args">
@@ -79,42 +86,51 @@ Underlined.parameters = {
 };
 
 export const Slots: StoryFn<UGroupArgs> = (args) => ({
-  components: { UGroup, UIcon, UBadge, UButton, URow, UInput, UCol },
+  components: { UGroup, UIcon, UBadge, UButton, URow, UInput, UCol, UAlert },
   setup() {
     args.config = { wrapper: "mb-8" };
 
     return { args };
   },
   template: `
-      <UGroup v-bind="args" title="Before Title Slot">
-        <template #before-title>
-          <UIcon name="account_circle" />
-        </template>
-        ${defaultTemplate}
-      </UGroup>
+    <UGroup v-bind="args" title="Before Title Slot">
+      <template #before-title>
+        <UIcon name="account_circle" color="primary" class="mr-1" />
+      </template>
+      <UCol>
+        <UInput label="Username" placeholder="johndoe" />
+      </UCol>
+    </UGroup>
 
-      <UGroup v-bind="args">
-        <template #title>
-          <UBadge label="Title Slot" size="lg" />
-        </template>
-        ${defaultTemplate}
-      </UGroup>
+    <UGroup v-bind="args" title="Title Slot" upperlined>
+      <template #title="{ title }">
+        <UBadge :label="title" size="lg" color="primary" variant="outlined" />
+      </template>
+      <UCol>
+        <UInput label="Access Level" placeholder="Superuser" />
+      </UCol>
+    </UGroup>
 
-      <UGroup v-bind="args" title="After Title Slot">
-        <template #after-title>
-          <UIcon name="verified" />
-        </template>
-        ${defaultTemplate}
-      </UGroup>
+    <UGroup v-bind="args" title="After Title Slot" upperlined>
+      <template #after-title>
+        <UIcon name="verified" color="success" />
+      </template>
+      <UCol>
+        <UInput label="Email" placeholder="john@email.com" />
+      </UCol>
+    </UGroup>
 
-      <UGroup v-bind="args" title="Actions Slot">
-        <template #actions>
-          <URow class="max-w-fit">
-            <UButton size="sm" variant="outlined" label="Clear" />
-            <UButton size="sm" label="Submit" />
-          </URow>
-        </template>
-        ${defaultTemplate}
-      </UGroup>
+    <UGroup v-bind="args" title="Actions Slot" upperlined>
+      <template #actions>
+        <URow class="max-w-fit">
+          <UButton size="sm" variant="outlined" label="Cancel" />
+          <UButton size="sm" label="Save Changes" />
+        </URow>
+      </template>
+      <UCol>
+        <UInput label="First Name" placeholder="John" />
+        <UInput label="Last Name" placeholder="Doe" />
+      </UCol>
+    </UGroup>
   `,
 });

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

@@ -16,6 +16,7 @@ import UTextarea from "../../ui.form-textarea/UTextarea.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
 import UCol from "../../ui.container-col/UCol.vue";
+import UText from "../../ui.text-block/UText.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -115,7 +116,7 @@ Description.args = {
 };
 
 export const Inner: StoryFn<UModalArgs> = (args: UModalArgs) => ({
-  components: { UModal, UButton },
+  components: { UModal, UButton, UCol, UText },
   setup() {
     const showMainModal = ref(false);
     const showInnerModal = ref(false);
@@ -133,11 +134,13 @@ export const Inner: StoryFn<UModalArgs> = (args: UModalArgs) => ({
   template: `
     <div>
       <UModal v-bind="args" v-model="showMainModal">
-        <p>
-          Are you sure you want to cancel your subscription?
-          This action will remove access to premium features and cannot be undone.
-        </p>
-        <UButton label="View Plan Details" @click="openInnerModal"/>
+        <UCol gap="sm">
+          <UText>
+            Are you sure you want to cancel your subscription?
+            This action will remove access to premium features and cannot be undone.
+          </UText>
+          <UButton label="View Plan Details" @click="openInnerModal"/>
+        </UCol>
 
         <UModal
           v-model="showInnerModal"

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

@@ -14,6 +14,8 @@ import UHeader from "../../ui.text-header/UHeader.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 UCol from "../../ui.container-col/UCol.vue";
+import UText from "../../ui.text-block/UText.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -93,7 +95,7 @@ ConfirmLabel.parameters = {
 };
 
 export const Inner: StoryFn<UModalConfirmArgs> = (args: UModalConfirmArgs) => ({
-  components: { UModalConfirm, UButton, UModal },
+  components: { UModalConfirm, UButton, UModal, UCol, UText },
   setup() {
     const showMainModal = ref(false);
     const showInnerModal = ref(false);
@@ -111,11 +113,13 @@ export const Inner: StoryFn<UModalConfirmArgs> = (args: UModalConfirmArgs) => ({
   template: `
     <div>
       <UModalConfirm v-bind="args" v-model="showMainModal">
-        <p>
-          Are you sure you want to cancel your subscription?
-          This action will remove access to premium features and cannot be undone.
-        </p>
-        <UButton label="View Plan Details" @click="openInnerModal"/>
+        <UCol gap="sm">
+          <UText>
+            Are you sure you want to cancel your subscription?
+            This action will remove access to premium features and cannot be undone.
+          </UText>
+          <UButton label="View Plan Details" @click="openInnerModal"/>
+        </UCol>
 
         <UModal
           v-model="showInnerModal"

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

@@ -84,7 +84,7 @@ 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' }"
+      :config="{ wrapper: 'min-h-max', page: 'min-h-max mb-4' }"
     >
       ${defaultTemplate}
     </UPage>

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

@@ -12,6 +12,7 @@ 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 UAvatar from "../../ui.image-avatar/UAvatar.vue";
+import UText from "../../ui.text-block/UText.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -52,7 +53,7 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<DefaultUDropdownBadgeArgs> = (args: DefaultUDropdownBadgeArgs) => ({
-  components: { UDropdownBadge, UIcon, ULink, UAvatar, URow, UCol },
+  components: { UDropdownBadge, UIcon, ULink, UAvatar, URow, UCol, UText },
   setup: () => ({ args, slots: getSlotNames(UDropdownBadge.__name) }),
   template: `
     <UDropdownBadge v-bind="args">
@@ -187,7 +188,7 @@ DefaultSlot.args = {
     <template #default>
       <URow align="center" gap="xs">
         <UAvatar size="3xs" src="https://i.pravatar.cc/300" />
-        <span class="text-small font-semibold">John Doe</span>
+        <UText weight="semibold" size="sm" class="text-inverted">John Doe</UText>
       </URow>
     </template>
   `,

package/ui.form-select/USelect.vue

@@ -578,7 +578,7 @@ const {
             :name="config.defaults.clearIcon"
             v-bind="clearIconAttrs"
             :data-test="getDataTest('clear')"
-            @click="onClickClear"
+            @click.stop="onClickClear"
           />
         </slot>
       </div>
@@ -795,7 +795,7 @@ const {
                     :underlined="false"
                     v-bind="listClearAllAttrs"
                     :data-test="getDataTest('clear-all')"
-                    @click="onClickClear"
+                    @click.stop="onClickClear"
                   />
                 </div>
               </template>

package/ui.image-avatar/config.ts

@@ -30,7 +30,7 @@ export default /*tw*/ {
         full: "rounded-full",
       },
       src: {
-        true: "bg-transparent",
+        true: "border-none bg-transparent",
       },
     },
   },

package/ui.image-icon/storybook/stories.ts

@@ -4,7 +4,6 @@ import {
   getSlotNames,
   getSlotsFragment,
   getDocsDescription,
-  getEnumVariantDescription,
 } from "../../utils/storybook.ts";
 
 import UIcon from "../../ui.image-icon/UIcon.vue";
@@ -99,15 +98,12 @@ import Beverage from "./src/assets/icons/beverage.svg?component";
 
 export const Colors = EnumTemplate.bind({});
 Colors.args = { enum: "color" };
-Colors.parameters = getEnumVariantDescription();
 
 export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size" };
-Sizes.parameters = getEnumVariantDescription();
 
 export const Variants = EnumTemplate.bind({});
 Variants.args = { enum: "variant", color: "success" };
-Variants.parameters = getEnumVariantDescription();
 
 export const Interactive = DefaultTemplate.bind({});
 Interactive.args = { interactive: true };

package/ui.text-alert/config.ts

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   wrapper: {
-    base: "p-4 border-box flex flex-col border rounded-medium",
+    base: "p-4 border-box flex flex-col border rounded-medium w-full",
     variants: {
       variant: {
         solid: "text-inverted bg-{color} border-transparent",

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

@@ -12,7 +12,6 @@ import UCol from "../../ui.container-col/UCol.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import UButton from "../../ui.button/UButton.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
-import ULink from "../../ui.button-link/ULink.vue";
 import UText from "../../ui.text-block/UText.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
@@ -29,6 +28,10 @@ export default {
   component: UAlert,
   args: {
     title: "Scheduled Maintenance Notice",
+    description: `
+      Our website will be undergoing scheduled maintenance on March 15th from 2:00 AM to 4:00 AM UTC.
+      Some features may be temporarily unavailable during this time. We appreciate your patience!
+    `,
   },
   argTypes: {
     ...getArgTypes(UAlert.__name),
@@ -67,14 +70,6 @@ const EnumTemplate: StoryFn<UAlertArgs> = (args: UAlertArgs, { argTypes }) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const Description = DefaultTemplate.bind({});
-Description.args = {
-  description: `
-    Our website will be undergoing scheduled maintenance on March 15th from 2:00 AM to 4:00 AM UTC.
-    Some features may be temporarily unavailable during this time. We appreciate your patience!
-  `,
-};
-
 export const Variants = EnumTemplate.bind({});
 Variants.args = { enum: "variant" };
 
@@ -99,6 +94,7 @@ CloseSlot.args = {
         label="Close"
         variant="ghost"
         size="sm"
+        class="ml-2"
         @click="close"
       />
     </template>
@@ -106,7 +102,7 @@ CloseSlot.args = {
 };
 
 export const Slots: StoryFn<UAlertArgs> = (args) => ({
-  components: { UAlert, UIcon, URow, UCol, UButton, UBadge, ULink, UText },
+  components: { UAlert, URow, UCol, UButton, UBadge, UText, UIcon },
   setup() {
     return { args };
   },
@@ -118,30 +114,24 @@ export const Slots: StoryFn<UAlertArgs> = (args) => ({
           Try it out and let us know what you think!"
         color="success"
         icon="question_mark"
+        :config="{ contentWrapper: 'items-center' }"
       >
-        <template #left="{ iconName }">
-          <URow align="center" gap="none">
-            <ULink label="What's New" color="success" />
-            <UIcon :name="iconName" color="success" size="2xs" class="mb-1" />
-          </URow>
+        <template #left>
+          <UIcon name="celebration" color="success" size="lg" />
         </template>
       </UAlert>
 
       <UAlert
-        title="System Maintenance"
+        title="MAINTENANCE"
         description="Scheduled maintenance will begin in 30 minutes. Estimated downtime: 2 hours."
         color="warning"
       >
-        <template #title>
-          <URow align="center" gap="sm">
-            <UBadge
-              label="MAINTENANCE"
-              size="sm"
-              color="warning"
-              variant="outlined"
-            />
-            <UText label="System Maintenance" size="sm" />
-          </URow>
+        <template #title="{ title }">
+          <UBadge
+            :label="title"
+            color="warning"
+            variant="subtle"
+          />
         </template>
       </UAlert>
 
@@ -151,23 +141,20 @@ export const Slots: StoryFn<UAlertArgs> = (args) => ({
           Check out our documentation to get started with building beautiful interfaces."
         color="info"
       >
-        <template #description>
-          <UCol>
-            <p>
-              You've successfully joined our community. Check out our documentation
-              to get started with building beautiful interfaces.
-            </p>
+        <template #description="{ description }">
+          <UCol gap="xs">
+            <UText :label="description" color="inherit" />
             <URow gap="sm">
               <UButton
                 label="View Docs"
-                variant="ghost"
-                size="sm"
+                variant="subtle"
+                size="xs"
                 color="info"
               />
               <UButton
                 label="Join Discord"
-                variant="ghost"
-                size="sm"
+                variant="subtle"
+                size="xs"
                 color="info"
               />
             </URow>

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

@@ -141,6 +141,7 @@ export const Slots: StoryFn<UBadgeArgs> = (args) => ({
             size="sm"
             currency="$"
             currency-space
+            color="inherit"
           />
         </template>
       </UBadge>

package/ui.text-block/config.ts

@@ -32,6 +32,13 @@ export default /*tw*/ {
         center: "text-center",
         right: "text-right",
       },
+      weight: {
+        light: "font-light",
+        normal: "font-normal",
+        medium: "font-medium",
+        semibold: "font-semibold",
+        bold: "font-bold",
+      },
       line: {
         true: "leading-none",
       },
@@ -52,6 +59,7 @@ export default /*tw*/ {
     variant: "default",
     size: "md",
     align: "left",
+    weight: "normal",
     line: false,
     wrap: true,
   },

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

@@ -17,7 +17,8 @@ import type { Props } from "../types.ts";
 
 interface UTextArgs extends Props {
   slotTemplate?: string;
-  enum: "size" | "align" | "variant" | "color";
+  enum: "size" | "align" | "variant" | "color" | "weight";
+  class?: string;
 }
 
 export default {
@@ -58,7 +59,6 @@ const EnumTemplate: StoryFn<UTextArgs> = (args: UTextArgs, { argTypes }) => ({
         v-for="option in argTypes?.[args.enum]?.options"
         v-bind="getArgs(args, option)"
         :key="option"
-        class="w-full"
       />
     </UCol>
   `,
@@ -68,7 +68,21 @@ export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
 export const Align = EnumTemplate.bind({});
-Align.args = { enum: "align" };
+Align.args = { enum: "align", class: "w-full" };
+
+export const Weight: StoryFn<UTextArgs> = (args: UTextArgs, { argTypes }) => ({
+  components: { UText, UCol },
+  setup: () => ({ args, argTypes, getArgs }),
+  template: `
+    <UCol>
+      <UText v-bind="args" weight="normal" />
+
+      <UText v-bind="args" weight="medium" />
+
+      <UText v-bind="args" weight="bold" />
+    </UCol>
+  `,
+});
 
 export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size" };

package/ui.text-block/types.ts

@@ -24,6 +24,11 @@ export interface Props {
    */
   variant?: "default" | "accented" | "lifted" | "muted";
 
+  /**
+   * Font weight.
+   */
+  weight?: "light" | "normal" | "medium" | "semibold" | "bold";
+
   /**
    * Text color.
    */

package/ui.text-empty/config.ts

@@ -41,7 +41,7 @@ export default /*tw*/ {
     },
   },
   description: {
-    base: "text-center",
+    base: "text-center mt-2",
     variants: {
       size: {
         sm: "text-small",

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

@@ -11,6 +11,10 @@ import UButton from "../../ui.button/UButton.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 ULink from "../../ui.button-link/ULink.vue";
+import UText from "../../ui.text-block/UText.vue";
+
+import emptyInbox from "./assets/empty-inbox.png";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -38,8 +42,8 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<UEmptyArgs> = (args: UEmptyArgs) => ({
-  components: { UEmpty, UIcon, UButton, UBadge },
-  setup: () => ({ args, slots: getSlotNames(UEmpty.__name) }),
+  components: { UEmpty, UIcon, UButton, UBadge, ULink, UText },
+  setup: () => ({ args, slots: getSlotNames(UEmpty.__name), emptyInbox }),
   template: `
     <UEmpty v-bind="args">
       ${args.slotTemplate || getSlotsFragment("")}
@@ -68,17 +72,13 @@ export const Description = DefaultTemplate.bind({});
 Description.args = { description: "There are no contacts in the list." };
 
 export const Sizes = EnumTemplate.bind({});
-Sizes.args = { enum: "size", title: "{enumValue}" };
+Sizes.args = { enum: "size" };
 
 export const HeaderSlot = DefaultTemplate.bind({});
 HeaderSlot.args = {
   slotTemplate: `
     <template #header>
-      <UIcon
-        name="person"
-        color="info"
-        size="2xl"
-      />
+      <img :src="emptyInbox" alt="empty" width="300" />
     </template>
   `,
 };
@@ -87,7 +87,10 @@ export const DefaultSlot = DefaultTemplate.bind({});
 DefaultSlot.args = {
   slotTemplate: `
     <template #default>
-      <UBadge label="There are no contacts in the list." />
+      <UText>
+        <i>Nothing to display here yet</i>. You can <ULink class="inline">add your own</ULink> <b>content</b>
+        or include custom <b>components</b> to enhance the view.
+      </UText>
     </template>
   `,
 };
@@ -96,7 +99,12 @@ export const FooterSlot = DefaultTemplate.bind({});
 FooterSlot.args = {
   slotTemplate: `
     <template #footer>
-      <UButton label="Add new one" size="sm" variant="soft" />
+      <UButton
+        label="Add new one"
+        size="sm"
+        color="grayscale"
+        variant="soft"
+      />
     </template>
   `,
 };

package/ui.text-file/UFile.vue

@@ -27,16 +27,12 @@ const emit = defineEmits([
   "remove",
 ]);
 
-const fileRef = useTemplateRef<InstanceType<typeof ULink>>("file");
+const fileRef = useTemplateRef<HTMLDivElement>("file");
 
 const focus = ref(false);
 
 const fileId = props.id || useId();
 
-const link = computed(() => {
-  return fileRef.value?.linkRef || null;
-});
-
 function onRemove() {
   emit("remove", fileId);
 }
@@ -51,10 +47,10 @@ function onBlur() {
 
 defineExpose({
   /**
-   * A reference to the ULink instance for direct DOM manipulation.
-   * @property {InstanceType<typeof ULink>}
+   * A reference to the file wrapper for direct DOM manipulation.
+   * @property {HTMLDivElement}
    */
-  link,
+  fileRef,
 });
 
 /**
@@ -78,9 +74,18 @@ const {
 </script>
 
 <template>
-  <ULink ref="file" :href="url" v-bind="fileAttrs" :data-test="getDataTest()">
+  <div ref="file" v-bind="fileAttrs" :data-test="getDataTest()">
     <!-- @slot Use it to add something before the file. -->
-    <slot name="left" />
+    <slot name="left">
+      <UIcon
+        v-if="!imageUrl"
+        color="neutral"
+        :name="config.defaults.fileIcon"
+        v-bind="fileIconAttrs"
+        @focus="onFocus"
+        @blur="onBlur"
+      />
+    </slot>
 
     <!--
       @slot Use it to add a file directly.
@@ -93,17 +98,14 @@ const {
       <div v-bind="bodyAttrs">
         <img v-if="imageUrl" :alt="label" :src="imageUrl" v-bind="fileImageAttrs" />
 
-        <UIcon
-          v-else
-          interactive
-          color="neutral"
-          :name="config.defaults.fileIcon"
-          v-bind="fileIconAttrs"
-          @focus="onFocus"
-          @blur="onBlur"
+        <ULink
+          :href="url"
+          :label="label"
+          :size="size"
+          color="grayscale"
+          dashed
+          v-bind="fileLabelAttrs"
         />
-
-        <ULink :label="label" :size="size" color="grayscale" dashed v-bind="fileLabelAttrs" />
       </div>
     </slot>
 
@@ -119,5 +121,5 @@ const {
         @click.stop.prevent="onRemove"
       />
     </slot>
-  </ULink>
+  </div>
 </template>

package/ui.text-file/config.ts

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   file: {
-    base: "{ULink} flex items-center",
+    base: "flex items-center",
     variants: {
       size: {
         sm: "gap-0.5",
@@ -12,7 +12,7 @@ export default /*tw*/ {
   body: "flex items-center gap-2",
   fileImage: "rounded-sm max-w-7",
   fileIcon: {
-    base: "{UIcon} -mr-1",
+    base: "{UIcon}",
     defaults: {
       size: {
         sm: "xs",

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

@@ -11,7 +11,7 @@ import URow from "../../ui.container-row/URow.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
 
-import tooltip from "../../directives/tooltip/vTooltip.ts";
+import imageURL from "./assets/imageURL.png";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -27,7 +27,7 @@ export default {
   component: UFile,
   args: {
     label: "Invoice_123.pdf",
-    url: "https://storybook.js.org/",
+    url: "",
   },
   argTypes: {
     ...getArgTypes(UFile.__name),
@@ -59,7 +59,6 @@ const DefaultTemplate: StoryFn<UFileArgs> = (args: UFileArgs) => ({
 
 const EnumTemplate: StoryFn<UFileArgs> = (args: UFileArgs, { argTypes }) => ({
   components: { UFile, URow },
-  directives: { tooltip },
   setup: () => ({ args, argTypes, getArgs }),
   template: `
     <URow>
@@ -67,7 +66,6 @@ const EnumTemplate: StoryFn<UFileArgs> = (args: UFileArgs, { argTypes }) => ({
         v-for="option in argTypes?.[args.enum]?.options"
         v-bind="getArgs(args, option)"
         :key="option"
-        v-tooltip="option"
       />
     </URow>
   `,
@@ -77,9 +75,7 @@ export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
 export const ImageURL = DefaultTemplate.bind({});
-ImageURL.args = {
-  imageUrl: "https://cdn-icons-png.flaticon.com/256/11039/11039912.png",
-};
+ImageURL.args = { imageUrl: imageURL };
 
 export const Removable = DefaultTemplate.bind({});
 Removable.args = { removable: true };
@@ -93,16 +89,28 @@ export const Slots: StoryFn<UFileArgs> = (args) => ({
     return { args };
   },
   template: `
-    <URow>
+    <URow gap="lg">
       <UFile v-bind="args">
         <template #left>
-          <UIcon name="info" color="warning" size="xs" />
+          <UIcon
+            name="info"
+            color="warning"
+            size="xs"
+            class="hover:cursor-default"
+          />
         </template>
       </UFile>
 
       <UFile v-bind="args">
         <template #right>
-          <UBadge label="File uploaded" color="success" size="sm" variant="subtle" right-icon="done_all" />
+          <UBadge
+            label="File uploaded"
+            color="success"
+            size="sm"
+            variant="soft"
+            right-icon="done_all"
+            class="hover:cursor-default"
+          />
         </template>
       </UFile>
     </URow>

package/ui.text-file/tests/UFile.test.ts

@@ -247,11 +247,11 @@ describe("UFile.vue", () => {
 
   // Exposed refs tests
   describe("Exposed refs", () => {
-    // link ref
-    it("exposes link ref", () => {
+    // file ref
+    it("exposes file ref", () => {
       const component = mount(UFile, {});
 
-      expect(component.vm.link).toBeDefined();
+      expect(component.vm.fileRef).toBeDefined();
     });
   });
 });

package/ui.text-files/UFiles.vue

@@ -69,7 +69,7 @@ const { getDataTest, filesLabelAttrs, itemsAttrs, itemAttrs } = useUI<Config>(de
     :label="label"
     :description="description"
     :size="size"
-    :align="labelAlign"
+    align="topWithDesc"
     v-bind="filesLabelAttrs"
   >
     <template #label>

package/ui.text-files/config.ts

@@ -4,6 +4,5 @@ export default /*tw*/ {
   item: "{UFile} flex",
   defaults: {
     size: "md",
-    labelAlign: "top",
   },
 };

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

@@ -79,25 +79,26 @@ Removable.args = { removable: true };
 export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size" };
 
-export const LabelAlign = EnumTemplate.bind({});
-LabelAlign.args = {
-  enum: "labelAlign",
-  description: "These files include important documents like reports and employee data.",
-};
-
 export const Slots: StoryFn<UFilesArgs> = (args) => ({
   components: { UFiles, URow, UIcon },
   setup() {
     return { args };
   },
   template: `
-    <UFiles v-bind="args">
-      <template #before-file="{ index }">
-        <UIcon v-if="index === 0" name="info" color="warning" size="xs" />
-      </template>
-      <template #after-file="{ index }">
-        <UIcon v-if="index === 1" name="check_circle" color="success" size="xs" />
-      </template>
-    </UFiles>
+    <URow>
+      <UFiles v-bind="args">
+        <template #before-file="{ index }">
+          <UIcon v-if="index === 0" name="info" color="warning" size="xs" />
+          <UIcon v-if="index === 1" name="check_circle" color="success" size="xs" />
+        </template>
+      </UFiles>
+
+      <UFiles v-bind="args">
+        <template #after-file="{ index }">
+          <UIcon v-if="index === 0" name="info" color="warning" size="xs" />
+          <UIcon v-if="index === 1" name="check_circle" color="success" size="xs" />
+        </template>
+      </UFiles>
+    </URow>
   `,
 });

package/ui.text-files/tests/UFiles.test.ts

@@ -61,24 +61,6 @@ describe("UFiles.vue", () => {
       expect(labelComponent.props("label")).toBe(label);
     });
 
-    // LabelAlign prop
-    it("passes the correct labelAlign to ULabel", () => {
-      const labelAligns = ["top", "topWithDesc"];
-
-      labelAligns.forEach((labelAlign) => {
-        const component = mount(UFiles, {
-          props: {
-            fileList,
-            labelAlign: labelAlign as Props["labelAlign"],
-          },
-        });
-
-        const labelComponent = component.findComponent(ULabel);
-
-        expect(labelComponent.props("align")).toBe(labelAlign);
-      });
-    });
-
     // Description prop
     it("passes the correct description to ULabel", () => {
       const description = "List of files";

package/ui.text-files/types.ts

@@ -14,11 +14,6 @@ export interface Props {
    */
   label?: string;
 
-  /**
-   * File list label placement.
-   */
-  labelAlign?: "top" | "topWithDesc";
-
   /**
    * File list description.
    */

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

@@ -62,6 +62,27 @@ const EnumTemplate: StoryFn<UHeaderArgs> = (args: UHeaderArgs, { argTypes }) =>
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const Line: StoryFn<UHeaderArgs> = (args: UHeaderArgs) => ({
+  components: { UHeader, UCol },
+  setup: () => ({ args }),
+  template: `
+    <UCol>
+      <UHeader :line="false">
+        <div class="rounded-medium border border-primary border-dashed w-fit">
+          Text with default library line height.
+        </div>
+      </UHeader>
+
+      <UHeader line>
+        <div class="rounded-medium border border-primary border-dashed w-fit">
+          Text with line height equal to its font size.
+        </div>
+      </UHeader>
+    </UCol>
+  `,
+});
+Line.args = {};
+
 export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size" };
 

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

@@ -65,7 +65,7 @@ export const Align: StoryFn<UNumberArgs> = (args: UNumberArgs) => ({
   components: { UNumber, URow, UCol },
   setup: () => ({ args }),
   template: `
-    <UCol block align="stretch">
+    <UCol block align="stretch" class="p-2 rounded-medium border border-primary border-dashed">
       <UNumber v-bind="args" align="left" />
       <UNumber v-bind="args" align="right" />
     </UCol>
@@ -81,11 +81,16 @@ Sizes.args = { enum: "size" };
 export const CurrencyAlign = EnumTemplate.bind({});
 CurrencyAlign.args = { enum: "currencyAlign", currency: "USD", currencySpace: true };
 
-export const LimitFractionDigits = DefaultTemplate.bind({});
-LimitFractionDigits.args = {
-  minFractionDigits: 4,
-  maxFractionDigits: 6,
-};
+export const LimitFractionDigits: StoryFn<UNumberArgs> = (args: UNumberArgs) => ({
+  components: { UNumber, UCol },
+  setup: () => ({ args }),
+  template: `
+    <UCol>
+      <UNumber :value="-14.24" :minFractionDigits="4" :maxFractionDigits="6" />
+      <UNumber :value="-14.123456789" :minFractionDigits="4" :maxFractionDigits="6" />
+    </UCol>
+  `,
+});
 LimitFractionDigits.parameters = {
   docs: {
     description: {
@@ -107,7 +112,7 @@ DecimalSeparator.parameters = {
 };
 
 export const ThousandsSeparator = DefaultTemplate.bind({});
-ThousandsSeparator.args = { value: -1400000.24, thousandsSeparator: "-" };
+ThousandsSeparator.args = { value: -1400000.24, thousandsSeparator: "." };
 ThousandsSeparator.parameters = {
   docs: {
     description: {