@threadlabs/looma 0.26.1 → 0.26.3

package/package.json

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

package/styles/ui-avatar.css

@@ -61,6 +61,10 @@
       border-color: var(--ui-avatar-border, var(--ui-border-strong));
     }
 
+    :scope[data-ui-avatar-state~="shape=circle"] {
+      box-shadow: var(--ui-shadow-sm);
+    }
+
     :scope[data-ui-avatar-state~="shape=square"] {
       border-radius: var(--ui-avatar-radius, var(--ui-radius-md));
     }

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;
@@ -120,25 +124,26 @@
       text-box-trim: none;
     }
 
-    /* Text-only badges retain their trimmed inline baseline. Icon content needs a flex row;
-       trimming its label separately keeps the glyph centered without changing adjacent lines. */
+    /* Center the capital/baseline text box, while clipping only inline overflow for ellipsis.
+       Vertical ink remains visible so trimming never cuts off ascenders or descenders. */
     @supports (text-box-trim: trim-both) {
       :scope {
         display: inline-block;
         min-block-size: var(--ui-badge-min-block-size, 1.5rem);
         text-align: center;
         align-content: center;
-        text-box-trim: trim-both;
-        text-box-edge: text;
+        text-box-trim: none;
       }
       :scope:has(.icon:not(:empty)),
       :scope:has(.label svg) {
         display: inline-flex;
         text-box-trim: none;
       }
-      :scope:has(.icon:not(:empty)) .label {
+      .label:not(:has(svg)) {
         text-box-trim: trim-both;
-        text-box-edge: text;
+        text-box-edge: cap alphabetic;
+        overflow-x: clip;
+        overflow-y: visible;
       }
     }
 
@@ -219,6 +224,29 @@
       --_badge-color-text: color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default));
     }
 
+    /* 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. */
+    :scope[data-ui-badge-state~="variant=inverse"] {
+      --_badge-color-surface: color-mix(in srgb, color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) 88%, transparent);
+      --_badge-color-border: var(--_badge-color-surface);
+      --_badge-color-text: color-mix(in srgb, var(--_badge-color-ink) 85%, var(--ui-text-primary));
+      --_badge-outline-surface: var(--ui-badge-surface, var(--_badge-color-surface, color-mix(in srgb, var(--_badge-text) 88%, transparent)));
+      border-color: var(--ui-badge-border, var(--_badge-color-border, color-mix(in srgb, var(--_badge-text) 88%, transparent)));
+      color: var(--ui-badge-text, var(--_badge-color-text, color-mix(in srgb, var(--_badge-surface) 85%, var(--ui-text-primary))));
+      /* Paint each translucent layer once, including the border, without a bright double-painted ring. */
+      background-clip: padding-box;
+    }
+
+    :scope[data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="shape=circle"] {
+      box-shadow: var(--ui-shadow-sm);
+    }
+
+    /* 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. */
+    :scope[data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="tone=neutral"] {
+      color: var(--ui-badge-text, var(--_badge-color-text, var(--_badge-surface)));
+    }
+
     :scope[data-ui-badge-state~="variant=outline"] {
       --_badge-surface: var(--ui-surface-default);
       --_badge-border: var(--ui-border-strong);
@@ -272,6 +300,10 @@
       --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-3) * 2));
     }
 
+    :scope[data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=lg"] {
+      --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-4) * 2 + var(--ui-space-2)));
+    }
+
     :scope[data-ui-badge-state~="shape=square"] .label {
       display: inline-flex;
       align-items: center;
@@ -282,6 +314,52 @@
       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"][data-ui-badge-state~="size=lg"] {
+      --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-4) * 2));
+    }
+
+    :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;
+    }
+
+    /* Center capital and numeral ink, rather than the font's ascent/descent line box.
+       Icon labels retain flex geometry; untrimmed browsers keep that fallback too. */
+    @supports (text-box-trim: trim-both) {
+      :scope[data-ui-badge-state~="shape=circle"] .label:not(:has(svg)),
+      :scope[data-ui-badge-state~="shape=square"] .label:not(:has(svg)) {
+        display: block;
+        text-box-trim: trim-both;
+        text-box-edge: cap alphabetic;
+        overflow: visible;
+      }
+    }
+
     /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
     :scope[data-ui-badge-state~="shape=dot"] {
       position: relative;
@@ -329,6 +407,10 @@
       pointer-events: none;
     }
 
+    :scope[data-ui-badge-state~="shape=tag"][data-ui-badge-state~="variant=inverse"] {
+      background: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-text)));
+    }
+
     :scope[data-ui-badge-state~="shape=tag"]:dir(rtl) {
       padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2));
       padding-inline-start: calc(var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point));
@@ -385,20 +467,37 @@
       margin-inline-end: var(--ui-space-1);
     }
 
-    /* Text-only badges retain their trimmed inline baseline. Icon content needs a flex row;
-       trimming its label separately keeps the glyph centered without changing adjacent lines. */
+    /* Center the capital/baseline text box, while clipping only inline overflow for ellipsis.
+       Vertical ink remains visible so trimming never cuts off ascenders or descenders. */
     @supports (text-box-trim: trim-both) {
     }
 
     /* A solid colour fills with the ink. Its text is the page surface, mixed at 0% only so that it too is
        invalid while the hook is unset. */
 
+    /* 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. */
+
+    /* Neutral reverses a subtle surface/ink pair rather than a strong tone. Keep its original
+       surface ink: moving it toward dark-theme primary text would reduce overlay contrast. */
+
     /* An icon mark keeps the existing tone recipe and follows the global spacing and radius. */
 
     :scope[data-ui-badge-state~="shape=square"] .label :where([data-slotted], [data-slotted] *):is(svg) {
       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;
+    }
+
+    /* Center capital and numeral ink, rather than the font's ascent/descent line box.
+       Icon labels retain flex geometry; untrimmed browsers keep that fallback too. */
+    @supports (text-box-trim: trim-both) {
+    }
+
     /* 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/styles/ui-list-item.css

@@ -134,6 +134,16 @@
       line-height: var(--ui-line-height-tight);
     }
 
+    /* Keep identity and disclosure marks beside the first line, even with a long description. */
+    :scope[data-ui-list-item-state~="align=title"] {
+      align-items: flex-start;
+    }
+
+    :scope[data-ui-list-item-state~="align=title"] .leading,
+    :scope[data-ui-list-item-state~="align=title"] .trailing {
+      min-block-size: calc(var(--ui-font-size-md) * var(--ui-line-height-tight));
+    }
+
     .description {
       color: var(--ui-text-muted);
       font-size: var(--ui-font-size-sm);
@@ -180,6 +190,8 @@
 
     /* Trailing controls take their own clicks, above the title link's stretched hit area. */
 
+    /* Keep identity and disclosure marks beside the first line, even with a long description. */
+
     .title > :where([data-slotted], [data-slotted] *):is(a) {
       color: inherit;
       text-decoration: none;

package/vanilla/UiBadge.d.ts

@@ -6,10 +6,10 @@ 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;
-  size?: "xs" | "md" | null;
+  shape?: "pill" | "tag" | "dot" | "square" | "circle" | null;
+  size?: "xs" | "md" | "lg" | null;
   tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger" | null;
-  variant?: "solid" | "subtle" | "outline" | null;
+  variant?: "solid" | "subtle" | "outline" | "inverse" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

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","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/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/vanilla/UiListItem.d.ts

@@ -6,6 +6,7 @@ export interface UiListItemElement extends HTMLLIElement {
   removeEventListener<K extends keyof UiListItemEventMap>(type: K, listener: (this: UiListItemElement, event: UiListItemEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
 }
 export interface UiListItemProps {
+  align?: "center" | "title" | null;
   current?: boolean | null;
   highlighted?: boolean | null;
   leadingInteractive?: boolean | null;

package/vanilla/UiListItem.js

@@ -9,7 +9,7 @@ const T3 = ["",[]];
 const T4 = ["",[]];
 let P0, P1, P2, P3, P4;
 const S = { n: [], t: [], f: import.meta.url, g: "ui-list-item" };
-const D = { props: { "current": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "highlighted": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "leadingInteractive": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "variant": { "required":false,"values":["row","card"],"default":"row", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "wrap": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" } } };
+const D = { props: { "align": { "required":false,"values":["center","title"],"default":"center", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "current": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "highlighted": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "leadingInteractive": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "variant": { "required":false,"values":["row","card"],"default":"row", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "wrap": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" } } };
 
 export function createUiListItem(options = {}, html) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -20,7 +20,7 @@ export function createUiListItem(options = {}, html) {
   }
   element.setAttribute("data-component", "ui-list-item");
   element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
-  const v = [null, null, null, null, null];
+  const v = [null, 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);
@@ -55,13 +55,13 @@ export function createUiListItem(options = {}, html) {
   const p4 = (r, c, d) => {
   };
   const p0 = (r, c, d) => {
-    if (c & 1) {
-      const x0 = v[0];
+    if (c & 2) {
+      const x0 = v[1];
       const s0 = toAttribute(x0, "aria-current");
       if (s0 !== r.v0) writeAttribute(r.n, "aria-current", r.v0 = s0);
     }
-    if (c & 31) {
-      const x1 = hostState(["variant","highlighted","current","leadingInteractive","wrap"], [v[3], v[1], v[0], v[2], v[4]]);
+    if (c & 63) {
+      const x1 = hostState(["variant","highlighted","current","leadingInteractive","wrap","align"], [v[4], v[2], v[1], v[3], v[5], v[0]]);
       const s1 = x1;
       if (s1 !== r.v1) writeAttribute(r.n, "data-ui-list-item-state", (r.v1 = s1) === "" ? null : s1);
     }

package/vue/UiAvatar.vue

@@ -66,7 +66,8 @@ const propValidityContract = {
       type: { kind: 'terminal', name: 'keyword' },
       required: false,
       target: { attribute: 'shape' },
-      description: 'Circle by default; square uses the theme\'s medium radius.',
+      description:
+        'Circle by default, with a shallow shadow; square uses the theme\'s medium radius.',
       values: ['circle', 'square'],
       default: 'circle',
     },
@@ -443,6 +444,10 @@ useComponentHost(() => import('../components/ui-avatar/ui-avatar.js'), {
   border-color: var(--ui-avatar-border, var(--ui-border-strong));
 }
 
+[data-component~="ui-avatar"][data-ui-avatar-state~="shape=circle"] {
+  box-shadow: var(--ui-shadow-sm);
+}
+
 [data-component~="ui-avatar"][data-ui-avatar-state~="shape=square"] {
   border-radius: var(--ui-avatar-radius, var(--ui-radius-md));
 }

package/vue/UiBadge.d.ts

@@ -7,11 +7,11 @@ 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: {
-        type: PropType<"xs" | "md" | null>;
+        type: PropType<"xs" | "md" | "lg" | null>;
         default: string;
     };
     tone: {
@@ -19,16 +19,16 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
     variant: {
-        type: PropType<"solid" | "subtle" | "outline" | null>;
+        type: PropType<"solid" | "subtle" | "outline" | "inverse" | null>;
         default: string;
     };
 }>, {}, {}, {}, {}, 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: {
-        type: PropType<"xs" | "md" | null>;
+        type: PropType<"xs" | "md" | "lg" | null>;
         default: string;
     };
     tone: {
@@ -36,14 +36,14 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
     variant: {
-        type: PropType<"solid" | "subtle" | "outline" | null>;
+        type: PropType<"solid" | "subtle" | "outline" | "inverse" | null>;
         default: string;
     };
 }>> & Readonly<{}>, {
-    shape: "dot" | "tag" | "square" | "pill" | null;
-    size: "xs" | "md" | null;
+    shape: "circle" | "dot" | "tag" | "square" | "pill" | null;
+    size: "xs" | "md" | "lg" | null;
     tone: "info" | "neutral" | "accent" | "success" | "warning" | "danger" | null;
-    variant: "solid" | "subtle" | "outline" | null;
+    variant: "solid" | "subtle" | "outline" | "inverse" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;