@sbb-esta/lyne-elements 1.16.0 → 2.0.1

package/teaser-hero.js

@@ -1,61 +1,42 @@
-var I = (e) => {
+var m = (e) => {
   throw TypeError(e);
 };
-var T = (e, a, i) => a.has(e) || I("Cannot " + i);
-var p = (e, a, i) => (T(e, a, "read from private field"), i ? i.call(e) : a.get(e)), m = (e, a, i) => a.has(e) ? I("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(e) : a.set(e, i), g = (e, a, i, n) => (T(e, a, "write to private field"), n ? n.call(e, i) : a.set(e, i), i);
-import { __esDecorate as d, __runInitializers as o } from "tslib";
-import { css as j, nothing as v } from "lit";
-import { customElement as D, property as u } from "lit/decorators.js";
-import { html as _ } from "lit/static-html.js";
-import { SbbLinkBaseElement as O } from "./core/base-elements.js";
-import { slotState as q, forceType as f, omitEmptyConverter as B } from "./core/decorators.js";
-import "./image.js";
+var g = (e, t, a) => t.has(e) || m("Cannot " + a);
+var d = (e, t, a) => (g(e, t, "read from private field"), a ? a.call(e) : t.get(e)), u = (e, t, a) => t.has(e) ? m("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, a), v = (e, t, a, n) => (g(e, t, "write to private field"), n ? n.call(e, a) : t.set(e, a), a);
+import { __esDecorate as f, __runInitializers as l } from "tslib";
+import { css as y, nothing as x } from "lit";
+import { customElement as C, property as w } from "lit/decorators.js";
+import { html as k } from "lit/static-html.js";
+import { SbbLinkBaseElement as z } from "./core/base-elements.js";
+import { slotState as S, forceType as E, omitEmptyConverter as T } from "./core/decorators.js";
 import "./link/block-link-static.js";
-const H = j`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important;--sbb-teaser-hero-brightness-hover: var(--sbb-hover-image-brightness);--sbb-teaser-hero-chip-inset: var(--sbb-spacing-responsive-xxxs) auto auto var(--sbb-spacing-responsive-xxxs);--sbb-panel-width: 13.9375rem;--sbb-panel-inner-height: 10.4375rem;--sbb-panel-triangle-height: 2.0625rem;--sbb-panel-height: calc(var(--sbb-panel-inner-height) + 2 * var(--sbb-panel-triangle-height));--sbb-panel-line-height: var(--sbb-typo-line-height-titles);--sbb-panel-font-size: var(--sbb-typo-scale-1-5x);--sbb-panel-color: var(--sbb-color-white);--sbb-panel-background-color: var(--sbb-color-red-alpha-90);--sbb-panel-background-color-hover: var(--sbb-color-red);--sbb-panel-padding-inline: var(--sbb-spacing-responsive-m);--sbb-panel-gap: var(--sbb-spacing-responsive-xs);--sbb-panel-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-panel-animation-easing: var(--sbb-animation-easing)}@media (min-width: 52.5rem){:host{--sbb-panel-width: 20.0625rem;--sbb-panel-inner-height: 15.006875rem;--sbb-panel-triangle-height: 2.965625rem;--sbb-panel-font-size: var(--sbb-typo-scale-2x)}}@media (min-width: 64rem){:host{--sbb-panel-width: 26.75rem;--sbb-panel-inner-height: 20.02375rem;--sbb-panel-triangle-height: 3.956875rem;--sbb-panel-font-size: var(--sbb-typo-scale-2-5x);--sbb-panel-line-height: 1.2}}@media (any-hover: hover){:host(:hover){--sbb-panel-background-color: var(--sbb-panel-background-color-hover);--sbb-teaser-hero-brightness: var(--sbb-teaser-hero-brightness-hover)}}.sbb-teaser-hero{position:relative;display:block;min-height:var(--sbb-panel-height)}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-teaser-hero:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-teaser-hero__panel{z-index:1;position:relative;display:flex;flex-direction:column;justify-content:center;gap:var(--sbb-panel-gap);width:var(--sbb-panel-width);height:var(--sbb-panel-height);padding-block:var(--sbb-panel-triangle-height);padding-inline:var(--sbb-panel-padding-inline);clip-path:polygon(0 0,100% var(--sbb-panel-triangle-height),100% calc(100% - var(--sbb-panel-triangle-height)),0% 100%);background-color:var(--sbb-panel-background-color);transition:background var(--sbb-panel-animation-duration) var(--sbb-panel-animation-easing)}@media (any-hover: hover){.sbb-teaser-hero__panel:hover{--sbb-panel-background-color: var(--sbb-panel-background-color-hover)}}.sbb-teaser-hero__panel{position:absolute;top:50%;transform:translateY(-50%)}:host(:not([data-slot-names~=unnamed],[data-slot-names~=link-content],[link-content])) .sbb-teaser-hero__panel{display:none}.sbb-teaser-hero__panel-text{font-family:var(--sbb-typo-font-family);font-size:var(--sbb-panel-font-size);font-weight:300;line-height:var(--sbb-panel-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);color:var(--sbb-panel-color);-webkit-hyphens:auto;hyphens:auto;display:inline;margin:0;padding:0}::slotted([slot=image]),sbb-image{will-change:filter;filter:brightness(var(--sbb-teaser-hero-brightness, 1));transition:filter var(--sbb-panel-animation-duration) var(--sbb-panel-animation-easing)}::slotted([slot=chip]){position:absolute;inset:var(--sbb-teaser-hero-chip-inset);z-index:2}`;
-let R = (() => {
-  var l, b, c, r;
-  let e = [D("sbb-teaser-hero"), q()], a, i = [], n, k = O, y, x = [], S = [], z, C = [], w = [], A, $ = [], E = [];
-  return r = class extends k {
+const j = y`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important;--sbb-panel-width: 13.9375rem;--sbb-panel-inner-height: 10.4375rem;--sbb-panel-triangle-height: 2.0625rem;--sbb-panel-height: calc(var(--sbb-panel-inner-height) + 2 * var(--sbb-panel-triangle-height));--sbb-panel-line-height: var(--sbb-typo-line-height-titles);--sbb-panel-font-size: var(--sbb-typo-scale-1-5x);--sbb-panel-color: var(--sbb-color-white);--sbb-panel-background-color: var(--sbb-color-red-alpha-90);--sbb-panel-background-color-hover: var(--sbb-color-red);--sbb-panel-padding-inline: var(--sbb-spacing-responsive-m);--sbb-panel-gap: var(--sbb-spacing-responsive-xs);--sbb-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-panel-animation-easing: var(--sbb-animation-easing)}@media (min-width: 52.5rem){:host{--sbb-panel-width: 20.0625rem;--sbb-panel-inner-height: 15.006875rem;--sbb-panel-triangle-height: 2.965625rem;--sbb-panel-font-size: var(--sbb-typo-scale-2x)}}@media (min-width: 64rem){:host{--sbb-panel-width: 26.75rem;--sbb-panel-inner-height: 20.02375rem;--sbb-panel-triangle-height: 3.956875rem;--sbb-panel-font-size: var(--sbb-typo-scale-2-5x);--sbb-panel-line-height: 1.2}}@media (any-hover: hover){:host(:hover){--sbb-panel-background-color: var(--sbb-panel-background-color-hover)}}.sbb-teaser-hero{position:relative;display:block;min-height:var(--sbb-panel-height);text-decoration:none}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-teaser-hero:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-teaser-hero__panel{z-index:1;position:relative;display:flex;flex-direction:column;justify-content:center;gap:var(--sbb-panel-gap);width:var(--sbb-panel-width);height:var(--sbb-panel-height);padding-block:var(--sbb-panel-triangle-height);padding-inline:var(--sbb-panel-padding-inline);clip-path:polygon(0 0,100% var(--sbb-panel-triangle-height),100% calc(100% - var(--sbb-panel-triangle-height)),0% 100%);background-color:var(--sbb-panel-background-color);transition:background var(--sbb-panel-animation-duration) var(--sbb-panel-animation-easing)}@media (any-hover: hover){.sbb-teaser-hero__panel:hover{--sbb-panel-background-color: var(--sbb-panel-background-color-hover)}}.sbb-teaser-hero__panel{position:absolute;top:50%;transform:translateY(-50%)}:host(:not([data-slot-names~=unnamed],[data-slot-names~=link-content],[link-content])) .sbb-teaser-hero__panel{display:none}.sbb-teaser-hero__panel-text{font-family:var(--sbb-typo-font-family);font-size:var(--sbb-panel-font-size);font-weight:300;line-height:var(--sbb-panel-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);color:var(--sbb-panel-color);-webkit-hyphens:auto;hyphens:auto;display:inline;margin:0;padding:0}`;
+let P = (() => {
+  var i, s;
+  let e = [C("sbb-teaser-hero"), S()], t, a = [], n, b = z, p, c = [], h = [];
+  return s = class extends b {
     constructor() {
       super(...arguments);
-      m(this, l, o(this, x, ""));
-      m(this, b, (o(this, S), o(this, C, "")));
-      m(this, c, (o(this, w), o(this, $, "")));
-      o(this, E);
+      u(this, i, l(this, c, ""));
+      l(this, h);
     }
     /** Panel link text. */
     get linkContent() {
-      return p(this, l);
+      return d(this, i);
     }
-    set linkContent(s) {
-      g(this, l, s);
+    set linkContent(o) {
+      v(this, i, o);
     }
-    /** Image src will be passed to `sbb-image`. */
-    get imageSrc() {
-      return p(this, b);
-    }
-    set imageSrc(s) {
-      g(this, b, s);
-    }
-    /** Image alt text will be passed to `sbb-image`. */
-    get imageAlt() {
-      return p(this, c);
-    }
-    set imageAlt(s) {
-      g(this, c, s);
-    }
-    _chipSlotChanged() {
-      var s;
-      (s = this.querySelector("sbb-chip")) == null || s.setAttribute("color", "charcoal");
+    _imageSlotChanged() {
+      Array.from(this.querySelectorAll("sbb-chip-label")).forEach((o) => o.color = "charcoal");
     }
     renderTemplate() {
-      return _`
-      <slot name="chip" @slotchange=${() => this._chipSlotChanged()}></slot>
+      return k`
       <span class="sbb-teaser-hero__panel">
         <p class="sbb-teaser-hero__panel-text">
           <slot></slot>
         </p>
-        ${this.href ? _`<sbb-block-link-static
+        ${this.href ? k`<sbb-block-link-static
               class="sbb-teaser-hero__panel-link"
               icon-name="chevron-small-right-small"
               icon-placement="end"
@@ -63,24 +44,18 @@ let R = (() => {
               negative
             >
               <slot name="link-content">${this.linkContent}</slot>
-            </sbb-block-link-static>` : v}
+            </sbb-block-link-static>` : x}
       </span>
-      <slot name="image">
-        ${this.imageSrc ? _`<sbb-image image-src=${this.imageSrc} alt=${this.imageAlt ?? v}></sbb-image>` : v}
-      </slot>
+      <slot name="image" @slotchange=${this._imageSlotChanged}></slot>
     `;
     }
-  }, l = new WeakMap(), b = new WeakMap(), c = new WeakMap(), n = r, (() => {
-    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(k[Symbol.metadata] ?? null) : void 0;
-    y = [f(), u({ attribute: "link-content", reflect: !0, converter: B })], z = [f(), u({ attribute: "image-src" })], A = [f(), u({ attribute: "image-alt" })], d(r, null, y, { kind: "accessor", name: "linkContent", static: !1, private: !1, access: { has: (t) => "linkContent" in t, get: (t) => t.linkContent, set: (t, h) => {
-      t.linkContent = h;
-    } }, metadata: s }, x, S), d(r, null, z, { kind: "accessor", name: "imageSrc", static: !1, private: !1, access: { has: (t) => "imageSrc" in t, get: (t) => t.imageSrc, set: (t, h) => {
-      t.imageSrc = h;
-    } }, metadata: s }, C, w), d(r, null, A, { kind: "accessor", name: "imageAlt", static: !1, private: !1, access: { has: (t) => "imageAlt" in t, get: (t) => t.imageAlt, set: (t, h) => {
-      t.imageAlt = h;
-    } }, metadata: s }, $, E), d(null, a = { value: n }, e, { kind: "class", name: n.name, metadata: s }, null, i), n = a.value, s && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
-  })(), r.styles = H, o(n, i), n;
+  }, i = new WeakMap(), n = s, (() => {
+    const o = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
+    p = [E(), w({ attribute: "link-content", reflect: !0, converter: T })], f(s, null, p, { kind: "accessor", name: "linkContent", static: !1, private: !1, access: { has: (r) => "linkContent" in r, get: (r) => r.linkContent, set: (r, _) => {
+      r.linkContent = _;
+    } }, metadata: o }, c, h), f(null, t = { value: n }, e, { kind: "class", name: n.name, metadata: o }, null, a), n = t.value, o && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
+  })(), s.styles = j, l(n, a), n;
 })();
 export {
-  R as SbbTeaserHeroElement
+  P as SbbTeaserHeroElement
 };

package/teaser-product/common.js

@@ -48,7 +48,7 @@ const M = (t) => (() => {
       n.imageAlignment = x;
     } }, metadata: s }, p, g), k(null, i = { value: o }, r, { kind: "class", name: o.name, metadata: s }, null, d), o = i.value, s && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s }), c(o, d);
   })(), o;
-})(), O = S`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-teaser-product-background-color: var(--sbb-color-cloud);--sbb-teaser-product-background-gradient-direction: to right;--sbb-teaser-product-background: var(--sbb-teaser-product-background-color);--sbb-teaser-product-border-radius: var(--sbb-border-radius-4x);--sbb-teaser-product-content-color: var(--sbb-color-iron);--sbb-teaser-product-footer-color: var(--sbb-color-anthracite);--sbb-teaser-product-container-padding-block: var(--sbb-spacing-responsive-l);--sbb-teaser-product-min-height: 37.5rem;--sbb-teaser-product-background-gradient-start: 25%;--sbb-teaser-product-background-gradient-end: 75%}@media (min-width: 64rem){:host{--sbb-teaser-product-background: linear-gradient( var(--sbb-teaser-product-background-gradient-direction), var(--sbb-teaser-product-background-color) var(--sbb-teaser-product-background-gradient-start), transparent var(--sbb-teaser-product-background-gradient-end) )}}:host([negative]){--sbb-teaser-product-background-color: var(--sbb-color-midnight);--sbb-teaser-product-content-color: var(--sbb-color-cloud);--sbb-teaser-product-footer-color: var(--sbb-color-cloud);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-title-text-color-normal-override: var(--sbb-color-milk)}:host([image-alignment=before]){--sbb-teaser-product-background-gradient-direction: to left}.sbb-teaser-product__image-container{overflow:hidden;border-radius:var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius) 0 0}@media (min-width: 64rem){.sbb-teaser-product__image-container{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-teaser-product-border-radius)}}::slotted(img){display:flex;width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}::slotted(sbb-image){--sbb-image-border-radius: 0;height:100%}::slotted(p.sbb-teaser-product--spacing){margin:0}::slotted(sbb-title.sbb-teaser-product--spacing){--sbb-title-margin-block-start: 0}::slotted(:is(sbb-action-group,[data-action]).sbb-teaser-product--spacing){margin-block-start:var(--sbb-spacing-responsive-xxs)}@media (forced-colors: active){.sbb-teaser-product__root:after{content:"";position:absolute;display:block;top:0;right:0;bottom:0;left:0;pointer-events:none;border:var(--sbb-border-width-2x) solid CanvasText;border-radius:var(--sbb-teaser-product-border-radius)}}.sbb-action-base{display:block;position:relative;text-decoration:none}.sbb-teaser-product__container{background:var(--sbb-teaser-product-background);border-radius:0 0 var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius);padding:var(--sbb-spacing-responsive-s)}@media (min-width: 64rem){.sbb-teaser-product__container{display:grid;grid:"content ." 1fr "footnote ." auto/1fr 1fr;column-gap:var(--sbb-spacing-responsive-xxl);background:var(--sbb-teaser-product-background);border-radius:var(--sbb-teaser-product-border-radius);padding-block:var(--sbb-teaser-product-container-padding-block) 0;padding-inline:var(--sbb-spacing-responsive-xl);position:relative}:host([image-alignment=before]) .sbb-teaser-product__container{grid-template-areas:". content" ". footnote"}}.sbb-teaser-product__content{grid-area:content;align-self:center;margin:0;color:var(--sbb-teaser-product-content-color)}@media (min-width: 64rem){.sbb-teaser-product__content{align-content:center;min-height:calc(var(--sbb-teaser-product-min-height) - 2 * var(--sbb-teaser-product-container-padding-block))}}.sbb-teaser-product__footnote{grid-area:footnote;padding-block-start:var(--sbb-spacing-responsive-s);color:var(--sbb-teaser-product-footer-color);--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host(:not([data-slot-names~=footnote])) .sbb-teaser-product__footnote{padding-block-start:0}@media (min-width: 64rem){.sbb-teaser-product__footnote{min-height:var(--sbb-teaser-product-container-padding-block);padding-block:var(--sbb-spacing-responsive-xs)}}`;
+})(), O = S`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-teaser-product-background-color: var(--sbb-color-cloud);--sbb-teaser-product-background-gradient-direction: to right;--sbb-teaser-product-background: var(--sbb-teaser-product-background-color);--sbb-teaser-product-border-radius: var(--sbb-border-radius-4x);--sbb-teaser-product-content-color: var(--sbb-color-iron);--sbb-teaser-product-footer-color: var(--sbb-color-anthracite);--sbb-teaser-product-container-padding-block: var(--sbb-spacing-responsive-l);--sbb-teaser-product-min-height: 37.5rem;--sbb-teaser-product-background-gradient-start: 25%;--sbb-teaser-product-background-gradient-end: 75%}@media (min-width: 64rem){:host{--sbb-teaser-product-background: linear-gradient( var(--sbb-teaser-product-background-gradient-direction), var(--sbb-teaser-product-background-color) var(--sbb-teaser-product-background-gradient-start), transparent var(--sbb-teaser-product-background-gradient-end) )}}:host([negative]){--sbb-teaser-product-background-color: var(--sbb-color-midnight);--sbb-teaser-product-content-color: var(--sbb-color-cloud);--sbb-teaser-product-footer-color: var(--sbb-color-cloud);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-title-text-color-normal-override: var(--sbb-color-milk)}:host([image-alignment=before]){--sbb-teaser-product-background-gradient-direction: to left}.sbb-teaser-product__image-container{overflow:hidden;border-radius:var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius) 0 0}@media (min-width: 64rem){.sbb-teaser-product__image-container{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-teaser-product-border-radius)}}::slotted(p.sbb-teaser-product--spacing){margin:0}::slotted(sbb-title.sbb-teaser-product--spacing){--sbb-title-margin-block-start: 0}::slotted(:is(sbb-action-group,[data-action]).sbb-teaser-product--spacing){margin-block-start:var(--sbb-spacing-responsive-xxs)}::slotted([slot=image]){display:flex;width:100%;height:100%}@media (forced-colors: active){.sbb-teaser-product__root:after{content:"";position:absolute;display:block;top:0;right:0;bottom:0;left:0;pointer-events:none;border:var(--sbb-border-width-2x) solid CanvasText;border-radius:var(--sbb-teaser-product-border-radius)}}.sbb-action-base{display:block;position:relative;text-decoration:none}.sbb-teaser-product__container{background:var(--sbb-teaser-product-background);border-radius:0 0 var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius);padding:var(--sbb-spacing-responsive-s)}@media (min-width: 64rem){.sbb-teaser-product__container{display:grid;grid:"content ." 1fr "footnote ." auto/1fr 1fr;column-gap:var(--sbb-spacing-responsive-xxl);background:var(--sbb-teaser-product-background);border-radius:var(--sbb-teaser-product-border-radius);padding-block:var(--sbb-teaser-product-container-padding-block) 0;padding-inline:var(--sbb-spacing-responsive-xl);position:relative}:host([image-alignment=before]) .sbb-teaser-product__container{grid-template-areas:". content" ". footnote"}}.sbb-teaser-product__content{grid-area:content;align-self:center;margin:0;color:var(--sbb-teaser-product-content-color)}@media (min-width: 64rem){.sbb-teaser-product__content{align-content:center;min-height:calc(var(--sbb-teaser-product-min-height) - 2 * var(--sbb-teaser-product-container-padding-block))}}.sbb-teaser-product__footnote{grid-area:footnote;padding-block-start:var(--sbb-spacing-responsive-s);color:var(--sbb-teaser-product-footer-color);--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host(:not([data-slot-names~=footnote])) .sbb-teaser-product__footnote{padding-block-start:0}@media (min-width: 64rem){.sbb-teaser-product__footnote{min-height:var(--sbb-teaser-product-container-padding-block);padding-block:var(--sbb-spacing-responsive-xs)}}`;
 export {
   M as SbbTeaserProductCommonElementMixin,
   O as teaserProductCommonStyle

package/teaser-product/teaser-product.js

@@ -1,15 +1,15 @@
-import { __esDecorate as b, __runInitializers as l } from "tslib";
-import { customElement as c } from "lit/decorators.js";
+import { __esDecorate as b, __runInitializers as c } from "tslib";
+import { customElement as n } from "lit/decorators.js";
 import { html as i } from "lit/static-html.js";
-import { SbbLinkBaseElement as d } from "../core/base-elements.js";
-import { SbbTeaserProductCommonElementMixin as u, teaserProductCommonStyle as m } from "./common.js";
+import { SbbLinkBaseElement as u } from "../core/base-elements.js";
+import { SbbTeaserProductCommonElementMixin as d, teaserProductCommonStyle as m } from "./common.js";
 import { css as p } from "lit";
 import "../screen-reader-only.js";
-const v = p`:host{--sbb-teaser-product-brightness-hover: var(--sbb-hover-image-brightness);--sbb-teaser-product-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-teaser-product-animation-easing: var(--sbb-animation-easing);--sbb-teaser-product-border-radius: var(--sbb-border-radius-4x)}@media (forced-colors: active){:host{--sbb-title-text-color-normal-override: LinkText !important;--sbb-teaser-product-content-color: LinkText !important;--sbb-teaser-product-footer-color: LinkText !important}}@media (any-hover: hover){:host(:hover){--sbb-teaser-product-brightness: var(--sbb-teaser-product-brightness-hover)}}::slotted(:is(img,sbb-image)){will-change:filter;transition-property:filter;transition-duration:var(--sbb-teaser-product-animation-duration);transition-timing-function:var(--sbb-animation-easing);filter:brightness(var(--sbb-teaser-product-brightness, 1))}.sbb-teaser-product__wrapper{position:relative}.sbb-teaser-product__root{pointer-events:none}@media (forced-colors: active){:host(:hover) .sbb-teaser-product__root:after{border-color:Highlight}}.sbb-teaser-product{position:absolute;top:0;right:0;bottom:0;left:0}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-teaser-product:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-product-border-radius)}`;
-let T = (() => {
-  var e;
-  let n = [c("sbb-teaser-product")], o, s = [], t, a = u(d);
-  return e = class extends a {
+const f = p`:host{--sbb-teaser-product-border-radius: var(--sbb-border-radius-4x)}@media (forced-colors: active){:host{--sbb-title-text-color-normal-override: LinkText !important;--sbb-teaser-product-content-color: LinkText !important;--sbb-teaser-product-footer-color: LinkText !important}}.sbb-teaser-product__wrapper{position:relative}.sbb-teaser-product__root{pointer-events:none}@media (forced-colors: active){:host(:hover) .sbb-teaser-product__root:after{border-color:Highlight}}.sbb-teaser-product{position:absolute;top:0;right:0;bottom:0;left:0}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-teaser-product:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-product-border-radius)}`;
+let g = (() => {
+  var t;
+  let l = [n("sbb-teaser-product")], o, s = [], e, a = d(u);
+  return t = class extends a {
     render() {
       return i`
       <div class="sbb-teaser-product__wrapper">
@@ -21,11 +21,11 @@ let T = (() => {
       </div>
     `;
     }
-  }, t = e, (() => {
+  }, e = t, (() => {
     const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
-    b(null, o = { value: t }, n, { kind: "class", name: t.name, metadata: r }, null, s), t = o.value, r && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
-  })(), e.styles = [m, v], l(t, s), t;
+    b(null, o = { value: e }, l, { kind: "class", name: e.name, metadata: r }, null, s), e = o.value, r && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
+  })(), t.styles = [m, f], c(e, s), e;
 })();
 export {
-  T as SbbTeaserProductElement
+  g as SbbTeaserProductElement
 };

package/teaser.js

@@ -1,57 +1,57 @@
-var j = (t) => {
+var D = (t) => {
   throw TypeError(t);
 };
-var D = (t, s, i) => s.has(t) || j("Cannot " + i);
-var v = (t, s, i) => (D(t, s, "read from private field"), i ? i.call(t) : s.get(t)), m = (t, s, i) => s.has(t) ? j("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, i), p = (t, s, i, o) => (D(t, s, "write to private field"), o ? o.call(t, i) : s.set(t, i), i);
-import { __esDecorate as f, __runInitializers as n } from "tslib";
+var j = (t, s, i) => s.has(t) || D("Cannot " + i);
+var v = (t, s, i) => (j(t, s, "read from private field"), i ? i.call(t) : s.get(t)), p = (t, s, i) => s.has(t) ? D("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, i), m = (t, s, i, o) => (j(t, s, "write to private field"), o ? o.call(t, i) : s.set(t, i), i);
+import { __esDecorate as f, __runInitializers as l } from "tslib";
 import { customElement as B, property as _ } from "lit/decorators.js";
 import { html as u } from "lit/static-html.js";
 import { SbbLinkBaseElement as F } from "./core/base-elements.js";
 import { slotState as H, forceType as O, omitEmptyConverter as P } from "./core/decorators.js";
 import { css as U } from "lit";
-import "./chip.js";
+import "./chip-label.js";
 import "./screen-reader-only.js";
 import "./title.js";
-const q = U`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:inline-block;outline:none!important;--sbb-teaser-scale-hover: 1.02;--sbb-teaser-description-color: var(--sbb-color-granite);--sbb-teaser-flex-direction: row;--sbb-teaser-align-items: center;--sbb-teaser-gap: var(--sbb-spacing-fixed-4x);--sbb-teaser-width: fit-content;--sbb-teaser-border-radius: var(--sbb-border-radius-4x);--sbb-teaser-brightness-hover: var(--sbb-hover-image-brightness);--sbb-teaser-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) )}@media (forced-colors: active){:host{--sbb-teaser-description-color: LinkText;--sbb-title-text-color-normal-override: LinkText !important}}:host([alignment=after]){--sbb-teaser-align-items: start}:host([alignment=below]){--sbb-teaser-flex-direction: column;--sbb-teaser-align-items: baseline;--sbb-teaser-gap: var(--sbb-spacing-fixed-3x);--sbb-teaser-width: 100%}.sbb-teaser__wrapper{display:flex;position:relative;cursor:pointer}.sbb-teaser__wrapper:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-teaser{text-decoration:none;position:absolute;top:0;right:0;bottom:0;left:0}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-teaser:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-border-radius)}@media (forced-colors: active){.sbb-teaser{outline-offset:var(--sbb-focus-outline-offset);outline:CanvasText solid var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-border-radius)}.sbb-teaser:hover{outline-color:Highlight}}.sbb-teaser__container{display:flex;flex-flow:var(--sbb-teaser-flex-direction) nowrap;align-items:var(--sbb-teaser-align-items);gap:var(--sbb-teaser-gap);max-width:100%;width:100%;pointer-events:none}.sbb-teaser__text{overflow:hidden;max-width:100%}::slotted([slot=image]){width:18.75rem;will-change:transform;display:block;filter:brightness(var(--sbb-teaser-brightness, 1));transition:var(--sbb-teaser-animation-duration) var(--sbb-animation-easing)}@media (any-hover: hover){.sbb-teaser__wrapper:hover ::slotted([slot=image]){transform:scale(var(--sbb-teaser-scale-hover));--sbb-teaser-brightness: var(--sbb-teaser-brightness-hover)}}::slotted(sbb-image[slot=image]){--sbb-image-aspect-ratio: 4 / 3}::slotted(img[slot=image]){aspect-ratio:4/3;object-fit:cover}.sbb-teaser__image-wrapper{flex-shrink:0;overflow:hidden;border-radius:var(--sbb-teaser-border-radius);transition:var(--sbb-teaser-animation-duration) var(--sbb-animation-easing)}@media (any-hover: hover){.sbb-teaser__wrapper:hover .sbb-teaser__image-wrapper{box-shadow:var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-hard-2-color),var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-hard-1-color)}}.sbb-teaser__chip{display:block;max-width:fit-content;margin-block-end:var(--sbb-spacing-fixed-1x)}:host(:not([data-slot-names~=chip],[chip-content])) .sbb-teaser__chip{display:none}.sbb-teaser__lead{margin:0}.sbb-teaser__description{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:inline-block;color:var(--sbb-teaser-description-color)}`;
+const q = U`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:inline-block;outline:none!important;--sbb-teaser-scale-hover: 1.02;--sbb-teaser-description-color: var(--sbb-color-granite);--sbb-teaser-flex-direction: row;--sbb-teaser-align-items: center;--sbb-teaser-gap: var(--sbb-spacing-fixed-4x);--sbb-teaser-width: fit-content;--sbb-teaser-border-radius: var(--sbb-border-radius-4x)}@media (forced-colors: active){:host{--sbb-teaser-description-color: LinkText;--sbb-title-text-color-normal-override: LinkText !important}}:host([alignment=after]){--sbb-teaser-align-items: start}:host([alignment=below]){--sbb-teaser-flex-direction: column;--sbb-teaser-align-items: baseline;--sbb-teaser-gap: var(--sbb-spacing-fixed-3x);--sbb-teaser-width: 100%}@media (any-hover: hover){:host(:hover){--sbb-teaser-scale: var(--sbb-teaser-scale-hover)}}.sbb-teaser__wrapper{display:flex;position:relative;cursor:pointer}.sbb-teaser__wrapper:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-teaser{text-decoration:none;position:absolute;top:0;right:0;bottom:0;left:0}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-teaser:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-border-radius)}@media (forced-colors: active){.sbb-teaser{outline-offset:var(--sbb-focus-outline-offset);outline:CanvasText solid var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-border-radius)}.sbb-teaser:hover{outline-color:Highlight}}.sbb-teaser__container{display:flex;flex-flow:var(--sbb-teaser-flex-direction) nowrap;align-items:var(--sbb-teaser-align-items);gap:var(--sbb-teaser-gap);max-width:100%;width:100%;pointer-events:none}.sbb-teaser__text{overflow:hidden;max-width:100%}::slotted([slot=image]){width:18.75rem;display:block}.sbb-teaser__image-wrapper{flex-shrink:0;overflow:hidden;border-radius:var(--sbb-teaser-border-radius);transition:box-shadow var(--sbb-teaser-image-animation-duration) var(--sbb-animation-easing)}@media (any-hover: hover){:host(:hover) .sbb-teaser__image-wrapper{box-shadow:var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-hard-2-color),var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-hard-1-color)}}.sbb-teaser__chip-label{display:block;max-width:fit-content;margin-block-end:var(--sbb-spacing-fixed-1x)}:host(:not([data-slot-names~=chip],[chip-content])) .sbb-teaser__chip-label{display:none}.sbb-teaser__lead{margin:0}.sbb-teaser__description{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:inline-block;color:var(--sbb-teaser-description-color)}`;
 let Y = (() => {
   var b, c, d, h, r;
-  let t = [B("sbb-teaser"), H()], s, i = [], o, g = F, w, x = [], y = [], C, z = [], k = [], L, S = [], T = [], I, $ = [], E = [];
+  let t = [B("sbb-teaser"), H()], s, i = [], o, g = F, w, x = [], y = [], C, k = [], z = [], L, S = [], T = [], I, $ = [], E = [];
   return r = class extends g {
     constructor() {
       super(...arguments);
-      m(this, b, n(this, x, "after-centered"));
-      m(this, c, (n(this, y), n(this, z, "5")));
-      m(this, d, (n(this, k), n(this, S, "")));
-      m(this, h, (n(this, T), n(this, $, "")));
-      n(this, E);
+      p(this, b, l(this, x, "after-centered"));
+      p(this, c, (l(this, y), l(this, k, "5")));
+      p(this, d, (l(this, z), l(this, S, "")));
+      p(this, h, (l(this, T), l(this, $, "")));
+      l(this, E);
     }
     /** Teaser variant - define the position and the alignment of the text block. */
     get alignment() {
       return v(this, b);
     }
     set alignment(a) {
-      p(this, b, a);
+      m(this, b, a);
     }
     /** Heading level of the sbb-title element (e.g. h1-h6). */
     get titleLevel() {
       return v(this, c);
     }
     set titleLevel(a) {
-      p(this, c, a);
+      m(this, c, a);
     }
     /** Content of title. */
     get titleContent() {
       return v(this, d);
     }
     set titleContent(a) {
-      p(this, d, a);
+      m(this, d, a);
     }
-    /** Content of chip. */
+    /** Content of chip label. */
     get chipContent() {
       return v(this, h);
     }
     set chipContent(a) {
-      p(this, h, a);
+      m(this, h, a);
     }
     render() {
       return u`
@@ -71,9 +71,9 @@ let Y = (() => {
           <slot name="image"></slot>
         </span>
         <span class="sbb-teaser__text">
-          <sbb-chip size="xxs" color="charcoal" class="sbb-teaser__chip">
+          <sbb-chip-label size="xxs" color="charcoal" class="sbb-teaser__chip-label">
             <slot name="chip">${this.chipContent}</slot>
-          </sbb-chip>
+          </sbb-chip-label>
           <sbb-title level=${this.titleLevel} visual-level="5" class="sbb-teaser__lead">
             <slot name="title">${this.titleContent}</slot>
           </sbb-title>
@@ -86,16 +86,16 @@ let Y = (() => {
     }
   }, b = new WeakMap(), c = new WeakMap(), d = new WeakMap(), h = new WeakMap(), o = r, (() => {
     const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(g[Symbol.metadata] ?? null) : void 0;
-    w = [_({ reflect: !0 })], C = [_({ attribute: "title-level" })], L = [O(), _({ attribute: "title-content" })], I = [O(), _({ attribute: "chip-content", reflect: !0, converter: P })], f(r, null, w, { kind: "accessor", name: "alignment", static: !1, private: !1, access: { has: (e) => "alignment" in e, get: (e) => e.alignment, set: (e, l) => {
-      e.alignment = l;
-    } }, metadata: a }, x, y), f(r, null, C, { kind: "accessor", name: "titleLevel", static: !1, private: !1, access: { has: (e) => "titleLevel" in e, get: (e) => e.titleLevel, set: (e, l) => {
-      e.titleLevel = l;
-    } }, metadata: a }, z, k), f(r, null, L, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (e) => "titleContent" in e, get: (e) => e.titleContent, set: (e, l) => {
-      e.titleContent = l;
-    } }, metadata: a }, S, T), f(r, null, I, { kind: "accessor", name: "chipContent", static: !1, private: !1, access: { has: (e) => "chipContent" in e, get: (e) => e.chipContent, set: (e, l) => {
-      e.chipContent = l;
+    w = [_({ reflect: !0 })], C = [_({ attribute: "title-level" })], L = [O(), _({ attribute: "title-content" })], I = [O(), _({ attribute: "chip-content", reflect: !0, converter: P })], f(r, null, w, { kind: "accessor", name: "alignment", static: !1, private: !1, access: { has: (e) => "alignment" in e, get: (e) => e.alignment, set: (e, n) => {
+      e.alignment = n;
+    } }, metadata: a }, x, y), f(r, null, C, { kind: "accessor", name: "titleLevel", static: !1, private: !1, access: { has: (e) => "titleLevel" in e, get: (e) => e.titleLevel, set: (e, n) => {
+      e.titleLevel = n;
+    } }, metadata: a }, k, z), f(r, null, L, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (e) => "titleContent" in e, get: (e) => e.titleContent, set: (e, n) => {
+      e.titleContent = n;
+    } }, metadata: a }, S, T), f(r, null, I, { kind: "accessor", name: "chipContent", static: !1, private: !1, access: { has: (e) => "chipContent" in e, get: (e) => e.chipContent, set: (e, n) => {
+      e.chipContent = n;
     } }, metadata: a }, $, E), f(null, s = { value: o }, t, { kind: "class", name: o.name, metadata: a }, null, i), o = s.value, a && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
-  })(), r.styles = q, n(o, i), o;
+  })(), r.styles = q, l(o, i), o;
 })();
 export {
   Y as SbbTeaserElement

package/time-input/time-input.d.ts

@@ -17,6 +17,9 @@ export declare class SbbTimeInputElement extends LitElement {
     get input(): string | HTMLElement | null;
     private _input;
     private accessor _inputElement;
+    /** Formats the current input's value as date. */
+    set valueAsDate(date: SbbDateLike | null);
+    get valueAsDate(): Date | null;
     /**
      * @deprecated only used for React. Will probably be removed once React 19 is available.
      */
@@ -28,14 +31,8 @@ export declare class SbbTimeInputElement extends LitElement {
     private _language;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    /** Gets the input value with the correct date format. */
-    getValueAsDate(): Date | null;
-    /** Set the input value to the correctly formatted value. */
-    setValueAsDate(date: SbbDateLike): void;
     private _findInputElement;
     private _registerInputElement;
-    /** Applies the correct format to values and triggers event dispatch. */
-    private _updateValueAndEmitChange;
     /**
      * Updates `value` and `valueAsDate`. The direct update on the `_inputElement` is required
      * to force the input change when the typed value is the same of the current one.

package/time-input/time-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"time-input.d.ts","sourceRoot":"","sources":["../../../src/elements/time-input/time-input.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAQvC,OAAO,KAAK,EAAE,WAAW,EAA4B,MAAM,uBAAuB,CAAC;AAanF;;;;;GAKG;AACH,qBAEM,mBAAoB,SAAQ,UAAU;IAC1C,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAEX,iEAAiE;IACjE,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,EAG3C;IACD,IAAW,KAAK,IAAI,MAAM,GAAG,WAAW,GAAG,IAAI,CAE9C;IACD,OAAO,CAAC,MAAM,CAAqC;IAE1C,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAiC;IAExE;;OAEG;IACH,OAAO,CAAC,UAAU,CAGf;IAEH,4DAA4D;IAC5D,OAAO,CAAC,iBAAiB,CAOvB;IAEF,OAAO,CAAC,gBAAgB,CAAwB;IAChD,OAAO,CAAC,gBAAgB,CAAyB;IACjD,OAAO,CAAC,SAAS,CAAmC;IAEpC,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAK5C,yDAAyD;IAElD,cAAc,IAAI,IAAI,GAAG,IAAI;IAIpC,4DAA4D;IACrD,cAAc,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;IAgB9C,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,qBAAqB;IAqC7B,wEAAwE;IACxE,OAAO,CAAC,yBAAyB;IAMjC;;;OAGG;IACH,OAAO,CAAC,YAAY;IAuBpB,8BAA8B;IAC9B,OAAO,CAAC,WAAW;IAKnB,yDAAyD;IACzD,OAAO,CAAC,YAAY;IAMpB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAQ1B,uFAAuF;IACvF,OAAO,CAAC,YAAY;IAIpB,kDAAkD;IAClD,OAAO,CAAC,WAAW;IAoBnB,qDAAqD;IACrD,OAAO,CAAC,kBAAkB;IA6B1B,OAAO,CAAC,2BAA2B;cAWhB,MAAM,IAAI,cAAc;CAQ5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}
+{"version":3,"file":"time-input.d.ts","sourceRoot":"","sources":["../../../src/elements/time-input/time-input.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAQvC,OAAO,KAAK,EAAE,WAAW,EAA4B,MAAM,uBAAuB,CAAC;AAanF;;;;;GAKG;AACH,qBAEM,mBAAoB,SAAQ,UAAU;IAC1C,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAEX,iEAAiE;IACjE,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,EAG3C;IACD,IAAW,KAAK,IAAI,MAAM,GAAG,WAAW,GAAG,IAAI,CAE9C;IACD,OAAO,CAAC,MAAM,CAAqC;IAE1C,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAiC;IAExE,iDAAiD;IACjD,IACW,WAAW,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,EAc9C;IACD,IAAW,WAAW,IAAI,IAAI,GAAG,IAAI,CAEpC;IAED;;OAEG;IACH,OAAO,CAAC,UAAU,CAGf;IAEH,4DAA4D;IAC5D,OAAO,CAAC,iBAAiB,CAOvB;IAEF,OAAO,CAAC,gBAAgB,CAAwB;IAChD,OAAO,CAAC,gBAAgB,CAAyB;IACjD,OAAO,CAAC,SAAS,CAAmC;IAEpC,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAK5C,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,qBAAqB;IAgD7B;;;OAGG;IACH,OAAO,CAAC,YAAY;IA4BpB,8BAA8B;IAC9B,OAAO,CAAC,WAAW;IAKnB,yDAAyD;IACzD,OAAO,CAAC,YAAY;IAMpB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAQ1B,uFAAuF;IACvF,OAAO,CAAC,YAAY;IAIpB,kDAAkD;IAClD,OAAO,CAAC,WAAW;IAoBnB,qDAAqD;IACrD,OAAO,CAAC,kBAAkB;IA6B1B,OAAO,CAAC,2BAA2B;cAWhB,MAAM,IAAI,cAAc;CAQ5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}

package/time-input.js

@@ -1,31 +1,31 @@
-var C = (i) => {
-  throw TypeError(i);
+var v = (n) => {
+  throw TypeError(n);
 };
-var v = (i, n, s) => n.has(i) || C("Cannot " + s);
-var w = (i, n, s) => (v(i, n, "read from private field"), s ? s.call(i) : n.get(i)), A = (i, n, s) => n.has(i) ? C("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(i) : n.set(i, s), p = (i, n, s, r) => (v(i, n, "write to private field"), r ? r.call(i, s) : n.set(i, s), s);
-import { __runInitializers as m, __esDecorate as _ } from "tslib";
-import { css as D, html as T, LitElement as S } from "lit";
-import { customElement as k, property as x, state as O } from "lit/decorators.js";
+var w = (n, i, s) => i.has(n) || v("Cannot " + s);
+var A = (n, i, s) => (w(n, i, "read from private field"), s ? s.call(n) : i.get(n)), y = (n, i, s) => i.has(n) ? v("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(n) : i.set(n, s), c = (n, i, s, l) => (w(n, i, "write to private field"), l ? l.call(n, s) : i.set(n, s), s);
+import { __runInitializers as p, __esDecorate as m } from "tslib";
+import { css as S, html as O, LitElement as k } from "lit";
+import { customElement as L, property as I, state as x } from "lit/decorators.js";
 import { ref as H } from "lit/directives/ref.js";
-import { SbbLanguageController as L } from "./core/controllers.js";
-import { findInput as R } from "./core/dom.js";
-import { EventEmitter as y, forwardEventToHost as I } from "./core/eventing.js";
+import { SbbLanguageController as R } from "./core/controllers.js";
+import { findInput as M } from "./core/dom.js";
+import { EventEmitter as D, forwardEventToHost as T } from "./core/eventing.js";
 import { i18nTimeInputChange as $ } from "./core/i18n.js";
-const M = D`:host{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:block}`, z = /[0-9.:,\-;_hH]/, G = /^([0-9]{1,2})([0-9]{2})$/, P = /^([0-9]{1,2})?[.:,\-;_hH]?([0-9]{1,2})?$/;
-let Q = (() => {
-  var o, l;
-  let i = [k("sbb-time-input")], n, s = [], r, c = S, d = [], E, b, g = [], f = [];
-  var h = (l = class extends c {
+const P = S`:host{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:block}`, z = /[0-9.:,\-;_hH]/, G = /^([0-9]{1,2})([0-9]{2})$/, U = /^([0-9]{1,2})?[.:,\-;_hH]?([0-9]{1,2})?$/;
+let Z = (() => {
+  var o, r;
+  let n = [L("sbb-time-input")], i, s = [], l, d = k, _ = [], E, b, g = [], f = [], C;
+  var h = (r = class extends d {
     constructor() {
       super(...arguments);
-      A(this, o);
-      this._input = (m(this, d), null), p(this, o, m(this, g, null)), this._didChange = (m(this, f), new y(this, h.events.didChange, {
+      y(this, o);
+      this._input = (p(this, _), null), c(this, o, p(this, g, null)), this._didChange = (p(this, f), new D(this, h.events.didChange, {
         bubbles: !0,
         cancelable: !0
-      })), this._validationChange = new y(this, h.events.validationChange, {
+      })), this._validationChange = new D(this, h.events.validationChange, {
         bubbles: !0,
         composed: !1
-      }), this._abortController = new AbortController(), this._language = new L(this);
+      }), this._abortController = new AbortController(), this._language = new R(this);
     }
     /** Reference of the native input connected to the datepicker. */
     set input(t) {
@@ -35,26 +35,13 @@ let Q = (() => {
       return this._input;
     }
     get _inputElement() {
-      return w(this, o);
+      return A(this, o);
     }
     set _inputElement(t) {
-      p(this, o, t);
+      c(this, o, t);
     }
-    connectedCallback() {
-      super.connectedCallback(), this._findInputElement(), this._inputElement && this._updateValue(this._inputElement.value);
-    }
-    disconnectedCallback() {
-      var t;
-      super.disconnectedCallback(), (t = this._abortController) == null || t.abort();
-    }
-    /** Gets the input value with the correct date format. */
-    // TODO: refactor this to be a get/set
-    getValueAsDate() {
-      var t;
-      return this._formatValueAsDate(this._parseInput((t = this._inputElement) == null ? void 0 : t.value));
-    }
-    /** Set the input value to the correctly formatted value. */
-    setValueAsDate(t) {
+    /** Formats the current input's value as date. */
+    set valueAsDate(t) {
       if (!t || !this._inputElement)
         return;
       const e = t instanceof Date ? t : new Date(t);
@@ -63,20 +50,32 @@ let Q = (() => {
         minutes: e.getMinutes()
       }), this._inputElement.dispatchEvent(new FocusEvent("blur", { composed: !0 }));
     }
+    get valueAsDate() {
+      var t;
+      return this._formatValueAsDate(this._parseInput((t = this._inputElement) == null ? void 0 : t.value)) ?? null;
+    }
+    connectedCallback() {
+      super.connectedCallback(), this._findInputElement(), this._inputElement && this._updateValue(this._inputElement.value);
+    }
+    disconnectedCallback() {
+      var t;
+      super.disconnectedCallback(), (t = this._abortController) == null || t.abort();
+    }
     _findInputElement() {
       const t = this._inputElement;
-      this._inputElement = R(this, this.input), t !== this._inputElement && this._registerInputElement();
+      this._inputElement = M(this, this.input), t !== this._inputElement && this._registerInputElement();
     }
     _registerInputElement() {
       var t;
-      (t = this._abortController) == null || t.abort(), this._inputElement && (this._abortController = new AbortController(), this._inputElement.toggleAttribute("data-sbb-time-input", !0), this._inputElement.type = "text", this._inputElement.inputMode = "numeric", this._inputElement.maxLength = 5, this._inputElement.placeholder || (this._inputElement.placeholder = "HH:MM"), this._inputElement.addEventListener("input", (e) => I(e, this), { signal: this._abortController.signal }), this._inputElement.addEventListener("keydown", (e) => this._preventCharInsert(e), { signal: this._abortController.signal }), this._inputElement.addEventListener("change", (e) => this._updateValueAndEmitChange(e), {
+      (t = this._abortController) == null || t.abort(), this._inputElement && (this._abortController = new AbortController(), this._inputElement.toggleAttribute("data-sbb-time-input", !0), this._inputElement.type = "text", this._inputElement.inputMode = "numeric", this._inputElement.maxLength = 5, this._inputElement.placeholder || (this._inputElement.placeholder = "HH:MM"), this._inputElement.addEventListener("input", (e) => T(e, this), { signal: this._abortController.signal }), this._inputElement.addEventListener("keydown", (e) => this._preventCharInsert(e), { signal: this._abortController.signal }), this._inputElement.addEventListener("change", (e) => this._updateValue(e.target.value), {
+        signal: this._abortController.signal,
+        capture: !0
+      }), this._inputElement.addEventListener("change", (e) => {
+        this._emitChange(e), this._updateAccessibilityMessage();
+      }, {
         signal: this._abortController.signal
       }));
     }
-    /** Applies the correct format to values and triggers event dispatch. */
-    _updateValueAndEmitChange(t) {
-      this._updateValue(t.target.value), this._emitChange(t), this._updateAccessibilityMessage();
-    }
     /**
      * Updates `value` and `valueAsDate`. The direct update on the `_inputElement` is required
      * to force the input change when the typed value is the same of the current one.
@@ -85,13 +84,13 @@ let Q = (() => {
       if (this._statusContainer && (this._statusContainer.innerText = ""), !this._inputElement)
         return;
       const e = this._parseInput(t), a = !!e && this._isTimeValid(e), u = !t || t.trim() === "" || a;
-      u && e && (this._inputElement.value = this._formatValue(e));
+      u && e && (Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set.call(this._inputElement, this._formatValue(e)), this._inputElement.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })));
       const V = !this._inputElement.hasAttribute("data-sbb-invalid");
       this._inputElement.toggleAttribute("data-sbb-invalid", !u), V !== u && this._validationChange.emit({ valid: u });
     }
     /** Emits the change event. */
     _emitChange(t) {
-      I(t, this), this._didChange.emit();
+      T(t, this), this._didChange.emit();
     }
     /** Returns the right format for the `value` property. */
     _formatValue(t) {
@@ -117,7 +116,7 @@ let Q = (() => {
       const a = e.match(G);
       if (a)
         return { hours: +a[1] || 0, minutes: +a[2] || 0 };
-      const u = e.match(P);
+      const u = e.match(U);
       return u ? { hours: +u[1] || 0, minutes: +u[2] || 0 } : null;
     }
     /**  Only allow typing numbers and separator keys. */
@@ -145,26 +144,28 @@ let Q = (() => {
       this._inputElement.hasAttribute("data-sbb-invalid") || (this._statusContainer.innerText = `${$[this._language.current]} ${(e = this._inputElement) == null ? void 0 : e.value}.`);
     }
     render() {
-      return T`
+      return O`
       <p
         role="status"
         ${H((t) => this._statusContainer = t)}
       ></p>
     `;
     }
-  }, o = new WeakMap(), r = l, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
-    E = [x()], b = [O()], _(l, null, E, { kind: "setter", name: "input", static: !1, private: !1, access: { has: (e) => "input" in e, set: (e, a) => {
+  }, o = new WeakMap(), l = r, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
+    E = [I()], b = [x()], C = [I({ attribute: !1 })], m(r, null, E, { kind: "setter", name: "input", static: !1, private: !1, access: { has: (e) => "input" in e, set: (e, a) => {
       e.input = a;
-    } }, metadata: t }, null, d), _(l, null, b, { kind: "accessor", name: "_inputElement", static: !1, private: !1, access: { has: (e) => "_inputElement" in e, get: (e) => e._inputElement, set: (e, a) => {
+    } }, metadata: t }, null, _), m(r, null, b, { kind: "accessor", name: "_inputElement", static: !1, private: !1, access: { has: (e) => "_inputElement" in e, get: (e) => e._inputElement, set: (e, a) => {
       e._inputElement = a;
-    } }, metadata: t }, g, f), _(null, n = { value: r }, i, { kind: "class", name: r.name, metadata: t }, null, s), h = r = n.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), l.styles = M, l.events = {
+    } }, metadata: t }, g, f), m(r, null, C, { kind: "setter", name: "valueAsDate", static: !1, private: !1, access: { has: (e) => "valueAsDate" in e, set: (e, a) => {
+      e.valueAsDate = a;
+    } }, metadata: t }, null, _), m(null, i = { value: l }, n, { kind: "class", name: l.name, metadata: t }, null, s), h = l = i.value, t && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), r.styles = P, r.events = {
     didChange: "didChange",
     validationChange: "validationChange"
-  }, m(r, s), l);
-  return h = r;
+  }, p(l, s), r);
+  return h = l;
 })();
 export {
-  Q as SbbTimeInputElement
+  Z as SbbTimeInputElement
 };

package/toast/toast.d.ts

@@ -47,10 +47,13 @@ export declare class SbbToastElement extends SbbToastElement_base {
      * If there are other opened toasts in the page, close them first.
      */
     open(): void;
+    private _isZeroAnimationDuration;
     /**
      * Close the toast.
      */
     close(): void;
+    private _handleClosing;
+    private _handleOpening;
     private _onClick;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/toast/toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/elements/toast/toast.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAYnE,OAAO,iCAAiC,CAAC;AAEzC,KAAK,wBAAwB,GAAG,KAAK,GAAG,QAAQ,CAAC;AACjD,KAAK,0BAA0B,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;AAChF,MAAM,MAAM,gBAAgB,GAAG,GAAG,wBAAwB,IAAI,0BAA0B,EAAE,CAAC;;AAK3F;;;;;;;;;;;;;GAaG;AACH,qBAGM,eAAgB,SAAQ,oBAA4D;IACxF,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACH,SAEgB,OAAO,EAAE,MAAM,CAAQ;IAEvC,6CAA6C;IAC7C,SAA6C,QAAQ,EAAE,gBAAgB,CAAmB;IAE1F,4CAA4C;IAC5C,SAEgB,WAAW,EAAE,OAAO,CAAS;IAE7C;;;OAGG;IACH,SAA4B,UAAU,EAAE,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAY;IAElF,OAAO,CAAC,aAAa,CAAC,CAAgC;IACtD,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,SAAS,CAAmC;IAEpD;;;OAGG;IACH,OAAO,KAAK,KAAK,GAUhB;IAED;;;OAGG;IACI,IAAI,IAAI,IAAI;IAYnB;;OAEG;IACI,KAAK,IAAI,IAAI;IAapB,OAAO,CAAC,QAAQ;IAQA,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;IAQ5C;;;;OAIG;IACH,OAAO,CAAC,oBAAoB;IAU5B,OAAO,CAAC,mBAAmB;IAyB3B,OAAO,CAAC,oBAAoB;IAmB5B;;OAEG;IACH,OAAO,CAAC,iBAAiB;cAQN,MAAM,IAAI,cAAc;CAiC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/elements/toast/toast.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAYnE,OAAO,iCAAiC,CAAC;AAEzC,KAAK,wBAAwB,GAAG,KAAK,GAAG,QAAQ,CAAC;AACjD,KAAK,0BAA0B,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;AAChF,MAAM,MAAM,gBAAgB,GAAG,GAAG,wBAAwB,IAAI,0BAA0B,EAAE,CAAC;;AAK3F;;;;;;;;;;;;;GAaG;AACH,qBAGM,eAAgB,SAAQ,oBAA4D;IACxF,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACH,SAEgB,OAAO,EAAE,MAAM,CAAQ;IAEvC,6CAA6C;IAC7C,SAA6C,QAAQ,EAAE,gBAAgB,CAAmB;IAE1F,4CAA4C;IAC5C,SAEgB,WAAW,EAAE,OAAO,CAAS;IAE7C;;;OAGG;IACH,SAA4B,UAAU,EAAE,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAY;IAElF,OAAO,CAAC,aAAa,CAAC,CAAgC;IACtD,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,SAAS,CAAmC;IAEpD;;;OAGG;IACH,OAAO,KAAK,KAAK,GAUhB;IAED;;;OAGG;IACI,IAAI,IAAI,IAAI;IAkBnB,OAAO,CAAC,wBAAwB;IAIhC;;OAEG;IACI,KAAK,IAAI,IAAI;IAkBpB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,QAAQ;IAQA,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;IAQ5C;;;;OAIG;IACH,OAAO,CAAC,oBAAoB;IAU5B,OAAO,CAAC,mBAAmB;IAyB3B,OAAO,CAAC,oBAAoB;IAS5B;;OAEG;IACH,OAAO,CAAC,iBAAiB;cAQN,MAAM,IAAI,cAAc;CAiC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}