@sbb-esta/lyne-elements 3.6.0 → 3.8.0

package/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.component.js

@@ -1,14 +1,14 @@
-import { __esDecorate as s, __runInitializers as c } from "tslib";
+import { __esDecorate as c, __runInitializers as s } from "tslib";
 import { css as i, LitElement as d, html as n } from "lit";
 import { customElement as u } from "lit/decorators.js";
-import { SbbElementInternalsMixin as m } from "../../core/mixins.js";
-const p = i`*,:before,:after{box-sizing:border-box}:host{--sbb-autocomplete-grid-row-color: var(--sbb-color-charcoal);--sbb-autocomplete-grid-row-background-color: inherit;--sbb-autocomplete-grid-row-background-color-hover: var(--sbb-color-milk);--sbb-autocomplete-grid-row-background-color-active: var(--sbb-color-cloud);--sbb-autocomplete-grid-row-disabled-border-color: var(--sbb-color-graphite);--sbb-autocomplete-grid-row-disabled-background-color: var(--sbb-color-milk);--sbb-autocomplete-grid-row-padding-inline-end: var(--sbb-spacing-responsive-xxxs);--sbb-autocomplete-grid-row-justify-content: space-between;--sbb-autocomplete-grid-row-min-height: var(--sbb-size-button-m-min-height);--sbb-autocomplete-grid-row-cursor: pointer;--sbb-autocomplete-grid-row-border-radius: var(--sbb-border-radius-4x);--sbb-autocomplete-grid-row-icon-color: var(--sbb-color-metal);display:block}:host([data-negative]){--sbb-autocomplete-grid-row-color: var(--sbb-color-milk);--sbb-autocomplete-grid-row-icon-color: var(--sbb-color-smoke);--sbb-autocomplete-grid-row-background-color-hover: var(--sbb-color-charcoal);--sbb-autocomplete-grid-row-background-color-active: var(--sbb-color-iron);--sbb-autocomplete-grid-row-disabled-border-color: var(--sbb-color-smoke);--sbb-autocomplete-grid-row-disabled-background-color: var(--sbb-color-charcoal);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}@media (any-hover: hover){:host(:hover:not([data-disabled])){--sbb-autocomplete-grid-row-background-color: var( --sbb-autocomplete-grid-row-background-color-hover )}}:host([data-disabled]){--sbb-autocomplete-grid-row-cursor: default}@media (forced-colors: active){:host([data-disabled]){--sbb-autocomplete-grid-row-color: GrayText}}::slotted(sbb-autocomplete-grid-option){flex:1 1 auto;margin-right:calc(-1 * var(--sbb-spacing-fixed-2x))}.sbb-autocomplete-grid-row{display:flex;align-items:center;padding-inline-end:var(--sbb-autocomplete-grid-row-padding-inline-end);justify-content:var(--sbb-autocomplete-grid-row-justify-content);gap:var(--sbb-spacing-fixed-6x);color:var(--sbb-autocomplete-grid-row-color);background-color:var(--sbb-autocomplete-grid-row-background-color);cursor:var(--sbb-autocomplete-grid-row-cursor);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--sbb-autocomplete-grid-row-color)}:host([data-disabled]) .sbb-autocomplete-grid-row{position:relative;z-index:0}:host([data-disabled]) .sbb-autocomplete-grid-row:before{content:"";display:block;position:absolute;inset:.375rem;border:var(--sbb-border-width-1x) dashed var(--sbb-autocomplete-grid-row-disabled-border-color);border-radius:var(--sbb-border-radius-2x);background-color:var(--sbb-autocomplete-grid-row-disabled-background-color);z-index:-1}@media (forced-colors: active){:host([data-disabled]) .sbb-autocomplete-grid-row:before{border-color:GrayText}}`;
-let g = 0, k = (() => {
+import { SbbElementInternalsMixin as g } from "../../core/mixins.js";
+const m = i`*,:before,:after{box-sizing:border-box}:host{--sbb-autocomplete-grid-row-color: var(--sbb-color-3);--sbb-autocomplete-grid-row-background-color: inherit;--sbb-autocomplete-grid-row-background-color-hover: var(--sbb-background-color-3);--sbb-autocomplete-grid-row-background-color-active: var(--sbb-background-color-4);--sbb-autocomplete-grid-row-disabled-border-color: var(--sbb-color-graphite);--sbb-autocomplete-grid-row-disabled-border-color: light-dark( var(--sbb-color-graphite), var(--sbb-color-smoke) );--sbb-autocomplete-grid-row-disabled-background-color: var(--sbb-background-color-3);--sbb-autocomplete-grid-row-padding-inline-end: var(--sbb-spacing-responsive-xxxs);--sbb-autocomplete-grid-row-justify-content: space-between;--sbb-autocomplete-grid-row-min-height: var(--sbb-size-button-m-min-height);--sbb-autocomplete-grid-row-cursor: pointer;--sbb-autocomplete-grid-row-border-radius: var(--sbb-border-radius-4x);--sbb-autocomplete-grid-row-icon-color: var(--sbb-color-metal);--sbb-autocomplete-grid-row-icon-color: light-dark( var(--sbb-color-metal), var(--sbb-color-smoke) );display:block}:host([data-negative]){--sbb-autocomplete-grid-row-color: var(--sbb-color-3-negative);--sbb-autocomplete-grid-row-icon-color: var(--sbb-color-5);--sbb-autocomplete-grid-row-background-color-hover: var(--sbb-background-color-3-negative);--sbb-autocomplete-grid-row-background-color-active: var(--sbb-background-color-4-negative);--sbb-autocomplete-grid-row-disabled-border-color: var(--sbb-border-color-5);--sbb-autocomplete-grid-row-disabled-background-color: var(--sbb-background-color-3-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}@media (any-hover: hover){:host(:hover:not([data-disabled])){--sbb-autocomplete-grid-row-background-color: var( --sbb-autocomplete-grid-row-background-color-hover )}}:host([data-disabled]){--sbb-autocomplete-grid-row-cursor: default}@media (forced-colors: active){:host([data-disabled]){--sbb-autocomplete-grid-row-color: GrayText}}::slotted(sbb-autocomplete-grid-option){flex:1 1 auto;margin-right:calc(-1 * var(--sbb-spacing-fixed-2x))}.sbb-autocomplete-grid-row{display:flex;align-items:center;padding-inline-end:var(--sbb-autocomplete-grid-row-padding-inline-end);justify-content:var(--sbb-autocomplete-grid-row-justify-content);gap:var(--sbb-spacing-fixed-6x);color:var(--sbb-autocomplete-grid-row-color);background-color:var(--sbb-autocomplete-grid-row-background-color);cursor:var(--sbb-autocomplete-grid-row-cursor);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--sbb-autocomplete-grid-row-color)}:host([data-disabled]) .sbb-autocomplete-grid-row{position:relative;z-index:0}:host([data-disabled]) .sbb-autocomplete-grid-row:before{content:"";display:block;position:absolute;inset:.375rem;border:var(--sbb-border-width-1x) dashed var(--sbb-autocomplete-grid-row-disabled-border-color);border-radius:var(--sbb-border-radius-2x);background-color:var(--sbb-autocomplete-grid-row-disabled-background-color);z-index:-1}@media (forced-colors: active){:host([data-disabled]) .sbb-autocomplete-grid-row:before{border-color:GrayText}}`;
+let p = 0, f = (() => {
   var o;
-  let l = [u("sbb-autocomplete-grid-row")], t, a = [], r, b = m(d);
+  let l = [u("sbb-autocomplete-grid-row")], t, a = [], r, b = g(d);
   return o = class extends b {
     connectedCallback() {
-      super.connectedCallback(), this.id ||= `sbb-autocomplete-grid-row-${++g}`;
+      super.connectedCallback(), this.id ||= `sbb-autocomplete-grid-row-${++p}`;
     }
     render() {
       return n`
@@ -19,9 +19,9 @@ let g = 0, k = (() => {
     }
   }, r = o, (() => {
     const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
-    s(null, t = { value: r }, l, { kind: "class", name: r.name, metadata: e }, null, a), r = t.value, e && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), o.role = "row", o.styles = p, c(r, a), r;
+    c(null, t = { value: r }, l, { kind: "class", name: r.name, metadata: e }, null, a), r = t.value, e && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), o.role = "row", o.styles = m, s(r, a), r;
 })();
 export {
-  k as SbbAutocompleteGridRowElement
+  f as SbbAutocompleteGridRowElement
 };

package/badge.css

@@ -15,8 +15,8 @@
   justify-content: center;
   padding-inline: var(--sbb-spacing-fixed-1x);
   border-radius: var(--sbb-border-radius-infinity);
-  background-color: var(--sbb-color-red);
-  color: var(--sbb-color-white);
+  background-color: var(--sbb-color-primary);
+  color: var(--sbb-color-1-negative);
   min-width: var(--sbb-spacing-fixed-4x);
   max-height: var(--sbb-spacing-fixed-4x);
   content: attr(sbb-badge);

package/breadcrumb/breadcrumb/breadcrumb.component.js

@@ -1,28 +1,28 @@
-import { __esDecorate as i, __runInitializers as l } from "tslib";
-import { customElement as n } from "lit/decorators.js";
-import { html as c } from "lit/static-html.js";
+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 { slotState as m } from "../../core/decorators.js";
 import { SbbHydrationMixin as u } from "../../core/mixins.js";
 import { SbbIconNameMixin as f } from "../../icon.js";
 import { css as v } from "lit";
-const p = v`*,:before,:after{box-sizing:border-box}:host{display:flex;--sbb-breadcrumb-color: var(--sbb-color-granite)}@media (any-hover: hover){:host(:hover){--sbb-breadcrumb-color: var(--sbb-color-charcoal)}}:host(:is(:active,[data-active])){--sbb-breadcrumb-color: var(--sbb-color-anthracite)}.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-color:var(--sbb-link-text-decoration-color);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: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([data-slot-names~=unnamed])) .sbb-breadcrumb__label{display:none}slot[name=icon] .sbb-breadcrumb__icon,slot[name=icon] ::slotted(*){flex-shrink:0}`;
+const h = v`*,:before,:after{box-sizing:border-box}: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-color:var(--sbb-link-text-decoration-color);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: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([data-slot-names~=unnamed])) .sbb-breadcrumb__label{display:none}slot[name=icon] .sbb-breadcrumb__icon,slot[name=icon] ::slotted(*){flex-shrink:0}`;
 let z = (() => {
-  var t;
-  let s = [n("sbb-breadcrumb"), m()], o, b = [], e, a = f(u(d));
-  return t = class extends a {
+  var r;
+  let s = [c("sbb-breadcrumb"), m()], t, b = [], e, a = f(u(d));
+  return r = class extends a {
     renderTemplate() {
-      return c`
+      return n`
       ${this.renderIconSlot("sbb-breadcrumb__icon")}
       <span class="sbb-breadcrumb__label">
         <slot></slot>
       </span>
     `;
     }
-  }, e = t, (() => {
-    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
-    i(null, o = { value: e }, s, { kind: "class", name: e.name, metadata: r }, null, b), e = o.value, r && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
-  })(), t.styles = p, l(e, b), e;
+  }, e = r, (() => {
+    const o = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
+    l(null, t = { value: e }, s, { kind: "class", name: e.name, metadata: o }, null, b), e = t.value, o && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
+  })(), r.styles = h, i(e, b), e;
 })();
 export {
   z as SbbBreadcrumbElement

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

@@ -1,6 +1,6 @@
 import { __esDecorate as u, __runInitializers as h } from "tslib";
 import { ResizeController as _ } from "@lit-labs/observers/resize-controller.js";
-import { css as f, LitElement as v, html as a, nothing as x } from "lit";
+import { css as f, LitElement as v, html as l, nothing as x } from "lit";
 import { customElement as y, state as C } from "lit/decorators.js";
 import { isArrowKeyPressed as w, sbbInputModalityDetector as k, getNextElementIndex as z } from "../../core/a11y.js";
 import { SbbLanguageController as E } from "../../core/controllers.js";
@@ -8,11 +8,11 @@ import { setOrRemoveAttribute as S } from "../../core/dom.js";
 import { i18nBreadcrumbEllipsisButtonLabel as I } from "../../core/i18n.js";
 import { SbbNamedSlotListMixin as A, SbbElementInternalsMixin as B } from "../../core/mixins.js";
 import "../../icon.js";
-const D = f`*,:before,:after{box-sizing:border-box}:host{--sbb-breadcrumb-group-wrap: nowrap;--sbb-breadcrumb-group-visibility: hidden;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-color-granite)}#sbb-breadcrumb-ellipsis{--sbb-breadcrumb-group-ellipsis-color: var(--sbb-color-granite);--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);-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: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-charcoal);--sbb-breadcrumb-group-ellipsis-background-color: var(--sbb-color-milk)}}@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)}`, m = 3;
+const D = f`*,:before,:after{box-sizing:border-box}: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: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 j = (() => {
-  var t;
-  let p = [y("sbb-breadcrumb-group")], l, o = [], s, b = A(B(v)), n = [], d;
-  return t = class extends b {
+  var s;
+  let m = [y("sbb-breadcrumb-group")], a, o = [], t, b = A(B(v)), n = [], d;
+  return s = class extends b {
     /* The state of the breadcrumb group. */
     set _state(e) {
       S(this, "data-state", e);
@@ -46,7 +46,7 @@ let j = (() => {
     }
     /** Apply the aria-current attribute to the last sbb-breadcrumb element. */
     _syncBreadcrumbs() {
-      this.listChildren.slice(0, -1).filter((e) => e.hasAttribute("accessibility-current")).forEach((e) => e.removeAttribute("accessibility-current")), this.listChildren[this.listChildren.length - 1]?.setAttribute("accessibility-current", "page"), this.listChildren.length < m && (this._state = null);
+      this.listChildren.slice(0, -1).filter((e) => e.hasAttribute("accessibility-current")).forEach((e) => e.removeAttribute("accessibility-current")), this.listChildren[this.listChildren.length - 1]?.setAttribute("accessibility-current", "page"), this.listChildren.length < p && (this._state = null);
     }
     /**
      * Sets the focus on the correct element when the ellipsis breadcrumb is displayed and the user is navigating with keyboard's arrows.
@@ -72,10 +72,10 @@ let j = (() => {
     }
     /** Evaluate if the expanded breadcrumb element fits in page width, otherwise it needs ellipsis */
     _evaluateCollapsedState() {
-      !this._state && this.scrollWidth > this.offsetWidth && this.listChildren.length >= m && (this._state = "collapsed", this._resizeObserver.hostDisconnected(), this.removeController(this._resizeObserver));
+      !this._state && this.scrollWidth > this.offsetWidth && this.listChildren.length >= p && (this._state = "collapsed", this._resizeObserver.hostDisconnected(), this.removeController(this._resizeObserver));
     }
     _renderCollapsed() {
-      return a`
+      return l`
       <li class="sbb-breadcrumb-group__item">
         <slot name="li-0"></slot>
       </li>
@@ -104,10 +104,10 @@ let j = (() => {
     `;
     }
     _renderExpanded() {
-      return this.listSlotEntries().map((e, r, i) => a`
+      return this.listSlotEntries().map((e, r, i) => l`
         <li class="sbb-breadcrumb-group__item">
           <slot name=${e.name}></slot>
-          ${r !== i.length - 1 ? a`<sbb-icon
+          ${r !== i.length - 1 ? l`<sbb-icon
                 name="chevron-small-right-small"
                 class="sbb-breadcrumb-group__divider-icon"
               ></sbb-icon>` : x}
@@ -115,19 +115,19 @@ let j = (() => {
       `);
     }
     render() {
-      return a`
+      return l`
       <ol class="sbb-breadcrumb-group">
         ${this._state === "collapsed" ? this._renderCollapsed() : this._renderExpanded()}
       </ol>
       ${this.renderHiddenSlot()}
     `;
     }
-  }, s = t, (() => {
+  }, t = s, (() => {
     const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
-    d = [C()], u(t, null, d, { kind: "setter", name: "_state", static: !1, private: !1, access: { has: (r) => "_state" in r, set: (r, i) => {
+    d = [C()], u(s, null, d, { 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, l = { value: s }, p, { kind: "class", name: s.name, metadata: e }, null, o), s = l.value, e && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), t.role = "navigation", t.styles = D, h(s, o), s;
+    } }, 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, h(t, o), t;
 })();
 export {
   j as SbbBreadcrumbGroupElement

package/button/common.js

@@ -1,5 +1,5 @@
 import { SbbButtonCommonElementMixin as n } from "./common/button-common.js";
-import { a, b as r, p as b, s as m, t as s } from "../transparent-button-xudJxob_.js";
+import { a, b as r, p as b, s as m, t as s } from "../transparent-button-Bg9fU_iZ.js";
 export {
   n as SbbButtonCommonElementMixin,
   a as buttonAccentStyle,

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

@@ -4,13 +4,13 @@ import { html as d } from "lit/static-html.js";
 import { SbbButtonBaseElement as u } from "../../core/base-elements.js";
 import { slotState as c } from "../../core/decorators.js";
 import { SbbDisabledTabIndexActionMixin as v, SbbNegativeMixin as m } from "../../core/mixins.js";
-import { SbbIconNameMixin as h } from "../../icon.js";
+import { SbbIconNameMixin as g } from "../../icon.js";
 import { css as p } from "lit";
-const f = p`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important;--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([data-slot-names~=icon],[icon-name]):not([data-slot-names~=unnamed])){--sbb-mini-button-padding-inline: 0;--sbb-mini-button-label-display: none;--sbb-mini-button-label-height: unset}:host{display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-text: var(--sbb-color-charcoal);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-disabled-style: dashed;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing)}@media (forced-colors: active){:host{--sbb-button-color-text: ButtonText !important;--sbb-button-color-hover-background: Highlight !important;--sbb-button-color-active-background: Highlight !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-border: GrayText !important;--sbb-button-color-disabled-text: GrayText !important}}:host .sbb-mini-button{position:relative;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;border-radius:var(--sbb-button-border-radius);color:var(--sbb-button-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}:host .sbb-mini-button:before{position:absolute;content:"";inset:0;border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color}::slotted(sbb-icon),sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem));display:flex}:host([negative]){--sbb-button-color-text: var(--sbb-color-milk);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-disabled-background: var(--sbb-color-charcoal);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-smoke)}:host(:is([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled])) .sbb-mini-button{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host(:is([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled])) .sbb-mini-button:before{background-color:var(--sbb-button-color-disabled-background);border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--sbb-button-color-disabled-border)}:host(:is([data-focus-visible],:focus-visible)) .sbb-mini-button:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}:host([data-focus-visible]){--sbb-focus-outline-style: initial}@media (any-hover: hover){:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled],:active,[data-active]):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (any-hover: hover){:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled],:active,[data-active]):hover) .sbb-mini-button:before{background-color:var(--sbb-button-color-hover-background)}}:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled]):is(:active,[data-active])) .sbb-mini-button:before{background-color:var(--sbb-button-color-active-background)}.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{--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);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:var(--sbb-mini-button-label-display);transition:translate var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);translate:0 var(--sbb-button-translate-y-content-hover, 0)}`;
+const f = p`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important;--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([data-slot-names~=icon],[icon-name]):not([data-slot-names~=unnamed])){--sbb-mini-button-padding-inline: 0;--sbb-mini-button-label-display: none;--sbb-mini-button-label-height: unset}:host{display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-text: var(--sbb-color-3);--sbb-button-color-default-background: transparent;--sbb-button-color-hover-background: var(--sbb-background-color-3);--sbb-button-color-active-background: var(--sbb-background-color-4);--sbb-button-color-disabled-background: var(--sbb-background-color-3);--sbb-button-color-disabled-border: var(--sbb-border-color-5);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-color-disabled-text: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-disabled-style: dashed;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing)}@media (forced-colors: active){:host{--sbb-button-color-text: ButtonText !important;--sbb-button-color-hover-background: Highlight !important;--sbb-button-color-active-background: Highlight !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-border: GrayText !important;--sbb-button-color-disabled-text: GrayText !important}}:host .sbb-mini-button{position:relative;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;border-radius:var(--sbb-button-border-radius);color:var(--sbb-button-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}:host .sbb-mini-button:before{position:absolute;content:"";inset:0;border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color}::slotted(sbb-icon),sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem));display:flex}:host([negative]){--sbb-button-color-text: var(--sbb-color-3-negative);--sbb-button-color-default-background: transparent;--sbb-button-color-hover-background: var(--sbb-background-color-3-negative);--sbb-button-color-active-background: var(--sbb-background-color-4-negative);--sbb-button-color-disabled-background: var(--sbb-background-color-3-negative);--sbb-button-color-disabled-border: var(--sbb-border-color-5);--sbb-button-color-disabled-text: var(--sbb-color-5)}:host(:is([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled])) .sbb-mini-button{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host(:is([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled])) .sbb-mini-button:before{background-color:var(--sbb-button-color-disabled-background);border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--sbb-button-color-disabled-border)}:host(:is([data-focus-visible],:focus-visible)) .sbb-mini-button:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}:host([data-focus-visible]){--sbb-focus-outline-style: initial}@media (any-hover: hover){:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled],:active,[data-active]):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (any-hover: hover){:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled],:active,[data-active]):hover) .sbb-mini-button:before{background-color:var(--sbb-button-color-hover-background)}}:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled]):is(:active,[data-active])) .sbb-mini-button:before{background-color:var(--sbb-button-color-active-background)}.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{--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);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:var(--sbb-mini-button-label-display);transition:translate var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);translate:0 var(--sbb-button-translate-y-content-hover, 0)}`;
 let T = (() => {
   var o;
-  let e = [l("sbb-mini-button"), c()], a, i = [], t, n = v(m(h(u)));
-  return o = class extends n {
+  let e = [l("sbb-mini-button"), c()], a, n = [], t, i = v(m(g(u)));
+  return o = class extends i {
     renderTemplate() {
       return d`
       ${super.renderIconSlot()}
@@ -20,9 +20,9 @@ let T = (() => {
     `;
     }
   }, t = o, (() => {
-    const b = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
-    r(null, a = { value: t }, e, { kind: "class", name: t.name, metadata: b }, null, i), t = a.value, b && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: b });
-  })(), o.styles = f, s(t, i), t;
+    const b = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
+    r(null, a = { value: t }, e, { kind: "class", name: t.name, metadata: b }, null, n), t = a.value, b && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: b });
+  })(), o.styles = f, s(t, n), t;
 })();
 export {
   T as SbbMiniButtonElement

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

@@ -1,18 +1,18 @@
 var z = (i) => {
   throw TypeError(i);
 };
-var L = (i, t, s) => t.has(i) || z("Cannot " + s);
-var d = (i, t, s) => (L(i, t, "read from private field"), s ? s.call(i) : t.get(i)), m = (i, t, s) => t.has(i) ? z("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(i) : t.set(i, s), l = (i, t, s, r) => (L(i, t, "write to private field"), r ? r.call(i, s) : t.set(i, s), s);
+var L = (i, e, s) => e.has(i) || z("Cannot " + s);
+var u = (i, e, s) => (L(i, e, "read from private field"), s ? s.call(i) : e.get(i)), m = (i, e, s) => e.has(i) ? z("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(i) : e.set(i, s), l = (i, e, s, r) => (L(i, e, "write to private field"), r ? r.call(i, s) : e.set(i, s), s);
 import { __esDecorate as g, __runInitializers as c } from "tslib";
-import { css as k, LitElement as S, html as N } from "lit";
-import { customElement as E, property as w } from "lit/decorators.js";
+import { css as w, LitElement as S, html as N } from "lit";
+import { customElement as E, property as k } from "lit/decorators.js";
 import { forceType as I } from "../../core/decorators.js";
 import { isLean as D } from "../../core/dom.js";
 import { SbbNegativeMixin as M, SbbNamedSlotListMixin as O } from "../../core/mixins.js";
-const j = k`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-mini-button-group-background: var(--sbb-color-white);--sbb-mini-button-group-border-color: var(--sbb-color-cloud);--sbb-mini-button-group-border-width: var(--sbb-border-width-2x);--sbb-mini-button-group-border: var(--sbb-mini-button-group-border-width) solid var(--sbb-mini-button-group-border-color);--sbb-mini-button-group-gap: var(--sbb-spacing-fixed-2x);--sbb-mini-button-group-min-height: var(--sbb-size-element-s);--sbb-mini-button-group-padding-inline: var(--sbb-spacing-fixed-3x)}:host([negative]){--sbb-mini-button-group-background: var(--sbb-color-midnight);--sbb-mini-button-group-border-color: var(--sbb-color-anthracite);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host([size=s]){--sbb-mini-button-group-min-height: var(--sbb-size-element-xs);--sbb-mini-button-group-padding-inline: var(--sbb-spacing-fixed-2x)}:host([size=l]){--sbb-mini-button-group-min-height: var(--sbb-size-element-m)}:host([size=xl]){--sbb-mini-button-group-min-height: var(--sbb-size-element-l);--sbb-mini-button-group-padding-inline: var(--sbb-spacing-fixed-4x)}::slotted(:is(sbb-mini-button,sbb-divider)){display:flex}::slotted(sbb-divider){--sbb-divider-border-width: var(--sbb-border-width-1x);padding-block:var(--sbb-spacing-fixed-1x);padding-inline:var(--sbb-spacing-fixed-1x);height:var(--sbb-size-icon-ui-small)}.sbb-mini-button-group{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:nowrap;align-items:center;gap:var(--sbb-mini-button-group-gap);width:fit-content;min-height:var(--sbb-mini-button-group-min-height);background-color:var(--sbb-mini-button-group-background);border:var(--sbb-mini-button-group-border);border-radius:var(--sbb-border-radius-infinity);padding-inline:calc(var(--sbb-mini-button-group-padding-inline) - var(--sbb-mini-button-group-border-width))}`;
+const j = w`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-mini-button-group-background: var(--sbb-background-color-1);--sbb-mini-button-group-border-color: var(--sbb-border-color-4-inverted);--sbb-mini-button-group-border-width: var(--sbb-border-width-2x);--sbb-mini-button-group-border: var(--sbb-mini-button-group-border-width) solid var(--sbb-mini-button-group-border-color);--sbb-mini-button-group-gap: var(--sbb-spacing-fixed-2x);--sbb-mini-button-group-min-height: var(--sbb-size-element-s);--sbb-mini-button-group-padding-inline: var(--sbb-spacing-fixed-3x)}:host([negative]){--sbb-mini-button-group-background: var(--sbb-background-color-1-negative);--sbb-mini-button-group-border-color: var(--sbb-border-color-4-negative-inverted);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host([size=s]){--sbb-mini-button-group-min-height: var(--sbb-size-element-xs);--sbb-mini-button-group-padding-inline: var(--sbb-spacing-fixed-2x)}:host([size=l]){--sbb-mini-button-group-min-height: var(--sbb-size-element-m)}:host([size=xl]){--sbb-mini-button-group-min-height: var(--sbb-size-element-l);--sbb-mini-button-group-padding-inline: var(--sbb-spacing-fixed-4x)}::slotted(:is(sbb-mini-button,sbb-divider)){display:flex}::slotted(sbb-divider){--sbb-divider-border-width: var(--sbb-border-width-1x);padding-block:var(--sbb-spacing-fixed-1x);padding-inline:var(--sbb-spacing-fixed-1x);height:var(--sbb-size-icon-ui-small)}.sbb-mini-button-group{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:nowrap;align-items:center;gap:var(--sbb-mini-button-group-gap);width:fit-content;min-height:var(--sbb-mini-button-group-min-height);background-color:var(--sbb-mini-button-group-background);border:var(--sbb-mini-button-group-border);border-radius:var(--sbb-border-radius-infinity);padding-inline:calc(var(--sbb-mini-button-group-padding-inline) - var(--sbb-mini-button-group-border-width))}`;
 let $ = (() => {
   var o, n, a;
-  let i = [E("sbb-mini-button-group")], t, s = [], r, p = M(O(S)), h, v = [], f = [], y, x = [], _ = [];
+  let i = [E("sbb-mini-button-group")], e, s = [], r, p = M(O(S)), h, v = [], f = [], y, x = [], _ = [];
   return a = class extends p {
     constructor() {
       super(...arguments);
@@ -22,26 +22,26 @@ let $ = (() => {
     }
     /** This will be forwarded as aria-label to the list that contains the buttons. */
     get accessibilityLabel() {
-      return d(this, o);
+      return u(this, o);
     }
-    set accessibilityLabel(e) {
-      l(this, o, e);
+    set accessibilityLabel(t) {
+      l(this, o, t);
     }
     /**
      * Size variant, either s, m, l or xl.
      * @default 'm' / 's' (lean)
      */
     get size() {
-      return d(this, n);
+      return u(this, n);
     }
-    set size(e) {
-      l(this, n, e);
+    set size(t) {
+      l(this, n, t);
     }
-    willUpdate(e) {
-      super.willUpdate(e), e.has("negative") && this._proxyNegative();
+    willUpdate(t) {
+      super.willUpdate(t), t.has("negative") && this._proxyNegative();
     }
     _proxyNegative() {
-      this.querySelectorAll?.("sbb-divider, sbb-mini-button").forEach((e) => e.negative = this.negative);
+      this.querySelectorAll?.("sbb-divider, sbb-mini-button").forEach((t) => t.negative = this.negative);
     }
     render() {
       return N`
@@ -49,12 +49,12 @@ let $ = (() => {
     `;
     }
   }, o = new WeakMap(), n = new WeakMap(), r = a, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(p[Symbol.metadata] ?? null) : void 0;
-    h = [I(), w({ attribute: "accessibility-label" })], y = [w({ reflect: !0 })], g(a, null, h, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (b) => "accessibilityLabel" in b, get: (b) => b.accessibilityLabel, set: (b, u) => {
-      b.accessibilityLabel = u;
-    } }, metadata: e }, v, f), g(a, null, y, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (b) => "size" in b, get: (b) => b.size, set: (b, u) => {
-      b.size = u;
-    } }, metadata: e }, x, _), g(null, t = { value: r }, i, { kind: "class", name: r.name, metadata: e }, null, s), r = t.value, e && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(p[Symbol.metadata] ?? null) : void 0;
+    h = [I(), k({ attribute: "accessibility-label" })], y = [k({ reflect: !0 })], g(a, null, h, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (b) => "accessibilityLabel" in b, get: (b) => b.accessibilityLabel, set: (b, d) => {
+      b.accessibilityLabel = d;
+    } }, metadata: t }, v, f), g(a, null, y, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (b) => "size" in b, get: (b) => b.size, set: (b, d) => {
+      b.size = d;
+    } }, metadata: t }, x, _), g(null, e = { value: r }, i, { kind: "class", name: r.name, metadata: t }, null, s), r = e.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
   })(), a.styles = j, c(r, s), r;
 })();
 export {

package/button.js

@@ -13,7 +13,7 @@ import { SbbSecondaryButtonStaticElement as T } from "./button/secondary-button-
 import { SbbAccentButtonStaticElement as C } from "./button/accent-button-static/accent-button-static.component.js";
 import { SbbTransparentButtonStaticElement as P } from "./button/transparent-button-static/transparent-button-static.component.js";
 import { SbbButtonCommonElementMixin as h } from "./button/common/button-common.js";
-import { a as q, b as v, p as w, s as z, t as D } from "./transparent-button-xudJxob_.js";
+import { a as q, b as v, p as w, s as z, t as D } from "./transparent-button-Bg9fU_iZ.js";
 export {
   m as SbbAccentButtonElement,
   s as SbbAccentButtonLinkElement,