@sbb-esta/lyne-elements-dev 4.7.0-dev.1773648082 → 4.7.0-dev.1773648656

package/tag/tag/tag.component.js

@@ -1,128 +1,2 @@
-var S = (a) => {
-  throw TypeError(a);
-};
-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);
-      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) {
-      b(this, c, e);
-    }
-    /** Amount displayed inside the tag. */
-    get amount() {
-      return u(this, l);
-    }
-    set amount(e) {
-      b(this, l, e);
-    }
-    /** Whether the tag is checked. */
-    get checked() {
-      return u(this, d);
-    }
-    set checked(e) {
-      b(this, d, e);
-    }
-    /**
-     * Tag size, either s or m.
-     * @default 'm' / 's' (lean)
-     */
-    get size() {
-      return u(this, h);
-    }
-    set size(e) {
-      b(this, h, 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((i) => i !== this).forEach((i) => i.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 F`
-      <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(), 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"
-  }, o;
-})();
-export {
-  W as SbbTagElement
-};
+import { t as e } from "../../tag.component-CvZpvIuw.js";
+export { e as SbbTagElement };

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

@@ -1,119 +1,2 @@
-var S = (e) => {
-  throw TypeError(e);
-};
-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);
-      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 p(this, o);
-    }
-    set listAccessibilityLabel(t) {
-      c(this, o, 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 p(this, u);
-    }
-    set multiple(t) {
-      c(this, u, t);
-    }
-    /**
-     * Tag group size, either s or m.
-     * @default 'm' / 's' (lean)
-     */
-    get size() {
-      return p(this, n);
-    }
-    set size(t) {
-      c(this, n, 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 (w || !this.hasUpdated) {
-        this._value = t;
-        return;
-      }
-      this._applyValueToTags(t);
-    }
-    get value() {
-      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), V(this, "role", t.has("listAccessibilityLabel") && this.listAccessibilityLabel ? null : "group");
-    }
-    _applyValueToTags(t) {
-      const s = this.tags;
-      if (t === null)
-        s.forEach((a) => a.checked = !1);
-      else if (this.multiple) {
-        if (!Array.isArray(t) && s.every((m) => m.value !== t))
-          try {
-            t = JSON.parse(t);
-          } catch {
-          }
-        const a = Array.isArray(t) ? t : [t];
-        s.forEach((m) => m.checked = a.includes(m.value));
-      } else
-        Array.isArray(t) || s.forEach((a) => a.checked = a.value === t);
-    }
-    render() {
-      return O`
-      <div class="sbb-tag-group">
-        ${this.renderList({
-        class: "sbb-tag-group__list",
-        ariaLabel: this.listAccessibilityLabel
-      })}
-      </div>
-    `;
-    }
-  }, 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 {
-  X as SbbTagGroupElement
-};
+import { t as e } from "../../tag-group.component-CW6Z9-P6.js";
+export { e as SbbTagGroupElement };

package/tag/tag-group.js

@@ -1,7 +1,4 @@
-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 {
-  e as SbbTagGroupElement
-};
+import { t as e } from "../tag-group.component-CW6Z9-P6.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,7 +1,4 @@
-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 {
-  e as SbbTagElement
-};
+import { t as e } from "../tag.component-CvZpvIuw.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-CW6Z9-P6.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 };

package/tag.component-CvZpvIuw.js

@@ -0,0 +1,170 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { css as n, html as r } from "lit";
+import { property as i } from "lit/decorators.js";
+import { SbbButtonLikeBaseElement as a } from "./core/base-elements.js";
+import { forceType as o, getOverride as s, omitEmptyConverter as c } from "./core/decorators.js";
+import { isLean as l } from "./core/dom.js";
+import { SbbDisabledTabIndexActionMixin as u } from "./core/mixins.js";
+import { boxSizingStyles as d } from "./core/styles.js";
+import { SbbIconNameMixin as f } from "./icon.js";
+//#region src/elements/tag/tag/tag.scss?lit&inline
+var p = n`:host{--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(--lightningcss-light,var(--sbb-color-metal))var(--lightningcss-dark,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);max-width:100%;display:inline-block;outline:none!important}@media (forced-colors:active){:host{--sbb-tag-text-color:ButtonText;--sbb-tag-amount-color:ButtonText;--sbb-tag-border-color:CanvasText;--sbb-tag-border-width:var(--sbb-border-width-2x);--sbb-tag-background-color:Canvas!important}}: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-width:var(--sbb-border-width-4x);--sbb-tag-border-color:Highlight!important}}:host(:is(:disabled,[disabled-interactive])){--sbb-tag-text-color:var(--lightningcss-light,var(--sbb-color-granite))var(--lightningcss-dark,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(--lightningcss-light,var(--sbb-color-cement))var(--lightningcss-dark,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(--lightningcss-light,var(--sbb-color-metal))var(--lightningcss-dark,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(--lightningcss-light,var(--sbb-color-iron))var(--lightningcss-dark,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);height:var(--sbb-tag-height);align-items:center;gap:var(--sbb-tag-gap);max-width:100%;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);font-weight:700;display:flex;position:relative}.sbb-tag:before{content:"";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;position:absolute}: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{height:calc(var(--sbb-typo-line-height-text) * 1em);flex-shrink:0;align-items:center;display:flex}: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{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.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}`, m = (() => {
+	let n = f(u(a)), m, h = [], g = [], _, v = [], y = [], b, x = [], S = [], C, w = [], T = [];
+	return class extends n {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
+			m = [i()], _ = [o(), i({
+				reflect: !0,
+				converter: c
+			})], b = [o(), i({
+				reflect: !1,
+				type: Boolean
+			})], C = [i({ reflect: !0 }), s((e, t) => e._group?.size ?? t)], e(this, null, m, {
+				kind: "accessor",
+				name: "value",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "value" in e,
+					get: (e) => e.value,
+					set: (e, t) => {
+						e.value = t;
+					}
+				},
+				metadata: t
+			}, h, g), e(this, null, _, {
+				kind: "accessor",
+				name: "amount",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "amount" in e,
+					get: (e) => e.amount,
+					set: (e, t) => {
+						e.amount = t;
+					}
+				},
+				metadata: t
+			}, v, y), e(this, null, b, {
+				kind: "accessor",
+				name: "checked",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "checked" in e,
+					get: (e) => e.checked,
+					set: (e, t) => {
+						e.checked = t;
+					}
+				},
+				metadata: t
+			}, x, S), e(this, null, C, {
+				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
+			}, w, T), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-tag";
+		}
+		static {
+			this.styles = [d, p];
+		}
+		static {
+			this.events = {
+				input: "input",
+				didChange: "didChange",
+				change: "change"
+			};
+		}
+		#e;
+		get value() {
+			return this.#e;
+		}
+		set value(e) {
+			this.#e = e;
+		}
+		#t;
+		get amount() {
+			return this.#t;
+		}
+		set amount(e) {
+			this.#t = e;
+		}
+		#n;
+		get checked() {
+			return this.#n;
+		}
+		set checked(e) {
+			this.#n = e;
+		}
+		#r;
+		get size() {
+			return this.#r;
+		}
+		set size(e) {
+			this.#r = e;
+		}
+		constructor() {
+			super(), this.#e = t(this, h, null), this.#t = (t(this, g), t(this, v, "")), this.#n = (t(this, y), t(this, x, !1)), this.#r = (t(this, S), t(this, w, l() ? "s" : "m")), this._group = (t(this, T), null), this.addEventListener?.("click", () => this._handleClick());
+		}
+		connectedCallback() {
+			super.connectedCallback(), this._group = this.closest("sbb-tag-group");
+		}
+		isDisabledExternally() {
+			return this._group?.disabled ?? !1;
+		}
+		_handleClick() {
+			if (this.disabled) return;
+			let 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());
+			let t = this.closest?.("sbb-tag-group");
+			t && !t.multiple && e.has("checked") && this.checked && t?.tags.filter((e) => e !== this).forEach((e) => e.checked = !1);
+		}
+		formResetCallback() {
+			this.checked = this.hasAttribute("checked");
+		}
+		formStateRestoreCallback(e, t) {
+			e && (this.checked = e === "true");
+		}
+		updateFormValue() {
+			this.checked ? super.updateFormValue() : this.internals.setFormValue(null);
+		}
+		formState() {
+			return `${this.checked}`;
+		}
+		renderTemplate() {
+			return r`
+      <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>
+    `;
+		}
+	};
+})();
+//#endregion
+export { m as t };

package/tag.js

@@ -1,8 +1,6 @@
-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 {
-  m as SbbTagElement,
-  e as SbbTagGroupElement
-};
+import { t as e } from "./tag-group.component-CW6Z9-P6.js";
+import { t } from "./tag.component-CvZpvIuw.js";
+import "./tag.pure.js";
+t.define(), e.define();
+//#endregion
+export { t as SbbTagElement, e as SbbTagGroupElement };

package/tag.pure.js

@@ -1,6 +1,3 @@
-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
-};
+import { t as e } from "./tag-group.component-CW6Z9-P6.js";
+import { t } from "./tag.component-CvZpvIuw.js";
+export { t as SbbTagElement, e as SbbTagGroupElement };