luxen-ui 0.3.0 → 0.5.0

package/dist/elements/sticky-bar/index.d.ts

@@ -0,0 +1,8 @@
+import { StickyBar } from './sticky-bar';
+export * from './sticky-bar';
+declare global {
+    interface HTMLElementTagNameMap {
+        'l-sticky-bar': StickyBar;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/sticky-bar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/sticky-bar/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,cAAc,cAAc,CAAC;AAG7B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,SAAS,CAAC;KAC3B;CACF"}

package/dist/elements/sticky-bar/index.js

@@ -0,0 +1,4 @@
+import { define } from '../../define';
+import { StickyBar } from './sticky-bar';
+export * from './sticky-bar';
+define('sticky-bar', StickyBar);

package/dist/elements/sticky-bar/sticky-bar.css

@@ -0,0 +1,56 @@
+:host {
+  --show-duration: 200ms;
+  --hide-duration: 200ms;
+  --offset: 0px;
+
+  /* Override popover UA defaults. */
+  position: fixed;
+  inset: auto;
+  inset-inline: 0;
+  width: 100%;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  display: block;
+  opacity: 0;
+  transition:
+    opacity var(--hide-duration) ease,
+    translate var(--hide-duration) ease,
+    display var(--hide-duration) allow-discrete,
+    overlay var(--hide-duration) allow-discrete;
+}
+
+:host([placement='bottom']) {
+  bottom: var(--offset);
+  translate: 0 100%;
+}
+
+:host([placement='top']) {
+  top: var(--offset);
+  translate: 0 -100%;
+}
+
+:host(:popover-open) {
+  opacity: 1;
+  translate: 0 0;
+  transition-duration: var(--show-duration);
+}
+
+@starting-style {
+  :host([placement='bottom']:popover-open) {
+    opacity: 0;
+    translate: 0 100%;
+  }
+  :host([placement='top']:popover-open) {
+    opacity: 0;
+    translate: 0 -100%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host {
+    --show-duration: 0ms;
+    --hide-duration: 0ms;
+  }
+}

package/dist/elements/sticky-bar/sticky-bar.d.ts

@@ -0,0 +1,46 @@
+import { type PropertyValues } from 'lit';
+import { LuxenElement } from '../../shared/luxen-element';
+/**
+ * @summary A bar docked to the viewport edge, revealed in the top layer when a referenced element scrolls out of view.
+ * @customElement l-sticky-bar
+ *
+ * Uses the native `popover="manual"` attribute, so the bar paints in the
+ * document's top layer. Pass `for="<id>"` to track an element; the bar
+ * reveals when that element leaves the viewport (e.g. an Add-to-cart
+ * button on a mobile product page). Omit `for` for a bar that stays
+ * visible permanently (cookie banners, promo notices, environment
+ * indicators).
+ *
+ * @slot - Bar content. Owns its own background, padding, and typography.
+ *
+ * @cssproperty --show-duration - Reveal animation duration. Default `200ms`.
+ * @cssproperty --hide-duration - Dismiss animation duration. Default `200ms`.
+ * @cssproperty --offset - Distance from the active edge. Default `0px`. Use to clear a sticky header when `placement="top"`.
+ *
+ * @event show - Fired before the bar reveals. Cancelable.
+ * @event after-show - Fired after the reveal animation completes.
+ * @event hide - Fired before the bar hides. Cancelable.
+ * @event after-hide - Fired after the hide animation completes.
+ */
+export declare class StickyBar extends LuxenElement {
+    static styles: import("lit").CSSResult[];
+    /** HTML id of the element to track. When that element leaves the viewport, the bar reveals. Omit for a permanently visible bar. */
+    accessor for: string;
+    /** HTML id of the scrolling ancestor used as the IntersectionObserver root. Omit to use the viewport. Useful for nested scroll containers (CMS preview panes, modals). */
+    accessor root: string;
+    /** Edge to dock against. */
+    accessor placement: 'bottom' | 'top';
+    private _io?;
+    private _observed?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: PropertyValues<this>): void;
+    private get _target();
+    private _show;
+    private _hide;
+    private _onToggle;
+    private _setupObserver;
+    private _teardownObserver;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=sticky-bar.d.ts.map

package/dist/elements/sticky-bar/sticky-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sticky-bar.d.ts","sourceRoot":"","sources":["../../../src/html/elements/sticky-bar/sticky-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAO1D;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAAa,SAAU,SAAQ,YAAY;IACzC,OAAgB,MAAM,4BAAwB;IAE9C,mIAAmI;IAEnI,QAAQ,CAAC,GAAG,SAAM;IAElB,0KAA0K;IAE1K,QAAQ,CAAC,IAAI,SAAM;IAEnB,4BAA4B;IAE5B,QAAQ,CAAC,SAAS,EAAE,QAAQ,GAAG,KAAK,CAAY;IAEhD,OAAO,CAAC,GAAG,CAAC,CAAuB;IACnC,OAAO,CAAC,SAAS,CAAC,CAAU;IAEnB,iBAAiB;IAMjB,oBAAoB;IAMpB,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAY9C,OAAO,KAAK,OAAO,GAElB;IAED,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,SAAS,CAGf;IAEF,OAAO,CAAC,cAAc;IAqBtB,OAAO,CAAC,iBAAiB;IAShB,MAAM;CAGhB"}

package/dist/elements/sticky-bar/sticky-bar.js

@@ -0,0 +1,146 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _StickyBar_for_accessor_storage, _StickyBar_root_accessor_storage, _StickyBar_placement_accessor_storage;
+import { html, unsafeCSS } from 'lit';
+import { LuxenElement } from '../../shared/luxen-element';
+import { property } from 'lit/decorators.js';
+import hostStyles from '../../shared/styles/host.styles';
+import rawStyles from './sticky-bar.css?inline';
+const styles = unsafeCSS(rawStyles);
+/**
+ * @summary A bar docked to the viewport edge, revealed in the top layer when a referenced element scrolls out of view.
+ * @customElement l-sticky-bar
+ *
+ * Uses the native `popover="manual"` attribute, so the bar paints in the
+ * document's top layer. Pass `for="<id>"` to track an element; the bar
+ * reveals when that element leaves the viewport (e.g. an Add-to-cart
+ * button on a mobile product page). Omit `for` for a bar that stays
+ * visible permanently (cookie banners, promo notices, environment
+ * indicators).
+ *
+ * @slot - Bar content. Owns its own background, padding, and typography.
+ *
+ * @cssproperty --show-duration - Reveal animation duration. Default `200ms`.
+ * @cssproperty --hide-duration - Dismiss animation duration. Default `200ms`.
+ * @cssproperty --offset - Distance from the active edge. Default `0px`. Use to clear a sticky header when `placement="top"`.
+ *
+ * @event show - Fired before the bar reveals. Cancelable.
+ * @event after-show - Fired after the reveal animation completes.
+ * @event hide - Fired before the bar hides. Cancelable.
+ * @event after-hide - Fired after the hide animation completes.
+ */
+export class StickyBar extends LuxenElement {
+    constructor() {
+        super(...arguments);
+        _StickyBar_for_accessor_storage.set(this, '');
+        _StickyBar_root_accessor_storage.set(this, '');
+        _StickyBar_placement_accessor_storage.set(this, 'bottom');
+        this._onToggle = (e) => {
+            const ev = e;
+            this.emit(ev.newState === 'open' ? 'after-show' : 'after-hide');
+        };
+    }
+    /** HTML id of the element to track. When that element leaves the viewport, the bar reveals. Omit for a permanently visible bar. */
+    get for() { return __classPrivateFieldGet(this, _StickyBar_for_accessor_storage, "f"); }
+    set for(value) { __classPrivateFieldSet(this, _StickyBar_for_accessor_storage, value, "f"); }
+    /** HTML id of the scrolling ancestor used as the IntersectionObserver root. Omit to use the viewport. Useful for nested scroll containers (CMS preview panes, modals). */
+    get root() { return __classPrivateFieldGet(this, _StickyBar_root_accessor_storage, "f"); }
+    set root(value) { __classPrivateFieldSet(this, _StickyBar_root_accessor_storage, value, "f"); }
+    /** Edge to dock against. */
+    get placement() { return __classPrivateFieldGet(this, _StickyBar_placement_accessor_storage, "f"); }
+    set placement(value) { __classPrivateFieldSet(this, _StickyBar_placement_accessor_storage, value, "f"); }
+    connectedCallback() {
+        super.connectedCallback();
+        this.popover = 'manual';
+        this.addEventListener('toggle', this._onToggle);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('toggle', this._onToggle);
+        this._teardownObserver();
+    }
+    updated(changed) {
+        if (changed.has('for') || changed.has('root')) {
+            this._teardownObserver();
+            if (this.for) {
+                this._setupObserver();
+            }
+            else {
+                // No target → permanent bar. Reveal once on mount.
+                this._show();
+            }
+        }
+    }
+    get _target() {
+        return this.for ? this.getRootNode().getElementById(this.for) : null;
+    }
+    _show() {
+        if (this.matches(':popover-open'))
+            return;
+        if (this.emit('show', { cancelable: true }))
+            this.showPopover();
+    }
+    _hide() {
+        if (!this.matches(':popover-open'))
+            return;
+        if (this.emit('hide', { cancelable: true }))
+            this.hidePopover();
+    }
+    _setupObserver() {
+        const target = this._target;
+        if (!target)
+            return;
+        this._observed = target;
+        const root = this.root
+            ? this.getRootNode().getElementById(this.root)
+            : null;
+        // Use the element's own realm so an iframe-hosted bar observes the iframe's viewport.
+        const view = this.ownerDocument.defaultView ?? window;
+        this._io = new view.IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.isIntersecting)
+                    this._hide();
+                else
+                    this._show();
+            }
+        }, { root, threshold: 0 });
+        this._io.observe(target);
+    }
+    _teardownObserver() {
+        if (this._io && this._observed) {
+            this._io.unobserve(this._observed);
+        }
+        this._io?.disconnect();
+        this._io = undefined;
+        this._observed = undefined;
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+}
+_StickyBar_for_accessor_storage = new WeakMap(), _StickyBar_root_accessor_storage = new WeakMap(), _StickyBar_placement_accessor_storage = new WeakMap();
+StickyBar.styles = [hostStyles, styles];
+__decorate([
+    property()
+], StickyBar.prototype, "for", null);
+__decorate([
+    property()
+], StickyBar.prototype, "root", null);
+__decorate([
+    property({ reflect: true })
+], StickyBar.prototype, "placement", null);

package/dist/elements/stories/index.d.ts

@@ -0,0 +1,8 @@
+import { LuxenStories } from './stories';
+export * from './stories';
+declare global {
+    interface HTMLElementTagNameMap {
+        'l-stories': LuxenStories;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/stories/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/stories/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,cAAc,WAAW,CAAC;AAG1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,YAAY,CAAC;KAC3B;CACF"}

package/dist/elements/stories/index.js

@@ -0,0 +1,4 @@
+import { define } from '../../define';
+import { LuxenStories } from './stories';
+export * from './stories';
+define('stories', LuxenStories);

package/dist/elements/stories/stories.d.ts

@@ -0,0 +1,50 @@
+import { LuxenElement } from '../../shared/luxen-element';
+import type { LuxenStory } from '../story/story';
+export type StoriesAppearance = 'rounded' | 'squared' | 'portrait' | 'landscape';
+/**
+ * @summary A horizontal row of `<l-story>` thumbnails. Click opens the linked
+ * `<l-stories-viewer>` (matched by `for` → `id`). If `for` is omitted and no
+ * viewer exists, a singleton viewer is appended to `<body>` on first click.
+ *
+ * @example
+ * ```html
+ * <l-stories for="brand">
+ *   <l-story src="…video.mp4" poster="…jpg" label="Notre concept"></l-story>
+ *   <l-story src="…video2.mp4" label="Collant Essentiel"></l-story>
+ * </l-stories>
+ * <l-stories-viewer id="brand"></l-stories-viewer>
+ * ```
+ *
+ * @event story-open - Fired when the viewer opens. Detail: `{ index: number, story: LuxenStory }`.
+ *
+ * @cssproperty --size - Thumbnail size (width). Default per appearance.
+ * @cssproperty --radius - Thumbnail border radius. Default per appearance (`--radius-full` for rounded, `1rem` for portrait).
+ * @cssproperty --gap - Gap between thumbnails. Default `1rem`.
+ * @cssproperty --ring-color - Ring color around fresh thumbnails.
+ * @cssproperty --ring-color-seen - Ring color for `[seen]` thumbnails.
+ * @cssproperty --ring-width - Ring width. Default `2px`.
+ * @cssproperty --label-color - Label text color.
+ *
+ * @customElement l-stories
+ */
+export declare class LuxenStories extends LuxenElement {
+    createRenderRoot(): this;
+    /** ID of the linked `<l-stories-viewer>`. */
+    for: string;
+    /** Visual appearance of the thumbnails. */
+    appearance: StoriesAppearance;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Open the linked viewer at the given index. */
+    open(index?: number): void;
+    /** All `<l-story>` children. */
+    stories(): LuxenStory[];
+    private _onClick;
+    private _resolveViewer;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'l-stories': LuxenStories;
+    }
+}
+//# sourceMappingURL=stories.d.ts.map

package/dist/elements/stories/stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories.d.ts","sourceRoot":"","sources":["../../../src/html/elements/stories/stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;AAEjF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBAAa,YAAa,SAAQ,YAAY;IACnC,gBAAgB;IAIzB,6CAA6C;IAE7C,GAAG,SAAM;IAET,2CAA2C;IAE3C,UAAU,EAAE,iBAAiB,CAAa;IAEjC,iBAAiB;IAQjB,oBAAoB;IAK7B,iDAAiD;IACjD,IAAI,CAAC,KAAK,SAAI;IAYd,gCAAgC;IAChC,OAAO,IAAI,UAAU,EAAE;IAIvB,OAAO,CAAC,QAAQ,CASd;IAEF,OAAO,CAAC,cAAc;CAevB;AAaD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,YAAY,CAAC;KAC3B;CACF"}

package/dist/elements/stories/stories.js

@@ -0,0 +1,113 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { property } from 'lit/decorators.js';
+import { LuxenElement } from '../../shared/luxen-element';
+/**
+ * @summary A horizontal row of `<l-story>` thumbnails. Click opens the linked
+ * `<l-stories-viewer>` (matched by `for` → `id`). If `for` is omitted and no
+ * viewer exists, a singleton viewer is appended to `<body>` on first click.
+ *
+ * @example
+ * ```html
+ * <l-stories for="brand">
+ *   <l-story src="…video.mp4" poster="…jpg" label="Notre concept"></l-story>
+ *   <l-story src="…video2.mp4" label="Collant Essentiel"></l-story>
+ * </l-stories>
+ * <l-stories-viewer id="brand"></l-stories-viewer>
+ * ```
+ *
+ * @event story-open - Fired when the viewer opens. Detail: `{ index: number, story: LuxenStory }`.
+ *
+ * @cssproperty --size - Thumbnail size (width). Default per appearance.
+ * @cssproperty --radius - Thumbnail border radius. Default per appearance (`--radius-full` for rounded, `1rem` for portrait).
+ * @cssproperty --gap - Gap between thumbnails. Default `1rem`.
+ * @cssproperty --ring-color - Ring color around fresh thumbnails.
+ * @cssproperty --ring-color-seen - Ring color for `[seen]` thumbnails.
+ * @cssproperty --ring-width - Ring width. Default `2px`.
+ * @cssproperty --label-color - Label text color.
+ *
+ * @customElement l-stories
+ */
+export class LuxenStories extends LuxenElement {
+    constructor() {
+        super(...arguments);
+        /** ID of the linked `<l-stories-viewer>`. */
+        this.for = '';
+        /** Visual appearance of the thumbnails. */
+        this.appearance = 'rounded';
+        this._onClick = (e) => {
+            const trigger = e.target.closest('[data-story-trigger]');
+            if (!trigger)
+                return;
+            const story = trigger.closest('l-story');
+            if (!story)
+                return;
+            const index = this.stories().indexOf(story);
+            if (index < 0)
+                return;
+            e.preventDefault();
+            this.open(index);
+        };
+    }
+    createRenderRoot() {
+        return this;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'list');
+        }
+        this.addEventListener('click', this._onClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('click', this._onClick);
+    }
+    /** Open the linked viewer at the given index. */
+    open(index = 0) {
+        const stories = this.stories();
+        if (!stories.length)
+            return;
+        const viewer = this._resolveViewer();
+        if (!viewer)
+            return;
+        viewer.stories = stories;
+        viewer.source = this;
+        viewer.index = Math.max(0, Math.min(index, stories.length - 1));
+        viewer.open = true;
+        this.emit('story-open', { detail: { index, story: stories[index] } });
+    }
+    /** All `<l-story>` children. */
+    stories() {
+        return Array.from(this.querySelectorAll(':scope > l-story'));
+    }
+    _resolveViewer() {
+        if (this.for) {
+            const root = this.getRootNode();
+            const el = root.getElementById?.(this.for);
+            if (el && _isViewer(el))
+                return el;
+        }
+        // Auto-singleton fallback.
+        let auto = document.querySelector('l-stories-viewer[data-auto]');
+        if (!auto) {
+            auto = document.createElement('l-stories-viewer');
+            auto.setAttribute('data-auto', '');
+            document.body.appendChild(auto);
+        }
+        return auto;
+    }
+}
+__decorate([
+    property({ reflect: true })
+], LuxenStories.prototype, "for", void 0);
+__decorate([
+    property({ reflect: true })
+], LuxenStories.prototype, "appearance", void 0);
+function _isViewer(el) {
+    return el.tagName === 'L-STORIES-VIEWER';
+}

package/dist/elements/stories-viewer/index.d.ts

@@ -0,0 +1,8 @@
+import { LuxenStoriesViewer } from './stories-viewer';
+export * from './stories-viewer';
+declare global {
+    interface HTMLElementTagNameMap {
+        'l-stories-viewer': LuxenStoriesViewer;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/stories-viewer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/stories-viewer/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,cAAc,kBAAkB,CAAC;AAGjC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,kBAAkB,CAAC;KACxC;CACF"}

package/dist/elements/stories-viewer/index.js

@@ -0,0 +1,4 @@
+import { define } from '../../define';
+import { LuxenStoriesViewer } from './stories-viewer';
+export * from './stories-viewer';
+define('stories-viewer', LuxenStoriesViewer);