@plitzi/sdk-elements 0.33.1 → 0.34.0

package/dist/elements/basic/Heading/index.d.ts

@@ -2,143 +2,147 @@ declare const Heading: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Heading').HeadingProps>): import("react").JSX.Element;
     displayName: string;
 } & {
-    type: string;
-    content: {
-        attributes: {
-            content: string;
-            subType: string;
+    readonly type: "heading";
+    readonly content: {
+        readonly attributes: {
+            readonly content: "Heading";
+            readonly subType: "h1";
         };
-        definition: {
-            label: string;
-            type: string;
-            bindings: {};
-            styleSelectors: {
-                base: string;
+        readonly definition: {
+            readonly label: "Heading";
+            readonly type: "heading";
+            readonly description: "A section heading (<h1>–<h6>) for titles and document hierarchy.";
+            readonly bindings: {};
+            readonly styleSelectors: {
+                readonly base: "";
             };
-            initialState: {
-                visibility: boolean;
+            readonly initialState: {
+                readonly visibility: true;
             };
         };
-        builder: {
-            canDelete: boolean;
-            canSelect: boolean;
-            canDragDrop: boolean;
-            canMove: boolean;
-            canTemplate: boolean;
-            itemsAllowed: never[];
-            itemsNotAllowed: never[];
+        readonly builder: {
+            readonly canDelete: true;
+            readonly canSelect: true;
+            readonly canDragDrop: true;
+            readonly canMove: true;
+            readonly canTemplate: true;
+            readonly itemsAllowed: readonly [];
+            readonly itemsNotAllowed: readonly [];
         };
-        market: {
-            category: string;
-            owner: string;
-            verified: boolean;
-            license: string;
-            website: string;
-            backgroundColor: string;
-            icon: string;
+        readonly market: {
+            readonly category: "basic";
+            readonly owner: "Plitzi";
+            readonly verified: true;
+            readonly license: "MIT";
+            readonly website: "https://plitzi.com";
+            readonly backgroundColor: "#4422ee";
+            readonly icon: "fa-solid fa-heading";
         };
-        defaultStyle: {
-            name: string;
-            displayMode: string;
-            style: {
-                base: {
-                    default: {};
+        readonly defaultStyle: {
+            readonly name: "Heading";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {};
                 };
             };
-            subTypes: {
-                h1: {
-                    name: string;
-                    displayMode: string;
-                    style: {
-                        base: {
-                            default: {
-                                'margin-top': string;
-                                'margin-bottom': string;
-                                'font-size': string;
-                                'font-weight': number;
-                                'line-height': string;
+            readonly subTypes: {
+                readonly h1: {
+                    readonly name: "H1 Heading";
+                    readonly displayMode: "desktop";
+                    readonly style: {
+                        readonly base: {
+                            readonly default: {
+                                readonly 'margin-top': "25px";
+                                readonly 'margin-bottom': "25px";
+                                readonly 'font-size': "38px";
+                                readonly 'font-weight': 700;
+                                readonly 'line-height': "44px";
                             };
                         };
                     };
                 };
-                h2: {
-                    name: string;
-                    displayMode: string;
-                    style: {
-                        base: {
-                            default: {
-                                'margin-top': string;
-                                'margin-bottom': string;
-                                'font-size': string;
-                                'font-weight': number;
-                                'line-height': string;
+                readonly h2: {
+                    readonly name: "H2 Heading";
+                    readonly displayMode: "desktop";
+                    readonly style: {
+                        readonly base: {
+                            readonly default: {
+                                readonly 'margin-top': "25px";
+                                readonly 'margin-bottom': "25px";
+                                readonly 'font-size': "32px";
+                                readonly 'font-weight': 700;
+                                readonly 'line-height': "36px";
                             };
                         };
                     };
                 };
-                h3: {
-                    name: string;
-                    displayMode: string;
-                    style: {
-                        base: {
-                            default: {
-                                'margin-top': string;
-                                'margin-bottom': string;
-                                'font-size': string;
-                                'font-weight': number;
-                                'line-height': string;
+                readonly h3: {
+                    readonly name: "H3 Heading";
+                    readonly displayMode: "desktop";
+                    readonly style: {
+                        readonly base: {
+                            readonly default: {
+                                readonly 'margin-top': "25px";
+                                readonly 'margin-bottom': "25px";
+                                readonly 'font-size': "24px";
+                                readonly 'font-weight': 700;
+                                readonly 'line-height': "30px";
                             };
                         };
                     };
                 };
-                h4: {
-                    name: string;
-                    displayMode: string;
-                    style: {
-                        base: {
-                            default: {
-                                'margin-top': string;
-                                'margin-bottom': string;
-                                'font-size': string;
-                                'font-weight': number;
-                                'line-height': string;
+                readonly h4: {
+                    readonly name: "H4 Heading";
+                    readonly displayMode: "desktop";
+                    readonly style: {
+                        readonly base: {
+                            readonly default: {
+                                readonly 'margin-top': "25px";
+                                readonly 'margin-bottom': "25px";
+                                readonly 'font-size': "18px";
+                                readonly 'font-weight': 700;
+                                readonly 'line-height': "24px";
                             };
                         };
                     };
                 };
-                h5: {
-                    name: string;
-                    displayMode: string;
-                    style: {
-                        base: {
-                            default: {
-                                'margin-top': string;
-                                'margin-bottom': string;
-                                'font-size': string;
-                                'font-weight': number;
-                                'line-height': string;
+                readonly h5: {
+                    readonly name: "H5 Heading";
+                    readonly displayMode: "desktop";
+                    readonly style: {
+                        readonly base: {
+                            readonly default: {
+                                readonly 'margin-top': "25px";
+                                readonly 'margin-bottom': "25px";
+                                readonly 'font-size': "14px";
+                                readonly 'font-weight': 700;
+                                readonly 'line-height': "20px";
                             };
                         };
                     };
                 };
-                h6: {
-                    name: string;
-                    displayMode: string;
-                    style: {
-                        base: {
-                            default: {
-                                'margin-top': string;
-                                'margin-bottom': string;
-                                'font-size': string;
-                                'font-weight': number;
-                                'line-height': string;
+                readonly h6: {
+                    readonly name: "H6 Heading";
+                    readonly displayMode: "desktop";
+                    readonly style: {
+                        readonly base: {
+                            readonly default: {
+                                readonly 'margin-top': "25px";
+                                readonly 'margin-bottom': "25px";
+                                readonly 'font-size': "12px";
+                                readonly 'font-weight': 700;
+                                readonly 'line-height': "18px";
                             };
                         };
                     };
                 };
             };
         };
-        settings: {};
+        readonly settings: {};
     };
-};
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    content?: string | undefined;
+    subType?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+}>>;
 export default Heading;

package/dist/elements/basic/Heading/index.mjs

@@ -1,112 +1,6 @@
-import e from "./Heading.mjs";
+import e from "./declaration.mjs";
+import t from "./Heading.mjs";
 //#region src/elements/basic/Heading/index.ts
-var t = Object.assign(e, {
-	type: "heading",
-	content: {
-		attributes: {
-			content: "Heading",
-			subType: "h1"
-		},
-		definition: {
-			label: "Heading",
-			type: "heading",
-			bindings: {},
-			styleSelectors: { base: "" },
-			initialState: { visibility: !0 }
-		},
-		builder: {
-			canDelete: !0,
-			canSelect: !0,
-			canDragDrop: !0,
-			canMove: !0,
-			canTemplate: !0,
-			itemsAllowed: [],
-			itemsNotAllowed: []
-		},
-		market: {
-			category: "basic",
-			owner: "Plitzi",
-			verified: !0,
-			license: "MIT",
-			website: "https://plitzi.com",
-			backgroundColor: "#4422ee",
-			icon: "fa-solid fa-heading"
-		},
-		defaultStyle: {
-			name: "Heading",
-			displayMode: "desktop",
-			style: { base: { default: {} } },
-			subTypes: {
-				h1: {
-					name: "H1 Heading",
-					displayMode: "desktop",
-					style: { base: { default: {
-						"margin-top": "25px",
-						"margin-bottom": "25px",
-						"font-size": "38px",
-						"font-weight": 700,
-						"line-height": "44px"
-					} } }
-				},
-				h2: {
-					name: "H2 Heading",
-					displayMode: "desktop",
-					style: { base: { default: {
-						"margin-top": "25px",
-						"margin-bottom": "25px",
-						"font-size": "32px",
-						"font-weight": 700,
-						"line-height": "36px"
-					} } }
-				},
-				h3: {
-					name: "H3 Heading",
-					displayMode: "desktop",
-					style: { base: { default: {
-						"margin-top": "25px",
-						"margin-bottom": "25px",
-						"font-size": "24px",
-						"font-weight": 700,
-						"line-height": "30px"
-					} } }
-				},
-				h4: {
-					name: "H4 Heading",
-					displayMode: "desktop",
-					style: { base: { default: {
-						"margin-top": "25px",
-						"margin-bottom": "25px",
-						"font-size": "18px",
-						"font-weight": 700,
-						"line-height": "24px"
-					} } }
-				},
-				h5: {
-					name: "H5 Heading",
-					displayMode: "desktop",
-					style: { base: { default: {
-						"margin-top": "25px",
-						"margin-bottom": "25px",
-						"font-size": "14px",
-						"font-weight": 700,
-						"line-height": "20px"
-					} } }
-				},
-				h6: {
-					name: "H6 Heading",
-					displayMode: "desktop",
-					style: { base: { default: {
-						"margin-top": "25px",
-						"margin-bottom": "25px",
-						"font-size": "12px",
-						"font-weight": 700,
-						"line-height": "18px"
-					} } }
-				}
-			}
-		},
-		settings: {}
-	}
-});
+var n = Object.assign(t, e);
 //#endregion
-export { t as default };
+export { n as default };

package/dist/elements/basic/Link/Link.d.ts

@@ -6,8 +6,15 @@ export type LinkProps = {
     href?: string;
     target?: 'self' | 'blank' | 'parent' | 'top';
     mode?: 'page' | 'internal' | 'external';
+    /**
+     * What a screen reader announces instead of the link's contents.
+     *
+     * Worth setting on a link that wraps a whole card: with nothing here, the announced name is every word inside
+     * it — the topic, the headline, the standfirst, the byline and the button — read out as one link.
+     */
+    label?: string;
 };
-declare const Link: ({ ref, children, className, href, target, mode }: LinkProps) => import("react").JSX.Element;
+declare const Link: ({ ref, children, className, href, target, mode, label }: LinkProps) => import("react").JSX.Element;
 declare const _default: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<LinkProps>): import("react").JSX.Element;
     displayName: string;

package/dist/elements/basic/Link/Link.mjs

@@ -1,6 +1,6 @@
-import e from "../../../Element/hooks/useElement.mjs";
-import { RootElement as t } from "../../../Element/RootElement.mjs";
-import n from "../../../Element/hocs/withElement.mjs";
+import e from "../../../Element/hocs/withElement.mjs";
+import t from "../../../Element/hooks/useElement.mjs";
+import { RootElement as n } from "../../../Element/RootElement.mjs";
 import { useMemo as r } from "react";
 import i from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
 import { useSdkStore as a } from "@plitzi/sdk-shared/store";
@@ -9,64 +9,66 @@ import { jsx as s } from "react/jsx-runtime";
 import c from "clsx";
 import { getPageFullPath as l } from "@plitzi/sdk-navigation/NavigationHelper";
 //#region src/elements/basic/Link/Link.tsx
-var u = ({ ref: n, children: u, className: d = "", href: f = "#", target: p = "self", mode: m = "page" }) => {
-	let { style: h } = e(), { settings: { previewMode: g } } = i(), [[_, v, y, b, x]] = a([
+var u = ({ ref: e, children: u, className: d = "", href: f = "#", target: p = "self", mode: m = "page", label: h = "" }) => {
+	let { style: g } = t(), { settings: { previewMode: _ } } = i(), [[v, y, b, x, S]] = a([
 		"pageDefinitions",
 		"schema.pageFolders",
 		"navigation.routeParams",
 		"navigation.queryParams",
 		"navigation.navigate"
-	]), S = r(() => {
+	]), C = r(() => {
 		if (m === "external") return f;
 		let e = `/${f}`.replaceAll(/[/]+/gim, "/");
 		if (m === "internal") {
 			try {
 				let t = o(e, {
-					...b,
-					...y
+					...x,
+					...b
 				}, !0);
 				return typeof t == "string" ? t : e;
 			} catch {}
 			return e;
 		}
-		return l(_, v, f, !0);
+		return l(v, y, f, !0);
 	}, [
 		m,
 		f,
-		_,
 		v,
-		b,
-		y
-	]), C = (e) => {
-		g && (e.stopPropagation(), (m === "page" || m === "internal") && (e.preventDefault(), x(S)));
-	}, w = r(() => {
-		let e = {
-			ref: n,
-			style: h,
+		y,
+		x,
+		b
+	]), w = (e) => {
+		_ && (e.stopPropagation(), (m === "page" || m === "internal") && (e.preventDefault(), S(C)));
+	}, T = r(() => {
+		let t = {
+			ref: e,
+			style: g,
 			target: `_${p}`,
+			"aria-label": h || void 0,
 			className: c("plitzi-component__link", d)
 		};
-		return g ? {
-			...e,
-			href: S
+		return _ ? {
+			...t,
+			href: C
 		} : {
-			...e,
-			"href-disabled": S
+			...t,
+			"href-disabled": C
 		};
 	}, [
-		n,
-		h,
+		e,
+		g,
 		p,
+		h,
 		d,
-		g,
-		S
+		_,
+		C
 	]);
-	return /* @__PURE__ */ s(t, {
+	return /* @__PURE__ */ s(n, {
 		tag: "a",
-		...w,
-		onClick: C,
+		...T,
+		onClick: w,
 		children: u
 	});
-}, d = n(u);
+}, d = e(u);
 //#endregion
 export { u as Link, d as default };

package/dist/elements/basic/Link/declaration.d.ts

@@ -0,0 +1,66 @@
+import { LinkProps } from './Link';
+import { AuthorableAttributes } from '@plitzi/sdk-shared/authoring/declare';
+/** What this element can be authored with — its component's own props, minus what the runtime supplies. */
+export type LinkAttributes = AuthorableAttributes<LinkProps>;
+declare const declaration: {
+    readonly type: "link";
+    readonly content: {
+        readonly attributes: {
+            readonly href: "#";
+            readonly target: "self";
+            readonly mode: "page";
+            readonly label: "";
+        };
+        readonly definition: {
+            readonly label: "Link";
+            readonly type: "link";
+            readonly description: string;
+            readonly items: readonly [];
+            readonly bindings: {};
+            readonly styleSelectors: {
+                readonly base: "";
+            };
+            readonly initialState: {
+                readonly visibility: true;
+            };
+        };
+        readonly builder: {
+            readonly canDelete: true;
+            readonly canSelect: true;
+            readonly canDragDrop: true;
+            readonly canMove: true;
+            readonly canTemplate: true;
+            readonly itemsAllowed: readonly [];
+            readonly itemsNotAllowed: readonly ["link"];
+        };
+        readonly market: {
+            readonly category: "basic";
+            readonly owner: "Plitzi";
+            readonly verified: true;
+            readonly license: "MIT";
+            readonly website: "https://plitzi.com";
+            readonly backgroundColor: "#4422ee";
+            readonly icon: "fa-solid fa-link";
+        };
+        readonly defaultStyle: {
+            readonly name: "Link";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {
+                        readonly display: "inline-block";
+                        readonly color: "#333";
+                        readonly cursor: "pointer";
+                    };
+                };
+            };
+        };
+        readonly settings: {};
+    };
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    mode?: "page" | "internal" | "external" | undefined;
+    label?: string | undefined;
+    target?: "self" | "blank" | "parent" | "top" | undefined;
+    href?: string | undefined;
+}>>;
+export default declaration;

package/dist/elements/basic/Link/declaration.mjs

@@ -0,0 +1,52 @@
+import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
+//#region src/elements/basic/Link/declaration.ts
+var t = e()({
+	type: "link",
+	content: {
+		attributes: {
+			href: "#",
+			target: "self",
+			mode: "page",
+			label: ""
+		},
+		definition: {
+			label: "Link",
+			type: "link",
+			description: "Navigation. Moves the user between pages of the site or to an external URL (its `mode`/`href` decide which). Use this to go page-to-page rather than a button + interaction.",
+			items: [],
+			bindings: {},
+			styleSelectors: { base: "" },
+			initialState: { visibility: !0 }
+		},
+		builder: {
+			canDelete: !0,
+			canSelect: !0,
+			canDragDrop: !0,
+			canMove: !0,
+			canTemplate: !0,
+			itemsAllowed: [],
+			itemsNotAllowed: ["link"]
+		},
+		market: {
+			category: "basic",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee",
+			icon: "fa-solid fa-link"
+		},
+		defaultStyle: {
+			name: "Link",
+			displayMode: "desktop",
+			style: { base: { default: {
+				display: "inline-block",
+				color: "#333",
+				cursor: "pointer"
+			} } }
+		},
+		settings: {}
+	}
+});
+//#endregion
+export { t as default };