@sbb-esta/lyne-elements 0.52.1 → 0.52.2

package/dialog/dialog.js

@@ -1,118 +1,118 @@
 import { property as h, customElement as c } from "lit/decorators.js";
 import { html as g } from "lit/static-html.js";
-import { setModalityOnNextFocus as n, getFirstFocusableElement as p } from "../core/a11y.js";
+import { setModalityOnNextFocus as r, getFirstFocusableElement as m } from "../core/a11y.js";
 import { isBreakpoint as v } from "../core/dom.js";
-import { AgnosticResizeObserver as m } from "../core/observers.js";
-import { applyInertMechanism as f, removeInertMechanism as u } from "../core/overlay.js";
-import { SbbOverlayBaseElement as w, overlayRefs as b } from "../overlay.js";
-import { css as x } from "lit";
+import { AgnosticResizeObserver as p } from "../core/observers.js";
+import { applyInertMechanism as u, removeInertMechanism as f } from "../core/overlay.js";
+import { SbbOverlayBaseElement as _, overlayRefs as d } from "../overlay.js";
+import { css as w } from "lit";
 import "../screen-reader-only.js";
-const y = x`*,:before,:after{box-sizing:border-box}:host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-dialog-padding-inline: var(--sbb-spacing-fixed-5x);--sbb-dialog-color: var(--sbb-color-black);--sbb-dialog-background-color: var(--sbb-color-white);--sbb-dialog-width: 100%;--sbb-dialog-height: 100%;--sbb-dialog-max-width: 100%;--sbb-dialog-max-width-default: 55.75rem;--sbb-dialog-max-height: 100%;--sbb-dialog-inset: 0 auto auto 0;--sbb-dialog-border-radius: var(--sbb-border-radius-8x);--sbb-dialog-padding-block: var(--sbb-spacing-responsive-s);--sbb-dialog-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-dialog-animation-easing: ease;--sbb-dialog-pointer-events: none;--sbb-dialog-backdrop-visibility: hidden;--sbb-dialog-backdrop-pointer-events: none;--sbb-dialog-backdrop-color: transparent;--sbb-dialog-content-transition: transform var(--sbb-dialog-animation-duration) var(--sbb-dialog-animation-easing);--sbb-dialog-actions-border: var(--sbb-border-width-1x) solid var(--sbb-color-cloud);display:block;position:fixed;inset:var(--sbb-dialog-inset);z-index:var(--sbb-dialog-z-index, var(--sbb-overlay-default-z-index))}@media (min-width: 22.5rem){:host{--sbb-dialog-padding-inline: var(--sbb-spacing-fixed-6x)}}@media (min-width: 37.5rem){:host{--sbb-dialog-padding-inline: var(--sbb-spacing-fixed-12x)}}@media (min-width: 52.5rem){:host{--sbb-dialog-padding-inline: var(--sbb-spacing-responsive-s);--sbb-dialog-max-width: min( calc(100vw - var(--sbb-spacing-fixed-30x) * 2), var(--sbb-dialog-max-width-default) );--sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-16x))}}:host(:is([data-state=opened],[data-state=opening])){--sbb-dialog-pointer-events: all}@media (min-width: 52.5rem){:host(:is([data-state=opened],[data-state=opening])){--sbb-dialog-backdrop-visibility: visible;--sbb-dialog-backdrop-pointer-events: all;--sbb-dialog-backdrop-color: var(--sbb-color-milk)}}:host([data-hide-header]){--sbb-dialog-header-margin-block-start: calc(var(--sbb-dialog-header-height) * -1)}:host([negative]){--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-dialog-color: var(--sbb-color-white);--sbb-dialog-background-color: var(--sbb-color-midnight);--sbb-dialog-actions-border: none}:host([data-overflows]:not([negative])){--sbb-dialog-actions-border: none}:host(:not([data-state=closed])){--sbb-dialog-inset: 0}.sbb-dialog__container{pointer-events:var(--sbb-dialog-pointer-events);display:flex;align-items:center;position:fixed;inset:var(--sbb-dialog-inset)}.sbb-dialog__container:before{content:"";visibility:var(--sbb-dialog-backdrop-visibility);pointer-events:var(--sbb-dialog-backdrop-pointer-events);position:fixed;inset:var(--sbb-dialog-inset);background-color:var(--sbb-dialog-backdrop-color);transition-duration:var(--sbb-dialog-animation-duration);transition-timing-function:var(--sbb-dialog-animation-easing);transition-property:background-color,visibility}.sbb-dialog{display:none;position:absolute;inset-inline:0;margin:auto;padding:0;border:none;width:var(--sbb-dialog-width);height:var(--sbb-dialog-height);max-width:var(--sbb-dialog-max-width);max-height:var(--sbb-dialog-max-height);overflow:auto;color:var(--sbb-dialog-color);background-color:var(--sbb-dialog-background-color)}:host([data-state]:not([data-state=closed])) .sbb-dialog{display:block;animation-name:open;animation-duration:var(--sbb-dialog-animation-duration);animation-timing-function:ease}:host([data-state][data-state=closing]) .sbb-dialog{pointer-events:none;animation-name:close}@media (forced-colors: active){.sbb-dialog{outline:var(--sbb-border-width-1x) solid CanvasText}}@media (min-width: 52.5rem){.sbb-dialog{border-radius:var(--sbb-dialog-border-radius);overflow:hidden;height:fit-content}}.sbb-dialog__wrapper{display:flex;flex-direction:column;width:var(--sbb-dialog-width);height:var(--sbb-dialog-height);max-width:var(--sbb-dialog-max-width);max-height:var(--sbb-dialog-max-height);outline:none;position:fixed;word-break:break-word}@media (min-width: 52.5rem){.sbb-dialog__wrapper{position:sticky;inset-block-start:0;height:auto}}@keyframes open{0%{opacity:0;transform:translateY(var(--sbb-spacing-fixed-4x))}to{opacity:1;transform:translateY(0)}}@keyframes close{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(var(--sbb-spacing-fixed-4x))}}`;
-var k = Object.defineProperty, O = Object.getOwnPropertyDescriptor, d = (i, t, s, e) => {
-  for (var a = e > 1 ? void 0 : e ? O(t, s) : t, r = i.length - 1, l; r >= 0; r--)
-    (l = i[r]) && (a = (e ? l(t, s, a) : l(a)) || a);
-  return e && a && k(t, s, a), a;
+const y = w`*,:before,:after{box-sizing:border-box}:host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-dialog-padding-inline: var(--sbb-spacing-fixed-5x);--sbb-dialog-color: var(--sbb-color-black);--sbb-dialog-background-color: var(--sbb-color-white);--sbb-dialog-width: 100%;--sbb-dialog-height: 100%;--sbb-dialog-max-width: 100%;--sbb-dialog-max-width-default: 55.75rem;--sbb-dialog-max-height: 100%;--sbb-dialog-inset: 0 auto auto 0;--sbb-dialog-border-radius: var(--sbb-border-radius-8x);--sbb-dialog-padding-block: var(--sbb-spacing-responsive-s);--sbb-dialog-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-dialog-animation-easing: ease;--sbb-dialog-pointer-events: none;--sbb-dialog-backdrop-visibility: hidden;--sbb-dialog-backdrop-pointer-events: none;--sbb-dialog-backdrop-color: transparent;--sbb-dialog-content-transition: transform var(--sbb-dialog-animation-duration) var(--sbb-dialog-animation-easing);--sbb-dialog-actions-border: var(--sbb-border-width-1x) solid var(--sbb-color-cloud);display:block;position:fixed;inset:var(--sbb-dialog-inset);z-index:var(--sbb-dialog-z-index, var(--sbb-overlay-default-z-index))}@media (min-width: 22.5rem){:host{--sbb-dialog-padding-inline: var(--sbb-spacing-fixed-6x)}}@media (min-width: 37.5rem){:host{--sbb-dialog-padding-inline: var(--sbb-spacing-fixed-12x)}}@media (min-width: 52.5rem){:host{--sbb-dialog-padding-inline: var(--sbb-spacing-responsive-s);--sbb-dialog-max-width: min( calc(100vw - var(--sbb-spacing-fixed-30x) * 2), var(--sbb-dialog-max-width-default) );--sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-16x))}}:host(:is([data-state=opened],[data-state=opening])){--sbb-dialog-pointer-events: all}@media (min-width: 52.5rem){:host(:is([data-state=opened],[data-state=opening])){--sbb-dialog-backdrop-visibility: visible;--sbb-dialog-backdrop-pointer-events: all;--sbb-dialog-backdrop-color: var(--sbb-color-milk)}}:host([data-hide-header]){--sbb-dialog-header-margin-block-start: calc(var(--sbb-dialog-header-height) * -1)}:host([negative]){--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-dialog-color: var(--sbb-color-white);--sbb-dialog-background-color: var(--sbb-color-midnight);--sbb-dialog-actions-border: none}:host([data-overflows]:not([negative])){--sbb-dialog-actions-border: none}:host(:not([data-state=closed])){--sbb-dialog-inset: 0}.sbb-dialog__container{pointer-events:var(--sbb-dialog-pointer-events);display:flex;align-items:center;position:fixed;inset:var(--sbb-dialog-inset)}.sbb-dialog__container:before{content:"";visibility:var(--sbb-dialog-backdrop-visibility);pointer-events:var(--sbb-dialog-backdrop-pointer-events);position:fixed;inset:var(--sbb-dialog-inset);background-color:var(--sbb-dialog-backdrop-color);transition-duration:var(--sbb-dialog-animation-duration);transition-timing-function:var(--sbb-dialog-animation-easing);transition-property:background-color,visibility}.sbb-dialog{display:none;position:absolute;inset-inline:0;margin:auto;padding:0;border:none;width:var(--sbb-dialog-width);height:var(--sbb-dialog-height);max-width:var(--sbb-dialog-max-width);max-height:var(--sbb-dialog-max-height);overflow:auto;color:var(--sbb-dialog-color);background-color:var(--sbb-dialog-background-color)}:host([data-state]:not([data-state=closed])) .sbb-dialog{display:block;animation-name:open;animation-duration:var(--sbb-dialog-animation-duration);animation-timing-function:ease}:host([data-state][data-state=closing]) .sbb-dialog{pointer-events:none;animation-name:close}@media (forced-colors: active){.sbb-dialog{outline:var(--sbb-border-width-1x) solid CanvasText}}@media (min-width: 52.5rem){.sbb-dialog{border-radius:var(--sbb-dialog-border-radius);overflow:hidden;height:fit-content}}.sbb-dialog__wrapper{display:flex;flex-direction:column;width:var(--sbb-dialog-width);height:var(--sbb-dialog-height);max-width:var(--sbb-dialog-max-width);max-height:var(--sbb-dialog-max-height);outline:none;position:fixed;word-break:break-word}@media (min-width: 52.5rem){.sbb-dialog__wrapper{position:sticky;inset-block-start:0;height:auto}}@keyframes open{0%{opacity:0;transform:translateY(var(--sbb-spacing-fixed-4x))}to{opacity:1;transform:translateY(0)}}@keyframes close{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(var(--sbb-spacing-fixed-4x))}}`;
+var E = Object.defineProperty, x = Object.getOwnPropertyDescriptor, b = (t, e, a, i) => {
+  for (var o = i > 1 ? void 0 : i ? x(e, a) : e, l = t.length - 1, n; l >= 0; l--)
+    (n = t[l]) && (o = (i ? n(e, a, o) : n(o)) || o);
+  return i && o && E(e, a, o), o;
 };
-let E = 0, o = class extends w {
+let k = 0, s = class extends _ {
   constructor() {
-    super(...arguments), this.backdropAction = "close", this.f = new m(
-      () => setTimeout(() => this.l())
-    ), this.b = null, this.a = null, this.c = null, this.j = !1, this.d = !1, this.k = 0, this.h = `sbb-dialog-${E++}`, this.closeAttribute = "sbb-dialog-close", this.m = (i) => {
-      this.backdropAction === "close" && (this.j = i.composedPath().filter((t) => t instanceof window.HTMLElement).some((t) => t.id === this.h));
-    }, this.n = (i) => {
-      this.backdropAction === "close" && !this.j && !i.composedPath().filter((t) => t instanceof window.HTMLElement).some((t) => t.id === this.h) && this.close();
+    super(...arguments), this.backdropAction = "close", this._dialogContentResizeObserver = new p(
+      () => setTimeout(() => this._onContentResize())
+    ), this._dialogTitleElement = null, this._dialogContentElement = null, this._dialogActionsElement = null, this._isPointerDownEventOnDialog = !1, this._overflows = !1, this._lastScroll = 0, this._dialogId = `sbb-dialog-${k++}`, this.closeAttribute = "sbb-dialog-close", this._pointerDownListener = (t) => {
+      this.backdropAction === "close" && (this._isPointerDownEventOnDialog = t.composedPath().filter((e) => e instanceof window.HTMLElement).some((e) => e.id === this._dialogId));
+    }, this._closeOnBackdropClick = (t) => {
+      this.backdropAction === "close" && !this._isPointerDownEventOnDialog && !t.composedPath().filter((e) => e instanceof window.HTMLElement).some((e) => e.id === this._dialogId) && this.close();
     };
   }
   /** Opens the component. */
   open() {
-    var i;
-    this.state === "closed" && (this.lastFocusedElement = document.activeElement, this.b = this.querySelector("sbb-dialog-title"), this.a = (i = this.querySelector("sbb-dialog-content")) == null ? void 0 : i.shadowRoot.firstElementChild, this.c = this.querySelector("sbb-dialog-actions"), this.i(), this.willOpen.emit() && (this.state = "opening", b.push(this), this.f.observe(this.a), this.scrollHandler.disableScroll()));
+    var t;
+    this.state === "closed" && (this.lastFocusedElement = document.activeElement, this._dialogTitleElement = this.querySelector("sbb-dialog-title"), this._dialogContentElement = (t = this.querySelector("sbb-dialog-content")) == null ? void 0 : t.shadowRoot.firstElementChild, this._dialogActionsElement = this.querySelector("sbb-dialog-actions"), this._syncNegative(), this.willOpen.emit() && (this.state = "opening", d.push(this), this._dialogContentResizeObserver.observe(this._dialogContentElement), this.scrollHandler.disableScroll()));
   }
   connectedCallback() {
-    super.connectedCallback(), this.addEventListener("pointerdown", this.m, {
+    super.connectedCallback(), this.addEventListener("pointerdown", this._pointerDownListener, {
       signal: this.overlayController.signal
-    }), this.addEventListener("pointerup", this.n, {
+    }), this.addEventListener("pointerup", this._closeOnBackdropClick, {
       signal: this.overlayController.signal
     });
   }
-  firstUpdated(i) {
-    this.b = this.querySelector("sbb-dialog-title"), this.i(), super.firstUpdated(i);
+  firstUpdated(t) {
+    this._dialogTitleElement = this.querySelector("sbb-dialog-title"), this._syncNegative(), super.firstUpdated(t);
   }
-  willUpdate(i) {
-    super.willUpdate(i), i.has("negative") && this.i();
+  willUpdate(t) {
+    super.willUpdate(t), t.has("negative") && this._syncNegative();
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.f.disconnect();
+    super.disconnectedCallback(), this._dialogContentResizeObserver.disconnect();
   }
   attachOpenOverlayEvents() {
-    var i;
-    super.attachOpenOverlayEvents(), (i = this.a) == null || i.addEventListener("scroll", () => this.o(), {
+    var t;
+    super.attachOpenOverlayEvents(), (t = this._dialogContentElement) == null || t.addEventListener("scroll", () => this._onContentScroll(), {
       passive: !0,
       signal: this.openOverlayController.signal
-    }), window.addEventListener("resize", () => this.e(!1), {
+    }), window.addEventListener("resize", () => this._setHideHeaderDataAttribute(!1), {
       signal: this.openOverlayController.signal
     });
   }
   // Wait for dialog transition to complete.
   // In rare cases, it can be that the animationEnd event is triggered twice.
   // To avoid entering a corrupt state, exit when state is not expected.
-  onOverlayAnimationEnd(i) {
-    var t, s, e;
-    i.animationName === "open" && this.state === "opening" ? (this.state = "opened", this.didOpen.emit(), f(this), this.attachOpenOverlayEvents(), this.setOverlayFocus(), setTimeout(
+  onOverlayAnimationEnd(t) {
+    var e, a, i;
+    t.animationName === "open" && this.state === "opening" ? (this.state = "opened", this.didOpen.emit(), u(this), this.attachOpenOverlayEvents(), this.setOverlayFocus(), setTimeout(
       () => {
-        var a;
+        var o;
         return this.setAriaLiveRefContent(
-          this.accessibilityLabel || ((a = this.b) == null ? void 0 : a.innerText.trim())
+          this.accessibilityLabel || ((o = this._dialogTitleElement) == null ? void 0 : o.innerText.trim())
         );
       }
-    ), this.focusHandler.trap(this)) : i.animationName === "close" && this.state === "closing" && (this.e(!1), (t = this.a) == null || t.scrollTo(0, 0), this.state = "closed", u(), n(this.lastFocusedElement), (s = this.lastFocusedElement) == null || s.focus(), (e = this.openOverlayController) == null || e.abort(), this.focusHandler.disconnect(), this.f.disconnect(), this.removeInstanceFromGlobalCollection(), !b.length && this.scrollHandler.enableScroll(), this.didClose.emit({
+    ), this.focusHandler.trap(this)) : t.animationName === "close" && this.state === "closing" && (this._setHideHeaderDataAttribute(!1), (e = this._dialogContentElement) == null || e.scrollTo(0, 0), this.state = "closed", f(), r(this.lastFocusedElement), (a = this.lastFocusedElement) == null || a.focus(), (i = this.openOverlayController) == null || i.abort(), this.focusHandler.disconnect(), this._dialogContentResizeObserver.disconnect(), this.removeInstanceFromGlobalCollection(), !d.length && this.scrollHandler.enableScroll(), this.didClose.emit({
       returnValue: this.returnValue,
       closeTarget: this.overlayCloseElement
     }));
   }
   // Set focus on the first focusable element.
   setOverlayFocus() {
-    const i = p(
-      Array.from(this.children).filter((t) => t instanceof window.HTMLElement)
+    const t = m(
+      Array.from(this.children).filter((e) => e instanceof window.HTMLElement)
     );
-    n(i), i == null || i.focus();
+    r(t), t == null || t.focus();
   }
-  i() {
-    this.b && (this.b.negative = this.negative), this.c && this.c.toggleAttribute("data-negative", this.negative);
+  _syncNegative() {
+    this._dialogTitleElement && (this._dialogTitleElement.negative = this.negative), this._dialogActionsElement && this._dialogActionsElement.toggleAttribute("data-negative", this.negative);
   }
-  o() {
-    if (!this.a || this.dataset.hideHeader === void 0 && this.a.clientHeight + this.g >= this.a.scrollHeight)
+  _onContentScroll() {
+    if (!this._dialogContentElement || this.dataset.hideHeader === void 0 && this._dialogContentElement.clientHeight + this._dialogTitleHeight >= this._dialogContentElement.scrollHeight)
       return;
-    const t = this.a.scrollTop;
-    Math.round(t + this.a.clientHeight) >= this.a.scrollHeight || (t > 0 && this.k < t ? this.e(!0) : this.e(!1), this.k = t <= 0 ? 0 : t);
+    const e = this._dialogContentElement.scrollTop;
+    Math.round(e + this._dialogContentElement.clientHeight) >= this._dialogContentElement.scrollHeight || (e > 0 && this._lastScroll < e ? this._setHideHeaderDataAttribute(!0) : this._setHideHeaderDataAttribute(!1), this._lastScroll = e <= 0 ? 0 : e);
   }
-  p() {
-    var i;
-    this.g = (i = this.b) == null ? void 0 : i.shadowRoot.firstElementChild.clientHeight, this.style.setProperty("--sbb-dialog-header-height", `${this.g}px`);
+  _setDialogHeaderHeight() {
+    var t;
+    this._dialogTitleHeight = (t = this._dialogTitleElement) == null ? void 0 : t.shadowRoot.firstElementChild.clientHeight, this.style.setProperty("--sbb-dialog-header-height", `${this._dialogTitleHeight}px`);
   }
-  l() {
-    var i, t;
-    this.p(), this.d = this.a ? ((i = this.a) == null ? void 0 : i.scrollHeight) > ((t = this.a) == null ? void 0 : t.clientHeight) : !1, this.q();
+  _onContentResize() {
+    var t, e;
+    this._setDialogHeaderHeight(), this._overflows = this._dialogContentElement ? ((t = this._dialogContentElement) == null ? void 0 : t.scrollHeight) > ((e = this._dialogContentElement) == null ? void 0 : e.clientHeight) : !1, this._setOverflowsDataAttribute();
   }
-  e(i) {
-    var e;
-    const t = ((e = this.b) == null ? void 0 : e.hideOnScroll) ?? !1, s = typeof t == "boolean" ? t : v("zero", t, { includeMaxBreakpoint: !0 });
-    this.toggleAttribute("data-hide-header", s ? i : !1), this.b && this.b.toggleAttribute("data-hide-header", s ? i : !1);
+  _setHideHeaderDataAttribute(t) {
+    var i;
+    const e = ((i = this._dialogTitleElement) == null ? void 0 : i.hideOnScroll) ?? !1, a = typeof e == "boolean" ? e : v("zero", e, { includeMaxBreakpoint: !0 });
+    this.toggleAttribute("data-hide-header", a ? t : !1), this._dialogTitleElement && this._dialogTitleElement.toggleAttribute("data-hide-header", a ? t : !1);
   }
-  q() {
-    var i, t;
-    this.toggleAttribute("data-overflows", this.d), (i = this.b) == null || i.toggleAttribute("data-overflows", this.d), (t = this.c) == null || t.toggleAttribute("data-overflows", this.d);
+  _setOverflowsDataAttribute() {
+    var t, e;
+    this.toggleAttribute("data-overflows", this._overflows), (t = this._dialogTitleElement) == null || t.toggleAttribute("data-overflows", this._overflows), (e = this._dialogActionsElement) == null || e.toggleAttribute("data-overflows", this._overflows);
   }
   render() {
     return g`
       <div class="sbb-dialog__container">
         <div
-          @animationend=${(i) => this.onOverlayAnimationEnd(i)}
+          @animationend=${(t) => this.onOverlayAnimationEnd(t)}
           class="sbb-dialog"
-          id=${this.h}
+          id=${this._dialogId}
         >
           <div
-            @click=${(i) => this.closeOnSbbOverlayCloseClick(i)}
+            @click=${(t) => this.closeOnSbbOverlayCloseClick(t)}
             class="sbb-dialog__wrapper"
           >
             <slot></slot>
@@ -123,13 +123,13 @@ let E = 0, o = class extends w {
     `;
   }
 };
-o.styles = y;
-d([
+s.styles = y;
+b([
   h({ attribute: "backdrop-action" })
-], o.prototype, "backdropAction", 2);
-o = d([
+], s.prototype, "backdropAction", 2);
+s = b([
   c("sbb-dialog")
-], o);
+], s);
 export {
-  o as SbbDialogElement
+  s as SbbDialogElement
 };

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

@@ -3,36 +3,36 @@ import { customElement as d } from "lit/decorators.js";
 import { SbbButtonBaseElement as c } from "../core/base-elements.js";
 import { SbbConnectedAbortController as h, SbbSlotStateController as x } from "../core/controllers.js";
 import { hostAttributes as g } from "../core/decorators.js";
-import { EventEmitter as f } from "../core/eventing.js";
-import { SbbDisabledTabIndexActionMixin as v } from "../core/mixins.js";
-import { SbbIconNameMixin as m } from "../icon.js";
+import { EventEmitter as v } from "../core/eventing.js";
+import { SbbDisabledTabIndexActionMixin as m } from "../core/mixins.js";
+import { SbbIconNameMixin as f } from "../icon.js";
 const u = l`*,:before,:after{box-sizing:border-box}:host{--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);display:block}@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}.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)}`;
-var _ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, y = (e, n, t, o) => {
-  for (var a = o > 1 ? void 0 : o ? w(n, t) : n, i = e.length - 1, r; i >= 0; i--)
-    (r = e[i]) && (a = (o ? r(n, t, a) : r(a)) || a);
-  return o && a && _(n, t, a), a;
+var _ = Object.defineProperty, E = Object.getOwnPropertyDescriptor, w = (e, n, o, t) => {
+  for (var a = t > 1 ? void 0 : t ? E(n, o) : n, i = e.length - 1, r; i >= 0; i--)
+    (r = e[i]) && (a = (t ? r(n, o, a) : r(a)) || a);
+  return t && a && _(n, o, a), a;
 };
-let s = class extends v(
-  m(c)
+let s = class extends m(
+  f(c)
 ) {
   constructor() {
-    super(...arguments), this.c = new f(
+    super(...arguments), this._toggleExpanded = new v(
       this,
       s.events.toggleExpanded,
       {
         bubbles: !0
       }
-    ), this.d = new h(this), this.e = new x(this, () => this.a());
+    ), this._abort = new h(this), this._namedSlots = new x(this, () => this._setDataIconAttribute());
   }
   connectedCallback() {
     super.connectedCallback();
-    const e = this.d.signal;
-    this.addEventListener("click", () => this.f(), { signal: e }), this.addEventListener("mouseenter", () => this.b(!0), { signal: e }), this.addEventListener("mouseleave", () => this.b(!1), { signal: e });
+    const e = this._abort.signal;
+    this.addEventListener("click", () => this._emitExpandedEvent(), { signal: e }), this.addEventListener("mouseenter", () => this._onMouseMovement(!0), { signal: e }), this.addEventListener("mouseleave", () => this._onMouseMovement(!1), { signal: e });
   }
-  f() {
-    this.disabled || this.c.emit();
+  _emitExpandedEvent() {
+    this.disabled || this._toggleExpanded.emit();
   }
-  b(e) {
+  _onMouseMovement(e) {
     const n = this.closest("sbb-expansion-panel");
     (!e || n && window.matchMedia("(any-hover: hover)").matches) && n.toggleAttribute("data-toggle-hover", e);
   }
@@ -41,11 +41,11 @@ let s = class extends v(
    * It needs to be set before the @slotchange event bubbles to the 'expansion-panel'
    * but after the 'NamedSlotStateController' has run.
    */
-  a() {
-    this.toggleAttribute("data-icon", !!(this.iconName || this.e.slots.has("icon")));
+  _setDataIconAttribute() {
+    this.toggleAttribute("data-icon", !!(this.iconName || this._namedSlots.slots.has("icon")));
   }
   renderTemplate() {
-    return this.a(), b`
+    return this._setDataIconAttribute(), b`
       <span class="sbb-expansion-panel-header__title">
         <span class="sbb-expansion-panel-header__icon"> ${this.renderIconSlot()} </span>
         <slot></slot>
@@ -64,7 +64,7 @@ s.styles = u;
 s.events = {
   toggleExpanded: "toggleExpanded"
 };
-s = y([
+s = w([
   d("sbb-expansion-panel-header"),
   g({
     slot: "header"

package/expansion-panel/expansion-panel.js

@@ -1,116 +1,116 @@
 import { css as c, LitElement as h } from "lit";
 import { property as r, customElement as x } from "lit/decorators.js";
-import { html as u, unsafeStatic as p } from "lit/static-html.js";
-import { SbbConnectedAbortController as m } from "../core/controllers.js";
-import { EventEmitter as b } from "../core/eventing.js";
-import { SbbHydrationMixin as v } from "../core/mixins.js";
-const g = c`*,: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}}`;
-var f = Object.defineProperty, w = Object.getOwnPropertyDescriptor, o = (e, a, t, n) => {
-  for (var i = n > 1 ? void 0 : n ? w(a, t) : a, d = e.length - 1, l; d >= 0; d--)
-    (l = e[d]) && (i = (n ? l(a, t, i) : l(i)) || i);
-  return n && i && f(a, t, i), i;
+import { html as _, unsafeStatic as p } from "lit/static-html.js";
+import { SbbConnectedAbortController as u } from "../core/controllers.js";
+import { EventEmitter as d } from "../core/eventing.js";
+import { SbbHydrationMixin as f } from "../core/mixins.js";
+const m = c`*,: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}}`;
+var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (e, a, t, s) => {
+  for (var i = s > 1 ? void 0 : s ? v(a, t) : a, b = e.length - 1, l; b >= 0; b--)
+    (l = e[b]) && (i = (s ? l(a, t, i) : l(i)) || i);
+  return s && i && g(a, t, i), i;
 };
-let y = 0, s = class extends v(h) {
+let w = 0, n = class extends f(h) {
   constructor() {
-    super(...arguments), this.color = "white", this.e = !1, this.d = !1, this.borderless = !1, this.size = "l", this.l = new b(
+    super(...arguments), this.color = "white", this._expanded = !1, this._disabled = !1, this.borderless = !1, this.size = "l", this._willOpen = new d(
       this,
-      s.events.willOpen
-    ), this.f = new b(
+      n.events.willOpen
+    ), this._didOpen = new d(
       this,
-      s.events.didOpen
-    ), this.m = new b(
+      n.events.didOpen
+    ), this._willClose = new d(
       this,
-      s.events.willClose
-    ), this.n = new b(
+      n.events.willClose
+    ), this._didClose = new d(
       this,
-      s.events.didClose
-    ), this.g = `-${++y}`, this.o = new m(this), this.h = !1;
+      n.events.didClose
+    ), this._progressiveId = `-${++w}`, this._abort = new u(this), this._initialized = !1;
   }
   set expanded(e) {
-    this.e = e, this.j();
+    this._expanded = e, this._onExpandedChange();
   }
   get expanded() {
-    return this.e;
+    return this._expanded;
   }
   set disabled(e) {
-    this.d = e, this.k(this.d);
+    this._disabled = e, this._updateDisabledOnHeader(this._disabled);
   }
   get disabled() {
-    return this.d;
+    return this._disabled;
   }
   /**
    * The state of the notification.
    */
-  set b(e) {
+  set _state(e) {
     this.setAttribute("data-state", e);
   }
-  get b() {
+  get _state() {
     return this.getAttribute("data-state");
   }
   connectedCallback() {
     var a;
     super.connectedCallback();
-    const e = this.o.signal;
-    this.addEventListener("toggleExpanded", () => this.p(), { signal: e }), this.toggleAttribute("data-accordion", !!((a = this.closest) != null && a.call(this, "sbb-accordion")));
+    const e = this._abort.signal;
+    this.addEventListener("toggleExpanded", () => this._toggleExpanded(), { signal: e }), this.toggleAttribute("data-accordion", !!((a = this.closest) != null && a.call(this, "sbb-accordion")));
   }
   willUpdate(e) {
     var a, t;
-    super.willUpdate(e), e.has("size") && ((a = this.a) == null || a.setAttribute("data-size", String(this.size)), (t = this.c) == null || t.setAttribute("data-size", String(this.size)));
+    super.willUpdate(e), e.has("size") && ((a = this._headerRef) == null || a.setAttribute("data-size", String(this.size)), (t = this._contentRef) == null || t.setAttribute("data-size", String(this.size)));
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.removeAttribute("data-accordion");
   }
   firstUpdated(e) {
-    super.firstUpdated(e), this.h = !0;
+    super.firstUpdated(e), this._initialized = !0;
   }
-  p() {
+  _toggleExpanded() {
     this.expanded = !this.expanded;
   }
-  j() {
+  _onExpandedChange() {
     var e, a;
-    (e = this.a) == null || e.setAttribute("aria-expanded", String(this.expanded)), (a = this.c) == null || a.setAttribute("aria-hidden", String(!this.expanded)), this.expanded ? this.q(!this.h) : this.b === "opened" && this.r();
+    (e = this._headerRef) == null || e.setAttribute("aria-expanded", String(this.expanded)), (a = this._contentRef) == null || a.setAttribute("aria-hidden", String(!this.expanded)), this.expanded ? this._open(!this._initialized) : this._state === "opened" && this._close();
   }
-  q(e = !1) {
-    this.b = "opening", this.l.emit(), e && (this.b = "opened", this.f.emit());
+  _open(e = !1) {
+    this._state = "opening", this._willOpen.emit(), e && (this._state = "opened", this._didOpen.emit());
   }
-  r() {
-    this.b = "closing", this.m.emit();
+  _close() {
+    this._state = "closing", this._willClose.emit();
   }
-  k(e) {
-    this.a && (this.a.disabled = e);
+  _updateDisabledOnHeader(e) {
+    this._headerRef && (this._headerRef.disabled = e);
   }
-  i() {
+  _handleSlotchange() {
     const e = Array.from(this.children ?? []), a = e.find(
-      (n) => n.localName === "sbb-expansion-panel-header"
+      (s) => s.localName === "sbb-expansion-panel-header"
     ), t = e.find(
-      (n) => n.localName === "sbb-expansion-panel-content"
+      (s) => s.localName === "sbb-expansion-panel-content"
     );
-    this.a === a && this.c === t || (a && this.a !== a && (a.id || (a.id = `sbb-expansion-panel-header${this.g}`), a.setAttribute("aria-expanded", String(this.expanded)), a.toggleAttribute("disabled", this.disabled), a.setAttribute("data-size", String(this.size))), t && this.c !== t && (t.id || (t.id = `sbb-expansion-panel-content${this.g}`), t.setAttribute("aria-hidden", String(!this.expanded)), t.setAttribute("data-size", String(this.size))), this.a = a, this.c = t, this.a && this.c && (this.a.setAttribute("aria-controls", this.c.id), this.c.setAttribute("aria-labelledby", this.a.id), this.c.toggleAttribute(
+    this._headerRef === a && this._contentRef === t || (a && this._headerRef !== a && (a.id || (a.id = `sbb-expansion-panel-header${this._progressiveId}`), a.setAttribute("aria-expanded", String(this.expanded)), a.toggleAttribute("disabled", this.disabled), a.setAttribute("data-size", String(this.size))), t && this._contentRef !== t && (t.id || (t.id = `sbb-expansion-panel-content${this._progressiveId}`), t.setAttribute("aria-hidden", String(!this.expanded)), t.setAttribute("data-size", String(this.size))), this._headerRef = a, this._contentRef = t, 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.a.hasAttribute("data-icon")
+      this._headerRef.hasAttribute("data-icon")
     )));
   }
-  s(e) {
-    e.animationName === "open-opacity" && this.b === "opening" ? (this.b = "opened", this.f.emit()) : e.animationName === "close" && this.b === "closing" && (this.b = "closed", this.n.emit());
+  _onAnimationEnd(e) {
+    e.animationName === "open-opacity" && this._state === "opening" ? (this._state = "opened", this._didOpen.emit()) : e.animationName === "close" && this._state === "closing" && (this._state = "closed", this._didClose.emit());
   }
   render() {
     const e = this.titleLevel ? `h${this.titleLevel}` : "div";
-    return u`
+    return _`
       <div class="sbb-expansion-panel">
         <${p(e)} class="sbb-expansion-panel__header">
-          <slot name="header" @slotchange=${this.i}></slot>
+          <slot name="header" @slotchange=${this._handleSlotchange}></slot>
         </${p(e)}>
-        <div class="sbb-expansion-panel__content-wrapper" @animationend=${this.s}>
+        <div class="sbb-expansion-panel__content-wrapper" @animationend=${this._onAnimationEnd}>
           <span class="sbb-expansion-panel__content">
-            <slot name="content" @slotchange=${this.i}></slot>
+            <slot name="content" @slotchange=${this._handleSlotchange}></slot>
           </span>
         </div>
       </div>
     `;
   }
 };
-s.styles = g;
-s.events = {
+n.styles = m;
+n.events = {
   willOpen: "willOpen",
   didOpen: "didOpen",
   willClose: "willClose",
@@ -118,25 +118,25 @@ s.events = {
 };
 o([
   r({ attribute: "title-level" })
-], s.prototype, "titleLevel", 2);
+], n.prototype, "titleLevel", 2);
 o([
   r()
-], s.prototype, "color", 2);
+], n.prototype, "color", 2);
 o([
   r({ reflect: !0, type: Boolean })
-], s.prototype, "expanded", 1);
+], n.prototype, "expanded", 1);
 o([
   r({ reflect: !0, type: Boolean })
-], s.prototype, "disabled", 1);
+], n.prototype, "disabled", 1);
 o([
   r({ reflect: !0, type: Boolean })
-], s.prototype, "borderless", 2);
+], n.prototype, "borderless", 2);
 o([
   r({ reflect: !0 })
-], s.prototype, "size", 2);
-s = o([
+], n.prototype, "size", 2);
+n = o([
   x("sbb-expansion-panel")
-], s);
+], n);
 export {
-  s as SbbExpansionPanelElement
+  n as SbbExpansionPanelElement
 };