@threadlabs/looma 0.10.12 → 0.11.0

package/components/shared/editor.js

@@ -4,32 +4,8 @@ export const backgrounds = [
   ["background-green", "Green", "#dcfce7"], ["background-red", "Red", "#fee2e2"],
 ];
 
-// Serialized from Looma's framework-neutral icon catalog. Keeping the icon nodes here lets the
-// migration controllers stay directly importable in a browser without introducing a bundler-only
-// package resolution step.
-export const icons = {
-  "align-left": [["path", { d: "M21 5H3" }], ["path", { d: "M15 12H3" }], ["path", { d: "M17 19H3" }]],
-  "align-center": [["path", { d: "M21 5H3" }], ["path", { d: "M17 12H7" }], ["path", { d: "M19 19H5" }]],
-  "align-right": [["path", { d: "M21 5H3" }], ["path", { d: "M21 12H9" }], ["path", { d: "M21 19H7" }]],
-  rows: [["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }], ["path", { d: "M21 9H3" }], ["path", { d: "M21 15H3" }]],
-  columns: [["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }], ["path", { d: "M9 3v18" }], ["path", { d: "M15 3v18" }]],
-  table: [["path", { d: "M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18" }]],
-  "chevron-down": [["path", { d: "m6 9 6 6 6-6" }]],
-  "panel-top": [["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }], ["path", { d: "M3 9h18" }]],
-  "panel-bottom": [["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }], ["path", { d: "M3 15h18" }]],
-  "panel-left": [["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }], ["path", { d: "M9 3v18" }]],
-  "panel-right": [["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }], ["path", { d: "M15 3v18" }]],
-  eraser: [["path", { d: "M21 21H8a2 2 0 0 1-1.42-.587l-3.994-3.999a2 2 0 0 1 0-2.828l10-10a2 2 0 0 1 2.829 0l5.999 6a2 2 0 0 1 0 2.828L12.834 21" }], ["path", { d: "m5.082 11.09 8.828 8.828" }]],
-  merge: [["path", { d: "m8 6 4-4 4 4" }], ["path", { d: "M12 2v10.3a4 4 0 0 1-1.172 2.872L4 22" }], ["path", { d: "m20 22-5-5" }]],
-  split: [["path", { d: "M16 3h5v5" }], ["path", { d: "M8 3H3v5" }], ["path", { d: "M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3" }], ["path", { d: "m15 9 6-6" }]],
-  trash: [["path", { d: "M10 11v6" }], ["path", { d: "M14 11v6" }], ["path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }], ["path", { d: "M3 6h18" }], ["path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }]],
-  plus: [["path", { d: "M5 12h14" }], ["path", { d: "M12 5v14" }]],
-  "grip-vertical": [["circle", { cx: "9", cy: "12", r: "1" }], ["circle", { cx: "9", cy: "5", r: "1" }], ["circle", { cx: "9", cy: "19", r: "1" }], ["circle", { cx: "15", cy: "12", r: "1" }], ["circle", { cx: "15", cy: "5", r: "1" }], ["circle", { cx: "15", cy: "19", r: "1" }]],
-  "grip-horizontal": [["circle", { cx: "12", cy: "9", r: "1" }], ["circle", { cx: "19", cy: "9", r: "1" }], ["circle", { cx: "5", cy: "9", r: "1" }], ["circle", { cx: "12", cy: "15", r: "1" }], ["circle", { cx: "19", cy: "15", r: "1" }], ["circle", { cx: "5", cy: "15", r: "1" }]],
-  "heading-1": [["path", { d: "M4 12h8" }], ["path", { d: "M4 18V6" }], ["path", { d: "M12 18V6" }], ["path", { d: "m17 12 3-2v8" }]],
-  pilcrow: [["path", { d: "M13 4v16" }], ["path", { d: "M17 4v16" }], ["path", { d: "M19 4H9.5a4.5 4.5 0 0 0 0 9H13" }]],
-  quote: [["path", { d: "M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z" }], ["path", { d: "M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z" }]],
-};
+// Looma's icon set as plain data, generated from LOOMA_ICONS (see shared/icons.js).
+export { icons } from "./icons.js";
 
 export function normalizeAnchor(value) {
   if (!value || typeof value !== "object") return null;

package/components/shared/icons.js

@@ -0,0 +1,53 @@
+// Generated by tools/scripts/generate-icon-catalog.mjs from LOOMA_ICONS. Do not edit.
+export const icons = {
+  "align-center": [["path",{"d":"M21 5H3"}],["path",{"d":"M17 12H7"}],["path",{"d":"M19 19H5"}]],
+  "align-left": [["path",{"d":"M21 5H3"}],["path",{"d":"M15 12H3"}],["path",{"d":"M17 19H3"}]],
+  "align-right": [["path",{"d":"M21 5H3"}],["path",{"d":"M21 12H9"}],["path",{"d":"M21 19H7"}]],
+  "arrow-left": [["path",{"d":"m12 19-7-7 7-7"}],["path",{"d":"M19 12H5"}]],
+  "bold": [["path",{"d":"M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"}]],
+  "braces": [["path",{"d":"M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1"}],["path",{"d":"M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1"}]],
+  "chevron-down": [["path",{"d":"m6 9 6 6 6-6"}]],
+  "chevron-left": [["path",{"d":"m15 18-6-6 6-6"}]],
+  "chevron-right": [["path",{"d":"m9 18 6-6-6-6"}]],
+  "circle-check": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"m9 12 2 2 4-4"}]],
+  "circle-x": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"m15 9-6 6"}],["path",{"d":"m9 9 6 6"}]],
+  "code-xml": [["path",{"d":"m18 16 4-4-4-4"}],["path",{"d":"m6 8-4 4 4 4"}],["path",{"d":"m14.5 4-5 16"}]],
+  "columns": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M9 3v18"}],["path",{"d":"M15 3v18"}]],
+  "ellipsis": [["circle",{"cx":"12","cy":"12","r":"1"}],["circle",{"cx":"19","cy":"12","r":"1"}],["circle",{"cx":"5","cy":"12","r":"1"}]],
+  "eraser": [["path",{"d":"M21 21H8a2 2 0 0 1-1.42-.587l-3.994-3.999a2 2 0 0 1 0-2.828l10-10a2 2 0 0 1 2.829 0l5.999 6a2 2 0 0 1 0 2.828L12.834 21"}],["path",{"d":"m5.082 11.09 8.828 8.828"}]],
+  "file-text": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M10 9H8"}],["path",{"d":"M16 13H8"}],["path",{"d":"M16 17H8"}]],
+  "folder": [["path",{"d":"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"}]],
+  "grip-horizontal": [["circle",{"cx":"12","cy":"9","r":"1"}],["circle",{"cx":"19","cy":"9","r":"1"}],["circle",{"cx":"5","cy":"9","r":"1"}],["circle",{"cx":"12","cy":"15","r":"1"}],["circle",{"cx":"19","cy":"15","r":"1"}],["circle",{"cx":"5","cy":"15","r":"1"}]],
+  "grip-vertical": [["circle",{"cx":"9","cy":"12","r":"1"}],["circle",{"cx":"9","cy":"5","r":"1"}],["circle",{"cx":"9","cy":"19","r":"1"}],["circle",{"cx":"15","cy":"12","r":"1"}],["circle",{"cx":"15","cy":"5","r":"1"}],["circle",{"cx":"15","cy":"19","r":"1"}]],
+  "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"}]],
+  "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"}]],
+  "italic": [["line",{"x1":"19","x2":"10","y1":"4","y2":"4"}],["line",{"x1":"14","x2":"5","y1":"20","y2":"20"}],["line",{"x1":"15","x2":"9","y1":"4","y2":"20"}]],
+  "list": [["path",{"d":"M3 5h.01"}],["path",{"d":"M3 12h.01"}],["path",{"d":"M3 19h.01"}],["path",{"d":"M8 5h13"}],["path",{"d":"M8 12h13"}],["path",{"d":"M8 19h13"}]],
+  "list-ordered": [["path",{"d":"M11 5h10"}],["path",{"d":"M11 12h10"}],["path",{"d":"M11 19h10"}],["path",{"d":"M4 4h1v5"}],["path",{"d":"M4 9h2"}],["path",{"d":"M6.5 20H3.4c0-1 2.6-1.925 2.6-3.5a1.5 1.5 0 0 0-2.6-1.02"}]],
+  "list-todo": [["path",{"d":"M13 5h8"}],["path",{"d":"M13 12h8"}],["path",{"d":"M13 19h8"}],["path",{"d":"m3 17 2 2 4-4"}],["rect",{"x":"3","y":"4","width":"6","height":"6","rx":"1"}]],
+  "loader": [["path",{"d":"M21 12a9 9 0 1 1-6.219-8.56"}]],
+  "merge": [["path",{"d":"m8 6 4-4 4 4"}],["path",{"d":"M12 2v10.3a4 4 0 0 1-1.172 2.872L4 22"}],["path",{"d":"m20 22-5-5"}]],
+  "minus": [["path",{"d":"M5 12h14"}]],
+  "notebook-pen": [["path",{"d":"M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4"}],["path",{"d":"M2 6h4"}],["path",{"d":"M2 10h4"}],["path",{"d":"M2 14h4"}],["path",{"d":"M2 18h4"}],["path",{"d":"M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"}]],
+  "paint-bucket": [["path",{"d":"m19 11-8-8-8.6 8.6a2 2 0 0 0 0 2.8l5.2 5.2c.8.8 2 .8 2.8 0L19 11Z"}],["path",{"d":"m5 2 5 5"}],["path",{"d":"M2 13h15"}],["path",{"d":"M22 20a2 2 0 1 1-4 0c0-1.6 1.7-2.4 2-4 .3 1.6 2 2.4 2 4Z"}]],
+  "panel-bottom": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M3 15h18"}]],
+  "panel-left": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M9 3v18"}]],
+  "panel-right": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M15 3v18"}]],
+  "panel-top": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M3 9h18"}]],
+  "pilcrow": [["path",{"d":"M13 4v16"}],["path",{"d":"M17 4v16"}],["path",{"d":"M19 4H9.5a4.5 4.5 0 0 0 0 9H13"}]],
+  "plus": [["path",{"d":"M5 12h14"}],["path",{"d":"M12 5v14"}]],
+  "quote": [["path",{"d":"M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"}],["path",{"d":"M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"}]],
+  "redo": [["path",{"d":"m15 14 5-5-5-5"}],["path",{"d":"M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13"}]],
+  "rows": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M21 9H3"}],["path",{"d":"M21 15H3"}]],
+  "split": [["path",{"d":"M16 3h5v5"}],["path",{"d":"M8 3H3v5"}],["path",{"d":"M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3"}],["path",{"d":"m15 9 6-6"}]],
+  "strikethrough": [["path",{"d":"M16 4H9a3 3 0 0 0-2.83 4"}],["path",{"d":"M14 12a4 4 0 0 1 0 8H6"}],["line",{"x1":"4","x2":"20","y1":"12","y2":"12"}]],
+  "table": [["path",{"d":"M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18"}]],
+  "trash": [["path",{"d":"M10 11v6"}],["path",{"d":"M14 11v6"}],["path",{"d":"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"}],["path",{"d":"M3 6h18"}],["path",{"d":"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"}]],
+  "triangle-alert": [["path",{"d":"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"}],["path",{"d":"M12 9v4"}],["path",{"d":"M12 17h.01"}]],
+  "underline": [["path",{"d":"M6 4v6a6 6 0 0 0 12 0V4"}],["line",{"x1":"4","x2":"20","y1":"20","y2":"20"}]],
+  "undo": [["path",{"d":"M9 14 4 9l5-5"}],["path",{"d":"M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"}]],
+};

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

@@ -15,10 +15,10 @@
   </div>
   <style>
     :host {
-      /* Avatars separate with a tight, crisp edge, matching Looma's 1px borders rather than the
-       * diffuse elevation overlays use. */
-      --_overlap-shadow: -2px 0 2px -1px rgba(0, 0, 0, 0.22);
-      --_edge-ring: 0 0 0 1px rgba(0, 0, 0, 0.08);
+      /* Each avatar is ringed in the surface colour, so where one overlaps the next it reads as a
+       * whole circle set on top, not a shape cut into the one beneath. */
+      --_overlap-shadow: 0 0 0 0 transparent;
+      --_edge-ring: 0 0 0 2px var(--ui-surface);
 
       display: flex;
       align-items: center;
@@ -29,7 +29,7 @@
     /* Overlap and the separating shadow are applied by the controller: slotted avatars are nested
      * component roots outside this style scope. */
     :slotted(*) {
-      margin-inline-start: -0.625rem;
+      margin-inline-start: -0.5rem;
       flex-shrink: 0;
       border-radius: 999px;
     }
@@ -39,7 +39,7 @@
     }
 
     .overflow {
-      margin-inline-start: -0.625rem;
+      margin-inline-start: -0.5rem;
       display: inline-flex;
       align-items: center;
       justify-content: center;

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

@@ -8,7 +8,7 @@ export default function controller(host) {
     const avatars = Array.from(element.children).filter((child) => child !== host.refs.overflow);
     avatars.forEach((avatar, index) => {
       avatar.style.display = index >= visible ? "none" : "";
-      avatar.style.marginInlineStart = index === 0 ? "0px" : "-0.625rem";
+      avatar.style.marginInlineStart = index === 0 ? "0px" : "-0.5rem";
       avatar.style.borderRadius = "999px";
       // Later avatars cast a crisp shadow back onto the one they overlap; the first overlaps nothing.
       avatar.style.boxShadow = index === 0

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

@@ -0,0 +1,60 @@
+<template component="ui-breadcrumb-item">
+  <defs>
+    <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)]">
+    <span class="separator" aria-hidden="true"><ui-icon name="chevron-right"></ui-icon></span>
+    <span class="content"><slot></slot></span>
+  </li>
+  <style>
+    /* One step in a ui-breadcrumbs trail: a link up to that place, or the current view. A chevron leads
+       every step but the first. An icon slotted before the name sits with it. */
+    :host {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--ui-space-2);
+      min-inline-size: 0;
+    }
+
+    .separator {
+      display: inline-flex;
+      color: var(--ui-text-muted);
+      font-size: var(--ui-font-size-xs);
+    }
+
+    :host:first-child .separator {
+      display: none;
+    }
+
+    .content {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--ui-space-1);
+      min-inline-size: 0;
+    }
+
+    .content > :slotted(a) {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--ui-space-1);
+      color: var(--ui-text-secondary);
+      text-decoration: none;
+    }
+
+    .content > :slotted(a:hover) {
+      color: var(--ui-text-primary);
+      text-decoration: underline;
+    }
+
+    :host-state([current]) .content {
+      color: var(--ui-text-primary);
+      font-weight: var(--ui-font-medium);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

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

@@ -0,0 +1,31 @@
+<template component="ui-breadcrumbs">
+  <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>
+  <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. */
+    :host {
+      display: block;
+      min-inline-size: 0;
+      color: var(--ui-text-muted);
+      font-size: var(--ui-font-size-sm);
+    }
+
+    ol {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--ui-space-1) var(--ui-space-2);
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

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

@@ -0,0 +1,55 @@
+<template component="ui-card">
+  <defs>
+    <prop name="variant" type="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"
+    >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>
+  </defs>
+  <div as="div|section|article|aside"><slot></slot></div>
+  <style>
+    /* A surface that groups content. Its children stack with even space between them, so a card
+       needs no layout of its own. */
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ui-space-4);
+      box-sizing: border-box;
+      min-inline-size: 0;
+      padding: var(--ui-space-5);
+      border: 1px solid var(--ui-border-default);
+      border-radius: var(--ui-radius-lg);
+      background: var(--ui-surface-raised);
+      color: var(--ui-text-primary);
+    }
+
+    :host-state([padding="sm"]) {
+      gap: var(--ui-space-2);
+      padding: var(--ui-space-3);
+    }
+
+    :host-state([padding="lg"]) {
+      padding: var(--ui-space-6);
+    }
+
+    :host-state([variant="subtle"]) {
+      border-color: transparent;
+      background: var(--ui-surface-muted);
+    }
+
+    :host-state([variant="elevated"]) {
+      border-color: var(--ui-border-subtle);
+      box-shadow: var(--ui-shadow-lg);
+    }
+
+    :host-state([tone="danger"]) {
+      border-color: var(--ui-danger);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-combobox/ui-combobox.js

@@ -415,8 +415,8 @@ export default function controller(host) {
   };
   const onCompositionstart = (event) => { if (event.target === input) composing = true; };
   const onCompositionend = (event) => { if (event.target === input) { composing = false; onInput(new InputEvent("input")); } };
-  const onTooltipOpen = (event) => { if (event.target.closest?.('[data-component~="ui-tooltip"]')) host.state.helpOpen = true; };
-  const onTooltipClose = (event) => { if (event.target.closest?.('[data-component~="ui-tooltip"]')) host.state.helpOpen = false; };
+  const onTooltipOpen = (event) => { if (event.target.closest?.('[role="tooltip"]')) host.state.helpOpen = true; };
+  const onTooltipClose = (event) => { if (event.target.closest?.('[role="tooltip"]')) host.state.helpOpen = false; };
 
   // The selection the props describe: where the combobox starts, and where a form reset returns it.
   const applyDefaults = () => {

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

@@ -17,7 +17,7 @@ export default function controller(host) {
   let lastOpenProp = Boolean(host.state.open);
   host.state.internalOpen = lastOpenProp;
 
-  const items = () => Array.from(element.querySelectorAll('[data-component~="ui-menu-item"]')).filter((item) => !disabled(item));
+  const items = () => Array.from(element.querySelectorAll('[role="menuitem"]')).filter((item) => !disabled(item));
   const focusFirst = () => requestAnimationFrame(() => items()[0]?.focus());
   const targetEvents = { contextmenu: onContextMenu, keydown: onTargetKeydown, pointerdown: onPointerdown, pointerup: endPress, pointercancel: endPress };
   const detach = () => {
@@ -107,7 +107,7 @@ export default function controller(host) {
       event.preventDefault();
       requestTopOverlayClose(document, "escape", "keyboard");
     } else if (["Enter", " "].includes(event.key)) {
-      const item = event.target.closest?.('[data-component~="ui-menu-item"]');
+      const item = event.target.closest?.('[role="menuitem"]');
       if (!item || disabled(item)) return;
       event.preventDefault();
       host.dispatch("select", { value: item.getAttribute("data-value") ?? item.getAttribute("value") ?? "", trigger: "keyboard" });
@@ -116,7 +116,7 @@ export default function controller(host) {
       const enabled = items();
       if (!enabled.length) return;
       event.preventDefault();
-      const index = enabled.indexOf(event.target.closest?.('[data-component~="ui-menu-item"]'));
+      const index = enabled.indexOf(event.target.closest?.('[role="menuitem"]'));
       const next = event.key === "ArrowDown"
         ? (index < 0 ? 0 : Math.min(index + 1, enabled.length - 1))
         : (index <= 0 ? enabled.length - 1 : index - 1);
@@ -124,7 +124,7 @@ export default function controller(host) {
     }
   };
   const onClick = (event) => {
-    const item = event.target.closest?.('[data-component~="ui-menu-item"]');
+    const item = event.target.closest?.('[role="menuitem"]');
     if (!item || disabled(item)) return;
     host.dispatch("select", { value: item.getAttribute("data-value") ?? item.getAttribute("value") ?? "", trigger: "pointer" });
     close("action", "pointer");

package/components/ui-cover/ui-cover.html

@@ -0,0 +1,36 @@
+<template component="ui-cover">
+  <defs>
+    <prop name="size" type="screen | fill" default="screen"
+    >How tall the cover is. screen is at least the viewport's height, for a view that is one centred card, such as sign-in; fill takes the space its parent
+      gives it.</prop>
+  </defs>
+  <div><slot></slot></div>
+  <style>
+    /* A layout primitive that centres its content in the space, both ways, with room around it: the
+       frame for a view that is one card or one message. */
+    :host {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: var(--ui-space-6);
+      box-sizing: border-box;
+      min-block-size: 100dvh;
+      padding: var(--ui-space-6) var(--ui-space-4);
+    }
+
+    :host-state([size="fill"]) {
+      flex: 1;
+      min-block-size: 100%;
+    }
+
+    :host > :slotted(*) {
+      max-inline-size: 100%;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

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

@@ -0,0 +1,46 @@
+<template component="ui-description-item">
+  <defs>
+    <prop name="term" type="string" default="">What the value is, such as "Invited by". The value is the item's content.</prop>
+  </defs>
+  <div>
+    <dt><template $value="term"></template></dt>
+    <dd><slot></slot></dd>
+  </div>
+  <style>
+    /* One term and its value in a ui-description-list, laid out by the list's layout. */
+    :host {
+      display: var(--_ui-description-display, grid);
+      grid-column: var(--_ui-description-column, 1 / -1);
+      grid-template-columns: subgrid;
+      flex-direction: column;
+      align-items: var(--_ui-description-align, baseline);
+      gap: var(--ui-space-1) var(--ui-space-6);
+      min-inline-size: 0;
+      padding: var(--_ui-description-padding, 0);
+      border-width: var(--_ui-description-border-width, 0);
+      border-style: solid;
+      border-color: var(--ui-border-default);
+      border-radius: var(--ui-radius-md);
+      font-size: var(--ui-font-size-sm);
+    }
+
+    dt {
+      color: var(--ui-text-muted);
+    }
+
+    dd {
+      margin: 0;
+      min-inline-size: 0;
+      color: var(--ui-text-primary);
+      font-weight: var(--ui-font-medium);
+      font-size: var(--_ui-description-value-size, inherit);
+      text-align: start;
+      overflow-wrap: anywhere;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

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

@@ -0,0 +1,37 @@
+<template component="ui-description-list">
+  <defs>
+    <prop name="layout" type="rows | tiles" default="rows"
+    >rows sets each term beside its value, one per line, for a short summary; tiles sets each pair on its own bordered tile in a grid, term above value, for
+      figures and facts to scan.</prop>
+  </defs>
+  <dl><slot></slot></dl>
+  <style>
+    /* Named values: a term and what it is, for each item (ui-description-item). */
+    /* Rows line every term up in one column and every value in the next, through subgrid. */
+    :host {
+      display: grid;
+      grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
+      gap: var(--ui-space-2) var(--ui-space-6);
+      min-inline-size: 0;
+      margin: 0;
+    }
+
+    /* Tiles pass their shape to the items through private properties, which cross into each item. */
+    :host-state([layout="tiles"]) {
+      --_ui-description-display: flex;
+      --_ui-description-column: auto;
+      --_ui-description-align: flex-start;
+      --_ui-description-value-size: var(--ui-font-size-lg);
+      --_ui-description-padding: var(--ui-space-3);
+      --_ui-description-border-width: 1px;
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
+      gap: var(--ui-space-3);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-icon/ui-icon.js

@@ -1,4 +1,4 @@
-import { icons } from "../shared/editor.js";
+import { icons } from "../shared/icons.js";
 
 // The icon's shapes, from Looma's icon set, for the template to draw.
 export default function controller(host) {

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.