@threadlabs/looma 0.34.0 → 0.35.1

package/styles/ui-select.css

@@ -61,7 +61,7 @@
       border-radius: var(--ui-select-radius, var(--ui-field-radius, var(--ui-radius-md)));
       background-color: var(--ui-select-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
       color: var(--ui-text-primary);
-      color-scheme: light dark;
+      color-scheme: inherit;
       font: inherit;
       line-height: var(--ui-line-height-tight);
       box-shadow: var(--ui-select-shadow, var(--ui-shadow-sm));
@@ -74,15 +74,16 @@
     /* The select draws its own chevron: the native caret cannot be inset or sized consistently.
      * The root stays a native <s-lect>, so the icon is a background image rather than an element. */
     :scope:where([data-component~="ui-select"]) {
+      --_ui-select-highlight: var(--ui-surface-highlight, linear-gradient(transparent, transparent));
       appearance: none;
       padding-inline-end: calc(var(--ui-space-3) + 1.5rem) !important;
       background-image: var(
         --ui-select-chevron,
         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5c58' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
-      );
+      ), var(--_ui-select-highlight);
       background-repeat: no-repeat;
-      background-position: right var(--ui-space-3) center;
-      background-size: 1.125rem 1.125rem;
+      background-position: right var(--ui-space-3) center, center;
+      background-size: 1.125rem 1.125rem, 100% 100%;
     }
 
     :scope:where([data-component~="ui-select"]):hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])) {
@@ -114,6 +115,7 @@
     }
 
     :scope:where([data-component~="ui-select"]):disabled {
+      --_ui-select-highlight: none;
       background-color: var(--ui-control-surface-disabled, var(--ui-surface-muted));
       color: var(--ui-disabled-text);
       box-shadow: none;
@@ -124,8 +126,8 @@
       min-block-size: var(--ui-control-size-sm);
       padding: var(--ui-control-inset-block-sm, var(--ui-space-1)) var(--ui-space-2) !important;
       padding-inline-end: calc(var(--ui-space-2) + var(--ui-icon-size-sm) + var(--ui-space-1)) !important;
-      background-position: right var(--ui-space-2) center;
-      background-size: var(--ui-icon-size-sm) var(--ui-icon-size-sm);
+      background-position: right var(--ui-space-2) center, center;
+      background-size: var(--ui-icon-size-sm) var(--ui-icon-size-sm), 100% 100%;
       font-size: var(--ui-font-size-sm);
     }
 
@@ -133,7 +135,7 @@
       min-block-size: var(--ui-control-size-lg);
       padding: var(--ui-control-inset-block-lg, var(--ui-space-3)) var(--ui-space-4) !important;
       padding-inline-end: calc(var(--ui-space-4) + 1.5rem) !important;
-      background-position: right var(--ui-space-4) center;
+      background-position: right var(--ui-space-4) center, center;
       font-size: var(--ui-font-size-md);
     }
 

package/styles/ui-switch.css

@@ -84,6 +84,7 @@
       border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
       border-radius: var(--ui-radius-round);
       background-color: var(--ui-control-surface, var(--ui-surface-default));
+      background-image: var(--ui-surface-highlight, none);
       box-shadow: var(--ui-control-inset);
       cursor: pointer;
       transition: background-color var(--ui-motion-base) var(--ui-motion-ease), border-color var(--ui-motion-base) var(--ui-motion-ease);
@@ -105,6 +106,7 @@
 
     input:checked {
       background-color: var(--ui-accent-solid);
+      background-image: var(--ui-accent-highlight, none);
       border-color: var(--ui-accent-solid);
     }
 
@@ -128,6 +130,7 @@
     :scope:where([data-component~="ui-switch"])[data-ui-switch-state~="disabled"] input {
       border-color: var(--ui-disabled-border);
       background-color: var(--ui-disabled-surface);
+      background-image: none;
       box-shadow: none;
       cursor: not-allowed;
     }

package/styles/ui-tabs.css

@@ -59,10 +59,9 @@
       max-inline-size: 100%;
       /* Tabs that do not fit scroll sideways rather than wrapping or squeezing. */
       overflow-x: auto;
-      /* overflow-x: auto would make the block axis scrollable too; a sideways swipe must not scroll the
-         strip or the page vertically. */
+      /* Contain sideways overscroll without trapping vertical page scrolling. */
       overflow-y: hidden;
-      overscroll-behavior: contain;
+      overscroll-behavior-inline: contain;
       scrollbar-width: thin;
       border-block-end: var(--ui-border-width) solid var(--ui-border-divider);
     }

package/styles/ui-textarea.css

@@ -72,7 +72,8 @@
       border: var(--ui-textarea-border-width, var(--_ui-default-textarea-border-width, var(--ui-border-width))) solid
         var(--ui-textarea-border, var(--_ui-default-textarea-border, var(--ui-control-border, var(--ui-border-strong))));
       border-radius: var(--ui-textarea-radius, var(--_ui-default-textarea-radius, var(--ui-field-radius, var(--ui-radius-md))));
-      background: var(--ui-textarea-surface, var(--_ui-default-textarea-surface, var(--ui-control-surface, var(--ui-surface-elevated))));
+      background-color: var(--ui-textarea-surface, var(--_ui-default-textarea-surface, var(--ui-control-surface, var(--ui-surface-elevated))));
+      background-image: var(--_ui-default-textarea-highlight, var(--ui-surface-highlight, none));
       color: var(--ui-text-primary);
       font: inherit;
       line-height: var(--ui-line-height-md);

package/styles/ui-tooltip.css

@@ -204,7 +204,8 @@
       border-inline-end-width: var(--ui-border-width);
       border-block-end-width: var(--ui-border-width);
       border-end-end-radius: var(--ui-border-width);
-      transform: rotate(45deg) scaleX(1.25) scaleY(0.85);
+      /* Stretch in screen axes after rotation so both arrow shoulders stay level. */
+      transform: scale(1.25, 0.85) rotate(45deg);
     }
 
     :scope:where([data-component~="ui-tooltip"])[data-ui-actual-placement="bottom"] .surface:where(:not([data-component], [data-slotted]))::after {

package/theme-light.css

@@ -2,6 +2,7 @@
   :root:not([data-theme], [data-contrast="high"]),
   [data-theme="light"] {
     color-scheme: light;
+    --ui-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5c58' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
     /* The seeds, and only the seeds. Neutrals, hovers, tints, and disabled colours are mixed from
        these in tokens.css, so a product themes Looma by changing these eleven values. */
     --ui-surface: #ffffff;

package/theme-system.css

@@ -2,6 +2,9 @@
    Existing public roles remain the customization interface; no component selectors. */
 /* Resolve shared geometry once where it is declared, rather than once per consuming
    control's font. Palette roles remain unregistered so light-dark resolves locally. */
+/* Reserve the same order when the remembered theme arrives before baseline CSS. */
+@layer tokens, base, theme, components;
+
 @property --ui-font-size { syntax: "<length>"; inherits: true; initial-value: 16px; }
 @property --ui-control-size { syntax: "<length>"; inherits: true; initial-value: 40px; }
 @property --ui-radius-md { syntax: "<length>"; inherits: true; initial-value: 8px; }
@@ -18,6 +21,12 @@
     --ui-overlay-translucency: 0;
     --ui-glassiness: 0;
     --ui-surface-separation: 0;
+    --ui-finish: 0;
+    --ui-glow: 0;
+    --ui-light-x: 0.5;
+    --ui-light-y: 0;
+    --ui-light-spread: 0.5;
+    --ui-light-strength: 0.65;
   }
 
   :where(:root, [data-theme], [data-contrast]) {
@@ -58,26 +67,47 @@
     --_ui-theme-outer: max(0, var(--ui-outer-depth));
     --_ui-theme-inner: max(0, var(--ui-inner-depth));
     --_ui-theme-edge: clamp(0, var(--ui-edge-light), 1);
-    --_ui-theme-edge-paint: inset 1px 1px 0 rgb(255 255 255 / calc(var(--_ui-theme-edge) * 0.08)), inset -1px -1px 0 rgb(0 0 0 / calc(var(--_ui-theme-edge) * 0.08));
+    --_ui-light-inline: calc((0.5 - var(--ui-light-x)) * 2px);
+    --_ui-shadow-x: calc((0.5 - var(--ui-light-x)) * 2);
+    --_ui-shadow-y: calc((0.5 - var(--ui-light-y)) * 2);
+    --_ui-light-block: calc((0.5 - var(--ui-light-y)) * 2px);
+    --_ui-theme-edge-paint: inset var(--_ui-light-inline) var(--_ui-light-block) 0 rgb(255 255 255 / calc(var(--_ui-theme-edge) * var(--ui-light-strength) * 0.3)), inset calc(-1 * var(--_ui-light-inline)) calc(-1 * var(--_ui-light-block)) 0 rgb(0 0 0 / calc(var(--_ui-theme-edge) * 0.1));
     --ui-action-edge: var(--_ui-theme-edge-paint);
-    --ui-shadow-xs: 0 calc(1px * var(--_ui-theme-outer)) calc(2px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.08);
-    --ui-shadow-sm: 0 calc(1px * var(--_ui-theme-outer)) calc(3px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.12), 0 calc(4px * var(--_ui-theme-outer)) calc(12px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.06);
+    --ui-shadow-xs: calc(1px * var(--_ui-theme-outer) * var(--_ui-shadow-x)) calc(1px * var(--_ui-theme-outer) * var(--_ui-shadow-y)) calc(2px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.08);
+    --ui-shadow-sm: calc(1px * var(--_ui-theme-outer) * var(--_ui-shadow-x)) calc(1px * var(--_ui-theme-outer) * var(--_ui-shadow-y)) calc(3px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.12), calc(4px * var(--_ui-theme-outer) * var(--_ui-shadow-x)) calc(4px * var(--_ui-theme-outer) * var(--_ui-shadow-y)) calc(12px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.06);
     --ui-shadow-md: var(--ui-shadow-sm);
-    --ui-shadow-lg: 0 calc(8px * var(--_ui-theme-outer)) calc(24px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.12), 0 calc(4px * var(--_ui-theme-outer)) calc(8px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.06);
+    --ui-shadow-lg: calc(8px * var(--_ui-theme-outer) * var(--_ui-shadow-x)) calc(8px * var(--_ui-theme-outer) * var(--_ui-shadow-y)) calc(24px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.12), calc(4px * var(--_ui-theme-outer) * var(--_ui-shadow-x)) calc(4px * var(--_ui-theme-outer) * var(--_ui-shadow-y)) calc(8px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.06);
     --ui-shadow-xl: var(--ui-shadow-lg);
-    --ui-action-shadow: var(--ui-shadow-sm);
+    --ui-action-shadow: var(--ui-action-edge), var(--ui-shadow-sm);
     --ui-raised: var(--ui-shadow-sm);
     --ui-elevation-tooltip: var(--ui-shadow-sm);
     --ui-elevation-overlay: var(--ui-shadow-lg);
     --ui-elevation-dialog: var(--ui-shadow-lg);
-    --ui-control-inset: inset 0 calc(1px * var(--_ui-theme-inner)) calc(3px * var(--_ui-theme-inner)) rgb(0 0 0 / 0.15), inset 0 -1px 0 rgb(255 255 255 / calc(var(--_ui-theme-edge) * 0.18));
-    --ui-pressed: inset 0 calc(2px * var(--_ui-theme-inner)) calc(4px * var(--_ui-theme-inner)) rgb(0 0 0 / 0.2);
+    --ui-control-inset: inset calc(var(--_ui-light-inline) * var(--_ui-theme-inner)) calc(var(--_ui-light-block) * var(--_ui-theme-inner)) calc(3px * var(--_ui-theme-inner)) rgb(0 0 0 / 0.15), inset calc(-1 * var(--_ui-light-inline)) calc(-1 * var(--_ui-light-block)) 0 rgb(255 255 255 / calc(var(--_ui-theme-edge) * var(--ui-light-strength) * 0.18)), var(--ui-material-glow);
+    --ui-pressed: inset calc(2 * var(--_ui-light-inline) * var(--_ui-theme-inner)) calc(2 * var(--_ui-light-block) * var(--_ui-theme-inner)) calc(4px * var(--_ui-theme-inner)) rgb(0 0 0 / 0.2);
     --ui-overlay-surface: color-mix(in srgb, var(--ui-surface-raised) calc((1 - clamp(0, var(--ui-overlay-translucency), 1)) * 100%), transparent);
     /* Decorative outer material is allowed to transmit the scene. Content keeps
        its own opaque plane; changing the scene cannot undermine text contrast. */
     --ui-material-content: var(--ui-surface-raised);
     --ui-material-glass: color-mix(in srgb, var(--ui-surface-raised) calc((1 - clamp(0, var(--ui-overlay-translucency), 1)) * 35%), transparent);
     --ui-material-edge: color-mix(in srgb, var(--ui-surface-raised) 80%, var(--ui-text));
+    /* Each role has a bounded reflection colour. Shared source coordinates are
+       relative to each surface, so size and position never change the lighting. */
+    --ui-surface-highlight: radial-gradient(ellipse calc(35% + var(--ui-light-spread) * 165%) calc(55% + var(--ui-light-spread) * 200%) at calc(var(--ui-light-x) * 100%) calc(var(--ui-light-y) * 100%), color-mix(in srgb, var(--ui-surface-reflection, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 100%), transparent), transparent 85%);
+    --ui-neutral-highlight: radial-gradient(ellipse calc(35% + var(--ui-light-spread) * 165%) calc(55% + var(--ui-light-spread) * 200%) at calc(var(--ui-light-x) * 100%) calc(var(--ui-light-y) * 100%), color-mix(in srgb, var(--ui-neutral-reflection, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 100%), transparent), transparent 85%);
+    --ui-accent-highlight: radial-gradient(ellipse calc(35% + var(--ui-light-spread) * 165%) calc(55% + var(--ui-light-spread) * 200%) at calc(var(--ui-light-x) * 100%) calc(var(--ui-light-y) * 100%), color-mix(in srgb, var(--ui-accent-reflection, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 100%), transparent), transparent 85%);
+    --ui-danger-highlight: radial-gradient(ellipse calc(35% + var(--ui-light-spread) * 165%) calc(55% + var(--ui-light-spread) * 200%) at calc(var(--ui-light-x) * 100%) calc(var(--ui-light-y) * 100%), color-mix(in srgb, var(--ui-danger-reflection, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 100%), transparent), transparent 85%);
+    --ui-success-highlight: radial-gradient(ellipse calc(35% + var(--ui-light-spread) * 165%) calc(55% + var(--ui-light-spread) * 200%) at calc(var(--ui-light-x) * 100%) calc(var(--ui-light-y) * 100%), color-mix(in srgb, var(--ui-success-reflection, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 100%), transparent), transparent 85%);
+    --ui-warning-highlight: radial-gradient(ellipse calc(35% + var(--ui-light-spread) * 165%) calc(55% + var(--ui-light-spread) * 200%) at calc(var(--ui-light-x) * 100%) calc(var(--ui-light-y) * 100%), color-mix(in srgb, var(--ui-warning-reflection, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 100%), transparent), transparent 85%);
+    --ui-info-highlight: radial-gradient(ellipse calc(35% + var(--ui-light-spread) * 165%) calc(55% + var(--ui-light-spread) * 200%) at calc(var(--ui-light-x) * 100%) calc(var(--ui-light-y) * 100%), color-mix(in srgb, var(--ui-info-reflection, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 100%), transparent), transparent 85%);
+    --ui-material-glow: 0 0 calc(18px * var(--ui-glow)) color-mix(in srgb, var(--ui-accent) calc(var(--ui-glow) * var(--ui-light-strength) * 18%), transparent);
+    --ui-neutral-glow: 0 0 calc(18px * var(--ui-glow)) color-mix(in srgb, var(--ui-text) calc(var(--ui-glow) * var(--ui-light-strength) * 18%), transparent);
+    --ui-accent-glow: 0 0 calc(18px * var(--ui-glow)) color-mix(in srgb, var(--ui-accent) calc(var(--ui-glow) * var(--ui-light-strength) * 18%), transparent);
+    --ui-danger-glow: 0 0 calc(18px * var(--ui-glow)) color-mix(in srgb, var(--ui-danger) calc(var(--ui-glow) * var(--ui-light-strength) * 18%), transparent);
+    --ui-success-glow: 0 0 calc(18px * var(--ui-glow)) color-mix(in srgb, var(--ui-success) calc(var(--ui-glow) * var(--ui-light-strength) * 18%), transparent);
+    --ui-warning-glow: 0 0 calc(18px * var(--ui-glow)) color-mix(in srgb, var(--ui-warning) calc(var(--ui-glow) * var(--ui-light-strength) * 18%), transparent);
+    --ui-info-glow: 0 0 calc(18px * var(--ui-glow)) color-mix(in srgb, var(--ui-info) calc(var(--ui-glow) * var(--ui-light-strength) * 18%), transparent);
+    --ui-raised-highlight: var(--ui-surface-highlight);
 
     /* Existing timing and easing names stay canonical. */
     --ui-motion-press: var(--ui-motion-fast);
@@ -93,4 +123,10 @@
       --ui-press-scale: 1;
     }
   }
+  @media (prefers-reduced-transparency: reduce), (forced-colors: active) {
+    :where(:root, [data-theme], [data-contrast]) {
+      --ui-finish: 0;
+      --ui-glow: 0;
+    }
+  }
 }

package/tokens.css

@@ -85,6 +85,10 @@
      never has to: these exist so components share one vocabulary, not to be configured. */
   :root,
   :where([data-theme], [data-contrast]) {
+    /* Neutral is a quiet filled surface, never the text colour inverted. */
+    --ui-neutral-surface: color-mix(in srgb, var(--ui-text) 6%, var(--ui-surface-raised));
+    --ui-neutral-hover: color-mix(in srgb, var(--ui-text) 10%, var(--ui-surface-raised));
+    --ui-neutral-active: color-mix(in srgb, var(--ui-text) 14%, var(--ui-surface-raised));
     --ui-accent-line-width: var(--ui-border-width);
 
     /* Type scale, from the base size. */
@@ -247,7 +251,7 @@
     --ui-control-surface: var(--ui-surface);
     --ui-control-surface-disabled: var(--ui-surface-muted);
     --ui-control-border-hover: color-mix(in oklab, var(--ui-text) 50%, var(--ui-surface));
-    --ui-control-placeholder: var(--ui-text-secondary);
+    --ui-control-placeholder: color-mix(in oklab, var(--ui-text) 58%, var(--ui-control-surface));
     --ui-control-focus: var(--ui-focus-ring);
     /* Derived from the ring, not a near-white tint, so the halo shows on any surface. */
     --ui-control-focus-halo: color-mix(in srgb, var(--ui-focus-ring) 24%, transparent);

package/vanilla/UiCard.d.ts

@@ -14,7 +14,8 @@ export interface UiCardProps {
   padding?: "xs" | "sm" | "md" | "lg" | null;
   size?: "content" | "sm" | "md" | "lg" | null;
   tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger" | null;
-  variant?: "outlined" | "subtle" | "elevated" | "glass" | null;
+  treatment?: "standard" | "expressive" | null;
+  variant?: "outlined" | "subtle" | "elevated" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

package/vanilla/UiCard.js

@@ -12,13 +12,13 @@ const T6 = ["",[],4];
 const T7 = ["",[]];
 let P0, P1, P2, P3, P4, P5, P6, P7;
 const S = { n: [], t: [], f: import.meta.url, g: "ui-card", b: generatedInputs };
-const A = [["section",{},[],"",[],["data-ui-card-state","data-ui-card-prop-as","data-ui-card-prop-padding","data-ui-card-prop-size","data-ui-card-prop-tone","data-ui-card-prop-variant"]],["article",{},[],"",[],["data-ui-card-state","data-ui-card-prop-as","data-ui-card-prop-padding","data-ui-card-prop-size","data-ui-card-prop-tone","data-ui-card-prop-variant"]],["aside",{},[],"",[],["data-ui-card-state","data-ui-card-prop-as","data-ui-card-prop-padding","data-ui-card-prop-size","data-ui-card-prop-tone","data-ui-card-prop-variant"]],["div",{},[],"",[],["data-ui-card-state","data-ui-card-prop-as","data-ui-card-prop-padding","data-ui-card-prop-size","data-ui-card-prop-tone","data-ui-card-prop-variant"]]];
+const A = [["section",{},[],"",[],["data-ui-card-state","data-ui-card-prop-as","data-ui-card-prop-padding","data-ui-card-prop-size","data-ui-card-prop-tone","data-ui-card-prop-treatment","data-ui-card-prop-variant"]],["article",{},[],"",[],["data-ui-card-state","data-ui-card-prop-as","data-ui-card-prop-padding","data-ui-card-prop-size","data-ui-card-prop-tone","data-ui-card-prop-treatment","data-ui-card-prop-variant"]],["aside",{},[],"",[],["data-ui-card-state","data-ui-card-prop-as","data-ui-card-prop-padding","data-ui-card-prop-size","data-ui-card-prop-tone","data-ui-card-prop-treatment","data-ui-card-prop-variant"]],["div",{},[],"",[],["data-ui-card-state","data-ui-card-prop-as","data-ui-card-prop-padding","data-ui-card-prop-size","data-ui-card-prop-tone","data-ui-card-prop-treatment","data-ui-card-prop-variant"]]];
 const Q = [[],[],[],[]];
-const D = { g: "ui-card", props: { "as": { "required":false,"values":["div","section","article","aside"],"default":"div", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "padding": { "required":false,"values":["xs","sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "size": { "required":false,"values":["content","sm","md","lg"],"default":"content", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "tone": { "required":false,"values":["neutral","accent","info","success","warning","danger"],"default":"neutral", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "variant": { "required":false,"values":["outlined","subtle","elevated","glass"],"default":"outlined", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] } } };
+const D = { g: "ui-card", props: { "as": { "required":false,"values":["div","section","article","aside"],"default":"div", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "padding": { "required":false,"values":["xs","sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "size": { "required":false,"values":["content","sm","md","lg"],"default":"content", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "tone": { "required":false,"values":["neutral","accent","info","success","warning","danger"],"default":"neutral", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "treatment": { "required":false,"values":["standard","expressive"],"default":"standard", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "variant": { "required":false,"values":["outlined","subtle","elevated"],"default":"outlined", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] } } };
 
 export function createUiCard(options = {}, html) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
-  const v = [null, null, null, null, null];
+  const v = [null, null, null, null, null, null];
   let B = acceptProps(undefined, D, S.n, v, componentProps, [], html);
   let a = ((v[0] === "section") ? 0 : (v[0] === "article") ? 1 : (v[0] === "aside") ? 2 : 3);
   let element;
@@ -92,8 +92,8 @@ export function createUiCard(options = {}, html) {
     return r;
   };
   const p0 = (r, c, d) => {
-    if (c & 30) {
-      const x0 = hostState(["padding","variant","tone","size"], [v[1], v[4], v[3], v[2]]);
+    if (c & 62) {
+      const x0 = hostState(["padding","variant","treatment","tone","size"], [v[1], v[5], v[4], v[3], v[2]]);
       const s0 = x0;
       if (s0 !== r.v0) writeAttribute(r.n, "data-ui-card-state", (r.v0 = s0) === "" ? null : s0);
     }
@@ -109,8 +109,8 @@ export function createUiCard(options = {}, html) {
     return r;
   };
   const p2 = (r, c, d) => {
-    if (c & 30) {
-      const x0 = hostState(["padding","variant","tone","size"], [v[1], v[4], v[3], v[2]]);
+    if (c & 62) {
+      const x0 = hostState(["padding","variant","treatment","tone","size"], [v[1], v[5], v[4], v[3], v[2]]);
       const s0 = x0;
       if (s0 !== r.v0) writeAttribute(r.n, "data-ui-card-state", (r.v0 = s0) === "" ? null : s0);
     }
@@ -126,8 +126,8 @@ export function createUiCard(options = {}, html) {
     return r;
   };
   const p4 = (r, c, d) => {
-    if (c & 30) {
-      const x0 = hostState(["padding","variant","tone","size"], [v[1], v[4], v[3], v[2]]);
+    if (c & 62) {
+      const x0 = hostState(["padding","variant","treatment","tone","size"], [v[1], v[5], v[4], v[3], v[2]]);
       const s0 = x0;
       if (s0 !== r.v0) writeAttribute(r.n, "data-ui-card-state", (r.v0 = s0) === "" ? null : s0);
     }
@@ -143,8 +143,8 @@ export function createUiCard(options = {}, html) {
     return r;
   };
   const p6 = (r, c, d) => {
-    if (c & 30) {
-      const x0 = hostState(["padding","variant","tone","size"], [v[1], v[4], v[3], v[2]]);
+    if (c & 62) {
+      const x0 = hostState(["padding","variant","treatment","tone","size"], [v[1], v[5], v[4], v[3], v[2]]);
       const s0 = x0;
       if (s0 !== r.v0) writeAttribute(r.n, "data-ui-card-state", (r.v0 = s0) === "" ? null : s0);
     }
@@ -179,4 +179,4 @@ export function createUiCard(options = {}, html) {
   manageProps(I);
   return element;
 }
-defineComponent("ui-card", createUiCard, ["as","padding","size","tone","variant"]);
+defineComponent("ui-card", createUiCard, ["as","padding","size","tone","treatment","variant"]);

package/vanilla/UiLightEditor.d.ts

@@ -0,0 +1,29 @@
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
+export interface UiLightEditorEventMap {
+  input: CustomEvent<{ readonly x: number; readonly y: number }>;
+  change: CustomEvent<{ readonly x: number; readonly y: number }>;
+}
+export interface UiLightEditorElement extends HTMLSpanElement {
+  addEventListener<K extends keyof UiLightEditorEventMap>(type: K, listener: (this: UiLightEditorElement, event: UiLightEditorEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: UiLightEditorElement, event: HTMLElementEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiLightEditorEventMap>(type: K, listener: (this: UiLightEditorElement, event: UiLightEditorEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: UiLightEditorElement, event: HTMLElementEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface UiLightEditorProps {
+  disabled?: boolean | null;
+  label?: string | null;
+  size?: "sm" | "md" | "lg" | null;
+  x?: number | null;
+  y?: number | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiLightEditor(props?: UiLightEditorProps): UiLightEditorElement;
+declare global {
+  interface ComponentTagMap {
+    "ui-light-editor": { element: UiLightEditorElement; props: Omit<UiLightEditorProps, "attributes" | "children" | "slots"> };
+  }
+}

package/vanilla/UiLightEditor.js

@@ -0,0 +1,102 @@
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
+import { attachGeneratedController, buildTemplate, NONCONFORMING, textCall, toAttribute, writeAttribute, dispatchDeclared, detailCheck, dispose, formatOf, keywordFormat, acceptProps, manageProps, generatedInputs, project, fillSlot, checkBoolean, checkFormat, checkNumber, checkObject, checkString, defineComponent, activateModule } from "@nextwebwg/html-next/generated-runtime";
+import * as controller from "../components/ui-light-editor/ui-light-editor.js";
+import "../styles/ui-light-editor.css";
+
+const T0 = ["",[],"\n    ",["span",["class","stage","role","group"],"\n      ",["span",["class","plane"],"\n        ",["svg",["viewBox","0 0 100 60","preserveAspectRatio","none","aria-hidden","true"],["path",["d","M0 30 H100 M50 0 V60"]]],"\n        ",["span",["class","specimen"],4],"\n        ",["button",["type","button","class","source"]],"\n      "],"\n    "],"\n    ",["span",["class","coordinates"],"\n      ",["ui-number-input",["data-coordinate","x","min","0","max","100","step","1","unit","%","label","Light horizontal position"]],"\n      ",["ui-number-input",["data-coordinate","y","min","0","max","100","step","1","unit","%","label","Light vertical position"]],"\n    "],"\n    ",["span",["class","hint"],"Drag the light, use arrow keys, or enter its position. Top centre is 50%, 0%."],"\n  "];
+const T1 = ["",[]];
+let P0, P1;
+const S = { n: ["horizontal","vertical"], t: ["s","s"], f: import.meta.url, g: "ui-light-editor", d: { "input": [detailCheck(checkObject([["x", checkNumber, false], ["y", checkNumber, false]], false)), true, true, false], "change": [detailCheck(checkObject([["x", checkNumber, false], ["y", checkNumber, false]], false)), true, true, false] }, x: dispatchDeclared, a: (host, I) => C(host, I), b: generatedInputs, i: ["50", "0"] };
+const D = { g: "ui-light-editor", props: { "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "label": { "required":false,"default":"Light position", c: checkString, t: "string", j: 0, m: "s" }, "size": { "required":false,"values":["sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "x": { "required":false,"default":0.5, c: checkNumber, t: "number", j: 0, m: "n" }, "y": { "required":false,"default":0, c: checkNumber, t: "number", j: 0, m: "n" } } };
+const C = (host) => activateModule(controller, host);
+
+export function createUiLightEditor(options = {}, html) {
+  const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
+  const element = document.createElement("span");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === undefined || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-light-editor");
+  element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
+  const v = ["50", "0", null, null, null, null, null];
+  const B = acceptProps(element, D, S.n, v, componentProps, [], html);
+  const m1 = (d) => {
+    const n = (P1 ??= buildTemplate(T1)).cloneNode(true);
+    const r = { n };
+    p1(r, -1, d);
+    return r;
+  };
+  const p1 = (r, c, d) => {
+  };
+  const p0 = (r, c, d) => {
+    if (c & 8) {
+      const x0 = v[3];
+      const s0 = toAttribute(x0, "aria-label");
+      if (s0 !== r.v0) writeAttribute(r.a0, "aria-label", r.v0 = s0);
+    }
+    if (c & 4) {
+      const x1 = v[2];
+      const s1 = toAttribute(x1, "disabled");
+      if (s1 !== r.v1) writeAttribute(r.a3, "disabled", r.v1 = s1);
+    }
+    if (c & 8) {
+      const x2 = textCall("concat", [v[3], ". Arrow keys move the source; Shift moves faster."]);
+      if (x2 !== NONCONFORMING) {
+        const s2 = toAttribute(x2, "aria-label");
+        if (s2 !== r.v2) writeAttribute(r.a3, "aria-label", r.v2 = s2);
+      }
+    }
+    if (c & 1) {
+      const x3 = v[0];
+      const s3 = toAttribute(x3, "value");
+      if (s3 !== r.v3) writeAttribute(r.a4, "value", r.v3 = s3);
+    }
+    if (c & 1073741840) {
+      const x4 = v[4];
+      const s4 = toAttribute(x4, "size");
+      if (s4 !== r.v4) writeAttribute(r.a4, "size", r.v4 = s4);
+    }
+    if (c & 4) {
+      const x5 = v[2];
+      const s5 = toAttribute(x5, "disabled");
+      if (s5 !== r.v5) writeAttribute(r.a4, "disabled", r.v5 = s5);
+    }
+    if (c & 2) {
+      const x6 = v[1];
+      const s6 = toAttribute(x6, "value");
+      if (s6 !== r.v6) writeAttribute(r.a5, "value", r.v6 = s6);
+    }
+    if (c & 1073741840) {
+      const x7 = v[4];
+      const s7 = toAttribute(x7, "size");
+      if (s7 !== r.v7) writeAttribute(r.a5, "size", r.v7 = s7);
+    }
+    if (c & 4) {
+      const x8 = v[2];
+      const s8 = toAttribute(x8, "disabled");
+      if (s8 !== r.v8) writeAttribute(r.a5, "disabled", r.v8 = s8);
+    }
+    if (r.f0 === undefined) { r.f0 = 1; const at = fillSlot(r.a2, r.e0, "", J, false, undefined, d);
+      if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b0 = m1(d); at.before(r.b0.n); } }
+    else if (r.b0 !== undefined) p1(r.b0, c, d);
+  };
+  const t0 = element.firstChild.nextSibling;
+  const t1 = t0.firstChild.nextSibling;
+  const t2 = t1.firstChild.nextSibling.nextSibling.nextSibling;
+  const t3 = t2.firstChild;
+  const t4 = t2.nextSibling.nextSibling;
+  const t5 = t0.nextSibling.nextSibling;
+  const t6 = t5.firstChild.nextSibling;
+  const t7 = t6.nextSibling.nextSibling;
+  const R = { a0: t0, a3: t4, a4: t6, a5: t7, v0: null, v1: null, v2: null, v3: null, v4: null, v5: null, v6: null, v7: null, v8: null, a2: t3, e0: t3.nextSibling, b0: undefined, f0: undefined };
+  const I = { B };
+  const J = project(I, children, slots);
+  I.R = new Set();
+  attachGeneratedController(element, S, v, (c, d) => { ((c, d) => p0(R, c, d))(c, d); for (const f of I.R) f(c, d); }, undefined, undefined, I);
+  manageProps(I);
+  I.r["plane"] = t1;
+  I.r["source"] = t4;
+  return element;
+}
+defineComponent("ui-light-editor", createUiLightEditor, ["disabled","label","size","x","y"]);

package/vanilla/UiNumberInput.js

@@ -1,11 +1,11 @@
 // Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
-import { attachGeneratedController, buildTemplate, NONCONFORMING, textCall, toAttribute, writeAttribute, dispatchDeclared, detailCheck, formatOf, keywordFormat, acceptProps, manageProps, generatedInputs, checkBoolean, checkFormat, checkNumber, checkObject, checkString, defineComponent, activateModule } from "@nextwebwg/html-next/generated-runtime";
+import { attachGeneratedController, stateInitializers, buildTemplate, checkReference, NONCONFORMING, textCall, toAttribute, writeAttribute, dispatchDeclared, detailCheck, formatOf, keywordFormat, acceptProps, manageProps, generatedInputs, awaitInput, inputRead, READY_INPUT, UNRESOLVED_INPUT, checkBoolean, checkFormat, checkNumber, checkObject, checkString, defineComponent, activateModule } from "@nextwebwg/html-next/generated-runtime";
 import * as controller from "../components/ui-number-input/ui-number-input.js";
 import "../styles/ui-number-input.css";
 
 const T0 = ["",[],"\n    ",["ui-icon-button",["data-number-step","decrease","match-button","","type","button"],["ui-icon",["name","minus"]]],"\n    ",["ui-input",["data-ui-field-control","","inputmode","decimal","spellcheck","false","aria-description","Enter calculates arithmetic. Arrow keys step; Shift changes ten steps."]],"\n    ",["ui-icon-button",["data-number-step","increase","match-button","","type","button"],["ui-icon",["name","plus"]]],"\n  "];
 let P0;
-const S = { n: [], t: [], f: import.meta.url, g: "ui-number-input", d: { "input": [detailCheck(checkObject([["value", checkString, false]], false)), true, true, false], "change": [detailCheck(checkObject([["value", checkString, false]], false)), true, true, false] }, x: dispatchDeclared, a: (host, I) => C(host, I), b: generatedInputs };
+const S = { n: ["display"], t: ["s"], f: import.meta.url, g: "ui-number-input", d: { "input": [detailCheck(checkObject([["value", checkString, false]], false)), true, true, false], "change": [detailCheck(checkObject([["value", checkString, false]], false)), true, true, false] }, x: dispatchDeclared, a: (host, I) => C(host, I), b: generatedInputs };
 const D = { g: "ui-number-input", props: { "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "label": { "required":false,"default":"Value", c: checkString, t: "string", j: 0, m: "s" }, "max": { "required":false,"default":1000000, c: checkNumber, t: "number", j: 0, m: "n" }, "min": { "required":false,"default":-1000000, c: checkNumber, t: "number", j: 0, m: "n" }, "name": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "size": { "required":false,"values":["sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "step": { "required":false,"default":1, c: checkNumber, t: "number", j: 0, m: "n" }, "unit": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "value": { "required":false,"default":"0", c: checkString, t: "string", j: 0, m: "s" } } };
 const C = (host) => activateModule(controller, host);
 
@@ -18,11 +18,15 @@ export function createUiNumberInput(options = {}, html) {
   }
   element.setAttribute("data-component", "ui-number-input");
   element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
-  const v = [null, null, null, null, null, null, null, null, null];
+  const v = [null, null, null, null, null, null, null, null, null, null];
   const B = acceptProps(element, D, S.n, v, componentProps, [], html);
+  const CS = [];
+  const inputStatus = (j) => { if (j === 0) return E.status(j); if (j === 1) return awaitInput(B, "disabled", true); if (j === 2) return awaitInput(B, "label", true); if (j === 3) return awaitInput(B, "max", true); if (j === 4) return awaitInput(B, "min", true); if (j === 5) return awaitInput(B, "name", true); if (j === 6) return awaitInput(B, "size", true); if (j === 7) return awaitInput(B, "step", true); if (j === 8) return awaitInput(B, "unit", true); if (j === 9) return awaitInput(B, "value", true); return v[j] === undefined ? UNRESOLVED_INPUT : READY_INPUT; };
+  const X = { e: 0, g: (j) => v[j], w: new Set(), a: CS, i: inputStatus };
+  const E = stateInitializers(S, v, X, { 0: () => inputRead(v[9], inputStatus(9)) });
   const p0 = (r, c, d) => {
-    if (c & 1073741856) {
-      const x0 = v[5];
+    if (c & 1073741888) {
+      const x0 = v[6];
       const s0 = toAttribute(x0, "size");
       if (s0 !== r.v0) writeAttribute(r.a0, "size", r.v0 = s0);
       const s3 = toAttribute(x0, "size");
@@ -30,8 +34,8 @@ export function createUiNumberInput(options = {}, html) {
       const s8 = toAttribute(x0, "size");
       if (s8 !== r.v8) writeAttribute(r.a2, "size", r.v8 = s8);
     }
-    if (c & 1) {
-      const x1 = v[0];
+    if (c & 2) {
+      const x1 = v[1];
       const s1 = toAttribute(x1, "disabled");
       if (s1 !== r.v1) writeAttribute(r.a0, "disabled", r.v1 = s1);
       const s4 = toAttribute(x1, "disabled");
@@ -39,30 +43,32 @@ export function createUiNumberInput(options = {}, html) {
       const s9 = toAttribute(x1, "disabled");
       if (s9 !== r.v9) writeAttribute(r.a2, "disabled", r.v9 = s9);
     }
-    if (c & 2) {
-      const x2 = textCall("concat", ["Decrease ", v[1]]);
+    if (c & 4) {
+      const x2 = textCall("concat", ["Decrease ", v[2]]);
       if (x2 !== NONCONFORMING) {
         const s2 = toAttribute(x2, "label");
         if (s2 !== r.v2) writeAttribute(r.a0, "label", r.v2 = s2);
       }
     }
-    if (c & 256) {
-      const x3 = v[8];
-      const s5 = toAttribute(x3, "value");
-      if (s5 !== r.v5) writeAttribute(r.a1, "value", r.v5 = s5);
+    if (c & 1) {
+      const x3 = (checkReference(S, v[0], "s", "expression:$display:display", "Reference `display` must satisfy string.") ? E.read(0) : NONCONFORMING);
+      if (x3 !== NONCONFORMING) {
+        const s5 = toAttribute(x3, "value");
+        if (s5 !== r.v5) writeAttribute(r.a1, "value", r.v5 = s5);
+      }
     }
-    if (c & 2) {
-      const x4 = v[1];
+    if (c & 4) {
+      const x4 = v[2];
       const s6 = toAttribute(x4, "aria-label");
       if (s6 !== r.v6) writeAttribute(r.a1, "aria-label", r.v6 = s6);
-      const x5 = textCall("concat", ["Increase ", v[1]]);
+      const x5 = textCall("concat", ["Increase ", v[2]]);
       if (x5 !== NONCONFORMING) {
         const s10 = toAttribute(x5, "label");
         if (s10 !== r.v10) writeAttribute(r.a2, "label", r.v10 = s10);
       }
     }
-    if (c & 16) {
-      const x6 = v[4];
+    if (c & 32) {
+      const x6 = v[5];
       const s7 = toAttribute(x6, "name");
       if (s7 !== r.v7) writeAttribute(r.a1, "name", r.v7 = s7);
     }
@@ -71,8 +77,9 @@ export function createUiNumberInput(options = {}, html) {
   const t1 = t0.nextSibling.nextSibling;
   const t2 = t1.nextSibling.nextSibling;
   const R = { a0: t0, a1: t1, a2: t2, v0: null, v1: null, v2: null, v3: null, v4: null, v5: null, v6: null, v7: null, v8: null, v9: null, v10: null };
-  const I = { B };
-  attachGeneratedController(element, S, v, ((c, d) => p0(R, c, d)), undefined, undefined, I);
+  const I = { B, U: E };
+  I.R = new Set();
+  attachGeneratedController(element, S, v, (c, d) => { ((c, d) => p0(R, c, d))(c, d); for (const f of I.R) f(c, d); }, undefined, X, I);
   manageProps(I);
   return element;
 }

package/vanilla/index.js

@@ -47,6 +47,7 @@ export * from "./UiIconButton.js";
 export * from "./UiImage.js";
 export * from "./UiInput.js";
 export * from "./UiInputGroup.js";
+export * from "./UiLightEditor.js";
 export * from "./UiList.js";
 export * from "./UiListbox.js";
 export * from "./UiListItem.js";

package/vue/UiBadge.vue

@@ -257,9 +257,6 @@ const hostState = computed(() =>
 /* A count can keep its containing control's contrasting ink instead of reversing it.
    The faint fill preserves text contrast; a quiet boundary separates the count from its control. */
 
-/* Neutral reverses a subtle surface/ink pair rather than a strong tone. Keep its original
-   surface ink: moving it toward dark-theme primary text would reduce overlay contrast. */
-
 /* An icon mark keeps the existing tone recipe and follows the global spacing and radius. */
 
 /* A visible glyph needs fixed geometry, unlike a content-sized pill or a hidden-label dot. */
@@ -557,8 +554,36 @@ const hostState = computed(() =>
     border-color: var(--ui-badge-border, color-mix(in srgb, currentColor 20%, transparent));
     box-shadow: none;
   }
+
   :global(:scope[data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="tone=neutral"]:where([data-hn-ui-badge])) {
-    color: var(--ui-badge-text, var(--_badge-color-text, var(--_badge-surface)));
+    --_badge-outline-surface: var(
+      --ui-badge-surface,
+      var(--_badge-color-surface, color-mix(in srgb, var(--ui-surface-raised) 88%, transparent))
+    );
+    color: var(--ui-badge-text, var(--_badge-color-text, var(--ui-text-primary)));
+  }
+  :global(:scope[data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="tone=neutral"]:not([data-ui-badge-state~="shape=circle"]):where([data-hn-ui-badge])) {
+    border-color: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-outline-surface)));
+  }
+  :global(:scope[data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="tone=neutral"][data-ui-badge-state~="shape=circle"]:where([data-hn-ui-badge])) {
+    --_badge-outline-surface: var(
+      --ui-badge-surface,
+      var(
+        --_badge-color-surface,
+        light-dark(
+          color-mix(
+            in srgb,
+            var(--ui-surface-raised) var(--ui-badge-circle-opacity, 66%),
+            transparent
+          ),
+          color-mix(
+            in srgb,
+            var(--ui-surface-raised) var(--ui-badge-circle-opacity, 56%),
+            transparent
+          )
+        )
+      )
+    );
   }
 
   :global(:scope[data-ui-badge-state~="variant=outline"]:where([data-hn-ui-badge])) {