@sbb-esta/lyne-elements 3.0.1 → 3.2.0

package/form-field/form-field/form-field.component.js

@@ -1,10 +1,10 @@
-var ae = (a) => {
-  throw TypeError(a);
+var oe = (o) => {
+  throw TypeError(o);
 };
-var le = (a, o, n) => o.has(a) || ae("Cannot " + n);
-var b = (a, o, n) => (le(a, o, "read from private field"), n ? n.call(a) : o.get(a)), d = (a, o, n) => o.has(a) ? ae("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(a) : o.set(a, n), i = (a, o, n, f) => (le(a, o, "write to private field"), f ? f.call(a, n) : o.set(a, n), n);
+var le = (o, l, n) => l.has(o) || oe("Cannot " + n);
+var b = (o, l, n) => (le(o, l, "read from private field"), n ? n.call(o) : l.get(o)), d = (o, l, n) => l.has(o) ? oe("Cannot add the same private member more than once") : l instanceof WeakSet ? l.add(o) : l.set(o, n), i = (o, l, n, f) => (le(o, l, "write to private field"), f ? f.call(o, n) : l.set(o, n), n);
 import { __esDecorate as c, __runInitializers as r } from "tslib";
-import { css as pe, LitElement as he, isServer as me, nothing as oe, html as I } from "lit";
+import { css as pe, LitElement as he, isServer as me, nothing as ae, html as I } from "lit";
 import { customElement as ue, property as p, state as S } from "lit/decorators.js";
 import { sbbInputModalityDetector as _e } from "../../core/a11y.js";
 import { SbbLanguageController as ge } from "../../core/controllers.js";
@@ -16,10 +16,18 @@ import "../../icon.js";
 const Se = pe`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:inline-block;--sbb-form-field-background-color: var(--sbb-color-white);--sbb-form-field-border-color: var(--sbb-color-smoke);--sbb-form-field-border-style: solid;--sbb-form-field-border-radius: var(--sbb-border-radius-4x);--sbb-form-field-border-width: var(--sbb-border-width-1x);--sbb-form-field-min-height: var(--sbb-size-element-m);--sbb-form-field-label-color: var(--sbb-color-metal);--sbb-form-field-prefix-color: var(--sbb-color-metal);--sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);--sbb-form-field-text-color: var(--sbb-color-charcoal);--sbb-form-field-arrow-color: var(--sbb-color-charcoal);--sbb-form-field-error-divider-width: var(--sbb-spacing-fixed-1x);--sbb-form-field-error-padding-block-start: var(--sbb-form-field-error-divider-width);--sbb-form-field-gap: var(--sbb-spacing-fixed-2x);--sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);--sbb-form-field-select-inline-padding-end: calc( var(--sbb-icon-svg-width) + var(--sbb-form-field-gap) );--sbb-form-field-overflow: hidden;--sbb-form-field-input-text-size: var(--sbb-font-size-text-m);--sbb-form-field-label-text-size: var(--sbb-font-size-text-xs);--sbb-form-field-label-size: calc( var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-body-text) );--sbb-form-field-text-line-height: calc( var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-body-text) );--sbb-form-field-margin-block-start: calc( ( var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var( --sbb-form-field-text-line-height ) + var(--sbb-form-field-label-to-input-overlapping) ) / 2 );--sbb-form-field-spacer-margin-block-end: calc( -1 * var(--sbb-form-field-label-to-input-overlapping) );--sbb-form-field-floating-label-transform: .53125rem;--sbb-icon-svg-width: var(--sbb-size-icon-ui-small);--sbb-icon-svg-height: var(--sbb-size-icon-ui-small);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default)}@media (min-width: 52.5rem){:host{--sbb-form-field-floating-label-transform: .65625rem}}@media (forced-colors: active){:host{--sbb-form-field-border-color: ButtonBorder}}:host(:where(:not([width=collapse]))){min-width:9.375rem;width:min(18.75rem,100%)}:host([negative]){--sbb-form-field-background-color: var(--sbb-color-midnight);--sbb-form-field-border-color: var(--sbb-color-smoke);--sbb-form-field-label-color: var(--sbb-color-smoke);--sbb-form-field-prefix-color: var(--sbb-color-smoke);--sbb-form-field-text-color: var(--sbb-color-milk);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-form-field-arrow-color: var(--sbb-color-milk)}@media (forced-colors: active){:host([negative]){--sbb-form-field-border-color: ButtonBorder}}:host([size=s]){--sbb-form-field-min-height: var(--sbb-size-element-xs);--sbb-form-field-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-form-field-input-text-size: var(--sbb-font-size-text-s);--sbb-form-field-label-text-size: var(--sbb-font-size-text-xxs);--sbb-form-field-label-to-input-overlapping: .625rem;--sbb-form-field-floating-label-transform: .34375rem;--sbb-form-field-spacer-margin-block-end: -.53125rem}@media (min-width: 52.5rem){:host([size=s]){--sbb-form-field-label-to-input-overlapping: .6875rem;--sbb-form-field-floating-label-transform: .3125rem;--sbb-form-field-spacer-margin-block-end: -.5rem}}:host([size=l]){--sbb-form-field-min-height: var(--sbb-size-element-l);--sbb-form-field-padding-inline: var(--sbb-spacing-responsive-xxxs)}:host([error-space=reserve]){--sbb-form-field-error-min-height: calc( var(--sbb-typo-line-height-body-text) * var(--sbb-font-size-text-xs) );--sbb-form-field-error-padding-block-start-override: var(--sbb-form-field-error-divider-width)}:host(:where(:state(readonly),[state--readonly],:state(disabled),[state--disabled])){--sbb-form-field-background-color: var(--sbb-color-milk);--sbb-form-field-border-color: var(--sbb-color-graphite);--sbb-form-field-arrow-color: var(--sbb-color-granite)}@media (forced-colors: active){:host(:where(:state(readonly),[state--readonly],:state(disabled),[state--disabled])){--sbb-form-field-border-color: ButtonBorder}}:host(:where(:state(readonly),[state--readonly],:state(disabled),[state--disabled])[negative]){--sbb-form-field-background-color: var(--sbb-color-charcoal);--sbb-form-field-border-color: var(--sbb-color-smoke);--sbb-form-field-arrow-color: var(--sbb-color-smoke)}:host(:where(:state(disabled),[state--disabled])){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: var(--sbb-color-granite);--sbb-form-field-border-style: dashed}@media (forced-colors: active){:host(:where(:state(disabled),[state--disabled])){--sbb-form-field-label-color: GrayText !important;--sbb-form-field-prefix-color: GrayText !important;--sbb-form-field-text-color: GrayText !important;--sbb-form-field-border-color: GrayText !important}}:host(:where(:state(disabled),[state--disabled])[negative]){--sbb-form-field-text-color: var(--sbb-color-smoke);--sbb-form-field-label-color: var(--sbb-color-smoke);--sbb-form-field-prefix-color: var(--sbb-color-smoke)}:host(:where(:state(readonly),[state--readonly]):not([negative])){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: var(--sbb-color-granite)}:host(:where(:state(focus),[state--focus])){--sbb-form-field-border-color: var(--sbb-color-charcoal);--sbb-form-field-prefix-color: var(--sbb-color-charcoal);--sbb-form-field-border-width: var(--sbb-border-width-2x)}:host(:where(:state(focus),[state--focus])[negative]){--sbb-form-field-border-color: var(--sbb-color-milk);--sbb-form-field-prefix-color: var(--sbb-color-milk)}@media (forced-colors: active){:host(:is(:state(focus),[state--focus])){--sbb-form-field-border-color: Highlight;--sbb-form-field-prefix-color: Highlight}}:host(:not(:where(:state(has-error),[state--has-error]))){--sbb-form-field-error-padding-block-start: 0}:host([floating-label]){--sbb-select-placeholder-color: transparent}@media (forced-colors: active){:host([floating-label]){--sbb-select-placeholder-color: Canvas}}:host(:is(:not([data-slot-names~=label]),[hidden-label])){--sbb-form-field-label-size: 0rem;--sbb-form-field-label-to-input-overlapping: 0rem}:host(:where(:state(input-type-sbb-slider),[state--input-type-sbb-slider])){--sbb-form-field-overflow: visible}:host(:where(:state(input-type-textarea),[state--input-type-textarea])){--sbb-form-field-max-height: fit-content}.sbb-form-field__space-wrapper{display:flex;flex-direction:column}.sbb-form-field__space-wrapper:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-form-field__wrapper{display:flex;gap:var(--sbb-form-field-gap);padding-inline:var(--sbb-form-field-padding-inline);border-radius:var(--sbb-form-field-border-radius);min-height:var(--sbb-form-field-min-height);max-height:var(--sbb-form-field-max-height);background-color:var(--sbb-form-field-background-color);position:relative}.sbb-form-field__wrapper:before{content:"";display:block;position:absolute;inset:0;border:var(--sbb-form-field-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);border-radius:var(--sbb-form-field-border-radius)}:host(:where(:state(focus),[state--focus]):where(:state(focus-origin-keyboard),[state--focus-origin-keyboard])) .sbb-form-field__wrapper{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: none){:host(:is([borderless],:where(:state(input-type-sbb-slider),[state--input-type-sbb-slider]))) .sbb-form-field__wrapper:before{border-color:transparent}:host(:where(:state(focus),[state--focus],:state(disabled),[state--disabled])[borderless]) .sbb-form-field__wrapper:after{content:"";position:absolute;border-block-end:var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);inset-inline:var(--sbb-form-field-padding-inline);inset-block-end:0}}::slotted(*[slot=prefix]){color:var(--sbb-form-field-prefix-color)}::slotted(*[slot=prefix]),::slotted(*[slot=suffix]){display:flex;min-width:var(--sbb-icon-svg-width);margin-block-start:calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2)}:host(:where(:state(empty),[state--empty],:state(disabled),[state--disabled],:state(readonly),[state--readonly])) ::slotted(sbb-form-field-clear){display:none}::slotted(sbb-datepicker-toggle){padding-block-end:calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2)}@media (forced-colors: active){::slotted(*[slot=suffix]){color:var(--sbb-form-field-prefix-color)}}.sbb-form-field__select-input-icon{top:50%;transform:translateY(-50%);position:absolute;inset-inline-end:0;margin-block-start:calc(-1 * var(--sbb-form-field-margin-block-start) / 2);pointer-events:none;color:var(--sbb-form-field-arrow-color)}.sbb-form-field__input-container{flex:1 1 auto;position:relative;margin-block-start:var(--sbb-form-field-margin-block-start);min-width:0}.sbb-form-field__label-spacer{display:flex;height:calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-body-text));margin-block-end:var(--sbb-form-field-spacer-margin-block-end)}:host(:not([data-slot-names~=label])) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){display:none}:host([hidden-label]) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-form-field__label{display:flex;max-width:100%;cursor:default;position:absolute;inset-block-start:0;color:var(--sbb-form-field-label-color);--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host([size=s]) .sbb-form-field__label{--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host(:where(:state(input-type-select),[state--input-type-select],:state(input-type-sbb-select),[state--input-type-sbb-select])) .sbb-form-field__label{padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}:host([floating-label]) .sbb-form-field__label{transform-origin:0 0;pointer-events:none;backface-visibility:hidden;will-change:transform,font-size;transition-duration:var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x));transition-timing-function:var(--sbb-animation-easing);transition-property:transform,font-size}:host([floating-label]:is(:not(:where(:state(focus),[state--focus]):not(:where(:state(input-type-sbb-select),[state--input-type-sbb-select])),:where(:state(has-popup-open),[state--has-popup-open])),:where(:state(readonly),[state--readonly])):where(:state(empty),[state--empty])) .sbb-form-field__label{font-size:var(--sbb-form-field-input-text-size);transform:translateY(var(--sbb-form-field-floating-label-transform))}@media (forced-colors: active){:host(:where(:state(input-type-textarea),[state--input-type-textarea])) .sbb-form-field__label{z-index:1}}.sbb-form-field__label-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-form-field__input{display:flex}:host([size=s]:is(:state(input-type-input),[state--input-type-input],:state(input-type-select),[state--input-type-select],:state(input-type-sbb-select),[state--input-type-sbb-select],:state(input-type-sbb-date-input),[state--input-type-sbb-date-input],:state(input-type-sbb-time-input),[state--input-type-sbb-time-input])) .sbb-form-field__input{margin-block-end:-.125rem}.sbb-form-field__error{display:flex;min-height:var(--sbb-form-field-error-min-height);margin-block-start:var(--sbb-form-field-error-padding-block-start-override, var(--sbb-form-field-error-padding-block-start))}`;
 let ne = 0;
 const z = /* @__PURE__ */ new WeakMap(), be = ["input", "textarea", "select"];
-let Ve = (() => {
-  var h, m, u, _, g, v, y, x, w, E, l;
-  let a = [ue("sbb-form-field"), ve()], o, n = [], f, A = we(Ee(ke(he))), L, N = [], C = [], F, U = [], B = [], O, $ = [], D = [], M, T = [], V = [], q, j = [], H = [], G, P = [], R = [], W, Y = [], J = [], K, Q = [], X = [], Z, ee = [], te = [], se, ie = [], re = [];
-  return l = class extends A {
+class Ve extends Event {
+  get control() {
+    return this._control;
+  }
+  constructor(l) {
+    super("formfieldcontrol"), this._control = l;
+  }
+}
+let qe = (() => {
+  var h, m, u, _, g, v, y, x, w, E, a;
+  let o = [ue("sbb-form-field"), ve()], l, n = [], f, A = we(Ee(ke(he))), L, N = [], C = [], F, U = [], B = [], O, $ = [], D = [], M, T = [], V = [], q, j = [], H = [], G, R = [], P = [], W, Y = [], J = [], K, Q = [], X = [], Z, ee = [], te = [], se, ie = [], re = [];
+  return a = class extends A {
     constructor() {
       super();
       d(this, h);
@@ -47,9 +55,9 @@ let Ve = (() => {
         "tel",
         "text",
         "url"
-      ], i(this, h, r(this, N, "none")), i(this, m, (r(this, C), r(this, U, !1))), i(this, u, (r(this, B), r(this, $, ye() ? "s" : "m"))), i(this, _, (r(this, D), r(this, T, !1))), i(this, g, (r(this, V), r(this, j, "default"))), i(this, v, (r(this, H), r(this, P, !1))), i(this, y, (r(this, R), r(this, Y, !1))), i(this, x, (r(this, J), r(this, Q, []))), i(this, w, (r(this, X), r(this, ee, void 0))), i(this, E, (r(this, te), r(this, ie, void 0))), this._language = (r(this, re), new ge(this)), this._formFieldAttributeObserver = me ? null : new MutationObserver((e) => {
+      ], i(this, h, r(this, N, "none")), i(this, m, (r(this, C), r(this, U, !1))), i(this, u, (r(this, B), r(this, $, ye() ? "s" : "m"))), i(this, _, (r(this, D), r(this, T, !1))), i(this, g, (r(this, V), r(this, j, "default"))), i(this, v, (r(this, H), r(this, R, !1))), i(this, y, (r(this, P), r(this, Y, !1))), i(this, x, (r(this, J), r(this, Q, []))), i(this, w, (r(this, X), r(this, ee, null))), i(this, E, (r(this, te), r(this, ie, void 0))), this._language = (r(this, re), new ge(this)), this._formFieldAttributeObserver = me ? null : new MutationObserver((e) => {
         e.some((t) => t.type === "attributes") && this._input && (this._readInputState(), this._registerInputFormListener(), this._checkAndUpdateInputEmpty());
-      }), this._inputFormAbortController = new AbortController(), this.addEventListener?.("focusin", (e) => {
+      }), this._inputFormAbortController = new AbortController(), this._control = null, this.addEventListener?.("focusin", (e) => {
         (e.target === this.inputElement || e.target === this.inputElement?.inputElement) && (this.internals.states.add("focus"), this.internals.states.add(`focus-origin-${_e.mostRecentModality}`));
       }, { passive: !0 }), this.addEventListener?.("focusout", (e) => {
         if (e.target === this.inputElement || e.target === this.inputElement?.inputElement) {
@@ -57,7 +65,9 @@ let Ve = (() => {
           for (const t of this.internals.states)
             t.startsWith("focus-origin-") && this.internals.states.delete(t);
         }
-      }, { passive: !0 }), this.addEventListener("input", () => this._checkAndUpdateInputEmpty()), this.addEventListener("displayvaluechange", () => this._checkAndUpdateInputEmpty()), this.addEventListener("invalid", (e) => e.preventDefault(), { capture: !0 });
+      }, { passive: !0 }), this.addEventListener("input", () => this._checkAndUpdateInputEmpty()), this.addEventListener("displayvaluechange", () => this._checkAndUpdateInputEmpty()), this.addEventListener("invalid", (e) => e.preventDefault(), { capture: !0 }), this.addEventListener("formfieldcontrol", (e) => {
+        this._control = e.control, this._connectInputElement() === "unchanged" && (this._assignErrorMessageElements(), this._readInputState(), this._checkAndUpdateInputEmpty());
+      });
     }
     /**
      * Whether to reserve space for an error message.
@@ -152,7 +162,7 @@ let Ve = (() => {
       super.disconnectedCallback(), this._formFieldAttributeObserver?.disconnect(), this._inputFormAbortController.abort(), this._input?.localName === "input" && this._unpatchInputValue();
     }
     _handleWrapperClick(e) {
-      this._isElementFocusExcluded(e) || e.target.localName !== "label" && (this._input?.localName === "sbb-select" && e.target.localName !== "sbb-select" && this._input.click(), this._input?.focus());
+      this._isElementFocusExcluded(e) || (this._control?.onContainerClick ? this._control?.onContainerClick(e) : e.target.localName !== "label" && (this._input?.localName === "sbb-select" && e.target.localName !== "sbb-select" && this._input.click(), this._input?.focus()));
     }
     _isElementFocusExcluded(e) {
       return e.composedPath().some((t) => t instanceof window.HTMLElement && (t.getAttribute("tabindex") === "0" || t.hasAttribute("contenteditable")) || this._excludedFocusElements.includes(t.localName));
@@ -171,17 +181,17 @@ let Ve = (() => {
       this.querySelectorAll("label:not([slot])").forEach((e) => e.setAttribute("slot", "label")), this.querySelectorAll("sbb-form-error:not([slot])").forEach((e) => e.setAttribute("slot", "error"));
     }
     _connectInputElement() {
-      const e = Array.from(this.querySelectorAll("*:not([slot],sbb-chip-group)")), t = e.find((s) => this._isInputElement(s)) || e[0];
-      if (t !== this._input) {
-        if (this._input && (this.internals.states.delete(`input-type-${this._input.localName}`), this._input.localName === "input" && this._unpatchInputValue()), !t) {
-          this._input = void 0;
-          return;
-        }
-        this._input = t, this._assignErrorMessageElements(), this._readInputState(), this._registerInputFormListener(), this._checkAndUpdateInputEmpty(), this._input.localName === "textarea" ? this._input.setAttribute("rows", this._input.getAttribute("rows") || "3") : this._input.localName === "input" ? this._patchInputValue() : (this._input.localName === "select" || this._input.localName === "sbb-select") && !this.hasUpdated && this.hydrationComplete.then(() => this.requestUpdate()), this._formFieldAttributeObserver?.disconnect(), this._formFieldAttributeObserver?.observe(this._input, {
-          attributes: !0,
-          attributeFilter: ["readonly", "disabled", "form", "class", "data-expanded"]
-        }), this.internals.states.add(`input-type-${this._input.localName}`), this._syncLabelInputReferences();
+      let e = null;
+      if (this._control?.id)
+        e = this.getRootNode().getElementById(this._control.id);
+      else {
+        const t = Array.from(this.querySelectorAll("*:not([slot],sbb-chip-group)"));
+        e = (t.find((s) => this._isInputElement(s)) || t[0]) ?? null;
       }
+      return e === this._input ? "unchanged" : (this._input && (this.internals.states.delete(`input-type-${this._input.localName}`), this._input.localName === "input" && this._unpatchInputValue()), e ? (this._input = e, this._registerInputFormListener(), this._assignErrorMessageElements(), this._readInputState(), this._checkAndUpdateInputEmpty(), this._input.localName === "textarea" ? this._input.setAttribute("rows", this._input.getAttribute("rows") || "3") : this._input.localName === "input" ? this._patchInputValue() : (this._input.localName === "select" || this._input.localName === "sbb-select") && !this.hasUpdated && this.hydrationComplete.then(() => this.requestUpdate()), this._formFieldAttributeObserver?.disconnect(), this._formFieldAttributeObserver?.observe(this._input, {
+        attributes: !0,
+        attributeFilter: ["readonly", "disabled", "form", "class", "data-expanded"]
+      }), this.internals.states.add(`input-type-${this._input.localName}`), this._syncLabelInputReferences(), "changed") : (this._input = null, "no-input"));
     }
     _syncLabelInputReferences() {
       if (!(!this._input || !this._label))
@@ -197,7 +207,7 @@ let Ve = (() => {
       return be.includes(e.localName) || !!customElements.get(e.localName)?.formAssociated;
     }
     _readInputState() {
-      this.toggleState("readonly", this._input.hasAttribute("readonly")), this.toggleState("disabled", this._input.hasAttribute("disabled")), this.toggleState("has-popup-open", this._input.hasAttribute("data-expanded"));
+      this.toggleState("readonly", this._control?.readOnly ?? this._input.hasAttribute("readonly")), this.toggleState("disabled", this._control?.disabled ?? this._input.hasAttribute("disabled")), this.toggleState("has-popup-open", this._input.hasAttribute("data-expanded"));
     }
     _registerInputFormListener() {
       this._inputFormAbortController.abort();
@@ -230,7 +240,7 @@ let Ve = (() => {
       t && (Object.defineProperty(e, "value", t), z.delete(e));
     }
     _checkAndUpdateInputEmpty() {
-      this.toggleState("empty", this._floatingLabelSupportedInputElements.includes(this._input?.localName) && this._isInputEmpty());
+      this.toggleState("empty", this._control?.empty ?? (this._floatingLabelSupportedInputElements.includes(this._input?.localName) && this._isInputEmpty()));
     }
     _isInputEmpty() {
       const e = this.querySelector("sbb-chip-group");
@@ -279,7 +289,7 @@ let Ve = (() => {
             <span class="sbb-form-field__label">
               <span class="sbb-form-field__label-ellipsis">
                 <slot name="label" @slotchange=${this._onSlotLabelChange}></slot>
-                ${this.optional ? I` <span aria-hidden="true"> ${xe[this._language.current]} </span>` : oe}
+                ${this.optional ? I` <span aria-hidden="true"> ${xe[this._language.current]} </span>` : ae}
               </span>
             </span>
             <div class="sbb-form-field__input">
@@ -288,7 +298,7 @@ let Ve = (() => {
             ${this.hasUpdated && ["select", "sbb-select"].includes(this._input?.localName) ? I`<sbb-icon
                   name="chevron-small-down-small"
                   class="sbb-form-field__select-input-icon"
-                ></sbb-icon>` : oe}
+                ></sbb-icon>` : ae}
           </div>
           <slot name="suffix" @slotchange=${this._syncNegative}></slot>
         </div>
@@ -299,31 +309,32 @@ let Ve = (() => {
       </div>
     `;
     }
-  }, h = new WeakMap(), m = new WeakMap(), u = new WeakMap(), _ = new WeakMap(), g = new WeakMap(), v = new WeakMap(), y = new WeakMap(), x = new WeakMap(), w = new WeakMap(), E = new WeakMap(), f = l, (() => {
+  }, h = new WeakMap(), m = new WeakMap(), u = new WeakMap(), _ = new WeakMap(), g = new WeakMap(), v = new WeakMap(), y = new WeakMap(), x = new WeakMap(), w = new WeakMap(), E = new WeakMap(), f = a, (() => {
     const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(A[Symbol.metadata] ?? null) : void 0;
-    L = [p({ attribute: "error-space", reflect: !0 })], F = [k(), p({ type: Boolean })], O = [p({ reflect: !0 })], M = [k(), p({ reflect: !0, type: Boolean })], q = [p({ reflect: !0 })], G = [k(), p({ attribute: "hidden-label", reflect: !0, type: Boolean })], W = [k(), p({ attribute: "floating-label", reflect: !0, type: Boolean })], K = [S()], Z = [S()], se = [S()], c(l, null, L, { kind: "accessor", name: "errorSpace", static: !1, private: !1, access: { has: (t) => "errorSpace" in t, get: (t) => t.errorSpace, set: (t, s) => {
+    L = [p({ attribute: "error-space", reflect: !0 })], F = [k(), p({ type: Boolean })], O = [p({ reflect: !0 })], M = [k(), p({ reflect: !0, type: Boolean })], q = [p({ reflect: !0 })], G = [k(), p({ attribute: "hidden-label", reflect: !0, type: Boolean })], W = [k(), p({ attribute: "floating-label", reflect: !0, type: Boolean })], K = [S()], Z = [S()], se = [S()], c(a, null, L, { kind: "accessor", name: "errorSpace", static: !1, private: !1, access: { has: (t) => "errorSpace" in t, get: (t) => t.errorSpace, set: (t, s) => {
       t.errorSpace = s;
-    } }, metadata: e }, N, C), c(l, null, F, { kind: "accessor", name: "optional", static: !1, private: !1, access: { has: (t) => "optional" in t, get: (t) => t.optional, set: (t, s) => {
+    } }, metadata: e }, N, C), c(a, null, F, { kind: "accessor", name: "optional", static: !1, private: !1, access: { has: (t) => "optional" in t, get: (t) => t.optional, set: (t, s) => {
       t.optional = s;
-    } }, metadata: e }, U, B), c(l, null, O, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, s) => {
+    } }, metadata: e }, U, B), c(a, null, O, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, s) => {
       t.size = s;
-    } }, metadata: e }, $, D), c(l, null, M, { kind: "accessor", name: "borderless", static: !1, private: !1, access: { has: (t) => "borderless" in t, get: (t) => t.borderless, set: (t, s) => {
+    } }, metadata: e }, $, D), c(a, null, M, { kind: "accessor", name: "borderless", static: !1, private: !1, access: { has: (t) => "borderless" in t, get: (t) => t.borderless, set: (t, s) => {
       t.borderless = s;
-    } }, metadata: e }, T, V), c(l, null, q, { kind: "accessor", name: "width", static: !1, private: !1, access: { has: (t) => "width" in t, get: (t) => t.width, set: (t, s) => {
+    } }, metadata: e }, T, V), c(a, null, q, { kind: "accessor", name: "width", static: !1, private: !1, access: { has: (t) => "width" in t, get: (t) => t.width, set: (t, s) => {
       t.width = s;
-    } }, metadata: e }, j, H), c(l, null, G, { kind: "accessor", name: "hiddenLabel", static: !1, private: !1, access: { has: (t) => "hiddenLabel" in t, get: (t) => t.hiddenLabel, set: (t, s) => {
+    } }, metadata: e }, j, H), c(a, null, G, { kind: "accessor", name: "hiddenLabel", static: !1, private: !1, access: { has: (t) => "hiddenLabel" in t, get: (t) => t.hiddenLabel, set: (t, s) => {
       t.hiddenLabel = s;
-    } }, metadata: e }, P, R), c(l, null, W, { kind: "accessor", name: "floatingLabel", static: !1, private: !1, access: { has: (t) => "floatingLabel" in t, get: (t) => t.floatingLabel, set: (t, s) => {
+    } }, metadata: e }, R, P), c(a, null, W, { kind: "accessor", name: "floatingLabel", static: !1, private: !1, access: { has: (t) => "floatingLabel" in t, get: (t) => t.floatingLabel, set: (t, s) => {
       t.floatingLabel = s;
-    } }, metadata: e }, Y, J), c(l, null, K, { kind: "accessor", name: "_errorElements", static: !1, private: !1, access: { has: (t) => "_errorElements" in t, get: (t) => t._errorElements, set: (t, s) => {
+    } }, metadata: e }, Y, J), c(a, null, K, { kind: "accessor", name: "_errorElements", static: !1, private: !1, access: { has: (t) => "_errorElements" in t, get: (t) => t._errorElements, set: (t, s) => {
       t._errorElements = s;
-    } }, metadata: e }, Q, X), c(l, null, Z, { kind: "accessor", name: "_input", static: !1, private: !1, access: { has: (t) => "_input" in t, get: (t) => t._input, set: (t, s) => {
+    } }, metadata: e }, Q, X), c(a, null, Z, { kind: "accessor", name: "_input", static: !1, private: !1, access: { has: (t) => "_input" in t, get: (t) => t._input, set: (t, s) => {
       t._input = s;
-    } }, metadata: e }, ee, te), c(l, null, se, { kind: "accessor", name: "_label", static: !1, private: !1, access: { has: (t) => "_label" in t, get: (t) => t._label, set: (t, s) => {
+    } }, metadata: e }, ee, te), c(a, null, se, { kind: "accessor", name: "_label", static: !1, private: !1, access: { has: (t) => "_label" in t, get: (t) => t._label, set: (t, s) => {
       t._label = s;
-    } }, metadata: e }, ie, re), c(null, o = { value: f }, a, { kind: "class", name: f.name, metadata: e }, null, n), f = o.value, e && Object.defineProperty(f, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), l.styles = Se, r(f, n), f;
+    } }, metadata: e }, ie, re), c(null, l = { value: f }, o, { kind: "class", name: f.name, metadata: e }, null, n), f = l.value, e && Object.defineProperty(f, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), a.styles = Se, r(f, n), f;
 })();
 export {
-  Ve as SbbFormFieldElement
+  Ve as SbbFormFieldControlEvent,
+  qe as SbbFormFieldElement
 };

package/form-field/form-field.js

@@ -1,4 +1,5 @@
-import { SbbFormFieldElement as o } from "./form-field/form-field.component.js";
+import { SbbFormFieldControlEvent as r, SbbFormFieldElement as b } from "./form-field/form-field.component.js";
 export {
-  o as SbbFormFieldElement
+  r as SbbFormFieldControlEvent,
+  b as SbbFormFieldElement
 };

package/form-field.js

@@ -1,6 +1,7 @@
-import { SbbFormFieldElement as m } from "./form-field/form-field/form-field.component.js";
-import { SbbFormFieldClearElement as l } from "./form-field/form-field-clear/form-field-clear.component.js";
+import { SbbFormFieldControlEvent as r, SbbFormFieldElement as l } from "./form-field/form-field/form-field.component.js";
+import { SbbFormFieldClearElement as b } from "./form-field/form-field-clear/form-field-clear.component.js";
 export {
-  l as SbbFormFieldClearElement,
-  m as SbbFormFieldElement
+  b as SbbFormFieldClearElement,
+  r as SbbFormFieldControlEvent,
+  l as SbbFormFieldElement
 };

package/header/header-environment/header-environment.component.d.ts

@@ -0,0 +1,23 @@
+import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
+declare const SbbHeaderEnvironmentElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbElementInternalsMixinType> & typeof LitElement & import('../../core/mixins.js').SbbElementInternalsConstructor;
+/**
+ * It displays a ribbon inside the header to indicate the current environment.
+ *
+ * @slot - Use the unnamed slot to add the environment.
+ *
+ * @cssprop [--sbb-header-environment-background-color=var(sbb-color-granite)] - Can be used change the ribbon color.
+ * @cssprop [--sbb-header-environment-color=var(sbb-color-white)] - Can be used change the text color.
+ */
+export declare class SbbHeaderEnvironmentElement extends SbbHeaderEnvironmentElement_base {
+    static styles: CSSResultGroup;
+    constructor();
+    private _slottedTextChange;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-header-environment': SbbHeaderEnvironmentElement;
+    }
+}
+export {};
+//# sourceMappingURL=header-environment.component.d.ts.map

package/header/header-environment/header-environment.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-environment.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/header/header-environment/header-environment.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAQ,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;;AAOjF;;;;;;;GAOG;AACH,qBAEM,2BAA4B,SAAQ,gCAAoC;IAC5E,OAAuB,MAAM,EAAE,cAAc,CAAS;;IActD,OAAO,CAAC,kBAAkB;cAQP,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,wBAAwB,EAAE,2BAA2B,CAAC;KACvD;CACF"}

package/header/header-environment/header-environment.component.js

@@ -0,0 +1,37 @@
+import { __esDecorate as i, __runInitializers as b } from "tslib";
+import { MutationController as l } from "@lit-labs/observers/mutation-controller.js";
+import { css as c, LitElement as d, html as v } from "lit";
+import { customElement as m } from "lit/decorators.js";
+import { SbbElementInternalsMixin as h } from "../../core/mixins.js";
+const u = c`*,:before,:after{box-sizing:border-box}:host{--sbb-header-environment-background-color: var(--sbb-color-granite);--sbb-header-environment-color: var(--sbb-color-white);--sbb-header-environment-size: 2.375rem;--sbb-header-environment-rotate: 45deg;position:absolute;inset-inline-end:0;inset-block-start:0;display:flex;align-items:center;justify-content:center}:host(:dir(rtl)){--sbb-header-environment-rotate: -45deg}:host(:is(:state(env-dev),[state--env-dev])){--sbb-header-environment-background-color: var(--sbb-color-orange)}:host(:is(:state(env-edu),[state--env-edu])){--sbb-header-environment-background-color: var(--sbb-color-green)}:host(:is(:state(env-int),[state--env-int])),:host(:is(:state(env-inte),[state--env-inte])){--sbb-header-environment-background-color: var(--sbb-color-granite)}:host(:is(:state(env-loc),[state--env-loc])){--sbb-header-environment-background-color: var(--sbb-color-pink)}:host(:is(:state(env-test),[state--env-test])){--sbb-header-environment-background-color: var(--sbb-color-sky)}:host:before{content:"";border-block-start:var(--sbb-header-environment-size) solid var(--sbb-header-environment-background-color);border-inline-start:var(--sbb-header-environment-size) solid transparent}.sbb-header-environment__text{--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700;position:absolute;color:var(--sbb-header-environment-color);rotate:var(--sbb-header-environment-rotate);padding-block-end:var(--sbb-spacing-fixed-4x)}`;
+let _ = (() => {
+  var t;
+  let a = [m("sbb-header-environment")], r, o = [], e, s = h(d);
+  return t = class extends s {
+    constructor() {
+      super(), this.addController(new l(this, {
+        config: { characterData: !0, subtree: !0 },
+        callback: () => {
+          this._slottedTextChange();
+        }
+      }));
+    }
+    _slottedTextChange() {
+      const n = this.textContent?.trim();
+      this.internals.states.clear(), n && this.toggleState(`env-${n}`, !0);
+    }
+    render() {
+      return v`
+      <span class="sbb-header-environment__text">
+        <slot></slot>
+      </span>
+    `;
+    }
+  }, e = t, (() => {
+    const n = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
+    i(null, r = { value: e }, a, { kind: "class", name: e.name, metadata: n }, null, o), e = r.value, n && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: n });
+  })(), t.styles = u, b(e, o), e;
+})();
+export {
+  _ as SbbHeaderEnvironmentElement
+};

package/header/header-environment.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @entrypoint
+ */
+export * from './header-environment/header-environment.component.js';
+//# sourceMappingURL=header-environment.d.ts.map

package/header/header-environment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-environment.d.ts","sourceRoot":"","sources":["../../../src/elements/header/header-environment.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,sDAAsD,CAAC"}

package/header/header-environment.js

@@ -0,0 +1,4 @@
+import { SbbHeaderEnvironmentElement as r } from "./header-environment/header-environment.component.js";
+export {
+  r as SbbHeaderEnvironmentElement
+};

package/index.d.ts

@@ -39,6 +39,7 @@ import { SbbIconSidebarContainerElement } from "./sidebar/icon-sidebar-container
 import { SbbIconSidebarButtonElement } from "./sidebar/icon-sidebar-button/icon-sidebar-button.component.js";
 import { SbbIconSidebarElement } from "./sidebar/icon-sidebar/icon-sidebar.component.js";
 import { SbbSelectionExpansionPanelElement } from "./selection-expansion-panel/selection-expansion-panel.component.js";
+import { SbbSelectionActionPanelElement } from "./selection-action-panel/selection-action-panel.component.js";
 import { SbbSelectElement } from "./select/select.component.js";
 import { SbbScreenReaderOnlyElement } from "./screen-reader-only/screen-reader-only.component.js";
 import { SbbRadioButtonPanelElement } from "./radio-button/radio-button-panel/radio-button-panel.component.js";
@@ -49,6 +50,7 @@ import { SbbPopoverElement } from "./popover/popover/popover.component.js";
 import { SbbPaginatorElement } from "./paginator/paginator/paginator.component.js";
 import { SbbCompactPaginatorElement } from "./paginator/compact-paginator/compact-paginator.component.js";
 import { SbbOverlayElement } from "./overlay/overlay.component.js";
+import { SbbOptionHintElement } from "./option/option-hint/option-hint.component.js";
 import { SbbOptionElement } from "./option/option/option.component.js";
 import { SbbOptGroupElement } from "./option/optgroup/optgroup.component.js";
 import { SbbNotificationElement } from "./notification/notification.component.js";
@@ -79,6 +81,7 @@ import { SbbJourneyHeaderElement } from "./journey-header/journey-header.compone
 import { SbbImageElement } from "./image/image.component.js";
 import { SbbIconElement } from "./icon/icon.component.js";
 import { SbbHeaderLinkElement } from "./header/header-link/header-link.component.js";
+import { SbbHeaderEnvironmentElement } from "./header/header-environment/header-environment.component.js";
 import { SbbHeaderButtonElement } from "./header/header-button/header-button.component.js";
 import { SbbHeaderElement } from "./header/header/header.component.js";
 import { SbbFormFieldClearElement } from "./form-field/form-field-clear/form-field-clear.component.js";
@@ -96,6 +99,7 @@ import { SbbExpansionPanelElement } from "./expansion-panel/expansion-panel/expa
 import { SbbDividerElement } from "./divider/divider.component.js";
 import { SbbDialogTitleElement } from "./dialog/dialog-title/dialog-title.component.js";
 import { SbbDialogContentElement } from "./dialog/dialog-content/dialog-content.component.js";
+import { SbbDialogCloseButtonElement } from "./dialog/dialog-close-button/dialog-close-button.component.js";
 import { SbbDialogActionsElement } from "./dialog/dialog-actions/dialog-actions.component.js";
 import { SbbDialogElement } from "./dialog/dialog/dialog.component.js";
 import { SbbDatepickerToggleElement } from "./datepicker/datepicker-toggle/datepicker-toggle.component.js";
@@ -190,6 +194,7 @@ declare global {
   var SbbDatepickerPreviousDayElement: SbbDatepickerPreviousDayElement;
   var SbbDatepickerToggleElement: SbbDatepickerToggleElement;
   var SbbDialogActionsElement: SbbDialogActionsElement;
+  var SbbDialogCloseButtonElement: SbbDialogCloseButtonElement;
   var SbbDialogContentElement: SbbDialogContentElement;
   var SbbDialogElement: SbbDialogElement;
   var SbbDialogTitleElement: SbbDialogTitleElement;
@@ -208,6 +213,7 @@ declare global {
   var SbbFormFieldElement: SbbFormFieldElement;
   var SbbHeaderButtonElement: SbbHeaderButtonElement;
   var SbbHeaderElement: SbbHeaderElement;
+  var SbbHeaderEnvironmentElement: SbbHeaderEnvironmentElement;
   var SbbHeaderLinkElement: SbbHeaderLinkElement;
   var SbbIconElement: SbbIconElement;
   var SbbIconSidebarButtonElement: SbbIconSidebarButtonElement;
@@ -242,6 +248,7 @@ declare global {
   var SbbNotificationElement: SbbNotificationElement;
   var SbbOptGroupElement: SbbOptGroupElement;
   var SbbOptionElement: SbbOptionElement;
+  var SbbOptionHintElement: SbbOptionHintElement;
   var SbbOverlayElement: SbbOverlayElement;
   var SbbPaginatorElement: SbbPaginatorElement;
   var SbbPopoverElement: SbbPopoverElement;
@@ -254,6 +261,7 @@ declare global {
   var SbbSecondaryButtonLinkElement: SbbSecondaryButtonLinkElement;
   var SbbSecondaryButtonStaticElement: SbbSecondaryButtonStaticElement;
   var SbbSelectElement: SbbSelectElement;
+  var SbbSelectionActionPanelElement: SbbSelectionActionPanelElement;
   var SbbSelectionExpansionPanelElement: SbbSelectionExpansionPanelElement;
   var SbbSidebarCloseButtonElement: SbbSidebarCloseButtonElement;
   var SbbSidebarContainerElement: SbbSidebarContainerElement;

package/index.js

@@ -39,6 +39,7 @@ import { SbbIconSidebarContainerElement } from "./sidebar/icon-sidebar-container
 import { SbbIconSidebarButtonElement } from "./sidebar/icon-sidebar-button/icon-sidebar-button.component.js";
 import { SbbIconSidebarElement } from "./sidebar/icon-sidebar/icon-sidebar.component.js";
 import { SbbSelectionExpansionPanelElement } from "./selection-expansion-panel/selection-expansion-panel.component.js";
+import { SbbSelectionActionPanelElement } from "./selection-action-panel/selection-action-panel.component.js";
 import { SbbSelectElement } from "./select/select.component.js";
 import { SbbScreenReaderOnlyElement } from "./screen-reader-only/screen-reader-only.component.js";
 import { SbbRadioButtonPanelElement } from "./radio-button/radio-button-panel/radio-button-panel.component.js";
@@ -49,6 +50,7 @@ import { SbbPopoverElement } from "./popover/popover/popover.component.js";
 import { SbbPaginatorElement } from "./paginator/paginator/paginator.component.js";
 import { SbbCompactPaginatorElement } from "./paginator/compact-paginator/compact-paginator.component.js";
 import { SbbOverlayElement } from "./overlay/overlay.component.js";
+import { SbbOptionHintElement } from "./option/option-hint/option-hint.component.js";
 import { SbbOptionElement } from "./option/option/option.component.js";
 import { SbbOptGroupElement } from "./option/optgroup/optgroup.component.js";
 import { SbbNotificationElement } from "./notification/notification.component.js";
@@ -79,6 +81,7 @@ import { SbbJourneyHeaderElement } from "./journey-header/journey-header.compone
 import { SbbImageElement } from "./image/image.component.js";
 import { SbbIconElement } from "./icon/icon.component.js";
 import { SbbHeaderLinkElement } from "./header/header-link/header-link.component.js";
+import { SbbHeaderEnvironmentElement } from "./header/header-environment/header-environment.component.js";
 import { SbbHeaderButtonElement } from "./header/header-button/header-button.component.js";
 import { SbbHeaderElement } from "./header/header/header.component.js";
 import { SbbFormFieldClearElement } from "./form-field/form-field-clear/form-field-clear.component.js";
@@ -96,6 +99,7 @@ import { SbbExpansionPanelElement } from "./expansion-panel/expansion-panel/expa
 import { SbbDividerElement } from "./divider/divider.component.js";
 import { SbbDialogTitleElement } from "./dialog/dialog-title/dialog-title.component.js";
 import { SbbDialogContentElement } from "./dialog/dialog-content/dialog-content.component.js";
+import { SbbDialogCloseButtonElement } from "./dialog/dialog-close-button/dialog-close-button.component.js";
 import { SbbDialogActionsElement } from "./dialog/dialog-actions/dialog-actions.component.js";
 import { SbbDialogElement } from "./dialog/dialog/dialog.component.js";
 import { SbbDatepickerToggleElement } from "./datepicker/datepicker-toggle/datepicker-toggle.component.js";
@@ -189,6 +193,7 @@ globalThis.SbbDatepickerNextDayElement = SbbDatepickerNextDayElement;
 globalThis.SbbDatepickerPreviousDayElement = SbbDatepickerPreviousDayElement;
 globalThis.SbbDatepickerToggleElement = SbbDatepickerToggleElement;
 globalThis.SbbDialogActionsElement = SbbDialogActionsElement;
+globalThis.SbbDialogCloseButtonElement = SbbDialogCloseButtonElement;
 globalThis.SbbDialogContentElement = SbbDialogContentElement;
 globalThis.SbbDialogElement = SbbDialogElement;
 globalThis.SbbDialogTitleElement = SbbDialogTitleElement;
@@ -207,6 +212,7 @@ globalThis.SbbFormFieldClearElement = SbbFormFieldClearElement;
 globalThis.SbbFormFieldElement = SbbFormFieldElement;
 globalThis.SbbHeaderButtonElement = SbbHeaderButtonElement;
 globalThis.SbbHeaderElement = SbbHeaderElement;
+globalThis.SbbHeaderEnvironmentElement = SbbHeaderEnvironmentElement;
 globalThis.SbbHeaderLinkElement = SbbHeaderLinkElement;
 globalThis.SbbIconElement = SbbIconElement;
 globalThis.SbbIconSidebarButtonElement = SbbIconSidebarButtonElement;
@@ -241,6 +247,7 @@ globalThis.SbbNavigationSectionElement = SbbNavigationSectionElement;
 globalThis.SbbNotificationElement = SbbNotificationElement;
 globalThis.SbbOptGroupElement = SbbOptGroupElement;
 globalThis.SbbOptionElement = SbbOptionElement;
+globalThis.SbbOptionHintElement = SbbOptionHintElement;
 globalThis.SbbOverlayElement = SbbOverlayElement;
 globalThis.SbbPaginatorElement = SbbPaginatorElement;
 globalThis.SbbPopoverElement = SbbPopoverElement;
@@ -253,6 +260,7 @@ globalThis.SbbSecondaryButtonElement = SbbSecondaryButtonElement;
 globalThis.SbbSecondaryButtonLinkElement = SbbSecondaryButtonLinkElement;
 globalThis.SbbSecondaryButtonStaticElement = SbbSecondaryButtonStaticElement;
 globalThis.SbbSelectElement = SbbSelectElement;
+globalThis.SbbSelectionActionPanelElement = SbbSelectionActionPanelElement;
 globalThis.SbbSelectionExpansionPanelElement = SbbSelectionExpansionPanelElement;
 globalThis.SbbSidebarCloseButtonElement = SbbSidebarCloseButtonElement;
 globalThis.SbbSidebarContainerElement = SbbSidebarContainerElement;

package/menu/menu/menu.component.d.ts

@@ -13,6 +13,7 @@ declare const SbbMenuElement_base: import('../../core/mixins.js').AbstractConstr
  */
 export declare class SbbMenuElement extends SbbMenuElement_base {
     static styles: CSSResultGroup;
+    static readonly role = "menu";
     protected readonly listChildLocalNames: string[];
     /**
      * The element that will trigger the menu overlay.

package/menu/menu/menu.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/menu/menu/menu.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAGnB,KAAK,mBAAmB,EACxB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAUb,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAiBtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;;AAkB1D;;;;;;;GAOG;AACH,qBAEM,cAAe,SAAQ,mBAGH;IACxB,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAAwC;IAEvF;;;;OAIG;IACH,SAEgB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAQ;IAEnD;;;OAGG;IACH,SAEgB,sBAAsB,EAAE,MAAM,CAAM;IAEpD,OAAO,CAAC,KAAK,CAAkB;IAC/B,OAAO,CAAC,eAAe,CAA4B;IACnD,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,yBAAyB,CAAkB;IACnD,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,2BAA2B,CAA2C;IAC9E,OAAO,CAAC,oBAAoB,CAAoC;IAChE,OAAO,CAAC,cAAc,CAA0B;IAChD,OAAO,CAAC,gBAAgB,CAAgC;IACxD,OAAO,CAAC,aAAa,CAQlB;;IAQH;;OAEG;IACI,IAAI,IAAI,IAAI;IAyBnB;;OAEG;IACI,KAAK,IAAI,IAAI;IAepB,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,cAAc;IAsBtB;;OAEG;IACH,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,cAAc;cA2CH,gBAAgB,IAAI,WAAW,GAAG,gBAAgB;IAWrD,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAQ5B,aAAa,CAC3B,IAAI,CAAC,EAAE,WAAW,EAClB,QAAQ,CAAC,EAAE,OAAO,EAClB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,IAAI;cAQY,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAK9E,OAAO,CAAC,cAAc;IAmBtB,OAAO,CAAC,iBAAiB;IAoBzB,OAAO,CAAC,mBAAmB;IAuB3B,OAAO,CAAC,+BAA+B;IAQvC,OAAO,CAAC,oBAAoB,CAE1B;IAGF,OAAO,CAAC,qBAAqB,CAI3B;IAMF,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,gBAAgB;cAyBL,MAAM,IAAI,cAAc;CAsB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}
+{"version":3,"file":"menu.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/menu/menu/menu.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAGnB,KAAK,mBAAmB,EACxB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAUb,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAiBtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;;AAkB1D;;;;;;;GAOG;AACH,qBAEM,cAAe,SAAQ,mBAGH;IACxB,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAgC,IAAI,UAAU;IAC9C,mBAA4B,mBAAmB,WAAwC;IAEvF;;;;OAIG;IACH,SAEgB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAQ;IAEnD;;;OAGG;IACH,SAEgB,sBAAsB,EAAE,MAAM,CAAM;IAEpD,OAAO,CAAC,KAAK,CAAkB;IAC/B,OAAO,CAAC,eAAe,CAA4B;IACnD,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,yBAAyB,CAAkB;IACnD,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,2BAA2B,CAA2C;IAC9E,OAAO,CAAC,oBAAoB,CAAoC;IAChE,OAAO,CAAC,cAAc,CAA0B;IAChD,OAAO,CAAC,gBAAgB,CAAgC;IACxD,OAAO,CAAC,aAAa,CAQlB;;IAQH;;OAEG;IACI,IAAI,IAAI,IAAI;IAyBnB;;OAEG;IACI,KAAK,IAAI,IAAI;IAepB,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,cAAc;IAsBtB;;OAEG;IACH,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,cAAc;cA2CH,gBAAgB,IAAI,WAAW,GAAG,gBAAgB;IAWrD,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAQ5B,aAAa,CAC3B,IAAI,CAAC,EAAE,WAAW,EAClB,QAAQ,CAAC,EAAE,OAAO,EAClB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,IAAI;cAQY,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAK9E,OAAO,CAAC,cAAc;IAmBtB,OAAO,CAAC,iBAAiB;IAoBzB,OAAO,CAAC,mBAAmB;IAuB3B,OAAO,CAAC,+BAA+B;IAQvC,OAAO,CAAC,oBAAoB,CAE1B;IAGF,OAAO,CAAC,qBAAqB,CAI3B;IAMF,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,gBAAgB;cAyBL,MAAM,IAAI,cAAc;CAsB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}

package/menu/menu/menu.component.js

@@ -213,7 +213,7 @@ let ee = 0, ge = (() => {
     } }, metadata: e }, w, y), p(o, null, k, { kind: "accessor", name: "listAccessibilityLabel", static: !1, private: !1, access: { has: (t) => "listAccessibilityLabel" in t, get: (t) => t.listAccessibilityLabel, set: (t, a) => {
       t.listAccessibilityLabel = a;
     } }, metadata: e }, x, E), p(null, s = { value: n }, i, { kind: "class", name: n.name, metadata: e }, null, r), n = s.value, e && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), o.styles = G, m(n, r), n;
+  })(), o.styles = G, o.role = "menu", m(n, r), n;
 })();
 export {
   ge as SbbMenuElement

package/menu/menu-button/menu-button.component.d.ts

@@ -9,6 +9,7 @@ declare const SbbMenuButtonElement_base: import('../../core/mixins.js').Abstract
  * to modify horizontal padding.
  */
 export declare class SbbMenuButtonElement extends SbbMenuButtonElement_base {
+    static readonly role: ElementInternals['role'];
 }
 declare global {
     interface HTMLElementTagNameMap {

package/menu/menu-button/menu-button.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-button.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/menu/menu-button/menu-button.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;;AAInE;;;;;;;GAOG;AACH,qBAEM,oBAAqB,SAAQ,yBAElC;CAAG;AAEJ,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}
+{"version":3,"file":"menu-button.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/menu/menu-button/menu-button.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;;AAInE;;;;;;;GAOG;AACH,qBAEM,oBAAqB,SAAQ,yBAElC;IACC,gBAAgC,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAc;CAC7E;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}

package/menu/menu-button/menu-button.component.js

@@ -1,16 +1,16 @@
-import { __esDecorate as i, __runInitializers as m } from "tslib";
+import { __esDecorate as r, __runInitializers as m } from "tslib";
 import { customElement as s } from "lit/decorators.js";
-import { SbbButtonBaseElement as b } from "../../core/base-elements.js";
+import { SbbButtonBaseElement as c } from "../../core/base-elements.js";
 import { SbbDisabledTabIndexActionMixin as u } from "../../core/mixins.js";
-import { SbbMenuActionCommonElementMixin as c } from "../common.js";
+import { SbbMenuActionCommonElementMixin as b } from "../common.js";
 let x = (() => {
   var e;
-  let r = [s("sbb-menu-button")], l, n = [], t, o = u(c(b));
-  return e = class extends o {
+  let o = [s("sbb-menu-button")], l, i = [], t, n = u(b(c));
+  return e = class extends n {
   }, t = e, (() => {
-    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
-    i(null, l = { value: t }, r, { kind: "class", name: t.name, metadata: a }, null, n), t = l.value, a && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a }), m(t, n);
-  })(), t;
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
+    r(null, l = { value: t }, o, { kind: "class", name: t.name, metadata: a }, null, i), t = l.value, a && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+  })(), e.role = "menuitem", m(t, i), t;
 })();
 export {
   x as SbbMenuButtonElement

package/menu/menu-link/menu-link.component.d.ts

@@ -9,6 +9,7 @@ declare const SbbMenuLinkElement_base: import('../../core/mixins.js').AbstractCo
  * to modify horizontal padding.
  */
 export declare class SbbMenuLinkElement extends SbbMenuLinkElement_base {
+    protected readonly anchorRole = "menuitem";
 }
 declare global {
     interface HTMLElementTagNameMap {

package/menu/menu-link/menu-link.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-link.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/menu/menu-link/menu-link.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;;AAIjE;;;;;;;GAOG;AACH,qBAEM,kBAAmB,SAAQ,uBAEhC;CAAG;AAEJ,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF"}
+{"version":3,"file":"menu-link.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/menu/menu-link/menu-link.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;;AAIjE;;;;;;;GAOG;AACH,qBAEM,kBAAmB,SAAQ,uBAEhC;IACC,mBAA4B,UAAU,cAAc;CACrD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF"}

package/menu/menu-link/menu-link.component.js

@@ -1,15 +1,18 @@
 import { __esDecorate as m, __runInitializers as o } from "tslib";
 import { customElement as s } from "lit/decorators.js";
 import { SbbLinkBaseElement as c } from "../../core/base-elements.js";
-import { SbbDisabledInteractiveMixin as b } from "../../core/mixins.js";
-import { SbbMenuActionCommonElementMixin as u } from "../common.js";
+import { SbbDisabledInteractiveMixin as u } from "../../core/mixins.js";
+import { SbbMenuActionCommonElementMixin as b } from "../common.js";
 let y = (() => {
   var t;
-  let n = [s("sbb-menu-link")], l, i = [], e, r = b(u(c));
-  return t = class extends r {
+  let i = [s("sbb-menu-link")], l, r = [], e, n = u(b(c));
+  return t = class extends n {
+    constructor() {
+      super(...arguments), this.anchorRole = "menuitem";
+    }
   }, e = t, (() => {
-    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
-    m(null, l = { value: e }, n, { kind: "class", name: e.name, metadata: a }, null, i), e = l.value, a && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a }), o(e, i);
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
+    m(null, l = { value: e }, i, { kind: "class", name: e.name, metadata: a }, null, r), e = l.value, a && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a }), o(e, r);
   })(), e;
 })();
 export {

package/option/optgroup/optgroup-base-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"optgroup-base-element.d.ts","sourceRoot":"","sources":["../../../../src/elements/option/optgroup/optgroup-base-element.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAGb,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAQxE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAIzD,OAAO,kBAAkB,CAAC;;AAS1B,8BAAsB,sBAAuB,SAAQ,2BAEpD;IACC,gBAAgC,IAAI,gBAAqC;IACzE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,0BAA0B;IAC1B,SAEgB,KAAK,EAAE,MAAM,CAAM;IAE1B,SAAS,CAAC,QAAQ,CAAC,QAAQ,UAAS;IAEpC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAS;IAEnD,SAAS,CAAC,QAAQ,KAAK,OAAO,IAAI,oBAAoB,EAAE,CAAC;;IAwBzC,iBAAiB,IAAI,IAAI;cAMtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAe5E,SAAS,CAAC,QAAQ,CAAC,sBAAsB,IAAI,IAAI;IACjD,SAAS,CAAC,QAAQ,CAAC,qBAAqB,IAAI,0BAA0B,GAAG,IAAI;IAE7E,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,yBAAyB;IAkBjC,SAAS,CAAC,sBAAsB,IAAI,IAAI;IAMxC,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,iBAAiB;cAIN,MAAM,IAAI,cAAc;CAY5C"}
+{"version":3,"file":"optgroup-base-element.d.ts","sourceRoot":"","sources":["../../../../src/elements/option/optgroup/optgroup-base-element.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAGb,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAQxE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAIzD,OAAO,kBAAkB,CAAC;;AAS1B,8BAAsB,sBAAuB,SAAQ,2BAEpD;IACC,gBAAgC,IAAI,gBAAqC;IACzE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,0BAA0B;IAC1B,SAEgB,KAAK,EAAE,MAAM,CAAM;IAE1B,SAAS,CAAC,QAAQ,CAAC,QAAQ,UAAS;IAEpC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAS;IAEnD,SAAS,CAAC,QAAQ,KAAK,OAAO,IAAI,oBAAoB,EAAE,CAAC;;IAwBzC,iBAAiB,IAAI,IAAI;cAMtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAe5E,SAAS,CAAC,QAAQ,CAAC,sBAAsB,IAAI,IAAI;IACjD,SAAS,CAAC,QAAQ,CAAC,qBAAqB,IAAI,0BAA0B,GAAG,IAAI;IAE7E,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,yBAAyB;IAkBjC,SAAS,CAAC,sBAAsB,IAAI,IAAI;IAMxC,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,iBAAiB;cAIN,MAAM,IAAI,cAAc;CAgB5C"}