@ropav/styles 0.4.0 → 0.6.0

package/dist/components/number-field.css

@@ -15,7 +15,14 @@
 }
 
 .number-field__group {
-  @apply grid h-9 items-center overflow-hidden rounded-field border bg-field text-sm text-field-foreground shadow-field outline-none;
+  @apply grid h-9 items-center overflow-hidden rounded-field border text-sm text-field-foreground shadow-field outline-none;
+
+  /* The fill, per state. The `--secondary` variant re-points these and declares nothing else. */
+  --number-field-group-bg: var(--field-background, var(--default));
+  --number-field-group-bg-hover: var(--field-hover);
+  --number-field-group-bg-focus: var(--field-focus);
+
+  background-color: var(--number-field-group-bg);
   border-width: var(--border-width-field);
   border-color: var(--field-border);
 
@@ -40,10 +47,6 @@
     grid-template-columns: 40px 1fr 40px;
   }
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     background-color 150ms var(--ease-smooth),
     border-color 150ms var(--ease-smooth),
@@ -54,7 +57,7 @@
   @media (hover: hover) {
     &:hover:not(:focus-within),
     &[data-hovered="true"]:not([data-focus-within="true"]) {
-      @apply bg-field-hover;
+      background-color: var(--number-field-group-bg-hover);
       border-color: var(--field-border-hover);
     }
   }
@@ -64,13 +67,13 @@
   &:focus-within {
     @apply status-focused-field;
     border-color: var(--field-border-focus);
-    background-color: var(--field-focus);
+    background-color: var(--number-field-group-bg-focus);
   }
 
   /* Invalid state */
   &[data-invalid="true"] {
     @apply status-invalid-field;
-    background-color: var(--field-focus);
+    background-color: var(--number-field-group-bg-focus);
     border-color: var(--color-field-border-invalid);
   }
 
@@ -91,13 +94,13 @@
    */
   &:has([data-slot="number-field-input"]:-webkit-autofill),
   &:has([data-slot="number-field-input"]:autofill) {
-    background-color: var(--field-focus);
+    background-color: var(--number-field-group-bg-focus);
     border-color: var(--field-border-focus);
   }
 }
 
 .number-field__input {
-  @apply min-w-0 rounded-none border-0 bg-transparent px-3 py-2 text-base tabular-nums shadow-none outline-none sm:text-sm;
+  @apply min-w-0 rounded-none border-0 bg-transparent px-3 field-line-md tabular-nums shadow-none outline-none;
 
   /* Remove border radius on left side when decrement button is present */
   .number-field__group:has([slot="decrement"]) & {
@@ -137,15 +140,20 @@
 
 .number-field__increment-button,
 .number-field__decrement-button {
-  @apply flex h-full w-10 items-center justify-center rounded-none bg-transparent text-field-foreground outline-none;
+  @apply flex h-full w-10 items-center justify-center rounded-none text-field-foreground outline-none;
+
+  --number-field-button-bg: transparent;
+  --number-field-button-bg-pressed: color-mix(
+    in oklab,
+    var(--field-foreground, var(--foreground)) 10%,
+    transparent
+  );
+
+  background-color: var(--number-field-button-bg);
   border-width: var(--border-width-field);
   border-color: var(--field-border);
   border-style: solid;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     background-color 150ms var(--ease-smooth),
     border-color 150ms var(--ease-smooth);
@@ -167,7 +175,7 @@
   /* Pressed state */
   &:active,
   &[data-pressed="true"] {
-    @apply bg-field-foreground/10;
+    background-color: var(--number-field-button-bg-pressed);
     transform: scale(0.97);
   }
 
@@ -200,31 +208,11 @@
 
 .number-field--secondary .number-field__group {
   @apply shadow-none;
-  background-color: var(--number-field-group-bg);
 
   --number-field-group-bg: var(--default);
   --number-field-group-bg-hover: var(--default-hover);
   --number-field-group-bg-focus: var(--default);
 
-  @media (hover: hover) {
-    &:hover:not(:focus-within),
-    &[data-hovered="true"]:not([data-focus-within="true"]) {
-      background-color: var(--number-field-group-bg-hover);
-    }
-  }
-
-  &:focus-within,
-  &[data-focus-within="true"] {
-    background-color: var(--number-field-group-bg-focus);
-  }
-
-  /* Invalid state */
-  &[data-invalid="true"] {
-    @apply status-invalid-field;
-    border-color: var(--color-field-border-invalid);
-    background-color: var(--number-field-group-bg-focus);
-  }
-
   [data-slot="number-field-input"] {
     @apply bg-transparent;
   }
@@ -238,3 +226,62 @@
 .number-field__group--full-width {
   @apply w-full;
 }
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+/* The stepper column stays 4px wider than the field is tall, as it is at `md`. */
+.number-field--sm {
+  .number-field__group {
+    @apply h-8;
+
+    &:has([slot="decrement"]) {
+      grid-template-columns: 36px 1fr;
+    }
+
+    &:has([slot="increment"]) {
+      grid-template-columns: 1fr 36px;
+    }
+
+    &:has([slot="decrement"]):has([slot="increment"]) {
+      grid-template-columns: 36px 1fr 36px;
+    }
+  }
+
+  .number-field__input {
+    @apply field-line-sm;
+  }
+
+  .number-field__increment-button,
+  .number-field__decrement-button {
+    @apply w-9;
+  }
+}
+
+.number-field--lg {
+  .number-field__group {
+    @apply h-10;
+
+    &:has([slot="decrement"]) {
+      grid-template-columns: 44px 1fr;
+    }
+
+    &:has([slot="increment"]) {
+      grid-template-columns: 1fr 44px;
+    }
+
+    &:has([slot="decrement"]):has([slot="increment"]) {
+      grid-template-columns: 44px 1fr 44px;
+    }
+  }
+
+  .number-field__input {
+    @apply field-line-lg;
+  }
+
+  .number-field__increment-button,
+  .number-field__decrement-button {
+    @apply w-11;
+  }
+}

package/dist/components/pagination.css

@@ -24,14 +24,10 @@
 
 /* Link - page number button (ghost button style) */
 .pagination__link {
-  @apply relative isolate inline-flex size-9 origin-center items-center justify-center rounded-3xl text-sm font-medium whitespace-nowrap outline-none select-none no-highlight md:size-8;
+  @apply relative isolate inline-flex size-8 origin-center items-center justify-center rounded-component text-sm font-medium whitespace-nowrap outline-none select-none no-highlight;
 
   cursor: var(--cursor-interactive);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     transform 250ms var(--ease-smooth),
     background-color 100ms var(--ease-out),
@@ -88,7 +84,7 @@
 
 /* Ellipsis */
 .pagination__ellipsis {
-  @apply inline-flex size-9 items-center justify-center text-sm text-muted select-none md:size-8;
+  @apply inline-flex size-8 items-center justify-center text-sm text-muted select-none;
 }
 
 /* Navigation buttons (Previous / Next) */
@@ -107,7 +103,7 @@
 
 .pagination--sm {
   .pagination__link {
-    @apply size-8 text-xs md:size-7;
+    @apply size-7 text-xs;
 
     &:active,
     &[data-pressed="true"] {
@@ -120,7 +116,7 @@
   }
 
   .pagination__ellipsis {
-    @apply size-8 text-xs md:size-7;
+    @apply size-7 text-xs;
   }
 
   .pagination__summary {
@@ -134,7 +130,7 @@
 
 .pagination--lg {
   .pagination__link {
-    @apply size-10 text-base md:size-9;
+    @apply size-9 text-base;
 
     &:active,
     &[data-pressed="true"] {
@@ -147,7 +143,7 @@
   }
 
   .pagination__ellipsis {
-    @apply size-10 text-base md:size-9;
+    @apply size-9 text-base;
   }
 
   .pagination__summary {

package/dist/components/popover.css

@@ -3,7 +3,7 @@
 /* Base popover styles */
 .popover {
   @apply origin-(--trigger-anchor-point) bg-overlay p-0 text-sm;
-  border-radius: min(32px, var(--radius-3xl));
+  border-radius: min(32px, var(--component-radius));
   box-shadow: var(--shadow-overlay);
 
   /* Entering animations */
@@ -43,6 +43,20 @@
     fill: var(--overlay);
   }
 
+  /**
+   * With an arrow, the edge treatment moves off the body and onto the pair.
+   *
+   * The arrow is a second shape filled with the body's own colour, overlapping it so no seam can
+   * open between them — which leaves nothing for a per-shape edge to be right about: a shadow or
+   * hairline painted on the body alone stops at the join, and one painted on the arrow crosses
+   * it. `--overlay-edge` is a filter, and a filter sees the two shapes as one image, so whatever
+   * edge it draws follows their combined silhouette.
+   */
+  &:has([data-slot="popover-overlay-arrow-group"]) {
+    box-shadow: none;
+    filter: var(--overlay-edge, none);
+  }
+
   /* Arrow rotation based on placement */
   &[data-placement="bottom"] [data-slot="popover-overlay-arrow"] {
     rotate: 180deg;
@@ -71,10 +85,6 @@
 .popover__trigger {
   @apply inline-block;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     color 150ms var(--ease-smooth),
     background-color 150ms var(--ease-smooth),

package/dist/components/progress-bar/progress-bar.styles.d.ts

@@ -17,6 +17,18 @@ export declare const progressBarVariants: import("tailwind-variants").TVReturnTy
             base: string;
         };
     };
+    isAnimated: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    isStriped: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
     size: {
         lg: {
             base: string;
@@ -51,6 +63,18 @@ export declare const progressBarVariants: import("tailwind-variants").TVReturnTy
             base: string;
         };
     };
+    isAnimated: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    isStriped: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
     size: {
         lg: {
             base: string;
@@ -85,6 +109,18 @@ export declare const progressBarVariants: import("tailwind-variants").TVReturnTy
             base: string;
         };
     };
+    isAnimated: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    isStriped: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
     size: {
         lg: {
             base: string;

package/dist/components/progress-bar/progress-bar.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/progress-bar/progress-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,mBAAmB;;QAa1B,MAAM;YACJ,IAAI;;QAEN,MAAM;YACJ,IAAI;;QAEN,OAAO;YACL,IAAI;;QAEN,OAAO;YACL,IAAI;;QAEN,OAAO;YACL,IAAI;;;;QAIN,EAAE;YACA,IAAI;;QAEN,EAAE;YACA,IAAI;;QAEN,EAAE;YACA,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}
+{"version":3,"file":"progress-bar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/progress-bar/progress-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,mBAAmB;;QAe1B,MAAM;YACJ,IAAI;;QAEN,MAAM;YACJ,IAAI;;QAEN,OAAO;YACL,IAAI;;QAEN,OAAO;YACL,IAAI;;QAEN,OAAO;YACL,IAAI;;;;QAIN,KAAK;QACL,IAAI;YACF,IAAI;;;;QAIN,KAAK;QACL,IAAI;YACF,IAAI;;;;QAIN,EAAE;YACA,IAAI;;QAEN,EAAE;YACA,IAAI;;QAEN,EAAE;YACA,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

package/dist/components/progress-bar/progress-bar.styles.js

@@ -3,6 +3,8 @@ import { tv } from "tailwind-variants";
 const progressBarVariants = tv({
 	defaultVariants: {
 		color: "accent",
+		isAnimated: false,
+		isStriped: false,
 		size: "md"
 	},
 	slots: {
@@ -19,6 +21,14 @@ const progressBarVariants = tv({
 			success: { base: "progress-bar--success" },
 			warning: { base: "progress-bar--warning" }
 		},
+		isAnimated: {
+			false: {},
+			true: { base: "progress-bar--animated" }
+		},
+		isStriped: {
+			false: {},
+			true: { base: "progress-bar--striped" }
+		},
 		size: {
 			lg: { base: "progress-bar--lg" },
 			md: { base: "progress-bar--md" },

package/dist/components/progress-bar.css

@@ -13,6 +13,12 @@
   /* Default color token (accent) */
   --progress-bar-fill: var(--accent);
 
+  /* Derived from the fill rather than declared per colour: mixing toward the track's own colour
+   * lands lighter in the light theme and darker in the dark one, so the band separates whichever
+   * side of the fill it falls on. */
+  --progress-bar-stripe: color-mix(in oklab, var(--progress-bar-fill) 80%, var(--default));
+  --progress-bar-stripe-size: 1rem;
+
   [data-slot="label"] {
     @apply w-fit text-sm font-medium;
 
@@ -26,7 +32,9 @@
   }
 
   .progress-bar__track {
-    @apply relative overflow-hidden rounded-sm bg-default;
+    @apply relative overflow-hidden bg-default;
+
+    border-radius: min(32px, var(--component-radius));
 
     grid-area: track;
 
@@ -43,7 +51,9 @@
   }
 
   .progress-bar__fill {
-    @apply absolute start-0 top-0 h-full rounded-sm;
+    @apply absolute start-0 top-0 h-full;
+
+    border-radius: min(32px, var(--component-radius));
 
     background-color: var(--progress-bar-fill);
 
@@ -51,10 +61,6 @@
       background-color: Highlight;
     }
 
-    /**
-     * Transitions
-     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-     */
     transition: width 300ms var(--ease-out);
     @apply motion-reduce:transition-none;
   }
@@ -100,12 +106,12 @@
    ========================================================================== */
 
 .progress-bar--sm {
-  .progress-bar__track {
-    @apply h-1 rounded-xs;
-  }
+  /* One 1rem tile spans more than the track is tall, so a 4px bar would show a single smear
+   * rather than a run of stripes. The tile tracks the height instead. */
+  --progress-bar-stripe-size: 0.5rem;
 
-  .progress-bar__fill {
-    @apply rounded-xs;
+  .progress-bar__track {
+    @apply h-1;
   }
 }
 
@@ -114,12 +120,10 @@
 }
 
 .progress-bar--lg {
-  .progress-bar__track {
-    @apply h-3 rounded-md;
-  }
+  --progress-bar-stripe-size: 1.25rem;
 
-  .progress-bar__fill {
-    @apply rounded-md;
+  .progress-bar__track {
+    @apply h-3;
   }
 }
 
@@ -146,3 +150,65 @@
 .progress-bar--danger {
   --progress-bar-fill: var(--danger);
 }
+
+/* ==========================================================================
+   Stripes
+
+   The band paints on the fill's `::after`, not on the fill. `animation` on the fill itself is
+   already spoken for by the indeterminate slide, at a specificity a modifier class does not
+   reach, so a band put there would be the one that loses. On a box of its own it composes with
+   the slide instead of trading places with it.
+   ========================================================================== */
+
+.progress-bar--striped,
+.progress-bar--animated {
+  .progress-bar__fill::after {
+    @apply absolute inset-0 content-[''];
+
+    border-radius: inherit;
+
+    /* Tiled by `background-size` rather than repeated by the gradient, so one tile is exactly the
+     * distance the animation travels and the loop closes without a seam. */
+    background-image: linear-gradient(
+      45deg,
+      var(--progress-bar-stripe) 25%,
+      transparent 25% 50%,
+      var(--progress-bar-stripe) 50% 75%,
+      transparent 75%
+    );
+    background-size: var(--progress-bar-stripe-size) var(--progress-bar-stripe-size);
+  }
+
+  /* Forced colors flattens the fill to `Highlight` and leaves this `background-image` painting over
+   * it in author colours. */
+  @media (forced-colors: active) {
+    .progress-bar__fill::after {
+      content: none;
+    }
+  }
+}
+
+.progress-bar--animated {
+  .progress-bar__fill {
+    /* On the host, not inside the `::after` block: the variant carries its own `::before`/`::after`
+     * slot, and written under the pseudo-element instead its ancestor condition would land after
+     * the pseudo-element and compile to an empty `:is()`. Stopped this way the band stays put
+     * rather than disappearing, which is `--striped`. */
+    @apply motion-reduce:animate-none;
+
+    &::after {
+      animation: progress-bar-stripes 1s linear infinite;
+    }
+
+    /* Travelling toward the inline end is what reads as progress; in RTL that is the other way. */
+    &:dir(rtl)::after {
+      animation-direction: reverse;
+    }
+  }
+}
+
+@keyframes progress-bar-stripes {
+  to {
+    background-position-x: var(--progress-bar-stripe-size);
+  }
+}

package/dist/components/progress-circle.css

@@ -34,10 +34,6 @@
       stroke: Highlight;
     }
 
-    /**
-     * Transitions
-     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-     */
     transition: stroke-dashoffset 300ms var(--ease-out);
     @apply motion-reduce:transition-none;
   }

package/dist/components/radio.css

@@ -54,10 +54,6 @@
 .radio__control {
   @apply relative inline-flex size-4 shrink-0 items-center justify-center rounded-lg border [border-width:var(--border-width-field)] border-field-border bg-field shadow-field outline-none no-highlight;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     background-color 200ms var(--ease-out),
     border-color 200ms var(--ease-out),
@@ -134,6 +130,13 @@
   @apply absolute inset-0 flex items-center justify-center;
 
   pointer-events: none;
+
+  /* On the indicator, not in `:empty::before` where the transition lives: the variant reaches a
+   * pseudo-element from its originating element, and appending its condition after `::before`
+   * matches nothing. `:empty` because without it this ties with that rule and loses on order. */
+  &:empty {
+    @apply motion-reduce:transition-none;
+  }
 }
 
 /* :empty pseudo-class ensures these styles only apply when the indicator has no custom children
@@ -146,14 +149,9 @@
   height: 100%;
   scale: 1;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     scale 200ms var(--ease-out),
     background-color 200ms var(--ease-out);
-  @apply motion-reduce:transition-none;
 }
 
 /* Selected state */