@nldd/design-system 0.8.43 → 0.8.44
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/components/actions/button/button.d.ts +19 -1
- package/dist/components/actions/button/button.d.ts.map +1 -1
- package/dist/components/actions/button/button.js +25 -1
- package/dist/components/actions/button/button.js.map +1 -1
- package/dist/components/actions/button/button.styles.js +28 -28
- package/dist/components/actions/button/button.template.d.ts.map +1 -1
- package/dist/components/actions/button/button.template.js +7 -0
- package/dist/components/actions/button/button.template.js.map +1 -1
- package/dist/components/actions/button-bar/button-bar.styles.js +4 -4
- package/dist/components/actions/button-group/button-group.styles.js +1 -1
- package/dist/components/actions/icon-button/icon-button.d.ts +28 -7
- package/dist/components/actions/icon-button/icon-button.d.ts.map +1 -1
- package/dist/components/actions/icon-button/icon-button.js +36 -9
- package/dist/components/actions/icon-button/icon-button.js.map +1 -1
- package/dist/components/actions/icon-button/icon-button.styles.js +25 -25
- package/dist/components/actions/icon-button/icon-button.template.d.ts.map +1 -1
- package/dist/components/actions/icon-button/icon-button.template.js +9 -2
- package/dist/components/actions/icon-button/icon-button.template.js.map +1 -1
- package/dist/components/actions/split-button/split-button.d.ts +5 -5
- package/dist/components/actions/split-button/split-button.d.ts.map +1 -1
- package/dist/components/actions/split-button/split-button.js +19 -15
- package/dist/components/actions/split-button/split-button.js.map +1 -1
- package/dist/components/actions/split-button/split-button.styles.js +1 -1
- package/dist/components/actions/split-button/split-button.template.d.ts.map +1 -1
- package/dist/components/actions/split-button/split-button.template.js +14 -12
- package/dist/components/actions/split-button/split-button.template.js.map +1 -1
- package/dist/components/actions/toolbar/toolbar.d.ts +0 -2
- package/dist/components/actions/toolbar/toolbar.d.ts.map +1 -1
- package/dist/components/actions/toolbar/toolbar.js +20 -17
- package/dist/components/actions/toolbar/toolbar.js.map +1 -1
- package/dist/components/actions/toolbar/toolbar.styles.js +17 -17
- package/dist/components/actions/toolbar/toolbar.template.d.ts +1 -1
- package/dist/components/actions/toolbar/toolbar.template.d.ts.map +1 -1
- package/dist/components/actions/toolbar/toolbar.template.js +13 -5
- package/dist/components/actions/toolbar/toolbar.template.js.map +1 -1
- package/dist/components/components.js +1 -1
- package/dist/components/content/blockquote/blockquote.styles.js +5 -5
- package/dist/components/content/code/code.styles.js +3 -3
- package/dist/components/content/icon/icon-aliases.d.ts.map +1 -1
- package/dist/components/content/icon/icon-aliases.js +15 -0
- package/dist/components/content/icon/icon-aliases.js.map +1 -1
- package/dist/components/content/icon/icon-registry.d.ts.map +1 -1
- package/dist/components/content/icon/icon-registry.js +11 -5
- package/dist/components/content/icon/icon-registry.js.map +1 -1
- package/dist/components/content/icon/icon.styles.js +1 -1
- package/dist/components/content/keyboard-shortcut/keyboard-shortcut.d.ts +22 -0
- package/dist/components/content/keyboard-shortcut/keyboard-shortcut.d.ts.map +1 -1
- package/dist/components/content/keyboard-shortcut/keyboard-shortcut.js +46 -2
- package/dist/components/content/keyboard-shortcut/keyboard-shortcut.js.map +1 -1
- package/dist/components/content/keyboard-shortcut/keyboard-shortcut.styles.js +5 -5
- package/dist/components/content/rich-text/rich-text.d.ts +3 -1
- package/dist/components/content/rich-text/rich-text.d.ts.map +1 -1
- package/dist/components/content/rich-text/rich-text.js +6 -1
- package/dist/components/content/rich-text/rich-text.js.map +1 -1
- package/dist/components/content/tag/tag.styles.js +6 -6
- package/dist/components/content/title/title.styles.js +2 -2
- package/dist/components/content/tooltip/tooltip.styles.js +8 -8
- package/dist/components/forms/form-actions/form-actions.styles.js +2 -2
- package/dist/components/forms/form-field/form-field.styles.js +6 -6
- package/dist/components/{index-By2jYHEw.js → index-1v33GjGX.js} +2950 -2632
- package/dist/components/index.d.ts +1 -1
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/index.js.map +1 -1
- package/dist/components/inputs/checkbox/checkbox.styles.js +9 -9
- package/dist/components/inputs/checkbox-field/checkbox-field.styles.js +4 -4
- package/dist/components/inputs/code-editor/code-editor.styles.js +14 -14
- package/dist/components/inputs/combo-box/combo-box.styles.d.ts.map +1 -1
- package/dist/components/inputs/combo-box/combo-box.styles.js +15 -14
- package/dist/components/inputs/combo-box/combo-box.styles.js.map +1 -1
- package/dist/components/inputs/combo-box/combo-box.template.js +2 -2
- package/dist/components/inputs/dropdown/dropdown.d.ts +7 -5
- package/dist/components/inputs/dropdown/dropdown.d.ts.map +1 -1
- package/dist/components/inputs/dropdown/dropdown.js +11 -9
- package/dist/components/inputs/dropdown/dropdown.js.map +1 -1
- package/dist/components/inputs/dropdown/dropdown.styles.d.ts.map +1 -1
- package/dist/components/inputs/dropdown/dropdown.styles.js +23 -17
- package/dist/components/inputs/dropdown/dropdown.styles.js.map +1 -1
- package/dist/components/inputs/multi-line-text-field/multi-line-text-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/multi-line-text-field/multi-line-text-field.styles.js +12 -11
- package/dist/components/inputs/multi-line-text-field/multi-line-text-field.styles.js.map +1 -1
- package/dist/components/inputs/number-field/number-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/number-field/number-field.styles.js +16 -15
- package/dist/components/inputs/number-field/number-field.styles.js.map +1 -1
- package/dist/components/inputs/number-field/number-field.template.js +2 -2
- package/dist/components/inputs/password-field/password-field.d.ts +8 -8
- package/dist/components/inputs/password-field/password-field.d.ts.map +1 -1
- package/dist/components/inputs/password-field/password-field.js +16 -16
- package/dist/components/inputs/password-field/password-field.js.map +1 -1
- package/dist/components/inputs/password-field/password-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/password-field/password-field.styles.js +18 -17
- package/dist/components/inputs/password-field/password-field.styles.js.map +1 -1
- package/dist/components/inputs/password-field/password-field.template.js +3 -3
- package/dist/components/inputs/password-field/password-field.template.js.map +1 -1
- package/dist/components/inputs/radio-button/radio-button.styles.js +11 -11
- package/dist/components/inputs/radio-button-field/radio-button-field.styles.js +4 -4
- package/dist/components/inputs/search-field/search-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/search-field/search-field.styles.js +17 -16
- package/dist/components/inputs/search-field/search-field.styles.js.map +1 -1
- package/dist/components/inputs/segmented-control/segmented-control.styles.d.ts.map +1 -1
- package/dist/components/inputs/segmented-control/segmented-control.styles.js +37 -67
- package/dist/components/inputs/segmented-control/segmented-control.styles.js.map +1 -1
- package/dist/components/inputs/stepper/stepper.styles.js +2 -2
- package/dist/components/inputs/stepper/stepper.template.js +2 -2
- package/dist/components/inputs/switch/switch.styles.js +13 -13
- package/dist/components/inputs/switch-field/switch-field.styles.js +4 -4
- package/dist/components/inputs/text-field/text-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/text-field/text-field.styles.js +17 -16
- package/dist/components/inputs/text-field/text-field.styles.js.map +1 -1
- package/dist/components/inputs/toggle-button/toggle-button.styles.js +12 -12
- package/dist/components/inputs/token/token.styles.js +5 -5
- package/dist/components/inputs/token/token.template.js +1 -1
- package/dist/components/layout/app-view/app-view.styles.js +4 -4
- package/dist/components/layout/box/box.styles.js +2 -2
- package/dist/components/layout/card/card.styles.js +4 -4
- package/dist/components/layout/collection/collection.styles.js +6 -6
- package/dist/components/layout/divider/divider.styles.js +2 -2
- package/dist/components/layout/page/page.styles.js +9 -9
- package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.styles.d.ts.map +1 -1
- package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.styles.js +15 -14
- package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.styles.js.map +1 -1
- package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.js +6 -6
- package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.styles.js +6 -6
- package/dist/components/layout/page-sections/simple-section/simple-section.styles.js +14 -14
- package/dist/components/layout/page-sections/simple-section/simple-section.styles.js.map +1 -1
- package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.js +6 -6
- package/dist/components/layout/popover/popover.styles.js +4 -4
- package/dist/components/layout/sheet/sheet.d.ts +17 -4
- package/dist/components/layout/sheet/sheet.d.ts.map +1 -1
- package/dist/components/layout/sheet/sheet.js +40 -6
- package/dist/components/layout/sheet/sheet.js.map +1 -1
- package/dist/components/layout/sheet/sheet.styles.d.ts.map +1 -1
- package/dist/components/layout/sheet/sheet.styles.js +28 -35
- package/dist/components/layout/sheet/sheet.styles.js.map +1 -1
- package/dist/components/layout/spacer/spacer.styles.js +5 -5
- package/dist/components/layout/split-views/bar-split-view/bar-split-view.styles.js +9 -9
- package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.styles.js +34 -34
- package/dist/components/layout/split-views/side-by-side-split-view/side-by-side-split-view.styles.js +6 -6
- package/dist/components/layout/split-views/split-view-divider/split-view-divider.styles.js +4 -4
- package/dist/components/layout/split-views/split-view-pane/split-view-pane.styles.js +3 -3
- package/dist/components/layout/split-views/stacked-split-view/stacked-split-view.styles.js +7 -7
- package/dist/components/layout/window/window.styles.js +8 -8
- package/dist/components/lists-and-menus/cells/cell/cell.styles.js +5 -5
- package/dist/components/lists-and-menus/cells/description-cell/description-cell.styles.js +5 -5
- package/dist/components/lists-and-menus/cells/drag-handle-cell/drag-handle-cell.styles.js +9 -9
- package/dist/components/lists-and-menus/cells/spacer-cell/spacer-cell.styles.js +1 -1
- package/dist/components/lists-and-menus/cells/text-cell/text-cell.styles.js +6 -6
- package/dist/components/lists-and-menus/cells/title-cell/title-cell.styles.js +6 -6
- package/dist/components/lists-and-menus/list/list.styles.js +13 -13
- package/dist/components/lists-and-menus/list-item/list-item.styles.js +21 -21
- package/dist/components/lists-and-menus/menu/menu.d.ts +160 -29
- package/dist/components/lists-and-menus/menu/menu.d.ts.map +1 -1
- package/dist/components/lists-and-menus/menu/menu.i18n.d.ts +2 -0
- package/dist/components/lists-and-menus/menu/menu.i18n.d.ts.map +1 -1
- package/dist/components/lists-and-menus/menu/menu.i18n.js +2 -0
- package/dist/components/lists-and-menus/menu/menu.i18n.js.map +1 -1
- package/dist/components/lists-and-menus/menu/menu.js +534 -102
- package/dist/components/lists-and-menus/menu/menu.js.map +1 -1
- package/dist/components/lists-and-menus/menu/menu.styles.d.ts.map +1 -1
- package/dist/components/lists-and-menus/menu/menu.styles.js +93 -32
- package/dist/components/lists-and-menus/menu/menu.styles.js.map +1 -1
- package/dist/components/lists-and-menus/menu/menu.template.d.ts.map +1 -1
- package/dist/components/lists-and-menus/menu/menu.template.js +13 -0
- package/dist/components/lists-and-menus/menu/menu.template.js.map +1 -1
- package/dist/components/navigation/document-tab-bar/document-tab-bar.d.ts +0 -2
- package/dist/components/navigation/document-tab-bar/document-tab-bar.d.ts.map +1 -1
- package/dist/components/navigation/document-tab-bar/document-tab-bar.js +20 -22
- package/dist/components/navigation/document-tab-bar/document-tab-bar.js.map +1 -1
- package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.js +48 -48
- package/dist/components/navigation/document-tab-bar/document-tab-bar.template.d.ts.map +1 -1
- package/dist/components/navigation/document-tab-bar/document-tab-bar.template.js +11 -9
- package/dist/components/navigation/document-tab-bar/document-tab-bar.template.js.map +1 -1
- package/dist/components/navigation/link/link.d.ts.map +1 -0
- package/dist/components/navigation/link/link.js.map +1 -0
- package/dist/components/navigation/link/link.styles.d.ts.map +1 -0
- package/dist/components/{actions → navigation}/link/link.styles.js +4 -4
- package/dist/components/navigation/link/link.styles.js.map +1 -0
- package/dist/components/navigation/link/link.template.d.ts.map +1 -0
- package/dist/components/navigation/link/link.template.js.map +1 -0
- package/dist/components/navigation/menu-bar/menu-bar.d.ts +17 -5
- package/dist/components/navigation/menu-bar/menu-bar.d.ts.map +1 -1
- package/dist/components/navigation/menu-bar/menu-bar.js +79 -34
- package/dist/components/navigation/menu-bar/menu-bar.js.map +1 -1
- package/dist/components/navigation/menu-bar/menu-bar.styles.js +2 -2
- package/dist/components/navigation/menu-bar/menu-bar.template.d.ts.map +1 -1
- package/dist/components/navigation/menu-bar/menu-bar.template.js +12 -2
- package/dist/components/navigation/menu-bar/menu-bar.template.js.map +1 -1
- package/dist/components/navigation/menu-bar-item/menu-bar-item.d.ts +16 -0
- package/dist/components/navigation/menu-bar-item/menu-bar-item.d.ts.map +1 -1
- package/dist/components/navigation/menu-bar-item/menu-bar-item.js +22 -0
- package/dist/components/navigation/menu-bar-item/menu-bar-item.js.map +1 -1
- package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.js +19 -19
- package/dist/components/navigation/menu-bar-item/menu-bar-item.template.d.ts.map +1 -1
- package/dist/components/navigation/menu-bar-item/menu-bar-item.template.js +2 -0
- package/dist/components/navigation/menu-bar-item/menu-bar-item.template.js.map +1 -1
- package/dist/components/navigation/pagination/pagination.d.ts +12 -0
- package/dist/components/navigation/pagination/pagination.d.ts.map +1 -1
- package/dist/components/navigation/pagination/pagination.js +19 -0
- package/dist/components/navigation/pagination/pagination.js.map +1 -1
- package/dist/components/navigation/pagination/pagination.styles.d.ts.map +1 -1
- package/dist/components/navigation/pagination/pagination.styles.js +47 -77
- package/dist/components/navigation/pagination/pagination.styles.js.map +1 -1
- package/dist/components/navigation/pagination/pagination.template.d.ts.map +1 -1
- package/dist/components/navigation/pagination/pagination.template.js +23 -16
- package/dist/components/navigation/pagination/pagination.template.js.map +1 -1
- package/dist/components/navigation/skip-link/skip-link.styles.js +9 -9
- package/dist/components/navigation/tab-bar/tab-bar.styles.d.ts.map +1 -1
- package/dist/components/navigation/tab-bar/tab-bar.styles.js +28 -51
- package/dist/components/navigation/tab-bar/tab-bar.styles.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 +57 -70
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.js.map +1 -1
- package/dist/components/navigation/top-title-bar/top-title-bar.styles.js +15 -15
- package/dist/components/{prism-typescript-BlIir5CV.js → prism-typescript-D2EqsCqV.js} +1 -1
- package/dist/components/status-and-feedback/badge/badge.styles.js +7 -7
- package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.js +7 -7
- package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.js +5 -5
- package/dist/css/rich-text.css +85 -58
- package/dist/css/settings.css +36 -33
- package/dist/utilities/os.d.ts +27 -0
- package/dist/utilities/os.d.ts.map +1 -0
- package/dist/utilities/os.js +60 -0
- package/dist/utilities/os.js.map +1 -0
- package/package.json +5 -5
- package/dist/components/actions/link/link.d.ts.map +0 -1
- package/dist/components/actions/link/link.js.map +0 -1
- package/dist/components/actions/link/link.styles.d.ts.map +0 -1
- package/dist/components/actions/link/link.styles.js.map +0 -1
- package/dist/components/actions/link/link.template.d.ts.map +0 -1
- package/dist/components/actions/link/link.template.js.map +0 -1
- /package/dist/components/{actions → navigation}/link/link.d.ts +0 -0
- /package/dist/components/{actions → navigation}/link/link.js +0 -0
- /package/dist/components/{actions → navigation}/link/link.styles.d.ts +0 -0
- /package/dist/components/{actions → navigation}/link/link.template.d.ts +0 -0
- /package/dist/components/{actions → navigation}/link/link.template.js +0 -0
|
@@ -9,9 +9,9 @@ export const collectionStyles = css `
|
|
|
9
9
|
|
|
10
10
|
:host {
|
|
11
11
|
display: flex;
|
|
12
|
-
flex-direction: column;
|
|
13
12
|
width: 100%;
|
|
14
13
|
min-width: 0;
|
|
14
|
+
flex-direction: column;
|
|
15
15
|
gap: var(--components-collection-sm-gap);
|
|
16
16
|
--_item-width: var(--primitives-area-280);
|
|
17
17
|
|
|
@@ -67,18 +67,18 @@ export const collectionStyles = css `
|
|
|
67
67
|
/* # Horizontal scroll */
|
|
68
68
|
|
|
69
69
|
:host([layout='horizontal-scroll']) .collection__items {
|
|
70
|
+
margin-inline-start: calc(var(--primitives-space-16) * -1);
|
|
71
|
+
margin-block: calc(var(--primitives-space-16) * -1);
|
|
72
|
+
overflow-x: auto;
|
|
73
|
+
padding-inline-start: var(--primitives-space-16);
|
|
74
|
+
padding-block: var(--primitives-space-16);
|
|
70
75
|
flex-direction: row;
|
|
71
76
|
flex-wrap: nowrap;
|
|
72
|
-
overflow-x: auto;
|
|
73
77
|
scroll-snap-type: x mandatory;
|
|
74
78
|
scroll-behavior: smooth;
|
|
75
79
|
-webkit-overflow-scrolling: touch;
|
|
76
80
|
scrollbar-width: none;
|
|
77
|
-
margin-inline-start: calc(var(--primitives-space-16) * -1);
|
|
78
|
-
padding-inline-start: var(--primitives-space-16);
|
|
79
81
|
scroll-padding-inline-start: var(--primitives-space-16);
|
|
80
|
-
padding-block: var(--primitives-space-16);
|
|
81
|
-
margin-block: calc(var(--primitives-space-16) * -1);
|
|
82
82
|
mask-image: linear-gradient(
|
|
83
83
|
to right,
|
|
84
84
|
transparent 0,
|
|
@@ -18,11 +18,11 @@ export const dividerStyles = css `
|
|
|
18
18
|
|
|
19
19
|
.divider {
|
|
20
20
|
display: block;
|
|
21
|
-
width: 100%;
|
|
22
|
-
height: var(--semantics-dividers-thickness);
|
|
23
21
|
margin: 0;
|
|
24
22
|
border: none;
|
|
25
23
|
background-color: var(--semantics-dividers-color);
|
|
24
|
+
width: 100%;
|
|
25
|
+
height: var(--semantics-dividers-thickness);
|
|
26
26
|
|
|
27
27
|
@media (forced-colors: active) {
|
|
28
28
|
background-color: CanvasText;
|
|
@@ -8,13 +8,13 @@ export const pageStyles = css `
|
|
|
8
8
|
--_background-color: var(--context-parent-background-color, var(--semantics-surfaces-background-color));
|
|
9
9
|
|
|
10
10
|
display: flex;
|
|
11
|
-
|
|
11
|
+
background-color: var(--_background-color);
|
|
12
12
|
width: 100%;
|
|
13
13
|
height: 100%;
|
|
14
14
|
overflow-y: auto;
|
|
15
15
|
overflow-x: hidden;
|
|
16
|
+
flex-direction: column;
|
|
16
17
|
overscroll-behavior: contain;
|
|
17
|
-
background-color: var(--_background-color);
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
/* Overflow hidden prevents content from escaping the scroll wrapper.
|
|
@@ -44,17 +44,17 @@ export const pageStyles = css `
|
|
|
44
44
|
|
|
45
45
|
.page {
|
|
46
46
|
display: flex;
|
|
47
|
+
min-height: 0;
|
|
47
48
|
flex-direction: column;
|
|
48
49
|
flex-grow: 1;
|
|
49
|
-
min-height: 0;
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
|
|
53
53
|
/* # Header */
|
|
54
54
|
|
|
55
55
|
.page__header {
|
|
56
|
-
flex-shrink: 0;
|
|
57
56
|
position: relative;
|
|
57
|
+
flex-shrink: 0;
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
:host([sticky-header]) .page__header {
|
|
@@ -72,10 +72,10 @@ export const pageStyles = css `
|
|
|
72
72
|
top: 100%;
|
|
73
73
|
left: 0;
|
|
74
74
|
right: 0;
|
|
75
|
-
|
|
75
|
+
opacity: 0;
|
|
76
76
|
background: linear-gradient(to bottom, color-mix(in srgb, var(--_background-color) 95%, transparent), transparent);
|
|
77
77
|
pointer-events: none;
|
|
78
|
-
|
|
78
|
+
height: var(--primitives-space-32);
|
|
79
79
|
transition: opacity var(--primitives-transition-duration-medium) var(--primitives-transition-easing-default);
|
|
80
80
|
}
|
|
81
81
|
|
|
@@ -88,9 +88,9 @@ export const pageStyles = css `
|
|
|
88
88
|
|
|
89
89
|
.page__scroll {
|
|
90
90
|
display: flex;
|
|
91
|
+
min-height: 0;
|
|
91
92
|
flex-direction: column;
|
|
92
93
|
flex-grow: 1;
|
|
93
|
-
min-height: 0;
|
|
94
94
|
}
|
|
95
95
|
|
|
96
96
|
:host([sticky-header]) .page__scroll {
|
|
@@ -112,8 +112,8 @@ export const pageStyles = css `
|
|
|
112
112
|
/* # Footer */
|
|
113
113
|
|
|
114
114
|
.page__footer {
|
|
115
|
-
flex-shrink: 0;
|
|
116
115
|
position: relative;
|
|
116
|
+
flex-shrink: 0;
|
|
117
117
|
}
|
|
118
118
|
|
|
119
119
|
:host([sticky-footer]) .page__footer {
|
|
@@ -129,9 +129,9 @@ export const pageStyles = css `
|
|
|
129
129
|
bottom: 100%;
|
|
130
130
|
left: 0;
|
|
131
131
|
right: 0;
|
|
132
|
-
height: var(--primitives-space-32);
|
|
133
132
|
background: linear-gradient(to top, color-mix(in srgb, var(--_background-color) 95%, transparent), transparent);
|
|
134
133
|
pointer-events: none;
|
|
134
|
+
height: var(--primitives-space-32);
|
|
135
135
|
}
|
|
136
136
|
`;
|
|
137
137
|
//# sourceMappingURL=page.styles.js.map
|
package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.styles.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"full-bleed-section.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/full-bleed-section/full-bleed-section.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,sBAAsB,
|
|
1
|
+
{"version":3,"file":"full-bleed-section.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/full-bleed-section/full-bleed-section.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,sBAAsB,yBAsHlC,CAAC"}
|
package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.styles.js
CHANGED
|
@@ -16,9 +16,9 @@ export const fullBleedSectionStyles = css `
|
|
|
16
16
|
--_max-width: var(--semantics-page-sections-body-max-width);
|
|
17
17
|
|
|
18
18
|
display: flex;
|
|
19
|
+
width: 100%;
|
|
19
20
|
flex-direction: column;
|
|
20
21
|
align-items: center;
|
|
21
|
-
width: 100%;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
:host([hidden]) {
|
|
@@ -34,10 +34,11 @@ export const fullBleedSectionStyles = css `
|
|
|
34
34
|
|
|
35
35
|
.full-bleed-section {
|
|
36
36
|
display: flex;
|
|
37
|
+
box-sizing: border-box;
|
|
38
|
+
width: 100%;
|
|
37
39
|
flex-direction: column;
|
|
38
40
|
flex-grow: 1;
|
|
39
|
-
|
|
40
|
-
box-sizing: border-box;
|
|
41
|
+
align-items: center;
|
|
41
42
|
|
|
42
43
|
@media (max-width: ${smMax}) {
|
|
43
44
|
padding-block: var(--semantics-page-sections-sm-margin-block);
|
|
@@ -65,21 +66,14 @@ export const fullBleedSectionStyles = css `
|
|
|
65
66
|
}
|
|
66
67
|
|
|
67
68
|
|
|
68
|
-
/* # Header */
|
|
69
|
-
|
|
70
|
-
.full-bleed-section__header[hidden] {
|
|
71
|
-
display: none;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
|
|
75
69
|
/* # Body */
|
|
76
70
|
|
|
77
71
|
.full-bleed-section__body {
|
|
78
72
|
display: flex;
|
|
79
|
-
flex-direction: column;
|
|
80
|
-
flex-grow: 1;
|
|
81
73
|
width: 100%;
|
|
82
74
|
max-width: var(--_max-width);
|
|
75
|
+
flex-direction: column;
|
|
76
|
+
flex-grow: 1;
|
|
83
77
|
|
|
84
78
|
@media (max-width: ${smMax}) {
|
|
85
79
|
gap: var(--semantics-page-sections-sm-gap);
|
|
@@ -107,9 +101,9 @@ export const fullBleedSectionStyles = css `
|
|
|
107
101
|
}
|
|
108
102
|
|
|
109
103
|
|
|
110
|
-
/* #
|
|
104
|
+
/* # Header */
|
|
111
105
|
|
|
112
|
-
.full-bleed-
|
|
106
|
+
.full-bleed-section__header[hidden] {
|
|
113
107
|
display: none;
|
|
114
108
|
}
|
|
115
109
|
|
|
@@ -121,5 +115,12 @@ export const fullBleedSectionStyles = css `
|
|
|
121
115
|
flex-direction: column;
|
|
122
116
|
flex-grow: 1;
|
|
123
117
|
}
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
/* # Footer */
|
|
121
|
+
|
|
122
|
+
.full-bleed-section__footer[hidden] {
|
|
123
|
+
display: none;
|
|
124
|
+
}
|
|
124
125
|
`;
|
|
125
126
|
//# sourceMappingURL=full-bleed-section.styles.js.map
|
package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"full-bleed-section.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/full-bleed-section/full-bleed-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,sBAAsB,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"full-bleed-section.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/full-bleed-section/full-bleed-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,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAoClB,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;4CAIgB,KAAK;;;;4CAIL,KAAK,qBAAqB,KAAK;;;;4CAI/B,KAAK;;;;;;;;;;;;;;;uBAe1B,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;4CAIgB,KAAK;;;;4CAIL,KAAK,qBAAqB,KAAK;;;;4CAI/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BhD,CAAC"}
|
|
@@ -16,9 +16,9 @@ export const oneHalfOneHalfSectionStyles = css `
|
|
|
16
16
|
--_max-width: var(--semantics-page-sections-body-max-width);
|
|
17
17
|
|
|
18
18
|
display: flex;
|
|
19
|
+
width: 100%;
|
|
19
20
|
flex-direction: column;
|
|
20
21
|
align-items: center;
|
|
21
|
-
width: 100%;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
:host([hidden]) {
|
|
@@ -34,10 +34,10 @@ export const oneHalfOneHalfSectionStyles = css `
|
|
|
34
34
|
|
|
35
35
|
.one-half-one-half-section {
|
|
36
36
|
display: flex;
|
|
37
|
+
box-sizing: border-box;
|
|
38
|
+
width: 100%;
|
|
37
39
|
flex-direction: column;
|
|
38
40
|
align-items: center;
|
|
39
|
-
width: 100%;
|
|
40
|
-
box-sizing: border-box;
|
|
41
41
|
|
|
42
42
|
@media (max-width: ${smMax}) {
|
|
43
43
|
padding-inline: var(--semantics-page-sections-sm-margin-inline);
|
|
@@ -75,9 +75,9 @@ export const oneHalfOneHalfSectionStyles = css `
|
|
|
75
75
|
|
|
76
76
|
.one-half-one-half-section__body {
|
|
77
77
|
display: flex;
|
|
78
|
-
flex-direction: column;
|
|
79
78
|
width: 100%;
|
|
80
79
|
max-width: var(--_max-width);
|
|
80
|
+
flex-direction: column;
|
|
81
81
|
|
|
82
82
|
@media (max-width: ${smMax}) {
|
|
83
83
|
gap: var(--semantics-page-sections-sm-gap);
|
|
@@ -137,13 +137,13 @@ export const oneHalfOneHalfSectionStyles = css `
|
|
|
137
137
|
}
|
|
138
138
|
|
|
139
139
|
.one-half-one-half-section__left-column {
|
|
140
|
-
flex: 1;
|
|
141
140
|
min-width: var(--primitives-area-280);
|
|
141
|
+
flex: 1;
|
|
142
142
|
}
|
|
143
143
|
|
|
144
144
|
.one-half-one-half-section__right-column {
|
|
145
|
-
flex: 1;
|
|
146
145
|
min-width: var(--primitives-area-280);
|
|
146
|
+
flex: 1;
|
|
147
147
|
}
|
|
148
148
|
`;
|
|
149
149
|
//# sourceMappingURL=one-half-one-half-section.styles.js.map
|
|
@@ -16,9 +16,9 @@ export const oneThirdTwoThirdsSectionStyles = css `
|
|
|
16
16
|
--_max-width: var(--semantics-page-sections-body-max-width);
|
|
17
17
|
|
|
18
18
|
display: flex;
|
|
19
|
+
width: 100%;
|
|
19
20
|
flex-direction: column;
|
|
20
21
|
align-items: center;
|
|
21
|
-
width: 100%;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
:host([hidden]) {
|
|
@@ -34,10 +34,10 @@ export const oneThirdTwoThirdsSectionStyles = css `
|
|
|
34
34
|
|
|
35
35
|
.one-third-two-thirds-section {
|
|
36
36
|
display: flex;
|
|
37
|
+
box-sizing: border-box;
|
|
38
|
+
width: 100%;
|
|
37
39
|
flex-direction: column;
|
|
38
40
|
align-items: center;
|
|
39
|
-
width: 100%;
|
|
40
|
-
box-sizing: border-box;
|
|
41
41
|
|
|
42
42
|
@media (max-width: ${smMax}) {
|
|
43
43
|
padding-inline: var(--semantics-page-sections-sm-margin-inline);
|
|
@@ -75,9 +75,9 @@ export const oneThirdTwoThirdsSectionStyles = css `
|
|
|
75
75
|
|
|
76
76
|
.one-third-two-thirds-section__body {
|
|
77
77
|
display: flex;
|
|
78
|
-
flex-direction: column;
|
|
79
78
|
width: 100%;
|
|
80
79
|
max-width: var(--_max-width);
|
|
80
|
+
flex-direction: column;
|
|
81
81
|
|
|
82
82
|
@media (max-width: ${smMax}) {
|
|
83
83
|
gap: var(--semantics-page-sections-sm-gap);
|
|
@@ -137,13 +137,13 @@ export const oneThirdTwoThirdsSectionStyles = css `
|
|
|
137
137
|
}
|
|
138
138
|
|
|
139
139
|
.one-third-two-thirds-section__left-column {
|
|
140
|
-
flex: 1;
|
|
141
140
|
min-width: var(--primitives-area-280);
|
|
141
|
+
flex: 1;
|
|
142
142
|
}
|
|
143
143
|
|
|
144
144
|
.one-third-two-thirds-section__right-column {
|
|
145
|
-
flex: 2;
|
|
146
145
|
min-width: var(--primitives-area-280);
|
|
146
|
+
flex: 2;
|
|
147
147
|
}
|
|
148
148
|
`;
|
|
149
149
|
//# sourceMappingURL=one-third-two-thirds-section.styles.js.map
|
|
@@ -16,9 +16,9 @@ export const simpleSectionStyles = css `
|
|
|
16
16
|
--_max-width: var(--semantics-page-sections-body-max-width);
|
|
17
17
|
|
|
18
18
|
display: flex;
|
|
19
|
+
width: 100%;
|
|
19
20
|
flex-direction: column;
|
|
20
21
|
align-items: center;
|
|
21
|
-
width: 100%;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
:host([hidden]) {
|
|
@@ -39,11 +39,11 @@ export const simpleSectionStyles = css `
|
|
|
39
39
|
|
|
40
40
|
.simple-section {
|
|
41
41
|
display: flex;
|
|
42
|
+
box-sizing: border-box;
|
|
43
|
+
width: 100%;
|
|
42
44
|
flex-direction: column;
|
|
43
45
|
flex-grow: 1;
|
|
44
46
|
align-items: center;
|
|
45
|
-
width: 100%;
|
|
46
|
-
box-sizing: border-box;
|
|
47
47
|
|
|
48
48
|
@media (max-width: ${smMax}) {
|
|
49
49
|
padding-inline: var(--semantics-page-sections-sm-margin-inline);
|
|
@@ -77,21 +77,14 @@ export const simpleSectionStyles = css `
|
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
|
|
80
|
-
/* # Header */
|
|
81
|
-
|
|
82
|
-
.simple-section__header[hidden] {
|
|
83
|
-
display: none;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
|
|
87
80
|
/* # Body */
|
|
88
81
|
|
|
89
82
|
.simple-section__body {
|
|
90
83
|
display: flex;
|
|
91
|
-
flex-direction: column;
|
|
92
|
-
flex-grow: 1;
|
|
93
84
|
width: 100%;
|
|
94
85
|
max-width: var(--_max-width);
|
|
86
|
+
flex-direction: column;
|
|
87
|
+
flex-grow: 1;
|
|
95
88
|
|
|
96
89
|
@media (max-width: ${smMax}) {
|
|
97
90
|
gap: var(--semantics-page-sections-sm-gap);
|
|
@@ -119,9 +112,9 @@ export const simpleSectionStyles = css `
|
|
|
119
112
|
}
|
|
120
113
|
|
|
121
114
|
|
|
122
|
-
/* #
|
|
115
|
+
/* # Header */
|
|
123
116
|
|
|
124
|
-
.simple-
|
|
117
|
+
.simple-section__header[hidden] {
|
|
125
118
|
display: none;
|
|
126
119
|
}
|
|
127
120
|
|
|
@@ -133,5 +126,12 @@ export const simpleSectionStyles = css `
|
|
|
133
126
|
flex-direction: column;
|
|
134
127
|
flex-grow: 1;
|
|
135
128
|
}
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
/* # Footer */
|
|
132
|
+
|
|
133
|
+
.simple-section__footer[hidden] {
|
|
134
|
+
display: none;
|
|
135
|
+
}
|
|
136
136
|
`;
|
|
137
137
|
//# sourceMappingURL=simple-section.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"simple-section.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/simple-section/simple-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,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAyCf,KAAK;;;;;uBAKL,KAAK,qBAAqB,KAAK;;;;;uBAK/B,KAAK;;;;;4CAKgB,KAAK;;;;;4CAKL,KAAK,qBAAqB,KAAK;;;;;4CAK/B,KAAK
|
|
1
|
+
{"version":3,"file":"simple-section.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/simple-section/simple-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,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAyCf,KAAK;;;;;uBAKL,KAAK,qBAAqB,KAAK;;;;;uBAK/B,KAAK;;;;;4CAKgB,KAAK;;;;;4CAKL,KAAK,qBAAqB,KAAK;;;;;4CAK/B,KAAK;;;;;;;;;;;;;;;;uBAgB1B,KAAK;;;;uBAIL,KAAK,qBAAqB,KAAK;;;;uBAI/B,KAAK;;;;4CAIgB,KAAK;;;;4CAIL,KAAK,qBAAqB,KAAK;;;;4CAI/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BhD,CAAC"}
|
|
@@ -16,9 +16,9 @@ export const twoThirdsOneThirdSectionStyles = css `
|
|
|
16
16
|
--_max-width: var(--semantics-page-sections-body-max-width);
|
|
17
17
|
|
|
18
18
|
display: flex;
|
|
19
|
+
width: 100%;
|
|
19
20
|
flex-direction: column;
|
|
20
21
|
align-items: center;
|
|
21
|
-
width: 100%;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
:host([hidden]) {
|
|
@@ -34,10 +34,10 @@ export const twoThirdsOneThirdSectionStyles = css `
|
|
|
34
34
|
|
|
35
35
|
.two-thirds-one-third-section {
|
|
36
36
|
display: flex;
|
|
37
|
+
box-sizing: border-box;
|
|
38
|
+
width: 100%;
|
|
37
39
|
flex-direction: column;
|
|
38
40
|
align-items: center;
|
|
39
|
-
width: 100%;
|
|
40
|
-
box-sizing: border-box;
|
|
41
41
|
|
|
42
42
|
@media (max-width: ${smMax}) {
|
|
43
43
|
padding-inline: var(--semantics-page-sections-sm-margin-inline);
|
|
@@ -75,9 +75,9 @@ export const twoThirdsOneThirdSectionStyles = css `
|
|
|
75
75
|
|
|
76
76
|
.two-thirds-one-third-section__body {
|
|
77
77
|
display: flex;
|
|
78
|
-
flex-direction: column;
|
|
79
78
|
width: 100%;
|
|
80
79
|
max-width: var(--_max-width);
|
|
80
|
+
flex-direction: column;
|
|
81
81
|
|
|
82
82
|
@media (max-width: ${smMax}) {
|
|
83
83
|
gap: var(--semantics-page-sections-sm-gap);
|
|
@@ -137,13 +137,13 @@ export const twoThirdsOneThirdSectionStyles = css `
|
|
|
137
137
|
}
|
|
138
138
|
|
|
139
139
|
.two-thirds-one-third-section__left-column {
|
|
140
|
-
flex: 2;
|
|
141
140
|
min-width: var(--primitives-area-280);
|
|
141
|
+
flex: 2;
|
|
142
142
|
}
|
|
143
143
|
|
|
144
144
|
.two-thirds-one-third-section__right-column {
|
|
145
|
-
flex: 1;
|
|
146
145
|
min-width: var(--primitives-area-280);
|
|
146
|
+
flex: 1;
|
|
147
147
|
}
|
|
148
148
|
`;
|
|
149
149
|
//# sourceMappingURL=two-thirds-one-third-section.styles.js.map
|
|
@@ -11,21 +11,21 @@ export const popoverStyles = css `
|
|
|
11
11
|
--_max-height: calc(100vh - var(--semantics-overlays-inset) * 2);
|
|
12
12
|
|
|
13
13
|
margin: 0;
|
|
14
|
-
padding: 0;
|
|
15
14
|
border: none;
|
|
16
|
-
background-color: var(--semantics-surfaces-background-color);
|
|
17
15
|
box-shadow: var(--semantics-overlays-box-shadow);
|
|
18
|
-
overflow: auto;
|
|
19
16
|
outline: none;
|
|
17
|
+
background-color: var(--semantics-surfaces-background-color);
|
|
18
|
+
overflow: auto;
|
|
19
|
+
padding: 0;
|
|
20
20
|
isolation: isolate;
|
|
21
21
|
|
|
22
22
|
@media (max-width: ${smMax}) {
|
|
23
23
|
position: fixed;
|
|
24
24
|
inset: auto 0 0 0;
|
|
25
|
+
border-radius: var(--semantics-overlays-corner-radius) var(--semantics-overlays-corner-radius) 0 0;
|
|
25
26
|
width: 100%;
|
|
26
27
|
max-width: 100%;
|
|
27
28
|
max-height: calc(100dvh - var(--semantics-sheets-bottom-top-inset));
|
|
28
|
-
border-radius: var(--semantics-overlays-corner-radius) var(--semantics-overlays-corner-radius) 0 0;
|
|
29
29
|
transform: translateY(100%);
|
|
30
30
|
transition:
|
|
31
31
|
transform var(--semantics-sheets-bottom-animation-duration) var(--primitives-transition-easing-default),
|
|
@@ -11,9 +11,14 @@
|
|
|
11
11
|
* @element nldd-sheet
|
|
12
12
|
*
|
|
13
13
|
* @attr {string} placement - Sheet position: 'left' | 'right' | 'bottom' (default: 'right')
|
|
14
|
-
* @attr {
|
|
15
|
-
*
|
|
16
|
-
*
|
|
14
|
+
* @attr {string} height - Custom height for bottom sheets (and for any sheet on sm
|
|
15
|
+
* viewports, where all placements collapse to bottom). Accepts:
|
|
16
|
+
* `'full'` (default — viewport minus top-inset, identical to
|
|
17
|
+
* omitting the attribute), `'fit-content'` (collapse to content
|
|
18
|
+
* size), or any CSS length/percentage (e.g. `'50dvh'`, `'480px'`,
|
|
19
|
+
* `'50%'`). Always clamped to `100dvh - top-inset` so the sheet
|
|
20
|
+
* can't extend past the dismiss-tap area. No effect on side
|
|
21
|
+
* sheets at md+.
|
|
17
22
|
* @attr {boolean} modeless - Non-modal (no backdrop or focus lock); the sheet is modal by default
|
|
18
23
|
* @attr {string} accessible-label - Accessible name for the dialog, forwarded as aria-label (default: 'Dialoogvenster')
|
|
19
24
|
* @attr {string} width - Custom width for side sheets (left/right) as a CSS length
|
|
@@ -34,7 +39,14 @@ type Placement = 'left' | 'right' | 'bottom';
|
|
|
34
39
|
export declare class NLDDSheet extends LitElement {
|
|
35
40
|
static styles: import("lit").CSSResult;
|
|
36
41
|
placement: Placement;
|
|
37
|
-
|
|
42
|
+
/**
|
|
43
|
+
* Custom height for bottom sheets (and for any sheet on sm viewports
|
|
44
|
+
* where all placements collapse to bottom). Defaults to full-height
|
|
45
|
+
* — `'fit-content'` opts back into the content-sized layout, any CSS
|
|
46
|
+
* length/percentage sets a specific size. Clamped to `100dvh - top-
|
|
47
|
+
* inset` via `max-height` so the dismiss-tap area always remains.
|
|
48
|
+
*/
|
|
49
|
+
height: string;
|
|
38
50
|
modeless: boolean;
|
|
39
51
|
/** Accessible name for the dialog — forwarded as aria-label to the dialog element. */
|
|
40
52
|
accessibleLabel: string;
|
|
@@ -46,6 +58,7 @@ export declare class NLDDSheet extends LitElement {
|
|
|
46
58
|
width: string;
|
|
47
59
|
updated(changed: Map<string, unknown>): void;
|
|
48
60
|
private _hasWarnedLabel;
|
|
61
|
+
private _hasWarnedHeight;
|
|
49
62
|
private _closing;
|
|
50
63
|
private get _dialog();
|
|
51
64
|
connectedCallback(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/sheet/sheet.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/sheet/sheet.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAMjC,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE7C,qBACa,SAAU,SAAQ,UAAU;IACxC,OAAgB,MAAM,0BAAe;IAGrC,SAAS,EAAE,SAAS,CAAW;IAE/B;;;;;;OAMG;IAEH,MAAM,SAAM;IAGZ,QAAQ,UAAS;IAEjB,sFAAsF;IAEtF,eAAe,SAAa;IAE5B;;;;OAIG;IAEH,KAAK,SAAM;IAEF,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IA8B9C,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,gBAAgB,CAAS;IAEjC,OAAO,CAAC,QAAQ,CAAS;IAEzB,OAAO,KAAK,OAAO,GAElB;IAEQ,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;IAKrC,IAAI,IAAI,IAAI;IAmBZ,OAAO,CAAC,YAAY;IAWpB,IAAI,IAAI,IAAI;IAyBZ,kBAAkB,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAOvC,aAAa,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAM7B,OAAO,CAAC,cAAc,CAEpB;IAEO,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}
|
|
@@ -11,9 +11,14 @@
|
|
|
11
11
|
* @element nldd-sheet
|
|
12
12
|
*
|
|
13
13
|
* @attr {string} placement - Sheet position: 'left' | 'right' | 'bottom' (default: 'right')
|
|
14
|
-
* @attr {
|
|
15
|
-
*
|
|
16
|
-
*
|
|
14
|
+
* @attr {string} height - Custom height for bottom sheets (and for any sheet on sm
|
|
15
|
+
* viewports, where all placements collapse to bottom). Accepts:
|
|
16
|
+
* `'full'` (default — viewport minus top-inset, identical to
|
|
17
|
+
* omitting the attribute), `'fit-content'` (collapse to content
|
|
18
|
+
* size), or any CSS length/percentage (e.g. `'50dvh'`, `'480px'`,
|
|
19
|
+
* `'50%'`). Always clamped to `100dvh - top-inset` so the sheet
|
|
20
|
+
* can't extend past the dismiss-tap area. No effect on side
|
|
21
|
+
* sheets at md+.
|
|
17
22
|
* @attr {boolean} modeless - Non-modal (no backdrop or focus lock); the sheet is modal by default
|
|
18
23
|
* @attr {string} accessible-label - Accessible name for the dialog, forwarded as aria-label (default: 'Dialoogvenster')
|
|
19
24
|
* @attr {string} width - Custom width for side sheets (left/right) as a CSS length
|
|
@@ -44,7 +49,14 @@ let NLDDSheet = class NLDDSheet extends LitElement {
|
|
|
44
49
|
constructor() {
|
|
45
50
|
super(...arguments);
|
|
46
51
|
this.placement = 'right';
|
|
47
|
-
|
|
52
|
+
/**
|
|
53
|
+
* Custom height for bottom sheets (and for any sheet on sm viewports
|
|
54
|
+
* where all placements collapse to bottom). Defaults to full-height
|
|
55
|
+
* — `'fit-content'` opts back into the content-sized layout, any CSS
|
|
56
|
+
* length/percentage sets a specific size. Clamped to `100dvh - top-
|
|
57
|
+
* inset` via `max-height` so the dismiss-tap area always remains.
|
|
58
|
+
*/
|
|
59
|
+
this.height = '';
|
|
48
60
|
this.modeless = false;
|
|
49
61
|
/** Accessible name for the dialog — forwarded as aria-label to the dialog element. */
|
|
50
62
|
this.accessibleLabel = 'Venster';
|
|
@@ -55,6 +67,7 @@ let NLDDSheet = class NLDDSheet extends LitElement {
|
|
|
55
67
|
*/
|
|
56
68
|
this.width = '';
|
|
57
69
|
this._hasWarnedLabel = false;
|
|
70
|
+
this._hasWarnedHeight = false;
|
|
58
71
|
this._closing = false;
|
|
59
72
|
this._handleDismiss = () => {
|
|
60
73
|
this.hide();
|
|
@@ -69,6 +82,27 @@ let NLDDSheet = class NLDDSheet extends LitElement {
|
|
|
69
82
|
this.style.removeProperty('--_width');
|
|
70
83
|
}
|
|
71
84
|
}
|
|
85
|
+
if (changed.has('height')) {
|
|
86
|
+
const h = this.height;
|
|
87
|
+
// `'full'` is an explicit alias for the default (no var → CSS
|
|
88
|
+
// fallback to `calc(100dvh - top-inset)`). Anything else flows
|
|
89
|
+
// through CSS.supports so typos and bogus values silently fall
|
|
90
|
+
// back to the default rather than producing a broken layout.
|
|
91
|
+
if (h && h !== 'full' && CSS.supports('height', h)) {
|
|
92
|
+
this.style.setProperty('--_height', h);
|
|
93
|
+
}
|
|
94
|
+
else {
|
|
95
|
+
// One warning per instance for the element's lifetime (matches
|
|
96
|
+
// _hasWarnedLabel): a later distinct invalid value won't warn
|
|
97
|
+
// again. Acceptable for a dev-only nudge — not worth tracking
|
|
98
|
+
// per-value state to re-warn.
|
|
99
|
+
if (import.meta.env?.DEV && h && h !== 'full' && !this._hasWarnedHeight) {
|
|
100
|
+
this._hasWarnedHeight = true;
|
|
101
|
+
console.warn(`<nldd-sheet>: Invalid height value "${h}". Falling back to full height. Use 'full', 'fit-content', or a valid CSS length (e.g. '50dvh', '480px').`);
|
|
102
|
+
}
|
|
103
|
+
this.style.removeProperty('--_height');
|
|
104
|
+
}
|
|
105
|
+
}
|
|
72
106
|
}
|
|
73
107
|
get _dialog() {
|
|
74
108
|
return this.shadowRoot?.querySelector('dialog') ?? null;
|
|
@@ -157,8 +191,8 @@ __decorate([
|
|
|
157
191
|
property({ type: String, reflect: true })
|
|
158
192
|
], NLDDSheet.prototype, "placement", void 0);
|
|
159
193
|
__decorate([
|
|
160
|
-
property({ type:
|
|
161
|
-
], NLDDSheet.prototype, "
|
|
194
|
+
property({ type: String, reflect: true })
|
|
195
|
+
], NLDDSheet.prototype, "height", void 0);
|
|
162
196
|
__decorate([
|
|
163
197
|
property({ type: Boolean, reflect: true })
|
|
164
198
|
], NLDDSheet.prototype, "modeless", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sheet.js","sourceRoot":"","sources":["../../../../src/components/layout/sheet/sheet.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"sheet.js","sourceRoot":"","sources":["../../../../src/components/layout/sheet/sheet.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sheet.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/sheet/sheet.styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"sheet.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/sheet/sheet.styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,WAAW,yBA8NvB,CAAC"}
|