@sbb-esta/lyne-elements 1.14.1 → 1.15.1

package/select.js

@@ -1,45 +1,45 @@
-var F = (a) => {
+var R = (a) => {
   throw TypeError(a);
 };
-var q = (a, o, l) => o.has(a) || F("Cannot " + l);
-var f = (a, o, l) => (q(a, o, "read from private field"), l ? l.call(a) : o.get(a)), g = (a, o, l) => o.has(a) ? F("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(a) : o.set(a, l), d = (a, o, l, b) => (q(a, o, "write to private field"), b ? b.call(a, l) : o.set(a, l), l);
+var q = (a, o, l) => o.has(a) || R("Cannot " + l);
+var f = (a, o, l) => (q(a, o, "read from private field"), l ? l.call(a) : o.get(a)), g = (a, o, l) => o.has(a) ? R("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(a) : o.set(a, l), d = (a, o, l, b) => (q(a, o, "write to private field"), b ? b.call(a, l) : o.set(a, l), l);
 import { __esDecorate as m, __runInitializers as h } from "tslib";
-import { MutationController as Y } from "@lit-labs/observers/mutation-controller.js";
-import { css as G, html as y, nothing as E } from "lit";
-import { customElement as W, property as O, state as J } from "lit/decorators.js";
+import { MutationController as G } from "@lit-labs/observers/mutation-controller.js";
+import { css as W, html as y, nothing as E } from "lit";
+import { customElement as J, property as O, state as Q } from "lit/decorators.js";
 import { ref as C } from "lit/directives/ref.js";
-import { until as R } from "lit/directives/until.js";
-import { getNextElementIndex as Q } from "./core/a11y.js";
-import { SbbOpenCloseBaseElement as X } from "./core/base-elements.js";
-import { SbbConnectedAbortController as Z } from "./core/controllers.js";
-import { hostAttributes as ee, forceType as A } from "./core/decorators.js";
-import { isNextjs as j, isSafari as te } from "./core/dom.js";
+import { until as j } from "lit/directives/until.js";
+import { getNextElementIndex as X } from "./core/a11y.js";
+import { SbbOpenCloseBaseElement as Z } from "./core/base-elements.js";
+import { SbbConnectedAbortController as ee, SbbLanguageController as te } from "./core/controllers.js";
+import { hostAttributes as se, forceType as A } from "./core/decorators.js";
+import { setOrRemoveAttribute as S, isNextjs as H, isSafari as ie } from "./core/dom.js";
 import { EventEmitter as x } from "./core/eventing.js";
-import { SbbUpdateSchedulerMixin as se, SbbDisabledMixin as ie, SbbNegativeMixin as ae, SbbHydrationMixin as oe, SbbRequiredMixin as re, SbbFormAssociatedMixin as le } from "./core/mixins.js";
-import { isEventOnElement as H, setOverlayPosition as ne, overlayGapFixCorners as be } from "./core/overlay.js";
-const de = G`*,:before,:after{box-sizing:border-box}.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: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-options-panel-position-x: 0;--sbb-options-panel-position-y: 0;--sbb-options-panel-active-option-y: 0;--sbb-options-panel-max-height: calc(85vh - var(--sbb-spacing-fixed-8x));--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-time, 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-color-white);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-options-panel-internal-z-index: var( --sbb-select-z-index, var(--sbb-overlay-default-z-index) );display:block}:host([negative]){--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-options-panel-background-color: var(--sbb-color-midnight);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host(:not([data-state])),:host([data-state=closed]){--sbb-options-panel-visibility: hidden}:host([data-state=opening]){--sbb-options-panel-animation-name: open}:host([data-state=closing]){--sbb-options-panel-animation-name: close}:host([data-state=opened]),:host([data-state=opening]){--sbb-options-panel-gap-fix-opacity: 1}:host([data-options-panel-position=below]){--sbb-options-panel-animation-transform: translateY( calc((var(--sbb-options-panel-origin-height) / 2) * -1) )}:host([data-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-spacing-fixed-3x)}:host([preserve-icon-space]){--sbb-option-icon-container-display: block}.sbb-select__trigger{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:calc(1em * var(--sbb-typo-line-height-body-text))}.sbb-select__trigger--placeholder{color:var(--sbb-select-placeholder-color, var(--sbb-color-metal));-webkit-text-fill-color:var(--sbb-select-placeholder-color, var(--sbb-color-metal))}.sbb-select__container{position:fixed;pointer-events:none;top:0;right:0;bottom:0;left:0;z-index:var(--sbb-options-panel-internal-z-index)}.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([data-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([data-state=opened],[data-state=opening])) .sbb-select__panel{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color)}:host(:is([data-state=opened],[data-state=opening])[negative]) .sbb-select__panel{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-negative-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-negative-1-color)}:host([data-options-panel-position=below]) .sbb-select__panel:before{display:block}:host([data-options-panel-position=above]) .sbb-select__panel:after{display:block}:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless]) .sbb-select__panel:before,:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless]) .sbb-select__panel:after{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color)}:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless][negative]) .sbb-select__panel:before,:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless][negative]) .sbb-select__panel:after{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-negative-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-negative-1-color)}.sbb-select__wrapper{overflow:hidden}.sbb-select__options{background-color:var(--sbb-options-panel-background-color);padding-block:var(--sbb-spacing-fixed-3x);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)}}.sbb-select__options{padding-block:var(--sbb-spacing-fixed-2x)}@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 = te;
-let he = 0, Se = (() => {
+import { SbbUpdateSchedulerMixin as ae, SbbDisabledMixin as oe, SbbNegativeMixin as re, SbbHydrationMixin as le, SbbRequiredMixin as ne, SbbFormAssociatedMixin as be } from "./core/mixins.js";
+import { isEventOnElement as Y, setOverlayPosition as de, overlayGapFixCorners as he } from "./core/overlay.js";
+const pe = W`*,:before,:after{box-sizing:border-box}.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: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-options-panel-position-x: 0;--sbb-options-panel-position-y: 0;--sbb-options-panel-active-option-y: 0;--sbb-options-panel-max-height: calc(85vh - var(--sbb-spacing-fixed-8x));--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-time, 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-color-white);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-options-panel-internal-z-index: var( --sbb-select-z-index, var(--sbb-overlay-default-z-index) );display:block}:host([negative]){--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-options-panel-background-color: var(--sbb-color-midnight);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host(:not([data-state])),:host([data-state=closed]){--sbb-options-panel-visibility: hidden}:host([data-state=opening]){--sbb-options-panel-animation-name: open}:host([data-state=closing]){--sbb-options-panel-animation-name: close}:host([data-state=opened]),:host([data-state=opening]){--sbb-options-panel-gap-fix-opacity: 1}:host([data-options-panel-position=below]){--sbb-options-panel-animation-transform: translateY( calc((var(--sbb-options-panel-origin-height) / 2) * -1) )}:host([data-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-spacing-fixed-3x)}:host([preserve-icon-space]){--sbb-option-icon-container-display: block}.sbb-select__trigger{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:calc(1em * var(--sbb-typo-line-height-body-text))}.sbb-select__trigger--placeholder{color:var(--sbb-select-placeholder-color, var(--sbb-color-metal));-webkit-text-fill-color:var(--sbb-select-placeholder-color, var(--sbb-color-metal))}.sbb-select__container{position:fixed;pointer-events:none;top:0;right:0;bottom:0;left:0;z-index:var(--sbb-options-panel-internal-z-index)}.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([data-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([data-state=opened],[data-state=opening])) .sbb-select__panel{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color)}:host(:is([data-state=opened],[data-state=opening])[negative]) .sbb-select__panel{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-negative-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-negative-1-color)}:host([data-options-panel-position=below]) .sbb-select__panel:before{display:block}:host([data-options-panel-position=above]) .sbb-select__panel:after{display:block}:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless]) .sbb-select__panel:before,:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless]) .sbb-select__panel:after{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color)}:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless][negative]) .sbb-select__panel:before,:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless][negative]) .sbb-select__panel:after{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-negative-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-negative-1-color)}.sbb-select__wrapper{overflow:hidden}.sbb-select__options{background-color:var(--sbb-options-panel-background-color);padding-block:var(--sbb-spacing-fixed-3x);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)}}.sbb-select__options{padding-block:var(--sbb-spacing-fixed-2x)}@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 = ie;
+let ce = 0, De = (() => {
   var c, v, u, _, n;
-  let a = [W("sbb-select"), ee({
+  let a = [J("sbb-select"), se({
     role: k ? "listbox" : null
-  })], o, l = [], b, S = se(ie(ae(oe(re(le(X)))))), I, D = [], V = [], $, P = [], L = [], T, z = [], N = [], U, B = [], K = [];
-  var p = (n = class extends S {
+  })], o, l = [], b, I = ae(oe(re(le(ne(be(Z)))))), D, V = [], L = [], $, P = [], T = [], z, N = [], U = [], B, K = [], M = [];
+  var p = (n = class extends I {
     constructor() {
       super();
       g(this, c);
       g(this, v);
       g(this, u);
       g(this, _);
-      d(this, c, h(this, D, "")), d(this, v, (h(this, V), h(this, P, !1))), d(this, u, (h(this, L), h(this, z, !1))), d(this, _, (h(this, N), h(this, B, null))), this._didChange = (h(this, K), new x(this, p.events.didChange)), this._change = new x(this, p.events.change), this._input = new x(this, p.events.input), this._stateChange = new x(this, p.events.stateChange, {
+      d(this, c, h(this, V, "")), d(this, v, (h(this, L), h(this, P, !1))), d(this, u, (h(this, T), h(this, N, !1))), d(this, _, (h(this, U), h(this, K, null))), this._didChange = (h(this, M), new x(this, p.events.didChange)), this._change = new x(this, p.events.change), this._input = new x(this, p.events.input), this._stateChange = new x(this, p.events.stateChange, {
         composed: !1
-      }), this._overlayId = `sbb-select-${++he}`, this._activeItemIndex = -1, this._searchString = "", this._didLoad = !1, this._isPointerDownEventOnMenu = !1, this._abort = new Z(this), this._pointerDownListener = (e) => {
-        this._isPointerDownEventOnMenu = H(this._overlay, e);
+      }), this._overlayId = `sbb-select-${++ce}`, this._activeItemIndex = -1, this._searchString = "", this._didLoad = !1, this._isPointerDownEventOnMenu = !1, this._abort = new ee(this), this._pointerDownListener = (e) => {
+        this._isPointerDownEventOnMenu = Y(this._overlay, e);
       }, this._closeOnBackdropClick = (e) => {
-        !this._isPointerDownEventOnMenu && !H(this._overlay, e) && this.close();
-      }, new Y(this, {
-        config: { attributeFilter: ["aria-labelledby"] },
-        callback: (e) => this._onSelectAttributesChange(e)
-      });
+        !this._isPointerDownEventOnMenu && !Y(this._overlay, e) && this.close();
+      }, new G(this, {
+        config: { attributeFilter: ["aria-labelledby", "aria-label", "aria-describedby"] },
+        callback: () => this._syncAriaLabels()
+      }), new te(this).withHandler(() => setTimeout(() => this._syncAriaLabels()));
     }
     /** The placeholder used if no value has been selected. */
     get placeholder() {
@@ -62,6 +62,13 @@ let he = 0, Se = (() => {
     set readonly(e) {
       d(this, u, e);
     }
+    /**
+     * Form type of element.
+     * @default 'select-one / select-multiple'
+     */
+    get type() {
+      return this.multiple ? "select-multiple" : "select-one";
+    }
     /** The value displayed by the component. */
     get _displayValue() {
       return f(this, _);
@@ -84,14 +91,9 @@ let he = 0, Se = (() => {
     get _filteredOptions() {
       return this._options.filter((e) => !e.disabled && !e.hasAttribute("data-group-disabled"));
     }
-    /**
-     * TODO: Accessibility fix required to correctly read the label;
-     * can be possibly removed after the merge of https://github.com/sbb-design-systems/lyne-components/issues/3062
-     */
-    _onSelectAttributesChange(e) {
-      var t;
-      for (const s of e)
-        s.attributeName === "aria-labelledby" && ((t = this._triggerElement) == null || t.setAttribute("aria-labelledby", this.getAttribute("aria-labelledby")));
+    _syncAriaLabels() {
+      var e;
+      this._triggerElement && (S(this._triggerElement, "aria-labelledby", this.getAttribute("aria-labelledby")), S(this._triggerElement, "aria-label", this.getAttribute("aria-label")), S(this._triggerElement, "aria-describedby", this.getAttribute("aria-describedby")), !this.getAttribute("aria-label") && !this.getAttribute("aria-labelledby") && this.internals.labels.length && ((e = this._triggerElement) == null || e.setAttribute("aria-label", Array.from(this.internals.labels).map((t) => t.textContent).join(", "))));
     }
     /** Opens the selection panel. */
     open() {
@@ -128,7 +130,7 @@ let he = 0, Se = (() => {
       this._stateChange.emit({ type: "value", value: e });
     }
     firstUpdated(e) {
-      super.firstUpdated(e), this.focus = () => this._triggerElement.focus(), this.blur = () => this._triggerElement.blur(), j() || (this.startUpdate(), this._setupSelect());
+      super.firstUpdated(e), this.focus = () => this._triggerElement.focus(), this.blur = () => this._triggerElement.blur(), H() || (this.startUpdate(), this._setupSelect());
     }
     /**
      * Removes element's first attribute whose qualified name is qualifiedName.
@@ -137,13 +139,13 @@ let he = 0, Se = (() => {
      * @internal We need to override this due to a hydration issue with Next.js.
      */
     removeAttribute(e) {
-      j() && e === "defer-hydration" && !this._didLoad && this.updateComplete.then(() => this._setupSelect()), super.removeAttribute(e);
+      H() && e === "defer-hydration" && !this._didLoad && this.updateComplete.then(() => this._setupSelect()), super.removeAttribute(e);
     }
     connectedCallback() {
       var s, i;
       super.connectedCallback(), k && (this.id || (this.id = this._overlayId));
       const e = this._abort.signal, t = ((s = this.closest) == null ? void 0 : s.call(this, "sbb-form-field")) ?? ((i = this.closest) == null ? void 0 : i.call(this, "[data-form-field]"));
-      t && (this.negative = t.hasAttribute("negative")), this._syncProperties(), this._didLoad && (this._setupOrigin(), this._setupTrigger()), this.value && this._onValueChanged(this.value), this.addEventListener("optionSelectionChange", (r) => this._onOptionChanged(r), { signal: e }), this.addEventListener("click", (r) => {
+      t && (this.negative = t.hasAttribute("negative")), this._syncProperties(), this._syncAriaLabels(), this._didLoad && (this._setupOrigin(), this._setupTrigger()), this.value && this._onValueChanged(this.value), this.addEventListener("optionSelectionChange", (r) => this._onOptionChanged(r), { signal: e }), this.addEventListener("click", (r) => {
         this._onOptionClick(r), this._toggleOpening();
       }, { signal: e });
     }
@@ -204,7 +206,7 @@ let he = 0, Se = (() => {
       this._triggerElement.style.top = "0px", this._triggerElement.style.height = `${e.offsetHeight}px`, this._triggerElement.style.width = `${e.offsetWidth}px`;
     }
     _setOverlayPosition() {
-      ne(this._overlay, this._originElement, this._optionContainer, this.shadowRoot.querySelector(".sbb-select__container"), this);
+      de(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.
@@ -297,8 +299,8 @@ let he = 0, Se = (() => {
         this._setNextActiveOption(e, this._filteredOptions.indexOf(i));
       else if (this._searchString.length > 1 && new RegExp(`^${this._searchString.charAt(0)}*$`).test(this._searchString)) {
         const r = s.find((w) => {
-          var M;
-          return ((M = w.textContent) == null ? void 0 : M.toLowerCase().indexOf(this._searchString[0].toLowerCase())) === 0;
+          var F;
+          return ((F = w.textContent) == null ? void 0 : F.toLowerCase().indexOf(this._searchString[0].toLowerCase())) === 0;
         });
         r && this._setNextActiveOption(e, this._filteredOptions.indexOf(r));
       } else
@@ -309,7 +311,7 @@ let he = 0, Se = (() => {
       this.multiple ? e.setSelectedViaUserInteraction(!e.selected) : this.close();
     }
     _setNextActiveOption(e, t) {
-      const s = t ?? Q(e, this._activeItemIndex, this._filteredOptions.length), i = this._filteredOptions[s], r = this._filteredOptions[this._activeItemIndex];
+      const s = t ?? X(e, this._activeItemIndex, this._filteredOptions.length), i = this._filteredOptions[s], r = this._filteredOptions[this._activeItemIndex];
       this._setActiveElement(i, r), this.multiple ? e != null && e.shiftKey && i.setSelectedViaUserInteraction(!i.selected) : this._setSelectedElement(i, r), this._activeItemIndex = s;
     }
     _setActiveElement(e, t = null, s = !0) {
@@ -373,17 +375,17 @@ let he = 0, Se = (() => {
         @click=${this._toggleOpening}
         ${C((e) => this._triggerElement = e)}
       >
-        ${R(...this._spreadDeferredDisplayValue(y`<span>${this.placeholder}</span>`))}
+        ${j(...this._spreadDeferredDisplayValue(y`<span>${this.placeholder}</span>`))}
       </div>
 
       <!-- Visually display the value -->
       <div class="sbb-select__trigger" aria-hidden="true">
-        ${R(...this._spreadDeferredDisplayValue(y`<span class="sbb-select__trigger--placeholder">${this.placeholder}</span>`))}
+        ${j(...this._spreadDeferredDisplayValue(y`<span class="sbb-select__trigger--placeholder">${this.placeholder}</span>`))}
       </div>
 
       <div class="sbb-select__gap-fix"></div>
       <div class="sbb-select__container">
-        <div class="sbb-select__gap-fix">${be()}</div>
+        <div class="sbb-select__gap-fix">${he()}</div>
         <div
           @animationend=${this._onAnimationEnd}
           class="sbb-select__panel"
@@ -405,17 +407,17 @@ let he = 0, Se = (() => {
     `;
     }
   }, c = new WeakMap(), v = new WeakMap(), u = new WeakMap(), _ = new WeakMap(), b = n, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(S[Symbol.metadata] ?? null) : void 0;
-    I = [A(), O()], $ = [A(), O({ reflect: !0, type: Boolean })], T = [A(), O({ type: Boolean })], U = [J()], m(n, null, I, { kind: "accessor", name: "placeholder", static: !1, private: !1, access: { has: (t) => "placeholder" in t, get: (t) => t.placeholder, set: (t, s) => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(I[Symbol.metadata] ?? null) : void 0;
+    D = [A(), O()], $ = [A(), O({ reflect: !0, type: Boolean })], z = [A(), O({ type: Boolean })], B = [Q()], m(n, null, D, { kind: "accessor", name: "placeholder", static: !1, private: !1, access: { has: (t) => "placeholder" in t, get: (t) => t.placeholder, set: (t, s) => {
       t.placeholder = s;
-    } }, metadata: e }, D, V), m(n, null, $, { kind: "accessor", name: "multiple", static: !1, private: !1, access: { has: (t) => "multiple" in t, get: (t) => t.multiple, set: (t, s) => {
+    } }, metadata: e }, V, L), m(n, null, $, { kind: "accessor", name: "multiple", static: !1, private: !1, access: { has: (t) => "multiple" in t, get: (t) => t.multiple, set: (t, s) => {
       t.multiple = s;
-    } }, metadata: e }, P, L), m(n, null, T, { kind: "accessor", name: "readonly", static: !1, private: !1, access: { has: (t) => "readonly" in t, get: (t) => t.readonly, set: (t, s) => {
+    } }, metadata: e }, P, T), m(n, null, z, { kind: "accessor", name: "readonly", static: !1, private: !1, access: { has: (t) => "readonly" in t, get: (t) => t.readonly, set: (t, s) => {
       t.readonly = s;
-    } }, metadata: e }, z, N), m(n, null, U, { kind: "accessor", name: "_displayValue", static: !1, private: !1, access: { has: (t) => "_displayValue" in t, get: (t) => t._displayValue, set: (t, s) => {
+    } }, metadata: e }, N, U), m(n, 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 }, B, K), m(null, o = { value: b }, a, { kind: "class", name: b.name, metadata: e }, null, l), p = b = o.value, e && Object.defineProperty(b, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), n.styles = de, n.events = {
+    } }, metadata: e }, K, M), m(null, o = { value: b }, a, { kind: "class", name: b.name, metadata: e }, null, l), p = b = o.value, e && Object.defineProperty(b, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), n.styles = pe, n.events = {
     didChange: "didChange",
     change: "change",
     input: "input",
@@ -428,5 +430,5 @@ let he = 0, Se = (() => {
   return p = b;
 })();
 export {
-  Se as SbbSelectElement
+  De as SbbSelectElement
 };

package/slider/slider.d.ts

@@ -40,6 +40,11 @@ export declare class SbbSliderElement extends SbbSliderElement_base {
     accessor startIcon: string;
     /** Name of the icon at component's end, which will be forward to the nested `sbb-icon`. */
     accessor endIcon: string;
+    /**
+     * Form type of element.
+     * @default 'range'
+     */
+    get type(): string;
     /**
      * The ratio between the absolute value and the validity interval.
      * E.g. given `min=0`, `max=100` and `value=50`, then `_valueFraction=0.5`

package/slider/slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/elements/slider/slider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAQhD,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAGtB,MAAM,mBAAmB,CAAC;AAI3B,OAAO,YAAY,CAAC;;AAEpB;;;;;;;GAOG;AACH,qBAKM,gBAAiB,SAAQ,qBAAoD;IACjF,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX;;;OAGG;IACH,IACoB,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAQ7C;IACD,IAAoB,KAAK,IAAI,MAAM,CAElC;IAED,oDAAoD;IACpD,IACW,aAAa,CAAC,KAAK,EAAE,MAAM,EAErC;IACD,IAAW,aAAa,IAAI,MAAM,GAAG,IAAI,CAExC;IAED,+DAA+D;IAC/D,IACW,GAAG,CAAC,KAAK,EAAE,MAAM,EAO3B;IACD,IAAW,GAAG,IAAI,MAAM,CAEvB;IACD,OAAO,CAAC,IAAI,CAAe;IAE3B,+DAA+D;IAC/D,IACW,GAAG,CAAC,KAAK,EAAE,MAAM,EAO3B;IACD,IAAW,GAAG,IAAI,MAAM,CAEvB;IACD,OAAO,CAAC,IAAI,CAAiB;IAE7B;;;OAGG;IACH,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C,6FAA6F;IAC7F,SAEgB,SAAS,EAAE,MAAM,CAAM;IAEvC,2FAA2F;IAC3F,SAEgB,OAAO,EAAE,MAAM,CAAM;IAErC;;;OAGG;IACM,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAK;IAE7C;;OAEG;IACH,OAAO,CAAC,UAAU,CAGf;IAEH,iEAAiE;IACjE,OAAO,CAAC,WAAW,CAAoB;IAEvC,OAAO,CAAC,MAAM,CAAyC;;IAQvC,iBAAiB,IAAI,IAAI;cAUtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAc5E;;;OAGG;IACI,iBAAiB,IAAI,IAAI;IAIhC;;OAEG;IACI,wBAAwB,CAC7B,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAC9B,OAAO,EAAE,iBAAiB,GACzB,IAAI;cAIY,eAAe,IAAI,IAAI;IAI1C;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,cAAc;IAItB;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,uBAAuB;YASjB,cAAc;IAgC5B,8BAA8B;IAC9B,OAAO,CAAC,WAAW;cAKA,MAAM,IAAI,cAAc;CAmC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/elements/slider/slider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAQhD,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAGtB,MAAM,mBAAmB,CAAC;AAI3B,OAAO,YAAY,CAAC;;AAEpB;;;;;;;GAOG;AACH,qBAKM,gBAAiB,SAAQ,qBAAoD;IACjF,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX;;;OAGG;IACH,IACoB,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAQ7C;IACD,IAAoB,KAAK,IAAI,MAAM,CAElC;IAED,oDAAoD;IACpD,IACW,aAAa,CAAC,KAAK,EAAE,MAAM,EAErC;IACD,IAAW,aAAa,IAAI,MAAM,GAAG,IAAI,CAExC;IAED,+DAA+D;IAC/D,IACW,GAAG,CAAC,KAAK,EAAE,MAAM,EAO3B;IACD,IAAW,GAAG,IAAI,MAAM,CAEvB;IACD,OAAO,CAAC,IAAI,CAAe;IAE3B,+DAA+D;IAC/D,IACW,GAAG,CAAC,KAAK,EAAE,MAAM,EAO3B;IACD,IAAW,GAAG,IAAI,MAAM,CAEvB;IACD,OAAO,CAAC,IAAI,CAAiB;IAE7B;;;OAGG;IACH,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C,6FAA6F;IAC7F,SAEgB,SAAS,EAAE,MAAM,CAAM;IAEvC,2FAA2F;IAC3F,SAEgB,OAAO,EAAE,MAAM,CAAM;IAErC;;;OAGG;IACH,IAAoB,IAAI,IAAI,MAAM,CAEjC;IAED;;;OAGG;IACM,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAK;IAE7C;;OAEG;IACH,OAAO,CAAC,UAAU,CAGf;IAEH,iEAAiE;IACjE,OAAO,CAAC,WAAW,CAAoB;IAEvC,OAAO,CAAC,MAAM,CAAyC;;IAQvC,iBAAiB,IAAI,IAAI;cAUtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAc5E;;;OAGG;IACI,iBAAiB,IAAI,IAAI;IAIhC;;OAEG;IACI,wBAAwB,CAC7B,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAC9B,OAAO,EAAE,iBAAiB,GACzB,IAAI;cAIY,eAAe,IAAI,IAAI;IAI1C;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,cAAc;IAItB;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,uBAAuB;YASjB,cAAc;IAgC5B,8BAA8B;IAC9B,OAAO,CAAC,WAAW;cAKA,MAAM,IAAI,cAAc;CAmC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}

package/slider.js

@@ -4,7 +4,7 @@ var H = (t) => {
 var L = (t, r, l) => r.has(t) || H("Cannot " + l);
 var f = (t, r, l) => (L(t, r, "read from private field"), l ? l.call(t) : r.get(t)), p = (t, r, l) => r.has(t) ? H("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(t) : r.set(t, l), b = (t, r, l, o) => (L(t, r, "write to private field"), o ? o.call(t, l) : r.set(t, l), l);
 import { __esDecorate as d, __runInitializers as n } from "tslib";
-import { css as O, LitElement as j, html as x, nothing as y } from "lit";
+import { css as O, LitElement as j, html as y, nothing as x } from "lit";
 import { customElement as K, property as c, state as Y } from "lit/decorators.js";
 import { ref as q } from "lit/directives/ref.js";
 import { styleMap as J } from "lit/directives/style-map.js";
@@ -86,6 +86,13 @@ let me = (() => {
     set endIcon(e) {
       b(this, m, e);
     }
+    /**
+     * Form type of element.
+     * @default 'range'
+     */
+    get type() {
+      return "range";
+    }
     /**
      * The ratio between the absolute value and the validity interval.
      * E.g. given `min=0`, `max=100` and `value=50`, then `_valueFraction=0.5`
@@ -164,11 +171,11 @@ let me = (() => {
       X(e, this), this._didChange.emit();
     }
     render() {
-      return x`
+      return y`
       <div class="sbb-slider__height-container">
         <div class="sbb-slider__wrapper">
           <slot name="prefix">
-            ${this.startIcon ? x`<sbb-icon name="${this.startIcon}"></sbb-icon>` : y}
+            ${this.startIcon ? y`<sbb-icon name="${this.startIcon}"></sbb-icon>` : x}
           </slot>
           <div
             class="sbb-slider__container"
@@ -179,7 +186,7 @@ let me = (() => {
               min=${this.min}
               max=${this.max}
               ?disabled=${this.disabled || this.formDisabled || this.readonly}
-              value=${this.value || y}
+              value=${this.value || x}
               class="sbb-slider__range-input"
               type="range"
               @change=${(e) => this._emitChange(e)}
@@ -192,7 +199,7 @@ let me = (() => {
             <div class="sbb-slider__knob"></div>
           </div>
           <slot name="suffix">
-            ${this.endIcon ? x`<sbb-icon name="${this.endIcon}"></sbb-icon>` : y}
+            ${this.endIcon ? y`<sbb-icon name="${this.endIcon}"></sbb-icon>` : x}
           </slot>
         </div>
       </div>

package/table/table-wrapper/table-wrapper.d.ts

@@ -9,7 +9,7 @@ export declare class SbbTableWrapperElement extends SbbTableWrapperElement_base
     static styles: CSSResultGroup;
     private _resizeObserver;
     private _tableWrapper;
-    protected firstUpdated(changedProperties: PropertyValues): void;
+    protected firstUpdated(changedProperties: PropertyValues<this>): void;
     private _checkHorizontalScrollbar;
     protected render(): TemplateResult;
 }

package/table/table-wrapper/table-wrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-wrapper.d.ts","sourceRoot":"","sources":["../../../../src/elements/table/table-wrapper/table-wrapper.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;;AAOb;;;;GAIG;AACH,qBAEM,sBAAuB,SAAQ,2BAA4B;IAC/D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,eAAe,CAIpB;IACH,OAAO,CAAC,aAAa,CAAe;cAEjB,YAAY,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAMxE,OAAO,CAAC,yBAAyB;cAOd,MAAM,IAAI,cAAc;CAK5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}
+{"version":3,"file":"table-wrapper.d.ts","sourceRoot":"","sources":["../../../../src/elements/table/table-wrapper/table-wrapper.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;;AAOb;;;;GAIG;AACH,qBAEM,sBAAuB,SAAQ,2BAA4B;IAC/D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,eAAe,CAIpB;IACH,OAAO,CAAC,aAAa,CAAe;cAEjB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAM9E,OAAO,CAAC,yBAAyB;cAOd,MAAM,IAAI,cAAc;CAK5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}

package/teaser/teaser.d.ts

@@ -19,7 +19,8 @@ export declare class SbbTeaserElement extends SbbLinkBaseElement {
     accessor titleContent: string;
     /** Content of chip. */
     accessor chipContent: string;
-    protected renderTemplate(): TemplateResult;
+    protected render(): TemplateResult;
+    protected renderContent(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/teaser/teaser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"teaser.d.ts","sourceRoot":"","sources":["../../../src/elements/teaser/teaser.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAE9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,OAAO,YAAY,CAAC;AACpB,OAAO,aAAa,CAAC;AAErB;;;;;;;GAOG;AACH,qBAGM,gBAAiB,SAAQ,kBAAkB;IAC/C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,gFAAgF;IAChF,SAA6C,SAAS,EAAE,gBAAgB,GAAG,OAAO,GAAG,OAAO,CACzE;IAEnB,2DAA2D;IAC3D,SAAwD,UAAU,EAAE,aAAa,CAAO;IAExF,wBAAwB;IACxB,SAEgB,YAAY,EAAE,MAAM,CAAM;IAE1C,uBAAuB;IACvB,SAEgB,WAAW,EAAE,MAAM,CAAM;cAEtB,cAAc,IAAI,cAAc;CAoBpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}
+{"version":3,"file":"teaser.d.ts","sourceRoot":"","sources":["../../../src/elements/teaser/teaser.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAE9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,OAAO,YAAY,CAAC;AACpB,OAAO,0BAA0B,CAAC;AAClC,OAAO,aAAa,CAAC;AAErB;;;;;;;GAOG;AACH,qBAGM,gBAAiB,SAAQ,kBAAkB;IAC/C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,gFAAgF;IAChF,SAA6C,SAAS,EAAE,gBAAgB,GAAG,OAAO,GAAG,OAAO,CACzE;IAEnB,2DAA2D;IAC3D,SAAwD,UAAU,EAAE,aAAa,CAAO;IAExF,wBAAwB;IACxB,SAEgB,YAAY,EAAE,MAAM,CAAM;IAE1C,uBAAuB;IACvB,SAEgB,WAAW,EAAE,MAAM,CAAM;cAEtB,MAAM,IAAI,cAAc;IAa3C,SAAS,CAAC,aAAa,IAAI,cAAc;CAoB1C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}

package/teaser-product/common/teaser-product-common.d.ts

@@ -1,5 +1,5 @@
 import { SbbActionBaseElement } from '../../core/base-elements.js';
-import { SbbNegativeMixinType, AbstractConstructor } from '../../core/mixins.js';
+import { AbstractConstructor, SbbNegativeMixinType } from '../../core/mixins.js';
 export declare class SbbTeaserProductCommonElementMixinType extends SbbNegativeMixinType {
     accessor imageAlignment: 'after' | 'before';
 }

package/teaser-product/common/teaser-product-common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"teaser-product-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/teaser-product/common/teaser-product-common.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAExE,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,EACzB,MAAM,sBAAsB,CAAC;AAE9B,MAAM,CAAC,OAAO,OAAO,sCAAuC,SAAQ,oBAAoB;IACtF,SAAgB,cAAc,EAAE,OAAO,GAAG,QAAQ,CAAC;CACpD;AAGD,eAAO,MAAM,kCAAkC,GAC7C,CAAC,SAAS,mBAAmB,CAAC,oBAAoB,CAAC,cAEvC,CAAC,KACZ,mBAAmB,CAAC,sCAAsC,CAAC,GAAG,CA6BhE,CAAC"}
+{"version":3,"file":"teaser-product-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/teaser-product/common/teaser-product-common.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAExE,OAAO,EACL,KAAK,mBAAmB,EAExB,KAAK,oBAAoB,EAC1B,MAAM,sBAAsB,CAAC;AAE9B,MAAM,CAAC,OAAO,OAAO,sCAAuC,SAAQ,oBAAoB;IACtF,SAAgB,cAAc,EAAE,OAAO,GAAG,QAAQ,CAAC;CACpD;AAGD,eAAO,MAAM,kCAAkC,GAC7C,CAAC,SAAS,mBAAmB,CAAC,oBAAoB,CAAC,cAEvC,CAAC,KACZ,mBAAmB,CAAC,sCAAsC,CAAC,GAAG,CA+BhE,CAAC"}

package/teaser-product/common.js

@@ -2,19 +2,19 @@ var m = (t) => {
   throw TypeError(t);
 };
 var v = (t, e, r) => e.has(t) || m("Cannot " + r);
-var f = (t, e, r) => (v(t, e, "read from private field"), r ? r.call(t) : e.get(t)), _ = (t, e, r) => e.has(t) ? m("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), h = (t, e, r, b) => (v(t, e, "write to private field"), b ? b.call(t, r) : e.set(t, r), r);
+var f = (t, e, r) => (v(t, e, "read from private field"), r ? r.call(t) : e.get(t)), _ = (t, e, r) => e.has(t) ? m("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), h = (t, e, r, i) => (v(t, e, "write to private field"), i ? i.call(t, r) : e.set(t, r), r);
 import { __esDecorate as k, __runInitializers as c } from "tslib";
 import { html as y, css as S } from "lit";
 import { property as w } from "lit/decorators.js";
 import { slotState as A } from "../core/decorators.js";
 import { SbbNegativeMixin as z } from "../core/mixins.js";
 const M = (t) => (() => {
-  var n, a;
-  let r = [A()], b, d = [], o, l = z(t), p, u = [], g = [];
+  var b, a;
+  let r = [A()], i, d = [], o, l = z(t), u, p = [], g = [];
   return a = class extends l {
     constructor() {
       super(...arguments);
-      _(this, n, c(this, u, "after"));
+      _(this, b, c(this, p, "after"));
       c(this, g);
     }
     /**
@@ -22,31 +22,33 @@ const M = (t) => (() => {
      * Only relevant starting from large breakpoint.
      */
     get imageAlignment() {
-      return f(this, n);
+      return f(this, b);
     }
     set imageAlignment(s) {
-      h(this, n, s);
+      h(this, b, s);
     }
     renderTemplate() {
       return y`
-        <span class="sbb-teaser-product__image-container"><slot name="image"></slot></span>
-        <span class="sbb-teaser-product__container">
-          <span class="sbb-teaser-product__content">
-            <slot></slot>
-          </span>
-          <span class="sbb-teaser-product__footnote">
-            <slot name="footnote"></slot>
-          </span>
-        </span>
+        <div class="sbb-teaser-product__root">
+          <div class="sbb-teaser-product__image-container"><slot name="image"></slot></div>
+          <div class="sbb-teaser-product__container">
+            <span class="sbb-teaser-product__content">
+              <slot></slot>
+            </span>
+            <div class="sbb-teaser-product__footnote">
+              <slot name="footnote"></slot>
+            </div>
+          </div>
+        </div>
       `;
     }
-  }, n = new WeakMap(), o = a, (() => {
+  }, b = new WeakMap(), o = a, (() => {
     const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
-    p = [w({ attribute: "image-alignment", reflect: !0 })], k(a, null, p, { kind: "accessor", name: "imageAlignment", static: !1, private: !1, access: { has: (i) => "imageAlignment" in i, get: (i) => i.imageAlignment, set: (i, x) => {
-      i.imageAlignment = x;
-    } }, metadata: s }, u, g), k(null, b = { value: o }, r, { kind: "class", name: o.name, metadata: s }, null, d), o = b.value, s && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s }), c(o, d);
+    u = [w({ attribute: "image-alignment", reflect: !0 })], k(a, null, u, { kind: "accessor", name: "imageAlignment", static: !1, private: !1, access: { has: (n) => "imageAlignment" in n, get: (n) => n.imageAlignment, set: (n, x) => {
+      n.imageAlignment = x;
+    } }, metadata: s }, p, g), k(null, i = { value: o }, r, { kind: "class", name: o.name, metadata: s }, null, d), o = i.value, s && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s }), c(o, d);
   })(), o;
-})(), O = S`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-teaser-product-background-color: var(--sbb-color-cloud);--sbb-teaser-product-background-gradient-direction: to right;--sbb-teaser-product-background: var(--sbb-teaser-product-background-color);--sbb-teaser-product-border-radius: var(--sbb-border-radius-4x);--sbb-teaser-product-content-color: var(--sbb-color-iron);--sbb-teaser-product-footer-color: var(--sbb-color-anthracite);--sbb-teaser-product-container-padding-block: var(--sbb-spacing-responsive-l);--sbb-teaser-product-min-height: 37.5rem;--sbb-teaser-product-background-gradient-start: 25%;--sbb-teaser-product-background-gradient-end: 75%}@media (min-width: 64rem){:host{--sbb-teaser-product-background: linear-gradient( var(--sbb-teaser-product-background-gradient-direction), var(--sbb-teaser-product-background-color) var(--sbb-teaser-product-background-gradient-start), transparent var(--sbb-teaser-product-background-gradient-end) )}}:host([negative]){--sbb-teaser-product-background-color: var(--sbb-color-midnight);--sbb-teaser-product-content-color: var(--sbb-color-cloud);--sbb-teaser-product-footer-color: var(--sbb-color-cloud);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-title-text-color-normal-override: var(--sbb-color-milk)}:host([image-alignment=before]){--sbb-teaser-product-background-gradient-direction: to left}.sbb-teaser-product__image-container{display:block;overflow:hidden;border-radius:var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius) 0 0}@media (min-width: 64rem){.sbb-teaser-product__image-container{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-teaser-product-border-radius)}}::slotted(img){display:flex;width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}::slotted(sbb-image){--sbb-image-border-radius: 0;height:100%}::slotted(p.sbb-teaser-product--spacing){margin:0}::slotted(sbb-title.sbb-teaser-product--spacing){--sbb-title-margin-block-start: 0}::slotted(:is(sbb-action-group,[data-action]).sbb-teaser-product--spacing){margin-block-start:var(--sbb-spacing-responsive-xxs)}.sbb-action-base{display:block;position:relative;text-decoration:none}@media (forced-colors: active){.sbb-action-base:after{content:"";position:absolute;display:block;top:0;right:0;bottom:0;left:0;pointer-events:none;border:var(--sbb-border-width-2x) solid CanvasText;border-radius:var(--sbb-teaser-product-border-radius)}}.sbb-teaser-product__container{display:block;background:var(--sbb-teaser-product-background);border-radius:0 0 var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius);padding:var(--sbb-spacing-responsive-s)}@media (min-width: 64rem){.sbb-teaser-product__container{display:grid;grid:"content ." 1fr "footnote ." auto/1fr 1fr;column-gap:var(--sbb-spacing-responsive-xxl);background:var(--sbb-teaser-product-background);border-radius:var(--sbb-teaser-product-border-radius);padding-block:var(--sbb-teaser-product-container-padding-block) 0;padding-inline:var(--sbb-spacing-responsive-xl);position:relative}:host([image-alignment=before]) .sbb-teaser-product__container{grid-template-areas:". content" ". footnote"}}.sbb-teaser-product__content{grid-area:content;align-self:center;margin:0;color:var(--sbb-teaser-product-content-color)}@media (min-width: 64rem){.sbb-teaser-product__content{align-content:center;min-height:calc(var(--sbb-teaser-product-min-height) - 2 * var(--sbb-teaser-product-container-padding-block))}}.sbb-teaser-product__footnote{grid-area:footnote;display:block;padding-block-start:var(--sbb-spacing-responsive-s);color:var(--sbb-teaser-product-footer-color);--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host(:not([data-slot-names~=footnote])) .sbb-teaser-product__footnote{padding-block-start:0}@media (min-width: 64rem){.sbb-teaser-product__footnote{min-height:var(--sbb-teaser-product-container-padding-block);padding-block:var(--sbb-spacing-responsive-xs)}}`;
+})(), O = S`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-teaser-product-background-color: var(--sbb-color-cloud);--sbb-teaser-product-background-gradient-direction: to right;--sbb-teaser-product-background: var(--sbb-teaser-product-background-color);--sbb-teaser-product-border-radius: var(--sbb-border-radius-4x);--sbb-teaser-product-content-color: var(--sbb-color-iron);--sbb-teaser-product-footer-color: var(--sbb-color-anthracite);--sbb-teaser-product-container-padding-block: var(--sbb-spacing-responsive-l);--sbb-teaser-product-min-height: 37.5rem;--sbb-teaser-product-background-gradient-start: 25%;--sbb-teaser-product-background-gradient-end: 75%}@media (min-width: 64rem){:host{--sbb-teaser-product-background: linear-gradient( var(--sbb-teaser-product-background-gradient-direction), var(--sbb-teaser-product-background-color) var(--sbb-teaser-product-background-gradient-start), transparent var(--sbb-teaser-product-background-gradient-end) )}}:host([negative]){--sbb-teaser-product-background-color: var(--sbb-color-midnight);--sbb-teaser-product-content-color: var(--sbb-color-cloud);--sbb-teaser-product-footer-color: var(--sbb-color-cloud);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-title-text-color-normal-override: var(--sbb-color-milk)}:host([image-alignment=before]){--sbb-teaser-product-background-gradient-direction: to left}.sbb-teaser-product__image-container{overflow:hidden;border-radius:var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius) 0 0}@media (min-width: 64rem){.sbb-teaser-product__image-container{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-teaser-product-border-radius)}}::slotted(img){display:flex;width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}::slotted(sbb-image){--sbb-image-border-radius: 0;height:100%}::slotted(p.sbb-teaser-product--spacing){margin:0}::slotted(sbb-title.sbb-teaser-product--spacing){--sbb-title-margin-block-start: 0}::slotted(:is(sbb-action-group,[data-action]).sbb-teaser-product--spacing){margin-block-start:var(--sbb-spacing-responsive-xxs)}@media (forced-colors: active){.sbb-teaser-product__root:after{content:"";position:absolute;display:block;top:0;right:0;bottom:0;left:0;pointer-events:none;border:var(--sbb-border-width-2x) solid CanvasText;border-radius:var(--sbb-teaser-product-border-radius)}}.sbb-action-base{display:block;position:relative;text-decoration:none}.sbb-teaser-product__container{background:var(--sbb-teaser-product-background);border-radius:0 0 var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius);padding:var(--sbb-spacing-responsive-s)}@media (min-width: 64rem){.sbb-teaser-product__container{display:grid;grid:"content ." 1fr "footnote ." auto/1fr 1fr;column-gap:var(--sbb-spacing-responsive-xxl);background:var(--sbb-teaser-product-background);border-radius:var(--sbb-teaser-product-border-radius);padding-block:var(--sbb-teaser-product-container-padding-block) 0;padding-inline:var(--sbb-spacing-responsive-xl);position:relative}:host([image-alignment=before]) .sbb-teaser-product__container{grid-template-areas:". content" ". footnote"}}.sbb-teaser-product__content{grid-area:content;align-self:center;margin:0;color:var(--sbb-teaser-product-content-color)}@media (min-width: 64rem){.sbb-teaser-product__content{align-content:center;min-height:calc(var(--sbb-teaser-product-min-height) - 2 * var(--sbb-teaser-product-container-padding-block))}}.sbb-teaser-product__footnote{grid-area:footnote;padding-block-start:var(--sbb-spacing-responsive-s);color:var(--sbb-teaser-product-footer-color);--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host(:not([data-slot-names~=footnote])) .sbb-teaser-product__footnote{padding-block-start:0}@media (min-width: 64rem){.sbb-teaser-product__footnote{min-height:var(--sbb-teaser-product-container-padding-block);padding-block:var(--sbb-spacing-responsive-xs)}}`;
 export {
   M as SbbTeaserProductCommonElementMixin,
   O as teaserProductCommonStyle

package/teaser-product/teaser-product/teaser-product.d.ts

@@ -1,4 +1,4 @@
-import { CSSResultGroup } from 'lit';
+import { CSSResultGroup, TemplateResult } from 'lit';
 import { SbbLinkBaseElement } from '../../core/base-elements.js';
 declare const SbbTeaserProductElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbTeaserProductCommonElementMixinType> & typeof SbbLinkBaseElement;
 /**
@@ -12,6 +12,7 @@ declare const SbbTeaserProductElement_base: import('../../core/mixins.js').Abstr
  */
 export declare class SbbTeaserProductElement extends SbbTeaserProductElement_base {
     static styles: CSSResultGroup;
+    protected render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/teaser-product/teaser-product/teaser-product.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"teaser-product.d.ts","sourceRoot":"","sources":["../../../../src/elements/teaser-product/teaser-product/teaser-product.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;;AAKjE;;;;;;;;GAQG;AACH,qBAEM,uBAAwB,SAAQ,4BAAsD;IAC1F,OAAuB,MAAM,EAAE,cAAc,CAAqC;CACnF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,oBAAoB,EAAE,uBAAuB,CAAC;KAC/C;CACF"}
+{"version":3,"file":"teaser-product.d.ts","sourceRoot":"","sources":["../../../../src/elements/teaser-product/teaser-product/teaser-product.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAKjE,OAAO,6BAA6B,CAAC;;AAErC;;;;;;;;GAQG;AACH,qBAEM,uBAAwB,SAAQ,4BAAsD;IAC1F,OAAuB,MAAM,EAAE,cAAc,CAAqC;cAE/D,MAAM,IAAI,cAAc;CAY5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,oBAAoB,EAAE,uBAAuB,CAAC;KAC/C;CACF"}

package/teaser-product/teaser-product.js

@@ -1,18 +1,31 @@
-import { __esDecorate as b, __runInitializers as n } from "tslib";
-import { customElement as l } from "lit/decorators.js";
-import { SbbLinkBaseElement as u } from "../core/base-elements.js";
-import { SbbTeaserProductCommonElementMixin as c, teaserProductCommonStyle as d } from "./common.js";
-import { css as m } from "lit";
-const f = m`:host{--sbb-teaser-product-brightness-hover: var(--sbb-hover-image-brightness);--sbb-teaser-product-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-teaser-product-animation-easing: var(--sbb-animation-easing);--sbb-teaser-product-border-radius: var(--sbb-border-radius-4x)}@media (any-hover: hover){:host(:hover){--sbb-teaser-product-brightness: var(--sbb-teaser-product-brightness-hover)}}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-teaser-product:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-product-border-radius)}@media (forced-colors: active){:host(:hover) .sbb-teaser-product:after{border-color:Highlight}}::slotted(:is(img,sbb-image)){will-change:filter;transition-property:filter;transition-duration:var(--sbb-teaser-product-animation-duration);transition-timing-function:var(--sbb-animation-easing);filter:brightness(var(--sbb-teaser-product-brightness, 1))}`;
-let _ = (() => {
+import { __esDecorate as b, __runInitializers as l } from "tslib";
+import { customElement as c } from "lit/decorators.js";
+import { html as i } from "lit/static-html.js";
+import { SbbLinkBaseElement as d } from "../core/base-elements.js";
+import { SbbTeaserProductCommonElementMixin as u, teaserProductCommonStyle as m } from "./common.js";
+import { css as p } from "lit";
+import "../screen-reader-only.js";
+const v = p`:host{--sbb-teaser-product-brightness-hover: var(--sbb-hover-image-brightness);--sbb-teaser-product-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-teaser-product-animation-easing: var(--sbb-animation-easing);--sbb-teaser-product-border-radius: var(--sbb-border-radius-4x)}@media (forced-colors: active){:host{--sbb-title-text-color-normal-override: LinkText !important;--sbb-teaser-product-content-color: LinkText !important;--sbb-teaser-product-footer-color: LinkText !important}}@media (any-hover: hover){:host(:hover){--sbb-teaser-product-brightness: var(--sbb-teaser-product-brightness-hover)}}::slotted(:is(img,sbb-image)){will-change:filter;transition-property:filter;transition-duration:var(--sbb-teaser-product-animation-duration);transition-timing-function:var(--sbb-animation-easing);filter:brightness(var(--sbb-teaser-product-brightness, 1))}.sbb-teaser-product__wrapper{position:relative}.sbb-teaser-product__root{pointer-events:none}@media (forced-colors: active){:host(:hover) .sbb-teaser-product__root:after{border-color:Highlight}}.sbb-teaser-product{position:absolute;top:0;right:0;bottom:0;left:0}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-teaser-product:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-product-border-radius)}`;
+let T = (() => {
   var e;
-  let i = [l("sbb-teaser-product")], s, a = [], t, o = c(u);
-  return e = class extends o {
+  let n = [c("sbb-teaser-product")], o, s = [], t, a = u(d);
+  return e = class extends a {
+    render() {
+      return i`
+      <div class="sbb-teaser-product__wrapper">
+        ${this.renderLink(
+        // For SEO we add the accessibility hidden as hidden content of the link
+        i`<sbb-screen-reader-only>${this.accessibilityLabel}</sbb-screen-reader-only>`
+      )}
+        ${this.renderTemplate()}
+      </div>
+    `;
+    }
   }, t = e, (() => {
-    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
-    b(null, s = { value: t }, i, { kind: "class", name: t.name, metadata: r }, null, a), t = s.value, r && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
-  })(), e.styles = [d, f], n(t, a), t;
+    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
+    b(null, o = { value: t }, n, { kind: "class", name: t.name, metadata: r }, null, s), t = o.value, r && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
+  })(), e.styles = [m, v], l(t, s), t;
 })();
 export {
-  _ as SbbTeaserProductElement
+  T as SbbTeaserProductElement
 };