@sbb-esta/lyne-elements 1.15.1 → 2.0.0

package/expansion-panel/expansion-panel/expansion-panel.d.ts

@@ -32,7 +32,10 @@ export declare class SbbExpansionPanelElement extends SbbExpansionPanelElement_b
     private _disabled;
     /** Whether the panel has no border. */
     accessor borderless: boolean;
-    /** Size variant, either l or s. */
+    /**
+     * Size variant, either l or s.
+     * @default 'l' / 's' (lean)
+     */
     accessor size: 's' | 'l';
     /**
      * The state of the notification.
@@ -60,6 +63,9 @@ export declare class SbbExpansionPanelElement extends SbbExpansionPanelElement_b
     private _onExpandedChange;
     private _open;
     private _close;
+    private _isZeroAnimationDuration;
+    private _handleOpening;
+    private _handleClosing;
     private _updateDisabledOnHeader;
     private _handleSlotchange;
     private _onAnimationEnd;

package/expansion-panel/expansion-panel/expansion-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"expansion-panel.d.ts","sourceRoot":"","sources":["../../../../src/elements/expansion-panel/expansion-panel/expansion-panel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AASjC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;;AAQpD;;;;;;;;GAQG;AACH,qBAEM,wBAAyB,SAAQ,6BAA6B;IAClE,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;;;MAKlB;IAEX,yDAAyD;IACzD,SAAwD,UAAU,EAAE,aAAa,GAAG,IAAI,CAAQ;IAEhG,yCAAyC;IACzC,SAA4B,KAAK,EAAE,OAAO,GAAG,MAAM,CAAW;IAE9D,qCAAqC;IACrC,IACW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAGjC;IACD,IAAW,QAAQ,IAAI,OAAO,CAE7B;IACD,OAAO,CAAC,SAAS,CAAkB;IAEnC,6EAA6E;IAC7E,IACW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAGjC;IACD,IAAW,QAAQ,IAAI,OAAO,CAE7B;IACD,OAAO,CAAC,SAAS,CAAkB;IAEnC,uCAAuC;IACvC,SAEgB,UAAU,EAAE,OAAO,CAAS;IAE5C,mCAAmC;IACnC,SAA6C,IAAI,EAAE,GAAG,GAAG,GAAG,CAAO;IAEnE;;OAEG;IACH,OAAO,KAAK,MAAM,QAEjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,8EAA8E;IAC9E,OAAO,CAAC,SAAS,CAGf;IAEF,0DAA0D;IAC1D,OAAO,CAAC,QAAQ,CAGd;IAEF,8EAA8E;IAC9E,OAAO,CAAC,UAAU,CAGhB;IAEF,0DAA0D;IAC1D,OAAO,CAAC,SAAS,CAGf;IAEF,OAAO,CAAC,cAAc,CAAkB;IACxC,OAAO,CAAC,UAAU,CAAC,CAAiC;IACpD,OAAO,CAAC,WAAW,CAAC,CAAkC;IACtD,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,YAAY,CAAkB;IAEtB,iBAAiB,IAAI,IAAI;cAOtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAS5D,oBAAoB,IAAI,IAAI;cAKzB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAM9E,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,KAAK;IAUb,OAAO,CAAC,MAAM;IAKd,OAAO,CAAC,uBAAuB;IAM/B,OAAO,CAAC,iBAAiB;IAmCzB,OAAO,CAAC,eAAe;cAUJ,MAAM,IAAI,cAAc;CAkB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,qBAAqB,EAAE,wBAAwB,CAAC;KACjD;CACF"}
+{"version":3,"file":"expansion-panel.d.ts","sourceRoot":"","sources":["../../../../src/elements/expansion-panel/expansion-panel/expansion-panel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAUjC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;;AAQpD;;;;;;;;GAQG;AACH,qBAEM,wBAAyB,SAAQ,6BAA6B;IAClE,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;;;MAKlB;IAEX,yDAAyD;IACzD,SAAwD,UAAU,EAAE,aAAa,GAAG,IAAI,CAAQ;IAEhG,yCAAyC;IACzC,SAA4B,KAAK,EAAE,OAAO,GAAG,MAAM,CAAW;IAE9D,qCAAqC;IACrC,IACW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAGjC;IACD,IAAW,QAAQ,IAAI,OAAO,CAE7B;IACD,OAAO,CAAC,SAAS,CAAkB;IAEnC,6EAA6E;IAC7E,IACW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAGjC;IACD,IAAW,QAAQ,IAAI,OAAO,CAE7B;IACD,OAAO,CAAC,SAAS,CAAkB;IAEnC,uCAAuC;IACvC,SAEgB,UAAU,EAAE,OAAO,CAAS;IAE5C;;;OAGG;IACH,SAA6C,IAAI,EAAE,GAAG,GAAG,GAAG,CAAwB;IAEpF;;OAEG;IACH,OAAO,KAAK,MAAM,QAEjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,8EAA8E;IAC9E,OAAO,CAAC,SAAS,CAIf;IAEF,0DAA0D;IAC1D,OAAO,CAAC,QAAQ,CAId;IAEF,8EAA8E;IAC9E,OAAO,CAAC,UAAU,CAIhB;IAEF,0DAA0D;IAC1D,OAAO,CAAC,SAAS,CAIf;IAEF,OAAO,CAAC,cAAc,CAAkB;IACxC,OAAO,CAAC,UAAU,CAAC,CAAiC;IACpD,OAAO,CAAC,WAAW,CAAC,CAAkC;IACtD,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,YAAY,CAAkB;IAEtB,iBAAiB,IAAI,IAAI;cAOtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAS5D,oBAAoB,IAAI,IAAI;cAKzB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAM9E,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,KAAK;IAWb,OAAO,CAAC,MAAM;IAWd,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,uBAAuB;IAM/B,OAAO,CAAC,iBAAiB;IAmCzB,OAAO,CAAC,eAAe;cAQJ,MAAM,IAAI,cAAc;CAkB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,qBAAqB,EAAE,wBAAwB,CAAC;KACjD;CACF"}

package/expansion-panel/expansion-panel-header.js

@@ -7,7 +7,7 @@ import { hostAttributes as _ } from "../core/decorators.js";
 import { EventEmitter as y } from "../core/eventing.js";
 import { SbbDisabledTabIndexActionMixin as E } from "../core/mixins.js";
 import { SbbIconNameMixin as S } from "../icon.js";
-const w = h`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-expansion-panel-header-cursor: pointer;--sbb-expansion-panel-header-text-color: var(--sbb-color-charcoal);--sbb-expansion-panel-header-gap: var(--sbb-spacing-fixed-6x);--sbb-expansion-panel-header-padding-block: var(--sbb-spacing-responsive-xs);--sbb-expansion-panel-header-padding-inline: var(--sbb-spacing-fixed-6x)}@media (forced-colors: active){:host{--sbb-expansion-panel-header-text-color: ButtonText}}:host([data-size=s]){--sbb-expansion-panel-header-gap: var(--sbb-spacing-fixed-2x);--sbb-expansion-panel-header-padding-block: var(--sbb-spacing-fixed-3x);--sbb-expansion-panel-header-padding-inline: var(--sbb-spacing-fixed-5x)}:host([disabled]){--sbb-expansion-panel-header-cursor: default;--sbb-expansion-panel-header-text-color: var(--sbb-color-granite)}@media (forced-colors: active){:host([disabled]){--sbb-expansion-panel-header-text-color: GrayText}}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);outline-offset:var(--sbb-spacing-fixed-1x);border-radius:var(--sbb-expansion-panel-border-radius)}.sbb-expansion-panel-header{--sbb-text-font-size: var(--sbb-font-size-text-l);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;justify-content:space-between;align-items:center;gap:var(--sbb-expansion-panel-header-gap);width:100%;padding:var(--sbb-expansion-panel-header-padding-block) var(--sbb-expansion-panel-header-padding-inline);text-align:start;cursor:var(--sbb-expansion-panel-header-cursor);color:var(--sbb-expansion-panel-header-text-color);-webkit-tap-highlight-color:transparent}.sbb-expansion-panel-header__title,.sbb-expansion-panel-header__toggle,.sbb-expansion-panel-header__icon{display:flex}.sbb-expansion-panel-header__icon{width:var(--sbb-expansion-panel-icon-size);--sbb-icon-svg-width: var(--sbb-expansion-panel-icon-size);--sbb-icon-svg-height: var(--sbb-expansion-panel-icon-size)}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-expansion-panel-header__icon{display:none}.sbb-expansion-panel-header__title{align-items:center;gap:var(--sbb-expansion-panel-title-gap);overflow:hidden;min-height:var(--sbb-size-icon-ui-medium)}.sbb-expansion-panel-header__toggle-icon{transition:transform var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x))}:host([aria-expanded]:not([aria-expanded=false])) .sbb-expansion-panel-header__toggle-icon{transform:rotate(-180deg)}`;
+const w = h`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-expansion-panel-header-cursor: pointer;--sbb-expansion-panel-header-text-color: var(--sbb-color-charcoal);--sbb-expansion-panel-header-gap: var(--sbb-spacing-fixed-6x);--sbb-expansion-panel-header-padding-block: var(--sbb-spacing-responsive-xs);--sbb-expansion-panel-header-padding-inline: var(--sbb-spacing-fixed-6x)}@media (forced-colors: active){:host{--sbb-expansion-panel-header-text-color: ButtonText}}:host([data-size=s]){--sbb-expansion-panel-header-gap: var(--sbb-spacing-fixed-2x);--sbb-expansion-panel-header-padding-block: var(--sbb-spacing-fixed-3x);--sbb-expansion-panel-header-padding-inline: var(--sbb-spacing-fixed-5x)}:host(:is(:disabled,[disabled-interactive])){--sbb-expansion-panel-header-cursor: default;--sbb-expansion-panel-header-text-color: var(--sbb-color-granite)}@media (forced-colors: active){:host(:is(:disabled,[disabled-interactive])){--sbb-expansion-panel-header-text-color: GrayText}}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);outline-offset:var(--sbb-spacing-fixed-1x);border-radius:var(--sbb-expansion-panel-border-radius)}.sbb-expansion-panel-header{--sbb-text-font-size: var(--sbb-font-size-text-l);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;justify-content:space-between;align-items:center;gap:var(--sbb-expansion-panel-header-gap);width:100%;padding:var(--sbb-expansion-panel-header-padding-block) var(--sbb-expansion-panel-header-padding-inline);text-align:start;cursor:var(--sbb-expansion-panel-header-cursor);color:var(--sbb-expansion-panel-header-text-color);-webkit-tap-highlight-color:transparent}.sbb-expansion-panel-header__title,.sbb-expansion-panel-header__toggle,.sbb-expansion-panel-header__icon{display:flex}.sbb-expansion-panel-header__icon{width:var(--sbb-expansion-panel-icon-size);--sbb-icon-svg-width: var(--sbb-expansion-panel-icon-size);--sbb-icon-svg-height: var(--sbb-expansion-panel-icon-size)}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-expansion-panel-header__icon{display:none}.sbb-expansion-panel-header__title{align-items:center;gap:var(--sbb-expansion-panel-title-gap);overflow:hidden;min-height:var(--sbb-size-icon-ui-medium)}.sbb-expansion-panel-header__toggle-icon{transition:transform var(--sbb-disable-animation-duration, var(--sbb-animation-duration-4x))}:host([aria-expanded]:not([aria-expanded=false])) .sbb-expansion-panel-header__toggle-icon{transform:rotate(-180deg)}`;
 let j = (() => {
   var a;
   let d = [m("sbb-expansion-panel-header"), _({

package/expansion-panel/expansion-panel.js

@@ -4,17 +4,18 @@ var T = (s) => {
 var U = (s, i, o) => i.has(s) || T("Cannot " + o);
 var m = (s, i, o) => (U(s, i, "read from private field"), o ? o.call(s) : i.get(s)), f = (s, i, o) => i.has(s) ? T("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, o), d = (s, i, o, r) => (U(s, i, "write to private field"), r ? r.call(s, o) : i.set(s, o), o);
 import { __runInitializers as l, __esDecorate as b } from "tslib";
-import { css as G, LitElement as j } from "lit";
-import { customElement as M, property as u } from "lit/decorators.js";
-import { html as P, unsafeStatic as B } from "lit/static-html.js";
-import { SbbConnectedAbortController as q } from "../core/controllers.js";
-import { forceType as F } from "../core/decorators.js";
-import { EventEmitter as v } from "../core/eventing.js";
-import { SbbHydrationMixin as J } from "../core/mixins.js";
-const K = G`*,:before,:after{box-sizing:border-box}:host{--sbb-expansion-panel-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-expansion-panel-background-color: var(--sbb-color-white);--sbb-expansion-panel-content-visibility: hidden;--sbb-expansion-panel-border-width: var(--sbb-border-width-1x);--sbb-expansion-panel-border-color: var(--sbb-color-cloud);--sbb-expansion-panel-border-block-start-width: var(--sbb-expansion-panel-border-width);--sbb-expansion-panel-border-block-start-color: var(--sbb-color-cloud);--sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);--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);--sbb-expansion-panel-title-gap: var(--sbb-spacing-fixed-4x);--sbb-expansion-panel-icon-size: var(--sbb-size-icon-ui-medium);display:block}:host([size=s]){--sbb-expansion-panel-title-gap: var(--sbb-spacing-fixed-2x)}@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-content-visibility: visible}:host([data-accordion][data-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([data-accordion]:not([data-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([data-accordion][data-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([data-accordion]:not([data-accordion-last])){--sbb-expansion-panel-end-end-radius: 0;--sbb-expansion-panel-end-start-radius: 0}:host([color=milk]){--sbb-expansion-panel-background-color: var(--sbb-color-milk)}: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][data-accordion]:not([data-accordion-first])){--sbb-expansion-panel-border-block-start-width: var(--sbb-spacing-fixed-1x)}@media (forced-colors: active){:host([borderless][data-accordion]:not([data-accordion-first])){--sbb-expansion-panel-border-block-start-width: 0}}:host(:not([disabled])[data-toggle-hover]){--sbb-expansion-panel-background-color: var(--sbb-color-milk)}@media (forced-colors: active){:host(:not([disabled])[data-toggle-hover]){--sbb-expansion-panel-border-color: Highlight;--sbb-expansion-panel-border-block-start-color: Highlight}}:host(:not([disabled])[color=milk][data-toggle-hover]){--sbb-expansion-panel-background-color: var(--sbb-color-white)}.sbb-expansion-panel{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}.sbb-expansion-panel__header{margin:0}.sbb-expansion-panel__content-wrapper{display:grid;visibility:var(--sbb-expansion-panel-content-visibility);grid-template-rows:0fr;opacity:0}:host([data-state=opened]) .sbb-expansion-panel__content-wrapper{grid-template-rows:1fr;opacity:1}:host([data-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([data-state=closing]) .sbb-expansion-panel__content-wrapper{animation-name:close;animation-duration:var(--sbb-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing)}.sbb-expansion-panel__content{overflow:hidden}@keyframes open{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes open-opacity{0%{opacity:0}to{opacity:1}}@keyframes close{0%{grid-template-rows:1fr;opacity:1}to{grid-template-rows:0fr;opacity:0}}`;
-let Q = 0, ne = (() => {
+import { css as B, LitElement as G } from "lit";
+import { customElement as j, property as u } from "lit/decorators.js";
+import { html as M, unsafeStatic as Z } from "lit/static-html.js";
+import { SbbConnectedAbortController as P } from "../core/controllers.js";
+import { forceType as q } from "../core/decorators.js";
+import { isLean as F, isZeroAnimationDuration as J } from "../core/dom.js";
+import { EventEmitter as g } from "../core/eventing.js";
+import { SbbHydrationMixin as K } from "../core/mixins.js";
+const Q = B`*,:before,:after{box-sizing:border-box}:host{--sbb-expansion-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-expansion-panel-background-color: var(--sbb-color-white);--sbb-expansion-panel-content-visibility: hidden;--sbb-expansion-panel-border-width: var(--sbb-border-width-1x);--sbb-expansion-panel-border-color: var(--sbb-color-cloud);--sbb-expansion-panel-border-block-start-width: var(--sbb-expansion-panel-border-width);--sbb-expansion-panel-border-block-start-color: var(--sbb-color-cloud);--sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);--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);--sbb-expansion-panel-title-gap: var(--sbb-spacing-fixed-4x);--sbb-expansion-panel-icon-size: var(--sbb-size-icon-ui-medium);display:block}:host([size=s]){--sbb-expansion-panel-title-gap: var(--sbb-spacing-fixed-2x)}@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-content-visibility: visible}:host([data-accordion][data-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([data-accordion]:not([data-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([data-accordion][data-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([data-accordion]:not([data-accordion-last])){--sbb-expansion-panel-end-end-radius: 0;--sbb-expansion-panel-end-start-radius: 0}:host([color=milk]){--sbb-expansion-panel-background-color: var(--sbb-color-milk)}: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][data-accordion]:not([data-accordion-first])){--sbb-expansion-panel-border-block-start-width: var(--sbb-spacing-fixed-1x)}@media (forced-colors: active){:host([borderless][data-accordion]:not([data-accordion-first])){--sbb-expansion-panel-border-block-start-width: 0}}:host(:not([disabled])[data-toggle-hover]){--sbb-expansion-panel-background-color: var(--sbb-color-milk)}@media (forced-colors: active){:host(:not([disabled])[data-toggle-hover]){--sbb-expansion-panel-border-color: Highlight;--sbb-expansion-panel-border-block-start-color: Highlight}}:host(:not([disabled])[color=milk][data-toggle-hover]){--sbb-expansion-panel-background-color: var(--sbb-color-white)}.sbb-expansion-panel{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}.sbb-expansion-panel__header{margin:0}.sbb-expansion-panel__content-wrapper{display:grid;visibility:var(--sbb-expansion-panel-content-visibility);grid-template-rows:0fr;opacity:0}:host([data-state=opened]) .sbb-expansion-panel__content-wrapper{grid-template-rows:1fr;opacity:1}:host([data-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([data-state=closing]) .sbb-expansion-panel__content-wrapper{animation-name:close;animation-duration:var(--sbb-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing)}.sbb-expansion-panel__content{overflow:hidden}@keyframes open{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes open-opacity{0%{opacity:0}to{opacity:1}}@keyframes close{0%{grid-template-rows:1fr;opacity:1}to{grid-template-rows:0fr;opacity:0}}`;
+let V = 0, le = (() => {
   var c, h, _, x, n;
-  let s = [M("sbb-expansion-panel")], i, o = [], r, k = J(j), g = [], z, y = [], A = [], S, R = [], E = [], C, O, L, I = [], $ = [], D, H = [], N = [];
+  let s = [j("sbb-expansion-panel")], i, o = [], r, k = K(G), v = [], y, z = [], A = [], C, S = [], R = [], E, O, L, I = [], D = [], $, H = [], N = [];
   var p = (n = class extends k {
     constructor() {
       super(...arguments);
@@ -22,7 +23,7 @@ let Q = 0, ne = (() => {
       f(this, h);
       f(this, _);
       f(this, x);
-      d(this, c, (l(this, g), l(this, y, null))), d(this, h, (l(this, A), l(this, R, "white"))), this._expanded = (l(this, E), !1), this._disabled = !1, d(this, _, l(this, I, !1)), d(this, x, (l(this, $), l(this, H, "l"))), this._willOpen = (l(this, N), new v(this, p.events.willOpen)), this._didOpen = new v(this, p.events.didOpen), this._willClose = new v(this, p.events.willClose), this._didClose = new v(this, p.events.didClose), this._progressiveId = `-${++Q}`, this._abort = new q(this), this._initialized = !1;
+      d(this, c, (l(this, v), l(this, z, null))), d(this, h, (l(this, A), l(this, S, "white"))), this._expanded = (l(this, R), !1), this._disabled = !1, d(this, _, l(this, I, !1)), d(this, x, (l(this, D), l(this, H, F() ? "s" : "l"))), this._willOpen = (l(this, N), new g(this, p.events.willOpen, { cancelable: !0 })), this._didOpen = new g(this, p.events.didOpen, { cancelable: !0 }), this._willClose = new g(this, p.events.willClose, { cancelable: !0 }), this._didClose = new g(this, p.events.didClose, { cancelable: !0 }), this._progressiveId = `-${++V}`, this._abort = new P(this), this._initialized = !1;
     }
     /** Heading level; if unset, a `div` will be rendered. */
     get titleLevel() {
@@ -59,7 +60,10 @@ let Q = 0, ne = (() => {
     set borderless(t) {
       d(this, _, t);
     }
-    /** Size variant, either l or s. */
+    /**
+     * Size variant, either l or s.
+     * @default 'l' / 's' (lean)
+     */
     get size() {
       return m(this, x);
     }
@@ -96,13 +100,22 @@ let Q = 0, ne = (() => {
     }
     _onExpandedChange() {
       var t, e;
-      (t = this._headerRef) == null || t.setAttribute("aria-expanded", String(this.expanded)), (e = this._contentRef) == null || e.setAttribute("aria-hidden", String(!this.expanded)), this.expanded ? this._open(!this._initialized) : this._state === "opened" && this._close();
+      (t = this._headerRef) == null || t.setAttribute("aria-expanded", String(this.expanded)), (e = this._contentRef) == null || e.setAttribute("aria-hidden", String(!this.expanded)), this.expanded ? this._open() : this._state === "opened" && this._close();
     }
-    _open(t = !1) {
-      this._state = "opening", this._willOpen.emit(), t && (this._state = "opened", this._didOpen.emit());
+    _open() {
+      this._state = "opening", this._willOpen.emit(), (!this._initialized || this._isZeroAnimationDuration()) && this._handleOpening();
     }
     _close() {
-      this._state = "closing", this._willClose.emit();
+      this._state = "closing", this._willClose.emit(), this._isZeroAnimationDuration() && this._handleClosing();
+    }
+    _isZeroAnimationDuration() {
+      return J(this, "--sbb-expansion-panel-animation-duration");
+    }
+    _handleOpening() {
+      this._state = "opened", this._didOpen.emit();
+    }
+    _handleClosing() {
+      this._state = "closed", this._didClose.emit();
     }
     _updateDisabledOnHeader(t) {
       this._headerRef && (this._headerRef.disabled = t);
@@ -112,15 +125,15 @@ let Q = 0, ne = (() => {
       this._headerRef === e && this._contentRef === a || (e && this._headerRef !== e && (e.id || (e.id = `sbb-expansion-panel-header${this._progressiveId}`), e.setAttribute("aria-expanded", String(this.expanded)), e.toggleAttribute("disabled", this.disabled), e.setAttribute("data-size", String(this.size))), a && this._contentRef !== a && (a.id || (a.id = `sbb-expansion-panel-content${this._progressiveId}`), a.setAttribute("aria-hidden", String(!this.expanded)), a.setAttribute("data-size", String(this.size))), this._headerRef = e, this._contentRef = a, this._headerRef && this._contentRef && (this._headerRef.setAttribute("aria-controls", this._contentRef.id), this._contentRef.setAttribute("aria-labelledby", this._headerRef.id), this._contentRef.toggleAttribute("data-icon-space", this._headerRef.hasAttribute("data-icon"))));
     }
     _onAnimationEnd(t) {
-      t.animationName === "open-opacity" && this._state === "opening" ? (this._state = "opened", this._didOpen.emit()) : t.animationName === "close" && this._state === "closing" && (this._state = "closed", this._didClose.emit());
+      t.animationName === "open-opacity" && this._state === "opening" ? this._handleOpening() : t.animationName === "close" && this._state === "closing" && this._handleClosing();
     }
     render() {
       const t = this.titleLevel ? `h${this.titleLevel}` : "div";
-      return P`
+      return M`
       <div class="sbb-expansion-panel">
-        <${B(t)} class="sbb-expansion-panel__header">
+        <${Z(t)} class="sbb-expansion-panel__header">
           <slot name="header" @slotchange=${this._handleSlotchange}></slot>
-        </${B(t)}>
+        </${Z(t)}>
         <div class="sbb-expansion-panel__content-wrapper" @animationend=${this._onAnimationEnd}>
           <span class="sbb-expansion-panel__content">
             <slot name="content" @slotchange=${this._handleSlotchange}></slot>
@@ -131,20 +144,20 @@ let Q = 0, ne = (() => {
     }
   }, c = new WeakMap(), h = new WeakMap(), _ = new WeakMap(), x = new WeakMap(), r = n, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(k[Symbol.metadata] ?? null) : void 0;
-    z = [u({ attribute: "title-level" })], S = [u()], C = [u({ reflect: !0, type: Boolean })], O = [u({ reflect: !0, type: Boolean })], L = [F(), u({ reflect: !0, type: Boolean })], D = [u({ reflect: !0 })], b(n, null, z, { kind: "accessor", name: "titleLevel", static: !1, private: !1, access: { has: (e) => "titleLevel" in e, get: (e) => e.titleLevel, set: (e, a) => {
+    y = [u({ attribute: "title-level" })], C = [u()], E = [u({ reflect: !0, type: Boolean })], O = [u({ reflect: !0, type: Boolean })], L = [q(), u({ reflect: !0, type: Boolean })], $ = [u({ reflect: !0 })], b(n, null, y, { kind: "accessor", name: "titleLevel", static: !1, private: !1, access: { has: (e) => "titleLevel" in e, get: (e) => e.titleLevel, set: (e, a) => {
       e.titleLevel = a;
-    } }, metadata: t }, y, A), b(n, null, S, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (e) => "color" in e, get: (e) => e.color, set: (e, a) => {
+    } }, metadata: t }, z, A), b(n, null, C, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (e) => "color" in e, get: (e) => e.color, set: (e, a) => {
       e.color = a;
-    } }, metadata: t }, R, E), b(n, null, C, { kind: "setter", name: "expanded", static: !1, private: !1, access: { has: (e) => "expanded" in e, set: (e, a) => {
+    } }, metadata: t }, S, R), b(n, null, E, { kind: "setter", name: "expanded", static: !1, private: !1, access: { has: (e) => "expanded" in e, set: (e, a) => {
       e.expanded = a;
-    } }, metadata: t }, null, g), b(n, null, O, { kind: "setter", name: "disabled", static: !1, private: !1, access: { has: (e) => "disabled" in e, set: (e, a) => {
+    } }, metadata: t }, null, v), b(n, null, O, { kind: "setter", name: "disabled", static: !1, private: !1, access: { has: (e) => "disabled" in e, set: (e, a) => {
       e.disabled = a;
-    } }, metadata: t }, null, g), b(n, null, L, { kind: "accessor", name: "borderless", static: !1, private: !1, access: { has: (e) => "borderless" in e, get: (e) => e.borderless, set: (e, a) => {
+    } }, metadata: t }, null, v), b(n, null, L, { kind: "accessor", name: "borderless", static: !1, private: !1, access: { has: (e) => "borderless" in e, get: (e) => e.borderless, set: (e, a) => {
       e.borderless = a;
-    } }, metadata: t }, I, $), b(n, null, D, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, a) => {
+    } }, metadata: t }, I, D), b(n, null, $, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, a) => {
       e.size = a;
     } }, metadata: t }, H, N), b(null, i = { value: r }, s, { kind: "class", name: r.name, metadata: t }, null, o), p = r = i.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), n.styles = K, n.events = {
+  })(), n.styles = Q, n.events = {
     willOpen: "willOpen",
     didOpen: "didOpen",
     willClose: "willClose",
@@ -153,5 +166,5 @@ let Q = 0, ne = (() => {
   return p = r;
 })();
 export {
-  ne as SbbExpansionPanelElement
+  le as SbbExpansionPanelElement
 };

package/file-selector/common/file-selector-common.d.ts

@@ -0,0 +1,23 @@
+import { LitElement, TemplateResult } from 'lit';
+import { SbbSecondaryButtonStaticElement } from '../../button.js';
+import { SbbLanguageController } from '../../core/controllers.js';
+import { FormRestoreReason, FormRestoreState, SbbFormAssociatedMixinType, Constructor } from '../../core/mixins.js';
+export declare abstract class SbbFileSelectorCommonElementMixinType extends SbbFormAssociatedMixinType {
+    accessor size: 's' | 'm';
+    accessor multiple: boolean;
+    accessor multipleMode: 'default' | 'persistent';
+    accessor accept: string;
+    accessor accessibilityLabel: string;
+    accessor disabled: boolean;
+    accessor files: Readonly<File>[];
+    protected formDisabled: boolean;
+    protected loadButton: SbbSecondaryButtonStaticElement;
+    protected language: SbbLanguageController;
+    protected abstract renderTemplate(input: TemplateResult): TemplateResult;
+    protected createFileList(files: FileList): void;
+    protected updateFormValue(): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: FormRestoreState | null, reason: FormRestoreReason): void;
+}
+export declare const SbbFileSelectorCommonElementMixin: <T extends Constructor<LitElement>>(superclass: T) => Constructor<SbbFileSelectorCommonElementMixinType> & T;
+//# sourceMappingURL=file-selector-common.d.ts.map

package/file-selector/common/file-selector-common.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-selector-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/file-selector/common/file-selector-common.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAMtD,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,iBAAiB,CAAC;AAEvE,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AASlE,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAGrB,KAAK,0BAA0B,EAC/B,KAAK,WAAW,EACjB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,kCAAkC,CAAC;AAC1C,OAAO,yCAAyC,CAAC;AACjD,OAAO,eAAe,CAAC;AAEvB,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,qCAAsC,SAAQ,0BAA0B;IACpG,SAAgB,IAAI,EAAE,GAAG,GAAG,GAAG,CAAC;IAChC,SAAgB,QAAQ,EAAE,OAAO,CAAC;IAClC,SAAgB,YAAY,EAAE,SAAS,GAAG,YAAY,CAAC;IACvD,SAAgB,MAAM,EAAE,MAAM,CAAC;IAC/B,SAAgB,kBAAkB,EAAE,MAAM,CAAC;IAC3C,SAAgB,QAAQ,EAAE,OAAO,CAAC;IAClC,SAAgB,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;IACxC,SAAS,CAAC,YAAY,EAAE,OAAO,CAAC;IAChC,SAAS,CAAC,UAAU,EAAE,+BAA+B,CAAC;IACtD,SAAS,CAAC,QAAQ,EAAE,qBAAqB,CAAC;IAC1C,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,KAAK,EAAE,cAAc,GAAG,cAAc;IACxE,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,QAAQ,GAAG,IAAI;IAC/C,SAAS,CAAC,eAAe,IAAI,IAAI;IAC1B,iBAAiB,IAAI,IAAI;IACzB,wBAAwB,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAAE,MAAM,EAAE,iBAAiB,GAAG,IAAI;CACjG;AAGD,eAAO,MAAM,iCAAiC,GAAI,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,cACrE,CAAC,KACZ,WAAW,CAAC,qCAAqC,CAAC,GAAG,CAmPvD,CAAC"}

package/file-selector/common.d.ts

@@ -0,0 +1,2 @@
+export * from './common/file-selector-common.js';
+//# sourceMappingURL=common.d.ts.map

package/file-selector/common.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/elements/file-selector/common.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC;AAEjD,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,+CAA+C,CAAC"}

package/file-selector/common.js

@@ -0,0 +1,210 @@
+var N = (s) => {
+  throw TypeError(s);
+};
+var j = (s, a, r) => a.has(s) || N("Cannot " + r);
+var _ = (s, a, r) => (j(s, a, "read from private field"), r ? r.call(s) : a.get(s)), g = (s, a, r) => a.has(s) ? N("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(s) : a.set(s, r), o = (s, a, r, f) => (j(s, a, "write to private field"), f ? f.call(s, r) : a.set(s, r), r);
+import { __runInitializers as n, __esDecorate as c } from "tslib";
+import { nothing as x, css as H } from "lit";
+import { property as b } from "lit/decorators.js";
+import { ref as V } from "lit/directives/ref.js";
+import { html as v, unsafeStatic as y } from "lit/static-html.js";
+import { sbbInputModalityDetector as W } from "../core/a11y.js";
+import { SbbLanguageController as O } from "../core/controllers.js";
+import { forceType as z } from "../core/decorators.js";
+import { isLean as J } from "../core/dom.js";
+import { EventEmitter as K, forwardEventToHost as Q } from "../core/eventing.js";
+import { i18nFileSelectorCurrentlySelected as U, i18nFileSelectorDeleteFile as X, i18nFileSelectorButtonLabel as Y } from "../core/i18n.js";
+import { SbbDisabledMixin as Z, SbbFormAssociatedMixin as ee } from "../core/mixins.js";
+import "../button/secondary-button.js";
+import "../button/secondary-button-static.js";
+import "../icon.js";
+const ge = (s) => (() => {
+  var h, d, u, p, m, l;
+  let r = Z(ee(s)), f = [], E, M = [], w = [], L, $ = [], k = [], F, R = [], A = [], I, T = [], B = [], P, S = [], C = [], D, G;
+  return l = class extends r {
+    constructor() {
+      super(...arguments);
+      g(this, h);
+      g(this, d);
+      g(this, u);
+      g(this, p);
+      g(this, m);
+      o(this, h, (n(this, f), n(this, M, J() ? "s" : "m"))), o(this, d, (n(this, w), n(this, $, !1))), o(this, u, (n(this, k), n(this, R, "default"))), o(this, p, (n(this, A), n(this, T, ""))), o(this, m, (n(this, B), n(this, S, ""))), this._files = (n(this, C), []), this._fileChangedEvent = new K(this, l.events.fileChangedEvent), this._suffixes = ["B", "kB", "MB", "GB", "TB"], this.language = new O(this);
+    }
+    /**
+     * Size variant, either s or m.
+     * @default 'm' / 's' (lean)
+     */
+    get size() {
+      return _(this, h);
+    }
+    set size(t) {
+      o(this, h, t);
+    }
+    /** Whether more than one file can be selected. */
+    get multiple() {
+      return _(this, d);
+    }
+    set multiple(t) {
+      o(this, d, t);
+    }
+    /** Whether the newly added files should override the previously added ones. */
+    get multipleMode() {
+      return _(this, u);
+    }
+    set multipleMode(t) {
+      o(this, u, t);
+    }
+    /** A comma-separated list of allowed unique file type specifiers. */
+    get accept() {
+      return _(this, p);
+    }
+    set accept(t) {
+      o(this, p, t);
+    }
+    /** This will be forwarded as aria-label to the native input element. */
+    get accessibilityLabel() {
+      return _(this, m);
+    }
+    set accessibilityLabel(t) {
+      o(this, m, t);
+    }
+    /** The path of the first selected file. Empty string ('') if no file is selected */
+    set value(t) {
+      this._hiddenInput.value = t ?? "", t || (this.files = []);
+    }
+    get value() {
+      var t;
+      return (t = this._hiddenInput) == null ? void 0 : t.value;
+    }
+    /** The list of selected files. */
+    set files(t) {
+      this._files = t ?? [];
+      const e = new DataTransfer();
+      this.files.forEach((i) => e.items.add(i)), this._hiddenInput.files = e.files, this.updateFormValue();
+    }
+    get files() {
+      return this._files;
+    }
+    /**
+     * Form type of element.
+     * @default 'file'
+     */
+    get type() {
+      return "file";
+    }
+    formResetCallback() {
+      this.files = [];
+    }
+    formStateRestoreCallback(t, e) {
+      t && (this.files = t.map(([i, q]) => q));
+    }
+    updateFormValue() {
+      const t = new FormData();
+      this.files.forEach((e) => t.append(this.name, e)), this.internals.setFormValue(t);
+    }
+    _checkFileEquality(t, e) {
+      return t.name === e.name && t.size === e.size && t.lastModified === e.lastModified;
+    }
+    _onFocus() {
+      W.mostRecentModality === "keyboard" && this.loadButton.toggleAttribute("data-focus-visible", !0);
+    }
+    _onBlur() {
+      W.mostRecentModality === "keyboard" && this.loadButton.removeAttribute("data-focus-visible");
+    }
+    _readFiles(t) {
+      const e = t.target;
+      e.files && this.createFileList(e.files), Q(t, this);
+    }
+    createFileList(t) {
+      !this.multiple || this.multipleMode !== "persistent" || this.files.length === 0 ? this.files = Array.from(t) : this.files = Array.from(t).filter(
+        // Remove duplicates
+        (e) => this.files.findIndex((i) => this._checkFileEquality(e, i)) === -1
+      ).concat(this.files), this._updateA11yLiveRegion(), this._fileChangedEvent.emit(this.files);
+    }
+    _removeFile(t) {
+      this.files = this.files.filter((e) => !this._checkFileEquality(t, e)), this._updateA11yLiveRegion(), this.dispatchEvent(new Event("input", { composed: !0, bubbles: !0 })), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._fileChangedEvent.emit(this.files);
+    }
+    /** Calculates the correct unit for the file's size. */
+    _formatFileSize(t) {
+      const e = Math.floor(Math.log(t) / Math.log(1024));
+      return `${(t / Math.pow(1024, e)).toFixed(0)} ${this._suffixes[e]}`;
+    }
+    _updateA11yLiveRegion() {
+      this._liveRegion.innerText = U(this.files.map((t) => t.name))[this.language.current];
+    }
+    _renderFileList() {
+      const t = this.files.length > 1 ? { WRAPPER: "ul", ELEMENT: "li" } : { WRAPPER: "div", ELEMENT: "span" };
+      return v`
+      <${y(t.WRAPPER)} class='sbb-file-selector__file-list'>
+        ${this.files.map((e) => v`
+            <${y(t.ELEMENT)} class='sbb-file-selector__file'>
+                <span class='sbb-file-selector__file-details'>
+                  <span class='sbb-file-selector__file-name'>${e.name}</span>
+                  <span class='sbb-file-selector__file-size'>${this._formatFileSize(e.size)}</span>
+                </span>
+              <sbb-secondary-button
+                size='${this.size}'
+                icon-name='trash-small'
+                @click='${() => this._removeFile(e)}'
+                aria-label='${`${X[this.language.current]} - ${e.name}`}'
+              ></sbb-secondary-button>
+            </${y(t.ELEMENT)}>`)}
+      </${y(t.WRAPPER)}>
+    `;
+    }
+    render() {
+      const t = this.accessibilityLabel ? `${Y[this.language.current]} - ${this.accessibilityLabel}` : void 0;
+      return v`
+        <div class="sbb-file-selector">
+          ${this.renderTemplate(v`<input
+              class="sbb-file-selector__visually-hidden"
+              type="file"
+              ?disabled="${this.disabled || this.formDisabled}"
+              ?multiple="${this.multiple}"
+              accept="${this.accept || x}"
+              aria-label="${t || x}"
+              @change="${this._readFiles}"
+              @focus="${this._onFocus}"
+              @blur="${this._onBlur}"
+              ${V((e) => {
+        this._hiddenInput = e;
+      })}
+            />`)}
+          <p
+            role="status"
+            class="sbb-file-selector__visually-hidden"
+            ${V((e) => this._liveRegion = e)}
+          ></p>
+          ${this.files.length > 0 ? this._renderFileList() : x}
+          <div class="sbb-file-selector__error">
+            <slot name="error"></slot>
+          </div>
+        </div>
+      `;
+    }
+  }, h = new WeakMap(), d = new WeakMap(), u = new WeakMap(), p = new WeakMap(), m = new WeakMap(), (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
+    E = [b({ reflect: !0 })], L = [z(), b({ type: Boolean })], F = [b({ attribute: "multiple-mode" })], I = [z(), b()], P = [z(), b({ attribute: "accessibility-label" })], D = [b({ attribute: !1 })], G = [b({ attribute: !1 })], c(l, null, E, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, i) => {
+      e.size = i;
+    } }, metadata: t }, M, w), c(l, null, L, { kind: "accessor", name: "multiple", static: !1, private: !1, access: { has: (e) => "multiple" in e, get: (e) => e.multiple, set: (e, i) => {
+      e.multiple = i;
+    } }, metadata: t }, $, k), c(l, null, F, { kind: "accessor", name: "multipleMode", static: !1, private: !1, access: { has: (e) => "multipleMode" in e, get: (e) => e.multipleMode, set: (e, i) => {
+      e.multipleMode = i;
+    } }, metadata: t }, R, A), c(l, null, I, { kind: "accessor", name: "accept", static: !1, private: !1, access: { has: (e) => "accept" in e, get: (e) => e.accept, set: (e, i) => {
+      e.accept = i;
+    } }, metadata: t }, T, B), c(l, null, P, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (e) => "accessibilityLabel" in e, get: (e) => e.accessibilityLabel, set: (e, i) => {
+      e.accessibilityLabel = i;
+    } }, metadata: t }, S, C), c(l, null, D, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (e) => "value" in e, set: (e, i) => {
+      e.value = i;
+    } }, metadata: t }, null, f), c(l, null, G, { kind: "setter", name: "files", static: !1, private: !1, access: { has: (e) => "files" in e, set: (e, i) => {
+      e.files = i;
+    } }, metadata: t }, null, f), t && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), l.events = {
+    fileChangedEvent: "fileChanged"
+  }, l;
+})(), ve = H`*,:before,:after{box-sizing:border-box}:host{--sbb-file-selector-color: var(--sbb-color-black);--sbb-file-selector-subtitle-color: var(--sbb-color-granite);--sbb-file-selector-background-color: var(--sbb-color-white);--sbb-file-selector-border-color: var(--sbb-color-cloud);--sbb-file-selector-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-file-selector-transition-easing-function: var(--sbb-animation-easing);display:block;width:20rem}@media (forced-colors: active){:host(:disabled){--sbb-file-selector-color: GrayText;--sbb-file-selector-subtitle-color: GrayText;--sbb-file-selector-border-color: GrayText}}:host([data-active]){--sbb-file-selector-background-color: var(--sbb-color-milk);--sbb-file-selector-border-color: var(--sbb-color-storm)}@media (forced-colors: active){:host([data-active]){--sbb-file-selector-border-color: Highlight}}.sbb-file-selector__input-container{-webkit-tap-highlight-color:transparent;display:flex;flex-direction:column}.sbb-file-selector__visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-file-selector__file-list{display:flex;flex-direction:column;row-gap:var(--sbb-spacing-fixed-3x);margin-block:0;padding-inline:0;padding-block:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-1x)}.sbb-file-selector__file{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;gap:var(--sbb-spacing-fixed-4x);align-items:center;justify-content:space-between}.sbb-file-selector__file-details{display:flex;flex:1;justify-content:space-between;gap:var(--sbb-spacing-fixed-4x);overflow:auto}.sbb-file-selector__file-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-file-selector__file-size{white-space:nowrap;color:var(--sbb-color-metal)}:host(:not([data-slot-names~=error])) .sbb-file-selector__error{display:none}`;
+export {
+  ge as SbbFileSelectorCommonElementMixin,
+  ve as fileSelectorCommonStyle
+};

package/file-selector/file-selector/file-selector.d.ts

@@ -0,0 +1,24 @@
+import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
+declare const SbbFileSelectorElement_base: import('../../core/mixins.js').Constructor<import('../common.js').SbbFileSelectorCommonElementMixinType> & typeof LitElement;
+/**
+ * It allows to select one or more file from storage devices and display them.
+ *
+ * @slot error - Use this to provide a `sbb-form-error` to show an error message.
+ * @event {CustomEvent<Readonly<File>[]>} fileChanged - An event which is emitted each time the file list changes.
+ * @event change - An event which is emitted each time the user modifies the value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value
+ * @event input - An event which is emitted each time the value changes as a direct result of a user action.
+ */
+export declare class SbbFileSelectorElement extends SbbFileSelectorElement_base {
+    static styles: CSSResultGroup;
+    static readonly events: {
+        readonly fileChangedEvent: "fileChanged";
+    };
+    protected renderTemplate(input: TemplateResult): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-file-selector': SbbFileSelectorElement;
+    }
+}
+export {};
+//# sourceMappingURL=file-selector.d.ts.map

package/file-selector/file-selector/file-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-selector.d.ts","sourceRoot":"","sources":["../../../../src/elements/file-selector/file-selector/file-selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAU3E,OAAO,kCAAkC,CAAC;AAC1C,OAAO,yCAAyC,CAAC;AACjD,OAAO,eAAe,CAAC;;AAEvB;;;;;;;GAOG;AACH,qBAGM,sBAAuB,SAAQ,2BAA6C;IAChF,OAAuB,MAAM,EAAE,cAAc,CAA2B;IACxE,gBAAuB,MAAM;;MAElB;cAEQ,cAAc,CAAC,KAAK,EAAE,cAAc,GAAG,cAAc;CAmBzE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}

package/file-selector/file-selector-dropzone/file-selector-dropzone.d.ts

@@ -0,0 +1,33 @@
+import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
+declare const SbbFileSelectorDropzoneElement_base: import('../../core/mixins.js').Constructor<import('../common.js').SbbFileSelectorCommonElementMixinType> & typeof LitElement;
+/**
+ * It allows to select one or more file from storage devices via button click or drag and drop, and display them.
+ *
+ * @slot error - Use this to provide a `sbb-form-error` to show an error message.
+ * @event {CustomEvent<Readonly<File>[]>} fileChanged - An event which is emitted each time the file list changes.
+ * @event change - An event which is emitted each time the user modifies the value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value
+ * @event input - An event which is emitted each time the value changes as a direct result of a user action.
+ */
+export declare class SbbFileSelectorDropzoneElement extends SbbFileSelectorDropzoneElement_base {
+    static styles: CSSResultGroup;
+    static readonly events: {
+        readonly fileChangedEvent: "fileChanged";
+    };
+    /** The title displayed in `dropzone` variant. */
+    accessor titleContent: string;
+    private _counter;
+    private _dragTarget?;
+    private _blockEvent;
+    private _onDragEnter;
+    private _onDragLeave;
+    private _onFileDrop;
+    private _setDragState;
+    protected renderTemplate(input: TemplateResult): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-file-selector-dropzone': SbbFileSelectorDropzoneElement;
+    }
+}
+export {};
+//# sourceMappingURL=file-selector-dropzone.d.ts.map

package/file-selector/file-selector-dropzone/file-selector-dropzone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-selector-dropzone.d.ts","sourceRoot":"","sources":["../../../../src/elements/file-selector/file-selector-dropzone/file-selector-dropzone.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAU3E,OAAO,kCAAkC,CAAC;AAC1C,OAAO,yCAAyC,CAAC;AACjD,OAAO,eAAe,CAAC;;AAIvB;;;;;;;GAOG;AACH,qBAGM,8BAA+B,SAAQ,mCAA6C;IACxF,OAAuB,MAAM,EAAE,cAAc,CAAoC;IACjF,gBAAuB,MAAM;;MAElB;IAEX,iDAAiD;IACjD,SAEgB,YAAY,EAAE,MAAM,CAAM;IAI1C,OAAO,CAAC,QAAQ,CAAa;IAC7B,OAAO,CAAC,WAAW,CAAC,CAAc;IAElC,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,aAAa;cASF,cAAc,CAAC,KAAK,EAAE,cAAc,GAAG,cAAc;CAqCzE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,4BAA4B,EAAE,8BAA8B,CAAC;KAC9D;CACF"}

package/file-selector/file-selector-dropzone.d.ts

@@ -0,0 +1,2 @@
+export * from './file-selector-dropzone/file-selector-dropzone.js';
+//# sourceMappingURL=file-selector-dropzone.d.ts.map

package/file-selector/file-selector-dropzone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-selector-dropzone.d.ts","sourceRoot":"","sources":["../../../src/elements/file-selector/file-selector-dropzone.ts"],"names":[],"mappings":"AAAA,cAAc,oDAAoD,CAAC"}