@sbb-esta/lyne-elements-dev 5.13.0-dev.1793605208 → 5.13.0-dev.1793626084

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 (14) hide show
  1. package/alert/_alert.global.scss +25 -4
  2. package/alert.pure.js +1 -1
  3. package/custom-elements.json +1 -37
  4. package/development/alert.pure.js +1 -1
  5. package/development/select/select.component.d.ts +1 -3
  6. package/development/select.pure.js +18 -44
  7. package/lean-off-brand-theme.css +17 -2
  8. package/lean-safety-theme.css +17 -2
  9. package/lean-theme.css +17 -2
  10. package/off-brand-theme.css +17 -2
  11. package/package.json +2 -2
  12. package/safety-theme.css +17 -2
  13. package/select.pure.js +14 -9
  14. package/standard-theme.css +17 -2
package/alert/_alert.global.scss CHANGED
@@ -14,17 +14,34 @@ $theme: 'standard' !default;
14
14
  --sbb-alert-icon-size-l: var(--sbb-size-icon-ui-small);
15
15
  --sbb-alert-title-margin-block: 0;
16
16
  --sbb-alert-font-size: var(--sbb-text-font-size-s);
17
+ --sbb-alert-gap-s: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);
18
+ --sbb-alert-gap-m: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
19
+ --sbb-alert-gap-l: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
17
20
  --sbb-alert-gap: #{sbb.theme-pattern-select(
18
21
  (
19
- 'standard': var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs),
20
- 'lean': var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs),
22
+ 'standard': var(--sbb-alert-gap-m),
23
+ 'lean': var(--sbb-alert-gap-s),
21
24
  ),
22
25
  $theme
23
26
  )};
27
+ --sbb-alert-close-icon-margin-s: var(--sbb-spacing-responsive-xxxs);
28
+ --sbb-alert-close-icon-margin-m: var(--sbb-spacing-responsive-xxs);
29
+ --sbb-alert-close-icon-margin-l: var(--sbb-spacing-responsive-xxs);
24
30
  --sbb-alert-close-icon-margin: #{sbb.theme-pattern-select(
25
31
  (
26
- 'standard': var(--sbb-spacing-responsive-xxs),
27
- 'lean': var(--sbb-spacing-responsive-xxxs),
32
+ 'standard': var(--sbb-alert-close-icon-margin-m),
33
+ 'lean': var(--sbb-alert-close-icon-margin-s),
34
+ ),
35
+ $theme
36
+ )};
37
+ --sbb-alert-grid-template-columns: 1fr auto;
38
+ --sbb-alert-icon-padding-block-s: var(--sbb-spacing-fixed-2x);
39
+ --sbb-alert-icon-padding-block-m: var(--sbb-spacing-fixed-3x);
40
+ --sbb-alert-icon-padding-block-l: #{sbb.px-to-rem-build(10)};
41
+ --sbb-alert-icon-padding-block: #{sbb.theme-pattern-select(
42
+ (
43
+ 'standard': var(--sbb-alert-icon-padding-block-m),
44
+ 'lean': var(--sbb-alert-icon-padding-block-s),
28
45
  ),
29
46
  $theme
30
47
  )};
@@ -39,6 +56,10 @@ $theme: 'standard' !default;
39
56
 
40
57
  @mixin breakpoint-small {
41
58
  --sbb-alert-close-button-divider-display: block;
59
+ --sbb-alert-grid-template-columns: auto 1fr auto;
60
+ --sbb-alert-icon-padding-block-s: 0;
61
+ --sbb-alert-icon-padding-block-m: 0;
62
+ --sbb-alert-icon-padding-block-l: 0;
42
63
  }
43
64
 
44
65
  @mixin breakpoint-large {
package/alert.pure.js CHANGED
@@ -4,7 +4,7 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,not
4
4
  <slot name="accessibility-title">${this.accessibilityTitle}</slot>
5
5
  </${c(e)}>`:r}
6
6
  <slot @slotchange=${e=>this._slotChanged(e)}></slot>
7
- `}}})();var w=`:host{--sbb-alert-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x));opacity:0;border-radius:var(--sbb-alert-forced-color-border-radius);outline:var(--sbb-alert-outline);grid-template-rows:0fr;display:grid}:host(:is(:state(state-opening),[state--state-opening]):not([animation=open],[animation=all])),:host(:is(:state(state-closing),[state--state-closing]):not([animation=close],[animation=all])){--sbb-disable-animation-duration:0s}:host([size=s]){--sbb-alert-gap:var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);--sbb-alert-close-icon-margin:var(--sbb-spacing-responsive-xxxs)}:host([size=m]){--sbb-alert-gap:var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);--sbb-alert-close-icon-margin:var(--sbb-spacing-responsive-xxs)}:host([size=l]){--sbb-alert-icon-size:var(--sbb-alert-icon-size-l);--sbb-alert-title-margin-block:0 var(--sbb-spacing-fixed-1x)}:host(:not(:is(:state(dark),[state--dark]))){--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark)}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){opacity:1;grid-template-rows:1fr}:host(:is(:state(state-opening),[state--state-opening])){animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-alert-animation-duration);animation-timing-function:var(--sbb-alert-timing-function);animation-delay:0s, var(--sbb-alert-animation-duration)}:host(:is(:state(state-closing),[state--state-closing])){animation-name:close-opacity,close;animation-fill-mode:forwards;animation-duration:var(--sbb-alert-animation-duration);animation-timing-function:var(--sbb-alert-timing-function);animation-delay:0s, var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x))}.sbb-alert__transition-wrapper{overflow:hidden}.sbb-alert{align-items:center;gap:var(--sbb-alert-gap);min-width:fit-content;padding:var(--sbb-alert-padding);color:var(--sbb-alert-color);background-color:var(--sbb-alert-background-color);border-radius:var(--sbb-alert-border-radius);font-size:var(--sbb-alert-font-size);letter-spacing:var(--sbb-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);grid-template-columns:1fr auto;display:grid;overflow:hidden}@media (width>=37.5rem){.sbb-alert{grid-template-columns:auto 1fr auto;align-items:flex-start}}.sbb-alert__icon{padding-block:var(--sbb-spacing-fixed-1x);min-width:var(--sbb-alert-icon-size);--sbb-icon-svg-width:var(--sbb-alert-icon-size);--sbb-icon-svg-height:var(--sbb-alert-icon-size);align-items:start;display:flex}.sbb-alert__content{color-scheme:light only;order:3;grid-column:1/3}@media (width>=37.5rem){.sbb-alert__content{order:initial;grid-column-start:initial;grid-column-end:initial}}.sbb-alert__content-slot{margin:0;padding:0;display:inline}.sbb-alert__close-button-wrapper{color-scheme:light only;justify-content:flex-end;align-items:center;height:100%;display:flex}@media (width>=37.5rem){.sbb-alert__close-button{margin-inline-start:var(--sbb-alert-close-icon-margin)}}.sbb-alert__close-button-divider{display:var(--sbb-alert-close-button-divider-display,none);height:calc(100% - var(--sbb-spacing-fixed-1x) * 2)}@keyframes open{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes open-opacity{0%{opacity:0}to{opacity:1}}@keyframes close{0%{grid-template-rows:1fr}to{grid-template-rows:0fr}}@keyframes close-opacity{0%{opacity:1}to{opacity:0}}::slotted(sbb-title){margin-block:var(--sbb-alert-title-margin-block)}
7
+ `}}})();var w=`:host{--sbb-alert-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x));opacity:0;border-radius:var(--sbb-alert-forced-color-border-radius);outline:var(--sbb-alert-outline);grid-template-rows:0fr;display:grid}:host(:is(:state(state-opening),[state--state-opening]):not([animation=open],[animation=all])),:host(:is(:state(state-closing),[state--state-closing]):not([animation=close],[animation=all])){--sbb-disable-animation-duration:0s}:host([size=s]){--sbb-alert-gap:var(--sbb-alert-gap-s);--sbb-alert-close-icon-margin:var(--sbb-alert-close-icon-margin-s);--sbb-alert-icon-padding-block:var(--sbb-alert-icon-padding-block-s)}:host([size=m]){--sbb-alert-gap:var(--sbb-alert-gap-m);--sbb-alert-close-icon-margin:var(--sbb-alert-close-icon-margin-m);--sbb-alert-icon-padding-block:var(--sbb-alert-icon-padding-block-m)}:host([size=l]){--sbb-alert-gap:var(--sbb-alert-gap-l);--sbb-alert-close-icon-margin:var(--sbb-alert-close-icon-margin-l);--sbb-alert-icon-padding-block:var(--sbb-alert-icon-padding-block-l);--sbb-alert-icon-size:var(--sbb-alert-icon-size-l);--sbb-alert-title-margin-block:0 var(--sbb-spacing-fixed-1x)}:host(:not(:is(:state(dark),[state--dark]))){--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark)}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){opacity:1;grid-template-rows:1fr}:host(:is(:state(state-opening),[state--state-opening])){animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-alert-animation-duration);animation-timing-function:var(--sbb-alert-timing-function);animation-delay:0s, var(--sbb-alert-animation-duration)}:host(:is(:state(state-closing),[state--state-closing])){animation-name:close-opacity,close;animation-fill-mode:forwards;animation-duration:var(--sbb-alert-animation-duration);animation-timing-function:var(--sbb-alert-timing-function);animation-delay:0s, var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x))}.sbb-alert__transition-wrapper{overflow:hidden}.sbb-alert{grid-template-columns:var(--sbb-alert-grid-template-columns);align-items:center;gap:var(--sbb-alert-gap);min-width:fit-content;padding:var(--sbb-alert-padding);color:var(--sbb-alert-color);background-color:var(--sbb-alert-background-color);border-radius:var(--sbb-alert-border-radius);font-size:var(--sbb-alert-font-size);letter-spacing:var(--sbb-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);display:grid;overflow:hidden}.sbb-alert__icon{min-width:var(--sbb-alert-icon-size);padding-block:var(--sbb-alert-icon-padding-block);--sbb-icon-svg-width:var(--sbb-alert-icon-size);--sbb-icon-svg-height:var(--sbb-alert-icon-size);align-self:start;align-items:center;min-height:1lh;display:flex}@media (width>=37.5rem){:host(:is(:state(slotted-title),[state--slotted-title])) .sbb-alert__icon{padding-block:var(--sbb-spacing-fixed-1x)}}.sbb-alert__content{color-scheme:light only;order:3;grid-column:1/3}@media (width>=37.5rem){.sbb-alert__content{order:initial;grid-column-start:initial;grid-column-end:initial}}.sbb-alert__content-slot{margin:0;padding:0;display:inline}.sbb-alert__close-button-wrapper{color-scheme:light only;justify-content:flex-end;align-items:center;height:100%;display:flex}.sbb-alert__close-button{margin-block:calc(-1 * var(--sbb-spacing-fixed-8x))}@media (width>=37.5rem){.sbb-alert__close-button{margin-inline-start:var(--sbb-alert-close-icon-margin)}}.sbb-alert__close-button-divider{display:var(--sbb-alert-close-button-divider-display,none);height:calc(100% - var(--sbb-spacing-fixed-1x) * 2)}@keyframes open{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes open-opacity{0%{opacity:0}to{opacity:1}}@keyframes close{0%{grid-template-rows:1fr}to{grid-template-rows:0fr}}@keyframes close-opacity{0%{opacity:1}to{opacity:0}}::slotted(sbb-title){margin-block:var(--sbb-alert-title-margin-block)}
8
8
  `;let T=(()=>{let o=x(p(f)),s,c=[],u=[],m,g=[],v=[];return class extends o{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(o[Symbol.metadata]??null):void 0;s=[a({reflect:!0})],m=[a({reflect:!0})],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,u),e(this,null,m,{kind:`accessor`,name:`animation`,static:!1,private:!1,access:{has:e=>`animation`in e,get:e=>e.animation,set:(e,t)=>{e.animation=t}},metadata:t},g,v),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-alert`}static{this.elementDependencies=[y,b]}static{this.styles=[i(w)]}static{this.events={beforeopen:`beforeopen`,open:`open`,beforeclose:`beforeclose`,close:`close`}}#e;get size(){return this.#e}set size(e){this.#e=e}#t;get animation(){return this.#t}set animation(e){this.#t=e}constructor(){super(),this.#e=t(this,c,null),this.#t=(t(this,u),t(this,g,`all`)),this._language=(t(this,v),new d(this)),this._darkModeController=new l(this,()=>{this._syncLinks(),this._configureTitle(),this.requestUpdate()}),this.addEventListener(`animationend`,e=>this._onAnimationEnd(e))}open(){this.state=`opening`,this.dispatchBeforeOpenEvent()&&this._isZeroAnimationDuration()&&this._handleOpening()}close(){this.state===`opened`&&this.dispatchBeforeCloseEvent()&&(this.state=`closing`,this._isZeroAnimationDuration()&&this._handleClosing())}firstUpdated(e){super.firstUpdated(e),this.open()}willUpdate(e){super.willUpdate(e),e.has(`size`)&&this._configureTitle()}_isZeroAnimationDuration(){return _(this,`--sbb-alert-animation-duration`)}_onAnimationEnd(e){this.state===`opening`&&e.animationName===`open-opacity`?this._handleOpening():this.state===`closing`&&e.animationName===`close`&&this._handleClosing()}_handleOpening(){this.state=`opened`,this.dispatchOpenEvent()}_handleClosing(){this.state=`closed`,this.dispatchCloseEvent(),setTimeout(()=>this.remove())}_handleSlotchange(){this._syncLinks();let e=Array.from(this.children).find(e=>e.localName===`sbb-title`);e&&(e.slot=`title`)}_syncLinks(){Array.from(this.querySelectorAll?.(`sbb-link`)??[]).forEach(e=>{customElements.upgrade(e),e.negative=this._isLightMode()})}_configureTitle(){let e=this.querySelector?.(`sbb-title`);e&&(customElements.upgrade(e),e.negative=this._isLightMode(),e.visualLevel=this.size===`l`?`3`:`5`)}_isLightMode(){return!this._darkModeController.matches()}renderIconName(){return super.renderIconName()||`info`}render(){return n`
9
9
  <!-- wrapper needed to properly support fade in animation -->
10
10
  <div class="sbb-alert__transition-wrapper">
package/custom-elements.json CHANGED
@@ -63953,7 +63953,7 @@
63953
63953
  "privacy": "private",
63954
63954
  "return": {
63955
63955
  "type": {
63956
- "text": "void"
63956
+ "text": "Promise<void>"
63957
63957
  }
63958
63958
  }
63959
63959
  },
@@ -64455,42 +64455,6 @@
64455
64455
  }
64456
64456
  }
64457
64457
  },
64458
- {
64459
- "kind": "method",
64460
- "name": "_spreadDeferredDisplayValue",
64461
- "privacy": "private",
64462
- "return": {
64463
- "type": {
64464
- "text": "(TemplateResult | Promise<TemplateResult>)[]"
64465
- }
64466
- },
64467
- "parameters": [
64468
- {
64469
- "name": "placeholder",
64470
- "type": {
64471
- "text": "TemplateResult"
64472
- }
64473
- }
64474
- ]
64475
- },
64476
- {
64477
- "kind": "method",
64478
- "name": "_deferredDisplayValue",
64479
- "privacy": "private",
64480
- "return": {
64481
- "type": {
64482
- "text": "Promise<TemplateResult>"
64483
- }
64484
- },
64485
- "parameters": [
64486
- {
64487
- "name": "placeholder",
64488
- "type": {
64489
- "text": "TemplateResult"
64490
- }
64491
- }
64492
- ]
64493
- },
64494
64458
  {
64495
64459
  "kind": "field",
64496
64460
  "name": "_updatePromise",
package/development/alert.pure.js CHANGED
@@ -186,7 +186,7 @@ let SbbAlertGroupElement = (() => {
186
186
  })();
187
187
 
188
188
  // src/elements/alert/alert/alert.scss?inline
189
- var alert_default = ":host {\n --sbb-alert-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-6x)\n );\n display: grid;\n grid-template-rows: 0fr;\n opacity: 0;\n border-radius: var(--sbb-alert-forced-color-border-radius);\n outline: var(--sbb-alert-outline);\n}\n\n:host(:is(:state(state-opening),[state--state-opening]):not([animation=open], [animation=all])) {\n --sbb-disable-animation-duration: 0s;\n}\n\n:host(:is(:state(state-closing),[state--state-closing]):not([animation=close], [animation=all])) {\n --sbb-disable-animation-duration: 0s;\n}\n\n:host([size=s]) {\n --sbb-alert-gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);\n --sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxxs);\n}\n\n:host([size=m]) {\n --sbb-alert-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);\n --sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxs);\n}\n\n:host([size=l]) {\n --sbb-alert-icon-size: var(--sbb-alert-icon-size-l);\n --sbb-alert-title-margin-block: 0 var(--sbb-spacing-fixed-1x);\n}\n\n:host(:not(:is(:state(dark),[state--dark]))) {\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n}\n\n:host(:is(:is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) {\n grid-template-rows: 1fr;\n opacity: 1;\n}\n\n:host(:is(:state(state-opening),[state--state-opening])) {\n animation-name: open, open-opacity;\n animation-fill-mode: forwards;\n animation-duration: var(--sbb-alert-animation-duration);\n animation-timing-function: var(--sbb-alert-timing-function);\n animation-delay: 0s, var(--sbb-alert-animation-duration);\n}\n\n:host(:is(:state(state-closing),[state--state-closing])) {\n animation-name: close-opacity, close;\n animation-fill-mode: forwards;\n animation-duration: var(--sbb-alert-animation-duration);\n animation-timing-function: var(--sbb-alert-timing-function);\n animation-delay: 0s, var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x));\n}\n\n.sbb-alert__transition-wrapper {\n overflow: hidden;\n}\n\n.sbb-alert {\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n gap: var(--sbb-alert-gap);\n min-width: fit-content;\n padding: var(--sbb-alert-padding);\n overflow: hidden;\n color: var(--sbb-alert-color);\n background-color: var(--sbb-alert-background-color);\n border-radius: var(--sbb-alert-border-radius);\n font-size: var(--sbb-alert-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n}\n@media (min-width: calc(37.5rem)) {\n .sbb-alert {\n grid-template-columns: auto 1fr auto;\n align-items: flex-start;\n }\n}\n\n.sbb-alert__icon {\n display: flex;\n align-items: start;\n padding-block: var(--sbb-spacing-fixed-1x);\n min-width: var(--sbb-alert-icon-size);\n --sbb-icon-svg-width: var(--sbb-alert-icon-size);\n --sbb-icon-svg-height: var(--sbb-alert-icon-size);\n}\n\n.sbb-alert__content {\n color-scheme: only light;\n order: 3;\n grid-column: 1/3;\n}\n@media (min-width: calc(37.5rem)) {\n .sbb-alert__content {\n order: initial;\n grid-column-start: initial;\n grid-column-end: initial;\n }\n}\n\n.sbb-alert__content-slot {\n display: inline;\n margin: 0;\n padding: 0;\n}\n\n.sbb-alert__close-button-wrapper {\n color-scheme: only light;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n height: 100%;\n}\n\n@media (min-width: calc(37.5rem)) {\n .sbb-alert__close-button {\n margin-inline-start: var(--sbb-alert-close-icon-margin);\n }\n}\n\n.sbb-alert__close-button-divider {\n display: var(--sbb-alert-close-button-divider-display, none);\n height: calc(100% - var(--sbb-spacing-fixed-1x) * 2);\n}\n\n@keyframes open {\n from {\n grid-template-rows: 0fr;\n }\n to {\n grid-template-rows: 1fr;\n }\n}\n@keyframes open-opacity {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@keyframes close {\n from {\n grid-template-rows: 1fr;\n }\n to {\n grid-template-rows: 0fr;\n }\n}\n@keyframes close-opacity {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n::slotted(sbb-title) {\n margin-block: var(--sbb-alert-title-margin-block);\n}\n";
189
+ var alert_default = ":host {\n --sbb-alert-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-6x)\n );\n display: grid;\n grid-template-rows: 0fr;\n opacity: 0;\n border-radius: var(--sbb-alert-forced-color-border-radius);\n outline: var(--sbb-alert-outline);\n}\n\n:host(:is(:state(state-opening),[state--state-opening]):not([animation=open], [animation=all])) {\n --sbb-disable-animation-duration: 0s;\n}\n\n:host(:is(:state(state-closing),[state--state-closing]):not([animation=close], [animation=all])) {\n --sbb-disable-animation-duration: 0s;\n}\n\n:host([size=s]) {\n --sbb-alert-gap: var(--sbb-alert-gap-s);\n --sbb-alert-close-icon-margin: var(--sbb-alert-close-icon-margin-s);\n --sbb-alert-icon-padding-block: var(--sbb-alert-icon-padding-block-s);\n}\n\n:host([size=m]) {\n --sbb-alert-gap: var(--sbb-alert-gap-m);\n --sbb-alert-close-icon-margin: var(--sbb-alert-close-icon-margin-m);\n --sbb-alert-icon-padding-block: var(--sbb-alert-icon-padding-block-m);\n}\n\n:host([size=l]) {\n --sbb-alert-gap: var(--sbb-alert-gap-l);\n --sbb-alert-close-icon-margin: var(--sbb-alert-close-icon-margin-l);\n --sbb-alert-icon-padding-block: var(--sbb-alert-icon-padding-block-l);\n --sbb-alert-icon-size: var(--sbb-alert-icon-size-l);\n --sbb-alert-title-margin-block: 0 var(--sbb-spacing-fixed-1x);\n}\n\n:host(:not(:is(:state(dark),[state--dark]))) {\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n}\n\n:host(:is(:is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) {\n grid-template-rows: 1fr;\n opacity: 1;\n}\n\n:host(:is(:state(state-opening),[state--state-opening])) {\n animation-name: open, open-opacity;\n animation-fill-mode: forwards;\n animation-duration: var(--sbb-alert-animation-duration);\n animation-timing-function: var(--sbb-alert-timing-function);\n animation-delay: 0s, var(--sbb-alert-animation-duration);\n}\n\n:host(:is(:state(state-closing),[state--state-closing])) {\n animation-name: close-opacity, close;\n animation-fill-mode: forwards;\n animation-duration: var(--sbb-alert-animation-duration);\n animation-timing-function: var(--sbb-alert-timing-function);\n animation-delay: 0s, var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x));\n}\n\n.sbb-alert__transition-wrapper {\n overflow: hidden;\n}\n\n.sbb-alert {\n display: grid;\n grid-template-columns: var(--sbb-alert-grid-template-columns);\n align-items: center;\n gap: var(--sbb-alert-gap);\n min-width: fit-content;\n padding: var(--sbb-alert-padding);\n overflow: hidden;\n color: var(--sbb-alert-color);\n background-color: var(--sbb-alert-background-color);\n border-radius: var(--sbb-alert-border-radius);\n font-size: var(--sbb-alert-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n}\n\n.sbb-alert__icon {\n display: flex;\n align-self: start;\n align-items: center;\n min-width: var(--sbb-alert-icon-size);\n padding-block: var(--sbb-alert-icon-padding-block);\n min-height: 1lh;\n --sbb-icon-svg-width: var(--sbb-alert-icon-size);\n --sbb-icon-svg-height: var(--sbb-alert-icon-size);\n}\n@media (min-width: calc(37.5rem)) {\n :host(:is(:state(slotted-title),[state--slotted-title])) .sbb-alert__icon {\n padding-block: var(--sbb-spacing-fixed-1x);\n }\n}\n\n.sbb-alert__content {\n color-scheme: only light;\n order: 3;\n grid-column: 1/3;\n}\n@media (min-width: calc(37.5rem)) {\n .sbb-alert__content {\n order: initial;\n grid-column-start: initial;\n grid-column-end: initial;\n }\n}\n\n.sbb-alert__content-slot {\n display: inline;\n margin: 0;\n padding: 0;\n}\n\n.sbb-alert__close-button-wrapper {\n color-scheme: only light;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n height: 100%;\n}\n\n.sbb-alert__close-button {\n margin-block: calc(-1 * var(--sbb-spacing-fixed-8x));\n}\n@media (min-width: calc(37.5rem)) {\n .sbb-alert__close-button {\n margin-inline-start: var(--sbb-alert-close-icon-margin);\n }\n}\n\n.sbb-alert__close-button-divider {\n display: var(--sbb-alert-close-button-divider-display, none);\n height: calc(100% - var(--sbb-spacing-fixed-1x) * 2);\n}\n\n@keyframes open {\n from {\n grid-template-rows: 0fr;\n }\n to {\n grid-template-rows: 1fr;\n }\n}\n@keyframes open-opacity {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@keyframes close {\n from {\n grid-template-rows: 1fr;\n }\n to {\n grid-template-rows: 0fr;\n }\n}\n@keyframes close-opacity {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n::slotted(sbb-title) {\n margin-block: var(--sbb-alert-title-margin-block);\n}\n";
190
190
 
191
191
  // src/elements/alert/alert/alert.component.ts
192
192
  /**
package/development/select/select.component.d.ts CHANGED
@@ -51,7 +51,7 @@ export declare class SbbSelectElement<T = string> extends SbbSelectElement_base
51
51
  */
52
52
  get type(): string;
53
53
  /** The value displayed by the component. */
54
- private accessor _displayValue;
54
+ private _displayValue;
55
55
  private _resizeObserver;
56
56
  private _overlay?;
57
57
  private _originElement;
@@ -179,8 +179,6 @@ export declare class SbbSelectElement<T = string> extends SbbSelectElement_base
179
179
  private _updateValueOptionState;
180
180
  private _getSelected;
181
181
  private _toggleOpening;
182
- private _spreadDeferredDisplayValue;
183
- private _deferredDisplayValue;
184
182
  protected render(): TemplateResult;
185
183
  }
186
184
  declare global {
package/development/select.pure.js CHANGED
@@ -1,9 +1,8 @@
1
1
  import { __esDecorate, __runInitializers } from "tslib";
2
2
  import { ResizeController } from "@lit-labs/observers/resize-controller.js";
3
3
  import { html, isServer, nothing, unsafeCSS } from "lit";
4
- import { property, state } from "lit/decorators.js";
4
+ import { property } from "lit/decorators.js";
5
5
  import { ref } from "lit/directives/ref.js";
6
- import { until } from "lit/directives/until.js";
7
6
  import { SbbDisabledMixin, SbbElement, SbbEscapableOverlayController, SbbFormAssociatedMixin, SbbLanguageController, SbbNegativeMixin, SbbOpenCloseBaseElement, SbbPropertyWatcherController, SbbReadonlyMixin, SbbRequiredMixin, SbbUpdateSchedulerMixin, forceType, getNextElementIndex, getOverride, handleDistinctChange, i18nMultipleSelectionPossible, i18nSelectionRequired, isEventOnElement, isNextjs, isZeroAnimationDuration, popoverResetStyles, scrollbarStyles, setOrRemoveAttribute, setOverlayPosition } from "./core.js";
8
7
  import { optionPanelStyles } from "./option.pure.js";
9
8
 
@@ -93,9 +92,6 @@ let SbbSelectElement = (() => {
93
92
  let _size_decorators;
94
93
  let _size_initializers = [];
95
94
  let _size_extraInitializers = [];
96
- let __displayValue_decorators;
97
- let __displayValue_initializers = [];
98
- let __displayValue_extraInitializers = [];
99
95
  return class SbbSelectElement extends _classSuper {
100
96
  static {
101
97
  const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
@@ -120,7 +116,6 @@ let SbbSelectElement = (() => {
120
116
  ];
121
117
  _set_value_decorators = [property()];
122
118
  _size_decorators = [property({ reflect: true })];
123
- __displayValue_decorators = [state()];
124
119
  __esDecorate(this, null, _placeholder_decorators, {
125
120
  kind: "accessor",
126
121
  name: "placeholder",
@@ -204,20 +199,6 @@ let SbbSelectElement = (() => {
204
199
  },
205
200
  metadata: _metadata
206
201
  }, _size_initializers, _size_extraInitializers);
207
- __esDecorate(this, null, __displayValue_decorators, {
208
- kind: "accessor",
209
- name: "_displayValue",
210
- static: false,
211
- private: false,
212
- access: {
213
- has: (obj) => "_displayValue" in obj,
214
- get: (obj) => obj._displayValue,
215
- set: (obj, value) => {
216
- obj._displayValue = value;
217
- }
218
- },
219
- metadata: _metadata
220
- }, __displayValue_initializers, __displayValue_extraInitializers);
221
202
  if (_metadata) Object.defineProperty(this, Symbol.metadata, {
222
203
  enumerable: true,
223
204
  configurable: true,
@@ -311,14 +292,6 @@ let SbbSelectElement = (() => {
311
292
  get type() {
312
293
  return this.multiple ? "select-multiple" : "select-one";
313
294
  }
314
- #_displayValue_accessor_storage;
315
- /** The value displayed by the component. */
316
- get _displayValue() {
317
- return this.#_displayValue_accessor_storage;
318
- }
319
- set _displayValue(value) {
320
- this.#_displayValue_accessor_storage = value;
321
- }
322
295
  /**
323
296
  * The 'combobox' input element
324
297
  * @internal
@@ -343,8 +316,9 @@ let SbbSelectElement = (() => {
343
316
  this.#disabled_accessor_storage = (__runInitializers(this, _compareWith_extraInitializers), __runInitializers(this, _disabled_initializers, false));
344
317
  this._value = (__runInitializers(this, _disabled_extraInitializers), null);
345
318
  this.#size_accessor_storage = __runInitializers(this, _size_initializers, null);
346
- this.#_displayValue_accessor_storage = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, __displayValue_initializers, null));
347
- this._resizeObserver = (__runInitializers(this, __displayValue_extraInitializers), new ResizeController(this, {
319
+ /** The value displayed by the component. */
320
+ this._displayValue = (__runInitializers(this, _size_extraInitializers), null);
321
+ this._resizeObserver = new ResizeController(this, {
348
322
  target: null,
349
323
  skipInitial: true,
350
324
  callback: (() => {
@@ -356,7 +330,7 @@ let SbbSelectElement = (() => {
356
330
  }, 10);
357
331
  };
358
332
  })()
359
- }));
333
+ });
360
334
  this._originElement = null;
361
335
  this._escapableOverlayController = new SbbEscapableOverlayController(this);
362
336
  this._activeItemIndex = -1;
@@ -374,7 +348,7 @@ let SbbSelectElement = (() => {
374
348
  };
375
349
  this.addEventListener?.("optionselectionchange", (e) => this._onOptionChanged(e));
376
350
  this.addEventListener?.("optionLabelChanged", (e) => this._onOptionLabelChanged(e));
377
- /** Forces the sbb-select to update his value. */
351
+ /** Forces the sbb-select to update its value. */
378
352
  this.addEventListener?.("ɵoptionvaluechange", () => this._updateValueOptionState());
379
353
  this.addEventListener?.("ɵoptgroupslotchange", () => this._handleSlotchange(), { capture: true });
380
354
  this.addEventListener?.("focusin", (e) => this._onFocusIn(e));
@@ -450,7 +424,7 @@ let SbbSelectElement = (() => {
450
424
  if (!Array.isArray(selected) && target !== selected || Array.isArray(selected) && !selected.includes(target)) return;
451
425
  this._updateDisplayValue();
452
426
  }
453
- _updateDisplayValue() {
427
+ async _updateDisplayValue() {
454
428
  const selected = this._getSelected();
455
429
  if (Array.isArray(selected)) this._displayValue = selected.map((o) => o.textContent?.trim()).join(", ") || null;
456
430
  else if (selected) this._displayValue = selected?.textContent?.trim() || null;
@@ -461,6 +435,9 @@ let SbbSelectElement = (() => {
461
435
  bubbles: true,
462
436
  composed: true
463
437
  }));
438
+ if (this.hydrationRequired) await this.hydrationComplete;
439
+ const displayValueElements = [this._triggerElement?.querySelector?.("span"), this.shadowRoot?.querySelector?.(".sbb-select__trigger")];
440
+ for (const displayValueElement of displayValueElements) if (displayValueElement) displayValueElement.textContent = this._displayValue ?? this.placeholder;
464
441
  }
465
442
  /**
466
443
  * The `value` property should be adapted when the `multiple` property changes:
@@ -832,15 +809,7 @@ let SbbSelectElement = (() => {
832
809
  this.open();
833
810
  }
834
811
  }
835
- _spreadDeferredDisplayValue(placeholder) {
836
- return [this._deferredDisplayValue(placeholder), placeholder];
837
- }
838
- async _deferredDisplayValue(placeholder) {
839
- if (this.hydrationRequired) await this.hydrationComplete;
840
- return this._displayValue ? html`${this._displayValue}` : placeholder;
841
- }
842
812
  render() {
843
- const displayValue = until(...this._spreadDeferredDisplayValue(html`${this.placeholder}`));
844
813
  return html`
845
814
  <!-- This element is visually hidden and will be appended to the light DOM to allow screen
846
815
  readers to work properly -->
@@ -851,11 +820,16 @@ let SbbSelectElement = (() => {
851
820
  @click=${this._toggleOpening}
852
821
  ${ref((ref) => this._triggerElement = ref)}
853
822
  >
854
- ${displayValue}${this.multiple && !this.disabled && !this.readOnly ? html`<p>${i18nMultipleSelectionPossible[this._languageController.current]}</p>` : nothing}
823
+ <span></span>${this.multiple && !this.disabled && !this.readOnly ? html`<p>${i18nMultipleSelectionPossible[this._languageController.current]}</p>` : nothing}
855
824
  </sbb-select-trigger>
856
825
 
857
- <!-- Visually display the value -->
858
- <div class="sbb-select__trigger" aria-hidden="true">${displayValue}</div>
826
+ <!--
827
+ Visually display the value.
828
+ The span is replaced after the first render. It is only here to avoid a Lit warning
829
+ about changing Lit-controlled content, because we update it directly.
830
+ The placeholder must be rendered here so it is transferred from server-side rendering.
831
+ -->
832
+ <div class="sbb-select__trigger" aria-hidden="true"><span>${this.placeholder}</span></div>
859
833
 
860
834
  <div class="sbb-option-panel__overlay-container sbb-popover-reset" popover="manual">
861
835
  <div
package/lean-off-brand-theme.css CHANGED
@@ -1082,8 +1082,19 @@ summary {
1082
1082
  --sbb-alert-icon-size-l: var(--sbb-size-icon-ui-small);
1083
1083
  --sbb-alert-title-margin-block: 0;
1084
1084
  --sbb-alert-font-size: var(--sbb-text-font-size-s);
1085
- --sbb-alert-gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);
1086
- --sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxxs);
1085
+ --sbb-alert-gap-s: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);
1086
+ --sbb-alert-gap-m: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
1087
+ --sbb-alert-gap-l: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
1088
+ --sbb-alert-gap: var(--sbb-alert-gap-s);
1089
+ --sbb-alert-close-icon-margin-s: var(--sbb-spacing-responsive-xxxs);
1090
+ --sbb-alert-close-icon-margin-m: var(--sbb-spacing-responsive-xxs);
1091
+ --sbb-alert-close-icon-margin-l: var(--sbb-spacing-responsive-xxs);
1092
+ --sbb-alert-close-icon-margin: var(--sbb-alert-close-icon-margin-s);
1093
+ --sbb-alert-grid-template-columns: 1fr auto;
1094
+ --sbb-alert-icon-padding-block-s: var(--sbb-spacing-fixed-2x);
1095
+ --sbb-alert-icon-padding-block-m: var(--sbb-spacing-fixed-3x);
1096
+ --sbb-alert-icon-padding-block-l: 0.625rem;
1097
+ --sbb-alert-icon-padding-block: var(--sbb-alert-icon-padding-block-s);
1087
1098
  --sbb-autocomplete-row-padding-inline-end: var(--sbb-spacing-responsive-xxxs);
1088
1099
  --sbb-autocomplete-row-gap: var(--sbb-spacing-fixed-6x);
1089
1100
  --sbb-breadcrumb-color: var(--sbb-color-granite);
@@ -2226,6 +2237,10 @@ summary {
2226
2237
  --sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-small);
2227
2238
  --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-small);
2228
2239
  --sbb-alert-close-button-divider-display: block;
2240
+ --sbb-alert-grid-template-columns: auto 1fr auto;
2241
+ --sbb-alert-icon-padding-block-s: 0;
2242
+ --sbb-alert-icon-padding-block-m: 0;
2243
+ --sbb-alert-icon-padding-block-l: 0;
2229
2244
  --sbb-dialog-padding-inline: var(--sbb-spacing-fixed-8x);
2230
2245
  --sbb-dialog-translate-y: var(--sbb-spacing-fixed-4x);
2231
2246
  --_sbb-dialog-max-height: calc(
package/lean-safety-theme.css CHANGED
@@ -1102,8 +1102,19 @@ summary {
1102
1102
  --sbb-alert-icon-size-l: var(--sbb-size-icon-ui-small);
1103
1103
  --sbb-alert-title-margin-block: 0;
1104
1104
  --sbb-alert-font-size: var(--sbb-text-font-size-s);
1105
- --sbb-alert-gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);
1106
- --sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxxs);
1105
+ --sbb-alert-gap-s: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);
1106
+ --sbb-alert-gap-m: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
1107
+ --sbb-alert-gap-l: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
1108
+ --sbb-alert-gap: var(--sbb-alert-gap-s);
1109
+ --sbb-alert-close-icon-margin-s: var(--sbb-spacing-responsive-xxxs);
1110
+ --sbb-alert-close-icon-margin-m: var(--sbb-spacing-responsive-xxs);
1111
+ --sbb-alert-close-icon-margin-l: var(--sbb-spacing-responsive-xxs);
1112
+ --sbb-alert-close-icon-margin: var(--sbb-alert-close-icon-margin-s);
1113
+ --sbb-alert-grid-template-columns: 1fr auto;
1114
+ --sbb-alert-icon-padding-block-s: var(--sbb-spacing-fixed-2x);
1115
+ --sbb-alert-icon-padding-block-m: var(--sbb-spacing-fixed-3x);
1116
+ --sbb-alert-icon-padding-block-l: 0.625rem;
1117
+ --sbb-alert-icon-padding-block: var(--sbb-alert-icon-padding-block-s);
1107
1118
  --sbb-autocomplete-row-padding-inline-end: var(--sbb-spacing-responsive-xxxs);
1108
1119
  --sbb-autocomplete-row-gap: var(--sbb-spacing-fixed-6x);
1109
1120
  --sbb-breadcrumb-color: var(--sbb-color-granite);
@@ -2246,6 +2257,10 @@ summary {
2246
2257
  --sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-small);
2247
2258
  --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-small);
2248
2259
  --sbb-alert-close-button-divider-display: block;
2260
+ --sbb-alert-grid-template-columns: auto 1fr auto;
2261
+ --sbb-alert-icon-padding-block-s: 0;
2262
+ --sbb-alert-icon-padding-block-m: 0;
2263
+ --sbb-alert-icon-padding-block-l: 0;
2249
2264
  --sbb-dialog-padding-inline: var(--sbb-spacing-fixed-8x);
2250
2265
  --sbb-dialog-translate-y: var(--sbb-spacing-fixed-4x);
2251
2266
  --_sbb-dialog-max-height: calc(
package/lean-theme.css CHANGED
@@ -1102,8 +1102,19 @@ summary {
1102
1102
  --sbb-alert-icon-size-l: var(--sbb-size-icon-ui-small);
1103
1103
  --sbb-alert-title-margin-block: 0;
1104
1104
  --sbb-alert-font-size: var(--sbb-text-font-size-s);
1105
- --sbb-alert-gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);
1106
- --sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxxs);
1105
+ --sbb-alert-gap-s: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);
1106
+ --sbb-alert-gap-m: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
1107
+ --sbb-alert-gap-l: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
1108
+ --sbb-alert-gap: var(--sbb-alert-gap-s);
1109
+ --sbb-alert-close-icon-margin-s: var(--sbb-spacing-responsive-xxxs);
1110
+ --sbb-alert-close-icon-margin-m: var(--sbb-spacing-responsive-xxs);
1111
+ --sbb-alert-close-icon-margin-l: var(--sbb-spacing-responsive-xxs);
1112
+ --sbb-alert-close-icon-margin: var(--sbb-alert-close-icon-margin-s);
1113
+ --sbb-alert-grid-template-columns: 1fr auto;
1114
+ --sbb-alert-icon-padding-block-s: var(--sbb-spacing-fixed-2x);
1115
+ --sbb-alert-icon-padding-block-m: var(--sbb-spacing-fixed-3x);
1116
+ --sbb-alert-icon-padding-block-l: 0.625rem;
1117
+ --sbb-alert-icon-padding-block: var(--sbb-alert-icon-padding-block-s);
1107
1118
  --sbb-autocomplete-row-padding-inline-end: var(--sbb-spacing-responsive-xxxs);
1108
1119
  --sbb-autocomplete-row-gap: var(--sbb-spacing-fixed-6x);
1109
1120
  --sbb-breadcrumb-color: var(--sbb-color-granite);
@@ -2246,6 +2257,10 @@ summary {
2246
2257
  --sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-small);
2247
2258
  --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-small);
2248
2259
  --sbb-alert-close-button-divider-display: block;
2260
+ --sbb-alert-grid-template-columns: auto 1fr auto;
2261
+ --sbb-alert-icon-padding-block-s: 0;
2262
+ --sbb-alert-icon-padding-block-m: 0;
2263
+ --sbb-alert-icon-padding-block-l: 0;
2249
2264
  --sbb-dialog-padding-inline: var(--sbb-spacing-fixed-8x);
2250
2265
  --sbb-dialog-translate-y: var(--sbb-spacing-fixed-4x);
2251
2266
  --_sbb-dialog-max-height: calc(
package/off-brand-theme.css CHANGED
@@ -1082,8 +1082,19 @@ summary {
1082
1082
  --sbb-alert-icon-size-l: var(--sbb-size-icon-ui-small);
1083
1083
  --sbb-alert-title-margin-block: 0;
1084
1084
  --sbb-alert-font-size: var(--sbb-text-font-size-s);
1085
- --sbb-alert-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
1086
- --sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxs);
1085
+ --sbb-alert-gap-s: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);
1086
+ --sbb-alert-gap-m: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
1087
+ --sbb-alert-gap-l: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
1088
+ --sbb-alert-gap: var(--sbb-alert-gap-m);
1089
+ --sbb-alert-close-icon-margin-s: var(--sbb-spacing-responsive-xxxs);
1090
+ --sbb-alert-close-icon-margin-m: var(--sbb-spacing-responsive-xxs);
1091
+ --sbb-alert-close-icon-margin-l: var(--sbb-spacing-responsive-xxs);
1092
+ --sbb-alert-close-icon-margin: var(--sbb-alert-close-icon-margin-m);
1093
+ --sbb-alert-grid-template-columns: 1fr auto;
1094
+ --sbb-alert-icon-padding-block-s: var(--sbb-spacing-fixed-2x);
1095
+ --sbb-alert-icon-padding-block-m: var(--sbb-spacing-fixed-3x);
1096
+ --sbb-alert-icon-padding-block-l: 0.625rem;
1097
+ --sbb-alert-icon-padding-block: var(--sbb-alert-icon-padding-block-m);
1087
1098
  --sbb-autocomplete-row-padding-inline-end: var(--sbb-spacing-responsive-xxxs);
1088
1099
  --sbb-autocomplete-row-gap: var(--sbb-spacing-fixed-6x);
1089
1100
  --sbb-breadcrumb-color: var(--sbb-color-granite);
@@ -2226,6 +2237,10 @@ summary {
2226
2237
  --sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-small);
2227
2238
  --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-small);
2228
2239
  --sbb-alert-close-button-divider-display: block;
2240
+ --sbb-alert-grid-template-columns: auto 1fr auto;
2241
+ --sbb-alert-icon-padding-block-s: 0;
2242
+ --sbb-alert-icon-padding-block-m: 0;
2243
+ --sbb-alert-icon-padding-block-l: 0;
2229
2244
  --sbb-dialog-padding-inline: var(--sbb-spacing-fixed-8x);
2230
2245
  --sbb-dialog-translate-y: var(--sbb-spacing-fixed-4x);
2231
2246
  --_sbb-dialog-max-height: calc(
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@sbb-esta/lyne-elements-dev",
3
- "version": "5.13.0-dev.1793605208",
3
+ "version": "5.13.0-dev.1793626084",
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/f41051760a0885369cde0367effd04a7d410583b"
9
+ "https://github.com/sbb-design-systems/lyne-components/commit/b48040bb5308b445c67e9227023db8f28ffc1b9d"
10
10
  ],
11
11
  "type": "module",
12
12
  "exports": {
package/safety-theme.css CHANGED
@@ -1102,8 +1102,19 @@ summary {
1102
1102
  --sbb-alert-icon-size-l: var(--sbb-size-icon-ui-small);
1103
1103
  --sbb-alert-title-margin-block: 0;
1104
1104
  --sbb-alert-font-size: var(--sbb-text-font-size-s);
1105
- --sbb-alert-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
1106
- --sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxs);
1105
+ --sbb-alert-gap-s: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);
1106
+ --sbb-alert-gap-m: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
1107
+ --sbb-alert-gap-l: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
1108
+ --sbb-alert-gap: var(--sbb-alert-gap-m);
1109
+ --sbb-alert-close-icon-margin-s: var(--sbb-spacing-responsive-xxxs);
1110
+ --sbb-alert-close-icon-margin-m: var(--sbb-spacing-responsive-xxs);
1111
+ --sbb-alert-close-icon-margin-l: var(--sbb-spacing-responsive-xxs);
1112
+ --sbb-alert-close-icon-margin: var(--sbb-alert-close-icon-margin-m);
1113
+ --sbb-alert-grid-template-columns: 1fr auto;
1114
+ --sbb-alert-icon-padding-block-s: var(--sbb-spacing-fixed-2x);
1115
+ --sbb-alert-icon-padding-block-m: var(--sbb-spacing-fixed-3x);
1116
+ --sbb-alert-icon-padding-block-l: 0.625rem;
1117
+ --sbb-alert-icon-padding-block: var(--sbb-alert-icon-padding-block-m);
1107
1118
  --sbb-autocomplete-row-padding-inline-end: var(--sbb-spacing-responsive-xxxs);
1108
1119
  --sbb-autocomplete-row-gap: var(--sbb-spacing-fixed-6x);
1109
1120
  --sbb-breadcrumb-color: var(--sbb-color-granite);
@@ -2246,6 +2257,10 @@ summary {
2246
2257
  --sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-small);
2247
2258
  --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-small);
2248
2259
  --sbb-alert-close-button-divider-display: block;
2260
+ --sbb-alert-grid-template-columns: auto 1fr auto;
2261
+ --sbb-alert-icon-padding-block-s: 0;
2262
+ --sbb-alert-icon-padding-block-m: 0;
2263
+ --sbb-alert-icon-padding-block-l: 0;
2249
2264
  --sbb-dialog-padding-inline: var(--sbb-spacing-fixed-8x);
2250
2265
  --sbb-dialog-translate-y: var(--sbb-spacing-fixed-4x);
2251
2266
  --_sbb-dialog-max-height: calc(
package/select.pure.js CHANGED
@@ -1,6 +1,6 @@
1
- import{__esDecorate as e,__runInitializers as t}from"tslib";import{ResizeController as n}from"@lit-labs/observers/resize-controller.js";import{html as r,isServer as i,nothing as a,unsafeCSS as o}from"lit";import{property as s,state as c}from"lit/decorators.js";import{ref as l}from"lit/directives/ref.js";import{until as u}from"lit/directives/until.js";import{SbbDisabledMixin as ee,SbbElement as d,SbbEscapableOverlayController as f,SbbFormAssociatedMixin as p,SbbLanguageController as m,SbbNegativeMixin as h,SbbOpenCloseBaseElement as te,SbbPropertyWatcherController as g,SbbReadonlyMixin as _,SbbRequiredMixin as v,SbbUpdateSchedulerMixin as y,forceType as b,getNextElementIndex as x,getOverride as S,handleDistinctChange as C,i18nMultipleSelectionPossible as w,i18nSelectionRequired as T,isEventOnElement as E,isNextjs as D,isZeroAnimationDuration as O,popoverResetStyles as k,scrollbarStyles as A,setOrRemoveAttribute as j,setOverlayPosition as ne}from"./core.js";import{optionPanelStyles as re}from"./option.pure.js";var M=`:host{display:block;width:100%!important;height:var(--sbb-size-element-xs)!important}:host(:is(:state(in-form-field),[state--in-form-field])){top:0}
2
- `,N=class extends d{static{this.elementName=`sbb-select-trigger`}static{this.role=`combobox`}static{this.styles=[o(M)]}set select(e){if(e===this._select||(this._selectPropertyWatcher&&this.removeController(this._selectPropertyWatcher),this.internals.ariaControlsElements=null,this._select=e,!this._select))return;this._selectPropertyWatcher=new g(this,()=>this._select,{required:e=>this.internals.ariaRequired=e.required?`${e.required}`:null});let t=this._select.shadowRoot.querySelector(`.sbb-option-panel__overlay`);this.internals.ariaControlsElements=[t]}get select(){return this._select}constructor(){super(),this._select=null,this._selectPropertyWatcher=null,this.internals.ariaExpanded=`false`}connectedCallback(){super.connectedCallback(),this.toggleState(`in-form-field`,!!this.closest(`sbb-form-field`))}render(){return r`<slot></slot>`}},P=`:host{--sbb-select-placeholder-fallback-color:light-dark(var(--sbb-color-metal),var(--sbb-color-smoke));--sbb-options-panel-internal-z-index:var(--sbb-select-z-index,var(--sbb-overlay-default-z-index));display:block}:host([negative]){--sbb-select-placeholder-fallback-color:var(--sbb-color-5)}.sbb-select__trigger{white-space:nowrap;text-overflow:ellipsis;cursor:var(--sbb-cursor-default);height:calc(1em * var(--sbb-typo-line-height-text));overflow:hidden}:host(:not(:is(:state(has-display-value),[state--has-display-value]))) .sbb-select__trigger{color:var(--sbb-select-placeholder-color,var(--sbb-select-placeholder-fallback-color));-webkit-text-fill-color:var(--sbb-select-placeholder-color,var(--sbb-select-placeholder-fallback-color))}
3
- `;let F=(()=>{let d=y(ee(h(v(_(p(te)))))),M=[],F,I=[],L=[],R,z=[],B=[],V,H=[],U=[],W,G=[],K=[],q,J,Y=[],X=[],Z,Q=[],$=[];return class extends d{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(d[Symbol.metadata]??null):void 0;F=[b(),s()],R=[b(),C((e,t)=>e._onMultipleChanged(t)),s({reflect:!0,type:Boolean})],V=[s({attribute:!1})],W=[b(),C((e,t)=>e._closeOnDisabledReadonlyChanged(t)),s({reflect:!0,type:Boolean}),S((e,t)=>t||e.isDisabledExternally())],q=[s()],J=[s({reflect:!0})],Z=[c()],e(this,null,F,{kind:`accessor`,name:`placeholder`,static:!1,private:!1,access:{has:e=>`placeholder`in e,get:e=>e.placeholder,set:(e,t)=>{e.placeholder=t}},metadata:t},I,L),e(this,null,R,{kind:`accessor`,name:`multiple`,static:!1,private:!1,access:{has:e=>`multiple`in e,get:e=>e.multiple,set:(e,t)=>{e.multiple=t}},metadata:t},z,B),e(this,null,V,{kind:`accessor`,name:`compareWith`,static:!1,private:!1,access:{has:e=>`compareWith`in e,get:e=>e.compareWith,set:(e,t)=>{e.compareWith=t}},metadata:t},H,U),e(this,null,W,{kind:`accessor`,name:`disabled`,static:!1,private:!1,access:{has:e=>`disabled`in e,get:e=>e.disabled,set:(e,t)=>{e.disabled=t}},metadata:t},G,K),e(this,null,q,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,M),e(this,null,J,{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},Y,X),e(this,null,Z,{kind:`accessor`,name:`_displayValue`,static:!1,private:!1,access:{has:e=>`_displayValue`in e,get:e=>e._displayValue,set:(e,t)=>{e._displayValue=t}},metadata:t},Q,$),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-select`}static{this.styles=[k,A,re,o(P)]}static{this.elementDependencies=[N]}static{this.events={change:`change`,input:`input`,displayvaluechange:`displayvaluechange`,beforeopen:`beforeopen`,open:`open`,beforeclose:`beforeclose`,close:`close`}}static get observedAttributes(){return super.observedAttributes.concat(`aria-label`,`aria-labelledby`,`aria-describedby`)}#e;get placeholder(){return this.#e}set placeholder(e){this.#e=e}#t;get multiple(){return this.#t}set multiple(e){this.#t=e}#n;get compareWith(){return this.#n}set compareWith(e){this.#n=e}#r;get disabled(){return this.#r}set disabled(e){this.#r=e}set value(e){this._value=e,this._isValueManuallyAssigned=!0,this._updateOptionsFromValue()}get value(){return this._value}#i;get size(){return this.#i}set size(e){this.#i=e}get type(){return this.multiple?`select-multiple`:`select-one`}#a;get _displayValue(){return this.#a}set _displayValue(e){this.#a=e}get inputElement(){return this._triggerElement??null}get options(){let e=[];return this.querySelectorAll?.(`sbb-option`).forEach(t=>{customElements.upgrade(t),e.push(t)}),e}constructor(){super(),this.#e=(t(this,M),t(this,I,``)),this.#t=(t(this,L),t(this,z,!1)),this.#n=(t(this,B),t(this,H,(e,t)=>e===t)),this.#r=(t(this,U),t(this,G,!1)),this._value=(t(this,K),null),this.#i=t(this,Y,null),this.#a=(t(this,X),t(this,Q,null)),this._resizeObserver=(t(this,$),new n(this,{target:null,skipInitial:!0,callback:(()=>{let e;return()=>{clearTimeout(e),e=setTimeout(()=>{this.state!==`closed`&&this._setOverlayPosition()},10)}})()})),this._originElement=null,this._escapableOverlayController=new f(this),this._activeItemIndex=-1,this._searchString=``,this._didLoad=!1,this._isPointerDownEventOnMenu=!1,this._languageController=new m(this),this._isValueManuallyAssigned=!1,this._restoreFocusOnClose=!1,this._pointerDownListener=e=>{this._isPointerDownEventOnMenu=E(this._overlay,e)},this._closeOnBackdropClick=e=>{this._isPointerDownEventOnMenu||E(this._overlay,e)||E(this._originElement,e)||this.close()},this.addEventListener?.(`optionselectionchange`,e=>this._onOptionChanged(e)),this.addEventListener?.(`optionLabelChanged`,e=>this._onOptionLabelChanged(e)),this.addEventListener?.(`ɵoptionvaluechange`,()=>this._updateValueOptionState()),this.addEventListener?.(`ɵoptgroupslotchange`,()=>this._handleSlotchange(),{capture:!0}),this.addEventListener?.(`focusin`,e=>this._onFocusIn(e)),this.addEventListener?.(`click`,e=>{let t=e.target;t.localName===`sbb-option`?!this.multiple&&!t.disabled&&this._close(!0):this._toggleOpening()}),this.addController(new g(this,()=>this.closest(`sbb-form-field`),{negative:e=>{this.negative=e.negative,this._syncNegative()}})),this.addEventListener(`keydown`,e=>this._onKeyDown(e))}attributeChangedCallback(e,t,n){e===`aria-label`||e===`aria-labelledby`||e===`aria-describedby`?this._syncAriaLabels():super.attributeChangedCallback(e,t,n)}_syncAriaLabels(){this._triggerElement&&!i&&(j(this._triggerElement,`aria-labelledby`,this.getAttribute(`aria-labelledby`)),j(this._triggerElement,`aria-label`,this.getAttribute(`aria-label`)),j(this._triggerElement,`aria-describedby`,this.getAttribute(`aria-describedby`)),!this.getAttribute(`aria-label`)&&!this.getAttribute(`aria-labelledby`)&&this.internals.labels.length&&this._triggerElement?.setAttribute(`aria-label`,Array.from(this.internals.labels,e=>e.textContent).join(`, `)))}open(){this.state!==`opening`&&this.state!==`opened`&&this._overlay&&this.options.length!==0&&!this.disabled&&!this.formDisabled&&this.dispatchBeforeOpenEvent()&&(this.shadowRoot?.querySelector(`[popover]`)?.showPopover?.(),this.state=`opening`,this._triggerElement&&(this._triggerElement.internals.ariaExpanded=`true`),this.internals.states.add(`expanded`),this._setOverlayPosition(),this._escapableOverlayController.connect(),this._attachOpenPanelEvents(),this._isZeroAnimationDuration()&&this._handleOpening())}close(){this._close()}_close(e=!1){this.state!==`closing`&&this.state!==`closed`&&this.dispatchBeforeCloseEvent()&&(this._restoreFocusOnClose=e,this.state=`closing`,this.internals.states.delete(`expanded`),this._openPanelEventsController?.abort(),this._originElement&&this._resizeObserver.unobserve(this._originElement),this._isZeroAnimationDuration()&&this._handleClosing())}_isZeroAnimationDuration(){return O(this,`--sbb-options-panel-animation-duration`)}getDisplayValue(){return this._displayValue??``}_onOptionChanged(e){let t=e.target;t.selected?this._onOptionSelected(t):this._onOptionDeselected(t)}_onOptionLabelChanged(e){let t=e.target,n=this._getSelected();!Array.isArray(n)&&t!==n||Array.isArray(n)&&!n.includes(t)||this._updateDisplayValue()}_updateDisplayValue(){let e=this._getSelected();this._displayValue=Array.isArray(e)?e.map(e=>e.textContent?.trim()).join(`, `)||null:e&&e?.textContent?.trim()||null,this.toggleState(`has-display-value`,!!this._displayValue),this.dispatchEvent(new Event(`displayvaluechange`,{bubbles:!0,composed:!0}))}_onMultipleChanged(e){e?this._value=this._isValueManuallyAssigned||this.value!=null?[this.value]:[]:Array.isArray(this.value)&&(this._value=this.value.length?this.value[0]:null),this._updateDisplayValue()}_closeOnDisabledReadonlyChanged(e){(this.state===`opening`||this.state===`opened`)&&e&&this.close()}firstUpdated(e){super.firstUpdated(e),this._updateValueOptionState(),this._triggerElement&&(this._syncAriaLabels(),this._triggerElement.select=this),D()||(this.startUpdate(),this._setupSelect())}focus(){this._triggerElement?.focus()}blur(){this._triggerElement?.blur()}removeAttribute(e){D()&&e===`defer-hydration`&&!this._didLoad&&this.updateComplete.then(()=>this._setupSelect()),super.removeAttribute(e)}connectedCallback(){super.connectedCallback(),this._syncNegative(),this._syncAriaLabels(),this._didLoad&&(this._setupOrigin(),this._setupTrigger())}requestUpdate(e,t,n){super.requestUpdate(e,t,n),!e&&this.hasUpdated&&setTimeout(()=>this._syncAriaLabels())}willUpdate(e){super.willUpdate(e),e.has(`negative`)&&this._syncNegative(),e.has(`readOnly`)&&this._closeOnDisabledReadonlyChanged(this.readOnly)}disconnectedCallback(){this._triggerElement&&this.prepend(this._triggerElement),super.disconnectedCallback(),this._openPanelEventsController?.abort()}formResetCallback(){this.value=this.hasAttribute(`value`)?this.getAttribute(`value`):null}formStateRestoreCallback(e,t){try{let{value:t,manuallyAssigned:n}=JSON.parse(e);this._isValueManuallyAssigned=n,this._value=t,this._updateOptionsFromValue()}catch{console.warn(`Failed to restore sbb-select with state ${e}`)}}formState(){return JSON.stringify({value:this.value,manuallyAssigned:this._isValueManuallyAssigned})}_syncNegative(){this.querySelectorAll?.(`sbb-divider, sbb-option-hint`).forEach(e=>e.negative=this.negative)}shouldValidate(e){return super.shouldValidate(e)||e===`value`||e===`required`}validate(){super.validate();let e=Array.isArray(this.value)?this.value:this.value===null?[]:[this.value];this.required&&(this.options.every(t=>e.every(e=>!this.compareWith(e,t.value)))||!this._isValueManuallyAssigned&&this.value==null)?this.setValidityFlag(`valueMissing`,T[this._languageController.current]):this.removeValidityFlag(`valueMissing`)}_setupSelect(){this._setupOrigin(),this._setupTrigger(),this._didLoad=!0,this.completeUpdate()}_setupOrigin(){let e=this.closest?.(`sbb-form-field`);this._originElement&&this._resizeObserver.unobserve(this._originElement),this._originElement=e?.shadowRoot?.querySelector?.(`#overlay-anchor`)??this.parentElement,this._originElement&&(this.toggleState(`option-panel-origin-borderless`,e?.hasAttribute?.(`borderless`)),this.isOpen&&this._resizeObserver.observe(this._originElement))}_setupTrigger(){this.parentElement&&this._triggerElement&&this.parentElement.insertBefore?.(this._triggerElement,this)}_setOverlayPosition(){this._originElement&&this._overlay&&ne(this._overlay,this._originElement,this._overlay,this.shadowRoot.querySelector(`.sbb-option-panel__overlay-container`),this)}_onAnimationEnd(e){e.animationName===`open`&&this.state===`opening`?this._handleOpening():e.animationName===`close`&&this.state===`closing`&&this._handleClosing()}_handleOpening(){this.state=`opened`,this._originElement&&this._resizeObserver.observe(this._originElement),this.dispatchOpenEvent()}_handleClosing(){let e=this._restoreFocusOnClose||this._isFocusWithin();this._restoreFocusOnClose=!1,this.state=`closed`,this.shadowRoot?.querySelector(`[popover]`)?.hidePopover?.(),this._triggerElement&&(this._triggerElement.internals.ariaExpanded=`false`),this._resetActiveElement(),e&&this.focus(),this._overlay&&(this._overlay.scrollTop=0),this._escapableOverlayController.disconnect(),this.dispatchCloseEvent()}_isFocusWithin(){let e=this.getRootNode().activeElement;return!!e&&(e===this._triggerElement||this.contains(e))}_onOptionSelected(e){this.multiple?this.value?Array.isArray(this.value)&&!this.value.some(t=>this.compareWith(t,e.value))&&(this._value=[...this.value,e.value]):this._value=[e.value]:this._value=e.value,this._updateOptionsFromValue(),this._dispatchInputEvents()}_onOptionDeselected(e){this.multiple&&Array.isArray(this.value)&&(this._value=this.value.filter(t=>!this.compareWith(t,e.value)),this._updateOptionsFromValue(),this._dispatchInputEvents())}_dispatchInputEvents(){this.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}_attachOpenPanelEvents(){this._openPanelEventsController=new AbortController,document.addEventListener(`scroll`,()=>this._setOverlayPosition(),{passive:!0,signal:this._openPanelEventsController.signal,capture:!0}),window.addEventListener(`resize`,()=>this._setOverlayPosition(),{passive:!0,signal:this._openPanelEventsController.signal}),window.addEventListener(`pointerdown`,e=>this._pointerDownListener(e),{signal:this._openPanelEventsController.signal}),window.addEventListener(`pointerup`,e=>this._closeOnBackdropClick(e),{signal:this._openPanelEventsController.signal})}_onKeyDown(e){this.readOnly||(this.state===`opening`||this.state===`opened`?this._openedPanelKeyboardInteraction(e):(this.state===`closed`||this.state===`closing`)&&this._closedPanelKeyboardInteraction(e))}_closedPanelKeyboardInteraction(e){if(this._checkForLetterSelection(e))return this._setNextActiveOptionByText(e);switch(e.key){case`Enter`:case` `:case`ArrowDown`:case`ArrowUp`:e.preventDefault(),this.open()}}_openedPanelKeyboardInteraction(e){if(!this.readOnly){if(this._checkForLetterSelection(e))return this._setNextActiveOptionByText(e);switch(e.key){case`Tab`:this.close();break;case`Enter`:case` `:e.preventDefault(),this._selectByKeyboard();break;case`ArrowDown`:case`ArrowUp`:e.preventDefault(),this._setNextActiveOption(e);break;case`Home`:case`PageUp`:e.preventDefault(),this._setNextActiveOption(e,0);break;case`End`:case`PageDown`:e.preventDefault(),this._setNextActiveOption(e,this.options.length-1)}}}_checkForLetterSelection(e){return e.key===`Backspace`||e.key===`Clear`||e.key.length===1&&e.key!==` `&&!e.altKey&&!e.ctrlKey&&!e.metaKey}_setNextActiveOptionByText(e){typeof this._searchTimeout==typeof setTimeout&&clearTimeout(this._searchTimeout),this._searchTimeout=setTimeout(()=>this._searchString=``,1e3),this._searchString+=e.key;let t=this._activeItemIndex+1,n=this.options,r=[...n.slice(t),...n.slice(0,t)],i=r.find(e=>e.textContent?.toLowerCase().indexOf(this._searchString.toLowerCase())===0);if(i)this._setNextActiveOption(e,n.indexOf(i));else if(this._searchString.length>1&&RegExp(`^${this._searchString.charAt(0)}*$`).test(this._searchString)){let t=r.find(e=>e.textContent?.toLowerCase().indexOf(this._searchString[0].toLowerCase())===0);t&&this._setNextActiveOption(e,n.indexOf(t))}else clearTimeout(this._searchTimeout),this._searchString=``}_selectByKeyboard(){let e=this.options[this._activeItemIndex];e&&!e.disabled&&(this.multiple?e.selectViaUserInteraction(!e.selected):(e.selected||e.selectViaUserInteraction(!0),this.close()))}_setNextActiveOption(e,t){let n=this.options,r=t??x(e,this._activeItemIndex,n.length),i=n[this._activeItemIndex],a=n[r];this._activeItemIndex=r,this._setActiveElement(a,i),a.disabled||(this.multiple?e.shiftKey&&a.selectViaUserInteraction(!a.selected):a.selectViaUserInteraction(!0))}_setActiveElement(e,t=null){e.focus({preventScroll:!0}),e.scrollIntoView({block:`nearest`}),e.setActive(!0),t&&t!==e&&t.setActive(!1)}_onFocusIn(e){let t=e.target;if(t?.localName!==`sbb-option`)return;let n=this.options,r=t,i=n.indexOf(r);i!==-1&&(this._activeItemIndex=i,n.forEach(e=>e.setActive(!1)))}_resetActiveElement(){let e=this.options[this._activeItemIndex];e&&e.setActive(!1),this._activeItemIndex=-1}_updateOptionsFromValue(){let e=Array.isArray(this.value)?this.value:[this.value],t=[];for(let n of this.options)n.selected=e.some(e=>this.compareWith(e,n.value)),n.selected&&t.push(n);if(this._updateDisplayValue(),!Array.isArray(this.value)){let e=this.value;this._activeItemIndex=this.options.findIndex(t=>this.compareWith(t.value,e))}}_updateValueFromOptions(){let e=this._getSelected();if(Array.isArray(e)){if(e&&e.length>0){let t=[];for(let n of e)t.push(n.value);this._value=t}}else e&&(this._activeItemIndex=this.options.findIndex(t=>t===e),this._value=e.value);this._updateDisplayValue()}_handleSlotchange(){this.options.forEach(e=>e.tabIndex=-1),this._updateValueOptionState()}_updateValueOptionState(){this._isValueManuallyAssigned?this._updateOptionsFromValue():this._updateValueFromOptions()}_getSelected(){return this.multiple?this.options.filter(e=>e.selected):this.options.find(e=>e.selected)??null}_toggleOpening(){if(!(this.disabled||this.formDisabled||this.readOnly))switch(this.state){case`opening`:case`opened`:this.close();break;case`closing`:case`closed`:this.focus(),this.open()}}_spreadDeferredDisplayValue(e){return[this._deferredDisplayValue(e),e]}async _deferredDisplayValue(e){return this.hydrationRequired&&await this.hydrationComplete,this._displayValue?r`${this._displayValue}`:e}render(){let e=u(...this._spreadDeferredDisplayValue(r`${this.placeholder}`));return r`
1
+ import{__esDecorate as e,__runInitializers as t}from"tslib";import{ResizeController as n}from"@lit-labs/observers/resize-controller.js";import{html as r,isServer as i,nothing as a,unsafeCSS as o}from"lit";import{property as s}from"lit/decorators.js";import{ref as c}from"lit/directives/ref.js";import{SbbDisabledMixin as l,SbbElement as u,SbbEscapableOverlayController as d,SbbFormAssociatedMixin as f,SbbLanguageController as p,SbbNegativeMixin as m,SbbOpenCloseBaseElement as h,SbbPropertyWatcherController as g,SbbReadonlyMixin as _,SbbRequiredMixin as v,SbbUpdateSchedulerMixin as y,forceType as b,getNextElementIndex as x,getOverride as S,handleDistinctChange as C,i18nMultipleSelectionPossible as w,i18nSelectionRequired as T,isEventOnElement as E,isNextjs as D,isZeroAnimationDuration as O,popoverResetStyles as k,scrollbarStyles as A,setOrRemoveAttribute as j,setOverlayPosition as M}from"./core.js";import{optionPanelStyles as N}from"./option.pure.js";var P=`:host{display:block;width:100%!important;height:var(--sbb-size-element-xs)!important}:host(:is(:state(in-form-field),[state--in-form-field])){top:0}
2
+ `,F=class extends u{static{this.elementName=`sbb-select-trigger`}static{this.role=`combobox`}static{this.styles=[o(P)]}set select(e){if(e===this._select||(this._selectPropertyWatcher&&this.removeController(this._selectPropertyWatcher),this.internals.ariaControlsElements=null,this._select=e,!this._select))return;this._selectPropertyWatcher=new g(this,()=>this._select,{required:e=>this.internals.ariaRequired=e.required?`${e.required}`:null});let t=this._select.shadowRoot.querySelector(`.sbb-option-panel__overlay`);this.internals.ariaControlsElements=[t]}get select(){return this._select}constructor(){super(),this._select=null,this._selectPropertyWatcher=null,this.internals.ariaExpanded=`false`}connectedCallback(){super.connectedCallback(),this.toggleState(`in-form-field`,!!this.closest(`sbb-form-field`))}render(){return r`<slot></slot>`}},I=`:host{--sbb-select-placeholder-fallback-color:light-dark(var(--sbb-color-metal),var(--sbb-color-smoke));--sbb-options-panel-internal-z-index:var(--sbb-select-z-index,var(--sbb-overlay-default-z-index));display:block}:host([negative]){--sbb-select-placeholder-fallback-color:var(--sbb-color-5)}.sbb-select__trigger{white-space:nowrap;text-overflow:ellipsis;cursor:var(--sbb-cursor-default);height:calc(1em * var(--sbb-typo-line-height-text));overflow:hidden}:host(:not(:is(:state(has-display-value),[state--has-display-value]))) .sbb-select__trigger{color:var(--sbb-select-placeholder-color,var(--sbb-select-placeholder-fallback-color));-webkit-text-fill-color:var(--sbb-select-placeholder-color,var(--sbb-select-placeholder-fallback-color))}
3
+ `;let L=(()=>{let u=y(l(m(v(_(f(h)))))),P=[],L,R=[],z=[],B,V=[],H=[],U,W=[],G=[],K,q=[],J=[],Y,X,Z=[],Q=[];return class extends u{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(u[Symbol.metadata]??null):void 0;L=[b(),s()],B=[b(),C((e,t)=>e._onMultipleChanged(t)),s({reflect:!0,type:Boolean})],U=[s({attribute:!1})],K=[b(),C((e,t)=>e._closeOnDisabledReadonlyChanged(t)),s({reflect:!0,type:Boolean}),S((e,t)=>t||e.isDisabledExternally())],Y=[s()],X=[s({reflect:!0})],e(this,null,L,{kind:`accessor`,name:`placeholder`,static:!1,private:!1,access:{has:e=>`placeholder`in e,get:e=>e.placeholder,set:(e,t)=>{e.placeholder=t}},metadata:t},R,z),e(this,null,B,{kind:`accessor`,name:`multiple`,static:!1,private:!1,access:{has:e=>`multiple`in e,get:e=>e.multiple,set:(e,t)=>{e.multiple=t}},metadata:t},V,H),e(this,null,U,{kind:`accessor`,name:`compareWith`,static:!1,private:!1,access:{has:e=>`compareWith`in e,get:e=>e.compareWith,set:(e,t)=>{e.compareWith=t}},metadata:t},W,G),e(this,null,K,{kind:`accessor`,name:`disabled`,static:!1,private:!1,access:{has:e=>`disabled`in e,get:e=>e.disabled,set:(e,t)=>{e.disabled=t}},metadata:t},q,J),e(this,null,Y,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,P),e(this,null,X,{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},Z,Q),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-select`}static{this.styles=[k,A,N,o(I)]}static{this.elementDependencies=[F]}static{this.events={change:`change`,input:`input`,displayvaluechange:`displayvaluechange`,beforeopen:`beforeopen`,open:`open`,beforeclose:`beforeclose`,close:`close`}}static get observedAttributes(){return super.observedAttributes.concat(`aria-label`,`aria-labelledby`,`aria-describedby`)}#e;get placeholder(){return this.#e}set placeholder(e){this.#e=e}#t;get multiple(){return this.#t}set multiple(e){this.#t=e}#n;get compareWith(){return this.#n}set compareWith(e){this.#n=e}#r;get disabled(){return this.#r}set disabled(e){this.#r=e}set value(e){this._value=e,this._isValueManuallyAssigned=!0,this._updateOptionsFromValue()}get value(){return this._value}#i;get size(){return this.#i}set size(e){this.#i=e}get type(){return this.multiple?`select-multiple`:`select-one`}get inputElement(){return this._triggerElement??null}get options(){let e=[];return this.querySelectorAll?.(`sbb-option`).forEach(t=>{customElements.upgrade(t),e.push(t)}),e}constructor(){super(),this.#e=(t(this,P),t(this,R,``)),this.#t=(t(this,z),t(this,V,!1)),this.#n=(t(this,H),t(this,W,(e,t)=>e===t)),this.#r=(t(this,G),t(this,q,!1)),this._value=(t(this,J),null),this.#i=t(this,Z,null),this._displayValue=(t(this,Q),null),this._resizeObserver=new n(this,{target:null,skipInitial:!0,callback:(()=>{let e;return()=>{clearTimeout(e),e=setTimeout(()=>{this.state!==`closed`&&this._setOverlayPosition()},10)}})()}),this._originElement=null,this._escapableOverlayController=new d(this),this._activeItemIndex=-1,this._searchString=``,this._didLoad=!1,this._isPointerDownEventOnMenu=!1,this._languageController=new p(this),this._isValueManuallyAssigned=!1,this._restoreFocusOnClose=!1,this._pointerDownListener=e=>{this._isPointerDownEventOnMenu=E(this._overlay,e)},this._closeOnBackdropClick=e=>{this._isPointerDownEventOnMenu||E(this._overlay,e)||E(this._originElement,e)||this.close()},this.addEventListener?.(`optionselectionchange`,e=>this._onOptionChanged(e)),this.addEventListener?.(`optionLabelChanged`,e=>this._onOptionLabelChanged(e)),this.addEventListener?.(`ɵoptionvaluechange`,()=>this._updateValueOptionState()),this.addEventListener?.(`ɵoptgroupslotchange`,()=>this._handleSlotchange(),{capture:!0}),this.addEventListener?.(`focusin`,e=>this._onFocusIn(e)),this.addEventListener?.(`click`,e=>{let t=e.target;t.localName===`sbb-option`?!this.multiple&&!t.disabled&&this._close(!0):this._toggleOpening()}),this.addController(new g(this,()=>this.closest(`sbb-form-field`),{negative:e=>{this.negative=e.negative,this._syncNegative()}})),this.addEventListener(`keydown`,e=>this._onKeyDown(e))}attributeChangedCallback(e,t,n){e===`aria-label`||e===`aria-labelledby`||e===`aria-describedby`?this._syncAriaLabels():super.attributeChangedCallback(e,t,n)}_syncAriaLabels(){this._triggerElement&&!i&&(j(this._triggerElement,`aria-labelledby`,this.getAttribute(`aria-labelledby`)),j(this._triggerElement,`aria-label`,this.getAttribute(`aria-label`)),j(this._triggerElement,`aria-describedby`,this.getAttribute(`aria-describedby`)),!this.getAttribute(`aria-label`)&&!this.getAttribute(`aria-labelledby`)&&this.internals.labels.length&&this._triggerElement?.setAttribute(`aria-label`,Array.from(this.internals.labels,e=>e.textContent).join(`, `)))}open(){this.state!==`opening`&&this.state!==`opened`&&this._overlay&&this.options.length!==0&&!this.disabled&&!this.formDisabled&&this.dispatchBeforeOpenEvent()&&(this.shadowRoot?.querySelector(`[popover]`)?.showPopover?.(),this.state=`opening`,this._triggerElement&&(this._triggerElement.internals.ariaExpanded=`true`),this.internals.states.add(`expanded`),this._setOverlayPosition(),this._escapableOverlayController.connect(),this._attachOpenPanelEvents(),this._isZeroAnimationDuration()&&this._handleOpening())}close(){this._close()}_close(e=!1){this.state!==`closing`&&this.state!==`closed`&&this.dispatchBeforeCloseEvent()&&(this._restoreFocusOnClose=e,this.state=`closing`,this.internals.states.delete(`expanded`),this._openPanelEventsController?.abort(),this._originElement&&this._resizeObserver.unobserve(this._originElement),this._isZeroAnimationDuration()&&this._handleClosing())}_isZeroAnimationDuration(){return O(this,`--sbb-options-panel-animation-duration`)}getDisplayValue(){return this._displayValue??``}_onOptionChanged(e){let t=e.target;t.selected?this._onOptionSelected(t):this._onOptionDeselected(t)}_onOptionLabelChanged(e){let t=e.target,n=this._getSelected();!Array.isArray(n)&&t!==n||Array.isArray(n)&&!n.includes(t)||this._updateDisplayValue()}async _updateDisplayValue(){let e=this._getSelected();this._displayValue=Array.isArray(e)?e.map(e=>e.textContent?.trim()).join(`, `)||null:e&&e?.textContent?.trim()||null,this.toggleState(`has-display-value`,!!this._displayValue),this.dispatchEvent(new Event(`displayvaluechange`,{bubbles:!0,composed:!0})),this.hydrationRequired&&await this.hydrationComplete;let t=[this._triggerElement?.querySelector?.(`span`),this.shadowRoot?.querySelector?.(`.sbb-select__trigger`)];for(let e of t)e&&(e.textContent=this._displayValue??this.placeholder)}_onMultipleChanged(e){e?this._value=this._isValueManuallyAssigned||this.value!=null?[this.value]:[]:Array.isArray(this.value)&&(this._value=this.value.length?this.value[0]:null),this._updateDisplayValue()}_closeOnDisabledReadonlyChanged(e){(this.state===`opening`||this.state===`opened`)&&e&&this.close()}firstUpdated(e){super.firstUpdated(e),this._updateValueOptionState(),this._triggerElement&&(this._syncAriaLabels(),this._triggerElement.select=this),D()||(this.startUpdate(),this._setupSelect())}focus(){this._triggerElement?.focus()}blur(){this._triggerElement?.blur()}removeAttribute(e){D()&&e===`defer-hydration`&&!this._didLoad&&this.updateComplete.then(()=>this._setupSelect()),super.removeAttribute(e)}connectedCallback(){super.connectedCallback(),this._syncNegative(),this._syncAriaLabels(),this._didLoad&&(this._setupOrigin(),this._setupTrigger())}requestUpdate(e,t,n){super.requestUpdate(e,t,n),!e&&this.hasUpdated&&setTimeout(()=>this._syncAriaLabels())}willUpdate(e){super.willUpdate(e),e.has(`negative`)&&this._syncNegative(),e.has(`readOnly`)&&this._closeOnDisabledReadonlyChanged(this.readOnly)}disconnectedCallback(){this._triggerElement&&this.prepend(this._triggerElement),super.disconnectedCallback(),this._openPanelEventsController?.abort()}formResetCallback(){this.value=this.hasAttribute(`value`)?this.getAttribute(`value`):null}formStateRestoreCallback(e,t){try{let{value:t,manuallyAssigned:n}=JSON.parse(e);this._isValueManuallyAssigned=n,this._value=t,this._updateOptionsFromValue()}catch{console.warn(`Failed to restore sbb-select with state ${e}`)}}formState(){return JSON.stringify({value:this.value,manuallyAssigned:this._isValueManuallyAssigned})}_syncNegative(){this.querySelectorAll?.(`sbb-divider, sbb-option-hint`).forEach(e=>e.negative=this.negative)}shouldValidate(e){return super.shouldValidate(e)||e===`value`||e===`required`}validate(){super.validate();let e=Array.isArray(this.value)?this.value:this.value===null?[]:[this.value];this.required&&(this.options.every(t=>e.every(e=>!this.compareWith(e,t.value)))||!this._isValueManuallyAssigned&&this.value==null)?this.setValidityFlag(`valueMissing`,T[this._languageController.current]):this.removeValidityFlag(`valueMissing`)}_setupSelect(){this._setupOrigin(),this._setupTrigger(),this._didLoad=!0,this.completeUpdate()}_setupOrigin(){let e=this.closest?.(`sbb-form-field`);this._originElement&&this._resizeObserver.unobserve(this._originElement),this._originElement=e?.shadowRoot?.querySelector?.(`#overlay-anchor`)??this.parentElement,this._originElement&&(this.toggleState(`option-panel-origin-borderless`,e?.hasAttribute?.(`borderless`)),this.isOpen&&this._resizeObserver.observe(this._originElement))}_setupTrigger(){this.parentElement&&this._triggerElement&&this.parentElement.insertBefore?.(this._triggerElement,this)}_setOverlayPosition(){this._originElement&&this._overlay&&M(this._overlay,this._originElement,this._overlay,this.shadowRoot.querySelector(`.sbb-option-panel__overlay-container`),this)}_onAnimationEnd(e){e.animationName===`open`&&this.state===`opening`?this._handleOpening():e.animationName===`close`&&this.state===`closing`&&this._handleClosing()}_handleOpening(){this.state=`opened`,this._originElement&&this._resizeObserver.observe(this._originElement),this.dispatchOpenEvent()}_handleClosing(){let e=this._restoreFocusOnClose||this._isFocusWithin();this._restoreFocusOnClose=!1,this.state=`closed`,this.shadowRoot?.querySelector(`[popover]`)?.hidePopover?.(),this._triggerElement&&(this._triggerElement.internals.ariaExpanded=`false`),this._resetActiveElement(),e&&this.focus(),this._overlay&&(this._overlay.scrollTop=0),this._escapableOverlayController.disconnect(),this.dispatchCloseEvent()}_isFocusWithin(){let e=this.getRootNode().activeElement;return!!e&&(e===this._triggerElement||this.contains(e))}_onOptionSelected(e){this.multiple?this.value?Array.isArray(this.value)&&!this.value.some(t=>this.compareWith(t,e.value))&&(this._value=[...this.value,e.value]):this._value=[e.value]:this._value=e.value,this._updateOptionsFromValue(),this._dispatchInputEvents()}_onOptionDeselected(e){this.multiple&&Array.isArray(this.value)&&(this._value=this.value.filter(t=>!this.compareWith(t,e.value)),this._updateOptionsFromValue(),this._dispatchInputEvents())}_dispatchInputEvents(){this.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}_attachOpenPanelEvents(){this._openPanelEventsController=new AbortController,document.addEventListener(`scroll`,()=>this._setOverlayPosition(),{passive:!0,signal:this._openPanelEventsController.signal,capture:!0}),window.addEventListener(`resize`,()=>this._setOverlayPosition(),{passive:!0,signal:this._openPanelEventsController.signal}),window.addEventListener(`pointerdown`,e=>this._pointerDownListener(e),{signal:this._openPanelEventsController.signal}),window.addEventListener(`pointerup`,e=>this._closeOnBackdropClick(e),{signal:this._openPanelEventsController.signal})}_onKeyDown(e){this.readOnly||(this.state===`opening`||this.state===`opened`?this._openedPanelKeyboardInteraction(e):(this.state===`closed`||this.state===`closing`)&&this._closedPanelKeyboardInteraction(e))}_closedPanelKeyboardInteraction(e){if(this._checkForLetterSelection(e))return this._setNextActiveOptionByText(e);switch(e.key){case`Enter`:case` `:case`ArrowDown`:case`ArrowUp`:e.preventDefault(),this.open()}}_openedPanelKeyboardInteraction(e){if(!this.readOnly){if(this._checkForLetterSelection(e))return this._setNextActiveOptionByText(e);switch(e.key){case`Tab`:this.close();break;case`Enter`:case` `:e.preventDefault(),this._selectByKeyboard();break;case`ArrowDown`:case`ArrowUp`:e.preventDefault(),this._setNextActiveOption(e);break;case`Home`:case`PageUp`:e.preventDefault(),this._setNextActiveOption(e,0);break;case`End`:case`PageDown`:e.preventDefault(),this._setNextActiveOption(e,this.options.length-1)}}}_checkForLetterSelection(e){return e.key===`Backspace`||e.key===`Clear`||e.key.length===1&&e.key!==` `&&!e.altKey&&!e.ctrlKey&&!e.metaKey}_setNextActiveOptionByText(e){typeof this._searchTimeout==typeof setTimeout&&clearTimeout(this._searchTimeout),this._searchTimeout=setTimeout(()=>this._searchString=``,1e3),this._searchString+=e.key;let t=this._activeItemIndex+1,n=this.options,r=[...n.slice(t),...n.slice(0,t)],i=r.find(e=>e.textContent?.toLowerCase().indexOf(this._searchString.toLowerCase())===0);if(i)this._setNextActiveOption(e,n.indexOf(i));else if(this._searchString.length>1&&RegExp(`^${this._searchString.charAt(0)}*$`).test(this._searchString)){let t=r.find(e=>e.textContent?.toLowerCase().indexOf(this._searchString[0].toLowerCase())===0);t&&this._setNextActiveOption(e,n.indexOf(t))}else clearTimeout(this._searchTimeout),this._searchString=``}_selectByKeyboard(){let e=this.options[this._activeItemIndex];e&&!e.disabled&&(this.multiple?e.selectViaUserInteraction(!e.selected):(e.selected||e.selectViaUserInteraction(!0),this.close()))}_setNextActiveOption(e,t){let n=this.options,r=t??x(e,this._activeItemIndex,n.length),i=n[this._activeItemIndex],a=n[r];this._activeItemIndex=r,this._setActiveElement(a,i),a.disabled||(this.multiple?e.shiftKey&&a.selectViaUserInteraction(!a.selected):a.selectViaUserInteraction(!0))}_setActiveElement(e,t=null){e.focus({preventScroll:!0}),e.scrollIntoView({block:`nearest`}),e.setActive(!0),t&&t!==e&&t.setActive(!1)}_onFocusIn(e){let t=e.target;if(t?.localName!==`sbb-option`)return;let n=this.options,r=t,i=n.indexOf(r);i!==-1&&(this._activeItemIndex=i,n.forEach(e=>e.setActive(!1)))}_resetActiveElement(){let e=this.options[this._activeItemIndex];e&&e.setActive(!1),this._activeItemIndex=-1}_updateOptionsFromValue(){let e=Array.isArray(this.value)?this.value:[this.value],t=[];for(let n of this.options)n.selected=e.some(e=>this.compareWith(e,n.value)),n.selected&&t.push(n);if(this._updateDisplayValue(),!Array.isArray(this.value)){let e=this.value;this._activeItemIndex=this.options.findIndex(t=>this.compareWith(t.value,e))}}_updateValueFromOptions(){let e=this._getSelected();if(Array.isArray(e)){if(e&&e.length>0){let t=[];for(let n of e)t.push(n.value);this._value=t}}else e&&(this._activeItemIndex=this.options.findIndex(t=>t===e),this._value=e.value);this._updateDisplayValue()}_handleSlotchange(){this.options.forEach(e=>e.tabIndex=-1),this._updateValueOptionState()}_updateValueOptionState(){this._isValueManuallyAssigned?this._updateOptionsFromValue():this._updateValueFromOptions()}_getSelected(){return this.multiple?this.options.filter(e=>e.selected):this.options.find(e=>e.selected)??null}_toggleOpening(){if(!(this.disabled||this.formDisabled||this.readOnly))switch(this.state){case`opening`:case`opened`:this.close();break;case`closing`:case`closed`:this.focus(),this.open()}}render(){return r`
4
4
  <!-- This element is visually hidden and will be appended to the light DOM to allow screen
5
5
  readers to work properly -->
6
6
  <sbb-select-trigger
@@ -8,13 +8,18 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{ResizeControl
8
8
  tabindex=${this.disabled||this.formDisabled?a:`0`}
9
9
  @keydown=${this._onKeyDown}
10
10
  @click=${this._toggleOpening}
11
- ${l(e=>this._triggerElement=e)}
11
+ ${c(e=>this._triggerElement=e)}
12
12
  >
13
- ${e}${this.multiple&&!this.disabled&&!this.readOnly?r`<p>${w[this._languageController.current]}</p>`:a}
13
+ <span></span>${this.multiple&&!this.disabled&&!this.readOnly?r`<p>${w[this._languageController.current]}</p>`:a}
14
14
  </sbb-select-trigger>
15
15
 
16
- <!-- Visually display the value -->
17
- <div class="sbb-select__trigger" aria-hidden="true">${e}</div>
16
+ <!--
17
+ Visually display the value.
18
+ The span is replaced after the first render. It is only here to avoid a Lit warning
19
+ about changing Lit-controlled content, because we update it directly.
20
+ The placeholder must be rendered here so it is transferred from server-side rendering.
21
+ -->
22
+ <div class="sbb-select__trigger" aria-hidden="true"><span>${this.placeholder}</span></div>
18
23
 
19
24
  <div class="sbb-option-panel__overlay-container sbb-popover-reset" popover="manual">
20
25
  <div
@@ -23,9 +28,9 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{ResizeControl
23
28
  aria-multiselectable=${this.multiple?`true`:a}
24
29
  tabindex="-1"
25
30
  @animationend=${this._onAnimationEnd}
26
- ${l(e=>this._overlay=e)}
31
+ ${c(e=>this._overlay=e)}
27
32
  >
28
33
  <slot @slotchange=${this._handleSlotchange}></slot>
29
34
  </div>
30
35
  </div>
31
- `}}})();export{F as SbbSelectElement,N as SbbSelectTriggerElement};
36
+ `}}})();export{L as SbbSelectElement,F as SbbSelectTriggerElement};
package/standard-theme.css CHANGED
@@ -1102,8 +1102,19 @@ summary {
1102
1102
  --sbb-alert-icon-size-l: var(--sbb-size-icon-ui-small);
1103
1103
  --sbb-alert-title-margin-block: 0;
1104
1104
  --sbb-alert-font-size: var(--sbb-text-font-size-s);
1105
- --sbb-alert-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
1106
- --sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxs);
1105
+ --sbb-alert-gap-s: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);
1106
+ --sbb-alert-gap-m: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
1107
+ --sbb-alert-gap-l: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
1108
+ --sbb-alert-gap: var(--sbb-alert-gap-m);
1109
+ --sbb-alert-close-icon-margin-s: var(--sbb-spacing-responsive-xxxs);
1110
+ --sbb-alert-close-icon-margin-m: var(--sbb-spacing-responsive-xxs);
1111
+ --sbb-alert-close-icon-margin-l: var(--sbb-spacing-responsive-xxs);
1112
+ --sbb-alert-close-icon-margin: var(--sbb-alert-close-icon-margin-m);
1113
+ --sbb-alert-grid-template-columns: 1fr auto;
1114
+ --sbb-alert-icon-padding-block-s: var(--sbb-spacing-fixed-2x);
1115
+ --sbb-alert-icon-padding-block-m: var(--sbb-spacing-fixed-3x);
1116
+ --sbb-alert-icon-padding-block-l: 0.625rem;
1117
+ --sbb-alert-icon-padding-block: var(--sbb-alert-icon-padding-block-m);
1107
1118
  --sbb-autocomplete-row-padding-inline-end: var(--sbb-spacing-responsive-xxxs);
1108
1119
  --sbb-autocomplete-row-gap: var(--sbb-spacing-fixed-6x);
1109
1120
  --sbb-breadcrumb-color: var(--sbb-color-granite);
@@ -2246,6 +2257,10 @@ summary {
2246
2257
  --sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-small);
2247
2258
  --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-small);
2248
2259
  --sbb-alert-close-button-divider-display: block;
2260
+ --sbb-alert-grid-template-columns: auto 1fr auto;
2261
+ --sbb-alert-icon-padding-block-s: 0;
2262
+ --sbb-alert-icon-padding-block-m: 0;
2263
+ --sbb-alert-icon-padding-block-l: 0;
2249
2264
  --sbb-dialog-padding-inline: var(--sbb-spacing-fixed-8x);
2250
2265
  --sbb-dialog-translate-y: var(--sbb-spacing-fixed-4x);
2251
2266
  --_sbb-dialog-max-height: calc(