@sbb-esta/lyne-elements 4.4.0 → 4.5.1

package/safety-theme.css

@@ -1367,6 +1367,57 @@ summary {
     var(--sbb-color-silver),
     var(--sbb-color-anthracite)
   );
+  --sbb-button-box-shadow: transparent 0 0;
+  --sbb-button-border-radius: var(--sbb-border-radius-infinity);
+  --sbb-button-border-width: var(--sbb-border-width-2x);
+  --sbb-button-border-disabled-style: dashed;
+  --sbb-button-border-disabled-width: var(--sbb-border-width-1x);
+  --sbb-button-color-disabled-background: var(--sbb-background-color-3);
+  --sbb-button-color-disabled-border: var(--sbb-border-color-5);
+  --sbb-button-color-disabled-text: var(--sbb-color-granite);
+  --sbb-button-color-disabled-text: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-aluminium)
+  );
+  --sbb-button-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-button-loading-border-width: var(--sbb-border-width-3x);
+  --sbb-button-loading-delay: 300ms;
+  --sbb-button-min-height-size-l: var(--sbb-size-element-m);
+  --sbb-button-min-height-size-m: var(--sbb-size-element-s);
+  --sbb-button-min-height-size-s: var(--sbb-size-element-xs);
+  --sbb-button-min-height: var(--sbb-button-min-height-size-l);
+  --sbb-button-padding-block-min: var(--sbb-spacing-fixed-1x);
+  --sbb-button-padding-inline-size-l: var(--sbb-spacing-fixed-8x);
+  --sbb-button-padding-inline-size-m: var(--sbb-spacing-fixed-5x);
+  --sbb-button-padding-inline-size-s: var(--sbb-spacing-fixed-4x);
+  --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-l);
+  --sbb-button-shadow-1-offset-y: var(--sbb-shadow-elevation-level-3-shadow-1-offset-y);
+  --sbb-button-shadow-2-offset-y: var(--sbb-shadow-elevation-level-3-shadow-2-offset-y);
+  --sbb-button-shadow-1-blur: var(--sbb-shadow-elevation-level-3-shadow-1-blur);
+  --sbb-button-shadow-2-blur: var(--sbb-shadow-elevation-level-3-shadow-2-blur);
+  --sbb-button-transition-easing-function: var(--sbb-animation-easing);
+  --sbb-mini-button-color-text: var(--sbb-color-3);
+  --sbb-mini-button-color-default-background: transparent;
+  --sbb-mini-button-color-hover-background: var(--sbb-background-color-3);
+  --sbb-mini-button-color-active-background: var(--sbb-background-color-4);
+  --sbb-mini-button-color-disabled-background: var(--sbb-background-color-3);
+  --sbb-mini-button-color-disabled-border: var(--sbb-border-color-5);
+  --sbb-mini-button-color-disabled-text: var(--sbb-color-granite);
+  --sbb-mini-button-color-disabled-text: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-smoke)
+  );
+  --sbb-mini-button-border-radius: var(--sbb-border-radius-infinity);
+  --sbb-mini-button-transition-easing-function: var(--sbb-animation-easing);
+  --sbb-mini-button-group-background: var(--sbb-background-color-1);
+  --sbb-mini-button-group-border-color: var(--sbb-border-color-4-inverted);
+  --sbb-mini-button-group-border-width: var(--sbb-border-width-2x);
+  --sbb-mini-button-group-border-radius: var(--sbb-border-radius-infinity);
+  --sbb-mini-button-group-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-mini-button-group-min-height: var(--sbb-size-element-s);
+  --sbb-mini-button-group-padding-inline: var(--sbb-spacing-fixed-3x);
+  --sbb-mini-button-group-divider-height: var(--sbb-size-icon-ui-small);
+  --sbb-mini-button-group-divider-padding: var(--sbb-spacing-fixed-1x);
   --sbb-card-background-color: var(--sbb-background-color-1);
   --sbb-card-border-color: transparent;
   --sbb-card-border-radius: var(--sbb-border-radius-4x);
@@ -1394,6 +1445,12 @@ summary {
   --sbb-carousel-border-radius: var(--sbb-border-radius-4x);
   --sbb-carousel-box-shadow: var(--sbb-box-shadow-level-9-hard);
   --sbb-carousel-paginator-padding: var(--sbb-spacing-responsive-xs);
+  --sbb-chip-label-color: var(--sbb-color-granite);
+  --sbb-chip-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));
+  --sbb-chip-label-background-color: var(--sbb-background-color-3);
+  --sbb-chip-label-padding-block: 0em;
+  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);
+  --sbb-chip-label-font-size: var(--sbb-text-font-size-xxs);
   --sbb-chip-background-color: var(--sbb-background-color-3);
   --sbb-chip-background-color-active: var(--sbb-background-color-1);
   --sbb-chip-background-color-hover: var(--sbb-background-color-1);
@@ -1449,6 +1506,13 @@ summary {
   --sbb-checkbox-font-size: var(--sbb-text-font-size-m);
   --sbb-checkbox-label-color: var(--sbb-color-color-3);
   --sbb-checkbox-cursor: var(--sbb-cursor-pointer);
+  --sbb-container-background-border-radius: 0;
+  --sbb-container-color: inherit;
+  --sbb-sticky-bar-animation-easing: var(--sbb-animation-easing);
+  --sbb-sticky-bar-border-radius: var(--sbb-border-radius-8x);
+  --sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xs);
+  --sbb-sticky-bar-position: sticky;
+  --sbb-sticky-bar-slide-vertically-animation-easing: ease-out;
   --sbb-clock-seconds-hand-color: var(--sbb-color-brand);
   --sbb-clock-face-color: var(--sbb-color-1);
   --sbb-clock-background-color: var(--sbb-background-color-1);
@@ -1659,6 +1723,9 @@ summary {
     --sbb-size-element-s: var(--sbb-size-element-s-large);
     --sbb-size-element-m: var(--sbb-size-element-m-large);
     --sbb-size-element-l: var(--sbb-size-element-l-large);
+    --sbb-button-padding-inline-size-l: var(--sbb-spacing-fixed-10x);
+    --sbb-button-padding-inline-size-m: var(--sbb-spacing-fixed-8x);
+    --sbb-button-padding-inline-size-s: var(--sbb-spacing-fixed-5x);
     --sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 0;
     --sbb-chip-group-margin-block-no-label-not-empty: 0.1875rem 0.875rem;
     --sbb-chip-group-margin-block-with-label-not-empty: var(--_sbb-chip-group-margin-block-start-default-large) var(--_sbb-chip-group-margin-block-start-default-large);
@@ -1708,6 +1775,14 @@ summary {
   font-display: swap;
   font-weight: 300;
 }
+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%;
+  position: absolute;
+}
+
 sbb-tab-nav-bar .sbb-tab-amount {
   margin: 0;
   color: var(--sbb-tab-label-amount-color);
@@ -1991,14 +2066,6 @@ img {
   object-position: var(--sbb-image-object-position);
 }
 
-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%;
-  position: absolute;
-}
-
 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;

package/select/select.component.js

@@ -6,9 +6,9 @@ var f = (i, a, r) => (Z(i, a, "read from private field"), r ? r.call(i) : a.get(
 import { __esDecorate as h, __runInitializers as n } from "tslib";
 import { MutationController as X } from "@lit-labs/observers/mutation-controller.js";
 import { ResizeController as ee } from "@lit-labs/observers/resize-controller.js";
-import { css as te, isServer as se, html as w, nothing as O } from "lit";
+import { css as te, isServer as se, html as w, nothing as E } from "lit";
 import { customElement as ie, property as x, state as ae } from "lit/decorators.js";
-import { ref as E } from "lit/directives/ref.js";
+import { ref as O } from "lit/directives/ref.js";
 import { until as H } from "lit/directives/until.js";
 import { getNextElementIndex as oe } from "../core/a11y.js";
 import { SbbOpenCloseBaseElement as re } from "../core/base-elements.js";
@@ -18,8 +18,8 @@ import { isLean as ce, setOrRemoveAttribute as S, isZeroAnimationDuration as de,
 import { i18nSelectionRequired as ue } from "../core/i18n.js";
 import { SbbUpdateSchedulerMixin as _e, SbbDisabledMixin as ge, SbbNegativeMixin as ve, SbbHydrationMixin as me, SbbRequiredMixin as fe, SbbReadonlyMixin as ye, SbbFormAssociatedMixin as xe } from "../core/mixins.js";
 import { isEventOnElement as W, setOverlayPosition as we, overlayGapFixCorners as ke } from "../core/overlay.js";
-import { boxSizingStyles as Oe } from "../core/styles.js";
-const Ee = te`.sbb-gap-fix-wrapper{position:relative;overflow:hidden;width:var(--sbb-options-panel-border-radius);height:var(--sbb-options-panel-border-radius);background-color:transparent}.sbb-gap-fix-corner{position:absolute;border-radius:50%;border:calc(var(--sbb-options-panel-border-radius) / 2) solid var(--sbb-options-panel-background-color);width:calc(var(--sbb-options-panel-border-radius) * 3);height:calc(var(--sbb-options-panel-border-radius) * 3);bottom:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}.sbb-gap-fix-corner#left{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host(:dir(rtl)) .sbb-gap-fix-corner#left{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1);left:unset}.sbb-gap-fix-corner#right{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host(:dir(rtl)) .sbb-gap-fix-corner#right{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1);right:unset}:host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color: light-dark( color-mix(in srgb, var(--sbb-color-black) 30%, transparent), color-mix(in srgb, var(--sbb-color-white) 30%, transparent) );--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);--sbb-scrollbar-color-hover: light-dark( color-mix(in srgb, var(--sbb-color-black) 60%, transparent), color-mix(in srgb, var(--sbb-color-white) 60%, transparent) );--sbb-scrollbar-track-color: transparent;--sbb-options-panel-position-x: 0;--sbb-options-panel-position-y: 0;--_sbb-options-panel-max-height: min( var(--sbb-options-panel-max-height-calculated), var(--sbb-options-panel-max-height, 100000em) );--sbb-options-panel-min-height: var(--sbb-options-panel-origin-height);--sbb-options-panel-visibility: visible;--sbb-options-panel-width: fit-content;--sbb-options-panel-border-radius: var(--sbb-border-radius-4x);--sbb-options-panel-options-border-radius: 0 0 var(--sbb-options-panel-border-radius) var(--sbb-options-panel-border-radius);--sbb-options-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-options-panel-animation-timing-function: ease;--sbb-options-panel-gap-fix-opacity: 0;--sbb-options-panel-gap-fix-transform: none;--sbb-options-panel-gap-fix-top: calc( var(--sbb-options-panel-position-y) - var(--sbb-options-panel-border-radius) );--sbb-options-panel-background-color: var(--sbb-background-color-1);--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x);--sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-focus-outline-color: light-dark( var(--sbb-focus-outline-color-default), var(--sbb-focus-outline-color-dark) );--sbb-options-panel-internal-z-index: var( --sbb-select-z-index, var(--sbb-overlay-default-z-index) );--sbb-select-placeholder-fallback-color: var(--sbb-color-metal);--sbb-select-placeholder-fallback-color: light-dark( var(--sbb-color-metal), var(--sbb-color-smoke) );display:block}:host([size=s]){--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x)}:host([negative]){--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);--sbb-options-panel-background-color: var(--sbb-background-color-1-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-select-placeholder-fallback-color: var(--sbb-color-5)}:host(:not(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))),:host(:is(:state(state-closed),[state--state-closed])){--sbb-options-panel-visibility: hidden}:host(:is(:state(state-opening),[state--state-opening])){--sbb-options-panel-animation-name: open}:host(:is(:state(state-closing),[state--state-closing])){--sbb-options-panel-animation-name: close}:host(:is(:state(state-opened),[state--state-opened])),:host(:is(:state(state-opening),[state--state-opening])){--sbb-options-panel-gap-fix-opacity: 1}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])){--sbb-options-panel-animation-transform: translateY( calc((var(--sbb-options-panel-origin-height) / 2) * -1) )}:host(:is(:state(options-panel-position-above),[state--options-panel-position-above])){--sbb-options-panel-options-border-radius: var(--sbb-options-panel-border-radius) var(--sbb-options-panel-border-radius) 0 0;--sbb-options-panel-gap-fix-top: var(--_sbb-options-panel-max-height);--sbb-options-panel-gap-fix-transform: rotate(180deg);--sbb-options-panel-animation-transform: translateY( calc(var(--sbb-options-panel-origin-height) / 2) )}::slotted(sbb-divider){margin-block:var(--sbb-options-panel-divider-margin-block)}:host([preserve-icon-space]){--sbb-option-icon-container-display: block}.sbb-select__trigger{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:var(--sbb-cursor-default);height:calc(1em * var(--sbb-typo-line-height-text))}.sbb-select__trigger--placeholder{color:var(--sbb-select-placeholder-color, var(--sbb-select-placeholder-fallback-color));-webkit-text-fill-color:var(--sbb-select-placeholder-color, var(--sbb-select-placeholder-fallback-color))}.sbb-select__container{position:fixed;pointer-events:none;inset:0;z-index:var(--sbb-options-panel-internal-z-index)}.sbb-select__container[popover]{margin:0;padding:0;border:none;width:auto;height:auto;background-color:transparent}.sbb-select__gap-fix{display:flex;justify-content:space-between;position:fixed;visibility:var(--sbb-options-panel-visibility);opacity:var(--sbb-options-panel-gap-fix-opacity);background-color:transparent;width:var(--sbb-options-panel-width);height:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-gap-fix-top);left:var(--sbb-options-panel-position-x);transform:var(--sbb-options-panel-gap-fix-transform);transition:opacity var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function)}.sbb-select__panel{display:block;position:absolute;visibility:var(--sbb-options-panel-visibility);overflow:hidden;background-color:transparent;border:none;border-radius:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-position-y);left:var(--sbb-options-panel-position-x);width:var(--sbb-options-panel-width);transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function)}.sbb-select__panel:before,.sbb-select__panel:after{content:"";display:none;position:relative;width:100%;height:var(--sbb-options-panel-origin-height);background-color:transparent;border-radius:var(--sbb-options-panel-border-radius);pointer-events:none;transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);z-index:1}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])) .sbb-select__panel{inset-block-start:calc(var(--sbb-options-panel-position-y) - var(--sbb-options-panel-origin-height))}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))) .sbb-select__panel{box-shadow:var(--sbb-box-shadow-level-5-hard)}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))[negative]) .sbb-select__panel{box-shadow:var(--sbb-box-shadow-level-5-hard-negative)}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])) .sbb-select__panel:before{display:block}:host(:is(:state(options-panel-position-above),[state--options-panel-position-above])) .sbb-select__panel:after{display:block}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])) .sbb-select__panel:before,:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])) .sbb-select__panel:after{box-shadow:var(--sbb-box-shadow-level-5-hard)}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])[negative]) .sbb-select__panel:before,:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])[negative]) .sbb-select__panel:after{box-shadow:var(--sbb-box-shadow-level-5-hard-negative)}.sbb-select__wrapper{overflow:hidden}.sbb-select__options{background-color:var(--sbb-options-panel-background-color);padding-block:var(--sbb-options-panel-padding-block);padding-inline:0;border-radius:var(--sbb-options-panel-options-border-radius);max-height:var(--_sbb-options-panel-max-height);min-height:var(--sbb-options-panel-min-height);pointer-events:all;overflow-y:auto;animation-name:var(--sbb-options-panel-animation-name);animation-duration:var(--sbb-options-panel-animation-duration);animation-timing-function:var(--sbb-options-panel-animation-timing-function);--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-select__options::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-select__options::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-select__options::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-select__options::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-select__options::-webkit-scrollbar-button,.sbb-select__options::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-select__options{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}@media(forced-colors:active){.sbb-select__options{border:var(--sbb-border-width-1x) solid CanvasText;border-block-start:none}}@keyframes open{0%{transform:var(--sbb-options-panel-animation-transform);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes close{0%{transform:translateY(0);opacity:1}to{transform:var(--sbb-options-panel-animation-transform);opacity:0}}`, k = he;
+import { boxSizingStyles as Ee } from "../core/styles.js";
+const Oe = te`.sbb-gap-fix-wrapper{position:relative;overflow:hidden;width:var(--sbb-options-panel-border-radius);height:var(--sbb-options-panel-border-radius);background-color:transparent}.sbb-gap-fix-corner{position:absolute;border-radius:50%;border:calc(var(--sbb-options-panel-border-radius) / 2) solid var(--sbb-options-panel-background-color);width:calc(var(--sbb-options-panel-border-radius) * 3);height:calc(var(--sbb-options-panel-border-radius) * 3);bottom:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}.sbb-gap-fix-corner#left{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host(:dir(rtl)) .sbb-gap-fix-corner#left{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1);left:unset}.sbb-gap-fix-corner#right{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host(:dir(rtl)) .sbb-gap-fix-corner#right{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1);right:unset}:host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color: light-dark( color-mix(in srgb, var(--sbb-color-black) 30%, transparent), color-mix(in srgb, var(--sbb-color-white) 30%, transparent) );--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);--sbb-scrollbar-color-hover: light-dark( color-mix(in srgb, var(--sbb-color-black) 60%, transparent), color-mix(in srgb, var(--sbb-color-white) 60%, transparent) );--sbb-scrollbar-track-color: transparent;--sbb-options-panel-position-x: 0;--sbb-options-panel-position-y: 0;--_sbb-options-panel-max-height: min( var(--sbb-options-panel-max-height-calculated), var(--sbb-options-panel-max-height, 100000em) );--sbb-options-panel-min-height: var(--sbb-options-panel-origin-height);--sbb-options-panel-visibility: visible;--sbb-options-panel-width: fit-content;--sbb-options-panel-border-radius: var(--sbb-border-radius-4x);--sbb-options-panel-options-border-radius: 0 0 var(--sbb-options-panel-border-radius) var(--sbb-options-panel-border-radius);--sbb-options-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-options-panel-animation-timing-function: ease;--sbb-options-panel-gap-fix-opacity: 0;--sbb-options-panel-gap-fix-transform: none;--sbb-options-panel-gap-fix-top: calc( var(--sbb-options-panel-position-y) - var(--sbb-options-panel-border-radius) );--sbb-options-panel-background-color: var(--sbb-background-color-1);--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x);--sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-focus-outline-color: light-dark( var(--sbb-focus-outline-color-default), var(--sbb-focus-outline-color-dark) );--sbb-options-panel-internal-z-index: var( --sbb-select-z-index, var(--sbb-overlay-default-z-index) );--sbb-select-placeholder-fallback-color: var(--sbb-color-metal);--sbb-select-placeholder-fallback-color: light-dark( var(--sbb-color-metal), var(--sbb-color-smoke) );display:block}:host([size=s]){--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x)}:host([negative]){--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);--sbb-options-panel-background-color: var(--sbb-background-color-1-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-select-placeholder-fallback-color: var(--sbb-color-5)}:host(:not(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))),:host(:is(:state(state-closed),[state--state-closed])){--sbb-options-panel-visibility: hidden}:host(:is(:state(state-opening),[state--state-opening])){--sbb-options-panel-animation-name: open}:host(:is(:state(state-closing),[state--state-closing])){--sbb-options-panel-animation-name: close}:host(:is(:state(state-opened),[state--state-opened])),:host(:is(:state(state-opening),[state--state-opening])){--sbb-options-panel-gap-fix-opacity: 1}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])){--sbb-options-panel-animation-transform: translateY( calc((var(--sbb-options-panel-origin-height) / 2) * -1) )}:host(:is(:state(options-panel-position-above),[state--options-panel-position-above])){--sbb-options-panel-options-border-radius: var(--sbb-options-panel-border-radius) var(--sbb-options-panel-border-radius) 0 0;--sbb-options-panel-gap-fix-top: var(--_sbb-options-panel-max-height);--sbb-options-panel-gap-fix-transform: rotate(180deg);--sbb-options-panel-animation-transform: translateY( calc(var(--sbb-options-panel-origin-height) / 2) )}::slotted(sbb-divider){margin-block:var(--sbb-options-panel-divider-margin-block)}:host([preserve-icon-space]){--sbb-option-icon-container-display: block}.sbb-select__trigger{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:var(--sbb-cursor-default);height:calc(1em * var(--sbb-typo-line-height-text))}.sbb-select__trigger--placeholder{color:var(--sbb-select-placeholder-color, var(--sbb-select-placeholder-fallback-color));-webkit-text-fill-color:var(--sbb-select-placeholder-color, var(--sbb-select-placeholder-fallback-color))}.sbb-select__container{position:fixed;pointer-events:none;inset:0;z-index:var(--sbb-options-panel-internal-z-index)}.sbb-select__container[popover]{margin:0;padding:0;border:none;width:auto;height:auto;background-color:transparent}.sbb-select__gap-fix{display:flex;justify-content:space-between;position:fixed;visibility:var(--sbb-options-panel-visibility);opacity:var(--sbb-options-panel-gap-fix-opacity);background-color:transparent;width:var(--sbb-options-panel-width);height:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-gap-fix-top);left:var(--sbb-options-panel-position-x);transform:var(--sbb-options-panel-gap-fix-transform);transition:opacity var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function)}.sbb-select__panel{display:block;position:absolute;visibility:var(--sbb-options-panel-visibility);overflow:hidden;background-color:transparent;border:none;border-radius:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-position-y);left:var(--sbb-options-panel-position-x);width:var(--sbb-options-panel-width);transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function)}.sbb-select__panel:before,.sbb-select__panel:after{content:"";display:none;position:relative;width:100%;height:var(--sbb-options-panel-origin-height);background-color:transparent;border-radius:var(--sbb-options-panel-border-radius);pointer-events:none;transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);z-index:1}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])) .sbb-select__panel{inset-block-start:calc(var(--sbb-options-panel-position-y) - var(--sbb-options-panel-origin-height))}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))) .sbb-select__panel{box-shadow:var(--sbb-box-shadow-level-5-hard)}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))[negative]) .sbb-select__panel{box-shadow:var(--sbb-box-shadow-level-5-hard-negative)}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])) .sbb-select__panel:before{display:block}:host(:is(:state(options-panel-position-above),[state--options-panel-position-above])) .sbb-select__panel:after{display:block}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])) .sbb-select__panel:before,:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])) .sbb-select__panel:after{box-shadow:var(--sbb-box-shadow-level-5-hard)}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])[negative]) .sbb-select__panel:before,:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])[negative]) .sbb-select__panel:after{box-shadow:var(--sbb-box-shadow-level-5-hard-negative)}.sbb-select__wrapper{overflow:hidden}.sbb-select__options{background-color:var(--sbb-options-panel-background-color);padding-block:var(--sbb-options-panel-padding-block);padding-inline:0;border-radius:var(--sbb-options-panel-options-border-radius);max-height:var(--_sbb-options-panel-max-height);min-height:var(--sbb-options-panel-min-height);pointer-events:all;overflow-y:auto;animation-name:var(--sbb-options-panel-animation-name);animation-duration:var(--sbb-options-panel-animation-duration);animation-timing-function:var(--sbb-options-panel-animation-timing-function);--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-select__options::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-select__options::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-select__options::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-select__options::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-select__options::-webkit-scrollbar-button,.sbb-select__options::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-select__options{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}@media(forced-colors:active){.sbb-select__options{border:var(--sbb-border-width-1x) solid CanvasText;border-block-start:none}}@keyframes open{0%{transform:var(--sbb-options-panel-animation-transform);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes close{0%{transform:translateY(0);opacity:1}to{transform:var(--sbb-options-panel-animation-transform);opacity:0}}`, k = he;
 let Ae = 0, je = (() => {
   var u, _, g, v, m, o;
   let i = [ie("sbb-select")], a, r = [], b, C = _e(ge(ve(me(fe(ye(xe(re))))))), V = [], I, D = [], z = [], L, P = [], $ = [], M, R = [], T = [], N, F, U = [], q = [], B, K = [], j = [];
@@ -37,7 +37,7 @@ let Ae = 0, je = (() => {
         callback: () => {
           this.isOpen && this._setOverlayPosition();
         }
-      })), this._escapableOverlayController = new ne(this), this._overlayId = `sbb-select-${++Ae}`, this._activeItemIndex = -1, this._searchString = "", this._didLoad = !1, this._isPointerDownEventOnMenu = !1, this._languageController = new le(this), this._isValueManuallyAssigned = !1, this._pointerDownListener = (e) => {
+      })), this._originElement = null, this._triggerElement = null, this._escapableOverlayController = new ne(this), this._overlayId = `sbb-select-${++Ae}`, this._activeItemIndex = -1, this._searchString = "", this._didLoad = !1, this._isPointerDownEventOnMenu = !1, this._languageController = new le(this), this._isValueManuallyAssigned = !1, this._pointerDownListener = (e) => {
         this._isPointerDownEventOnMenu = W(this._overlay, e);
       }, this._closeOnBackdropClick = (e) => {
         !this._isPointerDownEventOnMenu && !W(this._overlay, e) && this.close();
@@ -111,7 +111,7 @@ let Ae = 0, je = (() => {
      * @internal
      */
     get inputElement() {
-      return this._triggerElement;
+      return this._triggerElement ?? null;
     }
     /** Returns all SbbOptionElements from this sbb-select instance. */
     get options() {
@@ -199,7 +199,7 @@ let Ae = 0, je = (() => {
       super.willUpdate(e), e.has("negative") && this._syncNegative(), e.has("readOnly") && this._closeOnDisabledReadonlyChanged(this.readOnly);
     }
     disconnectedCallback() {
-      this.prepend(this._triggerElement), super.disconnectedCallback(), this._openPanelEventsController?.abort();
+      this._triggerElement && this.prepend(this._triggerElement), super.disconnectedCallback(), this._openPanelEventsController?.abort();
     }
     /**
      * The reset value is the attribute value (the setup value), null otherwise.
@@ -248,10 +248,10 @@ let Ae = 0, je = (() => {
      * we are forced to move the 'combobox' trigger element to the light DOM
      */
     _setupTrigger() {
-      this.parentElement.insertBefore?.(this._triggerElement, this);
+      this.parentElement && this._triggerElement && this.parentElement.insertBefore?.(this._triggerElement, this);
     }
     _setOverlayPosition() {
-      we(this._overlay, this._originElement, this._optionContainer, this.shadowRoot.querySelector(".sbb-select__container"), this);
+      this._originElement && we(this._overlay, this._originElement, this._optionContainer, this.shadowRoot.querySelector(".sbb-select__container"), this);
     }
     // In rare cases it can be that the animationEnd event is triggered twice.
     // To avoid entering a corrupt state, exit when state is not expected.
@@ -259,10 +259,10 @@ let Ae = 0, je = (() => {
       e.animationName === "open" && this.state === "opening" ? this._handleOpening() : e.animationName === "close" && this.state === "closing" && this._handleClosing();
     }
     _handleOpening() {
-      this.state = "opened", this._triggerElement.setAttribute("aria-expanded", "true"), this._originElement && this._originResizeObserver.observe(this._originElement), this.dispatchOpenEvent();
+      this.state = "opened", this._triggerElement?.setAttribute("aria-expanded", "true"), this._originElement && this._originResizeObserver.observe(this._originElement), this.dispatchOpenEvent();
     }
     _handleClosing() {
-      this.state = "closed", this.shadowRoot?.querySelector(".sbb-select__container")?.hidePopover?.(), this._triggerElement.setAttribute("aria-expanded", "false"), this._resetActiveElement(), this._optionContainer.scrollTop = 0, this._escapableOverlayController.disconnect(), this.dispatchCloseEvent();
+      this.state = "closed", this.shadowRoot?.querySelector(".sbb-select__container")?.hidePopover?.(), this._triggerElement?.setAttribute("aria-expanded", "false"), this._resetActiveElement(), this._optionContainer.scrollTop = 0, this._escapableOverlayController.disconnect(), this.dispatchCloseEvent();
     }
     /** When an option is selected, updates the displayValue; it also closes the select if not `multiple`. */
     _onOptionSelected(e) {
@@ -365,14 +365,14 @@ let Ae = 0, je = (() => {
       this._setActiveElement(c, p), this.multiple ? e?.shiftKey && c.selectViaUserInteraction(!c.selected) : this._setSelectedElement(c, p), this._activeItemIndex = d;
     }
     _setActiveElement(e, t = null, s = !0) {
-      e.setActive(!0), e.scrollIntoView({ block: "nearest" }), s && this._triggerElement.setAttribute("aria-activedescendant", e.id), t && t !== e && t.setActive(!1);
+      e.setActive(!0), e.scrollIntoView({ block: "nearest" }), s && this._triggerElement?.setAttribute("aria-activedescendant", e.id), t && t !== e && t.setActive(!1);
     }
     _setSelectedElement(e, t) {
       e.selectViaUserInteraction(!0), t && t !== e && t.selectViaUserInteraction(!1);
     }
     _resetActiveElement() {
       const e = this._selectableOptions()[this._activeItemIndex];
-      e && e.setActive(!1), this._activeItemIndex = -1, this._triggerElement.removeAttribute("aria-activedescendant");
+      e && e.setActive(!1), this._activeItemIndex = -1, this._triggerElement?.removeAttribute("aria-activedescendant");
     }
     _updateOptionsFromValue() {
       const e = Array.isArray(this.value) ? this.value : [this.value];
@@ -425,7 +425,7 @@ let Ae = 0, je = (() => {
       readers to work properly -->
       <div
         class="sbb-screen-reader-only sbb-select-trigger"
-        tabindex=${this.disabled || this.formDisabled ? O : "0"}
+        tabindex=${this.disabled || this.formDisabled ? E : "0"}
         role="combobox"
         aria-haspopup="listbox"
         aria-expanded="false"
@@ -434,7 +434,7 @@ let Ae = 0, je = (() => {
         aria-owns=${this._overlayId}
         @keydown=${this._onKeyDown}
         @click=${this._toggleOpening}
-        ${E((e) => this._triggerElement = e)}
+        ${O((e) => this._triggerElement = e)}
       >
         ${H(...this._spreadDeferredDisplayValue(w`<span>${this.placeholder}</span>`))}
       </div>
@@ -450,15 +450,15 @@ let Ae = 0, je = (() => {
         <div
           @animationend=${this._onAnimationEnd}
           class="sbb-select__panel"
-          ${E((e) => this._overlay = e)}
+          ${O((e) => this._overlay = e)}
         >
           <div class="sbb-select__wrapper">
             <div
-              id=${k ? O : this._overlayId}
+              id=${k ? E : this._overlayId}
               class="sbb-select__options"
-              role=${k ? O : "listbox"}
+              role=${k ? E : "listbox"}
               ?aria-multiselectable=${this.multiple}
-              ${E((e) => this._optionContainer = e)}
+              ${O((e) => this._optionContainer = e)}
               tabindex="-1"
             >
               <slot @slotchange=${this._updateValueOptionState}></slot>
@@ -483,7 +483,7 @@ let Ae = 0, je = (() => {
     } }, metadata: e }, U, q), h(o, null, B, { kind: "accessor", name: "_displayValue", static: !1, private: !1, access: { has: (t) => "_displayValue" in t, get: (t) => t._displayValue, set: (t, s) => {
       t._displayValue = s;
     } }, metadata: e }, K, j), h(null, a = { value: b }, i, { kind: "class", name: b.name, metadata: e }, null, r), b = a.value, e && Object.defineProperty(b, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), o.role = k ? "listbox" : null, o.styles = [Oe, Ee], o.events = {
+  })(), o.role = k ? "listbox" : null, o.styles = [Ee, Oe], o.events = {
     change: "change",
     input: "input",
     displayvaluechange: "displayvaluechange",

package/standard-theme.css

@@ -1367,6 +1367,57 @@ summary {
     var(--sbb-color-silver),
     var(--sbb-color-anthracite)
   );
+  --sbb-button-box-shadow: transparent 0 0;
+  --sbb-button-border-radius: var(--sbb-border-radius-infinity);
+  --sbb-button-border-width: var(--sbb-border-width-2x);
+  --sbb-button-border-disabled-style: dashed;
+  --sbb-button-border-disabled-width: var(--sbb-border-width-1x);
+  --sbb-button-color-disabled-background: var(--sbb-background-color-3);
+  --sbb-button-color-disabled-border: var(--sbb-border-color-5);
+  --sbb-button-color-disabled-text: var(--sbb-color-granite);
+  --sbb-button-color-disabled-text: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-aluminium)
+  );
+  --sbb-button-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-button-loading-border-width: var(--sbb-border-width-3x);
+  --sbb-button-loading-delay: 300ms;
+  --sbb-button-min-height-size-l: var(--sbb-size-element-m);
+  --sbb-button-min-height-size-m: var(--sbb-size-element-s);
+  --sbb-button-min-height-size-s: var(--sbb-size-element-xs);
+  --sbb-button-min-height: var(--sbb-button-min-height-size-l);
+  --sbb-button-padding-block-min: var(--sbb-spacing-fixed-1x);
+  --sbb-button-padding-inline-size-l: var(--sbb-spacing-fixed-8x);
+  --sbb-button-padding-inline-size-m: var(--sbb-spacing-fixed-5x);
+  --sbb-button-padding-inline-size-s: var(--sbb-spacing-fixed-4x);
+  --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-l);
+  --sbb-button-shadow-1-offset-y: var(--sbb-shadow-elevation-level-3-shadow-1-offset-y);
+  --sbb-button-shadow-2-offset-y: var(--sbb-shadow-elevation-level-3-shadow-2-offset-y);
+  --sbb-button-shadow-1-blur: var(--sbb-shadow-elevation-level-3-shadow-1-blur);
+  --sbb-button-shadow-2-blur: var(--sbb-shadow-elevation-level-3-shadow-2-blur);
+  --sbb-button-transition-easing-function: var(--sbb-animation-easing);
+  --sbb-mini-button-color-text: var(--sbb-color-3);
+  --sbb-mini-button-color-default-background: transparent;
+  --sbb-mini-button-color-hover-background: var(--sbb-background-color-3);
+  --sbb-mini-button-color-active-background: var(--sbb-background-color-4);
+  --sbb-mini-button-color-disabled-background: var(--sbb-background-color-3);
+  --sbb-mini-button-color-disabled-border: var(--sbb-border-color-5);
+  --sbb-mini-button-color-disabled-text: var(--sbb-color-granite);
+  --sbb-mini-button-color-disabled-text: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-smoke)
+  );
+  --sbb-mini-button-border-radius: var(--sbb-border-radius-infinity);
+  --sbb-mini-button-transition-easing-function: var(--sbb-animation-easing);
+  --sbb-mini-button-group-background: var(--sbb-background-color-1);
+  --sbb-mini-button-group-border-color: var(--sbb-border-color-4-inverted);
+  --sbb-mini-button-group-border-width: var(--sbb-border-width-2x);
+  --sbb-mini-button-group-border-radius: var(--sbb-border-radius-infinity);
+  --sbb-mini-button-group-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-mini-button-group-min-height: var(--sbb-size-element-s);
+  --sbb-mini-button-group-padding-inline: var(--sbb-spacing-fixed-3x);
+  --sbb-mini-button-group-divider-height: var(--sbb-size-icon-ui-small);
+  --sbb-mini-button-group-divider-padding: var(--sbb-spacing-fixed-1x);
   --sbb-card-background-color: var(--sbb-background-color-1);
   --sbb-card-border-color: transparent;
   --sbb-card-border-radius: var(--sbb-border-radius-4x);
@@ -1394,6 +1445,12 @@ summary {
   --sbb-carousel-border-radius: var(--sbb-border-radius-4x);
   --sbb-carousel-box-shadow: var(--sbb-box-shadow-level-9-hard);
   --sbb-carousel-paginator-padding: var(--sbb-spacing-responsive-xs);
+  --sbb-chip-label-color: var(--sbb-color-granite);
+  --sbb-chip-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));
+  --sbb-chip-label-background-color: var(--sbb-background-color-3);
+  --sbb-chip-label-padding-block: 0em;
+  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);
+  --sbb-chip-label-font-size: var(--sbb-text-font-size-xxs);
   --sbb-chip-background-color: var(--sbb-background-color-3);
   --sbb-chip-background-color-active: var(--sbb-background-color-1);
   --sbb-chip-background-color-hover: var(--sbb-background-color-1);
@@ -1449,6 +1506,13 @@ summary {
   --sbb-checkbox-font-size: var(--sbb-text-font-size-m);
   --sbb-checkbox-label-color: var(--sbb-color-color-3);
   --sbb-checkbox-cursor: var(--sbb-cursor-pointer);
+  --sbb-container-background-border-radius: 0;
+  --sbb-container-color: inherit;
+  --sbb-sticky-bar-animation-easing: var(--sbb-animation-easing);
+  --sbb-sticky-bar-border-radius: var(--sbb-border-radius-8x);
+  --sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xs);
+  --sbb-sticky-bar-position: sticky;
+  --sbb-sticky-bar-slide-vertically-animation-easing: ease-out;
   --sbb-clock-seconds-hand-color: var(--sbb-color-brand);
   --sbb-clock-face-color: var(--sbb-color-1);
   --sbb-clock-background-color: var(--sbb-background-color-1);
@@ -1659,6 +1723,9 @@ summary {
     --sbb-size-element-s: var(--sbb-size-element-s-large);
     --sbb-size-element-m: var(--sbb-size-element-m-large);
     --sbb-size-element-l: var(--sbb-size-element-l-large);
+    --sbb-button-padding-inline-size-l: var(--sbb-spacing-fixed-10x);
+    --sbb-button-padding-inline-size-m: var(--sbb-spacing-fixed-8x);
+    --sbb-button-padding-inline-size-s: var(--sbb-spacing-fixed-5x);
     --sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 0;
     --sbb-chip-group-margin-block-no-label-not-empty: 0.1875rem 0.875rem;
     --sbb-chip-group-margin-block-with-label-not-empty: var(--_sbb-chip-group-margin-block-start-default-large) var(--_sbb-chip-group-margin-block-start-default-large);
@@ -1708,6 +1775,14 @@ summary {
   font-display: swap;
   font-weight: 300;
 }
+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%;
+  position: absolute;
+}
+
 sbb-tab-nav-bar .sbb-tab-amount {
   margin: 0;
   color: var(--sbb-tab-label-amount-color);
@@ -1991,14 +2066,6 @@ img {
   object-position: var(--sbb-image-object-position);
 }
 
-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%;
-  position: absolute;
-}
-
 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;

package/tabs/tab/tab.component.js

@@ -3,10 +3,10 @@ import { ResizeController as b } from "@lit-labs/observers/resize-controller.js"
 import { css as c, LitElement as u, html as h } from "lit";
 import { customElement as m } from "lit/decorators.js";
 import { SbbElementInternalsMixin as d } from "../../core/mixins.js";
-const v = c`@charset "UTF-8";:host{display:none}:host:after,:host:before{content:" ";display:block;visibility:hidden;height:0;overflow:hidden}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}:host(:is(:state(active),[state--active])){display:block;opacity:1;transition-duration:var(--sbb-tab-group-animation-duration);transition-delay:var(--sbb-tab-group-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:opacity,height;transition-behavior:allow-discrete}@starting-style{:host(:is(:state(active),[state--active])){opacity:0}}`;
+const v = c`@charset "UTF-8";:host:after,:host:before{content:" ";display:block;visibility:hidden;height:0;overflow:hidden}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}:host(:not(:is(:state(active),[state--active]))){display:none!important}:host(:is(:state(active),[state--active])){display:block;opacity:1;transition-duration:var(--sbb-tab-group-animation-duration);transition-delay:var(--sbb-tab-group-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:opacity,height;transition-behavior:allow-discrete}@starting-style{:host(:is(:state(active),[state--active])){opacity:0}}`;
 let p = 0, E = (() => {
   var t;
-  let o = [m("sbb-tab")], s, a = [], e, n = d(u);
+  let o = [m("sbb-tab")], i, a = [], e, n = d(u);
   return t = class extends n {
     constructor() {
       super(...arguments), this._tabContentResizeObserver = new b(this, {
@@ -24,7 +24,7 @@ let p = 0, E = (() => {
       return this.closest("sbb-tab-group");
     }
     connectedCallback() {
-      super.connectedCallback(), this.id ||= `sbb-tab-${p++}`, this.tabIndex = 0;
+      super.connectedCallback(), this.id ||= `sbb-tab-${p++}`, this.tabIndex = 0, this.classList.add("sbb-scrollbar");
     }
     /** @internal */
     activate() {
@@ -41,8 +41,8 @@ let p = 0, E = (() => {
       return h`<slot></slot>`;
     }
   }, e = t, (() => {
-    const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
-    l(null, s = { value: e }, o, { kind: "class", name: e.name, metadata: i }, null, a), e = s.value, i && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
+    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
+    l(null, i = { value: e }, o, { kind: "class", name: e.name, metadata: s }, null, a), e = i.value, s && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
   })(), t.role = "tabpanel", t.styles = v, t.events = {
     active: "active"
   }, r(e, a), e;