@santi020k/lumen-elements 3.0.0 → 4.0.0

package/dist/components/virtual-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"virtual-list.d.ts","sourceRoot":"","sources":["../../src/components/virtual-list.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,0BAA0B,EAC/B,YAAY,EAEb,MAAM,oBAAoB,CAAA;AAE3B,eAAO,MAAM,6BAA6B;;;;;;;;;;;;;;CAWH,CAAA;AAEvC,qBAAa,uBAAwB,SAAQ,YAAY;IACvD,OAAgB,MAAM;;;;;;;;;;;;;;MAAgC;IAEtD,OAAO,CAAC,UAAU,CAAwC;IAEjD,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;CAKtC;AAED,eAAO,MAAM,sBAAsB,GAAI,WAAW,0BAA0B,KAAG,IAE9E,CAAA"}

package/dist/components/virtual-list.js

@@ -0,0 +1,30 @@
+import { createLumenVirtualListController } from '@santi020k/lumen-core/virtual-list';
+import { defineLumenElement, LumenElement } from '../element-base.js';
+export const lumenVirtualListElementConfig = {
+    attributeClasses: {
+        glass: {
+            true: 'ui-virtual-list--glass',
+            subtle: 'ui-virtual-list--glass ui-glass-subtle',
+            strong: 'ui-virtual-list--glass ui-glass-strong'
+        }
+    },
+    baseClassName: 'ui-virtual-list',
+    defaults: { 'data-ui-virtual-list': '', tabindex: '0' },
+    tagName: 'lumen-virtual-list'
+};
+export class LumenVirtualListElement extends LumenElement {
+    static config = lumenVirtualListElementConfig;
+    controller;
+    connectedCallback() {
+        super.connectedCallback();
+        this.controller?.destroy();
+        this.controller = createLumenVirtualListController(this);
+    }
+    disconnectedCallback() {
+        this.controller?.destroy();
+        this.controller = undefined;
+    }
+}
+export const defineLumenVirtualList = (registry) => {
+    defineLumenElement(lumenVirtualListElementConfig, LumenVirtualListElement, registry);
+};

package/dist/components/visual-interactions.d.ts

@@ -0,0 +1,65 @@
+import { LumenElement } from '../element-base.js';
+export declare const lumenMotionGroupElementConfig: {
+    readonly baseClassName: "ui-motion-group";
+    readonly defaults: {
+        readonly 'data-ui-motion-group': "";
+    };
+    readonly observedAttributes: readonly ["duration", "enter-exit"];
+    readonly tagName: "lumen-motion-group";
+};
+export declare class LumenMotionGroupElement extends LumenElement {
+    static config: {
+        readonly baseClassName: "ui-motion-group";
+        readonly defaults: {
+            readonly 'data-ui-motion-group': "";
+        };
+        readonly observedAttributes: readonly ["duration", "enter-exit"];
+        readonly tagName: "lumen-motion-group";
+    };
+    private cleanup;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private bind;
+}
+export declare const lumenChartMotionElementConfig: {
+    readonly baseClassName: "ui-chart-motion";
+    readonly defaults: {
+        readonly 'data-ui-chart-motion': "";
+    };
+    readonly observedAttributes: readonly ["duration"];
+    readonly tagName: "lumen-chart-motion";
+};
+export declare class LumenChartMotionElement extends LumenElement {
+    static config: {
+        readonly baseClassName: "ui-chart-motion";
+        readonly defaults: {
+            readonly 'data-ui-chart-motion': "";
+        };
+        readonly observedAttributes: readonly ["duration"];
+        readonly tagName: "lumen-chart-motion";
+    };
+    private cleanup;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private bind;
+}
+export declare const lumenVisualEffectElementConfig: {
+    readonly baseClassName: "ui-visual-effect";
+    readonly observedAttributes: readonly ["variant", "animated", "intensity"];
+    readonly tagName: "lumen-visual-effect";
+};
+export declare class LumenVisualEffectElement extends LumenElement {
+    static config: {
+        readonly baseClassName: "ui-visual-effect";
+        readonly observedAttributes: readonly ["variant", "animated", "intensity"];
+        readonly tagName: "lumen-visual-effect";
+    };
+    private cleanup;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private update;
+}
+//# sourceMappingURL=visual-interactions.d.ts.map

package/dist/components/visual-interactions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"visual-interactions.d.ts","sourceRoot":"","sources":["../../src/components/visual-interactions.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,YAAY,EAA2B,MAAM,oBAAoB,CAAA;AAE1E,eAAO,MAAM,6BAA6B;;;;;;;CAKH,CAAA;AAEvC,qBAAa,uBAAwB,SAAQ,YAAY;IACvD,OAAgB,MAAM;;;;;;;MAAgC;IACtD,OAAO,CAAC,OAAO,CAA0B;IAEhC,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,wBAAwB,IAAI,IAAI;IAMzC,OAAO,CAAC,IAAI;CAQb;AAED,eAAO,MAAM,6BAA6B;;;;;;;CAKH,CAAA;AAEvC,qBAAa,uBAAwB,SAAQ,YAAY;IACvD,OAAgB,MAAM;;;;;;;MAAgC;IACtD,OAAO,CAAC,OAAO,CAA0B;IAChC,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,wBAAwB,IAAI,IAAI;IAMzC,OAAO,CAAC,IAAI;CAOb;AAED,eAAO,MAAM,8BAA8B;;;;CAIJ,CAAA;AAEvC,qBAAa,wBAAyB,SAAQ,YAAY;IACxD,OAAgB,MAAM;;;;MAAiC;IACvD,OAAO,CAAC,OAAO,CAA0B;IAEhC,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,wBAAwB,IAAI,IAAI;IAMzC,OAAO,CAAC,MAAM;CAef"}

package/dist/components/visual-interactions.js

@@ -0,0 +1,91 @@
+import { bindLumenChartMotion, bindLumenMotionGroup, createLumenSpotlightController, normalizeLumenEffectIntensity } from '@santi020k/lumen-core';
+import { LumenElement } from '../element-base.js';
+export const lumenMotionGroupElementConfig = {
+    baseClassName: 'ui-motion-group',
+    defaults: { 'data-ui-motion-group': '' },
+    observedAttributes: ['duration', 'enter-exit'],
+    tagName: 'lumen-motion-group'
+};
+export class LumenMotionGroupElement extends LumenElement {
+    static config = lumenMotionGroupElementConfig;
+    cleanup;
+    connectedCallback() {
+        super.connectedCallback();
+        this.bind();
+    }
+    disconnectedCallback() {
+        this.cleanup?.();
+        this.cleanup = undefined;
+    }
+    attributeChangedCallback() {
+        super.attributeChangedCallback();
+        if (this.isConnected)
+            this.bind();
+    }
+    bind() {
+        this.cleanup?.();
+        const value = this.getAttribute('duration');
+        const duration = value === 'fast' || value === 'slow' ? value : 'standard';
+        this.cleanup = bindLumenMotionGroup(this, { duration, enterExit: this.getAttribute('enter-exit') !== 'false' });
+    }
+}
+export const lumenChartMotionElementConfig = {
+    baseClassName: 'ui-chart-motion',
+    defaults: { 'data-ui-chart-motion': '' },
+    observedAttributes: ['duration'],
+    tagName: 'lumen-chart-motion'
+};
+export class LumenChartMotionElement extends LumenElement {
+    static config = lumenChartMotionElementConfig;
+    cleanup;
+    connectedCallback() {
+        super.connectedCallback();
+        this.bind();
+    }
+    disconnectedCallback() {
+        this.cleanup?.();
+        this.cleanup = undefined;
+    }
+    attributeChangedCallback() {
+        super.attributeChangedCallback();
+        if (this.isConnected)
+            this.bind();
+    }
+    bind() {
+        this.cleanup?.();
+        const duration = this.getAttribute('duration');
+        this.cleanup = bindLumenChartMotion(this, duration === 'fast' || duration === 'slow' ? duration : 'standard');
+    }
+}
+export const lumenVisualEffectElementConfig = {
+    baseClassName: 'ui-visual-effect',
+    observedAttributes: ['variant', 'animated', 'intensity'],
+    tagName: 'lumen-visual-effect'
+};
+export class LumenVisualEffectElement extends LumenElement {
+    static config = lumenVisualEffectElementConfig;
+    cleanup;
+    connectedCallback() {
+        super.connectedCallback();
+        this.update();
+    }
+    disconnectedCallback() {
+        this.cleanup?.();
+        this.cleanup = undefined;
+    }
+    attributeChangedCallback() {
+        super.attributeChangedCallback();
+        if (this.isConnected)
+            this.update();
+    }
+    update() {
+        this.cleanup?.();
+        this.cleanup = undefined;
+        this.dataset.uiVisualEffect = this.getAttribute('variant') ?? 'mesh';
+        this.dataset.uiEffectAnimated = String(this.hasAttribute('animated') && this.getAttribute('animated') !== 'false');
+        const raw = this.getAttribute('intensity');
+        this.style.setProperty('--ui-effect-intensity', String(normalizeLumenEffectIntensity(raw === null ? undefined : Number(raw))));
+        if (this.dataset.uiVisualEffect === 'spotlight')
+            this.cleanup = createLumenSpotlightController(this);
+    }
+}

package/dist/components/world-map.d.ts

@@ -0,0 +1,46 @@
+import { type LumenWorldMapCountryGeometry, type LumenWorldMapMarker } from '@santi020k/lumen-core/world-map';
+import { type LumenCustomElementRegistry, LumenElement } from '../element-base.js';
+export declare const lumenWorldMapElementConfig: {
+    readonly baseClassName: "ui-world-map";
+    readonly observedAttributes: readonly ["animated", "countries", "highlighted-countries", "interactive", "label", "labels", "list-label", "markers", "selected-country", "variant", "zoomable", "zoom-labels", "initial-view"];
+    readonly tagName: "lumen-world-map";
+};
+export declare class LumenWorldMapElement extends LumenElement {
+    static config: {
+        readonly baseClassName: "ui-world-map";
+        readonly observedAttributes: readonly ["animated", "countries", "highlighted-countries", "interactive", "label", "labels", "list-label", "markers", "selected-country", "variant", "zoomable", "zoom-labels", "initial-view"];
+        readonly tagName: "lumen-world-map";
+    };
+    private countryData;
+    private highlightedData;
+    private markerData;
+    private labelData;
+    private abortController;
+    private instanceId;
+    get countries(): readonly LumenWorldMapCountryGeometry[];
+    set countries(value: readonly LumenWorldMapCountryGeometry[]);
+    get highlightedCountries(): readonly string[];
+    set highlightedCountries(value: readonly string[]);
+    get markers(): readonly LumenWorldMapMarker[];
+    set markers(value: readonly LumenWorldMapMarker[]);
+    get labels(): Readonly<Record<string, string>>;
+    set labels(value: Readonly<Record<string, string>>);
+    get selectedCountry(): string;
+    set selectedCountry(value: string);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    adoptedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private updateSelection;
+    private render;
+    private get zoomText();
+    private appendZoomControls;
+    private countryPath;
+    private highlightList;
+    private appendMarkers;
+    private bindPointer;
+    private appendChooser;
+    private selectCountry;
+}
+export declare const defineLumenWorldMap: (registry?: LumenCustomElementRegistry) => void;
+//# sourceMappingURL=world-map.d.ts.map

package/dist/components/world-map.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"world-map.d.ts","sourceRoot":"","sources":["../../src/components/world-map.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,4BAA4B,EACjC,KAAK,mBAAmB,EAMzB,MAAM,iCAAiC,CAAA;AAGxC,OAAO,EAAsB,KAAK,0BAA0B,EAAE,YAAY,EAA2B,MAAM,oBAAoB,CAAA;AAE/H,eAAO,MAAM,0BAA0B;;;;CAIA,CAAA;AAuDvC,qBAAa,oBAAqB,SAAQ,YAAY;IACpD,OAAgB,MAAM;;;;MAA6B;IAEnD,OAAO,CAAC,WAAW,CAAqD;IACxE,OAAO,CAAC,eAAe,CAA+B;IACtD,OAAO,CAAC,UAAU,CAA4C;IAC9D,OAAO,CAAC,SAAS,CAA8C;IAC/D,OAAO,CAAC,eAAe,CAA6B;IACpD,OAAO,CAAC,UAAU,CAAwC;IAE1D,IAAI,SAAS,IAAI,SAAS,4BAA4B,EAAE,CAEvD;IAED,IAAI,SAAS,CAAC,KAAK,EAAE,SAAS,4BAA4B,EAAE,EAI3D;IAED,IAAI,oBAAoB,IAAI,SAAS,MAAM,EAAE,CAI5C;IAED,IAAI,oBAAoB,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,EAIhD;IAED,IAAI,OAAO,IAAI,SAAS,mBAAmB,EAAE,CAE5C;IAED,IAAI,OAAO,CAAC,KAAK,EAAE,SAAS,mBAAmB,EAAE,EAIhD;IAED,IAAI,MAAM,IAAI,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAE7C;IAED,IAAI,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAIjD;IAED,IAAI,eAAe,IAAI,MAAM,CAE5B;IAED,IAAI,eAAe,CAAC,KAAK,EAAE,MAAM,EAEhC;IAEQ,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAIrC,eAAe,IAAI,IAAI;IAId,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAoBrD,OAAO,CAAC,eAAe;IAqBvB,OAAO,CAAC,MAAM;IAkEd,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,CAAC,kBAAkB;IAwC1B,OAAO,CAAC,WAAW;IAsBnB,OAAO,CAAC,aAAa;IAmBrB,OAAO,CAAC,aAAa;IA+BrB,OAAO,CAAC,WAAW;IA4BnB,OAAO,CAAC,aAAa;IA6CrB,OAAO,CAAC,aAAa;CActB;AAED,eAAO,MAAM,mBAAmB,GAAI,WAAW,0BAA0B,KAAG,IAE3E,CAAA"}

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};