scb-wc 0.1.2 → 0.1.4

package/scb-grid/scb-grid.js

@@ -0,0 +1,200 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "./scb-grid-item.js";
+import "./scb-stack.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.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.colsCompact = 4, this.colsMedium = 8, this.colsExpanded = 12, this.gap = "", this.rowGap = "", this.columnGap = "", this.alignItems = "stretch", this.justifyItems = "stretch", this.paddingInline = "", this.paddingBlock = "", this.maxWidth = "", this.autoRows = "";
+	}
+	static {
+		this.styles = n`
+  :host {
+    box-sizing: border-box;
+    display: block;
+    max-width: var(--scb-grid-max-width, 1440px);
+    margin-inline: auto;
+    padding-inline: var(--scb-grid-padding-inline, 0);
+    padding-block:  var(--scb-grid-padding-block, 0);
+    container-type: inline-size;
+  }
+
+  .grid {
+    display: grid;
+    width: 100%;
+    grid-auto-rows: var(--scb-grid-auto-rows, auto);
+
+    /* Longhands med fallback till --scb-grid-gap och sedan token-default */
+    row-gap:    var(--scb-grid-row-gap,    var(--scb-grid-gap, var(--spacing-7, 24px)));
+    column-gap: var(--scb-grid-column-gap, var(--scb-grid-gap, var(--spacing-7, 24px)));
+
+    grid-auto-flow: row dense;
+    grid-auto-rows: var(--scb-grid-auto-rows, auto);
+    align-items:   var(--scb-grid-align-items, stretch);
+    justify-items: var(--scb-grid-justify-items, stretch);
+
+    /* Compact baseline */
+    grid-template-columns: repeat(var(--scb-grid-cols-compact, 4), minmax(0, 1fr));
+  }
+
+  .grid > slot { display: contents; }
+
+  /* Kolumn-span + rad-span (compact) */
+  .grid ::slotted(*) {
+    min-width: 0;
+    min-height: 0;
+    grid-column: span min(
+      max(1, var(--col-span-compact, var(--col-span, var(--scb-grid-cols-compact, 4)))) ,
+      var(--scb-grid-cols-compact, 4)
+    );
+    grid-row: var(--row-rule-compact, var(--row-rule, auto));
+  }
+
+  /* Utan container queries -> media queries */
+  @supports not (container-type: inline-size) {
+    @media (min-width: 600px) {
+      .grid { grid-template-columns: repeat(var(--scb-grid-cols-medium, 8), minmax(0, 1fr)); }
+      .grid ::slotted(*) {
+        min-width: 0;
+        min-height: 0;
+        grid-column: span min(
+          max(1, var(--col-span-medium, var(--col-span, var(--scb-grid-cols-medium, 8)))) ,
+          var(--scb-grid-cols-medium, 8)
+        );
+        grid-row: var(--row-rule-medium, var(--row-rule, auto));
+      }
+    }
+    @media (min-width: 840px) {
+      .grid { grid-template-columns: repeat(var(--scb-grid-cols-expanded, 12), minmax(0, 1fr)); }
+      .grid ::slotted(*) {
+        min-width: 0;
+        min-height: 0;
+        grid-column: span min(
+          max(1, var(--col-span-expanded, var(--col-span, var(--scb-grid-cols-expanded, 12)))) ,
+          var(--scb-grid-cols-expanded, 12)
+        );
+        grid-row: var(--row-rule-expanded, var(--row-rule, auto));
+      }
+    }
+  }
+
+  /* Med container queries */
+  @supports (container-type: inline-size) {
+    @container (min-width: 600px) {
+      .grid { grid-template-columns: repeat(var(--scb-grid-cols-medium, 8), minmax(0, 1fr)); }
+      .grid ::slotted(*) {
+        min-width: 0;
+        min-height: 0;
+        grid-column: span min(
+          max(1, var(--col-span-medium, var(--col-span, var(--scb-grid-cols-medium, 8)))) ,
+          var(--scb-grid-cols-medium, 8)
+        );
+        grid-row: var(--row-rule-medium, var(--row-rule, auto));
+      }
+    }
+    @container (min-width: 840px) {
+      .grid { grid-template-columns: repeat(var(--scb-grid-cols-expanded, 12), minmax(0, 1fr)); }
+      .grid ::slotted(*) {
+        min-width: 0;
+        min-height: 0;
+        grid-column: span min(
+          max(1, var(--col-span-expanded, var(--col-span, var(--scb-grid-cols-expanded, 12)))) ,
+          var(--scb-grid-cols-expanded, 12)
+        );
+        grid-row: var(--row-rule-expanded, var(--row-rule, auto));
+      }
+    }
+  }
+`;
+	}
+	firstUpdated() {
+		this.#e();
+	}
+	updated() {
+		this.#e();
+	}
+	mapSpacingToken(e) {
+		if (!e) return;
+		let t = String(e).trim();
+		return /^\d+$/.test(t) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(t, 10)))})` : t;
+	}
+	parseGapShorthand(e) {
+		if (!e) return {};
+		let t = e.trim().split(/\s+/);
+		if (t.length === 1) {
+			let e = this.mapSpacingToken(t[0]);
+			return {
+				row: e,
+				col: e
+			};
+		}
+		return {
+			row: this.mapSpacingToken(t[0]),
+			col: this.mapSpacingToken(t[1])
+		};
+	}
+	#e() {
+		this.style.setProperty("--scb-grid-cols-compact", String(this.colsCompact)), this.style.setProperty("--scb-grid-cols-medium", String(this.colsMedium)), this.style.setProperty("--scb-grid-cols-expanded", String(this.colsExpanded));
+		let e = "var(--spacing-7, 24px)", t = this.parseGapShorthand(this.gap), n = this.mapSpacingToken(this.rowGap) ?? t.row ?? e, r = this.mapSpacingToken(this.columnGap) ?? t.col ?? e;
+		this.style.setProperty("--scb-grid-row-gap", n), this.style.setProperty("--scb-grid-column-gap", r), this.style.setProperty("--scb-grid-gap", `${n} ${r}`), this.style.setProperty("--scb-grid-align-items", this.alignItems), this.style.setProperty("--scb-grid-justify-items", this.justifyItems);
+		let i = this.mapSpacingToken(this.paddingInline), a = this.mapSpacingToken(this.paddingBlock);
+		this.#t("--scb-grid-max-width", this.maxWidth), this.#t("--scb-grid-padding-inline", i ?? ""), this.#t("--scb-grid-padding-block", a ?? ""), this.#t("--scb-grid-auto-rows", this.autoRows);
+	}
+	#t(e, t) {
+		t ? this.style.setProperty(e, t) : this.style.removeProperty(e);
+	}
+	render() {
+		return r`<div class="grid"><slot></slot></div>`;
+	}
+};
+e([a({
+	type: Number,
+	attribute: "cols-compact",
+	reflect: !0
+})], o.prototype, "colsCompact", void 0), e([a({
+	type: Number,
+	attribute: "cols-medium",
+	reflect: !0
+})], o.prototype, "colsMedium", void 0), e([a({
+	type: Number,
+	attribute: "cols-expanded",
+	reflect: !0
+})], o.prototype, "colsExpanded", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "gap", void 0), e([a({
+	type: String,
+	attribute: "row-gap",
+	reflect: !0
+})], o.prototype, "rowGap", void 0), e([a({
+	type: String,
+	attribute: "column-gap",
+	reflect: !0
+})], o.prototype, "columnGap", void 0), e([a({
+	type: String,
+	attribute: "align-items",
+	reflect: !0
+})], o.prototype, "alignItems", void 0), e([a({
+	type: String,
+	attribute: "justify-items",
+	reflect: !0
+})], o.prototype, "justifyItems", void 0), e([a({
+	type: String,
+	attribute: "padding-inline",
+	reflect: !0
+})], o.prototype, "paddingInline", void 0), e([a({
+	type: String,
+	attribute: "padding-block",
+	reflect: !0
+})], o.prototype, "paddingBlock", void 0), e([a({
+	type: String,
+	attribute: "max-width",
+	reflect: !0
+})], o.prototype, "maxWidth", void 0), e([a({
+	type: String,
+	attribute: "auto-rows",
+	reflect: !0
+})], o.prototype, "autoRows", void 0), o = e([i("scb-grid")], o);
+//#endregion
+export { o as ScbGrid };

package/scb-grid/scb-stack.js

@@ -0,0 +1,120 @@
+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-stack.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.direction = "column", this.gap = "", this.rowGap = "", this.columnGap = "", this.align = "stretch", this.justify = "start", this.wrap = !1, this.inline = !1;
+	}
+	static {
+		this.styles = n`
+    :host {
+      box-sizing: border-box;
+      display: block;
+      width: auto;
+      max-width: 100%;
+      min-inline-size: 0;
+    }
+
+    /* Inre flexlayout så att gap även fungerar för slottat innehåll */
+    .base {
+      display: var(--scb-stack-display, flex);
+      flex-direction: var(--scb-stack-direction, column);
+
+      /* Longhands med fallback till --scb-stack-gap och token-default */
+      row-gap:    var(--scb-stack-row-gap,    var(--scb-stack-gap, var(--spacing-5, 16px)));
+      column-gap: var(--scb-stack-column-gap, var(--scb-stack-gap, var(--spacing-5, 16px)));
+
+      align-items: var(--scb-stack-align, stretch);
+      justify-content: var(--scb-stack-justify, flex-start);
+      flex-wrap: var(--scb-stack-wrap, nowrap);
+    }
+
+    /* Gör att slotens tilldelade noder blir barn till .base */
+    slot { display: contents; }
+
+    :host([inline]) .base { --scb-stack-display: inline-flex; }
+
+    /* Barnens flex-beteende i row-läge kan styras via variabeln och defaultar till att inte ta full bredd */
+    :host([direction="row"]) ::slotted(*) {
+      flex: var(--scb-stack-item-flex, 0 0 auto);
+    }
+  `;
+	}
+	firstUpdated() {
+		this.#e();
+	}
+	updated() {
+		this.#e();
+	}
+	mapSpacingToken(e) {
+		if (!e) return;
+		let t = String(e).trim();
+		return /^\d+$/.test(t) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(t, 10)))})` : t;
+	}
+	parseGapShorthand(e) {
+		if (!e) return {};
+		let t = e.trim().split(/\s+/);
+		if (t.length === 1) {
+			let e = this.mapSpacingToken(t[0]);
+			return {
+				row: e,
+				col: e
+			};
+		}
+		return {
+			row: this.mapSpacingToken(t[0]),
+			col: this.mapSpacingToken(t[1])
+		};
+	}
+	#e() {
+		this.style.setProperty("--scb-stack-direction", this.direction);
+		let e = "var(--spacing-5, 16px)", t = this.parseGapShorthand(this.gap), n = this.mapSpacingToken(this.rowGap) ?? t.row ?? e, r = this.mapSpacingToken(this.columnGap) ?? t.col ?? e;
+		this.style.setProperty("--scb-stack-gap", `${n}`), this.style.setProperty("--scb-stack-row-gap", n), this.style.setProperty("--scb-stack-column-gap", r), this.style.setProperty("--scb-stack-align", {
+			start: "flex-start",
+			center: "center",
+			end: "flex-end",
+			stretch: "stretch",
+			baseline: "baseline"
+		}[this.align] ?? "stretch"), this.style.setProperty("--scb-stack-justify", {
+			start: "flex-start",
+			center: "center",
+			end: "flex-end",
+			between: "space-between",
+			around: "space-around",
+			evenly: "space-evenly"
+		}[this.justify] ?? "flex-start"), this.style.setProperty("--scb-stack-wrap", this.wrap ? "wrap" : "nowrap");
+	}
+	render() {
+		return r`<div class="base"><slot></slot></div>`;
+	}
+};
+e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "direction", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "gap", void 0), e([a({
+	type: String,
+	attribute: "row-gap",
+	reflect: !0
+})], o.prototype, "rowGap", void 0), e([a({
+	type: String,
+	attribute: "column-gap",
+	reflect: !0
+})], o.prototype, "columnGap", 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, "wrap", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], o.prototype, "inline", void 0), o = e([i("scb-stack")], o);
+//#endregion
+export { o as ScbStack };

package/scb-header/scb-header-menu-group.js

@@ -0,0 +1,21 @@
+//#region src/scb-test-components/scb-header/scb-header-menu-group.ts
+var e = class extends HTMLElement {
+	get label() {
+		return this.getAttribute("label") ?? "";
+	}
+	set label(e) {
+		this.setAttribute("label", e);
+	}
+	get icon() {
+		return this.getAttribute("icon") ?? void 0;
+	}
+	set icon(e) {
+		e == null || e === "" ? this.removeAttribute("icon") : this.setAttribute("icon", e);
+	}
+	connectedCallback() {
+		this.style.display = "none";
+	}
+};
+customElements.define("scb-header-menu-group", e);
+//#endregion
+export { e as ScbHeaderMenuGroup };

package/scb-header/scb-header-menu-item.js

@@ -0,0 +1,22 @@
+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-header/scb-header-menu-item.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.label = "", this.href = "";
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: none !important;
+    }
+  `;
+	}
+	render() {
+		return r`<slot></slot>`;
+	}
+};
+e([a({ type: String })], o.prototype, "label", void 0), e([a({ type: String })], o.prototype, "href", void 0), e([a({ type: String })], o.prototype, "icon", void 0), o = e([i("scb-header-menu-item")], o);
+//#endregion
+export { o as ScbHeaderMenuItem };

package/scb-header/scb-header-tab.js

@@ -0,0 +1,25 @@
+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-header/scb-header-tab.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.label = "", this.href = "", this.drawerId = "";
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: none !important;
+    }
+  `;
+	}
+	render() {
+		return r`<slot></slot>`;
+	}
+};
+e([a({ type: String })], o.prototype, "label", void 0), e([a({ type: String })], o.prototype, "href", void 0), e([a({
+	type: String,
+	attribute: "drawer-id"
+})], o.prototype, "drawerId", void 0), o = e([i("scb-header-tab")], o);
+//#endregion
+export { o as ScbHeaderTab };

package/scb-header/scb-header-utility.js

@@ -0,0 +1,27 @@
+//#region src/scb-test-components/scb-header/scb-header-utility.ts
+var e = class extends HTMLElement {
+	get label() {
+		return this.getAttribute("label") ?? "";
+	}
+	set label(e) {
+		this.setAttribute("label", e);
+	}
+	get href() {
+		return this.getAttribute("href") ?? "#";
+	}
+	set href(e) {
+		this.setAttribute("href", e);
+	}
+	get target() {
+		return this.getAttribute("target") ?? void 0;
+	}
+	set target(e) {
+		e == null ? this.removeAttribute("target") : this.setAttribute("target", e);
+	}
+	connectedCallback() {
+		this.style.display = "none";
+	}
+};
+customElements.define("scb-header-utility", e);
+//#endregion
+export { e as ScbHeaderUtility };