@sbb-esta/lyne-elements 4.6.0 → 4.8.0

package/tabs/tab-nav-bar/tab-nav-bar.component.js

@@ -1,66 +1,2 @@
-var u = (e) => {
-  throw TypeError(e);
-};
-var _ = (e, s, i) => s.has(e) || u("Cannot " + i);
-var p = (e, s, i) => (_(e, s, "read from private field"), i ? i.call(e) : s.get(e)), f = (e, s, i) => s.has(e) ? u("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, i), o = (e, s, i, l) => (_(e, s, "write to private field"), l ? l.call(e, i) : s.set(e, i), i);
-import { __runInitializers as m, __esDecorate as z } from "tslib";
-import { ResizeController as E } from "@lit-labs/observers/resize-controller.js";
-import { css as v, LitElement as y } from "lit";
-import { customElement as S, property as C } from "lit/decorators.js";
-import { isLean as L } from "../../core/dom/lean-context.js";
-import { SbbNamedSlotListMixin as x, SbbElementInternalsMixin as w } from "../../core/mixins.js";
-import { boxSizingStyles as O } from "../../core/styles.js";
-import { tabLabelCommonStyles as R, tabGroupCommonStyles as k } from "../common.js";
-const I = v`:host{margin-block-end:var(--sbb-tab-group-content-gap)}.sbb-tab-nav-bar{list-style:none;margin:0;padding:0;font-size:inherit}`;
-let q = (() => {
-  var a, r;
-  let e = [S("sbb-tab-nav-bar")], s, i = [], l, h = x(w(y)), b, c = [], d = [];
-  return r = class extends h {
-    constructor() {
-      super(...arguments);
-      f(this, a);
-      this.listChildLocalNames = ["a"], o(this, a, m(this, c, L() ? "s" : "l")), this._resizeController = (m(this, d), new E(this, {
-        target: null,
-        callback: () => this._onTabGroupElementResize()
-      })), this._listElement = null;
-    }
-    /**
-     * Size variant, either s, l or xl.
-     * @default 'l' / 's' (lean)
-     */
-    get size() {
-      return p(this, a);
-    }
-    set size(t) {
-      o(this, a, t);
-    }
-    _onTabGroupElementResize() {
-      this.listChildren.forEach((t) => {
-        t.assignedSlot?.parentElement?.toggleAttribute("data-has-divider", t === this.listChildren[0] || t.offsetLeft === this.listChildren[0].offsetLeft);
-      }), this.style.setProperty("--sbb-tab-group-width", `${this._listElement?.clientWidth}px`);
-    }
-    firstUpdated(t) {
-      super.firstUpdated(t), this._updateWidthObserver(), this.shadowRoot?.addEventListener("slotchange", () => this._updateWidthObserver());
-    }
-    _updateWidthObserver() {
-      const t = this.shadowRoot?.querySelector(`.${this.localName}`);
-      t && this._listElement !== t ? (this._listElement && this._resizeController.unobserve(this._listElement), this._listElement = t, this._resizeController.observe(t)) : !t && this._listElement && (this._resizeController.unobserve(this._listElement), this._listElement = null);
-    }
-    render() {
-      return this.renderList();
-    }
-  }, a = new WeakMap(), l = r, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
-    b = [C({ reflect: !0 })], z(r, null, b, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (n) => "size" in n, get: (n) => n.size, set: (n, g) => {
-      n.size = g;
-    } }, metadata: t }, c, d), z(null, s = { value: l }, e, { kind: "class", name: l.name, metadata: t }, null, i), l = s.value, t && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), r.styles = [
-    O,
-    R,
-    k,
-    I
-  ], r.role = "navigation", m(l, i), l;
-})();
-export {
-  q as SbbTabNavBarElement
-};
+import { t as e } from "../../tab-nav-bar.component-n5TiTWxE.js";
+export { e as SbbTabNavBarElement };

package/tabs/tab-nav-bar.js

@@ -1,4 +1,4 @@
-import { SbbTabNavBarElement as e } from "./tab-nav-bar/tab-nav-bar.component.js";
-export {
-  e as SbbTabNavBarElement
-};
+import { t as e } from "../tab-nav-bar.component-n5TiTWxE.js";
+e.define(), console.warn("The entrypoint '@sbb-esta/elements/tabs/tab-nav-bar.js' has been deprecated.\nUse either '@sbb-esta/elements/tabs.js' or '@sbb-esta/elements/tabs.pure.js' instead.");
+//#endregion
+export { e as SbbTabNavBarElement };

package/tabs/tab.js

@@ -1,4 +1,4 @@
-import { SbbTabElement as m } from "./tab/tab.component.js";
-export {
-  m as SbbTabElement
-};
+import { t as e } from "../tab.component-BrIEFDxk.js";
+e.define(), console.warn("The entrypoint '@sbb-esta/elements/tabs/tab.js' has been deprecated.\nUse either '@sbb-esta/elements/tabs.js' or '@sbb-esta/elements/tabs.pure.js' instead.");
+//#endregion
+export { e as SbbTabElement };

package/tabs.js

@@ -1,10 +1,9 @@
-import { SbbTabElement as r } from "./tabs/tab/tab.component.js";
-import { SbbTabGroupElement as m } from "./tabs/tab-group/tab-group.component.js";
-import { SbbTabLabelElement as a } from "./tabs/tab-label/tab-label.component.js";
-import { SbbTabNavBarElement as p } from "./tabs/tab-nav-bar/tab-nav-bar.component.js";
-export {
-  r as SbbTabElement,
-  m as SbbTabGroupElement,
-  a as SbbTabLabelElement,
-  p as SbbTabNavBarElement
-};
+import { t as e } from "./tab-group.component-DE4H3_H4.js";
+import { t } from "./tab-label.component-BnxPGws1.js";
+import { t as n } from "./tab-nav-bar.component-n5TiTWxE.js";
+import { t as r } from "./tab.component-BrIEFDxk.js";
+import { n as i, t as a } from "./styles-DYZWSKeo.js";
+import "./tabs.pure.js";
+r.define(), e.define(), t.define(), n.define();
+//#endregion
+export { r as SbbTabElement, e as SbbTabGroupElement, t as SbbTabLabelElement, n as SbbTabNavBarElement, i as tabGroupCommonStyles, a as tabLabelCommonStyles };

package/tabs.pure.js

@@ -0,0 +1,6 @@
+import { t as e } from "./tab-group.component-DE4H3_H4.js";
+import { t } from "./tab-label.component-BnxPGws1.js";
+import { t as n } from "./tab-nav-bar.component-n5TiTWxE.js";
+import { t as r } from "./tab.component-BrIEFDxk.js";
+import { n as i, t as a } from "./styles-DYZWSKeo.js";
+export { r as SbbTabElement, e as SbbTabGroupElement, t as SbbTabLabelElement, n as SbbTabNavBarElement, i as tabGroupCommonStyles, a as tabLabelCommonStyles };

package/tag/tag/tag.component.js

@@ -1,128 +1,2 @@
-var D = (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 {
-    constructor() {
-      super();
-      v(this, c);
-      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());
-    }
-    /** Value of the form element. */
-    get value() {
-      return u(this, c);
-    }
-    set value(e) {
-      n(this, c, e);
-    }
-    /** Amount displayed inside the tag. */
-    get amount() {
-      return u(this, d);
-    }
-    set amount(e) {
-      n(this, d, e);
-    }
-    /** Whether the tag is checked. */
-    get checked() {
-      return u(this, h);
-    }
-    set checked(e) {
-      n(this, h, e);
-    }
-    /**
-     * Tag size, either s or m.
-     * @default 'm' / 's' (lean)
-     */
-    get size() {
-      return u(this, g);
-    }
-    set size(e) {
-      n(this, g, e);
-    }
-    connectedCallback() {
-      super.connectedCallback(), this._group = this.closest("sbb-tag-group");
-    }
-    isDisabledExternally() {
-      return this._group?.disabled ?? !1;
-    }
-    /** Method triggered on button click. Inverts the checked value and emits events. */
-    _handleClick() {
-      if (this.disabled)
-        return;
-      const e = this.closest("sbb-tag-group");
-      e && !e.multiple && this.checked || (this.checked = !this.checked, this.dispatchEvent(new InputEvent("input", {
-        bubbles: !0,
-        composed: !0
-      })), this.dispatchEvent(new Event("change", { bubbles: !0 })), this.dispatchEvent(new Event("didChange", { bubbles: !0 })));
-    }
-    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);
-    }
-    /**
-     * @internal
-     */
-    formResetCallback() {
-      this.checked = this.hasAttribute("checked");
-    }
-    /**
-     * @internal
-     */
-    formStateRestoreCallback(e, t) {
-      e && (this.checked = e === "true");
-    }
-    updateFormValue() {
-      this.checked ? super.updateFormValue() : this.internals.setFormValue(null);
-    }
-    formState() {
-      return `${this.checked}`;
-    }
-    renderTemplate() {
-      return $`
-      <span class="sbb-tag__icon sbb-tag--shift"> ${this.renderIconSlot()} </span>
-      <span class="sbb-tag__text sbb-tag--shift">
-        <slot></slot>
-      </span>
-      <span class="sbb-tag__amount sbb-tag--shift">
-        <slot name="amount">${this.amount}</slot>
-      </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 = {
-    input: "input",
-    didChange: "didChange",
-    change: "change"
-  }, l(b, r), b;
-})();
-export {
-  at as SbbTagElement
-};
+import { t as e } from "../../tag.component-CfK6JwsO.js";
+export { e as SbbTagElement };

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

@@ -1,118 +1,2 @@
-var w = (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 {
-    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);
-    }
-    /**
-     * This will be forwarded as aria-label to the inner list.
-     */
-    get listAccessibilityLabel() {
-      return d(this, u);
-    }
-    set listAccessibilityLabel(t) {
-      h(this, u, t);
-    }
-    /**
-     * If set multiple to false, the selection is exclusive and the value is a string (or null).
-     * If set multiple to true, the selection can have multiple values and therefore value is an array.
-     *
-     * Changing multiple during run time is not supported.
-     */
-    get multiple() {
-      return d(this, n);
-    }
-    set multiple(t) {
-      h(this, n, t);
-    }
-    /**
-     * Tag group size, either s or m.
-     * @default 'm' / 's' (lean)
-     */
-    get size() {
-      return d(this, b);
-    }
-    set size(t) {
-      h(this, b, t);
-    }
-    /**
-     * Value of the sbb-tag-group.
-     * If set multiple to false, the value is a string (or null).
-     * If set multiple to true, the value is an array.
-     */
-    set value(t) {
-      if (D || !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;
-    }
-    /** 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");
-    }
-    _applyValueToTags(t) {
-      const s = this.tags;
-      if (t === null)
-        s.forEach((l) => l.checked = !1);
-      else if (this.multiple) {
-        if (!Array.isArray(t) && s.every((p) => p.value !== t))
-          try {
-            t = JSON.parse(t);
-          } catch {
-          }
-        const l = Array.isArray(t) ? t : [t];
-        s.forEach((p) => p.checked = l.includes(p.value));
-      } else
-        Array.isArray(t) || s.forEach((l) => l.checked = l.value === t);
-    }
-    render() {
-      return V`
-      <div class="sbb-tag-group">
-        ${this.renderList({
-        class: "sbb-tag-group__list",
-        ariaLabel: this.listAccessibilityLabel
-      })}
-      </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;
-})();
-export {
-  P as SbbTagGroupElement
-};
+import { t as e } from "../../tag-group.component-DiIp6zS1.js";
+export { e as SbbTagGroupElement };

package/tag/tag-group.js

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

package/tag/tag.js

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

package/tag-group.component-DiIp6zS1.js

@@ -0,0 +1,143 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { css as n, html as r, isServer as i } from "lit";
+import { property as a } from "lit/decorators.js";
+import { SbbElement as o } from "./core/base-elements.js";
+import { forceType as s } from "./core/decorators.js";
+import { isLean as c, setOrRemoveAttribute as l } from "./core/dom.js";
+import { SbbDisabledMixin as u, SbbNamedSlotListMixin as d } from "./core/mixins.js";
+import { boxSizingStyles as f } from "./core/styles.js";
+//#region src/elements/tag/tag-group/tag-group.scss?lit&inline
+var p = n`:host{display:block}.sbb-tag-group__list{font-size:inherit;gap:var(--sbb-spacing-fixed-3x);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.sbb-tag-group__list>:is(li,span){max-width:100%;display:flex}`, m = (() => {
+	let n = u(d(o)), m = [], h, g = [], _ = [], v, y = [], b = [], x, S = [], C = [], w;
+	return class extends n {
+		constructor() {
+			super(...arguments), this.listChildLocalNames = (t(this, m), ["sbb-tag", "div"]), this.#e = t(this, g, ""), this.#t = (t(this, _), t(this, y, !1)), this.#n = (t(this, b), t(this, S, c() ? "s" : "m")), this._value = (t(this, C), null);
+		}
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
+			h = [s(), a({ attribute: "list-accessibility-label" })], v = [s(), a({ type: Boolean })], x = [a({ reflect: !0 })], w = [a()], e(this, null, h, {
+				kind: "accessor",
+				name: "listAccessibilityLabel",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "listAccessibilityLabel" in e,
+					get: (e) => e.listAccessibilityLabel,
+					set: (e, t) => {
+						e.listAccessibilityLabel = t;
+					}
+				},
+				metadata: t
+			}, g, _), e(this, null, v, {
+				kind: "accessor",
+				name: "multiple",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "multiple" in e,
+					get: (e) => e.multiple,
+					set: (e, t) => {
+						e.multiple = t;
+					}
+				},
+				metadata: t
+			}, y, b), e(this, null, x, {
+				kind: "accessor",
+				name: "size",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "size" in e,
+					get: (e) => e.size,
+					set: (e, t) => {
+						e.size = t;
+					}
+				},
+				metadata: t
+			}, S, C), e(this, null, w, {
+				kind: "setter",
+				name: "value",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "value" in e,
+					set: (e, t) => {
+						e.value = t;
+					}
+				},
+				metadata: t
+			}, null, m), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-tag-group";
+		}
+		static {
+			this.styles = [f, p];
+		}
+		#e;
+		get listAccessibilityLabel() {
+			return this.#e;
+		}
+		set listAccessibilityLabel(e) {
+			this.#e = e;
+		}
+		#t;
+		get multiple() {
+			return this.#t;
+		}
+		set multiple(e) {
+			this.#t = e;
+		}
+		#n;
+		get size() {
+			return this.#n;
+		}
+		set size(e) {
+			this.#n = e;
+		}
+		set value(e) {
+			if (i || !this.hasUpdated) {
+				this._value = e;
+				return;
+			}
+			this._applyValueToTags(e);
+		}
+		get value() {
+			return i || !this.hasUpdated ? this._value : this.multiple ? this.tags.filter((e) => e.checked).map((e) => e.value) : this.tags.find((e) => e.checked)?.value ?? null;
+		}
+		get tags() {
+			return Array.from(this.querySelectorAll?.("sbb-tag") ?? []);
+		}
+		willUpdate(e) {
+			super.willUpdate(e), e.has("value") && !this.hasUpdated && this._value && this._applyValueToTags(this.value), e.has("size") && this.tags.forEach((e) => e.requestUpdate?.("size")), e.has("disabled") && this.tags.forEach((e) => e.requestUpdate?.("disabled")), (e.has("listChildren") || e.has("multiple")) && !this.multiple && this.tags.filter((e) => e.checked).slice(1).forEach((e) => e.checked = !1), l(this, "role", e.has("listAccessibilityLabel") && this.listAccessibilityLabel ? null : "group");
+		}
+		_applyValueToTags(e) {
+			let t = this.tags;
+			if (e === null) t.forEach((e) => e.checked = !1);
+			else if (this.multiple) {
+				if (!Array.isArray(e) && t.every((t) => t.value !== e)) try {
+					e = JSON.parse(e);
+				} catch {}
+				let n = Array.isArray(e) ? e : [e];
+				t.forEach((e) => e.checked = n.includes(e.value));
+			} else Array.isArray(e) || t.forEach((t) => t.checked = t.value === e);
+		}
+		render() {
+			return r`
+      <div class="sbb-tag-group">
+        ${this.renderList({
+				class: "sbb-tag-group__list",
+				ariaLabel: this.listAccessibilityLabel
+			})}
+      </div>
+    `;
+		}
+	};
+})();
+//#endregion
+export { m as t };