@ropav/styles 0.4.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/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 };

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

@@ -0,0 +1,61 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const splitterVariants: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            base: string;
+            handle: string;
+            handleGrip: string;
+        };
+        vertical: {
+            base: string;
+            handle: string;
+            handleGrip: string;
+        };
+    };
+}, {
+    base: string;
+    handle: string;
+    handleGrip: string;
+    handleTarget: string;
+    panel: string;
+}, undefined, {
+    orientation: {
+        horizontal: {
+            base: string;
+            handle: string;
+            handleGrip: string;
+        };
+        vertical: {
+            base: string;
+            handle: string;
+            handleGrip: string;
+        };
+    };
+}, {
+    base: string;
+    handle: string;
+    handleGrip: string;
+    handleTarget: string;
+    panel: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    orientation: {
+        horizontal: {
+            base: string;
+            handle: string;
+            handleGrip: string;
+        };
+        vertical: {
+            base: string;
+            handle: string;
+            handleGrip: string;
+        };
+    };
+}, {
+    base: string;
+    handle: string;
+    handleGrip: string;
+    handleTarget: string;
+    panel: string;
+}>>;
+export type SplitterVariants = VariantProps<typeof splitterVariants>;
+//# sourceMappingURL=splitter.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"splitter.styles.d.ts","sourceRoot":"","sources":["../../../src/components/splitter/splitter.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAgBtD,eAAO,MAAM,gBAAgB;;QAavB,UAAU;YACR,IAAI;YACJ,MAAM;YACN,UAAU;;QAEZ,QAAQ;YACN,IAAI;YACJ,MAAM;YACN,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIhB,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/dist/components/splitter/splitter.styles.js

@@ -0,0 +1,26 @@
+import { tv } from "tailwind-variants";
+//#region src/components/splitter/splitter.styles.ts
+const splitterVariants = tv({
+	defaultVariants: { orientation: "horizontal" },
+	slots: {
+		base: "splitter",
+		handle: "splitter__handle",
+		handleGrip: "splitter__handle-grip",
+		handleTarget: "splitter__handle-target",
+		panel: "splitter__panel"
+	},
+	variants: { orientation: {
+		horizontal: {
+			base: "splitter--horizontal",
+			handle: "splitter__handle--horizontal",
+			handleGrip: "splitter__handle-grip--horizontal"
+		},
+		vertical: {
+			base: "splitter--vertical",
+			handle: "splitter__handle--vertical",
+			handleGrip: "splitter__handle-grip--vertical"
+		}
+	} }
+});
+//#endregion
+export { splitterVariants };