@luzmo/lucero 1.0.1-alpha.9 → 1.0.2

package/components/top-nav/index.d.ts

@@ -0,0 +1,10 @@
+import { LuzmoTopNav } from './top-nav';
+import { LuzmoTopNavItem } from './top-nav-item';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-top-nav': LuzmoTopNav;
+        'luzmo-top-nav-item': LuzmoTopNavItem;
+    }
+}
+export { LuzmoTopNav } from './top-nav';
+export { LuzmoTopNavItem } from './top-nav-item';

package/components/top-nav/index.js

@@ -0,0 +1,25 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+(() => {
+	if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+		let e = document.createElement("style");
+		e.setAttribute("data-luzmo-vars", ""), e.textContent = "html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--luzmo-border-color-full-down: color-mix(in oklch, var(--luzmo-border-color-full), black 45%);--luzmo-border-color-full-focus: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-font-color-down: color-mix(in oklch, var(--luzmo-font-color), black 20%);--luzmo-font-color-focus: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-primary: #4434ff;--luzmo-primary-hover: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-down: color-mix(in oklch, var(--luzmo-primary), black 20%);--luzmo-primary-focus: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5%);--luzmo-background-color-down: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 7%), black 1%);--luzmo-background-color-focus: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5%);--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: color-mix(in oklch, var(--luzmo-background-color-highlight), black 25%);--luzmo-background-color-highlight-down: color-mix(in oklch, var(--luzmo-background-color-highlight), black 45%);--luzmo-background-color-highlight-focus: color-mix(in oklch, var(--luzmo-background-color-highlight), black 25%);--luzmo-secondary: #d000d0;--luzmo-secondary-hover: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-down: color-mix(in oklch, var(--luzmo-secondary), black 20%);--luzmo-secondary-focus: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 208, 0, 208;--luzmo-scrollbar-size: 6px;--luzmo-scrollbar-thumb-background: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-scrollbar-thumb-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-hover-background: rgba( var(--luzmo-border-color-rgb), 0.4 );--luzmo-scrollbar-track-background: transparent;--luzmo-scrollbar-track-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-width: thin;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-down: color-mix(in oklch, var(--luzmo-negative-color), black 20%);--luzmo-negative-color-focus: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-negative-inverse-color: #ffffff;--luzmo-positive-color: rgb(18, 133, 90);--luzmo-positive-color-hover: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-down: color-mix(in oklch, var(--luzmo-positive-color), black 20%);--luzmo-positive-color-focus: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-rgb: 18, 133, 90;--luzmo-positive-inverse-color: #ffffff;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-down: color-mix(in oklch, var(--luzmo-selected-color), black 45%);--luzmo-selected-color-focus: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-selected-color-hard-down: color-mix(in oklch, var(--luzmo-selected-color-hard), black 45%);--luzmo-selected-color-hard-focus: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-informative-color: #1670dd;--luzmo-informative-color-rgb: 22, 112, 221;--luzmo-notice-color: rgb(229, 127, 0);--luzmo-seafoam-color: rgb(0, 140, 140);--luzmo-indigo-color: rgb(68, 52, 255);--luzmo-purple-color: rgb(112, 48, 210);--luzmo-fuchsia-color: rgb(205, 30, 170);--luzmo-magenta-color: rgb(203, 36, 98);--luzmo-yellow-color: rgb(228, 208, 0);--luzmo-gray-color: rgb(110, 110, 110);--luzmo-red-color: rgb(202, 34, 28);--luzmo-orange-color: rgb(218, 123, 17);--luzmo-chartreuse-color: rgb(85, 135, 0);--luzmo-celery-color: rgb(48, 134, 22);--luzmo-green-color: rgb(18, 133, 90);--luzmo-cyan-color: rgb(0, 134, 180);--luzmo-blue-color: rgb(22, 112, 221);--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 10px;--luzmo-icon-size-xs: 12px;--luzmo-icon-size-s: 14px;--luzmo-icon-size-m: 16px;--luzmo-icon-size-l: 18px;--luzmo-icon-size-xl: 20px;--luzmo-icon-size-xxl: 32px}", document.head.appendChild(e);
+	}
+})();
+import { n as e, t } from "../top-nav-DVQ5ASMa.js";
+export { e as LuzmoTopNav, t as LuzmoTopNavItem };

package/components/top-nav/top-nav-item.d.ts

@@ -0,0 +1,26 @@
+import { CSSResultArray, PropertyValues, TemplateResult } from 'lit';
+import { LuzmoElement } from '../../utils/base.js';
+declare const LuzmoTopNavItem_base: typeof LuzmoElement;
+/**
+ * @element luzmo-top-nav-item
+ *
+ * @slot - text label of the navigation item
+ */
+export declare class LuzmoTopNavItem extends LuzmoTopNavItem_base {
+    static get styles(): CSSResultArray;
+    href: string;
+    target?: string;
+    download?: string;
+    rel?: string;
+    label?: string;
+    selected: boolean;
+    disabled: boolean;
+    value: string;
+    private anchorElement;
+    protected render(): TemplateResult;
+    protected firstUpdated(changes: PropertyValues): void;
+    protected updated(changes: PropertyValues): void;
+    click(): void;
+    get focusElement(): HTMLElement;
+}
+export {};

package/components/top-nav/top-nav.d.ts

@@ -0,0 +1,45 @@
+import { ResizeController } from '@lit-labs/observers/resize-controller.js';
+import { CSSResultArray, PropertyValues, TemplateResult } from 'lit';
+import { Focusable } from '../../utils/focusable.js';
+import { RovingTabindexController } from '../../utils/reactive-controllers/roving-tabindex.js';
+import { LuzmoTopNavItem } from './top-nav-item.js';
+declare const LuzmoTopNav_base: typeof Focusable & {
+    new (...args: any[]): import("../../index.js").SizedElementInterface;
+    prototype: import("../../index.js").SizedElementInterface;
+};
+/**
+ * @element luzmo-top-nav
+ *
+ * @slot - Navigation items to display in the top nav
+ *
+ * @fires change - The selected navigation item has changed.
+ */
+export declare class LuzmoTopNav extends LuzmoTopNav_base {
+    static get styles(): CSSResultArray;
+    label: string;
+    quiet: boolean;
+    selected: string;
+    selectionIndicatorStyle: string;
+    shouldAnimate: boolean;
+    private slotEl;
+    private listEl;
+    private set items(value);
+    private get items();
+    private _items;
+    constructor();
+    protected resizeController: ResizeController<void>;
+    rovingTabindexController: RovingTabindexController<LuzmoTopNavItem>;
+    get focusElement(): LuzmoTopNavItem | this;
+    protected render(): TemplateResult;
+    protected willUpdate(changes: PropertyValues): void;
+    protected firstUpdated(changes: PropertyValues): void;
+    private onClick;
+    private onKeyDown;
+    private selectTarget;
+    private onSlotChange;
+    private updateCheckedState;
+    private updateSelectionIndicator;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+export {};

package/components/top-nav-DVQ5ASMa.js

@@ -0,0 +1,203 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import { n as e, t } from "./decorate-aGxJUVxg.js";
+import { n } from "./sized-mixin-DaBoZkVS.js";
+import { t as r } from "./focus-visible-CrooVCUu.js";
+import { t as i } from "./focusable-BmS8IzhH.js";
+import { t as a } from "./roving-tabindex-BP6mQbXf.js";
+import { t as o } from "./scaled-indicator-BcO2BOsf.js";
+import { html as s, unsafeCSS as c } from "lit";
+import { property as l, query as u } from "lit/decorators.js";
+import { ifDefined as d } from "lit/directives/if-defined.js";
+import { IntersectionController as f } from "@lit-labs/observers/intersection-controller.js";
+import { ResizeController as p } from "@lit-labs/observers/resize-controller.js";
+//#region src/components/top-nav/top-nav-sizes.module.scss?inline
+var m = "#list{--top-nav-item-height:calc(var(--luzmo-component-height) + var(--luzmo-spacing-5));--top-nav-item-horizontal-spacing:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-3));--top-nav-top-to-text:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--top-nav-bottom-to-text:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--top-nav-focus-indicator-gap:var(--luzmo-spacing-3);--top-nav-font-size:var(--luzmo-font-size)}:host([size=s]) #list{--top-nav-item-height:calc(var(--luzmo-component-height-s) + var(--luzmo-spacing-4));--top-nav-item-horizontal-spacing:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-2));--top-nav-top-to-text:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--top-nav-bottom-to-text:var(--luzmo-spacing-4);--top-nav-focus-indicator-gap:var(--luzmo-spacing-3);--top-nav-font-size:var(--luzmo-font-size-s)}:host([size=l]) #list{--top-nav-item-height:calc(var(--luzmo-component-height-l) + var(--luzmo-spacing-5));--top-nav-item-horizontal-spacing:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-4));--top-nav-top-to-text:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--top-nav-bottom-to-text:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--top-nav-focus-indicator-gap:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--top-nav-font-size:var(--luzmo-font-size-l)}:host([size=xl]) #list{--top-nav-item-height:calc(var(--luzmo-component-height-xl) + var(--luzmo-spacing-5));--top-nav-item-horizontal-spacing:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-4));--top-nav-top-to-text:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--top-nav-bottom-to-text:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--top-nav-focus-indicator-gap:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--top-nav-font-size:var(--luzmo-font-size-xl)}", h = ":host{display:block}#list{--top-nav-color:var(--luzmo-font-color);--top-nav-color-selected:var(--luzmo-font-color-down);--top-nav-color-hover:var(--luzmo-font-color-hover);--top-nav-color-key-focus:var(--luzmo-font-color-focus);--top-nav-color-disabled:var(--luzmo-disabled-color);--top-nav-font-family:var(--luzmo-font-family);--top-nav-font-style:var(--luzmo-font-style);--top-nav-font-size:var(--luzmo-font-size);--top-nav-font-weight:var(--luzmo-font-weight);--top-nav-line-height:var(--luzmo-line-height);--top-nav-focus-indicator-width:var(--luzmo-indicator-width);--top-nav-focus-indicator-border-radius:var(--luzmo-border-radius);--top-nav-focus-indicator-color:var(--luzmo-indicator-color);--top-nav-selection-indicator-color:var(--luzmo-font-color-down);--top-nav-divider-size:2px;--top-nav-divider-border-radius:1px;--top-nav-animation-duration:var(--luzmo-animation-duration);--top-nav-animation-ease:ease-in-out;z-index:0;vertical-align:top;background:linear-gradient(to top, var(--highcontrast-top-nav-divider-background-color,var(--luzmo-top-nav-divider-background-color,var(--top-nav-divider-background-color,var(--luzmo-border-color)))) 0 var(--luzmo-top-nav-divider-size,var(--top-nav-divider-size)), transparent var(--luzmo-top-nav-divider-size,var(--top-nav-divider-size)));align-items:center;margin:0;padding-block:0;display:flex;position:relative}::slotted(:not(:first-child)){margin-inline-start:var(--luzmo-top-nav-item-horizontal-spacing,var(--top-nav-item-horizontal-spacing))}::slotted([selected]){color:var(--highcontrast-top-nav-color-selected,var(--luzmo-top-nav-color-selected,var(--top-nav-color-selected)))}::slotted([disabled]){cursor:default;color:var(--highcontrast-top-nav-color-disabled,var(--luzmo-top-nav-color-disabled,var(--top-nav-color-disabled)))}#selection-indicator{background-color:var(--highcontrast-top-nav-selection-indicator-color,var(--luzmo-top-nav-selection-indicator-color,var(--top-nav-selection-indicator-color)));z-index:0;transition:transform var(--luzmo-top-nav-animation-duration,var(--top-nav-animation-duration)) var(--luzmo-top-nav-animation-ease,var(--top-nav-animation-ease));transform-origin:0 0;border-radius:var(--luzmo-top-nav-divider-border-radius,var(--top-nav-divider-border-radius));block-size:var(--luzmo-top-nav-divider-size,var(--top-nav-divider-size));width:100px;position:absolute;inset-block-end:0;inset-inline-start:0}#selection-indicator.first-position{transition:none}:host([quiet]) #list{--top-nav-quiet-unselected-opacity:.7;--top-nav-quiet-unselected-opacity-hover:.85;background:0 0;border-color:#0000;display:inline-flex}:host([quiet]) ::slotted(:not([selected])){opacity:var(--luzmo-top-nav-quiet-unselected-opacity,var(--top-nav-quiet-unselected-opacity))}:host([quiet]) ::slotted(:not([selected]):hover){opacity:var(--luzmo-top-nav-quiet-unselected-opacity-hover,var(--top-nav-quiet-unselected-opacity-hover))}:host([quiet]) #selection-indicator{display:none}@media (forced-colors:active){#list{--highcontrast-top-nav-divider-background-color:var(--luzmo-border-color);--highcontrast-top-nav-selection-indicator-color:Highlight;--highcontrast-top-nav-focus-indicator-color:CanvasText;--highcontrast-top-nav-color:ButtonText;--highcontrast-top-nav-color-hover:ButtonText;--highcontrast-top-nav-color-selected:HighlightText;--highcontrast-top-nav-color-key-focus:ButtonText;--highcontrast-top-nav-color-disabled:GrayText;forced-color-adjust:none}}#list{--top-nav-font-weight:var(--luzmo-font-weight);--top-nav-divider-background-color:var(--luzmo-border-color)}", g = class extends n(i, { noDefaultSize: !0 }) {
+	static get styles() {
+		return [c(h), c(m)];
+	}
+	set items(e) {
+		e !== this.items && (this._items.forEach((e) => {
+			this.resizeController.unobserve(e);
+		}), e.forEach((e) => {
+			this.resizeController.observe(e);
+		}), this._items = e, this.rovingTabindexController.clearElementCache());
+	}
+	get items() {
+		return this._items;
+	}
+	constructor() {
+		super(), this.label = "", this.quiet = !1, this.selected = "", this.selectionIndicatorStyle = o.noSelectionStyle, this.shouldAnimate = !1, this._items = [], this.resizeController = new p(this, { callback: () => {
+			this.updateSelectionIndicator();
+		} }), this.rovingTabindexController = new a(this, {
+			focusInIndex: (e) => {
+				let t = 0;
+				return e.find((e, n) => {
+					let r = this.selected ? e.value === this.selected : !e.disabled;
+					return t = n, r;
+				}) ? t : -1;
+			},
+			direction: () => "horizontal",
+			elementEnterAction: (e) => {
+				this.shouldAnimate = !0, this.selectTarget(e);
+			},
+			elements: () => this.items,
+			isFocusableElement: (e) => !this.disabled && !e.disabled,
+			listenerScope: () => this.listEl
+		}), this.onClick = (e) => {
+			if (this.disabled) return;
+			let t = e.composedPath().find((e) => e.parentElement === this);
+			!t || t.disabled || (e.preventDefault(), this.shouldAnimate = !0, this.selectTarget(t));
+		}, this.onKeyDown = (e) => {
+			if (e.code === "Enter" || e.code === "Space") {
+				e.preventDefault();
+				let t = e.target;
+				t && this.selectTarget(t);
+			}
+		}, this.updateCheckedState = () => {
+			if (this.items.forEach((e) => {
+				e.removeAttribute("selected");
+			}), this.selected) {
+				let e = this.items.find((e) => e.value === this.selected);
+				e ? e.selected = !0 : this.selected = "";
+			} else {
+				let e = this.items[0];
+				e && e.setAttribute("tabindex", "0");
+			}
+			this.updateSelectionIndicator();
+		}, this.updateSelectionIndicator = async () => {
+			let e = this.items.find((e) => e.selected);
+			if (!e || this.quiet) {
+				this.selectionIndicatorStyle = o.noSelectionStyle;
+				return;
+			}
+			await Promise.all([e.updateComplete, document.fonts ? document.fonts.ready : Promise.resolve()]);
+			let t = e.getBoundingClientRect(), n = this.listEl.getBoundingClientRect(), r = t.left - n.left;
+			this.selectionIndicatorStyle = o.transformX(r, t.width);
+		}, new f(this, {
+			config: {
+				root: null,
+				rootMargin: "0px",
+				threshold: [0, 1]
+			},
+			callback: () => {
+				this.updateSelectionIndicator();
+			}
+		});
+	}
+	get focusElement() {
+		return this.rovingTabindexController.focusInElement || this;
+	}
+	render() {
+		return s`
+      <div
+        @click=${this.onClick}
+        @keydown=${this.onKeyDown}
+        id="list"
+      >
+        <slot @slotchange=${this.onSlotChange}></slot>
+        <div
+          id="selection-indicator"
+          class=${d(this.shouldAnimate ? void 0 : "first-position")}
+          style=${this.selectionIndicatorStyle}
+          role="presentation"
+        ></div>
+      </div>
+    `;
+	}
+	willUpdate(e) {
+		if (!this.hasUpdated) {
+			let e = this.querySelector(":scope > [selected]");
+			e && this.selectTarget(e);
+		}
+		super.willUpdate(e), e.has("selected") && this.items.length > 0 && this.updateCheckedState(), e.has("quiet") && this.updateSelectionIndicator(), e.has("label") && (this.label ? this.setAttribute("aria-label", this.label) : this.removeAttribute("aria-label")), e.has("disabled") && (this.disabled ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled")), !this.shouldAnimate && e.get("shouldAnimate") !== void 0 && (this.shouldAnimate = !0);
+	}
+	firstUpdated(e) {
+		super.firstUpdated(e), this.hasAttribute("role") || this.setAttribute("role", "navigation"), this.label && this.setAttribute("aria-label", this.label);
+	}
+	selectTarget(e) {
+		let t = e.getAttribute("value");
+		if (t) {
+			let e = this.selected;
+			this.selected = t, this.dispatchEvent(new Event("change", { cancelable: !0 })) || (this.selected = e);
+		}
+	}
+	onSlotChange() {
+		this.items = this.slotEl.assignedElements().filter((e) => e.tagName.toLowerCase() === "luzmo-top-nav-item"), this.updateCheckedState();
+	}
+	connectedCallback() {
+		super.connectedCallback(), window.addEventListener("resize", this.updateSelectionIndicator), "fonts" in document && document.fonts.addEventListener("loadingdone", this.updateSelectionIndicator);
+	}
+	disconnectedCallback() {
+		window.removeEventListener("resize", this.updateSelectionIndicator), "fonts" in document && document.fonts.removeEventListener("loadingdone", this.updateSelectionIndicator), super.disconnectedCallback();
+	}
+};
+t([l()], g.prototype, "label", void 0), t([l({
+	type: Boolean,
+	reflect: !0
+})], g.prototype, "quiet", void 0), t([l({ reflect: !0 })], g.prototype, "selected", void 0), t([l({ attribute: !1 })], g.prototype, "selectionIndicatorStyle", void 0), t([l({ attribute: !1 })], g.prototype, "shouldAnimate", void 0), t([u("slot")], g.prototype, "slotEl", void 0), t([u("#list")], g.prototype, "listEl", void 0);
+//#endregion
+//#region src/components/top-nav/top-nav-item.module.scss?inline
+var _ = ":host{font-family:var(--luzmo-top-nav-font-family,var(--luzmo-font-family));box-sizing:border-box;block-size:calc(var(--luzmo-top-nav-item-height,var(--top-nav-item-height)) - var(--luzmo-top-nav-divider-size,var(--top-nav-divider-size)));z-index:1;white-space:nowrap;color:var(--highcontrast-top-nav-color,var(--luzmo-top-nav-color,var(--top-nav-color)));transition:color var(--luzmo-top-nav-animation-duration,var(--top-nav-animation-duration)) ease-out;cursor:pointer;outline:none;align-items:center;-webkit-text-decoration:none;text-decoration:none;display:inline-flex;position:relative}:host:before{content:\"\";box-sizing:border-box;block-size:calc(100% - var(--luzmo-top-nav-top-to-text,var(--top-nav-top-to-text)));inline-size:calc(100% + var(--luzmo-top-nav-focus-indicator-gap,var(--top-nav-focus-indicator-gap)) * 2);border-radius:var(--luzmo-top-nav-focus-indicator-border-radius,var(--top-nav-focus-indicator-border-radius));pointer-events:none;position:absolute;inset-block-start:calc(var(--luzmo-top-nav-top-to-text,var(--top-nav-top-to-text)) / 2);inset-inline-start:calc(var(--luzmo-top-nav-focus-indicator-gap,var(--top-nav-focus-indicator-gap)) * -1);inset-inline-end:calc(var(--luzmo-top-nav-focus-indicator-gap,var(--top-nav-focus-indicator-gap)) * -1);border:var(--luzmo-top-nav-focus-indicator-width,var(--top-nav-focus-indicator-width)) solid transparent!important}@media (hover:hover){:host(:hover){color:var(--highcontrast-top-nav-color-hover,var(--luzmo-top-nav-color-hover,var(--top-nav-color-hover)))}}:host([selected]){color:var(--highcontrast-top-nav-color-selected,var(--luzmo-top-nav-color-selected,var(--top-nav-color-selected)))}:host([disabled]){cursor:default;pointer-events:none;color:var(--highcontrast-top-nav-color-disabled,var(--luzmo-top-nav-color-disabled,var(--top-nav-color-disabled)))}:host(:focus-visible){color:var(--highcontrast-top-nav-color-key-focus,var(--luzmo-top-nav-color-key-focus,var(--top-nav-color-key-focus)))}:host(:focus-visible):before{border-color:var(--highcontrast-top-nav-focus-indicator-color,var(--luzmo-top-nav-focus-indicator-color,var(--top-nav-focus-indicator-color)))!important}#item-label{cursor:pointer;font-family:inherit;font-style:var(--luzmo-top-nav-font-style,var(--top-nav-font-style));font-size:var(--luzmo-top-nav-font-size,var(--top-nav-font-size));font-weight:var(--luzmo-top-nav-font-weight,var(--top-nav-font-weight));line-height:var(--luzmo-top-nav-line-height,var(--top-nav-line-height));color:inherit;outline:none;-webkit-text-decoration:none;text-decoration:none;display:inline-block}:host([disabled]) #item-label{cursor:default}", v = class extends r(e) {
+	constructor(...e) {
+		super(...e), this.href = "", this.selected = !1, this.disabled = !1, this.value = "";
+	}
+	static get styles() {
+		return [c(_)];
+	}
+	render() {
+		return s`
+      <a
+        id="item-label"
+        href=${d(this.href || void 0)}
+        target=${d(this.target)}
+        download=${d(this.download)}
+        rel=${d(this.rel)}
+        aria-label=${d(this.label)}
+        aria-current=${d(this.selected && this.href ? "page" : void 0)}
+        tabindex="-1"
+      >
+        <slot></slot>
+      </a>
+    `;
+	}
+	firstUpdated(e) {
+		super.firstUpdated(e);
+	}
+	updated(e) {
+		super.updated(e), this.anchorElement && this.anchorElement.href && !this.value && (this.value = this.anchorElement.href), e.has("disabled") && (this.disabled ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled"));
+	}
+	click() {
+		this.anchorElement && this.anchorElement.click();
+	}
+	get focusElement() {
+		return this;
+	}
+};
+t([l({ reflect: !0 })], v.prototype, "href", void 0), t([l({ reflect: !0 })], v.prototype, "target", void 0), t([l({ reflect: !0 })], v.prototype, "download", void 0), t([l({ reflect: !0 })], v.prototype, "rel", void 0), t([l()], v.prototype, "label", void 0), t([l({
+	type: Boolean,
+	reflect: !0
+})], v.prototype, "selected", void 0), t([l({
+	type: Boolean,
+	reflect: !0
+})], v.prototype, "disabled", void 0), t([l({
+	type: String,
+	reflect: !0
+})], v.prototype, "value", void 0), t([u("a")], v.prototype, "anchorElement", void 0), customElements.get("luzmo-top-nav") || customElements.define("luzmo-top-nav", g), customElements.get("luzmo-top-nav-item") || customElements.define("luzmo-top-nav-item", v);
+//#endregion
+export { g as n, v as t };

package/components/top-nav-DlTojz8S.cjs

@@ -0,0 +1,45 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+require(`./chunk-D-qHiVGv.cjs`);const e=require(`./decorate-B2wePfNm.cjs`),t=require(`./sized-mixin-StFA4y0J.cjs`),n=require(`./focus-visible-B0NNezGc.cjs`),r=require(`./focusable-CupEoHmn.cjs`),i=require(`./roving-tabindex-B7x5ePUB.cjs`),a=require(`./scaled-indicator-p8-3k2cJ.cjs`);let o=require(`lit`),s=require(`lit/decorators.js`),c=require(`lit/directives/if-defined.js`),l=require(`@lit-labs/observers/intersection-controller.js`),u=require(`@lit-labs/observers/resize-controller.js`);var d=`#list{--top-nav-item-height:calc(var(--luzmo-component-height) + var(--luzmo-spacing-5));--top-nav-item-horizontal-spacing:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-3));--top-nav-top-to-text:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--top-nav-bottom-to-text:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--top-nav-focus-indicator-gap:var(--luzmo-spacing-3);--top-nav-font-size:var(--luzmo-font-size)}:host([size=s]) #list{--top-nav-item-height:calc(var(--luzmo-component-height-s) + var(--luzmo-spacing-4));--top-nav-item-horizontal-spacing:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-2));--top-nav-top-to-text:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--top-nav-bottom-to-text:var(--luzmo-spacing-4);--top-nav-focus-indicator-gap:var(--luzmo-spacing-3);--top-nav-font-size:var(--luzmo-font-size-s)}:host([size=l]) #list{--top-nav-item-height:calc(var(--luzmo-component-height-l) + var(--luzmo-spacing-5));--top-nav-item-horizontal-spacing:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-4));--top-nav-top-to-text:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--top-nav-bottom-to-text:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--top-nav-focus-indicator-gap:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--top-nav-font-size:var(--luzmo-font-size-l)}:host([size=xl]) #list{--top-nav-item-height:calc(var(--luzmo-component-height-xl) + var(--luzmo-spacing-5));--top-nav-item-horizontal-spacing:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-4));--top-nav-top-to-text:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--top-nav-bottom-to-text:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--top-nav-focus-indicator-gap:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--top-nav-font-size:var(--luzmo-font-size-xl)}`,f=`:host{display:block}#list{--top-nav-color:var(--luzmo-font-color);--top-nav-color-selected:var(--luzmo-font-color-down);--top-nav-color-hover:var(--luzmo-font-color-hover);--top-nav-color-key-focus:var(--luzmo-font-color-focus);--top-nav-color-disabled:var(--luzmo-disabled-color);--top-nav-font-family:var(--luzmo-font-family);--top-nav-font-style:var(--luzmo-font-style);--top-nav-font-size:var(--luzmo-font-size);--top-nav-font-weight:var(--luzmo-font-weight);--top-nav-line-height:var(--luzmo-line-height);--top-nav-focus-indicator-width:var(--luzmo-indicator-width);--top-nav-focus-indicator-border-radius:var(--luzmo-border-radius);--top-nav-focus-indicator-color:var(--luzmo-indicator-color);--top-nav-selection-indicator-color:var(--luzmo-font-color-down);--top-nav-divider-size:2px;--top-nav-divider-border-radius:1px;--top-nav-animation-duration:var(--luzmo-animation-duration);--top-nav-animation-ease:ease-in-out;z-index:0;vertical-align:top;background:linear-gradient(to top, var(--highcontrast-top-nav-divider-background-color,var(--luzmo-top-nav-divider-background-color,var(--top-nav-divider-background-color,var(--luzmo-border-color)))) 0 var(--luzmo-top-nav-divider-size,var(--top-nav-divider-size)), transparent var(--luzmo-top-nav-divider-size,var(--top-nav-divider-size)));align-items:center;margin:0;padding-block:0;display:flex;position:relative}::slotted(:not(:first-child)){margin-inline-start:var(--luzmo-top-nav-item-horizontal-spacing,var(--top-nav-item-horizontal-spacing))}::slotted([selected]){color:var(--highcontrast-top-nav-color-selected,var(--luzmo-top-nav-color-selected,var(--top-nav-color-selected)))}::slotted([disabled]){cursor:default;color:var(--highcontrast-top-nav-color-disabled,var(--luzmo-top-nav-color-disabled,var(--top-nav-color-disabled)))}#selection-indicator{background-color:var(--highcontrast-top-nav-selection-indicator-color,var(--luzmo-top-nav-selection-indicator-color,var(--top-nav-selection-indicator-color)));z-index:0;transition:transform var(--luzmo-top-nav-animation-duration,var(--top-nav-animation-duration)) var(--luzmo-top-nav-animation-ease,var(--top-nav-animation-ease));transform-origin:0 0;border-radius:var(--luzmo-top-nav-divider-border-radius,var(--top-nav-divider-border-radius));block-size:var(--luzmo-top-nav-divider-size,var(--top-nav-divider-size));width:100px;position:absolute;inset-block-end:0;inset-inline-start:0}#selection-indicator.first-position{transition:none}:host([quiet]) #list{--top-nav-quiet-unselected-opacity:.7;--top-nav-quiet-unselected-opacity-hover:.85;background:0 0;border-color:#0000;display:inline-flex}:host([quiet]) ::slotted(:not([selected])){opacity:var(--luzmo-top-nav-quiet-unselected-opacity,var(--top-nav-quiet-unselected-opacity))}:host([quiet]) ::slotted(:not([selected]):hover){opacity:var(--luzmo-top-nav-quiet-unselected-opacity-hover,var(--top-nav-quiet-unselected-opacity-hover))}:host([quiet]) #selection-indicator{display:none}@media (forced-colors:active){#list{--highcontrast-top-nav-divider-background-color:var(--luzmo-border-color);--highcontrast-top-nav-selection-indicator-color:Highlight;--highcontrast-top-nav-focus-indicator-color:CanvasText;--highcontrast-top-nav-color:ButtonText;--highcontrast-top-nav-color-hover:ButtonText;--highcontrast-top-nav-color-selected:HighlightText;--highcontrast-top-nav-color-key-focus:ButtonText;--highcontrast-top-nav-color-disabled:GrayText;forced-color-adjust:none}}#list{--top-nav-font-weight:var(--luzmo-font-weight);--top-nav-divider-background-color:var(--luzmo-border-color)}`,p=class extends t.n(r.t,{noDefaultSize:!0}){static get styles(){return[(0,o.unsafeCSS)(f),(0,o.unsafeCSS)(d)]}set items(e){e!==this.items&&(this._items.forEach(e=>{this.resizeController.unobserve(e)}),e.forEach(e=>{this.resizeController.observe(e)}),this._items=e,this.rovingTabindexController.clearElementCache())}get items(){return this._items}constructor(){super(),this.label=``,this.quiet=!1,this.selected=``,this.selectionIndicatorStyle=a.t.noSelectionStyle,this.shouldAnimate=!1,this._items=[],this.resizeController=new u.ResizeController(this,{callback:()=>{this.updateSelectionIndicator()}}),this.rovingTabindexController=new i.t(this,{focusInIndex:e=>{let t=0;return e.find((e,n)=>{let r=this.selected?e.value===this.selected:!e.disabled;return t=n,r})?t:-1},direction:()=>`horizontal`,elementEnterAction:e=>{this.shouldAnimate=!0,this.selectTarget(e)},elements:()=>this.items,isFocusableElement:e=>!this.disabled&&!e.disabled,listenerScope:()=>this.listEl}),this.onClick=e=>{if(this.disabled)return;let t=e.composedPath().find(e=>e.parentElement===this);!t||t.disabled||(e.preventDefault(),this.shouldAnimate=!0,this.selectTarget(t))},this.onKeyDown=e=>{if(e.code===`Enter`||e.code===`Space`){e.preventDefault();let t=e.target;t&&this.selectTarget(t)}},this.updateCheckedState=()=>{if(this.items.forEach(e=>{e.removeAttribute(`selected`)}),this.selected){let e=this.items.find(e=>e.value===this.selected);e?e.selected=!0:this.selected=``}else{let e=this.items[0];e&&e.setAttribute(`tabindex`,`0`)}this.updateSelectionIndicator()},this.updateSelectionIndicator=async()=>{let e=this.items.find(e=>e.selected);if(!e||this.quiet){this.selectionIndicatorStyle=a.t.noSelectionStyle;return}await Promise.all([e.updateComplete,document.fonts?document.fonts.ready:Promise.resolve()]);let t=e.getBoundingClientRect(),n=this.listEl.getBoundingClientRect(),r=t.left-n.left;this.selectionIndicatorStyle=a.t.transformX(r,t.width)},new l.IntersectionController(this,{config:{root:null,rootMargin:`0px`,threshold:[0,1]},callback:()=>{this.updateSelectionIndicator()}})}get focusElement(){return this.rovingTabindexController.focusInElement||this}render(){return o.html`
+      <div
+        @click=${this.onClick}
+        @keydown=${this.onKeyDown}
+        id="list"
+      >
+        <slot @slotchange=${this.onSlotChange}></slot>
+        <div
+          id="selection-indicator"
+          class=${(0,c.ifDefined)(this.shouldAnimate?void 0:`first-position`)}
+          style=${this.selectionIndicatorStyle}
+          role="presentation"
+        ></div>
+      </div>
+    `}willUpdate(e){if(!this.hasUpdated){let e=this.querySelector(`:scope > [selected]`);e&&this.selectTarget(e)}super.willUpdate(e),e.has(`selected`)&&this.items.length>0&&this.updateCheckedState(),e.has(`quiet`)&&this.updateSelectionIndicator(),e.has(`label`)&&(this.label?this.setAttribute(`aria-label`,this.label):this.removeAttribute(`aria-label`)),e.has(`disabled`)&&(this.disabled?this.setAttribute(`aria-disabled`,`true`):this.removeAttribute(`aria-disabled`)),!this.shouldAnimate&&e.get(`shouldAnimate`)!==void 0&&(this.shouldAnimate=!0)}firstUpdated(e){super.firstUpdated(e),this.hasAttribute(`role`)||this.setAttribute(`role`,`navigation`),this.label&&this.setAttribute(`aria-label`,this.label)}selectTarget(e){let t=e.getAttribute(`value`);if(t){let e=this.selected;this.selected=t,this.dispatchEvent(new Event(`change`,{cancelable:!0}))||(this.selected=e)}}onSlotChange(){this.items=this.slotEl.assignedElements().filter(e=>e.tagName.toLowerCase()===`luzmo-top-nav-item`),this.updateCheckedState()}connectedCallback(){super.connectedCallback(),window.addEventListener(`resize`,this.updateSelectionIndicator),`fonts`in document&&document.fonts.addEventListener(`loadingdone`,this.updateSelectionIndicator)}disconnectedCallback(){window.removeEventListener(`resize`,this.updateSelectionIndicator),`fonts`in document&&document.fonts.removeEventListener(`loadingdone`,this.updateSelectionIndicator),super.disconnectedCallback()}};e.t([(0,s.property)()],p.prototype,`label`,void 0),e.t([(0,s.property)({type:Boolean,reflect:!0})],p.prototype,`quiet`,void 0),e.t([(0,s.property)({reflect:!0})],p.prototype,`selected`,void 0),e.t([(0,s.property)({attribute:!1})],p.prototype,`selectionIndicatorStyle`,void 0),e.t([(0,s.property)({attribute:!1})],p.prototype,`shouldAnimate`,void 0),e.t([(0,s.query)(`slot`)],p.prototype,`slotEl`,void 0),e.t([(0,s.query)(`#list`)],p.prototype,`listEl`,void 0);var m=`:host{font-family:var(--luzmo-top-nav-font-family,var(--luzmo-font-family));box-sizing:border-box;block-size:calc(var(--luzmo-top-nav-item-height,var(--top-nav-item-height)) - var(--luzmo-top-nav-divider-size,var(--top-nav-divider-size)));z-index:1;white-space:nowrap;color:var(--highcontrast-top-nav-color,var(--luzmo-top-nav-color,var(--top-nav-color)));transition:color var(--luzmo-top-nav-animation-duration,var(--top-nav-animation-duration)) ease-out;cursor:pointer;outline:none;align-items:center;-webkit-text-decoration:none;text-decoration:none;display:inline-flex;position:relative}:host:before{content:"";box-sizing:border-box;block-size:calc(100% - var(--luzmo-top-nav-top-to-text,var(--top-nav-top-to-text)));inline-size:calc(100% + var(--luzmo-top-nav-focus-indicator-gap,var(--top-nav-focus-indicator-gap)) * 2);border-radius:var(--luzmo-top-nav-focus-indicator-border-radius,var(--top-nav-focus-indicator-border-radius));pointer-events:none;position:absolute;inset-block-start:calc(var(--luzmo-top-nav-top-to-text,var(--top-nav-top-to-text)) / 2);inset-inline-start:calc(var(--luzmo-top-nav-focus-indicator-gap,var(--top-nav-focus-indicator-gap)) * -1);inset-inline-end:calc(var(--luzmo-top-nav-focus-indicator-gap,var(--top-nav-focus-indicator-gap)) * -1);border:var(--luzmo-top-nav-focus-indicator-width,var(--top-nav-focus-indicator-width)) solid transparent!important}@media (hover:hover){:host(:hover){color:var(--highcontrast-top-nav-color-hover,var(--luzmo-top-nav-color-hover,var(--top-nav-color-hover)))}}:host([selected]){color:var(--highcontrast-top-nav-color-selected,var(--luzmo-top-nav-color-selected,var(--top-nav-color-selected)))}:host([disabled]){cursor:default;pointer-events:none;color:var(--highcontrast-top-nav-color-disabled,var(--luzmo-top-nav-color-disabled,var(--top-nav-color-disabled)))}:host(:focus-visible){color:var(--highcontrast-top-nav-color-key-focus,var(--luzmo-top-nav-color-key-focus,var(--top-nav-color-key-focus)))}:host(:focus-visible):before{border-color:var(--highcontrast-top-nav-focus-indicator-color,var(--luzmo-top-nav-focus-indicator-color,var(--top-nav-focus-indicator-color)))!important}#item-label{cursor:pointer;font-family:inherit;font-style:var(--luzmo-top-nav-font-style,var(--top-nav-font-style));font-size:var(--luzmo-top-nav-font-size,var(--top-nav-font-size));font-weight:var(--luzmo-top-nav-font-weight,var(--top-nav-font-weight));line-height:var(--luzmo-top-nav-line-height,var(--top-nav-line-height));color:inherit;outline:none;-webkit-text-decoration:none;text-decoration:none;display:inline-block}:host([disabled]) #item-label{cursor:default}`,h=class extends n.t(e.n){constructor(...e){super(...e),this.href=``,this.selected=!1,this.disabled=!1,this.value=``}static get styles(){return[(0,o.unsafeCSS)(m)]}render(){return o.html`
+      <a
+        id="item-label"
+        href=${(0,c.ifDefined)(this.href||void 0)}
+        target=${(0,c.ifDefined)(this.target)}
+        download=${(0,c.ifDefined)(this.download)}
+        rel=${(0,c.ifDefined)(this.rel)}
+        aria-label=${(0,c.ifDefined)(this.label)}
+        aria-current=${(0,c.ifDefined)(this.selected&&this.href?`page`:void 0)}
+        tabindex="-1"
+      >
+        <slot></slot>
+      </a>
+    `}firstUpdated(e){super.firstUpdated(e)}updated(e){super.updated(e),this.anchorElement&&this.anchorElement.href&&!this.value&&(this.value=this.anchorElement.href),e.has(`disabled`)&&(this.disabled?this.setAttribute(`aria-disabled`,`true`):this.removeAttribute(`aria-disabled`))}click(){this.anchorElement&&this.anchorElement.click()}get focusElement(){return this}};e.t([(0,s.property)({reflect:!0})],h.prototype,`href`,void 0),e.t([(0,s.property)({reflect:!0})],h.prototype,`target`,void 0),e.t([(0,s.property)({reflect:!0})],h.prototype,`download`,void 0),e.t([(0,s.property)({reflect:!0})],h.prototype,`rel`,void 0),e.t([(0,s.property)()],h.prototype,`label`,void 0),e.t([(0,s.property)({type:Boolean,reflect:!0})],h.prototype,`selected`,void 0),e.t([(0,s.property)({type:Boolean,reflect:!0})],h.prototype,`disabled`,void 0),e.t([(0,s.property)({type:String,reflect:!0})],h.prototype,`value`,void 0),e.t([(0,s.query)(`a`)],h.prototype,`anchorElement`,void 0),customElements.get(`luzmo-top-nav`)||customElements.define(`luzmo-top-nav`,p),customElements.get(`luzmo-top-nav-item`)||customElements.define(`luzmo-top-nav-item`,h),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return h}});

package/components/utils.cjs

@@ -15,4 +15,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./base-CBCg3yyw.cjs"),o=require("./focus-visible-B0P9aY_G.cjs"),n=require("./focusable-EbipgXRh.cjs"),i=require("./platform-BiXhwqk3.cjs"),s=require("./sized-mixin-CPxE5C96.cjs"),r=require("./streaming-listener-B00MvALi.cjs");exports.LuzmoElement=e.LuzmoElement;exports.LuzmoMixin=e.LuzmoMixin;exports.FocusVisiblePolyfillMixin=o.FocusVisiblePolyfillMixin;exports.Focusable=n.Focusable;exports.isAndroid=i.isAndroid;exports.isAppleDevice=i.isAppleDevice;exports.isChrome=i.isChrome;exports.isFirefox=i.isFirefox;exports.isIOS=i.isIOS;exports.isIPad=i.isIPad;exports.isIPhone=i.isIPhone;exports.isMac=i.isMac;exports.isSeamonkey=i.isSeamonkey;exports.isWebKit=i.isWebKit;exports.ElementSizes=s.ElementSizes;exports.SizedMixin=s.SizedMixin;exports.streamingListener=r.streamingListener;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./decorate-B2wePfNm.cjs`),t=require(`./sized-mixin-StFA4y0J.cjs`),n=require(`./focus-visible-B0NNezGc.cjs`),r=require(`./focusable-CupEoHmn.cjs`),i=require(`./platform-B7Sk7Qon.cjs`),a=require(`./streaming-listener-BnDW38lt.cjs`),o=require(`./voice-recorder-BUtmSvPO.cjs`);exports.ElementSizes=t.t,exports.FocusVisiblePolyfillMixin=n.t,exports.Focusable=r.t,exports.LuzmoElement=e.n,exports.LuzmoMixin=e.r,exports.SizedMixin=t.n,exports.VoiceRecorder=o.t,exports.isAndroid=i.t,exports.isAppleDevice=i.n,exports.isChrome=i.r,exports.isFirefox=i.i,exports.isIOS=i.a,exports.isIPad=i.o,exports.isIPhone=i.s,exports.isMac=i.c,exports.isSeamonkey=i.l,exports.isWebKit=i.u,exports.streamingListener=a.t;

package/components/utils.js

@@ -15,28 +15,11 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { a as e, L as a } from "./base-WsynuqaS.js";
-import { F as r } from "./focus-visible-DBlJGoEW.js";
-import { F as t } from "./focusable-BxtpnzWp.js";
-import { j as x, d as f, e as l, h as p, c, b as d, a as F, i as S, g as b, f as u } from "./platform-BM-uMWpX.js";
-import { E as L, S as M } from "./sized-mixin-D4ACoVUr.js";
-import { s as E } from "./streaming-listener-CP-JE6Fa.js";
-export {
-  L as ElementSizes,
-  r as FocusVisiblePolyfillMixin,
-  t as Focusable,
-  e as LuzmoElement,
-  a as LuzmoMixin,
-  M as SizedMixin,
-  x as isAndroid,
-  f as isAppleDevice,
-  l as isChrome,
-  p as isFirefox,
-  c as isIOS,
-  d as isIPad,
-  F as isIPhone,
-  S as isMac,
-  b as isSeamonkey,
-  u as isWebKit,
-  E as streamingListener
-};
+import { n as e, r as t } from "./decorate-aGxJUVxg.js";
+import { n, t as r } from "./sized-mixin-DaBoZkVS.js";
+import { t as i } from "./focus-visible-CrooVCUu.js";
+import { t as a } from "./focusable-BmS8IzhH.js";
+import { a as o, c as s, i as c, l, n as u, o as d, r as f, s as p, t as m, u as h } from "./platform-D4V_cOJF.js";
+import { t as g } from "./streaming-listener-2NcP7ys7.js";
+import { t as _ } from "./voice-recorder-477xPHRU.js";
+export { r as ElementSizes, i as FocusVisiblePolyfillMixin, a as Focusable, e as LuzmoElement, t as LuzmoMixin, n as SizedMixin, _ as VoiceRecorder, m as isAndroid, u as isAppleDevice, f as isChrome, c as isFirefox, o as isIOS, d as isIPad, p as isIPhone, s as isMac, l as isSeamonkey, h as isWebKit, g as streamingListener };

package/components/voice-recorder-477xPHRU.js

@@ -0,0 +1,134 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+//#region src/utils/voice-recorder.ts
+var e = class {
+	constructor(e = {}) {
+		this.mediaRecorder = null, this.audioChunks = [], this.isRecording = !1, this.stream = null, this.recordingStartTime = 0, this.mimeType = "", this.audioContext = null, this.analyser = null, this.animationFrame = null, this.durationInterval = null, this.maxDuration = e.maxDuration ?? 3e5, this.audioBitsPerSecond = e.audioBitsPerSecond ?? 128e3;
+	}
+	static isSupported() {
+		return !!(typeof navigator < "u" && navigator.mediaDevices && typeof navigator.mediaDevices.getUserMedia == "function" && typeof MediaRecorder < "u");
+	}
+	getSupportedMimeType() {
+		for (let e of [
+			"audio/webm;codecs=opus",
+			"audio/webm",
+			"audio/mp4",
+			"audio/ogg;codecs=opus",
+			"audio/ogg",
+			"audio/wav"
+		]) if (MediaRecorder.isTypeSupported(e)) return e;
+		return "audio/webm";
+	}
+	async startRecording() {
+		if (this.isRecording) return !1;
+		try {
+			return this.stream = await navigator.mediaDevices.getUserMedia({ audio: {
+				echoCancellation: !0,
+				noiseSuppression: !0,
+				autoGainControl: !0
+			} }), this.mimeType = this.getSupportedMimeType(), this.mediaRecorder = new MediaRecorder(this.stream, {
+				mimeType: this.mimeType,
+				audioBitsPerSecond: this.audioBitsPerSecond
+			}), this.audioChunks = [], this.recordingStartTime = Date.now(), this.mediaRecorder.ondataavailable = (e) => {
+				e.data.size > 0 && this.audioChunks.push(e.data);
+			}, this.mediaRecorder.onstop = () => {
+				let e = Date.now() - this.recordingStartTime, t = new Blob(this.audioChunks, { type: this.mimeType });
+				this.onStopCallback?.({
+					audioBlob: t,
+					duration: e,
+					mimeType: this.mimeType
+				}), this.cleanup();
+			}, this.mediaRecorder.onerror = () => {
+				this.onErrorCallback?.("Recording failed"), this.cleanup();
+			}, this.mediaRecorder.start(1e3), this.isRecording = !0, await this.setupAudioAnalysis(), this.startDurationUpdates(), this.onStartCallback?.(), setTimeout(() => {
+				this.isRecording && this.stopRecording();
+			}, this.maxDuration), !0;
+		} catch (e) {
+			return console.error("Error starting recording:", e), this.onErrorCallback?.("Failed to access microphone"), !1;
+		}
+	}
+	stopRecording() {
+		this.mediaRecorder && this.isRecording && (this.mediaRecorder.stop(), this.isRecording = !1, this.stopDurationUpdates());
+	}
+	cancelRecording() {
+		this.mediaRecorder && this.isRecording && (this.mediaRecorder.onstop = null, this.mediaRecorder.stop(), this.isRecording = !1, this.stopDurationUpdates(), this.audioChunks = [], this.cleanup());
+	}
+	isCurrentlyRecording() {
+		return this.isRecording;
+	}
+	getRecordingDuration() {
+		return this.isRecording ? Date.now() - this.recordingStartTime : 0;
+	}
+	async setupAudioAnalysis() {
+		if (this.stream) try {
+			let e = window.AudioContext || window.webkitAudioContext;
+			if (!e) return;
+			this.audioContext = new e(), this.audioContext.state === "suspended" && await this.audioContext.resume(), this.analyser = this.audioContext.createAnalyser(), this.analyser.fftSize = 256, this.analyser.smoothingTimeConstant = .8, this.audioContext.createMediaStreamSource(this.stream).connect(this.analyser), this.startAudioLevelMonitoring();
+		} catch (e) {
+			console.warn("Audio analysis setup failed:", e);
+		}
+	}
+	startAudioLevelMonitoring() {
+		if (!this.analyser) return;
+		let e = () => {
+			if (!this.isRecording || !this.analyser) return;
+			let t = new Uint8Array(this.analyser.frequencyBinCount);
+			this.analyser.getByteFrequencyData(t);
+			let n = 0;
+			for (let e of t) n += e * e;
+			let r = Math.sqrt(n / t.length), i = Math.min(r / 255, 1), a = (i > .01 ? i : 0) ** .4;
+			this.onAudioLevelCallback?.(a), this.animationFrame = requestAnimationFrame(e);
+		};
+		e();
+	}
+	startDurationUpdates() {
+		this.durationInterval = window.setInterval(() => {
+			this.isRecording && this.onDurationUpdateCallback?.(this.getRecordingDuration());
+		}, 100);
+	}
+	stopDurationUpdates() {
+		this.durationInterval !== null && (clearInterval(this.durationInterval), this.durationInterval = null);
+	}
+	cleanup() {
+		this.isRecording = !1, this.stopDurationUpdates(), this.animationFrame !== null && (cancelAnimationFrame(this.animationFrame), this.animationFrame = null), this.audioContext &&= (this.audioContext.close(), null), this.analyser = null, this.stream &&= (this.stream.getTracks().forEach((e) => e.stop()), null), this.mediaRecorder = null;
+	}
+	destroy() {
+		this.stopRecording(), this.cleanup();
+	}
+	onStart(e) {
+		return this.onStartCallback = e, this;
+	}
+	onStop(e) {
+		return this.onStopCallback = e, this;
+	}
+	onError(e) {
+		return this.onErrorCallback = e, this;
+	}
+	onAudioLevel(e) {
+		return this.onAudioLevelCallback = e, this;
+	}
+	onDurationUpdate(e) {
+		return this.onDurationUpdateCallback = e, this;
+	}
+	static formatDuration(e) {
+		let t = Math.floor(e / 1e3);
+		return `${Math.floor(t / 60)}:${(t % 60).toString().padStart(2, "0")}`;
+	}
+};
+//#endregion
+export { e as t };

package/components/voice-recorder-BUtmSvPO.cjs

@@ -0,0 +1,18 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+var e=class{constructor(e={}){this.mediaRecorder=null,this.audioChunks=[],this.isRecording=!1,this.stream=null,this.recordingStartTime=0,this.mimeType=``,this.audioContext=null,this.analyser=null,this.animationFrame=null,this.durationInterval=null,this.maxDuration=e.maxDuration??3e5,this.audioBitsPerSecond=e.audioBitsPerSecond??128e3}static isSupported(){return!!(typeof navigator<`u`&&navigator.mediaDevices&&typeof navigator.mediaDevices.getUserMedia==`function`&&typeof MediaRecorder<`u`)}getSupportedMimeType(){for(let e of[`audio/webm;codecs=opus`,`audio/webm`,`audio/mp4`,`audio/ogg;codecs=opus`,`audio/ogg`,`audio/wav`])if(MediaRecorder.isTypeSupported(e))return e;return`audio/webm`}async startRecording(){if(this.isRecording)return!1;try{return this.stream=await navigator.mediaDevices.getUserMedia({audio:{echoCancellation:!0,noiseSuppression:!0,autoGainControl:!0}}),this.mimeType=this.getSupportedMimeType(),this.mediaRecorder=new MediaRecorder(this.stream,{mimeType:this.mimeType,audioBitsPerSecond:this.audioBitsPerSecond}),this.audioChunks=[],this.recordingStartTime=Date.now(),this.mediaRecorder.ondataavailable=e=>{e.data.size>0&&this.audioChunks.push(e.data)},this.mediaRecorder.onstop=()=>{let e=Date.now()-this.recordingStartTime,t=new Blob(this.audioChunks,{type:this.mimeType});this.onStopCallback?.({audioBlob:t,duration:e,mimeType:this.mimeType}),this.cleanup()},this.mediaRecorder.onerror=()=>{this.onErrorCallback?.(`Recording failed`),this.cleanup()},this.mediaRecorder.start(1e3),this.isRecording=!0,await this.setupAudioAnalysis(),this.startDurationUpdates(),this.onStartCallback?.(),setTimeout(()=>{this.isRecording&&this.stopRecording()},this.maxDuration),!0}catch(e){return console.error(`Error starting recording:`,e),this.onErrorCallback?.(`Failed to access microphone`),!1}}stopRecording(){this.mediaRecorder&&this.isRecording&&(this.mediaRecorder.stop(),this.isRecording=!1,this.stopDurationUpdates())}cancelRecording(){this.mediaRecorder&&this.isRecording&&(this.mediaRecorder.onstop=null,this.mediaRecorder.stop(),this.isRecording=!1,this.stopDurationUpdates(),this.audioChunks=[],this.cleanup())}isCurrentlyRecording(){return this.isRecording}getRecordingDuration(){return this.isRecording?Date.now()-this.recordingStartTime:0}async setupAudioAnalysis(){if(this.stream)try{let e=window.AudioContext||window.webkitAudioContext;if(!e)return;this.audioContext=new e,this.audioContext.state===`suspended`&&await this.audioContext.resume(),this.analyser=this.audioContext.createAnalyser(),this.analyser.fftSize=256,this.analyser.smoothingTimeConstant=.8,this.audioContext.createMediaStreamSource(this.stream).connect(this.analyser),this.startAudioLevelMonitoring()}catch(e){console.warn(`Audio analysis setup failed:`,e)}}startAudioLevelMonitoring(){if(!this.analyser)return;let e=()=>{if(!this.isRecording||!this.analyser)return;let t=new Uint8Array(this.analyser.frequencyBinCount);this.analyser.getByteFrequencyData(t);let n=0;for(let e of t)n+=e*e;let r=Math.sqrt(n/t.length),i=Math.min(r/255,1),a=(i>.01?i:0)**.4;this.onAudioLevelCallback?.(a),this.animationFrame=requestAnimationFrame(e)};e()}startDurationUpdates(){this.durationInterval=window.setInterval(()=>{this.isRecording&&this.onDurationUpdateCallback?.(this.getRecordingDuration())},100)}stopDurationUpdates(){this.durationInterval!==null&&(clearInterval(this.durationInterval),this.durationInterval=null)}cleanup(){this.isRecording=!1,this.stopDurationUpdates(),this.animationFrame!==null&&(cancelAnimationFrame(this.animationFrame),this.animationFrame=null),this.audioContext&&=(this.audioContext.close(),null),this.analyser=null,this.stream&&=(this.stream.getTracks().forEach(e=>e.stop()),null),this.mediaRecorder=null}destroy(){this.stopRecording(),this.cleanup()}onStart(e){return this.onStartCallback=e,this}onStop(e){return this.onStopCallback=e,this}onError(e){return this.onErrorCallback=e,this}onAudioLevel(e){return this.onAudioLevelCallback=e,this}onDurationUpdate(e){return this.onDurationUpdateCallback=e,this}static formatDuration(e){let t=Math.floor(e/1e3);return`${Math.floor(t/60)}:${(t%60).toString().padStart(2,`0`)}`}};Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return e}});