@sbb-esta/lyne-elements 4.5.1 → 4.7.0

package/calendar/calendar-day/calendar-day.component.js

@@ -0,0 +1,98 @@
+import { __esDecorate as d, __runInitializers as h } from "tslib";
+import { css as y, html as f } from "lit";
+import { customElement as g, property as p, state as m } from "lit/decorators.js";
+import { SbbButtonLikeBaseElement as _ } from "../../core/base-elements.js";
+import { readConfig as x } from "../../core/config/config.js";
+import { SbbPropertyWatcherController as S } from "../../core/controllers.js";
+import { defaultDateAdapter as D } from "../../core/datetime/native-date-adapter.js";
+import { SbbDisabledMixin as k } from "../../core/mixins.js";
+import { boxSizingStyles as A } from "../../core/styles.js";
+const w = y`:host{display:block;--sbb-calendar-day-width: 2.75rem;--sbb-calendar-day-height: 3rem;--sbb-calendar-day-cell-background-color: var(--sbb-calendar-cell-background-color);--sbb-calendar-day-selected-border: none;--sbb-calendar-day-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-calendar-day-transition-easing-function: var(--sbb-animation-easing);--sbb-calendar-day-cursor: var(--sbb-cursor-pointer);--sbb-calendar-day-border-radius: var(--sbb-border-radius-4x);--sbb-calendar-day-flex-direction: column;--sbb-calendar-day-justify-content: initial;--sbb-calendar-day-align-items: initial;--sbb-calendar-day-value-height: var(--sbb-spacing-fixed-6x);--sbb-calendar-day-extra-display: block;--sbb-calendar-day-extra-height: var(--sbb-spacing-fixed-4x);--sbb-calendar-day-crossed-out-top: 33%;--sbb-calendar-day-crossed-out-translate: translate(-50%, -33%) rotate(-45deg)}:host(:is(:state(selected),[state--selected])){--sbb-calendar-day-selected-border: var(--sbb-border-width-2x) solid var(--sbb-border-color-2)}:host(:disabled){--sbb-calendar-cell-color: var(--sbb-calendar-cell-disabled-color);--sbb-calendar-day-cursor: unset}:host(:focus-visible){outline:0}:host(:not(:disabled):active){--sbb-calendar-day-cell-background-color: var(--sbb-calendar-cell-background-color-active)}.sbb-calendar-day{--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);display:flex;flex-direction:var(--sbb-calendar-day-flex-direction);justify-content:var(--sbb-calendar-day-justify-content);align-items:var(--sbb-calendar-day-align-items);height:var(--sbb-calendar-day-height);width:var(--sbb-calendar-day-width);padding:var(--sbb-calendar-cell-padding);padding-block-end:var(--sbb-calendar-day-cell-padding-hover, var(--sbb-calendar-cell-padding));margin:auto;color:var(--sbb-calendar-cell-color);cursor:var(--sbb-calendar-day-cursor);position:relative;z-index:0}.sbb-calendar-day:before{content:"";position:absolute;inset:0;background-color:var(--sbb-calendar-day-cell-background-color);border:var(--sbb-calendar-day-selected-border);border-radius:var(--sbb-calendar-day-border-radius);z-index:-1;transition-duration:var(--sbb-calendar-day-transition-duration);transition-timing-function:var(--sbb-calendar-day-transition-easing-function);transition-property:background-color}:host(:focus-visible) .sbb-calendar-day: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)}@media(forced-colors:active){:host(:not(:disabled):active) .sbb-calendar-day: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-focus-outline-style: initial}}@media(any-hover:hover){:host(:not(:active,:disabled):hover) .sbb-calendar-day{--sbb-calendar-day-cell-background-color: var(--sbb-calendar-cell-background-color-hover);--sbb-calendar-day-cell-padding-hover: calc( .0625rem + var(--sbb-calendar-cell-padding) )}}@media(any-hover:hover)and (forced-colors:active){:host(:not(:active,:disabled):hover) .sbb-calendar-day: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-focus-outline-style: initial}}.sbb-calendar-day__value{height:var(--sbb-calendar-day-value-height)}:host(:is(:state(current),[state--current])) .sbb-calendar-day__value{font-weight:700}:host(:is(:state(crossed-out),[state--crossed-out])) .sbb-calendar-day__value:after{content:"";height:var(--sbb-calendar-cell-disabled-height);width:var(--sbb-calendar-cell-disabled-width);position:absolute;background-color:var(--sbb-calendar-cell-disabled-color);inset-block-start:var(--sbb-calendar-day-crossed-out-top);inset-inline-start:50%;transform:var(--sbb-calendar-day-crossed-out-translate)}.sbb-calendar-day__extra{display:var(--sbb-calendar-day-extra-display);height:var(--sbb-calendar-day-extra-height);padding:var(--sbb-calendar-cell-padding)}::slotted(*){height:1rem}`;
+let T = (() => {
+  var s;
+  let v = [g("sbb-calendar-day")], o, n = [], r, b = k(_), l = [], c, u;
+  return s = class extends b {
+    set slot(e) {
+      super.slot = e, this.value = this.dateAdapter.deserialize(e);
+    }
+    get slot() {
+      return super.slot;
+    }
+    /** Value of the calendar-day element. */
+    set value(e) {
+      const a = this.dateAdapter.getValidDateOrNull(this.dateAdapter.deserialize(e));
+      if (a) {
+        this._value = a;
+        const t = this.dateAdapter.sameDate(a, this.dateAdapter.today());
+        this.toggleState("current", t), this.internals.ariaCurrent = t ? "date" : null, this.internals.ariaLabel = this.dateAdapter.getAccessibilityFormatDate(a);
+        const i = this._getParent();
+        i && (this._setDisabledFilteredState(i), this._setSelectedState(i));
+      }
+    }
+    get value() {
+      return this._value;
+    }
+    constructor() {
+      super(), this.dateAdapter = (h(this, l), x().datetime?.dateAdapter ?? D), this._value = null, this.addController(new S(this, () => this._getParent(), {
+        dateFilter: (e) => this._setDisabledFilteredState(e),
+        min: (e) => this._setDisabledFilteredState(e),
+        max: (e) => this._setDisabledFilteredState(e),
+        selected: (e) => this._setSelectedState(e)
+      }));
+    }
+    /**
+     * Intentionally empty, as buttons are not targeted by form reset.
+     * @internal
+     */
+    formResetCallback() {
+    }
+    /**
+     * Intentionally empty, as buttons are not targeted by form restore.
+     * @internal
+     */
+    formStateRestoreCallback(e, a) {
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.tabIndex = -1;
+    }
+    /**
+     * The component is used as the default day cell within the `sbb-calendar`,
+     * or, if extra content is needed, it can be slotted.
+     */
+    _getParent() {
+      return this.closest?.("sbb-calendar") ?? this.getRootNode?.()?.host?.closest("sbb-calendar");
+    }
+    _setSelectedState(e) {
+      const a = e.multiple ? e.selected.some((t) => this.dateAdapter.sameDate(this.value, t)) : !!e.selected && this.dateAdapter.compareDate(this.value, e.selected) === 0;
+      this.toggleState("selected", a), this.internals.ariaPressed = String(a);
+    }
+    _setDisabledFilteredState(e) {
+      const a = !this._isActiveDate(e.dateFilter), t = !this._isDayInRange(e.min, e.max);
+      this.disabled = a || t, this.internals.ariaDisabled = String(this.disabled), this.toggleState("crossed-out", a && !t);
+    }
+    _isActiveDate(e) {
+      return e?.(this.value) ?? !0;
+    }
+    _isDayInRange(e, a) {
+      return !e && !a ? !0 : this.dateAdapter.sameDate(this.value, this.dateAdapter.clampDate(this.value, e, a));
+    }
+    renderTemplate() {
+      return f` <span class="sbb-calendar-day__value" aria-hidden="true">
+        ${this.dateAdapter.getDate(this.value)}
+      </span>
+      <span class="sbb-calendar-day__extra">
+        <slot></slot>
+      </span>`;
+    }
+  }, r = s, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
+    c = [p()], u = [m()], d(s, null, c, { kind: "setter", name: "slot", static: !1, private: !1, access: { has: (a) => "slot" in a, set: (a, t) => {
+      a.slot = t;
+    } }, metadata: e }, null, l), d(s, null, u, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (a) => "value" in a, set: (a, t) => {
+      a.value = t;
+    } }, metadata: e }, null, l), d(null, o = { value: r }, v, { kind: "class", name: r.name, metadata: e }, null, n), r = o.value, e && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), s.styles = [A, w], h(r, n), r;
+})();
+export {
+  T as SbbCalendarDayElement
+};

package/calendar/calendar-day.js

@@ -0,0 +1,4 @@
+import { SbbCalendarDayElement as r } from "./calendar-day/calendar-day.component.js";
+export {
+  r as SbbCalendarDayElement
+};

package/calendar/calendar.js

@@ -0,0 +1,5 @@
+import { SbbCalendarElement as b, SbbMonthChangeEvent as t } from "./calendar/calendar.component.js";
+export {
+  b as SbbCalendarElement,
+  t as SbbMonthChangeEvent
+};

package/calendar.js

@@ -1,4 +1,7 @@
-import { SbbCalendarElement as a } from "./calendar/calendar.component.js";
+import { SbbCalendarElement as a, SbbMonthChangeEvent as b } from "./calendar/calendar/calendar.component.js";
+import { SbbCalendarDayElement as t } from "./calendar/calendar-day/calendar-day.component.js";
 export {
-  a as SbbCalendarElement
+  t as SbbCalendarDayElement,
+  a as SbbCalendarElement,
+  b as SbbMonthChangeEvent
 };

package/chip/chip-group/chip-group.component.js

@@ -1,28 +1,30 @@
-var x = (i) => {
+var D = (i) => {
   throw TypeError(i);
 };
-var I = (i, a, r) => a.has(i) || x("Cannot " + r);
-var d = (i, a, r) => (I(i, a, "read from private field"), r ? r.call(i) : a.get(i)), g = (i, a, r) => a.has(i) ? x("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(i) : a.set(i, r), m = (i, a, r, p) => (I(i, a, "write to private field"), p ? p.call(i, r) : a.set(i, r), r);
-import { __esDecorate as c, __runInitializers as b } from "tslib";
-import { css as K, LitElement as L, isServer as A, html as O } from "lit";
-import { customElement as W, property as _ } from "lit/decorators.js";
-import { isArrowKeyPressed as T, getNextElementIndex as q } from "../../core/a11y.js";
-import { SbbLanguageController as F, SbbPropertyWatcherController as M } from "../../core/controllers.js";
-import { isLean as V } from "../../core/dom/lean-context.js";
-import { i18nSelectionRequired as R, i18nChipGroupInputDescription as $ } from "../../core/i18n.js";
-import { SbbRequiredMixin as B, SbbDisabledMixin as N, SbbNegativeMixin as j, SbbFormAssociatedMixin as G, SbbElementInternalsMixin as U } from "../../core/mixins.js";
-import { boxSizingStyles as J } from "../../core/styles.js";
-import { SbbChipElement as P } from "../chip.js";
-const H = K`:host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-gap);align-items:center;margin-block:var(--sbb-chip-group-margin-block)}:host(:is(:is(:state(size-s),[state--size-s]),:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0}:host(:is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .375rem .3125rem}@media(min-width:64rem){:host(:is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .3125rem .1875rem}}:host(:is(:state(without-label),[state--without-label]):is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0 .4375rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0 .3125rem}}:host(:is(:is(:state(size-l),[state--size-l]),:is(:state(size-m),[state--size-m]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) 0}@media(min-width:64rem){:host(:is(:is(:state(size-l),[state--size-l]),:is(:state(size-m),[state--size-m]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 0}}:host(:is(:state(without-label),[state--without-label]):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .1875rem .6875rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .1875rem .875rem}}:host(:is(:state(without-label),[state--without-label]):not(:is(:state(empty),[state--empty]),:is(:state(size-s),[state--size-s]),:is(:state(size-m),[state--size-m]),:is(:state(size-l),[state--size-l]))){--sbb-chip-group-margin-block: var(--sbb-chip-group-margin-block-no-label-not-empty)}:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) var(--_sbb-chip-group-margin-block-start-default-large)}@media(min-width:64rem){:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) var(--_sbb-chip-group-margin-block-start-default-large)}}:host(:not(:is(:state(without-label),[state--without-label]),:is(:state(empty),[state--empty]),:is(:state(size-s),[state--size-s]),:is(:state(size-m),[state--size-m]),:is(:state(size-l),[state--size-l]))){--sbb-chip-group-margin-block: var(--sbb-chip-group-margin-block-with-label-not-empty)}:host(:is(:state(without-label),[state--without-label]):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) 1rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 1.25rem}}:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) .46875rem}@media(min-width:64rem){:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) .46875rem}}::slotted(input){flex:1 1 var(--sbb-chip-group-input-min-width);max-height:1.5rem}::slotted(sbb-chip){max-width:100%}`;
-let ot = (() => {
-  var h, u, n;
-  let i = [W("sbb-chip-group")], a, r = [], p, y = B(N(j(G(U(L))))), f = [], v, z, w = [], k = [], E, C = [], S = [];
-  return n = class extends y {
+var B = (i, a, r) => a.has(i) || D("Cannot " + r);
+var _ = (i, a, r) => (B(i, a, "read from private field"), r ? r.call(i) : a.get(i)), g = (i, a, r) => a.has(i) ? D("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(i) : a.set(i, r), u = (i, a, r, p) => (B(i, a, "write to private field"), p ? p.call(i, r) : a.set(i, r), r);
+import { __esDecorate as d, __runInitializers as h } from "tslib";
+import { css as W, LitElement as T, isServer as K, html as F } from "lit";
+import { customElement as q, property as y } from "lit/decorators.js";
+import { isArrowKeyPressed as M, getNextElementIndex as V } from "../../core/a11y.js";
+import { SbbLanguageController as R, SbbPropertyWatcherController as $ } from "../../core/controllers.js";
+import { forceType as N } from "../../core/decorators.js";
+import { isLean as j } from "../../core/dom/lean-context.js";
+import { i18nSelectionRequired as G, i18nChipGroupInputDescription as U } from "../../core/i18n.js";
+import { SbbRequiredMixin as J, SbbDisabledMixin as P, SbbNegativeMixin as H, SbbFormAssociatedMixin as Q, SbbElementInternalsMixin as X } from "../../core/mixins.js";
+import { boxSizingStyles as Y } from "../../core/styles.js";
+import { SbbChipElement as Z } from "../chip.js";
+const tt = W`:host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-gap);align-items:center;margin-block:var(--sbb-chip-group-margin-block)}:host(:is(:is(:state(size-s),[state--size-s]),:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0}:host(:is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .375rem .3125rem}@media(min-width:64rem){:host(:is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .3125rem .1875rem}}:host(:is(:state(without-label),[state--without-label]):is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0 .4375rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0 .3125rem}}:host(:is(:is(:state(size-l),[state--size-l]),:is(:state(size-m),[state--size-m]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) 0}@media(min-width:64rem){:host(:is(:is(:state(size-l),[state--size-l]),:is(:state(size-m),[state--size-m]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 0}}:host(:is(:state(without-label),[state--without-label]):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .1875rem .6875rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .1875rem .875rem}}:host(:is(:state(without-label),[state--without-label]):not(:is(:state(empty),[state--empty]),:is(:state(size-s),[state--size-s]),:is(:state(size-m),[state--size-m]),:is(:state(size-l),[state--size-l]))){--sbb-chip-group-margin-block: var(--sbb-chip-group-margin-block-no-label-not-empty)}:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) var(--_sbb-chip-group-margin-block-start-default-large)}@media(min-width:64rem){:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) var(--_sbb-chip-group-margin-block-start-default-large)}}:host(:not(:is(:state(without-label),[state--without-label]),:is(:state(empty),[state--empty]),:is(:state(size-s),[state--size-s]),:is(:state(size-m),[state--size-m]),:is(:state(size-l),[state--size-l]))){--sbb-chip-group-margin-block: var(--sbb-chip-group-margin-block-with-label-not-empty)}:host(:is(:state(without-label),[state--without-label]):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) 1rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 1.25rem}}:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) .46875rem}@media(min-width:64rem){:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) .46875rem}}::slotted(input){flex:1 1 var(--sbb-chip-group-input-min-width);max-height:1.5rem}::slotted(sbb-chip){max-width:100%}`;
+let ct = (() => {
+  var b, m, c, l;
+  let i = [q("sbb-chip-group")], a, r = [], p, f = J(P(H(Q(X(T))))), v = [], z, w, k = [], E = [], C, S = [], x = [], I, O = [], A = [];
+  return l = class extends f {
     constructor() {
       super();
-      g(this, h);
-      g(this, u);
-      m(this, h, (b(this, f), b(this, w, null))), m(this, u, (b(this, k), b(this, C, ["Enter"]))), this._inputAttributeObserver = (b(this, S), A ? null : new MutationObserver(() => this._reactToInputChanges())), this._language = new F(this), this.addEventListener?.(P.events.requestdelete, (t) => this._deleteChip(t.target)), this.addEventListener?.("keydown", (t) => this._onChipKeyDown(t)), this.addController(new M(this, () => this.closest("sbb-form-field"), {
+      g(this, b);
+      g(this, m);
+      g(this, c);
+      u(this, b, (h(this, v), h(this, k, null))), u(this, m, (h(this, E), h(this, S, ["Enter"]))), u(this, c, (h(this, x), h(this, O, !1))), this._inputAttributeObserver = (h(this, A), K ? null : new MutationObserver(() => this._reactToInputChanges())), this._language = new R(this), this.addEventListener?.(Z.events.requestdelete, (t) => this._deleteChip(t.target)), this.addEventListener?.("keydown", (t) => this._onChipKeyDown(t)), this.addController(new $(this, () => this.closest("sbb-form-field"), {
         size: (t) => this._updateSize(t.size),
         label: (t) => this._updateLabelState(t),
         hiddenLabel: (t) => this._updateLabelState(t)
@@ -32,30 +34,37 @@ let ot = (() => {
     set value(t) {
       t = t ?? [];
       const e = this.value, s = [...e];
-      for (const l of t)
-        s.includes(l) && s.splice(s.indexOf(l), 1);
-      s.forEach((l) => this._chipElements().find((D) => D.value === l)?.remove());
+      for (const n of t)
+        s.includes(n) && s.splice(s.indexOf(n), 1);
+      s.forEach((n) => this._chipElements().find((L) => L.value === n)?.remove());
       const o = [...t];
-      for (const l of e)
-        o.includes(l) && o.splice(o.indexOf(l), 1);
-      o.forEach((l) => this._createChipElement(l));
+      for (const n of e)
+        o.includes(n) && o.splice(o.indexOf(n), 1);
+      o.forEach((n) => this._createChipElement(n));
     }
     get value() {
       return this._chipElements().map((t) => t.value);
     }
     /** Function that maps a chip's value to its display value. */
     get displayWith() {
-      return d(this, h);
+      return _(this, b);
     }
     set displayWith(t) {
-      m(this, h, t);
+      u(this, b, t);
     }
     /** The array of keys that will trigger a `chipinputtokenend` event. Default `['Enter']` */
     get separatorKeys() {
-      return d(this, u);
+      return _(this, m);
     }
     set separatorKeys(t) {
-      m(this, u, t);
+      u(this, m, t);
+    }
+    /** Whether to automatically add a chip when the input loses focus if there's a value. */
+    get addOnBlur() {
+      return _(this, c);
+    }
+    set addOnBlur(t) {
+      u(this, c, t);
     }
     _updateLabelState(t) {
       this.toggleState("without-label", !t.label || t.hiddenLabel);
@@ -85,7 +94,7 @@ let ot = (() => {
       return super.shouldValidate(t) || t === "required" || t === "value";
     }
     validate() {
-      super.validate(), this.required && this.value.length === 0 ? this.setValidityFlag("valueMissing", R[this._language.current]) : this.removeValidityFlag("valueMissing");
+      super.validate(), this.required && this.value.length === 0 ? this.setValidityFlag("valueMissing", G[this._language.current]) : this.removeValidityFlag("valueMissing");
     }
     /** Return the list of chip elements **/
     _chipElements() {
@@ -99,6 +108,9 @@ let ot = (() => {
       const t = this.querySelector("input");
       t && t !== this._inputElement && (this._inputAbortController?.abort(), this._inputAttributeObserver?.disconnect(), this._inputElement = t, this._inputAbortController = new AbortController(), this._inputElement.addEventListener("keydown", (e) => this._onInputKeyDown(e), {
         signal: this._inputAbortController.signal
+      }), this._inputElement.addEventListener("blur", () => this._onInputBlur(), {
+        signal: this._inputAbortController.signal,
+        capture: !0
       }), this._inputElement.addEventListener("inputAutocomplete", (e) => {
         this._createChipFromInput("autocomplete", e.detail?.option.value);
       }, {
@@ -106,7 +118,7 @@ let ot = (() => {
       }), this._inputAttributeObserver?.observe(this._inputElement, {
         attributes: !0,
         attributeFilter: ["readonly", "disabled"]
-      })), (!this._previousSize || !this.closest("sbb-form-field")) && this._updateSize(V() ? "s" : "m"), this.toggleState("empty", this.value.length === 0), this._reactToInputChanges(), this._updateInputDescription(), this.updateFormValue();
+      })), (!this._previousSize || !this.closest("sbb-form-field")) && this._updateSize(j() ? "s" : "m"), this.toggleState("empty", this.value.length === 0), this._reactToInputChanges(), this._updateInputDescription(), this.updateFormValue();
     }
     /**
      * Listen for keyboard events on the chip elements
@@ -114,8 +126,8 @@ let ot = (() => {
     _onChipKeyDown(t) {
       const e = t.target;
       if (e.localName === "sbb-chip") {
-        if (T(t)) {
-          const s = this._enabledChipElements(), o = q(t, s.indexOf(e), s.length);
+        if (M(t)) {
+          const s = this._enabledChipElements(), o = V(t, s.indexOf(e), s.length);
           s[o].focus();
           return;
         }
@@ -142,6 +154,12 @@ let ot = (() => {
       }
       this.separatorKeys.includes(t.key) && (t.preventDefault(), this._createChipFromInput("input"));
     }
+    /**
+     * Handle blur event on the input
+     **/
+    _onInputBlur() {
+      this.addOnBlur && this._createChipFromInput("input");
+    }
     /**
      * If the input is not empty, create a chip with its value
      */
@@ -153,8 +171,8 @@ let ot = (() => {
         origin: t,
         value: s,
         label: (e ? this.displayWith?.(e) : null) ?? void 0,
-        setValue: (l) => o.value = l,
-        setLabel: (l) => o.label = l
+        setValue: (n) => o.value = n,
+        setLabel: (n) => o.label = n
       };
       this._dispatchChipInputTokenEnd(o) && (this._createChipElement(o.value, o.label), this._inputElement.value = "", this._emitInputEvents());
     }
@@ -190,7 +208,7 @@ let ot = (() => {
       this.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), this.dispatchEvent(new Event("change", { bubbles: !0 }));
     }
     _createChipElement(t, e) {
-      if (A)
+      if (K)
         return;
       const s = document.createElement("sbb-chip");
       s.value = t, s.innerText = e ?? (t ? this.displayWith?.(t) : null) ?? "", this.insertBefore(s, this._inputElement ?? this.querySelector("input"));
@@ -207,26 +225,28 @@ let ot = (() => {
       this._previousSize && this.internals.states.delete(`size-${this._previousSize}`), this._previousSize = t, this._previousSize && this.internals.states.add(`size-${this._previousSize}`);
     }
     _updateInputDescription() {
-      this._inputElement && this._inputElement.setAttribute("aria-description", `${$[this._language.current]} ${this.value.length}`);
+      this._inputElement && this._inputElement.setAttribute("aria-description", `${U[this._language.current]} ${this.value.length}`);
     }
     render() {
-      return O`<slot @slotchange=${this._setupComponent}></slot>`;
+      return F`<slot @slotchange=${this._setupComponent}></slot>`;
     }
-  }, h = new WeakMap(), u = new WeakMap(), p = n, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(y[Symbol.metadata] ?? null) : void 0;
-    v = [_({ type: Array })], z = [_({ attribute: !1 })], E = [_({ attribute: "separator-keys", type: Array })], c(n, null, v, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (e) => "value" in e, set: (e, s) => {
+  }, b = new WeakMap(), m = new WeakMap(), c = new WeakMap(), p = l, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
+    z = [y({ type: Array })], w = [y({ attribute: !1 })], C = [y({ attribute: "separator-keys", type: Array })], I = [N(), y({ attribute: "add-on-blur", type: Boolean })], d(l, null, z, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (e) => "value" in e, set: (e, s) => {
       e.value = s;
-    } }, metadata: t }, null, f), c(n, null, z, { kind: "accessor", name: "displayWith", static: !1, private: !1, access: { has: (e) => "displayWith" in e, get: (e) => e.displayWith, set: (e, s) => {
+    } }, metadata: t }, null, v), d(l, null, w, { kind: "accessor", name: "displayWith", static: !1, private: !1, access: { has: (e) => "displayWith" in e, get: (e) => e.displayWith, set: (e, s) => {
       e.displayWith = s;
-    } }, metadata: t }, w, k), c(n, null, E, { kind: "accessor", name: "separatorKeys", static: !1, private: !1, access: { has: (e) => "separatorKeys" in e, get: (e) => e.separatorKeys, set: (e, s) => {
+    } }, metadata: t }, k, E), d(l, null, C, { kind: "accessor", name: "separatorKeys", static: !1, private: !1, access: { has: (e) => "separatorKeys" in e, get: (e) => e.separatorKeys, set: (e, s) => {
       e.separatorKeys = s;
-    } }, metadata: t }, C, S), c(null, a = { value: p }, i, { kind: "class", name: p.name, metadata: t }, null, r), p = a.value, t && Object.defineProperty(p, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), n.role = "listbox", n.styles = [J, H], n.events = {
+    } }, metadata: t }, S, x), d(l, null, I, { kind: "accessor", name: "addOnBlur", static: !1, private: !1, access: { has: (e) => "addOnBlur" in e, get: (e) => e.addOnBlur, set: (e, s) => {
+      e.addOnBlur = s;
+    } }, metadata: t }, O, A), d(null, a = { value: p }, i, { kind: "class", name: p.name, metadata: t }, null, r), p = a.value, t && Object.defineProperty(p, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), l.role = "listbox", l.styles = [Y, tt], l.events = {
     input: "input",
     change: "change",
     chipinputtokenend: "chipinputtokenend"
-  }, b(p, r), p;
+  }, h(p, r), p;
 })();
 export {
-  ot as SbbChipGroupElement
+  ct as SbbChipGroupElement
 };

package/core/styles/core.scss

@@ -10,6 +10,7 @@ $theme: 'standard' !default;
 @use './mixins/font-face';
 @use './mixins/helpers';
 @use './mixins/inputs';
+@use './mixins/overlay' as overlay;
 @use './mixins/popover';
 @use './mixins/scrollbar';
 @use './mixins/typo';
@@ -68,6 +69,18 @@ $theme: 'standard' !default;
 @use '../../container/sticky-bar/sticky-bar.global' as sticky-bar with (
   $theme: $theme
 );
+@use '../../dialog/dialog/dialog.global' as dialog with (
+  $theme: $theme
+);
+@use '../../dialog/dialog-close-button/dialog-close-button.global' as dialog-close-button with (
+  $theme: $theme
+);
+@use '../../dialog/dialog-content/dialog-content.global' as dialog-content with (
+  $theme: $theme
+);
+@use '../../dialog/dialog-title/dialog-title.global' as dialog-title with (
+  $theme: $theme
+);
 @use '../../divider/divider.global' as divider with (
   $theme: $theme
 );
@@ -82,6 +95,18 @@ $theme: 'standard' !default;
   expansion-panel-header with (
   $theme: $theme
 );
+@use '../../footer/footer.global' as footer with (
+  $theme: $theme
+);
+@use '../../option/option/option.global' as option with (
+  $theme: $theme
+);
+@use '../../option/option-hint/option-hint.global' as option-hint with (
+  $theme: $theme
+);
+@use '../../option/optgroup/optgroup.global' as optgroup with (
+  $theme: $theme
+);
 @use '../../radio-button/common/radio-button-common.global' as radio-button-common with (
   $theme: $theme
 );
@@ -95,6 +120,9 @@ $theme: 'standard' !default;
   with (
   $theme: $theme
 );
+@use '../../status/status.global' as status with (
+  $theme: $theme
+);
 @use '../../tabs/common/tab-group-common.global' as tab-group-common with (
   $theme: $theme
 );
@@ -133,14 +161,22 @@ $theme: 'standard' !default;
   @include container.base;
   @include sticky-bar.base;
   @include clock.base;
+  @include dialog.base;
+  @include dialog-close-button.base;
   @include divider.base;
   @include expansion-panel.base;
   @include expansion-panel-content.base;
   @include expansion-panel-header.base;
+  @include footer.base;
+  @include option.base;
+  @include option-hint.base;
+  @include optgroup.base;
+  @include overlay.options-panel-overlay-variables--global($theme);
   @include radio-button-common.base;
   @include radio-button-group.base;
   @include selection-action-panel.base;
   @include selection-expansion-panel.base;
+  @include status.base;
   @include tab-group-common.base;
   @include tab-label-common.base;
   @include visual-checkbox.base;
@@ -217,6 +253,9 @@ $theme: 'standard' !default;
 
   @include mediaqueries.mq($from: small) {
     @include sbb-css-tokens.breakpoint-small;
+
+    @include dialog.base-breakpoint-small;
+    @include footer.base-breakpoint-small;
   }
 
   @include mediaqueries.mq($from: large) {
@@ -225,6 +264,7 @@ $theme: 'standard' !default;
     @include button.base-breakpoint-large;
 
     @include chip-group.base-breakpoint-large;
+    @include dialog.base-breakpoint-large;
 
     // TODO: Remove complete block when new lean theme is complete
     // Only render the block in standard theme as fallback for CSS class usage
@@ -253,7 +293,12 @@ $theme: 'standard' !default;
 @include font-face.font-declarations;
 
 // Components global styles
+@include breadcrumb-group.rules;
 @include container.rules;
+@include dialog-close-button.rules;
+@include dialog-content.rules;
+@include dialog-title.rules;
+@include option.rules;
 @include tab-nav-bar.rules;
 
 // TODO: discuss where to add these classes
@@ -363,6 +408,7 @@ html {
     white-space: break-spaces;
     overflow-y: auto;
     min-height: calc((var(--sbb-typo-line-height-text) * 1em));
+    height: 100%;
   }
 
   &[size='l'] :where(textarea) {
@@ -431,13 +477,6 @@ html {
   @include popover.popover-reset;
 }
 
-// Ensure stable breadcrumb height during hydrating
-sbb-breadcrumb-group:not(:defined) {
-  display: block;
-  height: calc(var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs));
-  overflow: hidden;
-}
-
 // Every element in the Light DOM of a sbb-card which is focusable should receive this attribute.
 // This style enables accessing focusable elements inside an sbb-card.
 :is(sbb-card, sbb-flip-card) .sbb-action {
@@ -703,65 +742,6 @@ sbb-toggle:has(:focus-visible) {
   @include a11y.focus-outline;
 }
 
-:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size='s'] {
-  :where(sbb-option, sbb-autocomplete-grid-option) {
-    --sbb-option-min-height: var(--sbb-size-element-xxs);
-    --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
-    --sbb-option-focus-outline-inset: 0 var(--sbb-spacing-fixed-1x);
-  }
-
-  sbb-optgroup {
-    --sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);
-  }
-
-  sbb-option-hint {
-    --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-1x);
-  }
-}
-
-sbb-dialog-title {
-  // Hide margin on the right side. Distance to button is defined by flex gap already.
-  sbb-dialog:has(> sbb-dialog-close-button) > &,
-  sbb-dialog:state(has-intermediate-element):has(> * > sbb-dialog-close-button) > * > & {
-    padding-inline-end: 0;
-  }
-}
-
-sbb-dialog-content {
-  // If there is a title, remove top spacing for the content
-  sbb-dialog:has(> sbb-dialog-title) > &,
-  sbb-dialog:state(has-intermediate-element):has(> * > sbb-dialog-title) > * > & {
-    padding-block-start: var(--sbb-spacing-fixed-1x);
-  }
-
-  // Set the negative scrollbar colors for dialog content when dialog is negative
-  sbb-dialog[negative] > &,
-  sbb-dialog[negative]:state(has-intermediate-element) > * > & {
-    @include scrollbar.scrollbar-variables--color-negative;
-  }
-}
-
-sbb-dialog-close-button {
-  // If there is no dialog title, the close button should be positioned absolute
-  sbb-dialog:not(:has(> sbb-dialog-title)) > &,
-  sbb-dialog:state(has-intermediate-element):not(:has(> * > sbb-dialog-title)) > * > & {
-    position: absolute;
-    z-index: 1;
-  }
-
-  // The close button positioning needs the current dialog title size
-  sbb-dialog:has(> sbb-dialog-title[visual-level='3']) > &,
-  sbb-dialog:state(has-intermediate-element):has(> * > sbb-dialog-title[visual-level='3']) > * > & {
-    --_sbb-dialog-title-size: var(--sbb-heading-font-size-3);
-  }
-
-  // The close button positioning needs the current dialog title size
-  sbb-dialog:has(> sbb-dialog-title[visual-level='5']) > &,
-  sbb-dialog:state(has-intermediate-element):has(> * > sbb-dialog-title[visual-level='5']) > * > & {
-    --_sbb-dialog-title-size: var(--sbb-heading-font-size-5);
-  }
-}
-
 sbb-notification:has(sbb-title) {
   --_sbb-notification-icon-authoritative-font-size: var(--sbb-heading-font-size-5);
   --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-heading);
@@ -772,13 +752,6 @@ sbb-notification:has(sbb-title) {
   }
 }
 
-sbb-status:has(sbb-title) {
-  --sbb-status-gap: var(--sbb-spacing-responsive-xxxs);
-  --_sbb-status-text-color-override: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
-  --_sbb-status-title-font-size: var(--sbb-heading-font-size-5);
-  --_sbb-status-title-line-height: var(--sbb-typo-line-height-heading);
-}
-
 .sbb-overlay-outlet {
   position: fixed;
   inset: 0;

package/core/styles/mixins/overlay.scss

@@ -1,5 +1,20 @@
+@use '../core/functions';
 @use './scrollbar';
 
+@mixin options-panel-overlay-variables--global($theme: 'standard') {
+  --sbb-options-panel-border-radius: var(--sbb-border-radius-4x);
+  --sbb-options-panel-animation-timing-function: ease;
+  --sbb-options-panel-background-color: var(--sbb-background-color-1);
+  --sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
+  --sbb-options-panel-padding-block: #{functions.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-fixed-2x),
+        'lean': var(--sbb-spacing-fixed-1x),
+      ),
+      $theme
+    )};
+}
+
 @mixin options-panel-overlay-variables {
   @include scrollbar.scrollbar-variables;
 
@@ -12,24 +27,15 @@
     var(--sbb-options-panel-max-height, 100000em)
   );
   --sbb-options-panel-min-height: var(--sbb-options-panel-origin-height);
-  --sbb-options-panel-visibility: visible;
-  --sbb-options-panel-width: fit-content;
-  --sbb-options-panel-border-radius: var(--sbb-border-radius-4x);
   --sbb-options-panel-options-border-radius: 0 0 var(--sbb-options-panel-border-radius)
     var(--sbb-options-panel-border-radius);
   --sbb-options-panel-animation-duration: var(
     --sbb-disable-animation-duration,
     var(--sbb-animation-duration-4x)
   );
-  --sbb-options-panel-animation-timing-function: ease;
-  --sbb-options-panel-gap-fix-opacity: 0;
-  --sbb-options-panel-gap-fix-transform: none;
   --sbb-options-panel-gap-fix-top: calc(
     var(--sbb-options-panel-position-y) - var(--sbb-options-panel-border-radius)
   );
-  --sbb-options-panel-background-color: var(--sbb-background-color-1);
-  --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x);
-  --sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
 
   // As the overlays have always a white background, we have to fix the focus outline color
   // to default color for cases where the overlays are used in a negative context.
@@ -53,6 +59,10 @@
   --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
 }
 
+@mixin options-panel-overlay-size-m-variables {
+  --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x);
+}
+
 @mixin options-panel-overlay-container {
   position: fixed;
   pointer-events: none;
@@ -64,14 +74,14 @@
   display: flex;
   justify-content: space-between;
   position: fixed;
-  visibility: var(--sbb-options-panel-visibility);
-  opacity: var(--sbb-options-panel-gap-fix-opacity);
+  visibility: var(--sbb-options-panel-visibility, visible);
+  opacity: var(--sbb-options-panel-gap-fix-opacity, 0);
   background-color: transparent;
-  width: var(--sbb-options-panel-width);
+  width: var(--sbb-options-panel-width, fit-content);
   height: var(--sbb-options-panel-border-radius);
   top: var(--sbb-options-panel-gap-fix-top);
   left: var(--sbb-options-panel-position-x);
-  transform: var(--sbb-options-panel-gap-fix-transform);
+  transform: var(--sbb-options-panel-gap-fix-transform, none);
   transition: opacity var(--sbb-options-panel-animation-duration)
     var(--sbb-options-panel-animation-timing-function);
 }
@@ -79,14 +89,14 @@
 @mixin options-panel-overlay {
   display: block;
   position: absolute;
-  visibility: var(--sbb-options-panel-visibility);
+  visibility: var(--sbb-options-panel-visibility, 'visible');
   overflow: hidden;
   background-color: transparent;
   border: none;
   border-radius: var(--sbb-options-panel-border-radius);
   top: var(--sbb-options-panel-position-y);
   left: var(--sbb-options-panel-position-x);
-  width: var(--sbb-options-panel-width);
+  width: var(--sbb-options-panel-width, fit-content);
   transition: box-shadow var(--sbb-options-panel-animation-duration)
     var(--sbb-options-panel-animation-timing-function);