ui-style-kit-css 2.0.4 → 2.2.0

package/styles/interactive-surface-bridge.css

@@ -1,18 +1,21 @@
 /* =========================================================
-   UI Style Kit CSS x Interactive Surface CSS Bridge
+   UI Style Kit CSS x Interactive Surface CSS Bridge (Deprecated)
 
-   This optional bridge maps shared UI Style Kit semantic roles to
-   interactive-surface-css tokens and supplies visible state layers.
+   This legacy bridge maps shared UI Style Kit semantic roles to
+   interactive-surface-css tokens and continues to own visible states.
+   New integrations should use interactive-surface-theme.css with
+   interactive-surface-css/state-core.css instead.
    The flow follows scheme tokens -> mode roles -> bridge tokens ->
    surface behavior, avoiding per-theme and per-preset token maps.
 ========================================================= */
 
 :where([data-ui][data-theme][data-mode]) .interactive-surface {
   --interactive-surface-border-width: 1px;
+  /* Preserve the adapter's opaque paint while semantic surfaces may retain preset alpha. */
   --interactive-surface-bg: rgb(var(--usk-surface-strong-rgb, var(--usk-surface-rgb, 255 255 255)));
-  --interactive-surface-fg: rgb(var(--usk-text-rgb));
+  --interactive-surface-fg: var(--ui-color-text, rgb(var(--usk-text-rgb)));
   --interactive-surface-border-color: rgb(var(--usk-border-rgb, 128 128 128) / .72);
-  --interactive-surface-focus-ring-color: rgb(var(--usk-focus-rgb, var(--usk-primary-rgb, 72 120 255)));
+  --interactive-surface-focus-ring-color: var(--ui-focus-color, rgb(var(--usk-focus-rgb, var(--usk-primary-rgb, 72 120 255))));
   --interactive-surface-radius: .85rem;
   --interactive-surface-state-layer-color: currentColor;
   --interactive-surface-state-layer-opacity: 0;
@@ -25,8 +28,8 @@
   --interactive-surface-light-icon-color-dark: var(--interactive-surface-light-icon-color);
   --interactive-surface-dark-icon-color-dark: var(--interactive-surface-dark-icon-color);
   --interactive-surface-accessibility-icon-color-dark: var(--interactive-surface-accessibility-icon-color);
-  --interactive-surface-variant-primary-bg: rgb(var(--usk-primary-rgb));
-  --interactive-surface-variant-primary-fg: rgb(var(--usk-primary-text-rgb, var(--usk-bg-rgb, 255 255 255)));
+  --interactive-surface-variant-primary-bg: var(--ui-color-primary, rgb(var(--usk-primary-rgb)));
+  --interactive-surface-variant-primary-fg: var(--ui-color-on-primary, rgb(var(--usk-primary-text-rgb, var(--usk-bg-rgb, 255 255 255))));
   --interactive-surface-variant-primary-border-color: rgb(var(--usk-primary-rgb, 72 120 255));
   --interactive-surface-variant-secondary-bg: rgb(var(--usk-secondary-rgb, var(--usk-surface-soft-rgb, 96 112 128)));
   --interactive-surface-variant-secondary-fg: rgb(var(--usk-secondary-text-rgb, var(--usk-text-rgb, 18 18 18)));
@@ -35,7 +38,7 @@
   --interactive-surface-variant-accent-fg: rgb(var(--usk-accent-text-rgb, var(--usk-bg-rgb, 255 255 255)));
   --interactive-surface-variant-accent-border-color: rgb(var(--usk-accent-rgb, var(--usk-primary-rgb, 72 120 255)));
   --interactive-surface-variant-subtle-bg: rgb(var(--usk-surface-soft-rgb, var(--usk-surface-rgb, 244 244 244)));
-  --interactive-surface-variant-subtle-fg: rgb(var(--usk-text-rgb, 18 18 18));
+  --interactive-surface-variant-subtle-fg: var(--ui-color-text, rgb(var(--usk-text-rgb, 18 18 18)));
   --interactive-surface-variant-subtle-border-color: rgb(var(--usk-border-rgb, 128 128 128) / .64);
   --interactive-surface-variant-warning-bg: rgb(var(--usk-warning-rgb, 255 190 72));
   --interactive-surface-variant-warning-fg: rgb(var(--usk-warning-text-rgb, var(--usk-bg-rgb, 18 18 18)));

package/styles/interactive-surface-theme.css

@@ -0,0 +1,115 @@
+/* =========================================================
+   UI Style Kit CSS x Interactive Surface CSS Theme Bridge
+
+   This bridge owns public paint and geometry tokens only.
+   Interactive Surface state-core.css remains the sole owner of
+   hover, focus, active, disabled, and reduced-motion behavior.
+========================================================= */
+
+:where([data-ui][data-theme][data-mode]) .interactive-surface {
+  --interactive-surface-border-width: 1px;
+  /* Preserve the adapter's opaque paint while semantic surfaces may retain preset alpha. */
+  --interactive-surface-bg: rgb(var(--usk-surface-strong-rgb, var(--usk-surface-rgb, 255 255 255)));
+  --interactive-surface-fg: var(--ui-color-text, rgb(var(--usk-text-rgb, 18 18 18)));
+  --interactive-surface-border-color: rgb(var(--usk-border-rgb, 128 128 128) / .72);
+  --interactive-surface-focus-ring-color: var(--ui-focus-color, rgb(var(--usk-focus-rgb, var(--usk-primary-rgb, 72 120 255))));
+  --interactive-surface-radius: .85rem;
+  --interactive-surface-light-icon-color: rgb(var(--usk-warning-rgb, var(--usk-accent-rgb, 255 190 72)));
+  --interactive-surface-dark-icon-color: rgb(var(--usk-text-rgb, 18 18 18));
+  --interactive-surface-accessibility-icon-color: var(--interactive-surface-focus-ring-color);
+  --interactive-surface-light-icon-color-dark: var(--interactive-surface-light-icon-color);
+  --interactive-surface-dark-icon-color-dark: var(--interactive-surface-dark-icon-color);
+  --interactive-surface-accessibility-icon-color-dark: var(--interactive-surface-accessibility-icon-color);
+  --interactive-surface-variant-primary-bg: var(--ui-color-primary, rgb(var(--usk-primary-rgb, 72 120 255)));
+  --interactive-surface-variant-primary-fg: var(--ui-color-on-primary, rgb(var(--usk-primary-text-rgb, var(--usk-bg-rgb, 255 255 255))));
+  --interactive-surface-variant-primary-border-color: rgb(var(--usk-primary-rgb, 72 120 255));
+  --interactive-surface-variant-secondary-bg: rgb(var(--usk-secondary-rgb, var(--usk-surface-soft-rgb, 96 112 128)));
+  --interactive-surface-variant-secondary-fg: rgb(var(--usk-secondary-text-rgb, var(--usk-text-rgb, 18 18 18)));
+  --interactive-surface-variant-secondary-border-color: rgb(var(--usk-secondary-rgb, 96 112 128));
+  --interactive-surface-variant-accent-bg: rgb(var(--usk-accent-rgb, var(--usk-primary-rgb, 72 120 255)));
+  --interactive-surface-variant-accent-fg: rgb(var(--usk-accent-text-rgb, var(--usk-bg-rgb, 255 255 255)));
+  --interactive-surface-variant-accent-border-color: rgb(var(--usk-accent-rgb, var(--usk-primary-rgb, 72 120 255)));
+  --interactive-surface-variant-subtle-bg: rgb(var(--usk-surface-soft-rgb, var(--usk-surface-rgb, 244 244 244)));
+  --interactive-surface-variant-subtle-fg: var(--ui-color-text, rgb(var(--usk-text-rgb, 18 18 18)));
+  --interactive-surface-variant-subtle-border-color: rgb(var(--usk-border-rgb, 128 128 128) / .64);
+  --interactive-surface-variant-warning-bg: rgb(var(--usk-warning-rgb, 255 190 72));
+  --interactive-surface-variant-warning-fg: rgb(var(--usk-warning-text-rgb, var(--usk-bg-rgb, 18 18 18)));
+  --interactive-surface-variant-warning-border-color: rgb(var(--usk-warning-rgb, 255 190 72));
+  --interactive-surface-variant-danger-bg: rgb(var(--usk-danger-rgb, 210 72 72));
+  --interactive-surface-variant-danger-fg: rgb(var(--usk-danger-text-rgb, 255 255 255));
+  --interactive-surface-variant-danger-border-color: rgb(var(--usk-danger-rgb, 210 72 72));
+  --interactive-surface-level-1-bg: var(--interactive-surface-variant-subtle-bg);
+  --interactive-surface-level-1-border-color: var(--interactive-surface-variant-subtle-border-color);
+  --interactive-surface-level-1-shadow: 0 1px 2px rgb(var(--usk-bg-rgb, 0 0 0) / .18);
+  --interactive-surface-level-2-bg: var(--interactive-surface-bg);
+  --interactive-surface-level-2-border-color: var(--interactive-surface-border-color);
+  --interactive-surface-level-2-shadow: 0 8px 20px rgb(var(--usk-bg-rgb, 0 0 0) / .22);
+  --interactive-surface-level-3-bg: color-mix(in srgb, var(--interactive-surface-bg) 82%, var(--interactive-surface-variant-primary-bg));
+  --interactive-surface-level-3-border-color: color-mix(in srgb, var(--interactive-surface-variant-primary-border-color) 72%, var(--interactive-surface-border-color));
+  --interactive-surface-level-3-shadow: 0 14px 34px rgb(var(--usk-bg-rgb, 0 0 0) / .3), 0 0 0 1px color-mix(in srgb, var(--interactive-surface-variant-primary-border-color) 34%, transparent);
+  --interactive-surface-level-bg: var(--interactive-surface-level-1-bg);
+  --interactive-surface-level-border-color: var(--interactive-surface-level-1-border-color);
+  --interactive-surface-level-shadow: var(--interactive-surface-level-1-shadow);
+
+  box-sizing: border-box;
+  border: var(--interactive-surface-border-width) solid var(--interactive-surface-level-border-color, var(--interactive-surface-border-color));
+  border-radius: var(--interactive-surface-radius);
+  background-color: var(--interactive-surface-level-bg, var(--interactive-surface-bg));
+  box-shadow: var(--interactive-surface-level-shadow, none);
+  color: var(--interactive-surface-fg);
+}
+
+:where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="primary"] {
+  --interactive-surface-bg: var(--interactive-surface-variant-primary-bg);
+  --interactive-surface-fg: var(--interactive-surface-variant-primary-fg);
+  --interactive-surface-border-color: var(--interactive-surface-variant-primary-border-color);
+}
+
+:where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="secondary"] {
+  --interactive-surface-bg: var(--interactive-surface-variant-secondary-bg);
+  --interactive-surface-fg: var(--interactive-surface-variant-secondary-fg);
+  --interactive-surface-border-color: var(--interactive-surface-variant-secondary-border-color);
+}
+
+:where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="accent"] {
+  --interactive-surface-bg: var(--interactive-surface-variant-accent-bg);
+  --interactive-surface-fg: var(--interactive-surface-variant-accent-fg);
+  --interactive-surface-border-color: var(--interactive-surface-variant-accent-border-color);
+}
+
+:where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="subtle"] {
+  --interactive-surface-bg: var(--interactive-surface-variant-subtle-bg);
+  --interactive-surface-fg: var(--interactive-surface-variant-subtle-fg);
+  --interactive-surface-border-color: var(--interactive-surface-variant-subtle-border-color);
+}
+
+:where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="warning"] {
+  --interactive-surface-bg: var(--interactive-surface-variant-warning-bg);
+  --interactive-surface-fg: var(--interactive-surface-variant-warning-fg);
+  --interactive-surface-border-color: var(--interactive-surface-variant-warning-border-color);
+}
+
+:where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="danger"] {
+  --interactive-surface-bg: var(--interactive-surface-variant-danger-bg);
+  --interactive-surface-fg: var(--interactive-surface-variant-danger-fg);
+  --interactive-surface-border-color: var(--interactive-surface-variant-danger-border-color);
+}
+
+/* Level selectors select paint depth without taking ownership of interaction states. */
+:where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-level="1"] {
+  --interactive-surface-level-bg: var(--interactive-surface-level-1-bg);
+  --interactive-surface-level-border-color: var(--interactive-surface-level-1-border-color);
+  --interactive-surface-level-shadow: var(--interactive-surface-level-1-shadow);
+}
+
+:where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-level="2"] {
+  --interactive-surface-level-bg: var(--interactive-surface-level-2-bg);
+  --interactive-surface-level-border-color: var(--interactive-surface-level-2-border-color);
+  --interactive-surface-level-shadow: var(--interactive-surface-level-2-shadow);
+}
+
+:where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-level="3"] {
+  --interactive-surface-level-bg: var(--interactive-surface-level-3-bg);
+  --interactive-surface-level-border-color: var(--interactive-surface-level-3-border-color);
+  --interactive-surface-level-shadow: var(--interactive-surface-level-3-shadow);
+}

package/styles/maximalist.css

@@ -370,7 +370,7 @@
 .max-skip-link:focus { transform: translateY(0); }
 
 /* Maximalist-specific expressive helpers */
-.max-sticker { display: inline-flex; align-items: center; padding: .45rem .8rem; background: var(--max-accent); color: #111; border: 3px solid var(--max-border); border-radius: var(--max-radius-pill); box-shadow: 5px 5px 0 rgb(var(--max-border-rgb) / .8); font-weight: 950; transform: rotate(-2deg); }
+.max-sticker { display: inline-flex; align-items: center; padding: .45rem .8rem; background: var(--max-accent); color: var(--max-on-accent); border: 3px solid var(--max-border); border-radius: var(--max-radius-pill); box-shadow: 5px 5px 0 rgb(var(--max-border-rgb) / .8); font-weight: 950; transform: rotate(-2deg); }
 .max-callout { padding: var(--max-space-6); background: linear-gradient(135deg, var(--max-primary), var(--max-accent)); color: var(--max-on-primary); border: 3px solid var(--max-border); border-radius: var(--max-radius-xl); box-shadow: 10px 10px 0 rgb(var(--max-border-rgb) / .85); }
 .max-wiggle:hover { animation: max-wiggle 420ms ease both; }
 @keyframes max-wiggle { 0%,100% { transform: rotate(0deg); } 25% { transform: rotate(-1.5deg); } 75% { transform: rotate(1.5deg); } }

package/styles/native-elements.css

@@ -34,11 +34,35 @@
   --usk-native-border-width: 1px;
   --usk-native-field-gap: .5rem;
   --usk-native-panel-padding: 1rem;
+  --usk-native-control-min-block-size: 2.75rem;
   --usk-native-control-padding-block: .72rem;
   --usk-native-control-padding-inline: .95rem;
+  --usk-native-subcontrol-padding-block: .55rem;
+  --usk-native-subcontrol-padding-inline: .8rem;
+  --usk-native-track: color-mix(in srgb, var(--usk-native-border) 50%, transparent);
+  --usk-native-track-fill: var(--usk-native-primary);
+  --usk-native-thumb: var(--usk-native-surface-strong);
+  --usk-native-thumb-border: var(--usk-native-primary);
+  --usk-native-indicator: var(--usk-native-primary);
   --usk-native-shadow: none;
   --usk-native-shadow-md: var(--usk-native-shadow);
   --usk-native-focus-ring: 0 0 0 3px rgb(var(--usk-focus-rgb) / .28);
+  --usk-motion-duration: 140ms;
+  --usk-motion-easing: cubic-bezier(0.2, 0, 0.2, 1);
+
+  /* Shared semantic values are fully typed so optional companion and third-party consumers can use them directly. */
+  --ui-color-bg: rgb(var(--usk-bg-rgb));
+  --ui-color-surface: var(--usk-native-surface-strong);
+  --ui-color-text: var(--usk-native-text);
+  --ui-color-muted: var(--usk-native-text-muted);
+  --ui-color-primary: var(--usk-native-primary);
+  --ui-color-on-primary: var(--usk-native-on-primary);
+  --ui-color-border: var(--usk-native-border);
+  --ui-radius-control: var(--usk-native-radius);
+  --ui-shadow-control: var(--usk-native-shadow);
+  --ui-focus-color: var(--usk-native-focus);
+  --ui-motion-duration: var(--usk-motion-duration);
+  --ui-motion-easing: var(--usk-motion-easing);
 }
 
 [data-ui][data-theme][data-mode] :where(h1, h2, h3, h4, h5, h6) {
@@ -49,6 +73,12 @@
   text-wrap: balance;
 }
 
+[data-ui][data-theme][data-mode] :where(hgroup) {
+  display: grid;
+  gap: .35rem;
+  margin-block: 0 1rem;
+}
+
 [data-ui][data-theme][data-mode] :where(h1) { font-size: clamp(2rem, 5vw, 3.5rem); }
 [data-ui][data-theme][data-mode] :where(h2) { font-size: clamp(1.55rem, 3vw, 2.35rem); }
 [data-ui][data-theme][data-mode] :where(h3) { font-size: clamp(1.25rem, 2vw, 1.65rem); }
@@ -148,6 +178,12 @@
   font-size: .9rem;
 }
 
+[data-ui][data-theme][data-mode] :where(form) {
+  display: grid;
+  gap: var(--usk-native-field-gap);
+  min-inline-size: 0;
+}
+
 [data-ui][data-theme][data-mode] :where(fieldset) {
   display: grid;
   gap: .9rem;
@@ -184,7 +220,7 @@
 
 [data-ui][data-theme][data-mode] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select) {
   width: 100%;
-  min-height: 2.75rem;
+  min-block-size: var(--usk-native-control-min-block-size);
   padding: var(--usk-native-control-padding-block) var(--usk-native-control-padding-inline);
   color: var(--usk-native-text);
   background: var(--usk-native-control-bg);
@@ -193,6 +229,16 @@
   font: inherit;
 }
 
+[data-ui][data-theme][data-mode] :where(input, textarea, select, button) {
+  color-scheme: inherit;
+  accent-color: var(--usk-native-primary);
+}
+
+[data-ui][data-theme][data-mode] :where(input, textarea)::placeholder {
+  color: var(--usk-native-text-muted);
+  opacity: .78;
+}
+
 [data-ui][data-theme][data-mode] :where(textarea) {
   min-height: 7rem;
   resize: vertical;
@@ -201,7 +247,7 @@
 [data-ui][data-theme][data-mode] :where(input, textarea, select, button) { font: inherit; }
 
 [data-ui][data-theme][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
-  min-height: 2.75rem;
+  min-block-size: var(--usk-native-control-min-block-size);
   padding: .7rem 1rem;
   color: var(--usk-native-on-primary);
   background: var(--usk-native-primary);
@@ -218,16 +264,53 @@
 }
 
 [data-ui][data-theme][data-mode] :where(input[type="checkbox"], input[type="radio"]) {
-  inline-size: 1.1rem;
-  block-size: 1.1rem;
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
   accent-color: var(--usk-native-primary);
 }
 
 [data-ui][data-theme][data-mode] :where(input[type="range"]) {
+  -webkit-appearance: none;
+  appearance: none;
   width: 100%;
+  min-block-size: 1.5rem;
+  background: transparent;
   accent-color: var(--usk-native-primary);
 }
 
+[data-ui][data-theme][data-mode] :where(input[type="range"])::-webkit-slider-runnable-track {
+  block-size: .45rem;
+  background: var(--usk-native-track);
+  border-radius: 999px;
+}
+
+[data-ui][data-theme][data-mode] :where(input[type="range"])::-moz-range-track {
+  block-size: .45rem;
+  background: var(--usk-native-track);
+  border-radius: 999px;
+}
+
+[data-ui][data-theme][data-mode] :where(input[type="range"])::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  inline-size: 1.2rem;
+  block-size: 1.2rem;
+  margin-block-start: -.38rem;
+  background: var(--usk-native-thumb);
+  border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
+  border-radius: 999px;
+  box-shadow: var(--usk-native-shadow);
+}
+
+[data-ui][data-theme][data-mode] :where(input[type="range"])::-moz-range-thumb {
+  inline-size: 1.2rem;
+  block-size: 1.2rem;
+  background: var(--usk-native-thumb);
+  border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
+  border-radius: 999px;
+  box-shadow: var(--usk-native-shadow);
+}
+
 [data-ui][data-theme][data-mode] :where(input[type="color"]) {
   inline-size: 3rem;
   block-size: 2.4rem;
@@ -237,12 +320,27 @@
   border-radius: var(--usk-native-radius-sm);
 }
 
+[data-ui][data-theme][data-mode] :where(input[type="color"])::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+[data-ui][data-theme][data-mode] :where(input[type="color"])::-webkit-color-swatch {
+  border: 0;
+  border-radius: calc(var(--usk-native-radius-sm) / 1.5);
+}
+
+[data-ui][data-theme][data-mode] :where(input[type="color"])::-moz-color-swatch {
+  border: 0;
+  border-radius: calc(var(--usk-native-radius-sm) / 1.5);
+}
+
 [data-ui][data-theme][data-mode] :where(input[type="file"]) { color: var(--usk-native-text-muted); }
 
 /* Keep pseudo-elements outside :where() because engines reject them inside selector-list arguments. */
-[data-ui][data-theme][data-mode] :where(input[type="file"])::file-selector-button {
+[data-ui][data-theme][data-mode] :where(input[type="file"])::file-selector-button,
+[data-ui][data-theme][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
   margin-inline-end: .75rem;
-  padding: .55rem .8rem;
+  padding: var(--usk-native-subcontrol-padding-block) var(--usk-native-subcontrol-padding-inline);
   color: var(--usk-native-on-primary);
   background: var(--usk-native-primary);
   border: var(--usk-native-border-width) solid var(--usk-native-primary);
@@ -251,15 +349,63 @@
   cursor: pointer;
 }
 
-[data-ui][data-theme][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
-  opacity: .55;
+[data-ui][data-theme][data-mode] :where(input[type="file"]:hover)::file-selector-button,
+[data-ui][data-theme][data-mode] :where(input[type="file"]:hover)::-webkit-file-upload-button {
+  background: var(--usk-native-primary-hover);
+  border-color: var(--usk-native-primary-hover);
+}
+
+[data-ui][data-theme][data-mode] :where(input[type="file"]:focus-visible)::file-selector-button,
+[data-ui][data-theme][data-mode] :where(input[type="file"]:focus-visible)::-webkit-file-upload-button {
+  box-shadow: var(--usk-native-focus-ring);
+}
+
+[data-ui][data-theme][data-mode] :where(input[type="file"]:active)::file-selector-button,
+[data-ui][data-theme][data-mode] :where(input[type="file"]:active)::-webkit-file-upload-button {
+  filter: brightness(.96);
+}
+
+[data-ui][data-theme][data-mode] :where(input[type="file"]:disabled)::file-selector-button,
+[data-ui][data-theme][data-mode] :where(input[type="file"]:disabled)::-webkit-file-upload-button {
+  color: var(--usk-native-text-muted);
+  background: var(--usk-native-surface-soft);
+  border-color: var(--usk-native-border);
   cursor: not-allowed;
 }
 
-[data-ui][data-theme][data-mode] :where(input:invalid, textarea:invalid, select:invalid, [aria-invalid="true"]) {
+[data-ui][data-theme][data-mode] :where(input:read-only, textarea:read-only) {
+  background: var(--usk-native-surface-soft);
+}
+
+[data-ui][data-theme][data-mode] :where(input:required, textarea:required, select:required) {
+  box-shadow: inset .22rem 0 0 var(--usk-native-indicator);
+}
+
+[data-ui][data-theme][data-mode] :where(input:user-valid, textarea:user-valid, select:user-valid, .is-valid) {
+  border-color: var(--usk-native-success);
+}
+
+[data-ui][data-theme][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
   border-color: var(--usk-native-danger);
 }
 
+[data-ui][data-theme][data-mode] :where(input[type="checkbox"]:indeterminate, input[type="radio"]:indeterminate) {
+  accent-color: var(--usk-native-warning);
+}
+
+[data-ui][data-theme][data-mode] :where(button:active, input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active) {
+  filter: brightness(.96);
+}
+
+[data-ui][data-theme][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
+  color: var(--usk-native-text-muted);
+  background: color-mix(in srgb, var(--usk-native-surface-soft) 72%, transparent);
+  border-color: var(--usk-native-border);
+  box-shadow: none;
+  opacity: .55;
+  cursor: not-allowed;
+}
+
 [data-ui][data-theme][data-mode] :where(table) {
   width: 100%;
   margin: 1rem 0;
@@ -323,6 +469,32 @@
   accent-color: var(--usk-native-primary);
 }
 
+[data-ui][data-theme][data-mode] :where(progress, meter)::-webkit-progress-bar,
+[data-ui][data-theme][data-mode] :where(meter)::-webkit-meter-bar {
+  background: var(--usk-native-track);
+  border-radius: 999px;
+}
+
+[data-ui][data-theme][data-mode] :where(progress)::-webkit-progress-value,
+[data-ui][data-theme][data-mode] :where(meter)::-webkit-meter-optimum-value {
+  background: var(--usk-native-track-fill);
+  border-radius: inherit;
+}
+
+[data-ui][data-theme][data-mode] :where(progress)::-moz-progress-bar,
+[data-ui][data-theme][data-mode] :where(meter)::-moz-meter-bar {
+  background: var(--usk-native-track-fill);
+  border-radius: 999px;
+}
+
+[data-ui][data-theme][data-mode] :where(meter)::-webkit-meter-suboptimum-value {
+  background: var(--usk-native-warning);
+}
+
+[data-ui][data-theme][data-mode] :where(meter)::-webkit-meter-even-less-good-value {
+  background: var(--usk-native-danger);
+}
+
 [data-ui][data-theme][data-mode] :where(main, section, header, footer, nav, article, aside, address) {
   color: var(--usk-native-text);
 }
@@ -348,6 +520,8 @@
 
 [data-ui][data-theme][data-mode] :where(dd) { margin: .25rem 0 .75rem 1.25rem; }
 [data-ui][data-theme][data-mode] :where(strong, b) { color: var(--usk-native-text); font-weight: 900; }
+[data-ui][data-theme][data-mode] :where(u) { text-decoration-color: var(--usk-native-primary); text-decoration-thickness: .08em; text-underline-offset: .16em; }
+[data-ui][data-theme][data-mode] :where(bdi, bdo) { color: var(--usk-native-text); unicode-bidi: isolate; }
 [data-ui][data-theme][data-mode] :where(em, i, cite, var, q) { color: var(--usk-native-text); }
 [data-ui][data-theme][data-mode] :where(ins) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-success); }
 [data-ui][data-theme][data-mode] :where(del, s) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-danger); }
@@ -355,6 +529,30 @@
 [data-ui][data-theme][data-mode] :where(optgroup, option) { color: var(--usk-native-text); background: var(--usk-native-surface); }
 [data-ui][data-theme][data-mode] :where(time, data, dfn, ruby) { color: var(--usk-native-text); }
 [data-ui][data-theme][data-mode] :where(search) { display: block; color: var(--usk-native-text); }
+[data-ui][data-theme][data-mode] :where(selectedcontent) { color: var(--usk-native-text); }
+[data-ui][data-theme][data-mode] :where(datalist) { display: none; }
+
+[data-ui][data-theme][data-mode] :where(summary, li)::marker {
+  color: var(--usk-native-indicator);
+}
+
+[data-ui][data-theme][data-mode] :where(input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"])::-webkit-calendar-picker-indicator {
+  opacity: .78;
+  accent-color: var(--usk-native-indicator);
+}
+
+[data-ui][data-theme][data-mode] :where(input[type="search"])::-webkit-search-cancel-button {
+  accent-color: var(--usk-native-indicator);
+}
+
+[data-ui][data-theme][data-mode] :where(input[type="number"])::-webkit-inner-spin-button,
+[data-ui][data-theme][data-mode] :where(input[type="number"])::-webkit-outer-spin-button {
+  opacity: .72;
+}
+
+[data-ui][data-theme][data-mode] :where(select)::picker-icon {
+  color: var(--usk-native-indicator);
+}
 
 [data-ui][data-theme][data-mode] :where(:focus-visible) {
   outline: 3px solid var(--usk-native-focus);
@@ -372,4 +570,24 @@
 [data-ui][data-theme][data-mode] :where([aria-busy="true"]) { cursor: progress; }
 [data-ui][data-theme][data-mode] :where([hidden]) { display: none !important; }
 [data-ui][data-theme][data-mode] ::selection { color: var(--usk-native-on-primary); background: var(--usk-native-primary); }
+[data-ui][data-theme][data-mode] ::-webkit-scrollbar { inline-size: .75rem; block-size: .75rem; }
+[data-ui][data-theme][data-mode] ::-webkit-scrollbar-track { background: var(--usk-native-track); }
+[data-ui][data-theme][data-mode] ::-webkit-scrollbar-thumb { background: var(--usk-native-thumb-border); border-radius: 999px; }
+
+@media (prefers-reduced-motion: reduce) {
+  [data-ui][data-theme][data-mode] :where(input[type="file"])::file-selector-button,
+  [data-ui][data-theme][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
+    transition-duration: 1ms !important;
+  }
+}
+
+@media (forced-colors: active) {
+  [data-ui][data-theme][data-mode] :where(input, textarea, select, button, progress, meter) {
+    forced-color-adjust: auto;
+  }
+
+  [data-ui][data-theme][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
+    border-color: Mark;
+  }
+}
 }