@santi020k/lumen-elements 3.0.1 → 4.1.0

package/dist/components/foundations.js

@@ -1,8 +1,124 @@
-import { createLumenElementClass, defineLumenElement } from '../element-base.js';
-const createFoundation = (config) => ({
-    config,
-    element: createLumenElementClass(config)
-});
+import { resolveLumenLoadingSemantics, resolveLumenSkeletonSize } from '@santi020k/lumen-core';
+import { createLumenElementClass, defineLumenElement, LumenElement } from '../element-base.js';
+const createFoundation = (config, element = createLumenElementClass(config)) => ({ config, element });
+const loadingSemanticAttributes = ['aria-hidden', 'aria-label', 'aria-labelledby', 'role'];
+const loadingOwnershipAttribute = 'data-ui-loading-managed';
+const generatedLoadingValues = { 'aria-hidden': 'true', role: 'status' };
+const isManagedLoadingAttribute = (value) => value === 'aria-hidden' || value === 'role';
+const skeletonSizeProperties = { height: '--ui-skeleton-height', width: '--ui-skeleton-width' };
+class LumenLoadingIndicatorElement extends LumenElement {
+    #applied = new Set();
+    #applying = false;
+    connectedCallback() {
+        super.connectedCallback();
+        this.#restoreOwnership();
+        this.syncLoadingState();
+    }
+    attributeChangedCallback(name, previousValue, value) {
+        super.attributeChangedCallback(name, previousValue, value);
+        if (this.#applying)
+            return;
+        if (name === 'aria-hidden' || name === 'role') {
+            this.#applied.delete(name);
+            if (previousValue !== null && previousValue !== undefined)
+                this.#forgetOwnership(name);
+        }
+        if (this.isConnected)
+            this.syncLoadingState();
+    }
+    #restoreOwnership() {
+        const recorded = this.getAttribute(loadingOwnershipAttribute)?.split(' ') ?? [];
+        for (const name of recorded) {
+            if (isManagedLoadingAttribute(name) && this.getAttribute(name) === generatedLoadingValues[name]) {
+                this.#applied.add(name);
+            }
+        }
+    }
+    #recordOwnership() {
+        this.#writeOwnership([...this.#applied]);
+    }
+    #forgetOwnership(name) {
+        const recorded = this.getAttribute(loadingOwnershipAttribute)?.split(' ') ?? [];
+        const owned = [...recorded.filter(isManagedLoadingAttribute), ...this.#applied];
+        this.#writeOwnership(owned.filter(token => token !== name));
+    }
+    #writeOwnership(tokens) {
+        const owned = [...new Set(tokens)].sort().join(' ');
+        if ((this.getAttribute(loadingOwnershipAttribute) ?? '') === owned)
+            return;
+        this.#applying = true;
+        try {
+            if (owned)
+                this.setAttribute(loadingOwnershipAttribute, owned);
+            else
+                this.removeAttribute(loadingOwnershipAttribute);
+        }
+        finally {
+            this.#applying = false;
+        }
+    }
+    syncLoadingState() {
+        const semantics = resolveLumenLoadingSemantics({
+            ariaHidden: this.#readExplicit('aria-hidden'),
+            ariaLabel: this.getAttribute('aria-label'),
+            ariaLabelledby: this.getAttribute('aria-labelledby'),
+            role: this.#readExplicit('role')
+        });
+        this.#manage('aria-hidden', semantics.ariaHidden);
+        this.#manage('role', semantics.role);
+    }
+    #readExplicit(name) {
+        return this.#applied.has(name) ? null : this.getAttribute(name);
+    }
+    #manage(name, value) {
+        if (!this.#applied.has(name) && this.hasAttribute(name))
+            return;
+        this.#applying = true;
+        try {
+            if (value === undefined) {
+                this.removeAttribute(name);
+                this.#applied.delete(name);
+            }
+            else {
+                this.setAttribute(name, value);
+                this.#applied.add(name);
+            }
+        }
+        finally {
+            this.#applying = false;
+        }
+        this.#recordOwnership();
+    }
+}
+class LumenSkeletonBehaviorElement extends LumenLoadingIndicatorElement {
+    #appliedSizes = new Map();
+    syncLoadingState() {
+        super.syncLoadingState();
+        for (const [attribute, property] of Object.entries(skeletonSizeProperties)) {
+            const size = resolveLumenSkeletonSize(this.getAttribute(attribute));
+            const current = this.style.getPropertyValue(property);
+            const ownership = `data-ui-skeleton-${attribute}`;
+            if (!this.#appliedSizes.has(property) && current && current === this.getAttribute(ownership)) {
+                this.#appliedSizes.set(property, current);
+            }
+            const applied = this.#appliedSizes.get(property);
+            if (current && current !== applied) {
+                this.#appliedSizes.delete(property);
+                this.removeAttribute(ownership);
+                continue;
+            }
+            if (size) {
+                this.style.setProperty(property, size);
+                this.#appliedSizes.set(property, size);
+                this.setAttribute(ownership, size);
+            }
+            else if (this.#appliedSizes.delete(property)) {
+                this.style.removeProperty(property);
+                this.removeAttribute(ownership);
+            }
+        }
+    }
+}
 export const lumenCardContentElementConfig = {
     baseClassName: 'ui-card__content',
     defaults: { 'data-slot': 'card-content' },
@@ -58,6 +174,12 @@ export const lumenGridElementConfig = {
             auto: 'ui-grid--columns-auto'
         },
         gap: {
+            '2xl': 'ui-grid--gap-2xl',
+            '3xl': 'ui-grid--gap-3xl',
+            group: 'ui-grid--gap-group',
+            related: 'ui-grid--gap-related',
+            section: 'ui-grid--gap-section',
+            xs: 'ui-grid--gap-xs',
             lg: 'ui-grid--gap-lg',
             md: 'ui-grid--gap-md',
             none: 'ui-grid--gap-none',
@@ -66,7 +188,7 @@ export const lumenGridElementConfig = {
         }
     },
     baseClassName: 'ui-grid',
-    defaults: { 'data-ui-grid': '', columns: 'auto', gap: 'md' },
+    defaults: { 'data-ui-grid': '', columns: 'auto', gap: 'group' },
     tagName: 'lumen-grid'
 };
 export const lumenLabelElementConfig = {
@@ -85,20 +207,45 @@ export const lumenSeparatorElementConfig = {
     tagName: 'lumen-separator'
 };
 export const lumenSkeletonElementConfig = {
+    attributeClasses: {
+        animation: { none: 'ui-skeleton--static', pulse: 'ui-skeleton--pulse' },
+        shape: { circle: 'ui-skeleton--circle', text: 'ui-skeleton--text' }
+    },
     baseClassName: 'ui-skeleton',
+    observedAttributes: ['animation', 'height', 'shape', 'width', ...loadingSemanticAttributes],
     tagName: 'lumen-skeleton'
 };
 export const lumenSpinnerElementConfig = {
     baseClassName: 'ui-spinner',
+    observedAttributes: loadingSemanticAttributes,
     tagName: 'lumen-spinner'
 };
 export const lumenStackElementConfig = {
     attributeClasses: {
+        align: {
+            center: 'ui-stack--align-center',
+            end: 'ui-stack--align-end',
+            start: 'ui-stack--align-start',
+            stretch: 'ui-stack--align-stretch'
+        },
         direction: {
             horizontal: 'ui-stack--horizontal',
             vertical: 'ui-stack--vertical'
         },
+        justify: {
+            between: 'ui-stack--justify-between',
+            center: 'ui-stack--justify-center',
+            end: 'ui-stack--justify-end',
+            start: 'ui-stack--justify-start'
+        },
+        wrap: { '': 'ui-stack--wrap', true: 'ui-stack--wrap' },
         gap: {
+            '2xl': 'ui-stack--gap-2xl',
+            '3xl': 'ui-stack--gap-3xl',
+            group: 'ui-stack--gap-group',
+            related: 'ui-stack--gap-related',
+            section: 'ui-stack--gap-section',
+            xs: 'ui-stack--gap-xs',
             lg: 'ui-stack--gap-lg',
             md: 'ui-stack--gap-md',
             none: 'ui-stack--gap-none',
@@ -107,7 +254,7 @@ export const lumenStackElementConfig = {
         }
     },
     baseClassName: 'ui-stack',
-    defaults: { 'data-ui-stack': '', direction: 'vertical', gap: 'md' },
+    defaults: { 'data-ui-stack': '', direction: 'vertical', gap: 'group' },
     tagName: 'lumen-stack'
 };
 export const lumenTypographyElementConfig = {
@@ -129,8 +276,12 @@ const direction = createFoundation(lumenDirectionElementConfig);
 const grid = createFoundation(lumenGridElementConfig);
 const label = createFoundation(lumenLabelElementConfig);
 const separator = createFoundation(lumenSeparatorElementConfig);
-const skeleton = createFoundation(lumenSkeletonElementConfig);
-const spinner = createFoundation(lumenSpinnerElementConfig);
+const skeleton = createFoundation(lumenSkeletonElementConfig, class extends LumenSkeletonBehaviorElement {
+    static config = lumenSkeletonElementConfig;
+});
+const spinner = createFoundation(lumenSpinnerElementConfig, class extends LumenLoadingIndicatorElement {
+    static config = lumenSpinnerElementConfig;
+});
 const stack = createFoundation(lumenStackElementConfig);
 const typography = createFoundation(lumenTypographyElementConfig);
 const visuallyHidden = createFoundation(lumenVisuallyHiddenElementConfig);

package/dist/components/image-comparison.d.ts

@@ -0,0 +1,33 @@
+import { type LumenCustomElementRegistry, LumenElement } from '../element-base.js';
+export declare const lumenImageComparisonElementConfig: {
+    readonly baseClassName: "ui-image-comparison";
+    readonly observedAttributes: readonly ["after-label", "before-label", "disabled", "fit", "label", "lang", "locale", "mode", "name", "ratio", "value"];
+    readonly tagName: "lumen-image-comparison";
+};
+export declare class LumenImageComparisonElement extends LumenElement {
+    static config: {
+        readonly baseClassName: "ui-image-comparison";
+        readonly observedAttributes: readonly ["after-label", "before-label", "disabled", "fit", "label", "lang", "locale", "mode", "name", "ratio", "value"];
+        readonly tagName: "lumen-image-comparison";
+    };
+    private abortController;
+    private frame;
+    private range;
+    private beforeLabel;
+    private afterLabel;
+    private controlLabel;
+    private reflectingInput;
+    get value(): number;
+    set value(value: number);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private connect;
+    private createContent;
+    private get afterText();
+    private get locale();
+    private disabledForMode;
+    private update;
+}
+export declare const defineLumenImageComparison: (registry?: LumenCustomElementRegistry) => void;
+//# sourceMappingURL=image-comparison.d.ts.map

package/dist/components/image-comparison.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-comparison.d.ts","sourceRoot":"","sources":["../../src/components/image-comparison.ts"],"names":[],"mappings":"AAOA,OAAO,EAEL,KAAK,0BAA0B,EAC/B,YAAY,EAEb,MAAM,oBAAoB,CAAA;AAE3B,eAAO,MAAM,iCAAiC;;;;CAIP,CAAA;AAEvC,qBAAa,2BAA4B,SAAQ,YAAY;IAC3D,OAAgB,MAAM;;;;MAAoC;IAE1D,OAAO,CAAC,eAAe,CAA6B;IACpD,OAAO,CAAC,KAAK,CAA4B;IACzC,OAAO,CAAC,KAAK,CAA8B;IAC3C,OAAO,CAAC,WAAW,CAA6B;IAChD,OAAO,CAAC,UAAU,CAA6B;IAC/C,OAAO,CAAC,YAAY,CAA6B;IACjD,OAAO,CAAC,eAAe,CAAQ;IAE/B,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAEQ,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;IAM5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAQrD,OAAO,CAAC,OAAO;IA6Cf,OAAO,CAAC,aAAa;IAiErB,OAAO,KAAK,SAAS,GAEpB;IAED,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,MAAM;CA8Bf;AAED,eAAO,MAAM,0BAA0B,GAAI,WAAW,0BAA0B,KAAG,IAElF,CAAA"}

package/dist/components/image-comparison.js

@@ -0,0 +1,144 @@
+import { formatLumenImageComparisonValue, normalizeLumenImageComparisonMode, normalizeLumenImageComparisonRatio, normalizeLumenImageComparisonValue, syncLumenImageComparisonMode } from '@santi020k/lumen-core';
+import { defineLumenElement, LumenElement } from '../element-base.js';
+export const lumenImageComparisonElementConfig = {
+    baseClassName: 'ui-image-comparison',
+    observedAttributes: ['after-label', 'before-label', 'disabled', 'fit', 'label', 'lang', 'locale', 'mode', 'name', 'ratio', 'value'],
+    tagName: 'lumen-image-comparison'
+};
+export class LumenImageComparisonElement extends LumenElement {
+    static config = lumenImageComparisonElementConfig;
+    abortController;
+    frame;
+    range;
+    beforeLabel;
+    afterLabel;
+    controlLabel;
+    reflectingInput = false;
+    get value() {
+        return normalizeLumenImageComparisonValue(this.getAttribute('value'));
+    }
+    set value(value) {
+        this.setAttribute('value', String(normalizeLumenImageComparisonValue(value)));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.connect();
+        queueMicrotask(() => {
+            if (this.isConnected && !this.range)
+                this.connect();
+        });
+    }
+    disconnectedCallback() {
+        this.abortController?.abort();
+        this.abortController = undefined;
+    }
+    attributeChangedCallback(name) {
+        super.attributeChangedCallback();
+        if (name === 'value' && this.range && !this.reflectingInput)
+            this.range.defaultValue = String(this.value);
+        this.update();
+    }
+    connect() {
+        if (!this.range)
+            this.createContent();
+        if (!this.range)
+            return;
+        this.abortController?.abort();
+        this.abortController = new AbortController();
+        const { signal } = this.abortController;
+        this.range.addEventListener('input', () => {
+            if (!this.range || this.range.disabled)
+                return;
+            this.reflectingInput = true;
+            try {
+                this.value = this.range.valueAsNumber;
+            }
+            finally {
+                this.reflectingInput = false;
+            }
+            this.dispatchEvent(new CustomEvent('ui:image-comparison-change', {
+                bubbles: true,
+                detail: { value: this.value }
+            }));
+        }, { signal });
+        this.ownerDocument.addEventListener('reset', event => {
+            const range = this.range;
+            if (!range)
+                return;
+            if (event.target !== range.form)
+                return;
+            window.setTimeout(() => {
+                if (signal.aborted || event.defaultPrevented || !this.isConnected)
+                    return;
+                this.value = normalizeLumenImageComparisonValue(range.defaultValue);
+            });
+        }, { capture: true, signal });
+        this.update();
+    }
+    createContent() {
+        const before = this.querySelector(':scope > [slot="before"]');
+        const after = this.querySelector(':scope > [slot="after"]');
+        if (!before || !after)
+            return;
+        this.frame = this.ownerDocument.createElement('div');
+        this.frame.className = 'ui-image-comparison__frame';
+        const beforeLayer = this.ownerDocument.createElement('div');
+        const afterLayer = this.ownerDocument.createElement('div');
+        const divider = this.ownerDocument.createElement('div');
+        beforeLayer.className = 'ui-image-comparison__before';
+        afterLayer.className = 'ui-image-comparison__after';
+        divider.className = 'ui-image-comparison__divider';
+        divider.setAttribute('aria-hidden', 'true');
+        beforeLayer.append(before);
+        afterLayer.append(after);
+        this.frame.append(beforeLayer, afterLayer, divider);
+        const labels = this.ownerDocument.createElement('div');
+        labels.className = 'ui-image-comparison__labels';
+        labels.setAttribute('aria-hidden', 'true');
+        this.beforeLabel = this.ownerDocument.createElement('span');
+        this.afterLabel = this.ownerDocument.createElement('span');
+        labels.append(this.beforeLabel, this.afterLabel);
+        const control = this.ownerDocument.createElement('label');
+        control.className = 'ui-image-comparison__control';
+        this.controlLabel = this.ownerDocument.createElement('span');
+        this.range = this.ownerDocument.createElement('input');
+        this.range.className = 'ui-slider ui-image-comparison__range';
+        this.range.type = 'range';
+        this.range.min = '0';
+        this.range.max = '100';
+        this.range.step = '1';
+        this.range.defaultValue = String(this.value);
+        control.append(this.controlLabel, this.range);
+        this.prepend(this.frame, labels, control);
+    }
+    get afterText() {
+        return this.getAttribute('after-label') ?? 'After';
+    }
+    get locale() {
+        return this.getAttribute('locale') || this.closest('[lang]')?.getAttribute('lang') || undefined;
+    }
+    disabledForMode(mode) {
+        return this.hasAttribute('disabled') || mode !== 'reveal';
+    }
+    update() {
+        if (!this.range || !this.frame || !this.beforeLabel || !this.afterLabel || !this.controlLabel)
+            return;
+        const mode = normalizeLumenImageComparisonMode(this.getAttribute('mode'));
+        syncLumenImageComparisonMode(this, mode);
+        const afterLabel = this.afterText;
+        const locale = this.locale;
+        this.beforeLabel.textContent = this.getAttribute('before-label') ?? 'Before';
+        this.afterLabel.textContent = afterLabel;
+        this.controlLabel.textContent = this.getAttribute('label') ?? 'Compare images';
+        this.dataset.fit = this.getAttribute('fit') === 'contain' ? 'contain' : 'cover';
+        this.frame.style.setProperty('--ui-image-comparison-ratio', String(normalizeLumenImageComparisonRatio(this.getAttribute('ratio'))));
+        this.frame.style.setProperty('--ui-image-comparison-position', `${this.value}%`);
+        this.range.value = String(this.value);
+        this.range.disabled = this.disabledForMode(mode);
+        this.range.name = this.getAttribute('name') ?? '';
+        this.range.ariaValueText = formatLumenImageComparisonValue(this.value, afterLabel, locale);
+    }
+}
+export const defineLumenImageComparison = (registry) => {
+    defineLumenElement(lumenImageComparisonElementConfig, LumenImageComparisonElement, registry);
+};

package/dist/components/media-selection.d.ts

@@ -0,0 +1,41 @@
+import { type LumenCustomElementRegistry, LumenElement } from '../element-base.js';
+export declare const lumenMediaThumbnailElementConfig: {
+    readonly baseClassName: "ui-media-thumbnail";
+    readonly observedAttributes: readonly ["label", "media-id", "selected", "order", "state", "state-label", "disabled"];
+    readonly tagName: "lumen-media-thumbnail";
+};
+export declare class LumenMediaThumbnailElement extends LumenElement {
+    static config: {
+        readonly baseClassName: "ui-media-thumbnail";
+        readonly observedAttributes: readonly ["label", "media-id", "selected", "order", "state", "state-label", "disabled"];
+        readonly tagName: "lumen-media-thumbnail";
+    };
+    private button;
+    private labelNode;
+    private orderNode;
+    private stateNode;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private createContent;
+    private update;
+}
+export declare const lumenMediaFilmstripElementConfig: {
+    readonly baseClassName: "ui-media-filmstrip";
+    readonly observedAttributes: readonly ["label", "selection-label"];
+    readonly tagName: "lumen-media-filmstrip";
+};
+export declare class LumenMediaFilmstripElement extends LumenElement {
+    static config: {
+        readonly baseClassName: "ui-media-filmstrip";
+        readonly observedAttributes: readonly ["label", "selection-label"];
+        readonly tagName: "lumen-media-filmstrip";
+    };
+    private labelNode;
+    private summary;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private update;
+}
+export declare const defineLumenMediaThumbnail: (registry?: LumenCustomElementRegistry) => void;
+export declare const defineLumenMediaFilmstrip: (registry?: LumenCustomElementRegistry) => void;
+//# sourceMappingURL=media-selection.d.ts.map

package/dist/components/media-selection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-selection.d.ts","sourceRoot":"","sources":["../../src/components/media-selection.ts"],"names":[],"mappings":"AAEA,OAAO,EAAsB,KAAK,0BAA0B,EAAE,YAAY,EAA2B,MAAM,oBAAoB,CAAA;AAE/H,eAAO,MAAM,gCAAgC;;;;CAIN,CAAA;AAEvC,qBAAa,0BAA2B,SAAQ,YAAY;IAC1D,OAAgB,MAAM;;;;MAAmC;IACzD,OAAO,CAAC,MAAM,CAA+B;IAC7C,OAAO,CAAC,SAAS,CAA6B;IAC9C,OAAO,CAAC,SAAS,CAA6B;IAC9C,OAAO,CAAC,SAAS,CAA6B;IAErC,iBAAiB,IAAI,IAAI;IAQzB,wBAAwB,IAAI,IAAI;IAMzC,OAAO,CAAC,aAAa;IAgDrB,OAAO,CAAC,MAAM;CAyBf;AAED,eAAO,MAAM,gCAAgC;;;;CAIN,CAAA;AAEvC,qBAAa,0BAA2B,SAAQ,YAAY;IAC1D,OAAgB,MAAM;;;;MAAmC;IACzD,OAAO,CAAC,SAAS,CAA6B;IAC9C,OAAO,CAAC,OAAO,CAA6B;IAEnC,iBAAiB,IAAI,IAAI;IA2BzB,wBAAwB,IAAI,IAAI;IAMzC,OAAO,CAAC,MAAM;CAWf;AAED,eAAO,MAAM,yBAAyB,GAAI,WAAW,0BAA0B,KAAG,IAEjF,CAAA;AAED,eAAO,MAAM,yBAAyB,GAAI,WAAW,0BAA0B,KAAG,IAEjF,CAAA"}

package/dist/components/media-selection.js

@@ -0,0 +1,114 @@
+import { formatLumenMediaThumbnailState, resolveLumenMediaOrder, resolveLumenMediaThumbnailState } from '@santi020k/lumen-core/media-workspace';
+import { defineLumenElement, LumenElement } from '../element-base.js';
+export const lumenMediaThumbnailElementConfig = {
+    baseClassName: 'ui-media-thumbnail',
+    observedAttributes: ['label', 'media-id', 'selected', 'order', 'state', 'state-label', 'disabled'],
+    tagName: 'lumen-media-thumbnail'
+};
+export class LumenMediaThumbnailElement extends LumenElement {
+    static config = lumenMediaThumbnailElementConfig;
+    button;
+    labelNode;
+    orderNode;
+    stateNode;
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.button)
+            this.createContent();
+        this.update();
+    }
+    attributeChangedCallback() {
+        super.attributeChangedCallback();
+        this.update();
+    }
+    createContent() {
+        const button = this.ownerDocument.createElement('button');
+        const media = this.ownerDocument.createElement('span');
+        const content = this.ownerDocument.createElement('span');
+        button.className = 'ui-button ui-button--outline ui-media-thumbnail';
+        button.type = 'button';
+        content.className = 'ui-button__content';
+        media.className = 'ui-media-thumbnail__media';
+        media.setAttribute('aria-hidden', 'true');
+        media.append(...this.childNodes);
+        this.labelNode = this.ownerDocument.createElement('span');
+        this.labelNode.className = 'ui-media-thumbnail__label';
+        this.orderNode = this.ownerDocument.createElement('span');
+        this.orderNode.className = 'ui-media-thumbnail__order';
+        this.stateNode = this.ownerDocument.createElement('span');
+        this.stateNode.className = 'ui-media-thumbnail__state';
+        content.append(media, this.labelNode, this.orderNode, this.stateNode);
+        button.append(content);
+        button.addEventListener('click', () => {
+            const id = this.getAttribute('media-id');
+            if (button.disabled || !id)
+                return;
+            this.dispatchEvent(new CustomEvent('ui:media-selection-request', {
+                bubbles: true, detail: { id, selected: !this.hasAttribute('selected') }
+            }));
+        });
+        this.append(button);
+        this.button = button;
+    }
+    update() {
+        if (!this.button || !this.labelNode || !this.orderNode || !this.stateNode)
+            return;
+        const rawState = this.getAttribute('state');
+        const state = resolveLumenMediaThumbnailState(rawState);
+        const order = resolveLumenMediaOrder(Number(this.getAttribute('order')));
+        this.button.dataset.state = state;
+        this.button.disabled = this.hasAttribute('disabled') || state !== 'ready';
+        this.button.setAttribute('aria-pressed', String(this.hasAttribute('selected')));
+        this.button.setAttribute('aria-busy', String(state === 'loading'));
+        this.labelNode.textContent = this.getAttribute('label') ?? '';
+        this.orderNode.hidden = order === undefined;
+        this.orderNode.textContent = this.orderNode.hidden ? '' : String(order);
+        this.stateNode.hidden = state === 'ready';
+        this.stateNode.textContent = formatLumenMediaThumbnailState(state, this.getAttribute('state-label') ?? undefined);
+    }
+}
+export const lumenMediaFilmstripElementConfig = {
+    baseClassName: 'ui-media-filmstrip',
+    observedAttributes: ['label', 'selection-label'],
+    tagName: 'lumen-media-filmstrip'
+};
+export class LumenMediaFilmstripElement extends LumenElement {
+    static config = lumenMediaFilmstripElementConfig;
+    labelNode;
+    summary;
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.summary) {
+            const heading = this.ownerDocument.createElement('div');
+            const list = this.ownerDocument.createElement('ol');
+            heading.className = 'ui-media-filmstrip__heading';
+            list.className = 'ui-media-filmstrip__items';
+            this.labelNode = this.ownerDocument.createElement('span');
+            this.summary = this.ownerDocument.createElement('span');
+            this.summary.setAttribute('role', 'status');
+            heading.append(this.labelNode, this.summary);
+            list.append(...this.childNodes);
+            this.append(heading, list);
+        }
+        this.update();
+    }
+    attributeChangedCallback() {
+        super.attributeChangedCallback();
+        this.update();
+    }
+    update() {
+        const label = this.getAttribute('label') ?? 'Media selection';
+        this.setAttribute('role', 'region');
+        this.setAttribute('aria-label', label);
+        if (this.labelNode)
+            this.labelNode.textContent = label;
+        if (this.summary)
+            this.summary.textContent = this.getAttribute('selection-label') ?? '';
+    }
+}
+export const defineLumenMediaThumbnail = (registry) => {
+    defineLumenElement(lumenMediaThumbnailElementConfig, LumenMediaThumbnailElement, registry);
+};
+export const defineLumenMediaFilmstrip = (registry) => {
+    defineLumenElement(lumenMediaFilmstripElementConfig, LumenMediaFilmstripElement, registry);
+};

package/dist/components/media-viewport.d.ts

@@ -0,0 +1,30 @@
+import { type LumenMediaViewportLabels } from '@santi020k/lumen-core/media-viewport';
+import { type LumenMediaViewportValue } from '@santi020k/lumen-core/media-workspace';
+import { type LumenCustomElementRegistry, LumenElement } from '../element-base.js';
+export declare const lumenMediaViewportElementConfig: {
+    readonly baseClassName: "ui-media-viewport";
+    readonly observedAttributes: readonly ["label", "disabled", "max-zoom", "zoom", "pan-x", "pan-y", "ratio", "locale", "lang"];
+    readonly tagName: "lumen-media-viewport";
+};
+export declare class LumenMediaViewportElement extends LumenElement {
+    static config: {
+        readonly baseClassName: "ui-media-viewport";
+        readonly observedAttributes: readonly ["label", "disabled", "max-zoom", "zoom", "pan-x", "pan-y", "ratio", "locale", "lang"];
+        readonly tagName: "lumen-media-viewport";
+    };
+    private cleanup;
+    private stage;
+    private copy;
+    get value(): LumenMediaViewportValue;
+    set value(value: LumenMediaViewportValue);
+    set labels(value: Partial<LumenMediaViewportLabels>);
+    private get maxZoom();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private createContent;
+    private get locale();
+    private update;
+}
+export declare const defineLumenMediaViewport: (registry?: LumenCustomElementRegistry) => void;
+//# sourceMappingURL=media-viewport.d.ts.map

package/dist/components/media-viewport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-viewport.d.ts","sourceRoot":"","sources":["../../src/components/media-viewport.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,wBAAwB,EAG9B,MAAM,sCAAsC,CAAA;AAC7C,OAAO,EAAE,KAAK,uBAAuB,EAA+B,MAAM,uCAAuC,CAAA;AAEjH,OAAO,EAAsB,KAAK,0BAA0B,EAAE,YAAY,EAA2B,MAAM,oBAAoB,CAAA;AAE/H,eAAO,MAAM,+BAA+B;;;;CAIL,CAAA;AAEvC,qBAAa,yBAA0B,SAAQ,YAAY;IACzD,OAAgB,MAAM;;;;MAAkC;IACxD,OAAO,CAAC,OAAO,CAA0B;IACzC,OAAO,CAAC,KAAK,CAA4B;IACzC,OAAO,CAAC,IAAI,CAAqD;IAEjE,IAAI,KAAK,IAAI,uBAAuB,CAEnC;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,uBAAuB,EAQvC;IAED,IAAI,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,wBAAwB,CAAC,EAIlD;IAED,OAAO,KAAK,OAAO,GAElB;IAEQ,iBAAiB,IAAI,IAAI;IAqBzB,oBAAoB,IAAI,IAAI;IAM5B,wBAAwB,IAAI,IAAI;IAMzC,OAAO,CAAC,aAAa;IA0DrB,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,CAAC,MAAM;CAoBf;AAED,eAAO,MAAM,wBAAwB,GAAI,WAAW,0BAA0B,KAAG,IAEhF,CAAA"}