scb-wc 0.1.2 → 0.1.4

package/scb-accordion/scb-accordion-item.js

@@ -0,0 +1,340 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "../scb-chevron/scb-chevron.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/icon/icon.js";
+import "@material/web/ripple/ripple.js";
+//#region src/scb-test-components/scb-accordion/scb-accordion-item.ts
+var s, c = class extends t {
+	static {
+		s = this;
+	}
+	constructor(...e) {
+		super(...e), this.open = !1, this.title = "", this.content = "", this.overline = "", this.supportingText = "", this.leading = !1, this.leadingVariant = "", this.leadingIcon = "", this.imgHrefImage = "", this.avatarLabel = "", this.avatarAlt = "", this.avatarVariant = "icon", this.avatarSrc = "", this.density = 0, this._unique = s._uid(), this._ignoreNextNativeTitleAttrChange = !1, this._onSummaryClick = (e) => {
+			e.preventDefault();
+			let t = !this.open;
+			this.closest("scb-accordion")?.onItemToggled?.(this, t), this.setOpen(t);
+		}, this._onToggle = (e) => {
+			let t = e.currentTarget;
+			t.open ||= !0, this._applyInertByOpen();
+		};
+	}
+	static {
+		this._uidPrefix = `uid-${Math.random().toString(36).slice(2)}`;
+	}
+	static {
+		this._uidSeq = 0;
+	}
+	static _uid() {
+		return globalThis.crypto?.randomUUID?.() ?? `${s._uidPrefix}-${++s._uidSeq}`;
+	}
+	static get observedAttributes() {
+		let e = super.observedAttributes || [];
+		return e.includes("title") ? e : [...e, "title"];
+	}
+	attributeChangedCallback(e, t, n) {
+		if (e === "title" && this._ignoreNextNativeTitleAttrChange) {
+			this._ignoreNextNativeTitleAttrChange = !1;
+			return;
+		}
+		super.attributeChangedCallback(e, t, n), e === "title" && n !== null && (this._ignoreNextNativeTitleAttrChange = !0, this.removeAttribute("title"));
+	}
+	firstUpdated() {
+		this._applyInertByOpen();
+	}
+	static {
+		this.styles = [n`
+      :host {
+        display: block;
+        position: relative;
+        --scb-accordion-hover-radius: var(--radius-none, 0px);
+        --scb-accordion-chevron-nudge-y: 3px;
+        --scb-accordion-motion-duration: 0.3s;
+        --scb-accordion-motion-easing: ease;
+        --scb-accordion-panel-padding-closed: var(--spacing-0, 0px);
+        --scb-accordion-interaction-bleed: max(var(--stroke-focus-ring, 3px), var(--spacing-2, 4px));
+
+        --scb-accordion-item-padding-inline: var(--spacing-5, 16px);
+        --scb-accordion-item-padding-block: var(--spacing-7, 24px);
+        --scb-accordion-item-gap: var(--spacing-5, 16px);
+
+        --scb-accordion-title-font-size: var(--md-sys-typescale-title-large-size);
+        --scb-accordion-title-line-height: var(--md-sys-typescale-title-large-line-height);
+        --scb-accordion-title-letter-spacing: var(--md-sys-typescale-title-large-tracking);
+
+        --scb-accordion-supporting-font-size: var(--md-sys-typescale-body-medium-size);
+        --scb-accordion-supporting-line-height: var(--md-sys-typescale-body-medium-line-height);
+        --scb-accordion-supporting-letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+
+        --scb-accordion-leading-image-size: calc(var(--icon-size-extra-large, 36px) + var(--spacing-5, 16px));
+      }
+
+      :host-context(scb-accordion[size='medium']) {
+        --scb-accordion-item-padding-inline: var(--spacing-5, 16px);
+        --scb-accordion-item-padding-block: var(--spacing-6, 20px);
+        --scb-accordion-item-gap: var(--spacing-4, 12px);
+
+        --scb-accordion-title-font-size: var(--md-sys-typescale-title-medium-size);
+        --scb-accordion-title-line-height: var(--md-sys-typescale-title-medium-line-height);
+        --scb-accordion-title-letter-spacing: var(--md-sys-typescale-title-medium-tracking);
+
+        --scb-accordion-leading-image-size: calc(var(--icon-size-large, 30px) + var(--spacing-4, 12px));
+      }
+
+      :host-context(scb-accordion[size='small']) {
+        --scb-accordion-item-padding-inline: var(--spacing-4, 12px);
+        --scb-accordion-item-padding-block: var(--spacing-5, 16px);
+        --scb-accordion-item-gap: var(--spacing-3, 8px);
+
+        --scb-accordion-title-font-size: var(--md-sys-typescale-title-small-size);
+        --scb-accordion-title-line-height: var(--md-sys-typescale-title-small-line-height);
+        --scb-accordion-title-letter-spacing: var(--md-sys-typescale-title-small-tracking);
+
+        --scb-accordion-supporting-font-size: var(--md-sys-typescale-body-small-size);
+        --scb-accordion-supporting-line-height: var(--md-sys-typescale-body-small-line-height);
+        --scb-accordion-supporting-letter-spacing: var(--md-sys-typescale-body-small-tracking);
+
+        --scb-accordion-leading-image-size: calc(var(--icon-size-medium, 24px) + var(--spacing-4, 12px));
+      }
+
+      md-focus-ring {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        border-radius: var(--scb-accordion-focus-ring-radius, var(--md-sys-shape-corner-small, 8px));
+      }
+
+      .scb-accordion-item {
+        border-bottom: var(--stroke-border, 1px) solid var(--md-sys-color-outline-variant);
+        color: var(--md-sys-color-on-surface);
+        font-family: var(--brand-font);
+      }
+
+      /* Header */
+      .scb-accordion-top {
+        list-style: none;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        cursor: pointer;
+        padding-block: var(--scb-accordion-item-padding-block, var(--spacing-7, 24px));
+        padding-inline: var(--scb-accordion-item-padding-inline, var(--spacing-5, 16px));
+        border-radius: var(--radius-none, 0px);
+        gap: var(--scb-accordion-item-gap, var(--spacing-5, 16px));
+        color: var(--md-sys-color-on-surface);
+        position: relative;
+        overflow: hidden;
+        -webkit-tap-highlight-color: transparent;
+        outline: none;
+      }
+      .scb-accordion-top::-webkit-details-marker { display: none; }
+      summary::marker { content: ''; }
+
+      :host([density="-2"]) .scb-accordion-top,
+      :host-context([data-density="-2"]) .scb-accordion-top {
+        padding-block: var(--spacing-5, 16px);
+      }
+      :host([density="-4"]) .scb-accordion-top,
+      :host-context([data-density="-4"]) .scb-accordion-top {
+        padding-block: var(--spacing-4, 12px);
+      }
+
+      .scb-accordion-bottom {
+        display: grid;
+        grid-template-rows: 0fr;
+        opacity: 0;
+        overflow: hidden;
+        transition:
+          grid-template-rows var(--scb-accordion-motion-duration) var(--scb-accordion-motion-easing),
+          opacity var(--scb-accordion-motion-duration) var(--scb-accordion-motion-easing),
+          padding var(--scb-accordion-motion-duration) var(--scb-accordion-motion-easing);
+        padding-block: var(--scb-accordion-panel-padding-closed);
+        padding-inline: calc(var(--scb-accordion-item-padding-inline, var(--spacing-5, 16px)) - var(--scb-accordion-interaction-bleed));
+      }
+      :host([open]) .scb-accordion-bottom {
+        grid-template-rows: 1fr;
+        opacity: 1;
+        padding-top: max(var(--spacing-0, 0px), calc(var(--spacing-2, 4px) - var(--scb-accordion-interaction-bleed)));
+        padding-right: calc(var(--scb-accordion-item-padding-inline, var(--spacing-5, 16px)) - var(--scb-accordion-interaction-bleed));
+        padding-bottom: calc(var(--scb-accordion-item-padding-inline, var(--spacing-5, 16px)) - var(--scb-accordion-interaction-bleed));
+        padding-left: calc(var(--scb-accordion-item-padding-inline, var(--spacing-5, 16px)) - var(--scb-accordion-interaction-bleed));
+      }
+      .bottom-inner {
+        min-height: 0;
+        overflow: visible;
+        padding: var(--scb-accordion-interaction-bleed);
+      }
+
+      .title {
+        font-family: var(--brand-font);
+        font-size: var(--scb-accordion-title-font-size, var(--md-sys-typescale-title-large-size));
+        line-height: var(--scb-accordion-title-line-height, var(--md-sys-typescale-title-large-line-height));
+        font-weight: var(--weight-semibold);
+        letter-spacing: var(--scb-accordion-title-letter-spacing, var(--md-sys-typescale-title-large-tracking));
+        color: var(--md-sys-color-on-surface);
+      }
+      .overline {
+        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);
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      .supporting-text {
+        font-family: var(--brand-font);
+        font-size: var(--scb-accordion-supporting-font-size, var(--md-sys-typescale-body-medium-size));
+        line-height: var(--scb-accordion-supporting-line-height, var(--md-sys-typescale-body-medium-line-height));
+        font-weight: var(--weight-regular);
+        letter-spacing: var(--scb-accordion-supporting-letter-spacing, var(--md-sys-typescale-body-medium-tracking));
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      .leading { align-self: center; display: grid; place-items: center; }
+      .img {
+        width: var(--scb-accordion-leading-image-size, calc(var(--icon-size-extra-large, 36px) + var(--spacing-5, 16px)));
+        height: var(--scb-accordion-leading-image-size, calc(var(--icon-size-extra-large, 36px) + var(--spacing-5, 16px)));
+        object-fit: contain;
+        border-radius: var(--radius-s, 8px);
+      }
+
+      .texts { display: grid; gap: var(--spacing-1, 2px); }
+
+      .chevron {
+        margin-left: auto;
+      }
+
+      md-ripple {
+        border-radius: inherit;
+        inset: 0;
+        position: absolute;
+        pointer-events: none;
+        overflow: hidden;
+      }
+      @media (prefers-reduced-motion: reduce) {
+        md-ripple { display: none; }
+      }
+    `];
+	}
+	_applyInertByOpen() {
+		let e = this.renderRoot.querySelector(".scb-accordion-bottom");
+		e && (this.open ? (e.removeAttribute("inert"), e.setAttribute("aria-hidden", "false")) : (e.setAttribute("inert", ""), e.setAttribute("aria-hidden", "true")));
+	}
+	_onKeyDown(e) {
+		let t = this.closest("scb-accordion"), n = Array.from(t?.querySelectorAll("scb-accordion-item") || []).map((e) => e.renderRoot.querySelector("details")?.querySelector(".scb-accordion-top") || null).filter((e) => !!e), r = e.currentTarget, i = n.indexOf(r);
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), i < n.length - 1 && n[i + 1].focus();
+				break;
+			case "ArrowUp":
+				e.preventDefault(), i > 0 && n[i - 1].focus();
+				break;
+			case "Home":
+				e.preventDefault(), n.length && n[0].focus();
+				break;
+			case "End":
+				e.preventDefault(), n.length && n[n.length - 1].focus();
+				break;
+		}
+	}
+	setOpen(e) {
+		this.open = !!e;
+		let t = this.renderRoot.querySelector("details");
+		t && !t.open && (t.open = !0), this._applyInertByOpen();
+	}
+	updated(e) {
+		if (e.has("open")) {
+			let e = this.renderRoot.querySelector("details");
+			e && !e.open && (e.open = !0), this._applyInertByOpen(), this.dispatchEvent(new CustomEvent("open-changed", {
+				detail: {
+					open: this.open,
+					title: this.title
+				},
+				bubbles: !0,
+				composed: !0
+			}));
+		}
+	}
+	render() {
+		let e = `bottom-${this._unique}`, t = `header-${this._unique}`, n = this.leading ? this.leadingVariant === "image" && this.imgHrefImage ? r`<img part="leading-image" class="img" src="${this.imgHrefImage}" alt="" />` : this.leadingVariant === "avatar" ? r`
+              <scb-avatar
+                label=${this.avatarLabel}
+                alt=${this.avatarAlt}
+                src=${this.avatarVariant === "image" ? this.avatarSrc : ""}
+                size="medium"
+                shape="circular"
+                variant=${this.avatarVariant}
+              ></scb-avatar>
+            ` : this.leadingVariant === "icon" ? r`<md-icon>${this.leadingIcon}</md-icon>` : i : i;
+		return r`
+      <details class="scb-accordion-item" open @toggle=${this._onToggle}>
+        <summary
+          id=${t}
+          class="scb-accordion-top"
+          aria-controls=${e}
+          @click=${this._onSummaryClick}
+          @keydown=${this._onKeyDown}
+        >
+          <md-ripple></md-ripple>
+
+          ${this.leading ? r`<div class="leading">${n}</div>` : i}
+
+          <div class="texts">
+            ${this.overline ? r`<div class="overline">${this.overline}</div>` : i}
+            <div class="title">${this.title}</div>
+            ${this.supportingText ? r`<div class="supporting-text">${this.supportingText}</div>` : i}
+          </div>
+
+          <scb-chevron class="chevron" .open=${this.open}></scb-chevron>
+        </summary>
+
+        <div id=${e} class="scb-accordion-bottom" role="region" aria-labelledby=${t}>
+          <div class="bottom-inner">
+            <slot>${this.content}</slot>
+          </div>
+        </div>
+      </details>
+
+      <md-focus-ring for=${t} inward></md-focus-ring>
+    `;
+	}
+};
+e([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "open", void 0), e([o({ type: String })], c.prototype, "title", void 0), e([o({ type: String })], c.prototype, "content", void 0), e([o({
+	type: String,
+	attribute: "overline"
+})], c.prototype, "overline", void 0), e([o({
+	type: String,
+	attribute: "supporting-text"
+})], c.prototype, "supportingText", void 0), e([o({ type: Boolean })], c.prototype, "leading", void 0), e([o({
+	type: String,
+	attribute: "leading-variant",
+	reflect: !0
+})], c.prototype, "leadingVariant", void 0), e([o({
+	type: String,
+	attribute: "leading-icon"
+})], c.prototype, "leadingIcon", void 0), e([o({
+	type: String,
+	attribute: "img-href-image",
+	reflect: !0
+})], c.prototype, "imgHrefImage", void 0), e([o({
+	type: String,
+	attribute: "avatar-label"
+})], c.prototype, "avatarLabel", void 0), e([o({
+	type: String,
+	attribute: "avatar-alt"
+})], c.prototype, "avatarAlt", void 0), e([o({
+	type: String,
+	attribute: "avatar-variant"
+})], c.prototype, "avatarVariant", void 0), e([o({
+	type: String,
+	attribute: "avatar-src"
+})], c.prototype, "avatarSrc", void 0), e([o({
+	type: Number,
+	reflect: !0
+})], c.prototype, "density", void 0), c = s = e([a("scb-accordion-item")], c);
+//#endregion
+export { c as ScbAccordionItem };

package/scb-accordion/scb-accordion.js

@@ -0,0 +1,151 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "./scb-accordion-item.js";
+import "../scb-button/scb-button.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";
+//#region src/scb-test-components/scb-accordion/scb-accordion.ts
+var s = class extends t {
+	constructor(...e) {
+		super(...e), this.singleOpen = !1, this.showCloseAll = !1, this.size = "large", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0;
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: block;
+      margin-block-start: var(--scb-accordion-spacing-block-start, 0);
+      margin-block-end: var(--scb-accordion-spacing-block-end, 0);
+      margin-inline-start: var(--scb-accordion-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-accordion-spacing-inline-end, 0);
+
+      --scb-accordion-actions-padding-inline: var(--spacing-5, 16px);
+      --scb-accordion-actions-padding-block: var(--spacing-2, 4px);
+    }
+
+    :host([size='medium']) {
+      --scb-accordion-actions-padding-inline: var(--spacing-5, 16px);
+      --scb-accordion-actions-padding-block: var(--spacing-2, 4px);
+    }
+
+    :host([size='small']) {
+      --scb-accordion-actions-padding-inline: var(--spacing-4, 12px);
+      --scb-accordion-actions-padding-block: var(--spacing-2, 4px);
+    }
+
+    .scb-accordion-actions {
+      display: flex;
+      justify-content: flex-end;
+      padding-inline: var(--scb-accordion-actions-padding-inline);
+      padding-block-start: var(--scb-accordion-actions-padding-block);
+      padding-block-end: var(--scb-accordion-actions-padding-block);
+    }
+  `;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("open-changed", this.#n);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("open-changed", this.#n), super.disconnectedCallback();
+	}
+	render() {
+		let e = !this.singleOpen && this.showCloseAll, t = e ? this.#e() : !1;
+		return r`
+      <div class="scb-accordion" ?single-open=${this.singleOpen}>
+        ${e ? r`
+              <div class="scb-accordion-actions" role="toolbar" aria-label="Accordionkontroller">
+                <scb-button
+                  variant="text"
+                  label=${t ? "Stäng alla" : "Öppna alla"}
+                  @click=${this.#t}
+                ></scb-button>
+              </div>
+            ` : i}
+
+        <slot @slotchange=${this.#r}></slot>
+      </div>
+    `;
+	}
+	firstUpdated() {
+		this.#a(), this.#i();
+	}
+	updated(e) {
+		(e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#a(), e.has("singleOpen") && this.#i();
+	}
+	_getDirectItems() {
+		return Array.from(this.children).filter((e) => e.tagName === "SCB-ACCORDION-ITEM");
+	}
+	#e() {
+		let e = this._getDirectItems();
+		return e.length > 0 && e.every((e) => e.open);
+	}
+	#t() {
+		if (this.singleOpen || !this.showCloseAll) return;
+		let e = this._getDirectItems(), t = e.length > 0 && e.every((e) => e.open);
+		e.forEach((e) => e.setOpen(!t));
+	}
+	onItemToggled(e, t) {
+		if (this.singleOpen && t) {
+			this._getDirectItems().forEach((t) => {
+				t !== e && t.setOpen(!1);
+			});
+			return;
+		}
+		!this.singleOpen && this.showCloseAll && this.requestUpdate();
+	}
+	#n() {
+		this.singleOpen || this.showCloseAll && this.requestUpdate();
+	}
+	#r() {
+		if (this.singleOpen) {
+			this.#i();
+			return;
+		}
+		this.showCloseAll && this.requestUpdate();
+	}
+	#i() {
+		if (!this.singleOpen) return;
+		let e = this._getDirectItems().filter((e) => e.open);
+		e.length <= 1 || e.slice(1).forEach((e) => e.setOpen(!1));
+	}
+	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;
+	}
+	#a() {
+		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-accordion-spacing-block-start", t) : this.style.removeProperty("--scb-accordion-spacing-block-start"), n ? this.style.setProperty("--scb-accordion-spacing-block-end", n) : this.style.removeProperty("--scb-accordion-spacing-block-end"), r ? this.style.setProperty("--scb-accordion-spacing-inline-start", r) : this.style.removeProperty("--scb-accordion-spacing-inline-start"), i ? this.style.setProperty("--scb-accordion-spacing-inline-end", i) : this.style.removeProperty("--scb-accordion-spacing-inline-end");
+	}
+};
+e([o({
+	type: Boolean,
+	attribute: "single-open",
+	reflect: !0
+})], s.prototype, "singleOpen", void 0), e([o({
+	type: Boolean,
+	attribute: "show-close-all",
+	reflect: !0
+})], s.prototype, "showCloseAll", void 0), e([o({
+	type: String,
+	reflect: !0
+})], s.prototype, "size", 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-accordion")], s);
+//#endregion
+export { s as ScbAccordion };