@tangible/ui 0.0.7 → 0.0.8

package/styles/all.expanded.css

@@ -75,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
@@ -248,6 +255,8 @@
 --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
@@ -332,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 */
@@ -652,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;
@@ -1493,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;
     }
   }
@@ -1863,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);
@@ -1879,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;
@@ -1895,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);
@@ -1989,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;
@@ -2013,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);
@@ -2276,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);
@@ -2287,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;
   }
@@ -2466,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;
@@ -2501,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));
@@ -2545,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);
@@ -2556,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;
   }
@@ -2579,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);
@@ -2594,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 {
@@ -2681,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;
@@ -2705,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);
@@ -2730,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));
@@ -2831,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);
@@ -2853,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;
@@ -2902,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 {
@@ -2979,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);
@@ -3088,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));
@@ -3269,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;
   }
@@ -3337,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;
@@ -3581,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,
@@ -4402,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));
@@ -4427,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));
@@ -4447,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;
@@ -4474,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;
@@ -4535,6 +4728,21 @@
     .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;
@@ -5172,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;
   }