@sbb-esta/lyne-elements 2.5.1 → 2.7.0

package/core/styles/table.scss

@@ -40,6 +40,10 @@ sbb-table-wrapper[negative] .sbb-table,
   }
 }
 
+.sbb-table-header-row {
+  @include table.table-header-row;
+}
+
 .sbb-table-header-cell {
   @include table.table-header-cell;
 }
@@ -60,6 +64,63 @@ sbb-table-wrapper[negative] .sbb-table,
   @include table.table-caption;
 }
 
+.sbb-table-filter {
+  @include table.table-filter;
+}
+
+.sbb-table-sticky {
+  // Note that the table can either set this class or an inline style to make something sticky.
+  // We set the style as `!important` so that we get an identical specificity in both cases
+  // and to avoid cases where user styles have a higher specificity.
+  position: sticky !important;
+}
+
+// The `sbb-table-sticky-*` css classes are used by the Angular wrapper and CDK.
+// Do not rename them, pls.
+:is(.sbb-table-sticky-border-elem-left, .sbb-table-sticky-border-elem-right)::after {
+  content: '';
+  transition: {
+    timing-function: var(--sbb-table-sticky-shadow-transition-easing);
+    duration: var(--sbb-table-sticky-shadow-transition-duration);
+    property: visibility, opacity;
+  }
+
+  visibility: hidden;
+  opacity: 0;
+  position: absolute;
+  width: var(--sbb-table-sticky-shadow-width);
+  inset: 0;
+}
+
+.sbb-table-sticky-border-elem-left {
+  :is(.sbb-table-wrapper-offset-left, .sbb-table-wrapper-offset-both) & {
+    border-inline-end: var(--sbb-table-border);
+
+    &::after {
+      visibility: visible;
+      opacity: 1;
+      background-image: linear-gradient(-270deg, rgb(0 0 0 / 10%) 0%, transparent 100%);
+      inset-inline-start: unset;
+      inset-inline-end: calc(var(--sbb-table-sticky-shadow-width) * -1 - 1px);
+    }
+  }
+}
+
+.sbb-table-sticky-border-elem-right {
+  :is(.sbb-table-wrapper-offset-right, .sbb-table-wrapper-offset-both) & {
+    border-inline-start: var(--sbb-table-border);
+
+    &::after {
+      visibility: visible;
+      opacity: 1;
+      background-image: linear-gradient(270deg, rgb(0 0 0 / 10%) 0%, transparent 100%);
+      inset-inline-start: calc(var(--sbb-table-sticky-shadow-width) * -1 - 1px);
+      inset-inline-end: unset;
+    }
+  }
+}
+
+// TODO: In future, move to the 'sbb-lean' theme
 html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
   @include table.table--s;
 }

package/core/testing/event-spy.js

@@ -0,0 +1,53 @@
+class a {
+  get count() {
+    return this._count;
+  }
+  get events() {
+    return this._events;
+  }
+  get firstEvent() {
+    return this.events.length ? this.events[0] : null;
+  }
+  get lastEvent() {
+    return this.events.length ? this.events[this.events.length - 1] : null;
+  }
+  constructor(e, s = null, t = null) {
+    this._event = e, this._target = s, this._options = t, this._count = 0, this._events = [], this._promiseEventMap = /* @__PURE__ */ new Map(), this._target || (this._target = document), this._listenForEvent();
+  }
+  calledOnce(e) {
+    return this.calledTimes(1, e);
+  }
+  calledTimes(e, s = 2e3) {
+    if (this.count > e)
+      return Promise.reject(`Event has been emitted more than expected (expected ${e}, actual ${this.count}`);
+    if (this.count === e)
+      return Promise.resolve(this.events[e - 1]);
+    if (this._promiseEventMap.has(e))
+      return this._promiseEventMap.get(e).promise;
+    {
+      let t, i;
+      const n = {
+        promise: new Promise((r, h) => {
+          t = r, i = h;
+        }),
+        resolve: t,
+        reject: i
+      };
+      return this._promiseEventMap.set(e, n), this._wrapPromiseWithTimeout(n, e, s);
+    }
+  }
+  _wrapPromiseWithTimeout(e, s, t) {
+    const i = setTimeout(() => e.reject(`awaiting calledTimes(${s}) results in timeout`), t);
+    return e.promise.then(() => clearTimeout(i)), e.promise;
+  }
+  _listenForEvent() {
+    var e;
+    (e = this._target) == null || e.addEventListener(this._event, (s) => {
+      var t;
+      this._events.push(s), this._count++, (t = this._promiseEventMap.get(this.count)) == null || t.resolve(s);
+    }, this._options ?? void 0);
+  }
+}
+export {
+  a as EventSpy
+};

package/core/testing/mocha-extensions.js

@@ -0,0 +1,11 @@
+const c = (e, t, r) => {
+  if (e)
+    return Mocha.describe(t, r);
+}, s = (e, t, r) => {
+  if (e)
+    return Mocha.test(t, r);
+};
+export {
+  c as describeIf,
+  s as testIf
+};

package/core/testing/scroll.d.ts

@@ -1,6 +1,7 @@
 /**
  * Can be used in tests where scroll events are not triggered by default.
  * @param options ScrollToOptions
+ * @deprecated Will be removed with next major version
  */
 export declare function mockScrollTo(options: ScrollToOptions): void;
 //# sourceMappingURL=scroll.d.ts.map

package/core/testing/scroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroll.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/testing/scroll.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,eAAe,GAAG,IAAI,CAM3D"}
+{"version":3,"file":"scroll.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/testing/scroll.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,eAAe,GAAG,IAAI,CAM3D"}

package/core/testing/scroll.js

@@ -0,0 +1,6 @@
+function c(o) {
+  window.scrollTo(o), document.dispatchEvent(new Event("scroll"));
+}
+export {
+  c as mockScrollTo
+};

package/core/testing/wait-for-condition.js

@@ -0,0 +1,13 @@
+async function m(t, r = 30, i = 2 * 1e3) {
+  const e = /* @__PURE__ */ new Date();
+  let n = 0;
+  function o() {
+    return n++, t();
+  }
+  for (; !await o() && e.getTime() + i >= (/* @__PURE__ */ new Date()).getTime(); )
+    await new Promise((a) => setTimeout(a, r));
+  return e.getTime() + i < (/* @__PURE__ */ new Date()).getTime() ? Promise.reject(`waitForCondition timeout: ${t.toString()}, attempts: ${n}, start: ${e.getTime()}, end: ${(/* @__PURE__ */ new Date()).getTime()}`) : Promise.resolve(!0);
+}
+export {
+  m as waitForCondition
+};

package/core/testing/wait-for-image-ready.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wait-for-image-ready.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/testing/wait-for-image-ready.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,wBAAsB,iBAAiB,CACrC,OAAO,EAAE,gBAAgB,GAAG,eAAe,EAC3C,qBAAqB,SAAW,GAC/B,OAAO,CAAC,IAAI,CAAC,CAkCf"}
+{"version":3,"file":"wait-for-image-ready.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/testing/wait-for-image-ready.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,wBAAsB,iBAAiB,CACrC,OAAO,EAAE,gBAAgB,GAAG,eAAe,EAC3C,qBAAqB,SAAW,GAC/B,OAAO,CAAC,IAAI,CAAC,CA+Bf"}

package/core/testing/wait-for-image-ready.js

@@ -0,0 +1,18 @@
+import { isSafari as m } from "../dom.js";
+async function s(o, n = 2 * 1e3) {
+  var i;
+  const e = o.localName === "sbb-image" ? ((i = o.shadowRoot) == null ? void 0 : i.querySelector(".sbb-image__img")) ?? null : o;
+  if (!e)
+    throw new Error("img tag not found");
+  e.complete ? m && await e.decode() : await new Promise((t, a) => {
+    const r = setTimeout(() => a("image loading timeout"), n);
+    e.addEventListener("load", () => {
+      clearTimeout(r), !e.complete || m ? e.decode().then(() => t()) : t();
+    }), e.addEventListener("error", () => {
+      clearTimeout(r), a("image error");
+    });
+  });
+}
+export {
+  s as waitForImageReady
+};

package/core/testing/wait-for-render.js

@@ -0,0 +1,15 @@
+const n = (o) => !!o.updateComplete, i = Promise.resolve(), m = async (o) => {
+  var r, l;
+  const e = await o;
+  (l = (r = e.parentElement ?? e).querySelectorAll) == null || l.call(r, "[defer-hydration]").forEach((t) => t.removeAttribute("defer-hydration"));
+  const a = [e, ...e.querySelectorAll("*")].filter(n).map((t) => [
+    t.updateComplete,
+    t.hydrationComplete ?? i,
+    m(t.renderRoot)
+  ]).flat(1 / 0);
+  return await Promise.all(a), e;
+};
+export {
+  n as isReactiveElement,
+  m as waitForLitRender
+};

package/core/testing.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @entrypoint
+ */
 export * from './testing/event-spy.js';
 export * from './testing/mocha-extensions.js';
 export * from './testing/scroll.js';

package/core/testing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../src/elements/core/testing.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC"}
+{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../src/elements/core/testing.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC"}

package/core/testing.js

@@ -1,108 +1,16 @@
-import { isSafari as m } from "./dom.js";
-class p {
-  get count() {
-    return this._count;
-  }
-  get events() {
-    return this._events;
-  }
-  get firstEvent() {
-    return this.events.length ? this.events[0] : null;
-  }
-  get lastEvent() {
-    return this.events.length ? this.events[this.events.length - 1] : null;
-  }
-  constructor(e, i = null, r = null) {
-    this._event = e, this._target = i, this._options = r, this._count = 0, this._events = [], this._promiseEventMap = /* @__PURE__ */ new Map(), this._target || (this._target = document), this._listenForEvent();
-  }
-  calledOnce(e) {
-    return this.calledTimes(1, e);
-  }
-  calledTimes(e, i = 2e3) {
-    if (this.count > e)
-      return Promise.reject(`Event has been emitted more than expected (expected ${e}, actual ${this.count}`);
-    if (this.count === e)
-      return Promise.resolve(this.events[e - 1]);
-    if (this._promiseEventMap.has(e))
-      return this._promiseEventMap.get(e).promise;
-    {
-      let r, s;
-      const n = {
-        promise: new Promise((a, l) => {
-          r = a, s = l;
-        }),
-        resolve: r,
-        reject: s
-      };
-      return this._promiseEventMap.set(e, n), this._wrapPromiseWithTimeout(n, e, i);
-    }
-  }
-  _wrapPromiseWithTimeout(e, i, r) {
-    const s = setTimeout(() => e.reject(`awaiting calledTimes(${i}) results in timeout`), r);
-    return e.promise.then(() => clearTimeout(s)), e.promise;
-  }
-  _listenForEvent() {
-    var e;
-    (e = this._target) == null || e.addEventListener(this._event, (i) => {
-      var r;
-      this._events.push(i), this._count++, (r = this._promiseEventMap.get(this.count)) == null || r.resolve(i);
-    }, this._options ?? void 0);
-  }
-}
-const v = (t, e, i) => {
-  if (t)
-    return Mocha.describe(e, i);
-}, g = (t, e, i) => {
-  if (t)
-    return Mocha.test(e, i);
-};
-function w(t) {
-  window.scrollTo(t), document.dispatchEvent(new Event("scroll"));
-}
-async function f(t, e = 30, i = 2 * 1e3) {
-  const r = /* @__PURE__ */ new Date();
-  let s = 0;
-  function o() {
-    return s++, t();
-  }
-  for (; !await o() && r.getTime() + i >= (/* @__PURE__ */ new Date()).getTime(); )
-    await new Promise((n) => setTimeout(n, e));
-  return r.getTime() + i < (/* @__PURE__ */ new Date()).getTime() ? Promise.reject(`waitForCondition timeout: ${t.toString()}, attempts: ${s}, start: ${r.getTime()}, end: ${(/* @__PURE__ */ new Date()).getTime()}`) : Promise.resolve(!0);
-}
-async function _(t, e = 2 * 1e3) {
-  var r;
-  const i = t.localName === "sbb-image" ? ((r = t.shadowRoot) == null ? void 0 : r.querySelector(".sbb-image__img")) ?? null : t;
-  if (!i)
-    throw new Error("img tag not found");
-  t.complete ? await i.decode() : await new Promise((s, o) => {
-    const n = setTimeout(() => o("image loading timeout"), e);
-    t.addEventListener("load", () => {
-      clearTimeout(n), i.decode().then(() => {
-        m && t.localName === "sbb-image" ? setTimeout(s, 100) : s();
-      });
-    }), t.addEventListener("error", () => {
-      clearTimeout(n), o("image error");
-    });
-  });
-}
-const c = (t) => !!t.updateComplete, u = Promise.resolve(), h = async (t) => {
-  var r, s;
-  const e = await t;
-  (s = (r = e.parentElement ?? e).querySelectorAll) == null || s.call(r, "[defer-hydration]").forEach((o) => o.removeAttribute("defer-hydration"));
-  const i = [e, ...e.querySelectorAll("*")].filter(c).map((o) => [
-    o.updateComplete,
-    o.hydrationComplete ?? u,
-    h(o.renderRoot)
-  ]).flat(1 / 0);
-  return await Promise.all(i), e;
-};
+import { EventSpy as r } from "./testing/event-spy.js";
+import { describeIf as i, testIf as m } from "./testing/mocha-extensions.js";
+import { mockScrollTo as p } from "./testing/scroll.js";
+import { waitForCondition as x } from "./testing/wait-for-condition.js";
+import { waitForImageReady as c } from "./testing/wait-for-image-ready.js";
+import { isReactiveElement as l, waitForLitRender as s } from "./testing/wait-for-render.js";
 export {
-  p as EventSpy,
-  v as describeIf,
-  c as isReactiveElement,
-  w as mockScrollTo,
-  g as testIf,
-  f as waitForCondition,
-  _ as waitForImageReady,
-  h as waitForLitRender
+  r as EventSpy,
+  i as describeIf,
+  l as isReactiveElement,
+  p as mockScrollTo,
+  m as testIf,
+  x as waitForCondition,
+  c as waitForImageReady,
+  s as waitForLitRender
 };

package/core.css

@@ -1118,6 +1118,9 @@
 :root:has(sbb-header[size=s]) {
   --sbb-header-height: 3.25rem;
 }
+:root:where(.sbb-focus-modality-mouse, .sbb-focus-modality-touch) {
+  --sbb-focus-outline-style: none;
+}
 @media (min-width: calc(52.5rem)) {
   :root {
     --sbb-header-height: var(--sbb-spacing-fixed-24x);
@@ -1162,21 +1165,59 @@ html {
   opacity: 1;
 }
 
-sbb-form-field :where(input, textarea):disabled::placeholder {
-  color: var(--sbb-color-granite);
-  -webkit-text-fill-color: var(--sbb-color-granite);
+sbb-form-field :where(input, select, textarea, sbb-select, sbb-date-input) {
+  --sbb-text-font-size: var(--sbb-font-size-text-m);
+  font-family: var(--sbb-typo-font-family);
+  font-weight: normal;
+  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);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  outline: none;
+  border: none;
+  background-color: transparent;
+  padding: 0;
+  -webkit-appearance: none;
+  outline: none !important;
+  overflow: var(--sbb-form-field-overflow);
+  width: 100%;
+  box-sizing: border-box;
+  color: var(--sbb-form-field-text-color);
+  -webkit-text-fill-color: var(--sbb-form-field-text-color);
+  opacity: 1;
+  background-color: transparent;
+  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;
 }
-sbb-form-field[floating-label] :where(input, textarea)::placeholder, sbb-form-field[floating-label] sbb-date-input::after {
-  color: transparent;
-  -webkit-text-fill-color: transparent;
+sbb-form-field :where(input, select, textarea, sbb-select, sbb-date-input)::placeholder {
+  color: var(--sbb-color-metal);
+  -webkit-text-fill-color: var(--sbb-color-metal);
+  opacity: 1;
+}
+sbb-form-field[floating-label] :where(input, select, textarea, sbb-select)::placeholder, sbb-form-field[floating-label] sbb-date-input::after {
+  color: transparent !important;
+  -webkit-text-fill-color: transparent !important;
 }
 @media (forced-colors: active) {
-  sbb-form-field[floating-label] :where(input, textarea)::placeholder, sbb-form-field[floating-label] sbb-date-input::after {
-    color: Canvas;
-    -webkit-text-fill-color: Canvas;
+  sbb-form-field[floating-label] :where(input, select, textarea, sbb-select)::placeholder, sbb-form-field[floating-label] sbb-date-input::after {
+    color: Canvas !important;
+    -webkit-text-fill-color: Canvas !important;
   }
 }
-sbb-form-field textarea {
+sbb-form-field:not([floating-label]) :where(input, select, textarea, sbb-select):disabled::placeholder {
+  color: var(--sbb-color-granite);
+  -webkit-text-fill-color: var(--sbb-color-granite);
+}
+sbb-form-field :where(select) {
+  vertical-align: middle;
+}
+sbb-form-field :where(select, sbb-select) {
+  padding-inline-end: var(--sbb-form-field-select-inline-padding-end);
+}
+sbb-form-field :where(textarea) {
   --sbb-scrollbar-thumb-width: 0.125rem;
   --sbb-scrollbar-thumb-width-hover: 0.25rem;
   --sbb-scrollbar-width-firefox: thin;
@@ -1185,34 +1226,44 @@ sbb-form-field textarea {
   --sbb-scrollbar-track-color: transparent;
   --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);
 }
-sbb-form-field textarea::-webkit-scrollbar {
+sbb-form-field :where(textarea)::-webkit-scrollbar {
   width: var(--sbb-scrollbar-width);
   height: var(--sbb-scrollbar-width);
   background-color: var(--sbb-scrollbar-track-color, transparent);
 }
-sbb-form-field textarea::-webkit-scrollbar-corner {
+sbb-form-field :where(textarea)::-webkit-scrollbar-corner {
   background-color: var(--sbb-scrollbar-track-color, transparent);
 }
-sbb-form-field textarea::-webkit-scrollbar-thumb {
+sbb-form-field :where(textarea)::-webkit-scrollbar-thumb {
   background-color: var(--sbb-scrollbar-color, currentcolor);
   border: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;
   border-radius: var(--sbb-border-radius-4x);
   background-clip: padding-box;
 }
-sbb-form-field textarea::-webkit-scrollbar-thumb:hover {
+sbb-form-field :where(textarea)::-webkit-scrollbar-thumb:hover {
   background-color: var(--sbb-scrollbar-color-hover, currentcolor);
   border-width: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)));
 }
-sbb-form-field textarea::-webkit-scrollbar-button, sbb-form-field textarea::-webkit-scrollbar-corner {
+sbb-form-field :where(textarea)::-webkit-scrollbar-button, sbb-form-field :where(textarea)::-webkit-scrollbar-corner {
   display: none;
 }
 @supports not selector(::-webkit-scrollbar) {
-  sbb-form-field textarea {
+  sbb-form-field :where(textarea) {
     scrollbar-width: var(--sbb-scrollbar-width-firefox);
     scrollbar-color: var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent);
   }
 }
-sbb-form-field[negative] textarea {
+sbb-form-field :where(textarea) {
+  position: relative;
+  resize: none;
+  white-space: break-spaces;
+  overflow-y: auto;
+  min-height: calc(var(--sbb-typo-line-height-body-text) * 1em);
+}
+sbb-form-field[size=l] :where(textarea) {
+  padding-block-end: 0.34375rem;
+}
+sbb-form-field[negative] :where(textarea) {
   --sbb-scrollbar-thumb-width: 0.125rem;
   --sbb-scrollbar-thumb-width-hover: 0.25rem;
   --sbb-scrollbar-width-firefox: thin;
@@ -1221,29 +1272,29 @@ sbb-form-field[negative] textarea {
   --sbb-scrollbar-track-color: transparent;
   --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);
 }
-sbb-form-field[negative] textarea::-webkit-scrollbar {
+sbb-form-field[negative] :where(textarea)::-webkit-scrollbar {
   width: var(--sbb-scrollbar-width);
   height: var(--sbb-scrollbar-width);
   background-color: var(--sbb-scrollbar-track-color, transparent);
 }
-sbb-form-field[negative] textarea::-webkit-scrollbar-corner {
+sbb-form-field[negative] :where(textarea)::-webkit-scrollbar-corner {
   background-color: var(--sbb-scrollbar-track-color, transparent);
 }
-sbb-form-field[negative] textarea::-webkit-scrollbar-thumb {
+sbb-form-field[negative] :where(textarea)::-webkit-scrollbar-thumb {
   background-color: var(--sbb-scrollbar-color, currentcolor);
   border: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;
   border-radius: var(--sbb-border-radius-4x);
   background-clip: padding-box;
 }
-sbb-form-field[negative] textarea::-webkit-scrollbar-thumb:hover {
+sbb-form-field[negative] :where(textarea)::-webkit-scrollbar-thumb:hover {
   background-color: var(--sbb-scrollbar-color-hover, currentcolor);
   border-width: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)));
 }
-sbb-form-field[negative] textarea::-webkit-scrollbar-button, sbb-form-field[negative] textarea::-webkit-scrollbar-corner {
+sbb-form-field[negative] :where(textarea)::-webkit-scrollbar-button, sbb-form-field[negative] :where(textarea)::-webkit-scrollbar-corner {
   display: none;
 }
 @supports not selector(::-webkit-scrollbar) {
-  sbb-form-field[negative] textarea {
+  sbb-form-field[negative] :where(textarea) {
     scrollbar-width: var(--sbb-scrollbar-width-firefox);
     scrollbar-color: var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent);
   }
@@ -1326,7 +1377,7 @@ img {
 }
 
 sbb-container > [slot=image]:is(sbb-image, img),
-sbb-container > [slot=image] :is(sbb-image, img) {
+sbb-container > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;
   border-radius: var(--sbb-container-background-border-radius);
   height: 100%;
@@ -1334,7 +1385,7 @@ sbb-container > [slot=image] :is(sbb-image, img) {
 }
 
 sbb-flip-card-summary > [slot=image]:is(sbb-image, img),
-sbb-flip-card-summary > [slot=image] :is(sbb-image, img) {
+sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-aspect-ratio: auto;
   --sbb-image-object-fit: cover;
   border-radius: 0;
@@ -1343,14 +1394,14 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img) {
 }
 
 sbb-lead-container > [slot=image]:is(sbb-image, img, picture),
-sbb-lead-container > [slot=image] :is(sbb-image, img, picture) {
+sbb-lead-container > [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;
   border-radius: var(--sbb-lead-container-image-border-radius);
 }
 
 sbb-message > [slot=image]:is(sbb-image, img),
-sbb-message > [slot=image] :is(sbb-image, img) {
+sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   border-radius: var(--sbb-message-image-border-radius);
 }
 
@@ -1367,22 +1418,22 @@ sbb-message > [slot=image] :is(sbb-image, img) {
     --sbb-teaser-image-brightness: var(--sbb-teaser-image-brightness-hover);
   }
 }
-:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) :is(sbb-image, img) {
+:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) :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) var(--sbb-teaser-image-animation-easing);
 }
 
-:is(sbb-teaser-product, sbb-teaser-product-static) :is(sbb-image, img) {
+:is(sbb-teaser-product, sbb-teaser-product-static) :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   border-radius: 0;
   --sbb-image-object-fit: cover;
   --sbb-image-aspect-ratio: 16 / 9;
 }
-:is(sbb-teaser-product, sbb-teaser-product-static) img {
+:is(sbb-teaser-product, sbb-teaser-product-static) img:not(.sbb-figure-overlap-image) {
   place-self: stretch;
 }
 
-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;
   transition-property: filter, scale;
@@ -1390,16 +1441,16 @@ sbb-teaser :is(sbb-image, img) {
   scale: var(--sbb-teaser-scale, 1);
 }
 
-: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;
 }
 @media (min-width: calc(37.5rem)) {
-  :is(sbb-teaser-hero) :is(sbb-image, img) {
+  sbb-teaser-hero :is(sbb-image, img):not(.sbb-figure-overlap-image) {
     --sbb-image-aspect-ratio: 16 / 9;
   }
 }
-:is(sbb-teaser-hero) img {
+sbb-teaser-hero img:not(.sbb-figure-overlap-image) {
   display: block;
   align-self: stretch;
   width: 100%;
@@ -1478,4 +1529,12 @@ sbb-sidebar:has(sbb-sidebar-title) {
 
 sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
   margin-block-start: var(--sbb-header-height);
+}
+
+.sbb-select-trigger {
+  width: 100%;
+  height: var(--sbb-size-element-xs);
+}
+sbb-form-field .sbb-select-trigger {
+  top: 0;
 }