@sbb-esta/lyne-elements 4.0.0-next.1 → 4.0.0-next.3

package/accordion/accordion.component.d.ts

@@ -1,6 +1,6 @@
 import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
-import { SbbTitleLevel } from '../title.js';
-declare const SbbAccordionElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbHydrationMixinType> & typeof LitElement;
+import { SbbTitleLevel } from '../title.ts';
+declare const SbbAccordionElement_base: import('../core/mixins.ts').AbstractConstructor<import('../core/mixins.ts').SbbHydrationMixinType> & typeof LitElement;
 /**
  * It can be used as a container for one or more `sbb-expansion-panel` component.
  *

package/accordion.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './accordion/accordion.component.js';
+export * from './accordion/accordion.component.ts';
 //# sourceMappingURL=accordion.d.ts.map

package/action-group/action-group.component.d.ts

@@ -1,7 +1,7 @@
 import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
-import { SbbButtonSize } from '../button.js';
-import { SbbHorizontalFrom, SbbOrientation } from '../core/interfaces.js';
-import { SbbLinkSize } from '../link.js';
+import { SbbButtonSize } from '../button.ts';
+import { SbbHorizontalFrom, SbbOrientation } from '../core/interfaces.ts';
+import { SbbLinkSize } from '../link.ts';
 /**
  * It can be used as a container for one or more action element, like `sbb-button` or `sbb-block-link`.
  *

package/action-group.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './action-group/action-group.component.js';
+export * from './action-group/action-group.component.ts';
 //# sourceMappingURL=action-group.d.ts.map

package/alert/alert/alert.component.d.ts

@@ -1,6 +1,6 @@
 import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
-import { SbbOpenCloseBaseElement } from '../../core/base-elements.js';
-declare const SbbAlertElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbReadonlyMixinType> & typeof SbbOpenCloseBaseElement;
+import { SbbOpenCloseBaseElement } from '../../core/base-elements.ts';
+declare const SbbAlertElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../../icon.ts').SbbIconNameMixinType> & import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbReadonlyMixinType> & typeof SbbOpenCloseBaseElement;
 /**
  * It displays messages which require user's attention.
  *

package/alert/alert/alert.component.js

@@ -15,11 +15,11 @@ import { boxSizingStyles as N } from "../../core/styles.js";
 import { SbbIconNameMixin as U } from "../../icon.js";
 import "../../button/transparent-button.js";
 import "../../divider.js";
-const Z = E`:host{display:block;--sbb-alert-background-color: var(--sbb-background-color-1-inverted);--sbb-alert-border-radius: var(--sbb-border-radius-4x);--sbb-alert-color: var(--sbb-color-aluminium);--sbb-alert-color: light-dark(var(--sbb-color-aluminium), var(--sbb-color-anthracite));--sbb-alert-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xs);--sbb-alert-icon-size: 1.25rem;--sbb-alert-close-icon-size: var(--sbb-size-icon-ui-small);--sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxs);--sbb-alert-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);--sbb-alert-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-alert-timing-function: ease-in}@media(min-width:64rem){:host{--sbb-alert-icon-size: 1.75rem}}@media(forced-colors:active){:host{outline:var(--sbb-border-width-1x) solid CanvasText;border-radius:var(--sbb-alert-border-radius)}}:host([data-state=opening]:not([animation=open],[animation=all])){--sbb-disable-animation-duration: 0s}:host([data-state=closing]:not([animation=close],[animation=all])){--sbb-disable-animation-duration: 0s}:host([size=s]){--sbb-alert-gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);--sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxxs)}:host([size=l]){--sbb-alert-icon-size: var(--sbb-size-icon-ui-small)}@media(min-width:64rem){:host([size=l]){--sbb-alert-icon-size: 2.125rem}}:host(:not(:is(:state(dark),[state--dark]))){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}.sbb-alert__transition-wrapper{display:grid;grid-template-rows:0fr;opacity:0}:host(:is([data-state=opened],[data-state=closing])) .sbb-alert__transition-wrapper{grid-template-rows:1fr;opacity:1}:host([data-state=opening]) .sbb-alert__transition-wrapper{animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-alert-animation-duration);animation-timing-function:var(--sbb-alert-timing-function);animation-delay:0s,var(--sbb-alert-animation-duration)}:host([data-state=closing]) .sbb-alert__transition-wrapper{animation-name:close-opacity,close;animation-fill-mode:forwards;animation-duration:var(--sbb-alert-animation-duration);animation-timing-function:var(--sbb-alert-timing-function);animation-delay:0s,var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x))}.sbb-alert__transition-sub-wrapper{overflow:hidden}.sbb-alert{--sbb-text-font-size: var(--sbb-font-size-text-s);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);display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--sbb-alert-gap);min-width:fit-content;padding:var(--sbb-alert-padding);overflow:hidden;color:var(--sbb-alert-color);background-color:var(--sbb-alert-background-color);border-radius:var(--sbb-alert-border-radius)}@media(min-width:37.5rem){.sbb-alert{grid-template-columns:auto 1fr auto;align-items:flex-start}}.sbb-alert__icon{display:flex;align-items:start;padding-block:var(--sbb-spacing-fixed-1x);min-width:var(--sbb-alert-icon-size);--sbb-icon-svg-width: var(--sbb-alert-icon-size);--sbb-icon-svg-height: var(--sbb-alert-icon-size)}.sbb-alert__content{color-scheme:only light;order:3;grid-column:1/3}@media(min-width:37.5rem){.sbb-alert__content{order:initial;grid-column-start:initial;grid-column-end:initial}}.sbb-alert__content-slot{display:inline;margin:0;padding:0}.sbb-alert__close-button-wrapper{color-scheme:only light;display:flex;justify-content:flex-end;align-items:center;height:100%}@media(min-width:37.5rem){.sbb-alert__close-button{margin-inline-start:var(--sbb-alert-close-icon-margin)}}.sbb-alert__close-button-divider{display:none}@media(min-width:37.5rem){.sbb-alert__close-button-divider{display:block;height:calc(100% - var(--sbb-spacing-fixed-1x) * 2)}}@keyframes open{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes open-opacity{0%{opacity:0}to{opacity:1}}@keyframes close{0%{grid-template-rows:1fr}to{grid-template-rows:0fr}}@keyframes close-opacity{0%{opacity:1}to{opacity:0}}::slotted(sbb-title){margin:0}`;
+const Z = E`:host{display:block;--sbb-alert-background-color: var(--sbb-background-color-1-inverted);--sbb-alert-border-radius: var(--sbb-border-radius-4x);--sbb-alert-color: var(--sbb-color-aluminium);--sbb-alert-color: light-dark(var(--sbb-color-aluminium), var(--sbb-color-anthracite));--sbb-alert-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xs);--sbb-alert-icon-size: 1.25rem;--sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxs);--sbb-alert-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);--sbb-alert-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-alert-timing-function: ease-in;--sbb-alert-title-margin-block: 0}@media(min-width:64rem){:host{--sbb-alert-icon-size: 1.75rem}}@media(forced-colors:active){:host{outline:var(--sbb-border-width-1x) solid CanvasText;border-radius:var(--sbb-alert-border-radius)}}:host([data-state=opening]:not([animation=open],[animation=all])){--sbb-disable-animation-duration: 0s}:host([data-state=closing]:not([animation=close],[animation=all])){--sbb-disable-animation-duration: 0s}:host([size=s]){--sbb-alert-gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);--sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxxs)}:host([size=l]){--sbb-alert-icon-size: var(--sbb-size-icon-ui-small);--sbb-alert-title-margin-block: 0 var(--sbb-spacing-fixed-1x)}@media(min-width:64rem){:host([size=l]){--sbb-alert-icon-size: 2.125rem}}:host(:not(:is(:state(dark),[state--dark]))){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}.sbb-alert__transition-wrapper{display:grid;grid-template-rows:0fr;opacity:0}:host(:is([data-state=opened],[data-state=closing])) .sbb-alert__transition-wrapper{grid-template-rows:1fr;opacity:1}:host([data-state=opening]) .sbb-alert__transition-wrapper{animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-alert-animation-duration);animation-timing-function:var(--sbb-alert-timing-function);animation-delay:0s,var(--sbb-alert-animation-duration)}:host([data-state=closing]) .sbb-alert__transition-wrapper{animation-name:close-opacity,close;animation-fill-mode:forwards;animation-duration:var(--sbb-alert-animation-duration);animation-timing-function:var(--sbb-alert-timing-function);animation-delay:0s,var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x))}.sbb-alert__transition-sub-wrapper{overflow:hidden}.sbb-alert{--sbb-text-font-size: var(--sbb-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--sbb-alert-gap);min-width:fit-content;padding:var(--sbb-alert-padding);overflow:hidden;color:var(--sbb-alert-color);background-color:var(--sbb-alert-background-color);border-radius:var(--sbb-alert-border-radius)}@media(min-width:37.5rem){.sbb-alert{grid-template-columns:auto 1fr auto;align-items:flex-start}}.sbb-alert__icon{display:flex;align-items:start;padding-block:var(--sbb-spacing-fixed-1x);min-width:var(--sbb-alert-icon-size);--sbb-icon-svg-width: var(--sbb-alert-icon-size);--sbb-icon-svg-height: var(--sbb-alert-icon-size)}.sbb-alert__content{color-scheme:only light;order:3;grid-column:1/3}@media(min-width:37.5rem){.sbb-alert__content{order:initial;grid-column-start:initial;grid-column-end:initial}}.sbb-alert__content-slot{display:inline;margin:0;padding:0}.sbb-alert__close-button-wrapper{color-scheme:only light;display:flex;justify-content:flex-end;align-items:center;height:100%}@media(min-width:37.5rem){.sbb-alert__close-button{margin-inline-start:var(--sbb-alert-close-icon-margin)}}.sbb-alert__close-button-divider{display:none}@media(min-width:37.5rem){.sbb-alert__close-button-divider{display:block;height:calc(100% - var(--sbb-spacing-fixed-1x) * 2)}}@keyframes open{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes open-opacity{0%{opacity:0}to{opacity:1}}@keyframes close{0%{grid-template-rows:1fr}to{grid-template-rows:0fr}}@keyframes close-opacity{0%{opacity:1}to{opacity:0}}::slotted(sbb-title){margin-block:var(--sbb-alert-title-margin-block)}`;
 let Y = (() => {
   var o, l, r;
-  let i = [A("sbb-alert")], e, a = [], n, u = U(T(L)), g, _ = [], f = [], v, y = [], x = [];
-  return r = class extends u {
+  let i = [A("sbb-alert")], e, a = [], n, g = U(T(L)), u, _ = [], f = [], v, y = [], x = [];
+  return r = class extends g {
     constructor() {
       super(...arguments);
       p(this, o);
@@ -125,8 +125,8 @@ let Y = (() => {
     `;
     }
   }, o = new WeakMap(), l = new WeakMap(), n = r, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
-    g = [S({ reflect: !0 })], v = [S({ reflect: !0 })], h(r, null, g, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (s) => "size" in s, get: (s) => s.size, set: (s, d) => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(g[Symbol.metadata] ?? null) : void 0;
+    u = [S({ reflect: !0 })], v = [S({ reflect: !0 })], h(r, null, u, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (s) => "size" in s, get: (s) => s.size, set: (s, d) => {
       s.size = d;
     } }, metadata: t }, _, f), h(r, null, v, { kind: "accessor", name: "animation", static: !1, private: !1, access: { has: (s) => "animation" in s, get: (s) => s.animation, set: (s, d) => {
       s.animation = d;

package/alert/alert-group/alert-group.component.d.ts

@@ -1,6 +1,6 @@
 import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
-import { SbbTitleLevel } from '../../title.js';
-declare const SbbAlertGroupElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbHydrationMixinType> & typeof LitElement;
+import { SbbTitleLevel } from '../../title.ts';
+declare const SbbAlertGroupElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbHydrationMixinType> & typeof LitElement;
 /**
  * It can be used as a container for one or more `sbb-alert` component.
  *

package/alert/alert-group.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './alert-group/alert-group.component.js';
+export * from './alert-group/alert-group.component.ts';
 //# sourceMappingURL=alert-group.d.ts.map

package/alert/alert.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './alert/alert.component.js';
+export * from './alert/alert.component.ts';
 //# sourceMappingURL=alert.d.ts.map

package/alert.d.ts

@@ -1,6 +1,6 @@
 /**
  * @entrypoint
  */
-export * from './alert/alert.js';
-export * from './alert/alert-group.js';
+export * from './alert/alert.ts';
+export * from './alert/alert-group.ts';
 //# sourceMappingURL=alert.d.ts.map

package/autocomplete/autocomplete-base-element.d.ts

@@ -1,7 +1,7 @@
 import { CSSResultGroup, PropertyDeclaration, PropertyValues, TemplateResult } from 'lit';
-import { SbbOpenCloseBaseElement } from '../core/base-elements.js';
-import { SbbOptionBaseElement } from '../option.js';
-declare const SbbAutocompleteBaseElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbNegativeMixinType> & import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbHydrationMixinType> & typeof SbbOpenCloseBaseElement;
+import { SbbOpenCloseBaseElement } from '../core/base-elements.ts';
+import { SbbOptionBaseElement } from '../option.ts';
+declare const SbbAutocompleteBaseElement_base: import('../core/mixins.ts').AbstractConstructor<import('../core/mixins.ts').SbbNegativeMixinType> & import('../core/mixins.ts').AbstractConstructor<import('../core/mixins.ts').SbbHydrationMixinType> & typeof SbbOpenCloseBaseElement;
 export declare abstract class SbbAutocompleteBaseElement<T = string> extends SbbAutocompleteBaseElement_base {
     static styles: CSSResultGroup;
     /**

package/autocomplete/autocomplete-base-element.js

@@ -15,7 +15,7 @@ import { isLean as lt, isZeroAnimationDuration as pt, isSafari as bt } from "../
 import { SbbNegativeMixin as ct, SbbHydrationMixin as ht } from "../core/mixins.js";
 import { isEventOnElement as k, removeAriaComboBoxAttributes as dt, setOverlayPosition as gt, overlayGapFixCorners as ut } from "../core/overlay.js";
 import { boxSizingStyles as vt } from "../core/styles.js";
-const _t = st`.sbb-gap-fix-wrapper{position:relative;overflow:hidden;width:var(--sbb-options-panel-border-radius);height:var(--sbb-options-panel-border-radius);background-color:transparent}.sbb-gap-fix-corner{position:absolute;border-radius:50%;border:calc(var(--sbb-options-panel-border-radius) / 2) solid var(--sbb-options-panel-background-color);width:calc(var(--sbb-options-panel-border-radius) * 3);height:calc(var(--sbb-options-panel-border-radius) * 3);bottom:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}.sbb-gap-fix-corner#left{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host(:dir(rtl)) .sbb-gap-fix-corner#left{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1);left:unset}.sbb-gap-fix-corner#right{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host(:dir(rtl)) .sbb-gap-fix-corner#right{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1);right:unset}:host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color: light-dark( color-mix(in srgb, var(--sbb-color-black) 30%, transparent), color-mix(in srgb, var(--sbb-color-white) 30%, transparent) );--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);--sbb-scrollbar-color-hover: light-dark( color-mix(in srgb, var(--sbb-color-black) 60%, transparent), color-mix(in srgb, var(--sbb-color-white) 60%, transparent) );--sbb-scrollbar-track-color: transparent;--sbb-options-panel-position-x: 0;--sbb-options-panel-position-y: 0;--sbb-options-panel-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-duration, var(--sbb-animation-duration-4x) );--sbb-options-panel-animation-timing-function: ease;--sbb-options-panel-gap-fix-opacity: 0;--sbb-options-panel-gap-fix-transform: none;--sbb-options-panel-gap-fix-top: calc( var(--sbb-options-panel-position-y) - var(--sbb-options-panel-border-radius) );--sbb-options-panel-background-color: var(--sbb-background-color-1);--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x);--sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-focus-outline-color: light-dark( var(--sbb-focus-outline-color-default), var(--sbb-focus-outline-color-dark) );--sbb-options-pointer-events: all;--sbb-options-panel-internal-z-index: var( --sbb-autocomplete-z-index, var(--sbb-overlay-default-z-index) );display:none}:host([size=s]){--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x)}:host([data-state]:not([data-state=closed])){display:block}:host([negative]){--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);--sbb-options-panel-background-color: var(--sbb-background-color-1-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host(:not([data-state])),:host([data-state=closed]){--sbb-options-panel-visibility: hidden;--sbb-options-pointer-events: none}: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) )}:host([preserve-icon-space]){--sbb-option-icon-container-display: block}::slotted(sbb-divider){margin-block:var(--sbb-options-panel-divider-margin-block)}.sbb-autocomplete__container{position:fixed;pointer-events:none;inset:0;z-index:var(--sbb-options-panel-internal-z-index)}.sbb-autocomplete__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-autocomplete__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-autocomplete__panel:before,.sbb-autocomplete__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-autocomplete__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-autocomplete__panel{box-shadow:var(--sbb-box-shadow-level-5-hard)}:host(:is([data-state=opened],[data-state=opening])[negative]) .sbb-autocomplete__panel{box-shadow:var(--sbb-box-shadow-level-5-hard-negative)}:host([data-options-panel-position=below]) .sbb-autocomplete__panel:before{display:block}:host([data-options-panel-position=above]) .sbb-autocomplete__panel:after{display:block}:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless]) .sbb-autocomplete__panel:before,:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless]) .sbb-autocomplete__panel:after{box-shadow:var(--sbb-box-shadow-level-5-hard)}:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless][negative]) .sbb-autocomplete__panel:before,:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless][negative]) .sbb-autocomplete__panel:after{box-shadow:var(--sbb-box-shadow-level-5-hard-negative)}.sbb-autocomplete__wrapper{overflow:hidden}.sbb-autocomplete__options{background-color:var(--sbb-options-panel-background-color);padding-block:var(--sbb-options-panel-padding-block);padding-inline:0;border-radius:var(--sbb-options-panel-options-border-radius);max-height:var(--sbb-options-panel-max-height);min-height:var(--sbb-options-panel-min-height);pointer-events:all;overflow-y:auto;animation-name:var(--sbb-options-panel-animation-name);animation-duration:var(--sbb-options-panel-animation-duration);animation-timing-function:var(--sbb-options-panel-animation-timing-function);--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-autocomplete__options::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-autocomplete__options::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-autocomplete__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-autocomplete__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-autocomplete__options::-webkit-scrollbar-button,.sbb-autocomplete__options::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-autocomplete__options{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-autocomplete__options{pointer-events:var(--sbb-options-pointer-events)}@media(forced-colors:active){.sbb-autocomplete__options{border:var(--sbb-border-width-1x) solid CanvasText;border-top: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}}`, A = bt;
+const _t = st`.sbb-gap-fix-wrapper{position:relative;overflow:hidden;width:var(--sbb-options-panel-border-radius);height:var(--sbb-options-panel-border-radius);background-color:transparent}.sbb-gap-fix-corner{position:absolute;border-radius:50%;border:calc(var(--sbb-options-panel-border-radius) / 2) solid var(--sbb-options-panel-background-color);width:calc(var(--sbb-options-panel-border-radius) * 3);height:calc(var(--sbb-options-panel-border-radius) * 3);bottom:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}.sbb-gap-fix-corner#left{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host(:dir(rtl)) .sbb-gap-fix-corner#left{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1);left:unset}.sbb-gap-fix-corner#right{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host(:dir(rtl)) .sbb-gap-fix-corner#right{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1);right:unset}:host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color: light-dark( color-mix(in srgb, var(--sbb-color-black) 30%, transparent), color-mix(in srgb, var(--sbb-color-white) 30%, transparent) );--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);--sbb-scrollbar-color-hover: light-dark( color-mix(in srgb, var(--sbb-color-black) 60%, transparent), color-mix(in srgb, var(--sbb-color-white) 60%, transparent) );--sbb-scrollbar-track-color: transparent;--sbb-options-panel-position-x: 0;--sbb-options-panel-position-y: 0;--sbb-options-panel-max-height: 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-duration, var(--sbb-animation-duration-4x) );--sbb-options-panel-animation-timing-function: ease;--sbb-options-panel-gap-fix-opacity: 0;--sbb-options-panel-gap-fix-transform: none;--sbb-options-panel-gap-fix-top: calc( var(--sbb-options-panel-position-y) - var(--sbb-options-panel-border-radius) );--sbb-options-panel-background-color: var(--sbb-background-color-1);--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x);--sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-focus-outline-color: light-dark( var(--sbb-focus-outline-color-default), var(--sbb-focus-outline-color-dark) );--sbb-options-pointer-events: all;--sbb-options-panel-internal-z-index: var( --sbb-autocomplete-z-index, var(--sbb-overlay-default-z-index) );display:none}:host([size=s]){--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x)}:host([data-state]:not([data-state=closed])){display:block}:host([negative]){--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);--sbb-options-panel-background-color: var(--sbb-background-color-1-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host(:not([data-state])),:host([data-state=closed]){--sbb-options-panel-visibility: hidden;--sbb-options-pointer-events: none}: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) )}:host([preserve-icon-space]){--sbb-option-icon-container-display: block}::slotted(sbb-divider){margin-block:var(--sbb-options-panel-divider-margin-block)}.sbb-autocomplete__container{position:fixed;pointer-events:none;inset:0;z-index:var(--sbb-options-panel-internal-z-index)}.sbb-autocomplete__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-autocomplete__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-autocomplete__panel:before,.sbb-autocomplete__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-autocomplete__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-autocomplete__panel{box-shadow:var(--sbb-box-shadow-level-5-hard)}:host(:is([data-state=opened],[data-state=opening])[negative]) .sbb-autocomplete__panel{box-shadow:var(--sbb-box-shadow-level-5-hard-negative)}:host([data-options-panel-position=below]) .sbb-autocomplete__panel:before{display:block}:host([data-options-panel-position=above]) .sbb-autocomplete__panel:after{display:block}:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless]) .sbb-autocomplete__panel:before,:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless]) .sbb-autocomplete__panel:after{box-shadow:var(--sbb-box-shadow-level-5-hard)}:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless][negative]) .sbb-autocomplete__panel:before,:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless][negative]) .sbb-autocomplete__panel:after{box-shadow:var(--sbb-box-shadow-level-5-hard-negative)}.sbb-autocomplete__wrapper{overflow:hidden}.sbb-autocomplete__options{background-color:var(--sbb-options-panel-background-color);padding-block:var(--sbb-options-panel-padding-block);padding-inline:0;border-radius:var(--sbb-options-panel-options-border-radius);max-height:var(--sbb-options-panel-max-height);min-height:var(--sbb-options-panel-min-height);pointer-events:all;overflow-y:auto;animation-name:var(--sbb-options-panel-animation-name);animation-duration:var(--sbb-options-panel-animation-duration);animation-timing-function:var(--sbb-options-panel-animation-timing-function);--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-autocomplete__options::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-autocomplete__options::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-autocomplete__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-autocomplete__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-autocomplete__options::-webkit-scrollbar-button,.sbb-autocomplete__options::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-autocomplete__options{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-autocomplete__options{pointer-events:var(--sbb-options-pointer-events)}@media(forced-colors:active){.sbb-autocomplete__options{border:var(--sbb-border-width-1x) solid CanvasText;border-top: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}}`, A = bt;
 let Ft = (() => {
   var d, g, u, v, _, m, f, y, x, n;
   let s = ct(ht(nt)), a, l = [], w = [], C, S = [], z = [], I, P = [], F = [], q, D = [], L = [], U, N = [], W = [], R, M = [], $ = [], T, V = [], j = [], H, Y = [], Z = [], K, B = [], G = [];

package/autocomplete/autocomplete.component.d.ts

@@ -1,5 +1,5 @@
-import { SbbOptionElement } from '../option.js';
-import { SbbAutocompleteBaseElement } from './autocomplete-base-element.js';
+import { SbbOptionElement } from '../option.ts';
+import { SbbAutocompleteBaseElement } from './autocomplete-base-element.ts';
 /**
  * Combined with a native input, it displays a panel with a list of available options.
  *

package/autocomplete/autocomplete.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.component.d.ts","sourceRoot":"","sources":["../../../src/elements/autocomplete/autocomplete.component.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAsB,gBAAgB,EAAwB,MAAM,cAAc,CAAC;AAE/F,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAU5E;;;;;;;GAOG;AACH,qBAEM,sBAAsB,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,0BAA0B,CAAC,CAAC,CAAC;IAC5E,gBAAgC,IAAI,gBAAqC;IACzE,SAAS,CAAC,SAAS,SAAkC;IACrD,SAAS,CAAC,SAAS,SAAa;IAEhC,SAAS,KAAK,OAAO,IAAI,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAE7C;;IAOD,SAAS,CAAC,YAAY,IAAI,IAAI;IAU9B,SAAS,CAAC,8BAA8B,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAqBpE,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAMtD,SAAS,CAAC,mBAAmB,CAAC,KAAK,CAAC,EAAE,aAAa,GAAG,IAAI;IA6B1D,SAAS,CAAC,kBAAkB,IAAI,IAAI;IAMpC,SAAS,CAAC,oBAAoB,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;CAGhE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,kBAAkB,EAAE,sBAAsB,CAAC;KAC5C;CACF"}
+{"version":3,"file":"autocomplete.component.d.ts","sourceRoot":"","sources":["../../../src/elements/autocomplete/autocomplete.component.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAsB,gBAAgB,EAAwB,MAAM,cAAc,CAAC;AAE/F,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAU5E;;;;;;;GAOG;AACH,qBAEM,sBAAsB,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,0BAA0B,CAAC,CAAC,CAAC;IAC5E,gBAAgC,IAAI,gBAAqC;IACzE,SAAS,CAAC,SAAS,SAAkC;IACrD,SAAS,CAAC,SAAS,SAAa;IAEhC,SAAS,KAAK,OAAO,IAAI,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAE7C;;IAOD,SAAS,CAAC,YAAY,IAAI,IAAI;IAU9B,SAAS,CAAC,8BAA8B,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAqBpE,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAMtD,SAAS,CAAC,mBAAmB,CAAC,KAAK,CAAC,EAAE,aAAa,GAAG,IAAI;IA2B1D,SAAS,CAAC,kBAAkB,IAAI,IAAI;IAMpC,SAAS,CAAC,oBAAoB,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;CAGhE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,kBAAkB,EAAE,sBAAsB,CAAC;KAC5C;CACF"}

package/autocomplete/autocomplete.component.js

@@ -1,20 +1,20 @@
-import { __esDecorate as u, __runInitializers as h } from "tslib";
-import { customElement as d } from "lit/decorators.js";
-import { getNextElementIndex as m } from "../core/a11y.js";
+import { __esDecorate as h, __runInitializers as m } from "tslib";
+import { customElement as u } from "lit/decorators.js";
+import { getNextElementIndex as d } from "../core/a11y.js";
 import { isSafari as v } from "../core/dom.js";
 import { setAriaComboBoxAttributes as f } from "../core/overlay.js";
 import { SbbAutocompleteBaseElement as A } from "./autocomplete-base-element.js";
-let g = 0;
-const l = v;
+let O = 0;
+const n = v;
 let _ = (() => {
   var i;
-  let c = [d("sbb-autocomplete")], a, o = [], e, r = A;
+  let l = [u("sbb-autocomplete")], a, o = [], e, r = A;
   return i = class extends r {
     get options() {
       return Array.from(this.querySelectorAll?.("sbb-option") ?? []);
     }
     constructor() {
-      super(), this.overlayId = `sbb-autocomplete-${++g}`, this.panelRole = "listbox", this.addEventListener?.("optionselected", (t) => this.onOptionSelected(t));
+      super(), this.overlayId = `sbb-autocomplete-${++O}`, this.panelRole = "listbox", this.addEventListener?.("optionselected", (t) => this.onOptionSelected(t));
     }
     syncNegative() {
       this.querySelectorAll?.("sbb-divider, sbb-option-hint").forEach((t) => t.negative = this.negative), this.querySelectorAll?.("sbb-option, sbb-optgroup").forEach((t) => t.toggleAttribute("data-negative", this.negative));
@@ -38,24 +38,24 @@ let _ = (() => {
       t.preventDefault(), this.activeOption?.selectViaUserInteraction(!0);
     }
     setNextActiveOption(t) {
-      const s = this.options.filter((n) => !n.disabled && !n.hasAttribute("data-group-disabled"));
+      const s = this.options.filter((b) => !b.matches(":state(disabled)"));
       if (this.activeOption?.setActive(!1), this.triggerElement?.removeAttribute("aria-activedescendant"), !s.length) {
         this.activeOption = null;
         return;
       }
-      const b = this.activeOption ? s.indexOf(this.activeOption) : -1, p = m(t, b, s.length);
+      const c = this.activeOption ? s.indexOf(this.activeOption) : -1, p = d(t, c, s.length);
       this.activeOption = s[p], this.activeOption.setActive(!0), this.triggerElement?.setAttribute("aria-activedescendant", this.activeOption.id), this.activeOption.scrollIntoView({ block: "nearest" }), this.autoSelectActiveOption && this.onOptionArrowsSelected(this.activeOption);
     }
     resetActiveElement() {
       this.activeOption?.setActive(!1), this.triggerElement?.removeAttribute("aria-activedescendant"), this.activeOption = null;
     }
     setTriggerAttributes(t) {
-      f(t, l ? this.id : this.overlayId, !1);
+      f(t, n ? this.id : this.overlayId, !1);
     }
   }, e = i, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
-    u(null, a = { value: e }, c, { kind: "class", name: e.name, metadata: t }, null, o), e = a.value, t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), i.role = l ? "listbox" : null, h(e, o), e;
+    h(null, a = { value: e }, l, { kind: "class", name: e.name, metadata: t }, null, o), e = a.value, t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), i.role = n ? "listbox" : null, m(e, o), e;
 })();
 export {
   _ as SbbAutocompleteElement

package/autocomplete.d.ts

@@ -1,6 +1,6 @@
 /**
  * @entrypoint
  */
-export * from './autocomplete/autocomplete.component.js';
-export * from './autocomplete/autocomplete-base-element.js';
+export * from './autocomplete/autocomplete.component.ts';
+export * from './autocomplete/autocomplete-base-element.ts';
 //# sourceMappingURL=autocomplete.d.ts.map

package/badge.css

@@ -3,11 +3,11 @@
   position: relative;
 }
 [sbb-badge]::after {
-  --sbb-text-font-size: var(--sbb-font-size-text-xxs);
+  --sbb-text-font-size: var(--sbb-text-font-size-xxs);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
   font-weight: bold;
   display: flex;

package/breadcrumb/breadcrumb/breadcrumb.component.d.ts

@@ -1,6 +1,6 @@
 import { CSSResultGroup, TemplateResult } from 'lit';
-import { SbbLinkBaseElement } from '../../core/base-elements.js';
-declare const SbbBreadcrumbElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbHydrationMixinType> & typeof SbbLinkBaseElement;
+import { SbbLinkBaseElement } from '../../core/base-elements.ts';
+declare const SbbBreadcrumbElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../../icon.ts').SbbIconNameMixinType> & import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbHydrationMixinType> & typeof SbbLinkBaseElement;
 /**
  * It displays a link to a page; used within a `sbb-breadcrumb-group` it can display the path to the current page.
  *

package/breadcrumb/breadcrumb/breadcrumb.component.js

@@ -1,15 +1,15 @@
 import { __esDecorate as l, __runInitializers as i } from "tslib";
 import { customElement as c } from "lit/decorators.js";
 import { html as n } from "lit/static-html.js";
-import { SbbLinkBaseElement as d } from "../../core/base-elements.js";
-import { SbbHydrationMixin as m } from "../../core/mixins.js";
+import { SbbLinkBaseElement as m } from "../../core/base-elements.js";
+import { SbbHydrationMixin as d } from "../../core/mixins.js";
 import { boxSizingStyles as u } from "../../core/styles.js";
 import { SbbIconNameMixin as f } from "../../icon.js";
 import { css as v } from "lit";
-const h = v`:host{display:flex;--sbb-breadcrumb-color: var(--sbb-color-granite);--sbb-breadcrumb-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium))}@media(any-hover:hover){:host(:hover){--sbb-breadcrumb-color: var(--sbb-color-charcoal);--sbb-breadcrumb-color: light-dark(var(--sbb-color-charcoal), var(--sbb-color-smoke))}}:host(:is(:active,[data-active])){--sbb-breadcrumb-color: var(--sbb-color-anthracite);--sbb-breadcrumb-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud))}.sbb-breadcrumb{--sbb-link-text-decoration-line: none;--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);color:var(--sbb-link-color-normal);text-decoration-line:var(--sbb-link-text-decoration-line, underline);text-decoration-thickness:.0625rem;text-underline-offset:.3125em;-webkit-user-select:none;user-select:none}@media(forced-colors:active){.sbb-breadcrumb{text-decoration:underline}}.sbb-breadcrumb{display:flex;cursor:var(--sbb-cursor-pointer);gap:var(--sbb-spacing-fixed-2x);color:var(--sbb-breadcrumb-color);align-items:center;overflow:hidden;outline:none}@media(forced-colors:active){.sbb-breadcrumb{--sbb-breadcrumb-color: ButtonText}}.sbb-breadcrumb:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:var(--sbb-border-radius-2x)}.sbb-breadcrumb__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:not(:is(:state(slotted),[state--slotted]))) .sbb-breadcrumb__label{display:none}slot[name=icon] .sbb-breadcrumb__icon,slot[name=icon] ::slotted(*){flex-shrink:0}`;
+const h = v`:host{display:flex;--sbb-breadcrumb-color: var(--sbb-color-granite);--sbb-breadcrumb-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium))}@media(any-hover:hover){:host(:hover){--sbb-breadcrumb-color: var(--sbb-color-charcoal);--sbb-breadcrumb-color: light-dark(var(--sbb-color-charcoal), var(--sbb-color-smoke))}}:host(:is(:active,[data-active])){--sbb-breadcrumb-color: var(--sbb-color-anthracite);--sbb-breadcrumb-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud))}.sbb-breadcrumb{--sbb-link-text-decoration-line: none;--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);color:var(--sbb-link-color-normal);text-decoration-line:var(--sbb-link-text-decoration-line, underline);text-decoration-thickness:.0625rem;text-underline-offset:.3125em;-webkit-user-select:none;user-select:none}@media(forced-colors:active){.sbb-breadcrumb{text-decoration:underline}}.sbb-breadcrumb{display:flex;cursor:var(--sbb-cursor-pointer);gap:var(--sbb-spacing-fixed-2x);color:var(--sbb-breadcrumb-color);align-items:center;overflow:hidden;outline:none}@media(forced-colors:active){.sbb-breadcrumb{--sbb-breadcrumb-color: ButtonText}}.sbb-breadcrumb:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:var(--sbb-border-radius-2x)}.sbb-breadcrumb__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:not(:is(:state(slotted),[state--slotted]))) .sbb-breadcrumb__label{display:none}slot[name=icon] .sbb-breadcrumb__icon,slot[name=icon] ::slotted(*){flex-shrink:0}`;
 let z = (() => {
   var r;
-  let s = [c("sbb-breadcrumb")], o, b = [], e, a = f(m(d));
+  let s = [c("sbb-breadcrumb")], o, b = [], e, a = f(d(m));
   return r = class extends a {
     renderTemplate() {
       return n`

package/breadcrumb/breadcrumb-group/breadcrumb-group.component.d.ts

@@ -1,7 +1,7 @@
 import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
-import { WithListChildren } from '../../core/mixins.js';
-import { SbbBreadcrumbElement } from '../breadcrumb.js';
-declare const SbbBreadcrumbGroupElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbNamedSlotListMixinType<SbbBreadcrumbElement>> & typeof LitElement;
+import { WithListChildren } from '../../core/mixins.ts';
+import { SbbBreadcrumbElement } from '../breadcrumb.ts';
+declare const SbbBreadcrumbGroupElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbNamedSlotListMixinType<SbbBreadcrumbElement>> & typeof LitElement;
 /**
  * It can be used as a container for one or more `sbb-breadcrumb` component.
  *

package/breadcrumb/breadcrumb-group/breadcrumb-group.component.js

@@ -9,10 +9,10 @@ import { i18nBreadcrumbEllipsisButtonLabel as I } from "../../core/i18n.js";
 import { SbbNamedSlotListMixin as A, SbbElementInternalsMixin as B } from "../../core/mixins.js";
 import { boxSizingStyles as D } from "../../core/styles.js";
 import "../../icon.js";
-const N = v`:host{--sbb-breadcrumb-group-wrap: nowrap;--sbb-breadcrumb-group-visibility: hidden;--sbb-breadcrumb-group-ellipsis-color: var(--sbb-color-granite);--sbb-breadcrumb-group-ellipsis-color: light-dark( var(--sbb-color-granite), var(--sbb-color-cloud) );--sbb-breadcrumb-group-ellipsis-background-color: transparent;--sbb-breadcrumb-group-ellipsis-border-width: var(--sbb-border-width-1x);--sbb-breadcrumb-group-ellipsis-border-color: var(--sbb-color-silver);--sbb-breadcrumb-group-ellipsis-border-color: light-dark( var(--sbb-color-silver), var(--sbb-color-anthracite) );display:block}:host([data-loaded]){--sbb-breadcrumb-group-visibility: visible}:host([data-state]){--sbb-breadcrumb-group-wrap: wrap}.sbb-breadcrumb-group{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:var(--sbb-breadcrumb-group-wrap);column-gap:var(--sbb-spacing-fixed-1x);visibility:var(--sbb-breadcrumb-group-visibility)}.sbb-breadcrumb-group__item{flex:0 0 auto;display:flex;column-gap:var(--sbb-spacing-fixed-1x)}.sbb-breadcrumb-group__divider-icon{color:var(--sbb-breadcrumb-group-ellipsis-color)}#sbb-breadcrumb-ellipsis{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--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);line-height:0;letter-spacing:.01em;width:var(--sbb-size-icon-ui-small);height:var(--sbb-size-icon-ui-small);border:var(--sbb-breadcrumb-group-ellipsis-border-width) solid var(--sbb-breadcrumb-group-ellipsis-border-color);border-radius:50%;padding-block-end:.5em;cursor:var(--sbb-cursor-pointer);color:var(--sbb-breadcrumb-group-ellipsis-color);background-color:var(--sbb-breadcrumb-group-ellipsis-background-color);overflow:hidden}@media(forced-colors:active){#sbb-breadcrumb-ellipsis{--sbb-breadcrumb-group-ellipsis-border-width: var(--sbb-border-width-2x);--sbb-breadcrumb-group-ellipsis-border-color: CanvasText}}@media(any-hover:hover){#sbb-breadcrumb-ellipsis:hover{--sbb-breadcrumb-group-ellipsis-color: var(--sbb-color-2);--sbb-breadcrumb-group-ellipsis-background-color: var(--sbb-background-color-3)}}@media(any-hover:hover)and (forced-colors:active){#sbb-breadcrumb-ellipsis:hover{--sbb-breadcrumb-group-ellipsis-border-color: Highlight}}#sbb-breadcrumb-ellipsis:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}`, p = 3;
+const N = v`:host{--sbb-breadcrumb-group-wrap: nowrap;--sbb-breadcrumb-group-visibility: hidden;--sbb-breadcrumb-group-ellipsis-color: var(--sbb-color-granite);--sbb-breadcrumb-group-ellipsis-color: light-dark( var(--sbb-color-granite), var(--sbb-color-cloud) );--sbb-breadcrumb-group-ellipsis-background-color: transparent;--sbb-breadcrumb-group-ellipsis-border-width: var(--sbb-border-width-1x);--sbb-breadcrumb-group-ellipsis-border-color: var(--sbb-color-silver);--sbb-breadcrumb-group-ellipsis-border-color: light-dark( var(--sbb-color-silver), var(--sbb-color-anthracite) );display:block}:host([data-loaded]){--sbb-breadcrumb-group-visibility: visible}:host([data-state]){--sbb-breadcrumb-group-wrap: wrap}.sbb-breadcrumb-group{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:var(--sbb-breadcrumb-group-wrap);column-gap:var(--sbb-spacing-fixed-1x);visibility:var(--sbb-breadcrumb-group-visibility)}.sbb-breadcrumb-group__item{flex:0 0 auto;display:flex;column-gap:var(--sbb-spacing-fixed-1x)}.sbb-breadcrumb-group__divider-icon{color:var(--sbb-breadcrumb-group-ellipsis-color)}#sbb-breadcrumb-ellipsis{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--sbb-text-font-size: var(--sbb-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);line-height:0;letter-spacing:.01em;width:var(--sbb-size-icon-ui-small);height:var(--sbb-size-icon-ui-small);border:var(--sbb-breadcrumb-group-ellipsis-border-width) solid var(--sbb-breadcrumb-group-ellipsis-border-color);border-radius:50%;padding-block-end:.5em;cursor:var(--sbb-cursor-pointer);color:var(--sbb-breadcrumb-group-ellipsis-color);background-color:var(--sbb-breadcrumb-group-ellipsis-background-color);overflow:hidden}@media(forced-colors:active){#sbb-breadcrumb-ellipsis{--sbb-breadcrumb-group-ellipsis-border-width: var(--sbb-border-width-2x);--sbb-breadcrumb-group-ellipsis-border-color: CanvasText}}@media(any-hover:hover){#sbb-breadcrumb-ellipsis:hover{--sbb-breadcrumb-group-ellipsis-color: var(--sbb-color-2);--sbb-breadcrumb-group-ellipsis-background-color: var(--sbb-background-color-3)}}@media(any-hover:hover)and (forced-colors:active){#sbb-breadcrumb-ellipsis:hover{--sbb-breadcrumb-group-ellipsis-border-color: Highlight}}#sbb-breadcrumb-ellipsis:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}`, p = 3;
 let P = (() => {
   var s;
-  let m = [y("sbb-breadcrumb-group")], a, o = [], t, b = A(B(f)), n = [], d;
+  let m = [y("sbb-breadcrumb-group")], a, o = [], t, b = A(B(f)), n = [], c;
   return s = class extends b {
     /** The state of the breadcrumb group. */
     set _state(e) {
@@ -61,7 +61,7 @@ let P = (() => {
       this._focusNext(e, r);
     }
     _focusNext(e, r = this.listChildren) {
-      const i = r.findIndex((c) => c === document.activeElement || c === this.shadowRoot.activeElement), g = S(e, i, r.length);
+      const i = r.findIndex((d) => d === document.activeElement || d === this.shadowRoot.activeElement), g = S(e, i, r.length);
       r[g]?.focus(), e.preventDefault();
     }
     /**
@@ -125,7 +125,7 @@ let P = (() => {
     }
   }, t = s, (() => {
     const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
-    d = [C()], u(s, null, d, { kind: "setter", name: "_state", static: !1, private: !1, access: { has: (r) => "_state" in r, set: (r, i) => {
+    c = [C()], u(s, null, c, { kind: "setter", name: "_state", static: !1, private: !1, access: { has: (r) => "_state" in r, set: (r, i) => {
       r._state = i;
     } }, metadata: e }, null, n), u(null, a = { value: t }, m, { kind: "class", name: t.name, metadata: e }, null, o), t = a.value, e && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
   })(), s.role = "navigation", s.styles = [D, N], h(t, o), t;

package/breadcrumb/breadcrumb-group.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './breadcrumb-group/breadcrumb-group.component.js';
+export * from './breadcrumb-group/breadcrumb-group.component.ts';
 //# sourceMappingURL=breadcrumb-group.d.ts.map

package/breadcrumb/breadcrumb.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './breadcrumb/breadcrumb.component.js';
+export * from './breadcrumb/breadcrumb.component.ts';
 //# sourceMappingURL=breadcrumb.d.ts.map

package/breadcrumb.d.ts

@@ -1,6 +1,6 @@
 /**
  * @entrypoint
  */
-export * from './breadcrumb/breadcrumb.js';
-export * from './breadcrumb/breadcrumb-group.js';
+export * from './breadcrumb/breadcrumb.ts';
+export * from './breadcrumb/breadcrumb-group.ts';
 //# sourceMappingURL=breadcrumb.d.ts.map

package/button/accent-button/accent-button.component.d.ts

@@ -1,6 +1,6 @@
 import { CSSResultGroup } from 'lit';
-import { SbbButtonBaseElement } from '../../core/base-elements.js';
-declare const SbbAccentButtonElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbButtonCommonElementMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType & import('../../core/mixins.js').SbbDisabledInteractiveMixinType> & typeof SbbButtonBaseElement;
+import { SbbButtonBaseElement } from '../../core/base-elements.ts';
+declare const SbbAccentButtonElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../common.ts').SbbButtonCommonElementMixinType> & import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbDisabledMixinType & import('../../core/mixins.ts').SbbDisabledInteractiveMixinType> & typeof SbbButtonBaseElement;
 /**
  * It displays a button enhanced with the SBB Design in the 'accent' variant.
  *

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

@@ -1,6 +1,6 @@
 import { CSSResultGroup } from 'lit';
-import { SbbLinkBaseElement } from '../../core/base-elements.js';
-declare const SbbAccentButtonLinkElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbButtonCommonElementMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledInteractiveMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & typeof SbbLinkBaseElement;
+import { SbbLinkBaseElement } from '../../core/base-elements.ts';
+declare const SbbAccentButtonLinkElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../common.ts').SbbButtonCommonElementMixinType> & import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbDisabledInteractiveMixinType> & import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbDisabledMixinType> & typeof SbbLinkBaseElement;
 /**
  * It displays a button enhanced with the SBB Design in the 'accent' variant, which will behave as a link.
  *

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

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './accent-button-link/accent-button-link.component.js';
+export * from './accent-button-link/accent-button-link.component.ts';
 //# sourceMappingURL=accent-button-link.d.ts.map

package/button/accent-button-static/accent-button-static.component.d.ts

@@ -1,6 +1,6 @@
 import { CSSResultGroup } from 'lit';
-import { SbbActionBaseElement } from '../../core/base-elements.js';
-declare const SbbAccentButtonStaticElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbButtonCommonElementMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & typeof SbbActionBaseElement;
+import { SbbActionBaseElement } from '../../core/base-elements.ts';
+declare const SbbAccentButtonStaticElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../common.ts').SbbButtonCommonElementMixinType> & import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbDisabledMixinType> & typeof SbbActionBaseElement;
 /**
  * It displays a static button enhanced with the SBB Design in the 'accent' variant.
  *

package/button/accent-button-static.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './accent-button-static/accent-button-static.component.js';
+export * from './accent-button-static/accent-button-static.component.ts';
 //# sourceMappingURL=accent-button-static.d.ts.map

package/button/accent-button.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './accent-button/accent-button.component.js';
+export * from './accent-button/accent-button.component.ts';
 //# sourceMappingURL=accent-button.d.ts.map

package/button/button/button.component.d.ts

@@ -1,6 +1,6 @@
 import { CSSResultGroup } from 'lit';
-import { SbbButtonBaseElement } from '../../core/base-elements.js';
-declare const SbbButtonElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbButtonCommonElementMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType & import('../../core/mixins.js').SbbDisabledInteractiveMixinType> & typeof SbbButtonBaseElement;
+import { SbbButtonBaseElement } from '../../core/base-elements.ts';
+declare const SbbButtonElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../common.ts').SbbButtonCommonElementMixinType> & import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbDisabledMixinType & import('../../core/mixins.ts').SbbDisabledInteractiveMixinType> & typeof SbbButtonBaseElement;
 /**
  * It displays a button enhanced with the SBB Design in the 'primary' variant.
  *

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

@@ -1,6 +1,6 @@
 import { CSSResultGroup } from 'lit';
-import { SbbLinkBaseElement } from '../../core/base-elements.js';
-declare const SbbButtonLinkElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbButtonCommonElementMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledInteractiveMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & typeof SbbLinkBaseElement;
+import { SbbLinkBaseElement } from '../../core/base-elements.ts';
+declare const SbbButtonLinkElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../common.ts').SbbButtonCommonElementMixinType> & import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbDisabledInteractiveMixinType> & import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbDisabledMixinType> & typeof SbbLinkBaseElement;
 /**
  * It displays a button enhanced with the SBB Design in the 'primary' variant, which will behave as a link.
  *

package/button/button-link.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './button-link/button-link.component.js';
+export * from './button-link/button-link.component.ts';
 //# sourceMappingURL=button-link.d.ts.map

package/button/button-static/button-static.component.d.ts

@@ -1,6 +1,6 @@
 import { CSSResultGroup } from 'lit';
-import { SbbActionBaseElement } from '../../core/base-elements.js';
-declare const SbbButtonStaticElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbButtonCommonElementMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & typeof SbbActionBaseElement;
+import { SbbActionBaseElement } from '../../core/base-elements.ts';
+declare const SbbButtonStaticElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../common.ts').SbbButtonCommonElementMixinType> & import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbDisabledMixinType> & typeof SbbActionBaseElement;
 /**
  * It displays a static button enhanced with the SBB Design in the 'primary' variant.
  *

package/button/button-static.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './button-static/button-static.component.js';
+export * from './button-static/button-static.component.ts';
 //# sourceMappingURL=button-static.d.ts.map

package/button/button.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './button/button.component.js';
+export * from './button/button.component.ts';
 //# sourceMappingURL=button.d.ts.map

package/button/common/button-common.d.ts

@@ -1,7 +1,7 @@
-import { SbbActionBaseElement } from '../../core/base-elements.js';
-import { AbstractConstructor } from '../../core/mixins.js';
+import { SbbActionBaseElement } from '../../core/base-elements.ts';
+import { AbstractConstructor } from '../../core/mixins.ts';
 export type SbbButtonSize = 'l' | 'm' | 's';
-declare const SbbButtonCommonElementMixinType_base: AbstractConstructor<import('../../core/mixins.js').SbbNegativeMixinType> & AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & typeof SbbActionBaseElement;
+declare const SbbButtonCommonElementMixinType_base: AbstractConstructor<import('../../core/mixins.ts').SbbNegativeMixinType> & AbstractConstructor<import('../../icon.ts').SbbIconNameMixinType> & typeof SbbActionBaseElement;
 export declare class SbbButtonCommonElementMixinType extends SbbButtonCommonElementMixinType_base {
     accessor size: SbbButtonSize;
     accessor loading: boolean;

package/button/common.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './common/button-common.js';
+export * from './common/button-common.ts';
 //# sourceMappingURL=common.d.ts.map

package/button/common.js

@@ -1,5 +1,5 @@
 import { SbbButtonCommonElementMixin as o } from "./common/button-common.js";
-import { a, b as m, p as r, s as b, t as s, m as y } from "../mini-button-common-DBnJfrBZ.js";
+import { a, b as m, p as r, s as b, t as s, m as y } from "../mini-button-common-C3-aFB4L.js";
 export {
   o as SbbButtonCommonElementMixin,
   a as buttonAccentStyle,

package/button/mini-button/mini-button.component.d.ts

@@ -1,6 +1,6 @@
 import { CSSResultGroup, TemplateResult } from 'lit';
-import { SbbButtonBaseElement } from '../../core/base-elements.js';
-declare const SbbMiniButtonElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType & import('../../core/mixins.js').SbbDisabledInteractiveMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbNegativeMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & typeof SbbButtonBaseElement;
+import { SbbButtonBaseElement } from '../../core/base-elements.ts';
+declare const SbbMiniButtonElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbDisabledMixinType & import('../../core/mixins.ts').SbbDisabledInteractiveMixinType> & import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbNegativeMixinType> & import('../../core/mixins.ts').AbstractConstructor<import('../../icon.ts').SbbIconNameMixinType> & typeof SbbButtonBaseElement;
 /**
  * It displays an icon-only button enhanced with the SBB Design;
  * it's meant to be used mainly within the sbb-form-field in prefix/suffix slot.

package/button/mini-button/mini-button.component.js

@@ -7,7 +7,7 @@ import { boxSizingStyles as d } from "../../core/styles.js";
 import { SbbIconNameMixin as f } from "../../icon.js";
 import { miniButtonStyle as h } from "../common.js";
 import { css as g } from "lit";
-const v = g`:host{--sbb-mini-button-gap: .125rem;--sbb-mini-button-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-mini-button-label-display: block;--sbb-mini-button-label-height: var(--sbb-size-icon-ui-small)}:host(:where(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))){--sbb-mini-button-padding-inline: 0;--sbb-mini-button-label-display: none;--sbb-mini-button-label-height: unset}.sbb-mini-button{height:var(--sbb-mini-button-label-height);gap:var(--sbb-mini-button-gap);align-items:center;justify-content:center;padding-inline:var(--sbb-mini-button-padding-inline)}.sbb-mini-button__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--sbb-font-size-text-xxs);letter-spacing:var(--sbb-typo-letter-spacing-body-text);display:var(--sbb-mini-button-label-display);transition:translate var(--sbb-mini-button-transition-duration) var(--sbb-mini-button-transition-easing-function);translate:0 var(--sbb-mini-button-translate-y-content-hover, 0)}`;
+const v = g`:host{--sbb-mini-button-gap: .125rem;--sbb-mini-button-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-mini-button-label-display: block;--sbb-mini-button-label-height: var(--sbb-size-icon-ui-small)}:host(:where(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))){--sbb-mini-button-padding-inline: 0;--sbb-mini-button-label-display: none;--sbb-mini-button-label-height: unset}.sbb-mini-button{height:var(--sbb-mini-button-label-height);gap:var(--sbb-mini-button-gap);align-items:center;justify-content:center;padding-inline:var(--sbb-mini-button-padding-inline)}.sbb-mini-button__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--sbb-text-font-size-xxs);letter-spacing:var(--sbb-typo-letter-spacing-text);display:var(--sbb-mini-button-label-display);transition:translate var(--sbb-mini-button-transition-duration) var(--sbb-mini-button-transition-easing-function);translate:0 var(--sbb-mini-button-translate-y-content-hover, 0)}`;
 let E = (() => {
   var i;
   let b = [r("sbb-mini-button")], n, s = [], t, a = c(p(f(u)));