origam 2.6.2 → 2.7.0

package/dist/src/assets/css/tokens/dark.css

@@ -402,6 +402,7 @@
   --origam-badge--error---background-color: var(--origam-color__feedback--danger---bg);
   --origam-badge--error---color: var(--origam-color__feedback--danger---fg);
   --origam-alert---background-color: var(--origam-color__surface---disabled);
+  --origam-alert---backdrop-filter: none;
   --origam-alert---color: var(--origam-color__text---primary);
   --origam-alert---border-color: rgba(0, 0, 0, 0);
   --origam-alert---border-style: solid;
@@ -846,7 +847,9 @@
   --origam-field---border-radius: var(--origam-radius---sm);
   --origam-field---border-color: var(--origam-color__border---default);
   --origam-field---border-width: var(--origam-border__width---thin);
+  --origam-field---border-width-outlined: var(--origam-border__width---thin);
   --origam-field---border-opacity: 0.38;
+  --origam-field---border-opacity-outlined: 0.38;
   --origam-field---background-color: rgba(0, 0, 0, 0);
   --origam-field---color: var(--origam-color__text---primary);
   --origam-field---opacity-disabled: var(--origam-opacity---50);
@@ -3154,6 +3157,7 @@
     --origam-badge--error---background-color: var(--origam-color__feedback--danger---bg);
     --origam-badge--error---color: var(--origam-color__feedback--danger---fg);
     --origam-alert---background-color: var(--origam-color__surface---disabled);
+    --origam-alert---backdrop-filter: none;
     --origam-alert---color: var(--origam-color__text---primary);
     --origam-alert---border-color: rgba(0, 0, 0, 0);
     --origam-alert---border-style: solid;
@@ -3598,7 +3602,9 @@
     --origam-field---border-radius: var(--origam-radius---sm);
     --origam-field---border-color: var(--origam-color__border---default);
     --origam-field---border-width: var(--origam-border__width---thin);
+    --origam-field---border-width-outlined: var(--origam-border__width---thin);
     --origam-field---border-opacity: 0.38;
+    --origam-field---border-opacity-outlined: 0.38;
     --origam-field---background-color: rgba(0, 0, 0, 0);
     --origam-field---color: var(--origam-color__text---primary);
     --origam-field---opacity-disabled: var(--origam-opacity---50);

package/dist/src/assets/css/tokens/light.css

@@ -403,6 +403,7 @@
   --origam-badge--error---background-color: var(--origam-color__feedback--danger---bg);
   --origam-badge--error---color: var(--origam-color__feedback--danger---fg);
   --origam-alert---background-color: var(--origam-color__surface---disabled);
+  --origam-alert---backdrop-filter: none;
   --origam-alert---color: var(--origam-color__text---primary);
   --origam-alert---border-color: rgba(0, 0, 0, 0);
   --origam-alert---border-style: solid;
@@ -847,7 +848,9 @@
   --origam-field---border-radius: var(--origam-radius---sm);
   --origam-field---border-color: var(--origam-color__border---default);
   --origam-field---border-width: var(--origam-border__width---thin);
+  --origam-field---border-width-outlined: var(--origam-border__width---thin);
   --origam-field---border-opacity: 0.38;
+  --origam-field---border-opacity-outlined: 0.38;
   --origam-field---background-color: rgba(0, 0, 0, 0);
   --origam-field---color: var(--origam-color__text---primary);
   --origam-field---opacity-disabled: var(--origam-opacity---50);

package/dist/src/assets/scss/tokens/_dark.scss

@@ -402,6 +402,7 @@
   --origam-badge--error---background-color: var(--origam-color__feedback--danger---bg);
   --origam-badge--error---color: var(--origam-color__feedback--danger---fg);
   --origam-alert---background-color: var(--origam-color__surface---disabled);
+  --origam-alert---backdrop-filter: none;
   --origam-alert---color: var(--origam-color__text---primary);
   --origam-alert---border-color: rgba(0, 0, 0, 0);
   --origam-alert---border-style: solid;
@@ -846,7 +847,9 @@
   --origam-field---border-radius: var(--origam-radius---sm);
   --origam-field---border-color: var(--origam-color__border---default);
   --origam-field---border-width: var(--origam-border__width---thin);
+  --origam-field---border-width-outlined: var(--origam-border__width---thin);
   --origam-field---border-opacity: 0.38;
+  --origam-field---border-opacity-outlined: 0.38;
   --origam-field---background-color: rgba(0, 0, 0, 0);
   --origam-field---color: var(--origam-color__text---primary);
   --origam-field---opacity-disabled: var(--origam-opacity---50);

package/dist/src/assets/scss/tokens/_light.scss

@@ -403,6 +403,7 @@
   --origam-badge--error---background-color: var(--origam-color__feedback--danger---bg);
   --origam-badge--error---color: var(--origam-color__feedback--danger---fg);
   --origam-alert---background-color: var(--origam-color__surface---disabled);
+  --origam-alert---backdrop-filter: none;
   --origam-alert---color: var(--origam-color__text---primary);
   --origam-alert---border-color: rgba(0, 0, 0, 0);
   --origam-alert---border-style: solid;
@@ -847,7 +848,9 @@
   --origam-field---border-radius: var(--origam-radius---sm);
   --origam-field---border-color: var(--origam-color__border---default);
   --origam-field---border-width: var(--origam-border__width---thin);
+  --origam-field---border-width-outlined: var(--origam-border__width---thin);
   --origam-field---border-opacity: 0.38;
+  --origam-field---border-opacity-outlined: 0.38;
   --origam-field---background-color: rgba(0, 0, 0, 0);
   --origam-field---color: var(--origam-color__text---primary);
   --origam-field---opacity-disabled: var(--origam-opacity---50);

package/dist/src/components/Alert/OrigamAlert.vue

@@ -309,6 +309,11 @@ defineExpose({
 		background-color: var(--origam-alert---background-color);
 		color: var(--origam-alert---color);
 
+		@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
+			backdrop-filter: var(--origam-alert---backdrop-filter, none);
+			-webkit-backdrop-filter: var(--origam-alert---backdrop-filter, none);
+		}
+
 		&--elevated {
 			box-shadow: var(--origam-alert---box-shadow-elevated, var(--origam-shadow---md));
 		}

package/dist/src/components/Btn/OrigamBtnGroup.vue

@@ -251,17 +251,6 @@ defineExpose({
 	:root {
 		--origam-btn-group---density: 0;
 
-		/*
-		 * Border-radius, border-width and border-color deliberately fall back to
-		 * the matching --origam-btn---* variables so that any theme that overrides
-		 * the btn tokens (radius, border) is automatically reflected on the group
-		 * container — no per-theme duplication required.
-		 *
-		 * Token resolution chain:
-		 *   theme override of --origam-btn---border-radius
-		 *     → picked up here as --origam-btn-group---border-radius
-		 *       → used in .origam-btn-group { border-radius: … }
-		 */
 		--origam-btn-group---border-radius: var(--origam-btn---border-radius, 4px);
 		--origam-btn-group---border-width: var(--origam-btn---border-width, 0);
 		--origam-btn-group---border-style: var(--origam-btn---border-style, solid);

package/dist/src/components/Field/OrigamField.vue

@@ -912,8 +912,8 @@ defineExpose({
 			}
 
 			&-outlined {
-				--origam-field---border-width: 1px;
-				--origam-field---border-opacity: .38;
+				--origam-field---border-width: var(--origam-field---border-width-outlined, 1px);
+				--origam-field---border-opacity: var(--origam-field---border-opacity-outlined, .38);
 				background: var(--origam-field---background-color, transparent);
 
 				#{$this}__outline {

package/dist/src/components/Pagination/OrigamPagination.vue

@@ -178,7 +178,7 @@
 import { ComponentPublicInstance, computed, nextTick, ref, shallowRef, StyleValue } from "vue";
 import { OrigamBtn } from "../../components";
 import { useDensity, useDisplay, useLocale, useProps, useRefs, useResizeObserver, useSize, useTypography, useVModel, useStyle } from "../../composables";
-import { KEYBOARD_VALUES, MDI_ICONS } from "../../enums";
+import { KEYBOARD_VALUES, MDI_ICONS, VARIANT } from "../../enums";
 import { createRange, int } from "../../utils";
 const props = defineProps({
   start: { type: Number, required: false, default: 1 },
@@ -311,6 +311,12 @@ const range = computed(() => {
 const sharedBtnColorProps = computed(() => {
   const baseBg = props.bgColor || props.color;
   return {
+    // In colored mode force `flat` so the btn actually PAINTS the
+    // pagination-driven `--origam-btn---background-color`. The theme's
+    // default `text` variant sets `background-color: transparent
+    // !important`, which would otherwise swallow the colored fill. When
+    // no color is set, leave `variant` undefined → the neutral text look.
+    variant: baseBg ? VARIANT.FLAT : void 0,
     color: props.color,
     bgColor: baseBg,
     hoverColor: props.hoverColor,

package/dist/src/components/ThemeProvider/OrigamThemeProvider.vue

@@ -10,7 +10,9 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, useAttrs } from "vue";
+import { computed, inject, ref, useAttrs } from "vue";
+import { provideDefaults } from "../../composables";
+import { ORIGAM_DEFAULTS_KEY, ORIGAM_THEME_DEFAULTS_KEY } from "../../consts";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   theme: { type: [String, Object], required: false, default: "auto" },
@@ -23,6 +25,14 @@ const dataMode = computed(() => props.mode === "auto" ? void 0 : props.mode);
 const themeProviderClasses = computed(() => {
   return ["origam-theme-provider", attrs.class];
 });
+const resolveThemeDefaults = inject(ORIGAM_THEME_DEFAULTS_KEY, null);
+const parentDefaults = inject(ORIGAM_DEFAULTS_KEY, ref({}));
+const scopedDefaults = computed(() => {
+  if (props.theme === "auto" || !resolveThemeDefaults) return parentDefaults.value;
+  const mode = props.mode === "auto" ? void 0 : props.mode;
+  return resolveThemeDefaults(props.theme, mode);
+});
+provideDefaults(scopedDefaults, { scoped: true });
 </script>
 
 <style lang="scss" scoped>

package/dist/src/composables/Code/code.composable.cjs

@@ -9,8 +9,13 @@ var _code = require("../../consts/Code/code.const.cjs");
 var _enums = require("../../enums/index.cjs");
 let _highlighterPromise = null;
 let _highlighterReady = false;
+let _highlighterUnavailable = false;
+let _unavailableWarned = false;
 const _cache = /* @__PURE__ */new Map();
 let _unsupportedLangWarned = /* @__PURE__ */new Set();
+function escapeHtml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
 function makeCacheKey(code, lang) {
   return `${lang}::${code}`;
 }
@@ -29,6 +34,7 @@ function lruSet(key, value) {
   _cache.set(key, value);
 }
 async function loadHighlighter() {
+  if (_highlighterUnavailable) return null;
   if (_highlighterPromise) return _highlighterPromise;
   _highlighterPromise = (async () => {
     const shiki = await Promise.resolve().then(() => require("shiki"));
@@ -39,7 +45,15 @@ async function loadHighlighter() {
     _highlighterReady = true;
     return highlighter;
   })();
-  return _highlighterPromise;
+  return _highlighterPromise.catch(err => {
+    _highlighterUnavailable = true;
+    _highlighterPromise = null;
+    if (!_unavailableWarned) {
+      _unavailableWarned = true;
+      console.warn("[origam] OrigamCode: `shiki` is not installed \u2014 rendering plain, unhighlighted code. Add `shiki` to your dependencies to enable syntax highlighting.", err);
+    }
+    return null;
+  });
 }
 function resolveLang(lang) {
   if (_code.SUPPORTED_LANGS.includes(lang)) return lang;
@@ -56,6 +70,11 @@ function useCode() {
     const cached = lruGet(key);
     if (cached !== void 0) return cached;
     const highlighter = await loadHighlighter();
+    if (!highlighter) {
+      const plain = escapeHtml(code);
+      lruSet(key, plain);
+      return plain;
+    }
     const opts = {
       lang: resolvedLang,
       themes: {
@@ -97,6 +116,8 @@ function useCode() {
 function resetCodeHighlighterForTesting() {
   _highlighterPromise = null;
   _highlighterReady = false;
+  _highlighterUnavailable = false;
+  _unavailableWarned = false;
   _cache.clear();
   _unsupportedLangWarned = /* @__PURE__ */new Set();
 }

package/dist/src/composables/Code/code.composable.js

@@ -2,8 +2,13 @@ import { CODE_CACHE_MAX_ENTRIES, CODE_DARK_THEME as DARK_THEME, CODE_LIGHT_THEME
 import { CODE_LANG } from "../../enums/index.js";
 let _highlighterPromise = null;
 let _highlighterReady = false;
+let _highlighterUnavailable = false;
+let _unavailableWarned = false;
 const _cache = /* @__PURE__ */ new Map();
 let _unsupportedLangWarned = /* @__PURE__ */ new Set();
+function escapeHtml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
 function makeCacheKey(code, lang) {
   return `${lang}::${code}`;
 }
@@ -22,6 +27,7 @@ function lruSet(key, value) {
   _cache.set(key, value);
 }
 async function loadHighlighter() {
+  if (_highlighterUnavailable) return null;
   if (_highlighterPromise) return _highlighterPromise;
   _highlighterPromise = (async () => {
     const shiki = await import(
@@ -35,7 +41,18 @@ async function loadHighlighter() {
     _highlighterReady = true;
     return highlighter;
   })();
-  return _highlighterPromise;
+  return _highlighterPromise.catch((err) => {
+    _highlighterUnavailable = true;
+    _highlighterPromise = null;
+    if (!_unavailableWarned) {
+      _unavailableWarned = true;
+      console.warn(
+        "[origam] OrigamCode: `shiki` is not installed \u2014 rendering plain, unhighlighted code. Add `shiki` to your dependencies to enable syntax highlighting.",
+        err
+      );
+    }
+    return null;
+  });
 }
 function resolveLang(lang) {
   if (SUPPORTED_LANGS.includes(lang)) return lang;
@@ -54,6 +71,11 @@ export function useCode() {
     const cached = lruGet(key);
     if (cached !== void 0) return cached;
     const highlighter = await loadHighlighter();
+    if (!highlighter) {
+      const plain = escapeHtml(code);
+      lruSet(key, plain);
+      return plain;
+    }
     const opts = {
       lang: resolvedLang,
       themes: { light: LIGHT_THEME, dark: DARK_THEME },
@@ -84,6 +106,8 @@ export function useCode() {
 export function resetCodeHighlighterForTesting() {
   _highlighterPromise = null;
   _highlighterReady = false;
+  _highlighterUnavailable = false;
+  _unavailableWarned = false;
   _cache.clear();
   _unsupportedLangWarned = /* @__PURE__ */ new Set();
 }

package/dist/src/consts/Theme/theme.const.cjs

@@ -3,11 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ORIGAM_THEME_STORAGE_KEY = exports.ORIGAM_THEME_LIGHT = exports.ORIGAM_THEME_DARK = exports.ORIGAM_THEME_AUTO = exports.ORIGAM_THEME_ATTR = exports.ORIGAM_THEMES_KEY = exports.ORIGAM_NUXT_DEFAULT_THEMES = exports.ORIGAM_NUXT_DEFAULT_THEME = exports.ORIGAM_NUXT_DEFAULT_PREFIX = exports.ORIGAM_NUXT_DEFAULT_MODE_COOKIE_NAME = exports.ORIGAM_NUXT_DEFAULT_MODES = exports.ORIGAM_NUXT_DEFAULT_MODE = exports.ORIGAM_NUXT_DEFAULT_COOKIE_NAME = exports.ORIGAM_NUXT_DEFAULT_COOKIE_MAX_AGE = exports.ORIGAM_MODE_STORAGE_KEY = exports.ORIGAM_MODE_LIGHT = exports.ORIGAM_MODE_DARK = exports.ORIGAM_MODE_AUTO = exports.ORIGAM_MODE_ATTR = void 0;
+exports.ORIGAM_THEME_STORAGE_KEY = exports.ORIGAM_THEME_LIGHT = exports.ORIGAM_THEME_DEFAULTS_KEY = exports.ORIGAM_THEME_DARK = exports.ORIGAM_THEME_AUTO = exports.ORIGAM_THEME_ATTR = exports.ORIGAM_THEMES_KEY = exports.ORIGAM_NUXT_DEFAULT_THEMES = exports.ORIGAM_NUXT_DEFAULT_THEME = exports.ORIGAM_NUXT_DEFAULT_PREFIX = exports.ORIGAM_NUXT_DEFAULT_MODE_COOKIE_NAME = exports.ORIGAM_NUXT_DEFAULT_MODES = exports.ORIGAM_NUXT_DEFAULT_MODE = exports.ORIGAM_NUXT_DEFAULT_COOKIE_NAME = exports.ORIGAM_NUXT_DEFAULT_COOKIE_MAX_AGE = exports.ORIGAM_MODE_STORAGE_KEY = exports.ORIGAM_MODE_LIGHT = exports.ORIGAM_MODE_DARK = exports.ORIGAM_MODE_AUTO = exports.ORIGAM_MODE_ATTR = void 0;
 const ORIGAM_THEME_AUTO = exports.ORIGAM_THEME_AUTO = "auto";
 const ORIGAM_THEME_LIGHT = exports.ORIGAM_THEME_LIGHT = "light";
 const ORIGAM_THEME_DARK = exports.ORIGAM_THEME_DARK = "dark";
 const ORIGAM_THEMES_KEY = exports.ORIGAM_THEMES_KEY = Symbol.for("origam:themes");
+const ORIGAM_THEME_DEFAULTS_KEY = exports.ORIGAM_THEME_DEFAULTS_KEY = Symbol.for("origam:theme-defaults");
 const ORIGAM_THEME_STORAGE_KEY = exports.ORIGAM_THEME_STORAGE_KEY = "origam-theme";
 const ORIGAM_THEME_ATTR = exports.ORIGAM_THEME_ATTR = "data-theme";
 const ORIGAM_MODE_AUTO = exports.ORIGAM_MODE_AUTO = "auto";

package/dist/src/consts/Theme/theme.const.d.ts

@@ -1,5 +1,6 @@
 import type { InjectionKey } from 'vue';
-import type { TInstalledThemes } from '../../types';
+import type { IDefault } from '../../interfaces';
+import type { TInstalledThemes, TModeResolved } from '../../types';
 export declare const ORIGAM_THEME_AUTO = "auto";
 export declare const ORIGAM_THEME_LIGHT = "light";
 export declare const ORIGAM_THEME_DARK = "dark";
@@ -8,6 +9,18 @@ export declare const ORIGAM_THEME_DARK = "dark";
  * `createOrigam({ themes })`. Read it through `useInstalledThemes()`.
  */
 export declare const ORIGAM_THEMES_KEY: InjectionKey<TInstalledThemes>;
+/**
+ * App-level provide key carrying a resolver that collapses the per-component
+ * DEFAULT PROPS (`theme.components`) for a given brand×mode into a single
+ * `IDefault` (baseline `origam` ⊕ the named brand, in install order).
+ *
+ * `createOrigam` provides the closure over the full install list;
+ * `<OrigamThemeProvider theme="<brand>">` injects it to re-apply that brand's
+ * default props to its SUB-TREE (via `provideDefaults`), so props-first theming
+ * works in a scoped sub-tree exactly as it does at the document root — not just
+ * the CSS-variable re-scoping done by `data-theme`.
+ */
+export declare const ORIGAM_THEME_DEFAULTS_KEY: InjectionKey<(brand: string, mode?: TModeResolved) => IDefault>;
 export declare const ORIGAM_THEME_STORAGE_KEY = "origam-theme";
 export declare const ORIGAM_THEME_ATTR = "data-theme";
 export declare const ORIGAM_MODE_AUTO = "auto";

package/dist/src/consts/Theme/theme.const.js

@@ -2,6 +2,7 @@ export const ORIGAM_THEME_AUTO = "auto";
 export const ORIGAM_THEME_LIGHT = "light";
 export const ORIGAM_THEME_DARK = "dark";
 export const ORIGAM_THEMES_KEY = Symbol.for("origam:themes");
+export const ORIGAM_THEME_DEFAULTS_KEY = Symbol.for("origam:theme-defaults");
 export const ORIGAM_THEME_STORAGE_KEY = "origam-theme";
 export const ORIGAM_THEME_ATTR = "data-theme";
 export const ORIGAM_MODE_AUTO = "auto";

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

@@ -1,6 +1,5 @@
 import type { IActiveState, IAdjacentEmits, IAdjacentProps, IBorderProps, IBgColorProps, IColorProps, ICommonsComponentProps, IDensityProps, IDimensionProps, IElevationProps, IGroupEmits, IGroupItemProps, IHoverProps, ILinkProps, ILoaderProps, ILocationProps, IMarginProps, IPaddingProps, IPositionProps, IRippleProps, IRoundedProps, ISizeProps, ITagProps, ITypographyProps, IVariantProps } from '../../interfaces';
-import type { TIcon } from '../../types';
-import type { TStatus, TStatusPosition } from '../../types';
+import type { TIcon, TStatus, TStatusPosition } from '../../types';
 /** Btn needs `status` / `statusIconPosition` from IStatusProps but its own
  *  `icon` prop accepts `boolean | TIcon` (boolean = icon-only mode) which is
  *  wider than `IIconProps.icon?: TIcon`.  Pulling the two status props in

package/dist/src/interfaces/Checkbox/checkbox.interface.d.ts

@@ -11,7 +11,7 @@ export interface ICheckboxSlots {
         messagesId?: string;
         isDisabled?: boolean;
         isReadonly?: boolean;
-        isValid?: boolean | undefined;
+        isValid?: boolean;
     }) => any;
     label?: () => any;
     input?: (data: {

package/dist/src/interfaces/DatePicker/date-picker-header.interface.d.ts

@@ -7,6 +7,4 @@ export interface IDatePickerHeaderProps extends ICommonsComponentProps, IColorPr
 /** Emits fired by `<OrigamDatePickerHeader>` — click on the header text.
  *  `event` is optional: the handler calls `emits('click')` without forwarding
  *  the originating MouseEvent. */
-export interface IDatePickerHeaderEmits {
-    (e: 'click', event?: MouseEvent): void;
-}
+export type IDatePickerHeaderEmits = (e: 'click', event?: MouseEvent) => void;

package/dist/src/origam.cjs

@@ -67,6 +67,7 @@ function createOrigam(origam = {}) {
       app.provide(_consts.ORIGAM_GO_TO_KEY, goTo);
       app.provide(_consts.ORIGAM_THEMES_KEY, installedThemes);
       app.provide(_consts.ORIGAM_DEFAULTS_KEY, defaultsRef);
+      app.provide(_consts.ORIGAM_THEME_DEFAULTS_KEY, (brand, mode) => activeDefaultsFor(allThemes, brand, mode));
       if (_consts.IN_BROWSER && options.ssr) {
         if (app.$nuxt) {
           app.$nuxt.hook("app:suspense:resolve", () => {

package/dist/src/origam.js

@@ -9,6 +9,7 @@ import {
   ORIGAM_GO_TO_KEY,
   ORIGAM_ICONS_KEY,
   ORIGAM_LOCALE_KEY,
+  ORIGAM_THEME_DEFAULTS_KEY,
   ORIGAM_THEMES_KEY
 } from "./consts/index.js";
 import * as origamDirectives from "./directives/index.js";
@@ -68,6 +69,7 @@ export function createOrigam(origam = {}) {
       app.provide(ORIGAM_GO_TO_KEY, goTo);
       app.provide(ORIGAM_THEMES_KEY, installedThemes);
       app.provide(ORIGAM_DEFAULTS_KEY, defaultsRef);
+      app.provide(ORIGAM_THEME_DEFAULTS_KEY, (brand, mode) => activeDefaultsFor(allThemes, brand, mode));
       if (IN_BROWSER && options.ssr) {
         if (app.$nuxt) {
           app.$nuxt.hook("app:suspense:resolve", () => {