@sbb-esta/lyne-elements 5.1.0 → 5.3.0

package/expansion-panel.pure.js

@@ -6,12 +6,12 @@ import{html as e,nothing as t,unsafeCSS as n}from"lit";import{SbbButtonBaseEleme
         <slot></slot>
       </span>
       ${this.disabled?t:e`<span class="sbb-expansion-panel-header__toggle">
-            <sbb-icon
-              name="chevron-small-down-medium"
-              class="sbb-expansion-panel-header__toggle-icon"
-            >
-            </sbb-icon>
-          </span>`}
+              <sbb-icon
+                name="chevron-small-down-medium"
+                class="sbb-expansion-panel-header__toggle-icon"
+              >
+              </sbb-icon>
+            </span>`}
     `}},b=`:host{--sbb-expansion-panel-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--sbb-expansion-panel-border-color:var(--sbb-border-color-4-inverted);--sbb-expansion-panel-border-width:var(--sbb-border-width-1x);--sbb-expansion-panel-border-block-start-color:var(--sbb-expansion-panel-border-color);--sbb-expansion-panel-border-block-start-width:var(--sbb-expansion-panel-border-width);--sbb-expansion-panel-start-end-radius:var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-start-start-radius:var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-end-radius:var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-start-radius:var(--sbb-expansion-panel-border-radius);background-color:var(--sbb-expansion-panel-background-color);border:var(--sbb-expansion-panel-border-width) solid var(--sbb-expansion-panel-border-color);border-block-start-color:var(--sbb-expansion-panel-border-block-start-color);border-block-start-width:var(--sbb-expansion-panel-border-block-start-width);border-radius:var(--sbb-expansion-panel-start-start-radius) var(--sbb-expansion-panel-start-end-radius) var(--sbb-expansion-panel-end-end-radius) var(--sbb-expansion-panel-end-start-radius);background-clip:padding-box;display:block}:host([size=s]){--sbb-expansion-panel-title-gap:var(--sbb-expansion-panel-title-gap-s)}:host([size=l]){--sbb-expansion-panel-title-gap:var(--sbb-expansion-panel-title-gap-l)}:host(:not([size])){--sbb-expansion-panel-title-gap:var(--sbb-expansion-panel-title-gap-default)}@media (forced-colors:active){:host([disabled]){--sbb-expansion-panel-border-color:GrayText;--sbb-expansion-panel-border-block-start-color:GrayText}}:host([expanded]){--_sbb-expansion-panel-display-expanded:grid}:host(:is(:state(accordion),[state--accordion]):is(:state(accordion-first),[state--accordion-first])){--sbb-expansion-panel-start-end-radius:var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-start-start-radius:var(--sbb-expansion-panel-border-radius)}:host(:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))){--sbb-expansion-panel-border-block-start-width:0;--sbb-expansion-panel-border-block-start-color:transparent;--sbb-expansion-panel-start-end-radius:0;--sbb-expansion-panel-start-start-radius:0}:host(:is(:state(accordion),[state--accordion]):is(:state(accordion-last),[state--accordion-last])){--sbb-expansion-panel-end-end-radius:var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-start-radius:var(--sbb-expansion-panel-border-radius)}:host(:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-last),[state--accordion-last]))){--sbb-expansion-panel-end-end-radius:0;--sbb-expansion-panel-end-start-radius:0}:host([color=white]){--sbb-expansion-panel-background-color:var(--sbb-background-color-1);--sbb-expansion-panel-background-color-hover:var(--sbb-background-color-3)}:host([color=milk]){--sbb-expansion-panel-background-color:var(--sbb-background-color-3);--sbb-expansion-panel-background-color-hover:var(--sbb-background-color-1)}:host([borderless]){--sbb-expansion-panel-border-width:0;--sbb-expansion-panel-border-color:transparent;--sbb-expansion-panel-border-block-start-width:0;--sbb-expansion-panel-border-block-start-color:transparent}@media (forced-colors:active){:host([borderless]){--sbb-expansion-panel-border-width:var(--sbb-border-width-1x);--sbb-expansion-panel-border-block-start-width:var(--sbb-expansion-panel-border-width)}}:host([borderless]:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))){--sbb-expansion-panel-border-block-start-width:var(--sbb-spacing-fixed-1x)}@media (forced-colors:active){:host([borderless]:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))){--sbb-expansion-panel-border-block-start-width:0}}:host(:not([disabled]):is(:state(toggle-hover),[state--toggle-hover])){background-color:var(--sbb-expansion-panel-background-color-hover)}@media (forced-colors:active){:host(:not([disabled]):is(:state(toggle-hover),[state--toggle-hover])){--sbb-expansion-panel-border-color:Highlight;--sbb-expansion-panel-border-block-start-color:Highlight}}.sbb-expansion-panel__header{margin:0}.sbb-expansion-panel__content-wrapper{display:var(--_sbb-expansion-panel-display-expanded,none);opacity:0;grid-template-rows:0fr}:host(:is(:state(state-opened),[state--state-opened])) .sbb-expansion-panel__content-wrapper{opacity:1;grid-template-rows:1fr}:host(:is(:state(state-opening),[state--state-opening])) .sbb-expansion-panel__content-wrapper{animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing);animation-delay:0s, var(--sbb-expansion-panel-animation-duration)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-expansion-panel__content-wrapper{visibility:hidden;animation-name:close;animation-duration:var(--sbb-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing);display:grid}.sbb-expansion-panel__content{min-width:0;min-height:0}@keyframes open{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes open-opacity{0%{opacity:0}to{opacity:1}}@keyframes close{0%{opacity:1;grid-template-rows:1fr}to{opacity:0;grid-template-rows:0fr}}
 `;let x=0,S=(()=>{let r=a,i=[],o,s=[],c=[],f,g=[],_=[],v,y,S,C=[],w=[],T,E=[],D=[];return class extends r{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;o=[h({attribute:`title-level`})],f=[h({reflect:!0})],v=[h({reflect:!0,type:Boolean})],y=[h({reflect:!0,type:Boolean})],S=[l(),h({reflect:!0,type:Boolean})],T=[h({reflect:!0})],p(this,null,o,{kind:`accessor`,name:`titleLevel`,static:!1,private:!1,access:{has:e=>`titleLevel`in e,get:e=>e.titleLevel,set:(e,t)=>{e.titleLevel=t}},metadata:e},s,c),p(this,null,f,{kind:`accessor`,name:`color`,static:!1,private:!1,access:{has:e=>`color`in e,get:e=>e.color,set:(e,t)=>{e.color=t}},metadata:e},g,_),p(this,null,v,{kind:`setter`,name:`expanded`,static:!1,private:!1,access:{has:e=>`expanded`in e,set:(e,t)=>{e.expanded=t}},metadata:e},null,i),p(this,null,y,{kind:`setter`,name:`disabled`,static:!1,private:!1,access:{has:e=>`disabled`in e,set:(e,t)=>{e.disabled=t}},metadata:e},null,i),p(this,null,S,{kind:`accessor`,name:`borderless`,static:!1,private:!1,access:{has:e=>`borderless`in e,get:e=>e.borderless,set:(e,t)=>{e.borderless=t}},metadata:e},C,w),p(this,null,T,{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:e},E,D),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-expansion-panel`}static{this.styles=[n(b)]}static{this.events={beforeopen:`beforeopen`,open:`open`,beforeclose:`beforeclose`,close:`close`}}#e;get titleLevel(){return this.#e}set titleLevel(e){this.#e=e}#t;get color(){return this.#t}set color(e){this.#t=e}set expanded(e){this._expanded=e,this._onExpandedChange()}get expanded(){return this._expanded}set disabled(e){this._disabled=e,this._updateDisabledOnHeader(this._disabled)}get disabled(){return this._disabled}#n;get borderless(){return this.#n}set borderless(e){this.#n=e}#r;get size(){return this.#r}set size(e){this.#r=e}set _state(e){this._stateInternal&&this.internals.states.delete(`state-${this._stateInternal}`),this._stateInternal=e,this._stateInternal&&this.internals.states.add(`state-${this._stateInternal}`)}get _state(){return this._stateInternal}constructor(){super(),this.#e=(m(this,i),m(this,s,null)),this.#t=(m(this,c),m(this,g,`white`)),this._expanded=(m(this,_),!1),this._disabled=!1,this.#n=m(this,C,!1),this.#r=(m(this,w),m(this,E,null)),this._stateInternal=m(this,D),this._progressiveId=`-${++x}`,this._state=`closed`,this.addEventListener?.(`toggleexpanded`,e=>{e.target===this._headerRef&&this._toggleExpanded()})}connectedCallback(){super.connectedCallback(),this.toggleState(`accordion`,!!this.closest?.(`sbb-accordion`))}disconnectedCallback(){super.disconnectedCallback(),this.internals.states.delete(`accordion`)}_toggleExpanded(){this.expanded=!this.expanded}_onExpandedChange(){this._headerRef?.setAttribute(`aria-expanded`,String(this.expanded)),this._contentRef?.setAttribute(`aria-hidden`,String(!this.expanded)),this.expanded?this._open():this._state===`opened`&&this._close()}_open(){this._state=`opening`,this.dispatchEvent(new Event(`beforeopen`)),(!this.hasUpdated||this._isZeroAnimationDuration())&&this._handleOpening()}_close(){this._state=`closing`,this.dispatchEvent(new Event(`beforeclose`)),this._isZeroAnimationDuration()&&this._handleClosing()}_isZeroAnimationDuration(){return u(this,`--sbb-expansion-panel-animation-duration`)}_handleOpening(){this._state=`opened`,this.dispatchEvent(new Event(`open`))}_handleClosing(){this._state=`closed`,this.dispatchEvent(new Event(`close`))}_updateDisabledOnHeader(e){this._headerRef&&(this._headerRef.disabled=e)}_handleSlotchange(){let e=Array.from(this.children??[]),t=e.find(e=>e.localName===`sbb-expansion-panel-header`),n=e.find(e=>e.localName===`sbb-expansion-panel-content`);this._headerRef===t&&this._contentRef===n||(t&&this._headerRef!==t&&(t.id||=`sbb-expansion-panel-header${this._progressiveId}`,t.setAttribute(`aria-expanded`,String(this.expanded)),t.toggleAttribute(`disabled`,this.disabled)),n&&this._contentRef!==n&&(n.id||=`sbb-expansion-panel-content${this._progressiveId}`,n.setAttribute(`aria-hidden`,String(!this.expanded))),this._headerRef=t,this._contentRef=n,this._headerRef&&this._contentRef&&(this._headerRef.setAttribute(`aria-controls`,this._contentRef.id),this._contentRef.setAttribute(`aria-labelledby`,this._headerRef.id),d(this._contentRef).toggle(`icon-space`,d(this._headerRef).has(`icon`))))}_onAnimationEnd(e){e.animationName===`open-opacity`&&this._state===`opening`?this._handleOpening():e.animationName===`close`&&this._state===`closing`&&this._handleClosing()}render(){return e`
       <div

package/file-selector.pure.js

@@ -1,5 +1,5 @@
 import{__esDecorate as e,__runInitializers as t}from"tslib";import{nothing as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{ref as a}from"lit/directives/ref.js";import{html as o,unsafeStatic as s}from"lit/static-html.js";import{SbbSecondaryButtonElement as c,SbbSecondaryButtonStaticElement as l}from"./button.pure.js";import{SbbDisabledMixin as u,SbbElement as d,SbbFormAssociatedMixin as f,SbbLanguageController as p,forceType as m,forwardEvent as h,i18nFileSelectorButtonLabel as g,i18nFileSelectorButtonLabelMultiple as _,i18nFileSelectorCurrentlySelected as v,i18nFileSelectorDeleteFile as y,i18nFileSelectorSubtitleLabel as b,i18nFileSelectorSubtitleLabelMultiple as x,sbbInputModalityDetector as S,screenReaderOnlyStyles as C,ɵstateController as w}from"./core.js";import{SbbIconElement as T}from"./icon.pure.js";var E=`:host{--sbb-file-selector-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));width:20rem;display:block}@media (forced-colors:active){:host(:disabled){--sbb-file-selector-color:GrayText;--sbb-file-selector-subtitle-color:GrayText;--sbb-file-selector-border-color:GrayText}}:host(:is(:state(active),[state--active])){--sbb-file-selector-background-color:var(--sbb-background-color-3);--sbb-file-selector-border-color:light-dark(var(--sbb-color-storm),var(--sbb-color-anthracite))}@media (forced-colors:active){:host(:is(:state(active),[state--active])){--sbb-file-selector-border-color:Highlight}}.sbb-file-selector__input-container{-webkit-tap-highlight-color:transparent;flex-direction:column;display:flex}.sbb-file-selector__file-list{row-gap:var(--sbb-spacing-fixed-3x);padding-inline:0;padding-block:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-1x);flex-direction:column;margin-block:0;display:flex}.sbb-file-selector__file{gap:var(--sbb-spacing-fixed-4x);line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size-s);justify-content:space-between;align-items:center;display:flex}.sbb-file-selector__file-details{justify-content:space-between;gap:var(--sbb-spacing-fixed-4x);flex:1;display:flex;overflow:auto}.sbb-file-selector__file-name{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.sbb-file-selector__file-size{white-space:nowrap;color:light-dark(var(--sbb-color-metal),var(--sbb-color-smoke))}:host(:not(:is(:state(slotted-error),[state--slotted-error]))) .sbb-file-selector__error{display:none}
-`,D=class extends Event{get files(){return this._files}constructor(e){super(`filechanged`,{bubbles:!0,composed:!0}),this._files=Object.freeze(e||[])}};const O=l=>(()=>{let d=u(f(l)),b=[],x,T=[],O=[],k,A=[],j=[],M,N=[],P=[],F,I=[],L=[],R,z=[],B=[],V,H;return class extends d{constructor(){super(...arguments),this.#e=(t(this,b),t(this,T,null)),this.#t=(t(this,O),t(this,A,!1)),this.#n=(t(this,j),t(this,N,`default`)),this.#r=(t(this,P),t(this,I,``)),this.#i=(t(this,L),t(this,z,``)),this._files=(t(this,B),[]),this._suffixes=[`B`,`kB`,`MB`,`GB`,`TB`],this.language=new p(this),this._counter=0}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(d[Symbol.metadata]??null):void 0;x=[i({reflect:!0})],k=[m(),i({type:Boolean})],M=[i({attribute:`multiple-mode`})],F=[m(),i()],R=[m(),i({attribute:`accessibility-label`})],V=[i({attribute:!1})],H=[i({attribute:!1})],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},T,O),e(this,null,k,{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},A,j),e(this,null,M,{kind:`accessor`,name:`multipleMode`,static:!1,private:!1,access:{has:e=>`multipleMode`in e,get:e=>e.multipleMode,set:(e,t)=>{e.multipleMode=t}},metadata:t},N,P),e(this,null,F,{kind:`accessor`,name:`accept`,static:!1,private:!1,access:{has:e=>`accept`in e,get:e=>e.accept,set:(e,t)=>{e.accept=t}},metadata:t},I,L),e(this,null,R,{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},z,B),e(this,null,V,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,b),e(this,null,H,{kind:`setter`,name:`files`,static:!1,private:!1,access:{has:e=>`files`in e,set:(e,t)=>{e.files=t}},metadata:t},null,b),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementDependencies=[c]}static{this.events={filechanged:`filechanged`}}static{this.styles=[C,r(E)]}#e;get size(){return this.#e}set size(e){this.#e=e}#t;get multiple(){return this.#t}set multiple(e){this.#t=e}#n;get multipleMode(){return this.#n}set multipleMode(e){this.#n=e}#r;get accept(){return this.#r}set accept(e){this.#r=e}#i;get accessibilityLabel(){return this.#i}set accessibilityLabel(e){this.#i=e}set value(e){this._hiddenInput.value=e??``,e||(this.files=[])}get value(){return this._hiddenInput?.value}set files(e){this._files=e??[];let t=new DataTransfer;this.files.forEach(e=>t.items.add(e)),this._hiddenInput.files=t.files,this.updateFormValue()}get files(){return this._files}get type(){return`file`}formResetCallback(){this.files=[]}formStateRestoreCallback(e,t){e&&(this.files=e.getAll(this.name))}updateFormValue(){let e=new FormData;this.files.forEach(t=>e.append(this.name,t)),this.internals.setFormValue(e)}_checkFileEquality(e,t){return e.name===t.name&&e.size===t.size&&e.lastModified===t.lastModified}_onFocus(){S.mostRecentModality===`keyboard`&&w(this.loadButton).add(`focus-visible`)}_onBlur(){w(this.loadButton).delete(`focus-visible`)}_readFiles(e){let t=e.target;t.files&&this.createFileList(t.files),h(e,this)}createFileList(e){let t=Array.from(e);!this.multiple&&e.length>1||this.accept&&t.some(e=>!this.accept.split(`,`).some(t=>e.name.endsWith(t.trim())))||(!this.multiple||this.multipleMode!==`persistent`||this.files.length===0?this.files=t:this.files=t.filter(e=>this.files.findIndex(t=>this._checkFileEquality(e,t))===-1).concat(this.files),this._updateA11yLiveRegion(),this._dispatchFileChangedEvent())}getButtonLabel(){return this.multiple?_[this.language.current]:g[this.language.current]}_removeFile(e){this.files=this.files.filter(t=>!this._checkFileEquality(e,t)),this._updateA11yLiveRegion(),this.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0})),this._dispatchFileChangedEvent()}_dispatchFileChangedEvent(){let e=this.files;this.dispatchEvent(new D(e))}_formatFileSize(e){let t=Math.floor(Math.log(e)/Math.log(1024));return`${(e/1024**t).toFixed(0)} ${this._suffixes[t]}`}_updateA11yLiveRegion(){this._liveRegion.innerText=v(this.files.map(e=>e.name))[this.language.current]}_renderFileList(){let e=this.files.length>1?{WRAPPER:`ul`,ELEMENT:`li`}:{WRAPPER:`div`,ELEMENT:`span`};return o`
+`,D=class extends Event{get files(){return this._files}constructor(e){super(`filechanged`,{bubbles:!0,composed:!0}),this._files=Object.freeze(e||[])}};const O=l=>(()=>{let d=u(f(l)),b=[],x,T=[],O=[],k,A=[],j=[],M,N=[],P=[],F,I=[],L=[],R,z=[],B=[],V,H;return class extends d{constructor(){super(...arguments),this.#e=(t(this,b),t(this,T,null)),this.#t=(t(this,O),t(this,A,!1)),this.#n=(t(this,j),t(this,N,`default`)),this.#r=(t(this,P),t(this,I,``)),this.#i=(t(this,L),t(this,z,``)),this._files=(t(this,B),[]),this._suffixes=[`B`,`kB`,`MB`,`GB`,`TB`],this.language=new p(this),this._counter=0}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(d[Symbol.metadata]??null):void 0;x=[i({reflect:!0})],k=[m(),i({type:Boolean})],M=[i({attribute:`multiple-mode`})],F=[m(),i()],R=[m(),i({attribute:`accessibility-label`})],V=[i({attribute:!1})],H=[i({attribute:!1})],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},T,O),e(this,null,k,{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},A,j),e(this,null,M,{kind:`accessor`,name:`multipleMode`,static:!1,private:!1,access:{has:e=>`multipleMode`in e,get:e=>e.multipleMode,set:(e,t)=>{e.multipleMode=t}},metadata:t},N,P),e(this,null,F,{kind:`accessor`,name:`accept`,static:!1,private:!1,access:{has:e=>`accept`in e,get:e=>e.accept,set:(e,t)=>{e.accept=t}},metadata:t},I,L),e(this,null,R,{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},z,B),e(this,null,V,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,b),e(this,null,H,{kind:`setter`,name:`files`,static:!1,private:!1,access:{has:e=>`files`in e,set:(e,t)=>{e.files=t}},metadata:t},null,b),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementDependencies=[c]}static{this.events={filechanged:`filechanged`}}static{this.styles=[C,r(E)]}#e;get size(){return this.#e}set size(e){this.#e=e}#t;get multiple(){return this.#t}set multiple(e){this.#t=e}#n;get multipleMode(){return this.#n}set multipleMode(e){this.#n=e}#r;get accept(){return this.#r}set accept(e){this.#r=e}#i;get accessibilityLabel(){return this.#i}set accessibilityLabel(e){this.#i=e}set value(e){this._hiddenInput.value=e??``,e||(this.files=[])}get value(){return this._hiddenInput?.value}set files(e){this._files=e??[];let t=new DataTransfer;this.files.forEach(e=>t.items.add(e)),this._hiddenInput.files=t.files,this.updateFormValue()}get files(){return this._files}get type(){return`file`}formResetCallback(){this.files=[]}formStateRestoreCallback(e,t){e&&(this.files=e.getAll(this.name))}updateFormValue(){let e=new FormData;this.files.forEach(t=>e.append(this.name,t)),this.internals.setFormValue(e)}_checkFileEquality(e,t){return e.name===t.name&&e.size===t.size&&e.lastModified===t.lastModified}_onFocus(){S.mostRecentModality===`keyboard`&&w(this.loadButton).add(`focus-visible`)}_onBlur(){w(this.loadButton).delete(`focus-visible`)}_readFiles(e){let t=e.target;t.files&&this.createFileList(t.files),h(e,this)}createFileList(e,t=!1){let n=Array.from(e);!this.multiple&&e.length>1||this.accept&&n.some(e=>!this.accept.split(`,`).some(t=>e.name.endsWith(t.trim())))||(!this.multiple||this.multipleMode!==`persistent`||this.files.length===0?this.files=n:this.files=n.filter(e=>this.files.findIndex(t=>this._checkFileEquality(e,t))===-1).concat(this.files),this._updateA11yLiveRegion(),this._dispatchFileChangedEvent(),t&&this._dispatchNativeEvents())}getButtonLabel(){return this.multiple?_[this.language.current]:g[this.language.current]}_removeFile(e){this.files=this.files.filter(t=>!this._checkFileEquality(e,t)),this._updateA11yLiveRegion(),this._dispatchNativeEvents(),this._dispatchFileChangedEvent()}_dispatchNativeEvents(){this.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}_dispatchFileChangedEvent(){let e=this.files;this.dispatchEvent(new D(e))}_formatFileSize(e){let t=Math.floor(Math.log(e)/Math.log(1024));return`${(e/1024**t).toFixed(0)} ${this._suffixes[t]}`}_updateA11yLiveRegion(){this._liveRegion.innerText=v(this.files.map(e=>e.name))[this.language.current]}_renderFileList(){let e=this.files.length>1?{WRAPPER:`ul`,ELEMENT:`li`}:{WRAPPER:`div`,ELEMENT:`span`};return o`
       <${s(e.WRAPPER)} class="sbb-file-selector__file-list">
         ${this.files.map(t=>o`
             <${s(e.ELEMENT)} class="sbb-file-selector__file">
@@ -15,7 +15,7 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{nothing as n,
               ></sbb-secondary-button>
             </${s(e.ELEMENT)}>`)}
       </${s(e.WRAPPER)}>
-    `}_onDragEnter(e){this._counter++,!this.disabled&&!this.formDisabled&&(this._setDragState(e.target,!0),this._blockEvent(e))}_onDragLeave(e){this._counter--,!this.disabled&&!this.formDisabled&&e.target===this._dragTarget&&this._counter===0&&(this._setDragState(),this._blockEvent(e))}_onFileDrop(e){this._counter=0,!this.disabled&&!this.formDisabled&&(this._setDragState(),this._blockEvent(e),this.createFileList(e.dataTransfer.files))}_blockEvent(e){e.stopPropagation(),e.preventDefault()}_setDragState(e=void 0,t=!1){this._dragTarget=e,this.toggleState(`active`,t),w(this.loadButton).toggle(`active`,t)}render(){let e=this.accessibilityLabel?`${this.getButtonLabel()} - ${this.accessibilityLabel}`:void 0;return o`
+    `}_onDragEnter(e){this._counter++,!this.disabled&&!this.formDisabled&&(this._setDragState(e.target,!0),this._blockEvent(e))}_onDragLeave(e){this._counter--,!this.disabled&&!this.formDisabled&&e.target===this._dragTarget&&this._counter===0&&(this._setDragState(),this._blockEvent(e))}_onFileDrop(e){this._counter=0,!this.disabled&&!this.formDisabled&&(this._setDragState(),this._blockEvent(e),this.createFileList(e.dataTransfer.files,!0))}_blockEvent(e){e.stopPropagation(),e.preventDefault()}_setDragState(e=void 0,t=!1){this._dragTarget=e,this.toggleState(`active`,t),w(this.loadButton).toggle(`active`,t)}render(){let e=this.accessibilityLabel?`${this.getButtonLabel()} - ${this.accessibilityLabel}`:void 0;return o`
         <div
           class="sbb-file-selector__input-container"
           @dragenter=${this._onDragEnter}

package/flip-card.pure.js

@@ -10,7 +10,7 @@ import{MutationController as e}from"@lit-labs/observers/mutation-controller.js";
         <slot name="image"></slot>
       </div>
     `}constructor(){super(...arguments),h(this,o)}}})();var T=`:host{--sbb-flip-card-summary-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-5x));--sbb-flip-card-summary-transition-delay:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));--sbb-flip-card-details-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));display:block;position:relative}@media (any-hover:hover){:host(:hover){--sbb-flip-card-background-color:light-dark(color-mix(in srgb, var(--sbb-color-cloud) 80%, transparent),var(--sbb-color-iron));--sbb-flip-card-translate-title-y-hover:-.0625rem}}:host(:is(:state(flipped),[state--flipped])){--sbb-flip-card-toggle-icon-transform:rotate(45deg);--sbb-flip-card-details-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));--sbb-flip-card-summary-transition-delay:0s}:host(:is(:state(flipped),[state--flipped])) ::slotted(sbb-flip-card-summary){--sbb-flip-card-summary-opacity:0;--sbb-flip-card-summary-pointer-events:none}:host(:is(:state(flipped),[state--flipped])) ::slotted(sbb-flip-card-details){--sbb-flip-card-details-opacity:1;--sbb-flip-card-details-translate-y:0}@media (width>=37.5rem) and (width<=63.9375rem){:host(:is(:state(image-alignment-after),[state--image-alignment-after])){--sbb-flip-card-min-height:15rem}}@media (width>=90rem){:host(:is(:state(image-alignment-after),[state--image-alignment-after])){--sbb-flip-card-min-height:25rem}}.sbb-flip-card{height:100%;min-height:var(--sbb-flip-card-min-height);background-color:var(--sbb-flip-card-background-color);border-radius:var(--sbb-flip-card-border-radius);transition:all var(--sbb-flip-card-summary-transition-duration) ease-out, min-height var(--sbb-flip-card-details-transition-duration);transition-delay:var(--sbb-flip-card-summary-transition-delay);cursor:var(--sbb-cursor-pointer);flex-flow:column wrap;display:flex;position:relative}:host(:is(:state(flipped),[state--flipped])) .sbb-flip-card{min-height:max(var(--sbb-flip-card-min-height), var(--sbb-flip-card-details-height))}@media (forced-colors:active){.sbb-flip-card:after{content:"";border:var(--sbb-flip-card-border) solid CanvasText;border-radius:var(--sbb-flip-card-border-radius);pointer-events:none;position:absolute;inset:0}}@media (forced-colors:active) and (any-hover:hover){:host(:hover) .sbb-flip-card:after{border-color:highlight}}.sbb-flip-card:before{content:"";opacity:0;pointer-events:none;background-color:var(--sbb-color-midnight);background-color:light-dark(var(--sbb-color-midnight),var(--sbb-color-iron));width:var(--sbb-flip-card-button-dimensions);height:var(--sbb-flip-card-button-dimensions);transition:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-3x)) ease-out;border-radius:16rem;position:absolute;inset-block-end:var(--sbb-flip-card-padding);inset-inline-start:var(--sbb-flip-card-padding)}:host(:is(:state(flipped),[state--flipped])) .sbb-flip-card:before{opacity:1;border-radius:var(--sbb-flip-card-border-radius);width:100%;height:100%;transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-5x));inset-block-end:0;inset-inline-start:0}.sbb-flip-card--toggle-button{position:absolute;inset-block-end:var(--sbb-flip-card-padding);inset-inline-start:var(--sbb-flip-card-padding)}:host(:is(:state(flipped),[state--flipped])) .sbb-flip-card--toggle-button{--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark)}.sbb-flip-card--toggle-button-icon{transform:var(--sbb-flip-card-toggle-icon-transform,none);transition:transform var(--sbb-flip-card-summary-transition-duration) ease-out}.sbb-flip-card-button{border-radius:var(--sbb-flip-card-border-radius);width:100%;cursor:var(--sbb-cursor-pointer);position:absolute;inset:0}.sbb-flip-card-button:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width)}
-`;let E=(()=>{let e=a,x,S=[],C=[],w,E=[],D=[];return class extends e{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(e[Symbol.metadata]??null):void 0;x=[l(),g({attribute:`accessibility-label`})],w=[_()],m(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},S,C),m(this,null,w,{kind:`accessor`,name:`_flipped`,static:!1,private:!1,access:{has:e=>`_flipped`in e,get:e=>e._flipped,set:(e,t)=>{e._flipped=t}},metadata:t},E,D),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-flip-card`}static{this.elementDependencies=[b]}static{this.styles=[c,f,r(T)]}static{this.events={flip:`flip`}}#e;get accessibilityLabel(){return this.#e}set accessibilityLabel(e){this.#e=e}get summary(){return this.querySelector?.(`sbb-flip-card-summary`)}get details(){return this.querySelector?.(`sbb-flip-card-details`)}get _detailsContentElement(){return this.details.shadowRoot.firstElementChild}get isFlipped(){return this._flipped}#t;get _flipped(){return this.#t}set _flipped(e){this.#t=e}constructor(){super(),this.#e=h(this,S,``),this.#t=(h(this,C),h(this,E,!1)),this._language=(h(this,D),new o(this)),this._cardDetailsResizeObserver=new v(this,{target:null,skipInitial:!0,callback:()=>this._setCardDetailsHeight()}),this.addEventListener?.(`click`,e=>{(e.target===this||!e.target?.matches?.(i))&&this.toggle()}),this.addController(new s(this,()=>this.summary,{imageAlignment:e=>{this._previousImageAlignment&&this.internals.states.delete(`image-alignment-${this._previousImageAlignment}`),this._previousImageAlignment=e.imageAlignment,this._previousImageAlignment&&this.internals.states.add(`image-alignment-${this._previousImageAlignment}`)}}))}toggle(){this._flipped=!this._flipped,this._flipped?(this._setCardDetailsHeight(),this._cardDetailsResizeObserver.observe(this._detailsContentElement)):this._cardDetailsResizeObserver.unobserve(this._detailsContentElement),this.toggleState(`flipped`,this._flipped),p(this.details)?.toggle(`flipped`,this._flipped),this.summary.inert=this._flipped,this.details.inert=!this._flipped,this.dispatchEvent(new Event(`flip`,{bubbles:!0,composed:!0}))}_setCardDetailsHeight(){let e=Math.floor(this._detailsContentElement.offsetHeight);this.style?.setProperty(`--sbb-flip-card-details-height`,`${e}px`)}async _accessibilityLabel(){return n?``:(await this.hydrationComplete,this._flipped?d[this._language.current]:`${(this.accessibilityLabel?this.accessibilityLabel:this.summary?.textContent?.trim())??``}, ${u[this._language.current]}`)}render(){return t`
+`;let E=(()=>{let e=a,x,S=[],C=[],w,E=[],D=[];return class extends e{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(e[Symbol.metadata]??null):void 0;x=[l(),g({attribute:`accessibility-label`})],w=[_()],m(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},S,C),m(this,null,w,{kind:`accessor`,name:`_flipped`,static:!1,private:!1,access:{has:e=>`_flipped`in e,get:e=>e._flipped,set:(e,t)=>{e._flipped=t}},metadata:t},E,D),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-flip-card`}static{this.elementDependencies=[b]}static{this.styles=[c,f,r(T)]}static{this.events={flip:`flip`}}#e;get accessibilityLabel(){return this.#e}set accessibilityLabel(e){this.#e=e}get summary(){return this.querySelector?.(`sbb-flip-card-summary`)}get details(){return this.querySelector?.(`sbb-flip-card-details`)}get _detailsContentElement(){return this.details?.shadowRoot?.querySelector(`.sbb-flip-card-details`)??null}get isFlipped(){return this._flipped}#t;get _flipped(){return this.#t}set _flipped(e){this.#t=e}constructor(){super(),this.#e=h(this,S,``),this.#t=(h(this,C),h(this,E,!1)),this._language=(h(this,D),new o(this)),this._cardDetailsResizeObserver=new v(this,{target:null,skipInitial:!0,callback:()=>this._setCardDetailsHeight()}),this.addEventListener?.(`click`,e=>{(e.target===this||!e.target?.matches?.(i))&&this.toggle()}),this.addController(new s(this,()=>this.summary,{imageAlignment:e=>{this._previousImageAlignment&&this.internals.states.delete(`image-alignment-${this._previousImageAlignment}`),this._previousImageAlignment=e.imageAlignment,this._previousImageAlignment&&this.internals.states.add(`image-alignment-${this._previousImageAlignment}`)}}))}toggle(){this._flipped=!this._flipped;let e=this._detailsContentElement;this._flipped&&e?(this._setCardDetailsHeight(),this._cardDetailsResizeObserver.observe(e)):e&&this._cardDetailsResizeObserver.unobserve(e),this.toggleState(`flipped`,this._flipped),p(this.details)?.toggle(`flipped`,this._flipped),this.summary.inert=this._flipped,this.details.inert=!this._flipped,this.dispatchEvent(new Event(`flip`,{bubbles:!0,composed:!0}))}_setCardDetailsHeight(){let e=Math.floor(this._detailsContentElement.offsetHeight);this.style?.setProperty(`--sbb-flip-card-details-height`,`${e}px`)}async _accessibilityLabel(){return n?``:(await this.hydrationComplete,this._flipped?d[this._language.current]:`${(this.accessibilityLabel?this.accessibilityLabel:this.summary?.textContent?.trim())??``}, ${u[this._language.current]}`)}render(){return t`
       <div class="sbb-flip-card">
         <button
           class="sbb-flip-card-button"

package/image.pure.js

@@ -53,14 +53,14 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,not
       }`,u(e)}_createMediaQueryString(e){let t=``;return e.forEach(e=>{let n=e.conditionFeature,r;r=e.conditionFeatureValue.lyneDesignToken?f[e.conditionFeatureValue.value]??``:e.conditionFeatureValue.value;let i=e.conditionOperator?` ${e.conditionOperator} `:``;t+=`(${n}: ${r})${i}`}),t}_imageLoaded(){this._logPerformanceMarks(),this.internals.states.add(`loaded`),this.dispatchEvent(new Event(`load`))}render(){let e=this._prepareImageUrl(this.imageSrc,!0),t=this._prepareImageUrl(this.imageSrc,!1);this.loading===`lazy`&&(this.decoding=`async`,this.importance=`low`);let i=this._preparePictureSizeConfigs();return n`
       <div class="sbb-image__wrapper">
         ${this.skipLqip?r:n`<img
-              alt=""
-              class="sbb-image__blurred"
-              src=${e}
-              width="1000"
-              height="562"
-              loading=${this.loading??r}
-              decoding=${this.decoding??r}
-            />`}
+                alt=""
+                class="sbb-image__blurred"
+                src=${e}
+                width="1000"
+                height="562"
+                loading=${this.loading??r}
+                decoding=${this.decoding??r}
+              />`}
 
         <picture>
           <!-- render picture element sources -->

package/index.d.ts

@@ -18,6 +18,7 @@ import { SbbDateInputElement } from "./date-input.js";
 import { SbbDatepickerElement, SbbDatepickerNextDayElement, SbbDatepickerPreviousDayElement, SbbDatepickerToggleElement } from "./datepicker.js";
 import { SbbDialogActionsElement, SbbDialogCloseButtonElement, SbbDialogContentElement, SbbDialogElement, SbbDialogTitleElement } from "./dialog.js";
 import { SbbDividerElement } from "./divider.js";
+import { SbbDownloadElement, SbbDownloadInfoElement } from "./download.js";
 import { SbbExpansionPanelContentElement, SbbExpansionPanelElement, SbbExpansionPanelHeaderElement } from "./expansion-panel.js";
 import { SbbFileSelectorDropzoneElement, SbbFileSelectorElement } from "./file-selector.js";
 import { SbbFlipCardDetailsElement, SbbFlipCardElement, SbbFlipCardSummaryElement } from "./flip-card.js";
@@ -125,6 +126,8 @@ declare global {
   var SbbDialogElement: SbbDialogElement;
   var SbbDialogTitleElement: SbbDialogTitleElement;
   var SbbDividerElement: SbbDividerElement;
+  var SbbDownloadElement: SbbDownloadElement;
+  var SbbDownloadInfoElement: SbbDownloadInfoElement;
   var SbbErrorElement: SbbErrorElement;
   var SbbExpansionPanelContentElement: SbbExpansionPanelContentElement;
   var SbbExpansionPanelElement: SbbExpansionPanelElement;

package/index.js

@@ -18,6 +18,7 @@ import { SbbDateInputElement } from "./date-input.js";
 import { SbbDatepickerElement, SbbDatepickerNextDayElement, SbbDatepickerPreviousDayElement, SbbDatepickerToggleElement } from "./datepicker.js";
 import { SbbDialogActionsElement, SbbDialogCloseButtonElement, SbbDialogContentElement, SbbDialogElement, SbbDialogTitleElement } from "./dialog.js";
 import { SbbDividerElement } from "./divider.js";
+import { SbbDownloadElement, SbbDownloadInfoElement } from "./download.js";
 import { SbbExpansionPanelContentElement, SbbExpansionPanelElement, SbbExpansionPanelHeaderElement } from "./expansion-panel.js";
 import { SbbFileSelectorDropzoneElement, SbbFileSelectorElement } from "./file-selector.js";
 import { SbbFlipCardDetailsElement, SbbFlipCardElement, SbbFlipCardSummaryElement } from "./flip-card.js";
@@ -125,6 +126,8 @@ globalThis.SbbDialogContentElement = SbbDialogContentElement;
 globalThis.SbbDialogElement = SbbDialogElement;
 globalThis.SbbDialogTitleElement = SbbDialogTitleElement;
 globalThis.SbbDividerElement = SbbDividerElement;
+globalThis.SbbDownloadElement = SbbDownloadElement;
+globalThis.SbbDownloadInfoElement = SbbDownloadInfoElement;
 globalThis.SbbErrorElement = SbbErrorElement;
 globalThis.SbbExpansionPanelContentElement = SbbExpansionPanelContentElement;
 globalThis.SbbExpansionPanelElement = SbbExpansionPanelElement;

package/lean-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-xs);
@@ -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/lean-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-xs);
@@ -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/lean-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-xs);
@@ -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/map-container.pure.js

@@ -12,13 +12,13 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{IntersectionC
         <slot></slot>
 
         ${this.hideScrollUpButton?i:r`<sbb-accent-button
-              class="sbb-map-container__sidebar-button"
-              size="l"
-              icon-name="location-pin-map-small"
-              @click=${()=>this._onScrollButtonClick()}
-              ?inert=${!this._scrollUpButtonVisible}
-            >
-              ${p[this._language.current]}
-            </sbb-accent-button>`}
+                class="sbb-map-container__sidebar-button"
+                size="l"
+                icon-name="location-pin-map-small"
+                @click=${()=>this._onScrollButtonClick()}
+                ?inert=${!this._scrollUpButtonVisible}
+              >
+                ${p[this._language.current]}
+              </sbb-accent-button>`}
       </div>
     `}}})();export{g as SbbMapContainerElement};

package/mini-calendar.pure.js

@@ -1,4 +1,4 @@
-import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{SbbButtonBaseElement as a,SbbElement as o,SbbPropertyWatcherController as s,defaultDateAdapter as c,forceType as l,isArrowKeyOrPageKeysPressed as u,omitEmptyConverter as d,readConfig as f,ɵstateController as p}from"./core.js";import{MutationController as m}from"@lit-labs/observers/mutation-controller.js";var h=`:host{--sbb-mini-calendar-day-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));height:var(--sbb-mini-calendar-day-dimensions);width:var(--sbb-mini-calendar-day-dimensions);border-radius:var(--sbb-border-radius-infinity);color:light-dark(var(--sbb-color-storm),var(--sbb-color-smoke));background-color:currentColor;margin:.0625rem;display:block}@media (any-hover:hover){:host(:hover){scale:var(--sbb-mini-calendar-day-scale);transition:scale var(--sbb-mini-calendar-day-animation-easing) var(--sbb-mini-calendar-day-animation-duration)}}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);outline-offset:.125rem}:host([color=charcoal]){color:var(--sbb-background-color-2-inverted)}:host([color=cloud]){color:var(--sbb-background-color-4-inverted)}:host([color=orange]){color:var(--sbb-color-orange-light)}:host([color=red]){color:var(--sbb-color-error)}:host([color=sky]){color:var(--sbb-color-sky-light)}:host([marker=circle]){background-color:var(--sbb-color-1-inverted);border:.0625rem solid}:host([marker=target]){background:radial-gradient(circle, currentcolor 0%, currentcolor 25%, var(--sbb-color-1-inverted) 25%, var(--sbb-color-1-inverted) 50%, currentcolor 50%, currentcolor 100%)}:host([marker=slash]){position:relative}:host([marker=slash]):before{content:"";background-image:linear-gradient(-45deg, transparent 45%, var(--sbb-color-1-inverted) 45%, var(--sbb-color-1-inverted) 55%, transparent 55%);position:absolute;inset:0}:host([marker=cross]){position:relative}:host([marker=cross]):before{content:"";background-image:linear-gradient(-45deg, transparent 45%, var(--sbb-color-1-inverted) 45%, var(--sbb-color-1-inverted) 55%, transparent 55%), linear-gradient(45deg, transparent 45%, var(--sbb-color-1-inverted) 45%, var(--sbb-color-1-inverted) 55%, transparent 55%);position:absolute;inset:0}
+import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{SbbButtonBaseElement as a,SbbElement as o,SbbPropertyWatcherController as s,defaultDateAdapter as c,forceType as l,isArrowKeyOrPageKeysPressed as u,omitEmptyConverter as d,readConfig as f,ɵstateController as p}from"./core.js";import{MutationController as m}from"@lit-labs/observers/mutation-controller.js";var h=`:host{--sbb-mini-calendar-day-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));height:var(--sbb-mini-calendar-day-dimensions);width:var(--sbb-mini-calendar-day-dimensions);border-radius:var(--sbb-border-radius-infinity);color:light-dark(var(--sbb-color-storm),var(--sbb-color-smoke));background-color:currentColor;margin:.0625rem;display:block}@media (any-hover:hover){:host(:hover){scale:var(--sbb-mini-calendar-day-scale);transition:scale var(--sbb-mini-calendar-day-animation-easing) var(--sbb-mini-calendar-day-animation-duration)}}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);outline-offset:.125rem}:host([color=charcoal]){color:var(--sbb-background-color-2-inverted)}:host([color=cloud]){color:var(--sbb-background-color-4)}:host([color=orange]){color:var(--sbb-color-orange-light)}:host([color=red]){color:var(--sbb-color-error)}:host([color=sky]){color:var(--sbb-color-sky-light)}:host([marker=circle]){background-color:var(--sbb-color-1-inverted);border:.0625rem solid}:host([marker=target]){background:radial-gradient(circle, currentcolor 0%, currentcolor 25%, var(--sbb-color-1-inverted) 25%, var(--sbb-color-1-inverted) 50%, currentcolor 50%, currentcolor 100%)}:host([marker=slash]){position:relative}:host([marker=slash]):before{content:"";background-image:linear-gradient(-45deg, transparent 45%, var(--sbb-color-1-inverted) 45%, var(--sbb-color-1-inverted) 55%, transparent 55%);position:absolute;inset:0}:host([marker=cross]){position:relative}:host([marker=cross]):before{content:"";background-image:linear-gradient(-45deg, transparent 45%, var(--sbb-color-1-inverted) 45%, var(--sbb-color-1-inverted) 55%, transparent 55%), linear-gradient(45deg, transparent 45%, var(--sbb-color-1-inverted) 45%, var(--sbb-color-1-inverted) 55%, transparent 55%);position:absolute;inset:0}
 `;let g=(()=>{let o=a,s,u=[],p=[],m,g=[],_=[],v,y=[],b=[];return class extends o{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(o[Symbol.metadata]??null):void 0;s=[l(),i()],m=[l(),i({reflect:!0,converter:d})],v=[l(),i({reflect:!0,converter:d})],e(this,null,s,{kind:`accessor`,name:`date`,static:!1,private:!1,access:{has:e=>`date`in e,get:e=>e.date,set:(e,t)=>{e.date=t}},metadata:t},u,p),e(this,null,m,{kind:`accessor`,name:`marker`,static:!1,private:!1,access:{has:e=>`marker`in e,get:e=>e.marker,set:(e,t)=>{e.marker=t}},metadata:t},g,_),e(this,null,v,{kind:`accessor`,name:`color`,static:!1,private:!1,access:{has:e=>`color`in e,get:e=>e.color,set:(e,t)=>{e.color=t}},metadata:t},y,b),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-mini-calendar-day`}static{this.styles=[r(h)]}#e;get date(){return this.#e}set date(e){this.#e=e}#t;get marker(){return this.#t}set marker(e){this.#t=e}#n;get color(){return this.#n}set color(e){this.#n=e}willUpdate(e){super.willUpdate(e),e.has(`date`)&&this.date&&(this.internals.ariaLabel=this._dateAdapter.getAccessibilityFormatDate(this.date))}renderTemplate(){return n``}constructor(){super(...arguments),this._dateAdapter=f().datetime?.dateAdapter??c,this.#e=t(this,u,``),this.#t=(t(this,p),t(this,g,``)),this.#n=(t(this,_),t(this,y,``)),t(this,b)}}})();var _=`:host{display:inline-block}:host(:is(:state(show-year),[state--show-year])){--sbb-mini-calendar-month-visibilty-year:visible}:host(:is(:state(orientation-horizontal),[state--orientation-horizontal])){--sbb-mini-calendar-month-grid-auto-flow:row;--sbb-mini-calendar-month-height:3rem;--sbb-mini-calendar-month-grid-template-rows:none;--sbb-mini-calendar-month-grid-template-columns:repeat(7, 1fr)}:host(:is(:state(orientation-horizontal),[state--orientation-horizontal])) ::slotted(sbb-mini-calendar-day:first-child){grid-column-start:var(--sbb-mini-calendar-month-offset)}:host(:is(:state(orientation-vertical),[state--orientation-vertical])){--sbb-mini-calendar-month-grid-auto-flow:column;--sbb-mini-calendar-month-height:auto;--sbb-mini-calendar-month-grid-template-rows:repeat(7, 1fr);--sbb-mini-calendar-month-grid-template-columns:none}:host(:is(:state(orientation-vertical),[state--orientation-vertical])) ::slotted(sbb-mini-calendar-day:first-child){grid-row-start:var(--sbb-mini-calendar-month-offset)}.sbb-mini-calendar-month-wrapper{height:var(--sbb-mini-calendar-month-height);grid-auto-flow:var(--sbb-mini-calendar-month-grid-auto-flow);grid-auto-rows:.5rem;grid-template-columns:var(--sbb-mini-calendar-month-grid-template-columns);grid-template-rows:var(--sbb-mini-calendar-month-grid-template-rows);display:grid}.sbb-mini-calendar-month-label-year,.sbb-mini-calendar-month-label-month{font-size:var(--sbb-text-font-size-xxs);letter-spacing:var(--sbb-typo-letter-spacing-text);color:var(--sbb-mini-calendar-month-label-color)}.sbb-mini-calendar-month-label-year{visibility:var(--sbb-mini-calendar-month-visibilty-year)}
 `;let v=(()=>{let a=o,u,d=[],p=[];return class extends a{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(a[Symbol.metadata]??null):void 0;u=[l(),i()],e(this,null,u,{kind:`accessor`,name:`date`,static:!1,private:!1,access:{has:e=>`date`in e,get:e=>e.date,set:(e,t)=>{e.date=t}},metadata:t},d,p),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-mini-calendar-month`}static{this.styles=[r(_)]}#e;get date(){return this.#e}set date(e){this.#e=e}constructor(){super(),this.#e=t(this,d,``),this._dateAdapter=(t(this,p),f().datetime?.dateAdapter??c),this._monthNames=this._dateAdapter.getMonthNames(`short`),this._monthLabel=null,this._yearLabel=null,this._previousOrientation=null,this.addController(new s(this,()=>this.closest(`sbb-mini-calendar`),{orientation:e=>{this._previousOrientation&&this.internals.states.delete(`orientation-${this._previousOrientation}`),this._previousOrientation=e.orientation,this._previousOrientation&&this.internals.states.add(`orientation-${this._previousOrientation}`)}}))}willUpdate(e){if(super.willUpdate(e),e.has(`date`)&&this.date){if(!this.date.match(/^\d{4}-(0[1-9]|1[0-2])$/))return;let e=this.date.split(`-`),t=this._dateAdapter.createDate(+e[0],+e[1],1),n=this._dateAdapter.getFirstWeekOffset(t);this.style?.setProperty(`--sbb-mini-calendar-month-offset`,`${n+1}`),this._monthLabel=`${this._monthNames[e[1]-1]}.`,this._yearLabel=String(this._dateAdapter.getYear(t))}}render(){return n`
       <div class="sbb-mini-calendar-month-label-year">${this._yearLabel}</div>

package/notification.pure.js

@@ -11,15 +11,18 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{ResizeControl
           </span>
 
           ${this.readOnly?i:r`
-                <sbb-divider class="sbb-notification__divider" orientation="vertical"></sbb-divider>
-                <sbb-secondary-button
-                  size=${this.size||i}
-                  icon-name="cross-small"
-                  @click=${()=>this.close()}
-                  aria-label=${d[this._language.current]}
-                  class="sbb-notification__close"
-                ></sbb-secondary-button>
-              `}
+                  <sbb-divider
+                    class="sbb-notification__divider"
+                    orientation="vertical"
+                  ></sbb-divider>
+                  <sbb-secondary-button
+                    size=${this.size||i}
+                    icon-name="cross-small"
+                    @click=${()=>this.close()}
+                    aria-label=${d[this._language.current]}
+                    class="sbb-notification__close"
+                  ></sbb-secondary-button>
+                `}
         </div>
       </div>
     `}}})();export{_ as SbbNotificationElement};