@ropav/styles 0.4.0 → 0.6.0

package/dist/components/toggle-button.css

@@ -4,12 +4,8 @@
 
 /* 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
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     transform 250ms var(--ease-smooth),
     background-color 100ms var(--ease-out),
@@ -91,7 +87,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;
   }
 }
 
@@ -100,11 +96,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"] {
@@ -117,7 +109,7 @@
 }
 
 .toggle-button--lg {
-  @apply h-11 text-base md:h-10;
+  @apply h-10 text-base;
 
   &:active,
   &[data-pressed="true"] {
@@ -137,8 +129,8 @@
 
 .toggle-button--ghost {
   --toggle-button-bg: transparent;
-  --toggle-button-bg-hover: var(--default);
-  --toggle-button-bg-pressed: var(--default);
+  --toggle-button-bg-hover: var(--state-layer);
+  --toggle-button-bg-pressed: var(--state-layer);
   --toggle-button-fg: var(--default-foreground);
 }
 
@@ -147,13 +139,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,7 +28,7 @@
 
 /* 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. */

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;
@@ -62,10 +75,6 @@
 .tooltip__trigger {
   @apply inline-block;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     color 150ms var(--ease-smooth),
     background-color 150ms var(--ease-smooth),

package/dist/components/typography.css

@@ -35,7 +35,9 @@
 }
 
 .typography-prose code {
-  @apply rounded-md bg-default px-1.5 py-0.5 font-mono text-sm text-foreground;
+  @apply bg-default px-1.5 py-0.5 font-mono text-sm text-foreground;
+
+  border-radius: min(32px, var(--component-radius));
 
   /* 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. */
@@ -70,7 +72,9 @@
 }
 
 .typography-prose pre {
-  @apply my-4 overflow-x-auto rounded-xl bg-default p-4 font-mono text-sm leading-relaxed;
+  @apply my-4 overflow-x-auto bg-default p-4 font-mono text-sm leading-relaxed;
+
+  border-radius: min(32px, var(--component-radius));
 
   /* 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. */
@@ -89,7 +93,9 @@
 }
 
 .typography-prose img {
-  @apply my-4 rounded-xl;
+  @apply my-4;
+
+  border-radius: min(32px, var(--component-radius));
 }
 
 .typography--h1 {
@@ -129,7 +135,9 @@
 }
 
 .typography--code {
-  @apply rounded-md bg-default px-1.5 py-0.5 font-mono text-sm text-foreground;
+  @apply bg-default px-1.5 py-0.5 font-mono text-sm text-foreground;
+
+  border-radius: min(32px, var(--component-radius));
 
   /* 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. */

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,72 @@
+/* ==========================================================================
+   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;
+
+  /* The thumb's fill, per state. Three states paint it and one declaration cannot tell them
+   * apart, so each reads its own. Both lit values are an alpha rather than a neutral, so the
+   * thumb stays visible over whatever the scroller happens to be showing. */
+  --virtualizer-scrollbar-thumb-bg: var(--scrollbar-thumb);
+  --virtualizer-scrollbar-thumb-bg-hover: color-mix(in oklch, var(--foreground) 25%, transparent);
+  --virtualizer-scrollbar-thumb-bg-pressed: color-mix(in oklch, var(--foreground) 35%, transparent);
+
+  background-color: var(--virtualizer-scrollbar-thumb-bg);
+
+  &[data-orientation="vertical"] {
+    inset-inline: 2px;
+  }
+
+  &[data-orientation="horizontal"] {
+    inset-block: 2px;
+  }
+
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      background-color: var(--virtualizer-scrollbar-thumb-bg-hover);
+    }
+  }
+
+  &[data-pressed="true"] {
+    background-color: var(--virtualizer-scrollbar-thumb-bg-pressed);
+  }
+
+  /* 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.js

@@ -32,6 +32,7 @@ import { descriptionVariants } from "./components/description/description.styles
 import { drawerVariants } from "./components/drawer/drawer.styles.js";
 import { disclosureVariants } from "./components/disclosure/disclosure.styles.js";
 import { disclosureGroupVariants } from "./components/disclosure-group/disclosure-group.styles.js";
+import { dropZoneVariants } from "./components/drop-zone/drop-zone.styles.js";
 import { dropdownVariants } from "./components/dropdown/dropdown.styles.js";
 import { emptyStateVariants } from "./components/empty-state/empty-state.styles.js";
 import { errorMessageVariants } from "./components/error-message/error-message.styles.js";
@@ -61,11 +62,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 +86,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, dropZoneVariants, 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 };