origam 2.8.0 → 2.9.0

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

@@ -5,24 +5,41 @@ import {
   ORIGAM_THEME_ATTR as ATTR,
   ORIGAM_THEME_STORAGE_KEY as STORAGE_KEY
 } from "../../consts/Theme/theme.const.js";
-let _theme = null;
-let _mode = null;
-let _systemPrefersDark = null;
-let _mediaInitDone = false;
+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 = ref(false);
+  const state = themeSingleton();
+  if (state.systemPrefersDark === null) {
+    state.systemPrefersDark = 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";
@@ -70,14 +87,15 @@ function applyModeToDocument(resolvedMode) {
   document.documentElement.setAttribute(MODE_ATTR, resolvedMode);
 }
 export function useTheme() {
-  if (_theme === null) {
-    _theme = ref(readPersisted());
+  const state = themeSingleton();
+  if (state.theme === null) {
+    state.theme = ref(readPersisted());
   }
-  if (_mode === null) {
-    _mode = ref(readPersistedModeValue());
+  if (state.mode === null) {
+    state.mode = ref(readPersistedModeValue());
   }
-  const theme = _theme;
-  const mode = _mode;
+  const theme = state.theme;
+  const mode = state.mode;
   const systemPrefersDark = ensureSystemPreference();
   const resolved = computed(() => {
     if (theme.value === "auto") return systemPrefersDark.value ? "dark" : "light";
@@ -140,8 +158,9 @@ export function readPersistedMode() {
   return readPersistedModeValue();
 }
 export 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;
 }

package/dist/src/interfaces/App/app.interface.d.ts

@@ -14,7 +14,7 @@ import type { IBgColorProps, IColorProps, ICommonsComponentEmits, ICommonsCompon
  * cascades to descendants through normal CSS inheritance.
  */
 export interface IAppProps extends ICommonsComponentProps, IColorProps, IBgColorProps {
-    /** Stretch the layout to the full viewport (`100vw` / `100vh`). Default `true`. */
+    /** Occupy at least the full viewport (`100vw` / `min-height: 100vh`) — content taller than one screen grows past it rather than clipping. Default `true`. */
     fullHeight?: boolean;
     /** IDs of layout items allowed to overlap each other (forwarded to the layout). */
     overlaps?: Array<string>;

package/dist/src/interfaces/Btn/btn-group.interface.d.ts

@@ -1,5 +1,5 @@
-import type { IActiveProps, IBorderProps, IBtnProps, IBgColorProps, IColorProps, ICommonsComponentProps, IDensityProps, IElevationProps, IHoverProps, IMarginProps, IPaddingProps, IRoundedProps, ITagProps } from '../../interfaces';
-export interface IBtnGroupProps extends ITagProps, ICommonsComponentProps, IRoundedProps, IBorderProps, IDensityProps, IElevationProps, IColorProps, IBgColorProps, IMarginProps, IPaddingProps, IHoverProps, IActiveProps {
+import type { IActiveProps, IBorderProps, IBtnProps, IBgColorProps, IColorProps, ICommonsComponentProps, IDensityProps, IElevationProps, IHoverProps, IMarginProps, IPaddingProps, IRoundedProps, ISizeProps, ITagProps, IVariantProps } from '../../interfaces';
+export interface IBtnGroupProps extends ITagProps, ICommonsComponentProps, IRoundedProps, IBorderProps, IDensityProps, IElevationProps, IColorProps, IBgColorProps, IMarginProps, IPaddingProps, IHoverProps, IActiveProps, IVariantProps, ISizeProps {
     divided?: boolean;
     items?: Array<IBtnProps>;
 }

package/dist/src/interfaces/Switch/switch-track.interface.d.ts

@@ -1,9 +1,10 @@
-import type { IBgColorProps, IColorProps, ICommonsComponentEmits, ICommonsComponentProps, ICommonsComponentSlots } from '../../interfaces';
+import type { IBgColorProps, IBorderProps, IColorProps, ICommonsComponentEmits, ICommonsComponentProps, ICommonsComponentSlots, IElevationProps, IRoundedProps } from '../../interfaces';
 /**
  * Props for `<OrigamSwitchTrack>` — the rounded "rail" sitting behind the
  * Switch thumb. The track owns its own visual surface (background, border,
- * inset variant, error state) and exposes slots for content shown on the
- * `true` (left) and `false` (right) sides of the rail.
+ * inset variant, error state, rounded/elevation identity) and exposes slots
+ * for content shown on the `true` (left) and `false` (right) sides of the
+ * rail.
  *
  * Color contract — strict channel separation:
  *  • `bgColor` paints the rail (the box behind the thumb).
@@ -11,8 +12,18 @@ import type { IBgColorProps, IColorProps, ICommonsComponentEmits, ICommonsCompon
  *              SelectionControl (it paints the thumb via `currentColor`,
  *              not the track) — exposed here so the slot content can
  *              react to it (e.g. an icon inside `track.true`).
+ *
+ * `border` / `rounded` / `elevation` (props-first, lot 4 theming fix):
+ * previously declared on `ISwitchProps` (inherited from the Commons
+ * interfaces) but never consumed anywhere — `OrigamSwitch.vue` accepted
+ * the props without a TS error yet silently dropped them, and the track
+ * (the actual visible rail) didn't even have them in its own interface.
+ * A theme could set `'origam-switch': { border: true, rounded: 'lg' }`
+ * and nothing would render differently. Declared here now because the
+ * track is the element that owns the visual surface these props target —
+ * `OrigamSwitch` forwards its own values down via `filterProps`.
  */
-export interface ISwitchTrackProps extends ICommonsComponentProps, IColorProps, IBgColorProps {
+export interface ISwitchTrackProps extends ICommonsComponentProps, IColorProps, IBgColorProps, IBorderProps, IRoundedProps, IElevationProps {
     /** Whether the switch is currently ON. Drives the `--dirty` modifier. */
     modelValue?: boolean;
     /** Validation state forwarded from the surrounding `<OrigamInput>`. */
@@ -21,8 +32,14 @@ export interface ISwitchTrackProps extends ICommonsComponentProps, IColorProps,
     disabled?: boolean;
     /** Readonly state — keeps appearance interactive but blocks input. */
     readonly?: boolean;
-    /** Error state — overrides the rail with the danger token. */
-    error?: boolean;
+    /**
+     * Error state — overrides the rail with the danger token. Same type
+     * as the Commons `IValidationProps.error` (`string | boolean` — a
+     * string is an error message, truthy either way) so a parent
+     * forwarding its own validation surface (OrigamSwitch) stays
+     * type-compatible. Consumed by truthiness only.
+     */
+    error?: string | boolean;
     /** Inset (Material) variant — taller, fully-rounded rail. */
     inset?: boolean;
 }

package/dist/src/themes/origam.theme.cjs

@@ -269,8 +269,7 @@ const origamLightTheme = exports.origamLightTheme = {
     },
     "origam-code": {
       tag: "figure",
-      rounded: "lg",
-      compact: true
+      rounded: "lg"
     },
     "origam-color-picker-field": {
       density: "default",
@@ -669,8 +668,7 @@ const origamDarkTheme = exports.origamDarkTheme = {
     },
     "origam-code": {
       tag: "figure",
-      rounded: "lg",
-      compact: true
+      rounded: "lg"
     },
     "origam-color-picker-field": {
       density: "default",

package/dist/src/themes/origam.theme.js

@@ -162,7 +162,7 @@ export const origamLightTheme = {
     "origam-checkbox": { density: "default" },
     "origam-chip": { size: "small", variant: "outlined", color: "primary", pill: true, border: true, borderColor: "var(--origam-color__action--primary---bg)" },
     "origam-clipboard": { tag: "span" },
-    "origam-code": { tag: "figure", rounded: "lg", compact: true },
+    "origam-code": { tag: "figure", rounded: "lg" },
     "origam-color-picker-field": { density: "default", border: true, rounded: true },
     "origam-confirm-wrapper": { density: "default" },
     "origam-contextual-menu": { location: "right" },
@@ -312,7 +312,7 @@ export const origamDarkTheme = {
     "origam-checkbox": { density: "default" },
     "origam-chip": { size: "small", variant: "outlined", color: "primary", pill: true, border: true, borderColor: "var(--origam-color__action--primary---bg)" },
     "origam-clipboard": { tag: "span" },
-    "origam-code": { tag: "figure", rounded: "lg", compact: true },
+    "origam-code": { tag: "figure", rounded: "lg" },
     "origam-color-picker-field": { density: "default", border: true, rounded: true },
     "origam-confirm-wrapper": { density: "default" },
     "origam-contextual-menu": { location: "right" },