@nonoun/native-ui 0.2.7 → 0.2.8

package/dist/components-lean.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 ── */
@@ -467,7 +518,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);
@@ -674,11 +726,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]) {
@@ -1015,13 +1073,14 @@
 
   /* ── Active (pressed) ── */
 
-  :where(ui-checkbox)[pressed]::before {
+  :where(ui-checkbox)[pressed]::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="mixed"][force-active]::before {
     background: var(--_surface-active);
     border-color: var(--_surface-active);
   }
@@ -1129,7 +1188,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 ── */
@@ -1221,7 +1281,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);
   }
 
 }
@@ -1261,7 +1322,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;
   }
 
@@ -1717,7 +1779,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));
@@ -1893,10 +1956,6 @@
     color: var(--_ink-hover);
   }
 
-  :where(ui-nav-item)[active] {
-    color: var(--_ink-hover);
-  }
-
   :where(ui-nav-item):active{
     color: var(--_ink-active);
   }
@@ -2120,7 +2179,8 @@
     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: 0;
+    margin-inline-start: var(--ui-popover-gap);
     min-width: 200px;
     max-height: var(--ui-popover-max-height);
     overflow-y: auto;
@@ -2348,12 +2408,12 @@
 
   /* ── Active (pressed) ── */
 
-  :where(ui-radio)[pressed]::before {
+  :where(ui-radio)[pressed]::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{
     background: var(--_surface-active);
     border-color: var(--_surface-active);
   }
@@ -2499,11 +2559,11 @@
 
   /* ── Active (dragging) ── */
 
-  :where(ui-range)[pressed]::after {
+  :where(ui-range)[pressed]::after{
     background: var(--_surface-active);
   }
 
-  :where(ui-range)[pressed] > :where(.ui-range-thumb) {
+  :where(ui-range)[pressed] > :where(.ui-range-thumb){
     border-color: var(--_surface-active);
     box-shadow: var(--ui-shadow-sm), 0 0 0 6px var(--_surface);
   }
@@ -3078,12 +3138,12 @@
 
   /* ── Active (pressed) ── */
 
-  :where(ui-switch)[pressed]::before {
+  :where(ui-switch)[pressed]::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{
     background: var(--_surface-active);
     border-color: var(--_surface-active);
   }
@@ -3863,22 +3923,22 @@
 
   :where(ui-tooltip[placement="top"]) {
     position-area: block-start;
-    margin-bottom: calc(var(--_space) * 2);
+    margin-block-end: calc(var(--_space) * 2);
   }
 
   :where(ui-tooltip[placement="bottom"]) {
     position-area: block-end;
-    margin-top: calc(var(--_space) * 2);
+    margin-block-start: calc(var(--_space) * 2);
   }
 
   :where(ui-tooltip[placement="left"]) {
     position-area: inline-start;
-    margin-right: calc(var(--_space) * 2);
+    margin-inline-end: calc(var(--_space) * 2);
   }
 
   :where(ui-tooltip[placement="right"]) {
     position-area: inline-end;
-    margin-left: calc(var(--_space) * 2);
+    margin-inline-start: calc(var(--_space) * 2);
   }
 
   /* ── Hidden (not :popover-open) ── */
@@ -3902,7 +3962,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);
   }
@@ -3985,7 +4046,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;
@@ -4693,11 +4754,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 ── */
@@ -4867,7 +4928,8 @@
     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: 0;
+    margin-inline-start: var(--ui-popover-gap);
     min-width: 200px;
     max-height: var(--ui-popover-max-height);
     overflow-y: auto;
@@ -5125,57 +5187,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/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);
   }
@@ -1145,7 +1206,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 +1299,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 +1340,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 +1803,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));
@@ -1919,10 +1984,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);
@@ -2150,7 +2211,8 @@
     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: 0;
+    margin-inline-start: var(--ui-popover-gap);
     min-width: 200px;
     max-height: var(--ui-popover-max-height);
     overflow-y: auto;
@@ -2381,12 +2443,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);
   }
@@ -2536,11 +2600,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);
   }
@@ -3126,12 +3192,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);
   }
@@ -3928,22 +3996,22 @@
 
   :where(ui-tooltip[placement="top"]) {
     position-area: block-start;
-    margin-bottom: calc(var(--_space) * 2);
+    margin-block-end: calc(var(--_space) * 2);
   }
 
   :where(ui-tooltip[placement="bottom"]) {
     position-area: block-end;
-    margin-top: calc(var(--_space) * 2);
+    margin-block-start: calc(var(--_space) * 2);
   }
 
   :where(ui-tooltip[placement="left"]) {
     position-area: inline-start;
-    margin-right: calc(var(--_space) * 2);
+    margin-inline-end: calc(var(--_space) * 2);
   }
 
   :where(ui-tooltip[placement="right"]) {
     position-area: inline-end;
-    margin-left: calc(var(--_space) * 2);
+    margin-inline-start: calc(var(--_space) * 2);
   }
 
   /* ── Hidden (not :popover-open) ── */
@@ -3967,7 +4035,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 +4121,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 +4831,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 ── */
@@ -4938,7 +5007,8 @@
     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: 0;
+    margin-inline-start: var(--ui-popover-gap);
     min-width: 200px;
     max-height: var(--ui-popover-max-height);
     overflow-y: auto;
@@ -5196,57 +5266,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/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/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"}