luxen-ui 0.1.0

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

@@ -0,0 +1,249 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { property } from 'lit/decorators.js';
+import { LuxenElement } from '../../shared/luxen-element';
+/**
+ * A stepper control that enhances a native `<input type="number">` with
+ * decrement/increment buttons and an optional animated number track.
+ *
+ * @link https://www.nngroup.com/articles/input-steppers/
+ *
+ * @example
+ * ```html
+ * <l-input-stepper>
+ *   <input type="number" min="0" max="10" value="5" />
+ * </l-input-stepper>
+ * ```
+ *
+ * @event change - Fired when the value changes. Detail: `{ value: number }`.
+ */
+export class LuxenInputStepper extends LuxenElement {
+    constructor() {
+        super(...arguments);
+        /** Control size. */
+        this.size = 'md';
+        /** Enable the animated number roller overlay. */
+        this.withRoller = false;
+        /** Icon name for the decrement button. */
+        this.decrementIcon = 'lucide:minus';
+        /** Icon name for the increment button. */
+        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 = false;
+        // --- Event handlers ---
+        this._onDecrement = () => this.decrement();
+        this._onIncrement = () => this.increment();
+        this._onInputChange = () => {
+            if (!this._input)
+                return;
+            const { min, max } = this._getConstraints();
+            const clamped = Math.min(Math.max(this._input.valueAsNumber, min), max);
+            this._input.value = String(clamped);
+            this._skipTransition = true;
+            this._updateButtonStates();
+            this._updateTrack();
+            this.emit('change', { detail: { value: clamped } });
+        };
+    }
+    createRenderRoot() {
+        return this;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        requestAnimationFrame(() => this._setup());
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._teardown();
+    }
+    updated(changed) {
+        if (!this._input)
+            return;
+        if (changed.has('min') || changed.has('max') || changed.has('step')) {
+            this._syncConstraints();
+            this._updateButtonStates();
+        }
+    }
+    /** Decrease the value by one step. */
+    decrement() {
+        if (!this._input)
+            return;
+        const { min, step } = this._getConstraints();
+        const newVal = Math.max(this._input.valueAsNumber - step, min);
+        this._applyValue(newVal);
+    }
+    /** Increase the value by one step. */
+    increment() {
+        if (!this._input)
+            return;
+        const { max, step } = this._getConstraints();
+        const newVal = Math.min(this._input.valueAsNumber + step, max);
+        this._applyValue(newVal);
+    }
+    // --- Setup / Teardown ---
+    _setup() {
+        this._input = this.querySelector('input[type="number"]');
+        if (!this._input)
+            return;
+        this._input.inputMode = 'numeric';
+        // Wrap input in value container
+        this._valueWrapper = document.createElement('div');
+        this._valueWrapper.className = 'l-input-stepper-value';
+        this._input.replaceWith(this._valueWrapper);
+        this._valueWrapper.appendChild(this._input);
+        // Inject track overlay
+        if (this.withRoller) {
+            this._buildTrack();
+        }
+        // Create buttons
+        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);
+        // Events
+        this._decrementBtn.addEventListener('click', this._onDecrement);
+        this._incrementBtn.addEventListener('click', this._onIncrement);
+        this._input.addEventListener('change', this._onInputChange);
+        // Observe disabled attribute on input
+        this._observer = new MutationObserver(() => this._updateButtonStates());
+        this._observer.observe(this._input, { attributes: true, 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();
+        // Restore input to direct child
+        if (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;
+    }
+    // --- DOM helpers ---
+    _createButton(icon, label) {
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.setAttribute('aria-label', label);
+        btn.innerHTML = `<l-icon name="${icon}"></l-icon>`;
+        return btn;
+    }
+    _buildTrack() {
+        if (!this._valueWrapper)
+            return;
+        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;
+        const { min, max, step } = this._getConstraints();
+        const effectiveMax = Number.isFinite(max) ? max : (this._input?.valueAsNumber ?? 0) + 100;
+        this._track.innerHTML = '';
+        for (let i = min; i <= effectiveMax; i += step) {
+            const div = document.createElement('div');
+            div.textContent = String(i);
+            this._track.appendChild(div);
+        }
+    }
+    // --- Constraints ---
+    _getConstraints() {
+        const min = this.min ?? (Number(this._input?.getAttribute('min')) || 0);
+        const max = this.max ??
+            (this._input?.hasAttribute('max') ? Number(this._input.getAttribute('max')) : Infinity);
+        const step = this.step ?? (Number(this._input?.getAttribute('step')) || 1);
+        return { min, max, step };
+    }
+    _syncConstraints() {
+        if (!this._input)
+            return;
+        const { min, max, step } = this._getConstraints();
+        this._input.min = String(min);
+        if (Number.isFinite(max))
+            this._input.max = String(max);
+        this._input.step = String(step);
+        this._rebuildTrackNumbers();
+        this._updateTrack();
+    }
+    // --- Value ---
+    _applyValue(val) {
+        if (!this._input)
+            return;
+        this._input.value = String(val);
+        this._updateButtonStates();
+        this._updateTrack();
+        this.emit('change', { detail: { value: val } });
+    }
+    // --- Track ---
+    _updateTrack() {
+        if (!this._track)
+            return;
+        const { min, step } = this._getConstraints();
+        const value = this._input?.valueAsNumber ?? min;
+        const offset = (min - value) / step;
+        this._track.style.translate = `0 calc(${offset} * var(--_button-size))`;
+        if (this._skipTransition) {
+            this._track.style.transition = 'none';
+            void this._track.offsetHeight;
+            this._track.style.transition = '';
+            this._skipTransition = false;
+        }
+    }
+    // --- Button states ---
+    _updateButtonStates() {
+        if (!this._input || !this._decrementBtn || !this._incrementBtn)
+            return;
+        const { min, max } = this._getConstraints();
+        const value = this._input.valueAsNumber;
+        const disabled = this._input.disabled;
+        this._decrementBtn.disabled = disabled || value <= min;
+        this._incrementBtn.disabled = disabled || value >= max;
+    }
+}
+__decorate([
+    property({ type: Number })
+], LuxenInputStepper.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], LuxenInputStepper.prototype, "max", void 0);
+__decorate([
+    property({ type: Number })
+], LuxenInputStepper.prototype, "step", void 0);
+__decorate([
+    property({ reflect: true })
+], LuxenInputStepper.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'with-roller' })
+], LuxenInputStepper.prototype, "withRoller", void 0);
+__decorate([
+    property({ attribute: 'decrement-icon' })
+], LuxenInputStepper.prototype, "decrementIcon", void 0);
+__decorate([
+    property({ attribute: 'increment-icon' })
+], LuxenInputStepper.prototype, "incrementIcon", void 0);

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

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

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

@@ -0,0 +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"}

package/dist/elements/popover/index.js

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

package/dist/elements/popover/popover.css

@@ -0,0 +1,61 @@
+:host {
+  --background: var(--l-color-bg-surface, Canvas);
+  --color: inherit;
+  --radius: 8px;
+  --max-width: 320px;
+  --shadow: 0 4px 16px rgb(0 0 0 / 12%);
+  --arrow-size: 8px;
+  --show-duration: 150ms;
+  --hide-duration: 150ms;
+
+  --_border-color: var(--l-color-border, light-dark(#e5e7eb, #374151));
+
+  display: contents;
+}
+
+[popover] {
+  inset: unset;
+  overflow: visible;
+  isolation: isolate;
+  box-sizing: border-box;
+  width: max-content;
+  max-width: var(--max-width);
+  padding: 12px 16px;
+  border: 1px solid var(--_border-color);
+  border-radius: var(--radius);
+  background: var(--background);
+  color: var(--color);
+  font-size: 0.875rem;
+  line-height: 1.5;
+  box-shadow: var(--shadow);
+}
+
+i {
+  position: absolute;
+  display: block;
+  width: var(--arrow-size);
+  height: var(--arrow-size);
+  background: var(--background);
+  transform: rotate(45deg);
+  z-index: -1;
+}
+
+: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);
+}

package/dist/elements/popover/popover.d.ts

@@ -0,0 +1,62 @@
+import { type PropertyValues } from 'lit';
+import { LuxenElement } from '../../shared/luxen-element';
+import type { Placement } from '@floating-ui/dom';
+/**
+ * @summary A popover that displays interactive content anchored to a trigger.
+ * @customElement l-popover
+ *
+ * @slot - Popover content.
+ *
+ * @csspart body - The popover container.
+ * @csspart arrow - The directional arrow element.
+ *
+ * @cssproperty --background - Background color. Default: `Canvas`.
+ * @cssproperty --color - Text color. Default: inherited.
+ * @cssproperty --radius - Border radius. Default `8px`.
+ * @cssproperty --max-width - Maximum width. Default `320px`.
+ * @cssproperty --shadow - Box shadow.
+ * @cssproperty --arrow-size - Arrow size. Default `8px`.
+ * @cssproperty --show-duration - Show animation duration. Default `150ms`.
+ * @cssproperty --hide-duration - Hide animation duration. Default `150ms`.
+ */
+export declare class LuxenPopover extends LuxenElement {
+    static styles: import("lit").CSSResult[];
+    private _popoverId;
+    private _floating;
+    /** The HTML id of the element triggering the popover. */
+    accessor for: string;
+    /** The preferred placement of the popover. */
+    accessor placement: Placement;
+    /** The distance in pixels from the target element. */
+    accessor distance: number;
+    /** Whether or not the popover is visible. */
+    accessor open: boolean;
+    /** Hide the directional arrow. */
+    accessor withoutArrow: boolean;
+    /** Space-separated list of trigger modes: `click`, `hover`, `focus`, `manual`. */
+    accessor trigger: string;
+    private _hasTrigger;
+    private get _trigger();
+    private get _popoverEl();
+    private get _arrowEl();
+    private _getDuration;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: PropertyValues<this>): void;
+    show(): void;
+    hide(): void;
+    toggle(): void;
+    private _handleOpenChange;
+    private _onPointerEnter;
+    private _onPointerLeave;
+    private _onFocusIn;
+    private _onFocusOut;
+    private _onClick;
+    private _onKeyDown;
+    /** Sync `open` when popover="auto" light-dismiss fires. */
+    private _onToggle;
+    private _addTriggerListeners;
+    private _removeTriggerListeners;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=popover.d.ts.map

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

@@ -0,0 +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,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;IA0B/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/dist/elements/popover/popover.js

@@ -0,0 +1,244 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _LuxenPopover_for_accessor_storage, _LuxenPopover_placement_accessor_storage, _LuxenPopover_distance_accessor_storage, _LuxenPopover_open_accessor_storage, _LuxenPopover_withoutArrow_accessor_storage, _LuxenPopover_trigger_accessor_storage;
+import { html, nothing, unsafeCSS } from 'lit';
+import { LuxenElement } from '../../shared/luxen-element';
+import { property } from 'lit/decorators.js';
+import { PopoverController } from '../../shared/controllers/popover';
+import { uniqueId } from '../../registry';
+import hostStyles from '../../shared/styles/host.styles';
+import rawStyles from './popover.css?inline';
+const styles = unsafeCSS(rawStyles);
+/**
+ * @summary A popover that displays interactive content anchored to a trigger.
+ * @customElement l-popover
+ *
+ * @slot - Popover content.
+ *
+ * @csspart body - The popover container.
+ * @csspart arrow - The directional arrow element.
+ *
+ * @cssproperty --background - Background color. Default: `Canvas`.
+ * @cssproperty --color - Text color. Default: inherited.
+ * @cssproperty --radius - Border radius. Default `8px`.
+ * @cssproperty --max-width - Maximum width. Default `320px`.
+ * @cssproperty --shadow - Box shadow.
+ * @cssproperty --arrow-size - Arrow size. Default `8px`.
+ * @cssproperty --show-duration - Show animation duration. Default `150ms`.
+ * @cssproperty --hide-duration - Hide animation duration. Default `150ms`.
+ */
+export class LuxenPopover extends LuxenElement {
+    constructor() {
+        super(...arguments);
+        this._popoverId = uniqueId('popover');
+        this._floating = new PopoverController(this, {
+            getTriggerElement: () => this._trigger,
+            getFloatingElement: () => this._popoverEl,
+            getArrowElement: () => this._arrowEl,
+            onPlacementChange: (p) => {
+                this.dataset.placement = p;
+            },
+        });
+        _LuxenPopover_for_accessor_storage.set(this, '');
+        _LuxenPopover_placement_accessor_storage.set(this, 'bottom');
+        _LuxenPopover_distance_accessor_storage.set(this, 8);
+        _LuxenPopover_open_accessor_storage.set(this, false);
+        _LuxenPopover_withoutArrow_accessor_storage.set(this, false);
+        _LuxenPopover_trigger_accessor_storage.set(this, 'click');
+        // --- Trigger event handlers ---
+        this._onPointerEnter = () => {
+            if (!this._hasTrigger('hover'))
+                return;
+            this._floating.cleanupSafePolygon();
+            this.show();
+        };
+        this._onPointerLeave = (e) => {
+            if (!this._hasTrigger('hover') || !this.open)
+                return;
+            this._floating.handlePointerLeave(e, () => this.hide());
+        };
+        this._onFocusIn = () => {
+            if (this._hasTrigger('focus'))
+                this.show();
+        };
+        this._onFocusOut = () => {
+            if (this._hasTrigger('focus'))
+                this.hide();
+        };
+        this._onClick = () => {
+            if (this._hasTrigger('click'))
+                this.toggle();
+        };
+        this._onKeyDown = (e) => {
+            if (this.open && e.key === 'Escape') {
+                e.stopPropagation();
+                this.hide();
+            }
+        };
+        /** Sync `open` when popover="auto" light-dismiss fires. */
+        this._onToggle = (e) => {
+            const toggleEvent = e;
+            if (toggleEvent.newState === 'closed' && this.open) {
+                this.open = false;
+            }
+        };
+    }
+    /** The HTML id of the element triggering the popover. */
+    get for() { return __classPrivateFieldGet(this, _LuxenPopover_for_accessor_storage, "f"); }
+    set for(value) { __classPrivateFieldSet(this, _LuxenPopover_for_accessor_storage, value, "f"); }
+    /** The preferred placement of the popover. */
+    get placement() { return __classPrivateFieldGet(this, _LuxenPopover_placement_accessor_storage, "f"); }
+    set placement(value) { __classPrivateFieldSet(this, _LuxenPopover_placement_accessor_storage, value, "f"); }
+    /** The distance in pixels from the target element. */
+    get distance() { return __classPrivateFieldGet(this, _LuxenPopover_distance_accessor_storage, "f"); }
+    set distance(value) { __classPrivateFieldSet(this, _LuxenPopover_distance_accessor_storage, value, "f"); }
+    /** Whether or not the popover is visible. */
+    get open() { return __classPrivateFieldGet(this, _LuxenPopover_open_accessor_storage, "f"); }
+    set open(value) { __classPrivateFieldSet(this, _LuxenPopover_open_accessor_storage, value, "f"); }
+    /** Hide the directional arrow. */
+    get withoutArrow() { return __classPrivateFieldGet(this, _LuxenPopover_withoutArrow_accessor_storage, "f"); }
+    set withoutArrow(value) { __classPrivateFieldSet(this, _LuxenPopover_withoutArrow_accessor_storage, value, "f"); }
+    /** Space-separated list of trigger modes: `click`, `hover`, `focus`, `manual`. */
+    get trigger() { return __classPrivateFieldGet(this, _LuxenPopover_trigger_accessor_storage, "f"); }
+    set trigger(value) { __classPrivateFieldSet(this, _LuxenPopover_trigger_accessor_storage, value, "f"); }
+    _hasTrigger(type) {
+        return this.trigger.split(' ').includes(type);
+    }
+    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(prop) {
+        const parsed = parseFloat(getComputedStyle(this).getPropertyValue(prop));
+        return Number.isNaN(parsed) ? 150 : parsed;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        requestAnimationFrame(() => this._addTriggerListeners());
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._removeTriggerListeners();
+    }
+    updated(changed) {
+        if (changed.has('open')) {
+            this._handleOpenChange();
+        }
+        if (changed.has('for')) {
+            this._removeTriggerListeners(changed.get('for'));
+            this._addTriggerListeners();
+        }
+    }
+    show() {
+        if (!this.open)
+            this.open = true;
+    }
+    hide() {
+        if (this.open)
+            this.open = false;
+    }
+    toggle() {
+        this.open = !this.open;
+    }
+    async _handleOpenChange() {
+        const popover = this._popoverEl;
+        if (!popover)
+            return;
+        const posOpts = { placement: this.placement, distance: this.distance };
+        if (this.open) {
+            popover.showPopover();
+            await this._floating.updatePosition(posOpts);
+            if (!this.open)
+                return;
+            await this._floating.animateShow(popover, this._getDuration('--show-duration'));
+            this._floating.startPositioning(posOpts);
+            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(popover, this._getDuration('--hide-duration'));
+            if (popover.matches(':popover-open'))
+                popover.hidePopover();
+        }
+    }
+    _addTriggerListeners() {
+        this._floating.addTriggerListeners({
+            onPointerEnter: this._onPointerEnter,
+            onPointerLeave: this._onPointerLeave,
+            onFocusIn: this._onFocusIn,
+            onFocusOut: this._onFocusOut,
+            onClick: this._onClick,
+            onKeyDown: this._onKeyDown,
+        });
+    }
+    _removeTriggerListeners(forId) {
+        const trigger = forId
+            ? this.getRootNode().getElementById(forId)
+            : undefined;
+        this._floating.removeTriggerListeners(trigger);
+    }
+    render() {
+        return html `
+      <div
+        id=${this._popoverId}
+        popover="auto"
+        part="body"
+        @toggle=${this._onToggle}
+      >
+        ${this.withoutArrow
+            ? nothing
+            : html `
+              <i
+                part="arrow"
+                role="presentation"
+              ></i>
+            `}
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+_LuxenPopover_for_accessor_storage = new WeakMap(), _LuxenPopover_placement_accessor_storage = new WeakMap(), _LuxenPopover_distance_accessor_storage = new WeakMap(), _LuxenPopover_open_accessor_storage = new WeakMap(), _LuxenPopover_withoutArrow_accessor_storage = new WeakMap(), _LuxenPopover_trigger_accessor_storage = new WeakMap();
+LuxenPopover.styles = [hostStyles, styles];
+__decorate([
+    property()
+], LuxenPopover.prototype, "for", null);
+__decorate([
+    property()
+], LuxenPopover.prototype, "placement", null);
+__decorate([
+    property({ type: Number })
+], LuxenPopover.prototype, "distance", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LuxenPopover.prototype, "open", null);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'without-arrow' })
+], LuxenPopover.prototype, "withoutArrow", null);
+__decorate([
+    property()
+], LuxenPopover.prototype, "trigger", null);

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

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

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

@@ -0,0 +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"}

package/dist/elements/rating/index.js

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