@kubex/zinc 1.1.184 → 2.0.0

package/docs/pages/components/vertical-stepper.md

@@ -35,17 +35,17 @@ Use the `active` attribute to highlight the current step in the process. The act
 
 ### With Custom Icons
 
-Use the `icon` slot to add custom icons or indicators for each step. The icon is centred in the step's 32px circle, so keep it at the default 24px size or smaller.
+Use the `icon` slot to add custom icons or indicators for each step. The icon is centred in the step's 28px marker; use `size="16"`.
 
 ```html:preview
 <zn-vertical-stepper caption="Personal Details" description="Enter your name and contact information" first active>
-  <zn-icon slot="icon" src="person"></zn-icon>
+  <zn-icon slot="icon" src="person" size="16"></zn-icon>
 </zn-vertical-stepper>
 <zn-vertical-stepper caption="Address" description="Provide your shipping address">
-  <zn-icon slot="icon" src="home"></zn-icon>
+  <zn-icon slot="icon" src="home" size="16"></zn-icon>
 </zn-vertical-stepper>
 <zn-vertical-stepper caption="Payment" description="Add payment method" last>
-  <zn-icon slot="icon" src="credit_card"></zn-icon>
+  <zn-icon slot="icon" src="credit_card" size="16"></zn-icon>
 </zn-vertical-stepper>
 ```
 
@@ -54,17 +54,17 @@ Use the `icon` slot to add custom icons or indicators for each step. The icon is
 Show completed steps with check marks or success icons.
 
 ```html:preview
-<zn-vertical-stepper caption="Registration" description="Account created successfully" first>
-  <zn-icon slot="icon" src="check_circle" style="color: rgb(var(--zn-success))"></zn-icon>
+<zn-vertical-stepper type="success" caption="Registration" description="Account created successfully" first>
+  <zn-icon slot="icon" src="check" size="16"></zn-icon>
 </zn-vertical-stepper>
-<zn-vertical-stepper caption="Verification" description="Email verified" active>
-  <zn-icon slot="icon" src="check_circle" style="color: rgb(var(--zn-success))"></zn-icon>
+<zn-vertical-stepper type="success" caption="Verification" description="Email verified" active>
+  <zn-icon slot="icon" src="check" size="16"></zn-icon>
 </zn-vertical-stepper>
 <zn-vertical-stepper caption="Payment Setup" description="Add your payment method">
-  <zn-icon slot="icon" src="pending" style="color: rgb(var(--zn-text-secondary))"></zn-icon>
+  <zn-icon slot="icon" src="pending" size="16"></zn-icon>
 </zn-vertical-stepper>
 <zn-vertical-stepper caption="Complete Profile" description="Upload profile picture" last>
-  <zn-icon slot="icon" src="pending" style="color: rgb(var(--zn-text-secondary))"></zn-icon>
+  <zn-icon slot="icon" src="pending" size="16"></zn-icon>
 </zn-vertical-stepper>
 ```
 
@@ -73,17 +73,17 @@ Show completed steps with check marks or success icons.
 A practical example showing an order fulfillment process with different step states.
 
 ```html:preview
-<zn-vertical-stepper caption="Order Received" description="Order #12345 received on Jan 20, 2026" first>
-  <zn-icon slot="icon" src="check_circle" style="color: rgb(var(--zn-success))"></zn-icon>
+<zn-vertical-stepper type="success" caption="Order Received" description="Order #12345 received on Jan 20, 2026" first>
+  <zn-icon slot="icon" src="check" size="16"></zn-icon>
 </zn-vertical-stepper>
-<zn-vertical-stepper caption="Processing" description="Your order is being prepared" active>
-  <zn-icon slot="icon" src="shopping_bag" style="color: rgb(var(--zn-primary))"></zn-icon>
+<zn-vertical-stepper type="primary" caption="Processing" description="Your order is being prepared" active>
+  <zn-icon slot="icon" src="shopping_bag" size="16"></zn-icon>
 </zn-vertical-stepper>
 <zn-vertical-stepper caption="Shipped" description="Estimated delivery: Jan 25, 2026">
-  <zn-icon slot="icon" src="local_shipping" style="color: rgb(var(--zn-text-secondary))"></zn-icon>
+  <zn-icon slot="icon" src="local_shipping" size="16"></zn-icon>
 </zn-vertical-stepper>
 <zn-vertical-stepper caption="Delivered" description="Package will arrive at your doorstep" last>
-  <zn-icon slot="icon" src="home" style="color: rgb(var(--zn-text-secondary))"></zn-icon>
+  <zn-icon slot="icon" src="home" size="16"></zn-icon>
 </zn-vertical-stepper>
 ```
 
@@ -102,28 +102,28 @@ Create continuous step lists by omitting the `first` and `last` attributes when
 Show detailed installation or setup progress with descriptive text for each phase.
 
 ```html:preview
-<zn-vertical-stepper
+<zn-vertical-stepper type="success"
   caption="Download"
   description="Downloading installer files (45 MB)"
   first>
-  <zn-icon slot="icon" src="check_circle" style="color: rgb(var(--zn-success))"></zn-icon>
+  <zn-icon slot="icon" src="check" size="16"></zn-icon>
 </zn-vertical-stepper>
-<zn-vertical-stepper
+<zn-vertical-stepper type="primary"
   caption="Extract"
   description="Extracting packages and dependencies"
   active>
-  <zn-icon slot="icon" src="folder_zip" style="color: rgb(var(--zn-primary))"></zn-icon>
+  <zn-icon slot="icon" src="folder_zip" size="16"></zn-icon>
 </zn-vertical-stepper>
 <zn-vertical-stepper
   caption="Install"
   description="Installing application components">
-  <zn-icon slot="icon" src="pending" style="color: rgb(var(--zn-text-secondary))"></zn-icon>
+  <zn-icon slot="icon" src="pending" size="16"></zn-icon>
 </zn-vertical-stepper>
 <zn-vertical-stepper
   caption="Configure"
   description="Setting up initial configuration"
   last>
-  <zn-icon slot="icon" src="pending" style="color: rgb(var(--zn-text-secondary))"></zn-icon>
+  <zn-icon slot="icon" src="pending" size="16"></zn-icon>
 </zn-vertical-stepper>
 ```
 
@@ -132,33 +132,33 @@ Show detailed installation or setup progress with descriptive text for each phas
 A multi-step onboarding flow with clear descriptions for each phase.
 
 ```html:preview
-<zn-vertical-stepper
+<zn-vertical-stepper type="success"
   caption="Welcome"
   description="Introduction to the platform and key features"
   first>
-  <zn-icon slot="icon" src="check_circle" style="color: rgb(var(--zn-success))"></zn-icon>
+  <zn-icon slot="icon" src="check" size="16"></zn-icon>
 </zn-vertical-stepper>
-<zn-vertical-stepper
+<zn-vertical-stepper type="primary"
   caption="Team Setup"
   description="Invite team members and assign roles"
   active>
-  <zn-icon slot="icon" src="group_add" style="color: rgb(var(--zn-primary))"></zn-icon>
+  <zn-icon slot="icon" src="group_add" size="16"></zn-icon>
 </zn-vertical-stepper>
 <zn-vertical-stepper
   caption="Project Configuration"
   description="Set up your first project and workspace">
-  <zn-icon slot="icon" src="settings" style="color: rgb(var(--zn-text-secondary))"></zn-icon>
+  <zn-icon slot="icon" src="settings" size="16"></zn-icon>
 </zn-vertical-stepper>
 <zn-vertical-stepper
   caption="Integration"
   description="Connect external tools and services">
-  <zn-icon slot="icon" src="link" style="color: rgb(var(--zn-text-secondary))"></zn-icon>
+  <zn-icon slot="icon" src="link" size="16"></zn-icon>
 </zn-vertical-stepper>
 <zn-vertical-stepper
   caption="Launch"
   description="Review settings and go live"
   last>
-  <zn-icon slot="icon" src="rocket_launch" style="color: rgb(var(--zn-text-secondary))"></zn-icon>
+  <zn-icon slot="icon" src="rocket_launch" size="16"></zn-icon>
 </zn-vertical-stepper>
 ```
 
@@ -167,23 +167,67 @@ A multi-step onboarding flow with clear descriptions for each phase.
 Show error or warning states in your stepper workflow.
 
 ```html:preview
-<zn-vertical-stepper
+<zn-vertical-stepper type="success"
   caption="Validation"
   description="Form validation passed"
   first>
-  <zn-icon slot="icon" src="check_circle" style="color: rgb(var(--zn-success))"></zn-icon>
+  <zn-icon slot="icon" src="check" size="16"></zn-icon>
 </zn-vertical-stepper>
-<zn-vertical-stepper
+<zn-vertical-stepper type="error"
   caption="Payment Processing"
   description="Payment failed - card declined"
   active>
-  <zn-icon slot="icon" src="error" style="color: rgb(var(--zn-error))"></zn-icon>
+  <zn-icon slot="icon" src="error" size="16"></zn-icon>
 </zn-vertical-stepper>
 <zn-vertical-stepper
   caption="Confirmation"
   description="Order confirmation email"
   last>
-  <zn-icon slot="icon" src="pending" style="color: rgb(var(--zn-text-secondary))"></zn-icon>
+  <zn-icon slot="icon" src="pending" size="16"></zn-icon>
+</zn-vertical-stepper>
+```
+
+### Content, Suffix and Actions
+
+Use the default slot for metadata or chips below the caption, the `suffix` slot for chips inline after it, and the `actions` slot for controls at the end of the step. The line grows with the step, so taller content keeps the steps joined.
+
+```html:preview
+<zn-vertical-stepper caption="Version 4" type="warning" dashed first>
+  <span slot="icon">v4</span>
+  <zn-chip slot="suffix" size="small" type="warning">Draft</zn-chip>
+  <span>Last saved today 09:12</span>
+  <zn-button slot="actions" color="secondary">Continue editing</zn-button>
+</zn-vertical-stepper>
+<zn-vertical-stepper caption="Version 3" type="success">
+  <span slot="icon">v3</span>
+  <zn-chip slot="suffix" size="small" type="success">Live</zn-chip>
+  <span>Published 12 Oct 2026 · effective 14 Oct 2026</span>
+  <zn-button slot="actions" color="secondary">View</zn-button>
+</zn-vertical-stepper>
+<zn-vertical-stepper caption="Version 2" last>
+  <span slot="icon">v2</span>
+  <zn-chip slot="suffix" size="small">Superseded</zn-chip>
+  <span>Published 30 Sep 2026 · effective 30 Sep 2026</span>
+  <zn-button slot="actions" color="secondary">View</zn-button>
+</zn-vertical-stepper>
+```
+
+### Selected Steps and Highlighted Lines
+
+Use `selected` to ring a picked step's marker, and `highlight-line` to colour the line from a step to the next, such as the range between two compared versions. `dashed` draws the marker's border dashed for a step that is not final.
+
+```html:preview
+<zn-vertical-stepper caption="Version 4" description="Draft" type="warning" dashed first>
+  <span slot="icon">v4</span>
+</zn-vertical-stepper>
+<zn-vertical-stepper caption="Version 3" description="Compare from here" type="success" selected highlight-line>
+  <span slot="icon">v3</span>
+</zn-vertical-stepper>
+<zn-vertical-stepper caption="Version 2" description="Included in the comparison" highlight-line>
+  <span slot="icon">v2</span>
+</zn-vertical-stepper>
+<zn-vertical-stepper caption="Version 1" description="Compare to here" selected last>
+  <span slot="icon">v1</span>
 </zn-vertical-stepper>
 ```
 
@@ -199,20 +243,20 @@ Update vertical stepper states dynamically based on user actions.
     description="Complete this step"
     first
     active>
-    <zn-icon slot="icon" src="radio_button_checked"></zn-icon>
+    <zn-icon slot="icon" src="radio_button_checked" size="16"></zn-icon>
   </zn-vertical-stepper>
   <zn-vertical-stepper
     id="v-step-2"
     caption="Step 2"
     description="Pending">
-    <zn-icon slot="icon" src="radio_button_unchecked"></zn-icon>
+    <zn-icon slot="icon" src="radio_button_unchecked" size="16"></zn-icon>
   </zn-vertical-stepper>
   <zn-vertical-stepper
     id="v-step-3"
     caption="Step 3"
     description="Pending"
     last>
-    <zn-icon slot="icon" src="radio_button_unchecked"></zn-icon>
+    <zn-icon slot="icon" src="radio_button_unchecked" size="16"></zn-icon>
   </zn-vertical-stepper>
 </div>
 <br />
@@ -234,20 +278,20 @@ Update vertical stepper states dynamically based on user actions.
       if (i < currentVStep) {
         // Completed step
         step.removeAttribute('active');
-        icon.setAttribute('src', 'check_circle');
-        icon.style.color = 'rgb(var(--zn-success))';
+        icon.setAttribute('src', 'check');
+        step.type = 'success';
         step.description = 'Completed';
       } else if (i === currentVStep) {
         // Active step
         step.setAttribute('active', '');
         icon.setAttribute('src', 'radio_button_checked');
-        icon.style.color = 'rgb(var(--zn-primary))';
+        step.type = 'primary';
         step.description = 'In Progress';
       } else {
         // Future step
         step.removeAttribute('active');
         icon.setAttribute('src', 'radio_button_unchecked');
-        icon.style.color = 'rgb(var(--zn-text-secondary))';
+        step.type = 'neutral';
         step.description = 'Pending';
       }
     }
@@ -275,24 +319,24 @@ Update vertical stepper states dynamically based on user actions.
 
 ### Compact Vertical Stepper
 
-Create a more compact layout by adjusting spacing with CSS.
+Tighten the space between steps with `--zn-vertical-stepper-gap`.
 
 ```html:preview
 <div class="compact-stepper">
-  <zn-vertical-stepper caption="Login" description="User authenticated" first>
-    <zn-icon slot="icon" src="check_circle" style="color: rgb(var(--zn-success))"></zn-icon>
+  <zn-vertical-stepper type="success" caption="Login" description="User authenticated" first>
+    <zn-icon slot="icon" src="check" size="16"></zn-icon>
   </zn-vertical-stepper>
   <zn-vertical-stepper caption="Dashboard" description="Loading user data" active>
-    <zn-icon slot="icon" src="dashboard"></zn-icon>
+    <zn-icon slot="icon" src="dashboard" size="16"></zn-icon>
   </zn-vertical-stepper>
   <zn-vertical-stepper caption="Reports" description="View analytics" last>
-    <zn-icon slot="icon" src="bar_chart"></zn-icon>
+    <zn-icon slot="icon" src="bar_chart" size="16"></zn-icon>
   </zn-vertical-stepper>
 </div>
 
 <style>
   .compact-stepper zn-vertical-stepper {
-    margin: 8px 0;
+    --zn-vertical-stepper-gap: 4px;
   }
 </style>
 ```
@@ -313,23 +357,23 @@ Combine vertical and horizontal steppers for complex workflows where the horizon
 </zn-stepper>
 <br /><br />
 <div style="padding-left: 20px;">
-  <zn-vertical-stepper
+  <zn-vertical-stepper type="success"
     caption="Basic Info"
     description="Name, email, and contact details"
     first>
-    <zn-icon slot="icon" src="check_circle" style="color: rgb(var(--zn-success))"></zn-icon>
+    <zn-icon slot="icon" src="check" size="16"></zn-icon>
   </zn-vertical-stepper>
-  <zn-vertical-stepper
+  <zn-vertical-stepper type="primary"
     caption="Profile Photo"
     description="Upload your profile picture"
     active>
-    <zn-icon slot="icon" src="photo_camera" style="color: rgb(var(--zn-primary))"></zn-icon>
+    <zn-icon slot="icon" src="photo_camera" size="16"></zn-icon>
   </zn-vertical-stepper>
   <zn-vertical-stepper
     caption="Preferences"
     description="Set notification and privacy settings"
     last>
-    <zn-icon slot="icon" src="tune" style="color: rgb(var(--zn-text-secondary))"></zn-icon>
+    <zn-icon slot="icon" src="tune" size="16"></zn-icon>
   </zn-vertical-stepper>
 </div>
 ```
@@ -346,7 +390,7 @@ Add interactive elements next to each step for expanded functionality.
       description="Check all modifications before committing"
       first
       active>
-      <zn-icon slot="icon" src="preview"></zn-icon>
+      <zn-icon slot="icon" src="preview" size="16"></zn-icon>
     </zn-vertical-stepper>
   </div>
   <zn-button icon="edit" color="transparent">Edit</zn-button>
@@ -356,7 +400,7 @@ Add interactive elements next to each step for expanded functionality.
     <zn-vertical-stepper
       caption="Run Tests"
       description="Execute test suite">
-      <zn-icon slot="icon" src="pending"></zn-icon>
+      <zn-icon slot="icon" src="pending" size="16"></zn-icon>
     </zn-vertical-stepper>
   </div>
   <zn-button icon="play_arrow" color="transparent" disabled>Run</zn-button>
@@ -367,7 +411,7 @@ Add interactive elements next to each step for expanded functionality.
       caption="Deploy"
       description="Push changes to production"
       last>
-      <zn-icon slot="icon" src="pending"></zn-icon>
+      <zn-icon slot="icon" src="pending" size="16"></zn-icon>
     </zn-vertical-stepper>
   </div>
   <zn-button icon="publish" color="transparent" disabled>Deploy</zn-button>
@@ -379,37 +423,37 @@ Add interactive elements next to each step for expanded functionality.
 Show hierarchical relationships by nesting vertical steppers or indenting them.
 
 ```html:preview
-<zn-vertical-stepper
+<zn-vertical-stepper type="success"
   caption="Phase 1: Planning"
   description="Define project scope and requirements"
   first>
-  <zn-icon slot="icon" src="check_circle" style="color: rgb(var(--zn-success))"></zn-icon>
+  <zn-icon slot="icon" src="check" size="16"></zn-icon>
 </zn-vertical-stepper>
 
 <div style="padding-left: 40px;">
-  <zn-vertical-stepper
+  <zn-vertical-stepper type="success"
     caption="1.1 Research"
     description="Market analysis completed">
-    <zn-icon slot="icon" src="check_circle" style="color: rgb(var(--zn-success))"></zn-icon>
+    <zn-icon slot="icon" src="check" size="16"></zn-icon>
   </zn-vertical-stepper>
-  <zn-vertical-stepper
+  <zn-vertical-stepper type="success"
     caption="1.2 Design"
     description="Wireframes and mockups">
-    <zn-icon slot="icon" src="check_circle" style="color: rgb(var(--zn-success))"></zn-icon>
+    <zn-icon slot="icon" src="check" size="16"></zn-icon>
   </zn-vertical-stepper>
 </div>
 
-<zn-vertical-stepper
+<zn-vertical-stepper type="primary"
   caption="Phase 2: Development"
   description="Build and test features"
   active>
-  <zn-icon slot="icon" src="code" style="color: rgb(var(--zn-primary))"></zn-icon>
+  <zn-icon slot="icon" src="code" size="16"></zn-icon>
 </zn-vertical-stepper>
 
 <zn-vertical-stepper
   caption="Phase 3: Deployment"
   description="Release to production"
   last>
-  <zn-icon slot="icon" src="pending"></zn-icon>
+  <zn-icon slot="icon" src="pending" size="16"></zn-icon>
 </zn-vertical-stepper>
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.184",
+  "version": "2.0.0",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",
@@ -50,6 +50,7 @@
     "@shoelace-style/localize": "^3.2.1",
     "air-datepicker": "^3.5.3",
     "composed-offset-position": "^0.0.6",
+    "country-flag-icons": "^1.6.20",
     "dompurify": "^3.4.16",
     "echarts": "^6.0.0",
     "emoji-mart": "^5.6.0",

package/scss/_global-spacing.scss

@@ -58,7 +58,7 @@
 .form-spacing {
   display: grid;
   grid-template-columns: 1fr;
-  gap: var(--zn-spacing-medium) var(--zn-spacing-small);
+  gap: var(--zn-form-row-gap, var(--zn-spacing-medium)) var(--zn-spacing-small);
 
   @include mixins.media-query(md) {
     grid-template-columns: repeat(6, 1fr);
@@ -73,7 +73,7 @@
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  gap: var(--zn-spacing-small);
+  gap: var(--zn-form-actions-gap, var(--zn-spacing-small));
 }
 
 zn-form-group ~ zn-form-group {

package/scss/_root.scss

@@ -7,6 +7,12 @@
 :root {
   --zn-base-px: 8px;
   --zn-base-gap: calc(var(--zn-base-px) * 2);
+  // Resolved here, so a modal zn-page can set --zn-base-gap from it without referencing itself.
+  --zn-page-modal-gap: var(--zn-base-gap);
+  // A modal shell overlays its own close button at --zn-page-modal-gap from the page edge;
+  // these describe it so the header can keep clear of it and size its actions to match.
+  --zn-page-closer-size: 36px;
+  --zn-page-closer-gap: var(--zn-spacing-x-small);
   --zn-gutter: 2px;
   --zn-default-margin: 0 auto 0 0;
   --zn-icon-size: 20px;
@@ -94,6 +100,10 @@
   --zn-color-on-warning: 255, 255, 255;
   --zn-color-on-error: 255, 255, 255;
   --zn-color-on-accent: 255, 255, 255;
+  --zn-color-on-ai: 255, 255, 255;
+
+  // AI-generated content only (badges, alerts, buttons); never a general accent.
+  --zn-color-ai: 117, 87, 245;
 
   // Brand Colors
   --zn-red: 237, 84, 109;
@@ -129,7 +139,7 @@
 }
 
 .zn-muted {
-  color: var(--zn-color-muted-text);
+  color: rgb(var(--zn-color-muted-text));
 }
 
 .zn-size-xs {
@@ -322,173 +332,3 @@ ul.disc {
 ul.square {
   list-style-type: square;
 }
-
-// Aura — soft, light-based theme with a pastel violet identity.
-// Appended last so it wins source-order over the :root/light defaults on the
-// document element (which carries the `t="aura"` attribute *and* matches :root).
-// Only the source colour tokens and the theme-specific leaf tokens are set;
-// derived tokens (--zn-body, --zn-text, --zn-panel ...) reference these via
-// var() and follow automatically.
-//
-// Aura ships both palettes: this block is the light one, and the
-// `html[t="aura"][m="dark"]` block below re-points every token in it for dark. The
-// two must stay token-for-token in step — a token set here and missed there
-// leaks a light value into dark mode, because this block is mode-agnostic and
-// so applies in both.
-html[t="aura"], body[t="aura"], html.theme-aura, body.theme-aura {
-  --zn-backdrop-color: rgba(30, 27, 60, 0.45);
-
-  --zn-color-text: 42, 32, 89;
-  --zn-color-muted-text: 128, 118, 158;
-
-  --zn-color-base: 255, 255, 255;
-  --zn-color-body: 250, 248, 255;
-  --zn-color-navigation: var(--zn-color-base);
-  --zn-color-navigation-hightlight: 245, 242, 255;
-  --zn-color-border: 228, 222, 246;
-  --zn-color-border-active: 214, 206, 240;
-  --zn-color-tab: 240, 235, 252;
-  --zn-color-panel: 255, 255, 255;
-
-  --zn-color-primary: 139, 110, 245;
-  --zn-color-info: 53, 104, 195;
-  --zn-color-success: 98, 177, 121;
-  --zn-color-warning: 241, 168, 80;
-  --zn-color-error: 236, 68, 91;
-  --zn-color-disabled: 181, 181, 181;
-
-  // Theme-specific leaf tokens (light/dark declare these in their own blocks,
-  // so aura must supply its own — they are not inherited from :root).
-  --zn-panel-opacity: 1;
-  --zn-shadow: 232, 226, 250;
-  --zn-panel-secondary: 248 246 255;
-  --zn-panel-highlight: 245, 242, 255;
-  --zn-panel-highlight-opacity: 1;
-  --zn-input-bg-accent: 240, 236, 252;
-  --zn-bright-bg: 255, 255, 255;
-  --zn-light-text: 130, 120, 160;
-  --zn-dark-text: 60, 44, 110;
-  --zn-purple-text: 124, 92, 246;
-  --zn-accent: 200, 130, 230;
-
-  // Frosted-glass inactive tabs for the zn-page tab navbar (consumed in
-  // components/navbar/navbar.scss, scoped there to :host-context(zn-page)).
-  //
-  // The translucent background carries the frosted look on its own. Do NOT put a
-  // backdrop-filter here: navbar.scss applies it per inactive tab, so each tab
-  // becomes its own render surface and re-samples + re-blurs its backdrop every
-  // frame. On a page with a normal number of tabs that alone pushed GPU draw to
-  // ~8ms/frame and dropped frames on every scroll.
-  --navbar-page-inactive-tab-background: rgba(255, 255, 255, 0.5);
-  --navbar-page-inactive-tab-filter: none;
-
-  // Aurora gradient behind the zn-page header, plus the weight of the wave
-  // artwork layered on top of it (components/page/page.scss). Held still — see
-  // the PERF note there before reintroducing any drift.
-  --zn-page-header-aurora: linear-gradient(225deg, rgba(233, 227, 255, 1) 0%, rgba(214, 246, 245, 1) 40%, rgba(233, 227, 255, 1) 100%), linear-gradient(180deg, rgba(129, 153, 217, 0) 0%, rgba(0, 0, 0, 1) 100%);
-  --zn-page-header-wave-opacity: 0.04;
-
-  .zn-primary {
-    color: rgb(var(--zn-color-primary));
-  }
-}
-
-// Aura dark — the same violet identity drawn over the dark primitives, on a
-// deep navy canvas rather than a bespoke hue.
-//
-// The canvas colour is deliberate: `--zn-color-body` is the exact navy the
-// rubix shell chrome paints itself (`--rx-shell-header-bg: 19, 29, 45`, set in
-// the aura-dark block of static/src/scss/shell/_header.scss — deeper than the
-// 40, 55, 80 aura light mode uses), so the top bar, the app navigation and the
-// page body read as one continuous surface with panels lifted above it.
-//
-// Specificity note: the selectors are deliberately `html[…]`/`body[…]` (a type
-// selector plus attributes) rather than `:root[…]`. That keeps the ordering the
-// bare selectors used to have: `html[t="aura"][m="dark"]` (0,2,1) outranks both
-// `:root[m="dark"]` (0,2,0) from `#{modes.$dark}` and the mode-agnostic
-// `html[t="aura"]` (0,1,1), which in turn still loses to `:root[m="dark"]` the
-// way `[t="aura"]` (0,1,0) did. `:root[t="aura"]` would have been (0,2,0) and
-// silently started beating the dark block. This one stays last in the file.
-html[t="aura"][m="dark"], body[t="aura"][m="dark"],
-html.theme-aura.theme-dark, body.theme-aura.theme-dark {
-  --zn-backdrop-color: rgba(8, 12, 24, 0.65);
-
-  --zn-color-text: 226, 228, 242;
-  --zn-color-muted-text: 154, 163, 190;
-
-  --zn-color-base: 30, 41, 61;
-  // Matches --rx-shell-header-bg in the rubix shell (its aura-dark block in
-  // static/src/scss/shell/_header.scss) — change both together.
-  --zn-color-body: 19, 29, 45;
-  --zn-color-navigation: var(--zn-color-base);
-  --zn-color-navigation-hightlight: 35, 47, 70;
-  --zn-color-border: 64, 82, 113;
-  --zn-color-border-active: 92, 111, 145;
-  --zn-color-tab: 33, 45, 66;
-  // A few points of lift reads as an outline rather than a surface, so the
-  // panel steps well clear of the body. #223555 — the top of the ladder:
-  // body 19,29,45 -> page canvas 31,45,70 -> panel 34,53,85.
-  --zn-color-panel: 34, 53, 85;
-
-  --zn-color-primary: 163, 140, 250;
-  --zn-color-info: 96, 148, 232;
-  --zn-color-success: 116, 199, 140;
-  --zn-color-warning: 245, 183, 105;
-  --zn-color-error: 244, 106, 126;
-  --zn-color-disabled: 118, 130, 152;
-
-  // Theme-specific leaf tokens — the mirror of the light block above.
-  --zn-panel-opacity: 1;
-  --zn-shadow: 12, 18, 32;
-  --zn-panel-secondary: 46 61 88;
-  --zn-panel-highlight: 66, 86, 120;
-  // NOT the classic dark 0.1: on a lifted palette a 10% wash leaves hover and
-  // selected rows indistinguishable from the panel they sit on.
-  --zn-panel-highlight-opacity: 1;
-  --zn-input-bg-accent: 34, 46, 68;
-  --zn-bright-bg: 52, 69, 99;
-  --zn-light-text: 168, 176, 201;
-  --zn-dark-text: 226, 228, 242;
-  --zn-purple-text: 178, 158, 252;
-  --zn-accent: 96, 196, 220;
-
-  // #{modes.$dark} hardcodes the base dark theme's own accent here; aura owns
-  // its accent in both modes, so re-point both this and .zn-primary below.
-  //
-  // Deliberately NOT var(--zn-color-primary): aura dark's *interactive* accent is
-  // a cyan, while its identity accent stays violet. --zn-primary is what buttons,
-  // the navbar, tabs, toggles, radios, progress bars, steppers and pagination
-  // read; --zn-color-primary (still violet above) is what inputs, checkboxes,
-  // selects, dialogs and the .zn-primary text utility read.
-  --zn-primary: 126, 238, 255;
-  // A fill this light is unreadable under the default white ink (1.35:1), so the
-  // paired ink drops to the shell navy — 12.6:1 on the cyan. zn-button declares
-  // the pair as --btn-color / --btn-ink for exactly this case.
-  --zn-color-on-primary: 19, 29, 45;
-
-  --base: 0, 0, 0;
-  --inverse-base: 255, 255, 255;
-
-  // Frosted-glass inactive tabs — see the light block for why there is no
-  // backdrop-filter. Inverted against the light block: on the deep aurora an
-  // inactive tab recedes by being *darker* than the gradient, not lighter.
-  --navbar-page-inactive-tab-background: rgba(0, 0, 0, 0.30);
-  --navbar-page-inactive-tab-filter: none;
-
-  // The page canvas sits a step above the navy shell surface, so the page reads
-  // as a sheet laid on the chrome rather than a hole in it (components/page/page.scss).
-  --zn-page-canvas: 31, 45, 70;
-
-  // The dark aurora: the light gradient's violet -> teal -> violet sweep taken
-  // down to full-strength indigo/teal so the page title's light ink reads on it.
-  --zn-page-header-aurora: linear-gradient(225deg, rgb(76 42 202) 0%, rgb(0 100 150) 40%, rgb(56 40 115) 100%), linear-gradient(180deg, rgb(31 50 103 / 0%) 0%, rgb(0, 0, 0) 100%);
-  // The violet wave artwork lifts rather than darkens here, so it can carry
-  // more weight than the 0.04 the pale light gradient tolerates.
-  --zn-page-header-wave-opacity: 0.10;
-
-  .zn-primary {
-    // !important to beat #{modes.$dark}'s own `.zn-primary { ... !important }`,
-    // which ties on specificity.
-    color: rgb(var(--zn-color-primary)) !important;
-  }
-}

package/scss/boot.scss

@@ -25,3 +25,17 @@
     opacity: 1;
   }
 }
+
+// A pull-tab navbar hangs over the bottom of the pane above it, so the scroller there can scroll its end clear of the
+// tabs. 37px is an icon-only pull-tab strip, the taller of the two kinds; hide-one hides a lone tab with an inline style.
+zn-split-pane[vertical]:has(> [slot="secondary"] zn-navbar[hover]:not([style*="display: none"])) > [slot="primary"] {
+  --zn-pane-end-inset: 37px;
+
+  // A tab's content can overflow its panel, so the room goes after the content; a scroll container or app container
+  // leaves its own
+  zn-tab:not(:has(zn-scroll-container, .app-container))::after {
+    content: "";
+    display: block;
+    height: var(--zn-pane-end-inset);
+  }
+}