@threadlabs/looma 0.26.2 → 0.26.4

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/UiCallout.vue

@@ -245,8 +245,10 @@ const hostState = computed(() =>
   padding-inline-end: var(--ui-callout-padding-inline, var(--ui-space-3));
   border: var(--ui-callout-border-width, var(--ui-border-width)) solid
     color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
-  border-inline-start: var(--ui-callout-leading-border-width, var(--ui-accent-line-width)) solid
-    var(--ui-callout-border, var(--_callout-border));
+  border-inline-start: var(
+    --ui-callout-leading-border-width,
+    var(--ui-callout-border-width, var(--ui-border-width))
+  ) solid color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
   border-radius: var(--ui-radius-md);
   background: var(--ui-callout-surface, var(--_callout-surface));
   color: var(--ui-callout-text, var(--ui-text-primary));

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;

package/vue/UiListItem.vue

@@ -8,6 +8,15 @@ defineOptions({ inheritAttrs: false })
 
 const propValidityContract = {
   props: {
+    align: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'align' },
+      description:
+        'Where the leading and trailing regions sit vertically. center aligns them with the whole row. title aligns them with the first title line, keeping an\n      identifying icon beside its name when the title or description wraps. Taller controls retain their natural height.',
+      values: ['center', 'title'],
+      default: 'center',
+    },
     current: {
       type: { kind: 'terminal', name: 'boolean' },
       required: false,
@@ -52,6 +61,7 @@ const propValidityContract = {
   },
 } as const
 const props = defineProps({
+  align: { type: null as unknown as PropType<'center' | 'title' | null>, default: 'center' },
   current: { type: null as unknown as PropType<boolean | null>, default: false },
   highlighted: { type: null as unknown as PropType<boolean | null>, default: false },
   leadingInteractive: { type: null as unknown as PropType<boolean | null>, default: false },
@@ -59,6 +69,7 @@ const props = defineProps({
   wrap: { type: null as unknown as PropType<boolean | null>, default: false },
 })
 const acceptedProps: Record<string, unknown> = {
+  align: 'center',
   current: false,
   highlighted: false,
   leadingInteractive: false,
@@ -66,6 +77,13 @@ const acceptedProps: Record<string, unknown> = {
   wrap: false,
 }
 const checkedProps = computed(() => ({
+  align: checkedProp<'center' | 'title'>(
+    props['align'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'align',
+    acceptedProps,
+  ) as 'center' | 'title',
   current: checkedProp<boolean>(
     props['current'],
     { kind: 'terminal', name: 'boolean' },
@@ -167,6 +185,8 @@ const hostState = computed(() =>
     checkedProps.value.current && 'current',
     checkedProps.value.leadingInteractive && 'leadingInteractive',
     checkedProps.value.wrap && 'wrap',
+    checkedProps.value.align && 'align',
+    checkedProps.value.align != null && `align=${encodeURIComponent(checkedProps.value.align)}`,
   ].filter(Boolean).join(' ')
 )
 </script>
@@ -177,6 +197,7 @@ const hostState = computed(() =>
     v-bind="nativeAttrs($attrs)"
     :aria-current="checkedProps.current ?? undefined"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
+    :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-current="reflectedProp('current', 'current', checkedProps.current, undefined, false)"
     :data-highlighted="reflectedProp('highlighted', 'highlighted', checkedProps.highlighted, undefined, false)"
     :data-leading-interactive="reflectedProp(
@@ -341,6 +362,16 @@ const hostState = computed(() =>
   line-height: var(--ui-line-height-tight);
 }
 
+/* Keep identity and disclosure marks beside the first line, even with a long description. */
+[data-component~="ui-list-item"][data-ui-list-item-state~="align=title"] {
+  align-items: flex-start;
+}
+
+[data-component~="ui-list-item"][data-ui-list-item-state~="align=title"] .leading,
+[data-component~="ui-list-item"][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);

package/vue/UiPopover.d.ts

@@ -63,7 +63,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     }>) => any) | undefined;
 }>, {
     open: boolean | null;
-    size: "sm" | "md" | "content" | "lg" | null;
+    size: "sm" | "md" | "lg" | "content" | null;
     for: string | null;
     placement: "left" | "right" | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/vue/UiScrollArea.d.ts

@@ -39,7 +39,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>> & Readonly<{}>, {
     fill: boolean | null;
-    size: "sm" | "md" | "content" | "lg" | null;
+    size: "sm" | "md" | "lg" | "content" | null;
     trim: boolean | null;
     orientation: "vertical" | "horizontal" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/vue/UiToast.vue

@@ -234,6 +234,7 @@ function attribute(value: unknown): any {
 
 [data-component~="ui-toast"] {
   --_ui-toast-accent: var(--ui-border-strong);
+  --_ui-toast-surface: var(--ui-surface-muted);
 
   display: flex;
   align-items: center;
@@ -242,13 +243,20 @@ function attribute(value: unknown): any {
   inline-size: 100%;
   margin: 0;
   padding: var(--ui-space-3) var(--ui-space-4);
+  /* The close button's internal space supplies the rest of the trailing inset. */
+  padding-inline-end: var(--ui-space-2);
   border: var(--ui-border-width) solid
-    var(--ui-toast-border, var(--ui-overlay-border, var(--ui-border-strong)));
-  border-inline-start: var(--ui-accent-line-width) solid
-    var(--ui-toast-accent, var(--_ui-toast-accent));
+    var(
+      --ui-toast-border,
+      var(--ui-overlay-border, var(--ui-toast-accent, var(--_ui-toast-accent)))
+    );
   border-radius: var(--ui-toast-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
-  background: var(--ui-toast-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+  background: var(--ui-toast-surface, var(--ui-overlay-surface, var(--_ui-toast-surface)));
   color: var(--ui-text-primary);
+  font-family: var(--ui-font-family-sans);
+  font-size: var(--ui-font-size-sm);
+  font-weight: var(--ui-font-normal);
+  line-height: var(--ui-line-height-md);
   box-shadow: var(
     --ui-toast-shadow,
     var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
@@ -258,15 +266,19 @@ function attribute(value: unknown): any {
 
 [data-component~="ui-toast"][data-ui-toast-state~="tone=info"] {
   --_ui-toast-accent: var(--ui-info-solid);
+  --_ui-toast-surface: var(--ui-info-soft);
 }
 [data-component~="ui-toast"][data-ui-toast-state~="tone=success"] {
   --_ui-toast-accent: var(--ui-success-solid);
+  --_ui-toast-surface: var(--ui-success-soft);
 }
 [data-component~="ui-toast"][data-ui-toast-state~="tone=warning"] {
   --_ui-toast-accent: var(--ui-warning-solid);
+  --_ui-toast-surface: var(--ui-warning-soft);
 }
 [data-component~="ui-toast"][data-ui-toast-state~="tone=danger"] {
   --_ui-toast-accent: var(--ui-danger-solid);
+  --_ui-toast-surface: var(--ui-danger-soft);
 }
 
 .message {
@@ -276,10 +288,6 @@ function attribute(value: unknown): any {
 .action:not(:has(> *)) {
   display: none;
 }
-.dismiss {
-  margin-inline-end: calc(var(--ui-space-2) * -1);
-}
-
 [data-component~="ui-toast"][hidden] {
   display: none;
 }

package/vue/UiToastRegion.vue

@@ -460,19 +460,27 @@ function uniqueKeys<T>(
 }
 
 .toast {
+  --_ui-toast-region-accent: var(--ui-border-strong);
+  --_ui-toast-region-tone-surface: var(--ui-surface-muted);
   display: grid;
   grid-template-columns: 1fr auto;
   gap: var(--ui-space-2);
   align-items: start;
   border: var(--ui-border-width) solid
-    var(--_ui-toast-region-border, var(--ui-overlay-border, var(--ui-border-strong)));
+    var(--_ui-toast-region-border, var(--ui-overlay-border, var(--_ui-toast-region-accent)));
   border-radius: var(--_ui-toast-region-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
   padding: var(--ui-space-3) var(--ui-space-4);
+  /* The close button's internal space supplies the rest of the trailing inset. */
+  padding-inline-end: var(--ui-space-2);
   background: var(
     --_ui-toast-region-surface,
-    var(--ui-overlay-surface, var(--ui-surface-elevated))
+    var(--ui-overlay-surface, var(--_ui-toast-region-tone-surface))
   );
   color: var(--ui-text-primary);
+  font-family: var(--ui-font-family-sans);
+  font-size: var(--ui-font-size-sm);
+  font-weight: var(--ui-font-normal);
+  line-height: var(--ui-line-height-md);
   box-shadow: var(
     --_ui-toast-region-shadow,
     var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
@@ -482,16 +490,20 @@ function uniqueKeys<T>(
 }
 
 .toast[data-tone="info"] {
-  border-inline-start: var(--ui-accent-line-width) solid var(--ui-info-solid);
+  --_ui-toast-region-accent: var(--ui-info-solid);
+  --_ui-toast-region-tone-surface: var(--ui-info-soft);
 }
 .toast[data-tone="success"] {
-  border-inline-start: var(--ui-accent-line-width) solid var(--ui-success-solid);
+  --_ui-toast-region-accent: var(--ui-success-solid);
+  --_ui-toast-region-tone-surface: var(--ui-success-soft);
 }
 .toast[data-tone="warning"] {
-  border-inline-start: var(--ui-accent-line-width) solid var(--ui-warning-solid);
+  --_ui-toast-region-accent: var(--ui-warning-solid);
+  --_ui-toast-region-tone-surface: var(--ui-warning-soft);
 }
 .toast[data-tone="danger"] {
-  border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger-solid);
+  --_ui-toast-region-accent: var(--ui-danger-solid);
+  --_ui-toast-region-tone-surface: var(--ui-danger-soft);
 }
 
 /* Leaving slides on down and fades; the controller removes the toast when this ends. */
@@ -567,7 +579,6 @@ function uniqueKeys<T>(
 
 .dismiss {
   align-self: center;
-  margin-inline-end: calc(var(--ui-space-2) * -1);
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */

package/vue/UiTooltip.d.ts

@@ -87,10 +87,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
     }>) => any) | undefined;
 }>, {
     open: boolean | null;
+    inverse: boolean | null;
     trigger: "hover" | "click" | "focus" | null;
     for: string | null;
     hideDelay: number | null;
-    inverse: boolean | null;
     placement: "left" | "right" | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end" | null;
     showDelay: number | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {

package/vue/chunks/UiAvatar.js

@@ -125,7 +125,7 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				},
 				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"
 			},
@@ -362,6 +362,6 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-8b3c5fb3"]]);
+}), [["__scopeId", "data-v-03720dc1"]]);
 //#endregion
 export { UiAvatar_default as t };

package/vue/chunks/UiBadge.js

@@ -46,7 +46,7 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 				},
 				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.",
+				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 glyph, icon or short bounded count in a fixed circle, centered in both\n      directions.",
 				values: [
 					"pill",
 					"tag",
@@ -63,8 +63,12 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 				},
 				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"],
+				description: "Scale. xs is compact; md is the usual text badge; lg adds room to fixed marks while retaining the usual text size. A square is 24px at xs, 32px at md and\n      40px at lg. A circle is 16px at xs, 24px at md and 32px at lg; use lg for short counts such as 30 or 99+.",
+				values: [
+					"xs",
+					"md",
+					"lg"
+				],
 				default: "md"
 			},
 			tone: {
@@ -92,11 +96,12 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 				},
 				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.",
+				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      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"
+					"outline",
+					"inverse"
 				],
 				default: "subtle"
 			}
@@ -174,6 +179,6 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-c96818e7"]]);
+}), [["__scopeId", "data-v-4d2f1396"]]);
 //#endregion
 export { UiBadge_default as t };

package/vue/chunks/UiCallout.js

@@ -160,6 +160,6 @@ var UiCallout_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-948263db"]]);
+}), [["__scopeId", "data-v-ca7a11cb"]]);
 //#endregion
 export { UiCallout_default as t };

package/vue/chunks/UiListItem.js

@@ -4,6 +4,7 @@ import { computed, createElementBlock, createElementVNode, defineComponent, getC
 //#region .build/vue/UiListItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"aria-current",
+	"data-align",
 	"data-current",
 	"data-highlighted",
 	"data-leading-interactive",
@@ -22,6 +23,10 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 	inheritAttrs: false,
 	__name: "UiListItem",
 	props: {
+		align: {
+			type: null,
+			default: "center"
+		},
 		current: {
 			type: null,
 			default: false
@@ -45,6 +50,17 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 	},
 	setup(__props) {
 		const propValidityContract = { props: {
+			align: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "align" },
+				description: "Where the leading and trailing regions sit vertically. center aligns them with the whole row. title aligns them with the first title line, keeping an\n      identifying icon beside its name when the title or description wraps. Taller controls retain their natural height.",
+				values: ["center", "title"],
+				default: "center"
+			},
 			current: {
 				type: {
 					kind: "terminal",
@@ -99,6 +115,7 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		} };
 		const props = __props;
 		const acceptedProps = {
+			align: "center",
 			current: false,
 			highlighted: false,
 			leadingInteractive: false,
@@ -106,6 +123,10 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			wrap: false
 		};
 		const checkedProps = computed(() => ({
+			align: checkedProp(props["align"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "align", acceptedProps),
 			current: checkedProp(props["current"], {
 				kind: "terminal",
 				name: "boolean"
@@ -158,11 +179,14 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			checkedProps.value.highlighted && "highlighted",
 			checkedProps.value.current && "current",
 			checkedProps.value.leadingInteractive && "leadingInteractive",
-			checkedProps.value.wrap && "wrap"
+			checkedProps.value.wrap && "wrap",
+			checkedProps.value.align && "align",
+			checkedProps.value.align != null && `align=${encodeURIComponent(checkedProps.value.align)}`
 		].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
 			return withDirectives((openBlock(), createElementBlock("li", mergeProps({ "data-component": "ui-list-item" }, nativeAttrs(_ctx.$attrs), {
 				"aria-current": checkedProps.value.current ?? void 0,
+				"data-align": reflectedProp("align", "align", checkedProps.value.align, void 0, false),
 				"data-current": reflectedProp("current", "current", checkedProps.value.current, void 0, false),
 				"data-highlighted": reflectedProp("highlighted", "highlighted", checkedProps.value.highlighted, void 0, false),
 				"data-leading-interactive": reflectedProp("leadingInteractive", "leading-interactive", checkedProps.value.leadingInteractive, void 0, false),
@@ -179,6 +203,6 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-bb9ba09d"]]);
+}), [["__scopeId", "data-v-6c3bc8f3"]]);
 //#endregion
 export { UiListItem_default as t };