@nonoun/native-dashboard 0.4.2 → 0.4.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/native-dashboard.css +44 -18
- package/dist/native-dashboard.js +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
@layer ui {
|
|
2
2
|
|
|
3
|
-
:where(native-
|
|
3
|
+
:where(native-app):not(:defined),
|
|
4
4
|
:where(n-sidebar-item):not(:defined),
|
|
5
5
|
:where(n-sidebar-nav):not(:defined),
|
|
6
6
|
:where(n-sidebar-group):not(:defined),
|
|
@@ -8,14 +8,14 @@
|
|
|
8
8
|
:where(n-sidebar-nav-item):not(:defined) { visibility: hidden; }
|
|
9
9
|
|
|
10
10
|
/* ╭──────────────────────────────────────────────────────────╮
|
|
11
|
-
│ native-
|
|
11
|
+
│ native-app │
|
|
12
12
|
│ Full-page layout: collapsible/resizable sidebar aside │
|
|
13
13
|
│ + content column (breadcrumb, canvas, body, chat). │
|
|
14
14
|
╰──────────────────────────────────────────────────────────╯ */
|
|
15
15
|
|
|
16
16
|
/* ── Outer Layout ── */
|
|
17
17
|
|
|
18
|
-
:where(native-
|
|
18
|
+
:where(native-app) {
|
|
19
19
|
display: flex;
|
|
20
20
|
height: 100dvh;
|
|
21
21
|
}
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
/* WHY: Reserve sidebar width before JS builds the DOM — prevents layout shift.
|
|
24
24
|
Collapsed state is read synchronously in the constructor so CSS matches immediately.
|
|
25
25
|
Replaced by the real aside once [data-ready] is set. */
|
|
26
|
-
:where(native-
|
|
26
|
+
:where(native-app):not([data-ready]):not([collapsed])::before {
|
|
27
27
|
content: '';
|
|
28
28
|
width: var(--n-sidebar-width);
|
|
29
29
|
flex-shrink: 0;
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
border-right: 1px solid var(--n-border-muted);
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
:where(native-
|
|
34
|
+
:where(native-app):not([data-ready])[collapsed]::before {
|
|
35
35
|
content: '';
|
|
36
36
|
width: 48px;
|
|
37
37
|
flex-shrink: 0;
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
/* ── Content Column ── */
|
|
43
43
|
/* WHY: Everything except the aside forms a flex column. */
|
|
44
44
|
|
|
45
|
-
:where(native-
|
|
45
|
+
:where(native-app) > :where(:not([slot])) {
|
|
46
46
|
flex: 1 1 0%;
|
|
47
47
|
min-width: 0;
|
|
48
48
|
min-height: 0;
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
ensures content behind the sidebar never bleeds through. The aside is also
|
|
57
57
|
the containing block for absolute header/footer overlays. */
|
|
58
58
|
|
|
59
|
-
:where(native-
|
|
59
|
+
:where(native-app) > :where([slot="sidebar"]) {
|
|
60
60
|
--n-sidebar-header-height: 0px;
|
|
61
61
|
--n-sidebar-footer-height: 0px;
|
|
62
62
|
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
}
|
|
76
76
|
|
|
77
77
|
/* WHY: Disable width transition while dragging — it fights the pointer. */
|
|
78
|
-
:where(native-
|
|
78
|
+
:where(native-app) > :where([slot="sidebar"][resizing]) {
|
|
79
79
|
transition: none;
|
|
80
80
|
}
|
|
81
81
|
|
|
@@ -84,14 +84,14 @@
|
|
|
84
84
|
[collapsed] drives the aside to 48px which triggers @container sidebar queries
|
|
85
85
|
in this file and in child component CSS. */
|
|
86
86
|
|
|
87
|
-
:where(native-
|
|
87
|
+
:where(native-app)[collapsed] > :where([slot="sidebar"]) {
|
|
88
88
|
width: 48px;
|
|
89
89
|
min-width: 48px;
|
|
90
90
|
}
|
|
91
91
|
|
|
92
92
|
/* ── Resize Handle ── */
|
|
93
93
|
|
|
94
|
-
:where(native-
|
|
94
|
+
:where(native-app) :where(.layout-resize-handle) {
|
|
95
95
|
position: absolute;
|
|
96
96
|
top: 0;
|
|
97
97
|
right: 0;
|
|
@@ -101,18 +101,18 @@
|
|
|
101
101
|
z-index: 1;
|
|
102
102
|
}
|
|
103
103
|
|
|
104
|
-
:where(native-
|
|
105
|
-
:where(native-
|
|
104
|
+
:where(native-app) :where(.layout-resize-handle):hover,
|
|
105
|
+
:where(native-app) > :where([slot="sidebar"][resizing]) :where(.layout-resize-handle) {
|
|
106
106
|
background: var(--n-border-muted);
|
|
107
107
|
}
|
|
108
108
|
|
|
109
109
|
/* WHY: When collapsed to icon rail, the sidebar edge meets content — drop left padding. */
|
|
110
110
|
|
|
111
|
-
:where(native-
|
|
111
|
+
:where(native-app)[collapsed] :where(n-dashboard-canvas) {
|
|
112
112
|
padding-inline-start: 0;
|
|
113
113
|
}
|
|
114
114
|
|
|
115
|
-
:where(native-
|
|
115
|
+
:where(native-app)[collapsed] :where(n-dashboard-breadcrumb) {
|
|
116
116
|
padding-inline-start: 0;
|
|
117
117
|
}
|
|
118
118
|
|
|
@@ -538,11 +538,11 @@
|
|
|
538
538
|
width: var(--n-icon-size);
|
|
539
539
|
height: var(--n-icon-size);
|
|
540
540
|
|
|
541
|
-
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='
|
|
541
|
+
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z' fill='currentColor'/%3E%3C/svg%3E");
|
|
542
542
|
mask-size: contain;
|
|
543
543
|
mask-repeat: no-repeat;
|
|
544
544
|
mask-position: center;
|
|
545
|
-
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='
|
|
545
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z' fill='currentColor'/%3E%3C/svg%3E");
|
|
546
546
|
-webkit-mask-size: contain;
|
|
547
547
|
-webkit-mask-repeat: no-repeat;
|
|
548
548
|
-webkit-mask-position: center;
|
|
@@ -553,9 +553,9 @@
|
|
|
553
553
|
transform var(--n-duration) var(--n-easing);
|
|
554
554
|
}
|
|
555
555
|
|
|
556
|
-
/*
|
|
556
|
+
/* Caret rotates 90° clockwise when open */
|
|
557
557
|
:where(n-sidebar-group) > :where(details[open]) > :where(summary)::after {
|
|
558
|
-
transform: rotate(
|
|
558
|
+
transform: rotate(90deg);
|
|
559
559
|
}
|
|
560
560
|
|
|
561
561
|
/* ── Selected group — has a child with aria-current ── */
|
|
@@ -655,10 +655,36 @@
|
|
|
655
655
|
position-area: inline-end span-block-end;
|
|
656
656
|
}
|
|
657
657
|
|
|
658
|
+
/* ── Sidebar Section Label ── */
|
|
659
|
+
/* WHY: Standalone uppercase category header between sidebar groups.
|
|
660
|
+
Not collapsible (no <details>/<summary>). Hides in collapsed icon rail. */
|
|
661
|
+
|
|
662
|
+
:where(n-sidebar-section-label) {
|
|
663
|
+
display: block;
|
|
664
|
+
padding-block: var(--n-space);
|
|
665
|
+
padding-inline: calc(var(--n-space-k) * var(--n-space));
|
|
666
|
+
font-size: calc(var(--n-font-size) * 0.75);
|
|
667
|
+
font-weight: 600;
|
|
668
|
+
letter-spacing: 0.06em;
|
|
669
|
+
text-transform: uppercase;
|
|
670
|
+
color: var(--n-ink-muted);
|
|
671
|
+
user-select: none;
|
|
672
|
+
cursor: default;
|
|
673
|
+
}
|
|
674
|
+
|
|
675
|
+
:where(n-sidebar-section-label):not(:first-child) {
|
|
676
|
+
margin-block-start: calc(var(--n-space) * 4);
|
|
677
|
+
}
|
|
678
|
+
|
|
658
679
|
/* ── Container Query: Collapsed Sidebar (nav) ── */
|
|
659
680
|
|
|
660
681
|
@container sidebar (max-width: 80px) {
|
|
661
682
|
|
|
683
|
+
/* Section labels hide in collapsed icon rail */
|
|
684
|
+
:where(n-sidebar-section-label) {
|
|
685
|
+
display: none;
|
|
686
|
+
}
|
|
687
|
+
|
|
662
688
|
/* Nav items hide entirely — only group headers (with icons) remain. */
|
|
663
689
|
:where(n-sidebar-nav-item) {
|
|
664
690
|
display: none;
|
package/dist/native-dashboard.js
CHANGED
|
@@ -316,5 +316,5 @@ var f = class extends r {
|
|
|
316
316
|
this.#t = !1, this.#e?.syncPopover(!1);
|
|
317
317
|
};
|
|
318
318
|
};
|
|
319
|
-
s("n-sidebar-nav-item", p), s("n-sidebar-group-header", h), s("n-sidebar-group", m), s("n-sidebar-nav", f), s("n-sidebar-item", _), s("native-
|
|
319
|
+
s("n-sidebar-nav-item", p), s("n-sidebar-group-header", h), s("n-sidebar-group", m), s("n-sidebar-nav", f), s("n-sidebar-item", _), s("native-app", g), s("n-listbox", t), s("n-option", n);
|
|
320
320
|
export { g as NSidebar, m as NSidebarGroup, h as NSidebarGroupHeader, _ as NSidebarItem, f as NSidebarNav, p as NSidebarNavItem };
|