@threadlabs/looma 0.26.4 → 0.26.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.26.4",
+  "version": "0.26.5",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-badge.css

@@ -11,6 +11,10 @@
       syntax: "*";
       inherits: false;
     }
+@property --ui-badge-circle-opacity {
+      syntax: "*";
+      inherits: false;
+    }
 @property --ui-badge-dot-size {
       syntax: "*";
       inherits: false;
@@ -156,6 +160,11 @@
       line-height: var(--ui-badge-line-height, 1);
     }
 
+    :scope[data-ui-badge-state~="size=sm"] {
+      font-size: var(--ui-badge-font-size, var(--ui-font-size-2xs));
+      line-height: var(--ui-badge-line-height, 1);
+    }
+
     :scope[data-ui-badge-state~="tone=accent"] {
       --_badge-surface: var(--ui-accent-strong-surface, var(--ui-accent-solid));
       --_badge-border: var(--ui-accent-strong-surface, var(--ui-accent-solid));
@@ -237,8 +246,35 @@
       background-clip: padding-box;
     }
 
+    /* A circular count has a tone-tinted surface, a separate lighter rim and readable tone ink.
+       Dark controls retain a shaded surface and theme ink with a quieter rim. */
     :scope[data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="shape=circle"] {
-      box-shadow: var(--ui-shadow-sm);
+      --_badge-color-surface: light-dark(
+        color-mix(in srgb, color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) var(--ui-badge-circle-opacity, 66%), transparent),
+        color-mix(in srgb, color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) var(--ui-badge-circle-opacity, 56%), transparent)
+      );
+      --_badge-color-border: light-dark(
+        color-mix(in srgb, color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) 88%, transparent),
+        color-mix(in srgb, color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) 44%, transparent)
+      );
+      --_badge-color-text: light-dark(
+        color-mix(in srgb, var(--_badge-color-ink) 65%, var(--ui-text-primary)),
+        color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-text-primary))
+      );
+      --_badge-count-surface: light-dark(
+        color-mix(in srgb, var(--_badge-text) var(--ui-badge-circle-opacity, 66%), transparent),
+        color-mix(in srgb, var(--_badge-text) var(--ui-badge-circle-opacity, 56%), transparent)
+      );
+      --_badge-outline-surface: var(--ui-badge-surface, var(--_badge-color-surface, var(--_badge-count-surface)));
+      border-color: var(
+        --ui-badge-border,
+        var(--_badge-color-border, light-dark(color-mix(in srgb, var(--_badge-text) 88%, transparent), color-mix(in srgb, var(--_badge-text) 44%, transparent)))
+      );
+      color: var(
+        --ui-badge-text,
+        var(--_badge-color-text, light-dark(color-mix(in srgb, var(--_badge-surface) 65%, var(--ui-text-primary)), var(--ui-text-primary)))
+      );
+      box-shadow: 0 1px 1px light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.12));
     }
 
     /* Neutral reverses a subtle surface/ink pair rather than a strong tone. Keep its original
@@ -478,6 +514,9 @@
     /* A translucent inverse surface picks up its filled control's tone. Deepen the tone ink
        toward the theme text to retain contrast against that composed surface. */
 
+    /* A circular count has a tone-tinted surface, a separate lighter rim and readable tone ink.
+       Dark controls retain a shaded surface and theme ink with a quieter rim. */
+
     /* 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. */
 

package/styles/ui-button.css

@@ -75,6 +75,16 @@
 /* This component's hooks style the element they are set on, and never a nested one. */
 
     :scope {
+      /* Optional inherited action-group values keep text and icon actions under the same light.
+         One fine top/start highlight follows the bottom/end lowlight at a joined action seam.
+         A single ambient lift avoids stacking a face gradient or another inset bevel. */
+      --_ui-action-start: 1px;
+      --_ui-action-edge: var(
+        --ui-action-edge,
+        inset var(--_ui-action-start) 1px 0 light-dark(rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.06)),
+        inset calc(-1 * var(--_ui-action-start)) -1px 0 light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.08))
+      );
+      --_ui-action-shadow: var(--_ui-action-edge), 0 1px 2px light-dark(rgb(0 0 0 / 0.10), rgb(0 0 0 / 0.20));
       --_hue: var(--ui-accent);
       --_hue-hover: var(--ui-accent-hover);
       --_hue-active: var(--ui-accent-active);
@@ -95,6 +105,10 @@
       color: var(--_tone-text);
     }
 
+    :scope:dir(rtl) {
+      --_ui-action-start: -1px;
+    }
+
     :scope[data-ui-button-state~="align=start"] {
       justify-content: flex-start;
       text-align: start;
@@ -121,8 +135,8 @@
       white-space: var(--ui-button-white-space, inherit);
       line-height: var(--ui-line-height-tight);
       padding: var(--ui-space-2) var(--ui-space-3);
-      background-image: var(--ui-raised-highlight);
-      box-shadow: var(--ui-button-shadow, var(--ui-raised));
+      background-image: none;
+      box-shadow: var(--ui-button-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
       cursor: pointer;
       transition:
         background-color var(--ui-motion-fast) var(--ui-motion-ease),
@@ -143,6 +157,22 @@
       vertical-align: middle;
     }
 
+    /* A count is an adornment, not another line of label text. Keep the standard control height
+       with enough inset for a 24px mark; large content can still grow the button naturally. */
+    :scope:not([variant="link"]):has(.badge:not(:empty)) {
+      padding-block: var(--ui-space-0-5);
+    }
+
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      flex: none;
+    }
+
+    .badge:empty {
+      display: none;
+    }
+
     @supports (text-box-trim: trim-both) {
       :scope {
         text-box-trim: trim-both;
@@ -216,6 +246,15 @@
       background-color: var(--ui-button-hover-surface, oklch(from var(--_tone) l c h / 12%));
     }
 
+    /* A neutral card encloses content quietly; ordinary outlines keep their action-tone edge. */
+    :scope[data-ui-button-state~="variant=card"][data-ui-button-state~="tone=neutral"] {
+      border-color: var(--ui-button-border, var(--ui-border));
+    }
+
+    :scope[data-ui-button-state~="variant=card"][data-ui-button-state~="tone=neutral"]:hover:not(:disabled, [aria-disabled="true"]) {
+      border-color: var(--ui-button-hover-border, var(--ui-border-strong));
+    }
+
     /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
     :scope:active:not(:disabled, [aria-disabled="true"]) {
       background-color: var(--ui-button-active-surface, oklch(from var(--_tone) l c h / 18%));
@@ -227,7 +266,7 @@
       border-color: var(--_tone);
       background-color: var(--_tone);
       color: var(--_on-tone);
-      box-shadow: var(--ui-button-solid-shadow, var(--ui-raised));
+      box-shadow: var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
     }
 
     :is(:scope[data-ui-button-state~="variant=solid"], :scope[data-ui-button-state~="variant=danger"]):hover:not(:disabled, [aria-disabled="true"]) {
@@ -309,16 +348,20 @@
     :scope:focus-visible {
       outline: none;
       box-shadow:
-        var(--ui-button-shadow, var(--ui-raised)),
+        var(--ui-button-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
         var(--ui-focus-halo);
     }
 
     :scope[data-ui-button-state~="variant=solid"]:focus-visible {
       box-shadow:
-        var(--ui-button-solid-shadow, var(--ui-raised)),
+        var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
         var(--ui-focus-halo);
     }
 
+    :is(:scope[data-ui-button-state~="variant=ghost"], :scope[data-ui-button-state~="variant=link"], :scope[data-ui-button-state~="variant=card"]):focus-visible {
+      box-shadow: var(--ui-focus-halo);
+    }
+
     /* A loading action stays visually active; only an explicitly disabled action takes the
        neutral disabled palette. Its flat surface and muted ink make the state unambiguous. */
     :scope:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
@@ -422,6 +465,9 @@
 
     /* An anchor keeps the boxed button look even when an app styles ordinary links. */
 
+    /* A count is an adornment, not another line of label text. Keep the standard control height
+       with enough inset for a 24px mark; large content can still grow the button naturally. */
+
     @supports (text-box-trim: trim-both) {
     }
 
@@ -431,6 +477,8 @@
     /* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that
        is exactly :enabled, at the same specificity, and it also matches a link that can be followed. */
 
+    /* A neutral card encloses content quietly; ordinary outlines keep their action-tone edge. */
+
     /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
 
     /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a

package/styles/ui-icon-button.css

@@ -79,6 +79,16 @@
 /* This component's hooks style the element they are set on, and never a nested one. */
 
     :scope {
+      /* Optional inherited action-group values keep text and icon actions under the same light.
+         One fine top/start highlight follows the bottom/end lowlight at a joined action seam.
+         A single ambient lift avoids stacking a face gradient or another inset bevel. */
+      --_ui-action-start: 1px;
+      --_ui-action-edge: var(
+        --ui-action-edge,
+        inset var(--_ui-action-start) 1px 0 light-dark(rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.06)),
+        inset calc(-1 * var(--_ui-action-start)) -1px 0 light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.08))
+      );
+      --_ui-action-shadow: var(--_ui-action-edge), 0 1px 2px light-dark(rgb(0 0 0 / 0.10), rgb(0 0 0 / 0.20));
       /* Hooks do not inherit, so the parts below read them from the root. */
       --_ui-icon-button-icon-size: var(--ui-icon-button-icon-size);
       --_ui-icon-button-icon-stroke-width: var(--ui-icon-button-icon-stroke-width);
@@ -87,6 +97,10 @@
       color: var(--ui-text-secondary);
     }
 
+    :scope:dir(rtl) {
+      --_ui-action-start: -1px;
+    }
+
     :scope[data-ui-icon-button-state~="tone=accent"] {
       --_icon-button-border: var(--ui-accent-solid);
       --_icon-button-hover-border: var(--ui-accent-hover);
@@ -260,19 +274,16 @@
     :scope[data-ui-icon-button-state~="variant=outline"] {
       border-color: var(--ui-icon-button-border, var(--_icon-button-border, var(--ui-control-border, var(--ui-border-strong))));
       background-color: var(--ui-icon-button-outline-surface, var(--_icon-button-outline-surface, var(--ui-surface-default)));
-      background-image: var(--ui-raised-highlight);
+      background-image: none;
       color: var(--ui-icon-button-outline-text, var(--_icon-button-text, var(--ui-text-primary)));
-      box-shadow: var(--ui-raised);
+      box-shadow: var(--ui-action-shadow, var(--_ui-action-shadow));
     }
 
     :scope[data-ui-icon-button-state~="variant=solid"] {
       background-color: var(--ui-icon-button-solid-surface, var(--_icon-button-solid-surface, var(--ui-accent-solid)));
-      background-image: var(--ui-raised-highlight);
+      background-image: none;
       color: var(--ui-icon-button-solid-text, var(--_icon-button-solid-text, var(--ui-text-on-accent)));
-      box-shadow: var(
-        --ui-icon-button-solid-shadow,
-        0 1px 2px color-mix(in srgb, var(--ui-accent-solid) 18%, transparent)
-      );
+      box-shadow: var(--ui-icon-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
     }
 
     :scope:hover:enabled:not([aria-disabled="true"]) {
@@ -336,6 +347,23 @@
       box-shadow: var(--ui-focus-halo);
     }
 
+    :scope[data-ui-icon-button-state~="variant=outline"]:focus-visible {
+      box-shadow:
+        var(--ui-action-shadow, var(--_ui-action-shadow)),
+        var(--ui-focus-halo);
+    }
+
+    :scope[data-ui-icon-button-state~="variant=solid"]:focus-visible {
+      box-shadow:
+        var(--ui-icon-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
+        var(--ui-focus-halo);
+    }
+
+    :scope:is(:scope[data-ui-icon-button-state~="variant=outline"], :scope[data-ui-icon-button-state~="variant=solid"]):active:enabled:not([aria-disabled="true"]) {
+      background-image: none;
+      box-shadow: var(--ui-pressed);
+    }
+
     :scope[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:focus-visible {
       box-shadow:
         var(--ui-pressed),

package/styles/ui-input-group.css

@@ -64,6 +64,12 @@
       transition: border-color var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
+    :scope[data-ui-input-group-state~="variant=subtle"] {
+      border-color: var(--ui-border);
+      background: var(--ui-surface-muted);
+      box-shadow: none;
+    }
+
     /* The frame takes its input's size, so a small group lines up with small buttons and fields. */
     :scope:has(.field [data-ui-input-state~="size=sm"]) {
       min-block-size: var(--ui-control-size-sm);

package/vanilla/UiBadge.d.ts

@@ -7,7 +7,7 @@ export interface UiBadgeElement extends HTMLSpanElement {
 }
 export interface UiBadgeProps {
   shape?: "pill" | "tag" | "dot" | "square" | "circle" | null;
-  size?: "xs" | "md" | "lg" | null;
+  size?: "xs" | "sm" | "md" | "lg" | null;
   tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger" | null;
   variant?: "solid" | "subtle" | "outline" | "inverse" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;

package/vanilla/UiBadge.js

@@ -7,7 +7,7 @@ const T1 = ["",[]];
 const T2 = ["",[]];
 let P0, P1, P2;
 const S = { n: [], t: [], f: import.meta.url, g: "ui-badge" };
-const D = { props: { "shape": { "required":false,"values":["pill","tag","dot","square","circle"],"default":"pill", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "size": { "required":false,"values":["xs","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "tone": { "required":false,"values":["neutral","accent","info","success","warning","danger"],"default":"neutral", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "variant": { "required":false,"values":["solid","subtle","outline","inverse"],"default":"subtle", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
+const D = { props: { "shape": { "required":false,"values":["pill","tag","dot","square","circle"],"default":"pill", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "size": { "required":false,"values":["xs","sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "tone": { "required":false,"values":["neutral","accent","info","success","warning","danger"],"default":"neutral", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "variant": { "required":false,"values":["solid","subtle","outline","inverse"],"default":"subtle", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
 
 export function createUiBadge(options = {}, html) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vanilla/UiButton.js

@@ -15,13 +15,15 @@ const T8 = ["",[],4];
 const T9 = ["",[]];
 const T10 = ["",[]];
 const T11 = ["",[],["ui-icon",["name","chevron-right","aria-hidden","true"]]];
-const T12 = ["",[],1,4];
+const T12 = ["",[],1,4,["span",["class","badge"],4]];
 const T13 = ["span",["class","spinner-wrap"],["ui-spinner",["size","sm"]]];
 const T14 = ["",[]];
-const T15 = ["",[],1,4];
-const T16 = ["span",["class","spinner-wrap"],["ui-spinner",["size","sm"]]];
-const T17 = ["",[]];
-let P0, P1, P2, P3, P4, P5, P6, P7, P8, P9, P10, P11, P12, P13, P14, P15, P16, P17;
+const T15 = ["",[]];
+const T16 = ["",[],1,4,["span",["class","badge"],4]];
+const T17 = ["span",["class","spinner-wrap"],["ui-spinner",["size","sm"]]];
+const T18 = ["",[]];
+const T19 = ["",[]];
+let P0, P1, P2, P3, P4, P5, P6, P7, P8, P9, P10, P11, P12, P13, P14, P15, P16, P17, P18, P19;
 const S = { n: [], t: [], f: import.meta.url, g: "ui-button" };
 const A = [["a",{},[],"",[],["data-ui-button-state","data-align","data-as","data-disabled","data-href","data-loading","data-pending","data-rel","data-shape","data-size","data-stretch","data-target","data-tone","data-type","data-variant","href","target","rel","aria-disabled","aria-busy","tabindex"]],["button",{},[],"",[],["data-ui-button-state","data-align","data-as","data-disabled","data-href","data-loading","data-pending","data-rel","data-shape","data-size","data-stretch","data-target","data-tone","data-type","data-variant","type","disabled","aria-disabled","aria-busy"]],["a",{},[],"",[],["data-ui-button-state","data-align","data-as","data-disabled","data-href","data-loading","data-pending","data-rel","data-shape","data-size","data-stretch","data-target","data-tone","data-type","data-variant","href","target","rel","aria-disabled","aria-busy","tabindex"]],["button",{},[],"",[],["data-ui-button-state","data-align","data-as","data-disabled","data-href","data-loading","data-pending","data-rel","data-shape","data-size","data-stretch","data-target","data-tone","data-type","data-variant","type","disabled","aria-disabled","aria-busy"]]];
 const Q = [[],[],[],[]];
@@ -168,13 +170,13 @@ export function createUiButton(options = {}, html) {
   };
   const p14 = (r, c, d) => {
   };
-  const m16 = (d) => {
-    const n = (P16 ??= buildTemplate(T16)).cloneNode(true);
+  const m15 = (d) => {
+    const n = (P15 ??= buildTemplate(T15)).cloneNode(true);
     const r = { n };
-    p16(r, -1, d);
+    p15(r, -1, d);
     return r;
   };
-  const p16 = (r, c, d) => {
+  const p15 = (r, c, d) => {
   };
   const m17 = (d) => {
     const n = (P17 ??= buildTemplate(T17)).cloneNode(true);
@@ -184,6 +186,22 @@ export function createUiButton(options = {}, html) {
   };
   const p17 = (r, c, d) => {
   };
+  const m18 = (d) => {
+    const n = (P18 ??= buildTemplate(T18)).cloneNode(true);
+    const r = { n };
+    p18(r, -1, d);
+    return r;
+  };
+  const p18 = (r, c, d) => {
+  };
+  const m19 = (d) => {
+    const n = (P19 ??= buildTemplate(T19)).cloneNode(true);
+    const r = { n };
+    p19(r, -1, d);
+    return r;
+  };
+  const p19 = (r, c, d) => {
+  };
   const m0 = (n, d) => {
     n.append((P0 ??= buildTemplate(T0)).cloneNode(true));
     const t0 = n.firstChild;
@@ -340,7 +358,8 @@ export function createUiButton(options = {}, html) {
     n.append((P12 ??= buildTemplate(T12)).cloneNode(true));
     const t0 = n.firstChild;
     const t1 = t0.nextSibling.nextSibling;
-    const r = { n, v0: undefined, v1: undefined, v2: undefined, v3: undefined, v4: undefined, v5: undefined, v6: undefined, a1: t0, e0: t0.nextSibling, b0: undefined, a2: t1, e1: t1.nextSibling, b1: undefined, f1: undefined };
+    const t2 = t1.nextSibling.nextSibling.firstChild;
+    const r = { n, v0: undefined, v1: undefined, v2: undefined, v3: undefined, v4: undefined, v5: undefined, v6: undefined, a1: t0, e0: t0.nextSibling, b0: undefined, a2: t1, e1: t1.nextSibling, b1: undefined, f1: undefined, a3: t2, e2: t2.nextSibling, b2: undefined, f2: undefined };
     p12(r, -1, d);
     return r;
   };
@@ -396,19 +415,23 @@ export function createUiButton(options = {}, html) {
         }
       } else if (r.b0 !== undefined) p13(r.b0, c, d);
     } else if (r.b0 !== undefined) p13(r.b0, c, d);
+    if (r.f2 === undefined) { r.f2 = 1; const at = fillSlot(r.a3, r.e2, "badge", 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.b2 = m15(d); at.before(r.b2.n); } }
+    else if (r.b2 !== undefined) p15(r.b2, c, d);
     if (r.f1 === undefined) { r.f1 = 1; const at = fillSlot(r.a2, r.e1, "", 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.b1 = m14(d); at.before(r.b1.n); } }
     else if (r.b1 !== undefined) p14(r.b1, c, d);
   };
-  const m15 = (n, d) => {
-    n.append((P15 ??= buildTemplate(T15)).cloneNode(true));
+  const m16 = (n, d) => {
+    n.append((P16 ??= buildTemplate(T16)).cloneNode(true));
     const t0 = n.firstChild;
     const t1 = t0.nextSibling.nextSibling;
-    const r = { n, v0: undefined, v1: undefined, v2: undefined, v3: undefined, v4: undefined, a1: t0, e0: t0.nextSibling, b0: undefined, a2: t1, e1: t1.nextSibling, b1: undefined, f1: undefined };
-    p15(r, -1, d);
+    const t2 = t1.nextSibling.nextSibling.firstChild;
+    const r = { n, v0: undefined, v1: undefined, v2: undefined, v3: undefined, v4: undefined, a1: t0, e0: t0.nextSibling, b0: undefined, a2: t1, e1: t1.nextSibling, b1: undefined, f1: undefined, a3: t2, e2: t2.nextSibling, b2: undefined, f2: undefined };
+    p16(r, -1, d);
     return r;
   };
-  const p15 = (r, c, d) => {
+  const p16 = (r, c, d) => {
     if (c & 1073745920) {
       const x0 = v[12];
       const s0 = toAttribute(x0, "type");
@@ -442,15 +465,18 @@ export function createUiButton(options = {}, html) {
         {
           r.b0 = undefined;
           clearRegion(r.a1, r.e0);
-          if (t0) { r.b0 = m16(d); r.e0.before(r.b0.n); }
+          if (t0) { r.b0 = m17(d); r.e0.before(r.b0.n); }
         }
-      } else if (r.b0 !== undefined) p16(r.b0, c, d);
-    } else if (r.b0 !== undefined) p16(r.b0, c, d);
+      } else if (r.b0 !== undefined) p17(r.b0, c, d);
+    } else if (r.b0 !== undefined) p17(r.b0, c, d);
+    if (r.f2 === undefined) { r.f2 = 1; const at = fillSlot(r.a3, r.e2, "badge", 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.b2 = m19(d); at.before(r.b2.n); } }
+    else if (r.b2 !== undefined) p19(r.b2, c, d);
     if (r.f1 === undefined) { r.f1 = 1; const at = fillSlot(r.a2, r.e1, "", 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.b1 = m17(d); at.before(r.b1.n); } }
-    else if (r.b1 !== undefined) p17(r.b1, c, d);
+      if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b1 = m18(d); at.before(r.b1.n); } }
+    else if (r.b1 !== undefined) p18(r.b1, c, d);
   };
-  const M = [m0, m6, m12, m15], N = [p0, p6, p12, p15];
+  const M = [m0, m6, m12, m16], N = [p0, p6, p12, p16];
   let R;
   const p = (c, d) => {
     if (R === null) return;

package/vanilla/UiInputGroup.d.ts

@@ -10,6 +10,7 @@ export interface UiInputGroupProps {
   disabled?: boolean | null;
   multiline?: boolean | null;
   prefixKind?: "text" | "icon" | null;
+  variant?: "outline" | "subtle" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

package/vanilla/UiInputGroup.js

@@ -10,7 +10,7 @@ const T3 = ["",[]];
 const T4 = ["",[]];
 let P0, P1, P2, P3, P4;
 const S = { n: [], t: [], f: import.meta.url, g: "ui-input-group" };
-const D = { props: { "actionPosition": { "required":false,"values":["below","top-end"],"default":"below", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "multiline": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "prefixKind": { "required":false,"values":["text","icon"],"default":"text", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
+const D = { props: { "actionPosition": { "required":false,"values":["below","top-end"],"default":"below", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "multiline": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "prefixKind": { "required":false,"values":["text","icon"],"default":"text", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "variant": { "required":false,"values":["outline","subtle"],"default":"outline", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
 const C = (host) => controller.default(host);
 
 export function createUiInputGroup(options = {}, html) {
@@ -22,7 +22,7 @@ export function createUiInputGroup(options = {}, html) {
   }
   element.setAttribute("data-component", "ui-input-group");
   element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
-  const v = [null, null, null, null];
+  const v = [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);
@@ -57,8 +57,8 @@ export function createUiInputGroup(options = {}, html) {
   const p4 = (r, c, d) => {
   };
   const p0 = (r, c, d) => {
-    if (c & 15) {
-      const x0 = hostState(["disabled","prefixKind","multiline","actionPosition"], [v[1], v[3], v[2], v[0]]);
+    if (c & 31) {
+      const x0 = hostState(["variant","disabled","prefixKind","multiline","actionPosition"], [v[4], v[1], v[3], v[2], v[0]]);
       const s0 = x0;
       if (s0 !== r.v0) writeAttribute(r.n, "data-ui-input-group-state", (r.v0 = s0) === "" ? null : s0);
     }

package/vue/UiBadge.d.ts

@@ -11,7 +11,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
     size: {
-        type: PropType<"xs" | "md" | "lg" | null>;
+        type: PropType<"xs" | "sm" | "md" | "lg" | null>;
         default: string;
     };
     tone: {
@@ -28,7 +28,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
     size: {
-        type: PropType<"xs" | "md" | "lg" | null>;
+        type: PropType<"xs" | "sm" | "md" | "lg" | null>;
         default: string;
     };
     tone: {
@@ -41,7 +41,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>> & Readonly<{}>, {
     shape: "circle" | "dot" | "tag" | "square" | "pill" | null;
-    size: "xs" | "md" | "lg" | null;
+    size: "xs" | "sm" | "md" | "lg" | null;
     tone: "info" | "neutral" | "accent" | "success" | "warning" | "danger" | null;
     variant: "solid" | "subtle" | "outline" | "inverse" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/vue/UiBadge.vue

@@ -22,8 +22,8 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'size' },
       description:
-        'Scale. xs is compact; md is the usual text badge; lg adds room to fixed marks while retaining the usual text size. A square is 24px at xs, 32px at md and\n      40px at lg. A circle is 16px at xs, 24px at md and 32px at lg; use lg for short counts such as 30 or 99+.',
-      values: ['xs', 'md', 'lg'],
+        'Scale. xs is compact; sm keeps the usual badge geometry with compact text, fitting short counts such as 99+ inside a 24px circle. md is the usual text\n      badge; lg adds room to fixed marks while retaining the usual text size. A square is 24px at xs, 32px at sm and md, and 40px at lg. A circle is 16px at xs,\n      24px at sm and md, and 32px at lg.',
+      values: ['xs', 'sm', 'md', 'lg'],
       default: 'md',
     },
     tone: {
@@ -51,7 +51,7 @@ const props = defineProps({
     type: null as unknown as PropType<'pill' | 'tag' | 'dot' | 'square' | 'circle' | null>,
     default: 'pill',
   },
-  size: { type: null as unknown as PropType<'xs' | 'md' | 'lg' | null>, default: 'md' },
+  size: { type: null as unknown as PropType<'xs' | 'sm' | 'md' | 'lg' | null>, default: 'md' },
   tone: {
     type: null as unknown as PropType<
       'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger' | null
@@ -77,13 +77,13 @@ const checkedProps = computed(() => ({
     'shape',
     acceptedProps,
   ) as 'pill' | 'tag' | 'dot' | 'square' | 'circle',
-  size: checkedProp<'xs' | 'md' | 'lg'>(
+  size: checkedProp<'xs' | 'sm' | 'md' | 'lg'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'size',
     acceptedProps,
-  ) as 'xs' | 'md' | 'lg',
+  ) as 'xs' | 'sm' | 'md' | 'lg',
   tone: checkedProp<'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'>(
     props['tone'],
     { kind: 'terminal', name: 'keyword' },
@@ -195,6 +195,10 @@ const hostState = computed(() =>
   syntax: "*";
   inherits: false;
 }
+@property --ui-badge-circle-opacity {
+  syntax: "*";
+  inherits: false;
+}
 @property --ui-badge-dot-size {
   syntax: "*";
   inherits: false;
@@ -360,6 +364,11 @@ const hostState = computed(() =>
   line-height: var(--ui-badge-line-height, 1);
 }
 
+[data-component~="ui-badge"][data-ui-badge-state~="size=sm"] {
+  font-size: var(--ui-badge-font-size, var(--ui-font-size-2xs));
+  line-height: var(--ui-badge-line-height, 1);
+}
+
 [data-component~="ui-badge"][data-ui-badge-state~="tone=accent"] {
   --_badge-surface: var(--ui-accent-strong-surface, var(--ui-accent-solid));
   --_badge-border: var(--ui-accent-strong-surface, var(--ui-accent-solid));
@@ -454,8 +463,72 @@ const hostState = computed(() =>
   background-clip: padding-box;
 }
 
+/* A circular count has a tone-tinted surface, a separate lighter rim and readable tone ink.
+   Dark controls retain a shaded surface and theme ink with a quieter rim. */
 [data-component~="ui-badge"][data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="shape=circle"] {
-  box-shadow: var(--ui-shadow-sm);
+  --_badge-color-surface: light-dark(
+    color-mix(
+      in srgb,
+      color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) var(
+        --ui-badge-circle-opacity,
+        66%
+      ),
+      transparent
+    ),
+    color-mix(
+      in srgb,
+      color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) var(
+        --ui-badge-circle-opacity,
+        56%
+      ),
+      transparent
+    )
+  );
+  --_badge-color-border: light-dark(
+    color-mix(
+      in srgb,
+      color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) 88%,
+      transparent
+    ),
+    color-mix(
+      in srgb,
+      color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) 44%,
+      transparent
+    )
+  );
+  --_badge-color-text: light-dark(
+    color-mix(in srgb, var(--_badge-color-ink) 65%, var(--ui-text-primary)),
+    color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-text-primary))
+  );
+  --_badge-count-surface: light-dark(
+    color-mix(in srgb, var(--_badge-text) var(--ui-badge-circle-opacity, 66%), transparent),
+    color-mix(in srgb, var(--_badge-text) var(--ui-badge-circle-opacity, 56%), transparent)
+  );
+  --_badge-outline-surface: var(
+    --ui-badge-surface,
+    var(--_badge-color-surface, var(--_badge-count-surface))
+  );
+  border-color: var(
+    --ui-badge-border,
+    var(
+      --_badge-color-border,
+      light-dark(
+        color-mix(in srgb, var(--_badge-text) 88%, transparent),
+        color-mix(in srgb, var(--_badge-text) 44%, transparent)
+      )
+    )
+  );
+  color: var(
+    --ui-badge-text,
+    var(
+      --_badge-color-text,
+      light-dark(
+        color-mix(in srgb, var(--_badge-surface) 65%, var(--ui-text-primary)),
+        var(--ui-text-primary)
+      )
+    )
+  );
+  box-shadow: 0 1px 1px light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.12));
 }
 
 /* Neutral reverses a subtle surface/ink pair rather than a strong tone. Keep its original