@muten/shadcn 0.2.13 → 0.2.15

package/kit.css

@@ -5519,6 +5519,15 @@ a.cx-bc-item:hover { color: var(--foreground); }
 /* SidebarTrigger: in the icon column (its 32 px square sits where the rows' icons sit), folded or open */
 .cx-sb-trigger { align-self: flex-start; flex: none; margin-left: 0; }
 .cx-sidebar[data-collapsed="true"] .cx-sb-trigger { align-self: flex-start; }
+.cx-sidebar .cx-sb-trigger { width: 32px; height: 32px; }   /* the rows' square, so its centre is the column's */
+/* THE HEADER AND THE FOOTER USE THE ICON COLUMN TOO. Whatever leads a link or a menu button there (a logo, an avatar,
+   an icon) sits centred in a 32 px box exactly over the rows' icons, open or folded, so the logo, the trigger, every icon
+   and the avatar make one straight line and nothing moves sideways when the rail folds. Folded, a menu button closes
+   to that box (its words fade and the rail never crops the avatar). */
+.cx-sidebar :is(.cx-sb-head, .cx-sb-foot) > a, .cx-sidebar :is(.cx-sb-head, .cx-sb-foot) .cn-sidebar-menu-button { justify-content: flex-start; padding-left: 0; }
+.cx-sidebar :is(.cx-sb-head, .cx-sb-foot) > a > :first-child, .cx-sidebar :is(.cx-sb-head, .cx-sb-foot) .cn-sidebar-menu-button > :first-child { flex: none; width: 32px; display: flex; justify-content: center; object-fit: contain; }
+.cx-sidebar :is(.cx-sb-head, .cx-sb-foot) .cn-sidebar-menu-button { transition: width .2s var(--ease-out), padding .2s var(--ease-out); }
+.cx-sidebar[data-collapsed="true"] :is(.cx-sb-head, .cx-sb-foot) .cn-sidebar-menu-button { width: 32px; padding-right: 0; }
 
 /* Sheet: its content arrives a moment after the panel, one row after another; leaving, it goes with the panel */
 .cx-modal[data-mode="sheet"] .cx-modal-body > * { transition: opacity var(--t-pop) var(--ease-out), translate calc(var(--t-sheet) * .8) var(--ease-out); }
@@ -5607,3 +5616,26 @@ a.cx-bc-item:hover { color: var(--foreground); }
 .cn-badge[data-compact="true"]:hover .cx-tone-words, .cn-badge[data-compact="true"]:focus-within .cx-tone-words { grid-template-columns: 1fr; opacity: 1; }
 @media (hover: none) { .cn-badge[data-compact="true"] { gap: 8px; padding-inline: 12px; } .cn-badge[data-compact="true"] .cx-tone-words { grid-template-columns: 1fr; opacity: 1; } }
 @media (prefers-reduced-motion: reduce) { .cx-sb-ring, .cx-tone-ring { animation-duration: 1.6s; } .cn-badge[data-compact="true"], .cn-badge[data-compact="true"] .cx-tone-words, .cx-sb-hint { transition: none; } }
+
+/* ═════ SIDEBAR FOLDS · groups and levels that open and close (SidebarFoldGroup, SidebarFold, SidebarRowToggle) ═════
+   What opens and closes folds to its exact height (its row grows from 0fr) while the chevron turns; closed, it is out
+   of reach of the keyboard too. A row's chevron sits over the row's right end. Folded to icons, everything shows. */
+.cx-sb-fold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .2s var(--ease-out); }
+.cx-sb-fold[data-open="false"] { grid-template-rows: 0fr; }
+.cx-sb-fold-in { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
+.cx-sb-fold[data-open="false"] > .cx-sb-fold-in { visibility: hidden; transition: visibility 0s .2s; }
+.cx-sb-chev { width: 15px; height: 15px; flex: none; color: var(--muted-foreground); transition: transform .2s var(--ease-out); }
+[aria-expanded="false"] > .cx-sb-chev { transform: rotate(-90deg); }
+.cx-sb-gtoggle { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; border-radius: calc(var(--radius) * .6); }
+.cx-sb-gtoggle:hover { color: var(--foreground); }
+.cx-sb-gtoggle:focus-visible, .cx-sb-rowtoggle:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
+.cx-sb-rowtoggle { align-self: flex-end; position: relative; z-index: 1; width: 24px; height: 24px; margin: -28px 4px 4px 0; display: grid; place-items: center; padding: 0; border: 0; border-radius: calc(var(--radius) * .6); background: none; cursor: pointer; }
+.cx-sb-menu > .cx-sb-rowtoggle { margin-top: -32px; }
+.cx-sb-rowtoggle:hover { background: var(--accent); }
+.cx-sb-rowtoggle:active { transform: scale(.94); }
+:is(.cx-sb-item, .cx-sb-subitem):has(+ .cx-sb-rowtoggle) { padding-right: 34px; }
+.cx-sb-subitem:has(+ .cx-sb-rowtoggle) { font-weight: 600; }
+.cx-sidebar[data-collapsed="true"] .cx-sb-fold { grid-template-rows: 1fr; }
+.cx-sidebar[data-collapsed="true"] .cx-sb-fold > .cx-sb-fold-in { visibility: visible; }
+.cx-sidebar[data-collapsed="true"] :is(.cx-sb-rowtoggle, .cx-sb-chev) { display: none; }
+@media (prefers-reduced-motion: reduce) { .cx-sb-fold, .cx-sb-chev { transition: none; } }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muten/shadcn",
-  "version": "0.2.13",
+  "version": "0.2.15",
   "description": "shadcn-style component registry for muten - own-the-source parts you add with `muten add`.",
   "repository": {
     "type": "git",

package/registry/sidebar.muten

@@ -20,6 +20,14 @@
 #     SidebarSubLink(label: "api", to: "/services/api", tone: "ok", busy: "{building}", hint: "Building v24")
 #     SidebarSub(label: "api") { SidebarSubLink(label: "Logs", to: "/services/api?tab=logs", active: "{tab == "logs"}") { Icon "lucide:terminal" } }
 #   }
+# Folding parts of the menu: SidebarFoldGroup is a SidebarGroup whose title opens and closes it; SidebarFold holds what
+# opens and closes under a row (a SidebarSub), and SidebarRowToggle is that row's chevron, placed right after it. They
+# fold to their height in 200 ms while the chevron turns; the page owns each `open` (persist it to keep the menu as
+# it was left). Folded to icons, every group shows its icons and the chevrons go.
+#   SidebarFoldGroup(label: "Panel", open: panelOpen, onToggle: togglePanel) { SidebarLink(…) }
+#   SidebarLink(label: "Services", to: "/services") { Icon "lucide:layers" }
+#   SidebarRowToggle(label: "Show or hide your services", open: listOpen, onToggle: toggleList)
+#   SidebarFold(open: listOpen) { SidebarSub { … } }
 # The name AppSidebar avoids muten's own Sidebar primitive. shadcn-for-muten · parts · no deps · Nova (.cn-sidebar-*) + kit.css.
 part AppSidebar(collapsed: bool, label: text = "Menu") {
   Nav class("cx-sidebar") data(slot: "sidebar", collapsed: $collapsed) aria(label: $label) { Stack class("cn-sidebar-inner cx-sb-inner") data(slot: "sidebar-inner") { slot } }
@@ -64,3 +72,15 @@ part SidebarSubLink(label: text, to: text, active: text = "", count: text = "",
     when $count != "" { Span "{$count}" class("cn-sidebar-menu-badge cx-sb-count") data(slot: "sidebar-menu-badge") }
   }
 }
+part SidebarFoldGroup(label: text, open: bool, onToggle: action) {
+  Stack class("cn-sidebar-group cx-sb-group cx-sb-foldgroup") data(slot: "sidebar-group") aria(role: "group", label: $label) {
+    Button -> $onToggle class("cn-sidebar-group-label cx-sb-glabel cx-sb-gtoggle") data(slot: "sidebar-group-label") aria(expanded: $open) { Span "{$label}"  Icon "lucide:chevron-down" class("cx-sb-chev") }
+    Stack class("cx-sb-fold") data(open: $open) { Stack class("cx-sb-fold-in") { Stack class("cn-sidebar-menu cx-sb-menu") data(slot: "sidebar-menu") { slot } } }
+  }
+}
+part SidebarFold(open: bool) {
+  Stack class("cx-sb-fold") data(open: $open) { Stack class("cx-sb-fold-in") { slot } }
+}
+part SidebarRowToggle(label: text, open: bool, onToggle: action) {
+  Button -> $onToggle class("cx-sb-rowtoggle") aria(expanded: $open, label: $label) { Icon "lucide:chevron-down" class("cx-sb-chev") }
+}

package/registry.json

@@ -936,7 +936,7 @@
       "deps": [],
       "part": "AppSidebar",
       "file": "registry/sidebar.muten",
-      "description": "AppSidebar - a collapsible nav panel (SidebarHeader / SidebarGroup / SidebarItem / SidebarLink), with SidebarSub / SidebarSubLink for the level below an item (active, a status dot or spinning ring, a hint on hover). Named AppSidebar so it never shadows muten's core Sidebar <aside> primitive."
+      "description": "AppSidebar - a collapsible nav panel (SidebarHeader / SidebarGroup / SidebarItem / SidebarLink), with SidebarSub / SidebarSubLink for the level below an item (active, a status dot or spinning ring, a hint on hover), and SidebarFoldGroup / SidebarFold / SidebarRowToggle for what opens and closes. Named AppSidebar so it never shadows muten's core Sidebar <aside> primitive."
     },
     {
       "name": "site-footer",