npm - @ropav/styles - Versions diffs - 0.3.0 → 0.5.0 - Mend

@ropav/styles 0.3.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (163) hide show

package/README.md +160 -19
package/dist/components/accordion.css +12 -5
package/dist/components/alert-dialog.css +1 -1
package/dist/components/alert.css +9 -1
package/dist/components/autocomplete/autocomplete.styles.d.ts +33 -0
package/dist/components/autocomplete/autocomplete.styles.d.ts.map +1 -1
package/dist/components/autocomplete/autocomplete.styles.js +12 -0
package/dist/components/autocomplete.css +39 -3
package/dist/components/avatar.css +9 -0
package/dist/components/badge.css +7 -0
package/dist/components/button-group.css +6 -6
package/dist/components/button.css +34 -11
package/dist/components/calendar-year-picker.css +2 -1
package/dist/components/calendar.css +8 -0
package/dist/components/card.css +22 -1
package/dist/components/chip.css +21 -0
package/dist/components/close-button.css +8 -0
package/dist/components/color-input-group/color-input-group.styles.d.ts +27 -0
package/dist/components/color-input-group/color-input-group.styles.d.ts.map +1 -1
package/dist/components/color-input-group/color-input-group.styles.js +6 -0
package/dist/components/color-input-group.css +30 -1
package/dist/components/color-swatch-picker.css +11 -0
package/dist/components/combo-box/combo-box.styles.d.ts +27 -0
package/dist/components/combo-box/combo-box.styles.d.ts.map +1 -1
package/dist/components/combo-box/combo-box.styles.js +17 -7
package/dist/components/combo-box.css +21 -1
package/dist/components/date-input-group/date-input-group.styles.d.ts +27 -0
package/dist/components/date-input-group/date-input-group.styles.d.ts.map +1 -1
package/dist/components/date-input-group/date-input-group.styles.js +6 -0
package/dist/components/date-input-group.css +30 -1
package/dist/components/dropdown/dropdown.styles.d.ts.map +1 -1
package/dist/components/dropdown/dropdown.styles.js +1 -1
package/dist/components/dropdown.css +17 -12
package/dist/components/index.css +4 -0
package/dist/components/index.d.ts +4 -0
package/dist/components/index.d.ts.map +1 -1
package/dist/components/input/input.styles.d.ts +15 -0
package/dist/components/input/input.styles.d.ts.map +1 -1
package/dist/components/input/input.styles.js +6 -0
package/dist/components/input-group/input-group.styles.d.ts +27 -0
package/dist/components/input-group/input-group.styles.d.ts.map +1 -1
package/dist/components/input-group/input-group.styles.js +6 -0
package/dist/components/input-group.css +32 -1
package/dist/components/input.css +23 -1
package/dist/components/list-box/list-box.styles.d.ts +15 -0
package/dist/components/list-box/list-box.styles.d.ts.map +1 -1
package/dist/components/list-box/list-box.styles.js +15 -5
package/dist/components/list-box-item.css +4 -2
package/dist/components/list-box.css +19 -0
package/dist/components/menu/menu.styles.d.ts +19 -1
package/dist/components/menu/menu.styles.d.ts.map +1 -1
package/dist/components/menu/menu.styles.js +9 -1
package/dist/components/menu.css +25 -0
package/dist/components/meter.css +12 -0
package/dist/components/modal.css +1 -1
package/dist/components/number-field/number-field.styles.d.ts +27 -0
package/dist/components/number-field/number-field.styles.d.ts.map +1 -1
package/dist/components/number-field/number-field.styles.js +6 -0
package/dist/components/number-field.css +68 -1
package/dist/components/pagination.css +10 -6
package/dist/components/popover.css +15 -1
package/dist/components/progress-bar.css +12 -0
package/dist/components/progress-circle.css +12 -0
package/dist/components/radio.css +7 -0
package/dist/components/range-calendar.css +28 -0
package/dist/components/search-field/search-field.styles.d.ts +27 -0
package/dist/components/search-field/search-field.styles.d.ts.map +1 -1
package/dist/components/search-field/search-field.styles.js +6 -0
package/dist/components/search-field.css +33 -1
package/dist/components/segmented-control/index.d.ts +2 -0
package/dist/components/segmented-control/index.d.ts.map +1 -0
package/dist/components/segmented-control/index.js +2 -0
package/dist/components/segmented-control/segmented-control.styles.d.ts +73 -0
package/dist/components/segmented-control/segmented-control.styles.d.ts.map +1 -0
package/dist/components/segmented-control/segmented-control.styles.js +27 -0
package/dist/components/segmented-control.css +193 -0
package/dist/components/select/select.styles.d.ts +33 -0
package/dist/components/select/select.styles.d.ts.map +1 -1
package/dist/components/select/select.styles.js +12 -0
package/dist/components/select.css +40 -3
package/dist/components/separator.css +18 -1
package/dist/components/sidebar/index.d.ts +2 -0
package/dist/components/sidebar/index.d.ts.map +1 -0
package/dist/components/sidebar/index.js +2 -0
package/dist/components/sidebar/sidebar.styles.d.ts +190 -0
package/dist/components/sidebar/sidebar.styles.d.ts.map +1 -0
package/dist/components/sidebar/sidebar.styles.js +52 -0
package/dist/components/sidebar.css +510 -0
package/dist/components/skeleton.css +9 -0
package/dist/components/slider.css +61 -0
package/dist/components/splitter/index.d.ts +2 -0
package/dist/components/splitter/index.d.ts.map +1 -0
package/dist/components/splitter/index.js +2 -0
package/dist/components/splitter/splitter.styles.d.ts +61 -0
package/dist/components/splitter/splitter.styles.d.ts.map +1 -0
package/dist/components/splitter/splitter.styles.js +26 -0
package/dist/components/splitter.css +241 -0
package/dist/components/surface.css +24 -0
package/dist/components/switch.css +30 -0
package/dist/components/table.css +11 -3
package/dist/components/tabs.css +30 -2
package/dist/components/tag.css +10 -0
package/dist/components/textarea/textarea.styles.d.ts +15 -0
package/dist/components/textarea/textarea.styles.d.ts.map +1 -1
package/dist/components/textarea/textarea.styles.js +6 -0
package/dist/components/textarea.css +23 -1
package/dist/components/toast.css +1 -1
package/dist/components/toggle-button-group.css +7 -7
package/dist/components/toggle-button.css +17 -11
package/dist/components/toolbar.css +8 -1
package/dist/components/tooltip.css +15 -2
package/dist/components/typography.css +21 -0
package/dist/components/virtualizer/index.d.ts +2 -0
package/dist/components/virtualizer/index.d.ts.map +1 -0
package/dist/components/virtualizer/index.js +2 -0
package/dist/components/virtualizer/virtualizer.styles.d.ts +44 -0
package/dist/components/virtualizer/virtualizer.styles.d.ts.map +1 -0
package/dist/components/virtualizer/virtualizer.styles.js +15 -0
package/dist/components/virtualizer.css +64 -0
package/dist/index.css +7 -2
package/dist/index.js +5 -1
package/dist/ropav.min.css +2 -2
package/dist/themes/airbnb.css +231 -0
package/dist/themes/all.css +17 -0
package/dist/themes/coinbase.css +231 -0
package/dist/themes/{default/variables.css → default.css} +28 -9
package/dist/themes/discord.css +231 -0
package/dist/themes/hero.css +262 -0
package/dist/themes/lavender.css +231 -0
package/dist/themes/mint.css +231 -0
package/dist/themes/netflix.css +231 -0
package/dist/themes/rabbit.css +231 -0
package/dist/themes/shared/theme.css +19 -2
package/dist/themes/sky.css +231 -0
package/dist/themes/spotify.css +231 -0
package/dist/themes/uber.css +231 -0
package/dist/utilities/index.css +97 -0
package/dist/variants/index.css +5 -15
package/package.json +2 -3
package/src/components/autocomplete/autocomplete.styles.ts +12 -0
package/src/components/color-input-group/color-input-group.styles.ts +10 -0
package/src/components/combo-box/combo-box.styles.ts +12 -0
package/src/components/date-input-group/date-input-group.styles.ts +10 -0
package/src/components/dropdown/dropdown.styles.ts +3 -1
package/src/components/index.ts +4 -0
package/src/components/input/input.styles.ts +6 -0
package/src/components/input-group/input-group.styles.ts +10 -0
package/src/components/list-box/list-box.styles.ts +6 -0
package/src/components/menu/menu.styles.ts +10 -0
package/src/components/number-field/number-field.styles.ts +10 -0
package/src/components/search-field/search-field.styles.ts +10 -0
package/src/components/segmented-control/index.ts +1 -0
package/src/components/segmented-control/segmented-control.styles.ts +37 -0
package/src/components/select/select.styles.ts +12 -0
package/src/components/sidebar/index.ts +1 -0
package/src/components/sidebar/sidebar.styles.ts +94 -0
package/src/components/splitter/index.ts +1 -0
package/src/components/splitter/splitter.styles.ts +44 -0
package/src/components/textarea/textarea.styles.ts +6 -0
package/src/components/virtualizer/index.ts +1 -0
package/src/components/virtualizer/virtualizer.styles.ts +15 -0
package/dist/themes/default/components/index.css +0 -6
package/dist/themes/default/index.css +0 -8

package/README.md CHANGED Viewed

@@ -35,7 +35,7 @@ That single line pulls in, in layer order (`theme, base, components, utilities`)
 - Tailwind CSS v4 and `tw-animate-css`
 - base styles and the scrollbar system
 - the component layer — 85 files, one per component
-- the default theme: variables for light and dark, plus per-component theme overrides
+- the default theme: tokens for light and dark
 - utilities and custom variants
 ### Importing only what you need
@@ -45,11 +45,12 @@ That single line pulls in, in layer order (`theme, base, components, utilities`)
 @import "@ropav/styles/components/button.css" layer(components);
 @import "@ropav/styles/components/chip.css" layer(components);
-@import "@ropav/styles/themes/default" layer(theme);
+@import "@ropav/styles/themes/shared/theme.css";
+@import "@ropav/styles/themes/default";
 ```
-> The granular subpaths — `./components/*.css`, `./base`, `./base/*.css`, `./themes/*`, `./utilities`,
-> `./variants` — exist **only in the published tarball**; `clean-package.config.json` writes them into
+> The granular subpaths — `./components/*.css`, `./base`, `./base/*.css`, `./themes/*`, `./themes/*.css`,
+> `./utilities`, `./variants` — exist **only in the published tarball**; `clean-package.config.json` writes them into
 > `exports` at `prepack` time. Inside the workspace, import the files from `packages/styles/` by relative path
 > instead.
@@ -74,14 +75,14 @@ packages/styles/
 │   └── scrollbar.css      # Scrollbar system
 ├── components/            # 85 CSS files, one per component
 ├── themes/
-│   ├── default/
-│   │   ├── variables.css  # Light and dark token sets
-│   │   ├── index.css      # Theme entry point
-│   │   └── components/    # Per-component theme overrides
+│   ├── default.css        # Default theme — hand-written, light and dark token sets
+│   ├── sky.css … rabbit.css  # Ten more themes — generated, do not edit
+│   ├── all.css            # Every bundled theme, for docs and playgrounds
 │   └── shared/
 │       └── theme.css      # @theme block — derived values, radius scale, easing curves
 ├── utilities/index.css    # Tailwind v4 @utility definitions
 ├── variants/index.css     # Tailwind v4 @custom-variant definitions
+├── scripts/themes/        # Build-time theme generator — not published
 └── src/                   # TypeScript: tv() variants + shared utility class strings
 ```
@@ -113,31 +114,171 @@ component that publishes it as an attribute.
 ## Theming
-Light is the default on `:root`; dark turns on with a `.dark` class or `[data-theme="dark"]`:
+Two independent axes. `data-theme` picks the palette, a `light`/`dark` class picks the appearance:
 ```html
-<html data-theme="dark"></html>
+<html data-theme="netflix" class="dark"></html>
 ```
-Every token is a CSS custom property, so overriding them in your own stylesheet is enough to retheme — no
-rebuild of this package:
+Either can be left out. With no `data-theme` you get the default theme; with no class you get light.
+The default theme also answers to `[data-theme="light"]` and `[data-theme="dark"]`, which is what it
+did before the other themes existed.
+### Bundled themes
+The default one, plus a theme per brand ported from HeroUI's gallery — `hero` among them, being
+HeroUI's own palette. The default is already in `@ropav/styles`; the others are opt-in, one file
+each:
+```css
+@import "@ropav/styles";
+@import "@ropav/styles/themes/netflix";
+```
+| `data-theme` | | `data-theme` | | `data-theme` |
+| --- | --- | --- | --- | --- |
+| `default` | | `mint` | | `coinbase` |
+| `hero` | | `netflix` | | `airbnb` |
+| `sky` | | `uber` | | `discord` |
+| `lavender` | | `spotify` | | `rabbit` |
+Each carries both a light and a dark palette, so a theme is a brand rather than an appearance. There is
+no `netflix-dark` — it is `data-theme="netflix"` plus `class="dark"`.
+`themes/all.css` pulls in all of them at once. That is for docs and playgrounds; an app should import
+only the themes it actually offers, since each is around 10 kB before compression.
+Every theme but `default` and `hero` is **generated** — edit `scripts/themes/presets.ts` and run
+`pnpm generate:themes`, never the CSS. A preset is four numbers (accent lightness, chroma and hue, plus
+the chroma of the neutral ramp), a radius pair, and any exact brand colours that should beat the
+calculated ones.
+Those two stay hand-written, each file's header saying what the generator cannot reproduce about it.
+Their presets carry the label and the presentation order; the CSS is the source of truth for their
+tokens.
+### Retheming
+Every token is a CSS custom property, so overriding them in your own stylesheet is enough — no rebuild
+of this package, and no need to go through a theme file at all:
 ```css
 :root {
   --accent: oklch(0.62 0.19 253.83);
   --radius: 0.5rem;
-  --field-radius: calc(var(--radius) * 1.5);
 }
 ```
-Tokens cover base colors (`--background`, `--surface`, `--overlay`, `--muted`), interactive and status colors
-(`--accent`, `--success`, `--warning`, `--danger`, each with a `-foreground` and a derived `-hover`), form
-fields (`--field-background`, `--field-border`, `--field-radius`, …), layout knobs (`--spacing`,
-`--border-width`, `--radius`, `--ring-offset-width`, `--cursor-interactive`), the scrollbar set, and shadows.
+Author CSS outside a cascade layer outranks everything here, so these win wherever you put them.
+To add a theme rather than change the default one, write the same token block under your own attribute.
+It has to redeclare the *derived* tokens too, not just the authored ones: a custom property substitutes
+`var()` where it is declared, so an `--accent-hover` inherited from `:root` would still be mixed from
+the root's `--accent`. Copy a generated theme and edit it, or generate one.
+```css
+@layer theme {
+  [data-theme="ocean"] {
+    color-scheme: light;
+    --accent: oklch(0.62 0.14 220);
+    --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
+    /* … */
+  }
+}
+```
+A theme only needs to carry colours. Everything keyed on neither the palette nor the appearance —
+`--spacing`, `--cursor-*`, the primitives, the shadows, `--backdrop` — stays on `:root` and `.dark` in
+`themes/default.css`, both of which keep matching an element that carries a `data-theme`.
+### Tokens
-**`themes/default/variables.css` is the source of truth — read it rather than a list in a README**, which goes
+Base colors (`--background`, `--surface`, `--overlay`, `--muted`), interactive and status colors
+(`--accent`, `--success`, `--warning`, `--danger`, each with a `-foreground` and a derived `-hover` and
+`-soft`), form fields (`--field-background`, `--field-border`, `--field-radius`, …), layout knobs
+(`--spacing`, `--border-width`, `--radius`, `--ring-offset-width`, `--cursor-interactive`), the
+scrollbar set, and shadows.
+**`themes/default.css` is the source of truth — read it rather than a list in a README**, which goes
 stale the moment a token moves. `themes/shared/theme.css` holds what is derived from those tokens: the
-`--radius-xs` … `--radius-4xl` scale, `color-mix()` hover and soft variants, and the easing curves.
+`--radius-xs` … `--radius-4xl` scale and the easing curves.
+### Reduced motion
+`data-reduce-motion="true"` on any ancestor forces animations off, `"false"` forces them on regardless
+of the OS setting, and with neither the `prefers-reduced-motion` media query decides. Defined as the
+`motion-reduce` / `motion-safe` variants in `variants/index.css`.
+### Forced colors
+Forced Colors Mode - Windows High Contrast - replaces author colours with the user's own palette and
+strips `box-shadow` outright. That second part is what makes it more than a colour question here:
+every ring in this library *is* a `box-shadow`, because that is what `ring-*` compiles to, and it sits
+on top of `outline-none`. Left alone, a focused control would have no indicator at all.
+Nothing to opt into. The three focus utilities - `focus-ring`, `focus-field-ring`,
+`invalid-field-ring` - draw an outline back in `Highlight` under `forced-colors: active`, so any
+component that goes through `status-focused`, `status-focused-field` or `status-invalid-field` is
+covered without a line of its own. `status-disabled` picks up `GrayText` the same way.
+The other half is state carried only by `background-color`, which the override flattens into its
+surroundings. Where selection is *just* a background - a tag, a calendar day, a table row - apply
+`forced-selected`, **as an `@apply` statement of its own**:
+```css
+.thing[data-selected="true"] {
+  @apply bg-accent text-accent-foreground;
+  @apply forced-selected;
+}
+```
+Folded into the line above it, Tailwind sorts the list and hoists the nested media query over the
+plain declarations, and the `background-color` it exists to override wins instead. Where selection
+also moves a thumb or shows a glyph, the component writes its own `forced-colors` block, because
+those parts need colours of their own - see `switch.css`, `radio.css`, `tabs.css`, `range-calendar.css`,
+`slider.css` and `skeleton.css`.
+Use the system colour keywords, not tokens: `Highlight` / `HighlightText` for a selected control,
+`CanvasText` on `Canvas` for ordinary content, `ButtonBorder` for a control's edge, `GrayText` for
+disabled. They are the only colours exempt from the override.
+Watch for `transparent` used as a spacer. Forced colors preserves a transparent *background*, but a
+transparent `border-color` is turned **opaque** - so a border held open purely to reserve layout space
+(`slider.css` does this at both ends of the track) stops being invisible and renders as a solid block.
+Restate those as `Canvas` inside the media query.
+One trap, and `getComputedStyle` cannot see it. Chromium paints a `Canvas`-coloured **backplate**
+behind the text of any element that has text, so that text over an image stays legible. It lands on
+top of that element's own background, so a `Highlight` fill carrying `HighlightText` renders as a
+solid plate with the label invisible inside it - the colours are all correct and the component is
+unreadable. `forced-color-adjust: none` is what suppresses the backplate. `forced-selected` already
+carries it; anything hand-rolling the same pairing needs it too, including the case where the fill
+sits on a different element than the text (`tabs.css`, `range-calendar.css`). Reach for it only
+alongside explicit system colours - on its own it just hands the author's palette back, which is the
+opposite of the point.
+Structure has to survive the mode as well as state. A component that is only a tinted fill and a
+shadow - a card, an alert, a text field, a chip - renders as loose text once both are taken, which
+reads as no component at all. So every container carries an inset `CanvasText` outline under the
+mode and every control a `ButtonBorder` one, on the variants that actually paint; a transparent
+surface is left alone, since framing it would invent a box that was never there. A separator is the
+exception that proves it: the whole thing *is* its background, so it takes a colour rather than an
+edge.
+Two things guard it. `forced-colors.browser.test.ts` in the `ropav` package asserts the stylesheet
+directly, and the Storybook package runs **every story** through an audit that renders it twice - the
+mode off, then on over CDP - and fails on anything that painted something and stops painting it. The
+second one exists because the first cannot see this class of bug on its own: the colour override runs
+after the cascade and the backplate is painted later still, so a component reports every declared
+colour correctly while rendering as a blank block. Three bugs shipped that way before the audit
+existed.
+To look at it by hand, use Chromium's rendering panel - DevTools, `Cmd+Shift+P`, "Show Rendering",
+then *Emulate CSS media feature forced-colors* - and note that **macOS has no Forced Colors Mode at
+all**: "Increase contrast" maps to `prefers-contrast: more`, so switching it on tests nothing. There
+is deliberately no toolbar control in Storybook. `data-reduce-motion` is an attribute a decorator can
+set, but this is a browser-level media feature an iframe cannot turn on for itself, and faking it with
+a stylesheet of system colours would miss the `box-shadow` removal - the part that actually breaks.
 ## Build

package/dist/components/accordion.css CHANGED Viewed

@@ -116,7 +116,14 @@
 /* Surface variant */
 .accordion--surface {
   @apply bg-surface;
-  border-radius: min(32px, var(--radius-3xl));
+  border-radius: min(32px, var(--component-radius));
+  /* Forced Colors Mode flattens the fill onto the page and strips the shadow, so the container
+   * stops having any shape and its contents sit loose on the page. */
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
   .accordion__trigger {
     @media (hover: hover) {
@@ -140,13 +147,13 @@
   /* Special rounding for first and last items in surface variant */
   &:first-child [data-slot="accordion-trigger"] {
-    border-start-start-radius: min(32px, var(--radius-3xl));
-    border-start-end-radius: min(32px, var(--radius-3xl));
+    border-start-start-radius: min(32px, var(--component-radius));
+    border-start-end-radius: min(32px, var(--component-radius));
   }
   &:last-child:not(:has([data-slot="accordion-trigger"][aria-expanded="true"]))
     [data-slot="accordion-trigger"] {
-    border-end-start-radius: min(32px, var(--radius-3xl));
-    border-end-end-radius: min(32px, var(--radius-3xl));
+    border-end-start-radius: min(32px, var(--component-radius));
+    border-end-end-radius: min(32px, var(--component-radius));
   }
 }

package/dist/components/alert-dialog.css CHANGED Viewed

@@ -145,7 +145,7 @@
   @apply flex min-h-0 w-full flex-col;
   @apply max-h-full;
   @apply bg-overlay shadow-overlay outline-none;
-  border-radius: min(32px, var(--radius-3xl));
+  border-radius: min(32px, var(--component-radius));
   @apply p-6;
   @apply overflow-clip;
   @apply pointer-events-auto;

package/dist/components/alert.css CHANGED Viewed

@@ -3,7 +3,15 @@
 /* Base alert styles */
 .alert {
   @apply flex w-full flex-row items-start justify-start gap-4 bg-surface px-4 py-3 shadow-surface;
-  border-radius: min(32px, var(--radius-3xl));
+  /* Forced Colors Mode flattens the fill onto the page and strips the shadow, so the container
+   * stops having any shape - its contents just sit loose on the page. An outline rather than a
+   * border so nothing shifts, and it follows the radius the component sets. */
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+  border-radius: min(32px, var(--component-radius));
 }
 /* Alert elements */

package/dist/components/autocomplete/autocomplete.styles.d.ts CHANGED Viewed

@@ -7,6 +7,17 @@ export declare const autocompleteVariants: import("tailwind-variants").TVReturnT
             trigger: string;
         };
     };
+    size: {
+        lg: {
+            base: string;
+            popover: string;
+        };
+        md: {};
+        sm: {
+            base: string;
+            popover: string;
+        };
+    };
     variant: {
         primary: {
             base: string;
@@ -31,6 +42,17 @@ export declare const autocompleteVariants: import("tailwind-variants").TVReturnT
             trigger: string;
         };
     };
+    size: {
+        lg: {
+            base: string;
+            popover: string;
+        };
+        md: {};
+        sm: {
+            base: string;
+            popover: string;
+        };
+    };
     variant: {
         primary: {
             base: string;
@@ -55,6 +77,17 @@ export declare const autocompleteVariants: import("tailwind-variants").TVReturnT
             trigger: string;
         };
     };
+    size: {
+        lg: {
+            base: string;
+            popover: string;
+        };
+        md: {};
+        sm: {
+            base: string;
+            popover: string;
+        };
+    };
     variant: {
         primary: {
             base: string;

package/dist/components/autocomplete/autocomplete.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"autocomplete.styles.d.ts","sourceRoot":"","sources":["../../../src/components/autocomplete/autocomplete.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,oBAAoB;;~~QAgB3B~~,KAAK;QACL,IAAI;YACF,IAAI;YACJ,OAAO;;;;QAIT,OAAO;YACL,IAAI;;QAEN,SAAS;YACP,IAAI~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~GAIV,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC"}
1	+ {"version":3,"file":"autocomplete.styles.d.ts","sourceRoot":"","sources":["../../../src/components/autocomplete/autocomplete.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,oBAAoB;;QAiB3B,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,oBAAoB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC"}

package/dist/components/autocomplete/autocomplete.styles.js CHANGED Viewed

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

package/dist/components/autocomplete.css CHANGED Viewed

@@ -4,7 +4,15 @@
 }
 .autocomplete__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 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
@@ -101,7 +109,7 @@
 }
 .autocomplete__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;
@@ -131,7 +139,7 @@
 /* Similar to popover content styles */
 .autocomplete__popover {
   @apply flex w-(--trigger-width) max-w-(--trigger-width) origin-(--trigger-anchor-point) scroll-py-1 flex-col overflow-hidden overscroll-contain bg-overlay p-0 pt-2 text-sm outline-none;
-  border-radius: min(32px, var(--radius-3xl));
+  border-radius: min(32px, var(--component-radius));
   box-shadow: var(--shadow-overlay);
   &:focus,
@@ -281,3 +289,31 @@
     transform: scale(0.93);
   }
 }
+/* ==========================================================================
+   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. */
+.autocomplete--sm .autocomplete__trigger {
+  @apply min-h-8 field-line-sm;
+}
+.autocomplete--lg .autocomplete__trigger {
+  @apply min-h-10 field-line-lg;
+}
+.autocomplete__popover--sm {
+  [data-slot="list-box-item"] {
+    @apply min-h-8 py-1;
+  }
+}
+.autocomplete__popover--lg {
+  @apply text-base;
+  [data-slot="list-box-item"] {
+    @apply min-h-10 py-2;
+  }
+}

package/dist/components/avatar.css CHANGED Viewed

@@ -1,6 +1,15 @@
 /* Base avatar styles */
 .avatar {
   @apply relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-3xl bg-default;
+  /* Forced Colors Mode flattens the fill onto the page, so a fallback avatar is initials sitting
+   * loose on the page with no shape around them. The edge goes here rather than on the fallback:
+   * this is the element carrying the radius, and the `overflow-hidden` above would clip a
+   * square outline drawn inside it down to four arcs. */
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
 }
 /* Avatar fallback element */

package/dist/components/badge.css CHANGED Viewed

@@ -18,6 +18,13 @@
   color: var(--badge-fg);
   border: 1px solid var(--badge-border);
   background-clip: padding-box;
+  /* That border is the page colour, there to cut the badge out of whatever it overlaps, and
+   * forced colors turns it into a visible ring - which is the only reason a badge still reads
+   * as one. Stated here so it stays true if `--badge-border` is ever repointed. */
+  @media (forced-colors: active) {
+    border-color: CanvasText;
+  }
 }
 .badge__label {

package/dist/components/button-group.css CHANGED Viewed

@@ -26,32 +26,32 @@
 /* Apply border radius to first button (start edge) */
 .button-group--horizontal .button:first-child {
-  @apply rounded-s-3xl;
+  @apply rounded-s-component;
 }
 /* Apply border radius to last button (end edge) */
 .button-group--horizontal .button:last-child {
-  @apply rounded-e-3xl;
+  @apply rounded-e-component;
 }
 /* If only one button, apply both rounded edges */
 .button-group--horizontal .button:first-child:last-child {
-  @apply rounded-3xl;
+  @apply rounded-component;
 }
 /* Apply border radius to first button (top edge) in vertical */
 .button-group--vertical .button:first-child {
-  @apply rounded-t-3xl;
+  @apply rounded-t-component;
 }
 /* Apply border radius to last button (bottom edge) in vertical */
 .button-group--vertical .button:last-child {
-  @apply rounded-b-3xl;
+  @apply rounded-b-component;
 }
 /* If only one button in vertical, apply all rounded edges */
 .button-group--vertical .button:first-child:last-child {
-  @apply rounded-3xl;
+  @apply rounded-component;
 }
 /* Remove scale transform on active/pressed state for buttons in group */

package/dist/components/button.css CHANGED Viewed

@@ -2,7 +2,7 @@
 /* Base button styles */
 .button {
-  @apply relative isolate inline-flex h-10 w-fit origin-center items-center justify-center gap-2 rounded-3xl px-4 text-sm font-medium whitespace-nowrap outline-none select-none no-highlight md:h-9;
+  @apply relative isolate inline-flex h-9 w-fit origin-center items-center justify-center gap-2 rounded-component px-4 text-sm font-medium whitespace-nowrap outline-none select-none no-highlight;
   /**
    * Transitions
@@ -26,6 +26,15 @@
   background-color: var(--button-bg);
   color: var(--button-fg);
+  /* Forced Colors Mode flattens the fill onto the page and strips the shadow, leaving a control
+   * that reads as bare text. `ButtonBorder` is the keyword the platform uses for a control's
+   * edge; an outline rather than a border 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;
+  }
   /* Focus state */
   &:focus-visible:not(:focus),
   &[data-focus-visible="true"] {
@@ -60,17 +69,13 @@
   /* SVG icon styling - exclude spinner and link-icon svgs */
   & svg:not([data-slot="spinner"] svg, [data-slot="link-icon"] svg) {
-    @apply pointer-events-none -mx-0.5 my-0.5 size-5 shrink-0 self-center sm:my-1 sm:size-4;
+    @apply pointer-events-none -mx-0.5 my-1 size-4 shrink-0 self-center;
   }
 }
 /* Size variants */
 .button--sm {
-  @apply h-9 px-3 md:h-8;
-  & svg:not([data-slot="spinner"] svg, [data-slot="link-icon"] svg) {
-    @apply size-4;
-  }
+  @apply h-8 px-3;
   &:active,
   &[data-pressed="true"] {
@@ -83,7 +88,7 @@
 }
 .button--lg {
-  @apply h-11 text-base md:h-10;
+  @apply h-10 text-base;
   &:active,
   &[data-pressed="true"] {
@@ -97,6 +102,16 @@
   --button-bg-hover: var(--accent-hover);
   --button-bg-pressed: var(--accent-hover);
   --button-fg: var(--accent-foreground);
+  /* Solid against outlined is the one distinction that survives - forced colors has no keyword
+   * for "this is the important one", so the emphasis has to come from the fill. `Highlight` is
+   * spoken for by selection, which a button is not in. `forced-color-adjust` keeps the backplate
+   * off the label. */
+  @media (forced-colors: active) {
+    forced-color-adjust: none;
+    background-color: CanvasText;
+    color: Canvas;
+  }
 }
 .button--secondary {
@@ -130,6 +145,14 @@
   --button-bg-hover: var(--danger-hover);
   --button-bg-pressed: var(--danger-hover);
   --button-fg: var(--danger-foreground);
+  /* Solid like the primary one. The danger colour itself cannot survive - there is no keyword
+   * for it - so the label is what says this is the destructive action. */
+  @media (forced-colors: active) {
+    forced-color-adjust: none;
+    background-color: CanvasText;
+    color: Canvas;
+  }
 }
 .button--danger-soft {
@@ -141,15 +164,15 @@
 /* Icon-only modifier */
 .button--icon-only {
-  @apply w-10 p-0 md:w-9;
+  @apply w-9 p-0;
 }
 .button--icon-only.button--sm {
-  @apply w-9 md:w-8;
+  @apply w-8;
 }
 .button--icon-only.button--lg {
-  @apply w-11 md:w-10;
+  @apply w-10;
 }
 /* Full width modifier */

package/dist/components/calendar-year-picker.css CHANGED Viewed

@@ -116,7 +116,7 @@
  * Year Cell
  * -------------------------------------------------------------------------- */
 .calendar-year-picker__year-cell {
-  @apply relative inline-flex h-8 items-center justify-center rounded-3xl px-2.5 text-sm font-medium outline-none select-none no-highlight;
+  @apply relative inline-flex h-8 items-center justify-center rounded-component px-2.5 text-sm font-medium outline-none select-none no-highlight;
   touch-action: manipulation;
   /**
@@ -144,6 +144,7 @@
   &[data-selected="true"],
   &[aria-selected="true"] {
     @apply bg-accent text-accent-foreground;
+    @apply forced-selected;
     @media (hover: hover) and (pointer: fine) {
       &:is(:hover, [data-hovered="true"]) {

package/dist/components/calendar.css CHANGED Viewed

@@ -207,6 +207,13 @@
   &[data-today="true"] {
     @apply bg-accent-soft text-accent-soft-foreground;
+    /* A tinted background is all that marks today, and forced colors flattens it onto the page.
+     * An edge rather than a fill, so today still reads as itself once it is also selected. */
+    @media (forced-colors: active) {
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+    }
     @media (hover: hover) {
       &:hover:not([data-selected="true"]),
       &[data-hovered="true"]:not([data-selected="true"]) {
@@ -218,6 +225,7 @@
   /* Selected state */
   &[data-selected="true"] {
     @apply bg-accent text-accent-foreground;
+    @apply forced-selected;
   }
   /* Pressed state */