@sbb-esta/lyne-elements 3.11.0 → 3.12.1

package/core/mixins/form-associated-input-mixin.js

@@ -1,24 +1,24 @@
-import { __esDecorate as r, __runInitializers as p } from "tslib";
-import { isServer as l, html as f } from "lit";
+import { __esDecorate as l, __runInitializers as f } from "tslib";
+import { isServer as r, html as m } from "lit";
 import { property as c, eventOptions as b } from "lit/decorators.js";
-import { sbbInputModalityDetector as m } from "../a11y.js";
-import { SbbLanguageController as g } from "../controllers.js";
-import { isWebkit as v } from "../dom.js";
-import { i18nInputRequired as _ } from "../i18n.js";
-import { SbbDisabledMixin as y } from "./disabled-mixin.js";
-import { SbbElementInternalsMixin as C } from "./element-internals-mixin.js";
-import { SbbFormAssociatedMixin as E } from "./form-associated-mixin.js";
-import { SbbReadonlyMixin as x } from "./readonly-mixin.js";
-import { SbbRequiredMixin as S } from "./required-mixin.js";
-const k = () => {
-  if (l)
+import { sbbInputModalityDetector as p } from "../a11y.js";
+import { SbbLanguageController as g, SbbMediaQueryPointerCoarse as _ } from "../controllers.js";
+import { isWebkit as v, isBlink as y } from "../dom.js";
+import { i18nInputRequired as C } from "../i18n.js";
+import { SbbDisabledMixin as E } from "./disabled-mixin.js";
+import { SbbElementInternalsMixin as S } from "./element-internals-mixin.js";
+import { SbbFormAssociatedMixin as x } from "./form-associated-mixin.js";
+import { SbbReadonlyMixin as k } from "./readonly-mixin.js";
+import { SbbRequiredMixin as w } from "./required-mixin.js";
+const A = () => {
+  if (r)
     return !1;
   const a = document.createElement("div");
   return a.setAttribute("contenteditable", "PLAINTEXT-ONLY"), a.contentEditable === "plaintext-only";
-}, w = k(), H = (a) => (() => {
+}, O = A(), z = (a) => (() => {
   var s;
-  let d = x(y(S(E(C(a))))), n = [], o, h, u;
-  return s = class extends d {
+  let h = k(E(w(x(S(a))))), n = [], d, u, o;
+  return s = class extends h {
     /**
      * Form type of element.
      * @default 'text'
@@ -30,7 +30,7 @@ const k = () => {
      * The value of the input. Reflects the current text value of this input.
      */
     set value(e) {
-      this._value = this._cleanText(e), this.hasUpdated && (this.innerHTML = this._value), this.dispatchEvent(new Event("displayvaluechange", { bubbles: !0, composed: !0 }));
+      this._value = this._cleanText(e), this.hasUpdated && this._assignValue(this._value), this.dispatchEvent(new Event("displayvaluechange", { bubbles: !0, composed: !0 }));
     }
     get value() {
       return this._value ?? "";
@@ -42,11 +42,11 @@ const k = () => {
       return this.getAttribute("placeholder") ?? "";
     }
     constructor() {
-      super(), this._shouldEmitChange = (p(this, n), !1), this._shouldTriggerSubmit = !1, this.language = new g(this), this._value = "", this.addEventListener?.("input", () => {
+      super(), this._shouldEmitChange = (f(this, n), !1), this._shouldTriggerSubmit = !1, this.language = new g(this), this._value = "", this.addEventListener?.("input", () => {
         const e = this._value;
         this._value = this._cleanText(this.textContent ?? ""), this.requestUpdate("value", e), this.internals.states.add("interacted"), this._shouldEmitChange = !0;
       }, { capture: !0 }), this.addEventListener?.("change", () => this._shouldEmitChange = !1, { capture: !0 }), this.addEventListener?.("keydown", (e) => {
-        if ((e.key === "Enter" || e.key === `
+        if (this._requiresEmptyPatch() && this._assignValue(""), (e.key === "Enter" || e.key === `
 `) && e.isTrusted)
           e.preventDefault(), e.stopImmediatePropagation(), this._shouldTriggerSubmit = this.dispatchEvent(new KeyboardEvent("keydown", e));
         else if (v && this.value && (e.key === "Backspace" || e.key === "Delete") && e.isTrusted) {
@@ -58,33 +58,37 @@ const k = () => {
           t.startOffset !== t.endOffset ? (t.deleteContents(), this._dispatchInputEvent()) : e.key === "Backspace" && t.startOffset > 0 ? (t.setStart(t.startContainer, t.startOffset - 1), t.deleteContents(), this._dispatchInputEvent()) : e.key === "Delete" && t.endOffset < this.value.length && (t.setEnd(t.endContainer, t.endOffset + 1), t.deleteContents(), this._dispatchInputEvent());
         }
       }, { capture: !0 }), this.addEventListener?.("keyup", (e) => {
-        (e.key === "Enter" || e.key === `
-`) && (this._emitChangeIfNecessary(), this._shouldTriggerSubmit && (this._shouldTriggerSubmit = !1, this.form?.requestSubmit()));
+        e.key === "Enter" || e.key === `
+` ? (this._emitChangeIfNecessary(), this._shouldTriggerSubmit && (this._shouldTriggerSubmit = !1, this.form?.requestSubmit())) : this._requiresEmptyPatch() && this._setCursorAt(0);
       }, { capture: !0 }), this.addEventListener?.("paste", (e) => {
-        e.preventDefault();
+        e.preventDefault(), this._requiresEmptyPatch() && this._assignValue("");
         const t = this._cleanText(e.clipboardData?.getData("text/plain") ?? ""), i = window.getSelection()?.getRangeAt(0);
         !i || !t || (i.deleteContents(), i.insertNode(document.createTextNode(this.preparePastedText(t))), i.setStart(i.endContainer, i.endOffset), this._dispatchInputEvent());
       }), this.addEventListener?.("focus", () => {
-        m.mostRecentModality === "keyboard" && window.getSelection()?.selectAllChildren(this);
+        p.mostRecentModality === "keyboard" && window.getSelection()?.selectAllChildren(this);
+      }), this.addEventListener?.("touchend", () => {
+        this._requiresEmptyPatch() && (this._assignValue("&nbsp;"), this._setCursorAt(0));
+      }), this.addEventListener?.("click", () => {
+        this._requiresEmptyPatch() && p.mostRecentModality === "touch" && this._setCursorAt(0);
       }), this.addEventListener?.("blur", () => {
-        window.getSelection()?.removeAllRanges(), this._emitChangeIfNecessary(), this.scrollLeft = 0;
+        window.getSelection()?.removeAllRanges(), this.value === "" && this._assignValue(""), this._emitChangeIfNecessary(), this.scrollLeft = 0;
       }, { capture: !0 });
     }
     isDisabledExternally() {
       return this.formDisabled;
     }
     connectedCallback() {
-      super.connectedCallback(), this.internals.ariaMultiLine = "false", this._updateContenteditable(), this.innerHTML = this.value;
+      super.connectedCallback(), this.internals.ariaMultiLine = "false", this._updateContenteditable(), this._assignValue(this.value);
     }
     focus(e) {
       if (super.focus(e), this._canSelect()) {
         const t = window.getSelection();
         if (!t)
           return;
-        let i = t.rangeCount > 0 ? t.getRangeAt(0) : null;
+        const i = t.rangeCount > 0 ? t.getRangeAt(0) : null;
         if (i && i.startOffset !== 0)
           return;
-        i = document.createRange(), i.setStart(this.firstChild, this.textContent.length), i.collapse(!0), t.removeAllRanges(), t.addRange(i);
+        this._setCursorAt(this.textContent.length);
       }
     }
     attributeChangedCallback(e, t, i) {
@@ -119,7 +123,7 @@ const k = () => {
       window.getSelection()?.selectAllChildren(this);
     }
     firstUpdated(e) {
-      super.firstUpdated(e), this.value && !this.innerHTML.length && (this.innerHTML = this.value);
+      super.firstUpdated(e), this.value && !this.innerHTML.length && this._assignValue(this.value);
     }
     requestUpdate(e, t, i) {
       super.requestUpdate(e, t, i), this.isConnected && (e === "disabled" || e === "formDisabled" || e === "readOnly") && this._updateContenteditable();
@@ -128,11 +132,24 @@ const k = () => {
       return super.shouldValidate(e) || e === "value" || e === "required";
     }
     validate() {
-      super.validate(), this.required && !this.value ? this.setValidityFlag("valueMissing", _[this.language.current]) : this.removeValidityFlag("valueMissing");
+      super.validate(), this.required && !this.value ? this.setValidityFlag("valueMissing", C[this.language.current]) : this.removeValidityFlag("valueMissing");
     }
     preparePastedText(e) {
       return e;
     }
+    _requiresEmptyPatch() {
+      return r ? !1 : y && this.value === "" && window.matchMedia(_).matches;
+    }
+    _assignValue(e) {
+      this.innerHTML = e;
+    }
+    _setCursorAt(e) {
+      const t = window.getSelection();
+      if (!t)
+        return;
+      const i = document.createRange();
+      i.setStart(this.firstChild, e), i.collapse(!0), t.removeAllRanges(), t.addRange(i);
+    }
     _cleanText(e) {
       return e === null ? "" : `${e}`.replace(/[\n\r]+/g, "");
     }
@@ -145,9 +162,9 @@ const k = () => {
           e.remove();
     }
     _updateContenteditable() {
-      if (!l && this.isConnected) {
+      if (!r && this.isConnected) {
         this.internals.ariaReadOnly = this.readOnly ? "true" : null, this.internals.ariaDisabled = this.disabled ? "true" : null;
-        const e = this.disabled || this.readOnly ? "false" : w ? "plaintext-only" : "true";
+        const e = this.disabled || this.readOnly ? "false" : O ? "plaintext-only" : "true";
         this.setAttribute("contenteditable", e), this.readOnly ? this.setAttribute("tabindex", "0") : this.removeAttribute("tabindex");
       }
     }
@@ -155,20 +172,20 @@ const k = () => {
       this._shouldEmitChange && (this._shouldEmitChange = !1, this.dispatchEvent(new Event("change", { bubbles: !0 })));
     }
     _canSelect() {
-      return !l && !this.disabled && !this.readOnly && !!this.value;
+      return !r && !this.disabled && !this.readOnly && !!this.value;
     }
     render() {
-      return f`<slot @slotchange=${this._cleanChildren}></slot>`;
+      return m`<slot @slotchange=${this._cleanChildren}></slot>`;
     }
   }, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
-    o = [c()], h = [c({ attribute: !1 })], u = [b({ passive: !0 })], r(s, null, o, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (t) => "value" in t, set: (t, i) => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
+    d = [c()], u = [c({ attribute: !1 })], o = [b({ passive: !0 })], l(s, null, d, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (t) => "value" in t, set: (t, i) => {
       t.value = i;
-    } }, metadata: e }, null, n), r(s, null, h, { kind: "setter", name: "placeholder", static: !1, private: !1, access: { has: (t) => "placeholder" in t, set: (t, i) => {
+    } }, metadata: e }, null, n), l(s, null, u, { kind: "setter", name: "placeholder", static: !1, private: !1, access: { has: (t) => "placeholder" in t, set: (t, i) => {
       t.placeholder = i;
-    } }, metadata: e }, null, n), r(s, null, u, { kind: "method", name: "_cleanChildren", static: !1, private: !1, access: { has: (t) => "_cleanChildren" in t, get: (t) => t._cleanChildren }, metadata: e }, null, n), e && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+    } }, metadata: e }, null, n), l(s, null, o, { kind: "method", name: "_cleanChildren", static: !1, private: !1, access: { has: (t) => "_cleanChildren" in t, get: (t) => t._cleanChildren }, metadata: e }, null, n), e && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
   })(), s.role = "textbox", s.formFieldAssociated = !0, s;
 })();
 export {
-  H as SbbFormAssociatedInputMixin
+  z as SbbFormAssociatedInputMixin
 };

package/core/mixins.js

@@ -14,7 +14,7 @@ import { SbbReadonlyMixin as P } from "./mixins/readonly-mixin.js";
 import { SbbSelectionPanelMixin as q } from "./mixins/selection-panel-mixin.js";
 import { SbbUpdateSchedulerMixin as H } from "./mixins/update-scheduler-mixin.js";
 import { css as e } from "lit";
-const n = e`:host{--sbb-selection-panel-background: var( --sbb-selection-panel-inner-background, var(--sbb-background-color-1) );--sbb-selection-panel-border-color: var(--sbb-border-color-4-inverted);--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-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-3);--sbb-selection-panel-subtext-color: var(--sbb-color-granite);--sbb-selection-panel-subtext-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));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-panel-inner-background, var(--sbb-background-color-3) )}: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-border-color-3);--sbb-selection-panel-border-width: var( --sbb-selection-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;inset: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) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}.sbb-selection-panel__badge{-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;inset: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}`;
+const n = e`:host{--sbb-selection-panel-background: var( --sbb-selection-panel-inner-background, var(--sbb-background-color-1) );--sbb-selection-panel-border-color: var(--sbb-border-color-4-inverted);--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-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-3);--sbb-selection-panel-subtext-color: var(--sbb-color-granite);--sbb-selection-panel-subtext-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));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-panel-inner-background, var(--sbb-background-color-3) )}: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-border-color-3);--sbb-selection-panel-border-width: var( --sbb-selection-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;inset: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) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}.sbb-selection-panel__badge{-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;inset: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 {
   b as SbbAnimationCompleteMixin,
   a as SbbDisabledInteractiveMixin,

package/core/overlay/overlay-option-panel.d.ts

@@ -5,6 +5,7 @@
  * @param optionContainer The reference to the option panel.
  * @param container The element which has the position:fixed applied.
  * @param element The reference to the component.
+ * @param position The allowed position of the overlay relative to the origin.
  */
-export declare function setOverlayPosition(dialog: HTMLElement, originElement: HTMLElement, optionContainer: HTMLElement, container: HTMLElement, element: HTMLElement): void;
+export declare function setOverlayPosition(dialog: HTMLElement, originElement: HTMLElement, optionContainer: HTMLElement, container: HTMLElement, element: HTMLElement, position?: 'auto' | 'above' | 'below'): void;
 //# sourceMappingURL=overlay-option-panel.d.ts.map

package/core/overlay/overlay-option-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay-option-panel.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/overlay/overlay-option-panel.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,WAAW,EACnB,aAAa,EAAE,WAAW,EAC1B,eAAe,EAAE,WAAW,EAC5B,SAAS,EAAE,WAAW,EACtB,OAAO,EAAE,WAAW,GACnB,IAAI,CAmBN"}
+{"version":3,"file":"overlay-option-panel.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/overlay/overlay-option-panel.ts"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,WAAW,EACnB,aAAa,EAAE,WAAW,EAC1B,eAAe,EAAE,WAAW,EAC5B,SAAS,EAAE,WAAW,EACtB,OAAO,EAAE,WAAW,EACpB,QAAQ,GAAE,MAAM,GAAG,OAAO,GAAG,OAAgB,GAC5C,IAAI,CAsBN"}

package/core/overlay/overlay-option-panel.js

@@ -1,11 +1,14 @@
-import { getElementPosition as a } from "./position.js";
-function r(p, o, i, e, t) {
-  if (!p || !o)
+import { getElementPosition as r } from "./position.js";
+function b(e, o, i, a, t, p = "auto") {
+  if (!e || !o)
     return;
   t.style.setProperty("--sbb-options-panel-width", `${o.offsetWidth}px`), t.style.setProperty("--sbb-options-panel-origin-height", `${o.offsetHeight}px`);
-  const s = a(i, o, e);
+  const s = r(i, o, a, {
+    forceBelow: p === "below",
+    forceAbove: p === "above"
+  });
   t.style.setProperty("--sbb-options-panel-position-x", `${s.left}px`), t.style.setProperty("--sbb-options-panel-position-y", `${s.top}px`), t.style.setProperty("--sbb-options-panel-max-height", s.maxHeight), t.setAttribute("data-options-panel-position", s.alignment.vertical), o.setAttribute("data-options-panel-position", s.alignment.vertical);
 }
 export {
-  r as setOverlayPosition
+  b as setOverlayPosition
 };

package/core/overlay/position.d.ts

@@ -37,6 +37,8 @@ export declare function getElementPosition(element: HTMLElement, trigger: HTMLEl
     horizontalOffset?: number;
     centered?: boolean;
     responsiveHeight?: boolean;
+    forceAbove?: boolean;
+    forceBelow?: boolean;
 }): SbbElementPositionInfos;
 /**
  * Determines the position of an element relative to a trigger element by evaluating

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,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;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,4BAA4B,CAC1C,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,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,GACA,uBAAuB,CAgEzB"}
+{"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;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,GACA,uBAAuB,CAsGzB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,4BAA4B,CAC1C,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,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,GACA,uBAAuB,CAgEzB"}

package/core/overlay/position.js

@@ -1,6 +1,6 @@
 function R(t) {
-  const o = window.getComputedStyle(t), c = o.display, h = parseInt(o.maxHeight, 10).toString();
-  if (c !== "none" && h !== "0")
+  const o = window.getComputedStyle(t), c = o.display, s = parseInt(o.maxHeight, 10).toString();
+  if (c !== "none" && s !== "0")
     return {
       scrollHeight: t.scrollHeight,
       clientHeight: t.clientHeight,
@@ -10,8 +10,8 @@ function R(t) {
       offsetWidth: t.offsetWidth
     };
   t.style.position = "absolute", t.style.visibility = "hidden", t.style.display = "block";
-  const v = t.scrollHeight, n = t.clientHeight, g = t.offsetHeight, r = t.scrollWidth, e = t.clientWidth, i = t.offsetWidth;
-  return t.style.display = "", t.style.position = "", t.style.visibility = "", { scrollHeight: v, clientHeight: n, offsetHeight: g, scrollWidth: r, clientWidth: e, offsetWidth: i };
+  const p = t.scrollHeight, n = t.clientHeight, g = t.offsetHeight, r = t.scrollWidth, e = t.clientWidth, i = t.offsetWidth;
+  return t.style.display = "", t.style.position = "", t.style.visibility = "", { scrollHeight: p, clientHeight: n, offsetHeight: g, scrollWidth: r, clientWidth: e, offsetWidth: i };
 }
 function x(t, o) {
   if (!t || !o)
@@ -19,33 +19,35 @@ function x(t, o) {
   const c = t.getBoundingClientRect();
   return c.top <= o.clientY && o.clientY <= c.top + c.height && c.left <= o.clientX && o.clientX <= c.left + c.width;
 }
-function y(t, o, c, h) {
-  const n = h?.verticalOffset || 0, g = h?.horizontalOffset || 0, r = h?.responsiveHeight || !1, e = o.getBoundingClientRect(), i = R(t), f = e.left, H = e.top, W = document.documentElement.clientWidth - (f + e.width), d = H - n, u = document.documentElement.clientHeight - (H + e.height + n);
-  let s = f, m = H + e.height + n, l = i.offsetWidth - e.width;
+function w(t, o, c, s) {
+  const n = s?.verticalOffset || 0, g = s?.horizontalOffset || 0, r = s?.responsiveHeight || !1, e = o.getBoundingClientRect(), i = R(t), f = e.left, H = e.top, W = document.documentElement.clientWidth - (f + e.width), d = H - n, u = document.documentElement.clientHeight - (H + e.height + n);
+  let h = f, m = H + e.height + n, l = i.offsetWidth - e.width;
   const a = { horizontal: "start", vertical: "below" };
   let O = `${u - n}px`;
-  h?.centered && f - 16 + e.width / 2 > i.offsetWidth / 2 && W - 16 > l / 2 && (s -= l /= 2, a.horizontal = "center"), W < l && f > l && (s = s - l, a.horizontal = "end"), g && a.horizontal !== "center" && e.width / 2 < g && (s += g * (a.horizontal === "start" ? -1 : 1)), (f < l && W < l || document.documentElement.clientWidth < i.offsetWidth) && (s = document.documentElement.clientWidth / 2 - i.offsetWidth / 2), (u - n < i.scrollHeight && d - n > (r ? i.clientHeight : i.scrollHeight) || d > u && u - n < i.clientHeight && !r) && (m = d < i.scrollHeight ? m - e.height - d - n : H - i.clientHeight - n, O = `${d - n}px`, a.vertical = "above");
-  const p = c.getBoundingClientRect();
-  return p.left < 0 && (s -= p.left), p.top < 0 && (m -= p.top), {
+  s?.centered && f - 16 + e.width / 2 > i.offsetWidth / 2 && W - 16 > l / 2 && (h -= l /= 2, a.horizontal = "center"), W < l && f > l && (h = h - l, a.horizontal = "end"), g && a.horizontal !== "center" && e.width / 2 < g && (h += g * (a.horizontal === "start" ? -1 : 1)), (f < l && W < l || document.documentElement.clientWidth < i.offsetWidth) && (h = document.documentElement.clientWidth / 2 - i.offsetWidth / 2);
+  const b = u - n < i.scrollHeight && d - n > (r ? i.clientHeight : i.scrollHeight) || d > u && u - n < i.clientHeight && !r;
+  !s?.forceBelow && (s?.forceAbove || b) && (m = d < i.scrollHeight ? m - e.height - d - n : H - i.clientHeight - n, O = `${d - n}px`, a.vertical = "above");
+  const v = c.getBoundingClientRect();
+  return v.left < 0 && (h -= v.left), v.top < 0 && (m -= v.top), {
     top: m,
-    left: s,
+    left: h,
     maxHeight: O,
     alignment: a
   };
 }
-function b(t, o, c, h) {
-  const n = h?.verticalOffset || 0, g = h?.horizontalOffset || 0, r = o.getBoundingClientRect(), e = R(t), i = o.parentElement.shadowRoot.querySelector(h?.contentSelector ?? `.${t.className}`).getBoundingClientRect(), f = c.getBoundingClientRect(), H = document.documentElement.clientWidth - i.right, W = document.documentElement.clientHeight - (r.top - n), d = document.documentElement.clientHeight, u = `${d - 32}px`, s = { horizontal: "end", vertical: "above" }, m = e.offsetWidth + g;
+function y(t, o, c, s) {
+  const n = s?.verticalOffset || 0, g = s?.horizontalOffset || 0, r = o.getBoundingClientRect(), e = R(t), i = o.parentElement.shadowRoot.querySelector(s?.contentSelector ?? `.${t.className}`).getBoundingClientRect(), f = c.getBoundingClientRect(), H = document.documentElement.clientWidth - i.right, W = document.documentElement.clientHeight - (r.top - n), d = document.documentElement.clientHeight, u = `${d - 32}px`, h = { horizontal: "end", vertical: "above" }, m = e.offsetWidth + g;
   let l = i.right, a = r.top + n;
-  return H < m && r.left > m && (l = l - i.width - e.offsetWidth, s.horizontal = "start"), g && s.horizontal !== "center" && (l += g * (s.horizontal === "start" ? -1 : 1)), W < e.scrollHeight && (a = d - e.clientHeight - 16), f.left < 0 && (l -= f.left), f.top < 0 && (a -= f.top), {
+  return H < m && r.left > m && (l = l - i.width - e.offsetWidth, h.horizontal = "start"), g && h.horizontal !== "center" && (l += g * (h.horizontal === "start" ? -1 : 1)), W < e.scrollHeight && (a = d - e.clientHeight - 16), f.left < 0 && (l -= f.left), f.top < 0 && (a -= f.top), {
     top: a,
     left: l,
     maxHeight: u,
-    alignment: s
+    alignment: h
   };
 }
 export {
-  y as getElementPosition,
-  b as getElementPositionHorizontal,
+  w as getElementPosition,
+  y as getElementPositionHorizontal,
   R as getElementRectangle,
   x as isEventOnElement
 };

package/core/styles/layout.scss

@@ -14,3 +14,7 @@
 .sbb-grid-expanded {
   @include layout.grid-base;
 }
+
+.sbb-grid-only {
+  @include layout.grid-base;
+}

package/core/styles/mixins/badge.scss

@@ -12,6 +12,9 @@
   color: var(--sbb-color-1-negative);
   min-width: var(--sbb-spacing-fixed-4x);
   max-height: var(--sbb-spacing-fixed-4x);
+
+  // Transparent outline is visible in forced colors mode to ensure readability
+  outline: var(--sbb-border-width-1x) solid transparent;
 }
 
 @mixin badge-attribute {

package/core/styles/mixins/layout.scss

@@ -1,7 +1,7 @@
 @use '../core/mediaqueries';
 
 @mixin page-spacing {
-  padding-inline: var(--sbb-layout-base-offset-responsive);
+  padding-inline: var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));
   margin-inline: auto;
 
   // If using page-spacing in flex context,
@@ -10,14 +10,15 @@
 
   @include mediaqueries.mq($from: ultra) {
     // Subtract padding to get real max-width
-    max-width: calc(
-      var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)
+    max-width: var(
+      --sbb-spacing-max-width,
+      calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))
     );
   }
 }
 
 @mixin page-spacing-expanded {
-  padding-inline: var(--sbb-spacing-responsive-xxs);
+  padding-inline: var(--sbb-page-spacing-padding, var(--sbb-spacing-responsive-xxs));
 }
 
 @mixin grid-base {

package/core/styles/mixins/link.scss

@@ -6,17 +6,10 @@
 @mixin link-common-variables {
   --sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-graphite));
   --sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-metal));
-  --sbb-link-text-decoration-color: light-dark(
-    color-mix(in srgb, currentcolor 80%, white),
-    color-mix(in srgb, currentcolor 80%, black)
-  );
-  --sbb-link-text-decoration-color-hover: currentcolor;
 }
 
 @mixin link-common-variables--negative {
   --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
-  --sbb-link-text-decoration-color: color-mix(in srgb, currentcolor 80%, black);
-  --sbb-link-text-decoration-color-hover: currentcolor;
 }
 
 @mixin block-link-variables {
@@ -39,14 +32,12 @@
 @mixin block-link-variables--active {
   --sbb-link-color-normal: light-dark(var(--sbb-color-black), var(--sbb-color-cement));
   --sbb-link-text-decoration-line: underline;
-  --sbb-link-text-decoration-color: currentcolor;
 }
 
 // To display a current active page, e.g. if the CSS class sbb-active is set
 @mixin block-link-variables--active-negative {
   --sbb-link-color-normal: var(--sbb-color-cement);
   --sbb-link-text-decoration-line: underline;
-  --sbb-link-text-decoration-color: currentcolor;
 }
 
 @mixin link-variables {
@@ -73,7 +64,6 @@
 @mixin link-base {
   color: var(--sbb-link-color-normal);
   text-decoration-line: var(--sbb-link-text-decoration-line, underline);
-  text-decoration-color: var(--sbb-link-text-decoration-color);
   text-decoration-thickness: #{functions.px-to-rem-build(1)};
   text-underline-offset: 0.3125em; // 5px
   user-select: none;
@@ -95,7 +85,6 @@
   @include mediaqueries.hover-mq($hover: true) {
     color: var(--sbb-link-color-hover);
     text-decoration-line: var(--sbb-link-hover-text-decoration, underline);
-    text-decoration-color: var(--sbb-link-text-decoration-color-hover);
   }
 }