@nonoun/native-dashboard 0.4.5 → 0.4.8

package/dist/native-dashboard.css

@@ -33,7 +33,7 @@
 
   :where(native-app):not([data-ready])[collapsed]::before {
     content: '';
-    width: 48px;
+    width: var(--n-sidebar-collapsed-width, 48px);
     flex-shrink: 0;
     background: var(--n-body);
     border-right: 1px solid var(--n-border-muted);
@@ -85,8 +85,8 @@
      in this file and in child component CSS. */
 
   :where(native-app)[collapsed] > :where([slot="sidebar"]) {
-    width: 48px;
-    min-width: 48px;
+    width: var(--n-sidebar-collapsed-width, 48px);
+    min-width: var(--n-sidebar-collapsed-width, 48px);
   }
 
   /* ── Resize Handle ── */
@@ -149,8 +149,21 @@
     grid-template-columns: 1fr auto;
   }
 
+  /* Leading cell — flex container for toggle button + breadcrumb */
+  :where(native-app) > :where(:not([slot])) > :where(nav) > :first-child {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--n-space) * 2);
+  }
+
+  /* Label area — prevent overflow */
+  :where(native-app) > :where(:not([slot])) > :where(nav) > :nth-child(2) {
+    min-width: 0;
+  }
+
   /* Trailing actions in breadcrumb */
-  :where(native-app) > :where(:not([slot])) > :where(nav) > :where(aside) {
+  :where(native-app) > :where(:not([slot])) > :where(nav) > :where(aside),
+  :where(native-app) > :where(:not([slot])) > :where(nav) > :where([slot="trailing"]) {
     display: flex;
     align-items: center;
     gap: calc(var(--n-space) * 2);
@@ -184,6 +197,14 @@
   }
 
   /* Semantic sub-containers inside main */
+
+  :where(native-app) :where(section.content) > :where(main) > :where(header),
+  :where(native-app) :where(section.content) > :where(main) > :where(section),
+  :where(native-app) :where(section.content) > :where(main) > :where(footer) {
+    padding: var(--n-dashboard-panel-content-padding, 0);
+    box-sizing: border-box;
+  }
+
   :where(native-app) :where(section.content) > :where(main):has(> header, > footer) {
     overflow: hidden;
   }
@@ -195,6 +216,11 @@
     scrollbar-width: none;
     display: flex;
     flex-direction: column;
+    gap: var(--n-dashboard-panel-content-gap, 0);
+  }
+
+  :where(native-app) :where(section.content) > :where(main)[show-scrollbar] > :where(section) {
+    scrollbar-width: thin;
   }
 
   :where(native-app) :where(section.content) > :where(main) > :where(header) {
@@ -210,7 +236,7 @@
     background: var(--n-ground);
   }
 
-  /* Content max-width centering (same as app-panel.css semantic selectors) */
+  /* Content max-width centering (same as dashboard-panel.css semantic selectors) */
   :where(native-app) :where(section.content) > :where(main) > :where(header) > *,
   :where(native-app) :where(section.content) > :where(main) > :where(section) > *,
   :where(native-app) :where(section.content) > :where(main) > :where(footer) > * {
@@ -219,6 +245,62 @@
     margin-inline: auto;
   }
 
+  /* Aside panel — semantic equivalent of n-dashboard-panel[aside] */
+  :where(native-app) :where(section.content) > :where(aside) {
+    --n-ground: var(--n-panel);
+
+    position: relative;
+    width: 0;
+    min-width: 0;
+    max-width: 480px;
+    overflow: clip;
+    padding: 0;
+    flex-shrink: 0;
+    background: var(--n-ground);
+    border-radius: var(--n-radius);
+    transition:
+      width var(--n-duration) var(--n-easing),
+      min-width var(--n-duration) var(--n-easing),
+      padding var(--n-duration) var(--n-easing),
+      margin var(--n-duration) var(--n-easing);
+  }
+
+  :where(native-app) :where(section.content) > :where(aside)[open] {
+    width: var(--n-aside-width, 360px);
+    min-width: var(--n-aside-min-width, 280px);
+    margin-inline-start: calc(var(--n-space-k) * var(--n-space));
+    overflow-y: auto;
+    padding: calc(var(--n-space-k) * var(--n-space));
+  }
+
+  /* WHY: When n-chat manages its own sub-container padding and scroll,
+     the layout container delegates — no own padding, no own scroll. */
+  :where(native-app) :where(section.content) > :where(aside)[open]:has(> n-chat) {
+    padding: 0;
+    overflow: visible;
+  }
+
+  /* WHY: Disable width transition while dragging — it fights the pointer. */
+  :where(native-app) :where(section.content) > :where(aside)[resizing] {
+    transition: none;
+  }
+
+  /* Aside resize handle */
+  :where(native-app) :where(section.content) > :where(aside) :where(.layout-resize-handle) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 4px;
+    height: 100%;
+    cursor: col-resize;
+    z-index: 1;
+  }
+
+  :where(native-app) :where(section.content) > :where(aside) :where(.layout-resize-handle):hover,
+  :where(native-app) :where(section.content) > :where(aside)[resizing] :where(.layout-resize-handle) {
+    background: var(--n-border-muted);
+  }
+
   /* Collapsed padding — semantic selectors */
   :where(native-app)[collapsed] :where(section.content) {
     padding-inline-start: 0;
@@ -398,7 +480,7 @@
     margin-block: var(--n-popover-viewport-margin);
     margin-inline: 0;
     margin-inline-start: var(--n-popover-gap);
-    min-width: 200px;
+    min-width: var(--n-sidebar-popover-min-width, 200px);
     max-height: var(--n-popover-max-height);
     overflow-y: auto;
   }
@@ -541,7 +623,7 @@
   }
 
   /* Badge in nav item — push to trailing edge */
-  :where(n-sidebar-nav-item) > :where(n-badge) {
+  :where(n-sidebar-nav-item) > :where(.badge) {
     margin-inline-start: auto;
     flex-shrink: 0;
   }
@@ -754,7 +836,7 @@
     margin-block: var(--n-popover-viewport-margin);
     margin-inline: 0;
     margin-inline-start: var(--n-popover-gap);
-    min-width: 200px;
+    min-width: var(--n-sidebar-popover-min-width, 200px);
     max-height: var(--n-popover-max-height);
     overflow-y: auto;
   }
@@ -1038,20 +1120,20 @@
   /* WHY: When n-body is present, delegate overflow to it so
      header/footer stay fixed while body scrolls. */
 
-  :where(n-dashboard-panel):has(> n-body) {
+  :where(n-dashboard-panel):has(> .body) {
     overflow: hidden;
     padding: 0;
   }
-  :where(n-dashboard-panel) > :where(n-body) {
+  :where(n-dashboard-panel) > :where(.body) {
     overflow-y: auto;
     scrollbar-width: none;
   }
 
-  :where(n-dashboard-panel) > :where(n-header) {
+  :where(n-dashboard-panel) > :where(header) {
     border-bottom: 1px solid var(--n-border-muted);
   }
 
-  :where(n-dashboard-panel) > :where(n-footer) {
+  :where(n-dashboard-panel) > :where(footer) {
     border-top: 1px solid var(--n-border-muted);
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nonoun/native-dashboard",
-  "version": "0.4.5",
+  "version": "0.4.8",
   "description": "Dashboard layout and navigation components for @nonoun/native-ui",
   "license": "MIT",
   "type": "module",