@sbb-esta/lyne-elements 1.4.0 → 1.6.0

package/flip-card/flip-card-summary/flip-card-summary.d.ts

@@ -0,0 +1,22 @@
+import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
+
+export type SbbFlipCardImageAlignment = 'after' | 'below';
+/**
+ * Combined with a `sbb-flip-card`, it displays its content when the card is not flipped.
+ *
+ * @slot - Use the unnamed slot to provide a title for the `sbb-flip-card-summary`.
+ * @slot image - Use this slot to provide an image for the `sbb-flip-card-summary`.
+ */
+export declare class SbbFlipCardSummaryElement extends LitElement {
+    static styles: CSSResultGroup;
+    /** The position where to render the image. */
+    imageAlignment: SbbFlipCardImageAlignment;
+    protected willUpdate(_changedProperties: PropertyValues): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-flip-card-summary': SbbFlipCardSummaryElement;
+    }
+}
+//# sourceMappingURL=flip-card-summary.d.ts.map

package/flip-card/flip-card-summary/flip-card-summary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-card-summary.d.ts","sourceRoot":"","sources":["../../../../src/elements/flip-card/flip-card-summary/flip-card-summary.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAOvC,MAAM,MAAM,yBAAyB,GAAG,OAAO,GAAG,OAAO,CAAC;AAE1D;;;;;GAKG;AACH,qBAIa,yBAA0B,SAAQ,UAAU;IACvD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,8CAA8C;IAEvC,cAAc,EAAE,yBAAyB,CAAW;cAExC,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;cAQpD,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,uBAAuB,EAAE,yBAAyB,CAAC;KACpD;CACF"}

package/flip-card/flip-card-summary/index.d.ts

@@ -0,0 +1,2 @@
+export * from './flip-card-summary.js';
+//# sourceMappingURL=index.d.ts.map

package/flip-card/flip-card-summary/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/flip-card/flip-card-summary/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}

package/flip-card/flip-card-summary.d.ts

@@ -0,0 +1,2 @@
+export * from './flip-card-summary/flip-card-summary.js';
+//# sourceMappingURL=flip-card-summary.d.ts.map

package/flip-card/flip-card-summary.d.ts.map

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

package/flip-card/flip-card-summary.js

@@ -0,0 +1,41 @@
+import { css as d, LitElement as o, html as p } from "lit";
+import { property as b, customElement as g } from "lit/decorators.js";
+import { hostAttributes as f } from "../core/decorators.js";
+const c = d`*,:before,:after{box-sizing:border-box}:host{--sbb-flip-card-summary-opacity: 1;--sbb-flip-card-summary-pointer-events: all;display:contents}.sbb-flip-card-summary{display:grid;position:absolute;pointer-events:var(--sbb-flip-card-summary-pointer-events);opacity:var(--sbb-flip-card-summary-opacity);border-radius:var(--sbb-flip-card-border-radius);overflow:hidden;grid-template-columns:1fr;grid-template-rows:auto 1fr;width:100%;height:100%;transition:all var(--sbb-flip-card-summary-transition-duration) ease-out;transition-delay:var(--sbb-flip-card-summary-transition-delay)}@media (min-width: 37.5rem){:host([image-alignment=after]) .sbb-flip-card-summary{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr}}@media (min-width: 52.5rem){:host([image-alignment=after]) .sbb-flip-card-summary{grid-template-columns:repeat(2,1fr);grid-template-rows:1fr}}::slotted(sbb-title){padding-inline:var(--sbb-spacing-responsive-s);padding-block:var(--sbb-spacing-responsive-s) var(--sbb-spacing-responsive-xs);margin:0;grid-area:1/1/2/2}@media (min-width: 37.5rem){:host([image-alignment=after]) ::slotted(sbb-title){grid-area:1/1/2/3}}@media (min-width: 52.5rem){:host([image-alignment=after]) ::slotted(sbb-title){grid-area:1/1/2/2}}.sbb-flip-card-summary--image-wrapper{max-height:var(--sbb-flip-card-min-height);grid-area:2/1/3/2}@media (min-width: 37.5rem){:host([image-alignment=after]) .sbb-flip-card-summary--image-wrapper{grid-area:1/3/2/4}}@media (min-width: 52.5rem){:host([image-alignment=after]) .sbb-flip-card-summary--image-wrapper{grid-area:1/2/2/3}}::slotted(img){object-fit:cover;width:100%;height:100%}::slotted(sbb-image){width:100%;height:100%}`;
+var u = Object.defineProperty, h = Object.getOwnPropertyDescriptor, n = (i, e, a, t) => {
+  for (var r = t > 1 ? void 0 : t ? h(e, a) : e, m = i.length - 1, l; m >= 0; m--)
+    (l = i[m]) && (r = (t ? l(e, a, r) : l(r)) || r);
+  return t && r && u(e, a, r), r;
+};
+let s = class extends o {
+  constructor() {
+    super(...arguments), this.imageAlignment = "after";
+  }
+  willUpdate(i) {
+    var e, a;
+    super.willUpdate(i), i.has("imageAlignment") && ((a = (e = this.closest) == null ? void 0 : e.call(this, "sbb-flip-card")) == null || a.setAttribute("data-image-alignment", this.imageAlignment));
+  }
+  render() {
+    return p`
+      <div class="sbb-flip-card-summary">
+        <slot></slot>
+        <div class="sbb-flip-card-summary--image-wrapper">
+          <slot name="image"></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+s.styles = c;
+n([
+  b({ attribute: "image-alignment", reflect: !0 })
+], s.prototype, "imageAlignment", 2);
+s = n([
+  g("sbb-flip-card-summary"),
+  f({
+    slot: "summary"
+  })
+], s);
+export {
+  s as SbbFlipCardSummaryElement
+};

package/flip-card/flip-card.d.ts

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

package/flip-card/flip-card.d.ts.map

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

package/flip-card/flip-card.js

@@ -0,0 +1,58 @@
+import { css as b, LitElement as d, html as p } from "lit";
+import { state as c, customElement as m } from "lit/decorators.js";
+import { SbbLanguageController as f } from "../core/controllers.js";
+import { i18nFlipCard as u, i18nReverseCard as h } from "../core/i18n.js";
+import { SbbHydrationMixin as g } from "../core/mixins.js";
+import "../button/secondary-button.js";
+const v = b`*,:before,:after{box-sizing:border-box}:host{--sbb-flip-card-background-color: var(--sbb-color-cloud);--sbb-flip-card-border-radius: var(--sbb-border-radius-4x);--sbb-flip-card-min-height: 17.5rem;--sbb-flip-card-details-min-height: var(--sbb-flip-card-min-height);--sbb-flip-card-summary-transition-duration: var(--sbb-animation-duration-5x);--sbb-flip-card-summary-transition-delay: var(--sbb-animation-duration-2x);--sbb-flip-card-details-transition-duration: var(--sbb-animation-duration-4x);--sbb-flip-card-details-transition-delay: var(--sbb-disable-animation-zero-time);position:relative;display:block}@media (min-width: 52.5rem){:host{--sbb-flip-card-min-height: 20rem}}:host(:hover){--sbb-flip-card-background-color: var(--sbb-color-cloud-alpha-80)}:host([data-flipped]){--sbb-flip-card-background-color: var(--sbb-color-midnight);--sbb-flip-card-details-transition-duration: var(--sbb-animation-duration-2x);--sbb-flip-card-details-transition-delay: var(--sbb-animation-duration-5x);--sbb-flip-card-summary-transition-delay: var(--sbb-disable-animation-zero-time);--sbb-flip-card-details-min-height: fit-content}:host([data-flipped]) ::slotted(sbb-flip-card-summary){--sbb-flip-card-summary-opacity: 0;--sbb-flip-card-summary-pointer-events: none}:host([data-flipped]) ::slotted(sbb-flip-card-details){--sbb-flip-card-details-opacity: 1;--sbb-flip-card-details-translate-y: 0}@media (min-width: 37.5rem) and (max-width: 52.4375rem){:host([data-image-alignment=after]){--sbb-flip-card-min-height: 15rem}}@media (min-width: 80rem){:host([data-image-alignment=after]){--sbb-flip-card-min-height: 25rem}}.sbb-flip-card{position:relative;display:flex;height:100%;flex-flow:wrap;flex-direction:column;gap:var(--sbb-spacing-responsive-xs);min-height:var(--sbb-flip-card-min-height);background-color:var(--sbb-flip-card-background-color);border-radius:var(--sbb-flip-card-border-radius);transition:var(--sbb-flip-card-summary-transition-duration) ease-out;transition-delay:var(--sbb-flip-card-summary-transition-delay)}.sbb-flip-card--toggle-button{position:absolute;inset-inline-start:var(--sbb-spacing-responsive-s);inset-block-end:var(--sbb-spacing-responsive-s)}:host([data-flipped]) .sbb-flip-card--toggle-button{--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}button{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;cursor:pointer;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-flip-card-border-radius)}button:not([data-focus-origin=mouse],[data-focus-origin=touch]):focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}`;
+var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, l = (n, t, s, a) => {
+  for (var i = a > 1 ? void 0 : a ? _(t, s) : t, e = n.length - 1, o; e >= 0; e--)
+    (o = n[e]) && (i = (a ? o(t, s, i) : o(i)) || i);
+  return a && i && y(t, s, i), i;
+};
+let r = class extends g(d) {
+  constructor() {
+    super(...arguments), this._flipped = !1, this._language = new f(this);
+  }
+  /** Returns the slotted sbb-flip-card-summary. */
+  get summary() {
+    return this.querySelector("sbb-flip-card-summary");
+  }
+  /** Returns the slotted sbb-flip-card-details. */
+  get details() {
+    return this.querySelector("sbb-flip-card-details");
+  }
+  /** Toggles the state of the sbb-flip-card. */
+  toggle() {
+    this._flipped = !this._flipped, this.toggleAttribute("data-flipped", this._flipped), this.summary.inert = this._flipped, this.details.inert = !this._flipped;
+  }
+  render() {
+    return p`
+      <div class="sbb-flip-card">
+        <slot name="summary" @slotchange=${() => this.summary.inert = this._flipped}></slot>
+        <button
+          @click=${() => this.toggle()}
+          aria-label=${this._flipped ? h[this._language.current] : u[this._language.current]}
+          aria-expanded=${this._flipped.toString()}
+        ></button>
+        <slot name="details" @slotchange=${() => this.details.inert = !this._flipped}></slot>
+        <sbb-secondary-button
+          class="sbb-flip-card--toggle-button"
+          icon-name=${this._flipped ? "cross-small" : "plus-small"}
+          @click=${() => this.toggle()}
+          size="s"
+        ></sbb-secondary-button>
+      </div>
+    `;
+  }
+};
+r.styles = v;
+l([
+  c()
+], r.prototype, "_flipped", 2);
+r = l([
+  m("sbb-flip-card")
+], r);
+export {
+  r as SbbFlipCardElement
+};

package/flip-card.d.ts

@@ -0,0 +1,4 @@
+export * from './flip-card/flip-card.js';
+export * from './flip-card/flip-card-summary.js';
+export * from './flip-card/flip-card-details.js';
+//# sourceMappingURL=flip-card.d.ts.map

package/flip-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-card.d.ts","sourceRoot":"","sources":["../../src/elements/flip-card.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC"}

package/flip-card.js

@@ -0,0 +1,3 @@
+export * from "./flip-card/flip-card.js";
+export * from "./flip-card/flip-card-summary.js";
+export * from "./flip-card/flip-card-details.js";

package/icon/icon.d.ts

@@ -1,4 +1,4 @@
-import { PropertyValues } from 'lit';
+import { PropertyValues, TemplateResult } from 'lit';
 import { SbbIconBase } from './icon-base.js';
 
 /**
@@ -12,9 +12,17 @@ export declare class SbbIconElement extends SbbIconBase {
      */
     name: string;
     private _defaultAriaLabel;
+    /**
+     * The sbb-angular library has a sbb-icon component as well. In order to provide
+     * compatibility with it (as some icons are used internally inside the other sbb-angular
+     * components) we need to check whether the attribute svgicon is used.
+     */
+    private _sbbAngularCompatibility;
     protected fetchSvgIcon(namespace: string, name: string): Promise<string>;
     protected willUpdate(changedProperties: PropertyValues<this>): void;
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
     protected firstUpdated(changedProperties: PropertyValues<this>): void;
+    protected render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/icon/icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/elements/icon/icon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;GAEG;AACH,qBACa,cAAe,SAAQ,WAAW;IAC7C;;;;OAIG;IACiC,IAAI,EAAG,MAAM,CAAC;IAElD,OAAO,CAAC,iBAAiB,CAAM;cAEN,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;cAiBpE,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;CAO/E;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/elements/icon/icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;GAEG;AACH,qBACa,cAAe,SAAQ,WAAW;IAC7C;;;;OAIG;IACiC,IAAI,EAAG,MAAM,CAAC;IAElD,OAAO,CAAC,iBAAiB,CAAM;IAE/B;;;;OAIG;IACM,OAAO,CAAC,wBAAwB,CAAS;cAEzB,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;cAiBpE,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ5D,wBAAwB,CACtC,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,GAAG,IAAI,EACnB,KAAK,EAAE,MAAM,GAAG,IAAI,GACnB,IAAI;cAQY,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQ3D,MAAM,IAAI,cAAc;CAG5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}

package/icon.js

@@ -1,73 +1,73 @@
-import { state as v, property as f, customElement as w } from "lit/decorators.js";
-import { isServer as y, css as N, LitElement as I, html as c, nothing as p } from "lit";
-import { unsafeHTML as $ } from "lit/directives/unsafe-html.js";
-import { until as A } from "lit/directives/until.js";
-import { hostAttributes as S } from "./core/decorators.js";
-import { readConfig as L } from "./core/config.js";
-const C = (t) => typeof t == "string", g = (t) => {
+import { isServer as y, css as w, LitElement as N, html as c, nothing as m } from "lit";
+import { state as b, property as h, customElement as A } from "lit/decorators.js";
+import { unsafeHTML as C } from "lit/directives/unsafe-html.js";
+import { until as I } from "lit/directives/until.js";
+import { hostAttributes as $ } from "./core/decorators.js";
+import { readConfig as S } from "./core/config.js";
+const L = (t) => typeof t == "string", _ = (t) => {
   if (t.nodeType === 1) {
     if (t.nodeName.toLowerCase() === "script")
       return !1;
     for (let e = 0; e < t.attributes.length; e++) {
-      const o = t.attributes[e].name;
-      if (C(o) && o.toLowerCase().indexOf("on") === 0)
+      const i = t.attributes[e].name;
+      if (L(i) && i.toLowerCase().indexOf("on") === 0)
         return !1;
     }
     for (let e = 0; e < t.childNodes.length; e++)
-      if (!g(t.childNodes[e]))
+      if (!_(t.childNodes[e]))
         return !1;
   }
   return !0;
-}, E = (t, e = !0, o = !1) => {
+}, E = (t, e = !0, i = !1) => {
   const r = document.createElement("div");
   r.innerHTML = t;
-  for (let i = r.childNodes.length - 1; i >= 0; i--)
-    r.childNodes[i].nodeName.toLowerCase() !== "svg" && r.removeChild(r.childNodes[i]);
+  for (let o = r.childNodes.length - 1; o >= 0; o--)
+    r.childNodes[o].nodeName.toLowerCase() !== "svg" && r.removeChild(r.childNodes[o]);
   const s = r.firstElementChild;
-  return s && s.nodeName.toLowerCase() === "svg" && (o && !s.classList.contains("color-immutable") && s.classList.add("color-immutable"), e === !1 || g(s)) ? r.innerHTML : "";
-}, b = "https://icons.app.sbb.ch/", P = (/* @__PURE__ */ new Map()).set("default", `${b}icons/`).set("picto", `${b}picto/`), m = /* @__PURE__ */ new Map(), O = (t, e, o) => {
-  var h;
-  const r = L().icon ?? {}, s = ((h = r.namespaces) == null ? void 0 : h.get(t)) ?? P.get(t);
+  return s && s.nodeName.toLowerCase() === "svg" && (i && !s.classList.contains("color-immutable") && s.classList.add("color-immutable"), e === !1 || _(s)) ? r.innerHTML : "";
+}, g = "https://icons.app.sbb.ch/", P = (/* @__PURE__ */ new Map()).set("default", `${g}icons/`).set("picto", `${g}picto/`), v = /* @__PURE__ */ new Map(), O = (t, e, i) => {
+  var f;
+  const r = S().icon ?? {}, s = ((f = r.namespaces) == null ? void 0 : f.get(t)) ?? P.get(t);
   if (s == null)
     throw Error(
       `Unable to find the namespace "${t}". Please register your custom namespace.`
     );
-  const i = `${s}${e}.svg`;
-  let a = m.get(i);
+  const o = `${s}${e}.svg`;
+  let a = v.get(o);
   if (!a)
     if (typeof fetch < "u" && !y)
       a = (r.interceptor ?? ((l) => l.request()))({
         namespace: t,
         name: e,
-        url: i,
-        request: () => fetch(i).then(async (l) => {
+        url: o,
+        request: () => fetch(o).then(async (l) => {
           if (!l.ok)
             throw new Error("Failed to load icon " + t + ":" + e);
-          return E(await l.text(), o);
+          return E(await l.text(), i);
         }).catch((l) => {
           throw Error(l);
         })
-      }), m.set(i, a);
+      }), v.set(o, a);
     else
       return Promise.resolve("");
   return a;
-}, x = N`*,:before,:after{box-sizing:border-box}:host{display:inline-block;line-height:0;-webkit-tap-highlight-color:transparent}:host([data-empty]){--sbb-icon-default-dimension: 0}:host([data-empty][data-namespace=default][name$=-small]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-small)}:host([data-empty][data-namespace=default][name$=-medium]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-medium)}:host([data-empty][data-namespace=default][name$=-large]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-large)}svg{width:var(--sbb-icon-svg-width, var(--sbb-icon-default-dimension));height:var(--sbb-icon-svg-height, var(--sbb-icon-default-dimension));stroke:var(--sbb-icon-svg-stroke-color);stroke-width:var(--sbb-icon-svg-stroke-width)}svg:not(.color-immutable) [fill]:not([fill=none]){fill:currentcolor}svg:not(.color-immutable) [stroke]:not([stroke=none]){stroke:currentcolor}svg:not(.color-immutable)>:where(path,polygon,polyline):where(:not([stroke]):not([fill])),svg:not(.color-immutable) :where(:not([stroke]):not([fill])) :where(path,polygon,polyline):where(:not([stroke]):not([fill])){fill:currentcolor}`;
-var z = Object.defineProperty, M = Object.getOwnPropertyDescriptor, u = (t, e, o, r) => {
-  for (var s = r > 1 ? void 0 : r ? M(e, o) : e, i = t.length - 1, a; i >= 0; i--)
-    (a = t[i]) && (s = (r ? a(e, o, s) : a(s)) || s);
-  return r && s && z(e, o, s), s;
+}, x = w`*,:before,:after{box-sizing:border-box}:host{display:inline-block;line-height:0;-webkit-tap-highlight-color:transparent}:host([data-empty]){--sbb-icon-default-dimension: 0}:host([data-empty][data-namespace=default][name$=-small]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-small)}:host([data-empty][data-namespace=default][name$=-medium]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-medium)}:host([data-empty][data-namespace=default][name$=-large]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-large)}svg{width:var(--sbb-icon-svg-width, var(--sbb-icon-default-dimension));height:var(--sbb-icon-svg-height, var(--sbb-icon-default-dimension));stroke:var(--sbb-icon-svg-stroke-color);stroke-width:var(--sbb-icon-svg-stroke-width)}svg:not(.color-immutable) [fill]:not([fill=none]){fill:currentcolor}svg:not(.color-immutable) [stroke]:not([stroke=none]){stroke:currentcolor}svg:not(.color-immutable)>:where(path,polygon,polyline):where(:not([stroke]):not([fill])),svg:not(.color-immutable) :where(:not([stroke]):not([fill])) :where(path,polygon,polyline):where(:not([stroke]):not([fill])){fill:currentcolor}`;
+var z = Object.defineProperty, M = Object.getOwnPropertyDescriptor, d = (t, e, i, r) => {
+  for (var s = r > 1 ? void 0 : r ? M(e, i) : e, o = t.length - 1, a; o >= 0; o--)
+    (a = t[o]) && (s = (r ? a(e, i, s) : a(s)) || s);
+  return r && s && z(e, i, s), s;
 };
-let n = class extends I {
+let n = class extends N {
   constructor() {
     super(...arguments), this._svgNamespace = n._defaultNamespace, this.noSanitize = !1;
   }
   async loadSvgIcon(t) {
     if (!t)
       return;
-    const [e, o] = this._splitIconName(t);
+    const [e, i] = this._splitIconName(t);
     this._svgNamespace = e, this.setAttribute("data-namespace", this._svgNamespace);
-    const r = this.fetchSvgIcon(this._svgNamespace, o);
-    this._svgIcon = r.then((s) => $(s));
+    const r = this.fetchSvgIcon(this._svgNamespace, i);
+    this._svgIcon = r.then((s) => C(s));
     try {
       this.toggleAttribute("data-empty", !await r);
     } catch {
@@ -95,7 +95,7 @@ let n = class extends I {
   }
   render() {
     return c`<span class="sbb-icon-inner"
-      >${A(
+      >${I(
       this._svgIcon,
       // To reserve space, we need an empty svg to apply dimension to.
       c`<svg width="0" height="0"></svg>`
@@ -105,29 +105,29 @@ let n = class extends I {
 };
 n.styles = x;
 n._defaultNamespace = "default";
-u([
-  v()
+d([
+  b()
 ], n.prototype, "_svgNamespace", 2);
-u([
-  v()
+d([
+  b()
 ], n.prototype, "_svgIcon", 2);
-u([
-  f({ attribute: "no-sanitize", type: Boolean })
+d([
+  h({ attribute: "no-sanitize", type: Boolean })
 ], n.prototype, "noSanitize", 2);
-n = u([
-  S({
+n = d([
+  $({
     "data-namespace": n._defaultNamespace,
     "data-empty": ""
   })
 ], n);
-var U = Object.defineProperty, j = Object.getOwnPropertyDescriptor, _ = (t, e, o, r) => {
-  for (var s = r > 1 ? void 0 : r ? j(e, o) : e, i = t.length - 1, a; i >= 0; i--)
-    (a = t[i]) && (s = (r ? a(e, o, s) : a(s)) || s);
-  return r && s && U(e, o, s), s;
+var U = Object.defineProperty, j = Object.getOwnPropertyDescriptor, p = (t, e, i, r) => {
+  for (var s = r > 1 ? void 0 : r ? j(e, i) : e, o = t.length - 1, a; o >= 0; o--)
+    (a = t[o]) && (s = (r ? a(e, i, s) : a(s)) || s);
+  return r && s && U(e, i, s), s;
 };
-let d = class extends n {
+let u = class extends n {
   constructor() {
-    super(...arguments), this._defaultAriaLabel = "";
+    super(...arguments), this._defaultAriaLabel = "", this._sbbAngularCompatibility = !1;
   }
   async fetchSvgIcon(t, e) {
     return this.getAttribute("aria-label") === this._defaultAriaLabel && this.removeAttribute("aria-label"), this._defaultAriaLabel = `Icon ${e.replace(/-/g, " ")}`, this.getAttribute("aria-hidden") === "false" && !this.hasAttribute("aria-label") && e && this.setAttribute("aria-label", this._defaultAriaLabel), super.fetchSvgIcon(t, e);
@@ -135,40 +135,49 @@ let d = class extends n {
   willUpdate(t) {
     super.willUpdate(t), t.has("name") && this.loadSvgIcon(this.name);
   }
+  attributeChangedCallback(t, e, i) {
+    t === "svgicon" ? this._sbbAngularCompatibility = !!i : super.attributeChangedCallback(t, e, i);
+  }
   firstUpdated(t) {
     super.firstUpdated(t), this.hasAttribute("aria-hidden") || this.setAttribute("aria-hidden", "true");
   }
+  render() {
+    return this._sbbAngularCompatibility ? c`<slot></slot>` : super.render();
+  }
 };
-_([
-  f({ reflect: !0 })
-], d.prototype, "name", 2);
-d = _([
-  w("sbb-icon")
-], d);
-var T = Object.defineProperty, q = (t, e, o, r) => {
-  for (var s = void 0, i = t.length - 1, a; i >= 0; i--)
-    (a = t[i]) && (s = a(e, o, s) || s);
-  return s && T(e, o, s), s;
+p([
+  h({ reflect: !0 })
+], u.prototype, "name", 2);
+p([
+  b()
+], u.prototype, "_sbbAngularCompatibility", 2);
+u = p([
+  A("sbb-icon")
+], u);
+var k = Object.defineProperty, T = (t, e, i, r) => {
+  for (var s = void 0, o = t.length - 1, a; o >= 0; o--)
+    (a = t[o]) && (s = a(e, i, s) || s);
+  return s && k(e, i, s), s;
 };
 const J = (t) => {
   class e extends t {
     renderIconSlot(r) {
       return c`
         <slot name="icon">
-          ${this.iconName ? c`<sbb-icon name=${this.iconName} class=${r || p}></sbb-icon>` : p}
+          ${this.iconName ? c`<sbb-icon name=${this.iconName} class=${r || m}></sbb-icon>` : m}
         </slot>
       `;
     }
   }
-  return q([
-    f({ attribute: "icon-name", reflect: !0 })
+  return T([
+    h({ attribute: "icon-name", reflect: !0 })
   ], e.prototype, "iconName"), e;
 };
 export {
   n as SbbIconBase,
-  d as SbbIconElement,
+  u as SbbIconElement,
   J as SbbIconNameMixin,
   O as getSvgContent,
-  g as isValid,
+  _ as isValid,
   E as validateContent
 };

package/index.d.ts

@@ -49,6 +49,9 @@ import { SbbExpansionPanelElement } from "./expansion-panel/expansion-panel.js";
 import { SbbExpansionPanelContentElement } from "./expansion-panel/expansion-panel-content.js";
 import { SbbExpansionPanelHeaderElement } from "./expansion-panel/expansion-panel-header.js";
 import { SbbFileSelectorElement } from "./file-selector.js";
+import { SbbFlipCardElement } from "./flip-card/flip-card.js";
+import { SbbFlipCardDetailsElement } from "./flip-card/flip-card-details.js";
+import { SbbFlipCardSummaryElement } from "./flip-card/flip-card-summary.js";
 import { SbbFooterElement } from "./footer.js";
 import { SbbFormErrorElement } from "./form-error.js";
 import { SbbFormFieldElement } from "./form-field/form-field.js";
@@ -172,6 +175,9 @@ declare global {
   var SbbExpansionPanelContentElement: SbbExpansionPanelContentElement;
   var SbbExpansionPanelHeaderElement: SbbExpansionPanelHeaderElement;
   var SbbFileSelectorElement: SbbFileSelectorElement;
+  var SbbFlipCardElement: SbbFlipCardElement;
+  var SbbFlipCardDetailsElement: SbbFlipCardDetailsElement;
+  var SbbFlipCardSummaryElement: SbbFlipCardSummaryElement;
   var SbbFooterElement: SbbFooterElement;
   var SbbFormErrorElement: SbbFormErrorElement;
   var SbbFormFieldElement: SbbFormFieldElement;

package/index.js

@@ -49,6 +49,9 @@ import { SbbExpansionPanelElement } from "./expansion-panel/expansion-panel.js";
 import { SbbExpansionPanelContentElement } from "./expansion-panel/expansion-panel-content.js";
 import { SbbExpansionPanelHeaderElement } from "./expansion-panel/expansion-panel-header.js";
 import { SbbFileSelectorElement } from "./file-selector.js";
+import { SbbFlipCardElement } from "./flip-card/flip-card.js";
+import { SbbFlipCardDetailsElement } from "./flip-card/flip-card-details.js";
+import { SbbFlipCardSummaryElement } from "./flip-card/flip-card-summary.js";
 import { SbbFooterElement } from "./footer.js";
 import { SbbFormErrorElement } from "./form-error.js";
 import { SbbFormFieldElement } from "./form-field/form-field.js";
@@ -171,6 +174,9 @@ globalThis.SbbExpansionPanelElement = SbbExpansionPanelElement;
 globalThis.SbbExpansionPanelContentElement = SbbExpansionPanelContentElement;
 globalThis.SbbExpansionPanelHeaderElement = SbbExpansionPanelHeaderElement;
 globalThis.SbbFileSelectorElement = SbbFileSelectorElement;
+globalThis.SbbFlipCardElement = SbbFlipCardElement;
+globalThis.SbbFlipCardDetailsElement = SbbFlipCardDetailsElement;
+globalThis.SbbFlipCardSummaryElement = SbbFlipCardSummaryElement;
 globalThis.SbbFooterElement = SbbFooterElement;
 globalThis.SbbFormErrorElement = SbbFormErrorElement;
 globalThis.SbbFormFieldElement = SbbFormFieldElement;

package/menu/menu/menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/elements/menu/menu/menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAYrE,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAYtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;;AAkB1D;;;;;;;;;;;GAWG;AACH,qBACa,cAAe,SAAQ,mBAGV;IACxB,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAAwC;IAEvF;;;OAGG;IACH,IACW,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,EAIpD;IACD,IAAW,OAAO,IAAI,MAAM,GAAG,WAAW,GAAG,IAAI,CAEhD;IACD,OAAO,CAAC,QAAQ,CAAqC;IAErD;;;OAGG;IACyD,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAE5F,OAAO,CAAC,KAAK,CAAkB;IAC/B,OAAO,CAAC,eAAe,CAA4B;IACnD,OAAO,CAAC,yBAAyB,CAAkB;IACnD,OAAO,CAAC,eAAe,CAAmB;IAC1C,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,aAAa,CAAyB;IAC9C,OAAO,CAAC,cAAc,CAA0B;IAEhD;;OAEG;IACI,IAAI,IAAI,IAAI;IAmBnB;;OAEG;IACI,KAAK,IAAI,IAAI;IAapB;;OAEG;IACH,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,cAAc;YAsBR,eAAe;IAY7B,OAAO,CAAC,2BAA2B;IAWnB,iBAAiB,IAAI,IAAI;IAoBzB,oBAAoB,IAAI,IAAI;IAQ5C,OAAO,CAAC,cAAc;IAmBtB,OAAO,CAAC,UAAU;IAsBlB,OAAO,CAAC,mBAAmB;IAwB3B,OAAO,CAAC,+BAA+B;IAQvC,OAAO,CAAC,oBAAoB,CAE1B;IAGF,OAAO,CAAC,qBAAqB,CAI3B;IAMF,OAAO,CAAC,mBAAmB;IA8B3B,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,gBAAgB;cAyBL,MAAM,IAAI,cAAc;CAqB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/elements/menu/menu/menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAYrE,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAYtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;;AAkB1D;;;;;;;;;;;GAWG;AACH,qBACa,cAAe,SAAQ,mBAGV;IACxB,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAAwC;IAEvF;;;OAGG;IACH,IACW,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,EAIpD;IACD,IAAW,OAAO,IAAI,MAAM,GAAG,WAAW,GAAG,IAAI,CAEhD;IACD,OAAO,CAAC,QAAQ,CAAqC;IAErD;;;OAGG;IACyD,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAE5F,OAAO,CAAC,KAAK,CAAkB;IAC/B,OAAO,CAAC,eAAe,CAA4B;IACnD,OAAO,CAAC,yBAAyB,CAAkB;IACnD,OAAO,CAAC,eAAe,CAAmB;IAC1C,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,aAAa,CAAyB;IAC9C,OAAO,CAAC,cAAc,CAA0B;IAEhD;;OAEG;IACI,IAAI,IAAI,IAAI;IAmBnB;;OAEG;IACI,KAAK,IAAI,IAAI;IAapB;;OAEG;IACH,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,cAAc;YAsBR,eAAe;IAY7B,OAAO,CAAC,2BAA2B;IAWnB,iBAAiB,IAAI,IAAI;IAoBzB,oBAAoB,IAAI,IAAI;IAS5C,OAAO,CAAC,cAAc;IAmBtB,OAAO,CAAC,UAAU;IAsBlB,OAAO,CAAC,mBAAmB;IAwB3B,OAAO,CAAC,+BAA+B;IAQvC,OAAO,CAAC,oBAAoB,CAE1B;IAGF,OAAO,CAAC,qBAAqB,CAI3B;IAMF,OAAO,CAAC,mBAAmB;IA8B3B,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,gBAAgB;cAyBL,MAAM,IAAI,cAAc;CAqB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}

package/menu/menu.js

@@ -23,7 +23,7 @@ const I = 8, K = [
   "SBB-LINK-BUTTON",
   "SBB-BLOCK-LINK-BUTTON"
 ];
-let D = 0, r = class extends N(k) {
+let H = 0, r = class extends N(k) {
   constructor() {
     super(...arguments), this.listChildLocalNames = ["sbb-menu-button", "sbb-menu-link"], this._trigger = null, this._triggerElement = null, this._isPointerDownEventOnMenu = !1, this._abort = new C(this), this._focusHandler = new f(), this._scrollHandler = new L(), this._pointerDownListener = (e) => {
       this._isPointerDownEventOnMenu = h(this._menu, e);
@@ -95,7 +95,7 @@ let D = 0, r = class extends N(k) {
   }
   disconnectedCallback() {
     var e, t;
-    super.disconnectedCallback(), (e = this._menuController) == null || e.abort(), (t = this._windowEventsController) == null || t.abort(), this._focusHandler.disconnect(), u();
+    super.disconnectedCallback(), (e = this._menuController) == null || e.abort(), (t = this._windowEventsController) == null || t.abort(), this._focusHandler.disconnect(), u(), this._scrollHandler.enableScroll();
   }
   _checkListCase(e) {
     var t;
@@ -106,7 +106,7 @@ let D = 0, r = class extends N(k) {
   // Check if the trigger is valid and attach click event listeners.
   _configure(e) {
     var t;
-    S(this._triggerElement), e && (this._triggerElement = O(e), this._triggerElement && (this.id = this.id || `sbb-menu-${D++}`, B(this._triggerElement, "menu", this.id, this.state), (t = this._menuController) == null || t.abort(), this._menuController = new AbortController(), this._triggerElement.addEventListener("click", () => this.open(), {
+    S(this._triggerElement), e && (this._triggerElement = O(e), this._triggerElement && (this.id = this.id || `sbb-menu-${H++}`, B(this._triggerElement, "menu", this.id, this.state), (t = this._menuController) == null || t.abort(), this._menuController = new AbortController(), this._triggerElement.addEventListener("click", () => this.open(), {
       signal: this._menuController.signal
     })));
   }

package/navigation/navigation/navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../../src/elements/navigation/navigation/navigation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAmBtE,OAAO,oCAAoC,CAAC;;AAW5C;;;;;;;;;;;GAWG;AACH,qBAIa,oBAAqB,SAAQ,yBAAgD;IACxF,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACH,IACW,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,EAIpD;IACD,IAAW,OAAO,IAAI,MAAM,GAAG,WAAW,GAAG,IAAI,CAEhD;IACD,OAAO,CAAC,QAAQ,CAAqC;IAErD;;OAEG;IAC0D,uBAAuB,EAChF,MAAM,GACN,SAAS,CAAC;IAEd;;OAEG;IACM,OAAO,CAAC,wBAAwB,CAA4B;IAErE,IAAW,uBAAuB,IAAI,WAAW,GAAG,IAAI,CAEvD;IAED,OAAO,CAAC,WAAW,CAAkB;IACrC,OAAO,CAAC,yBAAyB,CAAe;IAChD,OAAO,CAAC,eAAe,CAA4B;IACnD,OAAO,CAAC,qBAAqB,CAAmB;IAChD,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,aAAa,CAAyB;IAC9C,OAAO,CAAC,cAAc,CAA0B;IAChD,OAAO,CAAC,+BAA+B,CAAkB;IACzD,OAAO,CAAC,sBAAsB,CAA8C;IAC5E,OAAO,CAAC,mBAAmB,CAEzB;IACF,OAAO,CAAC,yBAAyB,CAAgE;IAEjG;;OAEG;IACI,IAAI,IAAI,IAAI;IAkBnB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,mBAAmB;IAO3B;;OAEG;IACI,KAAK,IAAI,IAAI;IAcpB,OAAO,CAAC,2BAA2B;IAYnC,OAAO,CAAC,UAAU;IAqBlB,OAAO,CAAC,gBAAgB,CAEtB;IAIF,OAAO,CAAC,eAAe;IA4BvB,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,oBAAoB,CAS1B;IAGF,OAAO,CAAC,qBAAqB,CAI3B;IAGF,OAAO,CAAC,0BAA0B;IAWlC,OAAO,CAAC,mBAAmB;IAkBX,iBAAiB,IAAI,IAAI;IAgBzB,oBAAoB,IAAI,IAAI;cAUzB,MAAM,IAAI,cAAc;CAqC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,oBAAoB,CAAC;KACxC;CACF"}
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../../src/elements/navigation/navigation/navigation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAmBtE,OAAO,oCAAoC,CAAC;;AAW5C;;;;;;;;;;;GAWG;AACH,qBAIa,oBAAqB,SAAQ,yBAAgD;IACxF,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACH,IACW,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,EAIpD;IACD,IAAW,OAAO,IAAI,MAAM,GAAG,WAAW,GAAG,IAAI,CAEhD;IACD,OAAO,CAAC,QAAQ,CAAqC;IAErD;;OAEG;IAC0D,uBAAuB,EAChF,MAAM,GACN,SAAS,CAAC;IAEd;;OAEG;IACM,OAAO,CAAC,wBAAwB,CAA4B;IAErE,IAAW,uBAAuB,IAAI,WAAW,GAAG,IAAI,CAEvD;IAED,OAAO,CAAC,WAAW,CAAkB;IACrC,OAAO,CAAC,yBAAyB,CAAe;IAChD,OAAO,CAAC,eAAe,CAA4B;IACnD,OAAO,CAAC,qBAAqB,CAAmB;IAChD,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,aAAa,CAAyB;IAC9C,OAAO,CAAC,cAAc,CAA0B;IAChD,OAAO,CAAC,+BAA+B,CAAkB;IACzD,OAAO,CAAC,sBAAsB,CAA8C;IAC5E,OAAO,CAAC,mBAAmB,CAEzB;IACF,OAAO,CAAC,yBAAyB,CAAgE;IAEjG;;OAEG;IACI,IAAI,IAAI,IAAI;IAkBnB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,mBAAmB;IAO3B;;OAEG;IACI,KAAK,IAAI,IAAI;IAcpB,OAAO,CAAC,2BAA2B;IAYnC,OAAO,CAAC,UAAU;IAqBlB,OAAO,CAAC,gBAAgB,CAEtB;IAIF,OAAO,CAAC,eAAe;IA4BvB,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,oBAAoB,CAS1B;IAGF,OAAO,CAAC,qBAAqB,CAI3B;IAGF,OAAO,CAAC,0BAA0B;IAWlC,OAAO,CAAC,mBAAmB;IAkBX,iBAAiB,IAAI,IAAI;IAgBzB,oBAAoB,IAAI,IAAI;cAWzB,MAAM,IAAI,cAAc;CAqC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,oBAAoB,CAAC;KACxC;CACF"}

package/navigation/navigation.js

@@ -12,10 +12,10 @@ import { AgnosticMutationObserver as A, AgnosticResizeObserver as N } from "../c
 import { isEventOnElement as l, removeAriaOverlayTriggerAttributes as z, setAriaOverlayTriggerAttributes as T, applyInertMechanism as d, removeInertMechanism as h } from "../core/overlay.js";
 import "../button/transparent-button.js";
 const L = p`*,:before,:after{box-sizing:border-box}:host{--sbb-navigation-grid-column: 1 / 5;--sbb-navigation-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-3x) );--sbb-navigation-animation-easing: ease-in;--sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive);--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-l);--sbb-navigation-padding-block-end: var(--sbb-spacing-responsive-xl);--sbb-navigation-backdrop-visibility: hidden;--sbb-navigation-backdrop-pointer-events: none;--sbb-navigation-backdrop-color: transparent;--sbb-navigation-list-margin-block-start: var(--sbb-spacing-responsive-xxl);--sbb-navigation-inline-start: 0;--sbb-navigation-expanded-width: 100%;--sbb-navigation-inset: 0 auto auto 0;--sbb-navigation-transform: translateX(-100%);--sbb-navigation-content-transform: translateX(0);--sbb-navigation-width: 100%;--sbb-navigation-height: 100vh;display:block;position:fixed;inset:var(--sbb-navigation-inset);z-index:var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index));overflow:hidden;--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}@supports (height: 100dvh){:host{--sbb-navigation-height: 100dvh}}@media (min-width: 52.5rem){:host{--sbb-navigation-grid-column: 1 / 9}}@media (min-width: 64rem){:host{--sbb-navigation-grid-column: 1 / 5;--sbb-navigation-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xl);--sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive) 0;--sbb-navigation-list-margin-block-start: var(--sbb-spacing-fixed-1x);--sbb-navigation-inline-start: calc(var(--sbb-layout-base-offset-responsive) * -1);--sbb-navigation-width: calc(100% + var(--sbb-layout-base-offset-responsive))}}@media (min-width: 90rem){:host{--sbb-navigation-grid-column: 1 / 6;--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xxl)}}:host([data-state=opened]){--sbb-navigation-animation-easing: ease-out}:host(:is([data-state=opened],[data-state=opening])){--sbb-navigation-backdrop-visibility: visible;--sbb-navigation-backdrop-pointer-events: all;--sbb-navigation-backdrop-color: var(--sbb-color-black-alpha-70)}:host(:not([data-state=closed])){--sbb-navigation-inset: 0;--sbb-navigation-transform: translateX(0)}:host([data-has-navigation-section]){--sbb-navigation-content-transform: translateX(-100%)}@media (min-width: 64rem){:host([data-has-navigation-section]){--sbb-navigation-expanded-width: 100vw;--sbb-navigation-content-transform: translateX(0%)}@supports (height: 100dvw){:host([data-has-navigation-section]){--sbb-navigation-expanded-width: 100dvw}}}:host([data-resize-disable-animation]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}.sbb-navigation__container{display:grid;gap:var(--sbb-grid-base-gutter-responsive);grid-template-columns:repeat(var(--sbb-grid-base-columns),1fr);padding-inline:0;pointer-events:none;transform:var(--sbb-navigation-transform)}@media (min-width: 64rem){.sbb-navigation__container{padding-inline:var(--sbb-layout-base-offset-responsive)}.sbb-navigation__container:before{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:background-color,visibility;content:"";visibility:var(--sbb-navigation-backdrop-visibility);pointer-events:var(--sbb-navigation-backdrop-pointer-events);position:fixed;inset:var(--sbb-navigation-inset);background-color:var(--sbb-navigation-backdrop-color)}}.sbb-navigation{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;display:none;width:var(--sbb-navigation-width);grid-column:var(--sbb-navigation-grid-column);padding:0;margin:0;position:relative;inset-inline-start:var(--sbb-navigation-inline-start);inset-block-start:0;border:none;pointer-events:none;height:var(--sbb-navigation-height);color:var(--sbb-color-white);background-color:var(--sbb-color-midnight)}.sbb-navigation:before{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;content:"";position:absolute;width:var(--sbb-navigation-expanded-width);height:var(--sbb-navigation-height);background:var(--sbb-color-midnight)}:host([data-state]:not([data-state=closed])) .sbb-navigation{display:block;pointer-events:all;animation-name:open;animation-duration:var(--sbb-navigation-animation-duration);animation-timing-function:var(--sbb-navigation-animation-easing)}:host([data-state][data-state=closing]) .sbb-navigation{pointer-events:none;animation-name:close}@media (forced-colors: active){.sbb-navigation{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-navigation__wrapper{outline:none}.sbb-navigation__header{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;display:flex;justify-content:flex-end;position:absolute;width:var(--sbb-navigation-expanded-width);pointer-events:none;padding:var(--sbb-spacing-responsive-xs);z-index:calc(var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index)) + 1)}.sbb-navigation__close{pointer-events:all}.sbb-navigation__content{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:transform;--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);display:flex;flex-direction:column;gap:var(--sbb-spacing-responsive-xxl);position:relative;height:var(--sbb-navigation-height);padding-inline:var(--sbb-navigation-padding-inline);padding-block:var(--sbb-navigation-padding-block-start) var(--sbb-navigation-padding-block-end);overflow-y:auto;transform:var(--sbb-navigation-content-transform)}.sbb-navigation__content::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation__content::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation__content::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-navigation__content::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-navigation__content::-webkit-scrollbar-button,.sbb-navigation__content::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-navigation__content{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}::slotted(:first-child){margin-block-start:var(--sbb-navigation-list-margin-block-start)}@keyframes open{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes close{0%{transform:translate(0)}to{transform:translate(-100%)}}`;
-var B = Object.defineProperty, H = Object.getOwnPropertyDescriptor, s = (t, i, n, a) => {
-  for (var e = a > 1 ? void 0 : a ? H(i, n) : i, r = t.length - 1, b; r >= 0; r--)
+var H = Object.defineProperty, B = Object.getOwnPropertyDescriptor, s = (t, i, n, a) => {
+  for (var e = a > 1 ? void 0 : a ? B(i, n) : i, r = t.length - 1, b; r >= 0; r--)
     (b = t[r]) && (e = (a ? b(i, n, e) : b(e)) || e);
-  return a && e && B(i, n, e), e;
+  return a && e && H(i, n, e), e;
 };
 const I = {
   subtree: !0,
@@ -150,7 +150,7 @@ let o = class extends S(w) {
   }
   disconnectedCallback() {
     var t, i;
-    super.disconnectedCallback(), (t = this._navigationController) == null || t.abort(), (i = this._windowEventsController) == null || i.abort(), this._focusHandler.disconnect(), this._navigationObserver.disconnect(), this._navigationResizeObserver.disconnect(), h();
+    super.disconnectedCallback(), (t = this._navigationController) == null || t.abort(), (i = this._windowEventsController) == null || i.abort(), this._focusHandler.disconnect(), this._navigationObserver.disconnect(), this._navigationResizeObserver.disconnect(), h(), this._scrollHandler.enableScroll();
   }
   render() {
     const t = v`

package/notification/notification.d.ts

@@ -6,10 +6,10 @@ import { SbbTitleLevel } from '../title.js';
  *
  * @slot - Use the unnamed slot to add content to the notification message.
  * @slot title - Use this to provide a notification title (optional).
- * @event {CustomEvent<void>} willOpen - Emits whenever the `sbb-notification` starts the opening transition.
- * @event {CustomEvent<void>} didOpen - Emits whenever the `sbb-notification` is opened.
- * @event {CustomEvent<void>} willClose - Emits whenever the `sbb-notification` begins the closing transition.
- * @event {CustomEvent<void>} didClose - Emits whenever the `sbb-notification` is closed.
+ * @event {CustomEvent<void>} willOpen - Emits when the opening animation starts.
+ * @event {CustomEvent<void>} didOpen - Emits when the opening animation ends.
+ * @event {CustomEvent<void>} willClose - Emits when the closing animation starts.
+ * @event {CustomEvent<void>} didClose - Emits when the closing animation ends.
  * @cssprop [--sbb-notification-margin=0] - Can be used to modify the margin in order to get a smoother animation.
  * See style section for more information.
  */

package/overlay/overlay-base-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay-base-element.d.ts","sourceRoot":"","sources":["../../../src/elements/overlay/overlay-base-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAe,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,uBAAuB,CAAC;AAGzE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAG3E,eAAO,MAAM,WAAW,EAAE,qBAAqB,EAAO,CAAC;;AAEvD,8BAAsB,qBAAsB,SAAQ,0BAAyC;IAC3F,kHAAkH;IAC3D,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;IAE9F,8CAA8C;IAC9C,UAAmB,QAAQ,EAAE,YAAY,CAAC,2BAA2B,CAAC,CAGpE;IAGF,SAAS,CAAC,kBAAkB,CAAC,EAAE,WAAW,CAAC;IAC3C,SAAS,CAAC,mBAAmB,CAAC,EAAE,WAAW,CAAC;IAC5C,SAAS,CAAC,iBAAiB,EAAG,eAAe,CAAC;IAC9C,SAAS,CAAC,qBAAqB,EAAG,eAAe,CAAC;IAClD,SAAS,CAAC,YAAY,kBAAyB;IAC/C,SAAS,CAAC,aAAa,mBAA0B;IACjD,SAAS,CAAC,WAAW,EAAE,GAAG,CAAC;IAC3B,SAAS,CAAC,iBAAiB,UAAS;IACpC,SAAS,CAAC,WAAW,EAAG,0BAA0B,CAAC;IACnD,SAAS,CAAC,QAAQ,wBAAmC;IAErD,SAAS,CAAC,QAAQ,CAAC,qBAAqB,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;IACrE,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,IAAI;IAC1C,SAAS,CAAC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAE1C,4BAA4B;IACrB,KAAK,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,WAAW,GAAG,GAAG;IAmBrC,iBAAiB,IAAI,IAAI;cAUtB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9D,oBAAoB,IAAI,IAAI;IAS5C,SAAS,CAAC,uBAAuB,IAAI,IAAI;IAkBzC,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAWpD,SAAS,CAAC,kCAAkC,IAAI,IAAI;IAKpD,SAAS,CAAC,2BAA2B,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAoBzD,SAAS,CAAC,wBAAwB,IAAI,IAAI;IAI1C,SAAS,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI;CAStD"}
+{"version":3,"file":"overlay-base-element.d.ts","sourceRoot":"","sources":["../../../src/elements/overlay/overlay-base-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAe,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,uBAAuB,CAAC;AAGzE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAG3E,eAAO,MAAM,WAAW,EAAE,qBAAqB,EAAO,CAAC;;AAEvD,8BAAsB,qBAAsB,SAAQ,0BAAyC;IAC3F,kHAAkH;IAC3D,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;IAE9F,8CAA8C;IAC9C,UAAmB,QAAQ,EAAE,YAAY,CAAC,2BAA2B,CAAC,CAGpE;IAGF,SAAS,CAAC,kBAAkB,CAAC,EAAE,WAAW,CAAC;IAC3C,SAAS,CAAC,mBAAmB,CAAC,EAAE,WAAW,CAAC;IAC5C,SAAS,CAAC,iBAAiB,EAAG,eAAe,CAAC;IAC9C,SAAS,CAAC,qBAAqB,EAAG,eAAe,CAAC;IAClD,SAAS,CAAC,YAAY,kBAAyB;IAC/C,SAAS,CAAC,aAAa,mBAA0B;IACjD,SAAS,CAAC,WAAW,EAAE,GAAG,CAAC;IAC3B,SAAS,CAAC,iBAAiB,UAAS;IACpC,SAAS,CAAC,WAAW,EAAG,0BAA0B,CAAC;IACnD,SAAS,CAAC,QAAQ,wBAAmC;IAErD,SAAS,CAAC,QAAQ,CAAC,qBAAqB,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;IACrE,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,IAAI;IAC1C,SAAS,CAAC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAE1C,4BAA4B;IACrB,KAAK,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,WAAW,GAAG,GAAG;IAmBrC,iBAAiB,IAAI,IAAI;cAUtB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9D,oBAAoB,IAAI,IAAI;IAU5C,SAAS,CAAC,uBAAuB,IAAI,IAAI;IAkBzC,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAWpD,SAAS,CAAC,kCAAkC,IAAI,IAAI;IAKpD,SAAS,CAAC,2BAA2B,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAoBzD,SAAS,CAAC,wBAAwB,IAAI,IAAI;IAI1C,SAAS,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI;CAStD"}