origam 2.8.1 → 2.10.0

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;
 }

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" },