scb-wc 0.1.2 → 0.1.4

package/scb-table-advanced/scb-table-advanced.js

@@ -0,0 +1,327 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "../scb-icon-button/scb-icon-button.js";
+import "../scb-search/scb-search.js";
+import "../scb-pagination/scb-pagination.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+//#region src/scb-test-components/scb-table-advanced/scb-table-advanced.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.searchTerm = "", this.pagination = !1, this.filteringSearch = !1, this.noScroll = !1, this.pageSize = 10, this.currentPage = 1, this.totalRows = 0, this._sortedColumn = null, this._sortDirection = "asc", this._filteredRows = null, this._tbodyObserver = null, this._observedTbody = null, this._pendingTableRefresh = !1, this._suppressTbodyObserver = !1, this._onSlotChange = () => {
+			this._attachTbodyObserver(), this._refreshFromTableContent();
+		}, this._onPaginationChange = (e) => {
+			let t = e.detail;
+			t && typeof t.page == "number" && this._changePage(t.page);
+		};
+	}
+	static {
+		this.styles = n`
+      :host {
+        display: block;
+        color: var(--md-sys-color-on-surface);
+        font-family: var(--brand, Inter);
+        --scb-background-row: var(--md-sys-color-surface);
+      }
+      scb-search{
+        max-width: 400px;
+      }
+      .scb-table-scroll-wrapper {
+        width: 100%;
+        overflow-x: auto;
+        overflow-y: auto;
+        max-width: 100%;
+        padding-bottom: 24px;
+        /* Optional: set max-height if you want vertical scroll */
+      }
+      .scb-table-scroll-wrapper::-webkit-scrollbar {
+        border-radius: var(--md-sys-shape-corner-large);
+        height: 8px;
+        width: 10px;
+      }
+      .scb-table-scroll-wrapper::-webkit-scrollbar-thumb {
+        background: var(--md-sys-color-on-surface);
+        border-radius: var(--md-sys-shape-corner-large);
+        cursor: pointer;
+      }
+      .scb-table-scroll-wrapper::-webkit-scrollbar-track {
+        background: var(--md-sys-color-secondary-container);
+        border-radius: var(--md-sys-shape-corner-large);
+      }
+      ::slotted(table) {
+        border-collapse: collapse;
+        border-spacing: 0;
+        border-radius: 24px;
+        min-width: 100%;
+            overflow: hidden;
+        /* Remove overflow: hidden to allow scroll */
+      }
+      .pagination {
+        margin-top: 16px;
+        display: flex;
+        justify-self: center;
+      }
+      ::slotted(th) .scb-sort-icon {
+        pointer-events: none;
+      }
+      ::slotted(th:hover) .scb-sort-icon {
+        pointer-events: auto;
+      }
+    `;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._disconnectTbodyObserver();
+	}
+	attributeChangedCallback(e, t, n) {
+		if (super.attributeChangedCallback(e, t, n), t !== n) {
+			if (e === "searchterm") {
+				queueMicrotask(() => {
+					this.isConnected && this._filterTable();
+				});
+				return;
+			}
+			if (e === "currentpage") {
+				queueMicrotask(() => {
+					this.isConnected && this._paginateTable();
+				});
+				return;
+			}
+			(e === "page-size" || e === "with-filtering-search" || e === "with-pagination") && this._scheduleTableRefresh();
+		}
+	}
+	render() {
+		let e = Math.ceil(this.totalRows / this.pageSize);
+		return r`
+        ${this.filteringSearch ? r`
+          <div style="margin-bottom: 12px;">
+            <scb-search
+              value=${this.searchTerm}
+              @input=${(e) => this._onSearchInput(e)}
+            />
+          </div>
+        ` : ""}
+        ${this.noScroll ? r`<slot @slotchange=${this._onSlotChange}></slot>` : r`
+          <div class="scb-table-scroll-wrapper">
+            <slot @slotchange=${this._onSlotChange}></slot>
+          </div>
+        `}
+        <div class="pagination">
+          ${this.pagination && e > 1 ? r`
+            <scb-pagination
+              .page=${this.currentPage}
+              .totalPages=${e}
+              @page-change=${this._onPaginationChange}
+              variant="icon"
+            ></scb-pagination>
+          ` : ""}
+        </div>
+      `;
+	}
+	_onSearchInput(e) {
+		let t = e.target.value;
+		this.searchTerm = t, this._filterTable(), this.dispatchEvent(new CustomEvent("tableadvancedchange", {
+			detail: {
+				searchTerm: this.searchTerm,
+				currentPage: this.currentPage
+			},
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_filterTable() {
+		let e = this.shadowRoot.querySelector("slot");
+		if (!e) return;
+		let t = e.assignedNodes({ flatten: !0 }), n = null;
+		if (t.forEach((e) => {
+			if (e.nodeType === Node.ELEMENT_NODE) {
+				let t = e.querySelector("tbody");
+				t && (n = t);
+			}
+		}), !n) return;
+		let r = n, i = Array.from(r.querySelectorAll("tr")), a = this.searchTerm.trim().toLowerCase();
+		if (!a) this._filteredRows = null, i.forEach((e) => e.style.display = ""), this._updateTotalRows(), this._ensureCurrentPageWithinBounds(), this.pagination && this._paginateTable(), this._sortedColumn !== null && this._sortTable(this._sortedColumn, this._sortDirection);
+		else {
+			this._filteredRows = i.filter((e) => (e.textContent?.toLowerCase() ?? "").includes(a)), i.forEach((e) => e.style.display = "none");
+			let e = this._filteredRows;
+			this._sortedColumn !== null && (e = [...e], e.sort((e, t) => {
+				let n = e.children[this._sortedColumn]?.textContent?.trim() ?? "", r = t.children[this._sortedColumn]?.textContent?.trim() ?? "", i = Date.parse(n.replace(/\s+/g, " ")), a = Date.parse(r.replace(/\s+/g, " "));
+				if (!isNaN(i) && !isNaN(a)) return this._sortDirection === "asc" ? i - a : a - i;
+				let o = parseFloat(n.replace(",", ".")), s = parseFloat(r.replace(",", "."));
+				if (!isNaN(o) && !isNaN(s)) return this._sortDirection === "asc" ? o - s : s - o;
+				let c = n.localeCompare(r, "sv");
+				return this._sortDirection === "asc" ? c : -c;
+			}), this._filteredRows = e), this.totalRows = this._filteredRows.length, this._ensureCurrentPageWithinBounds(), this.pagination ? this._paginateTable() : this._filteredRows.forEach((e) => e.style.display = "");
+		}
+	}
+	firstUpdated() {
+		let e = this.shadowRoot.querySelector("slot");
+		e && (e.addEventListener("slotchange", () => this._attachThListeners()), this._attachThListeners(), this._attachTbodyObserver(), this._refreshFromTableContent());
+	}
+	updated(e) {
+		super.updated(e), (e.has("searchTerm") || e.has("currentPage") || e.has("pageSize") || e.has("filteringSearch") || e.has("pagination")) && this.updateComplete.then(() => {
+			this.isConnected && this._refreshFromTableContent();
+		});
+	}
+	_disconnectTbodyObserver() {
+		this._tbodyObserver &&= (this._tbodyObserver.disconnect(), null), this._observedTbody = null;
+	}
+	_attachTbodyObserver() {
+		let e = this._getTbody();
+		if (!e) {
+			this._disconnectTbodyObserver();
+			return;
+		}
+		this._observedTbody !== e && (this._disconnectTbodyObserver(), this._observedTbody = e, this._tbodyObserver = new MutationObserver(() => {
+			this._suppressTbodyObserver || this._scheduleTableRefresh();
+		}), this._tbodyObserver.observe(e, {
+			childList: !0,
+			subtree: !0,
+			characterData: !0
+		}));
+	}
+	_scheduleTableRefresh() {
+		this._pendingTableRefresh || (this._pendingTableRefresh = !0, queueMicrotask(() => {
+			this._pendingTableRefresh = !1, this._refreshFromTableContent();
+		}));
+	}
+	_refreshFromTableContent() {
+		if (this._attachTbodyObserver(), this.filteringSearch) {
+			this._filterTable();
+			return;
+		}
+		if (this._updateTotalRows(), this._ensureCurrentPageWithinBounds(), this._sortedColumn !== null) {
+			this._sortTable(this._sortedColumn, this._sortDirection);
+			return;
+		}
+		this.pagination && this._paginateTable();
+	}
+	_ensureCurrentPageWithinBounds() {
+		let e = Math.max(1, Math.ceil(this.totalRows / this.pageSize)), t = Math.min(Math.max(1, this.currentPage), e);
+		t !== this.currentPage && (this.currentPage = t);
+	}
+	_getTbody() {
+		let e = this.shadowRoot.querySelector("slot");
+		if (!e) return null;
+		let t = e.assignedNodes({ flatten: !0 });
+		for (let e of t) if (e.nodeType === Node.ELEMENT_NODE) {
+			let t = e.querySelector("tbody");
+			if (t) return t;
+		}
+		return null;
+	}
+	_attachThListeners() {
+		let e = this.shadowRoot.querySelector("slot");
+		if (!e) return;
+		let t = e.assignedNodes({ flatten: !0 }), n = [], r = [], i = [];
+		t.forEach((e) => {
+			e.nodeType === Node.ELEMENT_NODE && (n.push(...e.querySelectorAll("th")), r.push(...e.querySelectorAll("td")), i.push(...e.querySelectorAll("tr")));
+		}), n.forEach((e, t) => {
+			e.style.textAlign = "left", e.style.padding = "16px 0px 16px 32px", e.style.position = "relative", e.style.backgroundColor = "var(--md-sys-color-surface)", e.style.fontFamily = "var(--md-sys-typescale-label-medium-font)", e.style.fontSize = "var(--md-sys-typescale-label-medium-size)", e.style.lineHeight = "var(--md-sys-typescale-label-medium-line-height)", e.style.fontWeight = "var(--md-sys-typescale-label-medium-weight)", e.style.letterSpacing = "var(--md-sys-typescale-label-medium-tracking)", e.style.verticalAlign = "bottom";
+			let n = e.firstChild;
+			if (n && n.nodeType === Node.TEXT_NODE && n.textContent?.trim() || n && n.nodeType === Node.ELEMENT_NODE && n.tagName.toLowerCase() !== "p") {
+				let i = document.createElement("p");
+				i.textContent = n.textContent ? n.textContent.trim() : "", i.style.margin = "0", e.replaceChild(i, n), e.querySelectorAll("scb-icon-button.scb-sort-icon").forEach((e) => e.remove());
+				let a = document.createElement("scb-icon-button");
+				a.className = "scb-sort-icon", a.onclick = () => this._onThClick(t), a.setAttribute("variant", "standard"), a.setAttribute("size", "small"), this._sortedColumn === t ? (a.setAttribute("variant", "filled-tonal"), a.setAttribute("icon", this._sortDirection === "asc" ? "arrow_downward" : "arrow_upward")) : (a.setAttribute("icon", "swap_horiz"), a.style.transform += " rotate(90deg)", a.style.alignSelf = "end");
+				var r = document.createElement("div");
+				r.style.display = "flex", r.style.gap = "8px", r.style.flexWrap = "nowrap", r.style.alignItems = "center", r.appendChild(i), r.appendChild(a), e.appendChild(r);
+			}
+		}), r.forEach((e) => {
+			e.style.padding = "16px 0px 16px 32px", e.style.textAlign = "left", e.style.borderTop = "1px solid var(--md-sys-color-outline-variant)", e.style.verticalAlign = "text-top", e.style.backgroundColor = "var(--md-sys-color-surface)", e.style.fontFamily = "var(--md-sys-typescale-body-medium-font)", e.style.fontSize = "var(--md-sys-typescale-body-medium-size)", e.style.lineHeight = "var(--md-sys-typescale-body-medium-line-height)", e.style.fontWeight = "var(--md-sys-typescale-body-medium-weight)", e.style.letterSpacing = "var(--md-sys-typescale-body-medium-tracking)";
+		}), i.forEach((e, t) => {
+			t % 2 == 1 && e.querySelectorAll("td").forEach((e) => {
+				e.style.backgroundColor = "var(--scb-background-row)";
+			});
+			let n = e.querySelectorAll("th");
+			n.length > 0 && n.forEach((e, t) => {
+				t === 0 && (e.style.paddingLeft = "24px"), t === n.length - 1 ? e.style.paddingRight = "24px" : e.style.paddingRight = "";
+			});
+			let r = e.querySelectorAll("td");
+			r.length > 0 && r.forEach((e, t) => {
+				t === 0 && (e.style.paddingLeft = "24px"), t === r.length - 1 ? e.style.paddingRight = "24px" : e.style.paddingRight = "";
+			});
+		}), this.pagination && this._paginateTable();
+	}
+	_onThClick(e) {
+		this._sortedColumn === e ? this._sortDirection = this._sortDirection === "asc" ? "desc" : "asc" : (this._sortedColumn = e, this._sortDirection = "asc"), this._sortTable(e, this._sortDirection), this._attachThListeners();
+	}
+	_sortTable(e, t) {
+		let n = this.shadowRoot.querySelector("slot");
+		if (!n) return;
+		let r = n.assignedNodes({ flatten: !0 }), i = null;
+		if (r.forEach((e) => {
+			if (e.nodeType === Node.ELEMENT_NODE) {
+				let t = e.querySelector("tbody");
+				t && (i = t);
+			}
+		}), !i) return;
+		let a;
+		a = this._filteredRows ? [...this._filteredRows] : Array.from(i.querySelectorAll("tr")), a.sort((n, r) => {
+			let i = n.children[e]?.textContent?.trim() ?? "", a = r.children[e]?.textContent?.trim() ?? "", o = Date.parse(i.replace(/\s+/g, " ")), s = Date.parse(a.replace(/\s+/g, " "));
+			if (!isNaN(o) && !isNaN(s)) return t === "asc" ? o - s : s - o;
+			let c = parseFloat(i.replace(",", ".")), l = parseFloat(a.replace(",", "."));
+			if (!isNaN(c) && !isNaN(l)) return t === "asc" ? c - l : l - c;
+			let u = i.localeCompare(a, "sv");
+			return t === "asc" ? u : -u;
+		});
+		let o = this._tbodyObserver !== null;
+		o && this._disconnectTbodyObserver();
+		try {
+			a.forEach((e) => i.appendChild(e));
+		} finally {
+			o && this._attachTbodyObserver();
+		}
+		this._filteredRows && (this._filteredRows = a, this.totalRows = this._filteredRows.length), this.pagination && this._paginateTable();
+	}
+	_updateTotalRows() {
+		let e = this.shadowRoot.querySelector("slot");
+		if (!e) return;
+		let t = e.assignedNodes({ flatten: !0 }), n = null;
+		t.forEach((e) => {
+			if (e.nodeType === Node.ELEMENT_NODE) {
+				let t = e.querySelector("tbody");
+				t && (n = t);
+			}
+		}), n && (this.totalRows = n.querySelectorAll("tr").length, this._ensureCurrentPageWithinBounds());
+	}
+	_paginateTable() {
+		let e = this.shadowRoot.querySelector("slot");
+		if (!e) return;
+		let t = e.assignedNodes({ flatten: !0 }), n = null;
+		if (t.forEach((e) => {
+			if (e.nodeType === Node.ELEMENT_NODE) {
+				let t = e.querySelector("tbody");
+				t && (n = t);
+			}
+		}), !n) return;
+		let r;
+		r = this._filteredRows ? this._filteredRows : Array.from(n.querySelectorAll("tr")), Array.from(n.querySelectorAll("tr")).forEach((e) => e.style.display = "none");
+		let i = (this.currentPage - 1) * this.pageSize, a = i + this.pageSize;
+		r.slice(i, a).forEach((e) => e.style.display = "");
+	}
+	_changePage(e) {
+		let t = Math.ceil(this.totalRows / this.pageSize);
+		e < 1 || e > t || (this.currentPage = e, this._paginateTable(), this.dispatchEvent(new CustomEvent("tableadvancedchange", {
+			detail: {
+				searchTerm: this.searchTerm,
+				currentPage: this.currentPage
+			},
+			bubbles: !0,
+			composed: !0
+		})), this.requestUpdate());
+	}
+};
+e([a({ type: String })], o.prototype, "searchTerm", void 0), e([a({
+	type: Boolean,
+	attribute: "with-pagination"
+})], o.prototype, "pagination", void 0), e([a({
+	type: Boolean,
+	attribute: "with-filtering-search"
+})], o.prototype, "filteringSearch", void 0), e([a({
+	type: Boolean,
+	attribute: "no-scroll"
+})], o.prototype, "noScroll", void 0), e([a({
+	type: Number,
+	attribute: "page-size"
+})], o.prototype, "pageSize", void 0), e([a({ type: Number })], o.prototype, "currentPage", void 0), e([a({ type: Number })], o.prototype, "totalRows", void 0), o = e([i("scb-table-advanced")], o);
+//#endregion
+export { o as ScbTableAdvanced };

package/scb-tabs/scb-primary-tab.js

@@ -0,0 +1,68 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { css as t } from "lit";
+import { customElement as n, property as r } from "lit/decorators.js";
+import "@material/web/icon/icon.js";
+import { MdPrimaryTab as i } from "@material/web/tabs/primary-tab.js";
+//#region src/scb-test-components/scb-tabs/scb-primary-tab.ts
+var a = class extends i {
+	constructor(...e) {
+		super(...e), this.iconOnly = !1, this.inlineIcon = !1, this._onActivate = () => {
+			let e = this.textContent?.trim() ?? "";
+			this.dispatchEvent(new CustomEvent("activate", {
+				detail: { label: e },
+				bubbles: !0,
+				composed: !0
+			}));
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.setAttribute("role", "tab");
+	}
+	get icon() {
+		return this._icon;
+	}
+	set icon(e) {
+		let t = this._icon;
+		t !== e && (this._icon = e, this.requestUpdate("icon", t), this.updateIconSlot());
+	}
+	firstUpdated(e) {
+		super.firstUpdated(e), this.addEventListener("click", this._onActivate), this._icon && this.updateIconSlot();
+	}
+	updated() {
+		if (super.updated(), this.setAttribute("aria-selected", this.active ? "true" : "false"), this.iconOnly && !this.hasAttribute("aria-label")) {
+			let e = this.textContent?.trim() ?? "";
+			e && this.setAttribute("aria-label", e);
+		}
+	}
+	static {
+		this.styles = [...i.styles, t`
+      /* Icon-only: dölj textslot */
+      :host([icon-only]) slot:not([name='icon']) {
+        display: none;
+      }
+    `];
+	}
+	updateIconSlot() {
+		let e = this.querySelector("md-icon[slot=\"icon\"]");
+		if (!this._icon) {
+			e?.remove();
+			return;
+		}
+		if (e) e.textContent = this._icon;
+		else {
+			let e = document.createElement("md-icon");
+			e.setAttribute("slot", "icon"), e.textContent = this._icon, this.appendChild(e);
+		}
+	}
+};
+e([r({ type: String })], a.prototype, "icon", null), e([r({
+	type: Boolean,
+	reflect: !0,
+	attribute: "icon-only"
+})], a.prototype, "iconOnly", void 0), e([r({
+	type: Boolean,
+	reflect: !0,
+	attribute: "inline-icon"
+})], a.prototype, "inlineIcon", void 0), a = e([n("scb-primary-tab")], a);
+//#endregion
+export { a as ScbPrimaryTab };

package/scb-tabs/scb-secondary-tab.js

@@ -0,0 +1,68 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { css as t } from "lit";
+import { customElement as n, property as r } from "lit/decorators.js";
+import "@material/web/icon/icon.js";
+import { MdSecondaryTab as i } from "@material/web/tabs/secondary-tab.js";
+//#region src/scb-test-components/scb-tabs/scb-secondary-tab.ts
+var a = class extends i {
+	constructor(...e) {
+		super(...e), this.iconOnly = !1, this._onActivate = () => {
+			let e = this.textContent?.trim() ?? "";
+			this.dispatchEvent(new CustomEvent("activate", {
+				detail: { label: e },
+				bubbles: !0,
+				composed: !0
+			}));
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.setAttribute("role", "tab");
+	}
+	get icon() {
+		return this._icon;
+	}
+	set icon(e) {
+		let t = this._icon;
+		t !== e && (this._icon = e, this.requestUpdate("icon", t), this.updateIconSlot());
+	}
+	firstUpdated(e) {
+		if (super.firstUpdated(e), this.iconOnly && !this.hasAttribute("aria-label")) {
+			let e = this.textContent?.trim() ?? "";
+			e && this.setAttribute("aria-label", e);
+		}
+		this.addEventListener("click", this._onActivate), this._icon && this.updateIconSlot();
+	}
+	updated() {
+		if (super.updated(), this.iconOnly && !this.hasAttribute("aria-label")) {
+			let e = this.textContent?.trim() ?? "";
+			e && this.setAttribute("aria-label", e);
+		}
+	}
+	static {
+		this.styles = [...i.styles, t`
+      /* Icon-only: göm all text utom slot="icon" */
+      :host([icon-only]) slot:not([name='icon']) {
+        display: none;
+      }
+    `];
+	}
+	updateIconSlot() {
+		let e = this.querySelector("md-icon[slot=\"icon\"]");
+		if (!this._icon) {
+			e?.remove();
+			return;
+		}
+		if (e) e.textContent = this._icon;
+		else {
+			let e = document.createElement("md-icon");
+			e.setAttribute("slot", "icon"), e.textContent = this._icon, this.appendChild(e);
+		}
+	}
+};
+e([r({ type: String })], a.prototype, "icon", null), e([r({
+	type: Boolean,
+	reflect: !0,
+	attribute: "icon-only"
+})], a.prototype, "iconOnly", void 0), a = e([n("scb-secondary-tab")], a);
+//#endregion
+export { a as ScbSecondaryTab };

package/scb-tabs/scb-tabs.js

@@ -0,0 +1,100 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "./scb-primary-tab.js";
+import "./scb-secondary-tab.js";
+import { css as t } from "lit";
+import { customElement as n, property as r } from "lit/decorators.js";
+import { MdTabs as i } from "@material/web/tabs/tabs.js";
+//#region src/scb-test-components/scb-tabs/scb-tabs.ts
+var a = class extends i {
+	constructor(...e) {
+		super(...e), this.ariaLabel = "", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this._isDispatching = !1, this._onChange = (e) => {
+			if (!e.composed && !this._isDispatching) {
+				e.stopPropagation(), this._isDispatching = !0;
+				let t = e.target.activeTabIndex;
+				this.dispatchEvent(new CustomEvent("change", {
+					detail: { activeTabIndex: t },
+					bubbles: !0,
+					composed: !0
+				})), this.dispatchEvent(new CustomEvent("tabschange", {
+					detail: { activeTabIndex: t },
+					bubbles: !0,
+					composed: !0
+				})), this._isDispatching = !1;
+			}
+		};
+	}
+	static {
+		this.styles = [...i.styles, t`
+      :host {
+        /*Containerfärg */
+        --md-primary-tab-container-color: var(--md-sys-color-surface);
+        --md-secondary-tab-container-color: var(--md-sys-color-surface);
+
+        /* Text- och ikonfärger */
+        --md-primary-tab-label-text-color: var(--md-sys-color-on-surface-variant);
+        --md-secondary-tab-label-text-color: var(--md-sys-color-on-surface-variant);
+        --md-primary-tab-active-label-text-color: var(--md-sys-color-on-surface);
+        --md-secondary-tab-active-label-text-color: var(--md-sys-color-on-surface);
+
+        /* Indikator och divider */
+        --md-primary-tab-active-indicator-color: var(--md-sys-color-primary);
+        --md-primary-tab-divider-color: var(--md-sys-color-outline-variant);
+        --md-secondary-tab-divider-color: var(--md-sys-color-outline-variant);
+
+        /* State layers (hover/press) */
+        --md-primary-tab-hover-state-layer-color: var(--md-sys-color-on-surface);
+        --md-secondary-tab-hover-state-layer-color: var(--md-sys-color-on-surface);
+
+        /* Vertikalt avstånd styrs av spacing-attributen via CSS-variabler */
+        margin-block-start: var(--scb-tabs-spacing-block-start, 0);
+        margin-block-end: var(--scb-tabs-spacing-block-end, 0);
+        margin-inline-start: var(--scb-tabs-spacing-inline-start, 0);
+        margin-inline-end: var(--scb-tabs-spacing-inline-end, 0);
+      }
+    `];
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.setAttribute("role", "tablist");
+	}
+	firstUpdated(e) {
+		super.firstUpdated(e), this.addEventListener("change", this._onChange), this.#e();
+	}
+	updated(e) {
+		super.updated(e), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#e();
+	}
+	#e() {
+		let e = this.#t(this.spacing), t = this.#t(this.spacingTop) ?? e, n = this.#t(this.spacingBottom) ?? e, r = this.#t(this.spacingLeft), i = this.#t(this.spacingRight);
+		t ? this.style.setProperty("--scb-tabs-spacing-block-start", t) : this.style.removeProperty("--scb-tabs-spacing-block-start"), n ? this.style.setProperty("--scb-tabs-spacing-block-end", n) : this.style.removeProperty("--scb-tabs-spacing-block-end"), r ? this.style.setProperty("--scb-tabs-spacing-inline-start", r) : this.style.removeProperty("--scb-tabs-spacing-inline-start"), i ? this.style.setProperty("--scb-tabs-spacing-inline-end", i) : this.style.removeProperty("--scb-tabs-spacing-inline-end");
+	}
+	#t(e) {
+		if (!e) return;
+		let t = String(e).trim();
+		if (t) return /^\d+$/.test(t) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(t, 10)))})` : t;
+	}
+};
+e([r({
+	type: String,
+	reflect: !0,
+	attribute: "aria-label"
+})], a.prototype, "ariaLabel", void 0), e([r({
+	type: String,
+	reflect: !0
+})], a.prototype, "spacing", void 0), e([r({
+	type: String,
+	attribute: "spacing-top",
+	reflect: !0
+})], a.prototype, "spacingTop", void 0), e([r({
+	type: String,
+	attribute: "spacing-bottom",
+	reflect: !0
+})], a.prototype, "spacingBottom", void 0), e([r({
+	type: String,
+	attribute: "spacing-left",
+	reflect: !0
+})], a.prototype, "spacingLeft", void 0), e([r({
+	type: String,
+	attribute: "spacing-right",
+	reflect: !0
+})], a.prototype, "spacingRight", void 0), a = e([n("scb-tabs")], a);
+//#endregion
+export { a as ScbTabs };

package/scb-test-components/index.d.ts

@@ -0,0 +1,90 @@
+export * from './scb-accordion/scb-accordion-item';
+export * from './scb-accordion/scb-accordion';
+export * from './scb-app-bar/scb-app-bar';
+export * from './scb-avatar/scb-avatar';
+export * from './scb-badge/scb-badge';
+export * from './scb-breadcrumb/scb-breadcrumb-item';
+export * from './scb-breadcrumb/scb-breadcrumb';
+export * from './scb-button/scb-button';
+export * from './scb-calendar/scb-calendar-event';
+export * from './scb-calendar/scb-calendar';
+export * from './scb-calendar-card/scb-calendar-card';
+export * from './scb-card/scb-card';
+export * from './scb-checkbox/scb-checkbox-group';
+export * from './scb-checkbox/scb-checkbox';
+export * from './scb-chevron/scb-chevron';
+export * from './scb-chip/scb-chip';
+export * from './scb-collapse/scb-collapse';
+export * from './scb-cookies-consent/scb-cookies-consent';
+export * from './scb-datepicker/scb-datepicker';
+export * from './scb-dialog/scb-dialog';
+export * from './scb-divider/scb-divider';
+export * from './scb-drawer/scb-drawer';
+export * from './scb-drop-zone/scb-drop-zone';
+export * from './scb-dropdown/scb-dropdown';
+export * from './scb-fab/scb-fab';
+export * from './scb-fact-card/scb-fact-card-content';
+export * from './scb-fact-card/scb-fact-card';
+export * from './scb-footer/scb-footer-section';
+export * from './scb-footer/scb-footer';
+export * from './scb-gallery-grid/scb-gallery-grid';
+export * from './scb-grid/scb-grid-item';
+export * from './scb-grid/scb-grid';
+export * from './scb-grid/scb-stack';
+export * from './scb-header/scb-header-menu-group';
+export * from './scb-header/scb-header-menu-item';
+export * from './scb-header/scb-header-tab';
+export * from './scb-header/scb-header-utility';
+export * from './scb-header/scb-header';
+export * from './scb-horizontal-scroller/scb-horizontal-scroller';
+export * from './scb-icon-button/scb-icon-button';
+export * from './scb-keyfigure-card/scb-keyfigure-card';
+export * from './scb-link/scb-link';
+export * from './scb-list/scb-list-item';
+export * from './scb-list/scb-list';
+export * from './scb-menu/scb-menu-item';
+export * from './scb-menu/scb-menu-section';
+export * from './scb-menu/scb-menu';
+export * from './scb-menu/scb-sub-menu';
+export * from './scb-nav/scb-nav-item';
+export * from './scb-nav/scb-nav';
+export * from './scb-notification-card/scb-notification-card';
+export * from './scb-options-menu/scb-options-menu-item';
+export * from './scb-options-menu/scb-options-menu';
+export * from './scb-options-menu/scb-options-sub-menu';
+export * from './scb-overlay/scb-overlay';
+export * from './scb-pagination/scb-pagination';
+export * from './scb-progress-indicator/scb-progress-indicator';
+export * from './scb-progress-stepper/scb-progress-step';
+export * from './scb-progress-stepper/scb-progress-stepper';
+export * from './scb-radio-button/scb-radio-button';
+export * from './scb-radio-button/scb-radio-group';
+export * from './scb-scrollspy/scb-scrollspy';
+export * from './scb-search/scb-search';
+export * from './scb-segmented-button/scb-segmented-button';
+export * from './scb-segmented-button/scb-segmented-item';
+export * from './scb-select/scb-select-option';
+export * from './scb-select/scb-select';
+export * from './scb-skeleton/scb-skeleton';
+export * from './scb-slider/scb-slider';
+export * from './scb-snackbar/scb-snackbar';
+export * from './scb-status-pill/scb-status-pill';
+export * from './scb-stepper/scb-step';
+export * from './scb-stepper/scb-stepper';
+export * from './scb-switch/scb-switch';
+export * from './scb-table/scb-table';
+export * from './scb-table-advanced/scb-table-advanced';
+export * from './scb-tabs/scb-primary-tab';
+export * from './scb-tabs/scb-secondary-tab';
+export * from './scb-tabs/scb-tabs';
+export * from './scb-textfield/scb-textfield';
+export * from './scb-toc/scb-toc-item';
+export * from './scb-toc/scb-toc';
+export * from './scb-tooltip/scb-tooltip';
+export * from './scb-vignette/scb-vignette';
+export * from './scb-viz/scb-viz-actions-runtime';
+export * from './scb-viz/scb-viz-print-runtime';
+export * from './scb-viz/scb-viz-series-differentiation-registry';
+export * from './scb-viz/scb-viz-series-differentiation-runtime';
+export * from './scb-viz/scb-viz-table-runtime';
+export * from './scb-viz/scb-viz';