@sbb-esta/lyne-elements 2.5.1 → 2.7.0

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

@@ -0,0 +1,11 @@
+import { getElementPosition as a } from "./position.js";
+function r(p, o, i, e, t) {
+  if (!p || !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);
+  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
+};

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/overlay-trigger-attributes.js

@@ -0,0 +1,18 @@
+function u(t, e, a, o) {
+  t && (t.setAttribute("aria-haspopup", e), t.setAttribute("aria-controls", a), t.setAttribute("aria-expanded", `${o === "opening" || o === "opened"}`));
+}
+function i(t) {
+  t && (t.removeAttribute("aria-haspopup"), t.removeAttribute("aria-controls"), t.removeAttribute("aria-expanded"));
+}
+function r(t, e, a, o = "listbox") {
+  t && (t.setAttribute("autocomplete", "off"), t.setAttribute("role", "combobox"), t.setAttribute("aria-autocomplete", "list"), t.setAttribute("aria-haspopup", o), t.setAttribute("aria-controls", e), t.setAttribute("aria-owns", e), t.setAttribute("aria-expanded", `${a}`));
+}
+function b(t) {
+  t && (t.removeAttribute("autocomplete"), t.removeAttribute("role"), t.removeAttribute("aria-autocomplete"), t.removeAttribute("aria-haspopup"), t.removeAttribute("aria-controls"), t.removeAttribute("aria-owns"), t.removeAttribute("aria-expanded"));
+}
+export {
+  b as removeAriaComboBoxAttributes,
+  i as removeAriaOverlayTriggerAttributes,
+  r as setAriaComboBoxAttributes,
+  u as setAriaOverlayTriggerAttributes
+};

package/core/overlay/overlay.js

@@ -0,0 +1,14 @@
+import { html as i } from "lit";
+function s() {
+  return i`
+    <div class="sbb-gap-fix-wrapper">
+      <div class="sbb-gap-fix-corner" id="left"></div>
+    </div>
+    <div class="sbb-gap-fix-wrapper">
+      <div class="sbb-gap-fix-corner" id="right"></div>
+    </div>
+  `;
+}
+export {
+  s as overlayGapFixCorners
+};

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/overlay/position.js

@@ -0,0 +1,40 @@
+function w(t) {
+  const o = window.getComputedStyle(t), c = o.display, e = parseInt(o.maxHeight, 10).toString();
+  if (c !== "none" && e !== "0")
+    return {
+      scrollHeight: t.scrollHeight,
+      clientHeight: t.clientHeight,
+      offsetHeight: t.offsetHeight,
+      scrollWidth: t.scrollWidth,
+      clientWidth: t.clientWidth,
+      offsetWidth: t.offsetWidth
+    };
+  t.style.position = "absolute", t.style.visibility = "hidden", t.style.display = "block";
+  const v = t.scrollHeight, i = t.clientHeight, g = t.offsetHeight, m = t.scrollWidth, l = t.clientWidth, n = t.offsetWidth;
+  return t.style.display = "", t.style.position = "", t.style.visibility = "", { scrollHeight: v, clientHeight: i, offsetHeight: g, scrollWidth: m, clientWidth: l, offsetWidth: n };
+}
+function x(t, o) {
+  if (!t || !o)
+    return !1;
+  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 O(t, o, c, e) {
+  const i = (e == null ? void 0 : e.verticalOffset) || 0, g = (e == null ? void 0 : e.horizontalOffset) || 0, m = (e == null ? void 0 : e.responsiveHeight) || !1, l = o.getBoundingClientRect(), n = w(t), d = l.left, H = l.top, r = document.documentElement.clientWidth - (d + l.width), a = H - i, W = document.documentElement.clientHeight - (H + l.height + i);
+  let h = d, u = H + l.height + i, f = n.offsetWidth - l.width;
+  const s = { horizontal: "start", vertical: "below" };
+  let b = `${W - i}px`;
+  e != null && e.centered && d - 16 + l.width / 2 > n.offsetWidth / 2 && r - 16 > f / 2 && (h -= f /= 2, s.horizontal = "center"), r < f && d > f && (h = h - f, s.horizontal = "end"), g && s.horizontal !== "center" && l.width / 2 < g && (h += g * (s.horizontal === "start" ? -1 : 1)), (d < f && r < f || document.documentElement.clientWidth < n.offsetWidth) && (h = document.documentElement.clientWidth / 2 - n.offsetWidth / 2), (W - i < n.scrollHeight && a - i > (m ? n.clientHeight : n.scrollHeight) || a > W && W - i < n.clientHeight && !m) && (u = a < n.scrollHeight ? u - l.height - a - i : H - n.clientHeight - i, b = `${a - i}px`, s.vertical = "above");
+  const y = c.getBoundingClientRect();
+  return y.left < 0 && (h -= y.left), y.top < 0 && (u -= y.top), {
+    top: u,
+    left: h,
+    maxHeight: b,
+    alignment: s
+  };
+}
+export {
+  O as getElementPosition,
+  w as getElementRectangle,
+  x as isEventOnElement
+};

package/core/overlay.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @entrypoint
+ */
 export * from './overlay/overlay.js';
 export * from './overlay/overlay-option-panel.js';
 export * from './overlay/overlay-trigger-attributes.js';

package/core/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../src/elements/core/overlay.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mCAAmC,CAAC;AAClD,cAAc,yCAAyC,CAAC;AACxD,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../src/elements/core/overlay.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,sBAAsB,CAAC;AACrC,cAAc,mCAAmC,CAAC;AAClD,cAAc,yCAAyC,CAAC;AACxD,cAAc,uBAAuB,CAAC"}

package/core/overlay.js

@@ -1,76 +1,15 @@
-import { html as H } from "lit";
-function O() {
-  return H`
-    <div class="sbb-gap-fix-wrapper">
-      <div class="sbb-gap-fix-corner" id="left"></div>
-    </div>
-    <div class="sbb-gap-fix-wrapper">
-      <div class="sbb-gap-fix-corner" id="right"></div>
-    </div>
-  `;
-}
-function W(t) {
-  const e = window.getComputedStyle(t), n = e.display, i = parseInt(e.maxHeight, 10).toString();
-  if (n !== "none" && i !== "0")
-    return {
-      scrollHeight: t.scrollHeight,
-      clientHeight: t.clientHeight,
-      offsetHeight: t.offsetHeight,
-      scrollWidth: t.scrollWidth,
-      clientWidth: t.clientWidth,
-      offsetWidth: t.offsetWidth
-    };
-  t.style.position = "absolute", t.style.visibility = "hidden", t.style.display = "block";
-  const l = t.scrollHeight, o = t.clientHeight, r = t.offsetHeight, b = t.scrollWidth, a = t.clientWidth, s = t.offsetWidth;
-  return t.style.display = "", t.style.position = "", t.style.visibility = "", { scrollHeight: l, clientHeight: o, offsetHeight: r, scrollWidth: b, clientWidth: a, offsetWidth: s };
-}
-function P(t, e) {
-  if (!t || !e)
-    return !1;
-  const n = t.getBoundingClientRect();
-  return n.top <= e.clientY && e.clientY <= n.top + n.height && n.left <= e.clientX && e.clientX <= n.left + n.width;
-}
-function g(t, e, n, i) {
-  const o = (i == null ? void 0 : i.verticalOffset) || 0, r = (i == null ? void 0 : i.horizontalOffset) || 0, b = (i == null ? void 0 : i.responsiveHeight) || !1, a = e.getBoundingClientRect(), s = W(t), d = a.left, m = a.top, x = document.documentElement.clientWidth - (d + a.width), u = m - o, p = document.documentElement.clientHeight - (m + a.height + o);
-  let c = d, v = m + a.height + o, f = s.offsetWidth - a.width;
-  const h = { horizontal: "start", vertical: "below" };
-  let y = `${p - o}px`;
-  i != null && i.centered && d - 16 + a.width / 2 > s.offsetWidth / 2 && x - 16 > f / 2 && (c -= f /= 2, h.horizontal = "center"), x < f && d > f && (c = c - f, h.horizontal = "end"), r && h.horizontal !== "center" && a.width / 2 < r && (c += r * (h.horizontal === "start" ? -1 : 1)), (d < f && x < f || document.documentElement.clientWidth < s.offsetWidth) && (c = document.documentElement.clientWidth / 2 - s.offsetWidth / 2), (p - o < s.scrollHeight && u - o > (b ? s.clientHeight : s.scrollHeight) || u > p && p - o < s.clientHeight && !b) && (v = u < s.scrollHeight ? v - a.height - u - o : m - s.clientHeight - o, y = `${u - o}px`, h.vertical = "above");
-  const A = n.getBoundingClientRect();
-  return A.left < 0 && (c -= A.left), A.top < 0 && (v -= A.top), {
-    top: v,
-    left: c,
-    maxHeight: y,
-    alignment: h
-  };
-}
-function R(t, e, n, i, l) {
-  if (!t || !e)
-    return;
-  l.style.setProperty("--sbb-options-panel-width", `${e.offsetWidth}px`), l.style.setProperty("--sbb-options-panel-origin-height", `${e.offsetHeight}px`);
-  const o = g(n, e, i);
-  l.style.setProperty("--sbb-options-panel-position-x", `${o.left}px`), l.style.setProperty("--sbb-options-panel-position-y", `${o.top}px`), l.style.setProperty("--sbb-options-panel-max-height", o.maxHeight), l.setAttribute("data-options-panel-position", o.alignment.vertical), e.setAttribute("data-options-panel-position", o.alignment.vertical);
-}
-function $(t, e, n, i) {
-  t && (t.setAttribute("aria-haspopup", e), t.setAttribute("aria-controls", n), t.setAttribute("aria-expanded", `${i === "opening" || i === "opened"}`));
-}
-function z(t) {
-  t && (t.removeAttribute("aria-haspopup"), t.removeAttribute("aria-controls"), t.removeAttribute("aria-expanded"));
-}
-function C(t, e, n, i = "listbox") {
-  t && (t.setAttribute("autocomplete", "off"), t.setAttribute("role", "combobox"), t.setAttribute("aria-autocomplete", "list"), t.setAttribute("aria-haspopup", i), t.setAttribute("aria-controls", e), t.setAttribute("aria-owns", e), t.setAttribute("aria-expanded", `${n}`));
-}
-function B(t) {
-  t && (t.removeAttribute("autocomplete"), t.removeAttribute("role"), t.removeAttribute("aria-autocomplete"), t.removeAttribute("aria-haspopup"), t.removeAttribute("aria-controls"), t.removeAttribute("aria-owns"), t.removeAttribute("aria-expanded"));
-}
+import { overlayGapFixCorners as t } from "./overlay/overlay.js";
+import { setOverlayPosition as i } from "./overlay/overlay-option-panel.js";
+import { removeAriaComboBoxAttributes as s, removeAriaOverlayTriggerAttributes as a, setAriaComboBoxAttributes as n, setAriaOverlayTriggerAttributes as l } from "./overlay/overlay-trigger-attributes.js";
+import { getElementPosition as g, getElementRectangle as v, isEventOnElement as x } from "./overlay/position.js";
 export {
   g as getElementPosition,
-  W as getElementRectangle,
-  P as isEventOnElement,
-  O as overlayGapFixCorners,
-  B as removeAriaComboBoxAttributes,
-  z as removeAriaOverlayTriggerAttributes,
-  C as setAriaComboBoxAttributes,
-  $ as setAriaOverlayTriggerAttributes,
-  R as setOverlayPosition
+  v as getElementRectangle,
+  x as isEventOnElement,
+  t as overlayGapFixCorners,
+  s as removeAriaComboBoxAttributes,
+  a as removeAriaOverlayTriggerAttributes,
+  n as setAriaComboBoxAttributes,
+  l as setAriaOverlayTriggerAttributes,
+  i as setOverlayPosition
 };

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;
 
@@ -40,6 +41,14 @@
       --sbb-header-height: #{functions.px-to-rem-build(52)};
     }
 
+    // When the input modality is either mouse or touch,
+    // the focus outline should be hidden.
+    // We achieve this by setting the outline style to none.
+    // This is primarily to work around Safari bugs.
+    &:where(.sbb-focus-modality-mouse, .sbb-focus-modality-touch) {
+      --sbb-focus-outline-style: none;
+    }
+
     @include mediaqueries.mq($from: medium) {
       // Header
       --sbb-header-height: var(--sbb-spacing-fixed-24x);
@@ -68,30 +77,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 +247,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 +259,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 +272,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 +283,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 +305,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 +315,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 +338,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 +349,7 @@ sbb-teaser :is(sbb-image, img) {
     }
   }
 
-  img {
+  img:not(.sbb-figure-overlap-image) {
     display: block;
     align-self: stretch;
     width: 100%;
@@ -408,3 +469,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;
   }
 

package/core/styles/mixins/a11y.scss

@@ -21,7 +21,8 @@
 
 @mixin focus-outline {
   outline-offset: var(--sbb-focus-outline-offset);
-  outline: var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);
+  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid)
+    var(--sbb-focus-outline-width);
 }
 
 @mixin screen-reader-only {

package/core/styles/mixins/buttons.scss

@@ -36,15 +36,16 @@ $active: ':active, [data-active]';
     @include icon-button-disabled(#{$button-selector});
   }
 
-  :host(
-    :is(
-      [data-focus-visible],
-      :focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch'])
-    )
-  ) {
+  :host(:is([data-focus-visible], :focus-visible)) {
     @include icon-button-focus-visible(#{$button-selector});
   }
 
+  :host([data-focus-visible]) {
+    // Basically the focus-outline mixin is made for use with focus-visible.
+    // As we use it here with data-focus-visible, we have to ensure that the outline is not overridden when mouse or touch is in use.
+    --sbb-focus-outline-style: initial;
+  }
+
   :host(:not(#{$disabled}, #{$active}):hover) {
     @include icon-button-hover(#{$button-selector});
   }

package/core/styles/mixins/link.scss

@@ -81,8 +81,7 @@
 }
 
 @mixin link-focus-visible {
-  // Hide focus outline when focus origin is mouse or touch. This is being used as a workaround in various components.
-  &:focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch']) {
+  &:focus-visible {
     @include a11y.focus-outline;
 
     border-radius: calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset));

package/core/styles/mixins/table.scss

@@ -17,10 +17,10 @@
     --sbb-table-color: inherit;
     --sbb-table-caption-color: var(--sbb-color-granite);
     --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
+    --sbb-table-sticky-shadow-width: 3rem;
+    --sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
+    --sbb-table-sticky-shadow-transition-duration: var(--sbb-animation-duration-6x);
 
-    background-color: var(--sbb-table-background-color);
-    border: var(--sbb-table-border);
-    border-radius: var(--sbb-table-border-radius);
     border-spacing: 0;
     caption-side: bottom;
     color: var(--sbb-table-color);
@@ -28,8 +28,32 @@
   }
 
   thead {
-    & > tr > th {
-      @include table-header-cell;
+    & > tr {
+      @include table-header-row;
+
+      &:first-of-type {
+        & > th {
+          border-block-start: var(--sbb-table-border);
+        }
+
+        // Border radius on top-left corner
+        & > th:first-of-type {
+          border-start-start-radius: var(--sbb-table-border-radius);
+        }
+
+        // Border radius on top-right corner
+        & > th:last-of-type {
+          border-start-end-radius: var(--sbb-table-border-radius);
+        }
+      }
+
+      & > th {
+        @include table-header-cell;
+
+        &:first-of-type {
+          border-inline-start: var(--sbb-table-border);
+        }
+      }
     }
   }
 
@@ -39,6 +63,22 @@
 
       & > td {
         @include table-data-cell;
+
+        &:first-of-type {
+          border-inline-start: var(--sbb-table-border);
+        }
+      }
+
+      &:last-of-type {
+        // Border radius on bottom-left corner
+        & > td:first-of-type {
+          border-end-start-radius: var(--sbb-table-border-radius);
+        }
+
+        // Border radius on bottom-right corner
+        & > td:last-of-type {
+          border-end-end-radius: var(--sbb-table-border-radius);
+        }
       }
     }
   }
@@ -48,40 +88,36 @@
   }
 }
 
+@mixin table-header-row {
+  // If there is more than one header row, only the last one has the bottom border
+  &:last-of-type > th {
+    border-bottom: var(--sbb-table-border);
+  }
+}
+
 @mixin table-header-cell {
   @include typo.text-xs--bold;
 
-  border-bottom: var(--sbb-table-border);
-  border-right: var(--sbb-table-border);
+  background-color: var(--sbb-table-background-color);
+  border-inline-end: var(--sbb-table-border);
   padding-block: var(--sbb-table-header-padding-block);
   padding-inline: var(--sbb-table-header-padding-inline);
   text-align: left;
-
-  // To avoid double border
-  &:last-of-type {
-    border-right: none;
-  }
 }
 
+// @deprecated No longer used internally.
 @mixin table-data-row {
-  // To avoid double borders
-  &:first-of-type td {
-    border-top: none;
-  }
+  // empty
 }
 
 @mixin table-data-cell {
   @include typo.text-s--regular;
 
-  border-top: var(--sbb-table-border);
-  border-right: var(--sbb-table-border);
+  background-color: var(--sbb-table-background-color);
+  border-block-end: var(--sbb-table-border);
+  border-inline-end: var(--sbb-table-border);
   padding-block: var(--sbb-table-cell-padding-block);
   padding-inline: var(--sbb-table-cell-padding-inline);
-
-  // To avoid double border
-  &:last-of-type {
-    border-right: none;
-  }
 }
 
 @mixin table-caption {
@@ -93,15 +129,19 @@
   text-align: left;
 }
 
+@mixin table-filter {
+  padding-block-start: 0 !important;
+}
+
 @mixin table--striped {
-  tbody tr:nth-child(odd) {
+  tbody tr:nth-child(odd) :is(th, td) {
     @include table-row--striped;
   }
 }
 
 @mixin table--unstriped {
-  tbody tr:nth-child(odd) {
-    background-color: unset;
+  tbody tr:nth-child(odd) :is(th, td) {
+    background-color: var(--sbb-table-background-color);
   }
 }