@nonoun/native-ui 0.2.5 → 0.2.7

package/dist/native-ui-lean.css

@@ -3769,7 +3769,7 @@
     line-height: 1;
     min-height: var(--ui-kbd-size-md);
     padding-inline: 0.4em;
-    border-radius: 0.25rem;
+    border-radius: 0.5em;
     background: var(--_ground, var(--_body));
     border: 1px solid var(--_border-muted);
     color: var(--_ink-muted);
@@ -4080,6 +4080,18 @@
     user-select: none;
   }
 
+  /* WHY: Fixed-size icon well — matches ui-layout-sidebar-item [slot="icon"].
+     All sidebar icons align on the same 1.5rem column regardless of icon size.
+     JS wraps the first <ui-icon> child in a .icon-well span during setup(). */
+  :where(ui-nav-group-header) > :where(.icon-well) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    flex-shrink: 0;
+  }
+
   /* ── Chevron icon (right side of summary) ── */
 
   :where(ui-nav-group) > :where(details) > :where(summary)::after {
@@ -4133,13 +4145,14 @@
 
   /* WHY: Insets account for the summary's padding-inline so the connector
      line passes through the icon center and child text aligns with header text. */
-  :where(ui-nav-group):has(:where(ui-nav-group-header) :where(ui-icon)) {
+  :where(ui-nav-group):has(:where(ui-nav-group-header) :where(.icon-well)) {
     --_group-pad: calc(var(--_space-k) * var(--_space));
-    --_group-line-inset: calc(var(--_group-pad) + var(--_icon-size) / 2);
-    --_group-child-inset: calc(var(--_icon-size) + var(--_space) * 2);
+    --_group-icon-well: 1.5rem;
+    --_group-line-inset: calc(var(--_group-pad) + var(--_group-icon-well) / 2);
+    --_group-child-inset: calc(var(--_group-icon-well) + var(--_space) * 2);
   }
 
-  :where(ui-nav-group):has(:where(ui-nav-group-header) :where(ui-icon)):has(:where(details[open]))::after {
+  :where(ui-nav-group):has(:where(ui-nav-group-header) :where(.icon-well)):has(:where(details[open]))::after {
     content: '';
     position: absolute;
     inset-inline-start: var(--_group-line-inset);
@@ -4154,7 +4167,7 @@
   /* WHY: A ::before pseudo on the group slides along the connector line.
      JS sets --_indicator-index; :state(has-selection) gates visibility. */
 
-  :where(ui-nav-group):has(:where(ui-nav-group-header) :where(ui-icon)):has(:where(details[open])):state(has-selection)::before {
+  :where(ui-nav-group):has(:where(ui-nav-group-header) :where(.icon-well)):has(:where(details[open])):state(has-selection)::before {
     content: '';
     position: absolute;
     z-index: 1;
@@ -4238,7 +4251,7 @@
       gap: 0;
     }
 
-    :where(ui-nav-group-header) :where(ui-icon) {
+    :where(ui-nav-group-header) :where(.icon-well) :where(ui-icon) {
       font-size: var(--_font-size, 1rem);
     }
 
@@ -6889,6 +6902,20 @@
     outline-offset: -2px;
   }
 
+  /* WHY: Fixed-size icon well so all sidebar icons (header logo, nav group icons,
+     standalone icons) center-align on the same column width regardless of intrinsic
+     icon size. 1.5rem matches the sidebar's visual rhythm at default density.
+     Consumer wraps the icon: <span slot="icon"><ui-icon name="..."></ui-icon></span>
+     The wrapper is the well; the icon keeps its own --ui-icon-size dimensions. */
+  :where(ui-layout-sidebar-item) > :where([slot="icon"]) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    flex-shrink: 0;
+  }
+
   /* WHY: Trailing caret pushes to end — same pattern as button justify="spread". */
   :where(ui-layout-sidebar-item) > :where([slot="trailing"]) {
     margin-inline-start: auto;
@@ -6966,7 +6993,7 @@
     }
 
     :where(ui-layout-sidebar-item) > :where([slot="icon"]) {
-      display: block;
+      display: inline-flex;
     }
 
     :where(ui-layout-sidebar-item) > :where(:not([slot="icon"]):not(ui-listbox[popover]):not(.nav-group-flyout)) {

package/dist/native-ui.css

@@ -3791,7 +3791,7 @@
     line-height: 1;
     min-height: var(--ui-kbd-size-md);
     padding-inline: 0.4em;
-    border-radius: 0.25rem;
+    border-radius: 0.5em;
     background: var(--_ground, var(--_body));
     border: 1px solid var(--_border-muted);
     color: var(--_ink-muted);
@@ -4108,6 +4108,18 @@
     user-select: none;
   }
 
+  /* WHY: Fixed-size icon well — matches ui-layout-sidebar-item [slot="icon"].
+     All sidebar icons align on the same 1.5rem column regardless of icon size.
+     JS wraps the first <ui-icon> child in a .icon-well span during setup(). */
+  :where(ui-nav-group-header) > :where(.icon-well) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    flex-shrink: 0;
+  }
+
   /* ── Chevron icon (right side of summary) ── */
 
   :where(ui-nav-group) > :where(details) > :where(summary)::after {
@@ -4163,13 +4175,14 @@
 
   /* WHY: Insets account for the summary's padding-inline so the connector
      line passes through the icon center and child text aligns with header text. */
-  :where(ui-nav-group):has(:where(ui-nav-group-header) :where(ui-icon)) {
+  :where(ui-nav-group):has(:where(ui-nav-group-header) :where(.icon-well)) {
     --_group-pad: calc(var(--_space-k) * var(--_space));
-    --_group-line-inset: calc(var(--_group-pad) + var(--_icon-size) / 2);
-    --_group-child-inset: calc(var(--_icon-size) + var(--_space) * 2);
+    --_group-icon-well: 1.5rem;
+    --_group-line-inset: calc(var(--_group-pad) + var(--_group-icon-well) / 2);
+    --_group-child-inset: calc(var(--_group-icon-well) + var(--_space) * 2);
   }
 
-  :where(ui-nav-group):has(:where(ui-nav-group-header) :where(ui-icon)):has(:where(details[open]))::after {
+  :where(ui-nav-group):has(:where(ui-nav-group-header) :where(.icon-well)):has(:where(details[open]))::after {
     content: '';
     position: absolute;
     inset-inline-start: var(--_group-line-inset);
@@ -4184,7 +4197,7 @@
   /* WHY: A ::before pseudo on the group slides along the connector line.
      JS sets --_indicator-index; :state(has-selection) gates visibility. */
 
-  :where(ui-nav-group):has(:where(ui-nav-group-header) :where(ui-icon)):has(:where(details[open])):state(has-selection)::before {
+  :where(ui-nav-group):has(:where(ui-nav-group-header) :where(.icon-well)):has(:where(details[open])):state(has-selection)::before {
     content: '';
     position: absolute;
     z-index: 1;
@@ -4268,7 +4281,7 @@
       gap: 0;
     }
 
-    :where(ui-nav-group-header) :where(ui-icon) {
+    :where(ui-nav-group-header) :where(.icon-well) :where(ui-icon) {
       font-size: var(--_font-size, 1rem);
     }
 
@@ -6960,6 +6973,20 @@
     outline-offset: -2px;
   }
 
+  /* WHY: Fixed-size icon well so all sidebar icons (header logo, nav group icons,
+     standalone icons) center-align on the same column width regardless of intrinsic
+     icon size. 1.5rem matches the sidebar's visual rhythm at default density.
+     Consumer wraps the icon: <span slot="icon"><ui-icon name="..."></ui-icon></span>
+     The wrapper is the well; the icon keeps its own --ui-icon-size dimensions. */
+  :where(ui-layout-sidebar-item) > :where([slot="icon"]) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    flex-shrink: 0;
+  }
+
   /* WHY: Trailing caret pushes to end — same pattern as button justify="spread". */
   :where(ui-layout-sidebar-item) > :where([slot="trailing"]) {
     margin-inline-start: auto;
@@ -7037,7 +7064,7 @@
     }
 
     :where(ui-layout-sidebar-item) > :where([slot="icon"]) {
-      display: block;
+      display: inline-flex;
     }
 
     :where(ui-layout-sidebar-item) > :where(:not([slot="icon"]):not(ui-listbox[popover]):not(.nav-group-flyout)) {

package/dist/native-ui.js

@@ -1,9 +1,9 @@
 import { n as e, t } from "./uid.js";
 import { i as n, n as ee, r as te, t as ne } from "./define.js";
-import { A as re, B as ie, C as r, D as i, E as a, F as o, G as s, H as c, I as l, L as u, M as d, N as f, O as p, P as m, R as h, S as g, T as _, U as v, V as y, W as b, _ as x, a as S, b as C, c as w, d as T, f as E, g as D, h as O, i as k, j as A, k as j, l as M, m as N, n as P, o as F, p as I, r as L, s as R, t as z, u as B, v as V, w as H, x as U, y as W, z as G } from "./register-all2.js";
-import { a as K, i as q, n as J, r as Y, s as ae, t as X } from "./ui-element.js";
-import { $ as oe, A as se, B as ce, C as le, Ct as ue, D as de, E as fe, F as pe, G as me, H as he, I as ge, J as _e, K as ve, L as ye, M as be, N as xe, O as Se, P as Ce, Q as we, R as Te, S as Ee, St as De, T as Oe, Tt as ke, U as Ae, V as je, W as Me, X as Z, Y as Ne, Z as Pe, _ as Fe, _t as Ie, a as Le, at as Re, b as ze, bt as Be, c as Ve, ct as He, d as Ue, dt as We, et as Ge, f as Ke, ft as qe, g as Je, gt as Ye, h as Xe, ht as Ze, i as Qe, it as $e, j as et, k as tt, l as nt, lt as rt, m as it, mt as at, n as ot, nt as st, o as ct, ot as lt, p as ut, pt as dt, q as ft, r as pt, rt as mt, s as ht, st as gt, t as _t, tt as vt, u as yt, ut as bt, v as xt, vt as St, w as Ct, wt, x as Tt, xt as Et, y as Dt, yt as Ot, z as kt } from "./ui-icon-element.js";
-import { a as At, c as jt, d as Mt, f as Nt, i as Pt, l as Ft, n as It, o as Lt, r as Rt, s as Q, t as zt, u as Bt } from "./dialog-controller.js";
+import { A as r, B as i, C as a, D as o, E as s, F as c, G as l, H as u, I as d, L as f, M as p, N as m, O as h, P as g, R as _, S as v, T as y, U as b, V as x, W as S, _ as C, a as w, b as T, c as E, d as D, f as O, g as k, h as A, i as j, j as M, k as N, l as P, m as F, n as I, o as L, p as R, r as z, s as B, t as V, u as H, v as U, w as W, x as G, y as K, z as q } from "./register-all2.js";
+import { a as J, i as Y, n as X, r as Z, s as re, t as ie } from "./ui-element.js";
+import { $ as ae, A as oe, B as se, C as ce, Ct as le, D as ue, Dt as de, E as fe, Et as pe, F as me, G as he, H as ge, I as _e, J as ve, K as ye, L as be, M as xe, N as Se, O as Ce, P as we, Q as Te, R as Ee, S as De, St as Oe, T as ke, Tt as Ae, U as je, V as Q, W as Me, X as Ne, Y as Pe, Z as Fe, _ as Ie, _t as Le, a as Re, at as ze, b as Be, bt as Ve, c as He, ct as Ue, d as We, dt as Ge, et as Ke, f as qe, ft as Je, g as Ye, gt as Xe, h as Ze, ht as Qe, i as $e, it as et, j as tt, k as nt, l as rt, lt as it, m as at, mt as ot, n as st, nt as ct, o as lt, ot as ut, p as dt, pt as ft, q as pt, r as mt, rt as ht, s as gt, st as _t, t as vt, tt as yt, u as bt, ut as xt, v as St, vt as Ct, w as wt, wt as Tt, x as Et, xt as Dt, y as Ot, yt as kt, z as At } from "./ui-icon-element.js";
+import { a as jt, c as Mt, d as Nt, f as Pt, i as Ft, l as It, n as Lt, o as Rt, r as zt, s as Bt, t as Vt, u as Ht } from "./dialog-controller.js";
 var $ = class extends Event {
 	context;
 	callback;
@@ -14,7 +14,7 @@ var $ = class extends Event {
 		}), this.context = e, this.callback = t;
 	}
 };
-function Vt(e) {
+function Ut(e) {
 	return class extends e {
 		#e = /* @__PURE__ */ new Map();
 		provideContext(e, t) {
@@ -33,7 +33,7 @@ function Vt(e) {
 		};
 	};
 }
-function Ht(e) {
+function Wt(e) {
 	return class extends e {
 		#e = /* @__PURE__ */ new Map();
 		requestContext(e, t) {
@@ -46,29 +46,4 @@ function Ht(e) {
 		}
 	};
 }
-/** Keyboard shortcut indicator. Pure display — no behavior. */
-var Ut = class extends X {}, Wt = class extends X {
-	#e = null;
-	get open() {
-		return this.hasAttribute("open");
-	}
-	set open(e) {
-		this.toggleAttribute("open", e);
-	}
-	toggle() {
-		this.open = !this.open;
-	}
-	setup() {
-		super.setup(), this.querySelector(".layout-resize-handle") && (this.#e = new Q(this, {
-			handleSelector: ".layout-resize-handle",
-			axis: "horizontal",
-			min: 280,
-			max: 480,
-			reverse: !0
-		}));
-	}
-	teardown() {
-		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, 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 };
+export { be as CalendarStore, c as ClipboardController, o as CollapsibleController, he as ColumnResizeController, Wt as ContextConsumer, Ut as ContextProvider, $ as ContextRequestEvent, m as CopyController, Oe as DataListController, Vt as DialogController, Ft as DismissController, It as DismissStack, Mt as DragController, M as DropZoneController, d as EditController, h as FocusTrapController, Tt as FormAssociable, Pt as GestureRouter, g as HoverController, p as IntersectController, Lt as ListNavigateController, zt as PopoverController, Rt as PressController, x as RangeSelectController, Bt as ResizeController, jt as RovingFocusController, _ as SearchController, me as SelectController, q as SelectionController, r as SortController, f as SwipeController, ye as TableStore, s as ToastController, Ht as ToastManager, Ke as UIAccordion, ae as UIAccordionItem, Ce as UIAvatar, ue as UIBadge, ke as UIBreadcrumb, wt as UIBreadcrumbItem, kt as UIButton, _e as UICalendar, We as UICard, qe as UIChatInput, _t as UICheckbox, Se as UICombobox, ft as UICommand, Ue as UICommandEmpty, it as UICommandGroup, Je as UICommandInput, xt as UICommandItem, Ge as UICommandList, dt as UIController, Te as UIDialog, De as UIDrawer, ie as UIElement, xe as UIField, vt as UIIcon, Ct as UIInput, nt as UIInputOtp, fe as UIKbd, lt as UILayoutChat, Re as UILayoutInspector, He as UILayoutSidebar, gt as UILayoutSidebarItem, Le as UIListbox, Ie as UINav, Ze as UINavGroup, at as UINavGroupHeader, Ye as UINavItem, Xe as UIOption, ot as UIOptionGroup, Qe as UIOptionGroupHeader, ce as UIPagination, ze as UIRadio, et as UIRadioGroup, oe as UIRange, bt as UISection, ct as UISegment, ht as UISegmentedControl, we as UISelect, St as UISlide, Ot as UISlideshow, ut as UISwitch, Ne as UITab, Pe as UITabPanel, ve as UITabPanels, Me as UITable, ge as UITableBody, se as UITableCell, je as UITableHead, At as UITableHeader, Q as UITableRow, Fe as UITabs, tt as UITextarea, rt as UIToolbar, yt as UITooltip, Et as UITree, Be as UITreeItem, N as ValidateController, i as VirtualScrollController, ee as batch, j as clippableAdapter, C as collapsibleAdapter, X as collectTraitOptions, te as computed, a as copyableAdapter, Ee as createCalendarStore, le as createDataList, de as createDisabledEffect, pt as createTableStore, u as debugReactive, ne as define, D as dialogableAdapter, A as dismissableAdapter, H as draggableAdapter, G as droppableAdapter, I as editableAdapter, e as effect, Ve as fetchDataOptions, U as focusTrappableAdapter, st as getIcon, Y as getRegisteredTraitNames, J as getTrait, Nt as getTraitRuntime, W as hoverableAdapter, v as intersectableAdapter, b as isComputed, S as isSignal, O as listNavigableAdapter, mt as onIconRegistered, Dt as parseDataOptions, Z as parseTraitAttribute, R as popoverableAdapter, y as pressableAdapter, Ae as prop, P as rangeSelectableAdapter, V as registerAllTraits, $e as registerIcon, re as registerTrait, E as resizableAdapter, k as rovingFocusableAdapter, w as searchableAdapter, L as selectableAdapter, n as signal, T as sortableAdapter, z as swipeableAdapter, pe as syncProp, F as toastableAdapter, t as uid, l as untrack, K as validatableAdapter, B 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-item", K), e("ui-layout-chat", w), e("ui-icon", ee);
+import { $ as t, A as n, B as r, C as i, D as a, E as o, H as s, I as c, J as l, M as u, N as d, O as f, P as p, Q as m, S as h, T as g, U as _, V as v, W as y, X as b, Y as x, Z as S, _ as C, _t as w, a as T, at as E, b as D, c as O, ct as k, d as A, dt as j, et as M, f as N, ft as P, g as F, gt as I, h as L, ht as R, it as z, j as B, k as V, l as H, lt as U, m as W, mt as G, nt as K, o as q, ot as J, p as Y, pt 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, vt as ae, w as oe, x as se, y as ce, yt as le, z as ue } from "./ui-icon-element.js";
+e("ui-button", le), e("ui-input", ae), e("ui-listbox", w), e("ui-option", I), e("ui-option-group", G), e("ui-option-group-header", R), e("ui-select", p), e("ui-combobox", d), e("ui-command", X), e("ui-command-input", P), e("ui-command-list", j), e("ui-command-group", U), e("ui-command-item", re), e("ui-command-empty", k), e("ui-checkbox", $), e("ui-switch", J), e("ui-radio", E), e("ui-radio-group", z), e("ui-segmented-control", Z), e("ui-segment", K), e("ui-tooltip", te), e("ui-accordion", M), e("ui-accordion-item", t), e("ui-dialog", m), e("ui-tabs", S), e("ui-tab", b), e("ui-tab-panel", x), e("ui-tab-panels", l), e("ui-table", y), e("ui-table-head", _), e("ui-table-body", s), e("ui-table-row", v), e("ui-table-header", ue), e("ui-table-cell", r), e("ui-calendar", c), e("ui-field", u), e("ui-textarea", B), e("ui-range", n), e("ui-input-otp", V), e("ui-avatar", f), e("ui-badge", a), e("ui-kbd", o), e("ui-breadcrumb", g), e("ui-breadcrumb-item", oe), e("ui-pagination", i), e("ui-drawer", h), e("ui-tree", se), e("ui-tree-item", D), e("ui-slideshow", ce), e("ui-slide", ie), e("ui-nav", C), e("ui-nav-group", L), e("ui-nav-group-header", W), e("ui-nav-item", F), e("ui-chat-input", N), e("ui-controller", Y), e("ui-card", A), e("ui-section", ne), e("ui-toolbar", H), e("ui-layout-sidebar", O), e("ui-layout-sidebar-item", Q), e("ui-layout-chat", q), e("ui-layout-inspector", T), e("ui-icon", ee);

package/dist/ui-icon-element.js

@@ -3387,7 +3387,7 @@ var ve = class extends y(c) {
 		let n = parseInt(this.#t, 10);
 		isNaN(n) || (n > t ? this.textContent = `${t}+` : this.textContent = this.#t);
 	}
-}, De = class extends c {
+}, De = class extends c {}, Oe = class extends c {
 	#e;
 	constructor() {
 		super(), this.#e = this.attachInternals(), this.#e.role = "navigation";
@@ -3397,7 +3397,7 @@ var ve = class extends y(c) {
 		let e = this.getAttribute("aria-label") ?? "Breadcrumb";
 		this.#e.ariaLabel = e, this.hasAttribute("aria-label") || this.setAttribute("aria-label", e);
 	}
-}, Oe = class extends c {
+}, ke = class extends c {
 	static observedAttributes = ["href", "current"];
 	#e;
 	constructor() {
@@ -3423,7 +3423,7 @@ var ve = class extends y(c) {
 	#r = (e) => {
 		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.#n());
 	};
-}, ke = class extends c {
+}, Ae = class extends c {
 	static observedAttributes = [
 		"total",
 		"value",
@@ -3546,7 +3546,7 @@ var ve = class extends y(c) {
 			detail: { value: t }
 		})));
 	}
-}, Ae = class extends c {
+}, je = class extends c {
 	static observedAttributes = [
 		"side",
 		"no-close-on-escape",
@@ -3568,7 +3568,7 @@ var ve = class extends y(c) {
 	teardown() {
 		this.#e.destroy(), super.teardown();
 	}
-}, je = class extends c {
+}, Me = class extends c {
 	static observedAttributes = ["disabled"];
 	#e;
 	#t = t(!1);
@@ -3596,7 +3596,7 @@ var ve = class extends y(c) {
 	teardown() {
 		this.#n.destroy(), super.teardown();
 	}
-}, Me = class extends c {
+}, Ne = class extends c {
 	static observedAttributes = [
 		"expanded",
 		"selected",
@@ -3678,7 +3678,7 @@ var ve = class extends y(c) {
 				break;
 		}
 	};
-}, Ne = class extends c {
+}, Pe = class extends c {
 	static observedAttributes = [
 		"direction",
 		"controls",
@@ -3891,11 +3891,11 @@ var ve = class extends y(c) {
 				break;
 		}
 	};
-}, Pe = class extends c {
+}, Fe = class extends c {
 	setup() {
 		super.setup(), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "-1");
 	}
-}, Fe = class extends c {
+}, Ie = class extends c {
 	static observedAttributes = ["value", "disabled"];
 	#e;
 	#t;
@@ -3946,7 +3946,7 @@ var ve = class extends y(c) {
 	teardown() {
 		this.#n.destroy(), super.teardown();
 	}
-}, Ie = class extends c {
+}, Le = class extends c {
 	static observedAttributes = [
 		"value",
 		"disabled",
@@ -4010,7 +4010,7 @@ var ve = class extends y(c) {
 			}
 		}));
 	};
-}, Le = class extends c {
+}, Re = class extends c {
 	static observedAttributes = ["open"];
 	#e = t(!0);
 	#t = null;
@@ -4097,7 +4097,7 @@ var ve = class extends y(c) {
 	#d = (e) => {
 		e.stopPropagation();
 	};
-}, Re = class extends c {
+}, ze = class extends c {
 	constructor() {
 		super();
 		let e = this.attachInternals();
@@ -4107,8 +4107,13 @@ 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 {
+}, Be = class extends c {
 	static observedAttributes = [
 		"traits",
 		"for",
@@ -4213,7 +4218,7 @@ var ve = class extends y(c) {
 			}
 		}), this.#n.observe(this, { attributes: !0 });
 	}
-}, ze = class extends c {
+}, Ve = class extends c {
 	static observedAttributes = [
 		"disabled",
 		"no-enter-submit",
@@ -4293,7 +4298,7 @@ var ve = class extends y(c) {
 			detail: { value: e }
 		})) && !this.hasAttribute("no-auto-clear") && (this.value = "", this.#r?.setAttribute("disabled", ""));
 	}
-}, Be = class extends c {
+}, He = class extends c {
 	static observedAttributes = ["interactive", "href"];
 	setup() {
 		super.setup(), this.hasAttribute("interactive") && (this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.addEventListener("click", this.#e), this.addEventListener("keydown", this.#t));
@@ -4308,7 +4313,7 @@ var ve = class extends y(c) {
 	#t = (e) => {
 		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.#e());
 	};
-}, Ve = class extends c {
+}, Ue = class extends c {
 	static observedAttributes = [
 		"collapsible",
 		"collapsed",
@@ -4327,7 +4332,7 @@ var ve = class extends y(c) {
 	#e = () => {
 		this.hasAttribute("collapsible") && this.toggleAttribute("collapsed");
 	};
-}, He = class extends c {
+}, We = class extends c {
 	#e;
 	#t;
 	constructor() {
@@ -4342,7 +4347,7 @@ var ve = class extends y(c) {
 	teardown() {
 		this.#t.destroy(), super.teardown();
 	}
-}, Ue = class extends c {
+}, Ge = class extends c {
 	static observedAttributes = ["collapsed"];
 	#e = null;
 	#t = null;
@@ -4410,7 +4415,7 @@ var ve = class extends y(c) {
 			for (let e of a) this.#t.observe(e);
 		}
 	}
-}, We = class extends c {
+}, Y = class extends c {
 	#e = null;
 	#t = !1;
 	setup() {
@@ -4427,7 +4432,30 @@ var ve = class extends y(c) {
 	#r = () => {
 		this.#t = !1, this.#e?.syncPopover(!1);
 	};
-}, Ge = class extends c {
+}, Ke = class extends c {
+	#e = null;
+	get open() {
+		return this.hasAttribute("open");
+	}
+	set open(e) {
+		this.toggleAttribute("open", e);
+	}
+	toggle() {
+		this.open = !this.open;
+	}
+	setup() {
+		super.setup(), this.querySelector(".layout-resize-handle") && (this.#e = new m(this, {
+			handleSelector: ".layout-resize-handle",
+			axis: "horizontal",
+			min: 280,
+			max: 480,
+			reverse: !0
+		}));
+	}
+	teardown() {
+		this.#e?.destroy(), this.#e = null, super.teardown();
+	}
+}, qe = class extends c {
 	#e = null;
 	get open() {
 		return this.hasAttribute("open");
@@ -4451,7 +4479,7 @@ var ve = class extends y(c) {
 		this.#e?.destroy(), this.#e = null, super.teardown();
 	}
 }, X = /* @__PURE__ */ new Map(), Z = /* @__PURE__ */ new Set();
-function Ke(e, t) {
+function Je(e, t) {
 	X.set(e, t), Z.forEach((t) => t(e));
 }
 function Q(e) {
@@ -4466,7 +4494,7 @@ function $(e) {
 * @attr {string} size - Icon size override
 * @attr {string} aria-label - Accessible label (sets role="img" when present)
 */
-var qe = class extends c {
+var Ye = class extends c {
 	static observedAttributes = [
 		"name",
 		"size",
@@ -4497,4 +4525,4 @@ var qe = class extends c {
 		}));
 	}
 };
-export { N as $, xe as A, fe as B, Oe as C, _ as Ct, we as D, Te as E, q as F, H as G, ue as H, _e as I, R as J, B as K, he as L, ye as M, J as N, Ce as O, ve as P, P as Q, me as R, ke as S, y as St, Ee as T, g as Tt, U, de as V, V as W, I as X, L as Y, F as Z, Pe as _, ee as _t, Ge as a, D as at, je as b, x as bt, He as c, le as ct, ze as d, oe as dt, M as et, Y as f, ae as ft, Fe as g, te as gt, Ie as h, ne as ht, Ke as i, O as it, be as j, Se as k, Ve as l, ce as lt, Le as m, re as mt, Q as n, A as nt, We as o, E as ot, Re as p, ie as pt, z as q, $ as r, k as rt, Ue as s, T as st, qe as t, j as tt, Be as u, se as ut, Ne as v, w as vt, De as w, v as wt, Ae as x, S as xt, Me as y, C as yt, pe as z };
+export { F as $, Ce as A, me as B, Ae as C, S as Ct, Ee as D, g as Dt, De as E, v as Et, J as F, U as G, fe as H, ve as I, B as J, V as K, q as L, xe as M, be as N, Te as O, ye as P, I as Q, _e as R, je as S, x as St, Oe as T, _ as Tt, de as U, pe as V, ue as W, R as X, z as Y, L as Z, Ie as _, ne as _t, qe as a, k as at, Ne as b, w as bt, Ge as c, E as ct, He as d, ce as dt, P as et, Ve as f, se as ft, Le as g, re as gt, Re as h, ie as ht, Je as i, A as it, Se as j, we as k, We as l, T as lt, ze as m, ae as mt, Q as n, M as nt, Ke as o, O as ot, Be as p, oe as pt, H as q, $ as r, j as rt, Y as s, D as st, Ye as t, N as tt, Ue as u, le as ut, Fe as v, te as vt, ke as w, y as wt, Me as x, C as xt, Pe as y, ee as yt, he as z };

package/package.json

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