@aquera/nile-elements 2.0.11 → 2.0.13

package/README.md

@@ -91,6 +91,13 @@ To run a local development server that serves the basic demo located in `demo/in
 
 In this section, you can find the updates for each release of `nile-elements`. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects.
 
+#### Version 2.0.13 (October 01, 2026)
+- Nile Select: Chip resizing, the `+N` overflow button and chip tooltips now apply only when `showTooltip` is set. Fixed value sync in virtual-scroll mode, dropdown collapse with `noWidthSync`, and chip sizing/tooltip issues (UIF-1372)
+- Nile Virtual Select: Fixed dropdown collapse with `noWidthSync` and missing tooltips on truncated chips (UIF-1372)
+
+#### Version 2.0.12 (September 30, 2026)
+- App Shell: Header matches the Nile NG design; added `headerBack`, `headerBackLabel` and back `nile-click` `{ value: 'back' }`, replacing `leading`, `backLabel` and `nile-header-back` (UIF-1371)
+
 #### Version 2.0.11 (September 29, 2026)
 - App Shell: Added header variants: a title with an optional `description` and `badge`, a `leading` back breadcrumb or app icon, and optional tabs, at 68px, 76px (description), 101px (tabs) and 109px (both) (UIF-1369)
 

package/demo/app-shell.html

@@ -159,7 +159,7 @@
       /* ----------------------------------------------- header variant gallery
        *
        * The AC-7 comparison surface: the header's three Figma axes crossed out
-       * in full, twelve cards that differ ONLY by those axes, grouped under
+       * in full, sixteen cards (the arrow and the app icon are independent) that differ ONLY by those axes, grouped under
        * the height each pair of axes is meant to produce. Everything here is
        * prefixed vg- so it cannot collide with the reference demo above.
        */
@@ -342,7 +342,7 @@
     <!--
       Two views, switched by ?view= and the pill bottom-right:
         (default)       the reference shell, one realistic page
-        ?view=variants  the AC-7 comparison surface, all 12 header variants
+        ?view=variants  the AC-7 comparison surface, all 16 header variants
     -->
     <div id="vgShellView" style="height: 100%">
       <nile-app-shell id="shell" full-height persist-key="demo-shell">
@@ -488,7 +488,7 @@
 
     <!--
       The header variant gallery. The cards are generated from the axis matrix
-      rather than written out twelve times, so the only thing that can differ
+      rather than written out sixteen times, so the only thing that can differ
       between them is the axes themselves — which is the whole point of a
       parity comparison.
     -->
@@ -618,10 +618,12 @@
         { tabs: true, description: true, height: 109 },
       ];
 
+      /* headerBack and the app-icon slot are independent (Amendment A), so each section shows all four combinations. */
       const LEADINGS = [
-        { value: 'none', label: 'Leading=None' },
-        { value: 'back', label: 'Leading=Back' },
-        { value: 'app-icon', label: 'Leading=AppIcon' },
+        { value: 'none', back: false, icon: false, label: 'Title only' },
+        { value: 'back', back: true, icon: false, label: 'headerBack' },
+        { value: 'app-icon', back: false, icon: true, label: 'app-icon slot' },
+        { value: 'back+app-icon', back: true, icon: true, label: 'headerBack + app-icon' },
       ];
 
       const DESCRIPTION = 'Manage the applications connected to this tenant';
@@ -638,7 +640,9 @@
       const card = (n, section, leading) => {
         const axes = `tabs=${section.tabs ? 'on' : 'off'} · description=${
           section.description ? 'on' : 'off'
-        } · leading=${leading.value}`;
+        } · headerBack=${leading.back ? 'on' : 'off'} · app-icon=${
+          leading.icon ? 'slotted' : 'empty'
+        }`;
 
         return `
           <div class="vg-card">
@@ -662,9 +666,8 @@
               <nile-app-shell
                 pageTitle="Connected applications"
                 badge="94 apps"
-                leading="${leading.value}"
+                ${leading.back ? 'headerBack' : ''}
                 ${section.description ? `description="${DESCRIPTION}"` : ''}
-                ${leading.value === 'back' ? 'backLabel="Integrations"' : ''}
                 no-panel-shortcut
               >
                 <nav slot="side-nav" class="vg-nav">
@@ -672,7 +675,7 @@
                   <span>Requests</span>
                 </nav>
                 ${
-                  leading.value === 'app-icon'
+                  leading.icon
                     ? `<nile-glyph
                          slot="app-icon"
                          name="ng-layers-2"
@@ -775,22 +778,19 @@
           }
 
           /*
-           * The leading element belongs to the title's row, so it sits 2px
-           * below the title's top edge — (24px line box - 20px control) / 2 —
-           * whether or not there is a description under it. The app icon is
-           * 20px, its own size rather than the 32px utility control box.
+           * The back arrow and the app icon both belong to the title's row, so
+           * each sits 2px below the title's top edge — (24px line box - 20px) / 2 —
+           * whether or not there is a description under it. With both, the
+           * chip measures the icon; the arrow shares its row.
            */
           if (entry.leadChip) {
             const title = root
               .querySelector('[part~="page-title"]')
               .getBoundingClientRect();
-            const icon = root.querySelector('[part~="app-icon"]');
-            /*
-             * For leading=back the 20px element is the ARROW, not the control:
-             * the control is the title's own 24px line box, so its label sits
-             * level with the page title (+0) while the arrow centres in it
-             * (+2). Measuring the control box would report +0 and look wrong.
-             */
+            /* The app-icon box is always in the shadow tree (hidden when empty), so only count it when the slot is filled. */
+            const icon = entry.shell.hasAttribute('has-app-icon')
+              ? root.querySelector('[part~="app-icon"]')
+              : null;
             const measured = icon
               ? icon
               : root.querySelector('[part~="back"]').querySelector('nile-glyph');