@nldd/design-system 0.8.84 → 0.8.86
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/custom-elements.json +177 -19
- package/dist/components/actions/button/button.styles.d.ts.map +1 -1
- package/dist/components/actions/button/button.styles.js +11 -0
- package/dist/components/actions/button/button.styles.js.map +1 -1
- package/dist/components/components.js +428 -131
- package/dist/components/content/icon/icon-gallery-status.d.ts.map +1 -1
- package/dist/components/content/icon/icon-gallery-status.js +4 -4
- package/dist/components/content/icon/icon-gallery-status.js.map +1 -1
- package/dist/components/content/icon/icon-registry.d.ts.map +1 -1
- package/dist/components/content/icon/icon-registry.js +3 -1
- package/dist/components/content/icon/icon-registry.js.map +1 -1
- package/dist/components/content/icon/icon.d.ts +13 -0
- package/dist/components/content/icon/icon.d.ts.map +1 -1
- package/dist/components/content/icon/icon.js +16 -0
- package/dist/components/content/icon/icon.js.map +1 -1
- package/dist/components/content/icon/icon.styles.d.ts.map +1 -1
- package/dist/components/content/icon/icon.styles.js +29 -1
- package/dist/components/content/icon/icon.styles.js.map +1 -1
- package/dist/components/content/text/text.d.ts +6 -0
- package/dist/components/content/text/text.d.ts.map +1 -1
- package/dist/components/content/text/text.js +6 -0
- package/dist/components/content/text/text.js.map +1 -1
- package/dist/components/content/text/text.styles.d.ts.map +1 -1
- package/dist/components/content/text/text.styles.js +2 -0
- package/dist/components/content/text/text.styles.js.map +1 -1
- package/dist/components/{icon-VTLbdcvZ.js → icon-Cd4BloIM.js} +37 -2
- package/dist/components/{icon-button-Sne5TwRG.js → icon-button-CXN0yaVx.js} +1 -1
- package/dist/components/layout/collection/collection.d.ts +15 -8
- package/dist/components/layout/collection/collection.d.ts.map +1 -1
- package/dist/components/layout/collection/collection.js +38 -13
- package/dist/components/layout/collection/collection.js.map +1 -1
- package/dist/components/layout/collection/collection.styles.d.ts.map +1 -1
- package/dist/components/layout/collection/collection.styles.js +36 -23
- package/dist/components/layout/collection/collection.styles.js.map +1 -1
- package/dist/components/layout/container/container.d.ts +11 -3
- package/dist/components/layout/container/container.d.ts.map +1 -1
- package/dist/components/layout/container/container.js +30 -17
- package/dist/components/layout/container/container.js.map +1 -1
- package/dist/components/layout/container/container.styles.d.ts.map +1 -1
- package/dist/components/layout/container/container.styles.js +19 -21
- package/dist/components/layout/container/container.styles.js.map +1 -1
- package/dist/components/layout/page/page.d.ts +23 -2
- package/dist/components/layout/page/page.d.ts.map +1 -1
- package/dist/components/layout/page/page.js +56 -2
- package/dist/components/layout/page/page.js.map +1 -1
- package/dist/components/layout/page/page.styles.d.ts.map +1 -1
- package/dist/components/layout/page/page.styles.js +33 -8
- package/dist/components/layout/page/page.styles.js.map +1 -1
- package/dist/components/layout/page-sections/sidebar-section/sidebar-section.styles.d.ts.map +1 -1
- package/dist/components/layout/page-sections/sidebar-section/sidebar-section.styles.js +7 -5
- package/dist/components/layout/page-sections/sidebar-section/sidebar-section.styles.js.map +1 -1
- package/dist/components/layout/sheet/sheet.styles.js +2 -2
- package/dist/components/layout/split-views/bar-split-view/bar-split-view.d.ts +1 -1
- package/dist/components/layout/split-views/bar-split-view/bar-split-view.d.ts.map +1 -1
- package/dist/components/layout/split-views/bar-split-view/bar-split-view.js +13 -13
- package/dist/components/layout/split-views/bar-split-view/bar-split-view.js.map +1 -1
- package/dist/components/layout/split-views/bar-split-view/bar-split-view.styles.js +1 -1
- package/dist/components/lists-and-tables/list/list.d.ts +13 -3
- package/dist/components/lists-and-tables/list/list.d.ts.map +1 -1
- package/dist/components/lists-and-tables/list/list.js +39 -3
- package/dist/components/lists-and-tables/list/list.js.map +1 -1
- package/dist/components/lists-and-tables/list/list.styles.d.ts.map +1 -1
- package/dist/components/lists-and-tables/list/list.styles.js +8 -1
- package/dist/components/lists-and-tables/list/list.styles.js.map +1 -1
- package/dist/components/lists-and-tables/list/list.template.d.ts +4 -1
- package/dist/components/lists-and-tables/list/list.template.d.ts.map +1 -1
- package/dist/components/lists-and-tables/list/list.template.js +31 -12
- package/dist/components/lists-and-tables/list/list.template.js.map +1 -1
- package/dist/components/lists-and-tables/list-item/list-item.d.ts +8 -3
- package/dist/components/lists-and-tables/list-item/list-item.d.ts.map +1 -1
- package/dist/components/lists-and-tables/list-item/list-item.js +35 -9
- package/dist/components/lists-and-tables/list-item/list-item.js.map +1 -1
- package/dist/components/lists-and-tables/list-item/list-item.template.d.ts +1 -1
- package/dist/components/lists-and-tables/list-item/list-item.template.d.ts.map +1 -1
- package/dist/components/lists-and-tables/list-item/list-item.template.js +18 -1
- package/dist/components/lists-and-tables/list-item/list-item.template.js.map +1 -1
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.d.ts.map +1 -1
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.js +50 -12
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.js.map +1 -1
- package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.js +3 -3
- package/dist/components/status-and-feedback/progress-circle/progress-circle.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/progress-circle/progress-circle.styles.js +15 -0
- package/dist/components/status-and-feedback/progress-circle/progress-circle.styles.js.map +1 -1
- package/dist/components/status-and-feedback/progress-circle/progress-circle.template.d.ts.map +1 -1
- package/dist/components/status-and-feedback/progress-circle/progress-circle.template.js +4 -3
- package/dist/components/status-and-feedback/progress-circle/progress-circle.template.js.map +1 -1
- package/dist/components/visibility-mixin-BU1vIMW7.js +161 -0
- package/dist/css/variables.css +5 -0
- package/dist/favicon.svg +4 -0
- package/dist/nldd.min.js +823 -649
- package/dist/touch-icon.png +0 -0
- package/dist/types/vue.d.ts +27 -11
- package/dist/utilities/spacing-scale.d.ts +26 -0
- package/dist/utilities/spacing-scale.d.ts.map +1 -0
- package/dist/utilities/spacing-scale.js +54 -0
- package/dist/utilities/spacing-scale.js.map +1 -0
- package/dist/utilities/visibility-mixin.d.ts +11 -8
- package/dist/utilities/visibility-mixin.d.ts.map +1 -1
- package/dist/utilities/visibility-mixin.js +58 -45
- package/dist/utilities/visibility-mixin.js.map +1 -1
- package/dist/utilities/visibility-mixin.styles.d.ts +14 -0
- package/dist/utilities/visibility-mixin.styles.d.ts.map +1 -0
- package/dist/utilities/visibility-mixin.styles.js +52 -0
- package/dist/utilities/visibility-mixin.styles.js.map +1 -0
- package/package.json +5 -2
- package/dist/components/visibility-mixin-vbfhyo7f.js +0 -104
|
@@ -15,10 +15,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
15
15
|
*
|
|
16
16
|
* In root-scroll mode (--context-scroll-mode: root, derived upstream by
|
|
17
17
|
* nldd-app-view) the page stops owning a scroller: the document scrolls and the
|
|
18
|
-
* sticky header/footer
|
|
19
|
-
* --context-
|
|
18
|
+
* sticky header/footer stick against the document, offset by
|
|
19
|
+
* --context-inset-top/bottom. The mode is read on connect/resize and reflected
|
|
20
20
|
* to [data-scroll] so the CSS can branch.
|
|
21
21
|
*
|
|
22
|
+
* The page passes those insets on to its own content, with its sticky header
|
|
23
|
+
* and footer added: anything sticky inside (an nldd-sidebar-section, a sticky
|
|
24
|
+
* table head) reads --context-inset-top / --context-inset-bottom and clears
|
|
25
|
+
* every bar above and below it without being told a number. The heights are
|
|
26
|
+
* measured, because a top title bar shrinks as you scroll past its anchor. While
|
|
27
|
+
* the page owns the scroller, only its own bars count: the chrome above the page
|
|
28
|
+
* sits outside that scroller and does not push sticky content down.
|
|
29
|
+
*
|
|
22
30
|
* @element nldd-page
|
|
23
31
|
*
|
|
24
32
|
* @attr {boolean} sticky-header - Sticky header
|
|
@@ -45,6 +53,7 @@ let NLDDPage = class NLDDPage extends LitElement {
|
|
|
45
53
|
this._scrollTarget = null;
|
|
46
54
|
this._scrollProvider = null;
|
|
47
55
|
this._headerObserver = null;
|
|
56
|
+
this._insetObserver = null;
|
|
48
57
|
this._mainSlot = null;
|
|
49
58
|
this._resizeRaf = 0;
|
|
50
59
|
this._onResize = () => {
|
|
@@ -100,6 +109,9 @@ let NLDDPage = class NLDDPage extends LitElement {
|
|
|
100
109
|
get _scrollEl() {
|
|
101
110
|
return this.shadowRoot?.querySelector('.page__scroll') ?? null;
|
|
102
111
|
}
|
|
112
|
+
get _footerEl() {
|
|
113
|
+
return this.shadowRoot?.querySelector('.page__footer') ?? null;
|
|
114
|
+
}
|
|
103
115
|
connectedCallback() {
|
|
104
116
|
super.connectedCallback();
|
|
105
117
|
// Set container-type/name as inline style on the host element. Doing
|
|
@@ -139,6 +151,7 @@ let NLDDPage = class NLDDPage extends LitElement {
|
|
|
139
151
|
cancelAnimationFrame(this._resizeRaf);
|
|
140
152
|
this._teardownScrollListener();
|
|
141
153
|
this._teardownHeaderObserver();
|
|
154
|
+
this._teardownInsetObserver();
|
|
142
155
|
this._teardownMainSlotListener();
|
|
143
156
|
}
|
|
144
157
|
firstUpdated() {
|
|
@@ -185,8 +198,49 @@ let NLDDPage = class NLDDPage extends LitElement {
|
|
|
185
198
|
// sticky header sits in flow and reserves its own space.
|
|
186
199
|
if (this.stickyHeader && !this._isRoot)
|
|
187
200
|
this._setupHeaderObserver();
|
|
201
|
+
this._setupInsetObserver();
|
|
188
202
|
this._onScroll();
|
|
189
203
|
}
|
|
204
|
+
/**
|
|
205
|
+
* Publishes the page's own sticky bars as insets, so sticky content inside
|
|
206
|
+
* the page knows how far to clear.
|
|
207
|
+
*
|
|
208
|
+
* Measured rather than assumed: a top title bar shrinks as you scroll past
|
|
209
|
+
* its anchor, and a consumer that had written the number down would be wrong
|
|
210
|
+
* from that moment on. A bar that is not sticky scrolls away and adds
|
|
211
|
+
* nothing, so it stays at zero.
|
|
212
|
+
*/
|
|
213
|
+
_setupInsetObserver() {
|
|
214
|
+
this._teardownInsetObserver();
|
|
215
|
+
const header = this._headerEl;
|
|
216
|
+
const footer = this._footerEl;
|
|
217
|
+
if (!header || !footer)
|
|
218
|
+
return;
|
|
219
|
+
const publish = () => {
|
|
220
|
+
this.style.setProperty('--_header-height', `${this.stickyHeader ? header.offsetHeight : 0}px`);
|
|
221
|
+
this.style.setProperty('--_footer-height', `${this.stickyFooter ? footer.offsetHeight : 0}px`);
|
|
222
|
+
// How tall the scroller actually is. Sticky content inside it caps its
|
|
223
|
+
// height on what it can see, and while the page owns the scroller that
|
|
224
|
+
// is not the viewport: the chrome around the page eats into it. In root
|
|
225
|
+
// mode the document scrolls, so nothing is published and 100dvh stands.
|
|
226
|
+
if (this._isRoot)
|
|
227
|
+
this.style.removeProperty('--_scroll-height');
|
|
228
|
+
else
|
|
229
|
+
this.style.setProperty('--_scroll-height', `${this._scrollEl?.clientHeight ?? 0}px`);
|
|
230
|
+
};
|
|
231
|
+
publish();
|
|
232
|
+
this._insetObserver = new ResizeObserver(publish);
|
|
233
|
+
this._insetObserver.observe(header);
|
|
234
|
+
this._insetObserver.observe(footer);
|
|
235
|
+
if (this._scrollEl)
|
|
236
|
+
this._insetObserver.observe(this._scrollEl);
|
|
237
|
+
}
|
|
238
|
+
_teardownInsetObserver() {
|
|
239
|
+
if (this._insetObserver) {
|
|
240
|
+
this._insetObserver.disconnect();
|
|
241
|
+
this._insetObserver = null;
|
|
242
|
+
}
|
|
243
|
+
}
|
|
190
244
|
_setupScrollListener() {
|
|
191
245
|
// Root mode scrolls the document (listen on window); nested mode scrolls
|
|
192
246
|
// the host, or .page__scroll with a sticky header. See scrollEventTarget.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page.js","sourceRoot":"","sources":["../../../../src/components/layout/page/page.ts"],"names":[],"mappings":";;;;;;AAAA
|
|
1
|
+
{"version":3,"file":"page.js","sourceRoot":"","sources":["../../../../src/components/layout/page/page.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/page/page.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"page.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/page/page.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,yBAyNtB,CAAC"}
|
|
@@ -9,6 +9,16 @@ export const pageStyles = css `
|
|
|
9
9
|
|
|
10
10
|
:host {
|
|
11
11
|
--_background-color: var(--context-parent-background-color, var(--semantics-surfaces-base-background-color));
|
|
12
|
+
/* The insets this page arrived with, parked before it adds its own:
|
|
13
|
+
republishing --context-inset-top on the element it reads from would be
|
|
14
|
+
a cycle. */
|
|
15
|
+
--_outer-inset-top: var(--context-inset-top, 0px);
|
|
16
|
+
--_outer-inset-bottom: var(--context-inset-bottom, 0px);
|
|
17
|
+
--_header-height: 0px;
|
|
18
|
+
--_footer-height: 0px;
|
|
19
|
+
/* Set from JS while the page owns the scroller. initial, not a length, so
|
|
20
|
+
the fallback stands when the document scrolls instead. */
|
|
21
|
+
--_scroll-height: initial;
|
|
12
22
|
|
|
13
23
|
display: flex;
|
|
14
24
|
background-color: var(--_background-color);
|
|
@@ -47,9 +57,8 @@ export const pageStyles = css `
|
|
|
47
57
|
|
|
48
58
|
/* Root-scroll mode: the DOCUMENT scrolls (see nldd-app-view), not the page.
|
|
49
59
|
The page stops owning an inner scroll container and its sticky-header/footer
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
by any bars sitting outside the page). The mode is derived upstream and
|
|
60
|
+
stick against the document, offset by the insets above and below
|
|
61
|
+
(--context-inset-top/bottom, published by any bars outside the page). The mode is derived upstream and
|
|
53
62
|
delivered as --context-scroll-mode; nldd-page reflects it to [data-scroll]
|
|
54
63
|
so these (higher-specificity, later) rules win over the nested ones. */
|
|
55
64
|
:host([data-scroll="root"]) {
|
|
@@ -85,7 +94,7 @@ export const pageStyles = css `
|
|
|
85
94
|
:host([data-scroll="root"]) .page {
|
|
86
95
|
overflow: visible;
|
|
87
96
|
flex-shrink: 0;
|
|
88
|
-
min-height: calc(100dvh - var(--context-
|
|
97
|
+
min-height: calc(100dvh - var(--context-inset-top, 0px) - var(--context-inset-bottom, 0px));
|
|
89
98
|
}
|
|
90
99
|
|
|
91
100
|
|
|
@@ -120,7 +129,7 @@ export const pageStyles = css `
|
|
|
120
129
|
opacity: 0;
|
|
121
130
|
background: linear-gradient(to bottom, color-mix(in srgb, var(--_background-color) 95%, transparent), transparent);
|
|
122
131
|
pointer-events: none;
|
|
123
|
-
height: var(--primitives-space-
|
|
132
|
+
height: var(--primitives-space-24);
|
|
124
133
|
transition: opacity var(--primitives-transition-duration-medium) var(--primitives-transition-easing-default);
|
|
125
134
|
}
|
|
126
135
|
|
|
@@ -134,18 +143,34 @@ export const pageStyles = css `
|
|
|
134
143
|
only mattered for the absolute overlay. */
|
|
135
144
|
:host([data-scroll="root"][sticky-header]) .page__header {
|
|
136
145
|
position: sticky;
|
|
137
|
-
top: var(--context-
|
|
146
|
+
top: var(--context-inset-top, 0px);
|
|
138
147
|
left: auto;
|
|
139
148
|
right: auto;
|
|
140
149
|
}
|
|
141
150
|
|
|
151
|
+
/* The page adds its own bars to the insets it inherited, so sticky content
|
|
152
|
+
inside clears them without knowing a number. The header sits outside this
|
|
153
|
+
element and keeps the value without itself in it. */
|
|
142
154
|
.page__scroll {
|
|
155
|
+
--context-inset-top: calc(var(--_outer-inset-top) + var(--_header-height));
|
|
156
|
+
--context-inset-bottom: calc(var(--_outer-inset-bottom) + var(--_footer-height));
|
|
157
|
+
/* The height sticky content can cap itself on. Unset while the document
|
|
158
|
+
scrolls, where the viewport is the whole story. */
|
|
159
|
+
--context-scroller-height: var(--_scroll-height, 100dvh);
|
|
160
|
+
|
|
143
161
|
display: flex;
|
|
144
162
|
min-height: 0;
|
|
145
163
|
flex-direction: column;
|
|
146
164
|
flex-grow: 1;
|
|
147
165
|
}
|
|
148
166
|
|
|
167
|
+
/* Nested scrolling: a sticky child is measured against this element, so the
|
|
168
|
+
bars above the page fall outside it and only its own header counts. */
|
|
169
|
+
:host(:not([data-scroll="root"])) .page__scroll {
|
|
170
|
+
--context-inset-top: var(--_header-height);
|
|
171
|
+
--context-inset-bottom: var(--_footer-height);
|
|
172
|
+
}
|
|
173
|
+
|
|
149
174
|
:host([sticky-header]) .page__scroll {
|
|
150
175
|
overflow-y: auto;
|
|
151
176
|
overflow-x: hidden;
|
|
@@ -184,12 +209,12 @@ export const pageStyles = css `
|
|
|
184
209
|
right: 0;
|
|
185
210
|
background: linear-gradient(to top, color-mix(in srgb, var(--_background-color) 95%, transparent), transparent);
|
|
186
211
|
pointer-events: none;
|
|
187
|
-
height: var(--primitives-space-
|
|
212
|
+
height: var(--primitives-space-24);
|
|
188
213
|
}
|
|
189
214
|
|
|
190
215
|
/* Root-scroll mode: footer sticks to the document bottom, above any bottom bars. */
|
|
191
216
|
:host([data-scroll="root"][sticky-footer]) .page__footer {
|
|
192
|
-
bottom: var(--context-
|
|
217
|
+
bottom: var(--context-inset-bottom, 0px);
|
|
193
218
|
}
|
|
194
219
|
`;
|
|
195
220
|
//# sourceMappingURL=page.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/page/page.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"page.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/page/page.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyN5B,CAAC"}
|
package/dist/components/layout/page-sections/sidebar-section/sidebar-section.styles.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar-section.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/sidebar-section/sidebar-section.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,oBAAoB,
|
|
1
|
+
{"version":3,"file":"sidebar-section.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/sidebar-section/sidebar-section.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,oBAAoB,yBAyKhC,CAAC"}
|
|
@@ -31,10 +31,10 @@ export const sidebarSectionStyles = css `
|
|
|
31
31
|
--_lg-padding-top: initial;
|
|
32
32
|
--_lg-padding-bottom: initial;
|
|
33
33
|
--_max-width: var(--semantics-page-sections-body-max-width);
|
|
34
|
-
/*
|
|
35
|
-
sticky
|
|
36
|
-
--_sticky-top: var(--primitives-space-
|
|
37
|
-
--_sticky-bottom: var(--primitives-space-
|
|
34
|
+
/* 24px clear of the insets nldd-page publishes. 24 is the depth of a
|
|
35
|
+
sticky header's fade, so the box starts where the fade ends. */
|
|
36
|
+
--_sticky-top: calc(var(--context-inset-top, 0px) + var(--primitives-space-24));
|
|
37
|
+
--_sticky-bottom: calc(var(--context-inset-bottom, 0px) + var(--primitives-space-24));
|
|
38
38
|
--_sidebar-width: var(--primitives-area-320);
|
|
39
39
|
|
|
40
40
|
display: flex;
|
|
@@ -167,7 +167,9 @@ export const sidebarSectionStyles = css `
|
|
|
167
167
|
position: sticky;
|
|
168
168
|
top: var(--_sticky-top);
|
|
169
169
|
bottom: var(--_sticky-bottom);
|
|
170
|
-
|
|
170
|
+
/* What the scroller shows, not what the window is: a viewport-tall cap
|
|
171
|
+
hangs out the bottom by the height of the chrome around the page. */
|
|
172
|
+
max-height: calc(var(--context-scroller-height, 100dvh) - var(--_sticky-top) - var(--_sticky-bottom));
|
|
171
173
|
overflow-y: auto;
|
|
172
174
|
}
|
|
173
175
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar-section.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/sidebar-section/sidebar-section.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;+CAYQ,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAyDzB,KAAK;;;;;;2BAML,KAAK,qBAAqB,KAAK;;;;;;2BAM/B,KAAK;;;;;;;;;;;;;;;;;2BAiBL,KAAK;2BACL,KAAK,qBAAqB,KAAK;2BAC/B,KAAK;;;;;;;;;;;;;;;;;;;2BAmBL,KAAK;2BACL,KAAK,qBAAqB,KAAK;2BAC/B,KAAK;;;;;;;;;;;;;;;;;;;;;;2BAsBL,KAAK;;;;;;;;;;;;;;;;2BAgBL,KAAK
|
|
1
|
+
{"version":3,"file":"sidebar-section.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/sidebar-section/sidebar-section.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;+CAYQ,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAyDzB,KAAK;;;;;;2BAML,KAAK,qBAAqB,KAAK;;;;;;2BAM/B,KAAK;;;;;;;;;;;;;;;;;2BAiBL,KAAK;2BACL,KAAK,qBAAqB,KAAK;2BAC/B,KAAK;;;;;;;;;;;;;;;;;;;2BAmBL,KAAK;2BACL,KAAK,qBAAqB,KAAK;2BAC/B,KAAK;;;;;;;;;;;;;;;;;;;;;;2BAsBL,KAAK;;;;;;;;;;;;;;;;2BAgBL,KAAK;;;;;;;;;;CAU/B,CAAC"}
|
|
@@ -70,8 +70,8 @@ export const sheetStyles = css `
|
|
|
70
70
|
sticky header sticks to that edge instead of to a bar that stands
|
|
71
71
|
outside. See findScrollModeProvider for the other half. */
|
|
72
72
|
--context-scroll-mode: nested;
|
|
73
|
-
--context-
|
|
74
|
-
--context-
|
|
73
|
+
--context-inset-top: 0px;
|
|
74
|
+
--context-inset-bottom: 0px;
|
|
75
75
|
|
|
76
76
|
display: flex;
|
|
77
77
|
position: fixed;
|
|
@@ -47,7 +47,7 @@ export declare class NLDDBarSplitView extends LitElement {
|
|
|
47
47
|
private _isChildVisible;
|
|
48
48
|
_getSortedChildren(): Element[];
|
|
49
49
|
updated(): void;
|
|
50
|
-
private
|
|
50
|
+
private _updateInsets;
|
|
51
51
|
render(): import("lit-html").TemplateResult;
|
|
52
52
|
}
|
|
53
53
|
declare global {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bar-split-view.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/bar-split-view/bar-split-view.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAUjC,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,KAAK,sBAAsB,GAAG,UAAU,GAAG,IAAI,CAAC;AAEhD,qBACa,gBAAiB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,0BAAsB;IAI5C,OAAO,CAAC,WAAW,
|
|
1
|
+
{"version":3,"file":"bar-split-view.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/bar-split-view/bar-split-view.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAUjC,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,KAAK,sBAAsB,GAAG,UAAU,GAAG,IAAI,CAAC;AAEhD,qBACa,gBAAiB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,0BAAsB;IAI5C,OAAO,CAAC,WAAW,CAA8D;IAGjF,UAAU,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAa;IAMtD,kBAAkB,EAAE,sBAAsB,CAAQ;IAElD,OAAO,CAAC,SAAS,CAAiC;IAClD,OAAO,CAAC,eAAe,CAA+B;IAE7C,iBAAiB;IAqBjB,oBAAoB;IAQ7B,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,eAAe;IAkBvB,kBAAkB,IAAI,OAAO,EAAE;IAmBtB,OAAO,IAAI,IAAI;IAUxB,OAAO,CAAC,aAAa,CAkCnB;IAEO,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,qBAAqB,EAAE,gBAAgB,CAAC;KACxC;CACD"}
|
|
@@ -50,7 +50,7 @@ let NLDDBarSplitView = class NLDDBarSplitView extends LitElement {
|
|
|
50
50
|
super(...arguments);
|
|
51
51
|
// Reflects --context-scroll-mode to [data-scroll]; on change, re-computes the
|
|
52
52
|
// sticky-bar offsets below.
|
|
53
|
-
this._scrollMode = new ScrollModeController(this, () => this.
|
|
53
|
+
this._scrollMode = new ScrollModeController(this, () => this._updateInsets());
|
|
54
54
|
this.background = 'inherit';
|
|
55
55
|
// null until connectedCallback measures the viewport. Before measurement the
|
|
56
56
|
// template falls back to DOM order with dividers — no breakpoint-specific
|
|
@@ -58,11 +58,11 @@ let NLDDBarSplitView = class NLDDBarSplitView extends LitElement {
|
|
|
58
58
|
this._currentBreakpoint = null;
|
|
59
59
|
this._observer = null;
|
|
60
60
|
this._resizeObserver = null;
|
|
61
|
-
// In root-scroll mode
|
|
61
|
+
// In root-scroll mode the bars stack: each top bar sticks
|
|
62
62
|
// below the ones above it, each bottom bar above the ones below it, and the
|
|
63
|
-
// cumulative heights are published as --context-
|
|
63
|
+
// cumulative heights are published as --context-inset-top/bottom on the main
|
|
64
64
|
// so a descendant nldd-page's sticky header/footer stack against them.
|
|
65
|
-
this.
|
|
65
|
+
this._updateInsets = () => {
|
|
66
66
|
const block = this.shadowRoot?.querySelector('.bar-split-view') ?? null;
|
|
67
67
|
const main = block?.querySelector('.bar-split-view__main') ?? null;
|
|
68
68
|
if (!block || !main)
|
|
@@ -71,8 +71,8 @@ let NLDDBarSplitView = class NLDDBarSplitView extends LitElement {
|
|
|
71
71
|
const mainIndex = children.indexOf(main);
|
|
72
72
|
if (this._scrollMode.mode !== 'root') {
|
|
73
73
|
children.forEach(el => { el.style.top = ''; el.style.bottom = ''; });
|
|
74
|
-
main.style.removeProperty('--context-
|
|
75
|
-
main.style.removeProperty('--context-
|
|
74
|
+
main.style.removeProperty('--context-inset-top');
|
|
75
|
+
main.style.removeProperty('--context-inset-bottom');
|
|
76
76
|
return;
|
|
77
77
|
}
|
|
78
78
|
// Everything above main sticks to the top and stacks; everything below
|
|
@@ -80,20 +80,20 @@ let NLDDBarSplitView = class NLDDBarSplitView extends LitElement {
|
|
|
80
80
|
// and count toward the offset. Base offsets are inherited from any
|
|
81
81
|
// bars/app-view above this one (px values, so nested bars compose).
|
|
82
82
|
const cs = getComputedStyle(this);
|
|
83
|
-
let top = parseFloat(cs.getPropertyValue('--context-
|
|
83
|
+
let top = parseFloat(cs.getPropertyValue('--context-inset-top')) || 0;
|
|
84
84
|
for (let i = 0; i < mainIndex; i++) {
|
|
85
85
|
children[i].style.top = `${top}px`;
|
|
86
86
|
children[i].style.bottom = '';
|
|
87
87
|
top += children[i].offsetHeight;
|
|
88
88
|
}
|
|
89
|
-
main.style.setProperty('--context-
|
|
90
|
-
let bottom = parseFloat(cs.getPropertyValue('--context-
|
|
89
|
+
main.style.setProperty('--context-inset-top', `${top}px`);
|
|
90
|
+
let bottom = parseFloat(cs.getPropertyValue('--context-inset-bottom')) || 0;
|
|
91
91
|
for (let i = children.length - 1; i > mainIndex; i--) {
|
|
92
92
|
children[i].style.bottom = `${bottom}px`;
|
|
93
93
|
children[i].style.top = '';
|
|
94
94
|
bottom += children[i].offsetHeight;
|
|
95
95
|
}
|
|
96
|
-
main.style.setProperty('--context-
|
|
96
|
+
main.style.setProperty('--context-inset-bottom', `${bottom}px`);
|
|
97
97
|
};
|
|
98
98
|
}
|
|
99
99
|
connectedCallback() {
|
|
@@ -107,9 +107,9 @@ let NLDDBarSplitView = class NLDDBarSplitView extends LitElement {
|
|
|
107
107
|
this._currentBreakpoint = bp;
|
|
108
108
|
this.requestUpdate();
|
|
109
109
|
}
|
|
110
|
-
// Bar heights (and thus the published
|
|
110
|
+
// Bar heights (and thus the published insets) can change on any
|
|
111
111
|
// resize; in root mode the flowing host resizes with them.
|
|
112
|
-
this.
|
|
112
|
+
this._updateInsets();
|
|
113
113
|
});
|
|
114
114
|
this._resizeObserver.observe(this);
|
|
115
115
|
}
|
|
@@ -166,7 +166,7 @@ let NLDDBarSplitView = class NLDDBarSplitView extends LitElement {
|
|
|
166
166
|
updated() {
|
|
167
167
|
// Re-apply after every render — the bar wrappers are re-created, so their
|
|
168
168
|
// inline sticky insets would otherwise be lost.
|
|
169
|
-
this.
|
|
169
|
+
this._updateInsets();
|
|
170
170
|
}
|
|
171
171
|
render() {
|
|
172
172
|
return barSplitViewTemplate(this);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bar-split-view.js","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/bar-split-view/bar-split-view.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,iDAAiD,CAAC;AAEvF,MAAM,OAAO,GAAG,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5C,MAAM,OAAO,GAAG,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAMrC,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAGN,8EAA8E;QAC9E,4BAA4B;QACpB,gBAAW,GAAG,IAAI,oBAAoB,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"bar-split-view.js","sourceRoot":"","sources":["../../../../../src/components/layout/split-views/bar-split-view/bar-split-view.ts"],"names":[],"mappings":"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"}
|
|
@@ -34,7 +34,7 @@ export const barSplitViewStyles = css `
|
|
|
34
34
|
/* Root-scroll mode: the document scrolls (ScrollModeController /
|
|
35
35
|
--context-scroll-mode). Bars become sticky layers that stay put while the
|
|
36
36
|
main content scrolls under them; their measured heights are published into
|
|
37
|
-
--context-
|
|
37
|
+
--context-inset-top/bottom (see bar-split-view.ts) so a descendant
|
|
38
38
|
nldd-page's sticky header/footer stack below/above them. The sticky insets
|
|
39
39
|
and those offsets are set by JS; bars paint above the content. */
|
|
40
40
|
:host([data-scroll="root"]) {
|
|
@@ -5,7 +5,7 @@ import '../../content/icon/icon.js';
|
|
|
5
5
|
import '../../actions/icon-button/icon-button.js';
|
|
6
6
|
export type ListDividers = 'always' | 'on-touch' | 'never';
|
|
7
7
|
export type ListVariant = 'simple' | 'box-tinted' | 'box-base';
|
|
8
|
-
export type ListType = 'list' | 'navigation' | 'listbox' | 'tree' | 'form';
|
|
8
|
+
export type ListType = 'list' | 'navigation' | 'listbox' | 'tree' | 'form' | 'radiogroup';
|
|
9
9
|
export interface NLDDReorderEventDetail {
|
|
10
10
|
fromIndex: number;
|
|
11
11
|
toIndex: number;
|
|
@@ -15,6 +15,12 @@ export interface NLDDReorderEventDetail {
|
|
|
15
15
|
*
|
|
16
16
|
* The `type` attribute switches the list's a11y role and behavior:
|
|
17
17
|
* - `list` (default) — `role="list"`, items `role="listitem"`. Reorderable allowed.
|
|
18
|
+
* - `radiogroup` — `role="radiogroup"`, for a set of `nldd-list-item radio`
|
|
19
|
+
* rows: one choice, laid out as rows so each option can carry a count or a
|
|
20
|
+
* second line. The rows step out of the accessibility tree themselves
|
|
21
|
+
* (`role="none"`), so the radios are the group's own children. The arrows
|
|
22
|
+
* move focus here and activation checks, rather than the selection following
|
|
23
|
+
* focus as it does in `nldd-radio-button-group`.
|
|
18
24
|
* - `tree` — `role="tree"`, items `role="treeitem"`. Branch rows put their child
|
|
19
25
|
* rows in their own `slot="children"`, which the item renders as a
|
|
20
26
|
* `role="group"`. Level, position and set size are NOT authored: the
|
|
@@ -141,7 +147,7 @@ export interface NLDDReorderEventDetail {
|
|
|
141
147
|
* @element nldd-list
|
|
142
148
|
*
|
|
143
149
|
* @attr {'simple'|'box-tinted'|'box-base'} variant - Visual style (default 'simple'): `simple` is a plain vertical strip with no chrome, the two `box` values a framed card with rounded corners, fill and inset border ring. `box-tinted` for a list on a plain page, `box-base` for one on an already-tinted parent (the border ring gets +2 palette steps so it still reads against a card-on-card)
|
|
144
|
-
* @attr {'list'|'navigation'|'listbox'|'tree'|'form'} type - A11y role and behavior (default 'list'). See the docblock above.
|
|
150
|
+
* @attr {'list'|'navigation'|'listbox'|'tree'|'form'|'radiogroup'} type - A11y role and behavior (default 'list'). See the docblock above.
|
|
145
151
|
* @attr {boolean} reorderable - Enables drag-to-reorder and pushes `reorderable` onto the items. Only valid with `type="list"`; there the arrow keys move rows instead of focus.
|
|
146
152
|
* @attr {'always'|'on-touch'|'never'} dividers - When to draw the lines between the items (default 'always'). `on-touch` draws them only where the primary input is touch, under `(pointer: coarse)`: a pointer has the hover highlight to tell one row from the next and a finger has nothing, so the line earns its place in the one case and is clutter in the other. `never` hides them everywhere
|
|
147
153
|
* @attr {string} height - Listbox only: caps the options' scroll region at this CSS length (e.g. '320px'). Unset means no cap.
|
|
@@ -151,7 +157,8 @@ export interface NLDDReorderEventDetail {
|
|
|
151
157
|
* @slot - List items (`nldd-list-item`)
|
|
152
158
|
* @slot toolbar - Controls below the search field (filters, sort, counts, view toggles). Available for every type; collapses when empty.
|
|
153
159
|
* @slot search-bar-end - Controls inline at the end of the search bar, beside the search field (e.g. a filter or options button). Listbox only; collapses when empty.
|
|
154
|
-
* @slot empty - Shown when no items
|
|
160
|
+
* @slot empty - Shown when the list has no items at all. Empty by default: what an empty list should say is the app's to write, so put an `nldd-inline-dialog` here. There is nothing to search or filter in a list with no rows, so the search field of a `type="listbox"` and a `[slot="toolbar"]` are hidden along with them, and an unfilled slot takes the whole list off the page. A list that fetches its rows is in this state until they arrive: put an `nldd-inline-dialog variant="loading"` here to hold the place rather than have the controls appear a moment later.
|
|
161
|
+
* @slot no-results - Shown when the list has items but every one of them is `[hidden]`, which is what consumer-driven filtering leaves behind. A different state from `empty` and a different sentence: here the search field and the `[slot="toolbar"]` stay, because they are the way back to the rows. Falls back to `[slot="empty"]` when not given. In `type="listbox"` it is suppressed while the search field is empty (no query yet), so the consumer can show just the search field or its own hint outside the list.
|
|
155
162
|
*
|
|
156
163
|
* @fires nldd-reorder - Reorderable `type="list"`: `{ fromIndex, toIndex }` on drop
|
|
157
164
|
* @fires input - `type="listbox"`: search value changed; `{ value }`. Toggle `[hidden]` on items to filter.
|
|
@@ -188,6 +195,9 @@ export declare class NLDDList extends LitElement {
|
|
|
188
195
|
private _mergedTranslations;
|
|
189
196
|
private _hasToolbar;
|
|
190
197
|
private _hasSearchBarEnd;
|
|
198
|
+
private _hasEmptyState;
|
|
199
|
+
private _hasNoResultsState;
|
|
200
|
+
private _hasItems;
|
|
191
201
|
private _isEmpty;
|
|
192
202
|
/** Current search value (listbox mode). Mirrored to the input. */
|
|
193
203
|
private _searchValue;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/list/list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAOjC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,0DAA0D,CAAC;AAClE,OAAO,4BAA4B,CAAC;AACpC,OAAO,0CAA0C,CAAC;AAElD,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;AAE3D,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,YAAY,GAAG,UAAU,CAAC;AAC/D,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/list/list.ts"],"names":[],"mappings":"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"}
|
|
@@ -22,6 +22,12 @@ const SHADOW_TAB_STOP = ':is(a[href], button, input, select, textarea, [tabindex
|
|
|
22
22
|
*
|
|
23
23
|
* The `type` attribute switches the list's a11y role and behavior:
|
|
24
24
|
* - `list` (default) — `role="list"`, items `role="listitem"`. Reorderable allowed.
|
|
25
|
+
* - `radiogroup` — `role="radiogroup"`, for a set of `nldd-list-item radio`
|
|
26
|
+
* rows: one choice, laid out as rows so each option can carry a count or a
|
|
27
|
+
* second line. The rows step out of the accessibility tree themselves
|
|
28
|
+
* (`role="none"`), so the radios are the group's own children. The arrows
|
|
29
|
+
* move focus here and activation checks, rather than the selection following
|
|
30
|
+
* focus as it does in `nldd-radio-button-group`.
|
|
25
31
|
* - `tree` — `role="tree"`, items `role="treeitem"`. Branch rows put their child
|
|
26
32
|
* rows in their own `slot="children"`, which the item renders as a
|
|
27
33
|
* `role="group"`. Level, position and set size are NOT authored: the
|
|
@@ -148,7 +154,7 @@ const SHADOW_TAB_STOP = ':is(a[href], button, input, select, textarea, [tabindex
|
|
|
148
154
|
* @element nldd-list
|
|
149
155
|
*
|
|
150
156
|
* @attr {'simple'|'box-tinted'|'box-base'} variant - Visual style (default 'simple'): `simple` is a plain vertical strip with no chrome, the two `box` values a framed card with rounded corners, fill and inset border ring. `box-tinted` for a list on a plain page, `box-base` for one on an already-tinted parent (the border ring gets +2 palette steps so it still reads against a card-on-card)
|
|
151
|
-
* @attr {'list'|'navigation'|'listbox'|'tree'|'form'} type - A11y role and behavior (default 'list'). See the docblock above.
|
|
157
|
+
* @attr {'list'|'navigation'|'listbox'|'tree'|'form'|'radiogroup'} type - A11y role and behavior (default 'list'). See the docblock above.
|
|
152
158
|
* @attr {boolean} reorderable - Enables drag-to-reorder and pushes `reorderable` onto the items. Only valid with `type="list"`; there the arrow keys move rows instead of focus.
|
|
153
159
|
* @attr {'always'|'on-touch'|'never'} dividers - When to draw the lines between the items (default 'always'). `on-touch` draws them only where the primary input is touch, under `(pointer: coarse)`: a pointer has the hover highlight to tell one row from the next and a finger has nothing, so the line earns its place in the one case and is clutter in the other. `never` hides them everywhere
|
|
154
160
|
* @attr {string} height - Listbox only: caps the options' scroll region at this CSS length (e.g. '320px'). Unset means no cap.
|
|
@@ -158,7 +164,8 @@ const SHADOW_TAB_STOP = ':is(a[href], button, input, select, textarea, [tabindex
|
|
|
158
164
|
* @slot - List items (`nldd-list-item`)
|
|
159
165
|
* @slot toolbar - Controls below the search field (filters, sort, counts, view toggles). Available for every type; collapses when empty.
|
|
160
166
|
* @slot search-bar-end - Controls inline at the end of the search bar, beside the search field (e.g. a filter or options button). Listbox only; collapses when empty.
|
|
161
|
-
* @slot empty - Shown when no items
|
|
167
|
+
* @slot empty - Shown when the list has no items at all. Empty by default: what an empty list should say is the app's to write, so put an `nldd-inline-dialog` here. There is nothing to search or filter in a list with no rows, so the search field of a `type="listbox"` and a `[slot="toolbar"]` are hidden along with them, and an unfilled slot takes the whole list off the page. A list that fetches its rows is in this state until they arrive: put an `nldd-inline-dialog variant="loading"` here to hold the place rather than have the controls appear a moment later.
|
|
168
|
+
* @slot no-results - Shown when the list has items but every one of them is `[hidden]`, which is what consumer-driven filtering leaves behind. A different state from `empty` and a different sentence: here the search field and the `[slot="toolbar"]` stay, because they are the way back to the rows. Falls back to `[slot="empty"]` when not given. In `type="listbox"` it is suppressed while the search field is empty (no query yet), so the consumer can show just the search field or its own hint outside the list.
|
|
162
169
|
*
|
|
163
170
|
* @fires nldd-reorder - Reorderable `type="list"`: `{ fromIndex, toIndex }` on drop
|
|
164
171
|
* @fires input - `type="listbox"`: search value changed; `{ value }`. Toggle `[hidden]` on items to filter.
|
|
@@ -196,6 +203,9 @@ let NLDDList = NLDDList_1 = class NLDDList extends LitElement {
|
|
|
196
203
|
this._mergedTranslations = { ...nlddListTranslations };
|
|
197
204
|
this._hasToolbar = false;
|
|
198
205
|
this._hasSearchBarEnd = false;
|
|
206
|
+
this._hasEmptyState = false;
|
|
207
|
+
this._hasNoResultsState = false;
|
|
208
|
+
this._hasItems = false;
|
|
199
209
|
this._isEmpty = false;
|
|
200
210
|
// — Listbox state ————————————————————————————————————————————————————————
|
|
201
211
|
/** Current search value (listbox mode). Mirrored to the input. */
|
|
@@ -532,6 +542,13 @@ let NLDDList = NLDDList_1 = class NLDDList extends LitElement {
|
|
|
532
542
|
toolbarSlot?.addEventListener('slotchange', () => queueMicrotask(() => {
|
|
533
543
|
this._hasToolbar = toolbarSlot.assignedElements().length > 0;
|
|
534
544
|
}));
|
|
545
|
+
// An app that renders its empty state conditionally adds and removes this
|
|
546
|
+
// one while the list is already on the page, and whether it holds anything
|
|
547
|
+
// decides whether the surface is drawn at all.
|
|
548
|
+
const emptySlot = this.shadowRoot?.querySelector('slot[name="empty"]');
|
|
549
|
+
emptySlot?.addEventListener('slotchange', () => queueMicrotask(() => this._updateEmpty()));
|
|
550
|
+
const noResultsSlot = this.shadowRoot?.querySelector('slot[name="no-results"]');
|
|
551
|
+
noResultsSlot?.addEventListener('slotchange', () => queueMicrotask(() => this._updateEmpty()));
|
|
535
552
|
// Watch for rows being added or removed, for `hidden` toggles on them
|
|
536
553
|
// (consumer-driven filtering) and for branches opening and closing, since
|
|
537
554
|
// all three change which row paints first and last. `subtree: true` is
|
|
@@ -732,7 +749,14 @@ let NLDDList = NLDDList_1 = class NLDDList extends LitElement {
|
|
|
732
749
|
// Drawing the surface anyway makes "nothing" look different per variant:
|
|
733
750
|
// invisible on a plain list, an empty tinted bar on a boxed one, which
|
|
734
751
|
// reads as a skeleton that never loaded.
|
|
735
|
-
this.
|
|
752
|
+
this._hasItems = items.length > 0;
|
|
753
|
+
this._hasEmptyState = !!this.querySelector(':scope > [slot="empty"]');
|
|
754
|
+
this._hasNoResultsState = !!this.querySelector(':scope > [slot="no-results"]');
|
|
755
|
+
// No rows at all and nothing said about that: not a thing on the page, so
|
|
756
|
+
// a parent that spaces its children keeps no room for it either. Rows that
|
|
757
|
+
// are only filtered away are a different state: the list stays, because
|
|
758
|
+
// the search field and the toolbar in it are the way back.
|
|
759
|
+
this.classList.toggle('is-blank', this._isEmpty && !this._hasItems && !this._hasEmptyState);
|
|
736
760
|
this._warnSilentEmpty();
|
|
737
761
|
}
|
|
738
762
|
/**
|
|
@@ -1313,6 +1337,9 @@ let NLDDList = NLDDList_1 = class NLDDList extends LitElement {
|
|
|
1313
1337
|
hasToolbar: this._hasToolbar,
|
|
1314
1338
|
type: this.type,
|
|
1315
1339
|
isEmpty: this._isEmpty,
|
|
1340
|
+
hasItems: this._hasItems,
|
|
1341
|
+
hasEmptyState: this._hasEmptyState,
|
|
1342
|
+
hasNoResultsState: this._hasNoResultsState,
|
|
1316
1343
|
listbox: {
|
|
1317
1344
|
listboxId: this._listboxId,
|
|
1318
1345
|
searchValue: this._searchValue,
|
|
@@ -1367,6 +1394,15 @@ __decorate([
|
|
|
1367
1394
|
__decorate([
|
|
1368
1395
|
state()
|
|
1369
1396
|
], NLDDList.prototype, "_hasSearchBarEnd", void 0);
|
|
1397
|
+
__decorate([
|
|
1398
|
+
state()
|
|
1399
|
+
], NLDDList.prototype, "_hasEmptyState", void 0);
|
|
1400
|
+
__decorate([
|
|
1401
|
+
state()
|
|
1402
|
+
], NLDDList.prototype, "_hasNoResultsState", void 0);
|
|
1403
|
+
__decorate([
|
|
1404
|
+
state()
|
|
1405
|
+
], NLDDList.prototype, "_hasItems", void 0);
|
|
1370
1406
|
__decorate([
|
|
1371
1407
|
state()
|
|
1372
1408
|
], NLDDList.prototype, "_isEmpty", void 0);
|