@sbb-esta/lyne-elements 2.5.0 → 2.6.0

package/core/mixins.js

@@ -1,19 +1,19 @@
-var F = (d) => {
+var L = (d) => {
   throw TypeError(d);
 };
-var L = (d, v, c) => v.has(d) || F("Cannot " + c);
-var C = (d, v, c) => (L(d, v, "read from private field"), c ? c.call(d) : v.get(d)), E = (d, v, c) => v.has(d) ? F("Cannot add the same private member more than once") : v instanceof WeakSet ? v.add(d) : v.set(d, c), S = (d, v, c, l) => (L(d, v, "write to private field"), l ? l.call(d, c) : v.set(d, c), c);
+var F = (d, v, c) => v.has(d) || L("Cannot " + c);
+var C = (d, v, c) => (F(d, v, "read from private field"), c ? c.call(d) : v.get(d)), E = (d, v, c) => v.has(d) ? L("Cannot add the same private member more than once") : v instanceof WeakSet ? v.add(d) : v.set(d, c), S = (d, v, c, l) => (F(d, v, "write to private field"), l ? l.call(d, c) : v.set(d, c), c);
 import { __esDecorate as y, __runInitializers as _ } from "tslib";
-import { property as k, state as j, eventOptions as G } from "lit/decorators.js";
+import { property as k, state as N, eventOptions as G } from "lit/decorators.js";
 import { forceType as I, getOverride as H, hostAttributes as K } from "./decorators.js";
-import { defaultConverter as P, isServer as O, html as R, nothing as A, css as W } from "lit";
+import { defaultConverter as T, isServer as A, html as R, nothing as O, css as W } from "lit";
 import { SbbLanguageController as M, SbbConnectedAbortController as X } from "./controllers.js";
-import { preventScrollOnSpacebarPress as J, EventEmitter as Q } from "./eventing.js";
-import { i18nCheckboxRequired as Y, i18nInputRequired as Z, i18nSelectionRequired as ee } from "./i18n.js";
-import { isWebkit as N, isFirefox as te } from "./dom.js";
-import { sbbInputModalityDetector as se, interactivityChecker as ae, isArrowKeyPressed as ie, getNextElementIndex as re } from "./a11y.js";
+import { preventScrollOnSpacebarPress as Y, EventEmitter as J } from "./eventing.js";
+import { i18nCheckboxRequired as Q, i18nInputRequired as Z, i18nSelectionRequired as ee } from "./i18n.js";
+import { isWebkit as j } from "./dom.js";
+import { sbbInputModalityDetector as te, interactivityChecker as se, isArrowKeyPressed as ae, getNextElementIndex as ie } from "./a11y.js";
 import "../screen-reader-only.js";
-const _e = (d) => {
+const ye = (d) => {
   class v extends d {
     constructor() {
       super(...arguments), this.isAnimating = !1, this._animationPromise = Promise.resolve();
@@ -81,7 +81,7 @@ const _e = (d) => {
       s.disabled = a;
     } }, metadata: e }, f, n), e && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
   })(), t;
-})(), ne = (d) => (() => {
+})(), re = (d) => (() => {
   var b, t;
   let c = d, l, f = [], n = [];
   return t = class extends c {
@@ -103,8 +103,8 @@ const _e = (d) => {
       s.disabledInteractive = a;
     } }, metadata: e }, f, n), e && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
   })(), t;
-})(), ye = (d) => {
-  class v extends ne(B(d)) {
+})(), Se = (d) => {
+  class v extends re(B(d)) {
     willUpdate(l) {
       super.willUpdate(l), l.has("disabledInteractive") && (this.internals.ariaDisabled = this.disabledInteractive ? "true" : null), l.has("disabled") && (this.disabled ? this.removeAttribute("tabindex") : this.setAttribute("tabindex", "0"));
     }
@@ -302,14 +302,14 @@ const V = (d) => (() => {
         const g = m in o ? o[m] : !1;
         Object.defineProperty(this.internals.validity, m, { value: g, configurable: !0 }), g && (o.customError = !0);
       }
-      this.internals.setValidity(o, i), N && Object.defineProperty(this.internals.validity, "customError", {
+      this.internals.setValidity(o, i), j && Object.defineProperty(this.internals.validity, "customError", {
         value: this._validityStates.has("customError") || !!o.customError,
         configurable: !0
       });
     }
   }, u = new WeakMap(), (() => {
     const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
-    f = [k()], n = [k()], b = [j()], y(e, null, f, { kind: "setter", name: "name", static: !1, private: !1, access: { has: (o) => "name" in o, set: (o, p) => {
+    f = [k()], n = [k()], b = [N()], y(e, null, f, { kind: "setter", name: "name", static: !1, private: !1, access: { has: (o) => "name" in o, set: (o, p) => {
       o.name = p;
     } }, metadata: i }, null, l), y(e, null, n, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (o) => "value" in o, set: (o, p) => {
       o.value = p;
@@ -347,7 +347,7 @@ const V = (d) => (() => {
       r.required = u;
     } }, metadata: t }, null, l), t && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
   })(), n;
-})(), ke = (d) => (() => {
+})(), xe = (d) => (() => {
   var u;
   let c = [K({
     tabindex: "0"
@@ -375,7 +375,7 @@ const V = (d) => (() => {
       }, this._handleUserInteraction = () => {
         var o;
         this.disabled || ((o = this.withUserInteraction) == null || o.call(this), this.checked = !this.checked, this._attributeMutationBlocked = !0, this.dispatchEvent(new InputEvent("input", { composed: !0, bubbles: !0 })), this.dispatchEvent(new Event("change", { bubbles: !0 })));
-      }, this.internals.role = "checkbox", (s = this.addEventListener) == null || s.call(this, "click", this._handleUserInteraction), (a = this.addEventListener) == null || a.call(this, "keydown", J), (i = this.addEventListener) == null || i.call(this, "keyup", this._handleKeyboardInteraction);
+      }, this.internals.role = "checkbox", (s = this.addEventListener) == null || s.call(this, "click", this._handleUserInteraction), (a = this.addEventListener) == null || a.call(this, "keydown", Y), (i = this.addEventListener) == null || i.call(this, "keyup", this._handleKeyboardInteraction);
     }
     attributeChangedCallback(s, a, i) {
       (s !== "checked" || !this._attributeMutationBlocked) && super.attributeChangedCallback(s, a, i);
@@ -407,25 +407,30 @@ const V = (d) => (() => {
       return super.shouldValidate(s) || s === "checked" || s === "required";
     }
     validate() {
-      super.validate(), this.required && !this.checked ? this.setValidityFlag("valueMissing", Y[this._languageController.current]) : this.removeValidityFlag("valueMissing");
+      super.validate(), this.required && !this.checked ? this.setValidityFlag("valueMissing", Q[this._languageController.current]) : this.removeValidityFlag("valueMissing");
     }
   }, n = u, (() => {
     const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
     r = [k({
       type: Boolean,
       converter: {
-        ...P,
+        ...T,
         // We need to pass information to the setter so that we know it was called by attribute change.
         fromAttribute: (a, i) => {
           var p, x;
-          return { value: (x = (p = P).fromAttribute) == null ? void 0 : x.call(p, a, i), attribute: !0 };
+          return { value: (x = (p = T).fromAttribute) == null ? void 0 : x.call(p, a, i), attribute: !0 };
         }
       }
     })], y(u, null, r, { kind: "setter", name: "checked", static: !1, private: !1, access: { has: (a) => "checked" in a, set: (a, i) => {
       a.checked = i;
     } }, metadata: s }, null, t), y(null, l = { value: n }, c, { kind: "class", name: n.name, metadata: s }, null, f), n = l.value, s && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s }), _(n, f);
   })(), n;
-})(), xe = (d) => (() => {
+})(), ne = () => {
+  if (A)
+    return !1;
+  const d = document.createElement("div");
+  return d.setAttribute("contenteditable", "PLAINTEXT-ONLY"), d.contentEditable === "plaintext-only";
+}, le = ne(), Ce = (d) => (() => {
   var r;
   let c = D(V(d)), l = [], f, n, b, t;
   return r = class extends c {
@@ -482,7 +487,7 @@ const V = (d) => (() => {
         if ((m.key === "Enter" || m.key === `
 `) && m.isTrusted)
           m.preventDefault(), m.stopImmediatePropagation(), this._shouldTriggerSubmit = this.dispatchEvent(new KeyboardEvent("keydown", m));
-        else if (N && this.value && (m.key === "Backspace" || m.key === "Delete") && m.isTrusted) {
+        else if (j && this.value && (m.key === "Backspace" || m.key === "Delete") && m.isTrusted) {
           if (m.preventDefault(), m.stopImmediatePropagation(), !this.dispatchEvent(new KeyboardEvent("keydown", m)))
             return;
           const h = (g = window.getSelection()) == null ? void 0 : g.getRangeAt(0);
@@ -501,7 +506,7 @@ const V = (d) => (() => {
         !h || !g || (h.deleteContents(), h.insertNode(document.createTextNode(g)), h.setStart(h.endContainer, h.endOffset), this._dispatchInputEvent());
       }), (p = this.addEventListener) == null || p.call(this, "focus", () => {
         var m;
-        se.mostRecentModality === "keyboard" && ((m = window.getSelection()) == null || m.selectAllChildren(this));
+        te.mostRecentModality === "keyboard" && ((m = window.getSelection()) == null || m.selectAllChildren(this));
       }), (x = this.addEventListener) == null || x.call(this, "blur", () => {
         var m;
         (m = window.getSelection()) == null || m.removeAllRanges(), this._emitChangeIfNecessary(), this.scrollLeft = 0;
@@ -511,7 +516,7 @@ const V = (d) => (() => {
       super.connectedCallback(), this.internals.ariaMultiLine = "false", this._updateContenteditable(), this.innerHTML = this.value;
     }
     focus(e) {
-      if (super.focus(e), !O && !this.disabled && !this.readOnly && this.value) {
+      if (super.focus(e), !A && !this.disabled && !this.readOnly && this.value) {
         const s = window.getSelection();
         if (!s)
           return;
@@ -544,6 +549,9 @@ const V = (d) => (() => {
     formStateRestoreCallback(e, s) {
       e && typeof e == "string" && (this.value = e);
     }
+    async firstUpdated(e) {
+      super.firstUpdated(e), this.value && !this.innerHTML.length && (this.innerHTML = this.value);
+    }
     updateFormValue() {
       this.internals.setFormValue(this.value, this.value);
     }
@@ -565,8 +573,8 @@ const V = (d) => (() => {
           e.remove();
     }
     _updateContenteditable() {
-      if (!O && this.isConnected) {
-        const e = this.disabled || this.readOnly ? "false" : te ? "true" : "plaintext-only";
+      if (!A && this.isConnected) {
+        const e = this.disabled || this.readOnly ? "false" : le ? "plaintext-only" : "true";
         this.setAttribute("contenteditable", e), this.readOnly ? this.setAttribute("tabindex", "0") : this.removeAttribute("tabindex");
       }
     }
@@ -586,7 +594,7 @@ const V = (d) => (() => {
       s.placeholder = a;
     } }, metadata: e }, null, l), y(r, null, t, { kind: "method", name: "_cleanChildren", static: !1, private: !1, access: { has: (s) => "_cleanChildren" in s, get: (s) => s._cleanChildren }, metadata: e }, null, l), e && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
   })(), r;
-})(), z = /* @__PURE__ */ new WeakMap(), Ce = (d) => (() => {
+})(), P = /* @__PURE__ */ new WeakMap(), Ee = (d) => (() => {
   var n;
   let c = B(D(V(d))), l = [], f;
   return n = class extends c {
@@ -614,7 +622,7 @@ const V = (d) => (() => {
     }
     constructor() {
       var t;
-      super(), this._checked = (_(this, l), !1), this.abort = new X(this), this._didLoad = !1, this._languageController = new M(this), this.internals.role = "radio", (t = this.addEventListener) == null || t.call(this, "keydown", (r) => this._handleArrowKeyDown(r));
+      super(), this._checked = (_(this, l), !1), this.abort = new X(this), this._languageController = new M(this), this.internals.role = "radio", (t = this.addEventListener) == null || t.call(this, "keydown", (r) => this._handleArrowKeyDown(r));
     }
     connectedCallback() {
       super.connectedCallback(), this._connectToRegistry(), this._synchronizeGroupState();
@@ -642,7 +650,7 @@ const V = (d) => (() => {
       super.willUpdate(t), t.has("disabled") && this.updateFocusableRadios();
     }
     firstUpdated(t) {
-      super.firstUpdated(t), this._didLoad = !0, this.updateFocusableRadios();
+      super.firstUpdated(t), this.updateFocusableRadios();
     }
     /**
      * Called on `value` change
@@ -672,7 +680,7 @@ const V = (d) => (() => {
      * - the first non-disabled radio in DOM order;
      */
     updateFocusableRadios() {
-      if (!this._didLoad)
+      if (!this.hasUpdated)
         return;
       const t = this._interactableGroupedRadios(), r = t.findIndex((e) => e.checked && !e.disabled && !e.formDisabled), u = r !== -1 ? r : t.findIndex((e) => !e.disabled && !e.formDisabled);
       u !== -1 && (t[u].tabIndex = 0, t.splice(u, 1)), t.forEach((e) => e.removeAttribute("tabindex"));
@@ -690,10 +698,10 @@ const V = (d) => (() => {
      * Add `this` to the radioButton registry
      */
     _connectToRegistry() {
-      if (!this.name || O)
+      if (!this.name || A)
         return;
       const t = this.form ?? this.getRootNode();
-      this._radioButtonGroupsMap = z.get(t), this._radioButtonGroupsMap || (this._radioButtonGroupsMap = /* @__PURE__ */ new Map(), z.set(t, this._radioButtonGroupsMap)), this.associatedRadioButtons = this._radioButtonGroupsMap.get(this.name), this.associatedRadioButtons || (this.associatedRadioButtons = /* @__PURE__ */ new Set(), this._radioButtonGroupsMap.set(this.name, this.associatedRadioButtons));
+      this._radioButtonGroupsMap = P.get(t), this._radioButtonGroupsMap || (this._radioButtonGroupsMap = /* @__PURE__ */ new Map(), P.set(t, this._radioButtonGroupsMap)), this.associatedRadioButtons = this._radioButtonGroupsMap.get(this.name), this.associatedRadioButtons || (this.associatedRadioButtons = /* @__PURE__ */ new Set(), this._radioButtonGroupsMap.set(this.name, this.associatedRadioButtons));
       const r = Array.from(this.associatedRadioButtons);
       this.associatedRadioButtons.clear();
       const u = r.findIndex((e) => this.compareDocumentPosition(e) & Node.DOCUMENT_POSITION_FOLLOWING);
@@ -710,7 +718,7 @@ const V = (d) => (() => {
      * Return a list of 'interactable' grouped radios, ordered in DOM order
      */
     _interactableGroupedRadios() {
-      return Array.from(this.associatedRadioButtons ?? []).filter((t) => ae.isVisible(t));
+      return Array.from(this.associatedRadioButtons ?? []).filter((t) => se.isVisible(t));
     }
     /**
      * Deselect other radio of the same group
@@ -719,10 +727,10 @@ const V = (d) => (() => {
       Array.from(this.associatedRadioButtons ?? []).filter((t) => t !== this).forEach((t) => t.checked = !1);
     }
     async _handleArrowKeyDown(t) {
-      if (!ie(t))
+      if (!ae(t))
         return;
       t.preventDefault();
-      const r = this._interactableGroupedRadios().filter((s) => !s.disabled && !s.formDisabled), u = r.indexOf(this), e = re(t, u, r.length);
+      const r = this._interactableGroupedRadios().filter((s) => !s.disabled && !s.formDisabled), u = r.indexOf(this), e = ie(t, u, r.length);
       await this.navigateByKeyboard(r[e]);
     }
   }, (() => {
@@ -731,7 +739,7 @@ const V = (d) => (() => {
       r.checked = u;
     } }, metadata: t }, null, l), t && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
   })(), n;
-})(), le = (d) => {
+})(), oe = (d) => {
   class v extends d {
     /**
      * Returns a Promise that resolves when the element has completed hydration.
@@ -766,16 +774,16 @@ const V = (d) => (() => {
     }
   }
   return v;
-}, T = "data-ssr-child-count", U = "li", Ee = (d) => (() => {
+}, U = "data-ssr-child-count", z = "li", we = (d) => (() => {
   var b, t;
-  let c = le(d), l, f = [], n = [];
+  let c = oe(d), l, f = [], n = [];
   return t = class extends c {
     constructor() {
       super(...arguments);
       E(this, b);
       S(this, b, _(this, f, [])), this._handleSlotchange = (_(this, n), () => {
         const e = Array.from(this.children ?? []).filter((s) => this.listChildLocalNames.includes(s.localName));
-        e.length === this.listChildren.length && this.listChildren.every((s, a) => e[a] === s) || (this.listChildren.filter((s) => !e.includes(s)).forEach((s) => s.removeAttribute("slot")), this.listChildren = e, this.listChildren.forEach((s, a) => s.setAttribute("slot", `${U}-${a}`)), this.removeAttribute(T));
+        e.length === this.listChildren.length && this.listChildren.every((s, a) => e[a] === s) || (this.listChildren.filter((s) => !e.includes(s)).forEach((s) => s.removeAttribute("slot")), this.listChildren = e, this.listChildren.forEach((s, a) => s.setAttribute("slot", `${z}-${a}`)), this.removeAttribute(U));
       });
     }
     /**
@@ -811,11 +819,11 @@ const V = (d) => (() => {
       return a.length >= 2 ? R`
           <ul
             class=${e.class || this.localName}
-            aria-label=${e.ariaLabel || A}
-            aria-labelledby=${e.ariaLabelledby || A}
+            aria-label=${e.ariaLabel || O}
+            aria-labelledby=${e.ariaLabelledby || O}
           >
             ${a.map((i) => R`
-                <li aria-hidden=${i.ariaHidden || A}>
+                <li aria-hidden=${i.ariaHidden || O}>
                   <slot name=${i.name}></slot>
                 </li>
               `)}
@@ -837,10 +845,10 @@ const V = (d) => (() => {
      * children to be passed via the `data-ssr-child-count` attribute value.
      */
     listSlotEntries(e) {
-      return (this.listChildren.length ? this.listChildren : Array.from({ length: +(this.getAttribute(T) ?? 0) })).map((a, i) => {
+      return (this.listChildren.length ? this.listChildren : Array.from({ length: +(this.getAttribute(U) ?? 0) })).map((a, i) => {
         var o;
         return {
-          name: `${U}-${i}`,
+          name: `${z}-${i}`,
           ariaHidden: ((o = e == null ? void 0 : e.localNameVisualOnly) == null ? void 0 : o.includes(a.localName)) ?? !1
         };
       });
@@ -855,11 +863,11 @@ const V = (d) => (() => {
     }
   }, b = new WeakMap(), (() => {
     const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
-    l = [j()], y(t, null, l, { kind: "accessor", name: "listChildren", static: !1, private: !1, access: { has: (s) => "listChildren" in s, get: (s) => s.listChildren, set: (s, a) => {
+    l = [N()], y(t, null, l, { kind: "accessor", name: "listChildren", static: !1, private: !1, access: { has: (s) => "listChildren" in s, get: (s) => s.listChildren, set: (s, a) => {
       s.listChildren = a;
     } }, metadata: e }, f, n), e && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
   })(), t;
-})(), we = (d) => (() => {
+})(), Re = (d) => (() => {
   var b, t;
   let c = d, l, f = [], n = [];
   return t = class extends c {
@@ -881,7 +889,7 @@ const V = (d) => (() => {
       s.negative = a;
     } }, metadata: e }, f, n), e && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
   })(), t;
-})(), Re = (d) => (() => {
+})(), Ie = (d) => (() => {
   var a, i, o, p;
   let c = d, l, f = [], n = [], b, t = [], r = [], u, e = [], s = [];
   return p = class extends c {
@@ -890,7 +898,7 @@ const V = (d) => (() => {
       E(this, a);
       E(this, i);
       E(this, o);
-      S(this, a, _(this, f, "white")), S(this, i, (_(this, n), _(this, t, !1))), S(this, o, (_(this, r), _(this, e, ""))), this._panelConnected = (_(this, s), new Q(this, p.events.panelConnected, { bubbles: !0 }));
+      S(this, a, _(this, f, "white")), S(this, i, (_(this, n), _(this, t, !1))), S(this, o, (_(this, r), _(this, e, ""))), this._panelConnected = (_(this, s), new J(this, p.events.panelConnected, { bubbles: !0 }));
     }
     /** The background color of the panel. */
     get color() {
@@ -929,7 +937,7 @@ const V = (d) => (() => {
   })(), p.events = {
     panelConnected: "panelConnected"
   }, p;
-})(), Ie = (d) => {
+})(), Ae = (d) => {
   class v extends d {
     constructor() {
       super(...arguments), this._updatePromise = Promise.resolve(), this._updateResolve = () => {
@@ -947,22 +955,22 @@ const V = (d) => (() => {
     }
   }
   return v;
-}, Ae = W`:host{--sbb-selection-panel-background: var( --sbb-selection-expansion-panel-inner-background, var(--sbb-color-white) );--sbb-selection-panel-border-color: var(--sbb-color-cloud);--sbb-selection-panel-border-radius: var( --sbb-selection-expansion-panel-border-radius, var(--sbb-border-radius-4x) );--sbb-selection-panel-border-width: var( --sbb-selection-expansion-panel-inner-border-width, var(--sbb-border-width-1x) );--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xs) var(--sbb-spacing-responsive-xxs);--sbb-selection-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-selection-panel-cursor: pointer;--sbb-selection-panel-suffix-color: var(--sbb-color-charcoal);--sbb-selection-panel-subtext-color: var(--sbb-color-granite);display:block;outline:none!important}:host([size=s]){--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxxs)}:host([color=milk]){--sbb-selection-panel-background: var( --sbb-selection-expansion-panel-inner-background, var(--sbb-color-milk) )}:host([borderless]:not([data-checked])){--sbb-selection-panel-border-color: transparent}:host(:is([data-checked]):not(:disabled,[disabled])){--sbb-selection-panel-border-color: var(--sbb-color-charcoal);--sbb-selection-panel-border-width: var( --sbb-selection-expansion-panel-inner-border-width, var(--sbb-border-width-2x) )}:host(:is(:disabled,[disabled])){--sbb-selection-panel-cursor: default}.sbb-selection-panel{display:block;cursor:var(--sbb-selection-panel-cursor);position:relative;border-radius:var(--sbb-selection-panel-border-radius);box-shadow:inset 0 0 0 var(--sbb-selection-panel-border-width) var(--sbb-selection-panel-border-color);padding:var(--sbb-selection-panel-input-padding);background-color:var(--sbb-selection-panel-background);transition-duration:var(--sbb-selection-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:box-shadow}@media (forced-colors: active){.sbb-selection-panel:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:var(--sbb-selection-panel-border-width) solid var(--sbb-selection-panel-border-color);border-radius:var(--sbb-selection-panel-border-radius)}}:host(:focus-visible) .sbb-selection-panel{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-selection-panel__badge{-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-selection-panel-border-radius);overflow:hidden}slot[name=suffix]{color:var(--sbb-selection-panel-suffix-color)}slot[name=subtext]{display:block;color:var(--sbb-selection-panel-subtext-color);padding-inline-start:var(--sbb-spacing-fixed-8x)}:host(:not([data-slot-names~=subtext])) slot[name=subtext]{display:none}`;
+}, Oe = W`:host{--sbb-selection-panel-background: var( --sbb-selection-expansion-panel-inner-background, var(--sbb-color-white) );--sbb-selection-panel-border-color: var(--sbb-color-cloud);--sbb-selection-panel-border-radius: var( --sbb-selection-expansion-panel-border-radius, var(--sbb-border-radius-4x) );--sbb-selection-panel-border-width: var( --sbb-selection-expansion-panel-inner-border-width, var(--sbb-border-width-1x) );--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xs) var(--sbb-spacing-responsive-xxs);--sbb-selection-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-selection-panel-cursor: pointer;--sbb-selection-panel-suffix-color: var(--sbb-color-charcoal);--sbb-selection-panel-subtext-color: var(--sbb-color-granite);display:block;outline:none!important}:host([size=s]){--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxxs)}:host([color=milk]){--sbb-selection-panel-background: var( --sbb-selection-expansion-panel-inner-background, var(--sbb-color-milk) )}:host([borderless]:not([data-checked])){--sbb-selection-panel-border-color: transparent}:host(:is([data-checked]):not(:disabled,[disabled])){--sbb-selection-panel-border-color: var(--sbb-color-charcoal);--sbb-selection-panel-border-width: var( --sbb-selection-expansion-panel-inner-border-width, var(--sbb-border-width-2x) )}:host(:is(:disabled,[disabled])){--sbb-selection-panel-cursor: default}.sbb-selection-panel{display:block;cursor:var(--sbb-selection-panel-cursor);position:relative;border-radius:var(--sbb-selection-panel-border-radius);box-shadow:inset 0 0 0 var(--sbb-selection-panel-border-width) var(--sbb-selection-panel-border-color);padding:var(--sbb-selection-panel-input-padding);background-color:var(--sbb-selection-panel-background);transition-duration:var(--sbb-selection-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:box-shadow}@media (forced-colors: active){.sbb-selection-panel:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:var(--sbb-selection-panel-border-width) solid var(--sbb-selection-panel-border-color);border-radius:var(--sbb-selection-panel-border-radius)}}:host(:focus-visible) .sbb-selection-panel{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-selection-panel__badge{-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-selection-panel-border-radius);overflow:hidden}slot[name=suffix]{color:var(--sbb-selection-panel-suffix-color)}slot[name=subtext]{display:block;color:var(--sbb-selection-panel-subtext-color);padding-inline-start:var(--sbb-spacing-fixed-8x)}:host(:not([data-slot-names~=subtext])) slot[name=subtext]{display:none}`;
 export {
-  _e as SbbAnimationCompleteMixin,
-  ne as SbbDisabledInteractiveMixin,
+  ye as SbbAnimationCompleteMixin,
+  re as SbbDisabledInteractiveMixin,
   B as SbbDisabledMixin,
-  ye as SbbDisabledTabIndexActionMixin,
-  ke as SbbFormAssociatedCheckboxMixin,
-  xe as SbbFormAssociatedInputMixin,
+  Se as SbbDisabledTabIndexActionMixin,
+  xe as SbbFormAssociatedCheckboxMixin,
+  Ce as SbbFormAssociatedInputMixin,
   V as SbbFormAssociatedMixin,
-  Ce as SbbFormAssociatedRadioButtonMixin,
-  le as SbbHydrationMixin,
-  Ee as SbbNamedSlotListMixin,
-  we as SbbNegativeMixin,
-  Re as SbbPanelMixin,
+  Ee as SbbFormAssociatedRadioButtonMixin,
+  oe as SbbHydrationMixin,
+  we as SbbNamedSlotListMixin,
+  Re as SbbNegativeMixin,
+  Ie as SbbPanelMixin,
   D as SbbRequiredMixin,
-  Ie as SbbUpdateSchedulerMixin,
-  Ae as panelCommonStyle,
-  z as radioButtonRegistry
+  Ae as SbbUpdateSchedulerMixin,
+  Oe as panelCommonStyle,
+  P as radioButtonRegistry
 };

package/core/overlay/overlay-trigger-attributes.d.ts

@@ -14,5 +14,5 @@ export declare function setAriaComboBoxAttributes(trigger: HTMLElement, overlayI
 /**
  * Remove aria attributes from trigger elements.
  */
-export declare function removeAriaComboBoxAttributes(trigger?: HTMLElement): void;
+export declare function removeAriaComboBoxAttributes(trigger?: HTMLElement | null): void;
 //# sourceMappingURL=overlay-trigger-attributes.d.ts.map

package/core/overlay/overlay-trigger-attributes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay-trigger-attributes.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/overlay/overlay-trigger-attributes.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,+BAA+B,CAC7C,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,MAAM,GAAG,QAAQ,EAC5B,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,MAAM,GACZ,IAAI,CAQN;AAED;;GAEG;AACH,wBAAgB,kCAAkC,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAQhG;AAED;;GAEG;AACH,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,OAAO,EACjB,QAAQ,GAAE,SAAS,GAAG,MAAkB,GACvC,IAAI,CAYN;AAED;;GAEG;AACH,wBAAgB,4BAA4B,CAAC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAYxE"}
+{"version":3,"file":"overlay-trigger-attributes.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/overlay/overlay-trigger-attributes.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,+BAA+B,CAC7C,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,MAAM,GAAG,QAAQ,EAC5B,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,MAAM,GACZ,IAAI,CAQN;AAED;;GAEG;AACH,wBAAgB,kCAAkC,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAQhG;AAED;;GAEG;AACH,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,OAAO,EACjB,QAAQ,GAAE,SAAS,GAAG,MAAkB,GACvC,IAAI,CAYN;AAED;;GAEG;AACH,wBAAgB,4BAA4B,CAAC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI,CAY/E"}

package/core/overlay/position.d.ts

@@ -16,7 +16,7 @@ export declare function getElementRectangle(el: HTMLElement): ElementRectangle;
 /**
  * Determines whether an event is fired on a specific element.
  */
-export declare function isEventOnElement(element: HTMLElement, event: MouseEvent | PointerEvent): boolean;
+export declare function isEventOnElement(element: HTMLElement | null, event: MouseEvent | PointerEvent): boolean;
 /**
  * Determines the position of an element relative to a trigger element by evaluating
  * the optimal position based on the available space.

package/core/overlay/position.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/overlay/position.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,WAAW,EACX,cAAc,GAAG,cAAc,GAAG,cAAc,GAAG,aAAa,GAAG,aAAa,GAAG,aAAa,CACjG,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,UAAU,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACvC,QAAQ,EAAE,OAAO,GAAG,OAAO,CAAC;CAC7B;AAED,MAAM,WAAW,uBAAuB;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,YAAY,CAAC;CACzB;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,EAAE,WAAW,GAAG,gBAAgB,CAoCrE;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,GAAG,YAAY,GAAG,OAAO,CAYhG;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,WAAW,EACtB,UAAU,CAAC,EAAE;IACX,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,GACA,uBAAuB,CAqGzB"}
+{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/overlay/position.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,WAAW,EACX,cAAc,GAAG,cAAc,GAAG,cAAc,GAAG,aAAa,GAAG,aAAa,GAAG,aAAa,CACjG,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,UAAU,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACvC,QAAQ,EAAE,OAAO,GAAG,OAAO,CAAC;CAC7B;AAED,MAAM,WAAW,uBAAuB;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,YAAY,CAAC;CACzB;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,EAAE,WAAW,GAAG,gBAAgB,CAoCrE;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,WAAW,GAAG,IAAI,EAC3B,KAAK,EAAE,UAAU,GAAG,YAAY,GAC/B,OAAO,CAYT;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,WAAW,EACtB,UAAU,CAAC,EAAE;IACX,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,GACA,uBAAuB,CAqGzB"}

package/core/styles/core.scss

@@ -2,11 +2,12 @@
   sbb-css-tokens;
 @use './core/mediaqueries';
 @use './core/functions';
-@use './mixins/font-face';
 @use './mixins/a11y';
+@use './mixins/font-face';
+@use './mixins/helpers';
+@use './mixins/inputs';
 @use './mixins/scrollbar';
 @use './mixins/typo';
-@use './mixins/helpers';
 
 @include helpers.box-sizing;
 
@@ -68,30 +69,82 @@ html {
   @include typo.placeholder;
 }
 
-// TODO: Remove if webkit bug is resolved: https://bugs.webkit.org/show_bug.cgi?id=223814
 sbb-form-field {
-  :where(input, textarea):disabled::placeholder {
-    color: var(--sbb-color-granite);
-    -webkit-text-fill-color: var(--sbb-color-granite);
+  :where(input, select, textarea, sbb-select, sbb-date-input) {
+    @include typo.text-m--regular;
+    @include helpers.ellipsis;
+    @include inputs.input-reset;
+
+    // Use !important here to not interfere with Firefox focus ring definition
+    // which appears in normalize CSS of several frameworks.
+    outline: none !important;
+    overflow: var(--sbb-form-field-overflow);
+    width: 100%;
+    box-sizing: border-box;
+    color: var(--sbb-form-field-text-color);
+
+    // Fill color needed for Safari
+    -webkit-text-fill-color: var(--sbb-form-field-text-color);
+    opacity: 1;
+    background-color: transparent;
+
+    // To be more specific than the styles in normalize.scss we need to use !important
+    // TODO: Find a better solution
+    font-size: var(--sbb-form-field-input-text-size) !important;
+    font-family: var(--sbb-typo-font-family) !important;
+    line-height: var(--sbb-typo-line-height-body-text) !important;
+
+    &::placeholder {
+      @include typo.placeholder;
+    }
   }
 
-  &[floating-label] :where(input, textarea)::placeholder,
+  &[floating-label] :where(input, select, textarea, sbb-select)::placeholder,
   // This covers the placeholder of the sbb-date-input
   &[floating-label] sbb-date-input::after {
-    color: transparent;
-    -webkit-text-fill-color: transparent;
+    color: transparent !important;
+    -webkit-text-fill-color: transparent !important;
 
     @include a11y.if-forced-colors {
-      color: Canvas;
-      -webkit-text-fill-color: Canvas;
+      color: Canvas !important;
+      -webkit-text-fill-color: Canvas !important;
     }
   }
 
-  textarea {
+  // TODO: Remove if webkit bug is resolved: https://bugs.webkit.org/show_bug.cgi?id=223814
+  &:not([floating-label]) :where(input, select, textarea, sbb-select):disabled::placeholder {
+    color: var(--sbb-color-granite);
+    -webkit-text-fill-color: var(--sbb-color-granite);
+  }
+
+  // Fix positioning issue for select which occurs in Safari
+  :where(select) {
+    vertical-align: middle;
+  }
+
+  :where(select, sbb-select) {
+    padding-inline-end: var(--sbb-form-field-select-inline-padding-end);
+  }
+
+  :where(textarea) {
     @include scrollbar.scrollbar;
+
+    & {
+      position: relative;
+      resize: none;
+
+      // White-space break needed for Firefox
+      white-space: break-spaces;
+      overflow-y: auto;
+      min-height: calc((var(--sbb-typo-line-height-body-text) * 1em));
+    }
   }
 
-  &[negative] textarea {
+  &[size='l'] :where(textarea) {
+    padding-block-end: #{functions.px-to-rem-build(5.5)};
+  }
+
+  &[negative] :where(textarea) {
     @include scrollbar.scrollbar($negative: true);
   }
 }
@@ -186,7 +239,7 @@ img {
 // TODO: Move back to the sbb-container components when the global CSS refactoring happens
 sbb-container {
   > [slot='image']:is(sbb-image, img),
-  > [slot='image'] :is(sbb-image, img) {
+  > [slot='image'] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
     --sbb-image-object-fit: cover;
 
     border-radius: var(--sbb-container-background-border-radius);
@@ -198,7 +251,7 @@ sbb-container {
 // TODO: Move back to the sbb-flip-card-summary components when the global CSS refactoring happens
 sbb-flip-card-summary {
   > [slot='image']:is(sbb-image, img),
-  > [slot='image'] :is(sbb-image, img) {
+  > [slot='image'] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
     --sbb-image-aspect-ratio: auto;
     --sbb-image-object-fit: cover;
 
@@ -211,7 +264,7 @@ sbb-flip-card-summary {
 // TODO: Move back to the sbb-lead-container components when the global CSS refactoring happens
 sbb-lead-container {
   > [slot='image']:is(sbb-image, img, picture),
-  > [slot='image'] :is(sbb-image, img, picture) {
+  > [slot='image'] :is(sbb-image, img, picture):not(.sbb-figure-overlap-image) {
     --sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio);
     --sbb-image-object-fit: cover;
 
@@ -222,7 +275,7 @@ sbb-lead-container {
 // TODO: Move back to the sbb-message components when the global CSS refactoring happens
 sbb-message {
   > [slot='image']:is(sbb-image, img),
-  > [slot='image'] :is(sbb-image, img) {
+  > [slot='image'] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
     border-radius: var(--sbb-message-image-border-radius);
   }
 }
@@ -244,7 +297,7 @@ sbb-message {
     }
   }
 
-  :is(sbb-image, img) {
+  :is(sbb-image, img):not(.sbb-figure-overlap-image) {
     will-change: filter;
     filter: brightness(var(--sbb-teaser-image-brightness, 1));
     transition: filter var(--sbb-teaser-image-animation-duration)
@@ -254,20 +307,20 @@ sbb-message {
 
 // TODO: Move back to the teaser components when the global CSS refactoring happens
 :is(sbb-teaser-product, sbb-teaser-product-static) {
-  :is(sbb-image, img) {
+  :is(sbb-image, img):not(.sbb-figure-overlap-image) {
     border-radius: 0; // Reset sbb-image border radius in order to control it from teaser product.
 
     --sbb-image-object-fit: cover;
     --sbb-image-aspect-ratio: 16 / 9;
   }
 
-  img {
+  img:not(.sbb-figure-overlap-image) {
     place-self: stretch;
   }
 }
 
 // TODO: Move back to the teaser components when the global CSS refactoring happens
-sbb-teaser :is(sbb-image, img) {
+sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;
   --sbb-image-aspect-ratio: 4 / 3;
 
@@ -277,8 +330,8 @@ sbb-teaser :is(sbb-image, img) {
 }
 
 // TODO: Move back to the teaser-hero components when the global CSS refactoring happens
-:is(sbb-teaser-hero) {
-  :is(sbb-image, img) {
+sbb-teaser-hero {
+  :is(sbb-image, img):not(.sbb-figure-overlap-image) {
     --sbb-image-aspect-ratio: 1 / 1;
 
     border-radius: 0;
@@ -288,7 +341,7 @@ sbb-teaser :is(sbb-image, img) {
     }
   }
 
-  img {
+  img:not(.sbb-figure-overlap-image) {
     display: block;
     align-self: stretch;
     width: 100%;
@@ -408,3 +461,15 @@ sbb-sidebar:has(sbb-sidebar-title) {
 sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
   margin-block-start: var(--sbb-header-height);
 }
+
+// We set some dimension to the selects trigger element in order that the screen reader's outline box looks more accurate.
+.sbb-select-trigger {
+  width: 100%;
+
+  // We set the smallest possible height (zero breakpoint, size s)
+  height: var(--sbb-size-element-xs);
+
+  sbb-form-field & {
+    top: 0;
+  }
+}

package/core/styles/image.scss

@@ -4,7 +4,7 @@
 .sbb-figure {
   @include image.figure;
 
-  :is(img, sbb-image, .sbb-image) {
+  :is(img, sbb-image, .sbb-image):not(.sbb-figure-overlap-image) {
     @include image.figure-image;
   }