@threadlabs/looma 0.13.2 → 0.13.4

package/components/shared/icons.js

@@ -25,6 +25,7 @@ export const icons = {
   "heading-1": [["path",{"d":"M4 12h8"}],["path",{"d":"M4 18V6"}],["path",{"d":"M12 18V6"}],["path",{"d":"m17 12 3-2v8"}]],
   "heading-2": [["path",{"d":"M4 12h8"}],["path",{"d":"M4 18V6"}],["path",{"d":"M12 18V6"}],["path",{"d":"M21 18h-4c0-4 4-3 4-6 0-1.5-2-2.5-4-1"}]],
   "heading-3": [["path",{"d":"M4 12h8"}],["path",{"d":"M4 18V6"}],["path",{"d":"M12 18V6"}],["path",{"d":"M17.5 10.5c1.7-1 3.5 0 3.5 1.5a2 2 0 0 1-2 2"}],["path",{"d":"M17 17.5c2 1.5 4 .3 4-1.5a2 2 0 0 0-2-2"}]],
+  "help": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"}],["path",{"d":"M12 17h.01"}]],
   "highlighter": [["path",{"d":"m9 11-6 6v3h9l3-3"}],["path",{"d":"m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4"}]],
   "image": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2","ry":"2"}],["circle",{"cx":"9","cy":"9","r":"2"}],["path",{"d":"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"}]],
   "info": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M12 16v-4"}],["path",{"d":"M12 8h.01"}]],

package/components/ui-affordance-scope/ui-affordance-scope.html

@@ -1,6 +1,9 @@
 <template component="ui-affordance-scope" controller="./ui-affordance-scope.js">
   <defs>
     <prop name="nearRadius" type="number" default="16">How close, in pixels, the pointer must come to reveal an affordance.</prop>
+    <prop name="guide" type="dot | none" default="dot"
+    >What marks an anticipatory control at rest. dot shows a small guide dot where it will appear; none shows nothing until the pointer nears it, it is hovered,
+      or it takes focus. Every guide inside the scope follows it, including a sidebar's resize line and the editor table's handles.</prop>
     <state name="engaged" :value="false"></state>
   </defs>
   <span><slot></slot></span>
@@ -8,12 +11,18 @@
     :host {
       display: contents;
       --ui-affordance-scope-engaged: 0;
+      --ui-affordance-scope-guide: 1;
     }
 
     :host-state([engaged]) {
       --ui-affordance-scope-engaged: 1;
     }
 
+    /* Published to descendants: each guide multiplies its opacity by it, so none reaches them all. */
+    :host-state([guide="none"]) {
+      --ui-affordance-scope-guide: 0;
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
       display: none;

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

@@ -6,6 +6,9 @@
     <prop name="align" type="start | center | end | stretch"
     >How items line up within each row: center (the default) aligns their middles, start their tops, end their bottoms, and stretch makes every item as tall as
       its row.</prop>
+    <prop name="justify" type="start | center | end | between"
+    >Where items sit along each row: start (the default), center, end, or between, which pushes the first and last items to the ends of the row and spreads the
+      spare space between them, as for a title with its actions.</prop>
   </defs>
   <div><slot></slot></div>
   <style>
@@ -50,6 +53,15 @@
     :host-state([align="stretch"]) {
       align-items: stretch;
     }
+    :host-state([justify="center"]) {
+      justify-content: center;
+    }
+    :host-state([justify="end"]) {
+      justify-content: flex-end;
+    }
+    :host-state([justify="between"]) {
+      justify-content: space-between;
+    }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {

package/components/ui-editor-table-overlay/ui-editor-table-overlay.html

@@ -265,7 +265,7 @@
       height: var(--ui-affordance-guide-size);
       border-radius: var(--ui-radius-round);
       background: var(--ui-affordance-guide-color, var(--ui-border-strong));
-      opacity: var(--ui-affordance-guide-opacity);
+      opacity: calc(var(--ui-affordance-guide-opacity) * var(--ui-affordance-scope-guide, 1));
       transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
     }
 
@@ -354,7 +354,7 @@
       inset: 50% auto auto 50%;
       border-radius: var(--ui-radius-round);
       background: var(--ui-affordance-guide-color, var(--ui-border-strong));
-      opacity: var(--ui-affordance-guide-opacity);
+      opacity: calc(var(--ui-affordance-guide-opacity) * var(--ui-affordance-scope-guide, 1));
       transform: translate(-50%, -50%);
       transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
       pointer-events: none;

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

@@ -112,7 +112,7 @@
       block-size: var(--ui-affordance-guide-size);
       border-radius: var(--ui-radius-round);
       background: var(--ui-affordance-guide-color, var(--ui-border-strong));
-      opacity: var(--ui-affordance-guide-opacity);
+      opacity: calc(var(--ui-affordance-guide-opacity) * var(--ui-affordance-scope-guide, 1));
       transform: translate(-50%, -50%);
       transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
       pointer-events: none;
@@ -265,6 +265,10 @@
 
     :host {
       --_icon-button-icon-default: var(--ui-icon-size-md);
+      /* A slotted ui-icon is its own component, out of reach of the svg rule below; these are its
+         defaults, which its own --ui-icon-* hooks still override. */
+      --_ui-default-icon-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
+      --_ui-default-icon-stroke-width: var(--_ui-icon-button-icon-stroke-width, 1.75);
     }
 
     :host-state([size="sm"]) {

package/components/ui-sidebar/ui-sidebar.html

@@ -130,7 +130,7 @@
       inset-inline-start: 3px;
       inline-size: 2px;
       background: color-mix(in srgb, var(--ui-affordance-guide-color, var(--ui-border-strong)) 45%, transparent);
-      opacity: var(--ui-affordance-guide-opacity);
+      opacity: calc(var(--ui-affordance-guide-opacity) * var(--ui-affordance-scope-guide, 1));
       transition:
         background-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
         opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);