@tangible/ui 0.0.2 → 0.0.4

package/styles/all.expanded.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 @keyframes tui-fadeFromOpaque {
   from {
     opacity: 1;
@@ -29,6 +30,21 @@
 --tui-accordion-trigger-hover
 */
 /* @tui-tokens
+--tui-avatar-size
+--tui-avatar-radius
+--tui-avatar-bg
+--tui-avatar-fg
+--tui-avatar-border
+--tui-avatar-indicator-bg
+--tui-avatar-indicator-fg
+--tui-avatar-overflow-bg
+--tui-avatar-overflow-fg
+--tui-avatar-group-overlap
+--tui-avatar-group-gap
+--tui-avatar-group-border-width
+--tui-avatar-group-border-color
+*/
+/* @tui-tokens
 --tui-button-bg
 --tui-button-fg
 --tui-button-border
@@ -36,6 +52,10 @@
 --tui-button-bg-interact
 --tui-button-fg-interact
 --tui-button-border-interact
+--tui-button-fg-active
+--tui-control-height-sm
+--tui-control-height-md
+--tui-control-height-lg
 */
 /* @tui-tokens
 --tui-card-bg
@@ -48,12 +68,99 @@
 --tui-card-foot-basis
 */
 /* @tui-tokens
+--tui-input-accent
+*/
+/* @tui-tokens
+--tui-chip-bg
+--tui-chip-fg
+--tui-chip-border
+--tui-chip-icon
+--tui-chip-radius
+--tui-chip-selected-ring
+*/
+/* @tui-tokens
+--tui-chip-group-gap
+*/
+/* @tui-tokens
+--tui-combobox-input-bg
+--tui-combobox-input-fg
+--tui-combobox-input-border
+--tui-combobox-input-border-focus
+--tui-combobox-input-radius
+--tui-combobox-content-bg
+--tui-combobox-content-border
+--tui-combobox-content-shadow
+--tui-combobox-content-radius
+--tui-combobox-option-bg-hover
+--tui-combobox-option-bg-selected
+*/
+/* @tui-tokens
+--tui-content-indicator-bg
+--tui-content-indicator-border
+--tui-content-indicator-fg
+*/
+/* @tui-tokens
+--tui-dropdown-bg
+--tui-dropdown-fg
+--tui-dropdown-radius
+--tui-dropdown-shadow
+--tui-dropdown-border
+--tui-dropdown-z
+--tui-dropdown-min-width
+--tui-dropdown-item-bg-hover
+--tui-dropdown-item-bg-active
+*/
+/* @tui-tokens
 --tui-field-gap
 --tui-field-label-fg
 --tui-field-helper-fg
 --tui-field-error-fg
 */
 /* @tui-tokens
+--tui-multiselect-trigger-bg
+--tui-multiselect-trigger-fg
+--tui-multiselect-trigger-border
+--tui-multiselect-trigger-border-focus
+--tui-multiselect-trigger-radius
+--tui-multiselect-content-bg
+--tui-multiselect-content-border
+--tui-multiselect-content-shadow
+--tui-multiselect-content-radius
+--tui-multiselect-option-bg-hover
+--tui-multiselect-option-bg-selected
+--tui-multiselect-chip-bg
+--tui-multiselect-chip-fg
+*/
+/* @tui-tokens
+--tui-select-trigger-bg
+--tui-select-trigger-fg
+--tui-select-trigger-border
+--tui-select-trigger-border-focus
+--tui-select-trigger-radius
+--tui-select-content-bg
+--tui-select-content-border
+--tui-select-content-shadow
+--tui-select-content-radius
+--tui-select-option-bg-hover
+--tui-select-option-bg-selected
+*/
+/* @tui-tokens
+--tui-icon-size-xs
+--tui-icon-size-sm
+--tui-icon-size-md
+--tui-icon-size-lg
+--tui-icon-size-xl
+--tui-icon-size-xxl
+*/
+/* @tui-tokens
+--tui-icon-button-bg
+--tui-icon-button-fg
+--tui-icon-button-border
+--tui-icon-button-radius
+--tui-icon-button-bg-interact
+--tui-icon-button-fg-interact
+*/
+/* @tui-tokens
 --tui-modal-z
 --tui-modal-max
 --tui-modal-backdrop
@@ -64,15 +171,89 @@
 --tui-modal-shadow
 */
 /* @tui-tokens
+--tui-move-handle-size
+--tui-move-handle-icon-size
+*/
+/* @tui-tokens
 --tui-notice-bg
 --tui-notice-border
 --tui-notice-stripe
+--tui-notice-stripe-width
 --tui-notice-fg
 --tui-notice-radius
 --tui-notice-padding
 --tui-notice-foot-basis
 */
 /* @tui-tokens
+--tui-overlap-stack-overlap
+--tui-overlap-stack-overflow-bg
+--tui-overlap-stack-overflow-fg
+--tui-overlap-stack-item-radius
+--tui-overlap-stack-border-width
+--tui-overlap-stack-border-color
+*/
+/* @tui-tokens
+--tui-pager-gap
+*/
+/* @tui-tokens
+--tui-radio-accent
+*/
+/* @tui-tokens
+--tui-rating-active
+--tui-rating-inactive
+--tui-rating-scale
+*/
+/* @tui-tokens
+--tui-progress-track
+--tui-progress-fill
+--tui-progress-label
+--tui-progress-radius
+--tui-progress-z1-fill
+--tui-progress-z2-fill
+--tui-progress-z3-fill
+--tui-progress-z4-fill
+--tui-progress-z5-fill
+*/
+/* @tui-tokens
+--tui-segmented-gap
+--tui-segmented-padding
+--tui-segmented-radius
+--tui-segmented-bg
+--tui-segmented-border
+--tui-segmented-item-padding
+--tui-segmented-item-radius
+--tui-segmented-item-fg
+--tui-segmented-item-bg-active
+--tui-segmented-item-fg-active
+*/
+/* @tui-tokens
+--tui-switch-accent
+--tui-switch-track-off
+*/
+/* @tui-tokens
+--tui-sidebar-width
+--tui-sidebar-bg
+--tui-sidebar-border
+--tui-sidebar-padding
+--tui-sidebar-z
+*/
+/* @tui-tokens: none — inherits --tui-progress-track, --tui-progress-fill */
+/* @tui-tokens
+--tui-steplist-gap
+--tui-steplist-padding
+--tui-steplist-radius
+--tui-steplist-current-bg
+--tui-steplist-current-border
+--tui-steplist-hover-bg
+*/
+/* @tui-tokens
+--tui-table-border
+--tui-table-bg
+--tui-table-bg-head
+--tui-table-fg
+--tui-table-padding
+*/
+/* @tui-tokens
 --tui-tabs-gap
 --tui-tabs-list-bg
 --tui-tabs-list-padding
@@ -88,6 +269,20 @@
 --tui-tabs-indicator
 --tui-tabs-indicator-size
 */
+/* @tui-tokens: none — inherits from input (--tui-input-*) */
+/* @tui-tokens
+--tui-input-group-gap
+*/
+/* @tui-tokens
+--tui-toolbar-gap
+--tui-toolbar-padding
+*/
+/* @tui-tokens
+--tui-tooltip-bg
+--tui-tooltip-fg
+--tui-tooltip-radius
+--tui-tooltip-z
+*/
 @layer resets, defaults, components, utilities;
 :where(.tui-interface) {
   /* UA chrome: native controls, scrollbars render in light mode */
@@ -105,6 +300,8 @@
   --tui-focus-ring-width: 2px;
   --tui-focus-ring-offset: 2px;
   --tui-focus-ring-color: #2563eb;
+  /* Font Weight */
+  --tui-font-weight-medium: 500;
   /* Border */
   --tui-border-width: 1px;
   /* Z-Index Layers */
@@ -119,6 +316,7 @@
   /* Neutral: surfaces */
   --tui-color-bg: #fff;
   --tui-color-bg-surface: #fafafa;
+  --tui-color-bg-muted: #F3F4F6;
   --tui-color-bg-elevated: #fff;
   --tui-color-bg-inverted: #111928;
   --tui-color-bg-overlay: rgba(0, 0, 0, var(--tui-opacity-backdrop));
@@ -189,7 +387,8 @@
   /* Backgrounds */
   --tui-color-bg: #111928;
   --tui-color-bg-surface: #202836;
-  --tui-color-bg-elevated: #374151;
+  --tui-color-bg-muted: #374151;
+  --tui-color-bg-elevated: #111928;
   --tui-color-bg-inverted: #F9FAFB;
   --tui-color-bg-overlay: rgba(0, 0, 0, 0.7);
   /* Text */
@@ -243,7 +442,8 @@
     /* Backgrounds */
     --tui-color-bg: #111928;
     --tui-color-bg-surface: #202836;
-    --tui-color-bg-elevated: #374151;
+    --tui-color-bg-muted: #374151;
+    --tui-color-bg-elevated: #111928;
     --tui-color-bg-inverted: #F9FAFB;
     --tui-color-bg-overlay: rgba(0, 0, 0, 0.7);
     /* Text */
@@ -290,6 +490,96 @@
     --tui-shadow-color: 0, 0, 0;
   }
 }
+:where(.tui-interface) {
+  /* Accent: section (fallback → warning) */
+  --tui-theme-section-base: var(--tui-theme-warning-base);
+  --tui-theme-section-soft: var(--tui-theme-warning-subtle);
+  --tui-theme-section-border: var(--tui-theme-warning-soft);
+  --tui-theme-section-on-base: var(--tui-color-fg-on-accent);
+  --tui-theme-section-on-soft: var(--tui-color-fg);
+  /* Accent: page (fallback → primary) */
+  --tui-theme-page-base: var(--tui-theme-primary-base);
+  --tui-theme-page-soft: var(--tui-theme-primary-subtle);
+  --tui-theme-page-border: var(--tui-theme-primary-soft);
+  --tui-theme-page-on-base: var(--tui-color-fg-on-accent);
+  --tui-theme-page-on-soft: var(--tui-color-fg);
+  /* Accent: step (fallback → info) */
+  --tui-theme-step-base: var(--tui-theme-info-base);
+  --tui-theme-step-soft: var(--tui-theme-info-subtle);
+  --tui-theme-step-border: var(--tui-theme-info-soft);
+  --tui-theme-step-on-base: var(--tui-color-fg-on-accent);
+  --tui-theme-step-on-soft: var(--tui-color-fg);
+}
+
+@supports (color: oklch(50% 0.1 0deg)) {
+  :where(.tui-interface) {
+    /* Accent: section (OKLCH c=0.17 h=55) */
+    --tui-palette-section-c: 0.17;
+    --tui-palette-section-h: 55;
+    --tui-theme-section-base: oklch(0.62 var(--tui-palette-section-c) var(--tui-palette-section-h));
+    --tui-theme-section-soft: oklch(0.92 calc(var(--tui-palette-section-c) * 0.55) var(--tui-palette-section-h));
+    --tui-theme-section-border: oklch(0.80 calc(var(--tui-palette-section-c) * 0.45) var(--tui-palette-section-h));
+    --tui-theme-section-on-base: oklch(0.98 0 0);
+    --tui-theme-section-on-soft: var(--tui-color-fg);
+    /* Accent: page (OKLCH c=0.15 h=280) */
+    --tui-palette-page-c: 0.15;
+    --tui-palette-page-h: 280;
+    --tui-theme-page-base: oklch(0.62 var(--tui-palette-page-c) var(--tui-palette-page-h));
+    --tui-theme-page-soft: oklch(0.92 calc(var(--tui-palette-page-c) * 0.55) var(--tui-palette-page-h));
+    --tui-theme-page-border: oklch(0.80 calc(var(--tui-palette-page-c) * 0.45) var(--tui-palette-page-h));
+    --tui-theme-page-on-base: oklch(0.98 0 0);
+    --tui-theme-page-on-soft: var(--tui-color-fg);
+    /* Accent: step (OKLCH c=0.14 h=200) */
+    --tui-palette-step-c: 0.14;
+    --tui-palette-step-h: 200;
+    --tui-theme-step-base: oklch(0.62 var(--tui-palette-step-c) var(--tui-palette-step-h));
+    --tui-theme-step-soft: oklch(0.92 calc(var(--tui-palette-step-c) * 0.55) var(--tui-palette-step-h));
+    --tui-theme-step-border: oklch(0.80 calc(var(--tui-palette-step-c) * 0.45) var(--tui-palette-step-h));
+    --tui-theme-step-on-base: oklch(0.98 0 0);
+    --tui-theme-step-on-soft: var(--tui-color-fg);
+  }
+}
+@supports (color: oklch(50% 0.1 0deg)) {
+  :where(.tui-interface)[data-theme=dark] {
+    --tui-theme-section-base: oklch(0.72 var(--tui-palette-section-c) var(--tui-palette-section-h));
+    --tui-theme-section-soft: oklch(0.30 calc(var(--tui-palette-section-c) * 0.35) var(--tui-palette-section-h));
+    --tui-theme-section-border: oklch(0.38 calc(var(--tui-palette-section-c) * 0.30) var(--tui-palette-section-h));
+    --tui-theme-section-on-base: oklch(0.18 0 0);
+    --tui-theme-section-on-soft: var(--tui-color-fg);
+    --tui-theme-page-base: oklch(0.72 var(--tui-palette-page-c) var(--tui-palette-page-h));
+    --tui-theme-page-soft: oklch(0.30 calc(var(--tui-palette-page-c) * 0.35) var(--tui-palette-page-h));
+    --tui-theme-page-border: oklch(0.38 calc(var(--tui-palette-page-c) * 0.30) var(--tui-palette-page-h));
+    --tui-theme-page-on-base: oklch(0.18 0 0);
+    --tui-theme-page-on-soft: var(--tui-color-fg);
+    --tui-theme-step-base: oklch(0.72 var(--tui-palette-step-c) var(--tui-palette-step-h));
+    --tui-theme-step-soft: oklch(0.30 calc(var(--tui-palette-step-c) * 0.35) var(--tui-palette-step-h));
+    --tui-theme-step-border: oklch(0.38 calc(var(--tui-palette-step-c) * 0.30) var(--tui-palette-step-h));
+    --tui-theme-step-on-base: oklch(0.18 0 0);
+    --tui-theme-step-on-soft: var(--tui-color-fg);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  @supports (color: oklch(50% 0.1 0deg)) {
+    :where(.tui-interface)[data-theme=auto] {
+      --tui-theme-section-base: oklch(0.72 var(--tui-palette-section-c) var(--tui-palette-section-h));
+      --tui-theme-section-soft: oklch(0.30 calc(var(--tui-palette-section-c) * 0.35) var(--tui-palette-section-h));
+      --tui-theme-section-border: oklch(0.38 calc(var(--tui-palette-section-c) * 0.30) var(--tui-palette-section-h));
+      --tui-theme-section-on-base: oklch(0.18 0 0);
+      --tui-theme-section-on-soft: var(--tui-color-fg);
+      --tui-theme-page-base: oklch(0.72 var(--tui-palette-page-c) var(--tui-palette-page-h));
+      --tui-theme-page-soft: oklch(0.30 calc(var(--tui-palette-page-c) * 0.35) var(--tui-palette-page-h));
+      --tui-theme-page-border: oklch(0.38 calc(var(--tui-palette-page-c) * 0.30) var(--tui-palette-page-h));
+      --tui-theme-page-on-base: oklch(0.18 0 0);
+      --tui-theme-page-on-soft: var(--tui-color-fg);
+      --tui-theme-step-base: oklch(0.72 var(--tui-palette-step-c) var(--tui-palette-step-h));
+      --tui-theme-step-soft: oklch(0.30 calc(var(--tui-palette-step-c) * 0.35) var(--tui-palette-step-h));
+      --tui-theme-step-border: oklch(0.38 calc(var(--tui-palette-step-c) * 0.30) var(--tui-palette-step-h));
+      --tui-theme-step-on-base: oklch(0.18 0 0);
+      --tui-theme-step-on-soft: var(--tui-color-fg);
+    }
+  }
+}
 @media (prefers-reduced-motion: reduce) {
   :where(.tui-interface) {
     --tui-motion-duration: 0ms;
@@ -349,6 +639,7 @@
                     0 2px 4px rgba(var(--tui-shadow-color), 0.06);
   --tui-shadow-lg: 0 10px 15px rgba(var(--tui-shadow-color), 0.1),
                     0 4px 6px rgba(var(--tui-shadow-color), 0.05);
+  --tui-shadow-dropdown: 0 4px 12px rgba(var(--tui-shadow-color), 0.15);
 }
 
 @layer resets {
@@ -397,7 +688,7 @@
   :where(.tui-interface) .tui-accordion__item[data-state=open] {
     --_bg: var(--_bg-open);
   }
-  :where(.tui-interface) .tui-accordion__item[data-disabled=true] {
+  :where(.tui-interface) .tui-accordion__item[data-disabled] {
     opacity: var(--tui-opacity-disabled);
   }
   :where(.tui-interface) .tui-accordion__heading {
@@ -448,7 +739,7 @@
     transition-duration: var(--tui-motion-duration);
     transition-timing-function: var(--tui-motion-timing);
   }
-  [data-state=open] > :where(.tui-interface) .tui-accordion__indicator {
+  :where(.tui-interface) .tui-accordion__trigger[data-state=open] > .tui-accordion__indicator {
     transform: rotate(180deg);
   }
   :where(.tui-interface) .tui-accordion__panel {
@@ -483,6 +774,19 @@
   :where(.tui-interface) .tui-accordion__panel[data-state=open] > .tui-accordion__panel-content {
     animation: tui-fadeFromTransparent var(--tui-motion-duration) var(--tui-motion-timing) forwards;
   }
+  @media (forced-colors: active) {
+    :where(.tui-interface) .tui-accordion__item {
+      border-color: CanvasText;
+    }
+    :where(.tui-interface) .tui-accordion__trigger:hover:not(:disabled) {
+      background-color: Highlight;
+      color: HighlightText;
+      forced-color-adjust: none;
+    }
+    :where(.tui-interface) .tui-accordion__trigger:focus-visible {
+      outline-color: Highlight;
+    }
+  }
   :where(.tui-interface) {
     --tui-avatar-palette-coral: #c62828;
     --tui-avatar-palette-amber: #f59e0b;
@@ -500,7 +804,7 @@
     --_radius: var(--tui-avatar-radius, 50%);
     --_bg: var(--tui-avatar-bg, var(--tui-color-bg-muted));
     --_fg: var(--tui-avatar-fg, var(--tui-color-fg-inverted));
-    --_border: var(--tui-avatar-border, 2px solid var(--tui-color-bg));
+    --_border: var(--tui-avatar-border, none);
     position: relative;
     display: inline-flex;
     align-items: center;
@@ -508,9 +812,10 @@
     width: var(--_size);
     height: var(--_size);
     border-radius: var(--_radius);
+    border: var(--_border);
     background-color: var(--_bg);
     color: var(--_fg);
-    font-weight: 500;
+    font-weight: var(--tui-font-weight-medium, 500);
     font-size: calc(var(--_size) * 0.4);
     line-height: 1;
     flex-shrink: 0;
@@ -653,6 +958,20 @@
   :where(.tui-interface) .tui-avatar-group.is-overlap .tui-avatar {
     box-shadow: 0 0 0 var(--tui-avatar-group-border-width, 2px) var(--tui-avatar-group-border-color, var(--tui-color-bg-surface));
   }
+  .tui-interface[data-theme=dark] .tui-avatar.is-color-amber, .tui-interface[data-theme=dark] .tui-avatar.is-color-lime, .tui-interface[data-theme=dark] .tui-avatar.is-color-cyan,
+  .tui-interface[data-theme=dark] :where(.tui-interface) .tui-avatar.is-color-amber,
+  .tui-interface[data-theme=dark] :where(.tui-interface) .tui-avatar.is-color-lime,
+  .tui-interface[data-theme=dark] :where(.tui-interface) .tui-avatar.is-color-cyan {
+    --_fg: var(--tui-avatar-fg, var(--tui-color-fg-inverted));
+  }
+  @media (prefers-color-scheme: dark) {
+    .tui-interface[data-theme=auto] .tui-avatar.is-color-amber, .tui-interface[data-theme=auto] .tui-avatar.is-color-lime, .tui-interface[data-theme=auto] .tui-avatar.is-color-cyan,
+    .tui-interface[data-theme=auto] :where(.tui-interface) .tui-avatar.is-color-amber,
+    .tui-interface[data-theme=auto] :where(.tui-interface) .tui-avatar.is-color-lime,
+    .tui-interface[data-theme=auto] :where(.tui-interface) .tui-avatar.is-color-cyan {
+      --_fg: var(--tui-avatar-fg, var(--tui-color-fg-inverted));
+    }
+  }
   @media (forced-colors: active) {
     :where(.tui-interface) .tui-avatar {
       background-color: Canvas;
@@ -663,8 +982,8 @@
   :where(.tui-interface) :is(button, [type=button], [type=submit]) {
     cursor: pointer;
     font-family: inherit;
-    font-size: var(--tui-typography-size-md);
-    line-height: 1.4;
+    font-size: var(--tui-button-font-size, var(--tui-typography-size-md));
+    line-height: var(--tui-button-line-height, 1.4);
     border: unset;
     box-shadow: unset;
     height: auto;
@@ -684,11 +1003,11 @@
     --_border: var(--tui-button-border, var(--tui-theme-primary-base));
     --_radius: var(--tui-button-radius, var(--tui-radius-md));
     --_bg-interact: var(--tui-button-bg-interact, var(--tui-theme-primary-stronger));
-    --_fg-interact: var(--tui-button-fg-interact, var(--tui-palette-color-white));
+    --_fg-interact: var(--tui-button-fg-interact, var(--tui-color-fg-on-accent));
     --_border-interact: var(--tui-button-border-interact, var(--tui-theme-primary-stronger));
-    font-size: var(--tui-typography-size-md);
-    font-weight: normal;
-    line-height: 1.4;
+    font-size: var(--tui-button-font-size, var(--tui-typography-size-md));
+    font-weight: var(--tui-button-font-weight, normal);
+    line-height: var(--tui-button-line-height, 1.4);
     display: inline-flex;
     align-self: center;
     text-align: center;
@@ -696,16 +1015,17 @@
     align-items: center;
     padding-inline: 1.2em;
     padding-block: 0.575em;
+    min-height: var(--tui-control-height-md);
     gap: 0.5em;
+    border-radius: var(--_radius);
+    transition-duration: var(--tui-motion-duration);
+    transition-timing-function: var(--tui-motion-timing);
+    transition-property: border-color, color, background-color;
     background-color: var(--_bg) !important;
     color: var(--_fg) !important;
     border-color: var(--_border) !important;
     border-style: solid;
     border-width: var(--tui-border-width);
-    border-radius: var(--_radius);
-    transition-duration: var(--tui-motion-duration);
-    transition-timing-function: var(--tui-motion-timing);
-    transition-property: border-color, color, background-color;
   }
   .tui-interface .tui-button .tui-icon {
     font-size: inherit;
@@ -748,18 +1068,26 @@
     display: inline-block;
     animation: tui-spin 0.85s linear infinite;
   }
+  @media (prefers-reduced-motion: reduce) {
+    .tui-interface .tui-button[data-loading=true]::before {
+      animation: none;
+      border-style: dashed;
+    }
+  }
   .tui-interface .tui-button.is-width-full {
     width: 100%;
   }
   .tui-interface .tui-button.is-size-lg {
-    font-size: var(--tui-typography-size-lg);
+    font-size: var(--tui-button-font-size-lg, var(--tui-typography-size-lg));
+    min-height: var(--tui-control-height-lg);
   }
   .tui-interface .tui-button.is-size-sm {
-    font-size: var(--tui-typography-size-sm);
+    font-size: var(--tui-button-font-size-sm, var(--tui-typography-size-sm));
+    min-height: var(--tui-control-height-sm);
   }
   .tui-interface .tui-button.is-size-xs {
     --_radius: var(--tui-button-radius, var(--tui-radius-sm));
-    font-size: var(--tui-typography-size-xs);
+    font-size: var(--tui-button-font-size-xs, var(--tui-typography-size-xs));
     padding: var(--tui-spacing-xxs);
     min-width: 2em;
   }
@@ -841,6 +1169,7 @@
     --_bg: var(--tui-button-bg, transparent);
     --_fg: var(--tui-button-fg, var(--tui-theme-primary-strong));
     --_border: transparent;
+    text-decoration: underline;
     border-width: 0;
     padding: 0;
   }
@@ -881,10 +1210,15 @@
       color: LinkText;
       border-color: transparent;
     }
+    .tui-interface .tui-button[disabled], .tui-interface .tui-button.is-disabled {
+      color: GrayText;
+      border-color: GrayText;
+      background-color: Canvas;
+    }
   }
   .tui-interface input[type=file] {
     --_bg: var(--tui-button-bg, var(--tui-theme-primary-base));
-    --_fg: var(--tui-button-fg, var(--tui-color-bg-surface));
+    --_fg: var(--tui-button-fg, var(--tui-color-fg-on-accent));
     --_border: var(--tui-button-border, var(--tui-theme-primary-base));
     --_radius: var(--tui-button-radius, var(--tui-radius-md));
     --_bg-interact: var(--tui-button-bg-interact, var(--tui-theme-primary-stronger));
@@ -892,9 +1226,9 @@
     --_border-interact: var(--tui-button-border-interact, var(--tui-theme-primary-stronger));
   }
   .tui-interface input[type=file]::file-selector-button {
-    font-size: var(--tui-typography-size-md);
-    font-weight: normal;
-    line-height: 1.4;
+    font-size: var(--tui-button-font-size, var(--tui-typography-size-md));
+    font-weight: var(--tui-button-font-weight, normal);
+    line-height: var(--tui-button-line-height, 1.4);
     display: inline-flex;
     align-self: center;
     text-align: center;
@@ -902,14 +1236,15 @@
     align-items: center;
     padding-inline: 1.2em;
     padding-block: 0.575em;
+    min-height: var(--tui-control-height-md);
     gap: 0.5em;
-    background-color: var(--_bg);
-    color: var(--_fg);
-    border: var(--tui-border-width) solid var(--_border);
     border-radius: var(--_radius);
     transition-duration: var(--tui-motion-duration);
     transition-timing-function: var(--tui-motion-timing);
     transition-property: border-color, color, background-color;
+    background-color: var(--_bg);
+    color: var(--_fg);
+    border: var(--tui-border-width) solid var(--_border);
   }
   .tui-interface input[type=file]:hover::file-selector-button {
     background-color: var(--_bg-interact);
@@ -933,9 +1268,9 @@
     --_border: var(--tui-card-border, var(--tui-color-border));
     --_border-interact: var(--tui-card-border-interact, var(--tui-theme-primary-base));
     --_radius: var(--tui-card-radius, var(--tui-radius-md));
-    --_shadow: var(--tui-card-shadow, var(--tui-shadow-md));
-    --_shadow-interact: var(--tui-card-shadow-interact, var(--tui-shadow-sm));
-    --_padding: var(--tui-card-padding, var(--tui-spacing-md));
+    --_shadow: var(--tui-card-shadow, var(--tui-shadow-sm));
+    --_shadow-interact: var(--tui-card-shadow-interact, var(--tui-shadow-md));
+    --_padding: var(--tui-card-padding, var(--tui-spacing-lg));
     --_foot-basis: var(--tui-card-foot-basis, 500px);
     container-type: inline-size;
     container-name: tuiCard;
@@ -1064,15 +1399,23 @@
   :where(.tui-interface) .tui-card.has-interaction:hover {
     --_border: var(--_border-interact);
   }
-  :where(.tui-interface) .tui-card.has-interaction:focus, :where(.tui-interface) .tui-card.has-interaction:focus-within {
+  :where(.tui-interface) .tui-card.has-interaction:focus-visible, :where(.tui-interface) .tui-card.has-interaction:has(:focus-visible) {
     --_border: var(--_border-interact);
   }
   :where(.tui-interface) .tui-card.has-interaction:active, :where(.tui-interface) .tui-card.has-interaction.active {
-    --_border: var(--tui-card-border-active, var(--tui-palette-color-gray-50));
+    --_border: var(--tui-card-border-active, var(--tui-theme-primary-soft));
+  }
+  :where(.tui-interface) .tui-card .tui-stretched-link:focus {
+    outline: none;
   }
-  :where(.tui-interface) .tui-card.has-interaction [disabled],
-  :where(.tui-interface) .tui-card.has-interaction .disabled {
+  :where(.tui-interface) .tui-card .tui-stretched-link:focus-visible::after {
+    outline: var(--tui-focus-ring-width) solid var(--tui-focus-ring-color);
+    outline-offset: calc(-1 * var(--tui-focus-ring-offset));
+    border-radius: var(--_radius);
+  }
+  :where(.tui-interface) .tui-card[aria-disabled=true] {
     opacity: var(--tui-opacity-disabled);
+    pointer-events: none;
   }
   :where(.tui-interface) .tui-card.is-style-elevated {
     box-shadow: var(--_shadow);
@@ -1102,6 +1445,11 @@
   :where(.tui-interface) .tui-inline-choice.is-disabled input {
     cursor: not-allowed;
   }
+  @media (forced-colors: active) {
+    :where(.tui-interface) input[type=checkbox] {
+      forced-color-adjust: auto;
+    }
+  }
   :where(.tui-interface) .tui-chip {
     --_bg: var(--tui-chip-bg, var(--tui-theme-secondary-subtle));
     --_fg: var(--tui-chip-fg, var(--tui-theme-secondary-strongest));
@@ -1156,7 +1504,7 @@
     outline-offset: var(--tui-focus-ring-offset);
   }
   :where(.tui-interface) .tui-chip.is-interactive:is(:active, [aria-pressed=true], .is-selected), :where(.tui-interface) .tui-chip.is-interactive:has(input:checked), :where(.tui-interface) .tui-chip:is(a, button, [role=button]):is(:active, [aria-pressed=true], .is-selected), :where(.tui-interface) .tui-chip:is(a, button, [role=button]):has(input:checked), :where(.tui-interface) .tui-chip:has(input[type=checkbox], input[type=radio]):is(:active, [aria-pressed=true], .is-selected), :where(.tui-interface) .tui-chip:has(input[type=checkbox], input[type=radio]):has(input:checked) {
-    box-shadow: 0 0 0 1px var(--_fg) inset;
+    box-shadow: 0 0 0 var(--tui-chip-selected-ring, 1px) var(--_fg) inset;
     filter: brightness(0.95);
   }
   :where(.tui-interface) .tui-chip.is-interactive:is(a), :where(.tui-interface) .tui-chip:is(a, button, [role=button]):is(a), :where(.tui-interface) .tui-chip:has(input[type=checkbox], input[type=radio]):is(a) {
@@ -1194,12 +1542,21 @@
     --_border: var(--tui-chip-border, var(--tui-theme-danger-subtlest));
     --_icon: var(--tui-chip-icon, var(--tui-theme-danger-base));
   }
-  :where(.tui-interface) .tui-chip.is-style-ghost:not(:is(a, button, [role=button])), :where(.tui-interface) .tui-chip.is-style-ghost:not(:is(:hover, :focus)) {
+  :where(.tui-interface) .tui-chip.is-style-ghost {
     --_bg: transparent;
-  }
-  :where(.tui-interface) .tui-chip.is-style-ghost:not(:is(:focus-visible, :active, [aria-pressed=true], .is-selected)) {
     --_border: transparent;
   }
+  @media (hover: hover) {
+    :where(.tui-interface) .tui-chip.is-style-ghost.is-interactive:hover, :where(.tui-interface) .tui-chip.is-style-ghost:is(a, button, [role=button]):hover, :where(.tui-interface) .tui-chip.is-style-ghost:has(input[type=checkbox], input[type=radio]):hover {
+      --_bg: var(--tui-chip-bg, var(--tui-theme-secondary-subtle));
+    }
+  }
+  :where(.tui-interface) .tui-chip.is-style-ghost.is-interactive:focus, :where(.tui-interface) .tui-chip.is-style-ghost:is(a, button, [role=button]):focus, :where(.tui-interface) .tui-chip.is-style-ghost:has(input[type=checkbox], input[type=radio]):focus {
+    --_bg: var(--tui-chip-bg, var(--tui-theme-secondary-subtle));
+  }
+  :where(.tui-interface) .tui-chip.is-style-ghost:is(:focus-visible, :active, [aria-pressed=true], .is-selected), :where(.tui-interface) .tui-chip.is-style-ghost:has(input:checked) {
+    --_border: var(--tui-chip-border, var(--tui-theme-secondary-subtle));
+  }
   :where(.tui-interface) .tui-chip.is-style-outline {
     --_bg: var(--tui-chip-bg, var(--tui-color-bg-surface));
     --_fg: var(--tui-chip-fg, var(--tui-theme-secondary-base));
@@ -1407,15 +1764,18 @@
     margin: 0;
     --_fs: var(--tui-typography-size-md);
     --_py: var(--tui-spacing-xxs);
+    --_height: calc(2em + 2 * var(--_py));
     font-size: var(--_fs);
     padding-block: var(--_py);
-    min-height: calc(2em + 2 * var(--_py));
+    min-height: var(--tui-control-height-md, var(--_height));
   }
   .tui-interface .tui-combobox__input.is-size-sm {
     --_fs: var(--tui-typography-size-sm);
+    min-height: var(--tui-control-height-sm, var(--_height));
   }
   .tui-interface .tui-combobox__input.is-size-lg {
     --_fs: var(--tui-typography-size-lg);
+    min-height: var(--tui-control-height-lg, var(--_height));
   }
   .tui-interface .tui-combobox__input {
     display: block;
@@ -1482,7 +1842,7 @@
   :where(.tui-interface) .tui-combobox__content {
     --_bg: var(--tui-combobox-content-bg, var(--tui-select-content-bg, var(--tui-color-bg-elevated)));
     --_border: var(--tui-combobox-content-border, var(--tui-select-content-border, var(--tui-color-border)));
-    --_shadow: var(--tui-combobox-content-shadow, var(--tui-select-content-shadow, 0 4px 12px rgba(0, 0, 0, 0.15)));
+    --_shadow: var(--tui-combobox-content-shadow, var(--tui-select-content-shadow, var(--tui-shadow-dropdown)));
     --_radius: var(--tui-combobox-content-radius, var(--tui-select-content-radius, var(--tui-radius-md)));
     z-index: var(--tui-layer-top);
     min-width: 160px;
@@ -1645,12 +2005,12 @@
   }
   :where(.tui-interface) .tui-dropdown {
     --_bg: var(--tui-dropdown-bg, var(--tui-color-bg-elevated));
-    --_fg: var(--tui-dropdown-fg, var(--tui-color-fg-default));
+    --_fg: var(--tui-dropdown-fg, var(--tui-color-fg));
     --_radius: var(--tui-dropdown-radius, var(--tui-radius-sm));
     --_shadow: var(--tui-dropdown-shadow, var(--tui-shadow-md));
     --_z: var(--tui-dropdown-z, var(--tui-layer-top));
-    --_border: var(--tui-dropdown-border, var(--tui-color-border-default));
-    --_item-bg-hover: var(--tui-dropdown-item-bg-hover, var(--tui-color-bg-subtle));
+    --_border: var(--tui-dropdown-border, var(--tui-color-border));
+    --_item-bg-hover: var(--tui-dropdown-item-bg-hover, var(--tui-color-bg-muted));
     --_item-bg-active: var(--tui-dropdown-item-bg-active, var(--tui-color-bg-muted));
     z-index: var(--_z);
     min-width: var(--tui-dropdown-min-width, 160px);
@@ -1680,16 +2040,21 @@
     --tui-button-fg: inherit;
     --tui-button-border-color: transparent;
   }
-  :where(.tui-interface) .tui-dropdown__item:hover, :where(.tui-interface) .tui-dropdown__item:focus-visible, :where(.tui-interface) .tui-dropdown__item[data-active],
+  :where(.tui-interface) .tui-dropdown__item:hover, :where(.tui-interface) .tui-dropdown__item[data-active],
   :where(.tui-interface) .tui-dropdown .tui-button:hover,
-  :where(.tui-interface) .tui-dropdown .tui-button:focus-visible,
   :where(.tui-interface) .tui-dropdown .tui-button[data-active],
   :where(.tui-interface) .tui-dropdown .tui-icon-button:hover,
-  :where(.tui-interface) .tui-dropdown .tui-icon-button:focus-visible,
   :where(.tui-interface) .tui-dropdown .tui-icon-button[data-active] {
     --tui-button-bg: var(--_item-bg-hover);
     --tui-button-fg: inherit;
-    outline: none;
+  }
+  :where(.tui-interface) .tui-dropdown__item:focus-visible,
+  :where(.tui-interface) .tui-dropdown .tui-button:focus-visible,
+  :where(.tui-interface) .tui-dropdown .tui-icon-button:focus-visible {
+    --tui-button-bg: var(--_item-bg-hover);
+    --tui-button-fg: inherit;
+    outline: var(--tui-focus-ring-width, 2px) solid var(--tui-focus-ring-color, #2563eb);
+    outline-offset: calc(-1 * var(--tui-focus-ring-width, 2px));
   }
   :where(.tui-interface) .tui-dropdown__item:active,
   :where(.tui-interface) .tui-dropdown .tui-button:active,
@@ -1701,13 +2066,32 @@
   :where(.tui-interface) .tui-dropdown .tui-button[aria-disabled=true],
   :where(.tui-interface) .tui-dropdown .tui-icon-button:disabled,
   :where(.tui-interface) .tui-dropdown .tui-icon-button[aria-disabled=true] {
-    opacity: 0.5;
+    opacity: var(--tui-opacity-disabled);
     cursor: not-allowed;
     pointer-events: none;
   }
   :where(.tui-interface) .tui-dropdown .tui-icon-button {
     justify-content: center;
   }
+  :where(.tui-interface) .tui-dropdown__separator {
+    border: none;
+    border-top: 1px solid var(--tui-color-border);
+    margin: var(--tui-spacing-xxs, 4px) 0;
+  }
+  :where(.tui-interface) .tui-dropdown__header {
+    padding: var(--tui-spacing-xs, 8px) var(--tui-spacing-sm, 12px);
+    padding-block-end: var(--tui-spacing-xxs, 4px);
+    font-size: var(--tui-typography-size-xs, 11px);
+    font-weight: var(--tui-font-weight-semibold, 600);
+    color: var(--tui-color-fg-muted);
+    letter-spacing: 0.02em;
+    user-select: none;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :where(.tui-interface) .tui-dropdown {
+      animation: none;
+    }
+  }
   @media (forced-colors: active) {
     :where(.tui-interface) .tui-dropdown {
       background-color: Canvas;
@@ -1790,15 +2174,18 @@
     margin: 0;
     --_fs: var(--tui-typography-size-md);
     --_py: var(--tui-spacing-xxs);
+    --_height: calc(2em + 2 * var(--_py));
     font-size: var(--_fs);
     padding-block: var(--_py);
-    min-height: calc(2em + 2 * var(--_py));
+    min-height: var(--tui-control-height-md, var(--_height));
   }
   .tui-interface .tui-multiselect__trigger.is-size-sm {
     --_fs: var(--tui-typography-size-sm);
+    min-height: var(--tui-control-height-sm, var(--_height));
   }
   .tui-interface .tui-multiselect__trigger.is-size-lg {
     --_fs: var(--tui-typography-size-lg);
+    min-height: var(--tui-control-height-lg, var(--_height));
   }
   .tui-interface .tui-multiselect__trigger {
     display: inline-flex;
@@ -1909,7 +2296,7 @@
   :where(.tui-interface) .tui-multiselect__content {
     --_bg: var(--tui-multiselect-content-bg, var(--tui-color-bg-elevated));
     --_border: var(--tui-multiselect-content-border, var(--tui-color-border));
-    --_shadow: var(--tui-multiselect-content-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
+    --_shadow: var(--tui-multiselect-content-shadow, var(--tui-shadow-dropdown));
     --_radius: var(--tui-multiselect-content-radius, var(--tui-radius-md));
     z-index: var(--tui-layer-top);
     min-width: 160px;
@@ -2055,15 +2442,18 @@
     margin: 0;
     --_fs: var(--tui-typography-size-md);
     --_py: var(--tui-spacing-xxs);
+    --_height: calc(2em + 2 * var(--_py));
     font-size: var(--_fs);
     padding-block: var(--_py);
-    min-height: calc(2em + 2 * var(--_py));
+    min-height: var(--tui-control-height-md, var(--_height));
   }
   .tui-interface .tui-select__trigger.is-size-sm {
     --_fs: var(--tui-typography-size-sm);
+    min-height: var(--tui-control-height-sm, var(--_height));
   }
   .tui-interface .tui-select__trigger.is-size-lg {
     --_fs: var(--tui-typography-size-lg);
+    min-height: var(--tui-control-height-lg, var(--_height));
   }
   .tui-interface .tui-select__trigger {
     display: inline-flex;
@@ -2139,7 +2529,7 @@
   :where(.tui-interface) .tui-select__content {
     --_bg: var(--tui-select-content-bg, var(--tui-color-bg-elevated));
     --_border: var(--tui-select-content-border, var(--tui-color-border));
-    --_shadow: var(--tui-select-content-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
+    --_shadow: var(--tui-select-content-shadow, var(--tui-shadow-dropdown));
     --_radius: var(--tui-select-content-radius, var(--tui-radius-md));
     z-index: var(--tui-layer-top);
     min-width: 160px;
@@ -2190,7 +2580,7 @@
   }
   :where(.tui-interface) .tui-select__option[aria-selected=true] {
     background-color: var(--_bg-selected);
-    font-weight: 500;
+    font-weight: var(--tui-font-weight-medium, 500);
   }
   :where(.tui-interface) .tui-select__option[aria-selected=true]:hover:not([data-disabled]), :where(.tui-interface) .tui-select__option[aria-selected=true][data-highlighted]:not([data-disabled]) {
     background-color: var(--tui-theme-primary-subtle);
@@ -2275,9 +2665,10 @@
     --_radius: var(--tui-input-radius, var(--tui-radius-md));
     --_fs: var(--tui-typography-size-md);
     --_py: var(--tui-spacing-xxs);
+    --_height: calc(2em + 2 * var(--_py));
     font-size: var(--_fs);
     padding-block: var(--_py);
-    min-height: calc(2em + 2 * var(--_py));
+    min-height: var(--tui-control-height-md, var(--_height));
   }
   :where(.tui-interface) :is(.tui-input,
   input[type=text],
@@ -2298,6 +2689,7 @@
   textarea,
   select).is-size-sm {
     --_fs: var(--tui-typography-size-sm);
+    min-height: var(--tui-control-height-sm, var(--_height));
   }
   :where(.tui-interface) :is(.tui-input,
   input[type=text],
@@ -2318,6 +2710,7 @@
   textarea,
   select).is-size-lg {
     --_fs: var(--tui-typography-size-lg);
+    min-height: var(--tui-control-height-lg, var(--_height));
   }
   :where(.tui-interface) :is(.tui-input,
   input[type=text],
@@ -2562,6 +2955,7 @@
     --_radius: var(--tui-icon-button-radius, var(--tui-radius-md));
     --_bg-interact: var(--tui-icon-button-bg-interact, var(--tui-theme-secondary-subtle));
     --_fg-interact: var(--tui-icon-button-fg-interact, var(--tui-color-fg));
+    --_bg-pressed: var(--tui-theme-secondary-soft);
     appearance: none;
     border: none;
     background: none;
@@ -2574,8 +2968,9 @@
     align-items: center;
     justify-content: center;
     position: relative;
-    width: 2rem;
-    height: 2rem;
+    --_size: var(--tui-control-height-sm, 2rem);
+    width: var(--_size);
+    height: var(--_size);
     background-color: var(--_bg);
     color: var(--_fg);
     border: var(--tui-border-width) solid var(--_border);
@@ -2585,7 +2980,7 @@
     transition-property: background-color, color, border-color;
   }
   .tui-interface .tui-icon-button .tui-icon {
-    font-size: 1rem;
+    font-size: calc(var(--_size) * 0.5);
   }
   .tui-interface .tui-icon-button:hover {
     --_bg: var(--_bg-interact);
@@ -2597,46 +2992,43 @@
     outline: var(--tui-focus-ring-width) solid var(--tui-focus-ring-color);
     outline-offset: var(--tui-focus-ring-offset);
   }
-  .tui-interface .tui-icon-button:is(:active, [aria-pressed=true]) {
+  .tui-interface .tui-icon-button:active {
     --_bg: var(--_bg-interact);
     --_fg: var(--_fg-interact);
   }
+  .tui-interface .tui-icon-button[aria-pressed=true] {
+    --_bg: var(--_bg-pressed);
+    --_fg: var(--_fg-interact);
+  }
   .tui-interface .tui-icon-button:where(:disabled, [aria-disabled=true], .is-disabled) {
     pointer-events: none;
     cursor: not-allowed;
     opacity: var(--tui-opacity-disabled);
   }
   .tui-interface .tui-icon-button.is-size-xs {
-    width: 1.5rem;
-    height: 1.5rem;
+    --_size: 1.5rem;
     --_radius: var(--tui-icon-button-radius, var(--tui-radius-sm));
   }
-  .tui-interface .tui-icon-button.is-size-xs .tui-icon {
-    font-size: 0.75rem;
-  }
   .tui-interface .tui-icon-button.is-size-md {
-    width: 2.5rem;
-    height: 2.5rem;
-  }
-  .tui-interface .tui-icon-button.is-size-md .tui-icon {
-    font-size: 1.25rem;
+    --_size: var(--tui-control-height-md, 2.5rem);
   }
   .tui-interface .tui-icon-button.is-size-lg {
-    width: 3rem;
-    height: 3rem;
+    --_size: var(--tui-control-height-lg, 3rem);
   }
-  .tui-interface .tui-icon-button.is-size-lg .tui-icon {
-    font-size: 1.5rem;
+  .tui-interface .tui-icon-button.is-shape-circle {
+    border-radius: 50%;
   }
   .tui-interface .tui-icon-button.is-theme-primary {
     --_fg: var(--tui-icon-button-fg, var(--tui-theme-primary-base));
     --_fg-interact: var(--tui-icon-button-fg-interact, var(--tui-theme-primary-strong));
     --_bg-interact: var(--tui-icon-button-bg-interact, var(--tui-theme-primary-subtlest));
+    --_bg-pressed: var(--tui-theme-primary-subtle);
   }
   .tui-interface .tui-icon-button.is-theme-danger {
     --_fg: var(--tui-icon-button-fg, var(--tui-theme-danger-base));
     --_fg-interact: var(--tui-icon-button-fg-interact, var(--tui-theme-danger-strong));
     --_bg-interact: var(--tui-icon-button-bg-interact, var(--tui-theme-danger-subtlest));
+    --_bg-pressed: var(--tui-theme-danger-subtle);
   }
   .tui-interface .tui-icon-button.is-style-outline {
     --_border: var(--tui-icon-button-border, var(--tui-color-border));
@@ -2655,24 +3047,36 @@
   .tui-interface .tui-icon-button.is-style-solid {
     --_bg: var(--tui-icon-button-bg, var(--tui-theme-secondary-subtle));
     --_fg: var(--tui-icon-button-fg, var(--tui-color-fg));
+    --_bg-pressed: var(--tui-theme-secondary-soft);
   }
-  .tui-interface .tui-icon-button.is-style-solid:hover, .tui-interface .tui-icon-button.is-style-solid:focus-visible, .tui-interface .tui-icon-button.is-style-solid:is(:active, [aria-pressed=true]) {
+  .tui-interface .tui-icon-button.is-style-solid:hover, .tui-interface .tui-icon-button.is-style-solid:focus-visible, .tui-interface .tui-icon-button.is-style-solid:active {
     --_bg: var(--tui-icon-button-bg-interact, var(--tui-theme-secondary-soft));
   }
+  .tui-interface .tui-icon-button.is-style-solid[aria-pressed=true] {
+    --_bg: var(--_bg-pressed);
+  }
   .tui-interface .tui-icon-button.is-style-solid.is-theme-primary {
     --_bg: var(--tui-icon-button-bg, var(--tui-theme-primary-base));
     --_fg: var(--tui-icon-button-fg, var(--tui-color-fg-on-accent));
+    --_bg-pressed: var(--tui-theme-primary-stronger);
   }
-  .tui-interface .tui-icon-button.is-style-solid.is-theme-primary:hover, .tui-interface .tui-icon-button.is-style-solid.is-theme-primary:focus-visible, .tui-interface .tui-icon-button.is-style-solid.is-theme-primary:is(:active, [aria-pressed=true]) {
+  .tui-interface .tui-icon-button.is-style-solid.is-theme-primary:hover, .tui-interface .tui-icon-button.is-style-solid.is-theme-primary:focus-visible, .tui-interface .tui-icon-button.is-style-solid.is-theme-primary:active {
     --_bg: var(--tui-icon-button-bg-interact, var(--tui-theme-primary-stronger));
   }
+  .tui-interface .tui-icon-button.is-style-solid.is-theme-primary[aria-pressed=true] {
+    --_bg: var(--_bg-pressed);
+  }
   .tui-interface .tui-icon-button.is-style-solid.is-theme-danger {
     --_bg: var(--tui-icon-button-bg, var(--tui-theme-danger-base));
     --_fg: var(--tui-icon-button-fg, var(--tui-color-fg-on-accent));
+    --_bg-pressed: var(--tui-theme-danger-stronger);
   }
-  .tui-interface .tui-icon-button.is-style-solid.is-theme-danger:hover, .tui-interface .tui-icon-button.is-style-solid.is-theme-danger:focus-visible, .tui-interface .tui-icon-button.is-style-solid.is-theme-danger:is(:active, [aria-pressed=true]) {
+  .tui-interface .tui-icon-button.is-style-solid.is-theme-danger:hover, .tui-interface .tui-icon-button.is-style-solid.is-theme-danger:focus-visible, .tui-interface .tui-icon-button.is-style-solid.is-theme-danger:active {
     --_bg: var(--tui-icon-button-bg-interact, var(--tui-theme-danger-stronger));
   }
+  .tui-interface .tui-icon-button.is-style-solid.is-theme-danger[aria-pressed=true] {
+    --_bg: var(--_bg-pressed);
+  }
   .tui-interface .tui-icon-button[aria-busy=true] {
     pointer-events: none;
   }
@@ -2688,6 +3092,12 @@
     border-radius: 50%;
     animation: tui-spin 0.85s linear infinite;
   }
+  @media (prefers-reduced-motion: reduce) {
+    .tui-interface .tui-icon-button__spinner {
+      animation: none;
+      border-style: dashed;
+    }
+  }
   @media (forced-colors: active) {
     .tui-icon-button {
       forced-color-adjust: none;
@@ -2703,6 +3113,11 @@
       outline: 2px solid Highlight;
       outline-offset: 2px;
     }
+    .tui-icon-button:is(:disabled, [aria-disabled=true]) {
+      color: GrayText;
+      border-color: GrayText;
+      background-color: Canvas;
+    }
   }
   .tui-modal {
     --_z: var(--tui-modal-z, var(--tui-layer-modal, 1000));
@@ -2738,7 +3153,7 @@
     --_bg: var(--tui-modal-bg, var(--tui-color-bg-surface));
     --_border: var(--tui-modal-border, var(--tui-color-border));
     --_radius: var(--tui-modal-radius, var(--tui-radius-lg));
-    --_padding: var(--tui-modal-padding, var(--tui-spacing-md));
+    --_padding: var(--tui-modal-padding, var(--tui-spacing-lg));
     --_shadow: var(--tui-modal-shadow, var(--tui-shadow-lg));
     position: relative;
     width: 100%;
@@ -2759,6 +3174,10 @@
   .tui-modal__dialog:has(> .tui-modal__foot) {
     --_min-foot: 4rem;
   }
+  .tui-modal__dialog:focus-visible {
+    outline: var(--tui-focus-ring-width) solid var(--tui-focus-ring-color);
+    outline-offset: var(--tui-focus-ring-offset);
+  }
   .tui-modal__dialog {
     color: var(--tui-color-fg);
     border-style: solid;
@@ -2793,12 +3212,41 @@
   }
   .tui-modal__dialog .tui-modal__body-inner > p {
     margin: 0;
+    margin-block-end: var(--tui-spacing-md);
+  }
+  .tui-modal__dialog .tui-modal__body-inner > p:last-child {
+    margin-block-end: 0;
   }
   .tui-modal__dialog .tui-modal__head {
     padding-block: var(--_padding);
     padding-inline: var(--_padding);
     width: 100%;
   }
+  .tui-modal__dialog .tui-modal__head.has-icon {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--tui-spacing-sm);
+  }
+  .tui-modal__dialog .tui-modal__head-icon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    height: 1.5em;
+    font-size: var(--tui-typography-size-lg);
+    color: var(--tui-color-fg);
+  }
+  .tui-modal__dialog .tui-modal__head-content {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+  .tui-modal__dialog .tui-modal__head-subtitle {
+    margin-block-start: var(--tui-spacing-xxs);
+    font-size: var(--tui-typography-size-sm);
+    color: var(--tui-color-fg-muted);
+  }
+  .tui-modal__dialog:has(> .tui-modal__close) > .tui-modal__head {
+    padding-inline-end: calc(var(--_padding) + var(--tui-spacing-xl));
+  }
   .tui-modal__dialog .tui-modal__foot {
     padding-block: var(--_padding);
     padding-inline: var(--_padding);
@@ -2848,13 +3296,247 @@
   .tui-modal-open {
     overflow: hidden;
   }
+  .tui-interface .tui-move-handle {
+    --_size: var(--tui-move-handle-size, 40px);
+    --_icon-size: var(--tui-move-handle-icon-size, calc(var(--_size) * 0.6));
+    --_fg: var(--tui-color-fg-muted);
+    --_bg: var(--tui-color-bg-muted);
+    --_fg-interact: var(--tui-theme-primary-base);
+    --_bg-interact: var(--tui-theme-primary-subtlest);
+    --_center-height: 24px;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    width: var(--_size);
+    min-height: calc(var(--_center-height) + 2 * 16px);
+    border-radius: var(--tui-radius-sm);
+    background-color: var(--_bg);
+  }
+  .tui-interface .tui-move-handle__up {
+    border-start-start-radius: var(--tui-radius-sm);
+    border-start-end-radius: var(--tui-radius-sm);
+  }
+  .tui-interface .tui-move-handle__down {
+    border-end-start-radius: var(--tui-radius-sm);
+    border-end-end-radius: var(--tui-radius-sm);
+  }
+  .tui-interface .tui-move-handle__up, .tui-interface .tui-move-handle__down {
+    appearance: none;
+    border: none;
+    background: none;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 16px;
+    color: var(--_fg);
+    transition-duration: var(--tui-motion-duration);
+    transition-timing-function: var(--tui-motion-timing);
+    transition-property: background-color, color;
+  }
+  .tui-interface .tui-move-handle__up .tui-icon, .tui-interface .tui-move-handle__down .tui-icon {
+    font-size: var(--_icon-size);
+    line-height: 0.5;
+  }
+  .tui-interface .tui-move-handle__up:hover, .tui-interface .tui-move-handle__down:hover {
+    color: var(--_fg-interact);
+    background-color: var(--_bg-interact);
+  }
+  .tui-interface .tui-move-handle__up:focus-visible, .tui-interface .tui-move-handle__down:focus-visible {
+    color: var(--_fg-interact);
+    outline: var(--tui-focus-ring-width) solid var(--tui-focus-ring-color);
+    outline-offset: var(--tui-focus-ring-offset);
+  }
+  .tui-interface .tui-move-handle__up:disabled, .tui-interface .tui-move-handle__down:disabled {
+    pointer-events: none;
+    opacity: var(--tui-opacity-disabled);
+  }
+  .tui-interface .tui-move-handle__center {
+    display: flex;
+    align-items: stretch;
+    justify-content: center;
+    flex: 1;
+    width: var(--_size);
+    min-height: var(--_center-height);
+  }
+  .tui-interface .tui-move-handle__center:first-child {
+    border-start-start-radius: var(--tui-radius-sm);
+    border-start-end-radius: var(--tui-radius-sm);
+  }
+  .tui-interface .tui-move-handle__center:last-child {
+    border-end-start-radius: var(--tui-radius-sm);
+    border-end-end-radius: var(--tui-radius-sm);
+  }
+  .tui-interface .tui-move-handle__handle {
+    appearance: none;
+    border: none;
+    background: none;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    cursor: grab;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    width: var(--_size);
+    border-radius: inherit;
+    color: var(--_fg);
+    transition-duration: var(--tui-motion-duration);
+    transition-timing-function: var(--tui-motion-timing);
+    transition-property: background-color, color;
+  }
+  .tui-interface .tui-move-handle__handle .tui-icon {
+    font-size: var(--_icon-size);
+  }
+  .tui-interface .tui-move-handle__handle:hover {
+    color: var(--_fg-interact);
+    background-color: var(--_bg-interact);
+  }
+  .tui-interface .tui-move-handle__handle:focus-visible {
+    color: var(--_fg-interact);
+    outline: var(--tui-focus-ring-width) solid var(--tui-focus-ring-color);
+    outline-offset: var(--tui-focus-ring-offset);
+  }
+  .tui-interface .tui-move-handle__handle:active {
+    cursor: grabbing;
+  }
+  .tui-interface .tui-move-handle__index {
+    display: flex;
+    align-items: center;
+    align-self: center;
+    justify-content: center;
+    width: var(--_size);
+    border-radius: var(--tui-radius-md);
+    font-size: var(--tui-typography-size-sm, 0.875rem);
+    font-weight: var(--tui-font-weight-medium, 500);
+    color: var(--_fg);
+    user-select: none;
+  }
+  .tui-interface .tui-move-handle__lock {
+    display: flex;
+    align-items: center;
+    align-self: center;
+    justify-content: center;
+    width: var(--_size);
+    color: var(--_fg);
+    opacity: var(--tui-opacity-disabled);
+  }
+  .tui-interface .tui-move-handle__lock .tui-icon {
+    font-size: var(--_icon-size);
+  }
+  .tui-interface .tui-move-handle__center {
+    position: relative;
+  }
+  .tui-interface .tui-move-handle.has-index .tui-move-handle__index {
+    opacity: 1;
+  }
+  .tui-interface .tui-move-handle.has-index .tui-move-handle__handle {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+  .tui-interface .tui-move-handle.has-index:hover .tui-move-handle__index, .tui-interface .tui-move-handle.has-index:focus-within .tui-move-handle__index {
+    display: none;
+  }
+  .tui-interface .tui-move-handle.has-index:hover .tui-move-handle__handle, .tui-interface .tui-move-handle.has-index:focus-within .tui-move-handle__handle {
+    position: static;
+    opacity: 1;
+    pointer-events: auto;
+  }
+  @media (hover: none) {
+    .tui-interface .tui-move-handle.has-index .tui-move-handle__index {
+      display: none;
+    }
+    .tui-interface .tui-move-handle.has-index .tui-move-handle__handle {
+      position: static;
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+  .tui-interface .tui-move-handle.is-size-sm {
+    --_size: var(--tui-move-handle-size, 32px);
+    --_center-height: 20px;
+  }
+  .tui-interface .tui-move-handle.is-locked {
+    pointer-events: none;
+  }
+  .tui-interface .tui-move-handle.is-handle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: auto;
+    min-width: 32px;
+    min-height: 32px;
+    background: none;
+    border: none;
+    border-radius: var(--tui-radius-sm);
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    cursor: grab;
+    color: var(--_fg);
+    transition-duration: var(--tui-motion-duration);
+    transition-timing-function: var(--tui-motion-timing);
+    transition-property: color;
+  }
+  .tui-interface .tui-move-handle.is-handle .tui-icon {
+    font-size: var(--_icon-size);
+  }
+  .tui-interface .tui-move-handle.is-handle:hover {
+    color: var(--_fg-interact);
+  }
+  .tui-interface .tui-move-handle.is-handle:focus-visible {
+    color: var(--_fg-interact);
+    outline: var(--tui-focus-ring-width) solid var(--tui-focus-ring-color);
+    outline-offset: var(--tui-focus-ring-offset);
+  }
+  .tui-interface .tui-move-handle.is-handle:active {
+    cursor: grabbing;
+  }
+  @media (forced-colors: active) {
+    .tui-move-handle__up,
+    .tui-move-handle__down,
+    .tui-move-handle__handle,
+    .tui-move-handle.is-handle {
+      forced-color-adjust: none;
+      color: CanvasText;
+    }
+    .tui-move-handle__up:hover, .tui-move-handle__up:active,
+    .tui-move-handle__down:hover,
+    .tui-move-handle__down:active,
+    .tui-move-handle__handle:hover,
+    .tui-move-handle__handle:active,
+    .tui-move-handle.is-handle:hover,
+    .tui-move-handle.is-handle:active {
+      background-color: Highlight;
+      color: Canvas;
+    }
+    .tui-move-handle__up:focus-visible,
+    .tui-move-handle__down:focus-visible,
+    .tui-move-handle__handle:focus-visible,
+    .tui-move-handle.is-handle:focus-visible {
+      outline: 2px solid Highlight;
+      outline-offset: 2px;
+    }
+    .tui-move-handle__up:disabled,
+    .tui-move-handle__down:disabled,
+    .tui-move-handle__handle:disabled,
+    .tui-move-handle.is-handle:disabled {
+      color: GrayText;
+    }
+  }
   :where(.tui-interface) .tui-notice {
     --_bg: var(--tui-notice-bg, var(--tui-color-bg-muted));
     --_border: var(--tui-notice-border, transparent);
     --_stripe: var(--tui-notice-stripe, var(--tui-theme-primary-base));
     --_fg: var(--tui-notice-fg, inherit);
     --_radius: var(--tui-notice-radius, var(--tui-radius-md));
-    --_padding: var(--tui-notice-padding, var(--tui-spacing-sm));
+    --_padding: var(--tui-notice-padding, var(--tui-spacing-md));
     --_foot-basis: var(--tui-notice-foot-basis, 500px);
     --_gap: var(--tui-spacing-sm);
     container-type: inline-size;
@@ -2879,6 +3561,7 @@
     justify-content: center;
     line-height: 0;
     font-size: var(--tui-typography-size-xl);
+    color: var(--_icon-color, inherit);
   }
   :where(.tui-interface) .tui-notice__title {
     flex: 1 1 auto;
@@ -2905,6 +3588,10 @@
   }
   :where(.tui-interface) .tui-notice__body > p {
     margin: 0;
+    margin-block-end: var(--tui-spacing-sm);
+  }
+  :where(.tui-interface) .tui-notice__body > p:last-child {
+    margin-block-end: 0;
   }
   :where(.tui-interface) .tui-notice__body a {
     color: var(--tui-theme-primary-strong);
@@ -2972,7 +3659,7 @@
     }
   }
   :where(.tui-interface) .tui-notice.is-dismissible .tui-notice__inner {
-    padding-inline-end: calc(var(--_padding) + 2rem);
+    padding-inline-end: calc(var(--_padding) + var(--tui-control-height-sm));
   }
   @container tuiNotice (width >= 400px) {
     :where(.tui-interface) .tui-notice.is-layout-inline.is-dismissible .tui-notice__inner {
@@ -2985,24 +3672,32 @@
     }
   }
   :where(.tui-interface) .tui-notice.has-stripe {
-    border-inline-start-width: 4px;
+    border-inline-start-width: var(--tui-notice-stripe-width, 4px);
     border-inline-start-color: var(--_stripe);
   }
   :where(.tui-interface) .tui-notice.is-theme-info {
     --_bg: var(--tui-notice-bg, var(--tui-theme-primary-subtlest));
+    --_bg-hover: var(--tui-theme-primary-subtle);
     --_stripe: var(--tui-notice-stripe, var(--tui-theme-primary-base));
+    --_icon-color: var(--tui-theme-primary-base);
   }
   :where(.tui-interface) .tui-notice.is-theme-success {
     --_bg: var(--tui-notice-bg, var(--tui-theme-success-subtlest));
+    --_bg-hover: var(--tui-theme-success-subtle);
     --_stripe: var(--tui-notice-stripe, var(--tui-theme-success-base));
+    --_icon-color: var(--tui-theme-success-base);
   }
   :where(.tui-interface) .tui-notice.is-theme-warning {
     --_bg: var(--tui-notice-bg, var(--tui-theme-warning-subtlest));
+    --_bg-hover: var(--tui-theme-warning-subtle);
     --_stripe: var(--tui-notice-stripe, var(--tui-theme-warning-base));
+    --_icon-color: var(--tui-theme-warning-base);
   }
   :where(.tui-interface) .tui-notice.is-theme-danger {
     --_bg: var(--tui-notice-bg, var(--tui-theme-danger-subtlest));
+    --_bg-hover: var(--tui-theme-danger-subtle);
     --_stripe: var(--tui-notice-stripe, var(--tui-theme-danger-base));
+    --_icon-color: var(--tui-theme-danger-base);
   }
   :where(.tui-interface) .tui-notice.is-style-elevated {
     box-shadow: var(--tui-shadow-md);
@@ -3014,7 +3709,7 @@
     transition-timing-function: var(--tui-motion-timing);
   }
   :where(.tui-interface) .tui-notice.has-interaction:hover {
-    --_bg: var(--tui-color-bg-muted);
+    --_bg: var(--_bg-hover, var(--tui-color-bg-muted));
   }
   :where(.tui-interface) .tui-notice.has-interaction:focus-visible {
     outline: var(--tui-focus-ring-width) solid var(--tui-focus-ring-color);
@@ -3030,20 +3725,23 @@
   }
   :where(.tui-interface) .tui-notice.is-exiting-collapse {
     display: grid;
-    animation: tui-noticeExitCollapse 200ms var(--tui-motion-timing) forwards;
+    animation: tui-noticeExitCollapse var(--tui-motion-duration) var(--tui-motion-timing) forwards;
   }
   :where(.tui-interface) .tui-notice.is-exiting-collapse .tui-notice__inner {
     min-height: 0;
     overflow: hidden;
   }
   :where(.tui-interface) .tui-notice.is-exiting-fade {
-    animation: tui-noticeExitFade 200ms var(--tui-motion-timing) forwards;
+    animation: tui-noticeExitFade var(--tui-motion-duration) var(--tui-motion-timing) forwards;
   }
   @media (prefers-reduced-motion: reduce) {
     :where(.tui-interface) .tui-notice.is-exiting-collapse, :where(.tui-interface) .tui-notice.is-exiting-fade {
       animation: none;
       opacity: 0;
     }
+    :where(.tui-interface) .tui-notice.has-interaction {
+      transition-duration: 0s;
+    }
   }
   @keyframes tui-noticeExitCollapse {
     0% {
@@ -3067,15 +3765,15 @@
   }
   .tui-notice .tui-notice__dismiss {
     position: absolute;
-    inset-block-start: var(--tui-notice-padding, var(--tui-spacing-sm));
-    inset-inline-end: var(--tui-notice-padding, var(--tui-spacing-sm));
+    inset-block-start: var(--tui-notice-padding, var(--tui-spacing-md));
+    inset-inline-end: var(--tui-notice-padding, var(--tui-spacing-md));
   }
   .tui-notice.is-layout-inline .tui-notice__dismiss {
     position: static;
     flex-shrink: 0;
     align-self: center;
     margin-inline-start: var(--tui-spacing-sm);
-    margin-inline-end: var(--tui-notice-padding, var(--tui-spacing-sm));
+    margin-inline-end: var(--tui-notice-padding, var(--tui-spacing-md));
   }
   :where(.tui-interface) .tui-overlap-stack {
     display: inline-flex;
@@ -3109,7 +3807,7 @@
     background-color: var(--_bg);
     color: var(--_fg);
     font-size: 0.75rem;
-    font-weight: 500;
+    font-weight: var(--tui-font-weight-medium, 500);
   }
   @media (forced-colors: active) {
     :where(.tui-interface) .tui-overlap-stack__overflow {
@@ -3247,6 +3945,22 @@
     line-height: 1.25em;
     user-select: none;
   }
+  @media (forced-colors: active) {
+    :where(.tui-interface) .tui-radio__indicator {
+      forced-color-adjust: none;
+      border-color: CanvasText;
+      background-color: Canvas;
+    }
+    :where(.tui-interface) .tui-radio__indicator::after {
+      background-color: CanvasText;
+    }
+    :where(.tui-interface) .tui-radio[aria-checked=true] .tui-radio__indicator {
+      border-color: Highlight;
+    }
+    :where(.tui-interface) .tui-radio[aria-checked=true] .tui-radio__indicator::after {
+      background-color: Highlight;
+    }
+  }
   :where(.tui-interface) .tui-rating {
     --_active: var(--tui-rating-active, var(--tui-theme-warning-base));
     --_inactive: var(--tui-rating-inactive, var(--tui-color-fg-muted));
@@ -3316,6 +4030,15 @@
   :where(.tui-interface) .tui-rating .tui-rating__star.is-active {
     color: var(--_active) !important;
   }
+  @media (forced-colors: active) {
+    :where(.tui-interface) .tui-rating .tui-rating__star {
+      forced-color-adjust: none;
+      color: GrayText !important;
+    }
+    :where(.tui-interface) .tui-rating .tui-rating__star.is-active {
+      color: Highlight !important;
+    }
+  }
   :where(.tui-interface) .tui-progress {
     --_track: var(--tui-progress-track, var(--tui-color-border));
     --_fill: var(--tui-progress-fill, var(--tui-theme-primary-base));
@@ -3533,11 +4256,27 @@
       transform: rotate(1turn);
     }
   }
+  @media (forced-colors: active) {
+    :where(.tui-interface) .tui-progress.is-mode-line .tui-progress__track {
+      forced-color-adjust: none;
+      background: Canvas !important;
+      border: 1px solid CanvasText;
+    }
+    :where(.tui-interface) .tui-progress.is-mode-line .tui-progress__bar {
+      background: Highlight !important;
+    }
+    :where(.tui-interface) .tui-progress.is-mode-circle .tui-progress__circle__bar {
+      forced-color-adjust: none;
+      background: conic-gradient(Highlight calc(var(--_pct) * 1%), Canvas 0) !important;
+      border: 1px solid CanvasText;
+      border-radius: 50%;
+    }
+  }
   :where(.tui-interface) .tui-segmented {
     --_gap: var(--tui-segmented-gap, var(--tui-spacing-xs));
     --_padding: var(--tui-segmented-padding, var(--tui-spacing-xs));
     --_radius: var(--tui-segmented-radius, var(--tui-radius-lg));
-    --_bg: var(--tui-segmented-bg, var(--tui-color-bg-muted));
+    --_bg: var(--tui-segmented-bg, var(--tui-color-bg-surface));
     --_border: var(--tui-segmented-border, transparent);
     display: inline-flex;
     flex-wrap: wrap;
@@ -3574,6 +4313,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    min-height: var(--tui-control-height-md);
     gap: var(--tui-spacing-xs);
     padding: var(--_item-padding);
     border: none;
@@ -3644,6 +4384,7 @@
   .tui-interface .tui-segmented.is-size-sm .tui-segmented__item {
     --_item-padding: var(--tui-spacing-xs) var(--tui-spacing-sm);
     font-size: var(--tui-font-size-xs);
+    min-height: var(--tui-control-height-sm);
   }
   :where(.tui-interface) .tui-segmented__item-icon {
     display: inline-flex;
@@ -3748,6 +4489,26 @@
   :where(.tui-interface) .tui-switch__track.is-checked .tui-switch__thumb {
     transform: translateX(calc(2.8575em - calc(1.4285em - 4px) - 2px - 2 * var(--tui-border-width)));
   }
+  @media (forced-colors: active) {
+    :where(.tui-interface) .tui-switch__track {
+      forced-color-adjust: none;
+      border: 2px solid CanvasText;
+      background-color: Canvas;
+    }
+    :where(.tui-interface) .tui-switch__track.is-checked {
+      background-color: Highlight;
+      border-color: Highlight;
+    }
+    :where(.tui-interface) .tui-switch__track:focus-visible {
+      outline-color: Highlight;
+    }
+    :where(.tui-interface) .tui-switch__thumb {
+      background-color: CanvasText;
+    }
+    :where(.tui-interface) .tui-switch__track.is-checked .tui-switch__thumb {
+      background-color: HighlightText;
+    }
+  }
   :where(.tui-interface) .tui-sidebar {
     --_width: var(--tui-sidebar-width, 320px);
     --_bg: var(--tui-sidebar-bg, var(--tui-color-bg-surface));
@@ -3782,6 +4543,15 @@
   :where(.tui-interface) .tui-sidebar__header h1, :where(.tui-interface) .tui-sidebar__header h2, :where(.tui-interface) .tui-sidebar__header h3, :where(.tui-interface) .tui-sidebar__header h4, :where(.tui-interface) .tui-sidebar__header h5, :where(.tui-interface) .tui-sidebar__header h6 {
     margin: 0;
   }
+  :where(.tui-interface) .tui-sidebar__footer {
+    flex-shrink: 0;
+    margin-top: auto;
+    padding: var(--_padding);
+    border-top: var(--tui-border-width) solid var(--_border);
+    display: flex;
+    flex-direction: column;
+    gap: var(--tui-spacing-sm);
+  }
   :where(.tui-interface) .tui-sidebar__nav {
     flex: 1;
     overflow-y: auto;
@@ -3800,9 +4570,12 @@
   :where(.tui-interface) .tui-sidebar-drawer__backdrop {
     position: absolute;
     inset: 0;
-    background-color: var(--tui-color-bg-overlay, rgba(0, 0, 0, 0.5));
+    background-color: var(--tui-color-bg-overlay);
     animation: tui-fadeFromTransparent var(--tui-motion-duration) var(--tui-motion-timing);
   }
+  [data-state=closing] > :where(.tui-interface) .tui-sidebar-drawer__backdrop {
+    animation: tui-fadeToTransparent var(--tui-motion-duration) var(--tui-motion-timing) forwards;
+  }
   :where(.tui-interface) .tui-sidebar-drawer__panel {
     position: relative;
     z-index: 1;
@@ -3815,6 +4588,12 @@
   [data-position=right] > :where(.tui-interface) .tui-sidebar-drawer__panel {
     animation: tui-slideInFromRight var(--tui-motion-duration) var(--tui-motion-timing);
   }
+  [data-state=closing][data-position=left] > :where(.tui-interface) .tui-sidebar-drawer__panel {
+    animation: tui-slideOutToLeft var(--tui-motion-duration) var(--tui-motion-timing) forwards;
+  }
+  [data-state=closing][data-position=right] > :where(.tui-interface) .tui-sidebar-drawer__panel {
+    animation: tui-slideOutToRight var(--tui-motion-duration) var(--tui-motion-timing) forwards;
+  }
   :where(.tui-interface) .tui-sidebar-drawer__panel .tui-sidebar {
     height: 100%;
     border-left: none;
@@ -3836,6 +4615,36 @@
       transform: translateX(0);
     }
   }
+  @keyframes tui-slideOutToLeft {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(-100%);
+    }
+  }
+  @keyframes tui-slideOutToRight {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(100%);
+    }
+  }
+  @keyframes tui-fadeToTransparent {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :where(.tui-interface) .tui-sidebar-drawer__backdrop,
+    :where(.tui-interface) .tui-sidebar-drawer__panel {
+      animation: none;
+    }
+  }
   body.tui-sidebar-drawer-open {
     overflow: hidden;
   }
@@ -4054,6 +4863,10 @@
     align-items: stretch;
     flex-wrap: nowrap;
   }
+  :where(.tui-interface) .tui-tabs[data-orientation=vertical] .tui-tabs__tab {
+    text-align: start;
+    justify-content: flex-start;
+  }
   :where(.tui-interface) .tui-tabs__list {
     display: flex;
     flex-wrap: wrap;
@@ -4077,7 +4890,7 @@
     --_fg: var(--tui-tabs-tab-fg, var(--tui-color-fg-muted));
     --_border: var(--tui-tabs-tab-border, transparent);
     --_bg-active: var(--tui-tabs-tab-bg-active, var(--tui-theme-primary-base, currentColor));
-    --_fg-active: var(--tui-tabs-tab-fg-active, var(--tui-color-fg-on-accent, #fff));
+    --_fg-active: var(--tui-tabs-tab-fg-active, var(--tui-color-fg-on-accent));
     --_bg-hover: var(--tui-tabs-tab-bg-hover, var(--tui-color-bg-muted));
     --_indicator: var(--tui-tabs-indicator, var(--tui-theme-primary-base, currentColor));
     --_indicator-size: var(--tui-tabs-indicator-size, 2px);
@@ -4093,9 +4906,9 @@
     background: var(--_bg);
     color: var(--_fg);
     font: inherit;
-    font-size: var(--tui-font-size-sm);
+    font-size: var(--tui-typography-size-sm);
     font-weight: var(--tui-font-weight-medium, 500);
-    line-height: var(--tui-line-height-tight);
+    line-height: var(--tui-line-height-tight, 1.25);
     text-decoration: none;
     white-space: nowrap;
     cursor: pointer;
@@ -4131,6 +4944,7 @@
     --_padding: var(--tui-tabs-tab-padding, var(--tui-spacing-sm) var(--tui-spacing-xs));
     --_radius: 0;
     --_bg-hover: transparent;
+    --_fg-active: var(--tui-tabs-tab-fg-active, var(--tui-color-fg));
     position: relative;
     margin-block-end: calc(var(--tui-border-width) * -1);
     border-bottom: var(--_indicator-size) solid transparent;
@@ -4140,7 +4954,7 @@
     color: var(--tui-color-fg);
   }
   .tui-interface [data-variant=underline] .tui-tabs__tab[data-state=active] {
-    color: var(--tui-color-fg);
+    color: var(--_fg-active);
     border-bottom-color: var(--_indicator);
   }
   .tui-interface [data-variant=underline] .tui-tabs__tab:focus-visible {
@@ -4150,11 +4964,12 @@
     --_radius: var(--tui-tabs-tab-radius, var(--tui-radius-full));
     --_border: var(--tui-tabs-tab-border, var(--tui-color-border));
     --_bg-hover: var(--tui-tabs-tab-bg-hover, var(--tui-color-bg-muted));
+    --_fg-active: var(--tui-tabs-tab-fg-active, var(--tui-theme-primary-strong, currentColor));
     border: var(--tui-border-width) solid var(--_border);
   }
   .tui-interface [data-variant=outline] .tui-tabs__tab[data-state=active] {
     --_border: var(--tui-theme-primary-base, currentColor);
-    color: var(--tui-theme-primary-strong, currentColor);
+    color: var(--_fg-active);
     background: var(--tui-theme-primary-subtlest, transparent);
   }
   :where(.tui-interface) .tui-tabs__panel[data-state=inactive] {
@@ -4198,15 +5013,18 @@
   :where(.tui-interface) .tui-textarea {
     --_fs: var(--tui-typography-size-md);
     --_py: var(--tui-spacing-xxs);
+    --_height: calc(2em + 2 * var(--_py));
     font-size: var(--_fs);
     padding-block: var(--_py);
-    min-height: calc(2em + 2 * var(--_py));
+    min-height: var(--tui-control-height-md, var(--_height));
   }
   :where(.tui-interface) .tui-textarea.is-size-sm {
     --_fs: var(--tui-typography-size-sm);
+    min-height: var(--tui-control-height-sm, var(--_height));
   }
   :where(.tui-interface) .tui-textarea.is-size-lg {
     --_fs: var(--tui-typography-size-lg);
+    min-height: var(--tui-control-height-lg, var(--_height));
   }
   :where(.tui-interface) .tui-textarea {
     min-height: calc(4em + 2 * var(--_py));
@@ -4226,15 +5044,18 @@
     --_radius: var(--tui-input-radius, var(--tui-radius-md));
     --_fs: var(--tui-typography-size-md);
     --_py: var(--tui-spacing-xxs);
+    --_height: calc(2em + 2 * var(--_py));
     font-size: var(--_fs);
     padding-block: var(--_py);
-    min-height: calc(2em + 2 * var(--_py));
+    min-height: var(--tui-control-height-md, var(--_height));
   }
   :where(.tui-interface) .tui-input-group.is-size-sm {
     --_fs: var(--tui-typography-size-sm);
+    min-height: var(--tui-control-height-sm, var(--_height));
   }
   :where(.tui-interface) .tui-input-group.is-size-lg {
     --_fs: var(--tui-typography-size-lg);
+    min-height: var(--tui-control-height-lg, var(--_height));
   }
   :where(.tui-interface) .tui-input-group {
     display: inline-flex;
@@ -4244,10 +5065,12 @@
     border: var(--tui-border-width) solid var(--_border);
     border-radius: var(--_radius);
     padding-inline: var(--tui-spacing-xs);
+    cursor: text;
   }
   :where(.tui-interface) .tui-input-group .tui-input,
   :where(.tui-interface) .tui-input-group input {
     border: none;
+    border-radius: 0;
     background: transparent;
     padding-inline: 0;
     padding-block: 0;
@@ -4293,6 +5116,31 @@
   :where(.tui-interface) .tui-input-group__suffix .tui-icon {
     font-size: 1em;
   }
+  :where(.tui-interface) .tui-input-group__prefix.is-text,
+  :where(.tui-interface) .tui-input-group__suffix.is-text {
+    background-color: var(--tui-color-bg-surface);
+    padding-inline: var(--tui-spacing-xs);
+    margin-block: calc(-1 * var(--_py));
+    align-self: stretch;
+    display: inline-flex;
+    align-items: center;
+  }
+  :where(.tui-interface) .tui-input-group__prefix.is-text {
+    border-inline-end: var(--tui-border-width) solid var(--_border);
+    border-start-start-radius: calc(var(--_radius) - var(--tui-border-width));
+    border-end-start-radius: calc(var(--_radius) - var(--tui-border-width));
+  }
+  :where(.tui-interface) .tui-input-group__suffix.is-text {
+    border-inline-start: var(--tui-border-width) solid var(--_border);
+    border-start-end-radius: calc(var(--_radius) - var(--tui-border-width));
+    border-end-end-radius: calc(var(--_radius) - var(--tui-border-width));
+  }
+  :where(.tui-interface) .tui-input-group:has(> .tui-input-group__prefix.is-text) {
+    padding-inline-start: 0;
+  }
+  :where(.tui-interface) .tui-input-group:has(> .tui-input-group__suffix.is-text) {
+    padding-inline-end: 0;
+  }
   :where(.tui-interface) .tui-toolbar {
     --_gap: var(--tui-toolbar-gap, var(--tui-spacing-sm));
     --_padding: var(--tui-toolbar-padding, 0);
@@ -4325,30 +5173,46 @@
   :where(.tui-interface) .tui-tooltip {
     --_bg: var(--tui-tooltip-bg, var(--tui-color-bg-inverted));
     --_fg: var(--tui-tooltip-fg, var(--tui-color-fg-inverted));
-    --_radius: var(--tui-tooltip-radius, var(--tui-radius-xs));
+    --_radius: var(--tui-tooltip-radius, var(--tui-radius-sm));
     --_z: var(--tui-tooltip-z, var(--tui-layer-top));
     z-index: var(--_z);
     width: max-content;
     max-width: min(250px, 100vw - 2 * var(--tui-spacing-xs, 8px));
-    padding: 0.27em 0.54em;
+    padding: 0.35em 0.65em;
     pointer-events: auto;
     background-color: var(--_bg);
     color: var(--_fg);
     border-radius: var(--_radius);
-    font-size: var(--tui-typography-size-xs, 11px);
+    font-size: var(--tui-typography-size-sm, 13px);
     line-height: 1.4;
     animation: tui-fadeFromTransparent var(--tui-motion-duration) var(--tui-motion-timing);
   }
+  :where(.tui-interface) .tui-tooltip.is-theme-light {
+    --_bg: var(--tui-tooltip-bg, var(--tui-color-bg-surface));
+    --_fg: var(--tui-tooltip-fg, var(--tui-color-fg));
+    border: 1px solid var(--tui-color-border);
+  }
+  :where(.tui-interface) .tui-tooltip__arrow {
+    fill: var(--_bg);
+  }
   :where(.tui-interface) [data-tooltip-open]:focus-visible {
     outline: var(--tui-focus-ring-width) solid var(--tui-focus-ring-color);
     outline-offset: var(--tui-focus-ring-offset);
   }
+  @media (prefers-reduced-motion: reduce) {
+    :where(.tui-interface) .tui-tooltip {
+      animation: none;
+    }
+  }
   @media (forced-colors: active) {
     :where(.tui-interface) .tui-tooltip {
       background-color: Canvas;
       color: CanvasText;
       border: 1px solid CanvasText;
     }
+    :where(.tui-interface) .tui-tooltip__arrow {
+      fill: Canvas;
+    }
   }
 }
 @layer utilities {