@threadlabs/looma 0.6.0 → 0.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.6.0",
+  "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-cluster.css

@@ -5,7 +5,7 @@
       display: flex;
       flex-wrap: wrap;
       align-items: center;
-      gap: var(--ui-layout-gap, var(--_layout-gap));
+      gap: var(--ui-cluster-gap, var(--_layout-gap));
       min-inline-size: 0;
       max-inline-size: 100%;
       margin: 0;

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-editor-insert-table-grid.css

@@ -16,8 +16,8 @@
 
     .grid {
       display: grid;
-      grid-template-columns: repeat(var(--ui-editor-table-grid-cols, 8), 1.25rem);
-      grid-template-rows: repeat(var(--ui-editor-table-grid-rows, 8), 1.25rem);
+      grid-template-columns: repeat(var(--_cols, 8), 1.25rem);
+      grid-template-rows: repeat(var(--_rows, 8), 1.25rem);
       gap: 2px;
       margin-bottom: var(--ui-space-2);
     }

package/styles/ui-editor-table-context-menu.css

@@ -74,7 +74,7 @@
       height: 1rem;
       border-radius: 999px;
       border: 1px solid var(--ui-border);
-      background: var(--ui-editor-table-context-swatch, #fff);
+      background: var(--_swatch, #fff);
       box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);
       flex-shrink: 0;
     }

package/styles/ui-editor-table-toolbar.css

@@ -172,7 +172,7 @@
       flex: 0 0 14px;
       border: 1px solid color-mix(in srgb, var(--ui-border) 80%, #000);
       border-radius: 3px;
-      background: var(--ui-editor-table-toolbar-swatch);
+      background: var(--_swatch);
     }
 
     .swatch.default {

package/styles/ui-editor-toolbar.css

@@ -10,9 +10,10 @@
       gap: var(--ui-editor-toolbar-gap, 2px);
       padding: var(--ui-editor-toolbar-padding-block, 6px) var(--ui-editor-toolbar-padding-inline, 12px);
       min-height: var(--ui-editor-toolbar-min-height, 48px);
-      overflow-x: auto;
-      scrollbar-width: none;
-      white-space: nowrap;
+      /* More controls than the column is wide is normal at a readable measure, so the row wraps.
+         Scrolling hid the tail behind an invisible scrollbar. */
+      flex-wrap: wrap;
+      row-gap: var(--ui-editor-toolbar-row-gap, var(--ui-editor-toolbar-gap, 2px));
       background: var(--ui-editor-toolbar-surface, var(--ui-surface));
       border-bottom: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
     }
@@ -22,6 +23,7 @@
     }
 
     :scope[data-ui-editor-toolbar-state~="floating"] {
+      flex-wrap: nowrap;
       position: static;
       top: auto;
       width: max-content;

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-stack.css

@@ -5,7 +5,7 @@
       display: flex;
       flex-direction: column;
       align-items: stretch;
-      gap: var(--ui-layout-gap, var(--_layout-gap));
+      gap: var(--ui-stack-gap, var(--_layout-gap));
       min-inline-size: 0;
       max-inline-size: 100%;
       margin: 0;

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

package/styles/ui-toast-region.css

@@ -58,12 +58,12 @@
       background: var(--ui-surface-elevated);
       color: var(--ui-text-primary);
       box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
-      animation: ui-toast-enter var(--ui-toast-enter-duration, 0.32s) var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
+      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;
     }
 
     /* Leaving slides on down and fades; the controller removes the toast when this ends. */
     .toast.closing {
-      animation: ui-toast-exit var(--ui-toast-exit-duration, 0.22s) var(--ui-motion-ease) both;
+      animation: ui-toast-exit var(--ui-toast-region-exit-duration, 0.22s) var(--ui-motion-ease) both;
       pointer-events: none;
     }
 

package/tokens.css

@@ -98,8 +98,12 @@
     --ui-font-size-ui: calc(var(--ui-font-size) * 0.9375);
     --ui-font-size-md: var(--ui-font-size);
     --ui-font-size-lg: calc(var(--ui-font-size) * 1.125);
+    --ui-font-size-xl: calc(var(--ui-font-size) * 1.25);
+    --ui-font-size-2xl: calc(var(--ui-font-size) * 1.5);
     --ui-line-height-tight: 1.2;
     --ui-line-height-md: var(--ui-line-height);
+    /* Prose, not controls: the editor's document body reads at a looser line height. */
+    --ui-line-height-relaxed: calc(var(--ui-line-height) * 1.15);
     --ui-font-normal: 400;
     --ui-font-semibold: 600;
     --ui-font-bold: 700;