@db-ux/core-components 3.0.2-shell2-badc28f → 3.0.2-shell4-bdb351c

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.
Files changed (15) hide show
  1. package/build/components/control-panel-flat-icon-navigation/control-panel-flat-icon-navigation.css +30 -0
  2. package/build/components/control-panel-flat-icon-navigation/control-panel-flat-icon-navigation.scss +11 -0
  3. package/build/components/control-panel-mobile/control-panel-mobile.css +4 -2
  4. package/build/components/control-panel-mobile/control-panel-mobile.scss +3 -1
  5. package/build/components/drawer/drawer.css +1 -1
  6. package/build/components/drawer/drawer.scss +1 -1
  7. package/build/components/shell/shell-mobile.css +26 -12
  8. package/build/components/shell/shell-mobile.scss +42 -12
  9. package/build/components/shell/shell.css +26 -12
  10. package/build/styles/absolute.css +2 -2
  11. package/build/styles/index.css +2 -2
  12. package/build/styles/relative.css +2 -2
  13. package/build/styles/rollup.css +2 -2
  14. package/build/styles/webpack.css +2 -2
  15. package/package.json +2 -2
package/build/components/control-panel-flat-icon-navigation/control-panel-flat-icon-navigation.css CHANGED
@@ -136,6 +136,19 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
136
136
  * @mixin screen-min-max
137
137
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
138
138
  */
139
+ /* Sub components for shell */
140
+ .db-control-panel-flat-icon-navigation .db-navigation > menu .db-navigation-item a::after {
141
+ content: "";
142
+ position: absolute;
143
+ border-radius: var(--db-border-radius-xs);
144
+ background: linear-gradient(135deg, var(--db-pride-red, var(--db-brand-on-bg-basic-emphasis-70-default)) 16.7%, var(--db-pride-orange, var(--db-brand-on-bg-basic-emphasis-70-default)) 0, var(--db-pride-orange, var(--db-brand-on-bg-basic-emphasis-70-default)) 33.4%, var(--db-pride-yellow, var(--db-brand-on-bg-basic-emphasis-70-default)) 0, var(--db-pride-yellow, var(--db-brand-on-bg-basic-emphasis-70-default)) 50.1%, var(--db-pride-green, var(--db-brand-on-bg-basic-emphasis-70-default)) 0, var(--db-pride-green, var(--db-brand-on-bg-basic-emphasis-70-default)) 66.8%, var(--db-pride-blue, var(--db-brand-on-bg-basic-emphasis-70-default)) 0, var(--db-pride-blue, var(--db-brand-on-bg-basic-emphasis-70-default)) 83.5%, var(--db-pride-violet, var(--db-brand-on-bg-basic-emphasis-70-default)) 0);
145
+ }
146
+ @media screen and (prefers-reduced-motion: no-preference) {
147
+ .db-control-panel-flat-icon-navigation .db-navigation > menu .db-navigation-item a::after {
148
+ transition: height var(--db-transition-duration-fast) var(--db-transition-timing-emotional), width var(--db-transition-duration-fast) var(--db-transition-timing-emotional);
149
+ }
150
+ }
151
+
139
152
  .db-control-panel-flat-icon-navigation {
140
153
  display: none;
141
154
  }
@@ -160,6 +173,22 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
160
173
  min-block-size: var(--db-sizing-md);
161
174
  min-inline-size: var(--db-sizing-md);
162
175
  }
176
+ .db-control-panel-flat-icon-navigation .db-navigation > menu .db-navigation-item a::after {
177
+ block-size: var(--db-border-width-xs);
178
+ inline-size: 0;
179
+ transform: translate(-50%, 0);
180
+ inset-inline-start: 50%;
181
+ inset-block: auto calc(-1 * var(--db-spacing-fixed-xs));
182
+ }
183
+ .db-control-panel-flat-icon-navigation .db-navigation > menu .db-navigation-item a:has([aria-current=page])::after, .db-control-panel-flat-icon-navigation .db-navigation > menu .db-navigation-item a:has([data-active=true])::after, .db-control-panel-flat-icon-navigation .db-navigation > menu .db-navigation-item a[aria-current=page]::after, .db-control-panel-flat-icon-navigation .db-navigation > menu .db-navigation-item a[data-active=true]::after {
184
+ block-size: var(--db-border-width-xs);
185
+ inline-size: 100%;
186
+ }
187
+ @media (forced-colors: active) {
188
+ .db-control-panel-flat-icon-navigation .db-navigation > menu .db-navigation-item a:has([aria-current=page])::after, .db-control-panel-flat-icon-navigation .db-navigation > menu .db-navigation-item a:has([data-active=true])::after, .db-control-panel-flat-icon-navigation .db-navigation > menu .db-navigation-item a[aria-current=page]::after, .db-control-panel-flat-icon-navigation .db-navigation > menu .db-navigation-item a[data-active=true]::after {
189
+ border: calc(var(--db-border-width-xs) - 1px) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
190
+ }
191
+ }
163
192
  .db-control-panel-flat-icon-navigation .db-navigation .db-navigation-item:not([data-icon]),
164
193
  .db-control-panel-flat-icon-navigation .db-navigation .db-navigation-item-group {
165
194
  display: none;
@@ -189,4 +218,5 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
189
218
  padding-block: var(--nav-icon-size) 0;
190
219
  padding-inline-end: var(--db-spacing-fixed-3xs);
191
220
  inline-size: fit-content;
221
+ justify-content: center;
192
222
  }
package/build/components/control-panel-flat-icon-navigation/control-panel-flat-icon-navigation.scss CHANGED
@@ -2,6 +2,8 @@
2
2
  @use "@db-ux/core-foundations/build/styles/variables";
3
3
  @use "@db-ux/core-foundations/build/styles/fonts";
4
4
  @use "../../styles/internal/form-components";
5
+ @use "../../styles/internal/navigation-item";
6
+ @use "../../styles/internal/indicator";
5
7
 
6
8
  .db-control-panel-flat-icon-navigation {
7
9
  display: none;
@@ -24,8 +26,16 @@
24
26
  align-items: center;
25
27
 
26
28
  a {
29
+ @extend %indicator;
30
+
27
31
  min-block-size: variables.$db-sizing-md;
28
32
  min-inline-size: variables.$db-sizing-md;
33
+
34
+ @include indicator.set-indicator-horizontal();
35
+
36
+ @include navigation-item.active-navigation-item {
37
+ @include indicator.show-indicator-horizontal();
38
+ }
29
39
  }
30
40
  }
31
41
  }
@@ -77,6 +87,7 @@
77
87
  padding-block: var(--nav-icon-size) 0;
78
88
  padding-inline-end: variables.$db-spacing-fixed-3xs;
79
89
  inline-size: fit-content;
90
+ justify-content: center;
80
91
  }
81
92
  }
82
93
  }
package/build/components/control-panel-mobile/control-panel-mobile.css CHANGED
@@ -173,7 +173,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
173
173
  .db-drawer .db-drawer-container[data-direction=down]:not([data-width=full]), .db-control-panel-mobile[data-position=bottom] .db-drawer > .db-drawer-container:not([data-width=full]), .db-drawer .db-drawer-container[data-direction=up]:not([data-width=full]) {
174
174
  max-block-size: var(--db-drawer-max-height, calc(100% - var(--db-spacing-fixed-xl)));
175
175
  min-block-size: var(--db-drawer-min-height, calc(100% - var(--db-spacing-fixed-xl)));
176
- max-inline-size: none;
176
+ max-inline-size: 100vw;
177
177
  }
178
178
 
179
179
  .db-control-panel-mobile[data-position=bottom] .db-drawer > .db-drawer-container, .db-drawer .db-drawer-container[data-direction=up] {
@@ -591,8 +591,10 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
591
591
  }
592
592
  .db-control-panel-mobile .db-drawer {
593
593
  --db-drawer-content-padding-inline: 0;
594
- --db-drawer-max-width: variables.$db-container-xs;
594
+ --db-drawer-max-width: var(--db-container-xs);
595
595
  --db-drawer-max-height: 63vh;
596
+ --db-drawer-min-width: var(--db-container-xs);
597
+ --db-drawer-min-height: 63vh;
596
598
  }
597
599
  .db-control-panel-mobile .db-drawer > .db-drawer-container > .db-drawer-content {
598
600
  display: flex;
package/build/components/control-panel-mobile/control-panel-mobile.scss CHANGED
@@ -59,8 +59,10 @@
59
59
 
60
60
  .db-drawer {
61
61
  --db-drawer-content-padding-inline: 0;
62
- --db-drawer-max-width: variables.$db-container-xs;
62
+ --db-drawer-max-width: #{variables.$db-container-xs};
63
63
  --db-drawer-max-height: 63vh;
64
+ --db-drawer-min-width: #{variables.$db-container-xs};
65
+ --db-drawer-min-height: 63vh;
64
66
 
65
67
  > .db-drawer-container {
66
68
  > .db-drawer-content {
package/build/components/drawer/drawer.css CHANGED
@@ -172,7 +172,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
172
172
  .db-drawer .db-drawer-container[data-direction=down]:not([data-width=full]), .db-drawer .db-drawer-container[data-direction=up]:not([data-width=full]) {
173
173
  max-block-size: var(--db-drawer-max-height, calc(100% - var(--db-spacing-fixed-xl)));
174
174
  min-block-size: var(--db-drawer-min-height, calc(100% - var(--db-spacing-fixed-xl)));
175
- max-inline-size: none;
175
+ max-inline-size: 100vw;
176
176
  }
177
177
 
178
178
  .db-drawer .db-drawer-container[data-direction=up] {
package/build/components/drawer/drawer.scss CHANGED
@@ -34,7 +34,7 @@
34
34
  --db-drawer-min-height,
35
35
  calc(100% - #{variables.$db-spacing-fixed-xl})
36
36
  );
37
- max-inline-size: none;
37
+ max-inline-size: 100vw;
38
38
  }
39
39
  }
40
40
 
package/build/components/shell/shell-mobile.css CHANGED
@@ -252,7 +252,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
252
252
  .db-drawer .db-drawer-container[data-direction=down]:not([data-width=full]), .db-drawer .db-drawer-container[data-direction=up]:not([data-width=full]) {
253
253
  max-block-size: var(--db-drawer-max-height, calc(100% - var(--db-spacing-fixed-xl)));
254
254
  min-block-size: var(--db-drawer-min-height, calc(100% - var(--db-spacing-fixed-xl)));
255
- max-inline-size: none;
255
+ max-inline-size: 100vw;
256
256
  }
257
257
 
258
258
  .db-drawer .db-drawer-container[data-direction=up] {
@@ -479,18 +479,25 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
479
479
  /* stylelint-disable-next-line at-rule-empty-line-before */
480
480
  }
481
481
  @media screen and (width <= 48em) {
482
- .db-shell[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]), .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] {
482
+ .db-shell[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]), .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=none] {
483
+ grid-template-areas: "control-panel" "main";
484
+ grid-template-rows: [control-panel] auto [main] 1fr;
485
+ }
486
+ .db-shell[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]) > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]) > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]) > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=none] > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=none] > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=none] > .db-shell-sub-navigation {
487
+ display: none;
488
+ }
489
+ .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] {
483
490
  grid-template-areas: "control-panel" "sub-navigation" "main";
484
491
  grid-template-rows: [control-panel] auto [sub-navigation] auto [main] 1fr;
485
492
  }
486
- .db-shell[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]) > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]) > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]) > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation {
493
+ .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation {
487
494
  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
488
495
  position: var(--db-tooltip-parent-position, relative);
489
496
  }
490
- .db-shell[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]) > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-emphasis=strong], .db-shell[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]) > db-shell-sub-navigation > .db-shell-sub-navigation[data-emphasis=strong], .db-shell[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]) > .db-shell-sub-navigation[data-emphasis=strong], .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-emphasis=strong], .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation[data-emphasis=strong], .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation[data-emphasis=strong] {
497
+ .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-emphasis=strong], .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation[data-emphasis=strong], .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation[data-emphasis=strong] {
491
498
  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
492
499
  }
493
- .db-shell[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]) > * > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]) > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]) > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation::before {
500
+ .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation::before {
494
501
  content: "";
495
502
  background-color: var(--db-divider-bg-color);
496
503
  position: absolute;
@@ -502,7 +509,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
502
509
  }
503
510
  }
504
511
  @media screen and (width <= 48em) and (forced-colors: active) {
505
- .db-shell[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]) > * > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]) > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]) > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation::before {
512
+ .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation::before {
506
513
  border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
507
514
  }
508
515
  }
@@ -535,18 +542,25 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
535
542
  }
536
543
  }
537
544
  @media screen and (width <= 48em) {
538
- .db-shell[data-control-panel-mobile-position=bottom] {
545
+ .db-shell[data-control-panel-mobile-position=bottom]:not([data-sub-navigation-mobile-position]), .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=bottom], .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=none] {
546
+ grid-template-areas: "main" "control-panel";
547
+ grid-template-rows: [main] 1fr [control-panel] auto;
548
+ }
549
+ .db-shell[data-control-panel-mobile-position=bottom]:not([data-sub-navigation-mobile-position]) > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom]:not([data-sub-navigation-mobile-position]) > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom]:not([data-sub-navigation-mobile-position]) > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=bottom] > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=bottom] > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=bottom] > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=none] > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=none] > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=none] > .db-shell-sub-navigation {
550
+ display: none;
551
+ }
552
+ .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] {
539
553
  grid-template-areas: "sub-navigation" "main" "control-panel";
540
- grid-template-rows: [control-panel] auto [main] 1fr [control-panel] auto;
554
+ grid-template-rows: [sub-navigation] auto [main] 1fr [control-panel] auto;
541
555
  }
542
- .db-shell[data-control-panel-mobile-position=bottom] > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom] > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom] > .db-shell-sub-navigation {
556
+ .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation {
543
557
  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
544
558
  position: var(--db-tooltip-parent-position, relative);
545
559
  }
546
- .db-shell[data-control-panel-mobile-position=bottom] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-emphasis=strong], .db-shell[data-control-panel-mobile-position=bottom] > db-shell-sub-navigation > .db-shell-sub-navigation[data-emphasis=strong], .db-shell[data-control-panel-mobile-position=bottom] > .db-shell-sub-navigation[data-emphasis=strong] {
560
+ .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-emphasis=strong], .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation[data-emphasis=strong], .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation[data-emphasis=strong] {
547
561
  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
548
562
  }
549
- .db-shell[data-control-panel-mobile-position=bottom] > * > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=bottom] > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=bottom] > .db-shell-sub-navigation::before {
563
+ .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation::before {
550
564
  content: "";
551
565
  background-color: var(--db-divider-bg-color);
552
566
  position: absolute;
@@ -558,7 +572,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
558
572
  }
559
573
  }
560
574
  @media screen and (width <= 48em) and (forced-colors: active) {
561
- .db-shell[data-control-panel-mobile-position=bottom] > * > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=bottom] > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=bottom] > .db-shell-sub-navigation::before {
575
+ .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation::before {
562
576
  border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
563
577
  }
564
578
  }
package/build/components/shell/shell-mobile.scss CHANGED
@@ -15,6 +15,19 @@
15
15
  ) {
16
16
  &[data-control-panel-mobile-position="top"] {
17
17
  &:not([data-sub-navigation-mobile-position]),
18
+ &[data-sub-navigation-mobile-position="none"] {
19
+ grid-template-areas:
20
+ "control-panel"
21
+ "main";
22
+ grid-template-rows:
23
+ [control-panel] auto
24
+ [main] 1fr;
25
+
26
+ #{string.unquote(custom-elements.$shell-sub-navigation)} {
27
+ display: none;
28
+ }
29
+ }
30
+
18
31
  &[data-sub-navigation-mobile-position="top"] {
19
32
  grid-template-areas:
20
33
  "control-panel"
@@ -47,17 +60,34 @@
47
60
  }
48
61
 
49
62
  &[data-control-panel-mobile-position="bottom"] {
50
- grid-template-areas:
51
- "sub-navigation"
52
- "main"
53
- "control-panel";
54
- grid-template-rows:
55
- [control-panel] auto
56
- [main] 1fr
57
- [control-panel] auto;
58
-
59
- #{string.unquote(custom-elements.$shell-sub-navigation)} {
60
- @include helpers.divider("bottom");
63
+ &:not([data-sub-navigation-mobile-position]),
64
+ &[data-sub-navigation-mobile-position="bottom"],
65
+ &[data-sub-navigation-mobile-position="none"] {
66
+ grid-template-areas:
67
+ "main"
68
+ "control-panel";
69
+ grid-template-rows:
70
+ [main] 1fr
71
+ [control-panel] auto;
72
+
73
+ #{string.unquote(custom-elements.$shell-sub-navigation)} {
74
+ display: none;
75
+ }
76
+ }
77
+
78
+ &[data-sub-navigation-mobile-position="top"] {
79
+ grid-template-areas:
80
+ "sub-navigation"
81
+ "main"
82
+ "control-panel";
83
+ grid-template-rows:
84
+ [sub-navigation] auto
85
+ [main] 1fr
86
+ [control-panel] auto;
87
+
88
+ #{string.unquote(custom-elements.$shell-sub-navigation)} {
89
+ @include helpers.divider("bottom");
90
+ }
61
91
  }
62
92
  }
63
93
 
@@ -73,7 +103,7 @@
73
103
  display: none !important;
74
104
  }
75
105
 
76
- .db-navigation{
106
+ .db-navigation {
77
107
  --db-overflow-scroll-button-inset-block: #{variables.$db-spacing-fixed-xs};
78
108
  --db-overflow-scroll-button-inset-inline-start: 0;
79
109
 
package/build/components/shell/shell.css CHANGED
@@ -1015,7 +1015,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
1015
1015
  .db-drawer .db-drawer-container[data-direction=down]:not([data-width=full]), .db-shell[data-control-panel-mobile-position=bottom] > * > db-control-panel-mobile > .db-control-panel-mobile .db-drawer > .db-drawer-container:not([data-width=full]), .db-shell[data-control-panel-mobile-position=bottom] > db-control-panel-mobile > .db-control-panel-mobile .db-drawer > .db-drawer-container:not([data-width=full]), .db-shell[data-control-panel-mobile-position=bottom] > .db-control-panel-mobile .db-drawer > .db-drawer-container:not([data-width=full]), .db-drawer .db-drawer-container[data-direction=up]:not([data-width=full]) {
1016
1016
  max-block-size: var(--db-drawer-max-height, calc(100% - var(--db-spacing-fixed-xl)));
1017
1017
  min-block-size: var(--db-drawer-min-height, calc(100% - var(--db-spacing-fixed-xl)));
1018
- max-inline-size: none;
1018
+ max-inline-size: 100vw;
1019
1019
  }
1020
1020
 
1021
1021
  .db-shell[data-control-panel-mobile-position=bottom] > * > db-control-panel-mobile > .db-control-panel-mobile .db-drawer > .db-drawer-container, .db-shell[data-control-panel-mobile-position=bottom] > db-control-panel-mobile > .db-control-panel-mobile .db-drawer > .db-drawer-container, .db-shell[data-control-panel-mobile-position=bottom] > .db-control-panel-mobile .db-drawer > .db-drawer-container, .db-drawer .db-drawer-container[data-direction=up] {
@@ -1685,18 +1685,25 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
1685
1685
  /* stylelint-disable-next-line at-rule-empty-line-before */
1686
1686
  }
1687
1687
  @media screen and (width <= 48em) {
1688
- .db-shell[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]), .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] {
1688
+ .db-shell[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]), .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=none] {
1689
+ grid-template-areas: "control-panel" "main";
1690
+ grid-template-rows: [control-panel] auto [main] 1fr;
1691
+ }
1692
+ .db-shell[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]) > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]) > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]) > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=none] > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=none] > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=none] > .db-shell-sub-navigation {
1693
+ display: none;
1694
+ }
1695
+ .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] {
1689
1696
  grid-template-areas: "control-panel" "sub-navigation" "main";
1690
1697
  grid-template-rows: [control-panel] auto [sub-navigation] auto [main] 1fr;
1691
1698
  }
1692
- .db-shell[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]) > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]) > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]) > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation {
1699
+ .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation {
1693
1700
  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
1694
1701
  position: var(--db-tooltip-parent-position, relative);
1695
1702
  }
1696
- .db-shell[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]) > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-emphasis=strong], .db-shell[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]) > db-shell-sub-navigation > .db-shell-sub-navigation[data-emphasis=strong], .db-shell[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]) > .db-shell-sub-navigation[data-emphasis=strong], .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-emphasis=strong], .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation[data-emphasis=strong], .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation[data-emphasis=strong] {
1703
+ .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-emphasis=strong], .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation[data-emphasis=strong], .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation[data-emphasis=strong] {
1697
1704
  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
1698
1705
  }
1699
- .db-shell[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]) > * > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]) > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]) > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation::before {
1706
+ .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation::before {
1700
1707
  content: "";
1701
1708
  background-color: var(--db-divider-bg-color);
1702
1709
  position: absolute;
@@ -1708,7 +1715,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
1708
1715
  }
1709
1716
  }
1710
1717
  @media screen and (width <= 48em) and (forced-colors: active) {
1711
- .db-shell[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]) > * > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]) > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=top]:not([data-sub-navigation-mobile-position]) > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation::before {
1718
+ .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=top][data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation::before {
1712
1719
  border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
1713
1720
  }
1714
1721
  }
@@ -1741,18 +1748,25 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
1741
1748
  }
1742
1749
  }
1743
1750
  @media screen and (width <= 48em) {
1744
- .db-shell[data-control-panel-mobile-position=bottom] {
1751
+ .db-shell[data-control-panel-mobile-position=bottom]:not([data-sub-navigation-mobile-position]), .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=bottom], .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=none] {
1752
+ grid-template-areas: "main" "control-panel";
1753
+ grid-template-rows: [main] 1fr [control-panel] auto;
1754
+ }
1755
+ .db-shell[data-control-panel-mobile-position=bottom]:not([data-sub-navigation-mobile-position]) > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom]:not([data-sub-navigation-mobile-position]) > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom]:not([data-sub-navigation-mobile-position]) > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=bottom] > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=bottom] > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=bottom] > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=none] > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=none] > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=none] > .db-shell-sub-navigation {
1756
+ display: none;
1757
+ }
1758
+ .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] {
1745
1759
  grid-template-areas: "sub-navigation" "main" "control-panel";
1746
- grid-template-rows: [control-panel] auto [main] 1fr [control-panel] auto;
1760
+ grid-template-rows: [sub-navigation] auto [main] 1fr [control-panel] auto;
1747
1761
  }
1748
- .db-shell[data-control-panel-mobile-position=bottom] > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom] > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom] > .db-shell-sub-navigation {
1762
+ .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation {
1749
1763
  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
1750
1764
  position: var(--db-tooltip-parent-position, relative);
1751
1765
  }
1752
- .db-shell[data-control-panel-mobile-position=bottom] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-emphasis=strong], .db-shell[data-control-panel-mobile-position=bottom] > db-shell-sub-navigation > .db-shell-sub-navigation[data-emphasis=strong], .db-shell[data-control-panel-mobile-position=bottom] > .db-shell-sub-navigation[data-emphasis=strong] {
1766
+ .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation[data-emphasis=strong], .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation[data-emphasis=strong], .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation[data-emphasis=strong] {
1753
1767
  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
1754
1768
  }
1755
- .db-shell[data-control-panel-mobile-position=bottom] > * > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=bottom] > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=bottom] > .db-shell-sub-navigation::before {
1769
+ .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation::before {
1756
1770
  content: "";
1757
1771
  background-color: var(--db-divider-bg-color);
1758
1772
  position: absolute;
@@ -1764,7 +1778,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
1764
1778
  }
1765
1779
  }
1766
1780
  @media screen and (width <= 48em) and (forced-colors: active) {
1767
- .db-shell[data-control-panel-mobile-position=bottom] > * > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=bottom] > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=bottom] > .db-shell-sub-navigation::before {
1781
+ .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > * > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > db-shell-sub-navigation > .db-shell-sub-navigation::before, .db-shell[data-control-panel-mobile-position=bottom][data-sub-navigation-mobile-position=top] > .db-shell-sub-navigation::before {
1768
1782
  border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
1769
1783
  }
1770
1784
  }