origam 2.5.0 → 2.6.1

package/dist/src/consts/Icon/mdi.const.js

@@ -2,8 +2,16 @@ import { h } from "vue";
 import { OrigamClassIcon } from "../../components/index.js";
 import { MDI_ICONS } from "../../enums/index.js";
 export const MDI = {
-  // Not using mergeProps here, functional components merge props by default (?)
-  component: (props) => h(OrigamClassIcon, { ...props, class: "mdi" })
+  // The MDI font CSS exposes each glyph as `.mdi-<name>` (e.g. `.mdi-magnify`).
+  // Consumers may pass either the bare name (`magnify`) — as is the case when
+  // an `mdi:` prefix has been stripped by the icon resolver — or the already-
+  // prefixed form (`mdi-magnify`, as found in MDI_ALIASES below). We
+  // normalise to always emit the `mdi-` class so the font renders.
+  component: (props) => h(OrigamClassIcon, {
+    ...props,
+    icon: typeof props.icon === "string" && !props.icon.startsWith("mdi-") ? `mdi-${props.icon}` : props.icon,
+    class: "mdi"
+  })
 };
 export const MDI_ALIASES = {
   ...MDI_ICONS,

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

@@ -3,13 +3,23 @@
 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_NUXT_DEFAULT_THEMES = exports.ORIGAM_NUXT_DEFAULT_PREFIX = exports.ORIGAM_NUXT_DEFAULT_COOKIE_NAME = exports.ORIGAM_NUXT_DEFAULT_COOKIE_MAX_AGE = void 0;
+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;
 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_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";
+const ORIGAM_MODE_LIGHT = exports.ORIGAM_MODE_LIGHT = "light";
+const ORIGAM_MODE_DARK = exports.ORIGAM_MODE_DARK = "dark";
+const ORIGAM_MODE_STORAGE_KEY = exports.ORIGAM_MODE_STORAGE_KEY = "origam-mode";
+const ORIGAM_MODE_ATTR = exports.ORIGAM_MODE_ATTR = "data-mode";
 const ORIGAM_NUXT_DEFAULT_COOKIE_NAME = exports.ORIGAM_NUXT_DEFAULT_COOKIE_NAME = "origam-theme";
+const ORIGAM_NUXT_DEFAULT_MODE_COOKIE_NAME = exports.ORIGAM_NUXT_DEFAULT_MODE_COOKIE_NAME = "origam-mode";
 const ORIGAM_NUXT_DEFAULT_COOKIE_MAX_AGE = exports.ORIGAM_NUXT_DEFAULT_COOKIE_MAX_AGE = 60 * 60 * 24 * 365;
 const ORIGAM_NUXT_DEFAULT_THEMES = exports.ORIGAM_NUXT_DEFAULT_THEMES = ["light", "dark"];
+const ORIGAM_NUXT_DEFAULT_MODES = exports.ORIGAM_NUXT_DEFAULT_MODES = ["light", "dark"];
+const ORIGAM_NUXT_DEFAULT_THEME = exports.ORIGAM_NUXT_DEFAULT_THEME = "auto";
+const ORIGAM_NUXT_DEFAULT_MODE = exports.ORIGAM_NUXT_DEFAULT_MODE = "auto";
 const ORIGAM_NUXT_DEFAULT_PREFIX = exports.ORIGAM_NUXT_DEFAULT_PREFIX = "Origam";

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

@@ -1,9 +1,25 @@
+import type { InjectionKey } from 'vue';
+import type { TInstalledThemes } from '../../types';
 export declare const ORIGAM_THEME_AUTO = "auto";
 export declare const ORIGAM_THEME_LIGHT = "light";
 export declare const ORIGAM_THEME_DARK = "dark";
+/**
+ * App-level provide key carrying the list of brand themes installed via
+ * `createOrigam({ themes })`. Read it through `useInstalledThemes()`.
+ */
+export declare const ORIGAM_THEMES_KEY: InjectionKey<TInstalledThemes>;
 export declare const ORIGAM_THEME_STORAGE_KEY = "origam-theme";
 export declare const ORIGAM_THEME_ATTR = "data-theme";
+export declare const ORIGAM_MODE_AUTO = "auto";
+export declare const ORIGAM_MODE_LIGHT = "light";
+export declare const ORIGAM_MODE_DARK = "dark";
+export declare const ORIGAM_MODE_STORAGE_KEY = "origam-mode";
+export declare const ORIGAM_MODE_ATTR = "data-mode";
 export declare const ORIGAM_NUXT_DEFAULT_COOKIE_NAME = "origam-theme";
+export declare const ORIGAM_NUXT_DEFAULT_MODE_COOKIE_NAME = "origam-mode";
 export declare const ORIGAM_NUXT_DEFAULT_COOKIE_MAX_AGE: number;
 export declare const ORIGAM_NUXT_DEFAULT_THEMES: readonly ["light", "dark"];
+export declare const ORIGAM_NUXT_DEFAULT_MODES: readonly ["light", "dark"];
+export declare const ORIGAM_NUXT_DEFAULT_THEME = "auto";
+export declare const ORIGAM_NUXT_DEFAULT_MODE = "auto";
 export declare const ORIGAM_NUXT_DEFAULT_PREFIX = "Origam";

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

@@ -1,9 +1,19 @@
 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_STORAGE_KEY = "origam-theme";
 export const ORIGAM_THEME_ATTR = "data-theme";
+export const ORIGAM_MODE_AUTO = "auto";
+export const ORIGAM_MODE_LIGHT = "light";
+export const ORIGAM_MODE_DARK = "dark";
+export const ORIGAM_MODE_STORAGE_KEY = "origam-mode";
+export const ORIGAM_MODE_ATTR = "data-mode";
 export const ORIGAM_NUXT_DEFAULT_COOKIE_NAME = "origam-theme";
+export const ORIGAM_NUXT_DEFAULT_MODE_COOKIE_NAME = "origam-mode";
 export const ORIGAM_NUXT_DEFAULT_COOKIE_MAX_AGE = 60 * 60 * 24 * 365;
 export const ORIGAM_NUXT_DEFAULT_THEMES = ["light", "dark"];
+export const ORIGAM_NUXT_DEFAULT_MODES = ["light", "dark"];
+export const ORIGAM_NUXT_DEFAULT_THEME = "auto";
+export const ORIGAM_NUXT_DEFAULT_MODE = "auto";
 export const ORIGAM_NUXT_DEFAULT_PREFIX = "Origam";

package/dist/src/directives/Contrast/contrast.directive.cjs

@@ -0,0 +1,150 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.setContrastConfig = setContrastConfig;
+let config = {
+  enabled: true,
+  threshold: 4.5
+};
+function setContrastConfig(value) {
+  if (value === void 0) return;
+  if (typeof value === "boolean") {
+    config = {
+      enabled: value,
+      threshold: config.threshold
+    };
+    return;
+  }
+  config = {
+    enabled: value.enabled ?? true,
+    threshold: value.threshold ?? 4.5
+  };
+}
+let normCtx;
+function srgbToRgb(color) {
+  const m = color.match(/color\(\s*srgb\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s*\/\s*([\d.]+))?\s*\)/i);
+  if (!m) return null;
+  const ch = v => Math.round(Math.min(1, Math.max(0, parseFloat(v))) * 255);
+  const r = ch(m[1]),
+    g = ch(m[2]),
+    b = ch(m[3]);
+  const a = m[4] !== void 0 ? parseFloat(m[4]) : 1;
+  return a < 1 ? `rgba(${r}, ${g}, ${b}, ${a})` : `rgb(${r}, ${g}, ${b})`;
+}
+function toRgb(color) {
+  if (!color) return null;
+  const direct = srgbToRgb(color);
+  if (direct) return direct;
+  if (typeof document === "undefined") return color;
+  if (normCtx === void 0) normCtx = document.createElement("canvas").getContext("2d");
+  if (!normCtx) return color;
+  normCtx.fillStyle = "#000";
+  normCtx.fillStyle = color;
+  const onBlack = normCtx.fillStyle;
+  normCtx.fillStyle = "#fff";
+  normCtx.fillStyle = color;
+  const onWhite = normCtx.fillStyle;
+  if (onBlack !== onWhite) return null;
+  return srgbToRgb(onBlack) ?? onBlack;
+}
+function rgbaParts(rgb) {
+  if (!rgb) return null;
+  const m = rgb.match(/rgba?\(([^)]+)\)/i);
+  if (!m) return null;
+  const p = m[1].split(",").map(s => parseFloat(s.trim()));
+  if (p.length < 3 || p.slice(0, 3).some(Number.isNaN)) return null;
+  return {
+    r: p[0],
+    g: p[1],
+    b: p[2],
+    a: p[3] == null || Number.isNaN(p[3]) ? 1 : p[3]
+  };
+}
+function over(top, bottom) {
+  const a = top.a;
+  return {
+    r: top.r * a + bottom.r * (1 - a),
+    g: top.g * a + bottom.g * (1 - a),
+    b: top.b * a + bottom.b * (1 - a),
+    a: 1
+  };
+}
+function resolvePaintedBackground(el) {
+  const layers = [];
+  let node = el;
+  while (node) {
+    const parts = rgbaParts(toRgb(getComputedStyle(node).backgroundColor));
+    if (parts && parts.a > 0) {
+      layers.push(parts);
+      if (parts.a >= 1) break;
+    }
+    node = node.parentElement;
+  }
+  if (!layers.length) return null;
+  const deepest = layers[layers.length - 1];
+  let acc = deepest.a >= 1 ? layers.pop() : {
+    r: 255,
+    g: 255,
+    b: 255,
+    a: 1
+  };
+  for (let i = layers.length - 1; i >= 0; i -= 1) {
+    acc = over(layers[i], acc);
+  }
+  return `rgb(${Math.round(acc.r)}, ${Math.round(acc.g)}, ${Math.round(acc.b)})`;
+}
+function channelsOf(rgb) {
+  if (!rgb) return null;
+  const p = (rgb.match(/[\d.]+/g) ?? []).map(Number);
+  return p.length >= 3 && p.slice(0, 3).every(n => !Number.isNaN(n)) ? [p[0], p[1], p[2]] : null;
+}
+function relativeLuminance([r, g, b]) {
+  const channel = c => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
+}
+function wcagRatio(a, b) {
+  const la = relativeLuminance(a);
+  const lb = relativeLuminance(b);
+  return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
+}
+const WHITE = [255, 255, 255];
+const BLACK = [0, 0, 0];
+function enforceContrast(el, enabled) {
+  delete el.dataset.origamContrastFixed;
+  if (!enabled || typeof window === "undefined") return;
+  if (el.dataset.origamColorLocked === "true") return;
+  const bg = channelsOf(resolvePaintedBackground(el));
+  if (!bg) return;
+  const fg = channelsOf(toRgb(getComputedStyle(el).color));
+  if (!fg) return;
+  const ratio = wcagRatio(fg, bg);
+  if (ratio >= config.threshold) return;
+  const better = wcagRatio(WHITE, bg) >= wcagRatio(BLACK, bg) ? "#fff" : "#000";
+  el.style.setProperty("color", better, "important");
+  el.dataset.origamContrastFixed = "true";
+  console.warn(`[origam] Low text contrast (${ratio.toFixed(2)}:1 < ${config.threshold}:1): text rgb(${fg.join(", ")}) on background rgb(${bg.join(", ")}). Overriding text colour to ${better} for legibility. Disable with createOrigam({ contrast: false }).`, el);
+}
+const SETTLE_MS = 250;
+function schedule(el, enabled) {
+  if (typeof requestAnimationFrame !== "undefined") {
+    requestAnimationFrame(() => enforceContrast(el, enabled));
+  }
+  if (typeof setTimeout !== "undefined") {
+    setTimeout(() => enforceContrast(el, enabled), SETTLE_MS);
+  }
+}
+const vContrast = {
+  mounted(el, binding) {
+    schedule(el, config.enabled && binding.value !== false);
+  },
+  updated(el, binding) {
+    schedule(el, config.enabled && binding.value !== false);
+  }
+};
+module.exports = vContrast;

package/dist/src/directives/Contrast/contrast.directive.d.ts

@@ -0,0 +1,5 @@
+import type { Directive } from 'vue';
+import type { IContrastOptions } from '../../interfaces';
+export declare function setContrastConfig(value: boolean | IContrastOptions | undefined): void;
+declare const vContrast: Directive<HTMLElement, boolean | undefined>;
+export default vContrast;

package/dist/src/directives/Contrast/contrast.directive.js

@@ -0,0 +1,131 @@
+let config = {
+  enabled: true,
+  threshold: 4.5
+};
+export function setContrastConfig(value) {
+  if (value === void 0) return;
+  if (typeof value === "boolean") {
+    config = { enabled: value, threshold: config.threshold };
+    return;
+  }
+  config = {
+    enabled: value.enabled ?? true,
+    threshold: value.threshold ?? 4.5
+  };
+}
+let normCtx;
+function srgbToRgb(color) {
+  const m = color.match(/color\(\s*srgb\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s*\/\s*([\d.]+))?\s*\)/i);
+  if (!m) return null;
+  const ch = (v) => Math.round(Math.min(1, Math.max(0, parseFloat(v))) * 255);
+  const r = ch(m[1]), g = ch(m[2]), b = ch(m[3]);
+  const a = m[4] !== void 0 ? parseFloat(m[4]) : 1;
+  return a < 1 ? `rgba(${r}, ${g}, ${b}, ${a})` : `rgb(${r}, ${g}, ${b})`;
+}
+function toRgb(color) {
+  if (!color) return null;
+  const direct = srgbToRgb(color);
+  if (direct) return direct;
+  if (typeof document === "undefined") return color;
+  if (normCtx === void 0) normCtx = document.createElement("canvas").getContext("2d");
+  if (!normCtx) return color;
+  normCtx.fillStyle = "#000";
+  normCtx.fillStyle = color;
+  const onBlack = normCtx.fillStyle;
+  normCtx.fillStyle = "#fff";
+  normCtx.fillStyle = color;
+  const onWhite = normCtx.fillStyle;
+  if (onBlack !== onWhite) return null;
+  return srgbToRgb(onBlack) ?? onBlack;
+}
+function rgbaParts(rgb) {
+  if (!rgb) return null;
+  const m = rgb.match(/rgba?\(([^)]+)\)/i);
+  if (!m) return null;
+  const p = m[1].split(",").map((s) => parseFloat(s.trim()));
+  if (p.length < 3 || p.slice(0, 3).some(Number.isNaN)) return null;
+  return { r: p[0], g: p[1], b: p[2], a: p[3] == null || Number.isNaN(p[3]) ? 1 : p[3] };
+}
+function over(top, bottom) {
+  const a = top.a;
+  return {
+    r: top.r * a + bottom.r * (1 - a),
+    g: top.g * a + bottom.g * (1 - a),
+    b: top.b * a + bottom.b * (1 - a),
+    a: 1
+  };
+}
+function resolvePaintedBackground(el) {
+  const layers = [];
+  let node = el;
+  while (node) {
+    const parts = rgbaParts(toRgb(getComputedStyle(node).backgroundColor));
+    if (parts && parts.a > 0) {
+      layers.push(parts);
+      if (parts.a >= 1) break;
+    }
+    node = node.parentElement;
+  }
+  if (!layers.length) return null;
+  const deepest = layers[layers.length - 1];
+  let acc = deepest.a >= 1 ? layers.pop() : { r: 255, g: 255, b: 255, a: 1 };
+  for (let i = layers.length - 1; i >= 0; i -= 1) {
+    acc = over(layers[i], acc);
+  }
+  return `rgb(${Math.round(acc.r)}, ${Math.round(acc.g)}, ${Math.round(acc.b)})`;
+}
+function channelsOf(rgb) {
+  if (!rgb) return null;
+  const p = (rgb.match(/[\d.]+/g) ?? []).map(Number);
+  return p.length >= 3 && p.slice(0, 3).every((n) => !Number.isNaN(n)) ? [p[0], p[1], p[2]] : null;
+}
+function relativeLuminance([r, g, b]) {
+  const channel = (c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
+}
+function wcagRatio(a, b) {
+  const la = relativeLuminance(a);
+  const lb = relativeLuminance(b);
+  return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
+}
+const WHITE = [255, 255, 255];
+const BLACK = [0, 0, 0];
+function enforceContrast(el, enabled) {
+  delete el.dataset.origamContrastFixed;
+  if (!enabled || typeof window === "undefined") return;
+  if (el.dataset.origamColorLocked === "true") return;
+  const bg = channelsOf(resolvePaintedBackground(el));
+  if (!bg) return;
+  const fg = channelsOf(toRgb(getComputedStyle(el).color));
+  if (!fg) return;
+  const ratio = wcagRatio(fg, bg);
+  if (ratio >= config.threshold) return;
+  const better = wcagRatio(WHITE, bg) >= wcagRatio(BLACK, bg) ? "#fff" : "#000";
+  el.style.setProperty("color", better, "important");
+  el.dataset.origamContrastFixed = "true";
+  console.warn(
+    `[origam] Low text contrast (${ratio.toFixed(2)}:1 < ${config.threshold}:1): text rgb(${fg.join(", ")}) on background rgb(${bg.join(", ")}). Overriding text colour to ${better} for legibility. Disable with createOrigam({ contrast: false }).`,
+    el
+  );
+}
+const SETTLE_MS = 250;
+function schedule(el, enabled) {
+  if (typeof requestAnimationFrame !== "undefined") {
+    requestAnimationFrame(() => enforceContrast(el, enabled));
+  }
+  if (typeof setTimeout !== "undefined") {
+    setTimeout(() => enforceContrast(el, enabled), SETTLE_MS);
+  }
+}
+const vContrast = {
+  mounted(el, binding) {
+    schedule(el, config.enabled && binding.value !== false);
+  },
+  updated(el, binding) {
+    schedule(el, config.enabled && binding.value !== false);
+  }
+};
+export default vContrast;

package/dist/src/directives/index.cjs

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "vClickOutside", {
     return _clickOutside.default;
   }
 });
+Object.defineProperty(exports, "vContrast", {
+  enumerable: true,
+  get: function () {
+    return _contrast.default;
+  }
+});
 Object.defineProperty(exports, "vHover", {
   enumerable: true,
   get: function () {
@@ -38,4 +44,5 @@ var _clickOutside = _interopRequireDefault(require("./ClickOutside/clickOutside.
 var _intersect = _interopRequireDefault(require("./Intersect/intersect.directive.cjs"));
 var _touch = _interopRequireDefault(require("./Touch/touch.directive.cjs"));
 var _hover = _interopRequireDefault(require("./Hover/hover.directive.cjs"));
+var _contrast = _interopRequireDefault(require("./Contrast/contrast.directive.cjs"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/src/directives/index.d.ts

@@ -3,3 +3,4 @@ export { default as vClickOutside } from './ClickOutside/clickOutside.directive'
 export { default as vIntersect } from './Intersect/intersect.directive';
 export { default as vTouch } from './Touch/touch.directive';
 export { default as vHover } from './Hover/hover.directive';
+export { default as vContrast } from './Contrast/contrast.directive';

package/dist/src/directives/index.js

@@ -3,3 +3,4 @@ export { default as vClickOutside } from "./ClickOutside/clickOutside.directive.
 export { default as vIntersect } from "./Intersect/intersect.directive.js";
 export { default as vTouch } from "./Touch/touch.directive.js";
 export { default as vHover } from "./Hover/hover.directive.js";
+export { default as vContrast } from "./Contrast/contrast.directive.js";

package/dist/src/enums/BottomNav/bottom-nav-position.enum.cjs

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BOTTOM_NAV_POSITION = void 0;
+var BOTTOM_NAV_POSITION = exports.BOTTOM_NAV_POSITION = /* @__PURE__ */(BOTTOM_NAV_POSITION2 => {
+  BOTTOM_NAV_POSITION2["START"] = "start";
+  BOTTOM_NAV_POSITION2["CENTER"] = "center";
+  BOTTOM_NAV_POSITION2["END"] = "end";
+  return BOTTOM_NAV_POSITION2;
+})(BOTTOM_NAV_POSITION || {});

package/dist/src/enums/BottomNav/bottom-nav-position.enum.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Horizontal placement of the bottom navigation bar when it does not span
+ * the full width (e.g. a custom `width`). Maps to inline-start / centred /
+ * inline-end alignment within the layout region.
+ */
+export declare enum BOTTOM_NAV_POSITION {
+    START = "start",
+    CENTER = "center",
+    END = "end"
+}

package/dist/src/enums/BottomNav/bottom-nav-position.enum.js

@@ -0,0 +1,6 @@
+export var BOTTOM_NAV_POSITION = /* @__PURE__ */ ((BOTTOM_NAV_POSITION2) => {
+  BOTTOM_NAV_POSITION2["START"] = "start";
+  BOTTOM_NAV_POSITION2["CENTER"] = "center";
+  BOTTOM_NAV_POSITION2["END"] = "end";
+  return BOTTOM_NAV_POSITION2;
+})(BOTTOM_NAV_POSITION || {});

package/dist/src/enums/Toolbar/toolbar.enum.cjs

@@ -9,5 +9,6 @@ var SCROLL_BEHAVIOR = exports.SCROLL_BEHAVIOR = /* @__PURE__ */(SCROLL_BEHAVIOR2
   SCROLL_BEHAVIOR2["INVERTED"] = "inverted";
   SCROLL_BEHAVIOR2["COLLAPSE"] = "collapse";
   SCROLL_BEHAVIOR2["ELEVATED"] = "elevate";
+  SCROLL_BEHAVIOR2["ACTIVE"] = "active";
   return SCROLL_BEHAVIOR2;
 })(SCROLL_BEHAVIOR || {});

package/dist/src/enums/Toolbar/toolbar.enum.d.ts

@@ -2,5 +2,6 @@ export declare enum SCROLL_BEHAVIOR {
     HIDE = "hide",
     INVERTED = "inverted",
     COLLAPSE = "collapse",
-    ELEVATED = "elevate"
+    ELEVATED = "elevate",
+    ACTIVE = "active"
 }

package/dist/src/enums/Toolbar/toolbar.enum.js

@@ -3,5 +3,6 @@ export var SCROLL_BEHAVIOR = /* @__PURE__ */ ((SCROLL_BEHAVIOR2) => {
   SCROLL_BEHAVIOR2["INVERTED"] = "inverted";
   SCROLL_BEHAVIOR2["COLLAPSE"] = "collapse";
   SCROLL_BEHAVIOR2["ELEVATED"] = "elevate";
+  SCROLL_BEHAVIOR2["ACTIVE"] = "active";
   return SCROLL_BEHAVIOR2;
 })(SCROLL_BEHAVIOR || {});

package/dist/src/enums/index.cjs

@@ -234,6 +234,17 @@ Object.keys(_codeLang).forEach(function (key) {
     }
   });
 });
+var _codeTheme = require("./Code/code-theme.enum.cjs");
+Object.keys(_codeTheme).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _codeTheme[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _codeTheme[key];
+    }
+  });
+});
 var _colorPicker = require("./ColorPicker/color-picker.enum.cjs");
 Object.keys(_colorPicker).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -652,6 +663,17 @@ Object.keys(_bracketVariant).forEach(function (key) {
     }
   });
 });
+var _bottomNavPosition = require("./BottomNav/bottom-nav-position.enum.cjs");
+Object.keys(_bottomNavPosition).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _bottomNavPosition[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _bottomNavPosition[key];
+    }
+  });
+});
 var _bracketMatchStatus = require("./Bracket/bracket-match-status.enum.cjs");
 Object.keys(_bracketMatchStatus).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/src/enums/index.d.ts

@@ -19,6 +19,7 @@ export * from './Chart/chart-map-mode.enum';
 export * from './Chart/chart-sparkline-kind.enum';
 export * from './Chart/chart-stacking.enum';
 export * from './Code/code-lang.enum';
+export * from './Code/code-theme.enum';
 export * from './ColorPicker/color-picker.enum';
 export * from './Commons/commons.enum';
 export * from './Commons/align.enum';
@@ -57,6 +58,7 @@ export * from './Transition/transition.enum';
 export * from './Blockquote/blockquote-variant.enum';
 export * from './Blockquote/blockquote-lang.enum';
 export * from './Bracket/bracket-variant.enum';
+export * from './BottomNav/bottom-nav-position.enum';
 export * from './Bracket/bracket-match-status.enum';
 export * from './Card/card.enum';
 export * from './InfiniteScroll/infinite-scroll.enum';

package/dist/src/enums/index.js

@@ -19,6 +19,7 @@ export * from "./Chart/chart-map-mode.enum.js";
 export * from "./Chart/chart-sparkline-kind.enum.js";
 export * from "./Chart/chart-stacking.enum.js";
 export * from "./Code/code-lang.enum.js";
+export * from "./Code/code-theme.enum.js";
 export * from "./ColorPicker/color-picker.enum.js";
 export * from "./Commons/commons.enum.js";
 export * from "./Commons/align.enum.js";
@@ -57,6 +58,7 @@ export * from "./Transition/transition.enum.js";
 export * from "./Blockquote/blockquote-variant.enum.js";
 export * from "./Blockquote/blockquote-lang.enum.js";
 export * from "./Bracket/bracket-variant.enum.js";
+export * from "./BottomNav/bottom-nav-position.enum.js";
 export * from "./Bracket/bracket-match-status.enum.js";
 export * from "./Card/card.enum.js";
 export * from "./InfiniteScroll/infinite-scroll.enum.js";

package/dist/src/interfaces/Alert/alert.interface.d.ts

@@ -1,11 +1,10 @@
-import type { IAdjacentProps, IBorderProps, IBgColorProps, IClickCloseEmits, IColorProps, ICommonsComponentEmits, ICommonsComponentProps, IDensityProps, IDimensionProps, IElevationProps, IHoverEmits, IHoverProps, ILocationProps, IMarginProps, IPaddingProps, IPositionProps, IRoundedProps, IStatusProps, ITagProps } from '../../interfaces';
+import type { IAdjacentProps, IBorderProps, IBgColorProps, IClickCloseEmits, IColorProps, ICommonsComponentEmits, ICommonsComponentProps, IDensityProps, IDimensionProps, IElevationProps, IHoverEmits, IHoverProps, ILocationProps, IMarginProps, IPaddingProps, IPositionProps, IRoundedProps, IStatusProps, ITagProps, ITypographyProps } from '../../interfaces';
 import type { TIcon } from '../../types';
-export interface IAlertProps extends ICommonsComponentProps, ITagProps, IColorProps, IBgColorProps, IBorderProps, IDimensionProps, IPaddingProps, IMarginProps, IDensityProps, IElevationProps, ILocationProps, IPositionProps, IRoundedProps, IStatusProps, IHoverProps, IAdjacentProps {
+export interface IAlertProps extends ICommonsComponentProps, ITagProps, IColorProps, IBgColorProps, IBorderProps, IDimensionProps, IPaddingProps, IMarginProps, IDensityProps, IElevationProps, ILocationProps, IPositionProps, IRoundedProps, IStatusProps, IHoverProps, IAdjacentProps, ITypographyProps {
     closable?: boolean;
     closeIcon?: TIcon;
     closeLabel?: string;
     modelValue?: boolean;
-    prominent?: boolean;
     title?: string;
     text?: string;
 }

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

@@ -1,6 +1,24 @@
 import type { ICommonsComponentEmits, IImgProps, ILayoutItemProps, IScrollProps, IToolbarProps } from '../../interfaces';
 import type { TBlock } from "../../types";
-export interface IAppBarProps extends IToolbarProps, ILayoutItemProps, IScrollProps {
+/**
+ * A docked AppBar's cross-axis size (`width` for a top/bottom bar) is owned by
+ * the layout engine — it always spans `calc(100% - reservedLeft - reservedRight)`
+ * so `main` / drawers offset correctly. Exposing `width` / `minWidth` /
+ * `maxWidth` would be a lie (the layout overrides them), so they're omitted
+ * from the surface. `height` stays: it defines the bar's reserved thickness.
+ *
+ * `floating` is also omitted: it sets `display: inline-flex` on the Toolbar to
+ * shrink-wrap its content, but the layout forces the docked bar to full width
+ * (`calc(100% - …)`), neutralising it. It only makes sense on a standalone
+ * `OrigamToolbar`.
+ *
+ * `absolute` is omitted too: it only toggles `position: absolute` ↔ `fixed`
+ * (both keep the bar pinned at `top: 0`; it does NOT make the bar scroll away —
+ * that's `scroll-behavior="hide"`). The difference only shows in a contained /
+ * non-full-viewport layout, which is a niche the `OrigamLayout` primitive still
+ * covers. `height` stays — it defines the bar's reserved thickness.
+ */
+export interface IAppBarProps extends Omit<IToolbarProps, 'width' | 'minWidth' | 'maxWidth' | 'floating'>, Omit<ILayoutItemProps, 'absolute'>, IScrollProps {
     location?: TBlock;
     image?: IImgProps;
 }

package/dist/src/interfaces/App/app.interface.cjs

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1,24 @@
+import type { IBgColorProps, IColorProps, ICommonsComponentEmits, ICommonsComponentProps } from '../../interfaces';
+/**
+ * Props for the `<OrigamApp>` application shell.
+ *
+ * App is a thin wrapper over `<OrigamLayout>` whose only surface concern is
+ * the page background / default text colour — it intentionally does NOT
+ * expose the full layout design surface (border / rounded / elevation /
+ * dimension / spacing): an application root has no business carrying a
+ * corner radius, a shadow or margins. Those remain available on
+ * `<OrigamLayout>` directly for embedded / sized layouts.
+ *
+ * `color` / `bgColor` are forwarded to the underlying layout: `bgColor`
+ * paints the app surface, and `color` sets the root text colour which
+ * 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`. */
+    fullHeight?: boolean;
+    /** IDs of layout items allowed to overlap each other (forwarded to the layout). */
+    overlaps?: Array<string>;
+}
+/** Emits fired by `<OrigamApp>` — none beyond the shared component contract. */
+export interface IAppEmits extends ICommonsComponentEmits {
+}

package/dist/src/interfaces/Audio/audio-player.interface.d.ts

@@ -1,5 +1,5 @@
 import type { Ref } from 'vue';
-import type { IBgColorProps, IBorderProps, IColorProps, ICommonsComponentProps, IElevationProps, IMarginProps, IMediaPlayerEmits, IMediaPlayerMethods, IMediaPlayerState, IPaddingProps, IPositionProps, IRoundedProps, ISrcObject, ITagProps, IVideoTrack } from '../../interfaces';
+import type { IBgColorProps, IBorderProps, IColorProps, ICommonsComponentProps, IDimensionProps, IElevationProps, IMarginProps, IMediaPlayerEmits, IMediaPlayerMethods, IMediaPlayerState, IPaddingProps, IPositionProps, IRoundedProps, ISrcObject, ITagProps, ITypographyProps, IVideoTrack } from '../../interfaces';
 import type { TAudioControls, TAudioLoopMode, TAudioVariant, TCoverPosition } from '../../types';
 /**
  * Descriptor for a single track in an `<OrigamAudio>` playlist.
@@ -103,7 +103,7 @@ export interface IAudioSlots {
  * (cover + title/artist + transport bar). Designed to drop into a
  * page without surrounding chrome.
  */
-export interface IAudioProps extends ICommonsComponentProps, ITagProps, IRoundedProps, IBorderProps, IMarginProps, IPaddingProps, IElevationProps, IPositionProps, IColorProps, IBgColorProps {
+export interface IAudioProps extends ICommonsComponentProps, ITagProps, IRoundedProps, IBorderProps, IDimensionProps, IMarginProps, IPaddingProps, IElevationProps, IPositionProps, IColorProps, IBgColorProps, ITypographyProps {
     /**
      * Visual variant of the audio surface.
      *
@@ -355,6 +355,27 @@ export interface IAudioEmits {
      *  next, auto-advance). Payload is the new track descriptor. */
     (e: 'track-change', track: IAudioTrack, index: number): void;
 }
+/**
+ * Options accepted by `useWaveform()` to configure how the audio file
+ * is fetched and decoded into waveform peak data.
+ */
+export interface IUseWaveformOptions {
+    /**
+     * Number of amplitude buckets (bars) to downsample the decoded
+     * audio into. A higher value produces a finer-grained waveform but
+     * costs more processing time.
+     *
+     * @default 200
+     */
+    bins?: number;
+    /**
+     * CORS credentials mode forwarded to `fetch()`.
+     *
+     * - `'use-credentials'` — include cookies / auth headers.
+     * - any other value (or `undefined`) — `'same-origin'` semantics.
+     */
+    crossOrigin?: string;
+}
 /**
  * Reactive state surface returned by `useAudioPlayer` (Audio
  * namespace). For the moment audio does not expose any state beyond