@zeyos/zx 5.0.0 → 5.2.0

package/dist/zx.css

@@ -175,6 +175,30 @@
 }
 
 /* styles/tokens/semantic.css */
+:root {
+  --zx-control-height: 30px;
+  --zx-control-pad-x: 10px;
+  --zx-control-radius: var(--zx-radius-lg);
+  --zx-control-font-size: var(--zx-text-md);
+  --zx-control-font-weight: 500;
+  --zx-overlay-blur: 8px;
+  --zx-app-icon-core-strength: 52%;
+  --zx-app-icon-rim-strength: 58%;
+  --zx-app-icon-bloom-strength: 64%;
+  --zx-app-icon-specular-strength: 72%;
+  --zx-app-icon-halo-size: 14px;
+  --zx-app-icon-halo-strength: 22%;
+  --zx-overlay-specular-strength: 48%;
+  --zx-glass-blur: 8px;
+  --zx-glass-saturation: 130%;
+  --zx-glass-color-strength: 82%;
+  --zx-glass-filter-icon: blur(4px) saturate(118%);
+  --zx-glass-filter-control: blur(6px) saturate(116%);
+  --zx-glass-filter-raised: blur(8px) saturate(120%);
+  --zx-glass-filter-chrome: blur(10px) saturate(122%);
+  --zx-glass-filter-overlay: blur(16px) saturate(140%);
+  --zx-glass-filter-panel: blur(14px) saturate(132%);
+}
 :root,
 [data-zx-theme=light] {
   color-scheme: light;
@@ -230,34 +254,22 @@
   --zx-color-chart-6: var(--zx-tone-green-500);
   --zx-color-chart-7: var(--zx-tone-violet-500);
   --zx-color-chart-8: var(--zx-tone-red-500);
-  --zx-control-height: 30px;
-  --zx-control-pad-x: 10px;
-  --zx-control-radius: var(--zx-radius-lg);
-  --zx-control-font-size: var(--zx-text-md);
-  --zx-control-font-weight: 500;
+  --zx-color-tone-blue-solid: var(--zx-tone-blue-500);
+  --zx-color-tone-teal-solid: var(--zx-tone-teal-500);
+  --zx-color-tone-green-solid: var(--zx-tone-green-500);
+  --zx-color-tone-amber-solid: var(--zx-tone-amber-500);
+  --zx-color-tone-orange-solid: var(--zx-tone-orange-500);
+  --zx-color-tone-red-solid: var(--zx-tone-red-500);
+  --zx-color-tone-pink-solid: var(--zx-tone-pink-500);
+  --zx-color-tone-violet-solid: var(--zx-tone-violet-500);
+  --zx-color-tone-slate-solid: var(--zx-tone-slate-500);
+  --zx-surface-shadow: var(--zx-shadow-1);
   --zx-overlay-shadow: var(--zx-shadow-3);
   --zx-drag-shadow: 0 2px 4px -1px color-mix(in srgb, var(--zx-gray-950) 10%, transparent), 0 12px 28px -6px color-mix(in srgb, var(--zx-gray-950) 22%, transparent);
-  --zx-overlay-blur: 8px;
   --zx-color-glass-border: color-mix(in srgb, var(--zx-gray-0) 24%, transparent);
   --zx-color-glass-highlight: color-mix(in srgb, var(--zx-gray-0) 24%, transparent);
   --zx-color-glass-highlight-strong: color-mix(in srgb, var(--zx-gray-0) 38%, transparent);
-  --zx-app-icon-core-strength: 52%;
-  --zx-app-icon-rim-strength: 58%;
-  --zx-app-icon-bloom-strength: 64%;
-  --zx-app-icon-specular-strength: 72%;
-  --zx-app-icon-halo-size: 14px;
-  --zx-app-icon-halo-strength: 22%;
   --zx-color-overlay-backdrop: color-mix(in srgb, var(--zx-gray-950) 28%, transparent);
-  --zx-overlay-specular-strength: 48%;
-  --zx-glass-blur: 8px;
-  --zx-glass-saturation: 130%;
-  --zx-glass-color-strength: 82%;
-  --zx-glass-filter-icon: blur(4px) saturate(118%);
-  --zx-glass-filter-control: blur(6px) saturate(116%);
-  --zx-glass-filter-raised: blur(8px) saturate(120%);
-  --zx-glass-filter-chrome: blur(10px) saturate(122%);
-  --zx-glass-filter-overlay: blur(16px) saturate(140%);
-  --zx-glass-filter-panel: blur(14px) saturate(132%);
   --zx-glass-control-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 18%, transparent), var(--zx-shadow-1);
   --zx-glass-chrome-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 16%, transparent), var(--zx-shadow-1);
   --zx-header-bg: var(--zx-gray-900);
@@ -484,6 +496,7 @@
   --zx-color-tone-slate-fg: var(--zx-tone-slate-300);
   --zx-color-ring: var(--zx-color-accent);
   --zx-focus-ring: 0 0 0 3px color-mix(in srgb, var(--zx-color-ring) 45%, transparent);
+  --zx-surface-shadow: var(--zx-shadow-1);
   --zx-overlay-shadow: 0 12px 36px rgb(0 0 0 / 45%);
   --zx-drag-shadow:
     0 0 0 1px color-mix(in srgb, var(--zx-gray-0) 7%, transparent),
@@ -553,6 +566,7 @@
     --zx-color-tone-slate-fg: var(--zx-tone-slate-300);
     --zx-color-ring: var(--zx-color-accent);
     --zx-focus-ring: 0 0 0 3px color-mix(in srgb, var(--zx-color-ring) 45%, transparent);
+    --zx-surface-shadow: var(--zx-shadow-1);
     --zx-overlay-shadow: 0 12px 36px rgb(0 0 0 / 45%);
     --zx-drag-shadow:
       0 0 0 1px color-mix(in srgb, var(--zx-gray-0) 7%, transparent),
@@ -692,6 +706,11 @@
   outline-offset: 2px;
   box-shadow: var(--zx-focus-ring);
 }
+@media (forced-colors: active) {
+  .zx-scope :focus-visible {
+    outline: 2px solid Highlight !important;
+  }
+}
 .zx-scope ::selection {
   background: var(--zx-color-accent);
   color: var(--zx-color-on-accent);
@@ -753,7 +772,8 @@
   color: var(--zx-color-text);
 }
 .zx-scope .zx-icon-btn:focus-visible {
-  outline: 0;
+  outline-color: transparent;
+  outline-offset: -2px;
   box-shadow: inset var(--zx-focus-ring);
 }
 .zx-scope .zx-icon-btn:disabled {
@@ -1689,7 +1709,7 @@ svg.zx-icon {
   text-overflow: ellipsis;
 }
 .zx-copy-input__field:focus-visible {
-  outline: 0;
+  outline-color: transparent;
   box-shadow: none;
 }
 .zx-copy-input[data-size=sm] .zx-copy-input__field {
@@ -1738,7 +1758,7 @@ svg.zx-icon {
   padding: var(--zx-space-3);
   border: 0;
   border-radius: 0;
-  outline: 0;
+  outline-color: transparent;
   background: transparent;
   box-shadow: none;
   color: var(--zx-color-text);
@@ -1972,7 +1992,7 @@ svg.zx-icon {
   background: var(--zx-color-bg-hover);
 }
 .zx-card:has(.zx-card__primary:focus-visible) {
-  outline: 0;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 .zx-card__layout,
@@ -2037,7 +2057,7 @@ svg.zx-icon {
   z-index: 1;
 }
 .zx-card__primary:focus-visible {
-  outline: 0;
+  outline-color: transparent;
 }
 .zx-card__actions,
 .zx-card__content :is(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])),
@@ -2294,7 +2314,7 @@ svg.zx-icon {
   border: 1px solid var(--zx-color-border);
   border-radius: var(--zx-radius-lg);
   background: var(--zx-color-bg-surface);
-  box-shadow: var(--zx-shadow-1);
+  box-shadow: var(--zx-surface-shadow);
 }
 .zx-panel__header {
   display: flex;
@@ -2331,7 +2351,8 @@ button.zx-panel__toggle:hover {
   background: var(--zx-color-bg-hover);
 }
 button.zx-panel__toggle:focus-visible {
-  outline: 0;
+  outline-color: transparent;
+  outline-offset: -2px;
   box-shadow: inset var(--zx-focus-ring);
 }
 .zx-panel__title {
@@ -2524,7 +2545,8 @@ button.zx-panel__toggle:focus-visible {
 }
 .zx-tabbox[data-variant=divided] .zx-tabbox__tab:focus-visible {
   z-index: 1;
-  outline: 0;
+  outline-color: transparent;
+  outline-offset: -2px;
   box-shadow: inset var(--zx-focus-ring);
 }
 .zx-tabbox[data-variant=bracket] .zx-tabbox__tablist {
@@ -2557,7 +2579,8 @@ button.zx-panel__toggle:focus-visible {
 }
 .zx-tabbox[data-variant=bracket] .zx-tabbox__tab:focus-visible {
   z-index: 1;
-  outline: 0;
+  outline-color: transparent;
+  outline-offset: -2px;
   box-shadow: inset var(--zx-focus-ring);
 }
 .zx-tabbox[data-variant=line] .zx-tabbox__tablist {
@@ -2576,7 +2599,8 @@ button.zx-panel__toggle:focus-visible {
 }
 .zx-tabbox[data-variant=line] .zx-tabbox__tab:focus-visible {
   z-index: 1;
-  outline: 0;
+  outline-color: transparent;
+  outline-offset: -2px;
   box-shadow: inset var(--zx-focus-ring);
 }
 .zx-tabbox[data-variant=segmented] .zx-tabbox__tablist {
@@ -2603,7 +2627,7 @@ button.zx-panel__toggle:focus-visible {
 }
 .zx-tabbox[data-variant=segmented] .zx-tabbox__tab:focus-visible {
   z-index: 1;
-  outline: 0;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 @media (prefers-reduced-motion: no-preference) {
@@ -2654,7 +2678,8 @@ button.zx-panel__toggle:focus-visible {
   padding: var(--zx-space-4);
 }
 .zx-tabbox__panel:focus-visible {
-  outline: 0;
+  outline-color: transparent;
+  outline-offset: -2px;
   box-shadow: inset var(--zx-focus-ring);
 }
 
@@ -2837,6 +2862,7 @@ button.zx-panel__toggle:focus-visible {
   box-shadow: var(--zx-focus-ring);
 }
 .zx-search__input {
+  flex: 1 1 auto;
   min-inline-size: 12rem;
   min-block-size: 0;
   border: 0;
@@ -2912,6 +2938,33 @@ button.zx-panel__toggle:focus-visible {
 .zx-app-icon[data-shape=circle] {
   border-radius: var(--zx-radius-full);
 }
+.zx-app-icon[data-tone=blue] {
+  --zx-app-icon-color: var(--zx-color-tone-blue-solid);
+}
+.zx-app-icon[data-tone=teal] {
+  --zx-app-icon-color: var(--zx-color-tone-teal-solid);
+}
+.zx-app-icon[data-tone=green] {
+  --zx-app-icon-color: var(--zx-color-tone-green-solid);
+}
+.zx-app-icon[data-tone=amber] {
+  --zx-app-icon-color: var(--zx-color-tone-amber-solid);
+}
+.zx-app-icon[data-tone=orange] {
+  --zx-app-icon-color: var(--zx-color-tone-orange-solid);
+}
+.zx-app-icon[data-tone=red] {
+  --zx-app-icon-color: var(--zx-color-tone-red-solid);
+}
+.zx-app-icon[data-tone=pink] {
+  --zx-app-icon-color: var(--zx-color-tone-pink-solid);
+}
+.zx-app-icon[data-tone=violet] {
+  --zx-app-icon-color: var(--zx-color-tone-violet-solid);
+}
+.zx-app-icon[data-tone=slate] {
+  --zx-app-icon-color: var(--zx-color-tone-slate-solid);
+}
 .zx-app-icon__surface {
   position: absolute;
   z-index: 0;
@@ -2950,7 +3003,7 @@ button.zx-panel__toggle:focus-visible {
   display: none;
 }
 .zx-app-icon[data-selected] .zx-app-icon__surface {
-  outline: none;
+  outline-color: transparent;
   box-shadow:
     0 0 0 1px var(--zx-color-bg-page),
     0 0 0 3px var(--zx-app-icon-selected-ring),
@@ -3051,7 +3104,7 @@ button.zx-panel__toggle:focus-visible {
 }
 .zx-app-icon:is(a, button, [role=button]):not(:disabled):not([aria-disabled=true]):focus-visible .zx-app-icon__surface,
 :is(a, button, [role=button]):not(:disabled):not([aria-disabled=true]):focus-visible .zx-app-icon__surface {
-  outline: none;
+  outline-color: transparent;
   box-shadow:
     var(--zx-focus-ring),
     var(--zx-app-icon-shadow-hover),
@@ -3173,7 +3226,7 @@ button.zx-panel__toggle:focus-visible {
   flex: 1 1 0;
   min-inline-size: 0;
   border: 0;
-  outline: 0;
+  outline-color: transparent;
   background: transparent;
   color: inherit;
   font-size: var(--zx-text-lg);
@@ -4055,6 +4108,153 @@ button.zx-panel__toggle:focus-visible {
   font-size: var(--zx-text-xs);
 }
 
+/* src/components/workspace-switcher/workspace-switcher.css */
+.zx-workspace-switcher {
+  --zx-workspace-switcher-tile: calc(var(--zx-control-height) - var(--zx-space-1));
+  display: block;
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+.zx-workspace-switcher .zx-workspace-switcher__trigger {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  justify-content: stretch;
+  gap: var(--zx-space-2);
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-block-size: calc(var(--zx-control-height) + var(--zx-space-2));
+  border: 0;
+  border-radius: var(--zx-radius-md);
+  background: transparent;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  box-shadow: none;
+  padding-block: var(--zx-space-1);
+  padding-inline: var(--zx-space-1) var(--zx-space-2);
+  color: var(--zx-color-text);
+  font-weight: var(--zx-weight-medium);
+  line-height: 1.3;
+  text-align: start;
+}
+.zx-workspace-switcher .zx-workspace-switcher__trigger:is(:hover, [aria-expanded=true]):not(:disabled) {
+  background: var(--zx-color-bg-hover);
+}
+.zx-workspace-switcher .zx-workspace-switcher__trigger:active:not(:disabled) {
+  background: var(--zx-color-bg-current);
+}
+.zx-workspace-switcher .zx-workspace-switcher__trigger:focus-visible {
+  outline-color: transparent;
+  box-shadow: var(--zx-focus-ring);
+}
+.zx-workspace-switcher__tile {
+  display: inline-grid;
+  place-items: center;
+  inline-size: var(--zx-workspace-switcher-tile);
+  block-size: var(--zx-workspace-switcher-tile);
+}
+.zx-workspace-switcher__tile[hidden] {
+  display: none;
+}
+.zx-workspace-switcher__text {
+  display: grid;
+  min-inline-size: 0;
+  gap: 1px;
+}
+.zx-workspace-switcher__name,
+.zx-workspace-switcher__secondary {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.zx-workspace-switcher__name {
+  font-size: var(--zx-text-md);
+  font-weight: var(--zx-weight-semibold);
+}
+.zx-workspace-switcher__secondary {
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+  font-weight: 400;
+}
+.zx-workspace-switcher__secondary[hidden] {
+  display: none;
+}
+.zx-workspace-switcher__chevron {
+  display: inline-flex;
+  color: var(--zx-color-text-subtle);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .zx-workspace-switcher .zx-workspace-switcher__trigger {
+    transition: background-color var(--zx-dur-fast) var(--zx-ease);
+  }
+  .zx-workspace-switcher__chevron {
+    transition: transform var(--zx-dur-fast) var(--zx-ease);
+  }
+}
+.zx-workspace-switcher__trigger[aria-expanded=true] .zx-workspace-switcher__chevron {
+  transform: rotate(180deg);
+}
+.zx-workspace-switcher[data-compact=true] {
+  inline-size: fit-content;
+}
+.zx-workspace-switcher[data-compact=true] .zx-workspace-switcher__trigger {
+  display: inline-grid;
+  grid-template-columns: auto;
+  place-content: center;
+  inline-size: calc(var(--zx-control-height) + var(--zx-space-2));
+  block-size: calc(var(--zx-control-height) + var(--zx-space-2));
+  padding: 0;
+}
+.zx-workspace-switcher[data-compact=true] .zx-workspace-switcher__text,
+.zx-workspace-switcher[data-compact=true] .zx-workspace-switcher__chevron {
+  display: none;
+}
+.zx-workspace-switcher__image {
+  display: block;
+  overflow: hidden;
+  inline-size: var(--zx-workspace-switcher-tile);
+  block-size: var(--zx-workspace-switcher-tile);
+  border-radius: var(--zx-radius-sm);
+  background: var(--zx-color-bg-muted);
+}
+.zx-workspace-switcher__image > img {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+}
+.zx-workspace-switcher__initials {
+  font-weight: var(--zx-weight-semibold);
+  line-height: 1;
+  letter-spacing: 0;
+}
+.zx-workspace-switcher__menu {
+  --zx-workspace-switcher-tile: calc(var(--zx-control-height) - var(--zx-space-2));
+  min-inline-size: 240px;
+}
+.zx-workspace-switcher__menu .zx-menu-button__leading {
+  inline-size: var(--zx-workspace-switcher-tile);
+}
+.zx-workspace-switcher__menu .zx-workspace-switcher__option[aria-checked=true] {
+  background: var(--zx-color-bg-current);
+}
+.zx-workspace-switcher__menu .zx-workspace-switcher__option[aria-checked=true]:is(:hover, :focus-visible) {
+  background: var(--zx-color-overlay-hover);
+}
+.zx-workspace-switcher__check {
+  display: inline-flex;
+  color: var(--zx-color-accent);
+}
+.zx-workspace-switcher__option[aria-checked=false] .zx-workspace-switcher__check {
+  visibility: hidden;
+}
+@media (forced-colors: active) {
+  .zx-workspace-switcher .zx-workspace-switcher__trigger:focus-visible {
+    outline: 2px solid Highlight;
+  }
+}
+
 /* src/components/app-rail/app-rail.css */
 .zx-app-rail {
   display: flex;
@@ -4106,6 +4306,21 @@ button.zx-panel__toggle:focus-visible {
 .zx-app-rail__row {
   display: flex;
 }
+.zx-app-rail__separator {
+  flex: none;
+  align-self: center;
+  background: var(--zx-color-border-subtle);
+}
+.zx-app-rail[data-orientation=vertical] .zx-app-rail__separator {
+  inline-size: var(--zx-space-4);
+  block-size: 1px;
+  margin-block: var(--zx-space-1);
+}
+.zx-app-rail[data-orientation=horizontal] .zx-app-rail__separator {
+  inline-size: 1px;
+  block-size: var(--zx-space-4);
+  margin-inline: var(--zx-space-1);
+}
 .zx-app-rail__item {
   position: relative;
   display: inline-grid;
@@ -4188,6 +4403,13 @@ button.zx-panel__toggle:focus-visible {
   font-weight: var(--zx-weight-semibold);
   line-height: 1.3;
 }
+.zx-app-rail__flyout-section {
+  padding: var(--zx-space-2) var(--zx-app-rail-pad-x) var(--zx-space-1);
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+  font-weight: var(--zx-weight-semibold);
+  line-height: 1.3;
+}
 .zx-app-rail__flyout-list {
   display: grid;
   gap: var(--zx-app-rail-row-gap);
@@ -4323,75 +4545,548 @@ button.zx-panel__toggle:focus-visible {
   }
 }
 
-/* src/components/app-sidebar/app-sidebar.css */
-.zx-app-sidebar {
-  --zx-app-sidebar-gutter: var(--zx-space-2);
-  --zx-app-sidebar-icon: var(--zx-space-6);
-  --zx-app-sidebar-item-gap: var(--zx-space-2);
-  --zx-app-sidebar-item-height: var(--zx-control-height);
-  --zx-app-sidebar-pad-x: var(--zx-space-2);
-  --zx-app-sidebar-row-gap: 2px;
-  --zx-app-sidebar-group-gap: var(--zx-space-3);
-  --zx-app-sidebar-indent: var(--zx-space-3);
-  --zx-app-sidebar-icon-indent: var(--zx-space-4);
-  --zx-app-sidebar-radius: var(--zx-radius-md);
-  --zx-app-sidebar-hover: var(--zx-color-bg-hover);
-  --zx-app-sidebar-current: var(--zx-color-bg-current);
-  --zx-app-sidebar-press: color-mix(in srgb, var(--zx-color-text) 12%, transparent);
+/* src/components/module-bar/module-bar.css */
+.zx-module-bar {
+  --zx-module-bar-target: calc(var(--zx-control-height) + var(--zx-space-2));
+  --zx-module-bar-tile: calc(var(--zx-control-height) - var(--zx-space-1));
+  --zx-module-bar-gap: var(--zx-space-1);
+  --zx-module-bar-pad: var(--zx-space-2);
+  --zx-module-bar-radius: var(--zx-radius-lg);
+  --zx-module-bar-column: 12rem;
   display: flex;
+  box-sizing: border-box;
+  min-inline-size: 0;
   min-block-size: 0;
-  border: 1px solid var(--zx-color-glass-border);
-  background: var(--zx-color-glass-chrome);
-  box-shadow: var(--zx-glass-chrome-shadow);
+  background: var(--zx-color-bg-chrome);
   color: var(--zx-color-text);
 }
-.zx-app-sidebar[data-orientation=horizontal] {
-  inline-size: 100%;
+.zx-module-bar[data-orientation=vertical] {
+  flex-direction: column;
+  inline-size: calc(var(--zx-module-bar-target) + 2 * var(--zx-module-bar-pad));
+  block-size: 100%;
 }
-.zx-app-sidebar[data-orientation=horizontal] > .zx-app-sidebar__rail {
-  inline-size: 100%;
+.zx-module-bar[data-orientation=vertical][data-labels=beside] {
+  inline-size: var(--zx-module-bar-column);
 }
-.zx-app-sidebar__rail.zx-app-rail {
-  border: 0;
+.zx-module-bar[data-orientation=vertical][data-labels=beside] > .zx-module-bar__list {
+  align-items: stretch;
 }
-.zx-app-sidebar__expanded {
-  display: grid;
-  grid-template-rows: auto minmax(0, 1fr) auto;
-  inline-size: min(280px, 100vw);
-  min-block-size: 0;
+.zx-module-bar[data-orientation=vertical][data-labels=beside] > .zx-module-bar__header {
+  align-items: stretch;
 }
-.zx-app-sidebar__expanded[hidden],
-.zx-app-sidebar__rail[hidden] {
-  display: none;
+.zx-module-bar[data-orientation=vertical][data-labels=beside] > .zx-module-bar__footer {
+  align-items: stretch;
 }
-.zx-app-sidebar__header {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+.zx-module-bar[data-labels=beside] .zx-module-bar__item {
+  grid-template-columns: var(--zx-module-bar-tile) minmax(0, 1fr) auto;
+  place-content: normal;
   align-items: center;
-  gap: var(--zx-space-2);
-  min-block-size: calc(var(--zx-control-height) + var(--zx-space-4));
-  padding: var(--zx-space-2) var(--zx-space-3);
+  justify-items: start;
+  column-gap: var(--zx-space-2);
+  inline-size: 100%;
+  block-size: auto;
+  min-block-size: var(--zx-module-bar-target);
+  padding: var(--zx-space-1) var(--zx-space-2);
+  color: var(--zx-color-text);
+  font-size: var(--zx-text-md);
+  font-weight: 500;
+  line-height: 1.3;
+  text-align: start;
 }
-.zx-app-sidebar__header-content {
-  min-inline-size: 0;
+.zx-module-bar[data-labels=beside] .zx-module-bar__label {
+  text-align: start;
 }
-.zx-app-sidebar .zx-app-sidebar__collapse[hidden] {
-  display: none;
+.zx-module-bar[data-labels=beside] .zx-module-bar__badge {
+  position: static;
+  justify-self: end;
+  box-shadow: none;
 }
-.zx-app-sidebar__nav {
-  min-block-size: 0;
-  overflow: auto;
-  padding: var(--zx-space-2) var(--zx-app-sidebar-gutter) var(--zx-space-3);
+.zx-module-bar[data-orientation=vertical][data-labels=below] {
+  --zx-module-bar-target: calc(var(--zx-control-height) + var(--zx-space-8));
 }
-.zx-app-sidebar__list,
-.zx-app-sidebar__sublist {
-  display: grid;
-  gap: var(--zx-app-sidebar-row-gap);
-  margin: 0;
+.zx-module-bar[data-orientation=horizontal] {
+  flex-direction: row;
+  align-items: center;
+  inline-size: 100%;
+  block-size: calc(var(--zx-module-bar-target) + 2 * var(--zx-space-1));
+}
+@media (pointer: coarse) {
+  .zx-module-bar {
+    --zx-module-bar-target: max(40px, calc(var(--zx-control-height) + var(--zx-space-2)));
+  }
+}
+.zx-module-bar__header,
+.zx-module-bar__footer {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  gap: var(--zx-module-bar-gap);
+  padding: var(--zx-module-bar-pad);
+}
+.zx-module-bar[data-orientation=vertical] > .zx-module-bar__header,
+.zx-module-bar[data-orientation=vertical] > .zx-module-bar__footer {
+  flex-direction: column;
+}
+.zx-module-bar[data-orientation=horizontal] > .zx-module-bar__header,
+.zx-module-bar[data-orientation=horizontal] > .zx-module-bar__footer {
+  padding-block: 0;
+}
+.zx-module-bar__header[hidden],
+.zx-module-bar__footer[hidden] {
+  display: none;
+}
+.zx-module-bar__list {
+  display: flex;
+  flex: 1;
+  gap: var(--zx-module-bar-gap);
+  min-inline-size: 0;
+  min-block-size: 0;
+  margin: 0;
+  padding: var(--zx-space-1);
+  overflow: hidden;
+  list-style: none;
+}
+.zx-module-bar[data-orientation=vertical] > .zx-module-bar__list {
+  flex-direction: column;
+  align-items: center;
+}
+.zx-module-bar[data-orientation=horizontal] > .zx-module-bar__list {
+  flex-direction: row;
+  align-items: center;
+}
+.zx-module-bar[data-all-modules=never] > .zx-module-bar__list {
+  overflow: auto;
+  scrollbar-width: none;
+}
+.zx-module-bar__row {
+  display: flex;
+  flex: none;
+}
+.zx-module-bar__row[hidden],
+.zx-module-bar__heading[hidden] {
+  display: none;
+}
+.zx-module-bar__heading {
+  position: relative;
+  flex: none;
+  align-self: center;
+  background: var(--zx-color-border-subtle);
+}
+.zx-module-bar[data-orientation=vertical] .zx-module-bar__heading {
+  inline-size: var(--zx-space-4);
+  block-size: 1px;
+  margin-block: var(--zx-space-1);
+}
+.zx-module-bar[data-orientation=horizontal] .zx-module-bar__heading {
+  inline-size: 1px;
+  block-size: var(--zx-space-4);
+  margin-inline: var(--zx-space-1);
+}
+.zx-module-bar:not([data-labels=beside]) .zx-module-bar__heading[data-leading] {
+  display: none;
+}
+.zx-module-bar__heading-label {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.zx-module-bar[data-orientation=vertical][data-labels=beside] .zx-module-bar__heading {
+  align-self: stretch;
+  inline-size: auto;
+  block-size: auto;
+  margin-block: var(--zx-space-2) 0;
+  padding: var(--zx-space-1) var(--zx-space-2);
+  background: none;
+}
+.zx-module-bar[data-orientation=vertical][data-labels=beside] .zx-module-bar__heading[data-leading] {
+  margin-block-start: 0;
+}
+.zx-module-bar[data-labels=beside] .zx-module-bar__heading-label {
+  position: static;
+  inline-size: auto;
+  block-size: auto;
+  overflow: visible;
+  clip-path: none;
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+  font-weight: var(--zx-weight-semibold);
+  line-height: 1.3;
+  white-space: normal;
+}
+.zx-module-bar__item {
+  position: relative;
+  display: grid;
+  place-content: center;
+  justify-items: center;
+  box-sizing: border-box;
+  inline-size: var(--zx-module-bar-target);
+  block-size: var(--zx-module-bar-target);
+  border: 0;
+  border-radius: var(--zx-module-bar-radius);
+  background: transparent;
+  padding: 0;
+  color: var(--zx-color-text-muted);
+  font: inherit;
+  text-decoration: none;
+  cursor: pointer;
+}
+.zx-module-bar[data-labels=below] .zx-module-bar__item {
+  align-content: start;
+  gap: var(--zx-space-1);
+  block-size: auto;
+  min-block-size: calc(var(--zx-module-bar-tile) + 2lh + var(--zx-space-3));
+  padding: var(--zx-space-1) 2px;
+  font-size: var(--zx-text-xs);
+  line-height: 1.2;
+}
+.zx-module-bar__item:hover {
+  background: var(--zx-color-bg-hover);
+  color: var(--zx-color-text);
+}
+.zx-module-bar__item:focus-visible {
+  outline-color: transparent;
+  box-shadow: var(--zx-focus-ring);
+}
+.zx-module-bar[data-menus=flyout] .zx-module-bar__item[aria-current],
+.zx-module-bar[data-menus=none] .zx-module-bar__item[aria-expanded=true],
+.zx-module-bar[data-menus=none]:not(:has(.zx-module-bar__item[aria-expanded=true])) .zx-module-bar__item[aria-current] {
+  background: var(--zx-color-bg-current);
+  color: var(--zx-color-text);
+}
+.zx-module-bar__item[aria-current],
+.zx-module-bar__item[data-module-bar-more][aria-expanded=true],
+.zx-module-bar[data-menus=flyout] .zx-module-bar__item[aria-expanded=true] {
+  color: var(--zx-color-text);
+}
+.zx-module-bar[data-menus=flyout] .zx-module-bar__item[aria-expanded=true]:not([aria-current]),
+.zx-module-bar__item[data-module-bar-more][aria-expanded=true] {
+  background: var(--zx-color-bg-hover);
+}
+.zx-module-bar__item[aria-current] .zx-module-bar__label,
+.zx-module-bar[data-menus=none] .zx-module-bar__item[aria-expanded=true] .zx-module-bar__label {
+  font-weight: var(--zx-weight-semibold);
+}
+.zx-module-bar__item[aria-disabled=true],
+.zx-module-bar__entry[aria-disabled=true] {
+  color: var(--zx-color-text-muted);
+  cursor: not-allowed;
+}
+.zx-module-bar__item[aria-disabled=true] .zx-module-bar__tile,
+.zx-module-bar__entry[aria-disabled=true] .zx-module-bar__tile {
+  opacity: .55;
+}
+.zx-module-bar__item[aria-disabled=true]:hover,
+.zx-module-bar__entry[aria-disabled=true]:hover {
+  background: transparent;
+}
+.zx-module-bar__label {
+  max-inline-size: 100%;
+  hyphens: auto;
+  overflow-wrap: break-word;
+  text-align: center;
+}
+.zx-module-bar__tile {
+  --zx-module-bar-fill: transparent;
+  --zx-module-bar-ink: currentColor;
+  display: grid;
+  flex: none;
+  place-items: center;
+  inline-size: var(--zx-module-bar-tile);
+  block-size: var(--zx-module-bar-tile);
+  border-radius: var(--zx-radius-lg);
+  background: var(--zx-module-bar-fill);
+  color: var(--zx-module-bar-ink);
+  font-size: calc(var(--zx-module-bar-tile) * .58);
+  line-height: 1;
+}
+.zx-module-bar__initial {
+  font-size: .9em;
+  font-weight: var(--zx-weight-semibold);
+}
+.zx-module-bar__tile[data-appearance=tint][data-color] {
+  --zx-module-bar-fill: color-mix(in srgb, var(--zx-module-bar-color) 16%, var(--zx-color-bg-surface));
+  --zx-module-bar-ink: color-mix(in srgb, var(--zx-module-bar-color) 70%, var(--zx-color-text));
+}
+.zx-module-bar__tile[data-appearance=tint][data-tone=blue] {
+  --zx-module-bar-fill: var(--zx-color-tone-blue-bg);
+  --zx-module-bar-ink: var(--zx-color-tone-blue-fg);
+}
+.zx-module-bar__tile[data-appearance=tint][data-tone=teal] {
+  --zx-module-bar-fill: var(--zx-color-tone-teal-bg);
+  --zx-module-bar-ink: var(--zx-color-tone-teal-fg);
+}
+.zx-module-bar__tile[data-appearance=tint][data-tone=green] {
+  --zx-module-bar-fill: var(--zx-color-tone-green-bg);
+  --zx-module-bar-ink: var(--zx-color-tone-green-fg);
+}
+.zx-module-bar__tile[data-appearance=tint][data-tone=amber] {
+  --zx-module-bar-fill: var(--zx-color-tone-amber-bg);
+  --zx-module-bar-ink: var(--zx-color-tone-amber-fg);
+}
+.zx-module-bar__tile[data-appearance=tint][data-tone=orange] {
+  --zx-module-bar-fill: var(--zx-color-tone-orange-bg);
+  --zx-module-bar-ink: var(--zx-color-tone-orange-fg);
+}
+.zx-module-bar__tile[data-appearance=tint][data-tone=red] {
+  --zx-module-bar-fill: var(--zx-color-tone-red-bg);
+  --zx-module-bar-ink: var(--zx-color-tone-red-fg);
+}
+.zx-module-bar__tile[data-appearance=tint][data-tone=pink] {
+  --zx-module-bar-fill: var(--zx-color-tone-pink-bg);
+  --zx-module-bar-ink: var(--zx-color-tone-pink-fg);
+}
+.zx-module-bar__tile[data-appearance=tint][data-tone=violet] {
+  --zx-module-bar-fill: var(--zx-color-tone-violet-bg);
+  --zx-module-bar-ink: var(--zx-color-tone-violet-fg);
+}
+.zx-module-bar__tile[data-appearance=tint][data-tone=slate] {
+  --zx-module-bar-fill: var(--zx-color-tone-slate-bg);
+  --zx-module-bar-ink: var(--zx-color-tone-slate-fg);
+}
+.zx-module-bar__tile[data-appearance=solid] {
+  font-size: inherit;
+}
+.zx-module-bar__tile[data-appearance=plain] {
+  --zx-module-bar-ink: currentColor;
+}
+.zx-module-bar__badge {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  min-inline-size: var(--zx-space-4);
+  block-size: var(--zx-space-4);
+  border-radius: var(--zx-radius-full);
+  background: var(--zx-color-accent);
+  box-shadow: 0 0 0 2px var(--zx-color-bg-chrome);
+  box-sizing: border-box;
+  padding-inline: var(--zx-space-1);
+  color: var(--zx-color-on-accent);
+  font-size: var(--zx-text-xs);
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--zx-weight-semibold);
+  line-height: var(--zx-space-4);
+  text-align: center;
+}
+.zx-module-bar__badge[data-zx-badge=dot] {
+  min-inline-size: 0;
+  inline-size: var(--zx-space-2);
+  block-size: var(--zx-space-2);
+  padding: 0;
+  font-size: 0;
+  line-height: 0;
+}
+.zx-module-bar__popover {
+  --zx-module-bar-tile: calc(var(--zx-control-height) + var(--zx-space-1));
+}
+.zx-dropdown.zx-module-bar__popover {
+  inline-size: min(26rem, calc(100vw - 2 * var(--zx-space-3)));
+  max-block-size: min(34rem, calc(100vh - 2 * var(--zx-space-6)));
+  overflow: auto;
+  padding: var(--zx-space-2);
+}
+.zx-module-bar__catalogue {
+  display: grid;
+  gap: var(--zx-space-1);
+}
+.zx-module-bar__filter {
+  box-sizing: border-box;
+  inline-size: 100%;
+  block-size: var(--zx-control-height);
+  margin-block-end: var(--zx-space-1);
+  border: 1px solid var(--zx-color-border-control);
+  border-radius: var(--zx-control-radius);
+  background: var(--zx-color-bg-control);
+  padding-inline: var(--zx-control-pad-x);
+  color: var(--zx-color-text);
+  font: inherit;
+  font-size: var(--zx-control-font-size);
+}
+.zx-module-bar__filter::placeholder {
+  color: var(--zx-color-text-placeholder);
+}
+.zx-module-bar__filter:focus-visible {
+  outline-color: transparent;
+  border-color: var(--zx-color-accent);
+  box-shadow: var(--zx-focus-ring);
+}
+.zx-module-bar__group[hidden] {
+  display: none;
+}
+.zx-module-bar__group-label {
+  padding: var(--zx-space-2) var(--zx-space-2) var(--zx-space-1);
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+  font-weight: var(--zx-weight-semibold);
+}
+.zx-module-bar__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
+  gap: var(--zx-space-1);
+  margin: 0;
   padding: 0;
   list-style: none;
 }
-.zx-app-sidebar__list:not(:has(> .zx-app-sidebar__row > .zx-app-sidebar__item .zx-app-sidebar__item-icon)),
+.zx-module-bar__grid > li {
+  display: flex;
+}
+.zx-module-bar__grid > li[hidden] {
+  display: none;
+}
+.zx-module-bar__entry {
+  position: relative;
+  display: grid;
+  align-content: start;
+  justify-items: center;
+  gap: var(--zx-space-1);
+  box-sizing: border-box;
+  inline-size: 100%;
+  border: 0;
+  border-radius: var(--zx-radius-md);
+  background: transparent;
+  padding: var(--zx-space-2) var(--zx-space-1);
+  color: var(--zx-color-text);
+  font: inherit;
+  font-size: var(--zx-text-sm);
+  line-height: 1.25;
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+}
+.zx-module-bar__entry:hover {
+  background: var(--zx-color-bg-hover);
+}
+.zx-module-bar__entry:focus-visible {
+  outline-color: transparent;
+  box-shadow: var(--zx-focus-ring);
+}
+.zx-module-bar__entry[aria-current] {
+  background: var(--zx-color-bg-current);
+  font-weight: var(--zx-weight-semibold);
+}
+.zx-module-bar__entry-label {
+  max-inline-size: 100%;
+  hyphens: auto;
+  overflow-wrap: break-word;
+}
+.zx-module-bar__entry-badge {
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+}
+.zx-module-bar__empty {
+  margin: 0;
+  padding: var(--zx-space-4) var(--zx-space-2);
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-sm);
+  text-align: center;
+}
+.zx-module-bar__empty[hidden] {
+  display: none;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .zx-module-bar__item,
+  .zx-module-bar__entry {
+    transition:
+      background-color var(--zx-dur-fast) var(--zx-ease),
+      color var(--zx-dur-fast) var(--zx-ease),
+      box-shadow var(--zx-dur-fast) var(--zx-ease);
+  }
+  .zx-module-bar__item:active,
+  .zx-module-bar__entry:active {
+    transform: scale(.96);
+  }
+}
+@media (forced-colors: active) {
+  .zx-module-bar__item[aria-current],
+  .zx-module-bar[data-menus=none] .zx-module-bar__item[aria-expanded=true],
+  .zx-module-bar__entry[aria-current] {
+    background: Highlight;
+    color: HighlightText;
+    forced-color-adjust: none;
+  }
+  .zx-module-bar__tile {
+    outline: 1px solid CanvasText;
+  }
+  .zx-module-bar__badge {
+    border: 1px solid CanvasText;
+  }
+}
+
+/* src/components/app-sidebar/app-sidebar.css */
+.zx-app-sidebar {
+  --zx-app-sidebar-gutter: var(--zx-space-2);
+  --zx-app-sidebar-icon: var(--zx-space-6);
+  --zx-app-sidebar-item-gap: var(--zx-space-2);
+  --zx-app-sidebar-item-height: var(--zx-control-height);
+  --zx-app-sidebar-pad-x: var(--zx-space-2);
+  --zx-app-sidebar-row-gap: 2px;
+  --zx-app-sidebar-group-gap: var(--zx-space-3);
+  --zx-app-sidebar-indent: var(--zx-space-3);
+  --zx-app-sidebar-icon-indent: var(--zx-space-4);
+  --zx-app-sidebar-radius: var(--zx-radius-md);
+  --zx-app-sidebar-hover: var(--zx-color-bg-hover);
+  --zx-app-sidebar-current: var(--zx-color-bg-current);
+  --zx-app-sidebar-press: color-mix(in srgb, var(--zx-color-text) 12%, transparent);
+  display: flex;
+  min-block-size: 0;
+  border: 1px solid var(--zx-color-glass-border);
+  background: var(--zx-color-glass-chrome);
+  box-shadow: var(--zx-glass-chrome-shadow);
+  color: var(--zx-color-text);
+}
+.zx-app-sidebar[data-orientation=horizontal] {
+  inline-size: 100%;
+}
+.zx-app-sidebar[data-orientation=horizontal] > .zx-app-sidebar__rail {
+  inline-size: 100%;
+}
+.zx-app-sidebar__rail.zx-app-rail {
+  border: 0;
+}
+.zx-app-sidebar__expanded {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  inline-size: min(280px, 100vw);
+  min-block-size: 0;
+}
+.zx-app-sidebar__expanded[hidden],
+.zx-app-sidebar__rail[hidden] {
+  display: none;
+}
+.zx-app-sidebar__header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--zx-space-2);
+  min-block-size: calc(var(--zx-control-height) + var(--zx-space-4));
+  padding: var(--zx-space-2) var(--zx-space-3);
+}
+.zx-app-sidebar__header-content {
+  min-inline-size: 0;
+}
+.zx-app-sidebar .zx-app-sidebar__collapse[hidden] {
+  display: none;
+}
+.zx-app-sidebar__nav {
+  min-block-size: 0;
+  overflow: auto;
+  padding: var(--zx-space-2) var(--zx-app-sidebar-gutter) var(--zx-space-3);
+}
+.zx-app-sidebar__list,
+.zx-app-sidebar__sublist {
+  display: grid;
+  gap: var(--zx-app-sidebar-row-gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.zx-app-sidebar__list:not(:has(> .zx-app-sidebar__row > .zx-app-sidebar__item .zx-app-sidebar__item-icon, > .zx-app-sidebar__section > .zx-app-sidebar__section-list > .zx-app-sidebar__row > .zx-app-sidebar__item .zx-app-sidebar__item-icon)),
+.zx-app-sidebar__section-list:not(:has(> .zx-app-sidebar__row > .zx-app-sidebar__item .zx-app-sidebar__item-icon)),
 .zx-app-sidebar__sublist:not(:has(> .zx-app-sidebar__row > .zx-app-sidebar__item .zx-app-sidebar__item-icon)) {
   --zx-app-sidebar-icon: 0px;
   --zx-app-sidebar-item-gap: 0px;
@@ -4433,6 +5128,43 @@ button.zx-panel__toggle:focus-visible {
 .zx-app-sidebar__list > .zx-app-sidebar__row:first-child {
   margin-block-start: 0;
 }
+.zx-app-sidebar__section {
+  list-style: none;
+}
+.zx-app-sidebar__section + .zx-app-sidebar__section,
+.zx-app-sidebar__section + .zx-app-sidebar__row,
+.zx-app-sidebar__row + .zx-app-sidebar__section {
+  margin-block-start: var(--zx-app-sidebar-group-gap);
+}
+.zx-app-sidebar__section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--zx-space-2);
+  min-block-size: calc(var(--zx-control-height) - var(--zx-space-1));
+  padding-inline: var(--zx-app-sidebar-pad-x) var(--zx-space-1);
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+  font-weight: var(--zx-weight-semibold);
+  line-height: 1.3;
+}
+.zx-app-sidebar__section-label {
+  min-inline-size: 0;
+  overflow-wrap: break-word;
+}
+.zx-app-sidebar__section-actions {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--zx-space-1);
+}
+.zx-app-sidebar__section-list {
+  display: grid;
+  gap: var(--zx-app-sidebar-row-gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
 .zx-app-sidebar__item {
   position: relative;
   display: grid;
@@ -4541,6 +5273,147 @@ button.zx-panel__toggle:focus-visible {
 .zx-app-sidebar__rail-header {
   display: grid;
   gap: var(--zx-space-1);
+  justify-items: center;
+}
+.zx-app-sidebar__modules {
+  display: flex;
+  min-inline-size: 0;
+  min-block-size: 0;
+}
+.zx-app-sidebar[data-side=right] .zx-app-sidebar__modules {
+  flex-direction: row-reverse;
+}
+.zx-app-sidebar__strip.zx-module-bar {
+  background: transparent;
+}
+.zx-app-sidebar__modules > .zx-app-sidebar__strip {
+  border-inline-end: 1px solid var(--zx-color-border-subtle);
+}
+.zx-app-sidebar[data-side=right] .zx-app-sidebar__modules > .zx-app-sidebar__strip {
+  border-inline-end: 0;
+  border-inline-start: 1px solid var(--zx-color-border-subtle);
+}
+.zx-app-sidebar[data-layout=modules][data-orientation=horizontal] > .zx-app-sidebar__strip {
+  inline-size: 100%;
+}
+.zx-app-sidebar__strip-foot {
+  display: grid;
+  justify-items: center;
+  gap: var(--zx-space-2);
+}
+.zx-app-sidebar__strip[data-labels=beside] .zx-app-sidebar__strip-foot {
+  justify-items: stretch;
+  padding-inline-start: calc(var(--zx-space-1) + var(--zx-space-2) - var(--zx-module-bar-pad) + (var(--zx-module-bar-tile) - var(--zx-control-height)) / 2);
+}
+.zx-app-sidebar__strip[data-labels=beside] .zx-app-sidebar__rail-header {
+  justify-items: stretch;
+}
+.zx-app-sidebar__presentation {
+  display: inline-grid;
+  justify-self: center;
+  gap: 2px;
+  border-radius: var(--zx-radius-md);
+  background: var(--zx-color-bg-hover);
+  padding: 2px;
+}
+.zx-app-sidebar__strip[data-labels=beside] .zx-app-sidebar__presentation {
+  grid-auto-flow: column;
+  justify-self: start;
+}
+.zx-app-sidebar__presentation-option {
+  display: grid;
+  place-items: center;
+  inline-size: var(--zx-space-6);
+  block-size: var(--zx-space-6);
+  border: 0;
+  border-radius: var(--zx-radius-sm);
+  background: transparent;
+  padding: 0;
+  color: var(--zx-color-text-muted);
+  cursor: pointer;
+}
+.zx-app-sidebar__presentation-option:hover {
+  color: var(--zx-color-text);
+}
+.zx-app-sidebar__presentation-option[aria-checked=true] {
+  background: var(--zx-color-bg-surface);
+  box-shadow: 0 0 0 1px var(--zx-color-border-subtle);
+  color: var(--zx-color-text);
+}
+.zx-app-sidebar__presentation-option:focus-visible {
+  outline-color: transparent;
+  box-shadow: var(--zx-focus-ring);
+}
+.zx-app-sidebar__presentation-glyph {
+  display: flex;
+  gap: 1px;
+  box-sizing: border-box;
+  inline-size: 16px;
+  block-size: 12px;
+  border: 1.5px solid currentColor;
+  border-radius: 2px;
+  padding: 1px;
+}
+.zx-app-sidebar__presentation-strip,
+.zx-app-sidebar__presentation-panel {
+  border-radius: 1px;
+  background: currentColor;
+}
+.zx-app-sidebar__presentation-strip {
+  flex: 0 0 2px;
+}
+.zx-app-sidebar__presentation-panel {
+  flex: 0 0 4px;
+  opacity: .5;
+}
+.zx-app-sidebar__presentation-glyph[data-presentation=expanded] > .zx-app-sidebar__presentation-strip {
+  flex-basis: 4px;
+}
+.zx-app-sidebar__presentation-glyph[data-presentation=collapsed] > .zx-app-sidebar__presentation-panel {
+  display: none;
+}
+@media (forced-colors: active) {
+  .zx-app-sidebar__presentation-option[aria-checked=true] {
+    background: Highlight;
+    color: HighlightText;
+    forced-color-adjust: none;
+  }
+}
+.zx-app-sidebar__panel {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  inline-size: min(14rem, 100vw - var(--zx-control-height) * 3);
+  min-block-size: 0;
+}
+.zx-app-sidebar__panel-title {
+  color: var(--zx-color-text);
+  font-size: var(--zx-text-md);
+  font-weight: var(--zx-weight-semibold);
+  line-height: 1.3;
+  overflow-wrap: break-word;
+}
+.zx-app-sidebar__panel-body {
+  display: grid;
+  grid-auto-rows: max-content;
+  align-content: start;
+  min-block-size: 0;
+  overflow: auto;
+}
+.zx-app-sidebar__panel-body > .zx-app-sidebar__nav {
+  overflow: visible;
+  min-block-size: auto;
+}
+.zx-app-sidebar__panel-body > [hidden] {
+  display: none;
+}
+.zx-app-sidebar__panel-lead {
+  display: grid;
+  gap: var(--zx-space-2);
+  padding: var(--zx-space-1) var(--zx-space-3) 0;
+}
+.zx-app-sidebar__panel-content {
+  min-inline-size: 0;
+  padding: 0 var(--zx-app-sidebar-gutter) var(--zx-space-3);
 }
 .zx-app-sidebar__rail .zx-app-rail__item {
   color: var(--zx-color-text-muted);
@@ -4597,12 +5470,16 @@ button.zx-panel__toggle:focus-visible {
     transform: scale(.985);
   }
   .zx-app-sidebar__expanded,
-  .zx-app-sidebar__rail {
+  .zx-app-sidebar__rail,
+  .zx-app-sidebar__panel {
     animation: zx-app-sidebar-mode var(--zx-dur-base) var(--zx-ease);
   }
   .zx-app-sidebar__sublist[data-branch-motion=expand] {
     animation: zx-app-sidebar-branch var(--zx-dur-base) var(--zx-ease);
   }
+  .zx-app-sidebar__panel-body[data-module-motion=enter] {
+    animation: zx-app-sidebar-mode var(--zx-dur-base) var(--zx-ease);
+  }
 }
 @keyframes zx-app-sidebar-mode {
   from {
@@ -4820,7 +5697,7 @@ button.zx-panel__toggle:focus-visible {
   padding: var(--zx-space-5);
 }
 .zx-modal:focus {
-  outline: none;
+  outline-color: transparent;
 }
 .zx-modal:focus-visible {
   outline: 2px solid var(--zx-color-ring);
@@ -5119,7 +5996,7 @@ body:has(.zx-modal:modal) {
   opacity: 1;
 }
 .zx-sheet__handle:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 .zx-sheet[data-side=start] > .zx-sheet__handle,
@@ -5373,7 +6250,7 @@ body:has(.zx-modal:modal) {
   background: var(--zx-color-accent);
 }
 .zx-split-view__divider:focus-visible {
-  outline: 0;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
   z-index: 1;
 }
@@ -5484,7 +6361,7 @@ body:has(.zx-modal:modal) {
   visibility: hidden;
 }
 .zx-dock__toggle:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 .zx-dock__chevron {
@@ -5538,7 +6415,7 @@ body:has(.zx-modal:modal) {
   font-weight: var(--zx-control-font-weight);
 }
 .zx-dock__tab:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 .zx-dock__body {
@@ -5560,7 +6437,8 @@ body:has(.zx-modal:modal) {
   block-size: 100%;
 }
 .zx-dock__panel:focus-visible {
-  outline: none;
+  outline-color: transparent;
+  outline-offset: -2px;
   box-shadow: inset var(--zx-focus-ring);
 }
 .zx-dock__divider {
@@ -5599,7 +6477,7 @@ body:has(.zx-modal:modal) {
   background: var(--zx-color-accent);
 }
 .zx-dock__divider:focus-visible {
-  outline: none;
+  outline-color: transparent;
   z-index: 1;
   box-shadow: var(--zx-focus-ring);
 }
@@ -5715,6 +6593,61 @@ body:has(.zx-modal:modal) {
   margin: var(--zx-space-1) var(--zx-space-2);
   background: var(--zx-color-overlay-divider);
 }
+.zx-menu-button__choice {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--zx-space-3);
+  min-block-size: var(--zx-control-height);
+  padding: var(--zx-space-1) var(--zx-space-2);
+}
+.zx-menu-button__choice-label {
+  color: var(--zx-color-text);
+  font-size: var(--zx-text-md);
+}
+.zx-menu-button__choice-options {
+  display: inline-flex;
+  flex: none;
+  gap: 2px;
+  border-radius: var(--zx-radius-md);
+  background: var(--zx-color-bg-hover);
+  padding: 2px;
+}
+.zx-menu-button__choice-option {
+  display: grid;
+  place-items: center;
+  inline-size: var(--zx-space-6);
+  block-size: var(--zx-space-6);
+  border: 0;
+  border-radius: var(--zx-radius-sm);
+  background: transparent;
+  padding: 0;
+  color: var(--zx-color-text-muted);
+  cursor: pointer;
+}
+.zx-menu-button__choice-option:hover {
+  color: var(--zx-color-text);
+}
+.zx-menu-button__choice-option[aria-checked=true] {
+  background: var(--zx-color-bg-surface);
+  box-shadow: 0 0 0 1px var(--zx-color-border-subtle);
+  color: var(--zx-color-text);
+}
+.zx-menu-button__choice-option[aria-disabled=true] {
+  cursor: not-allowed;
+  opacity: .55;
+}
+.zx-menu-button__choice-option:focus-visible {
+  outline-color: transparent;
+  box-shadow: var(--zx-focus-ring);
+}
+@media (forced-colors: active) {
+  .zx-menu-button__choice-option[aria-checked=true] {
+    background: Highlight;
+    color: HighlightText;
+    forced-color-adjust: none;
+  }
+}
 
 /* src/components/context-menu/context-menu.css */
 .zx-context-menu__anchor {
@@ -6784,7 +7717,7 @@ body:has(.zx-modal:modal) {
   border: 2px solid var(--zx-color-bg-surface);
   border-radius: var(--zx-radius-full);
   background: var(--zx-color-accent);
-  box-shadow: var(--zx-shadow-1);
+  box-shadow: var(--zx-surface-shadow);
 }
 .zx-slider__input::-moz-range-thumb {
   inline-size: var(--zx-slider-thumb);
@@ -6792,7 +7725,7 @@ body:has(.zx-modal:modal) {
   border: 2px solid var(--zx-color-bg-surface);
   border-radius: var(--zx-radius-full);
   background: var(--zx-color-accent);
-  box-shadow: var(--zx-shadow-1);
+  box-shadow: var(--zx-surface-shadow);
 }
 .zx-slider__input:focus-visible {
   outline: 2px solid transparent;
@@ -6900,7 +7833,7 @@ body:has(.zx-modal:modal) {
   background: none;
 }
 .zx-rating__radio:focus-visible {
-  outline: 0;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 .zx-rating[data-inert] .zx-rating__radio {
@@ -7167,7 +8100,7 @@ body:has(.zx-modal:modal) {
   color: var(--zx-color-accent);
 }
 .zx-time-picker__clock-unit:focus-visible {
-  outline: 0;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 .zx-time-picker__clock-colon {
@@ -7216,7 +8149,7 @@ body:has(.zx-modal:modal) {
   font-weight: 600;
 }
 .zx-time-picker__mark:focus-visible {
-  outline: 0;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 .zx-time-picker__hand {
@@ -7959,7 +8892,7 @@ body:has(.zx-modal:modal) {
 .zx-calendar__more:focus-visible,
 .zx-calendar__month-week-number:focus-visible {
   z-index: 4;
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 .zx-calendar__heading {
@@ -8705,7 +9638,7 @@ body:has(.zx-modal:modal) {
   color: var(--zx-color-text);
 }
 .zx-record-view__field-move:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 .zx-record-view__field-move:disabled {
@@ -8827,7 +9760,7 @@ body:has(.zx-modal:modal) {
   color: var(--zx-color-text);
 }
 .zx-table__column-move:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 .zx-table__column-move:disabled {
@@ -8984,17 +9917,19 @@ body:has(.zx-modal:modal) {
   text-align: start;
 }
 .zx-table__sort-button {
+  --zx-table-sort-slack: max(0px, (24px - 1lh) / 2);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--zx-space-2);
   inline-size: 100%;
-  min-block-size: auto;
+  min-block-size: 24px;
   border: 0;
   border-radius: var(--zx-radius-sm);
   background: inherit;
   color: inherit;
-  padding: 0;
+  margin-block: calc(-1 * var(--zx-table-sort-slack));
+  padding: var(--zx-table-sort-slack) 0;
   font: inherit;
   letter-spacing: inherit;
   text-align: inherit;
@@ -9058,12 +9993,60 @@ body:has(.zx-modal:modal) {
   border-block-end: 0;
 }
 .zx-table__checkbox {
-  display: block;
+  --zx-table-checkbox-slack: max(0px, (24px - var(--zx-space-4)) / 2);
+  appearance: none;
+  display: grid;
+  place-content: center;
+  box-sizing: content-box;
   inline-size: var(--zx-space-4);
-  min-block-size: auto;
   block-size: var(--zx-space-4);
+  min-block-size: auto;
   margin: 0 auto;
-  accent-color: var(--zx-color-accent);
+  border: var(--zx-table-checkbox-slack) solid transparent;
+  border-radius: calc(var(--zx-radius-sm) + var(--zx-table-checkbox-slack));
+  padding: 0;
+  background: var(--zx-color-bg-control) padding-box;
+  box-shadow: inset 0 0 0 1px var(--zx-color-text-subtle);
+  color: var(--zx-color-on-accent);
+  cursor: pointer;
+}
+.zx-table__checkbox::before {
+  content: "";
+  inline-size: calc(var(--zx-space-4) * .625);
+  block-size: calc(var(--zx-space-4) * .625);
+  background: currentColor;
+  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
+  visibility: hidden;
+}
+.zx-table__checkbox:hover:not(:disabled) {
+  box-shadow: inset 0 0 0 1px var(--zx-color-text-muted);
+}
+.zx-table__checkbox:is(:checked, :indeterminate) {
+  background-color: var(--zx-color-accent);
+  box-shadow: inset 0 0 0 1px var(--zx-color-accent);
+}
+.zx-table__checkbox:is(:checked, :indeterminate)::before {
+  visibility: visible;
+}
+.zx-table__checkbox:indeterminate::before {
+  clip-path: inset(40% 5%);
+}
+.zx-table__checkbox:focus-visible {
+  outline-color: transparent;
+  outline-offset: calc(-1 * var(--zx-table-checkbox-slack));
+  box-shadow: inset 0 0 0 1px var(--zx-color-accent), var(--zx-focus-ring);
+}
+.zx-table__checkbox:disabled {
+  opacity: .5;
+  cursor: not-allowed;
+}
+@media (forced-colors: active) {
+  .zx-table__checkbox {
+    appearance: auto;
+  }
+  .zx-table__checkbox::before {
+    content: none;
+  }
 }
 .zx-table__empty {
   padding-block: var(--zx-space-6);
@@ -9099,7 +10082,7 @@ body:has(.zx-modal:modal) {
   color: var(--zx-color-text);
 }
 .zx-table__tree-toggle:focus-visible {
-  outline: 0;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 .zx-table__cell-content {
@@ -9132,10 +10115,14 @@ body:has(.zx-modal:modal) {
 .zx-table__body td[data-editable=true] {
   cursor: cell;
 }
-.zx-table__body td[data-editable=true]:focus-visible {
-  outline: 0;
+.zx-table__body :is(tr[data-row], td, th)[tabindex]:focus-visible {
+  outline-color: transparent;
+  outline-offset: -2px;
   box-shadow: inset var(--zx-focus-ring);
 }
+.zx-table__body > tr[data-row] {
+  scroll-margin-block: calc(var(--zx-control-height) + var(--zx-space-2)) var(--zx-space-2);
+}
 .zx-table__body td[data-editing=true] {
   position: relative;
 }
@@ -9301,7 +10288,7 @@ button.zx-stat-tile:hover {
 }
 a.zx-stat-tile:focus-visible,
 button.zx-stat-tile:focus-visible {
-  outline: 0;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 @media (prefers-reduced-motion: no-preference) {
@@ -9468,7 +10455,7 @@ button.zx-stat-tile:focus-visible {
   font: inherit;
 }
 .zx-card-view__sort select:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 .zx-card-view__content,
@@ -9521,7 +10508,7 @@ button.zx-stat-tile:focus-visible {
   border-color: var(--zx-color-border-strong);
 }
 .zx-record-card:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 .zx-record-card[data-selected=true] {
@@ -9584,7 +10571,7 @@ button.zx-stat-tile:focus-visible {
   accent-color: var(--zx-color-accent);
 }
 .zx-record-card__selection input:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 .zx-record-card__titles {
@@ -9640,7 +10627,7 @@ button.zx-stat-tile:focus-visible {
 }
 .zx-record-card__primary:focus-visible {
   border-radius: var(--zx-radius-sm);
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 .zx-record-card__subtitle {
@@ -9680,7 +10667,7 @@ button.zx-stat-tile:focus-visible {
   background: var(--zx-color-bg-hover);
 }
 .zx-record-card__action:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 .zx-record-card__action:disabled {
@@ -10050,7 +11037,7 @@ button.zx-stat-tile:focus-visible {
 .zx-kanban-view__collapse:focus-visible,
 .zx-kanban-view__move-handle:focus-visible,
 .zx-kanban-view .zx-record-card:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 .zx-kanban-view__count {
@@ -10095,7 +11082,7 @@ button.zx-stat-tile:focus-visible {
   border-radius: var(--zx-radius-md);
 }
 .zx-kanban-view :where(.zx-record-card[data-variant=outlined]) {
-  box-shadow: var(--zx-shadow-1);
+  box-shadow: var(--zx-surface-shadow);
 }
 .zx-kanban-view .zx-record-card:has(> .zx-record-card__preview) {
   grid-template-columns: var(--zx-kanban-thumbnail-size) minmax(0, 1fr);
@@ -10406,7 +11393,7 @@ button.zx-stat-tile:focus-visible {
   color: var(--zx-color-text);
 }
 .zx-kanban-view__add:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 .zx-kanban-view__add[hidden] {
@@ -10676,6 +11663,237 @@ button.zx-stat-tile:focus-visible {
   cursor: pointer;
 }
 
+/* src/components/view-settings/view-settings.css */
+.zx-view-settings {
+  container-type: inline-size;
+  inline-size: 100%;
+  min-inline-size: 15rem;
+  display: grid;
+  gap: var(--zx-space-5);
+  color: var(--zx-color-text);
+  font-size: var(--zx-control-font-size);
+}
+.zx-view-settings__section {
+  display: grid;
+  gap: var(--zx-space-2);
+  min-inline-size: 0;
+}
+.zx-view-settings__heading {
+  margin: 0;
+  color: var(--zx-color-text);
+  font-size: var(--zx-text-md);
+  font-weight: var(--zx-weight-semibold);
+  line-height: 1.3;
+}
+.zx-view-settings__subheading {
+  margin: var(--zx-space-1) 0 0;
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-sm);
+  font-weight: var(--zx-weight-medium);
+  line-height: 1.3;
+}
+.zx-view-settings__search-slot:empty {
+  display: none;
+}
+.zx-view-settings__search {
+  inline-size: 100%;
+}
+.zx-view-settings__frame {
+  position: relative;
+}
+.zx-view-settings__list,
+.zx-view-settings__hidden {
+  display: grid;
+  gap: calc(var(--zx-space-1) / 2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.zx-view-settings__hidden {
+  max-block-size: calc(var(--zx-control-height) * 8);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+.zx-view-settings__hidden[hidden] {
+  display: none;
+}
+.zx-view-settings__row {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--zx-space-2);
+  min-block-size: var(--zx-control-height);
+  padding-inline: var(--zx-space-1);
+  border-radius: var(--zx-control-radius);
+  background: var(--zx-color-bg-surface);
+}
+.zx-view-settings__row:hover {
+  background: var(--zx-color-bg-hover);
+}
+.zx-view-settings__handle {
+  order: -2;
+  flex: none;
+}
+.zx-view-settings__type {
+  order: -1;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.25rem;
+  color: var(--zx-color-text-subtle);
+}
+.zx-view-settings__label {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.zx-view-settings__handle,
+.zx-view-settings__hide {
+  display: inline-grid;
+  place-items: center;
+  inline-size: var(--zx-control-height);
+  block-size: var(--zx-control-height);
+  min-block-size: 0;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: var(--zx-control-radius);
+  background: none;
+  color: var(--zx-color-text-subtle);
+}
+.zx-view-settings__handle[data-placeholder] {
+  visibility: hidden;
+}
+button.zx-view-settings__handle {
+  cursor: grab;
+  touch-action: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.zx-view-settings__handle:hover,
+.zx-view-settings__hide:hover:not(:disabled) {
+  background: var(--zx-color-bg-hover);
+  color: var(--zx-color-text);
+}
+.zx-view-settings__handle:focus-visible,
+.zx-view-settings__hide:focus-visible {
+  box-shadow: var(--zx-focus-ring);
+}
+.zx-view-settings__hide:disabled {
+  color: var(--zx-color-text-placeholder);
+  cursor: default;
+}
+.zx-view-settings__lock {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  inline-size: var(--zx-control-height);
+  color: var(--zx-color-text-placeholder);
+}
+.zx-view-settings__add {
+  flex: none;
+}
+.zx-view-settings__row[data-state=grabbed] {
+  outline: 2px solid var(--zx-color-ring);
+  outline-offset: -2px;
+  background: var(--zx-color-bg-selected);
+}
+.zx-view-settings[data-dragging=true],
+.zx-view-settings[data-dragging=true] .zx-view-settings__handle {
+  cursor: grabbing;
+}
+.zx-view-settings__row[data-dragging=true] {
+  z-index: 1;
+  background: var(--zx-color-bg-raised);
+  box-shadow: var(--zx-overlay-shadow);
+}
+.zx-view-settings__drop-indicator {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-start: 0;
+  z-index: 2;
+  block-size: 2px;
+  margin-block-start: -1px;
+  border-radius: var(--zx-radius-full);
+  background: var(--zx-color-accent);
+  pointer-events: none;
+}
+.zx-view-settings__drop-indicator[hidden] {
+  display: none;
+}
+.zx-view-settings__empty {
+  margin: 0;
+  padding-block: var(--zx-space-1);
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-sm);
+}
+.zx-view-settings__empty[hidden] {
+  display: none;
+}
+.zx-view-settings__option {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--zx-space-2);
+  min-inline-size: 0;
+}
+.zx-view-settings__option > .zx-icon,
+.zx-view-settings .zx-select__value-adornment > .zx-icon {
+  flex: none;
+  color: var(--zx-color-text-subtle);
+}
+.zx-view-settings__group {
+  inline-size: 100%;
+}
+.zx-view-settings__setting {
+  display: grid;
+  grid-template-columns: minmax(6rem, auto) minmax(0, 1fr);
+  align-items: center;
+  gap: var(--zx-space-2);
+}
+.zx-view-settings__setting-label {
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-sm);
+}
+@container (max-width: 18rem) {
+  .zx-view-settings__setting {
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--zx-space-1);
+  }
+}
+.zx-view-settings__toggle {
+  justify-self: start;
+}
+.zx-view-settings__instructions[hidden] {
+  display: none;
+}
+.zx-view-settings__sr,
+.zx-view-settings__status {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .zx-view-settings__row,
+  .zx-view-settings__handle,
+  .zx-view-settings__hide {
+    transition:
+      background var(--zx-dur-fast) var(--zx-ease),
+      color var(--zx-dur-fast) var(--zx-ease),
+      box-shadow var(--zx-dur-fast) var(--zx-ease);
+  }
+  .zx-view-settings__drop-indicator {
+    transition: inset-block-start var(--zx-dur-fast) var(--zx-ease);
+  }
+}
+
 /* src/components/grid/grid.css */
 .zx-table[data-preset=billing-items] tr.zx-grid-billing__summary > td {
   background: var(--zx-color-bg-muted);
@@ -10783,7 +12001,7 @@ button.zx-stat-tile:focus-visible {
   font-weight: inherit;
 }
 .zx-tree__row:focus-visible {
-  outline: 0;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 .zx-tree__twisty {
@@ -10885,7 +12103,7 @@ button.zx-stat-tile:focus-visible {
   font-weight: var(--zx-weight-semibold);
 }
 .zx-finder__row:focus-visible {
-  outline: 0;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 .zx-finder__icon {
@@ -11235,8 +12453,8 @@ button.zx-stat-tile:focus-visible {
 .zx-filter__logic,
 .zx-filter__field,
 .zx-filter__operator,
-.zx-filter__value input,
-.zx-filter__value select {
+.zx-filter__value-control > input,
+.zx-filter__value > select {
   min-block-size: var(--zx-control-height);
   border: 1px solid var(--zx-color-border-control);
   border-radius: var(--zx-control-radius);
@@ -11362,6 +12580,71 @@ button.zx-stat-tile:focus-visible {
     grid-row: 1 / 3;
   }
 }
+.zx-filter__choice {
+  display: flex;
+  align-items: center;
+  gap: var(--zx-space-2);
+  min-inline-size: 0;
+}
+.zx-filter__choice-icon {
+  display: inline-flex;
+  flex: none;
+  justify-content: center;
+  min-inline-size: var(--zx-space-4);
+  color: var(--zx-color-text-muted);
+}
+.zx-filter__choice-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.zx-filter[data-layout=compact] .zx-filter__children {
+  gap: var(--zx-space-4);
+}
+.zx-filter[data-layout=compact] .zx-filter__children > li {
+  position: relative;
+}
+.zx-filter__connector {
+  position: absolute;
+  inset-block-start: calc(var(--zx-space-4) / -2);
+  inset-inline-start: var(--zx-space-3);
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  block-size: calc(var(--zx-space-4) + var(--zx-space-1));
+  translate: 0 -50%;
+  margin: 0;
+  border: 1px solid var(--zx-color-border);
+  border-radius: var(--zx-radius-full);
+  background: var(--zx-color-bg-chrome);
+  padding: 0 var(--zx-space-2);
+  color: var(--zx-color-text-muted);
+  font: inherit;
+  font-size: var(--zx-text-xs);
+  font-weight: var(--zx-weight-medium);
+  line-height: 1;
+}
+button.zx-filter__connector {
+  cursor: pointer;
+}
+button.zx-filter__connector:hover {
+  border-color: var(--zx-color-border-strong);
+  color: var(--zx-color-text);
+}
+button.zx-filter__connector:focus-visible {
+  outline-color: transparent;
+  box-shadow: var(--zx-focus-ring);
+}
+@media (prefers-reduced-motion: no-preference) {
+  button.zx-filter__connector {
+    transition: border-color var(--zx-dur-fast) var(--zx-ease), color var(--zx-dur-fast) var(--zx-ease);
+  }
+}
+@media (forced-colors: active) {
+  .zx-filter__connector {
+    border-color: CanvasText;
+  }
+}
 
 /* src/components/sort-control/sort-control.css */
 .zx-sort-control {
@@ -11417,7 +12700,7 @@ button.zx-stat-tile:focus-visible {
   font-size: var(--zx-text-sm);
 }
 .zx-pagination__select:focus-visible {
-  outline: 0;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 .zx-pagination__controls {
@@ -11510,7 +12793,7 @@ button.zx-stepper__control:disabled {
   cursor: default;
 }
 .zx-stepper__control:focus-visible {
-  outline: 0;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 .zx-stepper__marker {
@@ -11691,7 +12974,7 @@ button.zx-stepper__control:disabled {
   color: var(--zx-color-text);
 }
 .zx-breadcrumb__link:focus-visible {
-  outline: 0;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 .zx-breadcrumb__current {
@@ -12075,7 +13358,7 @@ button.zx-stepper__control:disabled {
   color: var(--zx-color-text);
 }
 .zx-multi-value-editor__handle:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 .zx-multi-value-editor__handle:disabled {
@@ -12230,10 +13513,10 @@ button.zx-stepper__control:disabled {
   min-inline-size: 0;
 }
 .zx-questionnaire__item:focus {
-  outline: none;
+  outline-color: transparent;
 }
 .zx-questionnaire__item:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
   border-radius: var(--zx-questionnaire-radius);
 }
@@ -12408,7 +13691,7 @@ button.zx-stepper__control:disabled {
   color: var(--zx-color-text-placeholder);
 }
 .zx-questionnaire__freeform-input:focus-visible {
-  outline: none;
+  outline-color: transparent;
   border-color: var(--zx-color-accent);
   box-shadow: var(--zx-focus-ring);
 }
@@ -12425,7 +13708,7 @@ button.zx-stepper__control:disabled {
   gap: var(--zx-space-3);
 }
 .zx-questionnaire__review:focus {
-  outline: none;
+  outline-color: transparent;
 }
 .zx-questionnaire__review-title {
   margin: 0;