@sbb-esta/lyne-elements-dev 5.8.0-dev.1789370784 → 5.8.0-dev.1789399194
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/core.js +20 -20
- package/custom-elements.json +33 -5
- package/development/core/dom/scroll.d.ts +15 -2
- package/development/core.js +63 -9
- package/development/dialog.pure.js +3 -3
- package/development/header.pure.js +1 -1
- package/dialog/_dialog.global.scss +7 -6
- package/dialog.pure.js +3 -3
- package/header.pure.js +1 -1
- package/lean-off-brand-theme.css +7 -6
- package/lean-safety-theme.css +7 -6
- package/lean-theme.css +7 -6
- package/off-brand-theme.css +7 -6
- package/package.json +2 -2
- package/safety-theme.css +7 -6
- package/standard-theme.css +7 -6
package/custom-elements.json
CHANGED
|
@@ -11769,12 +11769,21 @@
|
|
|
11769
11769
|
},
|
|
11770
11770
|
{
|
|
11771
11771
|
"kind": "class",
|
|
11772
|
-
"description": "Handle the page scroll, allowing to disable/enable the window scroll avoiding a potential\ncontent shift caused by the disappearance/appearance of the scrollbar.",
|
|
11772
|
+
"description": "Handle the page scroll, allowing to disable/enable the window scroll avoiding a potential\ncontent shift caused by the disappearance/appearance of the scrollbar.\n\nThe body is fixed in place (instead of just using `overflow: hidden`), which reliably prevents\nscrolling of the underlying page. The current scroll position is stored before\nfixing the body and restored again once the scroll is re-enabled, so the page doesn't jump\nand content that was previously scrolled out of view isn't hidden behind the fixed body.\n\nAs an additional safety net for edge cases, `touchmove` events are intercepted and prevented,\nunless they originate from within a scrollable element that is not at its scroll boundary\n(e.g. an internal scrollable content of a dialog, navigation, sidebar, etc.).",
|
|
11773
11773
|
"name": "SbbScrollHandler",
|
|
11774
11774
|
"members": [
|
|
11775
11775
|
{
|
|
11776
11776
|
"kind": "field",
|
|
11777
|
-
"name": "
|
|
11777
|
+
"name": "_scrollPosition",
|
|
11778
|
+
"type": {
|
|
11779
|
+
"text": "number"
|
|
11780
|
+
},
|
|
11781
|
+
"privacy": "private",
|
|
11782
|
+
"default": "0"
|
|
11783
|
+
},
|
|
11784
|
+
{
|
|
11785
|
+
"kind": "field",
|
|
11786
|
+
"name": "_position",
|
|
11778
11787
|
"type": {
|
|
11779
11788
|
"text": "string"
|
|
11780
11789
|
},
|
|
@@ -11782,7 +11791,7 @@
|
|
|
11782
11791
|
},
|
|
11783
11792
|
{
|
|
11784
11793
|
"kind": "field",
|
|
11785
|
-
"name": "
|
|
11794
|
+
"name": "_top",
|
|
11786
11795
|
"type": {
|
|
11787
11796
|
"text": "string"
|
|
11788
11797
|
},
|
|
@@ -11790,7 +11799,7 @@
|
|
|
11790
11799
|
},
|
|
11791
11800
|
{
|
|
11792
11801
|
"kind": "field",
|
|
11793
|
-
"name": "
|
|
11802
|
+
"name": "_insetInline",
|
|
11794
11803
|
"type": {
|
|
11795
11804
|
"text": "string"
|
|
11796
11805
|
},
|
|
@@ -11798,12 +11807,31 @@
|
|
|
11798
11807
|
},
|
|
11799
11808
|
{
|
|
11800
11809
|
"kind": "field",
|
|
11801
|
-
"name": "
|
|
11810
|
+
"name": "_overflow",
|
|
11802
11811
|
"type": {
|
|
11803
11812
|
"text": "string"
|
|
11804
11813
|
},
|
|
11805
11814
|
"privacy": "private"
|
|
11806
11815
|
},
|
|
11816
|
+
{
|
|
11817
|
+
"kind": "field",
|
|
11818
|
+
"name": "_touchStartY",
|
|
11819
|
+
"type": {
|
|
11820
|
+
"text": "number"
|
|
11821
|
+
},
|
|
11822
|
+
"privacy": "private",
|
|
11823
|
+
"default": "0"
|
|
11824
|
+
},
|
|
11825
|
+
{
|
|
11826
|
+
"kind": "field",
|
|
11827
|
+
"name": "_touchStart",
|
|
11828
|
+
"privacy": "private"
|
|
11829
|
+
},
|
|
11830
|
+
{
|
|
11831
|
+
"kind": "field",
|
|
11832
|
+
"name": "_touchMove",
|
|
11833
|
+
"privacy": "private"
|
|
11834
|
+
},
|
|
11807
11835
|
{
|
|
11808
11836
|
"kind": "method",
|
|
11809
11837
|
"name": "disableScroll",
|
|
@@ -2,12 +2,25 @@ export declare function pageScrollDisabled(): boolean;
|
|
|
2
2
|
/**
|
|
3
3
|
* Handle the page scroll, allowing to disable/enable the window scroll avoiding a potential
|
|
4
4
|
* content shift caused by the disappearance/appearance of the scrollbar.
|
|
5
|
+
*
|
|
6
|
+
* The body is fixed in place (instead of just using `overflow: hidden`), which reliably prevents
|
|
7
|
+
* scrolling of the underlying page. The current scroll position is stored before
|
|
8
|
+
* fixing the body and restored again once the scroll is re-enabled, so the page doesn't jump
|
|
9
|
+
* and content that was previously scrolled out of view isn't hidden behind the fixed body.
|
|
10
|
+
*
|
|
11
|
+
* As an additional safety net for edge cases, `touchmove` events are intercepted and prevented,
|
|
12
|
+
* unless they originate from within a scrollable element that is not at its scroll boundary
|
|
13
|
+
* (e.g. an internal scrollable content of a dialog, navigation, sidebar, etc.).
|
|
5
14
|
*/
|
|
6
15
|
export declare class SbbScrollHandler {
|
|
7
|
-
private
|
|
16
|
+
private _scrollPosition;
|
|
8
17
|
private _position;
|
|
18
|
+
private _top;
|
|
19
|
+
private _insetInline;
|
|
9
20
|
private _overflow;
|
|
10
|
-
private
|
|
21
|
+
private _touchStartY;
|
|
22
|
+
private _touchStart;
|
|
23
|
+
private _touchMove;
|
|
11
24
|
disableScroll(): void;
|
|
12
25
|
enableScroll(): void;
|
|
13
26
|
}
|
package/development/core.js
CHANGED
|
@@ -4588,32 +4588,86 @@ function pageScrollDisabled() {
|
|
|
4588
4588
|
return document.body.hasAttribute("data-sbb-scroll-disabled");
|
|
4589
4589
|
}
|
|
4590
4590
|
/**
|
|
4591
|
+
* Checks whether the given element can be scrolled vertically
|
|
4592
|
+
* (i.e. it has an overflow of `auto`/`scroll` and its content overflows its box).
|
|
4593
|
+
*/
|
|
4594
|
+
function isVerticallyScrollable(element) {
|
|
4595
|
+
const overflowY = getComputedStyle(element).overflowY;
|
|
4596
|
+
return (overflowY === "auto" || overflowY === "scroll") && element.scrollHeight > element.clientHeight;
|
|
4597
|
+
}
|
|
4598
|
+
/**
|
|
4599
|
+
* Walks the event's composed path (to properly support shadow DOM) and returns the
|
|
4600
|
+
* closest scrollable ancestor, if any, stopping at `document.body`/`document.documentElement`.
|
|
4601
|
+
*/
|
|
4602
|
+
function findScrollableAncestor(path) {
|
|
4603
|
+
for (const target of path) {
|
|
4604
|
+
if (target === document.body || target === document.documentElement) break;
|
|
4605
|
+
if (target instanceof Element && isVerticallyScrollable(target)) return target;
|
|
4606
|
+
}
|
|
4607
|
+
return null;
|
|
4608
|
+
}
|
|
4609
|
+
/**
|
|
4591
4610
|
* Handle the page scroll, allowing to disable/enable the window scroll avoiding a potential
|
|
4592
4611
|
* content shift caused by the disappearance/appearance of the scrollbar.
|
|
4612
|
+
*
|
|
4613
|
+
* The body is fixed in place (instead of just using `overflow: hidden`), which reliably prevents
|
|
4614
|
+
* scrolling of the underlying page. The current scroll position is stored before
|
|
4615
|
+
* fixing the body and restored again once the scroll is re-enabled, so the page doesn't jump
|
|
4616
|
+
* and content that was previously scrolled out of view isn't hidden behind the fixed body.
|
|
4617
|
+
*
|
|
4618
|
+
* As an additional safety net for edge cases, `touchmove` events are intercepted and prevented,
|
|
4619
|
+
* unless they originate from within a scrollable element that is not at its scroll boundary
|
|
4620
|
+
* (e.g. an internal scrollable content of a dialog, navigation, sidebar, etc.).
|
|
4593
4621
|
*/
|
|
4594
4622
|
var SbbScrollHandler = class {
|
|
4623
|
+
constructor() {
|
|
4624
|
+
this._scrollPosition = 0;
|
|
4625
|
+
this._touchStartY = 0;
|
|
4626
|
+
this._touchStart = (event) => {
|
|
4627
|
+
this._touchStartY = event.touches[0]?.clientY ?? 0;
|
|
4628
|
+
};
|
|
4629
|
+
this._touchMove = (event) => {
|
|
4630
|
+
const touch = event.touches[0];
|
|
4631
|
+
if (!touch) return;
|
|
4632
|
+
const scrollable = findScrollableAncestor(event.composedPath());
|
|
4633
|
+
if (!scrollable) {
|
|
4634
|
+
event.preventDefault();
|
|
4635
|
+
return;
|
|
4636
|
+
}
|
|
4637
|
+
const deltaY = touch.clientY - this._touchStartY;
|
|
4638
|
+
const atTop = scrollable.scrollTop <= 0;
|
|
4639
|
+
const atBottom = scrollable.scrollTop + scrollable.clientHeight >= scrollable.scrollHeight;
|
|
4640
|
+
if (atTop && deltaY > 0 || atBottom && deltaY < 0) event.preventDefault();
|
|
4641
|
+
};
|
|
4642
|
+
}
|
|
4595
4643
|
disableScroll() {
|
|
4596
4644
|
if (pageScrollDisabled()) return;
|
|
4597
|
-
this.
|
|
4645
|
+
this._scrollPosition = window.scrollY || document.documentElement.scrollTop;
|
|
4598
4646
|
this._position = document.body.style.position;
|
|
4647
|
+
this._top = document.body.style.top;
|
|
4648
|
+
this._insetInline = document.body.style.insetInline;
|
|
4599
4649
|
this._overflow = document.body.style.overflow;
|
|
4600
|
-
this._marginInlineEnd = document.body.style.marginInlineEnd;
|
|
4601
4650
|
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
|
|
4651
|
+
document.body.style.position = "fixed";
|
|
4652
|
+
document.body.style.top = `-${this._scrollPosition}px`;
|
|
4653
|
+
document.body.style.insetInline = `0 ${scrollbarWidth}px`;
|
|
4602
4654
|
document.body.style.overflow = "hidden";
|
|
4603
|
-
document.body.style.
|
|
4604
|
-
document.
|
|
4605
|
-
document.
|
|
4606
|
-
document.body.style.setProperty("--sbb-scrollbar-width", `${scrollbarWidth}px`);
|
|
4655
|
+
document.body.style.setProperty("--sbb-scrollbar-reserved-space", `${scrollbarWidth}px`);
|
|
4656
|
+
document.addEventListener("touchstart", this._touchStart, { passive: true });
|
|
4657
|
+
document.addEventListener("touchmove", this._touchMove, { passive: false });
|
|
4607
4658
|
document.body.toggleAttribute("data-sbb-scroll-disabled", true);
|
|
4608
4659
|
}
|
|
4609
4660
|
enableScroll() {
|
|
4610
4661
|
if (!pageScrollDisabled()) return;
|
|
4611
|
-
document.body.style.height = this._height || "";
|
|
4612
4662
|
document.body.style.position = this._position || "";
|
|
4663
|
+
document.body.style.top = this._top || "";
|
|
4664
|
+
document.body.style.insetInline = this._insetInline || "";
|
|
4613
4665
|
document.body.style.overflow = this._overflow || "";
|
|
4614
|
-
document.body.style.
|
|
4615
|
-
document.
|
|
4666
|
+
document.body.style.removeProperty("--sbb-scrollbar-reserved-space");
|
|
4667
|
+
document.removeEventListener("touchstart", this._touchStart);
|
|
4668
|
+
document.removeEventListener("touchmove", this._touchMove);
|
|
4616
4669
|
document.body.removeAttribute("data-sbb-scroll-disabled");
|
|
4670
|
+
window.scrollTo(0, this._scrollPosition);
|
|
4617
4671
|
}
|
|
4618
4672
|
};
|
|
4619
4673
|
|
|
@@ -11,7 +11,7 @@ import { html as html$1 } from "lit/static-html.js";
|
|
|
11
11
|
import { SbbOverlayBaseElement, SbbOverlayCloseEvent, SbbOverlayCloseEvent as SbbDialogCloseEvent, assignOverlayResult as assignDialogResult, overlayRefs } from "./overlay.pure.js";
|
|
12
12
|
|
|
13
13
|
//#region src/elements/dialog/dialog-actions/dialog-actions.scss?inline
|
|
14
|
-
var dialog_actions_default = ":host {\n grid-area: actions;\n padding-inline: var(--sbb-dialog-padding-inline);\n padding-block: var(--sbb-dialog-padding-block);\n margin-block-start: auto;\n background-color: var(--sbb-dialog-background-color);\n transition: box-shadow var(--sbb-animation-easing) var(--sbb-dialog-shadow-animation-duration);\n box-shadow: var(--sbb-dialog-block-end-box-shadow, none);\n position: relative;\n}\n:host::before {\n content: \"\";\n display: block;\n position: absolute;\n align-self: start;\n border-block-start: var(--sbb-border-width-1x) solid var(--sbb-dialog-actions-border-color);\n transition: border-color var(--sbb-animation-easing) var(--sbb-dialog-shadow-animation-duration);\n inset: 0 auto auto 0;\n width: 100%;\n}\n@media (forced-colors: active) {\n :host::before {\n border-color: CanvasText;\n }\n}\n";
|
|
14
|
+
var dialog_actions_default = ":host {\n grid-area: actions;\n padding-inline: var(--sbb-dialog-padding-inline);\n padding-block: var(--sbb-dialog-padding-block);\n margin-block-start: auto;\n background-color: var(--sbb-dialog-background-color);\n transition: box-shadow var(--sbb-animation-easing) var(--sbb-dialog-shadow-animation-duration);\n box-shadow: var(--sbb-dialog-block-end-box-shadow, none);\n position: relative;\n clip-path: inset(-200% -200% 0 -200%);\n}\n:host::before {\n content: \"\";\n display: block;\n position: absolute;\n align-self: start;\n border-block-start: var(--sbb-border-width-1x) solid var(--sbb-dialog-actions-border-color);\n transition: border-color var(--sbb-animation-easing) var(--sbb-dialog-shadow-animation-duration);\n inset: 0 auto auto 0;\n width: 100%;\n}\n@media (forced-colors: active) {\n :host::before {\n border-color: CanvasText;\n }\n}\n";
|
|
15
15
|
|
|
16
16
|
//#endregion
|
|
17
17
|
//#region src/elements/dialog/dialog-actions/dialog-actions.component.ts
|
|
@@ -105,7 +105,7 @@ var SbbDialogContentElement = class extends SbbElement {
|
|
|
105
105
|
|
|
106
106
|
//#endregion
|
|
107
107
|
//#region src/elements/dialog/dialog-title/dialog-title.scss?inline
|
|
108
|
-
var dialog_title_default = ":host {\n padding-block: var(--sbb-dialog-padding-block);\n padding-inline: var(--sbb-dialog-padding-inline);\n hyphens: auto;\n grid-area: title;\n position: relative;\n}\n\n:host([negative]) {\n --sbb-title-color: var(--sbb-color-3-negative);\n}\n\n:host::after {\n content: \"\";\n display: block;\n position: absolute;\n pointer-events: none;\n inset: 0 -10rem 0 0;\n transition: box-shadow var(--sbb-animation-easing) var(--sbb-dialog-shadow-animation-duration);\n box-shadow: var(--sbb-dialog-block-start-box-shadow, none);\n}\n";
|
|
108
|
+
var dialog_title_default = ":host {\n padding-block: var(--sbb-dialog-padding-block);\n padding-inline: var(--sbb-dialog-padding-inline);\n hyphens: auto;\n grid-area: title;\n position: relative;\n}\n\n:host([negative]) {\n --sbb-title-color: var(--sbb-color-3-negative);\n}\n\n:host::after {\n content: \"\";\n display: block;\n position: absolute;\n pointer-events: none;\n inset: 0 -10rem 0 0;\n transition: box-shadow var(--sbb-animation-easing) var(--sbb-dialog-shadow-animation-duration);\n box-shadow: var(--sbb-dialog-block-start-box-shadow, none);\n clip-path: polygon(0% 50%, 0% 200%, 100% 200%, 100% 50%);\n}\n";
|
|
109
109
|
|
|
110
110
|
//#endregion
|
|
111
111
|
//#region src/elements/dialog/dialog-title/dialog-title.component.ts
|
|
@@ -130,7 +130,7 @@ var SbbDialogTitleElement = class extends SbbNegativeMixin(SbbTitleBase) {
|
|
|
130
130
|
|
|
131
131
|
//#endregion
|
|
132
132
|
//#region src/elements/dialog/dialog/dialog.scss?inline
|
|
133
|
-
var dialog_default = ":host {\n --sbb-dialog-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-6x)\n );\n --sbb-dialog-padding-block: var(--sbb-spacing-responsive-xs);\n --sbb-dialog-shadow-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-4x)\n );\n display: none;\n position: fixed;\n inset
|
|
133
|
+
var dialog_default = ":host {\n --sbb-dialog-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-6x)\n );\n --sbb-dialog-padding-block: var(--sbb-spacing-responsive-xs);\n --sbb-dialog-shadow-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-4x)\n );\n display: none;\n position: fixed;\n inset: 0;\n z-index: var(--sbb-dialog-z-index, var(--sbb-overlay-default-z-index));\n}\n\n:host(:is(:state(top-shadow),[state--top-shadow])) {\n --sbb-dialog-block-start-box-shadow: var(--_sbb-dialog-block-shadow);\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) {\n display: block;\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]))) {\n --sbb-dialog-pointer-events: all;\n --sbb-dialog-backdrop-pointer-events: all;\n}\n\n:host(:not([negative])) {\n --_sbb-dialog-color: var(--sbb-dialog-color);\n --_sbb-dialog-block-shadow: var(--sbb-dialog-block-shadow);\n --sbb-dialog-actions-border-color: var(--sbb-background-color-4);\n --sbb-dialog-background-color: var(--sbb-background-color-1);\n}\n\n:host([negative]) {\n --_sbb-dialog-color: var(--sbb-dialog-color-negative);\n --_sbb-dialog-block-shadow: var(--sbb-dialog-block-shadow-negative);\n --sbb-dialog-background-color: var(--sbb-background-color-1-negative);\n --sbb-dialog-actions-border-color: var(--sbb-background-color-4-negative);\n --sbb-dialog-backdrop-color: var(--sbb-background-color-3-negative);\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n}\n\n:host([backdrop=translucent]) {\n --sbb-dialog-backdrop-color: color-mix(in srgb, var(--sbb-color-black) 50%, transparent);\n}\n\n:host(:is(:state(bottom-shadow),[state--bottom-shadow])) {\n --sbb-dialog-block-end-box-shadow: var(--_sbb-dialog-block-shadow);\n --sbb-dialog-actions-border-color: transparent;\n}\n\n:host(:is(:state(state-closing),[state--state-closing])) {\n --sbb-dialog-backdrop-animation-name: backdrop-close;\n}\n\n.sbb-dialog__container {\n pointer-events: var(--sbb-dialog-pointer-events);\n display: flex;\n justify-content: center;\n align-items: center;\n position: fixed;\n inset: 0;\n}\n.sbb-dialog__container::before {\n content: \"\";\n pointer-events: var(--sbb-dialog-backdrop-pointer-events);\n position: absolute;\n inset: 0;\n background-color: var(--sbb-dialog-backdrop-color, transparent);\n animation-name: var(--sbb-dialog-backdrop-animation-name, backdrop-open);\n animation-duration: var(--sbb-dialog-animation-duration);\n animation-timing-function: var(--sbb-dialog-animation-easing);\n animation-fill-mode: forwards;\n}\n\n.sbb-dialog {\n display: none;\n position: absolute;\n inset-inline: 0;\n inset-block: auto 0;\n border: none;\n border-radius: var(--sbb-dialog-border-radius) var(--sbb-dialog-border-radius) 0 0;\n max-width: var(--_sbb-dialog-max-width);\n max-height: var(--_sbb-dialog-max-height);\n color: var(--_sbb-dialog-color);\n background-color: var(--sbb-dialog-background-color);\n flex-direction: column;\n padding-block-end: env(safe-area-inset-bottom, 0);\n}\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) .sbb-dialog {\n display: flex;\n animation-name: open;\n animation-duration: var(--sbb-dialog-animation-duration);\n animation-timing-function: ease;\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-dialog {\n pointer-events: none;\n animation-name: close;\n}\n@media (forced-colors: active) {\n .sbb-dialog {\n outline: var(--sbb-border-width-1x) solid CanvasText;\n }\n}\n@media (min-width: calc(37.5rem)) {\n .sbb-dialog {\n width: var(--sbb-dialog-width);\n height: var(--sbb-dialog-height);\n max-width: var(--sbb-dialog-max-width, var(--_sbb-dialog-max-width));\n max-height: var(--sbb-dialog-max-height, var(--_sbb-dialog-max-height));\n inset: unset;\n border-radius: var(--sbb-dialog-border-radius);\n overflow: hidden;\n }\n}\n\n:host(:is(:state(has-intermediate-element),[state--has-intermediate-element])) ::slotted(:first-child),\n.sbb-dialog__wrapper {\n display: flex;\n flex-direction: column;\n min-height: 0;\n max-height: 100%;\n}\n\n:host(:is(:state(has-intermediate-element),[state--has-intermediate-element])) ::slotted(:first-child),\n:host(:not(:is(:state(has-intermediate-element),[state--has-intermediate-element]))) .sbb-dialog__wrapper {\n display: grid;\n grid-template: \"title close-button\" auto \"content content\" 1fr \"actions actions\" auto/1fr auto;\n gap: 0;\n}\n\n@keyframes open {\n from {\n opacity: 0;\n translate: 0 var(--sbb-dialog-translate-y, 100%);\n }\n to {\n opacity: 1;\n translate: 0 0;\n }\n}\n@keyframes close {\n from {\n opacity: 1;\n translate: 0 0;\n }\n to {\n opacity: 0;\n translate: 0 var(--sbb-dialog-translate-y, 100%);\n }\n}\n@keyframes backdrop-open {\n from {\n background-color: transparent;\n visibility: visible;\n }\n}\n@keyframes backdrop-close {\n to {\n background-color: transparent;\n visibility: hidden;\n }\n}\n";
|
|
134
134
|
|
|
135
135
|
//#endregion
|
|
136
136
|
//#region src/elements/dialog/dialog/dialog.component.ts
|
|
@@ -162,7 +162,7 @@ var SbbHeaderLinkElement = class extends SbbHeaderActionCommonElementMixin(SbbLi
|
|
|
162
162
|
|
|
163
163
|
//#endregion
|
|
164
164
|
//#region src/elements/header/header/header.scss?inline
|
|
165
|
-
var header_default = ":host {\n --sbb-logo-height: 1rem;\n --sbb-signet-height: 1rem;\n --sbb-header-transition-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-6x)\n );\n}\n@media (min-width: calc(64rem)) {\n :host {\n --sbb-logo-height: 1.25rem;\n --sbb-signet-height: 1.25rem;\n }\n}\n:host {\n display: block;\n height: var(--sbb-header-height);\n line-height: var(--sbb-typo-line-height-text);\n padding-block-start: calc(var(--sbb-header-height) + var(--sbb-header-padding-block-start));\n}\n\n:host([size=s]) {\n --sbb-header-height: var(--sbb-header-height-s);\n}\n\n:host([size=m]) {\n --sbb-header-height: var(--sbb-header-height-m);\n}\n\n:host([hide-on-scroll]) {\n --sbb-header-position: absolute;\n}\n\n:host([hide-on-scroll]:is(:state(fixed),[state--fixed])) {\n --sbb-header-position: fixed;\n --sbb-header-animation-name: hide;\n --sbb-header-transform: translate3d(0, -100%, 0);\n --sbb-header-inset-inline-end: var(--sbb-scrollbar-
|
|
165
|
+
var header_default = ":host {\n --sbb-logo-height: 1rem;\n --sbb-signet-height: 1rem;\n --sbb-header-transition-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-6x)\n );\n}\n@media (min-width: calc(64rem)) {\n :host {\n --sbb-logo-height: 1.25rem;\n --sbb-signet-height: 1.25rem;\n }\n}\n:host {\n display: block;\n height: var(--sbb-header-height);\n line-height: var(--sbb-typo-line-height-text);\n padding-block-start: calc(var(--sbb-header-height) + var(--sbb-header-padding-block-start));\n}\n\n:host([size=s]) {\n --sbb-header-height: var(--sbb-header-height-s);\n}\n\n:host([size=m]) {\n --sbb-header-height: var(--sbb-header-height-m);\n}\n\n:host([hide-on-scroll]) {\n --sbb-header-position: absolute;\n}\n\n:host([hide-on-scroll]:is(:state(fixed),[state--fixed])) {\n --sbb-header-position: fixed;\n --sbb-header-animation-name: hide;\n --sbb-header-transform: translate3d(0, -100%, 0);\n --sbb-header-inset-inline-end: var(--sbb-scrollbar-reserved-space, 0);\n}\n\n:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(animated),[state--animated])) {\n --sbb-header-transition-timing: cubic-bezier(0.4, 0, 1, 1);\n}\n\n:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(visible),[state--visible])) {\n --sbb-header-animation-name: show;\n --sbb-header-transform: translate3d(0, 0, 0);\n --sbb-header-transition-timing: cubic-bezier(0, 0, 0.2, 1);\n}\n\n:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(has-visible-focus-within),[state--has-visible-focus-within])) {\n --sbb-header-transition-duration: 0;\n --sbb-header-transform: translate3d(0, 0, 0);\n}\n\n.sbb-header {\n position: var(--sbb-header-position);\n inset: 0 var(--sbb-header-inset-inline-end) auto 0;\n padding-block-start: var(--sbb-header-padding-block-start);\n background: var(--sbb-header-background);\n z-index: var(--sbb-header-z-index, 10);\n transform: var(--sbb-header-transform);\n transition-property: box-shadow;\n transition-duration: var(--sbb-header-transition-duration);\n transition-timing-function: var(--sbb-header-transition-timing);\n animation-name: var(--sbb-header-animation-name);\n animation-duration: var(--sbb-header-transition-duration);\n animation-timing-function: var(--sbb-header-transition-timing);\n}\n:host(:is(:is(:state(shadow),[state--shadow]), :is(:state(has-visible-focus-within),[state--has-visible-focus-within]):is(:state(fixed),[state--fixed]))) .sbb-header {\n box-shadow: var(--sbb-header-box-shadow);\n}\n@media (forced-colors: active) {\n .sbb-header {\n border-block-end: var(--sbb-border-width-1x) solid CanvasText;\n }\n}\n\n.sbb-header__wrapper {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n height: var(--sbb-header-height);\n}\n:host(:not([expanded])) .sbb-header__wrapper {\n padding-inline: var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));\n margin-inline: auto;\n width: 100%;\n}\n@media (min-width: calc(90rem)) {\n :host(:not([expanded])) .sbb-header__wrapper {\n max-width: var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)));\n }\n}\n:host([expanded]) .sbb-header__wrapper {\n padding-inline: var(--sbb-page-spacing-padding, var(--sbb-spacing-responsive-xxs));\n}\n\n::slotted(:is(sbb-header-button, sbb-header-link):first-child) {\n margin-inline-start: var(--sbb-header-first-item-margin-inline-start);\n}\n\n::slotted(*) {\n flex: 0 0 auto;\n}\n\n::slotted(.sbb-header-shrinkable) {\n flex-shrink: 1;\n min-width: 0;\n}\n\n::slotted(.sbb-header-spacer) {\n flex-grow: 1;\n}\n\n::slotted(.sbb-header-logo) {\n margin-inline-start: var(--sbb-spacing-responsive-s);\n}\n\n::slotted(a.sbb-header-logo) {\n display: block;\n padding-block: var(--sbb-spacing-fixed-3x);\n position: relative;\n flex-basis: 0;\n outline: none !important;\n}\n\n::slotted(a.sbb-header-logo)::before {\n content: \"\";\n display: block;\n position: absolute;\n inset: var(--sbb-spacing-fixed-3x) 0;\n}\n\n::slotted(a.sbb-header-logo:focus-visible)::before {\n outline-offset: var(--sbb-focus-outline-offset);\n outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n outline-offset: var(--sbb-spacing-fixed-3x);\n border-radius: 1px;\n}\n\n@keyframes show {\n from {\n transform: translate3d(0, -100%, 0);\n }\n to {\n transform: translate3d(0, 0, 0);\n }\n}\n@keyframes hide {\n from {\n transform: translate3d(0, 0, 0);\n }\n to {\n transform: translate3d(0, -100%, 0);\n }\n}\n";
|
|
166
166
|
|
|
167
167
|
//#endregion
|
|
168
168
|
//#region src/elements/header/header/header.component.ts
|
|
@@ -9,25 +9,26 @@ $theme: 'standard' !default;
|
|
|
9
9
|
--sbb-dialog-block-shadow: var(--sbb-box-shadow-level-9-soft);
|
|
10
10
|
--sbb-dialog-color-negative: var(--sbb-color-2-negative);
|
|
11
11
|
--sbb-dialog-block-shadow-negative: var(--sbb-box-shadow-level-9-soft-negative);
|
|
12
|
-
--sbb-dialog-inset-block: 0 auto;
|
|
13
|
-
--sbb-dialog-inset-inline: 0 auto;
|
|
14
12
|
--sbb-dialog-border-radius: var(--sbb-border-radius-8x);
|
|
15
13
|
--sbb-dialog-animation-easing: ease;
|
|
16
14
|
--sbb-dialog-pointer-events: none;
|
|
17
|
-
--sbb-dialog-backdrop-visibility: hidden;
|
|
18
15
|
--sbb-dialog-backdrop-pointer-events: none;
|
|
19
|
-
--sbb-dialog-backdrop-color:
|
|
16
|
+
--sbb-dialog-backdrop-color: var(--sbb-background-color-3);
|
|
20
17
|
--sbb-dialog-actions-border-color: var(--sbb-background-color-4);
|
|
21
18
|
--sbb-dialog-close-button-inset-inline-end: var(--sbb-spacing-fixed-4x);
|
|
22
19
|
--sbb-dialog-close-button-margin-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
|
|
23
20
|
--_sbb-dialog-max-width: 100%;
|
|
24
|
-
--_sbb-dialog-max-height: calc(
|
|
21
|
+
--_sbb-dialog-max-height: calc(
|
|
22
|
+
100dvh - env(safe-area-inset-top, 0) - var(--sbb-spacing-fixed-6x)
|
|
23
|
+
);
|
|
25
24
|
}
|
|
26
25
|
|
|
27
26
|
@mixin breakpoint-small {
|
|
28
27
|
--sbb-dialog-padding-inline: var(--sbb-spacing-fixed-8x);
|
|
29
28
|
--sbb-dialog-translate-y: var(--sbb-spacing-fixed-4x);
|
|
30
|
-
--_sbb-dialog-max-height: calc(
|
|
29
|
+
--_sbb-dialog-max-height: calc(
|
|
30
|
+
100dvh - env(safe-area-inset-top, 0) - 2 * var(--sbb-spacing-fixed-6x)
|
|
31
|
+
);
|
|
31
32
|
--_sbb-dialog-max-width: 90vw;
|
|
32
33
|
}
|
|
33
34
|
|
package/dialog.pure.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import{html as e,unsafeCSS as t}from"lit";import{SbbActionGroupElement as n}from"./action-group.pure.js";import{SbbSecondaryButtonElement as r}from"./button.pure.js";import{SbbElement as i,SbbLanguageController as a,SbbNegativeMixin as o,SbbPropertyWatcherController as s,hostScrollbarStyles as c,i18nCloseDialog as l,isZeroAnimationDuration as u,screenReaderOnlyStyles as d}from"./core.js";import{SbbTitleBase as f}from"./title.pure.js";import{__esDecorate as p,__runInitializers as m}from"tslib";import{ResizeController as h}from"@lit-labs/observers/resize-controller.js";import{property as g}from"lit/decorators.js";import{ref as _}from"lit/directives/ref.js";import{html as v}from"lit/static-html.js";import{SbbOverlayBaseElement as y,SbbOverlayCloseEvent as b,SbbOverlayCloseEvent as x,assignOverlayResult as S,overlayRefs as C}from"./overlay.pure.js";var w=`:host{padding-inline:var(--sbb-dialog-padding-inline);padding-block:var(--sbb-dialog-padding-block);background-color:var(--sbb-dialog-background-color);transition:box-shadow var(--sbb-animation-easing) var(--sbb-dialog-shadow-animation-duration);box-shadow:var(--sbb-dialog-block-end-box-shadow,none);grid-area:actions;margin-block-start:auto;position:relative}:host:before{content:"";border-block-start:var(--sbb-border-width-1x) solid var(--sbb-dialog-actions-border-color);transition:border-color var(--sbb-animation-easing) var(--sbb-dialog-shadow-animation-duration);align-self:start;width:100%;display:block;position:absolute;inset:0 auto auto 0}@media (forced-colors:active){:host:before{border-color:canvastext}}
|
|
1
|
+
import{html as e,unsafeCSS as t}from"lit";import{SbbActionGroupElement as n}from"./action-group.pure.js";import{SbbSecondaryButtonElement as r}from"./button.pure.js";import{SbbElement as i,SbbLanguageController as a,SbbNegativeMixin as o,SbbPropertyWatcherController as s,hostScrollbarStyles as c,i18nCloseDialog as l,isZeroAnimationDuration as u,screenReaderOnlyStyles as d}from"./core.js";import{SbbTitleBase as f}from"./title.pure.js";import{__esDecorate as p,__runInitializers as m}from"tslib";import{ResizeController as h}from"@lit-labs/observers/resize-controller.js";import{property as g}from"lit/decorators.js";import{ref as _}from"lit/directives/ref.js";import{html as v}from"lit/static-html.js";import{SbbOverlayBaseElement as y,SbbOverlayCloseEvent as b,SbbOverlayCloseEvent as x,assignOverlayResult as S,overlayRefs as C}from"./overlay.pure.js";var w=`:host{padding-inline:var(--sbb-dialog-padding-inline);padding-block:var(--sbb-dialog-padding-block);background-color:var(--sbb-dialog-background-color);transition:box-shadow var(--sbb-animation-easing) var(--sbb-dialog-shadow-animation-duration);box-shadow:var(--sbb-dialog-block-end-box-shadow,none);clip-path:inset(-200% -200% 0);grid-area:actions;margin-block-start:auto;position:relative}:host:before{content:"";border-block-start:var(--sbb-border-width-1x) solid var(--sbb-dialog-actions-border-color);transition:border-color var(--sbb-animation-easing) var(--sbb-dialog-shadow-animation-duration);align-self:start;width:100%;display:block;position:absolute;inset:0 auto auto 0}@media (forced-colors:active){:host:before{border-color:canvastext}}
|
|
2
2
|
`,T=class extends n{static{this.elementName=`sbb-dialog-actions`}static{this.styles=[t(w)]}},E=`:host{height:fit-content;margin-inline:var(--sbb-dialog-close-button-margin-inline);grid-area:close-button;margin-block-start:calc(var(--sbb-dialog-padding-block) + .5 * (var(--sbb-typo-line-height-heading) * var(--_sbb-dialog-title-size,var(--sbb-heading-font-size-4)) - var(--sbb-size-element-xs)));display:block;inset-inline-end:var(--sbb-dialog-close-button-inset-inline-end)}
|
|
3
3
|
`,D=class extends r{static{this.elementName=`sbb-dialog-close-button`}static{this.styles=[t(E)]}constructor(){super(),this._languageController=new a(this),this.size=`s`}willUpdate(e){super.willUpdate(e),this.internals.ariaLabel=l[this._languageController.current]}renderTemplate(){return super.renderIconSlot()}renderIconName(){return super.renderIconName()||`cross-small`}},O=`:host{padding-block:var(--sbb-dialog-padding-block);padding-inline:var(--sbb-dialog-padding-inline);grid-area:content;display:block;overflow:auto}:host(:is(:state(negative),[state--negative])){--sbb-scrollbar-color:color-mix(in srgb, var(--sbb-color-white) 30%, transparent);--sbb-scrollbar-color-hover:color-mix(in srgb, var(--sbb-color-white) 60%, transparent)}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);--sbb-focus-outline-offset:calc(var(--sbb-focus-outline-width) * -1)}
|
|
4
|
-
`,k=class extends i{static{this.elementName=`sbb-dialog-content`}static{this.styles=[c,t(O)]}constructor(){super(),this.addController(new s(this,()=>this.closest(`sbb-dialog`),{negative:e=>{this.toggleState(`negative`,e.negative),this._setScrollbar(e.negative)}}))}_setScrollbar(e=this.closest?.(`sbb-dialog`)?.negative??!1){this.classList.remove(`sbb-scrollbar`,`sbb-scrollbar-negative`),this.classList.add(`sbb-scrollbar${e?`-negative`:``}`)}connectedCallback(){super.connectedCallback(),this._setScrollbar()}render(){return e`<slot></slot>`}},A=`:host{padding-block:var(--sbb-dialog-padding-block);padding-inline:var(--sbb-dialog-padding-inline);hyphens:auto;grid-area:title;position:relative}:host([negative]){--sbb-title-color:var(--sbb-color-3-negative)}:host:after{content:"";pointer-events:none;transition:box-shadow var(--sbb-animation-easing) var(--sbb-dialog-shadow-animation-duration);box-shadow:var(--sbb-dialog-block-start-box-shadow,none);display:block;position:absolute;inset:0 -10rem 0 0}
|
|
5
|
-
`,j=class extends o(f){static{this.elementName=`sbb-dialog-title`}static{this.styles=[t(A)]}constructor(){super(),this.level=`2`,this.visualLevel=`4`}},M=`:host{--sbb-dialog-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x));--sbb-dialog-padding-block:var(--sbb-spacing-responsive-xs);--sbb-dialog-shadow-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));
|
|
4
|
+
`,k=class extends i{static{this.elementName=`sbb-dialog-content`}static{this.styles=[c,t(O)]}constructor(){super(),this.addController(new s(this,()=>this.closest(`sbb-dialog`),{negative:e=>{this.toggleState(`negative`,e.negative),this._setScrollbar(e.negative)}}))}_setScrollbar(e=this.closest?.(`sbb-dialog`)?.negative??!1){this.classList.remove(`sbb-scrollbar`,`sbb-scrollbar-negative`),this.classList.add(`sbb-scrollbar${e?`-negative`:``}`)}connectedCallback(){super.connectedCallback(),this._setScrollbar()}render(){return e`<slot></slot>`}},A=`:host{padding-block:var(--sbb-dialog-padding-block);padding-inline:var(--sbb-dialog-padding-inline);hyphens:auto;grid-area:title;position:relative}:host([negative]){--sbb-title-color:var(--sbb-color-3-negative)}:host:after{content:"";pointer-events:none;transition:box-shadow var(--sbb-animation-easing) var(--sbb-dialog-shadow-animation-duration);box-shadow:var(--sbb-dialog-block-start-box-shadow,none);clip-path:polygon(0% 50%,0% 200%,100% 200%,100% 50%);display:block;position:absolute;inset:0 -10rem 0 0}
|
|
5
|
+
`,j=class extends o(f){static{this.elementName=`sbb-dialog-title`}static{this.styles=[t(A)]}constructor(){super(),this.level=`2`,this.visualLevel=`4`}},M=`:host{--sbb-dialog-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x));--sbb-dialog-padding-block:var(--sbb-spacing-responsive-xs);--sbb-dialog-shadow-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));z-index:var(--sbb-dialog-z-index,var(--sbb-overlay-default-z-index));display:none;position:fixed;inset:0}:host(:is(:state(top-shadow),[state--top-shadow])){--sbb-dialog-block-start-box-shadow:var(--_sbb-dialog-block-shadow)}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){display:block}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]))){--sbb-dialog-pointer-events:all;--sbb-dialog-backdrop-pointer-events:all}:host(:not([negative])){--_sbb-dialog-color:var(--sbb-dialog-color);--_sbb-dialog-block-shadow:var(--sbb-dialog-block-shadow);--sbb-dialog-actions-border-color:var(--sbb-background-color-4);--sbb-dialog-background-color:var(--sbb-background-color-1)}:host([negative]){--_sbb-dialog-color:var(--sbb-dialog-color-negative);--_sbb-dialog-block-shadow:var(--sbb-dialog-block-shadow-negative);--sbb-dialog-background-color:var(--sbb-background-color-1-negative);--sbb-dialog-actions-border-color:var(--sbb-background-color-4-negative);--sbb-dialog-backdrop-color:var(--sbb-background-color-3-negative);--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark)}:host([backdrop=translucent]){--sbb-dialog-backdrop-color:color-mix(in srgb, var(--sbb-color-black) 50%, transparent)}:host(:is(:state(bottom-shadow),[state--bottom-shadow])){--sbb-dialog-block-end-box-shadow:var(--_sbb-dialog-block-shadow);--sbb-dialog-actions-border-color:transparent}:host(:is(:state(state-closing),[state--state-closing])){--sbb-dialog-backdrop-animation-name:backdrop-close}.sbb-dialog__container{pointer-events:var(--sbb-dialog-pointer-events);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.sbb-dialog__container:before{content:"";pointer-events:var(--sbb-dialog-backdrop-pointer-events);background-color:var(--sbb-dialog-backdrop-color,transparent);animation-name:var(--sbb-dialog-backdrop-animation-name,backdrop-open);animation-duration:var(--sbb-dialog-animation-duration);animation-timing-function:var(--sbb-dialog-animation-easing);animation-fill-mode:forwards;position:absolute;inset:0}.sbb-dialog{border-radius:var(--sbb-dialog-border-radius) var(--sbb-dialog-border-radius) 0 0;max-width:var(--_sbb-dialog-max-width);max-height:var(--_sbb-dialog-max-height);color:var(--_sbb-dialog-color);background-color:var(--sbb-dialog-background-color);border:none;flex-direction:column;padding-block-end:env(safe-area-inset-bottom,0);display:none;position:absolute;inset-block:auto 0;inset-inline:0}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-dialog{animation-name:open;animation-duration:var(--sbb-dialog-animation-duration);animation-timing-function:ease;display:flex}:host(:is(:state(state-closing),[state--state-closing])) .sbb-dialog{pointer-events:none;animation-name:close}@media (forced-colors:active){.sbb-dialog{outline:var(--sbb-border-width-1x) solid CanvasText}}@media (width>=37.5rem){.sbb-dialog{width:var(--sbb-dialog-width);height:var(--sbb-dialog-height);max-width:var(--sbb-dialog-max-width,var(--_sbb-dialog-max-width));max-height:var(--sbb-dialog-max-height,var(--_sbb-dialog-max-height));inset:unset;border-radius:var(--sbb-dialog-border-radius);overflow:hidden}}:host(:is(:state(has-intermediate-element),[state--has-intermediate-element])) ::slotted(:first-child),.sbb-dialog__wrapper{flex-direction:column;min-height:0;max-height:100%;display:flex}:host(:is(:state(has-intermediate-element),[state--has-intermediate-element])) ::slotted(:first-child),:host(:not(:is(:state(has-intermediate-element),[state--has-intermediate-element]))) .sbb-dialog__wrapper{grid-template:"title close-button""content content"1fr"actions actions"/1fr auto;gap:0;display:grid}@keyframes open{0%{opacity:0;translate:0 var(--sbb-dialog-translate-y,100%)}to{opacity:1;translate:0}}@keyframes close{0%{opacity:1;translate:0}to{opacity:0;translate:0 var(--sbb-dialog-translate-y,100%)}}@keyframes backdrop-open{0%{visibility:visible;background-color:#0000}}@keyframes backdrop-close{to{visibility:hidden;background-color:#0000}}
|
|
6
6
|
`;let N=(()=>{let e=y,n,r=[],i=[],a,o=[],s=[];return class extends e{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(e[Symbol.metadata]??null):void 0;n=[g({attribute:`backdrop-action`})],a=[g({attribute:`backdrop`,reflect:!0})],p(this,null,n,{kind:`accessor`,name:`backdropAction`,static:!1,private:!1,access:{has:e=>`backdropAction`in e,get:e=>e.backdropAction,set:(e,t)=>{e.backdropAction=t}},metadata:t},r,i),p(this,null,a,{kind:`accessor`,name:`backdrop`,static:!1,private:!1,access:{has:e=>`backdrop`in e,get:e=>e.backdrop,set:(e,t)=>{e.backdrop=t}},metadata:t},o,s),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-dialog`}static{this.styles=[d,t(M)]}#e;get backdropAction(){return this.#e}set backdropAction(e){this.#e=e}#t;get backdrop(){return this.#t}set backdrop(e){this.#t=e}constructor(){super(),this.#e=m(this,r,`close`),this.#t=(m(this,i),m(this,o,`opaque`)),this._dialogContentResizeObserver=(m(this,s),new h(this,{target:null,skipInitial:!0,callback:()=>setTimeout(()=>this._updateOverflowState())})),this._isPointerDownEventOnDialog=!1,this.closeAttribute=`sbb-dialog-close`,this.closeTag=`sbb-dialog-close-button`,this._pointerDownListener=e=>{this.backdropAction===`close`&&(this._isPointerDownEventOnDialog=!!this._dialogElement&&e.composedPath().includes(this._dialogElement))},this._closeOnBackdropClick=e=>{this.backdropAction===`close`&&!this._isPointerDownEventOnDialog&&this._dialogElement&&!e.composedPath().includes(this._dialogElement)&&this.close()},this.addEventListener?.(`pointerdown`,this._pointerDownListener),this.addEventListener?.(`pointerup`,this._closeOnBackdropClick),this.addEventListener(`scroll`,()=>this._updateOverflowState(),{passive:!0,capture:!0})}announceTitle(){this.setAriaLiveRefContent(this.accessibilityLabel||this.querySelector(`sbb-dialog-title`)?.textContent.trim())}isZeroAnimationDuration(){return u(this,`--sbb-dialog-animation-duration`)}handleClosing(){let e=this._contentElement();e?.scrollTo(0,0),this.state=`closed`,this.hidePopover?.(),this.inertController.deactivate(),this.skipFocusRestoration||this.lastFocusedElement?.focus(),this.openOverlayController?.abort(),this.focusTrapController.enabled=!1,e&&this._dialogContentResizeObserver.hostDisconnected(),this.removeInstanceFromGlobalCollection(),C.length||this.scrollHandler.enableScroll(),this.escapableOverlayController.disconnect(),this.dispatchCloseEvent()}handleOpening(){this.state=`opened`,this.inertController.activate(),this.focusTrapController.focusInitialElement(),this.focusTrapController.enabled=!0,setTimeout(()=>this.announceTitle());let e=this._contentElement();e&&this._dialogContentResizeObserver.observe(e),this.dispatchOpenEvent()}firstUpdated(e){super.firstUpdated(e),this.isOpen&&this.announceTitle(),this._syncTitleNegative()}willUpdate(e){super.willUpdate(e),e.has(`negative`)&&this._syncTitleNegative()}_handleSlotChange(){this._syncTitleNegative(),this._detectIntermediateElement()}_syncTitleNegative(){let e=this.querySelector?.(`sbb-dialog-title`),t=this.querySelector?.(`sbb-dialog-close-button`);e&&(e.negative=this.negative),t&&(t.negative=this.negative)}_detectIntermediateElement(){let e=this.querySelector(`:scope > :is(sbb-dialog-title, sbb-dialog-close-button, sbb-dialog-content, sbb-dialog-actions)`)===null;this.toggleState(`has-intermediate-element`,e)}_updateOverflowState(){let e=this._contentElement();this.toggleState(`top-shadow`,(e?.scrollTop??0)>0),this.toggleState(`bottom-shadow`,(e?.scrollTop??0)+(e?.offsetHeight??0)<(e?.scrollHeight??0))}_contentElement(){return this.querySelector(`sbb-dialog-content`)}dispatchBeforeCloseEvent(){return this.dispatchEvent(new b(`beforeclose`,{cancelable:!0,closeAttribute:this.closeAttribute,closeTarget:this.lastClosedTarget,result:this.lastResult}))}dispatchCloseEvent(){return this.dispatchEvent(new b(`close`,{closeAttribute:this.closeAttribute,closeTarget:this.lastClosedTarget,result:this.lastResult}))}render(){return v`
|
|
7
7
|
<div class="sbb-dialog__container">
|
|
8
8
|
<div
|
package/header.pure.js
CHANGED
|
@@ -11,7 +11,7 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isS
|
|
|
11
11
|
<span class="sbb-header-environment__text">
|
|
12
12
|
<slot></slot>
|
|
13
13
|
</span>
|
|
14
|
-
`}},C=class extends y(d){static{this.elementName=`sbb-header-link`}},w=`:host{--sbb-logo-height:1rem;--sbb-signet-height:1rem;--sbb-header-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x))}@media (width>=64rem){:host{--sbb-logo-height:1.25rem;--sbb-signet-height:1.25rem}}:host{height:var(--sbb-header-height);line-height:var(--sbb-typo-line-height-text);padding-block-start:calc(var(--sbb-header-height) + var(--sbb-header-padding-block-start));display:block}:host([size=s]){--sbb-header-height:var(--sbb-header-height-s)}:host([size=m]){--sbb-header-height:var(--sbb-header-height-m)}:host([hide-on-scroll]){--sbb-header-position:absolute}:host([hide-on-scroll]:is(:state(fixed),[state--fixed])){--sbb-header-position:fixed;--sbb-header-animation-name:hide;--sbb-header-transform:translate3d(0, -100%, 0);--sbb-header-inset-inline-end:var(--sbb-scrollbar-
|
|
14
|
+
`}},C=class extends y(d){static{this.elementName=`sbb-header-link`}},w=`:host{--sbb-logo-height:1rem;--sbb-signet-height:1rem;--sbb-header-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x))}@media (width>=64rem){:host{--sbb-logo-height:1.25rem;--sbb-signet-height:1.25rem}}:host{height:var(--sbb-header-height);line-height:var(--sbb-typo-line-height-text);padding-block-start:calc(var(--sbb-header-height) + var(--sbb-header-padding-block-start));display:block}:host([size=s]){--sbb-header-height:var(--sbb-header-height-s)}:host([size=m]){--sbb-header-height:var(--sbb-header-height-m)}:host([hide-on-scroll]){--sbb-header-position:absolute}:host([hide-on-scroll]:is(:state(fixed),[state--fixed])){--sbb-header-position:fixed;--sbb-header-animation-name:hide;--sbb-header-transform:translate3d(0, -100%, 0);--sbb-header-inset-inline-end:var(--sbb-scrollbar-reserved-space,0)}:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(animated),[state--animated])){--sbb-header-transition-timing:cubic-bezier(.4, 0, 1, 1)}:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(visible),[state--visible])){--sbb-header-animation-name:show;--sbb-header-transform:translate3d(0, 0, 0);--sbb-header-transition-timing:cubic-bezier(0, 0, .2, 1)}:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(has-visible-focus-within),[state--has-visible-focus-within])){--sbb-header-transition-duration:0;--sbb-header-transform:translate3d(0, 0, 0)}.sbb-header{position:var(--sbb-header-position);inset:0 var(--sbb-header-inset-inline-end) auto 0;background:var(--sbb-header-background);z-index:var(--sbb-header-z-index,10);transform:var(--sbb-header-transform);transition-property:box-shadow;transition-duration:var(--sbb-header-transition-duration);transition-timing-function:var(--sbb-header-transition-timing);animation-name:var(--sbb-header-animation-name);animation-duration:var(--sbb-header-transition-duration);animation-timing-function:var(--sbb-header-transition-timing);padding-block-start:var(--sbb-header-padding-block-start)}:host(:is(:is(:state(shadow),[state--shadow]),:is(:state(has-visible-focus-within),[state--has-visible-focus-within]):is(:state(fixed),[state--fixed]))) .sbb-header{box-shadow:var(--sbb-header-box-shadow)}@media (forced-colors:active){.sbb-header{border-block-end:var(--sbb-border-width-1x) solid CanvasText}}.sbb-header__wrapper{height:var(--sbb-header-height);justify-content:flex-start;align-items:center;display:flex}:host(:not([expanded])) .sbb-header__wrapper{padding-inline:var(--sbb-page-spacing-padding,var(--sbb-layout-base-offset-responsive));width:100%;margin-inline:auto}@media (width>=90rem){:host(:not([expanded])) .sbb-header__wrapper{max-width:var(--sbb-spacing-max-width,calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}:host([expanded]) .sbb-header__wrapper{padding-inline:var(--sbb-page-spacing-padding,var(--sbb-spacing-responsive-xxs))}::slotted(:is(sbb-header-button,sbb-header-link):first-child){margin-inline-start:var(--sbb-header-first-item-margin-inline-start)}::slotted(*){flex:none}::slotted(.sbb-header-shrinkable){flex-shrink:1;min-width:0}::slotted(.sbb-header-spacer){flex-grow:1}::slotted(.sbb-header-logo){margin-inline-start:var(--sbb-spacing-responsive-s)}::slotted(a.sbb-header-logo){padding-block:var(--sbb-spacing-fixed-3x);flex-basis:0;display:block;position:relative;outline:none!important}::slotted(a.sbb-header-logo):before{content:"";inset:var(--sbb-spacing-fixed-3x) 0;display:block;position:absolute}::slotted(a.sbb-header-logo:focus-visible):before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-spacing-fixed-3x);border-radius:1px}@keyframes show{0%{transform:translateY(-100%)}to{transform:translate(0,0)}}@keyframes hide{0%{transform:translate(0,0)}to{transform:translateY(-100%)}}
|
|
15
15
|
`;let T=(()=>{let s=l,c,d=[],f=[],g,_=[],v=[],y,b=[],x=[],S,C=[],T=[],E,D=[],O=[];return class l extends s{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(s[Symbol.metadata]??null):void 0;c=[p(),a({reflect:!0,type:Boolean})],g=[m(),a({attribute:`scroll-origin`})],y=[p(),a({attribute:`hide-on-scroll`,reflect:!0,type:Boolean})],S=[a({reflect:!0})],E=[o()],e(this,null,c,{kind:`accessor`,name:`expanded`,static:!1,private:!1,access:{has:e=>`expanded`in e,get:e=>e.expanded,set:(e,t)=>{e.expanded=t}},metadata:t},d,f),e(this,null,g,{kind:`accessor`,name:`scrollOrigin`,static:!1,private:!1,access:{has:e=>`scrollOrigin`in e,get:e=>e.scrollOrigin,set:(e,t)=>{e.scrollOrigin=t}},metadata:t},_,v),e(this,null,y,{kind:`accessor`,name:`hideOnScroll`,static:!1,private:!1,access:{has:e=>`hideOnScroll`in e,get:e=>e.hideOnScroll,set:(e,t)=>{e.hideOnScroll=t}},metadata:t},b,x),e(this,null,S,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:t},C,T),e(this,null,E,{kind:`accessor`,name:`_headerOnTop`,static:!1,private:!1,access:{has:e=>`_headerOnTop`in e,get:e=>e._headerOnTop,set:(e,t)=>{e._headerOnTop=t}},metadata:t},D,O),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-header`}static{this.styles=[i(w)]}static{this._headerScrollOrigins=new Set}static{this._headerElements=new Set}static{r||h(()=>this._initializeScrollOriginObserver())}#e;get expanded(){return this.#e}set expanded(e){this.#e=e}#t;get scrollOrigin(){return this.#t}set scrollOrigin(e){this.#t=e}#n;get hideOnScroll(){return this.#n}set hideOnScroll(e){this.#n=e}#r;get size(){return this.#r}set size(e){this.#r=e}#i;get _headerOnTop(){return this.#i}set _headerOnTop(e){this.#i=e}constructor(){super(),this.#e=t(this,d,!1),this.#t=(t(this,f),t(this,_,null)),this.#n=(t(this,v),t(this,b,!1)),this.#r=(t(this,x),t(this,C,null)),this.#i=(t(this,T),t(this,D,!0)),this._scrollElement=t(this,O),this._lastScroll=0,this._scrollOriginFromObserver=null,this.addController(new u(this))}static _initializeScrollOriginObserver(){new MutationObserver(e=>{for(let t of e)if(t.type===`attributes`)this._handleScrollOriginElement(t.target);else if(t.type===`childList`)for(let e of[...t.addedNodes,...t.removedNodes].filter(e=>e.nodeType===e.ELEMENT_NODE))this._handleScrollOriginElement(e),this._findAndHandleScrollOrigins(e);this._updateHeaderElements()}).observe(document.documentElement,{attributeFilter:[`sbb-header-scroll-origin`],childList:!0,subtree:!0}),this._findAndHandleScrollOrigins(document.body),this._updateHeaderElements()}static _findAndHandleScrollOrigins(e){e.querySelectorAll(`[sbb-header-scroll-origin]`).forEach(e=>this._handleScrollOriginElement(e))}static _handleScrollOriginElement(e){e.isConnected&&e.hasAttribute(`sbb-header-scroll-origin`)?this._headerScrollOrigins.add(e):this._headerScrollOrigins.delete(e)}static _updateHeaderElements(){for(let e of this._headerElements)e._scrollOriginFromObserver=this._headerScrollOrigins.size===0?null:this._headerScrollOrigins.size===1?this._headerScrollOrigins.values().next().value??null:Array.from(this._headerScrollOrigins).sort((e,t)=>e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_CONTAINS).at(-1)??null,e._updateScrollListener()}connectedCallback(){super.connectedCallback(),l._headerElements.add(this),this.hasUpdated&&this._updateScrollListener()}disconnectedCallback(){super.disconnectedCallback(),this._scrollElement=null,this._scrollEventsController?.abort(),l._headerElements.delete(this)}requestUpdate(e,t,n){super.requestUpdate(e,t,n),!r&&(!e||e===`scrollOrigin`)&&this.hasUpdated&&this._updateScrollListener()}firstUpdated(e){super.firstUpdated(e),this._updateScrollListener()}_updateScrollListener(){let e=this.scrollOrigin??this._scrollOriginFromObserver??document;if(e===this._scrollElement||(this._scrollEventsController?.abort(),this._scrollElement=e,!this._scrollElement))return;this._scrollEventsController=new AbortController,this._scrollFunction=this._getScrollFunction.bind(this),this._scrollElement.addEventListener(`scroll`,this._scrollFunction,{passive:!0,signal:this._scrollEventsController.signal});let t=this._getCurrentScrollProperty(`scrollTop`);this._lastScroll=t<=0?0:t}_getScrollFunction(){return this.hideOnScroll?this._scrollListener():this._scrollShadowListener()}_getCurrentScrollProperty(e){return this._scrollElement instanceof Document?this._scrollElement.documentElement[e]||this._scrollElement.body[e]:this._scrollElement?.[e]||0}_scrollListener(){let e=this._getCurrentScrollProperty(`scrollTop`);this._getCurrentScrollProperty(`scrollHeight`)-window.innerHeight-e<=0||(this.toggleState(`shadow`,e!==0),e>this.offsetHeight&&e>0&&this._lastScroll<e&&this._closeOpenOverlays(),e>this.offsetHeight*2?(this._headerOnTop=!1,e>0&&this._lastScroll<e?[`shadow`,`visible`].forEach(e=>this.internals.states.delete(e)):[`fixed`,`shadow`,`animated`,`visible`].forEach(e=>this.internals.states.add(e))):(e===0&&(this._headerOnTop=!0),this._headerOnTop&&[`shadow`,`animated`,`fixed`,`visible`].forEach(e=>this.internals.states.delete(e))),this._lastScroll=e<=0?0:e)}_scrollShadowListener(){this.toggleState(`shadow`,this._getCurrentScrollProperty(`scrollTop`)!==0)}_closeOpenOverlays(){if(this.matches(`:is(:state(has-visible-focus-within),[state--has-visible-focus-within])`))return;let e=Array.from(this.querySelectorAll(`[aria-controls][aria-expanded='true']`));for(let t of e){let e=t.ariaControlsElements[0];typeof e?.close==`function`&&e.close()}}render(){return n`
|
|
16
16
|
<header class="sbb-header">
|
|
17
17
|
<div class="sbb-header__wrapper">
|
package/lean-off-brand-theme.css
CHANGED
|
@@ -1285,19 +1285,18 @@ summary {
|
|
|
1285
1285
|
--sbb-dialog-block-shadow: var(--sbb-box-shadow-level-9-soft);
|
|
1286
1286
|
--sbb-dialog-color-negative: var(--sbb-color-2-negative);
|
|
1287
1287
|
--sbb-dialog-block-shadow-negative: var(--sbb-box-shadow-level-9-soft-negative);
|
|
1288
|
-
--sbb-dialog-inset-block: 0 auto;
|
|
1289
|
-
--sbb-dialog-inset-inline: 0 auto;
|
|
1290
1288
|
--sbb-dialog-border-radius: var(--sbb-border-radius-8x);
|
|
1291
1289
|
--sbb-dialog-animation-easing: ease;
|
|
1292
1290
|
--sbb-dialog-pointer-events: none;
|
|
1293
|
-
--sbb-dialog-backdrop-visibility: hidden;
|
|
1294
1291
|
--sbb-dialog-backdrop-pointer-events: none;
|
|
1295
|
-
--sbb-dialog-backdrop-color:
|
|
1292
|
+
--sbb-dialog-backdrop-color: var(--sbb-background-color-3);
|
|
1296
1293
|
--sbb-dialog-actions-border-color: var(--sbb-background-color-4);
|
|
1297
1294
|
--sbb-dialog-close-button-inset-inline-end: var(--sbb-spacing-fixed-4x);
|
|
1298
1295
|
--sbb-dialog-close-button-margin-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
|
|
1299
1296
|
--_sbb-dialog-max-width: 100%;
|
|
1300
|
-
--_sbb-dialog-max-height: calc(
|
|
1297
|
+
--_sbb-dialog-max-height: calc(
|
|
1298
|
+
100dvh - env(safe-area-inset-top, 0) - var(--sbb-spacing-fixed-6x)
|
|
1299
|
+
);
|
|
1301
1300
|
--sbb-divider-color: var(--sbb-background-color-4);
|
|
1302
1301
|
--sbb-divider-color-negative: var(--sbb-background-color-4-negative);
|
|
1303
1302
|
--sbb-divider-border-width: var(--sbb-border-width-1x);
|
|
@@ -2049,7 +2048,9 @@ summary {
|
|
|
2049
2048
|
--sbb-alert-close-button-divider-display: block;
|
|
2050
2049
|
--sbb-dialog-padding-inline: var(--sbb-spacing-fixed-8x);
|
|
2051
2050
|
--sbb-dialog-translate-y: var(--sbb-spacing-fixed-4x);
|
|
2052
|
-
--_sbb-dialog-max-height: calc(
|
|
2051
|
+
--_sbb-dialog-max-height: calc(
|
|
2052
|
+
100dvh - env(safe-area-inset-top, 0) - 2 * var(--sbb-spacing-fixed-6x)
|
|
2053
|
+
);
|
|
2053
2054
|
--_sbb-dialog-max-width: 90vw;
|
|
2054
2055
|
--sbb-footer-clock-width: 7rem;
|
|
2055
2056
|
--sbb-notification-icon-align-self: flex-start;
|
package/lean-safety-theme.css
CHANGED
|
@@ -1305,19 +1305,18 @@ summary {
|
|
|
1305
1305
|
--sbb-dialog-block-shadow: var(--sbb-box-shadow-level-9-soft);
|
|
1306
1306
|
--sbb-dialog-color-negative: var(--sbb-color-2-negative);
|
|
1307
1307
|
--sbb-dialog-block-shadow-negative: var(--sbb-box-shadow-level-9-soft-negative);
|
|
1308
|
-
--sbb-dialog-inset-block: 0 auto;
|
|
1309
|
-
--sbb-dialog-inset-inline: 0 auto;
|
|
1310
1308
|
--sbb-dialog-border-radius: var(--sbb-border-radius-8x);
|
|
1311
1309
|
--sbb-dialog-animation-easing: ease;
|
|
1312
1310
|
--sbb-dialog-pointer-events: none;
|
|
1313
|
-
--sbb-dialog-backdrop-visibility: hidden;
|
|
1314
1311
|
--sbb-dialog-backdrop-pointer-events: none;
|
|
1315
|
-
--sbb-dialog-backdrop-color:
|
|
1312
|
+
--sbb-dialog-backdrop-color: var(--sbb-background-color-3);
|
|
1316
1313
|
--sbb-dialog-actions-border-color: var(--sbb-background-color-4);
|
|
1317
1314
|
--sbb-dialog-close-button-inset-inline-end: var(--sbb-spacing-fixed-4x);
|
|
1318
1315
|
--sbb-dialog-close-button-margin-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
|
|
1319
1316
|
--_sbb-dialog-max-width: 100%;
|
|
1320
|
-
--_sbb-dialog-max-height: calc(
|
|
1317
|
+
--_sbb-dialog-max-height: calc(
|
|
1318
|
+
100dvh - env(safe-area-inset-top, 0) - var(--sbb-spacing-fixed-6x)
|
|
1319
|
+
);
|
|
1321
1320
|
--sbb-divider-color: var(--sbb-background-color-4);
|
|
1322
1321
|
--sbb-divider-color-negative: var(--sbb-background-color-4-negative);
|
|
1323
1322
|
--sbb-divider-border-width: var(--sbb-border-width-1x);
|
|
@@ -2069,7 +2068,9 @@ summary {
|
|
|
2069
2068
|
--sbb-alert-close-button-divider-display: block;
|
|
2070
2069
|
--sbb-dialog-padding-inline: var(--sbb-spacing-fixed-8x);
|
|
2071
2070
|
--sbb-dialog-translate-y: var(--sbb-spacing-fixed-4x);
|
|
2072
|
-
--_sbb-dialog-max-height: calc(
|
|
2071
|
+
--_sbb-dialog-max-height: calc(
|
|
2072
|
+
100dvh - env(safe-area-inset-top, 0) - 2 * var(--sbb-spacing-fixed-6x)
|
|
2073
|
+
);
|
|
2073
2074
|
--_sbb-dialog-max-width: 90vw;
|
|
2074
2075
|
--sbb-footer-clock-width: 7rem;
|
|
2075
2076
|
--sbb-notification-icon-align-self: flex-start;
|
package/lean-theme.css
CHANGED
|
@@ -1305,19 +1305,18 @@ summary {
|
|
|
1305
1305
|
--sbb-dialog-block-shadow: var(--sbb-box-shadow-level-9-soft);
|
|
1306
1306
|
--sbb-dialog-color-negative: var(--sbb-color-2-negative);
|
|
1307
1307
|
--sbb-dialog-block-shadow-negative: var(--sbb-box-shadow-level-9-soft-negative);
|
|
1308
|
-
--sbb-dialog-inset-block: 0 auto;
|
|
1309
|
-
--sbb-dialog-inset-inline: 0 auto;
|
|
1310
1308
|
--sbb-dialog-border-radius: var(--sbb-border-radius-8x);
|
|
1311
1309
|
--sbb-dialog-animation-easing: ease;
|
|
1312
1310
|
--sbb-dialog-pointer-events: none;
|
|
1313
|
-
--sbb-dialog-backdrop-visibility: hidden;
|
|
1314
1311
|
--sbb-dialog-backdrop-pointer-events: none;
|
|
1315
|
-
--sbb-dialog-backdrop-color:
|
|
1312
|
+
--sbb-dialog-backdrop-color: var(--sbb-background-color-3);
|
|
1316
1313
|
--sbb-dialog-actions-border-color: var(--sbb-background-color-4);
|
|
1317
1314
|
--sbb-dialog-close-button-inset-inline-end: var(--sbb-spacing-fixed-4x);
|
|
1318
1315
|
--sbb-dialog-close-button-margin-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
|
|
1319
1316
|
--_sbb-dialog-max-width: 100%;
|
|
1320
|
-
--_sbb-dialog-max-height: calc(
|
|
1317
|
+
--_sbb-dialog-max-height: calc(
|
|
1318
|
+
100dvh - env(safe-area-inset-top, 0) - var(--sbb-spacing-fixed-6x)
|
|
1319
|
+
);
|
|
1321
1320
|
--sbb-divider-color: var(--sbb-background-color-4);
|
|
1322
1321
|
--sbb-divider-color-negative: var(--sbb-background-color-4-negative);
|
|
1323
1322
|
--sbb-divider-border-width: var(--sbb-border-width-1x);
|
|
@@ -2069,7 +2068,9 @@ summary {
|
|
|
2069
2068
|
--sbb-alert-close-button-divider-display: block;
|
|
2070
2069
|
--sbb-dialog-padding-inline: var(--sbb-spacing-fixed-8x);
|
|
2071
2070
|
--sbb-dialog-translate-y: var(--sbb-spacing-fixed-4x);
|
|
2072
|
-
--_sbb-dialog-max-height: calc(
|
|
2071
|
+
--_sbb-dialog-max-height: calc(
|
|
2072
|
+
100dvh - env(safe-area-inset-top, 0) - 2 * var(--sbb-spacing-fixed-6x)
|
|
2073
|
+
);
|
|
2073
2074
|
--_sbb-dialog-max-width: 90vw;
|
|
2074
2075
|
--sbb-footer-clock-width: 7rem;
|
|
2075
2076
|
--sbb-notification-icon-align-self: flex-start;
|
package/off-brand-theme.css
CHANGED
|
@@ -1285,19 +1285,18 @@ summary {
|
|
|
1285
1285
|
--sbb-dialog-block-shadow: var(--sbb-box-shadow-level-9-soft);
|
|
1286
1286
|
--sbb-dialog-color-negative: var(--sbb-color-2-negative);
|
|
1287
1287
|
--sbb-dialog-block-shadow-negative: var(--sbb-box-shadow-level-9-soft-negative);
|
|
1288
|
-
--sbb-dialog-inset-block: 0 auto;
|
|
1289
|
-
--sbb-dialog-inset-inline: 0 auto;
|
|
1290
1288
|
--sbb-dialog-border-radius: var(--sbb-border-radius-8x);
|
|
1291
1289
|
--sbb-dialog-animation-easing: ease;
|
|
1292
1290
|
--sbb-dialog-pointer-events: none;
|
|
1293
|
-
--sbb-dialog-backdrop-visibility: hidden;
|
|
1294
1291
|
--sbb-dialog-backdrop-pointer-events: none;
|
|
1295
|
-
--sbb-dialog-backdrop-color:
|
|
1292
|
+
--sbb-dialog-backdrop-color: var(--sbb-background-color-3);
|
|
1296
1293
|
--sbb-dialog-actions-border-color: var(--sbb-background-color-4);
|
|
1297
1294
|
--sbb-dialog-close-button-inset-inline-end: var(--sbb-spacing-fixed-4x);
|
|
1298
1295
|
--sbb-dialog-close-button-margin-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
|
|
1299
1296
|
--_sbb-dialog-max-width: 100%;
|
|
1300
|
-
--_sbb-dialog-max-height: calc(
|
|
1297
|
+
--_sbb-dialog-max-height: calc(
|
|
1298
|
+
100dvh - env(safe-area-inset-top, 0) - var(--sbb-spacing-fixed-6x)
|
|
1299
|
+
);
|
|
1301
1300
|
--sbb-divider-color: var(--sbb-background-color-4);
|
|
1302
1301
|
--sbb-divider-color-negative: var(--sbb-background-color-4-negative);
|
|
1303
1302
|
--sbb-divider-border-width: var(--sbb-border-width-1x);
|
|
@@ -2049,7 +2048,9 @@ summary {
|
|
|
2049
2048
|
--sbb-alert-close-button-divider-display: block;
|
|
2050
2049
|
--sbb-dialog-padding-inline: var(--sbb-spacing-fixed-8x);
|
|
2051
2050
|
--sbb-dialog-translate-y: var(--sbb-spacing-fixed-4x);
|
|
2052
|
-
--_sbb-dialog-max-height: calc(
|
|
2051
|
+
--_sbb-dialog-max-height: calc(
|
|
2052
|
+
100dvh - env(safe-area-inset-top, 0) - 2 * var(--sbb-spacing-fixed-6x)
|
|
2053
|
+
);
|
|
2053
2054
|
--_sbb-dialog-max-width: 90vw;
|
|
2054
2055
|
--sbb-footer-clock-width: 7rem;
|
|
2055
2056
|
--sbb-notification-icon-align-self: flex-start;
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "5.8.0-dev.
|
|
3
|
+
"version": "5.8.0-dev.1789399194",
|
|
4
4
|
"description": "Lyne Design System",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design system",
|
|
7
7
|
"web components",
|
|
8
8
|
"lit",
|
|
9
|
-
"https://github.com/sbb-design-systems/lyne-components/commit/
|
|
9
|
+
"https://github.com/sbb-design-systems/lyne-components/commit/95ce1c5ebb9c3282130dc7b73c8ca982d148a3a1"
|
|
10
10
|
],
|
|
11
11
|
"type": "module",
|
|
12
12
|
"exports": {
|
package/safety-theme.css
CHANGED
|
@@ -1305,19 +1305,18 @@ summary {
|
|
|
1305
1305
|
--sbb-dialog-block-shadow: var(--sbb-box-shadow-level-9-soft);
|
|
1306
1306
|
--sbb-dialog-color-negative: var(--sbb-color-2-negative);
|
|
1307
1307
|
--sbb-dialog-block-shadow-negative: var(--sbb-box-shadow-level-9-soft-negative);
|
|
1308
|
-
--sbb-dialog-inset-block: 0 auto;
|
|
1309
|
-
--sbb-dialog-inset-inline: 0 auto;
|
|
1310
1308
|
--sbb-dialog-border-radius: var(--sbb-border-radius-8x);
|
|
1311
1309
|
--sbb-dialog-animation-easing: ease;
|
|
1312
1310
|
--sbb-dialog-pointer-events: none;
|
|
1313
|
-
--sbb-dialog-backdrop-visibility: hidden;
|
|
1314
1311
|
--sbb-dialog-backdrop-pointer-events: none;
|
|
1315
|
-
--sbb-dialog-backdrop-color:
|
|
1312
|
+
--sbb-dialog-backdrop-color: var(--sbb-background-color-3);
|
|
1316
1313
|
--sbb-dialog-actions-border-color: var(--sbb-background-color-4);
|
|
1317
1314
|
--sbb-dialog-close-button-inset-inline-end: var(--sbb-spacing-fixed-4x);
|
|
1318
1315
|
--sbb-dialog-close-button-margin-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
|
|
1319
1316
|
--_sbb-dialog-max-width: 100%;
|
|
1320
|
-
--_sbb-dialog-max-height: calc(
|
|
1317
|
+
--_sbb-dialog-max-height: calc(
|
|
1318
|
+
100dvh - env(safe-area-inset-top, 0) - var(--sbb-spacing-fixed-6x)
|
|
1319
|
+
);
|
|
1321
1320
|
--sbb-divider-color: var(--sbb-background-color-4);
|
|
1322
1321
|
--sbb-divider-color-negative: var(--sbb-background-color-4-negative);
|
|
1323
1322
|
--sbb-divider-border-width: var(--sbb-border-width-1x);
|
|
@@ -2069,7 +2068,9 @@ summary {
|
|
|
2069
2068
|
--sbb-alert-close-button-divider-display: block;
|
|
2070
2069
|
--sbb-dialog-padding-inline: var(--sbb-spacing-fixed-8x);
|
|
2071
2070
|
--sbb-dialog-translate-y: var(--sbb-spacing-fixed-4x);
|
|
2072
|
-
--_sbb-dialog-max-height: calc(
|
|
2071
|
+
--_sbb-dialog-max-height: calc(
|
|
2072
|
+
100dvh - env(safe-area-inset-top, 0) - 2 * var(--sbb-spacing-fixed-6x)
|
|
2073
|
+
);
|
|
2073
2074
|
--_sbb-dialog-max-width: 90vw;
|
|
2074
2075
|
--sbb-footer-clock-width: 7rem;
|
|
2075
2076
|
--sbb-notification-icon-align-self: flex-start;
|