ui-style-kit-css 2.2.0 → 2.3.0

package/styles/bauhaus.css

@@ -1,6 +1,6 @@
 /* =========================================================
    UI Style Kit CSS — Bauhaus / Swiss Modern Theme System
-   Includes 10 color schemes, light/dark/contrast modes,
+   Includes 20 color schemes, light/dark/contrast modes,
    component classes, native element coverage, and CSS-only
    accessibility presentation helpers.
 
@@ -131,7 +131,7 @@
   --bau-fg: var(--bau-text);
   --bau-surface-fg: var(--bau-text);
   --bau-muted: var(--bau-text-muted);
-  --bau-border: rgb(var(--bau-border-rgb) / var(--bau-border-alpha));
+  --bau-border: rgb(var(--bau-border-rgb) / max(var(--bau-border-alpha), var(--usk-border-min-alpha)));
   --bau-control-fg: var(--bau-text);
   --bau-primary: rgb(var(--bau-primary-rgb));
   --bau-primary-hover: rgb(var(--bau-primary-hover-rgb));
@@ -161,6 +161,10 @@
   --bau-spinner-accent: var(--bau-accent);
 }
 
+@supports (color: color-mix(in srgb, black, white)) {
+  [data-ui="bauhaus"][data-theme][data-mode] { --bau-border: color-mix(in srgb, rgb(var(--bau-border-rgb) / max(var(--bau-border-alpha), var(--usk-border-min-alpha))), var(--bau-text) var(--usk-border-text-mix)); }
+}
+
 
 
 
@@ -404,6 +408,236 @@
 @keyframes bau-spin { to { transform: rotate(360deg); } }
 
 
+
+/* =========================================================
+   Marketing / Commercial Component Modifiers
+   Reusable visual patterns derived from service-oriented brand systems.
+========================================================= */
+
+.bau-card-media {
+  display: block;
+  inline-size: 100%;
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+  border: 1px solid rgb(var(--bau-border-rgb) / .72);
+  border-radius: var(--bau-radius-lg);
+}
+
+.bau-card-service {
+  position: relative;
+  display: grid;
+  gap: var(--bau-space-3);
+  align-content: start;
+  text-align: center;
+  overflow: visible;
+}
+.bau-card-service > .bau-icon-medallion {
+  justify-self: center;
+  margin-block-start: -2.15rem;
+  position: relative;
+  z-index: 2;
+}
+.bau-card-service > .bau-card-media + .bau-icon-medallion { margin-block-start: -2.15rem; }
+
+.bau-card-feature {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--bau-space-4);
+  align-items: start;
+}
+
+.bau-card-accent-edge {
+  border-inline-start: .35rem solid var(--bau-primary);
+}
+
+.bau-icon-medallion {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 3.75rem;
+  block-size: 3.75rem;
+  flex: 0 0 auto;
+  padding: .7rem;
+  background: var(--bau-primary);
+  color: var(--bau-on-primary);
+  border: 2px solid rgb(var(--bau-border-rgb) / .82);
+  border-radius: 50%;
+  line-height: 1;
+}
+.bau-icon-medallion > :where(svg, img) { inline-size: 100%; block-size: 100%; object-fit: contain; }
+
+.bau-button.bau-button-cut,
+.bau-button-cut {
+  border-radius: 0;
+  clip-path: polygon(.6rem 0, 100% 0, 100% calc(100% - .6rem), calc(100% - .6rem) 100%, 0 100%, 0 .6rem);
+}
+.bau-button.bau-button-cut:focus-visible,
+.bau-button-cut:focus-visible { outline-offset: -3px; }
+
+.bau-button.bau-button-outline-heavy,
+.bau-button-outline-heavy {
+  background: transparent;
+  color: var(--bau-primary);
+  border-style: solid;
+  border-width: 2px;
+  border-color: var(--bau-primary);
+  box-shadow: none;
+}
+.bau-button.bau-button-outline-heavy:hover,
+.bau-button-outline-heavy:hover {
+  background: var(--bau-primary);
+  color: var(--bau-on-primary);
+  border-color: var(--bau-primary-hover);
+}
+
+.bau-badge-seal {
+  display: inline-grid;
+  place-items: center;
+  align-content: center;
+  inline-size: 5rem;
+  min-inline-size: 5rem;
+  aspect-ratio: 1;
+  padding: .65rem;
+  background: var(--bau-surface-strong);
+  color: var(--bau-text);
+  border: 2px solid var(--bau-primary);
+  border-radius: 50%;
+  text-align: center;
+  font-family: var(--bau-font-heading);
+  font-size: .72rem;
+  font-weight: 900;
+  line-height: 1.05;
+  letter-spacing: .04em;
+}
+
+.bau-feature-strip {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
+  overflow: hidden;
+  background: var(--bau-card-bg);
+  color: var(--bau-text);
+  border: 1px solid var(--bau-border);
+  border-radius: var(--bau-radius-lg);
+}
+
+.bau-feature-item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: var(--bau-space-3);
+  min-inline-size: 0;
+  padding: var(--bau-space-4);
+  border-inline-end: 1px solid rgb(var(--bau-border-rgb) / .62);
+}
+.bau-feature-item:last-child { border-inline-end: 0; }
+.bau-feature-item > :where(p, small) { margin: 0; color: var(--bau-text-muted); }
+
+.bau-callout-bar {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--bau-space-4);
+  padding: var(--bau-space-4) var(--bau-space-5);
+  background: var(--bau-card-bg);
+  color: var(--bau-text);
+  border: 1px solid var(--bau-border);
+  border-radius: var(--bau-radius-lg);
+}
+.bau-callout-bar > :where(p, div) { min-inline-size: 0; }
+.bau-callout-bar > :where(.bau-button, a, button):last-child { justify-self: end; }
+
+.bau-eyebrow {
+  margin: 0;
+  color: var(--bau-primary);
+  font-family: var(--bau-font-heading);
+  font-size: .76rem;
+  font-weight: 900;
+  line-height: 1.2;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+}
+
+.bau-media-scrim {
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+  min-block-size: 12rem;
+  background: var(--bau-surface-soft);
+  border: 1px solid var(--bau-border);
+  border-radius: var(--bau-radius-lg);
+}
+.bau-media-scrim > :where(img, picture, video) {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  min-block-size: inherit;
+  object-fit: cover;
+}
+.bau-media-scrim > :where(figcaption, [data-media-caption]) {
+  position: absolute;
+  z-index: 1;
+  inset-inline: 0;
+  inset-block-end: 0;
+  padding: clamp(1rem, 4vw, 2rem);
+  color: #fff;
+  background: linear-gradient(to top, rgb(0 0 0 / .9), rgb(0 0 0 / .58) 56%, transparent);
+}
+.bau-media-scrim > :where(figcaption, [data-media-caption]) * {
+  color: inherit;
+}
+
+@media (max-width: 42rem) {
+  .bau-callout-bar { grid-template-columns: 1fr; align-items: start; }
+  .bau-callout-bar > :where(.bau-button, a, button):last-child { justify-self: stretch; }
+  .bau-feature-item { border-inline-end: 0; border-block-end: 1px solid rgb(var(--bau-border-rgb) / .62); }
+  .bau-feature-item:last-child { border-block-end: 0; }
+}
+
+.bau-card-service, .bau-card-feature, .bau-feature-strip, .bau-callout-bar, .bau-media-scrim { border-radius: 0; border-width: 2px; }
+.bau-icon-medallion, .bau-badge-seal { border-radius: 0; border-width: 2px; box-shadow: .3rem .3rem 0 var(--bau-text); }
+.bau-card-accent-edge { border-inline-start-width: .5rem; }
+.bau-button-cut { clip-path: polygon(.55rem 0, 100% 0, calc(100% - .55rem) 100%, 0 100%); }
+
+/* Filled and framed actions oppose their cuts to preserve asymmetric composition. */
+.bau-button.bau-button-cut, .bau-button-cut {
+  inline-size: min(100%, 12rem);
+  min-inline-size: 6rem;
+  max-inline-size: 100%;
+  justify-self: start;
+  justify-content: center;
+  clip-path: polygon(.7rem 0, 100% 0, calc(100% - .45rem) 100%, 0 100%);
+}
+.bau-button.bau-button-outline-heavy, .bau-button-outline-heavy {
+  border-width: 2px;
+  border-radius: 0;
+  clip-path: polygon(0 0, calc(100% - .7rem) 0, 100% 100%, .45rem 100%);
+  box-shadow: inset .32rem 0 0 rgb(var(--bau-primary-rgb) / .24);
+}
+
+/* Marketing and native surfaces keep hard edges and one asymmetric primary rail. */
+.bau-card-service, .bau-media-scrim, .bau-feature-strip, .bau-callout-bar, .bau-well {
+  border: 2px solid var(--bau-border);
+  border-inline-start-width: .48rem;
+  border-inline-start-color: var(--bau-primary);
+  border-radius: 0;
+  box-shadow: none;
+}
+[data-ui="bauhaus"][data-theme][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
+  border: 2px solid var(--bau-primary);
+  border-radius: 0;
+  box-shadow: .22rem .22rem 0 rgb(var(--bau-text-rgb) / .72);
+}
+[data-ui="bauhaus"][data-theme][data-mode] :where(dialog) {
+  border: 2px solid var(--bau-border);
+  border-inline-start-width: .48rem;
+  border-radius: 0;
+  box-shadow: .4rem .4rem 0 rgb(var(--bau-text-rgb) / .32);
+}
+
+/* Busy indicators use a hard-edged four-field Bauhaus composition. */
+.bau-button[aria-busy="true"]::after, .bau-icon-button[aria-busy="true"]::after, [data-ui="bauhaus"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
+  border: .12em double currentColor; border-radius: 0; background: conic-gradient(currentColor 0 25%, transparent 0 50%, currentColor 0 75%, transparent 0); box-shadow: none; clip-path: inset(0); animation: bau-spin .78s steps(4, end) infinite;
+}
+
 @media (prefers-reduced-motion: reduce) {
   [data-ui="bauhaus"] *, [data-ui="bauhaus"] *::before, [data-ui="bauhaus"] *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
 }
@@ -411,7 +645,7 @@
   [data-ui="bauhaus"] { --bau-border-alpha: 1; --bau-focus-alpha: .75; }
 }
 @media (forced-colors: active) {
-  [data-ui="bauhaus"] * { forced-color-adjust: auto; }
+  @supports (forced-color-adjust: auto) { [data-ui="bauhaus"] * { forced-color-adjust: auto; } }
   [data-ui="bauhaus"] :where(:focus-visible) { outline: 3px solid CanvasText; }
 }
 @media print {

package/styles/bento.css

@@ -1,6 +1,6 @@
 /* =========================================================
    UI Style Kit CSS — Bento UI Theme System
-   Includes 10 color schemes, light/dark/contrast modes,
+   Includes 20 color schemes, light/dark/contrast modes,
    component classes, native element coverage, and CSS-only
    accessibility presentation helpers.
 
@@ -131,7 +131,7 @@
   --bento-fg: var(--bento-text);
   --bento-surface-fg: var(--bento-text);
   --bento-muted: var(--bento-text-muted);
-  --bento-border: rgb(var(--bento-border-rgb) / var(--bento-border-alpha));
+  --bento-border: rgb(var(--bento-border-rgb) / max(var(--bento-border-alpha), var(--usk-border-min-alpha)));
   --bento-control-fg: var(--bento-text);
   --bento-primary: rgb(var(--bento-primary-rgb));
   --bento-primary-hover: rgb(var(--bento-primary-hover-rgb));
@@ -161,6 +161,10 @@
   --bento-spinner-accent: var(--bento-accent);
 }
 
+@supports (color: color-mix(in srgb, black, white)) {
+  [data-ui="bento"][data-theme][data-mode] { --bento-border: color-mix(in srgb, rgb(var(--bento-border-rgb) / max(var(--bento-border-alpha), var(--usk-border-min-alpha))), var(--bento-text) var(--usk-border-text-mix)); }
+}
+
 
 
 
@@ -370,11 +374,32 @@
 .bento-skip-link:focus { transform: translateY(0); }
 
 /* Bento-specific layout helpers */
-.bento-grid-feature { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(8rem, auto); gap: var(--bento-space-5); }
+.bento-grid-feature {
+  container-type: inline-size;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
+  grid-auto-rows: minmax(9rem, auto);
+  gap: var(--bento-space-5);
+}
 .bento-tile { min-height: 12rem; padding: var(--bento-space-6); background: linear-gradient(135deg, rgb(var(--bento-primary-rgb) / .1), transparent 48%), var(--bento-surface); border: 1px solid var(--bento-border); border-radius: var(--bento-radius-xl); box-shadow: 0 16px 40px rgb(0 0 0 / var(--bento-shadow-alpha)); }
-.bento-tile-lg { grid-column: span 4; grid-row: span 2; } .bento-tile-md { grid-column: span 3; } .bento-tile-sm { grid-column: span 2; }
-.bento-stat { display: grid; gap: .25rem; } .bento-stat-value { color: var(--bento-primary); font-size: clamp(2rem, 4vw, 3rem); font-weight: 950; line-height: 1; } .bento-stat-label { color: var(--bento-text-muted); font-weight: 750; }
-@media (max-width: 760px) { .bento-grid-feature { grid-template-columns: 1fr; } .bento-tile-lg, .bento-tile-md, .bento-tile-sm { grid-column: auto; grid-row: auto; } }
+.bento-tile,
+.bento-tile-lg,
+.bento-tile-md,
+.bento-tile-sm {
+  min-inline-size: 0;
+  grid-column: auto;
+  grid-row: auto;
+}
+.bento-stat { display: grid; gap: .25rem; }
+.bento-stat-value { color: var(--bento-primary); font-size: clamp(2rem, 4vw, 3rem); font-weight: 950; line-height: 1; }
+.bento-stat-label { color: var(--bento-text-muted); font-weight: 750; overflow-wrap: normal; word-break: normal; }
+
+@container (min-width: 34rem) {
+  .bento-tile-lg {
+    grid-column: span 2;
+    grid-row: span 2;
+  }
+}
 
 /* Spinner geometry follows the bento preset's compact tile language. */
 .bento-spinner, .bento-loading-spinner, [data-ui="bento"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
@@ -406,6 +431,240 @@
 @keyframes bento-spin { to { transform: rotate(360deg); } }
 
 
+
+/* =========================================================
+   Marketing / Commercial Component Modifiers
+   Reusable visual patterns derived from service-oriented brand systems.
+========================================================= */
+
+.bento-card-media {
+  display: block;
+  inline-size: 100%;
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+  border: 1px solid rgb(var(--bento-border-rgb) / .72);
+  border-radius: var(--bento-radius-lg);
+}
+
+.bento-card-service {
+  position: relative;
+  display: grid;
+  gap: var(--bento-space-3);
+  align-content: start;
+  text-align: center;
+  overflow: visible;
+}
+.bento-card-service > .bento-icon-medallion {
+  justify-self: center;
+  margin-block-start: -2.15rem;
+  position: relative;
+  z-index: 2;
+}
+.bento-card-service > .bento-card-media + .bento-icon-medallion { margin-block-start: -2.15rem; }
+
+.bento-card-feature {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--bento-space-4);
+  align-items: start;
+}
+
+.bento-card-accent-edge {
+  border-inline-start: .35rem solid var(--bento-primary);
+}
+
+.bento-icon-medallion {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 3.75rem;
+  block-size: 3.75rem;
+  flex: 0 0 auto;
+  padding: .7rem;
+  background: var(--bento-primary);
+  color: var(--bento-on-primary);
+  border: 2px solid rgb(var(--bento-border-rgb) / .82);
+  border-radius: 50%;
+  line-height: 1;
+}
+.bento-icon-medallion > :where(svg, img) { inline-size: 100%; block-size: 100%; object-fit: contain; }
+
+.bento-button.bento-button-cut,
+.bento-button-cut {
+  border-radius: 0;
+  clip-path: polygon(.6rem 0, 100% 0, 100% calc(100% - .6rem), calc(100% - .6rem) 100%, 0 100%, 0 .6rem);
+}
+.bento-button.bento-button-cut:focus-visible,
+.bento-button-cut:focus-visible { outline-offset: -3px; }
+
+.bento-button.bento-button-outline-heavy,
+.bento-button-outline-heavy {
+  background: transparent;
+  color: var(--bento-primary);
+  border-style: solid;
+  border-width: 2px;
+  border-color: var(--bento-primary);
+  box-shadow: none;
+}
+.bento-button.bento-button-outline-heavy:hover,
+.bento-button-outline-heavy:hover {
+  background: var(--bento-primary);
+  color: var(--bento-on-primary);
+  border-color: var(--bento-primary-hover);
+}
+
+.bento-badge-seal {
+  display: inline-grid;
+  place-items: center;
+  align-content: center;
+  inline-size: 5rem;
+  min-inline-size: 5rem;
+  aspect-ratio: 1;
+  padding: .65rem;
+  background: var(--bento-surface-strong);
+  color: var(--bento-text);
+  border: 2px solid var(--bento-primary);
+  border-radius: 50%;
+  text-align: center;
+  font-family: var(--bento-font-heading);
+  font-size: .72rem;
+  font-weight: 900;
+  line-height: 1.05;
+  letter-spacing: .04em;
+}
+
+.bento-feature-strip {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
+  overflow: hidden;
+  background: var(--bento-card-bg);
+  color: var(--bento-text);
+  border: 1px solid var(--bento-border);
+  border-radius: var(--bento-radius-lg);
+}
+
+.bento-feature-item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: var(--bento-space-3);
+  min-inline-size: 0;
+  padding: var(--bento-space-4);
+  border-inline-end: 1px solid rgb(var(--bento-border-rgb) / .62);
+}
+.bento-feature-item:last-child { border-inline-end: 0; }
+.bento-feature-item > :where(p, small) { margin: 0; color: var(--bento-text-muted); }
+
+.bento-callout-bar {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--bento-space-4);
+  padding: var(--bento-space-4) var(--bento-space-5);
+  background: var(--bento-card-bg);
+  color: var(--bento-text);
+  border: 1px solid var(--bento-border);
+  border-radius: var(--bento-radius-lg);
+}
+.bento-callout-bar > :where(p, div) { min-inline-size: 0; }
+.bento-callout-bar > :where(.bento-button, a, button):last-child { justify-self: end; }
+
+.bento-eyebrow {
+  margin: 0;
+  color: var(--bento-primary);
+  font-family: var(--bento-font-heading);
+  font-size: .76rem;
+  font-weight: 900;
+  line-height: 1.2;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+}
+
+.bento-media-scrim {
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+  min-block-size: 12rem;
+  background: var(--bento-surface-soft);
+  border: 1px solid var(--bento-border);
+  border-radius: var(--bento-radius-lg);
+}
+.bento-media-scrim > :where(img, picture, video) {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  min-block-size: inherit;
+  object-fit: cover;
+}
+.bento-media-scrim > :where(figcaption, [data-media-caption]) {
+  position: absolute;
+  z-index: 1;
+  inset-inline: 0;
+  inset-block-end: 0;
+  padding: clamp(1rem, 4vw, 2rem);
+  color: #fff;
+  background: linear-gradient(to top, rgb(0 0 0 / .9), rgb(0 0 0 / .58) 56%, transparent);
+}
+.bento-media-scrim > :where(figcaption, [data-media-caption]) * {
+  color: inherit;
+}
+
+@media (max-width: 42rem) {
+  .bento-callout-bar { grid-template-columns: 1fr; align-items: start; }
+  .bento-callout-bar > :where(.bento-button, a, button):last-child { justify-self: stretch; }
+  .bento-feature-item { border-inline-end: 0; border-block-end: 1px solid rgb(var(--bento-border-rgb) / .62); }
+  .bento-feature-item:last-child { border-block-end: 0; }
+}
+
+.bento-card-service, .bento-card-feature { border-radius: var(--bento-radius-xl); }
+.bento-icon-medallion { border-radius: 32%; box-shadow: 0 .8rem 1.8rem rgb(0 0 0 / .16); }
+.bento-feature-strip { gap: var(--bento-space-3); padding: var(--bento-space-3); }
+.bento-feature-item { border: 1px solid var(--bento-border); border-radius: var(--bento-radius-lg); }
+
+/* Filled and framed actions behave as bounded tiles with matching stepped corners. */
+.bento-button.bento-button-cut, .bento-button-cut {
+  inline-size: min(100%, 14rem);
+  min-inline-size: 6rem;
+  max-inline-size: 100%;
+  justify-self: center;
+  justify-content: center;
+  clip-path: polygon(0 0, calc(100% - .65rem) 0, 100% .65rem, 100% calc(100% - .65rem), calc(100% - .65rem) 100%, 0 100%);
+}
+.bento-button.bento-button-outline-heavy, .bento-button-outline-heavy {
+  border-width: 2px;
+  border-radius: 0;
+  clip-path: polygon(0 .5rem, .5rem 0, 100% 0, 100% calc(100% - .5rem), calc(100% - .5rem) 100%, 0 100%);
+  box-shadow: inset 0 0 0 1px rgb(var(--bento-surface-strong-rgb) / .82);
+}
+
+/* Cards, strips, and native surfaces use nested tile framing instead of pills. */
+.bento-card-service, .bento-media-scrim, .bento-feature-strip, .bento-callout-bar {
+  border: 1px solid var(--bento-border);
+  border-radius: var(--bento-radius-xl);
+  box-shadow: inset 0 0 0 1px rgb(var(--bento-surface-strong-rgb) / .62), 0 .75rem 1.5rem rgb(var(--bento-text-rgb) / .1);
+}
+.bento-grid-feature {
+  padding: var(--bento-space-3);
+  background: rgb(var(--bento-surface-rgb) / .36);
+  border: 1px solid var(--bento-border);
+  border-radius: var(--bento-radius-xl);
+  box-shadow: inset 0 0 0 1px rgb(var(--bento-surface-strong-rgb) / .6);
+}
+[data-ui="bento"][data-theme][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
+  border: 2px solid var(--bento-primary);
+  border-radius: var(--bento-radius-sm);
+  box-shadow: inset 0 0 0 1px rgb(var(--bento-surface-strong-rgb) / .68);
+}
+[data-ui="bento"][data-theme][data-mode] :where(dialog) {
+  border: 1px solid var(--bento-border);
+  border-radius: var(--bento-radius-xl);
+  box-shadow: inset 0 0 0 1px rgb(var(--bento-surface-strong-rgb) / .64), 0 1rem 2.2rem rgb(var(--bento-text-rgb) / .18);
+}
+
+/* Busy indicators rotate as compact stepped tiles. */
+.bento-button[aria-busy="true"]::after, .bento-icon-button[aria-busy="true"]::after, [data-ui="bento"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
+  border: .12em solid currentColor; border-radius: .18em; background: conic-gradient(currentColor 0 25%, transparent 0 50%, currentColor 0 75%, transparent 0); box-shadow: inset 0 0 0 .12em rgb(var(--bento-surface-rgb) / .72); clip-path: inset(0 round .18em); animation: bento-spin .86s steps(4, end) infinite;
+}
+
 @media (prefers-reduced-motion: reduce) {
   [data-ui="bento"] *, [data-ui="bento"] *::before, [data-ui="bento"] *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
 }
@@ -413,7 +672,7 @@
   [data-ui="bento"] { --bento-border-alpha: 1; --bento-focus-alpha: .75; }
 }
 @media (forced-colors: active) {
-  [data-ui="bento"] * { forced-color-adjust: auto; }
+  @supports (forced-color-adjust: auto) { [data-ui="bento"] * { forced-color-adjust: auto; } }
   [data-ui="bento"] :where(:focus-visible) { outline: 3px solid CanvasText; }
 }
 @media print {