scb-wc 0.1.78 → 0.1.80

package/scb-select/scb-select.js

@@ -1,12 +1,12 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { ensureFocusRingOnFocusVisible as e } from "../shared/lazy-focus-ring.js";
+import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import "../scb-chevron/scb-chevron.js";
 import "./scb-select-option.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 { ifDefined as o } from "lit/directives/if-defined.js";
+import { LitElement as n, css as r, html as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+import { ifDefined as s } from "lit/directives/if-defined.js";
 //#region src/scb-components/scb-select/scb-select.ts
-var s = class extends t {
+var c = class extends n {
 	static {
 		this.formAssociated = !0;
 	}
@@ -34,7 +34,7 @@ var s = class extends t {
 		this.size === "extra-small" ? this.setAttribute("data-density", "-5") : this.size === "small" ? this.setAttribute("data-density", "-4") : this.size === "medium" ? this.setAttribute("data-density", "-2") : this.removeAttribute("data-density");
 	}
 	static {
-		this.styles = n`
+		this.styles = r`
 		:host {
 			display: flex;
 			flex-direction: column;
@@ -426,8 +426,8 @@ var s = class extends t {
 		});
 	}
 	render() {
-		return r`
-			${this.label ? r`
+		return i`
+			${this.label ? i`
 				<label
 					class="select-label ${this.supportingText ? "" : "select-label--without-supporting"}"
 					id="scb-select-label-${this.name}"
@@ -435,11 +435,11 @@ var s = class extends t {
 					${this.label}
 				</label>
 			` : ""}
-			${this.supportingText ? r`
+			${this.supportingText ? i`
 				<span class="select-sub-label">${this.supportingText}</span>
 			` : ""}
 				<div class="select">
-					<div class="selected-value-container" tabindex="0" @click="${this._toggleOpen}" @keydown="${this._onKeyDown}">
+					<div class="selected-value-container" tabindex="0" @click="${this._toggleOpen}" @keydown="${this._onKeyDown}" @focusin=${e}>
 					<md-focus-ring inward></md-focus-ring>
 						<md-ripple></md-ripple>
 						<input
@@ -462,7 +462,7 @@ var s = class extends t {
 					</div>
 					<div
 						class="${this._hasMoreThanFourOptions() ? "options options--scroll" : "options"}"
-						style=${o(this.zIndex ? `z-index: ${this.zIndex};` : void 0)}
+						style=${s(this.zIndex ? `z-index: ${this.zIndex};` : void 0)}
 						@click=${this._onSlotClick}
 						@keydown=${this._onOptionKeyDown}
 					>
@@ -474,47 +474,47 @@ var s = class extends t {
 			`;
 	}
 };
-e([a({ type: String })], s.prototype, "variant", void 0), e([a({ type: String })], s.prototype, "value", void 0), e([a({ type: Array })], s.prototype, "values", void 0), e([a({ type: Boolean })], s.prototype, "disabled", void 0), e([a({
+t([o({ type: String })], c.prototype, "variant", void 0), t([o({ type: String })], c.prototype, "value", void 0), t([o({ type: Array })], c.prototype, "values", void 0), t([o({ type: Boolean })], c.prototype, "disabled", void 0), t([o({
 	type: Boolean,
 	reflect: !0
-})], s.prototype, "required", void 0), e([a({
+})], c.prototype, "required", void 0), t([o({
 	type: Boolean,
 	reflect: !0
-})], s.prototype, "open", void 0), e([a({ type: String })], s.prototype, "label", void 0), e([a({ type: String })], s.prototype, "name", void 0), e([a({ type: String })], s.prototype, "placeholder", void 0), e([a({
+})], c.prototype, "open", void 0), t([o({ type: String })], c.prototype, "label", void 0), t([o({ type: String })], c.prototype, "name", void 0), t([o({ type: String })], c.prototype, "placeholder", void 0), t([o({
 	type: String,
 	attribute: "supporting-text"
-})], s.prototype, "supportingText", void 0), e([a({
+})], c.prototype, "supportingText", void 0), t([o({
 	type: Boolean,
 	attribute: "with-radiobuttons"
-})], s.prototype, "withRadiobuttons", void 0), e([a({
+})], c.prototype, "withRadiobuttons", void 0), t([o({
 	type: Boolean,
 	attribute: "no-highlight-selected",
 	reflect: !0
-})], s.prototype, "noHighlightSelected", void 0), e([a({
+})], c.prototype, "noHighlightSelected", void 0), t([o({
 	type: String,
 	reflect: !0
-})], s.prototype, "size", void 0), e([a({
+})], c.prototype, "size", void 0), t([o({
 	type: String,
 	reflect: !0
-})], s.prototype, "spacing", void 0), e([a({
+})], c.prototype, "spacing", void 0), t([o({
 	type: String,
 	attribute: "spacing-top",
 	reflect: !0
-})], s.prototype, "spacingTop", void 0), e([a({
+})], c.prototype, "spacingTop", void 0), t([o({
 	type: String,
 	attribute: "spacing-bottom",
 	reflect: !0
-})], s.prototype, "spacingBottom", void 0), e([a({
+})], c.prototype, "spacingBottom", void 0), t([o({
 	type: String,
 	attribute: "spacing-left",
 	reflect: !0
-})], s.prototype, "spacingLeft", void 0), e([a({
+})], c.prototype, "spacingLeft", void 0), t([o({
 	type: String,
 	attribute: "spacing-right",
 	reflect: !0
-})], s.prototype, "spacingRight", void 0), e([a({
+})], c.prototype, "spacingRight", void 0), t([o({
 	type: String,
 	attribute: "z-index"
-})], s.prototype, "zIndex", void 0), s = e([i("scb-select")], s);
+})], c.prototype, "zIndex", void 0), c = t([a("scb-select")], c);
 //#endregion
-export { s as ScbSelect };
+export { c as ScbSelect };

package/scb-stepper/scb-step.js

@@ -1,16 +1,16 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.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 { ensureFocusRingOnFocusVisible as e } from "../shared/lazy-focus-ring.js";
+import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { LitElement as n, css as r, html as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
 import "@material/web/icon/icon.js";
 import "@material/web/ripple/ripple.js";
 //#region src/scb-components/scb-stepper/scb-step.ts
-var o = class extends t {
+var s = class extends n {
 	constructor(...e) {
 		super(...e), this.label = "", this.subLabel = "", this.symbolVariant = "number", this.number = 0, this.active = !1, this.completed = !1, this.changeOnCompleted = !1, this.islast = !1, this.variant = "horizontal", this.widthWeight = 1, this.icon = "";
 	}
 	static {
-		this.styles = n`
+		this.styles = r`
     :host {
         font-family: var(--brand-font);
         --scb-step-slide-from-x: 0px;
@@ -207,20 +207,21 @@ var o = class extends t {
 		})), e.preventDefault());
 	}
 	render() {
-		let e = this.active ? "step" : void 0, t = this.label ? `${this.label}${this.subLabel ? ": " + this.subLabel : ""}` : void 0;
+		let t = this.active ? "step" : void 0, n = this.label ? `${this.label}${this.subLabel ? ": " + this.subLabel : ""}` : void 0;
 		switch (this.symbolVariant) {
-			case "icon": return r`
+			case "icon": return i`
                     <div
                         class="scb-step-content"
                         tabindex="0"
                         role="listitem"
-                        aria-current=${e}
-                        aria-label=${t}
+                        aria-current=${t}
+                        aria-label=${n}
                         @keydown=${this.handleKeyDown}
+                        @focusin=${e}
                     >
                         <md-ripple></md-ripple>
                         <div class="symbol">
-                            ${this.completed && this.changeOnCompleted ? r`<md-icon>check</md-icon>` : r`<md-icon>${this.icon}</md-icon>`}
+                            ${this.completed && this.changeOnCompleted ? i`<md-icon>check</md-icon>` : i`<md-icon>${this.icon}</md-icon>`}
                         </div>
                         <div class="content">
                             <div class="label" data-label="${this.label}"><span class="label-text">${this.label}</span></div>
@@ -229,18 +230,19 @@ var o = class extends t {
                         <md-focus-ring></md-focus-ring>
                     </div>
                 `;
-			case "marker": return r`
+			case "marker": return i`
                     <div
                         class="scb-step-content"
                         tabindex="0"
                         role="listitem"
-                        aria-current=${e}
-                        aria-label=${t}
+                        aria-current=${t}
+                        aria-label=${n}
                         @keydown=${this.handleKeyDown}
+                        @focusin=${e}
                     >
                         <md-ripple></md-ripple>
                         <div class="symbol">
-                            ${this.completed && this.changeOnCompleted ? r`<md-icon>check</md-icon>` : r``}
+                            ${this.completed && this.changeOnCompleted ? i`<md-icon>check</md-icon>` : i``}
                         </div>
                         <div class="content">
                             <div class="label" data-label="${this.label}"><span class="label-text">${this.label}</span></div>
@@ -249,18 +251,19 @@ var o = class extends t {
                         <md-focus-ring></md-focus-ring>
                     </div>
                 `;
-			default: return r`
+			default: return i`
                     <div
                         class="scb-step-content"
                         tabindex="0"
                         role="listitem"
-                        aria-current=${e}
-                        aria-label=${t}
+                        aria-current=${t}
+                        aria-label=${n}
                         @keydown=${this.handleKeyDown}
+                        @focusin=${e}
                     >
                         <md-ripple></md-ripple>
                         <div class="symbol">
-                            ${this.completed && this.changeOnCompleted ? r`<md-icon>check</md-icon>` : r`<span>${this.number}</span>`}
+                            ${this.completed && this.changeOnCompleted ? i`<md-icon>check</md-icon>` : i`<span>${this.number}</span>`}
                         </div>
                         <div class="content">
                             <div class="label" data-label="${this.label}"><span class="label-text">${this.label}</span></div>
@@ -272,40 +275,40 @@ var o = class extends t {
 		}
 	}
 };
-e([a({
+t([o({
 	type: String,
 	reflect: !0
-})], o.prototype, "label", void 0), e([a({
+})], s.prototype, "label", void 0), t([o({
 	type: String,
 	reflect: !0,
 	attribute: "sub-label"
-})], o.prototype, "subLabel", void 0), e([a({
+})], s.prototype, "subLabel", void 0), t([o({
 	type: String,
 	reflect: !0,
 	attribute: "symbol-variant"
-})], o.prototype, "symbolVariant", void 0), e([a({
+})], s.prototype, "symbolVariant", void 0), t([o({
 	type: Number,
 	reflect: !0
-})], o.prototype, "number", void 0), e([a({
+})], s.prototype, "number", void 0), t([o({
 	type: Boolean,
 	reflect: !0
-})], o.prototype, "active", void 0), e([a({
+})], s.prototype, "active", void 0), t([o({
 	type: Boolean,
 	reflect: !0
-})], o.prototype, "completed", void 0), e([a({
+})], s.prototype, "completed", void 0), t([o({
 	type: Boolean,
 	reflect: !0,
 	attribute: "change-on-completed"
-})], o.prototype, "changeOnCompleted", void 0), e([a({
+})], s.prototype, "changeOnCompleted", void 0), t([o({
 	type: Boolean,
 	reflect: !0
-})], o.prototype, "islast", void 0), e([a({
+})], s.prototype, "islast", void 0), t([o({
 	type: String,
 	reflect: !0
-})], o.prototype, "variant", void 0), e([a({
+})], s.prototype, "variant", void 0), t([o({
 	type: Number,
 	reflect: !0,
 	attribute: "width-weight"
-})], o.prototype, "widthWeight", void 0), e([a({ type: String })], o.prototype, "icon", void 0), o = e([i("scb-step")], o);
+})], s.prototype, "widthWeight", void 0), t([o({ type: String })], s.prototype, "icon", void 0), s = t([a("scb-step")], s);
 //#endregion
-export { o as ScbStep };
+export { s as ScbStep };

package/scb-textfield/scb-textfield.js

@@ -1,19 +1,19 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { ensureFocusRingReady as e } from "../shared/lazy-focus-ring.js";
+import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import "../scb-icon-button/scb-icon-button.js";
 import "../scb-datepicker/scb-datepicker.js";
-import { LitElement as t, css as n, html as r } from "lit";
-import { customElement as i, property as a, state as o } from "lit/decorators.js";
-import "@material/web/focus/md-focus-ring.js";
+import { LitElement as n, css as r, html as i } from "lit";
+import { customElement as a, property as o, state as s } from "lit/decorators.js";
 import "@material/web/icon/icon.js";
 import "@material/web/ripple/ripple.js";
 //#region src/scb-components/scb-textfield/scb-textfield.ts
-var s = class extends t {
+var c = class extends n {
 	static {
 		this.formAssociated = !0;
 	}
 	constructor() {
-		super(), this._internals = null, this._inputFocused = !1, this._kbShouldShowRing = !1, this._onGlobalKeydown = (e) => {
-			e.key === "Tab" && (this._kbShouldShowRing = !0, this._inputFocused && this.#o());
+		super(), this._internals = null, this._inputFocused = !1, this._kbShouldShowRing = !1, this._onGlobalKeydown = (t) => {
+			t.key === "Tab" && (e(), this._kbShouldShowRing = !0, this._inputFocused && this.#o());
 		}, this._onGlobalPointerDown = () => {
 			this._kbShouldShowRing = !1, this._inputFocused && this.#o();
 		}, this._hasRenderedOnce = !1, this._boundField = null, this._onFieldInput = () => {
@@ -64,7 +64,7 @@ var s = class extends t {
 		}, "attachInternals" in this && (this._internals = this.attachInternals());
 	}
 	static {
-		this.styles = [n`
+		this.styles = [r`
       :host {
         --scb-textfield-number-max-width: 280px;
         --scb-textfield-text-max-width: 400px;
@@ -441,9 +441,9 @@ var s = class extends t {
 		this.size === "extra-small" ? this.setAttribute("data-density", "-5") : this.size === "small" ? this.setAttribute("data-density", "-4") : this.size === "medium" ? this.setAttribute("data-density", "-2") : this.removeAttribute("data-density");
 	}
 	render() {
-		let e = this.leadingIcon ? r`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>` : null, t = this.error ? r`<md-icon class="scb-textfield-error-icon" aria-hidden="true">error</md-icon>` : null;
+		let e = this.leadingIcon ? i`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>` : null, t = this.error ? i`<md-icon class="scb-textfield-error-icon" aria-hidden="true">error</md-icon>` : null;
 		this.underLabel = this.error ? this.errorText || "Ogiltig inmatning." : this.supportingText, this.value = this.value || "";
-		let n = this.underLabel ? `${this._inputId}-supporting-text` : void 0, i = this.type === "search" && this.value ? r`
+		let n = this.underLabel ? `${this._inputId}-supporting-text` : void 0, r = this.type === "search" && this.value ? i`
             <button
               type="button"
               class="scb-textfield-clear"
@@ -478,14 +478,14 @@ var s = class extends t {
               </svg>
             </button>
           ` : null;
-		return this.type === "textarea" ? r`
+		return this.type === "textarea" ? i`
         <label
           class="scb-textfield-label ${this.underLabel ? "" : "scb-textfield-label--without-supporting"}"
           for="${this._inputId}"
         >
           ${this.label}
         </label>
-        ${this.underLabel ? r`
+        ${this.underLabel ? i`
               <span class="scb-textfield-supporting-text" id="${this._inputId}-supporting-text">
                 ${this.underLabel}
               </span>
@@ -506,14 +506,14 @@ var s = class extends t {
             <md-focus-ring class="input-ring"></md-focus-ring>
           </div>
         </div>
-      ` : this.type === "date" ? r`
+      ` : this.type === "date" ? i`
         <label
           class="scb-textfield-label ${this.underLabel ? "" : "scb-textfield-label--without-supporting"}"
           for="${this._inputId}"
         >
           ${this.label}
         </label>
-        ${this.underLabel ? r`
+        ${this.underLabel ? i`
               <span class="scb-textfield-supporting-text" id="${this._inputId}-supporting-text">
                 ${this.underLabel}
               </span>
@@ -538,7 +538,7 @@ var s = class extends t {
             <md-ripple></md-ripple>
             <md-focus-ring class="input-ring"></md-focus-ring>
           </div>
-          ${this.error ? t : r`
+          ${this.error ? t : i`
                 <scb-icon-button
                   class="scb-textfield-datepicker-button"
                   icon="calendar_today"
@@ -553,14 +553,14 @@ var s = class extends t {
             @date-selected=${this._onDateSelected}
           ></scb-datepicker>
         </div>
-      ` : this.type === "datetime-local" ? r`
+      ` : this.type === "datetime-local" ? i`
         <label
           class="scb-textfield-label ${this.underLabel ? "" : "scb-textfield-label--without-supporting"}"
           for="${this._inputId}"
         >
           ${this.label}
         </label>
-        ${this.underLabel ? r`
+        ${this.underLabel ? i`
               <span class="scb-textfield-supporting-text" id="${this._inputId}-supporting-text">
                 ${this.underLabel}
               </span>
@@ -587,7 +587,7 @@ var s = class extends t {
             <md-focus-ring class="input-ring"></md-focus-ring>
           </div>
 
-          ${this.error ? t : r`
+          ${this.error ? t : i`
                 <scb-icon-button
                   class="scb-textfield-datepicker-button"
                   icon="calendar_today"
@@ -603,14 +603,14 @@ var s = class extends t {
             @date-selected=${this._onDateSelected}
           ></scb-datepicker>
         </div>
-      ` : this.type === "time" ? r`
+      ` : this.type === "time" ? i`
         <label
           class="scb-textfield-label ${this.underLabel ? "" : "scb-textfield-label--without-supporting"}"
           for="${this._inputId}"
         >
           ${this.label}
         </label>
-        ${this.underLabel ? r`
+        ${this.underLabel ? i`
               <span class="scb-textfield-supporting-text" id="${this._inputId}-supporting-text">
                 ${this.underLabel}
               </span>
@@ -649,14 +649,14 @@ var s = class extends t {
             <md-focus-ring class="input-ring"></md-focus-ring>
           </div>
         </div>
-      ` : r`
+      ` : i`
       <label
         class="scb-textfield-label ${this.underLabel ? "" : "scb-textfield-label--without-supporting"}"
         for="${this._inputId}"
       >
         ${this.label}
       </label>
-      ${this.underLabel ? r`
+      ${this.underLabel ? i`
             <span class="scb-textfield-supporting-text" id="${this._inputId}-supporting-text">
               ${this.underLabel}
             </span>
@@ -675,7 +675,7 @@ var s = class extends t {
             aria-invalid=${this.error ? "true" : "false"}
             aria-describedby=${n}
           />
-          ${i}
+          ${r}
           ${t}
           <md-ripple></md-ripple>
           <md-focus-ring class="input-ring"></md-focus-ring>
@@ -776,52 +776,52 @@ var s = class extends t {
 		e && (this._inputFocused && this._kbShouldShowRing ? e.setAttribute("data-kb-focus", "true") : e.removeAttribute("data-kb-focus"));
 	}
 };
-e([a({
+t([o({
 	type: String,
 	reflect: !0
-})], s.prototype, "type", void 0), e([a({ type: String })], s.prototype, "label", void 0), e([a({
+})], c.prototype, "type", void 0), t([o({ type: String })], c.prototype, "label", void 0), t([o({
 	type: String,
 	attribute: "supporting-text"
-})], s.prototype, "supportingText", void 0), e([a({
+})], c.prototype, "supportingText", void 0), t([o({
 	type: String,
 	attribute: "error-text"
-})], s.prototype, "errorText", void 0), e([a({
+})], c.prototype, "errorText", void 0), t([o({
 	type: String,
 	attribute: "leading-icon"
-})], s.prototype, "leadingIcon", void 0), e([a({ type: String })], s.prototype, "name", void 0), e([a({ type: String })], s.prototype, "pattern", void 0), e([a({
+})], c.prototype, "leadingIcon", void 0), t([o({ type: String })], c.prototype, "name", void 0), t([o({ type: String })], c.prototype, "pattern", void 0), t([o({
 	type: String,
 	attribute: "value"
-})], s.prototype, "value", void 0), e([a({ type: String })], s.prototype, "underLabel", void 0), e([a({
+})], c.prototype, "value", void 0), t([o({ type: String })], c.prototype, "underLabel", void 0), t([o({
 	type: Boolean,
 	reflect: !0
-})], s.prototype, "error", void 0), e([a({
+})], c.prototype, "error", void 0), t([o({
 	type: Boolean,
 	reflect: !0
-})], s.prototype, "disabled", void 0), e([a({
+})], c.prototype, "disabled", void 0), t([o({
 	type: Boolean,
 	reflect: !0
-})], s.prototype, "required", void 0), e([a({
+})], c.prototype, "required", void 0), t([o({
 	type: String,
 	reflect: !0
-})], s.prototype, "size", void 0), e([a({
+})], c.prototype, "size", void 0), t([o({
 	type: String,
 	reflect: !0
-})], s.prototype, "spacing", void 0), e([a({
+})], c.prototype, "spacing", void 0), t([o({
 	type: String,
 	attribute: "spacing-top",
 	reflect: !0
-})], s.prototype, "spacingTop", void 0), e([a({
+})], c.prototype, "spacingTop", void 0), t([o({
 	type: String,
 	attribute: "spacing-bottom",
 	reflect: !0
-})], s.prototype, "spacingBottom", void 0), e([a({
+})], c.prototype, "spacingBottom", void 0), t([o({
 	type: String,
 	attribute: "spacing-left",
 	reflect: !0
-})], s.prototype, "spacingLeft", void 0), e([a({
+})], c.prototype, "spacingLeft", void 0), t([o({
 	type: String,
 	attribute: "spacing-right",
 	reflect: !0
-})], s.prototype, "spacingRight", void 0), e([o()], s.prototype, "_showDatepicker", void 0), s = e([i("scb-textfield")], s);
+})], c.prototype, "spacingRight", void 0), t([s()], c.prototype, "_showDatepicker", void 0), c = t([a("scb-textfield")], c);
 //#endregion
-export { s as ScbTextField };
+export { c as ScbTextField };

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

@@ -1,18 +1,18 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { addLazyFocusRingListeners as e } from "../shared/lazy-focus-ring.js";
+import { __decorate as t } 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 { LitElement as n, css as r, html as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
 import "@material/web/icon/icon.js";
 import "@material/web/ripple/ripple.js";
 //#region src/scb-components/scb-toc/scb-toc-item.ts
-var o, s = class extends t {
+var s, c = class extends n {
 	static {
-		o = this;
+		s = 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 = () => {
+		super(...e), this.expanded = !1, this.size = "medium", this.label = "", this.supportingText = "", this.itemHref = "#", this.noDivider = !1, this._unique = s._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 = () => {
@@ -57,10 +57,10 @@ var o, s = class extends t {
 		this._uidSeq = 0;
 	}
 	static _uid() {
-		return globalThis.crypto?.randomUUID?.() ?? `${o._uidPrefix}-${++o._uidSeq}`;
+		return globalThis.crypto?.randomUUID?.() ?? `${s._uidPrefix}-${++s._uidSeq}`;
 	}
 	static {
-		this.styles = [n`
+		this.styles = [r`
       :host {
         display: block;
         --scb-toc-transition-duration: var(--motion-duration-short, 150ms);
@@ -334,13 +334,13 @@ var o, s = class extends t {
 		})));
 	}
 	connectedCallback() {
-		super.connectedCallback(), this._slotHasContent = Array.from(this.children).some((e) => {
+		super.connectedCallback(), this._removeLazyFocusRingListeners = e(this, this.renderRoot), 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);
+		this._removeLazyFocusRingListeners?.(), this._removeLazyFocusRingListeners = void 0, super.disconnectedCallback(), this._overflowVisibleTimer !== null && (window.clearTimeout(this._overflowVisibleTimer), this._overflowVisibleTimer = null);
 	}
 	_applyInertByExpanded() {
 		let e = this.renderRoot.querySelector(".scb-toc-item-bottom");
@@ -399,10 +399,10 @@ var o, s = class extends t {
 		});
 	}
 	render() {
-		let e = `bottom-${this._unique}`, t = `toc-label-${this._unique}`, n = `toc-chevron-${this._unique}`, i = this.supportingText.trim().length > 0;
-		return r`
+		let e = `bottom-${this._unique}`, t = `toc-label-${this._unique}`, n = `toc-chevron-${this._unique}`, r = this.supportingText.trim().length > 0;
+		return i`
       <div class="scb-toc-item" role="listitem">
-        <div class=${`scb-toc-item-top${i ? "" : " no-supporting-text"}`}>
+        <div class=${`scb-toc-item-top${r ? "" : " no-supporting-text"}`}>
           <div>
             <div class="toc-item-label-wrapper">
               <a
@@ -415,14 +415,14 @@ var o, s = class extends t {
               </a>
               <md-focus-ring for=${t} inward></md-focus-ring>
             </div>
-            ${i ? r`<div class="supporting-text">${this.supportingText}</div>` : ""}
+            ${r ? i`<div class="supporting-text">${this.supportingText}</div>` : ""}
           </div>
 
-          ${this._trailingSlotHasContent ? r`
+          ${this._trailingSlotHasContent ? i`
                 <div class="toc-chevron-button-wrapper">
                   <slot name="trailing"></slot>
                 </div>
-              ` : this._slotHasContent ? r`
+              ` : this._slotHasContent ? i`
                 <div class="toc-chevron-button-wrapper">
                   <button
                     id=${n}
@@ -449,29 +449,29 @@ var o, s = class extends t {
           </div>
         </div>
 
-        ${this.noDivider ? "" : r`<scb-divider></scb-divider>`}
+        ${this.noDivider ? "" : i`<scb-divider></scb-divider>`}
       </div>
     `;
 	}
 };
-e([a({
+t([o({
 	type: Boolean,
 	reflect: !0
-})], s.prototype, "expanded", void 0), e([a({
+})], c.prototype, "expanded", void 0), t([o({
 	type: String,
 	reflect: !0
-})], s.prototype, "size", void 0), e([a({
+})], c.prototype, "size", void 0), t([o({
 	type: String,
 	reflect: !0
-})], s.prototype, "label", void 0), e([a({
+})], c.prototype, "label", void 0), t([o({
 	type: String,
 	attribute: "supporting-text"
-})], s.prototype, "supportingText", void 0), e([a({
+})], c.prototype, "supportingText", void 0), t([o({
 	type: String,
 	attribute: "item-href"
-})], s.prototype, "itemHref", void 0), e([a({
+})], c.prototype, "itemHref", void 0), t([o({
 	type: Boolean,
 	attribute: "no-divider"
-})], s.prototype, "noDivider", void 0), s = o = e([i("scb-toc-item")], s);
+})], c.prototype, "noDivider", void 0), c = s = t([a("scb-toc-item")], c);
 //#endregion
-export { s as ScbTocItem };
+export { c as ScbTocItem };