@vielzeug/refine 1.5.3 → 1.7.0

package/dist/shared/size-presets.d.ts

@@ -106,6 +106,80 @@ export declare const MESSAGE_COMPOSER_SIZE_PRESET: {
         gap: string;
     };
 };
+/**
+ * Size preset for `ore-menu`'s floating panel, `ore-menu-item`'s row, and `ore-menu-separator`'s
+ * margin. `--_panel-padding`, `--_item-padding`, and `--_separator-margin` are custom pass-through
+ * keys (not one of `SizeConfig`'s named slots) since the panel, its items, and its separators each
+ * need independently-scaling spacing; `md`'s values match what `menu.css`/`menu-item.css`/
+ * `menu-separator.css` hardcoded before `size` was wired up, so the default look is unchanged.
+ * `--_font-size`/`--_gap` are inherited by `ore-menu-item` from `ore-menu`'s own host — custom
+ * properties cascade down through light-DOM children the same way they cascade into a shadow root.
+ */
+export declare const MENU_SIZE_PRESET: {
+    lg: {
+        '--_item-padding': string;
+        '--_panel-padding': string;
+        '--_separator-margin': string;
+        fontSize: string;
+        gap: string;
+    };
+    md: {
+        '--_item-padding': string;
+        '--_panel-padding': string;
+        '--_separator-margin': string;
+        fontSize: string;
+        gap: string;
+    };
+    sm: {
+        '--_item-padding': string;
+        '--_panel-padding': string;
+        '--_separator-margin': string;
+        fontSize: string;
+        gap: string;
+    };
+};
+/**
+ * Size preset for `ore-list`'s own host. `ore-list-item` has no `sizeVariantMixin` call of its
+ * own — it reads `--_gap`/`--_padding`/`--_padding-inline-end`/`--_font-size`/`--_min-height`/
+ * `--_min-height-two-line` inherited straight from its parent `ore-list`'s shadow host (custom
+ * properties cascade through light-DOM children the same way `MENU_SIZE_PRESET` cascades from
+ * `ore-menu` into `ore-menu-item`), with fallback defaults for standalone use outside an
+ * `ore-list`.
+ *
+ * Follows Material 3's list-item spacing at `md`/`lg`: 16dp between leading/content/trailing
+ * (`gap`), 16dp inline-start (`padding`), 24dp inline-end (`--_padding-inline-end` — the trailing
+ * edge sits 8dp further out than the other three sides in the M3 spec), 56dp one-line / 72dp
+ * two-line row height (`--_min-height`/`--_min-height-two-line`, applied in `list-item.css`).
+ * `sm` keeps the same asymmetry and the M3/WCAG 48dp touch-target floor proportionally, for a
+ * denser list that still reads as "M3-like" rather than hitting the exact dp values M3 doesn't
+ * itself define an alternate density for.
+ */
+export declare const LIST_SIZE_PRESET: {
+    lg: {
+        '--_min-height': string;
+        '--_min-height-two-line': string;
+        '--_padding-inline-end': string;
+        fontSize: string;
+        gap: string;
+        padding: string;
+    };
+    md: {
+        '--_min-height': string;
+        '--_min-height-two-line': string;
+        '--_padding-inline-end': string;
+        fontSize: string;
+        gap: string;
+        padding: string;
+    };
+    sm: {
+        '--_min-height': string;
+        '--_min-height-two-line': string;
+        '--_padding-inline-end': string;
+        fontSize: string;
+        gap: string;
+        padding: string;
+    };
+};
 /** Shared size preset for the file-input dropzone. */
 export declare const FILE_INPUT_SIZE_PRESET: {
     lg: {

package/dist/shared/size-presets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"size-presets.d.ts","sourceRoot":"","sources":["../../src/shared/size-presets.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;CAmBJ,CAAC;AAE3B,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;CAgBP,CAAC;AAE3B,uEAAuE;AACvE,eAAO,MAAM,mBAAmB;;;;;;;;;;;CAWH,CAAC;AAE9B,wDAAwD;AACxD,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;CAeF,CAAC;AAE9B,qDAAqD;AACrD,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;CAgBL,CAAC;AAE3B;;;;;GAKG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;CAgBf,CAAC;AAE3B,sDAAsD;AACtD,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;CAaT,CAAC"}
+{"version":3,"file":"size-presets.d.ts","sourceRoot":"","sources":["../../src/shared/size-presets.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;CAmBJ,CAAC;AAE3B,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;CAgBP,CAAC;AAE3B,uEAAuE;AACvE,eAAO,MAAM,mBAAmB;;;;;;;;;;;CAWH,CAAC;AAE9B,wDAAwD;AACxD,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;CAeF,CAAC;AAE9B,qDAAqD;AACrD,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;CAgBL,CAAC;AAE3B;;;;;GAKG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;CAgBf,CAAC;AAE3B;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;CAsBH,CAAC;AAE3B;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;CAyBH,CAAC;AAE3B,sDAAsD;AACtD,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;CAaT,CAAC"}

package/dist/shared/size-presets.js

@@ -93,6 +93,53 @@ var e = {
 		gap: "var(--size-1-5)"
 	}
 }, o = {
+	lg: {
+		"--_item-padding": "var(--size-2) var(--size-3-5)",
+		"--_panel-padding": "var(--size-1-5)",
+		"--_separator-margin": "var(--size-1-5)",
+		fontSize: "var(--text-base)",
+		gap: "var(--size-2-5)"
+	},
+	md: {
+		"--_item-padding": "var(--size-1-5) var(--size-3)",
+		"--_panel-padding": "var(--size-1)",
+		"--_separator-margin": "var(--size-1)",
+		fontSize: "var(--text-sm)",
+		gap: "var(--size-2)"
+	},
+	sm: {
+		"--_item-padding": "var(--size-1) var(--size-2-5)",
+		"--_panel-padding": "var(--size-0-5)",
+		"--_separator-margin": "var(--size-0-5)",
+		fontSize: "var(--text-xs)",
+		gap: "var(--size-1-5)"
+	}
+}, s = {
+	lg: {
+		"--_min-height": "var(--size-14)",
+		"--_min-height-two-line": "calc(var(--size-16) + var(--size-2))",
+		"--_padding-inline-end": "var(--size-6)",
+		fontSize: "var(--text-base)",
+		gap: "var(--size-4)",
+		padding: "var(--size-3) var(--size-4)"
+	},
+	md: {
+		"--_min-height": "var(--size-14)",
+		"--_min-height-two-line": "calc(var(--size-16) + var(--size-2))",
+		"--_padding-inline-end": "var(--size-6)",
+		fontSize: "var(--text-sm)",
+		gap: "var(--size-4)",
+		padding: "var(--size-2-5) var(--size-4)"
+	},
+	sm: {
+		"--_min-height": "var(--size-12)",
+		"--_min-height-two-line": "var(--size-16)",
+		"--_padding-inline-end": "var(--size-4)",
+		fontSize: "var(--text-xs)",
+		gap: "var(--size-2)",
+		padding: "var(--size-1-5) var(--size-2)"
+	}
+}, c = {
 	lg: {
 		"--_min-height": "var(--size-40)",
 		fontSize: "var(--text-base)"
@@ -107,6 +154,6 @@ var e = {
 	}
 };
 //#endregion
-export { n as CONTROL_SIZE_PRESET, e as FIELD_SIZE_PRESET, o as FILE_INPUT_SIZE_PRESET, a as MESSAGE_COMPOSER_SIZE_PRESET, i as SLIDER_SIZE_PRESET, r as SWITCH_SIZE_PRESET, t as TEXTAREA_SIZE_PRESET };
+export { n as CONTROL_SIZE_PRESET, e as FIELD_SIZE_PRESET, c as FILE_INPUT_SIZE_PRESET, s as LIST_SIZE_PRESET, o as MENU_SIZE_PRESET, a as MESSAGE_COMPOSER_SIZE_PRESET, i as SLIDER_SIZE_PRESET, r as SWITCH_SIZE_PRESET, t as TEXTAREA_SIZE_PRESET };
 
 //# sourceMappingURL=size-presets.js.map

package/dist/shared/size-presets.js.map

@@ -1 +1 @@
-{"version":3,"file":"size-presets.js","names":[],"sources":["../../src/shared/size-presets.ts"],"sourcesContent":["import type { SizeConfig } from '../styles/mixins/shape.css';\nimport type { ComponentSize } from './types';\n\n/** A preset with an entry for every ComponentSize key. */\ntype FullSizePreset = Record<ComponentSize, SizeConfig>;\n\n/** A preset that may omit some ComponentSize keys (sizeVariantMixin fills the gaps with its defaults). */\ntype PartialSizePreset = Partial<Record<ComponentSize, SizeConfig>>;\n\nexport const FIELD_SIZE_PRESET = {\n  lg: {\n    '--_field-height': 'var(--size-12)',\n    '--_padding': 'var(--size-2-5) var(--size-3-5)',\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n  },\n  md: {\n    '--_field-height': 'var(--size-10)',\n    '--_padding': 'var(--size-1-5) var(--size-3)',\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n  },\n  sm: {\n    '--_field-height': 'var(--size-8)',\n    '--_padding': 'var(--size-1) var(--size-2)',\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n  },\n} satisfies FullSizePreset;\n\nexport const TEXTAREA_SIZE_PRESET = {\n  lg: {\n    '--_padding': 'var(--size-2-5) var(--size-3-5)',\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n  },\n  md: {\n    '--_padding': 'var(--size-1-5) var(--size-3)',\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n  },\n  sm: {\n    '--_padding': 'var(--size-1) var(--size-2)',\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n  },\n} satisfies FullSizePreset;\n\n/** Shared size preset for checkbox and radio (icon + label layout). */\nexport const CONTROL_SIZE_PRESET = {\n  lg: {\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n    size: 'var(--size-6)',\n  },\n  sm: {\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n    size: 'var(--size-4)',\n  },\n} satisfies PartialSizePreset;\n\n/** Shared size preset for the switch toggle control. */\nexport const SWITCH_SIZE_PRESET = {\n  lg: {\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-3)',\n    height: 'var(--size-7)',\n    thumbSize: 'var(--size-6)',\n    width: 'var(--size-14)',\n  },\n  sm: {\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-2)',\n    height: 'var(--size-5)',\n    thumbSize: 'var(--size-4)',\n    width: 'var(--size-9)',\n  },\n} satisfies PartialSizePreset;\n\n/** Shared size preset for the slider track/thumb. */\nexport const SLIDER_SIZE_PRESET = {\n  lg: {\n    fontSize: 'var(--text-base)',\n    height: 'calc(var(--size-5) - var(--size-1))',\n    size: 'var(--size-5)',\n  },\n  md: {\n    fontSize: 'var(--text-base)',\n    height: 'var(--size-3)',\n    size: 'var(--size-5)',\n  },\n  sm: {\n    fontSize: 'var(--text-xs)',\n    height: 'var(--size-2)',\n    size: 'var(--size-4)',\n  },\n} satisfies FullSizePreset;\n\n/**\n * Size preset for the message composer card. Padding is symmetric (unlike\n * `TEXTAREA_SIZE_PRESET`'s field-shaped padding) since this scales a card that wraps a field\n * *and* a toolbar row, not a bare field — `md`'s padding matches the value the card used before\n * `size` scaled anything, so the default look is unchanged.\n */\nexport const MESSAGE_COMPOSER_SIZE_PRESET = {\n  lg: {\n    '--_padding': 'var(--size-4)',\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n  },\n  md: {\n    '--_padding': 'var(--size-3)',\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n  },\n  sm: {\n    '--_padding': 'var(--size-2)',\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n  },\n} satisfies FullSizePreset;\n\n/** Shared size preset for the file-input dropzone. */\nexport const FILE_INPUT_SIZE_PRESET = {\n  lg: {\n    '--_min-height': 'var(--size-40)',\n    fontSize: 'var(--text-base)',\n  },\n  md: {\n    '--_min-height': 'var(--size-32)',\n    fontSize: 'var(--text-sm)',\n  },\n  sm: {\n    '--_min-height': 'var(--size-28)',\n    fontSize: 'var(--text-xs)',\n  },\n} satisfies FullSizePreset;\n"],"mappings":";AASA,IAAa,IAAoB;CAC/B,IAAI;EACF,mBAAmB;EACnB,cAAc;EACd,UAAU;EACV,KAAK;CACP;CACA,IAAI;EACF,mBAAmB;EACnB,cAAc;EACd,UAAU;EACV,KAAK;CACP;CACA,IAAI;EACF,mBAAmB;EACnB,cAAc;EACd,UAAU;EACV,KAAK;CACP;AACF,GAEa,IAAuB;CAClC,IAAI;EACF,cAAc;EACd,UAAU;EACV,KAAK;CACP;CACA,IAAI;EACF,cAAc;EACd,UAAU;EACV,KAAK;CACP;CACA,IAAI;EACF,cAAc;EACd,UAAU;EACV,KAAK;CACP;AACF,GAGa,IAAsB;CACjC,IAAI;EACF,UAAU;EACV,KAAK;EACL,MAAM;CACR;CACA,IAAI;EACF,UAAU;EACV,KAAK;EACL,MAAM;CACR;AACF,GAGa,IAAqB;CAChC,IAAI;EACF,UAAU;EACV,KAAK;EACL,QAAQ;EACR,WAAW;EACX,OAAO;CACT;CACA,IAAI;EACF,UAAU;EACV,KAAK;EACL,QAAQ;EACR,WAAW;EACX,OAAO;CACT;AACF,GAGa,IAAqB;CAChC,IAAI;EACF,UAAU;EACV,QAAQ;EACR,MAAM;CACR;CACA,IAAI;EACF,UAAU;EACV,QAAQ;EACR,MAAM;CACR;CACA,IAAI;EACF,UAAU;EACV,QAAQ;EACR,MAAM;CACR;AACF,GAQa,IAA+B;CAC1C,IAAI;EACF,cAAc;EACd,UAAU;EACV,KAAK;CACP;CACA,IAAI;EACF,cAAc;EACd,UAAU;EACV,KAAK;CACP;CACA,IAAI;EACF,cAAc;EACd,UAAU;EACV,KAAK;CACP;AACF,GAGa,IAAyB;CACpC,IAAI;EACF,iBAAiB;EACjB,UAAU;CACZ;CACA,IAAI;EACF,iBAAiB;EACjB,UAAU;CACZ;CACA,IAAI;EACF,iBAAiB;EACjB,UAAU;CACZ;AACF"}
+{"version":3,"file":"size-presets.js","names":[],"sources":["../../src/shared/size-presets.ts"],"sourcesContent":["import type { SizeConfig } from '../styles/mixins/shape.css';\nimport type { ComponentSize } from './types';\n\n/** A preset with an entry for every ComponentSize key. */\ntype FullSizePreset = Record<ComponentSize, SizeConfig>;\n\n/** A preset that may omit some ComponentSize keys (sizeVariantMixin fills the gaps with its defaults). */\ntype PartialSizePreset = Partial<Record<ComponentSize, SizeConfig>>;\n\nexport const FIELD_SIZE_PRESET = {\n  lg: {\n    '--_field-height': 'var(--size-12)',\n    '--_padding': 'var(--size-2-5) var(--size-3-5)',\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n  },\n  md: {\n    '--_field-height': 'var(--size-10)',\n    '--_padding': 'var(--size-1-5) var(--size-3)',\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n  },\n  sm: {\n    '--_field-height': 'var(--size-8)',\n    '--_padding': 'var(--size-1) var(--size-2)',\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n  },\n} satisfies FullSizePreset;\n\nexport const TEXTAREA_SIZE_PRESET = {\n  lg: {\n    '--_padding': 'var(--size-2-5) var(--size-3-5)',\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n  },\n  md: {\n    '--_padding': 'var(--size-1-5) var(--size-3)',\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n  },\n  sm: {\n    '--_padding': 'var(--size-1) var(--size-2)',\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n  },\n} satisfies FullSizePreset;\n\n/** Shared size preset for checkbox and radio (icon + label layout). */\nexport const CONTROL_SIZE_PRESET = {\n  lg: {\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n    size: 'var(--size-6)',\n  },\n  sm: {\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n    size: 'var(--size-4)',\n  },\n} satisfies PartialSizePreset;\n\n/** Shared size preset for the switch toggle control. */\nexport const SWITCH_SIZE_PRESET = {\n  lg: {\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-3)',\n    height: 'var(--size-7)',\n    thumbSize: 'var(--size-6)',\n    width: 'var(--size-14)',\n  },\n  sm: {\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-2)',\n    height: 'var(--size-5)',\n    thumbSize: 'var(--size-4)',\n    width: 'var(--size-9)',\n  },\n} satisfies PartialSizePreset;\n\n/** Shared size preset for the slider track/thumb. */\nexport const SLIDER_SIZE_PRESET = {\n  lg: {\n    fontSize: 'var(--text-base)',\n    height: 'calc(var(--size-5) - var(--size-1))',\n    size: 'var(--size-5)',\n  },\n  md: {\n    fontSize: 'var(--text-base)',\n    height: 'var(--size-3)',\n    size: 'var(--size-5)',\n  },\n  sm: {\n    fontSize: 'var(--text-xs)',\n    height: 'var(--size-2)',\n    size: 'var(--size-4)',\n  },\n} satisfies FullSizePreset;\n\n/**\n * Size preset for the message composer card. Padding is symmetric (unlike\n * `TEXTAREA_SIZE_PRESET`'s field-shaped padding) since this scales a card that wraps a field\n * *and* a toolbar row, not a bare field — `md`'s padding matches the value the card used before\n * `size` scaled anything, so the default look is unchanged.\n */\nexport const MESSAGE_COMPOSER_SIZE_PRESET = {\n  lg: {\n    '--_padding': 'var(--size-4)',\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n  },\n  md: {\n    '--_padding': 'var(--size-3)',\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n  },\n  sm: {\n    '--_padding': 'var(--size-2)',\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n  },\n} satisfies FullSizePreset;\n\n/**\n * Size preset for `ore-menu`'s floating panel, `ore-menu-item`'s row, and `ore-menu-separator`'s\n * margin. `--_panel-padding`, `--_item-padding`, and `--_separator-margin` are custom pass-through\n * keys (not one of `SizeConfig`'s named slots) since the panel, its items, and its separators each\n * need independently-scaling spacing; `md`'s values match what `menu.css`/`menu-item.css`/\n * `menu-separator.css` hardcoded before `size` was wired up, so the default look is unchanged.\n * `--_font-size`/`--_gap` are inherited by `ore-menu-item` from `ore-menu`'s own host — custom\n * properties cascade down through light-DOM children the same way they cascade into a shadow root.\n */\nexport const MENU_SIZE_PRESET = {\n  lg: {\n    '--_item-padding': 'var(--size-2) var(--size-3-5)',\n    '--_panel-padding': 'var(--size-1-5)',\n    '--_separator-margin': 'var(--size-1-5)',\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n  },\n  md: {\n    '--_item-padding': 'var(--size-1-5) var(--size-3)',\n    '--_panel-padding': 'var(--size-1)',\n    '--_separator-margin': 'var(--size-1)',\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n  },\n  sm: {\n    '--_item-padding': 'var(--size-1) var(--size-2-5)',\n    '--_panel-padding': 'var(--size-0-5)',\n    '--_separator-margin': 'var(--size-0-5)',\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n  },\n} satisfies FullSizePreset;\n\n/**\n * Size preset for `ore-list`'s own host. `ore-list-item` has no `sizeVariantMixin` call of its\n * own — it reads `--_gap`/`--_padding`/`--_padding-inline-end`/`--_font-size`/`--_min-height`/\n * `--_min-height-two-line` inherited straight from its parent `ore-list`'s shadow host (custom\n * properties cascade through light-DOM children the same way `MENU_SIZE_PRESET` cascades from\n * `ore-menu` into `ore-menu-item`), with fallback defaults for standalone use outside an\n * `ore-list`.\n *\n * Follows Material 3's list-item spacing at `md`/`lg`: 16dp between leading/content/trailing\n * (`gap`), 16dp inline-start (`padding`), 24dp inline-end (`--_padding-inline-end` — the trailing\n * edge sits 8dp further out than the other three sides in the M3 spec), 56dp one-line / 72dp\n * two-line row height (`--_min-height`/`--_min-height-two-line`, applied in `list-item.css`).\n * `sm` keeps the same asymmetry and the M3/WCAG 48dp touch-target floor proportionally, for a\n * denser list that still reads as \"M3-like\" rather than hitting the exact dp values M3 doesn't\n * itself define an alternate density for.\n */\nexport const LIST_SIZE_PRESET = {\n  lg: {\n    '--_min-height': 'var(--size-14)',\n    '--_min-height-two-line': 'calc(var(--size-16) + var(--size-2))',\n    '--_padding-inline-end': 'var(--size-6)',\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-4)',\n    padding: 'var(--size-3) var(--size-4)',\n  },\n  md: {\n    '--_min-height': 'var(--size-14)',\n    '--_min-height-two-line': 'calc(var(--size-16) + var(--size-2))',\n    '--_padding-inline-end': 'var(--size-6)',\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-4)',\n    padding: 'var(--size-2-5) var(--size-4)',\n  },\n  sm: {\n    '--_min-height': 'var(--size-12)',\n    '--_min-height-two-line': 'var(--size-16)',\n    '--_padding-inline-end': 'var(--size-4)',\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-2)',\n    padding: 'var(--size-1-5) var(--size-2)',\n  },\n} satisfies FullSizePreset;\n\n/** Shared size preset for the file-input dropzone. */\nexport const FILE_INPUT_SIZE_PRESET = {\n  lg: {\n    '--_min-height': 'var(--size-40)',\n    fontSize: 'var(--text-base)',\n  },\n  md: {\n    '--_min-height': 'var(--size-32)',\n    fontSize: 'var(--text-sm)',\n  },\n  sm: {\n    '--_min-height': 'var(--size-28)',\n    fontSize: 'var(--text-xs)',\n  },\n} satisfies FullSizePreset;\n"],"mappings":";AASA,IAAa,IAAoB;CAC/B,IAAI;EACF,mBAAmB;EACnB,cAAc;EACd,UAAU;EACV,KAAK;CACP;CACA,IAAI;EACF,mBAAmB;EACnB,cAAc;EACd,UAAU;EACV,KAAK;CACP;CACA,IAAI;EACF,mBAAmB;EACnB,cAAc;EACd,UAAU;EACV,KAAK;CACP;AACF,GAEa,IAAuB;CAClC,IAAI;EACF,cAAc;EACd,UAAU;EACV,KAAK;CACP;CACA,IAAI;EACF,cAAc;EACd,UAAU;EACV,KAAK;CACP;CACA,IAAI;EACF,cAAc;EACd,UAAU;EACV,KAAK;CACP;AACF,GAGa,IAAsB;CACjC,IAAI;EACF,UAAU;EACV,KAAK;EACL,MAAM;CACR;CACA,IAAI;EACF,UAAU;EACV,KAAK;EACL,MAAM;CACR;AACF,GAGa,IAAqB;CAChC,IAAI;EACF,UAAU;EACV,KAAK;EACL,QAAQ;EACR,WAAW;EACX,OAAO;CACT;CACA,IAAI;EACF,UAAU;EACV,KAAK;EACL,QAAQ;EACR,WAAW;EACX,OAAO;CACT;AACF,GAGa,IAAqB;CAChC,IAAI;EACF,UAAU;EACV,QAAQ;EACR,MAAM;CACR;CACA,IAAI;EACF,UAAU;EACV,QAAQ;EACR,MAAM;CACR;CACA,IAAI;EACF,UAAU;EACV,QAAQ;EACR,MAAM;CACR;AACF,GAQa,IAA+B;CAC1C,IAAI;EACF,cAAc;EACd,UAAU;EACV,KAAK;CACP;CACA,IAAI;EACF,cAAc;EACd,UAAU;EACV,KAAK;CACP;CACA,IAAI;EACF,cAAc;EACd,UAAU;EACV,KAAK;CACP;AACF,GAWa,IAAmB;CAC9B,IAAI;EACF,mBAAmB;EACnB,oBAAoB;EACpB,uBAAuB;EACvB,UAAU;EACV,KAAK;CACP;CACA,IAAI;EACF,mBAAmB;EACnB,oBAAoB;EACpB,uBAAuB;EACvB,UAAU;EACV,KAAK;CACP;CACA,IAAI;EACF,mBAAmB;EACnB,oBAAoB;EACpB,uBAAuB;EACvB,UAAU;EACV,KAAK;CACP;AACF,GAkBa,IAAmB;CAC9B,IAAI;EACF,iBAAiB;EACjB,0BAA0B;EAC1B,yBAAyB;EACzB,UAAU;EACV,KAAK;EACL,SAAS;CACX;CACA,IAAI;EACF,iBAAiB;EACjB,0BAA0B;EAC1B,yBAAyB;EACzB,UAAU;EACV,KAAK;EACL,SAAS;CACX;CACA,IAAI;EACF,iBAAiB;EACjB,0BAA0B;EAC1B,yBAAyB;EACzB,UAAU;EACV,KAAK;EACL,SAAS;CACX;AACF,GAGa,IAAyB;CACpC,IAAI;EACF,iBAAiB;EACjB,UAAU;CACZ;CACA,IAAI;EACF,iBAAiB;EACjB,UAAU;CACZ;CACA,IAAI;EACF,iBAAiB;EACjB,UAAU;CACZ;AACF"}

package/dist/shared/types.d.ts

@@ -58,6 +58,11 @@ export type BaseFormProps = {
     'label-placement'?: 'inset' | 'outside';
     name?: string;
     size?: ComponentSize;
+    /**
+     * Shows an inline green check icon inside the field to confirm the value has passed
+     * validation. Ignored while `error` is set — an error always wins.
+     */
+    success?: boolean;
 };
 type FieldVisualProps<TVariant extends VisualVariant> = {
     rounded?: RoundedSize | '';

package/dist/shared/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/shared/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/shared/types.ts"],"names":[],"mappings":"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"}

package/dist/styles/index.cjs

@@ -1,2 +1,2 @@
-const e=require("./mixins/accessibility.css.cjs"),t=require("./mixins/shape.css.cjs"),n=require("./mixins/states.css.cjs"),r=require("./mixins/theme.css.cjs"),i=require("./mixins/animation.css.cjs"),a=require("./mixins/variants.css.cjs"),o=require("./mixins/table-base.css.cjs");var s=[r.colorThemeMixin,r.elevationMixin,t.paddingMixin,t.roundedVariantMixin],c=[r.colorThemeMixin,e.coarsePointerMixin,e.reducedMotionMixin,t.roundedVariantMixin,n.disabledLoadingMixin];exports.SR_ONLY_INLINE_STYLE=e.SR_ONLY_INLINE_STYLE,exports.coarsePointerMixin=e.coarsePointerMixin,exports.colorThemeMixin=r.colorThemeMixin,exports.disabledLoadingMixin=n.disabledLoadingMixin,exports.disabledStateMixin=n.disabledStateMixin,exports.elevationMixin=r.elevationMixin,exports.fieldMixins=c,exports.forcedColorsFocusMixin=r.forcedColorsFocusMixin,exports.forcedColorsFormControlMixin=r.forcedColorsFormControlMixin,exports.forcedColorsMixin=r.forcedColorsMixin,exports.frostVariantMixin=a.frostVariantMixin,exports.rainbowEffectMixin=i.rainbowEffectMixin,exports.reducedMotionMixin=e.reducedMotionMixin,exports.roundedVariantMixin=t.roundedVariantMixin,exports.shineEffectMixin=i.shineEffectMixin,exports.sizeVariantMixin=t.sizeVariantMixin,exports.srOnlyMixin=e.srOnlyMixin,exports.surfaceMixins=s,exports.tableBaseMixin=o.tableBaseMixin;
+const e=require("./mixins/accessibility.css.cjs"),t=require("./mixins/shape.css.cjs"),n=require("./mixins/states.css.cjs"),r=require("./mixins/theme.css.cjs"),i=require("./mixins/animation.css.cjs"),a=require("./mixins/variants.css.cjs"),o=require("./mixins/field-variants.css.cjs"),s=require("./mixins/table-base.css.cjs");var c=[r.colorThemeMixin,r.elevationMixin,t.paddingMixin,t.roundedVariantMixin],l=[r.colorThemeMixin,e.coarsePointerMixin,e.reducedMotionMixin,t.roundedVariantMixin,n.disabledLoadingMixin];exports.SR_ONLY_INLINE_STYLE=e.SR_ONLY_INLINE_STYLE,exports.coarsePointerMixin=e.coarsePointerMixin,exports.colorThemeMixin=r.colorThemeMixin,exports.disabledLoadingMixin=n.disabledLoadingMixin,exports.disabledStateMixin=n.disabledStateMixin,exports.elevationMixin=r.elevationMixin,exports.fieldMixins=l,exports.fieldVariantMixin=o.fieldVariantMixin,exports.forcedColorsFocusMixin=r.forcedColorsFocusMixin,exports.forcedColorsFormControlMixin=r.forcedColorsFormControlMixin,exports.forcedColorsMixin=r.forcedColorsMixin,exports.frostVariantMixin=a.frostVariantMixin,exports.rainbowEffectMixin=i.rainbowEffectMixin,exports.reducedMotionMixin=e.reducedMotionMixin,exports.roundedVariantMixin=t.roundedVariantMixin,exports.shineEffectMixin=i.shineEffectMixin,exports.sizeVariantMixin=t.sizeVariantMixin,exports.srOnlyMixin=e.srOnlyMixin,exports.surfaceMixins=c,exports.tableBaseMixin=s.tableBaseMixin;
 //# sourceMappingURL=index.cjs.map

package/dist/styles/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../src/styles/index.ts"],"sourcesContent":["/**\n * Shared Mixins & Effects\n *\n * Reusable CSS mixins for common component patterns.\n */\n\nimport { coarsePointerMixin, reducedMotionMixin } from './mixins/accessibility.css';\nimport { paddingMixin, roundedVariantMixin } from './mixins/shape.css';\nimport { disabledLoadingMixin } from './mixins/states.css';\nimport { colorThemeMixin, elevationMixin } from './mixins/theme.css';\n\n// Accessibility Mixins\nexport { coarsePointerMixin, reducedMotionMixin, SR_ONLY_INLINE_STYLE, srOnlyMixin } from './mixins/accessibility.css';\n// Effects\nexport {\n  rainbowEffectMixin,\n  registerRainbowProperty,\n  registerShineProperty,\n  shineEffectMixin,\n} from './mixins/animation.css';\n// Shape Mixins (padding, rounded, size)\nexport { paddingMixin, roundedVariantMixin, sizeVariantMixin } from './mixins/shape.css';\n// State Mixins\nexport { disabledLoadingMixin, disabledStateMixin, loadingStateMixin } from './mixins/states.css';\n// Theme Mixins (color, elevation, forced-colors)\nexport {\n  colorThemeMixin,\n  elevationMixin,\n  forcedColorsFocusMixin,\n  forcedColorsFormControlMixin,\n  forcedColorsMixin,\n} from './mixins/theme.css';\n// Frost Mixin\nexport { frostVariantMixin } from './mixins/variants.css';\n// Table Base Mixin\nexport { tableBaseMixin } from './mixins/table-base.css';\n\n// ── Preset Arrays ─────────────────────────────────────────────────────────────\n\n/**\n * Base mixins for elevated surface components (box, card).\n * Covers theming, elevation shadows, padding, and border radius.\n *\n * @example\n * ```ts\n * styles: [...surfaceMixins, frostVariantMixin('.box'), componentStyles]\n * ```\n */\nexport const surfaceMixins = [colorThemeMixin, elevationMixin, paddingMixin, roundedVariantMixin] as const;\n\n/**\n * Base mixins shared by every text input component (input, textarea, file-input).\n * Covers theming, coarse-pointer targets, reduced-motion, border radius, and\n * disabled/loading states.\n *\n * **Required additions** (component-specific arguments, so not included here):\n * - `sizeVariantMixin(YOUR_PRESET)` — supply the component's size config.\n * - `forcedColorsFocusMixin(selector)` — **mandatory** for WCAG forced-colors\n *   compliance. Pass the CSS selector for the component's focusable inner\n *   element (e.g. `'input'`, `'textarea'`, `'.dropzone'`). Omitting this\n *   removes the focus ring in Windows High Contrast mode.\n *\n * @example\n * ```ts\n * styles: [...fieldMixins, sizeVariantMixin(FIELD_SIZE_PRESET), forcedColorsFocusMixin('input'), componentStyles]\n * ```\n */\nexport const fieldMixins = [\n  colorThemeMixin,\n  coarsePointerMixin,\n  reducedMotionMixin,\n  roundedVariantMixin,\n  disabledLoadingMixin,\n] as const;\n"],"mappings":"uRAgDA,IAAa,EAAgB,CAAC,EAAA,gBAAiB,EAAA,eAAgB,EAAA,aAAc,EAAA,mBAAmB,EAmBnF,EAAc,CACzB,EAAA,gBACA,EAAA,mBACA,EAAA,mBACA,EAAA,oBACA,EAAA,oBACF"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/styles/index.ts"],"sourcesContent":["/**\n * Shared Mixins & Effects\n *\n * Reusable CSS mixins for common component patterns.\n */\n\nimport { coarsePointerMixin, reducedMotionMixin } from './mixins/accessibility.css';\nimport { paddingMixin, roundedVariantMixin } from './mixins/shape.css';\nimport { disabledLoadingMixin } from './mixins/states.css';\nimport { colorThemeMixin, elevationMixin } from './mixins/theme.css';\n\n// Accessibility Mixins\nexport { coarsePointerMixin, reducedMotionMixin, SR_ONLY_INLINE_STYLE, srOnlyMixin } from './mixins/accessibility.css';\n// Effects\nexport {\n  rainbowEffectMixin,\n  registerRainbowProperty,\n  registerShineProperty,\n  shineEffectMixin,\n} from './mixins/animation.css';\n// Shape Mixins (padding, rounded, size)\nexport { paddingMixin, roundedVariantMixin, sizeVariantMixin } from './mixins/shape.css';\n// State Mixins\nexport { disabledLoadingMixin, disabledStateMixin, loadingStateMixin } from './mixins/states.css';\n// Theme Mixins (color, elevation, forced-colors)\nexport {\n  colorThemeMixin,\n  elevationMixin,\n  forcedColorsFocusMixin,\n  forcedColorsFormControlMixin,\n  forcedColorsMixin,\n} from './mixins/theme.css';\n// Frost Mixin\nexport { frostVariantMixin } from './mixins/variants.css';\n// Field Variant Mixin (solid/flat/bordered/outline/ghost, shared by text-entry fields)\nexport { fieldVariantMixin, type FieldVariantMixinOptions } from './mixins/field-variants.css';\n// Table Base Mixin\nexport { tableBaseMixin } from './mixins/table-base.css';\n\n// ── Preset Arrays ─────────────────────────────────────────────────────────────\n\n/**\n * Base mixins for elevated surface components (box, card).\n * Covers theming, elevation shadows, padding, and border radius.\n *\n * @example\n * ```ts\n * styles: [...surfaceMixins, frostVariantMixin('.box'), componentStyles]\n * ```\n */\nexport const surfaceMixins = [colorThemeMixin, elevationMixin, paddingMixin, roundedVariantMixin] as const;\n\n/**\n * Base mixins shared by every text input component (input, textarea, file-input).\n * Covers theming, coarse-pointer targets, reduced-motion, border radius, and\n * disabled/loading states.\n *\n * **Required additions** (component-specific arguments, so not included here):\n * - `sizeVariantMixin(YOUR_PRESET)` — supply the component's size config.\n * - `forcedColorsFocusMixin(selector)` — **mandatory** for WCAG forced-colors\n *   compliance. Pass the CSS selector for the component's focusable inner\n *   element (e.g. `'input'`, `'textarea'`, `'.dropzone'`). Omitting this\n *   removes the focus ring in Windows High Contrast mode.\n *\n * @example\n * ```ts\n * styles: [...fieldMixins, sizeVariantMixin(FIELD_SIZE_PRESET), forcedColorsFocusMixin('input'), componentStyles]\n * ```\n */\nexport const fieldMixins = [\n  colorThemeMixin,\n  coarsePointerMixin,\n  reducedMotionMixin,\n  roundedVariantMixin,\n  disabledLoadingMixin,\n] as const;\n"],"mappings":"oUAkDA,IAAa,EAAgB,CAAC,EAAA,gBAAiB,EAAA,eAAgB,EAAA,aAAc,EAAA,mBAAmB,EAmBnF,EAAc,CACzB,EAAA,gBACA,EAAA,mBACA,EAAA,mBACA,EAAA,oBACA,EAAA,oBACF"}

package/dist/styles/index.d.ts

@@ -9,6 +9,7 @@ export { paddingMixin, roundedVariantMixin, sizeVariantMixin } from './mixins/sh
 export { disabledLoadingMixin, disabledStateMixin, loadingStateMixin } from './mixins/states.css';
 export { colorThemeMixin, elevationMixin, forcedColorsFocusMixin, forcedColorsFormControlMixin, forcedColorsMixin, } from './mixins/theme.css';
 export { frostVariantMixin } from './mixins/variants.css';
+export { fieldVariantMixin, type FieldVariantMixinOptions } from './mixins/field-variants.css';
 export { tableBaseMixin } from './mixins/table-base.css';
 /**
  * Base mixins for elevated surface components (box, card).

package/dist/styles/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/styles/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAQH,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEvH,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEzF,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAElG,OAAO,EACL,eAAe,EACf,cAAc,EACd,sBAAsB,EACtB,4BAA4B,EAC5B,iBAAiB,GAClB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAIzD;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,uJAAgF,CAAC;AAE3G;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,WAAW,0LAMd,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/styles/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAQH,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEvH,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEzF,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAElG,OAAO,EACL,eAAe,EACf,cAAc,EACd,sBAAsB,EACtB,4BAA4B,EAC5B,iBAAiB,GAClB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D,OAAO,EAAE,iBAAiB,EAAE,KAAK,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AAE/F,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAIzD;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,uJAAgF,CAAC;AAE3G;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,WAAW,0LAMd,CAAC"}

package/dist/styles/index.js

@@ -4,14 +4,15 @@ import { disabledLoadingMixin as s, disabledStateMixin as c } from "./mixins/sta
 import { colorThemeMixin as l, elevationMixin as u, forcedColorsFocusMixin as d, forcedColorsFormControlMixin as f, forcedColorsMixin as p } from "./mixins/theme.css.js";
 import { rainbowEffectMixin as m, shineEffectMixin as h } from "./mixins/animation.css.js";
 import { frostVariantMixin as g } from "./mixins/variants.css.js";
-import { tableBaseMixin as _ } from "./mixins/table-base.css.js";
+import { fieldVariantMixin as _ } from "./mixins/field-variants.css.js";
+import { tableBaseMixin as v } from "./mixins/table-base.css.js";
 //#region src/styles/index.ts
-var v = [
+var y = [
 	l,
 	u,
 	i,
 	a
-], y = [
+], b = [
 	l,
 	t,
 	n,
@@ -19,6 +20,6 @@ var v = [
 	s
 ];
 //#endregion
-export { e as SR_ONLY_INLINE_STYLE, t as coarsePointerMixin, l as colorThemeMixin, s as disabledLoadingMixin, c as disabledStateMixin, u as elevationMixin, y as fieldMixins, d as forcedColorsFocusMixin, f as forcedColorsFormControlMixin, p as forcedColorsMixin, g as frostVariantMixin, m as rainbowEffectMixin, n as reducedMotionMixin, a as roundedVariantMixin, h as shineEffectMixin, o as sizeVariantMixin, r as srOnlyMixin, v as surfaceMixins, _ as tableBaseMixin };
+export { e as SR_ONLY_INLINE_STYLE, t as coarsePointerMixin, l as colorThemeMixin, s as disabledLoadingMixin, c as disabledStateMixin, u as elevationMixin, b as fieldMixins, _ as fieldVariantMixin, d as forcedColorsFocusMixin, f as forcedColorsFormControlMixin, p as forcedColorsMixin, g as frostVariantMixin, m as rainbowEffectMixin, n as reducedMotionMixin, a as roundedVariantMixin, h as shineEffectMixin, o as sizeVariantMixin, r as srOnlyMixin, y as surfaceMixins, v as tableBaseMixin };
 
 //# sourceMappingURL=index.js.map

package/dist/styles/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/styles/index.ts"],"sourcesContent":["/**\n * Shared Mixins & Effects\n *\n * Reusable CSS mixins for common component patterns.\n */\n\nimport { coarsePointerMixin, reducedMotionMixin } from './mixins/accessibility.css';\nimport { paddingMixin, roundedVariantMixin } from './mixins/shape.css';\nimport { disabledLoadingMixin } from './mixins/states.css';\nimport { colorThemeMixin, elevationMixin } from './mixins/theme.css';\n\n// Accessibility Mixins\nexport { coarsePointerMixin, reducedMotionMixin, SR_ONLY_INLINE_STYLE, srOnlyMixin } from './mixins/accessibility.css';\n// Effects\nexport {\n  rainbowEffectMixin,\n  registerRainbowProperty,\n  registerShineProperty,\n  shineEffectMixin,\n} from './mixins/animation.css';\n// Shape Mixins (padding, rounded, size)\nexport { paddingMixin, roundedVariantMixin, sizeVariantMixin } from './mixins/shape.css';\n// State Mixins\nexport { disabledLoadingMixin, disabledStateMixin, loadingStateMixin } from './mixins/states.css';\n// Theme Mixins (color, elevation, forced-colors)\nexport {\n  colorThemeMixin,\n  elevationMixin,\n  forcedColorsFocusMixin,\n  forcedColorsFormControlMixin,\n  forcedColorsMixin,\n} from './mixins/theme.css';\n// Frost Mixin\nexport { frostVariantMixin } from './mixins/variants.css';\n// Table Base Mixin\nexport { tableBaseMixin } from './mixins/table-base.css';\n\n// ── Preset Arrays ─────────────────────────────────────────────────────────────\n\n/**\n * Base mixins for elevated surface components (box, card).\n * Covers theming, elevation shadows, padding, and border radius.\n *\n * @example\n * ```ts\n * styles: [...surfaceMixins, frostVariantMixin('.box'), componentStyles]\n * ```\n */\nexport const surfaceMixins = [colorThemeMixin, elevationMixin, paddingMixin, roundedVariantMixin] as const;\n\n/**\n * Base mixins shared by every text input component (input, textarea, file-input).\n * Covers theming, coarse-pointer targets, reduced-motion, border radius, and\n * disabled/loading states.\n *\n * **Required additions** (component-specific arguments, so not included here):\n * - `sizeVariantMixin(YOUR_PRESET)` — supply the component's size config.\n * - `forcedColorsFocusMixin(selector)` — **mandatory** for WCAG forced-colors\n *   compliance. Pass the CSS selector for the component's focusable inner\n *   element (e.g. `'input'`, `'textarea'`, `'.dropzone'`). Omitting this\n *   removes the focus ring in Windows High Contrast mode.\n *\n * @example\n * ```ts\n * styles: [...fieldMixins, sizeVariantMixin(FIELD_SIZE_PRESET), forcedColorsFocusMixin('input'), componentStyles]\n * ```\n */\nexport const fieldMixins = [\n  colorThemeMixin,\n  coarsePointerMixin,\n  reducedMotionMixin,\n  roundedVariantMixin,\n  disabledLoadingMixin,\n] as const;\n"],"mappings":";;;;;;;;AAgDA,IAAa,IAAgB;CAAC;CAAiB;CAAgB;CAAc;AAAmB,GAmBnF,IAAc;CACzB;CACA;CACA;CACA;CACA;AACF"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/styles/index.ts"],"sourcesContent":["/**\n * Shared Mixins & Effects\n *\n * Reusable CSS mixins for common component patterns.\n */\n\nimport { coarsePointerMixin, reducedMotionMixin } from './mixins/accessibility.css';\nimport { paddingMixin, roundedVariantMixin } from './mixins/shape.css';\nimport { disabledLoadingMixin } from './mixins/states.css';\nimport { colorThemeMixin, elevationMixin } from './mixins/theme.css';\n\n// Accessibility Mixins\nexport { coarsePointerMixin, reducedMotionMixin, SR_ONLY_INLINE_STYLE, srOnlyMixin } from './mixins/accessibility.css';\n// Effects\nexport {\n  rainbowEffectMixin,\n  registerRainbowProperty,\n  registerShineProperty,\n  shineEffectMixin,\n} from './mixins/animation.css';\n// Shape Mixins (padding, rounded, size)\nexport { paddingMixin, roundedVariantMixin, sizeVariantMixin } from './mixins/shape.css';\n// State Mixins\nexport { disabledLoadingMixin, disabledStateMixin, loadingStateMixin } from './mixins/states.css';\n// Theme Mixins (color, elevation, forced-colors)\nexport {\n  colorThemeMixin,\n  elevationMixin,\n  forcedColorsFocusMixin,\n  forcedColorsFormControlMixin,\n  forcedColorsMixin,\n} from './mixins/theme.css';\n// Frost Mixin\nexport { frostVariantMixin } from './mixins/variants.css';\n// Field Variant Mixin (solid/flat/bordered/outline/ghost, shared by text-entry fields)\nexport { fieldVariantMixin, type FieldVariantMixinOptions } from './mixins/field-variants.css';\n// Table Base Mixin\nexport { tableBaseMixin } from './mixins/table-base.css';\n\n// ── Preset Arrays ─────────────────────────────────────────────────────────────\n\n/**\n * Base mixins for elevated surface components (box, card).\n * Covers theming, elevation shadows, padding, and border radius.\n *\n * @example\n * ```ts\n * styles: [...surfaceMixins, frostVariantMixin('.box'), componentStyles]\n * ```\n */\nexport const surfaceMixins = [colorThemeMixin, elevationMixin, paddingMixin, roundedVariantMixin] as const;\n\n/**\n * Base mixins shared by every text input component (input, textarea, file-input).\n * Covers theming, coarse-pointer targets, reduced-motion, border radius, and\n * disabled/loading states.\n *\n * **Required additions** (component-specific arguments, so not included here):\n * - `sizeVariantMixin(YOUR_PRESET)` — supply the component's size config.\n * - `forcedColorsFocusMixin(selector)` — **mandatory** for WCAG forced-colors\n *   compliance. Pass the CSS selector for the component's focusable inner\n *   element (e.g. `'input'`, `'textarea'`, `'.dropzone'`). Omitting this\n *   removes the focus ring in Windows High Contrast mode.\n *\n * @example\n * ```ts\n * styles: [...fieldMixins, sizeVariantMixin(FIELD_SIZE_PRESET), forcedColorsFocusMixin('input'), componentStyles]\n * ```\n */\nexport const fieldMixins = [\n  colorThemeMixin,\n  coarsePointerMixin,\n  reducedMotionMixin,\n  roundedVariantMixin,\n  disabledLoadingMixin,\n] as const;\n"],"mappings":";;;;;;;;;AAkDA,IAAa,IAAgB;CAAC;CAAiB;CAAgB;CAAc;AAAmB,GAmBnF,IAAc;CACzB;CACA;CACA;CACA;CACA;AACF"}

package/dist/styles/mixins/field-variants.css.cjs

@@ -0,0 +1,85 @@
+let e=require("@vielzeug/ore");var t=({accentVar:t=`--_theme-focus`,container:n,text:r=n,tokenPrefix:i})=>e.css`
+  @layer refine.variants {
+    /* Solid (default) */
+    :host(:not([variant])),
+    :host([variant='solid']) {
+      --_bg: var(--${i}-bg, var(--color-contrast-50));
+      --_border-color: var(--${i}-border-color, var(--color-contrast-300));
+    }
+
+    :host(:not([variant])) ${n}, :host([variant='solid']) ${n} {
+      box-shadow: var(--shadow-2xs);
+    }
+
+    /* Flat */
+    :host([variant='flat']) {
+      --_bg: var(--${i}-bg, var(--color-contrast-100));
+      --_border-color: var(--${i}-border-color, color-mix(in oklch, var(${t}) 20%, transparent));
+    }
+
+    :host([variant='flat']) ${n} {
+      box-shadow: var(--inset-shadow-2xs);
+    }
+
+    :host([variant='flat']:not([disabled])) ${n}:hover {
+      background: var(--${i}-hover-bg, color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));
+      border-color: var(
+        --${i}-hover-border-color,
+        color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300))
+      );
+    }
+
+    :host([variant='flat']:not([disabled])) ${n}:focus-within {
+      background: var(--${i}-focus-bg, color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));
+      border-color: var(--${i}-focus-border-color, color-mix(in oklch, var(${t}) 60%, transparent));
+      box-shadow: var(--_theme-shadow);
+    }
+
+    /* Bordered */
+    :host([variant='bordered']) {
+      --_bg: var(--${i}-bg, var(--_theme-backdrop));
+      --_border-color: var(--${i}-border-color, color-mix(in oklch, var(${t}) 70%, transparent));
+    }
+
+    :host([variant='bordered']:not([disabled])) ${n}:hover {
+      border-color: var(--${i}-hover-border-color, var(${t}));
+    }
+
+    :host([variant='bordered']) ${r} {
+      color: var(--_theme-base);
+      caret-color: var(--_theme-base);
+    }
+
+    :host([variant='bordered']) ${r}::placeholder {
+      color: var(--${i}-placeholder-color, color-mix(in oklch, var(--_theme-base) 45%, transparent));
+    }
+
+    /* Outline — border always visible, so unlike the other variants it can't lean on a
+       per-component \`:host{}\` base fallback for \`--_border-color\` that may or may not exist
+       (\`ore-message-composer\` has none — every other rule here sets both custom properties, so
+       its base layer omits a default on the assumption that always holds). Set explicitly. */
+    :host([variant='outline']) {
+      --_bg: var(--${i}-bg, transparent);
+      --_border-color: var(--${i}-border-color, var(--color-contrast-300));
+    }
+
+    :host([variant='outline']) ${n} {
+      box-shadow: none;
+    }
+
+    /* Ghost */
+    :host([variant='ghost']) {
+      --_bg: var(--${i}-bg, transparent);
+      --_border-color: var(--${i}-border-color, transparent);
+    }
+
+    :host([variant='ghost']) ${n} {
+      box-shadow: none;
+    }
+
+    :host([variant='ghost']:not([disabled])) ${n}:hover {
+      background: var(--${i}-hover-bg, var(--color-contrast-100));
+    }
+  }
+`;exports.fieldVariantMixin=t;
+//# sourceMappingURL=field-variants.css.cjs.map

package/dist/styles/mixins/field-variants.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-variants.css.cjs","names":[],"sources":["../../../src/styles/mixins/field-variants.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\nexport type FieldVariantMixinOptions = {\n  /**\n   * The theme accent custom property `flat`/`bordered` mix into their border color. Defaults to\n   * `--_theme-focus` (from `colorThemeMixin`). Override for a component with its own distinct\n   * focus/accent concept instead of the shared theme token (`ore-otp-input`'s `--_cell-focus-\n   * border`, which isn't theme-color-driven the same way).\n   */\n  accentVar?: string;\n  /** Selector for the element that gets the variant's background/border/shadow — the visual \"box\". */\n  container: string;\n  /**\n   * Selector for the text-bearing element the `bordered` variant tints to the theme color.\n   * Defaults to `container` for components where the box and the text-bearing element are the\n   * same node (`ore-input`/`ore-textarea`'s `.field`). Pass a distinct selector when they're\n   * split (`ore-message-composer`'s `.composer` card vs its bare `.field` textarea).\n   */\n  text?: string;\n  /** CSS custom-property namespace, e.g. `'input'` → `--input-bg`, `--input-hover-bg`, ... */\n  tokenPrefix: string;\n};\n\n/**\n * The `solid`/`flat`/`bordered`/`outline`/`ghost` variant switch shared by every text-entry\n * field component (`ore-input`, `ore-textarea`, `ore-message-composer`, `ore-otp-input`) —\n * previously hand-duplicated across them, mostly identically but not quite: this version also\n * uniformly adds a `:not([disabled])` guard to the `flat` variant's hover/focus rules (only\n * `ore-message-composer` had it) and the `bordered` variant's text/placeholder/caret tint\n * (`ore-input`/`ore-otp-input` were missing pieces of it) — clearly-unintentional per-component\n * gaps, not deliberate differences, so this mixin converges on the more complete behavior for\n * every consumer rather than picking one component's version arbitrarily.\n *\n * Deliberately does **not** touch `:focus-within` box-shadow for `solid`/`outline`/`ghost` —\n * every current consumer already covers that with its own single `:host(:not([disabled],\n * [variant='flat'], ...)) ${container}:focus-within` catch-all in its *own* base layer, so a\n * copy here would be pure redundancy for them, and actively wrong for `ore-otp-input`: its\n * `.cell` is the focusable element itself (not a wrapper), so `:focus-within` matches on every\n * keystroke, and it already renders its own bespoke ring (colored by `accentVar`, not\n * `--_theme-shadow`) uniformly across all variants in its base layer — this mixin adding a\n * second, generic one would fight it depending on layer/rule order.\n *\n * Each component keeps its own `:host(:not([variant], ...)) ${container}:hover/:focus-within`\n * base-state rules and any variant beyond this shared set (e.g. `ore-input`'s extra `'text'`\n * variant) in its own stylesheet — this mixin only covers the five variants every consumer has\n * in common.\n *\n * @example\n * ```ts\n * // ore-textarea / ore-input (box and text-bearing element are the same `.field`)\n * styles: [..., fieldVariantMixin({ container: '.field', tokenPrefix: 'textarea' }), componentStyles]\n *\n * // ore-message-composer (card `.composer` vs its own bare `.field` textarea)\n * styles: [\n *   ...,\n *   fieldVariantMixin({ container: '.composer', text: '.field', tokenPrefix: 'message-composer' }),\n *   componentStyles,\n * ]\n *\n * // ore-otp-input (own per-cell accent instead of the shared theme-focus token)\n * styles: [\n *   ...,\n *   fieldVariantMixin({ accentVar: '--_cell-focus-border', container: '.cell', tokenPrefix: 'otp-cell' }),\n *   componentStyles,\n * ]\n * ```\n */\nexport const fieldVariantMixin = ({\n  accentVar = '--_theme-focus',\n  container,\n  text = container,\n  tokenPrefix,\n}: FieldVariantMixinOptions) => css`\n  @layer refine.variants {\n    /* Solid (default) */\n    :host(:not([variant])),\n    :host([variant='solid']) {\n      --_bg: var(--${tokenPrefix}-bg, var(--color-contrast-50));\n      --_border-color: var(--${tokenPrefix}-border-color, var(--color-contrast-300));\n    }\n\n    :host(:not([variant])) ${container}, :host([variant='solid']) ${container} {\n      box-shadow: var(--shadow-2xs);\n    }\n\n    /* Flat */\n    :host([variant='flat']) {\n      --_bg: var(--${tokenPrefix}-bg, var(--color-contrast-100));\n      --_border-color: var(--${tokenPrefix}-border-color, color-mix(in oklch, var(${accentVar}) 20%, transparent));\n    }\n\n    :host([variant='flat']) ${container} {\n      box-shadow: var(--inset-shadow-2xs);\n    }\n\n    :host([variant='flat']:not([disabled])) ${container}:hover {\n      background: var(--${tokenPrefix}-hover-bg, color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));\n      border-color: var(\n        --${tokenPrefix}-hover-border-color,\n        color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300))\n      );\n    }\n\n    :host([variant='flat']:not([disabled])) ${container}:focus-within {\n      background: var(--${tokenPrefix}-focus-bg, color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));\n      border-color: var(--${tokenPrefix}-focus-border-color, color-mix(in oklch, var(${accentVar}) 60%, transparent));\n      box-shadow: var(--_theme-shadow);\n    }\n\n    /* Bordered */\n    :host([variant='bordered']) {\n      --_bg: var(--${tokenPrefix}-bg, var(--_theme-backdrop));\n      --_border-color: var(--${tokenPrefix}-border-color, color-mix(in oklch, var(${accentVar}) 70%, transparent));\n    }\n\n    :host([variant='bordered']:not([disabled])) ${container}:hover {\n      border-color: var(--${tokenPrefix}-hover-border-color, var(${accentVar}));\n    }\n\n    :host([variant='bordered']) ${text} {\n      color: var(--_theme-base);\n      caret-color: var(--_theme-base);\n    }\n\n    :host([variant='bordered']) ${text}::placeholder {\n      color: var(--${tokenPrefix}-placeholder-color, color-mix(in oklch, var(--_theme-base) 45%, transparent));\n    }\n\n    /* Outline — border always visible, so unlike the other variants it can't lean on a\n       per-component \\`:host{}\\` base fallback for \\`--_border-color\\` that may or may not exist\n       (\\`ore-message-composer\\` has none — every other rule here sets both custom properties, so\n       its base layer omits a default on the assumption that always holds). Set explicitly. */\n    :host([variant='outline']) {\n      --_bg: var(--${tokenPrefix}-bg, transparent);\n      --_border-color: var(--${tokenPrefix}-border-color, var(--color-contrast-300));\n    }\n\n    :host([variant='outline']) ${container} {\n      box-shadow: none;\n    }\n\n    /* Ghost */\n    :host([variant='ghost']) {\n      --_bg: var(--${tokenPrefix}-bg, transparent);\n      --_border-color: var(--${tokenPrefix}-border-color, transparent);\n    }\n\n    :host([variant='ghost']) ${container} {\n      box-shadow: none;\n    }\n\n    :host([variant='ghost']:not([disabled])) ${container}:hover {\n      background: var(--${tokenPrefix}-hover-bg, var(--color-contrast-100));\n    }\n  }\n`;\n"],"mappings":"+BAmEA,IAAa,GAAqB,CAChC,YAAY,iBACZ,YACA,OAAO,EACP,iBAC8B,EAAA,GAAG;;;;;qBAKd,EAAY;+BACF,EAAY;;;6BAGd,EAAU,6BAA6B,EAAU;;;;;;qBAMzD,EAAY;+BACF,EAAY,yCAAyC,EAAU;;;8BAGhE,EAAU;;;;8CAIM,EAAU;0BAC9B,EAAY;;YAE1B,EAAY;;;;;8CAKsB,EAAU;0BAC9B,EAAY;4BACV,EAAY,+CAA+C,EAAU;;;;;;qBAM5E,EAAY;+BACF,EAAY,yCAAyC,EAAU;;;kDAG5C,EAAU;4BAChC,EAAY,2BAA2B,EAAU;;;kCAG3C,EAAK;;;;;kCAKL,EAAK;qBAClB,EAAY;;;;;;;;qBAQZ,EAAY;+BACF,EAAY;;;iCAGV,EAAU;;;;;;qBAMtB,EAAY;+BACF,EAAY;;;+BAGZ,EAAU;;;;+CAIM,EAAU;0BAC/B,EAAY"}

package/dist/styles/mixins/field-variants.css.d.ts

@@ -0,0 +1,66 @@
+export type FieldVariantMixinOptions = {
+    /**
+     * The theme accent custom property `flat`/`bordered` mix into their border color. Defaults to
+     * `--_theme-focus` (from `colorThemeMixin`). Override for a component with its own distinct
+     * focus/accent concept instead of the shared theme token (`ore-otp-input`'s `--_cell-focus-
+     * border`, which isn't theme-color-driven the same way).
+     */
+    accentVar?: string;
+    /** Selector for the element that gets the variant's background/border/shadow — the visual "box". */
+    container: string;
+    /**
+     * Selector for the text-bearing element the `bordered` variant tints to the theme color.
+     * Defaults to `container` for components where the box and the text-bearing element are the
+     * same node (`ore-input`/`ore-textarea`'s `.field`). Pass a distinct selector when they're
+     * split (`ore-message-composer`'s `.composer` card vs its bare `.field` textarea).
+     */
+    text?: string;
+    /** CSS custom-property namespace, e.g. `'input'` → `--input-bg`, `--input-hover-bg`, ... */
+    tokenPrefix: string;
+};
+/**
+ * The `solid`/`flat`/`bordered`/`outline`/`ghost` variant switch shared by every text-entry
+ * field component (`ore-input`, `ore-textarea`, `ore-message-composer`, `ore-otp-input`) —
+ * previously hand-duplicated across them, mostly identically but not quite: this version also
+ * uniformly adds a `:not([disabled])` guard to the `flat` variant's hover/focus rules (only
+ * `ore-message-composer` had it) and the `bordered` variant's text/placeholder/caret tint
+ * (`ore-input`/`ore-otp-input` were missing pieces of it) — clearly-unintentional per-component
+ * gaps, not deliberate differences, so this mixin converges on the more complete behavior for
+ * every consumer rather than picking one component's version arbitrarily.
+ *
+ * Deliberately does **not** touch `:focus-within` box-shadow for `solid`/`outline`/`ghost` —
+ * every current consumer already covers that with its own single `:host(:not([disabled],
+ * [variant='flat'], ...)) ${container}:focus-within` catch-all in its *own* base layer, so a
+ * copy here would be pure redundancy for them, and actively wrong for `ore-otp-input`: its
+ * `.cell` is the focusable element itself (not a wrapper), so `:focus-within` matches on every
+ * keystroke, and it already renders its own bespoke ring (colored by `accentVar`, not
+ * `--_theme-shadow`) uniformly across all variants in its base layer — this mixin adding a
+ * second, generic one would fight it depending on layer/rule order.
+ *
+ * Each component keeps its own `:host(:not([variant], ...)) ${container}:hover/:focus-within`
+ * base-state rules and any variant beyond this shared set (e.g. `ore-input`'s extra `'text'`
+ * variant) in its own stylesheet — this mixin only covers the five variants every consumer has
+ * in common.
+ *
+ * @example
+ * ```ts
+ * // ore-textarea / ore-input (box and text-bearing element are the same `.field`)
+ * styles: [..., fieldVariantMixin({ container: '.field', tokenPrefix: 'textarea' }), componentStyles]
+ *
+ * // ore-message-composer (card `.composer` vs its own bare `.field` textarea)
+ * styles: [
+ *   ...,
+ *   fieldVariantMixin({ container: '.composer', text: '.field', tokenPrefix: 'message-composer' }),
+ *   componentStyles,
+ * ]
+ *
+ * // ore-otp-input (own per-cell accent instead of the shared theme-focus token)
+ * styles: [
+ *   ...,
+ *   fieldVariantMixin({ accentVar: '--_cell-focus-border', container: '.cell', tokenPrefix: 'otp-cell' }),
+ *   componentStyles,
+ * ]
+ * ```
+ */
+export declare const fieldVariantMixin: ({ accentVar, container, text, tokenPrefix, }: FieldVariantMixinOptions) => import("@vielzeug/ore").CSSResult;
+//# sourceMappingURL=field-variants.css.d.ts.map

package/dist/styles/mixins/field-variants.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-variants.css.d.ts","sourceRoot":"","sources":["../../../src/styles/mixins/field-variants.css.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,wBAAwB,GAAG;IACrC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oGAAoG;IACpG,SAAS,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4FAA4F;IAC5F,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,eAAO,MAAM,iBAAiB,GAAI,8CAK/B,wBAAwB,sCAmF1B,CAAC"}

package/dist/styles/mixins/field-variants.css.js

@@ -0,0 +1,90 @@
+import { css as e } from "@vielzeug/ore";
+//#region src/styles/mixins/field-variants.css.ts
+var t = ({ accentVar: t = "--_theme-focus", container: n, text: r = n, tokenPrefix: i }) => e`
+  @layer refine.variants {
+    /* Solid (default) */
+    :host(:not([variant])),
+    :host([variant='solid']) {
+      --_bg: var(--${i}-bg, var(--color-contrast-50));
+      --_border-color: var(--${i}-border-color, var(--color-contrast-300));
+    }
+
+    :host(:not([variant])) ${n}, :host([variant='solid']) ${n} {
+      box-shadow: var(--shadow-2xs);
+    }
+
+    /* Flat */
+    :host([variant='flat']) {
+      --_bg: var(--${i}-bg, var(--color-contrast-100));
+      --_border-color: var(--${i}-border-color, color-mix(in oklch, var(${t}) 20%, transparent));
+    }
+
+    :host([variant='flat']) ${n} {
+      box-shadow: var(--inset-shadow-2xs);
+    }
+
+    :host([variant='flat']:not([disabled])) ${n}:hover {
+      background: var(--${i}-hover-bg, color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));
+      border-color: var(
+        --${i}-hover-border-color,
+        color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300))
+      );
+    }
+
+    :host([variant='flat']:not([disabled])) ${n}:focus-within {
+      background: var(--${i}-focus-bg, color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));
+      border-color: var(--${i}-focus-border-color, color-mix(in oklch, var(${t}) 60%, transparent));
+      box-shadow: var(--_theme-shadow);
+    }
+
+    /* Bordered */
+    :host([variant='bordered']) {
+      --_bg: var(--${i}-bg, var(--_theme-backdrop));
+      --_border-color: var(--${i}-border-color, color-mix(in oklch, var(${t}) 70%, transparent));
+    }
+
+    :host([variant='bordered']:not([disabled])) ${n}:hover {
+      border-color: var(--${i}-hover-border-color, var(${t}));
+    }
+
+    :host([variant='bordered']) ${r} {
+      color: var(--_theme-base);
+      caret-color: var(--_theme-base);
+    }
+
+    :host([variant='bordered']) ${r}::placeholder {
+      color: var(--${i}-placeholder-color, color-mix(in oklch, var(--_theme-base) 45%, transparent));
+    }
+
+    /* Outline — border always visible, so unlike the other variants it can't lean on a
+       per-component \`:host{}\` base fallback for \`--_border-color\` that may or may not exist
+       (\`ore-message-composer\` has none — every other rule here sets both custom properties, so
+       its base layer omits a default on the assumption that always holds). Set explicitly. */
+    :host([variant='outline']) {
+      --_bg: var(--${i}-bg, transparent);
+      --_border-color: var(--${i}-border-color, var(--color-contrast-300));
+    }
+
+    :host([variant='outline']) ${n} {
+      box-shadow: none;
+    }
+
+    /* Ghost */
+    :host([variant='ghost']) {
+      --_bg: var(--${i}-bg, transparent);
+      --_border-color: var(--${i}-border-color, transparent);
+    }
+
+    :host([variant='ghost']) ${n} {
+      box-shadow: none;
+    }
+
+    :host([variant='ghost']:not([disabled])) ${n}:hover {
+      background: var(--${i}-hover-bg, var(--color-contrast-100));
+    }
+  }
+`;
+//#endregion
+export { t as fieldVariantMixin };
+
+//# sourceMappingURL=field-variants.css.js.map

package/dist/styles/mixins/field-variants.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-variants.css.js","names":[],"sources":["../../../src/styles/mixins/field-variants.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\nexport type FieldVariantMixinOptions = {\n  /**\n   * The theme accent custom property `flat`/`bordered` mix into their border color. Defaults to\n   * `--_theme-focus` (from `colorThemeMixin`). Override for a component with its own distinct\n   * focus/accent concept instead of the shared theme token (`ore-otp-input`'s `--_cell-focus-\n   * border`, which isn't theme-color-driven the same way).\n   */\n  accentVar?: string;\n  /** Selector for the element that gets the variant's background/border/shadow — the visual \"box\". */\n  container: string;\n  /**\n   * Selector for the text-bearing element the `bordered` variant tints to the theme color.\n   * Defaults to `container` for components where the box and the text-bearing element are the\n   * same node (`ore-input`/`ore-textarea`'s `.field`). Pass a distinct selector when they're\n   * split (`ore-message-composer`'s `.composer` card vs its bare `.field` textarea).\n   */\n  text?: string;\n  /** CSS custom-property namespace, e.g. `'input'` → `--input-bg`, `--input-hover-bg`, ... */\n  tokenPrefix: string;\n};\n\n/**\n * The `solid`/`flat`/`bordered`/`outline`/`ghost` variant switch shared by every text-entry\n * field component (`ore-input`, `ore-textarea`, `ore-message-composer`, `ore-otp-input`) —\n * previously hand-duplicated across them, mostly identically but not quite: this version also\n * uniformly adds a `:not([disabled])` guard to the `flat` variant's hover/focus rules (only\n * `ore-message-composer` had it) and the `bordered` variant's text/placeholder/caret tint\n * (`ore-input`/`ore-otp-input` were missing pieces of it) — clearly-unintentional per-component\n * gaps, not deliberate differences, so this mixin converges on the more complete behavior for\n * every consumer rather than picking one component's version arbitrarily.\n *\n * Deliberately does **not** touch `:focus-within` box-shadow for `solid`/`outline`/`ghost` —\n * every current consumer already covers that with its own single `:host(:not([disabled],\n * [variant='flat'], ...)) ${container}:focus-within` catch-all in its *own* base layer, so a\n * copy here would be pure redundancy for them, and actively wrong for `ore-otp-input`: its\n * `.cell` is the focusable element itself (not a wrapper), so `:focus-within` matches on every\n * keystroke, and it already renders its own bespoke ring (colored by `accentVar`, not\n * `--_theme-shadow`) uniformly across all variants in its base layer — this mixin adding a\n * second, generic one would fight it depending on layer/rule order.\n *\n * Each component keeps its own `:host(:not([variant], ...)) ${container}:hover/:focus-within`\n * base-state rules and any variant beyond this shared set (e.g. `ore-input`'s extra `'text'`\n * variant) in its own stylesheet — this mixin only covers the five variants every consumer has\n * in common.\n *\n * @example\n * ```ts\n * // ore-textarea / ore-input (box and text-bearing element are the same `.field`)\n * styles: [..., fieldVariantMixin({ container: '.field', tokenPrefix: 'textarea' }), componentStyles]\n *\n * // ore-message-composer (card `.composer` vs its own bare `.field` textarea)\n * styles: [\n *   ...,\n *   fieldVariantMixin({ container: '.composer', text: '.field', tokenPrefix: 'message-composer' }),\n *   componentStyles,\n * ]\n *\n * // ore-otp-input (own per-cell accent instead of the shared theme-focus token)\n * styles: [\n *   ...,\n *   fieldVariantMixin({ accentVar: '--_cell-focus-border', container: '.cell', tokenPrefix: 'otp-cell' }),\n *   componentStyles,\n * ]\n * ```\n */\nexport const fieldVariantMixin = ({\n  accentVar = '--_theme-focus',\n  container,\n  text = container,\n  tokenPrefix,\n}: FieldVariantMixinOptions) => css`\n  @layer refine.variants {\n    /* Solid (default) */\n    :host(:not([variant])),\n    :host([variant='solid']) {\n      --_bg: var(--${tokenPrefix}-bg, var(--color-contrast-50));\n      --_border-color: var(--${tokenPrefix}-border-color, var(--color-contrast-300));\n    }\n\n    :host(:not([variant])) ${container}, :host([variant='solid']) ${container} {\n      box-shadow: var(--shadow-2xs);\n    }\n\n    /* Flat */\n    :host([variant='flat']) {\n      --_bg: var(--${tokenPrefix}-bg, var(--color-contrast-100));\n      --_border-color: var(--${tokenPrefix}-border-color, color-mix(in oklch, var(${accentVar}) 20%, transparent));\n    }\n\n    :host([variant='flat']) ${container} {\n      box-shadow: var(--inset-shadow-2xs);\n    }\n\n    :host([variant='flat']:not([disabled])) ${container}:hover {\n      background: var(--${tokenPrefix}-hover-bg, color-mix(in oklch, var(--_theme-base) 6%, var(--color-contrast-100)));\n      border-color: var(\n        --${tokenPrefix}-hover-border-color,\n        color-mix(in oklch, var(--_theme-base) 35%, var(--color-contrast-300))\n      );\n    }\n\n    :host([variant='flat']:not([disabled])) ${container}:focus-within {\n      background: var(--${tokenPrefix}-focus-bg, color-mix(in oklch, var(--_theme-base) 8%, var(--color-canvas)));\n      border-color: var(--${tokenPrefix}-focus-border-color, color-mix(in oklch, var(${accentVar}) 60%, transparent));\n      box-shadow: var(--_theme-shadow);\n    }\n\n    /* Bordered */\n    :host([variant='bordered']) {\n      --_bg: var(--${tokenPrefix}-bg, var(--_theme-backdrop));\n      --_border-color: var(--${tokenPrefix}-border-color, color-mix(in oklch, var(${accentVar}) 70%, transparent));\n    }\n\n    :host([variant='bordered']:not([disabled])) ${container}:hover {\n      border-color: var(--${tokenPrefix}-hover-border-color, var(${accentVar}));\n    }\n\n    :host([variant='bordered']) ${text} {\n      color: var(--_theme-base);\n      caret-color: var(--_theme-base);\n    }\n\n    :host([variant='bordered']) ${text}::placeholder {\n      color: var(--${tokenPrefix}-placeholder-color, color-mix(in oklch, var(--_theme-base) 45%, transparent));\n    }\n\n    /* Outline — border always visible, so unlike the other variants it can't lean on a\n       per-component \\`:host{}\\` base fallback for \\`--_border-color\\` that may or may not exist\n       (\\`ore-message-composer\\` has none — every other rule here sets both custom properties, so\n       its base layer omits a default on the assumption that always holds). Set explicitly. */\n    :host([variant='outline']) {\n      --_bg: var(--${tokenPrefix}-bg, transparent);\n      --_border-color: var(--${tokenPrefix}-border-color, var(--color-contrast-300));\n    }\n\n    :host([variant='outline']) ${container} {\n      box-shadow: none;\n    }\n\n    /* Ghost */\n    :host([variant='ghost']) {\n      --_bg: var(--${tokenPrefix}-bg, transparent);\n      --_border-color: var(--${tokenPrefix}-border-color, transparent);\n    }\n\n    :host([variant='ghost']) ${container} {\n      box-shadow: none;\n    }\n\n    :host([variant='ghost']:not([disabled])) ${container}:hover {\n      background: var(--${tokenPrefix}-hover-bg, var(--color-contrast-100));\n    }\n  }\n`;\n"],"mappings":";;AAmEA,IAAa,KAAqB,EAChC,eAAY,kBACZ,cACA,UAAO,GACP,qBAC8B,CAAG;;;;;qBAKd,EAAY;+BACF,EAAY;;;6BAGd,EAAU,6BAA6B,EAAU;;;;;;qBAMzD,EAAY;+BACF,EAAY,yCAAyC,EAAU;;;8BAGhE,EAAU;;;;8CAIM,EAAU;0BAC9B,EAAY;;YAE1B,EAAY;;;;;8CAKsB,EAAU;0BAC9B,EAAY;4BACV,EAAY,+CAA+C,EAAU;;;;;;qBAM5E,EAAY;+BACF,EAAY,yCAAyC,EAAU;;;kDAG5C,EAAU;4BAChC,EAAY,2BAA2B,EAAU;;;kCAG3C,EAAK;;;;;kCAKL,EAAK;qBAClB,EAAY;;;;;;;;qBAQZ,EAAY;+BACF,EAAY;;;iCAGV,EAAU;;;;;;qBAMtB,EAAY;+BACF,EAAY;;;+BAGZ,EAAU;;;;+CAIM,EAAU;0BAC/B,EAAY"}

package/dist/switch.cjs

@@ -1,10 +1,10 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/shape.css.cjs"),t=require("./styles/mixins/states.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./shared/prop-bundles.cjs"),i=require("./shared/size-presets.cjs"),a=require("./headless/ore.cjs"),o=require("./headless/checkable.cjs"),s=require("./inputs/shared/field-binding.cjs"),c=require("./inputs/shared/form-context.cjs"),l=require("./inputs/shared/templates.cjs"),u=require("./inputs/switch/switch.css.cjs");let d=require("@vielzeug/ore"),f=require("@vielzeug/ore/forms");var p=`ore-switch`;(0,d.define)(p,{formAssociated:!0,props:{...r.themableBundle,...r.sizableBundle,...r.disablableBundle,checked:d.prop.bool(!1),error:d.prop.string(),helper:d.prop.string(),name:d.prop.string(),value:d.prop.string(`on`)},setup(e){let t=(0,d.useEmit)(),n=(0,d.inject)(c.FORM_CTX),r=c.useFormContext(e,n),i=o.createCheckable({checked:e.checked,clearIndeterminateFirst:!1,disabled:r.disabled,error:e.error,helper:e.helper,onToggle:e=>{i.triggerValidation(`change`),t(`change`,e)},prefix:`switch`,signal:a.lifecycleSignal(d.onCleanup),validateOn:n?.validateOn,value:e.value});i.attachFormField((0,f.useField)({disabled:i.disabled,toFormValue:e=>e,value:i.checkableFormValue}));let{assistiveId:u,checked:p,disabled:m,errorText:h,handleClick:g,handleKeydown:_,helperText:v,labelId:y}=i;return s.applyCheckableBinding(r.size,{assistiveId:u,checked:p,disabled:m,errorText:h,handleClick:g,handleKeydown:_,helperText:v,labelId:y},`switch`),d.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/states.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./shared/prop-bundles.cjs"),a=require("./shared/size-presets.cjs"),o=require("./headless/ore.cjs"),s=require("./headless/checkable.cjs"),c=require("./inputs/shared/field-binding.cjs"),l=require("./inputs/shared/form-context.cjs"),u=require("./inputs/shared/templates.cjs"),d=require("./inputs/switch/switch.css.cjs");let f=require("@vielzeug/ore"),p=require("@vielzeug/ore/forms");var m=`ore-switch`;(0,f.define)(m,{formAssociated:!0,props:{...i.themableBundle,...i.sizableBundle,...i.disablableBundle,checked:f.prop.bool(!1),error:f.prop.string(),helper:f.prop.string(),name:f.prop.string(),value:f.prop.string(`on`)},setup(e){let t=(0,f.useEmit)(),n=(0,f.inject)(l.FORM_CTX),r=l.useFormContext(e,n),i=s.createCheckable({checked:e.checked,clearIndeterminateFirst:!1,disabled:r.disabled,error:e.error,helper:e.helper,onToggle:e=>{i.triggerValidation(`change`),t(`change`,e)},prefix:`switch`,signal:o.lifecycleSignal(f.onCleanup),validateOn:n?.validateOn,value:e.value});i.attachFormField((0,p.useField)({disabled:i.disabled,toFormValue:e=>e,value:i.checkableFormValue}));let{assistiveId:a,checked:d,disabled:m,errorText:h,handleClick:g,handleKeydown:_,helperText:v,labelId:y}=i;return c.applyCheckableBinding(r.size,{assistiveId:a,checked:d,disabled:m,errorText:h,handleClick:g,handleKeydown:_,helperText:v,labelId:y},`switch`),f.html`
       <div class="switch-wrapper" part="switch">
         <div class="switch-track" part="track">
           <div class="switch-thumb" part="thumb"></div>
         </div>
       </div>
       <span class="label" part="label" id="${y}"><slot></slot></span>
-      ${l.renderHelperRegion(u,h,v)}
-    `},styles:[n.colorThemeMixin,n.forcedColorsFormControlMixin,t.disabledStateMixin,e.sizeVariantMixin(i.SWITCH_SIZE_PRESET),u.default]}),exports.SWITCH_TAG=p;
+      ${u.renderHelperRegion(a,h,v)}
+    `},styles:[r.colorThemeMixin,r.forcedColorsFormControlMixin,n.disabledStateMixin,e.coarsePointerMixin,t.sizeVariantMixin(a.SWITCH_SIZE_PRESET),d.default]}),exports.SWITCH_TAG=m;
 //# sourceMappingURL=switch.cjs.map