@tangible/ui 0.0.3 → 0.0.5

package/styles/all.expanded.css

@@ -23,11 +23,17 @@
 --tui-accordion-bg
 --tui-accordion-bg-open
 --tui-accordion-border
+--tui-accordion-divider
 --tui-accordion-radius
 --tui-accordion-padding
+--tui-accordion-trigger-padding
+--tui-accordion-trigger-bg
+--tui-accordion-trigger-hover
+--tui-accordion-panel-padding
+--tui-accordion-panel-bg
+--tui-accordion-panel-spacing
 --tui-accordion-gap
 --tui-accordion-indicator
---tui-accordion-trigger-hover
 */
 /* @tui-tokens
 --tui-avatar-size
@@ -52,6 +58,7 @@
 --tui-button-bg-interact
 --tui-button-fg-interact
 --tui-button-border-interact
+--tui-button-fg-active
 --tui-control-height-sm
 --tui-control-height-md
 --tui-control-height-lg
@@ -75,6 +82,7 @@
 --tui-chip-border
 --tui-chip-icon
 --tui-chip-radius
+--tui-chip-selected-ring
 */
 /* @tui-tokens
 --tui-chip-group-gap
@@ -176,6 +184,7 @@
 --tui-notice-bg
 --tui-notice-border
 --tui-notice-stripe
+--tui-notice-stripe-width
 --tui-notice-fg
 --tui-notice-radius
 --tui-notice-padding
@@ -297,6 +306,8 @@
   --tui-focus-ring-width: 2px;
   --tui-focus-ring-offset: 2px;
   --tui-focus-ring-color: #2563eb;
+  /* Font Weight */
+  --tui-font-weight-medium: 500;
   /* Border */
   --tui-border-width: 1px;
   /* Z-Index Layers */
@@ -671,10 +682,15 @@
     --_bg: var(--tui-accordion-bg, var(--tui-color-bg-surface));
     --_bg-open: var(--tui-accordion-bg-open, var(--_bg));
     --_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));
     --_padding: var(--tui-accordion-padding, var(--tui-spacing-md));
-    --_indicator: var(--tui-accordion-indicator, currentColor);
+    --_trigger-padding: var(--tui-accordion-trigger-padding, var(--_padding));
+    --_trigger-bg: var(--tui-accordion-trigger-bg, transparent);
     --_trigger-hover: var(--tui-accordion-trigger-hover, var(--tui-color-bg-muted));
+    --_panel-padding: var(--tui-accordion-panel-padding, var(--_padding));
+    --_panel-bg: var(--tui-accordion-panel-bg, transparent);
+    --_indicator: var(--tui-accordion-indicator, currentColor);
     background-color: var(--_bg);
     border: var(--tui-border-width) solid var(--_border);
     border-radius: var(--_radius);
@@ -683,10 +699,10 @@
   :where(.tui-interface) .tui-accordion__item[data-state=open] {
     --_bg: var(--_bg-open);
   }
-  :where(.tui-interface) .tui-accordion__item[data-disabled=true] {
+  :where(.tui-interface) .tui-accordion__item[data-disabled] {
     opacity: var(--tui-opacity-disabled);
   }
-  :where(.tui-interface) .tui-accordion__heading {
+  .tui-interface .tui-accordion__heading {
     margin: 0;
     font: inherit;
   }
@@ -696,10 +712,10 @@
     justify-content: space-between;
     gap: var(--tui-spacing-sm);
     width: 100%;
-    padding: var(--_padding);
+    padding: var(--_trigger-padding);
     border: none;
     border-radius: var(--_radius);
-    background: transparent;
+    background: var(--_trigger-bg);
     color: inherit;
     font: inherit;
     font-weight: var(--tui-font-weight-medium, 500);
@@ -734,7 +750,7 @@
     transition-duration: var(--tui-motion-duration);
     transition-timing-function: var(--tui-motion-timing);
   }
-  [data-state=open] > :where(.tui-interface) .tui-accordion__indicator {
+  :where(.tui-interface) .tui-accordion__trigger[data-state=open] > .tui-accordion__indicator {
     transform: rotate(180deg);
   }
   :where(.tui-interface) .tui-accordion__panel {
@@ -748,9 +764,11 @@
     grid-template-rows: 1fr;
   }
   :where(.tui-interface) .tui-accordion__panel-content {
+    --_panel-spacing: var(--tui-accordion-panel-spacing, var(--_panel-padding));
     min-height: 0;
     overflow: hidden;
-    padding-inline: var(--_padding);
+    padding-inline: var(--_panel-padding);
+    background: var(--_panel-bg);
   }
   :where(.tui-interface) .tui-accordion__panel-content > *:first-child {
     margin-block-start: 0;
@@ -758,10 +776,15 @@
   :where(.tui-interface) .tui-accordion__panel-content > *:last-child {
     margin-block-end: 0;
   }
+  :where(.tui-interface) .tui-accordion__panel-content::before {
+    content: "";
+    display: block;
+    height: var(--_panel-spacing);
+  }
   :where(.tui-interface) .tui-accordion__panel-content::after {
     content: "";
     display: block;
-    height: var(--_padding);
+    height: var(--_panel-spacing);
   }
   :where(.tui-interface) .tui-accordion__panel[data-state=closed] > .tui-accordion__panel-content {
     animation: tui-fadeToTransparent var(--tui-motion-duration) var(--tui-motion-timing) forwards;
@@ -769,6 +792,25 @@
   :where(.tui-interface) .tui-accordion__panel[data-state=open] > .tui-accordion__panel-content {
     animation: tui-fadeFromTransparent var(--tui-motion-duration) var(--tui-motion-timing) forwards;
   }
+  :where(.tui-interface) .tui-accordion__item[data-state=open] > .tui-accordion__panel {
+    border-block-start: var(--tui-border-width) solid var(--_divider);
+  }
+  :where(.tui-interface) .tui-accordion.is-variant-flush {
+    gap: 0;
+    border: var(--tui-border-width) solid var(--tui-accordion-border, var(--tui-color-border));
+    border-radius: var(--tui-accordion-radius, var(--tui-radius-md));
+    overflow: hidden;
+  }
+  :where(.tui-interface) .tui-accordion.is-variant-flush .tui-accordion__item {
+    border: none;
+    border-radius: 0;
+  }
+  :where(.tui-interface) .tui-accordion.is-variant-flush .tui-accordion__item + .tui-accordion__item {
+    border-block-start: var(--tui-border-width) solid var(--_border);
+  }
+  :where(.tui-interface) .tui-accordion.is-variant-flush .tui-accordion__trigger {
+    border-radius: 0;
+  }
   @media (forced-colors: active) {
     :where(.tui-interface) .tui-accordion__item {
       border-color: CanvasText;
@@ -799,7 +841,7 @@
     --_radius: var(--tui-avatar-radius, 50%);
     --_bg: var(--tui-avatar-bg, var(--tui-color-bg-muted));
     --_fg: var(--tui-avatar-fg, var(--tui-color-fg-inverted));
-    --_border: var(--tui-avatar-border, 2px solid var(--tui-color-bg));
+    --_border: var(--tui-avatar-border, none);
     position: relative;
     display: inline-flex;
     align-items: center;
@@ -807,9 +849,10 @@
     width: var(--_size);
     height: var(--_size);
     border-radius: var(--_radius);
+    border: var(--_border);
     background-color: var(--_bg);
     color: var(--_fg);
-    font-weight: 500;
+    font-weight: var(--tui-font-weight-medium, 500);
     font-size: calc(var(--_size) * 0.4);
     line-height: 1;
     flex-shrink: 0;
@@ -952,6 +995,20 @@
   :where(.tui-interface) .tui-avatar-group.is-overlap .tui-avatar {
     box-shadow: 0 0 0 var(--tui-avatar-group-border-width, 2px) var(--tui-avatar-group-border-color, var(--tui-color-bg-surface));
   }
+  .tui-interface[data-theme=dark] .tui-avatar.is-color-amber, .tui-interface[data-theme=dark] .tui-avatar.is-color-lime, .tui-interface[data-theme=dark] .tui-avatar.is-color-cyan,
+  .tui-interface[data-theme=dark] :where(.tui-interface) .tui-avatar.is-color-amber,
+  .tui-interface[data-theme=dark] :where(.tui-interface) .tui-avatar.is-color-lime,
+  .tui-interface[data-theme=dark] :where(.tui-interface) .tui-avatar.is-color-cyan {
+    --_fg: var(--tui-avatar-fg, var(--tui-color-fg-inverted));
+  }
+  @media (prefers-color-scheme: dark) {
+    .tui-interface[data-theme=auto] .tui-avatar.is-color-amber, .tui-interface[data-theme=auto] .tui-avatar.is-color-lime, .tui-interface[data-theme=auto] .tui-avatar.is-color-cyan,
+    .tui-interface[data-theme=auto] :where(.tui-interface) .tui-avatar.is-color-amber,
+    .tui-interface[data-theme=auto] :where(.tui-interface) .tui-avatar.is-color-lime,
+    .tui-interface[data-theme=auto] :where(.tui-interface) .tui-avatar.is-color-cyan {
+      --_fg: var(--tui-avatar-fg, var(--tui-color-fg-inverted));
+    }
+  }
   @media (forced-colors: active) {
     :where(.tui-interface) .tui-avatar {
       background-color: Canvas;
@@ -997,15 +1054,15 @@
     padding-block: 0.575em;
     min-height: var(--tui-control-height-md);
     gap: 0.5em;
+    border-radius: var(--_radius);
+    transition-duration: var(--tui-motion-duration);
+    transition-timing-function: var(--tui-motion-timing);
+    transition-property: border-color, color, background-color;
     background-color: var(--_bg) !important;
     color: var(--_fg) !important;
     border-color: var(--_border) !important;
     border-style: solid;
     border-width: var(--tui-border-width);
-    border-radius: var(--_radius);
-    transition-duration: var(--tui-motion-duration);
-    transition-timing-function: var(--tui-motion-timing);
-    transition-property: border-color, color, background-color;
   }
   .tui-interface .tui-button .tui-icon {
     font-size: inherit;
@@ -1048,6 +1105,12 @@
     display: inline-block;
     animation: tui-spin 0.85s linear infinite;
   }
+  @media (prefers-reduced-motion: reduce) {
+    .tui-interface .tui-button[data-loading=true]::before {
+      animation: none;
+      border-style: dashed;
+    }
+  }
   .tui-interface .tui-button.is-width-full {
     width: 100%;
   }
@@ -1143,6 +1206,7 @@
     --_bg: var(--tui-button-bg, transparent);
     --_fg: var(--tui-button-fg, var(--tui-theme-primary-strong));
     --_border: transparent;
+    text-decoration: underline;
     border-width: 0;
     padding: 0;
   }
@@ -1183,10 +1247,15 @@
       color: LinkText;
       border-color: transparent;
     }
+    .tui-interface .tui-button[disabled], .tui-interface .tui-button.is-disabled {
+      color: GrayText;
+      border-color: GrayText;
+      background-color: Canvas;
+    }
   }
   .tui-interface input[type=file] {
     --_bg: var(--tui-button-bg, var(--tui-theme-primary-base));
-    --_fg: var(--tui-button-fg, var(--tui-color-bg-surface));
+    --_fg: var(--tui-button-fg, var(--tui-color-fg-on-accent));
     --_border: var(--tui-button-border, var(--tui-theme-primary-base));
     --_radius: var(--tui-button-radius, var(--tui-radius-md));
     --_bg-interact: var(--tui-button-bg-interact, var(--tui-theme-primary-stronger));
@@ -1206,13 +1275,13 @@
     padding-block: 0.575em;
     min-height: var(--tui-control-height-md);
     gap: 0.5em;
-    background-color: var(--_bg);
-    color: var(--_fg);
-    border: var(--tui-border-width) solid var(--_border);
     border-radius: var(--_radius);
     transition-duration: var(--tui-motion-duration);
     transition-timing-function: var(--tui-motion-timing);
     transition-property: border-color, color, background-color;
+    background-color: var(--_bg);
+    color: var(--_fg);
+    border: var(--tui-border-width) solid var(--_border);
   }
   .tui-interface input[type=file]:hover::file-selector-button {
     background-color: var(--_bg-interact);
@@ -1236,9 +1305,9 @@
     --_border: var(--tui-card-border, var(--tui-color-border));
     --_border-interact: var(--tui-card-border-interact, var(--tui-theme-primary-base));
     --_radius: var(--tui-card-radius, var(--tui-radius-md));
-    --_shadow: var(--tui-card-shadow, var(--tui-shadow-md));
-    --_shadow-interact: var(--tui-card-shadow-interact, var(--tui-shadow-sm));
-    --_padding: var(--tui-card-padding, var(--tui-spacing-md));
+    --_shadow: var(--tui-card-shadow, var(--tui-shadow-sm));
+    --_shadow-interact: var(--tui-card-shadow-interact, var(--tui-shadow-md));
+    --_padding: var(--tui-card-padding, var(--tui-spacing-lg));
     --_foot-basis: var(--tui-card-foot-basis, 500px);
     container-type: inline-size;
     container-name: tuiCard;
@@ -1367,15 +1436,23 @@
   :where(.tui-interface) .tui-card.has-interaction:hover {
     --_border: var(--_border-interact);
   }
-  :where(.tui-interface) .tui-card.has-interaction:focus, :where(.tui-interface) .tui-card.has-interaction:focus-within {
+  :where(.tui-interface) .tui-card.has-interaction:focus-visible, :where(.tui-interface) .tui-card.has-interaction:has(:focus-visible) {
     --_border: var(--_border-interact);
   }
   :where(.tui-interface) .tui-card.has-interaction:active, :where(.tui-interface) .tui-card.has-interaction.active {
-    --_border: var(--tui-card-border-active, var(--tui-theme-secondary-subtlest));
+    --_border: var(--tui-card-border-active, var(--tui-theme-primary-soft));
+  }
+  :where(.tui-interface) .tui-card .tui-stretched-link:focus {
+    outline: none;
+  }
+  :where(.tui-interface) .tui-card .tui-stretched-link:focus-visible::after {
+    outline: var(--tui-focus-ring-width) solid var(--tui-focus-ring-color);
+    outline-offset: calc(-1 * var(--tui-focus-ring-offset));
+    border-radius: var(--_radius);
   }
-  :where(.tui-interface) .tui-card.has-interaction [disabled],
-  :where(.tui-interface) .tui-card.has-interaction .disabled {
+  :where(.tui-interface) .tui-card[aria-disabled=true] {
     opacity: var(--tui-opacity-disabled);
+    pointer-events: none;
   }
   :where(.tui-interface) .tui-card.is-style-elevated {
     box-shadow: var(--_shadow);
@@ -1464,7 +1541,7 @@
     outline-offset: var(--tui-focus-ring-offset);
   }
   :where(.tui-interface) .tui-chip.is-interactive:is(:active, [aria-pressed=true], .is-selected), :where(.tui-interface) .tui-chip.is-interactive:has(input:checked), :where(.tui-interface) .tui-chip:is(a, button, [role=button]):is(:active, [aria-pressed=true], .is-selected), :where(.tui-interface) .tui-chip:is(a, button, [role=button]):has(input:checked), :where(.tui-interface) .tui-chip:has(input[type=checkbox], input[type=radio]):is(:active, [aria-pressed=true], .is-selected), :where(.tui-interface) .tui-chip:has(input[type=checkbox], input[type=radio]):has(input:checked) {
-    box-shadow: 0 0 0 1px var(--_fg) inset;
+    box-shadow: 0 0 0 var(--tui-chip-selected-ring, 1px) var(--_fg) inset;
     filter: brightness(0.95);
   }
   :where(.tui-interface) .tui-chip.is-interactive:is(a), :where(.tui-interface) .tui-chip:is(a, button, [role=button]):is(a), :where(.tui-interface) .tui-chip:has(input[type=checkbox], input[type=radio]):is(a) {
@@ -1502,12 +1579,21 @@
     --_border: var(--tui-chip-border, var(--tui-theme-danger-subtlest));
     --_icon: var(--tui-chip-icon, var(--tui-theme-danger-base));
   }
-  :where(.tui-interface) .tui-chip.is-style-ghost:not(:is(a, button, [role=button])), :where(.tui-interface) .tui-chip.is-style-ghost:not(:is(:hover, :focus)) {
+  :where(.tui-interface) .tui-chip.is-style-ghost {
     --_bg: transparent;
-  }
-  :where(.tui-interface) .tui-chip.is-style-ghost:not(:is(:focus-visible, :active, [aria-pressed=true], .is-selected)) {
     --_border: transparent;
   }
+  @media (hover: hover) {
+    :where(.tui-interface) .tui-chip.is-style-ghost.is-interactive:hover, :where(.tui-interface) .tui-chip.is-style-ghost:is(a, button, [role=button]):hover, :where(.tui-interface) .tui-chip.is-style-ghost:has(input[type=checkbox], input[type=radio]):hover {
+      --_bg: var(--tui-chip-bg, var(--tui-theme-secondary-subtle));
+    }
+  }
+  :where(.tui-interface) .tui-chip.is-style-ghost.is-interactive:focus, :where(.tui-interface) .tui-chip.is-style-ghost:is(a, button, [role=button]):focus, :where(.tui-interface) .tui-chip.is-style-ghost:has(input[type=checkbox], input[type=radio]):focus {
+    --_bg: var(--tui-chip-bg, var(--tui-theme-secondary-subtle));
+  }
+  :where(.tui-interface) .tui-chip.is-style-ghost:is(:focus-visible, :active, [aria-pressed=true], .is-selected), :where(.tui-interface) .tui-chip.is-style-ghost:has(input:checked) {
+    --_border: var(--tui-chip-border, var(--tui-theme-secondary-subtle));
+  }
   :where(.tui-interface) .tui-chip.is-style-outline {
     --_bg: var(--tui-chip-bg, var(--tui-color-bg-surface));
     --_fg: var(--tui-chip-fg, var(--tui-theme-secondary-base));
@@ -1956,12 +2042,12 @@
   }
   :where(.tui-interface) .tui-dropdown {
     --_bg: var(--tui-dropdown-bg, var(--tui-color-bg-elevated));
-    --_fg: var(--tui-dropdown-fg, var(--tui-color-fg-default));
+    --_fg: var(--tui-dropdown-fg, var(--tui-color-fg));
     --_radius: var(--tui-dropdown-radius, var(--tui-radius-sm));
     --_shadow: var(--tui-dropdown-shadow, var(--tui-shadow-md));
     --_z: var(--tui-dropdown-z, var(--tui-layer-top));
-    --_border: var(--tui-dropdown-border, var(--tui-color-border-default));
-    --_item-bg-hover: var(--tui-dropdown-item-bg-hover, var(--tui-color-bg-subtle));
+    --_border: var(--tui-dropdown-border, var(--tui-color-border));
+    --_item-bg-hover: var(--tui-dropdown-item-bg-hover, var(--tui-color-bg-muted));
     --_item-bg-active: var(--tui-dropdown-item-bg-active, var(--tui-color-bg-muted));
     z-index: var(--_z);
     min-width: var(--tui-dropdown-min-width, 160px);
@@ -1991,16 +2077,21 @@
     --tui-button-fg: inherit;
     --tui-button-border-color: transparent;
   }
-  :where(.tui-interface) .tui-dropdown__item:hover, :where(.tui-interface) .tui-dropdown__item:focus-visible, :where(.tui-interface) .tui-dropdown__item[data-active],
+  :where(.tui-interface) .tui-dropdown__item:hover, :where(.tui-interface) .tui-dropdown__item[data-active],
   :where(.tui-interface) .tui-dropdown .tui-button:hover,
-  :where(.tui-interface) .tui-dropdown .tui-button:focus-visible,
   :where(.tui-interface) .tui-dropdown .tui-button[data-active],
   :where(.tui-interface) .tui-dropdown .tui-icon-button:hover,
-  :where(.tui-interface) .tui-dropdown .tui-icon-button:focus-visible,
   :where(.tui-interface) .tui-dropdown .tui-icon-button[data-active] {
     --tui-button-bg: var(--_item-bg-hover);
     --tui-button-fg: inherit;
-    outline: none;
+  }
+  :where(.tui-interface) .tui-dropdown__item:focus-visible,
+  :where(.tui-interface) .tui-dropdown .tui-button:focus-visible,
+  :where(.tui-interface) .tui-dropdown .tui-icon-button:focus-visible {
+    --tui-button-bg: var(--_item-bg-hover);
+    --tui-button-fg: inherit;
+    outline: var(--tui-focus-ring-width, 2px) solid var(--tui-focus-ring-color, #2563eb);
+    outline-offset: calc(-1 * var(--tui-focus-ring-width, 2px));
   }
   :where(.tui-interface) .tui-dropdown__item:active,
   :where(.tui-interface) .tui-dropdown .tui-button:active,
@@ -2019,6 +2110,25 @@
   :where(.tui-interface) .tui-dropdown .tui-icon-button {
     justify-content: center;
   }
+  :where(.tui-interface) .tui-dropdown__separator {
+    border: none;
+    border-top: 1px solid var(--tui-color-border);
+    margin: var(--tui-spacing-xxs, 4px) 0;
+  }
+  :where(.tui-interface) .tui-dropdown__header {
+    padding: var(--tui-spacing-xs, 8px) var(--tui-spacing-sm, 12px);
+    padding-block-end: var(--tui-spacing-xxs, 4px);
+    font-size: var(--tui-typography-size-xs, 11px);
+    font-weight: var(--tui-font-weight-semibold, 600);
+    color: var(--tui-color-fg-muted);
+    letter-spacing: 0.02em;
+    user-select: none;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :where(.tui-interface) .tui-dropdown {
+      animation: none;
+    }
+  }
   @media (forced-colors: active) {
     :where(.tui-interface) .tui-dropdown {
       background-color: Canvas;
@@ -2507,7 +2617,7 @@
   }
   :where(.tui-interface) .tui-select__option[aria-selected=true] {
     background-color: var(--_bg-selected);
-    font-weight: 500;
+    font-weight: var(--tui-font-weight-medium, 500);
   }
   :where(.tui-interface) .tui-select__option[aria-selected=true]:hover:not([data-disabled]), :where(.tui-interface) .tui-select__option[aria-selected=true][data-highlighted]:not([data-disabled]) {
     background-color: var(--tui-theme-primary-subtle);
@@ -2882,6 +2992,7 @@
     --_radius: var(--tui-icon-button-radius, var(--tui-radius-md));
     --_bg-interact: var(--tui-icon-button-bg-interact, var(--tui-theme-secondary-subtle));
     --_fg-interact: var(--tui-icon-button-fg-interact, var(--tui-color-fg));
+    --_bg-pressed: var(--tui-theme-secondary-soft);
     appearance: none;
     border: none;
     background: none;
@@ -2918,10 +3029,14 @@
     outline: var(--tui-focus-ring-width) solid var(--tui-focus-ring-color);
     outline-offset: var(--tui-focus-ring-offset);
   }
-  .tui-interface .tui-icon-button:is(:active, [aria-pressed=true]) {
+  .tui-interface .tui-icon-button:active {
     --_bg: var(--_bg-interact);
     --_fg: var(--_fg-interact);
   }
+  .tui-interface .tui-icon-button[aria-pressed=true] {
+    --_bg: var(--_bg-pressed);
+    --_fg: var(--_fg-interact);
+  }
   .tui-interface .tui-icon-button:where(:disabled, [aria-disabled=true], .is-disabled) {
     pointer-events: none;
     cursor: not-allowed;
@@ -2937,15 +3052,20 @@
   .tui-interface .tui-icon-button.is-size-lg {
     --_size: var(--tui-control-height-lg, 3rem);
   }
+  .tui-interface .tui-icon-button.is-shape-circle {
+    border-radius: 50%;
+  }
   .tui-interface .tui-icon-button.is-theme-primary {
     --_fg: var(--tui-icon-button-fg, var(--tui-theme-primary-base));
     --_fg-interact: var(--tui-icon-button-fg-interact, var(--tui-theme-primary-strong));
     --_bg-interact: var(--tui-icon-button-bg-interact, var(--tui-theme-primary-subtlest));
+    --_bg-pressed: var(--tui-theme-primary-subtle);
   }
   .tui-interface .tui-icon-button.is-theme-danger {
     --_fg: var(--tui-icon-button-fg, var(--tui-theme-danger-base));
     --_fg-interact: var(--tui-icon-button-fg-interact, var(--tui-theme-danger-strong));
     --_bg-interact: var(--tui-icon-button-bg-interact, var(--tui-theme-danger-subtlest));
+    --_bg-pressed: var(--tui-theme-danger-subtle);
   }
   .tui-interface .tui-icon-button.is-style-outline {
     --_border: var(--tui-icon-button-border, var(--tui-color-border));
@@ -2964,24 +3084,36 @@
   .tui-interface .tui-icon-button.is-style-solid {
     --_bg: var(--tui-icon-button-bg, var(--tui-theme-secondary-subtle));
     --_fg: var(--tui-icon-button-fg, var(--tui-color-fg));
+    --_bg-pressed: var(--tui-theme-secondary-soft);
   }
-  .tui-interface .tui-icon-button.is-style-solid:hover, .tui-interface .tui-icon-button.is-style-solid:focus-visible, .tui-interface .tui-icon-button.is-style-solid:is(:active, [aria-pressed=true]) {
+  .tui-interface .tui-icon-button.is-style-solid:hover, .tui-interface .tui-icon-button.is-style-solid:focus-visible, .tui-interface .tui-icon-button.is-style-solid:active {
     --_bg: var(--tui-icon-button-bg-interact, var(--tui-theme-secondary-soft));
   }
+  .tui-interface .tui-icon-button.is-style-solid[aria-pressed=true] {
+    --_bg: var(--_bg-pressed);
+  }
   .tui-interface .tui-icon-button.is-style-solid.is-theme-primary {
     --_bg: var(--tui-icon-button-bg, var(--tui-theme-primary-base));
     --_fg: var(--tui-icon-button-fg, var(--tui-color-fg-on-accent));
+    --_bg-pressed: var(--tui-theme-primary-stronger);
   }
-  .tui-interface .tui-icon-button.is-style-solid.is-theme-primary:hover, .tui-interface .tui-icon-button.is-style-solid.is-theme-primary:focus-visible, .tui-interface .tui-icon-button.is-style-solid.is-theme-primary:is(:active, [aria-pressed=true]) {
+  .tui-interface .tui-icon-button.is-style-solid.is-theme-primary:hover, .tui-interface .tui-icon-button.is-style-solid.is-theme-primary:focus-visible, .tui-interface .tui-icon-button.is-style-solid.is-theme-primary:active {
     --_bg: var(--tui-icon-button-bg-interact, var(--tui-theme-primary-stronger));
   }
+  .tui-interface .tui-icon-button.is-style-solid.is-theme-primary[aria-pressed=true] {
+    --_bg: var(--_bg-pressed);
+  }
   .tui-interface .tui-icon-button.is-style-solid.is-theme-danger {
     --_bg: var(--tui-icon-button-bg, var(--tui-theme-danger-base));
     --_fg: var(--tui-icon-button-fg, var(--tui-color-fg-on-accent));
+    --_bg-pressed: var(--tui-theme-danger-stronger);
   }
-  .tui-interface .tui-icon-button.is-style-solid.is-theme-danger:hover, .tui-interface .tui-icon-button.is-style-solid.is-theme-danger:focus-visible, .tui-interface .tui-icon-button.is-style-solid.is-theme-danger:is(:active, [aria-pressed=true]) {
+  .tui-interface .tui-icon-button.is-style-solid.is-theme-danger:hover, .tui-interface .tui-icon-button.is-style-solid.is-theme-danger:focus-visible, .tui-interface .tui-icon-button.is-style-solid.is-theme-danger:active {
     --_bg: var(--tui-icon-button-bg-interact, var(--tui-theme-danger-stronger));
   }
+  .tui-interface .tui-icon-button.is-style-solid.is-theme-danger[aria-pressed=true] {
+    --_bg: var(--_bg-pressed);
+  }
   .tui-interface .tui-icon-button[aria-busy=true] {
     pointer-events: none;
   }
@@ -2997,6 +3129,12 @@
     border-radius: 50%;
     animation: tui-spin 0.85s linear infinite;
   }
+  @media (prefers-reduced-motion: reduce) {
+    .tui-interface .tui-icon-button__spinner {
+      animation: none;
+      border-style: dashed;
+    }
+  }
   @media (forced-colors: active) {
     .tui-icon-button {
       forced-color-adjust: none;
@@ -3012,6 +3150,11 @@
       outline: 2px solid Highlight;
       outline-offset: 2px;
     }
+    .tui-icon-button:is(:disabled, [aria-disabled=true]) {
+      color: GrayText;
+      border-color: GrayText;
+      background-color: Canvas;
+    }
   }
   .tui-modal {
     --_z: var(--tui-modal-z, var(--tui-layer-modal, 1000));
@@ -3047,7 +3190,7 @@
     --_bg: var(--tui-modal-bg, var(--tui-color-bg-surface));
     --_border: var(--tui-modal-border, var(--tui-color-border));
     --_radius: var(--tui-modal-radius, var(--tui-radius-lg));
-    --_padding: var(--tui-modal-padding, var(--tui-spacing-md));
+    --_padding: var(--tui-modal-padding, var(--tui-spacing-lg));
     --_shadow: var(--tui-modal-shadow, var(--tui-shadow-lg));
     position: relative;
     width: 100%;
@@ -3068,6 +3211,10 @@
   .tui-modal__dialog:has(> .tui-modal__foot) {
     --_min-foot: 4rem;
   }
+  .tui-modal__dialog:focus-visible {
+    outline: var(--tui-focus-ring-width) solid var(--tui-focus-ring-color);
+    outline-offset: var(--tui-focus-ring-offset);
+  }
   .tui-modal__dialog {
     color: var(--tui-color-fg);
     border-style: solid;
@@ -3102,12 +3249,41 @@
   }
   .tui-modal__dialog .tui-modal__body-inner > p {
     margin: 0;
+    margin-block-end: var(--tui-spacing-md);
+  }
+  .tui-modal__dialog .tui-modal__body-inner > p:last-child {
+    margin-block-end: 0;
   }
   .tui-modal__dialog .tui-modal__head {
     padding-block: var(--_padding);
     padding-inline: var(--_padding);
     width: 100%;
   }
+  .tui-modal__dialog .tui-modal__head.has-icon {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--tui-spacing-sm);
+  }
+  .tui-modal__dialog .tui-modal__head-icon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    height: 1.5em;
+    font-size: var(--tui-typography-size-lg);
+    color: var(--tui-color-fg);
+  }
+  .tui-modal__dialog .tui-modal__head-content {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+  .tui-modal__dialog .tui-modal__head-subtitle {
+    margin-block-start: var(--tui-spacing-xxs);
+    font-size: var(--tui-typography-size-sm);
+    color: var(--tui-color-fg-muted);
+  }
+  .tui-modal__dialog:has(> .tui-modal__close) > .tui-modal__head {
+    padding-inline-end: calc(var(--_padding) + var(--tui-spacing-xl));
+  }
   .tui-modal__dialog .tui-modal__foot {
     padding-block: var(--_padding);
     padding-inline: var(--_padding);
@@ -3331,7 +3507,8 @@
     align-items: center;
     justify-content: center;
     width: auto;
-    min-height: auto;
+    min-width: 32px;
+    min-height: 32px;
     background: none;
     border: none;
     border-radius: var(--tui-radius-sm);
@@ -3345,7 +3522,7 @@
     transition-property: color;
   }
   .tui-interface .tui-move-handle.is-handle .tui-icon {
-    font-size: 24px;
+    font-size: var(--_icon-size);
   }
   .tui-interface .tui-move-handle.is-handle:hover {
     color: var(--_fg-interact);
@@ -3396,7 +3573,7 @@
     --_stripe: var(--tui-notice-stripe, var(--tui-theme-primary-base));
     --_fg: var(--tui-notice-fg, inherit);
     --_radius: var(--tui-notice-radius, var(--tui-radius-md));
-    --_padding: var(--tui-notice-padding, var(--tui-spacing-sm));
+    --_padding: var(--tui-notice-padding, var(--tui-spacing-md));
     --_foot-basis: var(--tui-notice-foot-basis, 500px);
     --_gap: var(--tui-spacing-sm);
     container-type: inline-size;
@@ -3421,6 +3598,7 @@
     justify-content: center;
     line-height: 0;
     font-size: var(--tui-typography-size-xl);
+    color: var(--_icon-color, inherit);
   }
   :where(.tui-interface) .tui-notice__title {
     flex: 1 1 auto;
@@ -3447,6 +3625,10 @@
   }
   :where(.tui-interface) .tui-notice__body > p {
     margin: 0;
+    margin-block-end: var(--tui-spacing-sm);
+  }
+  :where(.tui-interface) .tui-notice__body > p:last-child {
+    margin-block-end: 0;
   }
   :where(.tui-interface) .tui-notice__body a {
     color: var(--tui-theme-primary-strong);
@@ -3514,7 +3696,7 @@
     }
   }
   :where(.tui-interface) .tui-notice.is-dismissible .tui-notice__inner {
-    padding-inline-end: calc(var(--_padding) + 2rem);
+    padding-inline-end: calc(var(--_padding) + var(--tui-control-height-sm));
   }
   @container tuiNotice (width >= 400px) {
     :where(.tui-interface) .tui-notice.is-layout-inline.is-dismissible .tui-notice__inner {
@@ -3527,24 +3709,32 @@
     }
   }
   :where(.tui-interface) .tui-notice.has-stripe {
-    border-inline-start-width: 4px;
+    border-inline-start-width: var(--tui-notice-stripe-width, 4px);
     border-inline-start-color: var(--_stripe);
   }
   :where(.tui-interface) .tui-notice.is-theme-info {
     --_bg: var(--tui-notice-bg, var(--tui-theme-primary-subtlest));
+    --_bg-hover: var(--tui-theme-primary-subtle);
     --_stripe: var(--tui-notice-stripe, var(--tui-theme-primary-base));
+    --_icon-color: var(--tui-theme-primary-base);
   }
   :where(.tui-interface) .tui-notice.is-theme-success {
     --_bg: var(--tui-notice-bg, var(--tui-theme-success-subtlest));
+    --_bg-hover: var(--tui-theme-success-subtle);
     --_stripe: var(--tui-notice-stripe, var(--tui-theme-success-base));
+    --_icon-color: var(--tui-theme-success-base);
   }
   :where(.tui-interface) .tui-notice.is-theme-warning {
     --_bg: var(--tui-notice-bg, var(--tui-theme-warning-subtlest));
+    --_bg-hover: var(--tui-theme-warning-subtle);
     --_stripe: var(--tui-notice-stripe, var(--tui-theme-warning-base));
+    --_icon-color: var(--tui-theme-warning-base);
   }
   :where(.tui-interface) .tui-notice.is-theme-danger {
     --_bg: var(--tui-notice-bg, var(--tui-theme-danger-subtlest));
+    --_bg-hover: var(--tui-theme-danger-subtle);
     --_stripe: var(--tui-notice-stripe, var(--tui-theme-danger-base));
+    --_icon-color: var(--tui-theme-danger-base);
   }
   :where(.tui-interface) .tui-notice.is-style-elevated {
     box-shadow: var(--tui-shadow-md);
@@ -3556,7 +3746,7 @@
     transition-timing-function: var(--tui-motion-timing);
   }
   :where(.tui-interface) .tui-notice.has-interaction:hover {
-    --_bg: var(--tui-color-bg-muted);
+    --_bg: var(--_bg-hover, var(--tui-color-bg-muted));
   }
   :where(.tui-interface) .tui-notice.has-interaction:focus-visible {
     outline: var(--tui-focus-ring-width) solid var(--tui-focus-ring-color);
@@ -3572,20 +3762,23 @@
   }
   :where(.tui-interface) .tui-notice.is-exiting-collapse {
     display: grid;
-    animation: tui-noticeExitCollapse 200ms var(--tui-motion-timing) forwards;
+    animation: tui-noticeExitCollapse var(--tui-motion-duration) var(--tui-motion-timing) forwards;
   }
   :where(.tui-interface) .tui-notice.is-exiting-collapse .tui-notice__inner {
     min-height: 0;
     overflow: hidden;
   }
   :where(.tui-interface) .tui-notice.is-exiting-fade {
-    animation: tui-noticeExitFade 200ms var(--tui-motion-timing) forwards;
+    animation: tui-noticeExitFade var(--tui-motion-duration) var(--tui-motion-timing) forwards;
   }
   @media (prefers-reduced-motion: reduce) {
     :where(.tui-interface) .tui-notice.is-exiting-collapse, :where(.tui-interface) .tui-notice.is-exiting-fade {
       animation: none;
       opacity: 0;
     }
+    :where(.tui-interface) .tui-notice.has-interaction {
+      transition-duration: 0s;
+    }
   }
   @keyframes tui-noticeExitCollapse {
     0% {
@@ -3609,15 +3802,15 @@
   }
   .tui-notice .tui-notice__dismiss {
     position: absolute;
-    inset-block-start: var(--tui-notice-padding, var(--tui-spacing-sm));
-    inset-inline-end: var(--tui-notice-padding, var(--tui-spacing-sm));
+    inset-block-start: var(--tui-notice-padding, var(--tui-spacing-md));
+    inset-inline-end: var(--tui-notice-padding, var(--tui-spacing-md));
   }
   .tui-notice.is-layout-inline .tui-notice__dismiss {
     position: static;
     flex-shrink: 0;
     align-self: center;
     margin-inline-start: var(--tui-spacing-sm);
-    margin-inline-end: var(--tui-notice-padding, var(--tui-spacing-sm));
+    margin-inline-end: var(--tui-notice-padding, var(--tui-spacing-md));
   }
   :where(.tui-interface) .tui-overlap-stack {
     display: inline-flex;
@@ -3651,7 +3844,7 @@
     background-color: var(--_bg);
     color: var(--_fg);
     font-size: 0.75rem;
-    font-weight: 500;
+    font-weight: var(--tui-font-weight-medium, 500);
   }
   @media (forced-colors: active) {
     :where(.tui-interface) .tui-overlap-stack__overflow {
@@ -4387,6 +4580,15 @@
   :where(.tui-interface) .tui-sidebar__header h1, :where(.tui-interface) .tui-sidebar__header h2, :where(.tui-interface) .tui-sidebar__header h3, :where(.tui-interface) .tui-sidebar__header h4, :where(.tui-interface) .tui-sidebar__header h5, :where(.tui-interface) .tui-sidebar__header h6 {
     margin: 0;
   }
+  :where(.tui-interface) .tui-sidebar__footer {
+    flex-shrink: 0;
+    margin-top: auto;
+    padding: var(--_padding);
+    border-top: var(--tui-border-width) solid var(--_border);
+    display: flex;
+    flex-direction: column;
+    gap: var(--tui-spacing-sm);
+  }
   :where(.tui-interface) .tui-sidebar__nav {
     flex: 1;
     overflow-y: auto;
@@ -4405,9 +4607,12 @@
   :where(.tui-interface) .tui-sidebar-drawer__backdrop {
     position: absolute;
     inset: 0;
-    background-color: var(--tui-color-bg-overlay, rgba(0, 0, 0, 0.5));
+    background-color: var(--tui-color-bg-overlay);
     animation: tui-fadeFromTransparent var(--tui-motion-duration) var(--tui-motion-timing);
   }
+  [data-state=closing] > :where(.tui-interface) .tui-sidebar-drawer__backdrop {
+    animation: tui-fadeToTransparent var(--tui-motion-duration) var(--tui-motion-timing) forwards;
+  }
   :where(.tui-interface) .tui-sidebar-drawer__panel {
     position: relative;
     z-index: 1;
@@ -4420,6 +4625,12 @@
   [data-position=right] > :where(.tui-interface) .tui-sidebar-drawer__panel {
     animation: tui-slideInFromRight var(--tui-motion-duration) var(--tui-motion-timing);
   }
+  [data-state=closing][data-position=left] > :where(.tui-interface) .tui-sidebar-drawer__panel {
+    animation: tui-slideOutToLeft var(--tui-motion-duration) var(--tui-motion-timing) forwards;
+  }
+  [data-state=closing][data-position=right] > :where(.tui-interface) .tui-sidebar-drawer__panel {
+    animation: tui-slideOutToRight var(--tui-motion-duration) var(--tui-motion-timing) forwards;
+  }
   :where(.tui-interface) .tui-sidebar-drawer__panel .tui-sidebar {
     height: 100%;
     border-left: none;
@@ -4441,6 +4652,36 @@
       transform: translateX(0);
     }
   }
+  @keyframes tui-slideOutToLeft {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(-100%);
+    }
+  }
+  @keyframes tui-slideOutToRight {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(100%);
+    }
+  }
+  @keyframes tui-fadeToTransparent {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :where(.tui-interface) .tui-sidebar-drawer__backdrop,
+    :where(.tui-interface) .tui-sidebar-drawer__panel {
+      animation: none;
+    }
+  }
   body.tui-sidebar-drawer-open {
     overflow: hidden;
   }
@@ -4659,6 +4900,10 @@
     align-items: stretch;
     flex-wrap: nowrap;
   }
+  :where(.tui-interface) .tui-tabs[data-orientation=vertical] .tui-tabs__tab {
+    text-align: start;
+    justify-content: flex-start;
+  }
   :where(.tui-interface) .tui-tabs__list {
     display: flex;
     flex-wrap: wrap;
@@ -4682,7 +4927,7 @@
     --_fg: var(--tui-tabs-tab-fg, var(--tui-color-fg-muted));
     --_border: var(--tui-tabs-tab-border, transparent);
     --_bg-active: var(--tui-tabs-tab-bg-active, var(--tui-theme-primary-base, currentColor));
-    --_fg-active: var(--tui-tabs-tab-fg-active, var(--tui-color-fg-on-accent, #fff));
+    --_fg-active: var(--tui-tabs-tab-fg-active, var(--tui-color-fg-on-accent));
     --_bg-hover: var(--tui-tabs-tab-bg-hover, var(--tui-color-bg-muted));
     --_indicator: var(--tui-tabs-indicator, var(--tui-theme-primary-base, currentColor));
     --_indicator-size: var(--tui-tabs-indicator-size, 2px);
@@ -4698,9 +4943,9 @@
     background: var(--_bg);
     color: var(--_fg);
     font: inherit;
-    font-size: var(--tui-font-size-sm);
+    font-size: var(--tui-typography-size-sm);
     font-weight: var(--tui-font-weight-medium, 500);
-    line-height: var(--tui-line-height-tight);
+    line-height: var(--tui-line-height-tight, 1.25);
     text-decoration: none;
     white-space: nowrap;
     cursor: pointer;
@@ -4736,6 +4981,7 @@
     --_padding: var(--tui-tabs-tab-padding, var(--tui-spacing-sm) var(--tui-spacing-xs));
     --_radius: 0;
     --_bg-hover: transparent;
+    --_fg-active: var(--tui-tabs-tab-fg-active, var(--tui-color-fg));
     position: relative;
     margin-block-end: calc(var(--tui-border-width) * -1);
     border-bottom: var(--_indicator-size) solid transparent;
@@ -4745,7 +4991,7 @@
     color: var(--tui-color-fg);
   }
   .tui-interface [data-variant=underline] .tui-tabs__tab[data-state=active] {
-    color: var(--tui-color-fg);
+    color: var(--_fg-active);
     border-bottom-color: var(--_indicator);
   }
   .tui-interface [data-variant=underline] .tui-tabs__tab:focus-visible {
@@ -4755,11 +5001,12 @@
     --_radius: var(--tui-tabs-tab-radius, var(--tui-radius-full));
     --_border: var(--tui-tabs-tab-border, var(--tui-color-border));
     --_bg-hover: var(--tui-tabs-tab-bg-hover, var(--tui-color-bg-muted));
+    --_fg-active: var(--tui-tabs-tab-fg-active, var(--tui-theme-primary-strong, currentColor));
     border: var(--tui-border-width) solid var(--_border);
   }
   .tui-interface [data-variant=outline] .tui-tabs__tab[data-state=active] {
     --_border: var(--tui-theme-primary-base, currentColor);
-    color: var(--tui-theme-primary-strong, currentColor);
+    color: var(--_fg-active);
     background: var(--tui-theme-primary-subtlest, transparent);
   }
   :where(.tui-interface) .tui-tabs__panel[data-state=inactive] {
@@ -4855,10 +5102,12 @@
     border: var(--tui-border-width) solid var(--_border);
     border-radius: var(--_radius);
     padding-inline: var(--tui-spacing-xs);
+    cursor: text;
   }
   :where(.tui-interface) .tui-input-group .tui-input,
   :where(.tui-interface) .tui-input-group input {
     border: none;
+    border-radius: 0;
     background: transparent;
     padding-inline: 0;
     padding-block: 0;
@@ -4904,6 +5153,31 @@
   :where(.tui-interface) .tui-input-group__suffix .tui-icon {
     font-size: 1em;
   }
+  :where(.tui-interface) .tui-input-group__prefix.is-text,
+  :where(.tui-interface) .tui-input-group__suffix.is-text {
+    background-color: var(--tui-color-bg-surface);
+    padding-inline: var(--tui-spacing-xs);
+    margin-block: calc(-1 * var(--_py));
+    align-self: stretch;
+    display: inline-flex;
+    align-items: center;
+  }
+  :where(.tui-interface) .tui-input-group__prefix.is-text {
+    border-inline-end: var(--tui-border-width) solid var(--_border);
+    border-start-start-radius: calc(var(--_radius) - var(--tui-border-width));
+    border-end-start-radius: calc(var(--_radius) - var(--tui-border-width));
+  }
+  :where(.tui-interface) .tui-input-group__suffix.is-text {
+    border-inline-start: var(--tui-border-width) solid var(--_border);
+    border-start-end-radius: calc(var(--_radius) - var(--tui-border-width));
+    border-end-end-radius: calc(var(--_radius) - var(--tui-border-width));
+  }
+  :where(.tui-interface) .tui-input-group:has(> .tui-input-group__prefix.is-text) {
+    padding-inline-start: 0;
+  }
+  :where(.tui-interface) .tui-input-group:has(> .tui-input-group__suffix.is-text) {
+    padding-inline-end: 0;
+  }
   :where(.tui-interface) .tui-toolbar {
     --_gap: var(--tui-toolbar-gap, var(--tui-spacing-sm));
     --_padding: var(--tui-toolbar-padding, 0);
@@ -4936,30 +5210,46 @@
   :where(.tui-interface) .tui-tooltip {
     --_bg: var(--tui-tooltip-bg, var(--tui-color-bg-inverted));
     --_fg: var(--tui-tooltip-fg, var(--tui-color-fg-inverted));
-    --_radius: var(--tui-tooltip-radius, var(--tui-radius-xs));
+    --_radius: var(--tui-tooltip-radius, var(--tui-radius-sm));
     --_z: var(--tui-tooltip-z, var(--tui-layer-top));
     z-index: var(--_z);
     width: max-content;
     max-width: min(250px, 100vw - 2 * var(--tui-spacing-xs, 8px));
-    padding: 0.27em 0.54em;
+    padding: 0.35em 0.65em;
     pointer-events: auto;
     background-color: var(--_bg);
     color: var(--_fg);
     border-radius: var(--_radius);
-    font-size: var(--tui-typography-size-xs, 11px);
+    font-size: var(--tui-typography-size-sm, 13px);
     line-height: 1.4;
     animation: tui-fadeFromTransparent var(--tui-motion-duration) var(--tui-motion-timing);
   }
+  :where(.tui-interface) .tui-tooltip.is-theme-light {
+    --_bg: var(--tui-tooltip-bg, var(--tui-color-bg-surface));
+    --_fg: var(--tui-tooltip-fg, var(--tui-color-fg));
+    border: 1px solid var(--tui-color-border);
+  }
+  :where(.tui-interface) .tui-tooltip__arrow {
+    fill: var(--_bg);
+  }
   :where(.tui-interface) [data-tooltip-open]:focus-visible {
     outline: var(--tui-focus-ring-width) solid var(--tui-focus-ring-color);
     outline-offset: var(--tui-focus-ring-offset);
   }
+  @media (prefers-reduced-motion: reduce) {
+    :where(.tui-interface) .tui-tooltip {
+      animation: none;
+    }
+  }
   @media (forced-colors: active) {
     :where(.tui-interface) .tui-tooltip {
       background-color: Canvas;
       color: CanvasText;
       border: 1px solid CanvasText;
     }
+    :where(.tui-interface) .tui-tooltip__arrow {
+      fill: Canvas;
+    }
   }
 }
 @layer utilities {