origam 2.22.0 → 2.23.0

package/CHANGELOG.md

@@ -18,6 +18,47 @@ This project follows [Semantic Versioning](https://semver.org).
 
 ## [Unreleased]
 
+## [2.23.0] - 2026-10-08
+
+### Added — `createOrigam({ code: { highlighter } })` : l'application fournit son highlighter
+
+`OrigamCode` importait `shiki` par un **specificateur nu** que le navigateur ne sait pas resoudre. Mesure sur le build de production d'une application consommatrice, avec 2.21.0 : `Failed to resolve module specifier 'shiki'`, blocs de code non colorises, et un bloc `yaml` rendu **vide**. Declarer `shiki` en dependance de l'application ne suffisait pas.
+
+⛔ **Le `@vite-ignore` n'etait pas une negligence** : sans lui, Rollup suit le graphe jusqu'au chargeur WASM de shiki et emet un chunk virtuel invalide (`default` est un mot reserve, esbuild rejette). Le retirer aurait casse `packages/docs` (VitePress). L'option contourne les deux : si l'application fournit un highlighter, **le DS ne touche jamais a `shiki`** dans ce chemin — plus d'import, plus de specificateur nu, plus de chunk WASM.
+
+`TShikiModule` n'exige que **`createHighlighter`**, pas la surface entiere de `shiki` : un module allege bati sur `shiki/core` + moteur regex JS fonctionne, et c'est ce qui evite la cause racine du contournement. Mesure du consommateur : **+65 Ko gzip contre +417 Ko** avec shiki complet.
+
+⚠️ **Non cassant** : sans l'option, le chemin par defaut est inchange ; `packages/docs` compile **sans aucune modification de sa part** (verifie, `exit 0`). Et le rattrapage vers le texte brut sur une langue non embarquee est **conserve deliberement** — c'est ce qui rend un highlighter partiel utilisable sans que la page casse.
+
+### Changed — ⚠️ RUPTURE : `IVariantProps` scinde en `IActionVariantProps` / `IInputVariantProps`
+
+**14 composants acceptaient des valeurs de `variant` qui ne faisaient rien.** `IVariantProps` etait un mixin **partage** entre composants d'action et de saisie, exposant l'union des deux vocabulaires (10 valeurs) alors que chaque famille n'en implemente que la moitie. Mesure en navigateur reel, avec contrôle positif :
+
+| famille | implemente | **inerte** |
+|---|---|---|
+| `OrigamBtn`, `OrigamBtnGroup`, `OrigamBtnToggle` | les 7 de `VARIANT` | **`underlined` `filled` `solo`** — byte-identiques a `flat` sur les 7 longhands |
+| `OrigamField` + 9 descendants | les 5 de `VARIANT_INPUT` | **`text` `flat` `elevated` `tonal` `ghost`** — identiques entre eux |
+
+`useVariant()` emet bien la classe `--variant-{valeur}` — il n'a aucune liste blanche — mais **aucune regle CSS ne la cible**.
+
+⚠️ **`outlined` et `plain` sont implementes des DEUX cotes**, avec un rendu different selon le composant. Ce chevauchement est **legitime** (deux patterns UI distincts partageant un nom) et ne change pas. Le defaut etait l'asymetrie, pas le recouvrement.
+
+**`IVariantProps` est SUPPRIME** — mesure : zero consommateur hors des 14 composants, de son composable et de son test. `OrigamConfirmWrapper` recoit `IInputVariantProps` : son `variant` n'est qu'un defaut pousse vers les champs qu'il enveloppe.
+
+**Ce que la restriction a revele** : `OrigamConfirmWrapper.story.vue` proposait `VARIANT_OPTIONS` (les 7 valeurs d'action) alors que ce composant pousse des defauts vers des **champs de formulaire** — faux en silence depuis la creation de la story.
+
+**Cout de la rupture, mesure** : un consommateur qui passe `variant="solo"` a un `OrigamBtn` n'obtient **rien** aujourd'hui. La restriction transforme un silence en erreur de compilation, ce qui l'informe. La seule application cliente connue a audite ses deux etats : **zero occurrence**, et `git grep IVariantProps` y rend **0**.
+
+Epingle par `packages/tests/TU/playground/variant-literal-union.spec.ts`, verifie **ROUGE sur le commit parent** (10/10) et **VERT apres** (7 et 5) — sur le descripteur resolu, pas sur le texte source.
+
+### Fixed — un test unitaire reconstruisait deux fois le programme TypeScript entier
+
+`extractLiteralUnions()` appelle `createChecker()`, qui rebatit tout le programme de `packages/ds/tsconfig.json` depuis zero a chaque appel. Le test l'appelait **une fois par `it()`**, payant ce cout deux fois. Un seul appel partage dans un `beforeAll` suffit aux deux cas.
+
+⚠️ **Ce n'etait pas un defaut produit ni une particularite de Node 22**, et la mesure le montre : **3,73 s** isole, **54,6 s** sur le job CI Node 22 (un timeout), **36,0 s** sur le job Node 24 du **meme run** (vert, mais presque sans marge). Le facteur de 8 a 14 vient de la contention des workers Vitest sur un runner partage — Node 22 n'a pas cause l'echec, il l'a expose le premier.
+
+⚠️ **Ne figure pas dans le paquet publie** : le lot de fondation du playground (`packages/playground`, prive) n'affecte pas le tarball.
+
 ## [2.22.0] - 2026-10-07
 
 ### Added — `attach` sur `OrigamCommandPalette`, `OrigamSnackbarGroup` et `OrigamDrawer`

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.resetCodeHighlighterForTesting = resetCodeHighlighterForTesting;
 exports.useCode = useCode;
+var _vue = require("vue");
 var _code = require("../../consts/Code/code.const.cjs");
 var _enums = require("../../enums/index.cjs");
 let _highlighterPromise = null;
@@ -33,11 +34,11 @@ function lruSet(key, value) {
   }
   _cache.set(key, value);
 }
-async function loadHighlighter() {
+async function loadHighlighter(loader) {
   if (_highlighterUnavailable) return null;
   if (_highlighterPromise) return _highlighterPromise;
   _highlighterPromise = (async () => {
-    const shiki = await Promise.resolve().then(() => require("shiki"));
+    const shiki = loader ? await loader() : await Promise.resolve().then(() => require("shiki"));
     const highlighter = await shiki.createHighlighter({
       themes: [_code.CODE_LIGHT_THEME, _code.CODE_DARK_THEME],
       langs: [..._code.SUPPORTED_LANGS]
@@ -50,7 +51,7 @@ async function loadHighlighter() {
     _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);
+      console.warn(loader ? "[origam] OrigamCode: the `highlighter` supplied to `createOrigam({ code })` failed to load \u2014 rendering plain, unhighlighted code." : "[origam] OrigamCode: `shiki` is not installed \u2014 rendering plain, unhighlighted code. Add `shiki` to your dependencies to enable syntax highlighting.", err);
     }
     return null;
   });
@@ -64,12 +65,13 @@ function resolveLang(lang) {
   return _enums.CODE_LANG.PLAINTEXT;
 }
 function useCode() {
+  const highlighterLoader = (0, _vue.inject)(_code.ORIGAM_CODE_KEY)?.highlighter;
   async function highlight(code, lang) {
     const resolvedLang = resolveLang(lang);
     const key = makeCacheKey(code, resolvedLang);
     const cached = lruGet(key);
     if (cached !== void 0) return cached;
-    const highlighter = await loadHighlighter();
+    const highlighter = await loadHighlighter(highlighterLoader);
     if (!highlighter) {
       const plain = escapeHtml(code);
       lruSet(key, plain);
@@ -97,7 +99,7 @@ function useCode() {
     return html;
   }
   async function prime() {
-    await loadHighlighter();
+    await loadHighlighter(highlighterLoader);
   }
   function isReady() {
     return _highlighterReady;

package/dist/src/composables/Code/code.composable.d.ts

@@ -1,6 +1,13 @@
 import type { IUseCodeReturn } from '../../interfaces/Code/code.interface';
 /**
  * Public hook — see `IUseCodeReturn` for the surface contract.
+ *
+ * `inject(ORIGAM_CODE_KEY)` below is called synchronously here, which is
+ * only valid while THIS function runs during a component's `setup()`
+ * (exactly how `OrigamCode.vue` calls it). `undefined` when no
+ * `createOrigam({ code })` ancestor provided one (or none was installed at
+ * all): `loadHighlighter()` then keeps its original `import('shiki')`
+ * behaviour, unchanged.
  */
 export declare function useCode(): IUseCodeReturn;
 /**

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

@@ -1,4 +1,5 @@
-import { CODE_CACHE_MAX_ENTRIES, CODE_DARK_THEME as DARK_THEME, CODE_LIGHT_THEME as LIGHT_THEME, SUPPORTED_LANGS } from "../../consts/Code/code.const.js";
+import { inject } from "vue";
+import { CODE_CACHE_MAX_ENTRIES, CODE_DARK_THEME as DARK_THEME, CODE_LIGHT_THEME as LIGHT_THEME, ORIGAM_CODE_KEY, SUPPORTED_LANGS } from "../../consts/Code/code.const.js";
 import { CODE_LANG } from "../../enums/index.js";
 let _highlighterPromise = null;
 let _highlighterReady = false;
@@ -26,11 +27,11 @@ function lruSet(key, value) {
   }
   _cache.set(key, value);
 }
-async function loadHighlighter() {
+async function loadHighlighter(loader) {
   if (_highlighterUnavailable) return null;
   if (_highlighterPromise) return _highlighterPromise;
   _highlighterPromise = (async () => {
-    const shiki = await import(
+    const shiki = loader ? await loader() : await import(
       /* @vite-ignore */
       "shiki"
     );
@@ -47,7 +48,7 @@ async function loadHighlighter() {
     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.",
+        loader ? "[origam] OrigamCode: the `highlighter` supplied to `createOrigam({ code })` failed to load \u2014 rendering plain, unhighlighted code." : "[origam] OrigamCode: `shiki` is not installed \u2014 rendering plain, unhighlighted code. Add `shiki` to your dependencies to enable syntax highlighting.",
         err
       );
     }
@@ -65,12 +66,13 @@ function resolveLang(lang) {
   return CODE_LANG.PLAINTEXT;
 }
 export function useCode() {
+  const highlighterLoader = inject(ORIGAM_CODE_KEY)?.highlighter;
   async function highlight(code, lang) {
     const resolvedLang = resolveLang(lang);
     const key = makeCacheKey(code, resolvedLang);
     const cached = lruGet(key);
     if (cached !== void 0) return cached;
-    const highlighter = await loadHighlighter();
+    const highlighter = await loadHighlighter(highlighterLoader);
     if (!highlighter) {
       const plain = escapeHtml(code);
       lruSet(key, plain);
@@ -92,7 +94,7 @@ export function useCode() {
     return html;
   }
   async function prime() {
-    await loadHighlighter();
+    await loadHighlighter(highlighterLoader);
   }
   function isReady() {
     return _highlighterReady;

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

@@ -1,5 +1,3 @@
-import type { IVariantProps } from '../../interfaces/Commons/variant.interface';
-import type { TVariant, TVariantInput } from '../../types/Commons/variant.type';
 import { Ref } from 'vue';
 /*********************************************************
  * useVariant
@@ -10,7 +8,17 @@ import { Ref } from 'vue';
  * contrairement a `useDensity`/`useSize`, il n'y a pas de liste blanche
  * (`*_ARRAY`) a matcher : toute valeur non-nulle produit une classe, y
  * compris une variante que le composant ne connait pas.
+ *
+ * Le parametre props n'est plus type via l'ancien `IVariantProps` (mixin
+ * unique acceptant a tort `TVariant | TVariantInput` partout — scinde en
+ * `IActionVariantProps` / `IInputVariantProps`, cf. #1050). Un type
+ * structurel `{ variant?: string }` suffit ici : la fonction ne fait que
+ * lire `props.variant` et le stringifier, elle n'a jamais eu besoin de
+ * connaitre la liste de valeurs d'une famille precise — et les deux
+ * interfaces scindees (comme toute autre) lui restent assignables.
  ********************************************************/
-export declare function useVariant(props: IVariantProps | Ref<TVariant | TVariantInput | string | undefined>, name?: string): {
+export declare function useVariant(props: {
+    variant?: string;
+} | Ref<string | undefined>, name?: string): {
     variantClasses: import("vue").ComputedRef<string[]>;
 };

package/dist/src/consts/Code/code.const.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SUPPORTED_LANGS = exports.CODE_LIGHT_THEME = exports.CODE_DEFAULTS = exports.CODE_DARK_THEME = exports.CODE_CACHE_MAX_ENTRIES = void 0;
+exports.SUPPORTED_LANGS = exports.ORIGAM_CODE_KEY = exports.CODE_LIGHT_THEME = exports.CODE_DEFAULTS = exports.CODE_DARK_THEME = exports.CODE_CACHE_MAX_ENTRIES = void 0;
 var _enums = require("../../enums/index.cjs");
 const SUPPORTED_LANGS = exports.SUPPORTED_LANGS = Object.freeze([_enums.CODE_LANG.PLAINTEXT, _enums.CODE_LANG.VUE, _enums.CODE_LANG.TS, _enums.CODE_LANG.JS, _enums.CODE_LANG.TSX, _enums.CODE_LANG.JSX, _enums.CODE_LANG.SCSS, _enums.CODE_LANG.CSS, _enums.CODE_LANG.JSON, _enums.CODE_LANG.BASH, _enums.CODE_LANG.HTML, _enums.CODE_LANG.XML, _enums.CODE_LANG.YAML, _enums.CODE_LANG.MD]);
 const CODE_CACHE_MAX_ENTRIES = exports.CODE_CACHE_MAX_ENTRIES = 64;
@@ -20,4 +20,5 @@ const CODE_DEFAULTS = exports.CODE_DEFAULTS = Object.freeze({
    * snackbar default so the visual rhythm stays consistent.
    */
   copyFeedbackDurationMs: 2e3
-});
+});
+const ORIGAM_CODE_KEY = exports.ORIGAM_CODE_KEY = /* @__PURE__ */Symbol.for("origam:code");

package/dist/src/consts/Code/code.const.d.ts

@@ -1,4 +1,6 @@
+import type { InjectionKey } from 'vue';
 import { CODE_LANG } from '../../enums';
+import type { ICodeOptions } from '../../interfaces/Code/code.interface';
 /**
  * Languages bundled with the default shiki highlighter. Keep this list and
  * the `langs` argument of `createHighlighter()` in lockstep — see
@@ -51,3 +53,15 @@ export declare const CODE_DEFAULTS: Readonly<{
      */
     readonly copyFeedbackDurationMs: 2000;
 }>;
+/*********************************************************
+ * ORIGAM_CODE_KEY
+ *
+ * @description
+ * Provide/inject key for the `code` block of `createOrigam()`'s options
+ * (`ICodeOptions` — today just `highlighter`). `useCode()` reads it via
+ * `inject(ORIGAM_CODE_KEY)` — optional on purpose: an app that never calls
+ * `createOrigam({ code })`, or that never installs the plugin at all, gets
+ * `undefined` and `loadHighlighter()` falls back to the DS's own
+ * `import('shiki')` path unchanged. See `code.composable.ts`.
+ ********************************************************/
+export declare const ORIGAM_CODE_KEY: InjectionKey<ICodeOptions>;

package/dist/src/consts/Code/code.const.js

@@ -30,3 +30,4 @@ export const CODE_DEFAULTS = Object.freeze({
    */
   copyFeedbackDurationMs: 2e3
 });
+export const ORIGAM_CODE_KEY = /* @__PURE__ */ Symbol.for("origam:code");

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

@@ -10,8 +10,8 @@ import type { IMarginProps } from '../Commons/margin.interface';
 import type { IPaddingProps } from '../Commons/padding.interface';
 import type { IRoundedProps } from '../Commons/rounded.interface';
 import type { ISizeProps } from '../Commons/size.interface';
-import type { IVariantProps } from '../Commons/variant.interface';
-export interface IBtnGroupProps extends ITagProps, ICommonsComponentProps, IRoundedProps, IBorderProps, IDensityProps, IElevationProps, IColorProps, IBgColorProps, IMarginProps, IPaddingProps, IHoverProps, IActiveProps, IVariantProps, ISizeProps {
+import type { IActionVariantProps } from '../Commons/variant.interface';
+export interface IBtnGroupProps extends ITagProps, ICommonsComponentProps, IRoundedProps, IBorderProps, IDensityProps, IElevationProps, IColorProps, IBgColorProps, IMarginProps, IPaddingProps, IHoverProps, IActiveProps, IActionVariantProps, ISizeProps {
     divided?: boolean;
     items?: Array<IBtnProps>;
 }

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

@@ -18,14 +18,14 @@ import type { IRippleProps } from '../Commons/ripple.interface';
 import type { IRoundedProps } from '../Commons/rounded.interface';
 import type { ISizeProps } from '../Commons/size.interface';
 import type { ITypographyProps } from '../Commons/typography.interface';
-import type { IVariantProps } from '../Commons/variant.interface';
+import type { IActionVariantProps } from '../Commons/variant.interface';
 import type { TIcon } from '../../types/Icon/icon.type';
 import type { TStatus, TStatusPosition } from '../../types/Commons/status.type';
 /** 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
  *  directly avoids the TS2430 incompatible-extends error. */
-export interface IBtnProps extends ICommonsComponentProps, IColorProps, IBgColorProps, IBorderProps, IDensityProps, IDimensionProps, IElevationProps, IRoundedProps, ITagProps, ISizeProps, ILinkProps, IRippleProps, ILoaderProps, IPositionProps, ILocationProps, IGroupItemProps, IPaddingProps, IMarginProps, IAdjacentProps, IHoverProps, IActiveProps, IVariantProps, Pick<ITypographyProps, 'fontSize' | 'fontWeight' | 'lineHeight' | 'letterSpacing'> {
+export interface IBtnProps extends ICommonsComponentProps, IColorProps, IBgColorProps, IBorderProps, IDensityProps, IDimensionProps, IElevationProps, IRoundedProps, ITagProps, ISizeProps, ILinkProps, IRippleProps, ILoaderProps, IPositionProps, ILocationProps, IGroupItemProps, IPaddingProps, IMarginProps, IAdjacentProps, IHoverProps, IActiveProps, IActionVariantProps, Pick<ITypographyProps, 'fontSize' | 'fontWeight' | 'lineHeight' | 'letterSpacing'> {
     /** @deprecated Use `variant="flat"` instead. Kept for backward compat. */
     flat?: boolean;
     /** Pass `true` to activate icon-only mode; pass a `TIcon` value to set the icon. */

package/dist/src/interfaces/Code/code.interface.d.ts

@@ -7,7 +7,7 @@ import type { IMarginProps } from '../Commons/margin.interface';
 import type { IPaddingProps } from '../Commons/padding.interface';
 import type { IRoundedProps } from '../Commons/rounded.interface';
 import type { ITypographyProps } from '../Commons/typography.interface';
-import type { TCodeLang } from '../../types/Code/code.type';
+import type { TCodeLang, TShikiHighlighterLoader } from '../../types/Code/code.type';
 /**
  * Props for `<OrigamCode>` — a shiki-powered code block with line numbers,
  * line highlighting, copy button and theme awareness.
@@ -85,6 +85,38 @@ export interface ICodeProps extends ICommonsComponentProps, ITagProps, IBorderPr
      */
     prompt?: string;
 }
+/*********************************************************
+ * ICodeOptions
+ *
+ * @description
+ * App-level config for `<OrigamCode>`, passed via `createOrigam({ code })`.
+ * Today it carries a single knob — `highlighter` — but it is its own
+ * interface (rather than a bare function on `IOrigamOptions`) so a future
+ * `OrigamCode`-wide setting (e.g. a default theme pair) has somewhere to
+ * land without another breaking shape change.
+ *
+ * @description
+ * `highlighter` supplies your own shiki-compatible module loader instead of
+ * the DS's default `import('shiki')` (see `code.composable.ts`'s
+ * `loadHighlighter()`). Absent (default) — `useCode()` keeps loading the
+ * full `shiki` package exactly as before, nothing changes for a consumer
+ * who does not set this. Supplied — the DS never touches `shiki` itself: no
+ * bare-specifier dynamic import, no `@vite-ignore`, no WASM-loader chunk in
+ * THIS path. Typical use: an app bundling `shiki/core` + a JS regex engine
+ * (no WASM loader, no oniguruma binary) to shrink the syntax-highlighting
+ * cost — any module exposing `createHighlighter` works, see `TShikiModule`.
+ *
+ * @description
+ * The loader is read once, synchronously, the first time `useCode()` is
+ * invoked inside a mounted `<OrigamCode>` — `useCode()` is a module-scoped
+ * singleton (one highlighter promise for the whole page), so the FIRST
+ * instance to resolve it wins for the lifetime of the page; later instances
+ * reuse that same highlighter regardless of their own `createOrigam()`
+ * ancestor.
+ ********************************************************/
+export interface ICodeOptions {
+    highlighter?: TShikiHighlighterLoader;
+}
 /** Emits fired by `<OrigamCode>` — copy-to-clipboard confirmation. */
 export interface ICodeEmits {
     (e: 'copy', code: string): void;

package/dist/src/interfaces/Commons/commons.interface.d.ts

@@ -6,6 +6,7 @@ import type { IDisplayOptions } from './display.interface';
 import type { IGoToOptions } from './goTo.interface';
 import type { ILocaleOptions, IRtlOptions } from './locale.interface';
 import type { IOrigamTheme } from './theme.interface';
+import type { ICodeOptions } from '../Code/code.interface';
 import { TIconOptions } from '../../types/Icon/icon.type';
 import { TOrigamPluginOptionsImport } from '../../types/Commons/commons.type';
 import { TSSROptions } from '../../types/Commons/display.type';
@@ -53,6 +54,7 @@ export interface IOrigamOptions {
      * injected. SSR-safe (injection is a no-op without `document`).
      */
     themes?: IOrigamTheme[];
+    code?: ICodeOptions;
 }
 export interface IOrigamPluginOptions {
     autoImport?: TOrigamPluginOptionsImport;

package/dist/src/interfaces/Commons/variant.interface.d.ts

@@ -1,10 +1,32 @@
 import type { TVariant, TVariantInput } from '../../types/Commons/variant.type';
-/**
- * Mixin props for components that expose a visual variant. The union accepts
- * both action-style variants (`text/flat/elevated/tonal/outlined/plain`) and
- * input-style variants (`solo/filled/underlined/...`) so a single prop type
- * fits every consumer.
- */
-export interface IVariantProps {
-    variant?: TVariant | TVariantInput;
+/*********************************************************
+ * IActionVariantProps
+ *
+ * @description
+ * Mixin props for ACTION-style surfaces (Btn, BtnGroup, BtnToggle…) — the
+ * `VARIANT` enum taxonomy (`text/flat/elevated/tonal/outlined/plain/ghost`).
+ *
+ * @description
+ * Split from the former single `IVariantProps` (#1050 / ADR-005 follow-up):
+ * that mixin's union accepted BOTH this family's 7 values AND the input
+ * family's 5, so every one of the 14 consumers silently accepted 3-5 values
+ * it never implements (`underlined`/`filled`/`solo` here). Each family now
+ * only names the vocabulary it actually renders.
+ ********************************************************/
+export interface IActionVariantProps {
+    variant?: TVariant;
+}
+/*********************************************************
+ * IInputVariantProps
+ *
+ * @description
+ * Mixin props for INPUT-style surfaces (Field and its descendants,
+ * ConfirmWrapper) — the `VARIANT_INPUT` enum taxonomy
+ * (`underlined/filled/solo/outlined/plain`).
+ *
+ * @description
+ * See `IActionVariantProps` above for why this was split out.
+ ********************************************************/
+export interface IInputVariantProps {
+    variant?: TVariantInput;
 }

package/dist/src/interfaces/ConfirmWrapper/confirm-wrapper.interface.d.ts

@@ -6,7 +6,7 @@ import type { IDirectionProps } from '../Commons/direction.interface';
 import type { IElevationProps } from '../Commons/elevation.interface';
 import type { IFocusProps } from '../Commons/focus.interface';
 import type { IRoundedProps } from '../Commons/rounded.interface';
-import type { IVariantProps } from '../Commons/variant.interface';
+import type { IInputVariantProps } from '../Commons/variant.interface';
 /**
  * Props for `<OrigamConfirmWrapper>` — a "type-it-twice" form helper that
  * pairs a primary input with a confirmation input and lights up only when
@@ -15,8 +15,13 @@ import type { IVariantProps } from '../Commons/variant.interface';
  *
  * Inherits the standard form mixins so it slots into a Field/Form pipeline
  * alongside any other input control.
+ *
+ * `variant` is `IInputVariantProps` (not `IActionVariantProps`) — decided by
+ * the owner: ConfirmWrapper wraps form fields, so it only pushes a FIELD
+ * variant (`underlined/filled/solo/outlined/plain`), never an action-style
+ * one (#1050).
  */
-export interface IConfirmWrapperProps extends ICommonsComponentProps, IAdjacentProps, IDirectionProps, IColorProps, IDensityProps, IRoundedProps, IElevationProps, IVariantProps, IFocusProps {
+export interface IConfirmWrapperProps extends ICommonsComponentProps, IAdjacentProps, IDirectionProps, IColorProps, IDensityProps, IRoundedProps, IElevationProps, IInputVariantProps, IFocusProps {
     modelValue?: any;
     confirm?: any;
     field?: string;

package/dist/src/interfaces/Field/field.interface.d.ts

@@ -11,7 +11,7 @@ import type { ILoaderProps } from '../Commons/loader.interface';
 import type { IRoundedProps } from '../Commons/rounded.interface';
 import type { ISizeProps } from '../Commons/size.interface';
 import type { ITypographyProps } from '../Commons/typography.interface';
-import type { IVariantProps } from '../Commons/variant.interface';
+import type { IInputVariantProps } from '../Commons/variant.interface';
 /*********************************************************
  * IFieldProps
  *
@@ -31,7 +31,7 @@ import type { IVariantProps } from '../Commons/variant.interface';
  * `--origam-field---border-*` token channel the three outline legs already
  * read, so the notch keeps opening under `--active` / `--focused`.
  ********************************************************/
-export interface IFieldProps extends ICommonsComponentProps, ILoaderProps, IColorProps, IBgColorProps, IAdjacentInnerProps, IBorderProps, IFocusProps, IDensityProps, ILabelProps, IActiveProps, IVariantProps, IRoundedProps, IElevationProps, ISizeProps, Pick<ITypographyProps, 'fontSize' | 'fontWeight' | 'lineHeight' | 'letterSpacing'> {
+export interface IFieldProps extends ICommonsComponentProps, ILoaderProps, IColorProps, IBgColorProps, IAdjacentInnerProps, IBorderProps, IFocusProps, IDensityProps, ILabelProps, IActiveProps, IInputVariantProps, IRoundedProps, IElevationProps, ISizeProps, Pick<ITypographyProps, 'fontSize' | 'fontWeight' | 'lineHeight' | 'letterSpacing'> {
     centerAffix?: boolean;
     dirty?: boolean;
     disabled?: boolean;

package/dist/src/interfaces/NumberField/number-field.interface.d.ts

@@ -2,9 +2,9 @@ import type { IAdjacentInnerEmits } from '../Commons/adjacent.interface';
 import type { IFocusEmits } from '../Commons/focus.interface';
 import type { IFieldProps, IFieldSlots } from '../Field/field.interface';
 import type { IInputEmits, IInputProps, IInputSlots } from '../Input/input.interface';
-import type { IVariantProps } from '../Commons/variant.interface';
+import type { IInputVariantProps } from '../Commons/variant.interface';
 import type { TIcon } from '../../types/Icon/icon.type';
-export interface INumberFieldProps extends IFieldProps, IInputProps, IVariantProps {
+export interface INumberFieldProps extends IFieldProps, IInputProps, IInputVariantProps {
     autofocus?: boolean;
     placeholder?: string;
     persistentPlaceholder?: boolean;

package/dist/src/interfaces/OtpInputField/otp-input-field.interface.d.ts

@@ -3,7 +3,7 @@ import type { ICommonsComponentEmits } from '../Commons/commons.interface';
 import type { IFocusEmits } from '../Commons/focus.interface';
 import type { IFieldProps, IFieldSlots } from '../Field/field.interface';
 import type { IInputProps, IInputSlots } from '../Input/input.interface';
-import type { IVariantProps } from '../Commons/variant.interface';
+import type { IInputVariantProps } from '../Commons/variant.interface';
 import type { ITypographyProps } from '../Commons/typography.interface';
 import type { TOtpInputFieldType } from '../../types/OtpInputField/otp-input-field.type';
 /*********************************************************
@@ -43,7 +43,7 @@ import type { TOtpInputFieldType } from '../../types/OtpInputField/otp-input-fie
  * → `IAdjacentInnerProps`, reach `<origam-field>` via `fieldProps()`, and were
  * measured PRESENT in the same sweep.
  ********************************************************/
-export interface IOtpInputFieldProps extends Omit<IFieldProps, 'fontFamily' | 'fontWeight' | 'lineHeight' | 'letterSpacing'>, Omit<IInputProps, 'fontFamily' | 'fontWeight' | 'lineHeight' | 'letterSpacing' | 'prependIcon' | 'appendIcon' | 'prependAvatar' | 'appendAvatar' | 'prependAriaLabel' | 'appendAriaLabel'>, IVariantProps, Pick<ITypographyProps, 'fontSize'> {
+export interface IOtpInputFieldProps extends Omit<IFieldProps, 'fontFamily' | 'fontWeight' | 'lineHeight' | 'letterSpacing'>, Omit<IInputProps, 'fontFamily' | 'fontWeight' | 'lineHeight' | 'letterSpacing' | 'prependIcon' | 'appendIcon' | 'prependAvatar' | 'appendAvatar' | 'prependAriaLabel' | 'appendAriaLabel'>, IInputVariantProps, Pick<ITypographyProps, 'fontSize'> {
     autofocus?: boolean;
     divider?: string;
     focusAll?: boolean;

package/dist/src/origam.cjs

@@ -61,6 +61,7 @@ function createOrigam(origam = {}) {
       const appScope = (0, _vue.effectScope)();
       app.onUnmount(() => appScope.stop());
       app.provide(_consts.ORIGAM_ICONS_KEY, icons);
+      app.provide(_consts.ORIGAM_CODE_KEY, options.code ?? {});
       app.provide(_consts.ORIGAM_DISPLAY_KEY, display);
       app.provide(_consts.ORIGAM_LOCALE_KEY, locale);
       app.provide(_consts.ORIGAM_DATE_OPTIONS_KEY, date.options);

package/dist/src/origam.js

@@ -12,6 +12,7 @@ import {
 } from "./composables/index.js";
 import {
   IN_BROWSER,
+  ORIGAM_CODE_KEY,
   ORIGAM_DATE_ADAPTER_KEY,
   ORIGAM_DATE_OPTIONS_KEY,
   ORIGAM_DEFAULTS_KEY,
@@ -79,6 +80,7 @@ export function createOrigam(origam = {}) {
       const appScope = effectScope();
       app.onUnmount(() => appScope.stop());
       app.provide(ORIGAM_ICONS_KEY, icons);
+      app.provide(ORIGAM_CODE_KEY, options.code ?? {});
       app.provide(ORIGAM_DISPLAY_KEY, display);
       app.provide(ORIGAM_LOCALE_KEY, locale);
       app.provide(ORIGAM_DATE_OPTIONS_KEY, date.options);

package/dist/src/types/Code/code.type.d.ts

@@ -22,3 +22,32 @@ export type TShikiHighlighter = {
         defaultColor?: false | string;
     }) => string;
 };
+/*********************************************************
+ * TShikiModule / TShikiHighlighterLoader
+ *
+ * @description
+ * `TShikiModule` is the slice of a shiki-COMPATIBLE MODULE that `useCode()`
+ * needs to build a highlighter — i.e. what `import('shiki')` (the DS's own
+ * default) or an app-supplied alternative must resolve to. Deliberately
+ * minimal, for the same reason `TShikiHighlighter` is: an app that wants to
+ * avoid shiki's WASM-loader chunk (see `code.composable.ts`'s
+ * `loadHighlighter()`) can hand `createOrigam({ code: { highlighter } })`
+ * a loader resolving to `shiki/core` + a regex engine — or any other
+ * module — as long as it exposes this one method. `shiki`'s own
+ * `createHighlighter` satisfies this type structurally; no cast needed on
+ * the consumer side.
+ *
+ * @description
+ * `TShikiHighlighterLoader` is the function shape an app passes as
+ * `createOrigam({ code: { highlighter } })` to supply that module instead
+ * of the DS's default `import('shiki')`. See `code.composable.ts`'s
+ * `loadHighlighter()` for how this branches the dynamic-import path, and
+ * `ICodeOptions` for the option itself.
+ ********************************************************/
+export type TShikiModule = {
+    createHighlighter: (opts: {
+        themes: ReadonlyArray<string>;
+        langs: ReadonlyArray<string>;
+    }) => Promise<TShikiHighlighter>;
+};
+export type TShikiHighlighterLoader = () => Promise<TShikiModule>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "origam",
-  "version": "2.22.0",
+  "version": "2.23.0",
   "type": "module",
   "description": "origam — a Vue 3 design system with multi-theme design tokens, CSS-first components and TypeScript types.",
   "keywords": [