@palmyit/elements 0.0.0-stage → 0.1.3

package/README.md

@@ -1,3 +1,13 @@
-# Temporary Holding Version
+# @palmyit/elements
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Light-DOM `plmt-*` custom elements for Palmyit builder canvases and published sites.
+
+```bash
+yarn install
+yarn test
+yarn build
+```
+
+Published publicly to npmjs. Pages load the bundle from jsDelivr (see [docs/README.md](docs/README.md)).
+
+A push to `main` runs `.github/workflows/deploy-to-npmjs.yml`. Each commit bumps the patch version in `package.json`.

package/dist/manifest.json

@@ -0,0 +1,7 @@
+{
+  "version": "0.1.3",
+  "files": {
+    "plmt-elements.js": "sha384-xAOAhF/C23uI4I1e/PDqoE/3tBlgo8UnGIAZwl5Es97UFdIU7+SAmrOz+FTesabI",
+    "plmt-elements.css": "sha384-kGxdhMm1y5wip6vjhJMcCHnXbW+AH+tCFppuxHVfc2yuJtOQQ3wMr2nBVYHqGMK4"
+  }
+}

package/dist/plmt-elements.css

@@ -0,0 +1,2 @@
+plmt-page{--plmt-theme-font-family:system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--plmt-theme-font-size:16px;--plmt-theme-text-color:#334155;--plmt-theme-accent-color:#0f766e;--plmt-theme-accent-text:#0f766e;--plmt-theme-radius:.375rem;--plmt-theme-radius-full:9999px;--plmt-theme-space-2:.5rem;--plmt-theme-space-3:.75rem;--plmt-theme-button-height:2.5rem;--plmt-theme-button-bg:color-mix(in srgb, var(--plmt-theme-accent-color) 12%, transparent)}plmt-page,plmt-section,plmt-container,plmt-button,plmt-text,plmt-rich-text,plmt-image,plmt-video,plmt-list,plmt-icon,plmt-divider,plmt-table,plmt-text-field,plmt-text-area,plmt-checkbox,plmt-radio,plmt-select{box-sizing:border-box}plmt-page,plmt-section,plmt-container,plmt-text,plmt-rich-text,plmt-image,plmt-video,plmt-list,plmt-divider,plmt-table,plmt-text-field,plmt-text-area,plmt-checkbox,plmt-radio,plmt-select{display:block}plmt-button,plmt-icon{display:inline-flex}plmt-page{font-family:var(--palmyit-page-font-family,var(--plmt-theme-font-family));font-size:var(--palmyit-page-font-size,var(--plmt-theme-font-size));color:var(--palmyit-page-text-color,var(--plmt-theme-text-color));background-color:var(--palmyit-page-background-color,transparent);position:relative}plmt-section{overflow-x:var(--palmyit-section-overflow-x,auto);overflow-y:var(--palmyit-section-overflow-y,auto);width:var(--palmyit-section-width,auto);height:var(--palmyit-section-height,auto);min-width:var(--palmyit-section-min-width,auto);min-height:var(--palmyit-section-min-height,auto);max-width:var(--palmyit-section-max-width,none);max-height:var(--palmyit-section-max-height,none);padding-top:var(--palmyit-section-padding-top,0);padding-bottom:var(--palmyit-section-padding-bottom,0);padding-left:var(--palmyit-section-padding-left,0);padding-right:var(--palmyit-section-padding-right,0);margin-top:var(--palmyit-section-margin-top,0);margin-bottom:var(--palmyit-section-margin-bottom,0);margin-left:var(--palmyit-section-margin-left,0);margin-right:var(--palmyit-section-margin-right,0);border-top-left-radius:var(--palmyit-section-border-top-left-radius,0);border-top-right-radius:var(--palmyit-section-border-top-right-radius,0);border-bottom-right-radius:var(--palmyit-section-border-bottom-right-radius,0);border-bottom-left-radius:var(--palmyit-section-border-bottom-left-radius,0);border-width:var(--palmyit-section-border-width,0);border-style:var(--palmyit-section-border-style,none);border-color:var(--palmyit-section-border-color,transparent);background-color:var(--palmyit-section-background-color,transparent);background-image:var(--palmyit-section-background-image,none);flex-direction:column;display:flex}plmt-section[data-layout=flex]{flex-direction:var(--palmyit-section-flex-direction,row);flex-wrap:var(--palmyit-section-flex-wrap,nowrap);justify-content:var(--palmyit-section-justify-content,flex-start);align-items:var(--palmyit-section-align-items,stretch);align-content:var(--palmyit-section-align-content,stretch);row-gap:var(--palmyit-section-row-gap,0);column-gap:var(--palmyit-section-column-gap,0);display:flex}plmt-section[data-layout=grid]{grid-template-columns:var(--palmyit-section-grid-template-columns,none);row-gap:var(--palmyit-section-row-gap,0);column-gap:var(--palmyit-section-column-gap,0);display:grid}plmt-section[data-layout=flex]>*,plmt-section[data-layout=grid]>*{min-width:0}plmt-container{overflow-x:var(--palmyit-container-overflow-x,auto);overflow-y:var(--palmyit-container-overflow-y,auto);width:var(--palmyit-container-width,auto);height:var(--palmyit-container-height,auto);min-width:var(--palmyit-container-min-width,0);min-height:var(--palmyit-container-min-height,auto);max-width:var(--palmyit-container-max-width,none);max-height:var(--palmyit-container-max-height,none);padding-top:var(--palmyit-container-padding-top,0);padding-bottom:var(--palmyit-container-padding-bottom,0);padding-left:var(--palmyit-container-padding-left,0);padding-right:var(--palmyit-container-padding-right,0);margin-top:var(--palmyit-container-margin-top,0);margin-bottom:var(--palmyit-container-margin-bottom,0);margin-left:var(--palmyit-container-margin-left,0);margin-right:var(--palmyit-container-margin-right,0);border-top-left-radius:var(--palmyit-container-border-top-left-radius,0);border-top-right-radius:var(--palmyit-container-border-top-right-radius,0);border-bottom-right-radius:var(--palmyit-container-border-bottom-right-radius,0);border-bottom-left-radius:var(--palmyit-container-border-bottom-left-radius,0);border-width:var(--palmyit-container-border-width,0);border-style:var(--palmyit-container-border-style,none);border-color:var(--palmyit-container-border-color,transparent);background-color:var(--palmyit-container-background-color,transparent);background-image:var(--palmyit-container-background-image,none);box-sizing:border-box;flex-direction:column;display:flex}plmt-container[data-layout=flex]{flex-direction:var(--palmyit-container-flex-direction,row);flex-wrap:var(--palmyit-container-flex-wrap,nowrap);justify-content:var(--palmyit-container-justify-content,flex-start);align-items:var(--palmyit-container-align-items,stretch);align-content:var(--palmyit-container-align-content,stretch);row-gap:var(--palmyit-container-row-gap,0);column-gap:var(--palmyit-container-column-gap,0);display:flex}plmt-container[data-layout=grid]{grid-template-columns:var(--palmyit-container-grid-template-columns,none);row-gap:var(--palmyit-container-row-gap,0);column-gap:var(--palmyit-container-column-gap,0);display:grid}plmt-container[data-layout=flex]>*,plmt-container[data-layout=grid]>*{min-width:0}plmt-button{color:var(--palmyit-button-text-color,var(--plmt-theme-accent-text));font-family:var(--palmyit-button-font-family,var(--plmt-theme-font-family));font-size:var(--palmyit-button-font-size,var(--plmt-theme-font-size));gap:var(--palmyit-button-gap,var(--plmt-theme-space-2));border-width:var(--palmyit-button-border-width,0);border-style:var(--palmyit-button-border-style,solid);border-color:var(--palmyit-button-border-color,currentColor);border-top-left-radius:var(--palmyit-button-border-top-left-radius,max(var(--plmt-theme-radius), var(--plmt-theme-radius-full)));border-top-right-radius:var(--palmyit-button-border-top-right-radius,max(var(--plmt-theme-radius), var(--plmt-theme-radius-full)));border-bottom-right-radius:var(--palmyit-button-border-bottom-right-radius,max(var(--plmt-theme-radius), var(--plmt-theme-radius-full)));border-bottom-left-radius:var(--palmyit-button-border-bottom-left-radius,max(var(--plmt-theme-radius), var(--plmt-theme-radius-full)));padding-top:var(--palmyit-button-padding-top,0);padding-bottom:var(--palmyit-button-padding-bottom,0);padding-left:var(--palmyit-button-padding-left,var(--plmt-theme-space-3));padding-right:var(--palmyit-button-padding-right,var(--plmt-theme-space-3));margin-top:var(--palmyit-button-margin-top,0);margin-bottom:var(--palmyit-button-margin-bottom,0);margin-left:var(--palmyit-button-margin-left,0);margin-right:var(--palmyit-button-margin-right,0);width:var(--palmyit-button-width,auto);height:var(--palmyit-button-height,var(--plmt-theme-button-height));min-width:var(--palmyit-button-min-width,auto);min-height:var(--palmyit-button-min-height,auto);max-width:var(--palmyit-button-max-width,none);max-height:var(--palmyit-button-max-height,none);background-color:var(--plmt-theme-button-bg);justify-content:center;align-items:center}plmt-button[data-background]{background-color:var(--palmyit-button-background-color,transparent);background-image:var(--palmyit-button-background-image,none)}plmt-button>a,plmt-button>button{justify-content:center;align-items:center;gap:inherit;width:100%;height:100%;color:inherit;font:inherit;cursor:pointer;background:0 0;border:none;margin:0;padding:0;text-decoration:none;display:inline-flex}plmt-text{min-width:0}plmt-text>p{min-width:0;color:var(--palmyit-text-color,inherit);font-family:var(--palmyit-text-font-family,inherit);font-size:var(--palmyit-text-font-size,14px);font-style:var(--palmyit-text-font-style,normal);font-weight:var(--palmyit-text-font-weight,inherit);line-height:var(--palmyit-text-line-height,1.4);letter-spacing:var(--palmyit-text-letter-spacing,normal);word-spacing:var(--palmyit-text-word-spacing,normal);-webkit-text-decoration-line:var(--palmyit-text-text-decoration,none);text-decoration-line:var(--palmyit-text-text-decoration,none);text-align:var(--palmyit-text-text-align,start);text-transform:var(--palmyit-text-text-transform,none);white-space:pre-wrap;overflow-wrap:anywhere;margin:0}plmt-text a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}plmt-rich-text{min-width:0;color:inherit;font-size:14px;line-height:1.4}plmt-rich-text p,plmt-rich-text h2,plmt-rich-text h3,plmt-rich-text h4,plmt-rich-text ul,plmt-rich-text ol,plmt-rich-text blockquote{margin:0}plmt-rich-text h2{font-size:24px;line-height:1.3}plmt-rich-text h3{font-size:20px;line-height:1.3}plmt-rich-text h4{font-size:16px;line-height:1.4}plmt-rich-text ul,plmt-rich-text ol{padding-left:1.25em}plmt-rich-text a{color:inherit;text-decoration:underline}plmt-image{display:block}plmt-image>img,plmt-image>a>img{box-sizing:border-box;width:var(--palmyit-image-width,auto);height:var(--palmyit-image-height,auto);min-width:var(--palmyit-image-min-width,auto);min-height:var(--palmyit-image-min-height,auto);max-width:var(--palmyit-image-max-width,100%);max-height:var(--palmyit-image-max-height,none);border-width:var(--palmyit-image-border-width,0);border-style:var(--palmyit-image-border-style,solid);border-color:var(--palmyit-image-border-color,currentColor);border-top-left-radius:var(--palmyit-image-border-top-left-radius,0);border-top-right-radius:var(--palmyit-image-border-top-right-radius,0);border-bottom-right-radius:var(--palmyit-image-border-bottom-right-radius,0);border-bottom-left-radius:var(--palmyit-image-border-bottom-left-radius,0);display:block}plmt-image[data-background]>img,plmt-image[data-background]>a>img{background-color:var(--palmyit-image-background-color,transparent);background-image:var(--palmyit-image-background-image,none)}plmt-image>a{color:inherit;text-decoration:none;display:inline-block}plmt-video>video{width:100%;max-width:100%;height:auto;display:block}plmt-list>ul{overflow-wrap:anywhere;margin:0;padding-left:1.25em}plmt-icon{vertical-align:middle;justify-content:center;align-items:center;width:1em;height:1em;font-size:24px;line-height:0;display:inline-flex}plmt-divider{opacity:.35;border:none;border-top:1px solid;margin:.75em 0;display:block}plmt-divider[size="1"]{width:4rem}plmt-divider[size="2"]{width:8rem}plmt-divider[size="3"]{width:16rem}plmt-divider[size="4"],plmt-divider:not([size]){width:100%}plmt-table>table{border-collapse:collapse;width:100%}plmt-table th,plmt-table td{border:1px solid color-mix(in srgb, currentColor 20%, transparent);text-align:start;padding:.5em .75em}plmt-text-field,plmt-text-area,plmt-checkbox,plmt-radio,plmt-select{display:block}plmt-text-field label,plmt-text-area label,plmt-select label,plmt-checkbox label{flex-direction:column;gap:.25em;display:flex}plmt-text-field input,plmt-text-area textarea,plmt-select select{font:inherit;border:1px solid color-mix(in srgb, currentColor 25%, transparent);border-radius:var(--plmt-theme-radius);padding:.5em .75em}plmt-checkbox label{flex-direction:row;align-items:center;gap:.5em}plmt-radio fieldset{border:none;margin:0;padding:0}plmt-radio legend{margin-bottom:.5em}plmt-radio label{align-items:center;gap:.5em;margin-bottom:.25em;display:flex}
+/*$vite$:1*/

package/dist/plmt-elements.js

@@ -0,0 +1,115 @@
+// src/PlmtElement.ts
+var e = class extends HTMLElement {
+	static observedAttributes = [];
+	attributeChangedCallback(e, t, n) {
+		this.syncFromAttributes();
+	}
+	connectedCallback() {
+		this.syncFromAttributes();
+	}
+	syncFromAttributes() {}
+};
+function t(e, t) {
+	customElements.get(e) || customElements.define(e, t);
+}
+// src/elements/page/PlmtPage.ts
+var n = "a[href], button, input, textarea, select", r = class extends e {
+	static observedAttributes = ["editing"];
+	#e = (e) => {
+		if (!this.hasAttribute("editing")) return;
+		let t = e.target;
+		t instanceof Element && t.closest("a[href], button[type=\"submit\"]") && (e.preventDefault(), e.stopPropagation());
+	};
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("click", this.#e, !0);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("click", this.#e, !0);
+	}
+	syncFromAttributes() {
+		let e = this.hasAttribute("editing");
+		for (let t of this.querySelectorAll(n)) e ? this.#t(t) : this.#n(t);
+	}
+	#t(e) {
+		e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement ? (e.readOnly = !0, e.tabIndex = -1) : e instanceof HTMLSelectElement ? (e.setAttribute("aria-disabled", "true"), e.tabIndex = -1) : (e instanceof HTMLButtonElement || e instanceof HTMLAnchorElement) && (e.tabIndex = -1);
+	}
+	#n(e) {
+		e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement ? (e.readOnly = !1, e.removeAttribute("tabindex")) : e instanceof HTMLSelectElement ? (e.removeAttribute("aria-disabled"), e.removeAttribute("tabindex")) : (e instanceof HTMLButtonElement || e instanceof HTMLAnchorElement) && e.removeAttribute("tabindex");
+	}
+};
+t("plmt-page", r);
+// src/elements/section/PlmtSection.ts
+var i = class extends e {};
+t("plmt-section", i);
+// src/elements/container/PlmtContainer.ts
+var a = class extends e {};
+t("plmt-container", a);
+// src/elements/button/PlmtButton.ts
+var o = class extends e {};
+t("plmt-button", o);
+// src/elements/text/PlmtText.ts
+var s = class extends e {};
+t("plmt-text", s);
+// src/elements/rich-text/PlmtRichText.ts
+var c = class extends e {};
+t("plmt-rich-text", c);
+// src/elements/image/PlmtImage.ts
+var l = class extends e {};
+t("plmt-image", l);
+// src/elements/video/PlmtVideo.ts
+var u = class extends e {};
+t("plmt-video", u);
+// src/elements/list/PlmtList.ts
+var d = class extends e {};
+t("plmt-list", d);
+// src/elements/icon/PlmtIcon.ts
+var f = class extends e {
+	static observedAttributes = ["name", "label"];
+	syncFromAttributes() {
+		let e = this.getAttribute("label")?.trim() ?? "";
+		e ? (this.setAttribute("role", "img"), this.setAttribute("aria-label", e), this.removeAttribute("aria-hidden")) : (this.removeAttribute("role"), this.removeAttribute("aria-label"), this.setAttribute("aria-hidden", "true"));
+	}
+};
+t("plmt-icon", f);
+// src/elements/divider/PlmtDivider.ts
+var p = class extends e {};
+t("plmt-divider", p);
+// src/elements/table/PlmtTable.ts
+var m = class extends e {};
+t("plmt-table", m);
+// src/elements/text-field/PlmtTextField.ts
+var h = class extends e {};
+t("plmt-text-field", h);
+// src/elements/text-area/PlmtTextArea.ts
+var g = class extends e {};
+t("plmt-text-area", g);
+// src/elements/checkbox/PlmtCheckbox.ts
+var _ = class extends e {};
+t("plmt-checkbox", _);
+// src/elements/radio/PlmtRadio.ts
+var v = class extends e {};
+t("plmt-radio", v);
+// src/elements/select/PlmtSelect.ts
+var y = class extends e {};
+t("plmt-select", y);
+// src/tags.ts
+var b = [
+	"plmt-page",
+	"plmt-section",
+	"plmt-container",
+	"plmt-button",
+	"plmt-text",
+	"plmt-rich-text",
+	"plmt-image",
+	"plmt-video",
+	"plmt-list",
+	"plmt-icon",
+	"plmt-divider",
+	"plmt-table",
+	"plmt-text-field",
+	"plmt-text-area",
+	"plmt-checkbox",
+	"plmt-radio",
+	"plmt-select"
+];
+export { b as PLMT_TAGS, o as PlmtButton, _ as PlmtCheckbox, a as PlmtContainer, p as PlmtDivider, e as PlmtElement, f as PlmtIcon, l as PlmtImage, d as PlmtList, r as PlmtPage, v as PlmtRadio, c as PlmtRichText, i as PlmtSection, y as PlmtSelect, m as PlmtTable, s as PlmtText, g as PlmtTextArea, h as PlmtTextField, u as PlmtVideo, t as define };

package/dist/tags.json

@@ -0,0 +1,19 @@
+[
+  "plmt-page",
+  "plmt-section",
+  "plmt-container",
+  "plmt-button",
+  "plmt-text",
+  "plmt-rich-text",
+  "plmt-image",
+  "plmt-video",
+  "plmt-list",
+  "plmt-icon",
+  "plmt-divider",
+  "plmt-table",
+  "plmt-text-field",
+  "plmt-text-area",
+  "plmt-checkbox",
+  "plmt-radio",
+  "plmt-select"
+]

package/package.json

@@ -1,6 +1,45 @@
 {
   "name": "@palmyit/elements",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.3",
+  "description": "Palmyit plmt-* light-DOM web components for builder and published sites",
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chimejet/palmyit-elements"
+  },
+  "license": "ISC",
+  "author": "Stephen <sndegwa.n@outlook.com> (https://stevndegwa.github.io/)",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc -b && vite build && node scripts/write-manifest.mjs",
+    "test": "vitest run --exclude src/manifest.test.ts",
+    "test:watch": "vitest",
+    "test:manifest": "vitest run src/manifest.test.ts",
+    "prepublishOnly": "yarn build"
+  },
+  "exports": {
+    ".": "./dist/plmt-elements.js",
+    "./plmt-elements.css": "./dist/plmt-elements.css",
+    "./tags.json": "./dist/tags.json",
+    "./manifest.json": "./dist/manifest.json"
+  },
+  "jsdelivr": "dist/plmt-elements.js",
+  "unpkg": "dist/plmt-elements.js",
+  "sideEffects": true,
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "happy-dom": "^20.0.10",
+    "typescript": "~6.0.2",
+    "vite": "^8.3.0",
+    "vitest": "^5.0.0"
+  },
+  "engines": {
+    "node": ">=22.14.0"
+  }
+}