@sbb-esta/lyne-elements-dev 0.0.0 → 4.5.1-dev.1771859294

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

@@ -0,0 +1,134 @@
+import { __esDecorate as u, __runInitializers as h } from "tslib";
+import { ResizeController as g } from "@lit-labs/observers/resize-controller.js";
+import { css as f, LitElement as v, html as a, nothing as x } from "lit";
+import { customElement as y, state as C } from "lit/decorators.js";
+import { isArrowKeyPressed as w, sbbInputModalityDetector as S, getNextElementIndex as k } from "../../core/a11y.js";
+import { SbbLanguageController as z } from "../../core/controllers.js";
+import { i18nBreadcrumbEllipsisButtonLabel as E } from "../../core/i18n.js";
+import { SbbElementInternalsMixin as I, SbbNamedSlotListMixin as $ } from "../../core/mixins.js";
+import { boxSizingStyles as B } from "../../core/styles.js";
+import "../../icon.js";
+const D = f`:host{display:block}:host(:is(:state(loaded),[state--loaded])){--sbb-breadcrumb-group-visibility: visible}:host(:is(:is(:state(state-collapsed),[state--state-collapsed]),:is(:state(state-manually-expanded),[state--state-manually-expanded]))){--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{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;font-size:var(--sbb-text-font-size-xxs);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)}`, m = 3;
+let j = (() => {
+  var s;
+  let p = [y("sbb-breadcrumb-group")], l, o = [], r, b = I($(v)), n = [], d;
+  return s = class extends b {
+    /** The state of the breadcrumb group. */
+    set _state(e) {
+      this._stateInternal && this.internals.states.delete(`state-${this._stateInternal}`), this._stateInternal = e, this._stateInternal && this.internals.states.add(`state-${this._stateInternal}`);
+    }
+    get _state() {
+      return this._stateInternal;
+    }
+    constructor() {
+      super(), this.listChildLocalNames = (h(this, n), ["sbb-breadcrumb"]), this._stateInternal = null, this._resizeObserver = new g(this, {
+        target: null,
+        skipInitial: !0,
+        callback: () => this._evaluateCollapsedState()
+      }), this._language = new z(this), this._markForFocus = !1, this.addEventListener?.("keydown", (e) => this._handleKeyDown(e));
+    }
+    _handleKeyDown(e) {
+      if (!(!this.listChildren.length || // don't trap nested handling
+      e.target !== this && e.target.parentElement !== this) && w(e)) {
+        if (this._state === "collapsed")
+          return this._focusNextCollapsed(e);
+        this._focusNext(e);
+      }
+    }
+    firstUpdated(e) {
+      super.firstUpdated(e), this._resizeObserver.observe(this), this.internals.states.add("loaded");
+    }
+    willUpdate(e) {
+      super.willUpdate(e), e.has("listChildren") && this._syncBreadcrumbs();
+    }
+    updated(e) {
+      super.updated(e), e.has("listChildren") && Promise.resolve().then(() => this._evaluateCollapsedState()), this._markForFocus && S.mostRecentModality === "keyboard" && (this.listChildren[1]?.focus(), this._markForFocus = !1);
+    }
+    /** 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);
+    }
+    /**
+     * Sets the focus on the correct element when the ellipsis breadcrumb is displayed and the user is navigating with keyboard's arrows.
+     */
+    _focusNextCollapsed(e) {
+      const t = [
+        this.listChildren[0],
+        this.shadowRoot.querySelector("#sbb-breadcrumb-ellipsis"),
+        this.listChildren[this.listChildren.length - 1]
+      ];
+      this._focusNext(e, t);
+    }
+    _focusNext(e, t = this.listChildren) {
+      const i = t.findIndex((c) => c === document.activeElement || c === this.shadowRoot.activeElement), _ = k(e, i, t.length);
+      t[_]?.focus(), e.preventDefault();
+    }
+    /**
+     * Note: due to @State annotation on _state, this method triggers a new render; as a consequence, the focus is moved
+     * to the `body`, so if the ellipsis element has focus, it's asynchronously forced to the first element.
+     */
+    _expandBreadcrumbs() {
+      this._state = "manually-expanded", this._markForFocus = !0;
+    }
+    /** 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));
+    }
+    _renderCollapsed() {
+      return a`
+      <li class="sbb-breadcrumb-group__item">
+        <slot name="li-0"></slot>
+      </li>
+      <li class="sbb-breadcrumb-group__item" id="sbb-breadcrumb-group-ellipsis">
+        <sbb-icon
+          name="chevron-small-right-small"
+          class="sbb-breadcrumb-group__divider-icon"
+        ></sbb-icon>
+        <button
+          type="button"
+          id="sbb-breadcrumb-ellipsis"
+          aria-label=${E[this._language.current]}
+          aria-expanded="false"
+          @click=${() => this._expandBreadcrumbs()}
+        >
+          ...
+        </button>
+      </li>
+      <li class="sbb-breadcrumb-group__item">
+        <sbb-icon
+          name="chevron-small-right-small"
+          class="sbb-breadcrumb-group__divider-icon"
+        ></sbb-icon>
+        <slot name=${`li-${this.listChildren.length - 1}`}></slot>
+      </li>
+    `;
+    }
+    _renderExpanded() {
+      return this.listSlotEntries().map((e, t, i) => a`
+        <li class="sbb-breadcrumb-group__item">
+          <slot name=${e.name}></slot>
+          ${t !== i.length - 1 ? a`<sbb-icon
+                name="chevron-small-right-small"
+                class="sbb-breadcrumb-group__divider-icon"
+              ></sbb-icon>` : x}
+        </li>
+      `);
+    }
+    render() {
+      return a`
+      <ol class="sbb-breadcrumb-group">
+        ${this._state === "collapsed" ? this._renderCollapsed() : this._renderExpanded()}
+      </ol>
+      ${this.renderHiddenSlot()}
+    `;
+    }
+  }, r = 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: (t) => "_state" in t, set: (t, i) => {
+      t._state = i;
+    } }, metadata: e }, null, n), u(null, l = { value: r }, p, { kind: "class", name: r.name, metadata: e }, null, o), r = l.value, e && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), s.role = "navigation", s.styles = [B, D], h(r, o), r;
+})();
+export {
+  j as SbbBreadcrumbGroupElement
+};

package/breadcrumb/breadcrumb-group.js

@@ -0,0 +1,4 @@
+import { SbbBreadcrumbGroupElement as b } from "./breadcrumb-group/breadcrumb-group.component.js";
+export {
+  b as SbbBreadcrumbGroupElement
+};

package/breadcrumb/breadcrumb.js

@@ -0,0 +1,4 @@
+import { SbbBreadcrumbElement as b } from "./breadcrumb/breadcrumb.component.js";
+export {
+  b as SbbBreadcrumbElement
+};

package/breadcrumb.js

@@ -0,0 +1,6 @@
+import { SbbBreadcrumbElement as b } from "./breadcrumb/breadcrumb/breadcrumb.component.js";
+import { SbbBreadcrumbGroupElement as o } from "./breadcrumb/breadcrumb-group/breadcrumb-group.component.js";
+export {
+  b as SbbBreadcrumbElement,
+  o as SbbBreadcrumbGroupElement
+};

package/button/accent-button/accent-button.component.js

@@ -0,0 +1,22 @@
+import { __esDecorate as s, __runInitializers as r } from "tslib";
+import { customElement as m } from "lit/decorators.js";
+import { SbbButtonBaseElement as c } from "../../core/base-elements.js";
+import { SbbDisabledTabIndexActionMixin as b } from "../../core/mixins.js";
+import { boxSizingStyles as u } from "../../core/styles.js";
+import { SbbButtonCommonElementMixin as S, buttonCommonStyle as d, buttonAccentStyle as f } from "../common.js";
+let B = (() => {
+  var e;
+  let i = [m("sbb-accent-button")], l, o = [], t, n = S(b(c));
+  return e = class extends n {
+  }, t = e, (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
+    s(null, l = { value: t }, i, { kind: "class", name: t.name, metadata: a }, null, o), t = l.value, a && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+  })(), e.styles = [
+    u,
+    d,
+    f
+  ], r(t, o), t;
+})();
+export {
+  B as SbbAccentButtonElement
+};

package/button/accent-button-link/accent-button-link.component.js

@@ -0,0 +1,22 @@
+import { __esDecorate as s, __runInitializers as r } from "tslib";
+import { customElement as m } from "lit/decorators.js";
+import { SbbLinkBaseElement as c } from "../../core/base-elements.js";
+import { SbbDisabledInteractiveMixin as b, SbbDisabledMixin as u } from "../../core/mixins.js";
+import { boxSizingStyles as S } from "../../core/styles.js";
+import { SbbButtonCommonElementMixin as d, buttonCommonStyle as f, buttonAccentStyle as p } from "../common.js";
+let k = (() => {
+  var e;
+  let o = [m("sbb-accent-button-link")], l, i = [], t, n = d(b(u(c)));
+  return e = class extends n {
+  }, t = e, (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
+    s(null, l = { value: t }, o, { kind: "class", name: t.name, metadata: a }, null, i), t = l.value, a && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+  })(), e.styles = [
+    S,
+    f,
+    p
+  ], r(t, i), t;
+})();
+export {
+  k as SbbAccentButtonLinkElement
+};

package/button/accent-button-link.js

@@ -0,0 +1,4 @@
+import { SbbAccentButtonLinkElement as n } from "./accent-button-link/accent-button-link.component.js";
+export {
+  n as SbbAccentButtonLinkElement
+};

package/button/accent-button-static/accent-button-static.component.js

@@ -0,0 +1,22 @@
+import { __esDecorate as n, __runInitializers as r } from "tslib";
+import { customElement as m } from "lit/decorators.js";
+import { SbbActionBaseElement as c } from "../../core/base-elements.js";
+import { SbbDisabledMixin as b } from "../../core/mixins.js";
+import { boxSizingStyles as u } from "../../core/styles.js";
+import { SbbButtonCommonElementMixin as S, buttonCommonStyle as f, buttonAccentStyle as p } from "../common.js";
+let D = (() => {
+  var e;
+  let s = [m("sbb-accent-button-static")], l, o = [], t, i = S(b(c));
+  return e = class extends i {
+  }, t = e, (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
+    n(null, l = { value: t }, s, { kind: "class", name: t.name, metadata: a }, null, o), t = l.value, a && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+  })(), e.styles = [
+    u,
+    f,
+    p
+  ], r(t, o), t;
+})();
+export {
+  D as SbbAccentButtonStaticElement
+};

package/button/accent-button-static.js

@@ -0,0 +1,4 @@
+import { SbbAccentButtonStaticElement as c } from "./accent-button-static/accent-button-static.component.js";
+export {
+  c as SbbAccentButtonStaticElement
+};

package/button/accent-button.js

@@ -0,0 +1,4 @@
+import { SbbAccentButtonElement as n } from "./accent-button/accent-button.component.js";
+export {
+  n as SbbAccentButtonElement
+};

package/button/button/button.component.js

@@ -0,0 +1,22 @@
+import { __esDecorate as s, __runInitializers as m } from "tslib";
+import { customElement as n } from "lit/decorators.js";
+import { SbbButtonBaseElement as b } from "../../core/base-elements.js";
+import { SbbDisabledTabIndexActionMixin as c } from "../../core/mixins.js";
+import { boxSizingStyles as u } from "../../core/styles.js";
+import { SbbButtonCommonElementMixin as S, buttonCommonStyle as d, buttonPrimaryStyle as f } from "../common.js";
+let B = (() => {
+  var e;
+  let r = [n("sbb-button")], l, o = [], t, i = S(c(b));
+  return e = class extends i {
+  }, t = e, (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
+    s(null, l = { value: t }, r, { kind: "class", name: t.name, metadata: a }, null, o), t = l.value, a && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+  })(), e.styles = [
+    u,
+    d,
+    f
+  ], m(t, o), t;
+})();
+export {
+  B as SbbButtonElement
+};

package/button/button-link/button-link.component.js

@@ -0,0 +1,22 @@
+import { __esDecorate as n, __runInitializers as s } from "tslib";
+import { customElement as m } from "lit/decorators.js";
+import { SbbLinkBaseElement as b } from "../../core/base-elements.js";
+import { SbbDisabledInteractiveMixin as c, SbbDisabledMixin as u } from "../../core/mixins.js";
+import { boxSizingStyles as S } from "../../core/styles.js";
+import { SbbButtonCommonElementMixin as d, buttonCommonStyle as f, buttonPrimaryStyle as p } from "../common.js";
+let k = (() => {
+  var e;
+  let r = [m("sbb-button-link")], i, l = [], t, o = d(c(u(b)));
+  return e = class extends o {
+  }, t = e, (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
+    n(null, i = { value: t }, r, { kind: "class", name: t.name, metadata: a }, null, l), t = i.value, a && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+  })(), e.styles = [
+    S,
+    f,
+    p
+  ], s(t, l), t;
+})();
+export {
+  k as SbbButtonLinkElement
+};

package/button/button-link.js

@@ -0,0 +1,4 @@
+import { SbbButtonLinkElement as n } from "./button-link/button-link.component.js";
+export {
+  n as SbbButtonLinkElement
+};

package/button/button-static/button-static.component.js

@@ -0,0 +1,22 @@
+import { __esDecorate as s, __runInitializers as m } from "tslib";
+import { customElement as n } from "lit/decorators.js";
+import { SbbActionBaseElement as b } from "../../core/base-elements.js";
+import { SbbDisabledMixin as c } from "../../core/mixins.js";
+import { boxSizingStyles as u } from "../../core/styles.js";
+import { SbbButtonCommonElementMixin as S, buttonCommonStyle as f, buttonPrimaryStyle as p } from "../common.js";
+let D = (() => {
+  var e;
+  let r = [n("sbb-button-static")], l, o = [], t, i = S(c(b));
+  return e = class extends i {
+  }, t = e, (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
+    s(null, l = { value: t }, r, { kind: "class", name: t.name, metadata: a }, null, o), t = l.value, a && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+  })(), e.styles = [
+    u,
+    f,
+    p
+  ], m(t, o), t;
+})();
+export {
+  D as SbbButtonStaticElement
+};

package/button/button-static.js

@@ -0,0 +1,4 @@
+import { SbbButtonStaticElement as o } from "./button-static/button-static.component.js";
+export {
+  o as SbbButtonStaticElement
+};

package/button/button.js

@@ -0,0 +1,4 @@
+import { SbbButtonElement as o } from "./button/button.component.js";
+export {
+  o as SbbButtonElement
+};

package/button/common/button-common.js

@@ -0,0 +1,73 @@
+var y = (t) => {
+  throw TypeError(t);
+};
+var z = (t, e, i) => e.has(t) || y("Cannot " + i);
+var m = (t, e, i) => (z(t, e, "read from private field"), i ? i.call(t) : e.get(t)), c = (t, e, i) => e.has(t) ? y("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), u = (t, e, i, l) => (z(t, e, "write to private field"), l ? l.call(t, i) : e.set(t, i), i);
+import { __esDecorate as v, __runInitializers as d } from "tslib";
+import { nothing as I } from "lit";
+import { property as S } from "lit/decorators.js";
+import { html as x } from "lit/static-html.js";
+import { forceType as w } from "../../core/decorators.js";
+import { isLean as D } from "../../core/dom.js";
+import { SbbNegativeMixin as B } from "../../core/mixins.js";
+import { SbbIconNameMixin as M } from "../../icon.js";
+const E = (t) => (() => {
+  var o, n, r;
+  let i = B(M(t)), l, h = [], f = [], p, g = [], _ = [];
+  return r = class extends i {
+    constructor(...s) {
+      super(...s);
+      c(this, o, d(this, h, D() ? "s" : "l"));
+      c(this, n, (d(this, f), d(this, g, !1)));
+      d(this, _), this.internals.states.add("sbb-button");
+    }
+    /**
+     * Size variant, either l, m or s.
+     * @default 'l' / 's' (lean)
+     */
+    get size() {
+      return m(this, o);
+    }
+    set size(s) {
+      u(this, o, s);
+    }
+    /**
+     * Whether the button indicates a loading state.
+     * The animation kicks in after a delay of 300ms, configurable with --sbb-button-loading-delay CSS variable.
+     */
+    get loading() {
+      return m(this, n);
+    }
+    set loading(s) {
+      u(this, n, s);
+    }
+    willUpdate(s) {
+      if (super.willUpdate(s), s.has("loading"))
+        if (this.loading) {
+          this.internals.ariaBusy = "true", this.internals.ariaDisabled = "true";
+          const a = this.offsetWidth;
+          this.style?.setProperty("--sbb-button-width", `${a || 136}px`);
+        } else
+          this.internals.ariaBusy = null, this.style?.removeProperty("--sbb-button-width"), this.maybeDisabledInteractive || (this.internals.ariaDisabled = null);
+    }
+    renderTemplate() {
+      return x`
+        ${super.renderIconSlot()}
+        <span class="sbb-button__label">
+          <slot></slot>
+        </span>
+        ${this.loading && !this.maybeDisabled ? x`<div class="sbb-button-loading-border"></div>` : I}
+      `;
+    }
+  }, o = new WeakMap(), n = new WeakMap(), (() => {
+    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
+    l = [S({ reflect: !0 })], p = [w(), S({ reflect: !0, type: Boolean })], v(r, null, l, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (a) => "size" in a, get: (a) => a.size, set: (a, b) => {
+      a.size = b;
+    } }, metadata: s }, h, f), v(r, null, p, { kind: "accessor", name: "loading", static: !1, private: !1, access: { has: (a) => "loading" in a, get: (a) => a.loading, set: (a, b) => {
+      a.loading = b;
+    } }, metadata: s }, g, _), s && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
+  })(), r;
+})();
+export {
+  E as SbbButtonCommonElementMixin
+};

package/button/common.js

@@ -0,0 +1,12 @@
+import { SbbButtonCommonElementMixin as o } from "./common/button-common.js";
+import { a, b as m, p as b, s as l, t as r, m as s, c as y } from "../mini-button-label-common-Dx9JhmQ6.js";
+export {
+  o as SbbButtonCommonElementMixin,
+  a as buttonAccentStyle,
+  m as buttonCommonStyle,
+  b as buttonPrimaryStyle,
+  l as buttonSecondaryStyle,
+  r as buttonTransparentStyle,
+  s as miniButtonLabelStyle,
+  y as miniButtonStyle
+};

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

@@ -0,0 +1,32 @@
+import { __esDecorate as n, __runInitializers as s } from "tslib";
+import { customElement as m } from "lit/decorators.js";
+import { html as b } from "lit/static-html.js";
+import { SbbButtonBaseElement as c } from "../../core/base-elements.js";
+import { SbbDisabledTabIndexActionMixin as u, SbbNegativeMixin as p } from "../../core/mixins.js";
+import { boxSizingStyles as S } from "../../core/styles.js";
+import { SbbIconNameMixin as d } from "../../icon.js";
+import { miniButtonStyle as f, miniButtonLabelStyle as _ } from "../common.js";
+let M = (() => {
+  var e;
+  let r = [m("sbb-mini-button")], i, l = [], t, o = u(p(d(c)));
+  return e = class extends o {
+    renderTemplate() {
+      return b`
+      ${super.renderIconSlot()}
+      <span class="sbb-mini-button__label">
+        <slot></slot>
+      </span>
+    `;
+    }
+  }, t = e, (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
+    n(null, i = { value: t }, r, { kind: "class", name: t.name, metadata: a }, null, l), t = i.value, a && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+  })(), e.styles = [
+    S,
+    f,
+    _
+  ], s(t, l), t;
+})();
+export {
+  M as SbbMiniButtonElement
+};

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

@@ -0,0 +1,67 @@
+var x = (i) => {
+  throw TypeError(i);
+};
+var L = (i, t, s) => t.has(i) || x("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) ? x("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(i) : t.set(i, s), l = (i, t, s, a) => (L(i, t, "write to private field"), a ? a.call(i, s) : t.set(i, s), s);
+import { __esDecorate as g, __runInitializers as c } from "tslib";
+import { css as S, LitElement as w, 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";
+import { boxSizingStyles as j } from "../../core/styles.js";
+const T = S`:host{display:block}: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=m]){--sbb-mini-button-group-min-height: var(--sbb-size-element-s);--sbb-mini-button-group-padding-inline: var(--sbb-spacing-fixed-3x)}: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-mini-button-link,sbb-divider)){display:flex}::slotted(sbb-divider){--sbb-divider-border-width: var(--sbb-border-width-1x);padding:var(--sbb-mini-button-group-divider-padding);height:var(--sbb-mini-button-group-divider-height)}.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-width) solid var(--sbb-mini-button-group-border-color);border-radius:var(--sbb-mini-button-group-border-radius);padding-inline:calc(var(--sbb-mini-button-group-padding-inline) - var(--sbb-mini-button-group-border-width))}`;
+let H = (() => {
+  var n, o, r;
+  let i = [E("sbb-mini-button-group")], t, s = [], a, p = M(O(w)), h, v = [], y = [], f, _ = [], z = [];
+  return r = class extends p {
+    constructor() {
+      super(...arguments);
+      m(this, n);
+      m(this, o);
+      this.listChildLocalNames = [
+        "sbb-mini-button",
+        "sbb-mini-button-link",
+        "sbb-divider"
+      ], l(this, n, c(this, v, "")), l(this, o, (c(this, y), c(this, _, D() ? "s" : "m"))), c(this, z);
+    }
+    /** This will be forwarded as aria-label to the list that contains the buttons. */
+    get accessibilityLabel() {
+      return d(this, n);
+    }
+    set accessibilityLabel(e) {
+      l(this, n, e);
+    }
+    /**
+     * Size variant, either s, m, l or xl.
+     * @default 'm' / 's' (lean)
+     */
+    get size() {
+      return d(this, o);
+    }
+    set size(e) {
+      l(this, o, e);
+    }
+    willUpdate(e) {
+      super.willUpdate(e), e.has("negative") && this._proxyNegative();
+    }
+    _proxyNegative() {
+      this.querySelectorAll?.("sbb-divider, sbb-mini-button, sbb-mini-button-link").forEach((e) => e.negative = this.negative);
+    }
+    render() {
+      return N`
+      ${this.renderList({ ariaLabel: this.accessibilityLabel }, { localNameVisualOnly: ["sbb-divider"] })}
+    `;
+    }
+  }, n = new WeakMap(), o = new WeakMap(), a = r, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(p[Symbol.metadata] ?? null) : void 0;
+    h = [I(), k({ attribute: "accessibility-label" })], f = [k({ reflect: !0 })], g(r, 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, y), g(r, null, f, { 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 }, _, z), g(null, t = { value: a }, i, { kind: "class", name: a.name, metadata: e }, null, s), a = t.value, e && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), r.styles = [j, T], c(a, s), a;
+})();
+export {
+  H as SbbMiniButtonGroupElement
+};

package/button/mini-button-group.js

@@ -0,0 +1,4 @@
+import { SbbMiniButtonGroupElement as e } from "./mini-button-group/mini-button-group.component.js";
+export {
+  e as SbbMiniButtonGroupElement
+};

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

@@ -0,0 +1,35 @@
+import { __esDecorate as n, __runInitializers as s } from "tslib";
+import { customElement as m } from "lit/decorators.js";
+import { html as b } from "lit/static-html.js";
+import { SbbLinkBaseElement as c } from "../../core/base-elements.js";
+import { SbbNegativeMixin as u, SbbDisabledInteractiveMixin as p, SbbDisabledMixin as S } from "../../core/mixins.js";
+import { boxSizingStyles as d } from "../../core/styles.js";
+import { SbbIconNameMixin as f } from "../../icon.js";
+import { miniButtonStyle as _, miniButtonLabelStyle as y } from "../common.js";
+import { css as x } from "lit";
+const v = x`@media(forced-colors:active){:host{--sbb-mini-button-color: LinkText !important}}`;
+let z = (() => {
+  var e;
+  let r = [m("sbb-mini-button-link")], a, o = [], t, l = u(f(p(S(c))));
+  return e = class extends l {
+    renderTemplate() {
+      return b`
+      ${super.renderIconSlot()}
+      <span class="sbb-mini-button__label">
+        <slot></slot>
+      </span>
+    `;
+    }
+  }, t = e, (() => {
+    const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
+    n(null, a = { value: t }, r, { kind: "class", name: t.name, metadata: i }, null, o), t = a.value, i && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
+  })(), e.styles = [
+    d,
+    _,
+    y,
+    v
+  ], s(t, o), t;
+})();
+export {
+  z as SbbMiniButtonLinkElement
+};

package/button/mini-button-link.js

@@ -0,0 +1,4 @@
+import { SbbMiniButtonLinkElement as e } from "./mini-button-link/mini-button-link.component.js";
+export {
+  e as SbbMiniButtonLinkElement
+};

package/button/mini-button.js

@@ -0,0 +1,4 @@
+import { SbbMiniButtonElement as n } from "./mini-button/mini-button.component.js";
+export {
+  n as SbbMiniButtonElement
+};

package/button/secondary-button/secondary-button.component.js

@@ -0,0 +1,22 @@
+import { __esDecorate as s, __runInitializers as i } from "tslib";
+import { customElement as m } from "lit/decorators.js";
+import { SbbButtonBaseElement as b } from "../../core/base-elements.js";
+import { SbbDisabledTabIndexActionMixin as c } from "../../core/mixins.js";
+import { boxSizingStyles as u } from "../../core/styles.js";
+import { SbbButtonCommonElementMixin as S, buttonCommonStyle as d, buttonSecondaryStyle as y } from "../common.js";
+let B = (() => {
+  var e;
+  let r = [m("sbb-secondary-button")], o, l = [], t, n = S(c(b));
+  return e = class extends n {
+  }, t = e, (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
+    s(null, o = { value: t }, r, { kind: "class", name: t.name, metadata: a }, null, l), t = o.value, a && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+  })(), e.styles = [
+    u,
+    d,
+    y
+  ], i(t, l), t;
+})();
+export {
+  B as SbbSecondaryButtonElement
+};

package/button/secondary-button-link/secondary-button-link.component.js

@@ -0,0 +1,22 @@
+import { __esDecorate as r, __runInitializers as s } from "tslib";
+import { customElement as m } from "lit/decorators.js";
+import { SbbLinkBaseElement as b } from "../../core/base-elements.js";
+import { SbbDisabledInteractiveMixin as c, SbbDisabledMixin as u } from "../../core/mixins.js";
+import { boxSizingStyles as S } from "../../core/styles.js";
+import { SbbButtonCommonElementMixin as d, buttonCommonStyle as y, buttonSecondaryStyle as f } from "../common.js";
+let k = (() => {
+  var e;
+  let n = [m("sbb-secondary-button-link")], l, i = [], t, o = d(c(u(b)));
+  return e = class extends o {
+  }, t = e, (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
+    r(null, l = { value: t }, n, { kind: "class", name: t.name, metadata: a }, null, i), t = l.value, a && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+  })(), e.styles = [
+    S,
+    y,
+    f
+  ], s(t, i), t;
+})();
+export {
+  k as SbbSecondaryButtonLinkElement
+};

package/button/secondary-button-link.js

@@ -0,0 +1,4 @@
+import { SbbSecondaryButtonLinkElement as o } from "./secondary-button-link/secondary-button-link.component.js";
+export {
+  o as SbbSecondaryButtonLinkElement
+};