@vielzeug/refine 1.1.1

package/dist/styles/index.js.map

@@ -0,0 +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"}

package/dist/styles/layer.css

@@ -0,0 +1,19 @@
+/* ========================================
+   CSS Cascade Layers
+
+   Define explicit layer order for predictable styling.
+   Layer order > Specificity
+
+   User styles (unlayered or custom layers) automatically
+   have higher priority than all Refine layers.
+   ======================================== */
+
+@layer refine.reset,
+  refine.tokens,
+  refine.themes,
+  refine.base,
+  refine.variants,
+  refine.sizes,
+  refine.states,
+  refine.utilities,
+  refine.overrides;

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

@@ -0,0 +1,51 @@
+let e=require("@vielzeug/ore");var t=`position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border-width:0;clip-path:inset(50%);`,n=e.css`
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    white-space: nowrap;
+    border-width: 0;
+    clip-path: inset(50%);
+  }
+`,r=e.css`
+  @media (pointer: coarse) {
+    /* Default / md size: promote all scale tokens one tier up (md → lg) */
+    :host,
+    :host([size='md']) {
+      --_touch-target: var(--size-11);
+      --_font-size: var(--text-base);
+      --_gap: var(--size-2-5);
+      --_height: var(--size-12);
+      --_size: var(--size-6);
+      --_icon-size: var(--size-6);
+      --_padding: var(--size-2-5) var(--size-5);
+    }
+
+    /* sm size: promote to md scale */
+    :host([size='sm']) {
+      --_touch-target: var(--size-11);
+      --_font-size: var(--text-sm);
+      --_gap: var(--size-2);
+      --_height: var(--size-10);
+      --_size: var(--size-5);
+      --_icon-size: var(--size-5);
+      --_padding: var(--size-2) var(--size-4);
+    }
+
+    /* lg size: already max, just enforce touch target */
+    :host([size='lg']) {
+      --_touch-target: var(--size-11);
+    }
+  }
+`,i=e.css`
+  @media (prefers-reduced-motion: reduce) {
+    :host {
+      --_motion-transition: none;
+      --_motion-animation: none;
+    }
+  }
+`;exports.SR_ONLY_INLINE_STYLE=t,exports.coarsePointerMixin=r,exports.reducedMotionMixin=i,exports.srOnlyMixin=n;
+//# sourceMappingURL=accessibility.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accessibility.css.cjs","names":[],"sources":["../../../src/styles/mixins/accessibility.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\n/**\n * Visually-Hidden (\"sr-only\") Style\n *\n * Single source of truth for the standard visually-hidden-but-accessible\n * clipping technique — hides content visually while keeping it in the\n * accessibility tree (screen readers, `aria-live` regions).\n *\n * Two forms are exported from the same declarations so component stylesheets\n * and JS-created DOM elements never drift out of sync:\n * - `srOnlyMixin` — a `.sr-only` class for component `styles: [...]` arrays.\n * - `SR_ONLY_INLINE_STYLE` — the equivalent `cssText` string for elements\n *   created outside any component's shadow root (e.g. a live region appended\n *   directly to `document.body`).\n *\n * @example\n * ```ts\n * // Component stylesheet\n * import { srOnlyMixin } from '../../styles';\n * return { styles: [srOnlyMixin, componentStyles], template: html`<span class=\"sr-only\">...</span>` };\n *\n * // JS-created element outside a shadow root\n * import { SR_ONLY_INLINE_STYLE } from '../../styles';\n * el.style.cssText = SR_ONLY_INLINE_STYLE;\n * ```\n */\nexport const SR_ONLY_INLINE_STYLE =\n  'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;' +\n  'white-space:nowrap;border-width:0;clip-path:inset(50%);';\n\nexport const srOnlyMixin = css`\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    white-space: nowrap;\n    border-width: 0;\n    clip-path: inset(50%);\n  }\n`;\n\n/**\n * Coarse Pointer Mixin\n *\n * Under `@media (pointer: coarse)`, promotes the full component one size tier\n * so padding, gap, font-size, height, and icon-size all grow proportionally\n * with the WCAG 44 px touch target — not just the minimum height in isolation:\n *\n * - default / `size=\"md\"` → lg-scale tokens + `--_touch-target: var(--size-11)`\n * - `size=\"sm\"` → md-scale tokens + `--_touch-target: var(--size-11)`\n * - `size=\"lg\"` → touch target only (already at max scale)\n *\n * Interactive elements inside the component that need a guaranteed tap target\n * should still reference `--_touch-target`:\n *\n * ```css\n * .close { min-height: var(--_touch-target); min-width: var(--_touch-target); }\n * ```\n *\n * @example\n * ```ts\n * import { coarsePointerMixin } from '../../styles';\n *\n * return {\n *   styles: [coarsePointerMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const coarsePointerMixin = css`\n  @media (pointer: coarse) {\n    /* Default / md size: promote all scale tokens one tier up (md → lg) */\n    :host,\n    :host([size='md']) {\n      --_touch-target: var(--size-11);\n      --_font-size: var(--text-base);\n      --_gap: var(--size-2-5);\n      --_height: var(--size-12);\n      --_size: var(--size-6);\n      --_icon-size: var(--size-6);\n      --_padding: var(--size-2-5) var(--size-5);\n    }\n\n    /* sm size: promote to md scale */\n    :host([size='sm']) {\n      --_touch-target: var(--size-11);\n      --_font-size: var(--text-sm);\n      --_gap: var(--size-2);\n      --_height: var(--size-10);\n      --_size: var(--size-5);\n      --_icon-size: var(--size-5);\n      --_padding: var(--size-2) var(--size-4);\n    }\n\n    /* lg size: already max, just enforce touch target */\n    :host([size='lg']) {\n      --_touch-target: var(--size-11);\n    }\n  }\n`;\n\n/**\n * Reduced Motion Mixin\n *\n * Defines `--_motion-transition: none` and `--_motion-animation: none` on\n * `:host` under `@media (prefers-reduced-motion: reduce)`.\n * Component CSS opts in via CSS variable fallbacks:\n *\n * ```css\n * .panel { transition: var(--_motion-transition, opacity 300ms ease); }\n * .loader { animation: var(--_motion-animation, spin 0.6s linear infinite); }\n * ```\n *\n * @example\n * ```ts\n * import { reducedMotionMixin } from '../../styles';\n *\n * return {\n *   styles: [reducedMotionMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const reducedMotionMixin = css`\n  @media (prefers-reduced-motion: reduce) {\n    :host {\n      --_motion-transition: none;\n      --_motion-animation: none;\n    }\n  }\n`;\n"],"mappings":"+BA2BA,IAAa,EACX,uIAGW,EAAc,EAAA,GAAG;;;;;;;;;;;;EA0CjB,EAAqB,EAAA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsDxB,EAAqB,EAAA,GAAG"}

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

@@ -0,0 +1,80 @@
+/**
+ * Visually-Hidden ("sr-only") Style
+ *
+ * Single source of truth for the standard visually-hidden-but-accessible
+ * clipping technique — hides content visually while keeping it in the
+ * accessibility tree (screen readers, `aria-live` regions).
+ *
+ * Two forms are exported from the same declarations so component stylesheets
+ * and JS-created DOM elements never drift out of sync:
+ * - `srOnlyMixin` — a `.sr-only` class for component `styles: [...]` arrays.
+ * - `SR_ONLY_INLINE_STYLE` — the equivalent `cssText` string for elements
+ *   created outside any component's shadow root (e.g. a live region appended
+ *   directly to `document.body`).
+ *
+ * @example
+ * ```ts
+ * // Component stylesheet
+ * import { srOnlyMixin } from '../../styles';
+ * return { styles: [srOnlyMixin, componentStyles], template: html`<span class="sr-only">...</span>` };
+ *
+ * // JS-created element outside a shadow root
+ * import { SR_ONLY_INLINE_STYLE } from '../../styles';
+ * el.style.cssText = SR_ONLY_INLINE_STYLE;
+ * ```
+ */
+export declare const SR_ONLY_INLINE_STYLE: string;
+export declare const srOnlyMixin: import("@vielzeug/ore").CSSResult;
+/**
+ * Coarse Pointer Mixin
+ *
+ * Under `@media (pointer: coarse)`, promotes the full component one size tier
+ * so padding, gap, font-size, height, and icon-size all grow proportionally
+ * with the WCAG 44 px touch target — not just the minimum height in isolation:
+ *
+ * - default / `size="md"` → lg-scale tokens + `--_touch-target: var(--size-11)`
+ * - `size="sm"` → md-scale tokens + `--_touch-target: var(--size-11)`
+ * - `size="lg"` → touch target only (already at max scale)
+ *
+ * Interactive elements inside the component that need a guaranteed tap target
+ * should still reference `--_touch-target`:
+ *
+ * ```css
+ * .close { min-height: var(--_touch-target); min-width: var(--_touch-target); }
+ * ```
+ *
+ * @example
+ * ```ts
+ * import { coarsePointerMixin } from '../../styles';
+ *
+ * return {
+ *   styles: [coarsePointerMixin, componentStyles],
+ *   template: html`...`
+ * };
+ * ```
+ */
+export declare const coarsePointerMixin: import("@vielzeug/ore").CSSResult;
+/**
+ * Reduced Motion Mixin
+ *
+ * Defines `--_motion-transition: none` and `--_motion-animation: none` on
+ * `:host` under `@media (prefers-reduced-motion: reduce)`.
+ * Component CSS opts in via CSS variable fallbacks:
+ *
+ * ```css
+ * .panel { transition: var(--_motion-transition, opacity 300ms ease); }
+ * .loader { animation: var(--_motion-animation, spin 0.6s linear infinite); }
+ * ```
+ *
+ * @example
+ * ```ts
+ * import { reducedMotionMixin } from '../../styles';
+ *
+ * return {
+ *   styles: [reducedMotionMixin, componentStyles],
+ *   template: html`...`
+ * };
+ * ```
+ */
+export declare const reducedMotionMixin: import("@vielzeug/ore").CSSResult;
+//# sourceMappingURL=accessibility.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accessibility.css.d.ts","sourceRoot":"","sources":["../../../src/styles/mixins/accessibility.css.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,oBAAoB,QAE0B,CAAC;AAE5D,eAAO,MAAM,WAAW,mCAYvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,kBAAkB,mCA8B9B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,kBAAkB,mCAO9B,CAAC"}

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

@@ -0,0 +1,56 @@
+import { css as e } from "@vielzeug/ore";
+//#region src/styles/mixins/accessibility.css.ts
+var t = "position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border-width:0;clip-path:inset(50%);", n = e`
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    white-space: nowrap;
+    border-width: 0;
+    clip-path: inset(50%);
+  }
+`, r = e`
+  @media (pointer: coarse) {
+    /* Default / md size: promote all scale tokens one tier up (md → lg) */
+    :host,
+    :host([size='md']) {
+      --_touch-target: var(--size-11);
+      --_font-size: var(--text-base);
+      --_gap: var(--size-2-5);
+      --_height: var(--size-12);
+      --_size: var(--size-6);
+      --_icon-size: var(--size-6);
+      --_padding: var(--size-2-5) var(--size-5);
+    }
+
+    /* sm size: promote to md scale */
+    :host([size='sm']) {
+      --_touch-target: var(--size-11);
+      --_font-size: var(--text-sm);
+      --_gap: var(--size-2);
+      --_height: var(--size-10);
+      --_size: var(--size-5);
+      --_icon-size: var(--size-5);
+      --_padding: var(--size-2) var(--size-4);
+    }
+
+    /* lg size: already max, just enforce touch target */
+    :host([size='lg']) {
+      --_touch-target: var(--size-11);
+    }
+  }
+`, i = e`
+  @media (prefers-reduced-motion: reduce) {
+    :host {
+      --_motion-transition: none;
+      --_motion-animation: none;
+    }
+  }
+`;
+//#endregion
+export { t as SR_ONLY_INLINE_STYLE, r as coarsePointerMixin, i as reducedMotionMixin, n as srOnlyMixin };
+
+//# sourceMappingURL=accessibility.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accessibility.css.js","names":[],"sources":["../../../src/styles/mixins/accessibility.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\n/**\n * Visually-Hidden (\"sr-only\") Style\n *\n * Single source of truth for the standard visually-hidden-but-accessible\n * clipping technique — hides content visually while keeping it in the\n * accessibility tree (screen readers, `aria-live` regions).\n *\n * Two forms are exported from the same declarations so component stylesheets\n * and JS-created DOM elements never drift out of sync:\n * - `srOnlyMixin` — a `.sr-only` class for component `styles: [...]` arrays.\n * - `SR_ONLY_INLINE_STYLE` — the equivalent `cssText` string for elements\n *   created outside any component's shadow root (e.g. a live region appended\n *   directly to `document.body`).\n *\n * @example\n * ```ts\n * // Component stylesheet\n * import { srOnlyMixin } from '../../styles';\n * return { styles: [srOnlyMixin, componentStyles], template: html`<span class=\"sr-only\">...</span>` };\n *\n * // JS-created element outside a shadow root\n * import { SR_ONLY_INLINE_STYLE } from '../../styles';\n * el.style.cssText = SR_ONLY_INLINE_STYLE;\n * ```\n */\nexport const SR_ONLY_INLINE_STYLE =\n  'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;' +\n  'white-space:nowrap;border-width:0;clip-path:inset(50%);';\n\nexport const srOnlyMixin = css`\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    white-space: nowrap;\n    border-width: 0;\n    clip-path: inset(50%);\n  }\n`;\n\n/**\n * Coarse Pointer Mixin\n *\n * Under `@media (pointer: coarse)`, promotes the full component one size tier\n * so padding, gap, font-size, height, and icon-size all grow proportionally\n * with the WCAG 44 px touch target — not just the minimum height in isolation:\n *\n * - default / `size=\"md\"` → lg-scale tokens + `--_touch-target: var(--size-11)`\n * - `size=\"sm\"` → md-scale tokens + `--_touch-target: var(--size-11)`\n * - `size=\"lg\"` → touch target only (already at max scale)\n *\n * Interactive elements inside the component that need a guaranteed tap target\n * should still reference `--_touch-target`:\n *\n * ```css\n * .close { min-height: var(--_touch-target); min-width: var(--_touch-target); }\n * ```\n *\n * @example\n * ```ts\n * import { coarsePointerMixin } from '../../styles';\n *\n * return {\n *   styles: [coarsePointerMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const coarsePointerMixin = css`\n  @media (pointer: coarse) {\n    /* Default / md size: promote all scale tokens one tier up (md → lg) */\n    :host,\n    :host([size='md']) {\n      --_touch-target: var(--size-11);\n      --_font-size: var(--text-base);\n      --_gap: var(--size-2-5);\n      --_height: var(--size-12);\n      --_size: var(--size-6);\n      --_icon-size: var(--size-6);\n      --_padding: var(--size-2-5) var(--size-5);\n    }\n\n    /* sm size: promote to md scale */\n    :host([size='sm']) {\n      --_touch-target: var(--size-11);\n      --_font-size: var(--text-sm);\n      --_gap: var(--size-2);\n      --_height: var(--size-10);\n      --_size: var(--size-5);\n      --_icon-size: var(--size-5);\n      --_padding: var(--size-2) var(--size-4);\n    }\n\n    /* lg size: already max, just enforce touch target */\n    :host([size='lg']) {\n      --_touch-target: var(--size-11);\n    }\n  }\n`;\n\n/**\n * Reduced Motion Mixin\n *\n * Defines `--_motion-transition: none` and `--_motion-animation: none` on\n * `:host` under `@media (prefers-reduced-motion: reduce)`.\n * Component CSS opts in via CSS variable fallbacks:\n *\n * ```css\n * .panel { transition: var(--_motion-transition, opacity 300ms ease); }\n * .loader { animation: var(--_motion-animation, spin 0.6s linear infinite); }\n * ```\n *\n * @example\n * ```ts\n * import { reducedMotionMixin } from '../../styles';\n *\n * return {\n *   styles: [reducedMotionMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const reducedMotionMixin = css`\n  @media (prefers-reduced-motion: reduce) {\n    :host {\n      --_motion-transition: none;\n      --_motion-animation: none;\n    }\n  }\n`;\n"],"mappings":";;AA2BA,IAAa,IACX,wIAGW,IAAc,CAAG;;;;;;;;;;;;GA0CjB,IAAqB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDxB,IAAqB,CAAG"}

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

@@ -0,0 +1,133 @@
+let e=require("@vielzeug/ore");var t=!1;function n(){if(!t){if(typeof CSS<`u`&&CSS.registerProperty)try{CSS.registerProperty({inherits:!1,initialValue:`0deg`,name:`--rainbow-angle`,syntax:`<angle>`})}catch{}t=!0}}var r=!1;function i(){if(!r){if(typeof CSS<`u`&&CSS.registerProperty)try{CSS.registerProperty({inherits:!1,initialValue:`0deg`,name:`--shine-angle`,syntax:`<angle>`})}catch{}r=!0}}var a=t=>(n(),e.css`
+    /* ========================================
+       Rainbow Border Effect
+       ======================================== */
+
+    :host([effect='rainbow']) ${t} {
+      position: relative;
+      border: var(--border-2) solid transparent !important;
+      overflow: visible;
+    }
+
+    /* Rainbow border and glow layers */
+    :host([effect='rainbow']) ${t}::before, :host([effect='rainbow']) ${t}::after {
+      content: '';
+      position: absolute;
+      inset: calc(-1 * var(--border-2));
+      border: inherit;
+      border-radius: inherit;
+
+      /* Reserve no-clip space for glow */
+      box-shadow: 0 0 calc(3 * var(--blur-xl)) rgba(0 0 0 / 0.001);
+
+      /* Rainbow gradient — Okabe-Ito colorblind-safe palette */
+      background: conic-gradient(
+          from var(--rainbow-angle),
+          #56b4e9,
+          /* Sky Blue       */ #0072b2,
+          /* Deep Blue      */ #009e73,
+          /* Bluish Green   */ #f0e442,
+          /* Yellow         */ #e69f00,
+          /* Orange         */ #d55e00,
+          /* Vermillion     */ #cc79a7,
+          /* Reddish Purple */ #56b4e9 /* Back to Sky Blue */
+        )
+        border-box;
+
+      /* Make everything inside padding-box transparent
+       by subtracting padding-box from no-clip box */
+      -webkit-mask:
+        conic-gradient(red 0 0) no-clip subtract,
+        conic-gradient(red 0 0) padding-box;
+      mask:
+        conic-gradient(red 0 0) no-clip subtract,
+        conic-gradient(red 0 0) padding-box;
+
+      pointer-events: none;
+      animation: rainbow-rotate 4s linear infinite;
+    }
+
+    /* Turn one pseudo layer into glow halo */
+    :host([effect='rainbow']) ${t}::after {
+      filter: blur(var(--blur-xl));
+    }
+
+    /* ========================================
+       Animation
+       ======================================== */
+
+    @keyframes rainbow-rotate {
+      to {
+        --rainbow-angle: 1turn;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :host([effect='rainbow']) ${t}::before, :host([effect='rainbow']) ${t}::after {
+        animation: none;
+      }
+    }
+  `),o=t=>(i(),e.css`
+    /* ========================================
+       Shine Border Effect
+       ======================================== */
+
+    :host([effect='shine']) ${t} {
+      position: relative;
+      overflow: visible;
+      --_shine-color: light-dark(
+        oklch(from var(--_theme-focus) 0.6 calc(c * 1.2) h),
+        oklch(from var(--_theme-focus) 0.85 calc(c * 1.2) h)
+      );
+    }
+
+    /* Shine border — single pseudo, glow via box-shadow (follows border-radius, no artifacts) */
+    :host([effect='shine']) ${t}::before {
+      content: '';
+      position: absolute;
+      inset: calc(-1 * var(--border-2));
+      border: var(--border-2) solid transparent;
+      border-radius: calc(var(--_radius, 0px) + var(--border-2));
+
+      /* Two comet tails 180deg apart, same shape rotating together */
+      background:
+        conic-gradient(from var(--shine-angle), transparent 0%, transparent 75%, var(--_shine-color) 100%) border-box,
+        conic-gradient(
+            from calc(var(--shine-angle) + 180deg),
+            transparent 0%,
+            transparent 75%,
+            var(--_shine-color) 100%
+          )
+          border-box;
+
+      -webkit-mask:
+        conic-gradient(red 0 0) no-clip subtract,
+        conic-gradient(red 0 0) padding-box;
+      mask:
+        conic-gradient(red 0 0) no-clip subtract,
+        conic-gradient(red 0 0) padding-box;
+
+      /* Use the theme's own focus-shadow — color-aware, well-tuned, no artifacts */
+      box-shadow: var(--_theme-shadow);
+
+      pointer-events: none;
+      animation: shine-rotate 2.5s linear infinite;
+    }
+
+    /* ========================================
+       Animation
+       ======================================== */
+
+    @keyframes shine-rotate {
+      to {
+        --shine-angle: 1turn;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :host([effect='shine']) ${t}::before {
+        animation: none;
+      }
+    }
+  `);exports.rainbowEffectMixin=a,exports.registerRainbowProperty=n,exports.registerShineProperty=i,exports.shineEffectMixin=o;
+//# sourceMappingURL=animation.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"animation.css.cjs","names":[],"sources":["../../../src/styles/mixins/animation.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\n/**\n * Register the --rainbow-angle CSS custom property so browsers can\n * interpolate it inside conic-gradient().\n * Called automatically by rainbowEffectMixin on first use.\n */\nlet rainbowRegistered = false;\n\nexport function registerRainbowProperty() {\n  if (rainbowRegistered) return;\n\n  if (typeof CSS !== 'undefined' && CSS.registerProperty) {\n    try {\n      CSS.registerProperty({\n        inherits: false,\n        initialValue: '0deg',\n        name: '--rainbow-angle',\n        syntax: '<angle>',\n      });\n    } catch {\n      // Already registered — safe to ignore\n    }\n  }\n\n  rainbowRegistered = true;\n}\n\n/**\n * Register the --shine-angle CSS custom property so browsers can\n * interpolate it inside conic-gradient().\n * Called automatically by shineEffectMixin on first use.\n */\nlet shineRegistered = false;\n\nexport function registerShineProperty() {\n  if (shineRegistered) return;\n\n  if (typeof CSS !== 'undefined' && CSS.registerProperty) {\n    try {\n      CSS.registerProperty({\n        inherits: false,\n        initialValue: '0deg',\n        name: '--shine-angle',\n        syntax: '<angle>',\n      });\n    } catch {\n      // Already registered — safe to ignore\n    }\n  }\n\n  shineRegistered = true;\n}\n\n/**\n * Rainbow Border Effect Mixin\n *\n * Animated rainbow border with glow effect.\n * Perfect for highlighting call-to-action elements or special features.\n *\n * @param selector - CSS selector for the element (e.g., 'button', '.box')\n * @returns CSSResult with rainbow border animation\n *\n * @example\n * ```ts\n * import { rainbowEffectMixin } from '../../styles/effects/rainbow.css';\n *\n * return {\n *   styles: [rainbowEffectMixin('button'), componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const rainbowEffectMixin = (selector: string) => {\n  registerRainbowProperty();\n\n  return css`\n    /* ========================================\n       Rainbow Border Effect\n       ======================================== */\n\n    :host([effect='rainbow']) ${selector} {\n      position: relative;\n      border: var(--border-2) solid transparent !important;\n      overflow: visible;\n    }\n\n    /* Rainbow border and glow layers */\n    :host([effect='rainbow']) ${selector}::before, :host([effect='rainbow']) ${selector}::after {\n      content: '';\n      position: absolute;\n      inset: calc(-1 * var(--border-2));\n      border: inherit;\n      border-radius: inherit;\n\n      /* Reserve no-clip space for glow */\n      box-shadow: 0 0 calc(3 * var(--blur-xl)) rgba(0 0 0 / 0.001);\n\n      /* Rainbow gradient — Okabe-Ito colorblind-safe palette */\n      background: conic-gradient(\n          from var(--rainbow-angle),\n          #56b4e9,\n          /* Sky Blue       */ #0072b2,\n          /* Deep Blue      */ #009e73,\n          /* Bluish Green   */ #f0e442,\n          /* Yellow         */ #e69f00,\n          /* Orange         */ #d55e00,\n          /* Vermillion     */ #cc79a7,\n          /* Reddish Purple */ #56b4e9 /* Back to Sky Blue */\n        )\n        border-box;\n\n      /* Make everything inside padding-box transparent\n       by subtracting padding-box from no-clip box */\n      -webkit-mask:\n        conic-gradient(red 0 0) no-clip subtract,\n        conic-gradient(red 0 0) padding-box;\n      mask:\n        conic-gradient(red 0 0) no-clip subtract,\n        conic-gradient(red 0 0) padding-box;\n\n      pointer-events: none;\n      animation: rainbow-rotate 4s linear infinite;\n    }\n\n    /* Turn one pseudo layer into glow halo */\n    :host([effect='rainbow']) ${selector}::after {\n      filter: blur(var(--blur-xl));\n    }\n\n    /* ========================================\n       Animation\n       ======================================== */\n\n    @keyframes rainbow-rotate {\n      to {\n        --rainbow-angle: 1turn;\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      :host([effect='rainbow']) ${selector}::before, :host([effect='rainbow']) ${selector}::after {\n        animation: none;\n      }\n    }\n  `;\n};\n\n/**\n * Shine Border Effect Mixin\n *\n * Animated color-aware border shine. A tight arc of the component's own\n * theme color rotates around the border, producing the glossy \"shimmer\"\n * look seen in modern card and button designs.\n *\n * Respects the `color` attribute via `--_theme-*` tokens — no extra\n * configuration needed. Falls back to the neutral theme when no color\n * is set.\n *\n * @param selector - CSS selector for the inner element (e.g., 'button', '.box')\n * @returns CSSResult with shine border animation\n *\n * @example\n * ```ts\n * styles: [shineEffectMixin('button'), componentStyles]\n * ```\n */\nexport const shineEffectMixin = (selector: string) => {\n  registerShineProperty();\n\n  return css`\n    /* ========================================\n       Shine Border Effect\n       ======================================== */\n\n    :host([effect='shine']) ${selector} {\n      position: relative;\n      overflow: visible;\n      --_shine-color: light-dark(\n        oklch(from var(--_theme-focus) 0.6 calc(c * 1.2) h),\n        oklch(from var(--_theme-focus) 0.85 calc(c * 1.2) h)\n      );\n    }\n\n    /* Shine border — single pseudo, glow via box-shadow (follows border-radius, no artifacts) */\n    :host([effect='shine']) ${selector}::before {\n      content: '';\n      position: absolute;\n      inset: calc(-1 * var(--border-2));\n      border: var(--border-2) solid transparent;\n      border-radius: calc(var(--_radius, 0px) + var(--border-2));\n\n      /* Two comet tails 180deg apart, same shape rotating together */\n      background:\n        conic-gradient(from var(--shine-angle), transparent 0%, transparent 75%, var(--_shine-color) 100%) border-box,\n        conic-gradient(\n            from calc(var(--shine-angle) + 180deg),\n            transparent 0%,\n            transparent 75%,\n            var(--_shine-color) 100%\n          )\n          border-box;\n\n      -webkit-mask:\n        conic-gradient(red 0 0) no-clip subtract,\n        conic-gradient(red 0 0) padding-box;\n      mask:\n        conic-gradient(red 0 0) no-clip subtract,\n        conic-gradient(red 0 0) padding-box;\n\n      /* Use the theme's own focus-shadow — color-aware, well-tuned, no artifacts */\n      box-shadow: var(--_theme-shadow);\n\n      pointer-events: none;\n      animation: shine-rotate 2.5s linear infinite;\n    }\n\n    /* ========================================\n       Animation\n       ======================================== */\n\n    @keyframes shine-rotate {\n      to {\n        --shine-angle: 1turn;\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      :host([effect='shine']) ${selector}::before {\n        animation: none;\n      }\n    }\n  `;\n};\n"],"mappings":"+BAOA,IAAI,EAAoB,GAExB,SAAgB,GAA0B,CACpC,MAEJ,IAAI,OAAO,IAAQ,KAAe,IAAI,iBACpC,GAAI,CACF,IAAI,iBAAiB,CACnB,SAAU,GACV,aAAc,OACd,KAAM,kBACN,OAAQ,SACV,CAAC,CACH,MAAQ,CAER,CAGF,EAAoB,EAHlB,CAIJ,CAOA,IAAI,EAAkB,GAEtB,SAAgB,GAAwB,CAClC,MAEJ,IAAI,OAAO,IAAQ,KAAe,IAAI,iBACpC,GAAI,CACF,IAAI,iBAAiB,CACnB,SAAU,GACV,aAAc,OACd,KAAM,gBACN,OAAQ,SACV,CAAC,CACH,MAAQ,CAER,CAGF,EAAkB,EAHhB,CAIJ,CAqBA,IAAa,EAAsB,IACjC,EAAwB,EAEjB,EAAA,GAAG;;;;;gCAKoB,EAAS;;;;;;;gCAOT,EAAS,sCAAsC,EAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAsCxD,EAAS;;;;;;;;;;;;;;;kCAeP,EAAS,sCAAsC,EAAS;;;;KA0B7E,EAAoB,IAC/B,EAAsB,EAEf,EAAA,GAAG;;;;;8BAKkB,EAAS;;;;;;;;;;8BAUT,EAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA2CP,EAAS"}

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

@@ -0,0 +1,43 @@
+export declare function registerRainbowProperty(): void;
+export declare function registerShineProperty(): void;
+/**
+ * Rainbow Border Effect Mixin
+ *
+ * Animated rainbow border with glow effect.
+ * Perfect for highlighting call-to-action elements or special features.
+ *
+ * @param selector - CSS selector for the element (e.g., 'button', '.box')
+ * @returns CSSResult with rainbow border animation
+ *
+ * @example
+ * ```ts
+ * import { rainbowEffectMixin } from '../../styles/effects/rainbow.css';
+ *
+ * return {
+ *   styles: [rainbowEffectMixin('button'), componentStyles],
+ *   template: html`...`
+ * };
+ * ```
+ */
+export declare const rainbowEffectMixin: (selector: string) => import("@vielzeug/ore").CSSResult;
+/**
+ * Shine Border Effect Mixin
+ *
+ * Animated color-aware border shine. A tight arc of the component's own
+ * theme color rotates around the border, producing the glossy "shimmer"
+ * look seen in modern card and button designs.
+ *
+ * Respects the `color` attribute via `--_theme-*` tokens — no extra
+ * configuration needed. Falls back to the neutral theme when no color
+ * is set.
+ *
+ * @param selector - CSS selector for the inner element (e.g., 'button', '.box')
+ * @returns CSSResult with shine border animation
+ *
+ * @example
+ * ```ts
+ * styles: [shineEffectMixin('button'), componentStyles]
+ * ```
+ */
+export declare const shineEffectMixin: (selector: string) => import("@vielzeug/ore").CSSResult;
+//# sourceMappingURL=animation.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"animation.css.d.ts","sourceRoot":"","sources":["../../../src/styles/mixins/animation.css.ts"],"names":[],"mappings":"AASA,wBAAgB,uBAAuB,SAiBtC;AASD,wBAAgB,qBAAqB,SAiBpC;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,kBAAkB,GAAI,UAAU,MAAM,sCAyElD,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,gBAAgB,GAAI,UAAU,MAAM,sCAkEhD,CAAC"}

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

@@ -0,0 +1,166 @@
+import { css as e } from "@vielzeug/ore";
+//#region src/styles/mixins/animation.css.ts
+var t = !1;
+function n() {
+	if (!t) {
+		if (typeof CSS < "u" && CSS.registerProperty) try {
+			CSS.registerProperty({
+				inherits: !1,
+				initialValue: "0deg",
+				name: "--rainbow-angle",
+				syntax: "<angle>"
+			});
+		} catch {}
+		t = !0;
+	}
+}
+var r = !1;
+function i() {
+	if (!r) {
+		if (typeof CSS < "u" && CSS.registerProperty) try {
+			CSS.registerProperty({
+				inherits: !1,
+				initialValue: "0deg",
+				name: "--shine-angle",
+				syntax: "<angle>"
+			});
+		} catch {}
+		r = !0;
+	}
+}
+var a = (t) => (n(), e`
+    /* ========================================
+       Rainbow Border Effect
+       ======================================== */
+
+    :host([effect='rainbow']) ${t} {
+      position: relative;
+      border: var(--border-2) solid transparent !important;
+      overflow: visible;
+    }
+
+    /* Rainbow border and glow layers */
+    :host([effect='rainbow']) ${t}::before, :host([effect='rainbow']) ${t}::after {
+      content: '';
+      position: absolute;
+      inset: calc(-1 * var(--border-2));
+      border: inherit;
+      border-radius: inherit;
+
+      /* Reserve no-clip space for glow */
+      box-shadow: 0 0 calc(3 * var(--blur-xl)) rgba(0 0 0 / 0.001);
+
+      /* Rainbow gradient — Okabe-Ito colorblind-safe palette */
+      background: conic-gradient(
+          from var(--rainbow-angle),
+          #56b4e9,
+          /* Sky Blue       */ #0072b2,
+          /* Deep Blue      */ #009e73,
+          /* Bluish Green   */ #f0e442,
+          /* Yellow         */ #e69f00,
+          /* Orange         */ #d55e00,
+          /* Vermillion     */ #cc79a7,
+          /* Reddish Purple */ #56b4e9 /* Back to Sky Blue */
+        )
+        border-box;
+
+      /* Make everything inside padding-box transparent
+       by subtracting padding-box from no-clip box */
+      -webkit-mask:
+        conic-gradient(red 0 0) no-clip subtract,
+        conic-gradient(red 0 0) padding-box;
+      mask:
+        conic-gradient(red 0 0) no-clip subtract,
+        conic-gradient(red 0 0) padding-box;
+
+      pointer-events: none;
+      animation: rainbow-rotate 4s linear infinite;
+    }
+
+    /* Turn one pseudo layer into glow halo */
+    :host([effect='rainbow']) ${t}::after {
+      filter: blur(var(--blur-xl));
+    }
+
+    /* ========================================
+       Animation
+       ======================================== */
+
+    @keyframes rainbow-rotate {
+      to {
+        --rainbow-angle: 1turn;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :host([effect='rainbow']) ${t}::before, :host([effect='rainbow']) ${t}::after {
+        animation: none;
+      }
+    }
+  `), o = (t) => (i(), e`
+    /* ========================================
+       Shine Border Effect
+       ======================================== */
+
+    :host([effect='shine']) ${t} {
+      position: relative;
+      overflow: visible;
+      --_shine-color: light-dark(
+        oklch(from var(--_theme-focus) 0.6 calc(c * 1.2) h),
+        oklch(from var(--_theme-focus) 0.85 calc(c * 1.2) h)
+      );
+    }
+
+    /* Shine border — single pseudo, glow via box-shadow (follows border-radius, no artifacts) */
+    :host([effect='shine']) ${t}::before {
+      content: '';
+      position: absolute;
+      inset: calc(-1 * var(--border-2));
+      border: var(--border-2) solid transparent;
+      border-radius: calc(var(--_radius, 0px) + var(--border-2));
+
+      /* Two comet tails 180deg apart, same shape rotating together */
+      background:
+        conic-gradient(from var(--shine-angle), transparent 0%, transparent 75%, var(--_shine-color) 100%) border-box,
+        conic-gradient(
+            from calc(var(--shine-angle) + 180deg),
+            transparent 0%,
+            transparent 75%,
+            var(--_shine-color) 100%
+          )
+          border-box;
+
+      -webkit-mask:
+        conic-gradient(red 0 0) no-clip subtract,
+        conic-gradient(red 0 0) padding-box;
+      mask:
+        conic-gradient(red 0 0) no-clip subtract,
+        conic-gradient(red 0 0) padding-box;
+
+      /* Use the theme's own focus-shadow — color-aware, well-tuned, no artifacts */
+      box-shadow: var(--_theme-shadow);
+
+      pointer-events: none;
+      animation: shine-rotate 2.5s linear infinite;
+    }
+
+    /* ========================================
+       Animation
+       ======================================== */
+
+    @keyframes shine-rotate {
+      to {
+        --shine-angle: 1turn;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :host([effect='shine']) ${t}::before {
+        animation: none;
+      }
+    }
+  `);
+//#endregion
+export { a as rainbowEffectMixin, n as registerRainbowProperty, i as registerShineProperty, o as shineEffectMixin };
+
+//# sourceMappingURL=animation.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"animation.css.js","names":[],"sources":["../../../src/styles/mixins/animation.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\n/**\n * Register the --rainbow-angle CSS custom property so browsers can\n * interpolate it inside conic-gradient().\n * Called automatically by rainbowEffectMixin on first use.\n */\nlet rainbowRegistered = false;\n\nexport function registerRainbowProperty() {\n  if (rainbowRegistered) return;\n\n  if (typeof CSS !== 'undefined' && CSS.registerProperty) {\n    try {\n      CSS.registerProperty({\n        inherits: false,\n        initialValue: '0deg',\n        name: '--rainbow-angle',\n        syntax: '<angle>',\n      });\n    } catch {\n      // Already registered — safe to ignore\n    }\n  }\n\n  rainbowRegistered = true;\n}\n\n/**\n * Register the --shine-angle CSS custom property so browsers can\n * interpolate it inside conic-gradient().\n * Called automatically by shineEffectMixin on first use.\n */\nlet shineRegistered = false;\n\nexport function registerShineProperty() {\n  if (shineRegistered) return;\n\n  if (typeof CSS !== 'undefined' && CSS.registerProperty) {\n    try {\n      CSS.registerProperty({\n        inherits: false,\n        initialValue: '0deg',\n        name: '--shine-angle',\n        syntax: '<angle>',\n      });\n    } catch {\n      // Already registered — safe to ignore\n    }\n  }\n\n  shineRegistered = true;\n}\n\n/**\n * Rainbow Border Effect Mixin\n *\n * Animated rainbow border with glow effect.\n * Perfect for highlighting call-to-action elements or special features.\n *\n * @param selector - CSS selector for the element (e.g., 'button', '.box')\n * @returns CSSResult with rainbow border animation\n *\n * @example\n * ```ts\n * import { rainbowEffectMixin } from '../../styles/effects/rainbow.css';\n *\n * return {\n *   styles: [rainbowEffectMixin('button'), componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const rainbowEffectMixin = (selector: string) => {\n  registerRainbowProperty();\n\n  return css`\n    /* ========================================\n       Rainbow Border Effect\n       ======================================== */\n\n    :host([effect='rainbow']) ${selector} {\n      position: relative;\n      border: var(--border-2) solid transparent !important;\n      overflow: visible;\n    }\n\n    /* Rainbow border and glow layers */\n    :host([effect='rainbow']) ${selector}::before, :host([effect='rainbow']) ${selector}::after {\n      content: '';\n      position: absolute;\n      inset: calc(-1 * var(--border-2));\n      border: inherit;\n      border-radius: inherit;\n\n      /* Reserve no-clip space for glow */\n      box-shadow: 0 0 calc(3 * var(--blur-xl)) rgba(0 0 0 / 0.001);\n\n      /* Rainbow gradient — Okabe-Ito colorblind-safe palette */\n      background: conic-gradient(\n          from var(--rainbow-angle),\n          #56b4e9,\n          /* Sky Blue       */ #0072b2,\n          /* Deep Blue      */ #009e73,\n          /* Bluish Green   */ #f0e442,\n          /* Yellow         */ #e69f00,\n          /* Orange         */ #d55e00,\n          /* Vermillion     */ #cc79a7,\n          /* Reddish Purple */ #56b4e9 /* Back to Sky Blue */\n        )\n        border-box;\n\n      /* Make everything inside padding-box transparent\n       by subtracting padding-box from no-clip box */\n      -webkit-mask:\n        conic-gradient(red 0 0) no-clip subtract,\n        conic-gradient(red 0 0) padding-box;\n      mask:\n        conic-gradient(red 0 0) no-clip subtract,\n        conic-gradient(red 0 0) padding-box;\n\n      pointer-events: none;\n      animation: rainbow-rotate 4s linear infinite;\n    }\n\n    /* Turn one pseudo layer into glow halo */\n    :host([effect='rainbow']) ${selector}::after {\n      filter: blur(var(--blur-xl));\n    }\n\n    /* ========================================\n       Animation\n       ======================================== */\n\n    @keyframes rainbow-rotate {\n      to {\n        --rainbow-angle: 1turn;\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      :host([effect='rainbow']) ${selector}::before, :host([effect='rainbow']) ${selector}::after {\n        animation: none;\n      }\n    }\n  `;\n};\n\n/**\n * Shine Border Effect Mixin\n *\n * Animated color-aware border shine. A tight arc of the component's own\n * theme color rotates around the border, producing the glossy \"shimmer\"\n * look seen in modern card and button designs.\n *\n * Respects the `color` attribute via `--_theme-*` tokens — no extra\n * configuration needed. Falls back to the neutral theme when no color\n * is set.\n *\n * @param selector - CSS selector for the inner element (e.g., 'button', '.box')\n * @returns CSSResult with shine border animation\n *\n * @example\n * ```ts\n * styles: [shineEffectMixin('button'), componentStyles]\n * ```\n */\nexport const shineEffectMixin = (selector: string) => {\n  registerShineProperty();\n\n  return css`\n    /* ========================================\n       Shine Border Effect\n       ======================================== */\n\n    :host([effect='shine']) ${selector} {\n      position: relative;\n      overflow: visible;\n      --_shine-color: light-dark(\n        oklch(from var(--_theme-focus) 0.6 calc(c * 1.2) h),\n        oklch(from var(--_theme-focus) 0.85 calc(c * 1.2) h)\n      );\n    }\n\n    /* Shine border — single pseudo, glow via box-shadow (follows border-radius, no artifacts) */\n    :host([effect='shine']) ${selector}::before {\n      content: '';\n      position: absolute;\n      inset: calc(-1 * var(--border-2));\n      border: var(--border-2) solid transparent;\n      border-radius: calc(var(--_radius, 0px) + var(--border-2));\n\n      /* Two comet tails 180deg apart, same shape rotating together */\n      background:\n        conic-gradient(from var(--shine-angle), transparent 0%, transparent 75%, var(--_shine-color) 100%) border-box,\n        conic-gradient(\n            from calc(var(--shine-angle) + 180deg),\n            transparent 0%,\n            transparent 75%,\n            var(--_shine-color) 100%\n          )\n          border-box;\n\n      -webkit-mask:\n        conic-gradient(red 0 0) no-clip subtract,\n        conic-gradient(red 0 0) padding-box;\n      mask:\n        conic-gradient(red 0 0) no-clip subtract,\n        conic-gradient(red 0 0) padding-box;\n\n      /* Use the theme's own focus-shadow — color-aware, well-tuned, no artifacts */\n      box-shadow: var(--_theme-shadow);\n\n      pointer-events: none;\n      animation: shine-rotate 2.5s linear infinite;\n    }\n\n    /* ========================================\n       Animation\n       ======================================== */\n\n    @keyframes shine-rotate {\n      to {\n        --shine-angle: 1turn;\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      :host([effect='shine']) ${selector}::before {\n        animation: none;\n      }\n    }\n  `;\n};\n"],"mappings":";;AAOA,IAAI,IAAoB;AAExB,SAAgB,IAA0B;CACpC,QAEJ;MAAI,OAAO,MAAQ,OAAe,IAAI,kBACpC,IAAI;GACF,IAAI,iBAAiB;IACnB,UAAU;IACV,cAAc;IACd,MAAM;IACN,QAAQ;GACV,CAAC;EACH,QAAQ,CAER;EAGF,IAAoB;CAHlB;AAIJ;AAOA,IAAI,IAAkB;AAEtB,SAAgB,IAAwB;CAClC,QAEJ;MAAI,OAAO,MAAQ,OAAe,IAAI,kBACpC,IAAI;GACF,IAAI,iBAAiB;IACnB,UAAU;IACV,cAAc;IACd,MAAM;IACN,QAAQ;GACV,CAAC;EACH,QAAQ,CAER;EAGF,IAAkB;CAHhB;AAIJ;AAqBA,IAAa,KAAsB,OACjC,EAAwB,GAEjB,CAAG;;;;;gCAKoB,EAAS;;;;;;;gCAOT,EAAS,sCAAsC,EAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAsCxD,EAAS;;;;;;;;;;;;;;;kCAeP,EAAS,sCAAsC,EAAS;;;;MA0B7E,KAAoB,OAC/B,EAAsB,GAEf,CAAG;;;;;8BAKkB,EAAS;;;;;;;;;;8BAUT,EAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA2CP,EAAS"}