luxen-ui 0.1.0

package/dist/shared/controllers/popover.js

@@ -0,0 +1,359 @@
+import { computePosition, autoUpdate, offset, flip, shift, arrow, } from '@floating-ui/dom';
+/** Check if a point is inside a polygon using ray-casting. */
+function isPointInPolygon([px, py], polygon) {
+    let inside = false;
+    for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+        const [xi, yi] = polygon[i];
+        const [xj, yj] = polygon[j];
+        if (yi >= py !== yj >= py && px <= ((xj - xi) * (py - yi)) / (yj - yi) + xi) {
+            inside = !inside;
+        }
+    }
+    return inside;
+}
+/** Check if a point is inside a rect. */
+function isPointInRect([px, py], rect) {
+    return px >= rect.left && px <= rect.right && py >= rect.top && py <= rect.bottom;
+}
+/**
+ * Build a safe polygon (triangle/quadrilateral) from cursor to floating element edges.
+ * Adapted from floating-ui/safePolygon.
+ * @see https://github.com/floating-ui/floating-ui/blob/master/packages/react/src/safePolygon.ts
+ */
+function getSafePolygon(cursorX, cursorY, rect, refRect, placement) {
+    const side = placement.split('-')[0];
+    const buffer = 2;
+    const isFloatingWider = rect.width > refRect.width;
+    const isFloatingTaller = rect.height > refRect.height;
+    const cursorLeaveFromRight = cursorX > rect.right - rect.width / 2;
+    const cursorLeaveFromBottom = cursorY > rect.bottom - rect.height / 2;
+    switch (side) {
+        case 'top': {
+            const c1 = [
+                isFloatingWider
+                    ? cursorX + buffer / 2
+                    : cursorLeaveFromRight
+                        ? cursorX + buffer * 4
+                        : cursorX - buffer * 4,
+                cursorY + buffer + 1,
+            ];
+            const c2 = [
+                isFloatingWider
+                    ? cursorX - buffer / 2
+                    : cursorLeaveFromRight
+                        ? cursorX + buffer * 4
+                        : cursorX - buffer * 4,
+                cursorY + buffer + 1,
+            ];
+            return [
+                c1,
+                c2,
+                [
+                    rect.left,
+                    cursorLeaveFromRight
+                        ? rect.bottom - buffer
+                        : isFloatingWider
+                            ? rect.bottom - buffer
+                            : rect.top,
+                ],
+                [
+                    rect.right,
+                    cursorLeaveFromRight
+                        ? isFloatingWider
+                            ? rect.bottom - buffer
+                            : rect.top
+                        : rect.bottom - buffer,
+                ],
+            ];
+        }
+        case 'bottom': {
+            const c1 = [
+                isFloatingWider
+                    ? cursorX + buffer / 2
+                    : cursorLeaveFromRight
+                        ? cursorX + buffer * 4
+                        : cursorX - buffer * 4,
+                cursorY - buffer,
+            ];
+            const c2 = [
+                isFloatingWider
+                    ? cursorX - buffer / 2
+                    : cursorLeaveFromRight
+                        ? cursorX + buffer * 4
+                        : cursorX - buffer * 4,
+                cursorY - buffer,
+            ];
+            return [
+                c1,
+                c2,
+                [
+                    rect.left,
+                    cursorLeaveFromRight
+                        ? rect.top + buffer
+                        : isFloatingWider
+                            ? rect.top + buffer
+                            : rect.bottom,
+                ],
+                [
+                    rect.right,
+                    cursorLeaveFromRight
+                        ? isFloatingWider
+                            ? rect.top + buffer
+                            : rect.bottom
+                        : rect.top + buffer,
+                ],
+            ];
+        }
+        case 'left': {
+            const c1 = [
+                cursorX + buffer + 1,
+                isFloatingTaller
+                    ? cursorY + buffer / 2
+                    : cursorLeaveFromBottom
+                        ? cursorY + buffer * 4
+                        : cursorY - buffer * 4,
+            ];
+            const c2 = [
+                cursorX + buffer + 1,
+                isFloatingTaller
+                    ? cursorY - buffer / 2
+                    : cursorLeaveFromBottom
+                        ? cursorY + buffer * 4
+                        : cursorY - buffer * 4,
+            ];
+            return [
+                [
+                    cursorLeaveFromBottom
+                        ? rect.right - buffer
+                        : isFloatingTaller
+                            ? rect.right - buffer
+                            : rect.left,
+                    rect.top,
+                ],
+                [
+                    cursorLeaveFromBottom
+                        ? isFloatingTaller
+                            ? rect.right - buffer
+                            : rect.left
+                        : rect.right - buffer,
+                    rect.bottom,
+                ],
+                c1,
+                c2,
+            ];
+        }
+        case 'right': {
+            const c1 = [
+                cursorX - buffer,
+                isFloatingTaller
+                    ? cursorY + buffer / 2
+                    : cursorLeaveFromBottom
+                        ? cursorY + buffer * 4
+                        : cursorY - buffer * 4,
+            ];
+            const c2 = [
+                cursorX - buffer,
+                isFloatingTaller
+                    ? cursorY - buffer / 2
+                    : cursorLeaveFromBottom
+                        ? cursorY + buffer * 4
+                        : cursorY - buffer * 4,
+            ];
+            return [
+                [
+                    cursorLeaveFromBottom
+                        ? rect.left + buffer
+                        : isFloatingTaller
+                            ? rect.left + buffer
+                            : rect.right,
+                    rect.top,
+                ],
+                [
+                    cursorLeaveFromBottom
+                        ? isFloatingTaller
+                            ? rect.left + buffer
+                            : rect.right
+                        : rect.left + buffer,
+                    rect.bottom,
+                ],
+                c1,
+                c2,
+            ];
+        }
+        default:
+            return [];
+    }
+}
+// --- Constants ---
+const STATIC_SIDE = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' };
+const reducedMotion = typeof window !== 'undefined' ? window.matchMedia('(prefers-reduced-motion: reduce)') : undefined;
+export class PopoverController {
+    constructor(host, config) {
+        this._currentPlacement = '';
+        this._host = host;
+        this._config = config;
+        host.addController(this);
+    }
+    hostConnected() { }
+    hostDisconnected() {
+        this.stopPositioning();
+        this.cleanupSafePolygon();
+        this.removeTriggerListeners();
+    }
+    get currentPlacement() {
+        return this._currentPlacement;
+    }
+    // --- Positioning ---
+    async updatePosition(options) {
+        const trigger = this._config.getTriggerElement();
+        const floating = this._config.getFloatingElement();
+        const arrowEl = this._config.getArrowElement();
+        if (!trigger || !floating)
+            return;
+        const middleware = [
+            offset(options.distance),
+            flip(),
+            shift(),
+            ...(arrowEl ? [arrow({ element: arrowEl, padding: 8 })] : []),
+        ];
+        const { x, y, placement, middlewareData } = await computePosition(trigger, floating, {
+            placement: options.placement,
+            strategy: 'fixed',
+            middleware,
+        });
+        Object.assign(floating.style, {
+            position: 'fixed',
+            left: `${x}px`,
+            top: `${y}px`,
+        });
+        if (placement !== this._currentPlacement) {
+            this._currentPlacement = placement;
+            this._config.onPlacementChange?.(placement);
+        }
+        if (middlewareData.arrow && arrowEl) {
+            const { x: ax, y: ay } = middlewareData.arrow;
+            const side = STATIC_SIDE[placement.split('-')[0]];
+            Object.assign(arrowEl.style, {
+                left: ax != null ? `${ax}px` : '',
+                top: ay != null ? `${ay}px` : '',
+                [side]: `${-arrowEl.offsetWidth / 2}px`,
+            });
+        }
+    }
+    startPositioning(options) {
+        const trigger = this._config.getTriggerElement();
+        const floating = this._config.getFloatingElement();
+        if (!trigger || !floating)
+            return;
+        this._cleanupAutoUpdate?.();
+        this._cleanupAutoUpdate = autoUpdate(trigger, floating, () => this.updatePosition(options));
+    }
+    stopPositioning() {
+        this._cleanupAutoUpdate?.();
+        this._cleanupAutoUpdate = undefined;
+    }
+    // --- Safe polygon ---
+    handlePointerLeave(e, onHide) {
+        const floating = this._config.getFloatingElement();
+        const trigger = this._config.getTriggerElement();
+        if (!floating || !trigger) {
+            onHide();
+            return;
+        }
+        const cursorX = e.clientX;
+        const cursorY = e.clientY;
+        const onMove = (moveEvent) => {
+            const { clientX: mx, clientY: my } = moveEvent;
+            const cursor = [mx, my];
+            const rect = floating.getBoundingClientRect();
+            const refRect = trigger.getBoundingClientRect();
+            const side = this._currentPlacement.split('-')[0];
+            if (isPointInRect(cursor, rect))
+                return;
+            if (isPointInRect(cursor, refRect))
+                return;
+            if ((side === 'top' && cursorY >= refRect.bottom - 1) ||
+                (side === 'bottom' && cursorY <= refRect.top + 1) ||
+                (side === 'left' && cursorX >= refRect.right - 1) ||
+                (side === 'right' && cursorX <= refRect.left + 1)) {
+                cleanup();
+                onHide();
+                return;
+            }
+            const polygon = getSafePolygon(cursorX, cursorY, rect, refRect, this._currentPlacement);
+            if (isPointInPolygon(cursor, polygon))
+                return;
+            cleanup();
+            onHide();
+        };
+        const cleanup = () => {
+            document.removeEventListener('pointermove', onMove);
+        };
+        document.addEventListener('pointermove', onMove);
+        this._cleanupSafePolygon?.();
+        this._cleanupSafePolygon = cleanup;
+    }
+    cleanupSafePolygon() {
+        this._cleanupSafePolygon?.();
+        this._cleanupSafePolygon = undefined;
+    }
+    // --- Trigger listener management ---
+    addTriggerListeners(handlers) {
+        const trigger = this._config.getTriggerElement();
+        if (!trigger)
+            return;
+        this._handlers = handlers;
+        this._triggerElement = trigger;
+        if (handlers.onPointerEnter)
+            trigger.addEventListener('pointerenter', handlers.onPointerEnter);
+        if (handlers.onPointerLeave)
+            trigger.addEventListener('pointerleave', handlers.onPointerLeave);
+        if (handlers.onFocusIn)
+            trigger.addEventListener('focusin', handlers.onFocusIn);
+        if (handlers.onFocusOut)
+            trigger.addEventListener('focusout', handlers.onFocusOut);
+        if (handlers.onClick)
+            trigger.addEventListener('click', handlers.onClick);
+        if (handlers.onKeyDown)
+            trigger.addEventListener('keydown', handlers.onKeyDown);
+    }
+    removeTriggerListeners(triggerOverride) {
+        const trigger = triggerOverride ?? this._triggerElement;
+        const handlers = this._handlers;
+        if (!trigger || !handlers)
+            return;
+        if (handlers.onPointerEnter)
+            trigger.removeEventListener('pointerenter', handlers.onPointerEnter);
+        if (handlers.onPointerLeave)
+            trigger.removeEventListener('pointerleave', handlers.onPointerLeave);
+        if (handlers.onFocusIn)
+            trigger.removeEventListener('focusin', handlers.onFocusIn);
+        if (handlers.onFocusOut)
+            trigger.removeEventListener('focusout', handlers.onFocusOut);
+        if (handlers.onClick)
+            trigger.removeEventListener('click', handlers.onClick);
+        if (handlers.onKeyDown)
+            trigger.removeEventListener('keydown', handlers.onKeyDown);
+        if (!triggerOverride) {
+            this._handlers = undefined;
+            this._triggerElement = undefined;
+        }
+    }
+    // --- Animation ---
+    async animateShow(el, duration, keyframes) {
+        const d = reducedMotion?.matches ? 0 : duration;
+        el.getAnimations().forEach((a) => a.cancel());
+        el.animate(keyframes ?? [
+            { opacity: 0, scale: 0.96 },
+            { opacity: 1, scale: 1 },
+        ], { duration: d, fill: 'forwards' });
+    }
+    async animateHide(el, duration, keyframes) {
+        const d = reducedMotion?.matches ? 0 : duration;
+        const anim = el.animate(keyframes ?? [
+            { opacity: 1, scale: 1 },
+            { opacity: 0, scale: 0.96 },
+        ], { duration: d, fill: 'forwards' });
+        await anim.finished;
+    }
+}

package/dist/shared/luxen-element.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+/**
+ * Base class for all Luxen custom elements.
+ * Extends LitElement with shared utilities.
+ */
+export declare class LuxenElement extends LitElement {
+    /**
+     * Dispatch a custom event. Returns `true` if not cancelled.
+     *
+     * @param name - Event name (unprefixed, e.g. `'show'`).
+     * @param options - CustomEvent options. Defaults: bubbles + composed.
+     */
+    emit<T = unknown>(name: string, options?: {
+        detail?: T;
+        bubbles?: boolean;
+        composed?: boolean;
+        cancelable?: boolean;
+    }): boolean;
+}
+//# sourceMappingURL=luxen-element.d.ts.map

package/dist/shared/luxen-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"luxen-element.d.ts","sourceRoot":"","sources":["../../src/html/shared/luxen-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC;;;GAGG;AACH,qBAAa,YAAa,SAAQ,UAAU;IAC1C;;;;;OAKG;IACH,IAAI,CAAC,CAAC,GAAG,OAAO,EACd,IAAI,EAAE,MAAM,EACZ,OAAO,CAAC,EAAE;QACR,MAAM,CAAC,EAAE,CAAC,CAAC;QACX,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,UAAU,CAAC,EAAE,OAAO,CAAC;KACtB,GACA,OAAO;CAUX"}

package/dist/shared/luxen-element.js

@@ -0,0 +1,23 @@
+import { LitElement } from 'lit';
+/**
+ * Base class for all Luxen custom elements.
+ * Extends LitElement with shared utilities.
+ */
+export class LuxenElement extends LitElement {
+    /**
+     * Dispatch a custom event. Returns `true` if not cancelled.
+     *
+     * @param name - Event name (unprefixed, e.g. `'show'`).
+     * @param options - CustomEvent options. Defaults: bubbles + composed.
+     */
+    emit(name, options) {
+        const event = new CustomEvent(name, {
+            bubbles: options?.bubbles ?? true,
+            composed: options?.composed ?? true,
+            cancelable: options?.cancelable ?? false,
+            detail: options?.detail,
+        });
+        this.dispatchEvent(event);
+        return !event.defaultPrevented;
+    }
+}

package/dist/shared/luxen-form-associated-element.d.ts

@@ -0,0 +1,49 @@
+import { LuxenElement } from './luxen-element';
+/**
+ * Base class for form-associated Luxen custom elements.
+ * Implements the Form Associated Custom Elements API via ElementInternals.
+ *
+ * Subclasses own their typed `value` property and call `_syncFormValue()`
+ * whenever it changes.
+ */
+export declare class LuxenFormAssociatedElement extends LuxenElement {
+    static formAssociated: boolean;
+    /** @internal */
+    readonly _internals: ElementInternals;
+    name: string;
+    disabled: boolean;
+    required: boolean;
+    /** The serialised value the element resets to on form reset. */
+    protected _defaultFormValue: string;
+    /** Whether the user has interacted with this control. */
+    hasInteracted: boolean;
+    constructor();
+    /** The form this control is associated with. */
+    get form(): HTMLFormElement | null;
+    /** `<label>` elements associated with this control via `for` attribute. */
+    get formLabels(): NodeList;
+    /**
+     * Override to return the inner element where validation popups anchor.
+     * Passed as the 3rd arg to `ElementInternals.setValidity()`.
+     */
+    get validationTarget(): HTMLElement | undefined;
+    /** Update the form submission value. */
+    protected _syncFormValue(value: string): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    /** Set a custom validity message. Pass `''` to clear. */
+    setCustomValidity(message: string): void;
+    /** Directly set validity flags. With no args, clears all flags. */
+    protected setValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    /** Update `:state()` custom states based on current validity and interaction. */
+    private _updateCustomStates;
+    private _toggleState;
+    formAssociatedCallback(_form: HTMLFormElement | null): void;
+    formDisabledCallback(disabled: boolean): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string, _mode: 'restore' | 'autocomplete'): void;
+}
+//# sourceMappingURL=luxen-form-associated-element.d.ts.map

package/dist/shared/luxen-form-associated-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"luxen-form-associated-element.d.ts","sourceRoot":"","sources":["../../src/html/shared/luxen-form-associated-element.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C;;;;;;GAMG;AACH,qBAAa,0BAA2B,SAAQ,YAAY;IAC1D,MAAM,CAAC,cAAc,UAAQ;IAE7B,gBAAgB;IAChB,QAAQ,CAAC,UAAU,EAAE,gBAAgB,CAAC;IAGtC,IAAI,SAAM;IAGV,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAEjB,gEAAgE;IAChE,SAAS,CAAC,iBAAiB,SAAM;IAEjC,yDAAyD;IACzD,aAAa,UAAS;;IAOtB,gDAAgD;IAChD,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAED,2EAA2E;IAC3E,IAAI,UAAU,IAAI,QAAQ,CAEzB;IAED;;;OAGG;IACH,IAAI,gBAAgB,IAAI,WAAW,GAAG,SAAS,CAE9C;IAID,wCAAwC;IACxC,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAM7C,aAAa,IAAI,OAAO;IAIxB,cAAc,IAAI,OAAO;IAMzB,yDAAyD;IACzD,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IASxC,mEAAmE;IACnE,SAAS,CAAC,WAAW,CAAC,KAAK,GAAE,kBAAuB,EAAE,OAAO,SAAK,EAAE,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI;IAK/F,IAAI,QAAQ,IAAI,aAAa,CAE5B;IAED,IAAI,iBAAiB,IAAI,MAAM,CAE9B;IAED,IAAI,YAAY,IAAI,OAAO,CAE1B;IAED,iFAAiF;IACjF,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,YAAY;IAUpB,sBAAsB,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,GAAG,IAAI;IAE3D,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAI7C,iBAAiB,IAAI,IAAI;IAMzB,wBAAwB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,GAAG,cAAc,GAAG,IAAI;CAGjF"}

package/dist/shared/luxen-form-associated-element.js

@@ -0,0 +1,123 @@
+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 './luxen-element';
+/**
+ * Base class for form-associated Luxen custom elements.
+ * Implements the Form Associated Custom Elements API via ElementInternals.
+ *
+ * Subclasses own their typed `value` property and call `_syncFormValue()`
+ * whenever it changes.
+ */
+export class LuxenFormAssociatedElement extends LuxenElement {
+    constructor() {
+        super();
+        this.name = '';
+        this.disabled = false;
+        this.required = false;
+        /** The serialised value the element resets to on form reset. */
+        this._defaultFormValue = '';
+        /** Whether the user has interacted with this control. */
+        this.hasInteracted = false;
+        this._internals = this.attachInternals();
+    }
+    /** The form this control is associated with. */
+    get form() {
+        return this._internals.form;
+    }
+    /** `<label>` elements associated with this control via `for` attribute. */
+    get formLabels() {
+        return this._internals.labels;
+    }
+    /**
+     * Override to return the inner element where validation popups anchor.
+     * Passed as the 3rd arg to `ElementInternals.setValidity()`.
+     */
+    get validationTarget() {
+        return undefined;
+    }
+    // --- Form value ---
+    /** Update the form submission value. */
+    _syncFormValue(value) {
+        this._internals.setFormValue(value);
+    }
+    // --- Validity ---
+    checkValidity() {
+        return this._internals.checkValidity();
+    }
+    reportValidity() {
+        this.hasInteracted = true;
+        this._updateCustomStates();
+        return this._internals.reportValidity();
+    }
+    /** Set a custom validity message. Pass `''` to clear. */
+    setCustomValidity(message) {
+        if (message) {
+            this._internals.setValidity({ customError: true }, message, this.validationTarget);
+        }
+        else {
+            this._internals.setValidity({});
+        }
+        this._updateCustomStates();
+    }
+    /** Directly set validity flags. With no args, clears all flags. */
+    setValidity(flags = {}, message = '', anchor) {
+        this._internals.setValidity(flags, message, anchor ?? this.validationTarget);
+        this._updateCustomStates();
+    }
+    get validity() {
+        return this._internals.validity;
+    }
+    get validationMessage() {
+        return this._internals.validationMessage;
+    }
+    get willValidate() {
+        return this._internals.willValidate;
+    }
+    /** Update `:state()` custom states based on current validity and interaction. */
+    _updateCustomStates() {
+        const states = this._internals.states;
+        const isValid = this._internals.validity.valid;
+        this._toggleState(states, 'required', this.required);
+        this._toggleState(states, 'optional', !this.required);
+        this._toggleState(states, 'valid', isValid);
+        this._toggleState(states, 'invalid', !isValid);
+        this._toggleState(states, 'user-valid', isValid && this.hasInteracted);
+        this._toggleState(states, 'user-invalid', !isValid && this.hasInteracted);
+    }
+    _toggleState(states, name, force) {
+        if (force) {
+            states.add(name);
+        }
+        else {
+            states.delete(name);
+        }
+    }
+    // --- Form lifecycle callbacks ---
+    formAssociatedCallback(_form) { }
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+    }
+    formResetCallback() {
+        this.hasInteracted = false;
+        this._syncFormValue(this._defaultFormValue);
+        this._updateCustomStates();
+    }
+    formStateRestoreCallback(state, _mode) {
+        this._syncFormValue(state);
+    }
+}
+LuxenFormAssociatedElement.formAssociated = true;
+__decorate([
+    property({ reflect: true })
+], LuxenFormAssociatedElement.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LuxenFormAssociatedElement.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LuxenFormAssociatedElement.prototype, "required", void 0);

package/dist/shared/styles/host.css

@@ -0,0 +1,13 @@
+:host {
+  box-sizing: border-box;
+}
+
+:host *,
+:host *::before,
+:host *::after {
+  box-sizing: border-box;
+}
+
+[hidden] {
+  display: none !important;
+}

package/dist/shared/styles/host.styles.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Styles applied to every shadow-DOM element via `static styles`.
+ * Wrapper module: `unsafeCSS()` is called once here so all 12+ importers
+ * share the same `CSSResult` instance (one constructed `CSSStyleSheet`,
+ * not one per importing element).
+ */
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=host.styles.d.ts.map

package/dist/shared/styles/host.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"host.styles.d.ts","sourceRoot":"","sources":["../../../src/html/shared/styles/host.styles.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;;AACH,wBAA8B"}

package/dist/shared/styles/host.styles.js

@@ -0,0 +1,9 @@
+import { unsafeCSS } from 'lit';
+import raw from './host.css?inline';
+/**
+ * Styles applied to every shadow-DOM element via `static styles`.
+ * Wrapper module: `unsafeCSS()` is called once here so all 12+ importers
+ * share the same `CSSResult` instance (one constructed `CSSStyleSheet`,
+ * not one per importing element).
+ */
+export default unsafeCSS(raw);