@quidgest/ui 0.16.31 → 0.16.33

package/esm/components/QSelect/index.d.ts

@@ -16,6 +16,8 @@ declare const QSelect: {
         groups?: import('../QList/types').Group[];
         clearable?: boolean;
         inline?: boolean;
+        multiple?: boolean;
+        badges?: boolean;
         loading?: boolean;
         emptyValue?: any;
         itemValue?: string;
@@ -42,7 +44,7 @@ declare const QSelect: {
         itemValue: string;
         itemLabel: string;
     }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
-        triggerEl: ({
+        trigger: ({
             $: import('vue').ComponentInternalInstance;
             $data: {};
             $props: {
@@ -111,8 +113,81 @@ declare const QSelect: {
                 extras?(_: {}): any;
             };
         }) | null;
-        contentRef: HTMLDivElement;
-        listRef: ({
+        badgesContainer: HTMLSpanElement;
+        allBadges: (({
+            $: import('vue').ComponentInternalInstance;
+            $data: {};
+            $props: {
+                readonly id?: string | undefined;
+                readonly class?: string | unknown[] | undefined;
+                readonly variant?: import('../QBadge/types').QBadgeVariant | undefined;
+                readonly color?: string | undefined;
+                readonly pill?: boolean | undefined;
+                readonly size?: import('../QBadge/types').QBadgeSize | undefined;
+                readonly removable?: boolean | undefined;
+                readonly icons?: typeof import('../QBadge/types').DEFAULT_ICONS | undefined;
+                readonly texts?: typeof import('../QBadge/types').DEFAULT_TEXTS | undefined;
+                readonly "onClick:remove"?: (() => any) | undefined;
+            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+            $attrs: {
+                [x: string]: unknown;
+            };
+            $refs: {
+                [x: string]: unknown;
+            };
+            $slots: Readonly<{
+                [name: string]: import('vue').Slot<any> | undefined;
+            }>;
+            $root: import('vue').ComponentPublicInstance | null;
+            $parent: import('vue').ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: (event: "click:remove") => void;
+            $el: HTMLSpanElement;
+            $options: import('vue').ComponentOptionsBase<Readonly<import('../QBadge/types').QBadgeProps> & Readonly<{
+                "onClick:remove"?: (() => any) | undefined;
+            }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+                "click:remove": () => any;
+            }, string, {
+                size: import('../QBadge/types').QBadgeSize;
+                color: string;
+                variant: import('../QBadge/types').QBadgeVariant;
+                icons: typeof import('../QBadge/types').DEFAULT_ICONS;
+                texts: typeof import('../QBadge/types').DEFAULT_TEXTS;
+            }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof import('vue').nextTick;
+            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+        } & Readonly<{
+            size: import('../QBadge/types').QBadgeSize;
+            color: string;
+            variant: import('../QBadge/types').QBadgeVariant;
+            icons: typeof import('../QBadge/types').DEFAULT_ICONS;
+            texts: typeof import('../QBadge/types').DEFAULT_TEXTS;
+        }> & Omit<Readonly<import('../QBadge/types').QBadgeProps> & Readonly<{
+            "onClick:remove"?: (() => any) | undefined;
+        }>, "size" | "color" | "variant" | "icons" | "texts"> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
+            $slots: {
+                default?(_: {}): any;
+            };
+        }) | null)[];
+        content: HTMLDivElement;
+        list: ({
             $: import('vue').ComponentInternalInstance;
             $data: {};
             $props: {
@@ -312,6 +387,8 @@ declare const QSelect: {
         groups?: import('../QList/types').Group[];
         clearable?: boolean;
         inline?: boolean;
+        multiple?: boolean;
+        badges?: boolean;
         loading?: boolean;
         emptyValue?: any;
         itemValue?: string;
@@ -351,6 +428,8 @@ declare const QSelect: {
     groups?: import('../QList/types').Group[];
     clearable?: boolean;
     inline?: boolean;
+    multiple?: boolean;
+    badges?: boolean;
     loading?: boolean;
     emptyValue?: any;
     itemValue?: string;

package/esm/components/QSelect/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/QSelect/index.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAIuwzB,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gDAAtH,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAAtH,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAJj2zB,CAAA;AAGzC,OAAO,EAAE,OAAO,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/QSelect/index.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAIuwzB,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAAtH,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gDAAtH,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAAtH,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAJj2zB,CAAA;AAGzC,OAAO,EAAE,OAAO,EAAE,CAAA"}

package/esm/components/QSelect/types.d.ts

@@ -25,6 +25,18 @@ export type QSelectProps = QFieldProps & {
      * @category Behavior
      */
     inline?: boolean;
+    /**
+     * Whether multiple options can be selected.
+     *
+     * @category Behavior
+     */
+    multiple?: boolean;
+    /**
+     * Whether to display the selected option(s) as badge(s).
+     *
+     * @category Presentation
+     */
+    badges?: boolean;
     /**
      * Whether the items of the list are being loaded.
      *

package/esm/components/QSelect/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/QSelect/types.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAE5C,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAA;AAEjD,MAAM,MAAM,YAAY,GAAG,WAAW,GAAG;IACxC;;;;OAIG;IACH,KAAK,CAAC,EAAE,IAAI,EAAE,CAAA;IAEd;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,EAAE,CAAA;IAEhB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;;;OAKG;IAEH,UAAU,CAAC,EAAE,GAAG,CAAA;IAEhB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,aAAa,CAAA;IAE5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,aAAa,CAAA;CAC5B,CAAA;AAGD,eAAO,MAAM,aAAa;;;;CAIQ,CAAA;AAGlC,eAAO,MAAM,aAAa;;;;;;;CAGM,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/QSelect/types.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAE5C,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAA;AAEjD,MAAM,MAAM,YAAY,GAAG,WAAW,GAAG;IACxC;;;;OAIG;IACH,KAAK,CAAC,EAAE,IAAI,EAAE,CAAA;IAEd;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,EAAE,CAAA;IAEhB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;;;OAKG;IAEH,UAAU,CAAC,EAAE,GAAG,CAAA;IAEhB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,aAAa,CAAA;IAE5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,aAAa,CAAA;CAC5B,CAAA;AAGD,eAAO,MAAM,aAAa;;;;CAIQ,CAAA;AAGlC,eAAO,MAAM,aAAa;;;;;;;CAGM,CAAA"}

package/esm/composables/theme.d.ts

@@ -43,7 +43,7 @@ export type ThemeInstance = {
     /** A computed reference to the current theme definition. */
     readonly current: DeepReadonly<ComputedRef<ThemeDefinition>>;
     /** An array of available theme definitions. */
-    readonly themes: DeepReadonly<ThemeDefinition[]>;
+    readonly themes: DeepReadonly<Ref<ThemeDefinition[]>>;
     /** The theme class name. */
     readonly class: ComputedRef<string>;
     /** The theme CSS definition. */
@@ -56,23 +56,22 @@ export type ThemeInstance = {
  */
 export declare function useTheme(): ThemeInstance;
 /**
- * Provides and manages a reactive theme instance within the Vue dependency injection system.
+ * Provides and manages a reactive theme instance within Vue’s dependency injection system.
  *
- * This function retrieves the current list of available themes from the theme context,
- * optionally adds a new `ThemeDefinition`, and creates a reactive theme instance.
- * The new theme instance is then provided using Vue's `provide`, making it accessible
- * to all descendant components via `inject`.
+ * This function:
+ *  - Retrieves the current list of available themes from the existing theme context.
+ *  - Resolves the input (`nameOrDef`) to either a theme name or a full `ThemeDefinition`.
+ *  - If a `ThemeDefinition` is provided, it is appended to the existing list of themes.
+ *  - Creates a new reactive `ThemeInstance` bound to the resolved name and theme list.
+ *  - Provides the new `ThemeInstance` under `ThemeSymbol`, making it available to descendants via `useTheme()`.
  *
- * @param nameOrDef - Either:
- *   - A string (or `Ref<string>`/getter) specifying the name of the theme to activate.
- *   - A `ThemeDefinition` (or `Ref<ThemeDefinition>`/getter) to register and activate.
+ * @param nameOrDef - The theme to activate, given as either:
+ *   - A theme name (`string`), or a reactive source (`Ref<string>`/getter).
+ *   - A `ThemeDefinition`, or a reactive source (`Ref<ThemeDefinition>`/getter).
  *
- * @returns The newly created and provided `ThemeInstance`, containing:
- *   - `name`: reactive theme name (`Ref<string>`),
- *   - `current`: computed active theme (`Ref<ThemeDefinition>`),
- *   - `themes`: array of all available themes,
- *   - `class`: computed CSS class string for the theme,
- *   - `css`: computed CSS variables string for the theme.
+ * @returns The newly created and provided `ThemeInstance`.
+ *
+ * @throws {Error} If the resolved theme name does not exist in the available themes.
  */
 export declare function provideTheme(nameOrDef: MaybeRefOrGetter<string | ThemeDefinition>): ThemeInstance;
 //# sourceMappingURL=theme.d.ts.map

package/esm/composables/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/composables/theme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AACzF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAMjD,eAAO,MAAM,WAAW,EAAE,YAAY,CAAC,aAAa,CAAyB,CAAA;AAE7E;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AAExC;;;GAGG;AACH,MAAM,MAAM,SAAS,GAAG;IACvB,6DAA6D;IAC7D,YAAY,EAAE,MAAM,CAAA;IAEpB,mEAAmE;IACnE,MAAM,EAAE,KAAK,CAAC;QACb,6BAA6B;QAC7B,IAAI,EAAE,MAAM,CAAA;QAEZ,mDAAmD;QACnD,IAAI,EAAE,SAAS,CAAA;QAEf,qEAAqE;QACrE,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;KAC7B,CAAC,CAAA;CACF,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC7B,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAA;IAEZ,mDAAmD;IACnD,IAAI,EAAE,SAAS,CAAA;IAEf,kDAAkD;IAClD,MAAM,EAAE,WAAW,CAAA;CACnB,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG;IAC3B,yDAAyD;IACzD,QAAQ,CAAC,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAE1B,4DAA4D;IAC5D,QAAQ,CAAC,OAAO,EAAE,YAAY,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,CAAA;IAE5D,+CAA+C;IAC/C,QAAQ,CAAC,MAAM,EAAE,YAAY,CAAC,eAAe,EAAE,CAAC,CAAA;IAEhD,4BAA4B;IAC5B,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAEnC,gCAAgC;IAChC,QAAQ,CAAC,GAAG,EAAE,WAAW,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;CAC7C,CAAA;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,IAAI,aAAa,CAQxC;AAED;;;;;;;;;;;;;;;;;;GAkBG;AAEH,wBAAgB,YAAY,CAAC,SAAS,EAAE,gBAAgB,CAAC,MAAM,GAAG,eAAe,CAAC,GAAG,aAAa,CAsBjG"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/composables/theme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AACzF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAMjD,eAAO,MAAM,WAAW,EAAE,YAAY,CAAC,aAAa,CAAyB,CAAA;AAE7E;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AAExC;;;GAGG;AACH,MAAM,MAAM,SAAS,GAAG;IACvB,6DAA6D;IAC7D,YAAY,EAAE,MAAM,CAAA;IAEpB,mEAAmE;IACnE,MAAM,EAAE,KAAK,CAAC;QACb,6BAA6B;QAC7B,IAAI,EAAE,MAAM,CAAA;QAEZ,mDAAmD;QACnD,IAAI,EAAE,SAAS,CAAA;QAEf,qEAAqE;QACrE,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;KAC7B,CAAC,CAAA;CACF,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC7B,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAA;IAEZ,mDAAmD;IACnD,IAAI,EAAE,SAAS,CAAA;IAEf,kDAAkD;IAClD,MAAM,EAAE,WAAW,CAAA;CACnB,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG;IAC3B,yDAAyD;IACzD,QAAQ,CAAC,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAE1B,4DAA4D;IAC5D,QAAQ,CAAC,OAAO,EAAE,YAAY,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,CAAA;IAE5D,+CAA+C;IAC/C,QAAQ,CAAC,MAAM,EAAE,YAAY,CAAC,GAAG,CAAC,eAAe,EAAE,CAAC,CAAC,CAAA;IAErD,4BAA4B;IAC5B,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAEnC,gCAAgC;IAChC,QAAQ,CAAC,GAAG,EAAE,WAAW,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;CAC7C,CAAA;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,IAAI,aAAa,CAQxC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,YAAY,CAAC,SAAS,EAAE,gBAAgB,CAAC,MAAM,GAAG,eAAe,CAAC,GAAG,aAAa,CA2CjG"}

package/esm/composables/theme.js

@@ -1,22 +1,22 @@
-import { toValue as c, provide as i, inject as h } from "vue";
-import { createThemeInstance as u } from "../utils/theme.js";
+import { computed as n, toValue as c, provide as a, inject as l } from "vue";
+import { createThemeInstance as h } from "../utils/theme.js";
 const m = Symbol.for("q-theme");
-function f() {
-  const e = h(m);
+function v() {
+  const e = l(m);
   if (!e)
     throw new Error("[Quidgest UI] Could not find theme instance");
   return e;
 }
-function d(e) {
-  const s = f();
-  let n, o = structuredClone(s.themes);
-  const t = c(e);
-  typeof t != "string" ? (o = [...o, t], n = t.name) : n = t;
-  const r = u(n, o);
-  return i(m, r), r;
+function p(e) {
+  const { themes: o } = v(), t = n(() => c(e)), s = n(() => typeof t.value != "string"), r = n(
+    () => s.value ? t.value.name : t.value
+  ), u = n(
+    () => s.value ? [...o.value, t.value] : o.value
+  ), i = h(r, u);
+  return a(m, i), i;
 }
 export {
   m as ThemeSymbol,
-  d as provideTheme,
-  f as useTheme
+  p as provideTheme,
+  v as useTheme
 };

package/esm/framework.js

@@ -1,21 +1,21 @@
-import { DEFAULTS_SYMBOL as i } from "./composables/defaults.js";
+import { DEFAULTS_SYMBOL as c } from "./composables/defaults.js";
 import { ThemeSymbol as h } from "./composables/theme.js";
 import { DismissibleLayerKey as f } from "./symbols/dismissibleLayer.js";
 import { ToastSymbol as d } from "./composables/useToast/types.js";
 import { useDismissibleLayerStack as u } from "./composables/useDismissibleLayerStack/index.js";
 import { createToastInstance as p } from "./composables/useToast/index.js";
-import { defaultLightColorScheme as r, defaultDarkColorScheme as l } from "./templates/theme.js";
-import { ref as c, watch as S } from "vue";
+import { defaultLightColorScheme as l, defaultDarkColorScheme as i } from "./templates/theme.js";
+import { ref as n, watch as S } from "vue";
 import { createThemeInstance as T, generateRootStyle as L } from "./utils/theme.js";
 function N(o = {}) {
   return { install: (t) => {
     const m = o.components || {};
-    for (const n in m)
-      t.component(n, m[n]);
+    for (const a in m)
+      t.component(a, m[a]);
     const e = o.defaults || {};
-    t.provide(i, c(e)), y(t, o.themes);
-    const a = u();
-    t.provide(f, a), b(t);
+    t.provide(c, n(e)), y(t, o.themes);
+    const r = u();
+    t.provide(f, r), b(t);
   } };
 }
 function y(o, s) {
@@ -23,11 +23,11 @@ function y(o, s) {
   let m;
   if (s)
     for (const e of s.themes) {
-      const n = { ...e.mode === "light" ? r : l, ...e.colors };
+      const a = { ...e.mode === "light" ? l : i, ...e.colors };
       t.push({
         name: e.name,
         mode: e.mode,
-        scheme: n
+        scheme: a
       }), e.name === s.defaultTheme && (m = e.name);
     }
   else {
@@ -35,19 +35,19 @@ function y(o, s) {
       {
         name: "light",
         mode: "light",
-        scheme: r
+        scheme: l
       },
       {
         name: "dark",
         mode: "dark",
-        scheme: l
+        scheme: i
       }
     ];
     t.push(...e), m = "light";
   }
   if (m) {
-    const e = c(m), a = T(e, t);
-    L(t), S(a.class, k, { immediate: !0 }), o.provide(h, a);
+    const e = T(n(m), n(t));
+    L(t), S(e.class, k, { immediate: !0 }), o.provide(h, e);
   }
 }
 function b(o) {

package/esm/templates/theme.js

@@ -1,4 +1,4 @@
-const f = {
+const a = {
   primary: "#008ad2",
   primaryLight: "#cde5ff",
   primaryDark: "#006398",
@@ -34,44 +34,44 @@ const f = {
   onDanger: "#fff",
   onInfo: "#fff",
   onNeutral: "#fff"
-}, a = {
+}, f = {
   primary: "#4da6e0",
-  primaryLight: "#2d8bc7",
-  primaryDark: "#87c4e8",
-  secondary: "#4a6b82",
-  secondaryLight: "#2c4a5e",
-  secondaryDark: "#6b8ca3",
+  primaryLight: "#1a2832",
+  primaryDark: "#87c5f0",
+  secondary: "#b8d4e6",
+  secondaryLight: "#1a2832",
+  secondaryDark: "#e6f2ff",
   highlight: "#ff9966",
-  highlightLight: "#e67344",
-  highlightDark: "#ffb088",
-  info: "#3bb5d1",
-  infoLight: "#2a9bb8",
-  infoDark: "#66c7dd",
-  success: "#4caf50",
-  successLight: "#388e3c",
-  successDark: "#81c784",
-  warning: "#ffb74d",
-  warningLight: "#e67e22",
-  warningDark: "#ffcc80",
-  danger: "#e57373",
-  dangerLight: "#c62828",
-  dangerDark: "#ef9a9a",
+  highlightLight: "#2d1a0f",
+  highlightDark: "#ffb899",
+  info: "#4cb8d1",
+  infoLight: "#1f2a2d",
+  infoDark: "#7dcce0",
+  success: "#5cb85c",
+  successLight: "#1e2a20",
+  successDark: "#85d085",
+  warning: "#ffcc4d",
+  warningLight: "#332a1a",
+  warningDark: "#ffd966",
+  danger: "#e74c3c",
+  dangerLight: "#2d1a1a",
+  dangerDark: "#f17066",
   background: "#121212",
   container: "#1e1e1e",
-  neutral: "#9e9e9e",
-  neutralLight: "#666666",
-  neutralDark: "#d0d0d0",
-  onBackground: "#ffffff",
-  onPrimary: "#ffffff",
-  onSecondary: "#ffffff",
-  onHighlight: "#ffffff",
-  onSuccess: "#ffffff",
-  onWarning: "#000000",
-  onDanger: "#ffffff",
-  onInfo: "#ffffff",
-  onNeutral: "#000000"
+  neutral: "#9ca3ab",
+  neutralLight: "#2a2d31",
+  neutralDark: "#c8ced6",
+  onBackground: "#e0e0e0",
+  onPrimary: "#000",
+  onSecondary: "#000",
+  onHighlight: "#000",
+  onSuccess: "#000",
+  onWarning: "#000",
+  onDanger: "#000",
+  onInfo: "#000",
+  onNeutral: "#000"
 };
 export {
-  a as defaultDarkColorScheme,
-  f as defaultLightColorScheme
+  f as defaultDarkColorScheme,
+  a as defaultLightColorScheme
 };

package/esm/utils/theme.d.ts

@@ -1,4 +1,4 @@
-import { DeepReadonly, MaybeRefOrGetter } from 'vue';
+import { DeepReadonly, Ref } from 'vue';
 import { ThemeDefinition, ThemeInstance } from '../composables/theme';
 export declare const THEME_NODE_ID = "q-theme";
 /**
@@ -33,24 +33,24 @@ export declare function generateRootStyle(themes: ThemeDefinition[]): void;
  */
 export declare function toProperty(color: string): string;
 /**
- * Creates a reactive theme instance for a given theme name.
+ * Creates a reactive theme instance bound to a given theme name and list of theme definitions.
  *
- * This provides reactive access to the currently active theme and
- * computed properties for applying its CSS class and CSS variables.
+ * This function ensures the active theme is always kept in sync with the provided `name` ref,
+ * and exposes reactive/computed properties for convenient use in templates and styling.
  *
- * @param name - The name of the theme to activate, or a getter/ref returning a string.
- * @param themes - A readonly array of available theme definitions.
+ * @param name - A reactive `Ref<string>` representing the active theme name.
+ * @param themes - A reactive `Ref<ThemeDefinition[]>` containing all available themes.
  *
- * @returns A `ThemeInstance` object containing:
- *   - `name`: a reactive `Ref<string>` of the active theme name.
- *   - `current`: a computed `Ref<ThemeDefinition>` of the active theme.
- *   - `themes`: the array of all available theme definitions.
- *   - `class`: a computed CSS class string for the active theme.
- *   - `css`: a computed string of CSS variables for the active theme.
+ * @returns A `ThemeInstance` object with the following reactive properties:
+ *   - `name`: the reactive `Ref<string>` of the active theme name.
+ *   - `current`: a computed `Ref<ThemeDefinition>` of the active theme definition.
+ *   - `themes`: the reactive `Ref<ThemeDefinition[]>` of all available themes.
+ *   - `class`: a computed `Ref<string>` of the CSS class for the active theme.
+ *   - `css`: a computed `Ref<string>` of the CSS variables for the active theme.
  *
- * @throws Will throw an error if no theme with the specified name exists in `themes`.
+ * @throws {Error} If no theme matching the active `name` exists in `themes`.
  */
-export declare function createThemeInstance(name: MaybeRefOrGetter<string>, themes: DeepReadonly<ThemeDefinition[]>): ThemeInstance;
+export declare function createThemeInstance(name: Ref<string>, themes: DeepReadonly<Ref<ThemeDefinition[]>>): ThemeInstance;
 /**
  * Generates a CSS class name for a given theme.
  *

package/esm/utils/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAA;AACzD,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAQ1E,eAAO,MAAM,aAAa,YAAY,CAAA;AAEtC;;;;GAIG;AACH,wBAAgB,YAAY,IAAI,gBAAgB,CAY/C;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,eAAe,UAoBtD;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,eAAe,EAAE,QAM1D;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,UAOvC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,mBAAmB,CAClC,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,EAC9B,MAAM,EAAE,YAAY,CAAC,eAAe,EAAE,CAAC,GACrC,aAAa,CAqBf;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,UAEzC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC5C,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAQ1E,eAAO,MAAM,aAAa,YAAY,CAAA;AAEtC;;;;GAIG;AACH,wBAAgB,YAAY,IAAI,gBAAgB,CAY/C;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,eAAe,UAoBtD;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,eAAe,EAAE,QAM1D;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,UAOvC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,mBAAmB,CAClC,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,EACjB,MAAM,EAAE,YAAY,CAAC,GAAG,CAAC,eAAe,EAAE,CAAC,CAAC,GAC1C,aAAa,CAmBf;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,UAEzC"}

package/esm/utils/theme.js

@@ -1,63 +1,63 @@
-import { ref as d, toValue as p, computed as c } from "vue";
-import { parseColor as $ } from "./color.js";
-import { toKebabCase as l } from "./string.js";
-const a = "q-theme";
-function g() {
+import { computed as c } from "vue";
+import { parseColor as d } from "./color.js";
+import { toKebabCase as a } from "./string.js";
+const m = "q-theme";
+function h() {
   let e = document.getElementById(
-    a
+    m
   );
-  return e || (e = document.createElement("style"), e.id = a, document.head.appendChild(e)), e;
+  return e || (e = document.createElement("style"), e.id = m, document.head.appendChild(e)), e;
 }
 function i(e) {
-  let t = `.${f(e.name)} {
+  let t = `.${l(e.name)} {
 `;
   const n = e.scheme;
   let o;
   for (o in n) {
-    const r = n[o];
-    if (r) {
-      t += `  ${u(o)}: ${r};
+    const s = n[o];
+    if (s) {
+      t += `  ${u(o)}: ${s};
 `;
-      const s = $(r);
-      t += `  ${u(o)}-rgb: ${s.r} ${s.g} ${s.b};
+      const r = d(s);
+      t += `  ${u(o)}-rgb: ${r.r} ${r.g} ${r.b};
 `;
     }
   }
   return t += `}
 `, t;
 }
-function b(e) {
+function C(e) {
   const t = e.map(i).join(`
-`), n = g();
+`), n = h();
   n.textContent = t;
 }
 function u(e) {
-  return e ? `--q-theme-${l(e)}` : "";
+  return e ? `--q-theme-${a(e)}` : "";
 }
-function v(e, t) {
-  const n = d(p(e)), o = c(() => {
-    const m = t.find((h) => h.name === n.value);
-    if (!m)
-      throw new Error(`Theme "${n.value}" not found`);
-    return m;
-  }), r = c(() => f(o.value.name)), s = c(() => i(o.value));
+function T(e, t) {
+  const n = c(() => {
+    const r = t.value.find((f) => f.name === e.value);
+    if (!r)
+      throw new Error(`[Quidgest UI] Theme "${e.value}" not found`);
+    return r;
+  }), o = c(() => l(n.value.name)), s = c(() => i(n.value));
   return {
-    name: n,
-    current: o,
+    name: e,
+    current: n,
     themes: t,
-    class: r,
+    class: o,
     css: s
   };
 }
-function f(e) {
-  return `q-theme--${l(e)}`;
+function l(e) {
+  return `q-theme--${a(e)}`;
 }
 export {
-  a as THEME_NODE_ID,
-  v as createThemeInstance,
-  b as generateRootStyle,
+  m as THEME_NODE_ID,
+  T as createThemeInstance,
+  C as generateRootStyle,
   i as generateThemeCss,
-  f as getThemeClass,
-  g as getThemeNode,
+  l as getThemeClass,
+  h as getThemeNode,
   u as toProperty
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@quidgest/ui",
   "description": "Quidgest's UI framework",
-  "version": "0.16.31",
+  "version": "0.16.33",
   "private": false,
   "type": "module",
   "author": "Quidgest",