ui-style-kit-css 2.0.3 → 2.1.0

package/styles/content-overflow.css

@@ -0,0 +1,292 @@
+/* =========================================================
+   UI Style Kit CSS - Shared Content Overflow Contract
+
+   Text-bearing layout wrappers and controls must shrink within
+   their parent wrapper instead of widening the page.
+========================================================= */
+
+@layer ui-style-kit.content_overflow {
+[data-ui][data-theme][data-mode] :where(
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  a,
+  li,
+  dt,
+  dd,
+  figcaption,
+  blockquote,
+  label,
+  legend,
+  summary,
+  code,
+  kbd,
+  samp,
+  pre,
+  th,
+  td
+) {
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+[data-ui][data-theme][data-mode] :where(
+  [class~="saas-page"],
+  [class~="saas-container"],
+  [class~="saas-section"],
+  [class~="saas-stack"],
+  [class~="saas-cluster"],
+  [class~="saas-grid"],
+  [class~="saas-split"],
+  [class~="saas-surface"],
+  [class~="saas-surface-sm"],
+  [class~="saas-surface-lg"],
+  [class~="saas-card"],
+  [class~="saas-panel"],
+  [class~="saas-toolbar"],
+  [class~="saas-well"],
+  [class~="saas-inset"],
+  [class~="saas-field"],
+  [class~="saas-alert"],
+  [class~="saas-table-wrap"],
+  [class~="saas-nav"],
+  [class~="bento-page"],
+  [class~="bento-container"],
+  [class~="bento-section"],
+  [class~="bento-stack"],
+  [class~="bento-cluster"],
+  [class~="bento-grid"],
+  [class~="bento-split"],
+  [class~="bento-surface"],
+  [class~="bento-surface-sm"],
+  [class~="bento-surface-lg"],
+  [class~="bento-card"],
+  [class~="bento-panel"],
+  [class~="bento-toolbar"],
+  [class~="bento-well"],
+  [class~="bento-inset"],
+  [class~="bento-field"],
+  [class~="bento-alert"],
+  [class~="bento-table-wrap"],
+  [class~="bento-nav"],
+  [class~="max-page"],
+  [class~="max-container"],
+  [class~="max-section"],
+  [class~="max-stack"],
+  [class~="max-cluster"],
+  [class~="max-grid"],
+  [class~="max-split"],
+  [class~="max-surface"],
+  [class~="max-surface-sm"],
+  [class~="max-surface-lg"],
+  [class~="max-card"],
+  [class~="max-panel"],
+  [class~="max-toolbar"],
+  [class~="max-well"],
+  [class~="max-inset"],
+  [class~="max-field"],
+  [class~="max-alert"],
+  [class~="max-table-wrap"],
+  [class~="max-nav"],
+  [class~="bau-page"],
+  [class~="bau-container"],
+  [class~="bau-section"],
+  [class~="bau-stack"],
+  [class~="bau-cluster"],
+  [class~="bau-grid"],
+  [class~="bau-split"],
+  [class~="bau-surface"],
+  [class~="bau-surface-sm"],
+  [class~="bau-surface-lg"],
+  [class~="bau-card"],
+  [class~="bau-panel"],
+  [class~="bau-toolbar"],
+  [class~="bau-well"],
+  [class~="bau-inset"],
+  [class~="bau-field"],
+  [class~="bau-alert"],
+  [class~="bau-table-wrap"],
+  [class~="bau-nav"],
+  [class~="tactile-page"],
+  [class~="tactile-container"],
+  [class~="tactile-section"],
+  [class~="tactile-stack"],
+  [class~="tactile-cluster"],
+  [class~="tactile-grid"],
+  [class~="tactile-split"],
+  [class~="tactile-surface"],
+  [class~="tactile-surface-sm"],
+  [class~="tactile-surface-lg"],
+  [class~="tactile-card"],
+  [class~="tactile-panel"],
+  [class~="tactile-toolbar"],
+  [class~="tactile-well"],
+  [class~="tactile-inset"],
+  [class~="tactile-field"],
+  [class~="tactile-alert"],
+  [class~="tactile-table-wrap"],
+  [class~="tactile-nav"],
+  [class~="neo-page"],
+  [class~="neo-container"],
+  [class~="neo-section"],
+  [class~="neo-stack"],
+  [class~="neo-cluster"],
+  [class~="neo-grid"],
+  [class~="neo-split"],
+  [class~="neo-surface"],
+  [class~="neo-surface-sm"],
+  [class~="neo-surface-lg"],
+  [class~="neo-card"],
+  [class~="neo-panel"],
+  [class~="neo-toolbar"],
+  [class~="neo-well"],
+  [class~="neo-inset"],
+  [class~="neo-field"],
+  [class~="neo-alert"],
+  [class~="neo-table-wrap"],
+  [class~="neo-nav"],
+  [class~="retro-page"],
+  [class~="retro-container"],
+  [class~="retro-section"],
+  [class~="retro-stack"],
+  [class~="retro-cluster"],
+  [class~="retro-grid"],
+  [class~="retro-split"],
+  [class~="retro-surface"],
+  [class~="retro-surface-sm"],
+  [class~="retro-surface-lg"],
+  [class~="retro-card"],
+  [class~="retro-panel"],
+  [class~="retro-toolbar"],
+  [class~="retro-well"],
+  [class~="retro-inset"],
+  [class~="retro-field"],
+  [class~="retro-alert"],
+  [class~="retro-table-wrap"],
+  [class~="retro-nav"],
+  [class~="brutal-page"],
+  [class~="brutal-container"],
+  [class~="brutal-section"],
+  [class~="brutal-stack"],
+  [class~="brutal-cluster"],
+  [class~="brutal-grid"],
+  [class~="brutal-surface"],
+  [class~="brutal-card"],
+  [class~="brutal-panel"],
+  [class~="brutal-toolbar"],
+  [class~="brutal-well"],
+  [class~="brutal-inset"],
+  [class~="brutal-field"],
+  [class~="brutal-alert"],
+  [class~="brutal-table-wrap"],
+  [class~="brutal-nav"],
+  [class~="cyber-page"],
+  [class~="cyber-container"],
+  [class~="cyber-section"],
+  [class~="cyber-stack"],
+  [class~="cyber-cluster"],
+  [class~="cyber-grid"],
+  [class~="cyber-surface"],
+  [class~="cyber-card"],
+  [class~="cyber-panel"],
+  [class~="cyber-toolbar"],
+  [class~="cyber-well"],
+  [class~="cyber-inset"],
+  [class~="cyber-field"],
+  [class~="cyber-alert"],
+  [class~="cyber-table-wrap"],
+  [class~="cyber-nav"],
+  [class~="y2k-page"],
+  [class~="y2k-container"],
+  [class~="y2k-section"],
+  [class~="y2k-stack"],
+  [class~="y2k-cluster"],
+  [class~="y2k-grid"],
+  [class~="y2k-surface"],
+  [class~="y2k-card"],
+  [class~="y2k-panel"],
+  [class~="y2k-toolbar"],
+  [class~="y2k-well"],
+  [class~="y2k-inset"],
+  [class~="y2k-field"],
+  [class~="y2k-alert"],
+  [class~="y2k-table-wrap"],
+  [class~="y2k-nav"],
+  [class~="rg-page"],
+  [class~="rg-container"],
+  [class~="rg-section"],
+  [class~="rg-stack"],
+  [class~="rg-cluster"],
+  [class~="rg-grid"],
+  [class~="rg-surface"],
+  [class~="rg-card"],
+  [class~="rg-panel"],
+  [class~="rg-toolbar"],
+  [class~="rg-well"],
+  [class~="rg-inset"],
+  [class~="rg-field"],
+  [class~="rg-alert"],
+  [class~="rg-table-wrap"],
+  [class~="rg-nav"]
+) {
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+[data-ui][data-theme][data-mode] :where(
+  [class~="saas-button"],
+  [class~="saas-icon-button"],
+  [class~="saas-badge"],
+  [class~="saas-nav-link"],
+  [class~="bento-button"],
+  [class~="bento-icon-button"],
+  [class~="bento-badge"],
+  [class~="bento-nav-link"],
+  [class~="max-button"],
+  [class~="max-icon-button"],
+  [class~="max-badge"],
+  [class~="max-nav-link"],
+  [class~="bau-button"],
+  [class~="bau-icon-button"],
+  [class~="bau-badge"],
+  [class~="bau-nav-link"],
+  [class~="tactile-button"],
+  [class~="tactile-icon-button"],
+  [class~="tactile-badge"],
+  [class~="tactile-nav-link"],
+  [class~="neo-button"],
+  [class~="neo-icon-button"],
+  [class~="neo-badge"],
+  [class~="neo-nav-link"],
+  [class~="retro-button"],
+  [class~="retro-icon-button"],
+  [class~="retro-badge"],
+  [class~="retro-nav-link"],
+  [class~="brutal-button"],
+  [class~="brutal-icon-button"],
+  [class~="brutal-badge"],
+  [class~="brutal-nav-link"],
+  [class~="cyber-button"],
+  [class~="cyber-icon-button"],
+  [class~="cyber-badge"],
+  [class~="cyber-nav-link"],
+  [class~="y2k-button"],
+  [class~="y2k-icon-button"],
+  [class~="y2k-badge"],
+  [class~="y2k-nav-link"],
+  [class~="rg-button"],
+  [class~="rg-icon-button"],
+  [class~="rg-badge"],
+  [class~="rg-nav-link"]
+) {
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  white-space: normal;
+}
+}

package/styles/cyberpunk.css

@@ -14,6 +14,7 @@
 
 @import url("./theme-colors.css");
 @import url("./native-elements.css");
+@import url("./content-overflow.css");
 
 @layer ui-style-kit.cyberpunk {
 :root {
@@ -292,14 +293,14 @@
 
 .cyber-button, .cyber-icon-button { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--cyber-space-2); min-height: 2.85rem; padding: 0.75rem 1.1rem; background: linear-gradient(135deg, rgb(var(--cyber-primary-rgb) / 0.22), rgb(var(--cyber-accent-rgb) / 0.1)), var(--cyber-surface); color: var(--cyber-text); border: 1px solid rgb(var(--cyber-primary-rgb) / 0.7); border-radius: var(--cyber-radius-xs); box-shadow: var(--cyber-shadow-sm), 0 0 18px var(--cyber-glow-primary); font: inherit; font-family: var(--cyber-font-display); font-weight: 900; letter-spacing: 0.09em; cursor: pointer; text-decoration: none; clip-path: polygon(0 0, calc(100% - .75rem) 0, 100% .75rem, 100% 100%, .75rem 100%, 0 calc(100% - .75rem)); transition: transform var(--cyber-transition-fast), box-shadow var(--cyber-transition-fast), background var(--cyber-transition-fast); }
 .cyber-button:hover, .cyber-icon-button:hover { transform: translateY(-1px); box-shadow: var(--cyber-shadow-md), 0 0 26px var(--cyber-glow-primary); } .cyber-button:active, .cyber-icon-button:active, .cyber-button.is-active, .cyber-button[aria-pressed="true"] { transform: translateY(1px); box-shadow: inset 0 0 18px rgb(0 0 0 / 0.22), 0 0 18px var(--cyber-glow-primary); }
-.cyber-button-primary { background: linear-gradient(135deg, rgb(255 255 255 / 0.14), transparent), var(--cyber-primary); color: var(--cyber-on-primary); } .cyber-button-primary:hover { background: var(--cyber-primary-hover); } .cyber-button-secondary { background: linear-gradient(135deg, rgb(255 255 255 / 0.14), transparent), var(--cyber-secondary); color: var(--cyber-on-secondary); border-color: rgb(var(--cyber-secondary-rgb) / 0.7); } .cyber-button-secondary:hover { background: var(--cyber-secondary-hover); } .cyber-button-danger { background: var(--cyber-danger); color: #fff; } .cyber-icon-button { width: 2.85rem; padding: 0; }
+.cyber-button-primary { background: linear-gradient(135deg, rgb(255 255 255 / 0.14), transparent), var(--cyber-primary); color: var(--cyber-on-primary); } .cyber-button-primary:hover { background: var(--cyber-primary-hover); } .cyber-button-secondary { background: linear-gradient(135deg, rgb(255 255 255 / 0.14), transparent), var(--cyber-secondary); color: var(--cyber-on-secondary); border-color: rgb(var(--cyber-secondary-rgb) / 0.7); } .cyber-button-secondary:hover { background: var(--cyber-secondary-hover); } .cyber-button-danger { background: var(--cyber-danger); color: var(--cyber-on-danger); } .cyber-icon-button { width: 2.85rem; padding: 0; }
 
 .cyber-field { display: flex; flex-direction: column; gap: var(--cyber-space-2); } .cyber-label { font-family: var(--cyber-font-heading); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 800; font-size: 0.8rem; }
 .cyber-input, .cyber-textarea, .cyber-select { width: 100%; min-height: 2.9rem; padding: 0.8rem 1rem; background: var(--cyber-surface-soft); color: var(--cyber-text); border: 1px solid rgb(var(--cyber-border-rgb) / 0.58); border-radius: var(--cyber-radius-xs); box-shadow: inset 0 0 18px rgb(0 0 0 / 0.2); font: inherit; outline: none; } .cyber-textarea { min-height: 8rem; resize: vertical; }
 .cyber-input:focus, .cyber-textarea:focus, .cyber-select:focus { border-color: var(--cyber-focus); box-shadow: 0 0 0 2px rgb(var(--cyber-focus-rgb) / 0.24), 0 0 24px rgb(var(--cyber-focus-rgb) / 0.24), inset 0 0 18px rgb(0 0 0 / 0.2); } .cyber-help-text { color: var(--cyber-text-muted); font-size: 0.9rem; }
 
 .cyber-badge { display: inline-flex; align-items: center; min-height: 1.8rem; padding: 0.35rem 0.75rem; background: var(--cyber-surface); color: var(--cyber-text); border: 1px solid rgb(var(--cyber-primary-rgb) / 0.7); box-shadow: 0 0 16px var(--cyber-glow-primary); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.1em; clip-path: polygon(.5rem 0, 100% 0, calc(100% - .5rem) 100%, 0 100%); }
-.cyber-badge-primary { background: var(--cyber-primary); color: var(--cyber-on-primary); } .cyber-badge-secondary { background: var(--cyber-secondary); color: var(--cyber-on-secondary); } .cyber-badge-success { background: var(--cyber-success); color: #fff; } .cyber-badge-warning { background: var(--cyber-warning); color: #111; } .cyber-badge-danger { background: var(--cyber-danger); color: #fff; }
+.cyber-badge-primary { background: var(--cyber-primary); color: var(--cyber-on-primary); } .cyber-badge-secondary { background: var(--cyber-secondary); color: var(--cyber-on-secondary); } .cyber-badge-success { background: var(--cyber-success); color: var(--cyber-on-success); } .cyber-badge-warning { background: var(--cyber-warning); color: var(--cyber-on-warning); } .cyber-badge-danger { background: var(--cyber-danger); color: var(--cyber-on-danger); }
 
 .cyber-nav { display: flex; flex-wrap: wrap; gap: var(--cyber-space-2); padding: var(--cyber-space-2); background: var(--cyber-surface); border: 1px solid var(--cyber-border); border-radius: var(--cyber-radius-md); box-shadow: var(--cyber-shadow-md), 0 0 22px var(--cyber-glow-primary); } .cyber-nav-link { display: inline-flex; min-height: 2.5rem; align-items: center; padding: 0.65rem 1rem; color: var(--cyber-text-muted); border: 1px solid transparent; border-radius: var(--cyber-radius-xs); text-decoration: none; font-weight: 900; letter-spacing: 0.08em; } .cyber-nav-link:hover { color: var(--cyber-text); border-color: rgb(var(--cyber-primary-rgb) / 0.48); } .cyber-nav-link.is-active, .cyber-nav-link[aria-current="page"] { background: var(--cyber-primary); color: var(--cyber-on-primary); border-color: var(--cyber-primary); box-shadow: 0 0 18px var(--cyber-glow-primary); }
 /* Tooltips use compact contrast surfaces that stay readable across theme modes. */

package/styles/interactive-surface-bridge.css

@@ -1,8 +1,10 @@
 /* =========================================================
-   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.
 ========================================================= */

package/styles/interactive-surface-theme.css

@@ -0,0 +1,114 @@
+/* =========================================================
+   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;
+  --interactive-surface-bg: rgb(var(--usk-surface-strong-rgb, var(--usk-surface-rgb, 255 255 255)));
+  --interactive-surface-fg: 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: 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: rgb(var(--usk-primary-rgb, 72 120 255));
+  --interactive-surface-variant-primary-fg: 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: 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

@@ -13,6 +13,7 @@
 
 @import url("./theme-colors.css");
 @import url("./native-elements.css");
+@import url("./content-overflow.css");
 
 @layer ui-style-kit.maximalist {
 :root {
@@ -369,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/minimal-saas.css

@@ -13,6 +13,7 @@
 
 @import url("./theme-colors.css");
 @import url("./native-elements.css");
+@import url("./content-overflow.css");
 
 @layer ui-style-kit.minimal_saas {
 :root {