origam 2.15.0 → 2.16.0

package/dist/src/composables/Commons/stateEffect.composable.js

@@ -153,20 +153,78 @@ export function useStateEffect(props, isHover = noopRef, isActive = noopRef, hov
       }
     })
   );
-  const { roundedClasses, roundedStyles } = useRounded(rounded);
+  const { roundedClasses, roundedStyles } = useRounded(
+    reactive({
+      get rounded() {
+        return rounded.value;
+      },
+      get roundedTopLeft() {
+        return props.roundedTopLeft;
+      },
+      get roundedTopRight() {
+        return props.roundedTopRight;
+      },
+      get roundedBottomLeft() {
+        return props.roundedBottomLeft;
+      },
+      get roundedBottomRight() {
+        return props.roundedBottomRight;
+      }
+    })
+  );
   const { elevationClasses, elevationStyles } = useElevation(
     elevation,
     flat
   );
   const { paddingClasses, paddingStyles } = usePadding(
-    reactive({ get padding() {
-      return padding.value;
-    } })
+    reactive({
+      get padding() {
+        return padding.value;
+      },
+      get paddingTop() {
+        return props.paddingTop;
+      },
+      get paddingRight() {
+        return props.paddingRight;
+      },
+      get paddingBottom() {
+        return props.paddingBottom;
+      },
+      get paddingLeft() {
+        return props.paddingLeft;
+      },
+      get paddingBlock() {
+        return props.paddingBlock;
+      },
+      get paddingInline() {
+        return props.paddingInline;
+      }
+    })
   );
   const { marginClasses, marginStyles } = useMargin(
-    reactive({ get margin() {
-      return margin.value;
-    } })
+    reactive({
+      get margin() {
+        return margin.value;
+      },
+      get marginTop() {
+        return props.marginTop;
+      },
+      get marginRight() {
+        return props.marginRight;
+      },
+      get marginBottom() {
+        return props.marginBottom;
+      },
+      get marginLeft() {
+        return props.marginLeft;
+      },
+      get marginBlock() {
+        return props.marginBlock;
+      },
+      get marginInline() {
+        return props.marginInline;
+      }
+    })
   );
   const gapStyles = computed(() => {
     const v = gap.value;

package/dist/src/composables/Commons/theme-props-resolver.composable.cjs

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.installThemePropsResolver = installThemePropsResolver;
+exports.themedPropKeysUnion = themedPropKeysUnion;
+var _vue = require("vue");
+var _consts = require("../../consts/index.cjs");
+var _utils = require("../../utils/index.cjs");
+var _defaults = require("./defaults.composable.cjs");
+function themedPropKeysUnion(themes) {
+  const union = /* @__PURE__ */new Map();
+  for (const componentDefaults of themes) {
+    for (const componentName in componentDefaults) {
+      const propsForComponent = componentDefaults[componentName];
+      if (!propsForComponent) continue;
+      let keys = union.get(componentName);
+      if (!keys) {
+        keys = /* @__PURE__ */new Set();
+        union.set(componentName, keys);
+      }
+      for (const propKey in propsForComponent) {
+        keys.add(propKey);
+      }
+    }
+  }
+  return union;
+}
+function passedPropValue(vnodeProps, key) {
+  if (!vnodeProps) return void 0;
+  for (const rawKey in vnodeProps) {
+    if (rawKey === key || (0, _defaults.camelize)(rawKey) === key) return vnodeProps[rawKey];
+  }
+  return void 0;
+}
+function installThemePropsResolver(app, themedKeysUnion) {
+  app.mixin({
+    beforeCreate() {
+      const instance = (0, _vue.getCurrentInstance)();
+      if (!instance) return;
+      const name = (0, _utils.getCurrentInstanceName)("theme-props-resolver");
+      const defaults = (0, _vue.inject)(_consts.ORIGAM_DEFAULTS_KEY, (0, _vue.ref)({}));
+      const ownKeys = themedKeysUnion.get(name);
+      const globalKeys = themedKeysUnion.get("global");
+      const providerOwnKeys = defaults.value?.[name];
+      const providerGlobalKeys = defaults.value?.global;
+      if (!ownKeys?.size && !globalKeys?.size && !providerOwnKeys && !providerGlobalKeys) return;
+      const rawProps = instance.props;
+      const targetKeys = ownKeys ? new Set(ownKeys) : /* @__PURE__ */new Set();
+      if (globalKeys) for (const key of globalKeys) targetKeys.add(key);
+      if (providerOwnKeys) for (const key in providerOwnKeys) targetKeys.add(key);
+      if (providerGlobalKeys) for (const key in providerGlobalKeys) targetKeys.add(key);
+      for (const key of targetKeys) {
+        if (!(key in rawProps)) continue;
+        const fallbackValue = (0, _vue.shallowRef)(rawProps[key]);
+        let passedValue = passedPropValue(instance.vnode.props, key);
+        Object.defineProperty(rawProps, key, {
+          configurable: true,
+          enumerable: true,
+          get() {
+            const fallback = fallbackValue.value;
+            if (passedValue !== void 0) return passedValue;
+            const componentDefaults = defaults.value?.[name];
+            if (componentDefaults && componentDefaults[key] !== void 0) {
+              return componentDefaults[key];
+            }
+            const globalDefaults = defaults.value?.global;
+            if (globalDefaults && globalDefaults[key] !== void 0) {
+              return globalDefaults[key];
+            }
+            return fallback;
+          },
+          set(value) {
+            passedValue = passedPropValue(instance.vnode.props, key);
+            fallbackValue.value = value;
+          }
+        });
+      }
+    }
+  });
+}

package/dist/src/composables/Commons/theme-props-resolver.composable.d.ts

@@ -0,0 +1,38 @@
+import { type App } from 'vue';
+import type { IDefault } from '../../interfaces';
+/**
+ * Compute the set of prop keys, per component name (plus the special
+ * `'global'` key), that AT LEAST ONE registered theme names in its
+ * `components` block.
+ *
+ * Scoped to the UNION across every theme `createOrigam` installs — not just
+ * the brand×mode active at mount. A prop named only by a theme that becomes
+ * active LATER (via a runtime brand switch) still needs interception wired
+ * up from the start, or it will never update after the switch (verified gap
+ * in ADR-005: `rounded` stayed `'none'` after swapping to a theme that was
+ * the first to name it).
+ *
+ * Pure — no Vue/DOM access — so it is called once, synchronously, at
+ * `createOrigam()` install time.
+ */
+export declare function themedPropKeysUnion(themes: IDefault[]): Map<string, Set<string>>;
+/**
+ * Install the global `beforeCreate` hook described at the top of this file.
+ * Called once by `createOrigam()` per app instance.
+ *
+ * ⚠️ ALWAYS calls `app.mixin()`, even for an empty `themedKeysUnion`.
+ *
+ * It used to early-out on an empty union, on the grounds that a theme naming
+ * nothing means nothing to intercept. That stopped being true once this hook
+ * also resolves the `provideDefaults` cascade (see "Two key sources" in the
+ * hook body): a `<origam-defaults-provider>` — or any group component that
+ * forwards props to its children — populates the very same defaults map at
+ * RUNTIME, long after install time. There is no install-time way to know
+ * whether one will ever mount, so the union being empty no longer implies
+ * there is nothing to do.
+ *
+ * The per-instance early-out inside the hook is unchanged in spirit and still
+ * carries the cost argument: an instance that neither a theme nor an ancestor
+ * provider names returns after a Map lookup and one property lookup.
+ */
+export declare function installThemePropsResolver(app: App, themedKeysUnion: Map<string, Set<string>>): void;

package/dist/src/composables/Commons/theme-props-resolver.composable.js

@@ -0,0 +1,75 @@
+import { getCurrentInstance, inject, ref, shallowRef } from "vue";
+import { ORIGAM_DEFAULTS_KEY } from "../../consts/index.js";
+import { getCurrentInstanceName } from "../../utils/index.js";
+import { camelize } from "./defaults.composable.js";
+export function themedPropKeysUnion(themes) {
+  const union = /* @__PURE__ */ new Map();
+  for (const componentDefaults of themes) {
+    for (const componentName in componentDefaults) {
+      const propsForComponent = componentDefaults[componentName];
+      if (!propsForComponent) continue;
+      let keys = union.get(componentName);
+      if (!keys) {
+        keys = /* @__PURE__ */ new Set();
+        union.set(componentName, keys);
+      }
+      for (const propKey in propsForComponent) {
+        keys.add(propKey);
+      }
+    }
+  }
+  return union;
+}
+function passedPropValue(vnodeProps, key) {
+  if (!vnodeProps) return void 0;
+  for (const rawKey in vnodeProps) {
+    if (rawKey === key || camelize(rawKey) === key) return vnodeProps[rawKey];
+  }
+  return void 0;
+}
+export function installThemePropsResolver(app, themedKeysUnion) {
+  app.mixin({
+    beforeCreate() {
+      const instance = getCurrentInstance();
+      if (!instance) return;
+      const name = getCurrentInstanceName("theme-props-resolver");
+      const defaults = inject(ORIGAM_DEFAULTS_KEY, ref({}));
+      const ownKeys = themedKeysUnion.get(name);
+      const globalKeys = themedKeysUnion.get("global");
+      const providerOwnKeys = defaults.value?.[name];
+      const providerGlobalKeys = defaults.value?.global;
+      if (!ownKeys?.size && !globalKeys?.size && !providerOwnKeys && !providerGlobalKeys) return;
+      const rawProps = instance.props;
+      const targetKeys = ownKeys ? new Set(ownKeys) : /* @__PURE__ */ new Set();
+      if (globalKeys) for (const key of globalKeys) targetKeys.add(key);
+      if (providerOwnKeys) for (const key in providerOwnKeys) targetKeys.add(key);
+      if (providerGlobalKeys) for (const key in providerGlobalKeys) targetKeys.add(key);
+      for (const key of targetKeys) {
+        if (!(key in rawProps)) continue;
+        const fallbackValue = shallowRef(rawProps[key]);
+        let passedValue = passedPropValue(instance.vnode.props, key);
+        Object.defineProperty(rawProps, key, {
+          configurable: true,
+          enumerable: true,
+          get() {
+            const fallback = fallbackValue.value;
+            if (passedValue !== void 0) return passedValue;
+            const componentDefaults = defaults.value?.[name];
+            if (componentDefaults && componentDefaults[key] !== void 0) {
+              return componentDefaults[key];
+            }
+            const globalDefaults = defaults.value?.global;
+            if (globalDefaults && globalDefaults[key] !== void 0) {
+              return globalDefaults[key];
+            }
+            return fallback;
+          },
+          set(value) {
+            passedValue = passedPropValue(instance.vnode.props, key);
+            fallbackValue.value = value;
+          }
+        });
+      }
+    }
+  });
+}

package/dist/src/composables/CssSupport/cssSupport.composable.d.ts

@@ -1,37 +1,8 @@
-import { type ComputedRef, type Ref } from 'vue';
-import { FEATURE_QUERIES } from '../../consts/CssSupport/css-support.const';
-export type TCssFeatureName = keyof typeof FEATURE_QUERIES;
-export type TCssSupportMap = Readonly<Record<TCssFeatureName, boolean>>;
-export interface IUseCssSupport {
-    /**
-     * Reactive map of feature → `boolean`. Computed once on first browser-
-     * side call; subsequent calls share the same frozen snapshot.
-     */
-    css: Readonly<Ref<TCssSupportMap>>;
-    /**
-     * Free-form query support. Pass any string accepted by `CSS.supports()`.
-     * Result is cached per-query.
-     *
-     * @example
-     *   supports('display: grid')                  // true on modern browsers
-     *   supports('selector(:has(*))')              // selector query
-     *   supports('width: clamp(1px, 50%, 100px)')  // math function
-     */
-    supports: (query: string) => boolean;
-    /**
-     * `true` if at least ONE of the queries is supported.
-     */
-    supportsAny: (...queries: string[]) => boolean;
-    /**
-     * `true` if EVERY query is supported.
-     */
-    supportsAll: (...queries: string[]) => boolean;
-    /**
-     * Reactive `ComputedRef<boolean>` for a single named feature. Useful in
-     * templates: `<div v-if="hasGrid">…`.
-     */
-    has: (feature: TCssFeatureName) => ComputedRef<boolean>;
-}
+import { type Ref } from 'vue';
+import type { IUseCssSupport, IUseCssSupportClientOptions } from '../../interfaces';
+import type { TCssFeatureName } from '../../types';
+export type { TCssFeatureName, TCssSupportMap } from '../../types';
+export type { IUseCssSupport, IUseCssSupportClientOptions } from '../../interfaces';
 /*********************************************************
  * useCssSupport
  ********************************************************/
@@ -46,15 +17,6 @@ export declare function useCssSupport(): IUseCssSupport;
  * _resetCssSupportCache
  ********************************************************/
 export declare function _resetCssSupportCache(): void;
-export interface IUseCssSupportClientOptions {
-    /**
-     * Value returned during SSR and on the first client render (before
-     * `onMounted` fires). Pick the side of the branch that produces the
-     * smaller / safer markup — typically `false` (= JS fallback) so the
-     * server output stays universally compatible.
-     */
-    defaultValue?: boolean;
-}
 /*********************************************************
  * useCssSupportClient
  *

package/dist/src/composables/Mask/mask.composable.d.ts

@@ -1,26 +1,6 @@
-import { MaybeRef, Ref } from 'vue';
-import type { IMaskOptions, IResolvedMaskConfig } from '../../interfaces';
+import { MaybeRef } from 'vue';
+import type { IMaskOptions, IUseMaskReturn } from '../../interfaces';
 import type { TMask } from '../../types';
-/**
- * Public return shape of `useMask`.
- */
-export interface IUseMaskReturn {
-    masked: Ref<string>;
-    unmasked: Ref<string>;
-    isValid: Ref<boolean>;
-    complete: Ref<boolean>;
-    /**
-     * Imperatively re-run the formatter on a raw value
-     * (used by paste / external sync). Returns the new
-     * `unmasked` so callers can keep their model in sync.
-     */
-    setRaw: (raw: string) => string;
-    /**
-     * Currently resolved config (pattern + validator +
-     * required). `null` when no mask is active.
-     */
-    config: Ref<IResolvedMaskConfig | null>;
-}
 /**
  * Reactive mask engine — keeps `masked`, `unmasked`,
  * `isValid` and `complete` in sync with a source string
@@ -36,4 +16,4 @@ export interface IUseMaskReturn {
  *                                the current value.
  */
 export declare function useMask(modelValue: MaybeRef<string | null | undefined>, mask: MaybeRef<TMask | undefined>): IUseMaskReturn;
-export type { IMaskOptions };
+export type { IMaskOptions, IUseMaskReturn };

package/dist/src/composables/Masonry/masonry.composable.d.ts

@@ -1,60 +1,6 @@
-import { type Ref } from 'vue';
 import type { TMasonryAlign } from '../../types';
-import type { TMasonryColumnBreakpoints } from '../../interfaces';
-/**
- * Internal layout descriptor produced by the bucket-fill algorithm.
- * One entry per measured item. Coordinates are expressed in CSS px,
- * relative to the masonry container's content box.
- */
-export interface IMasonryItemRect {
-    /** Index of the item in the original DOM order. */
-    index: number;
-    /** `left` (px) of the item inside the container's content box. */
-    left: number;
-    /** `top` (px) of the item inside the container's content box. */
-    top: number;
-    /** Computed width (px) — same for every item in a given pass. */
-    width: number;
-    /** Measured height (px) — preserved from the natural item flow. */
-    height: number;
-    /** Zero-based column index the item was placed into. */
-    column: number;
-}
-/**
- * Public layout result. The caller uses `containerHeight` to size the
- * container (absolute-positioned children would otherwise collapse it),
- * and `items` to read per-item coordinates for inline-style assignment.
- */
-export interface IMasonryLayoutResult {
-    /** Final container height (px) — `max(column heights)`. */
-    containerHeight: number;
-    /** Per-item position record. Index matches the original DOM order. */
-    items: IMasonryItemRect[];
-    /** Effective column count used for this layout (post-breakpoint). */
-    columns: number;
-}
-/**
- * Options consumed by `useMasonry`. All inputs are refs so the
- * composable can react to prop changes from its consumer.
- */
-export interface IUseMasonryOptions {
-    /** Default column count. Used when no breakpoint matches. */
-    columnsRef: Ref<number>;
-    /**
-     * Gap in **px** between items, both axes. The composable expects an
-     * already-resolved pixel value — string-token resolution happens in
-     * the component wrapper.
-     */
-    gapRef: Ref<number>;
-    /** Optional container-query breakpoints. */
-    breakpointsRef?: Ref<TMasonryColumnBreakpoints | undefined>;
-    /**
-     * Vertical alignment of items inside a column. `'top'` packs to the
-     * top; `'center'` shifts each column's content down by half the
-     * unused space.
-     */
-    alignRef?: Ref<TMasonryAlign>;
-}
+import type { IMasonryLayoutResult, IUseMasonryOptions, TMasonryColumnBreakpoints } from '../../interfaces';
+export type { IMasonryItemRect, IMasonryLayoutResult, IUseMasonryOptions } from '../../interfaces';
 /**
  * Decide how many columns to use given a container width and a
  * breakpoint map. Picks the LARGEST key ≤ width. Falls back to
@@ -104,9 +50,9 @@ export declare function bucketFill(heights: ReadonlyArray<number>, containerWidt
  *   - On unmount: disconnect observers.
  */
 export declare function useMasonry(options: IUseMasonryOptions): {
-    containerRef: Ref<HTMLElement | null, HTMLElement | null>;
+    containerRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
     setItem: (index: number, el: HTMLElement | null) => void;
-    layout: Ref<{
+    layout: import("vue").Ref<{
         containerHeight: number;
         items: {
             index: number;

package/dist/src/composables/Parallax/parallax.composable.d.ts

@@ -1,24 +1,6 @@
 import { type Ref } from 'vue';
-import type { IParallaxLayerRegistry } from '../../interfaces';
-import type { TParallaxDirection, TParallaxEasing } from '../../types';
-/*********************************************************
- * Internal options consumed by `useParallaxRuntime`.
- ********************************************************/
-export interface IUseParallaxRuntimeOptions {
-    target: Ref<HTMLElement | undefined>;
-    direction: Ref<TParallaxDirection>;
-    easing: Ref<TParallaxEasing | string>;
-    threshold: Ref<number>;
-    disabled: Ref<boolean>;
-    /**
-     * Fallback speed used when `slot=default` carries raw content (no
-     * `<OrigamParallaxLayer>`). Mirrors `IParallaxProps.speed`.
-     */
-    speed: Ref<number>;
-    onEnter?: () => void;
-    onLeave?: () => void;
-    onProgress?: (progress: number) => void;
-}
+import type { IParallaxLayerRegistry, IUseParallaxRuntimeOptions } from '../../interfaces';
+export type { IUseParallaxRuntimeOptions } from '../../interfaces';
 /*********************************************************
  * useParallaxRuntime
  *

package/dist/src/composables/PasswordField/passwordStrength.composable.cjs

@@ -10,13 +10,14 @@ Object.defineProperty(exports, "DEFAULT_PASSWORD_REQUIREMENTS", {
   }
 });
 exports.computeStrength = computeStrength;
+var _enums = require("../../enums/index.cjs");
 var _consts = require("../../consts/index.cjs");
 function computeStrength(value) {
   const v = (value ?? "").toString();
   if (v.length === 0) {
     return {
       score: 0,
-      level: "weak"
+      level: _enums.PASSWORD_STRENGTH_LEVEL.WEAK
     };
   }
   let raw = 0;
@@ -27,7 +28,7 @@ function computeStrength(value) {
   if (/[^A-Za-z0-9]/.test(v)) raw += 1;
   const score = raw > 4 ? 4 : raw;
   let level;
-  if (score <= 1) level = "weak";else if (score === 2) level = "fair";else if (score === 3) level = "good";else level = "strong";
+  if (score <= 1) level = _enums.PASSWORD_STRENGTH_LEVEL.WEAK;else if (score === 2) level = _enums.PASSWORD_STRENGTH_LEVEL.FAIR;else if (score === 3) level = _enums.PASSWORD_STRENGTH_LEVEL.GOOD;else level = _enums.PASSWORD_STRENGTH_LEVEL.STRONG;
   return {
     score,
     level

package/dist/src/composables/PasswordField/passwordStrength.composable.js

@@ -1,7 +1,8 @@
+import { PASSWORD_STRENGTH_LEVEL } from "../../enums/index.js";
 export function computeStrength(value) {
   const v = (value ?? "").toString();
   if (v.length === 0) {
-    return { score: 0, level: "weak" };
+    return { score: 0, level: PASSWORD_STRENGTH_LEVEL.WEAK };
   }
   let raw = 0;
   if (v.length >= 8) raw += 1;
@@ -11,10 +12,10 @@ export function computeStrength(value) {
   if (/[^A-Za-z0-9]/.test(v)) raw += 1;
   const score = raw > 4 ? 4 : raw;
   let level;
-  if (score <= 1) level = "weak";
-  else if (score === 2) level = "fair";
-  else if (score === 3) level = "good";
-  else level = "strong";
+  if (score <= 1) level = PASSWORD_STRENGTH_LEVEL.WEAK;
+  else if (score === 2) level = PASSWORD_STRENGTH_LEVEL.FAIR;
+  else if (score === 3) level = PASSWORD_STRENGTH_LEVEL.GOOD;
+  else level = PASSWORD_STRENGTH_LEVEL.STRONG;
   return { score, level };
 }
 export { DEFAULT_PASSWORD_REQUIREMENTS } from "../../consts/index.js";

package/dist/src/composables/Snackbar/snackbar-group.composable.cjs

@@ -17,7 +17,8 @@ const getStore = id => {
       timers: /* @__PURE__ */new Map(),
       counter: {
         current: 0
-      }
+      },
+      defaultDuration: (0, _vue.ref)(_consts.SNACKBAR_GROUP_DEFAULT_DURATION)
     };
     STORES.set(id, store);
   }
@@ -54,7 +55,7 @@ function useSnackbarGroup(options = {}) {
   };
   const notify = opts => {
     const itemId = generateId(state);
-    const duration = opts.duration ?? options.defaultDuration ?? _consts.SNACKBAR_GROUP_DEFAULT_DURATION;
+    const duration = opts.duration ?? options.defaultDuration ?? state.defaultDuration.value;
     const item = {
       ...opts,
       id: itemId,
@@ -84,9 +85,13 @@ function useSnackbarGroup(options = {}) {
 }
 function useSnackbarGroupInternal(id = _consts.SNACKBAR_GROUP_DEFAULT_ID) {
   const state = getStore(id);
+  const registerDefaultDuration = duration => {
+    state.defaultDuration.value = duration;
+  };
   return {
     rawItems: state.items,
-    itemCount: (0, _vue.computed)(() => state.items.value.length)
+    itemCount: (0, _vue.computed)(() => state.items.value.length),
+    registerDefaultDuration
   };
 }
 function resetSnackbarGroupForTesting() {

package/dist/src/composables/Snackbar/snackbar-group.composable.d.ts

@@ -1,5 +1,6 @@
 import { type Ref } from 'vue';
-import type { ISnackbarGroupItem, ISnackbarGroupItemOptions } from '../../interfaces';
+import type { ISnackbarGroupItem, IUseSnackbarGroupOptions, IUseSnackbarGroupReturn } from '../../interfaces';
+export type { IUseSnackbarGroupOptions, IUseSnackbarGroupReturn } from '../../interfaces';
 /*********************************************************
  * useSnackbarGroup
  *
@@ -10,27 +11,6 @@ import type { ISnackbarGroupItem, ISnackbarGroupItemOptions } from '../../interf
  * `<OrigamSnackbarGroup id="…">` instance, so direct
  * mutation outside of `notify` / `dismiss` is discouraged.
  ********************************************************/
-export interface IUseSnackbarGroupOptions {
-    id?: string;
-    /**
-     * Maximum number of items kept in the stack. When `notify` would
-     * push past this number, the oldest item is evicted FIFO. When
-     * undefined, the stack is unbounded (the rendering component
-     * still caps the visible count via its `max` prop).
-     */
-    max?: number;
-    /**
-     * Fallback `duration` applied to items that omit their own.
-     * Defaults to `SNACKBAR_GROUP_DEFAULT_DURATION` (5 000 ms).
-     */
-    defaultDuration?: number;
-}
-export interface IUseSnackbarGroupReturn {
-    items: Readonly<Ref<ReadonlyArray<ISnackbarGroupItem>>>;
-    notify: (opts: ISnackbarGroupItemOptions) => string;
-    dismiss: (itemId: string) => void;
-    dismissAll: () => void;
-}
 export declare function useSnackbarGroup(options?: IUseSnackbarGroupOptions): IUseSnackbarGroupReturn;
 /*********************************************************
  * Internal helper for the host component
@@ -46,6 +26,7 @@ export declare function useSnackbarGroup(options?: IUseSnackbarGroupOptions): IU
 export declare function useSnackbarGroupInternal(id?: string): {
     rawItems: Ref<ISnackbarGroupItem[], ISnackbarGroupItem[]>;
     itemCount: import("vue").ComputedRef<number>;
+    registerDefaultDuration: (duration: number) => void;
 };
 /*********************************************************
  * Test helper

package/dist/src/composables/Snackbar/snackbar-group.composable.js

@@ -7,7 +7,8 @@ const getStore = (id) => {
     store = {
       items: ref([]),
       timers: /* @__PURE__ */ new Map(),
-      counter: { current: 0 }
+      counter: { current: 0 },
+      defaultDuration: ref(SNACKBAR_GROUP_DEFAULT_DURATION)
     };
     STORES.set(id, store);
   }
@@ -44,7 +45,7 @@ export function useSnackbarGroup(options = {}) {
   };
   const notify = (opts) => {
     const itemId = generateId(state);
-    const duration = opts.duration ?? options.defaultDuration ?? SNACKBAR_GROUP_DEFAULT_DURATION;
+    const duration = opts.duration ?? options.defaultDuration ?? state.defaultDuration.value;
     const item = {
       ...opts,
       id: itemId,
@@ -74,9 +75,13 @@ export function useSnackbarGroup(options = {}) {
 }
 export function useSnackbarGroupInternal(id = SNACKBAR_GROUP_DEFAULT_ID) {
   const state = getStore(id);
+  const registerDefaultDuration = (duration) => {
+    state.defaultDuration.value = duration;
+  };
   return {
     rawItems: state.items,
-    itemCount: computed(() => state.items.value.length)
+    itemCount: computed(() => state.items.value.length),
+    registerDefaultDuration
   };
 }
 export function resetSnackbarGroupForTesting() {

package/dist/src/composables/Theme/theme.composable.d.ts

@@ -34,7 +34,7 @@ export declare function useTheme(): {
     resolved: Readonly<Ref<TThemeResolved, TThemeResolved>>;
     setTheme: (next: TTheme) => void;
     toggle: () => void;
-    mode: Readonly<Ref<TMode, TMode>>;
+    mode: Readonly<Ref<"auto" | "light" | "dark", "auto" | "light" | "dark">>;
     resolvedMode: Readonly<Ref<TModeResolved, TModeResolved>>;
     setMode: (next: TMode) => void;
     toggleMode: () => void;

package/dist/src/composables/Transition/transition.composable.cjs

@@ -26,7 +26,7 @@ function useCssTransition(props) {
     name,
     isDisabled
   } = useTransition(props);
-  const tag = props.group ? (0, _vue.shallowRef)(_vue.TransitionGroup) : (0, _vue.shallowRef)(_vue.Transition);
+  const tag = (0, _vue.computed)(() => props.group ? _vue.TransitionGroup : _vue.Transition);
   const handleBeforeEnter = el => {
     if (props.origin) {
       el.style.transformOrigin = props.origin;
@@ -100,7 +100,7 @@ function useWindowTransition(props) {
     name,
     isDisabled
   } = useTransition(props);
-  const tag = props.group ? (0, _vue.shallowRef)(_vue.TransitionGroup) : (0, _vue.shallowRef)(_vue.Transition);
+  const tag = (0, _vue.computed)(() => props.group ? _vue.TransitionGroup : _vue.Transition);
   const window = (0, _vue.inject)(_consts.ORIGAM_WINDOW_KEY);
   const isTransitioning = (0, _vue.shallowRef)(false);
   const handleAfterTransition = () => {