@nonoun/native-ui 0.2.8 → 0.2.10

package/dist/native-ui.css

@@ -1374,21 +1374,6 @@
 
 
 
-  /* ── Popover Anchor Positioning ──
-     Shared anchor-to-trigger positioning for dropdown popovers.
-     Coordinators (select, combobox) use this for their popover listbox. */
-
-  :where(ui-select) > :where(ui-listbox[popover]),
-  :where(ui-combobox) > :where(ui-listbox[popover]) {
-    position: fixed;
-    position-area: block-end span-inline-end;
-    position-try-fallbacks: flip-block;
-    margin: var(--ui-popover-gap) 0 0;
-    min-width: anchor-size(inline);
-    max-height: var(--ui-popover-max-height);
-    overflow-y: auto;
-  }
-
   /* ── Container-Level Disabled ──
      Containers that disable all children use aria-disabled="true".
      Disabled colors propagate via inheritance — children inherit the muted text.
@@ -1510,6 +1495,7 @@
     /* Popover (select / combobox / command) */
     --ui-popover-max-height: calc(100dvh - 2rem);
     --ui-popover-gap: 0.25rem;
+    --ui-popover-viewport-margin: 0.5rem;
 
     /* Drawer */
     --ui-drawer-width: 24rem;
@@ -3236,6 +3222,23 @@
     cursor: text;
   }
 
+  /* ── Popover Listbox Positioning ──
+     WHY: Must come after ui-listbox.css base rule (which sets min-width: 0
+     for flex-child shrinking) so min-width: anchor-size(inline) wins by
+     source order — both are zero-specificity via :where(). */
+
+  :where(ui-combobox) > :where(ui-listbox[popover]) {
+    position: fixed;
+    position-area: block-end span-inline-end;
+    position-try-fallbacks: flip-block;
+    margin-block: var(--ui-popover-viewport-margin);
+    margin-inline: 0;
+    margin-block-start: var(--ui-popover-gap);
+    min-width: anchor-size(inline);
+    max-height: var(--ui-popover-max-height);
+    overflow-y: auto;
+  }
+
 }
 
 @layer ui {
@@ -3902,6 +3905,39 @@
     display: none;
   }
 
+  /* ── Popover Animation ──
+     WHY: Shared entry/exit transition for all popover listboxes.
+     Context CSS overrides --_popover-origin and --_popover-from
+     to match the popover's anchor direction (e.g. sidebar flyouts
+     open to the right → rotateY instead of rotateX). */
+
+  :where(ui-listbox[popover]) {
+    --_popover-origin: top center;
+    --_popover-from: perspective(800px) scale(0.96) rotateX(-20deg);
+
+    transform-origin: var(--_popover-origin);
+    opacity: 0;
+    transform: var(--_popover-from);
+
+    transition:
+      opacity var(--_duration) var(--_easing),
+      transform var(--_duration) var(--_easing),
+      display var(--_duration) var(--_easing) allow-discrete,
+      overlay var(--_duration) var(--_easing) allow-discrete;
+  }
+
+  :where(ui-listbox[popover]):popover-open {
+    opacity: 1;
+    transform: none;
+  }
+
+  @starting-style {
+    :where(ui-listbox[popover]):popover-open {
+      opacity: 0;
+      transform: var(--_popover-from);
+    }
+  }
+
   /* ── Option / Command Item Base ── */
 
   :where(ui-option, ui-command-item, [role="option"]) {
@@ -4290,10 +4326,14 @@
      instead of expanding the <details>. Same pattern as sidebar-trigger menus. */
 
   :where(ui-nav-group) > :where(ui-listbox.nav-group-flyout[popover]) {
+    --_popover-origin: left center;
+    --_popover-from: perspective(800px) scale(0.96) rotateY(20deg);
+
     position: fixed;
     position-area: inline-end span-block-end;
     position-try-fallbacks: --nav-flyout-flip-up;
-    margin: 0;
+    margin-block: var(--ui-popover-viewport-margin);
+    margin-inline: 0;
     margin-inline-start: var(--ui-popover-gap);
     min-width: 200px;
     max-height: var(--ui-popover-max-height);
@@ -4304,6 +4344,10 @@
     position-area: inline-end span-block-start;
   }
 
+  @position-try --nav-flyout-flip-down {
+    position-area: inline-end span-block-end;
+  }
+
   /* ── Container Query: Collapsed Sidebar ── */
   /* WHY: Nav components own their own collapsed behavior via @container.
      The sidebar aside declares container-name: sidebar. When it shrinks
@@ -4347,6 +4391,14 @@
       font-size: var(--_font-size, 1rem);
     }
 
+    /* WHY: In collapsed mode the group is a small icon — centering
+       the flyout vertically with the anchor is more natural than top-aligning.
+       Fallbacks handle viewport clipping (top/bottom edge). */
+    :where(ui-nav-group) > :where(ui-listbox.nav-group-flyout[popover]) {
+      position-area: inline-end;
+      position-try-fallbacks: --nav-flyout-flip-up, --nav-flyout-flip-down;
+    }
+
     /* Collapse inter-group spacing in icon rail. */
     :where(ui-nav-group) + :where(ui-nav-group) {
       margin-block-start: 0;
@@ -4586,6 +4638,8 @@
     min-width: 0;
     align-items: center;
     position: relative;
+    /* WHY: Isolate internal z-index (thumb z-index: 1) from parent stacking context */
+    isolation: isolate;
 
     min-height: var(--_track-height);
 
@@ -4876,6 +4930,23 @@
     display: contents;
   }
 
+  /* ── Popover Listbox Positioning ──
+     WHY: Must come after ui-listbox.css base rule (which sets min-width: 0
+     for flex-child shrinking) so min-width: anchor-size(inline) wins by
+     source order — both are zero-specificity via :where(). */
+
+  :where(ui-select) > :where(ui-listbox[popover]) {
+    position: fixed;
+    position-area: block-end span-inline-end;
+    position-try-fallbacks: flip-block;
+    margin-block: var(--ui-popover-viewport-margin);
+    margin-inline: 0;
+    margin-block-start: var(--ui-popover-gap);
+    min-width: anchor-size(inline);
+    max-height: var(--ui-popover-max-height);
+    overflow-y: auto;
+  }
+
 }
 
 @layer ui {
@@ -6028,7 +6099,7 @@
     /* Default placement: above the anchor */
     position-area: block-start;
     position-try-fallbacks: flip-block, flip-inline;
-    margin: 0;
+    margin: var(--ui-popover-viewport-margin);
 
     max-width: var(--ui-tooltip-max-width);
     padding-block: calc(var(--_space) * 1.5);
@@ -6050,8 +6121,12 @@
     inset: unset;
     overflow: visible;
 
+    --_popover-origin: bottom center;
+    --_popover-from: perspective(800px) scale(0.96) rotateX(10deg);
+
+    transform-origin: var(--_popover-origin);
     opacity: 0;
-    transform: scale(0.96);
+    transform: var(--_popover-from);
     transition:
       opacity var(--_duration) var(--_easing),
       transform var(--_duration) var(--_easing),
@@ -6063,35 +6138,43 @@
 
   :where(ui-tooltip[popover]):popover-open {
     opacity: 1;
-    transform: scale(1);
+    transform: none;
   }
 
   /* Starting style for entry animation */
   @starting-style {
     :where(ui-tooltip[popover]):popover-open {
       opacity: 0;
-      transform: scale(0.96);
+      transform: var(--_popover-from);
     }
   }
 
   /* ── Placement Variants ── */
 
   :where(ui-tooltip[placement="top"]) {
+    --_popover-origin: bottom center;
+    --_popover-from: perspective(800px) scale(0.96) rotateX(10deg);
     position-area: block-start;
     margin-block-end: calc(var(--_space) * 2);
   }
 
   :where(ui-tooltip[placement="bottom"]) {
+    --_popover-origin: top center;
+    --_popover-from: perspective(800px) scale(0.96) rotateX(-10deg);
     position-area: block-end;
     margin-block-start: calc(var(--_space) * 2);
   }
 
   :where(ui-tooltip[placement="left"]) {
+    --_popover-origin: right center;
+    --_popover-from: perspective(800px) scale(0.96) rotateY(-10deg);
     position-area: inline-start;
     margin-inline-end: calc(var(--_space) * 2);
   }
 
   :where(ui-tooltip[placement="right"]) {
+    --_popover-origin: left center;
+    --_popover-from: perspective(800px) scale(0.96) rotateY(10deg);
     position-area: inline-end;
     margin-inline-start: calc(var(--_space) * 2);
   }
@@ -7086,10 +7169,14 @@
      Flip: bottom-aligned, grows upward (span-block-start). */
 
   :where(ui-layout-sidebar-item) > :where(ui-listbox[popover]) {
+    --_popover-origin: left center;
+    --_popover-from: perspective(800px) scale(0.96) rotateY(20deg);
+
     position: fixed;
     position-area: inline-end span-block-end;
     position-try-fallbacks: --sidebar-item-flip-up;
-    margin: 0;
+    margin-block: var(--ui-popover-viewport-margin);
+    margin-inline: 0;
     margin-inline-start: var(--ui-popover-gap);
     min-width: 200px;
     max-height: var(--ui-popover-max-height);
@@ -7100,6 +7187,10 @@
     position-area: inline-end span-block-start;
   }
 
+  @position-try --sidebar-item-flip-down {
+    position-area: inline-end span-block-end;
+  }
+
   /* ── Container Query: Collapsed Sidebar ── */
   /* WHY: Each component owns its own collapsed behavior via @container.
      The aside is the container (container-name: sidebar). When it shrinks
@@ -7140,6 +7231,14 @@
     :where(ui-layout-sidebar-item) > :where(:not([slot="icon"]):not(ui-listbox[popover]):not(.nav-group-flyout)) {
       display: none;
     }
+
+    /* WHY: In collapsed mode the sidebar item is a small icon — centering
+       the popover vertically with the anchor is more natural than top-aligning.
+       Fallbacks handle viewport clipping (top/bottom edge). */
+    :where(ui-layout-sidebar-item) > :where(ui-listbox[popover]) {
+      position-area: inline-end;
+      position-try-fallbacks: --sidebar-item-flip-up, --sidebar-item-flip-down;
+    }
   }
 
 }

package/dist/native-ui.js

@@ -1,49 +1,4 @@
-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 r, c as i, d as a, f as o, i as s, l as c, n as l, o as u, p as d, r as f, s as p, t as m, u as h } from "./dialog-controller.js";
-import { A as g, B as _, C as v, D as y, E as b, F as x, H as S, I as C, L as w, M as T, N as E, O as D, P as O, R as k, S as A, T as j, U as M, V as N, W as P, _ as F, a as I, b as L, c as R, d as z, f as B, g as V, h as H, i as U, j as W, k as G, l as K, m as q, n as J, o as Y, p as X, r as Z, s as re, t as ie, u as ae, v as oe, w as se, x as ce, y as le, z as ue } from "./register-all2.js";
-import { a as de, i as fe, n as pe, r as me, s as he, t as ge } from "./ui-element.js";
-import { $ as _e, A as ve, B as ye, C as be, Ct as xe, D as Se, Dt as Ce, E as we, Et as Te, F as Ee, G as De, H as Oe, I as ke, J as Ae, K as je, L as Q, M as Me, N as Ne, O as Pe, P as Fe, Q as Ie, R as Le, S as Re, St as ze, T as Be, Tt as Ve, U as He, V as Ue, W as We, X as Ge, Y as Ke, Z as qe, _ as Je, _t as Ye, a as Xe, at as Ze, b as Qe, bt as $e, c as et, ct as tt, d as nt, dt as rt, et as it, f as at, ft as ot, g as st, gt as ct, h as lt, ht as ut, i as dt, it as ft, j as pt, k as mt, l as ht, lt as gt, m as _t, mt as vt, n as yt, nt as bt, o as xt, ot as St, p as Ct, pt as wt, q as Tt, r as Et, rt as Dt, s as Ot, st as kt, t as At, tt as jt, u as Mt, ut as Nt, v as Pt, vt as Ft, w as It, wt as Lt, x as Rt, xt as zt, y as Bt, yt as Vt, z as Ht } from "./ui-icon-element.js";
-var $ = class extends Event {
-	context;
-	callback;
-	constructor(e, t) {
-		super("context-request", {
-			bubbles: !0,
-			composed: !0
-		}), this.context = e, this.callback = t;
-	}
-};
-function Ut(e) {
-	return class extends e {
-		#e = /* @__PURE__ */ new Map();
-		provideContext(e, t) {
-			this.#e.set(e, t);
-		}
-		connectedCallback() {
-			super.connectedCallback?.(), this.addEventListener("context-request", this.#t);
-		}
-		disconnectedCallback() {
-			super.disconnectedCallback?.(), this.removeEventListener("context-request", this.#t);
-		}
-		#t = (e) => {
-			if (!(e instanceof $)) return;
-			let t = this.#e.get(e.context);
-			t !== void 0 && (e.stopPropagation(), e.callback(t));
-		};
-	};
-}
-function Wt(e) {
-	return class extends e {
-		#e = /* @__PURE__ */ new Map();
-		requestContext(e, t) {
-			this.dispatchEvent(new $(e, (n) => {
-				this.#e.set(e, n), t?.(n);
-			}));
-		}
-		getContext(e) {
-			return this.#e.get(e) ?? null;
-		}
-	};
-}
-export { Q as CalendarStore, x as ClipboardController, y as CollapsibleController, De as ColumnResizeController, Wt as ContextConsumer, Ut as ContextProvider, $ as ContextRequestEvent, E as CopyController, ze as DataListController, m as DialogController, s as DismissController, c as DismissStack, i as DragController, W as DropZoneController, C as EditController, D as FocusTrapController, Lt as FormAssociable, o as GestureRouter, O as HoverController, T as IntersectController, l as ListNavigateController, f as PopoverController, u as PressController, N as RangeSelectController, p as ResizeController, r as RovingFocusController, k as SearchController, Ee as SelectController, ue as SelectionController, g as SortController, w as SwipeController, je as TableStore, b as ToastController, h as ToastManager, it as UIAccordion, _e as UIAccordionItem, Pe as UIAvatar, Se as UIBadge, Be as UIBreadcrumb, It as UIBreadcrumbItem, Vt as UIButton, ke as UICalendar, nt as UICard, at as UIChatInput, kt as UICheckbox, Ne as UICombobox, wt as UICommand, tt as UICommandEmpty, gt as UICommandGroup, ot as UICommandInput, Nt as UICommandItem, rt as UICommandList, Ct as UIController, Ie as UIDialog, Re as UIDrawer, ge as UIElement, Me as UIField, At as UIIcon, Ft as UIInput, mt as UIInputOtp, we as UIKbd, xt as UILayoutChat, Xe as UILayoutInspector, et as UILayoutSidebar, Ot as UILayoutSidebarItem, Ye as UIListbox, Je as UINav, lt as UINavGroup, _t as UINavGroupHeader, st as UINavItem, ct as UIOption, vt as UIOptionGroup, ut as UIOptionGroupHeader, be as UIPagination, Ze as UIRadio, ft as UIRadioGroup, ve as UIRange, Mt as UISection, bt as UISegment, Dt as UISegmentedControl, Fe as UISelect, Pt as UISlide, Bt as UISlideshow, St as UISwitch, Ge as UITab, Ke as UITabPanel, Ae as UITabPanels, We as UITable, Oe as UITableBody, ye as UITableCell, He as UITableHead, Ht as UITableHeader, Ue as UITableRow, qe as UITabs, pt as UITextarea, ht as UIToolbar, jt as UITooltip, Rt as UITree, Qe as UITreeItem, G as ValidateController, _ as VirtualScrollController, ee as batch, U as clippableAdapter, F as collapsibleAdapter, pe as collectTraitOptions, te as computed, v as copyableAdapter, Le as createCalendarStore, xe as createDataList, Ce as createDisabledEffect, Tt as createTableStore, S as debugReactive, ne as define, z as dialogableAdapter, H as dismissableAdapter, ae as draggableAdapter, ce as droppableAdapter, J as editableAdapter, e as effect, $e as fetchDataOptions, oe as focusTrappableAdapter, yt as getIcon, fe as getRegisteredTraitNames, de as getTrait, a as getTraitRuntime, se as hoverableAdapter, A as intersectableAdapter, M as isComputed, P as isSignal, B as listNavigableAdapter, Et as onIconRegistered, zt as parseDataOptions, me as parseTraitAttribute, X as popoverableAdapter, j as pressableAdapter, Ve as prop, K as rangeSelectableAdapter, ie as registerAllTraits, dt as registerIcon, he as registerTrait, R as resizableAdapter, V as rovingFocusableAdapter, I as searchableAdapter, Y as selectableAdapter, n as signal, L as sortableAdapter, Z as swipeableAdapter, Te as syncProp, q as toastableAdapter, t as uid, d as untrack, le as validatableAdapter, re as virtualizableAdapter };
+import { $ as e, A as t, At as n, B as r, Bt as i, C as a, Ct as o, D as s, Dt as c, E as l, Et as u, F as d, Ft as f, G as p, Gt as m, H as h, Ht as g, I as _, It as v, J as y, K as b, Kt as x, L as S, Lt as C, M as w, Mt as T, N as E, Nt as D, O, Ot as k, P as A, Pt as j, Q as M, R as N, Rt as P, S as F, St as I, T as L, Tt as R, U as z, Ut as B, V, Vt as H, W as U, Wt as W, X as G, Y as K, Z as q, _ as J, _t as Y, a as X, at as Z, b as Q, bt as $, c as ee, ct as te, d as ne, dt as re, et as ie, f as ae, ft as oe, g as se, gt as ce, h as le, ht as ue, i as de, it as fe, j as pe, jt as me, k as he, kt as ge, l as _e, lt as ve, m as ye, mt as be, n as xe, nt as Se, o as Ce, ot as we, p as Te, pt as Ee, q as De, qt as Oe, r as ke, rt as Ae, s as je, st as Me, t as Ne, tt as Pe, u as Fe, ut as Ie, v as Le, vt as Re, w as ze, wt as Be, x as Ve, xt as He, y as Ue, yt as We, z as Ge, zt as Ke } from "./components.js";
+import { A as qe, B as Je, C as Ye, D as Xe, E as Ze, F as Qe, G as $e, H as et, I as tt, J as nt, K as rt, L as it, M as at, N as ot, O as st, P as ct, R as lt, S as ut, T as dt, U as ft, V as pt, W as mt, _ as ht, a as gt, b as _t, c as vt, d as yt, f as bt, g as xt, h as St, i as Ct, j as wt, k as Tt, l as Et, m as Dt, n as Ot, o as kt, p as At, q as jt, r as Mt, s as Nt, t as Pt, u as Ft, v as It, w as Lt, x as Rt, y as zt, z as Bt } from "./core.js";
+import { i as Vt, n as Ht, r as Ut, t as Wt } from "./ui-icon.js";
+export { E as CalendarStore, Qe as ClipboardController, Xe as CollapsibleController, V as ColumnResizeController, et as ContextConsumer, ft as ContextProvider, mt as ContextRequestEvent, ot as CopyController, u as DataListController, ce as DialogController, We as DismissController, k as DismissStack, o as DragController, wt as DropZoneController, tt as EditController, st as FocusTrapController, T as FormAssociable, me as GestureRouter, ct as HoverController, at as IntersectController, Y as ListNavigateController, Re as PopoverController, He as PressController, pt as RangeSelectController, I as ResizeController, $ as RovingFocusController, lt as SearchController, pe as SelectController, Bt as SelectionController, qe as SortController, it as SwipeController, h as TableStore, Ze as ToastController, ge as ToastManager, G as UIAccordion, K as UIAccordionItem, ze as UIAvatar, a as UIBadge, Ve as UIBreadcrumb, Q as UIBreadcrumbItem, ue as UIButton, w as UICalendar, je as UICard, ee as UIChatInput, Ae as UICheckbox, he as UICombobox, ve as UICommand, fe as UICommandEmpty, Z as UICommandGroup, te as UICommandInput, we as UICommandItem, Me as UICommandList, _e as UIController, y as UIDialog, Le as UIDrawer, C as UIElement, O as UIField, Wt as UIIcon, be as UIInput, L as UIInputOtp, F as UIKbd, xe as UILayoutChat, Ne as UILayoutInspector, de as UILayoutSidebar, ke as UILayoutSidebarItem, Ee as UIListbox, Te as UINav, ne as UINavGroup, Fe as UINavGroupHeader, ae as UINavItem, oe as UIOption, Ie as UIOptionGroup, re as UIOptionGroupHeader, Ue as UIPagination, Pe as UIRadio, ie as UIRadioGroup, l as UIRange, Ce as UISection, M as UISegment, e as UISegmentedControl, t as UISelect, ye as UISlide, le as UISlideshow, Se as UISwitch, b as UITab, p as UITabPanel, U as UITabPanels, r as UITable, N as UITableBody, _ as UITableCell, Ge as UITableHead, d as UITableHeader, S as UITableRow, De as UITabs, s as UITextarea, X as UIToolbar, q as UITooltip, J as UITree, se as UITreeItem, Tt as ValidateController, Je as VirtualScrollController, W as batch, Ct as clippableAdapter, ht as collapsibleAdapter, P as collectTraitOptions, x as computed, Ye as copyableAdapter, A as createCalendarStore, c as createDataList, f as createDisabledEffect, z as createTableStore, rt as debugReactive, $e as define, yt as dialogableAdapter, St as dismissableAdapter, Ft as draggableAdapter, Rt as droppableAdapter, Ot as editableAdapter, m as effect, Be as fetchDataOptions, It as focusTrappableAdapter, Ht as getIcon, i as getRegisteredTraitNames, H as getTrait, n as getTraitRuntime, Lt as hoverableAdapter, ut as intersectableAdapter, jt as isComputed, nt as isSignal, bt as listNavigableAdapter, Ut as onIconRegistered, R as parseDataOptions, Ke as parseTraitAttribute, At as popoverableAdapter, dt as pressableAdapter, D as prop, Et as rangeSelectableAdapter, Pt as registerAllTraits, Vt as registerIcon, g as registerTrait, vt as resizableAdapter, xt as rovingFocusableAdapter, gt as searchableAdapter, kt as selectableAdapter, Oe as signal, _t as sortableAdapter, Mt as swipeableAdapter, j as syncProp, Dt as toastableAdapter, v as uid, B as untrack, zt as validatableAdapter, Nt as virtualizableAdapter };

package/dist/register-all.js

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

package/dist/traits/adapters/draggable-adapter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"draggable-adapter.d.ts","sourceRoot":"","sources":["../../../src/traits/adapters/draggable-adapter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,eAAO,MAAM,gBAAgB,EAAE,YAAY,CAAC,cAAc,CAmBzD,CAAC"}
+{"version":3,"file":"draggable-adapter.d.ts","sourceRoot":"","sources":["../../../src/traits/adapters/draggable-adapter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,eAAO,MAAM,gBAAgB,EAAE,YAAY,CAAC,cAAc,CAqBzD,CAAC"}

package/dist/traits/drag-controller.d.ts

@@ -4,6 +4,8 @@ export interface DragOptions {
     axis?: 'vertical' | 'horizontal' | 'both';
     mode?: 'drop' | 'slot' | 'preview';
     disabled?: boolean;
+    /** Enable view-transition animation for preview mode grid reordering (default: true). */
+    animate?: boolean;
 }
 /** Enables pointer-driven drag-and-drop with drop, slot, or preview reordering. */
 export declare class DragController {
@@ -14,6 +16,7 @@ export declare class DragController {
     axis: 'vertical' | 'horizontal' | 'both';
     mode: 'drop' | 'slot' | 'preview';
     disabled: boolean;
+    animate: boolean;
     constructor(host: HTMLElement, options: DragOptions);
     attach(): void;
     detach(): void;

package/dist/traits/drag-controller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drag-controller.d.ts","sourceRoot":"","sources":["../../src/traits/drag-controller.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IAC1C,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,mFAAmF;AACnF,qBAAa,cAAc;;IACzB,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,MAAM,CAAC;IACzB,IAAI,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IACzC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAClC,QAAQ,EAAE,OAAO,CAAC;gBAkBN,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW;IAUnD,MAAM,IAAI,IAAI;IAQd,MAAM,IAAI,IAAI;IASd,OAAO,IAAI,IAAI;CAkgBhB"}
+{"version":3,"file":"drag-controller.d.ts","sourceRoot":"","sources":["../../src/traits/drag-controller.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IAC1C,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yFAAyF;IACzF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,mFAAmF;AACnF,qBAAa,cAAc;;IACzB,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,MAAM,CAAC;IACzB,IAAI,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IACzC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAClC,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;gBAkBL,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW;IAWnD,MAAM,IAAI,IAAI;IAQd,MAAM,IAAI,IAAI;IASd,OAAO,IAAI,IAAI;CAkiBhB"}

package/dist/traits.js

@@ -1,6 +1,3 @@
-import { n as e, t } from "./uid.js";
-import { i as n, n as r, r as i, t as a } from "./define.js";
-import { a as o, c as s, d as c, i as l, l as u, n as d, o as f, p, r as m, s as h, t as g, u as _ } from "./dialog-controller.js";
-import { A as v, B as y, C as b, D as x, E as S, F as C, H as w, I as T, L as E, M as D, N as O, O as k, P as A, R as j, S as M, T as N, U as P, V as F, W as I, _ as L, a as R, b as z, c as B, d as V, f as H, g as U, h as W, i as G, j as K, k as q, l as J, m as Y, n as X, o as Z, p as Q, r as $, s as ee, t as te, u as ne, v as re, w as ie, x as ae, y as oe, z as se } from "./register-all2.js";
-import { a as ce, i as le, n as ue, r as de, s as fe, t as pe } from "./ui-element.js";
-export { C as ClipboardController, x as CollapsibleController, O as CopyController, g as DialogController, l as DismissController, u as DismissStack, s as DragController, K as DropZoneController, T as EditController, k as FocusTrapController, A as HoverController, D as IntersectController, d as ListNavigateController, m as PopoverController, f as PressController, F as RangeSelectController, h as ResizeController, o as RovingFocusController, j as SearchController, se as SelectionController, v as SortController, E as SwipeController, S as ToastController, _ as ToastManager, pe as UIElement, q as ValidateController, y as VirtualScrollController, r as batch, G as clippableAdapter, L as collapsibleAdapter, ue as collectTraitOptions, i as computed, b as copyableAdapter, w as debugReactive, a as define, V as dialogableAdapter, W as dismissableAdapter, ne as draggableAdapter, ae as droppableAdapter, X as editableAdapter, e as effect, re as focusTrappableAdapter, le as getRegisteredTraitNames, ce as getTrait, c as getTraitRuntime, ie as hoverableAdapter, M as intersectableAdapter, P as isComputed, I as isSignal, H as listNavigableAdapter, de as parseTraitAttribute, Q as popoverableAdapter, N as pressableAdapter, J as rangeSelectableAdapter, te as registerAllTraits, fe as registerTrait, B as resizableAdapter, U as rovingFocusableAdapter, R as searchableAdapter, Z as selectableAdapter, n as signal, z as sortableAdapter, $ as swipeableAdapter, Y as toastableAdapter, t as uid, p as untrack, oe as validatableAdapter, ee as virtualizableAdapter };
+import { At as e, Bt as t, Ct as n, Gt as r, Ht as i, It as a, Kt as o, Lt as s, Ot as c, Rt as l, St as u, Ut as d, Vt as f, Wt as p, _t as m, bt as h, gt as g, kt as _, qt as v, vt as y, xt as b, yt as x, zt as S } from "./components.js";
+import { A as C, B as w, C as T, D as E, E as D, F as O, G as k, I as A, J as j, K as M, L as N, M as P, N as F, O as I, P as L, R, S as z, T as B, V, _ as H, a as U, b as W, c as G, d as K, f as q, g as J, h as Y, i as X, j as Z, k as Q, l as $, m as ee, n as te, o as ne, p as re, q as ie, r as ae, s as oe, t as se, u as ce, v as le, w as ue, x as de, y as fe, z as pe } from "./core.js";
+export { O as ClipboardController, E as CollapsibleController, F as CopyController, g as DialogController, x as DismissController, c as DismissStack, n as DragController, Z as DropZoneController, A as EditController, I as FocusTrapController, L as HoverController, P as IntersectController, m as ListNavigateController, y as PopoverController, b as PressController, V as RangeSelectController, u as ResizeController, h as RovingFocusController, R as SearchController, pe as SelectionController, C as SortController, N as SwipeController, D as ToastController, _ as ToastManager, s as UIElement, Q as ValidateController, w as VirtualScrollController, p as batch, X as clippableAdapter, H as collapsibleAdapter, l as collectTraitOptions, o as computed, T as copyableAdapter, M as debugReactive, k as define, K as dialogableAdapter, Y as dismissableAdapter, ce as draggableAdapter, de as droppableAdapter, te as editableAdapter, r as effect, le as focusTrappableAdapter, t as getRegisteredTraitNames, f as getTrait, e as getTraitRuntime, ue as hoverableAdapter, z as intersectableAdapter, ie as isComputed, j as isSignal, q as listNavigableAdapter, S as parseTraitAttribute, re as popoverableAdapter, B as pressableAdapter, $ as rangeSelectableAdapter, se as registerAllTraits, i as registerTrait, G as resizableAdapter, J as rovingFocusableAdapter, U as searchableAdapter, ne as selectableAdapter, v as signal, W as sortableAdapter, ae as swipeableAdapter, ee as toastableAdapter, a as uid, d as untrack, fe as validatableAdapter, oe as virtualizableAdapter };

package/dist/ui-icon.js

@@ -0,0 +1,56 @@
+import { Lt as e } from "./components.js";
+var t = /* @__PURE__ */ new Map(), n = /* @__PURE__ */ new Set();
+function r(e, r) {
+	t.set(e, r), n.forEach((t) => t(e));
+}
+function i(e) {
+	return t.get(e);
+}
+function a(e) {
+	return n.add(e), () => n.delete(e);
+}
+/**
+* Icon component rendering SVG from the global icon registry.
+* @attr {string} name - Icon name from the Phosphor icon set
+* @attr {string} weight - Icon weight: "regular" (default) or "fill"
+* @attr {string} size - Icon size override
+* @attr {string} aria-label - Accessible label (sets role="img" when present)
+*/
+var o = class extends e {
+	static observedAttributes = [
+		"name",
+		"weight",
+		"size",
+		"aria-label"
+	];
+	#e = null;
+	setup() {
+		super.setup(), this.#t(), this.#r();
+	}
+	attributeChangedCallback(e, t, n) {
+		super.attributeChangedCallback(e, t, n), (e === "name" || e === "weight") && this.#r(), e === "aria-label" && this.#t();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.#e?.(), this.#e = null;
+	}
+	#t() {
+		this.hasAttribute("aria-label") ? (this.setAttribute("role", "img"), this.removeAttribute("aria-hidden")) : (this.setAttribute("aria-hidden", "true"), this.removeAttribute("role"));
+	}
+	/** Compute the effective registry key from name + weight attributes. */
+	#n() {
+		let e = this.getAttribute("name");
+		return e ? this.getAttribute("weight") === "fill" && !e.endsWith("-fill") ? `${e}-fill` : e : null;
+	}
+	#r() {
+		let e = this.#n();
+		if (!e) {
+			this.innerHTML = "", this.#e?.(), this.#e = null;
+			return;
+		}
+		let t = i(e);
+		t ? (this.innerHTML = t, this.#e?.(), this.#e = null) : (this.innerHTML = "", this.#e ||= a((e) => {
+			e === this.#n() && this.#r();
+		}));
+	}
+};
+export { r as i, i as n, a as r, o as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nonoun/native-ui",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "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/define.js

@@ -1,62 +0,0 @@
-import { a as e, c as t, d as n, f as r, h as i, i as a, l as o, m as s, o as c, p as l, r as u, s as d, u as f } from "./uid.js";
-var p = class {
-	[Symbol.toStringTag] = "Signal";
-	#e;
-	constructor(e) {
-		this.#e = e;
-	}
-	get value() {
-		return i(this.#e), this.#e._value;
-	}
-	set value(e) {
-		Object.is(this.#e._value, e) || (this.#e._value = e, l(this.#e));
-	}
-	peek() {
-		return this.#e._value;
-	}
-};
-function m(e) {
-	let t = new a(e), n = new p(t);
-	return r.set(n, t), n;
-}
-var h = class {
-	[Symbol.toStringTag] = "Computed";
-	#e;
-	constructor(e) {
-		this.#e = e;
-	}
-	get value() {
-		return i(this.#e), this.#e._dirty && this.#t(), this.#e._value;
-	}
-	peek() {
-		return this.#e._dirty && this.#t(), this.#e._value;
-	}
-	#t() {
-		let t = this.#e;
-		if (c.has(t)) throw Error("Circular computed dependency detected.");
-		e(t), c.add(t);
-		let n = o();
-		s(t);
-		try {
-			t._value = t._fn();
-		} finally {
-			s(n), c.delete(t), t._dirty = !1;
-		}
-	}
-};
-function g(e) {
-	let t = new u(e), n = new h(t);
-	return r.set(n, t), n;
-}
-function _(e) {
-	n();
-	try {
-		e();
-	} finally {
-		d(), f() === 0 && t();
-	}
-}
-function v(e, t) {
-	customElements.get(e) || customElements.define(e, t);
-}
-export { m as i, _ as n, g as r, v as t };