@threadlabs/looma 0.14.0 → 0.14.1

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

@@ -1,32 +1,77 @@
 <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>
+    <prop name="layout" type="rows | stacked | grid | tiles" default="rows"
+    >rows sets each term beside its value, one per line, for a short summary; stacked sets every term above its value, one pair per line, for a narrow space;
+      grid sets the pairs, term above value, in as many columns as fit, for facts to scan across; tiles sets each pair on its own bordered tile in a grid, for
+      figures to compare.</prop>
+    <prop name="columns" type="'2' | '3' | '4'"
+    >The most columns grid and tiles set on a wide list; a narrow list still drops to fewer. Left unset, they fit as many as the width allows.</prop>
+    <prop name="density" type="comfortable | compact" default="comfortable"
+    >How much room each pair takes. comfortable spaces the pairs apart to read; compact sets them close together, for facts inside other content such as a card
+      or a table's detail row.</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 {
+      --_gap: var(--ui-space-2);
+      --_gap-compact: var(--ui-space-1);
+      --_column-gap: var(--ui-space-6);
+      --_min: 10rem;
+      --_track: var(--_min);
+      --_tile-padding: var(--ui-space-3);
       display: grid;
       grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
-      gap: var(--ui-space-2) var(--ui-space-6);
+      gap: var(--_gap) var(--_column-gap);
       min-inline-size: 0;
       margin: 0;
     }
 
-    /* Tiles pass their shape to the items through private properties, which cross into each item. */
+    /* Stacked, grid, and tiles set each term above its value, passing the shape to the items through
+       private properties, which cross into each item. */
+    :host-state([layout="stacked"]),
+    :host-state([layout="grid"]),
     :host-state([layout="tiles"]) {
       --_ui-description-display: flex;
       --_ui-description-column: auto;
+      --_ui-description-align: stretch;
+      --_gap: var(--ui-space-4);
+      --_gap-compact: var(--ui-space-2);
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    /* A column is at least --_min wide; with columns set, at least its share of the width, so no more
+       than that many fit. */
+    :host-state([layout="grid"]),
+    :host-state([layout="tiles"]) {
+      grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--_track)), 1fr));
+    }
+
+    :host-state([layout="tiles"]) {
       --_ui-description-align: flex-start;
       --_ui-description-value-size: var(--ui-font-size-lg);
-      --_ui-description-padding: var(--ui-space-3);
+      --_ui-description-padding: var(--_tile-padding);
       --_ui-description-border-width: 1px;
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
-      gap: var(--ui-space-3);
+      --_gap: var(--ui-space-3);
+      --_gap-compact: var(--ui-space-2);
+      --_column-gap: var(--_gap);
+    }
+
+    :host-state([columns="2"]) {
+      --_track: max(var(--_min), (100% - var(--_column-gap)) / 2);
+    }
+    :host-state([columns="3"]) {
+      --_track: max(var(--_min), (100% - 2 * var(--_column-gap)) / 3);
+    }
+    :host-state([columns="4"]) {
+      --_track: max(var(--_min), (100% - 3 * var(--_column-gap)) / 4);
+    }
+
+    /* Compact takes each layout's closer spacing. */
+    :host-state([density="compact"]) {
+      --_gap: var(--_gap-compact);
+      --_tile-padding: var(--ui-space-2);
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */

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

@@ -0,0 +1,131 @@
+<template component="ui-table" controller="./ui-table.js">
+  <defs>
+    <prop name="density" type="comfortable | compact" default="comfortable"
+    >How tall each row is. Every row is at least one control tall, so a row holding a control lines up with the rows around it. comfortable fits a control of
+      the standard height (2.5rem), for tables read or edited at a glance; compact fits a small one (2rem), such as a Checkbox or a Button with size="sm", for
+      long tables to scan.</prop>
+    <prop name="stickyHeader" type="boolean" default="false"
+    >Keeps the header row in view while the rows scroll beneath it. The table scrolls inside its own box, so this needs a bounded height, such as a table that
+      fills a fixed-height panel.</prop>
+  </defs>
+  <div><slot></slot></div>
+  <style>
+    /* Styles an authored <table> (caption, thead, tbody, th scope) without replacing it: the table is
+       meaningful before JavaScript, and a screen reader reads it as a table. The root scrolls a table
+       wider than it, or taller than a bounded height; while it does, the controller makes the root a named, focusable region so a
+       keyboard can scroll it. A cell's data-ui-align (start, center, or end; start by default) sets its
+       content along the row, such as end for a column of figures. */
+    :host {
+      --_pad-block: var(--ui-space-1);
+      --_pad-inline: var(--ui-space-3);
+      --_row-size: var(--ui-control-size);
+      display: block;
+      box-sizing: border-box;
+      max-inline-size: 100%;
+      min-inline-size: 0;
+      min-block-size: 0;
+      overflow: auto;
+      overscroll-behavior-inline: contain;
+      /* The sideways scroll fade every Looma scroller uses (see ui-scroll-area). Only the inline edges
+         fade, so a sticky header never fades. */
+      --_ui-scroll-fade-direction: to right;
+      --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
+      mask-image: linear-gradient(
+        var(--_ui-scroll-fade-direction),
+        transparent,
+        #000 var(--_ui-scroll-fade-start),
+        #000 calc(100% - var(--_ui-scroll-fade-end)),
+        transparent
+      );
+      animation: ui-scroll-fade-start linear, ui-scroll-fade-start-hold linear, ui-scroll-fade-end-hold linear, ui-scroll-fade-end linear;
+      animation-timeline: scroll(self inline);
+      animation-range:
+        0 var(--_ui-scroll-fade-size),
+        var(--_ui-scroll-fade-size) calc(100% + 1px),
+        -1px calc(100% - var(--_ui-scroll-fade-size)),
+        calc(100% - var(--_ui-scroll-fade-size)) 100%;
+    }
+
+    :host:dir(rtl) {
+      --_ui-scroll-fade-direction: to left;
+    }
+
+    :host:focus-visible {
+      outline: 2px solid var(--ui-focus-ring);
+      outline-offset: -2px;
+    }
+
+    :host-state([density="compact"]) {
+      --_pad-block: var(--ui-space-0-5);
+      --_pad-inline: var(--ui-space-2);
+      --_row-size: var(--ui-control-size-sm);
+    }
+
+    /* Separate borders stay on their cells when a sticky header scrolls; collapsed ones stay behind. */
+    :slotted(table) {
+      inline-size: 100%;
+      border-collapse: separate;
+      border-spacing: 0;
+      color: var(--ui-text-primary);
+      font-size: var(--ui-font-size-sm);
+      line-height: var(--ui-line-height);
+      font-variant-numeric: tabular-nums;
+    }
+
+    :slotted(caption) {
+      padding-block-end: var(--ui-space-2);
+      color: var(--ui-text-secondary);
+      font-weight: var(--ui-font-medium);
+      text-align: start;
+    }
+
+    /* Every row is at least one control tall, so a row holding a checkbox, select, or input keeps the
+       rhythm of the rows around it. A cell's height is its minimum. */
+    :slotted(th),
+    :slotted(td) {
+      block-size: var(--_row-size);
+      padding: var(--_pad-block) var(--_pad-inline);
+      border-block-end: 1px solid var(--ui-border-subtle);
+      text-align: start;
+      vertical-align: middle;
+    }
+
+    :slotted(thead th) {
+      block-size: auto;
+      padding-block: var(--ui-space-2);
+      border-block-end-color: var(--ui-border-default);
+      background: var(--ui-surface);
+      color: var(--ui-text-muted);
+      font-weight: var(--ui-font-medium);
+      white-space: nowrap;
+      vertical-align: bottom;
+    }
+
+    :slotted(tbody th) {
+      font-weight: var(--ui-font-medium);
+    }
+
+    :slotted(tbody tr:last-child > *) {
+      border-block-end-width: 0;
+    }
+
+    :slotted([data-ui-align="center"]) {
+      text-align: center;
+    }
+
+    :slotted([data-ui-align="end"]) {
+      text-align: end;
+    }
+
+    :host-state([stickyHeader]) :slotted(thead th) {
+      position: sticky;
+      inset-block-start: 0;
+      z-index: 1;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-table/ui-table.js

@@ -0,0 +1,55 @@
+// While the table is wider than the root, or taller than a root of bounded height, the root scrolls
+// it: it becomes a region a keyboard can focus and scroll with the arrow keys, named by the table's caption unless the author named it. When
+// the table fits, the root is plain again, so it is not an empty stop in the tab order.
+let captions = 0;
+
+export default function controller(host) {
+  const element = host.element;
+  const authored = element.hasAttribute("tabindex") || element.hasAttribute("role");
+  if (authored) return undefined;
+
+  // What this controller set, so a table moved or re-inserted starts plain and is judged again.
+  let region = false;
+  let labelled = false;
+  const plain = () => {
+    if (region) {
+      element.removeAttribute("role");
+      element.removeAttribute("tabindex");
+    }
+    if (labelled) element.removeAttribute("aria-labelledby");
+    region = labelled = false;
+  };
+  const update = () => {
+    const scrolls = element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight;
+    if (!scrolls) return plain();
+    element.setAttribute("role", "region");
+    element.setAttribute("tabindex", "0");
+    region = true;
+    const caption = element.querySelector(":scope > table > caption");
+    if (caption && !element.hasAttribute("aria-label") && !element.hasAttribute("aria-labelledby")) {
+      caption.id ||= `ui-table-caption-${++captions}`;
+      element.setAttribute("aria-labelledby", caption.id);
+      labelled = true;
+    }
+  };
+
+  const resize = new ResizeObserver(update);
+  const observe = () => {
+    resize.disconnect();
+    resize.observe(element);
+    for (const child of element.children) resize.observe(child);
+  };
+  // A table rendered or replaced later is observed too.
+  const children = new MutationObserver(() => {
+    observe();
+    update();
+  });
+  children.observe(element, { childList: true });
+  observe();
+  update();
+  return () => {
+    resize.disconnect();
+    children.disconnect();
+    plain();
+  };
+}