@santi020k/lumen-elements 3.0.1 → 4.1.0

package/dist/components/world-map.js

@@ -0,0 +1,312 @@
+import { createLumenWorldMapSelectDetail, findLumenWorldMapCountry, normalizeLumenWorldMapCountries, normalizeLumenWorldMapHighlightedCountries, normalizeLumenWorldMapMarkers, projectLumenWorldMapCoordinate, resolveLumenWorldMapCountryLabel } from '@santi020k/lumen-core/world-map';
+import { initLumenWorldMapZoom, lumenWorldMapZoomLabels } from '@santi020k/lumen-core/world-map-zoom';
+import { defineLumenElement, LumenElement } from '../element-base.js';
+export const lumenWorldMapElementConfig = {
+    baseClassName: 'ui-world-map',
+    observedAttributes: ['animated', 'countries', 'highlighted-countries', 'interactive', 'label', 'labels', 'list-label', 'markers', 'selected-country', 'variant', 'zoomable', 'zoom-labels', 'initial-view'],
+    tagName: 'lumen-world-map'
+};
+const readJson = (value) => {
+    try {
+        return value === null ? undefined : JSON.parse(value);
+    }
+    catch {
+        return undefined;
+    }
+};
+const isRecord = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
+const parseLabels = (value) => {
+    if (!isRecord(value))
+        return {};
+    return Object.fromEntries(Object.entries(value).filter((entry) => typeof entry[1] === 'string'));
+};
+const svgNode = (document, tag, attributes) => {
+    const node = document.createElementNS('http://www.w3.org/2000/svg', tag);
+    for (const [name, value] of Object.entries(attributes))
+        node.setAttribute(name, value);
+    return node;
+};
+const readCountry = (target) => {
+    try {
+        return Element.prototype.closest.call(target, '[data-country]')?.getAttribute('data-country') ?? undefined;
+    }
+    catch {
+        return undefined;
+    }
+};
+const appendPatterns = (plot, instanceId) => {
+    const defs = svgNode(plot.ownerDocument, 'defs', {});
+    for (const state of ['neutral', 'highlight']) {
+        const pattern = svgNode(plot.ownerDocument, 'pattern', {
+            height: '4', id: `${instanceId}-${state}`, patternUnits: 'userSpaceOnUse', width: '4'
+        });
+        pattern.append(svgNode(plot.ownerDocument, 'circle', {
+            class: `ui-world-map__dot ui-world-map__dot--${state}`, cx: '2', cy: '2', r: '1.1'
+        }));
+        defs.append(pattern);
+    }
+    plot.append(defs);
+};
+export class LumenWorldMapElement extends LumenElement {
+    static config = lumenWorldMapElementConfig;
+    countryData;
+    highlightedData;
+    markerData;
+    labelData;
+    abortController;
+    instanceId = `ui-world-map-${crypto.randomUUID()}`;
+    get countries() {
+        return this.countryData ?? normalizeLumenWorldMapCountries(readJson(this.getAttribute('countries')));
+    }
+    set countries(value) {
+        this.countryData = normalizeLumenWorldMapCountries(value);
+        this.render();
+    }
+    get highlightedCountries() {
+        return normalizeLumenWorldMapHighlightedCountries(this.highlightedData ?? readJson(this.getAttribute('highlighted-countries')), this.countries);
+    }
+    set highlightedCountries(value) {
+        this.highlightedData = value;
+        this.render();
+    }
+    get markers() {
+        return normalizeLumenWorldMapMarkers(this.markerData ?? readJson(this.getAttribute('markers')));
+    }
+    set markers(value) {
+        this.markerData = value;
+        this.render();
+    }
+    get labels() {
+        return this.labelData ?? parseLabels(readJson(this.getAttribute('labels')));
+    }
+    set labels(value) {
+        this.labelData = parseLabels(value);
+        this.render();
+    }
+    get selectedCountry() {
+        return findLumenWorldMapCountry(this.countries, this.getAttribute('selected-country'))?.id ?? '';
+    }
+    set selectedCountry(value) {
+        this.setAttribute('selected-country', value);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.render();
+    }
+    disconnectedCallback() {
+        this.abortController?.abort();
+    }
+    adoptedCallback() {
+        this.render();
+    }
+    attributeChangedCallback(name) {
+        super.attributeChangedCallback();
+        if (name === 'countries')
+            this.countryData = undefined;
+        if (name === 'highlighted-countries')
+            this.highlightedData = undefined;
+        if (name === 'markers')
+            this.markerData = undefined;
+        if (name === 'labels')
+            this.labelData = undefined;
+        if (name === 'selected-country') {
+            this.updateSelection();
+            return;
+        }
+        this.render();
+    }
+    updateSelection() {
+        const id = this.selectedCountry;
+        const country = findLumenWorldMapCountry(this.countries, id);
+        const select = this.querySelector('select');
+        const inspection = this.querySelector('.ui-world-map__inspection');
+        this.querySelector('.ui-world-map__selection')?.setAttribute('d', country?.path ?? '');
+        if (select)
+            select.value = id;
+        if (inspection) {
+            inspection.textContent = country ? resolveLumenWorldMapCountryLabel(country, this.labels) : '';
+            inspection.hidden = !country;
+        }
+        for (const path of this.querySelectorAll('[data-country]')) {
+            path.classList.toggle('ui-world-map__country--selected', path.dataset.country === id);
+        }
+    }
+    render() {
+        if (!this.isConnected)
+            return;
+        this.abortController?.abort();
+        this.abortController = new AbortController();
+        this.dataset.animated = String(this.getAttribute('animated') !== 'false');
+        this.dataset.interactive = String(this.getAttribute('interactive') !== 'false');
+        this.dataset.variant = this.getAttribute('variant') === 'solid' ? 'solid' : 'dotted';
+        const frame = this.ownerDocument.createElement('div');
+        const plot = svgNode(this.ownerDocument, 'svg', {
+            'aria-label': this.getAttribute('label') || 'World map', class: 'ui-world-map__plot', role: 'img', viewBox: '0 0 1000 400'
+        });
+        const group = svgNode(this.ownerDocument, 'g', { 'aria-hidden': 'true', class: 'ui-world-map__countries' });
+        frame.className = 'ui-world-map__frame';
+        const viewport = this.ownerDocument.createElement('div');
+        viewport.className = 'ui-world-map__viewport';
+        viewport.dataset.uiWorldMapViewport = '';
+        viewport.setAttribute('role', 'region');
+        viewport.ariaLabel = `${this.zoomText.viewport}: ${this.getAttribute('label') || 'World map'}`;
+        if (this.getAttribute('zoomable') !== 'false')
+            viewport.tabIndex = 0;
+        if (this.dataset.variant === 'dotted')
+            appendPatterns(plot, this.instanceId);
+        for (const country of this.countries)
+            group.append(this.countryPath(country));
+        plot.append(group);
+        const markerList = this.appendMarkers(plot);
+        plot.append(svgNode(this.ownerDocument, 'path', { 'aria-hidden': 'true', class: 'ui-world-map__selection', d: '' }));
+        const inspection = this.ownerDocument.createElement('span');
+        inspection.className = 'ui-world-map__inspection';
+        viewport.append(plot);
+        frame.append(viewport, inspection, markerList);
+        this.replaceChildren(frame, this.highlightList());
+        this.bindPointer(group, inspection);
+        if (this.dataset.interactive === 'true')
+            this.appendChooser();
+        this.appendZoomControls();
+        initLumenWorldMapZoom(this, this.abortController.signal);
+        this.updateSelection();
+    }
+    get zoomText() {
+        return { ...lumenWorldMapZoomLabels, ...parseLabels(readJson(this.getAttribute('zoom-labels'))) };
+    }
+    appendZoomControls() {
+        this.dataset.initialView = this.getAttribute('initial-view') ?? 'world';
+        if (this.getAttribute('zoomable') === 'false')
+            return;
+        const controls = this.ownerDocument.createElement('div');
+        const status = this.ownerDocument.createElement('output');
+        const labels = this.zoomText;
+        controls.className = 'ui-world-map__zoom-controls';
+        status.dataset.uiWorldMapZoomStatus = '';
+        status.ariaLabel = labels.level;
+        status.setAttribute('aria-live', 'polite');
+        status.value = '100%';
+        for (const [action, text, label] of [['out', '−', labels.zoomOut], ['in', '+', labels.zoomIn], ['fit', labels.fit, labels.fit], ['reset', labels.reset, labels.reset]]) {
+            const button = this.ownerDocument.createElement('button');
+            button.type = 'button';
+            button.className = 'ui-button ui-button--outline ui-world-map__zoom-button';
+            button.dataset.uiWorldMapZoom = action;
+            button.textContent = text ?? '';
+            button.ariaLabel = label ?? '';
+            controls.append(button);
+            if (action === 'out')
+                controls.append(status);
+        }
+        this.prepend(controls);
+    }
+    countryPath(country) {
+        const highlighted = this.highlightedCountries.includes(country.id);
+        const path = svgNode(this.ownerDocument, 'path', {
+            class: 'ui-world-map__country', d: country.path, 'data-country': country.id, 'fill-rule': 'evenodd'
+        });
+        path.classList.toggle('ui-world-map__country--highlighted', highlighted);
+        path.classList.toggle('ui-world-map__country--selected', this.selectedCountry === country.id);
+        if (this.dataset.variant === 'dotted')
+            path.setAttribute('fill', `url(#${this.instanceId}-${highlighted ? 'highlight' : 'neutral'})`);
+        const title = svgNode(this.ownerDocument, 'title', {});
+        title.textContent = resolveLumenWorldMapCountryLabel(country, this.labels);
+        path.append(title);
+        return path;
+    }
+    highlightList() {
+        const list = this.ownerDocument.createElement('ul');
+        list.className = 'ui-world-map__highlights';
+        list.ariaLabel = 'Highlighted countries';
+        for (const id of this.highlightedCountries) {
+            const country = findLumenWorldMapCountry(this.countries, id);
+            const item = this.ownerDocument.createElement('li');
+            if (country)
+                item.textContent = resolveLumenWorldMapCountryLabel(country, this.labels);
+            list.append(item);
+        }
+        return list;
+    }
+    appendMarkers(plot) {
+        const group = svgNode(this.ownerDocument, 'g', { 'aria-hidden': 'true', class: 'ui-world-map__markers' });
+        const list = this.ownerDocument.createElement('ul');
+        list.className = 'ui-sr-only';
+        list.ariaLabel = 'Map markers';
+        for (const marker of this.markers) {
+            const { x, y } = projectLumenWorldMapCoordinate(marker.longitude, marker.latitude);
+            const point = svgNode(this.ownerDocument, 'circle', { class: 'ui-world-map__marker', cx: String(x), cy: String(y), r: '4' });
+            const title = svgNode(this.ownerDocument, 'title', {});
+            const item = this.ownerDocument.createElement('li');
+            title.textContent = marker.label;
+            item.textContent = marker.label;
+            point.append(title);
+            group.append(point);
+            list.append(item);
+        }
+        plot.append(group);
+        return list;
+    }
+    bindPointer(group, inspection) {
+        const showCountry = (id) => {
+            const country = findLumenWorldMapCountry(this.countries, id);
+            inspection.textContent = country ? resolveLumenWorldMapCountryLabel(country, this.labels) : '';
+            inspection.hidden = !country;
+        };
+        const signal = this.abortController?.signal;
+        if (!signal)
+            return;
+        showCountry(this.selectedCountry);
+        group.addEventListener('mouseover', event => {
+            showCountry(readCountry(event.target));
+        }, { signal });
+        group.addEventListener('mouseleave', () => {
+            showCountry(this.selectedCountry);
+        }, { signal });
+        group.addEventListener('click', event => {
+            if (this.dataset.interactive === 'true')
+                this.selectCountry(readCountry(event.target) ?? '');
+        }, { signal });
+    }
+    appendChooser() {
+        const signal = this.abortController?.signal;
+        if (!signal)
+            return;
+        const label = this.ownerDocument.createElement('label');
+        const text = this.ownerDocument.createElement('span');
+        const select = this.ownerDocument.createElement('select');
+        const listLabel = this.getAttribute('list-label') ?? 'Choose a country';
+        label.className = 'ui-world-map__select-label';
+        select.className = 'ui-select ui-world-map__select';
+        text.textContent = listLabel;
+        const placeholder = this.ownerDocument.createElement('option');
+        placeholder.value = '';
+        placeholder.textContent = listLabel;
+        select.append(placeholder);
+        for (const country of this.countries) {
+            const option = this.ownerDocument.createElement('option');
+            option.value = country.id;
+            option.textContent = resolveLumenWorldMapCountryLabel(country, this.labels);
+            select.append(option);
+        }
+        select.value = this.selectedCountry;
+        select.addEventListener('change', () => {
+            this.selectCountry(select.value);
+        }, { signal });
+        label.append(text, select);
+        this.append(label);
+    }
+    selectCountry(id) {
+        const country = findLumenWorldMapCountry(this.countries, id);
+        if (this.selectedCountry === (country?.id ?? ''))
+            return;
+        this.selectedCountry = country?.id ?? '';
+        if (country) {
+            this.dispatchEvent(new CustomEvent('ui:world-map-select', {
+                bubbles: true,
+                detail: createLumenWorldMapSelectDetail(country, new Set(this.highlightedCountries), this.labels)
+            }));
+        }
+    }
+}
+export const defineLumenWorldMap = (registry) => {
+    defineLumenElement(lumenWorldMapElementConfig, LumenWorldMapElement, registry);
+};

package/dist/consumer-behaviors.d.ts

@@ -0,0 +1,36 @@
+import { LumenElement } from './element-base.js';
+export declare class LumenAmountFieldElement extends LumenElement {
+    #private;
+    static config: {
+        baseClassName: string;
+        defaults: {
+            'data-ui-amount-field': string;
+        };
+        tagName: string;
+    };
+    static get observedAttributes(): string[];
+    get value(): string;
+    set value(draft: string);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+}
+export declare class MessageElement extends LumenElement {
+    #private;
+    static config: {
+        attributeClasses: {
+            glass: {
+                strong: string;
+                subtle: string;
+                true: string;
+            };
+        };
+        baseClassName: string;
+        tagName: string;
+    };
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+}
+//# sourceMappingURL=consumer-behaviors.d.ts.map

package/dist/consumer-behaviors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"consumer-behaviors.d.ts","sourceRoot":"","sources":["../src/consumer-behaviors.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAQhD,qBAAa,uBAAwB,SAAQ,YAAY;;IACvD,OAAgB,MAAM;;;;;;MAAgC;IAEtD,WAAoB,kBAAkB,aAErC;IAKD,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAEQ,iBAAiB;IAMjB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAoEvF,oBAAoB;CAK9B;AAcD,qBAAa,cAAe,SAAQ,YAAY;;IAC9C,OAAgB,MAAM;;;;;;;;;;MAAoC;IAE1D,WAAoB,kBAAkB,aAErC;IAIQ,iBAAiB;IAMjB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAYvF,oBAAoB;CAK9B"}

package/dist/consumer-behaviors.js

@@ -0,0 +1 @@
+import{createLumenAmountFieldController as u,createLumenMessageScrollerController as d}from"@santi020k/lumen-core";import{LumenElement as l}from"./element-base.js";const n={baseClassName:"ui-amount-field-root",defaults:{"data-ui-amount-field":""},tagName:"lumen-amount-field"};class m extends l{static config=n;static get observedAttributes(){return["value","locale","fraction-digits","allow-negative","default-value","invalid-message","name","form","disabled","readonly","required","id","aria-label","aria-labelledby","aria-describedby","placeholder"]}#e;#t;get value(){return this.getAttribute("value")??""}set value(e){this.setAttribute("value",e)}connectedCallback(){super.connectedCallback(),this.#s()}attributeChangedCallback(e,s,t){super.attributeChangedCallback(),!(!this.#e||!this.isConnected||s===t)&&(e==="value"?this.#e.setValue(t??""):this.#s())}#s(){this.#e?.destroy();const e=this.#i("data-ui-amount-input"),s=this.#i("data-ui-amount-value");e.type="text",e.inputMode="decimal",e.classList.add("ui-input","ui-amount-field"),s.type="hidden",this.#a(s,["name","form"]),this.#a(e,["form","aria-label","aria-labelledby","aria-describedby","placeholder","disabled","readonly","required"]);const t=this.#t,a=t?.[0]===e&&t[2]===e.id?t[1]:e.id,i=this.id?`${this.id}-input`:a;this.#t=[e,a,i],i?e.id=i:e.removeAttribute("id"),s.disabled=e.disabled,this.#e=u(this,o=>{this.value=o.draft})}#a(e,s){for(const t of s){const a=this.getAttribute(t);a===null?e.removeAttribute(t):e.setAttribute(t,a)}}#i(e){const s=this.querySelector(`[${e}]`);if(s)return s;const t=this.ownerDocument.createElement("input");return t.setAttribute(e,""),this.append(t),t}disconnectedCallback(){this.#e?.destroy(),this.#e=void 0}}const c={attributeClasses:{glass:{strong:"ui-message-scroller--glass ui-glass-strong",subtle:"ui-message-scroller--glass ui-glass-subtle",true:"ui-message-scroller--glass"}},baseClassName:"ui-message-scroller",tagName:"lumen-message-scroller"};class g extends l{static config=c;static get observedAttributes(){return[...super.observedAttributes,"auto-scroll","scroll-threshold"]}#e;connectedCallback(){super.connectedCallback(),this.#t()}attributeChangedCallback(e,s,t){super.attributeChangedCallback(e,s,t),this.isConnected&&s!==t&&["auto-scroll","scroll-threshold"].includes(e)&&this.#t()}#t(){this.#e?.destroy(),this.#e=this.hasAttribute("auto-scroll")?d(this,{threshold:Number(this.getAttribute("scroll-threshold")??32)}):void 0}disconnectedCallback(){this.#e?.destroy(),this.#e=void 0}}export{m as LumenAmountFieldElement,g as MessageElement};

package/dist/define.d.ts

@@ -1,5 +1,11 @@
-import { type LumenComponentName } from '@santi020k/lumen-core';
-import { type LumenElementConstructor } from './element-base.js';
+import { type LumenBoxPlotDatum, type LumenBoxPlotStatisticLabels, type LumenBulletRange, type LumenCalendarHeatmapDatum, type LumenChartLabels, type LumenChartSeries, type LumenComparisonDatum, type LumenComponentName, type LumenFunnelDatum, type LumenScatterReference } from '@santi020k/lumen-core';
+import { LumenApprovalCardElement as GranularLumenApprovalCardElement, LumenPromptComposerElement as GranularLumenPromptComposerElement, LumenSourceCitationElement as GranularLumenSourceCitationElement, LumenStreamMessageElement as GranularLumenStreamMessageElement, LumenToolActivityElement as GranularLumenToolActivityElement } from './components/ai-surfaces.js';
+import { LumenChangeSummaryElement as GranularLumenChangeSummaryElement, LumenFilterBarElement as GranularLumenFilterBarElement } from './components/dashboard.js';
+import { LumenChartMotionElement as GranularLumenChartMotionElement, LumenMotionGroupElement as GranularLumenMotionGroupElement, LumenVisualEffectElement as GranularLumenVisualEffectElement } from './components/visual-interactions.js';
+import { LumenDatumChartElement } from './chart-activation.js';
+import { LumenAmountFieldElement } from './consumer-behaviors.js';
+import { LumenElement, type LumenElementConfig, type LumenElementConstructor } from './element-base.js';
+export { LumenAmountFieldElement };
 export { LumenElement } from './element-base.js';
 type ToastPlacement = 'bottom-center' | 'bottom-left' | 'bottom-right' | 'top-center' | 'top-left' | 'top-right';
 type ToastVariant = string;
@@ -31,16 +37,206 @@ export declare const enhanceLumenRichTextEditors: (scope?: ParentNode) => void;
 export declare const enhanceLumenSchedules: (scope?: ParentNode) => void;
 export declare const enhanceLumenResizable: (scope?: ParentNode) => void;
 export declare const enhanceLumenDateRangePickers: (scope?: ParentNode) => void;
-export declare const enhanceLumenDatePickers: (scope?: ParentNode) => void;
 export declare const enhanceLumenInputOTPs: (scope?: ParentNode) => void;
 export declare const enhanceLumenCalendars: (scope?: ParentNode) => void;
+export declare const enhanceLumenDatePickers: (scope?: ParentNode) => void;
 export declare const enhanceLumenContextMenus: (scope?: ParentNode) => void;
 export declare const LumenToast: ToastApi;
+declare abstract class LumenDataChartBehaviorElement extends LumenDatumChartElement {
+    #private;
+    get categoryFormatter(): (category: number | string) => string;
+    set categoryFormatter(value: (category: number | string) => string);
+    protected get detailCategoryFormatter(): ((category: number | string) => string) | undefined;
+    get series(): readonly LumenChartSeries[];
+    set series(value: readonly LumenChartSeries[]);
+    get valueFormatter(): (value: number) => string;
+    set valueFormatter(value: (value: number) => string);
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    protected parseSeriesAttribute(value: string | null): readonly LumenChartSeries[];
+    protected abstract renderChart(): void;
+}
+declare class LumenScatterChartBehaviorElement extends LumenDataChartBehaviorElement {
+    private referenceItems;
+    get references(): readonly LumenScatterReference[];
+    set references(value: readonly LumenScatterReference[]);
+    protected renderChart(): void;
+}
+declare class LumenScatterChartRegisteredElement extends LumenScatterChartBehaviorElement {
+    static config: {
+        observedAttributes: string[];
+        baseClassName: "ui-chart ui-scatter-chart";
+        role: "figure";
+        tagName: "lumen-scatter-chart";
+    };
+}
+declare abstract class LumenStructuredChartBehaviorElement extends LumenDatumChartElement {
+    #private;
+    get valueFormatter(): (value: number) => string;
+    set valueFormatter(value: (value: number) => string);
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    protected abstract renderChart(): void;
+}
+declare abstract class LumenExpandedChartElement extends LumenStructuredChartBehaviorElement {
+    #private;
+    get labels(): Partial<LumenChartLabels>;
+    set labels(value: Partial<LumenChartLabels>);
+    protected get chartLabels(): Readonly<LumenChartLabels>;
+}
+export declare class LumenCalendarHeatmapElement extends LumenExpandedChartElement {
+    #private;
+    static config: {
+        observedAttributes: string[];
+        baseClassName: "ui-chart ui-calendar-heatmap";
+        role: "figure";
+        tagName: "lumen-calendar-heatmap";
+        attributeClasses: {
+            readonly presentation: {
+                readonly bare: "ui-chart--bare";
+            };
+        };
+    };
+    get data(): readonly LumenCalendarHeatmapDatum[];
+    set data(value: readonly LumenCalendarHeatmapDatum[]);
+    get dateFormatter(): (date: string) => string;
+    set dateFormatter(value: (date: string) => string);
+    get weekdayLabels(): readonly string[];
+    set weekdayLabels(value: readonly string[]);
+    get startDate(): string;
+    set startDate(value: string);
+    get endDate(): string;
+    set endDate(value: string);
+    get weekStartsOn(): 0 | 1;
+    set weekStartsOn(value: 0 | 1);
+    protected renderChart(): void;
+}
+export declare class LumenFunnelChartElement extends LumenExpandedChartElement {
+    #private;
+    static config: {
+        observedAttributes: string[];
+        baseClassName: "ui-chart ui-funnel-chart";
+        role: "figure";
+        tagName: "lumen-funnel-chart";
+        attributeClasses: {
+            readonly presentation: {
+                readonly bare: "ui-chart--bare";
+            };
+        };
+    };
+    get data(): readonly LumenFunnelDatum[];
+    set data(value: readonly LumenFunnelDatum[]);
+    protected renderChart(): void;
+}
+export declare class LumenBoxPlotElement extends LumenExpandedChartElement {
+    #private;
+    static config: {
+        observedAttributes: string[];
+        baseClassName: "ui-chart ui-box-plot";
+        role: "figure";
+        tagName: "lumen-box-plot";
+        attributeClasses: {
+            readonly presentation: {
+                readonly bare: "ui-chart--bare";
+            };
+        };
+    };
+    get data(): readonly LumenBoxPlotDatum[];
+    set data(value: readonly LumenBoxPlotDatum[]);
+    get statisticLabels(): Partial<LumenBoxPlotStatisticLabels>;
+    set statisticLabels(value: Partial<LumenBoxPlotStatisticLabels>);
+    protected renderChart(): void;
+}
+declare abstract class LumenComparisonChartElement extends LumenStructuredChartBehaviorElement {
+    #private;
+    get data(): readonly LumenComparisonDatum[];
+    set data(value: readonly LumenComparisonDatum[]);
+    protected renderChart(): void;
+}
+export declare class LumenLollipopChartElement extends LumenComparisonChartElement {
+    static config: {
+        observedAttributes: string[];
+        baseClassName: "ui-chart ui-comparison-chart ui-lollipop-chart";
+        role: "figure";
+        tagName: "lumen-lollipop-chart";
+        attributeClasses: {
+            readonly presentation: {
+                readonly bare: "ui-chart--bare";
+            };
+        };
+    };
+}
+export declare class LumenDumbbellChartElement extends LumenComparisonChartElement {
+    static config: {
+        observedAttributes: string[];
+        baseClassName: "ui-chart ui-comparison-chart ui-dumbbell-chart";
+        role: "figure";
+        tagName: "lumen-dumbbell-chart";
+        attributeClasses: {
+            readonly presentation: {
+                readonly bare: "ui-chart--bare";
+            };
+        };
+    };
+}
+export declare class LumenBulletChartElement extends LumenStructuredChartBehaviorElement {
+    #private;
+    static config: {
+        observedAttributes: string[];
+        baseClassName: "ui-chart ui-bullet-chart";
+        role: "figure";
+        tagName: "lumen-bullet-chart";
+        attributeClasses: {
+            readonly presentation: {
+                readonly bare: "ui-chart--bare";
+            };
+        };
+    };
+    get ranges(): readonly LumenBulletRange[];
+    set ranges(value: readonly LumenBulletRange[]);
+    get value(): number | null;
+    set value(value: number | null);
+    get target(): number;
+    set target(value: number);
+    protected renderChart(): void;
+}
+declare class LumenDialogBehaviorElement extends LumenElement {
+    #private;
+    private abortController;
+    private lastTrigger;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    show(trigger?: HTMLElement): void;
+    close(): void;
+}
+export declare class LumenCountryFlagElement extends LumenElement {
+    #private;
+    static config: {
+        baseClassName: string;
+        tagName: string;
+        observedAttributes: string[];
+    };
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, previous: string | null, value: string | null): void;
+}
+export declare class LumenPhoneNumberElement extends LumenElement {
+    #private;
+    static config: {
+        baseClassName: string;
+        tagName: string;
+        observedAttributes: string[];
+    };
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, previous: string | null, value: string | null): void;
+}
+export declare class LumenDialogElement extends LumenDialogBehaviorElement {
+    static config: LumenElementConfig;
+}
 type LumenCustomElementRegistry = Pick<CustomElementRegistry, 'define' | 'get'>;
 export declare const enhanceLumenElements: (scope?: ParentNode) => void;
 export declare const defineLumenElements: (componentNamesOrRegistry?: LumenCustomElementRegistry | readonly LumenComponentName[], suppliedRegistry?: LumenCustomElementRegistry) => void;
 export declare const installLumenControllers: () => void;
-export declare const lumenElementDefinitions: (readonly ["lumen-badge" | "lumen-button" | "lumen-card" | "lumen-combobox" | "lumen-card-content" | "lumen-card-description" | "lumen-card-footer" | "lumen-card-header" | "lumen-card-title" | "lumen-container" | "lumen-direction" | "lumen-grid" | "lumen-label" | "lumen-separator" | "lumen-skeleton" | "lumen-spinner" | "lumen-stack" | "lumen-typography" | "lumen-visually-hidden" | "lumen-accordion" | "lumen-alert" | "lumen-alert-dialog" | "lumen-agenda" | "lumen-aspect-ratio" | "lumen-attachment" | "lumen-autocomplete" | "lumen-avatar" | "lumen-back-to-top" | "lumen-bar-chart" | "lumen-breadcrumb" | "lumen-bubble" | "lumen-button-group" | "lumen-calendar" | "lumen-callout" | "lumen-carousel" | "lumen-chart" | "lumen-combo-chart" | "lumen-checkbox" | "lumen-checkbox-group" | "lumen-collapsible" | "lumen-code" | "lumen-code-tabs" | "lumen-copy-button" | "lumen-command" | "lumen-context-navigation" | "lumen-color-picker" | "lumen-context-menu" | "lumen-data-table" | "lumen-date-picker" | "lumen-date-range-picker" | "lumen-dialog" | "lumen-drawer" | "lumen-dropdown-menu" | "lumen-empty" | "lumen-error-state" | "lumen-error-summary" | "lumen-eyebrow" | "lumen-field" | "lumen-field-error" | "lumen-floating-badge" | "lumen-form" | "lumen-formatted-date" | "lumen-hover-card" | "lumen-heatmap" | "lumen-icon" | "lumen-image" | "lumen-input" | "lumen-input-group" | "lumen-input-otp" | "lumen-number-field" | "lumen-item" | "lumen-kanban-board" | "lumen-kanban-column" | "lumen-kbd" | "lumen-link" | "lumen-line-chart" | "lumen-list-box" | "lumen-marker" | "lumen-menubar" | "lumen-pie-chart" | "lumen-message" | "lumen-message-scroller" | "lumen-native-select" | "lumen-navigation-menu" | "lumen-pagination" | "lumen-password-field" | "lumen-phone-input" | "lumen-pill" | "lumen-popover" | "lumen-progress" | "lumen-prose" | "lumen-radio-group" | "lumen-range-chart" | "lumen-resizable" | "lumen-rich-text-editor" | "lumen-scroll-area" | "lumen-scroll-progress" | "lumen-schedule" | "lumen-search-field" | "lumen-select" | "lumen-sheet" | "lumen-sidebar" | "lumen-skip-link" | "lumen-slider" | "lumen-sparkline" | "lumen-switch" | "lumen-table" | "lumen-tabs" | "lumen-tag-group" | "lumen-textarea" | "lumen-theme-builder" | "lumen-theme-toggle" | "lumen-time-field" | "lumen-toast" | "lumen-toast-viewport" | "lumen-toggle" | "lumen-toggle-group" | "lumen-tooltip" | "lumen-tree" | "lumen-tree-grid" | "lumen-virtual-list" | "lumen-language-toggle" | "lumen-particles" | "lumen-animated-number" | "lumen-reveal-group" | "lumen-scroll-reveal" | "lumen-scatter-chart" | "lumen-stat" | "lumen-stat-description" | "lumen-stat-icon" | "lumen-stat-label" | "lumen-stat-trend" | "lumen-stat-value" | "lumen-meter" | "lumen-note" | "lumen-rating" | "lumen-timeline" | "lumen-animated-logo" | "lumen-animated-portrait" | "lumen-button-link" | "lumen-cover-image" | "lumen-gradient-divider" | "lumen-graphic" | "lumen-backdrop" | "lumen-illustration" | "lumen-stepper" | "lumen-file-upload" | "lumen-tour" | "lumen-anchor" | "lumen-segmented" | "lumen-toolbar" | "lumen-descriptions" | "lumen-popconfirm" | "lumen-transfer" | "lumen-cascader" | "lumen-tree-select" | "lumen-mentions" | "lumen-qr-code" | "lumen-watermark" | "lumen-affix" | "lumen-speed-dial", LumenElementConstructor])[];
+export declare const lumenElementDefinitions: (readonly [string, LumenElementConstructor])[];
 export declare const LumenAccordionElement: LumenElementConstructor;
 export declare const LumenAlertElement: LumenElementConstructor;
 export declare const LumenAlertDialogElement: LumenElementConstructor;
@@ -77,7 +273,11 @@ export declare const LumenContextMenuElement: LumenElementConstructor;
 export declare const LumenDataTableElement: LumenElementConstructor;
 export declare const LumenDatePickerElement: LumenElementConstructor;
 export declare const LumenDateRangePickerElement: LumenElementConstructor;
-export declare const LumenDialogElement: LumenElementConstructor;
+export declare const LumenDialogHeaderElement: LumenElementConstructor;
+export declare const LumenDialogTitleElement: LumenElementConstructor;
+export declare const LumenDialogBodyElement: LumenElementConstructor;
+export declare const LumenDialogFooterElement: LumenElementConstructor;
+export declare const LumenDialogCloseElement: LumenElementConstructor;
 export declare const LumenDirectionElement: LumenElementConstructor;
 export declare const LumenDrawerElement: LumenElementConstructor;
 export declare const LumenDropdownMenuElement: LumenElementConstructor;
@@ -87,6 +287,8 @@ export declare const LumenFieldElement: LumenElementConstructor;
 export declare const LumenHoverCardElement: LumenElementConstructor;
 export declare const LumenIconElement: LumenElementConstructor;
 export declare const LumenHeatmapElement: LumenElementConstructor;
+export declare const LumenHistogramElement: LumenElementConstructor;
+export declare const LumenWaterfallChartElement: LumenElementConstructor;
 export declare const LumenInputElement: LumenElementConstructor;
 export declare const LumenInputGroupElement: LumenElementConstructor;
 export declare const LumenInputOTPElement: LumenElementConstructor;
@@ -114,7 +316,7 @@ export declare const LumenResizableElement: LumenElementConstructor;
 export declare const LumenRichTextEditorElement: LumenElementConstructor;
 export declare const LumenScrollAreaElement: LumenElementConstructor;
 export declare const LumenScrollProgressElement: LumenElementConstructor;
-export declare const LumenScatterChartElement: LumenElementConstructor;
+export declare const LumenScatterChartElement: typeof LumenScatterChartRegisteredElement;
 export declare const LumenScheduleElement: LumenElementConstructor;
 export declare const LumenSearchFieldElement: LumenElementConstructor;
 export declare const LumenSelectElement: LumenElementConstructor;
@@ -181,6 +383,7 @@ export declare const LumenEyebrowElement: LumenElementConstructor;
 export declare const LumenFloatingBadgeElement: LumenElementConstructor;
 export declare const LumenFormattedDateElement: LumenElementConstructor;
 export declare const LumenImageElement: LumenElementConstructor;
+export declare const LumenImageComparisonElement: LumenElementConstructor;
 export declare const LumenLinkElement: LumenElementConstructor;
 export declare const LumenPillElement: LumenElementConstructor;
 export declare const LumenProseElement: LumenElementConstructor;
@@ -202,4 +405,24 @@ export declare const LumenQRCodeElement: LumenElementConstructor;
 export declare const LumenWatermarkElement: LumenElementConstructor;
 export declare const LumenAffixElement: LumenElementConstructor;
 export declare const LumenSpeedDialElement: LumenElementConstructor;
+export declare const LumenDescriptionItemElement: LumenElementConstructor;
+export declare const LumenDescriptionTermElement: LumenElementConstructor;
+export declare const LumenDescriptionDetailElement: LumenElementConstructor;
+export declare const LumenAttachmentListElement: LumenElementConstructor;
+export declare const LumenAttachmentPreviewElement: LumenElementConstructor;
+export declare const LumenChangeSummaryElement: typeof GranularLumenChangeSummaryElement;
+export declare const LumenFilterBarElement: typeof GranularLumenFilterBarElement;
+export declare const LumenDeviceFrameElement: LumenElementConstructor;
+export declare const LumenMotionGroupElement: typeof GranularLumenMotionGroupElement;
+export declare const LumenVisualEffectElement: typeof GranularLumenVisualEffectElement;
+export declare const LumenApprovalCardElement: typeof GranularLumenApprovalCardElement;
+export declare const LumenPromptComposerElement: typeof GranularLumenPromptComposerElement;
+export declare const LumenSourceCitationElement: typeof GranularLumenSourceCitationElement;
+export declare const LumenStreamMessageElement: typeof GranularLumenStreamMessageElement;
+export declare const LumenToolActivityElement: typeof GranularLumenToolActivityElement;
+export declare const LumenChartMotionElement: typeof GranularLumenChartMotionElement;
+export declare const LumenWorldMapElement: LumenElementConstructor;
+export declare const LumenMediaViewportElement: LumenElementConstructor;
+export declare const LumenMediaThumbnailElement: LumenElementConstructor;
+export declare const LumenMediaFilmstripElement: LumenElementConstructor;
 //# sourceMappingURL=define.d.ts.map