@sbb-esta/lyne-elements 3.0.0-next.3 → 3.0.0

package/chip/chip/chip.component.js

@@ -1,33 +1,32 @@
-var v = (e) => {
+var p = (e) => {
   throw TypeError(e);
 };
-var m = (e, r, b) => r.has(e) || v("Cannot " + b);
-var f = (e, r, b) => (m(e, r, "read from private field"), b ? b.call(e) : r.get(e)), g = (e, r, b) => r.has(e) ? v("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(e) : r.set(e, b), c = (e, r, b, o) => (m(e, r, "write to private field"), o ? o.call(e, b) : r.set(e, b), b);
-import { __runInitializers as n, __esDecorate as _ } from "tslib";
-import { css as y, LitElement as w, html as k } from "lit";
-import { customElement as S, property as z } from "lit/decorators.js";
-import { SbbLanguageController as D } from "../../core/controllers.js";
-import { EventEmitter as E } from "../../core/eventing.js";
-import { i18nChipDelete as q } from "../../core/i18n.js";
-import { SbbNegativeMixin as C, SbbDisabledMixin as I, SbbReadonlyMixin as M, SbbElementInternalsMixin as U } from "../../core/mixins.js";
+var v = (e, r, b) => r.has(e) || p("Cannot " + b);
+var m = (e, r, b) => (v(e, r, "read from private field"), b ? b.call(e) : r.get(e)), f = (e, r, b) => r.has(e) ? p("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(e) : r.set(e, b), l = (e, r, b, o) => (v(e, r, "write to private field"), o ? o.call(e, b) : r.set(e, b), b);
+import { __runInitializers as c, __esDecorate as g } from "tslib";
+import { css as x, LitElement as y, html as w } from "lit";
+import { customElement as k, property as S } from "lit/decorators.js";
+import { SbbLanguageController as z } from "../../core/controllers.js";
+import { i18nChipDelete as D } from "../../core/i18n.js";
+import { SbbNegativeMixin as E, SbbDisabledMixin as C, SbbReadonlyMixin as q, SbbElementInternalsMixin as B } from "../../core/mixins.js";
 import "../../button/mini-button.js";
 import "../../screen-reader-only.js";
-const A = y`*,:before,:after{box-sizing:border-box}:host{--sbb-chip-background-color: var(--sbb-color-milk);--sbb-chip-border: var(--sbb-border-width-1x) solid var(--sbb-chip-border-color);--sbb-chip-border-color: var(--sbb-color-cloud);--sbb-chip-border-radius: var(--sbb-border-radius-2x);--sbb-chip-color: var(--sbb-color-granite);--sbb-chip-color-active: var(--sbb-color-charcoal);--sbb-chip-color-hover: var(--sbb-color-charcoal);--sbb-chip-background-color-active: var(--sbb-color-white);--sbb-chip-background-color-hover: var(--sbb-color-white);--sbb-chip-height: 1.5rem;--sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-chip-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );outline:none!important;display:inline-block}:host([negative]){--sbb-chip-border-color: var(--sbb-color-iron);--sbb-chip-background-color: var(--sbb-color-charcoal);--sbb-chip-color: var(--sbb-color-cloud);--sbb-chip-color-active: var(--sbb-color-white);--sbb-chip-color-hover: var(--sbb-color-white);--sbb-chip-background-color-active: var(--sbb-color-midnight);--sbb-chip-background-color-hover: var(--sbb-color-midnight);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}.sbb-chip{background-color:var(--sbb-chip-background-color);border-radius:var(--sbb-chip-border-radius);color:var(--sbb-chip-color);display:flex;align-items:stretch;height:var(--sbb-chip-height)}:host(:focus) .sbb-chip{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);--sbb-focus-outline-offset: -.0625rem;--sbb-focus-outline-style: initial}.sbb-chip__label-wrapper{border:var(--sbb-chip-border);border-inline-end:none;border-radius:var(--sbb-chip-border-radius) 0 0 var(--sbb-chip-border-radius);display:flex;align-items:center;padding-inline:var(--sbb-chip-label-padding-inline);outline:none;overflow:hidden}:host(:is([disabled],[readonly])) .sbb-chip__label-wrapper{border:var(--sbb-chip-border);border-radius:var(--sbb-chip-border-radius)}.sbb-chip__label{--sbb-text-font-size: var(--sbb-font-size-text-xxs);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);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;transition:transform var(--sbb-chip-transition-duration) var(--sbb-animation-easing)}.sbb-chip__delete{--sbb-button-border-radius: 0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0;--sbb-button-color-text: var(--sbb-chip-color);--sbb-button-color-active-background: var(--sbb-chip-background-color-active);--sbb-button-color-hover-background: var(--sbb-chip-background-color-hover);--sbb-icon-svg-width: calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);--sbb-icon-svg-height: calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);border:var(--sbb-chip-border);border-radius:0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0}:host(:is([disabled],[readonly])) .sbb-chip__delete{display:none}@media (any-hover: hover){:host(:not([disabled])) .sbb-chip__delete:hover{--sbb-button-color-text: var(--sbb-chip-color-hover)}}`;
-let J = (() => {
+const I = x`*,:before,:after{box-sizing:border-box}:host{--sbb-chip-background-color: var(--sbb-color-milk);--sbb-chip-border: var(--sbb-border-width-1x) solid var(--sbb-chip-border-color);--sbb-chip-border-color: var(--sbb-color-cloud);--sbb-chip-border-radius: var(--sbb-border-radius-2x);--sbb-chip-color: var(--sbb-color-granite);--sbb-chip-color-active: var(--sbb-color-charcoal);--sbb-chip-color-hover: var(--sbb-color-charcoal);--sbb-chip-background-color-active: var(--sbb-color-white);--sbb-chip-background-color-hover: var(--sbb-color-white);--sbb-chip-height: 1.5rem;--sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-chip-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );outline:none!important;display:inline-block}:host([negative]){--sbb-chip-border-color: var(--sbb-color-iron);--sbb-chip-background-color: var(--sbb-color-charcoal);--sbb-chip-color: var(--sbb-color-cloud);--sbb-chip-color-active: var(--sbb-color-white);--sbb-chip-color-hover: var(--sbb-color-white);--sbb-chip-background-color-active: var(--sbb-color-midnight);--sbb-chip-background-color-hover: var(--sbb-color-midnight);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}.sbb-chip{background-color:var(--sbb-chip-background-color);border-radius:var(--sbb-chip-border-radius);color:var(--sbb-chip-color);display:flex;align-items:stretch;height:var(--sbb-chip-height)}:host(:focus) .sbb-chip{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);--sbb-focus-outline-offset: -.0625rem;--sbb-focus-outline-style: initial}.sbb-chip__label-wrapper{border:var(--sbb-chip-border);border-inline-end:none;border-radius:var(--sbb-chip-border-radius) 0 0 var(--sbb-chip-border-radius);display:flex;align-items:center;padding-inline:var(--sbb-chip-label-padding-inline);outline:none;overflow:hidden}:host(:is([disabled],[readonly])) .sbb-chip__label-wrapper{border:var(--sbb-chip-border);border-radius:var(--sbb-chip-border-radius)}.sbb-chip__label{--sbb-text-font-size: var(--sbb-font-size-text-xxs);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);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;transition:transform var(--sbb-chip-transition-duration) var(--sbb-animation-easing)}.sbb-chip__delete{--sbb-button-border-radius: 0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0;--sbb-button-color-text: var(--sbb-chip-color);--sbb-button-color-active-background: var(--sbb-chip-background-color-active);--sbb-button-color-hover-background: var(--sbb-chip-background-color-hover);--sbb-icon-svg-width: calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);--sbb-icon-svg-height: calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);border:var(--sbb-chip-border);border-radius:0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0}:host(:is([disabled],[readonly])) .sbb-chip__delete{display:none}@media (any-hover: hover){:host(:not([disabled])) .sbb-chip__delete:hover{--sbb-button-color-text: var(--sbb-chip-color-hover)}}`;
+let F = (() => {
   var s, t;
-  let e = [S("sbb-chip")], r, b = [], o, d = C(I(M(U(w)))), h, u = [], p = [];
-  var l = (t = class extends d {
+  let e = [k("sbb-chip")], r, b = [], o, n = E(C(q(B(y)))), d, h = [], u = [];
+  return t = class extends n {
     constructor() {
       super(...arguments);
-      g(this, s);
-      c(this, s, n(this, u, null)), this._requestDelete = (n(this, p), new E(this, l.events.requestDelete)), this._language = new D(this);
+      f(this, s);
+      l(this, s, c(this, h, null)), this._language = (c(this, u), new z(this));
     }
     /** The value of chip. Will be used as label if nothing is slotted. */
     get value() {
-      return f(this, s);
+      return m(this, s);
     }
     set value(i) {
-      c(this, s, i);
+      l(this, s, i);
     }
     willUpdate(i) {
       super.willUpdate(i), i.has("disabled") && (this.disabled ? this.removeAttribute("tabindex") : this.setAttribute("tabindex", "-1"));
@@ -38,8 +37,11 @@ let J = (() => {
     _deleteButton() {
       return this.shadowRoot.querySelector("sbb-mini-button");
     }
+    _handleDeleteButtonClick() {
+      this.dispatchEvent(new Event("requestdelete", { bubbles: !0, composed: !0 }));
+    }
     render() {
-      return k`
+      return w`
       <div class="sbb-chip">
         <div class="sbb-chip__label-wrapper">
           <span class="sbb-chip__label">
@@ -50,23 +52,22 @@ let J = (() => {
           aria-hidden="true"
           class="sbb-chip__delete"
           icon-name="cross-tiny-small"
-          @click=${() => this._requestDelete.emit()}
+          @click=${this._handleDeleteButtonClick}
         >
         </sbb-mini-button>
-        <sbb-screen-reader-only>, ${q[this._language.current]}</sbb-screen-reader-only>
+        <sbb-screen-reader-only>, ${D[this._language.current]}</sbb-screen-reader-only>
       </div>
     `;
     }
   }, s = new WeakMap(), o = t, (() => {
-    const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
-    h = [z()], _(t, null, h, { kind: "accessor", name: "value", static: !1, private: !1, access: { has: (a) => "value" in a, get: (a) => a.value, set: (a, x) => {
-      a.value = x;
-    } }, metadata: i }, u, p), _(null, r = { value: o }, e, { kind: "class", name: o.name, metadata: i }, null, b), l = o = r.value, i && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
-  })(), t.role = "option", t.styles = A, t.events = {
-    requestDelete: "requestDelete"
-  }, n(o, b), t);
-  return l = o;
+    const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
+    d = [S()], g(t, null, d, { kind: "accessor", name: "value", static: !1, private: !1, access: { has: (a) => "value" in a, get: (a) => a.value, set: (a, _) => {
+      a.value = _;
+    } }, metadata: i }, h, u), g(null, r = { value: o }, e, { kind: "class", name: o.name, metadata: i }, null, b), o = r.value, i && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
+  })(), t.role = "option", t.styles = I, t.events = {
+    requestdelete: "requestdelete"
+  }, c(o, b), o;
 })();
 export {
-  J as SbbChipElement
+  F as SbbChipElement
 };

package/chip/chip-group/chip-group.component.d.ts

@@ -19,9 +19,6 @@ declare const SbbChipGroupElement_base: import('../../core/mixins.js').AbstractC
 /**
  * The `sbb-chip-group` component is used as a container for one or multiple `sbb-chip`.
  *
- * @event {CustomEvent<void>} change - Notifies that the component's value has changed.
- * @event {CustomEvent<void>} input - Notifies that the component's value has changed.
- * @event {CustomEvent<SbbChipInputTokenEndEventDetails>} chipInputTokenEnd - Notifies that a chip is about to be created. Can be used to customize the value and the label. Can be prevented.
  * @slot - Use the unnamed slot to add `sbb-chip` elements.
  * @overrideType value - (T = string[]) | null
  */
@@ -31,21 +28,15 @@ export declare class SbbChipGroupElement<T = string> extends SbbChipGroupElement
     static readonly events: {
         readonly input: "input";
         readonly change: "change";
-        readonly chipInputTokenEnd: "chipInputTokenEnd";
+        readonly chipinputtokenend: "chipinputtokenend";
     };
     /** Value of the form element. */
     set value(value: (T | null)[] | null);
     get value(): (T | null)[];
     /** Function that maps a chip's value to its display value. */
     accessor displayWith: ((value: T) => string) | null;
-    /** The array of keys that will trigger a `chipInputTokenEnd` event. Default `['Enter']` */
+    /** The array of keys that will trigger a `chipinputtokenend` event. Default `['Enter']` */
     accessor separatorKeys: string[];
-    /** Notifies that the component's value has changed. */
-    private _change;
-    /** Notifies that the component's value has changed. */
-    private _input;
-    /** Notifies that a chip is about to be created. Can be prevented. */
-    private _chipInputTokenEnd;
     /**
      * Listens to the changes on `readonly` and `disabled` attributes of `<input>`.
      */
@@ -84,6 +75,7 @@ export declare class SbbChipGroupElement<T = string> extends SbbChipGroupElement
      * If the input is not empty, create a chip with its value
      */
     private _createChipFromInput;
+    private _dispatchChipInputTokenEnd;
     private _deleteChip;
     /**
      * Focus an enabled chip. If none are present, focus the input
@@ -105,7 +97,7 @@ declare global {
 }
 declare global {
     interface HTMLElementEventMap {
-        chipInputTokenEnd: CustomEvent<SbbChipInputTokenEndEventDetails<any>>;
+        chipinputtokenend: CustomEvent<SbbChipInputTokenEndEventDetails<any>>;
     }
 }
 export {};

package/chip/chip-group/chip-group.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chip-group.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/chip/chip-group/chip-group.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAGnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAQb,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAMtB,MAAM,sBAAsB,CAAC;AAQ9B,MAAM,WAAW,gCAAgC,CAAC,CAAC,GAAG,MAAM;IAC1D,mDAAmD;IACnD,MAAM,EAAE,OAAO,GAAG,cAAc,CAAC;IACjC;;;;OAIG;IACH,KAAK,EAAE,CAAC,GAAG,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,QAAQ,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IACzB,oDAAoD;IACpD,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B;;AAED;;;;;;;;GAQG;AACH,qBAEM,mBAAmB,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,wBAE7C;IACC,gBAAgC,IAAI,aAAa;IACjD,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;;MAIlB;IAEX,iCAAiC;IACjC,IACW,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,IAAI,EA2B1C;IACD,IAAW,KAAK,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,CAE/B;IAED,8DAA8D;IAC9D,SACgB,WAAW,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,CAAC,GAAG,IAAI,CAAQ;IAElE,2FAA2F;IAC3F,SACgB,aAAa,EAAE,MAAM,EAAE,CAAa;IAEpD,uDAAuD;IACvD,OAAO,CAAC,OAAO,CAA2E;IAE1F,uDAAuD;IACvD,OAAO,CAAC,MAAM,CAA0E;IAExF,qEAAqE;IACrE,OAAO,CAAC,kBAAkB,CAGxB;IAEF;;OAEG;IACH,OAAO,CAAC,uBAAuB,CAEtB;IAET;;OAEG;IACH,OAAO,CAAC,2BAA2B,CAE1B;IAET,OAAO,CAAC,aAAa,CAA+B;IACpD,OAAO,CAAC,qBAAqB,CAA8B;IAC3D,OAAO,CAAC,SAAS,CAAmC;;IAYpC,iBAAiB,IAAI,IAAI;cAKtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAYtE,gBAAgB;IACT,iBAAiB,IAAI,IAAI;IAIhC,gBAAgB;IACT,wBAAwB,CAC7B,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAC9B,OAAO,EAAE,iBAAiB,GACzB,IAAI;YASO,aAAa;cAUR,cAAc,CAAC,IAAI,EAAE,WAAW,GAAG,SAAS,GAAG,OAAO;cAItD,QAAQ,IAAI,IAAI;IASnC,wCAAwC;IACxC,OAAO,CAAC,aAAa;IAIrB,gDAAgD;IAChD,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,eAAe;IA8CvB;;QAEI;IACJ,OAAO,CAAC,cAAc;IAyBtB;;QAEI;IACJ,OAAO,CAAC,eAAe;IAoBvB;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAuB5B,OAAO,CAAC,WAAW;IAOnB;;;OAGG;IACH,OAAO,CAAC,UAAU;IAgBlB,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,kBAAkB;IAwB1B,OAAO,CAAC,oBAAoB;IAK5B,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,uBAAuB;cAUZ,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,mBAAmB;QAC3B,iBAAiB,EAAE,WAAW,CAAC,gCAAgC,CAAC,GAAG,CAAC,CAAC,CAAC;KACvE;CACF"}
+{"version":3,"file":"chip-group.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/chip/chip-group/chip-group.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAGnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAMtB,MAAM,sBAAsB,CAAC;AAQ9B,MAAM,WAAW,gCAAgC,CAAC,CAAC,GAAG,MAAM;IAC1D,mDAAmD;IACnD,MAAM,EAAE,OAAO,GAAG,cAAc,CAAC;IACjC;;;;OAIG;IACH,KAAK,EAAE,CAAC,GAAG,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,QAAQ,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IACzB,oDAAoD;IACpD,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B;;AAED;;;;;GAKG;AACH,qBAEM,mBAAmB,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,wBAE7C;IACC,gBAAgC,IAAI,aAAa;IACjD,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;;MAIlB;IAEX,iCAAiC;IACjC,IACW,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,IAAI,EA2B1C;IACD,IAAW,KAAK,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,CAE/B;IAED,8DAA8D;IAC9D,SACgB,WAAW,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,CAAC,GAAG,IAAI,CAAQ;IAElE,2FAA2F;IAC3F,SACgB,aAAa,EAAE,MAAM,EAAE,CAAa;IAEpD;;OAEG;IACH,OAAO,CAAC,uBAAuB,CAEtB;IAET;;OAEG;IACH,OAAO,CAAC,2BAA2B,CAE1B;IAET,OAAO,CAAC,aAAa,CAA+B;IACpD,OAAO,CAAC,qBAAqB,CAA8B;IAC3D,OAAO,CAAC,SAAS,CAAmC;;IAYpC,iBAAiB,IAAI,IAAI;cAKtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAYtE,gBAAgB;IACT,iBAAiB,IAAI,IAAI;IAIhC,gBAAgB;IACT,wBAAwB,CAC7B,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAC9B,OAAO,EAAE,iBAAiB,GACzB,IAAI;YASO,aAAa;cAUR,cAAc,CAAC,IAAI,EAAE,WAAW,GAAG,SAAS,GAAG,OAAO;cAItD,QAAQ,IAAI,IAAI;IASnC,wCAAwC;IACxC,OAAO,CAAC,aAAa;IAIrB,gDAAgD;IAChD,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,eAAe;IA8CvB;;QAEI;IACJ,OAAO,CAAC,cAAc;IAyBtB;;QAEI;IACJ,OAAO,CAAC,eAAe;IAoBvB;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAuB5B,OAAO,CAAC,0BAA0B;IAelC,OAAO,CAAC,WAAW;IAOnB;;;OAGG;IACH,OAAO,CAAC,UAAU;IAgBlB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,kBAAkB;IAwB1B,OAAO,CAAC,oBAAoB;IAK5B,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,uBAAuB;cAUZ,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,mBAAmB;QAC3B,iBAAiB,EAAE,WAAW,CAAC,gCAAgC,CAAC,GAAG,CAAC,CAAC,CAAC;KACvE;CACF"}

package/chip/chip-group/chip-group.component.js

@@ -1,28 +1,27 @@
-var O = (s) => {
+var I = (s) => {
   throw TypeError(s);
 };
-var z = (s, a, r) => a.has(s) || O("Cannot " + r);
-var _ = (s, a, r) => (z(s, a, "read from private field"), r ? r.call(s) : a.get(s)), f = (s, a, r) => a.has(s) ? O("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(s) : a.set(s, r), m = (s, a, r, h) => (z(s, a, "write to private field"), h ? h.call(s, r) : a.set(s, r), r);
+var D = (s, a, r) => a.has(s) || I("Cannot " + r);
+var m = (s, a, r) => (D(s, a, "read from private field"), r ? r.call(s) : a.get(s)), _ = (s, a, r) => a.has(s) ? I("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(s) : a.set(s, r), d = (s, a, r, h) => (D(s, a, "write to private field"), h ? h.call(s, r) : a.set(s, r), r);
 import { __esDecorate as b, __runInitializers as c } from "tslib";
-import { css as F, LitElement as T, isServer as v, html as W } from "lit";
-import { customElement as q, property as y } from "lit/decorators.js";
-import { isArrowKeyPressed as L, getNextElementIndex as M } from "../../core/a11y.js";
-import { SbbLanguageController as V } from "../../core/controllers.js";
-import { isLean as R } from "../../core/dom.js";
-import { EventEmitter as g } from "../../core/eventing.js";
-import { i18nSelectionRequired as B, i18nChipGroupInputDescription as N } from "../../core/i18n.js";
-import { SbbRequiredMixin as G, SbbDisabledMixin as $, SbbNegativeMixin as j, SbbFormAssociatedMixin as U, SbbElementInternalsMixin as J } from "../../core/mixins.js";
-import { SbbChipElement as H } from "../chip.js";
-const P = F`*,:before,:after{box-sizing:border-box}:host{--sbb-chip-group-input-min-width: 9.375rem;max-width:100%}:host([data-size=s]:not([data-empty])){--sbb-chip-group-margin-block: .375rem .3125rem}@media (min-width: 52.5rem){:host([data-size=s]:not([data-empty])){--sbb-chip-group-margin-block: .3125rem .1875rem}}::slotted(input){flex:1 1 var(--sbb-chip-group-input-min-width)}::slotted(sbb-chip){max-width:100%}.sbb-chip-group{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-spacing-fixed-1x);align-items:center;margin-block:var(--sbb-chip-group-margin-block)}`;
-let ot = (() => {
-  var p, u, l;
-  let s = [q("sbb-chip-group")], a, r = [], h, E = G($(j(U(J(T))))), C = [], x, w, S = [], k = [], A, I = [], D = [];
-  var d = (l = class extends E {
+import { css as z, LitElement as K, isServer as f, html as F } from "lit";
+import { customElement as W, property as v } from "lit/decorators.js";
+import { isArrowKeyPressed as T, getNextElementIndex as q } from "../../core/a11y.js";
+import { SbbLanguageController as L } from "../../core/controllers.js";
+import { isLean as M } from "../../core/dom.js";
+import { i18nSelectionRequired as V, i18nChipGroupInputDescription as R } from "../../core/i18n.js";
+import { SbbRequiredMixin as B, SbbDisabledMixin as N, SbbNegativeMixin as $, SbbFormAssociatedMixin as j, SbbElementInternalsMixin as G } from "../../core/mixins.js";
+import { SbbChipElement as U } from "../chip.js";
+const J = z`*,:before,:after{box-sizing:border-box}:host{--sbb-chip-group-input-min-width: 9.375rem;max-width:100%}:host([data-size=s]:not([data-empty])){--sbb-chip-group-margin-block: .375rem .3125rem}@media (min-width: 52.5rem){:host([data-size=s]:not([data-empty])){--sbb-chip-group-margin-block: .3125rem .1875rem}}::slotted(input){flex:1 1 var(--sbb-chip-group-input-min-width)}::slotted(sbb-chip){max-width:100%}.sbb-chip-group{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-spacing-fixed-1x);align-items:center;margin-block:var(--sbb-chip-group-margin-block)}`;
+let rt = (() => {
+  var u, p, l;
+  let s = [W("sbb-chip-group")], a, r = [], h, y = B(N($(j(G(K))))), g = [], E, C, x = [], w = [], k, S = [], A = [];
+  return l = class extends y {
     constructor() {
       super();
-      f(this, p);
-      f(this, u);
-      m(this, p, (c(this, C), c(this, S, null))), m(this, u, (c(this, k), c(this, I, ["Enter"]))), this._change = (c(this, D), new g(this, d.events.change)), this._input = new g(this, d.events.input), this._chipInputTokenEnd = new g(this, d.events.chipInputTokenEnd), this._inputAttributeObserver = v ? null : new MutationObserver(() => this._reactToInputChanges()), this._formFieldAttributeObserver = v ? null : new MutationObserver(() => this._inheritSize()), this._language = new V(this), this.addEventListener?.(H.events.requestDelete, (t) => this._deleteChip(t.target)), this.addEventListener?.("keydown", (t) => this._onChipKeyDown(t));
+      _(this, u);
+      _(this, p);
+      d(this, u, (c(this, g), c(this, x, null))), d(this, p, (c(this, w), c(this, S, ["Enter"]))), this._inputAttributeObserver = (c(this, A), f ? null : new MutationObserver(() => this._reactToInputChanges())), this._formFieldAttributeObserver = f ? null : new MutationObserver(() => this._inheritSize()), this._language = new L(this), this.addEventListener?.(U.events.requestdelete, (t) => this._deleteChip(t.target)), this.addEventListener?.("keydown", (t) => this._onChipKeyDown(t));
     }
     /** Value of the form element. */
     set value(t) {
@@ -30,7 +29,7 @@ let ot = (() => {
       const e = this.value, i = [...e];
       for (const n of t)
         i.includes(n) && i.splice(i.indexOf(n), 1);
-      i.forEach((n) => this._chipElements().find((K) => K.value === n)?.remove());
+      i.forEach((n) => this._chipElements().find((O) => O.value === n)?.remove());
       const o = [...t];
       for (const n of e)
         o.includes(n) && o.splice(o.indexOf(n), 1);
@@ -41,17 +40,17 @@ let ot = (() => {
     }
     /** Function that maps a chip's value to its display value. */
     get displayWith() {
-      return _(this, p);
+      return m(this, u);
     }
     set displayWith(t) {
-      m(this, p, t);
+      d(this, u, t);
     }
-    /** The array of keys that will trigger a `chipInputTokenEnd` event. Default `['Enter']` */
+    /** The array of keys that will trigger a `chipinputtokenend` event. Default `['Enter']` */
     get separatorKeys() {
-      return _(this, u);
+      return m(this, p);
     }
     set separatorKeys(t) {
-      m(this, u, t);
+      d(this, p, t);
     }
     connectedCallback() {
       super.connectedCallback(), this._setupComponent();
@@ -78,7 +77,7 @@ let ot = (() => {
       return super.shouldValidate(t) || t === "required" || t === "value";
     }
     validate() {
-      super.validate(), this.required && this.value.length === 0 ? this.setValidityFlag("valueMissing", B[this._language.current]) : this.removeValidityFlag("valueMissing");
+      super.validate(), this.required && this.value.length === 0 ? this.setValidityFlag("valueMissing", V[this._language.current]) : this.removeValidityFlag("valueMissing");
     }
     /** Return the list of chip elements **/
     _chipElements() {
@@ -112,8 +111,8 @@ let ot = (() => {
     _onChipKeyDown(t) {
       const e = t.target;
       if (e.localName === "sbb-chip") {
-        if (L(t)) {
-          const i = this._enabledChipElements(), o = M(t, i.indexOf(e), i.length);
+        if (T(t)) {
+          const i = this._enabledChipElements(), o = q(t, i.indexOf(e), i.length);
           i[o].focus();
           return;
         }
@@ -154,7 +153,15 @@ let ot = (() => {
         setValue: (n) => o.value = n,
         setLabel: (n) => o.label = n
       };
-      this._chipInputTokenEnd.emit(o) && (this._createChipElement(o.value, o.label), this._inputElement.value = "", this._emitInputEvents());
+      this._dispatchChipInputTokenEnd(o) && (this._createChipElement(o.value, o.label), this._inputElement.value = "", this._emitInputEvents());
+    }
+    _dispatchChipInputTokenEnd(t) {
+      return this.dispatchEvent(new CustomEvent("chipinputtokenend", {
+        detail: t,
+        cancelable: !0,
+        bubbles: !0,
+        composed: !0
+      }));
     }
     _deleteChip(t) {
       const e = this._enabledChipElements();
@@ -177,10 +184,10 @@ let ot = (() => {
       this._inputElement?.focus();
     }
     _emitInputEvents() {
-      this._input.emit(), this._change.emit();
+      this.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), this.dispatchEvent(new Event("change", { bubbles: !0 }));
     }
     _createChipElement(t, e) {
-      if (v)
+      if (f)
         return;
       const i = document.createElement("sbb-chip");
       i.value = t, i.innerText = e ?? (t ? this.displayWith?.(t) : null) ?? "", this.insertBefore(i, this._inputElement ?? this.querySelector("input"));
@@ -194,34 +201,33 @@ let ot = (() => {
       });
     }
     _inheritSize() {
-      this.setAttribute("data-size", this.closest("sbb-form-field")?.size ?? (R() ? "s" : "m"));
+      this.setAttribute("data-size", this.closest("sbb-form-field")?.size ?? (M() ? "s" : "m"));
     }
     _updateInputDescription() {
-      this._inputElement && this._inputElement.setAttribute("aria-description", `${N[this._language.current]} ${this.value.length}`);
+      this._inputElement && this._inputElement.setAttribute("aria-description", `${R[this._language.current]} ${this.value.length}`);
     }
     render() {
-      return W`
+      return F`
       <div class="sbb-chip-group">
         <slot @slotchange=${this._setupComponent}></slot>
       </div>
     `;
     }
-  }, p = new WeakMap(), u = new WeakMap(), h = l, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(E[Symbol.metadata] ?? null) : void 0;
-    x = [y({ type: Array })], w = [y({ attribute: !1 })], A = [y({ attribute: "separator-keys", type: Array })], b(l, null, x, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (e) => "value" in e, set: (e, i) => {
+  }, u = new WeakMap(), p = new WeakMap(), h = l, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(y[Symbol.metadata] ?? null) : void 0;
+    E = [v({ type: Array })], C = [v({ attribute: !1 })], k = [v({ attribute: "separator-keys", type: Array })], b(l, null, E, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (e) => "value" in e, set: (e, i) => {
       e.value = i;
-    } }, metadata: t }, null, C), b(l, null, w, { kind: "accessor", name: "displayWith", static: !1, private: !1, access: { has: (e) => "displayWith" in e, get: (e) => e.displayWith, set: (e, i) => {
+    } }, metadata: t }, null, g), b(l, null, C, { kind: "accessor", name: "displayWith", static: !1, private: !1, access: { has: (e) => "displayWith" in e, get: (e) => e.displayWith, set: (e, i) => {
       e.displayWith = i;
-    } }, metadata: t }, S, k), b(l, null, A, { kind: "accessor", name: "separatorKeys", static: !1, private: !1, access: { has: (e) => "separatorKeys" in e, get: (e) => e.separatorKeys, set: (e, i) => {
+    } }, metadata: t }, x, w), b(l, null, k, { kind: "accessor", name: "separatorKeys", static: !1, private: !1, access: { has: (e) => "separatorKeys" in e, get: (e) => e.separatorKeys, set: (e, i) => {
       e.separatorKeys = i;
-    } }, metadata: t }, I, D), b(null, a = { value: h }, s, { kind: "class", name: h.name, metadata: t }, null, r), d = h = a.value, t && Object.defineProperty(h, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), l.role = "listbox", l.styles = P, l.events = {
+    } }, metadata: t }, S, A), b(null, a = { value: h }, s, { kind: "class", name: h.name, metadata: t }, null, r), h = a.value, t && Object.defineProperty(h, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), l.role = "listbox", l.styles = J, l.events = {
     input: "input",
     change: "change",
-    chipInputTokenEnd: "chipInputTokenEnd"
-  }, c(h, r), l);
-  return d = h;
+    chipinputtokenend: "chipinputtokenend"
+  }, c(h, r), h;
 })();
 export {
-  ot as SbbChipGroupElement
+  rt as SbbChipGroupElement
 };

package/container/sticky-bar/sticky-bar.component.d.ts

@@ -4,10 +4,6 @@ declare const SbbStickyBarElement_base: import('../../core/mixins.js').AbstractC
  * A container that sticks to the bottom of the page if slotted into `sbb-container`.
  *
  * @slot - Use the unnamed slot to add content to the sticky bar.
- * @event {CustomEvent<void>} willStick - Emits when the animation from normal content flow to `position: sticky` starts. Can be canceled.
- * @event {CustomEvent<void>} didStick - Emits when the animation from normal content flow to `position: sticky` ends.
- * @event {CustomEvent<void>} willUnstick - Emits when the animation from `position: sticky` to normal content flow starts. Can be canceled.
- * @event {CustomEvent<void>} didUnstick - Emits when the animation from `position: sticky` to normal content flow ends.
  * @cssprop [--sbb-sticky-bar-padding-block=var(--sbb-spacing-responsive-xs)] - Block padding of the sticky bar.
  * @cssprop [--sbb-sticky-bar-bottom-overlapping-height=0px] - Define an additional area where
  * the sticky bar overlaps the following content on the bottom.
@@ -18,10 +14,10 @@ declare const SbbStickyBarElement_base: import('../../core/mixins.js').AbstractC
 export declare class SbbStickyBarElement extends SbbStickyBarElement_base {
     static styles: CSSResultGroup;
     static readonly events: {
-        readonly willStick: "willStick";
-        readonly didStick: "didStick";
-        readonly willUnstick: "willUnstick";
-        readonly didUnstick: "didUnstick";
+        readonly beforestick: "beforestick";
+        readonly stick: "stick";
+        readonly beforeunstick: "beforeunstick";
+        readonly unstick: "unstick";
     };
     /** Color of the container, like transparent, white etc. */
     accessor color: 'white' | 'milk' | 'midnight' | 'charcoal' | null;
@@ -33,10 +29,6 @@ export declare class SbbStickyBarElement extends SbbStickyBarElement_base {
     /** The state of the component. */
     private set _state(value);
     private get _state();
-    private _willStick;
-    private _didStick;
-    private _willUnstick;
-    private _didUnstick;
     private _intersector?;
     private _observer;
     connectedCallback(): void;
@@ -51,6 +43,8 @@ export declare class SbbStickyBarElement extends SbbStickyBarElement_base {
     private _stickyCallback;
     private _unstickyCallback;
     private _onAnimationEnd;
+    private _dispatchBeforeStickEvent;
+    private _dispatchBeforeUnStickEvent;
     protected render(): TemplateResult;
 }
 declare global {

package/container/sticky-bar/sticky-bar.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sticky-bar.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/container/sticky-bar/sticky-bar.component.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;;AAWb;;;;;;;;;;;;;;GAcG;AACH,qBAEM,mBAAoB,SAAQ,wBAAmC;IACnE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,gBAAuB,MAAM;;;;;MAKlB;IAEX,2DAA2D;IAC3D,SAA6C,KAAK,EAC9C,OAAO,GACP,MAAM,GACN,UAAU,GACV,UAAU,GACV,IAAI,CAAQ;IAEhB;;;OAGG;IACH,SAA6C,IAAI,EAAE,GAAG,GAAG,GAAG,CAAwB;IAEpF,kCAAkC;IAClC,OAAO,KAAK,MAAM,QAEjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,CAAC,UAAU,CAEf;IACH,OAAO,CAAC,SAAS,CAEd;IACH,OAAO,CAAC,YAAY,CAIlB;IACF,OAAO,CAAC,WAAW,CAIjB;IAEF,OAAO,CAAC,YAAY,CAAC,CAAkB;IACvC,OAAO,CAAC,SAAS,CAKd;IAEa,iBAAiB,IAAI,IAAI;IAiBzB,oBAAoB,IAAI,IAAI;cAMzB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAU9E,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,kBAAkB;IA+B1B,wEAAwE;IACjE,KAAK,IAAI,IAAI;IAWpB,mEAAmE;IAC5D,OAAO,IAAI,IAAI;IAYtB,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,eAAe;cAWJ,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}
+{"version":3,"file":"sticky-bar.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/container/sticky-bar/sticky-bar.component.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;;AAUb;;;;;;;;;;GAUG;AACH,qBAEM,mBAAoB,SAAQ,wBAAmC;IACnE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,gBAAuB,MAAM;;;;;MAKlB;IAEX,2DAA2D;IAC3D,SAA6C,KAAK,EAC9C,OAAO,GACP,MAAM,GACN,UAAU,GACV,UAAU,GACV,IAAI,CAAQ;IAEhB;;;OAGG;IACH,SAA6C,IAAI,EAAE,GAAG,GAAG,GAAG,CAAwB;IAEpF,kCAAkC;IAClC,OAAO,KAAK,MAAM,QAEjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,CAAC,YAAY,CAAC,CAAkB;IACvC,OAAO,CAAC,SAAS,CAKd;IAEa,iBAAiB,IAAI,IAAI;IAiBzB,oBAAoB,IAAI,IAAI;cAMzB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAU9E,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,kBAAkB;IA+B1B,wEAAwE;IACjE,KAAK,IAAI,IAAI;IAWpB,mEAAmE;IAC5D,OAAO,IAAI,IAAI;IAYtB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,yBAAyB;IAKjC,OAAO,CAAC,2BAA2B;cAKhB,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}

package/container/sticky-bar/sticky-bar.component.js

@@ -1,29 +1,24 @@
-var S = (a) => {
+var w = (a) => {
   throw TypeError(a);
 };
-var z = (a, i, e) => i.has(a) || S("Cannot " + e);
-var y = (a, i, e) => (z(a, i, "read from private field"), e ? e.call(a) : i.get(a)), h = (a, i, e) => i.has(a) ? S("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(a) : i.set(a, e), d = (a, i, e, r) => (z(a, i, "write to private field"), r ? r.call(a, e) : i.set(a, e), e);
-import { __runInitializers as k, __esDecorate as v } from "tslib";
-import { IntersectionController as E } from "@lit-labs/observers/intersection-controller.js";
-import { css as U, LitElement as R, html as I } from "lit";
-import { customElement as D, property as A } from "lit/decorators.js";
-import { isLean as T, isZeroAnimationDuration as B } from "../../core/dom.js";
-import { EventEmitter as u } from "../../core/eventing.js";
-import { SbbUpdateSchedulerMixin as H } from "../../core/mixins.js";
-const L = U`*,:before,:after{box-sizing:border-box}:host{--sbb-sticky-bar-position: sticky;--sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xs);--sbb-sticky-bar-border-radius: var(--sbb-border-radius-8x);--sbb-sticky-bar-animation-easing: var(--sbb-animation-easing);--sbb-sticky-bar-fade-in-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-5x) );--sbb-sticky-bar-fade-out-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-sticky-bar-slide-vertically-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-sticky-bar-slide-vertically-animation-easing: ease-out;--sbb-sticky-bar-slide-vertically-animation-delay: 0s;--sbb-sticky-bar-slide-vertically-animation-name: unset;--_sbb-sticky-bar-background-animation-duration: var( --sbb-sticky-bar-fade-out-animation-duration );--_sbb-sticky-bar-intersector-background-color: transparent;--_sbb-sticky-bar-forced-colors-border: none;display:contents}:host([size=s]){--sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xxxs)}:host([data-sticking]:not([data-state=unsticky])){--sbb-sticky-bar-sticky-background-color: var( --sbb-container-background-color, var(--sbb-color-white) );--_sbb-sticky-bar-intersector-background-color: var(--sbb-sticky-bar-sticky-background-color);--_sbb-sticky-bar-background-animation-duration: var(--sbb-sticky-bar-fade-in-animation-duration)}@media (forced-colors: active){:host([data-sticking]:not([data-state=unsticky])){--_sbb-sticky-bar-forced-colors-border: var(--sbb-border-width-1x) solid CanvasText}}:host([data-sticking]:not([data-state=unsticky])[color=white]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-white)}:host([data-sticking]:not([data-state=unsticky])[color=milk]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-milk)}:host([data-sticking]:not([data-state=unsticky])[color=midnight]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-midnight)}:host([data-sticking]:not([data-state=unsticky])[color=charcoal]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-charcoal)}:host(:is([data-sticking]:is([data-slide-vertically],[data-state=sticking],[data-state=unsticking]),[data-state=unsticky])){--_sbb-sticky-bar-background-animation-duration: 0s}:host([data-sticking]:is([data-slide-vertically]:not([data-state=unsticky],[data-state=unsticking]),[data-state=sticking])){--sbb-sticky-bar-slide-vertically-animation-name: slide-in}:host([data-sticking][data-state=unsticking]){--sbb-sticky-bar-slide-vertically-animation-name: slide-out}:host(:is(:not([data-initialized]),[data-state=unsticky])){--sbb-sticky-bar-position: relative}.sbb-sticky-bar__wrapper{position:var(--sbb-sticky-bar-position);inset-block-end:0;display:block;z-index:var(--sbb-sticky-bar-z-index);animation-name:var(--sbb-sticky-bar-slide-vertically-animation-name);animation-duration:var(--sbb-sticky-bar-slide-vertically-animation-duration);animation-timing-function:var(--sbb-sticky-bar-slide-vertically-animation-easing);animation-delay:var(--sbb-sticky-bar-slide-vertically-animation-delay);animation-fill-mode:backwards}.sbb-sticky-bar__wrapper:after,.sbb-sticky-bar__wrapper:before{content:"";inset:0;position:absolute;display:block;z-index:-1}.sbb-sticky-bar__wrapper:before{background-color:var(--sbb-container-background-color);padding:0!important}:host(:not([data-expanded])) .sbb-sticky-bar__wrapper:before{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([data-expanded])) .sbb-sticky-bar__wrapper:before{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}.sbb-sticky-bar__wrapper:after{background-color:var(--sbb-sticky-bar-sticky-background-color, transparent);border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);border:var(--_sbb-sticky-bar-forced-colors-border)}.sbb-sticky-bar{display:flex;padding-block:var(--sbb-sticky-bar-padding-block);margin-block-end:-1px}.sbb-sticky-bar:before{content:"";position:absolute;inset:0;z-index:-1;border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:box-shadow var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);clip-path:polygon(-50% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% 50%,-50% 50%)}:host([data-sticking]:not([data-state=unsticky])) .sbb-sticky-bar:before{box-shadow:var(--sbb-shadow-elevation-level-11-shadow-2-offset-x) var(--sbb-shadow-elevation-level-11-shadow-2-offset-y) var(--sbb-shadow-elevation-level-11-shadow-2-blur) var(--sbb-shadow-elevation-level-11-shadow-2-spread) var(--sbb-shadow-elevation-level-11-soft-2-color),var(--sbb-shadow-elevation-level-11-shadow-1-offset-x) var(--sbb-shadow-elevation-level-11-shadow-1-offset-y) var(--sbb-shadow-elevation-level-11-shadow-1-blur) var(--sbb-shadow-elevation-level-11-shadow-1-spread) var(--sbb-shadow-elevation-level-11-soft-1-color)}:host(:not([data-expanded])) .sbb-sticky-bar{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([data-expanded])) .sbb-sticky-bar{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}:host([data-expanded]) .sbb-sticky-bar{padding-inline:var(--sbb-spacing-responsive-xxs)}.sbb-sticky-bar__intersector{height:1px}.sbb-sticky-bar__intersector:after{content:"";display:block;position:absolute;width:100%;height:calc(var(--sbb-sticky-bar-bottom-overlapping-height, 0) + 1px);background-color:var(--_sbb-sticky-bar-intersector-background-color);pointer-events:none;transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing)}@keyframes slide-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slide-out{0%{transform:translateY(0)}to{transform:translateY(100%)}}`;
-let F = (() => {
-  var b, c, o;
-  let a = [D("sbb-sticky-bar")], i, e = [], r, m = H(R), _, g = [], p = [], f, w = [], x = [];
-  var n = (o = class extends m {
+var x = (a, s, e) => s.has(a) || w("Cannot " + e);
+var k = (a, s, e) => (x(a, s, "read from private field"), e ? e.call(a) : s.get(a)), u = (a, s, e) => s.has(a) ? w("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(a) : s.set(a, e), l = (a, s, e, r) => (x(a, s, "write to private field"), r ? r.call(a, e) : s.set(a, e), e);
+import { __runInitializers as d, __esDecorate as h } from "tslib";
+import { IntersectionController as S } from "@lit-labs/observers/intersection-controller.js";
+import { css as A, LitElement as C, html as R } from "lit";
+import { customElement as B, property as z } from "lit/decorators.js";
+import { isLean as I, isZeroAnimationDuration as D } from "../../core/dom.js";
+import { SbbUpdateSchedulerMixin as U } from "../../core/mixins.js";
+const T = A`*,:before,:after{box-sizing:border-box}:host{--sbb-sticky-bar-position: sticky;--sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xs);--sbb-sticky-bar-border-radius: var(--sbb-border-radius-8x);--sbb-sticky-bar-animation-easing: var(--sbb-animation-easing);--sbb-sticky-bar-fade-in-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-5x) );--sbb-sticky-bar-fade-out-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-sticky-bar-slide-vertically-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-sticky-bar-slide-vertically-animation-easing: ease-out;--sbb-sticky-bar-slide-vertically-animation-delay: 0s;--sbb-sticky-bar-slide-vertically-animation-name: unset;--_sbb-sticky-bar-background-animation-duration: var( --sbb-sticky-bar-fade-out-animation-duration );--_sbb-sticky-bar-intersector-background-color: transparent;--_sbb-sticky-bar-forced-colors-border: none;display:contents}:host([size=s]){--sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xxxs)}:host([data-sticking]:not([data-state=unsticky])){--sbb-sticky-bar-sticky-background-color: var( --sbb-container-background-color, var(--sbb-color-white) );--_sbb-sticky-bar-intersector-background-color: var(--sbb-sticky-bar-sticky-background-color);--_sbb-sticky-bar-background-animation-duration: var(--sbb-sticky-bar-fade-in-animation-duration)}@media (forced-colors: active){:host([data-sticking]:not([data-state=unsticky])){--_sbb-sticky-bar-forced-colors-border: var(--sbb-border-width-1x) solid CanvasText}}:host([data-sticking]:not([data-state=unsticky])[color=white]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-white)}:host([data-sticking]:not([data-state=unsticky])[color=milk]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-milk)}:host([data-sticking]:not([data-state=unsticky])[color=midnight]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-midnight)}:host([data-sticking]:not([data-state=unsticky])[color=charcoal]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-charcoal)}:host(:is([data-sticking]:is([data-slide-vertically],[data-state=sticking],[data-state=unsticking]),[data-state=unsticky])){--_sbb-sticky-bar-background-animation-duration: 0s}:host([data-sticking]:is([data-slide-vertically]:not([data-state=unsticky],[data-state=unsticking]),[data-state=sticking])){--sbb-sticky-bar-slide-vertically-animation-name: slide-in}:host([data-sticking][data-state=unsticking]){--sbb-sticky-bar-slide-vertically-animation-name: slide-out}:host(:is(:not([data-initialized]),[data-state=unsticky])){--sbb-sticky-bar-position: relative}.sbb-sticky-bar__wrapper{position:var(--sbb-sticky-bar-position);inset-block-end:0;display:block;z-index:var(--sbb-sticky-bar-z-index);animation-name:var(--sbb-sticky-bar-slide-vertically-animation-name);animation-duration:var(--sbb-sticky-bar-slide-vertically-animation-duration);animation-timing-function:var(--sbb-sticky-bar-slide-vertically-animation-easing);animation-delay:var(--sbb-sticky-bar-slide-vertically-animation-delay);animation-fill-mode:backwards}.sbb-sticky-bar__wrapper:after,.sbb-sticky-bar__wrapper:before{content:"";inset:0;position:absolute;display:block;z-index:-1}.sbb-sticky-bar__wrapper:before{background-color:var(--sbb-container-background-color);padding:0!important}:host(:not([data-expanded])) .sbb-sticky-bar__wrapper:before{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([data-expanded])) .sbb-sticky-bar__wrapper:before{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}.sbb-sticky-bar__wrapper:after{background-color:var(--sbb-sticky-bar-sticky-background-color, transparent);border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);border:var(--_sbb-sticky-bar-forced-colors-border)}.sbb-sticky-bar{display:flex;padding-block:var(--sbb-sticky-bar-padding-block);margin-block-end:-1px}.sbb-sticky-bar:before{content:"";position:absolute;inset:0;z-index:-1;border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:box-shadow var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);clip-path:polygon(-50% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% 50%,-50% 50%)}:host([data-sticking]:not([data-state=unsticky])) .sbb-sticky-bar:before{box-shadow:var(--sbb-shadow-elevation-level-11-shadow-2-offset-x) var(--sbb-shadow-elevation-level-11-shadow-2-offset-y) var(--sbb-shadow-elevation-level-11-shadow-2-blur) var(--sbb-shadow-elevation-level-11-shadow-2-spread) var(--sbb-shadow-elevation-level-11-soft-2-color),var(--sbb-shadow-elevation-level-11-shadow-1-offset-x) var(--sbb-shadow-elevation-level-11-shadow-1-offset-y) var(--sbb-shadow-elevation-level-11-shadow-1-blur) var(--sbb-shadow-elevation-level-11-shadow-1-spread) var(--sbb-shadow-elevation-level-11-soft-1-color)}:host(:not([data-expanded])) .sbb-sticky-bar{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([data-expanded])) .sbb-sticky-bar{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}:host([data-expanded]) .sbb-sticky-bar{padding-inline:var(--sbb-spacing-responsive-xxs)}.sbb-sticky-bar__intersector{height:1px}.sbb-sticky-bar__intersector:after{content:"";display:block;position:absolute;width:100%;height:calc(var(--sbb-sticky-bar-bottom-overlapping-height, 0) + 1px);background-color:var(--_sbb-sticky-bar-intersector-background-color);pointer-events:none;transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing)}@keyframes slide-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slide-out{0%{transform:translateY(0)}to{transform:translateY(100%)}}`;
+let M = (() => {
+  var n, b, o;
+  let a = [B("sbb-sticky-bar")], s, e = [], r, y = U(C), v, m = [], _ = [], p, g = [], f = [];
+  return o = class extends y {
     constructor() {
       super(...arguments);
-      h(this, b);
-      h(this, c);
-      d(this, b, k(this, g, null)), d(this, c, (k(this, p), k(this, w, T() ? "s" : "m"))), this._willStick = (k(this, x), new u(this, n.events.willStick, {
-        cancelable: !0
-      })), this._didStick = new u(this, n.events.didStick, {
-        cancelable: !0
-      }), this._willUnstick = new u(this, n.events.willUnstick, { cancelable: !0 }), this._didUnstick = new u(this, n.events.didUnstick, { cancelable: !0 }), this._observer = new E(this, {
+      u(this, n);
+      u(this, b);
+      l(this, n, d(this, m, null)), l(this, b, (d(this, _), d(this, g, I() ? "s" : "m"))), this._intersector = d(this, f), this._observer = new S(this, {
         // Although `this` is observed, we have to postpone observing
         // into firstUpdated() to achieve a correct initial state.
         target: null,
@@ -32,20 +27,20 @@ let F = (() => {
     }
     /** Color of the container, like transparent, white etc. */
     get color() {
-      return y(this, b);
+      return k(this, n);
     }
     set color(t) {
-      d(this, b, t);
+      l(this, n, t);
     }
     /**
      * Size of the container.
      * @default 'm' / 's' (lean)
      */
     get size() {
-      return y(this, c);
+      return k(this, b);
     }
     set size(t) {
-      d(this, c, t);
+      l(this, b, t);
     }
     /** The state of the component. */
     set _state(t) {
@@ -66,32 +61,38 @@ let F = (() => {
       super.firstUpdated(t), this._intersector || (this._intersector = this.shadowRoot.querySelector(".sbb-sticky-bar__intersector"), this._observer.observe(this._intersector)), this._observer.observe(this);
     }
     _isZeroAnimationDuration() {
-      return B(this, "--sbb-sticky-bar-slide-vertically-animation-duration");
+      return D(this, "--sbb-sticky-bar-slide-vertically-animation-duration");
     }
     _detectStickyState(t) {
       this.toggleAttribute("data-initialized", !0);
-      const s = !t.isIntersecting && t.boundingClientRect.top > 0, l = this._intersector?.getBoundingClientRect(), C = this.shadowRoot.querySelector(".sbb-sticky-bar__wrapper").getBoundingClientRect();
-      this.toggleAttribute("data-slide-vertically", s && this._intersector && Math.abs(l.bottom - C.bottom) > 30), this.toggleAttribute("data-sticking", s), this.completeUpdate();
+      const i = !t.isIntersecting && t.boundingClientRect.top > 0, c = this._intersector?.getBoundingClientRect(), E = this.shadowRoot.querySelector(".sbb-sticky-bar__wrapper").getBoundingClientRect();
+      this.toggleAttribute("data-slide-vertically", i && this._intersector && Math.abs(c.bottom - E.bottom) > 30), this.toggleAttribute("data-sticking", i), this.completeUpdate();
     }
     /** Animates from normal content flow position to `position: sticky`. */
     stick() {
-      this._state !== "unsticky" || !this._willStick.emit() || (this._state = "sticking", (!this.hasAttribute("data-sticking") || this._isZeroAnimationDuration()) && this._stickyCallback());
+      this._state !== "unsticky" || !this._dispatchBeforeStickEvent() || (this._state = "sticking", (!this.hasAttribute("data-sticking") || this._isZeroAnimationDuration()) && this._stickyCallback());
     }
     /** Animates `position: sticky` to normal content flow position. */
     unstick() {
-      this._state !== "sticky" || !this._willUnstick.emit() || (this._state = "unsticking", (!this.hasAttribute("data-sticking") || this._isZeroAnimationDuration()) && this._unstickyCallback());
+      this._state !== "sticky" || !this._dispatchBeforeUnStickEvent() || (this._state = "unsticking", (!this.hasAttribute("data-sticking") || this._isZeroAnimationDuration()) && this._unstickyCallback());
     }
     _stickyCallback() {
-      this._state = "sticky", this._didStick.emit();
+      this._state = "sticky", this.dispatchEvent(new Event("stick"));
     }
     _unstickyCallback() {
-      this._didUnstick.emit(), this._state = "unsticky";
+      this.dispatchEvent(new Event("unstick")), this._state = "unsticky";
     }
     _onAnimationEnd(t) {
       (this._state === "sticking" || this._state === "sticky") && t.animationName === "slide-in" ? this._stickyCallback() : this._state === "unsticking" && t.animationName === "slide-out" && this._unstickyCallback();
     }
+    _dispatchBeforeStickEvent() {
+      return this.dispatchEvent(new Event("beforestick", { cancelable: !0 }));
+    }
+    _dispatchBeforeUnStickEvent() {
+      return this.dispatchEvent(new Event("beforeunstick", { cancelable: !0 }));
+    }
     render() {
-      return I`
+      return R`
       <div class="sbb-sticky-bar__wrapper" @animationend=${this._onAnimationEnd}>
         <div class="sbb-sticky-bar">
           <slot></slot>
@@ -100,21 +101,20 @@ let F = (() => {
       <div class="sbb-sticky-bar__intersector"></div>
     `;
     }
-  }, b = new WeakMap(), c = new WeakMap(), r = o, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(m[Symbol.metadata] ?? null) : void 0;
-    _ = [A({ reflect: !0 })], f = [A({ reflect: !0 })], v(o, null, _, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (s) => "color" in s, get: (s) => s.color, set: (s, l) => {
-      s.color = l;
-    } }, metadata: t }, g, p), v(o, null, f, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (s) => "size" in s, get: (s) => s.size, set: (s, l) => {
-      s.size = l;
-    } }, metadata: t }, w, x), v(null, i = { value: r }, a, { kind: "class", name: r.name, metadata: t }, null, e), n = r = i.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), o.styles = L, o.events = {
-    willStick: "willStick",
-    didStick: "didStick",
-    willUnstick: "willUnstick",
-    didUnstick: "didUnstick"
-  }, k(r, e), o);
-  return n = r;
+  }, n = new WeakMap(), b = new WeakMap(), r = o, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(y[Symbol.metadata] ?? null) : void 0;
+    v = [z({ reflect: !0 })], p = [z({ reflect: !0 })], h(o, null, v, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (i) => "color" in i, get: (i) => i.color, set: (i, c) => {
+      i.color = c;
+    } }, metadata: t }, m, _), h(o, null, p, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (i) => "size" in i, get: (i) => i.size, set: (i, c) => {
+      i.size = c;
+    } }, metadata: t }, g, f), h(null, s = { value: r }, a, { kind: "class", name: r.name, metadata: t }, null, e), r = s.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), o.styles = T, o.events = {
+    beforestick: "beforestick",
+    stick: "stick",
+    beforeunstick: "beforeunstick",
+    unstick: "unstick"
+  }, d(r, e), r;
 })();
 export {
-  F as SbbStickyBarElement
+  M as SbbStickyBarElement
 };