luxen-ui 0.3.0 → 0.5.0

package/cdn/elements/input-otp/input-otp.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-otp.js","names":[],"sources":["../../../src/html/elements/input-otp/input-otp.ts"],"sourcesContent":["import { property } from 'lit/decorators.js';\nimport { LuxenElement } from '../../shared/luxen-element';\n\n/**\n * Enhances a child `<input>` with visual digit cells (Stripe-style OTP input).\n *\n * A single hidden `<input>` handles keyboard, paste, and autocomplete.\n * Visual cells are rendered as real DOM elements with individual borders and focus ring.\n *\n * @summary Stripe-style OTP input with visual digit cells over a hidden native input.\n * @customElement l-input-otp\n *\n * @cssproperty --digits - Number of digit boxes (default: 6). Must match input's maxlength.\n * @cssproperty --cell-size - Cell width and height (default: 2.75rem). Font size scales automatically.\n * @cssproperty --cell-gap - Space between cells (default: 0.5rem).\n * @cssproperty --cell-bg-color - Cell background color.\n * @cssproperty --cell-border-color - Cell border color.\n * @cssproperty --cell-border-radius - Cell border-radius.\n * @cssproperty --cell-focus-color - Border + ring color of the active (focused) cell.\n * @cssproperty --cell-focus-ring - `box-shadow` of the active cell ring (defaults to a 1px solid ring; set to `none` to disable).\n */\nexport class LuxenInputOtp extends LuxenElement {\n  override createRenderRoot() {\n    return this;\n  }\n\n  /** Position after which to insert a visual separator (e.g., 3 for a 3-3 grouping). */\n  @property({ type: Number, reflect: true, attribute: 'separator-after' })\n  separatorAfter?: number;\n\n  private _input!: HTMLInputElement;\n  private _container!: HTMLDivElement;\n  private _cells: HTMLDivElement[] = [];\n  private _separatorEl: HTMLSpanElement | null = null;\n  private _initialized = false;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    requestAnimationFrame(() => this._setup());\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._teardown();\n  }\n\n  // --- Setup / Teardown ---\n\n  private _setup() {\n    const input = this.querySelector<HTMLInputElement>('input');\n    if (!input) return;\n\n    this._input = input;\n\n    // Derive digit count from --digits CSS custom property (default 6)\n    const digits = Number(getComputedStyle(this).getPropertyValue('--digits').trim()) || 6;\n\n    // Set sensible defaults — author can still override via HTML attributes\n    const defaults: Record<string, string> = {\n      type: 'text',\n      inputmode: 'numeric',\n      autocomplete: 'one-time-code',\n      maxlength: String(digits),\n      pattern: String.raw`\\d{${digits}}`,\n    };\n    for (const [attr, value] of Object.entries(defaults)) {\n      if (!this._input.hasAttribute(attr)) {\n        this._input.setAttribute(attr, value);\n      }\n    }\n\n    // Build visual cells container\n    this._container = document.createElement('div');\n    this._container.className = 'l-input-otp-cells';\n    this._container.setAttribute('aria-hidden', 'true');\n\n    for (let i = 0; i < digits; i++) {\n      const cell = document.createElement('div');\n      cell.className = 'l-input-otp-cell';\n      cell.appendChild(document.createElement('span'));\n      this._cells.push(cell);\n      this._container.appendChild(cell);\n\n      // Insert separator after the specified position\n      if (this.separatorAfter && i === this.separatorAfter - 1 && i < digits - 1) {\n        this._separatorEl = document.createElement('span');\n        this._separatorEl.className = 'l-input-otp-separator';\n        this._container.appendChild(this._separatorEl);\n      }\n    }\n\n    // Wrap: insert container before input, then move input inside\n    this._input.replaceWith(this._container);\n    this._container.appendChild(this._input);\n    this._initialized = true;\n\n    // Populate cells if input already has a value (e.g. disabled with prefilled value)\n    this._updateCells();\n\n    // Events — focus is deferred so it runs after the click that triggered it\n    // (otherwise selectionStart is stale and the active cell flickers).\n    this._input.addEventListener('input', this._updateCells);\n    this._input.addEventListener('click', this._updateCells);\n    this._input.addEventListener('keyup', this._updateCells);\n    this._input.addEventListener('focus', this._scheduleUpdateCells);\n    this._input.addEventListener('blur', this._clearCells);\n  }\n\n  private _teardown() {\n    if (!this._initialized) return;\n\n    this._input.removeEventListener('input', this._updateCells);\n    this._input.removeEventListener('click', this._updateCells);\n    this._input.removeEventListener('keyup', this._updateCells);\n    this._input.removeEventListener('focus', this._scheduleUpdateCells);\n    this._input.removeEventListener('blur', this._clearCells);\n\n    // Restore input to direct child\n    this._container.replaceWith(this._input);\n    this._separatorEl?.remove();\n\n    this._cells = [];\n    this._separatorEl = null;\n    this._initialized = false;\n  }\n\n  // --- Cell updates ---\n\n  private _updateCells = (): void => {\n    const value = this._input.value;\n    const maxLen = this._input.maxLength || 6;\n    const pos = Math.min(this._input.selectionStart ?? 0, maxLen - 1);\n    const isFocused = document.activeElement === this._input;\n\n    for (let i = 0; i < this._cells.length; i++) {\n      const cell = this._cells[i];\n      const span = cell.firstElementChild as HTMLSpanElement;\n      const char = value[i] ?? '';\n\n      span.textContent = char;\n\n      if (char) {\n        cell.setAttribute('data-filled', '');\n      } else {\n        cell.removeAttribute('data-filled');\n      }\n\n      if (isFocused && i === pos) {\n        cell.setAttribute('data-active', '');\n      } else {\n        cell.removeAttribute('data-active');\n      }\n    }\n  };\n\n  private _clearCells = (): void => {\n    for (const cell of this._cells) {\n      cell.removeAttribute('data-active');\n    }\n  };\n\n  private _scheduleUpdateCells = (): void => {\n    requestAnimationFrame(this._updateCells);\n  };\n}\n"],"mappings":"iHAqBA,IAAa,EAAb,cAAmC,CAAa,2CAWX,EAAE,mBACU,uBACxB,yBA8FY,CACjC,IAAM,EAAQ,KAAK,OAAO,MACpB,EAAS,KAAK,OAAO,WAAa,EAClC,EAAM,KAAK,IAAI,KAAK,OAAO,gBAAkB,EAAG,EAAS,EAAE,CAC3D,EAAY,SAAS,gBAAkB,KAAK,OAElD,IAAK,IAAI,EAAI,EAAG,EAAI,KAAK,OAAO,OAAQ,IAAK,CAC3C,IAAM,EAAO,KAAK,OAAO,GACnB,EAAO,EAAK,kBACZ,EAAO,EAAM,IAAM,GAEzB,EAAK,YAAc,EAEf,EACF,EAAK,aAAa,cAAe,GAAG,CAEpC,EAAK,gBAAgB,cAAc,CAGjC,GAAa,IAAM,EACrB,EAAK,aAAa,cAAe,GAAG,CAEpC,EAAK,gBAAgB,cAAc,wBAKP,CAChC,IAAK,IAAM,KAAQ,KAAK,OACtB,EAAK,gBAAgB,cAAc,gCAII,CACzC,sBAAsB,KAAK,aAAa,EA5I1C,kBAA4B,CAC1B,OAAO,KAaT,mBAA6B,CAC3B,MAAM,mBAAmB,CACzB,0BAA4B,KAAK,QAAQ,CAAC,CAG5C,sBAAgC,CAC9B,MAAM,sBAAsB,CAC5B,KAAK,WAAW,CAKlB,QAAiB,CACf,IAAM,EAAQ,KAAK,cAAgC,QAAQ,CAC3D,GAAI,CAAC,EAAO,OAEZ,KAAK,OAAS,EAGd,IAAM,EAAS,OAAO,iBAAiB,KAAK,CAAC,iBAAiB,WAAW,CAAC,MAAM,CAAC,EAAI,EAG/E,EAAmC,CACvC,KAAM,OACN,UAAW,UACX,aAAc,gBACd,UAAW,OAAO,EAAO,CACzB,QAAS,OAAO,GAAG,MAAM,EAAO,GACjC,CACD,IAAK,GAAM,CAAC,EAAM,KAAU,OAAO,QAAQ,EAAS,CAC7C,KAAK,OAAO,aAAa,EAAK,EACjC,KAAK,OAAO,aAAa,EAAM,EAAM,CAKzC,KAAK,WAAa,SAAS,cAAc,MAAM,CAC/C,KAAK,WAAW,UAAY,oBAC5B,KAAK,WAAW,aAAa,cAAe,OAAO,CAEnD,IAAK,IAAI,EAAI,EAAG,EAAI,EAAQ,IAAK,CAC/B,IAAM,EAAO,SAAS,cAAc,MAAM,CAC1C,EAAK,UAAY,mBACjB,EAAK,YAAY,SAAS,cAAc,OAAO,CAAC,CAChD,KAAK,OAAO,KAAK,EAAK,CACtB,KAAK,WAAW,YAAY,EAAK,CAG7B,KAAK,gBAAkB,IAAM,KAAK,eAAiB,GAAK,EAAI,EAAS,IACvE,KAAK,aAAe,SAAS,cAAc,OAAO,CAClD,KAAK,aAAa,UAAY,wBAC9B,KAAK,WAAW,YAAY,KAAK,aAAa,EAKlD,KAAK,OAAO,YAAY,KAAK,WAAW,CACxC,KAAK,WAAW,YAAY,KAAK,OAAO,CACxC,KAAK,aAAe,GAGpB,KAAK,cAAc,CAInB,KAAK,OAAO,iBAAiB,QAAS,KAAK,aAAa,CACxD,KAAK,OAAO,iBAAiB,QAAS,KAAK,aAAa,CACxD,KAAK,OAAO,iBAAiB,QAAS,KAAK,aAAa,CACxD,KAAK,OAAO,iBAAiB,QAAS,KAAK,qBAAqB,CAChE,KAAK,OAAO,iBAAiB,OAAQ,KAAK,YAAY,CAGxD,WAAoB,CACb,AAcL,KAAK,gBAZL,KAAK,OAAO,oBAAoB,QAAS,KAAK,aAAa,CAC3D,KAAK,OAAO,oBAAoB,QAAS,KAAK,aAAa,CAC3D,KAAK,OAAO,oBAAoB,QAAS,KAAK,aAAa,CAC3D,KAAK,OAAO,oBAAoB,QAAS,KAAK,qBAAqB,CACnE,KAAK,OAAO,oBAAoB,OAAQ,KAAK,YAAY,CAGzD,KAAK,WAAW,YAAY,KAAK,OAAO,CACxC,KAAK,cAAc,QAAQ,CAE3B,KAAK,OAAS,EAAE,CAChB,KAAK,aAAe,KACA,SAhGrB,EAAS,CAAE,KAAM,OAAQ,QAAS,GAAM,UAAW,kBAAmB,CAAC,CAAA,CAAA,EAAA,UAAA,iBAAA,IAAA,GAAA"}
+{"version":3,"file":"input-otp.js","names":[],"sources":["../../../src/html/elements/input-otp/input-otp.ts"],"sourcesContent":["import { property } from 'lit/decorators.js';\nimport { LuxenElement } from '../../shared/luxen-element';\n\n/**\n * Enhances a child `<input>` with visual digit cells (Stripe-style OTP input).\n *\n * A single hidden `<input>` handles keyboard, paste, and autocomplete.\n * Visual cells are rendered as real DOM elements with individual borders and focus ring.\n *\n * @summary Stripe-style OTP input with visual digit cells over a hidden native input.\n * @customElement l-input-otp\n *\n * @cssproperty --digits - Number of digit boxes (default: 6). Must match input's maxlength.\n * @cssproperty --cell-size - Cell width and height (default: 2.75rem). Font size scales automatically.\n * @cssproperty --cell-gap - Space between cells (default: 0.5rem).\n * @cssproperty --cell-bg-color - Cell background color.\n * @cssproperty --cell-border-color - Cell border color.\n * @cssproperty --cell-border-radius - Cell border-radius.\n * @cssproperty --cell-focus-color - Border + ring color of the active (focused) cell.\n * @cssproperty --cell-focus-ring - `box-shadow` of the active cell ring (defaults to a 1px solid ring; set to `none` to disable).\n */\nexport class InputOtp extends LuxenElement {\n  override createRenderRoot() {\n    return this;\n  }\n\n  /** Position after which to insert a visual separator (e.g., 3 for a 3-3 grouping). */\n  @property({ type: Number, reflect: true, attribute: 'separator-after' })\n  separatorAfter?: number;\n\n  private _input!: HTMLInputElement;\n  private _container!: HTMLDivElement;\n  private _cells: HTMLDivElement[] = [];\n  private _separatorEl: HTMLSpanElement | null = null;\n  private _initialized = false;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    requestAnimationFrame(() => this._setup());\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._teardown();\n  }\n\n  // --- Setup / Teardown ---\n\n  private _setup() {\n    const input = this.querySelector<HTMLInputElement>('input');\n    if (!input) return;\n\n    this._input = input;\n\n    // Derive digit count from --digits CSS custom property (default 6)\n    const digits = Number(getComputedStyle(this).getPropertyValue('--digits').trim()) || 6;\n\n    // Set sensible defaults — author can still override via HTML attributes\n    const defaults: Record<string, string> = {\n      type: 'text',\n      inputmode: 'numeric',\n      autocomplete: 'one-time-code',\n      maxlength: String(digits),\n      pattern: String.raw`\\d{${digits}}`,\n    };\n    for (const [attr, value] of Object.entries(defaults)) {\n      if (!this._input.hasAttribute(attr)) {\n        this._input.setAttribute(attr, value);\n      }\n    }\n\n    // Build visual cells container\n    this._container = document.createElement('div');\n    this._container.className = 'l-input-otp-cells';\n    this._container.setAttribute('aria-hidden', 'true');\n\n    for (let i = 0; i < digits; i++) {\n      const cell = document.createElement('div');\n      cell.className = 'l-input-otp-cell';\n      cell.appendChild(document.createElement('span'));\n      this._cells.push(cell);\n      this._container.appendChild(cell);\n\n      // Insert separator after the specified position\n      if (this.separatorAfter && i === this.separatorAfter - 1 && i < digits - 1) {\n        this._separatorEl = document.createElement('span');\n        this._separatorEl.className = 'l-input-otp-separator';\n        this._container.appendChild(this._separatorEl);\n      }\n    }\n\n    // Wrap: insert container before input, then move input inside\n    this._input.replaceWith(this._container);\n    this._container.appendChild(this._input);\n    this._initialized = true;\n\n    // Populate cells if input already has a value (e.g. disabled with prefilled value)\n    this._updateCells();\n\n    // Events — focus is deferred so it runs after the click that triggered it\n    // (otherwise selectionStart is stale and the active cell flickers).\n    this._input.addEventListener('input', this._updateCells);\n    this._input.addEventListener('click', this._updateCells);\n    this._input.addEventListener('keyup', this._updateCells);\n    this._input.addEventListener('focus', this._scheduleUpdateCells);\n    this._input.addEventListener('blur', this._clearCells);\n  }\n\n  private _teardown() {\n    if (!this._initialized) return;\n\n    this._input.removeEventListener('input', this._updateCells);\n    this._input.removeEventListener('click', this._updateCells);\n    this._input.removeEventListener('keyup', this._updateCells);\n    this._input.removeEventListener('focus', this._scheduleUpdateCells);\n    this._input.removeEventListener('blur', this._clearCells);\n\n    // Restore input to direct child\n    this._container.replaceWith(this._input);\n    this._separatorEl?.remove();\n\n    this._cells = [];\n    this._separatorEl = null;\n    this._initialized = false;\n  }\n\n  // --- Cell updates ---\n\n  private _updateCells = (): void => {\n    const value = this._input.value;\n    const maxLen = this._input.maxLength || 6;\n    const pos = Math.min(this._input.selectionStart ?? 0, maxLen - 1);\n    const isFocused = document.activeElement === this._input;\n\n    for (let i = 0; i < this._cells.length; i++) {\n      const cell = this._cells[i];\n      const span = cell.firstElementChild as HTMLSpanElement;\n      const char = value[i] ?? '';\n\n      span.textContent = char;\n\n      if (char) {\n        cell.setAttribute('data-filled', '');\n      } else {\n        cell.removeAttribute('data-filled');\n      }\n\n      if (isFocused && i === pos) {\n        cell.setAttribute('data-active', '');\n      } else {\n        cell.removeAttribute('data-active');\n      }\n    }\n  };\n\n  private _clearCells = (): void => {\n    for (const cell of this._cells) {\n      cell.removeAttribute('data-active');\n    }\n  };\n\n  private _scheduleUpdateCells = (): void => {\n    requestAnimationFrame(this._updateCells);\n  };\n}\n"],"mappings":"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"}

package/cdn/elements/input-stepper/index.d.ts

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

package/cdn/elements/input-stepper/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/input-stepper/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACpD,cAAc,iBAAiB,CAAC;AAGhC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,iBAAiB,CAAC;KACtC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/input-stepper/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,cAAc,iBAAiB,CAAC;AAGhC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,YAAY,CAAC;KACjC;CACF"}

package/cdn/elements/input-stepper/index.js

@@ -1,2 +1,2 @@
-import{define as e}from"../../define.js";import{LuxenInputStepper as t}from"./input-stepper.js";e(`input-stepper`,t);
+import{define as e}from"../../define.js";import{InputStepper as t}from"./input-stepper.js";e(`input-stepper`,t);
 //# sourceMappingURL=index.js.map

package/cdn/elements/input-stepper/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/html/elements/input-stepper/index.ts"],"sourcesContent":["import { define } from '../../define';\nimport { LuxenInputStepper } from './input-stepper';\nexport * from './input-stepper';\ndefine('input-stepper', LuxenInputStepper);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'l-input-stepper': LuxenInputStepper;\n  }\n}\n"],"mappings":"gGAGA,EAAO,gBAAiB,EAAkB"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/html/elements/input-stepper/index.ts"],"sourcesContent":["import { define } from '../../define';\nimport { InputStepper } from './input-stepper';\nexport * from './input-stepper';\ndefine('input-stepper', InputStepper);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'l-input-stepper': InputStepper;\n  }\n}\n"],"mappings":"2FAGA,EAAO,gBAAiB,EAAa"}

package/cdn/elements/input-stepper/input-stepper.d.ts

@@ -18,7 +18,7 @@ export type InputStepperSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
  * @cssproperty --border-color - Border color of the stepper container (default appearance) and of each button (rounded appearance). Defaults to `--l-color-border`.
  * @cssproperty --border-radius - Border radius of the stepper container (default appearance). Defaults to `--radius-md`.
  */
-export declare class LuxenInputStepper extends LuxenElement {
+export declare class InputStepper extends LuxenElement {
     createRenderRoot(): this;
     /** Minimum allowed value. Falls back to the input's `min` attribute. */
     min?: number;

package/cdn/elements/input-stepper/input-stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-stepper.d.ts","sourceRoot":"","sources":["../../../src/html/elements/input-stepper/input-stepper.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEhE;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,iBAAkB,SAAQ,YAAY;IACxC,gBAAgB;IAIzB,wEAAwE;IAExE,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,wEAAwE;IAExE,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,kEAAkE;IAElE,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,oBAAoB;IAEpB,IAAI,EAAE,gBAAgB,CAAQ;IAE9B,iDAAiD;IAEjD,UAAU,UAAS;IAEnB,0CAA0C;IAE1C,aAAa,SAAkB;IAE/B,0CAA0C;IAE1C,aAAa,SAAiB;IAE9B,OAAO,CAAC,MAAM,CAAiC;IAC/C,OAAO,CAAC,aAAa,CAAkC;IACvD,OAAO,CAAC,aAAa,CAAkC;IACvD,OAAO,CAAC,aAAa,CAA+B;IACpD,OAAO,CAAC,aAAa,CAA+B;IACpD,OAAO,CAAC,MAAM,CAA+B;IAC7C,OAAO,CAAC,SAAS,CAAiC;IAClD,OAAO,CAAC,eAAe,CAAS;IAEvB,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAS9C,sCAAsC;IACtC,SAAS;IAOT,sCAAsC;IACtC,SAAS;IAST,OAAO,CAAC,MAAM;IAsCd,OAAO,CAAC,SAAS;IAwBjB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,oBAAoB;IAgB5B,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,YAAY;IAmBpB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,YAAY,CAA0B;IAC9C,OAAO,CAAC,YAAY,CAA0B;IAE9C,OAAO,CAAC,cAAc,CAWpB;CACH"}
+{"version":3,"file":"input-stepper.d.ts","sourceRoot":"","sources":["../../../src/html/elements/input-stepper/input-stepper.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEhE;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,YAAa,SAAQ,YAAY;IACnC,gBAAgB;IAIzB,wEAAwE;IAExE,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,wEAAwE;IAExE,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,kEAAkE;IAElE,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,oBAAoB;IAEpB,IAAI,EAAE,gBAAgB,CAAQ;IAE9B,iDAAiD;IAEjD,UAAU,UAAS;IAEnB,0CAA0C;IAE1C,aAAa,SAAkB;IAE/B,0CAA0C;IAE1C,aAAa,SAAiB;IAE9B,OAAO,CAAC,MAAM,CAAiC;IAC/C,OAAO,CAAC,aAAa,CAAkC;IACvD,OAAO,CAAC,aAAa,CAAkC;IACvD,OAAO,CAAC,aAAa,CAA+B;IACpD,OAAO,CAAC,aAAa,CAA+B;IACpD,OAAO,CAAC,MAAM,CAA+B;IAC7C,OAAO,CAAC,SAAS,CAAiC;IAClD,OAAO,CAAC,eAAe,CAAS;IAEvB,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAS9C,sCAAsC;IACtC,SAAS;IAOT,sCAAsC;IACtC,SAAS;IAST,OAAO,CAAC,MAAM;IAsCd,OAAO,CAAC,SAAS;IAwBjB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,oBAAoB;IAgB5B,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,YAAY;IAmBpB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,YAAY,CAA0B;IAC9C,OAAO,CAAC,YAAY,CAA0B;IAE9C,OAAO,CAAC,cAAc,CAWpB;CACH"}

package/cdn/elements/input-stepper/input-stepper.js

@@ -1,2 +1,2 @@
-import{LuxenElement as e}from"../../shared/luxen-element.js";import{a as t,t as n}from"../../chunks/decorate.js";var r=class extends e{constructor(...e){super(...e),this.size=`md`,this.withRoller=!1,this.decrementIcon=`lucide:minus`,this.incrementIcon=`lucide:plus`,this._input=null,this._decrementBtn=null,this._incrementBtn=null,this._valueWrapper=null,this._trackDisplay=null,this._track=null,this._observer=null,this._skipTransition=!1,this._onDecrement=()=>this.decrement(),this._onIncrement=()=>this.increment(),this._onInputChange=()=>{if(!this._input)return;let{min:e,max:t}=this._getConstraints(),n=Math.min(Math.max(this._input.valueAsNumber,e),t);this._input.value=String(n),this._skipTransition=!0,this._updateButtonStates(),this._updateTrack(),this.emit(`change`,{detail:{value:n}})}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),requestAnimationFrame(()=>this._setup())}disconnectedCallback(){super.disconnectedCallback(),this._teardown()}updated(e){this._input&&(e.has(`min`)||e.has(`max`)||e.has(`step`))&&(this._syncConstraints(),this._updateButtonStates())}decrement(){if(!this._input)return;let{min:e,step:t}=this._getConstraints(),n=Math.max(this._input.valueAsNumber-t,e);this._applyValue(n)}increment(){if(!this._input)return;let{max:e,step:t}=this._getConstraints(),n=Math.min(this._input.valueAsNumber+t,e);this._applyValue(n)}_setup(){this._input=this.querySelector(`input[type="number"]`),this._input&&(this._input.inputMode=`numeric`,this._valueWrapper=document.createElement(`div`),this._valueWrapper.className=`l-input-stepper-value`,this._input.replaceWith(this._valueWrapper),this._valueWrapper.appendChild(this._input),this.withRoller&&this._buildTrack(),this._decrementBtn=this._createButton(this.decrementIcon,`Decrease value`),this._incrementBtn=this._createButton(this.incrementIcon,`Increase value`),this._valueWrapper.before(this._decrementBtn),this._valueWrapper.after(this._incrementBtn),this._decrementBtn.addEventListener(`click`,this._onDecrement),this._incrementBtn.addEventListener(`click`,this._onIncrement),this._input.addEventListener(`change`,this._onInputChange),this._observer=new MutationObserver(()=>this._updateButtonStates()),this._observer.observe(this._input,{attributes:!0,attributeFilter:[`disabled`]}),this._syncConstraints(),this._updateButtonStates(),this._updateTrack())}_teardown(){this._decrementBtn?.removeEventListener(`click`,this._onDecrement),this._incrementBtn?.removeEventListener(`click`,this._onIncrement),this._input?.removeEventListener(`change`,this._onInputChange),this._observer?.disconnect(),this._input&&this._valueWrapper&&this._valueWrapper.replaceWith(this._input),this._decrementBtn?.remove(),this._incrementBtn?.remove(),this._input=null,this._decrementBtn=null,this._incrementBtn=null,this._valueWrapper=null,this._trackDisplay=null,this._track=null,this._observer=null}_createButton(e,t){let n=document.createElement(`button`);return n.type=`button`,n.setAttribute(`aria-label`,t),n.innerHTML=`<l-icon name="${e}"></l-icon>`,n}_buildTrack(){this._valueWrapper&&(this._trackDisplay=document.createElement(`div`),this._trackDisplay.className=`l-input-stepper-track-display`,this._track=document.createElement(`div`),this._track.className=`l-input-stepper-track`,this._track.setAttribute(`aria-hidden`,`true`),this._rebuildTrackNumbers(),this._trackDisplay.appendChild(this._track),this._valueWrapper.appendChild(this._trackDisplay))}_rebuildTrackNumbers(){if(!this._track)return;let{min:e,max:t,step:n}=this._getConstraints(),r=Number.isFinite(t)?t:(this._input?.valueAsNumber??0)+100;this._track.innerHTML=``;for(let t=e;t<=r;t+=n){let e=document.createElement(`div`);e.textContent=String(t),this._track.appendChild(e)}}_getConstraints(){return{min:this.min??(Number(this._input?.getAttribute(`min`))||0),max:this.max??(this._input?.hasAttribute(`max`)?Number(this._input.getAttribute(`max`)):1/0),step:this.step??(Number(this._input?.getAttribute(`step`))||1)}}_syncConstraints(){if(!this._input)return;let{min:e,max:t,step:n}=this._getConstraints();this._input.min=String(e),Number.isFinite(t)&&(this._input.max=String(t)),this._input.step=String(n),this._rebuildTrackNumbers(),this._updateTrack()}_applyValue(e){this._input&&(this._input.value=String(e),this._updateButtonStates(),this._updateTrack(),this.emit(`change`,{detail:{value:e}}))}_updateTrack(){if(!this._track)return;let{min:e,step:t}=this._getConstraints(),n=(e-(this._input?.valueAsNumber??e))/t;this._track.style.translate=`0 calc(${n} * var(--_button-size))`,this._skipTransition&&=(this._track.style.transition=`none`,this._track.offsetHeight,this._track.style.transition=``,!1)}_updateButtonStates(){if(!this._input||!this._decrementBtn||!this._incrementBtn)return;let{min:e,max:t}=this._getConstraints(),n=this._input.valueAsNumber,r=this._input.disabled;this._decrementBtn.disabled=r||n<=e,this._incrementBtn.disabled=r||n>=t}};n([t({type:Number})],r.prototype,`min`,void 0),n([t({type:Number})],r.prototype,`max`,void 0),n([t({type:Number})],r.prototype,`step`,void 0),n([t({reflect:!0})],r.prototype,`size`,void 0),n([t({type:Boolean,reflect:!0,attribute:`with-roller`})],r.prototype,`withRoller`,void 0),n([t({attribute:`decrement-icon`})],r.prototype,`decrementIcon`,void 0),n([t({attribute:`increment-icon`})],r.prototype,`incrementIcon`,void 0);export{r as LuxenInputStepper};
+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.size=`md`,this.withRoller=!1,this.decrementIcon=`lucide:minus`,this.incrementIcon=`lucide:plus`,this._input=null,this._decrementBtn=null,this._incrementBtn=null,this._valueWrapper=null,this._trackDisplay=null,this._track=null,this._observer=null,this._skipTransition=!1,this._onDecrement=()=>this.decrement(),this._onIncrement=()=>this.increment(),this._onInputChange=()=>{if(!this._input)return;let{min:e,max:t}=this._getConstraints(),n=Math.min(Math.max(this._input.valueAsNumber,e),t);this._input.value=String(n),this._skipTransition=!0,this._updateButtonStates(),this._updateTrack(),this.emit(`change`,{detail:{value:n}})}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),requestAnimationFrame(()=>this._setup())}disconnectedCallback(){super.disconnectedCallback(),this._teardown()}updated(e){this._input&&(e.has(`min`)||e.has(`max`)||e.has(`step`))&&(this._syncConstraints(),this._updateButtonStates())}decrement(){if(!this._input)return;let{min:e,step:t}=this._getConstraints(),n=Math.max(this._input.valueAsNumber-t,e);this._applyValue(n)}increment(){if(!this._input)return;let{max:e,step:t}=this._getConstraints(),n=Math.min(this._input.valueAsNumber+t,e);this._applyValue(n)}_setup(){this._input=this.querySelector(`input[type="number"]`),this._input&&(this._input.inputMode=`numeric`,this._valueWrapper=document.createElement(`div`),this._valueWrapper.className=`l-input-stepper-value`,this._input.replaceWith(this._valueWrapper),this._valueWrapper.appendChild(this._input),this.withRoller&&this._buildTrack(),this._decrementBtn=this._createButton(this.decrementIcon,`Decrease value`),this._incrementBtn=this._createButton(this.incrementIcon,`Increase value`),this._valueWrapper.before(this._decrementBtn),this._valueWrapper.after(this._incrementBtn),this._decrementBtn.addEventListener(`click`,this._onDecrement),this._incrementBtn.addEventListener(`click`,this._onIncrement),this._input.addEventListener(`change`,this._onInputChange),this._observer=new MutationObserver(()=>this._updateButtonStates()),this._observer.observe(this._input,{attributes:!0,attributeFilter:[`disabled`]}),this._syncConstraints(),this._updateButtonStates(),this._updateTrack())}_teardown(){this._decrementBtn?.removeEventListener(`click`,this._onDecrement),this._incrementBtn?.removeEventListener(`click`,this._onIncrement),this._input?.removeEventListener(`change`,this._onInputChange),this._observer?.disconnect(),this._input&&this._valueWrapper&&this._valueWrapper.replaceWith(this._input),this._decrementBtn?.remove(),this._incrementBtn?.remove(),this._input=null,this._decrementBtn=null,this._incrementBtn=null,this._valueWrapper=null,this._trackDisplay=null,this._track=null,this._observer=null}_createButton(e,t){let n=document.createElement(`button`);return n.type=`button`,n.setAttribute(`aria-label`,t),n.innerHTML=`<l-icon name="${e}"></l-icon>`,n}_buildTrack(){this._valueWrapper&&(this._trackDisplay=document.createElement(`div`),this._trackDisplay.className=`l-input-stepper-track-display`,this._track=document.createElement(`div`),this._track.className=`l-input-stepper-track`,this._track.setAttribute(`aria-hidden`,`true`),this._rebuildTrackNumbers(),this._trackDisplay.appendChild(this._track),this._valueWrapper.appendChild(this._trackDisplay))}_rebuildTrackNumbers(){if(!this._track)return;let{min:e,max:t,step:n}=this._getConstraints(),r=Number.isFinite(t)?t:(this._input?.valueAsNumber??0)+100;this._track.innerHTML=``;for(let t=e;t<=r;t+=n){let e=document.createElement(`div`);e.textContent=String(t),this._track.appendChild(e)}}_getConstraints(){return{min:this.min??(Number(this._input?.getAttribute(`min`))||0),max:this.max??(this._input?.hasAttribute(`max`)?Number(this._input.getAttribute(`max`)):1/0),step:this.step??(Number(this._input?.getAttribute(`step`))||1)}}_syncConstraints(){if(!this._input)return;let{min:e,max:t,step:n}=this._getConstraints();this._input.min=String(e),Number.isFinite(t)&&(this._input.max=String(t)),this._input.step=String(n),this._rebuildTrackNumbers(),this._updateTrack()}_applyValue(e){this._input&&(this._input.value=String(e),this._updateButtonStates(),this._updateTrack(),this.emit(`change`,{detail:{value:e}}))}_updateTrack(){if(!this._track)return;let{min:e,step:t}=this._getConstraints(),n=(e-(this._input?.valueAsNumber??e))/t;this._track.style.translate=`0 calc(${n} * var(--_button-size))`,this._skipTransition&&=(this._track.style.transition=`none`,this._track.offsetHeight,this._track.style.transition=``,!1)}_updateButtonStates(){if(!this._input||!this._decrementBtn||!this._incrementBtn)return;let{min:e,max:t}=this._getConstraints(),n=this._input.valueAsNumber,r=this._input.disabled;this._decrementBtn.disabled=r||n<=e,this._incrementBtn.disabled=r||n>=t}};n([t({type:Number})],r.prototype,`min`,void 0),n([t({type:Number})],r.prototype,`max`,void 0),n([t({type:Number})],r.prototype,`step`,void 0),n([t({reflect:!0})],r.prototype,`size`,void 0),n([t({type:Boolean,reflect:!0,attribute:`with-roller`})],r.prototype,`withRoller`,void 0),n([t({attribute:`decrement-icon`})],r.prototype,`decrementIcon`,void 0),n([t({attribute:`increment-icon`})],r.prototype,`incrementIcon`,void 0);export{r as InputStepper};
 //# sourceMappingURL=input-stepper.js.map

package/cdn/elements/input-stepper/input-stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-stepper.js","names":[],"sources":["../../../src/html/elements/input-stepper/input-stepper.ts"],"sourcesContent":["import { property } from 'lit/decorators.js';\nimport { LuxenElement } from '../../shared/luxen-element';\n\nexport type InputStepperSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/**\n * A stepper control that enhances a native `<input type=\"number\">` with\n * decrement/increment buttons and an optional animated number track.\n *\n * @link https://www.nngroup.com/articles/input-steppers/\n *\n * @example\n * ```html\n * <l-input-stepper>\n *   <input type=\"number\" min=\"0\" max=\"10\" value=\"5\" />\n * </l-input-stepper>\n * ```\n *\n * @event change - Fired when the value changes. Detail: `{ value: number }`.\n *\n * @cssproperty --border-color - Border color of the stepper container (default appearance) and of each button (rounded appearance). Defaults to `--l-color-border`.\n * @cssproperty --border-radius - Border radius of the stepper container (default appearance). Defaults to `--radius-md`.\n */\nexport class LuxenInputStepper extends LuxenElement {\n  override createRenderRoot() {\n    return this;\n  }\n\n  /** Minimum allowed value. Falls back to the input's `min` attribute. */\n  @property({ type: Number })\n  min?: number;\n\n  /** Maximum allowed value. Falls back to the input's `max` attribute. */\n  @property({ type: Number })\n  max?: number;\n\n  /** Step increment. Falls back to the input's `step` attribute. */\n  @property({ type: Number })\n  step?: number;\n\n  /** Control size. */\n  @property({ reflect: true })\n  size: InputStepperSize = 'md';\n\n  /** Enable the animated number roller overlay. */\n  @property({ type: Boolean, reflect: true, attribute: 'with-roller' })\n  withRoller = false;\n\n  /** Icon name for the decrement button. */\n  @property({ attribute: 'decrement-icon' })\n  decrementIcon = 'lucide:minus';\n\n  /** Icon name for the increment button. */\n  @property({ attribute: 'increment-icon' })\n  incrementIcon = 'lucide:plus';\n\n  private _input: HTMLInputElement | null = null;\n  private _decrementBtn: HTMLButtonElement | null = null;\n  private _incrementBtn: HTMLButtonElement | null = null;\n  private _valueWrapper: HTMLDivElement | null = null;\n  private _trackDisplay: HTMLDivElement | null = null;\n  private _track: HTMLDivElement | null = null;\n  private _observer: MutationObserver | null = null;\n  private _skipTransition = false;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    requestAnimationFrame(() => this._setup());\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._teardown();\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (!this._input) return;\n\n    if (changed.has('min') || changed.has('max') || changed.has('step')) {\n      this._syncConstraints();\n      this._updateButtonStates();\n    }\n  }\n\n  /** Decrease the value by one step. */\n  decrement() {\n    if (!this._input) return;\n    const { min, step } = this._getConstraints();\n    const newVal = Math.max(this._input.valueAsNumber - step, min);\n    this._applyValue(newVal);\n  }\n\n  /** Increase the value by one step. */\n  increment() {\n    if (!this._input) return;\n    const { max, step } = this._getConstraints();\n    const newVal = Math.min(this._input.valueAsNumber + step, max);\n    this._applyValue(newVal);\n  }\n\n  // --- Setup / Teardown ---\n\n  private _setup() {\n    this._input = this.querySelector('input[type=\"number\"]');\n    if (!this._input) return;\n\n    this._input.inputMode = 'numeric';\n\n    // Wrap input in value container\n    this._valueWrapper = document.createElement('div');\n    this._valueWrapper.className = 'l-input-stepper-value';\n    this._input.replaceWith(this._valueWrapper);\n    this._valueWrapper.appendChild(this._input);\n\n    // Inject track overlay\n    if (this.withRoller) {\n      this._buildTrack();\n    }\n\n    // Create buttons\n    this._decrementBtn = this._createButton(this.decrementIcon, 'Decrease value');\n    this._incrementBtn = this._createButton(this.incrementIcon, 'Increase value');\n\n    this._valueWrapper.before(this._decrementBtn);\n    this._valueWrapper.after(this._incrementBtn);\n\n    // Events\n    this._decrementBtn.addEventListener('click', this._onDecrement);\n    this._incrementBtn.addEventListener('click', this._onIncrement);\n    this._input.addEventListener('change', this._onInputChange);\n\n    // Observe disabled attribute on input\n    this._observer = new MutationObserver(() => this._updateButtonStates());\n    this._observer.observe(this._input, { attributes: true, attributeFilter: ['disabled'] });\n\n    this._syncConstraints();\n    this._updateButtonStates();\n    this._updateTrack();\n  }\n\n  private _teardown() {\n    this._decrementBtn?.removeEventListener('click', this._onDecrement);\n    this._incrementBtn?.removeEventListener('click', this._onIncrement);\n    this._input?.removeEventListener('change', this._onInputChange);\n    this._observer?.disconnect();\n\n    // Restore input to direct child\n    if (this._input && this._valueWrapper) {\n      this._valueWrapper.replaceWith(this._input);\n    }\n    this._decrementBtn?.remove();\n    this._incrementBtn?.remove();\n\n    this._input = null;\n    this._decrementBtn = null;\n    this._incrementBtn = null;\n    this._valueWrapper = null;\n    this._trackDisplay = null;\n    this._track = null;\n    this._observer = null;\n  }\n\n  // --- DOM helpers ---\n\n  private _createButton(icon: string, label: string): HTMLButtonElement {\n    const btn = document.createElement('button');\n    btn.type = 'button';\n    btn.setAttribute('aria-label', label);\n    btn.innerHTML = `<l-icon name=\"${icon}\"></l-icon>`;\n    return btn;\n  }\n\n  private _buildTrack() {\n    if (!this._valueWrapper) return;\n\n    this._trackDisplay = document.createElement('div');\n    this._trackDisplay.className = 'l-input-stepper-track-display';\n\n    this._track = document.createElement('div');\n    this._track.className = 'l-input-stepper-track';\n    this._track.setAttribute('aria-hidden', 'true');\n\n    this._rebuildTrackNumbers();\n    this._trackDisplay.appendChild(this._track);\n    this._valueWrapper.appendChild(this._trackDisplay);\n  }\n\n  private _rebuildTrackNumbers() {\n    if (!this._track) return;\n\n    const { min, max, step } = this._getConstraints();\n    const effectiveMax = Number.isFinite(max) ? max : (this._input?.valueAsNumber ?? 0) + 100;\n\n    this._track.innerHTML = '';\n    for (let i = min; i <= effectiveMax; i += step) {\n      const div = document.createElement('div');\n      div.textContent = String(i);\n      this._track.appendChild(div);\n    }\n  }\n\n  // --- Constraints ---\n\n  private _getConstraints() {\n    const min = this.min ?? (Number(this._input?.getAttribute('min')) || 0);\n    const max =\n      this.max ??\n      (this._input?.hasAttribute('max') ? Number(this._input.getAttribute('max')) : Infinity);\n    const step = this.step ?? (Number(this._input?.getAttribute('step')) || 1);\n    return { min, max, step };\n  }\n\n  private _syncConstraints() {\n    if (!this._input) return;\n    const { min, max, step } = this._getConstraints();\n\n    this._input.min = String(min);\n    if (Number.isFinite(max)) this._input.max = String(max);\n    this._input.step = String(step);\n\n    this._rebuildTrackNumbers();\n    this._updateTrack();\n  }\n\n  // --- Value ---\n\n  private _applyValue(val: number) {\n    if (!this._input) return;\n    this._input.value = String(val);\n    this._updateButtonStates();\n    this._updateTrack();\n    this.emit('change', { detail: { value: val } });\n  }\n\n  // --- Track ---\n\n  private _updateTrack() {\n    if (!this._track) return;\n\n    const { min, step } = this._getConstraints();\n    const value = this._input?.valueAsNumber ?? min;\n    const offset = (min - value) / step;\n\n    this._track.style.translate = `0 calc(${offset} * var(--_button-size))`;\n\n    if (this._skipTransition) {\n      this._track.style.transition = 'none';\n      void this._track.offsetHeight;\n      this._track.style.transition = '';\n      this._skipTransition = false;\n    }\n  }\n\n  // --- Button states ---\n\n  private _updateButtonStates() {\n    if (!this._input || !this._decrementBtn || !this._incrementBtn) return;\n\n    const { min, max } = this._getConstraints();\n    const value = this._input.valueAsNumber;\n    const disabled = this._input.disabled;\n\n    this._decrementBtn.disabled = disabled || value <= min;\n    this._incrementBtn.disabled = disabled || value >= max;\n  }\n\n  // --- Event handlers ---\n\n  private _onDecrement = () => this.decrement();\n  private _onIncrement = () => this.increment();\n\n  private _onInputChange = () => {\n    if (!this._input) return;\n\n    const { min, max } = this._getConstraints();\n    const clamped = Math.min(Math.max(this._input.valueAsNumber, min), max);\n    this._input.value = String(clamped);\n\n    this._skipTransition = true;\n    this._updateButtonStates();\n    this._updateTrack();\n    this.emit('change', { detail: { value: clamped } });\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"input-stepper.js","names":[],"sources":["../../../src/html/elements/input-stepper/input-stepper.ts"],"sourcesContent":["import { property } from 'lit/decorators.js';\nimport { LuxenElement } from '../../shared/luxen-element';\n\nexport type InputStepperSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/**\n * A stepper control that enhances a native `<input type=\"number\">` with\n * decrement/increment buttons and an optional animated number track.\n *\n * @link https://www.nngroup.com/articles/input-steppers/\n *\n * @example\n * ```html\n * <l-input-stepper>\n *   <input type=\"number\" min=\"0\" max=\"10\" value=\"5\" />\n * </l-input-stepper>\n * ```\n *\n * @event change - Fired when the value changes. Detail: `{ value: number }`.\n *\n * @cssproperty --border-color - Border color of the stepper container (default appearance) and of each button (rounded appearance). Defaults to `--l-color-border`.\n * @cssproperty --border-radius - Border radius of the stepper container (default appearance). Defaults to `--radius-md`.\n */\nexport class InputStepper extends LuxenElement {\n  override createRenderRoot() {\n    return this;\n  }\n\n  /** Minimum allowed value. Falls back to the input's `min` attribute. */\n  @property({ type: Number })\n  min?: number;\n\n  /** Maximum allowed value. Falls back to the input's `max` attribute. */\n  @property({ type: Number })\n  max?: number;\n\n  /** Step increment. Falls back to the input's `step` attribute. */\n  @property({ type: Number })\n  step?: number;\n\n  /** Control size. */\n  @property({ reflect: true })\n  size: InputStepperSize = 'md';\n\n  /** Enable the animated number roller overlay. */\n  @property({ type: Boolean, reflect: true, attribute: 'with-roller' })\n  withRoller = false;\n\n  /** Icon name for the decrement button. */\n  @property({ attribute: 'decrement-icon' })\n  decrementIcon = 'lucide:minus';\n\n  /** Icon name for the increment button. */\n  @property({ attribute: 'increment-icon' })\n  incrementIcon = 'lucide:plus';\n\n  private _input: HTMLInputElement | null = null;\n  private _decrementBtn: HTMLButtonElement | null = null;\n  private _incrementBtn: HTMLButtonElement | null = null;\n  private _valueWrapper: HTMLDivElement | null = null;\n  private _trackDisplay: HTMLDivElement | null = null;\n  private _track: HTMLDivElement | null = null;\n  private _observer: MutationObserver | null = null;\n  private _skipTransition = false;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    requestAnimationFrame(() => this._setup());\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._teardown();\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (!this._input) return;\n\n    if (changed.has('min') || changed.has('max') || changed.has('step')) {\n      this._syncConstraints();\n      this._updateButtonStates();\n    }\n  }\n\n  /** Decrease the value by one step. */\n  decrement() {\n    if (!this._input) return;\n    const { min, step } = this._getConstraints();\n    const newVal = Math.max(this._input.valueAsNumber - step, min);\n    this._applyValue(newVal);\n  }\n\n  /** Increase the value by one step. */\n  increment() {\n    if (!this._input) return;\n    const { max, step } = this._getConstraints();\n    const newVal = Math.min(this._input.valueAsNumber + step, max);\n    this._applyValue(newVal);\n  }\n\n  // --- Setup / Teardown ---\n\n  private _setup() {\n    this._input = this.querySelector('input[type=\"number\"]');\n    if (!this._input) return;\n\n    this._input.inputMode = 'numeric';\n\n    // Wrap input in value container\n    this._valueWrapper = document.createElement('div');\n    this._valueWrapper.className = 'l-input-stepper-value';\n    this._input.replaceWith(this._valueWrapper);\n    this._valueWrapper.appendChild(this._input);\n\n    // Inject track overlay\n    if (this.withRoller) {\n      this._buildTrack();\n    }\n\n    // Create buttons\n    this._decrementBtn = this._createButton(this.decrementIcon, 'Decrease value');\n    this._incrementBtn = this._createButton(this.incrementIcon, 'Increase value');\n\n    this._valueWrapper.before(this._decrementBtn);\n    this._valueWrapper.after(this._incrementBtn);\n\n    // Events\n    this._decrementBtn.addEventListener('click', this._onDecrement);\n    this._incrementBtn.addEventListener('click', this._onIncrement);\n    this._input.addEventListener('change', this._onInputChange);\n\n    // Observe disabled attribute on input\n    this._observer = new MutationObserver(() => this._updateButtonStates());\n    this._observer.observe(this._input, { attributes: true, attributeFilter: ['disabled'] });\n\n    this._syncConstraints();\n    this._updateButtonStates();\n    this._updateTrack();\n  }\n\n  private _teardown() {\n    this._decrementBtn?.removeEventListener('click', this._onDecrement);\n    this._incrementBtn?.removeEventListener('click', this._onIncrement);\n    this._input?.removeEventListener('change', this._onInputChange);\n    this._observer?.disconnect();\n\n    // Restore input to direct child\n    if (this._input && this._valueWrapper) {\n      this._valueWrapper.replaceWith(this._input);\n    }\n    this._decrementBtn?.remove();\n    this._incrementBtn?.remove();\n\n    this._input = null;\n    this._decrementBtn = null;\n    this._incrementBtn = null;\n    this._valueWrapper = null;\n    this._trackDisplay = null;\n    this._track = null;\n    this._observer = null;\n  }\n\n  // --- DOM helpers ---\n\n  private _createButton(icon: string, label: string): HTMLButtonElement {\n    const btn = document.createElement('button');\n    btn.type = 'button';\n    btn.setAttribute('aria-label', label);\n    btn.innerHTML = `<l-icon name=\"${icon}\"></l-icon>`;\n    return btn;\n  }\n\n  private _buildTrack() {\n    if (!this._valueWrapper) return;\n\n    this._trackDisplay = document.createElement('div');\n    this._trackDisplay.className = 'l-input-stepper-track-display';\n\n    this._track = document.createElement('div');\n    this._track.className = 'l-input-stepper-track';\n    this._track.setAttribute('aria-hidden', 'true');\n\n    this._rebuildTrackNumbers();\n    this._trackDisplay.appendChild(this._track);\n    this._valueWrapper.appendChild(this._trackDisplay);\n  }\n\n  private _rebuildTrackNumbers() {\n    if (!this._track) return;\n\n    const { min, max, step } = this._getConstraints();\n    const effectiveMax = Number.isFinite(max) ? max : (this._input?.valueAsNumber ?? 0) + 100;\n\n    this._track.innerHTML = '';\n    for (let i = min; i <= effectiveMax; i += step) {\n      const div = document.createElement('div');\n      div.textContent = String(i);\n      this._track.appendChild(div);\n    }\n  }\n\n  // --- Constraints ---\n\n  private _getConstraints() {\n    const min = this.min ?? (Number(this._input?.getAttribute('min')) || 0);\n    const max =\n      this.max ??\n      (this._input?.hasAttribute('max') ? Number(this._input.getAttribute('max')) : Infinity);\n    const step = this.step ?? (Number(this._input?.getAttribute('step')) || 1);\n    return { min, max, step };\n  }\n\n  private _syncConstraints() {\n    if (!this._input) return;\n    const { min, max, step } = this._getConstraints();\n\n    this._input.min = String(min);\n    if (Number.isFinite(max)) this._input.max = String(max);\n    this._input.step = String(step);\n\n    this._rebuildTrackNumbers();\n    this._updateTrack();\n  }\n\n  // --- Value ---\n\n  private _applyValue(val: number) {\n    if (!this._input) return;\n    this._input.value = String(val);\n    this._updateButtonStates();\n    this._updateTrack();\n    this.emit('change', { detail: { value: val } });\n  }\n\n  // --- Track ---\n\n  private _updateTrack() {\n    if (!this._track) return;\n\n    const { min, step } = this._getConstraints();\n    const value = this._input?.valueAsNumber ?? min;\n    const offset = (min - value) / step;\n\n    this._track.style.translate = `0 calc(${offset} * var(--_button-size))`;\n\n    if (this._skipTransition) {\n      this._track.style.transition = 'none';\n      void this._track.offsetHeight;\n      this._track.style.transition = '';\n      this._skipTransition = false;\n    }\n  }\n\n  // --- Button states ---\n\n  private _updateButtonStates() {\n    if (!this._input || !this._decrementBtn || !this._incrementBtn) return;\n\n    const { min, max } = this._getConstraints();\n    const value = this._input.valueAsNumber;\n    const disabled = this._input.disabled;\n\n    this._decrementBtn.disabled = disabled || value <= min;\n    this._incrementBtn.disabled = disabled || value >= max;\n  }\n\n  // --- Event handlers ---\n\n  private _onDecrement = () => this.decrement();\n  private _onIncrement = () => this.increment();\n\n  private _onInputChange = () => {\n    if (!this._input) return;\n\n    const { min, max } = this._getConstraints();\n    const clamped = Math.min(Math.max(this._input.valueAsNumber, min), max);\n    this._input.value = String(clamped);\n\n    this._skipTransition = true;\n    this._updateButtonStates();\n    this._updateTrack();\n    this.emit('change', { detail: { value: clamped } });\n  };\n}\n"],"mappings":"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"}

package/cdn/elements/popover/index.d.ts

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

package/cdn/elements/popover/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/popover/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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/popover/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,cAAc,WAAW,CAAC;AAG1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,OAAO,CAAC;KACtB;CACF"}

package/cdn/elements/popover/index.js

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

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

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

package/cdn/elements/popover/popover.d.ts

@@ -19,7 +19,7 @@ import { Placement } from '@floating-ui/dom';
  * @cssproperty --show-duration - Show animation duration. Default `150ms`.
  * @cssproperty --hide-duration - Hide animation duration. Default `150ms`.
  */
-export declare class LuxenPopover extends LuxenElement {
+export declare class Popover extends LuxenElement {
     static styles: import('lit').CSSResult[];
     private _popoverId;
     private _floating;

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

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/html/elements/popover/popover.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAQlD;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,YAAa,SAAQ,YAAY;IAC5C,OAAgB,MAAM,4BAAwB;IAE9C,OAAO,CAAC,UAAU,CAAuB;IAEzC,OAAO,CAAC,SAAS,CAOd;IAEH,yDAAyD;IAEzD,QAAQ,CAAC,GAAG,SAAM;IAElB,8CAA8C;IAE9C,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAY;IAEzC,sDAAsD;IAEtD,QAAQ,CAAC,QAAQ,SAAK;IAEtB,6CAA6C;IAE7C,QAAQ,CAAC,IAAI,UAAS;IAEtB,kCAAkC;IAElC,QAAQ,CAAC,YAAY,UAAS;IAE9B,wEAAwE;IAExE,QAAQ,CAAC,SAAS,UAAS;IAE3B,kFAAkF;IAElF,QAAQ,CAAC,OAAO,SAAW;IAE3B,OAAO,CAAC,WAAW;IAInB,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,CAAC,YAAY;IAKX,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAU9C,IAAI;IAIJ,IAAI;IAIJ,MAAM;YAIQ,iBAAiB;IA8B/B,OAAO,CAAC,eAAe,CAIrB;IAEF,OAAO,CAAC,eAAe,CAGrB;IAEF,OAAO,CAAC,UAAU,CAEhB;IACF,OAAO,CAAC,WAAW,CAEjB;IACF,OAAO,CAAC,QAAQ,CAEd;IAEF,OAAO,CAAC,UAAU,CAKhB;IAEF,2DAA2D;IAC3D,OAAO,CAAC,SAAS,CAKf;IAEF,OAAO,CAAC,oBAAoB;IAW5B,OAAO,CAAC,uBAAuB;IAOtB,MAAM;CAoBhB"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/html/elements/popover/popover.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAQlD;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,OAAQ,SAAQ,YAAY;IACvC,OAAgB,MAAM,4BAAwB;IAE9C,OAAO,CAAC,UAAU,CAAuB;IAEzC,OAAO,CAAC,SAAS,CAOd;IAEH,yDAAyD;IAEzD,QAAQ,CAAC,GAAG,SAAM;IAElB,8CAA8C;IAE9C,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAY;IAEzC,sDAAsD;IAEtD,QAAQ,CAAC,QAAQ,SAAK;IAEtB,6CAA6C;IAE7C,QAAQ,CAAC,IAAI,UAAS;IAEtB,kCAAkC;IAElC,QAAQ,CAAC,YAAY,UAAS;IAE9B,wEAAwE;IAExE,QAAQ,CAAC,SAAS,UAAS;IAE3B,kFAAkF;IAElF,QAAQ,CAAC,OAAO,SAAW;IAE3B,OAAO,CAAC,WAAW;IAInB,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,CAAC,YAAY;IAKX,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAU9C,IAAI;IAIJ,IAAI;IAIJ,MAAM;YAIQ,iBAAiB;IA8B/B,OAAO,CAAC,eAAe,CAIrB;IAEF,OAAO,CAAC,eAAe,CAGrB;IAEF,OAAO,CAAC,UAAU,CAEhB;IACF,OAAO,CAAC,WAAW,CAEjB;IACF,OAAO,CAAC,QAAQ,CAEd;IAEF,OAAO,CAAC,UAAU,CAKhB;IAEF,2DAA2D;IAC3D,OAAO,CAAC,SAAS,CAKf;IAEF,OAAO,CAAC,oBAAoB;IAW5B,OAAO,CAAC,uBAAuB;IAOtB,MAAM;CAoBhB"}

package/cdn/elements/popover/popover.js

@@ -1,4 +1,4 @@
-import{uniqueId as e}from"../../registry.js";import{c as t,i as n,n as r}from"../../chunks/lit.js";import{LuxenElement as i}from"../../shared/luxen-element.js";import{a,t as o}from"../../chunks/decorate.js";import s from"../../shared/styles/host.styles.js";import{PopoverController as c}from"../../shared/controllers/popover.js";var l=t(`:host{--background:var(--l-color-bg-surface,Canvas);--color:inherit;--border-radius:6px;--max-width:320px;--shadow:0 4px 6px -1px #00000014, 0 2px 4px -2px #0000000f;--arrow-size:8px;--show-duration:.15s;--hide-duration:.15s;--_border-color:var(--l-color-border-overlay,var(--lightningcss-light,#e5e7eb)var(--lightningcss-dark,#374151));display:contents}[popover]{inset:unset;isolation:isolate;box-sizing:border-box;width:max-content;max-width:var(--max-width);border:1px solid var(--_border-color);border-radius:var(--border-radius);background:var(--background);color:var(--color);box-shadow:var(--shadow);font-size:.875rem;line-height:1.5;overflow:visible}:host([full-width]) [popover]{width:100vw;max-width:none}i{width:var(--arrow-size);height:var(--arrow-size);background:var(--background);z-index:-1;display:block;position:absolute;transform:rotate(45deg)}:host([data-placement^=top]) i{border-right:1px solid var(--_border-color);border-bottom:1px solid var(--_border-color)}:host([data-placement^=bottom]) i{border-top:1px solid var(--_border-color);border-left:1px solid var(--_border-color)}:host([data-placement^=left]) i{border-right:1px solid var(--_border-color);border-top:1px solid var(--_border-color)}:host([data-placement^=right]) i{border-left:1px solid var(--_border-color);border-bottom:1px solid var(--_border-color)}`),u=class extends i{constructor(...t){super(...t),this._popoverId=e(`popover`),this._floating=new c(this,{getTriggerElement:()=>this._trigger,getFloatingElement:()=>this._popoverEl,getArrowElement:()=>this._arrowEl,onPlacementChange:e=>{this.dataset.placement=e}}),this.#e=``,this.#t=`bottom`,this.#n=8,this.#r=!1,this.#i=!1,this.#a=!1,this.#o=`click`,this._onPointerEnter=()=>{this._hasTrigger(`hover`)&&(this._floating.cleanupSafePolygon(),this.show())},this._onPointerLeave=e=>{!this._hasTrigger(`hover`)||!this.open||this._floating.handlePointerLeave(e,()=>this.hide())},this._onFocusIn=()=>{this._hasTrigger(`focus`)&&this.show()},this._onFocusOut=()=>{this._hasTrigger(`focus`)&&this.hide()},this._onClick=()=>{this._hasTrigger(`click`)&&this.toggle()},this._onKeyDown=e=>{this.open&&e.key===`Escape`&&(e.stopPropagation(),this.hide())},this._onToggle=e=>{e.newState===`closed`&&this.open&&(this.open=!1)}}static{this.styles=[s,l]}#e;get for(){return this.#e}set for(e){this.#e=e}#t;get placement(){return this.#t}set placement(e){this.#t=e}#n;get distance(){return this.#n}set distance(e){this.#n=e}#r;get open(){return this.#r}set open(e){this.#r=e}#i;get withoutArrow(){return this.#i}set withoutArrow(e){this.#i=e}#a;get fullWidth(){return this.#a}set fullWidth(e){this.#a=e}#o;get trigger(){return this.#o}set trigger(e){this.#o=e}_hasTrigger(e){return this.trigger.split(` `).includes(e)}get _trigger(){return this.for?this.getRootNode().getElementById(this.for):null}get _popoverEl(){return this.shadowRoot.querySelector(`[popover]`)}get _arrowEl(){return this.withoutArrow?null:this.shadowRoot.querySelector(`i`)}_getDuration(e){let t=parseFloat(getComputedStyle(this).getPropertyValue(e));return Number.isNaN(t)?150:t}connectedCallback(){super.connectedCallback(),requestAnimationFrame(()=>this._addTriggerListeners())}disconnectedCallback(){super.disconnectedCallback(),this._removeTriggerListeners()}updated(e){e.has(`open`)&&this._handleOpenChange(),e.has(`for`)&&(this._removeTriggerListeners(e.get(`for`)),this._addTriggerListeners())}show(){this.open||=!0}hide(){this.open&&=!1}toggle(){this.open=!this.open}async _handleOpenChange(){let e=this._popoverEl;if(!e)return;let t={placement:this.placement,distance:this.distance,fullWidth:this.fullWidth};if(this.open){if(e.showPopover(),await this._floating.updatePosition(t),!this.open)return;await this._floating.animateShow(e,this._getDuration(`--show-duration`)),this._floating.startPositioning(t),this._trigger?.setAttribute(`aria-expanded`,`true`),this._trigger?.setAttribute(`aria-controls`,this._popoverId)}else this._floating.stopPositioning(),this._floating.cleanupSafePolygon(),this._trigger?.setAttribute(`aria-expanded`,`false`),this._trigger?.removeAttribute(`aria-controls`),await this._floating.animateHide(e,this._getDuration(`--hide-duration`)),e.matches(`:popover-open`)&&e.hidePopover()}_addTriggerListeners(){this._floating.addTriggerListeners({onPointerEnter:this._onPointerEnter,onPointerLeave:this._onPointerLeave,onFocusIn:this._onFocusIn,onFocusOut:this._onFocusOut,onClick:this._onClick,onKeyDown:this._onKeyDown})}_removeTriggerListeners(e){let t=e?this.getRootNode().getElementById(e):void 0;this._floating.removeTriggerListeners(t)}render(){return n`
+import{uniqueId as e}from"../../registry.js";import{c as t,i as n,n as r}from"../../chunks/lit.js";import{LuxenElement as i}from"../../shared/luxen-element.js";import{i as a,t as o}from"../../chunks/decorate.js";import s from"../../shared/styles/host.styles.js";import{PopoverController as c}from"../../shared/controllers/popover.js";var l=t(`:host{--background:var(--l-color-bg-surface,Canvas);--color:inherit;--border-radius:6px;--max-width:320px;--shadow:0 4px 6px -1px #00000014, 0 2px 4px -2px #0000000f;--arrow-size:8px;--show-duration:.15s;--hide-duration:.15s;--_border-color:var(--l-color-border-overlay,var(--lightningcss-light,#e5e7eb)var(--lightningcss-dark,#374151));display:contents}[popover]{inset:unset;isolation:isolate;box-sizing:border-box;width:max-content;max-width:var(--max-width);border:1px solid var(--_border-color);border-radius:var(--border-radius);background:var(--background);color:var(--color);box-shadow:var(--shadow);font-size:.875rem;line-height:1.5;overflow:visible}:host([full-width]) [popover]{width:100vw;max-width:none}i{width:var(--arrow-size);height:var(--arrow-size);background:var(--background);z-index:-1;display:block;position:absolute;transform:rotate(45deg)}:host([data-placement^=top]) i{border-right:1px solid var(--_border-color);border-bottom:1px solid var(--_border-color)}:host([data-placement^=bottom]) i{border-top:1px solid var(--_border-color);border-left:1px solid var(--_border-color)}:host([data-placement^=left]) i{border-right:1px solid var(--_border-color);border-top:1px solid var(--_border-color)}:host([data-placement^=right]) i{border-left:1px solid var(--_border-color);border-bottom:1px solid var(--_border-color)}`),u=class extends i{constructor(...t){super(...t),this._popoverId=e(`popover`),this._floating=new c(this,{getTriggerElement:()=>this._trigger,getFloatingElement:()=>this._popoverEl,getArrowElement:()=>this._arrowEl,onPlacementChange:e=>{this.dataset.placement=e}}),this.#e=``,this.#t=`bottom`,this.#n=8,this.#r=!1,this.#i=!1,this.#a=!1,this.#o=`click`,this._onPointerEnter=()=>{this._hasTrigger(`hover`)&&(this._floating.cleanupSafePolygon(),this.show())},this._onPointerLeave=e=>{!this._hasTrigger(`hover`)||!this.open||this._floating.handlePointerLeave(e,()=>this.hide())},this._onFocusIn=()=>{this._hasTrigger(`focus`)&&this.show()},this._onFocusOut=()=>{this._hasTrigger(`focus`)&&this.hide()},this._onClick=()=>{this._hasTrigger(`click`)&&this.toggle()},this._onKeyDown=e=>{this.open&&e.key===`Escape`&&(e.stopPropagation(),this.hide())},this._onToggle=e=>{e.newState===`closed`&&this.open&&(this.open=!1)}}static{this.styles=[s,l]}#e;get for(){return this.#e}set for(e){this.#e=e}#t;get placement(){return this.#t}set placement(e){this.#t=e}#n;get distance(){return this.#n}set distance(e){this.#n=e}#r;get open(){return this.#r}set open(e){this.#r=e}#i;get withoutArrow(){return this.#i}set withoutArrow(e){this.#i=e}#a;get fullWidth(){return this.#a}set fullWidth(e){this.#a=e}#o;get trigger(){return this.#o}set trigger(e){this.#o=e}_hasTrigger(e){return this.trigger.split(` `).includes(e)}get _trigger(){return this.for?this.getRootNode().getElementById(this.for):null}get _popoverEl(){return this.shadowRoot.querySelector(`[popover]`)}get _arrowEl(){return this.withoutArrow?null:this.shadowRoot.querySelector(`i`)}_getDuration(e){let t=parseFloat(getComputedStyle(this).getPropertyValue(e));return Number.isNaN(t)?150:t}connectedCallback(){super.connectedCallback(),requestAnimationFrame(()=>this._addTriggerListeners())}disconnectedCallback(){super.disconnectedCallback(),this._removeTriggerListeners()}updated(e){e.has(`open`)&&this._handleOpenChange(),e.has(`for`)&&(this._removeTriggerListeners(e.get(`for`)),this._addTriggerListeners())}show(){this.open||=!0}hide(){this.open&&=!1}toggle(){this.open=!this.open}async _handleOpenChange(){let e=this._popoverEl;if(!e)return;let t={placement:this.placement,distance:this.distance,fullWidth:this.fullWidth};if(this.open){if(e.showPopover(),await this._floating.updatePosition(t),!this.open)return;await this._floating.animateShow(e,this._getDuration(`--show-duration`)),this._floating.startPositioning(t),this._trigger?.setAttribute(`aria-expanded`,`true`),this._trigger?.setAttribute(`aria-controls`,this._popoverId)}else this._floating.stopPositioning(),this._floating.cleanupSafePolygon(),this._trigger?.setAttribute(`aria-expanded`,`false`),this._trigger?.removeAttribute(`aria-controls`),await this._floating.animateHide(e,this._getDuration(`--hide-duration`)),e.matches(`:popover-open`)&&e.hidePopover()}_addTriggerListeners(){this._floating.addTriggerListeners({onPointerEnter:this._onPointerEnter,onPointerLeave:this._onPointerLeave,onFocusIn:this._onFocusIn,onFocusOut:this._onFocusOut,onClick:this._onClick,onKeyDown:this._onKeyDown})}_removeTriggerListeners(e){let t=e?this.getRootNode().getElementById(e):void 0;this._floating.removeTriggerListeners(t)}render(){return n`
       <div
         id=${this._popoverId}
         popover="auto"
@@ -13,5 +13,5 @@ import{uniqueId as e}from"../../registry.js";import{c as t,i as n,n as r}from"..
             `}
         <slot></slot>
       </div>
-    `}};o([a()],u.prototype,`for`,null),o([a()],u.prototype,`placement`,null),o([a({type:Number})],u.prototype,`distance`,null),o([a({type:Boolean,reflect:!0})],u.prototype,`open`,null),o([a({type:Boolean,reflect:!0,attribute:`without-arrow`})],u.prototype,`withoutArrow`,null),o([a({type:Boolean,reflect:!0,attribute:`full-width`})],u.prototype,`fullWidth`,null),o([a()],u.prototype,`trigger`,null);export{u as LuxenPopover};
+    `}};o([a()],u.prototype,`for`,null),o([a()],u.prototype,`placement`,null),o([a({type:Number})],u.prototype,`distance`,null),o([a({type:Boolean,reflect:!0})],u.prototype,`open`,null),o([a({type:Boolean,reflect:!0,attribute:`without-arrow`})],u.prototype,`withoutArrow`,null),o([a({type:Boolean,reflect:!0,attribute:`full-width`})],u.prototype,`fullWidth`,null),o([a()],u.prototype,`trigger`,null);export{u as Popover};
 //# sourceMappingURL=popover.js.map

package/cdn/elements/popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","names":[],"sources":["../../../src/html/elements/popover/popover.css?inline","../../../src/html/elements/popover/popover.ts"],"sourcesContent":[":host {\n  --background: var(--l-color-bg-surface, Canvas);\n  --color: inherit;\n  --border-radius: 6px;\n  --max-width: 320px;\n  --shadow: 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -2px rgb(0 0 0 / 6%);\n  --arrow-size: 8px;\n  --show-duration: 150ms;\n  --hide-duration: 150ms;\n\n  --_border-color: var(--l-color-border-overlay, light-dark(#e5e7eb, #374151));\n\n  display: contents;\n}\n\n[popover] {\n  inset: unset;\n  overflow: visible;\n  isolation: isolate;\n  box-sizing: border-box;\n  width: max-content;\n  max-width: var(--max-width);\n  border: 1px solid var(--_border-color);\n  border-radius: var(--border-radius);\n  background: var(--background);\n  color: var(--color);\n  font-size: 0.875rem;\n  line-height: 1.5;\n  box-shadow: var(--shadow);\n}\n\n:host([full-width]) [popover] {\n  width: 100vw;\n  max-width: none;\n}\n\ni {\n  position: absolute;\n  display: block;\n  width: var(--arrow-size);\n  height: var(--arrow-size);\n  background: var(--background);\n  transform: rotate(45deg);\n  z-index: -1;\n}\n\n:host([data-placement^='top']) i {\n  border-right: 1px solid var(--_border-color);\n  border-bottom: 1px solid var(--_border-color);\n}\n\n:host([data-placement^='bottom']) i {\n  border-top: 1px solid var(--_border-color);\n  border-left: 1px solid var(--_border-color);\n}\n\n:host([data-placement^='left']) i {\n  border-right: 1px solid var(--_border-color);\n  border-top: 1px solid var(--_border-color);\n}\n\n:host([data-placement^='right']) i {\n  border-left: 1px solid var(--_border-color);\n  border-bottom: 1px solid var(--_border-color);\n}\n","import { html, nothing, unsafeCSS, type PropertyValues } from 'lit';\nimport { LuxenElement } from '../../shared/luxen-element';\nimport { property } from 'lit/decorators.js';\nimport type { Placement } from '@floating-ui/dom';\nimport { PopoverController } from '../../shared/controllers/popover';\nimport { uniqueId } from '../../registry';\nimport hostStyles from '../../shared/styles/host.styles';\nimport rawStyles from './popover.css?inline';\n\nconst styles = unsafeCSS(rawStyles);\n\n/**\n * @summary A popover that displays interactive content anchored to a trigger.\n * @customElement l-popover\n *\n * @slot - Popover content.\n *\n * @csspart body - The popover container.\n * @csspart arrow - The directional arrow element.\n *\n * @cssproperty --background - Background color. Default: `Canvas`.\n * @cssproperty --color - Text color. Default: inherited.\n * @cssproperty --border-radius - Border radius. Default `8px`.\n * @cssproperty --max-width - Maximum width. Default `320px`.\n * @cssproperty --shadow - Box shadow.\n * @cssproperty --arrow-size - Arrow size. Default `8px`.\n * @cssproperty --show-duration - Show animation duration. Default `150ms`.\n * @cssproperty --hide-duration - Hide animation duration. Default `150ms`.\n */\nexport class LuxenPopover extends LuxenElement {\n  static override styles = [hostStyles, styles];\n\n  private _popoverId = uniqueId('popover');\n\n  private _floating = new PopoverController(this, {\n    getTriggerElement: () => this._trigger,\n    getFloatingElement: () => this._popoverEl,\n    getArrowElement: () => this._arrowEl,\n    onPlacementChange: (p) => {\n      this.dataset.placement = p;\n    },\n  });\n\n  /** The HTML id of the element triggering the popover. */\n  @property()\n  accessor for = '';\n\n  /** The preferred placement of the popover. */\n  @property()\n  accessor placement: Placement = 'bottom';\n\n  /** The distance in pixels from the target element. */\n  @property({ type: Number })\n  accessor distance = 8;\n\n  /** Whether or not the popover is visible. */\n  @property({ type: Boolean, reflect: true })\n  accessor open = false;\n\n  /** Hide the directional arrow. */\n  @property({ type: Boolean, reflect: true, attribute: 'without-arrow' })\n  accessor withoutArrow = false;\n\n  /** Stretch the popover to the viewport width. Useful for mega menus. */\n  @property({ type: Boolean, reflect: true, attribute: 'full-width' })\n  accessor fullWidth = false;\n\n  /** Space-separated list of trigger modes: `click`, `hover`, `focus`, `manual`. */\n  @property()\n  accessor trigger = 'click';\n\n  private _hasTrigger(type: string) {\n    return this.trigger.split(' ').includes(type);\n  }\n\n  private get _trigger(): HTMLElement | null {\n    return this.for ? (this.getRootNode() as Document | ShadowRoot).getElementById(this.for) : null;\n  }\n\n  private get _popoverEl(): HTMLElement {\n    return this.shadowRoot!.querySelector('[popover]')!;\n  }\n\n  private get _arrowEl(): HTMLElement | null {\n    return this.withoutArrow ? null : this.shadowRoot!.querySelector('i');\n  }\n\n  private _getDuration(prop: '--show-duration' | '--hide-duration'): number {\n    const parsed = parseFloat(getComputedStyle(this).getPropertyValue(prop));\n    return Number.isNaN(parsed) ? 150 : parsed;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    requestAnimationFrame(() => this._addTriggerListeners());\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._removeTriggerListeners();\n  }\n\n  override updated(changed: PropertyValues<this>) {\n    if (changed.has('open')) {\n      this._handleOpenChange();\n    }\n    if (changed.has('for')) {\n      this._removeTriggerListeners(changed.get('for') as string);\n      this._addTriggerListeners();\n    }\n  }\n\n  show() {\n    if (!this.open) this.open = true;\n  }\n\n  hide() {\n    if (this.open) this.open = false;\n  }\n\n  toggle() {\n    this.open = !this.open;\n  }\n\n  private async _handleOpenChange() {\n    const popover = this._popoverEl;\n    if (!popover) return;\n\n    const posOpts = {\n      placement: this.placement,\n      distance: this.distance,\n      fullWidth: this.fullWidth,\n    };\n\n    if (this.open) {\n      popover.showPopover();\n      await this._floating.updatePosition(posOpts);\n      if (!this.open) return;\n      await this._floating.animateShow(popover, this._getDuration('--show-duration'));\n      this._floating.startPositioning(posOpts);\n      this._trigger?.setAttribute('aria-expanded', 'true');\n      this._trigger?.setAttribute('aria-controls', this._popoverId);\n    } else {\n      this._floating.stopPositioning();\n      this._floating.cleanupSafePolygon();\n      this._trigger?.setAttribute('aria-expanded', 'false');\n      this._trigger?.removeAttribute('aria-controls');\n      await this._floating.animateHide(popover, this._getDuration('--hide-duration'));\n      if (popover.matches(':popover-open')) popover.hidePopover();\n    }\n  }\n\n  // --- Trigger event handlers ---\n\n  private _onPointerEnter = () => {\n    if (!this._hasTrigger('hover')) return;\n    this._floating.cleanupSafePolygon();\n    this.show();\n  };\n\n  private _onPointerLeave = (e: PointerEvent) => {\n    if (!this._hasTrigger('hover') || !this.open) return;\n    this._floating.handlePointerLeave(e, () => this.hide());\n  };\n\n  private _onFocusIn = () => {\n    if (this._hasTrigger('focus')) this.show();\n  };\n  private _onFocusOut = () => {\n    if (this._hasTrigger('focus')) this.hide();\n  };\n  private _onClick = () => {\n    if (this._hasTrigger('click')) this.toggle();\n  };\n\n  private _onKeyDown = (e: KeyboardEvent) => {\n    if (this.open && e.key === 'Escape') {\n      e.stopPropagation();\n      this.hide();\n    }\n  };\n\n  /** Sync `open` when popover=\"auto\" light-dismiss fires. */\n  private _onToggle = (e: Event) => {\n    const toggleEvent = e as ToggleEvent;\n    if (toggleEvent.newState === 'closed' && this.open) {\n      this.open = false;\n    }\n  };\n\n  private _addTriggerListeners() {\n    this._floating.addTriggerListeners({\n      onPointerEnter: this._onPointerEnter,\n      onPointerLeave: this._onPointerLeave,\n      onFocusIn: this._onFocusIn,\n      onFocusOut: this._onFocusOut,\n      onClick: this._onClick,\n      onKeyDown: this._onKeyDown,\n    });\n  }\n\n  private _removeTriggerListeners(forId?: string) {\n    const trigger = forId\n      ? (this.getRootNode() as Document | ShadowRoot).getElementById(forId)\n      : undefined;\n    this._floating.removeTriggerListeners(trigger);\n  }\n\n  override render() {\n    return html`\n      <div\n        id=${this._popoverId}\n        popover=\"auto\"\n        part=\"body\"\n        @toggle=${this._onToggle}\n      >\n        ${this.withoutArrow\n          ? nothing\n          : html`\n              <i\n                part=\"arrow\"\n                role=\"presentation\"\n              ></i>\n            `}\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"popover.js","names":[],"sources":["../../../src/html/elements/popover/popover.css?inline","../../../src/html/elements/popover/popover.ts"],"sourcesContent":[":host {\n  --background: var(--l-color-bg-surface, Canvas);\n  --color: inherit;\n  --border-radius: 6px;\n  --max-width: 320px;\n  --shadow: 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -2px rgb(0 0 0 / 6%);\n  --arrow-size: 8px;\n  --show-duration: 150ms;\n  --hide-duration: 150ms;\n\n  --_border-color: var(--l-color-border-overlay, light-dark(#e5e7eb, #374151));\n\n  display: contents;\n}\n\n[popover] {\n  inset: unset;\n  overflow: visible;\n  isolation: isolate;\n  box-sizing: border-box;\n  width: max-content;\n  max-width: var(--max-width);\n  border: 1px solid var(--_border-color);\n  border-radius: var(--border-radius);\n  background: var(--background);\n  color: var(--color);\n  font-size: 0.875rem;\n  line-height: 1.5;\n  box-shadow: var(--shadow);\n}\n\n:host([full-width]) [popover] {\n  width: 100vw;\n  max-width: none;\n}\n\ni {\n  position: absolute;\n  display: block;\n  width: var(--arrow-size);\n  height: var(--arrow-size);\n  background: var(--background);\n  transform: rotate(45deg);\n  z-index: -1;\n}\n\n:host([data-placement^='top']) i {\n  border-right: 1px solid var(--_border-color);\n  border-bottom: 1px solid var(--_border-color);\n}\n\n:host([data-placement^='bottom']) i {\n  border-top: 1px solid var(--_border-color);\n  border-left: 1px solid var(--_border-color);\n}\n\n:host([data-placement^='left']) i {\n  border-right: 1px solid var(--_border-color);\n  border-top: 1px solid var(--_border-color);\n}\n\n:host([data-placement^='right']) i {\n  border-left: 1px solid var(--_border-color);\n  border-bottom: 1px solid var(--_border-color);\n}\n","import { html, nothing, unsafeCSS, type PropertyValues } from 'lit';\nimport { LuxenElement } from '../../shared/luxen-element';\nimport { property } from 'lit/decorators.js';\nimport type { Placement } from '@floating-ui/dom';\nimport { PopoverController } from '../../shared/controllers/popover';\nimport { uniqueId } from '../../registry';\nimport hostStyles from '../../shared/styles/host.styles';\nimport rawStyles from './popover.css?inline';\n\nconst styles = unsafeCSS(rawStyles);\n\n/**\n * @summary A popover that displays interactive content anchored to a trigger.\n * @customElement l-popover\n *\n * @slot - Popover content.\n *\n * @csspart body - The popover container.\n * @csspart arrow - The directional arrow element.\n *\n * @cssproperty --background - Background color. Default: `Canvas`.\n * @cssproperty --color - Text color. Default: inherited.\n * @cssproperty --border-radius - Border radius. Default `8px`.\n * @cssproperty --max-width - Maximum width. Default `320px`.\n * @cssproperty --shadow - Box shadow.\n * @cssproperty --arrow-size - Arrow size. Default `8px`.\n * @cssproperty --show-duration - Show animation duration. Default `150ms`.\n * @cssproperty --hide-duration - Hide animation duration. Default `150ms`.\n */\nexport class Popover extends LuxenElement {\n  static override styles = [hostStyles, styles];\n\n  private _popoverId = uniqueId('popover');\n\n  private _floating = new PopoverController(this, {\n    getTriggerElement: () => this._trigger,\n    getFloatingElement: () => this._popoverEl,\n    getArrowElement: () => this._arrowEl,\n    onPlacementChange: (p) => {\n      this.dataset.placement = p;\n    },\n  });\n\n  /** The HTML id of the element triggering the popover. */\n  @property()\n  accessor for = '';\n\n  /** The preferred placement of the popover. */\n  @property()\n  accessor placement: Placement = 'bottom';\n\n  /** The distance in pixels from the target element. */\n  @property({ type: Number })\n  accessor distance = 8;\n\n  /** Whether or not the popover is visible. */\n  @property({ type: Boolean, reflect: true })\n  accessor open = false;\n\n  /** Hide the directional arrow. */\n  @property({ type: Boolean, reflect: true, attribute: 'without-arrow' })\n  accessor withoutArrow = false;\n\n  /** Stretch the popover to the viewport width. Useful for mega menus. */\n  @property({ type: Boolean, reflect: true, attribute: 'full-width' })\n  accessor fullWidth = false;\n\n  /** Space-separated list of trigger modes: `click`, `hover`, `focus`, `manual`. */\n  @property()\n  accessor trigger = 'click';\n\n  private _hasTrigger(type: string) {\n    return this.trigger.split(' ').includes(type);\n  }\n\n  private get _trigger(): HTMLElement | null {\n    return this.for ? (this.getRootNode() as Document | ShadowRoot).getElementById(this.for) : null;\n  }\n\n  private get _popoverEl(): HTMLElement {\n    return this.shadowRoot!.querySelector('[popover]')!;\n  }\n\n  private get _arrowEl(): HTMLElement | null {\n    return this.withoutArrow ? null : this.shadowRoot!.querySelector('i');\n  }\n\n  private _getDuration(prop: '--show-duration' | '--hide-duration'): number {\n    const parsed = parseFloat(getComputedStyle(this).getPropertyValue(prop));\n    return Number.isNaN(parsed) ? 150 : parsed;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    requestAnimationFrame(() => this._addTriggerListeners());\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._removeTriggerListeners();\n  }\n\n  override updated(changed: PropertyValues<this>) {\n    if (changed.has('open')) {\n      void this._handleOpenChange();\n    }\n    if (changed.has('for')) {\n      this._removeTriggerListeners(changed.get('for') as string);\n      this._addTriggerListeners();\n    }\n  }\n\n  show() {\n    if (!this.open) this.open = true;\n  }\n\n  hide() {\n    if (this.open) this.open = false;\n  }\n\n  toggle() {\n    this.open = !this.open;\n  }\n\n  private async _handleOpenChange() {\n    const popover = this._popoverEl;\n    if (!popover) return;\n\n    const posOpts = {\n      placement: this.placement,\n      distance: this.distance,\n      fullWidth: this.fullWidth,\n    };\n\n    if (this.open) {\n      popover.showPopover();\n      await this._floating.updatePosition(posOpts);\n      if (!this.open) return;\n      await this._floating.animateShow(popover, this._getDuration('--show-duration'));\n      this._floating.startPositioning(posOpts);\n      this._trigger?.setAttribute('aria-expanded', 'true');\n      this._trigger?.setAttribute('aria-controls', this._popoverId);\n    } else {\n      this._floating.stopPositioning();\n      this._floating.cleanupSafePolygon();\n      this._trigger?.setAttribute('aria-expanded', 'false');\n      this._trigger?.removeAttribute('aria-controls');\n      await this._floating.animateHide(popover, this._getDuration('--hide-duration'));\n      if (popover.matches(':popover-open')) popover.hidePopover();\n    }\n  }\n\n  // --- Trigger event handlers ---\n\n  private _onPointerEnter = () => {\n    if (!this._hasTrigger('hover')) return;\n    this._floating.cleanupSafePolygon();\n    this.show();\n  };\n\n  private _onPointerLeave = (e: PointerEvent) => {\n    if (!this._hasTrigger('hover') || !this.open) return;\n    this._floating.handlePointerLeave(e, () => this.hide());\n  };\n\n  private _onFocusIn = () => {\n    if (this._hasTrigger('focus')) this.show();\n  };\n  private _onFocusOut = () => {\n    if (this._hasTrigger('focus')) this.hide();\n  };\n  private _onClick = () => {\n    if (this._hasTrigger('click')) this.toggle();\n  };\n\n  private _onKeyDown = (e: KeyboardEvent) => {\n    if (this.open && e.key === 'Escape') {\n      e.stopPropagation();\n      this.hide();\n    }\n  };\n\n  /** Sync `open` when popover=\"auto\" light-dismiss fires. */\n  private _onToggle = (e: Event) => {\n    const toggleEvent = e as ToggleEvent;\n    if (toggleEvent.newState === 'closed' && this.open) {\n      this.open = false;\n    }\n  };\n\n  private _addTriggerListeners() {\n    this._floating.addTriggerListeners({\n      onPointerEnter: this._onPointerEnter,\n      onPointerLeave: this._onPointerLeave,\n      onFocusIn: this._onFocusIn,\n      onFocusOut: this._onFocusOut,\n      onClick: this._onClick,\n      onKeyDown: this._onKeyDown,\n    });\n  }\n\n  private _removeTriggerListeners(forId?: string) {\n    const trigger = forId\n      ? (this.getRootNode() as Document | ShadowRoot).getElementById(forId)\n      : undefined;\n    this._floating.removeTriggerListeners(trigger);\n  }\n\n  override render() {\n    return html`\n      <div\n        id=${this._popoverId}\n        popover=\"auto\"\n        part=\"body\"\n        @toggle=${this._onToggle}\n      >\n        ${this.withoutArrow\n          ? nothing\n          : html`\n              <i\n                part=\"arrow\"\n                role=\"presentation\"\n              ></i>\n            `}\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/rating/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,cAAc,UAAU,CAAC;AAGzB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,WAAW,CAAC;KACzB;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/rating/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,cAAc,UAAU,CAAC;AAGzB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,MAAM,CAAC;KACpB;CACF"}

package/cdn/elements/rating/index.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/html/elements/rating/index.ts"],"sourcesContent":["import { define } from '../../define';\nimport { LuxenRating } from './rating';\nexport * from './rating';\ndefine('rating', LuxenRating);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'l-rating': LuxenRating;\n  }\n}\n"],"mappings":"mFAGA,EAAO,SAAU,EAAY"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/html/elements/rating/index.ts"],"sourcesContent":["import { define } from '../../define';\nimport { Rating } from './rating';\nexport * from './rating';\ndefine('rating', Rating);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'l-rating': Rating;\n  }\n}\n"],"mappings":"8EAGA,EAAO,SAAU,EAAO"}

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

@@ -14,7 +14,7 @@ import { LuxenFormAssociatedElement } from '../../shared/luxen-form-associated-e
  *
  * @event {{ name: string, value: string, checked: boolean, sourceEvent: Event }} change - Emitted when the rating value changes in edit mode.
  */
-export declare class LuxenRating extends LuxenFormAssociatedElement {
+export declare class Rating extends LuxenFormAssociatedElement {
     static styles: import('lit').CSSResult[];
     private currentLabel;
     private previewedValue;

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,4CAA4C,CAAC;AAMxF;;;;;;;;;;;;;;GAcG;AACH,qBAAa,WAAY,SAAQ,0BAA0B;IACzD,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;IAKpB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,OAAO;CAgBhB"}
+{"version":3,"file":"rating.d.ts","sourceRoot":"","sources":["../../../src/html/elements/rating/rating.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,0BAA0B,EAAE,MAAM,4CAA4C,CAAC;AAMxF;;;;;;;;;;;;;;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"}

package/cdn/elements/rating/rating.js

@@ -1,4 +1,4 @@
-import{c as e,i as t,n}from"../../chunks/lit.js";import{a 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}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{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
         class="rating"
         style=${this.getRatingStyle()}
       ></div>`;let e=this.previewedValue||this.value;return t`
@@ -37,5 +37,5 @@ import{c as e,i as t,n}from"../../chunks/lit.js";import{a as r,t as i}from"../..
               ${this.currentLabel}
             </div>`:n}
       </div>
-    `}previewValue(e){this.previewedValue=e,this.setLabelForValue(e)}clearPreview(e){if(e){let t=e.relatedTarget;if(t&&this.shadowRoot?.contains(t))return}this.previewedValue=0,this.setLabelForValue(this.value)}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}})}};i([r({type:Boolean,reflect:!0,attribute:`edit-mode`})],c.prototype,`editMode`,null),i([r({type:Array,reflect:!0,converter:{fromAttribute:e=>e.split(`|`),toAttribute:e=>e.length?e.join(`|`):null}})],c.prototype,`labels`,null),i([r({type:Number,reflect:!0})],c.prototype,`value`,null),i([r({type:Number,reflect:!0})],c.prototype,`length`,null);export{c as LuxenRating};
+    `}};i([r({type:Boolean,reflect:!0,attribute:`edit-mode`})],c.prototype,`editMode`,null),i([r({type:Array,reflect:!0,converter:{fromAttribute:e=>e.split(`|`),toAttribute:e=>e.length?e.join(`|`):null}})],c.prototype,`labels`,null),i([r({type:Number,reflect:!0})],c.prototype,`value`,null),i([r({type:Number,reflect:!0})],c.prototype,`length`,null);export{c as Rating};
 //# sourceMappingURL=rating.js.map

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';\nimport hostStyles from '../../shared/styles/host.styles';\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 LuxenRating 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';\nimport hostStyles from '../../shared/styles/host.styles';\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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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/skeleton/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,cAAc,YAAY,CAAC;AAG3B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,aAAa,CAAC;KAC7B;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/skeleton/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,cAAc,YAAY,CAAC;AAG3B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,QAAQ,CAAC;KACxB;CACF"}

package/cdn/elements/skeleton/index.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/html/elements/skeleton/index.ts"],"sourcesContent":["import { define } from '../../define';\nimport { LuxenSkeleton } from './skeleton';\nexport * from './skeleton';\ndefine('skeleton', LuxenSkeleton);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'l-skeleton': LuxenSkeleton;\n  }\n}\n"],"mappings":"uFAGA,EAAO,WAAY,EAAc"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/html/elements/skeleton/index.ts"],"sourcesContent":["import { define } from '../../define';\nimport { Skeleton } from './skeleton';\nexport * from './skeleton';\ndefine('skeleton', Skeleton);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'l-skeleton': Skeleton;\n  }\n}\n"],"mappings":"kFAGA,EAAO,WAAY,EAAS"}

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

@@ -6,7 +6,7 @@ import { LuxenElement } from '../../shared/luxen-element';
  * @cssproperty --width - Width of the skeleton
  * @cssproperty --height - Height of the skeleton
  */
-export declare class LuxenSkeleton extends LuxenElement {
+export declare class Skeleton extends LuxenElement {
     createRenderRoot(): this;
 }
 //# sourceMappingURL=skeleton.d.ts.map

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,4BAA4B,CAAC;AAE1D;;;;;;GAMG;AACH,qBAAa,aAAc,SAAQ,YAAY;IACpC,gBAAgB;CAG1B"}
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/html/elements/skeleton/skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D;;;;;;GAMG;AACH,qBAAa,QAAS,SAAQ,YAAY;IAC/B,gBAAgB;CAG1B"}

package/cdn/elements/skeleton/skeleton.js

@@ -1,2 +1,2 @@
-import{LuxenElement as e}from"../../shared/luxen-element.js";var t=class extends e{createRenderRoot(){return this}};export{t as LuxenSkeleton};
+import{LuxenElement as e}from"../../shared/luxen-element.js";var t=class extends e{createRenderRoot(){return this}};export{t as Skeleton};
 //# sourceMappingURL=skeleton.js.map

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';\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 LuxenSkeleton extends LuxenElement {\n  override createRenderRoot() {\n    return this;\n  }\n}\n"],"mappings":"6DASA,IAAa,EAAb,cAAmC,CAAa,CAC9C,kBAA4B,CAC1B,OAAO"}
+{"version":3,"file":"skeleton.js","names":[],"sources":["../../../src/html/elements/skeleton/skeleton.ts"],"sourcesContent":["import { LuxenElement } from '../../shared/luxen-element';\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"}

package/cdn/elements/spinner/index.d.ts

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

package/cdn/elements/spinner/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/spinner/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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/spinner/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,cAAc,WAAW,CAAC;AAG1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,OAAO,CAAC;KACtB;CACF"}

package/cdn/elements/spinner/index.js

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

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

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

package/cdn/elements/spinner/spinner.d.ts

@@ -9,7 +9,7 @@ import { LuxenElement } from '../../shared/luxen-element';
  * @cssproperty --indicator-color - The color of the spinner.
  * @cssproperty --speed - The duration of one full spin cycle.
  */
-export declare class LuxenSpinner extends LuxenElement {
+export declare class Spinner extends LuxenElement {
     static styles: import('lit').CSSResult[];
     render(): import('lit').TemplateResult<1>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/html/elements/spinner/spinner.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAM1D;;;;;;;;;GASG;AACH,qBAAa,YAAa,SAAQ,YAAY;IAC5C,OAAgB,MAAM,4BAAwB;IAErC,MAAM;CAmBhB"}
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/html/elements/spinner/spinner.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAM1D;;;;;;;;;GASG;AACH,qBAAa,OAAQ,SAAQ,YAAY;IACvC,OAAgB,MAAM,4BAAwB;IAErC,MAAM;CAmBhB"}