@santi020k/lumen-elements 3.0.1 → 4.0.0

package/dist/components/foundations.d.ts

@@ -69,6 +69,12 @@ export declare const lumenGridElementConfig: {
             readonly auto: "ui-grid--columns-auto";
         };
         readonly gap: {
+            readonly '2xl': "ui-grid--gap-2xl";
+            readonly '3xl': "ui-grid--gap-3xl";
+            readonly group: "ui-grid--gap-group";
+            readonly related: "ui-grid--gap-related";
+            readonly section: "ui-grid--gap-section";
+            readonly xs: "ui-grid--gap-xs";
             readonly lg: "ui-grid--gap-lg";
             readonly md: "ui-grid--gap-md";
             readonly none: "ui-grid--gap-none";
@@ -80,7 +86,7 @@ export declare const lumenGridElementConfig: {
     readonly defaults: {
         readonly 'data-ui-grid': "";
         readonly columns: "auto";
-        readonly gap: "md";
+        readonly gap: "group";
     };
     readonly tagName: "lumen-grid";
 };
@@ -111,11 +117,33 @@ export declare const lumenSpinnerElementConfig: {
 };
 export declare const lumenStackElementConfig: {
     readonly attributeClasses: {
+        readonly align: {
+            readonly center: "ui-stack--align-center";
+            readonly end: "ui-stack--align-end";
+            readonly start: "ui-stack--align-start";
+            readonly stretch: "ui-stack--align-stretch";
+        };
         readonly direction: {
             readonly horizontal: "ui-stack--horizontal";
             readonly vertical: "ui-stack--vertical";
         };
+        readonly justify: {
+            readonly between: "ui-stack--justify-between";
+            readonly center: "ui-stack--justify-center";
+            readonly end: "ui-stack--justify-end";
+            readonly start: "ui-stack--justify-start";
+        };
+        readonly wrap: {
+            readonly '': "ui-stack--wrap";
+            readonly true: "ui-stack--wrap";
+        };
         readonly gap: {
+            readonly '2xl': "ui-stack--gap-2xl";
+            readonly '3xl': "ui-stack--gap-3xl";
+            readonly group: "ui-stack--gap-group";
+            readonly related: "ui-stack--gap-related";
+            readonly section: "ui-stack--gap-section";
+            readonly xs: "ui-stack--gap-xs";
             readonly lg: "ui-stack--gap-lg";
             readonly md: "ui-stack--gap-md";
             readonly none: "ui-stack--gap-none";
@@ -127,7 +155,7 @@ export declare const lumenStackElementConfig: {
     readonly defaults: {
         readonly 'data-ui-stack': "";
         readonly direction: "vertical";
-        readonly gap: "md";
+        readonly gap: "group";
     };
     readonly tagName: "lumen-stack";
 };

package/dist/components/foundations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"foundations.d.ts","sourceRoot":"","sources":["../../src/components/foundations.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,0BAA0B,EAEhC,MAAM,oBAAoB,CAAA;AAO3B,eAAO,MAAM,6BAA6B;;;;;;CAIH,CAAA;AAEvC,eAAO,MAAM,iCAAiC;;;;;;CAIP,CAAA;AAEvC,eAAO,MAAM,4BAA4B;;;;;;CAIF,CAAA;AAEvC,eAAO,MAAM,4BAA4B;;;;;;CAIF,CAAA;AAEvC,eAAO,MAAM,2BAA2B;;;;;;CAID,CAAA;AAEvC,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;CAYD,CAAA;AAEvC,eAAO,MAAM,2BAA2B;;;;;;CAID,CAAA;AAEvC,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;CAsBI,CAAA;AAEvC,eAAO,MAAM,uBAAuB;;;CAGG,CAAA;AAEvC,eAAO,MAAM,2BAA2B;;;;;;;;;;;;CAUD,CAAA;AAEvC,eAAO,MAAM,0BAA0B;;;CAGA,CAAA;AAEvC,eAAO,MAAM,yBAAyB;;;CAGC,CAAA;AAEvC,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;CAiBG,CAAA;AAEvC,eAAO,MAAM,4BAA4B;;;CAGF,CAAA;AAEvC,eAAO,MAAM,gCAAgC;;;;;;CAIN,CAAA;AAkBvC,eAAO,MAAM,uBAAuB,sDAAsB,CAAA;AAC1D,eAAO,MAAM,2BAA2B,sDAA0B,CAAA;AAClE,eAAO,MAAM,sBAAsB,sDAAqB,CAAA;AACxD,eAAO,MAAM,sBAAsB,sDAAqB,CAAA;AACxD,eAAO,MAAM,qBAAqB,sDAAoB,CAAA;AACtD,eAAO,MAAM,qBAAqB,sDAAoB,CAAA;AACtD,eAAO,MAAM,qBAAqB,sDAAoB,CAAA;AACtD,eAAO,MAAM,gBAAgB,sDAAe,CAAA;AAC5C,eAAO,MAAM,iBAAiB,sDAAgB,CAAA;AAC9C,eAAO,MAAM,qBAAqB,sDAAoB,CAAA;AACtD,eAAO,MAAM,oBAAoB,sDAAmB,CAAA;AACpD,eAAO,MAAM,mBAAmB,sDAAkB,CAAA;AAClD,eAAO,MAAM,iBAAiB,sDAAgB,CAAA;AAC9C,eAAO,MAAM,sBAAsB,sDAAqB,CAAA;AACxD,eAAO,MAAM,0BAA0B,sDAAyB,CAAA;AAoBhE,eAAO,MAAM,sBAAsB,GACjC,WAAW,0BAA0B,KACpC,IAIF,CAAA"}
+{"version":3,"file":"foundations.d.ts","sourceRoot":"","sources":["../../src/components/foundations.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,0BAA0B,EAEhC,MAAM,oBAAoB,CAAA;AAO3B,eAAO,MAAM,6BAA6B;;;;;;CAIH,CAAA;AAEvC,eAAO,MAAM,iCAAiC;;;;;;CAIP,CAAA;AAEvC,eAAO,MAAM,4BAA4B;;;;;;CAIF,CAAA;AAEvC,eAAO,MAAM,4BAA4B;;;;;;CAIF,CAAA;AAEvC,eAAO,MAAM,2BAA2B;;;;;;CAID,CAAA;AAEvC,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;CAYD,CAAA;AAEvC,eAAO,MAAM,2BAA2B;;;;;;CAID,CAAA;AAEvC,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BI,CAAA;AAEvC,eAAO,MAAM,uBAAuB;;;CAGG,CAAA;AAEvC,eAAO,MAAM,2BAA2B;;;;;;;;;;;;CAUD,CAAA;AAEvC,eAAO,MAAM,0BAA0B;;;CAGA,CAAA;AAEvC,eAAO,MAAM,yBAAyB;;;CAGC,CAAA;AAEvC,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCG,CAAA;AAEvC,eAAO,MAAM,4BAA4B;;;CAGF,CAAA;AAEvC,eAAO,MAAM,gCAAgC;;;;;;CAIN,CAAA;AAkBvC,eAAO,MAAM,uBAAuB,sDAAsB,CAAA;AAC1D,eAAO,MAAM,2BAA2B,sDAA0B,CAAA;AAClE,eAAO,MAAM,sBAAsB,sDAAqB,CAAA;AACxD,eAAO,MAAM,sBAAsB,sDAAqB,CAAA;AACxD,eAAO,MAAM,qBAAqB,sDAAoB,CAAA;AACtD,eAAO,MAAM,qBAAqB,sDAAoB,CAAA;AACtD,eAAO,MAAM,qBAAqB,sDAAoB,CAAA;AACtD,eAAO,MAAM,gBAAgB,sDAAe,CAAA;AAC5C,eAAO,MAAM,iBAAiB,sDAAgB,CAAA;AAC9C,eAAO,MAAM,qBAAqB,sDAAoB,CAAA;AACtD,eAAO,MAAM,oBAAoB,sDAAmB,CAAA;AACpD,eAAO,MAAM,mBAAmB,sDAAkB,CAAA;AAClD,eAAO,MAAM,iBAAiB,sDAAgB,CAAA;AAC9C,eAAO,MAAM,sBAAsB,sDAAqB,CAAA;AACxD,eAAO,MAAM,0BAA0B,sDAAyB,CAAA;AAoBhE,eAAO,MAAM,sBAAsB,GACjC,WAAW,0BAA0B,KACpC,IAIF,CAAA"}

package/dist/components/foundations.js

@@ -58,6 +58,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 +72,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 = {
@@ -94,11 +100,30 @@ export const lumenSpinnerElementConfig = {
 };
 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 +132,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 = {

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

package/dist/components/media-viewport.js

@@ -0,0 +1,108 @@
+import { bindLumenMediaViewport, lumenMediaViewportActions, lumenMediaViewportLabels, syncLumenMediaViewport } from '@santi020k/lumen-core/media-viewport';
+import { normalizeLumenMediaViewport } from '@santi020k/lumen-core/media-workspace';
+import { defineLumenElement, LumenElement } from '../element-base.js';
+export const lumenMediaViewportElementConfig = {
+    baseClassName: 'ui-media-viewport',
+    observedAttributes: ['label', 'disabled', 'max-zoom', 'zoom', 'pan-x', 'pan-y', 'ratio', 'locale', 'lang'],
+    tagName: 'lumen-media-viewport'
+};
+export class LumenMediaViewportElement extends LumenElement {
+    static config = lumenMediaViewportElementConfig;
+    cleanup;
+    stage;
+    copy = lumenMediaViewportLabels;
+    get value() {
+        return normalizeLumenMediaViewport({ zoom: Number(this.getAttribute('zoom') ?? 1), x: Number(this.getAttribute('pan-x') ?? 0), y: Number(this.getAttribute('pan-y') ?? 0) }, this.maxZoom);
+    }
+    set value(value) {
+        const next = normalizeLumenMediaViewport(value, this.maxZoom);
+        this.setAttribute('zoom', String(next.zoom));
+        this.setAttribute('pan-x', String(next.x));
+        this.setAttribute('pan-y', String(next.y));
+    }
+    set labels(value) {
+        this.copy = { ...lumenMediaViewportLabels, ...value };
+        this.update();
+    }
+    get maxZoom() {
+        return Number(this.getAttribute('max-zoom') ?? 4);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.stage)
+            this.createContent();
+        this.cleanup?.();
+        this.cleanup = bindLumenMediaViewport(this, {
+            disabled: () => this.hasAttribute('disabled'),
+            getValue: () => this.value,
+            maxZoom: () => this.maxZoom,
+            onValueChange: value => {
+                this.value = value;
+                this.dispatchEvent(new CustomEvent('ui:media-viewport-change', { bubbles: true, detail: value }));
+            }
+        });
+        this.update();
+    }
+    disconnectedCallback() {
+        this.cleanup?.();
+        this.cleanup = undefined;
+    }
+    attributeChangedCallback() {
+        super.attributeChangedCallback();
+        this.update();
+    }
+    createContent() {
+        const stage = this.ownerDocument.createElement('div');
+        const content = this.ownerDocument.createElement('div');
+        const caption = this.ownerDocument.createElement('div');
+        const status = this.ownerDocument.createElement('span');
+        const actions = this.ownerDocument.createElement('div');
+        stage.className = 'ui-media-viewport__stage';
+        stage.dataset.uiMediaViewportStage = '';
+        stage.tabIndex = 0;
+        stage.setAttribute('role', 'group');
+        content.className = 'ui-media-viewport__content';
+        content.dataset.uiMediaViewportContent = '';
+        content.append(...this.childNodes);
+        stage.append(content);
+        status.dataset.uiMediaViewportStatus = '';
+        status.id = `media-viewport-${crypto.randomUUID()}`;
+        status.setAttribute('role', 'status');
+        status.setAttribute('aria-live', 'polite');
+        stage.setAttribute('aria-describedby', status.id);
+        actions.className = 'ui-media-viewport__actions';
+        actions.setAttribute('role', 'group');
+        for (const action of lumenMediaViewportActions) {
+            const button = this.ownerDocument.createElement('button');
+            button.type = 'button';
+            button.className = 'ui-button ui-button--outline';
+            button.dataset.uiMediaViewportAction = action;
+            actions.append(button);
+        }
+        caption.className = 'ui-media-viewport__caption';
+        caption.append(status, actions);
+        this.append(stage, caption);
+        this.stage = stage;
+    }
+    get locale() {
+        return this.getAttribute('locale') ?? this.closest('[lang]')?.getAttribute('lang') ?? undefined;
+    }
+    update() {
+        if (!this.stage)
+            return;
+        const ratio = Number(this.getAttribute('ratio') ?? 16 / 9);
+        const label = this.getAttribute('label') ?? 'Media preview';
+        this.stage.style.aspectRatio = String(Number.isFinite(ratio) && ratio >= 0.1 && ratio <= 10 ? ratio : 16 / 9);
+        this.stage.setAttribute('aria-label', label);
+        this.querySelector('.ui-media-viewport__actions')?.setAttribute('aria-label', label);
+        for (const [index, action] of lumenMediaViewportActions.entries()) {
+            const button = this.querySelectorAll('button[data-ui-media-viewport-action]')[index];
+            if (button)
+                button.textContent = this.copy[action];
+        }
+        syncLumenMediaViewport(this, this.value, this.maxZoom, this.hasAttribute('disabled'), this.locale);
+    }
+}
+export const defineLumenMediaViewport = (registry) => {
+    defineLumenElement(lumenMediaViewportElementConfig, LumenMediaViewportElement, registry);
+};

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

@@ -0,0 +1,38 @@
+import { type LumenCustomElementRegistry, LumenElement } from '../element-base.js';
+export declare const lumenVirtualListElementConfig: {
+    readonly attributeClasses: {
+        readonly glass: {
+            readonly true: "ui-virtual-list--glass";
+            readonly subtle: "ui-virtual-list--glass ui-glass-subtle";
+            readonly strong: "ui-virtual-list--glass ui-glass-strong";
+        };
+    };
+    readonly baseClassName: "ui-virtual-list";
+    readonly defaults: {
+        readonly 'data-ui-virtual-list': "";
+        readonly tabindex: "0";
+    };
+    readonly tagName: "lumen-virtual-list";
+};
+export declare class LumenVirtualListElement extends LumenElement {
+    static config: {
+        readonly attributeClasses: {
+            readonly glass: {
+                readonly true: "ui-virtual-list--glass";
+                readonly subtle: "ui-virtual-list--glass ui-glass-subtle";
+                readonly strong: "ui-virtual-list--glass ui-glass-strong";
+            };
+        };
+        readonly baseClassName: "ui-virtual-list";
+        readonly defaults: {
+            readonly 'data-ui-virtual-list': "";
+            readonly tabindex: "0";
+        };
+        readonly tagName: "lumen-virtual-list";
+    };
+    private controller;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+export declare const defineLumenVirtualList: (registry?: LumenCustomElementRegistry) => void;
+//# sourceMappingURL=virtual-list.d.ts.map