ui-style-kit-css 2.5.0 → 2.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-style-kit-css",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "CSS theme and UI style preset library for accessible websites, dashboards, admin interfaces, and client-facing pages.",
   "style": "dist/ui-style-kit.css",
   "main": "dist/ui-style-kit.css",
@@ -72,6 +72,17 @@
     "./visual/cyberpunk.css": "./dist/visual/cyberpunk.css",
     "./visual/y2k.css": "./dist/visual/y2k.css",
     "./visual/retro-glass.css": "./dist/visual/retro-glass.css",
+    "./presets/minimal-saas.css": "./dist/visual/minimal-saas.css",
+    "./presets/bento.css": "./dist/visual/bento.css",
+    "./presets/maximalist.css": "./dist/visual/maximalist.css",
+    "./presets/bauhaus.css": "./dist/visual/bauhaus.css",
+    "./presets/tactile.css": "./dist/visual/tactile.css",
+    "./presets/neumorphism.css": "./dist/visual/neumorphism.css",
+    "./presets/retrofuturism.css": "./dist/visual/retrofuturism.css",
+    "./presets/brutalism.css": "./dist/visual/brutalism.css",
+    "./presets/cyberpunk.css": "./dist/visual/cyberpunk.css",
+    "./presets/y2k.css": "./dist/visual/y2k.css",
+    "./presets/retro-glass.css": "./dist/visual/retro-glass.css",
     "./dist/ui-style-kit.css": "./dist/ui-style-kit.css",
     "./dist/ui-style-kit.min.css": "./dist/ui-style-kit.min.css",
     "./package.json": "./package.json",
@@ -83,6 +94,14 @@
     "./styles/native-elements.css": "./styles/native-elements.css",
     "./native-elements": "./styles/native-elements.css",
     "./native-elements.css": "./styles/native-elements.css",
+    "./styles/clean-defaults": "./styles/clean-defaults.css",
+    "./styles/clean-defaults.css": "./styles/clean-defaults.css",
+    "./clean-defaults": "./styles/clean-defaults.css",
+    "./clean-defaults.css": "./styles/clean-defaults.css",
+    "./styles/component-composition": "./styles/component-composition.css",
+    "./styles/component-composition.css": "./styles/component-composition.css",
+    "./component-composition": "./styles/component-composition.css",
+    "./component-composition.css": "./styles/component-composition.css",
     "./styles/content-overflow": "./styles/content-overflow.css",
     "./styles/content-overflow.css": "./styles/content-overflow.css",
     "./content-overflow": "./styles/content-overflow.css",
@@ -143,46 +162,55 @@
     "./dist/ui-style-kit.with-bridge.min.css": "./dist/ui-style-kit.with-bridge.min.css",
     "./manifest.json": "./manifest.json",
     "./visual/editorial-luxe.css": "./dist/visual/editorial-luxe.css",
+    "./presets/editorial-luxe.css": "./dist/visual/editorial-luxe.css",
     "./styles/editorial-luxe": "./styles/editorial-luxe.css",
     "./styles/editorial-luxe.css": "./styles/editorial-luxe.css",
     "./editorial-luxe": "./styles/editorial-luxe.css",
     "./editorial-luxe.css": "./styles/editorial-luxe.css",
     "./visual/organic-modern.css": "./dist/visual/organic-modern.css",
+    "./presets/organic-modern.css": "./dist/visual/organic-modern.css",
     "./styles/organic-modern": "./styles/organic-modern.css",
     "./styles/organic-modern.css": "./styles/organic-modern.css",
     "./organic-modern": "./styles/organic-modern.css",
     "./organic-modern.css": "./styles/organic-modern.css",
     "./visual/industrial-utility.css": "./dist/visual/industrial-utility.css",
+    "./presets/industrial-utility.css": "./dist/visual/industrial-utility.css",
     "./styles/industrial-utility": "./styles/industrial-utility.css",
     "./styles/industrial-utility.css": "./styles/industrial-utility.css",
     "./industrial-utility": "./styles/industrial-utility.css",
     "./industrial-utility.css": "./styles/industrial-utility.css",
     "./visual/technical-blueprint.css": "./dist/visual/technical-blueprint.css",
+    "./presets/technical-blueprint.css": "./dist/visual/technical-blueprint.css",
     "./styles/technical-blueprint": "./styles/technical-blueprint.css",
     "./styles/technical-blueprint.css": "./styles/technical-blueprint.css",
     "./technical-blueprint": "./styles/technical-blueprint.css",
     "./technical-blueprint.css": "./styles/technical-blueprint.css",
     "./visual/art-deco.css": "./dist/visual/art-deco.css",
+    "./presets/art-deco.css": "./dist/visual/art-deco.css",
     "./styles/art-deco": "./styles/art-deco.css",
     "./styles/art-deco.css": "./styles/art-deco.css",
     "./art-deco": "./styles/art-deco.css",
     "./art-deco.css": "./styles/art-deco.css",
     "./visual/clay.css": "./dist/visual/clay.css",
+    "./presets/clay.css": "./dist/visual/clay.css",
     "./styles/clay": "./styles/clay.css",
     "./styles/clay.css": "./styles/clay.css",
     "./clay": "./styles/clay.css",
     "./clay.css": "./styles/clay.css",
     "./visual/data-terminal.css": "./dist/visual/data-terminal.css",
+    "./presets/data-terminal.css": "./dist/visual/data-terminal.css",
     "./styles/data-terminal": "./styles/data-terminal.css",
     "./styles/data-terminal.css": "./styles/data-terminal.css",
     "./data-terminal": "./styles/data-terminal.css",
     "./data-terminal.css": "./styles/data-terminal.css",
     "./visual/paper-editorial.css": "./dist/visual/paper-editorial.css",
+    "./presets/paper-editorial.css": "./dist/visual/paper-editorial.css",
     "./styles/paper-editorial": "./styles/paper-editorial.css",
     "./styles/paper-editorial.css": "./styles/paper-editorial.css",
     "./paper-editorial": "./styles/paper-editorial.css",
     "./paper-editorial.css": "./styles/paper-editorial.css",
     "./visual/neo-noir.css": "./dist/visual/neo-noir.css",
+    "./presets/neo-noir.css": "./dist/visual/neo-noir.css",
     "./styles/neo-noir": "./styles/neo-noir.css",
     "./styles/neo-noir.css": "./styles/neo-noir.css",
     "./neo-noir": "./styles/neo-noir.css",

package/styles/art-deco.css

@@ -14,6 +14,7 @@
 @import url("./theme-colors.css");
 @import url("./native-elements.css");
 @import url("./content-overflow.css");
+@import url("./clean-defaults.css");
 
 @layer ui-style-kit.art_deco {
 :root {
@@ -201,6 +202,13 @@
   --usk-native-primary: var(--deco-primary);
   --usk-native-primary-hover: var(--deco-primary-hover);
   --usk-native-on-primary: var(--deco-on-primary);
+  --usk-native-secondary: var(--deco-secondary);
+  --usk-native-on-secondary: var(--deco-on-secondary);
+  --usk-native-accent: var(--deco-accent);
+  --usk-native-on-accent: var(--deco-on-accent);
+  --usk-native-on-success: var(--deco-on-success);
+  --usk-native-on-warning: var(--deco-on-warning);
+  --usk-native-on-danger: var(--deco-on-danger);
   --usk-native-focus: var(--deco-focus);
   --usk-native-success: var(--deco-success);
   --usk-native-warning: var(--deco-warning);
@@ -1394,7 +1402,7 @@
 .deco-check input:checked + .deco-check-control::after {
   content: "";
   position: absolute;
-  inset-block-start: 50%;
+  inset-block-start: calc(50% - 1px);
   inset-inline-start: 50%;
   display: block;
   inline-size: .5rem;
@@ -1806,6 +1814,8 @@
   --deco-status-warning: var(--deco-text);
   --deco-status-danger: var(--deco-text);
   --deco-info-rgb: var(--usk-primary-rgb, 0 80 150);
+  --deco-link: var(--deco-text);
+  --usk-native-link: var(--deco-text);
 }
 [data-ui="art-deco"][data-mode] {
   --deco-bg: rgb(var(--deco-bg-rgb));
@@ -2049,3 +2059,56 @@ dialog.deco-dialog:not([open]) { display: none; }
   font-weight: 800;
   line-height: 1;
 }
+
+/**
+ * Restores the reference action silhouette after shared semantic controls are
+ * promoted. The double metallic keyline and stepped frame remain structural,
+ * while each semantic variant continues to own its accessible paint pairing.
+ */
+[data-ui="art-deco"][data-mode] :is(.deco-button, .deco-icon-button) {
+  border: 3px double var(--deco-metal);
+  border-radius: 0;
+  clip-path: var(--deco-step-sm);
+  box-shadow:
+    inset 0 0 0 1px var(--deco-surface-strong),
+    0 3px 0 var(--deco-metal);
+}
+
+@supports (color: color-mix(in srgb, black, white)) {
+  [data-ui="art-deco"][data-mode] :is(.deco-button, .deco-icon-button) {
+    box-shadow:
+      inset 0 0 0 1px var(--deco-surface-strong),
+      0 3px 0 color-mix(in srgb, var(--deco-metal) 52%, var(--deco-text));
+  }
+}
+
+/**
+ * Uses the system's diamond motif for compact identities while keeping initials,
+ * photographs, and status metadata upright and independently readable.
+ */
+[data-ui="art-deco"][data-mode] .deco-avatar {
+  inline-size: 3rem;
+  block-size: 3rem;
+  overflow: visible;
+  background: var(--deco-jewel-primary);
+  color: var(--deco-jewel-on);
+  border: 3px double var(--deco-metal-bright);
+  border-radius: 0;
+  box-shadow: inset 0 0 0 2px var(--deco-surface-strong);
+  transform: rotate(45deg) scale(.78);
+}
+
+[data-ui="art-deco"][data-mode] .deco-avatar > :where(img, [aria-hidden="true"]) {
+  transform: rotate(-45deg) scale(1.12);
+}
+
+[data-ui="art-deco"][data-mode] .deco-avatar > [role="status"] {
+  inset-block-end: -.15rem;
+  inset-inline-end: -.15rem;
+  color: var(--deco-jewel-on);
+  transform: rotate(-45deg);
+}
+
+[data-ui="art-deco"][data-mode] .deco-avatar-group > * + * {
+  margin-inline-start: .25rem;
+}

package/styles/bauhaus.css

@@ -14,6 +14,7 @@
 @import url("./theme-colors.css");
 @import url("./native-elements.css");
 @import url("./content-overflow.css");
+@import url("./clean-defaults.css");
 
 /** Locally bundled OFL fonts keep workshop typography independent of network access. */
 @font-face { font-family: "Bauhaus Barlow"; src: url("./assets/bauhaus-barlow.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@@ -214,6 +215,13 @@
   --usk-native-primary: var(--bau-primary);
   --usk-native-primary-hover: var(--bau-primary-hover);
   --usk-native-on-primary: var(--bau-on-primary);
+  --usk-native-secondary: var(--bau-secondary);
+  --usk-native-on-secondary: var(--bau-on-secondary);
+  --usk-native-accent: var(--bau-accent);
+  --usk-native-on-accent: var(--bau-on-accent);
+  --usk-native-on-success: var(--bau-on-success);
+  --usk-native-on-warning: var(--bau-on-warning);
+  --usk-native-on-danger: var(--bau-on-danger);
   --usk-native-focus: var(--bau-focus);
   --usk-native-success: var(--bau-success);
   --usk-native-warning: var(--bau-warning);

package/styles/bento.css

@@ -14,6 +14,7 @@
 @import url("./theme-colors.css");
 @import url("./native-elements.css");
 @import url("./content-overflow.css");
+@import url("./clean-defaults.css");
 
 @font-face {
   font-family: "Bento Manrope";
@@ -211,6 +212,13 @@
   --usk-native-primary: var(--bento-primary);
   --usk-native-primary-hover: var(--bento-primary-hover);
   --usk-native-on-primary: var(--bento-on-primary);
+  --usk-native-secondary: var(--bento-secondary);
+  --usk-native-on-secondary: var(--bento-on-secondary);
+  --usk-native-accent: var(--bento-accent);
+  --usk-native-on-accent: var(--bento-on-accent);
+  --usk-native-on-success: var(--bento-on-success);
+  --usk-native-on-warning: var(--bento-on-warning);
+  --usk-native-on-danger: var(--bento-on-danger);
   --usk-native-focus: var(--bento-focus);
   --usk-native-success: var(--bento-success);
   --usk-native-warning: var(--bento-warning);
@@ -1479,10 +1487,10 @@
   --bento-fallback-primary-rgb: 49 87 220;
   --bento-fallback-primary-hover-rgb: 70 99 212;
   --bento-fallback-primary-text-rgb: 255 255 255;
-  --bento-fallback-secondary-rgb: 117 108 228;
+  --bento-fallback-secondary-rgb: 105 94 220;
   --bento-fallback-secondary-hover-rgb: 91 82 201;
   --bento-fallback-secondary-text-rgb: 255 255 255;
-  --bento-fallback-accent-rgb: 117 108 228;
+  --bento-fallback-accent-rgb: 105 94 220;
   --bento-fallback-accent-text-rgb: 255 255 255;
   --bento-fallback-success-rgb: 53 168 103;
   --bento-fallback-success-text-rgb: 0 0 0;

package/styles/brutalism.css

@@ -15,6 +15,7 @@
 @import url("./theme-colors.css");
 @import url("./native-elements.css");
 @import url("./content-overflow.css");
+@import url("./clean-defaults.css");
 
 @layer ui-style-kit.brutalism {
 :root {
@@ -212,6 +213,13 @@
   --usk-native-primary: var(--brutal-primary);
   --usk-native-primary-hover: var(--brutal-primary-hover);
   --usk-native-on-primary: var(--brutal-on-primary);
+  --usk-native-secondary: var(--brutal-secondary);
+  --usk-native-on-secondary: var(--brutal-on-secondary);
+  --usk-native-accent: var(--brutal-accent);
+  --usk-native-on-accent: var(--brutal-on-accent);
+  --usk-native-on-success: var(--brutal-on-success);
+  --usk-native-on-warning: var(--brutal-on-warning);
+  --usk-native-on-danger: var(--brutal-on-danger);
   --usk-native-focus: var(--brutal-focus);
   --usk-native-success: var(--brutal-success);
   --usk-native-warning: var(--brutal-warning);

package/styles/clay.css

@@ -14,6 +14,7 @@
 @import url("./theme-colors.css");
 @import url("./native-elements.css");
 @import url("./content-overflow.css");
+@import url("./clean-defaults.css");
 
 @layer ui-style-kit.clay {
 /** Locally bundled rounded headings; body text retains the compact system face. */
@@ -57,7 +58,7 @@
   --clay-fallback-text-rgb: 43 36 25;
   --clay-fallback-text-muted-rgb: 107 97 78;
   --clay-fallback-border-rgb: 215 198 167;
-  --clay-fallback-primary-rgb: 140 106 61;
+  --clay-fallback-primary-rgb: 115 75 32;
   --clay-fallback-primary-hover-rgb: 112 83 47;
   --clay-fallback-primary-text-rgb: 255 255 255;
   --clay-fallback-secondary-rgb: 95 118 85;
@@ -69,7 +70,7 @@
   --clay-fallback-success-text-rgb: 255 255 255;
   --clay-fallback-warning-rgb: 166 107 0;
   --clay-fallback-warning-text-rgb: 0 0 0;
-  --clay-fallback-danger-rgb: 174 74 63;
+  --clay-fallback-danger-rgb: 148 48 42;
   --clay-fallback-danger-text-rgb: 255 255 255;
   --clay-fallback-link-rgb: 112 83 47;
   --clay-fallback-focus-rgb: 201 151 74;
@@ -209,6 +210,13 @@
   --usk-native-primary: var(--clay-primary);
   --usk-native-primary-hover: var(--clay-primary-hover);
   --usk-native-on-primary: var(--clay-on-primary);
+  --usk-native-secondary: var(--clay-secondary);
+  --usk-native-on-secondary: var(--clay-on-secondary);
+  --usk-native-accent: var(--clay-accent);
+  --usk-native-on-accent: var(--clay-on-accent);
+  --usk-native-on-success: var(--clay-on-success);
+  --usk-native-on-warning: var(--clay-on-warning);
+  --usk-native-on-danger: var(--clay-on-danger);
   --usk-native-focus: var(--clay-focus);
   --usk-native-success: var(--clay-success);
   --usk-native-warning: var(--clay-warning);
@@ -828,7 +836,7 @@
   --clay-thumb-material: #fff;
   --clay-pigment-base: #000;
   --clay-pigment-share: 100%;
-  --clay-pigment-ink: #fff;
+  --clay-pigment-ink: #000;
   --clay-tooltip-material: #000;
   --clay-tooltip-ink: #fff;
   --clay-label-relief: none;

package/styles/clean-defaults.css

@@ -0,0 +1,295 @@
+/* =========================================================
+   UI Style Kit CSS - Clean Defaults
+
+   Supplies conservative spacing and decoration defaults while
+   keeping deliberate flush and underlined treatments opt-in.
+========================================================= */
+
+@layer ui-style-kit.components {
+[data-ui][data-mode]:not([data-ui="technical-blueprint"]) {
+  --usk-element-margin-min: 2px;
+  --usk-element-padding-min: 2px;
+  --usk-wrapper-margin-min: var(--usk-element-margin-min);
+  --usk-wrapper-padding-min: var(--usk-element-padding-min);
+  --usk-compact-padding-block-min: 2px;
+  --usk-compact-padding-inline-min: 4px;
+}
+
+/**
+ * Establishes the library-wide non-zero spacing floor. Preset declarations in
+ * the later preset layer retain their roomier values, while either flush class
+ * provides an explicit opt-out for intentionally adjoining elements. Technical
+ * Blueprint is exempt because its drafting grammar intentionally joins controls.
+ */
+[data-ui][data-mode]:not([data-ui="technical-blueprint"]) :where(:not(.flush):not(.usk-flush)) {
+  margin: var(--usk-element-margin-min);
+  padding: var(--usk-element-padding-min);
+}
+
+/** Compact controls remain operable even when a preset omits its own padding. */
+[data-ui][data-mode]:not([data-ui="technical-blueprint"]) :where(
+  button,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"],
+  [class~="usk-button"],
+  [class~="usk-icon-button"],
+  [class~="usk-badge"],
+  [class~="ui-button"],
+  [class~="ui-icon-button"],
+  [class~="ui-badge"],
+  [class$="-button"], [class*="-button "],
+  [class$="-icon-button"], [class*="-icon-button "],
+  [class$="-badge"], [class*="-badge "]
+) {
+  padding-block: var(--usk-compact-padding-block-min);
+  padding-inline: var(--usk-compact-padding-inline-min);
+}
+}
+
+@layer ui-style-kit.clean_defaults {
+/** Keeps semantic state paint paired when a preset also owns broad anchor or input rules. */
+[data-ui][data-mode] :where(
+  [class~="usk-pagination-link"][aria-current="page"],
+  [class~="ui-pagination-link"][aria-current="page"]
+) {
+  color: var(--usk-native-on-primary);
+}
+
+/** Separates compact page numbers from roomier Previous and Next bookends. */
+[data-ui][data-mode] :where([class~="usk-pagination-link"], [class~="ui-pagination-link"]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  line-height: 1;
+  vertical-align: middle;
+}
+
+[data-ui][data-mode] :where(
+  [class~="usk-pagination-link"][data-pagination-kind="page"],
+  [class~="ui-pagination-link"][data-pagination-kind="page"]
+) {
+  min-inline-size: 2.25rem;
+  min-block-size: 2.25rem;
+  padding: 2px 4px;
+  font-size: .9em;
+}
+
+[data-ui][data-mode] :where(
+  [class~="usk-pagination-link"][data-pagination-kind="direction"],
+  [class~="ui-pagination-link"][data-pagination-kind="direction"]
+) {
+  min-inline-size: 2.75rem;
+  min-block-size: 2.75rem;
+}
+
+/** Uses one centering model for native and semantic button content. */
+[data-ui][data-mode] :where(
+  button,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"],
+  [class~="usk-button"],
+  [class~="usk-icon-button"],
+  [class~="ui-button"],
+  [class~="ui-icon-button"]
+) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  vertical-align: middle;
+}
+
+[data-ui][data-mode] :where(input[type="checkbox"]:checked, input[type="radio"]:checked) {
+  color: var(--usk-native-choice-mark-color);
+}
+
+}
+
+/**
+ * Provides choice-wrapper alignment below preset paint so authored spacing and
+ * density remain authoritative when a preset supplies them.
+ */
+@layer ui-style-kit.components {
+[data-ui][data-mode] :where(
+  [class~="usk-check"],
+  [class~="usk-radio"],
+  [class~="usk-switch"],
+  [class~="ui-check"],
+  [class~="ui-radio"],
+  [class~="ui-switch"]
+) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--usk-native-field-gap, .5rem);
+  margin: var(--usk-element-margin-min);
+  padding: .25rem .5rem;
+  line-height: 1.25;
+  vertical-align: middle;
+}
+
+[data-ui][data-mode] :where(
+  [class~="ui-check-control"],
+  [class~="ui-radio-control"],
+  [class~="usk-check-control"],
+  [class~="usk-radio-control"],
+  [class~="usk-switch-track"],
+  [class~="ui-switch-track"]
+) {
+  position: relative;
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  align-self: center;
+  margin: var(--usk-element-margin-min);
+}
+}
+
+@layer ui-style-kit.clean_defaults {
+
+/** Keeps the moving switch face inside its preset-owned track dimensions. */
+[data-ui][data-mode] :where([class~="usk-switch-thumb"], [class~="ui-switch-thumb"]) {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/**
+ * Protects workflow-stepper markup from preset classes that use the same suffix
+ * for numeric steppers or other three-column controls.
+ */
+[data-ui][data-mode] :where([class~="usk-stepper"], [class~="ui-stepper"]) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  grid-template-columns: none;
+  inline-size: 100%;
+  max-inline-size: 100%;
+}
+
+[data-ui][data-mode] :where([class~="usk-step"], [class~="ui-step"]) {
+  display: flex;
+  flex: 1 1 12rem;
+  align-items: center;
+  inline-size: auto;
+  min-inline-size: min(100%, 12rem);
+  max-inline-size: 100%;
+}
+
+[data-ui][data-mode] :where([class~="usk-step-label"], [class~="ui-step-label"]) {
+  flex: 1 1 auto;
+  inline-size: auto;
+  min-inline-size: 8ch;
+  max-inline-size: 100%;
+  writing-mode: horizontal-tb;
+}
+
+}
+
+@layer ui-style-kit.clean_defaults {
+
+[data-ui][data-mode] :where(
+  [class~="ui-check"] > input:focus-visible + [class~="ui-check-control"],
+  [class~="ui-radio"] > input:focus-visible + [class~="ui-radio-control"],
+  [class~="ui-switch"] > input:focus-visible + [class~="ui-switch-track"],
+  [class~="usk-check"] > input:focus-visible + [class~="usk-check-control"],
+  [class~="usk-radio"] > input:focus-visible + [class~="usk-radio-control"],
+  [class~="usk-switch"] > input:focus-visible + [class~="usk-switch-track"]
+) {
+  outline: 2px solid var(--usk-native-focus);
+  outline-offset: 2px;
+}
+
+/** Keeps native choice inputs focusable without painting a duplicate control. */
+[data-ui][data-mode] :where(
+  [class~="usk-check"],
+  [class~="usk-radio"],
+  [class~="usk-switch"],
+  [class~="ui-check"],
+  [class~="ui-radio"],
+  [class~="ui-switch"]
+) > input:is([type="checkbox"], [type="radio"]) {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+  opacity: 0;
+}
+
+/** Centers fallback initials while keeping accessible status metadata out of the avatar grid. */
+[data-ui][data-mode] :where([class~="usk-avatar"], [class~="ui-avatar"]) > [aria-hidden="true"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 100%;
+  block-size: 100%;
+  line-height: 1;
+  translate: 0 .05em;
+}
+
+[data-ui][data-mode] :where([class~="usk-avatar"], [class~="ui-avatar"]) > [role="status"] {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-end: 0;
+}
+
+/** Keeps the native remove action compact inside a chip without requiring a React-only class. */
+[data-ui][data-mode] :where([class~="usk-chip"], [class~="ui-chip"]) > button {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  align-self: center;
+  justify-content: center;
+  box-sizing: border-box;
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  min-inline-size: 1.5rem;
+  min-block-size: 1.5rem;
+  margin: var(--usk-element-margin-min);
+  padding: 2px;
+  line-height: 1;
+  vertical-align: middle;
+}
+
+[data-ui][data-mode] :where([class~="usk-chip"], [class~="ui-chip"]) > button > svg {
+  display: block;
+  inline-size: 0.75rem;
+  block-size: 0.75rem;
+  margin: 0;
+  padding: 0;
+}
+
+/** Normalizes semantic SVG icons without requiring a framework-specific class. */
+[data-ui][data-mode] :where([data-ui-icon]) {
+  display: block;
+  flex: 0 0 auto;
+  inline-size: 1em;
+  block-size: 1em;
+  margin: 0;
+  padding: 0;
+  overflow: visible;
+}
+
+/** Removes decorative underlines while preserving semantic edit notation. */
+[data-ui][data-mode] :where(*:not(u):not(ins):not(del):not(s):not(.usk-underline)) {
+  text-decoration-line: none;
+}
+
+/** Explicitly restores an underline when a consumer chooses that treatment. */
+[data-ui][data-mode] .usk-underline {
+  text-decoration-line: underline !important;
+}
+
+/** Explicitly removes the library's element spacing contract. */
+[data-ui][data-mode] :where(.flush, .usk-flush) {
+  margin: 0 !important;
+  padding: 0 !important;
+}
+}