@threadlabs/looma 0.21.5 → 0.21.6

package/package.json

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

package/styles/ui-avatar-group.css

@@ -58,6 +58,15 @@
       block-size: 1.75rem;
     }
 
+    :scope[data-ui-avatar-group-state~="size=xs"] .overflow {
+      margin-inline-start: -0.1875rem;
+      inline-size: 1.25rem;
+      block-size: 1.25rem;
+      /* Matches the xs Avatar's initials. */
+      font-size: calc(var(--ui-font-size) * 0.5625);
+      line-height: 1;
+    }
+
     .overflow[hidden] {
       display: none;
     }

package/styles/ui-button.css

@@ -152,7 +152,7 @@
 
     :scope[data-ui-button-state~="size=xs"] {
       min-block-size: 1.5rem;
-      padding: var(--ui-space-0-5) calc(var(--ui-space-1) * 1.5);
+      padding: calc(var(--ui-space-0-5) * 1.5) calc(var(--ui-space-1) * 1.25);
       font-size: var(--ui-font-size-xs);
     }
 
@@ -307,7 +307,7 @@
 
     /* The size states outrank :host, so sm is named too, or a small button would stay small. */
     @media (pointer: coarse) {
-      :scope, :scope[data-ui-button-state~="size=sm"], :scope[data-ui-button-state~="size=xs"] {
+      :scope, :scope[data-ui-button-state~="size=sm"] {
         min-block-size: var(--ui-control-min-block-size);
       }
     }
@@ -315,12 +315,15 @@
     /* Under touch, a link-style button's press lands within the control minimum: an invisible hit
        area, centred on it, like IconButton's. A boxed button grows to the minimum itself (below);
        a link-style one keeps its text size, so a standalone one ("See all" under a list) needs the
-       area. Only the link needs it: a hit area on every button would reach over its neighbours. */
-    html[data-ui-input-modality="touch"] :scope[data-ui-button-state~="variant=link"] {
+       area. xs sits inside a line of text the same way, so it keeps its size and gains the area too.
+       Only these need it: a hit area on every button would reach over its neighbours. */
+    html[data-ui-input-modality="touch"] :scope[data-ui-button-state~="variant=link"],
+    html[data-ui-input-modality="touch"] :scope[data-ui-button-state~="size=xs"] {
       position: relative;
     }
 
-    html[data-ui-input-modality="touch"] :scope[data-ui-button-state~="variant=link"]::after {
+    html[data-ui-input-modality="touch"] :scope[data-ui-button-state~="variant=link"]::after,
+    html[data-ui-input-modality="touch"] :scope[data-ui-button-state~="size=xs"]::after {
       position: absolute;
       inset: 50% auto auto 50%;
       inline-size: max(100%, var(--ui-control-min-block-size));
@@ -412,7 +415,8 @@
     /* Under touch, a link-style button's press lands within the control minimum: an invisible hit
        area, centred on it, like IconButton's. A boxed button grows to the minimum itself (below);
        a link-style one keeps its text size, so a standalone one ("See all" under a list) needs the
-       area. Only the link needs it: a hit area on every button would reach over its neighbours. */
+       area. xs sits inside a line of text the same way, so it keeps its size and gains the area too.
+       Only these need it: a hit area on every button would reach over its neighbours. */
 
     /* Link: an inline text action. No box, padding, or minimum height (inline targets are exempt under
        WCAG 2.5.8); the inherited font; an underline that strengthens on hover; a visible focus ring. */

package/vanilla/UiAvatarGroup.d.ts

@@ -9,7 +9,7 @@ export interface UiAvatarGroupProps {
   label?: string | null;
   max?: number | null;
   overflowLabel?: string | null;
-  size?: "sm" | "md" | null;
+  size?: "xs" | "sm" | "md" | null;
   total?: number | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];

package/vanilla/UiAvatarGroup.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-avatar-group/ui-avatar-group.js";
 import "../styles/ui-avatar-group.css";
 
-const definition = {...{"contract":{"tag":"ui-avatar-group","props":{"label":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":"People"},"max":{"type":"number","required":false,"target":{"attribute":"max"},"default":5},"overflowLabel":{"type":"string","required":false,"target":{"attribute":"overflowlabel"},"default":"{count} more"},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["sm","md"],"required":false,"target":{"attribute":"size"},"default":"md"},"total":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"total"}}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"group"},{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[{"kind":"slot"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"overflow"},{"kind":"literal","name":"role","value":"img"},{"kind":"attribute","name":"hidden","expression":"not overflowCount","expressionPlan":{"source":"not overflowCount","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"overflowCount"}},"dependencies":["overflowCount"]}},{"kind":"attribute","name":"aria-label","expression":"overflowAnnouncement","expressionPlan":{"source":"overflowAnnouncement","ast":{"kind":"id","name":"overflowAnnouncement"},"dependencies":["overflowAnnouncement"]}}],"children":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"format('+%s', overflowCount)","expressionPlan":{"source":"format('+%s', overflowCount)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"+%s"},{"kind":"id","name":"overflowCount"}]},"dependencies":["overflowCount"]}}],"children":[]}],"ref":"overflow"}]},"declarations":[{"kind":"state","name":"overflowCount","expression":{"source":"0","ast":{"kind":"literal","value":0},"dependencies":[]}},{"kind":"state","name":"overflowAnnouncement","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-avatar-group","props":{"label":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":"People"},"max":{"type":"number","required":false,"target":{"attribute":"max"},"default":5},"overflowLabel":{"type":"string","required":false,"target":{"attribute":"overflowlabel"},"default":"{count} more"},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["xs","sm","md"],"required":false,"target":{"attribute":"size"},"default":"md"},"total":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"total"}}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"group"},{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[{"kind":"slot"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"overflow"},{"kind":"literal","name":"role","value":"img"},{"kind":"attribute","name":"hidden","expression":"not overflowCount","expressionPlan":{"source":"not overflowCount","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"overflowCount"}},"dependencies":["overflowCount"]}},{"kind":"attribute","name":"aria-label","expression":"overflowAnnouncement","expressionPlan":{"source":"overflowAnnouncement","ast":{"kind":"id","name":"overflowAnnouncement"},"dependencies":["overflowAnnouncement"]}}],"children":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"format('+%s', overflowCount)","expressionPlan":{"source":"format('+%s', overflowCount)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"+%s"},{"kind":"id","name":"overflowCount"}]},"dependencies":["overflowCount"]}}],"children":[]}],"ref":"overflow"}]},"declarations":[{"kind":"state","name":"overflowCount","expression":{"source":"0","ast":{"kind":"literal","value":0},"dependencies":[]}},{"kind":"state","name":"overflowAnnouncement","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiAvatarGroup(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vue/UiAvatarGroup.d.ts

@@ -17,7 +17,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
     size: {
-        type: PropType<"sm" | "md" | null>;
+        type: PropType<"xs" | "sm" | "md" | null>;
         default: string;
     };
     total: {
@@ -38,7 +38,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
     size: {
-        type: PropType<"sm" | "md" | null>;
+        type: PropType<"xs" | "sm" | "md" | null>;
         default: string;
     };
     total: {
@@ -47,7 +47,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>> & Readonly<{}>, {
     label: string | null;
-    size: "sm" | "md" | null;
+    size: "xs" | "sm" | "md" | null;
     max: number | null;
     overflowLabel: string | null;
     total: number | null;

package/vue/UiAvatarGroup.vue

@@ -11,7 +11,7 @@ const props = defineProps({
   label: { type: null as unknown as PropType<string | null>, default: 'People' },
   max: { type: null as unknown as PropType<number | null>, default: 5 },
   overflowLabel: { type: null as unknown as PropType<string | null>, default: '{count} more' },
-  size: { type: null as unknown as PropType<'sm' | 'md' | null>, default: 'md' },
+  size: { type: null as unknown as PropType<'xs' | 'sm' | 'md' | null>, default: 'md' },
   total: { type: null as unknown as PropType<number | null>, default: null },
 })
 const checkedProps = computed(() => ({
@@ -39,14 +39,14 @@ const checkedProps = computed(() => ({
     undefined,
     undefined,
   ) as string,
-  size: checkedProp<'sm' | 'md'>(
+  size: checkedProp<'xs' | 'sm' | 'md'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'size',
     undefined,
-    ['sm', 'md'],
-  ) as 'sm' | 'md',
+    ['xs', 'sm', 'md'],
+  ) as 'xs' | 'sm' | 'md',
   total: checkedProp<number>(
     props['total'],
     { kind: 'terminal', name: 'integer' },
@@ -230,6 +230,15 @@ useComponentHost(() => import('../components/ui-avatar-group/ui-avatar-group.js'
   block-size: 1.75rem;
 }
 
+[data-component~="ui-avatar-group"][data-ui-avatar-group-state~="size=xs"] .overflow {
+  margin-inline-start: -0.1875rem;
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+  /* Matches the xs Avatar's initials. */
+  font-size: calc(var(--ui-font-size) * 0.5625);
+  line-height: 1;
+}
+
 .overflow[hidden] {
   display: none;
 }

package/vue/UiButton.vue

@@ -499,7 +499,7 @@ function attribute(value: unknown): any {
 
 [data-component~="ui-button"][data-ui-button-state~="size=xs"] {
   min-block-size: 1.5rem;
-  padding: var(--ui-space-0-5) calc(var(--ui-space-1) * 1.5);
+  padding: calc(var(--ui-space-0-5) * 1.5) calc(var(--ui-space-1) * 1.25);
   font-size: var(--ui-font-size-xs);
 }
 
@@ -661,9 +661,7 @@ function attribute(value: unknown): any {
 
 /* The size states outrank :host, so sm is named too, or a small button would stay small. */
 @media (pointer: coarse) {
-  [data-component~="ui-button"],
-  [data-component~="ui-button"][data-ui-button-state~="size=sm"],
-  [data-component~="ui-button"][data-ui-button-state~="size=xs"] {
+  [data-component~="ui-button"], [data-component~="ui-button"][data-ui-button-state~="size=sm"] {
     min-block-size: var(--ui-control-min-block-size);
   }
 }
@@ -671,14 +669,19 @@ function attribute(value: unknown): any {
 /* Under touch, a link-style button's press lands within the control minimum: an invisible hit
    area, centred on it, like IconButton's. A boxed button grows to the minimum itself (below);
    a link-style one keeps its text size, so a standalone one ("See all" under a list) needs the
-   area. Only the link needs it: a hit area on every button would reach over its neighbours. */
+   area. xs sits inside a line of text the same way, so it keeps its size and gains the area too.
+   Only these need it: a hit area on every button would reach over its neighbours. */
+html[data-ui-input-modality="touch"]
+  [data-component~="ui-button"][data-ui-button-state~="variant=link"],
 html[data-ui-input-modality="touch"]
-  [data-component~="ui-button"][data-ui-button-state~="variant=link"] {
+  [data-component~="ui-button"][data-ui-button-state~="size=xs"] {
   position: relative;
 }
 
 html[data-ui-input-modality="touch"]
-  [data-component~="ui-button"][data-ui-button-state~="variant=link"]::after {
+  [data-component~="ui-button"][data-ui-button-state~="variant=link"]::after,
+html[data-ui-input-modality="touch"]
+  [data-component~="ui-button"][data-ui-button-state~="size=xs"]::after {
   position: absolute;
   inset: 50% auto auto 50%;
   inline-size: max(100%, var(--ui-control-min-block-size));

package/vue/chunks/UiAvatarGroup.js

@@ -58,7 +58,11 @@ var UiAvatarGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			size: checkedProp(props["size"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "size", void 0, ["sm", "md"]),
+			}, false, "size", void 0, [
+				"xs",
+				"sm",
+				"md"
+			]),
 			total: checkedProp(props["total"], {
 				kind: "terminal",
 				name: "integer"
@@ -133,6 +137,6 @@ var UiAvatarGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			}, toDisplayString(`+${overflowCount.value}`), 9, _hoisted_2)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-04c833c9"]]);
+}), [["__scopeId", "data-v-94b7399c"]]);
 //#endregion
 export { UiAvatarGroup_default as t };

package/vue/chunks/UiButton.js

@@ -340,6 +340,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}), [checkedProps.value.loading || checkedProps.value.pending ? (openBlock(), createElementBlock("span", _hoisted_4, [createVNode(UiSpinner_default, { size: "sm" })])) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_3));
 		};
 	}
-}), [["__scopeId", "data-v-7a112b47"]]);
+}), [["__scopeId", "data-v-ffb3d8ad"]]);
 //#endregion
 export { UiButton_default as t };

package/vue/components.css

@@ -228,7 +228,7 @@ svg[data-v-3b79b619] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-avatar-group"][data-v-04c833c9] {
+[data-component~="ui-avatar-group"][data-v-94b7399c] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-avatar-group-overlap-shadow: var(--ui-avatar-group-overlap-shadow);
   --_ui-avatar-group-edge-ring: var(--ui-avatar-group-edge-ring);
@@ -245,17 +245,17 @@ svg[data-v-3b79b619] {
 
 /* Overlap and the separating shadow are applied by the controller: slotted avatars are nested
  * component roots outside this style scope. */
-[data-v-04c833c9-s] {
+[data-v-94b7399c-s] {
   margin-inline-start: -0.5rem;
   flex-shrink: 0;
 }
-[data-v-04c833c9-s]:first-child {
+[data-v-94b7399c-s]:first-child {
   margin-inline-start: 0;
 }
-[data-component~="ui-avatar-group"][data-v-04c833c9]:dir(rtl) {
+[data-component~="ui-avatar-group"][data-v-94b7399c]:dir(rtl) {
   --_overlap-shadow: 1px 0 0 0 rgb(0 0 0 / 0.22);
 }
-.overflow[data-v-04c833c9] {
+.overflow[data-v-94b7399c] {
   margin-inline-start: -0.5rem;
   display: inline-flex;
   align-items: center;
@@ -274,17 +274,25 @@ svg[data-v-3b79b619] {
   font-weight: 600;
   flex-shrink: 0;
 }
-[data-component~="ui-avatar-group"][data-ui-avatar-group-state~="size=sm"] .overflow[data-v-04c833c9] {
+[data-component~="ui-avatar-group"][data-ui-avatar-group-state~="size=sm"] .overflow[data-v-94b7399c] {
   margin-inline-start: -0.25rem;
   inline-size: 1.75rem;
   block-size: 1.75rem;
 }
-.overflow[hidden][data-v-04c833c9] {
+[data-component~="ui-avatar-group"][data-ui-avatar-group-state~="size=xs"] .overflow[data-v-94b7399c] {
+  margin-inline-start: -0.1875rem;
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+  /* Matches the xs Avatar's initials. */
+  font-size: calc(var(--ui-font-size) * 0.5625);
+  line-height: 1;
+}
+.overflow[hidden][data-v-94b7399c] {
   display: none;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-avatar-group"][hidden][data-v-04c833c9] {
+[data-component~="ui-avatar-group"][hidden][data-v-94b7399c] {
   display: none;
 }
 
@@ -739,7 +747,7 @@ svg[data-v-8de2921b],
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-button"][data-v-7a112b47] {
+[data-component~="ui-button"][data-v-ffb3d8ad] {
   --_hue: var(--ui-accent);
   --_hue-hover: var(--ui-accent-hover);
   --_hue-active: var(--ui-accent-active);
@@ -758,15 +766,15 @@ svg[data-v-8de2921b],
   vertical-align: middle;
   color: var(--_tone-text);
 }
-[data-component~="ui-button"][data-ui-button-state~="align=start"][data-v-7a112b47] {
+[data-component~="ui-button"][data-ui-button-state~="align=start"][data-v-ffb3d8ad] {
   justify-content: flex-start;
   text-align: start;
 }
-[data-component~="ui-button"][data-ui-button-state~="stretch"][data-v-7a112b47] {
+[data-component~="ui-button"][data-ui-button-state~="stretch"][data-v-ffb3d8ad] {
   display: flex;
   inline-size: 100%;
 }
-[data-component~="ui-button"][data-v-7a112b47] {
+[data-component~="ui-button"][data-v-ffb3d8ad] {
   appearance: none;
   min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
   border-style: solid;
@@ -794,35 +802,35 @@ svg[data-v-8de2921b],
 }
 
 /* An anchor keeps the boxed button look even when an app styles ordinary links. */
-[data-component~="ui-button"][data-v-7a112b47]:is(a) {
+[data-component~="ui-button"][data-v-ffb3d8ad]:is(a) {
   text-decoration: none;
 }
-.spinner-wrap[data-v-7a112b47] {
+.spinner-wrap[data-v-ffb3d8ad] {
   display: inline-flex;
   flex: none;
   margin-inline-end: var(--ui-space-2);
   vertical-align: middle;
 }
 @supports (text-box-trim: trim-both) {
-[data-component~="ui-button"][data-v-7a112b47] {
+[data-component~="ui-button"][data-v-ffb3d8ad] {
     text-box-trim: trim-both;
     text-box-edge: cap alphabetic;
 }
 }
-[data-component~="ui-button"][data-ui-button-state~="size=xs"][data-v-7a112b47] {
+[data-component~="ui-button"][data-ui-button-state~="size=xs"][data-v-ffb3d8ad] {
   min-block-size: 1.5rem;
-  padding: var(--ui-space-0-5) calc(var(--ui-space-1) * 1.5);
+  padding: calc(var(--ui-space-0-5) * 1.5) calc(var(--ui-space-1) * 1.25);
   font-size: var(--ui-font-size-xs);
 }
-[data-component~="ui-button"][data-ui-button-state~="shape=pill"][data-v-7a112b47] {
+[data-component~="ui-button"][data-ui-button-state~="shape=pill"][data-v-ffb3d8ad] {
   border-radius: var(--ui-button-radius, var(--ui-radius-round));
 }
-[data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-7a112b47] {
+[data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-ffb3d8ad] {
   min-block-size: var(--ui-control-size-sm);
   padding: var(--ui-space-1) var(--ui-space-2);
   font-size: var(--ui-font-size-sm);
 }
-[data-component~="ui-button"][data-ui-button-state~="size=lg"][data-v-7a112b47] {
+[data-component~="ui-button"][data-ui-button-state~="size=lg"][data-v-ffb3d8ad] {
   min-block-size: var(--ui-control-size-lg);
   padding: var(--ui-space-3) var(--ui-space-4);
   font-size: var(--ui-font-size-md);
@@ -830,29 +838,29 @@ svg[data-v-8de2921b],
 
 /* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that
    is exactly :enabled, at the same specificity, and it also matches a link that can be followed. */
-[data-component~="ui-button"][data-v-7a112b47]:hover:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-v-ffb3d8ad]:hover:not(:disabled, [aria-disabled="true"]) {
   border-color: var(--ui-button-hover-border, var(--_tone-hover));
   background-color: var(--ui-button-hover-surface, oklch(from var(--_tone) l c h / 12%));
 }
 
 /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
-[data-component~="ui-button"][data-v-7a112b47]:active:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-v-ffb3d8ad]:active:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--ui-button-active-surface, oklch(from var(--_tone) l c h / 18%));
   background-image: none;
   box-shadow: var(--ui-pressed);
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-7a112b47],
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-7a112b47] {
+[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-ffb3d8ad],
+[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-ffb3d8ad] {
   border-color: var(--_tone);
   background-color: var(--_tone);
   color: var(--_on-tone);
   box-shadow: var(--ui-button-solid-shadow, var(--ui-raised));
 }
-:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-7a112b47], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-7a112b47]):hover:not(:disabled, [aria-disabled="true"]) {
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-ffb3d8ad], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-ffb3d8ad]):hover:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--_tone-hover);
   border-color: var(--_tone-hover);
 }
-:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-7a112b47], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-7a112b47]):active:not(:disabled, [aria-disabled="true"]) {
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-ffb3d8ad], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-ffb3d8ad]):active:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--_tone-active);
   border-color: var(--_tone-active);
   background-image: none;
@@ -861,43 +869,43 @@ svg[data-v-8de2921b],
 
 /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
    destructive secondary action, not a special case. */
-[data-component~="ui-button"][data-ui-button-state~="tone=neutral"][data-v-7a112b47] {
+[data-component~="ui-button"][data-ui-button-state~="tone=neutral"][data-v-ffb3d8ad] {
   --_hue: var(--ui-text);
   --_hue-hover: var(--ui-text);
   --_hue-active: var(--ui-text);
   --_hue-text: var(--ui-text);
   --_on-hue: var(--ui-surface);
 }
-[data-component~="ui-button"][data-ui-button-state~="tone=danger"][data-v-7a112b47],
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-7a112b47] {
+[data-component~="ui-button"][data-ui-button-state~="tone=danger"][data-v-ffb3d8ad],
+[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-ffb3d8ad] {
   --_hue: var(--ui-danger);
   --_hue-hover: var(--ui-danger-hover);
   --_hue-active: var(--ui-danger-hover);
   --_hue-text: var(--ui-danger-hover);
   --_on-hue: var(--ui-on-danger);
 }
-[data-component~="ui-button"][data-ui-button-state~="tone=success"][data-v-7a112b47] {
+[data-component~="ui-button"][data-ui-button-state~="tone=success"][data-v-ffb3d8ad] {
   --_hue: var(--ui-success);
   --_hue-hover: color-mix(in srgb, var(--ui-success) 85%, #000);
   --_hue-active: color-mix(in srgb, var(--ui-success) 75%, #000);
   --_hue-text: color-mix(in srgb, var(--ui-success) 85%, #000);
   --_on-hue: var(--ui-surface);
 }
-[data-component~="ui-button"][data-ui-button-state~="tone=warning"][data-v-7a112b47] {
+[data-component~="ui-button"][data-ui-button-state~="tone=warning"][data-v-ffb3d8ad] {
   --_hue: var(--ui-warning);
   --_hue-hover: color-mix(in srgb, var(--ui-warning) 85%, #000);
   --_hue-active: color-mix(in srgb, var(--ui-warning) 75%, #000);
   --_hue-text: color-mix(in srgb, var(--ui-warning) 85%, #000);
   --_on-hue: var(--ui-surface);
 }
-[data-component~="ui-button"][data-ui-button-state~="tone=info"][data-v-7a112b47] {
+[data-component~="ui-button"][data-ui-button-state~="tone=info"][data-v-ffb3d8ad] {
   --_hue: var(--ui-info);
   --_hue-hover: color-mix(in srgb, var(--ui-info) 85%, #000);
   --_hue-active: color-mix(in srgb, var(--ui-info) 75%, #000);
   --_hue-text: color-mix(in srgb, var(--ui-info) 85%, #000);
   --_on-hue: var(--ui-surface);
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-7a112b47] {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-ffb3d8ad] {
   border-color: transparent;
   background: transparent;
   box-shadow: none;
@@ -905,14 +913,14 @@ svg[data-v-8de2921b],
 }
 
 /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-7a112b47]:hover:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-ffb3d8ad]:hover:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--ui-button-ghost-hover-surface, oklch(from var(--_tone) l c h / 10%));
   border-color: transparent;
 }
 
 /* Pressed, or holding its menu open, a ghost button sinks slightly: a light surface with a faint
    edge and a soft inner shadow. Lighter than hover, so an open menu's trigger never reads as heavy. */
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-7a112b47]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-ffb3d8ad]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
   background-color: var(
     --ui-button-ghost-active-surface,
     color-mix(in oklch, var(--ui-surface), var(--_tone) 3%)
@@ -924,13 +932,13 @@ svg[data-v-8de2921b],
 }
 
 /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
-[data-component~="ui-button"][data-v-7a112b47]:focus-visible {
+[data-component~="ui-button"][data-v-ffb3d8ad]:focus-visible {
   outline: none;
   box-shadow:
     var(--ui-button-shadow, var(--ui-raised)),
     var(--ui-focus-halo);
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-7a112b47]:focus-visible {
+[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-ffb3d8ad]:focus-visible {
   box-shadow:
     var(--ui-button-solid-shadow, var(--ui-raised)),
     var(--ui-focus-halo);
@@ -938,7 +946,7 @@ svg[data-v-8de2921b],
 
 /* A loading action stays visually active; only an explicitly disabled action takes the
    neutral disabled palette. Its flat surface and muted ink make the state unambiguous. */
-[data-component~="ui-button"][data-v-7a112b47]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+[data-component~="ui-button"][data-v-ffb3d8ad]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
   border-color: var(--ui-disabled-border);
   background-color: var(--ui-disabled-surface);
   color: var(--ui-disabled-text);
@@ -948,21 +956,19 @@ svg[data-v-8de2921b],
   background-image: none;
   box-shadow: none;
 }
-:is([data-component~="ui-button"][data-ui-button-state~="loading"][data-v-7a112b47], [data-component~="ui-button"][data-ui-button-state~="pending"][data-v-7a112b47]):focus-visible {
+:is([data-component~="ui-button"][data-ui-button-state~="loading"][data-v-ffb3d8ad], [data-component~="ui-button"][data-ui-button-state~="pending"][data-v-ffb3d8ad]):focus-visible {
   box-shadow: var(--ui-focus-halo);
 }
 
 /* Ghost keeps no border, but gains the same neutral surface as other disabled buttons. */
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-7a112b47]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-ffb3d8ad]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
   background-color: var(--ui-disabled-surface);
   border-color: transparent;
 }
 
 /* The size states outrank :host, so sm is named too, or a small button would stay small. */
 @media (pointer: coarse) {
-[data-component~="ui-button"][data-v-7a112b47],
-  [data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-7a112b47],
-  [data-component~="ui-button"][data-ui-button-state~="size=xs"][data-v-7a112b47] {
+[data-component~="ui-button"][data-v-ffb3d8ad], [data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-ffb3d8ad] {
     min-block-size: var(--ui-control-min-block-size);
 }
 }
@@ -970,13 +976,18 @@ svg[data-v-8de2921b],
 /* Under touch, a link-style button's press lands within the control minimum: an invisible hit
    area, centred on it, like IconButton's. A boxed button grows to the minimum itself (below);
    a link-style one keeps its text size, so a standalone one ("See all" under a list) needs the
-   area. Only the link needs it: a hit area on every button would reach over its neighbours. */
+   area. xs sits inside a line of text the same way, so it keeps its size and gains the area too.
+   Only these need it: a hit area on every button would reach over its neighbours. */
+html[data-ui-input-modality="touch"]
+  [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-ffb3d8ad],
 html[data-ui-input-modality="touch"]
-  [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-7a112b47] {
+  [data-component~="ui-button"][data-ui-button-state~="size=xs"][data-v-ffb3d8ad] {
   position: relative;
 }
 html[data-ui-input-modality="touch"]
-  [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-7a112b47]::after {
+  [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-ffb3d8ad]::after,
+html[data-ui-input-modality="touch"]
+  [data-component~="ui-button"][data-ui-button-state~="size=xs"][data-v-ffb3d8ad]::after {
   position: absolute;
   inset: 50% auto auto 50%;
   inline-size: max(100%, var(--ui-control-min-block-size));
@@ -987,7 +998,7 @@ html[data-ui-input-modality="touch"]
 
 /* Link: an inline text action. No box, padding, or minimum height (inline targets are exempt under
    WCAG 2.5.8); the inherited font; an underline that strengthens on hover; a visible focus ring. */
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-7a112b47] {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-ffb3d8ad] {
   display: inline;
   min-block-size: 0;
   padding: 0;
@@ -1005,21 +1016,21 @@ html[data-ui-input-modality="touch"]
     color var(--ui-motion-fast) var(--ui-motion-ease),
     text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-7a112b47]:hover:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-ffb3d8ad]:hover:not(:disabled, [aria-disabled="true"]) {
   color: var(--ui-button-link-hover-text, var(--ui-text-primary));
   text-decoration-color: currentColor;
   background: none;
   transform: none;
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-7a112b47]:active:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-ffb3d8ad]:active:not(:disabled, [aria-disabled="true"]) {
   background: none;
   transform: none;
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-7a112b47]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-ffb3d8ad]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
   background: none;
   border-color: transparent;
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-7a112b47]:focus-visible {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-ffb3d8ad]:focus-visible {
   box-shadow: none;
   /* Fallback keeps the ring if the token is missing: an unresolved var() would void the outline. */
   outline: 2px solid var(--ui-focus-ring);
@@ -1027,7 +1038,7 @@ html[data-ui-input-modality="touch"]
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-button"][hidden][data-v-7a112b47] {
+[data-component~="ui-button"][hidden][data-v-ffb3d8ad] {
   display: none;
 }