@tangible/ui 0.0.5 → 0.0.7

package/styles/all.expanded.unlayered.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
@@ -97,6 +98,7 @@
 --tui-combobox-content-border
 --tui-combobox-content-shadow
 --tui-combobox-content-radius
+--tui-combobox-option-radius
 --tui-combobox-option-bg-hover
 --tui-combobox-option-bg-selected
 */
@@ -132,6 +134,7 @@
 --tui-multiselect-content-border
 --tui-multiselect-content-shadow
 --tui-multiselect-content-radius
+--tui-multiselect-option-radius
 --tui-multiselect-option-bg-hover
 --tui-multiselect-option-bg-selected
 --tui-multiselect-chip-bg
@@ -147,6 +150,7 @@
 --tui-select-content-border
 --tui-select-content-shadow
 --tui-select-content-radius
+--tui-select-option-radius
 --tui-select-option-bg-hover
 --tui-select-option-bg-selected
 */
@@ -169,6 +173,11 @@
 /* @tui-tokens
 --tui-modal-z
 --tui-modal-max
+--tui-modal-spacing
+--tui-modal-offset-top
+--tui-modal-offset-bottom
+--tui-modal-offset-start
+--tui-modal-offset-end
 --tui-modal-backdrop
 --tui-modal-bg
 --tui-modal-border
@@ -203,6 +212,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
@@ -234,7 +251,14 @@
 */
 /* @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
@@ -630,6 +654,8 @@
   --tui-radius-lg: 12px;
   --tui-font-size-base: 16px;
   --tui-line: 1.5;
+  --tui-typography-weight-normal: 400;
+  --tui-typography-weight-bold: 700;
   --tui-typography-size: var(--tui-font-size-base);
   --tui-typography-line-height: 1.4;
   --tui-typography-font-family: inherit;
@@ -671,6 +697,13 @@
     text-transform: none;
     letter-spacing: normal;
   }
+  .tui-interface input:focus, .tui-interface input:focus-visible,
+  .tui-interface textarea:focus,
+  .tui-interface textarea:focus-visible,
+  .tui-interface select:focus,
+  .tui-interface select:focus-visible {
+    box-shadow: none;
+  }
 
 
   :where(.tui-interface) .tui-accordion {
@@ -680,7 +713,7 @@
   }
   :where(.tui-interface) .tui-accordion__item {
     --_bg: var(--tui-accordion-bg, var(--tui-color-bg-surface));
-    --_bg-open: var(--tui-accordion-bg-open, var(--_bg));
+    --_bg-open: var(--tui-accordion-bg-open, var(--tui-color-bg-surface));
     --_border: var(--tui-accordion-border, var(--tui-color-border));
     --_divider: var(--tui-accordion-divider, var(--_border));
     --_radius: var(--tui-accordion-radius, var(--tui-radius-md));
@@ -1046,7 +1079,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;
@@ -1065,7 +1097,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);
@@ -1267,7 +1299,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;
@@ -1303,6 +1334,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));
@@ -1314,7 +1346,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);
@@ -1370,40 +1402,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);
@@ -1411,20 +1443,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;
     }
   }
@@ -1791,7 +1823,7 @@
     align-items: center;
   }
   .tui-interface .tui-combobox__input {
-    --_bg: var(--tui-combobox-input-bg, var(--tui-select-trigger-bg, var(--tui-color-bg)));
+    --_bg: var(--tui-combobox-input-bg, var(--tui-select-trigger-bg, var(--tui-color-bg-surface)));
     --_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)));
@@ -1799,7 +1831,7 @@
     appearance: none;
     font: inherit;
     margin: 0;
-    --_fs: var(--tui-typography-size-md);
+    --_fs: var(--tui-control-font-size-md, var(--tui-typography-size-md));
     --_py: var(--tui-spacing-xxs);
     --_height: calc(2em + 2 * var(--_py));
     font-size: var(--_fs);
@@ -1807,11 +1839,11 @@
     min-height: var(--tui-control-height-md, var(--_height));
   }
   .tui-interface .tui-combobox__input.is-size-sm {
-    --_fs: var(--tui-typography-size-sm);
+    --_fs: var(--tui-control-font-size-sm, var(--tui-typography-size-sm));
     min-height: var(--tui-control-height-sm, var(--_height));
   }
   .tui-interface .tui-combobox__input.is-size-lg {
-    --_fs: var(--tui-typography-size-lg);
+    --_fs: var(--tui-control-font-size-lg, var(--tui-typography-size-lg));
     min-height: var(--tui-control-height-lg, var(--_height));
   }
   .tui-interface .tui-combobox__input {
@@ -1914,6 +1946,7 @@
     animation: tui-fadeFromTransparent var(--tui-motion-duration) var(--tui-motion-timing);
   }
   :where(.tui-interface) .tui-combobox__option {
+    --_option-radius: var(--tui-combobox-option-radius, var(--tui-select-option-radius, var(--tui-radius-sm)));
     --_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;
@@ -1921,7 +1954,7 @@
     justify-content: space-between;
     gap: var(--tui-spacing-xs);
     padding: var(--tui-spacing-xs) var(--tui-spacing-sm);
-    border-radius: var(--tui-radius-sm);
+    border-radius: var(--_option-radius);
     cursor: pointer;
     font-size: var(--tui-typography-size-sm);
     line-height: 1.4;
@@ -2200,7 +2233,7 @@
     pointer-events: none;
   }
   .tui-interface .tui-multiselect__trigger {
-    --_bg: var(--tui-multiselect-trigger-bg, var(--tui-color-bg));
+    --_bg: var(--tui-multiselect-trigger-bg, var(--tui-color-bg-surface));
     --_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));
@@ -2209,7 +2242,7 @@
     border: none;
     font: inherit;
     margin: 0;
-    --_fs: var(--tui-typography-size-md);
+    --_fs: var(--tui-control-font-size-md, var(--tui-typography-size-md));
     --_py: var(--tui-spacing-xxs);
     --_height: calc(2em + 2 * var(--_py));
     font-size: var(--_fs);
@@ -2217,11 +2250,11 @@
     min-height: var(--tui-control-height-md, var(--_height));
   }
   .tui-interface .tui-multiselect__trigger.is-size-sm {
-    --_fs: var(--tui-typography-size-sm);
+    --_fs: var(--tui-control-font-size-sm, var(--tui-typography-size-sm));
     min-height: var(--tui-control-height-sm, var(--_height));
   }
   .tui-interface .tui-multiselect__trigger.is-size-lg {
-    --_fs: var(--tui-typography-size-lg);
+    --_fs: var(--tui-control-font-size-lg, var(--tui-typography-size-lg));
     min-height: var(--tui-control-height-lg, var(--_height));
   }
   .tui-interface .tui-multiselect__trigger {
@@ -2368,13 +2401,14 @@
     animation: tui-fadeFromTransparent var(--tui-motion-duration) var(--tui-motion-timing);
   }
   :where(.tui-interface) .tui-multiselect__option {
+    --_option-radius: var(--tui-multiselect-option-radius, var(--tui-radius-sm));
     --_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);
+    border-radius: var(--_option-radius);
     cursor: pointer;
     font-size: var(--tui-typography-size-sm);
     line-height: 1.4;
@@ -2468,7 +2502,7 @@
     }
   }
   .tui-interface .tui-select__trigger {
-    --_bg: var(--tui-select-trigger-bg, var(--tui-color-bg));
+    --_bg: var(--tui-select-trigger-bg, var(--tui-color-bg-surface));
     --_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));
@@ -2477,7 +2511,7 @@
     border: none;
     font: inherit;
     margin: 0;
-    --_fs: var(--tui-typography-size-md);
+    --_fs: var(--tui-control-font-size-md, var(--tui-typography-size-md));
     --_py: var(--tui-spacing-xxs);
     --_height: calc(2em + 2 * var(--_py));
     font-size: var(--_fs);
@@ -2485,11 +2519,11 @@
     min-height: var(--tui-control-height-md, var(--_height));
   }
   .tui-interface .tui-select__trigger.is-size-sm {
-    --_fs: var(--tui-typography-size-sm);
+    --_fs: var(--tui-control-font-size-sm, var(--tui-typography-size-sm));
     min-height: var(--tui-control-height-sm, var(--_height));
   }
   .tui-interface .tui-select__trigger.is-size-lg {
-    --_fs: var(--tui-typography-size-lg);
+    --_fs: var(--tui-control-font-size-lg, var(--tui-typography-size-lg));
     min-height: var(--tui-control-height-lg, var(--_height));
   }
   .tui-interface .tui-select__trigger {
@@ -2601,13 +2635,14 @@
     animation: tui-fadeFromTransparent var(--tui-motion-duration) var(--tui-motion-timing);
   }
   :where(.tui-interface) .tui-select__option {
+    --_option-radius: var(--tui-select-option-radius, var(--tui-radius-sm));
     --_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);
+    border-radius: var(--_option-radius);
     cursor: pointer;
     font-size: var(--tui-typography-size-sm);
     line-height: 1.4;
@@ -2694,13 +2729,13 @@
   input[type=color],
   textarea,
   select) {
-    --_bg: var(--tui-input-bg, var(--tui-color-bg));
+    --_bg: var(--tui-input-bg, var(--tui-color-bg-surface));
     --_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);
+    --_fs: var(--tui-control-font-size-md, var(--tui-typography-size-md));
     --_py: var(--tui-spacing-xxs);
     --_height: calc(2em + 2 * var(--_py));
     font-size: var(--_fs);
@@ -2725,7 +2760,7 @@
   input[type=color],
   textarea,
   select).is-size-sm {
-    --_fs: var(--tui-typography-size-sm);
+    --_fs: var(--tui-control-font-size-sm, var(--tui-typography-size-sm));
     min-height: var(--tui-control-height-sm, var(--_height));
   }
   :where(.tui-interface) :is(.tui-input,
@@ -2746,7 +2781,7 @@
   input[type=color],
   textarea,
   select).is-size-lg {
-    --_fs: var(--tui-typography-size-lg);
+    --_fs: var(--tui-control-font-size-lg, var(--tui-typography-size-lg));
     min-height: var(--tui-control-height-lg, var(--_height));
   }
   :where(.tui-interface) :is(.tui-input,
@@ -2943,7 +2978,7 @@
     padding-inline-end: 0.25em;
   }
   :where(.tui-interface) input[type=file] {
-    --_bg: var(--tui-input-bg, var(--tui-color-bg));
+    --_bg: var(--tui-input-bg, var(--tui-color-bg-surface));
     --_fg: var(--tui-input-fg, var(--tui-color-fg-muted));
     --_border: var(--tui-input-border, var(--tui-color-border));
     --_radius: var(--tui-input-radius, var(--tui-radius-md));
@@ -3017,7 +3052,7 @@
     transition-property: background-color, color, border-color;
   }
   .tui-interface .tui-icon-button .tui-icon {
-    font-size: calc(var(--_size) * 0.5);
+    font-size: calc(var(--_size) * 0.75);
   }
   .tui-interface .tui-icon-button:hover {
     --_bg: var(--_bg-interact);
@@ -3159,6 +3194,11 @@
   .tui-modal {
     --_z: var(--tui-modal-z, var(--tui-layer-modal, 1000));
     --_backdrop: var(--tui-modal-backdrop, var(--tui-color-bg-overlay));
+    --_spacing: var(--tui-modal-spacing, var(--tui-spacing-md));
+    --_offset-top: var(--tui-modal-offset-top, env(safe-area-inset-top, 0px));
+    --_offset-bottom: var(--tui-modal-offset-bottom, env(safe-area-inset-bottom, 0px));
+    --_offset-start: var(--tui-modal-offset-start, env(safe-area-inset-left, 0px));
+    --_offset-end: var(--tui-modal-offset-end, env(safe-area-inset-right, 0px));
     position: fixed;
     inset: 0;
     z-index: var(--_z);
@@ -3167,7 +3207,10 @@
     justify-content: center;
     align-items: flex-start;
     overflow: auto;
-    padding-block: 1rem;
+    padding-block-start: calc(var(--_spacing) + var(--_offset-top));
+    padding-block-end: calc(var(--_spacing) + var(--_offset-bottom));
+    padding-inline-start: calc(var(--_spacing) + var(--_offset-start));
+    padding-inline-end: calc(var(--_spacing) + var(--_offset-end));
   }
   .tui-modal__backdrop {
     position: fixed;
@@ -3194,8 +3237,8 @@
     --_shadow: var(--tui-modal-shadow, var(--tui-shadow-lg));
     position: relative;
     width: 100%;
-    max-inline-size: min(100vw - 2rem, var(--_max));
-    max-block-size: calc(100dvh - 2rem);
+    max-inline-size: var(--_max);
+    max-block-size: calc(100dvh - var(--_spacing) * 2 - var(--_offset-top) - var(--_offset-bottom));
     margin-block: auto;
     overflow: hidden;
     display: flex;
@@ -3264,6 +3307,9 @@
     align-items: flex-start;
     gap: var(--tui-spacing-sm);
   }
+  .tui-modal__dialog .tui-modal__head :is(h1, h2, h3, h4, h5, h6) {
+    margin-block: 0;
+  }
   .tui-modal__dialog .tui-modal__head-icon {
     flex-shrink: 0;
     display: flex;
@@ -3657,26 +3703,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);
@@ -3684,14 +3730,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;
     }
   }
@@ -3699,18 +3745,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));
@@ -3906,61 +3961,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;
@@ -3968,8 +4041,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);
@@ -3982,6 +4055,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;
@@ -3991,10 +4080,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;
     }
   }
@@ -4450,8 +4539,8 @@
   :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;
   }
@@ -4469,12 +4558,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);
@@ -4488,10 +4582,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;
@@ -4507,24 +4601,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 {
@@ -4532,20 +4632,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));
@@ -5048,7 +5155,7 @@
     }
   }
   :where(.tui-interface) .tui-textarea {
-    --_fs: var(--tui-typography-size-md);
+    --_fs: var(--tui-control-font-size-md, var(--tui-typography-size-md));
     --_py: var(--tui-spacing-xxs);
     --_height: calc(2em + 2 * var(--_py));
     font-size: var(--_fs);
@@ -5056,11 +5163,11 @@
     min-height: var(--tui-control-height-md, var(--_height));
   }
   :where(.tui-interface) .tui-textarea.is-size-sm {
-    --_fs: var(--tui-typography-size-sm);
+    --_fs: var(--tui-control-font-size-sm, var(--tui-typography-size-sm));
     min-height: var(--tui-control-height-sm, var(--_height));
   }
   :where(.tui-interface) .tui-textarea.is-size-lg {
-    --_fs: var(--tui-typography-size-lg);
+    --_fs: var(--tui-control-font-size-lg, var(--tui-typography-size-lg));
     min-height: var(--tui-control-height-lg, var(--_height));
   }
   :where(.tui-interface) .tui-textarea {
@@ -5075,11 +5182,11 @@
   }
   :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));
+    --_bg: var(--tui-input-bg, var(--tui-color-bg-surface));
     --_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);
+    --_fs: var(--tui-control-font-size-md, var(--tui-typography-size-md));
     --_py: var(--tui-spacing-xxs);
     --_height: calc(2em + 2 * var(--_py));
     font-size: var(--_fs);
@@ -5087,11 +5194,11 @@
     min-height: var(--tui-control-height-md, var(--_height));
   }
   :where(.tui-interface) .tui-input-group.is-size-sm {
-    --_fs: var(--tui-typography-size-sm);
+    --_fs: var(--tui-control-font-size-sm, var(--tui-typography-size-sm));
     min-height: var(--tui-control-height-sm, var(--_height));
   }
   :where(.tui-interface) .tui-input-group.is-size-lg {
-    --_fs: var(--tui-typography-size-lg);
+    --_fs: var(--tui-control-font-size-lg, var(--tui-typography-size-lg));
     min-height: var(--tui-control-height-lg, var(--_height));
   }
   :where(.tui-interface) .tui-input-group {
@@ -5878,8 +5985,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,
@@ -5887,6 +5993,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;