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

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

@@ -0,0 +1 @@
+{"version":3,"file":"grid-chart.d.ts","sourceRoot":"","sources":["../../../DS1/2-core/chart/grid-chart.ts"],"names":[],"mappings":"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"}

package/dist/2-core/chart/grid-chart.js

@@ -0,0 +1,466 @@
+/**
+ * Grid chart: a numeric chart drawn one pixel column at a time on the 20px grid.
+ *
+ * The API follows lightweight-charts (createChart → addSeries → setData,
+ * subscribeCrosshairMove), with pixel-aligned rendering:
+ * - every row line of the chart is a price level, chosen so the scale lands on the grid;
+ * - each pixel column holds the min/max of the points inside it, so a minute series
+ *   and a five-year series draw with the same one-pixel stroke and never blur;
+ * - fills are one-pixel strokes at two-pixel intervals, for a patterned fill.
+ */
+const STEPS = [];
+for (let exp = -4; exp <= 9; exp++) {
+    for (const base of [1, 2, 2.5, 5])
+        STEPS.push(base * 10 ** exp);
+}
+export class Series {
+    constructor(chart, options) {
+        this.chart = chart;
+        this.options = options;
+        this.data = [];
+        this.markers = [];
+    }
+    setData(data) {
+        this.data = data;
+        this.chart.draw();
+    }
+    update(point) {
+        const last = this.data[this.data.length - 1];
+        if (last && last.time === point.time)
+            this.data[this.data.length - 1] = point;
+        else
+            this.data.push(point);
+        this.chart.draw();
+    }
+    setMarkers(markers) {
+        this.markers = markers;
+        this.chart.draw();
+    }
+    applyOptions(options) {
+        this.options = { ...this.options, ...options };
+        this.chart.draw();
+    }
+}
+export class GridChart {
+    constructor(canvas, options = {}) {
+        this.canvas = canvas;
+        this.width = 0;
+        this.height = 0;
+        this.dpr = 1;
+        this.series = [];
+        this.crosshairX = null;
+        this.crosshair = { point: null, x: -1, y: -1 };
+        this.listeners = new Set();
+        this.progress = 1;
+        this.frame = 0;
+        this.timeRange = null;
+        this.lastDrawn = null;
+        const ctx = canvas.getContext("2d");
+        if (!ctx)
+            throw new Error("Canvas 2D is not available");
+        this.ctx = ctx;
+        this.options = {
+            unit: 20,
+            scaleLabels: false,
+            labelEvery: 2,
+            extremes: false,
+            grid: "full",
+            format: (v) => v.toFixed(2),
+            ...options,
+        };
+        this.palette = this.readPalette();
+    }
+    addSeries(options = {}) {
+        const series = new Series(this, { kind: "area", hatch: 2, hatchOpacity: 0.28, ...options });
+        this.series.push(series);
+        return series;
+    }
+    removeSeries(series) {
+        this.series = this.series.filter((s) => s !== series);
+        this.draw();
+    }
+    applyOptions(options) {
+        this.options = { ...this.options, ...options };
+        this.draw();
+    }
+    /** Fixes the visible time range, e.g. a whole trading day while only the morning has data. */
+    setTimeRange(range) {
+        this.timeRange = range;
+        this.draw();
+    }
+    resize(width, height) {
+        this.width = Math.floor(width);
+        this.height = Math.floor(height);
+        this.dpr = window.devicePixelRatio || 1;
+        this.canvas.width = Math.round(this.width * this.dpr);
+        this.canvas.height = Math.round(this.height * this.dpr);
+        this.canvas.style.width = `${this.width}px`;
+        this.canvas.style.height = `${this.height}px`;
+        this.draw();
+    }
+    refreshTheme() {
+        this.palette = this.readPalette();
+        this.draw();
+    }
+    subscribeCrosshairMove(listener) {
+        this.listeners.add(listener);
+    }
+    unsubscribeCrosshairMove(listener) {
+        this.listeners.delete(listener);
+    }
+    /** Moves the crosshair to a pixel column (null hides it) and tells subscribers. */
+    setCrosshair(x) {
+        this.crosshairX = x === null ? null : Math.max(0, Math.min(this.plotWidth() - 1, Math.round(x)));
+        this.draw();
+        for (const listener of this.listeners)
+            listener(this.crosshair);
+    }
+    /** Draws the series in from the left. */
+    animateIn(duration = 520) {
+        cancelAnimationFrame(this.frame);
+        if (matchMedia("(prefers-reduced-motion: reduce)").matches) {
+            this.progress = 1;
+            this.draw();
+            return;
+        }
+        const start = performance.now();
+        const step = (now) => {
+            const t = Math.min(1, (now - start) / duration);
+            this.progress = 1 - (1 - t) ** 3;
+            this.draw();
+            if (t < 1)
+                this.frame = requestAnimationFrame(step);
+        };
+        this.progress = 0;
+        this.frame = requestAnimationFrame(step);
+    }
+    /** Position of the newest drawn value, for a live marker laid over the canvas. */
+    lastPoint() {
+        return this.progress === 1 ? this.lastDrawn : null;
+    }
+    destroy() {
+        cancelAnimationFrame(this.frame);
+        this.listeners.clear();
+    }
+    plotWidth() {
+        return Math.max(0, Math.floor(this.width - (this.options.scaleLabels ? this.options.unit * 2 : 0)));
+    }
+    readPalette() {
+        const probe = document.createElement("span");
+        probe.style.display = "none";
+        (this.canvas.parentNode ?? document.body).appendChild(probe);
+        const read = (name) => {
+            const fallback = { "--ds-chart-ink": "var(--text-color, #1e1e1e)", "--ds-chart-muted": "var(--base-darker-grey, #797979)", "--ds-chart-faint": "var(--slate-light, #e6e6e6)", "--ds-chart-up": "var(--apple-green, #99ff73)", "--ds-chart-down": "var(--tuned-red, #ff5f5f)", "--ds-chart-surface": "var(--background, #fff)", "--ds-chart-grid-minor": "var(--grid-color-light, #1e1e1e2b)", "--ds-chart-grid-major": "var(--grid-color-light, #1e1e1e2b)" };
+            probe.style.color = `var(${name}, ${fallback[name]})`;
+            return getComputedStyle(probe).color;
+        };
+        const palette = {
+            ink: read("--ds-chart-ink"),
+            muted: read("--ds-chart-muted"),
+            faint: read("--ds-chart-faint"),
+            up: read("--ds-chart-up"),
+            down: read("--ds-chart-down"),
+            surface: read("--ds-chart-surface"),
+            gridMinor: read("--ds-chart-grid-minor"),
+            gridMajor: read("--ds-chart-grid-major"),
+        };
+        probe.remove();
+        return palette;
+    }
+    resolve(color, fallback) {
+        if (!color)
+            return fallback;
+        if (!color.startsWith("--"))
+            return color;
+        const probe = document.createElement("span");
+        probe.style.color = `var(${color}, ${fallback})`;
+        probe.style.display = "none";
+        (this.canvas.parentNode ?? document.body).appendChild(probe);
+        const resolved = getComputedStyle(probe).color;
+        probe.remove();
+        return resolved;
+    }
+    /** Type at its size on a 20px square, scaled with the square. */
+    font(size) {
+        const family = getComputedStyle(this.canvas).getPropertyValue("--ds-chart-font").trim() || getComputedStyle(this.canvas).getPropertyValue("--typeface-regular").trim() || '"Inter Arrows", sans-serif';
+        return `${(size * this.options.unit) / 20}px ${family}`;
+    }
+    scale(min, max) {
+        const { unit, extremes } = this.options;
+        const rows = Math.max(1, Math.floor(this.height / unit));
+        const pad = extremes ? 1 : 0;
+        const usable = Math.max(1, rows - pad * 2);
+        if (max - min < 1e-9) {
+            const spread = Math.abs(max) * 0.01 || 1;
+            min -= spread;
+            max += spread;
+        }
+        let step = STEPS[STEPS.length - 1];
+        for (const candidate of STEPS) {
+            if (Math.ceil(max / candidate) - Math.floor(min / candidate) <= usable) {
+                step = candidate;
+                break;
+            }
+        }
+        const low = Math.floor(min / step);
+        const used = Math.ceil(max / step) - low;
+        const bottom = low - Math.floor((usable - used) / 2) - pad;
+        const h = rows * unit;
+        return {
+            rows,
+            y: (v) => h - (v / step - bottom) * unit,
+            valueAtRow: (row) => (bottom + (rows - row)) * step,
+        };
+    }
+    columns(data, t0, t1, n) {
+        const cols = new Array(n).fill(null);
+        const span = Math.max(1, t1 - t0);
+        data.forEach((p, index) => {
+            const c = Math.round(((p.time - t0) / span) * (n - 1));
+            if (c < 0 || c >= n)
+                return;
+            const col = cols[c];
+            if (!col)
+                cols[c] = { min: p.value, max: p.value, first: p.value, last: p.value, index };
+            else {
+                col.min = Math.min(col.min, p.value);
+                col.max = Math.max(col.max, p.value);
+                col.last = p.value;
+                col.index = index;
+            }
+        });
+        let prev = -1;
+        for (let c = 0; c < n; c++) {
+            if (!cols[c])
+                continue;
+            if (prev >= 0 && c - prev > 1) {
+                const a = cols[prev];
+                const b = cols[c];
+                for (let k = prev + 1; k < c; k++) {
+                    const t = (k - prev) / (c - prev);
+                    const v = a.last + (b.first - a.last) * t;
+                    cols[k] = { min: v, max: v, first: v, last: v, index: t < 0.5 ? a.index : b.index };
+                }
+            }
+            prev = c;
+        }
+        return cols;
+    }
+    draw() {
+        const { ctx, width, height, dpr, palette } = this;
+        if (!width || !height)
+            return;
+        const { unit, grid } = this.options;
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        ctx.clearRect(0, 0, width, height);
+        if (grid !== "none") {
+            for (let row = 0; row * unit <= height + 0.01; row++) {
+                ctx.fillStyle = row % 4 === 0 ? palette.gridMajor : palette.gridMinor;
+                ctx.fillRect(0, Math.min(row * unit, height - 1), width, 1);
+            }
+            if (grid === "full") {
+                for (let col = 0; col * unit <= width + 0.01; col++) {
+                    ctx.fillStyle = col % 4 === 0 ? palette.gridMajor : palette.gridMinor;
+                    ctx.fillRect(Math.min(col * unit, width - 1), 0, 1, height);
+                }
+            }
+        }
+        this.lastDrawn = null;
+        this.crosshair = { point: null, x: -1, y: -1 };
+        const all = this.series.flatMap((s) => s.data);
+        if (!all.length)
+            return;
+        const plotW = this.plotWidth();
+        if (plotW < 1)
+            return;
+        let t0 = Infinity;
+        let t1 = -Infinity;
+        let min = Infinity;
+        let max = -Infinity;
+        for (const p of all) {
+            t0 = Math.min(t0, p.time);
+            t1 = Math.max(t1, p.time);
+            min = Math.min(min, p.value);
+            max = Math.max(max, p.value);
+        }
+        if (this.timeRange)
+            [t0, t1] = this.timeRange;
+        for (const s of this.series) {
+            if (s.options.kind === "baseline" && s.options.baseValue !== undefined) {
+                min = Math.min(min, s.options.baseValue);
+                max = Math.max(max, s.options.baseValue);
+            }
+        }
+        const scale = this.scale(min, max);
+        const Y = (v) => Math.round(Math.max(0, Math.min(height - 1, scale.y(v))));
+        const drawn = Math.ceil(plotW * this.progress);
+        if (this.options.scaleLabels) {
+            ctx.font = this.font(10);
+            ctx.textAlign = "right";
+            ctx.textBaseline = "alphabetic";
+            ctx.fillStyle = palette.muted;
+            for (let row = 1; row < scale.rows; row++) {
+                if (row % this.options.labelEvery !== 0)
+                    continue;
+                ctx.fillText(this.options.format(scale.valueAtRow(row)), width - 2, row * unit - Math.round(unit / 4));
+            }
+        }
+        for (const series of this.series) {
+            const cols = this.columns(series.data, t0, t1, plotW);
+            const { kind = "area", hatch = 2, hatchOpacity = 0.28, baseValue } = series.options;
+            const lineColor = this.resolve(series.options.color, palette.ink);
+            const isBaseline = kind === "baseline" && baseValue !== undefined;
+            const baseY = isBaseline ? Y(baseValue) : height - 1;
+            if (isBaseline) {
+                ctx.fillStyle = palette.muted;
+                for (let x = 0; x < plotW; x += 4)
+                    ctx.fillRect(x, baseY, 2, 1);
+            }
+            for (const marker of series.markers) {
+                const x = Math.round(((marker.time - t0) / Math.max(1, t1 - t0)) * (plotW - 1));
+                if (x < 0 || x >= plotW)
+                    continue;
+                ctx.fillStyle = palette.faint;
+                for (let y = unit; y < height - unit; y += 2)
+                    ctx.fillRect(x, y, 1, 1);
+                const box = unit - 4;
+                const boxX = Math.max(0, Math.min(plotW - box, x - Math.floor(box / 2)));
+                const boxY = height - unit + 2;
+                ctx.fillStyle = palette.surface;
+                ctx.fillRect(boxX, boxY, box, box);
+                this.strokeBox(boxX, boxY, box, box, palette.muted);
+                ctx.fillStyle = palette.muted;
+                ctx.font = this.font(10);
+                ctx.textAlign = "center";
+                ctx.textBaseline = "middle";
+                ctx.fillText(marker.text, boxX + box / 2, boxY + box / 2 + 0.5);
+            }
+            let prevY = null;
+            let hi = null;
+            let lo = null;
+            for (let x = 0; x < drawn; x++) {
+                const col = cols[x];
+                if (!col) {
+                    prevY = null;
+                    continue;
+                }
+                const yFirst = prevY ?? Y(col.first);
+                const top = Math.min(Y(col.max), yFirst);
+                const bottom = Math.max(Y(col.min), yFirst);
+                const lineY = Y(col.last);
+                const color = isBaseline ? (col.last >= baseValue ? palette.up : palette.down) : lineColor;
+                if (hatch > 0 && kind !== "line" && x % hatch === 0) {
+                    ctx.globalAlpha = hatchOpacity;
+                    ctx.fillStyle = color;
+                    if (lineY < baseY - 2)
+                        ctx.fillRect(x, lineY + 2, 1, baseY - lineY - 2);
+                    else if (isBaseline && lineY > baseY + 2)
+                        ctx.fillRect(x, baseY + 1, 1, lineY - baseY - 2);
+                    ctx.globalAlpha = 1;
+                }
+                ctx.fillStyle = color;
+                ctx.fillRect(x, top, 1, bottom - top + 1);
+                prevY = lineY;
+                this.lastDrawn = { x, y: lineY };
+                if (!hi || col.max > hi.v)
+                    hi = { x, v: col.max };
+                if (!lo || col.min < lo.v)
+                    lo = { x, v: col.min };
+                if (this.crosshairX === x && series === this.series[0]) {
+                    this.crosshair = { point: series.data[col.index] ?? null, x, y: lineY };
+                }
+            }
+            if (this.options.extremes && hi && lo && this.progress === 1 && this.crosshairX === null) {
+                this.callout(hi.x, Y(hi.v), this.options.format(hi.v), "above", plotW);
+                this.callout(lo.x, Y(lo.v), this.options.format(lo.v), "below", plotW);
+            }
+        }
+        if (this.crosshair.point) {
+            const { x, y } = this.crosshair;
+            ctx.fillStyle = palette.ink;
+            ctx.fillRect(x, 0, 1, height);
+            ctx.fillStyle = palette.surface;
+            ctx.fillRect(x - 3, y - 3, 7, 7);
+            ctx.fillStyle = palette.ink;
+            ctx.fillRect(x - 2, y - 2, 5, 5);
+        }
+    }
+    strokeBox(x, y, w, h, color) {
+        const { ctx } = this;
+        ctx.fillStyle = color;
+        ctx.fillRect(x, y, w, 1);
+        ctx.fillRect(x, y + h - 1, w, 1);
+        ctx.fillRect(x, y, 1, h);
+        ctx.fillRect(x + w - 1, y, 1, h);
+    }
+    callout(x, y, text, side, plotW) {
+        const { ctx, palette, height } = this;
+        const { unit } = this.options;
+        ctx.font = this.font(10);
+        const w = Math.ceil(ctx.measureText(text).width) + 9;
+        const h = unit - 4;
+        const boxX = Math.max(0, Math.min(plotW - w, Math.round(x - w / 2)));
+        let row = side === "above" ? Math.floor(y / unit) - 1 : Math.ceil(y / unit);
+        row = Math.max(0, Math.min(Math.floor(height / unit) - 1, row));
+        const boxY = row * unit + 2;
+        ctx.fillStyle = palette.surface;
+        ctx.fillRect(boxX, boxY, w, h);
+        this.strokeBox(boxX, boxY, w, h, palette.ink);
+        const tickTop = side === "above" ? boxY + h : y + 3;
+        const tickBottom = side === "above" ? y - 3 : boxY;
+        if (tickBottom > tickTop) {
+            ctx.fillStyle = palette.ink;
+            ctx.fillRect(x, tickTop, 1, tickBottom - tickTop);
+        }
+        ctx.fillStyle = palette.ink;
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        ctx.fillText(text, boxX + w / 2, boxY + h / 2 + 0.5);
+    }
+}
+export function createChart(canvas, options) {
+    return new GridChart(canvas, options);
+}
+/** A one-row sparkline: the same column renderer, scaled to its cell. */
+export function drawSparkline(canvas, values, options) {
+    const { width, height, color } = options;
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = Math.round(width * dpr);
+    canvas.height = Math.round(height * dpr);
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+    const ctx = canvas.getContext("2d");
+    if (!ctx || values.length < 2)
+        return;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, width, height);
+    let min = Math.min(...values);
+    let max = Math.max(...values);
+    if (options.base !== undefined) {
+        min = Math.min(min, options.base);
+        max = Math.max(max, options.base);
+    }
+    const span = max - min || 1;
+    const usable = height - 5;
+    const Y = (v) => Math.round(2 + (1 - (v - min) / span) * usable);
+    if (options.base !== undefined && options.faint) {
+        ctx.fillStyle = options.faint;
+        const by = Y(options.base);
+        for (let x = 0; x < width; x += 4)
+            ctx.fillRect(x, by, 2, 1);
+    }
+    ctx.fillStyle = color;
+    let prev = null;
+    for (let x = 0; x < width - 3; x++) {
+        const pos = (x / (width - 4)) * (values.length - 1);
+        const i = Math.floor(pos);
+        const next = values[Math.min(values.length - 1, i + 1)];
+        const v = values[i] + (next - values[i]) * (pos - i);
+        const y = Y(v);
+        const a = prev ?? y;
+        ctx.fillRect(x, Math.min(a, y), 1, Math.abs(a - y) + 1);
+        prev = y;
+    }
+    if (prev !== null)
+        ctx.fillRect(width - 3, prev - 1, 3, 3);
+}

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

@@ -1,8 +1,14 @@
 import { LitElement, type PropertyValues } from "lit";
-import "./ds-icon";
 /** Saved identity colours are hex; their ink must stay legible in either theme. */
 export declare function avatarInk(color: string): string | undefined;
-/** A person's or workspace's mark. Identity selection and actions belong to the app. */
+/**
+ * A person's or workspace's mark, one control high and round by default;
+ * `shape="square"` gives it a picture's corners (`--ds-avatar-radius`, the
+ * shared corner by default). Two ways to colour it: `color` fills it, `ink`
+ * letters and outlines it on the neutral fill. Identity selection, which
+ * identities are square, and actions belong to the app. `logo` is a brand
+ * mark in its image area, unclipped and with no corners at all.
+ */
 export declare class Avatar extends LitElement {
     static properties: {
         label: {
@@ -20,6 +26,13 @@ export declare class Avatar extends LitElement {
         color: {
             type: StringConstructor;
         };
+        ink: {
+            type: StringConstructor;
+        };
+        logo: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         shape: {
             type: StringConstructor;
             reflect: boolean;
@@ -60,7 +73,11 @@ export declare class Avatar extends LitElement {
     src: string;
     icon: string;
     color: string;
-    shape: "circle" | "square" | "rounded";
+    ink: string;
+    logo: boolean;
+    /** `round` is the default; `square` takes a picture's corners. */
+    shape: "round" | "square";
+    /** `compact` is the default size, kept for products that still name it. */
     size: "default" | "compact" | "large" | "fill";
     fit: "cover" | "contain";
     mask: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"ds-avatar.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-avatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhF,OAAO,WAAW,CAAC;AAGnB,mFAAmF;AACnF,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAS3D;AAED,wFAAwF;AACxF,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAef;IACM,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;IACvC,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/C,GAAG,EAAE,OAAO,GAAG,SAAS,CAAC;IACzB,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,OAAO,CAAC;IACvB,QAAgB,MAAM,CAAU;IAChC,QAAgB,MAAM,CAAU;IAChC,MAAM,CAAC,MAAM,0BAAqB;;IAalC,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAOlD,MAAM;CAoDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}
+{"version":3,"file":"ds-avatar.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-avatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAYhF,mFAAmF;AACnF,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAS3D;AAED;;;;;;;GAOG;AACH,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAiBf;IACM,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,OAAO,CAAC;IACtB,kEAAkE;IAC1D,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAC;IAClC,2EAA2E;IACnE,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/C,GAAG,EAAE,OAAO,GAAG,SAAS,CAAC;IACzB,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,OAAO,CAAC;IACvB,QAAgB,MAAM,CAAU;IAChC,QAAgB,MAAM,CAAU;IAChC,MAAM,CAAC,MAAM,0BAAqB;;IAclC,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAOlD,MAAM;CAoDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}

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

@@ -2,8 +2,12 @@ import { LitElement, html, nothing, unsafeCSS } from "lit";
 import { styleMap } from "lit/directives/style-map.js";
 import { keyed } from "lit/directives/keyed.js";
 import { define } from "../0-face/define";
-import "./ds-icon";
+import { provideIcons } from "./ds-icon";
+import { avatarIcon } from "./generated/icon-avatar";
 import styles from "./styles/ds-avatar.css?inline";
+// The person drawing (`icon="avatar"`) comes with the avatar, so it draws in
+// the first frame instead of the initial while the deferred icons load.
+provideIcons({ avatar: avatarIcon });
 /** Saved identity colours are hex; their ink must stay legible in either theme. */
 export function avatarInk(color) {
     const match = /^#([a-f\d]{6}|[a-f\d]{3})$/i.exec(color);
@@ -16,7 +20,14 @@ export function avatarInk(color) {
     const luminance = rgb[0] * 0.2126 + rgb[1] * 0.7152 + rgb[2] * 0.0722;
     return luminance > 0.22 ? "var(--ds-black)" : "var(--ds-white)";
 }
-/** A person's or workspace's mark. Identity selection and actions belong to the app. */
+/**
+ * A person's or workspace's mark, one control high and round by default;
+ * `shape="square"` gives it a picture's corners (`--ds-avatar-radius`, the
+ * shared corner by default). Two ways to colour it: `color` fills it, `ink`
+ * letters and outlines it on the neutral fill. Identity selection, which
+ * identities are square, and actions belong to the app. `logo` is a brand
+ * mark in its image area, unclipped and with no corners at all.
+ */
 export class Avatar extends LitElement {
     constructor() {
         super();
@@ -25,10 +36,11 @@ export class Avatar extends LitElement {
         this.src = "";
         this.icon = "";
         this.color = "";
-        this.shape = "circle";
+        this.ink = "";
+        this.shape = "round";
         this.size = "default";
         this.fit = "cover";
-        this.mask = this.outlined = this.pending = this.plain = this.loaded = this.failed = false;
+        this.logo = this.mask = this.outlined = this.pending = this.plain = this.loaded = this.failed = false;
     }
     willUpdate(changed) {
         if (changed.has("src")) {
@@ -49,7 +61,7 @@ export class Avatar extends LitElement {
         >`;
         return html `<span
       class="frame"
-      style=${styleMap({ backgroundColor: !this.pending && !this.plain ? this.color || undefined : undefined, color: !this.pending ? avatarInk(this.color) : undefined })}
+      style=${styleMap({ backgroundColor: !this.pending && !this.plain ? this.color || undefined : undefined, color: !this.pending ? this.ink || avatarInk(this.color) : undefined })}
       role=${this.label ? "img" : nothing}
       aria-label=${this.label || nothing}
       aria-hidden=${this.label ? nothing : "true"}
@@ -88,6 +100,8 @@ Avatar.properties = {
     src: { type: String },
     icon: { type: String },
     color: { type: String },
+    ink: { type: String },
+    logo: { type: Boolean, reflect: true },
     shape: { type: String, reflect: true },
     size: { type: String, reflect: true },
     fit: { type: String, reflect: true },

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

@@ -13,21 +13,18 @@ export class Badge extends LitElement {
             this.measureFrame = requestAnimationFrame(() => {
                 this.measureFrame = 0;
                 const frame = this.shadowRoot.querySelector(".frame");
-                if (this.iconOnly && this.icon) {
-                    frame.style.removeProperty("width");
+                frame.style.removeProperty("width");
+                if (this.iconOnly && this.icon)
                     return;
-                }
                 const unit = frame.getBoundingClientRect().height;
                 if (!unit)
                     return;
-                const label = this.shadowRoot.querySelector(".label");
-                const icon = this.shadowRoot.querySelector("ds-icon");
-                const styles = getComputedStyle(frame);
-                const natural = label.scrollWidth + parseFloat(styles.paddingLeft) + parseFloat(styles.paddingRight)
-                    + (icon ? icon.getBoundingClientRect().width + parseFloat(styles.columnGap) : 0);
-                const width = `${Math.max(1, Math.ceil(natural / unit)) * unit}px`;
-                if (frame.style.width !== width)
-                    frame.style.width = width;
+                // Unset, the frame hugs its icon, words and padding at their fractional
+                // width, as the native class's max-content does; round that up to whole
+                // squares. (A label's scrollWidth is a whole pixel rounded to nearest:
+                // "Done" at 32.3px read as 32 and was cut short in a 40px badge.)
+                const natural = frame.getBoundingClientRect().width;
+                frame.style.width = `${Math.max(1, Math.ceil(natural / unit)) * unit}px`;
             });
         };
         this.icon = "";
@@ -35,7 +32,7 @@ export class Badge extends LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.updateComplete.then(() => {
+        void this.updateComplete.then(() => {
             if (!this.isConnected)
                 return;
             this.contentObserver?.disconnect();
@@ -47,7 +44,7 @@ export class Badge extends LitElement {
                 this.observer.observe(this);
                 this.observer.observe(this.shadowRoot.querySelector(".label"));
             }
-            document.fonts?.ready.then(this.scheduleMeasure);
+            void document.fonts?.ready.then(this.scheduleMeasure);
             document.fonts?.addEventListener("loadingdone", this.scheduleMeasure);
             this.scheduleMeasure();
         });