vueless 1.0.2-beta.11 → 1.0.2-beta.12

package/icons/storybook/description.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M319-249.52h322v-62.63H319v62.63Zm0-170h322v-62.63H319v62.63Zm-96.85 345.5q-27.6 0-47.86-20.27-20.27-20.26-20.27-47.86v-675.7q0-27.7 20.27-48.03 20.26-20.34 47.86-20.34h361.48l222.59 222.59v521.48q0 27.6-20.34 47.86-20.33 20.27-48.03 20.27h-515.7Zm326.7-557.83v-186h-326.7v675.7h515.7v-489.7h-189Zm-326.7-186v186-186 675.7-675.7Z"/></svg>

package/icons/storybook/schedule.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m624.37-286.04 49.06-48.59-157.8-158.86v-198.55h-65.26v224.89l174 181.11ZM480.03-74.02q-83.46 0-157.51-31.95-74.05-31.94-129.32-87.21-55.28-55.26-87.23-129.3-31.95-74.03-31.95-157.49 0-83.46 32-157.54 32-74.07 87.2-129.27 55.2-55.2 129.25-87.32 74.05-32.12 157.53-32.12t157.53 32.12q74.05 32.12 129.25 87.32 55.2 55.2 87.32 129.25 32.12 74.05 32.12 157.53T854.1-322.47q-32.12 74.05-87.32 129.25-55.2 55.2-129.24 87.2t-157.51 32ZM480-480Zm-.12 337.85q139.16 0 238.57-99.17 99.4-99.16 99.4-238.56t-99.37-238.69Q619.11-817.85 480-817.85q-139.28 0-238.57 99.26-99.28 99.25-99.28 238.59 0 139.52 99.28 238.68 99.28 99.17 238.45 99.17Z"/></svg>

package/icons/storybook/straighten.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M142.63-235.46q-27.6 0-47.86-20.33-20.27-20.34-20.27-48.04v-352.34q0-26.7 20.27-47.54 20.26-20.83 47.86-20.83h674.74q27.6 0 47.86 20.83 20.27 20.84 20.27 47.54v352.34q0 27.7-20.27 48.04-20.26 20.33-47.86 20.33H142.63Zm0-68.37h674.74v-352.34H690V-480h-60v-176.17H510V-480h-60v-176.17H330V-480h-60v-176.17H142.63v352.34ZM270-480h60-60Zm180 0h60-60Zm180 0h60-60Zm-150 0Z"/></svg>

package/package.json

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

package/ui.dropdown-badge/config.ts

@@ -1,25 +1,15 @@
 export default /*tw*/ {
-  wrapper: {
-    base: "relative inline-block",
-    variants: {
-      disabled: {
-        true: "cursor-not-allowed",
-      },
-    },
-  },
+  wrapper: "relative inline-block h-max",
   dropdownBadge: {
     base: "{UBadge}",
     variants: {
-      opened: {
-        true: "group",
-      },
       disabled: {
         true: "opacity-(--vl-disabled-opacity) pointer-events-none",
       },
     },
   },
   toggleIcon: {
-    base: "{UIcon} transition duration-300 group-[*]:rotate-180 -mr-0.5",
+    base: "{UIcon} transition duration-300 -mr-0.5",
     defaults: {
       size: {
         sm: "2xs",
@@ -27,6 +17,7 @@ export default /*tw*/ {
         lg: "xs",
       },
     },
+    compoundVariants: [{ opened: true, class: "rotate-180" }],
   },
   listbox: {
     base: "{UListbox} w-fit",

package/ui.dropdown-button/config.ts

@@ -1,15 +1,8 @@
 export default /*tw*/ {
-  wrapper: "relative inline-block",
-  dropdownButton: {
-    base: "{UButton} justify-between",
-    variants: {
-      opened: {
-        true: "group",
-      },
-    },
-  },
+  wrapper: "relative inline-block h-max",
+  dropdownButton: "{UButton} justify-between",
   toggleIcon: {
-    base: "{UIcon} transition duration-300 group-[*]:rotate-180 -mr-1",
+    base: "{UIcon} transition duration-300 -mr-1",
     defaults: {
       size: {
         "2xs": "2xs",
@@ -20,6 +13,7 @@ export default /*tw*/ {
         xl: "sm",
       },
     },
+    compoundVariants: [{ opened: true, class: "rotate-180" }],
   },
   listbox: {
     base: "{UListbox} w-fit",

package/ui.dropdown-link/config.ts

@@ -1,18 +1,11 @@
 export default /*tw*/ {
-  wrapper: {
-    base: `
-      inline-flex gap-0.5 relative items-center justify-between rounded
-      focus-visible:outline focus-visible:outline-medium focus-visible:outline-offset-4 focus-visible:outline-{color}
-    `,
-    variants: {
-      opened: {
-        true: "group",
-      },
-    },
-  },
+  wrapper: `
+    inline-flex gap-0.5 relative items-center justify-between rounded h-max
+    focus-visible:outline focus-visible:outline-medium focus-visible:outline-offset-4 focus-visible:outline-{color}
+  `,
   dropdownLink: "{ULink} focus-visible:outline-hidden",
   toggleIcon: {
-    base: "{UIcon} block transition duration-300 group-[*]:rotate-180",
+    base: "{UIcon} block transition duration-300",
     defaults: {
       size: {
         sm: "2xs",
@@ -20,6 +13,7 @@ export default /*tw*/ {
         lg: "sm",
       },
     },
+    compoundVariants: [{ opened: true, class: "rotate-180" }],
   },
   listbox: {
     base: "{UListbox} w-fit",

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

@@ -162,8 +162,12 @@ export const DefaultSlot = DefaultTemplate.bind({});
 DefaultSlot.args = {
   toggleIcon: false,
   slotTemplate: `
-    <template #default>
-      <UAvatar rounded="full" src="https://avatar.iran.liara.run/public" />
+    <template #default="{ opened }">
+      <UAvatar
+        rounded="full"
+        src="https://avatar.iran.liara.run/public"
+        :class="{ 'outline-medium outline-primary': opened }"
+      />
     </template>
   `,
 };

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

@@ -8,13 +8,14 @@ import {
 
 import UInput from "../../ui.form-input/UInput.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
-import UButton from "../../ui.button/UButton.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import URow from "../../ui.container-row/URow.vue";
-import UAvatar from "../../ui.image-avatar/UAvatar.vue";
+import UDropdownButton from "../../ui.dropdown-button/UDropdownButton.vue";
+import UText from "../../ui.text-block/UText.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
+import { ref } from "vue";
 
 interface UInputArgs extends Props {
   slotTemplate?: string;
@@ -177,23 +178,49 @@ export const IconProps: StoryFn<UInputArgs> = (args) => ({
 });
 
 export const Slots: StoryFn<UInputArgs> = (args) => ({
-  components: { UInput, URow, UButton, UAvatar },
+  components: { UInput, URow, UDropdownButton, UText },
   setup() {
-    return { args };
+    const countryCodes = [
+      { label: "+33", id: "+33" },
+      { label: "+44", id: "+44" },
+      { label: "+49", id: "+49" },
+    ];
+
+    const countryCode = ref("+33");
+
+    return { args, countryCode, countryCodes };
   },
   template: `
     <URow>
-      <UInput v-bind="args">
+      <UInput
+        label="Phone Number"
+        placeholder="Enter your phone number"
+        :config="{ leftSlot: 'pl-0' }"
+      >
         <template #left>
-          <UAvatar />
+          <UDropdownButton
+            v-model="countryCode"
+            :options="countryCodes"
+            square
+            size="sm"
+            variant="ghost"
+            class="rounded-r-none h-[49px]"
+          />
         </template>
       </UInput>
 
-      <UInput v-bind="args" :config="{ rightSlot: 'pr-0' }">
+      <UInput label="Website" placeholder="Enter your website">
         <template #right>
-          <UButton label="Search" size="sm" class="rounded-l-none h-full" />
+          <UText label=".com" variant="lifted" />
         </template>
       </UInput>
     </URow>
   `,
 });
+Slots.parameters = {
+  docs: {
+    story: {
+      height: "250px",
+    },
+  },
+};

package/ui.form-input-file/UInputFile.vue

@@ -333,15 +333,16 @@ const {
           :removable="multiple && !disabled"
           @remove="onClickRemoveItem"
         >
-          <template #default="{ id, label, url, imageUrl }">
+          <template #file="{ id, label, url, imageUrl, index }">
             <!--
               @slot Use it to add a file directly.
               @binding {string | number} id
               @binding {string} label
               @binding {string} url
               @binding {string} image-url
+              @binding {number} index
             -->
-            <slot :id="id" :label="label" :url="url" :image-url="imageUrl" />
+            <slot :id="id" :label="label" :url="url" :image-url="imageUrl" :index="index" />
           </template>
         </UFiles>
 

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

@@ -10,6 +10,8 @@ import UInputFile from "../../ui.form-input-file/UInputFile.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
+import URow from "../../ui.container-row/URow.vue";
+import UText from "../../ui.text-block/UText.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -84,7 +86,7 @@ MaxFileSize.args = {
 
 export const AllowedFileTypes = DefaultTemplate.bind({});
 AllowedFileTypes.args = {
-  allowedFileTypes: ["png", "jpeg"],
+  allowedFileTypes: [".png", ".jpeg"],
   description: "Only png and jpeg formats are allowed.",
 };
 
@@ -104,39 +106,53 @@ LabelSlot.args = {
 };
 
 export const Slots: StoryFn<UInputFileArgs> = (args) => ({
-  components: { UInputFile, UCol, UBadge, UIcon },
+  components: { UInputFile, UCol, UBadge, UIcon, URow, UText },
   setup() {
     return { args };
   },
   template: `
-    <UCol>
+    <UCol gap="xl">
       <UInputFile
         v-bind="args"
         v-model="args.files"
-        label="Slot Top"
+        label="Top Slot"
+        :allowedFileTypes="['.jpeg', '.png']"
+        :maxFileSize="2"
       >
         <template #top>
-          <UBadge label="Pending Review..." />
+          <URow align="center" gap="xs">
+            <UIcon name="info" size="sm" />
+            <UText variant="lifted">Recommended size: 400x400px, max 2MB</UText>
+          </URow>
         </template>
       </UInputFile>
 
       <UInputFile
         v-bind="args"
         v-model="args.files"
-        label="Slot Left"
+        label="Left Slot"
+        :allowedFileTypes="['.pdf', '.doc', '.docx']"
       >
         <template #left>
-          <UIcon name="info" color="warning" />
+          <URow align="center" gap="xs">
+            <UIcon name="description" size="sm" />
+            <UText label="PDF, DOC, DOCX" variant="lifted" size="xs" :wrap="false" />
+          </URow>
         </template>
       </UInputFile>
 
       <UInputFile
         v-bind="args"
         v-model="args.files"
-        label="Slot Bottom"
+        label="Bottom Slot"
+        multiple
+        :allowedFileTypes="['.png', '.jpeg']"
       >
         <template #bottom>
-          <UBadge label="An antivirus check will be performed after file upload." />
+          <URow align="center" gap="xs">
+            <UIcon name="schedule" size="sm" />
+            <UText label="Processing may take a few moments for multiple files" variant="lifted" />
+          </URow>
         </template>
       </UInputFile>
     </UCol>

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

@@ -1,3 +1,4 @@
+import { ref } from "vue";
 import {
   getArgs,
   getArgTypes,
@@ -11,7 +12,8 @@ import UCol from "../../ui.container-col/UCol.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import UButton from "../../ui.button/UButton.vue";
 import URow from "../../ui.container-row/URow.vue";
-import UAvatar from "../../ui.image-avatar/UAvatar.vue";
+import UDropdownButton from "../../ui.dropdown-button/UDropdownButton.vue";
+import UText from "../../ui.text-block/UText.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -185,23 +187,51 @@ export const IconProps: StoryFn<UInputNumberArgs> = (args) => ({
 });
 
 export const Slots: StoryFn<UInputNumberArgs> = (args) => ({
-  components: { UInputNumber, URow, UButton, UAvatar },
+  components: { UInputNumber, URow, UButton, UDropdownButton, UText },
   setup() {
-    return { args };
+    const currencies = [
+      { label: "USD", id: "usd" },
+      { label: "EUR", id: "eur" },
+      { label: "UAH", id: "uah" },
+    ];
+
+    const currency = ref("usd");
+
+    return { args, currency, currencies };
   },
   template: `
-    <URow>
-      <UInputNumber v-bind="args">
+    <URow class="gap-4">
+      <UInputNumber
+        label="Left slot"
+        placeholder="Enter discount amount"
+        :config="{ numberInput: { leftSlot: 'pl-0' } }"
+      >
         <template #left>
-          <UAvatar />
+          <UDropdownButton
+            v-model="currency"
+            :options="currencies"
+            size="sm"
+            variant="ghost"
+            class="rounded-r-none h-[49px]"
+          />
         </template>
       </UInputNumber>
 
-      <UInputNumber v-bind="args" :config="{ moneyInput: { rightSlot: 'pr-0' } }">
+      <UInputNumber
+        label="Right slot"
+        placeholder="Enter your annual payment"
+      >
         <template #right>
-          <UButton label="Calculate" size="sm" class="rounded-l-none h-full" />
+          <UText label="%, per year" variant="lifted" size="sm" :wrap="false" />
         </template>
       </UInputNumber>
     </URow>
   `,
 });
+Slots.parameters = {
+  docs: {
+    story: {
+      height: "250px",
+    },
+  },
+};

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

@@ -10,7 +10,7 @@ import UInputPassword from "../UInputPassword.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UButton from "../../ui.button/UButton.vue";
-import UAvatar from "../../ui.image-avatar/UAvatar.vue";
+import UDropdownButton from "../../ui.dropdown-button/UDropdownButton.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -126,25 +126,39 @@ export const IconProps: StoryFn<UInputPasswordArgs> = (args) => ({
 });
 
 export const Slots: StoryFn<UInputPasswordArgs> = (args) => ({
-  components: { UInputPassword, URow, UButton, UAvatar },
+  components: { UInputPassword, URow, UButton, UDropdownButton },
   setup() {
-    return { args };
+    const wifiTypes = [
+      { label: "WPA2", id: "wpa2" },
+      { label: "WPA3", id: "wpa3" },
+    ];
+
+    return { args, wifiTypes };
   },
   template: `
-    <URow>
+    <URow align="stretch">
       <UInputPassword
         v-bind="args"
         v-model="args.modelValue"
+        placeholder="Enter your password"
         :config="{ passwordInput: { leftSlot: 'pl-0' } }"
       >
         <template #left>
-          <UAvatar />
+          <UDropdownButton
+            v-model="args.wifiType"
+            :options="wifiTypes"
+            label="Wifi type"
+            size="sm"
+            variant="ghost"
+            class="rounded-r-none h-[49px]"
+          />
         </template>
       </UInputPassword>
 
       <UInputPassword
         v-bind="args"
         v-model="args.modelValue"
+        placeholder="Enter your password"
         :config="{ passwordInput: { rightSlot: 'pr-0' } }"
       >
         <template #right="{ visible, toggle }">
@@ -153,7 +167,7 @@ export const Slots: StoryFn<UInputPasswordArgs> = (args) => ({
             color="neutral"
             variant="ghost"
             size="sm"
-            class="rounded-l-none h-full"
+            class="rounded-l-none h-[49px] min-w-[69px]"
             @click="toggle"
           />
         </template>
@@ -161,3 +175,10 @@ export const Slots: StoryFn<UInputPasswordArgs> = (args) => ({
     </URow>
   `,
 });
+Slots.parameters = {
+  docs: {
+    story: {
+      height: "200px",
+    },
+  },
+};

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

@@ -116,9 +116,17 @@ RatingIcons.parameters = {
 
 export const CounterSlot = DefaultTemplate.bind({});
 CounterSlot.args = {
+  counter: true,
+  stars: 5,
+  modelValue: 0,
   slotTemplate: `
     <template #counter="{ counter }">
-      <UBadge :label="'Current rating is: ' + String(counter)" color="success" />
+      <UBadge
+        :label="counter === 0
+          ? 'No rating yet'
+          : counter + ' out of ' + args.stars + ' stars'"
+        :color="counter ? 'success' : 'warning'"
+      />
     </template>
   `,
 };
@@ -127,8 +135,12 @@ export const TotalSlot = DefaultTemplate.bind({});
 TotalSlot.args = {
   total: 250,
   slotTemplate: `
-    <template #total="{total}">
-      <UBadge :label="'Total reviews: ' + String(total)" color="success" />
+    <template #total="{ total }">
+      <UBadge
+        :label="total + ' reviews'"
+        color="info"
+        size="sm"
+      />
     </template>
   `,
 };

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

@@ -7,12 +7,11 @@ import {
 } from "../../utils/storybook.ts";
 
 import UInputSearch from "../../ui.form-input-search/UInputSearch.vue";
-import UButton from "../../ui.button/UButton.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import URow from "../../ui.container-row/URow.vue";
-import UAvatar from "../../ui.image-avatar/UAvatar.vue";
-import UBadge from "../../ui.text-badge/UBadge.vue";
+import UDropdownButton from "../../ui.dropdown-button/UDropdownButton.vue";
+import UText from "../../ui.text-block/UText.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -40,7 +39,7 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<UInputSearchArgs> = (args: UInputSearchArgs) => ({
-  components: { UInputSearch, UButton, UIcon },
+  components: { UInputSearch, UIcon },
   setup: () => ({ args, slots: getSlotNames(UInputSearch.__name) }),
   template: `
     <UInputSearch
@@ -136,23 +135,49 @@ export const IconProps: StoryFn<UInputSearchArgs> = (args) => ({
 });
 
 export const Slots: StoryFn<UInputSearchArgs> = (args) => ({
-  components: { UInputSearch, URow, UButton, UAvatar, UBadge },
+  components: { UInputSearch, UCol, URow, UIcon, UDropdownButton, UText },
   setup() {
-    return { args };
+    const aiVersions = [
+      { label: "GPT-4o", id: "gpt-4o" },
+      { label: "GPT-4o-mini", id: "gpt-4o-mini" },
+      { label: "GPT-4", id: "gpt-4" },
+    ];
+
+    return { args, aiVersions };
   },
   template: `
-    <URow>
-      <UInputSearch v-bind="args" :config="{ searchInput: { leftSlot: 'pl-0' } }">
-        <template #left>
-          <UAvatar size="sm" />
+    <UCol>
+      <UInputSearch placeholder="Search by rental district...">
+        <template #right>
+          <URow align="center" gap="xs">
+            <UIcon name="straighten" size="sm" />
+            <UText label="+2km" variant="muted" />
+          </URow>
         </template>
       </UInputSearch>
 
-      <UInputSearch v-bind="args" :config="{ searchInput: { rightSlot: 'pr-0' } }">
-        <template #right>
-          <UBadge label="Search" size="sm" color="success" />
+      <UInputSearch
+        placeholder="Ask something..."
+        :config="{ searchInput: { leftSlot: 'pl-0' } }"
+      >
+        <template #left>
+          <UDropdownButton
+            v-model="args.aiVersion"
+            :options="aiVersions"
+            label="AI Version"
+            size="sm"
+            variant="ghost"
+            class="rounded-r-none"
+          />
         </template>
       </UInputSearch>
-    </URow>
+    </UCol>
   `,
 });
+Slots.parameters = {
+  docs: {
+    story: {
+      height: "270px",
+    },
+  },
+};

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

@@ -1,4 +1,3 @@
-import { ref } from "vue";
 import {
   getArgs,
   getArgTypes,
@@ -11,8 +10,8 @@ import UTextarea from "../../ui.form-textarea/UTextarea.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import URow from "../../ui.container-row/URow.vue";
-import UAvatar from "../../ui.image-avatar/UAvatar.vue";
 import tooltip from "../../directives/tooltip/vTooltip.ts";
+import UText from "../../ui.text-block/UText.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -123,18 +122,14 @@ NoAutocomplete.parameters = {
 };
 
 export const Slots: StoryFn<UTextareaArgs> = (args) => ({
-  components: { UTextarea, URow, UIcon, UAvatar },
+  components: { UTextarea, URow, UIcon, UText },
   directives: { tooltip },
-  setup() {
-    const switchModel = ref(false);
-
-    return { args, switchModel };
-  },
+  setup: () => ({ args }),
   template: `
     <URow>
-      <UTextarea v-bind="args">
+      <UTextarea v-bind="args" v-model="args.modelValue" :max-length="300">
         <template #left>
-          <UAvatar />
+          <UText :label="args.modelValue?.length + '/300'" variant="lifted" />
         </template>
       </UTextarea>
 

package/ui.text-block/UText.vue

@@ -3,7 +3,6 @@ import { useTemplateRef } from "vue";
 
 import useUI from "../composables/useUI.ts";
 import { getDefaults } from "../utils/ui.ts";
-import { hasSlotContent } from "../utils/helper.ts";
 
 import { COMPONENT_NAME } from "./constants.ts";
 import defaultConfig from "./config.ts";
@@ -30,13 +29,14 @@ defineExpose({
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-const { getDataTest, wrapperAttrs, htmlAttrs } = useUI<Config>(defaultConfig);
+const { getDataTest, wrapperAttrs, labelAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>
   <div ref="wrapper" v-bind="wrapperAttrs" :data-test="getDataTest()">
     <!-- @slot Use it to add something inside. -->
-    <div v-if="!hasSlotContent($slots['default'])" v-bind="htmlAttrs" v-html="html" />
-    <slot />
+    <slot>
+      <div v-bind="labelAttrs" v-text="label" />
+    </slot>
   </div>
 </template>

package/ui.text-block/config.ts

@@ -12,6 +12,15 @@ export default /*tw*/ {
       [&_ul]:ml-2 [&_ol]:ml-2
     `,
     variants: {
+      variant: {
+        default: "text-{color}",
+        lifted: "text-{color}-lifted",
+        accented: "text-{color}-accented",
+        muted: "text-{color}/(--vl-disabled-opacity)",
+      },
+      color: {
+        inherit: "text-inherit",
+      },
       size: {
         xs: "text-tiny space-y-1",
         sm: "text-small space-y-2",
@@ -26,12 +35,24 @@ export default /*tw*/ {
       line: {
         true: "leading-none",
       },
+      wrap: {
+        false: "text-nowrap",
+      },
     },
+    compoundVariants: [
+      { color: "text", variant: "default", class: "text-default" },
+      { color: "text", variant: "lifted", class: "text-lifted" },
+      { color: "text", variant: "accented", class: "text-accented" },
+      { color: "text", variant: "muted", class: "text-muted" },
+    ],
   },
-  html: "",
+  label: "",
   defaults: {
+    color: "text",
+    variant: "default",
     size: "md",
     align: "left",
     line: false,
+    wrap: true,
   },
 };

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

@@ -1,10 +1,10 @@
 import {
+  trimText,
   getArgs,
   getArgTypes,
   getSlotNames,
   getSlotsFragment,
   getDocsDescription,
-  getEnumVariantDescription,
 } from "../../utils/storybook.ts";
 
 import UText from "../../ui.text-block/UText.vue";
@@ -12,20 +12,23 @@ import URow from "../../ui.container-row/URow.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
 
-import tooltip from "../../directives/tooltip/vTooltip.ts";
-
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
 
 interface UTextArgs extends Props {
   slotTemplate?: string;
-  enum: "size" | "align";
+  enum: "size" | "align" | "variant" | "color";
 }
 
 export default {
   id: "4020",
   title: "Text & Content / Text",
   component: UText,
+  args: {
+    label: trimText(`
+      Easily customize your UI with flexible components.
+    `),
+  },
   argTypes: {
     ...getArgTypes(UText.__name),
   },
@@ -34,29 +37,20 @@ export default {
       ...getDocsDescription(UText.__name),
     },
   },
-  args: {},
 } as Meta;
 
-const defaultTemplate = `
-  <p>
-    <b>To proceed with your registration</b>, please enter your <u>email address</u> in the field below.
-    <i>A verification link</i> will be sent to your inbox shortly.
-  </p>
-`;
-
 const DefaultTemplate: StoryFn<UTextArgs> = (args: UTextArgs) => ({
   components: { UText, URow, UBadge },
   setup: () => ({ args, slots: getSlotNames(UText.__name) }),
   template: `
     <UText v-bind="args">
-      ${args.slotTemplate || getSlotsFragment(defaultTemplate)}
+      ${args.slotTemplate || getSlotsFragment("")}
     </UText>
   `,
 });
 
 const EnumTemplate: StoryFn<UTextArgs> = (args: UTextArgs, { argTypes }) => ({
   components: { UText, UCol },
-  directives: { tooltip },
   setup: () => ({ args, argTypes, getArgs }),
   template: `
     <UCol>
@@ -64,11 +58,8 @@ const EnumTemplate: StoryFn<UTextArgs> = (args: UTextArgs, { argTypes }) => ({
         v-for="option in argTypes?.[args.enum]?.options"
         v-bind="getArgs(args, option)"
         :key="option"
-        v-tooltip="option"
         class="w-full"
-      >
-        ${args.slotTemplate || defaultTemplate}
-      </UText>
+      />
     </UCol>
   `,
 });
@@ -78,23 +69,57 @@ Default.args = {};
 
 export const Align = EnumTemplate.bind({});
 Align.args = { enum: "align" };
-Align.parameters = getEnumVariantDescription();
 
 export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size" };
-Sizes.parameters = getEnumVariantDescription();
 
-export const Line = DefaultTemplate.bind({});
-Line.args = {
-  line: true,
-};
-Line.parameters = {
-  docs: {
-    description: {
-      story: "Removes text line height (useful for 1-line text).",
-    },
-  },
-};
+export const Color = EnumTemplate.bind({});
+Color.args = { enum: "color" };
+
+export const Variant = EnumTemplate.bind({});
+Variant.args = { enum: "variant" };
+
+export const Line: StoryFn<UTextArgs> = (args: UTextArgs) => ({
+  components: { UText, UCol },
+  setup: () => ({ args }),
+  template: `
+    <UCol>
+      <UText>
+        <div class="rounded-medium border border-primary border-dashed w-fit">
+          Text with default library line height.
+        </div>
+      </UText>
+
+      <UText line>
+        <div class="rounded-medium border border-primary border-dashed w-fit">
+          Text with line height equal to its font size.
+        </div>
+      </UText>
+    </UCol>
+  `,
+});
+Line.args = {};
+
+export const Wrap: StoryFn<UTextArgs> = (args: UTextArgs) => ({
+  components: { UText, UCol },
+  setup: () => ({ args }),
+  template: `
+    <UCol>
+      <UText>
+        <div class="rounded-medium border border-primary border-dashed w-32">
+          Text with wrapping enabled (default behavior).
+        </div>
+      </UText>
+
+      <UText :wrap="false">
+        <div class="rounded-medium border border-primary border-dashed w-32">
+          Text with wrapping disabled (text-nowrap).
+        </div>
+      </UText>
+    </UCol>
+  `,
+});
+Wrap.args = {};
 
 export const Paragraphs = DefaultTemplate.bind({});
 Paragraphs.args = {
@@ -141,11 +166,21 @@ List.args = {
   `,
 };
 
-export const DefaultSlot = DefaultTemplate.bind({});
-DefaultSlot.args = {
+export const FormattedText = DefaultTemplate.bind({});
+FormattedText.args = {
+  slotTemplate: `
+    <p>
+      <b>To proceed with your registration</b>, please enter your <u>email address</u> in the field below.
+      <i>A verification link</i> will be sent to your inbox shortly.
+    </p>
+  `,
+};
+
+export const NestedComponent = DefaultTemplate.bind({});
+NestedComponent.args = {
   slotTemplate: `
     <p>To proceed with your registration, please enter your
-    <UBadge label="email address" v-bind="args" color="success" /> in the field below.
+    <UBadge label="email address" color="success" variant="subtle" /> in the field below.
     A verification link will be sent to your inbox shortly.</p>
   `,
 };

package/ui.text-block/tests/UText.test.ts

@@ -47,6 +47,56 @@ describe("UText.vue", () => {
       });
     });
 
+    // Color prop
+    it("applies the correct color class", async () => {
+      const colors = [
+        "primary",
+        "secondary",
+        "error",
+        "warning",
+        "success",
+        "info",
+        "notice",
+        "neutral",
+        "grayscale",
+        "inherit",
+        "text",
+      ];
+
+      colors.forEach((color) => {
+        const component = mount(UText, {
+          props: {
+            color: color as Props["color"],
+          },
+        });
+
+        color === "text"
+          ? expect(component.attributes("class")).toContain("text-default")
+          : expect(component.attributes("class")).toContain(color);
+      });
+    });
+
+    // Variant prop
+    it("applies the correct variant class", async () => {
+      const variants = {
+        default: "text-primary",
+        lifted: "text-primary-lifted",
+        accented: "text-primary-accented",
+        muted: "text-primary/(--vl-disabled-opacity)",
+      };
+
+      Object.entries(variants).forEach(([variant, classes]) => {
+        const component = mount(UText, {
+          props: {
+            variant: variant as Props["variant"],
+            color: "primary",
+          },
+        });
+
+        expect(component.attributes("class")).toContain(classes);
+      });
+    });
+
     // Line prop
     it("applies line class when line prop is true", () => {
       const line = true;
@@ -60,17 +110,30 @@ describe("UText.vue", () => {
       expect(component.attributes("class")).toContain("leading-none");
     });
 
-    // HTML prop
-    it("renders the correct HTML content", () => {
-      const html = "<strong>Bold Text</strong>";
+    // Wrap prop
+    it("applies text-nowrap class when wrap prop is false", () => {
+      const wrap = false;
+
+      const component = mount(UText, {
+        props: {
+          wrap,
+        },
+      });
+
+      expect(component.attributes("class")).toContain("text-nowrap");
+    });
+
+    // Label prop
+    it("renders the correct label content", () => {
+      const label = "Text label";
 
       const component = mount(UText, {
         props: {
-          html,
+          label,
         },
       });
 
-      expect(component.html()).toContain(html);
+      expect(component.html()).toContain(label);
     });
 
     // DataTest prop
@@ -88,7 +151,7 @@ describe("UText.vue", () => {
 
     // Config prop overriding classes
     it("applies custom classes from config prop", () => {
-      const customClasses = "text-red-500 font-bold";
+      const customClasses = "font-bold";
 
       const component = mount(UText, {
         props: {
@@ -117,14 +180,14 @@ describe("UText.vue", () => {
       expect(component.text()).toContain(slotContent);
     });
 
-    // Default slot overrides html prop
-    it("default slot overrides html prop", () => {
-      const html = "<strong>Bold Text</strong>";
+    // Default slot overrides label prop
+    it("default slot overrides label prop", () => {
+      const label = "Label Text";
       const slotContent = "Custom Content";
 
       const component = mount(UText, {
         props: {
-          html,
+          label,
         },
         slots: {
           default: slotContent,
@@ -132,7 +195,7 @@ describe("UText.vue", () => {
       });
 
       expect(component.text()).toContain(slotContent);
-      expect(component.html()).not.toContain(html);
+      expect(component.html()).not.toContain(label);
     });
   });
 

package/ui.text-block/types.ts

@@ -5,9 +5,9 @@ export type Config = typeof defaultConfig;
 
 export interface Props {
   /**
-   * HTML markdown or plain text.
+   * Text label.
    */
-  html?: string;
+  label?: string;
 
   /**
    * Text size.
@@ -19,11 +19,37 @@ export interface Props {
    */
   align?: "left" | "center" | "right";
 
+  /**
+   * Text variant.
+   */
+  variant?: "default" | "accented" | "lifted" | "muted";
+
+  /**
+   * Text color.
+   */
+  color?:
+    | "primary"
+    | "secondary"
+    | "error"
+    | "warning"
+    | "success"
+    | "info"
+    | "notice"
+    | "neutral"
+    | "grayscale"
+    | "inherit"
+    | "text"; // the default design system text color
+
   /**
    * Removes text line height (useful for 1-line text).
    */
   line?: boolean;
 
+  /**
+   * Enables text wrapping.
+   */
+  wrap?: boolean;
+
   /**
    * Component config object.
    */

package/ui.text-header/UHeader.vue

@@ -35,6 +35,7 @@ const { getDataTest, headerAttrs } = useUI<Config>(defaultConfig);
 
 <template>
   <component :is="tag" ref="header" v-bind="headerAttrs" :data-test="getDataTest()">
+    <!-- @slot Use it to add html inside. -->
     <slot>{{ label }}</slot>
   </component>
 </template>

package/ui.text-header/config.ts

@@ -1,7 +1,16 @@
 export default /*tw*/ {
   header: {
-    base: "text-{color} font-medium",
+    base: "font-medium",
     variants: {
+      variant: {
+        default: "text-{color}",
+        lifted: "text-{color}-lifted",
+        accented: "text-{color}-accented",
+        muted: "text-{color}/(--vl-disabled-opacity)",
+      },
+      color: {
+        inherit: "text-inherit",
+      },
       size: {
         xs: "text-lg",
         sm: "text-xl",
@@ -14,9 +23,16 @@ export default /*tw*/ {
         true: "!leading-none",
       },
     },
+    compoundVariants: [
+      { color: "text", variant: "default", class: "text-default" },
+      { color: "text", variant: "lifted", class: "text-lifted" },
+      { color: "text", variant: "accented", class: "text-accented" },
+      { color: "text", variant: "muted", class: "text-muted" },
+    ],
   },
   defaults: {
-    color: "grayscale",
+    color: "text",
+    variant: "default",
     size: "md",
     tag: "div",
     line: true,

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

@@ -18,7 +18,7 @@ import type { Props } from "../types.ts";
 
 interface UHeaderArgs extends Props {
   slotTemplate?: string;
-  enum: "size" | "color";
+  enum: "size" | "color" | "variant";
 }
 
 export default {
@@ -71,6 +71,10 @@ export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size" };
 Sizes.parameters = getEnumVariantDescription();
 
+export const Variants = EnumTemplate.bind({});
+Variants.args = { enum: "variant" };
+Variants.parameters = getEnumVariantDescription();
+
 export const Colors = EnumTemplate.bind({});
 Colors.args = { enum: "color" };
 Colors.parameters = getEnumVariantDescription();

package/ui.text-header/tests/UHeader.test.ts

@@ -42,6 +42,7 @@ describe("UHeader.vue", () => {
         "notice",
         "neutral",
         "grayscale",
+        "text",
       ];
 
       colors.forEach((color) => {
@@ -51,7 +52,30 @@ describe("UHeader.vue", () => {
           },
         });
 
-        expect(component.attributes("class")).toContain(color);
+        color === "text"
+          ? expect(component.attributes("class")).toContain("text-default")
+          : expect(component.attributes("class")).toContain(color);
+      });
+    });
+
+    // Variant prop
+    it("applies the correct variant class", async () => {
+      const variants = {
+        default: "text-primary",
+        lifted: "text-primary-lifted",
+        accented: "text-primary-accented",
+        muted: "text-primary/(--vl-disabled-opacity)",
+      };
+
+      Object.entries(variants).forEach(([variant, classes]) => {
+        const component = mount(UHeader, {
+          props: {
+            variant: variant as Props["variant"],
+            color: "primary",
+          },
+        });
+
+        expect(component.attributes("class")).toContain(classes);
       });
     });
 

package/ui.text-header/types.ts

@@ -14,6 +14,11 @@ export interface Props {
    */
   size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 
+  /**
+   * Text variant.
+   */
+  variant?: "default" | "accented" | "lifted" | "muted";
+
   /**
    * Header color.
    */
@@ -26,7 +31,8 @@ export interface Props {
     | "info"
     | "notice"
     | "neutral"
-    | "grayscale";
+    | "grayscale"
+    | "text"; // the default design system text color
 
   /**
    * Allows changing HTML tag.

package/ui.text-notify/storybook/docs.mdx

@@ -21,18 +21,18 @@ Use `notifySuccess`, `notifyWarning`, `notifyError` shortcut methods to trigger
 
 <Source code={`
 import {
-  notify,
-  notifySuccess,
-  notifyWarning,
-  notifyError,
+    notify,
+    notifySuccess,
+    notifyWarning,
+    notifyError,
 } from "vueless";
 
 notify({
-  type: "success", // @values: success, warning, error
-  label: "Hurray!",
-  description: "The file successfully downloaded.",
-  duration: 1000, // in milliseconds
-  ignoreDuplicates: false // ignore notifications with the same 'description'
+    type: "success", // @values: success, warning, error
+    label: "Hurray!",
+    description: "The file successfully downloaded.",
+    duration: 1000, // in milliseconds
+    ignoreDuplicates: false // ignore notifications with the same 'description'
 });
 
 notifySuccess({ description: "The file successfully downloaded." });
@@ -52,18 +52,18 @@ notifySuccess({ description: "The file successfully downloaded." });
 clearNotifications();
 `} language="jsx" dark />
 
-## Trigger notifications
+## Delayed notifications
 You can create a delayed notification which you can trigger any time later.
 
 <Source code={`
 import { setDelayedNotify, getDelayedNotify } from "vueless";
 
 setDelayedNotify({
-  type: "success", // @values: success, warning, error
-  label: "Hurray!",
-  description: "The file successfully downloaded.",
-  duration: 1000, // in milliseconds
-  ignoreDuplicates: false // ignore notifications with the same 'description'
+    type: "success", // @values: success, warning, error
+    label: "Hurray!",
+    description: "The file successfully downloaded.",
+    duration: 1000, // in milliseconds
+    ignoreDuplicates: false // ignore notifications with the same 'description'
 });
 
 // and somewhere below

package/utils/storybook.ts

@@ -409,3 +409,7 @@ export function getEnumVariantDescription(message = "Hover over a variant to see
     },
   };
 }
+
+export function trimText(text: string) {
+  return text.replace(/\s+/g, " ").trim();
+}