scb-wc 0.1.3 → 0.1.4

package/scb-fab/scb-fab.js

@@ -0,0 +1,190 @@
+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/icon/icon.js";
+import "@material/web/fab/fab.js";
+//#region src/scb-test-components/scb-fab/scb-fab.ts
+var s = class extends t {
+	constructor(...e) {
+		super(...e), this.icon = "edit", this.label = "Redigera", this.ariaLabel = "Redigera", this.size = "small", this.type = "regular", this.disabled = !1, this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.#e = (e) => {
+			this.disabled && (e.preventDefault(), e.stopImmediatePropagation());
+		}, this.#t = (e) => {
+			this.disabled && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopImmediatePropagation());
+		};
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: inline-block;
+
+      /* Default är medium */
+      --scb-fab-padding: calc(var(--spacing-7) + var(--spacing-2));
+      --scb-fab-icon-size: var(--icon-size-medium, 24px);
+      --scb-fab-shape-radius: var(--radius-l, 16px);
+
+      /* Storleken drivs av padding runt ikonen */
+      --scb-fab-container-size: calc(
+        var(--scb-fab-icon-size) + (var(--scb-fab-padding) * 2)
+      );
+
+      /* Yttre avstånd */
+      --scb-fab-spacing-block-start: 0px;
+      --scb-fab-spacing-block-end: 0px;
+      --scb-fab-spacing-inline-start: 0px;
+      --scb-fab-spacing-inline-end: 0px;
+
+      margin-block-start: var(--scb-fab-spacing-block-start, 0px);
+      margin-block-end: var(--scb-fab-spacing-block-end, 0px);
+      margin-inline-start: var(--scb-fab-spacing-inline-start, 0px);
+      margin-inline-end: var(--scb-fab-spacing-inline-end, 0px);
+    }
+
+    :host([size='small']) {
+      --scb-fab-padding: calc(var(--spacing-5) + var(--spacing-1));
+      --scb-fab-icon-size: var(--icon-size-small, 20px);
+      --scb-fab-shape-radius: var(--radius-l, 16px);
+    }
+
+    :host([size='medium']) {
+      --scb-fab-padding: calc(var(--spacing-7) + var(--spacing-2));
+      --scb-fab-icon-size: var(--icon-size-medium, 24px);
+      --scb-fab-shape-radius: var(--radius-l, 16px);
+    }
+
+    :host([size='large']) {
+      --scb-fab-padding: calc(var(--spacing-8) - var(--spacing-1));
+      --scb-fab-icon-size: var(--icon-size-extra-large, 36px);
+      --scb-fab-shape-radius: var(--radius-l, 16px);
+    }
+
+    md-fab {
+      /* Ikonstorlek */
+      --md-fab-icon-size: var(--scb-fab-icon-size);
+      --md-fab-small-icon-size: var(--scb-fab-icon-size);
+      --md-fab-large-icon-size: var(--scb-fab-icon-size);
+
+      /* Form (square) */
+      --md-fab-container-shape: var(--scb-fab-shape-radius);
+      --md-fab-small-container-shape: var(--scb-fab-shape-radius);
+      --md-fab-large-container-shape: var(--scb-fab-shape-radius);
+      --md-fab-extended-container-shape: var(--scb-fab-shape-radius);
+
+      /* Sätt storlek genom container-tokens som härleds från padding */
+      --md-fab-container-height: var(--scb-fab-container-size);
+      --md-fab-container-width: var(--scb-fab-container-size);
+
+      --md-fab-small-container-height: var(--scb-fab-container-size);
+      --md-fab-small-container-width: var(--scb-fab-container-size);
+
+      --md-fab-large-container-height: var(--scb-fab-container-size);
+      --md-fab-large-container-width: var(--scb-fab-container-size);
+
+      --md-fab-extended-container-height: var(--scb-fab-container-size);
+    }
+
+    :host([disabled]) md-fab {
+      pointer-events: none;
+
+      /* Disabled ska bete sig som disabled knapp */
+      --md-fab-container-color: color-mix(
+        in srgb,
+        var(--md-sys-color-on-surface) 12%,
+        transparent
+      );
+      --md-fab-icon-color: color-mix(
+        in srgb,
+        var(--md-sys-color-on-surface) 38%,
+        transparent
+      );
+    }
+
+
+    md-icon {
+      /* Säkerställ att ikonen inte ärver font-size från omgivande typografi */
+      --md-icon-size: var(--scb-fab-icon-size);
+      font-size: var(--scb-fab-icon-size) !important;
+      line-height: 1;
+    }
+
+    svg[slot="icon"],
+    img[slot="icon"] {
+      inline-size: var(--scb-fab-icon-size);
+      block-size: var(--scb-fab-icon-size);
+    }
+  `;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("click", this.#e, !0), this.addEventListener("keydown", this.#t, !0);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("click", this.#e, !0), this.removeEventListener("keydown", this.#t, !0), super.disconnectedCallback();
+	}
+	#e;
+	#t;
+	firstUpdated() {
+		this.#n();
+	}
+	updated(e) {
+		super.updated(e), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#n();
+	}
+	mapSpacing(e) {
+		let t = (e ?? "").trim();
+		if (!t) return;
+		let n = Number(t);
+		return Number.isFinite(n) && n >= 0 && n <= 14 && String(n) === t ? `var(--spacing-${n})` : t;
+	}
+	#n() {
+		let e = this.mapSpacing(this.spacing), t = this.mapSpacing(this.spacingTop) ?? e, n = this.mapSpacing(this.spacingBottom) ?? e, r = this.mapSpacing(this.spacingLeft), i = this.mapSpacing(this.spacingRight);
+		this.style.setProperty("--scb-fab-spacing-block-start", t ?? "0px"), this.style.setProperty("--scb-fab-spacing-block-end", n ?? "0px"), this.style.setProperty("--scb-fab-spacing-inline-start", r ?? "0px"), this.style.setProperty("--scb-fab-spacing-inline-end", i ?? "0px");
+	}
+	__renderMd() {
+		let e = this.type === "extended" ? (this.label ?? "").trim() : "", t = (this.ariaLabel ?? "").trim() || e;
+		return r`
+      <md-fab
+        size="${this.size}"
+        ?disabled=${this.disabled}
+        aria-label=${t || i}
+        label=${e || i}
+      >
+        ${this.icon ? r`<md-icon slot="icon">${this.icon}</md-icon>` : i}
+      </md-fab>
+    `;
+	}
+	render() {
+		return this.__renderMd();
+	}
+};
+e([o({ type: String })], s.prototype, "icon", void 0), e([o({ type: String })], s.prototype, "label", void 0), e([o({
+	type: String,
+	attribute: "aria-label"
+})], s.prototype, "ariaLabel", void 0), e([o({
+	type: String,
+	reflect: !0
+})], s.prototype, "size", void 0), e([o({
+	type: String,
+	reflect: !0
+})], s.prototype, "type", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "disabled", void 0), e([o({
+	type: String,
+	reflect: !0
+})], s.prototype, "spacing", void 0), e([o({
+	type: String,
+	attribute: "spacing-top",
+	reflect: !0
+})], s.prototype, "spacingTop", void 0), e([o({
+	type: String,
+	attribute: "spacing-bottom",
+	reflect: !0
+})], s.prototype, "spacingBottom", void 0), e([o({
+	type: String,
+	attribute: "spacing-left",
+	reflect: !0
+})], s.prototype, "spacingLeft", void 0), e([o({
+	type: String,
+	attribute: "spacing-right",
+	reflect: !0
+})], s.prototype, "spacingRight", void 0), s = e([a("scb-fab")], s);
+//#endregion
+export { s as ScbFab };

package/scb-fact-card/scb-fact-card-content.js

@@ -0,0 +1,82 @@
+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";
+//#region src/scb-test-components/scb-fact-card/scb-fact-card-content.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.title = "", this.factCardTitle = "", this.subtitle = "", this.supportingText = "";
+	}
+	get #e() {
+		return this.factCardTitle || this.title;
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: var(--scb-fact-card-content-block-gap, var(--spacing-4, 12px));
+      width: 100%;
+    }
+
+    .label {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: var(--scb-fact-card-content-title-size, var(--md-sys-typescale-headline-small-size, 22px));
+      font-weight: var(--weight-bold, 700);
+      line-height: var(--scb-fact-card-content-title-line-height, var(--md-sys-typescale-headline-small-line-height, 28px));
+      letter-spacing: var(--scb-fact-card-content-title-letter-spacing, var(--md-sys-typescale-headline-small-tracking, -0.5px));
+    }
+
+    .sub-label {
+      font-size: var(--scb-fact-card-content-subtitle-size, var(--md-sys-typescale-title-medium-size, 18px));
+      font-weight: var(--weight-semibold, 600);
+      line-height: var(--scb-fact-card-content-subtitle-line-height, var(--md-sys-typescale-title-medium-line-height, 26px));
+      letter-spacing: var(--scb-fact-card-content-subtitle-letter-spacing, var(--md-sys-typescale-title-medium-tracking, -0.3px));
+    }
+
+    .supporting-text {
+      font-size: var(--scb-fact-card-content-supporting-size, var(--md-sys-typescale-body-medium-size, 16px));
+      line-height: var(--scb-fact-card-content-supporting-line-height, var(--md-sys-typescale-body-medium-line-height, 24px));
+      letter-spacing: var(--scb-fact-card-content-supporting-letter-spacing, var(--md-sys-typescale-body-medium-tracking, -0.15px));
+    }
+
+    .content.links ::slotted(*) {
+      margin-top: var(--scb-fact-card-content-links-offset, var(--spacing-3, 8px));
+      display: flex;
+      flex-direction: column;
+      gap: var(--scb-fact-card-content-links-gap, var(--spacing-3, 8px));
+    }
+  `;
+	}
+	render() {
+		return r`
+      ${this.#e ? r`<div class="label">${this.#e}</div>` : ""}
+      ${this.subtitle ? r`<div class="sub-label">${this.subtitle}</div>` : ""}
+      ${this.supportingText ? r`<div class="supporting-text">${this.supportingText}</div>` : ""}
+
+      <div class="content links">
+        <slot></slot>
+      </div>
+    `;
+	}
+};
+e([a({
+	type: String,
+	reflect: !0,
+	attribute: "title"
+})], o.prototype, "title", void 0), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "fact-card-title"
+})], o.prototype, "factCardTitle", void 0), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "subtitle"
+})], o.prototype, "subtitle", void 0), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "supporting-text"
+})], o.prototype, "supportingText", void 0), o = e([i("scb-fact-card-content")], o);
+//#endregion
+export { o as ScbFactCardContent };

package/scb-fact-card/scb-fact-card.js

@@ -0,0 +1,376 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "../scb-icon-button/scb-icon-button.js";
+import "../scb-link/scb-link.js";
+import "./scb-fact-card-content.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-fact-card/scb-fact-card.ts
+var o, s = class extends t {
+	static {
+		o = this;
+	}
+	constructor(...e) {
+		super(...e), this.__onCloseClick = (e) => {
+			e.stopPropagation(), this.__setOpen(!1);
+		}, this.variant = "filled", this.size = "large", this.title = "", this.subtitle = "", this.supportingText = "", this.icon = "", this.showCloseButton = !1, this.open = !0, this.__lastTriggerEl = null, this.sizing = "stretch", this.width = "", this.maxWidth = "", this.height = "", this.maxHeight = "", 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.__instances = /* @__PURE__ */ new Map();
+	}
+	static {
+		this.__docListenerAttached = !1;
+	}
+	static __handleDocClick(e) {
+		let t = e.composedPath();
+		for (let e of t) {
+			if (!(e instanceof Element)) continue;
+			let t = e.getAttribute("data-fact-card-toggle") || e.getAttribute("aria-controls");
+			if (!t) continue;
+			let n = o.__instances.get(t);
+			if (!n) {
+				o.__instances.delete(t);
+				continue;
+			}
+			n.__lastTriggerEl = e, n.__setOpen(!n.open);
+			break;
+		}
+	}
+	static __ensureDocListener() {
+		o.__docListenerAttached || (document.addEventListener("click", o.__handleDocClick, !0), o.__docListenerAttached = !0);
+	}
+	static __maybeRemoveDocListener() {
+		o.__docListenerAttached && o.__instances.size === 0 && (document.removeEventListener("click", o.__handleDocClick, !0), o.__docListenerAttached = !1);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.id && o.__instances.set(this.id, this), o.__ensureDocListener();
+	}
+	disconnectedCallback() {
+		this.id && o.__instances.delete(this.id), o.__maybeRemoveDocListener(), super.disconnectedCallback();
+	}
+	updated(e) {
+		e.has("open") && this.__updateTriggersExpanded(), 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("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#e();
+	}
+	__updateTriggersExpanded() {
+		this.id && document.querySelectorAll(`[aria-controls="${this.id}"], [data-fact-card-toggle="${this.id}"]`).forEach((e) => {
+			e.hasAttribute("aria-controls") && e.setAttribute("aria-expanded", String(this.open));
+		});
+	}
+	__setOpen(e) {
+		let t = this.open;
+		t !== e && (this.open = e, this.dispatchEvent(new CustomEvent("openchange", {
+			bubbles: !0,
+			composed: !0,
+			detail: { open: this.open }
+		})), e && !t ? this.dispatchEvent(new CustomEvent("open", {
+			bubbles: !0,
+			composed: !0
+		})) : !e && t && this.dispatchEvent(new CustomEvent("close", {
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	static {
+		this.styles = n`
+    :host {
+      --scb-fact-card-icon-overhang: 40px;
+      display: block;
+      position: relative;
+      box-sizing: border-box;
+      inline-size: 100%;
+      min-inline-size: 0;
+      max-inline-size: var(--scb-fact-card-max-w, none);
+      height: auto;
+      padding: 0;
+      margin-block-start: var(--scb-fact-card-spacing-block-start, 0);
+      margin-block-end: var(--scb-fact-card-spacing-block-end, 0);
+      margin-inline-start: var(--scb-fact-card-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-fact-card-spacing-inline-end, 0);
+
+      --scb-fact-card-padding: var(--spacing-7, 24px);
+      --scb-fact-card-content-gap: var(--spacing-8, 32px);
+      --scb-fact-card-close-padding-right: var(--spacing-12, 80px);
+      --scb-fact-card-icon-padding-block: var(--spacing-5, 16px);
+      --scb-fact-card-icon-padding-inline: var(--spacing-7, 24px);
+
+      --scb-fact-card-content-title-size: var(--md-sys-typescale-headline-small-size, 22px);
+      --scb-fact-card-content-title-line-height: var(--md-sys-typescale-headline-small-line-height, 28px);
+      --scb-fact-card-content-title-letter-spacing: var(--md-sys-typescale-headline-small-tracking, -0.5px);
+
+      --scb-fact-card-content-subtitle-size: var(--md-sys-typescale-title-medium-size, 18px);
+      --scb-fact-card-content-subtitle-line-height: var(--md-sys-typescale-title-medium-line-height, 26px);
+      --scb-fact-card-content-subtitle-letter-spacing: var(--md-sys-typescale-title-medium-tracking, -0.3px);
+
+      --scb-fact-card-content-supporting-size: var(--md-sys-typescale-body-medium-size, 16px);
+      --scb-fact-card-content-supporting-line-height: var(--md-sys-typescale-body-medium-line-height, 24px);
+      --scb-fact-card-content-supporting-letter-spacing: var(--md-sys-typescale-body-medium-tracking, -0.15px);
+
+      --scb-fact-card-content-links-gap: var(--spacing-3, 8px);
+      --scb-fact-card-content-links-offset: var(--spacing-3, 8px);
+      --scb-fact-card-content-block-gap: var(--spacing-4, 12px);
+    }
+
+    :host([size='medium']) {
+      --scb-fact-card-icon-overhang: 36px;
+      --scb-fact-card-padding: var(--spacing-6, 20px);
+      --scb-fact-card-content-gap: var(--spacing-6, 20px);
+      --scb-fact-card-close-padding-right: var(--spacing-11, 64px);
+      --scb-fact-card-icon-padding-block: var(--spacing-4, 12px);
+      --scb-fact-card-icon-padding-inline: var(--spacing-6, 20px);
+
+      --scb-fact-card-content-title-size: var(--md-sys-typescale-title-large-size, 20px);
+      --scb-fact-card-content-title-line-height: var(--md-sys-typescale-title-large-line-height, 28px);
+      --scb-fact-card-content-title-letter-spacing: var(--md-sys-typescale-title-large-tracking, -0.3px);
+
+      --scb-fact-card-content-subtitle-size: var(--md-sys-typescale-title-small-size, 16px);
+      --scb-fact-card-content-subtitle-line-height: var(--md-sys-typescale-title-small-line-height, 24px);
+      --scb-fact-card-content-subtitle-letter-spacing: var(--md-sys-typescale-title-small-tracking, -0.2px);
+
+      --scb-fact-card-content-supporting-size: var(--md-sys-typescale-body-small-size, 14px);
+      --scb-fact-card-content-supporting-line-height: var(--md-sys-typescale-body-small-line-height, 20px);
+      --scb-fact-card-content-supporting-letter-spacing: var(--md-sys-typescale-body-small-tracking, -0.1px);
+
+      --scb-fact-card-content-links-gap: var(--spacing-2, 4px);
+      --scb-fact-card-content-links-offset: var(--spacing-2, 4px);
+      --scb-fact-card-content-block-gap: var(--spacing-3, 8px);
+    }
+
+    :host([size='small']) {
+      --scb-fact-card-icon-overhang: 32px;
+      --scb-fact-card-padding: var(--spacing-5, 16px);
+      --scb-fact-card-content-gap: var(--spacing-5, 16px);
+      --scb-fact-card-close-padding-right: var(--spacing-10, 56px);
+      --scb-fact-card-icon-padding-block: var(--spacing-3, 8px);
+      --scb-fact-card-icon-padding-inline: var(--spacing-5, 16px);
+
+      --scb-fact-card-content-title-size: var(--md-sys-typescale-title-medium-size, 18px);
+      --scb-fact-card-content-title-line-height: var(--md-sys-typescale-title-medium-line-height, 26px);
+      --scb-fact-card-content-title-letter-spacing: var(--md-sys-typescale-title-medium-tracking, -0.3px);
+
+      --scb-fact-card-content-subtitle-size: var(--md-sys-typescale-body-medium-size, 16px);
+      --scb-fact-card-content-subtitle-line-height: var(--md-sys-typescale-body-medium-line-height, 24px);
+      --scb-fact-card-content-subtitle-letter-spacing: var(--md-sys-typescale-body-medium-tracking, -0.15px);
+
+      --scb-fact-card-content-supporting-size: var(--md-sys-typescale-body-small-size, 14px);
+      --scb-fact-card-content-supporting-line-height: var(--md-sys-typescale-body-small-line-height, 20px);
+      --scb-fact-card-content-supporting-letter-spacing: var(--md-sys-typescale-body-small-tracking, -0.1px);
+
+      --scb-fact-card-content-links-gap: var(--spacing-2, 4px);
+      --scb-fact-card-content-links-offset: var(--spacing-2, 4px);
+      --scb-fact-card-content-block-gap: var(--spacing-2, 4px);
+    }
+
+    :host([sizing='stretch']) {
+      inline-size: 100%;
+      block-size: 100%;
+      max-inline-size: none;
+    }
+    :host([sizing='content-width']) {
+      display: inline-block;
+      inline-size: auto;
+      block-size: auto;
+      max-inline-size: var(--scb-fact-card-max-w, none);
+    }
+    :host([sizing='content-height']) {
+      inline-size: 100%;
+      block-size: auto;
+      max-inline-size: none;
+    }
+
+    .outer {
+      position: relative;
+      inline-size: 100%;
+      max-inline-size: 100%;
+      --_icon-pad: 0px;
+      padding-top: var(--_icon-pad);
+      box-sizing: border-box;
+    }
+    :host([sizing='content-width']) .outer {
+      inline-size: max-content;
+    }
+
+    :host([height]) .outer,
+    :host([max-height]) .outer,
+    :host([sizing='stretch']) .outer {
+      block-size: 100%;
+    }
+
+    .scb-fact-card {
+      color: var(--md-sys-color-on-surface, #0F0865);
+      font-family: var(--brand-font, "Inter", sans-serif);
+      position: relative;
+      border-radius: var(--md-sys-shape-corner-large, 16px);
+      background: var(--md-sys-color-surface-dim, #F9F8EF);
+      padding: var(--scb-fact-card-padding);
+      box-sizing: border-box;
+      inline-size: 100%;
+      max-inline-size: 100%;
+      min-inline-size: 0;
+      overflow: hidden;
+      block-size: auto;
+    }
+
+    :host([height]) .scb-fact-card,
+    :host([max-height]) .scb-fact-card,
+    :host([sizing='stretch']) .scb-fact-card {
+      block-size: calc(100% - var(--_icon-pad));
+    }
+
+    .scb-fact-card.has-close {
+      padding-right: var(--scb-fact-card-close-padding-right);
+    }
+
+    .scb-fact-card.outlined {
+      border: 1px solid var(--md-sys-color-outline, #808080);
+      background: var(--md-sys-color-surface, #FFFFFF);
+    }
+
+    .outer.has-icon {
+      --_icon-pad: var(--scb-fact-card-icon-overhang);
+    }
+    .outer.has-icon .scb-fact-card {
+      border-top-left-radius: 0;
+    }
+
+    .icon-wrapper {
+      position: absolute;
+      z-index: 1;
+      top: 0;
+      left: 0;
+      padding: var(--scb-fact-card-icon-padding-block) var(--scb-fact-card-icon-padding-inline);
+      padding-bottom: 0;
+      width: fit-content;
+      border-radius: var(--md-sys-shape-corner-full, 1000px) var(--md-sys-shape-corner-full, 1000px) 0 0 /
+        var(--md-sys-shape-corner-full, 1000px) var(--md-sys-shape-corner-full, 1000px) 0 0;
+      background: var(--md-sys-color-surface-dim, #F9F8EF);
+      line-height: 0;
+    }
+    .icon-wrapper.outlined {
+      border: var(--stroke-border, 1px) solid var(--md-sys-color-outline, #808080);
+      border-bottom: none;
+      background: var(--md-sys-color-surface, #FFFFFF);
+    }
+
+    scb-icon-button {
+      position: absolute;
+      right: var(--scale-01, 12px);
+      top: var(--scale-01, 12px);
+    }
+
+    .scb-fact-card.clickable {
+      cursor: pointer;
+    }
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--scb-fact-card-content-gap);
+      inline-size: 100%;
+      min-inline-size: 0;
+    }
+
+    .content .label,
+    .content .sub-label,
+    .content .supporting-text {
+      white-space: normal;
+      overflow: visible;
+      text-overflow: clip;
+      word-break: normal;
+      overflow-wrap: normal;
+      hyphens: auto;
+    }
+  `;
+	}
+	render() {
+		if (!this.open) return r``;
+		let e = this.variant === "outlined" ? "outlined" : "filled", t = !!this.icon;
+		return r`
+      <div class="outer ${t ? "has-icon" : ""}">
+        ${t ? r`<div class="icon-wrapper ${e}"><md-icon>${this.icon}</md-icon></div>` : ""}
+        <div class="scb-fact-card ${e} ${this.showCloseButton ? "has-close" : ""}">
+          ${this.showCloseButton ? r`
+                <scb-icon-button
+                  variant="standard"
+                  icon="close"
+                  @click=${this.__onCloseClick}
+                ></scb-icon-button>
+              ` : ""}
+          <div class="content">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+	}
+	async firstUpdated() {
+		this.#e(), o.__iconLoaded || (await import("@material/web/icon/icon.js"), o.__iconLoaded = !0);
+	}
+	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() {
+		let e = this.mapSpacingToken(this.spacing), t = this.mapSpacingToken(this.spacingTop), n = this.mapSpacingToken(this.spacingBottom), r = this.mapSpacingToken(this.spacingLeft), i = this.mapSpacingToken(this.spacingRight), a = t ?? e, o = n ?? e;
+		a ? this.style.setProperty("--scb-fact-card-spacing-block-start", a) : this.style.removeProperty("--scb-fact-card-spacing-block-start"), o ? this.style.setProperty("--scb-fact-card-spacing-block-end", o) : this.style.removeProperty("--scb-fact-card-spacing-block-end"), r ? this.style.setProperty("--scb-fact-card-spacing-inline-start", r) : this.style.removeProperty("--scb-fact-card-spacing-inline-start"), i ? this.style.setProperty("--scb-fact-card-spacing-inline-end", i) : this.style.removeProperty("--scb-fact-card-spacing-inline-end");
+	}
+};
+e([a({ type: String })], s.prototype, "variant", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "size", void 0), e([a({
+	type: String,
+	attribute: "title"
+})], s.prototype, "title", void 0), e([a({
+	type: String,
+	attribute: "subtitle"
+})], s.prototype, "subtitle", void 0), e([a({
+	type: String,
+	attribute: "supporting-text"
+})], s.prototype, "supportingText", void 0), e([a({ type: String })], s.prototype, "icon", void 0), e([a({
+	type: Boolean,
+	attribute: "show-close-button"
+})], s.prototype, "showCloseButton", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "open", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "sizing", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "width", void 0), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "max-width"
+})], s.prototype, "maxWidth", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "height", void 0), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "max-height"
+})], s.prototype, "maxHeight", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "spacing", void 0), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "spacing-top"
+})], s.prototype, "spacingTop", void 0), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "spacing-bottom"
+})], s.prototype, "spacingBottom", void 0), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "spacing-left"
+})], s.prototype, "spacingLeft", void 0), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "spacing-right"
+})], s.prototype, "spacingRight", void 0), s = o = e([i("scb-fact-card")], s);
+//#endregion
+export { s as ScbFactCard };

package/scb-footer/scb-footer-section.js

@@ -0,0 +1,23 @@
+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";
+//#region src/scb-test-components/scb-footer/scb-footer-section.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.title = "";
+	}
+	static {
+		this.styles = n`
+    :host { display: none; }
+  `;
+	}
+	render() {
+		return r`<slot></slot>`;
+	}
+};
+e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "title", void 0), o = e([i("scb-footer-section")], o);
+//#endregion
+export { o as ScbFooterSection };