@pathscale/ui 1.2.6 → 1.2.8

package/dist/components/slider/Slider.css

@@ -1,122 +1,122 @@
-@layer components {
-  .slider {
-    display: grid;
-    width: 100%;
-    gap: 0.25rem;
-    grid-template-areas:
-      "label output"
-      "track track";
-    grid-template-columns: 1fr auto;
-
-    --slider-thumb-w: 1.5rem;
-    --slider-thumb-h: 1rem;
-    --slider-h: 1.25rem;
-    /* Inset padding = (track height - thumb height) / 2 */
-    --slider-pad: calc((var(--slider-h) - var(--slider-thumb-h)) / 2);
-    --slider-track-bg: var(--color-default);
-    --slider-fill-bg: var(--color-accent);
-    --slider-thumb-bg: var(--color-accent-foreground, white);
-  }
-
-  .slider__label {
-    grid-area: label;
-    width: fit-content;
-    font-size: 0.875rem;
-    font-weight: 500;
-  }
-
-  .slider__output {
-    grid-area: output;
-    font-size: 0.875rem;
-    font-weight: 500;
-    font-variant-numeric: tabular-nums;
-  }
-
-  .slider__track {
-    grid-area: track;
-    position: relative;
-    height: var(--slider-h);
-    border-radius: 9999px;
-    background-color: var(--slider-track-bg);
-    cursor: pointer;
-  }
-
-  .slider__fill {
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    border-radius: 9999px;
-    pointer-events: none;
-    background-color: var(--slider-fill-bg);
-  }
-
-  .slider__thumb {
-    position: absolute;
-    top: 50%;
-    z-index: 1;
-    border-radius: 9999px;
-    background-color: var(--slider-thumb-bg);
-    cursor: grab;
-    width: var(--slider-thumb-w);
-    height: var(--slider-thumb-h);
-    transform: translate(-50%, -50%);
-    box-shadow:
-      0 0 5px 0 oklch(0% 0 0 / 0.02),
-      0 2px 10px 0 oklch(0% 0 0 / 0.06),
-      0 0 1px 0 oklch(0% 0 0 / 0.3);
-    transition:
-      transform 250ms ease,
-      box-shadow 150ms ease;
-  }
-
-  .slider__thumb[data-dragging="true"] {
-    cursor: grabbing;
-    transform: translate(-50%, -50%) scale(0.9);
-  }
-
-  .slider__thumb[data-focus-visible="true"] {
-    box-shadow:
-      0 0 0 3px color-mix(in oklab, var(--color-accent) 22%, transparent),
-      0 0 5px 0 oklch(0% 0 0 / 0.02),
-      0 2px 10px 0 oklch(0% 0 0 / 0.06);
-  }
-
-  .slider__thumb[data-disabled="true"] {
-    cursor: default;
-  }
-
-  .slider[data-disabled="true"] {
-    cursor: not-allowed;
-    opacity: 0.55;
-  }
-
-  .slider[data-disabled="true"] .slider__label {
-    opacity: 1;
-  }
-
-  .slider[data-disabled="true"] .slider__track {
-    cursor: not-allowed;
-  }
-
-  .slider--sm {
-    --slider-thumb-w: 1.125rem;
-    --slider-thumb-h: 0.625rem;
-    --slider-h: 1rem;
-  }
-
-  .slider--sm .slider__label,
-  .slider--sm .slider__output {
-    font-size: 0.75rem;
-  }
-
-  .slider--md {
-    /* Default size */
-  }
-
-  .slider--lg {
-    --slider-thumb-w: 1.75rem;
-    --slider-thumb-h: 1.25rem;
-    --slider-h: 1.5rem;
-  }
-}
+@layer components {
+  .slider {
+    display: grid;
+    width: 100%;
+    gap: 0.25rem;
+    grid-template-areas:
+      "label output"
+      "track track";
+    grid-template-columns: 1fr auto;
+
+    --slider-thumb-w: 1.5rem;
+    --slider-thumb-h: 1rem;
+    --slider-h: 1.25rem;
+    /* Inset padding = (track height - thumb height) / 2 */
+    --slider-pad: calc((var(--slider-h) - var(--slider-thumb-h)) / 2);
+    --slider-track-bg: var(--color-default);
+    --slider-fill-bg: var(--color-accent);
+    --slider-thumb-bg: var(--color-accent-foreground, white);
+  }
+
+  .slider__label {
+    grid-area: label;
+    width: fit-content;
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+
+  .slider__output {
+    grid-area: output;
+    font-size: 0.875rem;
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .slider__track {
+    grid-area: track;
+    position: relative;
+    height: var(--slider-h);
+    border-radius: 9999px;
+    background-color: var(--slider-track-bg);
+    cursor: pointer;
+  }
+
+  .slider__fill {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    border-radius: 9999px;
+    pointer-events: none;
+    background-color: var(--slider-fill-bg);
+  }
+
+  .slider__thumb {
+    position: absolute;
+    top: 50%;
+    z-index: 1;
+    border-radius: 9999px;
+    background-color: var(--slider-thumb-bg);
+    cursor: grab;
+    width: var(--slider-thumb-w);
+    height: var(--slider-thumb-h);
+    transform: translate(-50%, -50%);
+    box-shadow:
+      0 0 5px 0 oklch(0% 0 0 / 0.02),
+      0 2px 10px 0 oklch(0% 0 0 / 0.06),
+      0 0 1px 0 oklch(0% 0 0 / 0.3);
+    transition:
+      transform 250ms ease,
+      box-shadow 150ms ease;
+  }
+
+  .slider__thumb[data-dragging="true"] {
+    cursor: grabbing;
+    transform: translate(-50%, -50%) scale(0.9);
+  }
+
+  .slider__thumb[data-focus-visible="true"] {
+    box-shadow:
+      0 0 0 3px color-mix(in oklab, var(--color-accent) 22%, transparent),
+      0 0 5px 0 oklch(0% 0 0 / 0.02),
+      0 2px 10px 0 oklch(0% 0 0 / 0.06);
+  }
+
+  .slider__thumb[data-disabled="true"] {
+    cursor: default;
+  }
+
+  .slider[data-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  .slider[data-disabled="true"] .slider__label {
+    opacity: 1;
+  }
+
+  .slider[data-disabled="true"] .slider__track {
+    cursor: not-allowed;
+  }
+
+  .slider--sm {
+    --slider-thumb-w: 1.125rem;
+    --slider-thumb-h: 0.625rem;
+    --slider-h: 1rem;
+  }
+
+  .slider--sm .slider__label,
+  .slider--sm .slider__output {
+    font-size: 0.75rem;
+  }
+
+  .slider--md {
+    /* Default size */
+  }
+
+  .slider--lg {
+    --slider-thumb-w: 1.75rem;
+    --slider-thumb-h: 1.25rem;
+    --slider-h: 1.5rem;
+  }
+}

package/dist/components/slider/Slider.js

@@ -1,9 +1,9 @@
-import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import { createComponent, insert, mergeProps, setAttribute, spread, template, use } from "solid-js/web";
 import "./Slider.css";
-import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
-import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-import * as __WEBPACK_EXTERNAL_MODULE__Slider_classes_js_33bccb6b__ from "./Slider.classes.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div><div></div><div>");
+import { Show, createSignal, createUniqueId, splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { CLASSES } from "./Slider.classes.js";
+var _tmpl$ = /*#__PURE__*/ template("<span>"), _tmpl$2 = /*#__PURE__*/ template("<div><div><div></div><div>");
 function clamp(val, min, max) {
     return Math.min(Math.max(val, min), max);
 }
@@ -13,7 +13,7 @@ function snapToStep(val, min, max, step) {
 }
 const Slider = (props)=>{
     let trackRef;
-    const [local] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+    const [local] = splitProps(props, [
         "label",
         "value",
         "onChange",
@@ -33,9 +33,9 @@ const Slider = (props)=>{
     const step = ()=>local.step ?? 1;
     const size = ()=>local.size ?? "md";
     const isDisabled = ()=>Boolean(local.disabled);
-    const labelId = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)();
-    const [dragging, setDragging] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
-    const [focusVisible, setFocusVisible] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const labelId = createUniqueId();
+    const [dragging, setDragging] = createSignal(false);
+    const [focusVisible, setFocusVisible] = createSignal(false);
     const fraction = ()=>{
         const range = max() - min();
         if (range <= 0) return 0;
@@ -109,8 +109,8 @@ const Slider = (props)=>{
     const handleBlur = ()=>setFocusVisible(false);
     return (()=>{
         var _el$ = _tmpl$2(), _el$4 = _el$.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Slider_classes_js_33bccb6b__.CLASSES.base, __WEBPACK_EXTERNAL_MODULE__Slider_classes_js_33bccb6b__.CLASSES.size[size()], local.class, local.className)
+        spread(_el$, mergeProps(()=>({
+                class: twMerge(CLASSES.base, CLASSES.size[size()], local.class, local.className)
             }), {
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -123,7 +123,7 @@ const Slider = (props)=>{
                 return local.style;
             }
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+        insert(_el$, createComponent(Show, {
             get when () {
                 return local.label;
             },
@@ -131,41 +131,41 @@ const Slider = (props)=>{
                 return [
                     (()=>{
                         var _el$2 = _tmpl$();
-                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "id", labelId);
-                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                                class: __WEBPACK_EXTERNAL_MODULE__Slider_classes_js_33bccb6b__.CLASSES.label
+                        setAttribute(_el$2, "id", labelId);
+                        spread(_el$2, mergeProps(()=>({
+                                class: CLASSES.label
                             }), {
                             "data-slot": "label"
                         }), false, true);
-                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.label);
+                        insert(_el$2, ()=>local.label);
                         return _el$2;
                     })(),
                     (()=>{
                         var _el$3 = _tmpl$();
-                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                                class: __WEBPACK_EXTERNAL_MODULE__Slider_classes_js_33bccb6b__.CLASSES.output
+                        spread(_el$3, mergeProps(()=>({
+                                class: CLASSES.output
                             }), {
                             "data-slot": "slider-output",
                             "aria-live": "polite"
                         }), false, true);
-                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, formattedValue);
+                        insert(_el$3, formattedValue);
                         return _el$3;
                     })()
                 ];
             }
         }), _el$4);
         var _ref$ = trackRef;
-        "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$4) : trackRef = _el$4;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                class: __WEBPACK_EXTERNAL_MODULE__Slider_classes_js_33bccb6b__.CLASSES.track
+        "function" == typeof _ref$ ? use(_ref$, _el$4) : trackRef = _el$4;
+        spread(_el$4, mergeProps(()=>({
+                class: CLASSES.track
             }), {
             "data-slot": "slider-track",
             onPointerDown: handlePointerDown,
             onPointerMove: handlePointerMove,
             onPointerUp: handlePointerUp
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                class: __WEBPACK_EXTERNAL_MODULE__Slider_classes_js_33bccb6b__.CLASSES.fill
+        spread(_el$5, mergeProps(()=>({
+                class: CLASSES.fill
             }), {
             "data-slot": "slider-fill",
             get style () {
@@ -174,8 +174,8 @@ const Slider = (props)=>{
                 };
             }
         }), false, false);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                class: __WEBPACK_EXTERNAL_MODULE__Slider_classes_js_33bccb6b__.CLASSES.thumb
+        spread(_el$6, mergeProps(()=>({
+                class: CLASSES.thumb
             }), {
             "data-slot": "slider-thumb",
             get ["data-dragging"] () {
@@ -222,4 +222,4 @@ const Slider = (props)=>{
     })();
 };
 const slider_Slider = Slider;
-export { slider_Slider as default };
+export default slider_Slider;

package/dist/components/slider/index.js

@@ -1,3 +1 @@
-import * as __WEBPACK_EXTERNAL_MODULE__Slider_js_a9067410__ from "./Slider.js";
-var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Slider_js_a9067410__["default"];
-export { __webpack_exports__default as default };
+export { default } from "./Slider.js";

package/dist/components/spinner/Spinner.css

@@ -1,131 +1,131 @@
-@layer components {
-  /* -------------------------------------------------------------------------------------------------
-   * Base
-   * -----------------------------------------------------------------------------------------------*/
-  .spinner {
-    pointer-events: none;
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-
-  .spinner [data-slot="spinner-icon"] {
-    width: 100%;
-    height: 100%;
-    animation: spinner-rotate 0.8s linear infinite;
-  }
-
-  @keyframes spinner-rotate {
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Size variants
-   * -----------------------------------------------------------------------------------------------*/
-  .spinner--xs {
-    width: 1rem;
-    height: 1rem;
-  }
-
-  .spinner--sm {
-    width: 1.25rem;
-    height: 1.25rem;
-  }
-
-  /* md is default */
-
-  .spinner--lg {
-    width: 2rem;
-    height: 2rem;
-  }
-
-  .spinner--xl {
-    width: 2.5rem;
-    height: 2.5rem;
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Color variants
-   * -----------------------------------------------------------------------------------------------*/
-  .spinner--current {
-    color: currentColor;
-  }
-
-  .spinner--accent {
-    color: var(--color-accent);
-  }
-
-  .spinner--success {
-    color: var(--color-success);
-  }
-
-  .spinner--warning {
-    color: var(--color-warning);
-  }
-
-  .spinner--danger {
-    color: var(--color-error);
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * CSS mask-image variants (legacy, non-spinner)
-   * These use background-color + mask-image for animated SVG patterns
-   * -----------------------------------------------------------------------------------------------*/
-  .spinner--dots,
-  .spinner--ring,
-  .spinner--ball,
-  .spinner--bars,
-  .spinner--infinity {
-    background-color: currentColor;
-    mask-size: 100%;
-    mask-repeat: no-repeat;
-    mask-position: center;
-  }
-
-  .spinner--dots [data-slot="spinner-icon"],
-  .spinner--ring [data-slot="spinner-icon"],
-  .spinner--ball [data-slot="spinner-icon"],
-  .spinner--bars [data-slot="spinner-icon"],
-  .spinner--infinity [data-slot="spinner-icon"] {
-    display: none;
-  }
-
-  .spinner--dots {
-    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' begin='0.1s'/%3E%3C/circle%3E%3Ccircle cx='20' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' begin='0.2s'/%3E%3C/circle%3E%3C/svg%3E");
-  }
-
-  .spinner--ring {
-    mask-image: url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' xmlns='http://www.w3.org/2000/svg' stroke='white'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='0s' dur='1.8s' values='1;20' calcMode='spline' keyTimes='0;1' keySplines='0.165,0.84,0.44,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3,0.61,0.355,1' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='-0.9s' dur='1.8s' values='1;20' calcMode='spline' keyTimes='0;1' keySplines='0.165,0.84,0.44,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3,0.61,0.355,1' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
-  }
-
-  .spinner--ball {
-    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='12' cy='5' rx='4' ry='4'%3E%3Canimate attributeName='cy' values='5;20;20.5;20;5' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='rx' values='4;4;4.8;4;4' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='ry' values='4;4;3;4;4' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3C/svg%3E");
-  }
-
-  .spinner--bars {
-    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='9' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3C/rect%3E%3Crect x='17' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3C/rect%3E%3C/svg%3E");
-  }
-
-  .spinner--infinity {
-    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Cpath fill='none' stroke='black' stroke-width='10' stroke-dasharray='205.271 51.318' d='M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z' stroke-linecap='round' style='transform:scale(0.8);transform-origin:50px 50px'%3E%3Canimate attributeName='stroke-dashoffset' repeatCount='indefinite' dur='2s' keyTimes='0;1' values='0;256.589'/%3E%3C/path%3E%3C/svg%3E");
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Reduced motion
-   * -----------------------------------------------------------------------------------------------*/
-  @media (prefers-reduced-motion: reduce) {
-    .spinner [data-slot="spinner-icon"],
-    .spinner--dots,
-    .spinner--ring,
-    .spinner--ball,
-    .spinner--bars,
-    .spinner--infinity {
-      animation: none;
-    }
-  }
-}
+@layer components {
+  /* -------------------------------------------------------------------------------------------------
+   * Base
+   * -----------------------------------------------------------------------------------------------*/
+  .spinner {
+    pointer-events: none;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .spinner [data-slot="spinner-icon"] {
+    width: 100%;
+    height: 100%;
+    animation: spinner-rotate 0.8s linear infinite;
+  }
+
+  @keyframes spinner-rotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Size variants
+   * -----------------------------------------------------------------------------------------------*/
+  .spinner--xs {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .spinner--sm {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  /* md is default */
+
+  .spinner--lg {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .spinner--xl {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Color variants
+   * -----------------------------------------------------------------------------------------------*/
+  .spinner--current {
+    color: currentColor;
+  }
+
+  .spinner--accent {
+    color: var(--color-accent);
+  }
+
+  .spinner--success {
+    color: var(--color-success);
+  }
+
+  .spinner--warning {
+    color: var(--color-warning);
+  }
+
+  .spinner--danger {
+    color: var(--color-error);
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * CSS mask-image variants (legacy, non-spinner)
+   * These use background-color + mask-image for animated SVG patterns
+   * -----------------------------------------------------------------------------------------------*/
+  .spinner--dots,
+  .spinner--ring,
+  .spinner--ball,
+  .spinner--bars,
+  .spinner--infinity {
+    background-color: currentColor;
+    mask-size: 100%;
+    mask-repeat: no-repeat;
+    mask-position: center;
+  }
+
+  .spinner--dots [data-slot="spinner-icon"],
+  .spinner--ring [data-slot="spinner-icon"],
+  .spinner--ball [data-slot="spinner-icon"],
+  .spinner--bars [data-slot="spinner-icon"],
+  .spinner--infinity [data-slot="spinner-icon"] {
+    display: none;
+  }
+
+  .spinner--dots {
+    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' begin='0.1s'/%3E%3C/circle%3E%3Ccircle cx='20' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' begin='0.2s'/%3E%3C/circle%3E%3C/svg%3E");
+  }
+
+  .spinner--ring {
+    mask-image: url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' xmlns='http://www.w3.org/2000/svg' stroke='white'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='0s' dur='1.8s' values='1;20' calcMode='spline' keyTimes='0;1' keySplines='0.165,0.84,0.44,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3,0.61,0.355,1' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='-0.9s' dur='1.8s' values='1;20' calcMode='spline' keyTimes='0;1' keySplines='0.165,0.84,0.44,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3,0.61,0.355,1' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
+  }
+
+  .spinner--ball {
+    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='12' cy='5' rx='4' ry='4'%3E%3Canimate attributeName='cy' values='5;20;20.5;20;5' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='rx' values='4;4;4.8;4;4' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='ry' values='4;4;3;4;4' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3C/svg%3E");
+  }
+
+  .spinner--bars {
+    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='9' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3C/rect%3E%3Crect x='17' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3C/rect%3E%3C/svg%3E");
+  }
+
+  .spinner--infinity {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Cpath fill='none' stroke='black' stroke-width='10' stroke-dasharray='205.271 51.318' d='M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z' stroke-linecap='round' style='transform:scale(0.8);transform-origin:50px 50px'%3E%3Canimate attributeName='stroke-dashoffset' repeatCount='indefinite' dur='2s' keyTimes='0;1' values='0;256.589'/%3E%3C/path%3E%3C/svg%3E");
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Reduced motion
+   * -----------------------------------------------------------------------------------------------*/
+  @media (prefers-reduced-motion: reduce) {
+    .spinner [data-slot="spinner-icon"],
+    .spinner--dots,
+    .spinner--ring,
+    .spinner--ball,
+    .spinner--bars,
+    .spinner--infinity {
+      animation: none;
+    }
+  }
+}