scb-wc 0.1.78 → 0.1.80

package/scb-keyfigure-card/scb-keyfigure-card.js

@@ -1,30 +1,36 @@
 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";
 //#region src/scb-components/scb-keyfigure-card/scb-keyfigure-card.ts
-var o, s = {
+var o = {
 	fromAttribute: (e) => e ?? "",
 	toAttribute: (e) => typeof e == "string" ? e.trim() === "" ? null : e : null
-}, c = class extends t {
-	static {
-		o = this;
-	}
+}, s, c, l;
+function u() {
+	return s ??= import("../shared/lazy-focus-ring.js"), s;
+}
+function d() {
+	return c ??= import("../shared/lazy-ripple.js"), c;
+}
+function f() {
+	return l ??= import("@material/web/icon/icon.js"), l;
+}
+var p = class extends t {
 	constructor(...e) {
-		super(...e), this.keyfigure = 0, this.subtitle = "", this.supportingText = "", this.cardHref = "", this.href = "", this.icon = "", this.size = "large", this.unit = "", this.width = "", this.maxWidth = "", this.height = "", this.maxHeight = "", this.sizing = "", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.__onKeyDown = (e) => {
+		super(...e), this.__focusRingRequested = !1, this.__focusRingLoaded = !1, this.__rippleRequested = !1, this.__rippleLoaded = !1, this.__pendingRippleClick = !1, this.keyfigure = 0, this.subtitle = "", this.supportingText = "", this.cardHref = "", this.href = "", this.icon = "", this.size = "large", this.unit = "", this.width = "", this.maxWidth = "", this.height = "", this.maxHeight = "", this.sizing = "", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.__onPointerInteraction = (e) => {
+			this.__ensureRipple(e);
+		}, this.__ensureFocusRingOnFocusVisible = () => {
+			this.__focusRingLoaded || this.__focusRingRequested || (this.__focusRingRequested = !0, u().then(({ ensureFocusRingReady: e }) => e()).then(() => {
+				this.__focusRingLoaded = !0, this.requestUpdate();
+			}));
+		}, this.__onKeyDown = (e) => {
 			let t = this.__effectiveHref;
 			(e.key === "Enter" || e.key === " ") && t && (e.preventDefault(), this.__navigate(t, e));
 		}, this.__handleHrefNavigation = (e) => {
 			let t = this.__effectiveHref;
-			t && (e.target.closest("a") || this.__navigate(t, e));
+			t && ((!this.__rippleLoaded || this.__pendingRippleEvent) && (this.__pendingRippleClick = !0, this.__ensureRipple()), !e.target.closest("a") && this.__navigate(t, e));
 		};
 	}
-	static {
-		this.__iconLoaded = !1;
-	}
-	static {
-		this.__rippleLoaded = !1;
-	}
 	static {
 		this.styles = n`
     :host {
@@ -174,6 +180,30 @@ var o, s = {
       inline-size: fit-content;
     }
 
+    .card-icon {
+      display: inline-flex;
+      align-items: center;
+      inline-size: 1em;
+      block-size: 1em;
+      overflow: hidden;
+      font-family: 'Material Symbols Outlined';
+      font-size: var(--icon-size-medium, 24px);
+      line-height: 1;
+      white-space: nowrap;
+      text-transform: none;
+      word-wrap: normal;
+      direction: ltr;
+      font-feature-settings: 'liga' 1;
+      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+      text-rendering: optimizeLegibility;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+    .card-icon.scb-svg-icon {
+      fill: currentColor;
+      font: inherit;
+    }
+
     .sub-label {
       font-size: var(--scb-keyfigure-card-subtitle-size);
       font-weight: var(--weight-semibold, 600);
@@ -236,17 +266,38 @@ var o, s = {
 		let t = Number(e);
 		return Number.isNaN(t) ? String(e) : t.toLocaleString("sv-SE").replace(/\u00A0/g, " ");
 	}
-	async firstUpdated() {
-		o.__iconLoaded || (await import("@material/web/icon/icon.js"), o.__iconLoaded = !0), o.__rippleLoaded || (await import("@material/web/ripple/ripple.js"), o.__rippleLoaded = !0), this.__applyInnerSizing(), this.#e();
+	firstUpdated() {
+		this.__applyInnerSizing(), this.__applySpacing(), this.__ensureSlottedIconDeps();
 	}
 	get __effectiveHref() {
 		return (this.cardHref || this.href || "").trim();
 	}
 	__hasSlottedContent(e) {
-		return Array.from(this.children).some((t) => t.getAttribute("slot") === e);
+		return !!this.querySelector(`[slot="${e}"]`);
 	}
 	__slottedText(e) {
-		return Array.from(this.children).filter((t) => t.getAttribute("slot") === e).map((e) => e.textContent?.trim() ?? "").filter(Boolean).join(" ");
+		return Array.from(this.querySelectorAll(`[slot="${e}"]`)).map((e) => e.textContent?.trim() ?? "").filter(Boolean).join(" ");
+	}
+	async __ensureSlottedIconDeps() {
+		let e = this.querySelector("[slot=\"icon\"]");
+		e && (e.localName === "md-icon" || e.querySelector?.("md-icon")) && await f();
+	}
+	__ensureRipple(e) {
+		if (this.__effectiveHref) {
+			if (e && (this.__pendingRippleEvent = e), this.__rippleLoaded) {
+				this.__syncRipple();
+				return;
+			}
+			this.__rippleRequested || (this.__rippleRequested = !0, d().then(({ ensureRippleReady: e }) => e()).then(() => {
+				this.__rippleLoaded = !0, this.requestUpdate(), this.updateComplete.then(() => this.__syncRipple());
+			}));
+		}
+	}
+	async __syncRipple() {
+		let e = this.renderRoot.querySelector("md-ripple"), t = this.renderRoot.querySelector(".scb-keyfigure-card"), n = this.__pendingRippleEvent, r = this.__pendingRippleClick;
+		this.__pendingRippleEvent = void 0, this.__pendingRippleClick = !1;
+		let { syncRippleToControl: i } = await d();
+		await i(e, t, n, r);
 	}
 	render() {
 		let e = this.__effectiveHref, t = !!e, n = this.formatNumber(this.keyfigure), i = (this.unit || "").trim(), a = i ? `${n} ${i}` : n, o = this.__hasSlottedContent("icon"), s = this.__hasSlottedContent("subtitle"), c = this.__hasSlottedContent("supporting-text"), l = s ? this.__slottedText("subtitle") : this.subtitle, u = this.supportingText, d = s || !!l, f = c || !!u;
@@ -258,17 +309,19 @@ var o, s = {
         aria-label=${l || a}
         @click=${t ? this.__handleHrefNavigation : null}
         @keydown=${t ? this.__onKeyDown : null}
-        style="cursor:${t ? "pointer" : "default"};"
+        @focusin=${t ? this.__ensureFocusRingOnFocusVisible : null}
+        @pointerenter=${t ? this.__onPointerInteraction : null}
+        @pointerdown=${t ? this.__onPointerInteraction : null}
       >
-        ${t ? r`<md-ripple></md-ripple>` : ""}
-        ${o ? r`<div class="icon-slot"><slot name="icon"></slot></div>` : this.icon ? r`<md-icon>${this.icon}</md-icon>` : ""}
+        ${t && this.__rippleLoaded ? r`<md-ripple></md-ripple>` : ""}
+        ${o ? r`<div class="icon-slot"><slot name="icon" @slotchange=${this.__ensureSlottedIconDeps}></slot></div>` : this.icon ? r`<span class="card-icon" aria-hidden="true">${this.icon}</span>` : ""}
 
         ${this.keyfigure !== void 0 && this.keyfigure !== null && this.keyfigure !== "" ? r`
           <div class="keyfigure">
             <span class="value" aria-label="${a}">
               ${n}${i ? r`<span class="unit" aria-hidden="true">\u00A0${i}</span>` : ""}
             </span>
-            ${t ? r`<md-icon>arrow_forward</md-icon>` : ""}
+            ${t ? r`<span class="card-icon" aria-hidden="true">arrow_forward</span>` : ""}
           </div>
         ` : ""}
 
@@ -285,7 +338,7 @@ var o, s = {
             ` : ""}
       </div>
 
-      ${t ? r`<md-focus-ring></md-focus-ring>` : ""}
+      ${t && this.__focusRingLoaded ? r`<md-focus-ring></md-focus-ring>` : ""}
     `;
 	}
 	__applyInnerSizing() {
@@ -293,14 +346,14 @@ var o, s = {
 		e && (this.width && this.width.trim() !== "" ? (e.style.inlineSize = "100%", e.style.maxInlineSize = "100%") : (e.style.removeProperty("inline-size"), e.style.removeProperty("max-inline-size")), this.height && this.height.trim() !== "" || this.sizing === "stretch" ? e.style.blockSize = "100%" : e.style.removeProperty("block-size"), this.maxHeight && this.maxHeight.trim() !== "" ? e.style.maxBlockSize = "100%" : e.style.removeProperty("max-block-size"));
 	}
 	updated(e) {
-		super.updated(e), e.has("width") && (this.width ? this.style.inlineSize = this.width : this.style.removeProperty("inline-size")), e.has("maxWidth") && (this.maxWidth ? this.style.maxInlineSize = this.maxWidth : this.style.removeProperty("max-inline-size")), e.has("height") && (this.height ? this.style.blockSize = this.height : this.style.removeProperty("block-size")), e.has("maxHeight") && (this.maxHeight ? this.style.maxBlockSize = this.maxHeight : this.style.removeProperty("max-block-size")), (e.has("width") || e.has("height") || e.has("maxHeight") || e.has("sizing")) && this.__applyInnerSizing(), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#e();
+		super.updated(e), e.has("width") && (this.width ? this.style.inlineSize = this.width : this.style.removeProperty("inline-size")), e.has("maxWidth") && (this.maxWidth ? this.style.maxInlineSize = this.maxWidth : this.style.removeProperty("max-inline-size")), e.has("height") && (this.height ? this.style.blockSize = this.height : this.style.removeProperty("block-size")), e.has("maxHeight") && (this.maxHeight ? this.style.maxBlockSize = this.maxHeight : this.style.removeProperty("max-block-size")), (e.has("width") || e.has("height") || e.has("maxHeight") || e.has("sizing")) && this.__applyInnerSizing(), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.__applySpacing();
 	}
 	mapSpacingToken(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() {
+	__applySpacing() {
 		let e = this.mapSpacingToken(this.spacing), t = this.mapSpacingToken(this.spacingTop) ?? e, n = this.mapSpacingToken(this.spacingBottom) ?? e, r = this.mapSpacingToken(this.spacingLeft), i = this.mapSpacingToken(this.spacingRight);
 		t ? this.style.setProperty("--scb-keyfigure-card-spacing-block-start", t) : this.style.removeProperty("--scb-keyfigure-card-spacing-block-start"), n ? this.style.setProperty("--scb-keyfigure-card-spacing-block-end", n) : this.style.removeProperty("--scb-keyfigure-card-spacing-block-end"), r ? this.style.setProperty("--scb-keyfigure-card-spacing-inline-start", r) : this.style.removeProperty("--scb-keyfigure-card-spacing-inline-start"), i ? this.style.setProperty("--scb-keyfigure-card-spacing-inline-end", i) : this.style.removeProperty("--scb-keyfigure-card-spacing-inline-end");
 	}
@@ -322,58 +375,58 @@ var o, s = {
 		this.__dispatchNavigateEvents(e, t) && (window.location.href = e);
 	}
 };
-e([a({ attribute: "keyfigure" })], c.prototype, "keyfigure", void 0), e([a({
+e([a({ attribute: "keyfigure" })], p.prototype, "keyfigure", void 0), e([a({
 	type: String,
 	attribute: "subtitle"
-})], c.prototype, "subtitle", void 0), e([a({
+})], p.prototype, "subtitle", void 0), e([a({
 	type: String,
 	attribute: "supporting-text"
-})], c.prototype, "supportingText", void 0), e([a({
+})], p.prototype, "supportingText", void 0), e([a({
 	type: String,
 	attribute: "card-href"
-})], c.prototype, "cardHref", void 0), e([a({
+})], p.prototype, "cardHref", void 0), e([a({
 	type: String,
 	attribute: "href"
-})], c.prototype, "href", void 0), e([a({ type: String })], c.prototype, "icon", void 0), e([a({
+})], p.prototype, "href", void 0), e([a({ type: String })], p.prototype, "icon", void 0), e([a({
 	type: String,
 	reflect: !0
-})], c.prototype, "size", void 0), e([a({ type: String })], c.prototype, "unit", void 0), e([a({
+})], p.prototype, "size", void 0), e([a({ type: String })], p.prototype, "unit", void 0), e([a({
 	type: String,
 	reflect: !0
-})], c.prototype, "width", void 0), e([a({
+})], p.prototype, "width", void 0), e([a({
 	type: String,
 	reflect: !0,
 	attribute: "max-width"
-})], c.prototype, "maxWidth", void 0), e([a({
+})], p.prototype, "maxWidth", void 0), e([a({
 	type: String,
 	reflect: !0
-})], c.prototype, "height", void 0), e([a({
+})], p.prototype, "height", void 0), e([a({
 	type: String,
 	reflect: !0,
 	attribute: "max-height"
-})], c.prototype, "maxHeight", void 0), e([a({
+})], p.prototype, "maxHeight", void 0), e([a({
 	type: String,
 	reflect: !0,
-	converter: s
-})], c.prototype, "sizing", void 0), e([a({
+	converter: o
+})], p.prototype, "sizing", void 0), e([a({
 	type: String,
 	reflect: !0
-})], c.prototype, "spacing", void 0), e([a({
+})], p.prototype, "spacing", void 0), e([a({
 	type: String,
 	reflect: !0,
 	attribute: "spacing-top"
-})], c.prototype, "spacingTop", void 0), e([a({
+})], p.prototype, "spacingTop", void 0), e([a({
 	type: String,
 	reflect: !0,
 	attribute: "spacing-bottom"
-})], c.prototype, "spacingBottom", void 0), e([a({
+})], p.prototype, "spacingBottom", void 0), e([a({
 	type: String,
 	reflect: !0,
 	attribute: "spacing-left"
-})], c.prototype, "spacingLeft", void 0), e([a({
+})], p.prototype, "spacingLeft", void 0), e([a({
 	type: String,
 	reflect: !0,
 	attribute: "spacing-right"
-})], c.prototype, "spacingRight", void 0), c = o = e([i("scb-keyfigure-card")], c);
+})], p.prototype, "spacingRight", void 0), p = e([i("scb-keyfigure-card")], p);
 //#endregion
-export { c as ScbKeyFigureCard };
+export { p as ScbKeyFigureCard };

package/scb-list/scb-list-item.js

@@ -1,22 +1,38 @@
 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, nothing as i } from "lit";
 import { customElement as a, property as o } from "lit/decorators.js";
-import "@material/web/focus/md-focus-ring.js";
-import "@material/web/ripple/ripple.js";
 //#region src/scb-components/scb-list/scb-list-item.ts
-var s = class extends t {
+var s, c;
+function l() {
+	return s ??= import("../shared/lazy-focus-ring.js"), s;
+}
+function u() {
+	return c ??= import("../shared/lazy-ripple.js"), c;
+}
+var d = class extends t {
 	constructor(...e) {
-		super(...e), this.type = "text", this.href = "", this.itemHref = "", this.target = "", this.disabled = !1, this.label = "", this.supportingText = "", this.overline = "", this.leading = !1, this.leadingVariant = "", this.leadingIcon = "", this.avatarLabel = "", this.avatarAlt = "", this.avatarVariant = "icon", this.avatarSrc = "", this.imgHrefImage = "", this.trailing = !1, this.trailingVariant = "", this.trailingIcon = "", this.trailingSwitchLabel = "", this.trailingSwitchWidth = "", this.trailingSwitchSelected = !1, this.density = 0, this.noDivider = !1, this.#e = !1, this.#t = !1, this.#n = !1, this.onRowClick = () => {
-			if (this.type === "link" && (this.href || this.itemHref)) return;
+		super(...e), this.type = "text", this.href = "", this.itemHref = "", this.target = "", this.disabled = !1, this.label = "", this.supportingText = "", this.overline = "", this.leading = !1, this.leadingVariant = "", this.leadingIcon = "", this.avatarLabel = "", this.avatarAlt = "", this.avatarVariant = "icon", this.avatarSrc = "", this.imgHrefImage = "", this.trailing = !1, this.trailingVariant = "", this.trailingIcon = "", this.trailingSwitchLabel = "", this.trailingSwitchWidth = "", this.trailingSwitchSelected = !1, this.density = 0, this.noDivider = !1, this.__scbCheckboxLoaded = !1, this.__scbSwitchLoaded = !1, this.__focusRingRequested = !1, this.__focusRingLoaded = !1, this.__rippleRequested = !1, this.__rippleLoaded = !1, this.__pendingRippleClick = !1, this.__syncRipple = async () => {
+			let e = this.renderRoot.querySelector("md-ripple"), t = this.renderRoot.querySelector(".row"), n = this.__pendingRippleEvent, r = this.__pendingRippleClick;
+			this.__pendingRippleEvent = void 0, this.__pendingRippleClick = !1;
+			let { syncRippleToControl: i } = await u();
+			await i(e, t, n, r);
+		}, this.__onPointerInteraction = (e) => {
+			this.__ensureRipple(e);
+		}, this.__onFocusIn = () => {
+			this.__ensureFocusRing();
+		}, this.__onLazyFocusRingKeydown = (e) => {
+			e.key === "Tab" && l().then(({ ensureFocusRingOnTab: t }) => t(e));
+		}, this.onRowClick = () => {
+			if (this.type === "link" && !this.disabled && (!this.__rippleLoaded || this.__pendingRippleEvent) && (this.__pendingRippleClick = !0, this.__ensureRipple()), this.type === "link" && (this.href || this.itemHref)) return;
 			let e = this.shadowRoot?.querySelector("scb-checkbox"), t = this.shadowRoot?.querySelector("scb-switch");
 			if (e && (e.checked = !e.checked), t) {
 				let e = !this.trailingSwitchSelected;
-				t.selected = e, this.#i(e, !0);
+				t.selected = e, this.__setTrailingSwitchSelected(e, !0);
 			}
-		}, this.#a = (e) => {
+		}, this.__onTrailingSwitchChange = (e) => {
 			let t = e.detail?.selected, n = typeof t == "boolean" ? t : e.currentTarget?.selected ?? !1;
-			this.#i(n, !0);
-		}, this.#o = (e) => {
+			this.__setTrailingSwitchSelected(n, !0);
+		}, this.__onKeydown = (e) => {
 			if (!e.defaultPrevented && (e.key === "Enter" || e.key === " ")) {
 				if (this.type === "link") {
 					let t = this.shadowRoot?.querySelector("a[href]");
@@ -29,12 +45,10 @@ var s = class extends t {
 			}
 		};
 	}
-	#e;
-	#t;
-	#n;
 	static get styles() {
 		return n`
       :host {
+        display: block;
         border-bottom: var(--stroke-border, 1px) solid var(--md-sys-color-outline-variant);
         margin-bottom: calc(var(--stroke-border, 1px) * -1);
         outline: none;
@@ -43,6 +57,10 @@ var s = class extends t {
         font-family: var(--brand-font);
       }
 
+      :host([hidden]) {
+        display: none;
+      }
+
       :host([no-divider]) { --stroke-border: 0px; }
 
       md-focus-ring {
@@ -52,7 +70,8 @@ var s = class extends t {
         display: none;
         border-radius: var(--scb-list-item-focus-ring-radius, var(--md-sys-shape-corner-small, 8px));
       }
-      :host(:focus-visible) md-focus-ring { display: block; }
+      :host(:focus-visible) md-focus-ring,
+      :host(:focus-within) md-focus-ring { display: block; }
 
       .row {
         display: flex;
@@ -84,6 +103,29 @@ var s = class extends t {
         pointer-events: none;
       }
 
+      .material-icon {
+        display: inline-block;
+        inline-size: var(--icon-size-medium, 24px);
+        block-size: var(--icon-size-medium, 24px);
+        overflow: hidden;
+        font-family: 'Material Symbols Outlined';
+        font-size: var(--icon-size-medium, 24px);
+        line-height: 1;
+        text-align: center;
+        white-space: nowrap;
+        text-transform: none;
+        word-wrap: normal;
+        direction: ltr;
+        font-feature-settings: 'liga' 1;
+        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+      .material-icon.scb-svg-icon {
+        fill: currentColor;
+        font: inherit;
+      }
+
       .leading { align-self: center; display: grid; place-items: center; }
       .img {
         width: calc(var(--icon-size-extra-large, 36px) + var(--spacing-5, 16px));
@@ -146,28 +188,44 @@ var s = class extends t {
     `;
 	}
 	async firstUpdated() {
-		await this.#r(), this.addEventListener("keydown", this.#o);
+		await this.__ensureDepsLoaded(), this.addEventListener("focusin", this.__onFocusIn), this.addEventListener("keydown", this.__onLazyFocusRingKeydown), this.addEventListener("keydown", this.__onKeydown);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("focusin", this.__onFocusIn), this.removeEventListener("keydown", this.__onLazyFocusRingKeydown), this.removeEventListener("keydown", this.__onKeydown), super.disconnectedCallback();
 	}
 	updated(e) {
-		super.updated(e), (e.has("leading") || e.has("leadingVariant") || e.has("trailing") || e.has("trailingVariant") || e.has("type") || e.has("target")) && this.#r();
+		super.updated(e), (e.has("leading") || e.has("leadingVariant") || e.has("trailing") || e.has("trailingVariant") || e.has("type") || e.has("target")) && this.__ensureDepsLoaded();
+	}
+	async __ensureDepsLoaded() {
+		this.trailing && this.trailingVariant === "checkbox" && !this.__scbCheckboxLoaded && (await import("../scb-checkbox/scb-checkbox.js"), this.__scbCheckboxLoaded = !0), this.trailing && this.trailingVariant === "switch" && !this.__scbSwitchLoaded && (await import("../scb-switch/scb-switch.js"), this.__scbSwitchLoaded = !0);
 	}
-	async #r() {
-		let e = this.type === "link" && (!this.trailing || this.trailingVariant === "icon");
-		(this.leading && this.leadingVariant === "icon" || this.trailing && this.trailingVariant === "icon" || e) && !this.#e && (await import("@material/web/icon/icon.js"), this.#e = !0), this.trailing && this.trailingVariant === "checkbox" && !this.#t && (await import("../scb-checkbox/scb-checkbox.js"), this.#t = !0), this.trailing && this.trailingVariant === "switch" && !this.#n && (await import("../scb-switch/scb-switch.js"), this.#n = !0);
+	__ensureRipple(e) {
+		if (!(this.type !== "link" || this.disabled)) {
+			if (e && (this.__pendingRippleEvent = e), this.__rippleLoaded) {
+				this.__syncRipple();
+				return;
+			}
+			this.__rippleRequested || (this.__rippleRequested = !0, u().then(({ ensureRippleReady: e }) => e()).then(() => {
+				this.disabled || (this.__rippleLoaded = !0, this.requestUpdate(), this.updateComplete.then(() => this.__syncRipple()));
+			}));
+		}
+	}
+	__ensureFocusRing() {
+		this.__focusRingLoaded || this.__focusRingRequested || (this.__focusRingRequested = !0, l().then(({ ensureFocusRingReady: e }) => e()).then(() => {
+			this.__focusRingLoaded = !0, this.requestUpdate();
+		}));
 	}
-	#i(e, t) {
+	__setTrailingSwitchSelected(e, t) {
 		this.trailingSwitchSelected = e, t && this.dispatchEvent(new CustomEvent("trailing-switch-change", {
 			detail: { selected: e },
 			bubbles: !0,
 			composed: !0
 		}));
 	}
-	#a;
-	#o;
 	render() {
 		let e = this.leading ? (() => {
 			switch (this.leadingVariant) {
-				case "icon": return this.leadingIcon ? r`<div class="leading"><md-icon>${this.leadingIcon}</md-icon></div>` : i;
+				case "icon": return this.leadingIcon ? r`<div class="leading"><span class="material-icon" aria-hidden="true">${this.leadingIcon}</span></div>` : i;
 				case "avatar": return r`
             <div class="leading">
               <scb-avatar
@@ -186,7 +244,7 @@ var s = class extends t {
 		})() : i, t = this.href || this.itemHref || "", n = this.target === "_blank" ? "open_in_new" : "chevron_right", a = this.label ? `Välj ${this.label}` : "Välj", o = this.label ? `Växla ${this.label}` : "Växla", s = i;
 		if (this.trailing) if (this.trailingVariant === "icon") {
 			let e = this.trailingIcon || (this.type === "link" ? n : "");
-			s = e ? r`<div class="trailing"><md-icon>${e}</md-icon></div>` : i;
+			s = e ? r`<div class="trailing"><span class="material-icon" aria-hidden="true">${e}</span></div>` : i;
 		} else this.trailingVariant === "checkbox" ? s = r`
           <div class="trailing">
             <scb-checkbox
@@ -200,26 +258,33 @@ var s = class extends t {
               label=${this.trailingSwitchLabel || i}
               aria-label=${o}
               @click=${(e) => e.stopPropagation()}
-              @change=${this.#a}
+              @change=${this.__onTrailingSwitchChange}
             ></scb-switch>
           </div>`);
-		else this.type === "link" && (s = r`<div class="trailing"><md-icon>${n}</md-icon></div>`);
+		else this.type === "link" && (s = r`<div class="trailing"><span class="material-icon" aria-hidden="true">${n}</span></div>`);
 		let c = this.type === "link" && this.target === "_blank" ? "noopener noreferrer" : i, l = r`
       ${e}
       <div class="texts">
         ${this.overline ? r`<div class="overline">${this.overline}</div>` : i}
-        <div class="label">${this.label}</div>
-        ${this.supportingText ? r`<div class="supporting-text">${this.supportingText}</div>` : i}
+        <div class="label"><slot name="label">${this.label}</slot></div>
+        ${this.supportingText || this.querySelector("[slot=\"supporting-text\"]") ? r`<div class="supporting-text"><slot name="supporting-text">${this.supportingText}</slot></div>` : i}
       </div>
       ${s}
     `;
 		return r`
-      <div class="row" @click=${this.onRowClick} ?inert=${this.disabled} aria-disabled=${this.disabled ? "true" : "false"}>
+      <div
+        class="row"
+        @click=${this.onRowClick}
+        @pointerenter=${this.type === "link" ? this.__onPointerInteraction : null}
+        @pointerdown=${this.type === "link" ? this.__onPointerInteraction : null}
+        ?inert=${this.disabled}
+        aria-disabled=${this.disabled ? "true" : "false"}
+      >
         ${this.type === "link" && t ? r`<a class="link" href=${t} target=${this.target || i} rel=${c}>${l}</a>` : l}
-        ${this.type === "link" ? r`<md-ripple></md-ripple>` : i}
+        ${this.type === "link" && this.__rippleLoaded ? r`<md-ripple></md-ripple>` : i}
       </div>
 
-      <md-focus-ring></md-focus-ring>
+      ${this.__focusRingLoaded ? r`<md-focus-ring></md-focus-ring>` : i}
     `;
 	}
 };
@@ -227,71 +292,71 @@ e([o({
 	type: String,
 	reflect: !0,
 	attribute: "type"
-})], s.prototype, "type", void 0), e([o({ type: String })], s.prototype, "href", void 0), e([o({
+})], d.prototype, "type", void 0), e([o({ type: String })], d.prototype, "href", void 0), e([o({
 	type: String,
 	attribute: "item-href"
-})], s.prototype, "itemHref", void 0), e([o({
+})], d.prototype, "itemHref", void 0), e([o({
 	type: String,
 	attribute: "target"
-})], s.prototype, "target", void 0), e([o({
+})], d.prototype, "target", void 0), e([o({
 	type: Boolean,
 	attribute: "disabled"
-})], s.prototype, "disabled", void 0), e([o({
+})], d.prototype, "disabled", void 0), e([o({
 	type: String,
 	reflect: !0
-})], s.prototype, "label", void 0), e([o({
+})], d.prototype, "label", void 0), e([o({
 	type: String,
 	attribute: "supporting-text"
-})], s.prototype, "supportingText", void 0), e([o({
+})], d.prototype, "supportingText", void 0), e([o({
 	type: String,
 	attribute: "overline"
-})], s.prototype, "overline", void 0), e([o({ type: Boolean })], s.prototype, "leading", void 0), e([o({
+})], d.prototype, "overline", void 0), e([o({ type: Boolean })], d.prototype, "leading", void 0), e([o({
 	type: String,
 	attribute: "leading-variant",
 	reflect: !0
-})], s.prototype, "leadingVariant", void 0), e([o({
+})], d.prototype, "leadingVariant", void 0), e([o({
 	type: String,
 	attribute: "leading-icon"
-})], s.prototype, "leadingIcon", void 0), e([o({
+})], d.prototype, "leadingIcon", void 0), e([o({
 	type: String,
 	attribute: "avatar-label"
-})], s.prototype, "avatarLabel", void 0), e([o({
+})], d.prototype, "avatarLabel", void 0), e([o({
 	type: String,
 	attribute: "avatar-alt"
-})], s.prototype, "avatarAlt", void 0), e([o({
+})], d.prototype, "avatarAlt", void 0), e([o({
 	type: String,
 	attribute: "avatar-variant"
-})], s.prototype, "avatarVariant", void 0), e([o({
+})], d.prototype, "avatarVariant", void 0), e([o({
 	type: String,
 	attribute: "avatar-src"
-})], s.prototype, "avatarSrc", void 0), e([o({
+})], d.prototype, "avatarSrc", void 0), e([o({
 	type: String,
 	reflect: !0,
 	attribute: "img-href-image"
-})], s.prototype, "imgHrefImage", void 0), e([o({ type: Boolean })], s.prototype, "trailing", void 0), e([o({
+})], d.prototype, "imgHrefImage", void 0), e([o({ type: Boolean })], d.prototype, "trailing", void 0), e([o({
 	type: String,
 	attribute: "trailing-variant",
 	reflect: !0
-})], s.prototype, "trailingVariant", void 0), e([o({
+})], d.prototype, "trailingVariant", void 0), e([o({
 	type: String,
 	attribute: "trailing-icon"
-})], s.prototype, "trailingIcon", void 0), e([o({
+})], d.prototype, "trailingIcon", void 0), e([o({
 	type: String,
 	attribute: "trailing-switch-label"
-})], s.prototype, "trailingSwitchLabel", void 0), e([o({
+})], d.prototype, "trailingSwitchLabel", void 0), e([o({
 	type: String,
 	attribute: "trailing-switch-width"
-})], s.prototype, "trailingSwitchWidth", void 0), e([o({
+})], d.prototype, "trailingSwitchWidth", void 0), e([o({
 	type: Boolean,
 	attribute: "trailing-switch-selected",
 	reflect: !0
-})], s.prototype, "trailingSwitchSelected", void 0), e([o({
+})], d.prototype, "trailingSwitchSelected", void 0), e([o({
 	type: Number,
 	reflect: !0
-})], s.prototype, "density", void 0), e([o({
+})], d.prototype, "density", void 0), e([o({
 	type: Boolean,
 	attribute: "no-divider",
 	reflect: !0
-})], s.prototype, "noDivider", void 0), s = e([a("scb-list-item")], s);
+})], d.prototype, "noDivider", void 0), d = e([a("scb-list-item")], d);
 //#endregion
-export { s as ScbListItem };
+export { d as ScbListItem };

package/scb-list/scb-list.js

@@ -5,11 +5,10 @@ import { customElement as i, property as a, query as o } from "lit/decorators.js
 //#region src/scb-components/scb-list/scb-list.ts
 var s = class extends t {
 	constructor(...e) {
-		super(...e), this.#e = !1, this.noDivider = !1, this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this._onSlotChange = () => this._setupItems();
+		super(...e), this.noDivider = !1, this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this._onSlotChange = () => this._setupItems();
 	}
-	#e;
-	async firstUpdated() {
-		this.#e ||= (await import("@material/web/list/list.js"), !0), this._setupItems(), this._applySpacing();
+	firstUpdated() {
+		this._setupItems(), this._applySpacing();
 	}
 	updated(e) {
 		super.updated(e), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this._applySpacing();
@@ -21,7 +20,7 @@ var s = class extends t {
 		this._getItems().forEach((e, t) => {
 			e.hasAttribute("role") || e.setAttribute("role", "listitem"), e.setAttribute("tabindex", t === 0 ? "0" : "-1");
 		});
-		let e = this.renderRoot?.querySelector("md-list");
+		let e = this.renderRoot?.querySelector(".list");
 		e && !e.hasAttribute("data-kbd") && (e.setAttribute("data-kbd", "true"), e.addEventListener("keydown", (e) => this._onKeyDown(e)));
 	}
 	_onKeyDown(e) {
@@ -67,8 +66,9 @@ var s = class extends t {
         --scb-list-bg: transparent;
       }
 
-      md-list {
+      .list {
         background: var(--scb-list-bg);
+        padding-block: var(--scb-list-container-padding-block, 8px);
       }
 
       /* Visa top-border på första raden endast när listan saknar no-divider
@@ -85,9 +85,9 @@ var s = class extends t {
 	}
 	render() {
 		return r`
-      <md-list role="list" @slotchange=${this._onSlotChange}>
-        <slot></slot>
-      </md-list>
+      <div class="list" role="list">
+        <slot @slotchange=${this._onSlotChange}></slot>
+      </div>
     `;
 	}
 };