@nonoun/native-ui 0.2.5 → 0.2.7

package/dist/components/ui-nav/ui-nav-group-header-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui-nav-group-header-element.d.ts","sourceRoot":"","sources":["../../../src/components/ui-nav/ui-nav-group-header-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAGrD,4DAA4D;AAC5D,qBAAa,gBAAiB,SAAQ,SAAS;;IAO7C,KAAK,IAAI,IAAI;CAQd"}
+{"version":3,"file":"ui-nav-group-header-element.d.ts","sourceRoot":"","sources":["../../../src/components/ui-nav/ui-nav-group-header-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAGrD,4DAA4D;AAC5D,qBAAa,gBAAiB,SAAQ,SAAS;;IAO7C,KAAK,IAAI,IAAI;CAgBd"}

package/dist/components-lean.css

@@ -1687,7 +1687,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);
@@ -1998,6 +1998,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 {
@@ -2051,13 +2063,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);
@@ -2072,7 +2085,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;
@@ -2156,7 +2169,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);
     }
 
@@ -4807,6 +4820,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;
@@ -4884,7 +4911,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/components.css

@@ -1709,7 +1709,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);
@@ -2026,6 +2026,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 {
@@ -2081,13 +2093,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);
@@ -2102,7 +2115,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;
@@ -2186,7 +2199,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);
     }
 
@@ -4878,6 +4891,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;
@@ -4955,7 +4982,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)) {