@ropav/styles 0.3.0 → 0.5.0

package/dist/components/toggle-button-group.css

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

package/dist/components/toggle-button.css

@@ -4,7 +4,7 @@
 
 /* Base styles */
 .toggle-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
@@ -16,6 +16,15 @@
     box-shadow 100ms var(--ease-out);
   @apply transform-gpu motion-reduce:transition-none;
 
+  /* 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;
+  }
+
   /* Cursor */
   cursor: var(--cursor-interactive);
 
@@ -65,6 +74,7 @@
   &[data-selected="true"] {
     background-color: var(--toggle-button-bg-selected);
     color: var(--toggle-button-fg-selected);
+    @apply forced-selected;
 
     @media (hover: hover) {
       &:hover,
@@ -81,7 +91,7 @@
 
   /* SVG icon styling */
   & 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;
   }
 }
 
@@ -90,11 +100,7 @@
    ========================================================================== */
 
 .toggle-button--sm {
-  @apply h-9 px-3 md:h-8;
-
-  & svg {
-    @apply size-4;
-  }
+  @apply h-8 px-3;
 
   &:active,
   &[data-pressed="true"] {
@@ -107,7 +113,7 @@
 }
 
 .toggle-button--lg {
-  @apply h-11 text-base md:h-10;
+  @apply h-10 text-base;
 
   &:active,
   &[data-pressed="true"] {
@@ -137,13 +143,13 @@
    ========================================================================== */
 
 .toggle-button--icon-only {
-  @apply w-10 p-0 md:w-9;
+  @apply w-9 p-0;
 }
 
 .toggle-button--icon-only.toggle-button--sm {
-  @apply w-9 md:w-8;
+  @apply w-8;
 }
 
 .toggle-button--icon-only.toggle-button--lg {
-  @apply w-11 md:w-10;
+  @apply w-10;
 }

package/dist/components/toolbar.css

@@ -28,5 +28,12 @@
 
 /* Attached variant */
 .toolbar--attached {
-  @apply rounded-3xl bg-surface p-1 shadow-overlay;
+  @apply rounded-component bg-surface p-1 shadow-overlay;
+
+  /* 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;
+  }
 }

package/dist/components/tooltip.css

@@ -3,7 +3,7 @@
 /* Base tooltip styles */
 .tooltip {
   @apply max-w-xs origin-(--trigger-anchor-point) bg-overlay p-2 text-xs break-all;
-  border-radius: min(32px, var(--radius-xl));
+  border-radius: min(32px, var(--component-radius));
   box-shadow: var(--shadow-overlay);
 
   /* Entering animations */
@@ -40,10 +40,23 @@
 
   /* Arrow styling */
   & [data-slot="overlay-arrow"] {
-    @apply stroke-border/40;
     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="tooltip-arrow"]) {
+    box-shadow: none;
+    filter: var(--overlay-edge, none);
+  }
+
   /* Arrow rotation based on placement */
   &[data-placement="bottom"] [data-slot="overlay-arrow"] {
     rotate: 180deg;

package/dist/components/typography.css

@@ -36,6 +36,13 @@
 
 .typography-prose code {
   @apply rounded-md bg-default px-1.5 py-0.5 font-mono text-sm text-foreground;
+
+  /* Code is marked out by a tinted background and nothing else, so forced colors leaves it
+   * indistinguishable from the prose around it - the monospace face is all that is left. */
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
 }
 
 .typography-prose a {
@@ -64,6 +71,13 @@
 
 .typography-prose pre {
   @apply my-4 overflow-x-auto rounded-xl bg-default p-4 font-mono text-sm leading-relaxed;
+
+  /* Code is marked out by a tinted background and nothing else, so forced colors leaves it
+   * indistinguishable from the prose around it - the monospace face is all that is left. */
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
 }
 
 .typography-prose strong {
@@ -116,6 +130,13 @@
 
 .typography--code {
   @apply rounded-md bg-default px-1.5 py-0.5 font-mono text-sm text-foreground;
+
+  /* Code is marked out by a tinted background and nothing else, so forced colors leaves it
+   * indistinguishable from the prose around it - the monospace face is all that is left. */
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
 }
 
 .typography--align-start {

package/dist/components/virtualizer/index.d.ts

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

package/dist/components/virtualizer/index.d.ts.map

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

package/dist/components/virtualizer/index.js

@@ -0,0 +1,2 @@
+import { virtualizerVariants } from "./virtualizer.styles.js";
+export { virtualizerVariants };

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

@@ -0,0 +1,44 @@
+/**
+ * The parts a windowed collection draws for itself, whichever collection it is.
+ *
+ * Only the scrollbar so far: a table and a listbox hide the native one and draw this in its place,
+ * so a dragged thumb moves the rows and the scroll offset together.
+ */
+export declare const virtualizerVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: {
+            scrollbar?: import("tailwind-variants").ClassValue;
+            scrollbarThumb?: import("tailwind-variants").ClassValue;
+            scrollbarTrack?: import("tailwind-variants").ClassValue;
+        } | import("tailwind-variants").ClassValue;
+    };
+} | {
+    [x: string]: {
+        [x: string]: {
+            scrollbar?: import("tailwind-variants").ClassValue;
+            scrollbarThumb?: import("tailwind-variants").ClassValue;
+            scrollbarTrack?: import("tailwind-variants").ClassValue;
+        } | import("tailwind-variants").ClassValue;
+    };
+} | {}, {
+    scrollbar: string;
+    scrollbarThumb: string;
+    scrollbarTrack: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: {
+            scrollbar?: import("tailwind-variants").ClassValue;
+            scrollbarThumb?: import("tailwind-variants").ClassValue;
+            scrollbarTrack?: import("tailwind-variants").ClassValue;
+        } | import("tailwind-variants").ClassValue;
+    };
+} | {}, {
+    scrollbar: string;
+    scrollbarThumb: string;
+    scrollbarTrack: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+    scrollbar: string;
+    scrollbarThumb: string;
+    scrollbarTrack: string;
+}>>;
+//# sourceMappingURL=virtualizer.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"virtualizer.styles.d.ts","sourceRoot":"","sources":["../../../src/components/virtualizer/virtualizer.styles.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAM9B,CAAC"}

package/dist/components/virtualizer/virtualizer.styles.js

@@ -0,0 +1,15 @@
+import { tv } from "tailwind-variants";
+//#region src/components/virtualizer/virtualizer.styles.ts
+/**
+* The parts a windowed collection draws for itself, whichever collection it is.
+*
+* Only the scrollbar so far: a table and a listbox hide the native one and draw this in its place,
+* so a dragged thumb moves the rows and the scroll offset together.
+*/
+const virtualizerVariants = tv({ slots: {
+	scrollbar: "virtualizer__scrollbar",
+	scrollbarThumb: "virtualizer__scrollbar-thumb",
+	scrollbarTrack: "virtualizer__scrollbar-track"
+} });
+//#endregion
+export { virtualizerVariants };

package/dist/components/virtualizer.css

@@ -0,0 +1,64 @@
+/* ==========================================================================
+   Virtualizer — the parts a windowed collection draws for itself.
+   ========================================================================== */
+
+/* --------------------------------------------------------------------------
+   Scrollbar — drawn by a windowed collection in place of the native one it
+   hides, so a dragged thumb moves the rows and the scroll offset together.
+   The component sizes and places each track; this only paints them and holds
+   the box they hang from.
+   -------------------------------------------------------------------------- */
+
+/* A box of no height stuck to the top and inline start of the viewport, so a track placed at its
+ * edges sits at the viewport's edges however far the content has been scrolled along either axis.
+ * The component gives it the viewport's width. */
+.virtualizer__scrollbar {
+  @apply sticky start-0 top-0 z-2 h-0;
+}
+
+.virtualizer__scrollbar-track {
+  @apply absolute touch-none select-none;
+  background-color: var(--scrollbar-track);
+
+  /* The content wrapper drops pointers mid-scroll so a fast scroll does not hover every row it
+   * passes. The track is what is being dragged, so it keeps taking them. */
+  pointer-events: auto;
+
+  &[data-orientation="vertical"] {
+    @apply end-0 top-0;
+  }
+
+  &[data-orientation="horizontal"] {
+    @apply start-0;
+  }
+}
+
+.virtualizer__scrollbar-thumb {
+  @apply absolute rounded-full;
+  background-color: var(--scrollbar-thumb);
+
+  &[data-orientation="vertical"] {
+    inset-inline: 2px;
+  }
+
+  &[data-orientation="horizontal"] {
+    inset-block: 2px;
+  }
+
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      background-color: color-mix(in oklch, var(--foreground) 25%, transparent);
+    }
+  }
+
+  &[data-pressed="true"] {
+    background-color: color-mix(in oklch, var(--foreground) 35%, transparent);
+  }
+
+  /* Forced Colors Mode replaces the translucent fill with the canvas, and the thumb vanishes. */
+  @media (forced-colors: active) {
+    forced-color-adjust: none;
+    background-color: ButtonText;
+  }
+}

package/dist/index.css

@@ -13,8 +13,13 @@
 /* Base component structures (unstyled) */
 @import "./components/index.css" layer(components);
 
-/* Default theme (variables + component customizations) */
-@import "./themes/default/index.css" layer(theme);
+/* Maps the theme tokens onto Tailwind's namespaces - @see https://tailwindcss.com/docs/theme.
+ * Must stay unlayered: Tailwind only picks up `@theme` outside a cascade layer. */
+@import "./themes/shared/theme.css";
+
+/* Default theme. Declares its own `@layer theme`; the bundled alternatives in
+ * `themes/*.css` are opt-in and layer themselves the same way. */
+@import "./themes/default.css";
 
 /* Utilities */
 @import "./utilities/index.css";

package/dist/index.js

@@ -61,11 +61,14 @@ import { radioVariants } from "./components/radio/radio.styles.js";
 import { radioGroupVariants } from "./components/radio-group/radio-group.styles.js";
 import { scrollShadowVariants } from "./components/scroll-shadow/scroll-shadow.styles.js";
 import { searchFieldVariants } from "./components/search-field/search-field.styles.js";
+import { segmentedControlVariants } from "./components/segmented-control/segmented-control.styles.js";
 import { selectVariants } from "./components/select/select.styles.js";
 import { separatorVariants } from "./components/separator/separator.styles.js";
+import { sidebarVariants } from "./components/sidebar/sidebar.styles.js";
 import { skeletonVariants } from "./components/skeleton/skeleton.styles.js";
 import { sliderVariants } from "./components/slider/slider.styles.js";
 import { spinnerVariants } from "./components/spinner/spinner.styles.js";
+import { splitterVariants } from "./components/splitter/splitter.styles.js";
 import { surfaceVariants } from "./components/surface/surface.styles.js";
 import { switchVariants } from "./components/switch/switch.styles.js";
 import { switchGroupVariants } from "./components/switch-group/switch-group.styles.js";
@@ -82,5 +85,6 @@ import { toggleButtonVariants } from "./components/toggle-button/toggle-button.s
 import { toggleButtonGroupVariants } from "./components/toggle-button-group/toggle-button-group.styles.js";
 import { toolbarVariants } from "./components/toolbar/toolbar.styles.js";
 import { tooltipVariants } from "./components/tooltip/tooltip.styles.js";
+import { virtualizerVariants } from "./components/virtualizer/virtualizer.styles.js";
 import { cn, tv } from "tailwind-variants";
-export { accordionVariants, alertDialogVariants, alertVariants, ariaDisabledClasses, autocompleteVariants, avatarVariants, badgeVariants, breadcrumbsVariants, buttonGroupVariants, buttonVariants, calendarVariants, calendarYearPickerVariants, cardVariants, checkboxGroupVariants, checkboxVariants, chipVariants, closeButtonVariants, cn, colorAreaVariants, colorFieldVariants, colorInputGroupVariants, colorPickerVariants, colorSliderVariants, colorSwatchPickerVariants, colorSwatchVariants, comboBoxVariants, dateFieldVariants, dateInputGroupVariants, datePickerVariants, dateRangePickerVariants, descriptionVariants, disabledClasses, disclosureGroupVariants, disclosureVariants, drawerVariants, dropdownVariants, emptyStateVariants, errorMessageVariants, fieldErrorVariants, fieldsetVariants, focusRingClasses, headerVariants, inputGroupVariants, inputOTPVariants, inputVariants, kbdVariants, labelVariants, linkVariants, listboxItemVariants, listboxSectionVariants, listboxVariants, menuItemVariants, menuSectionVariants, menuVariants, meterVariants, modalVariants, numberFieldVariants, paginationVariants, popoverVariants, progressBarVariants, progressCircleVariants, radioGroupVariants, radioVariants, rangeCalendarVariants, scrollShadowVariants, searchFieldVariants, selectVariants, separatorVariants, skeletonVariants, sliderVariants, spinnerVariants, surfaceVariants, switchGroupVariants, switchVariants, tableVariants, tabsVariants, tagGroupVariants, tagVariants, textAreaVariants, textFieldVariants, timeFieldVariants, toastVariants, toggleButtonGroupVariants, toggleButtonVariants, toolbarVariants, tooltipVariants, tv, typographyVariants };
+export { accordionVariants, alertDialogVariants, alertVariants, ariaDisabledClasses, autocompleteVariants, avatarVariants, badgeVariants, breadcrumbsVariants, buttonGroupVariants, buttonVariants, calendarVariants, calendarYearPickerVariants, cardVariants, checkboxGroupVariants, checkboxVariants, chipVariants, closeButtonVariants, cn, colorAreaVariants, colorFieldVariants, colorInputGroupVariants, colorPickerVariants, colorSliderVariants, colorSwatchPickerVariants, colorSwatchVariants, comboBoxVariants, dateFieldVariants, dateInputGroupVariants, datePickerVariants, dateRangePickerVariants, descriptionVariants, disabledClasses, disclosureGroupVariants, disclosureVariants, drawerVariants, dropdownVariants, emptyStateVariants, errorMessageVariants, fieldErrorVariants, fieldsetVariants, focusRingClasses, headerVariants, inputGroupVariants, inputOTPVariants, inputVariants, kbdVariants, labelVariants, linkVariants, listboxItemVariants, listboxSectionVariants, listboxVariants, menuItemVariants, menuSectionVariants, menuVariants, meterVariants, modalVariants, numberFieldVariants, paginationVariants, popoverVariants, progressBarVariants, progressCircleVariants, radioGroupVariants, radioVariants, rangeCalendarVariants, scrollShadowVariants, searchFieldVariants, segmentedControlVariants, selectVariants, separatorVariants, sidebarVariants, skeletonVariants, sliderVariants, spinnerVariants, splitterVariants, surfaceVariants, switchGroupVariants, switchVariants, tableVariants, tabsVariants, tagGroupVariants, tagVariants, textAreaVariants, textFieldVariants, timeFieldVariants, toastVariants, toggleButtonGroupVariants, toggleButtonVariants, toolbarVariants, tooltipVariants, tv, typographyVariants, virtualizerVariants };