@ropav/styles 0.3.0 → 0.5.0

package/dist/utilities/index.css

@@ -1,14 +1,33 @@
 /* === Focus Ring === */
+/*
+ * Every ring here is a `box-shadow` - that is what `ring-*` compiles to - and Forced Colors
+ * Mode strips `box-shadow` outright. Since `outline-none` has already given up the native
+ * outline, the two together leave no focus indicator at all, which is WCAG 2.4.7 across every
+ * component that focuses. Each utility therefore draws an outline back under
+ * `forced-colors: active`, in `Highlight`: system colours are exempt from the override, and
+ * `Highlight` is the one the platform reserves for the focused control.
+ */
 @utility focus-ring {
   @apply ring-2 ring-focus ring-offset-0 ring-offset-background outline-none;
   /* Overrides the ring offset from the theme variables */
   --tw-ring-offset-width: var(--ring-offset-width);
+
+  @media (forced-colors: active) {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+  }
 }
 
 @utility focus-field-ring {
   @apply ring-2 ring-focus ring-offset-0 outline-none;
   /* No separation - ring sits directly against the element */
   --tw-ring-offset-width: 0px;
+
+  /* Offset stays at 0, matching the ring this stands in for */
+  @media (forced-colors: active) {
+    outline: 2px solid Highlight;
+    outline-offset: 0;
+  }
 }
 
 @utility invalid-field-ring {
@@ -25,6 +44,15 @@
   &[data-focus-within="true"] {
     @apply ring-2 ring-danger ring-offset-0;
     --tw-ring-offset-width: 0px;
+
+    /* The unfocused outline above survives forced colors, but the ring marking focus does
+     * not - widen and recolour the outline instead, or a focused invalid field is
+     * indistinguishable from an unfocused one. The danger colour is not the loss it looks
+     * like: forced colors overrides it either way, and the error message carries it. */
+    @media (forced-colors: active) {
+      outline-width: 2px;
+      outline-color: Highlight;
+    }
   }
 }
 
@@ -49,12 +77,54 @@
   opacity: var(--disabled-opacity);
   cursor: var(--cursor-disabled);
   pointer-events: none;
+
+  /* Forced colors leaves `opacity` alone, so the element still reads as dimmed without this.
+   * `GrayText` is the signal the platform actually uses for a disabled control, and it
+   * inherits, which is what carries it to the label and description inside. */
+  @media (forced-colors: active) {
+    color: GrayText;
+    border-color: GrayText;
+  }
 }
 
 @utility status-pending {
   @apply pointer-events-none;
 }
 
+/* === Forced Colors (Windows High Contrast Mode) === */
+
+/*
+ * Restates "selected" for Forced Colors Mode.
+ *
+ * The mode replaces every author colour with the user's palette, so a state carried only by
+ * `background-color` - a selected tag, calendar day, table row - collapses into its neighbours
+ * and the selection becomes invisible. `Highlight` / `HighlightText` is the pair the platform
+ * reserves for a selected control and is exempt from the override, so restating the state
+ * with it survives.
+ *
+ * Only for elements whose selected state is a background and nothing else. Where selection
+ * also shows as a glyph or a moved thumb, the component's own `forced-colors` block handles
+ * it, because those parts need colours of their own.
+ *
+ * Apply it as a statement of its own, never folded into another `@apply` list: Tailwind sorts
+ * the utilities in one list and hoists the nested at-rule above the plain declarations, where
+ * the very `background-color` this is meant to override then wins.
+ */
+@utility forced-selected {
+  @media (forced-colors: active) {
+    /* Chromium paints a `Canvas`-coloured backplate behind the text of any element that has
+     * one, so that text over an image stays legible. It goes on top of the element's own
+     * background, which means a `Highlight` fill with `HighlightText` on it renders as a
+     * solid plate with invisible text - the label disappears completely. Opting the element
+     * out of adjustment is what suppresses the backplate; the colours below are system
+     * colours either way, so the user's palette is still what gets used. */
+    forced-color-adjust: none;
+    background-color: Highlight;
+    border-color: Highlight;
+    color: HighlightText;
+  }
+}
+
 /* === Scrollbars (standards-only; apply per scroll slot in component CSS) === */
 @utility scrollbar {
   scrollbar-width: var(--scrollbar-width);
@@ -81,3 +151,30 @@
   scrollbar-gutter: auto;
   -ms-overflow-style: none;
 }
+
+/* === Field metrics === */
+/*
+ * One line of a field, at each size. The size scale is the control scale: 32px, 36px, 40px, the
+ * same three heights a button stands at, so a field and a button of the same size line up.
+ *
+ * The padding is what carries it rather than a height, because a field is content-driven - some
+ * shells grow (a group around a textarea, a multi-select trigger wrapping its chips) and a height
+ * would fight them. The shell states its own floor: `min-h-8` / `min-h-9` / `min-h-10` where it may
+ * grow, `h-8` / `h-9` / `h-10` where it may not.
+ *
+ * The padding also changes at `sm` where the type does. 16px type below that breakpoint is what
+ * stops mobile Safari zooming the page on focus, and 16px sets a 24px line where 14px sets a 20px
+ * one - so the padding gives back the 4px difference and the height comes out the same either way.
+ * `lg` keeps 16px throughout, as the large button does.
+ */
+@utility field-line-sm {
+  @apply py-1 text-base sm:py-1.5 sm:text-sm;
+}
+
+@utility field-line-md {
+  @apply py-1.5 text-base sm:py-2 sm:text-sm;
+}
+
+@utility field-line-lg {
+  @apply py-2 text-base;
+}

package/dist/variants/index.css

@@ -10,7 +10,7 @@
  *   motion-safe:animate-spin     - Full motion effects
  *   dark:bg-gray-900             - Dark mode styles
  *
- * Priority: Explicit data attributes/classes → System preferences (fallback)
+ * Priority: Explicit data attributes → System preferences (fallback); `dark` is explicit-only
  * ================================================================================================
  */
 
@@ -79,10 +79,12 @@
 
 /* -------------------------------------------------------------------------------------------------
  * dark — Dark mode styles
- * Priority: .dark class / data-theme="dark" → prefers-color-scheme: dark
+ * Explicit only: .dark class / data-theme="dark". No `prefers-color-scheme` fallback here — the
+ * token layer in `themes/` keys off these same selectors and has no media query of its own, so a
+ * fallback would flip the utilities while the colours stayed light. Apps read `matchMedia` and set
+ * the class themselves, which is also what a light/dark/system toggle needs.
  * ------------------------------------------------------------------------------------------------- */
 @custom-variant dark {
-  /* Explicit: .dark class or data-theme="dark" on element or ancestor */
   &:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
     @slot;
 
@@ -91,16 +93,4 @@
       @slot;
     }
   }
-
-  /* Fallback: system prefers dark color scheme */
-  @media (prefers-color-scheme: dark) {
-    &:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) & {
-      @slot;
-
-      &::before,
-      &::after {
-        @slot;
-      }
-    }
-  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ropav/styles",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Ropav core styles - framework-agnostic CSS and Tailwind variants",
   "keywords": [
     "css",
@@ -50,8 +50,7 @@
     "./base": "./dist/base/base.css",
     "./base/*.css": "./dist/base/*.css",
     "./components/*.css": "./dist/components/*.css",
-    "./themes/default": "./dist/themes/default/index.css",
-    "./themes/*/*.css": "./dist/themes/*/*.css",
+    "./themes/*": "./dist/themes/*.css",
     "./themes/*.css": "./dist/themes/*.css",
     "./utilities": "./dist/utilities/index.css",
     "./variants": "./dist/variants/index.css",

package/src/components/autocomplete/autocomplete.styles.ts

@@ -5,6 +5,7 @@ import { tv } from "tailwind-variants";
 export const autocompleteVariants = tv({
   defaultVariants: {
     fullWidth: false,
+    size: "md",
     variant: "primary",
   },
   slots: {
@@ -24,6 +25,17 @@ export const autocompleteVariants = tv({
         trigger: "autocomplete__trigger--full-width",
       },
     },
+    size: {
+      lg: {
+        base: "autocomplete--lg",
+        popover: "autocomplete__popover--lg",
+      },
+      md: {},
+      sm: {
+        base: "autocomplete--sm",
+        popover: "autocomplete__popover--sm",
+      },
+    },
     variant: {
       primary: {
         base: "autocomplete--primary",

package/src/components/color-input-group/color-input-group.styles.ts

@@ -5,6 +5,7 @@ import { tv } from "tailwind-variants";
 export const colorInputGroupVariants = tv({
   defaultVariants: {
     fullWidth: false,
+    size: "md",
     variant: "primary",
   },
   slots: {
@@ -20,6 +21,15 @@ export const colorInputGroupVariants = tv({
         base: "color-input-group--full-width",
       },
     },
+    size: {
+      lg: {
+        base: "color-input-group--lg",
+      },
+      md: {},
+      sm: {
+        base: "color-input-group--sm",
+      },
+    },
     variant: {
       primary: {
         base: "color-input-group--primary",

package/src/components/combo-box/combo-box.styles.ts

@@ -5,6 +5,7 @@ import { tv } from "tailwind-variants";
 export const comboBoxVariants = tv({
   defaultVariants: {
     fullWidth: false,
+    size: "md",
   },
   slots: {
     base: "combo-box",
@@ -21,6 +22,17 @@ export const comboBoxVariants = tv({
         inputGroup: "combo-box__input-group--full-width",
       },
     },
+    /* The field itself is the `Input` inside, which takes its own size class from the context the
+     * root provides. Only the popover is left, and it is teleported out of this tree. */
+    size: {
+      lg: {
+        popover: "combo-box__popover--lg",
+      },
+      md: {},
+      sm: {
+        popover: "combo-box__popover--sm",
+      },
+    },
   },
 });
 

package/src/components/date-input-group/date-input-group.styles.ts

@@ -5,6 +5,7 @@ import { tv } from "tailwind-variants";
 export const dateInputGroupVariants = tv({
   defaultVariants: {
     fullWidth: false,
+    size: "md",
     variant: "primary",
   },
   slots: {
@@ -22,6 +23,15 @@ export const dateInputGroupVariants = tv({
         base: "date-input-group--full-width",
       },
     },
+    size: {
+      lg: {
+        base: "date-input-group--lg",
+      },
+      md: {},
+      sm: {
+        base: "date-input-group--sm",
+      },
+    },
     variant: {
       primary: {
         base: "date-input-group--primary",

package/src/components/dropdown/dropdown.styles.ts

@@ -4,7 +4,9 @@ import { tv } from "tailwind-variants";
 
 export const dropdownVariants = tv({
   slots: {
-    menu: "dropdown__menu",
+    // The block is shared with the standalone menu; `dropdown__menu` is only the hook that
+    // `dropdown.css` and callers target.
+    menu: "menu dropdown__menu",
     popover: "dropdown__popover",
     root: "dropdown",
     trigger: "dropdown__trigger",

package/src/components/index.ts

@@ -61,11 +61,14 @@ export * from "./radio";
 export * from "./radio-group";
 export * from "./scroll-shadow";
 export * from "./search-field";
+export * from "./segmented-control";
 export * from "./select";
 export * from "./separator";
+export * from "./sidebar";
 export * from "./skeleton";
 export * from "./slider";
 export * from "./spinner";
+export * from "./splitter";
 export * from "./surface";
 export * from "./switch";
 export * from "./switch-group";
@@ -82,3 +85,4 @@ export * from "./toggle-button";
 export * from "./toggle-button-group";
 export * from "./toolbar";
 export * from "./tooltip";
+export * from "./virtualizer";

package/src/components/input/input.styles.ts

@@ -6,6 +6,7 @@ export const inputVariants = tv({
   base: "input",
   defaultVariants: {
     fullWidth: false,
+    size: "md",
     variant: "primary",
   },
   variants: {
@@ -13,6 +14,11 @@ export const inputVariants = tv({
       false: "",
       true: "input--full-width",
     },
+    size: {
+      lg: "input--lg",
+      md: "",
+      sm: "input--sm",
+    },
     variant: {
       primary: "input--primary",
       secondary: "input--secondary",

package/src/components/input-group/input-group.styles.ts

@@ -5,6 +5,7 @@ import { tv } from "tailwind-variants";
 export const inputGroupVariants = tv({
   defaultVariants: {
     fullWidth: false,
+    size: "md",
     variant: "primary",
   },
   slots: {
@@ -20,6 +21,15 @@ export const inputGroupVariants = tv({
         base: "input-group--full-width",
       },
     },
+    size: {
+      lg: {
+        base: "input-group--lg",
+      },
+      md: {},
+      sm: {
+        base: "input-group--sm",
+      },
+    },
     variant: {
       primary: {
         base: "input-group--primary",

package/src/components/list-box/list-box.styles.ts

@@ -5,9 +5,15 @@ import { tv } from "tailwind-variants";
 export const listboxVariants = tv({
   base: "list-box",
   defaultVariants: {
+    size: "md",
     variant: "default",
   },
   variants: {
+    size: {
+      lg: "list-box--lg",
+      md: "",
+      sm: "list-box--sm",
+    },
     variant: {
       danger: "list-box--danger",
       default: "list-box--default",

package/src/components/menu/menu.styles.ts

@@ -4,6 +4,16 @@ import { tv } from "tailwind-variants";
 
 export const menuVariants = tv({
   base: "menu",
+  defaultVariants: {
+    size: "md",
+  },
+  variants: {
+    size: {
+      lg: "menu--lg",
+      md: "",
+      sm: "menu--sm",
+    },
+  },
 });
 
 export type MenuVariants = VariantProps<typeof menuVariants>;

package/src/components/number-field/number-field.styles.ts

@@ -5,6 +5,7 @@ import { tv } from "tailwind-variants";
 export const numberFieldVariants = tv({
   defaultVariants: {
     fullWidth: false,
+    size: "md",
     variant: "primary",
   },
   slots: {
@@ -22,6 +23,15 @@ export const numberFieldVariants = tv({
         group: "number-field__group--full-width",
       },
     },
+    size: {
+      lg: {
+        base: "number-field--lg",
+      },
+      md: {},
+      sm: {
+        base: "number-field--sm",
+      },
+    },
     variant: {
       primary: {
         base: "number-field--primary",

package/src/components/search-field/search-field.styles.ts

@@ -5,6 +5,7 @@ import { tv } from "tailwind-variants";
 export const searchFieldVariants = tv({
   defaultVariants: {
     fullWidth: false,
+    size: "md",
     variant: "primary",
   },
   slots: {
@@ -22,6 +23,15 @@ export 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",

package/src/components/segmented-control/index.ts

@@ -0,0 +1 @@
+export * from "./segmented-control.styles";

package/src/components/segmented-control/segmented-control.styles.ts

@@ -0,0 +1,37 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export 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",
+      },
+    },
+  },
+});
+
+export type SegmentedControlVariants = VariantProps<typeof segmentedControlVariants>;

package/src/components/select/select.styles.ts

@@ -5,6 +5,7 @@ import { tv } from "tailwind-variants";
 export const selectVariants = tv({
   defaultVariants: {
     fullWidth: false,
+    size: "md",
     variant: "primary",
   },
   slots: {
@@ -22,6 +23,17 @@ export 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",

package/src/components/sidebar/index.ts

@@ -0,0 +1 @@
+export * from "./sidebar.styles";

package/src/components/sidebar/sidebar.styles.ts

@@ -0,0 +1,94 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+/*
+ * Side and collapse mode are carried as modifier classes rather than left to `[data-side]` /
+ * `[data-collapsible]` selectors in the stylesheet, the same call `splitterVariants` makes: a
+ * selector descending from the shell would reach a second sidebar rendered inside the inset — a
+ * settings pane with a nav of its own — and lay its border down the outer one's edge.
+ *
+ * Only the slots with side- or mode-specific rules branch. `data-collapsed` is deliberately not a
+ * variant: it flips while you watch, which is what a state key is for, and a modifier saying so
+ * would have to be recomputed on every toggle.
+ */
+export const sidebarVariants = tv({
+  defaultVariants: {
+    collapsible: "icon",
+    side: "left",
+  },
+  slots: {
+    base: "sidebar",
+    content: "sidebar__content",
+    footer: "sidebar__footer",
+    group: "sidebar__group",
+    groupLabel: "sidebar__group-label",
+    header: "sidebar__header",
+    inset: "sidebar__inset",
+    item: "sidebar__item",
+    itemIcon: "sidebar__item-icon",
+    itemIndicator: "sidebar__item-indicator",
+    itemLabel: "sidebar__item-label",
+    itemTooltip: "sidebar__item-tooltip",
+    itemTrailing: "sidebar__item-trailing",
+    panel: "sidebar__panel",
+    rail: "sidebar__rail",
+    railTarget: "sidebar__rail-target",
+    separator: "sidebar__separator",
+    subMenu: "sidebar__sub-menu",
+    trigger: "sidebar__trigger",
+  },
+  variants: {
+    collapsible: {
+      icon: {
+        panel: "sidebar__panel--icon",
+      },
+      none: {
+        panel: "sidebar__panel--none",
+      },
+      offcanvas: {
+        panel: "sidebar__panel--offcanvas",
+      },
+    },
+    // Whether the panel is rendering inside a drawer. Resolved by the panel at call time rather
+    // than by the root, because it is the one part that changes shape when the viewport narrows.
+    inDrawer: {
+      true: {
+        panel: "sidebar__panel--drawer",
+      },
+    },
+    // Whether this submenu folds. Resolved by the submenu at call time rather than by the root,
+    // because one sidebar holds items that fold and items that do not.
+    isCollapsible: {
+      true: {
+        subMenu: "sidebar__sub-menu--collapsible",
+      },
+    },
+    // Whether the rail resizes rather than only toggling. Not folded into `collapsible`, because
+    // the two are independent: a sidebar that cannot collapse at all can still be dragged wider.
+    isResizable: {
+      true: {
+        rail: "sidebar__rail--resizable",
+      },
+    },
+    // Whether the row is a child under another item. Resolved by the item at call time, from the
+    // submenu it finds itself inside rather than from a prop a caller has to remember on every row.
+    isSub: {
+      true: {
+        item: "sidebar__item--sub",
+      },
+    },
+    side: {
+      left: {
+        base: "sidebar--left",
+        panel: "sidebar__panel--left",
+      },
+      right: {
+        base: "sidebar--right",
+        panel: "sidebar__panel--right",
+      },
+    },
+  },
+});
+
+export type SidebarVariants = VariantProps<typeof sidebarVariants>;

package/src/components/splitter/index.ts

@@ -0,0 +1 @@
+export * from "./splitter.styles";

package/src/components/splitter/splitter.styles.ts

@@ -0,0 +1,44 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+/*
+ * Orientation is carried as a modifier class rather than left to a `[data-orientation]` selector
+ * in the stylesheet: a splitter nests, and a descendant selector on the root would reach an inner
+ * group's handle as well as its own. Only `base`, `handle` and `handleGrip` branch, because only
+ * they have orientation-specific rules — a modifier on the others would be dead CSS.
+ *
+ * `handleGrip` branches here rather than being sized from its parent's modifier, and that buys two
+ * things at once: the root already resolves these slots against the orientation, so a handle needs
+ * no extra wiring to size its grip, and the grip carries a `--` class of its own — which is what
+ * puts it in front of the Storybook forced-colors sweep. `showGrip` is deliberately *not* a variant:
+ * the grip is only rendered when it is asked for, so a modifier saying so would be dead CSS.
+ */
+export const splitterVariants = tv({
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+  slots: {
+    base: "splitter",
+    handle: "splitter__handle",
+    handleGrip: "splitter__handle-grip",
+    handleTarget: "splitter__handle-target",
+    panel: "splitter__panel",
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        base: "splitter--horizontal",
+        handle: "splitter__handle--horizontal",
+        handleGrip: "splitter__handle-grip--horizontal",
+      },
+      vertical: {
+        base: "splitter--vertical",
+        handle: "splitter__handle--vertical",
+        handleGrip: "splitter__handle-grip--vertical",
+      },
+    },
+  },
+});
+
+export type SplitterVariants = VariantProps<typeof splitterVariants>;