@vielzeug/refine 1.1.1

package/dist/styles/mixins/table-base.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-base.css.js","names":[],"sources":["../../../src/styles/mixins/table-base.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\n/**\n * Table Base Mixin\n *\n * Shared structural foundation for table-like components (`ore-table`, `ore-datagrid`).\n * Covers only the `:host` shell, `.scroll-container`, and the bare `table` element.\n * Each consumer component owns all cell, row, head, and footer styles itself.\n *\n * Token naming:\n *  - `--_accent`   Primary interactive accent (sort icons, selection borders, focus rings).\n *                  Defaults to `--color-primary-focus`. Override via `--{prefix}-accent`.\n *\n * @param prefix  CSS custom-property namespace, e.g. `'table'` or `'datagrid'`\n *\n * @example\n * ```ts\n * // ore-table\n * styles: [tableBaseMixin('table'), componentStyles]\n *\n * // ore-datagrid\n * styles: [tableBaseMixin('datagrid'), componentStyles]\n * ```\n */\nexport const tableBaseMixin = (prefix: string) => css`\n  @layer refine.base {\n    :host {\n      /* ── Public token API ─────────────────────────────────────────────── */\n      --_bg: var(--${prefix}-bg, var(--color-canvas));\n      --_border-color: var(--${prefix}-border-color, var(--color-contrast-200));\n      --_radius: var(--${prefix}-radius, var(--rounded-xl));\n      --_header-bg: var(--${prefix}-header-bg, var(--color-contrast-50));\n      --_accent: var(--${prefix}-accent, var(--color-neutral-focus));\n      --_row-hover-bg: var(--${prefix}-row-hover-bg, color-mix(in oklch, var(--_accent) 6%, transparent));\n      --_stripe-bg: var(--${prefix}-stripe-bg, color-mix(in oklch, var(--color-contrast-900) 3%, transparent));\n      --_cell-padding-x: var(--${prefix}-cell-padding-x, var(--size-3));\n      --_cell-padding-y: var(--${prefix}-cell-padding-y, var(--size-2-5));\n      --_font-size: var(--${prefix}-font-size, var(--text-sm));\n\n      display: block;\n      overflow: hidden;\n      background: var(--_bg);\n      border: var(--border) solid var(--_border-color);\n      border-radius: var(--_radius);\n      box-shadow: var(--${prefix}-shadow, var(--shadow-sm));\n    }\n\n    /* ── Scroll wrapper ─────────────────────────────────────────────────── */\n\n    .scroll-container {\n      overflow: auto;\n      max-height: var(--${prefix}-max-height, none);\n    }\n\n    /* ── Native table ───────────────────────────────────────────────────── */\n\n    table {\n      width: 100%;\n      font-size: var(--_font-size);\n      table-layout: auto;\n      border-collapse: collapse;\n      background: var(--_bg);\n    }\n\n    /* ── Loading state ──────────────────────────────────────────────────── */\n\n    :host([loading]) .scroll-container {\n      opacity: 0.5;\n      pointer-events: none;\n      cursor: wait;\n    }\n  }\n\n  @layer refine.variants {\n    /* Bordered */\n    :host([bordered]) {\n      overflow: hidden;\n      border: var(--border) solid var(--_border-color);\n      border-radius: var(--_radius);\n      box-shadow: var(--shadow-xs);\n    }\n\n    :host([bordered]) .scroll-container {\n      border-radius: inherit;\n      clip-path: inset(0 round var(--_radius));\n    }\n\n    /* Sticky header */\n    :host([sticky]) .scroll-container {\n      max-height: var(--${prefix}-sticky-max-height, 24rem);\n      overflow-y: auto;\n    }\n  }\n\n  @layer refine.density {\n    :host([density='compact']) {\n      --_cell-padding-x: var(--size-2);\n      --_cell-padding-y: var(--size-1-5);\n    }\n\n    :host([density='cozy']) {\n      --_cell-padding-x: var(--size-3);\n      --_cell-padding-y: var(--size-2-5);\n    }\n\n    :host([density='comfortable']) {\n      --_cell-padding-x: var(--size-4);\n      --_cell-padding-y: var(--size-3-5);\n    }\n  }\n\n  @layer refine.overrides {\n    :host([fullwidth]) {\n      width: 100%;\n    }\n  }\n`;\n"],"mappings":";;AAwBA,IAAa,KAAkB,MAAmB,CAAG;;;;qBAIhC,EAAO;+BACG,EAAO;yBACb,EAAO;4BACJ,EAAO;yBACV,EAAO;+BACD,EAAO;4BACV,EAAO;iCACF,EAAO;iCACP,EAAO;4BACZ,EAAO;;;;;;;0BAOT,EAAO;;;;;;;0BAOP,EAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAsCP,EAAO"}

package/dist/styles/mixins/theme.css.cjs

@@ -0,0 +1,80 @@
+let e=require("@vielzeug/ore");var t=[`primary`,`secondary`,`info`,`success`,`warning`,`error`],n={backdrop:e=>`var(--color-${e}-backdrop)`,base:e=>`var(--color-${e})`,border:e=>`var(--color-${e}-border)`,content:e=>`var(--color-${e}-content)`,contrast:e=>`var(--color-${e}-contrast)`,focus:e=>`var(--color-${e}-focus)`,halo:e=>`var(--halo-shadow-${e})`,shadow:e=>`var(--color-${e}-focus-shadow)`},r=e.css`
+  :host {
+    --_theme-base: var(--color-neutral);
+    --_theme-content: var(--color-neutral-content);
+    --_theme-contrast: var(--color-neutral-contrast);
+    --_theme-focus: var(--color-neutral-focus);
+    --_theme-backdrop: var(--color-neutral-backdrop);
+    --_theme-border: var(--color-neutral-border);
+    --_theme-shadow: var(--color-neutral-focus-shadow);
+    --_theme-halo: var(--halo-shadow-neutral);
+  }
+
+  ${t.map(e=>`:host([color='${e}']) {\n${Object.entries(n).map(([t,n])=>`  --_theme-${t}: ${n(e)};`).join(`
+`)}\n}`).join(`
+
+  `)}
+`,i=e.css`
+  /* ========================================
+     Elevation Levels (0-5)
+     ======================================== */
+
+  :host([elevation='0']) {
+    --_shadow: none;
+  }
+
+  :host([elevation='1']) {
+    --_shadow: var(--shadow-sm);
+  }
+
+  :host([elevation='2']) {
+    --_shadow: var(--shadow-md);
+  }
+
+  :host([elevation='3']) {
+    --_shadow: var(--shadow-lg);
+  }
+
+  :host([elevation='4']) {
+    --_shadow: var(--shadow-xl);
+  }
+
+  :host([elevation='5']) {
+    --_shadow: var(--shadow-2xl);
+  }
+`,a=e.css`
+  @media (forced-colors: active) {
+    :host {
+      border: 1px solid ButtonText;
+    }
+  }
+`,o=t=>e.css`
+  @media (forced-colors: active) {
+    ${t}:focus-visible {
+      outline: 2px solid Highlight;
+      outline-offset: 2px;
+      box-shadow: none;
+    }
+  }
+`,s=e.css`
+  @media (forced-colors: active) {
+    :host {
+      forced-color-adjust: none;
+      color: ButtonText;
+      background: ButtonFace;
+      border: 1px solid ButtonText;
+    }
+
+    :host([checked]) {
+      background: Highlight;
+      color: HighlightText;
+      border-color: Highlight;
+    }
+
+    :host([disabled]) {
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
+`;exports.colorThemeMixin=r,exports.elevationMixin=i,exports.forcedColorsFocusMixin=o,exports.forcedColorsFormControlMixin=s,exports.forcedColorsMixin=a;
+//# sourceMappingURL=theme.css.cjs.map

package/dist/styles/mixins/theme.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.css.cjs","names":[],"sources":["../../../src/styles/mixins/theme.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\n// ── Color Theme ───────────────────────────────────────────────────────────────\n\nconst THEME_COLORS = ['primary', 'secondary', 'info', 'success', 'warning', 'error'] as const;\n\ntype ThemeColorName = (typeof THEME_COLORS)[number];\n\n// Standard token suffix for each --_theme-* variable. The 'shadow' slot maps\n// to --color-*-focus-shadow (not --color-*-shadow) and 'halo' maps to --halo-shadow-*.\nconst TOKEN_SUFFIX: Record<string, (color: ThemeColorName) => string> = {\n  backdrop: (c) => `var(--color-${c}-backdrop)`,\n  base: (c) => `var(--color-${c})`,\n  border: (c) => `var(--color-${c}-border)`,\n  content: (c) => `var(--color-${c}-content)`,\n  contrast: (c) => `var(--color-${c}-contrast)`,\n  focus: (c) => `var(--color-${c}-focus)`,\n  halo: (c) => `var(--halo-shadow-${c})`,\n  shadow: (c) => `var(--color-${c}-focus-shadow)`,\n};\n\nconst colorBlock = (color: ThemeColorName): string =>\n  `:host([color='${color}']) {\\n${Object.entries(TOKEN_SUFFIX)\n    .map(([slot, fn]) => `  --_theme-${slot}: ${fn(color)};`)\n    .join('\\n')}\\n}`;\n\nexport const colorThemeMixin = css`\n  :host {\n    --_theme-base: var(--color-neutral);\n    --_theme-content: var(--color-neutral-content);\n    --_theme-contrast: var(--color-neutral-contrast);\n    --_theme-focus: var(--color-neutral-focus);\n    --_theme-backdrop: var(--color-neutral-backdrop);\n    --_theme-border: var(--color-neutral-border);\n    --_theme-shadow: var(--color-neutral-focus-shadow);\n    --_theme-halo: var(--halo-shadow-neutral);\n  }\n\n  ${THEME_COLORS.map(colorBlock).join('\\n\\n  ')}\n`;\n\n// ── Elevation ─────────────────────────────────────────────────────────────────\n\n/**\n * Elevation Mixin\n *\n * Provides elevation shadow levels (0-5) via CSS custom properties.\n * Sets the --_shadow variable based on elevation attribute.\n *\n * @example\n * ```ts\n * import { elevationMixin } from '../../styles';\n *\n * return {\n *   styles: [elevationMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const elevationMixin = css`\n  /* ========================================\n     Elevation Levels (0-5)\n     ======================================== */\n\n  :host([elevation='0']) {\n    --_shadow: none;\n  }\n\n  :host([elevation='1']) {\n    --_shadow: var(--shadow-sm);\n  }\n\n  :host([elevation='2']) {\n    --_shadow: var(--shadow-md);\n  }\n\n  :host([elevation='3']) {\n    --_shadow: var(--shadow-lg);\n  }\n\n  :host([elevation='4']) {\n    --_shadow: var(--shadow-xl);\n  }\n\n  :host([elevation='5']) {\n    --_shadow: var(--shadow-2xl);\n  }\n`;\n\n// ── Forced Colors ─────────────────────────────────────────────────────────────\n\n/**\n * Forced Colors Mixin\n *\n * Ensures components are visually distinct in Windows High Contrast / forced-colors mode.\n * The browser already overrides `color`, `background-color`, and `border-color` to system\n * color keywords, but components that rely solely on `background` for visual identity\n * (no border) or that use `box-shadow` for focus rings need explicit fallbacks.\n *\n * Usage: apply to any component that has a background but no natural border.\n *\n * @example\n * ```ts\n * import { forcedColorsMixin } from '../../styles';\n *\n * return {\n *   styles: [forcedColorsMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const forcedColorsMixin = css`\n  @media (forced-colors: active) {\n    :host {\n      border: 1px solid ButtonText;\n    }\n  }\n`;\n\n/**\n * Forced Colors Focus Ring Mixin\n *\n * Replaces box-shadow focus rings (which are removed in forced-colors mode)\n * with a proper system-color outline.\n *\n * @param selector - CSS selector for the focusable element inside the host\n *\n * @example\n * ```ts\n * import { forcedColorsFocusMixin } from '../../styles';\n *\n * return {\n *   styles: [forcedColorsFocusMixin('button'), componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const forcedColorsFocusMixin = (selector: string) => css`\n  @media (forced-colors: active) {\n    ${selector}:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 2px;\n      box-shadow: none;\n    }\n  }\n`;\n\n/**\n * Forced Colors Form Control Mixin\n *\n * For custom form controls (checkbox, radio, switch, slider) that paint their\n * own visual state. Maps checked/active state to system colors so they remain\n * distinguishable in forced-colors mode.\n *\n * @example\n * ```ts\n * import { forcedColorsFormControlMixin } from '../../styles';\n *\n * return {\n *   styles: [forcedColorsFormControlMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const forcedColorsFormControlMixin = css`\n  @media (forced-colors: active) {\n    :host {\n      forced-color-adjust: none;\n      color: ButtonText;\n      background: ButtonFace;\n      border: 1px solid ButtonText;\n    }\n\n    :host([checked]) {\n      background: Highlight;\n      color: HighlightText;\n      border-color: Highlight;\n    }\n\n    :host([disabled]) {\n      color: GrayText;\n      border-color: GrayText;\n    }\n  }\n`;\n"],"mappings":"+BAIA,IAAM,EAAe,CAAC,UAAW,YAAa,OAAQ,UAAW,UAAW,OAAO,EAM7E,EAAkE,CACtE,SAAW,GAAM,eAAe,EAAE,YAClC,KAAO,GAAM,eAAe,EAAE,GAC9B,OAAS,GAAM,eAAe,EAAE,UAChC,QAAU,GAAM,eAAe,EAAE,WACjC,SAAW,GAAM,eAAe,EAAE,YAClC,MAAQ,GAAM,eAAe,EAAE,SAC/B,KAAO,GAAM,qBAAqB,EAAE,GACpC,OAAS,GAAM,eAAe,EAAE,eAClC,EAOa,EAAkB,EAAA,GAAG;;;;;;;;;;;;IAY9B,EAAa,IAjBG,GAClB,iBAAiB,EAAM,SAAS,OAAO,QAAQ,CAAY,CAAC,CACzD,KAAK,CAAC,EAAM,KAAQ,cAAc,EAAK,IAAI,EAAG,CAAK,EAAE,EAAE,CAAC,CACxD,KAAK;CAAI,EAAE,IAce,CAAC,CAAC,KAAK;;GAAQ,EAAE;EAqBnC,EAAiB,EAAA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoDpB,EAAoB,EAAA,GAAG;;;;;;EA0BvB,EAA0B,GAAqB,EAAA,GAAG;;MAEzD,EAAS;;;;;;EAyBF,EAA+B,EAAA,GAAG"}

package/dist/styles/mixins/theme.css.d.ts

@@ -0,0 +1,77 @@
+export declare const colorThemeMixin: import("@vielzeug/ore").CSSResult;
+/**
+ * Elevation Mixin
+ *
+ * Provides elevation shadow levels (0-5) via CSS custom properties.
+ * Sets the --_shadow variable based on elevation attribute.
+ *
+ * @example
+ * ```ts
+ * import { elevationMixin } from '../../styles';
+ *
+ * return {
+ *   styles: [elevationMixin, componentStyles],
+ *   template: html`...`
+ * };
+ * ```
+ */
+export declare const elevationMixin: import("@vielzeug/ore").CSSResult;
+/**
+ * Forced Colors Mixin
+ *
+ * Ensures components are visually distinct in Windows High Contrast / forced-colors mode.
+ * The browser already overrides `color`, `background-color`, and `border-color` to system
+ * color keywords, but components that rely solely on `background` for visual identity
+ * (no border) or that use `box-shadow` for focus rings need explicit fallbacks.
+ *
+ * Usage: apply to any component that has a background but no natural border.
+ *
+ * @example
+ * ```ts
+ * import { forcedColorsMixin } from '../../styles';
+ *
+ * return {
+ *   styles: [forcedColorsMixin, componentStyles],
+ *   template: html`...`
+ * };
+ * ```
+ */
+export declare const forcedColorsMixin: import("@vielzeug/ore").CSSResult;
+/**
+ * Forced Colors Focus Ring Mixin
+ *
+ * Replaces box-shadow focus rings (which are removed in forced-colors mode)
+ * with a proper system-color outline.
+ *
+ * @param selector - CSS selector for the focusable element inside the host
+ *
+ * @example
+ * ```ts
+ * import { forcedColorsFocusMixin } from '../../styles';
+ *
+ * return {
+ *   styles: [forcedColorsFocusMixin('button'), componentStyles],
+ *   template: html`...`
+ * };
+ * ```
+ */
+export declare const forcedColorsFocusMixin: (selector: string) => import("@vielzeug/ore").CSSResult;
+/**
+ * Forced Colors Form Control Mixin
+ *
+ * For custom form controls (checkbox, radio, switch, slider) that paint their
+ * own visual state. Maps checked/active state to system colors so they remain
+ * distinguishable in forced-colors mode.
+ *
+ * @example
+ * ```ts
+ * import { forcedColorsFormControlMixin } from '../../styles';
+ *
+ * return {
+ *   styles: [forcedColorsFormControlMixin, componentStyles],
+ *   template: html`...`
+ * };
+ * ```
+ */
+export declare const forcedColorsFormControlMixin: import("@vielzeug/ore").CSSResult;
+//# sourceMappingURL=theme.css.d.ts.map

package/dist/styles/mixins/theme.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.css.d.ts","sourceRoot":"","sources":["../../../src/styles/mixins/theme.css.ts"],"names":[],"mappings":"AA0BA,eAAO,MAAM,eAAe,mCAa3B,CAAC;AAIF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,cAAc,mCA4B1B,CAAC;AAIF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,iBAAiB,mCAM7B,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,sBAAsB,GAAI,UAAU,MAAM,sCAQtD,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,4BAA4B,mCAoBxC,CAAC"}

package/dist/styles/mixins/theme.css.js

@@ -0,0 +1,98 @@
+import { css as e } from "@vielzeug/ore";
+//#region src/styles/mixins/theme.css.ts
+var t = [
+	"primary",
+	"secondary",
+	"info",
+	"success",
+	"warning",
+	"error"
+], n = {
+	backdrop: (e) => `var(--color-${e}-backdrop)`,
+	base: (e) => `var(--color-${e})`,
+	border: (e) => `var(--color-${e}-border)`,
+	content: (e) => `var(--color-${e}-content)`,
+	contrast: (e) => `var(--color-${e}-contrast)`,
+	focus: (e) => `var(--color-${e}-focus)`,
+	halo: (e) => `var(--halo-shadow-${e})`,
+	shadow: (e) => `var(--color-${e}-focus-shadow)`
+}, r = e`
+  :host {
+    --_theme-base: var(--color-neutral);
+    --_theme-content: var(--color-neutral-content);
+    --_theme-contrast: var(--color-neutral-contrast);
+    --_theme-focus: var(--color-neutral-focus);
+    --_theme-backdrop: var(--color-neutral-backdrop);
+    --_theme-border: var(--color-neutral-border);
+    --_theme-shadow: var(--color-neutral-focus-shadow);
+    --_theme-halo: var(--halo-shadow-neutral);
+  }
+
+  ${t.map((e) => `:host([color='${e}']) {\n${Object.entries(n).map(([t, n]) => `  --_theme-${t}: ${n(e)};`).join("\n")}\n}`).join("\n\n  ")}
+`, i = e`
+  /* ========================================
+     Elevation Levels (0-5)
+     ======================================== */
+
+  :host([elevation='0']) {
+    --_shadow: none;
+  }
+
+  :host([elevation='1']) {
+    --_shadow: var(--shadow-sm);
+  }
+
+  :host([elevation='2']) {
+    --_shadow: var(--shadow-md);
+  }
+
+  :host([elevation='3']) {
+    --_shadow: var(--shadow-lg);
+  }
+
+  :host([elevation='4']) {
+    --_shadow: var(--shadow-xl);
+  }
+
+  :host([elevation='5']) {
+    --_shadow: var(--shadow-2xl);
+  }
+`, a = e`
+  @media (forced-colors: active) {
+    :host {
+      border: 1px solid ButtonText;
+    }
+  }
+`, o = (t) => e`
+  @media (forced-colors: active) {
+    ${t}:focus-visible {
+      outline: 2px solid Highlight;
+      outline-offset: 2px;
+      box-shadow: none;
+    }
+  }
+`, s = e`
+  @media (forced-colors: active) {
+    :host {
+      forced-color-adjust: none;
+      color: ButtonText;
+      background: ButtonFace;
+      border: 1px solid ButtonText;
+    }
+
+    :host([checked]) {
+      background: Highlight;
+      color: HighlightText;
+      border-color: Highlight;
+    }
+
+    :host([disabled]) {
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
+`;
+//#endregion
+export { r as colorThemeMixin, i as elevationMixin, o as forcedColorsFocusMixin, s as forcedColorsFormControlMixin, a as forcedColorsMixin };
+
+//# sourceMappingURL=theme.css.js.map

package/dist/styles/mixins/theme.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.css.js","names":[],"sources":["../../../src/styles/mixins/theme.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\n// ── Color Theme ───────────────────────────────────────────────────────────────\n\nconst THEME_COLORS = ['primary', 'secondary', 'info', 'success', 'warning', 'error'] as const;\n\ntype ThemeColorName = (typeof THEME_COLORS)[number];\n\n// Standard token suffix for each --_theme-* variable. The 'shadow' slot maps\n// to --color-*-focus-shadow (not --color-*-shadow) and 'halo' maps to --halo-shadow-*.\nconst TOKEN_SUFFIX: Record<string, (color: ThemeColorName) => string> = {\n  backdrop: (c) => `var(--color-${c}-backdrop)`,\n  base: (c) => `var(--color-${c})`,\n  border: (c) => `var(--color-${c}-border)`,\n  content: (c) => `var(--color-${c}-content)`,\n  contrast: (c) => `var(--color-${c}-contrast)`,\n  focus: (c) => `var(--color-${c}-focus)`,\n  halo: (c) => `var(--halo-shadow-${c})`,\n  shadow: (c) => `var(--color-${c}-focus-shadow)`,\n};\n\nconst colorBlock = (color: ThemeColorName): string =>\n  `:host([color='${color}']) {\\n${Object.entries(TOKEN_SUFFIX)\n    .map(([slot, fn]) => `  --_theme-${slot}: ${fn(color)};`)\n    .join('\\n')}\\n}`;\n\nexport const colorThemeMixin = css`\n  :host {\n    --_theme-base: var(--color-neutral);\n    --_theme-content: var(--color-neutral-content);\n    --_theme-contrast: var(--color-neutral-contrast);\n    --_theme-focus: var(--color-neutral-focus);\n    --_theme-backdrop: var(--color-neutral-backdrop);\n    --_theme-border: var(--color-neutral-border);\n    --_theme-shadow: var(--color-neutral-focus-shadow);\n    --_theme-halo: var(--halo-shadow-neutral);\n  }\n\n  ${THEME_COLORS.map(colorBlock).join('\\n\\n  ')}\n`;\n\n// ── Elevation ─────────────────────────────────────────────────────────────────\n\n/**\n * Elevation Mixin\n *\n * Provides elevation shadow levels (0-5) via CSS custom properties.\n * Sets the --_shadow variable based on elevation attribute.\n *\n * @example\n * ```ts\n * import { elevationMixin } from '../../styles';\n *\n * return {\n *   styles: [elevationMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const elevationMixin = css`\n  /* ========================================\n     Elevation Levels (0-5)\n     ======================================== */\n\n  :host([elevation='0']) {\n    --_shadow: none;\n  }\n\n  :host([elevation='1']) {\n    --_shadow: var(--shadow-sm);\n  }\n\n  :host([elevation='2']) {\n    --_shadow: var(--shadow-md);\n  }\n\n  :host([elevation='3']) {\n    --_shadow: var(--shadow-lg);\n  }\n\n  :host([elevation='4']) {\n    --_shadow: var(--shadow-xl);\n  }\n\n  :host([elevation='5']) {\n    --_shadow: var(--shadow-2xl);\n  }\n`;\n\n// ── Forced Colors ─────────────────────────────────────────────────────────────\n\n/**\n * Forced Colors Mixin\n *\n * Ensures components are visually distinct in Windows High Contrast / forced-colors mode.\n * The browser already overrides `color`, `background-color`, and `border-color` to system\n * color keywords, but components that rely solely on `background` for visual identity\n * (no border) or that use `box-shadow` for focus rings need explicit fallbacks.\n *\n * Usage: apply to any component that has a background but no natural border.\n *\n * @example\n * ```ts\n * import { forcedColorsMixin } from '../../styles';\n *\n * return {\n *   styles: [forcedColorsMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const forcedColorsMixin = css`\n  @media (forced-colors: active) {\n    :host {\n      border: 1px solid ButtonText;\n    }\n  }\n`;\n\n/**\n * Forced Colors Focus Ring Mixin\n *\n * Replaces box-shadow focus rings (which are removed in forced-colors mode)\n * with a proper system-color outline.\n *\n * @param selector - CSS selector for the focusable element inside the host\n *\n * @example\n * ```ts\n * import { forcedColorsFocusMixin } from '../../styles';\n *\n * return {\n *   styles: [forcedColorsFocusMixin('button'), componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const forcedColorsFocusMixin = (selector: string) => css`\n  @media (forced-colors: active) {\n    ${selector}:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 2px;\n      box-shadow: none;\n    }\n  }\n`;\n\n/**\n * Forced Colors Form Control Mixin\n *\n * For custom form controls (checkbox, radio, switch, slider) that paint their\n * own visual state. Maps checked/active state to system colors so they remain\n * distinguishable in forced-colors mode.\n *\n * @example\n * ```ts\n * import { forcedColorsFormControlMixin } from '../../styles';\n *\n * return {\n *   styles: [forcedColorsFormControlMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const forcedColorsFormControlMixin = css`\n  @media (forced-colors: active) {\n    :host {\n      forced-color-adjust: none;\n      color: ButtonText;\n      background: ButtonFace;\n      border: 1px solid ButtonText;\n    }\n\n    :host([checked]) {\n      background: Highlight;\n      color: HighlightText;\n      border-color: Highlight;\n    }\n\n    :host([disabled]) {\n      color: GrayText;\n      border-color: GrayText;\n    }\n  }\n`;\n"],"mappings":";;AAIA,IAAM,IAAe;CAAC;CAAW;CAAa;CAAQ;CAAW;CAAW;AAAO,GAM7E,IAAkE;CACtE,WAAW,MAAM,eAAe,EAAE;CAClC,OAAO,MAAM,eAAe,EAAE;CAC9B,SAAS,MAAM,eAAe,EAAE;CAChC,UAAU,MAAM,eAAe,EAAE;CACjC,WAAW,MAAM,eAAe,EAAE;CAClC,QAAQ,MAAM,eAAe,EAAE;CAC/B,OAAO,MAAM,qBAAqB,EAAE;CACpC,SAAS,MAAM,eAAe,EAAE;AAClC,GAOa,IAAkB,CAAG;;;;;;;;;;;;IAY9B,EAAa,KAjBG,MAClB,iBAAiB,EAAM,SAAS,OAAO,QAAQ,CAAY,CAAC,CACzD,KAAK,CAAC,GAAM,OAAQ,cAAc,EAAK,IAAI,EAAG,CAAK,EAAE,EAAE,CAAC,CACxD,KAAK,IAAI,EAAE,IAce,CAAC,CAAC,KAAK,QAAQ,EAAE;GAqBnC,IAAiB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDpB,IAAoB,CAAG;;;;;;GA0BvB,KAA0B,MAAqB,CAAG;;MAEzD,EAAS;;;;;;GAyBF,IAA+B,CAAG"}

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

@@ -0,0 +1,55 @@
+let e=require("@vielzeug/ore");var t=t=>e.css`
+  :host([variant='frost']) ${t} {
+    backdrop-filter: blur(var(--blur-xl)) saturate(200%) brightness(1.1);
+    -webkit-backdrop-filter: blur(var(--blur-xl)) saturate(200%) brightness(1.1);
+  }
+
+  :host([variant='frost']:not([color])) ${t} {
+    background: color-mix(in oklch, var(--color-canvas) 55%, transparent);
+    color: var(--color-contrast);
+    text-shadow: var(--text-shadow-xs);
+    border: var(--border) solid color-mix(in oklch, var(--color-contrast-400) 45%, transparent);
+  }
+
+  /* Frost neutral without elevation: use halo shadow */
+  :host([variant='frost']:not([color]):not([elevation])) ${t} {
+    box-shadow: var(--halo-shadow-neutral);
+  }
+
+  /* Frost neutral with elevation: combine halo with elevation shadow */
+  :host([variant='frost']:not([color])[elevation]) ${t} {
+    box-shadow: var(--halo-shadow-neutral), var(--_shadow);
+  }
+
+  :host([variant='frost'][color]) ${t} {
+    background: color-mix(in oklch, var(--_theme-base), transparent);
+    border-color: color-mix(in oklch, var(--_theme-border) 45%, transparent);
+    color: var(--_theme-content);
+    border: var(--border) solid color-mix(in oklch, var(--_theme-border) 45%, transparent);
+    backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);
+    -webkit-backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);
+    text-shadow: var(--text-shadow-xs);
+    filter: brightness(1.05);
+  }
+
+  /* Frost color without elevation: use halo shadow */
+  :host([variant='frost'][color]:not([elevation])) ${t} {
+    box-shadow: var(--_theme-halo);
+  }
+
+  /* Frost color with elevation: combine halo with elevation shadow */
+  :host([variant='frost'][color][elevation]) ${t} {
+    box-shadow: var(--_theme-halo), var(--_shadow);
+  }
+
+  :host([variant='frost']:not([color])) ${t}:hover {
+    backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);
+    -webkit-backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);
+  }
+
+  :host([variant='frost'][color]) ${t}:hover {
+    backdrop-filter: blur(var(--blur-3xl)) saturate(240%) brightness(1.2);
+    -webkit-backdrop-filter: blur(var(--blur-3xl)) saturate(240%) brightness(1.2);
+  }
+`;exports.frostVariantMixin=t;
+//# sourceMappingURL=variants.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"variants.css.cjs","names":[],"sources":["../../../src/styles/mixins/variants.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\n/**\n * Frost Variant Mixin\n *\n * Shared frost variant styles for components.\n * Provides consistent frosted glass effect with backdrop blur,\n * theme-aware colors, halo shadows, and elevation support.\n *\n * @param selector - CSS selector for the element (e.g., 'button', '.card', '.field')\n * @returns CSSResult with complete frost variant implementation\n *\n * @example\n * ```ts\n * import { frostVariantMixin } from '../../styles/mixins/frost.css';\n *\n * return {\n *   styles: [frostVariantMixin('button'), componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const frostVariantMixin = (selector: string) => css`\n  :host([variant='frost']) ${selector} {\n    backdrop-filter: blur(var(--blur-xl)) saturate(200%) brightness(1.1);\n    -webkit-backdrop-filter: blur(var(--blur-xl)) saturate(200%) brightness(1.1);\n  }\n\n  :host([variant='frost']:not([color])) ${selector} {\n    background: color-mix(in oklch, var(--color-canvas) 55%, transparent);\n    color: var(--color-contrast);\n    text-shadow: var(--text-shadow-xs);\n    border: var(--border) solid color-mix(in oklch, var(--color-contrast-400) 45%, transparent);\n  }\n\n  /* Frost neutral without elevation: use halo shadow */\n  :host([variant='frost']:not([color]):not([elevation])) ${selector} {\n    box-shadow: var(--halo-shadow-neutral);\n  }\n\n  /* Frost neutral with elevation: combine halo with elevation shadow */\n  :host([variant='frost']:not([color])[elevation]) ${selector} {\n    box-shadow: var(--halo-shadow-neutral), var(--_shadow);\n  }\n\n  :host([variant='frost'][color]) ${selector} {\n    background: color-mix(in oklch, var(--_theme-base), transparent);\n    border-color: color-mix(in oklch, var(--_theme-border) 45%, transparent);\n    color: var(--_theme-content);\n    border: var(--border) solid color-mix(in oklch, var(--_theme-border) 45%, transparent);\n    backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);\n    -webkit-backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);\n    text-shadow: var(--text-shadow-xs);\n    filter: brightness(1.05);\n  }\n\n  /* Frost color without elevation: use halo shadow */\n  :host([variant='frost'][color]:not([elevation])) ${selector} {\n    box-shadow: var(--_theme-halo);\n  }\n\n  /* Frost color with elevation: combine halo with elevation shadow */\n  :host([variant='frost'][color][elevation]) ${selector} {\n    box-shadow: var(--_theme-halo), var(--_shadow);\n  }\n\n  :host([variant='frost']:not([color])) ${selector}:hover {\n    backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);\n    -webkit-backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);\n  }\n\n  :host([variant='frost'][color]) ${selector}:hover {\n    backdrop-filter: blur(var(--blur-3xl)) saturate(240%) brightness(1.2);\n    -webkit-backdrop-filter: blur(var(--blur-3xl)) saturate(240%) brightness(1.2);\n  }\n`;\n"],"mappings":"+BAsBA,IAAa,EAAqB,GAAqB,EAAA,GAAG;6BAC7B,EAAS;;;;;0CAKI,EAAS;;;;;;;;2DAQQ,EAAS;;;;;qDAKf,EAAS;;;;oCAI1B,EAAS;;;;;;;;;;;;qDAYQ,EAAS;;;;;+CAKf,EAAS;;;;0CAId,EAAS;;;;;oCAKf,EAAS"}

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

@@ -0,0 +1,22 @@
+/**
+ * Frost Variant Mixin
+ *
+ * Shared frost variant styles for components.
+ * Provides consistent frosted glass effect with backdrop blur,
+ * theme-aware colors, halo shadows, and elevation support.
+ *
+ * @param selector - CSS selector for the element (e.g., 'button', '.card', '.field')
+ * @returns CSSResult with complete frost variant implementation
+ *
+ * @example
+ * ```ts
+ * import { frostVariantMixin } from '../../styles/mixins/frost.css';
+ *
+ * return {
+ *   styles: [frostVariantMixin('button'), componentStyles],
+ *   template: html`...`
+ * };
+ * ```
+ */
+export declare const frostVariantMixin: (selector: string) => import("@vielzeug/ore").CSSResult;
+//# sourceMappingURL=variants.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"variants.css.d.ts","sourceRoot":"","sources":["../../../src/styles/mixins/variants.css.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,iBAAiB,GAAI,UAAU,MAAM,sCAqDjD,CAAC"}

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

@@ -0,0 +1,60 @@
+import { css as e } from "@vielzeug/ore";
+//#region src/styles/mixins/variants.css.ts
+var t = (t) => e`
+  :host([variant='frost']) ${t} {
+    backdrop-filter: blur(var(--blur-xl)) saturate(200%) brightness(1.1);
+    -webkit-backdrop-filter: blur(var(--blur-xl)) saturate(200%) brightness(1.1);
+  }
+
+  :host([variant='frost']:not([color])) ${t} {
+    background: color-mix(in oklch, var(--color-canvas) 55%, transparent);
+    color: var(--color-contrast);
+    text-shadow: var(--text-shadow-xs);
+    border: var(--border) solid color-mix(in oklch, var(--color-contrast-400) 45%, transparent);
+  }
+
+  /* Frost neutral without elevation: use halo shadow */
+  :host([variant='frost']:not([color]):not([elevation])) ${t} {
+    box-shadow: var(--halo-shadow-neutral);
+  }
+
+  /* Frost neutral with elevation: combine halo with elevation shadow */
+  :host([variant='frost']:not([color])[elevation]) ${t} {
+    box-shadow: var(--halo-shadow-neutral), var(--_shadow);
+  }
+
+  :host([variant='frost'][color]) ${t} {
+    background: color-mix(in oklch, var(--_theme-base), transparent);
+    border-color: color-mix(in oklch, var(--_theme-border) 45%, transparent);
+    color: var(--_theme-content);
+    border: var(--border) solid color-mix(in oklch, var(--_theme-border) 45%, transparent);
+    backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);
+    -webkit-backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);
+    text-shadow: var(--text-shadow-xs);
+    filter: brightness(1.05);
+  }
+
+  /* Frost color without elevation: use halo shadow */
+  :host([variant='frost'][color]:not([elevation])) ${t} {
+    box-shadow: var(--_theme-halo);
+  }
+
+  /* Frost color with elevation: combine halo with elevation shadow */
+  :host([variant='frost'][color][elevation]) ${t} {
+    box-shadow: var(--_theme-halo), var(--_shadow);
+  }
+
+  :host([variant='frost']:not([color])) ${t}:hover {
+    backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);
+    -webkit-backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);
+  }
+
+  :host([variant='frost'][color]) ${t}:hover {
+    backdrop-filter: blur(var(--blur-3xl)) saturate(240%) brightness(1.2);
+    -webkit-backdrop-filter: blur(var(--blur-3xl)) saturate(240%) brightness(1.2);
+  }
+`;
+//#endregion
+export { t as frostVariantMixin };
+
+//# sourceMappingURL=variants.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"variants.css.js","names":[],"sources":["../../../src/styles/mixins/variants.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\n/**\n * Frost Variant Mixin\n *\n * Shared frost variant styles for components.\n * Provides consistent frosted glass effect with backdrop blur,\n * theme-aware colors, halo shadows, and elevation support.\n *\n * @param selector - CSS selector for the element (e.g., 'button', '.card', '.field')\n * @returns CSSResult with complete frost variant implementation\n *\n * @example\n * ```ts\n * import { frostVariantMixin } from '../../styles/mixins/frost.css';\n *\n * return {\n *   styles: [frostVariantMixin('button'), componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const frostVariantMixin = (selector: string) => css`\n  :host([variant='frost']) ${selector} {\n    backdrop-filter: blur(var(--blur-xl)) saturate(200%) brightness(1.1);\n    -webkit-backdrop-filter: blur(var(--blur-xl)) saturate(200%) brightness(1.1);\n  }\n\n  :host([variant='frost']:not([color])) ${selector} {\n    background: color-mix(in oklch, var(--color-canvas) 55%, transparent);\n    color: var(--color-contrast);\n    text-shadow: var(--text-shadow-xs);\n    border: var(--border) solid color-mix(in oklch, var(--color-contrast-400) 45%, transparent);\n  }\n\n  /* Frost neutral without elevation: use halo shadow */\n  :host([variant='frost']:not([color]):not([elevation])) ${selector} {\n    box-shadow: var(--halo-shadow-neutral);\n  }\n\n  /* Frost neutral with elevation: combine halo with elevation shadow */\n  :host([variant='frost']:not([color])[elevation]) ${selector} {\n    box-shadow: var(--halo-shadow-neutral), var(--_shadow);\n  }\n\n  :host([variant='frost'][color]) ${selector} {\n    background: color-mix(in oklch, var(--_theme-base), transparent);\n    border-color: color-mix(in oklch, var(--_theme-border) 45%, transparent);\n    color: var(--_theme-content);\n    border: var(--border) solid color-mix(in oklch, var(--_theme-border) 45%, transparent);\n    backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);\n    -webkit-backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);\n    text-shadow: var(--text-shadow-xs);\n    filter: brightness(1.05);\n  }\n\n  /* Frost color without elevation: use halo shadow */\n  :host([variant='frost'][color]:not([elevation])) ${selector} {\n    box-shadow: var(--_theme-halo);\n  }\n\n  /* Frost color with elevation: combine halo with elevation shadow */\n  :host([variant='frost'][color][elevation]) ${selector} {\n    box-shadow: var(--_theme-halo), var(--_shadow);\n  }\n\n  :host([variant='frost']:not([color])) ${selector}:hover {\n    backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);\n    -webkit-backdrop-filter: blur(var(--blur-2xl)) saturate(220%) brightness(1.15);\n  }\n\n  :host([variant='frost'][color]) ${selector}:hover {\n    backdrop-filter: blur(var(--blur-3xl)) saturate(240%) brightness(1.2);\n    -webkit-backdrop-filter: blur(var(--blur-3xl)) saturate(240%) brightness(1.2);\n  }\n`;\n"],"mappings":";;AAsBA,IAAa,KAAqB,MAAqB,CAAG;6BAC7B,EAAS;;;;;0CAKI,EAAS;;;;;;;;2DAQQ,EAAS;;;;;qDAKf,EAAS;;;;oCAI1B,EAAS;;;;;;;;;;;;qDAYQ,EAAS;;;;;+CAKf,EAAS;;;;0CAId,EAAS;;;;;oCAKf,EAAS"}