luxen-ui 0.6.2 → 0.8.0

package/cdn/elements/rating/rating.d.ts

@@ -13,6 +13,8 @@ import { LuxenFormAssociatedElement } from '../../shared/luxen-form-associated-e
  * @cssproperty --icon - Custom SVG shape as a `url()`. Defaults to a 5-pointed star.
  *
  * @event {{ name: string, value: string, checked: boolean, sourceEvent: Event }} change - Emitted when the rating value changes in edit mode.
+ *
+ * @customElement l-rating
  */
 export declare class Rating extends LuxenFormAssociatedElement {
     static styles: import('lit').CSSResult[];

package/cdn/elements/rating/rating.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rating.d.ts","sourceRoot":"","sources":["../../../src/html/elements/rating/rating.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAM3F;;;;;;;;;;;;;;GAcG;AACH,qBAAa,MAAO,SAAQ,0BAA0B;IACpD,OAAgB,MAAM,4BAAwB;IAE9C,OAAO,CAAC,YAAY,CAAM;IAC1B,OAAO,CAAC,cAAc,CAAK;IAG3B,QAAQ,CAAC,QAAQ,UAAS;IAU1B,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAE,CAAM;IAG/B,QAAQ,CAAC,KAAK,SAAK;IAGnB,QAAQ,CAAC,MAAM,SAAK;IAEpB,uFAAuF;IACvF,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAE3B,iBAAiB;IAMjB,iBAAiB;IAKjB,wBAAwB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,GAAG,cAAc;IAKzE,YAAY;IAIrB,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,cAAc;IAkBb,MAAM;IAuDf,OAAO,CAAC,YAAY,CAGlB;IAEF,OAAO,CAAC,YAAY,CAOlB;IAEF,OAAO,CAAC,OAAO,CAeb;CACH"}
+{"version":3,"file":"rating.d.ts","sourceRoot":"","sources":["../../../src/html/elements/rating/rating.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAM3F;;;;;;;;;;;;;;;;GAgBG;AACH,qBAAa,MAAO,SAAQ,0BAA0B;IACpD,OAAgB,MAAM,4BAAwB;IAE9C,OAAO,CAAC,YAAY,CAAM;IAC1B,OAAO,CAAC,cAAc,CAAK;IAG3B,QAAQ,CAAC,QAAQ,UAAS;IAU1B,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAE,CAAM;IAG/B,QAAQ,CAAC,KAAK,SAAK;IAGnB,QAAQ,CAAC,MAAM,SAAK;IAEpB,uFAAuF;IACvF,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAE3B,iBAAiB;IAMjB,iBAAiB;IAKjB,wBAAwB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,GAAG,cAAc;IAKzE,YAAY;IAIrB,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,cAAc;IAkBb,MAAM;IAuDf,OAAO,CAAC,YAAY,CAGlB;IAEF,OAAO,CAAC,YAAY,CAOlB;IAEF,OAAO,CAAC,OAAO,CAeb;CACH"}

package/cdn/elements/rating/rating.js

@@ -1,4 +1,4 @@
-import{c as e,i as t,n}from"../../chunks/lit.js";import{i as r,t as i}from"../../chunks/decorate.js";import a from"../../shared/styles/host.styles.js";import{LuxenFormAssociatedElement as o}from"../../shared/luxen-form-associated-element.js";var s=e(`:host{--icon-size:20px;--active-color:gold;--inactive-color:#ddd;--spacing:0px;--_icon:var(--icon,url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 19.02'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>"));align-items:center;display:inline-flex}.rating{height:var(--icon-size);background:linear-gradient(to right, var(--active-color) var(--_fill,0%), var(--inactive-color) var(--_fill,0%));-webkit-mask-size:var(--icon-size) var(--icon-size);mask-size:var(--icon-size) var(--icon-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.rating-edit{gap:var(--spacing);display:inline-flex}.icon-wrapper{cursor:pointer}.icon-wrapper input{clip:rect(0, 0, 0, 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.icon{width:var(--icon-size);height:var(--icon-size);-webkit-mask-image:var(--_icon);mask-image:var(--_icon);background:var(--inactive-color);pointer-events:none;transition:scale .2s;display:block;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon.active{background:var(--active-color)}.icon-wrapper:hover .icon{scale:1.2}.icon-wrapper:has(input:focus-visible) .icon{outline:2px solid var(--active-color);outline-offset:2px;border-radius:2px}:host([edit-mode]) .wrapper:focus-within{outline:2px solid var(--active-color);outline-offset:2px;border-radius:2px}:host([disabled]){opacity:.5;pointer-events:none}.wrapper{white-space:nowrap;align-items:center;display:flex}.rating-label{flex:1;margin-inline-start:8px;font-size:1rem;line-height:1}`),c=class extends o{constructor(...e){super(...e),this.currentLabel=``,this.previewedValue=0,this.#e=!1,this.#t=[],this.#n=0,this.#r=5,this.previewValue=e=>{this.previewedValue=e,this.setLabelForValue(e)},this.clearPreview=e=>{if(e){let t=e.relatedTarget;if(t&&this.shadowRoot?.contains(t))return}this.previewedValue=0,this.setLabelForValue(this.value)},this.onClick=e=>{let t=e.currentTarget,n=Number(t.value);this.value=n===this.value?0:n,this.hasInteracted=!0,this._syncFormValue(String(this.value)),this.emit(`change`,{detail:{name:this.name,value:String(this.value),checked:this.value>0,sourceEvent:e}})}}static{this.styles=[a,s]}#e;get editMode(){return this.#e}set editMode(e){this.#e=e}#t;get labels(){return this.#t}set labels(e){this.#t=e}#n;get value(){return this.#n}set value(e){this.#n=e}#r;get length(){return this.#r}set length(e){this.#r=e}connectedCallback(){super.connectedCallback(),this._defaultFormValue=String(this.value),this._syncFormValue(this._defaultFormValue)}formResetCallback(){this.value=Number(this._defaultFormValue),super.formResetCallback()}formStateRestoreCallback(e,t){this.value=Number(e),this._syncFormValue(e)}firstUpdated(){this.setLabelForValue(this.value)}setLabelForValue(e){let t=typeof e==`string`?parseInt(e,10):e;this.currentLabel=t?this.labels?.[t-1]??``:``,this.requestUpdate()}getRatingStyle(){let e=this.length,t=e>0?this.value/e*100:0,n=Array.from({length:e},(e,t)=>this.getIcon?.(t+1)??`var(--_icon)`),r=Array.from({length:e},(e,t)=>t===0?`0 0`:`calc(${t} * calc(var(--icon-size) + var(--spacing))) 0`);return[`width: calc(${e} * var(--icon-size) + ${e-1} * var(--spacing))`,`--_fill: ${t}%`,`mask-image: ${n.join(`, `)}`,`mask-position: ${r.join(`, `)}`].join(`; `)}render(){if(!this.editMode)return t`<div
+import{i as e}from"../../chunks/lit.js";import{a as t,t as n}from"../../chunks/lit-html.js";import{i as r,t as i}from"../../chunks/decorate.js";import a from"../../shared/styles/host.styles.js";import{LuxenFormAssociatedElement as o}from"../../shared/luxen-form-associated-element.js";var s=e(`:host{--icon-size:20px;--active-color:gold;--inactive-color:#ddd;--spacing:0px;--_icon:var(--icon,url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 19.02'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>"));align-items:center;display:inline-flex}.rating{height:var(--icon-size);background:linear-gradient(to right, var(--active-color) var(--_fill,0%), var(--inactive-color) var(--_fill,0%));-webkit-mask-size:var(--icon-size) var(--icon-size);mask-size:var(--icon-size) var(--icon-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.rating-edit{gap:var(--spacing);display:inline-flex}.icon-wrapper{cursor:pointer}.icon-wrapper input{clip:rect(0, 0, 0, 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.icon{width:var(--icon-size);height:var(--icon-size);-webkit-mask-image:var(--_icon);mask-image:var(--_icon);background:var(--inactive-color);pointer-events:none;transition:scale .2s;display:block;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon.active{background:var(--active-color)}.icon-wrapper:hover .icon{scale:1.2}.icon-wrapper:has(input:focus-visible) .icon{outline:2px solid var(--active-color);outline-offset:2px;border-radius:2px}:host([edit-mode]) .wrapper:focus-within{outline:2px solid var(--active-color);outline-offset:2px;border-radius:2px}:host([disabled]){opacity:.5;pointer-events:none}.wrapper{white-space:nowrap;align-items:center;display:flex}.rating-label{flex:1;margin-inline-start:8px;font-size:1rem;line-height:1}`),c=class extends o{constructor(...e){super(...e),this.currentLabel=``,this.previewedValue=0,this.#e=!1,this.#t=[],this.#n=0,this.#r=5,this.previewValue=e=>{this.previewedValue=e,this.setLabelForValue(e)},this.clearPreview=e=>{if(e){let t=e.relatedTarget;if(t&&this.shadowRoot?.contains(t))return}this.previewedValue=0,this.setLabelForValue(this.value)},this.onClick=e=>{let t=e.currentTarget,n=Number(t.value);this.value=n===this.value?0:n,this.hasInteracted=!0,this._syncFormValue(String(this.value)),this.emit(`change`,{detail:{name:this.name,value:String(this.value),checked:this.value>0,sourceEvent:e}})}}static{this.styles=[a,s]}#e;get editMode(){return this.#e}set editMode(e){this.#e=e}#t;get labels(){return this.#t}set labels(e){this.#t=e}#n;get value(){return this.#n}set value(e){this.#n=e}#r;get length(){return this.#r}set length(e){this.#r=e}connectedCallback(){super.connectedCallback(),this._defaultFormValue=String(this.value),this._syncFormValue(this._defaultFormValue)}formResetCallback(){this.value=Number(this._defaultFormValue),super.formResetCallback()}formStateRestoreCallback(e,t){this.value=Number(e),this._syncFormValue(e)}firstUpdated(){this.setLabelForValue(this.value)}setLabelForValue(e){let t=typeof e==`string`?parseInt(e,10):e;this.currentLabel=t?this.labels?.[t-1]??``:``,this.requestUpdate()}getRatingStyle(){let e=this.length,t=e>0?this.value/e*100:0,n=Array.from({length:e},(e,t)=>this.getIcon?.(t+1)??`var(--_icon)`),r=Array.from({length:e},(e,t)=>t===0?`0 0`:`calc(${t} * calc(var(--icon-size) + var(--spacing))) 0`);return[`width: calc(${e} * var(--icon-size) + ${e-1} * var(--spacing))`,`--_fill: ${t}%`,`mask-image: ${n.join(`, `)}`,`mask-position: ${r.join(`, `)}`].join(`; `)}render(){if(!this.editMode)return t`<div
         class="rating"
         style=${this.getRatingStyle()}
       ></div>`;let e=this.previewedValue||this.value;return t`

package/cdn/elements/rating/rating.js.map

@@ -1 +1 @@
-{"version":3,"file":"rating.js","names":[],"sources":["../../../src/html/elements/rating/rating.css?inline","../../../src/html/elements/rating/rating.ts"],"sourcesContent":[":host {\n  --icon-size: 20px;\n  --active-color: gold;\n  --inactive-color: #ddd;\n  --spacing: 0px;\n  --_icon: var(\n    --icon,\n    url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 19.02'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>\")\n  );\n\n  display: inline-flex;\n  align-items: center;\n}\n\n/* — Read-only mode — */\n\n.rating {\n  height: var(--icon-size);\n  background: linear-gradient(\n    to right,\n    var(--active-color) var(--_fill, 0%),\n    var(--inactive-color) var(--_fill, 0%)\n  );\n  mask-size: var(--icon-size) var(--icon-size);\n  mask-repeat: no-repeat;\n}\n\n/* — Edit mode — */\n\n.rating-edit {\n  display: inline-flex;\n  gap: var(--spacing);\n}\n\n.icon-wrapper {\n  cursor: pointer;\n}\n\n.icon-wrapper input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.icon {\n  display: block;\n  width: var(--icon-size);\n  height: var(--icon-size);\n  mask-image: var(--_icon);\n  mask-size: contain;\n  mask-repeat: no-repeat;\n  background: var(--inactive-color);\n  transition: scale 0.2s ease;\n  pointer-events: none;\n}\n\n.icon.active {\n  background: var(--active-color);\n}\n\n.icon-wrapper:hover .icon {\n  scale: 1.2;\n}\n\n.icon-wrapper:has(input:focus-visible) .icon {\n  outline: 2px solid var(--active-color);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n\n:host([edit-mode]) .wrapper:focus-within {\n  outline: 2px solid var(--active-color);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n\n/* — Disabled — */\n\n:host([disabled]) {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n/* — Label — */\n\n.wrapper {\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n}\n\n.rating-label {\n  margin-inline-start: 8px;\n  flex: 1;\n  font-size: 1rem;\n  line-height: 1;\n}\n","import { html, nothing, unsafeCSS } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { LuxenFormAssociatedElement } from '../../shared/luxen-form-associated-element.js';\nimport hostStyles from '../../shared/styles/host.styles.js';\nimport rawStyles from './rating.css?inline';\n\nconst styles = unsafeCSS(rawStyles);\n\n/**\n * A star rating component using CSS mask-image.\n *\n * @summary Displays a star rating, optionally interactive.\n *\n * @csspart label - The label element shown in edit mode.\n *\n * @cssproperty --icon-size - The size of each icon. Defaults to `20px`.\n * @cssproperty --active-color - The fill color for rated icons. Defaults to `gold`.\n * @cssproperty --inactive-color - The fill color for empty icons. Defaults to `#ddd`.\n * @cssproperty --spacing - The spacing between icons. Defaults to `0px`.\n * @cssproperty --icon - Custom SVG shape as a `url()`. Defaults to a 5-pointed star.\n *\n * @event {{ name: string, value: string, checked: boolean, sourceEvent: Event }} change - Emitted when the rating value changes in edit mode.\n */\nexport class Rating extends LuxenFormAssociatedElement {\n  static override styles = [hostStyles, styles];\n\n  private currentLabel = '';\n  private previewedValue = 0;\n\n  @property({ type: Boolean, reflect: true, attribute: 'edit-mode' })\n  accessor editMode = false;\n\n  @property({\n    type: Array,\n    reflect: true,\n    converter: {\n      fromAttribute: (value: string) => value.split('|'),\n      toAttribute: (value: string[]) => (value.length ? value.join('|') : null),\n    },\n  })\n  accessor labels: string[] = [];\n\n  @property({ type: Number, reflect: true })\n  accessor value = 0;\n\n  @property({ type: Number, reflect: true })\n  accessor length = 5;\n\n  /** Optional callback returning a CSS `url()` string for a given position (1-based). */\n  getIcon?: (value: number) => string;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this._defaultFormValue = String(this.value);\n    this._syncFormValue(this._defaultFormValue);\n  }\n\n  override formResetCallback() {\n    this.value = Number(this._defaultFormValue);\n    super.formResetCallback();\n  }\n\n  override formStateRestoreCallback(state: string, _mode: 'restore' | 'autocomplete') {\n    this.value = Number(state);\n    this._syncFormValue(state);\n  }\n\n  override firstUpdated() {\n    this.setLabelForValue(this.value);\n  }\n\n  private setLabelForValue(value: number | string) {\n    const intValue = typeof value === 'string' ? parseInt(value, 10) : value;\n    this.currentLabel = intValue ? (this.labels?.[intValue - 1] ?? '') : '';\n    this.requestUpdate();\n  }\n\n  private getRatingStyle() {\n    const max = this.length;\n    const fillPct = max > 0 ? (this.value / max) * 100 : 0;\n    const step = 'calc(var(--icon-size) + var(--spacing))';\n\n    const icons = Array.from({ length: max }, (_, i) => this.getIcon?.(i + 1) ?? 'var(--_icon)');\n    const positions = Array.from({ length: max }, (_, i) =>\n      i === 0 ? '0 0' : `calc(${i} * ${step}) 0`,\n    );\n\n    return [\n      `width: calc(${max} * var(--icon-size) + ${max - 1} * var(--spacing))`,\n      `--_fill: ${fillPct}%`,\n      `mask-image: ${icons.join(', ')}`,\n      `mask-position: ${positions.join(', ')}`,\n    ].join('; ');\n  }\n\n  override render() {\n    if (!this.editMode) {\n      return html`<div\n        class=\"rating\"\n        style=${this.getRatingStyle()}\n      ></div>`;\n    }\n\n    const activeCount = this.previewedValue || this.value;\n\n    return html`\n      <div\n        class=\"wrapper\"\n        @focusout=${this.clearPreview}\n      >\n        <div class=\"rating-edit\">\n          ${Array.from({ length: this.length }, (_, i) => {\n            const v = i + 1;\n            const icon = this.getIcon?.(v);\n            return html`\n              <label\n                class=\"icon-wrapper\"\n                @pointerover=${() => this.previewValue(v)}\n                @pointerout=${this.clearPreview}\n              >\n                <input\n                  type=\"radio\"\n                  name=${this.name ?? nothing}\n                  value=\"${v}\"\n                  aria-label=\"${this.labels?.[i] ?? `${v} ${v === 1 ? 'star' : 'stars'}`}\"\n                  ?checked=\"${this.value === v}\"\n                  ?disabled=\"${this.disabled}\"\n                  @click=${this.onClick}\n                  @focusin=${() => this.previewValue(v)}\n                />\n                <span\n                  class=\"icon ${v <= activeCount ? 'active' : ''}\"\n                  style=${icon ? `mask-image: ${icon}` : nothing}\n                ></span>\n              </label>\n            `;\n          })}\n        </div>\n        ${this.labels?.length\n          ? html`<div\n              class=\"rating-label\"\n              part=\"label\"\n            >\n              ${this.currentLabel}\n            </div>`\n          : nothing}\n      </div>\n    `;\n  }\n\n  private previewValue = (value: number) => {\n    this.previewedValue = value;\n    this.setLabelForValue(value);\n  };\n\n  private clearPreview = (event?: FocusEvent) => {\n    if (event) {\n      const related = event.relatedTarget as Node | null;\n      if (related && this.shadowRoot?.contains(related)) return;\n    }\n    this.previewedValue = 0;\n    this.setLabelForValue(this.value);\n  };\n\n  private onClick = (event: Event) => {\n    const target = event.currentTarget as HTMLInputElement;\n    const clickedValue = Number(target.value);\n    this.value = clickedValue === this.value ? 0 : clickedValue;\n    this.hasInteracted = true;\n    this._syncFormValue(String(this.value));\n\n    this.emit('change', {\n      detail: {\n        name: this.name,\n        value: String(this.value),\n        checked: this.value > 0,\n        sourceEvent: event,\n      },\n    });\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"rating.js","names":[],"sources":["../../../src/html/elements/rating/rating.css?inline","../../../src/html/elements/rating/rating.ts"],"sourcesContent":[":host {\n  --icon-size: 20px;\n  --active-color: gold;\n  --inactive-color: #ddd;\n  --spacing: 0px;\n  --_icon: var(\n    --icon,\n    url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 19.02'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>\")\n  );\n\n  display: inline-flex;\n  align-items: center;\n}\n\n/* — Read-only mode — */\n\n.rating {\n  height: var(--icon-size);\n  background: linear-gradient(\n    to right,\n    var(--active-color) var(--_fill, 0%),\n    var(--inactive-color) var(--_fill, 0%)\n  );\n  mask-size: var(--icon-size) var(--icon-size);\n  mask-repeat: no-repeat;\n}\n\n/* — Edit mode — */\n\n.rating-edit {\n  display: inline-flex;\n  gap: var(--spacing);\n}\n\n.icon-wrapper {\n  cursor: pointer;\n}\n\n.icon-wrapper input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.icon {\n  display: block;\n  width: var(--icon-size);\n  height: var(--icon-size);\n  mask-image: var(--_icon);\n  mask-size: contain;\n  mask-repeat: no-repeat;\n  background: var(--inactive-color);\n  transition: scale 0.2s ease;\n  pointer-events: none;\n}\n\n.icon.active {\n  background: var(--active-color);\n}\n\n.icon-wrapper:hover .icon {\n  scale: 1.2;\n}\n\n.icon-wrapper:has(input:focus-visible) .icon {\n  outline: 2px solid var(--active-color);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n\n:host([edit-mode]) .wrapper:focus-within {\n  outline: 2px solid var(--active-color);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n\n/* — Disabled — */\n\n:host([disabled]) {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n/* — Label — */\n\n.wrapper {\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n}\n\n.rating-label {\n  margin-inline-start: 8px;\n  flex: 1;\n  font-size: 1rem;\n  line-height: 1;\n}\n","import { html, nothing, unsafeCSS } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { LuxenFormAssociatedElement } from '../../shared/luxen-form-associated-element.js';\nimport hostStyles from '../../shared/styles/host.styles.js';\nimport rawStyles from './rating.css?inline';\n\nconst styles = unsafeCSS(rawStyles);\n\n/**\n * A star rating component using CSS mask-image.\n *\n * @summary Displays a star rating, optionally interactive.\n *\n * @csspart label - The label element shown in edit mode.\n *\n * @cssproperty --icon-size - The size of each icon. Defaults to `20px`.\n * @cssproperty --active-color - The fill color for rated icons. Defaults to `gold`.\n * @cssproperty --inactive-color - The fill color for empty icons. Defaults to `#ddd`.\n * @cssproperty --spacing - The spacing between icons. Defaults to `0px`.\n * @cssproperty --icon - Custom SVG shape as a `url()`. Defaults to a 5-pointed star.\n *\n * @event {{ name: string, value: string, checked: boolean, sourceEvent: Event }} change - Emitted when the rating value changes in edit mode.\n *\n * @customElement l-rating\n */\nexport class Rating extends LuxenFormAssociatedElement {\n  static override styles = [hostStyles, styles];\n\n  private currentLabel = '';\n  private previewedValue = 0;\n\n  @property({ type: Boolean, reflect: true, attribute: 'edit-mode' })\n  accessor editMode = false;\n\n  @property({\n    type: Array,\n    reflect: true,\n    converter: {\n      fromAttribute: (value: string) => value.split('|'),\n      toAttribute: (value: string[]) => (value.length ? value.join('|') : null),\n    },\n  })\n  accessor labels: string[] = [];\n\n  @property({ type: Number, reflect: true })\n  accessor value = 0;\n\n  @property({ type: Number, reflect: true })\n  accessor length = 5;\n\n  /** Optional callback returning a CSS `url()` string for a given position (1-based). */\n  getIcon?: (value: number) => string;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this._defaultFormValue = String(this.value);\n    this._syncFormValue(this._defaultFormValue);\n  }\n\n  override formResetCallback() {\n    this.value = Number(this._defaultFormValue);\n    super.formResetCallback();\n  }\n\n  override formStateRestoreCallback(state: string, _mode: 'restore' | 'autocomplete') {\n    this.value = Number(state);\n    this._syncFormValue(state);\n  }\n\n  override firstUpdated() {\n    this.setLabelForValue(this.value);\n  }\n\n  private setLabelForValue(value: number | string) {\n    const intValue = typeof value === 'string' ? parseInt(value, 10) : value;\n    this.currentLabel = intValue ? (this.labels?.[intValue - 1] ?? '') : '';\n    this.requestUpdate();\n  }\n\n  private getRatingStyle() {\n    const max = this.length;\n    const fillPct = max > 0 ? (this.value / max) * 100 : 0;\n    const step = 'calc(var(--icon-size) + var(--spacing))';\n\n    const icons = Array.from({ length: max }, (_, i) => this.getIcon?.(i + 1) ?? 'var(--_icon)');\n    const positions = Array.from({ length: max }, (_, i) =>\n      i === 0 ? '0 0' : `calc(${i} * ${step}) 0`,\n    );\n\n    return [\n      `width: calc(${max} * var(--icon-size) + ${max - 1} * var(--spacing))`,\n      `--_fill: ${fillPct}%`,\n      `mask-image: ${icons.join(', ')}`,\n      `mask-position: ${positions.join(', ')}`,\n    ].join('; ');\n  }\n\n  override render() {\n    if (!this.editMode) {\n      return html`<div\n        class=\"rating\"\n        style=${this.getRatingStyle()}\n      ></div>`;\n    }\n\n    const activeCount = this.previewedValue || this.value;\n\n    return html`\n      <div\n        class=\"wrapper\"\n        @focusout=${this.clearPreview}\n      >\n        <div class=\"rating-edit\">\n          ${Array.from({ length: this.length }, (_, i) => {\n            const v = i + 1;\n            const icon = this.getIcon?.(v);\n            return html`\n              <label\n                class=\"icon-wrapper\"\n                @pointerover=${() => this.previewValue(v)}\n                @pointerout=${this.clearPreview}\n              >\n                <input\n                  type=\"radio\"\n                  name=${this.name ?? nothing}\n                  value=\"${v}\"\n                  aria-label=\"${this.labels?.[i] ?? `${v} ${v === 1 ? 'star' : 'stars'}`}\"\n                  ?checked=\"${this.value === v}\"\n                  ?disabled=\"${this.disabled}\"\n                  @click=${this.onClick}\n                  @focusin=${() => this.previewValue(v)}\n                />\n                <span\n                  class=\"icon ${v <= activeCount ? 'active' : ''}\"\n                  style=${icon ? `mask-image: ${icon}` : nothing}\n                ></span>\n              </label>\n            `;\n          })}\n        </div>\n        ${this.labels?.length\n          ? html`<div\n              class=\"rating-label\"\n              part=\"label\"\n            >\n              ${this.currentLabel}\n            </div>`\n          : nothing}\n      </div>\n    `;\n  }\n\n  private previewValue = (value: number) => {\n    this.previewedValue = value;\n    this.setLabelForValue(value);\n  };\n\n  private clearPreview = (event?: FocusEvent) => {\n    if (event) {\n      const related = event.relatedTarget as Node | null;\n      if (related && this.shadowRoot?.contains(related)) return;\n    }\n    this.previewedValue = 0;\n    this.setLabelForValue(this.value);\n  };\n\n  private onClick = (event: Event) => {\n    const target = event.currentTarget as HTMLInputElement;\n    const clickedValue = Number(target.value);\n    this.value = clickedValue === this.value ? 0 : clickedValue;\n    this.hasInteracted = true;\n    this._syncFormValue(String(this.value));\n\n    this.emit('change', {\n      detail: {\n        name: this.name,\n        value: String(this.value),\n        checked: this.value > 0,\n        sourceEvent: event,\n      },\n    });\n  };\n}\n"],"mappings":"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"}

package/cdn/elements/select/select.meta.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @summary A styled native `<select>` using the customizable `base-select` appearance.
+ *
+ * @nativeElement select
+ * @selector .l-select
+ *
+ * @attribute disabled - Disables the select.
+ * @attribute required - Marks the field as required.
+ * @attribute multiple - Allows multiple selections.
+ *
+ * @event change - Fires when an option is selected.
+ * @event input - Fires when the value changes.
+ *
+ * @cssClass .l-select - Base select element with `appearance: base-select`.
+ * @cssClass .l-select-item - Option styling with checkmark indicator.
+ *
+ * @cssproperty [--border-radius=4px] - Border radius.
+ * @cssproperty --border-color - Border color (adapts to light/dark).
+ *
+ * @example Basic
+ * <select class="l-select">
+ *   <option>One</option>
+ *   <option>Two</option>
+ * </select>
+ */
+export declare class SelectMeta {
+}
+//# sourceMappingURL=select.meta.d.ts.map

package/cdn/elements/select/select.meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.meta.d.ts","sourceRoot":"","sources":["../../../src/html/elements/select/select.meta.ts"],"names":[],"mappings":"AAOA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,qBAAa,UAAU;CAAG"}

package/cdn/elements/skeleton/skeleton.d.ts

@@ -3,6 +3,9 @@ import { LuxenElement } from '../../shared/luxen-element.js';
  * @summary A skeleton loading placeholder.
  * @customElement l-skeleton
  *
+ * @attribute shape - circle | text — Placeholder shape. Default is a block.
+ * @attribute animation - pulse | wave — Loading animation. Default is `pulse`.
+ *
  * @cssproperty --width - Width of the skeleton
  * @cssproperty --height - Height of the skeleton
  */

package/cdn/elements/skeleton/skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/html/elements/skeleton/skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAE7D;;;;;;GAMG;AACH,qBAAa,QAAS,SAAQ,YAAY;IAC/B,gBAAgB;CAG1B"}
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/html/elements/skeleton/skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAE7D;;;;;;;;;GASG;AACH,qBAAa,QAAS,SAAQ,YAAY;IAC/B,gBAAgB;CAG1B"}

package/cdn/elements/skeleton/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","names":[],"sources":["../../../src/html/elements/skeleton/skeleton.ts"],"sourcesContent":["import { LuxenElement } from '../../shared/luxen-element.js';\n\n/**\n * @summary A skeleton loading placeholder.\n * @customElement l-skeleton\n *\n * @cssproperty --width - Width of the skeleton\n * @cssproperty --height - Height of the skeleton\n */\nexport class Skeleton extends LuxenElement {\n  override createRenderRoot() {\n    return this;\n  }\n}\n"],"mappings":"6DASA,IAAa,EAAb,cAA8B,CAAa,CACzC,kBAA4B,CAC1B,OAAO"}
+{"version":3,"file":"skeleton.js","names":[],"sources":["../../../src/html/elements/skeleton/skeleton.ts"],"sourcesContent":["import { LuxenElement } from '../../shared/luxen-element.js';\n\n/**\n * @summary A skeleton loading placeholder.\n * @customElement l-skeleton\n *\n * @attribute shape - circle | text — Placeholder shape. Default is a block.\n * @attribute animation - pulse | wave — Loading animation. Default is `pulse`.\n *\n * @cssproperty --width - Width of the skeleton\n * @cssproperty --height - Height of the skeleton\n */\nexport class Skeleton extends LuxenElement {\n  override createRenderRoot() {\n    return this;\n  }\n}\n"],"mappings":"6DAYA,IAAa,EAAb,cAA8B,CAAa,CACzC,kBAA4B,CAC1B,OAAO"}

package/cdn/elements/spinner/spinner.js

@@ -1,4 +1,4 @@
-import{c as e,i as t}from"../../chunks/lit.js";import{LuxenElement as n}from"../../shared/luxen-element.js";import r from"../../shared/styles/host.styles.js";var i=e(`:host{--size:1em;--indicator-color:currentColor;--speed:.75s;width:var(--size);height:var(--size);color:var(--indicator-color);flex:none;display:inline-flex}svg{fill:currentColor;width:100%;height:100%}.spinner{transform-origin:50%;animation:spin var(--speed) linear infinite}@keyframes spin{to{transform:rotate(360deg)}}`),a=class extends n{static{this.styles=[r,i]}render(){return t`
+import{i as e}from"../../chunks/lit.js";import{a as t}from"../../chunks/lit-html.js";import{LuxenElement as n}from"../../shared/luxen-element.js";import r from"../../shared/styles/host.styles.js";var i=e(`:host{--size:1em;--indicator-color:currentColor;--speed:.75s;width:var(--size);height:var(--size);color:var(--indicator-color);flex:none;display:inline-flex}svg{fill:currentColor;width:100%;height:100%}.spinner{transform-origin:50%;animation:spin var(--speed) linear infinite}@keyframes spin{to{transform:rotate(360deg)}}`),a=class extends n{static{this.styles=[r,i]}render(){return t`
       <svg
         part="base"
         role="progressbar"

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.js';\nimport hostStyles from '../../shared/styles/host.styles.js';\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"}
+{"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.js';\nimport hostStyles from '../../shared/styles/host.styles.js';\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":"oMCKA,IAAM,EAAS,EAAU,oUAAU,CAYtB,EAAb,cAA6B,CAAa,oBACf,CAAC,EAAY,EAAO,CAE7C,QAAkB,CAChB,MAAO,EAAI"}

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

@@ -1,2 +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};
+import{i as e}from"../../chunks/lit.js";import{a as t}from"../../chunks/lit-html.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

@@ -1 +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.js';\nimport { property } from 'lit/decorators.js';\nimport hostStyles from '../../shared/styles/host.styles.js';\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"}
+{"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.js';\nimport { property } from 'lit/decorators.js';\nimport hostStyles from '../../shared/styles/host.styles.js';\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":"wPCMA,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-viewer/stories-viewer.d.ts

@@ -126,6 +126,6 @@ export declare class LuxenStoriesViewer extends LuxenElement {
     pause(): void;
     private _emitAfter;
     private _restoreFocus;
-    render(): import('lit').TemplateResult<1>;
+    render(): import('lit').TemplateResult;
 }
 //# sourceMappingURL=stories-viewer.d.ts.map

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

@@ -1 +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,+BAA+B,CAAC;AAE7D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAepD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
+{"version":3,"file":"stories-viewer.d.ts","sourceRoot":"","sources":["../../../src/html/elements/stories-viewer/stories-viewer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAInF,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAG7D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAepD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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;CA0MhB"}

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

@@ -1,4 +1,4 @@
-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`
+import{i as e}from"../../chunks/lit.js";import{t}from"../../chunks/lit-html.js";import{LuxenElement as n}from"../../shared/luxen-element.js";import{r}from"../../chunks/static-html.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";import{staticTag as u}from"../../static-tag.js";var d=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}`),f=Symbol.for(`luxen-stories-viewer-scroll-lock`);if(typeof document<`u`&&!(f 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,f,{value:e})}var p=class extends n{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,d]}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,n=this.stories[this.index],i=this.index===0,a=this.index>=e-1,o=this._chapterStarts.length?this._chapterStarts:n?.getChapterStarts()??[0],s=u(`icon`),c=u(`spinner`);return r`
       <dialog
         part="dialog"
         aria-label="Stories"
@@ -18,11 +18,11 @@ import{c as e,i as t,n}from"../../chunks/lit.js";import{LuxenElement as r}from".
             aria-valuemin="1"
             aria-valuemax=${o.length||1}
           >
-            ${l(o,(e,n)=>t`
+            ${l(o,(e,t)=>r`
                 <span
                   part="progress-segment"
                   class="progress-segment"
-                  data-state=${n<this.chapter?`past`:n===this.chapter?`active`:`future`}
+                  data-state=${t<this.chapter?`past`:t===this.chapter?`active`:`future`}
                 >
                   <span
                     part="progress-fill"
@@ -38,19 +38,19 @@ import{c as e,i as t,n}from"../../chunks/lit.js";import{LuxenElement as r}from".
             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}
+              ${n?.poster?r`<img
+                      class="header-thumb"
+                      src=${n.poster}
+                      alt=""
+                    />`:t}
+              ${n?.label?r`<div class="header-text">
+                      <div
+                        part="header-label"
+                        class="header-label"
+                      >
+                        ${n.label}
+                      </div>
+                    </div>`:t}
             </slot>
           </header>
 
@@ -67,7 +67,7 @@ import{c as e,i as t,n}from"../../chunks/lit.js";import{LuxenElement as r}from".
                 aria-label="Close"
                 @click=${()=>this.close()}
               >
-                <l-icon name="mdi:close"></l-icon>
+                <${s} name="mdi:close"></${s}>
               </button>
             </slot>
             <button
@@ -78,7 +78,7 @@ import{c as e,i as t,n}from"../../chunks/lit.js";import{LuxenElement as r}from".
               aria-pressed=${this._paused?`true`:`false`}
               @click=${()=>this._paused?this.play():this.pause()}
             >
-              <l-icon name=${this._paused?`mdi:play`:`mdi:pause`}></l-icon>
+              <${s} name=${this._paused?`mdi:play`:`mdi:pause`}></${s}>
             </button>
             <button
               type="button"
@@ -88,7 +88,7 @@ import{c as e,i as t,n}from"../../chunks/lit.js";import{LuxenElement as r}from".
               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>
+              <${s} name=${this.muted?`mdi:volume-off`:`mdi:volume-high`}></${s}>
             </button>
           </div>
 
@@ -100,13 +100,13 @@ import{c as e,i as t,n}from"../../chunks/lit.js";import{LuxenElement as r}from".
             ?muted=${this.muted}
           ></video>
 
-          <l-spinner
+          <${c}
             part="spinner"
             class="spinner"
             aria-label="Loading"
             data-no-gesture
             data-state=${this._loading?`loading`:`idle`}
-          ></l-spinner>
+          ></${c}>
 
           <!-- Tap zones: invisible overlays that translate clicks into previous/next.
                Sit BELOW header / overlay / chevron buttons in z-order, above the video. -->
@@ -137,24 +137,24 @@ import{c as e,i as t,n}from"../../chunks/lit.js";import{LuxenElement as r}from".
           </div>
         </div>
 
-        ${i?n:t`<button
+        ${i?t:r`<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>
+              <${s} name="mdi:chevron-left"></${s}>
             </button>`}
-        ${a?n:t`<button
+        ${a?t:r`<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>
+              <${s} name="mdi:chevron-right"></${s}>
             </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};
+    `}};s([i({type:Boolean,reflect:!0})],p.prototype,`open`,void 0),s([i({type:Number,reflect:!0})],p.prototype,`index`,void 0),s([i({type:Boolean,reflect:!0})],p.prototype,`muted`,void 0),s([i({type:Boolean,reflect:!0})],p.prototype,`loop`,void 0),s([i({type:Boolean,reflect:!0,attribute:`auto-advance`})],p.prototype,`autoAdvance`,void 0),s([i({type:Boolean,reflect:!0,attribute:`light-dismiss`})],p.prototype,`lightDismiss`,void 0),s([i({type:Number,reflect:!0})],p.prototype,`chapter`,void 0),s([a(`dialog`)],p.prototype,`_dialog`,void 0),s([a(`video`)],p.prototype,`_video`,void 0),s([o()],p.prototype,`_paused`,void 0),s([o()],p.prototype,`_loading`,void 0);export{p as LuxenStoriesViewer};
 //# sourceMappingURL=stories-viewer.js.map