luxen-ui 0.3.0 → 0.5.0

package/cdn/elements/spinner/spinner.js

@@ -14,5 +14,5 @@ import{c as e,i as t}from"../../chunks/lit.js";import{LuxenElement as n}from"../
           class="spinner"
         />
       </svg>
-    `}};export{a as LuxenSpinner};
+    `}};export{a as Spinner};
 //# sourceMappingURL=spinner.js.map

package/cdn/elements/spinner/spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.js","names":[],"sources":["../../../src/html/elements/spinner/spinner.css?inline","../../../src/html/elements/spinner/spinner.ts"],"sourcesContent":[":host {\n  --size: 1em;\n  --indicator-color: currentColor;\n  --speed: 0.75s;\n\n  flex: none;\n  display: inline-flex;\n  width: var(--size);\n  height: var(--size);\n  color: var(--indicator-color);\n}\n\nsvg {\n  width: 100%;\n  height: 100%;\n  fill: currentColor;\n}\n\n.spinner {\n  transform-origin: center;\n  animation: spin var(--speed) linear infinite;\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n","import { html, unsafeCSS } from 'lit';\nimport { LuxenElement } from '../../shared/luxen-element';\nimport hostStyles from '../../shared/styles/host.styles';\nimport rawStyles from './spinner.css?inline';\n\nconst styles = unsafeCSS(rawStyles);\n\n/**\n * @summary A spinner component for indicating loading state.\n * @customElement l-spinner\n *\n * @csspart base - The SVG container element.\n *\n * @cssproperty --size - The size of the spinner (width and height). Defaults to `1em`.\n * @cssproperty --indicator-color - The color of the spinner.\n * @cssproperty --speed - The duration of one full spin cycle.\n */\nexport class LuxenSpinner extends LuxenElement {\n  static override styles = [hostStyles, styles];\n\n  override render() {\n    return html`\n      <svg\n        part=\"base\"\n        role=\"progressbar\"\n        aria-label=\"Loading\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path\n          d=\"M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z\"\n          opacity=\".25\"\n        />\n        <path\n          d=\"M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z\"\n          class=\"spinner\"\n        />\n      </svg>\n    `;\n  }\n}\n"],"mappings":"8JCKA,IAAM,EAAS,sUAAoB,CAYtB,EAAb,cAAkC,CAAa,oBACpB,CAAC,EAAY,EAAO,CAE7C,QAAkB,CAChB,MAAO,EAAI"}
+{"version":3,"file":"spinner.js","names":[],"sources":["../../../src/html/elements/spinner/spinner.css?inline","../../../src/html/elements/spinner/spinner.ts"],"sourcesContent":[":host {\n  --size: 1em;\n  --indicator-color: currentColor;\n  --speed: 0.75s;\n\n  flex: none;\n  display: inline-flex;\n  width: var(--size);\n  height: var(--size);\n  color: var(--indicator-color);\n}\n\nsvg {\n  width: 100%;\n  height: 100%;\n  fill: currentColor;\n}\n\n.spinner {\n  transform-origin: center;\n  animation: spin var(--speed) linear infinite;\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n","import { html, unsafeCSS } from 'lit';\nimport { LuxenElement } from '../../shared/luxen-element';\nimport hostStyles from '../../shared/styles/host.styles';\nimport rawStyles from './spinner.css?inline';\n\nconst styles = unsafeCSS(rawStyles);\n\n/**\n * @summary A spinner component for indicating loading state.\n * @customElement l-spinner\n *\n * @csspart base - The SVG container element.\n *\n * @cssproperty --size - The size of the spinner (width and height). Defaults to `1em`.\n * @cssproperty --indicator-color - The color of the spinner.\n * @cssproperty --speed - The duration of one full spin cycle.\n */\nexport class Spinner extends LuxenElement {\n  static override styles = [hostStyles, styles];\n\n  override render() {\n    return html`\n      <svg\n        part=\"base\"\n        role=\"progressbar\"\n        aria-label=\"Loading\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path\n          d=\"M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z\"\n          opacity=\".25\"\n        />\n        <path\n          d=\"M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z\"\n          class=\"spinner\"\n        />\n      </svg>\n    `;\n  }\n}\n"],"mappings":"8JCKA,IAAM,EAAS,EAAU,oUAAU,CAYtB,EAAb,cAA6B,CAAa,oBACf,CAAC,EAAY,EAAO,CAE7C,QAAkB,CAChB,MAAO,EAAI"}

package/cdn/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/cdn/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/cdn/elements/sticky-bar/index.js

@@ -0,0 +1,2 @@
+import{define as e}from"../../define.js";import{StickyBar as t}from"./sticky-bar.js";e(`sticky-bar`,t);
+//# sourceMappingURL=index.js.map

package/cdn/elements/sticky-bar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/html/elements/sticky-bar/index.ts"],"sourcesContent":["import { define } from '../../define';\nimport { StickyBar } from './sticky-bar';\nexport * from './sticky-bar';\ndefine('sticky-bar', StickyBar);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'l-sticky-bar': StickyBar;\n  }\n}\n"],"mappings":"qFAGA,EAAO,aAAc,EAAU"}

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

@@ -0,0 +1,46 @@
+import { 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/cdn/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/cdn/elements/sticky-bar/sticky-bar.js

@@ -0,0 +1,2 @@
+import{c as e,i as t}from"../../chunks/lit.js";import{LuxenElement as n}from"../../shared/luxen-element.js";import{i as r,t as i}from"../../chunks/decorate.js";import a from"../../shared/styles/host.styles.js";var o=e(`:host{--show-duration:.2s;--hide-duration:.2s;--offset:0px;inset:auto;opacity:0;width:100%;transition:opacity var(--hide-duration) ease, translate var(--hide-duration) ease, display var(--hide-duration) allow-discrete, overlay var(--hide-duration) allow-discrete;background:0 0;border:0;margin:0;padding:0;display:block;position:fixed;inset-inline:0}:host([placement=bottom]){bottom:var(--offset);translate:0 100%}:host([placement=top]){top:var(--offset);translate:0 -100%}:host(:popover-open){opacity:1;transition-duration:var(--show-duration);translate:0}@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:0s;--hide-duration:0s}}`),s=class extends n{constructor(...e){super(...e),this.#e=``,this.#t=``,this.#n=`bottom`,this._onToggle=e=>{let t=e;this.emit(t.newState===`open`?`after-show`:`after-hide`)}}static{this.styles=[a,o]}#e;get for(){return this.#e}set for(e){this.#e=e}#t;get root(){return this.#t}set root(e){this.#t=e}#n;get placement(){return this.#n}set placement(e){this.#n=e}connectedCallback(){super.connectedCallback(),this.popover=`manual`,this.addEventListener(`toggle`,this._onToggle)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`toggle`,this._onToggle),this._teardownObserver()}updated(e){(e.has(`for`)||e.has(`root`))&&(this._teardownObserver(),this.for?this._setupObserver():this._show())}get _target(){return this.for?this.getRootNode().getElementById(this.for):null}_show(){this.matches(`:popover-open`)||this.emit(`show`,{cancelable:!0})&&this.showPopover()}_hide(){this.matches(`:popover-open`)&&this.emit(`hide`,{cancelable:!0})&&this.hidePopover()}_setupObserver(){let e=this._target;if(!e)return;this._observed=e;let t=this.root?this.getRootNode().getElementById(this.root):null,n=this.ownerDocument.defaultView??window;this._io=new n.IntersectionObserver(e=>{for(let t of e)t.isIntersecting?this._hide():this._show()},{root:t,threshold:0}),this._io.observe(e)}_teardownObserver(){this._io&&this._observed&&this._io.unobserve(this._observed),this._io?.disconnect(),this._io=void 0,this._observed=void 0}render(){return t`<slot></slot>`}};i([r()],s.prototype,`for`,null),i([r()],s.prototype,`root`,null),i([r({reflect:!0})],s.prototype,`placement`,null);export{s as StickyBar};
+//# sourceMappingURL=sticky-bar.js.map

package/cdn/elements/sticky-bar/sticky-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sticky-bar.js","names":[],"sources":["../../../src/html/elements/sticky-bar/sticky-bar.css?inline","../../../src/html/elements/sticky-bar/sticky-bar.ts"],"sourcesContent":[":host {\n  --show-duration: 200ms;\n  --hide-duration: 200ms;\n  --offset: 0px;\n\n  /* Override popover UA defaults. */\n  position: fixed;\n  inset: auto;\n  inset-inline: 0;\n  width: 100%;\n  margin: 0;\n  border: 0;\n  padding: 0;\n  background: transparent;\n  display: block;\n  opacity: 0;\n  transition:\n    opacity var(--hide-duration) ease,\n    translate var(--hide-duration) ease,\n    display var(--hide-duration) allow-discrete,\n    overlay var(--hide-duration) allow-discrete;\n}\n\n:host([placement='bottom']) {\n  bottom: var(--offset);\n  translate: 0 100%;\n}\n\n:host([placement='top']) {\n  top: var(--offset);\n  translate: 0 -100%;\n}\n\n:host(:popover-open) {\n  opacity: 1;\n  translate: 0 0;\n  transition-duration: var(--show-duration);\n}\n\n@starting-style {\n  :host([placement='bottom']:popover-open) {\n    opacity: 0;\n    translate: 0 100%;\n  }\n  :host([placement='top']:popover-open) {\n    opacity: 0;\n    translate: 0 -100%;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    --show-duration: 0ms;\n    --hide-duration: 0ms;\n  }\n}\n","import { html, unsafeCSS, type PropertyValues } from 'lit';\nimport { LuxenElement } from '../../shared/luxen-element';\nimport { property } from 'lit/decorators.js';\nimport hostStyles from '../../shared/styles/host.styles';\nimport rawStyles from './sticky-bar.css?inline';\n\nconst styles = unsafeCSS(rawStyles);\n\n/**\n * @summary A bar docked to the viewport edge, revealed in the top layer when a referenced element scrolls out of view.\n * @customElement l-sticky-bar\n *\n * Uses the native `popover=\"manual\"` attribute, so the bar paints in the\n * document's top layer. Pass `for=\"<id>\"` to track an element; the bar\n * reveals when that element leaves the viewport (e.g. an Add-to-cart\n * button on a mobile product page). Omit `for` for a bar that stays\n * visible permanently (cookie banners, promo notices, environment\n * indicators).\n *\n * @slot - Bar content. Owns its own background, padding, and typography.\n *\n * @cssproperty --show-duration - Reveal animation duration. Default `200ms`.\n * @cssproperty --hide-duration - Dismiss animation duration. Default `200ms`.\n * @cssproperty --offset - Distance from the active edge. Default `0px`. Use to clear a sticky header when `placement=\"top\"`.\n *\n * @event show - Fired before the bar reveals. Cancelable.\n * @event after-show - Fired after the reveal animation completes.\n * @event hide - Fired before the bar hides. Cancelable.\n * @event after-hide - Fired after the hide animation completes.\n */\nexport class StickyBar extends LuxenElement {\n  static override styles = [hostStyles, styles];\n\n  /** HTML id of the element to track. When that element leaves the viewport, the bar reveals. Omit for a permanently visible bar. */\n  @property()\n  accessor for = '';\n\n  /** 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). */\n  @property()\n  accessor root = '';\n\n  /** Edge to dock against. */\n  @property({ reflect: true })\n  accessor placement: 'bottom' | 'top' = 'bottom';\n\n  private _io?: IntersectionObserver;\n  private _observed?: Element;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.popover = 'manual';\n    this.addEventListener('toggle', this._onToggle);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('toggle', this._onToggle);\n    this._teardownObserver();\n  }\n\n  override updated(changed: PropertyValues<this>) {\n    if (changed.has('for') || changed.has('root')) {\n      this._teardownObserver();\n      if (this.for) {\n        this._setupObserver();\n      } else {\n        // No target → permanent bar. Reveal once on mount.\n        this._show();\n      }\n    }\n  }\n\n  private get _target(): HTMLElement | null {\n    return this.for ? (this.getRootNode() as Document | ShadowRoot).getElementById(this.for) : null;\n  }\n\n  private _show() {\n    if (this.matches(':popover-open')) return;\n    if (this.emit('show', { cancelable: true })) this.showPopover();\n  }\n\n  private _hide() {\n    if (!this.matches(':popover-open')) return;\n    if (this.emit('hide', { cancelable: true })) this.hidePopover();\n  }\n\n  private _onToggle = (e: Event) => {\n    const ev = e as ToggleEvent;\n    this.emit(ev.newState === 'open' ? 'after-show' : 'after-hide');\n  };\n\n  private _setupObserver() {\n    const target = this._target;\n    if (!target) return;\n    this._observed = target;\n    const root = this.root\n      ? (this.getRootNode() as Document | ShadowRoot).getElementById(this.root)\n      : null;\n    // Use the element's own realm so an iframe-hosted bar observes the iframe's viewport.\n    const view = this.ownerDocument.defaultView ?? window;\n    this._io = new view.IntersectionObserver(\n      (entries) => {\n        for (const entry of entries) {\n          if (entry.isIntersecting) this._hide();\n          else this._show();\n        }\n      },\n      { root, threshold: 0 },\n    );\n    this._io.observe(target);\n  }\n\n  private _teardownObserver() {\n    if (this._io && this._observed) {\n      this._io.unobserve(this._observed);\n    }\n    this._io?.disconnect();\n    this._io = undefined;\n    this._observed = undefined;\n  }\n\n  override render() {\n    return html`<slot></slot>`;\n  }\n}\n"],"mappings":"kNCMA,IAAM,EAAS,EAAU,uxBAAU,CAwBtB,EAAb,cAA+B,CAAa,uCAK3B,WAIC,WAIuB,wBA2ClB,GAAa,CAChC,IAAM,EAAK,EACX,KAAK,KAAK,EAAG,WAAa,OAAS,aAAe,aAAa,qBAzDxC,CAAC,EAAY,EAAO,QAIpC,KAAA,4CAIA,MAAA,6CAIA,WAAA,2CAKT,mBAA6B,CAC3B,MAAM,mBAAmB,CACzB,KAAK,QAAU,SACf,KAAK,iBAAiB,SAAU,KAAK,UAAU,CAGjD,sBAAgC,CAC9B,MAAM,sBAAsB,CAC5B,KAAK,oBAAoB,SAAU,KAAK,UAAU,CAClD,KAAK,mBAAmB,CAG1B,QAAiB,EAA+B,EAC1C,EAAQ,IAAI,MAAM,EAAI,EAAQ,IAAI,OAAO,IAC3C,KAAK,mBAAmB,CACpB,KAAK,IACP,KAAK,gBAAgB,CAGrB,KAAK,OAAO,EAKlB,IAAY,SAA8B,CACxC,OAAO,KAAK,IAAO,KAAK,aAAa,CAA2B,eAAe,KAAK,IAAI,CAAG,KAG7F,OAAgB,CACV,KAAK,QAAQ,gBAAgB,EAC7B,KAAK,KAAK,OAAQ,CAAE,WAAY,GAAM,CAAC,EAAE,KAAK,aAAa,CAGjE,OAAgB,CACT,KAAK,QAAQ,gBAAgB,EAC9B,KAAK,KAAK,OAAQ,CAAE,WAAY,GAAM,CAAC,EAAE,KAAK,aAAa,CAQjE,gBAAyB,CACvB,IAAM,EAAS,KAAK,QACpB,GAAI,CAAC,EAAQ,OACb,KAAK,UAAY,EACjB,IAAM,EAAO,KAAK,KACb,KAAK,aAAa,CAA2B,eAAe,KAAK,KAAK,CACvE,KAEE,EAAO,KAAK,cAAc,aAAe,OAC/C,KAAK,IAAM,IAAI,EAAK,qBACjB,GAAY,CACX,IAAK,IAAM,KAAS,EACd,EAAM,eAAgB,KAAK,OAAO,CACjC,KAAK,OAAO,EAGrB,CAAE,OAAM,UAAW,EAAG,CACvB,CACD,KAAK,IAAI,QAAQ,EAAO,CAG1B,mBAA4B,CACtB,KAAK,KAAO,KAAK,WACnB,KAAK,IAAI,UAAU,KAAK,UAAU,CAEpC,KAAK,KAAK,YAAY,CACtB,KAAK,IAAM,IAAA,GACX,KAAK,UAAY,IAAA,GAGnB,QAAkB,CAChB,MAAO,EAAI,qBAxFZ,GAAU,CAAA,CAAA,EAAA,UAAA,MAAA,KAAA,IAIV,GAAU,CAAA,CAAA,EAAA,UAAA,OAAA,KAAA,IAIV,EAAS,CAAE,QAAS,GAAM,CAAC,CAAA,CAAA,EAAA,UAAA,YAAA,KAAA"}

package/cdn/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/cdn/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/cdn/elements/stories/index.js

@@ -0,0 +1,2 @@
+import{define as e}from"../../define.js";import{LuxenStories as t}from"./stories.js";e(`stories`,t);
+//# sourceMappingURL=index.js.map

package/cdn/elements/stories/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/html/elements/stories/index.ts"],"sourcesContent":["import { define } from '../../define';\nimport { LuxenStories } from './stories';\nexport * from './stories';\ndefine('stories', LuxenStories);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'l-stories': LuxenStories;\n  }\n}\n"],"mappings":"qFAGA,EAAO,UAAW,EAAa"}

package/cdn/elements/stories/stories.d.ts

@@ -0,0 +1,50 @@
+import { LuxenElement } from '../../shared/luxen-element';
+import { 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/cdn/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/cdn/elements/stories/stories.js

@@ -0,0 +1,2 @@
+import{LuxenElement as e}from"../../shared/luxen-element.js";import{i as t,t as n}from"../../chunks/decorate.js";var r=class extends e{constructor(...e){super(...e),this.for=``,this.appearance=`rounded`,this._onClick=e=>{let t=e.target.closest(`[data-story-trigger]`);if(!t)return;let n=t.closest(`l-story`);if(!n)return;let r=this.stories().indexOf(n);r<0||(e.preventDefault(),this.open(r))}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.hasAttribute(`role`)||this.setAttribute(`role`,`list`),this.addEventListener(`click`,this._onClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`click`,this._onClick)}open(e=0){let t=this.stories();if(!t.length)return;let n=this._resolveViewer();n&&(n.stories=t,n.source=this,n.index=Math.max(0,Math.min(e,t.length-1)),n.open=!0,this.emit(`story-open`,{detail:{index:e,story:t[e]}}))}stories(){return Array.from(this.querySelectorAll(`:scope > l-story`))}_resolveViewer(){if(this.for){let e=this.getRootNode().getElementById?.(this.for);if(e&&i(e))return e}let e=document.querySelector(`l-stories-viewer[data-auto]`);return e||(e=document.createElement(`l-stories-viewer`),e.setAttribute(`data-auto`,``),document.body.appendChild(e)),e}};n([t({reflect:!0})],r.prototype,`for`,void 0),n([t({reflect:!0})],r.prototype,`appearance`,void 0);function i(e){return e.tagName===`L-STORIES-VIEWER`}export{r as LuxenStories};
+//# sourceMappingURL=stories.js.map

package/cdn/elements/stories/stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories.js","names":[],"sources":["../../../src/html/elements/stories/stories.ts"],"sourcesContent":["import { property } from 'lit/decorators.js';\nimport { LuxenElement } from '../../shared/luxen-element';\nimport type { LuxenStory } from '../story/story';\n\nexport type StoriesAppearance = 'rounded' | 'squared' | 'portrait' | 'landscape';\n\n/**\n * @summary A horizontal row of `<l-story>` thumbnails. Click opens the linked\n * `<l-stories-viewer>` (matched by `for` → `id`). If `for` is omitted and no\n * viewer exists, a singleton viewer is appended to `<body>` on first click.\n *\n * @example\n * ```html\n * <l-stories for=\"brand\">\n *   <l-story src=\"…video.mp4\" poster=\"…jpg\" label=\"Notre concept\"></l-story>\n *   <l-story src=\"…video2.mp4\" label=\"Collant Essentiel\"></l-story>\n * </l-stories>\n * <l-stories-viewer id=\"brand\"></l-stories-viewer>\n * ```\n *\n * @event story-open - Fired when the viewer opens. Detail: `{ index: number, story: LuxenStory }`.\n *\n * @cssproperty --size - Thumbnail size (width). Default per appearance.\n * @cssproperty --radius - Thumbnail border radius. Default per appearance (`--radius-full` for rounded, `1rem` for portrait).\n * @cssproperty --gap - Gap between thumbnails. Default `1rem`.\n * @cssproperty --ring-color - Ring color around fresh thumbnails.\n * @cssproperty --ring-color-seen - Ring color for `[seen]` thumbnails.\n * @cssproperty --ring-width - Ring width. Default `2px`.\n * @cssproperty --label-color - Label text color.\n *\n * @customElement l-stories\n */\nexport class LuxenStories extends LuxenElement {\n  override createRenderRoot() {\n    return this;\n  }\n\n  /** ID of the linked `<l-stories-viewer>`. */\n  @property({ reflect: true })\n  for = '';\n\n  /** Visual appearance of the thumbnails. */\n  @property({ reflect: true })\n  appearance: StoriesAppearance = 'rounded';\n\n  override connectedCallback() {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'list');\n    }\n    this.addEventListener('click', this._onClick);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this._onClick);\n  }\n\n  /** Open the linked viewer at the given index. */\n  open(index = 0) {\n    const stories = this.stories();\n    if (!stories.length) return;\n    const viewer = this._resolveViewer();\n    if (!viewer) return;\n    viewer.stories = stories;\n    viewer.source = this;\n    viewer.index = Math.max(0, Math.min(index, stories.length - 1));\n    viewer.open = true;\n    this.emit('story-open', { detail: { index, story: stories[index] } });\n  }\n\n  /** All `<l-story>` children. */\n  stories(): LuxenStory[] {\n    return Array.from(this.querySelectorAll<LuxenStory>(':scope > l-story'));\n  }\n\n  private _onClick = (e: MouseEvent) => {\n    const trigger = (e.target as HTMLElement).closest<HTMLButtonElement>('[data-story-trigger]');\n    if (!trigger) return;\n    const story = trigger.closest<LuxenStory>('l-story');\n    if (!story) return;\n    const index = this.stories().indexOf(story);\n    if (index < 0) return;\n    e.preventDefault();\n    this.open(index);\n  };\n\n  private _resolveViewer(): LuxenStoriesViewerLike | null {\n    if (this.for) {\n      const root = this.getRootNode() as Document | ShadowRoot;\n      const el = (root as Document).getElementById?.(this.for);\n      if (el && _isViewer(el)) return el;\n    }\n    // Auto-singleton fallback.\n    let auto = document.querySelector<LuxenStoriesViewerLike>('l-stories-viewer[data-auto]');\n    if (!auto) {\n      auto = document.createElement('l-stories-viewer') as LuxenStoriesViewerLike;\n      auto.setAttribute('data-auto', '');\n      document.body.appendChild(auto);\n    }\n    return auto;\n  }\n}\n\ninterface LuxenStoriesViewerLike extends HTMLElement {\n  open: boolean;\n  index: number;\n  stories: LuxenStory[];\n  source: LuxenStories | null;\n}\n\nfunction _isViewer(el: Element): el is LuxenStoriesViewerLike {\n  return el.tagName === 'L-STORIES-VIEWER';\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'l-stories': LuxenStories;\n  }\n}\n"],"mappings":"iHAgCA,IAAa,EAAb,cAAkC,CAAa,wCAOvC,mBAI0B,wBAiCZ,GAAkB,CACpC,IAAM,EAAW,EAAE,OAAuB,QAA2B,uBAAuB,CAC5F,GAAI,CAAC,EAAS,OACd,IAAM,EAAQ,EAAQ,QAAoB,UAAU,CACpD,GAAI,CAAC,EAAO,OACZ,IAAM,EAAQ,KAAK,SAAS,CAAC,QAAQ,EAAM,CACvC,EAAQ,IACZ,EAAE,gBAAgB,CAClB,KAAK,KAAK,EAAM,GAnDlB,kBAA4B,CAC1B,OAAO,KAWT,mBAA6B,CAC3B,MAAM,mBAAmB,CACpB,KAAK,aAAa,OAAO,EAC5B,KAAK,aAAa,OAAQ,OAAO,CAEnC,KAAK,iBAAiB,QAAS,KAAK,SAAS,CAG/C,sBAAgC,CAC9B,MAAM,sBAAsB,CAC5B,KAAK,oBAAoB,QAAS,KAAK,SAAS,CAIlD,KAAK,EAAQ,EAAG,CACd,IAAM,EAAU,KAAK,SAAS,CAC9B,GAAI,CAAC,EAAQ,OAAQ,OACrB,IAAM,EAAS,KAAK,gBAAgB,CAC/B,IACL,EAAO,QAAU,EACjB,EAAO,OAAS,KAChB,EAAO,MAAQ,KAAK,IAAI,EAAG,KAAK,IAAI,EAAO,EAAQ,OAAS,EAAE,CAAC,CAC/D,EAAO,KAAO,GACd,KAAK,KAAK,aAAc,CAAE,OAAQ,CAAE,QAAO,MAAO,EAAQ,GAAQ,CAAE,CAAC,EAIvE,SAAwB,CACtB,OAAO,MAAM,KAAK,KAAK,iBAA6B,mBAAmB,CAAC,CAc1E,gBAAwD,CACtD,GAAI,KAAK,IAAK,CAEZ,IAAM,EADO,KAAK,aACN,CAAkB,iBAAiB,KAAK,IAAI,CACxD,GAAI,GAAM,EAAU,EAAG,CAAE,OAAO,EAGlC,IAAI,EAAO,SAAS,cAAsC,8BAA8B,CAMxF,OALK,IACH,EAAO,SAAS,cAAc,mBAAmB,CACjD,EAAK,aAAa,YAAa,GAAG,CAClC,SAAS,KAAK,YAAY,EAAK,EAE1B,OA9DR,EAAS,CAAE,QAAS,GAAM,CAAC,CAAA,CAAA,EAAA,UAAA,MAAA,IAAA,GAAA,IAI3B,EAAS,CAAE,QAAS,GAAM,CAAC,CAAA,CAAA,EAAA,UAAA,aAAA,IAAA,GAAA,CAqE9B,SAAS,EAAU,EAA2C,CAC5D,OAAO,EAAG,UAAY"}

package/cdn/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/cdn/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/cdn/elements/stories-viewer/index.js

@@ -0,0 +1,2 @@
+import{define as e}from"../../define.js";import{LuxenStoriesViewer as t}from"./stories-viewer.js";e(`stories-viewer`,t);
+//# sourceMappingURL=index.js.map

package/cdn/elements/stories-viewer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/html/elements/stories-viewer/index.ts"],"sourcesContent":["import { define } from '../../define';\nimport { LuxenStoriesViewer } from './stories-viewer';\nexport * from './stories-viewer';\ndefine('stories-viewer', LuxenStoriesViewer);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'l-stories-viewer': LuxenStoriesViewer;\n  }\n}\n"],"mappings":"kGAGA,EAAO,iBAAkB,EAAmB"}

package/cdn/elements/stories-viewer/stories-viewer.d.ts

@@ -0,0 +1,136 @@
+import { CSSResultGroup, PropertyValues } from 'lit';
+import { LuxenElement } from '../../shared/luxen-element';
+import { LuxenStories } from '../stories/stories';
+import { LuxenStory } from '../story/story';
+/**
+ * @summary Fullscreen modal that plays a sequence of `<l-story>` videos with an
+ * Instagram-style segmented progress bar, previous/next navigation, mute toggle,
+ * and auto-advance.
+ *
+ * Linked to one or more `<l-stories>` rows via matching `id` ↔ `for`. Open
+ * programmatically via `open()` or by clicking a thumbnail in a linked row.
+ *
+ * @slot cta - Default CTA overlay (e.g. shoppable card). Per-story `slot="cta"` inside `<l-story>` overrides this when that story is active.
+ * @slot header - Default header overlay (e.g. avatar + author). Per-story override available the same way.
+ * @slot close - Override the default close button.
+ *
+ * @csspart dialog - The native `<dialog>` element.
+ * @csspart frame - The aspect-ratio video frame.
+ * @csspart progress - The progress bar wrapper.
+ * @csspart progress-segment - A single progress segment.
+ * @csspart progress-fill - The fill element inside an active segment.
+ * @csspart video - The `<video>` element.
+ * @csspart overlay - The overlay wrapper that hosts CTA/header slots.
+ * @csspart header - The top-left header area (story thumbnail + label fallback, or consumer-supplied content via the `header` slot).
+ * @csspart header-label - The default story label inside the header.
+ * @csspart actions - The top-right vertical button stack (close, play/pause, mute).
+ * @csspart button-close - The close button.
+ * @csspart button-pause - The play/pause toggle.
+ * @csspart button-mute - The mute toggle.
+ * @csspart button-previous - The previous story button.
+ * @csspart button-next - The next story button.
+ * @csspart spinner - The loading spinner shown while the current video is buffering.
+ *
+ * @cssproperty --width - Frame width. Default `min(420px, 100vw)`.
+ * @cssproperty --progress-color - Active progress fill color. Default `white`.
+ * @cssproperty --progress-bg - Inactive progress segment background. Default `rgb(255 255 255 / 35%)`.
+ * @cssproperty --progress-gap - Gap between segments. Default `4px`.
+ * @cssproperty --show-duration - Open transition duration. Default `200ms`.
+ * @cssproperty --hide-duration - Close transition duration. Default `200ms`.
+ * @cssproperty --backdrop - Backdrop color. Default `var(--l-backdrop-strong)` — darker than `--l-backdrop` to focus attention on the immersive frame, but still translucent so the page stays perceptible.
+ *
+ * @event show - Fired when the viewer opens.
+ * @event after-show - Fired after the open transition completes.
+ * @event hide - Fired when the viewer is about to close. Cancelable.
+ * @event after-hide - Fired after the close transition completes.
+ * @event story-change - Fired when the active story changes. Detail: `{ index: number, story: LuxenStory }`.
+ * @event story-end - Fired when the active story finishes playback. Detail: `{ index: number }`.
+ * @event chapter-change - Fired when the active chapter (within a story) changes. Detail: `{ chapter: number, story: LuxenStory }`.
+ * @event mute-change - Fired when the mute state changes. Detail: `{ muted: boolean }`.
+ *
+ * @customElement l-stories-viewer
+ */
+export declare class LuxenStoriesViewer extends LuxenElement {
+    static styles: CSSResultGroup;
+    /** Whether the viewer is open. */
+    open: boolean;
+    /** Active story index (0-based). */
+    index: number;
+    /** Whether playback is muted. Defaults to `true` so autoplay always succeeds across browsers. The user can unmute via the dedicated button or the `m` keyboard shortcut. */
+    muted: boolean;
+    /** Loop the active story instead of advancing. */
+    loop: boolean;
+    /** Move to the next story when the current one ends; close after the last story. */
+    autoAdvance: boolean;
+    /** Close when the backdrop is clicked. */
+    lightDismiss: boolean;
+    /** Active chapter index within the current story. Reflected. */
+    chapter: number;
+    /** Internal: the playlist set by the source `<l-stories>`. */
+    stories: LuxenStory[];
+    /** Internal: the source `<l-stories>` element that opened the viewer. */
+    source: LuxenStories | null;
+    private _dialog;
+    private _video;
+    /** Tracks the underlying `<video>` paused state so the play/pause button stays in sync. */
+    private _paused;
+    /** True while the video is buffering / waiting for data. Drives the loading spinner. */
+    private _loading;
+    private _raf;
+    private _holdTimer;
+    private _pointerStart;
+    private _segments;
+    private _chapterStarts;
+    /** Tracks the URL we've already injected a prefetch hint for so we don't duplicate. */
+    private _prefetchedSrc;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changed: PropertyValues<this>): void;
+    private _onCancel;
+    private _onNativeClose;
+    private _onDialogClick;
+    private _onKeyDown;
+    private _onFramePointerDown;
+    private _onFramePointerUp;
+    private _refreshSegmentRefs;
+    private _resetSegmentFills;
+    private _loadCurrent;
+    /**
+     * Inject a `<link rel="preload" as="video">` for the next story once the
+     * current video crosses 50% playback. Idempotent: tracked by `_prefetchedSrc`,
+     * cleaned up on viewer close.
+     */
+    private _maybePrefetchNext;
+    /** Remove every prefetch hint we've injected. Called when the viewer closes. */
+    private _clearPrefetchHints;
+    private _applyChapterSeek;
+    private get _lastChapter();
+    private _syncSlots;
+    private _tick;
+    private _onEnded;
+    /** chapter-then-story navigation. */
+    private _advance;
+    /** Open the viewer at the given index with an explicit playlist. */
+    openAt(stories: LuxenStory[], index?: number, source?: LuxenStories | null): void;
+    close(): void;
+    /** Advance one chapter, or to the next story at the chapter boundary. */
+    next(): void;
+    /** Retreat one chapter, restart the current chapter past 1s in, or cross into the previous story. */
+    previous(): void;
+    /** Jump to the next story, skipping any remaining chapters in the current story. */
+    nextStory(): void;
+    /** Jump to the previous story regardless of current chapter. Lands on chapter 0 of the previous story. */
+    previousStory(): void;
+    play(): void;
+    pause(): void;
+    private _emitAfter;
+    private _restoreFocus;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'l-stories-viewer': LuxenStoriesViewer;
+    }
+}
+//# sourceMappingURL=stories-viewer.d.ts.map

package/cdn/elements/stories-viewer/stories-viewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories-viewer.d.ts","sourceRoot":"","sources":["../../../src/html/elements/stories-viewer/stories-viewer.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGzF,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAejD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,qBAAa,kBAAmB,SAAQ,YAAY;IAClD,OAAgB,MAAM,EAAE,cAAc,CAAwB;IAE9D,kCAAkC;IAElC,IAAI,UAAS;IAEb,oCAAoC;IAEpC,KAAK,SAAK;IAEV,4KAA4K;IAE5K,KAAK,UAAQ;IAEb,kDAAkD;IAElD,IAAI,UAAS;IAEb,oFAAoF;IAEpF,WAAW,UAAQ;IAEnB,0CAA0C;IAE1C,YAAY,UAAQ;IAEpB,gEAAgE;IAEhE,OAAO,SAAK;IAEZ,8DAA8D;IAC9D,OAAO,EAAE,UAAU,EAAE,CAAM;IAE3B,yEAAyE;IACzE,MAAM,EAAE,YAAY,GAAG,IAAI,CAAQ;IAElB,OAAO,CAAC,OAAO,CAAqB;IACrC,OAAO,CAAC,MAAM,CAAoB;IAElD,2FAA2F;IAClF,OAAO,CAAC,OAAO,CAAS;IAEjC,wFAAwF;IAC/E,OAAO,CAAC,QAAQ,CAAS;IAElC,OAAO,CAAC,IAAI,CAAK;IACjB,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,aAAa,CAAoD;IACzE,OAAO,CAAC,SAAS,CAAqB;IACtC,OAAO,CAAC,cAAc,CAAiB;IACvC,uFAAuF;IACvF,OAAO,CAAC,cAAc,CAAuB;IAIpC,iBAAiB;IAKjB,oBAAoB;IAQpB,YAAY;IAoBZ,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAoC9C,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,UAAU,CAuBhB;IAIF,OAAO,CAAC,mBAAmB,CAKzB;IAEF,OAAO,CAAC,iBAAiB,CAkCvB;IAIF,OAAO,CAAC,mBAAmB;IAM3B,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,YAAY;IA2BpB;;;;OAIG;IACH,OAAO,CAAC,kBAAkB;IAiB1B,gFAAgF;IAChF,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,iBAAiB;IAQzB,OAAO,KAAK,YAAY,GAEvB;IAMD,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,KAAK,CAiBX;IAEF,OAAO,CAAC,QAAQ;IAkBhB,qCAAqC;IACrC,OAAO,CAAC,QAAQ;IAmChB,oEAAoE;IACpE,MAAM,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,KAAK,SAAI,EAAE,MAAM,GAAE,YAAY,GAAG,IAAW;IAO3E,KAAK;IAIL,yEAAyE;IACzE,IAAI;IAIJ,qGAAqG;IACrG,QAAQ;IAIR,oFAAoF;IACpF,SAAS;IAQT,0GAA0G;IAC1G,aAAa;IAMb,IAAI;IAKJ,KAAK;YAOS,UAAU;IAWxB,OAAO,CAAC,aAAa;IAOZ,MAAM;CA8LhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,kBAAkB,CAAC;KACxC;CACF"}

package/cdn/elements/stories-viewer/stories-viewer.js

@@ -0,0 +1,160 @@
+import{c as e,i as t,n}from"../../chunks/lit.js";import{LuxenElement as r}from"../../shared/luxen-element.js";import{i,n as a,r as o,t as s}from"../../chunks/decorate.js";import c from"../../shared/styles/host.styles.js";import{t as l}from"../../chunks/map.js";var u=e(`:host{--width:min(420px, 100vw);--aspect-ratio:9 / 16;--progress-color:white;--progress-bg:#ffffff59;--progress-gap:4px;--show-duration:.2s;--hide-duration:.2s;--backdrop:var(--l-backdrop-strong);display:contents}dialog{color:#fff;opacity:0;width:100vw;max-width:none;height:100dvh;max-height:none;transition-property:opacity,display,overlay;transition-duration:var(--hide-duration);transition-behavior:allow-discrete;background:0 0;border:0;place-items:center;margin:0;padding:0;position:fixed;inset:0;overflow:clip}dialog::backdrop{background:var(--backdrop)}dialog[open]{opacity:1;transition-duration:var(--show-duration);display:grid}@starting-style{dialog[open]{opacity:0}}.frame{width:var(--width);max-width:100vw;max-height:100dvh;aspect-ratio:var(--aspect-ratio);isolation:isolate;-webkit-user-select:none;user-select:none;touch-action:pan-y;background:#000;border-radius:.75rem;position:relative;overflow:clip}@media (width<=480px){.frame{aspect-ratio:auto;border-radius:0;width:100vw;height:100dvh}}.video{object-fit:cover;background:#000;width:100%;height:100%;position:absolute;inset:0}.spinner{z-index:1;color:#fff;pointer-events:none;opacity:0;width:2rem;height:2rem;margin:auto;transition:opacity .15s;position:absolute;inset:0}.spinner[data-state=loading]{opacity:1;transition-delay:.2s}@media (prefers-reduced-motion:reduce){.spinner{transition:none}}.progress{z-index:2;gap:var(--progress-gap);pointer-events:none;display:flex;position:absolute;top:.5rem;left:.5rem;right:.5rem}.progress-segment{background:var(--progress-bg);border-radius:999px;flex:1 1 0;height:2.5px;overflow:clip}.progress-fill{background:var(--progress-color);width:100%;height:100%;transform:scaleX(var(--p,0));transform-origin:0;transition:transform 80ms linear;display:block}.progress-segment[data-state=past] .progress-fill{transform:scaleX(1)}@media (prefers-reduced-motion:reduce){.progress-fill{transition:none}:host{--show-duration:0s;--hide-duration:0s}}.header{z-index:2;pointer-events:none;align-items:center;gap:.625rem;min-width:0;display:flex;position:absolute;top:1.25rem;left:.75rem;right:4rem}.header>::slotted(*){pointer-events:auto}.header-thumb{object-fit:cover;pointer-events:auto;border-radius:50%;flex-shrink:0;width:2rem;height:2rem}.header-text{pointer-events:auto;flex-direction:column;min-width:0;display:flex}.header-label{color:#fff;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;font-weight:600;line-height:1.2;overflow:hidden}.actions{z-index:2;pointer-events:none;flex-direction:column;gap:.75rem;display:flex;position:absolute;top:1.25rem;right:.75rem}.actions>::slotted(*),.actions .btn{pointer-events:auto}.btn{color:#fff;cursor:pointer;background:#00000040;border:0;border-radius:999px;justify-content:center;align-items:center;width:2rem;height:2rem;padding:0;font-size:1rem;transition:background .15s;display:inline-flex;position:relative}.btn:hover{background:#00000073}.btn:focus-visible{outline:2px solid var(--progress-color);outline-offset:2px}.btn:before{content:"";position:absolute;inset:-6px}.btn-nav{z-index:2;width:2.25rem;height:2.25rem;font-size:1.25rem;position:absolute}.btn-nav:before{inset:-4px}.btn-previous,.btn-next{top:50%;transform:translateY(-50%)}@media (width>=768px){.btn-previous{left:calc(50% - var(--width) / 2 - 3rem)}.btn-next{right:calc(50% - var(--width) / 2 - 3rem)}}@media (width<=767px){.btn-previous,.btn-next{display:none}}.tap-zone{z-index:0;position:absolute;top:0;bottom:0}.tap-previous{width:30%;left:0}.tap-next{left:30%;right:0}.overlay{z-index:1;pointer-events:none;padding:1rem;position:absolute;inset:auto 0 0}.overlay>::slotted(*){pointer-events:auto}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}`),d=Symbol.for(`luxen-stories-viewer-scroll-lock`);if(typeof document<`u`&&!(d in document)){let e=new CSSStyleSheet;e.replaceSync(`html:has(l-stories-viewer[data-modal]) { overflow: hidden; scrollbar-gutter: stable; }`),document.adoptedStyleSheets.push(e),Object.defineProperty(document,d,{value:e})}var f=class extends r{constructor(...e){super(...e),this.open=!1,this.index=0,this.muted=!0,this.loop=!1,this.autoAdvance=!0,this.lightDismiss=!0,this.chapter=0,this.stories=[],this.source=null,this._paused=!1,this._loading=!1,this._raf=0,this._holdTimer=0,this._pointerStart=null,this._segments=[],this._chapterStarts=[0],this._prefetchedSrc=null,this._onKeyDown=e=>{if(this.open)switch(e.key){case`ArrowLeft`:e.preventDefault(),this.previous();break;case`ArrowRight`:e.preventDefault(),this.next();break;case` `:e.preventDefault(),this._video.paused?this.play():this.pause();break;case`m`:case`M`:e.preventDefault(),this.muted=!this.muted,this.emit(`mute-change`,{detail:{muted:this.muted}});break}},this._onFramePointerDown=e=>{e.target.closest(`button, a, [data-no-gesture]`)||(this._pointerStart={x:e.clientX,y:e.clientY,t:performance.now()},this._holdTimer=window.setTimeout(()=>this.pause(),200))},this._onFramePointerUp=e=>{clearTimeout(this._holdTimer);let t=this._pointerStart;if(this._pointerStart=null,!t)return;let n=e.clientX-t.x,r=e.clientY-t.y,i=performance.now()-t.t,a=i<200&&Math.abs(n)<10&&Math.abs(r)<10;if(i>=200&&Math.abs(n)<10&&Math.abs(r)<10){this._video.paused&&this.play();return}if(a){e.target.closest(`[data-tap]`)?.dataset.tap===`previous`?this.previous():this.next();return}Math.abs(n)>Math.abs(r)&&Math.abs(n)>50?n<0?this.nextStory():this.previousStory():r>50&&this.close()},this._tick=()=>{if(!this.open)return;let e=this._video,t=this._segments[this.chapter];if(e&&t){let n=this._chapterStarts[this.chapter]??0,r=this._chapterStarts[this.chapter+1]??e.duration,i=Math.max(0,r-n),a=i?Math.max(0,Math.min((e.currentTime-n)/i,1)):0;t.style.setProperty(`--p`,String(a)),a>=1&&this.chapter<this._lastChapter&&this._advance(1)}this._raf=requestAnimationFrame(this._tick)}}static{this.styles=[c,u]}connectedCallback(){super.connectedCallback(),this.addEventListener(`keydown`,this._onKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`keydown`,this._onKeyDown),cancelAnimationFrame(this._raf),clearTimeout(this._holdTimer),this._clearPrefetchHints()}firstUpdated(){this._dialog.addEventListener(`cancel`,e=>this._onCancel(e)),this._dialog.addEventListener(`close`,()=>this._onNativeClose()),this._dialog.addEventListener(`click`,e=>this._onDialogClick(e)),this._video.addEventListener(`ended`,()=>this._onEnded()),this._video.addEventListener(`loadedmetadata`,()=>this._tick()),this._video.addEventListener(`play`,()=>this._paused=!1),this._video.addEventListener(`pause`,()=>this._paused=!0),this._video.addEventListener(`loadstart`,()=>this._loading=!0),this._video.addEventListener(`waiting`,()=>this._loading=!0),this._video.addEventListener(`playing`,()=>this._loading=!1),this._video.addEventListener(`canplay`,()=>this._loading=!1),this._video.addEventListener(`error`,()=>this._loading=!1),this._video.addEventListener(`timeupdate`,()=>this._maybePrefetchNext())}updated(e){if(e.has(`open`)){if(this.open&&!this._dialog.open)this.emit(`show`),this.toggleAttribute(`data-modal`,!0),this._dialog.showModal(),this._loadCurrent(),this._emitAfter(`after-show`);else if(!this.open&&this._dialog.open){if(!this.emit(`hide`,{cancelable:!0})){this.open=!0;return}this._dialog.close()}}if(e.has(`index`)&&this.open){this._loadCurrent();let e=this.stories[this.index];e&&this.emit(`story-change`,{detail:{index:this.index,story:e}})}e.has(`chapter`)&&this.open&&!e.has(`index`)&&this._applyChapterSeek(),e.has(`muted`)&&this._video&&(this._video.muted=this.muted)}_onCancel(e){this.emit(`hide`,{cancelable:!0})||e.preventDefault()}_onNativeClose(){cancelAnimationFrame(this._raf),this._video.pause(),this._video.removeAttribute(`src`),this._video.load(),this._clearPrefetchHints();for(let e=0;e<=this.index&&e<this.stories.length;e++)this.stories[e].seen=!0;this._restoreFocus(),this.open=!1,this.removeAttribute(`data-modal`),this._emitAfter(`after-hide`)}_onDialogClick(e){this.lightDismiss&&e.target===this._dialog&&(this.open=!1)}_refreshSegmentRefs(){this._segments=Array.from(this.shadowRoot.querySelectorAll(`[part~="progress-fill"]`))}_resetSegmentFills(){this._refreshSegmentRefs();for(let e=0;e<this._segments.length;e++){let t=+(e<this.chapter);this._segments[e].style.setProperty(`--p`,String(t))}}_loadCurrent(){let e=this.stories[this.index];e&&(cancelAnimationFrame(this._raf),this._prefetchedSrc=null,this._chapterStarts=e.getChapterStarts(),this.chapter=0,this._syncSlots(e),this._video.muted=this.muted,this._video.loop=this.loop,this._video.src===e.src?this._video.currentTime=0:this._video.src=e.src,requestAnimationFrame(()=>this._resetSegmentFills()),this._video.play().catch(()=>{this.muted=!0,this._video.muted=!0,this._video.play().catch(()=>{})}))}_maybePrefetchNext(){let e=this._video;if(!e.duration||e.currentTime/e.duration<.5)return;let t=this.stories[this.index+1];if(!t?.src||this._prefetchedSrc===t.src)return;this._prefetchedSrc=t.src;let n=document.createElement(`link`);n.rel=`preload`,n.as=`video`,n.href=t.src,n.crossOrigin=`anonymous`,n.dataset.luxenStoriesPrefetch=``,document.head.appendChild(n)}_clearPrefetchHints(){let e=document.head.querySelectorAll(`link[data-luxen-stories-prefetch]`);for(let t of e)t.remove();this._prefetchedSrc=null}_applyChapterSeek(){let e=this._chapterStarts[this.chapter]??0;this._video.currentTime=e,this._resetSegmentFills();let t=this.stories[this.index];t&&this.emit(`chapter-change`,{detail:{chapter:this.chapter,story:t}})}get _lastChapter(){return Math.max(0,this._chapterStarts.length-1)}_syncSlots(e){for(let e of Array.from(this.children))e.dataset.storySlot!==void 0&&e.remove();for(let t of Array.from(e.children)){if(!t.getAttribute?.(`slot`))continue;let e=t.cloneNode(!0);e.dataset.storySlot=``,this.appendChild(e)}}_onEnded(){if(this.stories[this.index]&&this.emit(`story-end`,{detail:{index:this.index}}),this.loop){this._video.currentTime=this._chapterStarts[0]??0,this.chapter=0,this._video.play().catch(()=>{});return}this.autoAdvance&&(this.index<this.stories.length-1?this.index+=1:this.close())}_advance(e){if(e===1){this.chapter<this._lastChapter?this.chapter+=1:this.index<this.stories.length-1?this.index+=1:this.close();return}let t=this._chapterStarts[this.chapter]??0;if(this._video.currentTime>t+1){this._video.currentTime=t,this._resetSegmentFills();return}if(this.chapter>0)--this.chapter;else if(this.index>0){let e=this.stories[this.index-1],t=Math.max(0,e.getChapterStarts().length-1);--this.index,queueMicrotask(()=>{this.chapter=t})}}openAt(e,t=0,n=null){this.stories=e,this.source=n,this.index=Math.max(0,Math.min(t,e.length-1)),this.open=!0}close(){this.open=!1}next(){this._advance(1)}previous(){this._advance(-1)}nextStory(){this.index<this.stories.length-1?this.index+=1:this.close()}previousStory(){this.index>0&&--this.index}play(){this._video?.play().catch(()=>{}),this._raf=requestAnimationFrame(this._tick)}pause(){this._video?.pause(),cancelAnimationFrame(this._raf)}async _emitAfter(e){await new Promise(e=>requestAnimationFrame(()=>e(null)));let t=this._dialog.getAnimations({subtree:!1});await Promise.all(t.map(e=>e.finished.catch(()=>{}))),e===`after-show`===this.open&&(this.emit(e),e===`after-show`&&(this._raf=requestAnimationFrame(this._tick)))}_restoreFocus(){((this.source?.stories()??this.stories)[this.index]?.querySelector(`button[data-story-trigger]`))?.focus({preventScroll:!1})}render(){let e=this.stories.length,r=this.stories[this.index],i=this.index===0,a=this.index>=e-1,o=this._chapterStarts.length?this._chapterStarts:r?.getChapterStarts()??[0];return t`
+      <dialog
+        part="dialog"
+        aria-label="Stories"
+      >
+        <div
+          part="frame"
+          class="frame"
+          @pointerdown=${this._onFramePointerDown}
+          @pointerup=${this._onFramePointerUp}
+          @pointercancel=${this._onFramePointerUp}
+        >
+          <div
+            part="progress"
+            class="progress"
+            role="progressbar"
+            aria-valuenow=${this.chapter+1}
+            aria-valuemin="1"
+            aria-valuemax=${o.length||1}
+          >
+            ${l(o,(e,n)=>t`
+                <span
+                  part="progress-segment"
+                  class="progress-segment"
+                  data-state=${n<this.chapter?`past`:n===this.chapter?`active`:`future`}
+                >
+                  <span
+                    part="progress-fill"
+                    class="progress-fill"
+                  ></span>
+                </span>
+              `)}
+          </div>
+
+          <header
+            part="header"
+            class="header"
+            data-no-gesture
+          >
+            <slot name="header">
+              ${r?.poster?t`<img
+                    class="header-thumb"
+                    src=${r.poster}
+                    alt=""
+                  />`:n}
+              ${r?.label?t`<div class="header-text">
+                    <div
+                      part="header-label"
+                      class="header-label"
+                    >
+                      ${r.label}
+                    </div>
+                  </div>`:n}
+            </slot>
+          </header>
+
+          <div
+            part="actions"
+            class="actions"
+            data-no-gesture
+          >
+            <slot name="close">
+              <button
+                type="button"
+                part="button-close"
+                class="btn btn-close"
+                aria-label="Close"
+                @click=${()=>this.close()}
+              >
+                <l-icon name="mdi:close"></l-icon>
+              </button>
+            </slot>
+            <button
+              type="button"
+              part="button-pause"
+              class="btn btn-pause"
+              aria-label=${this._paused?`Play`:`Pause`}
+              aria-pressed=${this._paused?`true`:`false`}
+              @click=${()=>this._paused?this.play():this.pause()}
+            >
+              <l-icon name=${this._paused?`mdi:play`:`mdi:pause`}></l-icon>
+            </button>
+            <button
+              type="button"
+              part="button-mute"
+              class="btn btn-mute"
+              aria-label=${this.muted?`Unmute`:`Mute`}
+              aria-pressed=${this.muted?`false`:`true`}
+              @click=${()=>{this.muted=!this.muted,this.emit(`mute-change`,{detail:{muted:this.muted}})}}
+            >
+              <l-icon name=${this.muted?`mdi:volume-off`:`mdi:volume-high`}></l-icon>
+            </button>
+          </div>
+
+          <video
+            part="video"
+            class="video"
+            playsinline
+            preload="metadata"
+            ?muted=${this.muted}
+          ></video>
+
+          <l-spinner
+            part="spinner"
+            class="spinner"
+            aria-label="Loading"
+            data-no-gesture
+            data-state=${this._loading?`loading`:`idle`}
+          ></l-spinner>
+
+          <!-- Tap zones: invisible overlays that translate clicks into previous/next.
+               Sit BELOW header / overlay / chevron buttons in z-order, above the video. -->
+          <div
+            class="tap-zone tap-previous"
+            data-tap="previous"
+            aria-hidden="true"
+          ></div>
+          <div
+            class="tap-zone tap-next"
+            data-tap="next"
+            aria-hidden="true"
+          ></div>
+
+          <div
+            part="overlay"
+            class="overlay"
+            data-no-gesture
+          >
+            <slot name="cta"></slot>
+          </div>
+
+          <div
+            class="sr-only"
+            aria-live="polite"
+          >
+            ${e?`Story ${this.index+1} of ${e}${this.stories[this.index]?.label?` — ${this.stories[this.index].label}`:``}${o.length>1?` — chapter ${this.chapter+1} of ${o.length}`:``}`:``}
+          </div>
+        </div>
+
+        ${i?n:t`<button
+              type="button"
+              part="button-previous"
+              class="btn btn-nav btn-previous"
+              aria-label="Previous story"
+              @click=${()=>this.previousStory()}
+            >
+              <l-icon name="mdi:chevron-left"></l-icon>
+            </button>`}
+        ${a?n:t`<button
+              type="button"
+              part="button-next"
+              class="btn btn-nav btn-next"
+              aria-label="Next story"
+              @click=${()=>this.nextStory()}
+            >
+              <l-icon name="mdi:chevron-right"></l-icon>
+            </button>`}
+      </dialog>
+    `}};s([i({type:Boolean,reflect:!0})],f.prototype,`open`,void 0),s([i({type:Number,reflect:!0})],f.prototype,`index`,void 0),s([i({type:Boolean,reflect:!0})],f.prototype,`muted`,void 0),s([i({type:Boolean,reflect:!0})],f.prototype,`loop`,void 0),s([i({type:Boolean,reflect:!0,attribute:`auto-advance`})],f.prototype,`autoAdvance`,void 0),s([i({type:Boolean,reflect:!0,attribute:`light-dismiss`})],f.prototype,`lightDismiss`,void 0),s([i({type:Number,reflect:!0})],f.prototype,`chapter`,void 0),s([a(`dialog`)],f.prototype,`_dialog`,void 0),s([a(`video`)],f.prototype,`_video`,void 0),s([o()],f.prototype,`_paused`,void 0),s([o()],f.prototype,`_loading`,void 0);export{f as LuxenStoriesViewer};
+//# sourceMappingURL=stories-viewer.js.map