@ropav/styles 0.3.0 → 0.5.0

package/dist/components/progress-circle.css

@@ -17,11 +17,23 @@
 
   .progress-circle__track-circle {
     stroke: var(--progress-circle-track-stroke);
+
+    /* Forced colors leaves SVG strokes alone, so the ring renders but in the library's own
+     * palette rather than the user's. The track steps out of the way entirely: every keyword
+     * dark enough to read against `Canvas` is also close enough to `Highlight` to swallow the
+     * arc in one palette or the other, and the arc is the part carrying the value. */
+    @media (forced-colors: active) {
+      stroke: Canvas;
+    }
   }
 
   .progress-circle__fill-circle {
     stroke: var(--progress-circle-stroke);
 
+    @media (forced-colors: active) {
+      stroke: Highlight;
+    }
+
     /**
      * Transitions
      * CRITICAL: motion-reduce must be AFTER transition for correct override specificity

package/dist/components/radio.css

@@ -162,6 +162,13 @@
 .radio:has(input:checked) .radio__indicator:empty::before {
   @apply bg-accent-foreground;
   scale: 0.4286; /* 6px */
+
+  /* Forced Colors Mode paints the control and this dot the same `Canvas`, which leaves a
+   * checked radio looking exactly like an unchecked one - the scale change shows nothing on
+   * its own. */
+  @media (forced-colors: active) {
+    background-color: CanvasText;
+  }
 }
 
 /* Selected + Pressed state */

package/dist/components/range-calendar.css

@@ -218,6 +218,12 @@
   &[data-today="true"] {
     .range-calendar__cell-button {
       @apply bg-accent-soft text-accent-soft-foreground;
+
+      /* An edge rather than a fill, so today still reads as itself once it is also in range */
+      @media (forced-colors: active) {
+        outline: 1px solid CanvasText;
+        outline-offset: -1px;
+      }
     }
 
     @media (hover: hover) {
@@ -233,6 +239,20 @@
   /* Range selected track (middle segment) */
   &[data-selected="true"]:not([data-outside-month="true"]) {
     @apply rounded-none bg-accent-soft;
+
+    /* The track is a background and nothing else, so Forced Colors Mode flattens it into the
+     * page and the range stops being visible. The day button declares its own `color`, so
+     * `HighlightText` has to be restated there rather than left to inherit. */
+    @media (forced-colors: active) {
+      background-color: Highlight;
+
+      .range-calendar__cell-button {
+        /* Suppresses the `Canvas` backplate behind the day number, which would otherwise cover
+         * the track and leave the digits invisible against it. */
+        forced-color-adjust: none;
+        color: HighlightText;
+      }
+    }
   }
 
   /* Round row boundaries so the range track looks continuous across weeks */
@@ -257,6 +277,14 @@
 
     .range-calendar__cell-button {
       @apply bg-accent text-accent-foreground;
+
+      /* Caps read the same as the track here. Forced colors offers one selection colour, and
+       * spending it on the shape that matters - the range - beats splitting it. */
+      @media (forced-colors: active) {
+        forced-color-adjust: none;
+        background-color: Highlight;
+        color: HighlightText;
+      }
     }
   }
 

package/dist/components/search-field/search-field.styles.d.ts

@@ -7,6 +7,15 @@ export declare const searchFieldVariants: import("tailwind-variants").TVReturnTy
             group: string;
         };
     };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {};
+        sm: {
+            base: string;
+        };
+    };
     variant: {
         primary: {
             base: string;
@@ -29,6 +38,15 @@ export declare const searchFieldVariants: import("tailwind-variants").TVReturnTy
             group: string;
         };
     };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {};
+        sm: {
+            base: string;
+        };
+    };
     variant: {
         primary: {
             base: string;
@@ -51,6 +69,15 @@ export declare const searchFieldVariants: import("tailwind-variants").TVReturnTy
             group: string;
         };
     };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {};
+        sm: {
+            base: string;
+        };
+    };
     variant: {
         primary: {
             base: string;

package/dist/components/search-field/search-field.styles.d.ts.map

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

package/dist/components/search-field/search-field.styles.js

@@ -3,6 +3,7 @@ import { tv } from "tailwind-variants";
 const searchFieldVariants = tv({
 	defaultVariants: {
 		fullWidth: false,
+		size: "md",
 		variant: "primary"
 	},
 	slots: {
@@ -20,6 +21,11 @@ const searchFieldVariants = tv({
 				group: "search-field__group--full-width"
 			}
 		},
+		size: {
+			lg: { base: "search-field--lg" },
+			md: {},
+			sm: { base: "search-field--sm" }
+		},
 		variant: {
 			primary: { base: "search-field--primary" },
 			secondary: { base: "search-field--secondary" }

package/dist/components/search-field.css

@@ -25,6 +25,14 @@
   border-width: var(--border-width-field);
   border-color: var(--field-border);
 
+  /* Forced Colors Mode flattens the fill onto the page and strips the shadow, leaving a control
+   * with nothing to say it is one. `ButtonBorder` is the keyword the platform uses for a
+   * control's edge. */
+  @media (forced-colors: active) {
+    outline: 1px solid ButtonBorder;
+    outline-offset: -1px;
+  }
+
   /**
    * Transitions
    * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
@@ -80,7 +88,7 @@
 }
 
 .search-field__input {
-  @apply flex-1 rounded-none border-0 bg-transparent px-3 py-2 text-base shadow-none outline-none sm:text-sm;
+  @apply flex-1 rounded-none border-0 bg-transparent px-3 field-line-md shadow-none outline-none;
 
   /* Hide browser default search clear button */
   &::-webkit-search-cancel-button,
@@ -184,3 +192,27 @@
 .search-field__group--full-width {
   @apply w-full;
 }
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+.search-field--sm {
+  .search-field__group {
+    @apply h-8;
+  }
+
+  .search-field__input {
+    @apply field-line-sm;
+  }
+}
+
+.search-field--lg {
+  .search-field__group {
+    @apply h-10;
+  }
+
+  .search-field__input {
+    @apply field-line-lg;
+  }
+}

package/dist/components/segmented-control/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./segmented-control.styles";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/segmented-control/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}

package/dist/components/segmented-control/index.js

@@ -0,0 +1,2 @@
+import { segmentedControlVariants } from "./segmented-control.styles.js";
+export { segmentedControlVariants };

package/dist/components/segmented-control/segmented-control.styles.d.ts

@@ -0,0 +1,73 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const segmentedControlVariants: import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    indicator: string;
+    item: string;
+    separator: string;
+}, undefined, {
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    indicator: string;
+    item: string;
+    separator: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    indicator: string;
+    item: string;
+    separator: string;
+}>>;
+export type SegmentedControlVariants = VariantProps<typeof segmentedControlVariants>;
+//# sourceMappingURL=segmented-control.styles.d.ts.map

package/dist/components/segmented-control/segmented-control.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.styles.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/segmented-control.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,wBAAwB;;QAa/B,KAAK;QACL,IAAI;YACF,IAAI;;;;QAIN,EAAE;YACA,IAAI;;QAEN,EAAE;YACA,IAAI;;QAEN,EAAE;YACA,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,wBAAwB,GAAG,YAAY,CAAC,OAAO,wBAAwB,CAAC,CAAC"}

package/dist/components/segmented-control/segmented-control.styles.js

@@ -0,0 +1,27 @@
+import { tv } from "tailwind-variants";
+//#region src/components/segmented-control/segmented-control.styles.ts
+const segmentedControlVariants = tv({
+	defaultVariants: {
+		fullWidth: false,
+		size: "md"
+	},
+	slots: {
+		base: "segmented-control",
+		indicator: "segmented-control__indicator",
+		item: "segmented-control__item",
+		separator: "segmented-control__separator"
+	},
+	variants: {
+		fullWidth: {
+			false: {},
+			true: { base: "segmented-control--full-width" }
+		},
+		size: {
+			lg: { base: "segmented-control--lg" },
+			md: { base: "segmented-control--md" },
+			sm: { base: "segmented-control--sm" }
+		}
+	}
+});
+//#endregion
+export { segmentedControlVariants };

package/dist/components/segmented-control.css

@@ -0,0 +1,193 @@
+/* ==========================================================================
+   SegmentedControl - one choice out of a few, drawn as a pill that slides
+
+   Structure (explicit composition):
+     .segmented-control                → role="radiogroup", the track the pill slides in
+       .segmented-control__item        → button[role="radio"]
+         .segmented-control__indicator
+   ========================================================================== */
+
+.segmented-control {
+  @apply relative inline-flex w-max items-center bg-default p-1;
+
+  /* The same corner a button of this size wears, not a larger one stepped out by the padding.
+   * The size scale already lines the track up with a button and a field; a corner of its own
+   * would break that agreement at exactly the place two of them sit side by side.
+   *
+   * Read through `var(--component-radius)` rather than the `rounded-component` utility, because
+   * raw CSS resolves the alias on `:root` and then inherits the root theme's radius into every
+   * `data-theme` subtree. */
+  border-radius: min(32px, var(--component-radius));
+
+  /* Forced Colors Mode flattens the track's fill onto the page, which leaves the pill sitting
+   * in nothing. `CanvasText` is the platform's own edge; an outline rather than a border so
+   * nothing shifts. */
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+
+  /* Disabled state */
+  &[data-disabled="true"] {
+    @apply status-disabled;
+  }
+}
+
+/* ==========================================================================
+   Segment
+   ========================================================================== */
+
+.segmented-control__item {
+  @apply relative inline-flex h-7 min-w-0 shrink-0 appearance-none items-center justify-center gap-2 rounded-component border-0 bg-transparent px-3 text-center text-sm font-medium whitespace-nowrap text-muted outline-none select-none no-highlight;
+
+  z-index: 1;
+  cursor: var(--cursor-interactive);
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    color 150ms var(--ease-smooth),
+    opacity 150ms var(--ease-smooth);
+  @apply motion-reduce:transition-none;
+
+  /* Selected state */
+  &[data-selected="true"] {
+    @apply text-segment-foreground;
+
+    /* Sits on top of the indicator, which forced colors paints `Highlight`. `forced-color-adjust`
+     * suppresses the `Canvas` backplate Chromium would otherwise paint behind this label - it
+     * covers the indicator, and black-on-black is exactly what it would leave. */
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+      color: HighlightText;
+    }
+  }
+
+  /* Hover states - both approaches for compatibility */
+  @media (hover: hover) {
+    &:not([data-selected="true"]):not([data-disabled="true"]):hover,
+    &[data-hovered="true"]:not([data-selected="true"]):not([data-disabled="true"]) {
+      @apply text-foreground;
+    }
+  }
+
+  /* Pressed states - both approaches for compatibility */
+  &:not([data-disabled="true"]):active,
+  &[data-pressed="true"]:not([data-disabled="true"]) {
+    @apply opacity-70;
+  }
+
+  /* Focus states - comprehensive fallback */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+
+    /* Written after the utility, which sets this same property. Inset and offsetless so the ring
+     * stays inside the track's padding instead of spilling over its rounded edge - the same
+     * correction ToggleButtonGroup makes for an attached row. */
+    --tw-ring-offset-width: 0px;
+    @apply ring-inset;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled="true"] {
+    @apply status-disabled;
+  }
+}
+
+/* ==========================================================================
+   Separator - a hairline between adjacent segments. Rendered inside each
+   segment and pinned to its leading edge, so it divides that segment from the
+   one before it rather than being a node between the two.
+   ========================================================================== */
+
+.segmented-control__separator {
+  @apply pointer-events-none absolute start-0 top-1/4 h-1/2 w-px rounded-sm bg-muted/25;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition: opacity 150ms var(--ease-smooth);
+  @apply motion-reduce:transition-none;
+
+  /* Nothing to divide in front of the first segment. */
+  .segmented-control__item:first-child & {
+    @apply opacity-0;
+  }
+}
+
+/* The pill covers its own leading divider, and the divider on the segment that follows would
+   otherwise sit hard against the pill's trailing edge. Both step aside as it arrives. */
+.segmented-control__item[data-selected="true"] .segmented-control__separator,
+.segmented-control__item[data-selected="true"]
+  + .segmented-control__item
+  .segmented-control__separator {
+  @apply opacity-0;
+}
+
+/* ==========================================================================
+   Indicator - React Aria's SelectionIndicator. One is rendered inside every
+   segment and only the selected one is present, so what looks like a pill
+   sliding along is one element handing its place to the next.
+   ========================================================================== */
+
+.segmented-control__indicator {
+  @apply absolute start-0 top-0 size-full rounded-component bg-segment shadow-surface;
+
+  z-index: -1;
+
+  /* The indicator is a background and nothing else, so Forced Colors Mode flattens it away
+   * and nothing marks the selected segment. `Highlight` behind `HighlightText` is the
+   * platform's own pairing for a selected segment. */
+  @media (forced-colors: active) {
+    background-color: Highlight;
+  }
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   *
+   * `useSharedElement` reads this very declaration to decide what to carry across the handoff,
+   * so the stylesheet stays the only place that decides what animates. `height` is listed even
+   * though the pill only travels along one axis today, so a vertical orientation needs no
+   * change here.
+   */
+  transition-duration: 250ms;
+  transition-property: translate, width, height;
+  transition-timing-function: var(--ease-out-fluid);
+  @apply motion-reduce:transition-none;
+}
+
+/* ==========================================================================
+   Sizes - the outer track lands on the control scale (32/36/40px), so a
+   segmented control lines up with a button or a field of the same size. The
+   track's own `p-1` is the 8px difference.
+   ========================================================================== */
+
+.segmented-control--sm .segmented-control__item {
+  @apply h-6 px-2.5 text-xs;
+}
+
+.segmented-control--md {
+  /* No styles as this is the default size */
+}
+
+.segmented-control--lg .segmented-control__item {
+  @apply h-8 px-4;
+}
+
+/* ==========================================================================
+   Full width modifier
+   ========================================================================== */
+
+.segmented-control--full-width {
+  @apply flex w-full;
+
+  .segmented-control__item {
+    @apply flex-1;
+  }
+}

package/dist/components/select/select.styles.d.ts

@@ -7,6 +7,17 @@ export declare const selectVariants: import("tailwind-variants").TVReturnType<{
             trigger: string;
         };
     };
+    size: {
+        lg: {
+            base: string;
+            popover: string;
+        };
+        md: {};
+        sm: {
+            base: string;
+            popover: string;
+        };
+    };
     variant: {
         primary: {
             base: string;
@@ -29,6 +40,17 @@ export declare const selectVariants: import("tailwind-variants").TVReturnType<{
             trigger: string;
         };
     };
+    size: {
+        lg: {
+            base: string;
+            popover: string;
+        };
+        md: {};
+        sm: {
+            base: string;
+            popover: string;
+        };
+    };
     variant: {
         primary: {
             base: string;
@@ -51,6 +73,17 @@ export declare const selectVariants: import("tailwind-variants").TVReturnType<{
             trigger: string;
         };
     };
+    size: {
+        lg: {
+            base: string;
+            popover: string;
+        };
+        md: {};
+        sm: {
+            base: string;
+            popover: string;
+        };
+    };
     variant: {
         primary: {
             base: string;

package/dist/components/select/select.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.styles.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,cAAc;;QAcrB,KAAK;QACL,IAAI;YACF,IAAI;YACJ,OAAO;;;;QAIT,OAAO;YACL,IAAI;;QAEN,SAAS;YACP,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC"}
+{"version":3,"file":"select.styles.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,cAAc;;QAerB,KAAK;QACL,IAAI;YACF,IAAI;YACJ,OAAO;;;;QAIT,EAAE;YACA,IAAI;YACJ,OAAO;;QAET,EAAE;QACF,EAAE;YACA,IAAI;YACJ,OAAO;;;;QAIT,OAAO;YACL,IAAI;;QAEN,SAAS;YACP,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC"}

package/dist/components/select/select.styles.js

@@ -3,6 +3,7 @@ import { tv } from "tailwind-variants";
 const selectVariants = tv({
 	defaultVariants: {
 		fullWidth: false,
+		size: "md",
 		variant: "primary"
 	},
 	slots: {
@@ -20,6 +21,17 @@ const selectVariants = tv({
 				trigger: "select__trigger--full-width"
 			}
 		},
+		size: {
+			lg: {
+				base: "select--lg",
+				popover: "select__popover--lg"
+			},
+			md: {},
+			sm: {
+				base: "select--sm",
+				popover: "select__popover--sm"
+			}
+		},
 		variant: {
 			primary: { base: "select--primary" },
 			secondary: { base: "select--secondary" }

package/dist/components/select.css

@@ -15,7 +15,16 @@
 }
 
 .select__trigger {
-  @apply relative isolate inline-flex min-h-9 rounded-field border bg-field px-3 py-2 text-sm text-field-foreground shadow-field outline-none select-none no-highlight;
+  @apply relative isolate inline-flex min-h-9 rounded-field border bg-field px-3 field-line-md text-field-foreground shadow-field outline-none select-none no-highlight;
+
+  /* Forced Colors Mode flattens the fill onto the page and strips the shadow, leaving a field that
+   * reads as bare text - `--border-width-field` is 0, so the declared border brings nothing back on
+   * its own. An outline rather than a width so nothing shifts, and the focus ring replaces it while
+   * focused, which is the right order of importance. */
+  @media (forced-colors: active) {
+    outline: 1px solid ButtonBorder;
+    outline-offset: -1px;
+  }
 
   /**
    * Transitions
@@ -111,7 +120,7 @@
 }
 
 .select__value {
-  @apply flex-1 text-start text-base wrap-break-word text-current sm:text-sm;
+  @apply flex-1 text-start wrap-break-word text-current;
 
   &[data-placeholder="true"] {
     @apply text-field-placeholder;
@@ -138,7 +147,7 @@
 /* Similar to popover content styles */
 .select__popover {
   @apply min-w-(--trigger-width) origin-(--trigger-anchor-point) scroll-py-1 scrollbar overflow-y-auto overscroll-contain 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);
 
   /* Focus state */
@@ -215,6 +224,34 @@
   }
 }
 
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+/* The trigger's own metrics, and the option rows in a popover that is portalled out of this tree -
+ * which is why the popover carries its own size class rather than being reached from the base. */
+.select--sm .select__trigger {
+  @apply min-h-8 field-line-sm;
+}
+
+.select--lg .select__trigger {
+  @apply min-h-10 field-line-lg;
+}
+
+.select__popover--sm {
+  [data-slot="list-box-item"] {
+    @apply min-h-8 py-1;
+  }
+}
+
+.select__popover--lg {
+  @apply text-base;
+
+  [data-slot="list-box-item"] {
+    @apply min-h-10 py-2;
+  }
+}
+
 /* Full width modifier */
 .select--full-width {
   @apply w-full;