@nonoun/native-ui 0.2.5 → 0.2.6

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/ui-icon-element.js

@@ -4107,6 +4107,11 @@ var ve = class extends y(c) {
 		super.setup(), this.id ||= e("ngh");
 		let t = this.closest("ui-nav-group");
 		t && t.setAttribute("aria-labelledby", this.id);
+		let n = this.querySelector(":scope > ui-icon");
+		if (n) {
+			let e = document.createElement("span");
+			e.className = "icon-well", this.insertBefore(e, n), e.appendChild(n);
+		}
 	}
 }, Y = class extends c {
 	static observedAttributes = [

package/package.json

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