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

package/DS1/2-core/ds-button.ts

@@ -2,14 +2,28 @@
 // Core button component
 
 import { html, unsafeCSS } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
 import "./ds-text";
 import { Control } from "../0-face/control";
 import { define } from "../0-face/define";
 import hostStyles from "./styles/ds-button-host.css?inline";
 import styles from "./styles/ds-button.css?inline";
 
+import { renderSplit, focusSplit, type SplitSegment } from "./button-split";
+import splitStyles from "./styles/ds-button-split.css?inline";
+export type { SplitSegment } from "./button-split";
+
 export class Button extends Control {
+  static formAssociated = true;
   static properties = {
+    split: { type: Boolean, reflect: true },
+    options: { type: String },
+    segments: { attribute: false },
+    value: { type: String, reflect: true },
+    actions: { type: Boolean, reflect: true },
+    literal: { type: Boolean, reflect: true },
+    compact: { type: Boolean, reflect: true },
+    _fieldsetDisabled: { state: true },
     primary: { type: Boolean, reflect: true },
     secondary: { type: Boolean, reflect: true },
     control: { type: String, reflect: true, noAccessor: true },
@@ -17,16 +31,32 @@ export class Button extends Control {
     choice: { type: Boolean, reflect: true },
     icon: { type: Boolean, reflect: true },
     wide: { type: Boolean, reflect: true },
+    fixed: { type: Boolean, reflect: true },
     fit: { type: Boolean, reflect: true },
     danger: { type: Boolean, reflect: true },
     menuItem: { type: Boolean, reflect: true, attribute: "menu-item" },
     blank: { type: Boolean, reflect: true },
     language: { type: String },
     text: { type: String },
+    label: { type: String },
     href: { type: String },
+    target: { type: String },
+    rel: { type: String },
     _loading: { type: Boolean, state: true },
   };
 
+  declare split: boolean;
+  declare options: string;
+  declare segments: ReadonlyArray<SplitSegment> | undefined;
+  declare value: string;
+  declare actions: boolean;
+  declare literal: boolean;
+  declare compact: boolean;
+  declare private _fieldsetDisabled: boolean;
+  private splitRole = false;
+  get splitDisabled(): boolean { return this.disabled || this._fieldsetDisabled; }
+  private splitLanguageChanged = () => { if (this.split) this.requestUpdate(); };
+
   // Public properties
   declare primary: boolean;
   declare secondary: boolean;
@@ -34,6 +64,7 @@ export class Button extends Control {
   declare choice: boolean;
   declare icon: boolean;
   declare wide: boolean;
+  declare fixed: boolean;
   declare fit: boolean;
   declare danger: boolean;
   declare menuItem: boolean;
@@ -45,21 +76,43 @@ export class Button extends Control {
     this.syncControl();
     this.requestUpdate("control", old);
   }
-  protected get hostControl(): boolean { return this.control === "host"; }
+  protected get hostControl(): boolean { return this.control === "host" && !this.split; }
   declare blank: boolean;
   declare language: string;
   declare text: string;
+  /**
+   * The control's accessible name, as given, for a face that does not say
+   * what the button does on its own: a value, a number or an icon. Pass words
+   * already in the page's language.
+   */
+  declare label: string;
+  /**
+   * With `href` the face is a real link (`<a part="control">`): the browser
+   * navigates, so middle-click, ⌘- or Ctrl-click, Copy link and Enter work as
+   * on any link. `target` and `rel` go on the link; `blank` is `target="_blank"`,
+   * which gets `rel="noopener noreferrer"` unless `rel` says otherwise. A
+   * disabled link has no `href`, so it cannot navigate.
+   */
   declare href: string;
+  declare target: string;
+  declare rel: string;
 
   // Private state
   declare _loading: boolean;
 
   constructor() {
     super();
+    if (typeof this.attachInternals === "function") this.attachInternals();
+    this.split = false; this.options = ""; this.value = "";
+    this.actions = false; this.literal = false; this.compact = false; this._fieldsetDisabled = false;
+    this.addEventListener("click", event => {
+      if (this._fieldsetDisabled) { event.preventDefault(); event.stopImmediatePropagation(); }
+    }, { capture: true });
     this.active = false;
     this.choice = false;
     this.icon = false;
     this.wide = false;
+    this.fixed = false;
     this.fit = false;
     this.danger = false;
     this.menuItem = false;
@@ -69,88 +122,120 @@ export class Button extends Control {
     this.blank = false;
     this.language = "en-US";
     this.text = "";
+    this.label = "";
     this.href = "";
+    this.target = "";
+    this.rel = "";
     this._loading = false;
   }
 
-  static styles = [unsafeCSS(styles), unsafeCSS(hostStyles)];
+  static styles = [unsafeCSS(styles), unsafeCSS(hostStyles), unsafeCSS(splitStyles)];
 
   /**
    * A button holding only an icon — every close button — says so on its host,
    * so its styles can make it a 16-unit square with the icon filling it.
    */
   _reflectIcon() {
-    if (this.control !== "native") return;
+    if (this.control !== "native" || this.split) return;
     const only = this.firstElementChild;
     const icon = !this.text && this.childElementCount === 1 && only?.localName === 'ds-icon' && !(this.textContent ?? '').trim();
     this.toggleAttribute('icon', !!icon);
   }
 
   private syncSlottedControl() {
-    if (this.control !== "slotted") return;
+    if (this.control !== "slotted" || this.split) return;
     const button = this.querySelector<HTMLButtonElement>(":scope > button");
-    if (button) button.disabled = this.disabled;
+    if (button) button.disabled = this.splitDisabled;
+  }
+
+  /** A split is a named group from the moment it is in the document, before its first render. */
+  private syncSplitRole() {
+    if (this.split && !this.hasAttribute("role")) { this.setAttribute("role", "group"); this.splitRole = true; }
+    else if (!this.split && this.splitRole) { this.removeAttribute("role"); this.splitRole = false; this.syncControl(); }
   }
 
   updated() {
+    this.syncSplitRole();
     this.syncSlottedControl();
   }
 
   focus(options?: FocusOptions) {
+    if (this.split) { focusSplit(this, options); return; }
     if (this.control === "slotted") this.querySelector<HTMLElement>(":scope > :is(button, a)")?.focus(options);
     else if (this.hostControl) super.focus(options);
-    else this.shadowRoot?.querySelector("button")?.focus(options);
+    else this.shadowRoot?.querySelector<HTMLElement>('[part="control"]')?.focus(options);
   }
 
   connectedCallback() {
     super.connectedCallback();
+    this.syncSplitRole();
     this._reflectIcon();
     this.syncSlottedControl();
+    window.addEventListener("language-changed", this.splitLanguageChanged);
+    window.addEventListener("translations-loaded", this.splitLanguageChanged);
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener("language-changed", this.splitLanguageChanged);
+    window.removeEventListener("translations-loaded", this.splitLanguageChanged);
+    super.disconnectedCallback();
   }
+  formDisabledCallback(disabled: boolean) { this._fieldsetDisabled = disabled; this.syncSlottedControl(); }
 
   render() {
+    if (this.split) return renderSplit(this);
     const hasTextProps = this.text;
     if (this.control === "slotted") return html`<slot @slotchange=${this.syncSlottedControl}></slot>`;
     if (this.hostControl) return html`<slot name="icon"></slot><slot></slot><slot name="trailing"></slot>`;
 
+    const content = hasTextProps
+      ? html`<ds-text .text=${this.text}></ds-text>`
+      : html`<slot @slotchange=${this._reflectIcon}></slot>`;
+
+    if (this.href) {
+      const disabled = this.splitDisabled;
+      const target = this.target || (this.blank ? "_blank" : "");
+      const rel = this.rel || (target === "_blank" ? "noopener noreferrer" : "");
+      return html`<a
+        part="control"
+        ?primary=${this.primary}
+        ?secondary=${this.secondary}
+        href=${ifDefined(disabled ? undefined : this.href)}
+        target=${ifDefined(disabled || !target ? undefined : target)}
+        rel=${ifDefined(disabled || !rel ? undefined : rel)}
+        role=${ifDefined(disabled ? "link" : undefined)}
+        aria-disabled=${ifDefined(disabled ? "true" : undefined)}
+        aria-label=${ifDefined(this.label || undefined)}
+        @click=${this._handleClick}
+      >${content}</a>`;
+    }
+
     return html`
       <button
+        part="control"
         type="button"
         ?primary=${this.primary}
         ?secondary=${this.secondary}
-        ?disabled=${this.disabled}
+        ?disabled=${this.splitDisabled}
+        aria-label=${ifDefined(this.label || undefined)}
         @click=${this._handleClick}
       >
-        ${hasTextProps
-          ? html`<ds-text .text=${this.text}></ds-text>`
-          : html`<slot @slotchange=${this._reflectIcon}></slot>`}
+        ${content}
       </button>
     `;
   }
 
   private _handleClick(e: Event) {
     // Prevent any action if disabled and stop event propagation
-    if (this.disabled) {
-      e.preventDefault();
-      e.stopPropagation();
-      return;
-    }
-
-    // If href is provided, navigate to the URL and do not bubble further
-    if (this.href) {
+    if (this.splitDisabled) {
       e.preventDefault();
       e.stopPropagation();
-      if (this.blank) {
-        window.open(this.href, "_blank", "noopener,noreferrer");
-      } else {
-        window.location.href = this.href;
-      }
       return;
     }
 
-    // Otherwise, rely on the native 'click' event bubbling from the inner
-    // <button> through the shadow boundary to consumers of <ds-button>.
-    // Do not re-dispatch a synthetic 'click' here to avoid duplicate events.
+    // Otherwise the native click bubbles from the inner <button> or <a>
+    // through the shadow boundary to consumers of <ds-button>, and a link
+    // navigates as the browser does. Nothing is re-dispatched or redirected.
   }
 }
 

package/DS1/2-core/ds-card.ts

@@ -1,134 +1,164 @@
 // ds-card.ts
-// Card component for displaying content in a contained box
-
-import { LitElement, html, css } from "lit";
-
+// A card: one thing on a fill of its own, its name, a title, writing and a
+// picture that can run off its foot. Drawn by 1-root/card.css, the same
+// classes a page without scripts writes.
+
+import { LitElement, html, nothing, unsafeCSS, type PropertyValues } from "lit";
+import { define } from "../0-face/define";
+import metrics from "../1-root/component-metrics.css?inline";
+import card from "../1-root/card.css?inline";
+import styles from "./styles/ds-card.css?inline";
+
+/** A whole number of squares, or `undefined` for a value that is not one. */
+const squares = (value: number | undefined) =>
+  typeof value === "number" && Number.isFinite(value) && value > 0 ? Math.floor(value) : undefined;
+
+const PADDING: Record<string, string> = {
+  none: "0px",
+  small: "calc(var(--ds-unit) / 2)",
+  medium: "var(--ds-unit)",
+  large: "calc(var(--ds-unit) * 2)",
+};
+
+type Slot = "label" | "title" | "media";
+
+/**
+ * @element ds-card
+ * @prop {string} href - A destination: the whole card becomes one link.
+ * @prop {boolean} interactive - The whole card is one button-like press
+ *   target that fires `ds-card-press`; use `href` for a destination.
+ * @prop {string} tone - A palette colour for the fill (`sharp-blue`,
+ *   `apple-green`, `pink`…), drawn as its pastel and dim in dark mode, or
+ *   `ink` for the ink with the paper's words. The quiet fill by default.
+ * @prop {string} variant - `filled` (the default) or `outlined`, a 1px line
+ *   and no fill.
+ * @prop {number} width - The card's width in whole squares.
+ * @prop {number} height - The card's height in whole squares.
+ * @prop {string} padding - `none`, `small` (half a square), `medium` (one,
+ *   the default) or `large` (two).
+ * @prop {string} media - Where the picture stands: `start` (the default),
+ *   `center`, or `bleed` to run on past the padding to the end edge.
+ * @prop {boolean} disabled - Neither pressed nor followed.
+ *
+ * @slot label - The thing's name, muted, on one square.
+ * @slot title - The title, display size, a square and a half a line.
+ * @slot - Writing, one square a line.
+ * @slot media - A picture of it, a square below the words; it may run off
+ *   the card's foot and end edge and is cut there.
+ *
+ * @fires ds-card-press - An `interactive` card was pressed (click, Enter or Space).
+ *
+ * @example
+ * <ds-card href="/lists" tone="sharp-blue" width="14" height="22" media="center">
+ *   <span slot="label">Lists</span>
+ *   <span slot="title">Lists on one grid</span>
+ *   <img slot="media" src="lists.webp" alt="A list on a phone" />
+ * </ds-card>
+ */
 export class Card extends LitElement {
   static properties = {
-    variant: { type: String, reflect: true },
-    elevation: { type: Number, reflect: true },
+    href: { type: String, reflect: true },
     interactive: { type: Boolean, reflect: true },
-    disabled: { type: Boolean, reflect: true },
+    tone: { type: String, reflect: true },
+    variant: { type: String, reflect: true },
+    width: { type: Number, reflect: true },
+    height: { type: Number, reflect: true },
     padding: { type: String, reflect: true },
+    media: { type: String, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    filled: { state: true },
   };
 
-  declare variant: "default" | "outlined" | "elevated" | "filled";
-  declare elevation: number;
+  static styles = [unsafeCSS(metrics), unsafeCSS(card), unsafeCSS(styles)];
+
+  declare href: string | undefined;
   declare interactive: boolean;
-  declare disabled: boolean;
+  declare tone: string | undefined;
+  declare variant: "filled" | "outlined";
+  declare width: number | undefined;
+  declare height: number | undefined;
   declare padding: "none" | "small" | "medium" | "large";
+  declare media: "start" | "center" | "bleed";
+  declare disabled: boolean;
+  /** The named slots that hold something. */
+  declare filled: Set<Slot>;
 
   constructor() {
     super();
-    this.variant = "default";
-    this.elevation = 1;
     this.interactive = false;
-    this.disabled = false;
+    this.variant = "filled";
     this.padding = "medium";
+    this.media = "start";
+    this.disabled = false;
+    this.filled = new Set();
   }
 
-  static styles = css`
-    :host {
-      display: block;
-      box-sizing: border-box;
-      border-radius: calc(var(--025) * var(--sf, 1));
-      background-color: var(--card-background, var(--surface-color, #fff));
-      color: var(--text-color-primary);
-      transition:
-        box-shadow 0.2s ease,
-        transform 0.2s ease;
-    }
-
-    :host([variant="default"]) {
-      background-color: var(--card-background, var(--surface-color, #fff));
-      border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
-    }
-
-    :host([variant="outlined"]) {
-      background-color: transparent;
-      border: 1px solid var(--border-color, rgba(0, 0, 0, 0.2));
-    }
-
-    :host([variant="elevated"]) {
-      background-color: var(--card-background, var(--surface-color, #fff));
-      border: none;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    }
-
-    :host([variant="filled"]) {
-      background-color: var(
-        --card-background-filled,
-        var(--surface-color-secondary, #f5f5f5)
-      );
-      border: none;
-    }
-
-    :host([elevation="0"]) {
-      box-shadow: none;
-    }
-
-    :host([elevation="1"]) {
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-    }
-
-    :host([elevation="2"]) {
-      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
-    }
-
-    :host([elevation="3"]) {
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
-    }
-
-    :host([interactive]) {
-      cursor: pointer;
-    }
-
-    :host([interactive]:hover:not([disabled])) {
-      transform: translateY(-2px);
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    }
-
-    :host([interactive]:active:not([disabled])) {
-      transform: translateY(0);
-    }
-
-    :host([disabled]) {
-      opacity: 0.5;
-      pointer-events: none;
-    }
-
-    :host([padding="none"]) {
-      padding: 0;
-    }
-
-    :host([padding="small"]) {
-      padding: calc(var(--025) * var(--sf, 1));
-    }
+  protected willUpdate(changed: PropertyValues<this>) {
+    super.willUpdate(changed);
+    if (!this.hasUpdated) this.filled = this.read();
+    const width = squares(this.width);
+    const height = squares(this.height);
+    if (width) this.style.setProperty("--ds-card-width", `calc(var(--ds-unit) * ${width})`);
+    else this.style.removeProperty("--ds-card-width");
+    if (height) this.style.setProperty("--ds-card-height", `calc(var(--ds-unit) * ${height})`);
+    else this.style.removeProperty("--ds-card-height");
+    this.style.setProperty("--ds-card-padding", PADDING[this.padding] ?? PADDING.medium);
+  }
 
-    :host([padding="medium"]) {
-      padding: calc(var(--05) * var(--sf, 1));
+  /** The named slots the card's children fill, read from the children so the first paint already has them. */
+  private read(): Set<Slot> {
+    const filled = new Set<Slot>();
+    for (const child of this.children) {
+      const name = child.getAttribute("slot");
+      if (name === "label" || name === "title" || name === "media") filled.add(name);
     }
+    return filled;
+  }
 
-    :host([padding="large"]) {
-      padding: calc(var(--1) * var(--sf, 1));
-    }
+  private readonly changed = () => {
+    const next = this.read();
+    if ([...next].join() !== [...this.filled].join()) this.filled = next;
+  };
 
-    .card-content {
-      width: 100%;
-      height: 100%;
+  private press(event: Event) {
+    if (!this.interactive || this.disabled) return;
+    if (event instanceof KeyboardEvent) {
+      if (event.key !== "Enter" && event.key !== " ") return;
+      event.preventDefault();
     }
-  `;
+    this.dispatchEvent(new CustomEvent("ds-card-press", { bubbles: true, composed: true }));
+  }
 
   render() {
-    return html`
-      <div class="card-content" part="content">
-        <slot></slot>
-      </div>
-    `;
+    const tone = this.tone || nothing;
+    const media = this.media === "center" || this.media === "bleed" ? ` ds-card__media--${this.media}` : "";
+    const parts = html`
+      <span class="ds-card__label" part="label" ?hidden=${!this.filled.has("label")}><slot name="label" @slotchange=${this.changed}></slot></span>
+      <span class="ds-card__title" part="title" ?hidden=${!this.filled.has("title")}><slot name="title" @slotchange=${this.changed}></slot></span>
+      <div class="ds-card__body" part="body"><slot></slot></div>
+      <div class="ds-card__media${media}" part="media" ?hidden=${!this.filled.has("media")}><slot name="media" @slotchange=${this.changed}></slot></div>`;
+    const className = `ds-card${this.variant === "outlined" ? " ds-card--outlined" : ""}`;
+    if (this.href && !this.disabled) {
+      return html`<a class=${className} part="card" href=${this.href} data-tone=${tone}>${parts}</a>`;
+    }
+    if (this.interactive) {
+      return html`<div
+        class=${className}
+        part="card"
+        role="button"
+        tabindex=${this.disabled ? -1 : 0}
+        aria-disabled=${this.disabled ? "true" : nothing}
+        data-interactive
+        data-tone=${tone}
+        @click=${this.press}
+        @keydown=${this.press}
+      >${parts}</div>`;
+    }
+    return html`<div class=${className} part="card" data-tone=${tone}>${parts}</div>`;
   }
 }
 
-customElements.define("ds-card", Card);
+define("ds-card", Card);
 
 declare global {
   interface HTMLElementTagNameMap {