@nonoun/native-ui 0.2.7 → 0.2.9

package/dist/components.css

@@ -1,3 +1,54 @@
+@layer ui {
+
+  /* ── Icon Base ── */
+
+  :where(ui-icon) {
+    --ui-icon-size: var(--_icon-size);
+    --ui-icon-color: currentColor;
+
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--ui-icon-size);
+    height: var(--ui-icon-size);
+    color: var(--ui-icon-color);
+    flex-shrink: 0;
+    vertical-align: middle;
+    line-height: 0;
+  }
+
+  :where(ui-icon) > :where(svg) {
+    width: 100%;
+    height: 100%;
+  }
+
+  /* WHY: Unregistered icons (no SVG content) should collapse to zero size
+     so surrounding buttons/slots don't render with phantom dimensions */
+  :where(ui-icon:empty) {
+    width: 0;
+    height: 0;
+    overflow: hidden;
+  }
+
+  /* ── Icon Size Variants ── */
+
+  :where(ui-icon[size="xs"]) { --ui-icon-size: var(--ui-icon-xs); }
+  :where(ui-icon[size="sm"]) { --ui-icon-size: var(--ui-icon-sm); }
+  :where(ui-icon[size="md"]) { --ui-icon-size: var(--ui-icon-md); }
+  :where(ui-icon[size="lg"]) { --ui-icon-size: var(--ui-icon-lg); }
+  :where(ui-icon[size="xl"]) { --ui-icon-size: var(--ui-icon-xl); }
+
+  /* ── Forced Colors ── */
+
+  @media (forced-colors: active) {
+    :where(ui-icon) {
+      --ui-icon-color: ButtonText;
+    }
+  }
+
+}
+
 @layer ui {
 
   /* ── Accordion Container ── */
@@ -474,7 +525,8 @@
     display: inline-flex;
     flex-direction: column;
     gap: calc(var(--_space));
-    padding: calc(var(--_space) * 2);
+    padding-block: calc(var(--_space) * 2);
+    padding-inline: calc(var(--_space) * 2);
     border: 1px solid var(--_border-color);
     border-radius: var(--_radius);
     background: var(--_background);
@@ -686,11 +738,17 @@
   }
 
   :where(ui-calendar) :where([data-range-start]) {
-    border-radius: calc(var(--_radius) - var(--_space)) 0 0 calc(var(--_radius) - var(--_space));
+    border-start-start-radius: calc(var(--_radius) - var(--_space));
+    border-end-start-radius: calc(var(--_radius) - var(--_space));
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
   }
 
   :where(ui-calendar) :where([data-range-end]) {
-    border-radius: 0 calc(var(--_radius) - var(--_space)) calc(var(--_radius) - var(--_space)) 0;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+    border-start-end-radius: calc(var(--_radius) - var(--_space));
+    border-end-end-radius: calc(var(--_radius) - var(--_space));
   }
 
   :where(ui-calendar) :where([data-range-start][data-range-end]) {
@@ -1030,13 +1088,16 @@
 
   /* ── Active (pressed) ── */
 
-  :where(ui-checkbox)[pressed]::before {
+  :where(ui-checkbox)[pressed]::before,
+  :where(ui-checkbox)[force-active]::before {
     background: var(--_background-active, var(--_widget-active));
     border-color: var(--_border-color-active, var(--_border-active));
   }
 
   :where(ui-checkbox)[aria-checked="true"][pressed]::before,
-  :where(ui-checkbox)[aria-checked="mixed"][pressed]::before {
+  :where(ui-checkbox)[aria-checked="mixed"][pressed]::before,
+  :where(ui-checkbox)[aria-checked="true"][force-active]::before,
+  :where(ui-checkbox)[aria-checked="mixed"][force-active]::before {
     background: var(--_surface-active);
     border-color: var(--_surface-active);
   }
@@ -1093,6 +1154,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 {
@@ -1145,7 +1223,8 @@
   :where(ui-command-list) {
     overflow-y: auto;
     max-height: var(--ui-popover-max-height);
-    padding: var(--_space);
+    padding-block: var(--_space);
+    padding-inline: var(--_space);
   }
 
   /* ── Command Group ── */
@@ -1237,7 +1316,8 @@
   }
 
   :where(ui-dialog) > :where(dialog)::backdrop {
-    background: var(--ui-backdrop-color) / var(--ui-backdrop-opacity);
+    background: var(--ui-backdrop-color);
+    opacity: var(--ui-backdrop-opacity);
   }
 
 }
@@ -1277,7 +1357,8 @@
   /* WHY: Animate backdrop opacity on open for a smooth reveal. */
 
   :where(ui-drawer) > :where(dialog)::backdrop {
-    background: var(--ui-backdrop-color) / var(--ui-backdrop-opacity);
+    background: var(--ui-backdrop-color);
+    opacity: var(--ui-backdrop-opacity);
     animation: drawer-backdrop-in var(--_duration) ease-out;
   }
 
@@ -1739,7 +1820,8 @@
     min-width: 0;
     flex-direction: column;
     gap: 0;
-    padding: var(--_space);
+    padding-block: var(--_space);
+    padding-inline: var(--_space);
     border-radius: var(--_radius);
     border: 1px solid var(--_border-color, var(--_border-rest));
     background: var(--_background, var(--_control));
@@ -1755,6 +1837,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"]) {
@@ -1919,10 +2034,6 @@
     color: var(--_ink-hover);
   }
 
-  :where(ui-nav-item)[active] {
-    color: var(--_ink-hover);
-  }
-
   :where(ui-nav-item):active,
   :where(ui-nav-item)[force-active] {
     color: var(--_ink-active);
@@ -2147,10 +2258,15 @@
      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 0 0 var(--ui-popover-gap);
+    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);
     overflow-y: auto;
@@ -2160,6 +2276,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
@@ -2203,6 +2323,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;
@@ -2381,12 +2509,14 @@
 
   /* ── Active (pressed) ── */
 
-  :where(ui-radio)[pressed]::before {
+  :where(ui-radio)[pressed]::before,
+  :where(ui-radio)[force-active]::before {
     background: var(--_background-active, var(--_widget-active));
     border-color: var(--_border-color-active, var(--_border-active));
   }
 
-  :where(ui-radio)[aria-checked="true"][pressed]::before {
+  :where(ui-radio)[aria-checked="true"][pressed]::before,
+  :where(ui-radio)[aria-checked="true"][force-active]::before {
     background: var(--_surface-active);
     border-color: var(--_surface-active);
   }
@@ -2440,6 +2570,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);
 
@@ -2536,11 +2668,13 @@
 
   /* ── Active (dragging) ── */
 
-  :where(ui-range)[pressed]::after {
+  :where(ui-range)[pressed]::after,
+  :where(ui-range)[force-active]::after {
     background: var(--_surface-active);
   }
 
-  :where(ui-range)[pressed] > :where(.ui-range-thumb) {
+  :where(ui-range)[pressed] > :where(.ui-range-thumb),
+  :where(ui-range)[force-active] > :where(.ui-range-thumb) {
     border-color: var(--_surface-active);
     box-shadow: var(--ui-shadow-sm), 0 0 0 6px var(--_surface);
   }
@@ -2728,6 +2862,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 {
@@ -3126,12 +3277,14 @@
 
   /* ── Active (pressed) ── */
 
-  :where(ui-switch)[pressed]::before {
+  :where(ui-switch)[pressed]::before,
+  :where(ui-switch)[force-active]::before {
     background: var(--_track-bg-active);
     border-color: var(--_track-border-active);
   }
 
-  :where(ui-switch)[aria-checked="true"][pressed]::before {
+  :where(ui-switch)[aria-checked="true"][pressed]::before,
+  :where(ui-switch)[aria-checked="true"][force-active]::before {
     background: var(--_surface-active);
     border-color: var(--_surface-active);
   }
@@ -3878,7 +4031,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);
@@ -3900,8 +4053,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),
@@ -3913,37 +4070,45 @@
 
   :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-bottom: calc(var(--_space) * 2);
+    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-top: calc(var(--_space) * 2);
+    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-right: calc(var(--_space) * 2);
+    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-left: calc(var(--_space) * 2);
+    margin-inline-start: calc(var(--_space) * 2);
   }
 
   /* ── Hidden (not :popover-open) ── */
@@ -3967,7 +4132,8 @@
     flex: 1 1 0%;
     min-width: 0;
     flex-direction: column;
-    padding: var(--_space);
+    padding-block: var(--_space);
+    padding-inline: var(--_space);
     font-size: var(--_font-size);
     line-height: var(--_line-height);
   }
@@ -4052,7 +4218,7 @@
 
   /* ── Disabled ── */
 
-  :where(ui-tree-item[disabled]) > :where([slot="label"]) {
+  :where(ui-tree-item[aria-disabled="true"]) > :where([slot="label"]) {
     color: var(--_ink-disabled);
     cursor: not-allowed;
     pointer-events: none;
@@ -4762,11 +4928,11 @@
   /* WHY: When collapsed to icon rail, the sidebar edge meets content — drop left padding. */
 
   :where(ui-layout-sidebar)[collapsed] :where(ui-layout-canvas) {
-    padding-left: 0;
+    padding-inline-start: 0;
   }
 
   :where(ui-layout-sidebar)[collapsed] :where(ui-layout-breadcrumb) {
-    padding-left: 0;
+    padding-inline-start: 0;
   }
 
   /* ── Sidebar Header ── */
@@ -4935,10 +5101,15 @@
      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 0 0 var(--ui-popover-gap);
+    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);
     overflow-y: auto;
@@ -4948,6 +5119,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
@@ -4988,6 +5163,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;
+    }
   }
 
 }
@@ -5196,57 +5379,6 @@
 
 }
 
-@layer ui {
-
-  /* ── Icon Base ── */
-
-  :where(ui-icon) {
-    --ui-icon-size: var(--_icon-size);
-    --ui-icon-color: currentColor;
-
-    box-sizing: border-box;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--ui-icon-size);
-    height: var(--ui-icon-size);
-    color: var(--ui-icon-color);
-    flex-shrink: 0;
-    vertical-align: middle;
-    line-height: 0;
-  }
-
-  :where(ui-icon) > :where(svg) {
-    width: 100%;
-    height: 100%;
-  }
-
-  /* WHY: Unregistered icons (no SVG content) should collapse to zero size
-     so surrounding buttons/slots don't render with phantom dimensions */
-  :where(ui-icon:empty) {
-    width: 0;
-    height: 0;
-    overflow: hidden;
-  }
-
-  /* ── Icon Size Variants ── */
-
-  :where(ui-icon[size="xs"]) { --ui-icon-size: var(--ui-icon-xs); }
-  :where(ui-icon[size="sm"]) { --ui-icon-size: var(--ui-icon-sm); }
-  :where(ui-icon[size="md"]) { --ui-icon-size: var(--ui-icon-md); }
-  :where(ui-icon[size="lg"]) { --ui-icon-size: var(--ui-icon-lg); }
-  :where(ui-icon[size="xl"]) { --ui-icon-size: var(--ui-icon-xl); }
-
-  /* ── Forced Colors ── */
-
-  @media (forced-colors: active) {
-    :where(ui-icon) {
-      --ui-icon-color: ButtonText;
-    }
-  }
-
-}
-
 @layer ui {
 
   /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

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

@@ -1 +1 @@
-{"version":3,"file":"ui-layout-sidebar-element.d.ts","sourceRoot":"","sources":["../../../src/containers/ui-layout-sidebar/ui-layout-sidebar-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAIrD;2EAC2E;AAC3E,qBAAa,eAAgB,SAAQ,SAAS;;IAC5C,MAAM,CAAC,kBAAkB,WAAiB;IAS1C,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IASpF,KAAK,IAAI,IAAI;IA+Bb,QAAQ,IAAI,IAAI;CAoGjB"}
+{"version":3,"file":"ui-layout-sidebar-element.d.ts","sourceRoot":"","sources":["../../../src/containers/ui-layout-sidebar/ui-layout-sidebar-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAIrD;2EAC2E;AAC3E,qBAAa,eAAgB,SAAQ,SAAS;;IAC5C,MAAM,CAAC,kBAAkB,WAAiB;IAS1C,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IASpF,KAAK,IAAI,IAAI;IAmCb,QAAQ,IAAI,IAAI;CAoGjB"}

package/dist/core/form-associable.d.ts

@@ -5,14 +5,14 @@ import type { Constructor } from './types.ts';
  * - `static formAssociated = true`
  * - `formDisabledCallback` → calls `onFormDisabled(disabled)`
  * - `formResetCallback` → calls `onFormReset()`
- *
- * Subclasses override `onFormDisabled` and `onFormReset` with their own logic.
+ * - `formStateRestoreCallback` → calls `onFormStateRestore(state)`
  *
  * Must remain a mixin (not a controller) because the Web Components spec
  * requires `static formAssociated = true` on the class constructor.
  *
  * ```ts
  * class UIInput extends FormAssociable(UIElement) {
+ *   #internals = this.attachInternals();
  *   onFormDisabled(disabled: boolean) { this.#disabled.value = disabled; }
  *   onFormReset() { this.textContent = ''; }
  * }

package/dist/core/trait-runtime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"trait-runtime.d.ts","sourceRoot":"","sources":["../../src/core/trait-runtime.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD;;;;GAIG;AACH,qBAAa,YAAY;;IAmBvB,IAAI,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI;IAO3B,MAAM,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI;CAmB9B;AAED;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAQD,qBAAa,YAAY;;IA0BvB,KAAK,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,YAAY,GAAG,MAAM;IAuCvD,OAAO,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAazB,UAAU,IAAI,IAAI;CAKnB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IACpC,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IACpC,QAAQ,CAAC,aAAa,EAAE,aAAa,CAAC;CACvC;AAID,wBAAgB,eAAe,IAAI,YAAY,CAS9C"}
+{"version":3,"file":"trait-runtime.d.ts","sourceRoot":"","sources":["../../src/core/trait-runtime.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD;;;;GAIG;AACH,qBAAa,YAAY;;IAsBvB,IAAI,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI;IAO3B,MAAM,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI;CAmB9B;AAED;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAQD,qBAAa,YAAY;;IA0BvB,KAAK,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,YAAY,GAAG,MAAM;IAuCvD,OAAO,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAazB,UAAU,IAAI,IAAI;CAKnB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IACpC,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IACpC,QAAQ,CAAC,aAAa,EAAE,aAAa,CAAC;CACvC;AAID,wBAAgB,eAAe,IAAI,YAAY,CAS9C"}

package/dist/core/ui-element.d.ts

@@ -1,6 +1,8 @@
 /** Base custom element class with reactive effect lifecycle, child deferral, and trait protocol. */
 export declare class UIElement extends HTMLElement {
     #private;
+    /** Resolves after setup() and any deferChildren microtask have completed. */
+    readonly ready: Promise<void>;
     addEffect(fn: () => void): void;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/core/ui-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui-element.d.ts","sourceRoot":"","sources":["../../src/core/ui-element.ts"],"names":[],"mappings":"AAKA,oGAAoG;AACpG,qBAAa,SAAU,SAAQ,WAAW;;IAQxC,SAAS,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,IAAI;IAI/B,iBAAiB,IAAI,IAAI;IAazB,oBAAoB,IAAI,IAAI;IAa5B,KAAK,IAAI,IAAI;IACb,QAAQ,IAAI,IAAI;IAEhB,SAAS,CAAC,aAAa,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,IAAI;IAU7C,wBAAwB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAEvF;;;OAGG;IACH,kBAAkB,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC,GAAG,IAAI;CAsG9C"}
+{"version":3,"file":"ui-element.d.ts","sourceRoot":"","sources":["../../src/core/ui-element.ts"],"names":[],"mappings":"AAKA,oGAAoG;AACpG,qBAAa,SAAU,SAAQ,WAAW;;IASxC,6EAA6E;IAC7E,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,CAE1B;IAEH,SAAS,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,IAAI;IAI/B,iBAAiB,IAAI,IAAI;IAgBzB,oBAAoB,IAAI,IAAI;IAa5B,KAAK,IAAI,IAAI;IACb,QAAQ,IAAI,IAAI;IAEhB,SAAS,CAAC,aAAa,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,IAAI;IAU7C,wBAAwB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAEvF;;;OAGG;IACH,kBAAkB,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC,GAAG,IAAI;CAsG9C"}