@tangible/ui 0.0.1 → 0.0.2

package/styles/all.expanded.css

@@ -48,6 +48,12 @@
 --tui-card-foot-basis
 */
 /* @tui-tokens
+--tui-field-gap
+--tui-field-label-fg
+--tui-field-helper-fg
+--tui-field-error-fg
+*/
+/* @tui-tokens
 --tui-modal-z
 --tui-modal-max
 --tui-modal-backdrop
@@ -84,6 +90,8 @@
 */
 @layer resets, defaults, components, utilities;
 :where(.tui-interface) {
+  /* UA chrome: native controls, scrollbars render in light mode */
+  color-scheme: light;
   /* ========================
      PRIMITIVES
      ======================== */
@@ -116,6 +124,7 @@
   --tui-color-bg-overlay: rgba(0, 0, 0, var(--tui-opacity-backdrop));
   /* Neutral: text */
   --tui-color-fg: #111928;
+  --tui-color-fg-secondary: #4B5563;
   --tui-color-fg-muted: #6B7280;
   --tui-color-fg-on-accent: #fff;
   --tui-color-fg-inverted: #fafafa;
@@ -175,6 +184,8 @@
 }
 
 :where(.tui-interface)[data-theme=dark] {
+  /* UA chrome: native controls, scrollbars render in dark mode */
+  color-scheme: dark;
   /* Backgrounds */
   --tui-color-bg: #111928;
   --tui-color-bg-surface: #202836;
@@ -183,6 +194,7 @@
   --tui-color-bg-overlay: rgba(0, 0, 0, 0.7);
   /* Text */
   --tui-color-fg: #F9FAFB;
+  --tui-color-fg-secondary: #D1D5DB;
   --tui-color-fg-muted: #9CA3AF;
   --tui-color-fg-on-accent: #fff;
   --tui-color-fg-inverted: #111928;
@@ -226,6 +238,8 @@
 
 @media (prefers-color-scheme: dark) {
   :where(.tui-interface)[data-theme=auto] {
+    /* UA chrome: native controls, scrollbars render in dark mode */
+    color-scheme: dark;
     /* Backgrounds */
     --tui-color-bg: #111928;
     --tui-color-bg-surface: #202836;
@@ -234,6 +248,7 @@
     --tui-color-bg-overlay: rgba(0, 0, 0, 0.7);
     /* Text */
     --tui-color-fg: #F9FAFB;
+    --tui-color-fg-secondary: #D1D5DB;
     --tui-color-fg-muted: #9CA3AF;
     --tui-color-fg-on-accent: #fff;
     --tui-color-fg-inverted: #111928;
@@ -275,6 +290,11 @@
     --tui-shadow-color: 0, 0, 0;
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  :where(.tui-interface) {
+    --tui-motion-duration: 0ms;
+  }
+}
 .tui-interface {
   --tui-spacing-base: 4px;
   --tui-palette-spacing-1: calc(var(--tui-spacing-base) * 1);
@@ -340,6 +360,12 @@
   .tui-interface[data-theme] {
     color: var(--tui-color-fg);
   }
+  .tui-interface,
+  .tui-interface *,
+  .tui-interface *::before,
+  .tui-interface *::after {
+    box-sizing: border-box;
+  }
   .tui-interface button,
   .tui-interface [type=button],
   .tui-interface [type=submit],
@@ -457,20 +483,6 @@
   :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 (prefers-reduced-motion: reduce) {
-    :where(.tui-interface) .tui-accordion__panel {
-      transition: none;
-    }
-    :where(.tui-interface) .tui-accordion__panel-content {
-      transition: none;
-    }
-    :where(.tui-interface) .tui-accordion__indicator {
-      transition: none;
-    }
-    :where(.tui-interface) .tui-accordion__trigger {
-      transition: none;
-    }
-  }
   :where(.tui-interface) {
     --tui-avatar-palette-coral: #c62828;
     --tui-avatar-palette-amber: #f59e0b;
@@ -537,12 +549,14 @@
   }
   :where(.tui-interface) .tui-avatar.is-color-lime {
     --_bg: var(--tui-avatar-bg, var(--tui-avatar-palette-lime));
+    --_fg: var(--tui-avatar-fg, var(--tui-color-fg));
   }
   :where(.tui-interface) .tui-avatar.is-color-teal {
     --_bg: var(--tui-avatar-bg, var(--tui-avatar-palette-teal));
   }
   :where(.tui-interface) .tui-avatar.is-color-cyan {
     --_bg: var(--tui-avatar-bg, var(--tui-avatar-palette-cyan));
+    --_fg: var(--tui-avatar-fg, var(--tui-color-fg));
   }
   :where(.tui-interface) .tui-avatar.is-color-blue {
     --_bg: var(--tui-avatar-bg, var(--tui-avatar-palette-blue));
@@ -675,7 +689,6 @@
     font-size: var(--tui-typography-size-md);
     font-weight: normal;
     line-height: 1.4;
-    box-sizing: border-box;
     display: inline-flex;
     align-self: center;
     text-align: center;
@@ -869,11 +882,6 @@
       border-color: transparent;
     }
   }
-  @media (prefers-reduced-motion: reduce) {
-    .tui-interface .tui-button {
-      transition: none;
-    }
-  }
   .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));
@@ -929,7 +937,6 @@
     --_shadow-interact: var(--tui-card-shadow-interact, var(--tui-shadow-sm));
     --_padding: var(--tui-card-padding, var(--tui-spacing-md));
     --_foot-basis: var(--tui-card-foot-basis, 500px);
-    box-sizing: border-box;
     container-type: inline-size;
     container-name: tuiCard;
     position: relative;
@@ -955,7 +962,6 @@
     padding-block: var(--_padding);
     padding-inline: var(--_padding);
     width: 100%;
-    box-sizing: border-box;
   }
   :where(.tui-interface) .tui-card__head .tui-card__media.is-flush:first-child {
     margin-block-start: calc(var(--_padding) * -1);
@@ -965,7 +971,6 @@
   :where(.tui-interface) .tui-card__body {
     padding-inline: var(--_padding);
     width: 100%;
-    box-sizing: border-box;
   }
   :where(.tui-interface) .tui-card__body > *:first-child {
     margin-block-start: unset;
@@ -986,7 +991,6 @@
     padding-block: var(--_padding);
     padding-inline: var(--_padding);
     width: 100%;
-    box-sizing: border-box;
   }
   :where(.tui-interface) .tui-card__foot .tui-card__media.is-flush:last-child {
     margin-block-end: calc(var(--_padding) * -1);
@@ -1077,6 +1081,27 @@
   :where(.tui-interface) .tui-card.is-style-elevated:hover {
     box-shadow: var(--_shadow-interact);
   }
+  :where(.tui-interface) input[type=checkbox]:not(.tui-inline-choice input):focus-visible {
+    outline: var(--tui-focus-ring-width) solid var(--tui-focus-ring-color);
+    outline-offset: var(--tui-focus-ring-offset);
+  }
+  :where(.tui-interface) input[type=checkbox]:not(.tui-inline-choice input):checked {
+    accent-color: var(--tui-input-accent, var(--tui-theme-primary-base));
+  }
+  :where(.tui-interface) input[type=checkbox]:not(.tui-inline-choice input):disabled {
+    opacity: var(--tui-opacity-disabled);
+    cursor: not-allowed;
+  }
+  :where(.tui-interface) input[type=checkbox][data-indeterminate=true] {
+    accent-color: var(--tui-input-accent, var(--tui-theme-primary-base));
+  }
+  :where(.tui-interface) .tui-inline-choice.is-disabled {
+    opacity: var(--tui-opacity-disabled);
+    cursor: not-allowed;
+  }
+  :where(.tui-interface) .tui-inline-choice.is-disabled input {
+    cursor: not-allowed;
+  }
   :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));
@@ -1325,6 +1350,240 @@
     outline: var(--tui-focus-ring-width) solid var(--tui-focus-ring-color);
     outline-offset: var(--tui-focus-ring-offset);
   }
+  .tui-chip-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--_gap, var(--tui-chip-group-gap, var(--tui-spacing-sm)));
+  }
+  .tui-chip-group.is-density-xs {
+    --_gap: var(--tui-chip-group-gap, var(--tui-spacing-xs));
+  }
+  .tui-chip-group.is-density-sm {
+    --_gap: var(--tui-chip-group-gap, var(--tui-spacing-sm));
+  }
+  .tui-chip-group.is-density-md {
+    --_gap: var(--tui-chip-group-gap, var(--tui-spacing-md));
+  }
+  .tui-chip-group.is-direction-stack {
+    flex-direction: column;
+    flex-wrap: nowrap;
+  }
+  .tui-chip-group:not(.is-direction-stack).is-align-start {
+    justify-content: flex-start;
+  }
+  .tui-chip-group:not(.is-direction-stack).is-align-center {
+    justify-content: center;
+  }
+  .tui-chip-group:not(.is-direction-stack).is-align-end {
+    justify-content: flex-end;
+  }
+  .tui-chip-group.is-direction-stack.is-align-start {
+    align-items: flex-start;
+  }
+  .tui-chip-group.is-direction-stack.is-align-center {
+    align-items: center;
+  }
+  .tui-chip-group.is-direction-stack.is-align-end {
+    align-items: flex-end;
+  }
+  .tui-interface .tui-combobox {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+  }
+  .tui-interface .tui-combobox__input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .tui-interface .tui-combobox__input {
+    --_bg: var(--tui-combobox-input-bg, var(--tui-select-trigger-bg, var(--tui-color-bg)));
+    --_fg: var(--tui-combobox-input-fg, var(--tui-select-trigger-fg, var(--tui-color-fg)));
+    --_border: var(--tui-combobox-input-border, var(--tui-select-trigger-border, var(--tui-color-border)));
+    --_border-focus: var(--tui-combobox-input-border-focus, var(--tui-select-trigger-border-focus, var(--tui-theme-primary-base)));
+    --_radius: var(--tui-combobox-input-radius, var(--tui-select-trigger-radius, var(--tui-radius-md)));
+    appearance: none;
+    font: inherit;
+    margin: 0;
+    --_fs: var(--tui-typography-size-md);
+    --_py: var(--tui-spacing-xxs);
+    font-size: var(--_fs);
+    padding-block: var(--_py);
+    min-height: calc(2em + 2 * var(--_py));
+  }
+  .tui-interface .tui-combobox__input.is-size-sm {
+    --_fs: var(--tui-typography-size-sm);
+  }
+  .tui-interface .tui-combobox__input.is-size-lg {
+    --_fs: var(--tui-typography-size-lg);
+  }
+  .tui-interface .tui-combobox__input {
+    display: block;
+    width: 100%;
+    padding-inline: var(--tui-spacing-sm);
+    padding-right: calc(var(--tui-spacing-sm) + 1.5em + var(--tui-spacing-xs) + 1.25em);
+    background-color: var(--_bg);
+    color: var(--_fg);
+    border: var(--tui-border-width) solid var(--_border);
+    border-radius: var(--_radius);
+    line-height: 1.4;
+    transition-duration: var(--tui-motion-duration);
+    transition-timing-function: var(--tui-motion-timing);
+    transition-property: border-color, background-color;
+  }
+  .tui-interface .tui-combobox__input::placeholder {
+    color: var(--tui-color-fg-muted);
+  }
+  .tui-interface .tui-combobox__input:hover:not(:disabled) {
+    --_border: var(--tui-theme-secondary-soft);
+  }
+  .tui-interface .tui-combobox__input:focus {
+    --_border: var(--_border-focus);
+    outline: var(--tui-focus-ring-width) solid var(--tui-focus-ring-color);
+    outline-offset: var(--tui-focus-ring-offset);
+  }
+  .tui-interface .tui-combobox__input[aria-expanded=true] {
+    --_border: var(--_border-focus);
+  }
+  .tui-interface .tui-combobox__input:disabled {
+    opacity: var(--tui-opacity-disabled);
+    cursor: not-allowed;
+  }
+  .tui-interface .tui-combobox__clear {
+    position: absolute;
+    right: calc(var(--tui-spacing-sm) + 1.25em + var(--tui-spacing-xxs));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25em;
+    height: 1.25em;
+    border-radius: var(--tui-radius-sm);
+    color: var(--tui-color-fg-muted);
+    cursor: pointer;
+    transition: color var(--tui-motion-duration) var(--tui-motion-timing), background-color var(--tui-motion-duration) var(--tui-motion-timing);
+  }
+  .tui-interface .tui-combobox__clear:hover {
+    color: var(--tui-color-fg);
+    background-color: var(--tui-theme-secondary-subtlest);
+  }
+  .tui-interface .tui-combobox__icon {
+    position: absolute;
+    right: var(--tui-spacing-sm);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--tui-color-fg-muted);
+    pointer-events: none;
+    transition: transform var(--tui-motion-duration) var(--tui-motion-timing);
+  }
+  [aria-expanded=true] ~ .tui-interface .tui-combobox__icon {
+    transform: rotate(180deg);
+  }
+  :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)));
+    --_radius: var(--tui-combobox-content-radius, var(--tui-select-content-radius, var(--tui-radius-md)));
+    z-index: var(--tui-layer-top);
+    min-width: 160px;
+    padding: var(--tui-spacing-xxs);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    pointer-events: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--tui-color-fg-muted) transparent;
+  }
+  :where(.tui-interface) .tui-combobox__content::-webkit-scrollbar {
+    width: 8px;
+  }
+  :where(.tui-interface) .tui-combobox__content::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  :where(.tui-interface) .tui-combobox__content::-webkit-scrollbar-thumb {
+    background-color: var(--tui-color-fg-muted);
+    border-radius: 4px;
+    border: 2px solid transparent;
+    background-clip: content-box;
+    opacity: 0.5;
+  }
+  :where(.tui-interface) .tui-combobox__content::-webkit-scrollbar-thumb:hover {
+    opacity: 1;
+  }
+  :where(.tui-interface) .tui-combobox__content {
+    background-color: var(--_bg);
+    border: var(--tui-border-width) solid var(--_border);
+    border-radius: var(--_radius);
+    box-shadow: var(--_shadow);
+    animation: tui-fadeFromTransparent var(--tui-motion-duration) var(--tui-motion-timing);
+  }
+  :where(.tui-interface) .tui-combobox__option {
+    --_bg-hover: var(--tui-combobox-option-bg-hover, var(--tui-select-option-bg-hover, var(--tui-theme-secondary-subtlest)));
+    --_bg-selected: var(--tui-combobox-option-bg-selected, var(--tui-select-option-bg-selected, var(--tui-theme-primary-subtlest)));
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--tui-spacing-xs);
+    padding: var(--tui-spacing-xs) var(--tui-spacing-sm);
+    border-radius: var(--tui-radius-sm);
+    cursor: pointer;
+    font-size: var(--tui-typography-size-sm);
+    line-height: 1.4;
+  }
+  :where(.tui-interface) .tui-combobox__option:hover:not([data-disabled]), :where(.tui-interface) .tui-combobox__option[data-highlighted]:not([data-disabled]) {
+    background-color: var(--_bg-hover);
+  }
+  :where(.tui-interface) .tui-combobox__option[aria-selected=true] {
+    background-color: var(--_bg-selected);
+  }
+  :where(.tui-interface) .tui-combobox__option[aria-selected=true]:hover:not([data-disabled]), :where(.tui-interface) .tui-combobox__option[aria-selected=true][data-highlighted]:not([data-disabled]) {
+    background-color: var(--tui-theme-primary-subtle);
+  }
+  :where(.tui-interface) .tui-combobox__option[data-disabled] {
+    opacity: var(--tui-opacity-disabled);
+    cursor: not-allowed;
+  }
+  :where(.tui-interface) .tui-combobox__option-content {
+    flex: 1;
+    min-width: 0;
+  }
+  :where(.tui-interface) .tui-combobox__option-check {
+    flex-shrink: 0;
+    color: var(--tui-theme-primary-base);
+  }
+  :where(.tui-interface) .tui-combobox__group + :where(.tui-interface) .tui-combobox__group {
+    margin-top: var(--tui-spacing-xxs);
+    padding-top: var(--tui-spacing-xxs);
+    border-top: var(--tui-border-width) solid var(--tui-color-divider);
+  }
+  :where(.tui-interface) .tui-combobox__label {
+    padding: var(--tui-spacing-xs) var(--tui-spacing-sm);
+    padding-bottom: var(--tui-spacing-xxs);
+    font-size: var(--tui-typography-size-xs);
+    font-weight: 600;
+    color: var(--tui-color-fg-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+  @media (forced-colors: active) {
+    .tui-interface .tui-combobox__input {
+      background-color: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+    }
+    .tui-interface .tui-combobox__input:focus {
+      outline-color: Highlight;
+    }
+    :where(.tui-interface) .tui-combobox__content {
+      background-color: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+    }
+    :where(.tui-interface) .tui-combobox__option:hover:not([data-disabled]), :where(.tui-interface) .tui-combobox__option[data-highlighted]:not([data-disabled]), :where(.tui-interface) .tui-combobox__option[aria-selected=true] {
+      background-color: Highlight;
+      color: HighlightText;
+      forced-color-adjust: none;
+    }
+  }
   :where(.tui-interface) .tui-content-indicator {
     --_bg: var(--tui-content-indicator-bg, transparent);
     --_border: var(--tui-content-indicator-border, var(--tui-color-border));
@@ -1393,7 +1652,6 @@
     --_border: var(--tui-dropdown-border, var(--tui-color-border-default));
     --_item-bg-hover: var(--tui-dropdown-item-bg-hover, var(--tui-color-bg-subtle));
     --_item-bg-active: var(--tui-dropdown-item-bg-active, var(--tui-color-bg-muted));
-    box-sizing: border-box;
     z-index: var(--_z);
     min-width: var(--tui-dropdown-min-width, 160px);
     padding: var(--tui-spacing-xxs, 4px);
@@ -1410,7 +1668,6 @@
   :where(.tui-interface) .tui-dropdown__item,
   :where(.tui-interface) .tui-dropdown .tui-button,
   :where(.tui-interface) .tui-dropdown .tui-icon-button {
-    box-sizing: border-box;
     justify-content: flex-start;
     width: 100%;
     min-width: 0;
@@ -1451,11 +1708,6 @@
   :where(.tui-interface) .tui-dropdown .tui-icon-button {
     justify-content: center;
   }
-  @media (prefers-reduced-motion: reduce) {
-    :where(.tui-interface) .tui-dropdown {
-      animation: none;
-    }
-  }
   @media (forced-colors: active) {
     :where(.tui-interface) .tui-dropdown {
       background-color: Canvas;
@@ -1474,10 +1726,598 @@
       forced-color-adjust: none;
     }
   }
-  :where(.tui-interface) :is(label, .tui-label) {
-    color: var(--tui-color-fg);
-    font-weight: bold;
+  :where(.tui-interface) .tui-field {
+    --_gap: var(--tui-field-gap, var(--tui-spacing-xs));
+    --_label-fg: var(--tui-field-label-fg, var(--tui-color-fg));
+    --_helper-fg: var(--tui-field-helper-fg, var(--tui-color-fg-secondary));
+    --_error-fg: var(--tui-field-error-fg, var(--tui-theme-danger-base));
+    display: flex;
+    flex-direction: column;
+    gap: var(--_gap);
+  }
+  :where(.tui-interface) .tui-field.is-layout-inline {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: baseline;
+    column-gap: var(--tui-spacing-sm);
+    row-gap: var(--_gap);
+  }
+  :where(.tui-interface) .tui-field.is-layout-inline .tui-field__label {
+    grid-column: 1;
+  }
+  :where(.tui-interface) .tui-field.is-layout-inline > :not(.tui-field__label):not(.tui-field__helper):not(.tui-field__error) {
+    grid-column: 2;
+  }
+  :where(.tui-interface) .tui-field.is-layout-inline .tui-field__helper,
+  :where(.tui-interface) .tui-field.is-layout-inline .tui-field__error {
+    grid-column: 2;
+  }
+  :where(.tui-interface) .tui-field__label {
+    color: var(--_label-fg);
     font-size: var(--tui-typography-size-sm);
+    font-weight: bold;
+    line-height: 1.25;
+  }
+  :where(.tui-interface) .tui-field__required {
+    color: var(--_error-fg);
+    margin-inline-start: 0.125em;
+  }
+  :where(.tui-interface) .tui-field__helper {
+    color: var(--_helper-fg);
+    font-size: var(--tui-typography-size-xs);
+    line-height: 1.4;
+  }
+  :where(.tui-interface) .tui-field__error {
+    color: var(--_error-fg);
+    font-size: var(--tui-typography-size-xs);
+    line-height: 1.4;
+  }
+  :where(.tui-interface) .tui-field.is-error .tui-field__label {
+    color: var(--_error-fg);
+  }
+  :where(.tui-interface) .tui-field.is-disabled {
+    pointer-events: none;
+  }
+  .tui-interface .tui-multiselect__trigger {
+    --_bg: var(--tui-multiselect-trigger-bg, var(--tui-color-bg));
+    --_fg: var(--tui-multiselect-trigger-fg, var(--tui-color-fg));
+    --_border: var(--tui-multiselect-trigger-border, var(--tui-color-border));
+    --_border-focus: var(--tui-multiselect-trigger-border-focus, var(--tui-theme-primary-base));
+    --_radius: var(--tui-multiselect-trigger-radius, var(--tui-radius-md));
+    appearance: none;
+    border: none;
+    font: inherit;
+    margin: 0;
+    --_fs: var(--tui-typography-size-md);
+    --_py: var(--tui-spacing-xxs);
+    font-size: var(--_fs);
+    padding-block: var(--_py);
+    min-height: calc(2em + 2 * var(--_py));
+  }
+  .tui-interface .tui-multiselect__trigger.is-size-sm {
+    --_fs: var(--tui-typography-size-sm);
+  }
+  .tui-interface .tui-multiselect__trigger.is-size-lg {
+    --_fs: var(--tui-typography-size-lg);
+  }
+  .tui-interface .tui-multiselect__trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--tui-spacing-xs);
+    min-width: 160px;
+    width: 100%;
+    padding-inline: var(--tui-spacing-sm);
+    background-color: var(--_bg);
+    color: var(--_fg);
+    border: var(--tui-border-width) solid var(--_border);
+    border-radius: var(--_radius);
+    cursor: pointer;
+    line-height: 1.4;
+    text-align: left;
+    transition-duration: var(--tui-motion-duration);
+    transition-timing-function: var(--tui-motion-timing);
+    transition-property: border-color, background-color;
+  }
+  .tui-interface .tui-multiselect__trigger:hover:not([data-disabled]) {
+    --_border: var(--tui-theme-secondary-soft);
+  }
+  .tui-interface .tui-multiselect__trigger:focus-visible {
+    --_border: var(--_border-focus);
+    outline: var(--tui-focus-ring-width) solid var(--tui-focus-ring-color);
+    outline-offset: var(--tui-focus-ring-offset);
+  }
+  .tui-interface .tui-multiselect__trigger[data-state=open] {
+    --_border: var(--_border-focus);
+  }
+  .tui-interface .tui-multiselect__trigger[data-disabled] {
+    opacity: var(--tui-opacity-disabled);
+    cursor: not-allowed;
+  }
+  .tui-interface .tui-multiselect__value {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+  }
+  .tui-interface .tui-multiselect__placeholder {
+    color: var(--tui-color-fg-muted);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .tui-interface .tui-multiselect__count {
+    white-space: nowrap;
+  }
+  .tui-interface .tui-multiselect__chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--tui-spacing-xxs);
+    min-width: 0;
+  }
+  .tui-interface .tui-multiselect__chip {
+    --_chip-bg: var(--tui-multiselect-chip-bg, var(--tui-theme-secondary-subtlest));
+    --_chip-fg: var(--tui-multiselect-chip-fg, var(--tui-color-fg));
+    display: inline-flex;
+    align-items: center;
+    padding: 0.125em 0.5em;
+    background-color: var(--_chip-bg);
+    color: var(--_chip-fg);
+    border-radius: var(--tui-radius-sm);
+    font-size: var(--tui-typography-size-xs);
+    line-height: 1.4;
+    white-space: nowrap;
+    max-width: 120px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .tui-interface .tui-multiselect__more {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.125em 0.375em;
+    color: var(--tui-color-fg-muted);
+    font-size: var(--tui-typography-size-xs);
+    line-height: 1.4;
+    white-space: nowrap;
+  }
+  .tui-interface .tui-multiselect__clear {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 1.25em;
+    height: 1.25em;
+    border-radius: var(--tui-radius-sm);
+    color: var(--tui-color-fg-muted);
+    cursor: pointer;
+    transition: color var(--tui-motion-duration) var(--tui-motion-timing), background-color var(--tui-motion-duration) var(--tui-motion-timing);
+  }
+  .tui-interface .tui-multiselect__clear:hover {
+    color: var(--tui-color-fg);
+    background-color: var(--tui-theme-secondary-subtlest);
+  }
+  [data-disabled] .tui-interface .tui-multiselect__clear {
+    pointer-events: none;
+  }
+  .tui-interface .tui-multiselect__icon {
+    flex-shrink: 0;
+    color: var(--tui-color-fg-muted);
+    transition: transform var(--tui-motion-duration) var(--tui-motion-timing);
+  }
+  [data-state=open] .tui-interface .tui-multiselect__icon {
+    transform: rotate(180deg);
+  }
+  :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));
+    --_radius: var(--tui-multiselect-content-radius, var(--tui-radius-md));
+    z-index: var(--tui-layer-top);
+    min-width: 160px;
+    padding: var(--tui-spacing-xxs);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    pointer-events: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--tui-color-fg-muted) transparent;
+  }
+  :where(.tui-interface) .tui-multiselect__content::-webkit-scrollbar {
+    width: 8px;
+  }
+  :where(.tui-interface) .tui-multiselect__content::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  :where(.tui-interface) .tui-multiselect__content::-webkit-scrollbar-thumb {
+    background-color: var(--tui-color-fg-muted);
+    border-radius: 4px;
+    border: 2px solid transparent;
+    background-clip: content-box;
+    opacity: 0.5;
+  }
+  :where(.tui-interface) .tui-multiselect__content::-webkit-scrollbar-thumb:hover {
+    opacity: 1;
+  }
+  :where(.tui-interface) .tui-multiselect__content {
+    background-color: var(--_bg);
+    border: var(--tui-border-width) solid var(--_border);
+    border-radius: var(--_radius);
+    box-shadow: var(--_shadow);
+    animation: tui-fadeFromTransparent var(--tui-motion-duration) var(--tui-motion-timing);
+  }
+  :where(.tui-interface) .tui-multiselect__option {
+    --_bg-hover: var(--tui-multiselect-option-bg-hover, var(--tui-theme-secondary-subtlest));
+    --_bg-selected: var(--tui-multiselect-option-bg-selected, var(--tui-theme-primary-subtlest));
+    display: flex;
+    align-items: center;
+    gap: var(--tui-spacing-xs);
+    padding: var(--tui-spacing-xs) var(--tui-spacing-sm);
+    border-radius: var(--tui-radius-sm);
+    cursor: pointer;
+    font-size: var(--tui-typography-size-sm);
+    line-height: 1.4;
+  }
+  :where(.tui-interface) .tui-multiselect__option:hover:not([data-disabled]):not([data-blocked]), :where(.tui-interface) .tui-multiselect__option[data-highlighted]:not([data-disabled]):not([data-blocked]) {
+    background-color: var(--_bg-hover);
+  }
+  :where(.tui-interface) .tui-multiselect__option[aria-selected=true] {
+    background-color: var(--_bg-selected);
+  }
+  :where(.tui-interface) .tui-multiselect__option[aria-selected=true]:hover:not([data-disabled]):not([data-blocked]), :where(.tui-interface) .tui-multiselect__option[aria-selected=true][data-highlighted]:not([data-disabled]):not([data-blocked]) {
+    background-color: var(--tui-theme-primary-subtle);
+  }
+  :where(.tui-interface) .tui-multiselect__option[data-disabled] {
+    opacity: var(--tui-opacity-disabled);
+    cursor: not-allowed;
+  }
+  :where(.tui-interface) .tui-multiselect__option[data-blocked] {
+    opacity: var(--tui-opacity-disabled);
+    cursor: not-allowed;
+  }
+  :where(.tui-interface) .tui-multiselect__option-content {
+    display: flex;
+    align-items: center;
+    gap: var(--tui-spacing-xs);
+    flex: 1;
+    min-width: 0;
+  }
+  :where(.tui-interface) .tui-multiselect__checkbox {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 1em;
+    height: 1em;
+    border: var(--tui-border-width) solid var(--tui-color-border);
+    border-radius: var(--tui-radius-xs);
+    background-color: var(--tui-color-bg);
+    color: var(--tui-color-fg-on-accent);
+    transition: background-color var(--tui-motion-duration) var(--tui-motion-timing), border-color var(--tui-motion-duration) var(--tui-motion-timing);
+  }
+  :where(.tui-interface) .tui-multiselect__checkbox.is-checked {
+    background-color: var(--tui-theme-primary-base);
+    border-color: var(--tui-theme-primary-base);
+  }
+  [data-disabled] :where(.tui-interface) .tui-multiselect__checkbox {
+    opacity: var(--tui-opacity-disabled);
+  }
+  :where(.tui-interface) .tui-multiselect__group + :where(.tui-interface) .tui-multiselect__group {
+    margin-top: var(--tui-spacing-xxs);
+    padding-top: var(--tui-spacing-xxs);
+    border-top: var(--tui-border-width) solid var(--tui-color-divider);
+  }
+  :where(.tui-interface) .tui-multiselect__label {
+    padding: var(--tui-spacing-xs) var(--tui-spacing-sm);
+    padding-bottom: var(--tui-spacing-xxs);
+    font-size: var(--tui-typography-size-xs);
+    font-weight: 600;
+    color: var(--tui-color-fg-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+  @media (forced-colors: active) {
+    .tui-interface .tui-multiselect__trigger {
+      background-color: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+    }
+    .tui-interface .tui-multiselect__trigger:focus-visible {
+      outline-color: Highlight;
+    }
+    :where(.tui-interface) .tui-multiselect__content {
+      background-color: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+    }
+    :where(.tui-interface) .tui-multiselect__option:hover:not([data-disabled]), :where(.tui-interface) .tui-multiselect__option[data-highlighted]:not([data-disabled]), :where(.tui-interface) .tui-multiselect__option[aria-selected=true] {
+      background-color: Highlight;
+      color: HighlightText;
+      forced-color-adjust: none;
+    }
+    :where(.tui-interface) .tui-multiselect__checkbox {
+      border-color: CanvasText;
+    }
+    :where(.tui-interface) .tui-multiselect__checkbox.is-checked {
+      background-color: Highlight;
+      border-color: Highlight;
+    }
+    .tui-interface .tui-multiselect__chip {
+      border: 1px solid CanvasText;
+    }
+  }
+  .tui-interface .tui-select__trigger {
+    --_bg: var(--tui-select-trigger-bg, var(--tui-color-bg));
+    --_fg: var(--tui-select-trigger-fg, var(--tui-color-fg));
+    --_border: var(--tui-select-trigger-border, var(--tui-color-border));
+    --_border-focus: var(--tui-select-trigger-border-focus, var(--tui-theme-primary-base));
+    --_radius: var(--tui-select-trigger-radius, var(--tui-radius-md));
+    appearance: none;
+    border: none;
+    font: inherit;
+    margin: 0;
+    --_fs: var(--tui-typography-size-md);
+    --_py: var(--tui-spacing-xxs);
+    font-size: var(--_fs);
+    padding-block: var(--_py);
+    min-height: calc(2em + 2 * var(--_py));
+  }
+  .tui-interface .tui-select__trigger.is-size-sm {
+    --_fs: var(--tui-typography-size-sm);
+  }
+  .tui-interface .tui-select__trigger.is-size-lg {
+    --_fs: var(--tui-typography-size-lg);
+  }
+  .tui-interface .tui-select__trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--tui-spacing-xs);
+    min-width: 160px;
+    width: 100%;
+    padding-inline: var(--tui-spacing-sm);
+    background-color: var(--_bg);
+    color: var(--_fg);
+    border: var(--tui-border-width) solid var(--_border);
+    border-radius: var(--_radius);
+    cursor: pointer;
+    line-height: 1.4;
+    text-align: left;
+    transition-duration: var(--tui-motion-duration);
+    transition-timing-function: var(--tui-motion-timing);
+    transition-property: border-color, background-color;
+  }
+  .tui-interface .tui-select__trigger:hover:not([data-disabled]) {
+    --_border: var(--tui-theme-secondary-soft);
+  }
+  .tui-interface .tui-select__trigger:focus-visible {
+    --_border: var(--_border-focus);
+    outline: var(--tui-focus-ring-width) solid var(--tui-focus-ring-color);
+    outline-offset: var(--tui-focus-ring-offset);
+  }
+  .tui-interface .tui-select__trigger[data-state=open] {
+    --_border: var(--_border-focus);
+  }
+  .tui-interface .tui-select__trigger[data-disabled] {
+    opacity: var(--tui-opacity-disabled);
+    cursor: not-allowed;
+  }
+  .tui-interface .tui-select__value {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .tui-interface .tui-select__placeholder {
+    color: var(--tui-color-fg-muted);
+  }
+  .tui-interface .tui-select__icon {
+    flex-shrink: 0;
+    color: var(--tui-color-fg-muted);
+    transition: transform var(--tui-motion-duration) var(--tui-motion-timing);
+  }
+  [data-state=open] .tui-interface .tui-select__icon {
+    transform: rotate(180deg);
+  }
+  .tui-interface .tui-select__clear {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 1.25em;
+    height: 1.25em;
+    border-radius: var(--tui-radius-sm);
+    color: var(--tui-color-fg-muted);
+    cursor: pointer;
+    transition: color var(--tui-motion-duration) var(--tui-motion-timing), background-color var(--tui-motion-duration) var(--tui-motion-timing);
+  }
+  .tui-interface .tui-select__clear:hover {
+    color: var(--tui-color-fg);
+    background-color: var(--tui-theme-secondary-subtlest);
+  }
+  [data-disabled] .tui-interface .tui-select__clear {
+    pointer-events: none;
+  }
+  :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));
+    --_radius: var(--tui-select-content-radius, var(--tui-radius-md));
+    z-index: var(--tui-layer-top);
+    min-width: 160px;
+    padding: var(--tui-spacing-xxs);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    pointer-events: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--tui-color-fg-muted) transparent;
+  }
+  :where(.tui-interface) .tui-select__content::-webkit-scrollbar {
+    width: 8px;
+  }
+  :where(.tui-interface) .tui-select__content::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  :where(.tui-interface) .tui-select__content::-webkit-scrollbar-thumb {
+    background-color: var(--tui-color-fg-muted);
+    border-radius: 4px;
+    border: 2px solid transparent;
+    background-clip: content-box;
+    opacity: 0.5;
+  }
+  :where(.tui-interface) .tui-select__content::-webkit-scrollbar-thumb:hover {
+    opacity: 1;
+  }
+  :where(.tui-interface) .tui-select__content {
+    background-color: var(--_bg);
+    border: var(--tui-border-width) solid var(--_border);
+    border-radius: var(--_radius);
+    box-shadow: var(--_shadow);
+    animation: tui-fadeFromTransparent var(--tui-motion-duration) var(--tui-motion-timing);
+  }
+  :where(.tui-interface) .tui-select__option {
+    --_bg-hover: var(--tui-select-option-bg-hover, var(--tui-theme-secondary-subtlest));
+    --_bg-selected: var(--tui-select-option-bg-selected, var(--tui-theme-primary-subtlest));
+    display: flex;
+    align-items: center;
+    gap: var(--tui-spacing-xs);
+    padding: var(--tui-spacing-xs) var(--tui-spacing-sm);
+    border-radius: var(--tui-radius-sm);
+    cursor: pointer;
+    font-size: var(--tui-typography-size-sm);
+    line-height: 1.4;
+  }
+  :where(.tui-interface) .tui-select__option:hover:not([data-disabled]), :where(.tui-interface) .tui-select__option[data-highlighted]:not([data-disabled]) {
+    background-color: var(--_bg-hover);
+  }
+  :where(.tui-interface) .tui-select__option[aria-selected=true] {
+    background-color: var(--_bg-selected);
+    font-weight: 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);
+  }
+  :where(.tui-interface) .tui-select__option[data-disabled] {
+    opacity: var(--tui-opacity-disabled);
+    cursor: not-allowed;
+  }
+  :where(.tui-interface) .tui-select__option-content {
+    display: flex;
+    align-items: center;
+    gap: var(--tui-spacing-xs);
+    flex: 1;
+    min-width: 0;
+  }
+  :where(.tui-interface) .tui-select__option-check {
+    flex-shrink: 0;
+    color: var(--tui-theme-primary-base);
+  }
+  :where(.tui-interface) .tui-select__group + :where(.tui-interface) .tui-select__group {
+    margin-top: var(--tui-spacing-xxs);
+    padding-top: var(--tui-spacing-xxs);
+    border-top: var(--tui-border-width) solid var(--tui-color-divider);
+  }
+  :where(.tui-interface) .tui-select__label {
+    padding: var(--tui-spacing-xs) var(--tui-spacing-sm);
+    padding-bottom: var(--tui-spacing-xxs);
+    font-size: var(--tui-typography-size-xs);
+    font-weight: 600;
+    color: var(--tui-color-fg-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+  @media (forced-colors: active) {
+    .tui-interface .tui-select__trigger {
+      background-color: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+    }
+    .tui-interface .tui-select__trigger:focus-visible {
+      outline-color: Highlight;
+    }
+    :where(.tui-interface) .tui-select__content {
+      background-color: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+    }
+    :where(.tui-interface) .tui-select__option:hover:not([data-disabled]), :where(.tui-interface) .tui-select__option[data-highlighted]:not([data-disabled]), :where(.tui-interface) .tui-select__option[aria-selected=true] {
+      background-color: Highlight;
+      color: HighlightText;
+      forced-color-adjust: none;
+    }
+  }
+  :where(.tui-interface) :is(label, .tui-label) {
+    color: var(--tui-color-fg);
+    font-weight: bold;
+    font-size: var(--tui-typography-size-sm);
+  }
+  :where(.tui-interface) :is(.tui-input,
+  input[type=text],
+  input[type=email],
+  input[type=url],
+  input[type=password],
+  input[type=search],
+  input[type=number],
+  input[type=tel],
+  input[type=range],
+  input[type=date],
+  input[type=month],
+  input[type=week],
+  input[type=time],
+  input[type=datetime],
+  input[type=datetime-local],
+  input[type=color],
+  textarea,
+  select) {
+    --_bg: var(--tui-input-bg, var(--tui-color-bg));
+    --_fg: var(--tui-input-fg, var(--tui-color-fg-muted));
+    --_border: var(--tui-input-border, var(--tui-color-border));
+    --_border-focus: var(--tui-input-border-focus, var(--tui-theme-primary-base));
+    --_border-invalid: var(--tui-input-border-invalid, var(--tui-theme-danger-base));
+    --_radius: var(--tui-input-radius, var(--tui-radius-md));
+    --_fs: var(--tui-typography-size-md);
+    --_py: var(--tui-spacing-xxs);
+    font-size: var(--_fs);
+    padding-block: var(--_py);
+    min-height: calc(2em + 2 * var(--_py));
+  }
+  :where(.tui-interface) :is(.tui-input,
+  input[type=text],
+  input[type=email],
+  input[type=url],
+  input[type=password],
+  input[type=search],
+  input[type=number],
+  input[type=tel],
+  input[type=range],
+  input[type=date],
+  input[type=month],
+  input[type=week],
+  input[type=time],
+  input[type=datetime],
+  input[type=datetime-local],
+  input[type=color],
+  textarea,
+  select).is-size-sm {
+    --_fs: var(--tui-typography-size-sm);
+  }
+  :where(.tui-interface) :is(.tui-input,
+  input[type=text],
+  input[type=email],
+  input[type=url],
+  input[type=password],
+  input[type=search],
+  input[type=number],
+  input[type=tel],
+  input[type=range],
+  input[type=date],
+  input[type=month],
+  input[type=week],
+  input[type=time],
+  input[type=datetime],
+  input[type=datetime-local],
+  input[type=color],
+  textarea,
+  select).is-size-lg {
+    --_fs: var(--tui-typography-size-lg);
   }
   :where(.tui-interface) :is(.tui-input,
   input[type=text],
@@ -1497,23 +2337,13 @@
   input[type=color],
   textarea,
   select) {
-    --_bg: var(--tui-input-bg, var(--tui-color-bg));
-    --_fg: var(--tui-input-fg, var(--tui-color-fg-muted));
-    --_border: var(--tui-input-border, var(--tui-color-border));
-    --_border-focus: var(--tui-input-border-focus, var(--tui-theme-primary-base));
-    --_border-invalid: var(--tui-input-border-invalid, var(--tui-theme-danger-base));
-    --_radius: var(--tui-input-radius, var(--tui-radius-md));
-    font-size: var(--tui-typography-size-sm);
     font-family: inherit;
-    box-sizing: content-box;
     border: var(--tui-border-width) solid var(--_border);
     border-radius: var(--_radius);
     appearance: none;
     background-color: var(--_bg);
     color: var(--_fg);
-    height: calc(2em - 2 * var(--tui-border-width));
     padding-inline: 0.5em;
-    padding-block: 0;
     min-width: 1px;
     transition-duration: var(--tui-motion-duration);
     transition-timing-function: var(--tui-motion-timing);
@@ -1579,16 +2409,26 @@
   input[type=datetime-local],
   input[type=color],
   textarea,
-  select):invalid {
+  select):invalid, :where(.tui-interface) :is(.tui-input,
+  input[type=text],
+  input[type=email],
+  input[type=url],
+  input[type=password],
+  input[type=search],
+  input[type=number],
+  input[type=tel],
+  input[type=range],
+  input[type=date],
+  input[type=month],
+  input[type=week],
+  input[type=time],
+  input[type=datetime],
+  input[type=datetime-local],
+  input[type=color],
+  textarea,
+  select)[aria-invalid=true] {
     --_border: var(--_border-invalid);
   }
-  :where(.tui-interface) :is(input[type=search], input[type=search].tui-input) {
-    padding-inline-start: 2.5em !important;
-    background-image: url('data:image/svg+xml;utf8,<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M8 16a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8ZM8 2a6 6 0 1 0 6 6 6.006 6.006 0 0 0-6-6ZM19 20a1 1 0 0 1-.707-.293l-4-4a1 1 0 0 1 1.414-1.414l4 4A1 1 0 0 1 19 20Z" fill="%231F2A37"/></svg>');
-    background-repeat: no-repeat;
-    background-position: 0.75em 50%;
-    background-size: 1em;
-  }
   :where(.tui-interface) :is(select, select.tui-input) {
     padding-inline-end: 2.5em !important;
     background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAxMSAxMCI+PHBhdGggZmlsbD0iIzExMTkyOCIgZD0iTTUuNTExIDcuNWEuOTM5LjkzOSAwIDAgMS0uNjM2LS4yNDRsLTMuNi0zLjMyNmEuODMzLjgzMyAwIDAgMS0uMjAyLS4yNy43NzguNzc4IDAgMCAxLS4wMDYtLjY0My44My44MyAwIDAgMSAuMTk3LS4yNzMuOTA5LjkwOSAwIDAgMSAuMjk1LS4xODIuOTY1Ljk2NSAwIDAgMSAuNjk2LjAwNmMuMTEuMDQzLjIxLjEwNi4yOTIuMTg2bDIuOTY0IDIuNzM4IDIuOTY0LTIuNzM4YS45NC45NCAwIDAgMSAuNjMzLS4yMzRjLjIzNi4wMDIuNDYyLjA5LjYyOC4yNDRhLjgwMS44MDEgMCAwIDEgLjI2NC41OC44LjggMCAwIDEtLjI1My41ODZsLTMuNiAzLjMyNmEuOTM5LjkzOSAwIDAgMS0uNjM2LjI0NFoiLz48L3N2Zz4=");
@@ -1621,7 +2461,7 @@
   }
   :where(.tui-interface) .tui-toggle {
     --_accent: var(--tui-input-accent, var(--tui-theme-primary-base));
-    --_track-off: var(--tui-palette-color-gray-300);
+    --_track-off: var(--tui-theme-secondary-soft);
   }
   :where(.tui-interface) .tui-toggle input[type=checkbox] {
     position: absolute;
@@ -1679,7 +2519,6 @@
     --_radius: var(--tui-input-radius, var(--tui-radius-md));
     font-size: var(--tui-typography-size-sm);
     font-family: inherit;
-    box-sizing: content-box;
     border: var(--tui-border-width) solid var(--_border);
     border-radius: var(--_radius);
     background-color: var(--_bg);
@@ -1865,14 +2704,6 @@
       outline-offset: 2px;
     }
   }
-  @media (prefers-reduced-motion: reduce) {
-    .tui-icon-button {
-      transition: none;
-    }
-    .tui-icon-button__spinner {
-      animation: none;
-    }
-  }
   .tui-modal {
     --_z: var(--tui-modal-z, var(--tui-layer-modal, 1000));
     --_backdrop: var(--tui-modal-backdrop, var(--tui-color-bg-overlay));
@@ -1929,7 +2760,7 @@
     --_min-foot: 4rem;
   }
   .tui-modal__dialog {
-    box-sizing: border-box;
+    color: var(--tui-color-fg);
     border-style: solid;
     border-width: var(--tui-border-width);
     border-color: var(--_border);
@@ -1967,13 +2798,11 @@
     padding-block: var(--_padding);
     padding-inline: var(--_padding);
     width: 100%;
-    box-sizing: border-box;
   }
   .tui-modal__dialog .tui-modal__foot {
     padding-block: var(--_padding);
     padding-inline: var(--_padding);
     width: 100%;
-    box-sizing: border-box;
   }
   .tui-modal__dialog.is-size-sm {
     --_max: var(--tui-modal-max, 480px);
@@ -2028,7 +2857,6 @@
     --_padding: var(--tui-notice-padding, var(--tui-spacing-sm));
     --_foot-basis: var(--tui-notice-foot-basis, 500px);
     --_gap: var(--tui-spacing-sm);
-    box-sizing: border-box;
     container-type: inline-size;
     container-name: tuiNotice;
     position: relative;
@@ -2061,7 +2889,6 @@
     padding-block: var(--_padding);
     padding-inline: var(--_padding);
     width: 100%;
-    box-sizing: border-box;
     display: flex;
     align-items: center;
     gap: var(--_gap);
@@ -2069,7 +2896,6 @@
   :where(.tui-interface) .tui-notice__body {
     padding-inline: var(--_padding);
     width: 100%;
-    box-sizing: border-box;
   }
   :where(.tui-interface) .tui-notice__body > *:first-child {
     margin-block-start: unset;
@@ -2080,6 +2906,13 @@
   :where(.tui-interface) .tui-notice__body > p {
     margin: 0;
   }
+  :where(.tui-interface) .tui-notice__body a {
+    color: var(--tui-theme-primary-strong);
+    text-decoration: underline;
+  }
+  :where(.tui-interface) .tui-notice__body a:hover {
+    color: var(--tui-theme-primary-stronger);
+  }
   :where(.tui-interface) .tui-notice__body:first-child {
     padding-block-start: var(--_padding);
   }
@@ -2090,7 +2923,6 @@
     padding-block: var(--_padding);
     padding-inline: var(--_padding);
     width: 100%;
-    box-sizing: border-box;
   }
   :where(.tui-interface) .tui-notice.is-layout-inline {
     display: flex;
@@ -2338,6 +3170,83 @@
     align-items: center;
     gap: var(--tui-spacing-xs);
   }
+  :where(.tui-interface) .tui-radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--tui-spacing-xs);
+  }
+  :where(.tui-interface) .tui-radio-group.is-horizontal {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: var(--tui-spacing-sm);
+  }
+  :where(.tui-interface) .tui-radio-group[aria-disabled=true] {
+    opacity: var(--tui-opacity-disabled);
+  }
+  :where(.tui-interface) .tui-radio {
+    --_accent: var(--tui-radio-accent, var(--tui-input-accent, var(--tui-theme-primary-base)));
+    --_border: var(--tui-input-border, var(--tui-color-border));
+    display: inline-flex;
+    align-items: center;
+    gap: var(--tui-spacing-xs);
+    padding: 0;
+    border: none;
+    background: none;
+    font: inherit;
+    font-size: var(--tui-typography-size-sm);
+    color: var(--tui-color-fg);
+    cursor: pointer;
+    appearance: none;
+  }
+  :where(.tui-interface) .tui-radio:focus-visible {
+    outline: none;
+  }
+  :where(.tui-interface) .tui-radio:focus-visible .tui-radio__indicator {
+    outline: var(--tui-focus-ring-width) solid var(--tui-focus-ring-color);
+    outline-offset: var(--tui-focus-ring-offset);
+  }
+  :where(.tui-interface) .tui-radio:disabled {
+    cursor: not-allowed;
+    opacity: var(--tui-opacity-disabled);
+  }
+  :where(.tui-interface) .tui-radio[aria-checked=true] .tui-radio__indicator {
+    border-color: var(--_accent);
+  }
+  :where(.tui-interface) .tui-radio[aria-checked=true] .tui-radio__indicator::after {
+    transform: scale(1);
+    background-color: var(--_accent);
+  }
+  :where(.tui-interface) .tui-radio__indicator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 1.15em;
+    height: 1.15em;
+    border-radius: 50%;
+    border: var(--tui-border-width) solid var(--_border);
+    background-color: var(--tui-color-bg);
+    transition-duration: var(--tui-motion-duration);
+    transition-timing-function: var(--tui-motion-timing);
+    transition-property: border-color;
+  }
+  :where(.tui-interface) .tui-radio__indicator::after {
+    content: "";
+    display: block;
+    width: 0.5em;
+    height: 0.5em;
+    border-radius: 50%;
+    background-color: transparent;
+    transform: scale(0);
+    transition-duration: var(--tui-motion-duration);
+    transition-timing-function: var(--tui-motion-timing);
+    transition-property: transform, background-color;
+  }
+  :where(.tui-interface) .tui-radio__label {
+    font-weight: unset;
+    line-height: 1.25em;
+    user-select: none;
+  }
   :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));
@@ -2750,11 +3659,6 @@
   :where(.tui-interface) .tui-segmented__item-label {
     min-width: 0;
   }
-  @media (prefers-reduced-motion: reduce) {
-    .tui-interface .tui-segmented__item {
-      transition: none;
-    }
-  }
   @media (forced-colors: active) {
     .tui-interface .tui-segmented__item[aria-checked=true] {
       forced-color-adjust: none;
@@ -2765,6 +3669,85 @@
       outline: 2px solid CanvasText;
     }
   }
+  :where(.tui-interface) .tui-switch {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--tui-spacing-xs);
+    font-size: var(--tui-typography-size-md);
+    cursor: pointer;
+    user-select: none;
+  }
+  :where(.tui-interface) .tui-switch.is-size-sm {
+    font-size: var(--tui-typography-size-sm);
+  }
+  :where(.tui-interface) .tui-switch.is-size-lg {
+    font-size: var(--tui-typography-size-lg);
+  }
+  :where(.tui-interface) .tui-switch.is-disabled {
+    opacity: var(--tui-opacity-disabled);
+    cursor: not-allowed;
+  }
+  :where(.tui-interface) .tui-switch__label {
+    font-weight: unset;
+    line-height: 1.25em;
+    font-size: var(--tui-typography-size-sm);
+    user-select: none;
+  }
+  :where(.tui-interface) .tui-switch__track {
+    --_accent: var(--tui-switch-accent, var(--tui-input-accent, var(--tui-theme-primary-base)));
+    --_track-off: var(--tui-switch-track-off, var(--tui-theme-secondary-soft));
+    font-size: var(--tui-typography-size-md);
+  }
+  :where(.tui-interface) .tui-switch__track.is-size-sm {
+    font-size: var(--tui-typography-size-sm);
+  }
+  :where(.tui-interface) .tui-switch__track.is-size-lg {
+    font-size: var(--tui-typography-size-lg);
+  }
+  :where(.tui-interface) .tui-switch__track {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    width: 2.8575em;
+    height: 1.4285em;
+    border-radius: 9999px;
+    border: var(--tui-border-width) solid var(--_track-off);
+    background-color: var(--_track-off);
+    padding: 0;
+    cursor: pointer;
+    appearance: none;
+    font: inherit;
+    transition-duration: var(--tui-motion-duration);
+    transition-timing-function: var(--tui-motion-timing);
+    transition-property: background-color, border-color;
+  }
+  :where(.tui-interface) .tui-switch__track:focus-visible {
+    outline: var(--tui-focus-ring-width) solid var(--tui-focus-ring-color);
+    outline-offset: var(--tui-focus-ring-offset);
+  }
+  :where(.tui-interface) .tui-switch__track:disabled {
+    cursor: not-allowed;
+  }
+  :where(.tui-interface) .tui-switch__track.is-checked {
+    background-color: var(--_accent);
+    border-color: var(--_accent);
+  }
+  :where(.tui-interface) .tui-switch__thumb {
+    display: block;
+    width: calc(1.4285em - 4px);
+    height: calc(1.4285em - 4px);
+    border-radius: 50%;
+    background-color: var(--tui-color-bg);
+    transform: translateX(2px);
+    transition-duration: var(--tui-motion-duration);
+    transition-timing-function: var(--tui-motion-timing);
+    transition-property: transform;
+    pointer-events: none;
+  }
+  :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)));
+  }
   :where(.tui-interface) .tui-sidebar {
     --_width: var(--tui-sidebar-width, 320px);
     --_bg: var(--tui-sidebar-bg, var(--tui-color-bg-surface));
@@ -2856,12 +3839,6 @@
   body.tui-sidebar-drawer-open {
     overflow: hidden;
   }
-  @media (prefers-reduced-motion: reduce) {
-    :where(.tui-interface) .tui-sidebar-drawer__backdrop,
-    :where(.tui-interface) .tui-sidebar-drawer__panel {
-      animation: none;
-    }
-  }
   :where(.tui-interface) .tui-step-indicator {
     display: inline-flex;
   }
@@ -2930,7 +3907,7 @@
     border-left: 3px solid transparent;
     border-radius: var(--_radius);
     background: transparent;
-    color: inherit;
+    color: var(--tui-color-fg);
     font: inherit;
     text-align: start;
     text-decoration: none;
@@ -2964,11 +3941,6 @@
     min-width: 0;
     line-height: var(--tui-line-height-normal, 1.5);
   }
-  @media (prefers-reduced-motion: reduce) {
-    :where(.tui-interface) .tui-steplist__item {
-      transition: none;
-    }
-  }
   :where(.tui-interface) .tui-table {
     --_border: var(--tui-table-border, var(--tui-color-border));
     --_bg: var(--tui-table-bg, transparent);
@@ -3198,11 +4170,6 @@
   :where(.tui-interface) .tui-tabs__panel > *:last-child {
     margin-block-end: 0;
   }
-  @media (prefers-reduced-motion: reduce) {
-    :where(.tui-interface) .tui-tabs__tab {
-      transition: none;
-    }
-  }
   @media (forced-colors: active) {
     .tui-interface .tui-tabs__tab[data-state=active] {
       forced-color-adjust: none;
@@ -3228,6 +4195,104 @@
       border-width: 2px;
     }
   }
+  :where(.tui-interface) .tui-textarea {
+    --_fs: var(--tui-typography-size-md);
+    --_py: var(--tui-spacing-xxs);
+    font-size: var(--_fs);
+    padding-block: var(--_py);
+    min-height: calc(2em + 2 * var(--_py));
+  }
+  :where(.tui-interface) .tui-textarea.is-size-sm {
+    --_fs: var(--tui-typography-size-sm);
+  }
+  :where(.tui-interface) .tui-textarea.is-size-lg {
+    --_fs: var(--tui-typography-size-lg);
+  }
+  :where(.tui-interface) .tui-textarea {
+    min-height: calc(4em + 2 * var(--_py));
+    padding-inline: 0.5em;
+    font-family: inherit;
+    line-height: 1.4;
+  }
+  :where(.tui-interface) .tui-textarea.is-autoresize {
+    resize: none;
+    overflow: hidden;
+  }
+  :where(.tui-interface) .tui-input-group {
+    --_gap: var(--tui-input-group-gap, var(--tui-spacing-xs));
+    --_bg: var(--tui-input-bg, var(--tui-color-bg));
+    --_border: var(--tui-input-border, var(--tui-color-border));
+    --_border-focus: var(--tui-input-border-focus, var(--tui-theme-primary-base));
+    --_radius: var(--tui-input-radius, var(--tui-radius-md));
+    --_fs: var(--tui-typography-size-md);
+    --_py: var(--tui-spacing-xxs);
+    font-size: var(--_fs);
+    padding-block: var(--_py);
+    min-height: calc(2em + 2 * var(--_py));
+  }
+  :where(.tui-interface) .tui-input-group.is-size-sm {
+    --_fs: var(--tui-typography-size-sm);
+  }
+  :where(.tui-interface) .tui-input-group.is-size-lg {
+    --_fs: var(--tui-typography-size-lg);
+  }
+  :where(.tui-interface) .tui-input-group {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--_gap);
+    background-color: var(--_bg);
+    border: var(--tui-border-width) solid var(--_border);
+    border-radius: var(--_radius);
+    padding-inline: var(--tui-spacing-xs);
+  }
+  :where(.tui-interface) .tui-input-group .tui-input,
+  :where(.tui-interface) .tui-input-group input {
+    border: none;
+    background: transparent;
+    padding-inline: 0;
+    padding-block: 0;
+    min-height: 0;
+    min-width: 0;
+    flex: 1 1 auto;
+  }
+  :where(.tui-interface) .tui-input-group .tui-input:focus-visible,
+  :where(.tui-interface) .tui-input-group input:focus-visible {
+    outline: none;
+  }
+  :where(.tui-interface) .tui-input-group:focus-within {
+    --_border: var(--_border-focus);
+    outline: var(--tui-focus-ring-width) solid var(--tui-focus-ring-color);
+    outline-offset: var(--tui-focus-ring-offset);
+  }
+  :where(.tui-interface) .tui-input-group:has(input:invalid), :where(.tui-interface) .tui-input-group:has(input[aria-invalid=true]) {
+    --_border: var(--tui-input-border-invalid, var(--tui-theme-danger-base));
+  }
+  :where(.tui-interface) .tui-input-group.is-disabled {
+    opacity: var(--tui-opacity-disabled);
+    cursor: not-allowed;
+  }
+  :where(.tui-interface) .tui-input-group.is-disabled > * {
+    pointer-events: none;
+  }
+  :where(.tui-interface) .tui-input-group__prefix,
+  :where(.tui-interface) .tui-input-group__suffix {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    color: var(--tui-color-fg-secondary);
+    pointer-events: none;
+    user-select: none;
+  }
+  :where(.tui-interface) .tui-input-group__prefix button, :where(.tui-interface) .tui-input-group__prefix a, :where(.tui-interface) .tui-input-group__prefix [role=button],
+  :where(.tui-interface) .tui-input-group__suffix button,
+  :where(.tui-interface) .tui-input-group__suffix a,
+  :where(.tui-interface) .tui-input-group__suffix [role=button] {
+    pointer-events: auto;
+  }
+  :where(.tui-interface) .tui-input-group__prefix .tui-icon,
+  :where(.tui-interface) .tui-input-group__suffix .tui-icon {
+    font-size: 1em;
+  }
   :where(.tui-interface) .tui-toolbar {
     --_gap: var(--tui-toolbar-gap, var(--tui-spacing-sm));
     --_padding: var(--tui-toolbar-padding, 0);
@@ -3278,11 +4343,6 @@
     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;
@@ -4105,6 +5165,37 @@
     border-right-width: var(--tui-border-width, 1px) !important;
     border-right-style: solid !important;
   }
+  .tui-interface .tui-input-reset::-webkit-search-decoration, .tui-interface .tui-input-reset::-webkit-search-cancel-button, .tui-interface .tui-input-reset::-webkit-search-results-button, .tui-interface .tui-input-reset::-webkit-search-results-decoration,
+  .tui-interface .tui-input-reset input::-webkit-search-decoration,
+  .tui-interface .tui-input-reset input::-webkit-search-cancel-button,
+  .tui-interface .tui-input-reset input::-webkit-search-results-button,
+  .tui-interface .tui-input-reset input::-webkit-search-results-decoration {
+    display: none !important;
+    -webkit-appearance: none !important;
+  }
+  .tui-interface .tui-input-reset::-webkit-inner-spin-button, .tui-interface .tui-input-reset::-webkit-outer-spin-button,
+  .tui-interface .tui-input-reset input::-webkit-inner-spin-button,
+  .tui-interface .tui-input-reset input::-webkit-outer-spin-button {
+    -webkit-appearance: none !important;
+    margin: 0 !important;
+  }
+  .tui-interface .tui-input-reset[type=number],
+  .tui-interface .tui-input-reset input[type=number] {
+    -moz-appearance: textfield !important;
+  }
+  .tui-interface .tui-input-reset::-webkit-calendar-picker-indicator,
+  .tui-interface .tui-input-reset input::-webkit-calendar-picker-indicator {
+    display: none !important;
+    -webkit-appearance: none !important;
+  }
+  .tui-interface .tui-input-reset::-webkit-color-swatch-wrapper,
+  .tui-interface .tui-input-reset input::-webkit-color-swatch-wrapper {
+    padding: 0 !important;
+  }
+  .tui-interface .tui-input-reset::-webkit-color-swatch,
+  .tui-interface .tui-input-reset input::-webkit-color-swatch {
+    border: none !important;
+  }
   .tui-interface .tui-border-primary {
     border-color: var(--tui-theme-primary-border, var(--tui-theme-primary-base)) !important;
   }