@getufy/flint-ui 0.1.0

package/dist/_shared/flint-menubar-7AuGQli6.js

@@ -0,0 +1,666 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { LitElement as t, html as n, nothing as r, unsafeCSS as i } from "lit";
+import { customElement as a, property as o, state as s } from "lit/decorators.js";
+//#region src/menubar/flint-menubar-shortcut.css?inline
+var c = ":host{letter-spacing:.05em;color:var(--flint-text-color-muted);font-size:.6875rem;font-family:var(--flint-font-family);align-items:center;margin-left:auto;padding-left:16px;display:inline-flex}", l = ":host{background:var(--flint-border-color);height:1px;margin:4px -4px;display:block}:host([hidden]){display:none!important}", u = ":host{display:block}.heading{color:var(--flint-text-color-muted);font-size:.6875rem;font-weight:600;font-family:var(--flint-font-family);-webkit-user-select:none;user-select:none;padding:6px 8px 4px}", d = ":host{display:block}:host([hidden]){display:none!important}.item{cursor:pointer;color:var(--flint-text-color);font-size:.875rem;line-height:1.25rem;font-family:var(--flint-font-family);-webkit-user-select:none;user-select:none;border-radius:4px;outline:none;align-items:center;gap:8px;padding:6px 8px;transition:background .1s;display:flex}:host([inset]) .item{padding-left:32px}:host([highlighted]) .item{background:var(--flint-menubar-highlight-bg,var(--flint-hover-color))}:host([disabled]) .item{opacity:.5;pointer-events:none;cursor:default}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", f = ":host{display:block}:host([hidden]){display:none!important}.item{cursor:pointer;color:var(--flint-text-color);font-size:.875rem;line-height:1.25rem;font-family:var(--flint-font-family);-webkit-user-select:none;user-select:none;border-radius:4px;outline:none;align-items:center;gap:8px;padding:6px 8px 6px 32px;transition:background .1s;display:flex;position:relative}:host([highlighted]) .item{background:var(--flint-menubar-highlight-bg,var(--flint-hover-color))}:host([disabled]) .item{opacity:.5;pointer-events:none}.check{justify-content:center;align-items:center;width:16px;height:16px;display:flex;position:absolute;top:50%;left:8px;transform:translateY(-50%)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", p = ":host{display:block}:host([hidden]){display:none!important}.item{cursor:pointer;color:var(--flint-text-color);font-size:.875rem;line-height:1.25rem;font-family:var(--flint-font-family);-webkit-user-select:none;user-select:none;border-radius:4px;outline:none;align-items:center;gap:8px;padding:6px 8px 6px 32px;transition:background .1s;display:flex;position:relative}:host([highlighted]) .item{background:var(--flint-menubar-highlight-bg,var(--flint-hover-color))}:host([disabled]) .item{opacity:.5;pointer-events:none}.dot{justify-content:center;align-items:center;width:16px;height:16px;display:flex;position:absolute;top:50%;left:8px;transform:translateY(-50%)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", m = ":host{display:block}", h = ":host{z-index:1001;display:none;position:absolute;top:-4px;left:100%}:host([open]){display:block}.panel{background:var(--flint-menubar-content-bg,var(--flint-surface-1));border:1px solid var(--flint-border-color);border-radius:6px;min-width:180px;padding:4px;animation:.12s ease-out menubar-sub-in;box-shadow:0 4px 16px #0000001f}@keyframes menubar-sub-in{0%{opacity:0;transform:translate(-4px)}to{opacity:1;transform:translate(0)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", g = ":host{display:block}.item{cursor:pointer;color:var(--flint-text-color);font-size:.875rem;line-height:1.25rem;font-family:var(--flint-font-family);-webkit-user-select:none;user-select:none;border-radius:4px;outline:none;align-items:center;gap:8px;padding:6px 8px;transition:background .1s;display:flex}:host([inset]) .item{padding-left:32px}:host([highlighted]) .item{background:var(--flint-menubar-highlight-bg,var(--flint-hover-color))}:host([disabled]) .item{opacity:.5;pointer-events:none}.arrow{width:14px;height:14px;color:var(--flint-text-color-muted);margin-left:auto}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", _ = ":host{display:block;position:relative}", v = ":host{z-index:1000;padding-top:4px;display:none;position:absolute;top:100%;left:0}:host([open]){display:block}.panel{background:var(--flint-menubar-content-bg,var(--flint-surface-1));border:1px solid var(--flint-border-color);border-radius:6px;min-width:200px;padding:4px;animation:.12s ease-out menubar-in;box-shadow:0 4px 16px #0000001f}@keyframes menubar-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", y = ":host{display:inline-flex}.trigger{color:var(--flint-text-color);font-size:.875rem;font-weight:500;line-height:1.5;font-family:var(--flint-font-family);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;background:0 0;border:none;border-radius:4px;outline:none;justify-content:center;align-items:center;padding:4px 10px;transition:background .1s;display:inline-flex}.trigger:hover,:host([active]) .trigger{background:var(--flint-menubar-trigger-hover-bg,var(--flint-hover-color))}.trigger:focus-visible{outline:2px solid var(--flint-primary-color);outline-offset:-2px}.trigger:disabled,:host([disabled]) .trigger{opacity:.5;cursor:default;pointer-events:none}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", b = ":host{display:inline-block;position:relative}", x = ":host{background:var(--flint-menubar-bg,var(--flint-surface-1));border:1px solid var(--flint-border-color);font-family:var(--flint-font-family);border-radius:6px;align-items:center;gap:2px;padding:3px;display:inline-flex}", S = class extends t {
+	static {
+		this.styles = i(c);
+	}
+	render() {
+		return n`<slot></slot>`;
+	}
+};
+S = e([a("flint-menubar-shortcut")], S);
+var C = class extends t {
+	static {
+		this.styles = i(l);
+	}
+	render() {
+		return n``;
+	}
+};
+C = e([a("flint-menubar-separator")], C);
+var w = class extends t {
+	constructor(...e) {
+		super(...e), this.heading = "";
+	}
+	static {
+		this.styles = i(u);
+	}
+	render() {
+		return n`
+            ${this.heading ? n`<div class="heading" role="presentation">${this.heading}</div>` : r}
+            <div role="group" aria-label=${this.heading || r}>
+                <slot></slot>
+            </div>
+        `;
+	}
+};
+e([o({ reflect: !0 })], w.prototype, "heading", void 0), w = e([a("flint-menubar-group")], w);
+var T = class extends t {
+	constructor(...e) {
+		super(...e), this.disabled = !1, this.highlighted = !1, this.inset = !1, this.value = "";
+	}
+	static {
+		this.styles = i(d);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "menuitem");
+	}
+	_labelText() {
+		return Array.from(this.childNodes).filter((e) => e.nodeType === Node.TEXT_NODE).map((e) => e.textContent ?? "").join("").trim();
+	}
+	select() {
+		this.disabled || this.dispatchEvent(new CustomEvent("flint-menubar-item-select", {
+			bubbles: !0,
+			composed: !0,
+			detail: { value: this.value || this._labelText() }
+		}));
+	}
+	render() {
+		return n`<div class="item" role="menuitem" aria-disabled=${this.disabled ? "true" : r}><slot></slot></div>`;
+	}
+};
+e([o({
+	reflect: !0,
+	type: Boolean
+})], T.prototype, "disabled", void 0), e([o({
+	reflect: !0,
+	type: Boolean
+})], T.prototype, "highlighted", void 0), e([o({
+	reflect: !0,
+	type: Boolean
+})], T.prototype, "inset", void 0), e([o({ reflect: !0 })], T.prototype, "value", void 0), T = e([a("flint-menubar-item")], T);
+var E = class extends t {
+	constructor(...e) {
+		super(...e), this.checked = !1, this.disabled = !1, this.highlighted = !1, this.value = "";
+	}
+	static {
+		this.styles = i(f);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "menuitemcheckbox");
+	}
+	_labelText() {
+		return Array.from(this.childNodes).filter((e) => e.nodeType === Node.TEXT_NODE).map((e) => e.textContent ?? "").join("").trim();
+	}
+	toggle() {
+		this.disabled || (this.checked = !this.checked, this.dispatchEvent(new CustomEvent("flint-menubar-checkbox-change", {
+			bubbles: !0,
+			composed: !0,
+			detail: {
+				checked: this.checked,
+				value: this.value || this._labelText()
+			}
+		})));
+	}
+	render() {
+		return n`
+            <div class="item" role="menuitemcheckbox" aria-checked=${this.checked ? "true" : "false"} aria-disabled=${this.disabled ? "true" : r}>
+                <span class="check">
+                    ${this.checked ? n`<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M11.5 3.5L5.5 9.5L2.5 6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>` : r}
+                </span>
+                <slot></slot>
+            </div>
+        `;
+	}
+};
+e([o({
+	reflect: !0,
+	type: Boolean
+})], E.prototype, "checked", void 0), e([o({
+	reflect: !0,
+	type: Boolean
+})], E.prototype, "disabled", void 0), e([o({
+	reflect: !0,
+	type: Boolean
+})], E.prototype, "highlighted", void 0), e([o({ reflect: !0 })], E.prototype, "value", void 0), E = e([a("flint-menubar-checkbox-item")], E);
+var D = class extends t {
+	constructor(...e) {
+		super(...e), this.value = "", this.checked = !1, this.disabled = !1, this.highlighted = !1;
+	}
+	static {
+		this.styles = i(p);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "menuitemradio");
+	}
+	select() {
+		this.disabled || this.dispatchEvent(new CustomEvent("flint-menubar-radio-select", {
+			bubbles: !0,
+			composed: !0,
+			detail: { value: this.value }
+		}));
+	}
+	render() {
+		return n`
+            <div class="item" role="menuitemradio" aria-checked=${this.checked ? "true" : "false"} aria-disabled=${this.disabled ? "true" : r}>
+                <span class="dot">
+                    ${this.checked ? n`<svg width="8" height="8" viewBox="0 0 8 8"><circle cx="4" cy="4" r="4" fill="currentColor"></circle></svg>` : r}
+                </span>
+                <slot></slot>
+            </div>
+        `;
+	}
+};
+e([o({ reflect: !0 })], D.prototype, "value", void 0), e([o({
+	reflect: !0,
+	type: Boolean
+})], D.prototype, "checked", void 0), e([o({
+	reflect: !0,
+	type: Boolean
+})], D.prototype, "disabled", void 0), e([o({
+	reflect: !0,
+	type: Boolean
+})], D.prototype, "highlighted", void 0), D = e([a("flint-menubar-radio-item")], D);
+var O = class extends t {
+	constructor(...e) {
+		super(...e), this.value = "", this._handleRadioSelect = (e) => {
+			let t = e;
+			t.stopPropagation(), this.value = t.detail.value, this._syncChecked(), this.dispatchEvent(new CustomEvent("flint-menubar-radio-change", {
+				bubbles: !0,
+				composed: !0,
+				detail: { value: this.value }
+			}));
+		}, this._onSlotChange = () => {
+			this._syncChecked();
+		};
+	}
+	static {
+		this.styles = i(m);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("flint-menubar-radio-select", this._handleRadioSelect);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("flint-menubar-radio-select", this._handleRadioSelect);
+	}
+	updated(e) {
+		e.has("value") && this._syncChecked();
+	}
+	_syncChecked() {
+		this.querySelectorAll("flint-menubar-radio-item").forEach((e) => {
+			e.checked = e.value === this.value;
+		});
+	}
+	render() {
+		return n`<div role="group"><slot @slotchange=${this._onSlotChange}></slot></div>`;
+	}
+};
+e([o({ reflect: !0 })], O.prototype, "value", void 0), O = e([a("flint-menubar-radio-group")], O);
+var k = class extends t {
+	constructor(...e) {
+		super(...e), this.open = !1;
+	}
+	static {
+		this.styles = i(h);
+	}
+	updated(e) {
+		e.has("open") && this.open && requestAnimationFrame(() => {
+			this.getBoundingClientRect().right > window.innerWidth ? (this.style.left = "auto", this.style.right = "100%") : (this.style.left = "", this.style.right = "");
+		});
+	}
+	render() {
+		return n`<div class="panel" role="menu"><slot></slot></div>`;
+	}
+};
+e([o({
+	reflect: !0,
+	type: Boolean
+})], k.prototype, "open", void 0), k = e([a("flint-menubar-sub-content")], k);
+var A = class extends t {
+	constructor(...e) {
+		super(...e), this.highlighted = !1, this.disabled = !1, this.inset = !1, this.expanded = !1;
+	}
+	static {
+		this.styles = i(g);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "menuitem");
+	}
+	render() {
+		return n`
+            <div class="item"
+                role="menuitem"
+                aria-haspopup="menu"
+                aria-expanded=${this.expanded ? "true" : "false"}
+                aria-disabled=${this.disabled ? "true" : r}>
+                <slot></slot>
+                <svg class="arrow" viewBox="0 0 14 14" fill="none">
+                    <path d="M5 3L9 7L5 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                </svg>
+            </div>
+        `;
+	}
+};
+e([o({
+	reflect: !0,
+	type: Boolean
+})], A.prototype, "highlighted", void 0), e([o({
+	reflect: !0,
+	type: Boolean
+})], A.prototype, "disabled", void 0), e([o({
+	reflect: !0,
+	type: Boolean
+})], A.prototype, "inset", void 0), e([o({
+	reflect: !0,
+	type: Boolean
+})], A.prototype, "expanded", void 0), A = e([a("flint-menubar-sub-trigger")], A);
+var j = class extends t {
+	constructor(...e) {
+		super(...e), this._open = !1, this._openTimer = null, this._closeTimer = null, this._handleMouseEnter = () => {
+			this.show();
+		}, this._handleMouseLeave = () => {
+			this.hide();
+		};
+	}
+	static {
+		this.styles = i(_);
+	}
+	get open() {
+		return this._open;
+	}
+	show() {
+		this._closeTimer &&= (clearTimeout(this._closeTimer), null), this._openTimer = setTimeout(() => {
+			this._open = !0, this._syncState();
+		}, 80);
+	}
+	showImmediate() {
+		this._openTimer &&= (clearTimeout(this._openTimer), null), this._closeTimer &&= (clearTimeout(this._closeTimer), null), this._open = !0, this._syncState();
+	}
+	hide() {
+		this._openTimer &&= (clearTimeout(this._openTimer), null), this._closeTimer = setTimeout(() => {
+			this._open = !1, this._syncState();
+		}, 60);
+	}
+	hideImmediate() {
+		this._openTimer &&= (clearTimeout(this._openTimer), null), this._closeTimer &&= (clearTimeout(this._closeTimer), null), this._open = !1, this._syncState();
+	}
+	_syncState() {
+		let e = this.querySelector(":scope > flint-menubar-sub-content");
+		e && (e.open = this._open);
+		let t = this.querySelector(":scope > flint-menubar-sub-trigger");
+		t && (t.highlighted = this._open, t.expanded = this._open);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("mouseenter", this._handleMouseEnter), this.addEventListener("mouseleave", this._handleMouseLeave);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("mouseenter", this._handleMouseEnter), this.removeEventListener("mouseleave", this._handleMouseLeave), this._openTimer && clearTimeout(this._openTimer), this._closeTimer && clearTimeout(this._closeTimer);
+	}
+	render() {
+		return n`<slot></slot>`;
+	}
+};
+j = e([a("flint-menubar-sub")], j);
+var M = class extends t {
+	constructor(...e) {
+		super(...e), this.open = !1, this._highlightIndex = -1, this._handleClick = (e) => {
+			let t = e.target, n = t.closest("flint-menubar-item");
+			if (n && !n.disabled) {
+				n.select(), this._requestClose();
+				return;
+			}
+			let r = t.closest("flint-menubar-checkbox-item");
+			if (r && !r.disabled) {
+				r.toggle();
+				return;
+			}
+			let i = t.closest("flint-menubar-radio-item");
+			if (i && !i.disabled) {
+				i.select();
+				return;
+			}
+		}, this._handleMouseOver = (e) => {
+			let t = e.target.closest("flint-menubar-item, flint-menubar-checkbox-item, flint-menubar-radio-item, flint-menubar-sub-trigger");
+			t && !t.disabled && (this._clearHighlight(), t.highlighted = !0, this._highlightIndex = this._getNavigableItems().indexOf(t));
+		};
+	}
+	static {
+		this.styles = i(v);
+	}
+	_getNavigableItems() {
+		let e = [
+			"flint-menubar-item:not([disabled]):not([hidden])",
+			"flint-menubar-checkbox-item:not([disabled]):not([hidden])",
+			"flint-menubar-radio-item:not([disabled]):not([hidden])",
+			"flint-menubar-sub-trigger:not([disabled]):not([hidden])"
+		].join(",");
+		return Array.from(this.querySelectorAll(e));
+	}
+	_clearHighlight() {
+		this._getNavigableItems().forEach((e) => e.highlighted = !1), this._highlightIndex = -1;
+	}
+	_highlightItem(e) {
+		let t = this._getNavigableItems();
+		if (t.length === 0) return;
+		this._clearHighlight(), this._highlightIndex = (e % t.length + t.length) % t.length;
+		let n = t[this._highlightIndex];
+		n.highlighted = !0;
+	}
+	handleKeyDown(e) {
+		let t = this._getNavigableItems();
+		switch (e.key) {
+			case "ArrowDown":
+				if (e.preventDefault(), t.length === 0) return;
+				this._highlightItem(this._highlightIndex + 1);
+				break;
+			case "ArrowUp":
+				if (e.preventDefault(), t.length === 0) return;
+				this._highlightItem(this._highlightIndex - 1);
+				break;
+			case "Home":
+				if (e.preventDefault(), t.length === 0) return;
+				this._highlightItem(0);
+				break;
+			case "End":
+				if (e.preventDefault(), t.length === 0) return;
+				this._highlightItem(t.length - 1);
+				break;
+			case "Enter":
+			case " ":
+				if (e.preventDefault(), this._highlightIndex >= 0 && this._highlightIndex < t.length) {
+					let e = t[this._highlightIndex];
+					if (e.tagName === "FLINT-MENUBAR-ITEM") e.select(), this._requestClose();
+					else if (e.tagName === "FLINT-MENUBAR-CHECKBOX-ITEM") e.toggle();
+					else if (e.tagName === "FLINT-MENUBAR-RADIO-ITEM") e.select();
+					else if (e.tagName === "FLINT-MENUBAR-SUB-TRIGGER") {
+						let t = e.closest("flint-menubar-sub");
+						t && t.showImmediate();
+					}
+				}
+				break;
+			case "ArrowRight":
+				if (this._highlightIndex >= 0 && this._highlightIndex < t.length) {
+					let n = t[this._highlightIndex];
+					if (n.tagName === "FLINT-MENUBAR-SUB-TRIGGER") {
+						e.preventDefault();
+						let t = n.closest("flint-menubar-sub");
+						if (t) {
+							t.showImmediate();
+							let e = t.querySelector("flint-menubar-sub-content");
+							if (e) {
+								let t = Array.from(e.querySelectorAll("flint-menubar-item:not([disabled]),flint-menubar-checkbox-item:not([disabled]),flint-menubar-radio-item:not([disabled]),flint-menubar-sub-trigger:not([disabled])"));
+								t.length > 0 && (t[0].highlighted = !0);
+							}
+						}
+						return;
+					}
+				}
+				break;
+			case "ArrowLeft": {
+				let t = Array.from(this.querySelectorAll("flint-menubar-sub")).find((e) => e.open);
+				if (t) {
+					e.preventDefault(), t.hideImmediate();
+					return;
+				}
+				break;
+			}
+			case "Escape":
+				e.preventDefault(), this._requestClose();
+				break;
+			default: if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+				if (t.length === 0) return;
+				e.preventDefault();
+				let n = e.key.toLowerCase(), r = this._highlightIndex >= 0 ? this._highlightIndex + 1 : 0;
+				for (let e = 0; e < t.length; e++) {
+					let i = (r + e) % t.length;
+					if ((t[i].textContent?.trim().toLowerCase() ?? "").startsWith(n)) {
+						this._highlightItem(i);
+						break;
+					}
+				}
+			}
+		}
+	}
+	_requestClose() {
+		this.dispatchEvent(new CustomEvent("flint-menubar-request-close", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	resetHighlight() {
+		this._clearHighlight();
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("click", this._handleClick), this.addEventListener("mouseover", this._handleMouseOver);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("click", this._handleClick), this.removeEventListener("mouseover", this._handleMouseOver);
+	}
+	render() {
+		return n`<div class="panel" role="menu"><slot></slot></div>`;
+	}
+};
+e([o({
+	reflect: !0,
+	type: Boolean
+})], M.prototype, "open", void 0), M = e([a("flint-menubar-content")], M);
+var N = class extends t {
+	constructor(...e) {
+		super(...e), this.active = !1, this.disabled = !1, this._focusable = !1;
+	}
+	setFocusable(e) {
+		this._focusable = e;
+	}
+	static {
+		this.styles = i(y);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "menuitem");
+	}
+	render() {
+		return n`
+            <button class="trigger"
+                role="menuitem"
+                aria-haspopup="true"
+                aria-expanded=${this.active ? "true" : "false"}
+                ?disabled=${this.disabled}
+                tabindex=${this._focusable ? "0" : "-1"}>
+                <slot></slot>
+            </button>
+        `;
+	}
+};
+e([o({
+	reflect: !0,
+	type: Boolean
+})], N.prototype, "active", void 0), e([o({
+	reflect: !0,
+	type: Boolean
+})], N.prototype, "disabled", void 0), e([s()], N.prototype, "_focusable", void 0), N = e([a("flint-menubar-trigger")], N);
+var P = class extends t {
+	constructor(...e) {
+		super(...e), this.disabled = !1;
+	}
+	static {
+		this.styles = i(b);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "none");
+	}
+	get trigger() {
+		return this.querySelector(":scope > flint-menubar-trigger");
+	}
+	get content() {
+		return this.querySelector(":scope > flint-menubar-content");
+	}
+	updated(e) {
+		if (e.has("disabled")) {
+			let e = this.trigger;
+			e && (e.disabled = this.disabled);
+		}
+	}
+	open() {
+		if (this.disabled) return;
+		let e = this.trigger, t = this.content;
+		e && (e.active = !0), t && (t.open = !0, t.resetHighlight());
+	}
+	close() {
+		let e = this.trigger, t = this.content;
+		e && (e.active = !1), t && (t.open = !1, t.resetHighlight(), this.querySelectorAll("flint-menubar-sub").forEach((e) => e.hideImmediate()));
+	}
+	get isOpen() {
+		return this.content?.open ?? !1;
+	}
+	render() {
+		return n`<slot></slot>`;
+	}
+};
+e([o({
+	reflect: !0,
+	type: Boolean
+})], P.prototype, "disabled", void 0), P = e([a("flint-menubar-menu")], P);
+var F = class extends t {
+	constructor(...e) {
+		super(...e), this._activeIndex = -1, this.label = "", this._handleTriggerClick = (e) => {
+			let t = e.target.closest?.("flint-menubar-trigger");
+			if (!t) return;
+			let n = t.closest("flint-menubar-menu");
+			if (!n || n.disabled) return;
+			let r = this._getMenus().indexOf(n);
+			r !== -1 && (this._activeIndex === r ? this.closeAll() : this._openMenu(r));
+		}, this._handleTriggerMouseEnter = (e) => {
+			if (this._activeIndex === -1) return;
+			let t = e.target.closest?.("flint-menubar-trigger");
+			if (!t) return;
+			let n = t.closest("flint-menubar-menu");
+			if (!n || n.disabled) return;
+			let r = this._getMenus().indexOf(n);
+			r !== -1 && r !== this._activeIndex && this._openMenu(r);
+		}, this._handleKeyDown = (e) => {
+			let t = this._getMenus();
+			switch (e.key) {
+				case "ArrowRight": {
+					if (this._activeIndex === -1) return;
+					let n = t[this._activeIndex]?.content;
+					if (n && Array.from(n.querySelectorAll("flint-menubar-item, flint-menubar-checkbox-item, flint-menubar-radio-item, flint-menubar-sub-trigger")).find((e) => e.highlighted)?.tagName === "FLINT-MENUBAR-SUB-TRIGGER") {
+						n.handleKeyDown(e);
+						return;
+					}
+					e.preventDefault(), this._navigate(1);
+					break;
+				}
+				case "ArrowLeft": {
+					if (this._activeIndex === -1) return;
+					let n = t[this._activeIndex]?.content;
+					if (n && Array.from(n.querySelectorAll("flint-menubar-sub")).find((e) => e.open)) {
+						n.handleKeyDown(e);
+						return;
+					}
+					e.preventDefault(), this._navigate(-1);
+					break;
+				}
+				case "ArrowDown":
+					if (this._activeIndex === -1) {
+						e.preventDefault();
+						let n = t.findIndex((e) => !e.disabled);
+						if (n === -1) return;
+						this._openMenu(n);
+						let r = t[n]?.content;
+						r && r.handleKeyDown(e);
+					} else {
+						let n = t[this._activeIndex]?.content;
+						n && n.handleKeyDown(e);
+					}
+					break;
+				case "ArrowUp":
+				case "Home":
+				case "End":
+				case "Enter":
+				case " ":
+					if (this._activeIndex >= 0) {
+						let n = t[this._activeIndex]?.content;
+						n && n.handleKeyDown(e);
+					} else if (e.key === "Enter" || e.key === " ") {
+						e.preventDefault();
+						let n = this.querySelector("flint-menubar-trigger[tabindex=\"0\"]");
+						if (n) {
+							let e = n.closest("flint-menubar-menu");
+							if (e) {
+								let n = t.indexOf(e);
+								n !== -1 && this._openMenu(n);
+							}
+						}
+					}
+					break;
+				case "Escape":
+					if (this._activeIndex >= 0) {
+						e.preventDefault();
+						let n = this._activeIndex;
+						this.closeAll();
+						let r = (t[n]?.trigger)?.shadowRoot?.querySelector("button");
+						r && r.focus();
+					}
+					break;
+				case "Tab":
+					this._activeIndex >= 0 && this.closeAll();
+					break;
+				default: if (this._activeIndex >= 0 && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+					let n = t[this._activeIndex]?.content;
+					n && n.handleKeyDown(e);
+				}
+			}
+		}, this._handleRequestClose = () => {
+			let e = this._activeIndex;
+			this.closeAll();
+			let t = (this._getMenus()[e]?.trigger)?.shadowRoot?.querySelector("button");
+			t && t.focus();
+		}, this._handleOutsideClick = (e) => {
+			this._activeIndex !== -1 && (e.composedPath().includes(this) || this.closeAll());
+		}, this._onSlotChange = () => {
+			this._updateTabFocus();
+		};
+	}
+	static {
+		this.styles = i(x);
+	}
+	get activeIndex() {
+		return this._activeIndex;
+	}
+	_getMenus() {
+		return Array.from(this.querySelectorAll(":scope > flint-menubar-menu"));
+	}
+	_updateTabFocus() {
+		let e = this._getMenus(), t = e.findIndex((e) => !e.disabled);
+		e.forEach((e, n) => {
+			let r = e.trigger;
+			r && r.setFocusable(this._activeIndex === -1 ? n === t : n === this._activeIndex);
+		});
+	}
+	_openMenu(e) {
+		let t = this._getMenus();
+		t[e]?.disabled || (t.forEach((t, n) => {
+			n === e ? t.open() : t.close();
+		}), this._activeIndex = e, this._updateTabFocus());
+	}
+	closeAll() {
+		this._getMenus().forEach((e) => e.close()), this._activeIndex = -1, this._updateTabFocus();
+	}
+	_navigate(e) {
+		let t = this._getMenus();
+		if (t.length === 0) return;
+		let n = this._activeIndex;
+		for (let r = 0; r < t.length && (n = ((n + e) % t.length + t.length) % t.length, t[n].disabled); r++);
+		t[n].disabled || this._openMenu(n);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("click", this._handleTriggerClick), this.addEventListener("mouseover", this._handleTriggerMouseEnter), this.addEventListener("keydown", this._handleKeyDown), this.addEventListener("flint-menubar-request-close", this._handleRequestClose), document.addEventListener("click", this._handleOutsideClick, !0);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("click", this._handleTriggerClick), this.removeEventListener("mouseover", this._handleTriggerMouseEnter), this.removeEventListener("keydown", this._handleKeyDown), this.removeEventListener("flint-menubar-request-close", this._handleRequestClose), document.removeEventListener("click", this._handleOutsideClick, !0);
+	}
+	firstUpdated() {
+		this._updateTabFocus();
+	}
+	render() {
+		return n`
+            <div part="bar" role="menubar" aria-label=${this.label || "Menu bar"}>
+                <slot @slotchange=${this._onSlotChange}></slot>
+            </div>
+        `;
+	}
+};
+e([o({ reflect: !0 })], F.prototype, "label", void 0), F = e([a("flint-menubar")], F);
+//#endregion
+export { T as a, D as c, j as d, k as f, w as i, C as l, N as m, E as n, P as o, A as p, M as r, O as s, F as t, S as u };