@threadlabs/looma 0.21.5 → 0.21.6

package/components/ui-avatar-group/ui-avatar-group.html

@@ -10,8 +10,9 @@
     >Accessible label for the overflow badge. Replace {count} with the number of people beyond the visible avatars.</prop>
     <prop name="label" type="string" default="People"
     >The group's accessible name, announced for the set of avatars as a whole. Name who they are rather than repeating the default.</prop>
-    <prop name="size" type="keyword" values="sm, md" default="md"
-    >The size of the avatars inside, matched by the +N badge and the overlap. Give each Avatar the same size.</prop>
+    <prop name="size" type="keyword" values="xs, sm, md" default="md"
+    >The size of the avatars inside, matched by the +N badge and the overlap. Give each Avatar the same size. xs suits a group inside a line of small text, such
+      as the people listed under a title.</prop>
     <state name="overflowCount" :value="0"></state>
     <state name="overflowAnnouncement" :value="''"></state>
   </defs>
@@ -88,6 +89,15 @@
       block-size: 1.75rem;
     }
 
+    :host-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/components/ui-avatar-group/ui-avatar-group.js

@@ -7,7 +7,7 @@ export default function controller(host) {
     const visible = Number.isFinite(max) ? Math.max(0, Math.floor(max)) : 0;
     const avatars = Array.from(element.children).filter((child) => child !== host.refs.overflow);
     // Small avatars overlap less, so their initials stay clear of the next one.
-    const overlap = host.state.size === "sm" ? "-0.25rem" : "-0.5rem";
+    const overlap = { xs: "-0.1875rem", sm: "-0.25rem" }[host.state.size] ?? "-0.5rem";
     avatars.forEach((avatar, index) => {
       avatar.style.display = index >= visible ? "none" : "";
       avatar.style.marginInlineStart = index === 0 ? "0px" : overlap;

package/components/ui-button/ui-button.html

@@ -6,8 +6,8 @@
       hovered, and link is an inline text action that reads as a link. danger is solid in the danger tone, kept for the call sites that name it.</prop>
     <prop name="size" type="keyword" values="xs, sm, md, lg" default="md"
     >Height, padding, and type size. xs is 1.5rem with the smallest text, for a control inside a line of small text; sm is the small control height (2rem by
-      default) with tighter padding and smaller text, md is the standard control height (2.5rem), and lg is taller (3rem) with roomier padding. Under touch, xs
-      and sm grow to the touch minimum.</prop>
+      default) with tighter padding and smaller text, md is the standard control height (2.5rem), and lg is taller (3rem) with roomier padding. Under touch, sm
+      grows to the touch minimum, while xs keeps its size inside its line and gains an invisible touch-sized hit area.</prop>
     <prop name="shape" type="keyword" values="rounded, pill" default="rounded"
     >rounded uses the theme's action radius; pill rounds the ends fully, for a compact choice such as a status or a person.</prop>
     <prop name="tone" type="keyword" values="accent, neutral, danger, success, warning, info" default="accent"
@@ -213,7 +213,7 @@
 
     :host-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);
     }
 
@@ -368,7 +368,7 @@
 
     /* The size states outrank :host, so sm is named too, or a small button would stay small. */
     @media (pointer: coarse) {
-      :host, :host-state([size="sm"]), :host-state([size="xs"]) {
+      :host, :host-state([size="sm"]) {
         min-block-size: var(--ui-control-min-block-size);
       }
     }
@@ -376,12 +376,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"] :host-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"] :host-state([variant="link"]),
+    html[data-ui-input-modality="touch"] :host-state([size="xs"]) {
       position: relative;
     }
 
-    html[data-ui-input-modality="touch"] :host-state([variant="link"])::after {
+    html[data-ui-input-modality="touch"] :host-state([variant="link"])::after,
+    html[data-ui-input-modality="touch"] :host-state([size="xs"])::after {
       position: absolute;
       inset: 50% auto auto 50%;
       inline-size: max(100%, var(--ui-control-min-block-size));