@sbb-esta/lyne-elements 1.9.0 → 1.11.0

package/form-field/form-field.js

@@ -1,22 +1,21 @@
-import { css as h, LitElement as u, html as d, nothing as f } from "lit";
-import { property as b, state as c, customElement as v } from "lit/decorators.js";
-import { sbbInputModalityDetector as g } from "../core/a11y.js";
-import { SbbConnectedAbortController as _, SbbLanguageController as x } from "../core/controllers.js";
-import { slotState as y } from "../core/decorators.js";
-import { isFirefox as w, setOrRemoveAttribute as k } from "../core/dom.js";
-import { i18nOptional as A } from "../core/i18n.js";
-import { SbbNegativeMixin as E, SbbHydrationMixin as z } from "../core/mixins.js";
-import { AgnosticMutationObserver as I } from "../core/observers.js";
+import { css as m, LitElement as u, isServer as v, html as d, nothing as f } from "lit";
+import { property as b, state as c, customElement as g } from "lit/decorators.js";
+import { sbbInputModalityDetector as _ } from "../core/a11y.js";
+import { SbbConnectedAbortController as x, SbbLanguageController as y } from "../core/controllers.js";
+import { slotState as w } from "../core/decorators.js";
+import { isFirefox as k, setOrRemoveAttribute as A } from "../core/dom.js";
+import { i18nOptional as E } from "../core/i18n.js";
+import { SbbNegativeMixin as z, SbbHydrationMixin as I } from "../core/mixins.js";
 import "../icon.js";
-const L = h`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:inline-block;--sbb-form-field-background-color: var(--sbb-color-white);--sbb-form-field-border-color: var(--sbb-color-smoke);--sbb-form-field-border-style: solid;--sbb-form-field-border-radius: var(--sbb-border-radius-4x);--sbb-form-field-border-width: var(--sbb-border-width-1x);--sbb-form-field-min-height: var(--sbb-size-element-m);--sbb-form-field-label-color: var(--sbb-color-metal);--sbb-form-field-prefix-color: var(--sbb-color-metal);--sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);--sbb-form-field-text-color: var(--sbb-color-charcoal);--sbb-form-field-arrow-color: var(--sbb-color-charcoal);--sbb-form-field-error-divider-width: var(--sbb-spacing-fixed-1x);--sbb-form-field-error-padding-block-start: var(--sbb-form-field-error-divider-width);--sbb-form-field-gap: var(--sbb-spacing-fixed-2x);--sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);--sbb-form-field-select-inline-padding-end: calc( var(--sbb-icon-svg-width) + var(--sbb-form-field-gap) );--sbb-form-field-overflow: hidden;--sbb-form-field-input-text-size: var(--sbb-font-size-text-m);--sbb-form-field-label-text-size: var(--sbb-font-size-text-xs);--sbb-form-field-label-size: calc( var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-body-text) );--sbb-form-field-text-line-height: calc( var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-body-text) );--sbb-form-field-margin-block-start: calc( ( var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var( --sbb-form-field-text-line-height ) + var(--sbb-form-field-label-to-input-overlapping) ) / 2 );--sbb-form-field-spacer-margin-block-end: calc( -1 * var(--sbb-form-field-label-to-input-overlapping) );--sbb-form-field-floating-label-transform: .53125rem;--sbb-icon-svg-width: var(--sbb-size-icon-ui-small);--sbb-icon-svg-height: var(--sbb-size-icon-ui-small);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default)}@media (min-width: 52.5rem){:host{--sbb-form-field-floating-label-transform: .65625rem}}@media (forced-colors: active){:host{--sbb-form-field-border-color: ButtonBorder}}:host(:where(:not([width=collapse]))){min-width:9.375rem;width:min(18.75rem,100%)}:host([negative]){--sbb-form-field-background-color: var(--sbb-color-midnight);--sbb-form-field-border-color: var(--sbb-color-smoke);--sbb-form-field-label-color: var(--sbb-color-smoke);--sbb-form-field-prefix-color: var(--sbb-color-smoke);--sbb-form-field-text-color: var(--sbb-color-milk);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-form-field-arrow-color: var(--sbb-color-milk)}@media (forced-colors: active){:host([negative]){--sbb-form-field-border-color: ButtonBorder}}:host([size=s]){--sbb-form-field-min-height: var(--sbb-size-element-xs);--sbb-form-field-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-form-field-input-text-size: var(--sbb-font-size-text-s);--sbb-form-field-label-text-size: var(--sbb-font-size-text-xxs);--sbb-form-field-label-to-input-overlapping: .625rem;--sbb-form-field-floating-label-transform: .34375rem;--sbb-form-field-spacer-margin-block-end: -.53125rem}@media (min-width: 52.5rem){:host([size=s]){--sbb-form-field-label-to-input-overlapping: .6875rem;--sbb-form-field-floating-label-transform: .3125rem;--sbb-form-field-spacer-margin-block-end: -.5rem}}:host([size=l]){--sbb-form-field-min-height: var(--sbb-size-element-l);--sbb-form-field-padding-inline: var(--sbb-spacing-responsive-xxxs)}:host([error-space=reserve]){--sbb-form-field-error-min-height: calc( var(--sbb-typo-line-height-body-text) * var(--sbb-font-size-text-xs) );--sbb-form-field-error-padding-block-start-override: var(--sbb-form-field-error-divider-width)}:host(:is([data-readonly],[data-disabled])){--sbb-form-field-background-color: var(--sbb-color-milk);--sbb-form-field-border-color: var(--sbb-color-graphite);--sbb-form-field-arrow-color: var(--sbb-color-granite)}@media (forced-colors: active){:host(:is([data-readonly],[data-disabled])){--sbb-form-field-border-color: ButtonBorder}}:host(:is([data-readonly],[data-disabled])[negative]){--sbb-form-field-background-color: var(--sbb-color-charcoal);--sbb-form-field-border-color: var(--sbb-color-smoke);--sbb-form-field-arrow-color: var(--sbb-color-smoke)}:host([data-disabled]){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: var(--sbb-color-granite);--sbb-form-field-border-style: dashed}@media (forced-colors: active){:host([data-disabled]){--sbb-form-field-label-color: GrayText !important;--sbb-form-field-prefix-color: GrayText !important;--sbb-form-field-text-color: GrayText !important;--sbb-form-field-border-color: GrayText !important}}:host([data-disabled][negative]){--sbb-form-field-text-color: var(--sbb-color-smoke);--sbb-form-field-label-color: var(--sbb-color-smoke);--sbb-form-field-prefix-color: var(--sbb-color-smoke)}:host([data-readonly]:not([negative])){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: var(--sbb-color-granite)}:host(:is([data-input-focused],[data-has-popup-open])){--sbb-form-field-border-color: var(--sbb-color-charcoal);--sbb-form-field-prefix-color: var(--sbb-color-charcoal);--sbb-form-field-border-width: var(--sbb-border-width-2x)}@media (forced-colors: active){:host(:is([data-input-focused],[data-has-popup-open])){--sbb-form-field-border-color: Highlight !important;--sbb-form-field-prefix-color: Highlight !important}}:host(:is([data-input-focused],[data-has-popup-open])[negative]){--sbb-form-field-border-color: var(--sbb-color-milk);--sbb-form-field-prefix-color: var(--sbb-color-milk)}:host([data-invalid]){--sbb-form-field-border-color: var(--sbb-color-red125);--sbb-form-field-text-color: var(--sbb-color-red125)}@media (forced-colors: active){:host([data-invalid]){--sbb-form-field-border-color: LinkText !important;--sbb-form-field-text-color: LinkText !important}}:host([data-invalid][negative]){--sbb-form-field-border-color: var(--sbb-color-red-mode-dark);--sbb-form-field-text-color: var(--sbb-color-red-mode-dark)}:host(:not([data-has-error])){--sbb-form-field-error-padding-block-start: 0}:host([floating-label]){--sbb-select-placeholder-color: transparent}@media (forced-colors: active){:host([floating-label]){--sbb-select-placeholder-color: Canvas}}:host(:is(:not([data-slot-names~=label],[label]),[hidden-label])){--sbb-form-field-label-size: 0rem;--sbb-form-field-label-to-input-overlapping: 0rem}:host([data-input-type=sbb-slider]){--sbb-form-field-overflow: visible}:host([data-input-type=textarea]){--sbb-form-field-max-height: fit-content}.sbb-form-field__space-wrapper{display:flex;flex-direction:column}.sbb-form-field__space-wrapper:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-form-field__wrapper{display:flex;gap:var(--sbb-form-field-gap);padding-inline:var(--sbb-form-field-padding-inline);border-radius:var(--sbb-form-field-border-radius);min-height:var(--sbb-form-field-min-height);max-height:var(--sbb-form-field-max-height);background-color:var(--sbb-form-field-background-color);position:relative}.sbb-form-field__wrapper:before{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border:var(--sbb-form-field-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);border-radius:var(--sbb-form-field-border-radius)}:host([data-input-focused][data-focus-origin=keyboard]) .sbb-form-field__wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}@media (forced-colors: none){:host(:is([borderless],[data-input-type=sbb-slider])) .sbb-form-field__wrapper:before{border-color:transparent}:host(:is([data-input-focused],[data-has-popup-open],[data-disabled])[borderless]) .sbb-form-field__wrapper:after{content:"";position:absolute;border-block-end:var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);inset-inline:var(--sbb-form-field-padding-inline);inset-block-end:0}}::slotted(*[slot=prefix]){color:var(--sbb-form-field-prefix-color)}::slotted(*[slot=prefix]),::slotted(*[slot=suffix]){display:flex;min-width:var(--sbb-icon-svg-width);margin-block-start:calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2)}:host(:is([data-input-empty],[data-disabled],[data-readonly])) ::slotted(sbb-form-field-clear){display:none}::slotted(sbb-datepicker-toggle){height:calc((var(--sbb-form-field-min-height) + var(--sbb-size-icon-ui-small)) / 2)}@media (forced-colors: active){::slotted(*[slot=suffix]){color:var(--sbb-form-field-prefix-color)}}.sbb-form-field__select-input-icon{top:50%;transform:translateY(-50%);position:absolute;inset-inline-end:0;margin-block-start:calc(-1 * var(--sbb-form-field-margin-block-start) / 2);pointer-events:none;color:var(--sbb-form-field-arrow-color)}.sbb-form-field__input-container{flex:1 1 auto;position:relative;margin-block-start:var(--sbb-form-field-margin-block-start);min-width:0}.sbb-form-field__label-spacer{display:flex;height:calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-body-text));margin-block-end:var(--sbb-form-field-spacer-margin-block-end)}:host(:not([data-slot-names~=label],[label])) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){display:none}:host([hidden-label]) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-form-field__label{display:flex;max-width:100%;cursor:default;position:absolute;inset-block-start:0;color:var(--sbb-form-field-label-color);z-index:1;--sbb-text-font-size: var(--sbb-font-size-text-xs);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([size=s]) .sbb-form-field__label{--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([data-input-type=select]) .sbb-form-field__label,:host([data-input-type=sbb-select]) .sbb-form-field__label{padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}:host([floating-label]) .sbb-form-field__label{transform-origin:0 0;pointer-events:none;backface-visibility:hidden;will-change:transform,font-size;transition-duration:var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x));transition-timing-function:var(--sbb-animation-easing);transition-property:transform,font-size}:host([floating-label]:is(:not([data-input-focused]:not([data-input-type=sbb-select]),[data-has-popup-open]),[data-readonly])[data-input-empty]) .sbb-form-field__label{font-size:var(--sbb-form-field-input-text-size);transform:translateY(var(--sbb-form-field-floating-label-transform))}.sbb-form-field__label-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-form-field__input{display:flex}:host([size=s]:is([data-input-type=input],[data-input-type=select],[data-input-type=sbb-select])) .sbb-form-field__input{margin-block-end:-.125rem}.sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select)){--sbb-text-font-size: var(--sbb-font-size-text-m);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);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:none;border:none;padding:0;-webkit-appearance:none;outline:none!important;overflow:var(--sbb-form-field-overflow);width:100%;box-sizing:border-box;color:var(--sbb-form-field-text-color);-webkit-text-fill-color:var(--sbb-form-field-text-color);opacity:1;background-color:transparent;font-size:var(--sbb-form-field-input-text-size)!important;font-family:var(--sbb-typo-font-family)!important;line-height:var(--sbb-typo-line-height-body-text)!important}.sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select))::placeholder{color:var(--sbb-color-metal);-webkit-text-fill-color:var(--sbb-color-metal);opacity:1}:host([floating-label]) .sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select))::placeholder{color:transparent!important;-webkit-text-fill-color:transparent!important}@media (forced-colors: active){:host([floating-label]) .sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select))::placeholder{color:Canvas!important;-webkit-text-fill-color:Canvas!important}}:host([data-disabled]:not([floating-label])) .sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select))::placeholder{color:var(--sbb-color-granite);-webkit-text-fill-color:var(--sbb-color-granite)}:host([data-input-type=select]) .sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select)){vertical-align:middle}.sbb-form-field__input ::slotted(:where(select,sbb-select)){padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}.sbb-form-field__input ::slotted(textarea){--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-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-form-field__input ::slotted(textarea)::-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-form-field__input ::slotted(textarea)::-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-form-field__input ::slotted(textarea)::-webkit-scrollbar-button,.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-form-field__input ::slotted(textarea){scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-form-field__input ::slotted(textarea){position:relative;resize:none;white-space:break-spaces;overflow-y:auto;min-height:calc(var(--sbb-typo-line-height-body-text) * 1em)}:host([size=l]) .sbb-form-field__input ::slotted(textarea){padding-block-end:.34375rem}:host([negative]) .sbb-form-field__input ::slotted(textarea){--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-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}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-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)))}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-button,:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){:host([negative]) .sbb-form-field__input ::slotted(textarea){scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-form-field__error{display:flex;min-height:var(--sbb-form-field-error-min-height);margin-block-start:var(--sbb-form-field-error-padding-block-start-override, var(--sbb-form-field-error-padding-block-start))}`;
+const L = m`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:inline-block;--sbb-form-field-background-color: var(--sbb-color-white);--sbb-form-field-border-color: var(--sbb-color-smoke);--sbb-form-field-border-style: solid;--sbb-form-field-border-radius: var(--sbb-border-radius-4x);--sbb-form-field-border-width: var(--sbb-border-width-1x);--sbb-form-field-min-height: var(--sbb-size-element-m);--sbb-form-field-label-color: var(--sbb-color-metal);--sbb-form-field-prefix-color: var(--sbb-color-metal);--sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);--sbb-form-field-text-color: var(--sbb-color-charcoal);--sbb-form-field-arrow-color: var(--sbb-color-charcoal);--sbb-form-field-error-divider-width: var(--sbb-spacing-fixed-1x);--sbb-form-field-error-padding-block-start: var(--sbb-form-field-error-divider-width);--sbb-form-field-gap: var(--sbb-spacing-fixed-2x);--sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);--sbb-form-field-select-inline-padding-end: calc( var(--sbb-icon-svg-width) + var(--sbb-form-field-gap) );--sbb-form-field-overflow: hidden;--sbb-form-field-input-text-size: var(--sbb-font-size-text-m);--sbb-form-field-label-text-size: var(--sbb-font-size-text-xs);--sbb-form-field-label-size: calc( var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-body-text) );--sbb-form-field-text-line-height: calc( var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-body-text) );--sbb-form-field-margin-block-start: calc( ( var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var( --sbb-form-field-text-line-height ) + var(--sbb-form-field-label-to-input-overlapping) ) / 2 );--sbb-form-field-spacer-margin-block-end: calc( -1 * var(--sbb-form-field-label-to-input-overlapping) );--sbb-form-field-floating-label-transform: .53125rem;--sbb-icon-svg-width: var(--sbb-size-icon-ui-small);--sbb-icon-svg-height: var(--sbb-size-icon-ui-small);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default)}@media (min-width: 52.5rem){:host{--sbb-form-field-floating-label-transform: .65625rem}}@media (forced-colors: active){:host{--sbb-form-field-border-color: ButtonBorder}}:host(:where(:not([width=collapse]))){min-width:9.375rem;width:min(18.75rem,100%)}:host([negative]){--sbb-form-field-background-color: var(--sbb-color-midnight);--sbb-form-field-border-color: var(--sbb-color-smoke);--sbb-form-field-label-color: var(--sbb-color-smoke);--sbb-form-field-prefix-color: var(--sbb-color-smoke);--sbb-form-field-text-color: var(--sbb-color-milk);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-form-field-arrow-color: var(--sbb-color-milk)}@media (forced-colors: active){:host([negative]){--sbb-form-field-border-color: ButtonBorder}}:host([size=s]){--sbb-form-field-min-height: var(--sbb-size-element-xs);--sbb-form-field-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-form-field-input-text-size: var(--sbb-font-size-text-s);--sbb-form-field-label-text-size: var(--sbb-font-size-text-xxs);--sbb-form-field-label-to-input-overlapping: .625rem;--sbb-form-field-floating-label-transform: .34375rem;--sbb-form-field-spacer-margin-block-end: -.53125rem}@media (min-width: 52.5rem){:host([size=s]){--sbb-form-field-label-to-input-overlapping: .6875rem;--sbb-form-field-floating-label-transform: .3125rem;--sbb-form-field-spacer-margin-block-end: -.5rem}}:host([size=l]){--sbb-form-field-min-height: var(--sbb-size-element-l);--sbb-form-field-padding-inline: var(--sbb-spacing-responsive-xxxs)}:host([error-space=reserve]){--sbb-form-field-error-min-height: calc( var(--sbb-typo-line-height-body-text) * var(--sbb-font-size-text-xs) );--sbb-form-field-error-padding-block-start-override: var(--sbb-form-field-error-divider-width)}:host(:is([data-readonly],[data-disabled])){--sbb-form-field-background-color: var(--sbb-color-milk);--sbb-form-field-border-color: var(--sbb-color-graphite);--sbb-form-field-arrow-color: var(--sbb-color-granite)}@media (forced-colors: active){:host(:is([data-readonly],[data-disabled])){--sbb-form-field-border-color: ButtonBorder}}:host(:is([data-readonly],[data-disabled])[negative]){--sbb-form-field-background-color: var(--sbb-color-charcoal);--sbb-form-field-border-color: var(--sbb-color-smoke);--sbb-form-field-arrow-color: var(--sbb-color-smoke)}:host([data-disabled]){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: var(--sbb-color-granite);--sbb-form-field-border-style: dashed}@media (forced-colors: active){:host([data-disabled]){--sbb-form-field-label-color: GrayText !important;--sbb-form-field-prefix-color: GrayText !important;--sbb-form-field-text-color: GrayText !important;--sbb-form-field-border-color: GrayText !important}}:host([data-disabled][negative]){--sbb-form-field-text-color: var(--sbb-color-smoke);--sbb-form-field-label-color: var(--sbb-color-smoke);--sbb-form-field-prefix-color: var(--sbb-color-smoke)}:host([data-readonly]:not([negative])){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: var(--sbb-color-granite)}:host(:is([data-input-focused],[data-has-popup-open])){--sbb-form-field-border-color: var(--sbb-color-charcoal);--sbb-form-field-prefix-color: var(--sbb-color-charcoal);--sbb-form-field-border-width: var(--sbb-border-width-2x)}@media (forced-colors: active){:host(:is([data-input-focused],[data-has-popup-open])){--sbb-form-field-border-color: Highlight !important;--sbb-form-field-prefix-color: Highlight !important}}:host(:is([data-input-focused],[data-has-popup-open])[negative]){--sbb-form-field-border-color: var(--sbb-color-milk);--sbb-form-field-prefix-color: var(--sbb-color-milk)}:host([data-invalid]){--sbb-form-field-border-color: var(--sbb-color-red125);--sbb-form-field-text-color: var(--sbb-color-red125)}@media (forced-colors: active){:host([data-invalid]){--sbb-form-field-border-color: LinkText !important;--sbb-form-field-text-color: LinkText !important}}:host([data-invalid][negative]){--sbb-form-field-border-color: var(--sbb-color-red-mode-dark);--sbb-form-field-text-color: var(--sbb-color-red-mode-dark)}:host(:not([data-has-error])){--sbb-form-field-error-padding-block-start: 0}:host([floating-label]){--sbb-select-placeholder-color: transparent}@media (forced-colors: active){:host([floating-label]){--sbb-select-placeholder-color: Canvas}}:host(:is(:not([data-slot-names~=label],[label]),[hidden-label])){--sbb-form-field-label-size: 0rem;--sbb-form-field-label-to-input-overlapping: 0rem}:host([data-input-type=sbb-slider]){--sbb-form-field-overflow: visible}:host([data-input-type=textarea]){--sbb-form-field-max-height: fit-content}.sbb-form-field__space-wrapper{display:flex;flex-direction:column}.sbb-form-field__space-wrapper:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-form-field__wrapper{display:flex;gap:var(--sbb-form-field-gap);padding-inline:var(--sbb-form-field-padding-inline);border-radius:var(--sbb-form-field-border-radius);min-height:var(--sbb-form-field-min-height);max-height:var(--sbb-form-field-max-height);background-color:var(--sbb-form-field-background-color);position:relative}.sbb-form-field__wrapper:before{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border:var(--sbb-form-field-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);border-radius:var(--sbb-form-field-border-radius)}:host([data-input-focused][data-focus-origin=keyboard]) .sbb-form-field__wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}@media (forced-colors: none){:host(:is([borderless],[data-input-type=sbb-slider])) .sbb-form-field__wrapper:before{border-color:transparent}:host(:is([data-input-focused],[data-has-popup-open],[data-disabled])[borderless]) .sbb-form-field__wrapper:after{content:"";position:absolute;border-block-end:var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);inset-inline:var(--sbb-form-field-padding-inline);inset-block-end:0}}::slotted(*[slot=prefix]){color:var(--sbb-form-field-prefix-color)}::slotted(*[slot=prefix]),::slotted(*[slot=suffix]){display:flex;min-width:var(--sbb-icon-svg-width);margin-block-start:calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2)}:host(:is([data-input-empty],[data-disabled],[data-readonly])) ::slotted(sbb-form-field-clear){display:none}::slotted(sbb-datepicker-toggle){height:calc((var(--sbb-form-field-min-height) + var(--sbb-size-icon-ui-small)) / 2)}@media (forced-colors: active){::slotted(*[slot=suffix]){color:var(--sbb-form-field-prefix-color)}}.sbb-form-field__select-input-icon{top:50%;transform:translateY(-50%);position:absolute;inset-inline-end:0;margin-block-start:calc(-1 * var(--sbb-form-field-margin-block-start) / 2);pointer-events:none;color:var(--sbb-form-field-arrow-color)}.sbb-form-field__input-container{flex:1 1 auto;position:relative;margin-block-start:var(--sbb-form-field-margin-block-start);min-width:0}.sbb-form-field__label-spacer{display:flex;height:calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-body-text));margin-block-end:var(--sbb-form-field-spacer-margin-block-end)}:host(:not([data-slot-names~=label],[label])) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){display:none}:host([hidden-label]) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-form-field__label{display:flex;max-width:100%;cursor:default;position:absolute;inset-block-start:0;color:var(--sbb-form-field-label-color);z-index:1;--sbb-text-font-size: var(--sbb-font-size-text-xs);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([size=s]) .sbb-form-field__label{--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([data-input-type=select]) .sbb-form-field__label,:host([data-input-type=sbb-select]) .sbb-form-field__label{padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}:host([floating-label]) .sbb-form-field__label{transform-origin:0 0;pointer-events:none;backface-visibility:hidden;will-change:transform,font-size;transition-duration:var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x));transition-timing-function:var(--sbb-animation-easing);transition-property:transform,font-size}:host([floating-label]:is(:not([data-input-focused]:not([data-input-type=sbb-select]),[data-has-popup-open]),[data-readonly])[data-input-empty]) .sbb-form-field__label{font-size:var(--sbb-form-field-input-text-size);transform:translateY(var(--sbb-form-field-floating-label-transform))}.sbb-form-field__label-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-form-field__input{display:flex}:host([size=s]:is([data-input-type=input],[data-input-type=select],[data-input-type=sbb-select])) .sbb-form-field__input{margin-block-end:-.125rem}.sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select)){--sbb-text-font-size: var(--sbb-font-size-text-m);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);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:none;border:none;padding:0;-webkit-appearance:none;outline:none!important;overflow:var(--sbb-form-field-overflow);width:100%;box-sizing:border-box;color:var(--sbb-form-field-text-color);-webkit-text-fill-color:var(--sbb-form-field-text-color);opacity:1;background-color:transparent;font-size:var(--sbb-form-field-input-text-size)!important;font-family:var(--sbb-typo-font-family)!important;line-height:var(--sbb-typo-line-height-body-text)!important}.sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select))::placeholder{color:var(--sbb-color-metal);-webkit-text-fill-color:var(--sbb-color-metal);opacity:1}:host([floating-label]) .sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select))::placeholder{color:transparent!important;-webkit-text-fill-color:transparent!important}@media (forced-colors: active){:host([floating-label]) .sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select))::placeholder{color:Canvas!important;-webkit-text-fill-color:Canvas!important}}:host([data-disabled]:not([floating-label])) .sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select))::placeholder{color:var(--sbb-color-granite);-webkit-text-fill-color:var(--sbb-color-granite)}:host([data-input-type=select]) .sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select)){vertical-align:middle}.sbb-form-field__input ::slotted(:where(select,sbb-select)){padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}.sbb-form-field__input ::slotted(textarea){--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-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-form-field__input ::slotted(textarea)::-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-form-field__input ::slotted(textarea)::-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-form-field__input ::slotted(textarea)::-webkit-scrollbar-button,.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-form-field__input ::slotted(textarea){scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-form-field__input ::slotted(textarea){position:relative;resize:none;white-space:break-spaces;overflow-y:auto;min-height:calc(var(--sbb-typo-line-height-body-text) * 1em)}:host([size=l]) .sbb-form-field__input ::slotted(textarea){padding-block-end:.34375rem}:host([negative]) .sbb-form-field__input ::slotted(textarea){--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-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}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-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)))}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-button,:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){:host([negative]) .sbb-form-field__input ::slotted(textarea){scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-form-field__error{display:flex;min-height:var(--sbb-form-field-error-min-height);margin-block-start:var(--sbb-form-field-error-padding-block-start-override, var(--sbb-form-field-error-padding-block-start))}`;
 var C = Object.defineProperty, S = Object.getOwnPropertyDescriptor, i = (e, t, r, l) => {
   for (var s = l > 1 ? void 0 : l ? S(t, r) : t, a = e.length - 1, n; a >= 0; a--)
     (n = e[a]) && (s = (l ? n(t, r, s) : n(s)) || s);
   return l && s && C(t, r, s), s;
 };
 let p = 0, N = 0;
-const m = ["sbb-autocomplete", "sbb-autocomplete-grid", "sbb-select"];
-let o = class extends E(z(u)) {
+const h = ["sbb-autocomplete", "sbb-autocomplete-grid", "sbb-select"];
+let o = class extends z(I(u)) {
   constructor() {
     super(...arguments), this._supportedNativeInputElements = ["input", "select", "textarea"], this._supportedInputElements = [
       ...this._supportedNativeInputElements,
@@ -35,11 +34,9 @@ let o = class extends E(z(u)) {
       "tel",
       "text",
       "url"
-    ], this.errorSpace = "none", this.size = "m", this.borderless = !1, this.width = "default", this.hiddenLabel = !1, this.floatingLabel = !1, this._errorElements = [], this._abort = new _(this), this._language = new x(this), this._formFieldAttributeObserver = new I(
-      (e) => {
-        e.some((t) => t.type === "attributes") && this._readInputState();
-      }
-    ), this._inputAbortController = new AbortController();
+    ], this.errorSpace = "none", this.size = "m", this.borderless = !1, this.width = "default", this.hiddenLabel = !1, this.floatingLabel = !1, this._errorElements = [], this._abort = new x(this), this._language = new y(this), this._formFieldAttributeObserver = v ? null : new MutationObserver((e) => {
+      e.some((t) => t.type === "attributes") && this._readInputState();
+    }), this._inputAbortController = new AbortController();
   }
   /** Returns the input element. */
   get inputElement() {
@@ -54,13 +51,14 @@ let o = class extends E(z(u)) {
     super.willUpdate(e), e.has("negative") && this._syncNegative();
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this._formFieldAttributeObserver.disconnect(), this._inputAbortController.abort();
+    var e;
+    super.disconnectedCallback(), (e = this._formFieldAttributeObserver) == null || e.disconnect(), this._inputAbortController.abort();
   }
   _onPopupOpen({ target: e }) {
-    m.includes(e.localName) && this.toggleAttribute("data-has-popup-open", !0);
+    h.includes(e.localName) && this.toggleAttribute("data-has-popup-open", !0);
   }
   _onPopupClose({ target: e }) {
-    m.includes(e.localName) && this.removeAttribute("data-has-popup-open");
+    h.includes(e.localName) && this.removeAttribute("data-has-popup-open");
   }
   _handleWrapperClick(e) {
     var t, r;
@@ -79,7 +77,8 @@ let o = class extends E(z(u)) {
    * It is used internally to assign the attributes of `<input>` to `_id` and `_input` and to observe the native readonly and disabled attributes.
    */
   _onSlotInputChange(e) {
-    this._input = e.target.assignedElements().find((t) => this._supportedInputElements.includes(t.localName)), this._assignSlots(), this._input && (this._originalInputAriaDescribedby = this._input.getAttribute("aria-describedby"), this._applyAriaDescribedby(), this._readInputState(), this._registerInputListener(), this._input.localName === "textarea" && this._input.setAttribute("rows", this._input.getAttribute("rows") || "3"), this._formFieldAttributeObserver.disconnect(), this._formFieldAttributeObserver.observe(this._input, {
+    var t, r;
+    this._input = e.target.assignedElements().find((l) => this._supportedInputElements.includes(l.localName)), this._assignSlots(), this._input && (this._originalInputAriaDescribedby = this._input.getAttribute("aria-describedby"), this._applyAriaDescribedby(), this._readInputState(), this._registerInputListener(), this._input.localName === "textarea" && this._input.setAttribute("rows", this._input.getAttribute("rows") || "3"), (t = this._formFieldAttributeObserver) == null || t.disconnect(), (r = this._formFieldAttributeObserver) == null || r.observe(this._input, {
       attributes: !0,
       attributeFilter: ["readonly", "disabled", "class", "data-sbb-invalid"]
     }), this.setAttribute("data-input-type", this._input.localName), this._syncLabelInputReferences());
@@ -114,7 +113,7 @@ let o = class extends E(z(u)) {
       () => {
         this.toggleAttribute("data-input-focused", !0), this.setAttribute(
           "data-focus-origin",
-          g.mostRecentModality ?? ""
+          _.mostRecentModality ?? ""
         );
       },
       {
@@ -164,14 +163,14 @@ let o = class extends E(z(u)) {
   _onSlotErrorChange(e) {
     this._errorElements = e.target.assignedElements();
     for (const t of this._errorElements)
-      t.id || (t.id = `sbb-form-field-error-${++N}`), t.role || (t.role = "status", w && t.setAttribute("role", "status"));
+      t.id || (t.id = `sbb-form-field-error-${++N}`), t.role || (t.role = "status", k && t.setAttribute("role", "status"));
     this._applyAriaDescribedby(), this.toggleAttribute("data-has-error", !!this._errorElements.length), this._syncNegative();
   }
   _applyAriaDescribedby() {
     const e = [];
     this._originalInputAriaDescribedby && e.push(this._originalInputAriaDescribedby), this._errorElements.length && this._errorElements.forEach((r) => e.push(r.id));
     const t = e.join(" ");
-    this._input && k(this._input, "aria-describedby", t);
+    this._input && A(this._input, "aria-describedby", t);
   }
   /** Manually reset the form field. Currently, this only resets the floating label. */
   reset() {
@@ -209,7 +208,7 @@ let o = class extends E(z(u)) {
             <span class="sbb-form-field__label">
               <span class="sbb-form-field__label-ellipsis">
                 <slot name="label" @slotchange=${this._onSlotLabelChange}></slot>
-                ${this.optional ? d` <span aria-hidden="true"> ${A[this._language.current]} </span>` : f}
+                ${this.optional ? d` <span aria-hidden="true"> ${E[this._language.current]} </span>` : f}
               </span>
             </span>
             <div class="sbb-form-field__input">
@@ -262,8 +261,8 @@ i([
   c()
 ], o.prototype, "_label", 2);
 o = i([
-  v("sbb-form-field"),
-  y()
+  g("sbb-form-field"),
+  w()
 ], o);
 export {
   o as SbbFormFieldElement

package/header/common.js

@@ -2,13 +2,13 @@ import { property as n } from "lit/decorators.js";
 import { html as s } from "lit/static-html.js";
 import { SbbIconNameMixin as d } from "../icon.js";
 import { css as b } from "lit";
-const h = b`*,:before,:after{box-sizing:border-box}:host{display:inline-block;outline:none!important;--sbb-header-action-padding-inline: var(--sbb-spacing-fixed-5x);--sbb-header-action-color: var(--sbb-color-black);--sbb-header-action-background-color: transparent;--sbb-header-action-min-height: var(--sbb-size-element-s);--sbb-header-action-min-width: var(--sbb-header-action-min-height);--sbb-header-action-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-header-action-transition-easing: var(--sbb-animation-easing);--sbb-header-action-border-color: transparent;--sbb-header-action-background-inset: 0;--sbb-header-action-translate-y: 0;--sbb-header-action-gap: var(--sbb-spacing-fixed-2x);--sbb-header-first-item-margin-inline-start: calc(-1 * var(--sbb-header-action-padding-inline))}@media (forced-colors: active){:host{--sbb-header-action-border-color: CanvasText;--sbb-header-action-color: LinkText}}@media (any-hover: hover){:host(:hover:not(:active,[data-active],[aria-expanded=true])){--sbb-header-action-background-color: var(--sbb-color-milk);--sbb-header-action-translate-y: -.0625rem;--sbb-header-action-background-inset: calc(var(--sbb-border-width-2x) * -1)}}@media (any-hover: hover) and (forced-colors: active){:host(:hover:not(:active,[data-active],[aria-expanded=true])){--sbb-header-action-border-color: Highlight}}:host(:is(:active,[data-active])){--sbb-header-action-background-color: var(--sbb-color-cloud)}@media (forced-colors: active){:host(:is(:active,[data-active])){--sbb-header-action-border-color: Highlight}}@media (forced-colors: active){:host([role=button]){--sbb-header-action-color: ButtonText}}:is(.sbb-header-button,.sbb-header-link){font-family:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;font-size:inherit;text-align:inherit;display:flex;position:relative;align-items:center;justify-content:center;color:var(--sbb-header-action-color);text-decoration:none;min-height:var(--sbb-header-action-min-height);min-width:var(--sbb-header-action-min-width);padding-inline:var(--sbb-header-action-padding-inline);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none}:is(.sbb-header-button,.sbb-header-link):before{position:absolute;content:"";inset:var(--sbb-header-action-background-inset);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-header-action-background-color);transition-duration:var(--sbb-header-action-transition-duration);transition-timing-function:var(--sbb-header-action-transition-easing);transition-property:inset,background-color;border:var(--sbb-border-width-1x) solid var(--sbb-header-action-border-color)}@media (forced-colors: active){:is(.sbb-header-button,.sbb-header-link):before{border-width:var(--sbb-border-width-2x)}}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) :is(.sbb-header-button,.sbb-header-link):before,:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) :is(.sbb-header-button,.sbb-header-link):focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-header-action__wrapper{display:flex;align-items:center;gap:var(--sbb-header-action-gap);white-space:nowrap;transform:translateY(var(--sbb-header-action-translate-y));transition:transform var(--sbb-header-action-transition-duration) var(--sbb-header-action-transition-easing);will-change:transform;max-width:100%}.sbb-header-action__icon{--sbb-icon-svg-stroke-color: currentcolor;--sbb-icon-svg-stroke-width: 1px;min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small);line-height:0}.sbb-header-action__text{--sbb-text-font-size: var(--sbb-font-size-text-xs);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);font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}@media (max-width: -.0625rem){:host([expand-from=zero]){--sbb-header-first-item-margin-inline-start: -.75rem;--sbb-header-action-padding-inline: 0}:host([expand-from=zero]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 22.4375rem){:host([expand-from=micro]){--sbb-header-first-item-margin-inline-start: -.75rem;--sbb-header-action-padding-inline: 0}:host([expand-from=micro]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 37.4375rem){:host([expand-from=small]){--sbb-header-first-item-margin-inline-start: -.75rem;--sbb-header-action-padding-inline: 0}:host([expand-from=small]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 52.4375rem){:host([expand-from=medium]){--sbb-header-first-item-margin-inline-start: -.75rem;--sbb-header-action-padding-inline: 0}:host([expand-from=medium]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 63.9375rem){:host([expand-from=large]){--sbb-header-first-item-margin-inline-start: -.75rem;--sbb-header-action-padding-inline: 0}:host([expand-from=large]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 79.9375rem){:host([expand-from=wide]){--sbb-header-first-item-margin-inline-start: -.75rem;--sbb-header-action-padding-inline: 0}:host([expand-from=wide]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 89.9375rem){:host([expand-from=ultra]){--sbb-header-first-item-margin-inline-start: -.75rem;--sbb-header-action-padding-inline: 0}:host([expand-from=ultra]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: calc(99rem-0.0625rem)){:host([expand-from=ultra--max-content]){--sbb-header-first-item-margin-inline-start: -.75rem;--sbb-header-action-padding-inline: 0}:host([expand-from=ultra--max-content]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}`;
+const h = b`*,:before,:after{box-sizing:border-box}:host{display:inline-block;outline:none!important;--sbb-header-action-padding-inline: var(--sbb-spacing-fixed-5x);--sbb-header-action-color: var(--sbb-color-black);--sbb-header-action-background-color: transparent;--sbb-header-action-min-height: var(--sbb-size-element-s);--sbb-header-action-min-width: var(--sbb-header-action-min-height);--sbb-header-action-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-header-action-transition-easing: var(--sbb-animation-easing);--sbb-header-action-border-color: transparent;--sbb-header-action-background-inset: 0;--sbb-header-action-translate-y: 0;--sbb-header-action-gap: var(--sbb-spacing-fixed-2x);--sbb-header-action-icon-dimension: var(--sbb-size-icon-ui-small);--_sbb-header-first-item-padding-shift: calc(-1 * var(--sbb-header-action-padding-inline));--sbb-header-first-item-icon-shift: .125rem;--sbb-header-first-item-margin-inline-start: calc( var(--_sbb-header-first-item-padding-shift) - var(--sbb-header-first-item-icon-shift) )}@media (forced-colors: active){:host{--sbb-header-action-border-color: CanvasText;--sbb-header-action-color: LinkText}}@media (any-hover: hover){:host(:hover:not(:active,[data-active],[aria-expanded=true])){--sbb-header-action-background-color: var(--sbb-color-milk);--sbb-header-action-translate-y: -.0625rem;--sbb-header-action-background-inset: calc(var(--sbb-border-width-2x) * -1)}}@media (any-hover: hover) and (forced-colors: active){:host(:hover:not(:active,[data-active],[aria-expanded=true])){--sbb-header-action-border-color: Highlight}}:host(:is(:active,[data-active])){--sbb-header-action-background-color: var(--sbb-color-cloud)}@media (forced-colors: active){:host(:is(:active,[data-active])){--sbb-header-action-border-color: Highlight}}@media (forced-colors: active){:host([role=button]){--sbb-header-action-color: ButtonText}}:is(.sbb-header-button,.sbb-header-link){font-family:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;font-size:inherit;text-align:inherit;display:flex;position:relative;align-items:center;justify-content:center;color:var(--sbb-header-action-color);text-decoration:none;min-height:var(--sbb-header-action-min-height);min-width:var(--sbb-header-action-min-width);padding-inline:var(--sbb-header-action-padding-inline-zero, var(--sbb-header-action-padding-inline));cursor:pointer;-webkit-user-select:none;user-select:none;outline:none}:is(.sbb-header-button,.sbb-header-link):before{position:absolute;content:"";inset:var(--sbb-header-action-background-inset);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-header-action-background-color);transition-duration:var(--sbb-header-action-transition-duration);transition-timing-function:var(--sbb-header-action-transition-easing);transition-property:inset,background-color;border:var(--sbb-border-width-1x) solid var(--sbb-header-action-border-color)}@media (forced-colors: active){:is(.sbb-header-button,.sbb-header-link):before{border-width:var(--sbb-border-width-2x)}}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) :is(.sbb-header-button,.sbb-header-link):before,:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) :is(.sbb-header-button,.sbb-header-link):focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-header-action__wrapper{display:flex;align-items:center;gap:var(--sbb-header-action-gap);white-space:nowrap;transform:translateY(var(--sbb-header-action-translate-y));transition:transform var(--sbb-header-action-transition-duration) var(--sbb-header-action-transition-easing);will-change:transform;max-width:100%}.sbb-header-action__icon{--sbb-icon-svg-stroke-color: currentcolor;--sbb-icon-svg-stroke-width: 1px;min-width:var(--sbb-header-action-icon-dimension);min-height:var(--sbb-header-action-icon-dimension);line-height:0}.sbb-header-action__text{--sbb-text-font-size: var(--sbb-font-size-text-xs);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);font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}@media (max-width: -.0625rem){:host([expand-from=zero]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0}:host([expand-from=zero]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 22.4375rem){:host([expand-from=micro]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0}:host([expand-from=micro]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 37.4375rem){:host([expand-from=small]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0}:host([expand-from=small]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 52.4375rem){:host([expand-from=medium]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0}:host([expand-from=medium]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 63.9375rem){:host([expand-from=large]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0}:host([expand-from=large]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 79.9375rem){:host([expand-from=wide]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0}:host([expand-from=wide]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 89.9375rem){:host([expand-from=ultra]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0}:host([expand-from=ultra]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: calc(99rem-0.0625rem)){:host([expand-from=ultra--max-content]){--_sbb-header-first-item-padding-shift: calc( -.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) );--sbb-header-action-padding-inline-zero: 0}:host([expand-from=ultra--max-content]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}`;
 var c = Object.defineProperty, l = (t, e, i, p) => {
   for (var a = void 0, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (a = o(e, i, a) || a);
   return a && c(e, i, a), a;
 };
-const u = (t) => {
+const v = (t) => {
   const i = class i extends d(t) {
     constructor() {
       super(...arguments), this.expandFrom = "medium";
@@ -31,5 +31,5 @@ const u = (t) => {
   ], e.prototype, "expandFrom"), e;
 };
 export {
-  u as SbbHeaderActionCommonElementMixin
+  v as SbbHeaderActionCommonElementMixin
 };

package/header/header/header.d.ts

@@ -21,6 +21,8 @@ export declare class SbbHeaderElement extends SbbHeaderElement_base {
     private _scrollOrigin;
     /** Whether the header should hide and show on scroll. */
     hideOnScroll: boolean;
+    /** Size of the header. */
+    size: 'm' | 's';
     private _headerOnTop;
     private _scrollElement;
     private _scrollEventsController;

package/header/header/header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../../src/elements/header/header/header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAkB,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAS3F,OAAO,eAAe,CAAC;;AAIvB;;;;;;;GAOG;AACH,qBACa,gBAAiB,SAAQ,qBAA6B;IACjE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACgD,QAAQ,UAAS;IAEpE,gFAAgF;IAChF,IACW,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,QAAQ,EAI7D;IACD,IAAW,YAAY,IAAI,MAAM,GAAG,WAAW,GAAG,QAAQ,CAEzD;IACD,OAAO,CAAC,aAAa,CAAiE;IAEtF,yDAAyD;IACuB,YAAY,UACpF;IAEC,OAAO,CAAC,YAAY,CAAQ;IAErC,OAAO,CAAC,cAAc,CAA4C;IAClE,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,eAAe,CAA2B;IAClD,OAAO,CAAC,WAAW,CAAK;IAExB,OAAO,CAAC,mBAAmB;IAY3B,gGAAgG;IAChF,iBAAiB,IAAI,IAAI;IAMzC,2DAA2D;IAC3C,oBAAoB,IAAI,IAAI;IAK5C,sHAAsH;IACtH,OAAO,CAAC,2BAA2B;IAWnC,wDAAwD;IACxD,OAAO,CAAC,kBAAkB;IAI1B,2DAA2D;IAC3D,OAAO,CAAC,yBAAyB;IAOjC;;;;;OAKG;IACH,OAAO,CAAC,eAAe;IA8CvB,uEAAuE;IACvE,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,kBAAkB;cAgBP,MAAM,IAAI,cAAc;CAc5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../../src/elements/header/header/header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAkB,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAS3F,OAAO,eAAe,CAAC;;AAIvB;;;;;;;GAOG;AACH,qBACa,gBAAiB,SAAQ,qBAA6B;IACjE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACgD,QAAQ,UAAS;IAEpE,gFAAgF;IAChF,IACW,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,QAAQ,EAI7D;IACD,IAAW,YAAY,IAAI,MAAM,GAAG,WAAW,GAAG,QAAQ,CAEzD;IACD,OAAO,CAAC,aAAa,CAAiE;IAEtF,yDAAyD;IACuB,YAAY,UACpF;IAER,0BAA0B;IACU,IAAI,EAAE,GAAG,GAAG,GAAG,CAAO;IAEjD,OAAO,CAAC,YAAY,CAAQ;IAErC,OAAO,CAAC,cAAc,CAA4C;IAClE,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,eAAe,CAA2B;IAClD,OAAO,CAAC,WAAW,CAAK;IAExB,OAAO,CAAC,mBAAmB;IAY3B,gGAAgG;IAChF,iBAAiB,IAAI,IAAI;IAMzC,2DAA2D;IAC3C,oBAAoB,IAAI,IAAI;IAK5C,sHAAsH;IACtH,OAAO,CAAC,2BAA2B;IAWnC,wDAAwD;IACxD,OAAO,CAAC,kBAAkB;IAI1B,2DAA2D;IAC3D,OAAO,CAAC,yBAAyB;IAOjC;;;;;OAKG;IACH,OAAO,CAAC,eAAe;IA8CvB,uEAAuE;IACvE,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,kBAAkB;cAgBP,MAAM,IAAI,cAAc;CAc5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}

package/header/header.js

@@ -1,19 +1,19 @@
 import { css as h, LitElement as c, isServer as b, html as f } from "lit";
-import { property as d, state as u, customElement as v } from "lit/decorators.js";
+import { property as n, state as u, customElement as v } from "lit/decorators.js";
 import { SbbFocusVisibleWithinController as m } from "../core/a11y.js";
 import { findReferencedElement as p } from "../core/dom.js";
 import { SbbHydrationMixin as g } from "../core/mixins.js";
 import "../logo.js";
-const _ = h`*,:before,:after{box-sizing:border-box}:host{display:block;height:var(--sbb-header-height);--sbb-logo-height: 1rem;--sbb-header-position: fixed;--sbb-header-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-header-inset-inline-end: 0}@media (min-width: 52.5rem){:host{--sbb-logo-height: 1.25rem}}:host([hide-on-scroll]){--sbb-header-position: absolute}:host([hide-on-scroll][data-fixed]){--sbb-header-position: fixed;--sbb-header-animation-name: hide;--sbb-header-transform: translate3d(0, -100%, 0);--sbb-header-inset-inline-end: var(--sbb-scrollbar-width, 0)}:host([hide-on-scroll][data-fixed][data-animated]){--sbb-header-transition-timing: cubic-bezier(.4, 0, 1, 1)}:host([hide-on-scroll][data-fixed][data-visible]){--sbb-header-animation-name: show;--sbb-header-transform: translate3d(0, 0, 0);--sbb-header-transition-timing: cubic-bezier(0, 0, .2, 1)}:host([hide-on-scroll][data-fixed][data-has-visible-focus-within]){--sbb-header-transition-duration: 0;--sbb-header-transform: translate3d(0, 0, 0)}.sbb-header{position:var(--sbb-header-position);inset:0 var(--sbb-header-inset-inline-end) auto 0;background:var(--sbb-color-white);z-index:var(--sbb-header-z-index, 10);transform:var(--sbb-header-transform);transition-property:box-shadow;transition-duration:var(--sbb-header-transition-duration);transition-timing-function:var(--sbb-header-transition-timing);animation-name:var(--sbb-header-animation-name);animation-duration:var(--sbb-header-transition-duration);animation-timing-function:var(--sbb-header-transition-timing)}:host(:is([data-shadow],[data-has-visible-focus-within][data-fixed])) .sbb-header{box-shadow:var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-soft-2-color),var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-soft-1-color)}@media (forced-colors: active){.sbb-header{border-block-end:var(--sbb-border-width-1x) solid CanvasText}}.sbb-header__wrapper{display:flex;align-items:center;justify-content:flex-start;height:var(--sbb-header-height)}:host(:not([expanded])) .sbb-header__wrapper{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([expanded])) .sbb-header__wrapper{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}:host([expanded]) .sbb-header__wrapper{padding-inline:var(--sbb-spacing-responsive-xxs)}.sbb-header__logo{flex:0 0 auto;margin-inline-start:auto;padding-inline-start:var(--sbb-spacing-responsive-s)}::slotted(:is(sbb-header-button,sbb-header-link):first-child){margin-inline-start:var(--sbb-header-first-item-margin-inline-start)}::slotted(*){flex:0 0 auto}::slotted(.sbb-header-shrinkable){flex-shrink:1;min-width:0}::slotted(.sbb-header-spacer){flex-grow:1}::slotted(a[slot=logo]){display:block;padding-block:var(--sbb-spacing-fixed-3x);position:relative;outline:none!important}::slotted(a[slot=logo]):before{content:"";display:block;position:absolute;inset:var(--sbb-spacing-fixed-3x) 0}::slotted(a[slot=logo]:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])):before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);outline-offset:var(--sbb-spacing-fixed-3x);border-radius:1px}@keyframes show{0%{transform:translate3d(0,-100%,0)}to{transform:translateZ(0)}}@keyframes hide{0%{transform:translateZ(0)}to{transform:translate3d(0,-100%,0)}}`;
+const _ = h`*,:before,:after{box-sizing:border-box}:host{display:block;height:var(--sbb-header-height);--sbb-logo-height: 1rem;--sbb-signet-height: 1rem;--sbb-header-position: fixed;--sbb-header-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-header-inset-inline-end: 0}@media (min-width: 52.5rem){:host{--sbb-logo-height: 1.25rem;--sbb-signet-height: 1.25rem}}:host([hide-on-scroll]){--sbb-header-position: absolute}:host([hide-on-scroll][data-fixed]){--sbb-header-position: fixed;--sbb-header-animation-name: hide;--sbb-header-transform: translate3d(0, -100%, 0);--sbb-header-inset-inline-end: var(--sbb-scrollbar-width, 0)}:host([hide-on-scroll][data-fixed][data-animated]){--sbb-header-transition-timing: cubic-bezier(.4, 0, 1, 1)}:host([hide-on-scroll][data-fixed][data-visible]){--sbb-header-animation-name: show;--sbb-header-transform: translate3d(0, 0, 0);--sbb-header-transition-timing: cubic-bezier(0, 0, .2, 1)}:host([hide-on-scroll][data-fixed][data-has-visible-focus-within]){--sbb-header-transition-duration: 0;--sbb-header-transform: translate3d(0, 0, 0)}.sbb-header{position:var(--sbb-header-position);inset:0 var(--sbb-header-inset-inline-end) auto 0;background:var(--sbb-color-white);z-index:var(--sbb-header-z-index, 10);transform:var(--sbb-header-transform);transition-property:box-shadow;transition-duration:var(--sbb-header-transition-duration);transition-timing-function:var(--sbb-header-transition-timing);animation-name:var(--sbb-header-animation-name);animation-duration:var(--sbb-header-transition-duration);animation-timing-function:var(--sbb-header-transition-timing)}:host(:is([data-shadow],[data-has-visible-focus-within][data-fixed])) .sbb-header{box-shadow:var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-soft-2-color),var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-soft-1-color)}@media (forced-colors: active){.sbb-header{border-block-end:var(--sbb-border-width-1x) solid CanvasText}}.sbb-header__wrapper{display:flex;align-items:center;justify-content:flex-start;height:var(--sbb-header-height)}:host(:not([expanded])) .sbb-header__wrapper{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([expanded])) .sbb-header__wrapper{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}:host([expanded]) .sbb-header__wrapper{padding-inline:var(--sbb-spacing-responsive-xxs)}.sbb-header__logo{flex:0 0 auto;margin-inline-start:auto;padding-inline-start:var(--sbb-spacing-responsive-s)}::slotted(:is(sbb-header-button,sbb-header-link):first-child){margin-inline-start:var(--sbb-header-first-item-margin-inline-start)}:host([size=s]) ::slotted(:is(sbb-header-button,sbb-header-link)){--sbb-header-action-min-height: var(--sbb-size-element-xs);--sbb-header-action-padding-inline: var(--sbb-spacing-fixed-4x)}::slotted(*){flex:0 0 auto}::slotted(.sbb-header-shrinkable){flex-shrink:1;min-width:0}::slotted(.sbb-header-spacer){flex-grow:1}::slotted(a[slot=logo]){display:block;padding-block:var(--sbb-spacing-fixed-3x);position:relative;outline:none!important}::slotted(a[slot=logo]):before{content:"";display:block;position:absolute;inset:var(--sbb-spacing-fixed-3x) 0}::slotted(a[slot=logo]:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])):before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);outline-offset:var(--sbb-spacing-fixed-3x);border-radius:1px}@keyframes show{0%{transform:translate3d(0,-100%,0)}to{transform:translateZ(0)}}@keyframes hide{0%{transform:translateZ(0)}to{transform:translate3d(0,-100%,0)}}`;
 var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, a = (e, t, s, r) => {
-  for (var o = r > 1 ? void 0 : r ? x(t, s) : t, l = e.length - 1, n; l >= 0; l--)
-    (n = e[l]) && (o = (r ? n(t, s, o) : n(o)) || o);
-  return r && o && w(t, s, o), o;
+  for (var i = r > 1 ? void 0 : r ? x(t, s) : t, l = e.length - 1, d; l >= 0; l--)
+    (d = e[l]) && (i = (r ? d(t, s, i) : d(i)) || i);
+  return r && i && w(t, s, i), i;
 };
 const y = "[aria-controls][aria-expanded='true']";
-let i = class extends g(c) {
+let o = class extends g(c) {
   constructor() {
-    super(...arguments), this.expanded = !1, this._scrollOrigin = b ? null : document, this.hideOnScroll = !1, this._headerOnTop = !0, this._lastScroll = 0;
+    super(...arguments), this.expanded = !1, this._scrollOrigin = b ? null : document, this.hideOnScroll = !1, this.size = "m", this._headerOnTop = !0, this._lastScroll = 0;
   }
   set scrollOrigin(e) {
     const t = this._scrollOrigin;
@@ -99,22 +99,25 @@ let i = class extends g(c) {
     `;
   }
 };
-i.styles = _;
+o.styles = _;
 a([
-  d({ reflect: !0, type: Boolean })
-], i.prototype, "expanded", 2);
+  n({ reflect: !0, type: Boolean })
+], o.prototype, "expanded", 2);
 a([
-  d({ attribute: "scroll-origin" })
-], i.prototype, "scrollOrigin", 1);
+  n({ attribute: "scroll-origin" })
+], o.prototype, "scrollOrigin", 1);
 a([
-  d({ attribute: "hide-on-scroll", reflect: !0, type: Boolean })
-], i.prototype, "hideOnScroll", 2);
+  n({ attribute: "hide-on-scroll", reflect: !0, type: Boolean })
+], o.prototype, "hideOnScroll", 2);
+a([
+  n({ reflect: !0 })
+], o.prototype, "size", 2);
 a([
   u()
-], i.prototype, "_headerOnTop", 2);
-i = a([
+], o.prototype, "_headerOnTop", 2);
+o = a([
   v("sbb-header")
-], i);
+], o);
 export {
-  i as SbbHeaderElement
+  o as SbbHeaderElement
 };

package/icon/icon.d.ts

@@ -4,6 +4,12 @@ import { SbbIconBase } from './icon-base.js';
  * It displays an icon loaded from a registered namespace.
  */
 export declare class SbbIconElement extends SbbIconBase {
+    /**
+     * We need to additionally observe the svgicon attribute
+     * for sbb-angular compatibility.
+     * @internal
+     */
+    static get observedAttributes(): string[];
     /**
      * The provided name consisting of the namespace and the name of the icon.
      * If the namespace is missing, the default namespace "sbb" will be used.

package/icon/icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/elements/icon/icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;GAEG;AACH,qBACa,cAAe,SAAQ,WAAW;IAC7C;;;;OAIG;IACiC,IAAI,EAAG,MAAM,CAAC;IAElD,OAAO,CAAC,iBAAiB,CAAM;IAE/B;;;;OAIG;IACM,OAAO,CAAC,wBAAwB,CAAS;cAEzB,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;cAiBpE,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ5D,wBAAwB,CACtC,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,GAAG,IAAI,EACnB,KAAK,EAAE,MAAM,GAAG,IAAI,GACnB,IAAI;cAQY,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQ3D,MAAM,IAAI,cAAc;CAG5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/elements/icon/icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;GAEG;AACH,qBACa,cAAe,SAAQ,WAAW;IAC7C;;;;OAIG;IACH,WAA2B,kBAAkB,IAAI,MAAM,EAAE,CAExD;IAED;;;;OAIG;IACiC,IAAI,EAAG,MAAM,CAAC;IAElD,OAAO,CAAC,iBAAiB,CAAM;IAE/B;;;;OAIG;IACM,OAAO,CAAC,wBAAwB,CAAS;cAEzB,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;cAiBpE,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ5D,wBAAwB,CACtC,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,GAAG,IAAI,EACnB,KAAK,EAAE,MAAM,GAAG,IAAI,GACnB,IAAI;cAQY,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQ3D,MAAM,IAAI,cAAc;CAG5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}

package/icon.js

@@ -1,5 +1,5 @@
-import { isServer as y, css as w, LitElement as N, html as c, nothing as m } from "lit";
-import { state as b, property as h, customElement as A } from "lit/decorators.js";
+import { isServer as y, css as w, LitElement as A, html as c, nothing as m } from "lit";
+import { state as d, property as p, customElement as N } from "lit/decorators.js";
 import { unsafeHTML as C } from "lit/directives/unsafe-html.js";
 import { until as I } from "lit/directives/until.js";
 import { hostAttributes as $ } from "./core/decorators.js";
@@ -52,12 +52,12 @@ const L = (t) => typeof t == "string", _ = (t) => {
       return Promise.resolve("");
   return a;
 }, x = w`*,:before,:after{box-sizing:border-box}:host{display:inline-block;line-height:0;-webkit-tap-highlight-color:transparent}:host([data-empty]){--sbb-icon-default-dimension: 0}:host([data-empty][data-namespace=default][name$=-small]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-small)}:host([data-empty][data-namespace=default][name$=-medium]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-medium)}:host([data-empty][data-namespace=default][name$=-large]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-large)}svg{width:var(--sbb-icon-svg-width, var(--sbb-icon-default-dimension));height:var(--sbb-icon-svg-height, var(--sbb-icon-default-dimension));stroke:var(--sbb-icon-svg-stroke-color);stroke-width:var(--sbb-icon-svg-stroke-width)}svg:not(.color-immutable) [fill]:not([fill=none]){fill:currentcolor}svg:not(.color-immutable) [stroke]:not([stroke=none]){stroke:currentcolor}svg:not(.color-immutable)>:where(path,polygon,polyline):where(:not([stroke]):not([fill])),svg:not(.color-immutable) :where(:not([stroke]):not([fill])) :where(path,polygon,polyline):where(:not([stroke]):not([fill])){fill:currentcolor}`;
-var z = Object.defineProperty, M = Object.getOwnPropertyDescriptor, d = (t, e, i, r) => {
+var z = Object.defineProperty, M = Object.getOwnPropertyDescriptor, b = (t, e, i, r) => {
   for (var s = r > 1 ? void 0 : r ? M(e, i) : e, o = t.length - 1, a; o >= 0; o--)
     (a = t[o]) && (s = (r ? a(e, i, s) : a(s)) || s);
   return r && s && z(e, i, s), s;
 };
-let n = class extends N {
+let n = class extends A {
   constructor() {
     super(...arguments), this._svgNamespace = n._defaultNamespace, this.noSanitize = !1;
   }
@@ -105,22 +105,22 @@ let n = class extends N {
 };
 n.styles = x;
 n._defaultNamespace = "default";
-d([
-  b()
+b([
+  d()
 ], n.prototype, "_svgNamespace", 2);
-d([
-  b()
+b([
+  d()
 ], n.prototype, "_svgIcon", 2);
-d([
-  h({ attribute: "no-sanitize", type: Boolean })
+b([
+  p({ attribute: "no-sanitize", type: Boolean })
 ], n.prototype, "noSanitize", 2);
-n = d([
+n = b([
   $({
     "data-namespace": n._defaultNamespace,
     "data-empty": ""
   })
 ], n);
-var U = Object.defineProperty, j = Object.getOwnPropertyDescriptor, p = (t, e, i, r) => {
+var U = Object.defineProperty, j = Object.getOwnPropertyDescriptor, h = (t, e, i, r) => {
   for (var s = r > 1 ? void 0 : r ? j(e, i) : e, o = t.length - 1, a; o >= 0; o--)
     (a = t[o]) && (s = (r ? a(e, i, s) : a(s)) || s);
   return r && s && U(e, i, s), s;
@@ -129,6 +129,14 @@ let u = class extends n {
   constructor() {
     super(...arguments), this._defaultAriaLabel = "", this._sbbAngularCompatibility = !1;
   }
+  /**
+   * We need to additionally observe the svgicon attribute
+   * for sbb-angular compatibility.
+   * @internal
+   */
+  static get observedAttributes() {
+    return super.observedAttributes.concat("svgicon");
+  }
   async fetchSvgIcon(t, e) {
     return this.getAttribute("aria-label") === this._defaultAriaLabel && this.removeAttribute("aria-label"), this._defaultAriaLabel = `Icon ${e.replace(/-/g, " ")}`, this.getAttribute("aria-hidden") === "false" && !this.hasAttribute("aria-label") && e && this.setAttribute("aria-label", this._defaultAriaLabel), super.fetchSvgIcon(t, e);
   }
@@ -145,14 +153,14 @@ let u = class extends n {
     return this._sbbAngularCompatibility ? c`<slot></slot>` : super.render();
   }
 };
-p([
-  h({ reflect: !0 })
+h([
+  p({ reflect: !0 })
 ], u.prototype, "name", 2);
-p([
-  b()
+h([
+  d()
 ], u.prototype, "_sbbAngularCompatibility", 2);
-u = p([
-  A("sbb-icon")
+u = h([
+  N("sbb-icon")
 ], u);
 var k = Object.defineProperty, T = (t, e, i, r) => {
   for (var s = void 0, o = t.length - 1, a; o >= 0; o--)
@@ -170,7 +178,7 @@ const J = (t) => {
     }
   }
   return T([
-    h({ attribute: "icon-name", reflect: !0 })
+    p({ attribute: "icon-name", reflect: !0 })
   ], e.prototype, "iconName"), e;
 };
 export {

package/image.js

@@ -123,7 +123,7 @@ let a = class extends _ {
                 "conditionFeature": "min-width",
                 "conditionFeatureValue": {
                   "lyneDesignToken": true,
-                  "value": "sbb-breakpoint-small-min"
+                  "value": "sbb-breakpoint-micro-min"
                 },
                 "conditionOperator": false
               }
@@ -139,7 +139,7 @@ let a = class extends _ {
                 "conditionFeature": "max-width",
                 "conditionFeatureValue": {
                   "lyneDesignToken": true,
-                  "value": "sbb-breakpoint-micro-max"
+                  "value": "sbb-breakpoint-zero-max"
                 },
                 "conditionOperator": false
               }

package/journey-header/journey-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"journey-header.d.ts","sourceRoot":"","sources":["../../../src/elements/journey-header/journey-header.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAOhD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,OAAO,YAAY,CAAC;AACpB,OAAO,0BAA0B,CAAC;AAClC,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,iBAAiB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;;AAQhD;;GAEG;AACH,qBACa,uBAAwB,SAAQ,4BAA4B;IACvE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,8CAA8C;IAC3B,MAAM,EAAG,MAAM,CAAC;IAEnC,mDAAmD;IAChC,WAAW,EAAG,MAAM,CAAC;IAExC,wFAAwF;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEjF,gEAAgE;IAC7C,KAAK,EAAE,aAAa,CAAO;IAE9C,2BAA2B;IACS,IAAI,EAAE,iBAAiB,CAAO;IAElE,OAAO,CAAC,SAAS,CAAmC;cAEjC,MAAM,IAAI,cAAc;CAgC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,oBAAoB,EAAE,uBAAuB,CAAC;KAC/C;CACF"}
+{"version":3,"file":"journey-header.d.ts","sourceRoot":"","sources":["../../../src/elements/journey-header/journey-header.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAMhD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,OAAO,YAAY,CAAC;AACpB,OAAO,0BAA0B,CAAC;AAClC,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,iBAAiB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;;AAQhD;;GAEG;AACH,qBACa,uBAAwB,SAAQ,4BAA4B;IACvE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,8CAA8C;IAC3B,MAAM,EAAG,MAAM,CAAC;IAEnC,mDAAmD;IAChC,WAAW,EAAG,MAAM,CAAC;IAExC,wFAAwF;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEjF,gEAAgE;IAC7C,KAAK,EAAE,aAAa,CAAO;IAE9C,2BAA2B;IACS,IAAI,EAAE,iBAAiB,CAAO;IAElE,OAAO,CAAC,SAAS,CAAmC;cAEjC,MAAM,IAAI,cAAc;CAgC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,oBAAoB,EAAE,uBAAuB,CAAC;KAC/C;CACF"}

package/journey-header.js

@@ -1,26 +1,25 @@
-import { css as g, LitElement as m, html as p, nothing as c } from "lit";
+import { css as g, LitElement as u, html as p, nothing as c } from "lit";
 import { property as t, customElement as d } from "lit/decorators.js";
-import { SbbLanguageController as u } from "./core/controllers.js";
-import { getDocumentWritingMode as h } from "./core/dom.js";
-import { i18nConnectionFrom as y, i18nConnectionTo as f, i18nConnectionRoundtrip as v } from "./core/i18n.js";
-import { SbbNegativeMixin as _ } from "./core/mixins.js";
+import { SbbLanguageController as m } from "./core/controllers.js";
+import { i18nConnectionFrom as h, i18nConnectionTo as y, i18nConnectionRoundtrip as f } from "./core/i18n.js";
+import { SbbNegativeMixin as v } from "./core/mixins.js";
 import "./icon.js";
 import "./screen-reader-only.js";
 import "./title.js";
-const x = g`*,:before,:after{box-sizing:border-box}:host{--sbb-journey-header-gap: var(--sbb-spacing-fixed-1x);display:block}:host([id]){scroll-margin-block-start:var(--sbb-spacing-fixed-10x)}sbb-title{margin:0}sbb-icon{min-width:var(--sbb-size-icon-ui-small)}.sbb-journey-header{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--sbb-journey-header-gap);width:fit-content}.sbb-journey-header[dir=rtl] sbb-icon{transform:rotate(-180deg)}`;
-var $ = Object.defineProperty, j = Object.getOwnPropertyDescriptor, n = (s, o, a, i) => {
+const _ = g`*,:before,:after{box-sizing:border-box}:host{--sbb-journey-header-gap: var(--sbb-spacing-fixed-1x);display:block}:host([id]){scroll-margin-block-start:var(--sbb-spacing-fixed-10x)}sbb-title{margin:0}sbb-icon{min-width:var(--sbb-size-icon-ui-small)}.sbb-journey-header{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--sbb-journey-header-gap);width:fit-content}.sbb-journey-header:dir(rtl) sbb-icon{transform:rotate(-180deg)}`;
+var x = Object.defineProperty, j = Object.getOwnPropertyDescriptor, n = (s, o, a, i) => {
   for (var r = i > 1 ? void 0 : i ? j(o, a) : o, b = s.length - 1, l; b >= 0; b--)
     (l = s[b]) && (r = (i ? l(o, a, r) : l(r)) || r);
-  return i && r && $(o, a, r), r;
+  return i && r && x(o, a, r), r;
 };
 const w = /* @__PURE__ */ new Map([
   ["s", "6"],
   ["m", "5"],
   ["l", "4"]
 ]);
-let e = class extends _(m) {
+let e = class extends v(u) {
   constructor() {
-    super(...arguments), this.level = "3", this.size = "m", this._language = new u(this);
+    super(...arguments), this.level = "3", this.size = "m", this._language = new m(this);
   }
   render() {
     const s = this.roundTrip ? "arrows-long-right-left-small" : "arrow-long-right-small";
@@ -30,21 +29,21 @@ let e = class extends _(m) {
         ?negative=${this.negative}
         visual-level=${w.get(this.size)}
       >
-        <span class="sbb-journey-header" dir=${h()}>
+        <span class="sbb-journey-header">
           <span class="sbb-journey-header__origin">
             <sbb-screen-reader-only>
-              ${y[this._language.current]}&nbsp;
+              ${h[this._language.current]}&nbsp;
             </sbb-screen-reader-only>
             ${this.origin}
           </span>
           <sbb-icon name=${s}></sbb-icon>
           <span class="sbb-journey-header__destination">
             <sbb-screen-reader-only>
-              &nbsp;${f[this._language.current]}&nbsp;
+              &nbsp;${y[this._language.current]}&nbsp;
             </sbb-screen-reader-only>
             ${this.destination}
             ${this.roundTrip ? p` <sbb-screen-reader-only>
-                  ${v(this.origin)[this._language.current]}
+                  ${f(this.origin)[this._language.current]}
                 </sbb-screen-reader-only>` : c}
           </span>
         </span>
@@ -52,7 +51,7 @@ let e = class extends _(m) {
     `;
   }
 };
-e.styles = x;
+e.styles = _;
 n([
   t()
 ], e.prototype, "origin", 2);

package/link/block-link-button/block-link-button.d.ts

@@ -1,5 +1,5 @@
 import { SbbButtonBaseElement } from '../../core/base-elements.js';
-declare const SbbBlockLinkButtonElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbBlockLinkCommonElementMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & typeof SbbButtonBaseElement;
+declare const SbbBlockLinkButtonElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbBlockLinkCommonElementMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType & import('../../core/mixins.js').SbbDisabledInteractiveMixinType> & typeof SbbButtonBaseElement;
 /**
  * It displays a link enhanced with the SBB Design, which will behave as a button.
  *

package/link/link-button/link-button.d.ts

@@ -1,5 +1,5 @@
 import { SbbButtonBaseElement } from '../../core/base-elements.js';
-declare const SbbLinkButtonElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbInlineLinkCommonElementMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & typeof SbbButtonBaseElement;
+declare const SbbLinkButtonElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbInlineLinkCommonElementMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType & import('../../core/mixins.js').SbbDisabledInteractiveMixinType> & typeof SbbButtonBaseElement;
 /**
  * It displays a link enhanced with the SBB Design, which will behave as a button.
  *

package/lists.css

@@ -1,17 +1,4 @@
 @charset "UTF-8";
-/**
- * Better font rendering (on OS X)
- * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx
- *
- * Usage:
- *
- * .var_dark_on_light {
- * 	@include font-smoothing;
- * }
- * .var_light_on_dark {
- * 	@include font-smoothing-reset;
- * }
- */
 .sbb-list:where(ol, ul) {
   --sbb-list-vertical-gap: 0.75em;
   --sbb-list-padding-inline-start: 1.5em;