@threadlabs/looma 0.6.1 → 0.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-avatar-group.css

@@ -1,6 +1,11 @@
 /* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-avatar-group"]) to ([data-component], [data-slotted]) {
 :scope {
+      /* Avatars separate with a tight, crisp edge, matching Looma's 1px borders rather than the
+       * diffuse elevation overlays use. */
+      --_overlap-shadow: -2px 0 2px -1px rgba(0, 0, 0, 0.22);
+      --_edge-ring: 0 0 0 1px rgba(0, 0, 0, 0.08);
+
       display: flex;
       align-items: center;
       flex-direction: row;
@@ -22,8 +27,8 @@
       background: var(--ui-surface-elevated);
       color: var(--ui-text-primary);
       box-shadow:
-        var(--ui-avatar-group-overlap-shadow, -2px 0 5px -1px rgb(0 0 0 / 0.28)),
-        0 0 0 1px rgb(0 0 0 / 0.06);
+        var(--ui-avatar-group-overlap-shadow, var(--_overlap-shadow)),
+        var(--ui-avatar-group-edge-ring, var(--_edge-ring));
       font: inherit;
       font-size: 0.75rem;
       font-weight: 600;

package/styles/ui-avatar.css

@@ -25,6 +25,19 @@
       block-size: 100%;
     }
 
+    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
+    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
+     * Trimming applies to block containers, so the box is a block with centred content. */
+    @supports (text-box-trim: trim-both) {
+      .fallback {
+        display: block;
+        text-align: center;
+        align-content: center;
+        text-box-trim: trim-both;
+        text-box-edge: cap alphabetic;
+      }
+    }
+
     [hidden] {
       display: none;
     }
@@ -43,5 +56,11 @@
       object-fit: cover;
     }
 
+    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
+    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
+     * Trimming applies to block containers, so the box is a block with centred content. */
+    @supports (text-box-trim: trim-both) {
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/styles/ui-badge.css

@@ -21,6 +21,20 @@
       white-space: nowrap;
     }
 
+    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
+    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
+     * Trimming applies to block containers, so the box is a block with centred content. */
+    @supports (text-box-trim: trim-both) {
+      :scope {
+        display: 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: cap alphabetic;
+      }
+    }
+
     :scope[data-ui-badge-state~="tone=accent"] {
       --_badge-surface: var(--ui-accent-strong-surface, var(--ui-accent-solid));
       --_badge-border: var(--ui-accent-strong-surface, var(--ui-accent-solid));
@@ -87,5 +101,11 @@
     }
 }
 @scope ([data-component~="ui-badge"]) to ([data-component]) {
-/* A component that sets its display still honours the hidden attribute on its root. */
+/* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
+    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
+     * Trimming applies to block containers, so the box is a block with centred content. */
+    @supports (text-box-trim: trim-both) {
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/styles/ui-combobox.css

@@ -12,7 +12,17 @@
       font-size: var(--ui-combobox-label-font-size, 0.875rem);
       font-weight: 500;
     }
+    /* The field and anything that annotates it sit on one row; the help button is beside the box,
+       not inside it, because a control's box holds its value. */
+    .control {
+      display: flex;
+      align-items: center;
+      gap: var(--ui-space-2);
+      min-inline-size: 0;
+    }
+
     .field {
+      flex: 1 1 auto;
       display: flex;
       min-inline-size: 0;
       border: 1px solid var(--ui-control-border, var(--ui-border-default));
@@ -27,6 +37,44 @@
         var(--ui-control-inset),
         var(--ui-control-focus-halo-shadow);
     }
+    /* A ghost icon button: the affordance is the mark, not a box around it. */
+    .help {
+      flex: none;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: var(--ui-control-size-sm);
+      block-size: var(--ui-control-size-sm);
+      padding: 0;
+      border: 0;
+      border-radius: var(--ui-radius-round);
+      background: transparent;
+      color: var(--ui-text-secondary);
+      cursor: pointer;
+      transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), color var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    .help:hover:enabled,
+    .help[aria-expanded="true"] {
+      background: color-mix(in srgb, currentColor 8%, transparent);
+      color: var(--ui-text-primary);
+    }
+
+    .help:focus-visible {
+      outline: none;
+      box-shadow: var(--ui-focus-halo);
+    }
+
+    .help:disabled {
+      color: var(--ui-disabled-text);
+      cursor: not-allowed;
+    }
+
+    .help-icon {
+      inline-size: var(--ui-icon-size-sm);
+      block-size: var(--ui-icon-size-sm);
+    }
+
     input::selection {
       background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
       color: inherit;
@@ -202,7 +250,10 @@
     }
 }
 @scope ([data-component~="ui-combobox"]) to ([data-component]) {
-@media (pointer: coarse) {
+/* The field and anything that annotates it sit on one row; the help button is beside the box,
+       not inside it, because a control's box holds its value. */
+    /* A ghost icon button: the affordance is the mark, not a box around it. */
+    @media (pointer: coarse) {
     }
     @media (forced-colors: active) {
     }

package/styles/ui-menu-item.css

@@ -15,6 +15,19 @@
       transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
+    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
+    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
+     * Trimming applies to block containers, so the box is a block with centred content. */
+    @supports (text-box-trim: trim-both) {
+      :scope {
+        display: block;
+        min-block-size: var(--ui-menu-item-min-block-size, var(--ui-control-size-md, 2.5rem));
+        align-content: center;
+        text-box-trim: trim-both;
+        text-box-edge: cap alphabetic;
+      }
+    }
+
     :scope:is(:hover, :focus-visible):not([aria-disabled="true"]) {
       background: var(--ui-menu-item-hover-surface, var(--ui-surface-subtle));
     }
@@ -30,5 +43,11 @@
     }
 }
 @scope ([data-component~="ui-menu-item"]) to ([data-component]) {
-/* A component that sets its display still honours the hidden attribute on its root. */
+/* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
+    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
+     * Trimming applies to block containers, so the box is a block with centred content. */
+    @supports (text-box-trim: trim-both) {
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/styles/ui-tabs.css

@@ -54,6 +54,19 @@
         border-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
+    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
+    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
+     * Trimming applies to block containers, so the box is a block with centred content. */
+    @supports (text-box-trim: trim-both) {
+      .list button {
+        display: block;
+        text-align: center;
+        align-content: center;
+        text-box-trim: trim-both;
+        text-box-edge: cap alphabetic;
+      }
+    }
+
     :scope[data-ui-tabs-state~="stretch"] .list {
       grid-auto-columns: minmax(max-content, 1fr);
     }
@@ -117,6 +130,12 @@
 }
 @scope ([data-component~="ui-tabs"]) to ([data-component]) {
 /* Density resolves into the tab row's own values; the public tokens still override them. */
+
+    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
+    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
+     * Trimming applies to block containers, so the box is a block with centred content. */
+    @supports (text-box-trim: trim-both) {
+    }
     :where([data-slotted], [data-slotted] *):is(*) {
       padding: var(--ui-space-4);
     }