@sbb-esta/lyne-elements-dev 4.7.0-dev.1773149675 → 4.7.0-dev.1773159918

package/tag/tag/tag.component.js

@@ -1,60 +1,60 @@
-var D = (a) => {
+var S = (a) => {
   throw TypeError(a);
 };
-var G = (a, s, r) => s.has(a) || D("Cannot " + r);
-var u = (a, s, r) => (G(a, s, "read from private field"), r ? r.call(a) : s.get(a)), v = (a, s, r) => s.has(a) ? D("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(a) : s.set(a, r), n = (a, s, r, b) => (G(a, s, "write to private field"), b ? b.call(a, r) : s.set(a, r), r);
-import { __esDecorate as m, __runInitializers as l } from "tslib";
-import { css as V, html as $ } from "lit";
-import { customElement as H, property as p } from "lit/decorators.js";
-import { SbbButtonLikeBaseElement as L } from "../../core/base-elements.js";
-import { forceType as F, omitEmptyConverter as O, getOverride as j } from "../../core/decorators.js";
-import { isLean as A } from "../../core/dom.js";
-import { SbbDisabledTabIndexActionMixin as M } from "../../core/mixins.js";
-import { boxSizingStyles as R } from "../../core/styles.js";
-import { SbbIconNameMixin as U } from "../../icon.js";
-const Y = V`:host{display:inline-block;outline:none!important;max-width:100%;--sbb-tag-border-radius: var(--sbb-border-radius-infinity);--sbb-tag-background-color: var(--sbb-background-color-1);--sbb-tag-border-color: var(--sbb-border-color-4-inverted);--sbb-tag-border-style: solid;--sbb-tag-border-width: var(--sbb-border-width-1x);--sbb-tag-text-color: var(--sbb-color-2);--sbb-tag-amount-color: var(--sbb-color-metal);--sbb-tag-amount-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));--sbb-tag-height: var(--sbb-size-element-xs);--sbb-tag-inset: 0;--sbb-tag-cursor: var(--sbb-cursor-pointer);--sbb-tag-content-shift: translateY(0);--sbb-tag-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-tag-animation-easing: var(--sbb-animation-easing);--sbb-tag-padding-inline: var(--sbb-spacing-fixed-5x);--sbb-tag-gap: var(--sbb-spacing-fixed-2x)}@media(forced-colors:active){:host{--sbb-tag-background-color: Canvas !important;--sbb-tag-text-color: ButtonText;--sbb-tag-amount-color: ButtonText;--sbb-tag-border-color: CanvasText;--sbb-tag-border-width: var(--sbb-border-width-2x)}}:host(:is(:state(checked),[state--checked])){--sbb-tag-border-color: var(--sbb-border-color-3);--sbb-tag-border-width: var(--sbb-border-width-2x)}@media(forced-colors:active){:host(:is(:state(checked),[state--checked])){--sbb-tag-border-color: Highlight !important;--sbb-tag-border-width: var(--sbb-border-width-4x)}}:host(:is(:disabled,[disabled-interactive])){--sbb-tag-text-color: var(--sbb-color-granite);--sbb-tag-text-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));--sbb-tag-amount-color: var(--sbb-tag-text-color);--sbb-tag-background-color: var(--sbb-background-color-3);--sbb-tag-border-color: var(--sbb-color-cement);--sbb-tag-border-color: light-dark(var(--sbb-color-cement), var(--sbb-color-smoke));--sbb-tag-border-style: dashed;--sbb-tag-cursor: unset;--sbb-tag-pointer-events: none}@media(forced-colors:active){:host(:is(:disabled,[disabled-interactive])){--sbb-tag-text-color: GrayText;--sbb-tag-amount-color: GrayText;--sbb-tag-border-color: GrayText}}:host(:is(:state(checked),[state--checked]):is(:disabled,[disabled-interactive])){--sbb-tag-border-color: var(--sbb-color-metal);--sbb-tag-border-color: light-dark(var(--sbb-color-metal), var(--sbb-color-cement));--sbb-tag-border-style: dashed}@media(any-hover:hover){:host(:hover:not(:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]))){--sbb-tag-background-color: var(--sbb-background-color-3);--sbb-tag-inset: calc(var(--sbb-border-width-2x) * -1);--sbb-tag-content-shift: translateY(calc(var(--sbb-border-width-1x) * -1))}}@media(any-hover:hover)and (forced-colors:active){:host(:hover:not(:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]))){--sbb-tag-border-color: Highlight}}:host(:is(:active,:is(:state(active),[state--active])):not(:disabled,[disabled-interactive])){--sbb-tag-background-color: var(--sbb-background-color-3);--sbb-tag-border-color: var(--sbb-color-iron);--sbb-tag-border-color: light-dark(var(--sbb-color-iron), var(--sbb-color-storm));--sbb-tag-border-width: var(--sbb-border-width-2x);--sbb-tag-text-color: var(--sbb-color-4)}@media(forced-colors:active){:host(:is(:active,:is(:state(active),[state--active])):not(:disabled,[disabled-interactive])){--sbb-tag-border-color: Highlight;--sbb-tag-text-color: ButtonText}}:host([size=s]){--sbb-tag-height: var(--sbb-size-element-xxxs);--sbb-tag-padding-inline: var(--sbb-spacing-fixed-3x)}.sbb-tag{--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700;position:relative;display:flex;align-items:center;height:var(--sbb-tag-height);max-width:100%;gap:var(--sbb-tag-gap);padding-inline:var(--sbb-tag-padding-inline);cursor:var(--sbb-tag-cursor);border-radius:var(--sbb-tag-border-radius);color:var(--sbb-tag-text-color);transition:color var(--sbb-tag-animation-duration) var(--sbb-tag-animation-easing);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;pointer-events:var(--sbb-tag-pointer-events, unset)}.sbb-tag:before{content:"";position:absolute;inset:var(--sbb-tag-inset);background-color:var(--sbb-tag-background-color);border:var(--sbb-tag-border-width) var(--sbb-tag-border-style) var(--sbb-tag-border-color);border-radius:var(--sbb-tag-border-radius);transition-duration:var(--sbb-tag-animation-duration);transition-timing-function:var(--sbb-tag-animation-easing);transition-property:inset,background-color,border-color,box-shadow}:host(:focus-visible) .sbb-tag:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}.sbb-tag__icon{display:flex;align-items:center;height:calc(var(--sbb-typo-line-height-text) * 1em);flex-shrink:0}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-tag__icon{display:none}.sbb-tag__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-tag__amount{--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);color:var(--sbb-tag-amount-color)}:host(:not(:is(:state(slotted-amount),[state--slotted-amount]),[amount])) .sbb-tag__amount{display:none}.sbb-tag--shift{transition:transform var(--sbb-tag-animation-duration) var(--sbb-tag-animation-easing);transform:var(--sbb-tag-content-shift);will-change:transform}`;
-let at = (() => {
-  var c, d, h, g, i;
-  let a = [H("sbb-tag")], s, r = [], b, f = U(M(L)), x, k = [], _ = [], y, w = [], z = [], S, E = [], C = [], T, I = [], B = [];
-  return i = class extends f {
+var B = (a, s, r) => s.has(a) || S("Cannot " + r);
+var u = (a, s, r) => (B(a, s, "read from private field"), r ? r.call(a) : s.get(a)), v = (a, s, r) => s.has(a) ? S("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(a) : s.set(a, r), b = (a, s, r, g) => (B(a, s, "write to private field"), g ? g.call(a, r) : s.set(a, r), r);
+import { __esDecorate as m, __runInitializers as n } from "tslib";
+import { css as G, html as F } from "lit";
+import { property as p } from "lit/decorators.js";
+import { SbbButtonLikeBaseElement as T } from "../../core/base-elements.js";
+import { forceType as E, omitEmptyConverter as V, getOverride as $ } from "../../core/decorators.js";
+import { isLean as D } from "../../core/dom.js";
+import { SbbDisabledTabIndexActionMixin as H } from "../../core/mixins.js";
+import { boxSizingStyles as L } from "../../core/styles.js";
+import { SbbIconNameMixin as O } from "../../icon.js";
+const j = G`:host{display:inline-block;outline:none!important;max-width:100%;--sbb-tag-border-radius: var(--sbb-border-radius-infinity);--sbb-tag-background-color: var(--sbb-background-color-1);--sbb-tag-border-color: var(--sbb-border-color-4-inverted);--sbb-tag-border-style: solid;--sbb-tag-border-width: var(--sbb-border-width-1x);--sbb-tag-text-color: var(--sbb-color-2);--sbb-tag-amount-color: var(--sbb-color-metal);--sbb-tag-amount-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));--sbb-tag-height: var(--sbb-size-element-xs);--sbb-tag-inset: 0;--sbb-tag-cursor: var(--sbb-cursor-pointer);--sbb-tag-content-shift: translateY(0);--sbb-tag-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-tag-animation-easing: var(--sbb-animation-easing);--sbb-tag-padding-inline: var(--sbb-spacing-fixed-5x);--sbb-tag-gap: var(--sbb-spacing-fixed-2x)}@media(forced-colors:active){:host{--sbb-tag-background-color: Canvas !important;--sbb-tag-text-color: ButtonText;--sbb-tag-amount-color: ButtonText;--sbb-tag-border-color: CanvasText;--sbb-tag-border-width: var(--sbb-border-width-2x)}}:host(:is(:state(checked),[state--checked])){--sbb-tag-border-color: var(--sbb-border-color-3);--sbb-tag-border-width: var(--sbb-border-width-2x)}@media(forced-colors:active){:host(:is(:state(checked),[state--checked])){--sbb-tag-border-color: Highlight !important;--sbb-tag-border-width: var(--sbb-border-width-4x)}}:host(:is(:disabled,[disabled-interactive])){--sbb-tag-text-color: var(--sbb-color-granite);--sbb-tag-text-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));--sbb-tag-amount-color: var(--sbb-tag-text-color);--sbb-tag-background-color: var(--sbb-background-color-3);--sbb-tag-border-color: var(--sbb-color-cement);--sbb-tag-border-color: light-dark(var(--sbb-color-cement), var(--sbb-color-smoke));--sbb-tag-border-style: dashed;--sbb-tag-cursor: unset;--sbb-tag-pointer-events: none}@media(forced-colors:active){:host(:is(:disabled,[disabled-interactive])){--sbb-tag-text-color: GrayText;--sbb-tag-amount-color: GrayText;--sbb-tag-border-color: GrayText}}:host(:is(:state(checked),[state--checked]):is(:disabled,[disabled-interactive])){--sbb-tag-border-color: var(--sbb-color-metal);--sbb-tag-border-color: light-dark(var(--sbb-color-metal), var(--sbb-color-cement));--sbb-tag-border-style: dashed}@media(any-hover:hover){:host(:hover:not(:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]))){--sbb-tag-background-color: var(--sbb-background-color-3);--sbb-tag-inset: calc(var(--sbb-border-width-2x) * -1);--sbb-tag-content-shift: translateY(calc(var(--sbb-border-width-1x) * -1))}}@media(any-hover:hover)and (forced-colors:active){:host(:hover:not(:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]))){--sbb-tag-border-color: Highlight}}:host(:is(:active,:is(:state(active),[state--active])):not(:disabled,[disabled-interactive])){--sbb-tag-background-color: var(--sbb-background-color-3);--sbb-tag-border-color: var(--sbb-color-iron);--sbb-tag-border-color: light-dark(var(--sbb-color-iron), var(--sbb-color-storm));--sbb-tag-border-width: var(--sbb-border-width-2x);--sbb-tag-text-color: var(--sbb-color-4)}@media(forced-colors:active){:host(:is(:active,:is(:state(active),[state--active])):not(:disabled,[disabled-interactive])){--sbb-tag-border-color: Highlight;--sbb-tag-text-color: ButtonText}}:host([size=s]){--sbb-tag-height: var(--sbb-size-element-xxxs);--sbb-tag-padding-inline: var(--sbb-spacing-fixed-3x)}.sbb-tag{--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700;position:relative;display:flex;align-items:center;height:var(--sbb-tag-height);max-width:100%;gap:var(--sbb-tag-gap);padding-inline:var(--sbb-tag-padding-inline);cursor:var(--sbb-tag-cursor);border-radius:var(--sbb-tag-border-radius);color:var(--sbb-tag-text-color);transition:color var(--sbb-tag-animation-duration) var(--sbb-tag-animation-easing);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;pointer-events:var(--sbb-tag-pointer-events, unset)}.sbb-tag:before{content:"";position:absolute;inset:var(--sbb-tag-inset);background-color:var(--sbb-tag-background-color);border:var(--sbb-tag-border-width) var(--sbb-tag-border-style) var(--sbb-tag-border-color);border-radius:var(--sbb-tag-border-radius);transition-duration:var(--sbb-tag-animation-duration);transition-timing-function:var(--sbb-tag-animation-easing);transition-property:inset,background-color,border-color,box-shadow}:host(:focus-visible) .sbb-tag:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}.sbb-tag__icon{display:flex;align-items:center;height:calc(var(--sbb-typo-line-height-text) * 1em);flex-shrink:0}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-tag__icon{display:none}.sbb-tag__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-tag__amount{--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);color:var(--sbb-tag-amount-color)}:host(:not(:is(:state(slotted-amount),[state--slotted-amount]),[amount])) .sbb-tag__amount{display:none}.sbb-tag--shift{transition:transform var(--sbb-tag-animation-duration) var(--sbb-tag-animation-easing);transform:var(--sbb-tag-content-shift);will-change:transform}`;
+let W = (() => {
+  var c, l, d, h, o;
+  let a = O(H(T)), s, r = [], g = [], f, x = [], k = [], _, y = [], w = [], z, C = [], I = [];
+  return o = class extends a {
     constructor() {
       super();
       v(this, c);
+      v(this, l);
       v(this, d);
       v(this, h);
-      v(this, g);
-      n(this, c, l(this, k, null)), n(this, d, (l(this, _), l(this, w, ""))), n(this, h, (l(this, z), l(this, E, !1))), n(this, g, (l(this, C), l(this, I, A() ? "s" : "m"))), this._group = (l(this, B), null), this.addEventListener?.("click", () => this._handleClick());
+      b(this, c, n(this, r, null)), b(this, l, (n(this, g), n(this, x, ""))), b(this, d, (n(this, k), n(this, y, !1))), b(this, h, (n(this, w), n(this, C, D() ? "s" : "m"))), this._group = (n(this, I), null), this.addEventListener?.("click", () => this._handleClick());
     }
     /** Value of the form element. */
     get value() {
       return u(this, c);
     }
     set value(e) {
-      n(this, c, e);
+      b(this, c, e);
     }
     /** Amount displayed inside the tag. */
     get amount() {
-      return u(this, d);
+      return u(this, l);
     }
     set amount(e) {
-      n(this, d, e);
+      b(this, l, e);
     }
     /** Whether the tag is checked. */
     get checked() {
-      return u(this, h);
+      return u(this, d);
     }
     set checked(e) {
-      n(this, h, e);
+      b(this, d, e);
     }
     /**
      * Tag size, either s or m.
      * @default 'm' / 's' (lean)
      */
     get size() {
-      return u(this, g);
+      return u(this, h);
     }
     set size(e) {
-      n(this, g, e);
+      b(this, h, e);
     }
     connectedCallback() {
       super.connectedCallback(), this._group = this.closest("sbb-tag-group");
@@ -75,7 +75,7 @@ let at = (() => {
     willUpdate(e) {
       super.willUpdate(e), e.has("checked") && (this.internals.ariaPressed = `${this.checked}`, this.toggleState("checked", this.checked), this.updateFormValue());
       const t = this.closest?.("sbb-tag-group");
-      t && !t.multiple && e.has("checked") && this.checked && t?.tags.filter((o) => o !== this).forEach((o) => o.checked = !1);
+      t && !t.multiple && e.has("checked") && this.checked && t?.tags.filter((i) => i !== this).forEach((i) => i.checked = !1);
     }
     /**
      * @internal
@@ -96,7 +96,7 @@ let at = (() => {
       return `${this.checked}`;
     }
     renderTemplate() {
-      return $`
+      return F`
       <span class="sbb-tag__icon sbb-tag--shift"> ${this.renderIconSlot()} </span>
       <span class="sbb-tag__text sbb-tag--shift">
         <slot></slot>
@@ -106,23 +106,23 @@ let at = (() => {
       </span>
     `;
     }
-  }, c = new WeakMap(), d = new WeakMap(), h = new WeakMap(), g = new WeakMap(), b = i, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
-    x = [p()], y = [F(), p({ reflect: !0, converter: O })], S = [F(), p({ reflect: !1, type: Boolean })], T = [p({ reflect: !0 }), j((t, o) => t._group?.size ?? o)], m(i, null, x, { kind: "accessor", name: "value", static: !1, private: !1, access: { has: (t) => "value" in t, get: (t) => t.value, set: (t, o) => {
-      t.value = o;
-    } }, metadata: e }, k, _), m(i, null, y, { kind: "accessor", name: "amount", static: !1, private: !1, access: { has: (t) => "amount" in t, get: (t) => t.amount, set: (t, o) => {
-      t.amount = o;
-    } }, metadata: e }, w, z), m(i, null, S, { kind: "accessor", name: "checked", static: !1, private: !1, access: { has: (t) => "checked" in t, get: (t) => t.checked, set: (t, o) => {
-      t.checked = o;
-    } }, metadata: e }, E, C), m(i, null, T, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, o) => {
-      t.size = o;
-    } }, metadata: e }, I, B), m(null, s = { value: b }, a, { kind: "class", name: b.name, metadata: e }, null, r), b = s.value, e && Object.defineProperty(b, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), i.styles = [R, Y], i.events = {
+  }, c = new WeakMap(), l = new WeakMap(), d = new WeakMap(), h = new WeakMap(), (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
+    s = [p()], f = [E(), p({ reflect: !0, converter: V })], _ = [E(), p({ reflect: !1, type: Boolean })], z = [p({ reflect: !0 }), $((t, i) => t._group?.size ?? i)], m(o, null, s, { kind: "accessor", name: "value", static: !1, private: !1, access: { has: (t) => "value" in t, get: (t) => t.value, set: (t, i) => {
+      t.value = i;
+    } }, metadata: e }, r, g), m(o, null, f, { kind: "accessor", name: "amount", static: !1, private: !1, access: { has: (t) => "amount" in t, get: (t) => t.amount, set: (t, i) => {
+      t.amount = i;
+    } }, metadata: e }, x, k), m(o, null, _, { kind: "accessor", name: "checked", static: !1, private: !1, access: { has: (t) => "checked" in t, get: (t) => t.checked, set: (t, i) => {
+      t.checked = i;
+    } }, metadata: e }, y, w), m(o, null, z, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, i) => {
+      t.size = i;
+    } }, metadata: e }, C, I), e && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), o.elementName = "sbb-tag", o.styles = [L, j], o.events = {
     input: "input",
     didChange: "didChange",
     change: "change"
-  }, l(b, r), b;
+  }, o;
 })();
 export {
-  at as SbbTagElement
+  W as SbbTagElement
 };

package/tag/tag-group/tag-group.component.js

@@ -1,35 +1,36 @@
-var w = (e) => {
+var S = (e) => {
   throw TypeError(e);
 };
-var I = (e, i, a) => i.has(e) || w("Cannot " + a);
-var d = (e, i, a) => (I(e, i, "read from private field"), a ? a.call(e) : i.get(e)), _ = (e, i, a) => i.has(e) ? w("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(e) : i.set(e, a), h = (e, i, a, c) => (I(e, i, "write to private field"), c ? c.call(e, a) : i.set(e, a), a);
-import { __runInitializers as o, __esDecorate as m } from "tslib";
-import { css as q, LitElement as N, isServer as D, html as V } from "lit";
-import { customElement as j, property as f } from "lit/decorators.js";
-import { forceType as O } from "../../core/decorators.js";
-import { isLean as C, setOrRemoveAttribute as M } from "../../core/dom.js";
-import { SbbDisabledMixin as B, SbbNamedSlotListMixin as G } from "../../core/mixins.js";
-import { boxSizingStyles as J } from "../../core/styles.js";
-const R = q`:host{display:block}.sbb-tag-group__list{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:wrap;gap:var(--sbb-spacing-fixed-3x)}.sbb-tag-group__list>:is(li,span){display:flex;max-width:100%}`;
-let P = (() => {
-  var u, n, b, r;
-  let e = [j("sbb-tag-group")], i, a = [], c, y = B(G(N)), g = [], A, v = [], z = [], L, x = [], S = [], k, E = [], T = [], U;
-  return r = class extends y {
+var U = (e, i, l) => i.has(e) || S("Cannot " + l);
+var p = (e, i, l) => (U(e, i, "read from private field"), l ? l.call(e) : i.get(e)), d = (e, i, l) => i.has(e) ? S("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(e) : i.set(e, l), c = (e, i, l, b) => (U(e, i, "write to private field"), b ? b.call(e, l) : i.set(e, l), l);
+import { __runInitializers as h, __esDecorate as f } from "tslib";
+import { css as N, isServer as w, html as O } from "lit";
+import { property as y } from "lit/decorators.js";
+import { SbbElement as q } from "../../core/base-elements.js";
+import { forceType as I } from "../../core/decorators.js";
+import { isLean as E, setOrRemoveAttribute as V } from "../../core/dom.js";
+import { SbbDisabledMixin as j, SbbNamedSlotListMixin as C } from "../../core/mixins.js";
+import { boxSizingStyles as D } from "../../core/styles.js";
+const M = N`:host{display:block}.sbb-tag-group__list{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:wrap;gap:var(--sbb-spacing-fixed-3x)}.sbb-tag-group__list>:is(li,span){display:flex;max-width:100%}`;
+let X = (() => {
+  var o, u, n, r;
+  let e = j(C(q)), i = [], l, b = [], _ = [], g, A = [], z = [], v, L = [], x = [], k;
+  return r = class extends e {
     constructor() {
       super(...arguments);
-      _(this, u);
-      _(this, n);
-      _(this, b);
-      this.listChildLocalNames = (o(this, g), ["sbb-tag", "div"]), h(this, u, o(this, v, "")), h(this, n, (o(this, z), o(this, x, !1))), h(this, b, (o(this, S), o(this, E, C() ? "s" : "m"))), this._value = (o(this, T), null);
+      d(this, o);
+      d(this, u);
+      d(this, n);
+      this.listChildLocalNames = (h(this, i), ["sbb-tag", "div"]), c(this, o, h(this, b, "")), c(this, u, (h(this, _), h(this, A, !1))), c(this, n, (h(this, z), h(this, L, E() ? "s" : "m"))), this._value = (h(this, x), null);
     }
     /**
      * This will be forwarded as aria-label to the inner list.
      */
     get listAccessibilityLabel() {
-      return d(this, u);
+      return p(this, o);
     }
     set listAccessibilityLabel(t) {
-      h(this, u, t);
+      c(this, o, t);
     }
     /**
      * If set multiple to false, the selection is exclusive and the value is a string (or null).
@@ -38,20 +39,20 @@ let P = (() => {
      * Changing multiple during run time is not supported.
      */
     get multiple() {
-      return d(this, n);
+      return p(this, u);
     }
     set multiple(t) {
-      h(this, n, t);
+      c(this, u, t);
     }
     /**
      * Tag group size, either s or m.
      * @default 'm' / 's' (lean)
      */
     get size() {
-      return d(this, b);
+      return p(this, n);
     }
     set size(t) {
-      h(this, b, t);
+      c(this, n, t);
     }
     /**
      * Value of the sbb-tag-group.
@@ -59,39 +60,39 @@ let P = (() => {
      * If set multiple to true, the value is an array.
      */
     set value(t) {
-      if (D || !this.hasUpdated) {
+      if (w || !this.hasUpdated) {
         this._value = t;
         return;
       }
       this._applyValueToTags(t);
     }
     get value() {
-      return D || !this.hasUpdated ? this._value : this.multiple ? this.tags.filter((t) => t.checked).map((t) => t.value) : this.tags.find((t) => t.checked)?.value ?? null;
+      return w || !this.hasUpdated ? this._value : this.multiple ? this.tags.filter((t) => t.checked).map((t) => t.value) : this.tags.find((t) => t.checked)?.value ?? null;
     }
     /** The child instances of sbb-tag as an array. */
     get tags() {
       return Array.from(this.querySelectorAll?.("sbb-tag") ?? []);
     }
     willUpdate(t) {
-      super.willUpdate(t), t.has("value") && !this.hasUpdated && this._value && this._applyValueToTags(this.value), t.has("size") && this.tags.forEach((s) => s.requestUpdate?.("size")), t.has("disabled") && this.tags.forEach((s) => s.requestUpdate?.("disabled")), (t.has("listChildren") || t.has("multiple")) && !this.multiple && this.tags.filter((s) => s.checked).slice(1).forEach((s) => s.checked = !1), M(this, "role", t.has("listAccessibilityLabel") && this.listAccessibilityLabel ? null : "group");
+      super.willUpdate(t), t.has("value") && !this.hasUpdated && this._value && this._applyValueToTags(this.value), t.has("size") && this.tags.forEach((s) => s.requestUpdate?.("size")), t.has("disabled") && this.tags.forEach((s) => s.requestUpdate?.("disabled")), (t.has("listChildren") || t.has("multiple")) && !this.multiple && this.tags.filter((s) => s.checked).slice(1).forEach((s) => s.checked = !1), V(this, "role", t.has("listAccessibilityLabel") && this.listAccessibilityLabel ? null : "group");
     }
     _applyValueToTags(t) {
       const s = this.tags;
       if (t === null)
-        s.forEach((l) => l.checked = !1);
+        s.forEach((a) => a.checked = !1);
       else if (this.multiple) {
-        if (!Array.isArray(t) && s.every((p) => p.value !== t))
+        if (!Array.isArray(t) && s.every((m) => m.value !== t))
           try {
             t = JSON.parse(t);
           } catch {
           }
-        const l = Array.isArray(t) ? t : [t];
-        s.forEach((p) => p.checked = l.includes(p.value));
+        const a = Array.isArray(t) ? t : [t];
+        s.forEach((m) => m.checked = a.includes(m.value));
       } else
-        Array.isArray(t) || s.forEach((l) => l.checked = l.value === t);
+        Array.isArray(t) || s.forEach((a) => a.checked = a.value === t);
     }
     render() {
-      return V`
+      return O`
       <div class="sbb-tag-group">
         ${this.renderList({
         class: "sbb-tag-group__list",
@@ -100,19 +101,19 @@ let P = (() => {
       </div>
     `;
     }
-  }, u = new WeakMap(), n = new WeakMap(), b = new WeakMap(), c = r, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(y[Symbol.metadata] ?? null) : void 0;
-    A = [O(), f({ attribute: "list-accessibility-label" })], L = [O(), f({ type: Boolean })], k = [f({ reflect: !0 })], U = [f()], m(r, null, A, { kind: "accessor", name: "listAccessibilityLabel", static: !1, private: !1, access: { has: (s) => "listAccessibilityLabel" in s, get: (s) => s.listAccessibilityLabel, set: (s, l) => {
-      s.listAccessibilityLabel = l;
-    } }, metadata: t }, v, z), m(r, null, L, { kind: "accessor", name: "multiple", static: !1, private: !1, access: { has: (s) => "multiple" in s, get: (s) => s.multiple, set: (s, l) => {
-      s.multiple = l;
-    } }, metadata: t }, x, S), m(r, null, k, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (s) => "size" in s, get: (s) => s.size, set: (s, l) => {
-      s.size = l;
-    } }, metadata: t }, E, T), m(r, null, U, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (s) => "value" in s, set: (s, l) => {
-      s.value = l;
-    } }, metadata: t }, null, g), m(null, i = { value: c }, e, { kind: "class", name: c.name, metadata: t }, null, a), c = i.value, t && Object.defineProperty(c, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), r.styles = [J, R], o(c, a), c;
+  }, o = new WeakMap(), u = new WeakMap(), n = new WeakMap(), (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(e[Symbol.metadata] ?? null) : void 0;
+    l = [I(), y({ attribute: "list-accessibility-label" })], g = [I(), y({ type: Boolean })], v = [y({ reflect: !0 })], k = [y()], f(r, null, l, { kind: "accessor", name: "listAccessibilityLabel", static: !1, private: !1, access: { has: (s) => "listAccessibilityLabel" in s, get: (s) => s.listAccessibilityLabel, set: (s, a) => {
+      s.listAccessibilityLabel = a;
+    } }, metadata: t }, b, _), f(r, null, g, { kind: "accessor", name: "multiple", static: !1, private: !1, access: { has: (s) => "multiple" in s, get: (s) => s.multiple, set: (s, a) => {
+      s.multiple = a;
+    } }, metadata: t }, A, z), f(r, null, v, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (s) => "size" in s, get: (s) => s.size, set: (s, a) => {
+      s.size = a;
+    } }, metadata: t }, L, x), f(r, null, k, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (s) => "value" in s, set: (s, a) => {
+      s.value = a;
+    } }, metadata: t }, null, i), t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), r.elementName = "sbb-tag-group", r.styles = [D, M], r;
 })();
 export {
-  P as SbbTagGroupElement
+  X as SbbTagGroupElement
 };

package/tag/tag-group.js

@@ -1,4 +1,7 @@
-import { SbbTagGroupElement as r } from "./tag-group/tag-group.component.js";
+import { SbbTagGroupElement as e } from "./tag-group/tag-group.component.js";
+e.define();
+console.warn(`The entrypoint '@sbb-esta/elements/tag/tag-group.js' has been deprecated.
+Use either '@sbb-esta/elements/tag.js' or '@sbb-esta/elements/tag.pure.js' instead.`);
 export {
-  r as SbbTagGroupElement
+  e as SbbTagGroupElement
 };

package/tag/tag.js

@@ -1,4 +1,7 @@
-import { SbbTagElement as m } from "./tag/tag.component.js";
+import { SbbTagElement as e } from "./tag/tag.component.js";
+e.define();
+console.warn(`The entrypoint '@sbb-esta/elements/tag/tag.js' has been deprecated.
+Use either '@sbb-esta/elements/tag.js' or '@sbb-esta/elements/tag.pure.js' instead.`);
 export {
-  m as SbbTagElement
+  e as SbbTagElement
 };

package/tag.js

@@ -1,6 +1,8 @@
-import { SbbTagElement as r } from "./tag/tag/tag.component.js";
-import { SbbTagGroupElement as m } from "./tag/tag-group/tag-group.component.js";
+import { SbbTagGroupElement as e } from "./tag/tag-group/tag-group.component.js";
+import { SbbTagElement as m } from "./tag/tag/tag.component.js";
+m.define();
+e.define();
 export {
-  r as SbbTagElement,
-  m as SbbTagGroupElement
+  m as SbbTagElement,
+  e as SbbTagGroupElement
 };

package/tag.pure.js

@@ -0,0 +1,6 @@
+import { SbbTagGroupElement as r } from "./tag/tag-group/tag-group.component.js";
+import { SbbTagElement as m } from "./tag/tag/tag.component.js";
+export {
+  m as SbbTagElement,
+  r as SbbTagGroupElement
+};

package/teaser/teaser.component.js

@@ -1,59 +1,59 @@
-var h = (e) => {
+var c = (e) => {
   throw TypeError(e);
 };
-var u = (e, s, a) => s.has(e) || h("Cannot " + a);
-var g = (e, s, a) => (u(e, s, "read from private field"), a ? a.call(e) : s.get(e)), v = (e, s, a) => s.has(e) ? h("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, a), _ = (e, s, a, i) => (u(e, s, "write to private field"), i ? i.call(e, a) : s.set(e, a), a);
-import { __esDecorate as x, __runInitializers as b } from "tslib";
-import { customElement as y, property as w } from "lit/decorators.js";
-import { html as c } from "lit/static-html.js";
-import { SbbLinkBaseElement as k } from "../core/base-elements.js";
-import { boxSizingStyles as S } from "../core/styles.js";
-import { css as z } from "lit";
+var d = (e, s, r) => s.has(e) || c("Cannot " + r);
+var m = (e, s, r) => (d(e, s, "read from private field"), r ? r.call(e) : s.get(e)), p = (e, s, r) => s.has(e) ? c("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, r), f = (e, s, r, n) => (d(e, s, "write to private field"), n ? n.call(e, r) : s.set(e, r), r);
+import { __esDecorate as g, __runInitializers as h } from "tslib";
+import { property as u } from "lit/decorators.js";
+import { html as b } from "lit/static-html.js";
+import { SbbLinkBaseElement as v } from "../core/base-elements.js";
+import { boxSizingStyles as _ } from "../core/styles.js";
+import { css as x } from "lit";
 import "../screen-reader-only.js";
-const E = z`@charset "UTF-8";:host{display:inline-block;outline:none!important;--sbb-teaser-scale-hover: 1.02;--sbb-teaser-description-color: var(--sbb-color-granite);--sbb-teaser-description-color: light-dark(var(--sbb-color-granite), var(--sbb-color-silver));--sbb-teaser-flex-direction: row;--sbb-teaser-align-items: center;--sbb-teaser-gap: var(--sbb-spacing-fixed-4x);--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)}@media(any-hover:hover){:host(:hover){--sbb-teaser-scale: var(--sbb-teaser-scale-hover)}}.sbb-teaser__wrapper{display:flex;position:relative;cursor:var(--sbb-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;inset:0}.sbb-teaser:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-border-radius)}@media(forced-colors:active){.sbb-teaser:focus-visible{outline-offset:calc(2 * var(--sbb-focus-outline-offset))}}@media(forced-colors:active){.sbb-teaser:before{content:"";position:absolute;inset:calc(-1 * var(--sbb-focus-outline-offset));pointer-events:none;border-radius:calc(var(--sbb-teaser-border-radius) + var(--sbb-focus-outline-offset));border:var(--sbb-border-width-1x) solid CanvasText}}.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{--sbb-text-font-size: var(--sbb-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);color:var(--sbb-teaser-description-color);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-box-shadow-level-9-hard)}}.sbb-teaser__description{display:inline-block;margin:0;padding:0}::slotted(sbb-chip-label){display:block;max-width:fit-content;margin-block-end:var(--sbb-spacing-fixed-1x)}::slotted(sbb-title){margin-block:0}`;
-let O = (() => {
-  var l, n;
-  let e = [y("sbb-teaser")], s, a = [], i, d = k, m, p = [], f = [];
-  return n = class extends d {
+const y = x`@charset "UTF-8";:host{display:inline-block;outline:none!important;--sbb-teaser-scale-hover: 1.02;--sbb-teaser-description-color: var(--sbb-color-granite);--sbb-teaser-description-color: light-dark(var(--sbb-color-granite), var(--sbb-color-silver));--sbb-teaser-flex-direction: row;--sbb-teaser-align-items: center;--sbb-teaser-gap: var(--sbb-spacing-fixed-4x);--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)}@media(any-hover:hover){:host(:hover){--sbb-teaser-scale: var(--sbb-teaser-scale-hover)}}.sbb-teaser__wrapper{display:flex;position:relative;cursor:var(--sbb-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;inset:0}.sbb-teaser:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-border-radius)}@media(forced-colors:active){.sbb-teaser:focus-visible{outline-offset:calc(2 * var(--sbb-focus-outline-offset))}}@media(forced-colors:active){.sbb-teaser:before{content:"";position:absolute;inset:calc(-1 * var(--sbb-focus-outline-offset));pointer-events:none;border-radius:calc(var(--sbb-teaser-border-radius) + var(--sbb-focus-outline-offset));border:var(--sbb-border-width-1x) solid CanvasText}}.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{--sbb-text-font-size: var(--sbb-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);color:var(--sbb-teaser-description-color);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-box-shadow-level-9-hard)}}.sbb-teaser__description{display:inline-block;margin:0;padding:0}::slotted(sbb-chip-label){display:block;max-width:fit-content;margin-block-end:var(--sbb-spacing-fixed-1x)}::slotted(sbb-title){margin-block:0}`;
+let E = (() => {
+  var l, i;
+  let e = v, s, r = [], n = [];
+  return i = class extends e {
     constructor() {
       super(...arguments);
-      v(this, l, b(this, p, "after-centered"));
-      b(this, f);
+      p(this, l, h(this, r, "after-centered"));
+      h(this, n);
     }
     /** Teaser variant - define the position and the alignment of the text block. */
     get alignment() {
-      return g(this, l);
+      return m(this, l);
     }
-    set alignment(r) {
-      _(this, l, r);
+    set alignment(a) {
+      f(this, l, a);
     }
     _handleSlotchange() {
-      const r = Array.from(this.children).find((o) => o.localName === "sbb-chip-label");
-      r && (r.slot = "chip");
+      const a = Array.from(this.children).find((o) => o.localName === "sbb-chip-label");
+      a && (a.slot = "chip");
       const t = Array.from(this.children).find((o) => o.localName === "sbb-title");
       t && (t.slot = "title");
     }
-    _configureChip(r) {
-      const t = r.target.assignedElements().find((o) => o.localName === "sbb-chip-label");
+    _configureChip(a) {
+      const t = a.target.assignedElements().find((o) => o.localName === "sbb-chip-label");
       t && (customElements.upgrade(t), t.color = "charcoal", t.size = "xxs");
     }
-    _configureTitle(r) {
-      const t = r.target.assignedElements().find((o) => o.localName === "sbb-title");
+    _configureTitle(a) {
+      const t = a.target.assignedElements().find((o) => o.localName === "sbb-title");
       t && (customElements.upgrade(t), t.visualLevel = "5");
     }
     render() {
-      return c`
+      return b`
       <div class="sbb-teaser__wrapper">
         ${this.renderLink(
         // For SEO, we add the accessibility hidden as hidden content of the link
-        c`<sbb-screen-reader-only>${this.accessibilityLabel}</sbb-screen-reader-only>`
+        b`<sbb-screen-reader-only>${this.accessibilityLabel}</sbb-screen-reader-only>`
       )}
         ${this.renderContent()}
       </div>
     `;
     }
     renderContent() {
-      return c`
+      return b`
       <span class="sbb-teaser__container">
         <span class="sbb-teaser__image-wrapper">
           <slot name="image"></slot>
@@ -68,13 +68,13 @@ let O = (() => {
       </span>
     `;
     }
-  }, l = new WeakMap(), i = n, (() => {
-    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
-    m = [w({ reflect: !0 })], x(n, null, m, { kind: "accessor", name: "alignment", static: !1, private: !1, access: { has: (t) => "alignment" in t, get: (t) => t.alignment, set: (t, o) => {
+  }, l = new WeakMap(), (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(e[Symbol.metadata] ?? null) : void 0;
+    s = [u({ reflect: !0 })], g(i, null, s, { kind: "accessor", name: "alignment", static: !1, private: !1, access: { has: (t) => "alignment" in t, get: (t) => t.alignment, set: (t, o) => {
       t.alignment = o;
-    } }, metadata: r }, p, f), x(null, s = { value: i }, e, { kind: "class", name: i.name, metadata: r }, null, a), i = s.value, r && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
-  })(), n.styles = [S, E], b(i, a), i;
+    } }, metadata: a }, r, n), a && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+  })(), i.elementName = "sbb-teaser", i.styles = [_, y], i;
 })();
 export {
-  O as SbbTeaserElement
+  E as SbbTeaserElement
 };

package/teaser-hero/teaser-hero.component.js

@@ -1,38 +1,38 @@
-var m = (e) => {
+var l = (e) => {
   throw TypeError(e);
 };
-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)), v = (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), u = (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 r } from "tslib";
-import { css as k } from "lit";
-import { customElement as y, property as x } from "lit/decorators.js";
-import { html as C } from "lit/static-html.js";
-import { SbbLinkBaseElement as w } from "../core/base-elements.js";
-import { forceType as z, omitEmptyConverter as S } from "../core/decorators.js";
-import { boxSizingStyles as E } from "../core/styles.js";
+var b = (e, t, n) => t.has(e) || l("Cannot " + n);
+var p = (e, t, n) => (b(e, t, "read from private field"), n ? n.call(e) : t.get(e)), h = (e, t, n) => t.has(e) ? l("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, n), c = (e, t, n, s) => (b(e, t, "write to private field"), s ? s.call(e, n) : t.set(e, n), n);
+import { __esDecorate as d, __runInitializers as m } from "tslib";
+import { css as v } from "lit";
+import { property as u } from "lit/decorators.js";
+import { html as f } from "lit/static-html.js";
+import { SbbLinkBaseElement as y } from "../core/base-elements.js";
+import { forceType as k, omitEmptyConverter as _ } from "../core/decorators.js";
+import { boxSizingStyles as x } from "../core/styles.js";
 import "../link/block-link-static.js";
-const T = k`: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-heading);--sbb-panel-font-size: var(--sbb-typo-scale-1-5x);--sbb-panel-color: var(--sbb-color-1-negative);--sbb-panel-background-color: color-mix(in srgb, var(--sbb-color-primary) 90%, transparent);--sbb-panel-background-color-hover: var(--sbb-color-primary);--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:64rem){: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)}}::slotted([slot=image]){width:100%}.sbb-teaser-hero{position:relative;display:flex;min-height:var(--sbb-panel-height);text-decoration:none}.sbb-teaser-hero:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}.sbb-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(:is(:state(slotted),[state--slotted]),:is(:state(slotted-link-content),[state--slotted-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-heading);color:var(--sbb-panel-color);-webkit-hyphens:auto;hyphens:auto;display:inline;margin:0;padding:0}:host(:not([href])) .sbb-teaser-hero__panel-link{display:none}`;
-let P = (() => {
-  var o, s;
-  let e = [y("sbb-teaser-hero")], t, a = [], n, b = w, p, c = [], h = [];
-  return s = class extends b {
+const C = v`: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-heading);--sbb-panel-font-size: var(--sbb-typo-scale-1-5x);--sbb-panel-color: var(--sbb-color-1-negative);--sbb-panel-background-color: color-mix(in srgb, var(--sbb-color-primary) 90%, transparent);--sbb-panel-background-color-hover: var(--sbb-color-primary);--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:64rem){: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)}}::slotted([slot=image]){width:100%}.sbb-teaser-hero{position:relative;display:flex;min-height:var(--sbb-panel-height);text-decoration:none}.sbb-teaser-hero:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}.sbb-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(:is(:state(slotted),[state--slotted]),:is(:state(slotted-link-content),[state--slotted-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-heading);color:var(--sbb-panel-color);-webkit-hyphens:auto;hyphens:auto;display:inline;margin:0;padding:0}:host(:not([href])) .sbb-teaser-hero__panel-link{display:none}`;
+let D = (() => {
+  var o, a;
+  let e = y, t, n = [], s = [];
+  return a = class extends e {
     constructor() {
       super(...arguments);
-      v(this, o, r(this, c, ""));
-      r(this, h);
+      h(this, o, m(this, n, ""));
+      m(this, s);
     }
     /** Panel link text. */
     get linkContent() {
-      return d(this, o);
+      return p(this, o);
     }
     set linkContent(i) {
-      u(this, o, i);
+      c(this, o, i);
     }
     _imageSlotChanged() {
       Array.from(this.querySelectorAll("sbb-chip-label")).forEach((i) => i.color = "charcoal");
     }
     renderTemplate() {
-      return C`
+      return f`
       <span class="sbb-teaser-hero__panel">
         <p class="sbb-teaser-hero__panel-text">
           <slot></slot>
@@ -50,13 +50,13 @@ let P = (() => {
       <slot name="image" @slotchange=${this._imageSlotChanged}></slot>
     `;
     }
-  }, o = new WeakMap(), n = s, (() => {
-    const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
-    p = [z(), x({ attribute: "link-content", reflect: !0, converter: S })], f(s, null, p, { kind: "accessor", name: "linkContent", static: !1, private: !1, access: { has: (l) => "linkContent" in l, get: (l) => l.linkContent, set: (l, _) => {
-      l.linkContent = _;
-    } }, metadata: i }, c, h), f(null, t = { value: n }, e, { kind: "class", name: n.name, metadata: i }, null, a), n = t.value, i && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
-  })(), s.styles = [E, T], r(n, a), n;
+  }, o = new WeakMap(), (() => {
+    const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(e[Symbol.metadata] ?? null) : void 0;
+    t = [k(), u({ attribute: "link-content", reflect: !0, converter: _ })], d(a, null, t, { kind: "accessor", name: "linkContent", static: !1, private: !1, access: { has: (r) => "linkContent" in r, get: (r) => r.linkContent, set: (r, g) => {
+      r.linkContent = g;
+    } }, metadata: i }, n, s), i && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
+  })(), a.elementName = "sbb-teaser-hero", a.styles = [x, C], a;
 })();
 export {
-  P as SbbTeaserHeroElement
+  D as SbbTeaserHeroElement
 };

package/teaser-hero.js

@@ -1,4 +1,5 @@
-import { SbbTeaserHeroElement as o } from "./teaser-hero/teaser-hero.component.js";
+import { SbbTeaserHeroElement as e } from "./teaser-hero/teaser-hero.component.js";
+e.define();
 export {
-  o as SbbTeaserHeroElement
+  e as SbbTeaserHeroElement
 };

package/teaser-hero.pure.js

@@ -0,0 +1,4 @@
+import { SbbTeaserHeroElement as o } from "./teaser-hero/teaser-hero.component.js";
+export {
+  o as SbbTeaserHeroElement
+};