vueless 1.2.3-beta.1 → 1.2.3-beta.11

package/README.md

@@ -2,7 +2,7 @@
 
 # Vueless UI
 
-Vueless is an open-source UI library and design system framework for Vue.js 3 and Nuxt.js 3, built on top of Tailwind CSS v4.
+Vueless is an open-source UI library and design system framework for Vue.js 3 and Nuxt.js 3 / 4, built on top of Tailwind CSS v4.
 
 It’s completely styleless, allowing you to extend or override default styles without modifying the components themselves — only your custom styles are included in the final build.
 
@@ -40,6 +40,18 @@ Vueless is simple enough for everyday use and powerful enough for advanced scena
 
 ## Quick Start (Vue)
 
+### New project
+
+To get started with Vueless UI, simply paste the following code into your terminal:
+
+```bash
+npm create vueless@latest
+```
+
+This command guides you through a few setup options, then generates a new scaffolded Vue + Vueless UI project with the complete application structure.
+
+### Existing project
+
 1. Install `vueless` UI library packages.
 
 ```bash
@@ -108,6 +120,14 @@ export default defineNuxtConfig({
 @import "vueless";
 ```
 
+## Ecosystem
+
+* [@vueless/storybook](https://github.com/vuelessjs/vueless-storybook) - Storybook preset for Vueless UI component library [(docs)](https://docs.vueless.com/installation/storybook).
+* [@vueless/nuxt](https://github.com/vuelessjs/vueless-module-nuxt) - Vueless UI module for Nuxt.js [(docs)](https://docs.vueless.com/installation/nuxt).
+* [create-vueless](https://github.com/vuelessjs/vueless-create) - CLI tool to quickly start a Vueless UI project from a template [(docs)](https://docs.vueless.com/installation/vue).
+  * [vueless-quickstart](https://github.com/vuelessjs/vueless-quickstart) - Vue + Vueless UI + JavaScript project template.
+  * [vueless-quickstart-ts](https://github.com/vuelessjs/vueless-quickstart-ts) - Vue + Vueless UI + TypeScript project template.
+
 ## Contributing
 
 * We encourage you to contribute to Vueless! Please check out the
@@ -120,5 +140,8 @@ check out our [security policy](SECURITY.md) for guidelines.
 
 Vueless is released under the [MIT License](https://opensource.org/licenses/MIT).
 
+---
+From Ukrainians to a Peaceful World 🇺🇦
+
 
 

package/bin/constants.d.ts

@@ -1,3 +1,3 @@
 export const SRC_COMPONENTS_PATH: "/src/components";
 export const COMPONENTS_PATH: "/components";
-export const DEFAULT_VUELESS_CONFIG_CONTENT: "import { componentConfigs } from \"./.vueless\";\n\nexport default {\n  /**\n   * Global settings.\n   */\n  primary: \"grayscale\",\n  neutral: \"gray\",\n  text: 14,\n  outline: 2,\n  rounding: 8,\n  disabledOpacity: 50,\n  colorMode: \"auto\",\n\n  /**\n   * Component settings.\n   */\n  components: /*tw*/ {\n    ...componentConfigs,\n  },\n\n  /**\n   * Directive settings.\n   */\n  directives: {},\n\n  /**\n   * Light theme CSS variable settings.\n   */\n  lightTheme: {\n    /* Primary colors */\n    \"--vl-primary\": \"--vl-primary-600\",\n    \"--vl-primary-lifted\": \"--vl-primary-700\",\n    \"--vl-primary-accented\": \"--vl-primary-800\",\n\n    /* Secondary colors */\n    \"--vl-secondary\": \"--vl-neutral-500\",\n    \"--vl-secondary-lifted\": \"--vl-neutral-600\",\n    \"--vl-secondary-accented\": \"--vl-neutral-700\",\n\n    /* Success colors */\n    \"--vl-success\": \"--color-green-600\",\n    \"--vl-success-lifted\": \"--color-green-700\",\n    \"--vl-success-accented\": \"--color-green-800\",\n\n    /* Info colors */\n    \"--vl-info\": \"--color-blue-600\",\n    \"--vl-info-lifted\": \"--color-blue-700\",\n    \"--vl-info-accented\": \"--color-blue-800\",\n\n    /* Notice colors */\n    \"--vl-notice\": \"--color-violet-600\",\n    \"--vl-notice-lifted\": \"--color-violet-700\",\n    \"--vl-notice-accented\": \"--color-violet-800\",\n\n    /* Warning colors */\n    \"--vl-warning\": \"--color-orange-600\",\n    \"--vl-warning-lifted\": \"--color-orange-700\",\n    \"--vl-warning-accented\": \"--color-orange-800\",\n\n    /* Error colors */\n    \"--vl-error\": \"--color-red-600\",\n    \"--vl-error-lifted\": \"--color-red-700\",\n    \"--vl-error-accented\": \"--color-red-800\",\n\n    /* Grayscale colors */\n    \"--vl-grayscale\": \"--vl-neutral-900\",\n    \"--vl-grayscale-lifted\": \"--vl-neutral-800\",\n    \"--vl-grayscale-accented\": \"--vl-neutral-700\",\n\n    /* Neutral colors */\n    \"--vl-neutral\": \"--vl-neutral-500\",\n    \"--vl-neutral-lifted\": \"--vl-neutral-600\",\n    \"--vl-neutral-accented\": \"--vl-neutral-700\",\n\n    /* Text neutral colors */\n    \"--vl-text-inverted\": \"--color-white\",\n    \"--vl-text-muted\": \"--vl-neutral-400\",\n    \"--vl-text-lifted\": \"--vl-neutral-500\",\n    \"--vl-text-accented\": \"--vl-neutral-600\",\n    \"--vl-text\": \"--vl-neutral-900\",\n\n    /* Border neutral colors */\n    \"--vl-border-muted\": \"--vl-neutral-200\",\n    \"--vl-border\": \"--vl-neutral-300\",\n    \"--vl-border-lifted\": \"--vl-neutral-400\",\n    \"--vl-border-accented\": \"--vl-neutral-600\",\n\n    /* Background neutral colors */\n    \"--vl-bg\": \"--color-white\",\n    \"--vl-bg-muted\": \"--vl-neutral-50\",\n    \"--vl-bg-lifted\": \"--vl-neutral-100\",\n    \"--vl-bg-accented\": \"--vl-neutral-200\",\n    \"--vl-bg-inverted\": \"--vl-neutral-900\",\n  },\n\n  /**\n   * Dark theme CSS variable settings.\n   */\n  darkTheme: {\n    /* Primary colors */\n    \"--vl-primary\": \"--vl-primary-400\",\n    \"--vl-primary-lifted\": \"--vl-primary-500\",\n    \"--vl-primary-accented\": \"--vl-primary-600\",\n\n    /* Secondary colors */\n    \"--vl-secondary\": \"--vl-neutral-300\",\n    \"--vl-secondary-lifted\": \"--vl-neutral-400\",\n    \"--vl-secondary-accented\": \"--vl-neutral-500\",\n\n    /* Success colors */\n    \"--vl-success\": \"--color-green-400\",\n    \"--vl-success-lifted\": \"--color-green-500\",\n    \"--vl-success-accented\": \"--color-green-600\",\n\n    /* Info colors */\n    \"--vl-info\": \"--color-blue-400\",\n    \"--vl-info-lifted\": \"--color-blue-500\",\n    \"--vl-info-accented\": \"--color-blue-600\",\n\n    /* Notice colors */\n    \"--vl-notice\": \"--color-violet-400\",\n    \"--vl-notice-lifted\": \"--color-violet-500\",\n    \"--vl-notice-accented\": \"--color-violet-600\",\n\n    /* Warning colors */\n    \"--vl-warning\": \"--color-orange-400\",\n    \"--vl-warning-lifted\": \"--color-orange-500\",\n    \"--vl-warning-accented\": \"--color-orange-600\",\n\n    /* Error colors */\n    \"--vl-error\": \"--color-red-400\",\n    \"--vl-error-lifted\": \"--color-red-500\",\n    \"--vl-error-accented\": \"--color-red-600\",\n\n    /* Grayscale colors */\n    \"--vl-grayscale\": \"--vl-neutral-100\",\n    \"--vl-grayscale-lifted\": \"--vl-neutral-200\",\n    \"--vl-grayscale-accented\": \"--vl-neutral-300\",\n\n    /* Neutral colors */\n    \"--vl-neutral\": \"--vl-neutral-300\",\n    \"--vl-neutral-lifted\": \"--vl-neutral-400\",\n    \"--vl-neutral-accented\": \"--vl-neutral-500\",\n\n    /* Text neutral colors */\n    \"--vl-text-inverted\": \"--vl-neutral-900\",\n    \"--vl-text-muted\": \"--vl-neutral-600\",\n    \"--vl-text-lifted\": \"--vl-neutral-400\",\n    \"--vl-text-accented\": \"--vl-neutral-300\",\n    \"--vl-text\": \"--vl-neutral-100\",\n\n    /* Border neutral colors */\n    \"--vl-border-muted\": \"--vl-neutral-800\",\n    \"--vl-border\": \"--vl-neutral-700\",\n    \"--vl-border-lifted\": \"--vl-neutral-600\",\n    \"--vl-border-accented\": \"--vl-neutral-400\",\n\n    /* Background neutral colors */\n    \"--vl-bg\": \"--vl-neutral-900\",\n    \"--vl-bg-muted\": \"--vl-neutral-800\",\n    \"--vl-bg-lifted\": \"--vl-neutral-800\",\n    \"--vl-bg-accented\": \"--vl-neutral-700\",\n    \"--vl-bg-inverted\": \"--vl-neutral-100\",\n  },\n};\n";
+export const DEFAULT_VUELESS_CONFIG_CONTENT: "import { componentConfigs } from \"./.vueless\";\n\nexport default {\n  /**\n   * Global settings.\n   */\n  primary: \"grayscale\",\n  neutral: \"gray\",\n  text: 14,\n  outline: 2,\n  rounding: 8,\n  letterSpacing: 0,\n  disabledOpacity: 50,\n  colorMode: \"auto\",\n\n  /**\n   * Component settings.\n   */\n  components: /*tw*/ {\n    ...componentConfigs,\n  },\n\n  /**\n   * Directive settings.\n   */\n  directives: {},\n\n  /**\n   * Light theme CSS variable settings.\n   */\n  lightTheme: {\n    /* Primary colors */\n    \"--vl-primary\": \"--vl-primary-600\",\n    \"--vl-primary-lifted\": \"--vl-primary-700\",\n    \"--vl-primary-accented\": \"--vl-primary-800\",\n\n    /* Secondary colors */\n    \"--vl-secondary\": \"--vl-neutral-500\",\n    \"--vl-secondary-lifted\": \"--vl-neutral-600\",\n    \"--vl-secondary-accented\": \"--vl-neutral-700\",\n\n    /* Success colors */\n    \"--vl-success\": \"--color-green-600\",\n    \"--vl-success-lifted\": \"--color-green-700\",\n    \"--vl-success-accented\": \"--color-green-800\",\n\n    /* Info colors */\n    \"--vl-info\": \"--color-blue-600\",\n    \"--vl-info-lifted\": \"--color-blue-700\",\n    \"--vl-info-accented\": \"--color-blue-800\",\n\n    /* Notice colors */\n    \"--vl-notice\": \"--color-violet-600\",\n    \"--vl-notice-lifted\": \"--color-violet-700\",\n    \"--vl-notice-accented\": \"--color-violet-800\",\n\n    /* Warning colors */\n    \"--vl-warning\": \"--color-orange-600\",\n    \"--vl-warning-lifted\": \"--color-orange-700\",\n    \"--vl-warning-accented\": \"--color-orange-800\",\n\n    /* Error colors */\n    \"--vl-error\": \"--color-red-600\",\n    \"--vl-error-lifted\": \"--color-red-700\",\n    \"--vl-error-accented\": \"--color-red-800\",\n\n    /* Grayscale colors */\n    \"--vl-grayscale\": \"--vl-neutral-900\",\n    \"--vl-grayscale-lifted\": \"--vl-neutral-800\",\n    \"--vl-grayscale-accented\": \"--vl-neutral-700\",\n\n    /* Neutral colors */\n    \"--vl-neutral\": \"--vl-neutral-500\",\n    \"--vl-neutral-lifted\": \"--vl-neutral-600\",\n    \"--vl-neutral-accented\": \"--vl-neutral-700\",\n\n    /* Text neutral colors */\n    \"--vl-text-inverted\": \"--color-white\",\n    \"--vl-text-muted\": \"--vl-neutral-400\",\n    \"--vl-text-lifted\": \"--vl-neutral-500\",\n    \"--vl-text-accented\": \"--vl-neutral-600\",\n    \"--vl-text\": \"--vl-neutral-900\",\n\n    /* Border neutral colors */\n    \"--vl-border-muted\": \"--vl-neutral-200\",\n    \"--vl-border\": \"--vl-neutral-300\",\n    \"--vl-border-lifted\": \"--vl-neutral-400\",\n    \"--vl-border-accented\": \"--vl-neutral-600\",\n\n    /* Background neutral colors */\n    \"--vl-bg\": \"--color-white\",\n    \"--vl-bg-muted\": \"--vl-neutral-50\",\n    \"--vl-bg-lifted\": \"--vl-neutral-100\",\n    \"--vl-bg-accented\": \"--vl-neutral-200\",\n    \"--vl-bg-inverted\": \"--vl-neutral-900\",\n  },\n\n  /**\n   * Dark theme CSS variable settings.\n   */\n  darkTheme: {\n    /* Primary colors */\n    \"--vl-primary\": \"--vl-primary-400\",\n    \"--vl-primary-lifted\": \"--vl-primary-500\",\n    \"--vl-primary-accented\": \"--vl-primary-600\",\n\n    /* Secondary colors */\n    \"--vl-secondary\": \"--vl-neutral-300\",\n    \"--vl-secondary-lifted\": \"--vl-neutral-400\",\n    \"--vl-secondary-accented\": \"--vl-neutral-500\",\n\n    /* Success colors */\n    \"--vl-success\": \"--color-green-400\",\n    \"--vl-success-lifted\": \"--color-green-500\",\n    \"--vl-success-accented\": \"--color-green-600\",\n\n    /* Info colors */\n    \"--vl-info\": \"--color-blue-400\",\n    \"--vl-info-lifted\": \"--color-blue-500\",\n    \"--vl-info-accented\": \"--color-blue-600\",\n\n    /* Notice colors */\n    \"--vl-notice\": \"--color-violet-400\",\n    \"--vl-notice-lifted\": \"--color-violet-500\",\n    \"--vl-notice-accented\": \"--color-violet-600\",\n\n    /* Warning colors */\n    \"--vl-warning\": \"--color-orange-400\",\n    \"--vl-warning-lifted\": \"--color-orange-500\",\n    \"--vl-warning-accented\": \"--color-orange-600\",\n\n    /* Error colors */\n    \"--vl-error\": \"--color-red-400\",\n    \"--vl-error-lifted\": \"--color-red-500\",\n    \"--vl-error-accented\": \"--color-red-600\",\n\n    /* Grayscale colors */\n    \"--vl-grayscale\": \"--vl-neutral-100\",\n    \"--vl-grayscale-lifted\": \"--vl-neutral-200\",\n    \"--vl-grayscale-accented\": \"--vl-neutral-300\",\n\n    /* Neutral colors */\n    \"--vl-neutral\": \"--vl-neutral-300\",\n    \"--vl-neutral-lifted\": \"--vl-neutral-400\",\n    \"--vl-neutral-accented\": \"--vl-neutral-500\",\n\n    /* Text neutral colors */\n    \"--vl-text-inverted\": \"--vl-neutral-900\",\n    \"--vl-text-muted\": \"--vl-neutral-600\",\n    \"--vl-text-lifted\": \"--vl-neutral-400\",\n    \"--vl-text-accented\": \"--vl-neutral-300\",\n    \"--vl-text\": \"--vl-neutral-100\",\n\n    /* Border neutral colors */\n    \"--vl-border-muted\": \"--vl-neutral-800\",\n    \"--vl-border\": \"--vl-neutral-700\",\n    \"--vl-border-lifted\": \"--vl-neutral-600\",\n    \"--vl-border-accented\": \"--vl-neutral-400\",\n\n    /* Background neutral colors */\n    \"--vl-bg\": \"--vl-neutral-900\",\n    \"--vl-bg-muted\": \"--vl-neutral-800\",\n    \"--vl-bg-lifted\": \"--vl-neutral-800\",\n    \"--vl-bg-accented\": \"--vl-neutral-700\",\n    \"--vl-bg-inverted\": \"--vl-neutral-100\",\n  },\n};\n";

package/bin/constants.js

@@ -12,6 +12,7 @@ export default {
   text: 14,
   outline: 2,
   rounding: 8,
+  letterSpacing: 0,
   disabledOpacity: 50,
   colorMode: "auto",
 

package/constants.d.ts

@@ -8,6 +8,7 @@ export const TEXT: "text";
 export const OUTLINE: "outline";
 export const ROUNDING: "rounding";
 export const DISABLED_OPACITY: "disabled-opacity";
+export const LETTER_SPACING: "letter-spacing";
 export const COLOR_MODE_KEY: "vl-color-mode";
 export const AUTO_MODE_KEY: "vl-auto-mode";
 export const DARK_MODE_CLASS: "vl-dark";
@@ -24,6 +25,7 @@ export const DEFAULT_ROUNDING: 8;
 export const ROUNDING_DECREMENT: 4;
 export const ROUNDING_INCREMENT: 6;
 export const DEFAULT_DISABLED_OPACITY: 50;
+export const DEFAULT_LETTER_SPACING: 0;
 export const PRIMARY_COLORS: string[];
 export const STATE_COLORS: string[];
 export const NEUTRAL_COLORS: string[];

package/constants.js

@@ -16,6 +16,7 @@ export const TEXT = "text";
 export const OUTLINE = "outline";
 export const ROUNDING = "rounding";
 export const DISABLED_OPACITY = "disabled-opacity";
+export const LETTER_SPACING = "letter-spacing";
 
 /* Vueless color mode keys */
 export const COLOR_MODE_KEY = "vl-color-mode";
@@ -36,6 +37,7 @@ export const DEFAULT_ROUNDING = 8; /* pixels */
 export const ROUNDING_DECREMENT = 4; /* pixels */
 export const ROUNDING_INCREMENT = 6; /* pixels */
 export const DEFAULT_DISABLED_OPACITY = 50; /* presents */
+export const DEFAULT_LETTER_SPACING = 0; /* em */
 
 /* Vueless supported color shades */
 export const PRIMARY_COLORS = [

package/modules.d.ts

@@ -20,12 +20,6 @@ declare module "*.svg?skipsvgo" {
   export default component;
 }
 
-declare module "vueless/storybook" {
-  import type { Config, UnknownObject } from "./types";
-  export function defineConfigWithVueless(config: Config): Promise<UnknownObject>;
-  export function getVuelessStoriesGlob(vuelessEnv: string): Promise<string[]>;
-}
-
 declare module "virtual:vueless/icons" {
   import type { UnknownArray } from "./types";
   export const cachedIcons: UnknownArray;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.3-beta.1",
+  "version": "1.2.3-beta.11",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
@@ -9,9 +9,10 @@
     "access": "public"
   },
   "scripts": {
-    "dev:docs": "storybook dev -p 6006 --docs --no-open",
-    "dev": "storybook dev -p 6006 --no-open",
-    "build": "storybook build --docs",
+    "link:package": "rm -rf node_modules/vueless && ln -s ../src ./node_modules/vueless",
+    "dev:docs": "npm run link:package && storybook dev -p 6006 --docs --no-open",
+    "dev": "npm run link:package && storybook dev -p 6006 --no-open",
+    "build": "npm run link:package && storybook build --docs",
     "preview": "vite preview --host --outDir=storybook-static",
     "ts:check": "vue-tsc --build --force",
     "release:icons": "npx node .scripts/icons",
@@ -21,8 +22,8 @@
     "release:patch": "release-it patch --ci --npm.publish --git.tag --github.release",
     "release:minor": "release-it minor --ci --npm.publish --git.tag --github.release",
     "release:major": "release-it major --ci --npm.publish --git.tag --github.release",
-    "lint": "eslint --no-fix src/ test/ .storybook/ .vueless/",
-    "lint:fix": "eslint --fix src/ test/ .storybook/ .vueless/",
+    "lint": "eslint --no-fix src/ test/ .storybook/ .vueless/ .scripts/",
+    "lint:fix": "eslint --fix src/ test/ .storybook/ .vueless/ .scripts/",
     "lint:ci": "eslint --no-fix --max-warnings=0",
     "test": "vitest",
     "test:ci": "vitest --run"
@@ -55,7 +56,7 @@
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
-    "@vueless/storybook": "^1.1.3-beta.10",
+    "@vueless/storybook": "^1.2.1",
     "eslint": "^9.32.0",
     "eslint-plugin-storybook": "^9.0.18",
     "eslint-plugin-vue": "^10.3.0",
@@ -68,8 +69,15 @@
     "vitest": "^3.2.4",
     "vue": "^3.5.18",
     "vue-router": "^4.5.1",
-    "vue-tsc": "^3.0.4",
-    "vueless": "^1.2.1-beta.2"
+    "vue-tsc": "^3.0.4"
+  },
+  "peerDependencies": {
+    "vue-router": "^4.5.0"
+  },
+  "peerDependenciesMeta": {
+    "vue-router": {
+      "optional": true
+    }
   },
   "sideEffects": false,
   "style": "tailwind.css",

package/tailwind.css

@@ -22,7 +22,7 @@
 
 @layer base {
   body {
-    @apply antialiased text-(--vl-text) bg-(--vl-bg) scheme-light dark:scheme-dark;
+    @apply antialiased text-(--vl-text) bg-(--vl-bg) tracking-(--vl-letter-spacing) scheme-light dark:scheme-dark;
   }
 
   [type='checkbox']:checked {

package/types.ts

@@ -113,6 +113,11 @@ export interface ThemeConfig {
    */
   outline?: number | Partial<ThemeConfigOutline>;
 
+  /**
+   * Default components letter spacing.
+   */
+  letterSpacing?: number;
+
   /**
    * Default components opacity for disabled state (in percents).
    */

package/ui.boilerplate/storybook/docs.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/addon-docs/blocks";
 import { getSource } from "../../utils/storybook";
 
-import * as stories from "./stories.js";
+import * as stories from "./stories";
 import defaultConfig from "../config?raw"
 
 <Meta of={stories} />

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

@@ -31,7 +31,10 @@ export default {
   },
   parameters: {
     docs: {
-      ...getDocsDescription(ULink.__name),
+      ...getDocsDescription(
+        ULink.__name,
+        "For Vue projects <a href='https://router.vuejs.org' target='_blank'>VueRouter</a> needs to be installed.",
+      ),
     },
   },
 } as Meta;

package/ui.dropdown-badge/UDropdownBadge.vue

@@ -39,6 +39,22 @@ const emit = defineEmits([
    * @property {number} value
    */
   "update:modelValue",
+
+  /**
+   * Triggers when a dropdown list is opened.
+   */
+  "open",
+
+  /**
+   * Triggers when a dropdown list is closed.
+   */
+  "close",
+
+  /**
+   * Triggers when the search value is changed.
+   * @property {string} query
+   */
+  "searchChange",
 ]);
 
 type UListboxRef = InstanceType<typeof UListbox>;
@@ -80,7 +96,7 @@ const selectedOptions = computed(() => {
 });
 
 const badgeLabel = computed(() => {
-  if (!selectedOptions.value.length) {
+  if (!props.labelDisplayCount || !selectedOptions.value.length) {
     return props.label;
   }
 
@@ -114,22 +130,30 @@ function getFullOptionLabels(value: Option | Option[]) {
   return "";
 }
 
+function onSearchChange(query: string) {
+  emit("searchChange", query);
+}
+
 function onClickBadge() {
   isShownOptions.value = !isShownOptions.value;
 
   if (isShownOptions.value) {
     nextTick(() => listboxRef.value?.wrapperRef?.focus());
+
+    emit("open");
   }
 }
 
 function hideOptions() {
   isShownOptions.value = false;
+
+  emit("close");
 }
 
 function onClickOption(option: Option) {
   emit("clickOption", option);
 
-  hideOptions();
+  if (!props.multiple) hideOptions();
 }
 
 defineExpose({
@@ -229,6 +253,7 @@ const { getDataTest, config, wrapperAttrs, dropdownBadgeAttrs, listboxAttrs, tog
       v-bind="listboxAttrs"
       :data-test="getDataTest('list')"
       @click-option="onClickOption"
+      @search-change="onSearchChange"
     />
   </div>
 </template>

package/ui.dropdown-button/UDropdownButton.vue

@@ -39,6 +39,22 @@ const emit = defineEmits([
    * @property {number} value
    */
   "update:modelValue",
+
+  /**
+   * Triggers when a dropdown list is opened.
+   */
+  "open",
+
+  /**
+   * Triggers when a dropdown list is closed.
+   */
+  "close",
+
+  /**
+   * Triggers when the search value is changed.
+   * @property {string} query
+   */
+  "searchChange",
 ]);
 
 provide("hideDropdownOptions", hideOptions);
@@ -82,7 +98,7 @@ const selectedOptions = computed(() => {
 });
 
 const buttonLabel = computed(() => {
-  if (!selectedOptions.value.length) {
+  if (!props.labelDisplayCount || !selectedOptions.value.length) {
     return props.label;
   }
 
@@ -106,6 +122,10 @@ const toggleIconName = computed(() => {
   return props.toggleIcon ? config.value.defaults.toggleIcon : "";
 });
 
+function onSearchChange(query: string) {
+  emit("searchChange", query);
+}
+
 function getFullOptionLabels(value: Option | Option[]) {
   const labelKey = props.labelKey;
 
@@ -119,7 +139,7 @@ function getFullOptionLabels(value: Option | Option[]) {
 function onClickOption(option: Option) {
   emit("clickOption", option);
 
-  hideOptions();
+  if (!props.multiple) hideOptions();
 }
 
 function onClickButton() {
@@ -127,11 +147,15 @@ function onClickButton() {
 
   if (isShownOptions.value) {
     nextTick(() => listboxRef.value?.wrapperRef?.focus());
+
+    emit("open");
   }
 }
 
 function hideOptions() {
   isShownOptions.value = false;
+
+  emit("close");
 }
 
 defineExpose({
@@ -230,6 +254,7 @@ const { getDataTest, config, dropdownButtonAttrs, listboxAttrs, toggleIconAttrs,
       v-bind="listboxAttrs"
       :data-test="getDataTest('list')"
       @click-option="onClickOption"
+      @search-change="onSearchChange"
     />
   </div>
 </template>

package/ui.dropdown-link/UDropdownLink.vue

@@ -39,6 +39,22 @@ const emit = defineEmits([
    * @property {number} value
    */
   "update:modelValue",
+
+  /**
+   * Triggers when a dropdown list is opened.
+   */
+  "open",
+
+  /**
+   * Triggers when a dropdown list is closed.
+   */
+  "close",
+
+  /**
+   * Triggers when the search value is changed.
+   * @property {string} query
+   */
+  "searchChange",
 ]);
 
 provide("hideDropdownOptions", hideOptions);
@@ -82,7 +98,7 @@ const selectedOptions = computed(() => {
 });
 
 const linkLabel = computed(() => {
-  if (!selectedOptions.value.length) {
+  if (!props.labelDisplayCount || !selectedOptions.value.length) {
     return props.label;
   }
 
@@ -116,6 +132,10 @@ function getFullOptionLabels(value: Option | Option[]) {
   return "";
 }
 
+function onSearchChange(query: string) {
+  emit("searchChange", query);
+}
+
 function onClickLink() {
   if (props.disabled) return;
 
@@ -123,17 +143,21 @@ function onClickLink() {
 
   if (isShownOptions.value) {
     nextTick(() => listboxRef.value?.wrapperRef?.focus());
+
+    emit("open");
   }
 }
 
 function hideOptions() {
   isShownOptions.value = false;
+
+  emit("close");
 }
 
 function onClickOption(option: Option) {
   emit("clickOption", option);
 
-  hideOptions();
+  if (!props.multiple) hideOptions();
 }
 
 defineExpose({
@@ -235,6 +259,7 @@ const { config, getDataTest, wrapperAttrs, dropdownLinkAttrs, listboxAttrs, togg
       v-bind="listboxAttrs"
       :data-test="getDataTest('list')"
       @click-option="onClickOption"
+      @search-change="onSearchChange"
     />
   </div>
 </template>

package/utils/node/loaderIcon.js

@@ -295,7 +295,17 @@ async function copyIcon(name, library) {
     const require = createRequire(import.meta.url);
 
     fs.mkdirSync(path.dirname(destinationPath), { recursive: true });
-    await cp(require.resolve(sourcePath), destinationPath);
+
+    try {
+      await fs.promises.copyFile(require.resolve(sourcePath), destinationPath);
+    } catch (err) {
+      if (err.code === "EEXIST" || err.code === "EBUSY") {
+        // Another process/thread already copied or Windows locked temporarily
+        return;
+      }
+
+      throw err;
+    }
   }
 }
 

package/utils/node/webTypes.js

@@ -3,7 +3,7 @@ import { getVuelessConfig } from "./vuelessConfig.js";
 export async function buildWebTypes({ vuelessSrcDir, basePath } = {}) {
   try {
     const vuelessConfig = await getVuelessConfig(basePath);
-    const { default: build } = await import("@vueless/storybook/webTypes/index.js");
+    const { buildWebTypes: build } = await import("@vueless/storybook");
 
     await build(vuelessConfig, vuelessSrcDir);
   } catch (error) {

package/utils/storybook.ts

@@ -334,7 +334,7 @@ export function getSlotsFragment(defaultTemplate: string) {
 /**
  * Create story param config to show component description with a link on GitHub.
  */
-export function getDocsDescription(componentName: string | undefined) {
+export function getDocsDescription(componentName: string | undefined, afterText = "") {
   if (!componentName) {
     return {};
   }
@@ -342,7 +342,7 @@ export function getDocsDescription(componentName: string | undefined) {
   let viewOnGitHub = "";
 
   if (COMPONENTS[componentName as ComponentNames]) {
-    viewOnGitHub = `| <a href="https://github.com/vuelessjs/vueless/tree/main/src/${COMPONENTS[componentName as ComponentNames]}" target="_blank">View on GitHub</a>`;
+    viewOnGitHub = `| <a href="https://github.com/vuelessjs/vueless/tree/main/src/${COMPONENTS[componentName as ComponentNames]}" target="_blank">View on GitHub</a><br/>${afterText}`;
   }
 
   return {

package/utils/theme.ts

@@ -33,6 +33,8 @@ import {
   TEXT_DECREMENT,
   DISABLED_OPACITY,
   DEFAULT_DISABLED_OPACITY,
+  LETTER_SPACING,
+  DEFAULT_LETTER_SPACING,
 } from "../constants";
 
 import type {
@@ -52,6 +54,7 @@ declare interface RootCSSVariableOptions {
   text: ThemeConfigText;
   rounding: ThemeConfigRounding;
   outline: ThemeConfigOutline;
+  letterSpacing: number;
   disabledOpacity: number;
   lightTheme: Partial<VuelessCssVariables>;
   darkTheme: Partial<VuelessCssVariables>;
@@ -150,6 +153,7 @@ export function setTheme(config: ThemeConfig = {}, isCachedAutoMode?: boolean) {
   const text = getText(config.text);
   const outline = getOutlines(config.outline);
   const rounding = getRoundings(config.rounding);
+  const letterSpacing = getLetterSpacing(config.letterSpacing);
   const disabledOpacity = getDisabledOpacity(config.disabledOpacity);
 
   let primary = getPrimaryColor(config.primary);
@@ -215,6 +219,7 @@ export function setTheme(config: ThemeConfig = {}, isCachedAutoMode?: boolean) {
     text,
     outline,
     rounding,
+    letterSpacing,
     disabledOpacity,
     lightTheme,
     darkTheme,
@@ -443,6 +448,24 @@ function getRoundings(rounding?: ThemeConfig["rounding"]) {
   return mergedRounding;
 }
 
+/**
+ * Retrieve letter spacing value and save them to cookie and localStorage.
+ * @return number - letter spacing value.
+ */
+function getLetterSpacing(letterSpacing?: ThemeConfig["letterSpacing"]) {
+  const storageKey = `vl-${LETTER_SPACING}`;
+
+  const spacing = letterSpacing ?? getStored(storageKey) ?? vuelessConfig.letterSpacing;
+  const mergedSpacing = Number(spacing ?? DEFAULT_LETTER_SPACING);
+
+  if (isCSR && letterSpacing) {
+    setCookie(storageKey, String(mergedSpacing));
+    localStorage.setItem(storageKey, String(mergedSpacing));
+  }
+
+  return mergedSpacing;
+}
+
 /**
  * Retrieve disabled opacity value and save them to cookie and localStorage.
  * @return number - opacity value.
@@ -487,6 +510,7 @@ function setRootCSSVariables(vars: RootCSSVariableOptions) {
     "--vl-rounding-sm": `${vars.rounding.sm / PX_IN_REM}rem`,
     "--vl-rounding-md": `${vars.rounding.md / PX_IN_REM}rem`,
     "--vl-rounding-lg": `${vars.rounding.lg / PX_IN_REM}rem`,
+    "--vl-letter-spacing": `${vars.letterSpacing}em`,
     "--vl-disabled-opacity": `${vars.disabledOpacity}%`,
   };
 

package/utils/ui.ts

@@ -6,11 +6,10 @@ import { isCSR, isSSR } from "./helper";
 import { createGetMergedConfig } from "./node/mergeConfigs";
 import { COMPONENT_NAME as U_ICON } from "../ui.image-icon/constants";
 import {
-  JAVASCRIPT_EXT,
-  TYPESCRIPT_EXT,
+  VUELESS_CACHE_DIR,
+  ICON_NON_PROPS_DEFAULTS,
   VUELESS_CONFIG_FILE_NAME,
   TAILWIND_MERGE_EXTENSION,
-  ICON_NON_PROPS_DEFAULTS,
 } from "../constants";
 
 import type { Config, ComponentDefaults, UnknownObject, ComponentNames } from "../types";
@@ -51,14 +50,10 @@ if (isSSR) {
   (async () => {
     try {
       vuelessConfig = (
-        await import(/* @vite-ignore */ `/${VUELESS_CONFIG_FILE_NAME}${JAVASCRIPT_EXT}`)
+        await import(
+          /* @vite-ignore */ `${process.cwd()}/${VUELESS_CACHE_DIR}/${VUELESS_CONFIG_FILE_NAME}.mjs`
+        )
       ).default;
-
-      if (!vuelessConfig) {
-        vuelessConfig = (
-          await import(/* @vite-ignore */ `/${VUELESS_CONFIG_FILE_NAME}${TYPESCRIPT_EXT}`)
-        ).default;
-      }
     } catch {
       vuelessConfig = {} as Config;
     }

package/utils/node/storybook.d.ts

@@ -1 +0,0 @@
-export function defineConfigWithVueless(config: Object): Promise<Object>;

package/utils/node/storybook.js

@@ -1,86 +0,0 @@
-import { getVuelessConfig } from "./vuelessConfig.js";
-import {
-  COMPONENTS,
-  DIRECTIVES,
-  INTERNAL_ENV,
-  VUELESS_LOCAL_DIR,
-  VUELESS_PACKAGE_DIR,
-} from "../../constants.js";
-
-/**
- * Defines the config for Storybook.
- *
- * @param {Object} config - The config object.
- * @return {Promise<Object>} A promise that resolves to the modified config object.
- */
-export function defineConfigWithVueless(config) {
-  return (async () => ({
-    ...config,
-    stories: [...config.stories, ...(await getVuelessStoriesGlob(config?.vuelessEnv))],
-    addons: [
-      ...new Set([
-        ...(config.addons || []),
-        "@storybook/addon-docs",
-        "@storybook/addon-links",
-        "@vueless/storybook-dark-mode",
-        "@storybook/addon-themes",
-      ]),
-    ],
-    staticDirs: ["public"],
-    framework: {
-      ...config.framework,
-      name: "@storybook/vue3-vite",
-      options: {
-        ...config.framework?.options,
-        builder: {
-          ...config.framework?.options?.builder,
-          viteConfigPath: ".storybook/vite.config.js",
-        },
-      },
-    },
-    env: (envConfig) => ({
-      ...envConfig,
-      BASE_URL: "/",
-    }),
-  }))();
-}
-
-/**
- * Retrieves the glob pattern for Vueless stories based on the provided Vueless environment.
- *
- * @param {string} vuelessEnv - The Vueless environment.
- * @return {Promise<string[]>} A promise that resolves to an array of glob patterns for Vueless stories.
- */
-async function getVuelessStoriesGlob(vuelessEnv) {
-  const vuelessSrcDir = vuelessEnv === INTERNAL_ENV ? VUELESS_LOCAL_DIR : VUELESS_PACKAGE_DIR;
-  const vuelessConfig = await getVuelessConfig();
-  const storiesGlob = [];
-
-  for (const [directiveName, directiveDir] of Object.entries(DIRECTIVES)) {
-    const directiveGlobalConfig = vuelessConfig.directives?.[directiveName];
-    const isHiddenStoriesByDirective = directiveGlobalConfig === false;
-    const isHiddenStoriesByKey = directiveGlobalConfig?.storybook === false;
-
-    if (isHiddenStoriesByDirective || isHiddenStoriesByKey) {
-      continue;
-    }
-
-    storiesGlob.push(`../${vuelessSrcDir}/${directiveDir}/storybook/stories.{js,ts}`);
-    storiesGlob.push(`../${vuelessSrcDir}/${directiveDir}/storybook/docs.mdx`);
-  }
-
-  for (const [componentName, componentDir] of Object.entries(COMPONENTS)) {
-    const componentGlobalConfig = vuelessConfig.components?.[componentName];
-    const isHiddenStoriesByComponent = componentGlobalConfig === false;
-    const isHiddenStoriesByKey = componentGlobalConfig?.storybook === false;
-
-    if (isHiddenStoriesByComponent || isHiddenStoriesByKey) {
-      continue;
-    }
-
-    storiesGlob.push(`../${vuelessSrcDir}/${componentDir}/storybook/stories.{js,ts}`);
-    storiesGlob.push(`../${vuelessSrcDir}/${componentDir}/storybook/docs.mdx`);
-  }
-
-  return storiesGlob;
-}