@threadlabs/looma 0.26.0 → 0.26.2

package/package.json

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

package/styles/ui-badge.css

@@ -7,6 +7,10 @@
       syntax: "*";
       inherits: false;
     }
+@property --ui-badge-circle-size {
+      syntax: "*";
+      inherits: false;
+    }
 @property --ui-badge-dot-size {
       syntax: "*";
       inherits: false;
@@ -282,6 +286,36 @@
       display: none;
     }
 
+    /* A visible glyph needs fixed geometry, unlike a content-sized pill or a hidden-label dot. */
+    :scope[data-ui-badge-state~="shape=circle"] {
+      --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-3) * 2));
+      display: inline-flex;
+      flex: none;
+      inline-size: var(--_badge-circle-size);
+      block-size: var(--_badge-circle-size);
+      min-inline-size: var(--_badge-circle-size);
+      min-block-size: var(--_badge-circle-size);
+      padding: 0;
+      border-radius: var(--ui-radius-round);
+      text-box-trim: none;
+    }
+
+    :scope[data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=xs"] {
+      --_badge-circle-size: var(--ui-badge-circle-size, var(--ui-space-4));
+    }
+
+    :scope[data-ui-badge-state~="shape=circle"] .label {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
+      text-box-trim: none;
+    }
+
+    :scope[data-ui-badge-state~="shape=circle"] .label:empty {
+      display: none;
+    }
+
     /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
     :scope[data-ui-badge-state~="shape=dot"] {
       position: relative;
@@ -399,6 +433,12 @@
       margin-inline-end: 0;
     }
 
+    /* A visible glyph needs fixed geometry, unlike a content-sized pill or a hidden-label dot. */
+
+    :scope[data-ui-badge-state~="shape=circle"] .label :where([data-slotted], [data-slotted] *):is(svg) {
+      margin-inline-end: 0;
+    }
+
     /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
 
     /* The clipped point needs an inset surface over an outer border-colour shape: a native border

package/styles/ui-container.css

@@ -23,6 +23,14 @@
     :scope[data-ui-container-state~="measure=narrow"] {
       --_container-measure: 45ch;
     }
+    :scope[data-ui-container-state~="fill"] {
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      min-inline-size: 0;
+      min-block-size: 0;
+    }
     :scope[data-ui-container-state~="measure=wide"] {
       --_container-measure: 80ch;
     }

package/styles/ui-dialog.css

@@ -104,7 +104,7 @@
       display: none;
     }
 
-    /* Header and actions stay pinned; only the body scrolls when content is long. */
+    /* Own the layout wrapper; nested component roots are outside these scoped rules. */
     header {
       display: flex;
       align-items: center;
@@ -183,9 +183,11 @@
     }
 
     .body {
+      display: flex;
+      flex-direction: column;
       flex: 1 1 auto;
       min-block-size: 0;
-      padding: var(--ui-space-5);
+      padding: var(--ui-space-3) var(--ui-space-5) var(--ui-space-5);
     }
 
     footer {
@@ -194,7 +196,7 @@
       flex-wrap: wrap;
       justify-content: flex-end;
       gap: var(--ui-space-2);
-      padding: var(--ui-space-3) var(--ui-space-5);
+      padding: 0 var(--ui-space-5) var(--ui-space-5);
     }
 
     footer:empty {
@@ -223,7 +225,7 @@
 @scope ([data-component~="ui-dialog"]) to ([data-component]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
-    /* Header and actions stay pinned; only the body scrolls when content is long. */
+    /* Own the layout wrapper; nested component roots are outside these scoped rules. */
 
     /* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
 

package/styles/ui-icon-button.css

@@ -87,6 +87,21 @@
       color: var(--ui-text-secondary);
     }
 
+    :scope[data-ui-icon-button-state~="tone=accent"] {
+      --_icon-button-border: var(--ui-accent-solid);
+      --_icon-button-hover-border: var(--ui-accent-hover);
+      --_icon-button-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
+      --_icon-button-outline-surface: color-mix(in srgb, var(--ui-accent-solid) 5%, var(--ui-surface-default));
+      color: var(--_icon-button-text);
+    }
+
+    /* Omitted tone retains the existing accent solid; explicit neutral is additive. */
+    :scope[data-ui-icon-button-state~="tone=neutral"] {
+      --_icon-button-solid-surface: var(--ui-text-primary);
+      --_icon-button-solid-hover-surface: var(--ui-text-primary);
+      --_icon-button-solid-text: var(--ui-surface-default);
+    }
+
     :scope[data-ui-icon-button-state~="anticipatory"] {
       position: relative;
     }
@@ -119,13 +134,13 @@
     }
 
     @media (hover: hover) and (pointer: fine) {
-      :scope[data-ui-icon-button-state~="anticipatory"]:not(:scope[data-ui-icon-button-state~="variant=solid"], :scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"], :disabled, [data-ui-proximity="near"], :hover, :focus-visible) {
+      :scope[data-ui-icon-button-state~="anticipatory"]:not(:scope[data-ui-icon-button-state~="variant=solid"], :scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible) {
         border-color: transparent;
         background-color: transparent;
         box-shadow: none;
       }
 
-      :scope[data-ui-icon-button-state~="anticipatory"]:not(:scope[data-ui-icon-button-state~="variant=solid"], :scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"], :disabled, [data-ui-proximity="near"], :hover, :focus-visible)
+      :scope[data-ui-icon-button-state~="anticipatory"]:not(:scope[data-ui-icon-button-state~="variant=solid"], :scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)
         .content {
         opacity: 0;
         transform: scale(0.65);
@@ -133,7 +148,7 @@
       }
     }
 
-    :scope[data-ui-icon-button-state~="anticipatory"]:is(:scope[data-ui-icon-button-state~="variant=solid"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
+    :scope[data-ui-icon-button-state~="anticipatory"]:is(:scope[data-ui-icon-button-state~="variant=solid"], [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
       opacity: 0;
     }
 
@@ -243,17 +258,17 @@
     }
 
     :scope[data-ui-icon-button-state~="variant=outline"] {
-      border-color: var(--ui-icon-button-border, var(--ui-control-border, var(--ui-border-strong)));
-      background-color: var(--ui-icon-button-outline-surface, var(--ui-surface-default));
+      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);
-      color: var(--ui-icon-button-outline-text, var(--ui-text-primary));
+      color: var(--ui-icon-button-outline-text, var(--_icon-button-text, var(--ui-text-primary)));
       box-shadow: var(--ui-raised);
     }
 
     :scope[data-ui-icon-button-state~="variant=solid"] {
-      background-color: var(--ui-icon-button-solid-surface, var(--ui-accent-solid));
+      background-color: var(--ui-icon-button-solid-surface, var(--_icon-button-solid-surface, var(--ui-accent-solid)));
       background-image: var(--ui-raised-highlight);
-      color: var(--ui-icon-button-solid-text, var(--ui-text-on-accent));
+      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)
@@ -263,20 +278,32 @@
     :scope:hover:enabled:not([aria-disabled="true"]) {
       /* Derived from the text colour so the ghost hover shows on any background. */
       background-color: var(--ui-icon-button-hover-surface, color-mix(in srgb, currentColor 8%, transparent));
-      color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
+      color: var(--ui-icon-button-hover-text, var(--_icon-button-text, var(--ui-text-primary)));
     }
 
     :scope[data-ui-icon-button-state~="variant=outline"]:hover:enabled:not([aria-disabled="true"]) {
-      border-color: var(--ui-icon-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border)));
+      border-color: var(--ui-icon-button-hover-border, var(--_icon-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border))));
     }
 
     :scope[data-ui-icon-button-state~="variant=solid"]:hover:enabled:not([aria-disabled="true"]) {
-      background-color: var(--ui-icon-button-solid-hover-surface, var(--ui-accent-hover));
+      background-color: var(--ui-icon-button-solid-hover-surface, var(--_icon-button-solid-hover-surface, var(--ui-accent-hover)));
+    }
+
+    :scope[data-ui-icon-button-state~="variant=solid"][data-ui-icon-button-state~="tone=accent"]:hover:enabled:not([aria-disabled="true"]),
+    :scope[data-ui-icon-button-state~="variant=solid"][data-ui-icon-button-state~="tone=neutral"]:hover:enabled:not([aria-disabled="true"]) {
+      color: var(--ui-icon-button-solid-text, var(--_icon-button-solid-text, var(--ui-text-on-accent)));
     }
 
     :scope[data-ui-icon-button-state~="variant=ghost"][aria-expanded="true"]:enabled:not([aria-disabled="true"]) {
       background-color: var(--ui-icon-button-active-surface, color-mix(in srgb, currentColor 16%, transparent));
-      color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
+      color: var(--ui-icon-button-hover-text, var(--_icon-button-text, var(--ui-text-primary)));
+      box-shadow: var(--ui-pressed);
+    }
+
+    /* Native toggle state persists after pointer release, including during loading. */
+    :scope[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled {
+      background-color: var(--ui-icon-button-active-surface, color-mix(in srgb, currentColor 12%, var(--ui-surface-default)));
+      background-image: none;
       box-shadow: var(--ui-pressed);
     }
 
@@ -309,6 +336,22 @@
       box-shadow: var(--ui-focus-halo);
     }
 
+    :scope[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:focus-visible {
+      box-shadow:
+        var(--ui-pressed),
+        var(--ui-focus-halo);
+    }
+
+    @media (forced-colors: active) {
+      :scope[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled {
+        outline: var(--ui-focus-width) solid Highlight;
+        outline-offset: calc(-2 * var(--ui-focus-width));
+      }
+      :scope[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:focus-visible {
+        outline-offset: var(--ui-focus-width);
+      }
+    }
+
     /* Disabled is a flat neutral control, independent of the active variant's tone. */
     :scope:disabled {
       border-color: var(--ui-disabled-border);
@@ -349,6 +392,8 @@
 @scope ([data-component~="ui-icon-button"]) to ([data-component]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
+    /* Omitted tone retains the existing accent solid; explicit neutral is additive. */
+
     /* At rest an anticipatory button shows only its guide dot. The icon grows into place when
        proximity, hover, or focus reveals it; the button's hit area and guide remain stable. */
 
@@ -368,9 +413,14 @@
     @media (pointer: coarse) {
     }
 
+    /* Native toggle state persists after pointer release, including during loading. */
+
     @media (prefers-reduced-motion: reduce) {
     }
 
+    @media (forced-colors: active) {
+    }
+
     /* Disabled is a flat neutral control, independent of the active variant's tone. */
 
     :where([data-slotted], [data-slotted] *):is(svg) {

package/styles/ui-scroll-area.css

@@ -31,6 +31,8 @@
       display: flow-root;
     }
 
+    /* Trim projected edges without changing spacing inside an item. */
+
     :scope[data-ui-scroll-area-state~="orientation=horizontal"] {
       overflow-x: auto;
       overflow-y: hidden;
@@ -61,5 +63,14 @@
        into whatever is behind the area without needing to know its colour. Before upgrade, its
        zero-length defaults leave the authored scroll area fully visible. */
 
+    /* Trim projected edges without changing spacing inside an item. */
+    :scope[data-ui-scroll-area-state~="trim"] .content > :where([data-slotted], [data-slotted] *):is(:first-child) {
+      margin-block-start: 0;
+    }
+
+    :scope[data-ui-scroll-area-state~="trim"] .content > :where([data-slotted], [data-slotted] *):is(:last-child) {
+      margin-block-end: 0;
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/vanilla/UiBadge.d.ts

@@ -6,7 +6,7 @@ export interface UiBadgeElement extends HTMLSpanElement {
   removeEventListener<K extends keyof UiBadgeEventMap>(type: K, listener: (this: UiBadgeElement, event: UiBadgeEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
 }
 export interface UiBadgeProps {
-  shape?: "pill" | "tag" | "dot" | "square" | null;
+  shape?: "pill" | "tag" | "dot" | "square" | "circle" | null;
   size?: "xs" | "md" | null;
   tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger" | null;
   variant?: "solid" | "subtle" | "outline" | null;

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"],"default":"pill", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "size": { "required":false,"values":["xs","md"],"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"],"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","md"],"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"],"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/UiContainer.d.ts

@@ -6,6 +6,7 @@ export interface UiContainerElement extends HTMLDivElement {
   removeEventListener<K extends keyof UiContainerEventMap>(type: K, listener: (this: UiContainerElement, event: UiContainerEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
 }
 export interface UiContainerProps {
+  fill?: boolean | null;
   gutters?: "s" | "m" | "l" | null;
   measure?: "narrow" | "wide" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;

package/vanilla/UiContainer.js

@@ -1,12 +1,12 @@
 // Generated by HTML Next 1.0.0-alpha.35 for Vanilla DOM. Do not edit.
-import { attachGeneratedController, buildTemplate, writeAttribute, dispose, formatOf, keywordFormat, hostState, acceptProps, manageProps, project, fillSlot, checkFormat } from "@nextwebwg/html-next/generated-runtime";
+import { attachGeneratedController, buildTemplate, writeAttribute, dispose, formatOf, keywordFormat, hostState, acceptProps, manageProps, project, fillSlot, checkBoolean, checkFormat } from "@nextwebwg/html-next/generated-runtime";
 import "../styles/ui-container.css";
 
 const T0 = ["",[],4];
 const T1 = ["",[]];
 let P0, P1;
 const S = { n: [], t: [], f: import.meta.url, g: "ui-container" };
-const D = { props: { "gutters": { "required":false,"values":["s","m","l"], c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "measure": { "required":false,"values":["narrow","wide"], c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
+const D = { props: { "fill": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "gutters": { "required":false,"values":["s","m","l"], c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "measure": { "required":false,"values":["narrow","wide"], c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
 
 export function createUiContainer(options = {}, html) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -17,7 +17,7 @@ export function createUiContainer(options = {}, html) {
   }
   element.setAttribute("data-component", "ui-container");
   element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
-  const v = [null, null];
+  const v = [null, null, null];
   const B = acceptProps(element, D, S.n, v, componentProps, [], html);
   const m1 = (d) => {
     const n = (P1 ??= buildTemplate(T1)).cloneNode(true);
@@ -28,8 +28,8 @@ export function createUiContainer(options = {}, html) {
   const p1 = (r, c, d) => {
   };
   const p0 = (r, c, d) => {
-    if (c & 3) {
-      const x0 = hostState(["measure","gutters"], [v[1], v[0]]);
+    if (c & 7) {
+      const x0 = hostState(["measure","fill","gutters"], [v[2], v[0], v[1]]);
       const s0 = x0;
       if (s0 !== r.v0) writeAttribute(r.n, "data-ui-container-state", (r.v0 = s0) === "" ? null : s0);
     }

package/vanilla/UiDialog.js

@@ -3,7 +3,7 @@ import { attachGeneratedController, buildTemplate, clearRegion, toAttribute, toT
 import * as controller from "../components/ui-dialog/ui-dialog.js";
 import "../styles/ui-dialog.css";
 
-const T0 = ["",[],["header",[],1,["button",["class","close","type","button","aria-label","Close"]]],["ui-scroll-area",["class","body"],4],["footer",[],4]];
+const T0 = ["",[],["header",[],1,["button",["class","close","type","button","aria-label","Close"]]],["div",["class","body"],["ui-scroll-area",[],4]],["footer",[],4]];
 const T1 = ["h2",["class","title"],0];
 const T2 = ["",[]];
 const T3 = ["",[]];
@@ -59,10 +59,15 @@ export function createUiDialog(options = {}, html) {
       const s0 = toAttribute(x0, "aria-label");
       if (s0 !== r.v0) writeAttribute(r.n, "aria-label", r.v0 = s0);
     }
+    if (c === -1) {
+      const x1 = true;
+      const s1 = toAttribute(x1, "trim");
+      if (s1 !== r.v1) writeAttribute(r.a3, "trim", r.v1 = s1);
+    }
     if (c & 516) {
-      const x1 = hostState(["size","alert"], [v[9], v[2]]);
-      const s1 = x1;
-      if (s1 !== r.v1) writeAttribute(r.n, "data-ui-dialog-state", (r.v1 = s1) === "" ? null : s1);
+      const x2 = hostState(["size","alert"], [v[9], v[2]]);
+      const s2 = x2;
+      if (s2 !== r.v2) writeAttribute(r.n, "data-ui-dialog-state", (r.v2 = s2) === "" ? null : s2);
     }
     if (c & 32) {
       const t0 = truthy(v[5]);
@@ -74,10 +79,10 @@ export function createUiDialog(options = {}, html) {
         }
       } else if (r.b0 !== undefined) p1(r.b0, c, d);
     } else if (r.b0 !== undefined) p1(r.b0, c, d);
-    if (r.f1 === undefined) { r.f1 = 1; const at = fillSlot(r.a3, r.e1, "", J, false, undefined, d);
+    if (r.f1 === undefined) { r.f1 = 1; const at = fillSlot(r.a4, 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 = m2(d); at.before(r.b1.n); } }
     else if (r.b1 !== undefined) p2(r.b1, c, d);
-    if (r.f2 === undefined) { r.f2 = 1; const at = fillSlot(r.a4, r.e2, "actions", J, false, undefined, d);
+    if (r.f2 === undefined) { r.f2 = 1; const at = fillSlot(r.a5, r.e2, "actions", 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 = m3(d); at.before(r.b2.n); } }
     else if (r.b2 !== undefined) p3(r.b2, c, d);
   };
@@ -86,8 +91,9 @@ export function createUiDialog(options = {}, html) {
   const t2 = t1.nextSibling.nextSibling;
   const t3 = t0.nextSibling;
   const t4 = t3.firstChild;
-  const t5 = t3.nextSibling.firstChild;
-  const R = { n: element, v0: undefined, v1: undefined, a1: t1, e0: t1.nextSibling, b0: undefined, a3: t4, e1: t4.nextSibling, b1: undefined, f1: undefined, a4: t5, e2: t5.nextSibling, b2: undefined, f2: undefined };
+  const t5 = t4.firstChild;
+  const t6 = t3.nextSibling.firstChild;
+  const R = { n: element, a3: t4, v0: undefined, v1: null, v2: undefined, a1: t1, e0: t1.nextSibling, b0: undefined, a4: t5, e1: t5.nextSibling, b1: undefined, f1: undefined, a5: t6, e2: t6.nextSibling, b2: undefined, f2: undefined };
   const I = { B };
   const J = project(I, children, slots);
   I.R = new Set();

package/vanilla/UiIconButton.d.ts

@@ -14,6 +14,7 @@ export interface UiIconButtonProps {
   pending?: boolean | null;
   round?: boolean | null;
   size?: "sm" | "md" | "lg" | null;
+  tone?: "accent" | "neutral" | null;
   variant?: "ghost" | "outline" | "solid" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];

package/vanilla/UiIconButton.js

@@ -8,7 +8,7 @@ const T1 = ["ui-spinner",["size","sm"]];
 const T2 = ["",[]];
 let P0, P1, P2;
 const S = { n: [], t: [], f: import.meta.url, g: "ui-icon-button" };
-const D = { props: { "anticipatory": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "label": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "loading": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "matchButton": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "pending": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "round": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "size": { "required":false,"values":["sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "variant": { "required":false,"values":["ghost","outline","solid"],"default":"ghost", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
+const D = { props: { "anticipatory": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "label": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "loading": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "matchButton": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "pending": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "round": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "size": { "required":false,"values":["sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "tone": { "required":false,"values":["accent","neutral"], c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "variant": { "required":false,"values":["ghost","outline","solid"],"default":"ghost", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
 const C = (host) => controller.default(host);
 
 export function createUiIconButton(options = {}, html) {
@@ -21,7 +21,7 @@ export function createUiIconButton(options = {}, html) {
   if (!element.hasAttribute("type")) element.setAttribute("type", "button");
   element.setAttribute("data-component", "ui-icon-button");
   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, ["matchButton"], html);
   const m1 = (d) => {
     const n = (P1 ??= buildTemplate(T1)).cloneNode(true);
@@ -67,8 +67,8 @@ export function createUiIconButton(options = {}, html) {
       const s4 = toAttribute(x4, "aria-busy");
       if (s4 !== r.v4) writeAttribute(r.n, "aria-busy", r.v4 = s4);
     }
-    if (c & 505) {
-      const x5 = hostState(["anticipatory","variant","loading","pending","size","matchButton","round"], [v[0], v[8], v[3], v[5], v[7], v[4], v[6]]);
+    if (c & 1017) {
+      const x5 = hostState(["tone","anticipatory","variant","loading","pending","size","matchButton","round"], [v[8], v[0], v[9], v[3], v[5], v[7], v[4], v[6]]);
       const s5 = x5;
       if (s5 !== r.v5) writeAttribute(r.n, "data-ui-icon-button-state", (r.v5 = s5) === "" ? null : s5);
     }

package/vanilla/UiScrollArea.d.ts

@@ -9,6 +9,7 @@ export interface UiScrollAreaProps {
   fill?: boolean | null;
   orientation?: "vertical" | "horizontal" | null;
   size?: "content" | "sm" | "md" | "lg" | null;
+  trim?: boolean | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

package/vanilla/UiScrollArea.js

@@ -7,7 +7,7 @@ const T0 = ["",[],["div",["class","content"],4]];
 const T1 = ["",[]];
 let P0, P1;
 const S = { n: [], t: [], f: import.meta.url, g: "ui-scroll-area" };
-const D = { props: { "fill": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "orientation": { "required":false,"values":["vertical","horizontal"],"default":"vertical", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "size": { "required":false,"values":["content","sm","md","lg"],"default":"content", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
+const D = { props: { "fill": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "orientation": { "required":false,"values":["vertical","horizontal"],"default":"vertical", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "size": { "required":false,"values":["content","sm","md","lg"],"default":"content", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "trim": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" } } };
 const C = (host) => controller.default(host);
 
 export function createUiScrollArea(options = {}, html) {
@@ -19,7 +19,7 @@ export function createUiScrollArea(options = {}, html) {
   }
   element.setAttribute("data-component", "ui-scroll-area");
   element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
-  const v = [null, null, null];
+  const v = [null, null, null, null];
   const B = acceptProps(element, D, S.n, v, componentProps, [], html);
   const m1 = (d) => {
     const n = (P1 ??= buildTemplate(T1)).cloneNode(true);
@@ -30,8 +30,8 @@ export function createUiScrollArea(options = {}, html) {
   const p1 = (r, c, d) => {
   };
   const p0 = (r, c, d) => {
-    if (c & 7) {
-      const x0 = hostState(["fill","orientation","size"], [v[0], v[1], v[2]]);
+    if (c & 15) {
+      const x0 = hostState(["fill","orientation","size","trim"], [v[0], v[1], v[2], v[3]]);
       const s0 = x0;
       if (s0 !== r.v0) writeAttribute(r.n, "data-ui-scroll-area-state", (r.v0 = s0) === "" ? null : s0);
     }

package/vue/UiBadge.d.ts

@@ -7,7 +7,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     shape: {
-        type: PropType<"pill" | "tag" | "dot" | "square" | null>;
+        type: PropType<"pill" | "tag" | "dot" | "square" | "circle" | null>;
         default: string;
     };
     size: {
@@ -24,7 +24,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     shape: {
-        type: PropType<"pill" | "tag" | "dot" | "square" | null>;
+        type: PropType<"pill" | "tag" | "dot" | "square" | "circle" | null>;
         default: string;
     };
     size: {
@@ -40,7 +40,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
 }>> & Readonly<{}>, {
-    shape: "dot" | "tag" | "square" | "pill" | null;
+    shape: "circle" | "dot" | "tag" | "square" | "pill" | null;
     size: "xs" | "md" | null;
     tone: "info" | "neutral" | "accent" | "success" | "warning" | "danger" | null;
     variant: "solid" | "subtle" | "outline" | null;

package/vue/UiBadge.vue

@@ -13,8 +13,8 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'shape' },
       description:
-        'Silhouette. pill is rounded at both ends; tag is a pointed label. dot is a compact circular signal with visually hidden text: include a state label, or set\n      aria-hidden when the surrounding control already names that state. square is a fixed rounded square for an icon or single glyph beside a heading; hide a\n      decorative icon when adjacent words name it.',
-      values: ['pill', 'tag', 'dot', 'square'],
+        'Silhouette. pill is rounded at both ends; tag is a pointed label. dot is a compact circular signal with visually hidden text: include a state label, or set\n      aria-hidden when the surrounding control already names that state. square is a fixed rounded square for an icon or single glyph beside a heading; hide a\n      decorative icon when adjacent words name it. circle frames a visible single glyph or icon in a fixed circle, centered in both directions.',
+      values: ['pill', 'tag', 'dot', 'square', 'circle'],
       default: 'pill',
     },
     size: {
@@ -22,7 +22,7 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'size' },
       description:
-        'Scale. xs is a compact count beside small controls; md is the usual text badge. A square is 24px at xs and 32px at md with default spacing.',
+        'Scale. xs is a compact count beside small controls; md is the usual text badge. A square is 24px at xs and 32px at md with default spacing. A circle is\n      16px at xs and 24px at md.',
       values: ['xs', 'md'],
       default: 'md',
     },
@@ -48,7 +48,7 @@ const propValidityContract = {
 } as const
 const props = defineProps({
   shape: {
-    type: null as unknown as PropType<'pill' | 'tag' | 'dot' | 'square' | null>,
+    type: null as unknown as PropType<'pill' | 'tag' | 'dot' | 'square' | 'circle' | null>,
     default: 'pill',
   },
   size: { type: null as unknown as PropType<'xs' | 'md' | null>, default: 'md' },
@@ -70,13 +70,13 @@ const acceptedProps: Record<string, unknown> = {
   variant: 'subtle',
 }
 const checkedProps = computed(() => ({
-  shape: checkedProp<'pill' | 'tag' | 'dot' | 'square'>(
+  shape: checkedProp<'pill' | 'tag' | 'dot' | 'square' | 'circle'>(
     props['shape'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'shape',
     acceptedProps,
-  ) as 'pill' | 'tag' | 'dot' | 'square',
+  ) as 'pill' | 'tag' | 'dot' | 'square' | 'circle',
   size: checkedProp<'xs' | 'md'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
@@ -191,6 +191,10 @@ const hostState = computed(() =>
   syntax: "*";
   inherits: false;
 }
+@property --ui-badge-circle-size {
+  syntax: "*";
+  inherits: false;
+}
 @property --ui-badge-dot-size {
   syntax: "*";
   inherits: false;
@@ -490,6 +494,40 @@ const hostState = computed(() =>
   display: none;
 }
 
+/* A visible glyph needs fixed geometry, unlike a content-sized pill or a hidden-label dot. */
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] {
+  --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-3) * 2));
+  display: inline-flex;
+  flex: none;
+  inline-size: var(--_badge-circle-size);
+  block-size: var(--_badge-circle-size);
+  min-inline-size: var(--_badge-circle-size);
+  min-block-size: var(--_badge-circle-size);
+  padding: 0;
+  border-radius: var(--ui-radius-round);
+  text-box-trim: none;
+}
+
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=xs"] {
+  --_badge-circle-size: var(--ui-badge-circle-size, var(--ui-space-4));
+}
+
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  text-box-trim: none;
+}
+
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label :slotted(svg) {
+  margin-inline-end: 0;
+}
+
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label:empty {
+  display: none;
+}
+
 /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
 [data-component~="ui-badge"][data-ui-badge-state~="shape=dot"] {
   position: relative;