@threadlabs/looma 0.26.2 → 0.26.3

package/package.json

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

@@ -124,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;
       }
     }
 
@@ -223,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);
@@ -276,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;
@@ -304,6 +332,10 @@
       --_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;
@@ -316,6 +348,18 @@
       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;
@@ -363,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));
@@ -419,14 +467,20 @@
       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) {
@@ -439,6 +493,11 @@
       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-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

@@ -7,9 +7,9 @@ export interface UiBadgeElement extends HTMLSpanElement {
 }
 export interface UiBadgeProps {
   shape?: "pill" | "tag" | "dot" | "square" | "circle" | null;
-  size?: "xs" | "md" | 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","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] } } };
+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/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

@@ -11,7 +11,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
     size: {
-        type: PropType<"xs" | "md" | null>;
+        type: PropType<"xs" | "md" | "lg" | null>;
         default: string;
     };
     tone: {
@@ -19,7 +19,7 @@ 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<{
@@ -28,7 +28,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         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: "circle" | "dot" | "tag" | "square" | "pill" | null;
-    size: "xs" | "md" | 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;

package/vue/UiBadge.vue

@@ -13,7 +13,7 @@ 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. circle frames a visible single glyph or icon in a fixed circle, centered in both directions.',
+        '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 glyph, icon or short bounded count in a fixed circle, centered in both\n      directions.',
       values: ['pill', 'tag', 'dot', 'square', 'circle'],
       default: 'pill',
     },
@@ -22,8 +22,8 @@ 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. A circle is\n      16px at xs and 24px at md.',
-      values: ['xs', 'md'],
+        'Scale. xs is compact; md is the usual text badge; lg adds room to fixed marks while retaining the usual text size. A square is 24px at xs, 32px at md and\n      40px at lg. A circle is 16px at xs, 24px at md and 32px at lg; use lg for short counts such as 30 or 99+.',
+      values: ['xs', 'md', 'lg'],
       default: 'md',
     },
     tone: {
@@ -40,8 +40,8 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'variant' },
       description:
-        'Emphasis. subtle sets toned text over a soft wash; solid fills with the tone and uses contrasting text; outline keeps the surface with a toned edge.\n      Neutral looks the same in solid and subtle. When space is constrained, the label truncates with an ellipsis while its full text remains available.',
-      values: ['solid', 'subtle', 'outline'],
+        'Emphasis. subtle sets toned text over a soft wash; solid fills with the tone and uses contrasting text; outline keeps the surface with a toned edge.\n      inverse uses a translucent contrasting surface and toned ink for a count or label on a filled control of that tone. Neutral looks the same in solid and\n      subtle. When space is constrained, the label truncates with an ellipsis while its full text remains available.',
+      values: ['solid', 'subtle', 'outline', 'inverse'],
       default: 'subtle',
     },
   },
@@ -51,7 +51,7 @@ const props = defineProps({
     type: null as unknown as PropType<'pill' | 'tag' | 'dot' | 'square' | 'circle' | null>,
     default: 'pill',
   },
-  size: { type: null as unknown as PropType<'xs' | 'md' | null>, default: 'md' },
+  size: { type: null as unknown as PropType<'xs' | 'md' | 'lg' | null>, default: 'md' },
   tone: {
     type: null as unknown as PropType<
       'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger' | null
@@ -59,7 +59,7 @@ const props = defineProps({
     default: 'neutral',
   },
   variant: {
-    type: null as unknown as PropType<'solid' | 'subtle' | 'outline' | null>,
+    type: null as unknown as PropType<'solid' | 'subtle' | 'outline' | 'inverse' | null>,
     default: 'subtle',
   },
 })
@@ -77,13 +77,13 @@ const checkedProps = computed(() => ({
     'shape',
     acceptedProps,
   ) as 'pill' | 'tag' | 'dot' | 'square' | 'circle',
-  size: checkedProp<'xs' | 'md'>(
+  size: checkedProp<'xs' | 'md' | 'lg'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'size',
     acceptedProps,
-  ) as 'xs' | 'md',
+  ) as 'xs' | 'md' | 'lg',
   tone: checkedProp<'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'>(
     props['tone'],
     { kind: 'terminal', name: 'keyword' },
@@ -91,13 +91,13 @@ const checkedProps = computed(() => ({
     'tone',
     acceptedProps,
   ) as 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger',
-  variant: checkedProp<'solid' | 'subtle' | 'outline'>(
+  variant: checkedProp<'solid' | 'subtle' | 'outline' | 'inverse'>(
     props['variant'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'variant',
     acceptedProps,
-  ) as 'solid' | 'subtle' | 'outline',
+  ) as 'solid' | 'subtle' | 'outline' | 'inverse',
 }))
 void checkedProps.value
 watchSyncEffect(() => {
@@ -328,25 +328,26 @@ const hostState = computed(() =>
   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) {
   [data-component~="ui-badge"] {
     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;
   }
   [data-component~="ui-badge"]:has(.icon:not(:empty)),
   [data-component~="ui-badge"]:has(.label svg) {
     display: inline-flex;
     text-box-trim: none;
   }
-  [data-component~="ui-badge"]: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;
   }
 }
 
@@ -427,6 +428,42 @@ const hostState = computed(() =>
   --_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. */
+[data-component~="ui-badge"][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;
+}
+
+[data-component~="ui-badge"][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. */
+[data-component~="ui-badge"][data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="tone=neutral"] {
+  color: var(--ui-badge-text, var(--_badge-color-text, var(--_badge-surface)));
+}
+
 [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"] {
   --_badge-surface: var(--ui-surface-default);
   --_badge-border: var(--ui-border-strong);
@@ -480,6 +517,13 @@ const hostState = computed(() =>
   --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-3) * 2));
 }
 
+[data-component~="ui-badge"][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))
+  );
+}
+
 [data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label {
   display: inline-flex;
   align-items: center;
@@ -512,6 +556,10 @@ const hostState = computed(() =>
   --_badge-circle-size: var(--ui-badge-circle-size, var(--ui-space-4));
 }
 
+[data-component~="ui-badge"][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));
+}
+
 [data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label {
   display: inline-flex;
   align-items: center;
@@ -528,6 +576,18 @@ const hostState = computed(() =>
   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) {
+  [data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label:not(:has(svg)),
+  [data-component~="ui-badge"][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. */
 [data-component~="ui-badge"][data-ui-badge-state~="shape=dot"] {
   position: relative;
@@ -587,6 +647,10 @@ const hostState = computed(() =>
   pointer-events: none;
 }
 
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-ui-badge-state~="variant=inverse"] {
+  background: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-text)));
+}
+
 [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"]:dir(rtl) {
   padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2));
   padding-inline-start: calc(

package/vue/UiCard.d.ts

@@ -52,7 +52,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
 }>> & Readonly<{}>, {
-    size: "sm" | "md" | "content" | "lg" | null;
+    size: "sm" | "md" | "lg" | "content" | null;
     tone: "info" | "neutral" | "accent" | "success" | "warning" | "danger" | null;
     variant: "subtle" | "outlined" | "elevated" | null;
     as: "div" | "article" | "aside" | "section" | null;

package/vue/UiListItem.d.ts

@@ -10,6 +10,10 @@ type __VLS_Slots = {} & {
     trailing?: (props: typeof __VLS_7) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    align: {
+        type: PropType<"center" | "title" | null>;
+        default: string;
+    };
     current: {
         type: PropType<boolean | null>;
         default: boolean;
@@ -31,6 +35,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: boolean;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    align: {
+        type: PropType<"center" | "title" | null>;
+        default: string;
+    };
     current: {
         type: PropType<boolean | null>;
         default: boolean;
@@ -54,6 +62,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{}>, {
     variant: "card" | "row" | null;
     current: boolean | null;
+    align: "title" | "center" | null;
     wrap: boolean | null;
     highlighted: boolean | null;
     leadingInteractive: boolean | null;