@vielzeug/buildit 2.0.0

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

@@ -0,0 +1,151 @@
+import { css as e } from "@vielzeug/craftit";
+//#region src/styles/mixins/theme.css.ts
+var t = e`
+  /* ========================================
+     Color Themes (Default: Neutral)
+     ======================================== */
+
+  :host {
+    /* Default to neutral when no color is specified */
+    --_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);
+  }
+
+  :host([color='primary']) {
+    --_theme-base: var(--color-primary);
+    --_theme-content: var(--color-primary-content);
+    --_theme-contrast: var(--color-primary-contrast);
+    --_theme-focus: var(--color-primary-focus);
+    --_theme-backdrop: var(--color-primary-backdrop);
+    --_theme-border: var(--color-primary-border);
+    --_theme-shadow: var(--color-primary-focus-shadow);
+    --_theme-halo: var(--halo-shadow-primary);
+  }
+
+  :host([color='secondary']) {
+    --_theme-base: var(--color-secondary);
+    --_theme-content: var(--color-secondary-content);
+    --_theme-contrast: var(--color-secondary-contrast);
+    --_theme-focus: var(--color-secondary-focus);
+    --_theme-backdrop: var(--color-secondary-backdrop);
+    --_theme-border: var(--color-secondary-border);
+    --_theme-shadow: var(--color-secondary-focus-shadow);
+    --_theme-halo: var(--halo-shadow-secondary);
+  }
+
+  :host([color='info']) {
+    --_theme-base: var(--color-info);
+    --_theme-content: var(--color-info-content);
+    --_theme-contrast: var(--color-info-contrast);
+    --_theme-focus: var(--color-info-focus);
+    --_theme-backdrop: var(--color-info-backdrop);
+    --_theme-border: var(--color-info-border);
+    --_theme-shadow: var(--color-info-focus-shadow);
+    --_theme-halo: var(--halo-shadow-info);
+  }
+
+  :host([color='success']) {
+    --_theme-base: var(--color-success);
+    --_theme-content: var(--color-success-content);
+    --_theme-contrast: var(--color-success-contrast);
+    --_theme-focus: var(--color-success-focus);
+    --_theme-backdrop: var(--color-success-backdrop);
+    --_theme-border: var(--color-success-border);
+    --_theme-shadow: var(--color-success-focus-shadow);
+    --_theme-halo: var(--halo-shadow-success);
+  }
+
+  :host([color='warning']) {
+    --_theme-base: var(--color-warning);
+    --_theme-content: var(--color-warning-content);
+    --_theme-contrast: var(--color-warning-contrast);
+    --_theme-focus: var(--color-warning-focus);
+    --_theme-backdrop: var(--color-warning-backdrop);
+    --_theme-border: var(--color-warning-border);
+    --_theme-shadow: var(--color-warning-focus-shadow);
+    --_theme-halo: var(--halo-shadow-warning);
+  }
+
+  :host([color='error']) {
+    --_theme-base: var(--color-error);
+    --_theme-content: var(--color-error-content);
+    --_theme-contrast: var(--color-error-contrast);
+    --_theme-focus: var(--color-error-focus);
+    --_theme-backdrop: var(--color-error-backdrop);
+    --_theme-border: var(--color-error-border);
+    --_theme-shadow: var(--color-error-focus-shadow);
+    --_theme-halo: var(--halo-shadow-error);
+  }
+`, n = 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);
+  }
+`, r = e`
+  @media (forced-colors: active) {
+    :host {
+      border: 1px solid ButtonText;
+    }
+  }
+`, i = (t) => e`
+  @media (forced-colors: active) {
+    ${t}:focus-visible {
+      outline: 2px solid Highlight;
+      outline-offset: 2px;
+      box-shadow: none;
+    }
+  }
+`, a = 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 { t as colorThemeMixin, n as elevationMixin, i as forcedColorsFocusMixin, a as forcedColorsFormControlMixin, r 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/craftit';\n\n// ── Color Theme ───────────────────────────────────────────────────────────────\n\n/**\n * Color Theme Mixin\n *\n * Provides theme color CSS custom properties for components.\n * Sets up --_theme-* variables that map to semantic color tokens.\n *\n * @example\n * ```ts\n * import { colorThemeMixin } from '../../styles';\n *\n * return {\n *   styles: [colorThemeMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const colorThemeMixin = css`\n  /* ========================================\n     Color Themes (Default: Neutral)\n     ======================================== */\n\n  :host {\n    /* Default to neutral when no color is specified */\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  :host([color='primary']) {\n    --_theme-base: var(--color-primary);\n    --_theme-content: var(--color-primary-content);\n    --_theme-contrast: var(--color-primary-contrast);\n    --_theme-focus: var(--color-primary-focus);\n    --_theme-backdrop: var(--color-primary-backdrop);\n    --_theme-border: var(--color-primary-border);\n    --_theme-shadow: var(--color-primary-focus-shadow);\n    --_theme-halo: var(--halo-shadow-primary);\n  }\n\n  :host([color='secondary']) {\n    --_theme-base: var(--color-secondary);\n    --_theme-content: var(--color-secondary-content);\n    --_theme-contrast: var(--color-secondary-contrast);\n    --_theme-focus: var(--color-secondary-focus);\n    --_theme-backdrop: var(--color-secondary-backdrop);\n    --_theme-border: var(--color-secondary-border);\n    --_theme-shadow: var(--color-secondary-focus-shadow);\n    --_theme-halo: var(--halo-shadow-secondary);\n  }\n\n  :host([color='info']) {\n    --_theme-base: var(--color-info);\n    --_theme-content: var(--color-info-content);\n    --_theme-contrast: var(--color-info-contrast);\n    --_theme-focus: var(--color-info-focus);\n    --_theme-backdrop: var(--color-info-backdrop);\n    --_theme-border: var(--color-info-border);\n    --_theme-shadow: var(--color-info-focus-shadow);\n    --_theme-halo: var(--halo-shadow-info);\n  }\n\n  :host([color='success']) {\n    --_theme-base: var(--color-success);\n    --_theme-content: var(--color-success-content);\n    --_theme-contrast: var(--color-success-contrast);\n    --_theme-focus: var(--color-success-focus);\n    --_theme-backdrop: var(--color-success-backdrop);\n    --_theme-border: var(--color-success-border);\n    --_theme-shadow: var(--color-success-focus-shadow);\n    --_theme-halo: var(--halo-shadow-success);\n  }\n\n  :host([color='warning']) {\n    --_theme-base: var(--color-warning);\n    --_theme-content: var(--color-warning-content);\n    --_theme-contrast: var(--color-warning-contrast);\n    --_theme-focus: var(--color-warning-focus);\n    --_theme-backdrop: var(--color-warning-backdrop);\n    --_theme-border: var(--color-warning-border);\n    --_theme-shadow: var(--color-warning-focus-shadow);\n    --_theme-halo: var(--halo-shadow-warning);\n  }\n\n  :host([color='error']) {\n    --_theme-base: var(--color-error);\n    --_theme-content: var(--color-error-content);\n    --_theme-contrast: var(--color-error-contrast);\n    --_theme-focus: var(--color-error-focus);\n    --_theme-backdrop: var(--color-error-backdrop);\n    --_theme-border: var(--color-error-border);\n    --_theme-shadow: var(--color-error-focus-shadow);\n    --_theme-halo: var(--halo-shadow-error);\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":";;AAoBA,IAAa,IAAkB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsGrB,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,84 @@
+let e=require(`@vielzeug/craftit`);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 srgb, var(--color-canvas) 55%, transparent);
+    border-color: color-mix(in srgb, var(--color-contrast-400) 45%, transparent);
+    color: var(--color-contrast);
+    text-shadow: var(--text-shadow-xs);
+    border: var(--border) solid var(--_border-color);
+  }
+
+  /* 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 srgb, var(--_theme-base), transparent);
+    border-color: color-mix(in srgb, var(--_theme-border) 45%, transparent);
+    color: var(--_theme-content);
+    border: var(--border) solid color-mix(in srgb, 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);
+  }
+
+  /* ========================================
+     Halo Shadows per Theme Color
+     ======================================== */
+
+  :host([variant='frost'][color='primary']) ${t} {
+    box-shadow: var(--halo-shadow-primary);
+  }
+
+  :host([variant='frost'][color='secondary']) ${t} {
+    box-shadow: var(--halo-shadow-secondary);
+  }
+
+  :host([variant='frost'][color='info']) ${t} {
+    box-shadow: var(--halo-shadow-info);
+  }
+
+  :host([variant='frost'][color='success']) ${t} {
+    box-shadow: var(--halo-shadow-success);
+  }
+
+  :host([variant='frost'][color='warning']) ${t} {
+    box-shadow: var(--halo-shadow-warning);
+  }
+
+  :host([variant='frost'][color='error']) ${t} {
+    box-shadow: var(--halo-shadow-error);
+  }
+`;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/craftit';\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 srgb, var(--color-canvas) 55%, transparent);\n    border-color: color-mix(in srgb, var(--color-contrast-400) 45%, transparent);\n    color: var(--color-contrast);\n    text-shadow: var(--text-shadow-xs);\n    border: var(--border) solid var(--_border-color);\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 srgb, var(--_theme-base), transparent);\n    border-color: color-mix(in srgb, var(--_theme-border) 45%, transparent);\n    color: var(--_theme-content);\n    border: var(--border) solid color-mix(in srgb, 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  /* ========================================\n     Halo Shadows per Theme Color\n     ======================================== */\n\n  :host([variant='frost'][color='primary']) ${selector} {\n    box-shadow: var(--halo-shadow-primary);\n  }\n\n  :host([variant='frost'][color='secondary']) ${selector} {\n    box-shadow: var(--halo-shadow-secondary);\n  }\n\n  :host([variant='frost'][color='info']) ${selector} {\n    box-shadow: var(--halo-shadow-info);\n  }\n\n  :host([variant='frost'][color='success']) ${selector} {\n    box-shadow: var(--halo-shadow-success);\n  }\n\n  :host([variant='frost'][color='warning']) ${selector} {\n    box-shadow: var(--halo-shadow-warning);\n  }\n\n  :host([variant='frost'][color='error']) ${selector} {\n    box-shadow: var(--halo-shadow-error);\n  }\n`;\n"],"mappings":"mCAsBA,IAAa,EAAqB,GAAqB,EAAA,GAAG;6BAC7B,EAAS;;;;;0CAKI,EAAS;;;;;;;;;2DASQ,EAAS;;;;;qDAKf,EAAS;;;;oCAI1B,EAAS;;;;;;;;;;;;qDAYQ,EAAS;;;;;+CAKf,EAAS;;;;0CAId,EAAS;;;;;oCAKf,EAAS;;;;;;;;;8CASC,EAAS;;;;gDAIP,EAAS;;;;2CAId,EAAS;;;;8CAIN,EAAS;;;;8CAIT,EAAS;;;;4CAIX,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/craftit").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,0CAkFjD,CAAC"}

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

@@ -0,0 +1,89 @@
+import { css as e } from "@vielzeug/craftit";
+//#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 srgb, var(--color-canvas) 55%, transparent);
+    border-color: color-mix(in srgb, var(--color-contrast-400) 45%, transparent);
+    color: var(--color-contrast);
+    text-shadow: var(--text-shadow-xs);
+    border: var(--border) solid var(--_border-color);
+  }
+
+  /* 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 srgb, var(--_theme-base), transparent);
+    border-color: color-mix(in srgb, var(--_theme-border) 45%, transparent);
+    color: var(--_theme-content);
+    border: var(--border) solid color-mix(in srgb, 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);
+  }
+
+  /* ========================================
+     Halo Shadows per Theme Color
+     ======================================== */
+
+  :host([variant='frost'][color='primary']) ${t} {
+    box-shadow: var(--halo-shadow-primary);
+  }
+
+  :host([variant='frost'][color='secondary']) ${t} {
+    box-shadow: var(--halo-shadow-secondary);
+  }
+
+  :host([variant='frost'][color='info']) ${t} {
+    box-shadow: var(--halo-shadow-info);
+  }
+
+  :host([variant='frost'][color='success']) ${t} {
+    box-shadow: var(--halo-shadow-success);
+  }
+
+  :host([variant='frost'][color='warning']) ${t} {
+    box-shadow: var(--halo-shadow-warning);
+  }
+
+  :host([variant='frost'][color='error']) ${t} {
+    box-shadow: var(--halo-shadow-error);
+  }
+`;
+//#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/craftit';\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 srgb, var(--color-canvas) 55%, transparent);\n    border-color: color-mix(in srgb, var(--color-contrast-400) 45%, transparent);\n    color: var(--color-contrast);\n    text-shadow: var(--text-shadow-xs);\n    border: var(--border) solid var(--_border-color);\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 srgb, var(--_theme-base), transparent);\n    border-color: color-mix(in srgb, var(--_theme-border) 45%, transparent);\n    color: var(--_theme-content);\n    border: var(--border) solid color-mix(in srgb, 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  /* ========================================\n     Halo Shadows per Theme Color\n     ======================================== */\n\n  :host([variant='frost'][color='primary']) ${selector} {\n    box-shadow: var(--halo-shadow-primary);\n  }\n\n  :host([variant='frost'][color='secondary']) ${selector} {\n    box-shadow: var(--halo-shadow-secondary);\n  }\n\n  :host([variant='frost'][color='info']) ${selector} {\n    box-shadow: var(--halo-shadow-info);\n  }\n\n  :host([variant='frost'][color='success']) ${selector} {\n    box-shadow: var(--halo-shadow-success);\n  }\n\n  :host([variant='frost'][color='warning']) ${selector} {\n    box-shadow: var(--halo-shadow-warning);\n  }\n\n  :host([variant='frost'][color='error']) ${selector} {\n    box-shadow: var(--halo-shadow-error);\n  }\n`;\n"],"mappings":";;AAsBA,IAAa,KAAqB,MAAqB,CAAG;6BAC7B,EAAS;;;;;0CAKI,EAAS;;;;;;;;;2DASQ,EAAS;;;;;qDAKf,EAAS;;;;oCAI1B,EAAS;;;;;;;;;;;;qDAYQ,EAAS;;;;;+CAKf,EAAS;;;;0CAId,EAAS;;;;;oCAKf,EAAS;;;;;;;;;8CASC,EAAS;;;;gDAIP,EAAS;;;;2CAId,EAAS;;;;8CAIN,EAAS;;;;8CAIT,EAAS;;;;4CAIX,EAAS"}

package/dist/styles/preflight.css

@@ -0,0 +1,237 @@
+/*
+ * Suppress flash of unstyled content (FOUC) for custom elements.
+ * :not(:defined) only matches custom elements that have not yet been upgraded —
+ * standard HTML elements are always :defined, so this rule is safe globally.
+ * The rule is removed automatically once customElements.define() runs.
+ */
+:not(:defined) {
+  visibility: hidden;
+}
+
+*,
+::after,
+::before,
+::backdrop,
+::file-selector-button {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html,
+:host {
+  font-family: var(
+    --default-font-family,
+    ui-sans-serif,
+    system-ui,
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Noto Color Emoji'
+  );
+  line-height: 1.5;
+  tab-size: 4;
+  text-size-adjust: 100%;
+  -webkit-tap-highlight-color: transparent;
+  color-scheme: light dark;
+}
+
+body {
+  line-height: inherit;
+}
+
+hr {
+  height: 0;
+  color: inherit;
+  border-top-width: 1px;
+}
+
+abbr:where([title]) {
+  text-decoration: underline dotted;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+code,
+kbd,
+samp,
+pre {
+  font-family: var(
+    --default-mono-font-family,
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    'Liberation Mono',
+    'Courier New',
+    monospace
+  );
+  font-size: 1em;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+table {
+  text-indent: 0;
+  border-collapse: collapse;
+  border-color: inherit;
+}
+
+:-moz-focusring {
+  outline: auto;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+summary {
+  display: list-item;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+}
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  vertical-align: middle;
+}
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+button,
+input,
+select,
+optgroup,
+textarea,
+::file-selector-button {
+  font: inherit;
+  font-variation-settings: inherit;
+  font-feature-settings: inherit;
+  color: inherit;
+  letter-spacing: inherit;
+  background-color: transparent;
+  border-radius: 0;
+  opacity: 1; /* 4 */
+}
+
+:where(select:is([multiple], [size])) optgroup {
+  font-weight: bolder;
+}
+
+:where(select:is([multiple], [size])) optgroup option {
+  padding-inline-start: 20px;
+}
+
+::file-selector-button {
+  margin-inline-end: 4px;
+}
+
+::placeholder {
+  color: color-mix(in oklab, currentcolor 50%, transparent);
+  opacity: 1;
+}
+
+textarea {
+  resize: vertical;
+}
+
+::-webkit-search-decoration {
+  appearance: none;
+}
+
+::-webkit-date-and-time-value {
+  min-height: 1lh;
+  text-align: inherit;
+}
+
+::-webkit-datetime-edit {
+  display: inline-flex;
+}
+
+::-webkit-datetime-edit-fields-wrapper {
+  padding: 0;
+}
+
+::-webkit-datetime-edit,
+::-webkit-datetime-edit-year-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-minute-field,
+::-webkit-datetime-edit-second-field,
+::-webkit-datetime-edit-millisecond-field,
+::-webkit-datetime-edit-meridiem-field {
+  padding-block: 0;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+button,
+input:where([type='button'], [type='reset'], [type='submit']),
+::file-selector-button {
+  appearance: auto;
+}
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[hidden]:where(:not([hidden='until-found'])) {
+  display: none !important;
+}

package/dist/styles/styles.css

@@ -0,0 +1,5 @@
+/* Import all external stylesheets first (LightningCSS requirement) */
+@import url('preflight.css');
+@import url('theme.css');
+@import url('animation.css');
+@import url('layer.css');