@juxtui/ui 0.3.0 → 0.5.0

package/dist/nuxt.js

@@ -10,6 +10,7 @@ var components = [
 	"JBadge",
 	"JBanner",
 	"JBreadcrumb",
+	"JBurger",
 	"JButton",
 	"JCard",
 	"JCheckbox",
@@ -22,8 +23,12 @@ var components = [
 	"JDropdownMenuSeparator",
 	"JDropdownMenuSub",
 	"JEmptyState",
+	"JFooter",
+	"JFooterColumn",
 	"JInput",
 	"JKbd",
+	"JNavbar",
+	"JNavbarLink",
 	"JPagination",
 	"JPopover",
 	"JProgress",
@@ -33,6 +38,9 @@ var components = [
 	"JSelect",
 	"JSeparator",
 	"JSheet",
+	"JSidebar",
+	"JSidebarGroup",
+	"JSidebarItem",
 	"JSkeleton",
 	"JSlider",
 	"JSpinner",

package/dist/nuxt.js.map

@@ -1 +1 @@
-{"version":3,"file":"nuxt.js","names":[],"sources":["../src/nuxt.ts"],"sourcesContent":["import type { NuxtModule } from '@nuxt/schema'\r\nimport { addComponent, addImports, defineNuxtModule } from '@nuxt/kit'\r\n\r\nexport interface ModuleOptions {\r\n  /** Inject Juxt's stylesheet (tokens + component styles). Defaults to true. */\r\n  css?: boolean\r\n}\r\n\r\nconst components = [\r\n  'JAccordion',\r\n  'JAccordionItem',\r\n  'JAlert',\r\n  'JAspectRatio',\r\n  'JAvatar',\r\n  'JAvatarGroup',\r\n  'JBadge',\r\n  'JBanner',\r\n  'JBreadcrumb',\r\n  'JButton',\r\n  'JCard',\r\n  'JCheckbox',\r\n  'JCollapsible',\r\n  'JCommandPalette',\r\n  'JDialog',\r\n  'JDropdownMenu',\r\n  'JDropdownMenuItem',\r\n  'JDropdownMenuLabel',\r\n  'JDropdownMenuSeparator',\r\n  'JDropdownMenuSub',\r\n  'JEmptyState',\r\n  'JInput',\r\n  'JKbd',\r\n  'JPagination',\r\n  'JPopover',\r\n  'JProgress',\r\n  'JRadio',\r\n  'JRadioGroup',\r\n  'JRating',\r\n  'JSelect',\r\n  'JSeparator',\r\n  'JSheet',\r\n  'JSkeleton',\r\n  'JSlider',\r\n  'JSpinner',\r\n  'JStat',\r\n  'JSwitch',\r\n  'JTabs',\r\n  'JTag',\r\n  'JTextarea',\r\n  'JTimeline',\r\n  'JTimelineItem',\r\n  'JToaster',\r\n  'JToggleGroup',\r\n  'JToggleGroupItem',\r\n  'JTooltip',\r\n  'JVisuallyHidden',\r\n] as const\r\n\r\nconst composables = ['toast', 'useToast', 'useRecentCommands', 'useHotkey', 'formatHotkey'] as const\r\n\r\n/**\r\n * Nuxt module: auto-imports every Juxt component and composable, and adds the\r\n * stylesheet.\r\n *\r\n *   export default defineNuxtConfig({ modules: ['@juxtui/ui/nuxt'] })\r\n */\r\nconst juxtModule: NuxtModule<ModuleOptions> = defineNuxtModule<ModuleOptions>({\r\n  meta: {\r\n    name: '@juxtui/ui',\r\n    configKey: 'juxt',\r\n    compatibility: { nuxt: '>=3.15.0' },\r\n  },\r\n  defaults: {\r\n    css: true,\r\n  },\r\n  setup(options, nuxt) {\r\n    for (const name of components) addComponent({ name, export: name, filePath: '@juxtui/ui' })\r\n    addImports(composables.map(name => ({ name, from: '@juxtui/ui' })))\r\n    if (options.css) nuxt.options.css.unshift('@juxtui/ui/style.css')\r\n    nuxt.options.build.transpile.push('@juxtui/ui')\r\n  },\r\n})\r\n\r\nexport default juxtModule\r\n"],"mappings":";;AAQA,IAAM,aAAa;CACjB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,IAAM,cAAc;CAAC;CAAS;CAAY;CAAqB;CAAa;AAAc;;;;;;;AAQ1F,IAAM,aAAwC,iBAAgC;CAC5E,MAAM;EACJ,MAAM;EACN,WAAW;EACX,eAAe,EAAE,MAAM,WAAW;CACpC;CACA,UAAU,EACR,KAAK,KACP;CACA,MAAM,SAAS,MAAM;EACnB,KAAK,MAAM,QAAQ,YAAY,aAAa;GAAE;GAAM,QAAQ;GAAM,UAAU;EAAa,CAAC;EAC1F,WAAW,YAAY,KAAI,UAAS;GAAE;GAAM,MAAM;EAAa,EAAE,CAAC;EAClE,IAAI,QAAQ,KAAK,KAAK,QAAQ,IAAI,QAAQ,sBAAsB;EAChE,KAAK,QAAQ,MAAM,UAAU,KAAK,YAAY;CAChD;AACF,CAAC"}
+{"version":3,"file":"nuxt.js","names":[],"sources":["../src/nuxt.ts"],"sourcesContent":["import type { NuxtModule } from '@nuxt/schema'\nimport { addComponent, addImports, defineNuxtModule } from '@nuxt/kit'\n\nexport interface ModuleOptions {\n  /** Inject Juxt's stylesheet (tokens + component styles). Defaults to true. */\n  css?: boolean\n}\n\nconst components = [\n  'JAccordion',\n  'JAccordionItem',\n  'JAlert',\n  'JAspectRatio',\n  'JAvatar',\n  'JAvatarGroup',\n  'JBadge',\n  'JBanner',\n  'JBreadcrumb',\n  'JBurger',\n  'JButton',\n  'JCard',\n  'JCheckbox',\n  'JCollapsible',\n  'JCommandPalette',\n  'JDialog',\n  'JDropdownMenu',\n  'JDropdownMenuItem',\n  'JDropdownMenuLabel',\n  'JDropdownMenuSeparator',\n  'JDropdownMenuSub',\n  'JEmptyState',\n  'JFooter',\n  'JFooterColumn',\n  'JInput',\n  'JKbd',\n  'JNavbar',\n  'JNavbarLink',\n  'JPagination',\n  'JPopover',\n  'JProgress',\n  'JRadio',\n  'JRadioGroup',\n  'JRating',\n  'JSelect',\n  'JSeparator',\n  'JSheet',\n  'JSidebar',\n  'JSidebarGroup',\n  'JSidebarItem',\n  'JSkeleton',\n  'JSlider',\n  'JSpinner',\n  'JStat',\n  'JSwitch',\n  'JTabs',\n  'JTag',\n  'JTextarea',\n  'JTimeline',\n  'JTimelineItem',\n  'JToaster',\n  'JToggleGroup',\n  'JToggleGroupItem',\n  'JTooltip',\n  'JVisuallyHidden',\n] as const\n\nconst composables = ['toast', 'useToast', 'useRecentCommands', 'useHotkey', 'formatHotkey'] as const\n\n/**\n * Nuxt module: auto-imports every Juxt component and composable, and adds the\n * stylesheet.\n *\n *   export default defineNuxtConfig({ modules: ['@juxtui/ui/nuxt'] })\n */\nconst juxtModule: NuxtModule<ModuleOptions> = defineNuxtModule<ModuleOptions>({\n  meta: {\n    name: '@juxtui/ui',\n    configKey: 'juxt',\n    compatibility: { nuxt: '>=3.15.0' },\n  },\n  defaults: {\n    css: true,\n  },\n  setup(options, nuxt) {\n    for (const name of components) addComponent({ name, export: name, filePath: '@juxtui/ui' })\n    addImports(composables.map(name => ({ name, from: '@juxtui/ui' })))\n    if (options.css) nuxt.options.css.unshift('@juxtui/ui/style.css')\n    nuxt.options.build.transpile.push('@juxtui/ui')\n  },\n})\n\nexport default juxtModule\n"],"mappings":";;AAQA,IAAM,aAAa;CACjB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,IAAM,cAAc;CAAC;CAAS;CAAY;CAAqB;CAAa;AAAc;;;;;;;AAQ1F,IAAM,aAAwC,iBAAgC;CAC5E,MAAM;EACJ,MAAM;EACN,WAAW;EACX,eAAe,EAAE,MAAM,WAAW;CACpC;CACA,UAAU,EACR,KAAK,KACP;CACA,MAAM,SAAS,MAAM;EACnB,KAAK,MAAM,QAAQ,YAAY,aAAa;GAAE;GAAM,QAAQ;GAAM,UAAU;EAAa,CAAC;EAC1F,WAAW,YAAY,KAAI,UAAS;GAAE;GAAM,MAAM;EAAa,EAAE,CAAC;EAClE,IAAI,QAAQ,KAAK,KAAK,QAAQ,IAAI,QAAQ,sBAAsB;EAChE,KAAK,QAAQ,MAAM,UAAU,KAAK,YAAY;CAChD;AACF,CAAC"}

package/dist/style.css

@@ -1097,6 +1097,79 @@
 }
 }
 
+@layer theme, base, juxt, components, utilities;
+@layer juxt {
+.j-burger {
+  --j-burger-size: var(--juxt-control-md);
+  --j-burger-width: 1rem;
+  --j-burger-gap: 0.3125rem;
+
+  display: inline-grid;
+  place-items: center;
+  width: var(--j-burger-size);
+  height: var(--j-burger-size);
+  padding: 0;
+  border: 0;
+  border-radius: var(--juxt-radius-sm);
+  background: transparent;
+  color: var(--juxt-fg);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition-property: background-color, outline-color, outline-offset;
+}
+.j-burger--sm {
+  --j-burger-size: var(--juxt-control-sm);
+  --j-burger-width: 0.875rem;
+  --j-burger-gap: 0.25rem;
+}
+.j-burger:hover {
+  background: var(--juxt-surface-hover);
+}
+.j-burger__lines {
+  position: relative;
+  display: block;
+  width: var(--j-burger-width);
+  height: calc(var(--j-burger-gap) * 2 + 1.5px);
+}
+.j-burger__line {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 1.5px;
+  border-radius: 1px;
+  background: currentColor;
+  transition:
+    transform var(--juxt-duration-normal) var(--juxt-ease-out),
+    opacity var(--juxt-duration-fast) var(--juxt-ease-standard);
+}
+.j-burger__line:nth-child(1) {
+  top: 0;
+}
+.j-burger__line:nth-child(2) {
+  top: var(--j-burger-gap);
+}
+.j-burger__line:nth-child(3) {
+  top: calc(var(--j-burger-gap) * 2);
+}
+
+/* Outer lines meet in the middle and cross; the middle one fades. */
+.j-burger[data-state='open'] .j-burger__line:nth-child(1) {
+  transform: translateY(var(--j-burger-gap)) rotate(45deg);
+}
+.j-burger[data-state='open'] .j-burger__line:nth-child(2) {
+  opacity: 0;
+  transform: scaleX(0.4);
+}
+.j-burger[data-state='open'] .j-burger__line:nth-child(3) {
+  transform: translateY(calc(var(--j-burger-gap) * -1)) rotate(-45deg);
+}
+@media (prefers-reduced-motion: reduce) {
+.j-burger__line {
+    transition-duration: 0ms;
+}
+}
+}
+
 @layer theme, base, juxt, components, utilities;
 @layer juxt {
 .j-button {
@@ -2251,6 +2324,119 @@ to {
 }
 }
 
+@layer theme, base, juxt, components, utilities;
+@layer juxt {
+.j-footer {
+  background: var(--juxt-bg);
+  color: var(--juxt-fg-secondary);
+  font-family: var(--juxt-font-sans);
+  font-size: var(--juxt-text-sm);
+}
+.j-footer.is-bordered {
+  border-top: 1px solid var(--juxt-border-subtle);
+}
+.dark .j-footer.is-bordered,
+[data-theme='dark'] .j-footer.is-bordered {
+  border-top-color: var(--juxt-border);
+}
+.j-footer__inner {
+  max-width: var(--j-footer-max);
+  margin: 0 auto;
+  padding: var(--juxt-space-12) var(--juxt-space-4) var(--juxt-space-8);
+}
+.j-footer__top {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--juxt-space-10);
+}
+.j-footer__brand {
+  display: flex;
+  flex-direction: column;
+  gap: var(--juxt-space-3);
+  max-width: 18rem;
+  color: var(--juxt-fg-muted);
+  line-height: var(--juxt-leading-normal);
+}
+.j-footer__columns {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--juxt-space-8) var(--juxt-space-6);
+}
+@media (min-width: 768px) {
+.j-footer__top {
+    grid-template-columns: minmax(12rem, 1fr) minmax(0, 2fr);
+}
+.j-footer__columns {
+    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+}
+}
+.j-footer__bottom {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--juxt-space-3) var(--juxt-space-6);
+  margin-top: var(--juxt-space-12);
+  padding-top: var(--juxt-space-6);
+  border-top: 1px solid var(--juxt-border-subtle);
+  color: var(--juxt-fg-muted);
+  font-size: var(--juxt-text-xs);
+}
+.dark .j-footer__bottom,
+[data-theme='dark'] .j-footer__bottom {
+  border-top-color: var(--juxt-border);
+}
+.j-footer__bottom a {
+  color: inherit;
+  text-decoration: none;
+  transition: color var(--juxt-duration-fast) var(--juxt-ease-standard);
+}
+.j-footer__bottom a:hover {
+  color: var(--juxt-fg);
+}
+}
+
+@layer theme, base, juxt, components, utilities;
+@layer juxt {
+.j-footer-column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--juxt-space-3);
+  min-width: 0;
+}
+.j-footer-column__title {
+  margin: 0;
+  color: var(--juxt-fg);
+  font-size: var(--juxt-text-sm);
+  font-weight: var(--juxt-weight-medium);
+  letter-spacing: var(--juxt-tracking-tight);
+}
+.j-footer-column__links {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--juxt-space-2);
+}
+.j-footer-column__links a {
+  border-radius: var(--juxt-radius-xs);
+  color: var(--juxt-fg-muted);
+  text-decoration: none;
+  outline: 2px solid transparent;
+  outline-offset: 0;
+  transition:
+    color var(--juxt-duration-fast) var(--juxt-ease-standard),
+    outline-color var(--juxt-duration-fast) var(--juxt-ease-out),
+    outline-offset var(--juxt-duration-fast) var(--juxt-ease-out);
+}
+.j-footer-column__links a:hover {
+  color: var(--juxt-fg);
+}
+.j-footer-column__links a:focus-visible {
+  outline-color: var(--juxt-ring);
+  outline-offset: 2px;
+}
+}
+
 @layer theme, base, juxt, components, utilities;
 @layer juxt {
 .j-field {
@@ -2352,6 +2538,193 @@ to {
 }
 }
 
+@layer theme, base, juxt, components, utilities;
+@layer juxt {
+.j-navbar {
+  --j-navbar-height: 3.5rem;
+
+  position: relative;
+  z-index: var(--juxt-z-sticky);
+  background: var(--juxt-bg);
+  color: var(--juxt-fg);
+  font-family: var(--juxt-font-sans);
+}
+.j-navbar.is-sticky {
+  position: sticky;
+  top: 0;
+}
+.j-navbar.is-bordered {
+  box-shadow: inset 0 -1px 0 var(--juxt-border-subtle);
+}
+.dark .j-navbar.is-bordered,
+[data-theme='dark'] .j-navbar.is-bordered {
+  box-shadow: inset 0 -1px 0 var(--juxt-border);
+}
+.j-navbar__bar {
+  display: flex;
+  align-items: center;
+  gap: var(--juxt-space-6);
+  max-width: var(--j-navbar-max);
+  height: var(--j-navbar-height);
+  margin: 0 auto;
+  padding: 0 var(--juxt-space-4);
+}
+.j-navbar__brand {
+  display: flex;
+  flex: none;
+  align-items: center;
+}
+.j-navbar__links {
+  display: flex;
+  align-items: center;
+  gap: var(--juxt-space-1);
+  min-width: 0;
+}
+.j-navbar__end {
+  display: flex;
+  align-items: center;
+  gap: var(--juxt-space-2);
+  margin-left: auto;
+}
+.j-navbar__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--juxt-space-2);
+}
+.j-navbar__burger {
+  display: none;
+  margin-right: calc(var(--juxt-space-2) * -1);
+}
+
+/* Mobile menu: a panel that drops from the bar, links stacked with big targets. */
+.j-navbar__menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--juxt-space-4);
+  max-height: calc(100dvh - var(--j-navbar-height));
+  padding: var(--juxt-space-3) var(--juxt-space-4) var(--juxt-space-5);
+  overflow-y: auto;
+  border-bottom: 1px solid var(--juxt-border);
+  background: var(--juxt-bg);
+  box-shadow: var(--juxt-shadow-md);
+}
+.j-navbar__menu-links {
+  display: flex;
+  flex-direction: column;
+  gap: var(--juxt-space-0-5);
+}
+.j-navbar__menu-links .j-navbar-link {
+  justify-content: flex-start;
+  height: 2.75rem;
+  padding: 0 var(--juxt-space-3);
+  font-size: var(--juxt-text-lg);
+}
+.j-navbar__menu-footer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--juxt-space-2);
+  padding-top: var(--juxt-space-4);
+  border-top: 1px solid var(--juxt-border-subtle);
+}
+.j-navbar__menu-footer > * {
+  width: 100%;
+}
+.j-navbar-menu-enter-active {
+  transition:
+    opacity var(--juxt-duration-fast) var(--juxt-ease-out),
+    transform var(--juxt-duration-normal) var(--juxt-ease-out);
+}
+.j-navbar-menu-leave-active {
+  transition:
+    opacity var(--juxt-duration-instant) var(--juxt-ease-in),
+    transform var(--juxt-duration-instant) var(--juxt-ease-in);
+}
+.j-navbar-menu-enter-from,
+.j-navbar-menu-leave-to {
+  opacity: 0;
+  transform: translateY(calc(var(--juxt-motion-shift) * -1));
+}
+
+/* Collapse points. Above them the menu never shows, below them the links hide. */
+.j-navbar--collapse-never .j-navbar__menu {
+  display: none !important;
+}
+@media (max-width: 639.98px) {
+.j-navbar--collapse-sm .j-navbar__links { display: none;
+}
+.j-navbar--collapse-sm .j-navbar__burger { display: inline-grid;
+}
+}
+@media (min-width: 640px) {
+.j-navbar--collapse-sm .j-navbar__menu { display: none !important;
+}
+}
+@media (max-width: 767.98px) {
+.j-navbar--collapse-md .j-navbar__links { display: none;
+}
+.j-navbar--collapse-md .j-navbar__burger { display: inline-grid;
+}
+}
+@media (min-width: 768px) {
+.j-navbar--collapse-md .j-navbar__menu { display: none !important;
+}
+}
+@media (max-width: 1023.98px) {
+.j-navbar--collapse-lg .j-navbar__links { display: none;
+}
+.j-navbar--collapse-lg .j-navbar__burger { display: inline-grid;
+}
+}
+@media (min-width: 1024px) {
+.j-navbar--collapse-lg .j-navbar__menu { display: none !important;
+}
+}
+}
+
+@layer theme, base, juxt, components, utilities;
+@layer juxt {
+.j-navbar-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--juxt-space-1-5);
+  height: var(--juxt-control-sm);
+  padding: 0 var(--juxt-space-2-5);
+  border-radius: var(--juxt-radius-sm);
+  color: var(--juxt-fg-muted);
+  font-size: var(--juxt-text-sm);
+  font-weight: var(--juxt-weight-medium);
+  letter-spacing: var(--juxt-tracking-tight);
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition-property: color, background-color, outline-color, outline-offset;
+}
+.j-navbar-link:hover {
+  color: var(--juxt-fg);
+}
+.j-navbar-link.is-active {
+  color: var(--juxt-fg);
+}
+
+/* In the mobile menu the current page gets a quiet fill, like a selected row. */
+.j-navbar__menu .j-navbar-link.is-active {
+  background: var(--juxt-surface-hover);
+}
+.j-navbar-link__icon {
+  display: inline-flex;
+  color: var(--juxt-fg-muted);
+}
+.j-navbar-link__icon > svg {
+  width: 1rem;
+  height: 1rem;
+}
+}
+
 @layer theme, base, juxt, components, utilities;
 @layer juxt {
 .j-pagination {
@@ -3108,6 +3481,205 @@ to {
 }
 }
 
+@layer theme, base, juxt, components, utilities;
+@layer juxt {
+.j-sidebar {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  /*
+   * Not `height: 100%`: inside a parent that only has a min-height (e.g. a
+   * `min-h-screen` flex row) a percentage height can't resolve, and a set
+   * height also stops the flex/grid parent from stretching the sidebar, so it
+   * would collapse to its content. Min and max of 100% pin it to a parent with
+   * a real height (nav scrolls inside), and leave it `auto` everywhere else, so
+   * the parent stretches it to full height and the footer stays at the bottom.
+   */
+  height: auto;
+  min-height: 100%;
+  max-height: 100%;
+  color: var(--juxt-fg);
+  font-family: var(--juxt-font-sans);
+}
+.j-sidebar__header {
+  display: flex;
+  align-items: center;
+  gap: var(--juxt-space-2);
+  padding: var(--juxt-space-3) var(--juxt-space-3) var(--juxt-space-2);
+}
+.j-sidebar__nav {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--juxt-space-4);
+  min-height: 0;
+  padding: var(--juxt-space-2);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+.j-sidebar__footer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--juxt-space-0-5);
+  padding: var(--juxt-space-2);
+  border-top: 1px solid var(--juxt-border-subtle);
+}
+.dark .j-sidebar__footer,
+[data-theme='dark'] .j-sidebar__footer {
+  border-top-color: var(--juxt-border);
+}
+}
+
+@layer theme, base, juxt, components, utilities;
+@layer juxt {
+.j-sidebar-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--juxt-space-0-5);
+}
+.j-sidebar-group__title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--juxt-space-2);
+  margin: 0;
+  padding: var(--juxt-space-1) var(--juxt-space-2);
+  color: var(--juxt-fg-muted);
+  font-size: var(--juxt-text-xs);
+  font-weight: var(--juxt-weight-medium);
+  line-height: var(--juxt-leading-snug);
+}
+.j-sidebar-group__toggle {
+  width: 100%;
+  border: 0;
+  border-radius: var(--juxt-radius-xs);
+  background: transparent;
+  font-family: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition-property: color, outline-color, outline-offset;
+}
+.j-sidebar-group__toggle:hover {
+  color: var(--juxt-fg-secondary);
+}
+.j-sidebar-group__chevron {
+  flex: none;
+  width: 0.75rem;
+  height: 0.75rem;
+  opacity: 0;
+  transform: rotate(-90deg);
+  transition:
+    transform var(--juxt-duration-normal) var(--juxt-ease-out),
+    opacity var(--juxt-duration-fast) var(--juxt-ease-standard);
+}
+
+/* The chevron only appears on hover or focus, or while the group is folded. */
+.j-sidebar-group__toggle:hover .j-sidebar-group__chevron,
+.j-sidebar-group__toggle:focus-visible .j-sidebar-group__chevron,
+.j-sidebar-group[data-state='closed'] .j-sidebar-group__chevron {
+  opacity: 1;
+}
+.j-sidebar-group[data-state='open'] .j-sidebar-group__chevron {
+  transform: none;
+}
+.j-sidebar-group__panel {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows var(--juxt-duration-normal) var(--juxt-ease-out);
+}
+.j-sidebar-group[data-state='closed'] .j-sidebar-group__panel {
+  grid-template-rows: 0fr;
+}
+.j-sidebar-group__panel-inner {
+  min-height: 0;
+  overflow: hidden;
+}
+.j-sidebar-group__items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--juxt-space-0-5);
+}
+@media (prefers-reduced-motion: reduce) {
+.j-sidebar-group__panel,
+  .j-sidebar-group__chevron {
+    transition: none;
+}
+}
+}
+
+@layer theme, base, juxt, components, utilities;
+@layer juxt {
+.j-sidebar-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--juxt-space-2);
+  min-height: var(--juxt-control-sm);
+  padding: 0 var(--juxt-space-2);
+  border-radius: var(--juxt-radius-sm);
+  color: var(--juxt-fg-secondary);
+  font-size: var(--juxt-text-sm);
+  letter-spacing: var(--juxt-tracking-tight);
+  text-decoration: none;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition-property: color, background-color, outline-color, outline-offset;
+}
+.j-sidebar-item:hover:not(.is-disabled) {
+  background: var(--juxt-surface-hover);
+  color: var(--juxt-fg);
+}
+.j-sidebar-item.is-active {
+  background: var(--juxt-surface-hover);
+  color: var(--juxt-fg);
+  font-weight: var(--juxt-weight-medium);
+}
+
+/* Same marker as the command palette: a short accent line where you are. */
+.j-sidebar-item.is-active::before {
+  content: '';
+  position: absolute;
+  top: 0.4375rem;
+  bottom: 0.4375rem;
+  left: 0;
+  width: 2px;
+  border-radius: 0 2px 2px 0;
+  background: var(--juxt-accent);
+}
+.j-sidebar-item.is-disabled {
+  color: var(--juxt-fg-disabled);
+  cursor: not-allowed;
+}
+.j-sidebar-item__icon {
+  display: inline-flex;
+  flex: none;
+  color: var(--juxt-fg-muted);
+}
+.j-sidebar-item.is-active .j-sidebar-item__icon,
+.j-sidebar-item:hover:not(.is-disabled) .j-sidebar-item__icon {
+  color: var(--juxt-fg);
+}
+.j-sidebar-item__icon > svg {
+  width: 1rem;
+  height: 1rem;
+}
+.j-sidebar-item__label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.j-sidebar-item__trailing {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  color: var(--juxt-fg-muted);
+  font-size: var(--juxt-text-xs);
+  font-variant-numeric: tabular-nums;
+}
+}
+
 @layer theme, base, juxt, components, utilities;
 @layer juxt {
 .j-skeleton {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juxtui/ui",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Thoughtfully crafted components for Nuxt & Vue.",
   "license": "MIT",
   "author": "Julius K.",