@vielzeug/buildit 2.0.0

package/dist/styles/animation.css

@@ -0,0 +1,87 @@
+/* animation: spin 1s linear infinite; */
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; */
+@keyframes ping {
+  75%,
+  100% {
+    opacity: 0;
+    transform: scale(2);
+  }
+}
+
+/* animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; */
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* animation: bounce 1s infinite; */
+@keyframes bounce {
+  0%,
+  100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+
+  50% {
+    transform: translateY(0);
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes progress-bar {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up var(--transition-normal) forwards;
+}
+
+.animate-scale-in {
+  animation: scale-in var(--transition-normal) var(--ease-spring) forwards;
+}

package/dist/styles/index.cjs

@@ -0,0 +1,2 @@
+const e=require(`./mixins/accessibility.css.cjs`),t=require(`./mixins/shape.css.cjs`),n=require(`./mixins/states.css.cjs`),r=require(`./mixins/theme.css.cjs`);require(`./mixins/animation.css.cjs`),require(`./mixins/variants.css.cjs`);var i=[r.colorThemeMixin,e.coarsePointerMixin,e.reducedMotionMixin,t.roundedVariantMixin],a=[r.colorThemeMixin,r.elevationMixin,t.paddingMixin,t.roundedVariantMixin],o=[r.colorThemeMixin,r.forcedColorsFormControlMixin,n.disabledStateMixin()];exports.formControlMixins=o,exports.formFieldMixins=i,exports.surfaceMixins=a;
+//# sourceMappingURL=index.cjs.map

package/dist/styles/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/styles/index.ts"],"sourcesContent":["/**\n * Shared Mixins & Effects\n *\n * Reusable CSS mixins for common component patterns.\n */\n\nimport { coarsePointerMixin, reducedMotionMixin } from './mixins/accessibility.css';\nimport { paddingMixin, roundedVariantMixin } from './mixins/shape.css';\nimport { disabledStateMixin } from './mixins/states.css';\nimport { colorThemeMixin, elevationMixin, forcedColorsFormControlMixin } from './mixins/theme.css';\n\n// Accessibility Mixins\nexport { coarsePointerMixin, reducedMotionMixin } from './mixins/accessibility.css';\n// Effects\nexport { rainbowEffectMixin, registerRainbowProperty } 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\n// ── Preset Arrays ─────────────────────────────────────────────────────────────\n\n/**\n * Base mixins for text-field-style form inputs (input, select, combobox).\n * Covers theming, coarse pointer, reduced motion, and border radius.\n * Still add `sizeVariantMixin({...})`, `disabledLoadingMixin()`, and\n * `forcedColorsFocusMixin(selector)` separately.\n *\n * @example\n * ```ts\n * styles: [...formFieldMixins, sizeVariantMixin({...}), disabledLoadingMixin(), forcedColorsFocusMixin('input'), componentStyles]\n * ```\n */\nexport const formFieldMixins = [colorThemeMixin, coarsePointerMixin, reducedMotionMixin, roundedVariantMixin] as const;\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 for custom form controls (checkbox, radio, switch).\n * Covers theming, forced-colors visibility, and disabled state.\n * Still add `coarsePointerMixin` (for touch targets) and `sizeVariantMixin({...})` separately.\n *\n * @example\n * ```ts\n * // checkbox / radio (with touch target):\n * styles: [...formControlMixins, coarsePointerMixin, sizeVariantMixin({...}), componentStyles]\n * // switch (no touch target override needed):\n * styles: [...formControlMixins, sizeVariantMixin({...}), componentStyles]\n * ```\n */\nexport const formControlMixins = [colorThemeMixin, forcedColorsFormControlMixin, disabledStateMixin()] as const;\n"],"mappings":"0OA2CA,IAAa,EAAkB,CAAC,EAAA,gBAAiB,EAAA,mBAAoB,EAAA,mBAAoB,EAAA,oBAAoB,CAWhG,EAAgB,CAAC,EAAA,gBAAiB,EAAA,eAAgB,EAAA,aAAc,EAAA,oBAAoB,CAepF,EAAoB,CAAC,EAAA,gBAAiB,EAAA,6BAA8B,EAAA,oBAAoB,CAAC"}

package/dist/styles/index.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Shared Mixins & Effects
+ *
+ * Reusable CSS mixins for common component patterns.
+ */
+export { coarsePointerMixin, reducedMotionMixin } from './mixins/accessibility.css';
+export { rainbowEffectMixin, registerRainbowProperty } from './mixins/animation.css';
+export { paddingMixin, roundedVariantMixin, sizeVariantMixin } from './mixins/shape.css';
+export { disabledLoadingMixin, disabledStateMixin, loadingStateMixin } from './mixins/states.css';
+export { colorThemeMixin, elevationMixin, forcedColorsFocusMixin, forcedColorsFormControlMixin, forcedColorsMixin, } from './mixins/theme.css';
+export { frostVariantMixin } from './mixins/variants.css';
+/**
+ * Base mixins for text-field-style form inputs (input, select, combobox).
+ * Covers theming, coarse pointer, reduced motion, and border radius.
+ * Still add `sizeVariantMixin({...})`, `disabledLoadingMixin()`, and
+ * `forcedColorsFocusMixin(selector)` separately.
+ *
+ * @example
+ * ```ts
+ * styles: [...formFieldMixins, sizeVariantMixin({...}), disabledLoadingMixin(), forcedColorsFocusMixin('input'), componentStyles]
+ * ```
+ */
+export declare const formFieldMixins: readonly [import("@vielzeug/craftit").CSSResult, import("@vielzeug/craftit").CSSResult, import("@vielzeug/craftit").CSSResult, import("@vielzeug/craftit").CSSResult];
+/**
+ * Base mixins for elevated surface components (box, card).
+ * Covers theming, elevation shadows, padding, and border radius.
+ *
+ * @example
+ * ```ts
+ * styles: [...surfaceMixins, frostVariantMixin('.box'), componentStyles]
+ * ```
+ */
+export declare const surfaceMixins: readonly [import("@vielzeug/craftit").CSSResult, import("@vielzeug/craftit").CSSResult, import("@vielzeug/craftit").CSSResult, import("@vielzeug/craftit").CSSResult];
+/**
+ * Base mixins for custom form controls (checkbox, radio, switch).
+ * Covers theming, forced-colors visibility, and disabled state.
+ * Still add `coarsePointerMixin` (for touch targets) and `sizeVariantMixin({...})` separately.
+ *
+ * @example
+ * ```ts
+ * // checkbox / radio (with touch target):
+ * styles: [...formControlMixins, coarsePointerMixin, sizeVariantMixin({...}), componentStyles]
+ * // switch (no touch target override needed):
+ * styles: [...formControlMixins, sizeVariantMixin({...}), componentStyles]
+ * ```
+ */
+export declare const formControlMixins: readonly [import("@vielzeug/craftit").CSSResult, import("@vielzeug/craftit").CSSResult, import("@vielzeug/craftit").CSSResult];
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/styles/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAQH,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEpF,OAAO,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAErF,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEzF,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAElG,OAAO,EACL,eAAe,EACf,cAAc,EACd,sBAAsB,EACtB,4BAA4B,EAC5B,iBAAiB,GAClB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAI1D;;;;;;;;;;GAUG;AACH,eAAO,MAAM,eAAe,uKAA0F,CAAC;AAEvH;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,uKAAgF,CAAC;AAE3G;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,iBAAiB,gIAAiF,CAAC"}

package/dist/styles/index.js

@@ -0,0 +1,26 @@
+import { coarsePointerMixin as e, reducedMotionMixin as t } from "./mixins/accessibility.css.js";
+import { paddingMixin as n, roundedVariantMixin as r } from "./mixins/shape.css.js";
+import { disabledStateMixin as i } from "./mixins/states.css.js";
+import { colorThemeMixin as a, elevationMixin as o, forcedColorsFormControlMixin as s } from "./mixins/theme.css.js";
+import "./mixins/animation.css.js";
+import "./mixins/variants.css.js";
+//#region src/styles/index.ts
+var c = [
+	a,
+	e,
+	t,
+	r
+], l = [
+	a,
+	o,
+	n,
+	r
+], u = [
+	a,
+	s,
+	i()
+];
+//#endregion
+export { u as formControlMixins, c as formFieldMixins, l as surfaceMixins };
+
+//# sourceMappingURL=index.js.map

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 { disabledStateMixin } from './mixins/states.css';\nimport { colorThemeMixin, elevationMixin, forcedColorsFormControlMixin } from './mixins/theme.css';\n\n// Accessibility Mixins\nexport { coarsePointerMixin, reducedMotionMixin } from './mixins/accessibility.css';\n// Effects\nexport { rainbowEffectMixin, registerRainbowProperty } 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\n// ── Preset Arrays ─────────────────────────────────────────────────────────────\n\n/**\n * Base mixins for text-field-style form inputs (input, select, combobox).\n * Covers theming, coarse pointer, reduced motion, and border radius.\n * Still add `sizeVariantMixin({...})`, `disabledLoadingMixin()`, and\n * `forcedColorsFocusMixin(selector)` separately.\n *\n * @example\n * ```ts\n * styles: [...formFieldMixins, sizeVariantMixin({...}), disabledLoadingMixin(), forcedColorsFocusMixin('input'), componentStyles]\n * ```\n */\nexport const formFieldMixins = [colorThemeMixin, coarsePointerMixin, reducedMotionMixin, roundedVariantMixin] as const;\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 for custom form controls (checkbox, radio, switch).\n * Covers theming, forced-colors visibility, and disabled state.\n * Still add `coarsePointerMixin` (for touch targets) and `sizeVariantMixin({...})` separately.\n *\n * @example\n * ```ts\n * // checkbox / radio (with touch target):\n * styles: [...formControlMixins, coarsePointerMixin, sizeVariantMixin({...}), componentStyles]\n * // switch (no touch target override needed):\n * styles: [...formControlMixins, sizeVariantMixin({...}), componentStyles]\n * ```\n */\nexport const formControlMixins = [colorThemeMixin, forcedColorsFormControlMixin, disabledStateMixin()] as const;\n"],"mappings":";;;;;;;AA2CA,IAAa,IAAkB;CAAC;CAAiB;CAAoB;CAAoB;CAAoB,EAWhG,IAAgB;CAAC;CAAiB;CAAgB;CAAc;CAAoB,EAepF,IAAoB;CAAC;CAAiB;CAA8B,GAAoB;CAAC"}

package/dist/styles/layer.css

@@ -0,0 +1,18 @@
+/* ========================================
+   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 BuildIt layers.
+   ======================================== */
+
+@layer buildit.reset,
+  buildit.tokens,
+  buildit.themes,
+  buildit.base,
+  buildit.variants,
+  buildit.states,
+  buildit.utilities,
+  buildit.overrides;

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

@@ -0,0 +1,15 @@
+let e=require(`@vielzeug/craftit`);var t=e.css`
+  @media (pointer: coarse) {
+    :host {
+      --_touch-target: var(--size-11);
+    }
+  }
+`,n=e.css`
+  @media (prefers-reduced-motion: reduce) {
+    :host {
+      --_motion-transition: none;
+      --_motion-animation: none;
+    }
+  }
+`;exports.coarsePointerMixin=t,exports.reducedMotionMixin=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/craftit';\n\n/**\n * Coarse Pointer Mixin\n *\n * Defines `--_touch-target: var(--size-11)` on `:host` under `@media (pointer: coarse)`\n * to expose the WCAG minimum tap-target token across the shadow DOM.\n * Interactive elements inside the component should reference it:\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    :host {\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":"mCAuBA,IAAa,EAAqB,EAAA,GAAG;;;;;;EA8BxB,EAAqB,EAAA,GAAG"}

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

@@ -0,0 +1,46 @@
+/**
+ * Coarse Pointer Mixin
+ *
+ * Defines `--_touch-target: var(--size-11)` on `:host` under `@media (pointer: coarse)`
+ * to expose the WCAG minimum tap-target token across the shadow DOM.
+ * Interactive elements inside the component should reference it:
+ *
+ * ```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/craftit").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/craftit").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;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,kBAAkB,uCAM9B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,kBAAkB,uCAO9B,CAAC"}

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

@@ -0,0 +1,20 @@
+import { css as e } from "@vielzeug/craftit";
+//#region src/styles/mixins/accessibility.css.ts
+var t = e`
+  @media (pointer: coarse) {
+    :host {
+      --_touch-target: var(--size-11);
+    }
+  }
+`, n = e`
+  @media (prefers-reduced-motion: reduce) {
+    :host {
+      --_motion-transition: none;
+      --_motion-animation: none;
+    }
+  }
+`;
+//#endregion
+export { t as coarsePointerMixin, n as reducedMotionMixin };
+
+//# 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/craftit';\n\n/**\n * Coarse Pointer Mixin\n *\n * Defines `--_touch-target: var(--size-11)` on `:host` under `@media (pointer: coarse)`\n * to expose the WCAG minimum tap-target token across the shadow DOM.\n * Interactive elements inside the component should reference it:\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    :host {\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":";;AAuBA,IAAa,IAAqB,CAAG;;;;;;GA8BxB,IAAqB,CAAG"}

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

@@ -0,0 +1,71 @@
+let e=require(`@vielzeug/craftit`);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=t=>(n(),e.css`
+    /* ========================================
+       Rainbow Border Effect
+       ======================================== */
+
+    :host([rainbow]) ${t} {
+      position: relative;
+      border: var(--border-2) solid transparent !important;
+      overflow: visible;
+    }
+
+    /* Rainbow border and glow layers */
+    :host([rainbow]) ${t}::before, :host([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([rainbow]) ${t}::after {
+      filter: blur(var(--blur-xl));
+    }
+
+    /* ========================================
+       Animation
+       ======================================== */
+
+    @keyframes rainbow-rotate {
+      to {
+        --rainbow-angle: 1turn;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :host([rainbow]) ${t}::before, :host([rainbow]) ${t}::after {
+        animation: none;
+      }
+    }
+  `);exports.rainbowEffectMixin=r,exports.registerRainbowProperty=n;
+//# 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/craftit';\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 * 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([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([rainbow]) ${selector}::before, :host([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([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([rainbow]) ${selector}::before, :host([rainbow]) ${selector}::after {\n        animation: none;\n      }\n    }\n  `;\n};\n"],"mappings":"mCAOA,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,UACT,CAAC,MACI,EAKV,EAAoB,IAsBtB,IAAa,EAAsB,IACjC,GAAyB,CAElB,EAAA,GAAG;;;;;uBAKW,EAAS;;;;;;;uBAOT,EAAS,6BAA6B,EAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAsC/C,EAAS;;;;;;;;;;;;;;;yBAeP,EAAS,6BAA6B,EAAS"}

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

@@ -0,0 +1,22 @@
+export declare function registerRainbowProperty(): 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/craftit").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;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,kBAAkB,GAAI,UAAU,MAAM,0CAyElD,CAAC"}

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

@@ -0,0 +1,90 @@
+import { css as e } from "@vielzeug/craftit";
+//#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 = (t) => (n(), e`
+    /* ========================================
+       Rainbow Border Effect
+       ======================================== */
+
+    :host([rainbow]) ${t} {
+      position: relative;
+      border: var(--border-2) solid transparent !important;
+      overflow: visible;
+    }
+
+    /* Rainbow border and glow layers */
+    :host([rainbow]) ${t}::before, :host([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([rainbow]) ${t}::after {
+      filter: blur(var(--blur-xl));
+    }
+
+    /* ========================================
+       Animation
+       ======================================== */
+
+    @keyframes rainbow-rotate {
+      to {
+        --rainbow-angle: 1turn;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :host([rainbow]) ${t}::before, :host([rainbow]) ${t}::after {
+        animation: none;
+      }
+    }
+  `);
+//#endregion
+export { r as rainbowEffectMixin, n as registerRainbowProperty };
+
+//# 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/craftit';\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 * 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([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([rainbow]) ${selector}::before, :host([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([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([rainbow]) ${selector}::before, :host([rainbow]) ${selector}::after {\n        animation: none;\n      }\n    }\n  `;\n};\n"],"mappings":";;AAOA,IAAI,IAAoB;AAExB,SAAgB,IAA0B;AACpC,SAEJ;MAAI,OAAO,MAAQ,OAAe,IAAI,iBACpC,KAAI;AACF,OAAI,iBAAiB;IACnB,UAAU;IACV,cAAc;IACd,MAAM;IACN,QAAQ;IACT,CAAC;UACI;AAKV,MAAoB;;;AAsBtB,IAAa,KAAsB,OACjC,GAAyB,EAElB,CAAG;;;;;uBAKW,EAAS;;;;;;;uBAOT,EAAS,6BAA6B,EAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAsC/C,EAAS;;;;;;;;;;;;;;;yBAeP,EAAS,6BAA6B,EAAS"}

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

@@ -0,0 +1,72 @@
+let e=require(`@vielzeug/craftit`);var t=e.css`
+  /* ========================================
+     Padding Variants
+     ======================================== */
+
+  :host([padding='none']) {
+    --_padding: var(--size-0);
+  }
+
+  :host([padding='sm']) {
+    --_padding: var(--size-3);
+  }
+
+  :host([padding='md']) {
+    --_padding: var(--size-4);
+  }
+
+  :host([padding='lg']) {
+    --_padding: var(--size-6);
+  }
+
+  :host([padding='xl']) {
+    --_padding: var(--size-8);
+  }
+`,n=e.css`
+  :host([rounded='none']) {
+    --_radius: var(--rounded-none);
+  }
+  :host([rounded='sm']) {
+    --_radius: var(--rounded-sm);
+  }
+  :host([rounded='md']) {
+    --_radius: var(--rounded-md);
+  }
+  :host([rounded='lg']) {
+    --_radius: var(--rounded-lg);
+  }
+  :host([rounded='xl']) {
+    --_radius: var(--rounded-xl);
+  }
+  :host([rounded='2xl']) {
+    --_radius: var(--rounded-2xl);
+  }
+  :host([rounded='3xl']) {
+    --_radius: var(--rounded-3xl);
+  }
+  :host([rounded='full']),
+  :host([rounded='']) {
+    --_radius: var(--rounded-full);
+  }
+`,r=t=>{let n={lg:{fontSize:`var(--text-base)`,gap:`var(--size-2-5)`,size:`var(--size-6)`},md:{fontSize:`var(--text-sm)`,gap:`var(--size-2)`,size:`var(--size-5)`},sm:{fontSize:`var(--text-xs)`,gap:`var(--size-1-5)`,size:`var(--size-4)`}},r={...n.sm,...t?.sm},i={...n.md,...t?.md},a={...n.lg,...t?.lg},o=e=>e.replace(/[A-Z]/g,e=>`-${e.toLowerCase()}`),s=e=>Object.entries(e).map(([e,t])=>t===void 0?``:e.startsWith(`--`)?`${e}: ${t};`:`${`--_${o(e)}`}: ${t};`).filter(Boolean).join(`
+        `);return e.css`
+    /* ========================================
+       Size Variants (Shared Mixin)
+       ======================================== */
+
+    /* Small */
+    :host([size='sm']) {
+      ${s(r)}
+    }
+
+    /* Medium (default, can be used for explicit md attribute) */
+    :host([size='md']) {
+      ${s(i)}
+    }
+
+    /* Large */
+    :host([size='lg']) {
+      ${s(a)}
+    }
+  `};exports.paddingMixin=t,exports.roundedVariantMixin=n,exports.sizeVariantMixin=r;
+//# sourceMappingURL=shape.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shape.css.cjs","names":[],"sources":["../../../src/styles/mixins/shape.css.ts"],"sourcesContent":["import { css } from '@vielzeug/craftit';\n\n// ── Padding ───────────────────────────────────────────────────────────────────\n\n/**\n * Padding Variant Mixin\n *\n * Provides padding size variants (none, sm, md, lg, xl) via CSS custom properties.\n * Sets the --_padding variable based on padding attribute.\n *\n * @example\n * ```ts\n * import { paddingMixin } from '../../styles';\n *\n * return {\n *   styles: [paddingMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const paddingMixin = css`\n  /* ========================================\n     Padding Variants\n     ======================================== */\n\n  :host([padding='none']) {\n    --_padding: var(--size-0);\n  }\n\n  :host([padding='sm']) {\n    --_padding: var(--size-3);\n  }\n\n  :host([padding='md']) {\n    --_padding: var(--size-4);\n  }\n\n  :host([padding='lg']) {\n    --_padding: var(--size-6);\n  }\n\n  :host([padding='xl']) {\n    --_padding: var(--size-8);\n  }\n`;\n\n// ── Rounded ───────────────────────────────────────────────────────────────────\n\n/**\n * Rounded Variant Mixin\n *\n * Shared border-radius variant styles for components.\n * Maps rounded attribute values to theme border radius tokens.\n *\n * @example\n * ```ts\n * import { roundedVariantMixin } from '../../styles';\n *\n * return {\n *   styles: [roundedVariantMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const roundedVariantMixin = css`\n  :host([rounded='none']) {\n    --_radius: var(--rounded-none);\n  }\n  :host([rounded='sm']) {\n    --_radius: var(--rounded-sm);\n  }\n  :host([rounded='md']) {\n    --_radius: var(--rounded-md);\n  }\n  :host([rounded='lg']) {\n    --_radius: var(--rounded-lg);\n  }\n  :host([rounded='xl']) {\n    --_radius: var(--rounded-xl);\n  }\n  :host([rounded='2xl']) {\n    --_radius: var(--rounded-2xl);\n  }\n  :host([rounded='3xl']) {\n    --_radius: var(--rounded-3xl);\n  }\n  :host([rounded='full']),\n  :host([rounded='']) {\n    --_radius: var(--rounded-full);\n  }\n`;\n\n// ── Size Variants ─────────────────────────────────────────────────────────────\n\n/**\n * Size Variant Mixin\n *\n * Provides consistent size variants (sm, md, lg) across components.\n * Reduces code duplication for size-based styling.\n *\n * @param config - Optional configuration for size-specific values\n * @returns CSSResult with size variant styles\n *\n * @example\n * ```ts\n * import { sizeVariantMixin } from '../../styles';\n *\n * return {\n *   styles: [sizeVariantMixin(), componentStyles],\n *   template: html`...`\n * };\n * ```\n *\n * @example\n * ```ts\n * // Custom size configuration\n * return {\n *   styles: [sizeVariantMixin({\n *     sm: { size: 'var(--size-3)', fontSize: 'var(--text-2xs)' },\n *     lg: { size: 'var(--size-8)', fontSize: 'var(--text-lg)' },\n *   }), componentStyles],\n *   template: html`...`\n * };\n * ```\n */\ntype SizeConfig = {\n  /** Arbitrary CSS custom properties (must start with --) */\n  [key: `--${string}`]: string | undefined;\n  /** Font size — maps to --_font-size */\n  fontSize?: string;\n  /** Gap between elements — maps to --_gap */\n  gap?: string;\n  /** Element height — maps to --_height */\n  height?: string;\n  /** Icon size — maps to --_icon-size */\n  iconSize?: string;\n  /** Line height — maps to --_line-height */\n  lineHeight?: string;\n  /** Internal padding — maps to --_padding */\n  padding?: string;\n  /** Element size (width/height) — maps to --_size */\n  size?: string;\n  /** Thumb size (e.g. toggle/switch thumb) — maps to --_thumb-size */\n  thumbSize?: string;\n  /** Element width — maps to --_width */\n  width?: string;\n};\n\nexport const sizeVariantMixin = (config?: {\n  /** Large size configuration */\n  lg?: SizeConfig;\n  /** Medium size configuration (default) */\n  md?: SizeConfig;\n  /** Small size configuration */\n  sm?: SizeConfig;\n}) => {\n  const defaults = {\n    lg: {\n      fontSize: 'var(--text-base)',\n      gap: 'var(--size-2-5)',\n      size: 'var(--size-6)',\n    },\n    md: {\n      fontSize: 'var(--text-sm)',\n      gap: 'var(--size-2)',\n      size: 'var(--size-5)',\n    },\n    sm: {\n      fontSize: 'var(--text-xs)',\n      gap: 'var(--size-1-5)',\n      size: 'var(--size-4)',\n    },\n  };\n\n  const sm = { ...defaults.sm, ...config?.sm };\n  const md = { ...defaults.md, ...config?.md };\n  const lg = { ...defaults.lg, ...config?.lg };\n\n  // Helper to convert camelCase to kebab-case\n  const camelToKebab = (str: string): string => {\n    return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);\n  };\n\n  // Helper to generate CSS for a size\n  const generateSizeCSS = (sizeConfig: typeof sm) => {\n    return Object.entries(sizeConfig)\n      .map(([key, value]) => {\n        if (value === undefined) return '';\n\n        // If it already starts with --, pass it through as-is (custom property)\n        if (key.startsWith('--')) {\n          return `${key}: ${value};`;\n        }\n\n        // Convert camelCase to --_kebab-case custom property\n        // Examples: gap → --_gap, fontSize → --_font-size, lineHeight → --_line-height\n        const customProperty = `--_${camelToKebab(key)}`;\n\n        return `${customProperty}: ${value};`;\n      })\n      .filter(Boolean)\n      .join('\\n        ');\n  };\n\n  return css`\n    /* ========================================\n       Size Variants (Shared Mixin)\n       ======================================== */\n\n    /* Small */\n    :host([size='sm']) {\n      ${generateSizeCSS(sm)}\n    }\n\n    /* Medium (default, can be used for explicit md attribute) */\n    :host([size='md']) {\n      ${generateSizeCSS(md)}\n    }\n\n    /* Large */\n    :host([size='lg']) {\n      ${generateSizeCSS(lg)}\n    }\n  `;\n};\n"],"mappings":"mCAoBA,IAAa,EAAe,EAAA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;EA4ClB,EAAsB,EAAA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;EAoFzB,EAAoB,GAO3B,CACJ,IAAM,EAAW,CACf,GAAI,CACF,SAAU,mBACV,IAAK,kBACL,KAAM,gBACP,CACD,GAAI,CACF,SAAU,iBACV,IAAK,gBACL,KAAM,gBACP,CACD,GAAI,CACF,SAAU,iBACV,IAAK,kBACL,KAAM,gBACP,CACF,CAEK,EAAK,CAAE,GAAG,EAAS,GAAI,GAAG,GAAQ,GAAI,CACtC,EAAK,CAAE,GAAG,EAAS,GAAI,GAAG,GAAQ,GAAI,CACtC,EAAK,CAAE,GAAG,EAAS,GAAI,GAAG,GAAQ,GAAI,CAGtC,EAAgB,GACb,EAAI,QAAQ,SAAW,GAAW,IAAI,EAAO,aAAa,GAAG,CAIhE,EAAmB,GAChB,OAAO,QAAQ,EAAW,CAC9B,KAAK,CAAC,EAAK,KACN,IAAU,IAAA,GAAkB,GAG5B,EAAI,WAAW,KAAK,CACf,GAAG,EAAI,IAAI,EAAM,GAOnB,GAFgB,MAAM,EAAa,EAAI,GAErB,IAAI,EAAM,GACnC,CACD,OAAO,QAAQ,CACf,KAAK;UAAa,CAGvB,MAAO,GAAA,GAAG;;;;;;;QAOJ,EAAgB,EAAG,CAAC;;;;;QAKpB,EAAgB,EAAG,CAAC;;;;;QAKpB,EAAgB,EAAG,CAAC"}