@ropav/styles 0.3.0 → 0.5.0

package/dist/components/sidebar.css

@@ -0,0 +1,510 @@
+/* Sidebar styles */
+
+/*
+ * The side and the collapse mode are modifier classes rather than `[data-side]` /
+ * `[data-collapsible]` descendant selectors on the shell, for the reason `splitter.css` sets out
+ * at length: a selector reaching down from the root reaches into anything nested under it too.
+ * A sidebar rarely nests, but a sidebar's `Inset` holds a whole page — a settings pane with its
+ * own sidebar is an ordinary thing to build — and the inner panel would then resolve the outer
+ * one's side and lay its border down the wrong edge.
+ *
+ * The modifier also buys the Storybook forced-colors sweep, which collects `[class*='--']`. The
+ * transient half of the state stays on `data-*`: `data-collapsed` is what changes while you watch,
+ * so it belongs where a state key belongs and not in the class list.
+ */
+
+.sidebar {
+  /* The two widths the panel resolves between. Held on the shell rather than the panel so a caller
+   * retunes both from one place, and so a drag can write the expanded one to the same property the
+   * stylesheet reads. */
+  --sidebar-width: calc(var(--spacing) * 64);
+  --sidebar-width-icon: calc(var(--spacing) * 14);
+  /* The rail's line and the grab area around it, matching `splitter.css` — same hairline, same
+   * reasoning about a target no one can hit, same wait before it flares. */
+  --sidebar-rail-gutter: 1px;
+  --sidebar-rail-target: 15px;
+  --sidebar-highlight-delay: 500ms;
+
+  @apply isolate flex h-full w-full;
+}
+
+/* Reversing the row rather than reordering the parts: the shell's children are written panel,
+ * rail, inset in that order whichever side the sidebar is on, so the rail stays between the two
+ * either way and a caller's markup does not change with the prop. */
+.sidebar--left {
+  @apply flex-row;
+}
+
+.sidebar--right {
+  @apply flex-row-reverse;
+}
+
+/* ==========================================================================
+   Panel — the nav landmark
+   ========================================================================== */
+
+/* `min-h-0` for the same reason `.splitter__panel` has it: a flex item's automatic minimum is its
+ * content, so a long nav list would push the panel past the viewport instead of scrolling inside
+ * `.sidebar__content`. */
+.sidebar__panel {
+  @apply relative flex min-h-0 shrink-0 grow-0 flex-col overflow-hidden bg-surface text-surface-foreground;
+
+  inline-size: var(--sidebar-width);
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition: inline-size 200ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+}
+
+/* Under the pointer the panel follows it exactly. Easing towards each frame's width instead makes
+ * the edge lag the cursor by the whole duration, which reads as the panel chasing the drag rather
+ * than being dragged. */
+.sidebar__panel[data-resizing="true"] {
+  transition: none;
+}
+
+/* The separating line is a border rather than a background, so it is one of the few things Forced
+ * Colors Mode recolours instead of flattening — no restatement needed here. */
+.sidebar__panel--left {
+  @apply border-e border-separator/50;
+}
+
+.sidebar__panel--right {
+  @apply border-s border-separator/50;
+}
+
+/* Collapsing to icons is the default, so the width it collapses to lives on the mode that has one
+ * and `--none` is the empty rule. */
+.sidebar__panel--icon[data-collapsed="true"] {
+  inline-size: var(--sidebar-width-icon);
+}
+
+/* Nothing left to divide once the panel is gone, and a hairline standing alone at the edge of the
+ * page reads as a rendering fault.
+ *
+ * The fill goes with it, and that is a declaration rather than a change: a box zero wide with no
+ * border paints no background either way. Saying so is what keeps the Storybook forced-colors
+ * sweep honest — it reads this panel as one that painted a surface and then lost it to the mode,
+ * where in truth there was never anything on screen to lose. */
+.sidebar__panel--offcanvas[data-collapsed="true"] {
+  @apply border-0 bg-transparent;
+
+  inline-size: 0;
+}
+
+.sidebar__panel--none {
+}
+
+/* Inside a drawer the panel is no longer the surface — the dialog is, and it paints, sizes and
+ * slides itself. The panel gives all three up and becomes the column that fills what it was handed.
+ * Last of the panel's modifiers, so it beats the widths above at equal specificity. */
+.sidebar__panel--drawer {
+  @apply size-full border-0 bg-transparent;
+
+  inline-size: auto;
+  transition: none;
+}
+
+/* ==========================================================================
+   Header, content, footer
+   ========================================================================== */
+
+.sidebar__header {
+  @apply flex shrink-0 flex-col gap-2 p-2;
+}
+
+/* The scroll region. `overflow-x-hidden` because the panel narrows around its contents during the
+ * collapse transition, and without it every frame of that transition would flash a scrollbar.
+ *
+ * `scroll-padding` is what makes the fade safe rather than merely pretty. Focus scrolls an item to
+ * the nearest edge, which is exactly where the fade is, so a keyboard user tabbing down the nav
+ * would land on item after item with its focus ring faded out. The padding moves that landing
+ * point clear of the fade. Sized from the same property the fade is, so retuning one moves both. */
+.sidebar__content {
+  @apply flex min-h-0 flex-1 flex-col gap-1 overflow-x-hidden overflow-y-auto p-2;
+
+  scroll-padding-block: var(--scroll-shadow-size, 0px);
+}
+
+/* Two classes to beat one: `scroll-shadow.css` is imported under Layout, long after this file under
+ * Navigation, so `.scroll-shadow--vertical`'s `scrollbar` wins at equal specificity and the nav
+ * would grow a full-width scrollbar the moment it became a shadow container. */
+.sidebar__content.scroll-shadow {
+  @apply scrollbar-thin;
+
+  /* The fade is a `mask-image` over the rows, which in Forced Colors Mode means system-coloured
+   * text dissolving into the background. That mode is chosen by people who need the opposite of
+   * subtlety, so the affordance is dropped rather than softened — the scrollbar still says the
+   * region scrolls. */
+  @media (forced-colors: active) {
+    mask-image: none;
+    -webkit-mask-image: none;
+  }
+}
+
+.sidebar__footer {
+  @apply flex shrink-0 flex-col gap-2 p-2;
+}
+
+/* ==========================================================================
+   Groups
+   ========================================================================== */
+
+.sidebar__group {
+  @apply flex w-full min-w-0 flex-col gap-0.5;
+}
+
+/* Matches `.header`, which is the same muted label above the same kind of list. */
+.sidebar__group-label {
+  @apply w-full truncate px-2 pt-1.5 pb-1 text-start text-xs font-medium text-muted;
+}
+
+/* `sr-only` rather than `hidden`: the label is what tells a screen reader which group an item
+ * belongs to, and a collapsed sidebar is still being read. Taking it out of flow also takes it out
+ * of the group's `gap`, so the icons close up rather than leaving a hole where the label was. */
+.sidebar__group-label[data-collapsed="true"] {
+  @apply sr-only;
+}
+
+/* Spacing only, and no width of its own. `separator.css` is imported under Layout, after this file
+ * under Navigation, so its `w-full` wins at equal specificity and nothing here can take it back —
+ * tailwind-merge cannot help either, because the width lives inside a BEM rule rather than in the
+ * class string. It needs no taking back: the rule runs the width of the content's padding box,
+ * which is exactly the box every item beside it already fills. */
+.sidebar__separator {
+  @apply my-1;
+}
+
+/* ==========================================================================
+   Nav item
+   ========================================================================== */
+
+.sidebar__item {
+  @apply relative flex min-h-9 w-full min-w-0 items-center justify-start gap-2 rounded-component px-2 text-sm font-medium text-foreground no-underline outline-none no-highlight;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    background-color 150ms var(--ease-out),
+    color 150ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  /* Hover state */
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      @apply bg-default;
+    }
+  }
+
+  /* Focus visible state (keyboard focus only) */
+  &:focus-visible,
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Pressed state */
+  &:active,
+  &[data-pressed="true"] {
+    @apply bg-default;
+  }
+
+  /* The current page. Its whole job is to be the one item that stands out, so the mode flattening
+   * the fill onto the page would take exactly the distinction away — hence `forced-selected`,
+   * which is what the rest of the library reaches for to say "this one". */
+  &[data-current="true"] {
+    @apply bg-accent-soft text-accent-soft-foreground;
+
+    @apply forced-selected;
+  }
+
+  /* Disabled state */
+  &[data-disabled="true"] {
+    @apply status-disabled;
+  }
+
+  /* Collapsed to the rail there is only the icon left to place, so it takes the centre and gives
+   * up the padding that was holding a label beside it. */
+  &[data-collapsed="true"] {
+    @apply justify-center px-0;
+  }
+}
+
+.sidebar__item-icon {
+  @apply flex size-4 shrink-0 items-center justify-center;
+
+  svg {
+    @apply size-4;
+  }
+}
+
+.sidebar__item-label {
+  @apply min-w-0 flex-1 truncate text-start;
+}
+
+/* Hidden the same way the group label is, and for the same reason — this *is* the item's
+ * accessible name. */
+.sidebar__item-label[data-collapsed="true"] {
+  @apply sr-only;
+}
+
+.sidebar__item-trailing {
+  @apply flex shrink-0 items-center;
+}
+
+.sidebar__item-trailing[data-collapsed="true"] {
+  @apply hidden;
+}
+
+/* The tooltip's own trigger is `inline-block`, and inside the nav's column that would shrink the
+ * item it wraps down to its contents. An item is a full-width row and has to stay one whether or
+ * not it has a tooltip hanging off it. */
+.sidebar__item-tooltip {
+  @apply block w-full;
+}
+
+/* ==========================================================================
+   Nested items
+   ========================================================================== */
+
+/* Points along the row while the children are shut and turns to point down at them once they are
+ * showing — a quarter turn, not the half turn `disclosure.css` uses.
+ *
+ * The difference is deliberate. A disclosure's indicator sits beside a heading and only has to say
+ * open or shut; this one sits at the end of a nav row and has a direction to mean, so the shut
+ * state points the way the rows will come from. `rtl` turns it the other way for the same reason
+ * it is `ms-auto` and not `ml-auto`. */
+.sidebar__item-indicator {
+  @apply ms-auto size-3.5 shrink-0 -rotate-90 text-muted rtl:rotate-90;
+
+  /**
+   * Transitions
+   */
+  @apply transition duration-250 motion-reduce:transition-none;
+
+  &[data-expanded="true"] {
+    @apply rotate-0;
+  }
+}
+
+/* Nothing left to point at once the sidebar is a rail: the children are not rendered there at all,
+ * and a chevron promising something that never opens is worse than no chevron. */
+.sidebar__item-indicator[data-collapsed="true"] {
+  @apply hidden;
+}
+
+/* The rows under a nav item, indented and gathered by a line down the gutter they share. One border
+ * on the container rather than one per row, so the line runs unbroken from the first child to the
+ * last however many there are. */
+.sidebar__sub-menu {
+  /* The row's own inline padding plus half its icon, which lands the line on the icon's centre.
+   * Written from those two rather than as the number they come to, so retuning either moves the
+   * line with it instead of leaving it a few pixels off. */
+  --sidebar-sub-indent: calc(var(--spacing) * 2 + calc(var(--spacing) * 4) / 2);
+
+  @apply flex min-w-0 flex-col gap-0.5 border-s border-separator;
+
+  margin-inline-start: var(--sidebar-sub-indent);
+  padding-inline-start: calc(var(--spacing) * 2);
+
+  /* A border is one of the few things Forced Colors Mode recolours rather than flattens, so the
+   * line survives on its own — but only while it has a colour left to recolour. */
+  @media (forced-colors: active) {
+    border-inline-start-color: CanvasText;
+  }
+}
+
+/*
+ * The collapse is a JS contract, not a CSS one: `useDisclosurePanel` writes both the height and the
+ * `hidden` attribute, and nothing in any stylesheet ever sets `--disclosure-panel-height`. The
+ * variable keeps that composable's name rather than taking a sidebar one, because the composable is
+ * what fills it in — a `--sidebar-sub-menu-height` here would stay empty forever.
+ *
+ * Held apart from the base because a submenu that is always open has nobody writing the variable,
+ * and `height: var(--disclosure-panel-height)` with nothing behind it would leave the rows sitting
+ * under an `opacity: 0` that never lifts.
+ */
+.sidebar__sub-menu--collapsible {
+  opacity: 0;
+  height: var(--disclosure-panel-height);
+  overflow: clip;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    height 200ms var(--ease-out-quad),
+    opacity 200ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  &[data-expanded="true"] {
+    will-change: height, opacity;
+    opacity: 1;
+  }
+}
+
+/* A child row carries no icon, so it gives up the gap that was holding one and drops to the weight
+ * of what it is — a destination under a heading rather than another heading. */
+.sidebar__item--sub {
+  @apply gap-0 font-normal;
+}
+
+/* ==========================================================================
+   Inset — the content beside the sidebar
+   ========================================================================== */
+
+/* `min-w-0` for the reason `.splitter__panel` documents: without it a wide table inside the inset
+ * sets a floor under the whole shell and the sidebar can never be given its width back. */
+.sidebar__inset {
+  @apply relative flex min-w-0 flex-1 flex-col overflow-hidden bg-background;
+}
+
+/* ==========================================================================
+   Rail — the edge strip
+   ========================================================================== */
+
+/* Built like `.splitter__handle`, down to the `::after`: the flex item is the gutter and paints
+ * nothing, so the line can thicken on hover without the gutter changing width and shifting the
+ * whole page by a pixel. */
+.sidebar__rail {
+  @apply relative z-10 flex shrink-0 grow-0 items-center justify-center self-stretch;
+  @apply bg-transparent outline-none select-none no-highlight;
+
+  /* The gesture is ours; the browser must not also pan or scroll from a drag on this. */
+  @apply touch-none;
+
+  inline-size: var(--sidebar-rail-gutter);
+  cursor: var(--cursor-interactive);
+
+  &::after {
+    @apply pointer-events-none absolute inset-y-0 rounded-sm bg-separator content-[''];
+
+    inline-size: var(--sidebar-rail-gutter);
+
+    /* Flattened to `Canvas` the line stops existing rather than weakening — the whole part *is*
+     * its background, the trap `separator.css` and `splitter.css` both restate their colour for. */
+    @media (forced-colors: active) {
+      background-color: CanvasText;
+    }
+
+    /**
+     * Transitions
+     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+     */
+    transition:
+      background-color 150ms var(--ease-out),
+      inline-size 150ms var(--ease-out);
+    @apply motion-reduce:transition-none;
+  }
+
+  &:hover::after,
+  &[data-hovered="true"]::after,
+  &[data-dragging="true"]::after {
+    @apply bg-accent;
+
+    inline-size: calc(var(--sidebar-rail-gutter) * 2);
+
+    /* `bg-separator` and `bg-accent` both flatten to `Canvas`, so without this the resting and
+     * active states are byte-identical under the mode. */
+    @media (forced-colors: active) {
+      background-color: Highlight;
+    }
+  }
+
+  /* Delayed on the way in and immediate on the way out. A grab area many times the width of the
+   * line is one a pointer crosses on its way to the page, and a rail that flares at every crossing
+   * reads as a twitch rather than an invitation. */
+  &:hover::after,
+  &[data-hovered="true"]::after {
+    transition-delay: var(--sidebar-highlight-delay);
+  }
+
+  /* A drag under way is not in question, so it skips the wait. Last, because a drag usually starts
+   * from a hover and has to win. */
+  &[data-dragging="true"]::after {
+    transition-delay: 0ms;
+  }
+
+  &:focus-visible,
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  &[data-disabled="true"] {
+    @apply status-disabled;
+
+    /* `status-disabled` reaches `color` and `border-color`, and the line is neither. */
+    &::after {
+      @media (forced-colors: active) {
+        background-color: GrayText;
+      }
+    }
+  }
+}
+
+/* Only a rail that resizes says so with the cursor. One that merely toggles is a button, and
+ * `--cursor-interactive` on the base rule already covers it. */
+.sidebar__rail--resizable {
+  @apply cursor-col-resize;
+}
+
+/* The invisible hit area, overhanging the hairline on both sides. A negative `inset` rather than a
+ * transparent border, because Forced Colors Mode turns a transparent border-color opaque and every
+ * rail would render as a solid block. */
+.sidebar__rail-target {
+  @apply absolute inset-0 bg-transparent;
+
+  inset-inline: calc((var(--sidebar-rail-target) - var(--sidebar-rail-gutter)) / -2);
+}
+
+/* ==========================================================================
+   Trigger
+   ========================================================================== */
+
+.sidebar__trigger {
+  @apply inline-flex size-8 shrink-0 items-center justify-center rounded-component bg-transparent text-muted outline-none select-none no-highlight;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    background-color 150ms var(--ease-out),
+    color 150ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  svg {
+    @apply size-4;
+  }
+
+  /* Hover state */
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      @apply bg-default text-foreground;
+    }
+  }
+
+  /* Focus visible state (keyboard focus only) */
+  &:focus-visible,
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Disabled state */
+  &[data-disabled="true"] {
+    @apply status-disabled;
+  }
+}

package/dist/components/skeleton.css

@@ -1,5 +1,14 @@
 .skeleton {
   @apply pointer-events-none relative overflow-hidden rounded-sm bg-surface-tertiary/70;
+
+  /* Forced Colors Mode flattens the fill to `Canvas` - the same colour as the page behind it -
+   * and drops the shimmer gradient outright, so the placeholder disappears entirely. An inset
+   * outline is what is left to say something is loading here, and unlike a border it costs no
+   * layout. */
+  @media (forced-colors: active) {
+    outline: 1px solid GrayText;
+    outline-offset: -1px;
+  }
 }
 
 /* TODO: Skeleton with parent are not visible */

package/dist/components/slider.css

@@ -24,16 +24,37 @@
     @apply relative rounded-xl bg-default;
 
     grid-area: track;
+
+    /* Forced Colors Mode flattens the bar to `Canvas`, the colour of the page behind it, so
+     * the track stops existing - hence the edge. The spacer borders are dealt with per
+     * orientation below, which is where they are set. */
+    @media (forced-colors: active) {
+      background-color: Canvas;
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+    }
   }
 
   .slider__fill {
     @apply pointer-events-none absolute bg-accent;
+
+    /* The only thing showing how far along the value is */
+    @media (forced-colors: active) {
+      background-color: Highlight;
+    }
   }
 
   .slider__thumb {
     /* Flex container for centering pseudo-elements */
     @apply absolute flex cursor-grab items-center justify-center rounded-xl bg-accent no-highlight;
 
+    /* The wrapper is the fill colour in ordinary use, which hides it against the fill. Flattened
+     * to `Canvas` it would punch a hole through the fill instead, so it steps back and lets
+     * `::after` - the knob you actually see - carry the control. */
+    @media (forced-colors: active) {
+      background-color: transparent;
+    }
+
     /**
    * Transitions
    * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
@@ -49,6 +70,15 @@
       @apply relative z-10 rounded-lg bg-accent-foreground text-black shadow-field;
       content: "";
 
+      /* Both the knob's fill and the shadow that separates it from the track are gone under
+       * forced colors. `Canvas` inside a `CanvasText` ring reads against the bare track on one
+       * side and the `Highlight` fill on the other, which no single flat colour manages. */
+      @media (forced-colors: active) {
+        background-color: Canvas;
+        outline: 2px solid CanvasText;
+        outline-offset: -2px;
+      }
+
       /**
        * Transitions
        */
@@ -96,12 +126,29 @@
       /* Thumb width is 1.5rem (24px), so half is 0.75rem (12px) */
       @apply border-x-[0.75rem] border-x-transparent;
 
+      /* A transparent border-color is one of the few things forced colors turns *opaque*, so
+       * without this the two spacers render as solid blocks at either end of the track. */
+      @media (forced-colors: active) {
+        border-inline-start-color: Canvas;
+        border-inline-end-color: Canvas;
+      }
+
       &[data-fill-start="true"] {
         @apply border-s-accent;
+
+        /* Carries the fill past the spacer to the end of the bar, so it has to be the fill
+         * colour rather than the `Canvas` the base rule neutralises the spacers with. */
+        @media (forced-colors: active) {
+          border-inline-start-color: Highlight;
+        }
       }
 
       &[data-fill-end="true"] {
         @apply border-e-accent;
+
+        @media (forced-colors: active) {
+          border-inline-end-color: Highlight;
+        }
       }
     }
 
@@ -150,12 +197,26 @@
       @apply border-y-[0.75rem] border-y-transparent;
       justify-self: center;
 
+      /* Same as the horizontal spacers - opaque without this */
+      @media (forced-colors: active) {
+        border-top-color: Canvas;
+        border-bottom-color: Canvas;
+      }
+
       &[data-fill-start="true"] {
         @apply border-b-accent;
+
+        @media (forced-colors: active) {
+          border-bottom-color: Highlight;
+        }
       }
 
       &[data-fill-end="true"] {
         @apply border-t-accent;
+
+        @media (forced-colors: active) {
+          border-top-color: Highlight;
+        }
       }
     }
 

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

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

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

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

package/dist/components/splitter/index.js

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