@sewadah/selaras 0.1.1

package/dist/runtime/theme/collapsible.d.ts

@@ -0,0 +1,95 @@
+export declare const collapsibleTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            trigger: string;
+            content: string;
+        };
+        md: {
+            trigger: string;
+            content: string;
+        };
+        lg: {
+            trigger: string;
+            content: string;
+        };
+    };
+    direction: {
+        down: {
+            root: string;
+        };
+        up: {
+            root: string;
+            chevron: string;
+            contentInner: string;
+        };
+    };
+}, {
+    root: string;
+    trigger: string;
+    chevron: string;
+    content: string;
+    contentInner: string;
+}, undefined, {
+    size: {
+        sm: {
+            trigger: string;
+            content: string;
+        };
+        md: {
+            trigger: string;
+            content: string;
+        };
+        lg: {
+            trigger: string;
+            content: string;
+        };
+    };
+    direction: {
+        down: {
+            root: string;
+        };
+        up: {
+            root: string;
+            chevron: string;
+            contentInner: string;
+        };
+    };
+}, {
+    root: string;
+    trigger: string;
+    chevron: string;
+    content: string;
+    contentInner: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            trigger: string;
+            content: string;
+        };
+        md: {
+            trigger: string;
+            content: string;
+        };
+        lg: {
+            trigger: string;
+            content: string;
+        };
+    };
+    direction: {
+        down: {
+            root: string;
+        };
+        up: {
+            root: string;
+            chevron: string;
+            contentInner: string;
+        };
+    };
+}, {
+    root: string;
+    trigger: string;
+    chevron: string;
+    content: string;
+    contentInner: string;
+}>>;
+export type CollapsibleThemeSlots = keyof (typeof collapsibleTheme)['slots'];

package/dist/runtime/theme/collapsible.js

@@ -0,0 +1,46 @@
+import { tv } from "tailwind-variants";
+export const collapsibleTheme = tv({
+  slots: {
+    root: "w-full",
+    trigger: "group flex w-full items-center justify-between gap-2 text-start font-medium text-[var(--ui-text)] transition-colors hover:text-[var(--ui-primary)] disabled:opacity-50 disabled:pointer-events-none",
+    chevron: "size-4 shrink-0 text-[var(--ui-text-muted)] transition-transform group-data-[state=open]:rotate-180",
+    // overflow-hidden clips the panel to its own animated height (without
+    // it, content would visibly spill out mid-animation); the two
+    // data-state keyframes interpolate between 0 and Reka's own measured
+    // --reka-collapsible-content-height, so this never hardcodes a height.
+    content: "overflow-hidden text-[var(--ui-text-muted)] data-[state=open]:animate-[selaras-collapsible-down_200ms_ease-out] data-[state=closed]:animate-[selaras-collapsible-up_200ms_ease-out]",
+    // A separate slot (not `content` itself) for the padding - the padding
+    // must NOT be part of the height being animated (animating a 0-to-N
+    // height with vertical padding baked in either clips the last few
+    // pixels of padding at 0, or overshoots the real content height), so
+    // it moves one level in.
+    contentInner: "pt-2"
+  },
+  variants: {
+    size: {
+      sm: { trigger: "text-sm", content: "text-sm" },
+      md: { trigger: "text-sm", content: "text-sm" },
+      lg: { trigger: "text-base", content: "text-base" }
+    },
+    // Reka always renders the trigger before the content in the DOM -
+    // that never changes. `flex-col-reverse` only flips the *visual*
+    // order, so `up` still reveals below the same trigger element in
+    // the accessibility tree/tab order, it just displays above it.
+    direction: {
+      down: { root: "flex flex-col" },
+      up: {
+        root: "flex flex-col-reverse",
+        // Base chevron points down at rest, rotates to point up once
+        // open - backwards for `up`, where content reveals upward.
+        // Flipped here so it still points toward where the content
+        // will appear: up at rest, back down once open.
+        chevron: "rotate-180 group-data-[state=open]:rotate-0",
+        contentInner: "pt-0 pb-2"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    direction: "down"
+  }
+});

package/dist/runtime/theme/color-picker.d.ts

@@ -0,0 +1,152 @@
+export declare const colorPickerTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            trigger: string;
+        };
+        md: {
+            trigger: string;
+        };
+        lg: {
+            trigger: string;
+        };
+    };
+    color: {
+        primary: {
+            trigger: string;
+        };
+        neutral: {
+            trigger: string;
+        };
+        secondary: {
+            trigger: string;
+        };
+        success: {
+            trigger: string;
+        };
+        danger: {
+            trigger: string;
+        };
+        info: {
+            trigger: string;
+        };
+        warning: {
+            trigger: string;
+        };
+    };
+}, {
+    trigger: string;
+    triggerSwatch: string;
+    triggerValue: string;
+    content: string;
+    mobileContent: string;
+    area: string;
+    thumb: string;
+    sliderRoot: string;
+    track: string;
+    field: string;
+    swatchList: string;
+    swatch: string;
+    swatchFill: string;
+    swatchIndicator: string;
+}, undefined, {
+    size: {
+        sm: {
+            trigger: string;
+        };
+        md: {
+            trigger: string;
+        };
+        lg: {
+            trigger: string;
+        };
+    };
+    color: {
+        primary: {
+            trigger: string;
+        };
+        neutral: {
+            trigger: string;
+        };
+        secondary: {
+            trigger: string;
+        };
+        success: {
+            trigger: string;
+        };
+        danger: {
+            trigger: string;
+        };
+        info: {
+            trigger: string;
+        };
+        warning: {
+            trigger: string;
+        };
+    };
+}, {
+    trigger: string;
+    triggerSwatch: string;
+    triggerValue: string;
+    content: string;
+    mobileContent: string;
+    area: string;
+    thumb: string;
+    sliderRoot: string;
+    track: string;
+    field: string;
+    swatchList: string;
+    swatch: string;
+    swatchFill: string;
+    swatchIndicator: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            trigger: string;
+        };
+        md: {
+            trigger: string;
+        };
+        lg: {
+            trigger: string;
+        };
+    };
+    color: {
+        primary: {
+            trigger: string;
+        };
+        neutral: {
+            trigger: string;
+        };
+        secondary: {
+            trigger: string;
+        };
+        success: {
+            trigger: string;
+        };
+        danger: {
+            trigger: string;
+        };
+        info: {
+            trigger: string;
+        };
+        warning: {
+            trigger: string;
+        };
+    };
+}, {
+    trigger: string;
+    triggerSwatch: string;
+    triggerValue: string;
+    content: string;
+    mobileContent: string;
+    area: string;
+    thumb: string;
+    sliderRoot: string;
+    track: string;
+    field: string;
+    swatchList: string;
+    swatch: string;
+    swatchFill: string;
+    swatchIndicator: string;
+}>>;
+export type ColorPickerThemeSlots = keyof (typeof colorPickerTheme)['slots'];

package/dist/runtime/theme/color-picker.js

@@ -0,0 +1,83 @@
+import { tv } from "tailwind-variants";
+export const colorPickerTheme = tv({
+  slots: {
+    // Same chrome as Select's own trigger (select.ts) - both are a form
+    // field that opens a popover, so they share the exact ring/hover/
+    // focus/disabled treatment rather than reinventing it here.
+    trigger: "inline-flex w-full min-h-10 items-center gap-2 rounded-[var(--ui-radius-md)] bg-[var(--ui-bg)] px-3 py-1.5 text-sm ring-1 ring-inset ring-[var(--ui-border)] outline-none transition-[color,background-color,box-shadow] not-focus:not-data-[state=open]:hover:ring-[var(--ui-border-hover)] hover:bg-[var(--ui-bg-elevated)] focus:ring-2 data-[state=open]:ring-2 disabled:opacity-50 disabled:pointer-events-none",
+    // Painted via ColorSwatch's own exposed --reka-color-swatch-color
+    // custom property - ColorSwatch.js applies no background of its own,
+    // only exposes that var, so every consumer of it (this trigger swatch
+    // and each preset item's own swatch below) pulls color from the same
+    // arbitrary background color utility, spelled out fully below rather
+    // than abbreviated here. Tailwind's own class scanner treats bracketed
+    // text like that as a candidate utility even inside a plain comment,
+    // so an abbreviated, non-CSS placeholder in place of the real value
+    // gets a real attempt at CSS generation and chokes on it - confirmed:
+    // that's exactly what produced a real build warning once.
+    triggerSwatch: "size-5 shrink-0 rounded-[var(--ui-radius-sm)] bg-[var(--reka-color-swatch-color)] ring-1 ring-inset ring-black/10",
+    triggerValue: "flex-1 truncate text-start font-mono text-[var(--ui-text)]",
+    content: "z-[var(--ui-z-dropdown)] w-64 space-y-3 rounded-[var(--ui-radius-md)] bg-[var(--ui-bg)] p-3 shadow-[var(--ui-shadow-md)] ring-1 ring-[var(--ui-border)] data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+    // The `mobileModal` path's own content wrapper - none of `content`'s
+    // own popover chrome (width/background/shadow/ring/rounded/animate)
+    // applies here, since Modal's own card already provides that surface;
+    // this only needs this picker's own internal spacing/padding, same
+    // reasoning as Select's own mobileContent (select.ts).
+    mobileContent: "w-full space-y-3 p-4",
+    area: "relative h-40 w-full overflow-hidden rounded-[var(--ui-radius-sm)] cursor-crosshair",
+    // Shared by the area thumb and both slider thumbs below - all three
+    // are the same plain white ring-bordered circle sitting on top of a
+    // color surface Reka itself paints (the area's own gradient, each
+    // slider track's own gradient) - a colored ring here would fight
+    // that surface instead of marking a position on it, the same reason
+    // Slider.vue's own thumb stays neutral against its colored range.
+    thumb: "block size-4 shrink-0 rounded-full border-2 border-white shadow-[var(--ui-shadow-sm)] ring-1 ring-[var(--ui-border)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]",
+    // ColorSliderRoot itself (bound onto directly, no dedicated slot of
+    // its own since nothing else needs to reach it) - Reka's own default
+    // `as` for it is a bare inline `span` (confirmed in Slider/SliderRoot.js,
+    // which this wraps), so it needs `block` before `w-full` on the track
+    // below means anything (`width` doesn't apply to non-replaced inline
+    // boxes at all, not just "shrinks to content" - a span child of this
+    // stayed effectively zero-width without it).
+    sliderRoot: "block w-full",
+    // Shared by the hue and alpha sliders - both are a plain rounded-full
+    // track whose gradient comes from Reka's own injected inline style
+    // (ColorSliderTrack.js), not this class. Same inline-`span`-by-default
+    // reasoning as sliderRoot above applies here too - `block` first.
+    track: "relative block h-3 w-full cursor-pointer rounded-full ring-1 ring-inset ring-black/10",
+    field: "w-full rounded-[var(--ui-radius-sm)] bg-[var(--ui-bg)] px-2 py-1.5 text-sm font-mono text-[var(--ui-text)] ring-1 ring-inset ring-[var(--ui-border)] outline-none transition-[color,background-color,box-shadow] not-focus:hover:ring-[var(--ui-border-hover)] focus:ring-2 focus:ring-[var(--ui-primary)]",
+    swatchList: "flex flex-wrap gap-1.5",
+    swatch: "relative size-6 shrink-0 rounded-[var(--ui-radius-sm)] ring-1 ring-inset ring-black/10 cursor-pointer data-[highlighted]:ring-2 data-[highlighted]:ring-[var(--ui-border-hover)] data-[state=checked]:ring-2 data-[state=checked]:ring-[var(--ui-primary)] data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
+    // The preset item's own color fill - same --reka-color-swatch-color
+    // var as triggerSwatch, sized to fill its parent `swatch` item
+    // (rounded-[inherit] so it doesn't poke past that item's own corners).
+    swatchFill: "absolute inset-0 size-full rounded-[inherit] bg-[var(--reka-color-swatch-color)]",
+    // Centered over the swatch (relative) it belongs to - only rendered
+    // once selected (Reka's own ListboxItemIndicator gates that).
+    swatchIndicator: "absolute inset-0 flex items-center justify-center text-white mix-blend-difference"
+  },
+  variants: {
+    // Same height steps as Select's own trigger (select.ts) - the two
+    // are the same "form field that opens a popover" shape.
+    size: {
+      sm: { trigger: "min-h-8 text-sm" },
+      md: { trigger: "min-h-10" },
+      lg: { trigger: "min-h-11 text-base" }
+    },
+    // Focus-ring color only, same scope as Select's own `color` variant -
+    // the resting ring stays --ui-border regardless.
+    color: {
+      primary: { trigger: "focus:ring-[var(--ui-primary)] data-[state=open]:ring-[var(--ui-primary)]" },
+      neutral: { trigger: "focus:ring-[var(--ui-bg-inverted)] data-[state=open]:ring-[var(--ui-bg-inverted)]" },
+      secondary: { trigger: "focus:ring-[var(--ui-secondary)] data-[state=open]:ring-[var(--ui-secondary)]" },
+      success: { trigger: "focus:ring-[var(--ui-success)] data-[state=open]:ring-[var(--ui-success)]" },
+      danger: { trigger: "focus:ring-[var(--ui-danger)] data-[state=open]:ring-[var(--ui-danger)]" },
+      info: { trigger: "focus:ring-[var(--ui-info)] data-[state=open]:ring-[var(--ui-info)]" },
+      warning: { trigger: "focus:ring-[var(--ui-warning)] data-[state=open]:ring-[var(--ui-warning)]" }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    color: "primary"
+  }
+});

package/dist/runtime/theme/command-palette.d.ts

@@ -0,0 +1,110 @@
+export declare const commandPaletteTheme: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            item?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            list?: import("tailwind-variants").ClassValue;
+            overlay?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
+            group?: import("tailwind-variants").ClassValue;
+            empty?: import("tailwind-variants").ClassValue;
+            searchIcon?: import("tailwind-variants").ClassValue;
+            groupLabel?: import("tailwind-variants").ClassValue;
+            itemIcon?: import("tailwind-variants").ClassValue;
+            itemLabel?: import("tailwind-variants").ClassValue;
+            itemShortcut?: import("tailwind-variants").ClassValue;
+            footerKey?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            item?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            list?: import("tailwind-variants").ClassValue;
+            overlay?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
+            group?: import("tailwind-variants").ClassValue;
+            empty?: import("tailwind-variants").ClassValue;
+            searchIcon?: import("tailwind-variants").ClassValue;
+            groupLabel?: import("tailwind-variants").ClassValue;
+            itemIcon?: import("tailwind-variants").ClassValue;
+            itemLabel?: import("tailwind-variants").ClassValue;
+            itemShortcut?: import("tailwind-variants").ClassValue;
+            footerKey?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    overlay: string;
+    content: string;
+    header: string;
+    searchIcon: string;
+    input: string;
+    list: string;
+    group: string;
+    groupLabel: string;
+    item: string;
+    itemIcon: string;
+    itemLabel: string;
+    itemShortcut: string;
+    empty: string;
+    footer: string;
+    footerKey: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            item?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            list?: import("tailwind-variants").ClassValue;
+            overlay?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
+            group?: import("tailwind-variants").ClassValue;
+            empty?: import("tailwind-variants").ClassValue;
+            searchIcon?: import("tailwind-variants").ClassValue;
+            groupLabel?: import("tailwind-variants").ClassValue;
+            itemIcon?: import("tailwind-variants").ClassValue;
+            itemLabel?: import("tailwind-variants").ClassValue;
+            itemShortcut?: import("tailwind-variants").ClassValue;
+            footerKey?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    overlay: string;
+    content: string;
+    header: string;
+    searchIcon: string;
+    input: string;
+    list: string;
+    group: string;
+    groupLabel: string;
+    item: string;
+    itemIcon: string;
+    itemLabel: string;
+    itemShortcut: string;
+    empty: string;
+    footer: string;
+    footerKey: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+    overlay: string;
+    content: string;
+    header: string;
+    searchIcon: string;
+    input: string;
+    list: string;
+    group: string;
+    groupLabel: string;
+    item: string;
+    itemIcon: string;
+    itemLabel: string;
+    itemShortcut: string;
+    empty: string;
+    footer: string;
+    footerKey: string;
+}>>;
+export type CommandPaletteThemeSlots = keyof (typeof commandPaletteTheme)['slots'];

package/dist/runtime/theme/command-palette.js

@@ -0,0 +1,23 @@
+import { tv } from "tailwind-variants";
+export const commandPaletteTheme = tv({
+  slots: {
+    overlay: "fixed inset-0 z-[var(--ui-z-modal-overlay)] bg-black/50 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+    // Top-anchored (not vertically centered like Modal) - the conventional
+    // command-palette position, and it means the dialog doesn't visibly
+    // jump up and down as the result list grows/shrinks while typing.
+    content: "fixed left-1/2 top-24 z-[var(--ui-z-modal)] flex max-h-[min(28rem,calc(100vh-8rem))] w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 flex-col overflow-hidden rounded-[var(--ui-radius-lg)] bg-[var(--ui-bg)] shadow-[var(--ui-shadow-lg)] focus:outline-none data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+    header: "flex shrink-0 items-center gap-2 border-b border-[var(--ui-border)] px-4",
+    searchIcon: "size-4.5 shrink-0 text-[var(--ui-text-muted)]",
+    input: "h-12 flex-1 bg-transparent text-sm text-[var(--ui-text)] placeholder:text-[var(--ui-text-muted)] focus:outline-none",
+    list: "flex-1 overflow-y-auto p-1",
+    group: "py-1",
+    groupLabel: "px-2 py-1 text-xs font-medium text-[var(--ui-text-muted)]",
+    item: "flex items-center gap-2 rounded-[var(--ui-radius-sm)] px-2 py-2 text-sm text-[var(--ui-text)] cursor-pointer select-none outline-none data-[highlighted]:bg-[var(--ui-bg-elevated)] data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
+    itemIcon: "size-4 shrink-0 text-[var(--ui-text-muted)]",
+    itemLabel: "flex-1",
+    itemShortcut: "flex shrink-0 items-center gap-1",
+    empty: "p-6 text-center text-sm text-[var(--ui-text-muted)]",
+    footer: "flex shrink-0 items-center gap-3 border-t border-[var(--ui-border)] px-3 py-2 text-xs text-[var(--ui-text-muted)]",
+    footerKey: "flex items-center gap-1"
+  }
+});

package/dist/runtime/theme/container.d.ts

@@ -0,0 +1,62 @@
+export declare const containerTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+        full: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, undefined, {
+    size: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+        full: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+        full: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}>>;
+export type ContainerThemeSlots = keyof (typeof containerTheme)['slots'];

package/dist/runtime/theme/container.js

@@ -0,0 +1,18 @@
+import { tv } from "tailwind-variants";
+export const containerTheme = tv({
+  slots: {
+    base: "w-full mx-auto px-4 sm:px-6 lg:px-8"
+  },
+  variants: {
+    size: {
+      sm: { base: "max-w-3xl" },
+      md: { base: "max-w-5xl" },
+      lg: { base: "max-w-6xl" },
+      xl: { base: "max-w-7xl" },
+      full: { base: "max-w-none" }
+    }
+  },
+  defaultVariants: {
+    size: "lg"
+  }
+});

package/dist/runtime/theme/content-navigation.d.ts

@@ -0,0 +1,47 @@
+export declare const contentNavigationTheme: import("tailwind-variants").TVReturnType<{
+    isNested: {
+        true: {
+            item: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    link: string;
+    linkActive: string;
+    trigger: string;
+    icon: string;
+    chevron: string;
+    content: string;
+}, undefined, {
+    isNested: {
+        true: {
+            item: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    link: string;
+    linkActive: string;
+    trigger: string;
+    icon: string;
+    chevron: string;
+    content: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    isNested: {
+        true: {
+            item: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    link: string;
+    linkActive: string;
+    trigger: string;
+    icon: string;
+    chevron: string;
+    content: string;
+}>>;
+export type ContentNavigationThemeSlots = keyof (typeof contentNavigationTheme)['slots'];

package/dist/runtime/theme/content-navigation.js

@@ -0,0 +1,38 @@
+import { tv } from "tailwind-variants";
+export const contentNavigationTheme = tv({
+  slots: {
+    root: "flex flex-col gap-0.5 text-sm",
+    item: "flex flex-col",
+    // py-2.5 (+ text-sm's 20px line-height) lands close to the 44px touch
+    // target guideline without doubling the sidebar's height the way a
+    // literal py-3 would across ~40 entries.
+    link: "flex items-center gap-2 rounded-[var(--ui-radius-sm)] px-2 py-2.5 text-[var(--ui-text-muted)] transition-colors hover:bg-[var(--ui-bg-elevated)] hover:text-[var(--ui-text)]",
+    linkActive: "flex items-center gap-2 rounded-[var(--ui-radius-sm)] bg-[var(--ui-primary-soft)] px-2 py-2.5 text-[var(--ui-primary)]",
+    trigger: "group flex w-full items-center justify-between gap-2 rounded-[var(--ui-radius-sm)] px-2 py-2.5 text-start font-medium text-[var(--ui-text)] transition-colors hover:bg-[var(--ui-bg-elevated)]",
+    // A separate slot from label - this styles the icon a link/group-header
+    // shows before its title, not the title text itself.
+    icon: "size-4 shrink-0 text-[var(--ui-text-muted)]",
+    chevron: "size-4 shrink-0 text-[var(--ui-text-muted)] transition-transform group-data-[state=open]:rotate-180",
+    // `ps-4` (16px) reserves the gutter each child's own trunk segment
+    // and elbow (on the `item` slot above) reach back into - the trunk
+    // line itself has no presence here at all, see theme.css's own
+    // `.selaras-nav-elbow` comment for why it lives per-item instead.
+    content: "ms-3 flex flex-col gap-0.5 ps-4"
+  },
+  variants: {
+    // ContentNavigation.vue recurses into itself for every nested group,
+    // reusing this exact same `item` slot at every depth - unlike
+    // NavigationMenu's own `item`/`childItem` (genuinely different slot
+    // names for top-level vs nested), there's only one slot name here,
+    // so root-level entries and nested ones need telling apart some
+    // other way. `isNested` (see ContentToc.vue's own prop of the same
+    // name for the established precedent) gates the tree-connector rail
+    // onto nested entries only - a root-level entry has no parent trunk
+    // to its left to branch off of, so giving it the rail drew a
+    // disconnected elbow floating next to it with nothing feeding into
+    // it from above.
+    isNested: {
+      true: { item: "selaras-nav-elbow selaras-nav-elbow--content-navigation" }
+    }
+  }
+});