@sbb-esta/lyne-elements 2.7.0 → 2.8.0

package/option/option/option-base-element.js

@@ -22,7 +22,7 @@ const x = Y, lt = {
 };
 let mt = (() => {
   var _, p, m, f, v, A, l;
-  let a = [W()], s, n = [], h, L = et(at(it(Q))), S = [], y, C, H, k = [], I = [], $, z = [], E = [], F, D = [], N = [], O, T = [], w = [], M, U = [], j = [], B, R = [], q = [];
+  let a = [W()], s, n = [], h, L = et(at(it(Q))), S = [], C, H, y, k = [], I = [], $, z = [], E = [], F, D = [], N = [], O, T = [], w = [], M, U = [], j = [], B, R = [], q = [];
   return l = class extends L {
     constructor() {
       var t;
@@ -150,15 +150,10 @@ let mt = (() => {
     }
     /** Observe changes on data attributes + slotted content and set the appropriate values. */
     onExternalMutation(t) {
-      for (const e of t)
-        if (e.attributeName === "data-group-disabled")
-          this.disabledFromGroup = this.hasAttribute("data-group-disabled"), this.updateAriaDisabled();
-        else if (e.attributeName === "data-negative")
-          this.negative = this.hasAttribute("data-negative");
-        else {
-          this.dispatchEvent(new Event("optionLabelChanged", { bubbles: !0 }));
-          return;
-        }
+      let e = !1;
+      for (const i of t)
+        i.attributeName === "data-group-disabled" ? (this.disabledFromGroup = this.hasAttribute("data-group-disabled"), this.updateAriaDisabled()) : i.attributeName === "data-negative" ? this.negative = this.hasAttribute("data-negative") : e = !0;
+      e && (this.handleHighlightState(), this.dispatchEvent(new Event("optionLabelChanged", { bubbles: !0 })));
     }
     handleHighlightState() {
       const t = Array.from(this.childNodes ?? []).filter((i) => i.nodeType !== Node.COMMENT_NODE && (!(i instanceof Element) || i.slot !== "icon")), e = t.filter((i) => i.nodeType === Node.TEXT_NODE);
@@ -197,7 +192,7 @@ let mt = (() => {
           <span class="sbb-option__label">
             <slot @slotchange=${this.handleHighlightState}></slot>
             ${this.renderLabel()}
-            ${this._inertAriaGroups && this.getAttribute("data-group-label") ? c` <sbb-screen-reader-only>
+            ${this._inertAriaGroups && this.getAttribute("data-group-label") ? c`<sbb-screen-reader-only>
                   (${this.getAttribute("data-group-label")})</sbb-screen-reader-only
                 >` : G}
           </span>
@@ -208,11 +203,11 @@ let mt = (() => {
     }
   }, _ = new WeakMap(), p = new WeakMap(), m = new WeakMap(), f = new WeakMap(), v = new WeakMap(), A = new WeakMap(), h = l, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(L[Symbol.metadata] ?? null) : void 0;
-    y = [X()], C = [X({ type: Boolean })], H = [u()], $ = [u()], F = [u()], O = [u()], M = [u()], B = [u()], o(l, null, y, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (e) => "value" in e, set: (e, i) => {
+    C = [X()], H = [X({ type: Boolean })], y = [u()], $ = [u()], F = [u()], O = [u()], M = [u()], B = [u()], o(l, null, C, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (e) => "value" in e, set: (e, i) => {
       e.value = i;
-    } }, metadata: t }, null, S), o(l, null, C, { kind: "setter", name: "selected", static: !1, private: !1, access: { has: (e) => "selected" in e, set: (e, i) => {
+    } }, metadata: t }, null, S), o(l, null, H, { kind: "setter", name: "selected", static: !1, private: !1, access: { has: (e) => "selected" in e, set: (e, i) => {
       e.selected = i;
-    } }, metadata: t }, null, S), o(l, null, H, { kind: "accessor", name: "negative", static: !1, private: !1, access: { has: (e) => "negative" in e, get: (e) => e.negative, set: (e, i) => {
+    } }, metadata: t }, null, S), o(l, null, y, { kind: "accessor", name: "negative", static: !1, private: !1, access: { has: (e) => "negative" in e, get: (e) => e.negative, set: (e, i) => {
       e.negative = i;
     } }, metadata: t }, k, I), o(l, null, $, { kind: "accessor", name: "disabledFromGroup", static: !1, private: !1, access: { has: (e) => "disabledFromGroup" in e, get: (e) => e.disabledFromGroup, set: (e, i) => {
       e.disabledFromGroup = i;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sbb-esta/lyne-elements",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "description": "Lyne Design System",
   "keywords": [
     "design system",

package/paginator/common/paginator-common.d.ts

@@ -10,8 +10,18 @@ export declare abstract class SbbPaginatorCommonElementMixinType {
     accessor pageIndex: number;
     accessor pagerPosition: 'start' | 'end';
     accessor size: 'm' | 's';
+    nextPage(): void;
+    previousPage(): void;
+    firstPage(): void;
+    lastPage(): void;
+    selectPage(index: number): void;
+    hasPreviousPage(): boolean;
+    hasNextPage(): boolean;
+    numberOfPages(): number;
     protected language: SbbLanguageController;
-    protected numberOfPages(): number;
+    /**
+     * @deprecated Will be removed with next major change.
+     */
     protected pageIndexChanged(value: number): void;
     protected emitPageEvent(previousPageIndex: number): void;
     protected renderPrevNextButtons(): TemplateResult;

package/paginator/common/paginator-common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"paginator-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/paginator/common/paginator-common.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAuB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGtF,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAKlE,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EAAE,KAAK,mBAAmB,EAAsC,MAAM,sBAAsB,CAAC;AAEpG,OAAO,6BAA6B,CAAC;AACrC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,kCAAkC;IAC9D,SAAgB,QAAQ,EAAE,OAAO,CAAC;IAClC,SAAgB,QAAQ,EAAE,OAAO,CAAC;IAClC,SAAgB,MAAM,EAAE,MAAM,CAAC;IAC/B,SAAgB,QAAQ,EAAE,MAAM,CAAC;IACjC,SAAgB,SAAS,EAAE,MAAM,CAAC;IAClC,SAAgB,aAAa,EAAE,OAAO,GAAG,KAAK,CAAC;IAC/C,SAAgB,IAAI,EAAE,GAAG,GAAG,GAAG,CAAC;IAChC,SAAS,CAAC,QAAQ,EAAE,qBAAqB,CAAC;IAC1C,SAAS,CAAC,aAAa,IAAI,MAAM;IACjC,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC/C,SAAS,CAAC,aAAa,CAAC,iBAAiB,EAAE,MAAM,GAAG,IAAI;IACxD,SAAS,CAAC,qBAAqB,IAAI,cAAc;IACjD,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,cAAc;CACrD;AAGD,eAAO,MAAM,8BAA8B,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,EACtF,YAAY,CAAC,KACZ,mBAAmB,CAAC,kCAAkC,CAAC,GAAG,CAqJ5D,CAAC;AAEF,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,mBAAmB;QAC3B,IAAI,EAAE,WAAW,CAAC,4BAA4B,CAAC,CAAC;KACjD;CACF"}
+{"version":3,"file":"paginator-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/paginator/common/paginator-common.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAuB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGtF,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAKlE,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EAAE,KAAK,mBAAmB,EAAsC,MAAM,sBAAsB,CAAC;AAEpG,OAAO,6BAA6B,CAAC;AACrC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,kCAAkC;IAC9D,SAAgB,QAAQ,EAAE,OAAO,CAAC;IAClC,SAAgB,QAAQ,EAAE,OAAO,CAAC;IAClC,SAAgB,MAAM,EAAE,MAAM,CAAC;IAC/B,SAAgB,QAAQ,EAAE,MAAM,CAAC;IACjC,SAAgB,SAAS,EAAE,MAAM,CAAC;IAClC,SAAgB,aAAa,EAAE,OAAO,GAAG,KAAK,CAAC;IAC/C,SAAgB,IAAI,EAAE,GAAG,GAAG,GAAG,CAAC;IACzB,QAAQ,IAAI,IAAI;IAChB,YAAY,IAAI,IAAI;IACpB,SAAS,IAAI,IAAI;IACjB,QAAQ,IAAI,IAAI;IAChB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC/B,eAAe,IAAI,OAAO;IAC1B,WAAW,IAAI,OAAO;IACtB,aAAa,IAAI,MAAM;IAC9B,SAAS,CAAC,QAAQ,EAAE,qBAAqB,CAAC;IAC1C;;OAEG;IACH,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC/C,SAAS,CAAC,aAAa,CAAC,iBAAiB,EAAE,MAAM,GAAG,IAAI;IACxD,SAAS,CAAC,qBAAqB,IAAI,cAAc;IACjD,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,cAAc;CACrD;AAGD,eAAO,MAAM,8BAA8B,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,EACtF,YAAY,CAAC,KACZ,mBAAmB,CAAC,kCAAkC,CAAC,GAAG,CAwL5D,CAAC;AAEF,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,mBAAmB;QAC3B,IAAI,EAAE,WAAW,CAAC,4BAA4B,CAAC,CAAC;KACjD;CACF"}

package/paginator/common/paginator-common.js

@@ -1,11 +1,11 @@
-var $ = (a) => {
+var k = (a) => {
   throw TypeError(a);
 };
-var k = (a, i, s) => i.has(a) || $("Cannot " + s);
-var _ = (a, i, s) => (k(a, i, "read from private field"), s ? s.call(a) : i.get(a)), x = (a, i, s) => i.has(a) ? $("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(a) : i.set(a, s), d = (a, i, s, m) => (k(a, i, "write to private field"), m ? m.call(a, s) : i.set(a, s), s);
+var C = (a, i, s) => i.has(a) || k("Cannot " + s);
+var x = (a, i, s) => (C(a, i, "read from private field"), s ? s.call(a) : i.get(a)), _ = (a, i, s) => i.has(a) ? k("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(a) : i.set(a, s), d = (a, i, s, m) => (C(a, i, "write to private field"), m ? m.call(a, s) : i.set(a, s), s);
 import { __runInitializers as h, __esDecorate as p } from "tslib";
 import { html as O } from "lit";
-import { property as c } from "lit/decorators.js";
+import { property as u } from "lit/decorators.js";
 import { SbbLanguageController as w } from "../../core/controllers.js";
 import { hostAttributes as D } from "../../core/decorators.js";
 import { isLean as L } from "../../core/dom.js";
@@ -16,16 +16,16 @@ import "../../button/mini-button.js";
 import "../../button/mini-button-group.js";
 import "../../divider.js";
 const ae = (a) => (() => {
-  var l, g, n;
+  var o, l, n;
   let s = [D({
     role: "group"
-  })], m, z = [], o, I = B(T(a)), u = [], f, P, S, v, y = [], E = [], N, C = [], M = [];
-  var b = (n = class extends I {
+  })], m, P = [], g, z = B(T(a)), c = [], I, f, S, v, y = [], N = [], E, M = [], $ = [];
+  var b = (n = class extends z {
     constructor() {
       super(...arguments);
-      x(this, l);
-      x(this, g);
-      this._length = (h(this, u), 0), this._pageSize = 10, this._pageIndex = 0, d(this, l, h(this, y, "start")), d(this, g, (h(this, E), h(this, C, L() ? "s" : "m"))), this._page = (h(this, M), new R(this, b.events.page, { composed: !0, bubbles: !0 })), this.language = new w(this);
+      _(this, o);
+      _(this, l);
+      this._length = (h(this, c), 0), this._pageSize = 10, this._pageIndex = 0, d(this, o, h(this, y, "start")), d(this, l, (h(this, N), h(this, M, L() ? "s" : "m"))), this._page = (h(this, $), new R(this, b.events.page, { composed: !0, bubbles: !0 })), this.language = new w(this);
     }
     /** Total number of items. */
     set length(e) {
@@ -44,27 +44,28 @@ const ae = (a) => (() => {
     }
     /** Current page index. */
     set pageIndex(e) {
-      this._pageIndex = this._coercePageIndexInRange(e);
+      const t = this._pageIndex;
+      this._pageIndex = this._coercePageIndexInRange(e), this.emitPageEvent(t);
     }
     get pageIndex() {
       return this._pageIndex;
     }
     /** Position of the prev/next buttons. */
     get pagerPosition() {
-      return _(this, l);
+      return x(this, o);
     }
     set pagerPosition(e) {
-      d(this, l, e);
+      d(this, o, e);
     }
     /**
      * Size variant, either m or s.
      * @default 'm' / 's' (lean)
      */
     get size() {
-      return _(this, g);
+      return x(this, l);
     }
     set size(e) {
-      d(this, g, e);
+      d(this, l, e);
     }
     updated(e) {
       super.updated(e), this.shadowRoot.querySelector("sbb-screen-reader-only").textContent = this._currentPageLabel();
@@ -76,6 +77,35 @@ const ae = (a) => (() => {
     _currentPageLabel() {
       return j(this.pageIndex + 1)[this.language.current];
     }
+    /** Advances to the next page if it exists. */
+    nextPage() {
+      this.pageIndex = this.pageIndex + 1;
+    }
+    /** Move back to the previous page if it exists. */
+    previousPage() {
+      this.pageIndex = this.pageIndex - 1;
+    }
+    /** Move to the first page if not already there. */
+    firstPage() {
+      this.pageIndex = 0;
+    }
+    /** Move to the last page if not already there. */
+    lastPage() {
+      this.pageIndex = this.numberOfPages() - 1;
+    }
+    /** Move to a specific page index. */
+    selectPage(e) {
+      this.pageIndex = e;
+    }
+    /** Whether there is a previous page. */
+    hasPreviousPage() {
+      return this.pageIndex >= 1 && this.pageSize !== 0;
+    }
+    /** Whether there is a next page. */
+    hasNextPage() {
+      const e = this.numberOfPages() - 1;
+      return this.pageIndex < e && this.pageSize !== 0;
+    }
     /**
      * Calculates the current number of pages based on the `length` and the `pageSize`;
      * value must be rounded up (e.g. `length = 21` and `pageSize = 10` means 3 pages).
@@ -86,10 +116,10 @@ const ae = (a) => (() => {
     /**
      * If the `pageIndex` changes due to user interaction,
      * emit the `page` event and then update the `pageIndex` value.
+     * @deprecated Will be removed with next major change.
      */
     pageIndexChanged(e) {
-      const t = this.pageIndex;
-      this.pageIndex = e, t !== this.pageIndex && this.emitPageEvent(t);
+      this.pageIndex = e;
     }
     emitPageEvent(e) {
       this._page.emit({
@@ -106,16 +136,16 @@ const ae = (a) => (() => {
             id="sbb-paginator-prev-page"
             aria-label=${q[this.language.current]}
             icon-name="chevron-small-left-small"
-            ?disabled=${this.disabled || this.pageIndex === 0}
-            @click=${() => this.pageIndexChanged(this._pageIndex - 1)}
+            ?disabled=${this.disabled || !this.hasPreviousPage()}
+            @click=${() => this.previousPage()}
           ></sbb-mini-button>
           <sbb-divider orientation="vertical"></sbb-divider>
           <sbb-mini-button
             id="sbb-paginator-next-page"
             aria-label=${A[this.language.current]}
             icon-name="chevron-small-right-small"
-            ?disabled=${this.disabled || this.pageIndex === this.numberOfPages() - 1}
-            @click=${() => this.pageIndexChanged(this._pageIndex + 1)}
+            ?disabled=${this.disabled || !this.hasNextPage()}
+            @click=${() => this.nextPage()}
           ></sbb-mini-button>
         </sbb-mini-button-group>
       `;
@@ -126,23 +156,23 @@ const ae = (a) => (() => {
         <sbb-screen-reader-only role="status"></sbb-screen-reader-only>
       `;
     }
-  }, l = new WeakMap(), g = new WeakMap(), o = n, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(I[Symbol.metadata] ?? null) : void 0;
-    f = [c({ type: Number })], P = [c({ attribute: "page-size", type: Number })], S = [c({ attribute: "page-index", type: Number })], v = [c({ attribute: "pager-position", reflect: !0 })], N = [c({ reflect: !0 })], p(n, null, f, { kind: "setter", name: "length", static: !1, private: !1, access: { has: (t) => "length" in t, set: (t, r) => {
+  }, o = new WeakMap(), l = new WeakMap(), g = n, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(z[Symbol.metadata] ?? null) : void 0;
+    I = [u({ type: Number })], f = [u({ attribute: "page-size", type: Number })], S = [u({ attribute: "page-index", type: Number })], v = [u({ attribute: "pager-position", reflect: !0 })], E = [u({ reflect: !0 })], p(n, null, I, { kind: "setter", name: "length", static: !1, private: !1, access: { has: (t) => "length" in t, set: (t, r) => {
       t.length = r;
-    } }, metadata: e }, null, u), p(n, null, P, { kind: "setter", name: "pageSize", static: !1, private: !1, access: { has: (t) => "pageSize" in t, set: (t, r) => {
+    } }, metadata: e }, null, c), p(n, null, f, { kind: "setter", name: "pageSize", static: !1, private: !1, access: { has: (t) => "pageSize" in t, set: (t, r) => {
       t.pageSize = r;
-    } }, metadata: e }, null, u), p(n, null, S, { kind: "setter", name: "pageIndex", static: !1, private: !1, access: { has: (t) => "pageIndex" in t, set: (t, r) => {
+    } }, metadata: e }, null, c), p(n, null, S, { kind: "setter", name: "pageIndex", static: !1, private: !1, access: { has: (t) => "pageIndex" in t, set: (t, r) => {
       t.pageIndex = r;
-    } }, metadata: e }, null, u), p(n, null, v, { kind: "accessor", name: "pagerPosition", static: !1, private: !1, access: { has: (t) => "pagerPosition" in t, get: (t) => t.pagerPosition, set: (t, r) => {
+    } }, metadata: e }, null, c), p(n, null, v, { kind: "accessor", name: "pagerPosition", static: !1, private: !1, access: { has: (t) => "pagerPosition" in t, get: (t) => t.pagerPosition, set: (t, r) => {
       t.pagerPosition = r;
-    } }, metadata: e }, y, E), p(n, null, N, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, r) => {
+    } }, metadata: e }, y, N), p(n, null, E, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, r) => {
       t.size = r;
-    } }, metadata: e }, C, M), p(null, m = { value: o }, s, { kind: "class", name: o.name, metadata: e }, null, z), b = o = m.value, e && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+    } }, metadata: e }, M, $), p(null, m = { value: g }, s, { kind: "class", name: g.name, metadata: e }, null, P), b = g = m.value, e && Object.defineProperty(g, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
   })(), n.events = {
     page: "page"
-  }, h(o, z), n);
-  return b = o;
+  }, h(g, P), n);
+  return b = g;
 })();
 export {
   ae as SbbPaginatorCommonElementMixin

package/paginator/paginator/paginator.js

@@ -14,7 +14,7 @@ import "../../form-field.js";
 import "../../select.js";
 import "../../option.js";
 import "../../screen-reader-only.js";
-const C = E`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-paginator-height: var(--sbb-size-element-m);--sbb-paginator-page-color: var(--sbb-color-metal);--sbb-paginator-page-background-color: transparent;--sbb-paginator-page-border-width: 0;--sbb-paginator-page-border-style: none;--sbb-paginator-page-border-color: none;--sbb-paginator-page-cursor: pointer;--sbb-paginator-page-inset: 0;--sbb-paginator-animation-easing: var(--sbb-animation-easing);--sbb-paginator-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-paginator-justify-content: start;--sbb-paginator-wrapping-group-wrap: wrap-reverse;--sbb-paginator-wrap: wrap}:host([size=s]){--sbb-paginator-height: var(--sbb-size-element-xs)}:host([negative]){--sbb-paginator-page-color: var(--sbb-color-smoke);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host([pager-position=end]){--sbb-paginator-justify-content: end;--sbb-paginator-wrapping-group-wrap: wrap;--sbb-paginator-wrap: wrap-reverse}.sbb-paginator,.sbb-paginator__wrapping-group{display:flex;gap:var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);justify-content:var(--sbb-paginator-justify-content)}.sbb-paginator{flex-wrap:var(--sbb-paginator-wrap);min-height:var(--sbb-paginator-height)}.sbb-paginator__wrapping-group{flex-wrap:var(--sbb-paginator-wrapping-group-wrap)}.sbb-paginator__page-size-options{--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:flex;align-items:center;gap:var(--sbb-spacing-fixed-2x);white-space:nowrap;color:var(--sbb-paginator-page-color)}.sbb-paginator__page-size-options sbb-select{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);color:var(--sbb-form-field-text-color);font-size:var(--sbb-form-field-input-text-size);padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}.sbb-paginator__pages{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;align-items:center;justify-content:center;gap:var(--sbb-spacing-fixed-1x);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.sbb-paginator__page--ellipsis,.sbb-paginator__page--number{--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);position:relative;color:var(--sbb-paginator-page-color)}.sbb-paginator__page--ellipsis-item,.sbb-paginator__page--number-item{display:flex;justify-content:center;align-items:center;width:var(--sbb-size-element-xxs);height:var(--sbb-size-element-xxs)}.sbb-paginator__page--number-item{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--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);position:relative;cursor:var(--sbb-paginator-page-cursor);outline:none!important;color:var(--sbb-paginator-page-color);transition:color var(--sbb-paginator-animation-duration) var(--sbb-paginator-animation-easing)}.sbb-paginator__page--number-item:before{content:"";position:absolute;background-color:var(--sbb-paginator-page-background-color);border:var(--sbb-paginator-page-border-width) var(--sbb-paginator-page-border-style) var(--sbb-paginator-page-border-color);border-radius:var(--sbb-border-radius-infinity);inset:var(--sbb-paginator-page-inset);transition-property:background-color,border,inset;transition-duration:var(--sbb-paginator-animation-duration);transition-timing-function:var(--sbb-paginator-animation-easing)}.sbb-paginator__page--number-item:focus-visible: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);outline-offset:var(--sbb-border-width-2x)}.sbb-paginator__page--number-item[data-selected]{font-weight:700;--sbb-paginator-page-color: var(--sbb-color-charcoal);--sbb-paginator-page-border-width: var(--sbb-border-width-2x);--sbb-paginator-page-border-style: solid;--sbb-paginator-page-border-color: var(--sbb-color-charcoal)}:host([negative]) .sbb-paginator__page--number-item[data-selected]{--sbb-paginator-page-color: var(--sbb-color-milk);--sbb-paginator-page-border-color: var(--sbb-color-white)}@media (forced-colors: active){.sbb-paginator__page--number-item[data-selected]{--sbb-paginator-page-border-color: Highlight !important}}.sbb-paginator__page--number-item:disabled{--sbb-paginator-page-color: var(--sbb-color-smoke);--sbb-paginator-page-border-style: dashed;--sbb-paginator-page-border-color: var(--sbb-color-smoke);--sbb-paginator-page-background-color: var(--sbb-color-milk);--sbb-paginator-page-cursor: default}.sbb-paginator__page--number-item:disabled:not([data-selected]){--sbb-paginator-page-border-width: var(--sbb-border-width-1x)}:host([negative]) .sbb-paginator__page--number-item:disabled{--sbb-paginator-page-color: var(--sbb-color-aluminium);--sbb-paginator-page-background-color: var(--sbb-color-charcoal)}@media (forced-colors: active){.sbb-paginator__page--number-item:disabled{--sbb-paginator-page-border-color: GrayText;--sbb-paginator-page-color: GrayText;--sbb-paginator-page-background-color: Canvas}}@media (any-hover: hover){.sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color: var(--sbb-color-milk);--sbb-paginator-page-inset: calc(var(--sbb-border-width-2x) * -1);--sbb-paginator-translate-y-content-hover: -.0625rem}:host([negative]) .sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color: var(--sbb-color-charcoal)}}@media (any-hover: hover) and (forced-colors: active){.sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color: Highlight !important}}.sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-page-color: var(--sbb-color-charcoal);--sbb-paginator-page-background-color: var(--sbb-color-cloud);--sbb-paginator-page-inset: 0;--sbb-paginator-translate-y-content-hover: 0}:host([negative]) .sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-page-color: var(--sbb-color-milk);--sbb-paginator-page-background-color: var(--sbb-color-iron)}@media (forced-colors: active){.sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-page-background-color: Highlight !important}}.sbb-paginator__page--number-item-label{transition:transform var(--sbb-paginator-animation-duration) var(--sbb-paginator-animation-easing);transform:translateY(var(--sbb-paginator-translate-y-content-hover, 0rem))}.sbb-screen-reader-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`, l = 3;
+const M = E`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-paginator-height: var(--sbb-size-element-m);--sbb-paginator-page-color: var(--sbb-color-metal);--sbb-paginator-page-background-color: transparent;--sbb-paginator-page-border-width: 0;--sbb-paginator-page-border-style: none;--sbb-paginator-page-border-color: none;--sbb-paginator-page-cursor: pointer;--sbb-paginator-page-inset: 0;--sbb-paginator-animation-easing: var(--sbb-animation-easing);--sbb-paginator-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-paginator-justify-content: start;--sbb-paginator-wrapping-group-wrap: wrap-reverse;--sbb-paginator-wrap: wrap}:host([size=s]){--sbb-paginator-height: var(--sbb-size-element-xs)}:host([negative]){--sbb-paginator-page-color: var(--sbb-color-smoke);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host([pager-position=end]){--sbb-paginator-justify-content: end;--sbb-paginator-wrapping-group-wrap: wrap;--sbb-paginator-wrap: wrap-reverse}.sbb-paginator,.sbb-paginator__wrapping-group{display:flex;gap:var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);justify-content:var(--sbb-paginator-justify-content)}.sbb-paginator{flex-wrap:var(--sbb-paginator-wrap);min-height:var(--sbb-paginator-height)}.sbb-paginator__wrapping-group{flex-wrap:var(--sbb-paginator-wrapping-group-wrap)}.sbb-paginator__page-size-options{--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:flex;align-items:center;gap:var(--sbb-spacing-fixed-2x);white-space:nowrap;color:var(--sbb-paginator-page-color)}.sbb-paginator__page-size-options sbb-select{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);color:var(--sbb-form-field-text-color);font-size:var(--sbb-form-field-input-text-size);padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}.sbb-paginator__pages{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;align-items:center;justify-content:center;gap:var(--sbb-spacing-fixed-1x);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.sbb-paginator__page--ellipsis,.sbb-paginator__page--number{--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);position:relative;color:var(--sbb-paginator-page-color)}.sbb-paginator__page--ellipsis-item,.sbb-paginator__page--number-item{display:flex;justify-content:center;align-items:center;width:var(--sbb-size-element-xxs);height:var(--sbb-size-element-xxs)}.sbb-paginator__page--number-item{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--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);position:relative;cursor:var(--sbb-paginator-page-cursor);outline:none!important;color:var(--sbb-paginator-page-color);transition:color var(--sbb-paginator-animation-duration) var(--sbb-paginator-animation-easing)}.sbb-paginator__page--number-item:before{content:"";position:absolute;background-color:var(--sbb-paginator-page-background-color);border:var(--sbb-paginator-page-border-width) var(--sbb-paginator-page-border-style) var(--sbb-paginator-page-border-color);border-radius:var(--sbb-border-radius-infinity);inset:var(--sbb-paginator-page-inset);transition-property:background-color,border,inset;transition-duration:var(--sbb-paginator-animation-duration);transition-timing-function:var(--sbb-paginator-animation-easing)}.sbb-paginator__page--number-item:focus-visible: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);outline-offset:var(--sbb-border-width-2x)}.sbb-paginator__page--number-item[data-selected]{font-weight:700;--sbb-paginator-page-color: var(--sbb-color-charcoal);--sbb-paginator-page-border-width: var(--sbb-border-width-2x);--sbb-paginator-page-border-style: solid;--sbb-paginator-page-border-color: var(--sbb-color-charcoal)}:host([negative]) .sbb-paginator__page--number-item[data-selected]{--sbb-paginator-page-color: var(--sbb-color-milk);--sbb-paginator-page-border-color: var(--sbb-color-white)}@media (forced-colors: active){.sbb-paginator__page--number-item[data-selected]{--sbb-paginator-page-border-color: Highlight !important}}.sbb-paginator__page--number-item:disabled{--sbb-paginator-page-color: var(--sbb-color-smoke);--sbb-paginator-page-border-style: dashed;--sbb-paginator-page-border-color: var(--sbb-color-smoke);--sbb-paginator-page-background-color: var(--sbb-color-milk);--sbb-paginator-page-cursor: default}.sbb-paginator__page--number-item:disabled:not([data-selected]){--sbb-paginator-page-border-width: var(--sbb-border-width-1x)}:host([negative]) .sbb-paginator__page--number-item:disabled{--sbb-paginator-page-color: var(--sbb-color-aluminium);--sbb-paginator-page-background-color: var(--sbb-color-charcoal)}@media (forced-colors: active){.sbb-paginator__page--number-item:disabled{--sbb-paginator-page-border-color: GrayText;--sbb-paginator-page-color: GrayText;--sbb-paginator-page-background-color: Canvas}}@media (any-hover: hover){.sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color: var(--sbb-color-milk);--sbb-paginator-page-inset: calc(var(--sbb-border-width-2x) * -1);--sbb-paginator-translate-y-content-hover: -.0625rem}:host([negative]) .sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color: var(--sbb-color-charcoal)}}@media (any-hover: hover) and (forced-colors: active){.sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color: Highlight !important}}.sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-page-color: var(--sbb-color-charcoal);--sbb-paginator-page-background-color: var(--sbb-color-cloud);--sbb-paginator-page-inset: 0;--sbb-paginator-translate-y-content-hover: 0}:host([negative]) .sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-page-color: var(--sbb-color-milk);--sbb-paginator-page-background-color: var(--sbb-color-iron)}@media (forced-colors: active){.sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-page-background-color: Highlight !important}}.sbb-paginator__page--number-item-label{transition:transform var(--sbb-paginator-animation-duration) var(--sbb-paginator-animation-easing);transform:translateY(var(--sbb-paginator-translate-y-content-hover, 0rem))}.sbb-screen-reader-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`, l = 3;
 let Q = (() => {
   var p, g, s;
   let t = [A("sbb-paginator")], r, i = [], o, v = T(j), f, _ = [], y = [], x, z = [], w = [];
@@ -130,7 +130,7 @@ let Q = (() => {
                       data-index=${e}
                       aria-label="${N[this.language.current]} ${e + 1}"
                       aria-current=${this.pageIndex === e ? "true" : S}
-                      @click=${() => this.pageIndexChanged(e)}
+                      @click=${() => this.pageIndex = e}
                       @keyup=${this._handleKeyUp}
                     >
                       <span class="sbb-paginator__page--number-item-label">${e + 1}</span>
@@ -160,7 +160,7 @@ let Q = (() => {
     } }, metadata: e }, _, y), h(s, null, x, { kind: "accessor", name: "pagerPosition", static: !1, private: !1, access: { has: (a) => "pagerPosition" in a, get: (a) => a.pagerPosition, set: (a, n) => {
       a.pagerPosition = n;
     } }, metadata: e }, z, w), h(null, r = { value: o }, t, { kind: "class", name: o.name, metadata: e }, null, i), o = r.value, e && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), s.styles = C, s.events = {
+  })(), s.styles = M, s.events = {
     page: "page"
   }, d(o, i), o;
 })();

package/standard-theme.css

@@ -106,7 +106,7 @@ summary {
 
 /**
  * Do not edit directly
- * Generated on Wed, 19 Mar 2025 15:25:09 GMT
+ * Generated on Thu, 17 Apr 2025 11:20:53 GMT
  */
 *,
 ::before,
@@ -685,6 +685,10 @@ summary {
    * Original Value: 64px
    */
   --sbb-size-element-l-ultra: 4rem;
+  /**
+   * Original Value: 16px
+   */
+  --sbb-size-icon-ui-extra-small: 1rem;
   /**
    * Original Value: 24px
    */
@@ -1219,7 +1223,7 @@ summary {
   --sbb-time-input-max-width: 3.625rem;
   --sbb-time-input-s-max-width: 3.1875rem;
   --sbb-overlay-default-z-index: 1000;
-  --sbb-border-radius-infinity: 10000000em;
+  --sbb-border-radius-infinity: 100000em;
 }
 :root:has(sbb-header[size=s]) {
   --sbb-header-height: 3.25rem;
@@ -1323,6 +1327,11 @@ sbb-form-field :where(select) {
 sbb-form-field :where(select, sbb-select) {
   padding-inline-end: var(--sbb-form-field-select-inline-padding-end);
 }
+sbb-form-field[size=s] :where(input, sbb-date-input) {
+  height: calc(var(--sbb-form-field-input-text-size) * 1.25);
+  line-height: 1 !important;
+  margin-block: calc(0.5 * var(--sbb-form-field-input-text-size) * (var(--sbb-typo-line-height-body-text) - 1.25));
+}
 sbb-form-field :where(textarea) {
   --sbb-scrollbar-thumb-width: 0.125rem;
   --sbb-scrollbar-thumb-width-hover: 0.25rem;
@@ -1645,6 +1654,12 @@ sbb-form-field .sbb-select-trigger {
   top: 0;
 }
 
+sbb-toggle:has(: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);
+  --sbb-focus-outline-offset: 0.3125rem;
+}
+
 sub {
   bottom: -0.36em;
 }

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

@@ -1,15 +1,18 @@
 import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
 declare const SbbTableWrapperElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbNegativeMixinType> & typeof LitElement;
 /**
- * Wraps a table to enhance its functionality
+ * Wraps a table to enhance its functionality.
  *
  * @slot - Use the unnamed slot to add the table.
  */
 export declare class SbbTableWrapperElement extends SbbTableWrapperElement_base {
     static styles: CSSResultGroup;
-    private _resizeObserver;
-    private _tableWrapper;
-    protected firstUpdated(changedProperties: PropertyValues<this>): void;
+    /** Whether the table wrapper is focusable. */
+    accessor focusable: boolean;
+    constructor();
+    connectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    private _updateScrollbarClass;
     /**
      *  Calculates whether the table is horizontally scrolled and adds the
      *  corresponding class `sbb-table-wrapper-offset-${none | left | right | both}`

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

@@ -1 +1 @@
-{"version":3,"file":"table-wrapper.d.ts","sourceRoot":"","sources":["../../../../src/elements/table/table-wrapper/table-wrapper.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;;AAOb;;;;GAIG;AACH,qBAEM,sBAAuB,SAAQ,2BAA4B;IAC/D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,eAAe,CAIpB;IACH,OAAO,CAAC,aAAa,CAAe;cAEjB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAU9E;;;OAGG;IACH,OAAO,CAAC,+BAA+B;IAWvC,OAAO,CAAC,sBAAsB;cAiBX,MAAM,IAAI,cAAc;CAK5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}
+{"version":3,"file":"table-wrapper.d.ts","sourceRoot":"","sources":["../../../../src/elements/table/table-wrapper/table-wrapper.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAGnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;;AAQb;;;;GAIG;AACH,qBAEM,sBAAuB,SAAQ,2BAA4B;IAC/D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,8CAA8C;IAC9C,SAEgB,SAAS,EAAE,OAAO,CAAS;;IAqB3B,iBAAiB,IAAI,IAAI;cAStB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAkB5E,OAAO,CAAC,qBAAqB;IAa7B;;;OAGG;IACH,OAAO,CAAC,+BAA+B;IAWvC,OAAO,CAAC,sBAAsB;cAeX,MAAM,IAAI,cAAc;CAG5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}

package/table/table-wrapper/table-wrapper.js

@@ -1,50 +1,72 @@
-import { __esDecorate as i, __runInitializers as p } from "tslib";
-import { ResizeController as n } from "@lit-labs/observers/resize-controller.js";
-import { css as h, LitElement as d, html as u } from "lit";
-import { customElement as f } from "lit/decorators.js";
-import { SbbNegativeMixin as w } from "../../core/mixins.js";
-const v = h`*,:before,:after{box-sizing:border-box}:host{--sbb-table-wrapper-border-radius: var(--sbb-border-radius-4x);display:block}::slotted(.sbb-table){width:100%}.sbb-table-wrapper{height:100%;overflow:auto;--sbb-scrollbar-thumb-width: .5rem;--sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);--sbb-scrollbar-width-firefox: auto;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: var(--sbb-color-cloud);--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-table-wrapper::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-table-wrapper::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-table-wrapper::-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-table-wrapper::-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-table-wrapper::-webkit-scrollbar-button,.sbb-table-wrapper::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-table-wrapper{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}:host([negative]) .sbb-table-wrapper{--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-scrollbar-track-color: var(--sbb-color-iron)}:host(:not(.sbb-table-wrapper-offset-none)) .sbb-table-wrapper{padding-bottom:var(--sbb-spacing-fixed-1x)}`;
-let S = (() => {
-  var b;
-  let o = [f("sbb-table-wrapper")], a, e = [], t, l = w(d);
-  return b = class extends l {
+var h = (t) => {
+  throw TypeError(t);
+};
+var d = (t, s, l) => s.has(t) || h("Cannot " + l);
+var p = (t, s, l) => (d(t, s, "read from private field"), l ? l.call(t) : s.get(t)), m = (t, s, l) => s.has(t) ? h("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, l), v = (t, s, l, i) => (d(t, s, "write to private field"), i ? i.call(t, l) : s.set(t, l), l);
+import { __esDecorate as _, __runInitializers as c } from "tslib";
+import { ResizeController as S } from "@lit-labs/observers/resize-controller.js";
+import { css as w, LitElement as y, isServer as g, html as x } from "lit";
+import { customElement as L, property as z } from "lit/decorators.js";
+import { forceType as C } from "../../core/decorators.js";
+import { SbbNegativeMixin as O } from "../../core/mixins.js";
+const E = w`*,:before,:after{box-sizing:border-box}:host{display:block;overflow:auto}:host(:not(.sbb-table-wrapper-offset-none)){padding-bottom:var(--sbb-spacing-fixed-1x)}:host(: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)}::slotted(.sbb-table){width:100%}`;
+let B = (() => {
+  var o, r;
+  let t = [L("sbb-table-wrapper")], s, l = [], i, b = O(y), n, f = [], u = [];
+  return r = class extends b {
     constructor() {
-      super(...arguments), this._resizeObserver = new n(this, {
-        target: null,
+      var a;
+      super();
+      m(this, o, c(this, f, !1));
+      c(this, u);
+      const e = this.attachInternals();
+      e.role = "section", this.addController(new S(this, {
         skipInitial: !0,
         callback: () => this._checkHorizontalScrollbarOffset()
+      })), (a = this.addEventListener) == null || a.call(this, "scroll", () => this._checkHorizontalScrollbarOffset(), {
+        passive: !0
       });
     }
-    firstUpdated(r) {
-      super.firstUpdated(r), this._tableWrapper = this.shadowRoot.querySelector(".sbb-table-wrapper"), this._tableWrapper.addEventListener("scroll", () => this._checkHorizontalScrollbarOffset(), {
-        passive: !0
-      }), this._resizeObserver.observe(this._tableWrapper);
+    /** Whether the table wrapper is focusable. */
+    get focusable() {
+      return p(this, o);
+    }
+    set focusable(e) {
+      v(this, o, e);
+    }
+    connectedCallback() {
+      super.connectedCallback(), this._updateScrollbarClass();
+    }
+    willUpdate(e) {
+      super.willUpdate(e), e.has("focusable") && (this.focusable ? this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0") : this.removeAttribute("tabindex")), e.has("negative") && this._updateScrollbarClass();
+    }
+    _updateScrollbarClass() {
+      g || (this.negative ? (this.classList.remove("sbb-scrollbar-thick-track-visible"), this.classList.add("sbb-scrollbar-thick-negative-track-visible")) : (this.classList.remove("sbb-scrollbar-thick-negative-track-visible"), this.classList.add("sbb-scrollbar-thick-track-visible")));
     }
     /**
      *  Calculates whether the table is horizontally scrolled and adds the
      *  corresponding class `sbb-table-wrapper-offset-${none | left | right | both}`
      */
     _checkHorizontalScrollbarOffset() {
-      const r = this._calculateScrollOffset();
-      this.classList.remove("sbb-table-wrapper-offset-none", "sbb-table-wrapper-offset-left", "sbb-table-wrapper-offset-right", "sbb-table-wrapper-offset-both"), this.classList.add(`sbb-table-wrapper-offset-${r}`);
+      const e = this._calculateScrollOffset();
+      this.classList.remove("sbb-table-wrapper-offset-none", "sbb-table-wrapper-offset-left", "sbb-table-wrapper-offset-right", "sbb-table-wrapper-offset-both"), this.classList.add(`sbb-table-wrapper-offset-${e}`);
     }
     _calculateScrollOffset() {
-      const r = this._tableWrapper;
-      if (r.scrollWidth === r.offsetWidth)
+      if (this.scrollWidth === this.offsetWidth)
         return "none";
-      const c = r.scrollLeft === 0, s = r.scrollWidth - r.scrollLeft - r.offsetWidth <= 1;
-      return c ? s ? "none" : "right" : s ? "left" : "both";
+      const e = this.scrollLeft === 0, a = this.scrollWidth - this.scrollLeft - this.offsetWidth <= 1;
+      return e ? a ? "none" : "right" : a ? "left" : "both";
     }
     render() {
-      return u`<div class="sbb-table-wrapper">
-      <slot></slot>
-    </div>`;
-    }
-  }, t = b, (() => {
-    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
-    i(null, a = { value: t }, o, { kind: "class", name: t.name, metadata: r }, null, e), t = a.value, r && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
-  })(), b.styles = v, p(t, e), t;
+      return x`<slot></slot>`;
+    }
+  }, o = new WeakMap(), i = r, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
+    n = [C(), z({ reflect: !0, type: Boolean })], _(r, null, n, { kind: "accessor", name: "focusable", static: !1, private: !1, access: { has: (a) => "focusable" in a, get: (a) => a.focusable, set: (a, k) => {
+      a.focusable = k;
+    } }, metadata: e }, f, u), _(null, s = { value: i }, t, { kind: "class", name: i.name, metadata: e }, null, l), i = s.value, e && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), r.styles = E, c(i, l), i;
 })();
 export {
-  S as SbbTableWrapperElement
+  B as SbbTableWrapperElement
 };

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

@@ -1 +1 @@
-{"version":3,"file":"teaser-hero.d.ts","sourceRoot":"","sources":["../../../src/elements/teaser-hero/teaser-hero.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAW,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAIxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAK9D,OAAO,8BAA8B,CAAC;AAEtC;;;;;;;GAOG;AACH,qBAGM,oBAAqB,SAAQ,kBAAkB;IACnD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,uBAAuB;IACvB,SAEgB,WAAW,EAAE,MAAM,CAAM;IAEzC,OAAO,CAAC,iBAAiB;cAIN,cAAc,IAAI,cAAc;CAqBpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}
+{"version":3,"file":"teaser-hero.d.ts","sourceRoot":"","sources":["../../../src/elements/teaser-hero/teaser-hero.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAK9D,OAAO,8BAA8B,CAAC;AAEtC;;;;;;;GAOG;AACH,qBAGM,oBAAqB,SAAQ,kBAAkB;IACnD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,uBAAuB;IACvB,SAEgB,WAAW,EAAE,MAAM,CAAM;IAEzC,OAAO,CAAC,iBAAiB;cAIN,cAAc,IAAI,cAAc;CAmBpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}