@santi020k/lumen-elements 3.0.1 → 4.0.0

package/dist/chart-activation.d.ts

@@ -0,0 +1,15 @@
+import { type LumenChartDatumActivationDetail } from '@santi020k/lumen-core';
+import { LumenElement } from './element-base.js';
+export interface LumenChartDatumActionsElement extends HTMLElement {
+    datumActionFormatter: (context: string) => string;
+}
+export declare abstract class LumenDatumChartElement extends LumenElement {
+    #private;
+    get datumActionFormatter(): (context: string) => string;
+    set datumActionFormatter(value: (context: string) => string);
+    disconnectedCallback(): void;
+    protected abstract renderChart(): void;
+    protected datumAttributes(detail: LumenChartDatumActivationDetail | null, context: string): string;
+    protected renderChartContent(html: string): void;
+}
+//# sourceMappingURL=chart-activation.d.ts.map

package/dist/chart-activation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-activation.d.ts","sourceRoot":"","sources":["../src/chart-activation.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,+BAA+B,EAErC,MAAM,uBAAuB,CAAA;AAE9B,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAoBhD,MAAM,WAAW,6BAA8B,SAAQ,WAAW;IAChE,oBAAoB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAA;CAClD;AAGD,8BAAsB,sBAAuB,SAAQ,YAAY;;IAI/D,IAAI,oBAAoB,IAAI,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAEtD;IAED,IAAI,oBAAoB,CAAC,KAAK,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,EAI1D;IAEQ,oBAAoB,IAAI,IAAI;IAQrC,SAAS,CAAC,QAAQ,CAAC,WAAW,IAAI,IAAI;IAEtC,SAAS,CAAC,eAAe,CAAC,MAAM,EAAE,+BAA+B,GAAG,IAAI,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM;IAMlG,SAAS,CAAC,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;CAmFjD"}

package/dist/chart-activation.js

@@ -0,0 +1,93 @@
+import { createLumenChartActivationController, parseLumenChartDatumActivation } from '@santi020k/lumen-core';
+import { LumenElement } from './element-base.js';
+const escapeAttribute = (value) => value.replaceAll('&', '&')
+    .replaceAll('"', '&quot;').replaceAll('<', '&lt;').replaceAll('>', '&gt;');
+const datumKey = (detail) => detail.kind === 'series' ?
+    JSON.stringify([detail.kind, detail.seriesId, detail.x, detail.datumId]) :
+    JSON.stringify([detail.kind, detail.x, detail.kind === 'heatmap' ? detail.y : null, detail.datumId]);
+const parseAttribute = (element) => {
+    try {
+        const value = JSON.parse(element.getAttribute('data-ui-chart-datum') ?? 'null');
+        return parseLumenChartDatumActivation(value);
+    }
+    catch {
+        return null;
+    }
+};
+export class LumenDatumChartElement extends LumenElement {
+    #controller;
+    #datumActionFormatter;
+    get datumActionFormatter() {
+        return this.#datumActionFormatter ?? (context => `${this.getAttribute('datum-action-prefix') ?? 'Open details: '}${context}`);
+    }
+    set datumActionFormatter(value) {
+        this.#datumActionFormatter = value;
+        if (this.isConnected)
+            this.renderChart();
+    }
+    disconnectedCallback() {
+        this.#controller?.destroy();
+        this.#controller = undefined;
+        super.disconnectedCallback();
+    }
+    datumAttributes(detail, context) {
+        if (!detail || !this.hasAttribute('drilldown') || this.getAttribute('drilldown') === 'false')
+            return '';
+        return ` data-ui-chart-datum="${escapeAttribute(JSON.stringify(detail))}" data-ui-chart-datum-label="${escapeAttribute(this.datumActionFormatter(context))}"`;
+    }
+    renderChartContent(html) {
+        const enabled = this.hasAttribute('drilldown') && this.getAttribute('drilldown') !== 'false';
+        const focused = this.ownerDocument.activeElement;
+        const focusedKey = focused && this.contains(focused) ? focused.getAttribute('data-ui-chart-action-key') : null;
+        const wasOpen = this.querySelector('[data-ui-chart-actions]')?.hasAttribute('open') ?? false;
+        this.toggleAttribute('data-ui-chart-activation', enabled);
+        if (enabled)
+            this.setAttribute('data-ui-chart-adapter', 'elements');
+        else
+            this.removeAttribute('data-ui-chart-adapter');
+        this.innerHTML = html;
+        if (!enabled) {
+            this.#controller?.destroy();
+            this.#controller = undefined;
+            return;
+        }
+        this.#controller ??= createLumenChartActivationController(this);
+        this.#appendActions(wasOpen, focusedKey);
+    }
+    #appendActions(wasOpen, focusedKey) {
+        const actions = new Map();
+        for (const mark of this.querySelectorAll('[data-ui-chart-datum]')) {
+            const detail = parseAttribute(mark);
+            if (detail)
+                actions.set(datumKey(detail), { detail, label: mark.getAttribute('data-ui-chart-datum-label') ?? this.datumActionFormatter(JSON.stringify(detail)) });
+        }
+        if (actions.size === 0)
+            return;
+        const disclosure = this.ownerDocument.createElement('details');
+        disclosure.className = 'ui-chart__actions';
+        disclosure.setAttribute('data-ui-chart-actions', '');
+        disclosure.open = wasOpen;
+        const summary = this.ownerDocument.createElement('summary');
+        summary.textContent = this.getAttribute('explore-data-label') ?? 'Explore chart data';
+        disclosure.append(summary);
+        const list = this.ownerDocument.createElement('ul');
+        let restoreFocus;
+        for (const [key, action] of actions) {
+            const item = this.ownerDocument.createElement('li');
+            const button = this.ownerDocument.createElement('button');
+            button.type = 'button';
+            button.className = 'ui-button ui-button--ghost ui-button--default-size';
+            button.setAttribute('data-slot', 'button');
+            button.setAttribute('data-ui-chart-datum', JSON.stringify(action.detail));
+            button.setAttribute('data-ui-chart-action-key', key);
+            button.textContent = action.label;
+            item.append(button);
+            list.append(item);
+            if (key === focusedKey)
+                restoreFocus = button;
+        }
+        disclosure.append(list);
+        this.append(disclosure);
+        restoreFocus?.focus({ preventScroll: true });
+    }
+}

package/dist/chart-html.d.ts

@@ -0,0 +1,22 @@
+import { type createLumenHistogramGeometry, type createLumenLineChartModel, type createLumenWaterfallGeometry, type LumenChartAnnotation, type LumenChartLabels, type LumenChartSeries, type LumenHeatmapDatum, type LumenHistogramBin, type LumenRangeDatum, type LumenScatterGeometry, type LumenScatterGeometryPoint, type LumenScatterReference, type LumenScatterScaleType, type LumenWaterfallDatum } from '@santi020k/lumen-core';
+export declare const escapeChartHtml: (value: number | string) => string;
+export declare const parseHistogramBins: (value: string | null) => LumenHistogramBin[];
+export declare const parseWaterfallData: (value: string | null) => LumenWaterfallDatum[];
+export declare const parseChartAnnotations: (value: string | null) => LumenChartAnnotation[];
+export declare const chartNumberAttribute: (element: HTMLElement, name: string) => number | undefined;
+export declare const chartInspectionHtml: (model: ReturnType<typeof createLumenLineChartModel>, labels: Readonly<LumenChartLabels>, formatValue: (value: number) => string, formatCategory?: (value: number | string) => string) => string;
+export declare const chartAnnotationHtml: (model: ReturnType<typeof createLumenLineChartModel>) => string;
+export declare const chartLabelsFor: (element: HTMLElement) => Readonly<LumenChartLabels>;
+export declare const chartLegendHtml: (series: readonly LumenChartSeries[], labels: Readonly<LumenChartLabels>, interactive?: boolean) => string;
+export declare const chartAxesHtml: (model: Pick<ReturnType<typeof createLumenHistogramGeometry>, "categoryTicks" | "height" | "left" | "right" | "ticks" | "y">, formatValue: (value: number) => string, labelOffset?: number) => string;
+export declare const intervalChartHtml: (model: ReturnType<typeof createLumenWaterfallGeometry> | ReturnType<typeof createLumenHistogramGeometry>, labels: Readonly<LumenChartLabels>, formatValue: (value: number) => string, formatBoundary: (value: number) => string, valueLabel: string, showTable: boolean, summaryOverride?: string | null) => string;
+export declare const scatterPlotHtml: (geometry: LumenScatterGeometry, referenceItems: readonly LumenScatterReference[], xScale: LumenScatterScaleType, plotId: string, formatX: (value: number | string) => string, formatY: (value: number) => string, labels: LumenChartLabels, datumTargets?: string) => string;
+export declare const chartDataTableHtml: (categories: readonly (number | string)[], series: readonly LumenChartSeries[], formatCategory: ((category: number | string) => string) | undefined, formatValue: ((value: number) => string) | undefined, labels: Readonly<LumenChartLabels>) => string;
+export declare const scatterDataTableHtml: (points: readonly LumenScatterGeometryPoint[], formatCategory: ((category: number | string) => string) | undefined, formatValue: ((value: number) => string) | undefined, labels: Readonly<LumenChartLabels>) => string;
+export declare const heatmapDataTableHtml: (data: readonly LumenHeatmapDatum[], labels: Readonly<LumenChartLabels>, formatValue?: (value: number) => string) => string;
+export declare const rangeDataTableHtml: (data: readonly LumenRangeDatum[], labels: Readonly<LumenChartLabels>) => string;
+export declare const chartHeaderHtml: (element: HTMLElement, showValue?: boolean) => string;
+export declare const chartCaptionHtml: (element: HTMLElement) => string;
+export declare const parseHeatmapData: (value: string | null) => LumenHeatmapDatum[];
+export declare const parseRangeData: (value: string | null) => LumenRangeDatum[];
+//# sourceMappingURL=chart-html.d.ts.map

package/dist/chart-html.d.ts.map

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

package/dist/chart-html.js

@@ -0,0 +1 @@
+import{alignLumenChartSeries as f,createLumenScatterReferences as _,formatLumenChartSummary as w,getLumenChartCategoryLabel as g,getLumenChartToneClassName as p,lumenChartTones as A,normalizeLumenHeatmapData as j,resolveLumenChartLabels as D}from"@santi020k/lumen-core";const e=t=>String(t).replaceAll("&","&amp;").replaceAll("<","&lt;").replaceAll(">","&gt;").replaceAll('"',"&quot;").replaceAll("'","&#39;"),b=t=>{try{const a=JSON.parse(t??"[]");return Array.isArray(a)?a:null}catch{return null}},m=t=>t!==null&&typeof t=="object"?{...t}:{},k=t=>{const a=b(t),r=[];for(const i of a??[null]){const l=m(i);if(typeof l.start!="number"||typeof l.end!="number"||typeof l.count!="number"||l.label!==void 0&&typeof l.label!="string")return[{start:NaN,end:NaN,count:NaN}];r.push({start:l.start,end:l.end,count:l.count,...typeof l.label=="string"?{label:l.label}:{}})}return r},v=t=>A.find(a=>a===t),L=t=>typeof t.id=="string"&&typeof t.label=="string"&&typeof t.value=="number"&&new Set([void 0,"delta","total"]).has(t.kind),S=t=>{const a=b(t),r=[];for(const i of a??[null]){const l=m(i);if(!L(l))return[{id:"invalid",label:"",value:NaN}];const n=v(l.tone);if(l.tone!==void 0&&!n)return[{id:"invalid",label:"",value:NaN}];const c=l.kind==="total"?"total":"delta";r.push({id:l.id,label:l.label,value:l.value,kind:c,...n?{tone:n}:{}})}return r},N=t=>t===void 0||t==="x"||t==="y",z=t=>{const a=[];for(const r of b(t)??[]){const i=m(r);if(typeof i.id!="string"||typeof i.label!="string"||typeof i.value!="number"&&typeof i.value!="string"||!N(i.axis))continue;const l=i.axis??"y",n=v(i.tone);a.push({id:i.id,label:i.label,value:i.value,axis:l,...n?{tone:n}:{}})}return a},F=(t,a)=>{const r=t.getAttribute(a);return r!==null&&r.trim()!==""&&Number.isFinite(Number(r))?Number(r):void 0},M=(t,a,r,i)=>{const l=t.series.map(n=>new Map(n.data.map(c=>[c.x,c])));return`<div class="ui-chart__inspection" data-ui-chart-inspection hidden>${t.categories.map((n,c)=>{const $=t.series.map((d,h)=>{const u=l[h]?.get(n)?.y,s=u==null||!Number.isFinite(u)?a.notAvailable:r(u);return`<span class="${p(d.tone,h)}" data-ui-chart-series-value="${e(d.id)}"><i aria-hidden="true"></i>${e(d.label)} <b>${e(s)}</b></span>`}).join("");return`<div hidden data-ui-chart-point="${e(JSON.stringify(n))}" data-ui-chart-position="${t.positions[c]??t.paddingLeft}"><strong>${e(g(t.series,n,i,"detail"))}</strong>${$}</div>`}).join("")}</div><p class="ui-sr-only" aria-live="polite" aria-atomic="true" data-ui-chart-announcement></p>`},T=t=>t.annotationMarks.map(a=>{const r=a.axis==="x"?`<line x1="${a.coordinate}" x2="${a.coordinate}" y1="${t.padding}" y2="${t.height-t.padding}"></line><text x="${a.coordinate+4}" y="${t.padding-8}">${e(a.label)}</text>`:`<line x1="${t.paddingLeft}" x2="${t.width-t.padding}" y1="${a.coordinate}" y2="${a.coordinate}"></line><text text-anchor="end" x="${t.width-t.padding}" y="${a.coordinate-8}">${e(a.label)}</text>`;return`<g class="ui-chart__annotation ${p(a.tone)}">${r}</g>`}).join(""),q=t=>{const a=D(void 0),r=(i,l)=>t.getAttribute(`${i}-label`)??l;return{...a,chartData:t.getAttribute("aria-label")??t.getAttribute("heading")??a.chartData,count:r("count",a.count),density:r("density",a.density),start:r("start",a.start),end:r("end",a.end),invalidData:r("invalid-data",a.invalidData),category:r("category",a.category),chartLegend:r("legend",a.chartLegend),column:r("column",a.column),empty:r("empty",a.empty),high:r("high",a.high),low:r("low",a.low),notAvailable:r("not-available",a.notAvailable),row:r("row",a.row),series:r("series",a.series),size:r("size",a.size),value:r("value",a.value),viewData:r("view-data",a.viewData),x:r("x",a.x)}},B=(t,a,r=!1)=>`<ul class="ui-chart__legend" aria-label="${e(a.chartLegend)}">${t.map((i,l)=>{const n=r?`<button type="button" class="ui-button ui-button--ghost ui-button--sm" aria-pressed="true" data-ui-chart-toggle="${e(i.id)}">${e(i.label)}</button>`:`<span aria-hidden="true"></span>${e(i.label)}`;return`<li class="${p(i.tone,l)}">${n}</li>`}).join("")}</ul>`,H=(t,a,r=16)=>{const i=t.ticks.map(n=>{const c=t.y(n);return`<line x1="${t.left}" x2="${t.right}" y1="${c}" y2="${c}"></line><text x="${t.left-8}" y="${c}">${e(a(n))}</text>`}).join(""),l=t.categoryTicks.map(n=>`<text text-anchor="${n.textAnchor}" x="${n.position}" y="${t.height-r}">${e(n.label)}</text>`).join("");return`<g class="ui-chart__grid">${i}</g><g class="ui-chart__axis-labels">${l}</g>`},J=(t,a,r,i,l,n,c=null)=>{if(t.marks.length===0)return`<p class="ui-chart__empty" role="status">${e(t.valid?a.empty:a.invalidData)}</p>`;const $="connectors"in t?t.connectors.map(o=>`<line class="ui-waterfall-chart__connector" x1="${o.x1}" x2="${o.x2}" y1="${o.y}" y2="${o.y}"></line>`).join(""):"",d=t.marks.map(o=>`<rect class="${p(o.tone)}" x="${o.x}" y="${o.y}" width="${o.width}" height="${o.height}"><title>${e(o.label)}: ${e(r(o.value))}</title></rect>`).join(""),h=t.marks.map((o,y)=>`<tr><th scope="row">${e(o.label)}</th><td>${e(i(o.start))}</td><td>${e(i(o.end))}</td><td>${e(r(o.value))}</td>${"bins"in t&&t.frequency==="density"?`<td>${t.bins[y]?.count??0}</td>`:""}</tr>`).join(""),u=n?`<details class="ui-chart__data"><summary>${e(a.viewData)}</summary><div role="group" tabindex="0" aria-label="${e(a.chartData)}"><table><thead><tr><th scope="col">${e(a.category)}</th><th scope="col">${e(a.start)}</th><th scope="col">${e(a.end)}</th><th scope="col">${e(l)}</th>${"bins"in t&&t.frequency==="density"?`<th scope="col">${e(a.count)}</th>`:""}</tr></thead><tbody>${h}</tbody></table></div></details>`:"",s=c??w([{id:"values",label:l,data:t.marks.map(o=>({x:o.key,y:o.value}))}],r,a);return`<p class="ui-sr-only" data-ui-chart-summary>${e(s)}</p><p class="ui-chart__axis-title">${e(l)}</p><div class="ui-chart__plot" role="region" tabindex="0" aria-label="${e(a.chartData)}"><svg aria-hidden="true" viewBox="0 0 ${t.width} ${t.height}">${H(t,r)}${$}<g class="ui-bar-chart__marks">${d}</g></svg></div>${u}`},O=(t,a,r,i,l,n,c,$="")=>{const d=_(a,t,r),h=d.map(s=>s.region?`<rect x="${Math.min(s.x1,s.x2)}" y="${Math.min(s.y1,s.y2)}" width="${Math.abs(s.x2-s.x1)}" height="${Math.abs(s.y2-s.y1)}"><title>${e(s.label)}</title></rect>`:`<line x1="${s.x1}" x2="${s.x2}" y1="${s.y1}" y2="${s.y2}"><title>${e(s.label)}</title></line>`).join(""),u=t.points.map(s=>[`<circle class="ui-chart-tone--${s.tone}" cx="${s.xCoordinate}"`,` cy="${s.yCoordinate}" r="${s.radius}"><title>`,`${e(s.xLabel??l(s.x))} · ${e(s.seriesLabel)}: `,`${e(s.label??n(s.y??0))}</title></circle>`].join("")).join("");return[`<div class="ui-chart__plot" role="region" tabindex="0" aria-label="${e(c.chartData)}"><svg aria-hidden="true" viewBox="0 0 ${t.width} ${t.height}">`,`<defs><clipPath id="${i}"><rect x="44" y="44" width="${t.width-88}" height="${t.height-88}"></rect></clipPath></defs>`,`<g class="ui-scatter-chart__references" clip-path="url(#${i})">${h}</g><g class="ui-scatter-chart__marks" clip-path="url(#${i})">${u}</g>${$}</svg></div>`,`<ul class="ui-scatter-chart__reference-labels">${d.map(s=>`<li>${e(s.label)}</li>`).join("")}</ul>`].join("")},P=(t,a,r,i=String,l)=>{const n=a.map(d=>f(d,t)),c=n.map(d=>`<th scope="col">${e(d.label)}</th>`).join(""),$=t.map(d=>{const h=n.map(s=>{const o=s.data.find(x=>x.x===d),y=o?.label??(o?.y===void 0||o.y===null||!Number.isFinite(o.y)?l.notAvailable:i(o.y));return`<td>${e(y)}</td>`}).join(""),u=g(n,d,r,"detail");return`<tr><th scope="row">${e(u)}</th>${h}</tr>`}).join("");return[`<details class="ui-chart__data"><summary>${e(l.viewData)}</summary>`,`<div role="group" tabindex="0" aria-label="${e(l.chartData)}"><table><thead><tr><th scope="col">${e(l.category)}</th>`,`${c}</tr></thead><tbody>${$}</tbody></table></div></details>`].join("")},R=(t,a=String,r=String,i)=>{const l=t.map(n=>[`<tr><th scope="row">${e(n.xLabel??a(n.x))}</th>`,`<td>${e(n.seriesLabel)}</td>`,`<td>${e(n.label??r(n.y??0))}</td>`,`<td>${e(n.size===void 0||n.size===null||!Number.isFinite(n.size)?i.notAvailable:r(n.size))}</td></tr>`].join("")).join("");return[`<details class="ui-chart__data"><summary>${e(i.viewData)}</summary>`,`<div role="group" tabindex="0" aria-label="${e(i.chartData)}"><table><thead><tr><th scope="col">${e(i.x)}</th>`,`<th scope="col">${e(i.series)}</th><th scope="col">${e(i.value)}</th>`,`<th scope="col">${e(i.size)}</th></tr></thead>`,`<tbody>${l}</tbody></table></div></details>`].join("")},W=(t,a,r=String)=>{const i=t.map(l=>{const n=l.label??(l.value===null||!Number.isFinite(l.value)?a.notAvailable:r(l.value));return[`<tr><th scope="row">${e(l.xLabel??l.x)}</th>`,`<td>${e(l.yLabel??l.y)}</td>`,`<td>${e(n)}</td></tr>`].join("")}).join("");return[`<details class="ui-chart__data"><summary>${e(a.viewData)}</summary>`,`<div role="group" tabindex="0" aria-label="${e(a.chartData)}"><table><thead><tr><th scope="col">${e(a.column)}</th>`,`<th scope="col">${e(a.row)}</th><th scope="col">${e(a.value)}</th></tr></thead>`,`<tbody>${i}</tbody></table></div></details>`].join("")},E=(t,a)=>{const r=t.map(i=>[`<tr><th scope="row">${e(i.xLabel??i.x)}</th>`,`<td>${e(i.low??a.notAvailable)}</td>`,`<td>${e(i.high??a.notAvailable)}</td></tr>`].join("")).join("");return[`<details class="ui-chart__data"><summary>${e(a.viewData)}</summary>`,`<div role="group" tabindex="0" aria-label="${e(a.chartData)}"><table><thead><tr><th scope="col">${e(a.category)}</th>`,`<th scope="col">${e(a.low)}</th><th scope="col">${e(a.high)}</th></tr></thead>`,`<tbody>${r}</tbody></table></div></details>`].join("")},G=(t,a=!0)=>{const r=t.getAttribute("heading"),i=t.getAttribute("description"),l=a?t.getAttribute("value"):null;return!r&&!i&&!l?"":`<header><div class="ui-chart__heading">${r?`<h3>${e(r)}</h3>`:""}${i?`<p>${e(i)}</p>`:""}</div>${l?`<strong data-ui-chart-value>${e(l)}</strong>`:""}</header>`},I=t=>{const a=t.getAttribute("caption");return a?`<figcaption>${e(a)}</figcaption>`:""},K=t=>{const a=b(t);return j(a??[])},Q=t=>{if(!t)return[];try{const a=JSON.parse(t);return Array.isArray(a)?a.flatMap(r=>{if(typeof r!="object"||r===null)return[];const i=m(r),l=n=>n===null||typeof n=="number"&&Number.isFinite(n);return typeof i.x!="string"&&typeof i.x!="number"||!l(i.low)||!l(i.high)?[]:[{high:i.high,...typeof i.id=="string"?{id:i.id}:{},...typeof i.label=="string"?{label:i.label}:{},low:i.low,x:i.x,...typeof i.xLabel=="string"?{xLabel:i.xLabel}:{}}]}):[]}catch{return[]}};export{T as chartAnnotationHtml,H as chartAxesHtml,I as chartCaptionHtml,P as chartDataTableHtml,G as chartHeaderHtml,M as chartInspectionHtml,q as chartLabelsFor,B as chartLegendHtml,F as chartNumberAttribute,e as escapeChartHtml,W as heatmapDataTableHtml,J as intervalChartHtml,z as parseChartAnnotations,K as parseHeatmapData,k as parseHistogramBins,Q as parseRangeData,S as parseWaterfallData,E as rangeDataTableHtml,R as scatterDataTableHtml,O as scatterPlotHtml};

package/dist/comparison-chart-html.d.ts

@@ -0,0 +1,4 @@
+import { type LumenChartLabels, type LumenComparisonDatum } from '@santi020k/lumen-core';
+export declare const parseComparisonData: (source: string | null) => readonly LumenComparisonDatum[];
+export declare const comparisonChartHtml: (element: HTMLElement, data: readonly LumenComparisonDatum[], paired: boolean, text: Readonly<LumenChartLabels>, formatter: (value: number) => string) => string;
+//# sourceMappingURL=comparison-chart-html.d.ts.map

package/dist/comparison-chart-html.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"comparison-chart-html.d.ts","sourceRoot":"","sources":["../src/comparison-chart-html.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8G,KAAK,gBAAgB,EAAE,KAAK,oBAAoB,EAAE,MAAM,uBAAuB,CAAA;AAKpM,eAAO,MAAM,mBAAmB,GAAI,QAAQ,MAAM,GAAG,IAAI,KAAG,SAAS,oBAAoB,EAQxF,CAAA;AAcD,eAAO,MAAM,mBAAmB,GAC9B,SAAS,WAAW,EAAE,MAAM,SAAS,oBAAoB,EAAE,EAAE,QAAQ,OAAO,EAC5E,MAAM,QAAQ,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,KACrE,MAuBF,CAAA"}

package/dist/comparison-chart-html.js

@@ -0,0 +1,36 @@
+import { createLumenComparisonGeometry, formatLumenChartSummary, getLumenChartToneClassName, isLumenComparisonDatum } from '@santi020k/lumen-core';
+import { bulletNumberAttribute } from './bullet-chart-html.js';
+import { escapeChartHtml } from './chart-html.js';
+export const parseComparisonData = (source) => {
+    try {
+        const parsed = JSON.parse(source ?? '[]');
+        if (Array.isArray(parsed) && parsed.every(isLumenComparisonDatum))
+            return parsed;
+    }
+    catch { }
+    return [{ id: '', label: '', value: NaN }];
+};
+const comparisonLabel = (element, attribute, fallback) => element.getAttribute(attribute) ?? fallback;
+const comparisonSummary = (element, rows, paired, text, formatter) => escapeChartHtml(element.getAttribute('summary') ?? formatLumenChartSummary([
+    { id: 'values', label: comparisonLabel(element, 'value-label', text.value), data: rows.map(row => ({ x: row.label, y: row.value })) },
+    ...(paired ? [{ id: 'reference', label: comparisonLabel(element, 'reference-label', 'Before'), data: rows.map(row => ({ x: row.label, y: row.reference })) }] : [])
+], formatter, text));
+export const comparisonChartHtml = (element, data, paired, text, formatter) => {
+    const domain = element.hasAttribute('domain-min') || element.hasAttribute('domain-max') ? { min: bulletNumberAttribute(element, 'domain-min'), max: bulletNumberAttribute(element, 'domain-max') } : undefined;
+    const model = createLumenComparisonGeometry(data, { domain, paired });
+    if (!model.valid || !model.rows.length)
+        return `<p class="ui-chart__empty" role="status">${escapeChartHtml(model.valid ? text.empty : text.invalidData)}</p>`;
+    const format = (value) => escapeChartHtml(value === null ? text.notAvailable : formatter(value));
+    const before = escapeChartHtml(comparisonLabel(element, 'reference-label', 'Before'));
+    const title = escapeChartHtml(comparisonLabel(element, 'value-label', text.value));
+    const summary = comparisonSummary(element, model.rows, paired, text, formatter);
+    const rows = model.rows.map((row, index) => {
+        const connector = row.valuePosition !== null && row.referencePosition !== null ? `<span class="ui-comparison-chart__connector" style="left:${row.start * 100}%;width:${row.width * 100}%"></span>` : '';
+        const reference = paired && row.referencePosition !== null ? `<span class="ui-comparison-chart__reference" style="left:${row.referencePosition * 100}%"></span>` : '';
+        const dot = row.valuePosition !== null ? `<span class="ui-comparison-chart__dot" style="left:${row.valuePosition * 100}%"></span>` : '';
+        return `<li class="${getLumenChartToneClassName(row.tone, index)}"><div class="ui-comparison-chart__label"><span>${escapeChartHtml(row.label)}</span><span>${paired ? `${format(row.reference)} <span aria-hidden="true">→</span> ` : ''}<strong>${format(row.value)}</strong></span></div><div class="ui-comparison-chart__track" aria-hidden="true">${connector}${reference}${dot}</div></li>`;
+    }).join('');
+    const tableRows = model.rows.map(row => `<tr><th scope="row">${escapeChartHtml(row.label)}</th>${paired ? `<td>${format(row.reference)}</td>` : ''}<td>${format(row.value)}</td></tr>`).join('');
+    const table = element.getAttribute('show-table') === 'false' ? '' : `<details class="ui-chart__data"><summary>${escapeChartHtml(text.viewData)}</summary><div role="group" tabindex="0" aria-label="${escapeChartHtml(text.chartData)}"><table><thead><tr><th scope="col">${escapeChartHtml(text.category)}</th>${paired ? `<th scope="col">${before}</th>` : ''}<th scope="col">${title}</th></tr></thead><tbody>${tableRows}</tbody></table></div></details>`;
+    return `<p class="ui-sr-only" data-ui-chart-summary>${summary}</p><div class="ui-comparison-chart__legend"><span>${escapeChartHtml(text.category)}</span><span>${paired ? `${before} → ` : ''}${title}</span></div><ul class="ui-comparison-chart__rows">${rows}</ul><div class="ui-bullet-chart__ticks" aria-hidden="true">${model.ticks.map(tick => `<span>${format(tick)}</span>`).join('')}</div>${table}`;
+};

package/dist/components/ai-surfaces.d.ts

@@ -0,0 +1,115 @@
+import { LumenElement } from '../element-base.js';
+declare abstract class LumenAiSurfaceElement extends LumenElement {
+    protected cleanup: (() => void) | undefined;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    protected abstract render(): void;
+}
+export declare const lumenPromptComposerElementConfig: {
+    readonly baseClassName: "ui-prompt-composer";
+    readonly defaults: {
+        readonly 'data-ui-prompt-composer': "";
+    };
+    readonly observedAttributes: readonly ["action", "disabled", "label", "max-length", "pending", "send-label", "stop-label", "submit-on-enter", "value"];
+    readonly tagName: "lumen-prompt-composer";
+};
+export declare class LumenPromptComposerElement extends LumenAiSurfaceElement {
+    static config: {
+        readonly baseClassName: "ui-prompt-composer";
+        readonly defaults: {
+            readonly 'data-ui-prompt-composer': "";
+        };
+        readonly observedAttributes: readonly ["action", "disabled", "label", "max-length", "pending", "send-label", "stop-label", "submit-on-enter", "value"];
+        readonly tagName: "lumen-prompt-composer";
+    };
+    private form;
+    private input;
+    private label;
+    private send;
+    private stop;
+    get value(): string;
+    set value(value: string);
+    attributeChangedCallback(name?: string): void;
+    protected render(): void;
+    private elements;
+    private create;
+}
+export declare const lumenStreamMessageElementConfig: {
+    readonly baseClassName: "ui-stream-message ui-message ui-message--assistant";
+    readonly observedAttributes: readonly ["label", "status", "status-label", "text"];
+    readonly role: "article";
+    readonly tagName: "lumen-stream-message";
+};
+export declare class LumenStreamMessageElement extends LumenAiSurfaceElement {
+    static config: {
+        readonly baseClassName: "ui-stream-message ui-message ui-message--assistant";
+        readonly observedAttributes: readonly ["label", "status", "status-label", "text"];
+        readonly role: "article";
+        readonly tagName: "lumen-stream-message";
+    };
+    private content;
+    private statusText;
+    get text(): string;
+    set text(value: string);
+    protected render(): void;
+}
+export declare const lumenSourceCitationElementConfig: {
+    readonly baseClassName: "ui-source-citation";
+    readonly observedAttributes: readonly ["href", "label", "target"];
+    readonly tagName: "lumen-source-citation";
+};
+export declare class LumenSourceCitationElement extends LumenAiSurfaceElement {
+    static config: {
+        readonly baseClassName: "ui-source-citation";
+        readonly observedAttributes: readonly ["href", "label", "target"];
+        readonly tagName: "lumen-source-citation";
+    };
+    protected render(): void;
+}
+export declare const lumenToolActivityElementConfig: {
+    readonly baseClassName: "ui-tool-activity";
+    readonly observedAttributes: readonly ["label", "open", "status", "status-label"];
+    readonly tagName: "lumen-tool-activity";
+};
+export declare class LumenToolActivityElement extends LumenAiSurfaceElement {
+    static config: {
+        readonly baseClassName: "ui-tool-activity";
+        readonly observedAttributes: readonly ["label", "open", "status", "status-label"];
+        readonly tagName: "lumen-tool-activity";
+    };
+    private details;
+    private summary;
+    private statusText;
+    protected render(): void;
+    private create;
+}
+export declare const lumenApprovalCardElementConfig: {
+    readonly baseClassName: "ui-approval-card ui-card";
+    readonly defaults: {
+        readonly 'data-ui-approval-card': "";
+    };
+    readonly observedAttributes: readonly ["approve-label", "disabled", "label", "reject-label", "request-id", "status", "status-label"];
+    readonly role: "group";
+    readonly tagName: "lumen-approval-card";
+};
+export declare class LumenApprovalCardElement extends LumenAiSurfaceElement {
+    static config: {
+        readonly baseClassName: "ui-approval-card ui-card";
+        readonly defaults: {
+            readonly 'data-ui-approval-card': "";
+        };
+        readonly observedAttributes: readonly ["approve-label", "disabled", "label", "reject-label", "request-id", "status", "status-label"];
+        readonly role: "group";
+        readonly tagName: "lumen-approval-card";
+    };
+    private titleElement;
+    private statusText;
+    private approve;
+    private reject;
+    protected render(): void;
+    private elements;
+    private create;
+}
+export {};
+//# sourceMappingURL=ai-surfaces.d.ts.map

package/dist/components/ai-surfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-surfaces.d.ts","sourceRoot":"","sources":["../../src/components/ai-surfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAA2B,MAAM,oBAAoB,CAAA;AAa1E,uBAAe,qBAAsB,SAAQ,YAAY;IACvD,SAAS,CAAC,OAAO,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAA;IAElC,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;IAM5B,wBAAwB,IAAI,IAAI;IAMzC,SAAS,CAAC,QAAQ,CAAC,MAAM,IAAI,IAAI;CAClC;AAED,eAAO,MAAM,gCAAgC;;;;;;;CAKN,CAAA;AAEvC,qBAAa,0BAA2B,SAAQ,qBAAqB;IACnE,OAAgB,MAAM;;;;;;;MAAmC;IACzD,OAAO,CAAC,IAAI,CAA6B;IACzC,OAAO,CAAC,KAAK,CAAiC;IAC9C,OAAO,CAAC,KAAK,CAA8B;IAC3C,OAAO,CAAC,IAAI,CAA+B;IAC3C,OAAO,CAAC,IAAI,CAA+B;IAE3C,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAEQ,wBAAwB,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI;cAUnC,MAAM,IAAI,IAAI;IAqCjC,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,MAAM;CA6Cf;AAED,eAAO,MAAM,+BAA+B;;;;;CAKL,CAAA;AAEvC,qBAAa,yBAA0B,SAAQ,qBAAqB;IAClE,OAAgB,MAAM;;;;;MAAkC;IACxD,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,UAAU,CAA6B;IAE/C,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;cAEkB,MAAM,IAAI,IAAI;CAyClC;AAED,eAAO,MAAM,gCAAgC;;;;CAIN,CAAA;AAEvC,qBAAa,0BAA2B,SAAQ,qBAAqB;IACnE,OAAgB,MAAM;;;;MAAmC;cAEtC,MAAM,IAAI,IAAI;CAkBlC;AAED,eAAO,MAAM,8BAA8B;;;;CAIJ,CAAA;AAEvC,qBAAa,wBAAyB,SAAQ,qBAAqB;IACjE,OAAgB,MAAM;;;;MAAiC;IACvD,OAAO,CAAC,OAAO,CAAgC;IAC/C,OAAO,CAAC,OAAO,CAAyB;IACxC,OAAO,CAAC,UAAU,CAA6B;cAE5B,MAAM,IAAI,IAAI;IA0BjC,OAAO,CAAC,MAAM;CAef;AAID,eAAO,MAAM,8BAA8B;;;;;;;;CAMJ,CAAA;AAEvC,qBAAa,wBAAyB,SAAQ,qBAAqB;IACjE,OAAgB,MAAM;;;;;;;;MAAiC;IACvD,OAAO,CAAC,YAAY,CAAyB;IAC7C,OAAO,CAAC,UAAU,CAA6B;IAC/C,OAAO,CAAC,OAAO,CAA+B;IAC9C,OAAO,CAAC,MAAM,CAA+B;cAE1B,MAAM,IAAI,IAAI;IAoCjC,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,MAAM;CA2Bf"}

package/dist/components/ai-surfaces.js

@@ -0,0 +1,270 @@
+import { bindLumenApprovalCard, createLumenPromptComposerController, normalizeLumenPromptLimit, resolveLumenCitationHref } from '@santi020k/lumen-core';
+import { LumenElement } from '../element-base.js';
+const node = (root, tag, className = '') => {
+    const element = root.ownerDocument.createElement(tag);
+    element.className = className;
+    return element;
+};
+const booleanAttribute = (root, name) => root.hasAttribute(name) && root.getAttribute(name) !== 'false';
+const approvalDisabled = (root) => booleanAttribute(root, 'disabled') || root.dataset.status !== 'pending' || !root.dataset.requestId;
+class LumenAiSurfaceElement extends LumenElement {
+    cleanup;
+    connectedCallback() {
+        super.connectedCallback();
+        queueMicrotask(() => {
+            if (this.isConnected)
+                this.render();
+        });
+    }
+    disconnectedCallback() {
+        this.cleanup?.();
+        this.cleanup = undefined;
+    }
+    attributeChangedCallback() {
+        super.attributeChangedCallback();
+        if (this.isConnected)
+            this.render();
+    }
+}
+export const lumenPromptComposerElementConfig = {
+    baseClassName: 'ui-prompt-composer',
+    defaults: { 'data-ui-prompt-composer': '' },
+    observedAttributes: ['action', 'disabled', 'label', 'max-length', 'pending', 'send-label', 'stop-label', 'submit-on-enter', 'value'],
+    tagName: 'lumen-prompt-composer'
+};
+export class LumenPromptComposerElement extends LumenAiSurfaceElement {
+    static config = lumenPromptComposerElementConfig;
+    form;
+    input;
+    label;
+    send;
+    stop;
+    get value() {
+        return this.input?.value ?? this.getAttribute('value') ?? '';
+    }
+    set value(value) {
+        this.setAttribute('value', value);
+    }
+    attributeChangedCallback(name) {
+        super.attributeChangedCallback();
+        if (name === 'value' && this.input) {
+            this.input.defaultValue = this.getAttribute('value') ?? '';
+            this.input.value = this.input.defaultValue;
+        }
+    }
+    render() {
+        if (!this.form)
+            this.create();
+        const elements = this.elements();
+        if (!elements)
+            return;
+        const { form, input, label, send, stop } = elements;
+        this.cleanup?.();
+        this.dataset.pending = String(booleanAttribute(this, 'pending'));
+        this.dataset.disabled = String(booleanAttribute(this, 'disabled'));
+        this.dataset.submitOnEnter = String(booleanAttribute(this, 'submit-on-enter'));
+        const action = this.getAttribute('action');
+        if (action !== null)
+            form.setAttribute('action', action);
+        else
+            form.removeAttribute('action');
+        input.maxLength = normalizeLumenPromptLimit(Number(this.getAttribute('max-length')));
+        label.textContent = this.getAttribute('label') ?? 'Message';
+        send.textContent = this.getAttribute('send-label') ?? 'Send';
+        stop.textContent = this.getAttribute('stop-label') ?? 'Stop';
+        const controller = createLumenPromptComposerController(this);
+        this.cleanup = () => {
+            controller.destroy();
+        };
+    }
+    elements() {
+        if (!this.form || !this.input || !this.label || !this.send || !this.stop)
+            return undefined;
+        return { form: this.form, input: this.input, label: this.label, send: this.send, stop: this.stop };
+    }
+    create() {
+        const children = [...this.childNodes];
+        this.form = node(this, 'form', 'ui-form');
+        this.form.method = 'post';
+        this.label = node(this, 'label', 'ui-label');
+        this.input = node(this, 'textarea', 'ui-textarea');
+        this.input.id = `prompt-${this.ownerDocument.defaultView?.crypto.randomUUID() ?? crypto.randomUUID()}`;
+        this.input.rows = 3;
+        this.input.defaultValue = this.getAttribute('value') ?? '';
+        this.input.required = true;
+        this.input.name = 'prompt';
+        this.input.dataset.uiPromptInput = '';
+        this.label.htmlFor = this.input.id;
+        this.send = node(this, 'button', 'ui-button');
+        this.send.type = 'submit';
+        this.send.dataset.uiPromptSend = '';
+        this.stop = node(this, 'button', 'ui-button ui-button--secondary');
+        this.stop.type = 'button';
+        this.stop.dataset.uiPromptStop = '';
+        const actions = node(this, 'div', 'ui-prompt-composer__actions');
+        actions.append(this.send, this.stop);
+        this.form.append(this.label, this.input, actions, ...children);
+        this.append(this.form);
+    }
+}
+export const lumenStreamMessageElementConfig = {
+    baseClassName: 'ui-stream-message ui-message ui-message--assistant',
+    observedAttributes: ['label', 'status', 'status-label', 'text'],
+    role: 'article',
+    tagName: 'lumen-stream-message'
+};
+export class LumenStreamMessageElement extends LumenAiSurfaceElement {
+    static config = lumenStreamMessageElementConfig;
+    content;
+    statusText;
+    get text() {
+        return this.content?.textContent ?? this.getAttribute('text') ?? '';
+    }
+    set text(value) {
+        this.setAttribute('text', value);
+    }
+    render() {
+        if (!this.content) {
+            const children = [...this.childNodes];
+            const actions = this.querySelector('[slot="actions"]');
+            const sources = this.querySelector('[slot="sources"]');
+            this.content = node(this, 'div', 'ui-prose');
+            this.content.dataset.uiStreamContent = '';
+            this.content.setAttribute('aria-live', 'off');
+            this.statusText = node(this, 'span');
+            this.statusText.setAttribute('role', 'status');
+            this.statusText.setAttribute('aria-live', 'polite');
+            const footer = node(this, 'div', 'ui-stream-message__actions');
+            footer.append(this.statusText);
+            if (actions)
+                footer.append(actions);
+            this.content.append(...children.filter(child => child !== actions && child !== sources));
+            this.append(this.content, footer);
+            if (sources)
+                this.append(sources);
+        }
+        this.dataset.status = this.getAttribute('status') ?? 'idle';
+        this.setAttribute('aria-label', this.getAttribute('label') ?? 'Assistant');
+        this.content.setAttribute('aria-busy', String(this.dataset.status === 'streaming'));
+        if (this.hasAttribute('text'))
+            this.content.textContent = this.getAttribute('text') ?? '';
+        if (this.statusText)
+            this.statusText.textContent = this.getAttribute('status-label') ?? 'Ready';
+    }
+}
+export const lumenSourceCitationElementConfig = {
+    baseClassName: 'ui-source-citation',
+    observedAttributes: ['href', 'label', 'target'],
+    tagName: 'lumen-source-citation'
+};
+export class LumenSourceCitationElement extends LumenAiSurfaceElement {
+    static config = lumenSourceCitationElementConfig;
+    render() {
+        const href = resolveLumenCitationHref(this.getAttribute('href') ?? '');
+        const label = this.getAttribute('label') ?? 'Source';
+        if (href) {
+            const anchor = node(this, 'a', 'ui-link');
+            anchor.href = href;
+            anchor.rel = 'noopener noreferrer';
+            anchor.target = this.getAttribute('target') === '_blank' ? '_blank' : '_self';
+            anchor.textContent = label;
+            this.replaceChildren(anchor);
+        }
+        else
+            this.textContent = label;
+    }
+}
+export const lumenToolActivityElementConfig = {
+    baseClassName: 'ui-tool-activity',
+    observedAttributes: ['label', 'open', 'status', 'status-label'],
+    tagName: 'lumen-tool-activity'
+};
+export class LumenToolActivityElement extends LumenAiSurfaceElement {
+    static config = lumenToolActivityElementConfig;
+    details;
+    summary;
+    statusText;
+    render() {
+        if (!this.details)
+            this.create();
+        if (!this.details || !this.summary || !this.statusText)
+            return;
+        this.details.open = this.hasAttribute('open');
+        this.summary.textContent = this.getAttribute('label') ?? 'Tool activity';
+        this.statusText.textContent = this.getAttribute('status-label') ?? 'Queued';
+        this.dataset.status = this.getAttribute('status') ?? 'queued';
+        this.cleanup?.();
+        const toggle = () => {
+            this.toggleAttribute('open', this.details?.open ?? false);
+        };
+        this.details.addEventListener('toggle', toggle);
+        this.cleanup = () => {
+            this.details?.removeEventListener('toggle', toggle);
+        };
+    }
+    create() {
+        const children = [...this.childNodes];
+        this.details = node(this, 'details', 'ui-collapsible');
+        this.summary = node(this, 'summary');
+        this.statusText = node(this, 'span');
+        this.statusText.setAttribute('role', 'status');
+        this.details.append(this.summary, this.statusText, ...children);
+        this.append(this.details);
+    }
+}
+const approvalStatusLabel = (root) => root.getAttribute('status-label') ?? `Decision: ${root.getAttribute('status') ?? 'pending'}`;
+export const lumenApprovalCardElementConfig = {
+    baseClassName: 'ui-approval-card ui-card',
+    defaults: { 'data-ui-approval-card': '' },
+    observedAttributes: ['approve-label', 'disabled', 'label', 'reject-label', 'request-id', 'status', 'status-label'],
+    role: 'group',
+    tagName: 'lumen-approval-card'
+};
+export class LumenApprovalCardElement extends LumenAiSurfaceElement {
+    static config = lumenApprovalCardElementConfig;
+    titleElement;
+    statusText;
+    approve;
+    reject;
+    render() {
+        if (!this.titleElement)
+            this.create();
+        const elements = this.elements();
+        if (!elements)
+            return;
+        const { title, statusText, approve, reject } = elements;
+        title.textContent = this.getAttribute('label') ?? 'Review action';
+        this.setAttribute('aria-label', title.textContent);
+        statusText.textContent = approvalStatusLabel(this);
+        this.dataset.requestId = this.getAttribute('request-id') ?? '';
+        this.dataset.status = this.getAttribute('status') ?? 'pending';
+        this.dataset.disabled = String(booleanAttribute(this, 'disabled'));
+        const disabled = approvalDisabled(this);
+        approve.disabled = disabled;
+        reject.disabled = disabled;
+        approve.textContent = this.getAttribute('approve-label') ?? 'Approve';
+        reject.textContent = this.getAttribute('reject-label') ?? 'Reject';
+        this.cleanup?.();
+        this.cleanup = bindLumenApprovalCard(this);
+    }
+    elements() {
+        if (!this.titleElement || !this.statusText || !this.approve || !this.reject)
+            return undefined;
+        return { title: this.titleElement, statusText: this.statusText, approve: this.approve, reject: this.reject };
+    }
+    create() {
+        const children = [...this.childNodes];
+        this.titleElement = node(this, 'strong');
+        this.statusText = node(this, 'span');
+        this.statusText.setAttribute('role', 'status');
+        this.approve = node(this, 'button', 'ui-button');
+        this.approve.type = 'button';
+        this.approve.dataset.uiApprovalResponse = 'approve';
+        this.reject = node(this, 'button', 'ui-button ui-button--secondary');
+        this.reject.type = 'button';
+        this.reject.dataset.uiApprovalResponse = 'reject';
+        const actions = node(this, 'div', 'ui-approval-card__actions');
+        actions.append(this.approve, this.reject);
+        this.append(this.titleElement, ...children, this.statusText, actions);
+    }
+}