@getufy/flint-ui 0.1.0

package/dist/navigation-menu/flint-navigation-menu-content.js

@@ -0,0 +1,147 @@
+import { t as e } from "../_shared/decorate-DPS9PT8d.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+//#region src/navigation-menu/flint-navigation-menu-content.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.id = "", this.open = !1, this.dir = "ltr", this.gap = 12, this._handleKeydown = (e) => {
+			switch (e.key) {
+				case "Escape":
+					e.preventDefault(), this._close(), this._focusTrigger();
+					break;
+				case "Tab":
+					this._close();
+					break;
+				case "ArrowUp":
+					e.preventDefault(), this._focusPreviousItem();
+					break;
+				case "ArrowDown":
+					e.preventDefault(), this._focusNextItem();
+					break;
+				case "Home":
+					e.preventDefault(), this._focusFirstItem();
+					break;
+				case "End":
+					e.preventDefault(), this._focusLastItem();
+					break;
+			}
+		}, this._close = () => {
+			this.open = !1, this.dispatchEvent(new CustomEvent("flint-navigation-menu-content-toggle", {
+				detail: {
+					contentId: this.id,
+					open: !1
+				},
+				bubbles: !0,
+				composed: !0
+			}));
+		}, this._focusTrigger = () => {
+			let e = this.closest("flint-navigation-menu");
+			if (e) {
+				let t = e.querySelector(`flint-navigation-menu-trigger[content-id="${this.id}"]`);
+				if (t) {
+					t.focus();
+					return;
+				}
+			}
+			let t = document.querySelector(`flint-navigation-menu-trigger[content-id="${this.id}"]`);
+			t && t.focus();
+		}, this._getAllItems = () => Array.from(this.querySelectorAll("flint-navigation-menu-link, [role=\"menuitem\"]")), this._focusFirstItem = () => {
+			let e = this._getAllItems();
+			e.length > 0 && e[0].focus();
+		}, this._focusLastItem = () => {
+			let e = this._getAllItems();
+			e.length > 0 && e[e.length - 1].focus();
+		}, this._findFocusedIndex = (e) => {
+			let t = this.ownerDocument.activeElement;
+			return e.findIndex((e) => e === t || e.shadowRoot?.contains(t));
+		}, this._focusNextItem = () => {
+			let e = this._getAllItems();
+			if (e.length === 0) return;
+			let t = this._findFocusedIndex(e);
+			e[t >= e.length - 1 ? 0 : t + 1].focus();
+		}, this._focusPreviousItem = () => {
+			let e = this._getAllItems();
+			if (e.length === 0) return;
+			let t = this._findFocusedIndex(e);
+			e[t <= 0 ? e.length - 1 : t - 1].focus();
+		};
+	}
+	static {
+		this.styles = n`
+        :host {
+            display: none;
+            position: absolute;
+            top: calc(100% + 6px);
+            inset-inline-start: 0;
+            z-index: var(--flint-navigation-menu-content-z-index, 1000);
+        }
+
+        :host([open]) {
+            display: block;
+            animation: slideDown 0.15s ease-out;
+        }
+
+        .panel {
+            background: var(--flint-navigation-menu-content-bg, var(--flint-surface-1, #ffffff));
+            border: var(--flint-navigation-menu-content-border, 1px solid var(--flint-border-color, #e5e7eb));
+            border-radius: var(--flint-navigation-menu-content-border-radius, 8px);
+            padding: var(--flint-navigation-menu-content-padding, 12px);
+            box-shadow: var(
+                --flint-navigation-menu-content-shadow,
+                0 4px 6px -1px rgba(0, 0, 0, 0.1),
+                0 2px 4px -2px rgba(0, 0, 0, 0.06)
+            );
+            min-width: var(--flint-navigation-menu-content-min-width, 200px);
+        }
+
+        @keyframes slideDown {
+            from {
+                opacity: 0;
+                transform: translateY(-6px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            :host([open]) {
+                animation: none;
+            }
+        }
+
+        ::slotted(*) {
+            display: block;
+        }
+
+        ::slotted(flint-navigation-menu-link) {
+            display: block;
+            width: 100%;
+            box-sizing: border-box;
+        }
+    `;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("keydown", this._handleKeydown);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("keydown", this._handleKeydown);
+	}
+	willUpdate(e) {
+		e.has("gap") && this.style.setProperty("--flint-navigation-menu-content-gap", `${this.gap}px`), e.has("dir") && this.setAttribute("dir", this.dir);
+	}
+	render() {
+		return r`
+            <div class="panel" part="panel" role="menu">
+                <slot></slot>
+            </div>
+        `;
+	}
+};
+e([a({ type: String })], o.prototype, "id", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], o.prototype, "open", void 0), e([a({ type: String })], o.prototype, "dir", void 0), e([a({ type: Number })], o.prototype, "gap", void 0), o = e([i("flint-navigation-menu-content")], o);
+//#endregion
+export { o as FlintNavigationMenuContent };

package/dist/navigation-menu/flint-navigation-menu-item.d.ts

@@ -0,0 +1,47 @@
+import { LitElement } from 'lit';
+/**
+ * @tag flint-navigation-menu-item
+ *
+ * Individual menu item container. Groups a trigger and its associated content.
+ * Coordinates hover open/close with configurable delays.
+ *
+ * @slot default - Item content (NavigationMenuTrigger and NavigationMenuContent)
+ *
+ * @csspart root - The root item element
+ *
+ * @cssprop --flint-navigation-menu-item-padding - Item padding (default: 0)
+ *
+ * @fires flint-navigation-menu-trigger-click - Fired when the item's trigger is clicked.
+ * @fires flint-navigation-menu-content-toggle - Fired when content visibility changes.
+ */
+export declare class FlintNavigationMenuItem extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Unique identifier for this menu item */
+    itemId: string;
+    /** Whether this item is disabled */
+    disabled: boolean;
+    /** Delay in ms before opening on hover */
+    openDelay: number;
+    /** Delay in ms before closing after mouse leaves */
+    closeDelay: number;
+    private _openTimer;
+    private _closeTimer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<PropertyKey, unknown>): void;
+    private _handleMouseEnter;
+    private _handleMouseLeave;
+    private _cancelOpen;
+    private _cancelClose;
+    private _clearTimers;
+    private _openContent;
+    private _closeContent;
+    private _syncChildren;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'flint-navigation-menu-item': FlintNavigationMenuItem;
+    }
+}
+//# sourceMappingURL=flint-navigation-menu-item.d.ts.map

package/dist/navigation-menu/flint-navigation-menu-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flint-navigation-menu-item.d.ts","sourceRoot":"","sources":["../../src/navigation-menu/flint-navigation-menu-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C;;;;;;;;;;;;;;GAcG;AACH,qBACa,uBAAwB,SAAQ,UAAU;IACnD,OAAgB,MAAM,0BAepB;IAEF,2CAA2C;IAE3C,MAAM,EAAE,MAAM,CAAM;IAEpB,oCAAoC;IAEpC,QAAQ,EAAE,OAAO,CAAS;IAE1B,0CAA0C;IAE1C,SAAS,EAAE,MAAM,CAAO;IAExB,oDAAoD;IAEpD,UAAU,EAAE,MAAM,CAAO;IAEzB,OAAO,CAAC,UAAU,CAA8C;IAChE,OAAO,CAAC,WAAW,CAA8C;IAExD,iBAAiB;IAOjB,oBAAoB;IAQpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAMnD,OAAO,CAAC,iBAAiB,CAOvB;IAEF,OAAO,CAAC,iBAAiB,CAMvB;IAEF,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,YAAY;IAkBpB,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,aAAa,CAanB;IAEO,MAAM;CAOlB;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,4BAA4B,EAAE,uBAAuB,CAAC;KACzD;CACJ"}

package/dist/navigation-menu/flint-navigation-menu-item.js

@@ -0,0 +1,109 @@
+import { t as e } from "../_shared/decorate-DPS9PT8d.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+//#region src/navigation-menu/flint-navigation-menu-item.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.itemId = "", this.disabled = !1, this.openDelay = 100, this.closeDelay = 150, this._openTimer = null, this._closeTimer = null, this._handleMouseEnter = () => {
+			this.disabled || (this._cancelClose(), this._openTimer = setTimeout(() => {
+				this._openTimer = null, this._openContent();
+			}, this.openDelay));
+		}, this._handleMouseLeave = () => {
+			this._cancelOpen(), this._closeTimer = setTimeout(() => {
+				this._closeTimer = null, this._closeContent();
+			}, this.closeDelay);
+		}, this._syncChildren = () => {
+			let e = this.querySelectorAll("flint-navigation-menu-trigger"), t = this.querySelectorAll("flint-navigation-menu-link");
+			e.forEach((e) => {
+				e.closest("flint-navigation-menu-item") === this && (e.disabled = this.disabled);
+			}), t.forEach((e) => {
+				e.closest("flint-navigation-menu-item") === this && (e.disabled = this.disabled);
+			});
+		};
+	}
+	static {
+		this.styles = n`
+        :host {
+            display: flex;
+            position: relative;
+            --flint-navigation-menu-item-padding: 0;
+        }
+
+        .item {
+            display: flex;
+            flex-direction: column;
+            align-items: stretch;
+            padding: var(--flint-navigation-menu-item-padding);
+            position: relative;
+            width: 100%;
+        }
+    `;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("mouseenter", this._handleMouseEnter), this.addEventListener("mouseleave", this._handleMouseLeave), this.shadowRoot.addEventListener("slotchange", this._syncChildren);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("mouseenter", this._handleMouseEnter), this.removeEventListener("mouseleave", this._handleMouseLeave), this.shadowRoot.removeEventListener("slotchange", this._syncChildren), this._clearTimers();
+	}
+	updated(e) {
+		e.has("disabled") && this._syncChildren();
+	}
+	_cancelOpen() {
+		this._openTimer !== null && (clearTimeout(this._openTimer), this._openTimer = null);
+	}
+	_cancelClose() {
+		this._closeTimer !== null && (clearTimeout(this._closeTimer), this._closeTimer = null);
+	}
+	_clearTimers() {
+		this._cancelOpen(), this._cancelClose();
+	}
+	_openContent() {
+		let e = this.querySelector("flint-navigation-menu-trigger");
+		if (!e || e.disabled) return;
+		let t = e.contentId;
+		if (!t) return;
+		let n = this.querySelector(`[id="${t}"]`);
+		n && (e.dispatchEvent(new CustomEvent("flint-navigation-menu-trigger-click", {
+			detail: {
+				contentId: t,
+				open: !0
+			},
+			bubbles: !0,
+			composed: !0
+		})), n.open = !0);
+	}
+	_closeContent() {
+		let e = this.querySelector("flint-navigation-menu-trigger");
+		if (!e) return;
+		let t = e.contentId;
+		if (!t) return;
+		let n = this.querySelector(`[id="${t}"]`);
+		!n || !n.open || (n.open = !1, n.dispatchEvent(new CustomEvent("flint-navigation-menu-content-toggle", {
+			detail: {
+				contentId: t,
+				open: !1
+			},
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	render() {
+		return r`
+            <div class="item" part="root" role="none">
+                <slot></slot>
+            </div>
+        `;
+	}
+};
+e([a({ type: String })], o.prototype, "itemId", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], o.prototype, "disabled", void 0), e([a({
+	type: Number,
+	attribute: "open-delay"
+})], o.prototype, "openDelay", void 0), e([a({
+	type: Number,
+	attribute: "close-delay"
+})], o.prototype, "closeDelay", void 0), o = e([i("flint-navigation-menu-item")], o);
+//#endregion
+export { o as FlintNavigationMenuItem };

package/dist/navigation-menu/flint-navigation-menu-link.d.ts

@@ -0,0 +1,50 @@
+import { LitElement } from 'lit';
+/**
+ * @tag flint-navigation-menu-link
+ *
+ * A direct navigation link item for menus without dropdown content.
+ * Can be used instead of flint-navigation-menu-trigger for simple links.
+ *
+ * @slot default - Link text/content
+ *
+ * @csspart link - The link element
+ *
+ * @cssprop --flint-navigation-menu-link-padding - Link padding (default: 8px 12px)
+ * @cssprop --flint-navigation-menu-link-font-size - Font size (default: 14px)
+ * @cssprop --flint-navigation-menu-link-color - Text color (default: inherit)
+ * @cssprop --flint-navigation-menu-link-text-decoration - Text decoration (default: none)
+ * @cssprop --flint-navigation-menu-link-bg - Background (default: transparent)
+ * @cssprop --flint-navigation-menu-link-hover-bg - Hover background (default: #f0f0f0)
+ * @cssprop --flint-navigation-menu-link-border-radius - Border radius (default: 6px)
+ * @cssprop --flint-navigation-menu-link-active-bg - Background when active (default: #eff6ff)
+ * @cssprop --flint-navigation-menu-link-active-color - Color when active (default: #1d4ed8)
+ */
+export declare class FlintNavigationMenuLink extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** The link URL */
+    href: string;
+    /** The link target (e.g., '_blank') */
+    target: string;
+    /** Link title/tooltip */
+    title: string;
+    /** Whether the link is disabled */
+    disabled: boolean;
+    /**
+     * Whether this link represents the current page.
+     * Sets aria-current="page" and applies active styles.
+     */
+    active: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _handleClick;
+    private _handleKeydown;
+    /** Delegate focus to the inner anchor element */
+    focus(options?: FocusOptions): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'flint-navigation-menu-link': FlintNavigationMenuLink;
+    }
+}
+//# sourceMappingURL=flint-navigation-menu-link.d.ts.map

package/dist/navigation-menu/flint-navigation-menu-link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flint-navigation-menu-link.d.ts","sourceRoot":"","sources":["../../src/navigation-menu/flint-navigation-menu-link.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,uBAAwB,SAAQ,UAAU;IACnD,OAAgB,MAAM,0BAsDpB;IAEF,mBAAmB;IAEnB,IAAI,EAAE,MAAM,CAAM;IAElB,uCAAuC;IAEvC,MAAM,EAAE,MAAM,CAAM;IAEpB,yBAAyB;IAEzB,KAAK,EAAE,MAAM,CAAM;IAEnB,mCAAmC;IAEnC,QAAQ,EAAE,OAAO,CAAS;IAE1B;;;OAGG;IAEH,MAAM,EAAE,OAAO,CAAS;IAEf,iBAAiB;IAOjB,oBAAoB;IAM7B,OAAO,CAAC,YAAY,CAQlB;IAEF,OAAO,CAAC,cAAc,CAQpB;IAEF,iDAAiD;IACxC,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAM5B,MAAM;CAgBlB;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,4BAA4B,EAAE,uBAAuB,CAAC;KACzD;CACJ"}

package/dist/navigation-menu/flint-navigation-menu-link.js

@@ -0,0 +1,109 @@
+import { t as e } from "../_shared/decorate-DPS9PT8d.js";
+import { LitElement as t, css as n, html as r, nothing as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+//#region src/navigation-menu/flint-navigation-menu-link.ts
+var s = class extends t {
+	constructor(...e) {
+		super(...e), this.href = "", this.target = "", this.title = "", this.disabled = !1, this.active = !1, this._handleClick = (e) => {
+			if (this.disabled) {
+				e.preventDefault();
+				return;
+			}
+			this.closest("flint-navigation-menu")?.closeAll?.();
+		}, this._handleKeydown = (e) => {
+			this.disabled || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), (this.shadowRoot?.querySelector("a"))?.click());
+		};
+	}
+	static {
+		this.styles = n`
+        :host {
+            display: flex;
+            --flint-navigation-menu-link-padding: 8px 14px;
+            --flint-navigation-menu-link-font-size: 14px;
+            --flint-navigation-menu-link-color: var(--flint-text-color, #111827);
+            --flint-navigation-menu-link-text-decoration: none;
+            --flint-navigation-menu-link-bg: transparent;
+            --flint-navigation-menu-link-hover-bg: var(--flint-hover-color, rgba(0, 0, 0, 0.04));
+            --flint-navigation-menu-link-border-radius: 6px;
+            --flint-navigation-menu-link-active-bg: var(--flint-primary-color-light, rgba(59, 130, 246, 0.10));
+            --flint-navigation-menu-link-active-color: var(--flint-primary-color, #2563eb);
+        }
+
+        .link {
+            display: flex;
+            align-items: center;
+            height: 36px;
+            flex: 1;
+            padding: var(--flint-navigation-menu-link-padding);
+            font-size: var(--flint-navigation-menu-link-font-size);
+            font-weight: 500;
+            font-family: inherit;
+            color: var(--flint-navigation-menu-link-color);
+            text-decoration: var(--flint-navigation-menu-link-text-decoration);
+            background: var(--flint-navigation-menu-link-bg);
+            border-radius: var(--flint-navigation-menu-link-border-radius);
+            cursor: pointer;
+            transition: background 0.15s ease, color 0.15s ease;
+            border: none;
+            white-space: nowrap;
+            user-select: none;
+            outline: none;
+        }
+
+        .link:hover {
+            background: var(--flint-navigation-menu-link-hover-bg);
+        }
+
+        .link:focus-visible {
+            outline: 2px solid var(--flint-primary-color, #3b82f6);
+            outline-offset: 2px;
+        }
+
+        .link[disabled] {
+            opacity: 0.5;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+
+        .link--active {
+            background: var(--flint-navigation-menu-link-active-bg);
+            color: var(--flint-navigation-menu-link-active-color);
+        }
+    `;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "menuitem"), this.addEventListener("click", this._handleClick), this.addEventListener("keydown", this._handleKeydown);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("click", this._handleClick), this.removeEventListener("keydown", this._handleKeydown);
+	}
+	focus(e) {
+		let t = this.shadowRoot?.querySelector("a");
+		t ? t.focus(e) : super.focus(e);
+	}
+	render() {
+		return r`
+            <a
+                class="link ${this.active ? "link--active" : ""}"
+                part="link"
+                href=${this.href}
+                target=${this.target}
+                title=${this.title}
+                role="menuitem"
+                aria-disabled=${this.disabled ? "true" : "false"}
+                aria-current=${this.active ? "page" : i}
+            >
+                <slot></slot>
+            </a>
+        `;
+	}
+};
+e([o({ type: String })], s.prototype, "href", void 0), e([o({ type: String })], s.prototype, "target", void 0), e([o({ type: String })], s.prototype, "title", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "disabled", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "active", void 0), s = e([a("flint-navigation-menu-link")], s);
+//#endregion
+export { s as FlintNavigationMenuLink };

package/dist/navigation-menu/flint-navigation-menu-list.d.ts

@@ -0,0 +1,35 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * @tag flint-navigation-menu-list
+ *
+ * List wrapper for navigation menu items. Acts as a flex container for menu items.
+ *
+ * @slot default - Menu items (NavigationMenuItem elements)
+ *
+ * @csspart root - The root list element
+ *
+ * @cssprop --flint-navigation-menu-list-gap - Gap between items (default: 8px)
+ * @cssprop --flint-navigation-menu-list-direction - Flex direction (default: row)
+ */
+export declare class FlintNavigationMenuList extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Gap between menu items */
+    gap: number;
+    /** Flex direction for the list */
+    direction: 'row' | 'column';
+    /**
+     * Accessible label for the navigation landmark.
+     * Required when multiple nav elements are on the same page.
+     */
+    ariaLabel: string;
+    connectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    private _updateStyles;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'flint-navigation-menu-list': FlintNavigationMenuList;
+    }
+}
+//# sourceMappingURL=flint-navigation-menu-list.d.ts.map

package/dist/navigation-menu/flint-navigation-menu-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flint-navigation-menu-list.d.ts","sourceRoot":"","sources":["../../src/navigation-menu/flint-navigation-menu-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAG5D;;;;;;;;;;;GAWG;AACH,qBACa,uBAAwB,SAAQ,UAAU;IACnD,OAAgB,MAAM,0BAkBpB;IAEF,6BAA6B;IAE7B,GAAG,EAAE,MAAM,CAAK;IAEhB,kCAAkC;IAElC,SAAS,EAAE,KAAK,GAAG,QAAQ,CAAS;IAEpC;;;OAGG;IAEM,SAAS,EAAE,MAAM,CAAqB;IAEtC,iBAAiB;IAKjB,UAAU,CAAC,iBAAiB,EAAE,cAAc;IAMrD,OAAO,CAAC,aAAa;IAMZ,MAAM;CAOlB;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,4BAA4B,EAAE,uBAAuB,CAAC;KACzD;CACJ"}

package/dist/navigation-menu/flint-navigation-menu-list.js

@@ -0,0 +1,52 @@
+import { t as e } from "../_shared/decorate-DPS9PT8d.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+//#region src/navigation-menu/flint-navigation-menu-list.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.gap = 4, this.direction = "row", this.ariaLabel = "Main navigation";
+	}
+	static {
+		this.styles = n`
+        :host {
+            display: flex;
+            --flint-navigation-menu-list-gap: 4px;
+            --flint-navigation-menu-list-direction: row;
+            --flint-navigation-menu-list-align: center;
+        }
+
+        .list {
+            display: flex;
+            align-items: var(--flint-navigation-menu-list-align);
+            flex-direction: var(--flint-navigation-menu-list-direction);
+            gap: var(--flint-navigation-menu-list-gap);
+            list-style: none;
+            margin: 0;
+            padding: 0;
+            width: 100%;
+        }
+    `;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._updateStyles();
+	}
+	willUpdate(e) {
+		(e.has("gap") || e.has("direction")) && this._updateStyles();
+	}
+	_updateStyles() {
+		this.style.setProperty("--flint-navigation-menu-list-gap", `${this.gap}px`), this.style.setProperty("--flint-navigation-menu-list-direction", this.direction), this.style.setProperty("--flint-navigation-menu-list-align", this.direction === "column" ? "stretch" : "center");
+	}
+	render() {
+		return r`
+            <nav class="list" part="root" role="menubar" aria-label=${this.ariaLabel}>
+                <slot></slot>
+            </nav>
+        `;
+	}
+};
+e([a({ type: Number })], o.prototype, "gap", void 0), e([a({ type: String })], o.prototype, "direction", void 0), e([a({
+	type: String,
+	attribute: "aria-label"
+})], o.prototype, "ariaLabel", void 0), o = e([i("flint-navigation-menu-list")], o);
+//#endregion
+export { o as FlintNavigationMenuList };

package/dist/navigation-menu/flint-navigation-menu-trigger.d.ts

@@ -0,0 +1,52 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * @tag flint-navigation-menu-trigger
+ *
+ * A trigger button that opens/closes associated navigation menu content.
+ * Must be accompanied by a flint-navigation-menu-content sibling.
+ *
+ * @slot default - Trigger label/content
+ *
+ * @csspart button - The trigger button element
+ * @csspart icon - The indicator icon
+ *
+ * @cssprop --flint-navigation-menu-trigger-padding - Button padding (default: 8px 12px)
+ * @cssprop --flint-navigation-menu-trigger-font-size - Font size (default: 14px)
+ * @cssprop --flint-navigation-menu-trigger-color - Text color (default: inherit)
+ * @cssprop --flint-navigation-menu-trigger-bg - Background (default: transparent)
+ * @cssprop --flint-navigation-menu-trigger-hover-bg - Hover background (default: #f0f0f0)
+ * @cssprop --flint-navigation-menu-trigger-border-radius - Border radius (default: 6px)
+ *
+ * @fires flint-navigation-menu-trigger-click - Fired when trigger is clicked
+ */
+export declare class FlintNavigationMenuTrigger extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** The ID of the associated content element */
+    contentId: string;
+    /** Whether the trigger is disabled */
+    disabled: boolean;
+    /** Whether the associated content is open */
+    private _isOpen;
+    private _contentObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changed: PropertyValues): void;
+    /** Watch content's open attribute so _isOpen stays in sync when closed externally */
+    private _observeContent;
+    private _handleClick;
+    private _handleKeydown;
+    private _toggle;
+    private _emitEvents;
+    private _syncContent;
+    /** Find content relative to the nearest menu root (shadow-DOM-safe) */
+    private _getContent;
+    private _focusFirstContentItem;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'flint-navigation-menu-trigger': FlintNavigationMenuTrigger;
+    }
+}
+//# sourceMappingURL=flint-navigation-menu-trigger.d.ts.map

package/dist/navigation-menu/flint-navigation-menu-trigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flint-navigation-menu-trigger.d.ts","sourceRoot":"","sources":["../../src/navigation-menu/flint-navigation-menu-trigger.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,0BAA2B,SAAQ,UAAU;IACtD,OAAgB,MAAM,0BAkEpB;IAEF,+CAA+C;IAE/C,SAAS,EAAE,MAAM,CAAM;IAEvB,sCAAsC;IAEtC,QAAQ,EAAE,OAAO,CAAS;IAE1B,6CAA6C;IAE7C,OAAO,CAAC,OAAO,CAAS;IAExB,OAAO,CAAC,gBAAgB,CAAiC;IAEhD,iBAAiB;IAMjB,oBAAoB;IAQpB,YAAY;IAIZ,OAAO,CAAC,OAAO,EAAE,cAAc;IAMxC,qFAAqF;IACrF,OAAO,CAAC,eAAe;IAavB,OAAO,CAAC,YAAY,CAGlB;IAEF,OAAO,CAAC,cAAc,CAcpB;IAEF,OAAO,CAAC,OAAO,CAIb;IAEF,OAAO,CAAC,WAAW,CAUjB;IAEF,OAAO,CAAC,YAAY,CAKlB;IAEF,uEAAuE;IACvE,OAAO,CAAC,WAAW,CAmBjB;IAEF,OAAO,CAAC,sBAAsB,CAQ5B;IAEO,MAAM;CA4BlB;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,+BAA+B,EAAE,0BAA0B,CAAC;KAC/D;CACJ"}