scb-wc 0.1.78 → 0.1.80

package/scb-calendar/scb-calendar.js

@@ -1,17 +1,17 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
-import "../scb-list/scb-list.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-icon-button/scb-icon-button.js";
 import "./scb-calendar-event.js";
 import "../scb-dialog/scb-dialog.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 "../scb-list/scb-list.js";
+import { LitElement as n, css as r, html as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
 //#region src/scb-components/scb-calendar/scb-calendar.ts
-var o = { fromAttribute(e) {
+var s = { fromAttribute(e) {
 	if (e === null) return !1;
 	let t = e.trim().toLowerCase();
 	return t !== "false" && t !== "0" && t !== "no";
-} }, s = class extends t {
+} }, c = class extends n {
 	constructor(...e) {
 		super(...e), this._lastActiveDay = null, this.lang = "sv", this.disableWeekend = !1, this.publicHolidays = !0, this.displayYear = (/* @__PURE__ */ new Date()).getFullYear(), this.displayMonth = (/* @__PURE__ */ new Date()).getMonth() + 1, this.selectedDate = "", this.eventsJson = void 0, this._eventsFromJson = null, this._eventsJsonLast = void 0, this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this._mutationObserver = null, this._syncingDisplay = !1, this._onCalendarKeyDown = (e) => {
 			let t = Array.from(this.shadowRoot?.querySelectorAll(".calendar-day.has-event") ?? []), n = this.shadowRoot?.activeElement, r = n && t.includes(n) ? n : document.activeElement, i = t.indexOf(r);
@@ -57,7 +57,7 @@ var o = { fromAttribute(e) {
 		super.attributeChangedCallback(e, t, n), e === "value" && (this.value = n ?? "");
 	}
 	static {
-		this.styles = n`
+		this.styles = r`
     :host {
         display: block;
         margin-block-start: var(--scb-calendar-spacing-block-start, 0);
@@ -174,14 +174,14 @@ var o = { fromAttribute(e) {
   `;
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.#e();
-		let e = Number(this.displayYear), t = Number(this.displayMonth);
-		!Number.isNaN(e) && !Number.isNaN(t) && t >= 1 && t <= 12 && (this._current = new Date(e, t - 1, 1)), this._syncDisplayFromCurrent(!1), this.addEventListener("change", this._onEventChanged), this._mutationObserver = new MutationObserver(() => {
+		super.connectedCallback(), this._removeLazyFocusRingListeners = e(this, this.renderRoot), this.#e();
+		let t = Number(this.displayYear), n = Number(this.displayMonth);
+		!Number.isNaN(t) && !Number.isNaN(n) && n >= 1 && n <= 12 && (this._current = new Date(t, n - 1, 1)), this._syncDisplayFromCurrent(!1), this.addEventListener("change", this._onEventChanged), this._mutationObserver = new MutationObserver(() => {
 			this.requestUpdate();
 		}), this._mutationObserver.observe(this, { childList: !0 }), this.addEventListener("keydown", this._onCalendarKeyDown);
 	}
 	disconnectedCallback() {
-		this.removeEventListener("change", this._onEventChanged), super.disconnectedCallback(), this._mutationObserver &&= (this._mutationObserver.disconnect(), null), this.removeEventListener("keydown", this._onCalendarKeyDown);
+		this.removeEventListener("change", this._onEventChanged), this._removeLazyFocusRingListeners?.(), this._removeLazyFocusRingListeners = void 0, super.disconnectedCallback(), this._mutationObserver &&= (this._mutationObserver.disconnect(), null), this.removeEventListener("keydown", this._onCalendarKeyDown);
 	}
 	mapSpacingToken(e) {
 		if (!e) return;
@@ -485,7 +485,7 @@ var o = { fromAttribute(e) {
 		return null;
 	}
 	render() {
-		let e = this._current.getFullYear(), t = this._current.getMonth(), n = this._daysInMonth(e, t), i = this._firstDayOfWeek(e, t), a = this._today, o = this.lang === "en", s = o ? [
+		let e = this._current.getFullYear(), t = this._current.getMonth(), n = this._daysInMonth(e, t), r = this._firstDayOfWeek(e, t), a = this._today, o = this.lang === "en", s = o ? [
 			"January",
 			"February",
 			"March",
@@ -548,21 +548,21 @@ var o = { fromAttribute(e) {
 			], p = f;
 			for (let d = 0; d < l.length; d++) {
 				let f = l[d];
-				if (s === 0 && f < i) {
+				if (s === 0 && f < r) {
 					if (!this.disableWeekend || f < 5) {
-						let n = t === 0 ? 11 : t - 1, a = t === 0 ? e - 1 : e, o = this._daysInMonth(a, n) - (i - f - 1);
-						c.push(r`
+						let n = t === 0 ? 11 : t - 1, a = t === 0 ? e - 1 : e, o = this._daysInMonth(a, n) - (r - f - 1);
+						c.push(i`
               <div class="calendar-day calendar-day--other">
                 <span class="calendar-day-number">${o}</span>
               </div>
             `);
 					}
-				} else if (p > n) c.push(r`<div></div>`);
+				} else if (p > n) c.push(i`<div></div>`);
 				else {
-					let i = new Date(e, t, p);
-					if (this.disableWeekend) for (; i.getDay() === 0 || i.getDay() === 6;) p++, i = new Date(e, t, p);
+					let r = new Date(e, t, p);
+					if (this.disableWeekend) for (; r.getDay() === 0 || r.getDay() === 6;) p++, r = new Date(e, t, p);
 					if (p > n) {
-						c.push(r`<div></div>`);
+						c.push(i`<div></div>`);
 						continue;
 					}
 					let s = a.getFullYear() === e && a.getMonth() === t && a.getDate() === p, l = `${e}-${String(t + 1).padStart(2, "0")}-${String(p).padStart(2, "0")}`, d = new Date(e, t, p), f = !1, m = null;
@@ -584,7 +584,7 @@ var o = { fromAttribute(e) {
 							prefix: n
 						};
 					});
-					c.push(r`
+					c.push(i`
             <div
               class="calendar-day${s ? " today" : ""}${h.length ? " has-event" : ""}${f ? " calendar-day--holiday" : ""}"
               tabindex=${h.length ? "0" : void 0}
@@ -603,51 +603,51 @@ var o = { fromAttribute(e) {
               aria-label=${m || (h.length ? h.length === 1 ? h[0].title : h.map((e) => e.title).join(", ") : void 0)}
             >
               <md-focus-ring inward></md-focus-ring>
-              <span class="calendar-day-number">${p} ${m ? r`<span class="calendar-day-holiday-name">${m}</span>` : ""}</span>
+              <span class="calendar-day-number">${p} ${m ? i`<span class="calendar-day-holiday-name">${m}</span>` : ""}</span>
               <div class="calendar-titles-wrapper">
-                ${g.map((e) => r`<span class="calendar-day-event-title">${e.prefix || ""}${e.title}</span>`)}
+                ${g.map((e) => i`<span class="calendar-day-event-title">${e.prefix || ""}${e.title}</span>`)}
               </div>
             </div>
           `), p++;
 				}
 			}
-			if (f = p, d.push(r`<div class="calendar-grid">${c}</div>`), f > n) break;
+			if (f = p, d.push(i`<div class="calendar-grid">${c}</div>`), f > n) break;
 		}
-		return r`
+		return i`
       <div class="calendar-header">
         <scb-icon-button @click=${this._prevMonth} icon="chevron_left" aria-label="${o ? "Previous month" : "Föregående månad"}"></scb-icon-button>
         <span>${s[t]} ${e}</span>
         <scb-icon-button @click=${this._nextMonth} icon="chevron_right" aria-label="${o ? "Next month" : "Nästa månad"}"></scb-icon-button>
       </div>
       <div class="calendar-grid calendar-grid-days">
-        ${c.map((e) => r`<div>${e}</div>`)}
+        ${c.map((e) => i`<div>${e}</div>`)}
       </div>
       <div class="calendar-weeks">
       ${d}
       </div>
-      ${this._popupEvent && Array.isArray(this._popupEvent.events) ? r`
+      ${this._popupEvent && Array.isArray(this._popupEvent.events) ? i`
         <scb-dialog variant="floating" open label="${o ? "Events" : "Händelser"} ${this._popupEvent.date}">
           <scb-list>
             ${[...this._popupEvent.events].sort((e, t) => {
 			let n = e.start && e.start.includes("T") ? e.start : e.end && e.end.includes("T") ? e.end : "", r = t.start && t.start.includes("T") ? t.start : t.end && t.end.includes("T") ? t.end : "", i = n && n.includes("T"), a = r && r.includes("T");
 			return i && a ? n.localeCompare(r) : i ? -1 : a ? 1 : e.title.localeCompare(t.title);
 		}).map((e) => {
-			let t = this._popupEvent?.date ?? "", n = "", i = "", a = "";
+			let t = this._popupEvent?.date ?? "", n = "", r = "", a = "";
 			if (e.start && e.end) {
-				let r = e.start.split("T")[0], s = e.end.split("T")[0];
-				r === s && e.start.includes("T") && e.end.includes("T") ? n = e.start.split("T")[1].substring(0, 5) + " – " + e.end.split("T")[1].substring(0, 5) : t === r && e.start.includes("T") && (n = "Start: " + e.start.split("T")[1].substring(0, 5) + (o ? " (Extended event) " : " (Flerdagsevenemang) ")), t === s && e.end.includes("T") && r !== s && (a = (o ? "End: " : "Slut: ") + e.end.split("T")[1].substring(0, 5)), t !== r && (i = o ? "cont. " : "fort. ");
+				let i = e.start.split("T")[0], s = e.end.split("T")[0];
+				i === s && e.start.includes("T") && e.end.includes("T") ? n = e.start.split("T")[1].substring(0, 5) + " – " + e.end.split("T")[1].substring(0, 5) : t === i && e.start.includes("T") && (n = "Start: " + e.start.split("T")[1].substring(0, 5) + (o ? " (Extended event) " : " (Flerdagsevenemang) ")), t === s && e.end.includes("T") && i !== s && (a = (o ? "End: " : "Slut: ") + e.end.split("T")[1].substring(0, 5)), t !== i && (r = o ? "cont. " : "fort. ");
 			} else e.start && e.start.includes("T") && (n = e.start.split("T")[1].substring(0, 5));
-			return e.href ? r`
+			return e.href ? i`
                   <scb-list-item
                     type="link"
                     item-href="${e.href}"
-                    label="${i}${e.title}"
+                    label="${r}${e.title}"
                     supporting-text="${e.description ? e.description : ""}"
                     overline="${n || ""}${a || ""}"
                   >
-                  </scb-list-item>` : r`
+                  </scb-list-item>` : i`
                 <scb-list-item
-                  label="${i}${e.title}"
+                  label="${r}${e.title}"
                   supporting-text="${e.description ? e.description : ""}"
                   overline="${n || ""}${a || ""}"
                 >
@@ -659,49 +659,49 @@ var o = { fromAttribute(e) {
     `;
 	}
 };
-e([a({ type: String })], s.prototype, "lang", void 0), e([a({
+t([o({ type: String })], c.prototype, "lang", void 0), t([o({
 	type: Boolean,
 	attribute: "disable-weekend",
 	reflect: !0,
-	converter: o
-})], s.prototype, "disableWeekend", void 0), e([a({
+	converter: s
+})], c.prototype, "disableWeekend", void 0), t([o({
 	type: Boolean,
 	attribute: "public-holidays",
-	converter: o
-})], s.prototype, "publicHolidays", void 0), e([a({
+	converter: s
+})], c.prototype, "publicHolidays", void 0), t([o({
 	type: Number,
 	attribute: "display-year",
 	reflect: !0
-})], s.prototype, "displayYear", void 0), e([a({
+})], c.prototype, "displayYear", void 0), t([o({
 	type: Number,
 	attribute: "display-month",
 	reflect: !0
-})], s.prototype, "displayMonth", void 0), e([a({
+})], c.prototype, "displayMonth", void 0), t([o({
 	type: String,
 	attribute: "selected-date",
 	reflect: !0
-})], s.prototype, "selectedDate", void 0), e([a({ attribute: !1 })], s.prototype, "events", void 0), e([a({
+})], c.prototype, "selectedDate", void 0), t([o({ attribute: !1 })], c.prototype, "events", void 0), t([o({
 	type: String,
 	attribute: "events-json"
-})], s.prototype, "eventsJson", void 0), e([a({
+})], c.prototype, "eventsJson", 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), s = e([i("scb-calendar")], s);
+})], c.prototype, "spacingRight", void 0), c = t([a("scb-calendar")], c);
 //#endregion
-export { s as ScbCalendar };
+export { c as ScbCalendar };

package/scb-calendar-card/scb-calendar-card.js

@@ -1,23 +1,26 @@
 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-calendar-card/scb-calendar-card.ts
-var o, s = {
+var o = new Intl.DateTimeFormat("sv-SE", { month: "short" }), s = {
 	fromAttribute: (e) => e ?? "",
 	toAttribute: (e) => typeof e == "string" ? e.trim() === "" ? null : e : null
-}, c = class extends t {
-	static {
-		o = this;
-	}
+}, c, l;
+function u() {
+	return c ??= import("../shared/lazy-focus-ring.js"), c;
+}
+function d() {
+	return l ??= import("../shared/lazy-ripple.js"), l;
+}
+var f = class extends t {
 	constructor(...e) {
-		super(...e), this.variant = "default", this.size = "medium", this.date = null, this.direction = "horizontal", this.title = "", this.calendarCardTitle = "", this.subtitle = "", this.supportingText = "", this.cardHref = "", this.cardHrefNav = "", this.showMedia = null, this.mediaWidth = "", this.mediaHeight = "", this.mediaAspect = "", this.width = "", this.maxWidth = "", this.minWidth = "", this.height = "", this.maxHeight = "", this.minHeight = "", this.sizing = "", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0;
-	}
-	static {
-		this.__iconLoaded = !1;
-	}
-	static {
-		this.__rippleLoaded = !1;
+		super(...e), this.variant = "default", this.size = "medium", this.date = null, this.direction = "horizontal", this.title = "", this.calendarCardTitle = "", this.subtitle = "", this.supportingText = "", this.cardHref = "", this.cardHrefNav = "", this.showMedia = null, this.mediaWidth = "", this.mediaHeight = "", this.mediaAspect = "", this.width = "", this.maxWidth = "", this.minWidth = "", this.height = "", this.maxHeight = "", this.minHeight = "", this.sizing = "", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.__focusRingRequested = !1, this.__focusRingLoaded = !1, this.__rippleRequested = !1, this.__rippleLoaded = !1, this.__pendingRippleClick = !1, 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();
+			}));
+		};
 	}
 	__hasSlottedContent(e) {
 		return !!this.querySelector(`[slot="${e}"]`);
@@ -25,17 +28,17 @@ var o, s = {
 	__getSlottedText(e) {
 		return this.querySelector(`[slot="${e}"]`)?.textContent?.trim() ?? "";
 	}
-	get #e() {
+	get __resolvedTitle() {
 		return this.__getSlottedText("heading") || this.calendarCardTitle || this.title;
 	}
-	get #t() {
+	get __resolvedSubtitle() {
 		return this.__getSlottedText("subtitle") || this.subtitle;
 	}
-	get #n() {
-		return this.#e || this.#t || "Kalenderkort";
+	get __resolvedLabel() {
+		return this.__resolvedTitle || this.__resolvedSubtitle || "Kalenderkort";
 	}
-	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.#i();
+	firstUpdated() {
+		this.__applyInnerSizing(), this.__applySpacing();
 	}
 	static {
 		this.styles = n`
@@ -182,7 +185,6 @@ var o, s = {
       align-items: flex-start;
       gap: var(--scb-calendar-card-gap);
       align-self: stretch;
-      cursor: pointer;
       transition:
         box-shadow 0.18s ease,
         transform 0.18s ease,
@@ -192,6 +194,9 @@ var o, s = {
       inline-size: 100%;
       max-inline-size: 100%;
     }
+    .calendar-card.clickable {
+      cursor: pointer;
+    }
 
     /* Lås standard till proportionella siffror i kortet */
     .calendar-card,
@@ -313,7 +318,7 @@ var o, s = {
       text-overflow: clip;
     }
 
-    .title-container md-icon {
+    .title-container .calendar-card-icon {
       inline-size: var(--scb-calendar-card-icon-size);
       block-size: var(--scb-calendar-card-icon-size);
       flex: 0 0 auto;
@@ -327,6 +332,28 @@ var o, s = {
       justify-content: center;
     }
 
+    .calendar-card-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      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-variation-settings: normal;
+      text-rendering: optimizeLegibility;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+    .calendar-card-icon.scb-svg-icon {
+      fill: currentColor;
+      font: inherit;
+    }
+
     .subtitle {
       font-family: var(--brand-font, var(--brand, "Inter"), sans-serif);
       font-size: var(--scb-calendar-card-subtitle-font-size);
@@ -371,19 +398,38 @@ var o, s = {
     }
   `;
 	}
+	__ensureRipple(e) {
+		if (this.cardHref) {
+			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(".calendar-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.variant ? `${this.variant.toLowerCase()}` : "", t = this.direction ? `${this.direction.toLowerCase()}` : "", n = this.cardHref ? "clickable" : "", i = this.__hasSlottedContent("heading"), a = this.__hasSlottedContent("subtitle"), o = this.__hasSlottedContent("supporting-text"), s = this.calendarCardTitle || this.title, c = this.subtitle, l = this.supportingText, u = i || !!s, d = a || !!c, f = o || !!l, { day: p, month: m } = this.#r(), h = this.mediaWidth && this.mediaWidth.trim() !== "" ? this.mediaWidth : "", g = this.mediaHeight && this.mediaHeight.trim() !== "" ? this.mediaHeight : "", _ = this.mediaAspect && this.mediaAspect.trim() !== "" ? this.mediaAspect : "", v = `${h ? `inline-size:${h};` : ""}${g ? `block-size:${g};` : ""}${_ ? `aspect-ratio:${_};` : ""}`;
+		let e = this.variant ? `${this.variant.toLowerCase()}` : "", t = this.direction ? `${this.direction.toLowerCase()}` : "", n = this.cardHref ? "clickable" : "", i = this.__hasSlottedContent("heading"), a = this.__hasSlottedContent("subtitle"), o = this.__hasSlottedContent("supporting-text"), s = this.calendarCardTitle || this.title, c = this.subtitle, l = this.supportingText, u = i || !!s, d = a || !!c, f = o || !!l, { day: p, month: m } = this.__getDateParts(), h = this.mediaWidth && this.mediaWidth.trim() !== "" ? this.mediaWidth : "", g = this.mediaHeight && this.mediaHeight.trim() !== "" ? this.mediaHeight : "", _ = this.mediaAspect && this.mediaAspect.trim() !== "" ? this.mediaAspect : "", v = `${h ? `inline-size:${h};` : ""}${g ? `block-size:${g};` : ""}${_ ? `aspect-ratio:${_};` : ""}`;
 		return r`
       <div
         class="calendar-card ${t} ${n} ${e}"
         role="${this.cardHref ? "link" : "group"}"
-        aria-label="${this.#n}"
+        aria-label="${this.__resolvedLabel}"
         tabindex="${this.cardHref ? "0" : "-1"}"
         @click=${this.cardHref ? this._handleHrefNavigation : null}
         @keydown=${this.cardHref ? this._onKeyDown : null}
-        style="cursor: ${this.cardHref ? "pointer" : "default"};"
+        @focusin=${this.cardHref ? this.__ensureFocusRingOnFocusVisible : null}
+        @pointerenter=${this.cardHref ? this.__onPointerInteraction : null}
+        @pointerdown=${this.cardHref ? this.__onPointerInteraction : null}
       >
-        ${this.cardHref ? r`<md-ripple></md-ripple>` : ""}
+        ${this.cardHref && this.__rippleLoaded ? r`<md-ripple></md-ripple>` : ""}
         ${this.showMedia ? r`
               <div class="media" style="${v}" aria-label="Datum: ${p} ${m}">
                 <div class="day">${p}</div>
@@ -396,7 +442,7 @@ var o, s = {
                   ${u ? r`
                         <div class="title-container">
                           <div class="title">${i ? r`<slot name="heading"></slot>` : s}</div>
-                          ${this.cardHref ? r`<div class="icon-container"><md-icon>arrow_forward</md-icon></div>` : ""}
+                          ${this.cardHref ? r`<div class="icon-container"><md-icon class="calendar-card-icon" aria-hidden="true">arrow_forward</md-icon></div>` : ""}
                         </div>
                       ` : ""}
                   ${d ? r`<div class="subtitle">${a ? r`<slot name="subtitle"></slot>` : c}</div>` : ""}
@@ -409,10 +455,10 @@ var o, s = {
               ` : ""}
         </div>
       </div>
-      ${this.cardHref ? r`<md-focus-ring></md-focus-ring>` : ""}
+      ${this.cardHref && this.__focusRingLoaded ? r`<md-focus-ring></md-focus-ring>` : ""}
     `;
 	}
-	#r() {
+	__getDateParts() {
 		let e = {
 			day: 1,
 			month: "Jan"
@@ -423,7 +469,7 @@ var o, s = {
 			return Number.isNaN(e.getTime()) ? null : e;
 		})();
 		if (!t) return e;
-		let n = t.getDate(), r = new Intl.DateTimeFormat("sv-SE", { month: "short" }).format(t).replace(".", "").trim();
+		let n = t.getDate(), r = o.format(t).replace(".", "").trim();
 		return {
 			day: n,
 			month: r.charAt(0).toUpperCase() + r.slice(1)
@@ -437,113 +483,113 @@ var o, s = {
 		(e.key === "Enter" || e.key === " ") && this.cardHref && (window.open(this.cardHref, "_self"), e.preventDefault());
 	}
 	_handleHrefNavigation() {
-		this.cardHref && (this.cardHrefNav === "tab" ? window.open(this.cardHref, "_blank") : this.cardHrefNav === "window" ? window.open(this.cardHref, "_blank", "noopener,noreferrer,width=800,height=600") : window.open(this.cardHref, "_self"));
+		this.cardHref && ((!this.__rippleLoaded || this.__pendingRippleEvent) && (this.__pendingRippleClick = !0, this.__ensureRipple()), this.cardHrefNav === "tab" ? window.open(this.cardHref, "_blank") : this.cardHrefNav === "window" ? window.open(this.cardHref, "_blank", "noopener,noreferrer,width=800,height=600") : window.open(this.cardHref, "_self"));
 	}
 	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;
 	}
-	#i() {
+	__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-calendar-card-spacing-block-start", t) : this.style.removeProperty("--scb-calendar-card-spacing-block-start"), n ? this.style.setProperty("--scb-calendar-card-spacing-block-end", n) : this.style.removeProperty("--scb-calendar-card-spacing-block-end"), r ? this.style.setProperty("--scb-calendar-card-spacing-inline-start", r) : this.style.removeProperty("--scb-calendar-card-spacing-inline-start"), i ? this.style.setProperty("--scb-calendar-card-spacing-inline-end", i) : this.style.removeProperty("--scb-calendar-card-spacing-inline-end");
 	}
 	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("minWidth") && (this.minWidth ? this.style.minInlineSize = this.minWidth : this.style.removeProperty("min-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("minHeight") && (this.minHeight ? this.style.minBlockSize = this.minHeight : this.style.removeProperty("min-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.#i();
+		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("minWidth") && (this.minWidth ? this.style.minInlineSize = this.minWidth : this.style.removeProperty("min-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("minHeight") && (this.minHeight ? this.style.minBlockSize = this.minHeight : this.style.removeProperty("min-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();
 	}
 };
 e([a({
 	type: String,
 	reflect: !0
-})], c.prototype, "variant", void 0), e([a({
+})], f.prototype, "variant", void 0), e([a({
 	type: String,
 	reflect: !0
-})], c.prototype, "size", void 0), e([a({
+})], f.prototype, "size", void 0), e([a({
 	type: String,
 	attribute: "date"
-})], c.prototype, "date", void 0), e([a({
+})], f.prototype, "date", void 0), e([a({
 	type: String,
 	reflect: !0
-})], c.prototype, "direction", void 0), e([a({
+})], f.prototype, "direction", void 0), e([a({
 	type: String,
 	reflect: !0,
 	converter: s
-})], c.prototype, "title", void 0), e([a({
+})], f.prototype, "title", void 0), e([a({
 	type: String,
 	attribute: "calendar-card-title",
 	reflect: !0,
 	converter: s
-})], c.prototype, "calendarCardTitle", void 0), e([a({
+})], f.prototype, "calendarCardTitle", void 0), e([a({
 	type: String,
 	reflect: !0,
 	converter: s
-})], c.prototype, "subtitle", void 0), e([a({
+})], f.prototype, "subtitle", void 0), e([a({
 	type: String,
 	attribute: "supporting-text",
 	reflect: !0,
 	converter: s
-})], c.prototype, "supportingText", void 0), e([a({
+})], f.prototype, "supportingText", void 0), e([a({
 	type: String,
 	attribute: "card-href"
-})], c.prototype, "cardHref", void 0), e([a({
+})], f.prototype, "cardHref", void 0), e([a({
 	type: String,
 	attribute: "card-href-nav"
-})], c.prototype, "cardHrefNav", void 0), e([a({
+})], f.prototype, "cardHrefNav", void 0), e([a({
 	type: Boolean,
 	reflect: !0,
 	attribute: "show-media"
-})], c.prototype, "showMedia", void 0), e([a({
+})], f.prototype, "showMedia", void 0), e([a({
 	type: String,
 	attribute: "media-width"
-})], c.prototype, "mediaWidth", void 0), e([a({
+})], f.prototype, "mediaWidth", void 0), e([a({
 	type: String,
 	attribute: "media-height"
-})], c.prototype, "mediaHeight", void 0), e([a({
+})], f.prototype, "mediaHeight", void 0), e([a({
 	type: String,
 	attribute: "media-aspect"
-})], c.prototype, "mediaAspect", void 0), e([a({
+})], f.prototype, "mediaAspect", void 0), e([a({
 	type: String,
 	reflect: !0
-})], c.prototype, "width", void 0), e([a({
+})], f.prototype, "width", void 0), e([a({
 	type: String,
 	reflect: !0,
 	attribute: "max-width"
-})], c.prototype, "maxWidth", void 0), e([a({
+})], f.prototype, "maxWidth", void 0), e([a({
 	type: String,
 	attribute: "min-width"
-})], c.prototype, "minWidth", void 0), e([a({
+})], f.prototype, "minWidth", void 0), e([a({
 	type: String,
 	reflect: !0
-})], c.prototype, "height", void 0), e([a({
+})], f.prototype, "height", void 0), e([a({
 	type: String,
 	reflect: !0,
 	attribute: "max-height"
-})], c.prototype, "maxHeight", void 0), e([a({
+})], f.prototype, "maxHeight", void 0), e([a({
 	type: String,
 	attribute: "min-height"
-})], c.prototype, "minHeight", void 0), e([a({
+})], f.prototype, "minHeight", void 0), e([a({
 	type: String,
 	reflect: !0,
 	converter: s
-})], c.prototype, "sizing", void 0), e([a({
+})], f.prototype, "sizing", void 0), e([a({
 	type: String,
 	reflect: !0
-})], c.prototype, "spacing", void 0), e([a({
+})], f.prototype, "spacing", void 0), e([a({
 	type: String,
 	attribute: "spacing-top",
 	reflect: !0
-})], c.prototype, "spacingTop", void 0), e([a({
+})], f.prototype, "spacingTop", void 0), e([a({
 	type: String,
 	attribute: "spacing-bottom",
 	reflect: !0
-})], c.prototype, "spacingBottom", void 0), e([a({
+})], f.prototype, "spacingBottom", void 0), e([a({
 	type: String,
 	attribute: "spacing-left",
 	reflect: !0
-})], c.prototype, "spacingLeft", void 0), e([a({
+})], f.prototype, "spacingLeft", void 0), e([a({
 	type: String,
 	attribute: "spacing-right",
 	reflect: !0
-})], c.prototype, "spacingRight", void 0), c = o = e([i("scb-calendar-card")], c);
+})], f.prototype, "spacingRight", void 0), f = e([i("scb-calendar-card")], f);
 //#endregion
-export { c as ScbCalendarCard };
+export { f as ScbCalendarCard };