@zvk/ui 0.1.9 → 0.1.12

package/dist/styles.css

@@ -820,6 +820,163 @@
 }
 
 
+/* src/components/stepper/stepper.css */
+@layer zvk-ui-components {
+  .zvk-ui-stepper {
+    color: var(--zvk-ui-color-foreground);
+    font-family: var(--zvk-ui-font-family-primary);
+  }
+
+  .zvk-ui-stepper__list {
+    display: grid;
+    gap: var(--zvk-ui-space-3);
+    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .zvk-ui-stepper[data-orientation="vertical"] .zvk-ui-stepper__list {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .zvk-ui-stepper__item {
+    min-inline-size: 0;
+    position: relative;
+  }
+
+  .zvk-ui-stepper__item:not(:last-child)::after {
+    background: var(--zvk-ui-color-border);
+    block-size: 1px;
+    content: "";
+    inline-size: calc(100% - 2.25rem);
+    inset-block-start: 1rem;
+    inset-inline-start: 2.25rem;
+    position: absolute;
+  }
+
+  .zvk-ui-stepper[data-orientation="vertical"] .zvk-ui-stepper__item:not(:last-child)::after {
+    block-size: calc(100% + var(--zvk-ui-space-3));
+    inline-size: 1px;
+    inset-block-start: 2rem;
+    inset-inline-start: 1rem;
+  }
+
+  .zvk-ui-stepper__item[data-state="complete"]::after {
+    background: var(--zvk-ui-color-primary);
+  }
+
+  .zvk-ui-stepper__step,
+  .zvk-ui-stepper__trigger {
+    align-items: flex-start;
+    background: transparent;
+    border: 0;
+    color: inherit;
+    display: grid;
+    font: inherit;
+    gap: var(--zvk-ui-space-2);
+    grid-template-columns: auto minmax(0, 1fr);
+    inline-size: 100%;
+    padding: 0;
+    position: relative;
+    text-align: start;
+    z-index: 1;
+  }
+
+  .zvk-ui-stepper:not([data-orientation="vertical"]) .zvk-ui-stepper__step,
+  .zvk-ui-stepper:not([data-orientation="vertical"]) .zvk-ui-stepper__trigger {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: 2rem auto;
+  }
+
+  .zvk-ui-stepper:not([data-orientation="vertical"]) .zvk-ui-stepper__content {
+    inline-size: 100%;
+  }
+
+  .zvk-ui-stepper__trigger {
+    border-radius: var(--zvk-ui-radius-md);
+    cursor: pointer;
+    padding: var(--zvk-ui-space-1);
+  }
+
+  .zvk-ui-stepper__trigger:hover:not(:disabled) {
+    background: var(--zvk-ui-control-hover);
+  }
+
+  .zvk-ui-stepper__trigger:focus-visible {
+    outline: 2px solid var(--zvk-ui-color-ring);
+    outline-offset: 2px;
+  }
+
+  .zvk-ui-stepper__trigger:disabled {
+    cursor: not-allowed;
+  }
+
+  .zvk-ui-stepper__indicator {
+    align-items: center;
+    background: var(--zvk-ui-color-muted);
+    border: 1px solid var(--zvk-ui-color-border);
+    border-radius: var(--zvk-ui-radius-full);
+    color: var(--zvk-ui-color-muted-foreground);
+    display: inline-flex;
+    font-size: var(--zvk-ui-font-size-xs);
+    font-weight: 700;
+    block-size: 2rem;
+    inline-size: 2rem;
+    justify-content: center;
+    line-height: 1;
+  }
+
+  .zvk-ui-stepper__item[data-state="complete"] .zvk-ui-stepper__indicator,
+  .zvk-ui-stepper__item[data-state="current"] .zvk-ui-stepper__indicator {
+    background: var(--zvk-ui-color-primary);
+    border-color: transparent;
+    color: var(--zvk-ui-color-primary-foreground);
+  }
+
+  .zvk-ui-stepper__item[data-state="disabled"] .zvk-ui-stepper__indicator {
+    opacity: var(--zvk-ui-opacity-disabled);
+  }
+
+  .zvk-ui-stepper__content {
+    display: grid;
+    gap: var(--zvk-ui-space-1);
+    min-inline-size: 0;
+  }
+
+  .zvk-ui-stepper__label {
+    color: var(--zvk-ui-color-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+    font-weight: 700;
+    line-height: var(--zvk-ui-line-height-tight);
+  }
+
+  .zvk-ui-stepper__description,
+  .zvk-ui-stepper__optional {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-xs);
+    line-height: var(--zvk-ui-line-height-normal);
+  }
+
+  .zvk-ui-stepper__item[data-state="disabled"] .zvk-ui-stepper__content {
+    opacity: var(--zvk-ui-opacity-disabled);
+  }
+
+  @media (max-width: 48rem) {
+    .zvk-ui-stepper__list {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .zvk-ui-stepper__item:not(:last-child)::after {
+      block-size: calc(100% + var(--zvk-ui-space-3));
+      inline-size: 1px;
+      inset-block-start: 2rem;
+      inset-inline-start: 1rem;
+    }
+  }
+}
+
+
 /* src/components/alert/alert.css */
 @layer zvk-ui-components {
   :where(.zvk-ui-alert) {
@@ -1498,6 +1655,10 @@
   }
 }
 
+.zvk-ui-input {
+  padding-inline: var(--zvk-ui-control-padding-x);
+}
+
 
 /* src/components/textarea/textarea.css */
 @layer zvk-ui-components {
@@ -1553,6 +1714,11 @@
   }
 }
 
+.zvk-ui-textarea {
+  padding-block: var(--zvk-ui-space-2);
+  padding-inline: var(--zvk-ui-control-padding-x);
+}
+
 
 /* src/components/checkbox/checkbox.css */
 @layer zvk-ui-components {
@@ -1580,7 +1746,7 @@
   .zvk-ui-checkbox__control {
     align-items: center;
     background: var(--zvk-ui-control-background);
-    border: 1px solid var(--zvk-ui-color-border);
+    border: 1px solid var(--zvk-ui-control-border);
     border-radius: var(--zvk-ui-radius-sm);
     box-shadow: var(--zvk-ui-shadow-xs);
     display: inline-flex;
@@ -1609,11 +1775,24 @@
     border-color: var(--zvk-ui-color-primary);
   }
 
+  .zvk-ui-checkbox__input:indeterminate + .zvk-ui-checkbox__control {
+    background: var(--zvk-ui-color-primary);
+    border-color: var(--zvk-ui-color-primary);
+  }
+
   .zvk-ui-checkbox__input:checked + .zvk-ui-checkbox__control .zvk-ui-checkbox__indicator {
     opacity: 1;
     transform: rotate(45deg) scale(1) translate(-1px, -1px);
   }
 
+  .zvk-ui-checkbox__input:indeterminate + .zvk-ui-checkbox__control .zvk-ui-checkbox__indicator {
+    block-size: 0;
+    inline-size: 0.625rem;
+    border-width: 0 0 2px;
+    opacity: 1;
+    transform: none;
+  }
+
   .zvk-ui-checkbox__input:focus-visible + .zvk-ui-checkbox__control {
     box-shadow: var(--zvk-ui-shadow-xs), var(--zvk-ui-focus-ring);
   }
@@ -2541,123 +2720,417 @@
 }
 
 
-/* src/components/collapsible/collapsible.css */
+/* src/components/multi-select/multi-select.css */
 @layer zvk-ui-components {
-  :where(.zvk-ui-collapsible) {
-    --zvk-ui-collapsible-gap: var(--zvk-ui-space-3);
-    display: grid;
-    gap: var(--zvk-ui-collapsible-gap);
-  }
-
-  :where(.zvk-ui-collapsible__trigger) {
-    --zvk-ui-collapsible-trigger-padding-x: var(--zvk-ui-control-padding-x);
-    --zvk-ui-collapsible-trigger-height: var(--zvk-ui-control-height-md);
+  .zvk-ui-multi-select__control {
     align-items: center;
-    appearance: none;
+    backdrop-filter: var(--zvk-ui-material-control-backdrop-filter);
     background: var(--zvk-ui-control-background);
-    border: 1px solid var(--zvk-ui-color-border);
+    border: 1px solid var(--zvk-ui-control-border);
     border-radius: var(--zvk-ui-radius-md);
     color: var(--zvk-ui-color-foreground);
-    cursor: pointer;
-    display: inline-flex;
-    font-family: var(--zvk-ui-font-family-primary);
-    font-size: var(--zvk-ui-font-size-sm);
-    gap: var(--zvk-ui-control-gap);
-    height: var(--zvk-ui-collapsible-trigger-height);
-    justify-content: flex-start;
-    min-width: max-content;
-    padding-inline: var(--zvk-ui-collapsible-trigger-padding-x);
-    transition: background var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), border-color var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), box-shadow var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard);
+    display: grid;
+    gap: var(--zvk-ui-space-2);
+    grid-template-columns: minmax(0, 1fr) auto;
+    min-block-size: var(--zvk-ui-control-height-md);
+    padding: var(--zvk-ui-space-1) var(--zvk-ui-space-2);
   }
 
-  :where(.zvk-ui-collapsible__trigger:hover:not(:disabled, [data-disabled="true"])) {
-    background: var(--zvk-ui-control-hover);
+  .zvk-ui-multi-select__control:hover:not([data-disabled="true"]) {
+    border-color: var(--zvk-ui-control-border-strong);
   }
 
-  :where(.zvk-ui-collapsible[data-state="open"] .zvk-ui-collapsible__trigger, .zvk-ui-collapsible__content:not([hidden])) {
-    border-color: var(--zvk-ui-color-border-strong);
+  .zvk-ui-multi-select__control:focus-within {
+    border-color: var(--zvk-ui-color-ring);
+    outline: 2px solid var(--zvk-ui-color-ring);
+    outline-offset: 1px;
   }
 
-  :where(.zvk-ui-collapsible__content) {
-    padding-inline: var(--zvk-ui-control-padding-x);
+  .zvk-ui-multi-select__control[data-invalid="true"] {
+    border-color: var(--zvk-ui-color-destructive);
   }
 
-  :where(.zvk-ui-collapsible__content[data-state="open"]) {
-    animation: zvk-ui-collapsible-content-enter var(--zvk-ui-duration-normal) var(--zvk-ui-ease-standard) both;
+  .zvk-ui-multi-select__control[data-size="sm"] {
+    min-block-size: var(--zvk-ui-control-height-sm);
   }
 
-  :where(.zvk-ui-collapsible__content[data-state="closed"]) {
-    overflow: hidden;
+  .zvk-ui-multi-select__control[data-size="lg"] {
+    min-block-size: var(--zvk-ui-control-height-lg);
   }
 
-  @keyframes zvk-ui-collapsible-content-enter {
-    from {
-      opacity: 0;
-      transform: translateY(-0.25rem);
-    }
-
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
+  .zvk-ui-multi-select__values {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--zvk-ui-space-1);
+    min-inline-size: 0;
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    :where(.zvk-ui-collapsible__content[data-state="open"]) {
-      animation: none;
-    }
+  .zvk-ui-multi-select__input {
+    background: transparent;
+    border: 0;
+    color: inherit;
+    flex: 1 1 8rem;
+    font: inherit;
+    min-block-size: 1.75rem;
+    min-inline-size: 6rem;
+    outline: 0;
+    padding: 0 var(--zvk-ui-space-1);
   }
-}
 
-
-/* src/components/accordion/accordion.css */
-@layer zvk-ui-components {
-  :where(.zvk-ui-accordion) {
-    --zvk-ui-accordion-gap: var(--zvk-ui-space-2);
-    display: grid;
-    gap: var(--zvk-ui-accordion-gap);
+  .zvk-ui-multi-select__input:disabled {
+    cursor: not-allowed;
   }
 
-  :where(.zvk-ui-accordion__item) {
+  .zvk-ui-multi-select__token {
+    align-items: center;
+    background: var(--zvk-ui-color-muted);
     border: 1px solid var(--zvk-ui-color-border);
-    border-radius: var(--zvk-ui-radius-md);
-    overflow: hidden;
-    transition: border-color var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard);
-  }
-
-  :where(.zvk-ui-accordion__item[data-state="open"]) {
-    border-color: var(--zvk-ui-color-border-strong);
+    border-radius: var(--zvk-ui-radius-full);
+    color: var(--zvk-ui-color-foreground);
+    display: inline-flex;
+    font-size: var(--zvk-ui-font-size-xs);
+    font-weight: 650;
+    gap: var(--zvk-ui-space-1);
+    line-height: 1;
+    min-block-size: 1.5rem;
+    padding-inline: var(--zvk-ui-space-2) var(--zvk-ui-space-1);
   }
 
-  :where(.zvk-ui-accordion__trigger) {
-    --zvk-ui-accordion-trigger-height: var(--zvk-ui-control-height-md);
-    align-items: center;
+  .zvk-ui-multi-select__token-remove,
+  .zvk-ui-multi-select__clear {
     appearance: none;
-    background: var(--zvk-ui-color-surface);
-    border: none;
-    color: var(--zvk-ui-color-foreground);
+    background: transparent;
+    border: 0;
+    border-radius: var(--zvk-ui-radius-sm);
+    color: var(--zvk-ui-color-muted-foreground);
     cursor: pointer;
-    display: inline-flex;
-    font-family: var(--zvk-ui-font-family-primary);
-    font-size: var(--zvk-ui-font-size-sm);
-    gap: var(--zvk-ui-control-gap);
-    justify-content: flex-start;
-    line-height: 1;
-    min-width: 100%;
-    min-height: var(--zvk-ui-accordion-trigger-height);
-    padding-inline: var(--zvk-ui-control-padding-x);
-    text-align: left;
-    transition: background var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), box-shadow var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), color var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard);
-    width: 100%;
+    font: inherit;
   }
 
-  :where(.zvk-ui-accordion__trigger[data-state="open"]) {
-    background: var(--zvk-ui-control-hover);
+  .zvk-ui-multi-select__token-remove {
+    block-size: 1.125rem;
+    inline-size: 1.125rem;
+    line-height: 1;
+    padding: 0;
   }
 
-  :where(.zvk-ui-accordion__trigger:focus-visible) {
-    outline: 0;
-    box-shadow: var(--zvk-ui-focus-ring);
+  .zvk-ui-multi-select__clear {
+    font-size: var(--zvk-ui-font-size-xs);
+    padding: var(--zvk-ui-space-1) var(--zvk-ui-space-2);
+  }
+
+  .zvk-ui-multi-select__token-remove:hover:not(:disabled),
+  .zvk-ui-multi-select__token-remove:focus-visible,
+  .zvk-ui-multi-select__clear:hover:not(:disabled),
+  .zvk-ui-multi-select__clear:focus-visible {
+    background: var(--zvk-ui-control-hover);
+    color: var(--zvk-ui-color-foreground);
+    outline: 0;
+  }
+
+  .zvk-ui-multi-select__popup {
+    --zvk-ui-multi-select-motion-x: 0;
+    --zvk-ui-multi-select-motion-y: -0.1875rem;
+    backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
+    background: var(--zvk-ui-color-surface);
+    border: 1px solid var(--zvk-ui-card-border);
+    border-radius: var(--zvk-ui-radius-md);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-material-glass-shadow);
+    display: grid;
+    font-family: var(--zvk-ui-font-family-primary);
+    gap: var(--zvk-ui-space-1);
+    max-block-size: min(18rem, var(--zvk-ui-floating-available-height));
+    overflow: auto;
+    padding: var(--zvk-ui-space-1);
+    z-index: var(--zvk-ui-z-popover);
+  }
+
+  .zvk-ui-multi-select__popup[data-side="top"] {
+    --zvk-ui-multi-select-motion-y: 0.1875rem;
+  }
+
+  .zvk-ui-multi-select__popup[data-side="left"] {
+    --zvk-ui-multi-select-motion-x: 0.1875rem;
+    --zvk-ui-multi-select-motion-y: 0;
+  }
+
+  .zvk-ui-multi-select__popup[data-side="right"] {
+    --zvk-ui-multi-select-motion-x: -0.1875rem;
+    --zvk-ui-multi-select-motion-y: 0;
+  }
+
+  .zvk-ui-multi-select__popup[data-state="open"] {
+    animation: zvk-ui-multi-select-popup-enter var(--zvk-ui-duration-fast) var(--zvk-ui-ease-enter);
+  }
+
+  .zvk-ui-multi-select__option {
+    align-items: center;
+    border-radius: var(--zvk-ui-radius-sm);
+    color: var(--zvk-ui-color-foreground);
+    cursor: pointer;
+    display: grid;
+    font-size: var(--zvk-ui-font-size-sm);
+    gap: var(--zvk-ui-space-2);
+    grid-template-columns: 1rem minmax(0, 1fr);
+    padding: var(--zvk-ui-space-2) var(--zvk-ui-space-3);
+  }
+
+  .zvk-ui-multi-select__option[data-highlighted="true"] {
+    background: var(--zvk-ui-color-muted);
+  }
+
+  .zvk-ui-multi-select__option[data-selected="true"] {
+    font-weight: 700;
+  }
+
+  .zvk-ui-multi-select__option[data-disabled="true"] {
+    color: var(--zvk-ui-color-muted-foreground);
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .zvk-ui-multi-select__option-check {
+    color: var(--zvk-ui-color-primary);
+    font-weight: 700;
+    text-align: center;
+  }
+
+  .zvk-ui-multi-select__empty {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+    padding: var(--zvk-ui-space-3);
+  }
+
+  @keyframes zvk-ui-multi-select-popup-enter {
+    from {
+      opacity: 0;
+      transform: translate(var(--zvk-ui-multi-select-motion-x), var(--zvk-ui-multi-select-motion-y)) scale(0.98);
+    }
+
+    to {
+      opacity: 1;
+      transform: translate(0, 0) scale(1);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .zvk-ui-multi-select__popup[data-state="open"] {
+      animation: none;
+    }
+  }
+}
+
+
+/* src/components/tags-input/tags-input.css */
+@layer zvk-ui-components {
+  .zvk-ui-tags-input__control {
+    align-items: center;
+    backdrop-filter: var(--zvk-ui-material-control-backdrop-filter);
+    background: var(--zvk-ui-control-background);
+    border: 1px solid var(--zvk-ui-control-border);
+    border-radius: var(--zvk-ui-radius-md);
+    color: var(--zvk-ui-color-foreground);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--zvk-ui-space-1);
+    min-block-size: var(--zvk-ui-control-height-md);
+    padding: var(--zvk-ui-space-1) var(--zvk-ui-space-2);
+  }
+
+  .zvk-ui-tags-input__control:hover:not([data-disabled="true"]) {
+    border-color: var(--zvk-ui-control-border-strong);
+  }
+
+  .zvk-ui-tags-input__control:focus-within {
+    border-color: var(--zvk-ui-color-ring);
+    outline: 2px solid var(--zvk-ui-color-ring);
+    outline-offset: 1px;
+  }
+
+  .zvk-ui-tags-input__control[data-invalid="true"] {
+    border-color: var(--zvk-ui-color-destructive);
+  }
+
+  .zvk-ui-tags-input__control[data-size="sm"] {
+    min-block-size: var(--zvk-ui-control-height-sm);
+  }
+
+  .zvk-ui-tags-input__control[data-size="lg"] {
+    min-block-size: var(--zvk-ui-control-height-lg);
+  }
+
+  .zvk-ui-tags-input__input {
+    background: transparent;
+    border: 0;
+    color: inherit;
+    flex: 1 1 8rem;
+    font: inherit;
+    min-block-size: 1.75rem;
+    min-inline-size: 6rem;
+    outline: 0;
+    padding: 0 var(--zvk-ui-space-1);
+  }
+
+  .zvk-ui-tags-input__input:disabled {
+    cursor: not-allowed;
+  }
+
+  .zvk-ui-tags-input__tag {
+    align-items: center;
+    background: var(--zvk-ui-color-muted);
+    border: 1px solid var(--zvk-ui-color-border);
+    border-radius: var(--zvk-ui-radius-full);
+    color: var(--zvk-ui-color-foreground);
+    display: inline-flex;
+    font-size: var(--zvk-ui-font-size-xs);
+    font-weight: 650;
+    gap: var(--zvk-ui-space-1);
+    line-height: 1;
+    min-block-size: 1.5rem;
+    padding-inline: var(--zvk-ui-space-2) var(--zvk-ui-space-1);
+  }
+
+  .zvk-ui-tags-input__remove {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    border-radius: var(--zvk-ui-radius-sm);
+    block-size: 1.125rem;
+    color: var(--zvk-ui-color-muted-foreground);
+    cursor: pointer;
+    font: inherit;
+    inline-size: 1.125rem;
+    line-height: 1;
+    padding: 0;
+  }
+
+  .zvk-ui-tags-input__remove:hover:not(:disabled),
+  .zvk-ui-tags-input__remove:focus-visible {
+    background: var(--zvk-ui-control-hover);
+    color: var(--zvk-ui-color-foreground);
+    outline: 0;
+  }
+}
+
+
+/* src/components/collapsible/collapsible.css */
+@layer zvk-ui-components {
+  :where(.zvk-ui-collapsible) {
+    --zvk-ui-collapsible-gap: var(--zvk-ui-space-3);
+    display: grid;
+    gap: var(--zvk-ui-collapsible-gap);
+  }
+
+  :where(.zvk-ui-collapsible__trigger) {
+    --zvk-ui-collapsible-trigger-padding-x: var(--zvk-ui-control-padding-x);
+    --zvk-ui-collapsible-trigger-height: var(--zvk-ui-control-height-md);
+    align-items: center;
+    appearance: none;
+    background: var(--zvk-ui-control-background);
+    border: 1px solid var(--zvk-ui-color-border);
+    border-radius: var(--zvk-ui-radius-md);
+    color: var(--zvk-ui-color-foreground);
+    cursor: pointer;
+    display: inline-flex;
+    font-family: var(--zvk-ui-font-family-primary);
+    font-size: var(--zvk-ui-font-size-sm);
+    gap: var(--zvk-ui-control-gap);
+    height: var(--zvk-ui-collapsible-trigger-height);
+    justify-content: flex-start;
+    min-width: max-content;
+    padding-inline: var(--zvk-ui-collapsible-trigger-padding-x);
+    transition: background var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), border-color var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), box-shadow var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard);
+  }
+
+  :where(.zvk-ui-collapsible__trigger:hover:not(:disabled, [data-disabled="true"])) {
+    background: var(--zvk-ui-control-hover);
+  }
+
+  :where(.zvk-ui-collapsible[data-state="open"] .zvk-ui-collapsible__trigger, .zvk-ui-collapsible__content:not([hidden])) {
+    border-color: var(--zvk-ui-color-border-strong);
+  }
+
+  :where(.zvk-ui-collapsible__content) {
+    padding-inline: var(--zvk-ui-control-padding-x);
+  }
+
+  :where(.zvk-ui-collapsible__content[data-state="open"]) {
+    animation: zvk-ui-collapsible-content-enter var(--zvk-ui-duration-normal) var(--zvk-ui-ease-standard) both;
+  }
+
+  :where(.zvk-ui-collapsible__content[data-state="closed"]) {
+    overflow: hidden;
+  }
+
+  @keyframes zvk-ui-collapsible-content-enter {
+    from {
+      opacity: 0;
+      transform: translateY(-0.25rem);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(.zvk-ui-collapsible__content[data-state="open"]) {
+      animation: none;
+    }
+  }
+}
+
+
+/* src/components/accordion/accordion.css */
+@layer zvk-ui-components {
+  :where(.zvk-ui-accordion) {
+    --zvk-ui-accordion-gap: var(--zvk-ui-space-2);
+    display: grid;
+    gap: var(--zvk-ui-accordion-gap);
+  }
+
+  :where(.zvk-ui-accordion__item) {
+    border: 1px solid var(--zvk-ui-color-border);
+    border-radius: var(--zvk-ui-radius-md);
+    overflow: hidden;
+    transition: border-color var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard);
+  }
+
+  :where(.zvk-ui-accordion__item[data-state="open"]) {
+    border-color: var(--zvk-ui-color-border-strong);
+  }
+
+  :where(.zvk-ui-accordion__trigger) {
+    --zvk-ui-accordion-trigger-height: var(--zvk-ui-control-height-md);
+    align-items: center;
+    appearance: none;
+    background: var(--zvk-ui-color-surface);
+    border: none;
+    color: var(--zvk-ui-color-foreground);
+    cursor: pointer;
+    display: inline-flex;
+    font-family: var(--zvk-ui-font-family-primary);
+    font-size: var(--zvk-ui-font-size-sm);
+    gap: var(--zvk-ui-control-gap);
+    justify-content: flex-start;
+    line-height: 1;
+    min-width: 100%;
+    min-height: var(--zvk-ui-accordion-trigger-height);
+    padding-inline: var(--zvk-ui-control-padding-x);
+    text-align: left;
+    transition: background var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), box-shadow var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), color var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard);
+    width: 100%;
+  }
+
+  :where(.zvk-ui-accordion__trigger[data-state="open"]) {
+    background: var(--zvk-ui-control-hover);
+  }
+
+  :where(.zvk-ui-accordion__trigger:focus-visible) {
+    outline: 0;
+    box-shadow: var(--zvk-ui-focus-ring);
   }
 
   :where(.zvk-ui-accordion__content) {
@@ -2745,10 +3218,10 @@
   }
 
   :where(.zvk-ui-tabs__trigger[data-state="active"]) {
-    background: var(--zvk-ui-color-surface-raised);
-    border-color: var(--zvk-ui-color-border-strong);
+    background: var(--zvk-ui-color-primary-soft);
+    border-color: var(--zvk-ui-control-border-strong);
     box-shadow: var(--zvk-ui-shadow-xs);
-    color: var(--zvk-ui-color-foreground);
+    color: var(--zvk-ui-color-primary);
   }
 
   :where(.zvk-ui-tabs__trigger[data-disabled="true"]) {
@@ -3001,115 +3474,329 @@
 
   :where(.zvk-ui-table__toolbar-title) {
     color: var(--zvk-ui-color-foreground);
-    font-family: var(--zvk-ui-font-family-secondary);
-    font-size: var(--zvk-ui-font-size-lg);
-    font-weight: 700;
+    font-family: var(--zvk-ui-font-family-secondary);
+    font-size: var(--zvk-ui-font-size-lg);
+    font-weight: 700;
+    line-height: var(--zvk-ui-line-height-tight);
+    margin: 0;
+  }
+
+  :where(.zvk-ui-table__toolbar-actions) {
+    align-items: center;
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: var(--zvk-ui-space-2);
+  }
+
+  :where(.zvk-ui-table__head, .zvk-ui-table__cell) {
+    text-align: left;
+    padding-block: var(--zvk-ui-table-cell-padding-y);
+    padding-inline: var(--zvk-ui-table-cell-padding-x);
+  }
+
+  :where(.zvk-ui-table__selection-cell) {
+    inline-size: 1%;
+    text-align: center;
+    white-space: nowrap;
+  }
+
+  :where(.zvk-ui-table__selection-cell[data-disabled="true"]) {
+    opacity: var(--zvk-ui-opacity-disabled);
+  }
+
+  :where(.zvk-ui-table__selection-checkbox) {
+    justify-content: center;
+  }
+
+  :where(.zvk-ui-table__head) {
+    font-size: var(--zvk-ui-font-size-sm);
+    font-weight: 600;
+  }
+
+  :where(.zvk-ui-table__sort-button) {
+    align-items: center;
+    appearance: none;
+    background: transparent;
+    border: 0;
+    border-radius: var(--zvk-ui-radius-sm);
+    color: inherit;
+    cursor: pointer;
+    display: inline-flex;
+    font: inherit;
+    font-weight: inherit;
+    gap: var(--zvk-ui-space-2);
+    margin: calc(-1 * var(--zvk-ui-space-1));
+    padding: var(--zvk-ui-space-1);
+    text-align: inherit;
+  }
+
+  :where(.zvk-ui-table__sort-button:hover) {
+    background: var(--zvk-ui-color-muted);
+  }
+
+  :where(.zvk-ui-table__sort-button:focus-visible) {
+    box-shadow: var(--zvk-ui-focus-ring);
+    outline: none;
+  }
+
+  :where(.zvk-ui-table__sort-button:disabled) {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  :where(.zvk-ui-table__sort-direction) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-xs);
+    font-weight: 500;
+    line-height: 1;
+  }
+
+  :where(.zvk-ui-table__row) {
+    border-bottom: 1px solid var(--zvk-ui-color-border-subtle);
+  }
+
+  :where(.zvk-ui-table__row:last-child) {
+    border-bottom: none;
+  }
+
+  :where(.zvk-ui-table__state-row) {
+    color: var(--zvk-ui-color-muted-foreground);
+  }
+
+  :where(.zvk-ui-table__state-row[data-state="loading"]) {
+    color: var(--zvk-ui-color-foreground);
+  }
+
+  :where(.zvk-ui-table__state-row[data-state="error"]) {
+    color: var(--zvk-ui-color-destructive);
+  }
+
+  :where(.zvk-ui-table__state-cell) {
+    padding-block: calc(var(--zvk-ui-table-cell-padding-y) * 2);
+    text-align: center;
+  }
+
+  @media (max-width: 40rem) {
+    :where(.zvk-ui-table-container) {
+      box-shadow:
+        inset var(--zvk-ui-space-2) 0 var(--zvk-ui-space-3) calc(-1 * var(--zvk-ui-space-3)) color-mix(in srgb, var(--zvk-ui-color-foreground) 18%, transparent),
+        inset calc(-1 * var(--zvk-ui-space-2)) 0 var(--zvk-ui-space-3) calc(-1 * var(--zvk-ui-space-3)) color-mix(in srgb, var(--zvk-ui-color-foreground) 18%, transparent);
+      scrollbar-width: thin;
+    }
+  }
+}
+
+
+/* src/components/list-row/list-row.css */
+@layer zvk-ui-components {
+  :where(.zvk-ui-list-row) {
+    --zvk-ui-list-row-bg: transparent;
+    --zvk-ui-list-row-border: transparent;
+    align-items: center;
+    background: var(--zvk-ui-list-row-bg);
+    border: 1px solid var(--zvk-ui-list-row-border);
+    border-radius: var(--zvk-ui-radius-md);
+    color: var(--zvk-ui-color-foreground);
+    display: grid;
+    font-family: var(--zvk-ui-font-family-primary);
+    gap: var(--zvk-ui-space-3);
+    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
+    min-width: 0;
+    padding-block: var(--zvk-ui-space-3);
+    padding-inline: var(--zvk-ui-space-3);
+    text-align: start;
+    text-decoration: none;
+    transition: background var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), border-color var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), box-shadow var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard);
+  }
+
+  :where(.zvk-ui-list-row[data-variant="surface"]) {
+    --zvk-ui-list-row-bg: var(--zvk-ui-color-surface);
+    --zvk-ui-list-row-border: var(--zvk-ui-color-border);
+  }
+
+  :where(.zvk-ui-list-row[data-selected="true"]) {
+    --zvk-ui-list-row-bg: var(--zvk-ui-color-muted);
+    --zvk-ui-list-row-border: var(--zvk-ui-color-primary);
+  }
+
+  :where(.zvk-ui-list-row[data-density="compact"]) {
+    gap: var(--zvk-ui-space-2);
+    padding-block: var(--zvk-ui-space-2);
+    padding-inline: var(--zvk-ui-space-2);
+  }
+
+  :where(.zvk-ui-list-row[data-density="comfortable"]) {
+    gap: var(--zvk-ui-space-4);
+    padding-block: var(--zvk-ui-space-4);
+    padding-inline: var(--zvk-ui-space-4);
+  }
+
+  :where(.zvk-ui-list-row--action) {
+    appearance: none;
+    cursor: pointer;
+    font: inherit;
+    width: 100%;
+  }
+
+  :where(button.zvk-ui-list-row--action) {
+    border-color: var(--zvk-ui-list-row-border);
+  }
+
+  :where(.zvk-ui-list-row--action:hover:not(:disabled, [data-disabled="true"])) {
+    --zvk-ui-list-row-bg: var(--zvk-ui-control-hover);
+    --zvk-ui-list-row-border: var(--zvk-ui-color-border-strong);
+  }
+
+  :where(.zvk-ui-list-row--action:focus-visible) {
+    box-shadow: var(--zvk-ui-focus-ring);
+    outline: 0;
+  }
+
+  :where(.zvk-ui-list-row[data-disabled="true"], .zvk-ui-list-row:disabled) {
+    cursor: not-allowed;
+    opacity: var(--zvk-ui-opacity-disabled);
+  }
+
+  :where(.zvk-ui-list-row__leading, .zvk-ui-list-row__trailing, .zvk-ui-list-row__actions) {
+    align-items: center;
+    display: inline-flex;
+    gap: var(--zvk-ui-space-2);
+    min-width: 0;
+  }
+
+  :where(.zvk-ui-list-row__content) {
+    display: grid;
+    gap: var(--zvk-ui-space-1);
+    min-width: 0;
+  }
+
+  :where(.zvk-ui-list-row__title) {
+    color: var(--zvk-ui-color-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+    font-weight: 650;
     line-height: var(--zvk-ui-line-height-tight);
     margin: 0;
+    min-width: 0;
   }
 
-  :where(.zvk-ui-table__toolbar-actions) {
-    align-items: center;
-    display: inline-flex;
-    flex-wrap: wrap;
-    gap: var(--zvk-ui-space-2);
+  :where(.zvk-ui-list-row__description, .zvk-ui-list-row__meta) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-xs);
+    line-height: var(--zvk-ui-line-height-normal);
+    margin: 0;
+    min-width: 0;
   }
 
-  :where(.zvk-ui-table__head, .zvk-ui-table__cell) {
-    text-align: left;
-    padding-block: var(--zvk-ui-table-cell-padding-y);
-    padding-inline: var(--zvk-ui-table-cell-padding-x);
+  :where(.zvk-ui-list-row__meta, .zvk-ui-list-row__trailing, .zvk-ui-list-row__actions) {
+    justify-self: end;
   }
+}
 
-  :where(.zvk-ui-table__selection-cell) {
-    inline-size: 1%;
-    text-align: center;
-    white-space: nowrap;
+
+/* src/components/grid-list/grid-list.css */
+@layer zvk-ui-components {
+  :where(.zvk-ui-grid-list) {
+    display: grid;
+    gap: var(--zvk-ui-space-2);
+    min-width: 0;
   }
 
-  :where(.zvk-ui-table__selection-cell[data-disabled="true"]) {
-    opacity: var(--zvk-ui-opacity-disabled);
+  :where(.zvk-ui-grid-list__row) {
+    background: var(--zvk-ui-color-surface);
+    border: 1px solid var(--zvk-ui-color-border);
+    border-radius: var(--zvk-ui-radius-md);
+    color: var(--zvk-ui-color-foreground);
+    cursor: pointer;
+    display: grid;
+    min-width: 0;
+    transition: background var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), border-color var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), box-shadow var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard);
   }
 
-  :where(.zvk-ui-table__selection-checkbox) {
-    justify-content: center;
+  :where(.zvk-ui-grid-list__row:hover:not([data-disabled="true"])) {
+    background: var(--zvk-ui-control-hover);
+    border-color: var(--zvk-ui-color-border-strong);
   }
 
-  :where(.zvk-ui-table__head) {
-    font-size: var(--zvk-ui-font-size-sm);
-    font-weight: 600;
+  :where(.zvk-ui-grid-list__row:focus-visible) {
+    box-shadow: var(--zvk-ui-focus-ring);
+    outline: 0;
   }
 
-  :where(.zvk-ui-table__sort-button) {
-    align-items: center;
-    appearance: none;
-    background: transparent;
-    border: 0;
-    border-radius: var(--zvk-ui-radius-sm);
-    color: inherit;
-    cursor: pointer;
-    display: inline-flex;
-    font: inherit;
-    font-weight: inherit;
-    gap: var(--zvk-ui-space-2);
-    margin: calc(-1 * var(--zvk-ui-space-1));
-    padding: var(--zvk-ui-space-1);
-    text-align: inherit;
+  :where(.zvk-ui-grid-list__row[data-active="true"]) {
+    border-color: var(--zvk-ui-color-border-strong);
   }
 
-  :where(.zvk-ui-table__sort-button:hover) {
+  :where(.zvk-ui-grid-list__row[data-selected="true"]) {
     background: var(--zvk-ui-color-muted);
+    border-color: var(--zvk-ui-color-primary);
   }
 
-  :where(.zvk-ui-table__sort-button:focus-visible) {
-    box-shadow: var(--zvk-ui-focus-ring);
-    outline: none;
+  :where(.zvk-ui-grid-list__row[data-disabled="true"]) {
+    cursor: not-allowed;
+    opacity: var(--zvk-ui-opacity-disabled);
   }
 
-  :where(.zvk-ui-table__sort-button:disabled) {
-    cursor: not-allowed;
-    opacity: 0.55;
+  :where(.zvk-ui-grid-list__cell) {
+    display: grid;
+    gap: var(--zvk-ui-space-1);
+    min-width: 0;
+    padding: var(--zvk-ui-space-3);
   }
 
-  :where(.zvk-ui-table__sort-direction) {
+  :where(.zvk-ui-grid-list__empty, .zvk-ui-grid-list__loading) {
     color: var(--zvk-ui-color-muted-foreground);
-    font-size: var(--zvk-ui-font-size-xs);
-    font-weight: 500;
-    line-height: 1;
+    font-size: var(--zvk-ui-font-size-sm);
+    padding: var(--zvk-ui-space-4);
+    text-align: center;
   }
+}
 
-  :where(.zvk-ui-table__row) {
-    border-bottom: 1px solid var(--zvk-ui-color-border-subtle);
+
+/* src/components/tree-view/tree-view.css */
+@layer zvk-ui-components {
+  :where(.zvk-ui-tree-view) {
+    display: grid;
+    gap: var(--zvk-ui-space-1);
+    min-width: 0;
   }
 
-  :where(.zvk-ui-table__row:last-child) {
-    border-bottom: none;
+  :where(.zvk-ui-tree-view__item) {
+    align-items: center;
+    border: 1px solid transparent;
+    border-radius: var(--zvk-ui-radius-sm);
+    color: var(--zvk-ui-color-foreground);
+    cursor: pointer;
+    display: flex;
+    font-size: var(--zvk-ui-font-size-sm);
+    gap: var(--zvk-ui-space-2);
+    min-height: var(--zvk-ui-control-height-sm);
+    min-width: 0;
+    padding-block: var(--zvk-ui-space-1);
+    padding-inline: calc(var(--zvk-ui-space-2) + var(--zvk-ui-tree-view-indent, 0rem)) var(--zvk-ui-space-2);
+    transition: background var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), border-color var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), box-shadow var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard);
   }
 
-  :where(.zvk-ui-table__state-row) {
-    color: var(--zvk-ui-color-muted-foreground);
+  :where(.zvk-ui-tree-view__item:hover:not([data-disabled="true"])) {
+    background: var(--zvk-ui-control-hover);
   }
 
-  :where(.zvk-ui-table__state-row[data-state="loading"]) {
-    color: var(--zvk-ui-color-foreground);
+  :where(.zvk-ui-tree-view__item:focus-visible) {
+    box-shadow: var(--zvk-ui-focus-ring);
+    outline: 0;
   }
 
-  :where(.zvk-ui-table__state-row[data-state="error"]) {
-    color: var(--zvk-ui-color-destructive);
+  :where(.zvk-ui-tree-view__item[data-active="true"]) {
+    border-color: var(--zvk-ui-color-border-strong);
   }
 
-  :where(.zvk-ui-table__state-cell) {
-    padding-block: calc(var(--zvk-ui-table-cell-padding-y) * 2);
-    text-align: center;
+  :where(.zvk-ui-tree-view__item[data-selected="true"]) {
+    background: var(--zvk-ui-color-muted);
+    border-color: var(--zvk-ui-color-primary);
   }
 
-  @media (max-width: 40rem) {
-    :where(.zvk-ui-table-container) {
-      box-shadow:
-        inset var(--zvk-ui-space-2) 0 var(--zvk-ui-space-3) calc(-1 * var(--zvk-ui-space-3)) color-mix(in srgb, var(--zvk-ui-color-foreground) 18%, transparent),
-        inset calc(-1 * var(--zvk-ui-space-2)) 0 var(--zvk-ui-space-3) calc(-1 * var(--zvk-ui-space-3)) color-mix(in srgb, var(--zvk-ui-color-foreground) 18%, transparent);
-      scrollbar-width: thin;
-    }
+  :where(.zvk-ui-tree-view__item[data-disabled="true"]) {
+    cursor: not-allowed;
+    opacity: var(--zvk-ui-opacity-disabled);
   }
 }
 
@@ -4481,7 +5168,7 @@
     cursor: default;
     display: flex;
     gap: var(--zvk-ui-space-2);
-    justify-content: space-between;
+    justify-content: flex-start;
     padding: var(--zvk-ui-space-2) var(--zvk-ui-space-3);
     text-align: left;
     user-select: none;
@@ -4962,7 +5649,7 @@
     display: flex;
     font: inherit;
     gap: var(--zvk-ui-space-2);
-    justify-content: space-between;
+    justify-content: flex-start;
     padding: var(--zvk-ui-space-2) var(--zvk-ui-space-3);
     text-align: start;
   }
@@ -5112,7 +5799,7 @@
     align-items: center;
     display: flex;
     gap: var(--zvk-ui-space-2);
-    justify-content: space-between;
+    justify-content: flex-start;
     padding: var(--zvk-ui-space-2) var(--zvk-ui-space-3);
     text-align: start;
   }
@@ -5577,6 +6264,164 @@
 }
 
 
+/* src/components/splitter/splitter.css */
+@layer zvk-ui-components {
+  :where(.zvk-ui-splitter) {
+    align-items: stretch;
+    display: flex;
+    gap: 0;
+    min-height: 0;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  :where(.zvk-ui-splitter[data-orientation="vertical"]) {
+    flex-direction: column;
+  }
+
+  :where(.zvk-ui-splitter__panel) {
+    min-height: 0;
+    min-width: 0;
+    overflow: auto;
+  }
+
+  :where(.zvk-ui-splitter__handle) {
+    align-items: center;
+    align-self: stretch;
+    cursor: col-resize;
+    display: inline-flex;
+    flex: 0 0 var(--zvk-ui-space-2);
+    justify-content: center;
+    outline: 0;
+    position: relative;
+    touch-action: none;
+  }
+
+  :where(.zvk-ui-splitter__handle)::before {
+    background: var(--zvk-ui-color-border);
+    border-radius: var(--zvk-ui-radius-full);
+    content: "";
+    display: block;
+    height: 100%;
+    min-height: var(--zvk-ui-space-6);
+    transition: background var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), box-shadow var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard);
+    width: 1px;
+  }
+
+  :where(.zvk-ui-splitter__handle:hover:not([data-disabled="true"]))::before {
+    background: var(--zvk-ui-color-border-strong);
+  }
+
+  :where(.zvk-ui-splitter__handle:focus-visible)::before {
+    background: var(--zvk-ui-color-primary);
+    box-shadow: var(--zvk-ui-focus-ring);
+  }
+
+  :where(.zvk-ui-splitter__handle[data-orientation="horizontal"]) {
+    align-self: stretch;
+    cursor: row-resize;
+    flex-basis: var(--zvk-ui-space-2);
+  }
+
+  :where(.zvk-ui-splitter__handle[data-orientation="horizontal"])::before {
+    height: 1px;
+    min-height: 0;
+    min-width: var(--zvk-ui-space-6);
+    width: 100%;
+  }
+
+  :where(.zvk-ui-splitter__handle[data-disabled="true"]) {
+    cursor: not-allowed;
+    opacity: var(--zvk-ui-opacity-disabled);
+  }
+}
+
+
+/* src/components/toolbar/toolbar.css */
+@layer zvk-ui-components {
+  :where(.zvk-ui-toolbar) {
+    align-items: center;
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: var(--zvk-ui-space-1);
+    min-width: 0;
+  }
+
+  :where(.zvk-ui-toolbar[data-orientation="vertical"]) {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  :where(.zvk-ui-toolbar__group) {
+    align-items: center;
+    display: inline-flex;
+    gap: var(--zvk-ui-space-1);
+    min-width: 0;
+  }
+
+  :where(.zvk-ui-toolbar[data-orientation="vertical"] .zvk-ui-toolbar__group) {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  :where(.zvk-ui-toolbar__button) {
+    align-items: center;
+    appearance: none;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--zvk-ui-radius-sm);
+    color: var(--zvk-ui-color-foreground);
+    cursor: pointer;
+    display: inline-flex;
+    font-family: var(--zvk-ui-font-family-primary);
+    font-size: var(--zvk-ui-font-size-sm);
+    font-weight: 600;
+    gap: var(--zvk-ui-control-gap);
+    height: var(--zvk-ui-control-height-sm);
+    justify-content: center;
+    line-height: 1;
+    min-width: var(--zvk-ui-control-height-sm);
+    padding-inline: calc(var(--zvk-ui-control-padding-x) - 0.125rem);
+    transition: background var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), border-color var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), box-shadow var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard);
+    user-select: none;
+  }
+
+  :where(.zvk-ui-toolbar__button:hover:not(:disabled, [data-disabled="true"])) {
+    background: var(--zvk-ui-control-hover);
+  }
+
+  :where(.zvk-ui-toolbar__button:focus-visible) {
+    box-shadow: var(--zvk-ui-focus-ring);
+    outline: 0;
+  }
+
+  :where(.zvk-ui-toolbar__button:disabled, .zvk-ui-toolbar__button[data-disabled="true"]) {
+    cursor: not-allowed;
+    opacity: var(--zvk-ui-opacity-disabled);
+  }
+
+  :where(.zvk-ui-toolbar__toggle[data-state="on"]) {
+    background: var(--zvk-ui-color-muted);
+    border-color: var(--zvk-ui-color-border-strong);
+  }
+
+  :where(.zvk-ui-toolbar__separator) {
+    align-self: stretch;
+    background: var(--zvk-ui-color-border);
+    flex: 0 0 1px;
+    margin: var(--zvk-ui-space-1);
+    min-height: var(--zvk-ui-control-height-sm);
+    width: 1px;
+  }
+
+  :where(.zvk-ui-toolbar__separator[data-orientation="horizontal"]) {
+    height: 1px;
+    min-height: 0;
+    width: auto;
+  }
+}
+
+
 /* src/components/toast/toast.css */
 @layer zvk-ui-components {
   :where(.zvk-ui-toast-viewport) {