@sbb-esta/lyne-elements-dev 5.4.1-dev.1786369039 → 5.4.2-dev.1786375230

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 (10) hide show
  1. package/development/dialog.pure.js +1 -1
  2. package/dialog/_dialog.global.scss +4 -6
  3. package/dialog.pure.js +1 -1
  4. package/lean-off-brand-theme.css +4 -6
  5. package/lean-safety-theme.css +4 -6
  6. package/lean-theme.css +4 -6
  7. package/off-brand-theme.css +4 -6
  8. package/package.json +2 -2
  9. package/safety-theme.css +4 -6
  10. package/standard-theme.css +4 -6
package/development/dialog.pure.js CHANGED
@@ -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-block: var(--sbb-dialog-inset-block);\n inset-inline: var(--sbb-dialog-inset-inline);\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-color: var(--sbb-background-color-3);\n --sbb-dialog-backdrop-visibility: visible;\n --sbb-dialog-backdrop-pointer-events: all;\n}\n\n:host([backdrop=translucent]:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]))) {\n --sbb-dialog-backdrop-color: color-mix(in srgb, var(--sbb-color-black) 50%, transparent);\n}\n\n:host([backdrop=opaque]:not([negative]):is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]))) {\n --sbb-dialog-backdrop-color: var(--sbb-background-color-3);\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(: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(:not(:is(:state(state-closed),[state--state-closed]))) {\n --sbb-dialog-inset-block: 0;\n --sbb-dialog-inset-inline: 0;\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-block: var(--sbb-dialog-inset-block);\n inset-inline: var(--sbb-dialog-inset-inline);\n}\n.sbb-dialog__container::before {\n content: \"\";\n visibility: var(--sbb-dialog-backdrop-visibility);\n pointer-events: var(--sbb-dialog-backdrop-pointer-events);\n position: fixed;\n inset-block: var(--sbb-dialog-inset-block);\n inset-inline: var(--sbb-dialog-inset-inline);\n background-color: var(--sbb-dialog-backdrop-color);\n transition-duration: var(--sbb-dialog-animation-duration);\n transition-timing-function: var(--sbb-dialog-animation-easing);\n transition-property: background-color, visibility;\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}\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: block;\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 height: var(--sbb-dialog-height);\n width: var(--sbb-dialog-width);\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 max-height: var(--sbb-dialog-max-height);\n}\n@media (min-width: calc(37.5rem)) {\n :host(:is(:state(has-intermediate-element),[state--has-intermediate-element])) ::slotted(:first-child),\n .sbb-dialog__wrapper {\n width: var(--sbb-dialog-width);\n height: var(--sbb-dialog-height);\n }\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";
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-block: var(--sbb-dialog-inset-block);\n inset-inline: var(--sbb-dialog-inset-inline);\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-color: var(--sbb-background-color-3);\n --sbb-dialog-backdrop-visibility: visible;\n --sbb-dialog-backdrop-pointer-events: all;\n}\n\n:host([backdrop=translucent]:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]))) {\n --sbb-dialog-backdrop-color: color-mix(in srgb, var(--sbb-color-black) 50%, transparent);\n}\n\n:host([backdrop=opaque]:not([negative]):is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]))) {\n --sbb-dialog-backdrop-color: var(--sbb-background-color-3);\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(: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(:not(:is(:state(state-closed),[state--state-closed]))) {\n --sbb-dialog-inset-block: 0;\n --sbb-dialog-inset-inline: 0;\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-block: var(--sbb-dialog-inset-block);\n inset-inline: var(--sbb-dialog-inset-inline);\n}\n.sbb-dialog__container::before {\n content: \"\";\n visibility: var(--sbb-dialog-backdrop-visibility);\n pointer-events: var(--sbb-dialog-backdrop-pointer-events);\n position: fixed;\n inset-block: var(--sbb-dialog-inset-block);\n inset-inline: var(--sbb-dialog-inset-inline);\n background-color: var(--sbb-dialog-backdrop-color);\n transition-duration: var(--sbb-dialog-animation-duration);\n transition-timing-function: var(--sbb-dialog-animation-easing);\n transition-property: background-color, visibility;\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}\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";
134
134
 
135
135
  //#endregion
136
136
  //#region src/elements/dialog/dialog/dialog.component.ts
package/dialog/_dialog.global.scss CHANGED
@@ -9,10 +9,6 @@ $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-width: auto;
13
- --sbb-dialog-max-width: 100%;
14
- --sbb-dialog-height: auto;
15
- --sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-6x));
16
12
  --sbb-dialog-inset-block: 0 auto;
17
13
  --sbb-dialog-inset-inline: 0 auto;
18
14
  --sbb-dialog-border-radius: var(--sbb-border-radius-8x);
@@ -24,13 +20,15 @@ $theme: 'standard' !default;
24
20
  --sbb-dialog-actions-border-color: var(--sbb-background-color-4);
25
21
  --sbb-dialog-close-button-inset-inline-end: var(--sbb-spacing-fixed-4x);
26
22
  --sbb-dialog-close-button-margin-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
23
+ --_sbb-dialog-max-width: 100%;
24
+ --_sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-6x));
27
25
  }
28
26
 
29
27
  @mixin breakpoint-small {
30
28
  --sbb-dialog-padding-inline: var(--sbb-spacing-fixed-8x);
31
- --sbb-dialog-max-height: calc(100vh - 2 * var(--sbb-spacing-fixed-6x));
32
- --sbb-dialog-max-width: 90vw;
33
29
  --sbb-dialog-translate-y: var(--sbb-spacing-fixed-4x);
30
+ --_sbb-dialog-max-height: calc(100vh - 2 * var(--sbb-spacing-fixed-6x));
31
+ --_sbb-dialog-max-width: 90vw;
34
32
  }
35
33
 
36
34
  @mixin rules {
package/dialog.pure.js CHANGED
@@ -2,7 +2,7 @@ import{html as e,unsafeCSS as t}from"lit";import{SbbActionGroupElement as n}from
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
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));inset-block:var(--sbb-dialog-inset-block);inset-inline:var(--sbb-dialog-inset-inline);z-index:var(--sbb-dialog-z-index,var(--sbb-overlay-default-z-index));display:none;position:fixed}: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-color:var(--sbb-background-color-3);--sbb-dialog-backdrop-visibility:visible;--sbb-dialog-backdrop-pointer-events:all}:host([backdrop=translucent]:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]))){--sbb-dialog-backdrop-color:color-mix(in srgb, var(--sbb-color-black) 50%, transparent)}:host([backdrop=opaque]:not([negative]):is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]))){--sbb-dialog-backdrop-color:var(--sbb-background-color-3)}: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(: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(:not(:is(:state(state-closed),[state--state-closed]))){--sbb-dialog-inset-block:0;--sbb-dialog-inset-inline:0}.sbb-dialog__container{pointer-events:var(--sbb-dialog-pointer-events);inset-block:var(--sbb-dialog-inset-block);inset-inline:var(--sbb-dialog-inset-inline);justify-content:center;align-items:center;display:flex;position:fixed}.sbb-dialog__container:before{content:"";visibility:var(--sbb-dialog-backdrop-visibility);pointer-events:var(--sbb-dialog-backdrop-pointer-events);inset-block:var(--sbb-dialog-inset-block);inset-inline:var(--sbb-dialog-inset-inline);background-color:var(--sbb-dialog-backdrop-color);transition-duration:var(--sbb-dialog-animation-duration);transition-timing-function:var(--sbb-dialog-animation-easing);transition-property:background-color,visibility;position:fixed}.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;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:block}: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{height:var(--sbb-dialog-height);width:var(--sbb-dialog-width);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{max-height:var(--sbb-dialog-max-height)}@media (width>=37.5rem){:host(:is(:state(has-intermediate-element),[state--has-intermediate-element])) ::slotted(:first-child),.sbb-dialog__wrapper{width:var(--sbb-dialog-width);height:var(--sbb-dialog-height)}}: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%)}}
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));inset-block:var(--sbb-dialog-inset-block);inset-inline:var(--sbb-dialog-inset-inline);z-index:var(--sbb-dialog-z-index,var(--sbb-overlay-default-z-index));display:none;position:fixed}: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-color:var(--sbb-background-color-3);--sbb-dialog-backdrop-visibility:visible;--sbb-dialog-backdrop-pointer-events:all}:host([backdrop=translucent]:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]))){--sbb-dialog-backdrop-color:color-mix(in srgb, var(--sbb-color-black) 50%, transparent)}:host([backdrop=opaque]:not([negative]):is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]))){--sbb-dialog-backdrop-color:var(--sbb-background-color-3)}: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(: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(:not(:is(:state(state-closed),[state--state-closed]))){--sbb-dialog-inset-block:0;--sbb-dialog-inset-inline:0}.sbb-dialog__container{pointer-events:var(--sbb-dialog-pointer-events);inset-block:var(--sbb-dialog-inset-block);inset-inline:var(--sbb-dialog-inset-inline);justify-content:center;align-items:center;display:flex;position:fixed}.sbb-dialog__container:before{content:"";visibility:var(--sbb-dialog-backdrop-visibility);pointer-events:var(--sbb-dialog-backdrop-pointer-events);inset-block:var(--sbb-dialog-inset-block);inset-inline:var(--sbb-dialog-inset-inline);background-color:var(--sbb-dialog-backdrop-color);transition-duration:var(--sbb-dialog-animation-duration);transition-timing-function:var(--sbb-dialog-animation-easing);transition-property:background-color,visibility;position:fixed}.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;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%)}}
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/lean-off-brand-theme.css CHANGED
@@ -1303,10 +1303,6 @@ summary {
1303
1303
  --sbb-dialog-block-shadow: var(--sbb-box-shadow-level-9-soft);
1304
1304
  --sbb-dialog-color-negative: var(--sbb-color-2-negative);
1305
1305
  --sbb-dialog-block-shadow-negative: var(--sbb-box-shadow-level-9-soft-negative);
1306
- --sbb-dialog-width: auto;
1307
- --sbb-dialog-max-width: 100%;
1308
- --sbb-dialog-height: auto;
1309
- --sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-6x));
1310
1306
  --sbb-dialog-inset-block: 0 auto;
1311
1307
  --sbb-dialog-inset-inline: 0 auto;
1312
1308
  --sbb-dialog-border-radius: var(--sbb-border-radius-8x);
@@ -1318,6 +1314,8 @@ summary {
1318
1314
  --sbb-dialog-actions-border-color: var(--sbb-background-color-4);
1319
1315
  --sbb-dialog-close-button-inset-inline-end: var(--sbb-spacing-fixed-4x);
1320
1316
  --sbb-dialog-close-button-margin-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
1317
+ --_sbb-dialog-max-width: 100%;
1318
+ --_sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-6x));
1321
1319
  --sbb-divider-color: var(--sbb-background-color-4);
1322
1320
  --sbb-divider-color-negative: var(--sbb-background-color-4-negative);
1323
1321
  --sbb-divider-border-width: var(--sbb-border-width-1x);
@@ -2053,9 +2051,9 @@ summary {
2053
2051
  --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-small);
2054
2052
  --sbb-alert-close-button-divider-display: block;
2055
2053
  --sbb-dialog-padding-inline: var(--sbb-spacing-fixed-8x);
2056
- --sbb-dialog-max-height: calc(100vh - 2 * var(--sbb-spacing-fixed-6x));
2057
- --sbb-dialog-max-width: 90vw;
2058
2054
  --sbb-dialog-translate-y: var(--sbb-spacing-fixed-4x);
2055
+ --_sbb-dialog-max-height: calc(100vh - 2 * var(--sbb-spacing-fixed-6x));
2056
+ --_sbb-dialog-max-width: 90vw;
2059
2057
  --sbb-footer-clock-width: 7rem;
2060
2058
  --sbb-notification-icon-align-self: flex-start;
2061
2059
  --sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs);
package/lean-safety-theme.css CHANGED
@@ -1303,10 +1303,6 @@ summary {
1303
1303
  --sbb-dialog-block-shadow: var(--sbb-box-shadow-level-9-soft);
1304
1304
  --sbb-dialog-color-negative: var(--sbb-color-2-negative);
1305
1305
  --sbb-dialog-block-shadow-negative: var(--sbb-box-shadow-level-9-soft-negative);
1306
- --sbb-dialog-width: auto;
1307
- --sbb-dialog-max-width: 100%;
1308
- --sbb-dialog-height: auto;
1309
- --sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-6x));
1310
1306
  --sbb-dialog-inset-block: 0 auto;
1311
1307
  --sbb-dialog-inset-inline: 0 auto;
1312
1308
  --sbb-dialog-border-radius: var(--sbb-border-radius-8x);
@@ -1318,6 +1314,8 @@ summary {
1318
1314
  --sbb-dialog-actions-border-color: var(--sbb-background-color-4);
1319
1315
  --sbb-dialog-close-button-inset-inline-end: var(--sbb-spacing-fixed-4x);
1320
1316
  --sbb-dialog-close-button-margin-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
1317
+ --_sbb-dialog-max-width: 100%;
1318
+ --_sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-6x));
1321
1319
  --sbb-divider-color: var(--sbb-background-color-4);
1322
1320
  --sbb-divider-color-negative: var(--sbb-background-color-4-negative);
1323
1321
  --sbb-divider-border-width: var(--sbb-border-width-1x);
@@ -2053,9 +2051,9 @@ summary {
2053
2051
  --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-small);
2054
2052
  --sbb-alert-close-button-divider-display: block;
2055
2053
  --sbb-dialog-padding-inline: var(--sbb-spacing-fixed-8x);
2056
- --sbb-dialog-max-height: calc(100vh - 2 * var(--sbb-spacing-fixed-6x));
2057
- --sbb-dialog-max-width: 90vw;
2058
2054
  --sbb-dialog-translate-y: var(--sbb-spacing-fixed-4x);
2055
+ --_sbb-dialog-max-height: calc(100vh - 2 * var(--sbb-spacing-fixed-6x));
2056
+ --_sbb-dialog-max-width: 90vw;
2059
2057
  --sbb-footer-clock-width: 7rem;
2060
2058
  --sbb-notification-icon-align-self: flex-start;
2061
2059
  --sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs);
package/lean-theme.css CHANGED
@@ -1303,10 +1303,6 @@ summary {
1303
1303
  --sbb-dialog-block-shadow: var(--sbb-box-shadow-level-9-soft);
1304
1304
  --sbb-dialog-color-negative: var(--sbb-color-2-negative);
1305
1305
  --sbb-dialog-block-shadow-negative: var(--sbb-box-shadow-level-9-soft-negative);
1306
- --sbb-dialog-width: auto;
1307
- --sbb-dialog-max-width: 100%;
1308
- --sbb-dialog-height: auto;
1309
- --sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-6x));
1310
1306
  --sbb-dialog-inset-block: 0 auto;
1311
1307
  --sbb-dialog-inset-inline: 0 auto;
1312
1308
  --sbb-dialog-border-radius: var(--sbb-border-radius-8x);
@@ -1318,6 +1314,8 @@ summary {
1318
1314
  --sbb-dialog-actions-border-color: var(--sbb-background-color-4);
1319
1315
  --sbb-dialog-close-button-inset-inline-end: var(--sbb-spacing-fixed-4x);
1320
1316
  --sbb-dialog-close-button-margin-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
1317
+ --_sbb-dialog-max-width: 100%;
1318
+ --_sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-6x));
1321
1319
  --sbb-divider-color: var(--sbb-background-color-4);
1322
1320
  --sbb-divider-color-negative: var(--sbb-background-color-4-negative);
1323
1321
  --sbb-divider-border-width: var(--sbb-border-width-1x);
@@ -2053,9 +2051,9 @@ summary {
2053
2051
  --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-small);
2054
2052
  --sbb-alert-close-button-divider-display: block;
2055
2053
  --sbb-dialog-padding-inline: var(--sbb-spacing-fixed-8x);
2056
- --sbb-dialog-max-height: calc(100vh - 2 * var(--sbb-spacing-fixed-6x));
2057
- --sbb-dialog-max-width: 90vw;
2058
2054
  --sbb-dialog-translate-y: var(--sbb-spacing-fixed-4x);
2055
+ --_sbb-dialog-max-height: calc(100vh - 2 * var(--sbb-spacing-fixed-6x));
2056
+ --_sbb-dialog-max-width: 90vw;
2059
2057
  --sbb-footer-clock-width: 7rem;
2060
2058
  --sbb-notification-icon-align-self: flex-start;
2061
2059
  --sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs);
package/off-brand-theme.css CHANGED
@@ -1303,10 +1303,6 @@ summary {
1303
1303
  --sbb-dialog-block-shadow: var(--sbb-box-shadow-level-9-soft);
1304
1304
  --sbb-dialog-color-negative: var(--sbb-color-2-negative);
1305
1305
  --sbb-dialog-block-shadow-negative: var(--sbb-box-shadow-level-9-soft-negative);
1306
- --sbb-dialog-width: auto;
1307
- --sbb-dialog-max-width: 100%;
1308
- --sbb-dialog-height: auto;
1309
- --sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-6x));
1310
1306
  --sbb-dialog-inset-block: 0 auto;
1311
1307
  --sbb-dialog-inset-inline: 0 auto;
1312
1308
  --sbb-dialog-border-radius: var(--sbb-border-radius-8x);
@@ -1318,6 +1314,8 @@ summary {
1318
1314
  --sbb-dialog-actions-border-color: var(--sbb-background-color-4);
1319
1315
  --sbb-dialog-close-button-inset-inline-end: var(--sbb-spacing-fixed-4x);
1320
1316
  --sbb-dialog-close-button-margin-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
1317
+ --_sbb-dialog-max-width: 100%;
1318
+ --_sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-6x));
1321
1319
  --sbb-divider-color: var(--sbb-background-color-4);
1322
1320
  --sbb-divider-color-negative: var(--sbb-background-color-4-negative);
1323
1321
  --sbb-divider-border-width: var(--sbb-border-width-1x);
@@ -2053,9 +2051,9 @@ summary {
2053
2051
  --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-small);
2054
2052
  --sbb-alert-close-button-divider-display: block;
2055
2053
  --sbb-dialog-padding-inline: var(--sbb-spacing-fixed-8x);
2056
- --sbb-dialog-max-height: calc(100vh - 2 * var(--sbb-spacing-fixed-6x));
2057
- --sbb-dialog-max-width: 90vw;
2058
2054
  --sbb-dialog-translate-y: var(--sbb-spacing-fixed-4x);
2055
+ --_sbb-dialog-max-height: calc(100vh - 2 * var(--sbb-spacing-fixed-6x));
2056
+ --_sbb-dialog-max-width: 90vw;
2059
2057
  --sbb-footer-clock-width: 7rem;
2060
2058
  --sbb-notification-icon-align-self: flex-start;
2061
2059
  --sbb-notification-padding-inline: var(--sbb-spacing-responsive-xs);
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@sbb-esta/lyne-elements-dev",
3
- "version": "5.4.1-dev.1786369039",
3
+ "version": "5.4.2-dev.1786375230",
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/1718270b8a9155612b512f71bac402eb0895d137"
9
+ "https://github.com/sbb-design-systems/lyne-components/commit/c8a0fd5201605d65771d75873f987ad706e51406"
10
10
  ],
11
11
  "type": "module",
12
12
  "exports": {
package/safety-theme.css CHANGED
@@ -1303,10 +1303,6 @@ summary {
1303
1303
  --sbb-dialog-block-shadow: var(--sbb-box-shadow-level-9-soft);
1304
1304
  --sbb-dialog-color-negative: var(--sbb-color-2-negative);
1305
1305
  --sbb-dialog-block-shadow-negative: var(--sbb-box-shadow-level-9-soft-negative);
1306
- --sbb-dialog-width: auto;
1307
- --sbb-dialog-max-width: 100%;
1308
- --sbb-dialog-height: auto;
1309
- --sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-6x));
1310
1306
  --sbb-dialog-inset-block: 0 auto;
1311
1307
  --sbb-dialog-inset-inline: 0 auto;
1312
1308
  --sbb-dialog-border-radius: var(--sbb-border-radius-8x);
@@ -1318,6 +1314,8 @@ summary {
1318
1314
  --sbb-dialog-actions-border-color: var(--sbb-background-color-4);
1319
1315
  --sbb-dialog-close-button-inset-inline-end: var(--sbb-spacing-fixed-4x);
1320
1316
  --sbb-dialog-close-button-margin-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
1317
+ --_sbb-dialog-max-width: 100%;
1318
+ --_sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-6x));
1321
1319
  --sbb-divider-color: var(--sbb-background-color-4);
1322
1320
  --sbb-divider-color-negative: var(--sbb-background-color-4-negative);
1323
1321
  --sbb-divider-border-width: var(--sbb-border-width-1x);
@@ -2053,9 +2051,9 @@ summary {
2053
2051
  --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-small);
2054
2052
  --sbb-alert-close-button-divider-display: block;
2055
2053
  --sbb-dialog-padding-inline: var(--sbb-spacing-fixed-8x);
2056
- --sbb-dialog-max-height: calc(100vh - 2 * var(--sbb-spacing-fixed-6x));
2057
- --sbb-dialog-max-width: 90vw;
2058
2054
  --sbb-dialog-translate-y: var(--sbb-spacing-fixed-4x);
2055
+ --_sbb-dialog-max-height: calc(100vh - 2 * var(--sbb-spacing-fixed-6x));
2056
+ --_sbb-dialog-max-width: 90vw;
2059
2057
  --sbb-footer-clock-width: 7rem;
2060
2058
  --sbb-notification-icon-align-self: flex-start;
2061
2059
  --sbb-notification-padding-inline: var(--sbb-spacing-responsive-xs);
package/standard-theme.css CHANGED
@@ -1303,10 +1303,6 @@ summary {
1303
1303
  --sbb-dialog-block-shadow: var(--sbb-box-shadow-level-9-soft);
1304
1304
  --sbb-dialog-color-negative: var(--sbb-color-2-negative);
1305
1305
  --sbb-dialog-block-shadow-negative: var(--sbb-box-shadow-level-9-soft-negative);
1306
- --sbb-dialog-width: auto;
1307
- --sbb-dialog-max-width: 100%;
1308
- --sbb-dialog-height: auto;
1309
- --sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-6x));
1310
1306
  --sbb-dialog-inset-block: 0 auto;
1311
1307
  --sbb-dialog-inset-inline: 0 auto;
1312
1308
  --sbb-dialog-border-radius: var(--sbb-border-radius-8x);
@@ -1318,6 +1314,8 @@ summary {
1318
1314
  --sbb-dialog-actions-border-color: var(--sbb-background-color-4);
1319
1315
  --sbb-dialog-close-button-inset-inline-end: var(--sbb-spacing-fixed-4x);
1320
1316
  --sbb-dialog-close-button-margin-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
1317
+ --_sbb-dialog-max-width: 100%;
1318
+ --_sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-6x));
1321
1319
  --sbb-divider-color: var(--sbb-background-color-4);
1322
1320
  --sbb-divider-color-negative: var(--sbb-background-color-4-negative);
1323
1321
  --sbb-divider-border-width: var(--sbb-border-width-1x);
@@ -2053,9 +2051,9 @@ summary {
2053
2051
  --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-small);
2054
2052
  --sbb-alert-close-button-divider-display: block;
2055
2053
  --sbb-dialog-padding-inline: var(--sbb-spacing-fixed-8x);
2056
- --sbb-dialog-max-height: calc(100vh - 2 * var(--sbb-spacing-fixed-6x));
2057
- --sbb-dialog-max-width: 90vw;
2058
2054
  --sbb-dialog-translate-y: var(--sbb-spacing-fixed-4x);
2055
+ --_sbb-dialog-max-height: calc(100vh - 2 * var(--sbb-spacing-fixed-6x));
2056
+ --_sbb-dialog-max-width: 90vw;
2059
2057
  --sbb-footer-clock-width: 7rem;
2060
2058
  --sbb-notification-icon-align-self: flex-start;
2061
2059
  --sbb-notification-padding-inline: var(--sbb-spacing-responsive-xs);