@tangible/ui 0.0.6 → 0.0.8

package/styles/all.expanded.css

@@ -66,6 +66,7 @@
 /* @tui-tokens
 --tui-card-bg
 --tui-card-border
+--tui-card-border-width
 --tui-card-border-interact
 --tui-card-radius
 --tui-card-shadow
@@ -74,7 +75,14 @@
 --tui-card-foot-basis
 */
 /* @tui-tokens
---tui-input-accent
+--tui-checkbox-accent
+--tui-checkbox-border
+--tui-checkbox-border-invalid
+--tui-checkbox-radius
+--tui-checkbox-bg
+--tui-checkbox-size
+--tui-checkbox-gap
+--tui-checkbox-label-color
 */
 /* @tui-tokens
 --tui-chip-bg
@@ -211,6 +219,14 @@
 */
 /* @tui-tokens
 --tui-radio-accent
+--tui-radio-size
+--tui-radio-border
+--tui-radio-bg
+--tui-radio-gap
+--tui-radio-font-size
+--tui-radio-label-color
+--tui-radio-description-color
+--tui-radio-group-gap
 */
 /* @tui-tokens
 --tui-rating-active
@@ -239,10 +255,19 @@
 --tui-segmented-item-fg
 --tui-segmented-item-bg-active
 --tui-segmented-item-fg-active
+--tui-segmented-indicator
+--tui-segmented-indicator-size
 */
 /* @tui-tokens
 --tui-switch-accent
---tui-switch-track-off
+--tui-switch-bg
+--tui-switch-border
+--tui-switch-thumb-bg
+--tui-switch-track-height
+--tui-switch-size
+--tui-switch-label-color
+--tui-switch-font-size
+--tui-switch-gap
 */
 /* @tui-tokens
 --tui-sidebar-width
@@ -316,6 +341,7 @@
   --tui-focus-ring-color: #2563eb;
   /* Font Weight */
   --tui-font-weight-medium: 500;
+  --tui-font-weight-semibold: 600;
   /* Border */
   --tui-border-width: 1px;
   /* Z-Index Layers */
@@ -636,6 +662,7 @@
   --tui-radius-sm: 4px;
   --tui-radius-md: 8px;
   --tui-radius-lg: 12px;
+  --tui-radius-full: 9999px;
   --tui-font-size-base: 16px;
   --tui-line: 1.5;
   --tui-typography-weight-normal: 400;
@@ -1063,7 +1090,6 @@
     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;
     justify-content: center;
     align-items: center;
@@ -1082,7 +1108,7 @@
     border-width: var(--tui-border-width);
   }
   .tui-interface .tui-button .tui-icon {
-    font-size: inherit;
+    font-size: 1.25em;
   }
   .tui-interface .tui-button:hover {
     --_bg: var(--_bg-interact);
@@ -1284,7 +1310,6 @@
     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;
     justify-content: center;
     align-items: center;
@@ -1320,6 +1345,7 @@
   :where(.tui-interface) .tui-card {
     --_bg: var(--tui-card-bg, var(--tui-color-bg-surface));
     --_border: var(--tui-card-border, var(--tui-color-border));
+    --_border-width: var(--tui-card-border-width, var(--tui-border-width));
     --_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-sm));
@@ -1331,7 +1357,7 @@
     position: relative;
     width: 100%;
     border-style: solid;
-    border-width: var(--tui-border-width);
+    border-width: var(--_border-width);
     border-color: var(--_border);
     border-radius: var(--_radius);
     background-color: var(--_bg);
@@ -1387,40 +1413,40 @@
     border-end-start-radius: calc(var(--_radius) - 1px);
   }
   @container tuiCard (width >= 400px) {
-    :where(.tui-interface) .tui-card.is-layout-inline .tui-card__inner {
+    :where(:where(.tui-interface) .tui-card.is-layout-inline) .tui-card__inner {
       display: flex;
       flex-direction: row;
       align-items: center;
       gap: var(--_padding);
     }
-    :where(.tui-interface) .tui-card.is-layout-inline .tui-card__inner .tui-card__media.is-flush {
+    :where(:where(.tui-interface) .tui-card.is-layout-inline) .tui-card__inner .tui-card__media.is-flush {
       object-fit: cover;
       object-position: center;
       margin-block: calc(var(--_padding) * -1);
       height: calc(100% + 2 * var(--_padding));
     }
-    :where(.tui-interface) .tui-card.is-layout-inline .tui-card__inner *:has(.tui-card__media.is-flush) {
+    :where(:where(.tui-interface) .tui-card.is-layout-inline) .tui-card__inner *:has(.tui-card__media.is-flush) {
       align-self: stretch;
     }
-    :where(.tui-interface) .tui-card.is-layout-inline .tui-card__inner .tui-card__head {
+    :where(:where(.tui-interface) .tui-card.is-layout-inline) .tui-card__inner .tui-card__head {
       padding-inline-start: var(--_padding);
       padding-block: var(--_padding);
       flex: 0 1 auto;
     }
-    :where(.tui-interface) .tui-card.is-layout-inline .tui-card__inner .tui-card__head:has(.tui-icon:only-child) {
+    :where(:where(.tui-interface) .tui-card.is-layout-inline) .tui-card__inner .tui-card__head:has(.tui-icon:only-child) {
       flex: 0 0 max-content;
     }
-    :where(.tui-interface) .tui-card.is-layout-inline .tui-card__inner .tui-card__head .tui-card__media.is-flush:first-child {
+    :where(:where(.tui-interface) .tui-card.is-layout-inline) .tui-card__inner .tui-card__head .tui-card__media.is-flush:first-child {
       margin-inline-end: var(--_padding);
       max-width: calc(100% + var(--_padding));
       border-start-end-radius: 0;
       border-end-start-radius: calc(var(--_radius) - 1px);
     }
-    :where(.tui-interface) .tui-card.is-layout-inline .tui-card__inner .tui-card__body {
+    :where(:where(.tui-interface) .tui-card.is-layout-inline) .tui-card__inner .tui-card__body {
       flex: 2 1 auto;
       padding-block: var(--_padding);
     }
-    :where(.tui-interface) .tui-card.is-layout-inline .tui-card__inner .tui-card__foot {
+    :where(:where(.tui-interface) .tui-card.is-layout-inline) .tui-card__inner .tui-card__foot {
       width: unset;
       flex: 0 1 var(--_foot-basis);
       padding-block: var(--_padding);
@@ -1428,20 +1454,20 @@
       margin-inline-start: auto;
       justify-content: flex-end;
     }
-    :where(.tui-interface) .tui-card.is-layout-inline .tui-card__inner .tui-card__foot .tui-card__media.is-flush:last-child {
+    :where(:where(.tui-interface) .tui-card.is-layout-inline) .tui-card__inner .tui-card__foot .tui-card__media.is-flush:last-child {
       margin-inline-start: var(--_padding);
       max-width: calc(100% + var(--_padding));
       border-end-start-radius: 0;
       border-start-end-radius: calc(var(--_radius) - 1px);
     }
-    :where(.tui-interface) .tui-card.is-layout-inline .tui-card__inner .tui-card__head:not(:first-child),
-    :where(.tui-interface) .tui-card.is-layout-inline .tui-card__inner .tui-card__body:not(:first-child),
-    :where(.tui-interface) .tui-card.is-layout-inline .tui-card__inner .tui-card__foot:not(:first-child) {
+    :where(:where(.tui-interface) .tui-card.is-layout-inline) .tui-card__inner .tui-card__head:not(:first-child),
+    :where(:where(.tui-interface) .tui-card.is-layout-inline) .tui-card__inner .tui-card__body:not(:first-child),
+    :where(:where(.tui-interface) .tui-card.is-layout-inline) .tui-card__inner .tui-card__foot:not(:first-child) {
       padding-inline-start: 0;
     }
-    :where(.tui-interface) .tui-card.is-layout-inline .tui-card__inner .tui-card__head:not(:last-child),
-    :where(.tui-interface) .tui-card.is-layout-inline .tui-card__inner .tui-card__body:not(:last-child),
-    :where(.tui-interface) .tui-card.is-layout-inline .tui-card__inner .tui-card__foot:not(:last-child) {
+    :where(:where(.tui-interface) .tui-card.is-layout-inline) .tui-card__inner .tui-card__head:not(:last-child),
+    :where(:where(.tui-interface) .tui-card.is-layout-inline) .tui-card__inner .tui-card__body:not(:last-child),
+    :where(:where(.tui-interface) .tui-card.is-layout-inline) .tui-card__inner .tui-card__foot:not(:last-child) {
       padding-inline-end: 0;
     }
   }
@@ -1478,29 +1504,73 @@
   :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 {
+  .tui-interface input[type=checkbox] {
+    --_accent: var(--tui-checkbox-accent, var(--tui-input-accent, var(--tui-theme-primary-base)));
+    --_border: var(--tui-checkbox-border, var(--tui-color-border));
+    --_radius: var(--tui-checkbox-radius, var(--tui-radius-sm));
+    --_bg: var(--tui-checkbox-bg, var(--tui-color-bg));
+    appearance: none;
+    margin: 0;
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+    border: var(--tui-border-width) solid var(--_border);
+    border-radius: var(--_radius);
+    background-color: var(--_bg);
+    background-size: 75%;
+    background-position: center;
+    background-repeat: no-repeat;
+    cursor: pointer;
+    transition-duration: var(--tui-motion-duration);
+    transition-timing-function: var(--tui-motion-timing);
+    transition-property: background-color, border-color;
+  }
+  .tui-interface input[type=checkbox]:checked {
+    background-color: var(--_accent);
+    border-color: var(--_accent);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
+  }
+  .tui-interface input[type=checkbox]:indeterminate {
+    background-color: var(--_accent);
+    border-color: var(--_accent);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
+  }
+  .tui-interface input[type=checkbox][aria-invalid=true] {
+    --_border: var(--tui-checkbox-border-invalid, var(--tui-theme-danger-base));
+  }
+  .tui-interface input[type=checkbox]: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));
+  .tui-interface input[type=checkbox]:disabled {
+    cursor: not-allowed;
   }
-  :where(.tui-interface) input[type=checkbox]:not(.tui-inline-choice input):disabled {
+  .tui-interface input[type=checkbox]: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));
+  .tui-interface .tui-inline-choice input[type=checkbox]:disabled {
+    opacity: 1;
+  }
+  .tui-interface .tui-inline-choice:has(input[type=checkbox]) {
+    gap: var(--tui-checkbox-gap, var(--tui-spacing-xs));
+  }
+  .tui-interface .tui-inline-choice:has(input[type=checkbox]) input[type=checkbox] {
+    font-size: var(--tui-checkbox-size, 1.15em);
+    flex: 0 0 1em;
+  }
+  .tui-interface .tui-inline-choice:has(input[type=checkbox]) > span {
+    color: var(--tui-checkbox-label-color, inherit);
   }
-  :where(.tui-interface) .tui-inline-choice.is-disabled {
+  .tui-interface .tui-inline-choice.is-disabled {
     opacity: var(--tui-opacity-disabled);
     cursor: not-allowed;
   }
-  :where(.tui-interface) .tui-inline-choice.is-disabled input {
+  .tui-interface .tui-inline-choice.is-disabled input {
     cursor: not-allowed;
   }
   @media (forced-colors: active) {
-    :where(.tui-interface) input[type=checkbox] {
+    .tui-interface input[type=checkbox] {
       forced-color-adjust: auto;
     }
   }
@@ -1848,9 +1918,6 @@
   .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);
@@ -1864,6 +1931,12 @@
     cursor: not-allowed;
   }
   .tui-interface .tui-combobox__clear {
+    appearance: none;
+    border: none;
+    background: none;
+    padding: 0;
+    font: inherit;
+    margin: 0;
     position: absolute;
     right: calc(var(--tui-spacing-sm) + 1.25em + var(--tui-spacing-xxs));
     display: flex;
@@ -1880,6 +1953,13 @@
     color: var(--tui-color-fg);
     background-color: var(--tui-theme-secondary-subtlest);
   }
+  .tui-interface .tui-combobox__clear:focus-visible {
+    outline: var(--tui-focus-ring-width) solid var(--tui-focus-ring-color);
+    outline-offset: var(--tui-focus-ring-offset);
+  }
+  :disabled ~ .tui-interface .tui-combobox__clear {
+    pointer-events: none;
+  }
   .tui-interface .tui-combobox__icon {
     position: absolute;
     right: var(--tui-spacing-sm);
@@ -1974,11 +2054,25 @@
     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;
+    font-weight: var(--tui-font-weight-semibold, 600);
     color: var(--tui-color-fg-muted);
     text-transform: uppercase;
     letter-spacing: 0.05em;
   }
+  @media (prefers-reduced-motion: reduce) {
+    .tui-interface .tui-combobox__input {
+      transition-duration: 0ms;
+    }
+    .tui-interface .tui-combobox__icon {
+      transition-duration: 0ms;
+    }
+    .tui-interface .tui-combobox__clear {
+      transition-duration: 0ms;
+    }
+    :where(.tui-interface) .tui-combobox__content {
+      animation-duration: 0ms;
+    }
+  }
   @media (forced-colors: active) {
     .tui-interface .tui-combobox__input {
       background-color: Canvas;
@@ -1998,6 +2092,12 @@
       color: HighlightText;
       forced-color-adjust: none;
     }
+    .tui-interface .tui-combobox__clear {
+      color: CanvasText;
+    }
+    .tui-interface .tui-combobox__clear:focus-visible {
+      outline-color: Highlight;
+    }
   }
   :where(.tui-interface) .tui-content-indicator {
     --_bg: var(--tui-content-indicator-bg, transparent);
@@ -2261,9 +2361,6 @@
     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);
@@ -2272,7 +2369,7 @@
   .tui-interface .tui-multiselect__trigger[data-state=open] {
     --_border: var(--_border-focus);
   }
-  .tui-interface .tui-multiselect__trigger[data-disabled] {
+  .tui-interface .tui-multiselect__trigger[data-disabled], .tui-interface .tui-multiselect__trigger[disabled] {
     opacity: var(--tui-opacity-disabled);
     cursor: not-allowed;
   }
@@ -2451,11 +2548,28 @@
     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;
+    font-weight: var(--tui-font-weight-semibold, 600);
     color: var(--tui-color-fg-muted);
     text-transform: uppercase;
     letter-spacing: 0.05em;
   }
+  @media (prefers-reduced-motion: reduce) {
+    .tui-interface .tui-multiselect__trigger {
+      transition-duration: 0ms;
+    }
+    .tui-interface .tui-multiselect__clear {
+      transition-duration: 0ms;
+    }
+    .tui-interface .tui-multiselect__icon {
+      transition-duration: 0ms;
+    }
+    :where(.tui-interface) .tui-multiselect__content {
+      animation-duration: 0ms;
+    }
+    :where(.tui-interface) .tui-multiselect__checkbox {
+      transition-duration: 0ms;
+    }
+  }
   @media (forced-colors: active) {
     .tui-interface .tui-multiselect__trigger {
       background-color: Canvas;
@@ -2486,6 +2600,11 @@
       border: 1px solid CanvasText;
     }
   }
+  .tui-interface .tui-select__trigger-wrap {
+    position: relative;
+    display: inline-flex;
+    width: 100%;
+  }
   .tui-interface .tui-select__trigger {
     --_bg: var(--tui-select-trigger-bg, var(--tui-color-bg-surface));
     --_fg: var(--tui-select-trigger-fg, var(--tui-color-fg));
@@ -2530,9 +2649,6 @@
     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);
@@ -2541,7 +2657,7 @@
   .tui-interface .tui-select__trigger[data-state=open] {
     --_border: var(--_border-focus);
   }
-  .tui-interface .tui-select__trigger[data-disabled] {
+  .tui-interface .tui-select__trigger[data-disabled], .tui-interface .tui-select__trigger[disabled] {
     opacity: var(--tui-opacity-disabled);
     cursor: not-allowed;
   }
@@ -2564,10 +2680,19 @@
     transform: rotate(180deg);
   }
   .tui-interface .tui-select__clear {
+    appearance: none;
+    border: none;
+    background: none;
+    padding: 0;
+    font: inherit;
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    right: calc(var(--tui-spacing-sm) + 1em + var(--tui-spacing-xs));
+    transform: translateY(-50%);
     display: flex;
     align-items: center;
     justify-content: center;
-    flex-shrink: 0;
     width: 1.25em;
     height: 1.25em;
     border-radius: var(--tui-radius-sm);
@@ -2579,7 +2704,11 @@
     color: var(--tui-color-fg);
     background-color: var(--tui-theme-secondary-subtlest);
   }
-  [data-disabled] .tui-interface .tui-select__clear {
+  .tui-interface .tui-select__clear:focus-visible {
+    outline: var(--tui-focus-ring-width) solid var(--tui-focus-ring-color);
+    outline-offset: var(--tui-focus-ring-offset);
+  }
+  [data-disabled] .tui-interface .tui-select__clear, [disabled] .tui-interface .tui-select__clear {
     pointer-events: none;
   }
   :where(.tui-interface) .tui-select__content {
@@ -2666,11 +2795,25 @@
     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;
+    font-weight: var(--tui-font-weight-semibold, 600);
     color: var(--tui-color-fg-muted);
     text-transform: uppercase;
     letter-spacing: 0.05em;
   }
+  @media (prefers-reduced-motion: reduce) {
+    .tui-interface .tui-select__trigger {
+      transition-duration: 0ms;
+    }
+    .tui-interface .tui-select__icon {
+      transition-duration: 0ms;
+    }
+    .tui-interface .tui-select__clear {
+      transition-duration: 0ms;
+    }
+    :where(.tui-interface) .tui-select__content {
+      animation-duration: 0ms;
+    }
+  }
   @media (forced-colors: active) {
     .tui-interface .tui-select__trigger {
       background-color: Canvas;
@@ -2690,6 +2833,12 @@
       color: HighlightText;
       forced-color-adjust: none;
     }
+    .tui-interface .tui-select__clear {
+      color: CanvasText;
+    }
+    .tui-interface .tui-select__clear:focus-visible {
+      outline-color: Highlight;
+    }
   }
   :where(.tui-interface) :is(label, .tui-label) {
     color: var(--tui-color-fg);
@@ -2715,7 +2864,7 @@
   textarea,
   select) {
     --_bg: var(--tui-input-bg, var(--tui-color-bg-surface));
-    --_fg: var(--tui-input-fg, var(--tui-color-fg-muted));
+    --_fg: var(--tui-input-fg, var(--tui-color-fg));
     --_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));
@@ -2816,6 +2965,27 @@
   input[type=datetime-local],
   input[type=color],
   textarea,
+  select)::placeholder {
+    color: var(--tui-input-fg-placeholder, var(--tui-color-fg-muted));
+    opacity: 1;
+  }
+  :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):focus-visible {
     --_border: var(--_border-focus);
     outline: var(--tui-focus-ring-width) solid var(--tui-focus-ring-color);
@@ -2838,6 +3008,27 @@
   input[type=datetime-local],
   input[type=color],
   textarea,
+  select)[readonly] {
+    background-color: var(--tui-input-bg-readonly, var(--tui-color-bg));
+    cursor: default;
+  }
+  :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)[disabled] {
     opacity: var(--tui-opacity-disabled);
     cursor: not-allowed;
@@ -2887,21 +3078,24 @@
     background-size: 1em;
   }
   :where(.tui-interface) .tui-inline-choice {
-    --_accent: var(--tui-input-accent, var(--tui-theme-primary-base));
     display: flex;
     align-items: center;
     gap: var(--tui-spacing-xs);
+    cursor: pointer;
   }
-  :where(.tui-interface) .tui-inline-choice input[type=radio],
-  :where(.tui-interface) .tui-inline-choice input[type=checkbox] {
+  :where(.tui-interface) .tui-inline-choice input[type=radio] {
+    --_accent: var(--tui-input-accent, var(--tui-theme-primary-base));
     font-size: 1.15em;
     width: 1em;
     height: 1em;
     flex: 0 0 1em;
     margin: 0;
   }
-  :where(.tui-interface) .tui-inline-choice input[type=radio]:checked,
-  :where(.tui-interface) .tui-inline-choice input[type=checkbox]:checked {
+  :where(.tui-interface) .tui-inline-choice input[type=radio]: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-inline-choice input[type=radio]:checked {
     accent-color: var(--_accent);
   }
   :where(.tui-interface) .tui-inline-choice label {
@@ -2964,7 +3158,7 @@
   }
   :where(.tui-interface) input[type=file] {
     --_bg: var(--tui-input-bg, var(--tui-color-bg-surface));
-    --_fg: var(--tui-input-fg, var(--tui-color-fg-muted));
+    --_fg: var(--tui-input-fg, var(--tui-color-fg));
     --_border: var(--tui-input-border, var(--tui-color-border));
     --_radius: var(--tui-input-radius, var(--tui-radius-md));
     font-size: var(--tui-typography-size-sm);
@@ -3073,7 +3267,7 @@
     --_size: var(--tui-control-height-lg, 3rem);
   }
   .tui-interface .tui-icon-button.is-shape-circle {
-    border-radius: 50%;
+    border-radius: var(--tui-radius-full);
   }
   .tui-interface .tui-icon-button.is-theme-primary {
     --_fg: var(--tui-icon-button-fg, var(--tui-theme-primary-base));
@@ -3254,7 +3448,7 @@
   }
   .tui-modal__dialog .tui-modal__body {
     flex: 1 1 auto;
-    min-height: 4.5rem;
+    min-height: var(--_min-body);
     display: flex;
     flex-direction: column;
   }
@@ -3322,12 +3516,14 @@
   }
   .tui-modal__dialog.is-size-sm {
     --_max: var(--tui-modal-max, 480px);
+    --_min-body: 2rem;
   }
   .tui-modal__dialog.is-size-md {
     --_max: var(--tui-modal-max, 720px);
   }
   .tui-modal__dialog.is-size-lg {
     --_max: var(--tui-modal-max, 960px);
+    --_min-body: 10rem;
   }
   .tui-modal__dialog.is-sticky-head .tui-modal__head {
     position: sticky;
@@ -3566,6 +3762,10 @@
   .tui-interface .tui-move-handle.is-handle:active {
     cursor: grabbing;
   }
+  .tui-interface .tui-move-handle.is-handle.is-size-sm {
+    min-width: 24px;
+    min-height: 24px;
+  }
   @media (forced-colors: active) {
     .tui-move-handle__up,
     .tui-move-handle__down,
@@ -3688,26 +3888,26 @@
       display: flex;
       align-items: center;
     }
-    :where(.tui-interface) .tui-notice.is-layout-inline .tui-notice__inner {
+    :where(:where(.tui-interface) .tui-notice.is-layout-inline) .tui-notice__inner {
       display: flex;
       flex-direction: row;
       align-items: center;
       gap: var(--_padding);
       flex: 1 1 auto;
     }
-    :where(.tui-interface) .tui-notice.is-layout-inline .tui-notice__inner .tui-notice__head {
+    :where(:where(.tui-interface) .tui-notice.is-layout-inline) .tui-notice__inner .tui-notice__head {
       padding-inline-start: var(--_padding);
       padding-block: var(--_padding);
       flex: 0 1 auto;
     }
-    :where(.tui-interface) .tui-notice.is-layout-inline .tui-notice__inner .tui-notice__head:has(.tui-icon:only-child) {
+    :where(:where(.tui-interface) .tui-notice.is-layout-inline) .tui-notice__inner .tui-notice__head:has(.tui-icon:only-child) {
       flex: 0 0 max-content;
     }
-    :where(.tui-interface) .tui-notice.is-layout-inline .tui-notice__inner .tui-notice__body {
+    :where(:where(.tui-interface) .tui-notice.is-layout-inline) .tui-notice__inner .tui-notice__body {
       flex: 2 1 auto;
       padding-block: var(--_padding);
     }
-    :where(.tui-interface) .tui-notice.is-layout-inline .tui-notice__inner .tui-notice__foot {
+    :where(:where(.tui-interface) .tui-notice.is-layout-inline) .tui-notice__inner .tui-notice__foot {
       width: unset;
       flex: 0 1 var(--_foot-basis);
       padding-block: var(--_padding);
@@ -3715,14 +3915,14 @@
       margin-inline-start: auto;
       justify-content: flex-end;
     }
-    :where(.tui-interface) .tui-notice.is-layout-inline .tui-notice__inner .tui-notice__head:not(:first-child),
-    :where(.tui-interface) .tui-notice.is-layout-inline .tui-notice__inner .tui-notice__body:not(:first-child),
-    :where(.tui-interface) .tui-notice.is-layout-inline .tui-notice__inner .tui-notice__foot:not(:first-child) {
+    :where(:where(.tui-interface) .tui-notice.is-layout-inline) .tui-notice__inner .tui-notice__head:not(:first-child),
+    :where(:where(.tui-interface) .tui-notice.is-layout-inline) .tui-notice__inner .tui-notice__body:not(:first-child),
+    :where(:where(.tui-interface) .tui-notice.is-layout-inline) .tui-notice__inner .tui-notice__foot:not(:first-child) {
       padding-inline-start: 0;
     }
-    :where(.tui-interface) .tui-notice.is-layout-inline .tui-notice__inner .tui-notice__head:not(:last-child),
-    :where(.tui-interface) .tui-notice.is-layout-inline .tui-notice__inner .tui-notice__body:not(:last-child),
-    :where(.tui-interface) .tui-notice.is-layout-inline .tui-notice__inner .tui-notice__foot:not(:last-child) {
+    :where(:where(.tui-interface) .tui-notice.is-layout-inline) .tui-notice__inner .tui-notice__head:not(:last-child),
+    :where(:where(.tui-interface) .tui-notice.is-layout-inline) .tui-notice__inner .tui-notice__body:not(:last-child),
+    :where(:where(.tui-interface) .tui-notice.is-layout-inline) .tui-notice__inner .tui-notice__foot:not(:last-child) {
       padding-inline-end: 0;
     }
   }
@@ -3730,18 +3930,27 @@
     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 {
+    :where(:where(.tui-interface) .tui-notice.is-layout-inline.is-dismissible) .tui-notice__inner {
       padding-inline-end: 0;
     }
-    :where(.tui-interface) .tui-notice.is-layout-inline.is-dismissible .tui-notice__inner .tui-notice__head:last-child,
-    :where(.tui-interface) .tui-notice.is-layout-inline.is-dismissible .tui-notice__inner .tui-notice__body:last-child,
-    :where(.tui-interface) .tui-notice.is-layout-inline.is-dismissible .tui-notice__inner .tui-notice__foot:last-child {
+    :where(:where(.tui-interface) .tui-notice.is-layout-inline.is-dismissible) .tui-notice__inner .tui-notice__head:last-child,
+    :where(:where(.tui-interface) .tui-notice.is-layout-inline.is-dismissible) .tui-notice__inner .tui-notice__body:last-child,
+    :where(:where(.tui-interface) .tui-notice.is-layout-inline.is-dismissible) .tui-notice__inner .tui-notice__foot:last-child {
       padding-inline-end: 0;
     }
   }
   :where(.tui-interface) .tui-notice.has-stripe {
-    border-inline-start-width: var(--tui-notice-stripe-width, 4px);
-    border-inline-start-color: var(--_stripe);
+    overflow: hidden;
+    padding-inline-start: var(--tui-notice-stripe-width, 4px);
+  }
+  :where(.tui-interface) .tui-notice.has-stripe::before {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: var(--tui-notice-stripe-width, 4px);
+    background-color: var(--_stripe);
+    z-index: 1;
   }
   :where(.tui-interface) .tui-notice.is-theme-info {
     --_bg: var(--tui-notice-bg, var(--tui-theme-primary-subtlest));
@@ -3937,61 +4146,79 @@
     gap: var(--tui-spacing-xs);
   }
   :where(.tui-interface) .tui-radio-group {
+    --_group-gap: var(--tui-radio-group-gap, var(--tui-spacing-xs));
     display: flex;
     flex-direction: column;
-    gap: var(--tui-spacing-xs);
+    gap: var(--_group-gap);
   }
   :where(.tui-interface) .tui-radio-group.is-horizontal {
     flex-direction: row;
     flex-wrap: wrap;
-    gap: var(--tui-spacing-sm);
+    gap: var(--_group-gap);
   }
   :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));
+    --_border: var(--tui-radio-border, var(--tui-input-border, var(--tui-color-border)));
+    --_bg: var(--tui-radio-bg, var(--tui-color-bg));
+    --_size: var(--tui-radio-size, 1.15em);
+    --_gap: var(--tui-radio-gap, var(--tui-spacing-xs));
+    --_fs: var(--tui-radio-font-size, var(--tui-typography-size-sm));
+    --_label-color: var(--tui-radio-label-color, var(--tui-color-fg));
+    --_desc-color: var(--tui-radio-description-color, var(--tui-color-fg-muted));
+    display: flex;
+    flex-direction: column;
+  }
+  :where(.tui-interface) .tui-radio:has(.tui-radio__control[aria-checked=true]) .tui-radio__indicator {
+    border-color: var(--_accent);
+  }
+  :where(.tui-interface) .tui-radio:has(.tui-radio__control[aria-checked=true]) .tui-radio__indicator::after {
+    transform: scale(1);
+    background-color: var(--_accent);
+  }
+  :where(.tui-interface) .tui-radio__control {
     display: inline-flex;
     align-items: center;
-    gap: var(--tui-spacing-xs);
+    gap: var(--_gap);
     padding: 0;
     border: none;
     background: none;
     font: inherit;
-    font-size: var(--tui-typography-size-sm);
-    color: var(--tui-color-fg);
+    font-size: var(--_fs);
+    color: var(--_label-color);
     cursor: pointer;
     appearance: none;
   }
-  :where(.tui-interface) .tui-radio:focus-visible {
+  :where(.tui-interface) .tui-radio__control:hover:not(:disabled):not([aria-disabled=true]) .tui-radio__indicator {
+    border-color: var(--_accent);
+  }
+  :where(.tui-interface) .tui-radio__control:focus-visible {
     outline: none;
   }
-  :where(.tui-interface) .tui-radio:focus-visible .tui-radio__indicator {
+  :where(.tui-interface) .tui-radio__control: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 {
+  :where(.tui-interface) .tui-radio__control:disabled {
     cursor: not-allowed;
     opacity: var(--tui-opacity-disabled);
+    pointer-events: none;
   }
-  :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__control[aria-disabled=true] {
+    cursor: not-allowed;
   }
   :where(.tui-interface) .tui-radio__indicator {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
-    width: 1.15em;
-    height: 1.15em;
+    width: var(--_size);
+    height: var(--_size);
     border-radius: 50%;
     border: var(--tui-border-width) solid var(--_border);
-    background-color: var(--tui-color-bg);
+    background-color: var(--_bg);
     transition-duration: var(--tui-motion-duration);
     transition-timing-function: var(--tui-motion-timing);
     transition-property: border-color;
@@ -3999,8 +4226,8 @@
   :where(.tui-interface) .tui-radio__indicator::after {
     content: "";
     display: block;
-    width: 0.5em;
-    height: 0.5em;
+    width: calc(var(--_size) * 0.435);
+    height: calc(var(--_size) * 0.435);
     border-radius: 50%;
     background-color: transparent;
     transform: scale(0);
@@ -4013,6 +4240,22 @@
     line-height: 1.25em;
     user-select: none;
   }
+  :where(.tui-interface) .tui-radio__body {
+    padding-inline-start: calc(var(--_size) + var(--_gap));
+  }
+  :where(.tui-interface) .tui-radio__description {
+    display: block;
+    margin: 0;
+    font-size: var(--_fs);
+    color: var(--_desc-color);
+    line-height: var(--tui-typography-line-height);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :where(.tui-interface) .tui-radio__indicator,
+    :where(.tui-interface) .tui-radio__indicator::after {
+      transition: none;
+    }
+  }
   @media (forced-colors: active) {
     :where(.tui-interface) .tui-radio__indicator {
       forced-color-adjust: none;
@@ -4022,10 +4265,10 @@
     :where(.tui-interface) .tui-radio__indicator::after {
       background-color: CanvasText;
     }
-    :where(.tui-interface) .tui-radio[aria-checked=true] .tui-radio__indicator {
+    :where(.tui-interface) .tui-radio:has(.tui-radio__control[aria-checked=true]) .tui-radio__indicator {
       border-color: Highlight;
     }
-    :where(.tui-interface) .tui-radio[aria-checked=true] .tui-radio__indicator::after {
+    :where(.tui-interface) .tui-radio:has(.tui-radio__control[aria-checked=true]) .tui-radio__indicator::after {
       background-color: Highlight;
     }
   }
@@ -4344,22 +4587,28 @@
     --_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-surface));
+    --_bg: var(--tui-segmented-bg, var(--tui-color-bg-muted));
     --_border: var(--tui-segmented-border, transparent);
     display: inline-flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     gap: var(--_gap);
     padding: var(--_padding);
     background: var(--_bg);
     border: var(--tui-border-width) solid var(--_border);
     border-radius: var(--_radius);
   }
+  :where(.tui-interface) .tui-segmented.is-wrap {
+    flex-wrap: wrap;
+  }
   :where(.tui-interface) .tui-segmented.is-vertical {
     flex-direction: column;
   }
   :where(.tui-interface) .tui-segmented[aria-disabled=true] {
     opacity: var(--tui-opacity-disabled);
   }
+  .tui-interface .tui-segmented.is-variant-pill .tui-segmented__item {
+    --_item-fg: var(--tui-segmented-item-fg, var(--tui-color-fg));
+  }
   :where(.tui-interface) .tui-segmented.is-variant-outline {
     --_bg: transparent;
     --_border: var(--tui-segmented-border, var(--tui-color-border));
@@ -4369,6 +4618,7 @@
     --_padding: 0;
     --_gap: var(--tui-segmented-gap, var(--tui-spacing-md));
     border-radius: 0;
+    border-block-end: var(--tui-border-width) solid var(--tui-color-border);
   }
   .tui-interface .tui-segmented__item {
     --_item-padding: var(--tui-segmented-item-padding, var(--tui-spacing-sm) var(--tui-spacing-md));
@@ -4389,9 +4639,9 @@
     background: var(--_item-bg);
     color: var(--_item-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);
     white-space: nowrap;
     cursor: pointer;
     transition-property: background-color, color;
@@ -4416,44 +4666,45 @@
   }
   .tui-interface .tui-segmented.is-variant-outline .tui-segmented__item {
     --_item-radius: var(--tui-segmented-item-radius, var(--tui-radius-full));
-    border: var(--tui-border-width) solid var(--tui-color-border);
+    --_item-border: var(--tui-segmented-border, var(--tui-color-border));
+    --_item-bg-active: var(--tui-segmented-item-bg-active, var(--tui-theme-primary-subtlest));
+    --_item-fg-active: var(--tui-segmented-item-fg-active, var(--tui-theme-primary-strong));
+    border: var(--tui-border-width) solid var(--_item-border);
   }
   .tui-interface .tui-segmented.is-variant-outline .tui-segmented__item[aria-checked=true] {
     border-color: var(--tui-theme-primary-base);
-    background: var(--tui-theme-primary-subtlest);
-    color: var(--tui-theme-primary-strong);
+    background: var(--_item-bg-active);
+    color: var(--_item-fg-active);
   }
   .tui-interface .tui-segmented.is-variant-underline .tui-segmented__item {
     --_item-radius: 0;
     --_item-fg: var(--tui-segmented-item-fg, var(--tui-color-fg));
     --_indicator: var(--tui-segmented-indicator, var(--tui-theme-primary-base));
     --_indicator-size: var(--tui-segmented-indicator-size, 2px);
-    position: relative;
-    padding-bottom: calc(var(--tui-spacing-sm) + var(--_indicator-size));
+    margin-block-end: calc(var(--tui-border-width) * -1);
+    border-bottom: var(--_indicator-size) solid transparent;
   }
-  .tui-interface .tui-segmented.is-variant-underline .tui-segmented__item::after {
-    content: "";
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: var(--_indicator-size);
-    background: transparent;
-    transition: background-color var(--tui-motion-duration) var(--tui-motion-timing);
+  .tui-interface .tui-segmented.is-variant-underline .tui-segmented__item:hover:not([aria-disabled=true]):not([aria-checked=true]) {
+    color: var(--tui-color-fg);
   }
   .tui-interface .tui-segmented.is-variant-underline .tui-segmented__item[aria-checked=true] {
     background: transparent;
     color: var(--tui-color-fg);
-    font-weight: var(--tui-font-weight-semibold, 600);
+    border-bottom-color: var(--_indicator);
   }
-  .tui-interface .tui-segmented.is-variant-underline .tui-segmented__item[aria-checked=true]::after {
-    background: var(--_indicator);
+  .tui-interface .tui-segmented.is-variant-underline .tui-segmented__item:focus-visible {
+    outline-offset: calc(var(--tui-focus-ring-offset) * -1);
   }
   .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);
+    font-size: var(--tui-typography-size-xs);
     min-height: var(--tui-control-height-sm);
   }
+  .tui-interface .tui-segmented.is-size-lg .tui-segmented__item {
+    --_item-padding: var(--tui-spacing-sm) var(--tui-spacing-lg);
+    font-size: var(--tui-typography-size-md);
+    min-height: var(--tui-control-height-lg);
+  }
   :where(.tui-interface) .tui-segmented__item-icon {
     display: inline-flex;
     align-items: center;
@@ -4477,12 +4728,27 @@
     .tui-interface .tui-segmented__item:focus-visible {
       outline: 2px solid CanvasText;
     }
+    .tui-interface .tui-segmented.is-variant-underline .tui-segmented__item[aria-checked=true] {
+      background: transparent;
+      color: CanvasText;
+      border-bottom-color: Highlight;
+      border-bottom-width: 3px;
+    }
+    .tui-interface .tui-segmented.is-variant-outline .tui-segmented__item {
+      border-color: CanvasText;
+    }
+    .tui-interface .tui-segmented.is-variant-outline .tui-segmented__item[aria-checked=true] {
+      background: transparent;
+      color: CanvasText;
+      border-color: Highlight;
+      border-width: 2px;
+    }
   }
   :where(.tui-interface) .tui-switch {
     display: inline-flex;
     align-items: center;
-    gap: var(--tui-spacing-xs);
-    font-size: var(--tui-typography-size-md);
+    gap: var(--tui-switch-gap, var(--tui-spacing-xs));
+    font-size: var(--tui-switch-font-size, var(--tui-typography-size-md));
     cursor: pointer;
     user-select: none;
   }
@@ -4500,12 +4766,17 @@
     font-weight: unset;
     line-height: 1.25em;
     font-size: var(--tui-typography-size-sm);
+    color: var(--tui-switch-label-color, inherit);
     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);
+    --_bg: var(--tui-switch-bg, var(--tui-theme-secondary-soft));
+    --_border: var(--tui-switch-border, var(--_bg));
+    --_thumb-bg: var(--tui-switch-thumb-bg, var(--tui-color-bg));
+    --_track-height: var(--tui-switch-track-height, 1.4285em);
+    --_thumb-size: calc(var(--_track-height) - 4px);
+    font-size: var(--tui-switch-size, var(--tui-typography-size-md));
   }
   :where(.tui-interface) .tui-switch__track.is-size-sm {
     font-size: var(--tui-typography-size-sm);
@@ -4519,10 +4790,10 @@
     align-items: center;
     flex-shrink: 0;
     width: 2.8575em;
-    height: 1.4285em;
+    height: var(--_track-height);
     border-radius: 9999px;
-    border: var(--tui-border-width) solid var(--_track-off);
-    background-color: var(--_track-off);
+    border: var(--tui-border-width) solid var(--_border);
+    background-color: var(--_bg);
     padding: 0;
     cursor: pointer;
     appearance: none;
@@ -4538,24 +4809,30 @@
   :where(.tui-interface) .tui-switch__track:disabled {
     cursor: not-allowed;
   }
-  :where(.tui-interface) .tui-switch__track.is-checked {
+  :where(.tui-interface) .tui-switch__track[aria-checked=true] {
     background-color: var(--_accent);
     border-color: var(--_accent);
   }
+  :where(.tui-interface) .tui-switch__track[aria-invalid=true] {
+    --_border: var(--tui-theme-danger-base);
+  }
+  :where(.tui-interface) .tui-switch__track[aria-invalid=true][aria-checked=true] {
+    border-color: var(--tui-theme-danger-base);
+  }
   :where(.tui-interface) .tui-switch__thumb {
     display: block;
-    width: calc(1.4285em - 4px);
-    height: calc(1.4285em - 4px);
+    width: var(--_thumb-size);
+    height: var(--_thumb-size);
     border-radius: 50%;
-    background-color: var(--tui-color-bg);
+    background-color: var(--_thumb-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-switch__track[aria-checked=true] .tui-switch__thumb {
+    transform: translateX(calc(2.8575em - var(--_thumb-size) - 2px - 2 * var(--tui-border-width)));
   }
   @media (forced-colors: active) {
     :where(.tui-interface) .tui-switch__track {
@@ -4563,20 +4840,27 @@
       border: 2px solid CanvasText;
       background-color: Canvas;
     }
-    :where(.tui-interface) .tui-switch__track.is-checked {
+    :where(.tui-interface) .tui-switch__track[aria-checked=true] {
       background-color: Highlight;
       border-color: Highlight;
     }
     :where(.tui-interface) .tui-switch__track:focus-visible {
-      outline-color: Highlight;
+      outline-color: ButtonText;
+      outline-offset: 3px;
     }
     :where(.tui-interface) .tui-switch__thumb {
       background-color: CanvasText;
     }
-    :where(.tui-interface) .tui-switch__track.is-checked .tui-switch__thumb {
+    :where(.tui-interface) .tui-switch__track[aria-checked=true] .tui-switch__thumb {
       background-color: HighlightText;
     }
   }
+  @media (prefers-reduced-motion: reduce) {
+    :where(.tui-interface) .tui-switch__track,
+    :where(.tui-interface) .tui-switch__thumb {
+      transition: none;
+    }
+  }
   :where(.tui-interface) .tui-sidebar {
     --_width: var(--tui-sidebar-width, 320px);
     --_bg: var(--tui-sidebar-bg, var(--tui-color-bg-surface));
@@ -5096,7 +5380,6 @@
   }
   :where(.tui-interface) .tui-textarea {
     min-height: calc(4em + 2 * var(--_py));
-    padding-inline: 0.5em;
     font-family: inherit;
     line-height: 1.4;
   }
@@ -5909,8 +6192,7 @@
   .tui-interface ul.tui-inline-flex,
   .tui-interface ul.tui-flex {
     list-style: none !important;
-    padding: 0 !important;
-    margin: 0 !important;
+    padding-inline-start: 0 !important;
   }
   .tui-interface ul.tui-grid > li,
   .tui-interface ul.tui-stack > li,
@@ -5918,6 +6200,14 @@
   .tui-interface ul.tui-flex > li {
     list-style: none !important;
   }
+  .tui-interface .tui-list-reset {
+    list-style: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+  .tui-interface .tui-list-reset > li {
+    list-style: none !important;
+  }
   .tui-interface .is-density-none {
     --tui-gap-inline: 0;
     --tui-gap-block: 0;