origam 2.8.0 → 2.9.0

package/dist/src/components/Select/OrigamSelect.vue

@@ -289,6 +289,7 @@ import {
   OrigamVirtualScroll
 } from "../../components";
 import {
+  useDefaults,
   useFilter,
   useItems,
   useLocale,
@@ -310,7 +311,7 @@ import {
   TEXT_FIELD_TYPE
 } from "../../enums";
 import { deepEqual, forwardRefs, getUid, matchesSelector, noop, wrapInArray } from "../../utils";
-const props = defineProps({
+const _props = defineProps({
   chips: { type: Boolean, required: false },
   closableChips: { type: Boolean, required: false },
   hideNoData: { type: Boolean, required: false },
@@ -454,6 +455,7 @@ const props = defineProps({
   noFilter: { type: Boolean, required: false },
   eager: { type: Boolean, required: false }
 });
+const props = useDefaults(_props);
 defineEmits(["click:control", "mousedown:control", "update:menu", "update:modelValue", "update:focused", "click:append", "click:prepend", "click:appendInner", "click:prependInner", "click:clear"]);
 const { filterProps } = useProps(props);
 const { t } = useLocale();

package/dist/src/components/SelectionControl/OrigamSelectionControl.vue

@@ -283,6 +283,8 @@ defineExpose(forwardRefs({
       justify-content: center;
       position: relative;
       border-radius: 50%;
+      backdrop-filter: var(--origam-selection-control__input---backdrop-filter, none);
+      -webkit-backdrop-filter: var(--origam-selection-control__input---backdrop-filter, none);
 
       > .origam-icon {
         opacity: 0.7;

package/dist/src/components/SliderField/OrigamSliderField.vue

@@ -423,6 +423,7 @@ import { computed, ref, StyleValue, useSlots, WritableComputedRef } from "vue";
 import { OrigamInput, OrigamLabel, OrigamSliderFieldTrack } from "../../components";
 import {
   useBackgroundColor,
+  useDefaults,
   useFocus,
   useProps,
   useRtl,
@@ -433,7 +434,7 @@ import {
 } from "../../composables";
 import { DENSITY, DIRECTION, SLIDER_FIELD_VARIANT } from "../../enums";
 import { clamp, convertToUnit, createRange, omit } from "../../utils";
-const props = defineProps({
+const _props = defineProps({
   disabled: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
   label: { type: String, required: false },
@@ -527,6 +528,7 @@ const props = defineProps({
   letterSpacing: { type: String, required: false },
   ripple: { type: [Boolean, Object], required: false }
 });
+const props = useDefaults(_props);
 const emits = defineEmits(["start", "end", "update:modelValue", "update:focused"]);
 const { filterProps } = useProps(props);
 const origamInputRef = ref();

package/dist/src/components/Snackbar/OrigamSnackbar.vue

@@ -91,6 +91,7 @@ import { OrigamOverlay, OrigamSnack } from "../../components";
 import OrigamSnackbarItem from "./OrigamSnackbarItem.vue";
 import {
   useBothColor,
+  useDefaults,
   useLayout,
   usePosition,
   useProps,
@@ -104,7 +105,7 @@ import {
 import { ORIGAM_LAYOUT_KEY } from "../../consts";
 import { SCROLL_STRATEGIES } from "../../enums";
 import { forwardRefs } from "../../utils";
-const props = defineProps({
+const _props = defineProps({
   multiLine: { type: Boolean, required: false },
   text: { type: String, required: false },
   timer: { type: [Boolean, String], required: false },
@@ -200,6 +201,7 @@ const props = defineProps({
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false }
 });
+const props = useDefaults(_props);
 const { filterProps } = useProps(props);
 const slots = useSlots();
 const isActive = useVModel(props, "modelValue");

package/dist/src/components/Snackbar/OrigamSnackbarItem.vue

@@ -168,6 +168,8 @@ defineExpose({ filterProps });
     border-color: var(--origam-snackbar-item---border-color, var(--origam-color__border---subtle, rgba(0, 0, 0, 0.12)));
     color: var(--origam-snackbar-item---color, var(--origam-color__text---primary, #1a1a1a));
     box-shadow: var(--origam-snackbar-item---box-shadow, 0 4px 12px rgba(0, 0, 0, 0.12));
+    backdrop-filter: var(--origam-snackbar-item---backdrop-filter, none);
+    -webkit-backdrop-filter: var(--origam-snackbar-item---backdrop-filter, none);
     font-size: var(--origam-snackbar-item---font-size, 0.875rem);
     line-height: 1.4;
 

package/dist/src/components/Switch/OrigamSwitch.vue

@@ -39,6 +39,7 @@
 			>
 				<template #default="{bgColor: scBgColor}">
 					<origam-switch-track
+							ref="origamSwitchTrackRef"
 							:bg-color="scBgColor"
 							:disabled="isDisabled"
 							:error="isValid === false"
@@ -46,6 +47,7 @@
 							:is-valid="isValid"
 							:model-value="model"
 							:readonly="isReadonly"
+							v-bind="{ ...trackProps }"
 							@click="handleTrackClick"
 					>
 						<template
@@ -97,6 +99,7 @@
 					/>
 					<div
 							:class="getSwitchThumbClasses(icon)"
+							:style="switchThumbStyles"
 					>
 						<origam-translate-scale>
 							<div
@@ -142,17 +145,19 @@ import {
   OrigamTranslateScale
 } from "../../components";
 import {
+  useDefaults,
   useFocus,
   useHover,
   useLoader,
   useProps,
+  useRounded,
   useStateEffect,
   useStyle,
   useVModel
 } from "../../composables";
 import { DENSITY, PROGRESS_TYPE, SIZES } from "../../enums";
 import { filterInputAttrs, getUid } from "../../utils";
-const props = defineProps({
+const _props = defineProps({
   indeterminate: { type: Boolean, required: false },
   inset: { type: Boolean, required: false },
   flat: { type: Boolean, required: false },
@@ -250,12 +255,14 @@ const props = defineProps({
   loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false }
 });
+const props = useDefaults(_props);
 defineEmits(["update:modelValue", "update:focused", "update:indeterminate", "click:label"]);
 const { isHover, hoverState } = useHover(props);
 useStateEffect(props, isHover, void 0, hoverState, void 0);
 const { filterProps } = useProps(props);
 const origamSelectionControlRef = ref();
 const origamInputRef = ref();
+const origamSwitchTrackRef = ref();
 const indeterminate = useVModel(props, "indeterminate");
 const model = useVModel(props, "modelValue");
 const { isFocused, onFocus: handleFocus, onBlur: handleBlur } = useFocus(props);
@@ -282,6 +289,9 @@ const inputProps = computed(() => {
 const controlProps = computed(() => {
   return origamSelectionControlRef.value?.filterProps(props, ["modelValue", "type", "disabled", "readonly", "class", "style", "id"]);
 });
+const trackProps = computed(() => {
+  return origamSwitchTrackRef.value?.filterProps(props, ["modelValue", "disabled", "readonly", "error", "inset", "isValid", "bgColor", "color", "class", "style", "id"]);
+});
 const isSkeletonLoading = computed(() => {
   return loaderConfig.value.isActive && loaderConfig.value.kind === "skeleton";
 });
@@ -298,6 +308,12 @@ const switchStyles = computed(() => {
     props.style
   ];
 });
+const { roundedStyles: thumbRoundedStyles } = useRounded(props, "origam-switch__thumb");
+const switchThumbStyles = computed(() => {
+  return [
+    thumbRoundedStyles.value
+  ];
+});
 const getSwitchThumbClasses = (icon) => {
   return [
     "origam-switch__thumb",
@@ -446,6 +462,31 @@ defineExpose({
 		.origam-selection-control {
 			min-height: calc(var(--origam-switch__selection-control---min-height, 56px) + var(--origam-input---density, 0px));
 
+			/*
+			 * The base SelectionControl wrapper reserves a fixed
+			 * `calc(40px + 1.5 * density)` box sized for a checkbox/radio
+			 * input glyph. Switch instead renders a variable-width track
+			 * (36–52px depending on `--origam-switch__track---width` /
+			 * the `inset` variant, plus its own horizontal padding) as
+			 * the wrapper's only in-flow child — `__input` is forced
+			 * `position: absolute` below so it no longer participates in
+			 * the flex layout. That fixed formula was never track-aware:
+			 * under `density="compact"` (-8px) the wrapper shrinks to
+			 * 28px while the standard track needs ~46px, so the track
+			 * visually overflows into the neighbouring label ("Flat"
+			 * rendering as "lat"). Let the wrapper size to its actual
+			 * content (`max-content`) instead, keeping the original
+			 * density formula only as a floor via `min-width`/`min-height`
+			 * so the checkbox-sized footprint is preserved whenever the
+			 * track is smaller than it (never smaller than before).
+			 */
+			:deep(.origam-selection-control__wrapper) {
+				width: max-content;
+				height: max-content;
+				min-width: calc(40px + 1.5 * var(--origam-selection-control--density, 0px));
+				min-height: calc(40px + 1.5 * var(--origam-selection-control--density, 0px));
+			}
+
 			:deep(.origam-selection-control__input) {
 				border-radius: 50%;
 				transition: 0.2s transform cubic-bezier(0.4, 0, 0.2, 1);

package/dist/src/components/Switch/OrigamSwitchTrack.vue

@@ -37,7 +37,10 @@
 import { computed, StyleValue, useSlots } from "vue";
 import {
   useBackgroundColor,
+  useBorder,
+  useElevation,
   useProps,
+  useRounded,
   useStyle
 } from "../../composables";
 const props = defineProps({
@@ -45,13 +48,32 @@ const props = defineProps({
   isValid: { type: [Boolean, null], required: false, default: null },
   disabled: { type: Boolean, required: false, default: false },
   readonly: { type: Boolean, required: false, default: false },
-  error: { type: Boolean, required: false, default: false },
+  error: { type: [String, Boolean], required: false, default: false },
   inset: { type: Boolean, required: false, default: false },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
+  borderTop: { type: [Boolean, Number, String], required: false },
+  borderLeft: { type: [Boolean, Number, String], required: false },
+  borderBottom: { type: [Boolean, Number, String], required: false },
+  borderRight: { type: [Boolean, Number, String], required: false },
+  borderBlock: { type: [Boolean, Number, String], required: false },
+  borderInline: { type: [Boolean, Number, String], required: false },
+  borderColor: { type: String, required: false },
+  borderStyle: { type: String, required: false },
+  borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
+  roundedTopRight: { type: [Boolean, Number, String], required: false },
+  roundedTopLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  elevation: { type: [Number, String], required: false }
 });
 const emits = defineEmits(["click", "update:modelValue"]);
 defineSlots();
@@ -62,6 +84,9 @@ const trackBgColor = computed(() => {
   return props.bgColor;
 });
 const { backgroundColorStyles } = useBackgroundColor(trackBgColor);
+const { borderClasses, borderStyles } = useBorder(props);
+const { roundedClasses, roundedStyles } = useRounded(props);
+const { elevationClasses, elevationStyles } = useElevation(props);
 const slotProps = computed(() => ({
   model: props.modelValue,
   isValid: props.isValid
@@ -75,6 +100,9 @@ const handleClick = (e) => {
 const switchTrackStyles = computed(() => {
   return [
     backgroundColorStyles.value,
+    borderStyles.value,
+    roundedStyles.value,
+    elevationStyles.value,
     props.style
   ];
 });
@@ -88,6 +116,9 @@ const switchTrackClasses = computed(() => {
       "origam-switch-track--error": props.error,
       "origam-switch-track--inset": props.inset
     },
+    borderClasses.value,
+    roundedClasses.value,
+    elevationClasses.value,
     props.class
   ];
 });
@@ -115,6 +146,8 @@ defineExpose({
 		border-radius: var(--origam-switch__track---border-radius, 9999px);
 		height: var(--origam-switch__track---height, 14px);
 		min-width: var(--origam-switch__track---width, 36px);
+		backdrop-filter: var(--origam-switch__track---backdrop-filter, none);
+		-webkit-backdrop-filter: var(--origam-switch__track---backdrop-filter, none);
 		cursor: pointer;
 		transition: 0.2s background-color cubic-bezier(0.4, 0, 0.2, 1);
 		overflow: hidden;

package/dist/src/components/Table/OrigamTable.vue

@@ -1,6 +1,6 @@
 <template>
 	<component
-			:is="tag"
+			:is="props.tag"
 			:class="tableClasses"
 			:style="tableStyles"
 			@mouseenter="onMouseenter"
@@ -31,6 +31,7 @@
 <script lang="ts" setup>
 import { computed, StyleValue, useSlots } from "vue";
 import {
+  useDefaults,
   useDensity,
   useDimension,
   useHover,
@@ -40,7 +41,7 @@ import {
   useTypography
 } from "../../composables";
 import { DENSITY } from "../../enums";
-const props = defineProps({
+const _props = defineProps({
   fixedHeader: { type: Boolean, required: false },
   fixedFooter: { type: Boolean, required: false },
   caption: { type: String, required: false },
@@ -97,6 +98,7 @@ const props = defineProps({
   lineHeight: { type: String, required: false },
   letterSpacing: { type: String, required: false }
 });
+const props = useDefaults(_props);
 const { filterProps } = useProps(props);
 const slots = useSlots();
 const { densityClasses } = useDensity(props);

package/dist/src/components/Tabs/OrigamTabs.vue

@@ -22,6 +22,7 @@
 import { computed, ref, StyleValue } from "vue";
 import { OrigamDefaultsProvider } from "../../components";
 import {
+  useDefaults,
   useDensity,
   useGroup,
   useProps,
@@ -30,7 +31,7 @@ import {
 } from "../../composables";
 import { ORIGAM_TABS_KEY } from "../../consts";
 import { DENSITY, DIRECTION, TAB_VARIANT } from "../../enums";
-const props = defineProps({
+const _props = defineProps({
   tag: { type: String, required: false, default: "div" },
   variant: { type: null, required: false, default: TAB_VARIANT.DEFAULT },
   fixed: { type: Boolean, required: false, default: false },
@@ -54,6 +55,7 @@ const props = defineProps({
   max: { type: Number, required: false },
   selectedClass: { type: String, required: false, default: "origam-tab--active" }
 });
+const props = useDefaults(_props);
 defineEmits(["update:modelValue"]);
 const { filterProps } = useProps(props);
 const { isSelected, select, next, prev, selected, items } = useGroup(props, ORIGAM_TABS_KEY);

package/dist/src/components/Tooltip/OrigamTooltip.vue

@@ -165,6 +165,8 @@ defineExpose(forwardRefs({
 	.origam-tooltip__content {
 		background-color: var(--origam-tooltip---background-color, var(--origam-color__neutral---800));
 		color: var(--origam-tooltip---color, var(--origam-color__text---inverse));
+		backdrop-filter: var(--origam-tooltip---backdrop-filter, none);
+		-webkit-backdrop-filter: var(--origam-tooltip---backdrop-filter, none);
 		font-size: var(--origam-tooltip---font-size, 0.75rem);
 		font-weight: var(--origam-tooltip---font-weight, 500);
 		line-height: var(--origam-tooltip---line-height, 1.5);

package/dist/src/composables/Commons/defaults.composable.cjs

@@ -6,24 +6,28 @@ Object.defineProperty(exports, "__esModule", {
 exports.createDefaults = createDefaults;
 exports.provideDefaults = provideDefaults;
 exports.useDefaults = useDefaults;
+exports.usePassedProps = usePassedProps;
 var _vue = require("vue");
 var _consts = require("../../consts/index.cjs");
 var _utils = require("../../utils/index.cjs");
 function camelize(str) {
   return str.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
 }
-function useDefaults(props, name = (0, _utils.getCurrentInstanceName)()) {
-  const defaults = (0, _vue.inject)(_consts.ORIGAM_DEFAULTS_KEY, (0, _vue.ref)({}));
-  const vm = (0, _utils.getCurrentInstance)("useDefaults");
-  const propNames = Object.keys(props);
-  if (!propNames.length) return props;
-  const wasPropPassed = key => {
+function usePassedProps(_props, instanceLabel = "usePassedProps") {
+  const vm = (0, _utils.getCurrentInstance)(instanceLabel);
+  return key => {
     const vnodeProps = vm.vnode.props || {};
     for (const k in vnodeProps) {
       if (k === key || camelize(k) === key) return true;
     }
     return false;
   };
+}
+function useDefaults(props, name = (0, _utils.getCurrentInstanceName)()) {
+  const defaults = (0, _vue.inject)(_consts.ORIGAM_DEFAULTS_KEY, (0, _vue.ref)({}));
+  const propNames = Object.keys(props);
+  if (!propNames.length) return props;
+  const wasPropPassed = usePassedProps(props, "useDefaults");
   const result = {};
   for (const key of propNames) {
     const c = (0, _vue.computed)(() => {

package/dist/src/composables/Commons/defaults.composable.d.ts

@@ -1,5 +1,35 @@
 import { type Ref } from 'vue';
 import type { IDefault } from '../../interfaces';
+/**
+ * Was-prop-passed factory.
+ *
+ * @description
+ * Component-side primitive: for the CURRENT component instance, returns a
+ * predicate telling whether a given prop key was explicitly written by the
+ * parent template (`vnode.props`) — as opposed to resolved from a default
+ * (`withDefaults()`, or Vue's own boolean-prop coercion).
+ *
+ * This matters beyond `useDefaults()` itself: any component that FORWARDS
+ * its own props down to descendants as `<OrigamDefaultsProvider>` entries
+ * (e.g. `OrigamAvatarGroup` → `origam-avatar`, `OrigamBtnGroup` → `origam-btn`)
+ * must use this — not a plain `!== undefined` check — to decide whether to
+ * forward a value. Reason: Vue resolves an UNSET prop whose declared type
+ * *includes* `boolean` (e.g. `border?: boolean | string`, `rounded?: boolean
+ * | TRounded`) to the concrete value `false`, never to `undefined`. A naive
+ * `omitUndefined()` over the forwarded map therefore still ships an explicit
+ * `false` for `border`/`rounded` even when the consumer never set them,
+ * which then wins the `mergeDeep` against an ancestor/theme default (e.g.
+ * `origam-avatar: { border: true }`) — see #263.
+ *
+ * MUST be re-read on every resolution (not captured once), for the same
+ * reason `useDefaults()` re-reads it: a parent binding through a dynamic
+ * `v-bind` whose object starts empty (`childRef?.filterProps(...)` before
+ * mount) only fills `vnode.props` on a later render.
+ */
+/*********************************************************
+ * usePassedProps
+ ********************************************************/
+export declare function usePassedProps<T extends Record<string, any>>(_props: T, instanceLabel?: string): (key: Extract<keyof T, string> | string) => boolean;
 /**
  * Component-side hook: resolve `props` against the closest DefaultsProvider.
  *

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

@@ -4,18 +4,21 @@ import { getCurrentInstance, getCurrentInstanceName, mergeDeep } from "../../uti
 function camelize(str) {
   return str.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
 }
-export function useDefaults(props, name = getCurrentInstanceName()) {
-  const defaults = inject(ORIGAM_DEFAULTS_KEY, ref({}));
-  const vm = getCurrentInstance("useDefaults");
-  const propNames = Object.keys(props);
-  if (!propNames.length) return props;
-  const wasPropPassed = (key) => {
+export function usePassedProps(_props, instanceLabel = "usePassedProps") {
+  const vm = getCurrentInstance(instanceLabel);
+  return (key) => {
     const vnodeProps = vm.vnode.props || {};
     for (const k in vnodeProps) {
       if (k === key || camelize(k) === key) return true;
     }
     return false;
   };
+}
+export function useDefaults(props, name = getCurrentInstanceName()) {
+  const defaults = inject(ORIGAM_DEFAULTS_KEY, ref({}));
+  const propNames = Object.keys(props);
+  if (!propNames.length) return props;
+  const wasPropPassed = usePassedProps(props, "useDefaults");
   const result = {};
   for (const key of propNames) {
     const c = computed(() => {

package/dist/src/composables/Theme/theme.composable.cjs

@@ -10,30 +10,47 @@ exports.readPersistedMode = readPersistedMode;
 exports.readPersistedTheme = readPersistedTheme;
 exports.useTheme = useTheme;
 var _vue = require("vue");
-var _theme2 = require("../../consts/Theme/theme.const.cjs");
-let _theme = null;
-let _mode = null;
-let _systemPrefersDark = null;
-let _mediaInitDone = false;
+var _theme = require("../../consts/Theme/theme.const.cjs");
+const ORIGAM_THEME_SINGLETON_KEY = "__origamThemeSingleton__";
+const _serverSingleton = {
+  theme: null,
+  mode: null,
+  systemPrefersDark: null,
+  mediaInitDone: false
+};
+function themeSingleton() {
+  if (typeof window === "undefined") return _serverSingleton;
+  const globalScope = globalThis;
+  if (!globalScope[ORIGAM_THEME_SINGLETON_KEY]) {
+    globalScope[ORIGAM_THEME_SINGLETON_KEY] = {
+      theme: null,
+      mode: null,
+      systemPrefersDark: null,
+      mediaInitDone: false
+    };
+  }
+  return globalScope[ORIGAM_THEME_SINGLETON_KEY];
+}
 function ensureSystemPreference() {
-  if (_systemPrefersDark === null) {
-    _systemPrefersDark = (0, _vue.ref)(false);
+  const state = themeSingleton();
+  if (state.systemPrefersDark === null) {
+    state.systemPrefersDark = (0, _vue.ref)(false);
   }
-  if (_mediaInitDone || typeof window === "undefined" || typeof window.matchMedia !== "function") {
-    return _systemPrefersDark;
+  if (state.mediaInitDone || typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return state.systemPrefersDark;
   }
-  _mediaInitDone = true;
+  state.mediaInitDone = true;
   const mq = window.matchMedia("(prefers-color-scheme: dark)");
-  _systemPrefersDark.value = mq.matches;
+  state.systemPrefersDark.value = mq.matches;
   mq.addEventListener?.("change", e => {
-    if (_systemPrefersDark) _systemPrefersDark.value = e.matches;
+    if (state.systemPrefersDark) state.systemPrefersDark.value = e.matches;
   });
-  return _systemPrefersDark;
+  return state.systemPrefersDark;
 }
 function readPersisted() {
   if (typeof window === "undefined") return "auto";
   try {
-    const v = window.localStorage?.getItem(_theme2.ORIGAM_THEME_STORAGE_KEY);
+    const v = window.localStorage?.getItem(_theme.ORIGAM_THEME_STORAGE_KEY);
     if (v === "auto" || v === "light" || v === "dark") return v;
     if (v && typeof v === "string") return v;
   } catch {}
@@ -42,21 +59,21 @@ function readPersisted() {
 function writePersisted(theme) {
   if (typeof window === "undefined") return;
   try {
-    window.localStorage?.setItem(_theme2.ORIGAM_THEME_STORAGE_KEY, theme);
+    window.localStorage?.setItem(_theme.ORIGAM_THEME_STORAGE_KEY, theme);
   } catch {}
 }
 function applyToDocument(theme) {
   if (typeof document === "undefined") return;
   if (theme === "auto") {
-    document.documentElement.removeAttribute(_theme2.ORIGAM_THEME_ATTR);
+    document.documentElement.removeAttribute(_theme.ORIGAM_THEME_ATTR);
   } else {
-    document.documentElement.setAttribute(_theme2.ORIGAM_THEME_ATTR, theme);
+    document.documentElement.setAttribute(_theme.ORIGAM_THEME_ATTR, theme);
   }
 }
 function readPersistedModeValue() {
   if (typeof window === "undefined") return "auto";
   try {
-    const v = window.localStorage?.getItem(_theme2.ORIGAM_MODE_STORAGE_KEY);
+    const v = window.localStorage?.getItem(_theme.ORIGAM_MODE_STORAGE_KEY);
     if (v === "auto" || v === "light" || v === "dark") return v;
   } catch {}
   return "auto";
@@ -64,22 +81,23 @@ function readPersistedModeValue() {
 function writePersistedMode(mode) {
   if (typeof window === "undefined") return;
   try {
-    window.localStorage?.setItem(_theme2.ORIGAM_MODE_STORAGE_KEY, mode);
+    window.localStorage?.setItem(_theme.ORIGAM_MODE_STORAGE_KEY, mode);
   } catch {}
 }
 function applyModeToDocument(resolvedMode) {
   if (typeof document === "undefined") return;
-  document.documentElement.setAttribute(_theme2.ORIGAM_MODE_ATTR, resolvedMode);
+  document.documentElement.setAttribute(_theme.ORIGAM_MODE_ATTR, resolvedMode);
 }
 function useTheme() {
-  if (_theme === null) {
-    _theme = (0, _vue.ref)(readPersisted());
+  const state = themeSingleton();
+  if (state.theme === null) {
+    state.theme = (0, _vue.ref)(readPersisted());
   }
-  if (_mode === null) {
-    _mode = (0, _vue.ref)(readPersistedModeValue());
+  if (state.mode === null) {
+    state.mode = (0, _vue.ref)(readPersistedModeValue());
   }
-  const theme = _theme;
-  const mode = _mode;
+  const theme = state.theme;
+  const mode = state.mode;
   const systemPrefersDark = ensureSystemPreference();
   const resolved = (0, _vue.computed)(() => {
     if (theme.value === "auto") return systemPrefersDark.value ? "dark" : "light";
@@ -146,8 +164,9 @@ function readPersistedMode() {
   return readPersistedModeValue();
 }
 function _resetThemeForTesting() {
-  _theme = null;
-  _mode = null;
-  _systemPrefersDark = null;
-  _mediaInitDone = false;
+  const state = themeSingleton();
+  state.theme = null;
+  state.mode = null;
+  state.systemPrefersDark = null;
+  state.mediaInitDone = false;
 }