@nonoun/native-ui 0.2.4 → 0.2.6

package/dist/native-ui.js

@@ -46,11 +46,8 @@ function Ht(e) {
 		}
 	};
 }
-/**
-* Right-side inspector panel within the layout, hidden by default and resizable.
-* @attr {boolean} open - Whether the inspector panel is visible
-*/
-var Ut = class extends X {
+/** Keyboard shortcut indicator. Pure display — no behavior. */
+var Ut = class extends X {}, Wt = class extends X {
 	#e = null;
 	get open() {
 		return this.hasAttribute("open");
@@ -74,4 +71,4 @@ var Ut = class extends X {
 		this.#e?.destroy(), this.#e = null, super.teardown();
 	}
 };
-export { pe as CalendarStore, o as ClipboardController, i as CollapsibleController, Ae as ColumnResizeController, Ht as ContextConsumer, Vt as ContextProvider, $ as ContextRequestEvent, f as CopyController, Be as DataListController, zt as DialogController, Pt as DismissController, Ft as DismissStack, jt as DragController, A as DropZoneController, l as EditController, p as FocusTrapController, De as FormAssociable, Nt as GestureRouter, m as HoverController, d as IntersectController, It as ListNavigateController, Rt as PopoverController, Lt as PressController, y as RangeSelectController, Q as ResizeController, At as RovingFocusController, h as SearchController, xe as SelectController, G as SelectionController, re as SortController, u as SwipeController, Me as TableStore, a as ToastController, Bt as ToastManager, we as UIAccordion, Pe as UIAccordionItem, fe as UIAvatar, Oe as UIBadge, Ct as UIBreadcrumb, le as UIBreadcrumbItem, Ie as UIButton, Ce as UICalendar, yt as UICard, Ue as UIChatInput, Re as UICheckbox, et as UICombobox, We as UICommand, lt as UICommandEmpty, gt as UICommandGroup, bt as UICommandInput, He as UICommandItem, rt as UICommandList, Ke as UIController, Z as UIDialog, Tt as UIDrawer, X as UIElement, se as UIField, _t as UIIcon, Ye as UIInput, de as UIInputOtp, Le as UILayoutChat, Ut as UILayoutInspector, ht as UILayoutSidebar, ct as UILayoutSidebarTrigger, Ze as UIListbox, Je as UINav, it as UINavGroup, ut as UINavGroupHeader, Xe as UINavItem, at as UIOption, qe as UIOptionGroup, dt as UIOptionGroupHeader, Ee as UIPagination, mt as UIRadio, st as UIRadioGroup, Se as UIRange, nt as UISection, Ge as UISegment, vt as UISegmentedControl, be as UISelect, Fe as UISlide, xt as UISlideshow, $e as UISwitch, _e as UITab, ft as UITabPanel, ve as UITabPanels, he as UITable, ce as UITableBody, Te as UITableCell, je as UITableHead, ye as UITableHeader, kt as UITableRow, Ne as UITabs, tt as UITextarea, Ve as UIToolbar, oe as UITooltip, ze as UITree, Dt as UITreeItem, j as ValidateController, ie as VirtualScrollController, ee as batch, k as clippableAdapter, x as collapsibleAdapter, J as collectTraitOptions, te as computed, r as copyableAdapter, ge as createCalendarStore, Et as createDataList, ke as createDisabledEffect, me as createTableStore, c as debugReactive, ne as define, T as dialogableAdapter, O as dismissableAdapter, B as draggableAdapter, U as droppableAdapter, P as editableAdapter, e as effect, St as fetchDataOptions, V as focusTrappableAdapter, ot as getIcon, q as getRegisteredTraitNames, K as getTrait, Mt as getTraitRuntime, H as hoverableAdapter, g as intersectableAdapter, v as isComputed, b as isSignal, E as listNavigableAdapter, pt as onIconRegistered, Ot as parseDataOptions, Y as parseTraitAttribute, I as popoverableAdapter, _ as pressableAdapter, ue as prop, M as rangeSelectableAdapter, z as registerAllTraits, Qe as registerIcon, ae as registerTrait, w as resizableAdapter, D as rovingFocusableAdapter, S as searchableAdapter, F as selectableAdapter, n as signal, C as sortableAdapter, L as swipeableAdapter, wt as syncProp, N as toastableAdapter, t as uid, s as untrack, W as validatableAdapter, R as virtualizableAdapter };
+export { pe as CalendarStore, o as ClipboardController, i as CollapsibleController, Ae as ColumnResizeController, Ht as ContextConsumer, Vt as ContextProvider, $ as ContextRequestEvent, f as CopyController, Be as DataListController, zt as DialogController, Pt as DismissController, Ft as DismissStack, jt as DragController, A as DropZoneController, l as EditController, p as FocusTrapController, De as FormAssociable, Nt as GestureRouter, m as HoverController, d as IntersectController, It as ListNavigateController, Rt as PopoverController, Lt as PressController, y as RangeSelectController, Q as ResizeController, At as RovingFocusController, h as SearchController, xe as SelectController, G as SelectionController, re as SortController, u as SwipeController, Me as TableStore, a as ToastController, Bt as ToastManager, we as UIAccordion, Pe as UIAccordionItem, fe as UIAvatar, Oe as UIBadge, Ct as UIBreadcrumb, le as UIBreadcrumbItem, Ie as UIButton, Ce as UICalendar, yt as UICard, Ue as UIChatInput, Re as UICheckbox, et as UICombobox, We as UICommand, lt as UICommandEmpty, gt as UICommandGroup, bt as UICommandInput, He as UICommandItem, rt as UICommandList, Ke as UIController, Z as UIDialog, Tt as UIDrawer, X as UIElement, se as UIField, _t as UIIcon, Ye as UIInput, de as UIInputOtp, Ut as UIKbd, Le as UILayoutChat, Wt as UILayoutInspector, ht as UILayoutSidebar, ct as UILayoutSidebarItem, Ze as UIListbox, Je as UINav, it as UINavGroup, ut as UINavGroupHeader, Xe as UINavItem, at as UIOption, qe as UIOptionGroup, dt as UIOptionGroupHeader, Ee as UIPagination, mt as UIRadio, st as UIRadioGroup, Se as UIRange, nt as UISection, Ge as UISegment, vt as UISegmentedControl, be as UISelect, Fe as UISlide, xt as UISlideshow, $e as UISwitch, _e as UITab, ft as UITabPanel, ve as UITabPanels, he as UITable, ce as UITableBody, Te as UITableCell, je as UITableHead, ye as UITableHeader, kt as UITableRow, Ne as UITabs, tt as UITextarea, Ve as UIToolbar, oe as UITooltip, ze as UITree, Dt as UITreeItem, j as ValidateController, ie as VirtualScrollController, ee as batch, k as clippableAdapter, x as collapsibleAdapter, J as collectTraitOptions, te as computed, r as copyableAdapter, ge as createCalendarStore, Et as createDataList, ke as createDisabledEffect, me as createTableStore, c as debugReactive, ne as define, T as dialogableAdapter, O as dismissableAdapter, B as draggableAdapter, U as droppableAdapter, P as editableAdapter, e as effect, St as fetchDataOptions, V as focusTrappableAdapter, ot as getIcon, q as getRegisteredTraitNames, K as getTrait, Mt as getTraitRuntime, H as hoverableAdapter, g as intersectableAdapter, v as isComputed, b as isSignal, E as listNavigableAdapter, pt as onIconRegistered, Ot as parseDataOptions, Y as parseTraitAttribute, I as popoverableAdapter, _ as pressableAdapter, ue as prop, M as rangeSelectableAdapter, z as registerAllTraits, Qe as registerIcon, ae as registerTrait, w as resizableAdapter, D as rovingFocusableAdapter, S as searchableAdapter, F as selectableAdapter, n as signal, C as sortableAdapter, L as swipeableAdapter, wt as syncProp, N as toastableAdapter, t as uid, s as untrack, W as validatableAdapter, R as virtualizableAdapter };

package/dist/register-all.js

@@ -1,3 +1,3 @@
 import { t as e } from "./define.js";
 import { $ as t, A as n, B as r, C as i, D as a, E as o, H as s, J as c, K as l, L as u, M as d, O as f, P as p, Q as m, R as h, S as g, T as _, V as v, X as y, Y as b, Z as x, _ as S, _t as C, a as w, at as T, b as E, c as D, ct as O, d as k, dt as A, et as j, f as M, ft as N, g as P, gt as F, h as I, ht as L, it as R, j as z, k as B, l as V, lt as H, m as U, mt as W, nt as G, o as K, ot as q, p as J, pt as Y, q as X, rt as Z, s as Q, st as $, t as ee, tt as te, u as ne, ut as re, v as ie, w as ae, x as oe, y as se, z as ce } from "./ui-icon-element.js";
-e("ui-button", C), e("ui-input", F), e("ui-listbox", L), e("ui-option", W), e("ui-option-group", N), e("ui-option-group-header", Y), e("ui-select", d), e("ui-combobox", z), e("ui-command", A), e("ui-command-input", re), e("ui-command-list", H), e("ui-command-group", $), e("ui-command-item", O), e("ui-command-empty", q), e("ui-checkbox", T), e("ui-switch", R), e("ui-radio", Z), e("ui-radio-group", G), e("ui-segmented-control", te), e("ui-segment", j), e("ui-tooltip", t), e("ui-accordion", m), e("ui-accordion-item", x), e("ui-dialog", y), e("ui-tabs", b), e("ui-tab", c), e("ui-tab-panel", X), e("ui-tab-panels", l), e("ui-table", s), e("ui-table-head", v), e("ui-table-body", r), e("ui-table-row", ce), e("ui-table-header", u), e("ui-table-cell", h), e("ui-calendar", p), e("ui-field", n), e("ui-textarea", B), e("ui-range", f), e("ui-input-otp", a), e("ui-avatar", o), e("ui-badge", _), e("ui-breadcrumb", ae), e("ui-breadcrumb-item", i), e("ui-pagination", g), e("ui-drawer", oe), e("ui-tree", E), e("ui-tree-item", se), e("ui-slideshow", ie), e("ui-slide", S), e("ui-nav", P), e("ui-nav-group", U), e("ui-nav-group-header", J), e("ui-nav-item", I), e("ui-chat-input", k), e("ui-controller", M), e("ui-card", ne), e("ui-section", V), e("ui-toolbar", D), e("ui-layout-sidebar", Q), e("ui-layout-sidebar-trigger", K), e("ui-layout-chat", w), e("ui-icon", ee);
+e("ui-button", C), e("ui-input", F), e("ui-listbox", L), e("ui-option", W), e("ui-option-group", N), e("ui-option-group-header", Y), e("ui-select", d), e("ui-combobox", z), e("ui-command", A), e("ui-command-input", re), e("ui-command-list", H), e("ui-command-group", $), e("ui-command-item", O), e("ui-command-empty", q), e("ui-checkbox", T), e("ui-switch", R), e("ui-radio", Z), e("ui-radio-group", G), e("ui-segmented-control", te), e("ui-segment", j), e("ui-tooltip", t), e("ui-accordion", m), e("ui-accordion-item", x), e("ui-dialog", y), e("ui-tabs", b), e("ui-tab", c), e("ui-tab-panel", X), e("ui-tab-panels", l), e("ui-table", s), e("ui-table-head", v), e("ui-table-body", r), e("ui-table-row", ce), e("ui-table-header", u), e("ui-table-cell", h), e("ui-calendar", p), e("ui-field", n), e("ui-textarea", B), e("ui-range", f), e("ui-input-otp", a), e("ui-avatar", o), e("ui-badge", _), e("ui-breadcrumb", ae), e("ui-breadcrumb-item", i), e("ui-pagination", g), e("ui-drawer", oe), e("ui-tree", E), e("ui-tree-item", se), e("ui-slideshow", ie), e("ui-slide", S), e("ui-nav", P), e("ui-nav-group", U), e("ui-nav-group-header", J), e("ui-nav-item", I), e("ui-chat-input", k), e("ui-controller", M), e("ui-card", ne), e("ui-section", V), e("ui-toolbar", D), e("ui-layout-sidebar", Q), e("ui-layout-sidebar-item", K), e("ui-layout-chat", w), e("ui-icon", ee);

package/dist/ui-icon-element.js

@@ -4016,9 +4016,16 @@ var ve = class extends y(c) {
 	#t = null;
 	#n;
 	#r = null;
+	#i = null;
+	#a = null;
+	#o = !1;
 	constructor() {
 		super(), this.#n = this.attachInternals(), this.#n.role = "group";
 	}
+	/** Whether the flyout popover is currently open. */
+	get flyoutOpen() {
+		return this.#o;
+	}
 	get open() {
 		return this.#e.value;
 	}
@@ -4035,16 +4042,18 @@ var ve = class extends y(c) {
 		e.insertBefore(t, e.firstChild), this.appendChild(e), this.#t = e, this.addEffect(() => {
 			let e = this.#e.value;
 			this.#t && (this.#t.open = e);
-		}), e.addEventListener("toggle", this.#a), this.#r = new MutationObserver(() => this.#i()), this.#r.observe(e, {
+		}), e.addEventListener("toggle", this.#c), this.#r = new MutationObserver(() => this.#s()), this.#r.observe(e, {
 			subtree: !0,
 			attributes: !0,
 			attributeFilter: ["aria-current"]
-		}), this.#i();
+		}), this.#s();
+		let r = document.createElement("ui-listbox");
+		r.setAttribute("popover", "manual"), r.className = "nav-group-flyout", this.appendChild(r), this.#i = r, this.#a = new p(this), this.#a.wirePopover(this, r), r.addEventListener("ui-select", this.#u), r.addEventListener("ui-change", this.#d), this.addEventListener("ui-dismiss", this.#l);
 	}
 	teardown() {
-		this.#r?.disconnect(), this.#r = null, this.#t?.removeEventListener("toggle", this.#a), this.#t = null, super.teardown();
+		this.closeFlyout(), this.#a?.destroy(), this.#a = null, this.#i?.remove(), this.#i = null, this.#r?.disconnect(), this.#r = null, this.#t?.removeEventListener("toggle", this.#c), this.#t = null, super.teardown();
 	}
-	#i() {
+	#s() {
 		if (!this.#t) return;
 		let e = this.#t.querySelectorAll(":scope > ui-nav-item"), t = -1;
 		for (let n = 0; n < e.length; n++) if (e[n].hasAttribute("aria-current")) {
@@ -4057,11 +4066,37 @@ var ve = class extends y(c) {
 		}
 		this.style.setProperty("--_indicator-index", `${t}`), this.#n.states.add("has-selection");
 	}
-	#a = () => {
+	#c = () => {
 		if (!this.#t) return;
 		let e = this.#t.open;
 		this.#e.value = e, this.toggleAttribute("open", e);
 	};
+	/** Stamp ui-option elements from child nav-items, open the flyout popover. */
+	openFlyout() {
+		if (!this.#t || !this.#i) return;
+		this.#i.innerHTML = "";
+		let e = this.#t.querySelectorAll(":scope > ui-nav-item"), t = !0;
+		for (let n of e) {
+			let e = n.getAttribute("value") ?? "", r = n.getAttribute("label") || n.textContent?.trim() || "", i = n.hasAttribute("aria-disabled"), a = document.createElement("ui-option");
+			a.setAttribute("value", e), a.textContent = r, n.hasAttribute("aria-current") && a.setAttribute("selected", ""), i && a.setAttribute("disabled", ""), i || (a.setAttribute("tabindex", t ? "0" : "-1"), t = !1), this.#i.appendChild(a);
+		}
+		this.#o = !0, this.#a?.syncPopover(!0), queueMicrotask(() => {
+			(this.#i?.querySelector("ui-option:not([disabled])"))?.focus();
+		});
+	}
+	/** Clear the flyout and close the popover. Returns focus to the summary. */
+	closeFlyout() {
+		this.#i && (this.#i.innerHTML = "", this.#o = !1, this.#a?.syncPopover(!1), (this.#t?.querySelector("summary"))?.focus());
+	}
+	#l = () => {
+		this.closeFlyout();
+	};
+	#u = () => {
+		queueMicrotask(() => this.closeFlyout());
+	};
+	#d = (e) => {
+		e.stopPropagation();
+	};
 }, Re = class extends c {
 	constructor() {
 		super();
@@ -4072,6 +4107,11 @@ var ve = class extends y(c) {
 		super.setup(), this.id ||= e("ngh");
 		let t = this.closest("ui-nav-group");
 		t && t.setAttribute("aria-labelledby", this.id);
+		let n = this.querySelector(":scope > ui-icon");
+		if (n) {
+			let e = document.createElement("span");
+			e.className = "icon-well", this.insertBefore(e, n), e.appendChild(n);
+		}
 	}
 }, Y = class extends c {
 	static observedAttributes = [
@@ -4308,7 +4348,14 @@ var ve = class extends y(c) {
 		this.#t.destroy(), super.teardown();
 	}
 }, Ue = class extends c {
+	static observedAttributes = ["collapsed"];
 	#e = null;
+	#t = null;
+	#n = null;
+	#r = [];
+	attributeChangedCallback(e, t, n) {
+		t !== n && (e === "collapsed" && this.dataset.ready !== void 0 && this.#i(), super.attributeChangedCallback?.(e, t, n));
+	}
 	setup() {
 		super.setup();
 		let e = this.querySelector(":scope > [slot=\"sidebar\"]");
@@ -4317,10 +4364,56 @@ var ve = class extends y(c) {
 			axis: "horizontal",
 			min: 160,
 			max: 400
-		})), this.dataset.ready = "";
+		})), e && this.#s(e), this.#i(), this.addEventListener("ui-dismiss", this.#o), this.dataset.ready = "";
 	}
 	teardown() {
-		this.#e?.destroy(), this.#e = null, super.teardown();
+		this.removeEventListener("ui-dismiss", this.#o), this.#a(), this.#n = null, this.#t?.disconnect(), this.#t = null, this.#e?.destroy(), this.#e = null, super.teardown();
+	}
+	/** Attach or detach summary click interception based on collapsed state. */
+	#i() {
+		if (this.#a(), !this.hasAttribute("collapsed")) {
+			this.#n?.flyoutOpen && this.#n.closeFlyout(), this.#n = null;
+			return;
+		}
+		let e = this.querySelectorAll("ui-nav-group");
+		for (let t of e) {
+			let e = t.querySelector(":scope > details > summary");
+			if (!e) continue;
+			let n = (e) => {
+				e.preventDefault(), this.#n === t && t.flyoutOpen ? (t.closeFlyout(), this.#n = null) : (this.#n?.flyoutOpen && this.#n.closeFlyout(), t.openFlyout(), this.#n = t);
+			};
+			e.addEventListener("click", n), this.#r.push({
+				summary: e,
+				handler: n
+			});
+		}
+	}
+	/** Remove all summary click listeners. */
+	#a() {
+		for (let { summary: e, handler: t } of this.#r) e.removeEventListener("click", t);
+		this.#r = [];
+	}
+	/** When a group closes its flyout internally (dismiss, option select),
+	*  clear our active reference so we stay in sync. */
+	#o = (e) => {
+		let t = e.target?.closest?.("ui-nav-group");
+		t && t === this.#n && (this.#n = null);
+	};
+	/** Watch header/footer size changes and sync CSS custom properties + data
+	*  attributes so content gets correct padding offsets and fade masks. */
+	#s(e) {
+		let t = e.querySelector("ui-layout-sidebar-header"), n = e.querySelector("ui-layout-sidebar-footer"), r = e.querySelector("ui-layout-sidebar-content");
+		if (!r) return;
+		let i = () => {
+			let i = t ? t.offsetHeight : 0, a = n ? n.offsetHeight : 0;
+			e.style.setProperty("--_sidebar-header-height", `${i}px`), e.style.setProperty("--_sidebar-footer-height", `${a}px`), t ? r.dataset.hasHeader = "" : delete r.dataset.hasHeader, n ? r.dataset.hasFooter = "" : delete r.dataset.hasFooter;
+		};
+		i();
+		let a = [];
+		if (t && a.push(t), n && a.push(n), a.length > 0) {
+			this.#t = new ResizeObserver(i);
+			for (let e of a) this.#t.observe(e);
+		}
 	}
 }, We = class extends c {
 	#e = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nonoun/native-ui",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "Zero-dependency web component library with an OKLCH CSS design system, signal-based reactivity, and composable trait controllers",
   "license": "MIT",
   "type": "module",

package/dist/containers/ui-layout-sidebar/ui-layout-sidebar-trigger-element.d.ts

@@ -1,8 +0,0 @@
-import { UIElement } from '../../core/ui-element.ts';
-/** Sidebar trigger button that toggles a popover listbox for navigation in collapsed state. */
-export declare class UILayoutSidebarTrigger extends UIElement {
-    #private;
-    setup(): void;
-    teardown(): void;
-}
-//# sourceMappingURL=ui-layout-sidebar-trigger-element.d.ts.map

package/dist/containers/ui-layout-sidebar/ui-layout-sidebar-trigger-element.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ui-layout-sidebar-trigger-element.d.ts","sourceRoot":"","sources":["../../../src/containers/ui-layout-sidebar/ui-layout-sidebar-trigger-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAGrD,+FAA+F;AAC/F,qBAAa,sBAAuB,SAAQ,SAAS;;IAInD,KAAK,IAAI,IAAI;IAYb,QAAQ,IAAI,IAAI;CAmBjB"}

package/dist/containers/ui-layout-sidebar/ui-layout-sidebar-trigger.d.ts

@@ -1,3 +0,0 @@
-import { UILayoutSidebarTrigger } from './ui-layout-sidebar-trigger-element.ts';
-export { UILayoutSidebarTrigger };
-//# sourceMappingURL=ui-layout-sidebar-trigger.d.ts.map

package/dist/containers/ui-layout-sidebar/ui-layout-sidebar-trigger.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ui-layout-sidebar-trigger.d.ts","sourceRoot":"","sources":["../../../src/containers/ui-layout-sidebar/ui-layout-sidebar-trigger.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAIhF,OAAO,EAAE,sBAAsB,EAAE,CAAC"}