@threadlabs/looma 0.13.1 → 0.13.3

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-button/ui-button.html

@@ -22,21 +22,25 @@
       aria-disabled="true", so it cannot be followed.</prop>
     <prop name="target" type="string">Where a link opens, as on a native link. Only meaningful with as="a".</prop>
     <prop name="rel" type="string">The link's relationship to its destination, as on a native link. Only meaningful with as="a".</prop>
-    <!-- One root, a button or a link (as="a"). The language has no conditional expression, so a table keyed
-         by a boolean's text picks each value, and null leaves the attribute off: a link never carries type or
-         disabled, and a disabled link loses its href and states aria-disabled instead. -->
+    <prop name="as" type="button | a" default="button">The native element the button renders: a button, or a link (a) that navigates to href.</prop>
+    <!-- Each root carries only its own attributes: a link has no type or disabled, and a disabled link
+         loses its href and states aria-disabled instead. The language has no conditional expression, so a
+         table keyed by a boolean's text picks each value, and null leaves the attribute off. -->
   </defs>
-  <button
-    as="button|a"
-    :type="{ true: type, false: null }[format('%s', not href)]"
-    :disabled="{ true: true, false: null }[format('%s', disabled and not href)]"
-    :href="{ true: null, false: href }[format('%s', disabled)]"
-    :target="target"
-    :rel="rel"
-    :aria-disabled="{ true: 'true', false: null }[format('%s', disabled and href)]"
-  >
-    <slot></slot>
-  </button>
+  <template $match>
+    <a
+      $when="as = 'a'"
+      :href="{ true: null, false: href }[format('%s', disabled)]"
+      :target="target"
+      :rel="rel"
+      :aria-disabled="{ true: 'true', false: null }[format('%s', disabled and href)]"
+    >
+      <slot></slot>
+    </a>
+    <button $else :type="type" :disabled="disabled">
+      <slot></slot>
+    </button>
+  </template>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */
     @property --ui-button-active-surface {

package/components/ui-card/ui-card.html

@@ -6,8 +6,15 @@
     <prop name="padding" type="sm | md | lg" default="md"
     >The space inside the card: sm is snug (0.75rem), md is the default (1.5rem), and lg is roomy (2rem).</prop>
     <prop name="tone" type="neutral | danger" default="neutral">danger draws an outlined card's border in the danger colour.</prop>
+    <prop name="as" type="div | section | article | aside" default="div"
+    >The native element the card renders. Choose the one that names the content: a section of a page, a self-contained article, or an aside.</prop>
   </defs>
-  <div as="div|section|article|aside"><slot></slot></div>
+  <template $match>
+    <section $when="as = 'section'"><slot></slot></section>
+    <article $when="as = 'article'"><slot></slot></article>
+    <aside $when="as = 'aside'"><slot></slot></aside>
+    <div $else><slot></slot></div>
+  </template>
   <style>
     /* A surface that groups content. Its children stack with even space between them, so a card
        needs no layout of its own. */

package/components/ui-combobox/ui-combobox.html

@@ -232,7 +232,7 @@
       </div>
       <slot name="footer"></slot>
     </div>
-    <div class="message" :id="format('%s-validation', uid)" :hidden="not validation.issues[0]">
+    <div class="message" :id="format('%s-validation', uid)" :hidden="not validation.issues.length">
       <div $each="issue of validation.issues" $value="issue.message"></div>
     </div>
     <div class="sr-only" role="status" aria-live="polite" aria-atomic="true" $value="statusText"></div>

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;

package/components/ui-nav-item/ui-nav-item.html

@@ -9,25 +9,35 @@
       item is a button, for switching views inside the app.</prop>
     <prop name="target" type="string">Where a link opens, as on a native link. Only meaningful with as="a".</prop>
     <prop name="rel" type="string">The link's relationship to its destination, as on a native link. Only meaningful with as="a".</prop>
-    <!-- One root, a button or a link (as="a"), as Button does. A button never submits a form; a link
-         carries no type. The language has no conditional expression, so a table keyed by a value's
-         text picks each attribute, and null leaves it off. -->
+    <prop name="as" type="button | a" default="button">The native element the item renders: a button, or a link (a) that navigates to href.</prop>
+    <!-- A button or a link, as Button does. A button never submits a form; a link carries no type. The
+         language has no conditional expression, so a table keyed by a value's text picks each attribute,
+         and null leaves it off. -->
   </defs>
-  <button
-    as="button|a"
-    :type="{ true: 'button', false: null }[format('%s', not href)]"
-    :href="href"
-    :target="target"
-    :rel="rel"
-    :aria-current="{ true: 'page', false: null, page: 'page', step: 'step', location: 'location' }[format('%s', current)]"
-  >
-    <span class="indicator" aria-hidden="true"></span>
-    <span class="leading"><slot name="leading"></slot></span>
-    <span class="content">
-      <span class="label"><slot></slot></span>
-      <span class="description"><slot name="description"></slot></span>
-    </span>
-  </button>
+  <template $match>
+    <a
+      $when="as = 'a'"
+      :href="href"
+      :target="target"
+      :rel="rel"
+      :aria-current="{ true: 'page', false: null, page: 'page', step: 'step', location: 'location' }[format('%s', current)]"
+    >
+      <span class="indicator" aria-hidden="true"></span>
+      <span class="leading"><slot name="leading"></slot></span>
+      <span class="content">
+        <span class="label"><slot></slot></span>
+        <span class="description"><slot name="description"></slot></span>
+      </span>
+    </a>
+    <button $else type="button" :aria-current="{ true: 'page', false: null, page: 'page', step: 'step', location: 'location' }[format('%s', current)]">
+      <span class="indicator" aria-hidden="true"></span>
+      <span class="leading"><slot name="leading"></slot></span>
+      <span class="content">
+        <span class="label"><slot></slot></span>
+        <span class="description"><slot name="description"></slot></span>
+      </span>
+    </button>
+  </template>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */
     @property --ui-nav-item-current-surface {

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

package/components/ui-text/ui-text.html

@@ -13,8 +13,18 @@
       exactly, such as an address, in the monospace face.</prop>
     <prop name="truncate" type="boolean" default="false">Keeps the text on one line, ending in an ellipsis when it does not fit.</prop>
     <prop name="align" type="start | center" default="start">Aligns the text within its line.</prop>
+    <prop name="as" type="p | span | div | small | strong | label" default="p"
+    >The native element the text renders: a paragraph by default, inline span, small, or strong within a line, a div for a block, or a label for a
+      control.</prop>
   </defs>
-  <p as="p|span|div|small|strong|label"><slot></slot></p>
+  <template $match>
+    <span $when="as = 'span'"><slot></slot></span>
+    <div $when="as = 'div'"><slot></slot></div>
+    <small $when="as = 'small'"><slot></slot></small>
+    <strong $when="as = 'strong'"><slot></slot></strong>
+    <label $when="as = 'label'"><slot></slot></label>
+    <p $else><slot></slot></p>
+  </template>
   <style>
     /* Running text, set on the type scale and in a tone that says what it is, so a view never styles
        text of its own. The root is a paragraph unless as= names a span, div, small, strong, or label. */