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

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

@@ -0,0 +1,171 @@
+// ds-header.ts
+// A site header: the brand, the navigation with the page you are on, and the
+// actions, folding into a drawer on a narrow screen. Drawn by 1-root/header.css,
+// the same classes a page without scripts writes, and opened by 0-face/drawer.ts.
+
+import { LitElement, html, nothing, unsafeCSS, type PropertyValues } from "lit";
+import { getText } from "../0-face/i18n";
+import { define } from "../0-face/define";
+import { attachDrawer, type Drawer } from "../0-face/drawer";
+import { markCurrentLink } from "../0-face/header";
+import "../2-core/ds-icon";
+import metrics from "../1-root/component-metrics.css?inline";
+import controls from "../1-root/controls.css?inline";
+import styles from "./styles/ds-header.css?inline";
+
+/** The shared word that names the menu button and its drawer. */
+export const MENU_LABEL = "Menu";
+
+/**
+ * @element ds-header
+ * @prop {string} brand - The site's name, a link home: a translation key, or
+ *   the words as they stand with `literal`. The `brand` slot takes its place.
+ * @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 {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
+ *   address being read gets `aria-current="page"` unless one is marked.
+ * @slot brand - The brand, when it is more than words: a logo, a link of the page's own.
+ * @slot actions - Buttons or links at the end of the row.
+ *
+ * @fires ds-header-menu - The drawer opened or closed; `detail.open` says which.
+ *
+ * Below thirty squares of width the navigation and actions fold away and a
+ * menu button (the shared word "Menu") opens them in a drawer over the page:
+ * focus stays inside it, Escape, its close button, a link or the screen
+ * widening close it, and the page holds its scroll meanwhile.
+ *
+ * @example
+ * <ds-header brand="Name" literal>
+ *   <a href="/">Home</a>
+ *   <a href="/help">Help</a>
+ *   <ds-button slot="actions" primary href="/download">Download</ds-button>
+ * </ds-header>
+ */
+export class Header extends LitElement {
+  static properties = {
+    brand: { type: String },
+    href: { type: String },
+    label: { type: String },
+    literal: { type: Boolean, reflect: true },
+    sticky: { type: Boolean, reflect: true },
+  };
+
+  static styles = [unsafeCSS(metrics), unsafeCSS(controls), unsafeCSS(styles)];
+
+  declare brand: string | undefined;
+  declare href: string;
+  declare label: string | undefined;
+  declare literal: boolean;
+  declare sticky: boolean;
+
+  private drawer: Drawer | null = null;
+  private readonly relabel = () => this.requestUpdate();
+
+  constructor() {
+    super();
+    this.href = "/";
+    this.literal = false;
+    this.sticky = false;
+  }
+
+  /** Whether the drawer is open. */
+  get menuOpen(): boolean {
+    return this.drawer?.isOpen ?? false;
+  }
+
+  /** Open the drawer (on a narrow screen, where the menu button shows). */
+  openMenu(): void { this.drawer?.open(); }
+
+  /** Close the drawer. */
+  closeMenu(): void { this.drawer?.close(); }
+
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("language-changed", this.relabel);
+    window.addEventListener("translations-loaded", this.relabel);
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener("language-changed", this.relabel);
+    window.removeEventListener("translations-loaded", this.relabel);
+    this.drawer?.destroy();
+    this.drawer = null;
+    super.disconnectedCallback();
+  }
+
+  protected firstUpdated() {
+    markCurrentLink(this.links());
+  }
+
+  protected updated(changed: PropertyValues<this>) {
+    super.updated(changed);
+    if (this.drawer) return;
+    const root = this.renderRoot;
+    const toggle = root.querySelector<HTMLElement>('[part="toggle"]');
+    const panel = root.querySelector<HTMLDialogElement>('[part="drawer"]');
+    if (!toggle || !panel) return;
+    this.drawer = attachDrawer({
+      toggle,
+      panel,
+      content: () => [...root.querySelectorAll(':is([part="nav"], [part="actions"]):not([hidden])')],
+      onToggle: open => this.dispatchEvent(new CustomEvent("ds-header-menu", { bubbles: true, composed: true, detail: { open } })),
+    });
+  }
+
+  private words(value: string | undefined): string {
+    if (!value) return "";
+    return this.literal ? value : getText(value) || value;
+  }
+
+  /** Light-DOM children that fill a slot: elements, or text that is not blank. */
+  private slotted(name: string): boolean {
+    return [...this.childNodes].some(node => name
+      ? node instanceof Element && node.getAttribute("slot") === name
+      : node instanceof Element ? !node.hasAttribute("slot") : node.nodeType === Node.TEXT_NODE && Boolean(node.textContent?.trim()));
+  }
+
+  private links(): HTMLAnchorElement[] {
+    return [...this.children].filter((child): child is HTMLAnchorElement => child instanceof HTMLAnchorElement && !child.hasAttribute("slot"));
+  }
+
+  private onNavChange = () => {
+    markCurrentLink(this.links());
+    this.requestUpdate();
+  };
+
+  render() {
+    const menu = getText(MENU_LABEL) || MENU_LABEL;
+    const close = getText("Close") || "Close";
+    const hasNav = this.slotted("");
+    const hasActions = this.slotted("actions");
+    const brand = this.slotted("brand")
+      ? html`<span class="ds-header__brand" part="brand"><slot name="brand" @slotchange=${this.relabel}></slot></span>`
+      : 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">
+      ${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>
+      <button class="ds-button ds-button--icon ds-header__toggle" part="toggle" type="button" aria-label=${menu} aria-controls="drawer" ?hidden=${!hasNav && !hasActions}>
+        <ds-icon type="menu" size="large" aria-hidden="true"></ds-icon><ds-icon type="close" size="large" aria-hidden="true"></ds-icon>
+      </button>
+      <dialog class="ds-dialog ds-drawer" part="drawer" id="drawer" aria-label=${menu}>
+        <div class="ds-drawer__bar"><button class="ds-button ds-button--icon ds-drawer__close" part="close" type="button" aria-label=${close}>
+          <ds-icon type="close" size="large" aria-hidden="true"></ds-icon>
+        </button></div>
+      </dialog>
+    </header>`;
+  }
+}
+
+define("ds-header", Header);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-header": Header;
+  }
+}

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

@@ -0,0 +1,184 @@
+import { LitElement, html, unsafeCSS, type PropertyValues } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { define } from "../0-face/define";
+import { attachDrawer, type Drawer } from "../0-face/drawer";
+import { getText } from "../0-face/i18n";
+import "../2-core/ds-icon";
+import controls from "../1-root/controls.css?inline";
+import styles from "./styles/ds-page.css?inline";
+
+export type PageLayout = "sidebar" | "split" | "inspector" | "column" | "centered" | "tiles";
+export const PAGE_LAYOUTS: readonly PageLayout[] = ["sidebar", "split", "inspector", "column", "centered", "tiles"];
+
+/**
+ * A standard page: where units stand on the grid. Every layout uses the same
+ * five areas, so content can move between layouts without being rewritten.
+ *
+ * - `slot="header"` runs along the top of the main area
+ * - `slot="nav"` is the leading column: navigation, or the list in `split`
+ * - the default slot is the main area
+ * - `slot="aside"` is the trailing column, shown by `inspector`
+ * - `slot="footer"` runs along the bottom of the main area
+ *
+ * Columns are whole squares: `sidebar` and `inspector` lead with 12, `split`
+ * with 16; `column` is 32 wide and `centered` 16, and `measure` sets either in
+ * whole squares. A centred column stands on a whole square: the room beside it
+ * is rounded down to squares, so the column never straddles a grid line.
+ * `tiles` places each main child in a 12-square tile. Below 30 squares of
+ * width every layout stacks.
+ *
+ * With `drawer`, the navigation folds away below 30 squares instead of
+ * standing above the work: a menu button one square wide stands before the
+ * header and opens it in a drawer over the page (0-face/drawer.ts, the
+ * header's), with focus kept inside, closed by Escape, its close button, a
+ * link or the page widening, and the page's scroll held behind it.
+ *
+ * @element ds-page
+ * @attr layout - `sidebar`, `split`, `inspector`, `column`, `centered` or `tiles`.
+ * @attr divided - Draws a hairline between the columns.
+ * @attr measure - Width of the `column` or `centered` column in whole squares.
+ * @attr fill - Takes its container's height; each column scrolls on its own.
+ * @attr view - Labels each area with its slot name, for inspection.
+ * @attr drawer - Folds the navigation into a drawer on a narrow page.
+ * @attr drawer-label - The menu button's and drawer's name: a translation key, the shared word "Menu" by default.
+ * @fires ds-page-drawer - The drawer opened or closed; `detail.open` says which.
+ *
+ * @example
+ * <ds-page layout="sidebar">
+ *   <ds-sidebar slot="nav" label="Projects"></ds-sidebar>
+ *   <ds-row slot="header" fill>…</ds-row>
+ *   <ds-list>…</ds-list>
+ * </ds-page>
+ */
+export class Page extends LitElement {
+  static properties = {
+    layout: { type: String, reflect: true },
+    divided: { type: Boolean, reflect: true },
+    measure: { type: Number, reflect: true },
+    fill: { type: Boolean, reflect: true },
+    view: { type: Boolean, reflect: true },
+    drawer: { type: Boolean, reflect: true },
+    drawerLabel: { type: String, attribute: "drawer-label" },
+  };
+
+  declare layout: PageLayout;
+  declare divided: boolean;
+  declare measure: number | undefined;
+  declare fill: boolean;
+  declare view: boolean;
+  declare drawer: boolean;
+  declare drawerLabel: string | undefined;
+
+  static styles = [unsafeCSS(controls), unsafeCSS(styles)];
+
+  private navigationDrawer: Drawer | null = null;
+  private readonly relabel = () => this.requestUpdate();
+
+  constructor() {
+    super();
+    this.layout = "sidebar";
+    this.divided = false;
+    this.fill = false;
+    this.view = false;
+    this.drawer = false;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("language-changed", this.relabel);
+    window.addEventListener("translations-loaded", this.relabel);
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener("language-changed", this.relabel);
+    window.removeEventListener("translations-loaded", this.relabel);
+    this.navigationDrawer?.destroy();
+    this.navigationDrawer = null;
+    super.disconnectedCallback();
+  }
+
+  /** Whether the navigation drawer is open. */
+  get drawerOpen(): boolean {
+    return this.navigationDrawer?.isOpen ?? false;
+  }
+
+  /** Open the navigation drawer (on a narrow page with `drawer`). */
+  openDrawer(): void { this.navigationDrawer?.open(); }
+
+  /** Close the navigation drawer. */
+  closeDrawer(): void { this.navigationDrawer?.close(); }
+
+  protected updated(changed: PropertyValues<this>) {
+    super.updated(changed);
+    if (!changed.has("drawer")) return;
+    if (!this.drawer) {
+      this.navigationDrawer?.destroy();
+      this.navigationDrawer = null;
+      return;
+    }
+    const root = this.renderRoot;
+    const toggle = root.querySelector<HTMLElement>('[part="drawer-toggle"]');
+    const panel = root.querySelector<HTMLDialogElement>('[part="drawer"]');
+    const nav = root.querySelector('[part="nav"]');
+    if (!toggle || !panel || !nav || this.navigationDrawer) return;
+    this.navigationDrawer = attachDrawer({
+      toggle, panel, content: [nav],
+      onToggle: open => this.dispatchEvent(new CustomEvent("ds-page-drawer", { bubbles: true, composed: true, detail: { open } })),
+    });
+  }
+
+  render() {
+    const label = getText(this.drawerLabel || "Menu") || this.drawerLabel || "Menu";
+    const close = getText("Close") || "Close";
+    return html`
+      <div class="page" part="page" style=${ifDefined(measureStyle(this.measure))}>
+        <div class="bar" part="bar" ?hidden=${!this.drawer}>
+          <button class="ds-button ds-button--icon" part="drawer-toggle" type="button" aria-label=${label} aria-controls="drawer">
+            <ds-icon type="menu" size="large" aria-hidden="true"></ds-icon><ds-icon type="close" size="large" aria-hidden="true"></ds-icon>
+          </button>
+        </div>
+        <dialog class="ds-dialog ds-drawer" part="drawer" id="drawer" aria-label=${label}>
+          <div class="ds-drawer__bar"><button class="ds-button ds-button--icon ds-drawer__close" part="drawer-close" type="button" aria-label=${close}>
+            <ds-icon type="close" size="large" aria-hidden="true"></ds-icon>
+          </button></div>
+        </dialog>
+        <div class="area nav" part="nav" data-area="nav"><slot name="nav"></slot></div>
+        <div class="area header" part="header" data-area="header"><slot name="header"></slot></div>
+        <div class="area main" part="main" data-area="main"><slot></slot></div>
+        <div class="area aside" part="aside" data-area="aside"><slot name="aside"></slot></div>
+        <div class="area footer" part="footer" data-area="footer"><slot name="footer"></slot></div>
+      </div>
+    `;
+  }
+
+  firstUpdated() {
+    // An area with nothing in it takes no room, so a header or footer is optional.
+    this.renderRoot.querySelectorAll("slot").forEach(slot => {
+      const sync = () => slot.parentElement?.toggleAttribute("data-empty", slot.assignedNodes({ flatten: true }).every(empty));
+      slot.addEventListener("slotchange", sync);
+      sync();
+    });
+  }
+}
+
+/**
+ * A measure is a count of squares: 28 is 28 squares, never 28.5 or 28px. A
+ * fraction rounds to the nearest square, and anything that is not a positive
+ * number is ignored so the layout keeps its own width.
+ */
+export function measureStyle(measure: number | null | undefined): string | undefined {
+  const squares = Math.round(Number(measure));
+  return Number.isFinite(squares) && squares >= 1 ? `--ds-page-measure: calc(${squares} * var(--ds-unit))` : undefined;
+}
+
+function empty(node: Node): boolean {
+  return node.nodeType === Node.TEXT_NODE ? !node.textContent?.trim() : node.nodeType !== Node.ELEMENT_NODE;
+}
+
+define("ds-page", Page);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-page": Page;
+  }
+}

package/DS1/4-page/email.ts

@@ -40,9 +40,8 @@ export function gridText(content: string): string {
   return `<div class="ds-email-ink" style="display:block;position:relative;top:2px;padding-left:2px">${content}</div>`
 }
 
-/** Static equivalent of Ezo’s ezo-button[primary] containing ezo-text.
- * Ezo client/design/2-core/styles/ezo-button.css: 16px control, 0.5px horizontal inset.
- * Ezo client/design/2-core/styles/ezo-text.css: centered 15px line in a 16px text box.
+/** Static equivalent of a primary ds-button containing ds-text:
+ * a 16px control with a 0.5px horizontal inset, and a centered 15px line in a 16px text box.
  * Half-pixel vertical padding reproduces that centering without Lit or flexbox.
  */
 export function primaryEmailButton(

package/DS1/4-page/styles/ds-container.css

@@ -9,6 +9,7 @@
   background-color: var(--background-color);
   box-sizing: border-box;
 }
+:host([hidden]) { display: none !important; }
 
 /* Ensure children don't overflow */
 :host ::slotted(*) {

package/DS1/4-page/styles/ds-document.css

@@ -0,0 +1,18 @@
+/* ds-document.css */
+/* The element places the two columns; 1-root/document.css draws them, and the
+   writing in the page is drawn by prose.css, which the element brings. */
+
+:host {
+  display: block;
+  min-width: 0;
+}
+
+:host([hidden]),
+[hidden] {
+  display: none !important;
+}
+
+/* The page's own contents take the list's place. */
+::slotted([slot="contents"]) {
+  margin: 0;
+}

package/DS1/4-page/styles/ds-footer.css

@@ -0,0 +1,29 @@
+/* ds-footer.css */
+/* The element places the block; 1-root/footer.css draws it and controls.css
+   the buttons. */
+
+:host {
+  display: block;
+  min-width: 0;
+}
+
+:host([hidden]),
+[hidden] {
+  display: none !important;
+}
+
+/* A brand of the page's own takes the mark's line; a slotted legal line its words. */
+::slotted([slot="brand"]) {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--ds-unit) / 2);
+  align-self: flex-start;
+  height: var(--ds-unit);
+  color: inherit;
+  text-decoration: none;
+}
+
+::slotted([slot="legal"]) {
+  margin: 0;
+  font: inherit;
+}

package/DS1/4-page/styles/ds-grid.css

@@ -1,95 +1,41 @@
-/* ds-grid.css */
-/* Grid layout component styles */
-
+/* A one-square pitch by default. Rules stay hairlines at every surface scale. */
 :host {
-  margin-top: 0.5px !important;
-  margin-left: 0.5px !important;
-  display: grid;
-  width: 1440px;
-  height: 1280px;
-  grid-template-columns: repeat(auto-fill, 19px);
-  grid-template-rows: repeat(auto-fill, 19px);
-  gap: 1px;
-  row-rule: calc(1px * var(--sf)) solid var(--grid-color);
-  column-rule: calc(1px * var(--sf)) solid var(--grid-color);
-  outline: calc(1px * var(--sf)) solid light-dark(var(--sharp-blue), var(--yellow));
+  --grid-scale: var(--ds-sf, var(--sf, 1));
+  display: block;
   position: fixed;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
+  width: var(--ds-grid-width, calc(1440px * var(--grid-scale)));
+  height: var(--ds-grid-height, max(100vh, calc(1280px * var(--grid-scale))));
   pointer-events: none;
-  z-index: 300;
+  z-index: var(--ds-grid-z-index, 300);
 }
-
-/* DO NOT CHANGE THIS GRID CODE FOR MOBILE. ITS PERFECT FOR MOBILE. */
-:host(.mobile) {
-  width: calc(100% - calc(1px * var(--sf)));
-  max-width: 100vw;
-  margin-left: 0.5px !important;
-  margin-top: 0 !important;
-  box-sizing: border-box;
-  position: fixed;
-  top: calc(0.5px * var(--sf));
-  left: 50%;
-  transform: translateX(-50%);
-  pointer-events: none;
-  z-index: 300;
-  gap: calc(1px * var(--sf));
-  grid-template-columns: repeat(14, calc(19px * var(--sf)));
-  grid-template-rows: repeat(auto-fill, calc(19px * var(--sf)));
-}
-
-:host([align="left"]) {
-  left: 0;
-  transform: none;
-}
-
-:host([align="center"]) {
-  left: 50%;
-  transform: translateX(-50%);
+:host([hidden]) { display: none !important; }
+:host([align="left"]) { left: 0; transform: none; }
+:host([align="right"]) { left: auto; right: 0; transform: none; }
+@media (max-width: 768px) {
+  :host { width: calc(100% - 1px); max-width: 100vw; }
 }
-
-:host([align="right"]) {
-  left: auto;
-  right: 0;
-  transform: none;
+/* The containing element establishes positioning; its content stays above the paper. */
+:host([contained]) { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; transform: none; z-index: 0; }
+.paper {
+  position: absolute;
+  inset: 0;
+  --cell: var(--ds-grid-unit, calc(var(--pitch-x) * var(--grid-scale)));
+  --row: var(--ds-grid-row, calc(var(--pitch-y) * var(--grid-scale)));
+  --stroke: var(--ds-grid-stroke, 1px);
+  background-color: var(--paper);
+  background-size: var(--cell) var(--row);
+  background-position: calc(var(--ds-grid-origin-x, 0px) - var(--stroke) / 2) calc(var(--ds-grid-origin-y, 0px) - var(--stroke) / 2);
+  background-repeat: repeat;
 }
-
-/* Visible 19px tracks when CSS Gap Decorations (`row-rule`) is unavailable */
-@supports not (row-rule: 1px solid black) {
-  :host {
-    background-image:
-      repeating-linear-gradient(
-        to right,
-        transparent 0,
-        transparent 19px,
-        var(--grid-color) 19px,
-        var(--grid-color) 20px
-      ),
-      repeating-linear-gradient(
-        to bottom,
-        transparent 0,
-        transparent 19px,
-        var(--grid-color) 19px,
-        var(--grid-color) 20px
-      );
-  }
-
-  :host(.mobile) {
-    background-image:
-      repeating-linear-gradient(
-        to right,
-        transparent 0,
-        transparent calc(19px * var(--sf, 1)),
-        var(--grid-color) calc(19px * var(--sf, 1)),
-        var(--grid-color) calc(20px * var(--sf, 1))
-      ),
-      repeating-linear-gradient(
-        to bottom,
-        transparent 0,
-        transparent calc(19px * var(--sf, 1)),
-        var(--grid-color) calc(19px * var(--sf, 1)),
-        var(--grid-color) calc(20px * var(--sf, 1))
-      );
-  }
+[data-pattern="grid"] { background-image: linear-gradient(to right, var(--ink) var(--stroke), transparent var(--stroke)), linear-gradient(to bottom, var(--ink) var(--stroke), transparent var(--stroke)); }
+[data-pattern="lines"] { background-image: linear-gradient(to bottom, var(--ink) var(--stroke), transparent var(--stroke)); }
+[data-pattern="columns"] { background-image: linear-gradient(to right, var(--ink) var(--stroke), transparent var(--stroke)); }
+[data-pattern="dots"] {
+  background-image: radial-gradient(circle, var(--ink) var(--stroke), transparent var(--stroke));
+  background-position: var(--ds-grid-origin-x, 0px) calc(var(--ds-grid-origin-y, 0px) - var(--row) / 2);
 }
+[data-pattern="none"] { background-image: none; }
+@media print { :host(:not([contained])) { display: none; } }

package/DS1/4-page/styles/ds-header.css

@@ -0,0 +1,57 @@
+/* ds-header.css */
+/* The element places the row; 1-root/header.css draws it, drawer.css its
+   drawer and controls.css the buttons. The links are the page's own, slotted:
+   they take the navigation's look here, and a page's own link styles win. */
+
+:host {
+  display: block;
+  min-width: 0;
+}
+
+:host([sticky]) {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+:host([hidden]),
+[hidden] {
+  display: none !important;
+}
+
+::slotted(a) {
+  display: block;
+  height: var(--ds-unit);
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  line-height: var(--ds-unit);
+  text-decoration-line: underline;
+  text-decoration-thickness: 1px;
+  text-decoration-color: transparent;
+  text-underline-offset: calc(2px * var(--ds-sf));
+  white-space: nowrap;
+}
+
+::slotted(a:hover) {
+  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
+}
+
+::slotted(a[aria-current]:not([aria-current="false"])) {
+  text-decoration-color: currentColor;
+}
+
+::slotted(a:focus-visible) {
+  outline: 2px solid var(--ds-focus-ring);
+  outline-offset: 1px;
+}
+
+/* A brand of the page's own takes the brand's line. */
+::slotted([slot="brand"]) {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--ds-unit) / 2);
+  height: var(--ds-unit);
+  color: inherit;
+  text-decoration: none;
+}