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

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

@@ -2,11 +2,17 @@ import { LitElement, css, html, unsafeCSS } from "lit";
 import { define } from "../0-face/define";
 import "../2-core/ds-button";
 import "../2-core/ds-icon";
+import { bindDialogSwipe, type DialogPlacement } from "../0-face/dialog-swipe";
 import "./styles/ds-dialog.css";
-import dialogStyles from "./styles/ds-dialog.css?inline";
+import "../1-root/dialog-placement.css";
+import frameStyles from "./styles/ds-dialog.css?inline";
+import placementStyles from "../1-root/dialog-placement.css?inline";
 import metrics from "../1-root/component-metrics.css?inline";
 
-export type DialogCloseReason = "escape" | "backdrop" | "outside" | "button" | "native";
+export type { DialogPlacement } from "../0-face/dialog-swipe";
+export type DialogCloseReason = "escape" | "backdrop" | "outside" | "button" | "native" | "swipe";
+const dialogStyles = `${frameStyles}\n${placementStyles}`;
+const PLACEMENTS = new Set<string>(["sheet", "end", "start"]);
 const openDialogs = new WeakMap<Document, Set<Dialog>>();
 type SavedStyle = { style: CSSStyleDeclaration; name: string; value: string; priority: string; locked: string };
 const scrollStyles = new WeakMap<Document, { declarations: SavedStyle[]; x: number; y: number }>();
@@ -60,6 +66,9 @@ function styleRoot(root: Node) {
 /** A native light-DOM dialog keeps forms and accessible ID references together.
  * The browser owns the top layer, inert background and modal focus navigation.
  * Listen to ds-close-request and preventDefault to control whether it closes.
+ * `placement` stands it in the centre (the default), as a sheet from the
+ * bottom (`"sheet"`) or as a drawer at the end or start (`"end"`, `"start"`),
+ * which slide in and out and a finger swipes away (reason `"swipe"`).
  */
 export class Dialog extends LitElement {
   static properties = {
@@ -70,10 +79,11 @@ export class Dialog extends LitElement {
     holdScroll: { type: Boolean, attribute: "hold-scroll" },
     closeOnEscape: { type: Boolean, attribute: "close-on-escape" },
     closeOnBackdrop: { type: Boolean, attribute: "close-on-backdrop" },
+    placement: { type: String, reflect: true },
     anchor: { attribute: false },
     returnFocus: { attribute: false },
   };
-  static styles = [unsafeCSS(metrics), css`:host { display: contents; }`];
+  static styles = [unsafeCSS(metrics), css`:host { display: contents; } :host([hidden]) { display: none !important; }`];
   declare open: boolean;
   declare nonModal: boolean;
   declare closeOnOutside: boolean;
@@ -81,6 +91,8 @@ export class Dialog extends LitElement {
   declare holdScroll: boolean;
   declare closeOnEscape: boolean;
   declare closeOnBackdrop: boolean;
+  /** Where it stands: `"center"`, a `"sheet"` from the bottom, or a drawer at the `"end"` or `"start"`. An anchored panel ignores it. */
+  declare placement: DialogPlacement;
   /** A viewport point for a floating panel; null uses ordinary dialog layout. */
   declare anchor: { x: number; y: number } | null;
   /** Resolve a replacement opener after the product has rendered its closed state. */
@@ -92,6 +104,7 @@ export class Dialog extends LitElement {
   private outsidePress: boolean | null = null;
   private observer = new MutationObserver(() => this.bindDialog());
   private sizeObserver: ResizeObserver | null = null;
+  private unbindSwipe: (() => void) | null = null;
 
   constructor() {
     super();
@@ -102,6 +115,7 @@ export class Dialog extends LitElement {
     this.holdScroll = false;
     this.closeOnEscape = true;
     this.closeOnBackdrop = true;
+    this.placement = "center";
     this.anchor = null;
     this.returnFocus = null;
   }
@@ -119,7 +133,25 @@ export class Dialog extends LitElement {
     super.disconnectedCallback();
   }
 
-  protected updated() { this.syncOpen(); this.place(); }
+  protected updated() { this.syncPlacement(); this.syncOpen(); this.place(); }
+
+  /** Mark the native frame with its placement before it opens, so it slides in from its edge, and let a finger swipe it away. */
+  private syncPlacement() {
+    const dialog = this.dialog;
+    if (!dialog) return;
+    const placement = !this.anchor && PLACEMENTS.has(this.placement) ? this.placement : null;
+    if (placement) dialog.setAttribute("data-ds-placement", placement);
+    else dialog.removeAttribute("data-ds-placement");
+    if (placement && !this.unbindSwipe) {
+      this.unbindSwipe = bindDialogSwipe(dialog, {
+        placement: () => (!this.anchor && PLACEMENTS.has(this.placement) ? this.placement : "center"),
+        onDismiss: () => this.requestClose("swipe"),
+      });
+    } else if (!placement && this.unbindSwipe) {
+      this.unbindSwipe();
+      this.unbindSwipe = null;
+    }
+  }
 
   /** Keep an anchored panel inside the visible viewport as its content or keyboard changes. */
   place = () => {
@@ -147,6 +179,7 @@ export class Dialog extends LitElement {
     dialog?.addEventListener("close", this.onNativeClose);
     dialog?.addEventListener("pointerdown", this.onPointerDown);
     dialog?.addEventListener("click", this.onClick);
+    this.syncPlacement();
     this.syncOpen();
   };
 
@@ -156,6 +189,9 @@ export class Dialog extends LitElement {
     dialog?.removeEventListener("close", this.onNativeClose);
     dialog?.removeEventListener("pointerdown", this.onPointerDown);
     dialog?.removeEventListener("click", this.onClick);
+    this.unbindSwipe?.();
+    this.unbindSwipe = null;
+    dialog?.removeAttribute("data-ds-placement");
     if (dialog?.open) dialog.close();
     this.release();
     this.dialog = null;

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

@@ -0,0 +1,240 @@
+// ds-document.ts
+// A document page (terms, a privacy policy, a legal notice, a help article):
+// the writing as prose, with contents built from its headings that mark the
+// section in view. Drawn by 1-root/document.css, the same classes a page
+// without scripts writes; the writing stays in the page and prose.css draws it.
+
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { getText } from "../0-face/i18n";
+import { define } from "../0-face/define";
+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";
+import proseRules from "../1-root/prose.css?raw";
+import styles from "./styles/ds-document.css?inline";
+
+/** The shared word over the contents. */
+export const CONTENTS_LABEL = "Contents";
+
+/** One entry in the contents: a heading in the writing. */
+export interface DocumentEntry {
+  id: string;
+  text: string;
+  level: number;
+}
+
+/**
+ * An id for a heading from its words: letters and digits in any script,
+ * joined by hyphens, unique among `taken`. Words with none of either get
+ * `section-<n>`.
+ */
+export function headingId(text: string, taken: Set<string>, index: number): string {
+  const base = text.normalize("NFKC").toLowerCase().trim().replace(/[^\p{L}\p{N}]+/gu, "-").replace(/^-+|-+$/g, "") || `section-${index + 1}`;
+  let id = base;
+  for (let n = 2; taken.has(id); n++) id = `${base}-${n}`;
+  taken.add(id);
+  return id;
+}
+
+/** The heading levels an attribute names, between 2 and 6: `2` by default, `2 3` for two levels. */
+export function documentLevels(value: string | null | undefined): number[] {
+  const levels = [...new Set(String(value ?? "2").split(/[\s,]+/).map(Number).filter(level => Number.isInteger(level) && level >= 2 && level <= 6))].sort();
+  return levels.length ? levels : [2];
+}
+
+/**
+ * The rules for the writing, which stands in the page: prose.css and the
+ * definition table, adopted once per root the element stands in. Their
+ * imports (the tokens) are left out: the element's host carries the measures,
+ * and the writing inherits them.
+ */
+const styledRoots = new WeakSet<Document | ShadowRoot>();
+function styleRoot(root: Node) {
+  const target = root instanceof ShadowRoot ? root : root instanceof Document ? root : null;
+  if (!target || styledRoots.has(target) || typeof CSSStyleSheet === "undefined" || !("adoptedStyleSheets" in target)) return;
+  try {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync([proseRules, documentRules].map(css => css.replace(/^@import[^;]*;\s*$/gm, "")).join("\n"));
+    target.adoptedStyleSheets = [...target.adoptedStyleSheets, sheet];
+    styledRoots.add(target);
+  } catch {
+    // A browser without constructable sheets keeps the page's own copy of prose.css.
+  }
+}
+
+/**
+ * @element ds-document
+ * @prop {string} levels - The heading levels the contents list: `2` by default, `2 3` for two.
+ * @prop {string} label - The contents' title: a translation key, the shared word "Contents" by default.
+ * @prop {boolean} literal - Show `label` as written, never looked up.
+ * @prop {boolean} hideContents - Leave the contents out (`hide-contents`).
+ *
+ * @slot - The writing: native headings, paragraphs, lists, tables and a
+ *   definition table (`<dl class="ds-definitions">`), as prose. The element
+ *   marks itself `data-ds-prose` and brings the prose sheet.
+ * @slot contents - Contents of the page's own, in place of the built ones.
+ *
+ * The contents list the writing's headings at `levels`, giving a heading an
+ * id from its words when it has none. A link scrolls to its heading, and the
+ * section in view is marked `aria-current="location"`. With fewer than two
+ * headings there are no contents.
+ *
+ * @example
+ * <ds-document>
+ *   <h1>Terms</h1>
+ *   <h2>Using the service</h2><p>…</p>
+ *   <h2>Payments</h2><p>…</p>
+ * </ds-document>
+ */
+export class DocumentPage extends LitElement {
+  static properties = {
+    levels: { type: String },
+    label: { type: String },
+    literal: { type: Boolean, reflect: true },
+    hideContents: { type: Boolean, attribute: "hide-contents", reflect: true },
+    entries: { state: true },
+    current: { state: true },
+  };
+
+  static styles = [unsafeCSS(metrics), unsafeCSS(documentSheet), unsafeCSS(styles)];
+
+  declare levels: string;
+  declare label: string | undefined;
+  declare literal: boolean;
+  declare hideContents: boolean;
+  declare entries: DocumentEntry[];
+  declare current: string | null;
+
+  private readonly relabel = () => this.requestUpdate();
+  private observer: MutationObserver | null = null;
+  private frame = 0;
+
+  constructor() {
+    super();
+    this.levels = "2";
+    this.literal = false;
+    this.hideContents = false;
+    this.entries = [];
+    this.current = null;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    styleRoot(this.getRootNode());
+    if (!this.hasAttribute("data-ds-prose")) this.setAttribute("data-ds-prose", "");
+    window.addEventListener("language-changed", this.relabel);
+    window.addEventListener("translations-loaded", this.relabel);
+    document.addEventListener("scroll", this.onScroll, { capture: true, passive: true });
+    window.addEventListener("resize", this.onScroll, { passive: true });
+    this.observer = new MutationObserver(() => this.collect());
+    this.observer.observe(this, { childList: true, subtree: true, characterData: true, attributes: true, attributeFilter: ["id"] });
+    this.collect();
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener("language-changed", this.relabel);
+    window.removeEventListener("translations-loaded", this.relabel);
+    document.removeEventListener("scroll", this.onScroll, { capture: true });
+    window.removeEventListener("resize", this.onScroll);
+    this.observer?.disconnect();
+    this.observer = null;
+    cancelAnimationFrame(this.frame);
+    super.disconnectedCallback();
+  }
+
+  protected willUpdate(changed: Map<PropertyKey, unknown>) {
+    if (changed.has("levels") && this.hasUpdated) this.collect();
+  }
+
+  /** The headings the contents list, in the order they stand. */
+  get headings(): HTMLElement[] {
+    const levels = documentLevels(this.levels);
+    return [...this.querySelectorAll<HTMLElement>(levels.map(level => `h${level}`).join(","))]
+      .filter(heading => !heading.closest("[data-ds-not-prose]") && !heading.closest('[slot="contents"]'));
+  }
+
+  /** Reads the headings again: their words, levels and ids. */
+  collect(): void {
+    const taken = new Set([...this.querySelectorAll("[id]")].map(element => element.id));
+    const entries = this.headings.map((heading, index) => {
+      const text = (heading.textContent ?? "").replace(/\s+/g, " ").trim();
+      if (!heading.id) {
+        // Writing an id is a change the observer would hear; it reads the same.
+        heading.id = headingId(text, taken, index);
+      }
+      return { id: heading.id, text, level: Number(heading.tagName.slice(1)) };
+    });
+    const same = entries.length === this.entries.length && entries.every((entry, i) => entry.id === this.entries[i]!.id && entry.text === this.entries[i]!.text && entry.level === this.entries[i]!.level);
+    if (!same) this.entries = entries;
+    this.onScroll();
+  }
+
+  /**
+   * The section in view: the last heading at or above a fifth of the way down
+   * the view, or, scrolled to the foot of the page, the last heading in view.
+   */
+  private onScroll = () => {
+    cancelAnimationFrame(this.frame);
+    this.frame = requestAnimationFrame(() => {
+      const view = window.innerHeight || 0;
+      // At the foot of the page the last sections cannot reach the line: the last one in view is current.
+      const end = document.documentElement;
+      const line = view && window.scrollY > 0 && window.scrollY + view >= end.scrollHeight - 1 ? view : view / 5;
+      let current: string | null = null;
+      for (const entry of this.entries) {
+        const heading = this.heading(entry.id);
+        if (!heading) continue;
+        if (heading.getBoundingClientRect().top <= line) current = entry.id;
+        else break;
+      }
+      this.current = current ?? this.entries[0]?.id ?? null;
+    });
+  };
+
+  private heading(id: string): HTMLElement | undefined {
+    return this.headings.find(heading => heading.id === id);
+  }
+
+  private follow(event: MouseEvent, id: string) {
+    if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+    const heading = this.heading(id);
+    if (!heading) return;
+    event.preventDefault();
+    const smooth = !window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    heading.scrollIntoView({ block: "start", behavior: smooth ? "smooth" : "auto" });
+    if (!heading.hasAttribute("tabindex")) heading.setAttribute("tabindex", "-1");
+    heading.focus({ preventScroll: true });
+    history.replaceState(history.state, "", `#${id}`);
+    this.current = id;
+  }
+
+  render() {
+    const label = this.literal ? this.label || CONTENTS_LABEL : getText(this.label || CONTENTS_LABEL) || this.label || CONTENTS_LABEL;
+    const top = Math.min(...this.entries.map(entry => entry.level));
+    const own = [...this.children].some(child => child.getAttribute("slot") === "contents");
+    const showContents = !this.hideContents && (own || this.entries.length >= 2);
+    return html`<div class="ds-document" part="document">
+      <nav class="ds-document__toc" part="contents" aria-labelledby="contents-title" ?hidden=${!showContents}>
+        <div class="ds-document__contents">
+          <p class="ds-document__toc-title" id="contents-title" part="contents-title">${label}</p>
+          <slot name="contents" @slotchange=${this.relabel}>
+            <ol class="ds-document__toc-list" part="contents-list">
+              ${this.entries.map(entry => html`<li class=${entry.level > top ? "ds-document__toc-sub" : nothing}>
+                <a href="#${entry.id}" aria-current=${this.current === entry.id ? "location" : nothing} @click=${(event: MouseEvent) => this.follow(event, entry.id)}>${entry.text}</a>
+              </li>`)}
+            </ol>
+          </slot>
+        </div>
+      </nav>
+      <div class="ds-document__body" part="body"><slot></slot></div>
+    </div>`;
+  }
+}
+
+define("ds-document", DocumentPage);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-document": DocumentPage;
+  }
+}

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

@@ -0,0 +1,165 @@
+// 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
+// scripts writes.
+
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { getText } from "../0-face/i18n";
+import { define } from "../0-face/define";
+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. */
+export interface FooterLink {
+  /** The words: a translation key, or as written with the footer's `literal`. */
+  label: string;
+  href: string;
+  /** Opens elsewhere: in a new tab, with no referrer. */
+  external?: boolean;
+  /** The page being read: `aria-current="page"`. */
+  current?: boolean;
+}
+
+/** A footer column: a heading and its links. */
+export interface FooterColumn {
+  heading?: string;
+  links: FooterLink[];
+}
+
+/** The settings a footer offers, each a `ds-cycle` of that type. */
+export type FooterPreference = "language" | "theme";
+const PREFERENCES: readonly FooterPreference[] = ["language", "theme"];
+
+/** The preferences named by an attribute: every one 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];
+  return PREFERENCES.filter(name => named.includes(name));
+}
+
+/**
+ * @element ds-footer
+ * @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} tagline - A line about the site under the brand.
+ * @prop {FooterColumn[]} columns - The columns of links, eight squares each.
+ * @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`
+ *   buttons at the end of the last row; present but empty, both.
+ * @prop {boolean} literal - Show the words as written, never looked up.
+ *
+ * @slot brand - The brand, when it is more than words: a logo, a link of the page's own.
+ * @slot preferences - Controls of the page's own beside or in place of the cycles.
+ * @slot legal - The last line, in place of the copyright.
+ *
+ * @example
+ * <ds-footer brand="Name" tagline="What it does" preferences literal
+ *   columns='[{"heading":"Product","links":[{"label":"Download","href":"/download"}]}]'>
+ * </ds-footer>
+ */
+export class Footer extends LitElement {
+  static properties = {
+    brand: { type: String },
+    href: { type: String },
+    tagline: { type: String },
+    columns: { type: Array },
+    label: { type: String },
+    owner: { type: String },
+    year: { type: Number },
+    preferences: { type: String },
+    literal: { type: Boolean, reflect: true },
+  };
+
+  static styles = [unsafeCSS(metrics), unsafeCSS(controls), unsafeCSS(styles)];
+
+  declare brand: string | undefined;
+  declare href: string;
+  declare tagline: string | undefined;
+  declare columns: FooterColumn[];
+  declare label: string | undefined;
+  declare owner: string | undefined;
+  declare year: number | undefined;
+  declare preferences: string | null | undefined;
+  declare literal: boolean;
+
+  private readonly relabel = () => this.requestUpdate();
+
+  constructor() {
+    super();
+    this.href = "/";
+    this.columns = [];
+    this.literal = 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);
+    super.disconnectedCallback();
+  }
+
+  private words(value: string | undefined): string {
+    if (!value) return "";
+    return this.literal ? value : getText(value) || value;
+  }
+
+  private slotted(name: string): boolean {
+    return [...this.children].some(node => node.getAttribute("slot") === name);
+  }
+
+  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>`;
+  }
+
+  render() {
+    const columns = (Array.isArray(this.columns) ? this.columns : []).filter(column => column && Array.isArray(column.links));
+    const preferences = footerPreferences(this.preferences);
+    const hasPreferences = preferences.length > 0 || this.slotted("preferences");
+    const owner = this.owner ? this.words(this.owner) : this.words(this.brand);
+    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>`);
+    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>
+        ${this.tagline ? html`<p class="ds-footer__tagline" part="tagline">${this.words(this.tagline)}</p>` : nothing}
+      </div>
+      ${columns.length
+        ? this.label
+          ? html`<nav class="ds-footer__columns" part="columns" aria-label=${this.words(this.label)}>${list}</nav>`
+          : html`<div class="ds-footer__columns" part="columns">${list}</div>`
+        : 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>
+        <div class="ds-footer__preferences" part="preferences" ?hidden=${!hasPreferences}>
+          ${preferences.map(type => html`<ds-cycle type=${type}></ds-cycle>`)}
+          <slot name="preferences" @slotchange=${this.relabel}></slot>
+        </div>
+      </div>
+    </footer>`;
+  }
+}
+
+define("ds-footer", Footer);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-footer": Footer;
+  }
+}

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

@@ -1,74 +1,54 @@
-// ds-grid.ts
-// Simple grid layout component
-
 import { LitElement, html, unsafeCSS } from "lit";
-import { detectMobileDevice } from "../0-face/device";
+import { styleMap } from "lit/directives/style-map.js";
+import { define } from "../0-face/define";
 import styles from "./styles/ds-grid.css?inline";
 
-declare global {
-  interface CustomElementRegistry {
-    define(name: string, constructor: typeof LitElement): void;
-  }
-  var customElements: CustomElementRegistry;
-}
+export type GridPattern = "grid" | "lines" | "columns" | "dots" | "none";
+const patterns = new Set<GridPattern>(["grid", "lines", "columns", "dots", "none"]);
 
+/** Decorative paper or an alignment overlay; never arranges or captures content. */
 export class Grid extends LitElement {
   static properties = {
-    align: { type: String },
+    align: { type: String, reflect: true },
+    pattern: { type: String, reflect: true },
+    size: { type: Number },
+    rowSize: { type: Number, attribute: "row-size" },
+    color: { type: String },
+    paper: { type: String },
+    contained: { type: Boolean, reflect: true },
   };
-
-  align?: string;
-  private resizeObserver?: () => void;
-  private resizeTimeout?: any;
-
+  declare align: "left" | "center" | "right";
+  declare pattern: GridPattern;
+  declare size: number;
+  declare rowSize: number | undefined;
+  declare color: string;
+  declare paper: string;
+  declare contained: boolean;
   static styles = unsafeCSS(styles);
 
-  connectedCallback() {
-    super.connectedCallback();
-    this.updateMobileClass();
-
-    // Listen for resize events to update mobile class
-    this.resizeObserver = () => {
-      if (this.resizeTimeout) {
-        clearTimeout(this.resizeTimeout);
-      }
-      this.resizeTimeout = setTimeout(() => {
-        this.updateMobileClass();
-      }, 100);
-    };
-    window.addEventListener("resize", this.resizeObserver);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this.resizeObserver) {
-      window.removeEventListener("resize", this.resizeObserver);
-    }
-    if (this.resizeTimeout) {
-      clearTimeout(this.resizeTimeout);
-    }
-  }
-
-  private updateMobileClass() {
-    const isMobile = detectMobileDevice();
-    if (isMobile) {
-      this.classList.add("mobile");
-      this.classList.remove("desktop");
-    } else {
-      this.classList.add("desktop");
-      this.classList.remove("mobile");
-    }
+  constructor() {
+    super();
+    this.align = "center";
+    this.pattern = "grid";
+    this.size = 20;
+    this.rowSize = undefined;
+    this.color = "";
+    this.paper = "";
+    this.contained = false;
   }
 
   render() {
-    return html``;
+    const size = Number.isFinite(this.size) && this.size > 0 ? this.size : 20;
+    const row = Number.isFinite(this.rowSize) && this.rowSize! > 0 ? this.rowSize! : size;
+    return html`<div aria-hidden="true" class="paper" data-pattern=${patterns.has(this.pattern) ? this.pattern : "grid"}
+      style=${styleMap({
+        "--pitch-x": `${size}px`,
+        "--pitch-y": `${row}px`,
+        "--ink": this.color || "var(--ds-grid-color, color-mix(in srgb, var(--ds-text-color, var(--text-color, currentColor)) 12%, transparent))",
+        "--paper": this.paper || "var(--ds-grid-paper, transparent)",
+      })}></div>`;
   }
 }
 
-customElements.define("ds-grid", Grid);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ds-grid": Grid;
-  }
-}
+define("ds-grid", Grid);
+declare global { interface HTMLElementTagNameMap { "ds-grid": Grid } }