@0001-labs/design-system-1 0.3.0-alpha.28 → 0.3.1

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

@@ -15,7 +15,7 @@
 :host([columns]) {
   display: grid;
   grid-template-columns: repeat(var(--ds-list-columns, 2), minmax(0, 1fr));
-  column-gap: var(--ds-list-column-gap, calc(8px * var(--ds-sf)));
+  column-gap: var(--ds-list-column-gap, calc(var(--ds-unit) / 2));
 }
 
 :host([columns="2"]) {
@@ -25,3 +25,28 @@
 :host([columns="3"]) {
   --ds-list-columns: 3;
 }
+
+/* The group's name on the square above its rows: words on the lower sixteen of the square with
+   the spare four above, in the muted ink, as a day's heading stands over Money's payments. It
+   names the list (aria-label), so the drawn words are hidden from assistive technology. */
+.heading {
+  box-sizing: border-box;
+  flex: none;
+  grid-column: 1 / -1;
+  width: 100%;
+  height: var(--ds-unit);
+  padding-top: calc(4px * var(--ds-sf));
+  overflow: hidden;
+  color: var(--ds-list-heading-color, var(--ds-text-color-muted));
+  font-family: var(--ds-typeface-regular);
+  font-feature-settings: var(--ds-font-features);
+  font-size: var(--ds-type-size-default);
+  font-weight: var(--ds-type-weight-default);
+  line-height: var(--ds-type-lineheight-default);
+  letter-spacing: var(--ds-type-letterspacing-default);
+  white-space: nowrap;
+  text-overflow: clip;
+}
+/* A cut heading fades over its last square, never an ellipsis (0-face/cut-fade.ts marks it). */
+.heading[data-cut="end"] { mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent); }
+:host(:dir(rtl)) .heading[data-cut="end"] { mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent); }

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

@@ -91,10 +91,13 @@
   padding-inline-end: calc(4px * var(--ds-sf, 1));
   overflow: hidden;
   text-align: end;
-  text-overflow: ellipsis;
+  text-overflow: clip;
   white-space: nowrap;
   cursor: pointer;
 }
+/* A cut name fades over its last square, never an ellipsis (0-face/cut-fade.ts marks it). */
+.name[data-cut="end"] { mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent); }
+:host(:dir(rtl)) .name[data-cut="end"] { mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent); }
 .name[data-lit] { background: var(--ds-row-fill-hover, var(--ds-fill)); }
 .name.totals { color: var(--ds-title-color); cursor: default; }
 

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

@@ -124,6 +124,45 @@
 :host([disabled]) .target { cursor: default; opacity: 0.5; }
 :host([disabled]) .target::after { background: none; }
 
+/*
+ * The parts of a record's row (payments, events, people): a 16px picture before the
+ * name (an avatar tile, a large icon) takes the first sixteen of its square, and the row's 4px
+ * gap puts the words on the next square. The name hugs its words and gives way first; once
+ * the element has measured it cut (`data-cut="end"`), it fades out over its last square,
+ * never an ellipsis. A tag stands after the name, and the value (a figure, a date) at the
+ * row's end in tabular figures.
+ */
+::slotted(.ds-row__picture) {
+  flex: none;
+  box-sizing: border-box;
+  width: var(--ds-control-height);
+  height: var(--ds-control-height);
+  margin: 0;
+  padding: 0;
+}
+::slotted(.ds-row__name) {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: clip;
+}
+::slotted(.ds-row__name[data-cut="end"]) {
+  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);
+}
+:host(:dir(rtl)) ::slotted(.ds-row__name[data-cut="end"]) {
+  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);
+}
+::slotted(.ds-row__value) {
+  flex: none;
+  /* Important: a page's `* { margin: 0 }` reset (Tailwind's preflight, say)
+     reaches the slotted value from outside and would leave it after the name. */
+  margin-inline-start: auto !important;
+  white-space: nowrap;
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
 /* A navigation row: the sidebar's two-pixel corners. */
 :host([nav]) { --ds-row-radius: calc(2px * var(--ds-sf)); }
 

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

@@ -2,28 +2,35 @@
 
 /*
  * Select as a field, around a native <select> (`data-field`): the menu
- * engine's own rules (an action menu's) do not reach it. One square high and
- * eight wide by default; a list one square a visible row.
+ * engine's own rules (an action menu's) do not reach it. One control high
+ * (16px), standing at the foot of its line on the lower sixteen as a button
+ * does, and hugging its options by default; a list one square a visible row.
  */
 :host([data-field]) {
   --ds-select-unit: calc(var(--ds-1) * var(--ds-sf));
   display: inline-flex;
   position: relative;
-  vertical-align: middle;
-  width: calc(8 * var(--ds-select-unit));
+  vertical-align: bottom;
+  width: max-content;
   max-width: 100%;
   min-width: 0;
   max-height: none;
-  height: calc(var(--ds-select-rows, 1) * var(--ds-select-unit));
+  height: var(--ds-control-height);
+}
+:host([data-field]:not([data-listbox])) {
+  width: max-content !important;
+  flex: 0 0 auto !important;
+  justify-self: start !important;
 }
 :host([hidden]) { display: none !important; }
 ::slotted(select) {
   appearance: none !important;
   box-sizing: border-box !important;
   display: block !important;
-  width: 100% !important;
+  field-sizing: content;
+  width: auto !important;
   min-width: 0 !important;
-  max-width: none !important;
+  max-width: 100% !important;
   height: 100% !important;
   min-height: 0 !important;
   margin: 0 !important;
@@ -37,7 +44,7 @@
   font-size: var(--ds-type-size-default) !important;
   font-weight: var(--ds-type-weight-default) !important;
   letter-spacing: var(--ds-type-letterspacing-default) !important;
-  line-height: calc(var(--ds-select-unit) - 2px) !important;
+  line-height: calc(var(--ds-control-height) - 2px) !important;
   box-shadow: none !important;
   cursor: pointer !important;
 }
@@ -47,8 +54,8 @@
   inset-inline-end: calc(2px * var(--ds-sf));
   top: 50%;
   transform: translateY(-50%);
-  width: calc(.8 * var(--ds-select-unit));
-  height: calc(.8 * var(--ds-select-unit));
+  width: var(--ds-control-height);
+  height: var(--ds-control-height);
   background: var(--ds-input-color);
   mask: var(--ds-select-arrow) center / contain no-repeat;
 }
@@ -59,14 +66,17 @@
 ::slotted(select[multiple]),
 ::slotted(select[size]:not([size="0"]):not([size="1"])) {
   padding: 0 calc(4px * var(--ds-sf)) !important;
+  line-height: calc(var(--ds-select-unit) - 2px) !important;
 }
 
+:host([data-listbox]) { width: calc(8 * var(--ds-select-unit)); height: calc(var(--ds-select-rows, 1) * var(--ds-select-unit)); }
+:host([data-listbox]) ::slotted(select) { width: 100% !important; }
+
 /* Intrinsic width uses the native option sizing, including translated labels. */
 :host([fit]:not([data-listbox])) { width: max-content; }
 :host([fit]:not([data-listbox])) ::slotted(select) { width: auto !important; max-width: 100% !important; }
 
-/* A settings chip keeps the same native picker, on the shared control height. */
-:host([chip]:not([data-listbox])) { height: var(--ds-control-height); }
+/* A settings chip keeps the same native picker and height, filled as a button. */
 :host([chip]:not([data-listbox])) ::slotted(select) {
   border: 0 !important;
   background: var(--ds-button-background-color-secondary) !important;

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

@@ -42,7 +42,13 @@ ds-icon { transform: rotate(0deg); }
 ds-icon[data-open] { transform: rotate(90deg); }
 .choice { flex: 0 1 auto; min-width: 0; }
 .name:has(ds-icon) { display: flex; align-items: center; gap: calc(4px * var(--ds-sf)); }
-.name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.name { overflow: hidden; white-space: nowrap; text-overflow: clip; }
+/* Cut words fade over their last square, never an ellipsis (0-face/cut-fade.ts marks them). */
+:is(.name, .tree .label)[data-cut="end"] { mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent); }
+:host(:dir(rtl)) :is(.name, .tree .label)[data-cut="end"] { mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent); }
+/* A detail (a version) follows the label in the small muted type, 4px after its words and on their line, cut with them. */
+.detail { margin-inline-start: calc(4px * var(--ds-sf)); font-size: var(--ds-type-size-small); line-height: 1; color: var(--ds-text-color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.name:has(ds-icon) .detail { margin-inline-start: 0; }
 .meta { flex: none; padding-inline-start: calc(4px * var(--ds-sf)); font-size: var(--ds-type-size-small); color: var(--ds-text-color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
 .action { margin-inline-start: calc(4px * var(--ds-sf)); --ds-text-size: 10px; --ds-button-color: var(--ds-text-color-muted); }
 .empty { margin: 0; padding: calc(var(--ds-unit) / 2); color: var(--ds-text-color-muted); }
@@ -105,7 +111,7 @@ ds-icon[data-open] { transform: rotate(90deg); }
   min-width: 0;
   padding-inline-start: calc(4px * var(--ds-sf));
   overflow: hidden;
-  text-overflow: ellipsis;
+  text-overflow: clip;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -132,3 +138,11 @@ ds-icon[data-open] { transform: rotate(90deg); }
 
 :host([disclosure-position="start"]) .row { padding-inline-start: calc(4px * var(--ds-sf) + var(--depth) * var(--ds-unit)); }
 :host([disclosure-position="start"]) .row:not(:has(.disclosure)) .choice { margin-inline-start: var(--ds-unit); }
+
+/* Narrow: eight squares wide, each row hugging its words, so the pointer's and the current
+   row's fill wrap the label (and its meta and disclosure) 4px either side instead of running
+   across the column. Rows still stand one square apart, half a square further in per level. */
+:host([narrow]) { width: calc(8 * var(--ds-unit)); }
+:host([narrow]) nav { display: flex; flex-direction: column; align-items: flex-start; }
+:host([narrow]) .row { width: fit-content; max-width: 100%; }
+:host([narrow]) .spacer { display: none; }

package/DS1/3-unit/styles/ds-table-of-contents.css

@@ -0,0 +1,40 @@
+@import "../../1-root/component-metrics.css";
+:host {
+  display: block;
+  width: var(--ds-toc-width, calc(12 * var(--ds-unit)));
+  max-width: 100%;
+  color: var(--ds-text-color);
+  font-family: var(--ds-typeface-regular);
+  font-size: var(--ds-type-size-default);
+  font-weight: var(--ds-type-weight-default);
+  line-height: var(--ds-type-lineheight-default);
+  letter-spacing: var(--ds-type-letterspacing-default);
+}
+:host([hidden]) { display: none !important; }
+.title { display: flex; align-items: flex-end; min-height: var(--ds-unit); }
+.links { margin-top: var(--ds-unit); }
+a, ::slotted(a) {
+  box-sizing: border-box;
+  display: block;
+  min-height: var(--ds-unit);
+  padding-top: calc(4px * var(--ds-sf));
+  padding-inline-start: calc(var(--toc-depth, 0) * var(--ds-unit));
+  color: var(--ds-toc-color, var(--ds-text-color-muted));
+  font: inherit;
+  line-height: var(--ds-type-lineheight-default);
+  letter-spacing: inherit;
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: clip;
+}
+/* A cut label fades over its last square, never an ellipsis (0-face/cut-fade.ts marks it). */
+a[data-cut="end"], ::slotted(a[data-cut="end"]) {
+  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);
+}
+:host(:dir(rtl)) a[data-cut="end"], :host(:dir(rtl)) ::slotted(a[data-cut="end"]) {
+  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);
+}
+a:hover, ::slotted(a:hover) { color: var(--ds-text-color); text-decoration: underline; }
+a[aria-current], ::slotted(a[aria-current]) { color: var(--ds-toc-current-color, var(--ds-sharp-blue)); }
+a:focus-visible, ::slotted(a:focus-visible) { outline: 1px solid var(--ds-focus-ring); outline-offset: 1px; }

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

@@ -12,6 +12,8 @@
   height: var(--ds-row-height);
 }
 
+:host([hidden]) { display: none !important; }
+
 :host([wrap]) {
   flex-wrap: wrap;
   height: auto;
@@ -42,3 +44,96 @@
   --ds-button-background: var(--ds-button-background-color-primary);
   --ds-button-color: var(--ds-button-text-color-on-accent);
 }
+
+/*
+ * Text tabs (`text`): the words alone, no fill in any state, the current one
+ * in the ink and the others muted until the pointer is over them. The tabs
+ * stay 4px apart, as every tab run, each with its 4px of padding, so the words
+ * stand twelve apart; the run is drawn 4px back so the first word starts on
+ * the column's edge, as a heading would.
+ */
+:host([text]) {
+  /* Important: a page's `* { margin: 0 }` reset (Tailwind's preflight, say)
+     reaches the host from outside and would set the first word 4px in. */
+  margin-inline-start: calc(-4px * var(--ds-sf)) !important;
+}
+
+:host([text]) ::slotted(ds-button),
+:host([text]) ::slotted(ds-button:hover),
+:host([text]) ::slotted(ds-button[active]) {
+  --ds-button-background: transparent;
+}
+
+:host([text]) ::slotted(ds-button) {
+  --ds-button-color: var(--ds-text-color-muted);
+}
+
+:host([text]) ::slotted(ds-button:hover),
+:host([text]) ::slotted(ds-button[active]) {
+  --ds-button-color: var(--ds-text-color);
+}
+
+/*
+ * Split tabs (`split`): joined into one face a control high, as the split
+ * button draws it: a pixel of the paper between them, the run's outer corners
+ * rounded (each tab's `segment` place), the tabs muted on the secondary
+ * ground, the current one on the accent.
+ */
+:host([split]) {
+  display: inline-flex;
+  align-items: stretch;
+  gap: 1px;
+  height: var(--ds-control-height);
+  vertical-align: bottom;
+}
+
+:host([split]) ::slotted(ds-button) {
+  --ds-button-height: var(--ds-control-height);
+  --ds-button-padding: 0 calc(5px * var(--ds-sf));
+  --ds-button-background: var(--ds-button-background-color-secondary);
+  --ds-button-color: var(--ds-text-color-muted);
+}
+
+:host([split]) ::slotted(ds-button:hover) {
+  --ds-button-background: var(--ds-button-background-color-secondary);
+  --ds-button-color: var(--ds-text-color);
+}
+
+:host([split]) ::slotted(ds-button[active]) {
+  --ds-button-background: var(--ds-accent-color);
+  --ds-button-color: var(--ds-button-text-color-on-accent);
+}
+
+/*
+ * Paper tabs (`paper`): a notebook's tabs hanging from a page's top edge.
+ * Each tab is a row high with its words on the sixteen, half a square of room
+ * at its sides, the tabs 4px apart, rounded at the top and square at the foot
+ * where they join the page (each tab's `paper` mark, which the run sets):
+ * the current one on the paper's colour in the ink, so it reads as part of
+ * the page below; the others on the quiet fill in the muted ink, lit under
+ * the pointer. The run stands at the page's edge; the page places it, over a
+ * header's band, say, so the tabs hang into it.
+ */
+:host([paper]) {
+  align-items: flex-end;
+  height: var(--ds-row-height);
+}
+
+:host([paper]) ::slotted(ds-button) {
+  --ds-button-height: var(--ds-row-height);
+  --ds-button-padding: 0 calc(10px * var(--ds-sf));
+  --ds-button-background: var(--ds-button-background-color-secondary);
+  --ds-button-color: var(--ds-text-color-muted);
+}
+
+:host([paper]) ::slotted(ds-button:hover) {
+  --ds-button-background: var(--ds-fill-hover);
+  --ds-button-color: var(--ds-text-color);
+}
+
+:host([paper]) ::slotted(ds-button[active]),
+:host([paper]) ::slotted(ds-button[active]:hover) {
+  /* The page's own colour: a product's --ds-background, else the paper's. */
+  --ds-button-background: var(--ds-background, var(--background, Canvas));
+  --ds-button-color: var(--ds-text-color);
+}

package/DS1/4-page/ds-container.ts

@@ -1,3 +1,4 @@
+import { define } from "../0-face/define";
 // ds-container.ts
 // Container component with responsive width constraints
 
@@ -19,7 +20,7 @@ export class Container extends LitElement {
   }
 }
 
-customElements.define("ds-container", Container);
+define("ds-container", Container);
 
 declare global {
   interface HTMLElementTagNameMap {

package/DS1/4-page/ds-document.ts

@@ -7,6 +7,7 @@
 import { LitElement, html, nothing, unsafeCSS } from "lit";
 import { getText } from "../0-face/i18n";
 import { define } from "../0-face/define";
+import { CutFades } from "../0-face/cut-fade";
 import metrics from "../1-root/component-metrics.css?inline";
 import documentSheet from "../1-root/document.css?inline";
 import documentRules from "../1-root/document.css?raw";
@@ -97,6 +98,8 @@ export class DocumentPage extends LitElement {
   };
 
   static styles = [unsafeCSS(metrics), unsafeCSS(documentSheet), unsafeCSS(styles)];
+  /** Words cut short fade over their last square, never an ellipsis: marks them `data-cut="end"` while they do not fit. */
+  protected readonly cuts = new CutFades(this, { selector: ".ds-document__toc-list a" });
 
   declare levels: string;
   declare label: string | undefined;

package/DS1/4-page/ds-footer.ts

@@ -1,42 +1,78 @@
 // ds-footer.ts
-// A site footer: the brand, columns of links, the language and theme, and the
-// copyright. Drawn by 1-root/footer.css, the same classes a page without
+// A site footer: the brand, columns of links or contact lines, round marks
+// stacked at the row's end, the language and theme, the copyright and the
+// policies under it. Drawn by 1-root/footer.css, the same classes a page without
 // scripts writes.
 
 import { LitElement, html, nothing, unsafeCSS } from "lit";
 import { getText } from "../0-face/i18n";
 import { define } from "../0-face/define";
+import { CutFades } from "../0-face/cut-fade";
 import "../2-core/ds-cycle";
 import metrics from "../1-root/component-metrics.css?inline";
 import controls from "../1-root/controls.css?inline";
 import styles from "./styles/ds-footer.css?inline";
 
-/** A link in a footer column. */
+/**
+ * A line in a footer column: a link, or, without `href`, words alone (an
+ * address, a registration number). In a column with words alone its links
+ * are underlined, so they can be told from the words around them.
+ */
 export interface FooterLink {
   /** The words: a translation key, or as written with the footer's `literal`. */
   label: string;
-  href: string;
+  /** Where it leads. Without it the line is words alone. */
+  href?: string;
   /** Opens elsewhere: in a new tab, with no referrer. */
   external?: boolean;
   /** The page being read: `aria-current="page"`. */
   current?: boolean;
+  /**
+   * The link drawn as a mark, its label its accessible name: the icon file's
+   * address (`icons/instagram.svg`, as Sync 1's `icons` export copies it). A
+   * column's icon links stand first, in a row of their own, or stacked as
+   * round marks with the column's `icons: "stack"`.
+   */
+  icon?: string;
 }
 
-/** A footer column: a heading and its links. */
+/** How a column's icon links stand: in a row first (`row`), or stacked as round marks (`stack`). */
+export type FooterIcons = "row" | "stack";
+
+/** A footer column: a heading and its lines. */
 export interface FooterColumn {
   heading?: string;
+  /** The heading as a link: where it leads. */
+  href?: string;
   links: FooterLink[];
+  /** The column's width in whole squares: eight by default. */
+  width?: number;
+  /**
+   * `stack` draws its icon links as round marks one control high, one a line,
+   * the column one square wide at the end of the row; the heading then names
+   * the marks for assistive technology. `row` (the default) stands them first,
+   * in a row of their own.
+   */
+  icons?: FooterIcons;
 }
 
 /** The settings a footer offers, each a `ds-cycle` of that type. */
-export type FooterPreference = "language" | "theme";
-const PREFERENCES: readonly FooterPreference[] = ["language", "theme"];
+export type FooterPreference = "language" | "theme" | "shape";
+const PREFERENCES: readonly FooterPreference[] = ["language", "theme", "shape"];
+/** What an empty `preferences` offers: the shape only when it is named. */
+const DEFAULT_PREFERENCES: readonly FooterPreference[] = ["language", "theme"];
+
+/** A column's width in whole squares, from its `width`: eight when it is missing or not a positive number. */
+export function footerColumnWidth(width: unknown): number {
+  const squares = Math.round(Number(width));
+  return Number.isFinite(squares) && squares >= 1 ? squares : 8;
+}
 
-/** The preferences named by an attribute: every one when it is present but empty. */
+/** The preferences named by an attribute: language and theme when it is present but empty. */
 export function footerPreferences(value: string | null | undefined): FooterPreference[] {
   if (value == null || value === "false") return [];
   const named = value.split(/[\s,]+/).filter(Boolean);
-  if (!named.length || named.includes("true")) return [...PREFERENCES];
+  if (!named.length || named.includes("true")) return [...DEFAULT_PREFERENCES];
   return PREFERENCES.filter(name => named.includes(name));
 }
 
@@ -46,11 +82,14 @@ export function footerPreferences(value: string | null | undefined): FooterPrefe
  *   the words as they stand with `literal`. The `brand` slot takes its place.
  * @prop {string} href - Where the brand links. `/` by default.
  * @prop {string} tagline - A line about the site under the brand.
- * @prop {FooterColumn[]} columns - The columns of links, eight squares each.
+ * @prop {FooterColumn[]} columns - The columns of links or lines, eight squares each
+ *   unless a column names its `width`.
  * @prop {string} label - The columns' accessible name, as a navigation; without it they are plain lists.
  * @prop {string} owner - Who holds the copyright: the brand by default.
  * @prop {number} year - The copyright's year: this year by default.
- * @prop {string} preferences - `language`, `theme` or both, as `ds-cycle`
+ * @prop {FooterLink[]} policies - Links under the copyright (privacy, terms), each
+ *   drawn as a secondary button.
+ * @prop {string} preferences - `language`, `theme`, `shape` or several, as `ds-cycle`
  *   buttons at the end of the last row; present but empty, both.
  * @prop {boolean} literal - Show the words as written, never looked up.
  *
@@ -72,11 +111,14 @@ export class Footer extends LitElement {
     label: { type: String },
     owner: { type: String },
     year: { type: Number },
+    policies: { type: Array },
     preferences: { type: String },
     literal: { type: Boolean, reflect: true },
   };
 
   static styles = [unsafeCSS(metrics), unsafeCSS(controls), unsafeCSS(styles)];
+  /** Words cut short fade over their last square, never an ellipsis: marks them `data-cut="end"` while they do not fit. */
+  protected readonly cuts = new CutFades(this, { selector: ".ds-footer__links > li > *, .ds-footer__heading > a" });
 
   declare brand: string | undefined;
   declare href: string;
@@ -85,6 +127,7 @@ export class Footer extends LitElement {
   declare label: string | undefined;
   declare owner: string | undefined;
   declare year: number | undefined;
+  declare policies: FooterLink[];
   declare preferences: string | null | undefined;
   declare literal: boolean;
 
@@ -94,6 +137,7 @@ export class Footer extends LitElement {
     super();
     this.href = "/";
     this.columns = [];
+    this.policies = [];
     this.literal = false;
   }
 
@@ -118,9 +162,39 @@ export class Footer extends LitElement {
     return [...this.children].some(node => node.getAttribute("slot") === name);
   }
 
+  private iconLink(link: FooterLink) {
+    return html`<li><a href=${link.href} aria-label=${this.words(link.label)} aria-current=${link.current ? "page" : nothing}
+      target=${link.external ? "_blank" : nothing} rel=${link.external ? "noopener noreferrer" : nothing}><span class="ds-icon" aria-hidden="true" style=${`--ds-icon: url("${link.icon}")`}></span></a></li>`;
+  }
+
+  private anchor(link: FooterLink, className?: string) {
+    return html`<a class=${className ?? nothing} href=${link.href!} aria-current=${link.current ? "page" : nothing}
+      target=${link.external ? "_blank" : nothing} rel=${link.external ? "noopener noreferrer" : nothing}>${this.words(link.label)}</a>`;
+  }
+
   private link(link: FooterLink) {
-    return html`<li><a href=${link.href} aria-current=${link.current ? "page" : nothing}
-      target=${link.external ? "_blank" : nothing} rel=${link.external ? "noopener noreferrer" : nothing}>${this.words(link.label)}</a></li>`;
+    return html`<li>${link.href ? this.anchor(link) : html`<span>${this.words(link.label)}</span>`}</li>`;
+  }
+
+  private column(column: FooterColumn) {
+    const stack = column.icons === "stack";
+    const icons = column.links.filter(link => link.icon && link.href);
+    const lines = column.links.filter(link => !(link.icon && link.href));
+    const width = footerColumnWidth(column.width);
+    const heading = column.heading ? this.words(column.heading) : "";
+    if (stack) {
+      return html`<div class="ds-footer__column ds-footer__column--stack" part="column">
+        <ul class="ds-footer__icons" part="icons" aria-label=${heading || nothing}>${icons.map(link => this.iconLink(link))}</ul>
+        ${lines.length ? html`<ul class="ds-footer__links">${lines.map(link => this.link(link))}</ul>` : nothing}
+      </div>`;
+    }
+    return html`<div class="ds-footer__column" part="column" style=${width === 8 ? nothing : `--ds-footer-column-width: ${width}`}>
+      ${heading
+        ? html`<h2 class="ds-footer__heading" part="heading">${column.href ? html`<a href=${column.href}>${heading}</a>` : heading}</h2>`
+        : nothing}
+      ${icons.length ? html`<ul class="ds-footer__icons" part="icons">${icons.map(link => this.iconLink(link))}</ul>` : nothing}
+      <ul class="ds-footer__links">${lines.map(link => this.link(link))}</ul>
+    </div>`;
   }
 
   render() {
@@ -131,10 +205,8 @@ export class Footer extends LitElement {
     const year = Number.isFinite(this.year) ? this.year : new Date().getFullYear();
     const brandSlotted = this.slotted("brand");
     const hasBrand = brandSlotted || Boolean(this.brand) || Boolean(this.tagline);
-    const list = columns.map(column => html`<div class="ds-footer__column" part="column">
-      ${column.heading ? html`<h2 class="ds-footer__heading" part="heading">${this.words(column.heading)}</h2>` : nothing}
-      <ul class="ds-footer__links">${column.links.map(link => this.link(link))}</ul>
-    </div>`);
+    const policies = (Array.isArray(this.policies) ? this.policies : []).filter(link => link && link.href);
+    const list = columns.map(column => this.column(column));
     return html`<footer class="ds-footer" part="footer">
       <div class="ds-footer__brand" part="brand" ?hidden=${!hasBrand}>
         <slot name="brand" @slotchange=${this.relabel}>${this.brand ? html`<a class="ds-footer__mark" href=${this.href || "/"}>${this.words(this.brand)}</a>` : nothing}</slot>
@@ -147,8 +219,11 @@ export class Footer extends LitElement {
         : nothing}
       <div class="ds-footer__base" part="base">
         <p class="ds-footer__legal" part="legal"><slot name="legal" @slotchange=${this.relabel}>${owner ? `© ${year} ${owner}` : `© ${year}`}</slot></p>
+        ${policies.length
+          ? html`<ul class="ds-footer__policies" part="policies">${policies.map(link => html`<li>${this.anchor(link, "ds-button ds-button--secondary")}</li>`)}</ul>`
+          : nothing}
         <div class="ds-footer__preferences" part="preferences" ?hidden=${!hasPreferences}>
-          ${preferences.map(type => html`<ds-cycle type=${type}></ds-cycle>`)}
+          ${preferences.map(type => html`<ds-cycle type=${type} label=${type === "shape" ? "Shape" : nothing}></ds-cycle>`)}
           <slot name="preferences" @slotchange=${this.relabel}></slot>
         </div>
       </div>

package/DS1/4-page/ds-header.ts

@@ -23,6 +23,7 @@ export const MENU_LABEL = "Menu";
  * @prop {string} href - Where the brand links. `/` by default.
  * @prop {string} label - The navigation's accessible name, when a page has more than one.
  * @prop {boolean} literal - Show `brand` as written, never looked up.
+ * @prop {"site" | "app"} variant - Site navigation or a compact app title bar.
  * @prop {boolean} sticky - Stay at the top of the page as it scrolls, on the paper.
  *
  * @slot - The navigation: `<a href>` links, one square high. The link to the
@@ -46,6 +47,7 @@ export const MENU_LABEL = "Menu";
  */
 export class Header extends LitElement {
   static properties = {
+    variant: { type: String, reflect: true },
     brand: { type: String },
     href: { type: String },
     label: { type: String },
@@ -55,6 +57,7 @@ export class Header extends LitElement {
 
   static styles = [unsafeCSS(metrics), unsafeCSS(controls), unsafeCSS(styles)];
 
+  declare variant: "site" | "app";
   declare brand: string | undefined;
   declare href: string;
   declare label: string | undefined;
@@ -66,6 +69,7 @@ export class Header extends LitElement {
 
   constructor() {
     super();
+    this.variant = "site";
     this.href = "/";
     this.literal = false;
     this.sticky = false;
@@ -146,7 +150,7 @@ export class Header extends LitElement {
       : this.brand
         ? html`<a class="ds-header__brand" part="brand" href=${this.href || "/"}>${this.words(this.brand)}</a>`
         : html`<slot name="brand" @slotchange=${this.relabel}></slot>`;
-    return html`<header class="ds-header${this.sticky ? " ds-header--sticky" : ""}" part="header">
+    return html`<header class="ds-header${this.variant === "app" ? " ds-header--app" : ""}${this.sticky ? " ds-header--sticky" : ""}" part="header">
       ${brand}
       <nav class="ds-header__nav" part="nav" id="nav" aria-label=${this.label ? this.words(this.label) : nothing} ?hidden=${!hasNav}><slot @slotchange=${this.onNavChange}></slot></nav>
       <div class="ds-header__actions" part="actions" ?hidden=${!hasActions}><slot name="actions" @slotchange=${this.relabel}></slot></div>