@0001-labs/design-system-1 0.3.0-alpha.13 → 0.3.0-alpha.15

package/DS1/3-unit/ds-sidebar.ts

@@ -0,0 +1,366 @@
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { repeat } from "lit/directives/repeat.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { define } from "../0-face/define";
+import { treeStep } from "../0-face/sidebar";
+import "../0-face/tooltips";
+import "../2-core/ds-button";
+import "../2-core/ds-icon";
+import "./ds-row";
+import styles from "./styles/ds-sidebar.css?inline";
+
+/** Visible rows. The application owns hierarchy, expansion, selection and routing. */
+export interface SidebarItem {
+  id: string;
+  /** Words a person reads; shown as written, never translated. */
+  label: string;
+  /** Decorative leading icon; the label remains the accessible name. */
+  icon?: string;
+  /** 0 for a row at the root; each level stands further in. */
+  depth?: number;
+  href?: string;
+  /** `true` open, `false` closed; leave it out for a leaf. */
+  expanded?: boolean;
+  /** The destination being shown (navigation). */
+  current?: boolean;
+  /** The row chosen (a tree). */
+  selected?: boolean;
+  disabled?: boolean;
+  /** Small muted words at the row's end: a count, a size. */
+  meta?: string;
+  action?: { id: string; label: string; icon?: string; disabled?: boolean };
+  /** Opt this row out of an enabled navigation reorder surface. */
+  reorderable?: boolean;
+}
+
+export interface SidebarMoveDetail { id: string; targetId: string; position: "before" | "after"; }
+
+/**
+ * Compact navigation composed from Row, Button and Icon: the application's
+ * places, each row a link or a button and its own Tab stop. A label cut
+ * short by the column's width shows in full in the shared tooltip
+ * (`data-tooltip`, drawn by `0-face/tooltips.ts`); a label that fits carries
+ * none, and no row carries the browser's `title`.
+ *
+ * With `tree`, it is a tree of the things inside one place (files, groups, a
+ * page's parts): rows one square high, each level one square further in, a
+ * disclosure arrow on its own square before each label. `role="tree"` with
+ * one `role="treeitem"` per row, `aria-level`, `aria-expanded` and
+ * `aria-selected`; one Tab stop, the keyboard of the tree pattern (see
+ * `0-face/sidebar.ts`). The application keeps the rows: it passes the
+ * visible ones in `items`, in order, and answers the events.
+ *
+ * @element ds-sidebar
+ * @attr label - The navigation's or the tree's accessible name.
+ * @attr tree - A tree of nested things instead of navigation.
+ * @fires sidebar-toggle - `{ id, expanded }`: a row asks to open or close.
+ * @fires sidebar-activate - `{ id }`: a row was pressed (navigation), or Enter or a double click opened one (a tree).
+ * @fires sidebar-select - `{ id }`: a click, Space or Enter chose a tree row.
+ * @fires sidebar-action - `{ id, action }`: a row's own action was pressed.
+ */
+export class Sidebar extends LitElement {
+  static properties = {
+    items: { attribute: false },
+    label: { type: String },
+    empty: { type: String },
+    expandIcon: { type: String, attribute: "expand-icon" },
+    collapseIcon: { type: String, attribute: "collapse-icon" },
+    disclosurePosition: { type: String, attribute: "disclosure-position", reflect: true },
+    tree: { type: Boolean, reflect: true },
+    reorderable: { type: Boolean, reflect: true },
+  };
+  declare items: SidebarItem[];
+  declare label: string;
+  declare empty: string;
+  /** Optional navigation disclosure pair; tree navigation keeps its directional arrow. */
+  declare expandIcon?: string;
+  declare collapseIcon?: string;
+  /** Place navigation disclosures before the label; default preserves trailing disclosures. */
+  declare disclosurePosition?: "start" | "end";
+  declare tree: boolean;
+  declare reorderable: boolean;
+  private dragId?: string;
+  static styles = unsafeCSS(styles);
+
+  /** In a tree, the row that holds the Tab stop. */
+  private focusId?: string;
+
+  constructor() {
+    super();
+    this.items = [];
+    this.label = "Navigation";
+    this.empty = "No items";
+    this.tree = false;
+    this.reorderable = false;
+  }
+
+  private resizeObserver?: ResizeObserver;
+  private fontsReady = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (typeof ResizeObserver !== "undefined") {
+      this.resizeObserver ??= new ResizeObserver(() => this.markCutLabels());
+      this.resizeObserver.observe(this);
+    }
+    // Labels measured before the typeface arrives are measured again once it has.
+    const fonts = this.fontsReady ? undefined : document.fonts?.ready;
+    if (fonts) void fonts.then(() => { this.fontsReady = true; this.markCutLabels(); });
+  }
+
+  disconnectedCallback() {
+    this.clearDrag();
+    this.resizeObserver?.disconnect();
+    super.disconnectedCallback();
+  }
+
+  updated() {
+    this.markCutLabels();
+    if (this.dragId && !this.canMove(this.items.find(item => item.id === this.dragId))) this.clearDrag();
+  }
+
+  /** Only a label that does not fit its row gets a tooltip, holding the whole label. */
+  private markCutLabels() {
+    const labels = new Map(this.items.map(item => [item.id, item.label]));
+    this.renderRoot.querySelectorAll<HTMLElement>("[data-item]").forEach(control => {
+      const name = control.querySelector<HTMLElement>(".name");
+      const label = labels.get(control.dataset.item ?? "");
+      if (label && name && name.scrollWidth > name.clientWidth) control.dataset.tooltip = label;
+      else delete control.dataset.tooltip;
+    });
+  }
+
+  private request(name: string, detail: object): boolean {
+    return this.dispatchEvent(new CustomEvent(`sidebar-${name}`, { detail, bubbles: true, composed: true, cancelable: true }));
+  }
+
+  private toggle(item: SidebarItem) {
+    if (item.disabled) return;
+    this.request("toggle", { id: item.id, expanded: !item.expanded });
+  }
+
+  private activate(event: MouseEvent, item: SidebarItem) {
+    if (item.disabled) { event.preventDefault(); return; }
+    // Let native links retain new-tab, download and context-menu behaviour.
+    if (item.href && (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0)) return;
+    if (!item.href && item.expanded !== undefined) { this.toggle(item); return; }
+    if (!this.request("activate", { id: item.id })) event.preventDefault();
+  }
+
+  /** Moves the focus to a row after `updateComplete`. */
+  focusItem(id: string) {
+    const row = this.row(id);
+    if (!row) return;
+    if (this.tree) { this.focusId = id; this.requestUpdate(); row.tabIndex = 0; }
+    row.focus();
+  }
+
+  /** Scrolls the current destination, or the selected tree row, into view. */
+  scrollToCurrent() {
+    this.renderRoot.querySelector('[aria-current="page"], [aria-selected="true"]')?.scrollIntoView({ block: "nearest" });
+  }
+
+  /** The row a pointer or keyboard event happened on, for a context menu or a drag of the application's own. */
+  itemFromEvent(event: Event): SidebarItem | undefined {
+    const row = event.composedPath().find((node): node is HTMLElement => node instanceof HTMLElement && node.dataset.item !== undefined && this.renderRoot.contains(node));
+    return row ? this.items.find(item => item.id === row.dataset.item) : undefined;
+  }
+
+  private row(id: string) {
+    return [...this.renderRoot.querySelectorAll<HTMLElement>("[data-item]")].find(row => row.dataset.item === id);
+  }
+
+  /** A tree's Tab stop: the row last focused while it is still shown, else the selected row, else the first available. */
+  private stop() {
+    const usable = this.items.filter(item => !item.disabled);
+    return usable.find(item => item.id === this.focusId)?.id ?? usable.find(item => item.selected)?.id ?? usable[0]?.id;
+  }
+
+  private press(event: MouseEvent, item: SidebarItem) {
+    if (item.disabled) return;
+    this.focusItem(item.id);
+    const disclosure = event.composedPath().some(node => node instanceof HTMLElement && node.classList.contains("disclosure"));
+    if (disclosure && item.expanded !== undefined) this.request("toggle", { id: item.id, expanded: !item.expanded });
+    else this.request("select", { id: item.id });
+  }
+
+  private open(event: MouseEvent, item: SidebarItem) {
+    if (item.disabled || event.composedPath().some(node => node instanceof HTMLElement && node.classList.contains("disclosure"))) return;
+    this.request("activate", { id: item.id });
+  }
+
+  private treeKeydown(event: KeyboardEvent, item: SidebarItem) {
+    if (event.altKey || event.ctrlKey || event.metaKey) return;
+    const index = this.items.indexOf(item);
+    const step = treeStep(this.items.map(row => ({ level: Math.max(0, row.depth ?? 0) + 1, expanded: row.expanded, disabled: row.disabled, label: row.label })), index, event.key);
+    if (!step) return;
+    event.preventDefault();
+    if (step.toggle !== undefined) this.request("toggle", { id: item.id, expanded: step.toggle });
+    if (step.select) this.request("select", { id: item.id });
+    if (step.activate) this.request("activate", { id: item.id });
+    const target = step.focus === undefined ? undefined : this.items[step.focus];
+    if (target) this.focusItem(target.id);
+  }
+
+  private renderTree() {
+    const stop = this.stop();
+    // Each row's place among its siblings, for aria-setsize and aria-posinset.
+    const places = new Map<string, [number, number]>();
+    const open: SidebarItem[][] = [];
+    for (const item of this.items) {
+      const depth = Math.max(0, item.depth ?? 0);
+      open.length = depth + 1;
+      const siblings = (open[depth] ??= []);
+      siblings.push(item);
+      for (const [index, sibling] of siblings.entries()) places.set(sibling.id, [index + 1, siblings.length]);
+    }
+    return html`<slot name="header"></slot><div class="tree" role="tree" aria-label=${ifDefined(this.label || undefined)} part="tree">
+      ${repeat(this.items, item => item.id, item => {
+        const depth = Math.max(0, item.depth ?? 0);
+        const [position, size] = places.get(item.id) ?? [1, 1];
+        return html`<div class="item" role="treeitem" data-item=${item.id}
+          aria-level=${depth + 1} aria-setsize=${size} aria-posinset=${position}
+          aria-expanded=${ifDefined(item.expanded === undefined ? undefined : String(item.expanded))}
+          aria-selected=${String(Boolean(item.selected))}
+          aria-disabled=${ifDefined(item.disabled ? "true" : undefined)}
+          tabindex=${item.id === stop ? 0 : -1}
+          style=${`--depth:${depth}`}
+          @click=${(event: MouseEvent) => this.press(event, item)}
+          @dblclick=${(event: MouseEvent) => this.open(event, item)}
+          @keydown=${(event: KeyboardEvent) => this.treeKeydown(event, item)}
+          @focus=${() => { this.focusId = item.id; }}>
+          <span class="disclosure" aria-hidden="true">${item.expanded === undefined ? nothing : html`<ds-icon type="right" ?data-open=${item.expanded}></ds-icon>`}</span>
+          ${item.icon ? html`<span class="icon" aria-hidden="true"><ds-icon type=${item.icon}></ds-icon></span>` : nothing}
+          <span class="label">${item.label}</span>
+          ${item.meta ? html`<span class="meta">${item.meta}</span>` : nothing}
+        </div>`;
+      })}
+      ${this.items.length ? nothing : html`<p class="empty" role="status">${this.empty}</p>`}
+    </div><slot name="footer"></slot>`;
+  }
+
+  private canMove(item?: SidebarItem): item is SidebarItem {
+    return Boolean(this.reorderable && !this.tree && item && !item.disabled && item.reorderable !== false);
+  }
+
+  private parent(item: SidebarItem): string | undefined {
+    const depth = item.depth ?? 0;
+    return this.items.slice(0, this.items.indexOf(item)).reverse().find(row => (row.depth ?? 0) < depth)?.id;
+  }
+
+  private moveAllowed(source?: SidebarItem, target?: SidebarItem): boolean {
+    return this.canMove(source) && this.canMove(target) && source.id !== target.id &&
+      (source.depth ?? 0) === (target.depth ?? 0) && this.parent(source) === this.parent(target);
+  }
+
+  private clearDrag() {
+    this.dragId = undefined;
+    this.renderRoot.querySelectorAll("[data-drop]").forEach(row => row.removeAttribute("data-drop"));
+  }
+
+  private dragStart(event: DragEvent, item: SidebarItem) {
+    if (!this.canMove(item) || !event.dataTransfer || event.composedPath().some(node =>
+      node instanceof HTMLElement && (node.classList.contains("action") || node.classList.contains("disclosure")))) {
+      event.preventDefault(); return;
+    }
+    this.dragId = item.id;
+    event.dataTransfer.effectAllowed = "move";
+    event.dataTransfer.setData("text/plain", item.id);
+  }
+
+  private dragOver(event: DragEvent, target: SidebarItem) {
+    this.renderRoot.querySelectorAll("[data-drop]").forEach(row => row.removeAttribute("data-drop"));
+    if (!this.moveAllowed(this.items.find(item => item.id === this.dragId), target)) return;
+    event.preventDefault();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+    const row = event.currentTarget as HTMLElement;
+    const bounds = row.getBoundingClientRect();
+    row.dataset.drop = event.clientY < bounds.top + bounds.height / 2 ? "before" : "after";
+  }
+
+  private drop(event: DragEvent, target: SidebarItem) {
+    const source = this.items.find(item => item.id === this.dragId);
+    const position = (event.currentTarget as HTMLElement).dataset.drop;
+    if (this.moveAllowed(source, target) && (position === "before" || position === "after")) {
+      event.preventDefault();
+      this.request("move", { id: source!.id, targetId: target.id, position } satisfies SidebarMoveDetail);
+    }
+    this.clearDrag();
+  }
+
+  private navigate(event: KeyboardEvent, item: SidebarItem) {
+    if (event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey && this.canMove(item) && (event.key === "ArrowUp" || event.key === "ArrowDown")) {
+      event.preventDefault();
+      const siblings = this.items.filter(row => this.moveAllowed(item, row) || row.id === item.id);
+      const target = siblings[siblings.indexOf(item) + (event.key === "ArrowUp" ? -1 : 1)];
+      if (target) this.request("move", { id: item.id, targetId: target.id, position: event.key === "ArrowUp" ? "before" : "after" } satisfies SidebarMoveDetail);
+      return;
+    }
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+    const index = this.items.indexOf(item);
+    let target: SidebarItem | undefined;
+    const available = this.items.filter(row => !row.disabled);
+    const position = available.indexOf(item);
+    if (event.key === "ArrowDown") target = available[Math.min(position + 1, available.length - 1)];
+    else if (event.key === "ArrowUp") target = available[Math.max(position - 1, 0)];
+    else if (event.key === "Home") target = available[0];
+    else if (event.key === "End") target = available[available.length - 1];
+    else if (event.key === "ArrowRight") {
+      if (item.expanded === false) this.toggle(item);
+      else if (item.expanded && (this.items[index + 1]?.depth ?? 0) > (item.depth ?? 0)) target = this.items[index + 1];
+    } else if (event.key === "ArrowLeft") {
+      if (item.expanded) this.toggle(item);
+      else target = this.items.slice(0, index).reverse().find(row => (row.depth ?? 0) < (item.depth ?? 0) && !row.disabled);
+    } else return;
+    event.preventDefault();
+    if (target && !target.disabled) this.focusItem(target.id);
+  }
+
+  private renderDisclosure(item: SidebarItem) {
+    return item.expanded !== undefined ? html`
+            <ds-button control="slotted" icon class="disclosure" ?disabled=${item.disabled}>
+              <button type="button" aria-label=${`${item.expanded ? "Collapse" : "Expand"} ${item.label}`}
+                aria-expanded=${item.expanded} @click=${() => this.toggle(item)}>
+                <ds-icon type=${(item.expanded ? this.collapseIcon : this.expandIcon) || "right"} aria-hidden="true" ?data-open=${item.expanded && !this.collapseIcon}></ds-icon>
+              </button>
+            </ds-button>` : nothing;
+  }
+
+  render() {
+    if (this.tree) return this.renderTree();
+    return html`<slot name="header"></slot><nav aria-label=${this.label}>
+      ${repeat(this.items, item => item.id, item => html`
+        <ds-row class="row" ?data-current=${item.current} ?data-disabled=${item.disabled}
+          style=${`--depth:${Math.max(0, item.depth ?? 0)}`}
+          draggable=${this.canMove(item) ? "true" : "false"}
+          @dragstart=${(event: DragEvent) => this.dragStart(event, item)}
+          @dragover=${(event: DragEvent) => this.dragOver(event, item)}
+          @dragleave=${(event: DragEvent) => { if (!(event.currentTarget as HTMLElement).contains(event.relatedTarget as Node | null)) (event.currentTarget as HTMLElement).removeAttribute("data-drop"); }}
+          @drop=${(event: DragEvent) => this.drop(event, item)}
+          @dragend=${() => this.clearDrag()}>
+          ${this.disclosurePosition === "start" ? this.renderDisclosure(item) : nothing}
+          <ds-button control="slotted" class="choice" ?disabled=${item.disabled}>
+            ${item.href && !item.disabled ? html`
+              <a href=${item.href} draggable=${ifDefined(this.reorderable ? "false" : undefined)} data-item=${item.id} aria-current=${ifDefined(item.current ? "page" : undefined)}
+                @click=${(event: MouseEvent) => this.activate(event, item)}
+                @keydown=${(event: KeyboardEvent) => this.navigate(event, item)}><span class="name">${item.icon ? html`<ds-icon type=${item.icon} aria-hidden="true"></ds-icon>` : nothing}${item.label}</span></a>` : html`
+              <button type="button" data-item=${item.id} ?disabled=${item.disabled}
+                aria-expanded=${ifDefined(item.expanded === undefined ? undefined : String(item.expanded))}
+                aria-current=${ifDefined(item.current ? "page" : undefined)}
+                @click=${(event: MouseEvent) => this.activate(event, item)}
+                @keydown=${(event: KeyboardEvent) => this.navigate(event, item)}><span class="name">${item.icon ? html`<ds-icon type=${item.icon} aria-hidden="true"></ds-icon>` : nothing}${item.label}</span></button>`}
+          </ds-button>
+          ${this.disclosurePosition !== "start" ? this.renderDisclosure(item) : nothing}
+          <span class="spacer" aria-hidden="true"></span>
+          ${item.meta ? html`<span class="meta">${item.meta}</span>` : nothing}
+          ${item.action ? html`<ds-button control="slotted" ?fit=${!item.action.icon} ?icon=${Boolean(item.action.icon)} class="action" ?disabled=${item.disabled || item.action.disabled}><button type="button"
+            aria-label=${`${item.action.label}: ${item.label}`}
+            @click=${() => { if (!item.disabled && !item.action?.disabled) this.request("action", { id: item.id, action: item.action!.id }); }}>${item.action.icon ? html`<ds-icon type=${item.action.icon} aria-hidden="true"></ds-icon>` : item.action.label}</button></ds-button>` : nothing}
+        </ds-row>`)}
+      ${this.items.length ? nothing : html`<p class="empty" role="status">${this.empty}</p>`}
+    </nav><slot name="footer"></slot>`;
+  }
+}
+
+define("ds-sidebar", Sidebar);
+declare global { interface HTMLElementTagNameMap { "ds-sidebar": Sidebar } }

package/DS1/3-unit/ds-table.ts

@@ -1,64 +1,105 @@
 // ds-table.ts
-// Data table component
+// A data table: rows one square high on hairlines, drawn from data with the
+// same rules as a native `<table class="ds-table">` (1-root/table.css).
 
-import { LitElement, html, unsafeCSS } from "lit";
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import metrics from "../1-root/component-metrics.css?inline";
+import table from "../1-root/table.css?inline";
 import styles from "./styles/ds-table.css?inline";
 
-export interface TableRow {
-  product: string;
-  users: string;
-  retention: string;
-  status?: string;
+/** A column: the key it reads from each row, its header, and whether it holds numbers. */
+export interface TableColumn {
+  key: string;
+  label: string;
+  /** Sets the column to its end in tabular figures. Unset, a column of numbers is numeric. */
+  numeric?: boolean;
 }
 
+/** A row: values by column key, or by column position. */
+export type TableRow = Record<string, unknown> | readonly unknown[];
+
+const capitalised = (key: string) => key.charAt(0).toUpperCase() + key.slice(1);
+const blank = (value: unknown) => value === undefined || value === null || value === "";
+
 export class DsTable extends LitElement {
   static properties = {
     data: { type: Array },
     columns: { type: Array },
-    showStatus: { type: Boolean, attribute: "show-status" },
+    footer: { type: Object },
+    sticky: { type: Boolean, reflect: true },
+    label: { type: String },
   };
 
+  /** The body rows. */
   declare data: TableRow[];
-  declare columns: string[];
-  declare showStatus: boolean;
+  /** Headers as labels (`"Users"` reads `users`) or columns; unset, the first row's keys. */
+  declare columns: (string | TableColumn)[];
+  /** A totals row under the body. */
+  declare footer: TableRow | undefined;
+  /** Keeps the first column in place while the table scrolls sideways. */
+  declare sticky: boolean;
+  /** The table's accessible name. */
+  declare label: string | undefined;
 
   constructor() {
     super();
     this.data = [];
-    this.columns = ["Product", "Users", "Retention"];
-    this.showStatus = true;
+    this.columns = [];
+    this.sticky = false;
+  }
+
+  static styles = [unsafeCSS(metrics), unsafeCSS(table), unsafeCSS(styles)];
+
+  private resolvedColumns(): TableColumn[] {
+    const named = this.columns.length > 0;
+    const given = named
+      ? this.columns
+      : Object.keys((this.data.find(row => !Array.isArray(row)) as Record<string, unknown> | undefined) ?? {});
+    const rows = this.footer ? [...this.data, this.footer] : this.data;
+    return given.map((column, index) => {
+      const resolved = typeof column !== "string" ? column
+        : named ? { key: column.toLowerCase(), label: column }
+        : { key: column, label: capitalised(column) };
+      const values = rows.map(row => cell(row, resolved.key, index)).filter(value => !blank(value));
+      const numeric = resolved.numeric ?? (values.length > 0 && values.every(value => typeof value === "number"));
+      return { ...resolved, numeric };
+    });
   }
 
-  static styles = unsafeCSS(styles);
+  private row(row: TableRow, columns: TableColumn[]) {
+    return html`<tr>${columns.map((column, index) => {
+      const value = text(cell(row, column.key, index));
+      return index === 0
+        ? html`<th scope="row" ?data-numeric=${column.numeric}>${value}</th>`
+        : html`<td ?data-numeric=${column.numeric}>${value}</td>`;
+    })}</tr>`;
+  }
 
   render() {
+    const columns = this.resolvedColumns();
     return html`
-      <div class="table-container">
-        <div class="table-header">
-          <div class="header-cell product-cell">Product</div>
-          <div class="header-cell users-cell">Users</div>
-          <div class="header-cell retention-cell">Retention</div>
-          ${this.showStatus ? html`<div class="header-cell">Status</div>` : ""}
-        </div>
-        <div class="table-body">
-          ${this.data.map(
-            (row, rowIndex) => html`
-              <div class="data-cell product-cell">${row.product}</div>
-              <div class="data-cell users-cell">${row.users}</div>
-              <div class="data-cell retention-cell">${row.retention}</div>
-              ${this.showStatus
-                ? html`<div class="data-cell status-cell">
-                    ${row.status || "Pending"}
-                  </div>`
-                : ""}
-            `
-          )}
-        </div>
+      <div class="ds-table-scroll" part="scroll">
+        <table class="ds-table" part="table" ?data-sticky=${this.sticky} aria-label=${this.label ?? nothing}>
+          <thead>
+            <tr>${columns.map(column => html`<th scope="col" ?data-numeric=${column.numeric}>${column.label}</th>`)}</tr>
+          </thead>
+          <tbody>${this.data.map(row => this.row(row, columns))}</tbody>
+          ${this.footer ? html`<tfoot>${this.row(this.footer, columns)}</tfoot>` : nothing}
+        </table>
       </div>
     `;
   }
 }
 
+function cell(row: TableRow, key: string, index: number): unknown {
+  return Array.isArray(row) ? row[index] : (row as Record<string, unknown>)[key];
+}
+
+function text(value: unknown): string {
+  if (blank(value)) return "";
+  return typeof value === "number" ? value.toLocaleString() : String(value);
+}
+
 customElements.define("ds-table", DsTable);
 
 declare global {

package/DS1/3-unit/styles/ds-accordion.css

@@ -8,6 +8,7 @@
   max-width: 100%;
   color: var(--ds-text-color);
 }
+:host([hidden]) { display: none !important; }
 
 details {
   width: 100%;

package/DS1/3-unit/styles/ds-avatar-group.css

@@ -1,16 +1,14 @@
 @import "../../1-root/component-metrics.css";
 
 :host {
-  --group-overlap: calc(4px * var(--ds-sf));
+  /* The overlap for avatars one control high. */
+  --group-overlap: calc(3px * var(--ds-sf));
   display: inline-flex;
   flex: 0 0 auto;
   align-items: center;
   isolation: isolate;
   vertical-align: middle;
 }
-:host([size="compact"]) {
-  --group-overlap: calc(3px * var(--ds-sf));
-}
 :host([hidden]) {
   display: none !important;
 }