@threadlabs/looma 0.26.4 → 0.26.6

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

@@ -13,9 +13,10 @@
       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 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>
+    <prop name="size" type="keyword" values="xs, sm, md, lg" default="md"
+    >Scale. xs is compact; sm keeps the usual badge geometry with compact text, fitting short counts such as 99+ inside a 24px circle. 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 sm and md, and 40px at lg. A circle is 16px at xs,
+      24px at sm and md, and 32px at lg.</prop>
   </defs>
   <span>
     <span class="icon" aria-hidden="true"><slot name="icon"></slot></span>
@@ -35,6 +36,10 @@
       syntax: "*";
       inherits: false;
     }
+    @property --ui-badge-circle-opacity {
+      syntax: "*";
+      inherits: false;
+    }
     @property --ui-badge-dot-size {
       syntax: "*";
       inherits: false;
@@ -191,6 +196,11 @@
       line-height: var(--ui-badge-line-height, 1);
     }
 
+    :host([size="sm"]) {
+      font-size: var(--ui-badge-font-size, var(--ui-font-size-2xs));
+      line-height: var(--ui-badge-line-height, 1);
+    }
+
     :host([tone="accent"]) {
       --_badge-surface: var(--ui-accent-strong-surface, var(--ui-accent-solid));
       --_badge-border: var(--ui-accent-strong-surface, var(--ui-accent-solid));
@@ -272,8 +282,35 @@
       background-clip: padding-box;
     }
 
+    /* A circular count has a tone-tinted surface, a separate lighter rim and readable tone ink.
+       Dark controls retain a shaded surface and theme ink with a quieter rim. */
     :host([variant="inverse"][shape="circle"]) {
-      box-shadow: var(--ui-shadow-sm);
+      --_badge-color-surface: light-dark(
+        color-mix(in srgb, color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) var(--ui-badge-circle-opacity, 66%), transparent),
+        color-mix(in srgb, color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) var(--ui-badge-circle-opacity, 56%), transparent)
+      );
+      --_badge-color-border: light-dark(
+        color-mix(in srgb, color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) 88%, transparent),
+        color-mix(in srgb, color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) 44%, transparent)
+      );
+      --_badge-color-text: light-dark(
+        color-mix(in srgb, var(--_badge-color-ink) 65%, var(--ui-text-primary)),
+        color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-text-primary))
+      );
+      --_badge-count-surface: light-dark(
+        color-mix(in srgb, var(--_badge-text) var(--ui-badge-circle-opacity, 66%), transparent),
+        color-mix(in srgb, var(--_badge-text) var(--ui-badge-circle-opacity, 56%), transparent)
+      );
+      --_badge-outline-surface: var(--ui-badge-surface, var(--_badge-color-surface, var(--_badge-count-surface)));
+      border-color: var(
+        --ui-badge-border,
+        var(--_badge-color-border, light-dark(color-mix(in srgb, var(--_badge-text) 88%, transparent), color-mix(in srgb, var(--_badge-text) 44%, transparent)))
+      );
+      color: var(
+        --ui-badge-text,
+        var(--_badge-color-text, light-dark(color-mix(in srgb, var(--_badge-surface) 65%, var(--ui-text-primary)), var(--ui-text-primary)))
+      );
+      box-shadow: 0 1px 1px light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.12));
     }
 
     /* Neutral reverses a subtle surface/ink pair rather than a strong tone. Keep its original

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

@@ -78,6 +78,7 @@
     >
       <span $if="$loading or $pending" class="spinner-wrap"><ui-spinner size="sm"></ui-spinner></span>
       <slot></slot>
+      <span class="badge"><slot name="badge"></slot></span>
     </a>
     <button
       $else
@@ -88,6 +89,7 @@
     >
       <span $if="$loading or $pending" class="spinner-wrap"><ui-spinner size="sm"></ui-spinner></span>
       <slot></slot>
+      <span class="badge"><slot name="badge"></slot></span>
     </button>
   </template>
   <style>
@@ -166,6 +168,16 @@
     }
 
     :host {
+      /* Optional inherited action-group values keep text and icon actions under the same light.
+         One fine top/start highlight follows the bottom/end lowlight at a joined action seam.
+         A single ambient lift avoids stacking a face gradient or another inset bevel. */
+      --_ui-action-start: 1px;
+      --_ui-action-edge: var(
+        --ui-action-edge,
+        inset var(--_ui-action-start) 1px 0 light-dark(rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.06)),
+        inset calc(-1 * var(--_ui-action-start)) -1px 0 light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.08))
+      );
+      --_ui-action-shadow: var(--_ui-action-edge), 0 1px 2px light-dark(rgb(0 0 0 / 0.10), rgb(0 0 0 / 0.20));
       --_hue: var(--ui-accent);
       --_hue-hover: var(--ui-accent-hover);
       --_hue-active: var(--ui-accent-active);
@@ -186,6 +198,10 @@
       color: var(--_tone-text);
     }
 
+    :host:dir(rtl) {
+      --_ui-action-start: -1px;
+    }
+
     :host([align="start"]) {
       justify-content: flex-start;
       text-align: start;
@@ -212,8 +228,8 @@
       white-space: var(--ui-button-white-space, inherit);
       line-height: var(--ui-line-height-tight);
       padding: var(--ui-space-2) var(--ui-space-3);
-      background-image: var(--ui-raised-highlight);
-      box-shadow: var(--ui-button-shadow, var(--ui-raised));
+      background-image: none;
+      box-shadow: var(--ui-button-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
       cursor: pointer;
       transition:
         background-color var(--ui-motion-fast) var(--ui-motion-ease),
@@ -234,6 +250,22 @@
       vertical-align: middle;
     }
 
+    /* A count is an adornment, not another line of label text. Keep the standard control height
+       with enough inset for a 24px mark; large content can still grow the button naturally. */
+    :host:not([variant="link"]):has(.badge:not(:empty)) {
+      padding-block: var(--ui-space-0-5);
+    }
+
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      flex: none;
+    }
+
+    .badge:empty {
+      display: none;
+    }
+
     @supports (text-box-trim: trim-both) {
       :host {
         text-box-trim: trim-both;
@@ -307,6 +339,15 @@
       background-color: var(--ui-button-hover-surface, oklch(from var(--_tone) l c h / 12%));
     }
 
+    /* A neutral card encloses content quietly; ordinary outlines keep their action-tone edge. */
+    :host([variant="card"][tone="neutral"]) {
+      border-color: var(--ui-button-border, var(--ui-border));
+    }
+
+    :host([variant="card"][tone="neutral"]):hover:not(:disabled, [aria-disabled="true"]) {
+      border-color: var(--ui-button-hover-border, var(--ui-border-strong));
+    }
+
     /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
     :host:active:not(:disabled, [aria-disabled="true"]) {
       background-color: var(--ui-button-active-surface, oklch(from var(--_tone) l c h / 18%));
@@ -318,7 +359,7 @@
       border-color: var(--_tone);
       background-color: var(--_tone);
       color: var(--_on-tone);
-      box-shadow: var(--ui-button-solid-shadow, var(--ui-raised));
+      box-shadow: var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
     }
 
     :is(:host([variant="solid"]), :host([variant="danger"])):hover:not(:disabled, [aria-disabled="true"]) {
@@ -400,16 +441,20 @@
     :host:focus-visible {
       outline: none;
       box-shadow:
-        var(--ui-button-shadow, var(--ui-raised)),
+        var(--ui-button-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
         var(--ui-focus-halo);
     }
 
     :host([variant="solid"]):focus-visible {
       box-shadow:
-        var(--ui-button-solid-shadow, var(--ui-raised)),
+        var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
         var(--ui-focus-halo);
     }
 
+    :is(:host([variant="ghost"]), :host([variant="link"]), :host([variant="card"])):focus-visible {
+      box-shadow: var(--ui-focus-halo);
+    }
+
     /* A loading action stays visually active; only an explicitly disabled action takes the
        neutral disabled palette. Its flat surface and muted ink make the state unambiguous. */
     :host:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {

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

@@ -116,6 +116,16 @@
     }
 
     :host {
+      /* Optional inherited action-group values keep text and icon actions under the same light.
+         One fine top/start highlight follows the bottom/end lowlight at a joined action seam.
+         A single ambient lift avoids stacking a face gradient or another inset bevel. */
+      --_ui-action-start: 1px;
+      --_ui-action-edge: var(
+        --ui-action-edge,
+        inset var(--_ui-action-start) 1px 0 light-dark(rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.06)),
+        inset calc(-1 * var(--_ui-action-start)) -1px 0 light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.08))
+      );
+      --_ui-action-shadow: var(--_ui-action-edge), 0 1px 2px light-dark(rgb(0 0 0 / 0.10), rgb(0 0 0 / 0.20));
       /* Hooks do not inherit, so the parts below read them from the root. */
       --_ui-icon-button-icon-size: var(--ui-icon-button-icon-size);
       --_ui-icon-button-icon-stroke-width: var(--ui-icon-button-icon-stroke-width);
@@ -124,6 +134,10 @@
       color: var(--ui-text-secondary);
     }
 
+    :host:dir(rtl) {
+      --_ui-action-start: -1px;
+    }
+
     :host([tone="accent"]) {
       --_icon-button-border: var(--ui-accent-solid);
       --_icon-button-hover-border: var(--ui-accent-hover);
@@ -297,19 +311,16 @@
     :host([variant="outline"]) {
       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);
+      background-image: none;
       color: var(--ui-icon-button-outline-text, var(--_icon-button-text, var(--ui-text-primary)));
-      box-shadow: var(--ui-raised);
+      box-shadow: var(--ui-action-shadow, var(--_ui-action-shadow));
     }
 
     :host([variant="solid"]) {
       background-color: var(--ui-icon-button-solid-surface, var(--_icon-button-solid-surface, var(--ui-accent-solid)));
-      background-image: var(--ui-raised-highlight);
+      background-image: none;
       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)
-      );
+      box-shadow: var(--ui-icon-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
     }
 
     :host:hover:enabled:not([aria-disabled="true"]) {
@@ -373,6 +384,23 @@
       box-shadow: var(--ui-focus-halo);
     }
 
+    :host([variant="outline"]):focus-visible {
+      box-shadow:
+        var(--ui-action-shadow, var(--_ui-action-shadow)),
+        var(--ui-focus-halo);
+    }
+
+    :host([variant="solid"]):focus-visible {
+      box-shadow:
+        var(--ui-icon-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
+        var(--ui-focus-halo);
+    }
+
+    :host:is(:host([variant="outline"]), :host([variant="solid"])):active:enabled:not([aria-disabled="true"]) {
+      background-image: none;
+      box-shadow: var(--ui-pressed);
+    }
+
     :host([variant="outline"])[aria-pressed="true"]:enabled:focus-visible {
       box-shadow:
         var(--ui-pressed),

package/components/ui-input-group/ui-input-group.html

@@ -1,5 +1,8 @@
 <template component="ui-input-group" controller="./ui-input-group.js">
   <defs>
+    <prop name="variant" type="keyword" values="outline, subtle" default="outline"
+    >outline uses the standard field edge and surface. subtle uses a quiet decorative edge and muted surface for a multiline composer. Both retain the same
+      focus, invalid and disabled states, and the field inside shares the group's one frame.</prop>
     <prop name="multiline" type="boolean" default="false">Groups a Textarea with an action below its text inside the shared frame.</prop>
     <prop name="actionPosition" type="keyword" values="below, top-end" default="below"
     >In a multiline group, below keeps the action under the text. top-end places it inside the textarea at its upper end and reserves text padding for its
@@ -79,6 +82,12 @@
       transition: border-color var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
+    :host([variant="subtle"]) {
+      border-color: var(--ui-border);
+      background: var(--ui-surface-muted);
+      box-shadow: none;
+    }
+
     /* The frame takes its input's size, so a small group lines up with small buttons and fields. */
     :host:has(.field [data-ui-input-state~="size=sm"]) {
       min-block-size: var(--ui-control-size-sm);