@threadlabs/looma 0.19.1 → 0.21.0

package/components/shared/trigger.js

@@ -4,14 +4,19 @@
  */
 export function trackTrigger(host) {
   let trigger = "programmatic";
-  const offKey = host.on("keydown", (event) => {
+  const onKey = (event) => {
     if (event.key === " " || event.key === "Enter" || event.key.startsWith("Arrow")) trigger = "keyboard";
-  });
-  const offPointer = host.on("pointerdown", () => { trigger = "pointer"; });
+  };
+  const onPointer = () => { trigger = "pointer"; };
+  host.element.addEventListener("keydown", onKey);
+  host.element.addEventListener("pointerdown", onPointer);
   const take = () => {
     const current = trigger;
     trigger = "programmatic";
     return current;
   };
-  return [take, () => { offKey(); offPointer(); }];
+  return [take, () => {
+    host.element.removeEventListener("keydown", onKey);
+    host.element.removeEventListener("pointerdown", onPointer);
+  }];
 }

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

@@ -1,7 +1,7 @@
 <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"
+    <prop name="guide" type="keyword" values="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>

package/components/ui-avatar/ui-avatar.html

@@ -13,9 +13,9 @@
     <prop name="fallback" type="string" default=""
     >Text shown instead of the initials derived from name or alt, whenever there is no image. It is uppercased; keep it to a couple of characters, because the
       circle clips anything wider.</prop>
-    <prop name="size" type="sm | md" default="md"
+    <prop name="size" type="keyword" values="sm, md" default="md"
     >md is 2.5rem, for a person on their own (a profile, a comment); sm is 1.75rem with smaller initials, for a row of people in a toolbar or header.</prop>
-    <prop name="shape" type="circle | square" default="circle">Circle by default; square uses the theme's medium radius.</prop>
+    <prop name="shape" type="keyword" values="circle, square" default="circle">Circle by default; square uses the theme's medium radius.</prop>
     <prop name="decorative" type="boolean" default="false">Hides the avatar from assistive technology when adjacent text already identifies the person.</prop>
     <prop name="active" type="boolean" default="false"
     >Marks the person as active now, such as editing the same page: a fine accent ring around the avatar. The ring is not announced, so say what it means in alt
@@ -27,10 +27,10 @@
   </defs>
   <span>
     <slot></slot>
-    <img class="image" $ref="image" :src="src" alt="" aria-hidden="true" :hidden="hasAuthoredImage or not hasImage">
-    <span class="fallback" :aria-hidden="hasImage" :hidden="hasImage">
-      <span :hidden="showGlyph" $value="initials"></span>
-      <span :hidden="not showGlyph"><ui-icon name="user-round"></ui-icon></span>
+    <img class="image" $ref="image" from:src="src" alt="" aria-hidden="true" from:hidden="hasAuthoredImage or not hasImage">
+    <span class="fallback" from:aria-hidden="hasImage" from:hidden="hasImage">
+      <span from:hidden="showGlyph" $value="initials"></span>
+      <span from:hidden="not showGlyph"><ui-icon name="user-round"></ui-icon></span>
     </span>
   </span>
   <style>

package/components/ui-avatar-group/ui-avatar-group.html

@@ -10,14 +10,14 @@
     >Accessible label for the overflow badge. Replace {count} with the number of people beyond the visible avatars.</prop>
     <prop name="label" type="string" default="People"
     >The group's accessible name, announced for the set of avatars as a whole. Name who they are rather than repeating the default.</prop>
-    <prop name="size" type="sm | md" default="md"
+    <prop name="size" type="keyword" values="sm, md" default="md"
     >The size of the avatars inside, matched by the +N badge and the overlap. Give each Avatar the same size.</prop>
     <state name="overflowCount" :value="0"></state>
     <state name="overflowAnnouncement" :value="''"></state>
   </defs>
-  <div role="group" :aria-label="label">
+  <div role="group" from:aria-label="label">
     <slot></slot>
-    <span class="overflow" $ref="overflow" role="img" :hidden="not overflowCount" :aria-label="overflowAnnouncement"><template
+    <span class="overflow" $ref="overflow" role="img" from:hidden="not overflowCount" from:aria-label="overflowAnnouncement"><template
         $value="format('+%s', overflowCount)"
       ></template></span>
   </div>

package/components/ui-avatar-group/ui-avatar-group.js

@@ -18,7 +18,7 @@ export default function controller(host) {
     });
     const authoredVisible = Math.min(avatars.length, visible);
     const suppliedTotal = Number(host.state.total);
-    const total = host.state.total === undefined || !Number.isFinite(suppliedTotal) ? avatars.length : Math.max(avatars.length, suppliedTotal);
+    const total = host.state.total == null || !Number.isFinite(suppliedTotal) ? avatars.length : Math.max(avatars.length, suppliedTotal);
     const count = Math.max(0, total - authoredVisible);
     host.state.overflowCount = count;
     host.state.overflowAnnouncement = String(host.state.overflowLabel || "{count} more").replaceAll("{count}", String(count));

package/components/ui-badge/ui-badge.html

@@ -1,13 +1,13 @@
 <template component="ui-badge">
   <defs>
-    <prop name="variant" type="solid | subtle | outline" default="subtle"
+    <prop name="variant" type="keyword" values="solid, subtle, outline" default="subtle"
     >Emphasis. subtle sets toned text over a soft wash; solid fills with the tone and uses contrasting text; outline keeps the surface with a toned edge.
       Neutral looks the same in solid and subtle.</prop>
-    <prop name="tone" type="neutral | accent | info | success | warning | danger" default="neutral"
+    <prop name="tone" type="keyword" values="neutral, accent, info, success, warning, danger" default="neutral"
     >Which colour the badge speaks in. neutral is a quiet grey for plain labels; accent draws the eye in the accent colour; info, success, warning, and danger
       mark a status, so match the tone to what the badge says. For a category rather than a status, set the --ui-badge-color hook on the badge instead: any CSS
       colour, which overrides the tone.</prop>
-    <prop name="shape" type="pill | tag" default="pill"
+    <prop name="shape" type="keyword" values="pill, tag" default="pill"
     >Silhouette. pill is rounded at both ends; tag is a label: flat at the start and coming to a point at the end, for a tag or a chosen chip.</prop>
   </defs>
   <span><slot></slot></span>

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

@@ -3,7 +3,7 @@
     <prop name="current" type="boolean" default="false"
     >Marks the step as the view you are on: it is plain text with aria-current="page". Every other step holds a link.</prop>
   </defs>
-  <li :aria-current="{ true: 'page', false: null }[format('%s', current)]">
+  <li from:aria-current="{ true: 'page', false: null }[format('%s', current)]">
     <span class="separator" aria-hidden="true"><ui-icon name="chevron-right"></ui-icon></span>
     <span class="content"><slot></slot></span>
   </li>

package/components/ui-breadcrumbs/ui-breadcrumbs.html

@@ -2,7 +2,7 @@
   <defs>
     <prop name="label" type="string" default="Breadcrumb">The navigation landmark's accessible name.</prop>
   </defs>
-  <nav :aria-label="label"><ol role="list"><slot></slot></ol></nav>
+  <nav from:aria-label="label"><ol role="list"><slot></slot></ol></nav>
   <style>
     /* Where a view sits: a trail of ui-breadcrumb-item, from the top down to the current view. It wraps
        rather than scrolls, so every step stays reachable. */

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

@@ -1,13 +1,13 @@
 <link rel="component" href="../ui-spinner/ui-spinner.html">
 <template component="ui-button" controller="./ui-button.js">
   <defs>
-    <prop name="variant" type="outline | solid | danger | ghost | link" default="outline"
+    <prop name="variant" type="keyword" values="outline, solid, danger, ghost, link" default="outline"
     >Emphasis: how loudly the button asks. solid fills with its tone, outline draws its tone at the edge over a wash of it, ghost carries only text until it is
       hovered, and link is an inline text action that reads as a link. danger is solid in the danger tone, kept for the call sites that name it.</prop>
-    <prop name="size" type="sm | md | lg" default="md"
+    <prop name="size" type="keyword" values="sm, md, lg" default="md"
     >Height, padding, and type size. sm is the small control height (2rem by default) with tighter padding and smaller text, md is the standard control height
       (2.5rem), and lg is taller (3rem) with roomier padding.</prop>
-    <prop name="tone" type="accent | neutral | danger | success | warning | info" default="accent"
+    <prop name="tone" type="keyword" values="accent, neutral, danger, success, warning, info" default="accent"
     >Which colour the button speaks in. It applies to every variant, so an outline, a ghost, and a solid in the same tone are the same action at three volumes:
       tone="danger" variant="outline" is a destructive secondary action. neutral is the quiet one, for a button that should not claim a colour.</prop>
     <prop name="disabled" type="boolean" default="false"
@@ -17,17 +17,18 @@
     >Keeps the action focusable and its label visible while work is in progress. It shows a decorative spinner, states aria-disabled and aria-busy, and prevents
       activation or form submission until cleared.</prop>
     <prop name="pending" type="boolean" default="false">Deprecated alias for loading.</prop>
-    <prop name="align" type="center | start" default="center"
+    <prop name="align" type="keyword" values="center, start" default="center"
     >Content alignment. start lays the content out like a list option: from the start edge, with start-aligned text.</prop>
     <prop name="stretch" type="boolean" default="false">Fills the inline size of its container.</prop>
-    <prop name="type" type="button | submit | reset" default="button"
+    <prop name="type" type="keyword" values="button, submit, reset" default="button"
     >The button's type, as on a native button. button by default, so it never submits a form by accident. A link has no type.</prop>
     <prop name="href" type="string"
     >The link's destination. Pair it with as="a" so the button renders as a real link that navigates. A disabled link drops its href and states
       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>
-    <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>
+    <prop name="as" type="keyword" values="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. -->
@@ -35,22 +36,22 @@
   <template $match>
     <a
       $when="as = 'a'"
-      :href="{ true: null, false: href }[format('%s', disabled or loading or pending)]"
-      :target="target"
-      :rel="rel"
-      :aria-disabled="{ true: 'true', false: null }[format('%s', disabled or loading or pending)]"
-      :aria-busy="loading or pending"
-      :tabindex="{ true: '0', false: null }[format('%s', (loading or pending) and not disabled)]"
+      from:href="{ true: null, false: href }[format('%s', disabled or loading or pending)]"
+      from:target="target"
+      from:rel="rel"
+      from:aria-disabled="{ true: 'true', false: null }[format('%s', disabled or loading or pending)]"
+      from:aria-busy="loading or pending"
+      from:tabindex="{ true: '0', false: null }[format('%s', (loading or pending) and not disabled)]"
     >
       <span $if="loading or pending" class="spinner-wrap"><ui-spinner size="sm"></ui-spinner></span>
       <slot></slot>
     </a>
     <button
       $else
-      :type="type"
-      :disabled="disabled"
-      :aria-disabled="{ true: 'true', false: null }[format('%s', loading or pending)]"
-      :aria-busy="loading or pending"
+      from:type="type"
+      from:disabled="disabled"
+      from:aria-disabled="{ true: 'true', false: null }[format('%s', loading or pending)]"
+      from:aria-busy="loading or pending"
     >
       <span $if="loading or pending" class="spinner-wrap"><ui-spinner size="sm"></ui-spinner></span>
       <slot></slot>

package/components/ui-callout/ui-callout.html

@@ -1,6 +1,6 @@
 <template component="ui-callout">
   <defs>
-    <prop name="tone" type="info | neutral | note | warning | success | danger" default="info"
+    <prop name="tone" type="keyword" values="info, neutral, note, warning, success, danger" default="info"
     >Which kind of message the callout carries, shown by its icon and colour: info (the default) for information, neutral for a muted aside, warning for a
       caution, success for a confirmation, and danger for a harmful consequence. note remains as an alias for neutral.</prop>
   </defs>

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

@@ -1,12 +1,13 @@
 <template component="ui-card">
   <defs>
-    <prop name="variant" type="outlined | subtle | elevated" default="outlined"
+    <prop name="variant" type="keyword" values="outlined, subtle, elevated" default="outlined"
     >The surface. outlined is a bordered panel on the page; subtle is a quiet filled one with no border, for supporting details set apart from the flow;
       elevated floats above the page with a shadow, for a view's one card, such as sign-in.</prop>
-    <prop name="padding" type="sm | md | lg" default="md"
+    <prop name="padding" type="keyword" values="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 adds a soft danger surface and a strong leading edge for consequential content.</prop>
-    <prop name="as" type="div | section | article | aside" default="div"
+    <prop name="tone" type="keyword" values="neutral, danger" default="neutral"
+    >danger adds a soft danger surface and a strong leading edge for consequential content.</prop>
+    <prop name="as" type="keyword" values="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>
   <template $match>

package/components/ui-checkbox/ui-checkbox.html

@@ -15,12 +15,16 @@
     <prop name="value" type="string" default="on"
     >The value a form submits under name while the checkbox is checked, also reported in the change event's detail so one handler can tell checkboxes apart. on
       by default, as on a native checkbox.</prop>
-    <prop name="size" type="sm | md | lg" default="md"
+    <prop name="size" type="keyword" values="sm, md, lg" default="md"
     >Aligns the checkbox with fields and buttons of the same size. It keeps its box size; the label takes that size's field type size and its first line centres
       in that control height (sm 2rem, lg 3rem by default), so in a row of inputs, selects, and buttons of one size it shares their height and their text
       baseline. Under a coarse pointer an sm row grows to the 44px touch minimum, as they do. md is the standard layout.</prop>
     <state name="internalChecked" :value="false"></state>
-    <event name="change" type="object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })"></event>
+    <event name="change" type="object">
+      <prop name="checked" required type="boolean"></prop>
+      <prop name="value" required type="string"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
   </defs>
   <label>
     <input
@@ -28,11 +32,11 @@
       $ref="input"
       .checked="internalChecked"
       .indeterminate="indeterminate"
-      :disabled="disabled"
-      :aria-invalid="invalid"
-      :required="required"
-      :name="name"
-      :value="value"
+      from:disabled="disabled"
+      from:aria-invalid="invalid"
+      from:required="required"
+      from:name="name"
+      from:value="value"
     >
     <span class="text">
       <span class="label"><slot></slot></span>

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

@@ -1,15 +1,15 @@
 <template component="ui-cluster">
   <defs>
-    <prop name="gap" type="xs | s | m | l | xl"
+    <prop name="gap" type="keyword" values="xs, s, m, l, xl"
     >Space between items, on the spacing scale: xs is 0.5rem, s 0.75rem (also the default), m 1rem, l 1.5rem, and xl 2rem. The --ui-cluster-gap custom property,
       set on the cluster itself, overrides it; set on an ancestor, it does nothing.</prop>
-    <prop name="align" type="start | center | end | stretch"
+    <prop name="align" type="keyword" values="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"
+    <prop name="justify" type="keyword" values="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>
-    <prop name="wrap" type="wrap | nowrap"
+    <prop name="wrap" type="keyword" values="wrap, nowrap"
     >Whether items move onto a new row when they run out of space: wrap (the default) or nowrap, which keeps them on one row at their own sizes. Use nowrap for
       a small group that must read as one unit, such as a meter and its value in a table cell, so the cell grows to fit it; a whole row of actions should keep
       wrapping so it fits narrow screens.</prop>