@sbb-esta/lyne-elements 1.3.0 → 1.5.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/form-field/form-field-clear/form-field-clear.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-field-clear.d.ts","sourceRoot":"","sources":["../../../../src/elements/form-field/form-field-clear/form-field-clear.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AASnE,OAAO,eAAe,CAAC;;AAEvB;;GAEG;AACH,qBAIa,wBAAyB,SAAQ,6BAAsC;IAClF,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,UAAU,CAAC,CAA6B;IAChD,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,SAAS,CAAmC;IAEpC,iBAAiB,IAAI,IAAI;YAW3B,YAAY;cAWP,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAKzD,cAAc,IAAI,cAAc;CAGpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,sBAAsB,EAAE,wBAAwB,CAAC;KAClD;CACF"}
+{"version":3,"file":"form-field-clear.d.ts","sourceRoot":"","sources":["../../../../src/elements/form-field/form-field-clear/form-field-clear.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AASnE,OAAO,eAAe,CAAC;;AAEvB;;GAEG;AACH,qBAIa,wBAAyB,SAAQ,6BAAsC;IAClF,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,UAAU,CAAC,CAA6B;IAChD,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,SAAS,CAAmC;IAEpC,iBAAiB,IAAI,IAAI;YAW3B,YAAY;cAWP,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAMzD,cAAc,IAAI,cAAc;CAGpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,sBAAsB,EAAE,wBAAwB,CAAC;KAClD;CACF"}

package/form-field/form-field-clear.js

@@ -1,4 +1,4 @@
-import { css as i, html as l } from "lit";
+import { css as n, html as l } from "lit";
 import { customElement as d } from "lit/decorators.js";
 import { SbbButtonBaseElement as c } from "../core/base-elements.js";
 import { SbbConnectedAbortController as u, SbbLanguageController as v } from "../core/controllers.js";
@@ -6,13 +6,13 @@ import { hostAttributes as f } from "../core/decorators.js";
 import { i18nClearInput as m } from "../core/i18n.js";
 import { SbbNegativeMixin as h } from "../core/mixins.js";
 import "../icon.js";
-const p = i`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important}:host{display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-text: var(--sbb-color-charcoal);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-disabled-style: dashed;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing)}@media (forced-colors: active){:host{--sbb-button-color-text: ButtonText !important;--sbb-button-color-hover-background: Highlight !important;--sbb-button-color-active-background: Highlight !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-border: GrayText !important;--sbb-button-color-disabled-text: GrayText !important}}:host .sbb-form-field-clear{position:relative;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;border-radius:var(--sbb-button-border-radius);color:var(--sbb-button-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}:host .sbb-form-field-clear:before{position:absolute;content:"";top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color}sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem));display:flex}:host([negative]){--sbb-button-color-text: var(--sbb-color-milk);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-disabled-background: var(--sbb-color-black-alpha-0);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-smoke)}:host(:is([disabled],[data-disabled])) .sbb-form-field-clear{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host(:is([disabled],[data-disabled])) .sbb-form-field-clear:before{background-color:var(--sbb-button-color-disabled-background);border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--sbb-button-color-disabled-border)}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-form-field-clear:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}@media (any-hover: hover){:host(:not([disabled],[data-disabled],:active,[data-active]):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (any-hover: hover){:host(:not([disabled],[data-disabled],:active,[data-active]):hover) .sbb-form-field-clear:before{background-color:var(--sbb-button-color-hover-background)}}:host(:not([disabled],[data-disabled]):is(:active,[data-active])) .sbb-form-field-clear:before{background-color:var(--sbb-button-color-active-background)}`;
-var g = Object.defineProperty, k = Object.getOwnPropertyDescriptor, x = (o, t, b, e) => {
-  for (var r = e > 1 ? void 0 : e ? k(t, b) : t, a = o.length - 1, n; a >= 0; a--)
-    (n = o[a]) && (r = (e ? n(t, b, r) : n(r)) || r);
-  return e && r && g(t, b, r), r;
+const p = n`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important}:host{display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-text: var(--sbb-color-charcoal);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-disabled-style: dashed;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing)}@media (forced-colors: active){:host{--sbb-button-color-text: ButtonText !important;--sbb-button-color-hover-background: Highlight !important;--sbb-button-color-active-background: Highlight !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-border: GrayText !important;--sbb-button-color-disabled-text: GrayText !important}}:host .sbb-form-field-clear{position:relative;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;border-radius:var(--sbb-button-border-radius);color:var(--sbb-button-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}:host .sbb-form-field-clear:before{position:absolute;content:"";top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color}sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem));display:flex}:host([negative]){--sbb-button-color-text: var(--sbb-color-milk);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-disabled-background: var(--sbb-color-black-alpha-0);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-smoke)}:host(:is([disabled],[data-disabled],[data-group-disabled])) .sbb-form-field-clear{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host(:is([disabled],[data-disabled],[data-group-disabled])) .sbb-form-field-clear:before{background-color:var(--sbb-button-color-disabled-background);border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--sbb-button-color-disabled-border)}:host(:is([data-focus-visible],:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch]))) .sbb-form-field-clear:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}@media (any-hover: hover){:host(:not([disabled],[data-disabled],[data-group-disabled],:active,[data-active]):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (any-hover: hover){:host(:not([disabled],[data-disabled],[data-group-disabled],:active,[data-active]):hover) .sbb-form-field-clear:before{background-color:var(--sbb-button-color-hover-background)}}:host(:not([disabled],[data-disabled],[data-group-disabled]):is(:active,[data-active])) .sbb-form-field-clear:before{background-color:var(--sbb-button-color-active-background)}`;
+var g = Object.defineProperty, k = Object.getOwnPropertyDescriptor, x = (o, t, b, a) => {
+  for (var r = a > 1 ? void 0 : a ? k(t, b) : t, e = o.length - 1, s; e >= 0; e--)
+    (s = o[e]) && (r = (a ? s(t, b, r) : s(r)) || r);
+  return a && r && g(t, b, r), r;
 };
-let s = class extends h(c) {
+let i = class extends h(c) {
   constructor() {
     super(...arguments), this._abort = new u(this), this._language = new v(this);
   }
@@ -33,13 +33,13 @@ let s = class extends h(c) {
     return l` <sbb-icon name="cross-small"></sbb-icon> `;
   }
 };
-s.styles = p;
-s = x([
+i.styles = p;
+i = x([
   d("sbb-form-field-clear"),
   f({
     slot: "suffix"
   })
-], s);
+], i);
 export {
-  s as SbbFormFieldClearElement
+  i as SbbFormFieldClearElement
 };

package/form-field/form-field.js

@@ -15,7 +15,7 @@ var C = Object.defineProperty, S = Object.getOwnPropertyDescriptor, i = (e, t, r
   return l && s && C(t, r, s), s;
 };
 let p = 0, N = 0;
-const h = ["sbb-autocomplete", "sbb-select"];
+const h = ["sbb-autocomplete", "sbb-autocomplete-grid", "sbb-select"];
 let o = class extends E(I(m)) {
   constructor() {
     super(...arguments), this._supportedNativeInputElements = ["input", "select", "textarea"], this._supportedInputElements = [
@@ -193,7 +193,7 @@ let o = class extends E(I(m)) {
     var e;
     (e = this.querySelectorAll) == null || e.call(
       this,
-      "sbb-form-error,sbb-mini-button,sbb-popover-trigger,sbb-form-field-clear,sbb-datepicker-next-day,sbb-datepicker-previous-day,sbb-datepicker-toggle,sbb-select,sbb-autocomplete"
+      "sbb-form-error,sbb-mini-button,sbb-popover-trigger,sbb-form-field-clear,sbb-datepicker-next-day,sbb-datepicker-previous-day,sbb-datepicker-toggle,sbb-select,sbb-autocomplete,sbb-autocomplete-grid"
     ).forEach((t) => t.toggleAttribute("negative", this.negative));
   }
   render() {

package/icon/icon-base.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-base.d.ts","sourceRoot":"","sources":["../../../src/elements/icon/icon-base.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAYvC;;;GAGG;AACH,8BAIsB,WAAY,SAAQ,UAAU;IAClD,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,iBAAiB,CAAa;IAE7C,OAAO,CAAC,aAAa,CAAiC;IAE/D;;OAEG;IACM,OAAO,CAAC,QAAQ,CAAC,CAAuD;IAEjF;;;;;OAKG;IAC2D,UAAU,UAAS;cAEjE,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;cAkB5C,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAI9E,OAAO,CAAC,cAAc;cAgBH,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAK3D,MAAM,IAAI,cAAc;CAS5C"}
+{"version":3,"file":"icon-base.d.ts","sourceRoot":"","sources":["../../../src/elements/icon/icon-base.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAYvC;;;GAGG;AACH,8BAIsB,WAAY,SAAQ,UAAU;IAClD,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,iBAAiB,CAAa;IAE7C,OAAO,CAAC,aAAa,CAAiC;IAE/D;;OAEG;IACM,OAAO,CAAC,QAAQ,CAAC,CAAuD;IAEjF;;;;;OAKG;IAC2D,UAAU,UAAS;cAEjE,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;cAkB5C,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAI9E,OAAO,CAAC,cAAc;cAgBH,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAM3D,MAAM,IAAI,cAAc;CAS5C"}

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;CAM/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,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"}

package/image/image.d.ts

@@ -28,6 +28,7 @@ export interface InterfaceImageAttributesSizesConfigMediaQuery {
  * ratio of 4/3 in smaller viewports and 16/9 in larger viewports.
  * @cssprop [--sbb-image-border-radius=var(--sbb-border-radius-4x)] - Can be used to override the
  * `borderRadius` property in case of different values for different viewports.
+ * @cssprop [--sbb-image-object-position] - Can be used to set the object-position css property of the image itself if the image itself is cropped.
  */
 export declare class SbbImageElement extends LitElement {
     static styles: CSSResultGroup;

package/image/image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/elements/image/image.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/elements/image/image.ts"],"names":[],"mappings":"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"}

package/image.js

@@ -1,14 +1,14 @@
-import { css as y, LitElement as _, html as d, nothing as l } from "lit";
+import { css as y, LitElement as _, html as d, nothing as m } from "lit";
 import { property as s, eventOptions as k, customElement as v } from "lit/decorators.js";
 import { ref as $ } from "lit/directives/ref.js";
 import { hostContext as x } from "./core/dom.js";
-const w = 0, S = 359, P = 360, M = 599, z = 600, C = 839, B = 840, L = 1023, O = 1024, Q = 1279, F = 1280, D = 1439, E = 1440, T = 2579, I = 16, R = y`*,:before,:after{box-sizing:border-box}:host{--sbb-image-border-radius: var(--sbb-border-radius-4x);--sbb-image-aspect-ratio: auto;--sbb-image-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );display:block}:host([aspect-ratio="1-1"]){--sbb-image-aspect-ratio: 1 / 1}:host([aspect-ratio="1-2"]){--sbb-image-aspect-ratio: 1 / 2}:host([aspect-ratio="2-1"]){--sbb-image-aspect-ratio: 2 / 1}:host([aspect-ratio="2-3"]){--sbb-image-aspect-ratio: 2 / 3}:host([aspect-ratio="3-2"]){--sbb-image-aspect-ratio: 3 / 2}:host([aspect-ratio="3-4"]){--sbb-image-aspect-ratio: 3 / 4}:host([aspect-ratio="4-3"]){--sbb-image-aspect-ratio: 4 / 3}:host([aspect-ratio="4-5"]){--sbb-image-aspect-ratio: 4 / 5}:host([aspect-ratio="5-4"]){--sbb-image-aspect-ratio: 5 / 4}:host([aspect-ratio="16-9"]){--sbb-image-aspect-ratio: 16 / 9}:host([aspect-ratio="9-16"]){--sbb-image-aspect-ratio: 9 / 16}:host([data-teaser]){--sbb-image-aspect-ratio: 1 / 1}@media (min-width: 37.5rem){:host([data-teaser]){--sbb-image-aspect-ratio: 16 / 9}}:host(:is([border-radius=none],[data-teaser])){--sbb-image-border-radius: 0}:host([border-radius=round]:not([data-teaser])){--sbb-image-border-radius: var(--sbb-border-radius-infinity)}.sbb-image__figure{margin:0}.sbb-image__img{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.000001}:host([data-loaded]) .sbb-image__img{opacity:.999999}:host([data-loaded]) .sbb-image__blurred{opacity:0}:is(.sbb-image__img,.sbb-image__blurred){width:100%;height:100%;object-fit:cover;transition:opacity var(--sbb-image-animation-duration) var(--sbb-animation-easing)}.sbb-image__wrapper{position:relative;overflow:hidden;max-width:100%;border-radius:var(--sbb-image-border-radius);aspect-ratio:var(--sbb-image-aspect-ratio)}.sbb-image__caption{--sbb-text-font-size: var(--sbb-font-size-text-xs);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);margin-block-start:var(--sbb-spacing-fixed-4x)}`;
-var h = Object.freeze, u = Object.defineProperty, A = Object.getOwnPropertyDescriptor, o = (e, t, r, i) => {
-  for (var n = i > 1 ? void 0 : i ? A(t, r) : t, p = e.length - 1, b; p >= 0; p--)
+const w = 0, S = 359, P = 360, M = 599, z = 600, C = 839, B = 840, L = 1023, O = 1024, Q = 1279, F = 1280, D = 1439, E = 1440, T = 2579, I = 16, R = y`*,:before,:after{box-sizing:border-box}:host{--sbb-image-border-radius: var(--sbb-border-radius-4x);--sbb-image-aspect-ratio: auto;--sbb-image-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );display:block}:host([aspect-ratio="1-1"]){--sbb-image-aspect-ratio: 1 / 1}:host([aspect-ratio="1-2"]){--sbb-image-aspect-ratio: 1 / 2}:host([aspect-ratio="2-1"]){--sbb-image-aspect-ratio: 2 / 1}:host([aspect-ratio="2-3"]){--sbb-image-aspect-ratio: 2 / 3}:host([aspect-ratio="3-2"]){--sbb-image-aspect-ratio: 3 / 2}:host([aspect-ratio="3-4"]){--sbb-image-aspect-ratio: 3 / 4}:host([aspect-ratio="4-3"]){--sbb-image-aspect-ratio: 4 / 3}:host([aspect-ratio="4-5"]){--sbb-image-aspect-ratio: 4 / 5}:host([aspect-ratio="5-4"]){--sbb-image-aspect-ratio: 5 / 4}:host([aspect-ratio="16-9"]){--sbb-image-aspect-ratio: 16 / 9}:host([aspect-ratio="9-16"]){--sbb-image-aspect-ratio: 9 / 16}:host([data-teaser]){--sbb-image-aspect-ratio: 1 / 1}@media (min-width: 37.5rem){:host([data-teaser]){--sbb-image-aspect-ratio: 16 / 9}}:host(:is([border-radius=none],[data-teaser])){--sbb-image-border-radius: 0}:host([border-radius=round]:not([data-teaser])){--sbb-image-border-radius: var(--sbb-border-radius-infinity)}.sbb-image__figure{display:flex;flex-direction:column;gap:var(--sbb-spacing-fixed-4x);margin:0;height:100%}.sbb-image__img{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.000001}:host([data-loaded]) .sbb-image__img{opacity:.999999}:host([data-loaded]) .sbb-image__blurred{opacity:0}:is(.sbb-image__img,.sbb-image__blurred){width:100%;height:100%;object-fit:cover;object-position:var(--sbb-image-object-position);transition:opacity var(--sbb-image-animation-duration) var(--sbb-animation-easing)}.sbb-image__wrapper{display:flex;position:relative;overflow:hidden;width:100%;height:100%;aspect-ratio:var(--sbb-image-aspect-ratio);border-radius:var(--sbb-image-border-radius)}.sbb-image__caption{--sbb-text-font-size: var(--sbb-font-size-text-xs);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)}`;
+var h = Object.freeze, u = Object.defineProperty, j = Object.getOwnPropertyDescriptor, o = (e, t, r, i) => {
+  for (var n = i > 1 ? void 0 : i ? j(t, r) : t, p = e.length - 1, b; p >= 0; p--)
     (b = e[p]) && (n = (i ? b(t, r, n) : b(n)) || n);
   return i && n && u(t, r, n), n;
-}, U = (e, t) => h(u(e, "raw", { value: h(e.slice()) })), g;
-const H = (e) => {
+}, A = (e, t) => h(u(e, "raw", { value: h(e.slice()) })), g;
+const U = (e) => {
   if (!e || e.length === 0)
     return [];
   let t;
@@ -25,13 +25,13 @@ const H = (e) => {
   const n = ["image", "mediaQueries"];
   return t.breakpoints.forEach((p) => {
     const b = Object.keys(p);
-    b.forEach((m) => {
-      n.includes(m) || (r = !0);
-    }), n.forEach((m) => {
-      b.includes(m) || (i = !0);
+    b.forEach((l) => {
+      n.includes(l) || (r = !0);
+    }), n.forEach((l) => {
+      b.includes(l) || (i = !0);
     });
   }), r || i ? [] : t.breakpoints;
-}, j = {
+}, H = {
   once: !0,
   passive: !0
 }, c = (e) => e / I, V = {
@@ -146,7 +146,7 @@ let a = class extends _ {
             ]
           }
         ]
-      }`, H(e);
+      }`, U(e);
   }
   _createMediaQueryString(e) {
     let t = "";
@@ -177,25 +177,25 @@ let a = class extends _ {
     return d`
       <figure class="sbb-image__figure">
         <div class="sbb-image__wrapper">
-          ${this.skipLqip ? l : d`<img
+          ${this.skipLqip ? m : d`<img
                 alt=""
                 class="sbb-image__blurred"
                 src=${r}
                 width="1000"
                 height="562"
-                loading=${this.loading ?? l}
-                decoding=${this.decoding ?? l}
+                loading=${this.loading ?? m}
+                decoding=${this.decoding ?? m}
               />`}
 
           <picture>
             <!-- render picture element sources -->
             ${n.map((p) => {
-      const b = p.image.height, m = p.image.width, f = this._createMediaQueryString(p.mediaQueries);
+      const b = p.image.height, l = p.image.width, f = this._createMediaQueryString(p.mediaQueries);
       return [
         d` <source
                   media=${`${f}`}
-                  sizes=${`${m}px`}
-                  srcset=${`${i}&w=${m}&h=${b}&q=${this._config.nonRetinaQuality} ${m}w, ${i}&w=${m * 2}&h=${b * 2}&q=${this._config.retinaQuality} ${m * 2}w`}
+                  sizes=${`${l}px`}
+                  srcset=${`${i}&w=${l}&h=${b}&q=${this._config.nonRetinaQuality} ${l}w, ${i}&w=${l * 2}&h=${b * 2}&q=${this._config.retinaQuality} ${l * 2}w`}
                 ></source>`
       ];
     })}
@@ -207,9 +207,9 @@ let a = class extends _ {
               src=${this.imageSrc}
               width="1000"
               height="562"
-              loading=${this.loading ?? l}
-              decoding=${this.decoding ?? l}
-              .fetchPriority=${this.importance ?? l}
+              loading=${this.loading ?? m}
+              decoding=${this.decoding ?? m}
+              .fetchPriority=${this.importance ?? m}
             />
           </picture>
         </div>
@@ -219,8 +219,8 @@ let a = class extends _ {
               ${$((p) => {
       this._captionElement = p;
     })}
-            ></figcaption>` : l}
-        ${t ? d(g || (g = U(['<script type="application/ld+json" .innerHTML=', "><\/script>"])), t) : l}
+            ></figcaption>` : m}
+        ${t ? d(g || (g = A(['<script type="application/ld+json" .innerHTML=', "><\/script>"])), t) : m}
       </figure>
     `;
   }
@@ -282,7 +282,7 @@ o([
   s({ attribute: "aspect-ratio", reflect: !0 })
 ], a.prototype, "aspectRatio", 2);
 o([
-  k(j)
+  k(H)
 ], a.prototype, "_imageLoaded", 1);
 a = o([
   v("sbb-image")

package/index.d.ts

@@ -3,6 +3,12 @@ import { SbbActionGroupElement } from "./action-group.js";
 import { SbbAlertElement } from "./alert/alert.js";
 import { SbbAlertGroupElement } from "./alert/alert-group.js";
 import { SbbAutocompleteElement } from "./autocomplete.js";
+import { SbbAutocompleteGridElement } from "./autocomplete-grid/autocomplete-grid.js";
+import { SbbAutocompleteGridButtonElement } from "./autocomplete-grid/autocomplete-grid-button.js";
+import { SbbAutocompleteGridCellElement } from "./autocomplete-grid/autocomplete-grid-cell.js";
+import { SbbAutocompleteGridOptgroupElement } from "./autocomplete-grid/autocomplete-grid-optgroup.js";
+import { SbbAutocompleteGridOptionElement } from "./autocomplete-grid/autocomplete-grid-option.js";
+import { SbbAutocompleteGridRowElement } from "./autocomplete-grid/autocomplete-grid-row.js";
 import { SbbBreadcrumbElement } from "./breadcrumb/breadcrumb.js";
 import { SbbBreadcrumbGroupElement } from "./breadcrumb/breadcrumb-group.js";
 import { SbbButtonElement } from "./button/button.js";
@@ -43,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";
@@ -120,6 +129,12 @@ declare global {
   var SbbAlertElement: SbbAlertElement;
   var SbbAlertGroupElement: SbbAlertGroupElement;
   var SbbAutocompleteElement: SbbAutocompleteElement;
+  var SbbAutocompleteGridElement: SbbAutocompleteGridElement;
+  var SbbAutocompleteGridButtonElement: SbbAutocompleteGridButtonElement;
+  var SbbAutocompleteGridCellElement: SbbAutocompleteGridCellElement;
+  var SbbAutocompleteGridOptgroupElement: SbbAutocompleteGridOptgroupElement;
+  var SbbAutocompleteGridOptionElement: SbbAutocompleteGridOptionElement;
+  var SbbAutocompleteGridRowElement: SbbAutocompleteGridRowElement;
   var SbbBreadcrumbElement: SbbBreadcrumbElement;
   var SbbBreadcrumbGroupElement: SbbBreadcrumbGroupElement;
   var SbbButtonElement: SbbButtonElement;
@@ -160,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

@@ -3,6 +3,12 @@ import { SbbActionGroupElement } from "./action-group.js";
 import { SbbAlertElement } from "./alert/alert.js";
 import { SbbAlertGroupElement } from "./alert/alert-group.js";
 import { SbbAutocompleteElement } from "./autocomplete.js";
+import { SbbAutocompleteGridElement } from "./autocomplete-grid/autocomplete-grid.js";
+import { SbbAutocompleteGridButtonElement } from "./autocomplete-grid/autocomplete-grid-button.js";
+import { SbbAutocompleteGridCellElement } from "./autocomplete-grid/autocomplete-grid-cell.js";
+import { SbbAutocompleteGridOptgroupElement } from "./autocomplete-grid/autocomplete-grid-optgroup.js";
+import { SbbAutocompleteGridOptionElement } from "./autocomplete-grid/autocomplete-grid-option.js";
+import { SbbAutocompleteGridRowElement } from "./autocomplete-grid/autocomplete-grid-row.js";
 import { SbbBreadcrumbElement } from "./breadcrumb/breadcrumb.js";
 import { SbbBreadcrumbGroupElement } from "./breadcrumb/breadcrumb-group.js";
 import { SbbButtonElement } from "./button/button.js";
@@ -43,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";
@@ -119,6 +128,12 @@ globalThis.SbbActionGroupElement = SbbActionGroupElement;
 globalThis.SbbAlertElement = SbbAlertElement;
 globalThis.SbbAlertGroupElement = SbbAlertGroupElement;
 globalThis.SbbAutocompleteElement = SbbAutocompleteElement;
+globalThis.SbbAutocompleteGridElement = SbbAutocompleteGridElement;
+globalThis.SbbAutocompleteGridButtonElement = SbbAutocompleteGridButtonElement;
+globalThis.SbbAutocompleteGridCellElement = SbbAutocompleteGridCellElement;
+globalThis.SbbAutocompleteGridOptgroupElement = SbbAutocompleteGridOptgroupElement;
+globalThis.SbbAutocompleteGridOptionElement = SbbAutocompleteGridOptionElement;
+globalThis.SbbAutocompleteGridRowElement = SbbAutocompleteGridRowElement;
 globalThis.SbbBreadcrumbElement = SbbBreadcrumbElement;
 globalThis.SbbBreadcrumbGroupElement = SbbBreadcrumbGroupElement;
 globalThis.SbbButtonElement = SbbButtonElement;
@@ -159,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/map-container.js

@@ -1,11 +1,11 @@
 import { css as m, LitElement as p, html as n, nothing as l } from "lit";
 import { property as h, state as u, customElement as v } from "lit/decorators.js";
 import { ref as d } from "lit/directives/ref.js";
-import { SbbLanguageController as g } from "./core/controllers.js";
-import { i18nMapContainerButtonLabel as _ } from "./core/i18n.js";
+import { SbbLanguageController as _ } from "./core/controllers.js";
+import { i18nMapContainerButtonLabel as g } from "./core/i18n.js";
 import { AgnosticIntersectionObserver as w } from "./core/observers.js";
 import "./button/tertiary-button.js";
-const f = m`*,:before,:after{box-sizing:border-box}:host{--sbb-map-container-map-height-zero: 18.4375rem;--sbb-map-container-map-height-small: 20rem;--sbb-map-container-sidebar-width: 25rem;--sbb-map-container-sidebar-background-color: var(--sbb-color-white);--sbb-map-container-map-height: calc( var(--sbb-map-container-map-height-zero) + var(--sbb-border-radius-4x) );--sbb-map-container-border-radius: var(--sbb-border-radius-4x);--sbb-map-container-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );display:block}@media (min-width: 37.5rem){:host{--sbb-map-container-map-height: calc( var(--sbb-map-container-map-height-small) + var(--sbb-map-container-border-radius) )}}@media (min-width: 80rem){:host{--sbb-map-container-sidebar-width: 30rem}}.sbb-map-container{display:grid;grid-template-rows:auto auto;height:100%}@media (min-width: 52.5rem){.sbb-map-container{grid-template-columns:max(var(--sbb-map-container-sidebar-width)) calc(100% - var(--sbb-map-container-sidebar-width));height:calc(100vh - var(--sbb-map-container-margin-start, var(--sbb-header-height)));overflow:hidden}}.sbb-map-container__sidebar-button{position:fixed;left:50%;inset-block-end:var(--sbb-spacing-fixed-5x);visibility:hidden;opacity:0;transform:translate(-50%) translateY(calc(100% + var(--sbb-spacing-fixed-5x)));transition:opacity var(--sbb-map-container-animation-duration) var(--sbb-animation-easing),visibility var(--sbb-map-container-animation-duration) var(--sbb-animation-easing) var(--sbb-map-container-animation-duration),transform var(--sbb-map-container-animation-duration) var(--sbb-animation-easing)}:host([data-scroll-up-button-visible]) .sbb-map-container__sidebar-button{transition:visibility var(--sbb-map-container-animation-duration) var(--sbb-animation-easing),opacity var(--sbb-map-container-animation-duration) var(--sbb-animation-easing),transform var(--sbb-map-container-animation-duration) ease-out;visibility:visible;opacity:1;transform:translate(-50%) translateY(0)}@media (min-width: 52.5rem){.sbb-map-container__sidebar-button{display:none}}.sbb-map-container__sidebar{--sbb-scrollbar-thumb-width: .5rem;--sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);--sbb-scrollbar-width-firefox: auto;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: var(--sbb-color-cloud);--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);grid-column:1/3;grid-row:2/3;width:100%;height:calc(100% + var(--sbb-map-container-border-radius));overflow:hidden auto;position:relative;z-index:2;border-start-end-radius:var(--sbb-map-container-border-radius);border-start-start-radius:var(--sbb-map-container-border-radius);margin-block-start:calc(var(--sbb-map-container-border-radius) * -1);background-color:var(--sbb-map-container-sidebar-background-color)}.sbb-map-container__sidebar::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-map-container__sidebar::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-map-container__sidebar::-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-map-container__sidebar::-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-map-container__sidebar::-webkit-scrollbar-button,.sbb-map-container__sidebar::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-map-container__sidebar{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}@media (min-width: 52.5rem){.sbb-map-container__sidebar{grid-column:1/2;grid-row:1/3;border-radius:0;margin-block-start:0;border-block-start:var(--sbb-border-width-1x) solid var(--sbb-color-cloud)}}.sbb-map-container__map{position:sticky;inset-block-start:0;inset-inline:0;z-index:1;grid-row:1/2;grid-column:1/3;height:var(--sbb-map-container-map-height)}@media (min-width: 52.5rem){.sbb-map-container__map{grid-row:1/3;grid-column:2/3;height:100%;position:relative}}`;
+const f = m`*,:before,:after{box-sizing:border-box}:host{--sbb-map-container-map-height-zero: 18.4375rem;--sbb-map-container-map-height-small: 20rem;--sbb-map-container-sidebar-width: 25rem;--sbb-map-container-sidebar-background-color: var(--sbb-color-white);--sbb-map-container-border-radius: var(--sbb-border-radius-4x);--sbb-map-container-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-map-container-map-height: calc( var(--sbb-map-container-map-height-zero) + var(--sbb-map-container-border-radius) );display:block}@media (min-width: 37.5rem){:host{--sbb-map-container-map-height: calc( var(--sbb-map-container-map-height-small) + var(--sbb-map-container-border-radius) )}}@media (min-width: 80rem){:host{--sbb-map-container-sidebar-width: 30rem}}.sbb-map-container{display:grid;grid-template-rows:auto auto}@media (min-width: 52.5rem){.sbb-map-container{grid-template-columns:max(var(--sbb-map-container-sidebar-width)) calc(100% - var(--sbb-map-container-sidebar-width));height:calc(100vh - var(--sbb-map-container-margin-start, var(--sbb-header-height)))}}.sbb-map-container__sidebar-button{position:fixed;left:50%;inset-block-end:var(--sbb-spacing-fixed-5x);visibility:hidden;opacity:0;transform:translate(-50%) translateY(calc(100% + var(--sbb-spacing-fixed-5x)));transition:opacity var(--sbb-map-container-animation-duration) var(--sbb-animation-easing),visibility var(--sbb-map-container-animation-duration) var(--sbb-animation-easing) var(--sbb-map-container-animation-duration),transform var(--sbb-map-container-animation-duration) var(--sbb-animation-easing)}:host([data-scroll-up-button-visible]) .sbb-map-container__sidebar-button{transition:visibility var(--sbb-map-container-animation-duration) var(--sbb-animation-easing),opacity var(--sbb-map-container-animation-duration) var(--sbb-animation-easing),transform var(--sbb-map-container-animation-duration) ease-out;visibility:visible;opacity:1;transform:translate(-50%) translateY(0)}@media (min-width: 52.5rem){.sbb-map-container__sidebar-button{display:none}}.sbb-map-container__sidebar{--sbb-scrollbar-thumb-width: .5rem;--sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);--sbb-scrollbar-width-firefox: auto;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: var(--sbb-color-cloud);--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);grid-column:1/3;grid-row:2/3;width:100%;overflow:hidden auto;position:relative;border-start-end-radius:var(--sbb-map-container-border-radius);border-start-start-radius:var(--sbb-map-container-border-radius);margin-block-start:calc(var(--sbb-map-container-border-radius) * -1);background-color:var(--sbb-map-container-sidebar-background-color)}.sbb-map-container__sidebar::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-map-container__sidebar::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-map-container__sidebar::-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-map-container__sidebar::-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-map-container__sidebar::-webkit-scrollbar-button,.sbb-map-container__sidebar::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-map-container__sidebar{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}@media (min-width: 52.5rem){.sbb-map-container__sidebar{grid-column:1/2;grid-row:1/3;border-radius:0;margin-block-start:0;border-block-start:var(--sbb-border-width-1x) solid var(--sbb-color-cloud)}}.sbb-map-container__map{position:sticky;inset-block-start:0;inset-inline:0;grid-row:1/2;grid-column:1/3}@media (max-width: 52.4375rem){.sbb-map-container__map{height:var(--sbb-map-container-map-height)}}@media (min-width: 52.5rem){.sbb-map-container__map{grid-row:1/3;grid-column:2/3;position:relative}}`;
 var k = Object.defineProperty, y = Object.getOwnPropertyDescriptor, c = (r, t, i, b) => {
   for (var a = b > 1 ? void 0 : b ? y(t, i) : t, s = r.length - 1, e; s >= 0; s--)
     (e = r[s]) && (a = (b ? e(t, i, a) : e(a)) || a);
@@ -13,7 +13,7 @@ var k = Object.defineProperty, y = Object.getOwnPropertyDescriptor, c = (r, t, i
 };
 let o = class extends p {
   constructor() {
-    super(...arguments), this.hideScrollUpButton = !1, this._scrollUpButtonVisible = !1, this._language = new g(this), this._observer = new w(
+    super(...arguments), this.hideScrollUpButton = !1, this._scrollUpButtonVisible = !1, this._language = new _(this), this._observer = new w(
       (r) => this._toggleButtonVisibilityOnIntersect(r)
     );
   }
@@ -47,6 +47,9 @@ let o = class extends p {
   render() {
     return n`
       <div class="sbb-map-container">
+        <div class="sbb-map-container__map">
+          <slot name="map"></slot>
+        </div>
         <div class="sbb-map-container__sidebar">
           ${this.hideScrollUpButton ? l : n`<span
                 ${d((r) => {
@@ -66,12 +69,9 @@ let o = class extends p {
       r && (r.inert = !this._scrollUpButtonVisible);
     })}
               >
-                ${_[this._language.current]}
+                ${g[this._language.current]}
               </sbb-tertiary-button>`}
         </div>
-        <div class="sbb-map-container__map">
-          <slot name="map"></slot>
-        </div>
       </div>
     `;
   }

package/navigation/navigation-marker/navigation-marker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-marker.d.ts","sourceRoot":"","sources":["../../../../src/elements/navigation/navigation-marker/navigation-marker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhG,OAAO,EAAyB,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAEpF,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;;AAItE;;;;GAIG;AACH,qBACa,0BAA2B,SAAQ,+BAGnC;IACX,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAG7C;IAEF;;OAEG;IACiC,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAO;IAElD,OAAO,CAAC,oBAAoB,CAAC,CAAwD;IAE9F,OAAO,CAAC,+BAA+B,CAErC;cAEiB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;IAS9F,OAAO,CAAC,oBAAoB;IAWZ,iBAAiB,IAAI,IAAI;IAMzC,OAAO,CAAC,kBAAkB;IASV,oBAAoB,IAAI,IAAI;IAKrC,MAAM,CAAC,MAAM,EAAE,0BAA0B,GAAG,wBAAwB,GAAG,IAAI;cAU/D,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;IAKzF,KAAK,IAAI,IAAI;IAQpB,OAAO,CAAC,kBAAkB;cAcP,MAAM,IAAI,cAAc;CAG5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,uBAAuB,EAAE,0BAA0B,CAAC;KACrD;CACF"}
+{"version":3,"file":"navigation-marker.d.ts","sourceRoot":"","sources":["../../../../src/elements/navigation/navigation-marker/navigation-marker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhG,OAAO,EAAyB,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAEpF,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;;AAItE;;;;GAIG;AACH,qBACa,0BAA2B,SAAQ,+BAGnC;IACX,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAG7C;IAEF;;OAEG;IACiC,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAO;IAElD,OAAO,CAAC,oBAAoB,CAAC,CAAwD;IAE9F,OAAO,CAAC,+BAA+B,CAErC;cAEiB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;IAS9F,OAAO,CAAC,oBAAoB;IAWZ,iBAAiB,IAAI,IAAI;IAMzC,OAAO,CAAC,kBAAkB;IASV,oBAAoB,IAAI,IAAI;IAKrC,MAAM,CAAC,MAAM,EAAE,0BAA0B,GAAG,wBAAwB,GAAG,IAAI;cAU/D,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;IAMzF,KAAK,IAAI,IAAI;IAQpB,OAAO,CAAC,kBAAkB;cAcP,MAAM,IAAI,cAAc;CAG5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,uBAAuB,EAAE,0BAA0B,CAAC;KACrD;CACF"}

package/option/optgroup/optgroup-base-element.d.ts

@@ -0,0 +1,28 @@
+import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
+import { SbbAutocompleteBaseElement } from '../../autocomplete.js';
+import { SbbOptionBaseElement } from '../option.js';
+
+declare const SbbOptgroupBaseElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbHydrationMixinType> & typeof LitElement;
+export declare abstract class SbbOptgroupBaseElement extends SbbOptgroupBaseElement_base {
+    static styles: CSSResultGroup;
+    /** Option group label. */
+    label: string;
+    protected negative: boolean;
+    private _inertAriaGroups;
+    private _negativeObserver;
+    protected abstract get options(): SbbOptionBaseElement[];
+    protected abstract setAttributeFromParent(): void;
+    protected abstract getAutocompleteParent(): SbbAutocompleteBaseElement | null;
+    constructor();
+    connectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    private _handleSlotchange;
+    private _proxyGroupLabelToOptions;
+    protected proxyDisabledToOptions(): void;
+    private _highlightOptions;
+    private _onNegativeChange;
+    protected render(): TemplateResult;
+}
+export {};
+//# sourceMappingURL=optgroup-base-element.d.ts.map

package/option/optgroup/optgroup-base-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"optgroup-base-element.d.ts","sourceRoot":"","sources":["../../../../src/elements/option/optgroup/optgroup-base-element.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAGb,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAKxE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAIzD,OAAO,kBAAkB,CAAC;;AAS1B,8BACsB,sBAAuB,SAAQ,2BAEpD;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,0BAA0B;IACP,KAAK,EAAG,MAAM,CAAC;IAEzB,SAAS,CAAC,QAAQ,UAAS;IAE3B,OAAO,CAAC,gBAAgB,CAAS;IAE1C,OAAO,CAAC,iBAAiB,CAAgE;IAEzF,SAAS,CAAC,QAAQ,KAAK,OAAO,IAAI,oBAAoB,EAAE,CAAC;IACzD,SAAS,CAAC,QAAQ,CAAC,sBAAsB,IAAI,IAAI;IACjD,SAAS,CAAC,QAAQ,CAAC,qBAAqB,IAAI,0BAA0B,GAAG,IAAI;;IAc7D,iBAAiB,IAAI,IAAI;cAYtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAe5D,oBAAoB,IAAI,IAAI;IAK5C,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,yBAAyB;IAkBjC,SAAS,CAAC,sBAAsB,IAAI,IAAI;IAMxC,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,iBAAiB;cAIN,MAAM,IAAI,cAAc;CAY5C"}