@threadlabs/looma 0.21.3 → 0.21.5

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

@@ -15,7 +15,7 @@
       circle clips anything wider.</prop>
     <prop name="size" type="keyword" values="xs, sm, md" default="md"
     >md is 2.5rem, for a person on their own (a profile, a comment); sm is 1.75rem with smaller initials, for a row of people in a toolbar or header; xs is
-      1.25rem with the smallest initials, for a person named inline in a line of small text.</prop>
+      1.25rem with small initials, for a person named inline in a line of small text.</prop>
     <prop name="shape" type="keyword" values="circle, square" default="circle">Circle by default; square uses the theme's medium radius.</prop>
     <prop name="decorative" type="boolean" default="false">Hides the avatar from assistive technology when adjacent text already identifies the person.</prop>
     <prop name="active" type="boolean" default="false"
@@ -71,6 +71,8 @@
       font: inherit;
       font-size: var(--ui-font-size-sm);
       font-weight: 600;
+      /* The initials centre in the circle wherever it sits, whatever line height surrounds it. */
+      line-height: 1;
       text-transform: uppercase;
     }
 
@@ -85,7 +87,9 @@
       --_ui-default-icon-size: 0.75rem;
       inline-size: 1.25rem;
       block-size: 1.25rem;
-      font-size: var(--ui-font-size-2xs);
+      /* Below the type scale on purpose: two initials need room inside a 1.25rem circle. */
+      font-size: calc(var(--ui-font-size) * 0.5625);
+      letter-spacing: 0.02em;
     }
 
     :host-state([hasImage]) {

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, xs
+      and sm grow to the touch minimum.</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: var(--ui-space-0-5) calc(var(--ui-space-1) * 1.5);
+      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. */
@@ -353,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, :host-state([size="sm"]), :host-state([size="xs"]) {
         min-block-size: 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;
       }