@threadlabs/looma 0.26.1 → 0.26.3

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

@@ -16,7 +16,8 @@
     <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 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="shape" type="keyword" values="circle, square" default="circle"
+    >Circle by default, with a shallow shadow; 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"
     >Marks the person as active now, such as editing the same page: a fine accent ring around the avatar. The ring is not announced, so say what it means in alt
@@ -96,6 +97,10 @@
       border-color: var(--ui-avatar-border, var(--ui-border-strong));
     }
 
+    :host([shape="circle"]) {
+      box-shadow: var(--ui-shadow-sm);
+    }
+
     :host([shape="square"]) {
       border-radius: var(--ui-avatar-radius, var(--ui-radius-md));
     }

package/components/ui-badge/ui-badge.html

@@ -1,18 +1,21 @@
 <template component="ui-badge">
   <defs>
-    <prop name="variant" type="keyword" values="solid, subtle, outline" default="subtle"
+    <prop name="variant" type="keyword" values="solid, subtle, outline, inverse" default="subtle"
     >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.
-      Neutral looks the same in solid and subtle. When space is constrained, the label truncates with an ellipsis while its full text remains available.</prop>
+      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
+      subtle. When space is constrained, the label truncates with an ellipsis while its full text remains available.</prop>
     <prop name="tone" type="keyword" values="neutral, accent, info, success, warning, danger" default="neutral"
     >Which colour the badge speaks in. neutral is a quiet grey for plain labels; accent draws the eye in the accent colour; info, success, warning, and danger
       mark a status, so match the tone to what the badge says. For a category rather than a status, set the --ui-badge-color hook on the badge instead: any CSS
       colour, which overrides the tone.</prop>
-    <prop name="shape" type="keyword" values="pill, tag, dot, square" default="pill"
+    <prop name="shape" type="keyword" values="pill, tag, dot, square, circle" default="pill"
     >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
       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
-      decorative icon when adjacent words name it.</prop>
-    <prop name="size" type="keyword" values="xs, md" default="md"
-    >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.</prop>
+      decorative icon when adjacent words name it. circle frames a visible glyph, icon or short bounded count in a fixed circle, centered in both
+      directions.</prop>
+    <prop name="size" type="keyword" values="xs, md, lg" default="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
+      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+.</prop>
   </defs>
   <span>
     <span class="icon" aria-hidden="true"><slot name="icon"></slot></span>
@@ -28,6 +31,10 @@
       syntax: "*";
       inherits: false;
     }
+    @property --ui-badge-circle-size {
+      syntax: "*";
+      inherits: false;
+    }
     @property --ui-badge-dot-size {
       syntax: "*";
       inherits: false;
@@ -152,25 +159,26 @@
       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) {
       :host {
         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;
       }
       :host:has(.icon:not(:empty)),
       :host:has(.label svg) {
         display: inline-flex;
         text-box-trim: none;
       }
-      :host: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;
       }
     }
 
@@ -251,6 +259,29 @@
       --_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. */
+    :host([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;
+    }
+
+    :host([variant="inverse"][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. */
+    :host([variant="inverse"][tone="neutral"]) {
+      color: var(--ui-badge-text, var(--_badge-color-text, var(--_badge-surface)));
+    }
+
     :host([variant="outline"]) {
       --_badge-surface: var(--ui-surface-default);
       --_badge-border: var(--ui-border-strong);
@@ -304,6 +335,10 @@
       --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-3) * 2));
     }
 
+    :host([shape="square"][size="lg"]) {
+      --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-4) * 2 + var(--ui-space-2)));
+    }
+
     :host([shape="square"]) .label {
       display: inline-flex;
       align-items: center;
@@ -318,6 +353,56 @@
       display: none;
     }
 
+    /* A visible glyph needs fixed geometry, unlike a content-sized pill or a hidden-label dot. */
+    :host([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;
+    }
+
+    :host([shape="circle"][size="xs"]) {
+      --_badge-circle-size: var(--ui-badge-circle-size, var(--ui-space-4));
+    }
+
+    :host([shape="circle"][size="lg"]) {
+      --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-4) * 2));
+    }
+
+    :host([shape="circle"]) .label {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
+      text-box-trim: none;
+    }
+
+    :host([shape="circle"]) .label :slotted(svg) {
+      margin-inline-end: 0;
+    }
+
+    :host([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) {
+      :host([shape="circle"]) .label:not(:has(svg)),
+      :host([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. */
     :host([shape="dot"]) {
       position: relative;
@@ -365,6 +450,10 @@
       pointer-events: none;
     }
 
+    :host([shape="tag"][variant="inverse"]) {
+      background: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-text)));
+    }
+
     :host([shape="tag"]):dir(rtl) {
       padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2));
       padding-inline-start: calc(var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point));

package/components/ui-container/ui-container.html

@@ -1,5 +1,8 @@
 <template component="ui-container">
   <defs>
+    <prop name="fill" type="boolean" default="false"
+    >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.
+      Omit it to keep the usual block layout.</prop>
     <prop name="measure" type="keyword" values="narrow, wide"
     >The container's maximum width, in characters of the current font: narrow is 45ch, wide is 80ch, and unset is 65ch, a comfortable reading line. The
       container centres itself when its parent is wider. The --ui-container-measure custom property, set on the container itself, overrides it; set on an
@@ -32,6 +35,14 @@
     :host([measure="narrow"]) {
       --_container-measure: 45ch;
     }
+    :host([fill]) {
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      min-inline-size: 0;
+      min-block-size: 0;
+    }
     :host([measure="wide"]) {
       --_container-measure: 80ch;
     }

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

@@ -17,6 +17,9 @@
     <prop name="variant" type="keyword" values="ghost, outline, solid" default="ghost"
     >Emphasis. ghost shows only the icon until it is hovered, for toolbars and dense rows; outline adds a border on the default surface; solid fills with the
       accent colour, for the one primary action in a group.</prop>
+    <prop name="tone" type="keyword" values="accent, neutral"
+    >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
+      or neutral for a quiet one. Native aria-pressed="true" keeps an outline toggle visibly pressed; the consumer owns that state.</prop>
     <prop name="anticipatory" type="boolean" default="false"
     >Keeps the button out of sight until it is wanted: at rest a fine pointer sees only a small guide dot, and the button appears on hover, on focus, or when
       the pointer comes near inside a ui-affordance-scope. Touch devices and the solid variant always show it.</prop>
@@ -121,6 +124,21 @@
       color: var(--ui-text-secondary);
     }
 
+    :host([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. */
+    :host([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);
+    }
+
     :host([anticipatory]) {
       position: relative;
     }
@@ -153,13 +171,13 @@
     }
 
     @media (hover: hover) and (pointer: fine) {
-      :host([anticipatory]):not(:host([variant="solid"]), :host([loading]), :host([pending]), :disabled, [data-ui-proximity="near"], :hover, :focus-visible) {
+      :host([anticipatory]):not(:host([variant="solid"]), :host([loading]), :host([pending]), :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible) {
         border-color: transparent;
         background-color: transparent;
         box-shadow: none;
       }
 
-      :host([anticipatory]):not(:host([variant="solid"]), :host([loading]), :host([pending]), :disabled, [data-ui-proximity="near"], :hover, :focus-visible)
+      :host([anticipatory]):not(:host([variant="solid"]), :host([loading]), :host([pending]), :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)
         .content {
         opacity: 0;
         transform: scale(0.65);
@@ -167,7 +185,7 @@
       }
     }
 
-    :host([anticipatory]):is(:host([variant="solid"]), [data-ui-proximity="near"], :hover, :focus-visible)::before {
+    :host([anticipatory]):is(:host([variant="solid"]), [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
       opacity: 0;
     }
 
@@ -277,17 +295,17 @@
     }
 
     :host([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);
     }
 
     :host([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)
@@ -297,20 +315,32 @@
     :host:hover:enabled:not([aria-disabled="true"]) {
       /* Derived from the text colour so the ghost hover shows on any background. */
       background-color: var(--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)));
     }
 
     :host([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)));
+      border-color: var(--ui-icon-button-hover-border, var(--_icon-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border))));
     }
 
     :host([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)));
+    }
+
+    :host([variant="solid"][tone="accent"]):hover:enabled:not([aria-disabled="true"]),
+    :host([variant="solid"][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)));
     }
 
     :host([variant="ghost"])[aria-expanded="true"]:enabled:not([aria-disabled="true"]) {
       background-color: var(--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. */
+    :host([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);
     }
 
@@ -343,6 +373,22 @@
       box-shadow: var(--ui-focus-halo);
     }
 
+    :host([variant="outline"])[aria-pressed="true"]:enabled:focus-visible {
+      box-shadow:
+        var(--ui-pressed),
+        var(--ui-focus-halo);
+    }
+
+    @media (forced-colors: active) {
+      :host([variant="outline"])[aria-pressed="true"]:enabled {
+        outline: var(--ui-focus-width) solid Highlight;
+        outline-offset: calc(-2 * var(--ui-focus-width));
+      }
+      :host([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. */
     :host:disabled {
       border-color: var(--ui-disabled-border);

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

@@ -8,6 +8,9 @@
       combining them with a leading control.</prop>
     <prop name="wrap" type="boolean" default="false"
     >Lets the title and description wrap so explanatory text stays readable on narrow screens. Omit it for the default equal-height, one-line rows.</prop>
+    <prop name="align" type="keyword" values="center, title" default="center"
+    >Where the leading and trailing regions sit vertically. center aligns them with the whole row. title aligns them with the first title line, keeping an
+      identifying icon beside its name when the title or description wraps. Taller controls retain their natural height.</prop>
     <prop name="current" type="boolean" default="false"
     >Marks the item as the current one, such as the site you are in: it takes the selected surface and aria-current="true", which assistive technology
       announces. Set it on one item at a time.</prop>
@@ -158,6 +161,16 @@
       line-height: var(--ui-line-height-tight);
     }
 
+    /* Keep identity and disclosure marks beside the first line, even with a long description. */
+    :host([align="title"]) {
+      align-items: flex-start;
+    }
+
+    :host([align="title"]) .leading,
+    :host([align="title"]) .trailing {
+      min-block-size: calc(var(--ui-font-size-md) * var(--ui-line-height-tight));
+    }
+
     .description {
       color: var(--ui-text-muted);
       font-size: var(--ui-font-size-sm);