scb-wc 0.1.3 → 0.1.4

package/scb-dialog/scb-dialog.js

@@ -0,0 +1,574 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "../scb-button/scb-button.js";
+import "../scb-icon-button/scb-icon-button.js";
+import "../scb-textfield/scb-textfield.js";
+import "../scb-checkbox/scb-checkbox.js";
+import "../scb-radio-button/scb-radio-button.js";
+import "../scb-switch/scb-switch.js";
+import "../scb-chip/scb-chip.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";
+//#region src/scb-test-components/scb-dialog/scb-dialog.ts
+var s = class extends t {
+	constructor(...e) {
+		super(...e), this.open = !1, this.inSb = !1, this.scrimClose = !0, this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.variant = "basic", this.label = "", this.icon = "", this.supportingText = "", this.okButton = "OK", this.cancelButton = "Avbryt", this.deleteButton = "Delete", this.confirmButton = "Ta bort", this.denyButton = "Avbryt", this.resetButton = "Återställ", this.submitButton = "Spara", this.formId = "", this.formAction = "", this.formMethod = "", this.__lastTriggerEl = null, this.__onDocumentClick = (e) => {
+			this.__getActionFromEvent(e) === "toggle" && (this.__setOpen(!this.open), e.stopPropagation());
+		}, this.__onDocumentKeydown = (e) => {
+			this.open && e.key === "Escape" && (this.__fire("esc"), this.__setOpen(!1));
+		}, this.__onScrimClick = () => {
+			this.scrimClose && (this.__fire("scrim"), this.__setOpen(!1));
+		}, this.__onOk = () => {
+			this.__fire("ok"), this.__setOpen(!1);
+		}, this.__onCancel = () => {
+			this.__fire("cancel"), this.__setOpen(!1);
+		}, this.__onConfirm = () => {
+			this.__fire("confirm"), this.__setOpen(!1);
+		}, this.__onDeny = () => {
+			this.__fire("deny"), this.__setOpen(!1);
+		}, this.__onReset = () => {
+			let e = this.shadowRoot?.querySelector("form");
+			e instanceof HTMLFormElement && (this.__clearGeneratedFormValues(e), e.reset()), (this.shadowRoot?.querySelector("slot")?.assignedElements({ flatten: !0 }) ?? []).forEach((e) => {
+				let t = e.tagName;
+				t === "SCB-TEXTFIELD" && (e.value = ""), t === "SCB-CHECKBOX" && (e.checked = !1), t === "SCB-RADIO-BUTTON" && (e.checked = !1), t === "SCB-SWITCH" && (e.selected = !1), t === "SCB-CHIP" && (e.selected = !1);
+			}), this.__fire("reset");
+		}, this.__onSubmit = () => {
+			let e = this.shadowRoot?.querySelector("form");
+			if (e instanceof HTMLFormElement) {
+				if (this.__syncSlottedFormValues(e), !this.__validateFormAndSlottedFields(e)) return;
+				e.requestSubmit();
+			}
+			this.__fire("submit"), this.__setOpen(!1);
+		}, this.__onKeydownTrap = (e) => {
+			if (!this.open || e.key !== "Tab") return;
+			let t = Array.from(this.shadowRoot.querySelectorAll("button,[href],input,select,textarea,[tabindex]:not([tabindex=\"-1\"])")).filter((e) => !e.hasAttribute("disabled"));
+			if (!t.length) return;
+			let n = t[0], r = t[t.length - 1];
+			e.shiftKey && document.activeElement === n ? (r.focus(), e.preventDefault()) : !e.shiftKey && document.activeElement === r && (n.focus(), e.preventDefault());
+		};
+	}
+	static {
+		this.styles = n`
+    :host { 
+      display:block; 
+      position:relative;
+      font-family: var(--brand, Inter); 
+
+      margin-block-start: var(--scb-dialog-spacing-block-start, 0);
+      margin-block-end: var(--scb-dialog-spacing-block-end, 0);
+      margin-inline-start: var(--scb-dialog-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-dialog-spacing-inline-end, 0);
+    }
+
+    .scrim {
+      position: var(--scb-dialog-scrim-position, fixed);
+      inset: 0;
+      /* var från tokens, tonas med opacity via color-mix */
+      background: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent);
+      z-index: var(--z-dialog-scrim, 1000);
+      opacity: 1;
+      transition: opacity var(--motion-duration-short, 0.25s);
+      transition-timing-function: var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+      height: var(--scb-dialog-scrim-height, auto);
+    }
+
+    .container {
+        outline: none;
+      position: var(--scb-dialog-container-position, fixed);
+      inset: 50% auto auto 50%;
+      transform: translate(-50%, -50%) scale(1);
+
+      background: var(--md-sys-color-surface);
+      color: var(--md-sys-color-on-surface);
+
+      /* radius mappad till spacing-token som fallback */
+      border-radius: var(--scb-dialog-radius, var(--spacing-5, 16px));
+
+      /* skugga mappad till shadow-token + spacing-tokens */
+      box-shadow:
+        0 var(--spacing-1, 2px)
+        var(--spacing-5, 16px)
+        color-mix(in srgb, var(--md-sys-color-shadow) 20%, transparent);
+
+      /* width/height via CSS custom props med px-fallback */
+      min-width: var(--scb-dialog-min-w, 340px);
+      width: var(--scb-dialog-width, auto);
+      max-width: var(--scb-dialog-max-w, 90vw);
+      max-height: var(--scb-dialog-max-h, 90vh);
+
+
+
+      display:flex; flex-direction:column;
+
+      /* padding mappad till spacing-token */
+      padding: var(--scb-dialog-padding, var(--spacing-7, 24px));
+
+      z-index: var(--z-dialog, 1001);
+      opacity: 1;
+      transition:
+        opacity var(--motion-duration-medium, 0.3s),
+        transform var(--motion-duration-medium, 0.3s);
+      transition-timing-function: var(--motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1));
+}
+
+    :host(:not([open])) .scrim,
+    :host(:not([open])) .container { opacity:0; pointer-events:none; }
+
+    :host([open]) .scrim {
+      animation:
+        var(--motion-keyframe-fade-in, scb-kf-fade-in)
+        var(--motion-duration-short, 0.25s)
+        var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1))
+        both;
+    }
+
+    :host([open]) .container {
+      animation:
+        var(--motion-keyframe-fade-in, scb-kf-fade-in)
+        var(--motion-duration-medium, 0.3s)
+        var(--motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1))
+        both;
+    }
+
+    /* Header: ikon över rubrik */
+    .header {
+      display:flex;
+      align-items:flex-start;
+      gap: var(--spacing-4, 12px);
+      margin-bottom: var(--spacing-5, 16px);
+    }
+    .header .title {
+      display:flex;
+      flex-direction:column; /* ikon ovanför label */
+      gap: var(--spacing-3, 8px);
+    }
+    .header .label {
+      /* typografi mappad till md-sys-typescale tokens */
+      font-weight: var(--md-sys-typescale-headline-small-weight, 700);
+      font-size: var(--md-sys-typescale-headline-small-size, 1.5rem);
+      line-height: var(--md-sys-typescale-headline-small-line-height, 2rem);
+    }
+    .header .close { margin-left:auto; }
+
+    .dialog-icon {
+      inline-size: var(--scb-dialog-icon-size, var(--spacing-7, 24px));
+      block-size: var(--scb-dialog-icon-size, var(--spacing-7, 24px));
+    }
+
+    .content {
+      flex: 1 1 auto;
+      overflow:auto;
+      margin-bottom: var(--spacing-5, 16px);
+      color: var(--md-sys-color-on-surface-variant);
+    }
+
+    .content-surface {
+      border-radius: calc(var(--scb-dialog-radius, var(--spacing-5, 16px)) - var(--spacing-2, 4px));
+      overflow: hidden;
+      background: var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));
+    }
+
+    :host([variant="iframe"]) .container {
+      --scb-dialog-min-w: var(--scb-dialog-min-w-iframe, var(--scb-dialog-min-w-floating, 360px));
+      --scb-dialog-padding: var(--scb-dialog-padding-iframe, var(--spacing-3, 8px) var(--spacing-3, 8px) var(--spacing-3, 8px));
+    }
+
+    :host([variant="iframe"]) .header {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      align-items: start;
+      gap: var(--spacing-2, 4px);
+      margin-bottom: var(--spacing-3, 8px);
+      padding-block: var(--scb-dialog-header-padding-block-iframe, var(--spacing-3, 8px));
+      padding-inline-start: var(--scb-dialog-header-padding-inline-start-iframe, var(--spacing-3, 8px));
+      padding-inline-end: var(--scb-dialog-header-padding-inline-end-iframe, var(--spacing-3, 8px));
+    }
+
+    :host([variant="iframe"]) .header .title {
+      min-width: 0;
+    }
+
+    :host([variant="iframe"]) .header .label {
+      padding-inline-start: var(--scb-dialog-header-label-padding-inline-start-iframe, 0);
+    }
+
+    :host([variant="iframe"]) .header .close {
+      margin-left: 0;
+      align-self: start;
+      justify-self: end;
+      margin-top: var(--spacing-negative-2, -4px);
+      margin-right: var(--spacing-negative-4, -12px);
+    }
+
+    :host([variant="iframe"]) .content {
+      margin-bottom: 0;
+      color: inherit;
+    }
+
+    :host([variant="iframe"]) .content-surface {
+      block-size: 100%;
+    }
+
+    :host([variant="iframe"]) ::slotted(iframe) {
+      display: block;
+      inline-size: 100%;
+      block-size: var(--scb-dialog-iframe-height, min(70vh, 720px));
+      border: 0;
+      background: var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));
+    }
+
+    .actions {
+      display:flex;
+      align-items:center;
+      gap: var(--spacing-3, 8px);
+      justify-content:flex-end;
+    }
+    .actions .start { margin-right:auto; }
+
+    /* Min-bredder per variant (override-ningsbara via CSS custom props) */
+    :host([variant="choose"])   .container { --scb-dialog-min-w: var(--scb-dialog-min-w-choose, 280px); }
+    :host([variant="alert"])    .container { --scb-dialog-min-w: var(--scb-dialog-min-w-alert, 320px); }
+    :host([variant="confirm"])  .container { --scb-dialog-min-w: var(--scb-dialog-min-w-confirm, 360px); }
+
+    /* Form-layout: enkel kolumn-grid med gap */
+    :host([variant="form"]) form{
+      display:grid;
+      grid-template-columns: 1fr;
+      gap: var(--scb-form-gap, var(--spacing-6, 20px)); /* <— token + fallback */
+    }
+
+    :host([variant="form"]) .content {
+      overflow: visible;
+    }
+
+    :host([variant="floating"]) .container { --scb-dialog-min-w: var(--scb-dialog-min-w-floating, 360px); }
+
+    /* Choose: gör slottade radios vertikala med spacing */
+    :host([variant="choose"]) ::slotted(scb-radio-button) {
+      display:block;
+      margin-block: var(--scb-choice-gap, 6px);
+    }
+    /* Keyframes för motion-tokens (behövs för att animationer ska fungera i shadow DOM) */
+    @keyframes scb-kf-fade-in {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+
+    @keyframes scb-kf-fade-out {
+      from { opacity: 1; }
+      to { opacity: 0; }
+    }
+
+  `;
+	}
+	__getActionFromEvent(e) {
+		if (!this.id) return null;
+		for (let t of e.composedPath()) if (t instanceof Element && (t.getAttribute("data-dialog-toggle") === this.id || t.getAttribute("aria-controls") === this.id)) return this.__lastTriggerEl = t, "toggle";
+		return null;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.__applyZIndex(), this.__applyMaxSize(), document.addEventListener("click", this.__onDocumentClick, !1), document.addEventListener("keydown", this.__onDocumentKeydown, !0), this.addEventListener("keydown", this.__onKeydownTrap);
+	}
+	disconnectedCallback() {
+		document.removeEventListener("click", this.__onDocumentClick, !1), document.removeEventListener("keydown", this.__onDocumentKeydown, !0), this.removeEventListener("keydown", this.__onKeydownTrap), super.disconnectedCallback();
+	}
+	__applyZIndex() {
+		let e = typeof this.zIndex == "number" && Number.isFinite(this.zIndex) ? this.zIndex : void 0;
+		if (e === void 0) {
+			this.style.removeProperty("--z-dialog-scrim"), this.style.removeProperty("--z-dialog");
+			return;
+		}
+		this.style.setProperty("--z-dialog-scrim", String(e)), this.style.setProperty("--z-dialog", String(e + 1));
+	}
+	__applyMaxSize() {
+		let e = (this.maxW ?? "").trim(), t = (this.maxH ?? "").trim();
+		e ? (this.style.setProperty("--scb-dialog-max-w", e), this.style.setProperty("--scb-dialog-width", `min(${e}, 90vw)`)) : (this.style.removeProperty("--scb-dialog-max-w"), this.style.removeProperty("--scb-dialog-width")), t ? this.style.setProperty("--scb-dialog-max-h", t) : this.style.removeProperty("--scb-dialog-max-h");
+	}
+	updated(e) {
+		if (e.has("zIndex") && this.__applyZIndex(), (e.has("maxW") || e.has("maxH")) && this.__applyMaxSize(), e.has("open")) {
+			let t = e.get("open");
+			this.__updateTriggersExpanded(), this.open && !t ? this.updateComplete.then(() => {
+				let e = this.shadowRoot?.querySelector("button,[href],input,select,textarea,[tabindex]:not([tabindex=\"-1\"])");
+				e ? e.focus() : this.shadowRoot?.querySelector(".container")?.focus();
+			}) : !this.open && t && this.__lastTriggerEl?.focus?.(), this.__toggleScrollLock(this.open);
+		}
+		(e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.__applySpacing();
+	}
+	__updateTriggersExpanded() {
+		this.id && document.querySelectorAll(`[aria-controls="${this.id}"], [data-dialog-toggle="${this.id}"]`).forEach((e) => {
+			e.hasAttribute("aria-controls") && e.setAttribute("aria-expanded", String(this.open));
+		});
+	}
+	__toggleScrollLock(e) {
+		if (this.inSb) return;
+		let t = document.documentElement, n = document.body;
+		if (e) {
+			let e = window.innerWidth - t.clientWidth;
+			t.style.overflow = "hidden", n.style.paddingRight = e > 0 ? `${e}px` : "";
+			return;
+		}
+		t.style.overflow = "", n.style.paddingRight = "";
+	}
+	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;
+	}
+	__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-dialog-spacing-block-start", t) : this.style.removeProperty("--scb-dialog-spacing-block-start"), n ? this.style.setProperty("--scb-dialog-spacing-block-end", n) : this.style.removeProperty("--scb-dialog-spacing-block-end"), r ? this.style.setProperty("--scb-dialog-spacing-inline-start", r) : this.style.removeProperty("--scb-dialog-spacing-inline-start"), i ? this.style.setProperty("--scb-dialog-spacing-inline-end", i) : this.style.removeProperty("--scb-dialog-spacing-inline-end");
+	}
+	__setOpen(e) {
+		this.open = e, this.__fire(e ? "open" : "close");
+	}
+	__fire(e, t) {
+		this.dispatchEvent(new CustomEvent(e, {
+			detail: t,
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	__getSlottedElements() {
+		let e = this.shadowRoot?.querySelector("slot");
+		if (!(e instanceof HTMLSlotElement)) return [];
+		let t = e.assignedElements({ flatten: !0 }), n = [];
+		for (let e of t) n.push(e, ...Array.from(e.querySelectorAll("*")));
+		return n;
+	}
+	__appendHiddenFormValue(e, t, n) {
+		let r = document.createElement("input");
+		r.type = "hidden", r.name = t, r.value = n, r.setAttribute("data-scb-dialog-generated", "true"), e.append(r);
+	}
+	__clearGeneratedFormValues(e) {
+		e.querySelectorAll("input[data-scb-dialog-generated=\"true\"]").forEach((e) => e.remove());
+	}
+	__syncSlottedFormValues(e) {
+		this.__clearGeneratedFormValues(e), this.__getSlottedElements().forEach((t) => {
+			if (!(t instanceof HTMLElement)) return;
+			let n = (t.getAttribute("name") ?? "").trim();
+			if (n && !(t.disabled === !0 || t.hasAttribute("disabled"))) {
+				if (t instanceof HTMLInputElement) {
+					if (t.form === e) return;
+					let r = (t.type || "").toLowerCase();
+					if (r === "checkbox" || r === "radio") {
+						t.checked && this.__appendHiddenFormValue(e, n, t.value || "on");
+						return;
+					}
+					this.__appendHiddenFormValue(e, n, t.value ?? "");
+					return;
+				}
+				if (t instanceof HTMLTextAreaElement) {
+					if (t.form === e) return;
+					this.__appendHiddenFormValue(e, n, t.value ?? "");
+					return;
+				}
+				if (t instanceof HTMLSelectElement) {
+					if (t.form === e) return;
+					if (t.multiple) {
+						Array.from(t.selectedOptions).forEach((t) => {
+							this.__appendHiddenFormValue(e, n, t.value);
+						});
+						return;
+					}
+					this.__appendHiddenFormValue(e, n, t.value ?? "");
+					return;
+				}
+				switch (t.tagName) {
+					case "SCB-TEXTFIELD":
+						this.__appendHiddenFormValue(e, n, String(t.value ?? ""));
+						return;
+					case "SCB-CHECKBOX":
+						t.checked && this.__appendHiddenFormValue(e, n, String(t.value ?? t.getAttribute("value") ?? "on"));
+						return;
+					case "SCB-RADIO-BUTTON":
+						t.checked && this.__appendHiddenFormValue(e, n, String(t.value ?? t.getAttribute("value") ?? "on"));
+						return;
+					case "SCB-SWITCH":
+						(t.selected || t.checked) && this.__appendHiddenFormValue(e, n, String(t.value ?? t.getAttribute("value") ?? "on"));
+						return;
+					case "SCB-CHIP":
+						t.selected && this.__appendHiddenFormValue(e, n, String(t.value ?? t.getAttribute("value") ?? "on"));
+						return;
+					default: "value" in t && this.__appendHiddenFormValue(e, n, String(t.value ?? ""));
+				}
+			}
+		});
+	}
+	__validateFormAndSlottedFields(e) {
+		let t = (e) => e.disabled === !0 || e.hasAttribute("disabled"), n = e.reportValidity(), r = null, i = /* @__PURE__ */ new Set();
+		return this.__getSlottedElements().forEach((e) => {
+			if (!(e instanceof HTMLElement) || i.has(e) || t(e)) return;
+			i.add(e);
+			let a = e;
+			if (e.tagName === "SCB-TEXTFIELD" && a.error === !0) {
+				r ||= e, n = !1;
+				return;
+			}
+			if (typeof a.reportValidity == "function") {
+				let t = !!a.reportValidity();
+				!t && !r && (r = e), n &&= t;
+			}
+		}), !n && r && r.focus(), n;
+	}
+	__slotIsEmpty() {
+		let e = this.shadowRoot?.querySelector("slot");
+		return e ? e.assignedElements({ flatten: !0 }).length === 0 : !0;
+	}
+	renderHeader(e) {
+		let t = this.variant === "form" || this.variant === "floating" || this.variant === "iframe";
+		return r`
+      <div class="header">
+        <div class="title">
+          ${this.icon ? r`<md-icon class="dialog-icon">${this.icon}</md-icon>` : i}
+          <div class="label" id=${e}>${this.label}</div>
+        </div>
+        ${t ? r`<scb-icon-button class="close" icon="close" @click=${this.__onCancel}></scb-icon-button>` : i}
+      </div>
+    `;
+	}
+	renderContentDefault(e) {
+		return r`
+      <div class="content" id=${e}>
+        ${this.__slotIsEmpty() && this.supportingText ? r`${this.supportingText}` : r`<slot></slot>`}
+      </div>
+    `;
+	}
+	renderContentIframe(e) {
+		return r`
+      <div class="content" id=${e}>
+        <div class="content-surface">
+          ${this.__slotIsEmpty() && this.supportingText ? r`${this.supportingText}` : r`<slot></slot>`}
+        </div>
+      </div>
+    `;
+	}
+	renderActions() {
+		switch (this.variant) {
+			case "alert": return r`<div class="actions">
+          <scb-button variant="text" label=${this.okButton} @click=${this.__onOk}></scb-button>
+        </div>`;
+			case "confirm": return r`<div class="actions">
+          <scb-button variant="text" label=${this.confirmButton} @click=${this.__onConfirm}></scb-button>
+          <scb-button variant="text" label=${this.denyButton} @click=${this.__onDeny}></scb-button>
+        </div>`;
+			case "choose": return r`<div class="actions">
+          <scb-button variant="text" label=${this.cancelButton} @click=${this.__onCancel}></scb-button>
+          <scb-button variant="text" label=${this.okButton} @click=${this.__onOk}></scb-button>
+        </div>`;
+			case "form": return r`<div class="actions">
+          <scb-button class="start" variant="text" label=${this.resetButton} @click=${this.__onReset}></scb-button>
+          <scb-button variant="text" label=${this.cancelButton} @click=${this.__onCancel}></scb-button>
+          <scb-button variant="text" type="submit" label=${this.submitButton} @click=${this.__onSubmit}></scb-button>
+        </div>`;
+			case "floating":
+			case "iframe": return i;
+			default: return r`<div class="actions">
+          <scb-button variant="text" label=${this.cancelButton} @click=${this.__onCancel}></scb-button>
+          <scb-button variant="text" label=${this.okButton} @click=${this.__onOk}></scb-button>
+        </div>`;
+		}
+	}
+	renderBody(e, t) {
+		return this.variant === "form" ? r`
+        ${this.renderHeader(e)}
+        <div class="content" id=${t}>
+          <form id=${this.formId} action=${this.formAction} method=${this.formMethod || i}>
+            <slot></slot>
+          </form>
+        </div>
+        ${this.renderActions()}
+      ` : this.variant === "iframe" ? r`${this.renderHeader(e)} ${this.renderContentIframe(t)} ${this.renderActions()}` : r`${this.renderHeader(e)} ${this.renderContentDefault(t)} ${this.renderActions()}`;
+	}
+	render() {
+		let e = "dlg-title", t = "dlg-desc";
+		return r`
+      <div class="scrim" @click=${this.__onScrimClick} aria-hidden="true"></div>
+      <div
+        class="container"
+        tabindex="-1"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby=${e}
+        aria-describedby=${t}
+      >
+        ${this.renderBody(e, t)}
+      </div>
+    `;
+	}
+};
+e([o({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "open", void 0), e([o({
+	type: String,
+	attribute: "max-w",
+	reflect: !0
+})], s.prototype, "maxW", void 0), e([o({
+	type: String,
+	attribute: "max-h",
+	reflect: !0
+})], s.prototype, "maxH", void 0), e([o({
+	type: Number,
+	attribute: "z-index",
+	reflect: !0
+})], s.prototype, "zIndex", void 0), e([o({
+	type: Boolean,
+	attribute: !1
+})], s.prototype, "inSb", void 0), e([o({
+	type: Boolean,
+	attribute: "scrim-close"
+})], s.prototype, "scrimClose", 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), e([o({ type: String })], s.prototype, "variant", void 0), e([o({ type: String })], s.prototype, "label", void 0), e([o({ type: String })], s.prototype, "icon", void 0), e([o({
+	type: String,
+	attribute: "supporting-text"
+})], s.prototype, "supportingText", void 0), e([o({
+	type: String,
+	attribute: "ok-button"
+})], s.prototype, "okButton", void 0), e([o({
+	type: String,
+	attribute: "cancel-button"
+})], s.prototype, "cancelButton", void 0), e([o({
+	type: String,
+	attribute: "delete-button"
+})], s.prototype, "deleteButton", void 0), e([o({
+	type: String,
+	attribute: "confirm-button"
+})], s.prototype, "confirmButton", void 0), e([o({
+	type: String,
+	attribute: "deny-button"
+})], s.prototype, "denyButton", void 0), e([o({
+	type: String,
+	attribute: "reset-button"
+})], s.prototype, "resetButton", void 0), e([o({
+	type: String,
+	attribute: "submit-button"
+})], s.prototype, "submitButton", void 0), e([o({
+	type: String,
+	attribute: "form-id"
+})], s.prototype, "formId", void 0), e([o({
+	type: String,
+	attribute: "form-action"
+})], s.prototype, "formAction", void 0), e([o({
+	type: String,
+	attribute: "form-method"
+})], s.prototype, "formMethod", void 0), s = e([a("scb-dialog")], s);
+//#endregion
+export { s as ScbDialog };

package/scb-divider/scb-divider.js

@@ -0,0 +1,119 @@
+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-divider/scb-divider.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.variant = "thin", this.direction = "horizontal", this.inset = "none", this.overlay = !1, this.anchor = "end", this.spacing = void 0;
+	}
+	static {
+		this.styles = n`
+    :host {
+      --scb-divider-color: var(--md-sys-color-outline-variant);
+      --scb-divider-thickness: 1px;
+      --scb-divider-gap: var(--scb-grid-column-gap, var(--spacing-6, 24px));
+      --scb-divider-spacing-orth: 0;
+
+      display: block;
+      box-sizing: border-box;
+      pointer-events: none;
+    }
+
+    :host([variant='bold']) {
+      --scb-divider-color: var(--md-sys-color-outline);
+    }
+
+    /* Horisontell avdelare: drar ut sig på inline-led, spacing på block-led (ovan/under). */
+    :host(:not([direction='vertical'])) {
+      inline-size: 100%;
+      block-size: var(--scb-divider-thickness);
+      background: var(--scb-divider-color);
+      margin-block: var(--scb-divider-spacing-orth, 0);
+    }
+
+    :host([inset='both']:not([direction='vertical'])) {
+      margin-inline: var(--spacing-8, 32px);
+    }
+    :host([inset='start']:not([direction='vertical'])) {
+      margin-inline-start: var(--spacing-8, 32px);
+    }
+    :host([inset='end']:not([direction='vertical'])) {
+      margin-inline-end: var(--spacing-8, 32px);
+    }
+
+    /* Vertikal avdelare: drar ut sig på block-led, spacing på inline-led (vänster/höger). */
+    :host([direction='vertical']:not([overlay])) {
+      inline-size: var(--scb-divider-thickness);
+      block-size: 100%;
+      background: var(--scb-divider-color);
+      align-self: stretch;
+      justify-self: center;
+      margin-inline: var(--scb-divider-spacing-orth, 0);
+    }
+
+    :host([direction='vertical'][inset='both']:not([overlay])) {
+      margin-block: var(--spacing-8, 32px);
+    }
+    :host([direction='vertical'][inset='start']:not([overlay])) {
+      margin-block-start: var(--spacing-8, 32px);
+    }
+    :host([direction='vertical'][inset='end']:not([overlay])) {
+      margin-block-end: var(--spacing-8, 32px);
+    }
+
+    /* Overlay-variant för vertikal avdelare, spacing ignoreras (absolut positionerad). */
+    :host([overlay][direction='vertical']) {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      inline-size: var(--scb-divider-thickness);
+      background: var(--scb-divider-color);
+    }
+    :host([overlay][direction='vertical'][anchor='end']) {
+      right: calc(var(--scb-divider-gap) / -2);
+    }
+    :host([overlay][direction='vertical'][anchor='start']) {
+      left: calc(var(--scb-divider-gap) / -2);
+    }
+  `;
+	}
+	firstUpdated() {
+		this.#e();
+	}
+	updated(e) {
+		e.has("spacing") && this.#e();
+	}
+	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);
+		e ? this.style.setProperty("--scb-divider-spacing-orth", e) : this.style.removeProperty("--scb-divider-spacing-orth");
+	}
+	render() {
+		return r``;
+	}
+};
+e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "variant", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "direction", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "inset", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], o.prototype, "overlay", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "anchor", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "spacing", void 0), o = e([i("scb-divider")], o);
+//#endregion
+export { o as ScbDivider };