@sbb-esta/lyne-elements 5.1.0 → 5.3.0

package/off-brand-theme.css

@@ -1313,6 +1313,10 @@ summary {
   --sbb-divider-color: var(--sbb-background-color-4);
   --sbb-divider-color-negative: var(--sbb-background-color-4-negative);
   --sbb-divider-border-width: var(--sbb-border-width-1x);
+  --sbb-download-gap: var(--sbb-spacing-fixed-3x);
+  --sbb-download-label-color: var(--sbb-color-3);
+  --sbb-download-info-color: var(--sbb-color-granite);
+  --sbb-download-info-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
   --sbb-expansion-panel-background-color: var(--sbb-background-color-1);
   --sbb-expansion-panel-background-color-hover: var(--sbb-background-color-3);
   --sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);
@@ -1582,12 +1586,8 @@ summary {
   --sbb-options-panel-margin-block-start: var(--sbb-spacing-fixed-2x);
   --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
   --sbb-overlay-background-color: var(--sbb-background-color-3);
-  --sbb-overlay-display: none;
   --sbb-overlay-height: 100%;
-  --sbb-overlay-inset: 0 auto auto 0;
   --sbb-overlay-animation-easing: ease;
-  --sbb-overlay-pointer-events: none;
-  --sbb-overlay-container-display: none;
   --sbb-paginator-color: var(--sbb-color-metal);
   --sbb-paginator-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
   --sbb-paginator-height: var(--sbb-size-element-m);
@@ -1720,7 +1720,15 @@ summary {
   --sbb-stepper-marker-color: var(--sbb-color-3);
   --sbb-table-border-color: var(--sbb-color-cloud);
   --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
+  --sbb-table-border-color-hover: var(--sbb-color-aluminium);
+  --sbb-table-border-color-hover: light-dark(
+    var(--sbb-color-aluminium),
+    var(--sbb-table-border-color)
+  );
+  --sbb-table-border-color-selected: var(--sbb-background-color-4-inverted);
+  --sbb-table-border-width: var(--sbb-border-width-1x);
   --sbb-table-background-color: var(--sbb-background-color-1);
+  --sbb-table-background-color-hover: var(--sbb-background-color-4);
   --sbb-table-row-striped-color: var(--sbb-background-color-3);
   --sbb-table-color: var(--sbb-color-1);
   --sbb-table-caption-color: var(--sbb-color-granite);
@@ -1977,6 +1985,8 @@ summary {
     --sbb-card-border-width: var(--sbb-border-width-2x);
     --sbb-card-badge-border-display: block;
     --sbb-card-badge-inline-border-display: none;
+    --sbb-download-label-color: CanvasText;
+    --sbb-download-info-color: CanvasText;
     --sbb-expansion-panel-header-text-color: ButtonText;
     --sbb-form-field-border-color: ButtonBorder;
     --sbb-header-action-border-color: CanvasText;
@@ -2248,6 +2258,10 @@ sbb-card .sbb-action {
   pointer-events: all;
 }
 
+sbb-carousel-item sbb-image {
+  border-radius: unset;
+}
+
 sbb-container > [slot=image]:is(sbb-image, img),
 sbb-container > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;
@@ -2546,7 +2560,7 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
 }
 
 :is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) {
-  --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
+  --sbb-table-border: var(--sbb-table-border-width) solid var(--sbb-table-border-color);
   --sbb-table-sticky-shadow-transition-duration: var(
     --sbb-disable-animation-duration,
     var(--sbb-animation-duration-6x)
@@ -2630,7 +2644,10 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
 sbb-table-wrapper[negative] .sbb-table,
 .sbb-table--negative {
   --sbb-table-border-color: var(--sbb-color-anthracite);
+  --sbb-table-border-color-hover: var(--sbb-table-border-color);
+  --sbb-table-border-color-selected: var(--sbb-color-cloud);
   --sbb-table-background-color: var(--sbb-background-color-1-negative);
+  --sbb-table-background-color-hover: var(--sbb-background-color-4-negative);
   --sbb-table-color: var(--sbb-color-1-negative);
   --sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
   --sbb-table-caption-color: var(--sbb-color-cement);
@@ -2644,6 +2661,26 @@ sbb-table-wrapper[negative] .sbb-table,
   background-color: var(--sbb-table-background-color);
 }
 
+.sbb-table--hover tbody tr:hover :is(th, td) {
+  background-color: var(--sbb-table-background-color-hover);
+  border-color: var(--sbb-table-border-color-hover);
+}
+.sbb-table--hover :is(thead:has(+ tbody tr:first-of-type:hover) tr:last-of-type :is(th, td),
+tbody tr:has(+ tr:hover) :is(th, td)) {
+  border-block-end-color: var(--sbb-table-border-color-hover);
+}
+
+tr.sbb-table--selected :is(th, td) {
+  position: relative;
+}
+tr.sbb-table--selected :is(th, td)::after {
+  content: "";
+  position: absolute;
+  inset: 0 0 calc(-1 * var(--sbb-table-border-width));
+  pointer-events: none;
+  border-block-end: var(--sbb-table-border-width) solid var(--sbb-table-border-color-selected);
+}
+
 .sbb-table--theme-iron {
   --sbb-table-cell-color: var(--sbb-color-4);
 }
@@ -2766,6 +2803,9 @@ sbb-tab-nav-bar .sbb-tab-amount {
   filter: brightness(var(--sbb-teaser-image-brightness, 1));
   transition: filter, scale var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
 }
+:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) .sbb-figure {
+  max-width: 100%;
+}
 
 sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;

package/option.pure.js

@@ -1,11 +1,11 @@
 import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,nothing as r,unsafeCSS as i}from"lit";import{property as a,state as o}from"lit/decorators.js";import{SbbDisabledMixin as s,SbbElement as c,SbbNegativeMixin as l,SbbPropertyWatcherController as u,forceType as d,isAndroid as f,isBlink as p,isSafari as m,screenReaderOnlyStyles as h,setOrRemoveAttribute as g}from"./core.js";import{MutationController as _}from"@lit-labs/observers/mutation-controller.js";import{SbbIconNameMixin as v}from"./icon.pure.js";import{SbbVisualCheckboxElement as y}from"./visual-checkbox.pure.js";var b=`:host{display:block}:host(:first-child){--sbb-optgroup-divider-display:none}:host(:is(:state(size-s),[state--size-s])){--sbb-optgroup-label-padding-end:var(--sbb-spacing-fixed-1x)}:host(:is(:state(size-m),[state--size-m])){--sbb-optgroup-label-padding-end:var(--sbb-spacing-fixed-2x)}:host(:is(:state(negative),[state--negative])){--sbb-optgroup-label-color:var(--sbb-color-5);--sbb-optgroup-divider-color:var(--sbb-divider-color-negative)}:host:before{content:"";display:var(--sbb-optgroup-divider-display,block);margin-block:var(--sbb-options-panel-divider-margin-block);border-block-start:var(--sbb-divider-border-width) solid var(--sbb-optgroup-divider-color)}.sbb-optgroup{margin-block:var(--sbb-spacing-fixed-4x);margin-inline:var(--sbb-spacing-fixed-4x)}.sbb-optgroup__label{column-gap:var(--sbb-spacing-responsive-xxxs);font-size:var(--sbb-optgroup-label-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);color:var(--sbb-optgroup-label-color);-webkit-text-fill-color:var(--sbb-optgroup-label-color);padding-inline:var(--sbb-optgroup-label-padding-inline);padding-block-end:var(--sbb-optgroup-label-padding-end);display:flex}.sbb-optgroup__icon-space{display:var(--sbb-option-icon-container-display,none);min-width:var(--sbb-size-icon-ui-small)}::slotted(sbb-divider){margin-block:var(--sbb-options-panel-divider-margin-block)}
 `;const x=m;let S=(()=>{let l=s(c),f,p=[],m=[],h,g=[],_=[];return class extends l{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(l[Symbol.metadata]??null):void 0;f=[d(),a()],h=[o()],e(this,null,f,{kind:`accessor`,name:`label`,static:!1,private:!1,access:{has:e=>`label`in e,get:e=>e.label,set:(e,t)=>{e.label=t}},metadata:t},p,m),e(this,null,h,{kind:`accessor`,name:`_inertAriaGroups`,static:!1,private:!1,access:{has:e=>`_inertAriaGroups`in e,get:e=>e._inertAriaGroups,set:(e,t)=>{e._inertAriaGroups=t}},metadata:t},g,_),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.role=x?null:`group`}static{this.styles=[i(b)]}#e;get label(){return this.#e}set label(e){this.#e=e}#t;get _inertAriaGroups(){return this.#t}set _inertAriaGroups(e){this.#t=e}constructor(){super(),this.#e=t(this,p,``),this.#t=(t(this,m),t(this,g,!1)),this._previousSize=(t(this,_),null),this.addController(new u(this,()=>this.closest(`sbb-autocomplete, sbb-autocomplete-grid, sbb-select`),{size:e=>{this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e.size,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}})),x&&(this.hydrationRequired?this.hydrationComplete.then(()=>this._inertAriaGroups=x):this._inertAriaGroups=x)}connectedCallback(){super.connectedCallback(),this._updateAriaLabel()}willUpdate(e){super.willUpdate(e),e.has(`disabled`)&&(this._inertAriaGroups||(this.internals.ariaDisabled=this.disabled?`true`:null)),e.has(`label`)&&this._updateAriaLabel()}_handleSlotchange(){this._updateAriaLabel(),this._highlightOptions(),this.dispatchEvent(new Event(`ɵoptgroupslotchange`))}_updateAriaLabel(){this.internals.ariaLabel=this._inertAriaGroups?null:this.label}_highlightOptions(){let e=this.getAutocompleteParent();if(!e)return;let t=e.triggerElement?.value;t&&this.options.forEach(e=>e.highlight(t))}render(){return n`
       ${this.label?n`
-            <div class="sbb-optgroup__label" aria-hidden="true">
-              <div class="sbb-optgroup__icon-space"></div>
-              <span>${this.label}</span>
-            </div>
-          `:r}
+              <div class="sbb-optgroup__label" aria-hidden="true">
+                <div class="sbb-optgroup__icon-space"></div>
+                <span>${this.label}</span>
+              </div>
+            `:r}
       <slot @slotchange=${this._handleSlotchange}></slot>
     `}}})();var C=class extends S{static{this.elementName=`sbb-optgroup`}get options(){return Array.from(this.querySelectorAll?.(`sbb-option`)??[])}constructor(){super(),this.addController(new u(this,()=>this.closest(`sbb-autocomplete`),{negative:e=>this._handleNegativeChange(e)})),this.addController(new u(this,()=>this.closest(`sbb-select`),{multiple:e=>this.toggleState(`multiple`,e.multiple),negative:e=>this._handleNegativeChange(e)}))}_handleNegativeChange(e){this.toggleState(`negative`,e.negative),this.requestUpdate()}getAutocompleteParent(){return this.closest?.(`sbb-autocomplete`)||null}connectedCallback(){super.connectedCallback();let e=this.closest?.(`sbb-autocomplete`)?`autocomplete`:this.closest?.(`sbb-select`)?`select`:null;this.internals.states.delete(`variant-autocomplete`),this.internals.states.delete(`variant-select`),e&&this.internals.states.add(`variant-${e}`)}},w=`:host{column-gap:var(--sbb-option-hint-column-gap);padding-inline:var(--sbb-option-hint-padding-inline);font-size:var(--sbb-option-hint-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);padding-block-end:var(--sbb-option-hint-padding-block-end);display:flex}:host([negative]){--sbb-option-hint-color:var(--sbb-color-5)}:host(:is(:state(size-s),[state--size-s])){--sbb-option-hint-padding-block-end:var(--sbb-spacing-fixed-1x)}:host(:is(:state(size-m),[state--size-m])){--sbb-option-hint-padding-block-end:var(--sbb-spacing-fixed-2x)}.sbb-optgroup__icon-space{display:var(--sbb-option-icon-container-display,none);min-width:var(--sbb-size-icon-ui-small)}.sbb-option-hint{color:var(--sbb-option-hint-color);-webkit-text-fill-color:var(--sbb-option-hint-color);flex-grow:1}
 `,T=class extends l(c){static{this.elementName=`sbb-option-hint`}static{this.styles=[i(w)]}constructor(){super(),this._previousSize=null,this.addController(new u(this,()=>this.closest(`sbb-autocomplete, sbb-autocomplete-grid, sbb-select`),{size:e=>{this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e.size,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}}))}render(){return n`
@@ -38,10 +38,10 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,not
 
       <!-- Checkbox -->
       ${this._isMultiple()?n`
-            <sbb-visual-checkbox
-              ?checked=${this.selected}
-              ?disabled=${this.disabled||this.disabledFromGroup}
-              ?negative=${this.matches?.(`:is(:state(negative),[state--negative])`)}
-            ></sbb-visual-checkbox>
-          `:r}
+              <sbb-visual-checkbox
+                ?checked=${this.selected}
+                ?disabled=${this.disabled||this.disabledFromGroup}
+                ?negative=${this.matches?.(`:is(:state(negative),[state--negative])`)}
+              ></sbb-visual-checkbox>
+            `:r}
     `}renderLabel(){return this._variant===`autocomplete`?super.renderLabel():r}renderTick(){return this._variant===`select`&&!this._isMultiple()&&this.selected?n`<sbb-icon name="tick-small"></sbb-icon>`:r}};export{C as SbbOptGroupElement,S as SbbOptgroupBaseElement,k as SbbOptionBaseElement,j as SbbOptionElement,T as SbbOptionHintElement,E as optionPanelStyles};

package/overlay/_overlay.global.scss

@@ -4,10 +4,6 @@ $theme: 'standard' !default;
 
 @mixin base {
   --sbb-overlay-background-color: var(--sbb-background-color-3);
-  --sbb-overlay-display: none;
   --sbb-overlay-height: 100%;
-  --sbb-overlay-inset: 0 auto auto 0;
   --sbb-overlay-animation-easing: ease;
-  --sbb-overlay-pointer-events: none;
-  --sbb-overlay-container-display: none;
 }

package/overlay.pure.js

@@ -1,4 +1,4 @@
-import{__esDecorate as e,__runInitializers as t}from"tslib";import{isServer as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{SbbEscapableOverlayController as a,SbbFocusTrapController as o,SbbInertController as s,SbbLanguageController as c,SbbNegativeMixin as l,SbbOpenCloseBaseElement as u,SbbScrollHandler as d,forceType as f,forwardEvent as p,i18nCloseDialog as m,i18nDialog as h,idReference as g,isZeroAnimationDuration as _,popoverResetStyles as v,removeAriaOverlayTriggerProperties as y,screenReaderOnlyStyles as b,scrollbarStyles as x,setAriaOverlayTriggerProperties as S}from"./core.js";import{ref as C}from"lit/directives/ref.js";import{html as w}from"lit/static-html.js";import{SbbSecondaryButtonElement as T}from"./button.pure.js";import{SbbContainerElement as E}from"./container.pure.js";const D=new WeakMap;var O=class extends Event{constructor(e,{cancelable:t,closeAttribute:n,closeTarget:r,result:i}){super(e,{cancelable:t}),this.result=i??(r?D.get(r)??(r.getAttribute(n)?.trim()||null):null),this.closeTarget=r??null}};function k(e,t){D.set(e,t)}const A=[];let j=(()=>{let r=l(u),p,m=[],_=[],x,C=[],w=[],T,E=[],D=[];return class extends r{constructor(){super(...arguments),this.#e=t(this,m,null),this.#t=(t(this,_),t(this,C,``)),this.#n=(t(this,w),t(this,E,!1)),this.lastFocusedElement=t(this,D),this.focusTrapController=new o(this),this.scrollHandler=new d,this.language=new c(this),this.inertController=new s(this),this.escapableOverlayController=new a(this),this._ariaLiveRefToggle=!1,this._triggerElement=null}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;p=[g(),i()],x=[f(),i({attribute:`accessibility-label`})],T=[f(),i({type:Boolean})],e(this,null,p,{kind:`accessor`,name:`trigger`,static:!1,private:!1,access:{has:e=>`trigger`in e,get:e=>e.trigger,set:(e,t)=>{e.trigger=t}},metadata:t},m,_),e(this,null,x,{kind:`accessor`,name:`accessibilityLabel`,static:!1,private:!1,access:{has:e=>`accessibilityLabel`in e,get:e=>e.accessibilityLabel,set:(e,t)=>{e.accessibilityLabel=t}},metadata:t},C,w),e(this,null,T,{kind:`accessor`,name:`skipFocusRestoration`,static:!1,private:!1,access:{has:e=>`skipFocusRestoration`in e,get:e=>e.skipFocusRestoration,set:(e,t)=>{e.skipFocusRestoration=t}},metadata:t},E,D),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.styles=[v,b]}#e;get trigger(){return this.#e}set trigger(e){this.#e=e}#t;get accessibilityLabel(){return this.#t}set accessibilityLabel(e){this.#t=e}#n;get skipFocusRestoration(){return this.#n}set skipFocusRestoration(e){this.#n=e}open(){this.state===`opening`||this.state===`opened`||this._hasClosedParent()||!this.dispatchBeforeOpenEvent()||(this.lastFocusedElement=document.activeElement,this.showPopover?.(),this.state=`opening`,this._triggerElement&&(this._triggerElement.ariaExpanded=`true`),A.push(this),this.scrollHandler.disableScroll(),this.escapableOverlayController.connect(),this.attachOpenOverlayEvents(),this.isZeroAnimationDuration()&&this.handleOpening())}close(e){this._close(e,void 0)}_close(e,t){this.state===`closing`||this.state===`closed`||(this.lastResult=e??null,this.lastClosedTarget=t,this.dispatchBeforeCloseEvent()&&(this.state=`closing`,this._triggerElement&&(this._triggerElement.ariaExpanded=`false`),this.removeAriaLiveRefContent(),this.isZeroAnimationDuration()&&this.handleClosing()))}_hasClosedParent(){let e=this.parentElement?.closest(`sbb-dialog, sbb-overlay`);return e?.state===`closed`||e?.state===`closing`}connectedCallback(){this.popover=`manual`,super.connectedCallback(),this.hasUpdated&&this._configureTrigger()}_configureTrigger(){this.trigger!==this._triggerElement&&(this._triggerAbortController?.abort(),y(this._triggerElement),this._triggerElement=this.trigger,this._triggerElement&&(S(this,this._triggerElement,`dialog`,this.state),this._triggerAbortController=new AbortController,this._triggerElement.addEventListener(`click`,()=>this.open(),{signal:this._triggerAbortController.signal})))}firstUpdated(e){super.firstUpdated(e),this._ariaLiveRef=this.shadowRoot.querySelector(`.sbb-screen-reader-only`),this._configureTrigger(),this.isOpen&&setTimeout(()=>{this.focusTrapController.focusInitialElement()},0)}disconnectedCallback(){super.disconnectedCallback(),this.openOverlayController?.abort(),this.removeInstanceFromGlobalCollection(),this.scrollHandler.enableScroll(),this._triggerElement=null,this._triggerAbortController?.abort()}requestUpdate(e,t,r){super.requestUpdate(e,t,r),!n&&(!e||e===`trigger`)&&this.hasUpdated&&this._configureTrigger()}attachOpenOverlayEvents(){this.openOverlayController=new AbortController,window.addEventListener(`keydown`,()=>{this.removeAriaLiveRefContent()},{signal:this.openOverlayController.signal}),window.addEventListener(`click`,()=>this.removeAriaLiveRefContent(),{signal:this.openOverlayController.signal})}removeInstanceFromGlobalCollection(){let e=A.indexOf(this);e>-1&&A.splice(e,1)}closeOnSbbOverlayCloseClick(e){let t=e.composedPath().find((e,t,n)=>e instanceof HTMLElement&&t<n.indexOf(this)&&(e.hasAttribute(this.closeAttribute)||e.localName===this.closeTag)&&!e.hasAttribute(`disabled`)&&(e.closest(this.localName)===this||(this.shadowRoot?.contains(e)??!1)));t&&A.length&&A[A.length-1]._close(null,t)}removeAriaLiveRefContent(){this._ariaLiveRef&&(this._ariaLiveRef.textContent=``)}setAriaLiveRefContent(e){this._ariaLiveRef&&(this._ariaLiveRefToggle=!this._ariaLiveRefToggle,this._ariaLiveRef.textContent=`${h[this.language.current]}${e?`, ${e}`:``}${this._ariaLiveRefToggle?`\xA0`:``}`)}onOverlayAnimationEnd(e){e.animationName===`open`&&this.state===`opening`?this.handleOpening():e.animationName===`close`&&this.state===`closing`&&this.handleClosing()}}})();var M=`:host{--_sbb-overlay-padding-block:calc(var(--sbb-spacing-fixed-14x) + var(--sbb-spacing-responsive-l));--sbb-overlay-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x));display:var(--sbb-overlay-display);inset:var(--sbb-overlay-inset);z-index:var(--sbb-overlay-z-index,var(--sbb-overlay-default-z-index));position:fixed}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--sbb-overlay-display:block;--sbb-overlay-container-display:flex}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]))){--sbb-overlay-pointer-events:all}:host([negative]){--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark);--sbb-overlay-color:var(--sbb-color-1-negative);--sbb-overlay-background-color:var(--sbb-background-color-3-negative)}:host(:not(:is(:state(state-closed),[state--state-closed]))){--sbb-overlay-inset:0}.sbb-overlay__container{background-color:var(--sbb-overlay-background-color);pointer-events:var(--sbb-overlay-pointer-events);display:var(--sbb-overlay-container-display);inset:var(--sbb-overlay-inset);align-items:center;position:fixed}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-overlay__container{animation-name:open;animation-duration:var(--sbb-overlay-animation-duration);animation-timing-function:var(--sbb-overlay-animation-easing)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-overlay__container{pointer-events:none;animation-name:close}.sbb-overlay{height:var(--sbb-overlay-height);color:var(--sbb-overlay-color);border:none;margin:auto;padding:0;position:absolute;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-overlay{animation-name:open-move-in;animation-duration:var(--sbb-overlay-animation-duration);animation-timing-function:var(--sbb-overlay-animation-easing)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-overlay{animation-name:close-move-out}.sbb-overlay__wrapper{width:100%;height:var(--sbb-overlay-height);outline:none;flex-direction:column;display:flex;position:fixed}@media (width>=64rem){.sbb-overlay__wrapper{height:auto;position:sticky;inset-block-start:0}}.sbb-overlay__header{pointer-events:none;width:100%;padding:var(--sbb-spacing-responsive-xs);z-index:1;justify-content:space-between;align-items:start;padding-block-end:0;display:flex;position:absolute;inset-inline-start:0}.sbb-overlay__header *{pointer-events:all}.sbb-overlay__close{margin-inline-start:auto}.sbb-overlay__content{-webkit-overflow-scrolling:touch;height:100vh;overflow:auto}.sbb-overlay__content-container{padding-block:var(--_sbb-overlay-padding-block)}@keyframes open{0%{opacity:0}to{opacity:1}}@keyframes open-move-in{0%{transform:translateY(var(--sbb-spacing-fixed-4x))}to{transform:translateY(0%)}}@keyframes close{0%{opacity:1}to{opacity:0}}@keyframes close-move-out{0%{transform:translateY(0%)}to{transform:translateY(var(--sbb-spacing-fixed-4x))}}
+import{__esDecorate as e,__runInitializers as t}from"tslib";import{isServer as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{SbbEscapableOverlayController as a,SbbFocusTrapController as o,SbbInertController as s,SbbLanguageController as c,SbbNegativeMixin as l,SbbOpenCloseBaseElement as u,SbbScrollHandler as d,forceType as f,forwardEvent as p,i18nCloseDialog as m,i18nDialog as h,idReference as g,isZeroAnimationDuration as _,popoverResetStyles as v,removeAriaOverlayTriggerProperties as y,screenReaderOnlyStyles as b,scrollbarStyles as x,setAriaOverlayTriggerProperties as S}from"./core.js";import{ref as C}from"lit/directives/ref.js";import{html as w}from"lit/static-html.js";import{SbbSecondaryButtonElement as T}from"./button.pure.js";import{SbbContainerElement as E}from"./container.pure.js";const D=new WeakMap;var O=class extends Event{constructor(e,{cancelable:t,closeAttribute:n,closeTarget:r,result:i}){super(e,{cancelable:t}),this.result=i??(r?D.get(r)??(r.getAttribute(n)?.trim()||null):null),this.closeTarget=r??null}};function k(e,t){D.set(e,t)}const A=[];let j=(()=>{let r=l(u),p,m=[],_=[],x,C=[],w=[],T,E=[],D=[];return class extends r{constructor(){super(...arguments),this.#e=t(this,m,null),this.#t=(t(this,_),t(this,C,``)),this.#n=(t(this,w),t(this,E,!1)),this.lastFocusedElement=t(this,D),this.focusTrapController=new o(this),this.scrollHandler=new d,this.language=new c(this),this.inertController=new s(this),this.escapableOverlayController=new a(this),this._ariaLiveRefToggle=!1,this._triggerElement=null}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;p=[g(),i()],x=[f(),i({attribute:`accessibility-label`})],T=[f(),i({type:Boolean})],e(this,null,p,{kind:`accessor`,name:`trigger`,static:!1,private:!1,access:{has:e=>`trigger`in e,get:e=>e.trigger,set:(e,t)=>{e.trigger=t}},metadata:t},m,_),e(this,null,x,{kind:`accessor`,name:`accessibilityLabel`,static:!1,private:!1,access:{has:e=>`accessibilityLabel`in e,get:e=>e.accessibilityLabel,set:(e,t)=>{e.accessibilityLabel=t}},metadata:t},C,w),e(this,null,T,{kind:`accessor`,name:`skipFocusRestoration`,static:!1,private:!1,access:{has:e=>`skipFocusRestoration`in e,get:e=>e.skipFocusRestoration,set:(e,t)=>{e.skipFocusRestoration=t}},metadata:t},E,D),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.styles=[v,b]}#e;get trigger(){return this.#e}set trigger(e){this.#e=e}#t;get accessibilityLabel(){return this.#t}set accessibilityLabel(e){this.#t=e}#n;get skipFocusRestoration(){return this.#n}set skipFocusRestoration(e){this.#n=e}open(){this.state===`opening`||this.state===`opened`||this._hasClosedParent()||!this.dispatchBeforeOpenEvent()||(this.lastFocusedElement=document.activeElement,this.showPopover?.(),this.state=`opening`,this._triggerElement&&(this._triggerElement.ariaExpanded=`true`),A.push(this),this.scrollHandler.disableScroll(),this.escapableOverlayController.connect(),this.attachOpenOverlayEvents(),this.isZeroAnimationDuration()&&this.handleOpening())}close(e){this._close(e,void 0)}_close(e,t){this.state===`closing`||this.state===`closed`||(this.lastResult=e??null,this.lastClosedTarget=t,this.dispatchBeforeCloseEvent()&&(this.state=`closing`,this._triggerElement&&(this._triggerElement.ariaExpanded=`false`),this.removeAriaLiveRefContent(),this.isZeroAnimationDuration()&&this.handleClosing()))}_hasClosedParent(){let e=this.parentElement?.closest(`sbb-dialog, sbb-overlay`);return e?.state===`closed`||e?.state===`closing`}connectedCallback(){this.popover=`manual`,super.connectedCallback(),this.hasUpdated&&this._configureTrigger()}_configureTrigger(){this.trigger!==this._triggerElement&&(this._triggerAbortController?.abort(),y(this._triggerElement),this._triggerElement=this.trigger,this._triggerElement&&(S(this,this._triggerElement,`dialog`,this.state),this._triggerAbortController=new AbortController,this._triggerElement.addEventListener(`click`,()=>this.open(),{signal:this._triggerAbortController.signal})))}firstUpdated(e){super.firstUpdated(e),this._ariaLiveRef=this.shadowRoot.querySelector(`.sbb-screen-reader-only`),this._configureTrigger(),this.isOpen&&setTimeout(()=>{this.focusTrapController.focusInitialElement()},0)}disconnectedCallback(){super.disconnectedCallback(),this.openOverlayController?.abort(),this.removeInstanceFromGlobalCollection(),this.scrollHandler.enableScroll(),this._triggerElement=null,this._triggerAbortController?.abort()}requestUpdate(e,t,r){super.requestUpdate(e,t,r),!n&&(!e||e===`trigger`)&&this.hasUpdated&&this._configureTrigger()}attachOpenOverlayEvents(){this.openOverlayController=new AbortController,window.addEventListener(`keydown`,()=>{this.removeAriaLiveRefContent()},{signal:this.openOverlayController.signal}),window.addEventListener(`click`,()=>this.removeAriaLiveRefContent(),{signal:this.openOverlayController.signal})}removeInstanceFromGlobalCollection(){let e=A.indexOf(this);e>-1&&A.splice(e,1)}closeOnSbbOverlayCloseClick(e){let t=e.composedPath().find((e,t,n)=>e instanceof HTMLElement&&t<n.indexOf(this)&&(e.hasAttribute(this.closeAttribute)||e.localName===this.closeTag)&&!e.hasAttribute(`disabled`)&&(e.closest(this.localName)===this||(this.shadowRoot?.contains(e)??!1)));t&&A.length&&A[A.length-1]._close(null,t)}removeAriaLiveRefContent(){this._ariaLiveRef&&(this._ariaLiveRef.textContent=``)}setAriaLiveRefContent(e){this._ariaLiveRef&&(this._ariaLiveRefToggle=!this._ariaLiveRefToggle,this._ariaLiveRef.textContent=`${h[this.language.current]}${e?`, ${e}`:``}${this._ariaLiveRefToggle?`\xA0`:``}`)}onOverlayAnimationEnd(e){e.animationName===`open`&&this.state===`opening`?this.handleOpening():e.animationName===`close`&&this.state===`closing`&&this.handleClosing()}}})();var M=`:host{--sbb-overlay-display:none;--sbb-overlay-inset:0 auto auto 0;--sbb-overlay-pointer-events:none;--sbb-overlay-container-display:none;--_sbb-overlay-padding-block:calc(var(--sbb-spacing-fixed-14x) + var(--sbb-spacing-responsive-l));--sbb-overlay-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x));display:var(--sbb-overlay-display);inset:var(--sbb-overlay-inset);z-index:var(--sbb-overlay-z-index,var(--sbb-overlay-default-z-index));position:fixed}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--sbb-overlay-display:block;--sbb-overlay-container-display:flex}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]))){--sbb-overlay-pointer-events:all}:host(:not([negative])){--sbb-overlay-color:var(--sbb-color-1);--sbb-overlay-background-color:var(--sbb-background-color-3)}:host([negative]){--sbb-overlay-color:var(--sbb-color-1-negative);--sbb-overlay-background-color:var(--sbb-background-color-3-negative);--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark)}:host(:not(:is(:state(state-closed),[state--state-closed]))){--sbb-overlay-inset:0}.sbb-overlay__container{background-color:var(--sbb-overlay-background-color);pointer-events:var(--sbb-overlay-pointer-events);display:var(--sbb-overlay-container-display);inset:var(--sbb-overlay-inset);align-items:center;position:fixed}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-overlay__container{animation-name:open;animation-duration:var(--sbb-overlay-animation-duration);animation-timing-function:var(--sbb-overlay-animation-easing)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-overlay__container{pointer-events:none;animation-name:close}.sbb-overlay{height:var(--sbb-overlay-height);color:var(--sbb-overlay-color);border:none;margin:auto;padding:0;position:absolute;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-overlay{animation-name:open-move-in;animation-duration:var(--sbb-overlay-animation-duration);animation-timing-function:var(--sbb-overlay-animation-easing)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-overlay{animation-name:close-move-out}.sbb-overlay__wrapper{width:100%;height:var(--sbb-overlay-height);outline:none;flex-direction:column;display:flex;position:fixed}@media (width>=64rem){.sbb-overlay__wrapper{height:auto;position:sticky;inset-block-start:0}}.sbb-overlay__header{pointer-events:none;width:100%;padding:var(--sbb-spacing-responsive-xs);z-index:1;justify-content:space-between;align-items:start;padding-block-end:0;display:flex;position:absolute;inset-inline-start:0}.sbb-overlay__header *{pointer-events:all}.sbb-overlay__close{margin-inline-start:auto}.sbb-overlay__content{-webkit-overflow-scrolling:touch;height:100vh;overflow:auto}.sbb-overlay__content-container{padding-block:var(--_sbb-overlay-padding-block)}@keyframes open{0%{opacity:0}to{opacity:1}}@keyframes open-move-in{0%{transform:translateY(var(--sbb-spacing-fixed-4x))}to{transform:translateY(0%)}}@keyframes close{0%{opacity:1}to{opacity:0}}@keyframes close-move-out{0%{transform:translateY(0%)}to{transform:translateY(var(--sbb-spacing-fixed-4x))}}
 `;let N=(()=>{let n=j,a,o=[],s=[],c,l=[],u=[];return class extends n{constructor(){super(...arguments),this.#e=t(this,o,!1),this.#t=(t(this,s),t(this,l,``)),this.closeAttribute=(t(this,u),`sbb-overlay-close`),this._overlayContentElement=null}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(n[Symbol.metadata]??null):void 0;a=[f(),i({reflect:!0,type:Boolean})],c=[f(),i({attribute:`accessibility-close-label`})],e(this,null,a,{kind:`accessor`,name:`expanded`,static:!1,private:!1,access:{has:e=>`expanded`in e,get:e=>e.expanded,set:(e,t)=>{e.expanded=t}},metadata:t},o,s),e(this,null,c,{kind:`accessor`,name:`accessibilityCloseLabel`,static:!1,private:!1,access:{has:e=>`accessibilityCloseLabel`in e,get:e=>e.accessibilityCloseLabel,set:(e,t)=>{e.accessibilityCloseLabel=t}},metadata:t},l,u),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-overlay`}static{this.elementDependencies=[T,E]}static{this.styles=[x,r(M)]}static{this.events={beforeopen:`beforeopen`,open:`open`,beforeclose:`beforeclose`,close:`close`}}#e;get expanded(){return this.#e}set expanded(e){this.#e=e}#t;get accessibilityCloseLabel(){return this.#t}set accessibilityCloseLabel(e){this.#t=e}firstUpdated(e){super.firstUpdated(e),this.isOpen&&this.setAriaLiveRefContent()}isZeroAnimationDuration(){return _(this,`--sbb-overlay-animation-duration`)}handleOpening(){this.state=`opened`,this.inertController.activate(),this.focusTrapController.focusInitialElement(),setTimeout(()=>this.setAriaLiveRefContent(this.accessibilityLabel)),this.focusTrapController.enabled=!0,this.dispatchOpenEvent()}handleClosing(){this._overlayContentElement?.scrollTo(0,0),this.state=`closed`,this.hidePopover?.(),this.inertController.deactivate(),this.skipFocusRestoration||this.lastFocusedElement?.focus(),this.openOverlayController?.abort(),this.focusTrapController.enabled=!1,this.removeInstanceFromGlobalCollection(),A.length||this.scrollHandler.enableScroll(),this.escapableOverlayController.disconnect(),this.dispatchCloseEvent()}dispatchBeforeCloseEvent(){return this.dispatchEvent(new O(`beforeclose`,{cancelable:!0,closeAttribute:this.closeAttribute,closeTarget:this.lastClosedTarget,result:this.lastResult}))}dispatchCloseEvent(){return this.dispatchEvent(new O(`close`,{closeAttribute:this.closeAttribute,closeTarget:this.lastClosedTarget,result:this.lastResult}))}render(){return w`
       <div class="sbb-overlay__container" @animationend=${this.onOverlayAnimationEnd}>
         <div class="sbb-overlay">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sbb-esta/lyne-elements",
-  "version": "5.1.0",
+  "version": "5.3.0",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
@@ -263,6 +263,16 @@
       "development": "./development/divider.pure.js",
       "default": "./divider.pure.js"
     },
+    "./download.js": {
+      "types": "./development/download.d.ts",
+      "development": "./development/download.js",
+      "default": "./download.js"
+    },
+    "./download.pure.js": {
+      "types": "./development/download.pure.d.ts",
+      "development": "./development/download.pure.js",
+      "default": "./download.pure.js"
+    },
     "./expansion-panel.js": {
       "types": "./development/expansion-panel.d.ts",
       "development": "./development/expansion-panel.js",

package/paginator.pure.js

@@ -60,24 +60,24 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,not
         `:r}_renderPageNumbers(){return n`
       <ul class="sbb-paginator__pages">
         ${w(this._getVisiblePagesIndex(),e=>e===`ellipsis`?n`
-                  <li class="sbb-paginator__page--ellipsis">
-                    <span class="sbb-paginator__page--ellipsis-item">…</span>
-                  </li>
-                `:n`
-                  <li class="sbb-paginator__page--number">
-                    <button
-                      ?data-selected=${this.pageIndex===e}
-                      ?disabled=${this.disabled}
-                      class="sbb-paginator__page--number-item"
-                      data-index=${e}
-                      aria-label="${this.accessibilityPageLabel?this.accessibilityPageLabel:g[this.language.current]} ${e+1}"
-                      aria-current=${this.pageIndex===e?`true`:r}
-                      @click=${()=>this._onPageNumberClick(e)}
-                    >
-                      <span class="sbb-paginator__page--number-item-label">${e+1}</span>
-                    </button>
-                  </li>
-                `)}
+                <li class="sbb-paginator__page--ellipsis">
+                  <span class="sbb-paginator__page--ellipsis-item">…</span>
+                </li>
+              `:n`
+                <li class="sbb-paginator__page--number">
+                  <button
+                    ?data-selected=${this.pageIndex===e}
+                    ?disabled=${this.disabled}
+                    class="sbb-paginator__page--number-item"
+                    data-index=${e}
+                    aria-label="${this.accessibilityPageLabel?this.accessibilityPageLabel:g[this.language.current]} ${e+1}"
+                    aria-current=${this.pageIndex===e?`true`:r}
+                    @click=${()=>this._onPageNumberClick(e)}
+                  >
+                    <span class="sbb-paginator__page--number-item-label">${e+1}</span>
+                  </button>
+                </li>
+              `)}
       </ul>
     `}renderPaginator(){return n`
       <div class="sbb-paginator">

package/popover.pure.js

@@ -1,5 +1,5 @@
 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,unsafeCSS as a}from"lit";import{property as o,state as s}from"lit/decorators.js";import{ref as c}from"lit/directives/ref.js";import{IS_FOCUSABLE_QUERY as l,SbbEscapableOverlayController as u,SbbFocusTrapController as d,SbbLanguageController as f,SbbMediaQueryPointerCoarse as p,SbbOpenCloseBaseElement as m,forceType as h,getElementPosition as g,i18nClosePopover as _,idReference as v,isEventOnElement as y,isFakeMousedownFromScreenReader as b,isZeroAnimationDuration as x,popoverResetStyles as S,readConfig as C,removeAriaOverlayTriggerProperties as w,sbbInputModalityDetector as T,scrollbarStyles as E,setAriaOverlayTriggerProperties as D,ɵstateController as O}from"./core.js";import{SbbSecondaryButtonElement as k}from"./button.pure.js";var A=`:host{--sbb-focus-outline-color:light-dark(var(--sbb-focus-outline-color-default),var(--sbb-focus-outline-color-dark));--sbb-popover-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--_sbb-popover-inset:0 auto auto 0;--_sbb-popover-translate:0 var(--sbb-spacing-fixed-2x);--_sbb-popover-box-shadow:var(--sbb-box-shadow-level-9-hard);display:none;outline:none!important}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--_sbb-popover-inset:0;display:block}:host(:is(:state(position-above),[state--position-above])){--_sbb-popover-translate:0 calc(var(--sbb-spacing-fixed-2x) * -1)}.sbb-popover:after,.sbb-popover__content:before{content:"";width:var(--sbb-popover-arrow-size);height:var(--sbb-popover-arrow-size);left:var(--_sbb-popover-arrow-position-x,0);bottom:calc(100% - var(--sbb-popover-arrow-size) / 2);background-color:var(--sbb-popover-background);border-radius:var(--sbb-border-radius-2x) 0;display:block;position:absolute;rotate:45deg}.sbb-popover__container{inset:var(--_sbb-popover-inset);pointer-events:none;z-index:var(--sbb-popover-z-index,var(--sbb-overlay-default-z-index));position:fixed}.sbb-popover{position:var(--sbb-popover-position,absolute);top:var(--_sbb-popover-position-y,0);bottom:unset;left:var(--_sbb-popover-position-x,0);right:unset;background-color:var(--sbb-popover-background);max-width:var(--sbb-popover-max-width);width:max-content;box-shadow:var(--_sbb-popover-box-shadow);border-radius:var(--sbb-popover-border-radius);pointer-events:all;border:none;outline:none;padding:0;display:none}:host(:focus-visible) .sbb-popover{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width)}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-popover{animation-name:open;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing);display:block}:host(:is(:state(state-closing),[state--state-closing])) .sbb-popover{pointer-events:none;animation-name:close;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing)}.sbb-popover:after{z-index:-1;box-shadow:var(--_sbb-popover-box-shadow)}@media (forced-colors:active){.sbb-popover:after{outline:var(--sbb-border-width-1x) solid CanvasText}}:host(:is(:state(position-above),[state--position-above])) .sbb-popover:after{top:calc(100% - var(--sbb-popover-arrow-size) / 2)}@media (forced-colors:active){.sbb-popover{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-popover:before{content:"";z-index:-1;background-color:#0000;display:block;position:absolute;inset:0}:host(:is(:state(position-below),[state--position-below])) .sbb-popover:before{inset-block-start:calc(-1 * var(--sbb-spacing-fixed-6x))}:host(:is(:state(position-above),[state--position-above])) .sbb-popover:before{inset-block-end:calc(-1 * var(--sbb-spacing-fixed-6x))}.sbb-popover__content{border-radius:var(--sbb-popover-border-radius);padding:var(--sbb-popover-padding);background-color:var(--sbb-popover-background);outline:none}.sbb-popover__content:before{clip-path:polygon(100% 0,0% 0%,0% 100%)}:host(:is(:state(position-above),[state--position-above])) .sbb-popover__content:before{top:calc(100% - var(--sbb-popover-arrow-size) / 2);clip-path:polygon(100% 0,100% 100%,0% 100%)}@keyframes open{0%{opacity:0;translate:var(--_sbb-popover-translate)}to{opacity:1;translate:0}}@keyframes close{0%{opacity:1;translate:0}to{opacity:0;translate:var(--_sbb-popover-translate)}}
-`;const j=new Set;var M=class extends Event{get closeTarget(){return this._closeTarget}constructor(e,{closeTarget:t,cancelable:n}){super(e,{cancelable:n}),this._closeTarget=t}};let N=(()=>{let s=m,f,p=[],h=[];return class extends s{constructor(){super(...arguments),this.#e=t(this,p,null),this._nextFocusedElement=t(this,h),this._skipCloseFocus=!1,this._resizeController=new n(this,{target:null,callback:()=>this._setPopoverPosition()}),this._escapableOverlayController=new u(this),this._focusTrapController=new d(this),this._blurTimeout=null,this._pointerDownListener=e=>{this._isPointerDownEventOnPopover=y(this.overlay,e)},this._closeOnBackdropClick=e=>{let t=e.composedPath();!this._isPointerDownEventOnPopover&&!y(this.overlay,e)&&(!this.trigger||!t.includes(this.trigger))&&(this._nextFocusedElement=t.filter(e=>e instanceof window.HTMLElement).find(e=>e.matches(l)),clearTimeout(this.closeTimeout),this.close())}}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(s[Symbol.metadata]??null):void 0;f=[v(),o()],e(this,null,f,{kind:`accessor`,name:`trigger`,static:!1,private:!1,access:{has:e=>`trigger`in e,get:e=>e.trigger,set:(e,t)=>{e.trigger=t}},metadata:t},p,h),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.styles=[S,a(A)]}#e;get trigger(){return this.#e}set trigger(e){this.#e=e}open(){if(!(this.state!==`closed`&&this.state!==`closing`||!this.overlay||!this.dispatchBeforeOpenEvent())){for(let e of j)(e.state===`opened`||e.state===`opening`)&&e.close();this.showPopover?.(),this.state=`opening`,this.inert=!0,this._setPopoverPosition(),this._attachWindowEvents(),this._escapableOverlayController.connect(),this._nextFocusedElement=void 0,this._skipCloseFocus=!1,this._triggerElement&&(this._triggerElement.ariaExpanded=`true`),this._isZeroAnimationDuration()&&this._handleOpening()}}close(e){this.state!==`opened`&&this.state!==`opening`||(this._popoverCloseElement=e,this.dispatchBeforeCloseEvent({closeTarget:e??null})&&(this.state=`closing`,this.inert=!0,this._triggerElement&&(this._triggerElement.ariaExpanded=`false`),this._isZeroAnimationDuration()&&this._handleClosing()))}_isZeroAnimationDuration(){return x(this,`--sbb-popover-animation-duration`)}_handleClosing(){this.state=`closed`,this.hidePopover?.(),this.overlay&&(this._resizeController.unobserve(this.overlay),this.overlay.firstElementChild?.scrollTo(0,0)),this.removeAttribute(`tabindex`),this._skipCloseFocus||(this._nextFocusedElement||this._triggerElement)?.focus(),this._escapableOverlayController.disconnect(),this._openStateController?.abort(),this._focusTrapController.enabled=!1,this.dispatchCloseEvent({closeTarget:this._popoverCloseElement??null})}_handleOpening(){this.state=`opened`,this.inert=!1,this._setPopoverFocus(),this._focusTrapController.enabled=!0,this.overlay&&this._resizeController.observe(this.overlay),this.dispatchOpenEvent()}connectedCallback(){this.popover=`manual`,super.connectedCallback(),this.state=`closed`,j.add(this),this.hasUpdated&&this._configureTrigger()}requestUpdate(e,t,n){super.requestUpdate(e,t,n),!i&&(!e||e===`trigger`||e===`hoverTrigger`)&&this.hasUpdated&&this._configureTrigger()}firstUpdated(e){super.firstUpdated(e),this._configureTrigger()}disconnectedCallback(){super.disconnectedCallback(),this._triggerElement=null,this._triggerAbortController?.abort(),this._openStateController?.abort(),j.delete(this),this._blurTimeout&&clearTimeout(this._blurTimeout)}_configureTrigger(){if(!i){if(this.hydrationRequired){this.hydrationComplete.then(()=>this._configureTrigger());return}this.configureTrigger(this._triggerElement??null)}}configureTrigger(e){this._triggerAbortController?.abort(),w(this._triggerElement),this._triggerElement=this.trigger,this._triggerElement&&(D(this,this._triggerElement,`dialog`,this.state),this._triggerAbortController=new AbortController,this.registerTriggerListeners(this._triggerAbortController.signal))}registerTriggerListeners(e){this._triggerElement.addEventListener(`click`,()=>this.open(),{signal:e})}_attachWindowEvents(){this._openStateController=new AbortController,document.addEventListener(`scroll`,()=>this._setPopoverPosition(),{passive:!0,signal:this._openStateController.signal,capture:!0}),window.addEventListener(`resize`,()=>this._setPopoverPosition(),{passive:!0,signal:this._openStateController.signal}),window.addEventListener(`pointerdown`,this._pointerDownListener,{signal:this._openStateController.signal}),window.addEventListener(`pointerup`,this._closeOnBackdropClick,{signal:this._openStateController.signal})}_closeOnSbbPopoverCloseClick(e){let t=e.composedPath().find((e,t,n)=>e instanceof HTMLElement&&t<n.indexOf(this)&&(e.hasAttribute(`sbb-popover-close`)||e.localName===`sbb-popover-close-button`)&&!e.hasAttribute(`disabled`));t&&(clearTimeout(this.closeTimeout),this.close(t))}_onPopoverAnimationEnd(e){e.animationName===`open`&&this.state===`opening`?this._handleOpening():e.animationName===`close`&&this.state===`closing`&&this._handleClosing()}_setPopoverFocus(){!this._focusTrapController.focusInitialElement()&&this._openStateController&&(this.setAttribute(`tabindex`,`0`),this.focus(),this.addEventListener(`blur`,e=>{this._blurTimeout=setTimeout(()=>{if(document.visibilityState!==`hidden`){if(this.removeAttribute(`tabindex`),this.contains(e.relatedTarget)||e.relatedTarget===this.trigger)return;(this.state===`opened`||this.state===`opening`)&&(this._skipCloseFocus=!0),this.close()}})},{signal:this._openStateController.signal}))}_setPopoverPosition(){if(!this.overlay||!this._triggerElement)return;let e=g(this.overlay,this._triggerElement,this.shadowRoot.querySelector(`.sbb-popover__container`),{verticalOffset:16,horizontalOffset:32,centered:!0,responsiveHeight:!0}),t=e.alignment.vertical;for(let e of[`above`,`below`])this.toggleState(`position-${e}`,e===t);let n=this._triggerElement.getBoundingClientRect().left-e.left+this._triggerElement.clientWidth/2-8;this.style.setProperty(`--_sbb-popover-position-x`,`${e.left}px`),this.style.setProperty(`--_sbb-popover-position-y`,`${e.top}px`),this.style.setProperty(`--_sbb-popover-arrow-position-x`,`${n}px`),this.style.setProperty(`--_sbb-popover-max-height`,e.maxHeight)}dispatchBeforeCloseEvent(e){let t=e?.closeTarget??null;return this.dispatchEvent(new M(`beforeclose`,{closeTarget:t,cancelable:!0}))}dispatchCloseEvent(e){let t=e?.closeTarget??null;return this.dispatchEvent(new M(`close`,{closeTarget:t,cancelable:!1}))}render(){return r`
+`;const j=new Set;var M=class extends Event{get closeTarget(){return this._closeTarget}constructor(e,{closeTarget:t,cancelable:n}){super(e,{cancelable:n}),this._closeTarget=t}};let N=(()=>{let s=m,f,p=[],h=[];return class extends s{constructor(){super(...arguments),this.#e=t(this,p,null),this._nextFocusedElement=t(this,h),this._skipCloseFocus=!1,this._resizeController=new n(this,{target:null,callback:()=>this._setPopoverPosition()}),this._escapableOverlayController=new u(this),this._focusTrapController=new d(this),this._blurTimeout=null,this._pointerDownListener=e=>{this._isPointerDownEventOnPopover=y(this.overlay,e)},this._closeOnBackdropClick=e=>{let t=e.composedPath();!this._isPointerDownEventOnPopover&&!y(this.overlay,e)&&(!this.trigger||!t.includes(this.trigger))&&(this._nextFocusedElement=t.filter(e=>e instanceof window.HTMLElement).find(e=>e.matches(l)),clearTimeout(this.closeTimeout),this.close())}}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(s[Symbol.metadata]??null):void 0;f=[v(),o()],e(this,null,f,{kind:`accessor`,name:`trigger`,static:!1,private:!1,access:{has:e=>`trigger`in e,get:e=>e.trigger,set:(e,t)=>{e.trigger=t}},metadata:t},p,h),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.styles=[S,a(A)]}#e;get trigger(){return this.#e}set trigger(e){this.#e=e}open(){if(!(this.state!==`closed`&&this.state!==`closing`||!this.overlay||!this.dispatchBeforeOpenEvent())){for(let e of j)(e.state===`opened`||e.state===`opening`)&&e.close();this.showPopover?.(),this.state=`opening`,this.inert=!0,this._setPopoverPosition(),this._attachWindowEvents(),this._escapableOverlayController.connect(),this._nextFocusedElement=void 0,this._skipCloseFocus=!1,this._triggerElement&&(this._triggerElement.ariaExpanded=`true`),this._isZeroAnimationDuration()&&this._handleOpening()}}close(e){this.state!==`opened`&&this.state!==`opening`||(this._popoverCloseElement=e,this.dispatchBeforeCloseEvent({closeTarget:e??null})&&(this.state=`closing`,this.inert=!0,this._triggerElement&&(this._triggerElement.ariaExpanded=`false`),this._isZeroAnimationDuration()&&this._handleClosing()))}_isZeroAnimationDuration(){return x(this,`--sbb-popover-animation-duration`)}_handleClosing(){this.state=`closed`,this.hidePopover?.(),this.overlay&&(this._resizeController.unobserve(this.overlay),this.overlay.firstElementChild?.scrollTo(0,0)),this.removeAttribute(`tabindex`),this._skipCloseFocus||(this._nextFocusedElement||this._triggerElement)?.focus(),this._escapableOverlayController.disconnect(),this._openStateController?.abort(),this._focusTrapController.enabled=!1,this.dispatchCloseEvent({closeTarget:this._popoverCloseElement??null})}_handleOpening(){this.state=`opened`,this.inert=!1,this._setPopoverFocus(),this._focusTrapController.enabled=!0,this.overlay&&this._resizeController.observe(this.overlay),this.dispatchOpenEvent()}connectedCallback(){this.popover=`manual`,super.connectedCallback(),this.state=`closed`,j.add(this),this.hasUpdated&&this._configureTrigger()}requestUpdate(e,t,n){super.requestUpdate(e,t,n),!i&&(!e||e===`trigger`||e===`hoverTrigger`)&&this.hasUpdated&&this._configureTrigger()}firstUpdated(e){super.firstUpdated(e),this._configureTrigger()}disconnectedCallback(){super.disconnectedCallback(),this._triggerElement=null,this._triggerAbortController?.abort(),this._openStateController?.abort(),j.delete(this),this._blurTimeout&&clearTimeout(this._blurTimeout)}_configureTrigger(){if(!i){if(this.hydrationRequired){this.hydrationComplete.then(()=>this._configureTrigger());return}this.configureTrigger(this._triggerElement??null)}}configureTrigger(e){this._triggerAbortController?.abort(),w(this._triggerElement),this._triggerElement=this.trigger,this._triggerElement&&(D(this,this._triggerElement,`dialog`,this.state),this._triggerAbortController=new AbortController,this.registerTriggerListeners(this._triggerAbortController.signal))}registerTriggerListeners(e){this._triggerElement.addEventListener(`click`,()=>this.open(),{signal:e})}_attachWindowEvents(){this._openStateController=new AbortController,document.addEventListener(`scroll`,()=>this._setPopoverPosition(),{passive:!0,signal:this._openStateController.signal,capture:!0}),window.addEventListener(`resize`,()=>this._setPopoverPosition(),{passive:!0,signal:this._openStateController.signal}),window.addEventListener(`pointerdown`,this._pointerDownListener,{signal:this._openStateController.signal}),window.addEventListener(`pointerup`,this._closeOnBackdropClick,{signal:this._openStateController.signal})}_closeOnSbbPopoverCloseClick(e){let t=e.composedPath().find((e,t,n)=>e instanceof HTMLElement&&t<n.indexOf(this)&&(e.hasAttribute(`sbb-popover-close`)||e.localName===`sbb-popover-close-button`)&&!e.hasAttribute(`disabled`));t&&(clearTimeout(this.closeTimeout),this.close(t))}_onPopoverAnimationEnd(e){e.animationName===`open`&&this.state===`opening`?this._handleOpening():e.animationName===`close`&&this.state===`closing`&&this._handleClosing()}_setPopoverFocus(){!this._focusTrapController.focusInitialElement()&&this._openStateController&&(this.setAttribute(`tabindex`,`0`),this.focus({preventScroll:!0}),this.addEventListener(`blur`,e=>{this._blurTimeout=setTimeout(()=>{if(document.visibilityState!==`hidden`){if(this.removeAttribute(`tabindex`),this.contains(e.relatedTarget)||e.relatedTarget===this.trigger)return;(this.state===`opened`||this.state===`opening`)&&(this._skipCloseFocus=!0),this.close()}})},{signal:this._openStateController.signal}))}_setPopoverPosition(){if(!this.overlay||!this._triggerElement)return;let e=g(this.overlay,this._triggerElement,this.shadowRoot.querySelector(`.sbb-popover__container`),{verticalOffset:16,horizontalOffset:32,centered:!0,responsiveHeight:!0}),t=e.alignment.vertical;for(let e of[`above`,`below`])this.toggleState(`position-${e}`,e===t);let n=this._triggerElement.getBoundingClientRect().left-e.left+this._triggerElement.clientWidth/2-8;this.style.setProperty(`--_sbb-popover-position-x`,`${e.left}px`),this.style.setProperty(`--_sbb-popover-position-y`,`${e.top}px`),this.style.setProperty(`--_sbb-popover-arrow-position-x`,`${n}px`),this.style.setProperty(`--_sbb-popover-max-height`,e.maxHeight)}dispatchBeforeCloseEvent(e){let t=e?.closeTarget??null;return this.dispatchEvent(new M(`beforeclose`,{closeTarget:t,cancelable:!0}))}dispatchCloseEvent(e){let t=e?.closeTarget??null;return this.dispatchEvent(new M(`close`,{closeTarget:t,cancelable:!1}))}render(){return r`
       <div class="sbb-popover__container">
         <div
           @animationend=${this._onPopoverAnimationEnd}
@@ -16,7 +16,7 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{ResizeControl
         </div>
       </div>
     `}}})();var P=`:host{--_sbb-popover-half-padding:calc(.5 * var(--sbb-popover-padding));position:relative}:host(:is(:state(has-close-button),[state--has-close-button])){--_sbb-popover-close-button-min-height:calc(var(--sbb-button-min-height-size-s) + 2 * var(--sbb-popover-padding));--_sbb-popover-close-button-min-width:calc(var(--_sbb-popover-close-button-min-height) - var(--_sbb-popover-half-padding))}.sbb-popover__content{padding-block:var(--_sbb-popover-half-padding);padding-inline:var(--_sbb-popover-half-padding) var(--_sbb-popover-close-button-min-width,var(--_sbb-popover-half-padding));min-height:var(--_sbb-popover-close-button-min-height)}.sbb-popover__scrollable-content{padding-inline:var(--_sbb-popover-half-padding);padding-block:var(--_sbb-popover-half-padding);max-height:calc(var(--_sbb-popover-max-height) - var(--sbb-spacing-fixed-1x));display:block;overflow:auto}::slotted(sbb-popover-close-button){inset:var(--sbb-popover-padding) var(--sbb-popover-padding) auto auto;position:absolute}
-`;const F=i?!1:matchMedia(p).matches;let I=(()=>{let n=N,i=[],c,l=[],u=[],d,f,p,m=[],g=[];return class extends n{constructor(){super(...arguments),this.#e=(t(this,i),t(this,l,!1)),this._openDelay=t(this,u),this.#t=t(this,m,!1),this._openTimeout=t(this,g),this._overlayAbortController=null,this._onTriggerMouseEnter=()=>{this.state===`closed`||this.state===`closing`?this._openTimeout=setTimeout(()=>{T.reset(),this.open()},this.openDelay):clearTimeout(this.closeTimeout)},this._onTriggerMouseLeave=()=>{this.state===`opened`||this.state===`opening`?this.closeTimeout=setTimeout(()=>this.close(),this.closeDelay):clearTimeout(this._openTimeout)},this._onOverlayMouseEnter=()=>{this.state!==`opening`&&clearTimeout(this.closeTimeout)},this._onOverlayMouseLeave=()=>{this.state!==`opening`&&(this.closeTimeout=setTimeout(()=>this.close(),this.closeDelay))}}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(n[Symbol.metadata]??null):void 0;c=[h(),o({attribute:`hover-trigger`,type:Boolean})],d=[o({attribute:`open-delay`,type:Number})],f=[o({attribute:`close-delay`,type:Number})],p=[s()],e(this,null,c,{kind:`accessor`,name:`hoverTrigger`,static:!1,private:!1,access:{has:e=>`hoverTrigger`in e,get:e=>e.hoverTrigger,set:(e,t)=>{e.hoverTrigger=t}},metadata:t},l,u),e(this,null,d,{kind:`setter`,name:`openDelay`,static:!1,private:!1,access:{has:e=>`openDelay`in e,set:(e,t)=>{e.openDelay=t}},metadata:t},null,i),e(this,null,f,{kind:`setter`,name:`closeDelay`,static:!1,private:!1,access:{has:e=>`closeDelay`in e,set:(e,t)=>{e.closeDelay=t}},metadata:t},null,i),e(this,null,p,{kind:`accessor`,name:`_hoverTrigger`,static:!1,private:!1,access:{has:e=>`_hoverTrigger`in e,get:e=>e._hoverTrigger,set:(e,t)=>{e._hoverTrigger=t}},metadata:t},m,g),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-popover`}static{this.styles=[E,a(P)]}#e;get hoverTrigger(){return this.#e}set hoverTrigger(e){this.#e=e}set openDelay(e){this._openDelay=+e}get openDelay(){return this._openDelay??C().popover?.openDelay??0}set closeDelay(e){this._closeDelay=+e}get closeDelay(){return this._closeDelay??C().popover?.closeDelay??0}#t;get _hoverTrigger(){return this.#t}set _hoverTrigger(e){this.#t=e}configureTrigger(e){let t=this.hoverTrigger&&!F;this.trigger===e&&t===this._hoverTrigger||(this._hoverTrigger!==t&&(this._hoverTrigger=t,this.toggleState(`hover-trigger`,this._hoverTrigger),this._registerOverlayListeners()),super.configureTrigger(e))}_registerOverlayListeners(){this._overlayAbortController?.abort(),this._hoverTrigger&&(this._overlayAbortController=new AbortController,this.overlay?.addEventListener(`mouseenter`,()=>this._onOverlayMouseEnter(),{signal:this._overlayAbortController.signal}),this.overlay?.addEventListener(`mouseleave`,()=>this._onOverlayMouseLeave(),{signal:this._overlayAbortController.signal}))}registerTriggerListeners(e){this._hoverTrigger&&this.trigger?(this.trigger.addEventListener(`mouseenter`,this._onTriggerMouseEnter,{signal:e}),this.trigger.addEventListener(`mouseleave`,this._onTriggerMouseLeave,{signal:e}),this.trigger.addEventListener(`keydown`,e=>{(e.code===`Space`||e.code===`Enter`)&&this.open()},{signal:e}),this.trigger.addEventListener(`mousedown`,e=>{b(e)&&this.open()},{signal:e})):super.registerTriggerListeners(e)}firstUpdated(e){super.firstUpdated(e),this._registerOverlayListeners()}open(){super.open(),this.hoverTrigger&&this.trigger&&O(this.trigger).add(`force-hover`)}close(){super.close(),O(this.trigger)?.delete(`force-hover`)}renderContent(){return r`
+`;const F=!i&&matchMedia(p).matches;let I=(()=>{let n=N,i=[],c,l=[],u=[],d,f,p,m=[],g=[];return class extends n{constructor(){super(...arguments),this.#e=(t(this,i),t(this,l,!1)),this._openDelay=t(this,u),this.#t=t(this,m,!1),this._openTimeout=t(this,g),this._overlayAbortController=null,this._onTriggerMouseEnter=()=>{this.state===`closed`||this.state===`closing`?this._openTimeout=setTimeout(()=>{T.reset(),this.open()},this.openDelay):clearTimeout(this.closeTimeout)},this._onTriggerMouseLeave=()=>{this.state===`opened`||this.state===`opening`?this.closeTimeout=setTimeout(()=>this.close(),this.closeDelay):clearTimeout(this._openTimeout)},this._onOverlayMouseEnter=()=>{this.state!==`opening`&&clearTimeout(this.closeTimeout)},this._onOverlayMouseLeave=()=>{this.state!==`opening`&&(this.closeTimeout=setTimeout(()=>this.close(),this.closeDelay))}}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(n[Symbol.metadata]??null):void 0;c=[h(),o({attribute:`hover-trigger`,type:Boolean})],d=[o({attribute:`open-delay`,type:Number})],f=[o({attribute:`close-delay`,type:Number})],p=[s()],e(this,null,c,{kind:`accessor`,name:`hoverTrigger`,static:!1,private:!1,access:{has:e=>`hoverTrigger`in e,get:e=>e.hoverTrigger,set:(e,t)=>{e.hoverTrigger=t}},metadata:t},l,u),e(this,null,d,{kind:`setter`,name:`openDelay`,static:!1,private:!1,access:{has:e=>`openDelay`in e,set:(e,t)=>{e.openDelay=t}},metadata:t},null,i),e(this,null,f,{kind:`setter`,name:`closeDelay`,static:!1,private:!1,access:{has:e=>`closeDelay`in e,set:(e,t)=>{e.closeDelay=t}},metadata:t},null,i),e(this,null,p,{kind:`accessor`,name:`_hoverTrigger`,static:!1,private:!1,access:{has:e=>`_hoverTrigger`in e,get:e=>e._hoverTrigger,set:(e,t)=>{e._hoverTrigger=t}},metadata:t},m,g),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-popover`}static{this.styles=[E,a(P)]}#e;get hoverTrigger(){return this.#e}set hoverTrigger(e){this.#e=e}set openDelay(e){this._openDelay=+e}get openDelay(){return this._openDelay??C().popover?.openDelay??0}set closeDelay(e){this._closeDelay=+e}get closeDelay(){return this._closeDelay??C().popover?.closeDelay??0}#t;get _hoverTrigger(){return this.#t}set _hoverTrigger(e){this.#t=e}configureTrigger(e){let t=this.hoverTrigger&&!F;this.trigger===e&&t===this._hoverTrigger||(this._hoverTrigger!==t&&(this._hoverTrigger=t,this.toggleState(`hover-trigger`,this._hoverTrigger),this._registerOverlayListeners()),super.configureTrigger(e))}_registerOverlayListeners(){this._overlayAbortController?.abort(),this._hoverTrigger&&(this._overlayAbortController=new AbortController,this.overlay?.addEventListener(`mouseenter`,()=>this._onOverlayMouseEnter(),{signal:this._overlayAbortController.signal}),this.overlay?.addEventListener(`mouseleave`,()=>this._onOverlayMouseLeave(),{signal:this._overlayAbortController.signal}))}registerTriggerListeners(e){this._hoverTrigger&&this.trigger?(this.trigger.addEventListener(`mouseenter`,this._onTriggerMouseEnter,{signal:e}),this.trigger.addEventListener(`mouseleave`,this._onTriggerMouseLeave,{signal:e}),this.trigger.addEventListener(`keydown`,e=>{(e.code===`Space`||e.code===`Enter`)&&this.open()},{signal:e}),this.trigger.addEventListener(`mousedown`,e=>{b(e)&&this.open()},{signal:e})):super.registerTriggerListeners(e)}firstUpdated(e){super.firstUpdated(e),this._registerOverlayListeners()}open(){super.open(),this.hoverTrigger&&this.trigger&&O(this.trigger).add(`force-hover`)}close(){super.close(),O(this.trigger)?.delete(`force-hover`)}renderContent(){return r`
       <span class="sbb-popover__scrollable-content sbb-scrollbar">
         <slot
           @slotchange=${()=>this.toggleState(`has-close-button`,!!this.querySelector(`sbb-popover-close-button`))}

package/safety-theme.css

@@ -1313,6 +1313,10 @@ summary {
   --sbb-divider-color: var(--sbb-background-color-4);
   --sbb-divider-color-negative: var(--sbb-background-color-4-negative);
   --sbb-divider-border-width: var(--sbb-border-width-1x);
+  --sbb-download-gap: var(--sbb-spacing-fixed-3x);
+  --sbb-download-label-color: var(--sbb-color-3);
+  --sbb-download-info-color: var(--sbb-color-granite);
+  --sbb-download-info-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
   --sbb-expansion-panel-background-color: var(--sbb-background-color-1);
   --sbb-expansion-panel-background-color-hover: var(--sbb-background-color-3);
   --sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);
@@ -1582,12 +1586,8 @@ summary {
   --sbb-options-panel-margin-block-start: var(--sbb-spacing-fixed-2x);
   --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
   --sbb-overlay-background-color: var(--sbb-background-color-3);
-  --sbb-overlay-display: none;
   --sbb-overlay-height: 100%;
-  --sbb-overlay-inset: 0 auto auto 0;
   --sbb-overlay-animation-easing: ease;
-  --sbb-overlay-pointer-events: none;
-  --sbb-overlay-container-display: none;
   --sbb-paginator-color: var(--sbb-color-metal);
   --sbb-paginator-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
   --sbb-paginator-height: var(--sbb-size-element-m);
@@ -1720,7 +1720,15 @@ summary {
   --sbb-stepper-marker-color: var(--sbb-color-3);
   --sbb-table-border-color: var(--sbb-color-cloud);
   --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
+  --sbb-table-border-color-hover: var(--sbb-color-aluminium);
+  --sbb-table-border-color-hover: light-dark(
+    var(--sbb-color-aluminium),
+    var(--sbb-table-border-color)
+  );
+  --sbb-table-border-color-selected: var(--sbb-background-color-4-inverted);
+  --sbb-table-border-width: var(--sbb-border-width-1x);
   --sbb-table-background-color: var(--sbb-background-color-1);
+  --sbb-table-background-color-hover: var(--sbb-background-color-4);
   --sbb-table-row-striped-color: var(--sbb-background-color-3);
   --sbb-table-color: var(--sbb-color-1);
   --sbb-table-caption-color: var(--sbb-color-granite);
@@ -1977,6 +1985,8 @@ summary {
     --sbb-card-border-width: var(--sbb-border-width-2x);
     --sbb-card-badge-border-display: block;
     --sbb-card-badge-inline-border-display: none;
+    --sbb-download-label-color: CanvasText;
+    --sbb-download-info-color: CanvasText;
     --sbb-expansion-panel-header-text-color: ButtonText;
     --sbb-form-field-border-color: ButtonBorder;
     --sbb-header-action-border-color: CanvasText;
@@ -2248,6 +2258,10 @@ sbb-card .sbb-action {
   pointer-events: all;
 }
 
+sbb-carousel-item sbb-image {
+  border-radius: unset;
+}
+
 sbb-container > [slot=image]:is(sbb-image, img),
 sbb-container > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;
@@ -2546,7 +2560,7 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
 }
 
 :is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) {
-  --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
+  --sbb-table-border: var(--sbb-table-border-width) solid var(--sbb-table-border-color);
   --sbb-table-sticky-shadow-transition-duration: var(
     --sbb-disable-animation-duration,
     var(--sbb-animation-duration-6x)
@@ -2630,7 +2644,10 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
 sbb-table-wrapper[negative] .sbb-table,
 .sbb-table--negative {
   --sbb-table-border-color: var(--sbb-color-anthracite);
+  --sbb-table-border-color-hover: var(--sbb-table-border-color);
+  --sbb-table-border-color-selected: var(--sbb-color-cloud);
   --sbb-table-background-color: var(--sbb-background-color-1-negative);
+  --sbb-table-background-color-hover: var(--sbb-background-color-4-negative);
   --sbb-table-color: var(--sbb-color-1-negative);
   --sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
   --sbb-table-caption-color: var(--sbb-color-cement);
@@ -2644,6 +2661,26 @@ sbb-table-wrapper[negative] .sbb-table,
   background-color: var(--sbb-table-background-color);
 }
 
+.sbb-table--hover tbody tr:hover :is(th, td) {
+  background-color: var(--sbb-table-background-color-hover);
+  border-color: var(--sbb-table-border-color-hover);
+}
+.sbb-table--hover :is(thead:has(+ tbody tr:first-of-type:hover) tr:last-of-type :is(th, td),
+tbody tr:has(+ tr:hover) :is(th, td)) {
+  border-block-end-color: var(--sbb-table-border-color-hover);
+}
+
+tr.sbb-table--selected :is(th, td) {
+  position: relative;
+}
+tr.sbb-table--selected :is(th, td)::after {
+  content: "";
+  position: absolute;
+  inset: 0 0 calc(-1 * var(--sbb-table-border-width));
+  pointer-events: none;
+  border-block-end: var(--sbb-table-border-width) solid var(--sbb-table-border-color-selected);
+}
+
 .sbb-table--theme-iron {
   --sbb-table-cell-color: var(--sbb-color-4);
 }
@@ -2766,6 +2803,9 @@ sbb-tab-nav-bar .sbb-tab-amount {
   filter: brightness(var(--sbb-teaser-image-brightness, 1));
   transition: filter, scale var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
 }
+:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) .sbb-figure {
+  max-width: 100%;
+}
 
 sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;

package/signet.pure.js

@@ -2,22 +2,22 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,uns
 `;let c=(()=>{let c=a,l,u=[],d=[],f,p=[],m=[];return class extends c{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(c[Symbol.metadata]??null):void 0;l=[i({attribute:`protective-room`,reflect:!0})],f=[o(),i({attribute:`accessibility-label`})],e(this,null,l,{kind:`accessor`,name:`protectiveRoom`,static:!1,private:!1,access:{has:e=>`protectiveRoom`in e,get:e=>e.protectiveRoom,set:(e,t)=>{e.protectiveRoom=t}},metadata:t},u,d),e(this,null,f,{kind:`accessor`,name:`accessibilityLabel`,static:!1,private:!1,access:{has:e=>`accessibilityLabel`in e,get:e=>e.accessibilityLabel,set:(e,t)=>{e.accessibilityLabel=t}},metadata:t},p,m),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-signet`}static{this.styles=[r(s)]}#e=t(this,u,`ideal`);get protectiveRoom(){return this.#e}set protectiveRoom(e){this.#e=e}#t=(t(this,d),t(this,p,`Logo`));get accessibilityLabel(){return this.#t}set accessibilityLabel(e){this.#t=e}render(){return n`
       <span class="sbb-signet__svg-container">
         ${this.protectiveRoom===`panel`?n`
-              <svg focusable="false" viewBox="0 0 143 48" xmlns="http://www.w3.org/2000/svg">
-                <title .textContent=${this.accessibilityLabel}></title>
-                <path id="sbb-signet__panel" stroke-width="1" d="M1 47h141V1H1v46z"></path>
-                <path
-                  id="sbb-signet__icon"
-                  d="M87 40h9.3L83.8 27.7h15.5V40h7.4V27.7h15.6L109.7 40h9.3l16-16-15.9-16h-9.3l12.5 12.3h-15.6V8h-7.4v12.3H83.8L96.3 8H87L71 24l16 16z"
-                ></path>
-              </svg>
-            `:n`
-              <svg focusable="false" viewBox="0 0 80 40" xmlns="http://www.w3.org/2000/svg">
-                <title .textContent=${this.accessibilityLabel}></title>
-                <path
-                  id="sbb-signet__icon"
-                  d="M20.0265 40H31.6821L16 24.6154H35.3907V40H44.6093V24.6154H64.106L48.4238 40H60.0795L80 20.0531L60.0795 0H48.4238L64.106 15.3846H44.6093V0H35.3907V15.3846H16L31.6821 0H20.0265L0 20.0531L20.0265 40Z"
-                ></path>
-              </svg>
-            `}
+                <svg focusable="false" viewBox="0 0 143 48" xmlns="http://www.w3.org/2000/svg">
+                  <title .textContent=${this.accessibilityLabel}></title>
+                  <path id="sbb-signet__panel" stroke-width="1" d="M1 47h141V1H1v46z"></path>
+                  <path
+                    id="sbb-signet__icon"
+                    d="M87 40h9.3L83.8 27.7h15.5V40h7.4V27.7h15.6L109.7 40h9.3l16-16-15.9-16h-9.3l12.5 12.3h-15.6V8h-7.4v12.3H83.8L96.3 8H87L71 24l16 16z"
+                  ></path>
+                </svg>
+              `:n`
+                <svg focusable="false" viewBox="0 0 80 40" xmlns="http://www.w3.org/2000/svg">
+                  <title .textContent=${this.accessibilityLabel}></title>
+                  <path
+                    id="sbb-signet__icon"
+                    d="M20.0265 40H31.6821L16 24.6154H35.3907V40H44.6093V24.6154H64.106L48.4238 40H60.0795L80 20.0531L60.0795 0H48.4238L64.106 15.3846H44.6093V0H35.3907V15.3846H16L31.6821 0H20.0265L0 20.0531L20.0265 40Z"
+                  ></path>
+                </svg>
+              `}
       </span>
     `}constructor(){super(...arguments),t(this,m)}}})();export{c as SbbSignetElement};