@threadlabs/looma 0.6.0-rc.2 → 0.6.1

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

@@ -4,7 +4,9 @@
     >Visual emphasis and semantic intent. link is an inline text action that reads as a link.</prop>
     <prop name="size" type="sm | md | lg" default="md">Control size.</prop>
     <prop name="tone" type="neutral | accent" default="neutral"
-    >Intent of an outline, ghost, or link button. accent tints it with the accent colour, for a secondary action that still reads as the primary path.</prop>
+    >Intent of an outline, ghost, or link button. accent tints it with the accent colour, for a secondary action that still reads as the primary path. For a
+      product whose buttons are accent-tinted by default, point --ui-button-surface, --ui-button-border, and --ui-button-text at the accent values in your theme
+      rather than annotating every call site, and keep them as var() references so they follow a later change of accent.</prop>
     <prop name="disabled" type="boolean" default="false">disabled token.</prop>
     <prop name="align" type="center | start" default="center"
     >Content alignment. start lays the content out like a list option: from the start edge, with start-aligned text.</prop>

package/components/ui-cluster/ui-cluster.html

@@ -10,7 +10,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/components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.html

@@ -13,7 +13,7 @@
   </defs>
   <div :hidden="not open">
     <p class="hint" $value="hint"></p>
-    <div class="grid" role="group" aria-label="Table dimensions" style:--ui-editor-table-grid-rows="rows" style:--ui-editor-table-grid-cols="cols">
+    <div class="grid" role="group" aria-label="Table dimensions" style:--_rows="rows" style:--_cols="cols">
       <button
         $each="cell of cells"
         $key="cell.key"
@@ -47,8 +47,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/components/ui-editor-table-context-menu/ui-editor-table-context-menu.html

@@ -32,7 +32,7 @@
           :aria-checked="swatch.selected"
           :data-action="swatch.action"
         >
-          <span class="swatch" class:default="not swatch.color" style:--ui-editor-table-context-swatch="swatch.color"></span>
+          <span class="swatch" class:default="not swatch.color" style:--_swatch="swatch.color"></span>
           <span class="swatch-label" $value="swatch.label"></span>
         </button>
       </div>
@@ -123,7 +123,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/components/ui-editor-table-toolbar/ui-editor-table-toolbar.html

@@ -67,7 +67,7 @@
               :aria-checked="swatch.selected"
               :data-action="swatch.action"
             >
-              <span class="swatch" class:default="not swatch.color" style:--ui-editor-table-toolbar-swatch="swatch.color"></span>
+              <span class="swatch" class:default="not swatch.color" style:--_swatch="swatch.color"></span>
               <span $value="swatch.label"></span>
             </button>
           </div>
@@ -255,7 +255,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/components/ui-editor-toolbar/ui-editor-toolbar.html

@@ -14,9 +14,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));
     }
@@ -38,6 +39,7 @@
     }
 
     :host-state([floating]) {
+      flex-wrap: nowrap;
       position: static;
       top: auto;
       width: max-content;

package/components/ui-stack/ui-stack.html

@@ -11,7 +11,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/components/ui-toast-region/ui-toast-region.html

@@ -72,12 +72,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;
     }