scb-wc 0.1.2 → 0.1.4

package/scb-toc/scb-toc-item.js

@@ -0,0 +1,477 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "../scb-chevron/scb-chevron.js";
+import "../scb-divider/scb-divider.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+import "@material/web/focus/md-focus-ring.js";
+import "@material/web/icon/icon.js";
+import "@material/web/ripple/ripple.js";
+//#region src/scb-test-components/scb-toc/scb-toc-item.ts
+var o, s = class extends t {
+	static {
+		o = this;
+	}
+	constructor(...e) {
+		super(...e), this.expanded = !1, this.size = "medium", this.label = "", this.supportingText = "", this.itemHref = "#", this.noDivider = !1, this._unique = o._uid(), this._overflowVisibleTimer = null, this._slotHasContent = !1, this._trailingSlotHasContent = !1, this._onSlotChange = () => {
+			let e = this.renderRoot.querySelector("slot:not([name])"), t = !!e && e.assignedElements({ flatten: !0 }).length > 0;
+			this._slotHasContent !== t && (this._slotHasContent = t, this.requestUpdate()), !this._slotHasContent && this.expanded && (this.expanded = !1), this._applyInertByExpanded();
+		}, this._toggleAccordion = () => {
+			if (!this._slotHasContent) return;
+			let e = !this.expanded;
+			this.setExpanded(e);
+		}, this._onKeyDown = (e) => {
+			let t = this.closest("scb-toc"), n = Array.from(t?.querySelectorAll("scb-toc-item") || []).map((e) => ({
+				host: e,
+				label: e.renderRoot.querySelector(".toc-item-label") || null
+			})).filter((e) => !!e.label), r = n.findIndex((e) => e.host === this);
+			if (r < 0) return;
+			let i = e.currentTarget?.classList?.contains("toc-chevron-button") ?? !1;
+			switch (e.key) {
+				case "Enter":
+				case " ":
+					if (!i) return;
+					e.preventDefault(), this._toggleAccordion();
+					break;
+				case "ArrowDown":
+					e.preventDefault(), r < n.length - 1 && n[r + 1].label.focus();
+					break;
+				case "ArrowUp":
+					e.preventDefault(), r > 0 && n[r - 1].label.focus();
+					break;
+				case "Home":
+					e.preventDefault(), n.length && n[0].label.focus();
+					break;
+				case "End":
+					e.preventDefault(), n.length && n[n.length - 1].label.focus();
+					break;
+			}
+		};
+	}
+	setExpanded(e) {
+		this.expanded !== e && (this.expanded = e);
+	}
+	static {
+		this._uidPrefix = `uid-${Math.random().toString(36).slice(2)}`;
+	}
+	static {
+		this._uidSeq = 0;
+	}
+	static _uid() {
+		return globalThis.crypto?.randomUUID?.() ?? `${o._uidPrefix}-${++o._uidSeq}`;
+	}
+	static {
+		this.styles = [n`
+      :host {
+        display: block;
+        --scb-toc-transition-duration: var(--motion-duration-short, 150ms);
+        --scb-toc-transition-easing: var(--motion-easing-emphasized-accelerate, var(--motion-easing-emphasized, cubic-bezier(.69,.16,.2,.98)));
+        --scb-toc-panel-padding-closed: var(--spacing-0, 0px);
+        --scb-toc-item-top-padding-y: var(--spacing-5, 16px);
+        --scb-toc-item-top-padding-x: var(--spacing-3, 8px);
+        --scb-toc-item-top-gap: var(--spacing-5, 16px);
+        --scb-toc-item-label-margin-bottom: var(--spacing-3, 8px);
+        --scb-toc-item-label-font-size: var(--md-sys-typescale-body-large-size);
+        --scb-toc-item-label-line-height: var(--md-sys-typescale-body-large-line-height);
+        --scb-toc-item-label-tracking: var(--md-sys-typescale-body-large-tracking);
+        --scb-toc-item-supporting-font-size: var(--md-sys-typescale-body-medium-size);
+        --scb-toc-item-supporting-line-height: var(--md-sys-typescale-body-medium-line-height);
+        --scb-toc-item-supporting-tracking: var(--md-sys-typescale-body-medium-tracking);
+        --scb-toc-item-panel-padding-right: var(--spacing-5, 16px);
+        --scb-toc-item-panel-padding-left: var(--spacing-9, 32px);
+        --scb-toc-item-panel-padding-open: var(--spacing-5, 16px);
+        --scb-toc-item-panel-font-size: var(--md-sys-typescale-body-medium-size);
+        --scb-toc-item-panel-line-height: var(--md-sys-typescale-body-medium-line-height);
+        --scb-toc-item-panel-tracking: var(--md-sys-typescale-body-medium-tracking);
+        --scb-toc-item-chevron-size: 40px;
+        --scb-toc-item-icon-size: var(--icon-size-medium, 24px);
+        color: var(--md-sys-color-on-surface);
+        font-family: var(--brand-font, 'Inter', sans-serif);
+      }
+
+      :host([size='small']) {
+        --scb-toc-item-top-padding-y: var(--spacing-4, 12px);
+        --scb-toc-item-top-gap: var(--spacing-4, 12px);
+        --scb-toc-item-label-margin-bottom: var(--spacing-2, 4px);
+        --scb-toc-item-label-font-size: var(--md-sys-typescale-body-small-size);
+        --scb-toc-item-label-line-height: var(--md-sys-typescale-body-small-line-height);
+        --scb-toc-item-label-tracking: var(--md-sys-typescale-body-small-tracking);
+        --scb-toc-item-supporting-font-size: var(--md-sys-typescale-body-small-size);
+        --scb-toc-item-supporting-line-height: var(--md-sys-typescale-body-small-line-height);
+        --scb-toc-item-supporting-tracking: var(--md-sys-typescale-body-small-tracking);
+        --scb-toc-item-panel-padding-right: var(--spacing-4, 12px);
+        --scb-toc-item-panel-padding-left: var(--spacing-7, 24px);
+        --scb-toc-item-panel-padding-open: var(--spacing-4, 12px);
+        --scb-toc-item-panel-font-size: var(--md-sys-typescale-body-small-size);
+        --scb-toc-item-panel-line-height: var(--md-sys-typescale-body-small-line-height);
+        --scb-toc-item-panel-tracking: var(--md-sys-typescale-body-small-tracking);
+        --scb-toc-item-chevron-size: 36px;
+        --scb-toc-item-icon-size: var(--icon-size-small, 20px);
+      }
+
+      :host([size='extra-small']) {
+        --scb-toc-item-top-padding-y: var(--spacing-3, 8px);
+        --scb-toc-item-top-padding-x: var(--spacing-2, 4px);
+        --scb-toc-item-top-gap: var(--spacing-3, 8px);
+        --scb-toc-item-label-margin-bottom: var(--spacing-1, 2px);
+        --scb-toc-item-label-font-size: var(--md-sys-typescale-body-small-size);
+        --scb-toc-item-label-line-height: var(--md-sys-typescale-body-small-line-height);
+        --scb-toc-item-label-tracking: var(--md-sys-typescale-body-small-tracking);
+        --scb-toc-item-supporting-font-size: var(--md-sys-typescale-body-small-size);
+        --scb-toc-item-supporting-line-height: var(--md-sys-typescale-body-small-line-height);
+        --scb-toc-item-supporting-tracking: var(--md-sys-typescale-body-small-tracking);
+        --scb-toc-item-panel-padding-right: var(--spacing-3, 8px);
+        --scb-toc-item-panel-padding-left: var(--spacing-6, 20px);
+        --scb-toc-item-panel-padding-open: var(--spacing-3, 8px);
+        --scb-toc-item-panel-font-size: var(--md-sys-typescale-body-small-size);
+        --scb-toc-item-panel-line-height: var(--md-sys-typescale-body-small-line-height);
+        --scb-toc-item-panel-tracking: var(--md-sys-typescale-body-small-tracking);
+        --scb-toc-item-chevron-size: 32px;
+        --scb-toc-item-icon-size: var(--icon-size-small, 20px);
+      }
+
+      :host([size='large']) {
+        --scb-toc-item-top-padding-y: var(--spacing-6, 20px);
+        --scb-toc-item-top-gap: var(--spacing-6, 20px);
+        --scb-toc-item-label-margin-bottom: var(--spacing-4, 12px);
+        --scb-toc-item-label-font-size: var(--md-sys-typescale-title-small-size);
+        --scb-toc-item-label-line-height: var(--md-sys-typescale-title-small-line-height);
+        --scb-toc-item-label-tracking: var(--md-sys-typescale-title-small-tracking);
+        --scb-toc-item-supporting-font-size: var(--md-sys-typescale-body-large-size);
+        --scb-toc-item-supporting-line-height: var(--md-sys-typescale-body-large-line-height);
+        --scb-toc-item-supporting-tracking: var(--md-sys-typescale-body-large-tracking);
+        --scb-toc-item-panel-padding-right: var(--spacing-6, 20px);
+        --scb-toc-item-panel-padding-left: var(--spacing-10, 40px);
+        --scb-toc-item-panel-padding-open: var(--spacing-6, 20px);
+        --scb-toc-item-panel-font-size: var(--md-sys-typescale-body-large-size);
+        --scb-toc-item-panel-line-height: var(--md-sys-typescale-body-large-line-height);
+        --scb-toc-item-panel-tracking: var(--md-sys-typescale-body-large-tracking);
+        --scb-toc-item-chevron-size: 48px;
+        --scb-toc-item-icon-size: var(--icon-size-medium, 24px);
+      }
+
+      :host([expanded]) {
+        --scb-toc-transition-easing: var(
+          --motion-easing-emphasized-decelerate,
+          var(--motion-easing-emphasized, cubic-bezier(.69,.16,.2,.98))
+        );
+      }
+
+      .scb-toc-item-top {
+        padding: var(--scb-toc-item-top-padding-y) var(--scb-toc-item-top-padding-x);
+        display: flex;
+        gap: var(--scb-toc-item-top-gap);
+        flex-direction: row;
+        align-items: flex-start;
+      }
+
+      .scb-toc-item-top.no-supporting-text {
+        align-items: center;
+      }
+
+      .scb-toc-item-top.no-supporting-text .toc-item-label {
+        margin-bottom: 0;
+      }
+
+      .toc-item-label-wrapper {
+        position: relative;
+        display: block;
+        width: fit-content;
+      }
+
+      .toc-item-label {
+        display: block;
+        width: fit-content;
+        color: var(--md-sys-color-primary);
+        font-size: var(--scb-toc-item-label-font-size);
+        font-weight: var(--weight-semibold);
+        line-height: var(--scb-toc-item-label-line-height);
+        letter-spacing: var(--scb-toc-item-label-tracking);
+        text-decoration: underline;
+        text-decoration-thickness: 1px;
+        text-underline-offset: 0.1578em;
+        margin-bottom: var(--scb-toc-item-label-margin-bottom);
+      }
+
+      .toc-item-label:hover {
+        color: var(--md-sys-color-on-surface);
+        text-decoration-thickness: 2px;
+      }
+
+      .toc-item-label:focus {
+        color: var(--md-sys-color-on-surface);
+        outline: none;
+      }
+
+      .toc-item-label-wrapper md-focus-ring {
+        position: absolute;
+        pointer-events: none;
+        border-radius: var(--md-sys-shape-corner-small, 8px);
+        --md-focus-ring-inward-offset: -7px;
+      }
+
+      .supporting-text {
+        font-size: var(--scb-toc-item-supporting-font-size);
+        line-height: var(--scb-toc-item-supporting-line-height);
+        letter-spacing: var(--scb-toc-item-supporting-tracking);
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      .toc-chevron-button-wrapper {
+        position: relative;
+        margin-left: auto;
+        display: flex;
+        align-items: flex-start;
+      }
+
+      .toc-chevron-button {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        inline-size: var(--scb-toc-item-chevron-size);
+        block-size: var(--scb-toc-item-chevron-size);
+        padding: 0;
+        border: 0;
+        background: transparent;
+        border-radius: 999px;
+        cursor: pointer;
+        color: inherit;
+        -webkit-tap-highlight-color: transparent;
+      }
+
+      .toc-chevron-button:focus {
+        outline: none;
+      }
+
+      .toc-chevron-button md-ripple {
+        border-radius: inherit;
+      }
+
+      .toc-chevron-button md-focus-ring {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        border-radius: inherit;
+        --md-focus-ring-inward-offset: -7px;
+      }
+
+      .toc-chevron-icon {
+        --scb-chevron-size: var(--scb-toc-item-icon-size);
+        --chevron-offset-down: 2.8px;
+        --chevron-offset-up: -2.8px;
+      }
+
+      scb-divider {
+        margin: var(--spacing-0, 0px) var(--spacing-3, 8px);
+      }
+
+      /* Animerar panelen utan JS genom grid-template-rows 0fr till 1fr */
+      .scb-toc-item-bottom {
+        display: grid;
+        grid-template-rows: 0fr;
+        transition:
+          grid-template-rows var(--scb-toc-transition-duration) var(--scb-toc-transition-easing),
+          opacity var(--scb-toc-transition-duration) var(--scb-toc-transition-easing),
+          padding var(--scb-toc-transition-duration) var(--scb-toc-transition-easing);
+        opacity: 0;
+        overflow: hidden;
+        padding-top: var(--spacing-0, 0px);
+        padding-right: var(--scb-toc-item-panel-padding-right);
+        padding-bottom: var(--scb-toc-panel-padding-closed);
+        padding-left: var(--scb-toc-item-panel-padding-left);
+        font-size: var(--scb-toc-item-panel-font-size);
+        line-height: var(--scb-toc-item-panel-line-height); /* 150% */
+        letter-spacing: var(--scb-toc-item-panel-tracking);
+      }
+
+      :host([expanded]) .scb-toc-item-bottom {
+        grid-template-rows: 1fr;
+        opacity: 1;
+        padding-bottom: var(--scb-toc-item-panel-padding-open);
+      }
+
+      .bottom-inner {
+        overflow: hidden;
+      }
+
+      :host([expanded][data-expanded-settled]) .scb-toc-item-bottom {
+        overflow: visible;
+      }
+
+      :host([expanded][data-expanded-settled]) .bottom-inner {
+        overflow: visible;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .scb-toc-item-bottom {
+          transition: none;
+        }
+
+        md-ripple {
+          display: none;
+        }
+      }
+    `];
+	}
+	firstUpdated() {
+		this._applyInertByExpanded(), this._syncOverflowVisibilityByExpanded();
+	}
+	updated(e) {
+		e.has("expanded") && (this._applyInertByExpanded(), this._syncOverflowVisibilityByExpanded(), this.dispatchEvent(new CustomEvent("expanded-changed", {
+			detail: {
+				expanded: this.expanded,
+				label: this.label
+			},
+			bubbles: !0,
+			composed: !0
+		})), this.dispatchEvent(new CustomEvent("expandedchanged", {
+			detail: {
+				expanded: this.expanded,
+				label: this.label
+			},
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._slotHasContent = Array.from(this.children).some((e) => {
+			let t = e.getAttribute("slot");
+			return t === null || t === "";
+		}), this._trailingSlotHasContent = Array.from(this.children).some((e) => e.getAttribute("slot") === "trailing"), !this._slotHasContent && this.expanded && (this.expanded = !1);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._overflowVisibleTimer !== null && (window.clearTimeout(this._overflowVisibleTimer), this._overflowVisibleTimer = null);
+	}
+	_applyInertByExpanded() {
+		let e = this.renderRoot.querySelector(".scb-toc-item-bottom");
+		e && (this.expanded ? (e.removeAttribute("inert"), e.setAttribute("aria-hidden", "false"), this._restoreTabIndexesIfNeeded()) : (e.setAttribute("inert", ""), e.setAttribute("aria-hidden", "true"), this._removeTabIndexesIfNeeded()));
+	}
+	_syncOverflowVisibilityByExpanded() {
+		if (this._overflowVisibleTimer !== null && (window.clearTimeout(this._overflowVisibleTimer), this._overflowVisibleTimer = null), this.removeAttribute("data-expanded-settled"), !this.expanded) return;
+		let e = this.renderRoot.querySelector(".scb-toc-item-bottom");
+		if (!e) {
+			this.setAttribute("data-expanded-settled", "");
+			return;
+		}
+		let t = this._getTransitionMs(e);
+		if (t <= 0) {
+			this.setAttribute("data-expanded-settled", "");
+			return;
+		}
+		this._overflowVisibleTimer = window.setTimeout(() => {
+			this._overflowVisibleTimer = null, this.expanded && this.setAttribute("data-expanded-settled", "");
+		}, t);
+	}
+	_getTransitionMs(e) {
+		let t = getComputedStyle(e), n = t.transitionDuration.split(",").map((e) => e.trim()), r = t.transitionDelay.split(",").map((e) => e.trim()), i = (e) => {
+			let t = parseFloat(e);
+			return Number.isFinite(t) ? e.endsWith("ms") ? t : e.endsWith("s") ? t * 1e3 : t : 0;
+		}, a = Math.max(n.length, r.length), o = 0;
+		for (let e = 0; e < a; e += 1) {
+			let t = i(n[e] ?? n[n.length - 1] ?? "0s"), a = i(r[e] ?? r[r.length - 1] ?? "0s");
+			o = Math.max(o, t + a);
+		}
+		return Math.ceil(o);
+	}
+	_supportsInert() {
+		return "inert" in HTMLElement.prototype;
+	}
+	_collectFocusableFromSlot() {
+		let e = this.renderRoot.querySelector("slot:not([name])");
+		if (!e) return [];
+		let t = e.assignedElements({ flatten: !0 }), n = [], r = (e) => {
+			e instanceof HTMLElement && e.matches("a,button,input,select,textarea,[tabindex]") && n.push(e);
+		};
+		return t.forEach((e) => {
+			r(e), e.querySelectorAll?.("a,button,input,select,textarea,[tabindex]").forEach((e) => r(e));
+		}), n;
+	}
+	_removeTabIndexesIfNeeded() {
+		this._supportsInert() || this._collectFocusableFromSlot().forEach((e) => {
+			let t = e.getAttribute("tabindex");
+			t !== null && e.setAttribute("data-scb-prev-tabindex", t), e.setAttribute("tabindex", "-1");
+		});
+	}
+	_restoreTabIndexesIfNeeded() {
+		this._supportsInert() || this._collectFocusableFromSlot().forEach((e) => {
+			let t = e.getAttribute("data-scb-prev-tabindex");
+			t === null ? e.removeAttribute("tabindex") : (e.setAttribute("tabindex", t), e.removeAttribute("data-scb-prev-tabindex"));
+		});
+	}
+	render() {
+		let e = `bottom-${this._unique}`, t = `toc-label-${this._unique}`, n = `toc-chevron-${this._unique}`, i = this.supportingText.trim().length > 0;
+		return r`
+      <div class="scb-toc-item" role="listitem">
+        <div class=${`scb-toc-item-top${i ? "" : " no-supporting-text"}`}>
+          <div>
+            <div class="toc-item-label-wrapper">
+              <a
+                id=${t}
+                class="toc-item-label"
+                href=${this.itemHref}
+                @keydown=${this._onKeyDown}
+              >
+                ${this.label}
+              </a>
+              <md-focus-ring for=${t} inward></md-focus-ring>
+            </div>
+            ${i ? r`<div class="supporting-text">${this.supportingText}</div>` : ""}
+          </div>
+
+          ${this._trailingSlotHasContent ? r`
+                <div class="toc-chevron-button-wrapper">
+                  <slot name="trailing"></slot>
+                </div>
+              ` : this._slotHasContent ? r`
+                <div class="toc-chevron-button-wrapper">
+                  <button
+                    id=${n}
+                    class="toc-chevron-button"
+                    type="button"
+                    aria-label=${this.expanded ? "Fäll ihop avsnitt" : "Fäll ut avsnitt"}
+                    aria-expanded=${this.expanded ? "true" : "false"}
+                    aria-controls=${e}
+                    @click=${this._toggleAccordion}
+                    @keydown=${this._onKeyDown}
+                  >
+                    <md-ripple></md-ripple>
+                    <scb-chevron class="toc-chevron-icon" .open=${this.expanded}></scb-chevron>
+                    <md-focus-ring for=${n} inward></md-focus-ring>
+                  </button>
+                </div>
+              ` : ""}
+            
+        </div>
+
+        <div id=${e} class="scb-toc-item-bottom" role="region" aria-labelledby=${t}>
+          <div class="bottom-inner">
+            <slot @slotchange=${this._onSlotChange}></slot>
+          </div>
+        </div>
+
+        ${this.noDivider ? "" : r`<scb-divider></scb-divider>`}
+      </div>
+    `;
+	}
+};
+e([a({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "expanded", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "size", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "label", void 0), e([a({
+	type: String,
+	attribute: "supporting-text"
+})], s.prototype, "supportingText", void 0), e([a({
+	type: String,
+	attribute: "item-href"
+})], s.prototype, "itemHref", void 0), e([a({
+	type: Boolean,
+	attribute: "no-divider"
+})], s.prototype, "noDivider", void 0), s = o = e([i("scb-toc-item")], s);
+//#endregion
+export { s as ScbTocItem };

package/scb-toc/scb-toc.js

@@ -0,0 +1,101 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "./scb-toc-item.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-toc/scb-toc.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.singleOpen = !1, this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0;
+	}
+	static {
+		this.styles = [n`
+      :host {
+        display: block;
+        /* Vertikalt avstånd styrs av spacing-attributen via CSS-variabler */
+        margin-block-start: var(--scb-toc-spacing-block-start, 0);
+        margin-block-end: var(--scb-toc-spacing-block-end, 0);
+        /* Horisontellt avstånd styrs av spacing-left och spacing-right via CSS-variabler */
+        margin-inline-start: var(--scb-toc-spacing-inline-start, 0);
+        margin-inline-end: var(--scb-toc-spacing-inline-end, 0);
+      }
+
+      .scb-toc-list {
+        display: block;
+      }
+    `];
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("expanded-changed", this.#e);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("expanded-changed", this.#e), super.disconnectedCallback();
+	}
+	firstUpdated(e) {
+		this.#r(), this.#n();
+	}
+	updated(e) {
+		super.updated(e), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#r(), e.has("singleOpen") && this.#n();
+	}
+	render() {
+		return r`
+      <div class="scb-toc-list" role="list">
+        <slot @slotchange=${this.#t}></slot>
+      </div>
+    `;
+	}
+	_getDirectItems() {
+		return Array.from(this.children).filter((e) => e.tagName === "SCB-TOC-ITEM");
+	}
+	#e(e) {
+		if (!this.singleOpen) return;
+		let t = e;
+		if (!t.detail?.expanded) return;
+		let n = t.target;
+		!n || n.tagName !== "SCB-TOC-ITEM" || this._getDirectItems().forEach((e) => {
+			e !== n && e.expanded && e.setExpanded(!1);
+		});
+	}
+	#t() {
+		this.singleOpen && this.#n();
+	}
+	#n() {
+		if (!this.singleOpen) return;
+		let e = this._getDirectItems().filter((e) => e.expanded);
+		e.length <= 1 || e.slice(1).forEach((e) => e.setExpanded(!1));
+	}
+	#r() {
+		let e = this.#i(this.spacing), t = this.#i(this.spacingTop) ?? e, n = this.#i(this.spacingBottom) ?? e, r = this.#i(this.spacingLeft), i = this.#i(this.spacingRight);
+		t ? this.style.setProperty("--scb-toc-spacing-block-start", t) : this.style.removeProperty("--scb-toc-spacing-block-start"), n ? this.style.setProperty("--scb-toc-spacing-block-end", n) : this.style.removeProperty("--scb-toc-spacing-block-end"), r ? this.style.setProperty("--scb-toc-spacing-inline-start", r) : this.style.removeProperty("--scb-toc-spacing-inline-start"), i ? this.style.setProperty("--scb-toc-spacing-inline-end", i) : this.style.removeProperty("--scb-toc-spacing-inline-end");
+	}
+	#i(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([a({
+	type: Boolean,
+	attribute: "single-open",
+	reflect: !0
+})], o.prototype, "singleOpen", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "spacing", void 0), e([a({
+	type: String,
+	attribute: "spacing-top",
+	reflect: !0
+})], o.prototype, "spacingTop", void 0), e([a({
+	type: String,
+	attribute: "spacing-bottom",
+	reflect: !0
+})], o.prototype, "spacingBottom", void 0), e([a({
+	type: String,
+	attribute: "spacing-left",
+	reflect: !0
+})], o.prototype, "spacingLeft", void 0), e([a({
+	type: String,
+	attribute: "spacing-right",
+	reflect: !0
+})], o.prototype, "spacingRight", void 0), o = e([i("scb-toc")], o);
+//#endregion
+export { o as ScbToc };