@threadlabs/looma 0.26.2 → 0.26.4

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,8 +1,9 @@
 <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
@@ -10,10 +11,11 @@
     <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. circle frames a visible single glyph or icon in a fixed circle, centered in both directions.</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. A circle is
-      16px at xs and 24px at md.</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>
@@ -157,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;
       }
     }
 
@@ -256,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);
@@ -309,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;
@@ -341,6 +371,10 @@
       --_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;
@@ -357,6 +391,18 @@
       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;
@@ -404,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-callout/ui-callout.html

@@ -108,7 +108,8 @@
       padding-inline-end: var(--ui-callout-padding-inline, var(--ui-space-3));
       border: var(--ui-callout-border-width, var(--ui-border-width)) solid
         color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
-      border-inline-start: var(--ui-callout-leading-border-width, var(--ui-accent-line-width)) solid var(--ui-callout-border, var(--_callout-border));
+      border-inline-start: var(--ui-callout-leading-border-width, var(--ui-callout-border-width, var(--ui-border-width))) solid
+        color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
       border-radius: var(--ui-radius-md);
       background: var(--ui-callout-surface, var(--_callout-surface));
       color: var(--ui-callout-text, var(--ui-text-primary));

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);

package/components/ui-toast/ui-toast.html

@@ -44,6 +44,7 @@
 
     :host {
       --_ui-toast-accent: var(--ui-border-strong);
+      --_ui-toast-surface: var(--ui-surface-muted);
 
       display: flex;
       align-items: center;
@@ -52,26 +53,35 @@
       inline-size: 100%;
       margin: 0;
       padding: var(--ui-space-3) var(--ui-space-4);
-      border: var(--ui-border-width) solid var(--ui-toast-border, var(--ui-overlay-border, var(--ui-border-strong)));
-      border-inline-start: var(--ui-accent-line-width) solid var(--ui-toast-accent, var(--_ui-toast-accent));
+      /* The close button's internal space supplies the rest of the trailing inset. */
+      padding-inline-end: var(--ui-space-2);
+      border: var(--ui-border-width) solid var(--ui-toast-border, var(--ui-overlay-border, var(--ui-toast-accent, var(--_ui-toast-accent))));
       border-radius: var(--ui-toast-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
-      background: var(--ui-toast-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+      background: var(--ui-toast-surface, var(--ui-overlay-surface, var(--_ui-toast-surface)));
       color: var(--ui-text-primary);
+      font-family: var(--ui-font-family-sans);
+      font-size: var(--ui-font-size-sm);
+      font-weight: var(--ui-font-normal);
+      line-height: var(--ui-line-height-md);
       box-shadow: var(--ui-toast-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
       pointer-events: auto;
     }
 
     :host([tone="info"]) {
       --_ui-toast-accent: var(--ui-info-solid);
+      --_ui-toast-surface: var(--ui-info-soft);
     }
     :host([tone="success"]) {
       --_ui-toast-accent: var(--ui-success-solid);
+      --_ui-toast-surface: var(--ui-success-soft);
     }
     :host([tone="warning"]) {
       --_ui-toast-accent: var(--ui-warning-solid);
+      --_ui-toast-surface: var(--ui-warning-soft);
     }
     :host([tone="danger"]) {
       --_ui-toast-accent: var(--ui-danger-solid);
+      --_ui-toast-surface: var(--ui-danger-soft);
     }
 
     .message {
@@ -81,10 +91,6 @@
     .action:not(:has(> *)) {
       display: none;
     }
-    .dismiss {
-      margin-inline-end: calc(var(--ui-space-2) * -1);
-    }
-
     :host[hidden] {
       display: none;
     }

package/components/ui-toast-region/ui-toast-region.html

@@ -141,30 +141,42 @@
     }
 
     .toast {
+      --_ui-toast-region-accent: var(--ui-border-strong);
+      --_ui-toast-region-tone-surface: var(--ui-surface-muted);
       display: grid;
       grid-template-columns: 1fr auto;
       gap: var(--ui-space-2);
       align-items: start;
-      border: var(--ui-border-width) solid var(--_ui-toast-region-border, var(--ui-overlay-border, var(--ui-border-strong)));
+      border: var(--ui-border-width) solid var(--_ui-toast-region-border, var(--ui-overlay-border, var(--_ui-toast-region-accent)));
       border-radius: var(--_ui-toast-region-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
       padding: var(--ui-space-3) var(--ui-space-4);
-      background: var(--_ui-toast-region-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+      /* The close button's internal space supplies the rest of the trailing inset. */
+      padding-inline-end: var(--ui-space-2);
+      background: var(--_ui-toast-region-surface, var(--ui-overlay-surface, var(--_ui-toast-region-tone-surface)));
       color: var(--ui-text-primary);
+      font-family: var(--ui-font-family-sans);
+      font-size: var(--ui-font-size-sm);
+      font-weight: var(--ui-font-normal);
+      line-height: var(--ui-line-height-md);
       box-shadow: var(--_ui-toast-region-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
       animation: ui-toast-enter var(--_ui-toast-region-enter-duration, 0.32s) var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
     }
 
     .toast[data-tone="info"] {
-      border-inline-start: var(--ui-accent-line-width) solid var(--ui-info-solid);
+      --_ui-toast-region-accent: var(--ui-info-solid);
+      --_ui-toast-region-tone-surface: var(--ui-info-soft);
     }
     .toast[data-tone="success"] {
-      border-inline-start: var(--ui-accent-line-width) solid var(--ui-success-solid);
+      --_ui-toast-region-accent: var(--ui-success-solid);
+      --_ui-toast-region-tone-surface: var(--ui-success-soft);
     }
     .toast[data-tone="warning"] {
-      border-inline-start: var(--ui-accent-line-width) solid var(--ui-warning-solid);
+      --_ui-toast-region-accent: var(--ui-warning-solid);
+      --_ui-toast-region-tone-surface: var(--ui-warning-soft);
     }
     .toast[data-tone="danger"] {
-      border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger-solid);
+      --_ui-toast-region-accent: var(--ui-danger-solid);
+      --_ui-toast-region-tone-surface: var(--ui-danger-soft);
     }
 
     /* Leaving slides on down and fades; the controller removes the toast when this ends. */
@@ -238,7 +250,6 @@
 
     .dismiss {
       align-self: center;
-      margin-inline-end: calc(var(--ui-space-2) * -1);
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */