@threadlabs/looma 0.26.1 → 0.26.3

package/vue/UiBadge.vue

@@ -13,8 +13,8 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'shape' },
       description:
-        'Silhouette. pill is rounded at both ends; tag is a pointed label. dot is a compact circular signal with visually hidden text: include a state label, or set\n      aria-hidden when the surrounding control already names that state. square is a fixed rounded square for an icon or single glyph beside a heading; hide a\n      decorative icon when adjacent words name it.',
-      values: ['pill', 'tag', 'dot', 'square'],
+        'Silhouette. pill is rounded at both ends; tag is a pointed label. dot is a compact circular signal with visually hidden text: include a state label, or set\n      aria-hidden when the surrounding control already names that state. square is a fixed rounded square for an icon or single glyph beside a heading; hide a\n      decorative icon when adjacent words name it. circle frames a visible glyph, icon or short bounded count in a fixed circle, centered in both\n      directions.',
+      values: ['pill', 'tag', 'dot', 'square', 'circle'],
       default: 'pill',
     },
     size: {
@@ -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.',
-      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,18 +40,18 @@ 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',
     },
   },
 } as const
 const props = defineProps({
   shape: {
-    type: null as unknown as PropType<'pill' | 'tag' | 'dot' | 'square' | null>,
+    type: null as unknown as PropType<'pill' | 'tag' | 'dot' | 'square' | 'circle' | null>,
     default: 'pill',
   },
-  size: { type: null as unknown as PropType<'xs' | 'md' | null>, default: 'md' },
+  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',
   },
 })
@@ -70,20 +70,20 @@ const acceptedProps: Record<string, unknown> = {
   variant: 'subtle',
 }
 const checkedProps = computed(() => ({
-  shape: checkedProp<'pill' | 'tag' | 'dot' | 'square'>(
+  shape: checkedProp<'pill' | 'tag' | 'dot' | 'square' | 'circle'>(
     props['shape'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'shape',
     acceptedProps,
-  ) as 'pill' | 'tag' | 'dot' | 'square',
-  size: checkedProp<'xs' | 'md'>(
+  ) as 'pill' | 'tag' | 'dot' | 'square' | 'circle',
+  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(() => {
@@ -191,6 +191,10 @@ const hostState = computed(() =>
   syntax: "*";
   inherits: false;
 }
+@property --ui-badge-circle-size {
+  syntax: "*";
+  inherits: false;
+}
 @property --ui-badge-dot-size {
   syntax: "*";
   inherits: false;
@@ -324,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;
   }
 }
 
@@ -423,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);
@@ -476,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;
@@ -490,6 +538,56 @@ const hostState = computed(() =>
   display: none;
 }
 
+/* A visible glyph needs fixed geometry, unlike a content-sized pill or a hidden-label dot. */
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] {
+  --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-3) * 2));
+  display: inline-flex;
+  flex: none;
+  inline-size: var(--_badge-circle-size);
+  block-size: var(--_badge-circle-size);
+  min-inline-size: var(--_badge-circle-size);
+  min-block-size: var(--_badge-circle-size);
+  padding: 0;
+  border-radius: var(--ui-radius-round);
+  text-box-trim: none;
+}
+
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=xs"] {
+  --_badge-circle-size: var(--ui-badge-circle-size, var(--ui-space-4));
+}
+
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"][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;
+  justify-content: center;
+  line-height: 1;
+  text-box-trim: none;
+}
+
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label :slotted(svg) {
+  margin-inline-end: 0;
+}
+
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label:empty {
+  display: none;
+}
+
+/* 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;
@@ -549,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/UiContainer.d.ts

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

package/vue/UiContainer.vue

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

package/vue/UiIconButton.d.ts

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

package/vue/UiIconButton.vue

@@ -71,6 +71,14 @@ const propValidityContract = {
       values: ['sm', 'md', 'lg'],
       default: 'md',
     },
+    tone: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'tone' },
+      description:
+        'Colour for every variant. When omitted, ghost and outline keep their neutral appearance and solid keeps its accent fill. Set accent for a coloured action\n      or neutral for a quiet one. Native aria-pressed="true" keeps an outline toggle visibly pressed; the consumer owns that state.',
+      values: ['accent', 'neutral'],
+    },
     variant: {
       type: { kind: 'terminal', name: 'keyword' },
       required: false,
@@ -91,6 +99,7 @@ const props = defineProps({
   pending: { type: null as unknown as PropType<boolean | null>, default: false },
   round: { type: null as unknown as PropType<boolean | null>, default: false },
   size: { type: null as unknown as PropType<'sm' | 'md' | 'lg' | null>, default: 'md' },
+  tone: { type: null as unknown as PropType<'accent' | 'neutral' | null>, default: null },
   variant: {
     type: null as unknown as PropType<'ghost' | 'outline' | 'solid' | null>,
     default: 'ghost',
@@ -105,6 +114,7 @@ const acceptedProps: Record<string, unknown> = {
   pending: false,
   round: false,
   size: 'md',
+  tone: null,
   variant: 'ghost',
 }
 const checkedProps = computed(() => ({
@@ -164,6 +174,13 @@ const checkedProps = computed(() => ({
     'size',
     acceptedProps,
   ) as 'sm' | 'md' | 'lg',
+  tone: checkedProp<'accent' | 'neutral'>(
+    props['tone'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'tone',
+    acceptedProps,
+  ),
   variant: checkedProp<'ghost' | 'outline' | 'solid'>(
     props['variant'],
     { kind: 'terminal', name: 'keyword' },
@@ -269,6 +286,8 @@ if (
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
+    checkedProps.value.tone && 'tone',
+    checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`,
     checkedProps.value.anticipatory && 'anticipatory',
     checkedProps.value.variant && 'variant',
     checkedProps.value.variant != null
@@ -308,6 +327,7 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     'pending',
     'round',
     'size',
+    'tone',
     'variant',
   ],
   propValidity: (name: string) =>
@@ -364,6 +384,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
     :data-pending="reflectedProp('pending', 'pending', checkedProps.pending, undefined, false)"
     :data-round="reflectedProp('round', 'round', checkedProps.round, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-icon-button-state="hostState || undefined"
     ref="root"
@@ -461,6 +482,25 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
   color: var(--ui-text-secondary);
 }
 
+[data-component~="ui-icon-button"][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. */
+[data-component~="ui-icon-button"][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);
+}
+
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"] {
   position: relative;
 }
@@ -495,13 +535,13 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
 }
 
 @media (hover: hover) and (pointer: fine) {
-  [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"], :disabled, [data-ui-proximity="near"], :hover, :focus-visible) {
+  [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][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;
   }
 
-  [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"], :disabled, [data-ui-proximity="near"], :hover, :focus-visible)
+  [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)
     .content {
     opacity: 0;
     transform: scale(0.65);
@@ -509,7 +549,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
   }
 }
 
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
   opacity: 0;
 }
 
@@ -622,17 +662,26 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
 }
 
 [data-component~="ui-icon-button"][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);
 }
 
 [data-component~="ui-icon-button"][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)
@@ -645,18 +694,26 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
     --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)));
 }
 
 [data-component~="ui-icon-button"][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))
+    var(--_icon-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border)))
   );
 }
 
 [data-component~="ui-icon-button"][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))
+  );
+}
+
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-ui-icon-button-state~="tone=accent"]:hover:enabled:not([aria-disabled="true"]),
+[data-component~="ui-icon-button"][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)));
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=ghost"][aria-expanded="true"]:enabled:not([aria-disabled="true"]) {
@@ -664,7 +721,17 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
     --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. */
+[data-component~="ui-icon-button"][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);
 }
 
@@ -698,6 +765,22 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
   box-shadow: var(--ui-focus-halo);
 }
 
+[data-component~="ui-icon-button"][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) {
+  [data-component~="ui-icon-button"][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));
+  }
+  [data-component~="ui-icon-button"][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. */
 [data-component~="ui-icon-button"]:disabled {
   border-color: var(--ui-disabled-border);

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;