@optimum-intelligence/opti-ui 0.2.0 → 0.3.0

package/dist/opti-ui.css

@@ -4,6 +4,7 @@
     --oui-font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
     --oui-font-heading: 'Montserrat', 'Poppins', system-ui, sans-serif;
     --oui-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    --oui-font-size-2xs: 0.6875rem;
     --oui-font-size-xs: 0.75rem;
     --oui-font-size-sm: 0.8125rem;
     --oui-font-size-md: 0.9rem;
@@ -36,10 +37,11 @@
     --oui-control-height-md: 2.5rem;
     --oui-control-height-lg: 3rem;
     --oui-control-border-width: 2px;
+    --oui-control-disabled-opacity: 0.5;
     --oui-duration-fast: 0.15s;
     --oui-duration-normal: 0.2s;
     --oui-duration-slow: 0.3s;
-    --oui-ease: ease;
+    --oui-ease: cubic-bezier(0.3, 0, 0.2, 1);
     --oui-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
     --oui-z-dropdown: 50;
     --oui-z-dialog: 100;
@@ -61,7 +63,7 @@
     --oui-color-text: #222222;
     --oui-color-text-strong: var(--oui-color-brand);
     --oui-color-text-muted: color-mix(in srgb, var(--oui-color-brand) 72%, white);
-    --oui-color-text-subtle: color-mix(in srgb, var(--oui-color-text-muted) 72%, transparent);
+    --oui-color-text-subtle: color-mix(in srgb, var(--oui-color-text-muted) 86%, transparent);
     --oui-color-bg: color-mix(in srgb, var(--oui-color-accent) 4%, white);
     --oui-color-surface: #ffffff;
     --oui-color-surface-muted: color-mix(in srgb, var(--oui-color-accent) 4%, white);
@@ -92,15 +94,24 @@
     --oui-color-inverse-hover: color-mix(in srgb, var(--oui-color-accent) 18%, transparent);
     --oui-color-inverse-active: color-mix(in srgb, var(--oui-color-accent) 30%, transparent);
     --oui-color-inverse-border: rgba(255, 255, 255, 0.14);
-    --oui-shadow-sm: 0 1px 2px color-mix(in srgb, var(--oui-color-brand) 6%, transparent);
-    --oui-shadow-card: 0 4px 16px color-mix(in srgb, var(--oui-color-accent) 16%, transparent);
-    --oui-shadow-raised: 0 8px 24px color-mix(in srgb, var(--oui-color-brand) 8%, transparent);
+    --oui-shadow-sm: 0 1px 2px color-mix(in srgb, var(--oui-color-brand) 8%, transparent);
+    --oui-shadow-card:
+      0 1px 2px color-mix(in srgb, var(--oui-color-brand) 6%, transparent),
+      0 6px 18px -2px color-mix(in srgb, var(--oui-color-accent) 16%, transparent);
+    --oui-shadow-raised:
+      0 1px 2px color-mix(in srgb, var(--oui-color-brand) 6%, transparent),
+      0 10px 24px -4px color-mix(in srgb, var(--oui-color-brand) 12%, transparent);
     --oui-shadow-overlay:
-      0 12px 32px color-mix(in srgb, var(--oui-color-brand) 14%, transparent),
-      0 2px 6px color-mix(in srgb, var(--oui-color-brand) 6%, transparent);
-    --oui-shadow-dialog: 0 24px 64px color-mix(in srgb, var(--oui-color-brand) 22%, transparent);
+      0 2px 6px color-mix(in srgb, var(--oui-color-brand) 6%, transparent),
+      0 14px 32px -6px color-mix(in srgb, var(--oui-color-brand) 18%, transparent);
+    --oui-shadow-dialog:
+      0 4px 12px color-mix(in srgb, var(--oui-color-brand) 8%, transparent),
+      0 28px 64px -12px color-mix(in srgb, var(--oui-color-brand) 28%, transparent);
     --oui-focus-ring-color: color-mix(in srgb, var(--oui-color-accent) 32%, transparent);
     --oui-focus-ring: 0 0 0 3px var(--oui-focus-ring-color);
+    --oui-focus-outline-color: var(--oui-color-border-focus);
+    --oui-focus-outline: 2px solid var(--oui-focus-outline-color);
+    --oui-focus-outline-offset: 2px;
   }
   [data-oui-theme=dark],
   [data-oui-theme=dark] .oui-theme:not([data-oui-theme]) {
@@ -125,10 +136,11 @@
     --oui-color-danger-text: #ff9db5;
     --oui-color-inverse: color-mix(in oklab, var(--oui-color-accent) 8%, #0a0810);
     --oui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
-    --oui-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.28);
-    --oui-shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.35);
-    --oui-shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
-    --oui-shadow-dialog: 0 24px 64px rgba(0, 0, 0, 0.6);
+    --oui-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px -2px rgba(0, 0, 0, 0.3);
+    --oui-shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 24px -4px rgba(0, 0, 0, 0.4);
+    --oui-shadow-overlay: 0 14px 32px -6px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04);
+    --oui-shadow-dialog: 0 28px 64px -12px rgba(0, 0, 0, 0.7);
+    --oui-focus-outline-color: var(--oui-color-accent-text);
   }
 }
 @layer oui.base {
@@ -149,6 +161,16 @@
     color: var(--oui-color-text);
     font-family: var(--oui-font-body);
   }
+  .oui-root,
+  .oui-theme {
+    accent-color: var(--oui-color-accent);
+    scrollbar-color: var(--oui-color-border-hover) transparent;
+  }
+  .oui-root ::selection,
+  .oui-theme ::selection {
+    background: var(--oui-color-accent-strong);
+    color: var(--oui-color-text-strong);
+  }
   .oui-visually-hidden {
     position: absolute;
     width: 1px;
@@ -216,11 +238,11 @@
   }
   .oui-accordion__trigger:disabled, .oui-accordion__trigger[data-disabled] {
     cursor: not-allowed;
-    opacity: 0.45;
+    opacity: var(--oui-control-disabled-opacity);
   }
   .oui-accordion__trigger:focus-visible {
-    outline: none;
-    box-shadow: inset 0 0 0 2px var(--oui-color-border-focus);
+    outline: var(--oui-focus-outline);
+    outline-offset: -2px;
   }
   .oui-accordion__trigger:hover .oui-accordion__chevron {
     color: var(--oui-color-text-strong);
@@ -230,7 +252,7 @@
     width: 1.1rem;
     height: 1.1rem;
     color: var(--oui-color-text-muted);
-    transition: transform var(--oui-duration-normal) var(--oui-ease);
+    transition: transform var(--oui-duration-normal) var(--oui-ease-out), color var(--oui-duration-fast) var(--oui-ease);
   }
   [data-panel-open] > .oui-accordion__chevron {
     transform: rotate(180deg);
@@ -305,12 +327,11 @@
   }
   .oui-alert[data-variant=outline] {
     background: var(--oui-color-surface);
-    border-left: 4px solid var(--_tone);
   }
   .oui-alert__icon {
     display: inline-flex;
     flex-shrink: 0;
-    padding-top: 0.15rem;
+    padding-top: calc((1.5em - 1.15rem) / 2);
     color: var(--_tone);
   }
   .oui-alert__icon svg {
@@ -327,7 +348,7 @@
   .oui-alert__title {
     margin: 0;
     color: var(--_tone-text);
-    font-weight: var(--oui-font-weight-bold);
+    font-weight: var(--oui-font-weight-semibold);
   }
   .oui-alert__message {
     color: var(--oui-color-text);
@@ -358,6 +379,7 @@
     --_active: var(--oui-color-inverse-active);
     --_border: var(--oui-color-inverse-border);
     --_icon-bg: color-mix(in srgb, var(--oui-color-on-inverse) 12%, transparent);
+    --_focus: var(--oui-color-on-inverse);
     --_motion: var(--oui-duration-slow) var(--oui-ease-out);
     position: relative;
     display: flex;
@@ -369,6 +391,7 @@
     overflow-x: hidden;
     overflow-y: auto;
     scrollbar-width: thin;
+    scrollbar-color: var(--_border) transparent;
     interpolate-size: allow-keywords;
     transition: width var(--_motion), padding var(--_motion), box-shadow var(--_motion);
     background: var(--oui-navbar-bg, var(--oui-color-inverse));
@@ -381,6 +404,7 @@
     --_active: var(--oui-color-accent-muted);
     --_border: var(--oui-color-border-subtle);
     --_icon-bg: var(--oui-color-accent-subtle);
+    --_focus: var(--oui-focus-outline-color);
     background: var(--oui-navbar-bg, var(--oui-color-surface));
     border-right: 1px solid var(--oui-color-border);
   }
@@ -452,7 +476,7 @@
     min-height: 1rem;
     margin: 0 0.35rem 0.2rem 0.85rem;
     color: var(--_fg-muted);
-    font-size: 0.68rem;
+    font-size: var(--oui-font-size-2xs);
     font-weight: var(--oui-font-weight-bold);
     letter-spacing: 0.1em;
     text-transform: uppercase;
@@ -487,14 +511,14 @@
     text-align: left;
     text-decoration: none;
     cursor: pointer;
-    transition: background-color var(--oui-duration-slow) var(--oui-ease), color var(--oui-duration-normal) var(--oui-ease);
+    transition: background-color var(--oui-duration-normal) var(--oui-ease), color var(--oui-duration-normal) var(--oui-ease);
   }
   .oui-navbar__item:hover {
     background: var(--_hover);
     color: var(--_fg);
   }
   .oui-navbar__item:focus-visible {
-    outline: 2px solid var(--oui-color-accent);
+    outline: 2px solid var(--_focus);
     outline-offset: -2px;
   }
   .oui-navbar__item[data-active] {
@@ -515,7 +539,7 @@
     height: 1.85rem;
     border-radius: var(--oui-radius-sm);
     background: var(--_icon-bg);
-    transition: background-color var(--oui-duration-slow) var(--oui-ease);
+    transition: background-color var(--oui-duration-normal) var(--oui-ease), color var(--oui-duration-normal) var(--oui-ease);
   }
   .oui-navbar__item-icon svg {
     flex-shrink: 0;
@@ -536,8 +560,10 @@
     border-radius: var(--oui-radius-pill);
     background: var(--oui-color-accent);
     color: var(--oui-color-on-accent);
-    font-size: 0.7rem;
+    font-size: var(--oui-font-size-2xs);
     font-weight: var(--oui-font-weight-bold);
+    font-variant-numeric: tabular-nums;
+    line-height: 1.3;
     text-align: center;
   }
   .oui-navbar__footer {
@@ -564,19 +590,22 @@
     background: transparent;
     color: var(--_fg-muted);
     cursor: pointer;
-    transition: top var(--_motion), right var(--_motion), background-color var(--oui-duration-slow) var(--oui-ease), color var(--oui-duration-normal) var(--oui-ease);
+    transition: top var(--_motion), right var(--_motion), background-color var(--oui-duration-normal) var(--oui-ease), color var(--oui-duration-normal) var(--oui-ease);
   }
   .oui-navbar__toggle svg {
     flex-shrink: 0;
     width: 1.1rem;
     height: 1.1rem;
   }
+  .oui-navbar__toggle svg {
+    transition: transform var(--_motion);
+  }
   .oui-navbar__toggle:hover {
     background: var(--_hover);
     color: var(--_fg);
   }
   .oui-navbar__toggle:focus-visible {
-    outline: 2px solid var(--oui-color-accent);
+    outline: 2px solid var(--_focus);
     outline-offset: -2px;
   }
   .oui-navbar[data-collapsed] .oui-navbar__toggle svg,
@@ -696,6 +725,7 @@
     background: transparent;
     color: inherit;
     cursor: pointer;
+    transition: background-color var(--oui-duration-fast) var(--oui-ease);
   }
   .oui-app-shell__menu-button svg,
   .oui-app-shell__drawer-close svg {
@@ -709,7 +739,8 @@
   }
   .oui-app-shell__menu-button:focus-visible,
   .oui-app-shell__drawer-close:focus-visible {
-    outline: 2px solid var(--oui-color-accent);
+    outline: 2px solid currentColor;
+    outline-offset: -2px;
   }
   .oui-app-shell__drawer {
     position: fixed;
@@ -782,6 +813,8 @@
     font-size: clamp(1.5rem, 2.5vw, 2rem);
     font-weight: var(--oui-font-weight-bold);
     line-height: 1.15;
+    letter-spacing: -0.015em;
+    text-wrap: balance;
   }
   .oui-page-header__description {
     max-width: 48rem;
@@ -789,6 +822,7 @@
     color: var(--oui-color-text-muted);
     font-size: var(--oui-font-size-md);
     line-height: 1.55;
+    text-wrap: pretty;
   }
   .oui-page-header__actions {
     display: flex;
@@ -966,7 +1000,7 @@
   .oui-badge[data-size=sm] {
     height: 1.25rem;
     padding: 0 0.45rem;
-    font-size: 0.7rem;
+    font-size: var(--oui-font-size-2xs);
   }
   .oui-badge[data-tone=neutral] {
     border-color: var(--oui-color-border);
@@ -1042,8 +1076,8 @@
     height: 1rem;
   }
   .oui-breadcrumbs__link:focus-visible {
-    outline: none;
-    box-shadow: var(--oui-focus-ring);
+    outline: var(--oui-focus-outline);
+    outline-offset: var(--oui-focus-outline-offset);
   }
   .oui-breadcrumbs__link:hover:not([data-current]) {
     color: var(--oui-color-text-strong);
@@ -1091,7 +1125,7 @@
     cursor: pointer;
     user-select: none;
     -webkit-tap-highlight-color: transparent;
-    transition: background-color var(--oui-duration-normal) var(--oui-ease), border-color var(--oui-duration-normal) var(--oui-ease), color var(--oui-duration-normal) var(--oui-ease), box-shadow var(--oui-duration-normal) var(--oui-ease), transform var(--oui-duration-normal) var(--oui-ease);
+    transition: background-color var(--oui-duration-fast) var(--oui-ease), border-color var(--oui-duration-fast) var(--oui-ease), color var(--oui-duration-fast) var(--oui-ease), transform 0.1s var(--oui-ease);
   }
   .oui-button svg {
     flex-shrink: 0;
@@ -1099,8 +1133,8 @@
     height: 1.1em;
   }
   .oui-button:focus-visible {
-    outline: none;
-    box-shadow: var(--oui-focus-ring);
+    outline: var(--oui-focus-outline);
+    outline-offset: var(--oui-focus-outline-offset);
   }
   @media (hover: hover) {
     .oui-button:hover:not([data-disabled]) {
@@ -1109,11 +1143,16 @@
     }
   }
   .oui-button:active:not([data-disabled]) {
-    transform: translateY(1px);
+    transform: scale(0.97);
   }
   .oui-button[data-disabled]:not([data-loading]) {
     cursor: not-allowed;
-    opacity: 0.45;
+    opacity: var(--oui-control-disabled-opacity);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .oui-button {
+      transition-property: background-color, border-color, color;
+    }
   }
   .oui-button[data-loading] {
     cursor: progress;
@@ -1240,8 +1279,8 @@
     transition: background-color var(--oui-duration-fast) var(--oui-ease);
   }
   .oui-calendar__title-button:focus-visible {
-    outline: none;
-    box-shadow: var(--oui-focus-ring);
+    outline: var(--oui-focus-outline);
+    outline-offset: var(--oui-focus-outline-offset);
   }
   .oui-calendar__title-button:hover {
     background: var(--oui-color-accent-subtle);
@@ -1266,12 +1305,12 @@
     height: 1.1rem;
   }
   .oui-calendar__nav:focus-visible {
-    outline: none;
-    box-shadow: var(--oui-focus-ring);
+    outline: var(--oui-focus-outline);
+    outline-offset: var(--oui-focus-outline-offset);
   }
   .oui-calendar__nav:disabled, .oui-calendar__nav[data-disabled] {
     cursor: not-allowed;
-    opacity: 0.45;
+    opacity: var(--oui-control-disabled-opacity);
   }
   .oui-calendar__nav:hover:not(:disabled) {
     background: var(--oui-color-accent-subtle);
@@ -1291,7 +1330,7 @@
   }
   .oui-calendar__weekday {
     color: var(--oui-color-text-muted);
-    font-size: 0.7rem;
+    font-size: var(--oui-font-size-2xs);
     font-weight: var(--oui-font-weight-bold);
     letter-spacing: 0.06em;
     text-transform: uppercase;
@@ -1329,8 +1368,8 @@
   }
   .oui-calendar__day:focus-visible,
   .oui-calendar__choice:focus-visible {
-    outline: none;
-    box-shadow: var(--oui-focus-ring);
+    outline: var(--oui-focus-outline);
+    outline-offset: var(--oui-focus-outline-offset);
   }
   .oui-calendar__day:hover:not([data-disabled], [data-selected]),
   .oui-calendar__choice:hover:not([data-disabled], [data-selected]) {
@@ -1363,7 +1402,7 @@
   .oui-calendar__day[data-disabled],
   .oui-calendar__choice[data-disabled] {
     cursor: not-allowed;
-    opacity: 0.35;
+    opacity: var(--oui-control-disabled-opacity);
     text-decoration: line-through;
   }
   .oui-calendar__choice {
@@ -1394,7 +1433,7 @@
     background: var(--oui-card-bg, var(--oui-color-surface));
     color: var(--oui-color-text);
     text-decoration: none;
-    transition: transform var(--oui-duration-slow) var(--oui-ease), box-shadow var(--oui-duration-slow) var(--oui-ease), border-color var(--oui-duration-slow) var(--oui-ease);
+    transition: box-shadow var(--oui-duration-normal) var(--oui-ease), border-color var(--oui-duration-normal) var(--oui-ease);
   }
   .oui-card[data-padding=none] {
     --_padding: 0;
@@ -1424,12 +1463,14 @@
     .oui-card[data-interactive]:hover {
       border-color: var(--oui-color-border-hover);
       box-shadow: var(--oui-shadow-raised);
-      transform: translateY(-2px);
     }
   }
+  .oui-card[data-interactive]:active {
+    box-shadow: var(--oui-shadow-sm);
+  }
   .oui-card[data-interactive]:focus-visible {
-    outline: 2px solid var(--oui-color-accent);
-    outline-offset: 2px;
+    outline: var(--oui-focus-outline);
+    outline-offset: var(--oui-focus-outline-offset);
   }
   @media (max-width: 640px) {
     .oui-card[data-padding=md], .oui-card[data-padding=lg] {
@@ -1504,7 +1545,12 @@
   }
   .oui-choice[data-disabled] {
     cursor: not-allowed;
-    opacity: 0.5;
+    opacity: var(--oui-control-disabled-opacity);
+  }
+  .oui-choice[data-disabled] > .oui-checkbox,
+  .oui-choice[data-disabled] > .oui-radio,
+  .oui-choice[data-disabled] > .oui-switch {
+    opacity: 1;
   }
   .oui-choice > .oui-checkbox,
   .oui-choice > .oui-radio,
@@ -1551,8 +1597,8 @@
   }
   .oui-checkbox:focus-visible,
   .oui-radio:focus-visible {
-    outline: none;
-    box-shadow: var(--oui-focus-ring);
+    outline: var(--oui-focus-outline);
+    outline-offset: var(--oui-focus-outline-offset);
   }
   .oui-checkbox[data-size=sm],
   .oui-radio[data-size=sm] {
@@ -1577,7 +1623,7 @@
   .oui-checkbox[data-disabled],
   .oui-radio[data-disabled] {
     cursor: not-allowed;
-    opacity: 0.5;
+    opacity: var(--oui-control-disabled-opacity);
   }
   .oui-checkbox {
     border-radius: var(--oui-checkbox-radius, 5px);
@@ -1627,19 +1673,24 @@
     transition: background-color var(--oui-duration-normal) var(--oui-ease);
   }
   .oui-switch:focus-visible {
-    outline: none;
-    box-shadow: var(--oui-focus-ring);
+    outline: var(--oui-focus-outline);
+    outline-offset: var(--oui-focus-outline-offset);
   }
   .oui-switch[data-size=sm] {
     --_w: var(--oui-switch-width, 2rem);
     --_h: var(--oui-switch-height, 1.15rem);
   }
+  @media (hover: hover) {
+    .oui-switch:hover:not([data-disabled], [data-checked]) {
+      background: color-mix(in srgb, var(--oui-color-text-muted) 44%, transparent);
+    }
+  }
   .oui-switch[data-checked] {
     background: var(--oui-color-accent);
   }
   .oui-switch[data-disabled] {
     cursor: not-allowed;
-    opacity: 0.5;
+    opacity: var(--oui-control-disabled-opacity);
   }
   .oui-switch__thumb {
     --_thumb: calc(var(--_h) - var(--_inset) * 2);
@@ -1687,12 +1738,12 @@
     transition: background-color var(--oui-duration-fast) var(--oui-ease);
   }
   .oui-collapsible__trigger:focus-visible {
-    outline: none;
-    box-shadow: var(--oui-focus-ring);
+    outline: var(--oui-focus-outline);
+    outline-offset: var(--oui-focus-outline-offset);
   }
   .oui-collapsible__trigger:disabled, .oui-collapsible__trigger[data-disabled] {
     cursor: not-allowed;
-    opacity: 0.45;
+    opacity: var(--oui-control-disabled-opacity);
   }
   @media (hover: hover) {
     .oui-collapsible__trigger:hover:not([data-disabled]) {
@@ -1704,7 +1755,7 @@
     width: 1rem;
     height: 1rem;
     color: var(--oui-color-text-muted);
-    transition: transform var(--oui-duration-normal) var(--oui-ease);
+    transition: transform var(--oui-duration-normal) var(--oui-ease-out);
   }
   [data-panel-open] > .oui-collapsible__chevron {
     transform: rotate(90deg);
@@ -1743,7 +1794,8 @@
     background: var(--oui-input-bg, var(--oui-color-surface));
     color: var(--oui-color-text);
     font-size: var(--oui-font-size-md);
-    transition: border-color var(--oui-duration-normal) var(--oui-ease), box-shadow var(--oui-duration-normal) var(--oui-ease), background-color var(--oui-duration-normal) var(--oui-ease);
+    caret-color: var(--oui-color-accent);
+    transition: border-color var(--oui-duration-fast) var(--oui-ease), box-shadow var(--oui-duration-fast) var(--oui-ease), background-color var(--oui-duration-fast) var(--oui-ease);
   }
   @media (hover: hover) {
     .oui-combobox__group:hover:not([data-disabled], :disabled, :focus-within, [data-popup-open]) {
@@ -1780,9 +1832,13 @@
     padding-block: 0.25rem;
     padding-left: 0.35rem;
   }
+  .oui-combobox__group[data-invalid]:focus-within, .oui-combobox__group:has([data-invalid]):focus-within {
+    border-color: var(--oui-color-danger);
+    box-shadow: 0 0 0 3px var(--oui-color-danger-border);
+  }
   .oui-combobox__group[data-disabled] {
     cursor: not-allowed;
-    opacity: 0.55;
+    opacity: var(--oui-control-disabled-opacity);
   }
   .oui-combobox__input {
     flex: 1;
@@ -1801,6 +1857,7 @@
     opacity: 1;
   }
   .oui-combobox__chips .oui-combobox__input {
+    min-width: 2.5rem;
     height: 1.75rem;
     padding-left: 0.4rem;
   }
@@ -1830,13 +1887,16 @@
     height: 1rem;
   }
   .oui-combobox__action:focus-visible {
-    outline: none;
-    box-shadow: var(--oui-focus-ring);
+    outline: var(--oui-focus-outline);
+    outline-offset: var(--oui-focus-outline-offset);
   }
   .oui-combobox__action:hover {
     background: var(--oui-color-accent-subtle);
     color: var(--oui-color-text-strong);
   }
+  .oui-combobox__action svg {
+    transition: transform var(--oui-duration-normal) var(--oui-ease-out);
+  }
   .oui-combobox__action[data-popup-open] svg {
     transform: rotate(180deg);
   }
@@ -1877,12 +1937,17 @@
     background: transparent;
     color: inherit;
     cursor: pointer;
+    transition: background-color var(--oui-duration-fast) var(--oui-ease);
   }
   .oui-combobox__chip-remove svg {
     flex-shrink: 0;
     width: 0.8rem;
     height: 0.8rem;
   }
+  .oui-combobox__chip-remove:focus-visible {
+    outline: var(--oui-focus-outline);
+    outline-offset: -2px;
+  }
   .oui-combobox__chip-remove:hover {
     background: var(--oui-color-accent-strong);
   }
@@ -1904,12 +1969,24 @@
     color: var(--oui-color-text);
     font-size: var(--oui-font-size-md);
     outline: none;
+    scrollbar-width: thin;
+    scrollbar-color: var(--oui-color-border-hover) transparent;
     transform-origin: var(--transform-origin);
     transition: opacity var(--oui-duration-fast) var(--oui-ease), transform var(--oui-duration-fast) var(--oui-ease-out);
   }
+  @media (prefers-reduced-motion: reduce) {
+    .oui-combobox__popup {
+      transition-duration: 0.01ms !important;
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+    }
+  }
   .oui-combobox__popup[data-starting-style], .oui-combobox__popup[data-ending-style] {
     opacity: 0;
-    transform: scale(0.96);
+    transform: scale(0.97);
+  }
+  .oui-combobox__popup[data-ending-style] {
+    transform: none;
   }
   .oui-combobox__popup[data-instant] {
     transition: none;
@@ -1950,7 +2027,7 @@
     color: var(--oui-color-text-strong);
   }
   .oui-combobox__item[data-disabled] {
-    opacity: 0.45;
+    opacity: var(--oui-control-disabled-opacity);
     pointer-events: none;
   }
   .oui-combobox__item {
@@ -2045,6 +2122,7 @@
     font-size: var(--oui-font-size-lg);
     font-weight: var(--oui-font-weight-medium);
     outline: none;
+    caret-color: var(--oui-color-accent);
   }
   .oui-command__input::placeholder {
     color: var(--oui-color-text-subtle);
@@ -2057,10 +2135,12 @@
     overflow-y: auto;
     overscroll-behavior: contain;
     scroll-padding-block: 0.4rem;
+    scrollbar-width: thin;
+    scrollbar-color: var(--oui-color-border-hover) transparent;
   }
   .oui-command__group-label {
     color: var(--oui-color-text-muted);
-    font-size: 0.7rem;
+    font-size: var(--oui-font-size-2xs);
     font-weight: var(--oui-font-weight-bold);
     letter-spacing: 0.08em;
     text-transform: uppercase;
@@ -2089,7 +2169,7 @@
     color: var(--oui-color-text-strong);
   }
   .oui-command__item[data-disabled] {
-    opacity: 0.45;
+    opacity: var(--oui-control-disabled-opacity);
     pointer-events: none;
   }
   .oui-command__item {
@@ -2143,7 +2223,7 @@
     border-radius: var(--oui-radius-xs);
     background: var(--oui-color-surface-muted);
     font-family: var(--oui-font-mono);
-    font-size: 0.7rem;
+    font-size: var(--oui-font-size-2xs);
   }
   .oui-command__empty {
     padding: 2rem 1rem;
@@ -2187,6 +2267,40 @@
     flex: 1 1 14rem;
     max-width: 22rem;
   }
+  .oui-data-table__filters {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 0;
+  }
+  .oui-data-table .oui-data-table__filter {
+    width: auto;
+    min-width: 0;
+    font-size: var(--oui-font-size-sm);
+    font-weight: var(--oui-font-weight-medium);
+  }
+  .oui-data-table .oui-data-table__filter.oui-toggle {
+    border-width: var(--oui-control-border-width);
+  }
+  .oui-data-table .oui-data-table__filter.oui-select__trigger {
+    gap: 0.4rem;
+  }
+  .oui-data-table .oui-data-table__filter .oui-date-picker__trigger {
+    font-size: inherit;
+  }
+  .oui-data-table .oui-data-table__filter .oui-date-picker__trigger[data-placeholder] .oui-date-picker__value {
+    color: var(--oui-color-text-muted);
+  }
+  .oui-data-table .oui-data-table__filter[data-active],
+  .oui-data-table .oui-data-table__filter .oui-date-picker__trigger:not([data-placeholder]) {
+    border-color: var(--oui-color-accent);
+    background: var(--oui-color-accent-subtle);
+    color: var(--oui-color-text-strong);
+  }
+  .oui-data-table__filter-label {
+    color: var(--oui-color-text-muted);
+  }
   .oui-data-table__actions {
     display: flex;
     flex-wrap: wrap;
@@ -2210,6 +2324,111 @@
     outline: 2px solid var(--oui-color-border-focus);
     outline-offset: -2px;
   }
+  .oui-data-table .oui-table__cell[data-mono] {
+    font-family: var(--oui-font-mono);
+    font-size: 0.92em;
+  }
+  .oui-data-table .oui-table__cell[data-muted] {
+    color: var(--oui-color-text-muted);
+  }
+  .oui-data-table .oui-table__row[data-tone] {
+    --_tone: var(--oui-color-accent);
+    --_tone-subtle: var(--oui-color-accent-subtle);
+  }
+  .oui-data-table .oui-table__row[data-tone]:not([data-selected], :hover) {
+    background: var(--_tone-subtle);
+  }
+  .oui-data-table .oui-table__row[data-tone] > :first-child {
+    box-shadow: inset 3px 0 0 var(--_tone);
+  }
+  .oui-data-table .oui-table__row[data-tone][data-tone=info] {
+    --_tone: var(--oui-color-info);
+    --_tone-subtle: var(--oui-color-info-subtle);
+  }
+  .oui-data-table .oui-table__row[data-tone][data-tone=success] {
+    --_tone: var(--oui-color-success);
+    --_tone-subtle: var(--oui-color-success-subtle);
+  }
+  .oui-data-table .oui-table__row[data-tone][data-tone=warning] {
+    --_tone: var(--oui-color-warning);
+    --_tone-subtle: var(--oui-color-warning-subtle);
+  }
+  .oui-data-table .oui-table__row[data-tone][data-tone=danger] {
+    --_tone: var(--oui-color-danger);
+    --_tone-subtle: var(--oui-color-danger-subtle);
+  }
+  .oui-data-table .oui-data-table__row-actions {
+    width: 1%;
+    padding-block: 0;
+    text-align: right;
+    white-space: nowrap;
+  }
+  .oui-data-table__row-actions-list {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.125rem;
+    vertical-align: middle;
+  }
+  .oui-data-table .oui-data-table__action[data-danger]:hover:not([data-disabled]) {
+    background: var(--oui-color-danger-subtle);
+    color: var(--oui-color-danger-text);
+  }
+  .oui-data-table .oui-table__row[data-editing] {
+    background: var(--oui-color-accent-subtle);
+  }
+  .oui-data-table .oui-table__row[data-editing] .oui-table__cell {
+    padding-block: 1px;
+  }
+  .oui-data-table .oui-table__row[data-editing] .oui-input,
+  .oui-data-table .oui-table__row[data-editing] .oui-input-group,
+  .oui-data-table .oui-table__row[data-editing] .oui-select__trigger {
+    width: 0;
+    min-width: 100%;
+  }
+  .oui-data-table .oui-table[data-locked] {
+    table-layout: fixed;
+  }
+  .oui-data-table .oui-table[data-layout=stable] .oui-table__cell {
+    overflow-wrap: break-word;
+  }
+  .oui-data-table .oui-table__cell[data-truncate] {
+    overflow: hidden;
+    max-width: 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .oui-data-table__scroll {
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-gutter: stable;
+  }
+  .oui-data-table .oui-table[data-virtualized] .oui-table__cell:not(.oui-data-table__check, .oui-data-table__row-actions, [data-editor]) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .oui-data-table__spacer td {
+    padding: 0;
+    border: 0;
+  }
+  .oui-data-table__sizer {
+    visibility: hidden;
+  }
+  .oui-data-table__sizer .oui-table__cell {
+    height: 0;
+    padding-block: 0;
+    border: 0;
+    line-height: 0;
+  }
+  .oui-data-table__sizer .oui-data-table__sizer-content,
+  .oui-data-table__sizer .oui-data-table__row-actions-list {
+    overflow: hidden;
+    height: 0;
+  }
+  .oui-data-table__sizer .oui-data-table__row-actions-list {
+    display: flex;
+  }
   .oui-data-table__spinner {
     color: var(--oui-color-text-muted);
     font-size: var(--oui-font-size-sm);
@@ -2236,7 +2455,8 @@
     background: var(--oui-input-bg, var(--oui-color-surface));
     color: var(--oui-color-text);
     font-size: var(--oui-font-size-md);
-    transition: border-color var(--oui-duration-normal) var(--oui-ease), box-shadow var(--oui-duration-normal) var(--oui-ease), background-color var(--oui-duration-normal) var(--oui-ease);
+    caret-color: var(--oui-color-accent);
+    transition: border-color var(--oui-duration-fast) var(--oui-ease), box-shadow var(--oui-duration-fast) var(--oui-ease), background-color var(--oui-duration-fast) var(--oui-ease);
   }
   @media (hover: hover) {
     .oui-date-picker__trigger:hover:not([data-disabled], :disabled, :focus-within, [data-popup-open]) {
@@ -2279,7 +2499,7 @@
   }
   .oui-date-picker__trigger:disabled {
     cursor: not-allowed;
-    opacity: 0.55;
+    opacity: var(--oui-control-disabled-opacity);
   }
   .oui-date-picker__trigger[data-size=sm] {
     --_height: var(--oui-control-height-sm);
@@ -2370,7 +2590,7 @@
     color: var(--oui-color-text-strong);
   }
   .oui-date-range-picker__preset[data-disabled] {
-    opacity: 0.45;
+    opacity: var(--oui-control-disabled-opacity);
     pointer-events: none;
   }
   .oui-date-range-picker__preset {
@@ -2382,8 +2602,8 @@
     cursor: pointer;
   }
   .oui-date-range-picker__preset:focus-visible {
-    outline: none;
-    box-shadow: var(--oui-focus-ring);
+    outline: var(--oui-focus-outline);
+    outline-offset: var(--oui-focus-outline-offset);
   }
   .oui-date-range-picker__preset:hover:not(:disabled) {
     background: var(--oui-color-accent-subtle);
@@ -2395,7 +2615,7 @@
   }
   .oui-date-range-picker__preset:disabled {
     cursor: not-allowed;
-    opacity: 0.45;
+    opacity: var(--oui-control-disabled-opacity);
   }
 }
 @layer oui.components {
@@ -2440,6 +2660,8 @@
     color: var(--oui-color-text);
     outline: none;
     overscroll-behavior: contain;
+    scrollbar-width: thin;
+    scrollbar-color: var(--oui-color-border-hover) transparent;
     transition: opacity var(--oui-duration-normal) var(--oui-ease), transform var(--oui-duration-slow) var(--oui-ease-out), scale var(--oui-duration-normal) var(--oui-ease);
   }
   @media (prefers-reduced-motion: reduce) {
@@ -2529,12 +2751,15 @@
     font-size: 1.25rem;
     font-weight: var(--oui-font-weight-bold);
     line-height: 1.25;
+    letter-spacing: -0.01em;
+    text-wrap: balance;
   }
   .oui-dialog__description {
     margin: 0;
     color: var(--oui-color-text-muted);
     font-size: var(--oui-font-size-md);
     line-height: 1.55;
+    text-wrap: pretty;
   }
   .oui-dialog__body {
     flex: 1;
@@ -2580,8 +2805,8 @@
     height: 1.1rem;
   }
   .oui-dialog__close:focus-visible {
-    outline: none;
-    box-shadow: var(--oui-focus-ring);
+    outline: var(--oui-focus-outline);
+    outline-offset: var(--oui-focus-outline-offset);
   }
   .oui-dialog__close:hover {
     background: var(--oui-color-accent-subtle);
@@ -2681,6 +2906,7 @@
     font-size: 1.25rem;
     font-weight: var(--oui-font-weight-bold);
     line-height: 1.25;
+    letter-spacing: -0.01em;
     overflow-wrap: anywhere;
   }
   .oui-drawer__description {
@@ -2701,6 +2927,8 @@
     padding: var(--oui-drawer-padding, var(--_padding));
     overflow-y: auto;
     overscroll-behavior: contain;
+    scrollbar-width: thin;
+    scrollbar-color: var(--oui-color-border-hover) transparent;
     background: var(--oui-drawer-body-bg, var(--oui-color-bg));
     font-size: var(--oui-font-size-md);
     line-height: 1.55;
@@ -2783,8 +3011,8 @@
     gap: 0.4rem;
     min-width: 0;
   }
-  .oui-field[data-disabled] {
-    opacity: 0.6;
+  .oui-field[data-disabled] .oui-field__label {
+    color: var(--oui-color-text-muted);
   }
   .oui-field__label {
     display: inline-flex;
@@ -2837,7 +3065,7 @@
     color: var(--oui-color-text-strong);
     font-family: var(--oui-font-body);
     font-size: var(--oui-font-size-md);
-    font-weight: var(--oui-font-weight-bold);
+    font-weight: var(--oui-font-weight-semibold);
   }
   .oui-form {
     display: flex;
@@ -2886,7 +3114,7 @@
   }
   .oui-dropzone[data-disabled] {
     cursor: not-allowed;
-    opacity: 0.55;
+    opacity: var(--oui-control-disabled-opacity);
   }
   .oui-dropzone[data-size=sm] {
     flex-direction: row;
@@ -3019,7 +3247,8 @@
     background: var(--oui-input-bg, var(--oui-color-surface));
     color: var(--oui-color-text);
     font-size: var(--oui-font-size-md);
-    transition: border-color var(--oui-duration-normal) var(--oui-ease), box-shadow var(--oui-duration-normal) var(--oui-ease), background-color var(--oui-duration-normal) var(--oui-ease);
+    caret-color: var(--oui-color-accent);
+    transition: border-color var(--oui-duration-fast) var(--oui-ease), box-shadow var(--oui-duration-fast) var(--oui-ease), background-color var(--oui-duration-fast) var(--oui-ease);
   }
   @media (hover: hover) {
     .oui-input:hover:not([data-disabled], :disabled, :focus-within, [data-popup-open]) {
@@ -3049,11 +3278,11 @@
   }
   .oui-input[data-invalid]:focus {
     border-color: var(--oui-color-danger);
-    box-shadow: 0 0 0 3px var(--oui-color-danger-subtle);
+    box-shadow: 0 0 0 3px var(--oui-color-danger-border);
   }
   .oui-input:disabled, .oui-input[data-disabled] {
     cursor: not-allowed;
-    opacity: 0.55;
+    opacity: var(--oui-control-disabled-opacity);
   }
   .oui-input[data-size=sm] {
     --_height: var(--oui-control-height-sm);
@@ -3099,7 +3328,8 @@
     background: var(--oui-input-bg, var(--oui-color-surface));
     color: var(--oui-color-text);
     font-size: var(--oui-font-size-md);
-    transition: border-color var(--oui-duration-normal) var(--oui-ease), box-shadow var(--oui-duration-normal) var(--oui-ease), background-color var(--oui-duration-normal) var(--oui-ease);
+    caret-color: var(--oui-color-accent);
+    transition: border-color var(--oui-duration-fast) var(--oui-ease), box-shadow var(--oui-duration-fast) var(--oui-ease), background-color var(--oui-duration-fast) var(--oui-ease);
   }
   @media (hover: hover) {
     .oui-input-group:hover:not([data-disabled], :disabled, :focus-within, [data-popup-open]) {
@@ -3127,9 +3357,15 @@
   .oui-input-group:has([data-invalid]) {
     border-color: var(--oui-color-danger);
   }
+  .oui-input-group:has([data-invalid]):focus-within {
+    box-shadow: 0 0 0 3px var(--oui-color-danger-border);
+  }
   .oui-input-group[data-disabled] {
     cursor: not-allowed;
-    opacity: 0.55;
+    opacity: var(--oui-control-disabled-opacity);
+  }
+  .oui-input-group[data-disabled] .oui-input {
+    opacity: 1;
   }
   .oui-input-group[data-size=sm] {
     --_height: var(--oui-control-height-sm);
@@ -3170,8 +3406,8 @@
     transition: color var(--oui-duration-fast) var(--oui-ease), text-decoration-color var(--oui-duration-fast) var(--oui-ease);
   }
   .oui-link:focus-visible {
-    outline: none;
-    box-shadow: var(--oui-focus-ring);
+    outline: var(--oui-focus-outline);
+    outline-offset: var(--oui-focus-outline-offset);
   }
   .oui-link:hover {
     color: var(--oui-color-text-strong);
@@ -3216,12 +3452,24 @@
     color: var(--oui-color-text);
     font-size: var(--oui-font-size-md);
     outline: none;
+    scrollbar-width: thin;
+    scrollbar-color: var(--oui-color-border-hover) transparent;
     transform-origin: var(--transform-origin);
     transition: opacity var(--oui-duration-fast) var(--oui-ease), transform var(--oui-duration-fast) var(--oui-ease-out);
   }
+  @media (prefers-reduced-motion: reduce) {
+    .oui-menu {
+      transition-duration: 0.01ms !important;
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+    }
+  }
   .oui-menu[data-starting-style], .oui-menu[data-ending-style] {
     opacity: 0;
-    transform: scale(0.96);
+    transform: scale(0.97);
+  }
+  .oui-menu[data-ending-style] {
+    transform: none;
   }
   .oui-menu[data-instant] {
     transition: none;
@@ -3254,7 +3502,7 @@
     color: var(--oui-color-text-strong);
   }
   .oui-menu__item[data-disabled] {
-    opacity: 0.45;
+    opacity: var(--oui-control-disabled-opacity);
     pointer-events: none;
   }
   .oui-menu__item[data-danger] {
@@ -3326,7 +3574,7 @@
   }
   .oui-menu__group-label {
     color: var(--oui-color-text-muted);
-    font-size: 0.7rem;
+    font-size: var(--oui-font-size-2xs);
     font-weight: var(--oui-font-weight-bold);
     letter-spacing: 0.08em;
     text-transform: uppercase;
@@ -3353,7 +3601,8 @@
     background: var(--oui-input-bg, var(--oui-color-surface));
     color: var(--oui-color-text);
     font-size: var(--oui-font-size-md);
-    transition: border-color var(--oui-duration-normal) var(--oui-ease), box-shadow var(--oui-duration-normal) var(--oui-ease), background-color var(--oui-duration-normal) var(--oui-ease);
+    caret-color: var(--oui-color-accent);
+    transition: border-color var(--oui-duration-fast) var(--oui-ease), box-shadow var(--oui-duration-fast) var(--oui-ease), background-color var(--oui-duration-fast) var(--oui-ease);
   }
   @media (hover: hover) {
     .oui-number-field__group:hover:not([data-disabled], :disabled, :focus-within, [data-popup-open]) {
@@ -3384,7 +3633,8 @@
     --_height: var(--oui-control-height-lg);
   }
   .oui-number-field__group[data-disabled] {
-    opacity: 0.55;
+    cursor: not-allowed;
+    opacity: var(--oui-control-disabled-opacity);
   }
   .oui-number-field__input {
     flex: 1;
@@ -3394,7 +3644,7 @@
     background: transparent;
     color: inherit;
     font: inherit;
-    font-weight: var(--oui-font-weight-semibold);
+    font-weight: var(--oui-font-weight-medium);
     font-variant-numeric: tabular-nums;
     text-align: center;
     outline: none;
@@ -3428,7 +3678,10 @@
   }
   .oui-number-field__step[data-disabled] {
     cursor: not-allowed;
-    opacity: 0.4;
+    opacity: var(--oui-control-disabled-opacity);
+  }
+  .oui-number-field__group[data-disabled] .oui-number-field__step[data-disabled] {
+    opacity: 1;
   }
 }
 @layer oui.components {
@@ -3489,8 +3742,8 @@
     transition: background-color var(--oui-duration-fast) var(--oui-ease), color var(--oui-duration-fast) var(--oui-ease);
   }
   .oui-pagination__page:focus-visible {
-    outline: none;
-    box-shadow: var(--oui-focus-ring);
+    outline: var(--oui-focus-outline);
+    outline-offset: var(--oui-focus-outline-offset);
   }
   .oui-pagination__page:hover {
     background: var(--oui-color-accent-subtle);
@@ -3524,12 +3777,24 @@
     color: var(--oui-color-text);
     font-size: var(--oui-font-size-md);
     outline: none;
+    scrollbar-width: thin;
+    scrollbar-color: var(--oui-color-border-hover) transparent;
     transform-origin: var(--transform-origin);
     transition: opacity var(--oui-duration-fast) var(--oui-ease), transform var(--oui-duration-fast) var(--oui-ease-out);
   }
+  @media (prefers-reduced-motion: reduce) {
+    .oui-popover {
+      transition-duration: 0.01ms !important;
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+    }
+  }
   .oui-popover[data-starting-style], .oui-popover[data-ending-style] {
     opacity: 0;
-    transform: scale(0.96);
+    transform: scale(0.97);
+  }
+  .oui-popover[data-ending-style] {
+    transform: none;
   }
   .oui-popover[data-instant] {
     transition: none;
@@ -3545,17 +3810,20 @@
   }
   .oui-popover__title {
     margin: 0;
-    color: var(--oui-color-text-muted);
-    font-size: var(--oui-font-size-xs);
-    font-weight: var(--oui-font-weight-bold);
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
+    color: var(--oui-color-text-strong);
+    font-size: var(--oui-font-size-md);
+    font-weight: var(--oui-font-weight-semibold);
+    line-height: 1.35;
   }
   .oui-popover__description {
     margin: 0;
-    color: var(--oui-color-text-strong);
+    color: var(--oui-color-text-muted);
     font-size: var(--oui-font-size-md);
-    line-height: 1.45;
+    line-height: 1.5;
+    text-wrap: pretty;
+  }
+  .oui-popover__title + .oui-popover__description {
+    margin-top: -0.45rem;
   }
   .oui-popover__arrow,
   .oui-preview-card__arrow,
@@ -3637,12 +3905,24 @@
     color: var(--oui-color-text);
     font-size: var(--oui-font-size-md);
     outline: none;
+    scrollbar-width: thin;
+    scrollbar-color: var(--oui-color-border-hover) transparent;
     transform-origin: var(--transform-origin);
     transition: opacity var(--oui-duration-fast) var(--oui-ease), transform var(--oui-duration-fast) var(--oui-ease-out);
   }
+  @media (prefers-reduced-motion: reduce) {
+    .oui-preview-card {
+      transition-duration: 0.01ms !important;
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+    }
+  }
   .oui-preview-card[data-starting-style], .oui-preview-card[data-ending-style] {
     opacity: 0;
-    transform: scale(0.96);
+    transform: scale(0.97);
+  }
+  .oui-preview-card[data-ending-style] {
+    transform: none;
   }
   .oui-preview-card[data-instant] {
     transition: none;
@@ -3704,7 +3984,7 @@
   .oui-progress__value {
     color: var(--oui-color-text-muted);
     font-size: var(--oui-font-size-sm);
-    font-weight: var(--oui-font-weight-semibold);
+    font-weight: var(--oui-font-weight-medium);
     font-variant-numeric: tabular-nums;
   }
   .oui-progress__track {
@@ -3754,7 +4034,8 @@
     outline: none;
   }
   .oui-scroll-area__viewport:focus-visible {
-    box-shadow: inset 0 0 0 2px var(--oui-color-border-focus);
+    outline: var(--oui-focus-outline);
+    outline-offset: -2px;
   }
   .oui-scroll-area__scrollbar {
     display: flex;
@@ -3794,7 +4075,8 @@
     background: var(--oui-input-bg, var(--oui-color-surface));
     color: var(--oui-color-text);
     font-size: var(--oui-font-size-md);
-    transition: border-color var(--oui-duration-normal) var(--oui-ease), box-shadow var(--oui-duration-normal) var(--oui-ease), background-color var(--oui-duration-normal) var(--oui-ease);
+    caret-color: var(--oui-color-accent);
+    transition: border-color var(--oui-duration-fast) var(--oui-ease), box-shadow var(--oui-duration-fast) var(--oui-ease), background-color var(--oui-duration-fast) var(--oui-ease);
   }
   @media (hover: hover) {
     .oui-select__trigger:hover:not([data-disabled], :disabled, :focus-within, [data-popup-open]) {
@@ -3827,9 +4109,13 @@
   .oui-select__trigger[data-popup-open] {
     border-color: var(--oui-color-accent);
   }
+  .oui-select__trigger[data-invalid]:focus-visible {
+    border-color: var(--oui-color-danger);
+    box-shadow: 0 0 0 3px var(--oui-color-danger-border);
+  }
   .oui-select__trigger[data-disabled] {
     cursor: not-allowed;
-    opacity: 0.55;
+    opacity: var(--oui-control-disabled-opacity);
   }
   .oui-select__trigger[data-size=sm] {
     --_height: var(--oui-control-height-sm);
@@ -3854,7 +4140,7 @@
     display: inline-flex;
     flex-shrink: 0;
     color: var(--oui-color-text-muted);
-    transition: transform var(--oui-duration-normal) var(--oui-ease);
+    transition: transform var(--oui-duration-normal) var(--oui-ease-out);
   }
   .oui-select__icon svg {
     flex-shrink: 0;
@@ -3882,12 +4168,24 @@
     color: var(--oui-color-text);
     font-size: var(--oui-font-size-md);
     outline: none;
+    scrollbar-width: thin;
+    scrollbar-color: var(--oui-color-border-hover) transparent;
     transform-origin: var(--transform-origin);
     transition: opacity var(--oui-duration-fast) var(--oui-ease), transform var(--oui-duration-fast) var(--oui-ease-out);
   }
+  @media (prefers-reduced-motion: reduce) {
+    .oui-select__popup {
+      transition-duration: 0.01ms !important;
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+    }
+  }
   .oui-select__popup[data-starting-style], .oui-select__popup[data-ending-style] {
     opacity: 0;
-    transform: scale(0.96);
+    transform: scale(0.97);
+  }
+  .oui-select__popup[data-ending-style] {
+    transform: none;
   }
   .oui-select__popup[data-instant] {
     transition: none;
@@ -3906,6 +4204,8 @@
     overflow-y: auto;
     overscroll-behavior: contain;
     scroll-padding-block: 0.3rem;
+    scrollbar-width: thin;
+    scrollbar-color: var(--oui-color-border-hover) transparent;
   }
   .oui-select__item {
     box-sizing: border-box;
@@ -3929,14 +4229,13 @@
     color: var(--oui-color-text-strong);
   }
   .oui-select__item[data-disabled] {
-    opacity: 0.45;
+    opacity: var(--oui-control-disabled-opacity);
     pointer-events: none;
   }
   .oui-select__item {
     justify-content: space-between;
   }
   .oui-select__item[data-selected] {
-    background: var(--oui-color-accent-muted);
     color: var(--oui-color-text-strong);
     font-weight: var(--oui-font-weight-semibold);
   }
@@ -3958,7 +4257,7 @@
   }
   .oui-select__group-label {
     color: var(--oui-color-text-muted);
-    font-size: 0.7rem;
+    font-size: var(--oui-font-size-2xs);
     font-weight: var(--oui-font-weight-bold);
     letter-spacing: 0.08em;
     text-transform: uppercase;
@@ -4031,7 +4330,7 @@
     width: 100%;
   }
   .oui-slider[data-disabled] {
-    opacity: 0.5;
+    opacity: var(--oui-control-disabled-opacity);
   }
   .oui-slider__header {
     display: flex;
@@ -4073,10 +4372,16 @@
     background: var(--oui-color-surface);
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
     cursor: grab;
-    transition: box-shadow var(--oui-duration-fast) var(--oui-ease), transform var(--oui-duration-fast) var(--oui-ease);
+    transition: transform var(--oui-duration-fast) var(--oui-ease);
+  }
+  @media (hover: hover) {
+    .oui-slider__thumb:hover:not([data-dragging]) {
+      transform: scale(1.06);
+    }
   }
   .oui-slider__thumb:has(:focus-visible) {
-    box-shadow: var(--oui-focus-ring);
+    outline: var(--oui-focus-outline);
+    outline-offset: var(--oui-focus-outline-offset);
   }
   .oui-slider__thumb[data-dragging] {
     cursor: grabbing;
@@ -4182,8 +4487,9 @@
   .oui-stat__label {
     margin: 0;
     color: var(--oui-color-text-muted);
-    font-size: 0.875rem;
+    font-size: var(--oui-font-size-sm);
     font-weight: var(--oui-font-weight-semibold);
+    line-height: 1.4;
   }
   .oui-stat__icon {
     display: inline-flex;
@@ -4203,8 +4509,10 @@
     height: 1.15rem;
   }
   .oui-stat__body {
-    display: grid;
-    gap: 0.2rem;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 0.15rem 0.45rem;
   }
   .oui-stat__value {
     margin: 0;
@@ -4212,18 +4520,16 @@
     font-family: var(--oui-font-heading);
     font-size: var(--oui-stat-value-size, clamp(1.5rem, 4vw, 2rem));
     font-weight: var(--oui-font-weight-bold);
-    font-variant-numeric: tabular-nums;
     line-height: 1.1;
-    word-break: break-word;
+    letter-spacing: -0.02em;
+    overflow-wrap: anywhere;
   }
   .oui-stat__unit {
     margin: 0;
     color: var(--oui-color-text-muted);
-    font-size: 0.65rem;
-    font-weight: var(--oui-font-weight-bold);
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-    font-weight: var(--oui-font-weight-semibold);
+    font-size: var(--oui-font-size-sm);
+    font-weight: var(--oui-font-weight-medium);
+    line-height: 1.4;
   }
   .oui-stat__footer {
     display: flex;
@@ -4425,7 +4731,7 @@
     width: 100%;
     border-collapse: collapse;
     color: var(--oui-color-text-strong);
-    font-size: 0.875rem;
+    font-size: var(--oui-font-size-md);
   }
   .oui-table[data-density=compact] {
     --_py: 0.4rem;
@@ -4509,6 +4815,7 @@
     letter-spacing: inherit;
     text-transform: inherit;
     cursor: pointer;
+    transition: color var(--oui-duration-fast) var(--oui-ease);
   }
   .oui-table__sort svg {
     flex-shrink: 0;
@@ -4516,11 +4823,12 @@
     height: 0.8rem;
   }
   .oui-table__sort:focus-visible {
-    outline: none;
-    box-shadow: var(--oui-focus-ring);
+    outline: var(--oui-focus-outline);
+    outline-offset: var(--oui-focus-outline-offset);
   }
   .oui-table__sort svg {
     opacity: 0.5;
+    transition: opacity var(--oui-duration-fast) var(--oui-ease);
   }
   .oui-table__sort:hover, .oui-table__sort[data-active] {
     color: var(--oui-color-text-strong);
@@ -4580,7 +4888,7 @@
     white-space: nowrap;
     cursor: pointer;
     user-select: none;
-    transition: color var(--oui-duration-normal) var(--oui-ease);
+    transition: color var(--oui-duration-fast) var(--oui-ease);
   }
   .oui-tabs__tab svg {
     flex-shrink: 0;
@@ -4589,7 +4897,11 @@
   }
   .oui-tabs__tab:disabled, .oui-tabs__tab[data-disabled] {
     cursor: not-allowed;
-    opacity: 0.45;
+    opacity: var(--oui-control-disabled-opacity);
+  }
+  .oui-tabs__tab:focus-visible {
+    outline: var(--oui-focus-outline);
+    outline-offset: -2px;
   }
   .oui-tabs__tab:hover:not([data-disabled]) {
     color: var(--oui-color-text-strong);
@@ -4597,10 +4909,6 @@
   .oui-tabs__tab[data-active] {
     color: var(--oui-color-text-strong);
   }
-  .oui-tabs__tab:focus-visible {
-    outline: none;
-    box-shadow: inset 0 0 0 2px var(--oui-color-border-focus);
-  }
   [data-size=sm] > .oui-tabs__tab {
     height: 2rem;
     padding: 0 0.7rem;
@@ -4628,8 +4936,8 @@
     bottom: -1px;
     left: var(--active-tab-left);
     width: var(--active-tab-width);
-    height: 2.5px;
-    border-radius: 2px;
+    height: 2px;
+    border-radius: 2px 2px 0 0;
     background: var(--oui-color-accent);
   }
   .oui-tabs__list[data-variant=underline][data-orientation=vertical] {
@@ -4645,8 +4953,9 @@
     right: -1px;
     bottom: auto;
     left: auto;
-    width: 2.5px;
+    width: 2px;
     height: var(--active-tab-height);
+    border-radius: 2px 0 0 2px;
   }
   .oui-tabs__list[data-variant=segmented] {
     display: inline-flex;
@@ -4677,7 +4986,8 @@
   }
   .oui-tabs__panel:focus-visible {
     border-radius: var(--oui-radius-sm);
-    box-shadow: var(--oui-focus-ring);
+    outline: var(--oui-focus-outline);
+    outline-offset: var(--oui-focus-outline-offset);
   }
 }
 @layer oui.components {
@@ -4752,7 +5062,7 @@
     padding-right: 0.15rem;
   }
   .oui-tag[data-disabled] {
-    opacity: 0.5;
+    opacity: var(--oui-control-disabled-opacity);
   }
   .oui-tag__label {
     overflow: hidden;
@@ -4779,8 +5089,8 @@
     height: 0.8rem;
   }
   .oui-tag__remove:focus-visible {
-    outline: none;
-    box-shadow: var(--oui-focus-ring);
+    outline: var(--oui-focus-outline);
+    outline-offset: -2px;
   }
   .oui-tag__remove:hover:not(:disabled) {
     background: color-mix(in srgb, currentColor 14%, transparent);
@@ -4888,12 +5198,14 @@
   .oui-toast[data-type=danger] {
     --_tone: var(--oui-color-danger);
   }
-  .oui-toast[data-type]:not([data-type=neutral]) {
-    border-left: 4px solid var(--_tone);
-  }
   .oui-toast:focus-visible {
-    outline: none;
-    box-shadow: var(--oui-shadow-overlay), var(--oui-focus-ring);
+    outline: var(--oui-focus-outline);
+    outline-offset: var(--oui-focus-outline-offset);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .oui-toast {
+      transition-duration: 0.01ms;
+    }
   }
   .oui-toast-viewport[data-placement^=top] .oui-toast {
     top: 0;
@@ -4927,7 +5239,8 @@
   }
   .oui-toast__icon {
     display: inline-flex;
-    padding-top: 0.1rem;
+    flex-shrink: 0;
+    padding-top: calc((var(--oui-font-size-md) * 1.35 - 1.1rem) / 2);
     color: var(--_tone);
   }
   .oui-toast__icon svg {
@@ -4945,7 +5258,7 @@
     margin: 0;
     color: var(--oui-color-text-strong);
     font-size: var(--oui-font-size-md);
-    font-weight: var(--oui-font-weight-bold);
+    font-weight: var(--oui-font-weight-semibold);
     line-height: 1.35;
   }
   .oui-toast__description {
@@ -4967,13 +5280,15 @@
     font-size: var(--oui-font-size-sm);
     font-weight: var(--oui-font-weight-semibold);
     cursor: pointer;
+    transition: border-color var(--oui-duration-fast) var(--oui-ease), background-color var(--oui-duration-fast) var(--oui-ease);
   }
   .oui-toast__action:focus-visible {
-    outline: none;
-    box-shadow: var(--oui-focus-ring);
+    outline: var(--oui-focus-outline);
+    outline-offset: var(--oui-focus-outline-offset);
   }
   .oui-toast__action:hover {
     border-color: var(--oui-color-text-muted);
+    background: var(--oui-color-surface-muted);
   }
   .oui-toast__close {
     display: inline-flex;
@@ -4989,6 +5304,7 @@
     background: transparent;
     color: var(--oui-color-text-muted);
     cursor: pointer;
+    transition: background-color var(--oui-duration-fast) var(--oui-ease), color var(--oui-duration-fast) var(--oui-ease);
   }
   .oui-toast__close svg {
     flex-shrink: 0;
@@ -4996,8 +5312,8 @@
     height: 0.95rem;
   }
   .oui-toast__close:focus-visible {
-    outline: none;
-    box-shadow: var(--oui-focus-ring);
+    outline: var(--oui-focus-outline);
+    outline-offset: var(--oui-focus-outline-offset);
   }
   .oui-toast__close:hover {
     background: var(--oui-color-accent-subtle);
@@ -5028,7 +5344,7 @@
     white-space: nowrap;
     cursor: pointer;
     user-select: none;
-    transition: background-color var(--oui-duration-normal) var(--oui-ease), border-color var(--oui-duration-normal) var(--oui-ease), color var(--oui-duration-normal) var(--oui-ease), box-shadow var(--oui-duration-normal) var(--oui-ease);
+    transition: background-color var(--oui-duration-fast) var(--oui-ease), border-color var(--oui-duration-fast) var(--oui-ease), color var(--oui-duration-fast) var(--oui-ease), box-shadow var(--oui-duration-fast) var(--oui-ease);
   }
   .oui-toggle svg {
     flex-shrink: 0;
@@ -5036,12 +5352,12 @@
     height: 1rem;
   }
   .oui-toggle:focus-visible {
-    outline: none;
-    box-shadow: var(--oui-focus-ring);
+    outline: var(--oui-focus-outline);
+    outline-offset: var(--oui-focus-outline-offset);
   }
   .oui-toggle:disabled, .oui-toggle[data-disabled] {
     cursor: not-allowed;
-    opacity: 0.45;
+    opacity: var(--oui-control-disabled-opacity);
   }
   .oui-toggle[data-size=sm] {
     height: var(--oui-control-height-sm);
@@ -5103,7 +5419,7 @@
     color: var(--oui-color-text-strong);
   }
   .oui-toggle-group[data-variant=segmented] > .oui-toggle:focus-visible {
-    box-shadow: var(--oui-focus-ring);
+    outline-offset: -2px;
   }
 }
 @layer oui.components {
@@ -5171,12 +5487,12 @@
     height: 1rem;
   }
   .oui-toolbar__button:focus-visible {
-    outline: none;
-    box-shadow: var(--oui-focus-ring);
+    outline: var(--oui-focus-outline);
+    outline-offset: var(--oui-focus-outline-offset);
   }
   .oui-toolbar__button:disabled, .oui-toolbar__button[data-disabled] {
     cursor: not-allowed;
-    opacity: 0.45;
+    opacity: var(--oui-control-disabled-opacity);
   }
   @media (hover: hover) {
     .oui-toolbar__button:hover:not([data-disabled]) {
@@ -5198,8 +5514,8 @@
     white-space: nowrap;
   }
   .oui-toolbar__link:focus-visible {
-    outline: none;
-    box-shadow: var(--oui-focus-ring);
+    outline: var(--oui-focus-outline);
+    outline-offset: var(--oui-focus-outline-offset);
   }
   .oui-toolbar__link:hover {
     color: var(--oui-color-text-strong);
@@ -5240,11 +5556,19 @@
     font-weight: var(--oui-font-weight-medium);
     line-height: 1.4;
     transform-origin: var(--transform-origin);
-    transition: opacity var(--oui-duration-fast) var(--oui-ease), transform var(--oui-duration-fast) var(--oui-ease);
+    text-wrap: pretty;
+    transition: opacity var(--oui-duration-fast) var(--oui-ease), transform var(--oui-duration-fast) var(--oui-ease-out);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .oui-tooltip {
+      transition-duration: 0.01ms !important;
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+    }
   }
   .oui-tooltip[data-starting-style], .oui-tooltip[data-ending-style] {
     opacity: 0;
-    transform: scale(0.96);
+    transform: scale(0.97);
   }
   .oui-tooltip[data-instant] {
     transition-duration: 0s;
@@ -5291,22 +5615,25 @@
   }
   .oui-heading[data-size=lg] {
     font-size: clamp(1.5rem, 2.5vw, 2rem);
+    letter-spacing: -0.015em;
   }
   .oui-heading[data-size=xl] {
     font-size: clamp(1.9rem, 3.5vw, 2.6rem);
     line-height: 1.1;
+    letter-spacing: -0.02em;
   }
   .oui-heading[data-size="2xl"] {
     font-size: clamp(2.3rem, 5vw, 3.4rem);
     font-weight: 800;
     line-height: 1.05;
-    letter-spacing: -0.01em;
+    letter-spacing: -0.025em;
   }
   .oui-text {
     margin: 0;
     color: var(--oui-color-text);
     font-family: var(--oui-font-body);
     line-height: 1.55;
+    text-wrap: pretty;
   }
   .oui-text[data-size=xs] {
     font-size: var(--oui-font-size-xs);