@threadlabs/looma 0.26.1 → 0.26.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.26.1",
+  "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-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/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/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/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;

package/vue/UiContainer.d.ts

@@ -4,6 +4,10 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    fill: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     gutters: {
         type: PropType<"s" | "m" | "l" | null>;
         default: null;
@@ -13,6 +17,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: null;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    fill: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     gutters: {
         type: PropType<"s" | "m" | "l" | null>;
         default: null;
@@ -22,6 +30,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: null;
     };
 }>> & Readonly<{}>, {
+    fill: boolean | null;
     gutters: "s" | "m" | "l" | null;
     measure: "narrow" | "wide" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/vue/UiContainer.vue

@@ -8,6 +8,14 @@ defineOptions({ inheritAttrs: false })
 
 const propValidityContract = {
   props: {
+    fill: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'fill' },
+      description:
+        'Keeps the readable width while filling available layout space. Uses a flex column so scrolling children can shrink inside a bounded flex or grid parent.\n      Omit it to keep the usual block layout.',
+      default: false,
+    },
     gutters: {
       type: { kind: 'terminal', name: 'keyword' },
       required: false,
@@ -27,11 +35,19 @@ const propValidityContract = {
   },
 } as const
 const props = defineProps({
+  fill: { type: null as unknown as PropType<boolean | null>, default: false },
   gutters: { type: null as unknown as PropType<'s' | 'm' | 'l' | null>, default: null },
   measure: { type: null as unknown as PropType<'narrow' | 'wide' | null>, default: null },
 })
-const acceptedProps: Record<string, unknown> = { gutters: null, measure: null }
+const acceptedProps: Record<string, unknown> = { fill: false, gutters: null, measure: null }
 const checkedProps = computed(() => ({
+  fill: checkedProp<boolean>(
+    props['fill'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'fill',
+    acceptedProps,
+  ) as boolean,
   gutters: checkedProp<'s' | 'm' | 'l'>(
     props['gutters'],
     { kind: 'terminal', name: 'keyword' },
@@ -108,6 +124,7 @@ const hostState = computed(() =>
     checkedProps.value.measure && 'measure',
     checkedProps.value.measure != null
     && `measure=${encodeURIComponent(checkedProps.value.measure)}`,
+    checkedProps.value.fill && 'fill',
     checkedProps.value.gutters && 'gutters',
     checkedProps.value.gutters != null
     && `gutters=${encodeURIComponent(checkedProps.value.gutters)}`,
@@ -120,6 +137,7 @@ const hostState = computed(() =>
     data-component="ui-container"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
+    :data-fill="reflectedProp('fill', 'fill', checkedProps.fill, undefined, false)"
     :data-gutters="reflectedProp('gutters', 'gutters', checkedProps.gutters, undefined, false)"
     :data-measure="reflectedProp('measure', 'measure', checkedProps.measure, undefined, false)"
     :data-ui-container-state="hostState || undefined"
@@ -152,6 +170,14 @@ const hostState = computed(() =>
 [data-component~="ui-container"][data-ui-container-state~="measure=narrow"] {
   --_container-measure: 45ch;
 }
+[data-component~="ui-container"][data-ui-container-state~="fill"] {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-inline-size: 0;
+  min-block-size: 0;
+}
 [data-component~="ui-container"][data-ui-container-state~="measure=wide"] {
   --_container-measure: 80ch;
 }

package/vue/UiIconButton.d.ts

@@ -36,6 +36,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"sm" | "md" | "lg" | null>;
         default: string;
     };
+    tone: {
+        type: PropType<"accent" | "neutral" | null>;
+        default: null;
+    };
     variant: {
         type: PropType<"ghost" | "outline" | "solid" | null>;
         default: string;
@@ -73,6 +77,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"sm" | "md" | "lg" | null>;
         default: string;
     };
+    tone: {
+        type: PropType<"accent" | "neutral" | null>;
+        default: null;
+    };
     variant: {
         type: PropType<"ghost" | "outline" | "solid" | null>;
         default: string;
@@ -81,6 +89,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     label: string | null;
     round: boolean | null;
     size: "sm" | "md" | "lg" | null;
+    tone: "neutral" | "accent" | null;
     variant: "solid" | "outline" | "ghost" | null;
     disabled: boolean | null;
     loading: boolean | null;