@shortwind/catalog 0.1.0-beta.13 → 0.1.0-beta.14

package/dist/registry/menu/CHANGELOG.md

@@ -0,0 +1,5 @@
+# menu
+
+## 0.0.1
+
+Initial release.

package/dist/registry/menu.css

@@ -0,0 +1,30 @@
+/* shortwind: menu@0.0.1 sha:c95d3650d92a2fa6 */
+
+/* @guide
+   A dropdown/actions menu (the "…" button's popover). @menu is the panel,
+   @menu-item is a row, @menu-trigger is the control that opens it, and
+   @menu-separator divides groups. The highlighted/active row is data-driven —
+   set data-active on the item rather than swapping recipe names
+   (`<button class="@menu-item" data-active>`); data-disabled dims + disables a
+   row. @menu only styles the panel; pair it with your own positioning.
+*/
+
+/* Dropdown menu panel. */
+@recipe menu {
+  min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md
+}
+
+/* A single menu row. Highlight with data-active, dim with data-disabled. */
+@recipe menu-item {
+  relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-foreground outline-none transition-colors hover:bg-muted focus-visible:bg-muted data-[active]:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50
+}
+
+/* The control that opens the menu. */
+@recipe menu-trigger {
+  inline-flex items-center justify-center gap-1 outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring
+}
+
+/* Divider between menu groups. */
+@recipe menu-separator {
+  -mx-1 my-1 h-px bg-border
+}

package/dist/registry/menu@0.0.1.css

@@ -0,0 +1,30 @@
+/* shortwind: menu@0.0.1 sha:c95d3650d92a2fa6 */
+
+/* @guide
+   A dropdown/actions menu (the "…" button's popover). @menu is the panel,
+   @menu-item is a row, @menu-trigger is the control that opens it, and
+   @menu-separator divides groups. The highlighted/active row is data-driven —
+   set data-active on the item rather than swapping recipe names
+   (`<button class="@menu-item" data-active>`); data-disabled dims + disables a
+   row. @menu only styles the panel; pair it with your own positioning.
+*/
+
+/* Dropdown menu panel. */
+@recipe menu {
+  min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md
+}
+
+/* A single menu row. Highlight with data-active, dim with data-disabled. */
+@recipe menu-item {
+  relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-foreground outline-none transition-colors hover:bg-muted focus-visible:bg-muted data-[active]:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50
+}
+
+/* The control that opens the menu. */
+@recipe menu-trigger {
+  inline-flex items-center justify-center gap-1 outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring
+}
+
+/* Divider between menu groups. */
+@recipe menu-separator {
+  -mx-1 my-1 h-px bg-border
+}

package/dist/registry/navigation/CHANGELOG.md

@@ -1,5 +1,5 @@
 # navigation
 
-## 0.0.1
+## 0.0.2
 
 Initial release.

package/dist/registry/navigation.css

@@ -1,10 +1,12 @@
-/* shortwind: navigation@0.0.1 sha:73150057219b648a */
+/* shortwind: navigation@0.0.2 sha:2bb73370d69e0f65 */
 
 /* @guide
-   @nav is the container; links are @nav-link with @nav-link-active for the
-   current page. Tabs mirror that pair: @tab and @tab-active. Use @breadcrumb
-   for trail navigation. Active and inactive are separate recipes — swap the
-   whole class rather than combining them.
+   @navigation is the container; links are @navigation-link with
+   @navigation-link-active for the current page. Tabs mirror that pair: @tab and
+   @tab-active. Use @breadcrumb for trail navigation. Active and inactive are
+   separate recipes — swap the whole class rather than combining them. The short
+   @nav / @nav-link forms are aliases that expand identically; the full-word
+   @navigation-* names are canonical — prefer them.
 */
 
 /* Top-level nav container. */
@@ -36,3 +38,14 @@
 @recipe tab-active {
   inline-flex items-center gap-2 border-b-2 border-primary px-3 py-2 text-sm font-medium text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring
 }
+
+/* Full-word canonical aliases — expand identically to the @nav-* short forms. */
+
+/* Top-level nav container (alias of @nav). */
+@recipe navigation { @nav }
+
+/* Inactive nav link (alias of @nav-link). */
+@recipe navigation-link { @nav-link }
+
+/* Active nav link (alias of @nav-link-active). */
+@recipe navigation-link-active { @nav-link-active }

package/dist/registry/{navigation@0.0.1.css → navigation@0.0.2.css}

@@ -1,10 +1,12 @@
-/* shortwind: navigation@0.0.1 sha:73150057219b648a */
+/* shortwind: navigation@0.0.2 sha:2bb73370d69e0f65 */
 
 /* @guide
-   @nav is the container; links are @nav-link with @nav-link-active for the
-   current page. Tabs mirror that pair: @tab and @tab-active. Use @breadcrumb
-   for trail navigation. Active and inactive are separate recipes — swap the
-   whole class rather than combining them.
+   @navigation is the container; links are @navigation-link with
+   @navigation-link-active for the current page. Tabs mirror that pair: @tab and
+   @tab-active. Use @breadcrumb for trail navigation. Active and inactive are
+   separate recipes — swap the whole class rather than combining them. The short
+   @nav / @nav-link forms are aliases that expand identically; the full-word
+   @navigation-* names are canonical — prefer them.
 */
 
 /* Top-level nav container. */
@@ -36,3 +38,14 @@
 @recipe tab-active {
   inline-flex items-center gap-2 border-b-2 border-primary px-3 py-2 text-sm font-medium text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring
 }
+
+/* Full-word canonical aliases — expand identically to the @nav-* short forms. */
+
+/* Top-level nav container (alias of @nav). */
+@recipe navigation { @nav }
+
+/* Inactive nav link (alias of @nav-link). */
+@recipe navigation-link { @nav-link }
+
+/* Active nav link (alias of @nav-link-active). */
+@recipe navigation-link-active { @nav-link-active }

package/dist/registry/presets.json

@@ -1,6 +1,6 @@
 {
   "starter": ["card", "button", "layout", "text", "form"],
-  "app": ["card", "button", "layout", "text", "form", "badge", "table", "dialog", "list", "navigation", "feedback", "tooltip"],
+  "app": ["card", "button", "layout", "text", "form", "badge", "table", "dialog", "list", "navigation", "feedback", "tooltip", "menu", "sheet", "stat", "segmented", "switch"],
   "content": ["card", "button", "layout", "text", "form", "badge", "code", "list", "media", "empty"],
   "all": "*"
 }

package/dist/registry/recipes/badge.css

@@ -1,10 +1,18 @@
-/* shortwind: badge@0.0.1 sha:8548b9a7305a0a59 */
+/* shortwind: badge@0.0.2 sha:07c6ab5a8deb77e3 */
 
 /* @guide
-   @badge is the neutral default; tone variants @badge-success/warning/danger/
-   info carry their own color; @badge-outline is unfilled. One tone per badge.
-   @badge-base is a color-less shell for building custom tones — not for direct
-   use.
+   @badge is the default. Its color is DATA-DRIVEN: it reads the --tone-bg /
+   --tone-fg CSS variables, so set the tone from your data with a data-tone
+   attribute instead of picking a different recipe name —
+   `<span className="@badge" data-tone={severity}>`. Define your tones once in
+   CSS (init scaffolds neutral/success/warning/danger/info; add your own
+   `[data-tone="sev1"] { --tone-bg: …; --tone-fg: … }`). With no data-tone it
+   falls back to the neutral muted look, identical to before.
+
+   The static @badge-success/warning/danger/info variants still exist for when
+   the tone is known at author time; reach for data-tone when it's chosen from
+   data. @badge-outline is unfilled. @badge-base is a color-less shell for
+   building custom tones — not for direct use.
 */
 
 /* Badge shell — shape, sizing, focus ring. No bg/text/border color so
@@ -13,9 +21,11 @@
   inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
 }
 
-/* Default neutral badge. */
+/* Default badge — tone-aware. Reads --tone-bg/--tone-fg (set via data-tone),
+   falling back to the neutral muted tokens so it renders unchanged when no
+   tone is set. */
 @recipe badge {
-  inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground
+  inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium bg-[var(--tone-bg,var(--muted))] text-[var(--tone-fg,var(--muted-foreground))]
 }
 
 /* Success tone badge. */

package/dist/registry/recipes/button.css

@@ -1,11 +1,13 @@
-/* shortwind: button@0.0.1 sha:777fa510c4ab4aeb */
+/* shortwind: button@0.0.2 sha:b0b08652cd757b90 */
 
 /* @guide
-   Name order is @btn-<intent>[-<size>]: intent first (primary/secondary/ghost/
-   danger/outline), size second (sm/lg; omit for default). One intent per
-   button — never combine @btn-primary with @btn-danger. @btn-ghost is text-only,
-   @btn-outline is bordered with no fill, @btn-icon is a square icon button.
-   @btn-base is the shared shell; don't use it on its own.
+   Name order is @button-<intent>[-<size>]: intent first (primary/secondary/
+   ghost/danger/outline), size second (sm/lg; omit for default). One intent per
+   button — never combine @button-primary with @button-danger. @button-ghost is
+   text-only, @button-outline is bordered with no fill, @button-icon is a square
+   icon button. @button-base is the shared shell; don't use it on its own.
+   The short @btn-<intent> forms are aliases that expand identically; the
+   full-word @button-* names are canonical — prefer them.
 */
 
 /* Shared button base — sizing, focus ring, disabled state. */
@@ -72,3 +74,44 @@
 @recipe btn-icon {
   inline-flex h-9 w-9 items-center justify-center rounded-md text-foreground transition-colors hover:bg-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50
 }
+
+/* Full-word canonical aliases — expand identically to the @btn-* short forms. */
+
+/* Shared button shell (alias of @btn-base). */
+@recipe button-base { @btn-base }
+
+/* Primary call-to-action button (alias of @btn-primary). */
+@recipe button-primary { @btn-primary }
+
+/* Small primary button (alias of @btn-primary-sm). */
+@recipe button-primary-sm { @btn-primary-sm }
+
+/* Large primary button (alias of @btn-primary-lg). */
+@recipe button-primary-lg { @btn-primary-lg }
+
+/* Secondary button (alias of @btn-secondary). */
+@recipe button-secondary { @btn-secondary }
+
+/* Small secondary button (alias of @btn-secondary-sm). */
+@recipe button-secondary-sm { @btn-secondary-sm }
+
+/* Large secondary button (alias of @btn-secondary-lg). */
+@recipe button-secondary-lg { @btn-secondary-lg }
+
+/* Ghost button (alias of @btn-ghost). */
+@recipe button-ghost { @btn-ghost }
+
+/* Small ghost button (alias of @btn-ghost-sm). */
+@recipe button-ghost-sm { @btn-ghost-sm }
+
+/* Large ghost button (alias of @btn-ghost-lg). */
+@recipe button-ghost-lg { @btn-ghost-lg }
+
+/* Destructive button (alias of @btn-danger). */
+@recipe button-danger { @btn-danger }
+
+/* Outline button (alias of @btn-outline). */
+@recipe button-outline { @btn-outline }
+
+/* Square icon-only button (alias of @btn-icon). */
+@recipe button-icon { @btn-icon }

package/dist/registry/recipes/layout.css

@@ -1,14 +1,18 @@
-/* shortwind: layout@0.0.1 sha:48a2a7b6e1a5d7ad */
+/* shortwind: layout@0.0.2 sha:48025daeec83041a */
 
 /* @guide
    Composition primitives. @stack-* stacks children vertically (flex-col);
    @row* lays them out horizontally (flex-row). Choose the gap with the size
-   suffix (xs/sm/md/lg on stacks). Use @grid-2/3/4 only for true multi-column
-   grids, @center to center on both axes, @full to fill the parent. Common
-   slips: there is no @flex-row (use @row) or @flex-col (use a @stack-*), and
-   the grids are @grid-3, not @grid-cols-3.
+   suffix (xs/sm/md/lg on stacks); bare @stack is the default and equals
+   @stack-md. Use @grid-2/3/4 only for true multi-column grids, @center to
+   center on both axes, @full to fill the parent. Common slips: there is no
+   @flex-row (use @row) or @flex-col (use a @stack-*), and the grids are
+   @grid-3, not @grid-cols-3.
 */
 
+/* Bare stack — default gap, alias for @stack-md. */
+@recipe stack { @stack-md }
+
 /* Vertical stack with extra-small gap. */
 @recipe stack-xs {
   flex flex-col gap-1

package/dist/registry/recipes/list.css

@@ -1,9 +1,11 @@
-/* shortwind: list@0.0.1 sha:f662887791fabb8d */
+/* shortwind: list@0.0.2 sha:6a7f93aa95067c44 */
 
 /* @guide
    @list wraps a stack of @list-item rows; use @list-bordered for divided rows.
-   Definition lists are separate: @dl with @dt (term) and @dd (description).
-   For site navigation reach for the navigation family (@nav), not @list.
+   Definition lists are separate: @description-list with @description-term and
+   @description-detail. The short @dl / @dt / @dd forms are aliases that expand
+   identically; the spelled-out names are canonical — prefer them. For site
+   navigation reach for the navigation family (@navigation), not @list.
 */
 
 /* Vertical list with default gap. */
@@ -35,3 +37,14 @@
 @recipe dd {
   text-sm text-foreground sm:col-span-2
 }
+
+/* Spelled-out canonical aliases — expand identically to @dl/@dt/@dd. */
+
+/* Definition list container (alias of @dl). */
+@recipe description-list { @dl }
+
+/* Definition term (alias of @dt). */
+@recipe description-term { @dt }
+
+/* Definition description (alias of @dd). */
+@recipe description-detail { @dd }

package/dist/registry/recipes/menu.css

@@ -0,0 +1,30 @@
+/* shortwind: menu@0.0.1 sha:c95d3650d92a2fa6 */
+
+/* @guide
+   A dropdown/actions menu (the "…" button's popover). @menu is the panel,
+   @menu-item is a row, @menu-trigger is the control that opens it, and
+   @menu-separator divides groups. The highlighted/active row is data-driven —
+   set data-active on the item rather than swapping recipe names
+   (`<button class="@menu-item" data-active>`); data-disabled dims + disables a
+   row. @menu only styles the panel; pair it with your own positioning.
+*/
+
+/* Dropdown menu panel. */
+@recipe menu {
+  min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md
+}
+
+/* A single menu row. Highlight with data-active, dim with data-disabled. */
+@recipe menu-item {
+  relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-foreground outline-none transition-colors hover:bg-muted focus-visible:bg-muted data-[active]:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50
+}
+
+/* The control that opens the menu. */
+@recipe menu-trigger {
+  inline-flex items-center justify-center gap-1 outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring
+}
+
+/* Divider between menu groups. */
+@recipe menu-separator {
+  -mx-1 my-1 h-px bg-border
+}

package/dist/registry/recipes/navigation.css

@@ -1,10 +1,12 @@
-/* shortwind: navigation@0.0.1 sha:73150057219b648a */
+/* shortwind: navigation@0.0.2 sha:2bb73370d69e0f65 */
 
 /* @guide
-   @nav is the container; links are @nav-link with @nav-link-active for the
-   current page. Tabs mirror that pair: @tab and @tab-active. Use @breadcrumb
-   for trail navigation. Active and inactive are separate recipes — swap the
-   whole class rather than combining them.
+   @navigation is the container; links are @navigation-link with
+   @navigation-link-active for the current page. Tabs mirror that pair: @tab and
+   @tab-active. Use @breadcrumb for trail navigation. Active and inactive are
+   separate recipes — swap the whole class rather than combining them. The short
+   @nav / @nav-link forms are aliases that expand identically; the full-word
+   @navigation-* names are canonical — prefer them.
 */
 
 /* Top-level nav container. */
@@ -36,3 +38,14 @@
 @recipe tab-active {
   inline-flex items-center gap-2 border-b-2 border-primary px-3 py-2 text-sm font-medium text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring
 }
+
+/* Full-word canonical aliases — expand identically to the @nav-* short forms. */
+
+/* Top-level nav container (alias of @nav). */
+@recipe navigation { @nav }
+
+/* Inactive nav link (alias of @nav-link). */
+@recipe navigation-link { @nav-link }
+
+/* Active nav link (alias of @nav-link-active). */
+@recipe navigation-link-active { @nav-link-active }

package/dist/registry/recipes/segmented.css

@@ -0,0 +1,19 @@
+/* shortwind: segmented@0.0.1 sha:60bb982c1fc271f0 */
+
+/* @guide
+   A segmented control / filter bar (one choice highlighted). @segmented is the
+   track, @segmented-item is each segment. The selected segment is data-driven —
+   set data-active on the chosen item (`<button class="@segmented-item"
+   data-active>`) rather than swapping recipe names. Use @tab/@tab-active from
+   the navigation family for underlined tabs instead.
+*/
+
+/* Segmented-control track. */
+@recipe segmented {
+  inline-flex items-center gap-1 rounded-md bg-muted p-1
+}
+
+/* A segment. Mark the selected one with data-active. */
+@recipe segmented-item {
+  inline-flex items-center justify-center gap-1.5 rounded-sm px-3 py-1 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground data-[active]:bg-background data-[active]:text-foreground data-[active]:shadow-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring
+}

package/dist/registry/recipes/sheet.css

@@ -0,0 +1,38 @@
+/* shortwind: sheet@0.0.1 sha:2dd5109c9e3865fa */
+
+/* @guide
+   A slide-over panel (drawer). Three layers mirror the dialog family:
+   @sheet-overlay (dimmed backdrop), @sheet (the positioner that anchors the
+   panel to a side), and @sheet-content (the panel itself). Structure the panel
+   with @sheet-header and @sheet-footer. The edge is data-driven — set
+   data-side=left/right on @sheet (`<div class="@sheet" data-side="right">`)
+   rather than picking a different recipe. @drawer is an alias for @sheet.
+*/
+
+/* Dimmed backdrop behind the sheet. */
+@recipe sheet-overlay {
+  fixed inset-0 z-40 bg-black/50
+}
+
+/* Positioner — anchors the panel to a side via data-side. */
+@recipe sheet {
+  fixed inset-0 z-50 flex data-[side=right]:justify-end data-[side=left]:justify-start
+}
+
+/* The sliding panel. */
+@recipe sheet-content {
+  flex h-full w-3/4 max-w-sm flex-col gap-4 border-border bg-popover p-6 text-popover-foreground shadow-xl
+}
+
+/* Sheet header region. */
+@recipe sheet-header {
+  flex flex-col gap-1
+}
+
+/* Sheet footer with bottom-pinned, right-aligned actions. */
+@recipe sheet-footer {
+  mt-auto flex items-center justify-end gap-2
+}
+
+/* Alias — @drawer reads as @sheet. */
+@recipe drawer { @sheet }

package/dist/registry/recipes/stat.css

@@ -0,0 +1,30 @@
+/* shortwind: stat@0.0.1 sha:445f1f7abfebc0b1 */
+
+/* @guide
+   A dashboard metric tile. @stat is the container; inside it @stat-label names
+   the metric, @stat-value is the big number, and @stat-trend is the delta.
+   Colour the trend with the tone system — set data-tone on @stat-trend
+   (success for up, danger for down): `<span class="@stat-trend"
+   data-tone="success">`. Same --tone-fg mechanism as @badge; define tones once
+   in CSS (init scaffolds them).
+*/
+
+/* Metric tile container. */
+@recipe stat {
+  flex flex-col gap-1 rounded-lg border border-border bg-card p-4 text-card-foreground
+}
+
+/* Metric name. */
+@recipe stat-label {
+  text-sm font-medium text-muted-foreground
+}
+
+/* The metric's primary value. */
+@recipe stat-value {
+  text-2xl font-semibold tracking-tight text-foreground tabular-nums
+}
+
+/* Trend delta — tone-aware; set data-tone (success up / danger down). */
+@recipe stat-trend {
+  inline-flex items-center gap-1 text-xs font-medium text-[var(--tone-fg,var(--muted-foreground))]
+}

package/dist/registry/recipes/switch.css

@@ -0,0 +1,19 @@
+/* shortwind: switch@0.0.1 sha:54fa33bb72839799 */
+
+/* @guide
+   A toggle switch. @switch is the track, @switch-thumb is the sliding knob
+   inside it. The on/off state is data-driven — set data-checked on BOTH the
+   track and the thumb (`<button class="@switch" data-checked><span
+   class="@switch-thumb" data-checked /></button>`). For a checkbox/radio reach
+   for the form family instead.
+*/
+
+/* Toggle track. Add data-checked when on. */
+@recipe switch {
+  peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent bg-input transition-colors data-[checked]:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50
+}
+
+/* Sliding knob. Add data-checked to slide it on. */
+@recipe switch-thumb {
+  pointer-events-none block h-4 w-4 translate-x-0 rounded-full bg-background shadow-sm transition-transform data-[checked]:translate-x-4
+}

package/dist/registry/segmented/CHANGELOG.md

@@ -0,0 +1,5 @@
+# segmented
+
+## 0.0.1
+
+Initial release.

package/dist/registry/segmented.css

@@ -0,0 +1,19 @@
+/* shortwind: segmented@0.0.1 sha:60bb982c1fc271f0 */
+
+/* @guide
+   A segmented control / filter bar (one choice highlighted). @segmented is the
+   track, @segmented-item is each segment. The selected segment is data-driven —
+   set data-active on the chosen item (`<button class="@segmented-item"
+   data-active>`) rather than swapping recipe names. Use @tab/@tab-active from
+   the navigation family for underlined tabs instead.
+*/
+
+/* Segmented-control track. */
+@recipe segmented {
+  inline-flex items-center gap-1 rounded-md bg-muted p-1
+}
+
+/* A segment. Mark the selected one with data-active. */
+@recipe segmented-item {
+  inline-flex items-center justify-center gap-1.5 rounded-sm px-3 py-1 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground data-[active]:bg-background data-[active]:text-foreground data-[active]:shadow-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring
+}

package/dist/registry/segmented@0.0.1.css

@@ -0,0 +1,19 @@
+/* shortwind: segmented@0.0.1 sha:60bb982c1fc271f0 */
+
+/* @guide
+   A segmented control / filter bar (one choice highlighted). @segmented is the
+   track, @segmented-item is each segment. The selected segment is data-driven —
+   set data-active on the chosen item (`<button class="@segmented-item"
+   data-active>`) rather than swapping recipe names. Use @tab/@tab-active from
+   the navigation family for underlined tabs instead.
+*/
+
+/* Segmented-control track. */
+@recipe segmented {
+  inline-flex items-center gap-1 rounded-md bg-muted p-1
+}
+
+/* A segment. Mark the selected one with data-active. */
+@recipe segmented-item {
+  inline-flex items-center justify-center gap-1.5 rounded-sm px-3 py-1 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground data-[active]:bg-background data-[active]:text-foreground data-[active]:shadow-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring
+}

package/dist/registry/sheet/CHANGELOG.md

@@ -0,0 +1,5 @@
+# sheet
+
+## 0.0.1
+
+Initial release.

package/dist/registry/sheet.css

@@ -0,0 +1,38 @@
+/* shortwind: sheet@0.0.1 sha:2dd5109c9e3865fa */
+
+/* @guide
+   A slide-over panel (drawer). Three layers mirror the dialog family:
+   @sheet-overlay (dimmed backdrop), @sheet (the positioner that anchors the
+   panel to a side), and @sheet-content (the panel itself). Structure the panel
+   with @sheet-header and @sheet-footer. The edge is data-driven — set
+   data-side=left/right on @sheet (`<div class="@sheet" data-side="right">`)
+   rather than picking a different recipe. @drawer is an alias for @sheet.
+*/
+
+/* Dimmed backdrop behind the sheet. */
+@recipe sheet-overlay {
+  fixed inset-0 z-40 bg-black/50
+}
+
+/* Positioner — anchors the panel to a side via data-side. */
+@recipe sheet {
+  fixed inset-0 z-50 flex data-[side=right]:justify-end data-[side=left]:justify-start
+}
+
+/* The sliding panel. */
+@recipe sheet-content {
+  flex h-full w-3/4 max-w-sm flex-col gap-4 border-border bg-popover p-6 text-popover-foreground shadow-xl
+}
+
+/* Sheet header region. */
+@recipe sheet-header {
+  flex flex-col gap-1
+}
+
+/* Sheet footer with bottom-pinned, right-aligned actions. */
+@recipe sheet-footer {
+  mt-auto flex items-center justify-end gap-2
+}
+
+/* Alias — @drawer reads as @sheet. */
+@recipe drawer { @sheet }

package/dist/registry/sheet@0.0.1.css

@@ -0,0 +1,38 @@
+/* shortwind: sheet@0.0.1 sha:2dd5109c9e3865fa */
+
+/* @guide
+   A slide-over panel (drawer). Three layers mirror the dialog family:
+   @sheet-overlay (dimmed backdrop), @sheet (the positioner that anchors the
+   panel to a side), and @sheet-content (the panel itself). Structure the panel
+   with @sheet-header and @sheet-footer. The edge is data-driven — set
+   data-side=left/right on @sheet (`<div class="@sheet" data-side="right">`)
+   rather than picking a different recipe. @drawer is an alias for @sheet.
+*/
+
+/* Dimmed backdrop behind the sheet. */
+@recipe sheet-overlay {
+  fixed inset-0 z-40 bg-black/50
+}
+
+/* Positioner — anchors the panel to a side via data-side. */
+@recipe sheet {
+  fixed inset-0 z-50 flex data-[side=right]:justify-end data-[side=left]:justify-start
+}
+
+/* The sliding panel. */
+@recipe sheet-content {
+  flex h-full w-3/4 max-w-sm flex-col gap-4 border-border bg-popover p-6 text-popover-foreground shadow-xl
+}
+
+/* Sheet header region. */
+@recipe sheet-header {
+  flex flex-col gap-1
+}
+
+/* Sheet footer with bottom-pinned, right-aligned actions. */
+@recipe sheet-footer {
+  mt-auto flex items-center justify-end gap-2
+}
+
+/* Alias — @drawer reads as @sheet. */
+@recipe drawer { @sheet }

package/dist/registry/stat/CHANGELOG.md

@@ -0,0 +1,5 @@
+# stat
+
+## 0.0.1
+
+Initial release.