@threadlabs/looma 0.25.2 → 0.25.4

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

@@ -14,7 +14,10 @@
     <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>
   </defs>
-  <span><span class="label"><slot></slot></span></span>
+  <span>
+    <span class="icon" aria-hidden="true"><slot name="icon"></slot></span>
+    <span class="label"><slot></slot></span>
+  </span>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */
     @property --ui-badge-border {
@@ -89,6 +92,7 @@
       display: inline-flex;
       align-items: center;
       justify-content: center;
+      gap: var(--ui-space-1);
       box-sizing: border-box;
       min-inline-size: 0;
       max-inline-size: 100%;
@@ -113,8 +117,43 @@
       text-overflow: ellipsis;
     }
 
-    /* Trim leading while retaining the font's ascent and descent. A cap-to-baseline box
-       would crop glyphs where the label clips horizontal overflow for ellipsis. */
+    .label:empty {
+      display: none;
+    }
+
+    /* Icon content has its own flex item so label ellipsis never clips its strokes. */
+    .icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex: none;
+    }
+
+    .icon:empty {
+      display: none;
+    }
+
+    .icon :slotted(svg) {
+      display: block;
+      inline-size: 1em;
+      block-size: 1em;
+      flex: none;
+    }
+
+    /* Ordinary icon-plus-text children keep inline ellipsis, with explicit glyph spacing. */
+    .label :slotted(svg) {
+      inline-size: 1em;
+      block-size: 1em;
+      vertical-align: middle;
+      margin-inline-end: var(--ui-space-1);
+    }
+
+    .label:has(svg) {
+      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. */
     @supports (text-box-trim: trim-both) {
       :host {
         display: inline-block;
@@ -124,6 +163,15 @@
         text-box-trim: trim-both;
         text-box-edge: text;
       }
+      :host:has(.icon:not(:empty)),
+      :host:has(.label svg) {
+        display: inline-flex;
+        text-box-trim: none;
+      }
+      :host:has(.icon:not(:empty)) .label {
+        text-box-trim: trim-both;
+        text-box-edge: text;
+      }
     }
 
     :host([size="xs"]) {
@@ -262,6 +310,14 @@
       justify-content: center;
     }
 
+    :host([shape="square"]) .label :slotted(svg) {
+      margin-inline-end: 0;
+    }
+
+    :host([shape="square"]) .label:empty {
+      display: none;
+    }
+
     /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
     :host([shape="dot"]) {
       position: relative;

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

@@ -181,6 +181,7 @@
       display: inline-flex;
       align-items: center;
       justify-content: center;
+      column-gap: var(--ui-space-2);
       vertical-align: middle;
       color: var(--_tone-text);
     }
@@ -230,7 +231,6 @@
     .spinner-wrap {
       display: inline-flex;
       flex: none;
-      margin-inline-end: var(--ui-space-2);
       vertical-align: middle;
     }
 

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

@@ -293,7 +293,7 @@
       transform: translateY(-20%) rotate(45deg);
     }
 
-    :host[aria-expanded="true"] .disclosure-icon {
+    :host[aria-expanded="true"] > .row > .disclosure > .disclosure-icon {
       transform: rotate(0deg);
     }