@threadlabs/looma 0.21.4 → 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

@@ -4,9 +4,12 @@
     <prop name="variant" type="keyword" values="outline, solid, danger, ghost, link" default="outline"
     >Emphasis: how loudly the button asks. solid fills with its tone, outline draws its tone at the edge over a wash of it, ghost carries only text until it is
       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="sm, md, lg" default="md"
-    >Height, padding, and type size. 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.</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, 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"
     >Which colour the button speaks in. It applies to every variant, so an outline, a ghost, and a solid in the same tone are the same action at three volumes:
       tone="danger" variant="outline" is a destructive secondary action. neutral is the quiet one, for a button that should not claim a colour.</prop>
@@ -208,6 +211,16 @@
       }
     }
 
+    :host-state([size="xs"]) {
+      min-block-size: 1.5rem;
+      padding: calc(var(--ui-space-0-5) * 1.5) calc(var(--ui-space-1) * 1.25);
+      font-size: var(--ui-font-size-xs);
+    }
+
+    :host-state([shape="pill"]) {
+      border-radius: var(--ui-button-radius, var(--ui-radius-round));
+    }
+
     :host-state([size="sm"]) {
       min-block-size: var(--ui-control-size-sm);
       padding: var(--ui-space-1) var(--ui-space-2);
@@ -308,10 +321,12 @@
       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. */
     :host-state([variant="ghost"]):is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
-      background-color: var(--ui-button-ghost-active-surface, oklch(from var(--_tone) l c h / 16%));
+      background-color: var(--ui-button-ghost-active-surface, color-mix(in oklch, var(--ui-surface), var(--_tone) 3%));
       border-color: transparent;
-      box-shadow: var(--ui-pressed);
+      box-shadow: inset 0 0 0 1px oklch(from var(--_tone) l c h / 10%), inset 0 1px 2px oklch(from var(--_tone) l c h / 8%);
     }
 
     /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
@@ -361,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));

package/components/ui-menu/ui-menu.html

@@ -2,6 +2,9 @@
   <defs>
     <prop name="density" type="keyword" values="comfortable, compact" default="comfortable"
     >Compact trades padding and type size for rows that fit more on screen.</prop>
+    <prop name="size" type="keyword" values="sm, md" default="md"
+    >sm sizes the menu to a small trigger, such as an xs or sm button: smallest text, short rows, a small check, and a narrower minimum width. md is the
+      standard size.</prop>
     <prop name="open" type="boolean" default="false">Whether the menu is open initially or when set externally.</prop>
     <prop name="inline" type="boolean" default="false">Displays the menu in the page flow without an overlay or trigger, for an embedded list of actions.</prop>
     <prop name="for" type="string" default="">ID of the control that toggles and anchors the menu.</prop>
@@ -61,6 +64,19 @@
       gap: 0;
     }
 
+    /* Small follows its trigger down: an item's own hooks still win. */
+    :host-state([size="sm"]) {
+      --_ui-default-menu-item-padding-block: var(--ui-space-0-5);
+      --_ui-default-menu-item-padding-inline: var(--ui-space-2);
+      --_ui-default-menu-item-font-size: var(--ui-font-size-xs);
+      --_ui-default-menu-item-radius: var(--ui-radius-sm);
+      --_ui-default-menu-item-min-block-size: 1.5rem;
+      --_ui-default-menu-indicator-size: 0.75rem;
+      min-inline-size: min(8rem, calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2));
+      padding: var(--ui-space-1);
+      gap: 0;
+    }
+
     :host {
       --_ui-menu-surface: var(--ui-menu-surface);
       --_ui-menu-border: var(--ui-menu-border);
@@ -71,6 +87,8 @@
       --_ui-default-menu-item-padding-inline: initial;
       --_ui-default-menu-item-font-size: initial;
       --_ui-default-menu-item-radius: initial;
+      --_ui-default-menu-item-min-block-size: initial;
+      --_ui-default-menu-indicator-size: initial;
       display: flex;
       flex-direction: column;
       box-sizing: border-box;

package/components/ui-menu-item/ui-menu-item.html

@@ -39,7 +39,7 @@
       from:data-value="value"
     >
       <span class="indicator" aria-hidden="true">
-        <ui-icon $if="type = 'checkbox' and internalChecked" name="check"></ui-icon>
+        <ui-icon $if="(type = 'checkbox' or type = 'radio') and internalChecked" name="check"></ui-icon>
       </span>
       <span class="label"><slot></slot></span>
       <span class="shortcut" aria-hidden="true"><slot name="shortcut"></slot></span>
@@ -105,8 +105,8 @@
       justify-content: center;
       flex: none;
       box-sizing: border-box;
-      inline-size: var(--ui-icon-size-sm);
-      block-size: var(--ui-icon-size-sm);
+      inline-size: var(--_ui-default-menu-indicator-size, var(--ui-icon-size-sm));
+      block-size: var(--_ui-default-menu-indicator-size, var(--ui-icon-size-sm));
       border: 1.5px solid var(--ui-control-border);
       border-radius: var(--ui-radius-sm);
       color: var(--ui-surface);
@@ -122,20 +122,11 @@
       background: var(--ui-accent);
     }
 
+    /* A menu marks its chosen item with a check, as menus conventionally do; a radio circle reads
+       as a form control. The empty slot keeps unchosen labels aligned with the chosen one. */
     :host-state([type="radio"]) .indicator {
-      border-radius: var(--ui-radius-round);
-    }
-
-    :host-state([type="radio"])[aria-checked="true"] .indicator {
-      border-color: var(--ui-accent);
-    }
-
-    :host-state([type="radio"])[aria-checked="true"] .indicator::after {
-      content: "";
-      inline-size: 0.375rem;
-      block-size: 0.375rem;
-      border-radius: var(--ui-radius-round);
-      background: var(--ui-accent);
+      border-color: transparent;
+      color: var(--ui-text-secondary);
     }
 
     .shortcut {
@@ -152,7 +143,7 @@
     /* Keep the text row at the shared control height where cap trimming is available. */
     @supports (text-box-trim: trim-both) {
       :host {
-        min-block-size: var(--ui-menu-item-min-block-size, var(--ui-control-size-md, 2.5rem));
+        min-block-size: var(--ui-menu-item-min-block-size, var(--_ui-default-menu-item-min-block-size, var(--ui-control-size-md, 2.5rem)));
         text-box-trim: trim-both;
         text-box-edge: cap alphabetic;
       }