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

package/dist/2-core/ds-card.js

@@ -1,119 +1,143 @@
 // 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 } 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) => typeof value === "number" && Number.isFinite(value) && value > 0 ? Math.floor(value) : undefined;
+const PADDING = {
+    none: "0px",
+    small: "calc(var(--ds-unit) / 2)",
+    medium: "var(--ds-unit)",
+    large: "calc(var(--ds-unit) * 2)",
+};
+/**
+ * @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 {
     constructor() {
         super();
-        this.variant = "default";
-        this.elevation = 1;
+        this.changed = () => {
+            const next = this.read();
+            if ([...next].join() !== [...this.filled].join())
+                this.filled = next;
+        };
         this.interactive = false;
-        this.disabled = false;
+        this.variant = "filled";
         this.padding = "medium";
+        this.media = "start";
+        this.disabled = false;
+        this.filled = new Set();
+    }
+    willUpdate(changed) {
+        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);
+    }
+    /** The named slots the card's children fill, read from the children so the first paint already has them. */
+    read() {
+        const filled = new Set();
+        for (const child of this.children) {
+            const name = child.getAttribute("slot");
+            if (name === "label" || name === "title" || name === "media")
+                filled.add(name);
+        }
+        return filled;
+    }
+    press(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>`;
     }
 }
 Card.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 },
 };
-Card.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));
-    }
-
-    :host([padding="medium"]) {
-      padding: calc(var(--05) * var(--sf, 1));
-    }
-
-    :host([padding="large"]) {
-      padding: calc(var(--1) * var(--sf, 1));
-    }
-
-    .card-content {
-      width: 100%;
-      height: 100%;
-    }
-  `;
-customElements.define("ds-card", Card);
+Card.styles = [unsafeCSS(metrics), unsafeCSS(card), unsafeCSS(styles)];
+define("ds-card", Card);

package/dist/2-core/ds-chart.d.ts

@@ -0,0 +1,105 @@
+import { LitElement, type PropertyValues } from "lit";
+import { type DataPoint, type Marker, type SeriesKind } from "./chart/grid-chart";
+export * from "./chart/grid-chart";
+/** Independent chart configuration; no module-wide size or theme state. */
+export declare class ChartElement extends LitElement {
+    static styles: import("lit").CSSResult;
+    unit: number;
+    grid: "full" | "rows" | "none";
+    private media?;
+    private themeChanged;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected initialize(): void;
+    refreshTheme(): void;
+    protected updated(_changed: PropertyValues): void;
+}
+export declare class GridLineChart extends ChartElement {
+    connectedCallback(): void;
+    data: DataPoint[];
+    kind: SeriesKind;
+    base?: number;
+    color: string;
+    rows: number;
+    markers: Marker[];
+    timeRange: [number, number] | null;
+    extremes: boolean;
+    labels: boolean;
+    live: boolean;
+    format: (value: number) => string;
+    /** Changing this replays the draw-in. */
+    drawKey: string;
+    private dot;
+    private chart?;
+    private series?;
+    private observer?;
+    private scrubbing;
+    private dotTimer?;
+    refreshTheme(): void;
+    render(): import("lit").TemplateResult<1>;
+    protected initialize(): void;
+    resizeToUnit(): void;
+    updated(changed: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    private seriesOptions;
+    private sync;
+    private placeDot;
+    private x;
+    private down;
+    private move;
+    private up;
+    private leave;
+}
+export declare class GridSpark extends ChartElement {
+    connectedCallback(): void;
+    values: number[];
+    base?: number;
+    cols: number;
+    refreshTheme(): void;
+    render(): import("lit").TemplateResult<1>;
+    updated(changed: PropertyValues): void;
+    private draw;
+}
+export interface BarItem {
+    label: string;
+    value: number;
+    /** Drawn as an outline at its height, e.g. the expected figure. */
+    compare?: number;
+    tone?: "up" | "down" | "ink";
+    caption?: string;
+}
+export declare class GridBars extends ChartElement {
+    connectedCallback(): void;
+    items: BarItem[];
+    rows: number;
+    span: number;
+    render(): import("lit").TemplateResult<1>;
+}
+export declare class GridRatio extends ChartElement {
+    connectedCallback(): void;
+    value: number;
+    private width;
+    private observer?;
+    protected initialize(): void;
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+export interface RangeMark {
+    value: number;
+    label?: string;
+    kind: "dot" | "tick";
+}
+export declare class GridRange extends ChartElement {
+    connectedCallback(): void;
+    min: number;
+    max: number;
+    from: number;
+    to: number;
+    marks: RangeMark[];
+    private width;
+    private observer?;
+    protected initialize(): void;
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=ds-chart.d.ts.map

package/dist/2-core/ds-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-chart.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhF,OAAO,EAAE,KAAK,SAAS,EAA4B,KAAK,MAAM,EAAe,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAIzH,cAAc,oBAAoB,CAAC;AAEnC,2EAA2E;AAC3E,qBAAa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,MAAM,0BAAqB;IACN,IAAI,SAAM;IAC1B,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAU;IACpD,OAAO,CAAC,KAAK,CAAC,CAAiB;IAC/B,OAAO,CAAC,YAAY,CAA6B;IACjD,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;IAI5B,SAAS,CAAC,UAAU,IAAI,IAAI;IAC5B,YAAY,IAAI,IAAI;IACpB,SAAS,CAAC,OAAO,CAAC,QAAQ,EAAE,cAAc,GAAG,IAAI;CAIlD;AASD,qBAAa,aAAc,SAAQ,YAAY;IAC7C,iBAAiB,IAAI,IAAI;IACO,IAAI,EAAE,SAAS,EAAE,CAAM;IAC3C,IAAI,EAAE,UAAU,CAAU;IACV,IAAI,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,SAAoB;IACT,IAAI,SAAK;IACL,OAAO,EAAE,MAAM,EAAE,CAAM;IACvB,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAQ;IAC7C,QAAQ,UAAS;IACjB,MAAM,UAAS;IACf,IAAI,UAAS;IACV,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAuB;IACxF,yCAAyC;IAC7B,OAAO,SAAM;IAEhB,OAAO,CAAC,GAAG,CAAyC;IAE7D,OAAO,CAAC,KAAK,CAAC,CAAY;IAC1B,OAAO,CAAC,MAAM,CAAC,CAAS;IACxB,OAAO,CAAC,QAAQ,CAAC,CAAiB;IAClC,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,QAAQ,CAAC,CAAgC;IACjD,YAAY,IAAI,IAAI;IAEpB,MAAM;IAaN,SAAS,CAAC,UAAU,IAAI,IAAI;IAuB5B,YAAY,IAAI,IAAI;IAKpB,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAe5C,oBAAoB,IAAI,IAAI;IAQ5B,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,IAAI;IAgBZ,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,CAAC;IAIT,OAAO,CAAC,IAAI,CAKV;IAEF,OAAO,CAAC,IAAI,CAEV;IAEF,OAAO,CAAC,EAAE,CAGR;IAEF,OAAO,CAAC,KAAK,CAEX;CACH;AAED,qBAAa,SAAU,SAAQ,YAAY;IACzC,iBAAiB,IAAI,IAAI;IACO,MAAM,EAAE,MAAM,EAAE,CAAM;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,SAAK;IACrC,YAAY,IAAI,IAAI;IAEpB,MAAM;IAMN,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAKtC,OAAO,CAAC,IAAI;CAYb;AAED,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,KAAK,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,qBAAa,QAAS,SAAQ,YAAY;IACxC,iBAAiB,IAAI,IAAI;IACO,KAAK,EAAE,OAAO,EAAE,CAAM;IAC1B,IAAI,SAAK;IACT,IAAI,SAAK;IAErC,MAAM;CAqBP;AAED,qBAAa,SAAU,SAAQ,YAAY;IACzC,iBAAiB,IAAI,IAAI;IACG,KAAK,SAAO;IAC/B,OAAO,CAAC,KAAK,CAAK;IAC3B,OAAO,CAAC,QAAQ,CAAC,CAAiB;IAElC,SAAS,CAAC,UAAU,IAAI,IAAI;IAO5B,oBAAoB,IAAI,IAAI;IAK5B,MAAM;CAKP;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,KAAK,GAAG,MAAM,CAAC;CACtB;AAED,qBAAa,SAAU,SAAQ,YAAY;IACzC,iBAAiB,IAAI,IAAI;IACG,GAAG,SAAK;IACR,GAAG,SAAK;IACR,IAAI,SAAK;IACT,EAAE,SAAK;IACH,KAAK,EAAE,SAAS,EAAE,CAAM;IAC/C,OAAO,CAAC,KAAK,CAAK;IAC3B,OAAO,CAAC,QAAQ,CAAC,CAAiB;IAElC,SAAS,CAAC,UAAU,IAAI,IAAI;IAO5B,oBAAoB,IAAI,IAAI;IAK5B,MAAM;CAcP"}