@volverjs/ui-vue 0.0.11 → 0.0.13-beta.1

package/dist/index.es.js

@@ -1,219 +1 @@
-import { addCollection, addIcon, addAPIProvider } from "@iconify/vue";
-import { ref } from "vue";
-const SPLIT_LOWER_UPPER_RE = new RegExp("([\\p{Ll}\\d])(\\p{Lu})", "gu");
-const SPLIT_UPPER_UPPER_RE = new RegExp("(\\p{Lu})([\\p{Lu}][\\p{Ll}])", "gu");
-const SPLIT_SEPARATE_NUMBER_RE = new RegExp("(\\d)\\p{Ll}|(\\p{L})\\d", "u");
-const DEFAULT_STRIP_REGEXP = /[^\p{L}\d]+/giu;
-const SPLIT_REPLACE_VALUE = "$1\0$2";
-const DEFAULT_PREFIX_SUFFIX_CHARACTERS = "";
-function split(value) {
-  let result = value.trim();
-  result = result.replace(SPLIT_LOWER_UPPER_RE, SPLIT_REPLACE_VALUE).replace(SPLIT_UPPER_UPPER_RE, SPLIT_REPLACE_VALUE);
-  result = result.replace(DEFAULT_STRIP_REGEXP, "\0");
-  let start = 0;
-  let end = result.length;
-  while (result.charAt(start) === "\0")
-    start++;
-  if (start === end)
-    return [];
-  while (result.charAt(end - 1) === "\0")
-    end--;
-  return result.slice(start, end).split(/\0/g);
-}
-function splitSeparateNumbers(value) {
-  const words = split(value);
-  for (let i = 0; i < words.length; i++) {
-    const word = words[i];
-    const match = SPLIT_SEPARATE_NUMBER_RE.exec(word);
-    if (match) {
-      const offset = match.index + (match[1] ?? match[2]).length;
-      words.splice(i, 1, word.slice(0, offset), word.slice(offset));
-    }
-  }
-  return words;
-}
-function noCase(input, options) {
-  const [prefix, words, suffix] = splitPrefixSuffix(input, options);
-  return prefix + words.map(lowerFactory(options?.locale)).join(options?.delimiter ?? " ") + suffix;
-}
-function kebabCase(input, options) {
-  return noCase(input, { delimiter: "-", ...options });
-}
-function lowerFactory(locale) {
-  return locale === false ? (input) => input.toLowerCase() : (input) => input.toLocaleLowerCase(locale);
-}
-function splitPrefixSuffix(input, options = {}) {
-  const splitFn = options.split ?? (options.separateNumbers ? splitSeparateNumbers : split);
-  const prefixCharacters = options.prefixCharacters ?? DEFAULT_PREFIX_SUFFIX_CHARACTERS;
-  const suffixCharacters = options.suffixCharacters ?? DEFAULT_PREFIX_SUFFIX_CHARACTERS;
-  let prefixIndex = 0;
-  let suffixIndex = input.length;
-  while (prefixIndex < input.length) {
-    const char = input.charAt(prefixIndex);
-    if (!prefixCharacters.includes(char))
-      break;
-    prefixIndex++;
-  }
-  while (suffixIndex > prefixIndex) {
-    const index = suffixIndex - 1;
-    const char = input.charAt(index);
-    if (!suffixCharacters.includes(char))
-      break;
-    suffixIndex = index;
-  }
-  return [
-    input.slice(0, prefixIndex),
-    splitFn(input.slice(prefixIndex, suffixIndex)),
-    input.slice(suffixIndex)
-  ];
-}
-const DEFAULT_ICONIFY_PROVIDER = "vv";
-const INJECTION_KEY_VOLVER = Symbol.for("volver");
-function useDefaultProps(component, defaults, name) {
-  const componentName = name || component.name;
-  if (!componentName) {
-    return component;
-  }
-  const componentDefaults = defaults?.[componentName];
-  const props = component.props;
-  if (!componentDefaults || !props) {
-    return { ...component, name: componentName };
-  }
-  return {
-    ...component,
-    name: componentName,
-    props: Object.keys(props).reduce(
-      (acc, key) => {
-        if (!(key in componentDefaults)) {
-          acc[key] = props[key];
-          return acc;
-        }
-        const customDefault = componentDefaults[key];
-        if (typeof props[key] === "function" || Array.isArray(props[key])) {
-          acc[key] = {
-            type: props[key],
-            default: customDefault
-          };
-          return acc;
-        }
-        acc[key] = {
-          ...props[key],
-          default: customDefault
-        };
-        return acc;
-      },
-      {}
-    )
-  };
-}
-class Volver {
-  _fetchOptions = {};
-  _iconsCollections = [];
-  _iconsProvider = DEFAULT_ICONIFY_PROVIDER;
-  _nuxt = false;
-  _experimentalFeatures = {};
-  defaults = ref({});
-  constructor({
-    fetchWithCredentials,
-    fetchOptions,
-    iconsProvider,
-    nuxt,
-    iconsCollections,
-    defaults,
-    experimentalFeatures
-  } = {}) {
-    if (fetchOptions) {
-      this._fetchOptions = fetchOptions;
-    }
-    if (fetchWithCredentials) {
-      this._fetchOptions = {
-        ...this._fetchOptions,
-        credentials: "include"
-      };
-    }
-    if (iconsProvider) {
-      this._iconsProvider = iconsProvider;
-    }
-    if (nuxt) {
-      this._nuxt = nuxt;
-    }
-    if (iconsCollections && Array.isArray(iconsCollections)) {
-      iconsCollections.forEach((iconsCollection) => {
-        this.addCollection(iconsCollection, this._iconsProvider);
-      });
-    }
-    if (defaults) {
-      this.defaults.value = defaults;
-    }
-    if (experimentalFeatures) {
-      this._experimentalFeatures = experimentalFeatures;
-    }
-  }
-  get nuxt() {
-    return this._nuxt;
-  }
-  get iconsProvider() {
-    return this._iconsProvider;
-  }
-  get iconsCollections() {
-    return this._iconsCollections;
-  }
-  get experimentalFeatures() {
-    return this._experimentalFeatures;
-  }
-  addCollection(collection, providerName = this._iconsProvider) {
-    this._iconsCollections.push(collection);
-    return addCollection(collection, providerName);
-  }
-  addIcon(name, data) {
-    return addIcon(name, data);
-  }
-  addIconsAPIProvider(provider, customConfig) {
-    return addAPIProvider(provider, customConfig);
-  }
-  fetchIcon(src, options = { cache: "force-cache" }) {
-    return new Promise((resolve, reject) => {
-      fetch(src, { ...this._fetchOptions, ...options }).catch((e) => reject(e)).then((response) => response?.text()).then((svg) => resolve(svg));
-    });
-  }
-}
-const VolverPlugin = {
-  /**
-   * Vue.use() hook
-   * @param {App} app
-   * @param {object} options
-   */
-  install(app, options = {}) {
-    const volver = new Volver(options);
-    app.config.globalProperties.$vv = volver;
-    if (options.components) {
-      Object.entries(options.components).forEach(([name, component]) => {
-        app.component(
-          name,
-          useDefaultProps(component, options.defaults)
-        );
-      });
-    }
-    if (options.aliases) {
-      Object.entries(options.aliases).forEach(([name, component]) => {
-        app.component(
-          name,
-          useDefaultProps(component, options.defaults, name)
-        );
-      });
-    }
-    if (options.directives) {
-      Object.entries(options.directives).forEach(([name, directive]) => {
-        const kebabName = kebabCase(name);
-        if (kebabName.startsWith("v-")) {
-          name = kebabName.substring(2).toLocaleLowerCase();
-        }
-        app.directive(name, directive);
-      });
-    }
-    app.provide(INJECTION_KEY_VOLVER, volver);
-  }
-};
-export {
-  VolverPlugin
-};
+import{addCollection as e,addIcon as t,addAPIProvider as r}from"@iconify/vue";import{ref as n}from"vue";const i=new RegExp("([\\p{Ll}\\d])(\\p{Lu})","gu"),s=new RegExp("(\\p{Lu})([\\p{Lu}][\\p{Ll}])","gu"),o=new RegExp("(\\d)\\p{Ll}|(\\p{L})\\d","u"),c=/[^\p{L}\d]+/giu,l="$1\0$2";function a(e){let t=e.trim();t=t.replace(i,l).replace(s,l),t=t.replace(c,"\0");let r=0,n=t.length;for(;"\0"===t.charAt(r);)r++;if(r===n)return[];for(;"\0"===t.charAt(n-1);)n--;return t.slice(r,n).split(/\0/g)}function u(e){const t=a(e);for(let r=0;r<t.length;r++){const e=t[r],n=o.exec(e);if(n){const i=n.index+(n[1]??n[2]).length;t.splice(r,1,e.slice(0,i),e.slice(i))}}return t}function f(e,t){const[r,n,i]=function(e,t={}){const r=t.split??(t.separateNumbers?u:a),n=t.prefixCharacters??"",i=t.suffixCharacters??"";let s=0,o=e.length;for(;s<e.length;){const t=e.charAt(s);if(!n.includes(t))break;s++}for(;o>s;){const t=o-1,r=e.charAt(t);if(!i.includes(r))break;o=t}return[e.slice(0,s),r(e.slice(s,o)),e.slice(o)]}(e,t);return r+n.map((s=t?.locale,!1===s?e=>e.toLowerCase():e=>e.toLocaleLowerCase(s))).join(t?.delimiter??" ")+i;var s}const h=/* @__PURE__ */Symbol.for("volver");function p(e,t,r){const n=r||e.name;if(!n)return e;const i=t?.[n],s=e.props;return i&&s?{...e,name:n,props:Object.keys(s).reduce((e,t)=>{if(!(t in i))return e[t]=s[t],e;const r=i[t];return"function"==typeof s[t]||Array.isArray(s[t])?(e[t]={type:s[t],default:r},e):(e[t]={...s[t],default:r},e)},{})}:{...e,name:n}}class d{_fetchOptions={};_iconsCollections=[];_iconsProvider="vv";_nuxt=!1;_experimentalFeatures={};defaults=n({});constructor({fetchWithCredentials:e,fetchOptions:t,iconsProvider:r,nuxt:n,iconsCollections:i,defaults:s,experimentalFeatures:o}={}){t&&(this._fetchOptions=t),e&&(this._fetchOptions={...this._fetchOptions,credentials:"include"}),r&&(this._iconsProvider=r),n&&(this._nuxt=n),i&&Array.isArray(i)&&i.forEach(e=>{this.addCollection(e,this._iconsProvider)}),s&&(this.defaults.value=s),o&&(this._experimentalFeatures=o)}get nuxt(){return this._nuxt}get iconsProvider(){return this._iconsProvider}get iconsCollections(){return this._iconsCollections}get experimentalFeatures(){return this._experimentalFeatures}addCollection(t,r=this._iconsProvider){return this._iconsCollections.push(t),e(t,r)}addIcon(e,r){return t(e,r)}addIconsAPIProvider(e,t){return r(e,t)}fetchIcon(e,t={cache:"force-cache"}){return new Promise((r,n)=>{fetch(e,{...this._fetchOptions,...t}).catch(e=>n(e)).then(e=>e?.text()).then(e=>r(e))})}}const m={install(e,t={}){const r=new d(t);e.config.globalProperties.$vv=r,t.components&&Object.entries(t.components).forEach(([r,n])=>{e.component(r,p(n,t.defaults))}),t.aliases&&Object.entries(t.aliases).forEach(([r,n])=>{e.component(r,p(n,t.defaults,r))}),t.directives&&Object.entries(t.directives).forEach(([t,r])=>{const n=function(e,t){return f(e,{delimiter:"-",...t})}(t);n.startsWith("v-")&&(t=n.substring(2).toLocaleLowerCase()),e.directive(t,r)}),e.provide(h,r)}};export{m as VolverPlugin};

package/dist/props/index.d.ts

@@ -943,10 +943,17 @@ export declare const NavProps: {
     };
 };
 export declare const StorageProps: {
+    /**
+     * Storage type
+     * @default StorageType.local
+     */
     storageType: {
         type: PropType<`${StorageType}`>;
         default: StorageType;
         validator: (value: StorageType) => boolean;
     };
+    /**
+     * Storage key
+     */
     storageKey: StringConstructor;
 };

package/dist/resolvers/unplugin.es.js

@@ -1,187 +1 @@
-const SPLIT_LOWER_UPPER_RE = new RegExp("([\\p{Ll}\\d])(\\p{Lu})", "gu");
-const SPLIT_UPPER_UPPER_RE = new RegExp("(\\p{Lu})([\\p{Lu}][\\p{Ll}])", "gu");
-const SPLIT_SEPARATE_NUMBER_RE = new RegExp("(\\d)\\p{Ll}|(\\p{L})\\d", "u");
-const DEFAULT_STRIP_REGEXP = /[^\p{L}\d]+/giu;
-const SPLIT_REPLACE_VALUE = "$1\0$2";
-const DEFAULT_PREFIX_SUFFIX_CHARACTERS = "";
-function split(value) {
-  let result = value.trim();
-  result = result.replace(SPLIT_LOWER_UPPER_RE, SPLIT_REPLACE_VALUE).replace(SPLIT_UPPER_UPPER_RE, SPLIT_REPLACE_VALUE);
-  result = result.replace(DEFAULT_STRIP_REGEXP, "\0");
-  let start = 0;
-  let end = result.length;
-  while (result.charAt(start) === "\0")
-    start++;
-  if (start === end)
-    return [];
-  while (result.charAt(end - 1) === "\0")
-    end--;
-  return result.slice(start, end).split(/\0/g);
-}
-function splitSeparateNumbers(value) {
-  const words = split(value);
-  for (let i = 0; i < words.length; i++) {
-    const word = words[i];
-    const match = SPLIT_SEPARATE_NUMBER_RE.exec(word);
-    if (match) {
-      const offset = match.index + (match[1] ?? match[2]).length;
-      words.splice(i, 1, word.slice(0, offset), word.slice(offset));
-    }
-  }
-  return words;
-}
-function noCase(input, options) {
-  const [prefix, words, suffix] = splitPrefixSuffix(input, options);
-  return prefix + words.map(lowerFactory(options?.locale)).join(options?.delimiter ?? " ") + suffix;
-}
-function kebabCase(input, options) {
-  return noCase(input, { delimiter: "-", ...options });
-}
-function lowerFactory(locale) {
-  return locale === false ? (input) => input.toLowerCase() : (input) => input.toLocaleLowerCase(locale);
-}
-function splitPrefixSuffix(input, options = {}) {
-  const splitFn = options.split ?? (options.separateNumbers ? splitSeparateNumbers : split);
-  const prefixCharacters = options.prefixCharacters ?? DEFAULT_PREFIX_SUFFIX_CHARACTERS;
-  const suffixCharacters = options.suffixCharacters ?? DEFAULT_PREFIX_SUFFIX_CHARACTERS;
-  let prefixIndex = 0;
-  let suffixIndex = input.length;
-  while (prefixIndex < input.length) {
-    const char = input.charAt(prefixIndex);
-    if (!prefixCharacters.includes(char))
-      break;
-    prefixIndex++;
-  }
-  while (suffixIndex > prefixIndex) {
-    const index = suffixIndex - 1;
-    const char = input.charAt(index);
-    if (!suffixCharacters.includes(char))
-      break;
-    suffixIndex = index;
-  }
-  return [
-    input.slice(0, prefixIndex),
-    splitFn(input.slice(prefixIndex, suffixIndex)),
-    input.slice(suffixIndex)
-  ];
-}
-const STYLE_EXCLUDE = ["vv-icon", "vv-action"];
-const VOLVER_PREFIX = "vv";
-const DIRECTIVES = ["v-tooltip", "v-contextmenu"];
-function getStyleNames(kebabName) {
-  if (STYLE_EXCLUDE.includes(kebabName)) {
-    return void 0;
-  }
-  if (kebabName === "vv-dropdown") {
-    return ["vv-dropdown", "vv-dropdown-option", "vv-dropdown-action"];
-  }
-  if (kebabName === "vv-combobox") {
-    return [
-      "vv-select",
-      "vv-dropdown-option",
-      "vv-dropdown-optgroup",
-      "vv-dropdown",
-      "vv-dropdown-action"
-    ];
-  }
-  if (kebabName === "vv-button-group") {
-    return ["vv-button", "vv-button-group"];
-  }
-  if (kebabName === "vv-accordion-group") {
-    return ["vv-accordion", "vv-accordion-group"];
-  }
-  if (kebabName === "vv-checkbox-group") {
-    return ["vv-checkbox", "vv-checkbox-group"];
-  }
-  if (kebabName === "vv-radio-group") {
-    return ["vv-radio", "vv-radio-group"];
-  }
-  if (kebabName === "vv-alert-group") {
-    return ["vv-alert", "vv-alert-group"];
-  }
-  if (kebabName === "v-tooltip") {
-    return ["vv-tooltip"];
-  }
-  return [kebabName];
-}
-function getSideEffects(kebabName, importStyle) {
-  const sideEffects = [];
-  if (!importStyle) {
-    return sideEffects;
-  }
-  const styleNames = getStyleNames(kebabName);
-  if (styleNames) {
-    styleNames.forEach((name) => {
-      sideEffects.push(
-        `@volverjs/style/${importStyle === "scss" ? "scss/" : ""}components/${name}`
-      );
-    });
-  }
-  return sideEffects;
-}
-function VolverResolver({
-  prefix = VOLVER_PREFIX,
-  importStyle,
-  directives,
-  ignore,
-  cherryPick
-} = {}) {
-  return [
-    {
-      type: "component",
-      resolve: (name) => {
-        if (!prefix || !name.toLowerCase().startsWith(prefix.toLowerCase())) {
-          return;
-        }
-        const kebabName = kebabCase(name).replace(
-          `${prefix}-`,
-          `${VOLVER_PREFIX}-`
-        );
-        if (ignore && ignore.includes(kebabName)) {
-          return;
-        }
-        if (cherryPick) {
-          return {
-            from: `@volverjs/ui-vue/${kebabName}`,
-            sideEffects: getSideEffects(kebabName, importStyle)
-          };
-        }
-        return {
-          from: "@volverjs/ui-vue/components",
-          sideEffects: getSideEffects(kebabName, importStyle),
-          name
-        };
-      }
-    },
-    {
-      type: "directive",
-      resolve: (name) => {
-        if (!directives) {
-          return;
-        }
-        const kebabName = `v-${kebabCase(name)}`;
-        if (!DIRECTIVES.includes(kebabName)) {
-          return;
-        }
-        if (ignore && ignore.includes(kebabName)) {
-          return;
-        }
-        if (cherryPick) {
-          return {
-            from: `@volverjs/ui-vue/${kebabName}`,
-            sideEffects: getSideEffects(kebabName, importStyle)
-          };
-        }
-        return {
-          from: "@volverjs/ui-vue/directives",
-          sideEffects: getSideEffects(kebabName, importStyle),
-          name: `v${name}`
-        };
-      }
-    }
-  ];
-}
-export {
-  VolverResolver,
-  getStyleNames
-};
+const e=new RegExp("([\\p{Ll}\\d])(\\p{Lu})","gu"),o=new RegExp("(\\p{Lu})([\\p{Lu}][\\p{Ll}])","gu"),r=new RegExp("(\\d)\\p{Ll}|(\\p{L})\\d","u"),t=/[^\p{L}\d]+/giu,n="$1\0$2";function v(r){let v=r.trim();v=v.replace(e,n).replace(o,n),v=v.replace(t,"\0");let c=0,i=v.length;for(;"\0"===v.charAt(c);)c++;if(c===i)return[];for(;"\0"===v.charAt(i-1);)i--;return v.slice(c,i).split(/\0/g)}function c(e){const o=v(e);for(let t=0;t<o.length;t++){const e=o[t],n=r.exec(e);if(n){const r=n.index+(n[1]??n[2]).length;o.splice(t,1,e.slice(0,r),e.slice(r))}}return o}function i(e,o){const[r,t,n]=function(e,o={}){const r=o.split??(o.separateNumbers?c:v),t=o.prefixCharacters??"",n=o.suffixCharacters??"";let i=0,s=e.length;for(;i<e.length;){const o=e.charAt(i);if(!t.includes(o))break;i++}for(;s>i;){const o=s-1,r=e.charAt(o);if(!n.includes(r))break;s=o}return[e.slice(0,i),r(e.slice(i,s)),e.slice(s)]}(e,o);return r+t.map((i=o?.locale,!1===i?e=>e.toLowerCase():e=>e.toLocaleLowerCase(i))).join(o?.delimiter??" ")+n;var i}function s(e,o){return i(e,{delimiter:"-",...o})}const u=["vv-icon","vv-action"],p=["v-tooltip","v-contextmenu"];function l(e){if(!u.includes(e))return"vv-dropdown"===e?["vv-dropdown","vv-dropdown-option","vv-dropdown-action"]:"vv-combobox"===e?["vv-select","vv-dropdown-option","vv-dropdown-optgroup","vv-dropdown","vv-dropdown-action"]:"vv-button-group"===e?["vv-button","vv-button-group"]:"vv-accordion-group"===e?["vv-accordion","vv-accordion-group"]:"vv-checkbox-group"===e?["vv-checkbox","vv-checkbox-group"]:"vv-radio-group"===e?["vv-radio","vv-radio-group"]:"vv-alert-group"===e?["vv-alert","vv-alert-group"]:"v-tooltip"===e?["vv-tooltip"]:[e]}function d(e,o){const r=[];if(!o)return r;const t=l(e);return t&&t.forEach(e=>{r.push(`@volverjs/style/${"scss"===o?"scss/":""}components/${e}`)}),r}function a({prefix:e="vv",importStyle:o,directives:r,ignore:t,cherryPick:n}={}){return[{type:"component",resolve:r=>{if(!e||!r.toLowerCase().startsWith(e.toLowerCase()))return;const v=s(r).replace(`${e}-`,"vv-");return t&&t.includes(v)?void 0:n?{from:`@volverjs/ui-vue/${v}`,sideEffects:d(v,o)}:{from:"@volverjs/ui-vue/components",sideEffects:d(v,o),name:r}}},{type:"directive",resolve:e=>{if(!r)return;const v=`v-${s(e)}`;return!p.includes(v)||t&&t.includes(v)?void 0:n?{from:`@volverjs/ui-vue/${v}`,sideEffects:d(v,o)}:{from:"@volverjs/ui-vue/directives",sideEffects:d(v,o),name:`v${e}`}}}]}export{a as VolverResolver,l as getStyleNames};

package/dist/stories/AccordionGroup/AccordionGroupSlots.stories.d.ts

@@ -196,10 +196,10 @@ declare const _default: {
         itemModifiers?: string | string[] | undefined;
         storageType?: "local" | "session" | undefined;
         style?: unknown;
-        ref?: import("vue").VNodeRef | undefined;
         class?: unknown;
         readonly storageKey?: string | undefined;
         key?: PropertyKey | undefined;
+        ref?: import("vue").VNodeRef | undefined;
         ref_for?: boolean | undefined;
         ref_key?: string | undefined;
         onVnodeBeforeMount?: (((vnode: VNode) => void) | ((vnode: VNode) => void)[]) | undefined;
@@ -223,10 +223,10 @@ declare const _default: {
         itemModifiers?: string | string[] | undefined;
         storageType?: "local" | "session" | undefined;
         style?: unknown;
-        ref?: import("vue").VNodeRef | undefined;
         class?: unknown;
         readonly storageKey?: string | undefined;
         key?: PropertyKey | undefined;
+        ref?: import("vue").VNodeRef | undefined;
         ref_for?: boolean | undefined;
         ref_key?: string | undefined;
         onVnodeBeforeMount?: (((vnode: VNode) => void) | ((vnode: VNode) => void)[]) | undefined;

package/dist/stories/Avatar/Avatar.settings.d.ts

@@ -1,5 +1,5 @@
 import type { ArgTypes } from 'storybook/internal/types';
 export declare const defaultArgs: {
-    imgSrc: string;
+    [x: string]: unknown;
 };
 export declare const argTypes: ArgTypes;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@volverjs/ui-vue",
   "type": "module",
-  "version": "0.0.11",
+  "version": "0.0.13-beta.1",
   "description": "@volverjs/ui-vue is a lightweight Vue 3 component library to accompany @volverjs/style.",
   "author": "8 wave S.r.l.",
   "license": "MIT",
@@ -377,18 +377,18 @@
   ],
   "peerDependencies": {
     "@volverjs/style": "0.x",
-    "@vueuse/core": "^13.x",
+    "@vueuse/core": "^14.x",
     "vue": "^3.5.x"
   },
   "dependencies": {
     "@floating-ui/vue": "^1.1.9",
-    "@iconify/tools": "^4.1.4",
+    "@iconify/tools": "^5.0.2",
     "@iconify/vue": "^5.0.0",
     "blurhash": "^2.0.5",
-    "chokidar": "^4.0.3",
+    "chokidar": "^5.0.0",
     "comlink": "^4.4.2",
-    "dot-prop": "^10.0.0",
-    "jsdom": "^27.0.0",
+    "dot-prop": "^10.1.0",
+    "jsdom": "^27.4.0",
     "mitt": "^3.0.1",
     "pica": "^9.0.1",
     "vue-imask": "^7.6.1",
@@ -396,53 +396,60 @@
     "yargs": "^18.0.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "5.4.1",
-    "@babel/core": "^7.28.4",
-    "@babel/preset-env": "^7.28.3",
-    "@babel/preset-typescript": "^7.27.1",
+    "@antfu/eslint-config": "6.7.3",
+    "@babel/core": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
     "@iconify/types": "^2.0.0",
-    "@iconify/utils": "^3.0.2",
+    "@iconify/utils": "^3.1.0",
     "@nabla/vite-plugin-eslint": "^2.0.6",
-    "@storybook/addon-a11y": "^9.1.10",
-    "@storybook/addon-docs": "^9.1.10",
-    "@storybook/addon-links": "^9.1.10",
-    "@storybook/cli": "^9.1.10",
-    "@storybook/test-runner": "^0.23.0",
-    "@storybook/vue3-vite": "^9.1.10",
-    "@tsconfig/node18": "^18.2.4",
+    "@storybook/addon-a11y": "^10.1.11",
+    "@storybook/addon-docs": "^10.1.11",
+    "@storybook/addon-links": "^10.1.11",
+    "@storybook/addon-themes": "^10.1.11",
+    "@storybook/addon-vitest": "^10.1.11",
+    "@storybook/cli": "^10.1.11",
+    "@storybook/vue3-vite": "^10.1.11",
+    "@tsconfig/node18": "^18.2.6",
     "@types/jest-axe": "^3.5.9",
     "@types/jsdom": "^27.0.0",
-    "@types/node": "^24.6.2",
+    "@types/node": "^25.0.3",
     "@types/pica": "^9.0.5",
-    "@types/yargs": "^17.0.33",
-    "@vitejs/plugin-vue": "^6.0.1",
-    "@volverjs/style": "^0.1.22",
-    "@vue/compiler-sfc": "^3.5.22",
+    "@types/yargs": "^17.0.35",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "@vitest/browser": "^4.0.16",
+    "@vitest/browser-playwright": "^4.0.16",
+    "@volverjs/style": "^0.1.23",
+    "@vue/compiler-sfc": "^3.5.26",
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.8.1",
-    "@vueless/storybook-dark-mode": "^9.0.9",
-    "@vueuse/core": "^13.9.0",
+    "@vueless/storybook-dark-mode": "^10.0.4",
+    "@vueuse/core": "^14.1.0",
     "change-case": "^5.4.4",
-    "eslint": "^9.36.0",
-    "glob": "^11.0.3",
+    "eslint": "^9.39.2",
+    "glob": "^13.0.0",
     "jest-axe": "^10.0.0",
-    "jsdom": "^27.0.0",
+    "jsdom": "^27.4.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.6.2",
+    "playwright": "^1.57.0",
+    "prettier": "^3.7.4",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "remark": "^15.0.1",
-    "sass-embedded": "1.93.2",
-    "storybook": "^9.1.10",
+    "sass-embedded": "1.97.2",
+    "storybook": "^10.1.11",
     "storybook-addon-markdown-docs": "^2.0.0",
-    "terser": "^5.44.0",
+    "terser": "^5.44.1",
     "ts-node": "^10.9.2",
     "typescript": "~5.9.3",
-    "unplugin-auto-import": "^20.2.0",
-    "unplugin-vue-components": "^29.1.0",
-    "vite": "^7.1.8",
-    "vite-plugin-externalize-deps": "^0.9.0",
-    "vue": "^3.5.22",
-    "vue-tsc": "^3.1.0"
+    "unplugin-auto-import": "^20.3.0",
+    "unplugin-vue-components": "^30.0.0",
+    "vite": "^7.3.1",
+    "vite-plugin-externalize-deps": "^0.10.0",
+    "vitest": "^4.0.16",
+    "vue": "^3.5.26",
+    "vue-tsc": "^3.2.2"
   },
   "scripts": {
     "dev": "storybook dev -p 6006",
@@ -454,8 +461,8 @@
     "lint:fix": "eslint . --fix",
     "generate-icons": "node --loader ts-node/esm ./scripts/icons.ts --srcPath=src/assets/icons",
     "generate-tsd": "vue-tsc --declaration --emitDeclarationOnly",
-    "test-local": "test-storybook --stories-json",
-    "test-remote": "test-storybook --stories-json --url https://volver-ui-vue.vercel.app",
+    "test-storybook": "vitest --run",
+    "test-storybook:watch": "vitest",
     "credits": "npx @opengovsg/credits-generator"
   }
 }