@pathscale/ui 1.2.10 → 1.3.0

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;
+    }
+  }
+}

package/dist/components/surface/Surface.css

@@ -1,37 +1,37 @@
-@layer components {
-  .surface {
-    position: relative;
-    --surface-bg: var(--color-surface, var(--color-base-100));
-    --surface-fg: var(--color-surface-foreground, var(--color-base-content));
-    --surface-border: transparent;
-    --surface-radius: var(--radius-box, 0.75rem);
-    background-color: var(--surface-bg);
-    color: var(--surface-fg);
-    border: 1px solid var(--surface-border);
-    border-radius: var(--surface-radius);
-  }
-
-  .surface--transparent {
-    --surface-bg: transparent;
-    --surface-fg: var(--color-foreground, var(--color-base-content));
-    --surface-border: transparent;
-  }
-
-  .surface--default {
-    --surface-bg: var(--color-surface, var(--color-base-100));
-    --surface-fg: var(--color-surface-foreground, var(--color-base-content));
-    --surface-border: transparent;
-  }
-
-  .surface--secondary {
-    --surface-bg: var(--color-surface-secondary, var(--color-base-200));
-    --surface-fg: var(--color-surface-secondary-foreground, var(--color-base-content));
-    --surface-border: transparent;
-  }
-
-  .surface--tertiary {
-    --surface-bg: var(--color-surface-tertiary, var(--color-base-300));
-    --surface-fg: var(--color-surface-tertiary-foreground, var(--color-base-content));
-    --surface-border: transparent;
-  }
-}
+@layer components {
+  .surface {
+    position: relative;
+    --surface-bg: var(--color-surface, var(--color-base-100));
+    --surface-fg: var(--color-surface-foreground, var(--color-base-content));
+    --surface-border: transparent;
+    --surface-radius: var(--radius-box, 0.75rem);
+    background-color: var(--surface-bg);
+    color: var(--surface-fg);
+    border: 1px solid var(--surface-border);
+    border-radius: var(--surface-radius);
+  }
+
+  .surface--transparent {
+    --surface-bg: transparent;
+    --surface-fg: var(--color-foreground, var(--color-base-content));
+    --surface-border: transparent;
+  }
+
+  .surface--default {
+    --surface-bg: var(--color-surface, var(--color-base-100));
+    --surface-fg: var(--color-surface-foreground, var(--color-base-content));
+    --surface-border: transparent;
+  }
+
+  .surface--secondary {
+    --surface-bg: var(--color-surface-secondary, var(--color-base-200));
+    --surface-fg: var(--color-surface-secondary-foreground, var(--color-base-content));
+    --surface-border: transparent;
+  }
+
+  .surface--tertiary {
+    --surface-bg: var(--color-surface-tertiary, var(--color-base-300));
+    --surface-fg: var(--color-surface-tertiary-foreground, var(--color-base-content));
+    --surface-border: transparent;
+  }
+}