@ropav/styles 0.4.0 → 0.6.0

package/dist/components/sidebar/sidebar.styles.js

@@ -0,0 +1,65 @@
+import { tv } from "tailwind-variants";
+//#region src/components/sidebar/sidebar.styles.ts
+const sidebarVariants = tv({
+	defaultVariants: {
+		collapsible: "icon",
+		side: "left",
+		variant: "sidebar"
+	},
+	slots: {
+		base: "sidebar",
+		content: "sidebar__content",
+		footer: "sidebar__footer",
+		group: "sidebar__group",
+		groupLabel: "sidebar__group-label",
+		header: "sidebar__header",
+		inset: "sidebar__inset",
+		item: "sidebar__item",
+		itemIcon: "sidebar__item-icon",
+		itemIndicator: "sidebar__item-indicator",
+		itemLabel: "sidebar__item-label",
+		itemTooltip: "sidebar__item-tooltip",
+		itemTrailing: "sidebar__item-trailing",
+		panel: "sidebar__panel",
+		rail: "sidebar__rail",
+		railTarget: "sidebar__rail-target",
+		separator: "sidebar__separator",
+		subMenu: "sidebar__sub-menu",
+		trigger: "sidebar__trigger"
+	},
+	variants: {
+		collapsible: {
+			icon: { panel: "sidebar__panel--icon" },
+			none: { panel: "sidebar__panel--none" },
+			offcanvas: { panel: "sidebar__panel--offcanvas" }
+		},
+		inDrawer: { true: { panel: "sidebar__panel--drawer" } },
+		isCollapsible: { true: { subMenu: "sidebar__sub-menu--collapsible" } },
+		isResizable: { true: { rail: "sidebar__rail--resizable" } },
+		isSub: { true: { item: "sidebar__item--sub" } },
+		side: {
+			left: {
+				base: "sidebar--left",
+				panel: "sidebar__panel--left"
+			},
+			right: {
+				base: "sidebar--right",
+				panel: "sidebar__panel--right"
+			}
+		},
+		variant: {
+			floating: {
+				panel: "sidebar__panel--floating",
+				rail: "sidebar__rail--quiet"
+			},
+			inset: {
+				inset: "sidebar__inset--card",
+				panel: "sidebar__panel--bare",
+				rail: "sidebar__rail--quiet"
+			},
+			sidebar: {}
+		}
+	}
+});
+//#endregion
+export { sidebarVariants };

package/dist/components/sidebar.css

@@ -0,0 +1,604 @@
+/* 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 gap a card stands off by and the corner it wears, for the variants where something is
+   * a card: the panel under `--floating`, the inset under `--card`. One pair rather than two,
+   * because a variant makes exactly one of them a card and a second set would be the same two
+   * numbers under a name that is wrong half the time.
+   *
+   * The corner is the one every container in the library wears, so a sidebar's card and a Card
+   * dropped beside it round the same. */
+  --sidebar-card-gap: calc(var(--spacing) * 2);
+  --sidebar-card-radius: min(32px, var(--component-radius));
+  /* 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;
+  /* What the line is painted with, at rest and lit. Separate properties so a caller can retune one
+   * state without flattening the rest onto a single colour. */
+  --sidebar-rail-line: var(--separator);
+  --sidebar-rail-line-hover: var(--accent);
+  --sidebar-rail-line-dragging: var(--sidebar-rail-line-hover);
+
+  @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);
+
+  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;
+}
+
+/* Neither fill nor line: the panel has stopped being a surface, and the inset beside it is the one
+ * that paints. After the side modifiers, whose border this has to beat at equal specificity, and
+ * before `--drawer`, which stays last for the reason given there. */
+.sidebar__panel--bare {
+  @apply border-0 bg-transparent;
+}
+
+/* The panel as a card of its own, standing off the page on every side. A whole border rather than
+ * the side modifiers' single edge, which at equal specificity is enough to overwrite it — no
+ * `border-0` first.
+ *
+ * The margin is what the rail then sits in, and that gap is already dividing the two, which is why
+ * this variant quiets the line: a hairline inside it would be a second answer to the same question.
+ */
+.sidebar__panel--floating {
+  @apply border border-separator/50 shadow-surface;
+
+  margin: var(--sidebar-card-gap);
+  border-radius: var(--sidebar-card-radius);
+}
+
+/* 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;
+  /* And the standing-off a card variant asks for, which on a box no longer there is a gap held
+   * open around nothing — the same fault as the hairline, a little wider. */
+  margin: 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 of that up and becomes the column that fills what it was
+ * handed, the standing-off and the corner of a card variant included: the dialog is already the
+ * shape, and a card inset within it would be a second one drawn inside the first.
+ * Last of the panel's modifiers, so it beats the widths and the card geometry above at equal
+ * specificity. */
+.sidebar__panel--drawer {
+  @apply size-full border-0 bg-transparent;
+
+  inline-size: auto;
+  margin: 0;
+  border-radius: 0;
+  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 no-underline outline-none no-highlight;
+
+  /* The row's fill and label, per state. A caller retuning the resting pair used to flatten the
+   * current page's along with it, since one declaration cannot tell the states apart. */
+  --sidebar-item-bg: transparent;
+  --sidebar-item-bg-hover: var(--state-layer);
+  --sidebar-item-bg-pressed: var(--sidebar-item-bg-hover);
+  --sidebar-item-bg-current: var(--accent-soft);
+  --sidebar-item-fg: var(--foreground);
+  --sidebar-item-fg-current: var(--accent-soft-foreground);
+
+  background-color: var(--sidebar-item-bg);
+  color: var(--sidebar-item-fg);
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  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"] {
+      background-color: var(--sidebar-item-bg-hover);
+    }
+  }
+
+  /* Focus visible state (keyboard focus only) */
+  &:focus-visible,
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Pressed state */
+  &:active,
+  &[data-pressed="true"] {
+    background-color: var(--sidebar-item-bg-pressed);
+  }
+
+  /* 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"] {
+    background-color: var(--sidebar-item-bg-current);
+    color: var(--sidebar-item-fg-current);
+
+    @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;
+
+  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;
+}
+
+/* The page beside a bare panel, and now the thing that paints. `--surface` rather than the base
+ * rule's `--background`: this stopped being the page's background the moment it became a plate
+ * lying on one, which is what `--surface` names.
+ *
+ * The first of this component's modifiers to *add* paint rather than drop it, which is what puts it
+ * in front of the forced-colors sweep as a box with something to lose. Under the mode the fill
+ * flattens onto the page behind it and the shadow goes, leaving the contents sitting loose — so it
+ * takes the same inset outline every container that paints takes, offset inwards so nothing moves
+ * and the radius above still holds it. */
+.sidebar__inset--card {
+  @apply bg-surface text-surface-foreground shadow-surface;
+
+  margin: var(--sidebar-card-gap);
+  border-radius: var(--sidebar-card-radius);
+
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+}
+
+/* ==========================================================================
+   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);
+
+  /* On the host, not in `::after` where the transition lives: the variant reaches a pseudo-element
+   * from its originating element, and appending its condition after `::after` matches nothing. */
+  @apply motion-reduce:transition-none;
+
+  &::after {
+    @apply pointer-events-none absolute inset-y-0 rounded-sm content-[''];
+
+    background-color: var(--sidebar-rail-line);
+    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;
+    }
+
+    transition:
+      background-color 150ms var(--ease-out),
+      inline-size 150ms var(--ease-out);
+  }
+
+  &:hover::after,
+  &[data-hovered="true"]::after,
+  &[data-dragging="true"]::after {
+    inline-size: calc(var(--sidebar-rail-gutter) * 2);
+  }
+
+  /* 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 {
+    background-color: var(--sidebar-rail-line-hover);
+    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 {
+    background-color: var(--sidebar-rail-line-dragging);
+    transition-delay: 0ms;
+  }
+
+  /* Every lit colour flattens to the same `Canvas` as the resting one, so without this the two are
+   * byte-identical under the mode. One block for all of them, after the colours it overrides. */
+  @media (forced-colors: active) {
+    &:hover::after,
+    &[data-hovered="true"]::after,
+    &[data-dragging="true"]::after {
+      background-color: Highlight;
+    }
+  }
+
+  &: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;
+}
+
+/* Nothing left for the line to divide once something else is drawing that division — a card's own
+ * edge, or the gap it stands in — so it goes quiet in every state.
+ *
+ * Re-pointing the properties rather than restating the state rules, the shape `.input--secondary`
+ * takes: a `background-color` here would lose to `.sidebar__rail:hover::after` on specificity, and
+ * restating that set drifts the day a state is added to it.
+ *
+ * All three, and the third is not redundant. `--sidebar-rail-line-dragging` is declared on the
+ * shell as a `var()` of the hover one, so it is substituted there, against the shell's value; only
+ * the resolved colour reaches this far. Re-pointing hover here arrives too late for it, and a drag
+ * would still flare.
+ *
+ * The line comes back under Forced Colors Mode, on purpose: those blocks paint system keywords,
+ * which are not a component's to quiet. */
+.sidebar__rail--quiet {
+  --sidebar-rail-line: transparent;
+  --sidebar-rail-line-hover: transparent;
+  --sidebar-rail-line-dragging: transparent;
+}
+
+/* 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 outline-none select-none no-highlight;
+
+  --sidebar-trigger-bg: transparent;
+  --sidebar-trigger-bg-hover: var(--state-layer);
+  --sidebar-trigger-fg: var(--muted);
+  --sidebar-trigger-fg-hover: var(--foreground);
+
+  background-color: var(--sidebar-trigger-bg);
+  color: var(--sidebar-trigger-fg);
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  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"] {
+      background-color: var(--sidebar-trigger-bg-hover);
+      color: var(--sidebar-trigger-fg-hover);
+    }
+  }
+
+  /* Focus visible state (keyboard focus only) */
+  &:focus-visible,
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Disabled state */
+  &[data-disabled="true"] {
+    @apply status-disabled;
+  }
+}