@pathscale/ui 1.2.10 → 1.3.0

package/dist/components/skeleton/Skeleton.css

@@ -1,95 +1,95 @@
-@layer components {
-  /* -------------------------------------------------------------------------------------------------
-   * Base
-   * -----------------------------------------------------------------------------------------------*/
-  .skeleton {
-    pointer-events: none;
-    position: relative;
-    overflow: hidden;
-    border-radius: var(--radius-field, 0.25rem);
-    background-color: color-mix(in oklab, var(--color-base-300) 70%, transparent);
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Shimmer animation
-   * -----------------------------------------------------------------------------------------------*/
-  .skeleton--shimmer::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    transform: translateX(-100%);
-    background: linear-gradient(
-      90deg,
-      transparent 0%,
-      color-mix(in oklab, var(--color-base-300) 50%, transparent) 50%,
-      transparent 100%
-    );
-    animation: skeleton-shimmer 1.5s ease-in-out infinite;
-  }
-
-  @keyframes skeleton-shimmer {
-    100% {
-      transform: translateX(100%);
-    }
-  }
-
-  /* Parent with nested skeletons: single synchronized shimmer */
-  .skeleton--shimmer:has(.skeleton)::after {
-    content: none;
-  }
-
-  .skeleton--shimmer:has(.skeleton)::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    z-index: 10;
-    pointer-events: none;
-    transform: translateX(-100%);
-    background: linear-gradient(
-      90deg,
-      transparent 0%,
-      oklch(100% 0 0 / 0.5) 50%,
-      transparent 100%
-    );
-    mix-blend-mode: overlay;
-    animation: skeleton-shimmer 1.5s ease-in-out infinite;
-  }
-
-  .skeleton--shimmer:has(.skeleton) .skeleton::after {
-    content: none;
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Pulse animation
-   * -----------------------------------------------------------------------------------------------*/
-  .skeleton--pulse {
-    animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  }
-
-  @keyframes skeleton-pulse {
-    0%, 100% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0.5;
-    }
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * No animation
-   * -----------------------------------------------------------------------------------------------*/
-  .skeleton--none {
-    /* Static placeholder, no animation */
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Reduced motion
-   * -----------------------------------------------------------------------------------------------*/
-  @media (prefers-reduced-motion: reduce) {
-    .skeleton--shimmer::after,
-    .skeleton--shimmer::before,
-    .skeleton--pulse {
-      animation: none;
-    }
-  }
-}
+@layer components {
+  /* -------------------------------------------------------------------------------------------------
+   * Base
+   * -----------------------------------------------------------------------------------------------*/
+  .skeleton {
+    pointer-events: none;
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--radius-field, 0.25rem);
+    background-color: color-mix(in oklab, var(--color-base-300) 70%, transparent);
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Shimmer animation
+   * -----------------------------------------------------------------------------------------------*/
+  .skeleton--shimmer::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    transform: translateX(-100%);
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      color-mix(in oklab, var(--color-base-300) 50%, transparent) 50%,
+      transparent 100%
+    );
+    animation: skeleton-shimmer 1.5s ease-in-out infinite;
+  }
+
+  @keyframes skeleton-shimmer {
+    100% {
+      transform: translateX(100%);
+    }
+  }
+
+  /* Parent with nested skeletons: single synchronized shimmer */
+  .skeleton--shimmer:has(.skeleton)::after {
+    content: none;
+  }
+
+  .skeleton--shimmer:has(.skeleton)::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 10;
+    pointer-events: none;
+    transform: translateX(-100%);
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      oklch(100% 0 0 / 0.5) 50%,
+      transparent 100%
+    );
+    mix-blend-mode: overlay;
+    animation: skeleton-shimmer 1.5s ease-in-out infinite;
+  }
+
+  .skeleton--shimmer:has(.skeleton) .skeleton::after {
+    content: none;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Pulse animation
+   * -----------------------------------------------------------------------------------------------*/
+  .skeleton--pulse {
+    animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  @keyframes skeleton-pulse {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * No animation
+   * -----------------------------------------------------------------------------------------------*/
+  .skeleton--none {
+    /* Static placeholder, no animation */
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Reduced motion
+   * -----------------------------------------------------------------------------------------------*/
+  @media (prefers-reduced-motion: reduce) {
+    .skeleton--shimmer::after,
+    .skeleton--shimmer::before,
+    .skeleton--pulse {
+      animation: none;
+    }
+  }
+}

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