scb-wc 0.1.3 → 0.1.4

package/scb-footer/scb-footer.js

@@ -0,0 +1,343 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "../scb-link/scb-link.js";
+import "./scb-footer-section.js";
+import "../scb-grid/scb-grid-item.js";
+import "../scb-grid/scb-grid.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.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.maxWidth = "1440px", this.deferPaint = !1, this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.sections = [], this.description = "Statistikmyndigheten SCB förser samhället med statistik för beslutsfattande, debatt och forskning.", this.#e = null, this.#t = "", this.#r = !1, this.#u = 8;
+	}
+	#e;
+	#t;
+	#n;
+	#r;
+	static {
+		this.styles = n`
+    :host {
+      display: block;
+      color: var(--p-100);
+      background: var(--scb-footer-bg, var(--p-20));
+      margin-block-start: var(--scb-footer-spacing-block-start, 0);
+      margin-block-end: var(--scb-footer-spacing-block-end, 0);
+      /* Token för loggans bredd och proportion i footer */
+      --scb-footer-logo-w: 48px;
+      --scb-footer-logo-aspect: 48 / 54;
+    }
+
+    .outer {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: var(--spacing-10, 48px) 0 var(--spacing-5, 16px);
+      gap: var(--spacing-4, 12px);
+      align-self: stretch;
+    }
+
+    :host([defer-paint]) .outer {
+      content-visibility: auto;
+      contain-intrinsic-size: var(--scb-footer-cis, 560px);
+    }
+
+    nav { width: 100%; }
+
+    scb-grid {
+      --scb-grid-padding-inline: var(--spacing-8, 32px);
+      --scb-grid-row-gap: var(--spacing-9, 40px);
+      --scb-grid-column-gap: var(--spacing-9, 40px);
+      --scb-grid-gap: var(--spacing-9, 40px) var(--spacing-9, 40px);
+      --scb-grid-max-width: var(--scb-footer-max-width, 1440px);
+    }
+    @media (max-width: 839.98px) {
+      scb-grid { --scb-grid-row-gap: var(--spacing-11, 64px); }
+    }
+    @media (min-width: 840px) {
+      scb-grid { --scb-grid-row-gap: var(--spacing-11, 64px); }
+    }
+
+    .group {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-7, 24px);
+      min-width: 248px;
+      flex: 1 0 0;
+      align-self: stretch;
+    }
+
+    @media (min-width: 840px) {
+      .group--centered {
+        flex: 0 1 auto;
+        min-width: 248px;
+        max-width: 420px;
+      }
+    }
+
+    @media (min-width: 840px) {
+      .center-row {
+        display: flex;
+        align-items: start;
+        justify-content: center;
+        gap: var(--spacing-9, 40px);
+        width: 100%;
+      }
+    }
+
+    @media (max-width: 599px) {
+      scb-grid-item:nth-child(n+2) .group { margin-top: var(--spacing-7, 24px); }
+    }
+    @media (min-width: 600px) and (max-width: 839px) {
+      scb-grid-item:nth-child(n+3) .group { margin-top: var(--spacing-7, 24px); }
+    }
+
+    .title {
+      margin: 0;
+      color: var(--p-100);
+      font-family: var(--brand-font);
+      font-size: var(--md-sys-typescale-title-medium-size);
+      line-height: var(--md-sys-typescale-title-medium-line-height);
+      letter-spacing: var(--md-sys-typescale-title-medium-tracking);
+      font-weight: var(--weight-semibold);
+      align-self: stretch;
+    }
+
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-5, 16px);
+    }
+
+    scb-link {
+      --scb-link-color: var(--p-100);
+      --scb-link-visited-color: var(--p-100);
+    }
+    scb-link::part(anchor) {
+      font-family: var(--brand-font);
+      font-size: var(--md-sys-typescale-body-medium-size);
+      line-height: var(--md-sys-typescale-body-medium-line-height);
+      font-weight: var(--weight-regular);
+      letter-spacing: var(--md-sys-typescale-body-medium-tracking, -0.15px);
+    }
+
+    .brand {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      align-self: stretch;
+      padding: var(--spacing-9, 40px) var(--spacing-8, 32px);
+      gap: var(--spacing-5, 16px);
+    }
+    .brand-inner {
+      width: 100%;
+      max-width: var(--scb-footer-max-width, 1440px);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--spacing-5, 16px);
+      margin-inline: auto;
+    }
+
+    /* tokeniserad storlek samt låst proportion för loggan */
+    .logo {
+      display: block;
+      inline-size: var(--scb-footer-logo-w);
+      block-size: calc(var(--scb-footer-logo-w) * (54 / 48));
+      aspect-ratio: var(--scb-footer-logo-aspect);
+    }
+
+    .desc {
+      margin: 0;
+      text-align: center;
+      opacity: .9;
+      font-family: var(--brand-font);
+      font-size: var(--md-sys-typescale-body-small-size);
+      line-height: var(--md-sys-typescale-body-small-line-height);
+      font-weight: var(--weight-regular);
+      letter-spacing: var(--md-sys-typescale-body-small-tracking, -0.1px);
+      color: var(--p-100);
+      width: min(100%, 312px);
+      overflow-wrap: anywhere;
+    }
+    @media (min-width: 600px) { .desc { width: min(100%, 376px); } }
+
+    .spacer { display: none; }
+    @media (min-width: 840px) { .spacer { display: block; } }
+  `;
+	}
+	#i(e) {
+		if (!e) return;
+		let t = String(e).trim();
+		if (t) return /^\d+$/.test(t) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(t, 10)))})` : t;
+	}
+	#a() {
+		let e = this.#i(this.spacing), t = this.#i(this.spacingTop) ?? e, n = this.#i(this.spacingBottom) ?? e;
+		t ? this.style.setProperty("--scb-footer-spacing-block-start", t) : this.style.removeProperty("--scb-footer-spacing-block-start"), n ? this.style.setProperty("--scb-footer-spacing-block-end", n) : this.style.removeProperty("--scb-footer-spacing-block-end");
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.style.setProperty("--scb-footer-max-width", this.maxWidth), this.#a(), this.#l(!0), this.#o();
+	}
+	updated(e) {
+		e.has("maxWidth") && this.style.setProperty("--scb-footer-max-width", this.maxWidth), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom")) && this.#a();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.#n?.disconnect();
+	}
+	#o() {
+		this.#n?.disconnect(), this.#n = new MutationObserver((e) => {
+			for (let t of e) {
+				if (t.type === "childList") {
+					let e = [...t.addedNodes].some((e) => e.tagName === "SCB-FOOTER-SECTION" || e.tagName === "SCB-LINK"), n = [...t.removedNodes].some((e) => e.tagName === "SCB-FOOTER-SECTION" || e.tagName === "SCB-LINK");
+					if (e || n) {
+						this.#s();
+						return;
+					}
+				}
+				if (t.type === "attributes" && (t.target.tagName === "SCB-FOOTER-SECTION" || t.target.tagName === "SCB-LINK")) {
+					this.#s();
+					return;
+				}
+			}
+		}), this.#n.observe(this, {
+			subtree: !0,
+			childList: !0,
+			attributes: !0,
+			attributeFilter: [
+				"title",
+				"href",
+				"target"
+			]
+		});
+	}
+	#s() {
+		this.#r || (this.#r = !0, queueMicrotask(() => {
+			this.#r = !1, this.#l(!1);
+		}));
+	}
+	get #c() {
+		return this.#e ?? this.sections ?? [];
+	}
+	#l(e = !1) {
+		let t = Array.from(this.querySelectorAll("scb-footer-section"));
+		if (!t.length) {
+			this.#e !== null && (this.#e = null, this.#t = "", e || this.requestUpdate());
+			return;
+		}
+		let n = t.map((e) => ({
+			title: (e.getAttribute("title") || "").trim(),
+			links: Array.from(e.querySelectorAll("scb-link")).map((e) => {
+				let t = (e.getAttribute("href") || "").trim(), n = e.getAttribute("target"), r = {
+					label: (e.textContent || "").trim(),
+					href: t
+				};
+				return n && (r.target = n), r;
+			})
+		})), r = JSON.stringify(n);
+		r !== this.#t && (this.#t = r, this.#e = n, e || this.requestUpdate());
+	}
+	#u;
+	#d(e) {
+		let t = [], n = e.length;
+		if (n > 0 && n < 4) return t.push(r`
+        <scb-grid-item
+          col-span-compact="4"
+          col-span-medium="8"
+          col-span-expanded="${this.#u}"
+        >
+          <div class="center-row">
+            ${e.map((e, t) => this.#p(e, t, !0))}
+          </div>
+        </scb-grid-item>
+      `), t;
+		for (let r = 0; r < n; r++) t.push(this.#f(e[r], r));
+		return t;
+	}
+	#f(e, t) {
+		return r`
+      <scb-grid-item
+        col-span-compact="4"
+        col-span-medium="4"
+        col-span-expanded="2"
+      >
+        ${this.#p(e, t, !1)}
+      </scb-grid-item>
+    `;
+	}
+	#p(e, t, n) {
+		return r`
+      <section class="group ${n ? "group--centered" : ""}" aria-labelledby=${`scb-footer-sec-${t}`}>
+        <h3 id=${`scb-footer-sec-${t}`} class="title">${e.title}</h3>
+        <ul>
+          ${e.links.map((e) => r`
+            <li>
+              <scb-link .href=${e.href} .target=${e.target ?? void 0}>${e.label}</scb-link>
+            </li>
+          `)}
+        </ul>
+      </section>
+    `;
+	}
+	render() {
+		let e = this.#c;
+		return r`
+      <footer class="outer" role="contentinfo">
+        <nav aria-label="Sidfot med länkar">
+          <scb-grid
+            .colsCompact=${4}
+            .colsMedium=${8}
+            .colsExpanded=${8}
+            padding-block="0"
+            .maxWidth=${this.maxWidth}
+          >
+            ${this.#d(e)}
+          </scb-grid>
+        </nav>
+
+        <div class="brand">
+          <div class="brand-inner">
+            <svg class="logo" viewBox="0 0 48 54" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+              <g clip-path="url(#clip0_4974_83818)">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M25.6527 6.07812C25.6527 5.15909 24.9076 4.41482 23.9877 4.41482C23.0677 4.41482 22.3226 5.15909 22.3226 6.07812V48.0391C22.3226 48.9601 23.0677 49.7061 23.9877 49.7061C24.9076 49.7061 25.6527 48.9601 25.6527 48.0391V32.9153C25.6527 32.8056 25.744 32.7163 25.8527 32.7163H31.3245C31.4342 32.7163 31.5245 32.8056 31.5245 32.9153V48.1711C31.5245 51.3899 28.1496 54 23.9877 54C19.8241 54 16.4501 51.3899 16.4501 48.1711V5.82708C16.4501 2.6103 19.8241 0 23.9877 0C28.1496 0 31.5245 2.6103 31.5245 5.82708V20.8893C31.5245 21.0009 31.4342 21.0883 31.3245 21.0883H25.8527C25.744 21.0883 25.6527 21.0009 25.6527 20.8893V6.07812Z" fill="white"/>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M0.198901 10.8446C-0.152687 13.293 -0.0290117 17.3078 0.49751 19.5627C1.07611 22.0203 4.41288 26.9878 5.91609 29.2948C7.42127 31.5999 9.42869 34.0073 9.39892 37.2185V44.9097C9.39892 45.8287 8.65375 46.5748 7.73382 46.5748C6.81659 46.5748 6.0715 45.8287 6.0715 44.9097V33.1217C6.0715 33.012 5.9803 32.9208 5.86868 32.9208H0.39893C0.287311 32.9208 0.198901 33.012 0.198901 33.1217V45.2613C0.198901 48.4798 3.57282 51.0901 7.73382 51.0901C11.8975 51.0901 15.2714 48.4798 15.2714 45.2613V37.2185C15.2463 31.7023 13.7412 30.8985 11.7877 27.5906C10.3886 25.2148 6.94682 20.3143 6.37003 17.8566C5.8417 15.6018 5.86491 12.9916 6.0715 10.6194C6.0715 9.70039 6.81659 8.95432 7.73382 8.95432C8.65375 8.95432 9.39892 9.70039 9.39892 10.6194V21.1032C9.39892 21.2129 9.48913 21.3022 9.60166 21.3022H15.0706C15.183 21.3022 15.2714 21.2129 15.2714 21.1032V10.8446C15.2714 7.62408 11.8975 5.01575 7.73382 5.01575C3.57282 5.01575 0.198901 7.62408 0.198901 10.8446Z" fill="white"/>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M32.8911 5.46411H41.2883C44.7561 5.46411 47.5674 8.27534 47.5674 11.7414V20.547C47.5674 23.0158 45.9488 25.0995 43.7161 25.8139V25.933C45.9488 26.6456 47.5674 28.7312 47.5674 31.2018V44.6438C47.5674 47.6988 45.0873 50.1768 42.0344 50.1768L32.8911 50.1823C32.7786 50.1823 32.6892 50.0911 32.6892 49.9832V5.66324C32.6892 5.55539 32.7786 5.46411 32.8911 5.46411ZM38.7636 9.83067C38.6502 9.83067 38.5608 9.92179 38.5608 10.0316V23.9255C38.5608 24.039 38.6502 24.1284 38.7636 24.1284H39.5898C40.6948 24.1284 41.5916 23.2297 41.5916 22.1246V11.8343C41.5916 10.7293 40.6948 9.83067 39.5898 9.83067H38.7636ZM38.7636 28.5432C38.6502 28.5432 38.5608 28.6325 38.5608 28.7423V45.7971C38.5608 45.9088 38.6502 46 38.7636 46H39.7514C40.8584 46 41.7534 45.1014 41.7534 43.9962V30.5469C41.7534 29.4381 40.8584 28.5432 39.7514 28.5432H38.7636Z" fill="white"/>
+              </g>
+              <defs><clipPath id="clip0_4974_83818"><rect width="48" height="54" fill="white"/></clipPath></defs>
+            </svg>
+
+            <p class="desc">${this.description}</p>
+          </div>
+        </div>
+      </footer>
+    `;
+	}
+};
+e([a({
+	type: String,
+	attribute: "max-width",
+	reflect: !0,
+	converter: { fromAttribute: (e) => {
+		if (e == null) return "1440px";
+		let t = e.trim();
+		return t === "" ? "1440px" : /^\d+$/.test(t) ? `${t}px` : t;
+	} }
+})], o.prototype, "maxWidth", void 0), e([a({
+	type: Boolean,
+	reflect: !0,
+	attribute: "defer-paint"
+})], o.prototype, "deferPaint", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "spacing", void 0), e([a({
+	type: String,
+	attribute: "spacing-top",
+	reflect: !0
+})], o.prototype, "spacingTop", void 0), e([a({
+	type: String,
+	attribute: "spacing-bottom",
+	reflect: !0
+})], o.prototype, "spacingBottom", void 0), e([a({ type: Array })], o.prototype, "sections", void 0), e([a({ type: String })], o.prototype, "description", void 0), o = e([i("scb-footer")], o);
+//#endregion
+export { o as ScbFooter };

package/scb-gallery-grid/scb-gallery-grid.js

@@ -0,0 +1,242 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "../scb-horizontal-scroller/scb-horizontal-scroller.js";
+import "../scb-overlay/scb-overlay.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";
+//#region src/scb-test-components/scb-gallery-grid/scb-gallery-grid.ts
+var s = class extends t {
+	constructor(...e) {
+		super(...e), this.variant = "default", this.enableClickCarousel = !0, this.overlayOpen = !1, this.overlayIndex = 0, this.overlayImages = [], this.#e = [], this.#t = (e) => {
+			e.key === "Escape" && this.overlayOpen && this.#d();
+		}, this.#n = () => {
+			this.#c();
+		}, this.#r = (e) => {
+			if (!this.enableClickCarousel) return;
+			let t = e.currentTarget;
+			t instanceof HTMLElement && t.setAttribute("data-scb-gallery-hover", "");
+		}, this.#i = (e) => {
+			if (!this.enableClickCarousel) return;
+			let t = e.currentTarget;
+			t instanceof HTMLElement && t.removeAttribute("data-scb-gallery-hover");
+		}, this.#a = (e) => {
+			if (!this.enableClickCarousel) return;
+			let t = e.currentTarget;
+			if (!(t instanceof HTMLElement)) return;
+			let n = t.getAttribute("data-scb-gallery-slide-index");
+			if (n == null) return;
+			let r = Number(n);
+			Number.isFinite(r) && this.#u(r);
+		}, this.#d = () => {
+			this.overlayOpen = !1;
+		};
+	}
+	#e;
+	static {
+		this.styles = n`
+    :host {
+      display: block;
+      --scb-gallery-grid-gap: var(--spacing-4, 12px);
+      --scb-gallery-grid-item-min: 180px;
+      --scb-gallery-grid-item-height: 220px;
+      --scb-gallery-grid-masonry-columns: 3;
+      --scb-gallery-overlay-max-width: 980px;
+      --scb-gallery-overlay-slide-height: min(68vh, 620px);
+    }
+
+    .gallery {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(var(--scb-gallery-grid-item-min), 1fr));
+      gap: var(--scb-gallery-grid-gap);
+      align-items: start;
+    }
+
+    .gallery > slot {
+      display: contents;
+    }
+
+    .gallery ::slotted(*) {
+      box-sizing: border-box;
+      inline-size: 100%;
+      min-inline-size: 0;
+      block-size: var(--scb-gallery-grid-item-height);
+      overflow: hidden;
+      transition:
+        transform 160ms ease,
+        box-shadow 160ms ease;
+      will-change: transform;
+    }
+
+    .gallery ::slotted([data-scb-gallery-hover]) {
+      transform: translateY(-6px);
+      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+    }
+
+    .gallery ::slotted([data-scb-gallery-clickable]) {
+      cursor: pointer;
+    }
+
+    .gallery ::slotted(img),
+    .gallery ::slotted(picture),
+    .gallery ::slotted(video) {
+      inline-size: 100%;
+      block-size: 100%;
+      object-fit: cover;
+      display: block;
+        border-radius: var(--md-sys-shape-corner-medium, 12px);
+    }
+
+    :host([variant='masonry']) .gallery {
+      display: block;
+      column-count: var(--scb-gallery-grid-masonry-columns);
+      column-gap: var(--scb-gallery-grid-gap);
+    }
+
+    :host([variant='masonry']) .gallery ::slotted(*) {
+      break-inside: avoid;
+      -webkit-column-break-inside: avoid;
+      margin-block-end: var(--scb-gallery-grid-gap);
+      block-size: auto;
+    }
+
+    :host([variant='masonry']) .gallery ::slotted(img),
+    :host([variant='masonry']) .gallery ::slotted(picture),
+    :host([variant='masonry']) .gallery ::slotted(video) {
+      block-size: auto;
+    }
+
+    @media (max-width: 960px) {
+      :host([variant='masonry']) .gallery {
+        column-count: 2;
+      }
+    }
+
+    @media (max-width: 640px) {
+      :host([variant='masonry']) .gallery {
+        column-count: 1;
+      }
+    }
+
+    .overlay-dialog {
+      position: relative;
+      inline-size: min(var(--scb-gallery-overlay-max-width), 100%);
+      max-block-size: 100%;
+      border-radius: var(--md-sys-shape-corner-extra-large, 28px);
+      background: var(--md-sys-color-surface-container-low, #1f1f1f);
+      padding: var(--spacing-4, 12px);
+      overflow: hidden;
+    }
+
+    .overlay-slide {
+      inline-size: 100%;
+      flex: 0 0 100%;
+      block-size: var(--scb-gallery-overlay-slide-height);
+      border-radius: var(--md-sys-shape-corner-large, 16px);
+      overflow: hidden;
+      box-shadow: inset 0 0 0 2px transparent;
+      transition: box-shadow 160ms ease;
+    }
+
+    .overlay-slide img {
+      inline-size: 100%;
+      block-size: 100%;
+      object-fit: contain;
+      display: block;
+    }
+  `;
+	}
+	connectedCallback() {
+		super.connectedCallback(), window.addEventListener("keydown", this.#t);
+	}
+	disconnectedCallback() {
+		window.removeEventListener("keydown", this.#t), this.#o(), super.disconnectedCallback();
+	}
+	firstUpdated() {
+		this.#c();
+	}
+	updated(e) {
+		e.has("enableClickCarousel") && (this.enableClickCarousel || this.#d(), this.#c());
+	}
+	#t;
+	#n;
+	#r;
+	#i;
+	#a;
+	#o() {
+		this.#e.forEach((e) => {
+			e.removeEventListener("pointerenter", this.#r), e.removeEventListener("pointerleave", this.#i), e.removeEventListener("click", this.#a), e.removeAttribute("data-scb-gallery-hover"), e.removeAttribute("data-scb-gallery-clickable"), e.removeAttribute("data-scb-gallery-slide-index");
+		}), this.#e = [];
+	}
+	#s(e) {
+		if (e instanceof HTMLImageElement) {
+			let t = e.currentSrc || e.src;
+			return t ? {
+				src: t,
+				alt: e.alt || "Galleri-bild"
+			} : null;
+		}
+		return null;
+	}
+	#c() {
+		this.#o();
+		let e = this.renderRoot.querySelector("slot");
+		if (!(e instanceof HTMLSlotElement)) {
+			this.overlayImages = [];
+			return;
+		}
+		let t = e.assignedElements({ flatten: !0 }).filter((e) => e instanceof HTMLElement);
+		this.#e = t;
+		let n = [];
+		t.forEach((e) => {
+			if (!this.enableClickCarousel) return;
+			let t = this.#s(e);
+			if (!t) return;
+			e.addEventListener("pointerenter", this.#r), e.addEventListener("pointerleave", this.#i);
+			let r = n.length;
+			n.push(t), e.setAttribute("data-scb-gallery-clickable", ""), e.setAttribute("data-scb-gallery-slide-index", String(r)), e.addEventListener("click", this.#a);
+		}), this.overlayImages = n;
+	}
+	#l() {
+		if (this.overlayImages.length === 0) return [];
+		let e = Math.max(0, Math.min(this.overlayIndex, this.overlayImages.length - 1));
+		return [...this.overlayImages.slice(e), ...this.overlayImages.slice(0, e)];
+	}
+	#u(e) {
+		if (!this.enableClickCarousel || this.overlayImages.length === 0) return;
+		let t = Math.max(0, Math.min(e, this.overlayImages.length - 1));
+		this.overlayIndex = t, this.overlayOpen = !0;
+	}
+	#d;
+	render() {
+		return r`
+      <div class="gallery">
+        <slot @slotchange=${this.#n}></slot>
+      </div>
+      ${this.overlayOpen && this.enableClickCarousel ? r`
+            <scb-overlay open aria-label="Bildkarusell" @scb-overlay-dismiss=${this.#d}>
+              <div class="overlay-dialog">
+                <scb-horizontal-scroller show-scrollbar class="overlay-carousel" variant="standard" width="100%" content-flex internal-gap="0">
+                  ${this.#l().map((e, t) => r`
+                      <div
+                        class="overlay-slide ${t === 0 ? "is-active" : ""}"
+                        data-overlay-slide-index="${t}"
+                      >
+                        <img src="${e.src}" alt="${e.alt}" />
+                      </div>
+                    `)}
+                </scb-horizontal-scroller>
+              </div>
+            </scb-overlay>
+          ` : ""}
+    `;
+	}
+};
+e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "variant", void 0), e([a({
+	type: Boolean,
+	reflect: !0,
+	attribute: "enable-carousel"
+})], s.prototype, "enableClickCarousel", void 0), e([o()], s.prototype, "overlayOpen", void 0), e([o()], s.prototype, "overlayIndex", void 0), e([o()], s.prototype, "overlayImages", void 0), s = e([i("scb-gallery-grid")], s);
+//#endregion
+export { s as ScbGalleryGrid };

package/scb-grid/scb-grid-item.js

@@ -0,0 +1,81 @@
+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-grid/scb-grid-item.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.fit = !1;
+	}
+	static {
+		this.styles = n`
+    :host {
+      box-sizing: border-box;
+      display: block;
+      align-self:  var(--scb-grid-item-align, auto);
+      justify-self: var(--scb-grid-item-justify, auto);
+      block-size: auto;
+    }
+    :host([fit]) { block-size: 100%; }
+    :host([fit]) ::slotted(*) { block-size: 100%; }
+  `;
+	}
+	firstUpdated() {
+		this.#e();
+	}
+	updated() {
+		this.#e();
+	}
+	#e() {
+		this.#t("--col-span", this.hasAttribute("col-span") ? String(this.colSpan) : null), this.#t("--col-span-compact", this.hasAttribute("col-span-compact") ? String(this.colSpanCompact) : null), this.#t("--col-span-medium", this.hasAttribute("col-span-medium") ? String(this.colSpanMedium) : null), this.#t("--col-span-expanded", this.hasAttribute("col-span-expanded") ? String(this.colSpanExpanded) : null), this.#t("--row-rule", this.hasAttribute("row-span") ? `span ${this.rowSpan}` : null), this.#t("--row-rule-compact", this.hasAttribute("row-span-compact") ? `span ${this.rowSpanCompact}` : null), this.#t("--row-rule-medium", this.hasAttribute("row-span-medium") ? `span ${this.rowSpanMedium}` : null), this.#t("--row-rule-expanded", this.hasAttribute("row-span-expanded") ? `span ${this.rowSpanExpanded}` : null), this.align ? (this.style.setProperty("--scb-grid-item-align", this.align), this.style.setProperty("align-self", this.align)) : (this.style.removeProperty("--scb-grid-item-align"), this.style.removeProperty("align-self")), this.justify ? (this.style.setProperty("--scb-grid-item-justify", this.justify), this.style.setProperty("justify-self", this.justify)) : (this.style.removeProperty("--scb-grid-item-justify"), this.style.removeProperty("justify-self"));
+	}
+	#t(e, t) {
+		t === null || t === "" ? this.style.removeProperty(e) : this.style.setProperty(e, t);
+	}
+	render() {
+		return r`<slot></slot>`;
+	}
+};
+e([a({
+	type: Number,
+	attribute: "col-span",
+	reflect: !0
+})], o.prototype, "colSpan", void 0), e([a({
+	type: Number,
+	attribute: "col-span-compact",
+	reflect: !0
+})], o.prototype, "colSpanCompact", void 0), e([a({
+	type: Number,
+	attribute: "col-span-medium",
+	reflect: !0
+})], o.prototype, "colSpanMedium", void 0), e([a({
+	type: Number,
+	attribute: "col-span-expanded",
+	reflect: !0
+})], o.prototype, "colSpanExpanded", void 0), e([a({
+	type: Number,
+	attribute: "row-span",
+	reflect: !0
+})], o.prototype, "rowSpan", void 0), e([a({
+	type: Number,
+	attribute: "row-span-compact",
+	reflect: !0
+})], o.prototype, "rowSpanCompact", void 0), e([a({
+	type: Number,
+	attribute: "row-span-medium",
+	reflect: !0
+})], o.prototype, "rowSpanMedium", void 0), e([a({
+	type: Number,
+	attribute: "row-span-expanded",
+	reflect: !0
+})], o.prototype, "rowSpanExpanded", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "align", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "justify", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], o.prototype, "fit", void 0), o = e([i("scb-grid-item")], o);
+//#endregion
+export { o as ScbGridItem };