@threadlabs/looma 0.10.11 → 0.11.0

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

@@ -0,0 +1,146 @@
+<template component="ui-list-item">
+  <defs>
+    <prop name="variant" type="row | card" default="row"
+    >How the item is drawn. A row is flat and takes a hover surface when it is a link, for items read down a list. A card sits on a raised, bordered surface,
+      for items set in a grid (a List with layout="grid"). Both have the same parts: leading, title, description, and trailing.</prop>
+    <prop name="current" type="boolean" default="false"
+    >Marks the item as the current one, such as the site you are in: it takes the selected surface and aria-current="true", which assistive technology
+      announces. Set it on one item at a time.</prop>
+  </defs>
+  <li :aria-current="current">
+    <span class="leading"><slot name="leading"></slot></span>
+    <span class="content">
+      <span class="title"><slot></slot></span>
+      <span class="description"><slot name="description"></slot></span>
+    </span>
+    <span class="trailing"><slot name="trailing"></slot></span>
+  </li>
+  <style>
+    /* One entry in a list: something to recognise (leading, usually an icon), its name (the default
+       slot), one line about it (description), and what it offers (trailing, such as a button or a
+       badge). The title and description are one line each and end in an ellipsis, so every item in a
+       list has the same height.
+
+       A link in the title is the whole item: its hit area stretches over the item, so the icon and the
+       padding follow it too, and the item takes the link's focus ring. The link stays a real link, so
+       a router, a modified click, and "open in new tab" all work. Trailing controls sit above it and
+       stay their own. */
+    :host {
+      position: relative;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      gap: var(--ui-list-item-gap, var(--ui-space-3));
+      min-inline-size: 0;
+      min-block-size: var(--ui-control-size, 2.5rem);
+      padding-block: var(--ui-list-item-padding-block, var(--ui-space-2));
+      padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-3));
+      border-radius: var(--ui-radius-md);
+      color: var(--ui-text-primary);
+      transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), border-color var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    :host-state([variant="card"]) {
+      padding-block: var(--ui-list-item-padding-block, var(--ui-space-3));
+      padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-4));
+      border: 1px solid var(--ui-border-default);
+      border-radius: var(--ui-radius-lg);
+      background: var(--ui-surface-raised);
+    }
+
+    :host:has(.title a[href]:hover) {
+      background: var(--ui-surface-hover);
+    }
+
+    :host-state([variant="card"]):has(.title a[href]:hover) {
+      border-color: var(--ui-border-strong);
+    }
+
+    :host-state([current]) {
+      background: var(--ui-surface-hover);
+    }
+
+    :host:has(.title a[href]:focus-visible) {
+      box-shadow: 0 0 0 2px var(--ui-focus-ring);
+    }
+
+    .leading,
+    .trailing {
+      display: inline-flex;
+      flex: none;
+      align-items: center;
+      gap: var(--ui-space-2);
+    }
+
+    .leading {
+      color: var(--ui-text-muted);
+      font-size: var(--ui-list-item-icon-size, var(--ui-font-size-lg));
+    }
+
+    /* Trailing controls take their own clicks, above the title link's stretched hit area. */
+    .trailing {
+      position: relative;
+      z-index: 1;
+      color: var(--ui-text-muted);
+      font-size: var(--ui-font-size-sm);
+    }
+
+    .content {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      gap: var(--ui-space-0-5, 2px);
+      min-inline-size: 0;
+    }
+
+    .title,
+    .description {
+      display: block;
+      min-inline-size: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .title {
+      font-size: var(--ui-font-size-md);
+      font-weight: var(--ui-font-medium);
+      line-height: var(--ui-line-height-tight);
+    }
+
+    .description {
+      color: var(--ui-text-muted);
+      font-size: var(--ui-font-size-sm);
+      line-height: var(--ui-line-height-tight);
+    }
+
+    .title > :slotted(a) {
+      color: inherit;
+      text-decoration: none;
+    }
+
+    .title > :slotted(a:focus-visible) {
+      outline: none;
+      box-shadow: none;
+    }
+
+    .title > :slotted(a[href])::after {
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      content: "";
+    }
+
+    /* An unused region takes no space. */
+    .leading:empty,
+    .description:empty,
+    .trailing:empty {
+      display: none;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-menu/ui-menu.js

@@ -14,7 +14,7 @@ export default function controller(host) {
   const element = host.element;
   const document = element.ownerDocument;
   const overlayId = `ui-menu-${Math.random().toString(36).slice(2, 11)}`;
-  const items = () => Array.from(element.querySelectorAll('[data-component~="ui-menu-item"]'));
+  const items = () => Array.from(element.querySelectorAll('[role="menuitem"]'));
   let anchor = null;
   let surface = null;
   let lastFor;
@@ -77,7 +77,7 @@ export default function controller(host) {
     host.dispatch("close", { open: false, reason: "action", trigger });
     host.state.internalOpen = false;
   };
-  const onClick = (event) => select(event.target.closest?.('[data-component~="ui-menu-item"]'), triggerFor(event));
+  const onClick = (event) => select(event.target.closest?.('[role="menuitem"]'), triggerFor(event));
   const onKeydown = (event) => {
     if (event.key === "Escape") {
       event.preventDefault();
@@ -85,7 +85,7 @@ export default function controller(host) {
       return;
     }
     const enabled = items().filter((item) => !disabled(item));
-    const target = event.target.closest?.('[data-component~="ui-menu-item"]');
+    const target = event.target.closest?.('[role="menuitem"]');
     const index = target ? enabled.indexOf(target) : -1;
     if (["Enter", " "].includes(event.key)) {
       if (index >= 0) {

package/components/ui-page-header/ui-page-header.html

@@ -0,0 +1,97 @@
+<template component="ui-page-header">
+  <defs>
+    <prop name="align" type="start | center" default="start"
+    >Where the header sits. start runs along the page's start edge with actions at the end; center stacks everything centred, for a standalone card such as
+      sign-in.</prop>
+  </defs>
+  <header>
+    <span class="leading"><slot name="leading"></slot></span>
+    <span class="copy">
+      <span class="eyebrow"><slot name="eyebrow"></slot></span>
+      <h1 class="title"><slot></slot></h1>
+      <span class="description"><slot name="description"></slot></span>
+    </span>
+    <span class="actions"><slot name="actions"></slot></span>
+  </header>
+  <style>
+    /* The top of a view: its title (the page's one h1), with an optional icon or mark before it, a
+       short eyebrow above it, a line or two of description under it, and the view's own actions at
+       the end. Every view titles itself the same way, at the same size. */
+    :host {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--ui-space-3) var(--ui-space-4);
+      min-inline-size: 0;
+    }
+
+    .leading {
+      display: inline-flex;
+      flex: none;
+      align-self: center;
+      color: var(--ui-text-muted);
+      font-size: var(--ui-font-size-2xl);
+    }
+
+    .copy {
+      display: flex;
+      flex: 1 1 16rem;
+      flex-direction: column;
+      gap: var(--ui-space-1);
+      min-inline-size: 0;
+    }
+
+    .eyebrow {
+      color: var(--ui-text-muted);
+      font-size: var(--ui-font-size-xs);
+      font-weight: var(--ui-font-semibold);
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+    }
+
+    .title {
+      margin: 0;
+      color: var(--ui-text-primary);
+      font-size: var(--ui-font-size-2xl);
+      font-weight: var(--ui-font-bold, 700);
+      line-height: var(--ui-line-height-tight);
+      overflow-wrap: anywhere;
+    }
+
+    .description {
+      color: var(--ui-text-secondary);
+      font-size: var(--ui-font-size-md);
+      line-height: var(--ui-line-height);
+    }
+
+    .actions {
+      display: inline-flex;
+      flex: none;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--ui-space-2);
+    }
+
+    :host-state([align="center"]) {
+      flex-direction: column;
+      text-align: center;
+    }
+
+    :host-state([align="center"]) .copy {
+      align-items: center;
+      flex-basis: auto;
+    }
+
+    .leading:empty,
+    .eyebrow:empty,
+    .description:empty,
+    .actions:empty {
+      display: none;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-radio/ui-radio.js

@@ -23,7 +23,7 @@ export default function controller(host) {
   input.addEventListener("change", onChange);
   const stopReset = afterFormReset(input, () => {
     // Inside a ui-radio-group the group's value decides, whichever reset runs first.
-    if (input.closest('[data-component~="ui-radio-group"]')) return;
+    if (input.closest('[role="radiogroup"]')) return;
     host.state.internalChecked = Boolean(external);
     input.checked = Boolean(external);
   });

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

@@ -10,7 +10,7 @@ export default function controller(host) {
   const element = host.element;
   const name = String(host.state.name || `ui-radio-group-${++groups}`);
   const [trigger, stopTracking] = trackTrigger(host);
-  const inputs = () => Array.from(element.querySelectorAll('[data-component~="ui-radio"] input[type="radio"]'));
+  const inputs = () => Array.from(element.querySelectorAll('input[type="radio"]'));
   let external = host.state.value;
   // A radio's own required survives until the group's required changes, since either one makes the
   // whole name group required.

package/components/ui-section/ui-section.html

@@ -0,0 +1,108 @@
+<template component="ui-section">
+  <defs>
+    <prop name="heading" type="string" default=""
+    >The section's heading, an h2. Leave it empty for a section with no visible heading, and name the section with aria-label.</prop>
+    <prop name="variant" type="plain | card | divided" default="plain"
+    >How the section is set apart. plain is a heading and content in the flow of the page; card sits it on a bordered surface, for a settings group; divided
+      rules it off from the section before it, for a long form.</prop>
+    <prop name="tone" type="neutral | danger" default="neutral"
+    >danger marks a section of destructive actions (a danger zone): its heading and a card's border take the danger colour.</prop>
+  </defs>
+  <section>
+    <span class="head">
+      <span class="copy">
+        <h2 class="heading" :hidden="not heading"><template $value="heading"></template></h2>
+        <span class="description"><slot name="description"></slot></span>
+      </span>
+      <span class="actions"><slot name="actions"></slot></span>
+    </span>
+    <span class="body"><slot></slot></span>
+  </section>
+  <style>
+    /* A part of a view: a heading, an optional line under it, actions for the whole section at its
+       end, and the content. Sections space themselves out through the Stack around them. */
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ui-space-4);
+      min-inline-size: 0;
+    }
+
+    :host-state([variant="card"]) {
+      padding: var(--ui-space-5);
+      border: 1px solid var(--ui-border-default);
+      border-radius: var(--ui-radius-lg);
+      background: var(--ui-surface-raised);
+    }
+
+    :host-state([variant="divided"]) {
+      padding-block-start: var(--ui-space-6);
+      border-block-start: 1px solid var(--ui-border-default);
+    }
+
+    :host-state([variant="card"][tone="danger"]) {
+      border-color: var(--ui-danger);
+    }
+
+    .head {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: var(--ui-space-2) var(--ui-space-4);
+    }
+
+    .copy {
+      display: flex;
+      flex: 1 1 16rem;
+      flex-direction: column;
+      gap: var(--ui-space-1);
+      min-inline-size: 0;
+    }
+
+    .heading {
+      margin: 0;
+      color: var(--ui-text-primary);
+      font-size: var(--ui-font-size-lg);
+      font-weight: var(--ui-font-semibold);
+      line-height: var(--ui-line-height-tight);
+    }
+
+    :host-state([tone="danger"]) .heading {
+      color: var(--ui-danger);
+    }
+
+    .description {
+      color: var(--ui-text-secondary);
+      font-size: var(--ui-font-size-sm);
+      line-height: var(--ui-line-height);
+    }
+
+    .actions {
+      display: inline-flex;
+      flex-wrap: wrap;
+      gap: var(--ui-space-2);
+    }
+
+    .body {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ui-space-4);
+      min-inline-size: 0;
+    }
+
+    .description:empty,
+    .actions:empty {
+      display: none;
+    }
+
+    .head:has(.heading[hidden]):has(.description:empty):has(.actions:empty) {
+      display: none;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-spinner/ui-spinner.html

@@ -0,0 +1,48 @@
+<template component="ui-spinner">
+  <defs>
+    <prop name="label" type="string" default=""
+    >What is loading, for assistive technology ("Loading pages"). With a label the spinner is a status that is announced; without one it is decoration, for a
+      spinner beside visible text that already says so.</prop>
+    <prop name="size" type="sm | md" default="md">sm fits inside a button or a line of small text; md sits beside body text.</prop>
+  </defs>
+  <span
+    :role="{ true: 'status', false: null }[format('%s', label != '')]"
+    :aria-label="{ true: label, false: null }[format('%s', label != '')]"
+    :aria-hidden="{ true: null, false: 'true' }[format('%s', label != '')]"
+  >
+    <ui-icon name="loader"></ui-icon>
+  </span>
+  <style>
+    /* Something is on its way. It turns in the current text colour; with reduced motion it holds still,
+       and the label (or the text beside it) still says what is happening. */
+    :host {
+      display: inline-flex;
+      flex: none;
+      color: currentColor;
+      font-size: var(--ui-font-size-lg);
+      line-height: 1;
+      animation: ui-spinner-turn 0.8s linear infinite;
+    }
+
+    :host-state([size="sm"]) {
+      font-size: var(--ui-font-size-md);
+    }
+
+    @keyframes ui-spinner-turn {
+      to {
+        transform: rotate(1turn);
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :host {
+        animation: none;
+      }
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-status-message/ui-status-message.html

@@ -0,0 +1,84 @@
+<template component="ui-status-message">
+  <defs>
+    <prop name="kind" type="empty | loading | error" default="empty"
+    >What the view is saying. empty: there is nothing here yet (announced politely); loading: it is on its way, with a spinner (announced politely); error: it
+      could not be shown, in the danger tone (announced at once).</prop>
+    <prop name="heading" type="string" default="">A short heading above the message, such as "No pages yet". Optional.</prop>
+    <prop name="layout" type="inline | panel | fill" default="inline"
+    >Where it sits. inline takes its place in the view's flow; panel sits it on a dashed surface, for an empty area in a page; fill centres it in all the space
+      it is given, for a whole view that is loading or failed.</prop>
+  </defs>
+  <div :role="{ true: 'alert', false: 'status' }[format('%s', kind = 'error')]">
+    <ui-spinner size="sm" :hidden="kind != 'loading'"></ui-spinner>
+    <span class="copy">
+      <strong class="heading" :hidden="not heading"><template $value="heading"></template></strong>
+      <span class="message"><slot></slot></span>
+    </span>
+    <span class="action"><slot name="action"></slot></span>
+  </div>
+  <style>
+    /* The one way a view says it is loading, has nothing yet, or failed, with an optional next step.
+       Every view says it the same way, in the same place, at the same size. */
+    :host {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--ui-space-2) var(--ui-space-4);
+      padding-block: var(--ui-space-4);
+      color: var(--ui-text-muted);
+      font-size: var(--ui-font-size-md);
+      line-height: var(--ui-line-height);
+    }
+
+    :host-state([kind="error"]) {
+      color: var(--ui-danger);
+    }
+
+    :host-state([layout="panel"]) {
+      padding: var(--ui-space-6);
+      border: 1px dashed var(--ui-border-default);
+      border-radius: var(--ui-radius-lg);
+    }
+
+    :host-state([layout="fill"]) {
+      flex: 1;
+      flex-direction: column;
+      justify-content: center;
+      min-block-size: 50vh;
+      text-align: center;
+    }
+
+    .copy {
+      display: flex;
+      flex: 1 1 12rem;
+      flex-direction: column;
+      gap: var(--ui-space-1);
+      min-inline-size: 0;
+    }
+
+    :host-state([layout="fill"]) .copy {
+      flex: none;
+      align-items: center;
+    }
+
+    .heading {
+      color: var(--ui-text-primary);
+      font-weight: var(--ui-font-semibold);
+    }
+
+    .action {
+      display: inline-flex;
+      flex-wrap: wrap;
+      gap: var(--ui-space-2);
+    }
+
+    .action:empty {
+      display: none;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

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

@@ -0,0 +1,96 @@
+<template component="ui-text">
+  <defs>
+    <prop name="size" type="inherit | xs | sm | md | lg" default="inherit"
+    >The step on the type scale. inherit (the default) keeps the size of the text around it; xs is for fine print, sm for supporting text such as help and
+      metadata, md is body text, and lg is a lead paragraph.</prop>
+    <prop name="tone" type="default | secondary | muted | accent | danger | success" default="default"
+    >The text's colour, by meaning. secondary is supporting prose such as a description; muted is quieter still, for metadata and hints; accent draws the eye;
+      danger states an error; success confirms one.</prop>
+    <prop name="weight" type="inherit | normal | medium | semibold" default="inherit"
+    >The weight. inherit keeps the surrounding weight; medium and semibold emphasise a name or a figure.</prop>
+    <prop name="variant" type="body | eyebrow | code" default="body"
+    >body is running text. eyebrow is a short, uppercase, tracked label that names what follows, such as a group of links; code sets a value to copy or read
+      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>
+  </defs>
+  <p as="p|span|div|small|strong|label"><slot></slot></p>
+  <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. */
+    :host {
+      margin: 0;
+      min-inline-size: 0;
+      color: var(--ui-text-primary);
+      text-align: start;
+    }
+
+    :host-state([size="xs"]) {
+      font-size: var(--ui-font-size-xs);
+      line-height: var(--ui-line-height);
+    }
+    :host-state([size="sm"]) {
+      font-size: var(--ui-font-size-sm);
+      line-height: var(--ui-line-height);
+    }
+    :host-state([size="md"]) {
+      font-size: var(--ui-font-size-md);
+      line-height: var(--ui-line-height);
+    }
+    :host-state([size="lg"]) {
+      font-size: var(--ui-font-size-lg);
+      line-height: var(--ui-line-height-relaxed);
+    }
+
+    :host-state([tone="secondary"]) {
+      color: var(--ui-text-secondary);
+    }
+    :host-state([tone="muted"]) {
+      color: var(--ui-text-muted);
+    }
+    :host-state([tone="accent"]) {
+      color: var(--ui-accent-active);
+    }
+    :host-state([tone="danger"]) {
+      color: var(--ui-danger);
+    }
+    :host-state([tone="success"]) {
+      color: var(--ui-success);
+    }
+
+    :host-state([weight="normal"]) {
+      font-weight: var(--ui-font-normal);
+    }
+    :host-state([weight="medium"]) {
+      font-weight: var(--ui-font-medium);
+    }
+    :host-state([weight="semibold"]) {
+      font-weight: var(--ui-font-semibold);
+    }
+
+    :host-state([variant="eyebrow"]) {
+      font-size: var(--ui-font-size-xs);
+      font-weight: var(--ui-font-semibold);
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+    }
+    :host-state([variant="code"]) {
+      font-family: var(--ui-font-family-mono);
+    }
+
+    :host-state([truncate]) {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    :host-state([align="center"]) {
+      text-align: center;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-tree/ui-tree.js

@@ -12,14 +12,14 @@ function itemId(item) {
 }
 
 function parentItem(item, tree) {
-  const parent = item.parentElement?.closest('[data-component~="ui-tree-item"]') ?? null;
+  const parent = item.parentElement?.closest('[role="treeitem"]') ?? null;
   return parent && tree.contains(parent) ? parent : null;
 }
 
 export default function controller(host) {
   const element = host.element;
   const document = element.ownerDocument;
-  const itemSelector = '[data-component~="ui-tree-item"]';
+  const itemSelector = '[role="treeitem"]';
   let source = null;
   let target = null;
   let position = null;

package/components/ui-tree-item/ui-tree-item.js

@@ -5,7 +5,7 @@ function triggerFor(event) {
 }
 
 function parentItem(element) {
-  return element.parentElement?.closest('[data-component~="ui-tree-item"]') ?? null;
+  return element.parentElement?.closest('[role="treeitem"]') ?? null;
 }
 
 /** Synchronizes an inferred tree hierarchy after nested component lowering. */
@@ -23,13 +23,13 @@ export default function controller(host) {
   // Touch use enlarges rows and hides drag handles (see the template's styles).
   trackInputModality(element.ownerDocument);
   const childItems = () => Array.from(children?.children ?? [])
-    .filter((child) => child.matches?.('[data-component~="ui-tree-item"]'));
+    .filter((child) => child.matches?.('[role="treeitem"]'));
   let lastExternalExpanded = Boolean(host.state.expanded);
   host.state.internalExpanded = lastExternalExpanded;
 
   const isContainer = () => Boolean(host.state.container) || childItems().length > 0;
   const updateLevel = () => {
-    const tree = element.closest('[data-component~="ui-tree"]');
+    const tree = element.closest('[role="tree"]');
     let ancestor = parentItem(element);
     let level = 1;
     while (ancestor && tree?.contains(ancestor)) {