@sbb-esta/lyne-elements 5.2.0 → 5.4.0

package/development/overlay.pure.js

@@ -240,7 +240,7 @@ let SbbOverlayBaseElement = (() => {
 
 //#endregion
 //#region src/elements/overlay/overlay.scss?inline
-var overlay_default = ":host {\n  --_sbb-overlay-padding-block: calc(\n    var(--sbb-spacing-fixed-14x) + var(--sbb-spacing-responsive-l)\n  );\n  --sbb-overlay-animation-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-6x)\n  );\n  display: var(--sbb-overlay-display);\n  position: fixed;\n  inset: var(--sbb-overlay-inset);\n  z-index: var(--sbb-overlay-z-index, var(--sbb-overlay-default-z-index));\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) {\n  --sbb-overlay-display: block;\n  --sbb-overlay-container-display: flex;\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]))) {\n  --sbb-overlay-pointer-events: all;\n}\n\n:host([negative]) {\n  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n  --sbb-overlay-color: var(--sbb-color-1-negative);\n  --sbb-overlay-background-color: var(--sbb-background-color-3-negative);\n}\n\n:host(:not(:is(:state(state-closed),[state--state-closed]))) {\n  --sbb-overlay-inset: 0;\n}\n\n.sbb-overlay__container {\n  background-color: var(--sbb-overlay-background-color);\n  pointer-events: var(--sbb-overlay-pointer-events);\n  display: var(--sbb-overlay-container-display);\n  align-items: center;\n  position: fixed;\n  inset: var(--sbb-overlay-inset);\n}\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) .sbb-overlay__container {\n  animation-name: open;\n  animation-duration: var(--sbb-overlay-animation-duration);\n  animation-timing-function: var(--sbb-overlay-animation-easing);\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-overlay__container {\n  pointer-events: none;\n  animation-name: close;\n}\n\n.sbb-overlay {\n  position: absolute;\n  inset-inline: 0;\n  margin: auto;\n  padding: 0;\n  border: none;\n  height: var(--sbb-overlay-height);\n  color: var(--sbb-overlay-color);\n}\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) .sbb-overlay {\n  animation-name: open-move-in;\n  animation-duration: var(--sbb-overlay-animation-duration);\n  animation-timing-function: var(--sbb-overlay-animation-easing);\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-overlay {\n  animation-name: close-move-out;\n}\n\n.sbb-overlay__wrapper {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: var(--sbb-overlay-height);\n  outline: none;\n  position: fixed;\n}\n@media (min-width: calc(64rem)) {\n  .sbb-overlay__wrapper {\n    position: sticky;\n    inset-block-start: 0;\n    height: auto;\n  }\n}\n\n.sbb-overlay__header {\n  position: absolute;\n  inset-inline-start: 0;\n  display: flex;\n  pointer-events: none;\n  align-items: start;\n  justify-content: space-between;\n  width: 100%;\n  padding: var(--sbb-spacing-responsive-xs);\n  padding-block-end: 0;\n  z-index: 1;\n}\n.sbb-overlay__header * {\n  pointer-events: all;\n}\n\n.sbb-overlay__close {\n  margin-inline-start: auto;\n}\n\n.sbb-overlay__content {\n  height: 100vh;\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.sbb-overlay__content-container {\n  padding-block: var(--_sbb-overlay-padding-block);\n}\n\n@keyframes open {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes open-move-in {\n  from {\n    transform: translateY(var(--sbb-spacing-fixed-4x));\n  }\n  to {\n    transform: translateY(0%);\n  }\n}\n@keyframes close {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n@keyframes close-move-out {\n  from {\n    transform: translateY(0%);\n  }\n  to {\n    transform: translateY(var(--sbb-spacing-fixed-4x));\n  }\n}\n";
+var overlay_default = ":host {\n  --sbb-overlay-display: none;\n  --sbb-overlay-inset: 0 auto auto 0;\n  --sbb-overlay-pointer-events: none;\n  --sbb-overlay-container-display: none;\n  --_sbb-overlay-padding-block: calc(\n    var(--sbb-spacing-fixed-14x) + var(--sbb-spacing-responsive-l)\n  );\n  --sbb-overlay-animation-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-6x)\n  );\n  display: var(--sbb-overlay-display);\n  position: fixed;\n  inset: var(--sbb-overlay-inset);\n  z-index: var(--sbb-overlay-z-index, var(--sbb-overlay-default-z-index));\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) {\n  --sbb-overlay-display: block;\n  --sbb-overlay-container-display: flex;\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]))) {\n  --sbb-overlay-pointer-events: all;\n}\n\n:host(:not([negative])) {\n  --sbb-overlay-color: var(--sbb-color-1);\n  --sbb-overlay-background-color: var(--sbb-background-color-3);\n}\n\n:host([negative]) {\n  --sbb-overlay-color: var(--sbb-color-1-negative);\n  --sbb-overlay-background-color: var(--sbb-background-color-3-negative);\n  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n}\n\n:host(:not(:is(:state(state-closed),[state--state-closed]))) {\n  --sbb-overlay-inset: 0;\n}\n\n.sbb-overlay__container {\n  background-color: var(--sbb-overlay-background-color);\n  pointer-events: var(--sbb-overlay-pointer-events);\n  display: var(--sbb-overlay-container-display);\n  align-items: center;\n  position: fixed;\n  inset: var(--sbb-overlay-inset);\n}\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) .sbb-overlay__container {\n  animation-name: open;\n  animation-duration: var(--sbb-overlay-animation-duration);\n  animation-timing-function: var(--sbb-overlay-animation-easing);\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-overlay__container {\n  pointer-events: none;\n  animation-name: close;\n}\n\n.sbb-overlay {\n  position: absolute;\n  inset-inline: 0;\n  margin: auto;\n  padding: 0;\n  border: none;\n  height: var(--sbb-overlay-height);\n  color: var(--sbb-overlay-color);\n}\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) .sbb-overlay {\n  animation-name: open-move-in;\n  animation-duration: var(--sbb-overlay-animation-duration);\n  animation-timing-function: var(--sbb-overlay-animation-easing);\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-overlay {\n  animation-name: close-move-out;\n}\n\n.sbb-overlay__wrapper {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: var(--sbb-overlay-height);\n  outline: none;\n  position: fixed;\n}\n@media (min-width: calc(64rem)) {\n  .sbb-overlay__wrapper {\n    position: sticky;\n    inset-block-start: 0;\n    height: auto;\n  }\n}\n\n.sbb-overlay__header {\n  position: absolute;\n  inset-inline-start: 0;\n  display: flex;\n  pointer-events: none;\n  align-items: start;\n  justify-content: space-between;\n  width: 100%;\n  padding: var(--sbb-spacing-responsive-xs);\n  padding-block-end: 0;\n  z-index: 1;\n}\n.sbb-overlay__header * {\n  pointer-events: all;\n}\n\n.sbb-overlay__close {\n  margin-inline-start: auto;\n}\n\n.sbb-overlay__content {\n  height: 100vh;\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.sbb-overlay__content-container {\n  padding-block: var(--_sbb-overlay-padding-block);\n}\n\n@keyframes open {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes open-move-in {\n  from {\n    transform: translateY(var(--sbb-spacing-fixed-4x));\n  }\n  to {\n    transform: translateY(0%);\n  }\n}\n@keyframes close {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n@keyframes close-move-out {\n  from {\n    transform: translateY(0%);\n  }\n  to {\n    transform: translateY(var(--sbb-spacing-fixed-4x));\n  }\n}\n";
 
 //#endregion
 //#region src/elements/overlay/overlay.component.ts

package/development/popover.pure.js

@@ -213,7 +213,7 @@ let SbbPopoverBaseElement = (() => {
 		_setPopoverFocus() {
 			if (!this._focusTrapController.focusInitialElement() && this._openStateController) {
 				this.setAttribute("tabindex", "0");
-				this.focus();
+				this.focus({ preventScroll: true });
 				this.addEventListener("blur", (e) => {
 					this._blurTimeout = setTimeout(() => {
 						if (document.visibilityState !== "hidden") {

package/download/_download.global.scss

@@ -0,0 +1,12 @@
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-download-gap: var(--sbb-spacing-fixed-3x);
+  --sbb-download-label-color: var(--sbb-color-3);
+  --sbb-download-info-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
+}
+
+@mixin forced-colors {
+  --sbb-download-label-color: CanvasText;
+  --sbb-download-info-color: CanvasText;
+}

package/download.js

@@ -0,0 +1 @@
+import{SbbDownloadElement as e,SbbDownloadInfoElement as t}from"./download.pure.js";export*from"./download.pure.js";e.define(),t.define();

package/download.pure.js

@@ -0,0 +1,21 @@
+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}from"lit/decorators.js";import{SbbSecondaryButtonStaticElement as o}from"./button.pure.js";import{SbbElement as s,SbbLanguageController as c,SbbLinkBaseElement as l,SbbPropertyWatcherController as u,defaultDateAdapter as d,forceType as f,i18nDownload as p,i18nNonAccessible as m,omitEmptyConverter as h,readConfig as g,screenReaderOnlyStyles as _}from"./core.js";import{SbbIconNameMixin as v}from"./icon.pure.js";var y=`:host{--sbb-card-background-color:var(--sbb-background-color-1);--sbb-card-border-color:transparent;--sbb-card-border-radius:var(--sbb-border-radius-4x);--sbb-card-animation-easing:var(--sbb-animation-easing);--sbb-card-border-style:solid;--sbb-card-padding-inline-default:var(--sbb-spacing-responsive-s);--sbb-card-padding-block-default:var(--sbb-spacing-responsive-xxxs);--sbb-card-with-badge-padding-block-default:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);--sbb-card-padding-block:var(--sbb-card-padding-block-default);--sbb-card-with-badge-padding-block:var(--sbb-card-with-badge-padding-block-default);--sbb-card-padding-inline:var(--sbb-card-padding-inline-default);display:block}:host(:where([color=white])){--sbb-card-background-color:var(--sbb-background-color-1);--sbb-card-border-color:transparent}:host(:where([color=milk])){--sbb-card-background-color:var(--sbb-background-color-3);--sbb-card-border-color:transparent}.sbb-download{--sbb-focus-outline-color:light-dark(var(--sbb-focus-outline-color-default),var(--sbb-focus-outline-color-dark));--sbb-card-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-1x));padding-inline:var(--sbb-card-padding-inline);padding-block:var(--sbb-card-padding-block);border-radius:var(--sbb-card-border-radius);background-color:var(--sbb-card-background-color);box-shadow:none;transition:box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);color:var(--sbb-card-color);display:block;position:relative}.sbb-download:after{content:"";border:var(--sbb-card-border-width) var(--sbb-card-border-style) var(--sbb-card-border-color);border-radius:var(--sbb-card-border-radius);pointer-events:none;background-color:#0000;position:absolute;inset:0}@media (forced-colors:active){.sbb-download{--sbb-title-color:var(--sbb-card-color)}}.sbb-download{align-items:center;gap:var(--sbb-download-gap);translate:0 var(--sbb-card-hover-shift,0);transition:box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing), translate var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);text-decoration:none;display:flex}.sbb-download: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)}@media (any-hover:hover){:host(:hover) .sbb-download{--sbb-card-hover-shift:-.125rem;box-shadow:var(--sbb-box-shadow-level-9-hard)}}@media (any-hover:hover) and (forced-colors:active){:host(:hover) .sbb-download{--sbb-card-border-color:Highlight}}.sbb-download__icon{flex:none}.sbb-download__content{flex-direction:column;flex:auto;min-width:0;display:flex}.sbb-download__label{overflow-wrap:break-word;color:var(--sbb-download-label-color);font-weight:700}.sbb-download__custom-content,.sbb-download__info{line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size-xxs);color:var(--sbb-download-info-color)}.sbb-download__button{flex:none;margin-inline-start:auto}
+`;const b=new Map([[`pdf`,`document-pdf-small`],[`xls`,`document-xls-small`],[`xlsx`,`document-xls-small`],[`ppt`,`document-ppt-small`],[`pptx`,`document-ppt-small`],[`doc`,`document-doc-small`],[`docx`,`document-doc-small`],[`zip`,`document-zip-small`],[`jpg`,`document-image-small`],[`jpeg`,`document-image-small`],[`png`,`document-image-small`],[`gif`,`document-image-small`],[`svg`,`document-image-small`],[`webp`,`document-image-small`]]);let x=(()=>{let s=v(l),u=[],d,m=[],g=[],x,S=[],C=[],w;return class extends s{constructor(){super(...arguments),this.#e=(t(this,u),t(this,m,`white`)),this.#t=(t(this,g),t(this,S,``)),this._languageController=(t(this,C),new c(this))}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(s[Symbol.metadata]??null):void 0;d=[a({reflect:!0})],x=[f(),a({converter:h})],w=[a({type:Boolean,reflect:!1})],e(this,null,d,{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},m,g),e(this,null,x,{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},S,C),e(this,null,w,{kind:`setter`,name:`download`,static:!1,private:!1,access:{has:e=>`download`in e,set:(e,t)=>{e.download=t}},metadata:t},null,u),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-download`}static{this.elementDependencies=[o]}static{this.styles=[_,i(y)]}#e;get color(){return this.#e}set color(e){this.#e=e}#t;get label(){return this.#t}set label(e){this.#t=e}set download(e){}get download(){return!0}get fileName(){return this.href.split(/[?#]/)[0].split(`/`).filter(Boolean).at(-1)??``}get fileExtension(){let e=this.fileName;return e.includes(`.`)?e.split(`.`).at(-1)?.toLowerCase()??``:``}renderIconName(){if(this.iconName)return this.iconName;if(!this.href)return``;let e=this.fileExtension;return e&&b.get(e)||`document-standard-small`}firstUpdated(e){super.firstUpdated(e),this._updateDescribedByElements()}_updateDescribedByElements(){let e=this.shadowRoot?.querySelector?.(`a`);if(e){let t=this.shadowRoot?.querySelector?.(`.sbb-download__custom-content`);e.ariaDescribedByElements=[...t?[t]:[],...this._downloadInfoElements()]}}_downloadInfoElements(){return this.querySelectorAll?.(`sbb-download-info`)??[]}renderTemplate(){return n`
+      ${this.renderIconSlot(`sbb-download__icon`)}
+      <span class="sbb-download__content">
+        <span class="sbb-download__label">${this.label||this.fileName}</span>
+        <span class="sbb-screen-reader-only">
+          ${this._downloadInfoElements().length?r:n`&nbsp;${this.fileExtension}`}&nbsp;${p[this._languageController.current]}
+        </span>
+        <span class="sbb-download__custom-content" aria-hidden="true">
+          <slot></slot>
+        </span>
+        <span class="sbb-download__info">
+          <slot name="info" @slotchange="${()=>this._updateDescribedByElements()}"></slot>
+        </span>
+      </span>
+      <sbb-secondary-button-static
+        class="sbb-download__button"
+        icon-name="download-small"
+      ></sbb-secondary-button-static>
+    `}}})();var S=`:host{display:block}
+`;const C=[`B`,`KB`,`MB`,`GB`,`TB`];let w=(()=>{let r=s,o,l=[],p=[],_,v=[],y=[],b,x=[],w=[],T,E=[],D=[];return class extends r{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;o=[f(),a({converter:h})],_=[f(),a({converter:h})],b=[f(),a({converter:h})],T=[f(),a({attribute:`non-accessible`,type:Boolean})],e(this,null,o,{kind:`accessor`,name:`type`,static:!1,private:!1,access:{has:e=>`type`in e,get:e=>e.type,set:(e,t)=>{e.type=t}},metadata:t},l,p),e(this,null,_,{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},v,y),e(this,null,b,{kind:`accessor`,name:`changed`,static:!1,private:!1,access:{has:e=>`changed`in e,get:e=>e.changed,set:(e,t)=>{e.changed=t}},metadata:t},x,w),e(this,null,T,{kind:`accessor`,name:`nonAccessible`,static:!1,private:!1,access:{has:e=>`nonAccessible`in e,get:e=>e.nonAccessible,set:(e,t)=>{e.nonAccessible=t}},metadata:t},E,D),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-download-info`}static{this.styles=[i(S)]}#e;get type(){return this.#e}set type(e){this.#e=e}#t;get size(){return this.#t}set size(e){this.#t=e}#n;get changed(){return this.#n}set changed(e){this.#n=e}#r;get nonAccessible(){return this.#r}set nonAccessible(e){this.#r=e}constructor(){super(),this.#e=t(this,l,``),this.#t=(t(this,p),t(this,v,``)),this.#n=(t(this,y),t(this,x,``)),this.#r=(t(this,w),t(this,E,!1)),this._language=(t(this,D),new c(this)),this._dateAdapter=g().datetime?.dateAdapter??d,this._resolvedType=``,this._typeRedundant=!1,this._resolvedSize=``,this._resolvedChanged=``,this.internals.ariaHidden=`true`,this.addController(new u(this,()=>this.closest(`sbb-download`),{href:()=>this.requestUpdate(),label:()=>this.requestUpdate()}))}connectedCallback(){super.connectedCallback(),this.slot||=`info`,this.requestUpdate()}willUpdate(e){super.willUpdate(e),this._resolvedType=this._resolveType(),this._typeRedundant=this._isTypeRedundant(),e.has(`size`)&&(this._resolvedSize=this._resolveSize()),e.has(`changed`)&&(this._resolvedChanged=this._resolveChanged())}_resolveType(){return this.type||(this.closest?.(`sbb-download`)?.fileExtension.toUpperCase()??``)}_isTypeRedundant(){let e=this.closest?.(`sbb-download`);return!!e&&!e.label&&!!e.fileExtension}_resolveSize(){let e=this.size.trim();if(!e||!/^\d+$/.test(e))return e;let t=Number(e);if(t<=0)return`0 ${C[0]}`;let n=Math.min(Math.floor(Math.log(t)/Math.log(1024)),C.length-1);return`${(t/1024**n).toFixed(0)} ${C[n]}`}_resolveChanged(){if(!this.changed)return``;let e=this._dateAdapter.deserialize(this.changed);return this._dateAdapter.isValid(e)?this._dateAdapter.format(e,{weekdayStyle:`none`}):this.changed}render(){let e=[this._resolvedType,this._resolvedSize,this.nonAccessible?m[this._language.current]:``,this._resolvedChanged].filter(Boolean);return this.internals.ariaLabel=e.slice(this._typeRedundant&&this._resolvedType?1:0).join(`, `),n`${e.join(`, `)}`}}})();export{x as SbbDownloadElement,w as SbbDownloadInfoElement};

package/expansion-panel.pure.js

@@ -13,7 +13,7 @@ import{html as e,nothing as t,unsafeCSS as n}from"lit";import{SbbButtonBaseEleme
               </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`
+`;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
         role=${this.titleLevel?`heading`:t}
         aria-level=${this.titleLevel||t}

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/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);
@@ -1985,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;

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);
@@ -1985,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;

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);
@@ -1985,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;

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);
@@ -1985,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;

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.2.0",
+  "version": "5.4.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/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);
@@ -1985,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;

package/selection-expansion-panel.pure.js

@@ -1,5 +1,5 @@
 import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,unsafeCSS as r}from"lit";import{property as i,state as a}from"lit/decorators.js";import{SbbElement as o,SbbLanguageController as s,SbbSelectionPanelMixin as c,forceType as l,i18nCollapsed as u,i18nExpanded as d,isZeroAnimationDuration as f}from"./core.js";import{SbbDividerElement as p}from"./divider.pure.js";var m=`:host{--sbb-selection-panel-inner-background:transparent;--sbb-selection-panel-inner-border-width:0px;--sbb-selection-expansion-panel-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--sbb-focus-outline-color:light-dark(var(--sbb-focus-outline-color-default),var(--sbb-focus-outline-color-dark));width:var(--sbb-selection-group-elements-width,100%);background-color:var(--sbb-selection-expansion-panel-background);border-radius:var(--sbb-selection-panel-border-radius);box-shadow:inset 0 0 0 var(--sbb-selection-expansion-panel-border-width) var(--sbb-selection-expansion-panel-border-color);transition-duration:var(--sbb-selection-expansion-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);flex:auto;transition-property:box-shadow;display:block;position:relative}@media (forced-colors:active){:host:after{content:"";pointer-events:none;border:var(--sbb-selection-expansion-panel-border-width) solid var(--sbb-selection-expansion-panel-border-color);border-radius:var(--sbb-selection-panel-border-radius);display:block;position:absolute;inset:0}}:host(:is(:state(size-xs),[state--size-xs])){--sbb-selection-expansion-panel-content-padding-inline:var(--sbb-selection-panel-input-padding-inline-xs)}:host(:is(:state(size-s),[state--size-s])){--sbb-selection-expansion-panel-content-padding-inline:var(--sbb-selection-panel-input-padding-inline-s)}:host(:is(:state(size-m),[state--size-m])){--sbb-selection-expansion-panel-content-padding-inline:var(--sbb-selection-panel-input-padding-inline-m)}:host(:is(:state(color-milk),[state--color-milk])){--sbb-selection-expansion-panel-background:var(--sbb-selection-panel-background-milk)}:host(:where(:is(:state(checked),[state--checked])):not(:where(:is(:state(disabled),[state--disabled])))){--sbb-selection-expansion-panel-border-color:var(--sbb-selection-panel-border-color-checked);--sbb-selection-expansion-panel-border-width:var(--sbb-selection-panel-border-width-checked)}:host(:is(:state(slotted-content),[state--slotted-content]):where(:is(:state(disabled),[state--disabled]))){--sbb-selection-expansion-panel-border-color:var(--sbb-selection-panel-border-color-default)}:host(:is(:state(borderless),[state--borderless]):not(:where(:is(:state(checked),[state--checked])))){--sbb-selection-expansion-panel-border-color:transparent}:host(:not(:is(:state(slotted-content),[state--slotted-content]):where(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened])))){--sbb-selection-expansion-panel-content-padding-block-end:0px;--sbb-selection-expansion-panel-content-visibility:hidden}.sbb-selection-expansion-panel__content--wrapper{visibility:var(--sbb-selection-expansion-panel-content-visibility);opacity:0;grid-template-rows:0fr;display:grid}:host(:is(:state(state-opened),[state--state-opened])) .sbb-selection-expansion-panel__content--wrapper{opacity:1;grid-template-rows:1fr}:host(:is(:state(state-opening),[state--state-opening])) .sbb-selection-expansion-panel__content--wrapper{animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-selection-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing);animation-delay:0s, var(--sbb-selection-expansion-panel-animation-duration)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-selection-expansion-panel__content--wrapper{animation-name:close;animation-duration:var(--sbb-selection-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing)}:host(:not(:is(:state(slotted-content),[state--slotted-content]))) .sbb-selection-expansion-panel__content--wrapper{display:none}.sbb-selection-expansion-panel__content{padding-inline:var(--sbb-selection-expansion-panel-content-padding-inline);transition:padding var(--sbb-selection-expansion-panel-animation-duration) var(--sbb-animation-easing);padding-block-end:var(--sbb-selection-expansion-panel-content-padding-block-end);overflow:hidden}sbb-divider{margin-block-end:var(--sbb-selection-expansion-panel-content-padding-block-start)}@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 h=(()=>{let h=c(o),g=[],_,v=[],y=[],b;return class extends h{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(h[Symbol.metadata]??null):void 0;_=[l(),i({attribute:`force-open`,type:Boolean})],b=[a()],e(this,null,_,{kind:`accessor`,name:`forceOpen`,static:!1,private:!1,access:{has:e=>`forceOpen`in e,get:e=>e.forceOpen,set:(e,t)=>{e.forceOpen=t}},metadata:t},v,y),e(this,null,b,{kind:`setter`,name:`_state`,static:!1,private:!1,access:{has:e=>`_state`in e,set:(e,t)=>{e._state=t}},metadata:t},null,g),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-selection-expansion-panel`}static{this.elementDependencies=[p]}static{this.styles=[r(m)]}static{this.events={beforeopen:`beforeopen`,open:`open`,beforeclose:`beforeclose`,close:`close`}}#e;get forceOpen(){return this.#e}set forceOpen(e){this.#e=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}get _hasContent(){return this.querySelectorAll?.(`[slot="content"]`).length>0}constructor(){super(),this.#e=(t(this,g),t(this,v,!1)),this._stateInternal=t(this,y),this._language=new s(this),this._state=`closed`}willUpdate(e){super.willUpdate(e),e.has(`forceOpen`)&&this._updateState()}onInputStateChange(){this._updateState()}_updateState(){this._hasContent&&(this.forceOpen||this.matches(`:is(:state(checked),[state--checked])`)?this._open():this._close(),this._updateExpandedLabel(this.forceOpen||this.matches(`:is(:state(checked),[state--checked])`)))}_open(){this._state!==`closed`&&this._state!==`closing`||(this._state=`opening`,this.dispatchEvent(new Event(`beforeopen`,{cancelable:!0})),(!this.hasUpdated||this._isZeroAnimationDuration())&&this._handleOpening())}_close(){this._state!==`opened`&&this._state!==`opening`||(this._state=`closing`,this.dispatchEvent(new Event(`beforeclose`,{cancelable:!0})),this._isZeroAnimationDuration()&&this._handleClosing())}_isZeroAnimationDuration(){return f(this,`--sbb-selection-expansion-panel-animation-duration`)}_handleClosing(){this._state=`closed`,this.dispatchEvent(new Event(`close`))}_handleOpening(){this._state=`opened`,this.dispatchEvent(new Event(`open`))}_onAnimationEnd(e){e.animationName===`open-opacity`&&this._state===`opening`?this._handleOpening():e.animationName===`close`&&this._state===`closing`&&this._handleClosing()}async _updateExpandedLabel(e){await this.hydrationComplete;let t=this.panel;if(t){if(!this._hasContent){t.expansionState=``;return}t.expansionState=e?`, `+d[this._language.current]:`, `+u[this._language.current]}}render(){return n`
+`;let h=(()=>{let h=c(o),g=[],_,v=[],y=[],b;return class extends h{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(h[Symbol.metadata]??null):void 0;_=[l(),i({attribute:`force-open`,type:Boolean})],b=[a()],e(this,null,_,{kind:`accessor`,name:`forceOpen`,static:!1,private:!1,access:{has:e=>`forceOpen`in e,get:e=>e.forceOpen,set:(e,t)=>{e.forceOpen=t}},metadata:t},v,y),e(this,null,b,{kind:`setter`,name:`_state`,static:!1,private:!1,access:{has:e=>`_state`in e,set:(e,t)=>{e._state=t}},metadata:t},null,g),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-selection-expansion-panel`}static{this.elementDependencies=[p]}static{this.styles=[r(m)]}static{this.events={beforeopen:`beforeopen`,open:`open`,beforeclose:`beforeclose`,close:`close`}}#e;get forceOpen(){return this.#e}set forceOpen(e){this.#e=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}get _hasContent(){return this.querySelectorAll?.(`[slot="content"]`).length>0}constructor(){super(),this.#e=(t(this,g),t(this,v,!1)),this._stateInternal=t(this,y),this._language=new s(this),this._state=`closed`}willUpdate(e){super.willUpdate(e),e.has(`forceOpen`)&&this._updateState()}onInputStateChange(){this._updateState()}_updateState(){this._hasContent&&(this.forceOpen||this.matches(`:is(:state(checked),[state--checked])`)?this._open():this._close(),this._updateExpandedLabel(this.forceOpen||this.matches(`:is(:state(checked),[state--checked])`)))}_open(){(this._state===`closed`||this._state===`closing`)&&(this._state=`opening`,this.dispatchEvent(new Event(`beforeopen`,{cancelable:!0})),(!this.hasUpdated||this._isZeroAnimationDuration())&&this._handleOpening())}_close(){(this._state===`opened`||this._state===`opening`)&&(this._state=`closing`,this.dispatchEvent(new Event(`beforeclose`,{cancelable:!0})),this._isZeroAnimationDuration()&&this._handleClosing())}_isZeroAnimationDuration(){return f(this,`--sbb-selection-expansion-panel-animation-duration`)}_handleClosing(){this._state=`closed`,this.dispatchEvent(new Event(`close`))}_handleOpening(){this._state=`opened`,this.dispatchEvent(new Event(`open`))}_onAnimationEnd(e){e.animationName===`open-opacity`&&this._state===`opening`?this._handleOpening():e.animationName===`close`&&this._state===`closing`&&this._handleClosing()}async _updateExpandedLabel(e){await this.hydrationComplete;let t=this.panel;if(t){if(!this._hasContent){t.expansionState=``;return}t.expansionState=e?`, `+d[this._language.current]:`, `+u[this._language.current]}}render(){return n`
       <div class="sbb-selection-expansion-panel__input">
         <slot></slot>
       </div>