@plitzi/sdk-elements 0.37.9 → 0.38.1

package/dist/elements/advanced/NodeHtml/index.d.ts

@@ -25,7 +25,7 @@ declare const NodeHtml: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };
@@ -68,6 +68,8 @@ declare const NodeHtml: {
     slot?: string | undefined | undefined;
     title?: string | undefined | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
+    hidden?: boolean | undefined | undefined;
+    onScroll?: import('react').UIEventHandler<"span"> | undefined;
     onLoad?: import('react').ReactEventHandler<"span"> | undefined;
     onClick?: import('react').MouseEventHandler<"span"> | undefined;
     onPointerDown?: import('react').PointerEventHandler<"span"> | undefined;
@@ -276,7 +278,6 @@ declare const NodeHtml: {
     onGotPointerCaptureCapture?: import('react').PointerEventHandler<"span"> | undefined;
     onLostPointerCapture?: import('react').PointerEventHandler<"span"> | undefined;
     onLostPointerCaptureCapture?: import('react').PointerEventHandler<"span"> | undefined;
-    onScroll?: import('react').UIEventHandler<"span"> | undefined;
     onScrollCapture?: import('react').UIEventHandler<"span"> | undefined;
     onScrollEnd?: import('react').UIEventHandler<"span"> | undefined;
     onScrollEndCapture?: import('react').UIEventHandler<"span"> | undefined;
@@ -308,7 +309,6 @@ declare const NodeHtml: {
     dir?: string | undefined | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
     enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    hidden?: boolean | undefined | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
     translate?: "yes" | "no" | undefined | undefined;
     radioGroup?: string | undefined | undefined;

package/dist/elements/advanced/Reference/declaration.d.ts

@@ -27,7 +27,7 @@ declare const declaration: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

package/dist/elements/advanced/Reference/declaration.mjs

@@ -21,7 +21,7 @@ var t = e()({
 			canSelect: !0,
 			canDragDrop: !0,
 			canMove: !0,
-			canTemplate: !0,
+			canSnippet: !0,
 			itemsAllowed: [],
 			itemsNotAllowed: []
 		},

package/dist/elements/advanced/Reference/index.d.ts

@@ -26,7 +26,7 @@ declare const Reference: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

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

@@ -1,3 +1,4 @@
+import { IconPlacement } from '../../../Element/ElementWords';
 import { ReactNode, RefObject } from 'react';
 export type ButtonProps = {
     ref?: RefObject<HTMLElement>;
@@ -5,6 +6,13 @@ export type ButtonProps = {
     children?: ReactNode;
     contentPlacement?: 'before' | 'after';
     content?: string;
+    /**
+     * An icon beside the words, as Font Awesome classes — `'fa-solid fa-arrow-right'` — instead of a `fontAwesome`
+     * element inside. Decoration: the words (or `title`/`label`) name it. Its `icon` slot styles it.
+     */
+    icon?: string;
+    /** Which side of the words the icon sits on. */
+    iconPlacement?: IconPlacement;
     subType?: 'button' | 'submit' | 'reset';
     disabled?: boolean;
     /**
@@ -32,7 +40,7 @@ export type ButtonProps = {
      */
     label?: string;
 };
-declare const Button: ({ ref, className, children, contentPlacement, content, subType, disabled, ariaExpanded, ariaPressed, title, label }: ButtonProps) => import('react').JSX.Element;
+declare const Button: ({ ref, className, children, contentPlacement, content, icon, iconPlacement, subType, disabled, ariaExpanded, ariaPressed, title, label }: ButtonProps) => import('react').JSX.Element;
 declare const _default: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<ButtonProps>): import('react').JSX.Element;
     displayName: string;

package/dist/elements/basic/Button/Button.mjs

@@ -1,27 +1,39 @@
 import e from "../../../Element/hocs/withElement.mjs";
-import { RootElement as t } from "../../../Element/RootElement.mjs";
-import n from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { jsxs as r } from "react/jsx-runtime";
-import i from "clsx";
+import t from "../../../Element/hooks/useElement.mjs";
+import { RootElement as n } from "../../../Element/RootElement.mjs";
+import r from "../../../Element/ElementWords.mjs";
+import i from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import s from "clsx";
 //#region src/elements/basic/Button/Button.tsx
-var a = ({ ref: e, className: a = "", children: o, contentPlacement: s = "after", content: c = "Button", subType: l = "button", disabled: u = !1, ariaExpanded: d, ariaPressed: f, title: p, label: m }) => {
-	let { settings: { previewMode: h } } = n();
-	return /* @__PURE__ */ r(t, {
+var c = ({ ref: e, className: c = "", children: l, contentPlacement: u = "after", content: d = "Button", icon: f = "", iconPlacement: p = "before", subType: m = "button", disabled: h = !1, ariaExpanded: g, ariaPressed: _, title: v, label: y }) => {
+	let { settings: { previewMode: b } } = i(), { definition: { styleSelectors: x } } = t();
+	return /* @__PURE__ */ o(n, {
 		ref: e,
 		tag: "button",
-		type: h ? l : "button",
-		className: i("plitzi-component__button", a, { "container--empty--skip": !h && !o && c }),
-		disabled: u,
-		title: p || void 0,
-		"aria-label": m || void 0,
-		"aria-expanded": d,
-		"aria-pressed": f,
+		type: b ? m : "button",
+		className: s("plitzi-component__button", c, { "container--empty--skip": !b && !l && (d || f) }),
+		disabled: h,
+		title: v || void 0,
+		"aria-label": y || void 0,
+		"aria-expanded": g,
+		"aria-pressed": _,
 		children: [
-			s === "before" && c,
-			o,
-			s === "after" && c
+			u === "before" && /* @__PURE__ */ a(r, {
+				content: d,
+				icon: f,
+				iconPlacement: p,
+				iconClassName: x.icon
+			}),
+			l,
+			u === "after" && /* @__PURE__ */ a(r, {
+				content: d,
+				icon: f,
+				iconPlacement: p,
+				iconClassName: x.icon
+			})
 		]
 	});
-}, o = e(a);
+}, l = e(c);
 //#endregion
-export { a as Button, o as default };
+export { c as Button, l as default };

package/dist/elements/basic/Button/Settings.d.ts

@@ -1,11 +1,13 @@
 type SettingsProps = {
     content?: string;
     contentPlacement?: 'before' | 'after' | 'elements';
+    icon?: string;
+    iconPlacement?: 'before' | 'after';
     subType?: 'button' | 'reset' | 'submit';
     disabled?: boolean;
     title?: string;
     label?: string;
     onUpdate?: (key: string, value: string | number | boolean) => void;
 };
-declare const Settings: ({ content, contentPlacement, subType, disabled, title, label, onUpdate }: SettingsProps) => import('react').JSX.Element;
+declare const Settings: ({ content, contentPlacement, icon, iconPlacement, subType, disabled, title, label, onUpdate }: SettingsProps) => import('react').JSX.Element;
 export default Settings;

package/dist/elements/basic/Button/Settings.mjs

@@ -1,82 +1,88 @@
-import { useCallback as e } from "react";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import r from "@plitzi/plitzi-ui/Checkbox";
-import i from "@plitzi/plitzi-ui/Input";
-import a from "@plitzi/plitzi-ui/Select";
+import e from "../../../components/IconField/IconField.mjs";
+import { useCallback as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import i from "@plitzi/plitzi-ui/Checkbox";
+import a from "@plitzi/plitzi-ui/Input";
+import o from "@plitzi/plitzi-ui/Select";
 //#region src/elements/basic/Button/Settings.tsx
-var o = ({ content: o = "Button", contentPlacement: s = "after", subType: c = "button", disabled: l = !1, title: u = "", label: d = "", onUpdate: f }) => {
-	let p = e((e) => f?.("content", e), [f]), m = e((e) => f?.("contentPlacement", e), [f]), h = e((e) => f?.("subType", e), [f]), g = e((e) => f?.("title", e), [f]), _ = e((e) => f?.("label", e), [f]), v = e((e) => f?.("disabled", e.target.checked), [f]);
-	return /* @__PURE__ */ n("div", {
+var s = ({ content: s = "Button", contentPlacement: c = "after", icon: l = "", iconPlacement: u = "before", subType: d = "button", disabled: f = !1, title: p = "", label: m = "", onUpdate: h }) => {
+	let g = t((e) => h?.("content", e), [h]), _ = t((e) => h?.("contentPlacement", e), [h]), v = t((e) => h?.("subType", e), [h]), y = t((e) => h?.("title", e), [h]), b = t((e) => h?.("label", e), [h]), x = t((e) => h?.("disabled", e.target.checked), [h]);
+	return /* @__PURE__ */ r("div", {
 		className: "flex h-full flex-col gap-4 py-2",
 		children: [
-			/* @__PURE__ */ t(i, {
-				value: o,
+			/* @__PURE__ */ n(a, {
+				value: s,
 				label: "Content",
-				onChange: p,
+				onChange: g,
 				size: "xs"
 			}),
-			/* @__PURE__ */ t(i, {
-				value: u,
+			/* @__PURE__ */ n(a, {
+				value: p,
 				label: "Tooltip",
 				placeholder: "What the button does, for an icon-only one",
-				onChange: g,
+				onChange: y,
 				size: "xs"
 			}),
-			/* @__PURE__ */ t(i, {
-				value: d,
+			/* @__PURE__ */ n(a, {
+				value: m,
 				label: "Accessible Name",
 				placeholder: "When its words do not say what it does",
-				onChange: _,
+				onChange: b,
 				size: "xs"
 			}),
-			/* @__PURE__ */ n(a, {
-				value: s,
+			/* @__PURE__ */ r(o, {
+				value: c,
 				label: "Mode",
-				onChange: m,
+				onChange: _,
 				size: "xs",
 				children: [
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "before",
 						children: "Before Elements"
 					}),
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "after",
 						children: "After Elements"
 					}),
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "elements",
 						children: "Only Elements"
 					})
 				]
 			}),
-			/* @__PURE__ */ n(a, {
-				value: c,
+			/* @__PURE__ */ r(o, {
+				value: d,
 				label: "Button Type",
-				onChange: h,
+				onChange: v,
 				size: "xs",
 				children: [
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "button",
 						children: "Button"
 					}),
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "submit",
 						children: "Submit"
 					}),
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "reset",
 						children: "Reset"
 					})
 				]
 			}),
-			/* @__PURE__ */ t(r, {
-				checked: l,
+			/* @__PURE__ */ n(i, {
+				checked: f,
 				label: "Is Disabled",
-				onChange: v,
+				onChange: x,
 				size: "xs"
+			}),
+			/* @__PURE__ */ n(e, {
+				icon: l,
+				iconPlacement: u,
+				onUpdate: h
 			})
 		]
 	});
 };
 //#endregion
-export { o as default };
+export { s as default };

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

@@ -7,11 +7,14 @@ declare const declaration: {
     readonly attributeValues: {
         readonly subType: readonly string[];
         readonly contentPlacement: readonly string[];
+        readonly iconPlacement: readonly string[];
     };
     readonly content: {
         readonly attributes: {
             readonly contentPlacement: "after";
             readonly content: "Button";
+            readonly icon: "";
+            readonly iconPlacement: "before";
             readonly subType: "button";
             readonly disabled: false;
         };
@@ -23,6 +26,7 @@ declare const declaration: {
             readonly bindings: {};
             readonly styleSelectors: {
                 readonly base: "";
+                readonly icon: "";
             };
             readonly initialState: {
                 readonly visibility: true;
@@ -33,7 +37,7 @@ declare const declaration: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };
@@ -127,7 +131,9 @@ declare const declaration: {
     title?: string | undefined;
     content?: string | undefined;
     disabled?: boolean | undefined;
+    icon?: string | undefined;
     subType?: "button" | "submit" | "reset" | undefined;
+    iconPlacement?: import('../../../Element/ElementWords').IconPlacement | undefined;
     contentPlacement?: "before" | "after" | undefined;
     ariaExpanded?: boolean | undefined;
     ariaPressed?: boolean | undefined;

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

@@ -8,22 +8,28 @@ var n = e()({
 			"submit",
 			"reset"
 		]),
-		contentPlacement: t()(["before", "after"])
+		contentPlacement: t()(["before", "after"]),
+		iconPlacement: t()(["before", "after"])
 	},
 	content: {
 		attributes: {
 			contentPlacement: "after",
 			content: "Button",
+			icon: "",
+			iconPlacement: "before",
 			subType: "button",
 			disabled: !1
 		},
 		definition: {
 			label: "Button",
 			type: "button",
-			description: "A clickable button. On its own it only renders; wire an interaction flow (trigger onClick → callbacks) to make it DO something.",
+			description: "A clickable button. On its own it only renders; wire an interaction flow (trigger onClick → callbacks) to make it DO something. Its words are its `content` and an icon beside them its `icon` (Font Awesome classes) — no text or fontAwesome element inside it for them.",
 			items: [],
 			bindings: {},
-			styleSelectors: { base: "" },
+			styleSelectors: {
+				base: "",
+				icon: ""
+			},
 			initialState: { visibility: !0 }
 		},
 		builder: {
@@ -31,7 +37,7 @@ var n = e()({
 			canSelect: !0,
 			canDragDrop: !0,
 			canMove: !0,
-			canTemplate: !0,
+			canSnippet: !0,
 			itemsAllowed: [],
 			itemsNotAllowed: []
 		},

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

@@ -6,11 +6,14 @@ declare const Button: {
     readonly attributeValues: {
         readonly subType: readonly string[];
         readonly contentPlacement: readonly string[];
+        readonly iconPlacement: readonly string[];
     };
     readonly content: {
         readonly attributes: {
             readonly contentPlacement: "after";
             readonly content: "Button";
+            readonly icon: "";
+            readonly iconPlacement: "before";
             readonly subType: "button";
             readonly disabled: false;
         };
@@ -22,6 +25,7 @@ declare const Button: {
             readonly bindings: {};
             readonly styleSelectors: {
                 readonly base: "";
+                readonly icon: "";
             };
             readonly initialState: {
                 readonly visibility: true;
@@ -32,7 +36,7 @@ declare const Button: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };
@@ -126,7 +130,9 @@ declare const Button: {
     title?: string | undefined;
     content?: string | undefined;
     disabled?: boolean | undefined;
+    icon?: string | undefined;
     subType?: "button" | "submit" | "reset" | undefined;
+    iconPlacement?: import('../../../Element/ElementWords').IconPlacement | undefined;
     contentPlacement?: "before" | "after" | undefined;
     ariaExpanded?: boolean | undefined;
     ariaPressed?: boolean | undefined;

package/dist/elements/basic/Dropdown/DropdownPopup/declaration.d.ts

@@ -23,7 +23,7 @@ declare const declaration: {
             readonly canSelect: true;
             readonly canDragDrop: false;
             readonly canMove: false;
-            readonly canTemplate: false;
+            readonly canSnippet: false;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

package/dist/elements/basic/Dropdown/DropdownPopup/declaration.mjs

@@ -19,7 +19,7 @@ var t = e()({
 			canSelect: !0,
 			canDragDrop: !1,
 			canMove: !1,
-			canTemplate: !1,
+			canSnippet: !1,
 			itemsAllowed: [],
 			itemsNotAllowed: []
 		},

package/dist/elements/basic/Dropdown/DropdownPopup/index.d.ts

@@ -22,7 +22,7 @@ declare const DropdownPopup: {
             readonly canSelect: true;
             readonly canDragDrop: false;
             readonly canMove: false;
-            readonly canTemplate: false;
+            readonly canSnippet: false;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

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

@@ -37,7 +37,7 @@ declare const declaration: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

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

@@ -36,7 +36,7 @@ var n = e()({
 			canSelect: !0,
 			canDragDrop: !0,
 			canMove: !0,
-			canTemplate: !0,
+			canSnippet: !0,
 			itemsAllowed: [],
 			itemsNotAllowed: []
 		},

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

@@ -27,7 +27,7 @@ declare const Dropdown: {
                     readonly canSelect: true;
                     readonly canDragDrop: false;
                     readonly canMove: false;
-                    readonly canTemplate: false;
+                    readonly canSnippet: false;
                     readonly itemsAllowed: readonly [];
                     readonly itemsNotAllowed: readonly [];
                 };
@@ -104,7 +104,7 @@ declare const Dropdown: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

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

@@ -29,7 +29,7 @@ declare const declaration: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

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

@@ -28,7 +28,7 @@ var n = e()({
 			canSelect: !0,
 			canDragDrop: !0,
 			canMove: !0,
-			canTemplate: !0,
+			canSnippet: !0,
 			itemsAllowed: [],
 			itemsNotAllowed: []
 		},

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

@@ -28,7 +28,7 @@ declare const Heading: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

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

@@ -1,3 +1,4 @@
+import { IconPlacement } from '../../../Element/ElementWords';
 import { ReactNode, RefObject } from 'react';
 export type LinkProps = {
     ref?: RefObject<HTMLElement>;
@@ -6,6 +7,11 @@ export type LinkProps = {
     href?: string;
     target?: 'self' | 'blank' | 'parent' | 'top';
     mode?: 'page' | 'internal' | 'external';
+    /**
+     * A section of the page it goes to: the `anchor` of an element there, without the `#`. `/pricing` and `hash: 'plans'`
+     * land on `/pricing#plans`, scrolled to that element. Read in `page` and `internal` modes.
+     */
+    hash?: string;
     /**
      * What a screen reader announces instead of the link's contents.
      *
@@ -13,8 +19,21 @@ export type LinkProps = {
      * it — the topic, the headline, the standfirst, the byline and the button — read out as one link.
      */
     label?: string;
+    /**
+     * The link's own words — `Pricing` — drawn without a text element inside it, so a link that says something is one
+     * element rather than two. Beside its children when it has any, where `contentPlacement` says.
+     */
+    content?: string;
+    contentPlacement?: 'before' | 'after';
+    /**
+     * An icon beside the words, as Font Awesome classes — `'fa-solid fa-arrow-right'` — instead of a `fontAwesome`
+     * element inside. Decoration: the words (or `title`/`label`) name it. Its `icon` slot styles it.
+     */
+    icon?: string;
+    /** Which side of the words the icon sits on. */
+    iconPlacement?: IconPlacement;
 };
-declare const Link: ({ ref, children, className, href, target, mode, label }: LinkProps) => import('react').JSX.Element;
+declare const Link: ({ ref, children, className, href, target, mode, hash, label, content, contentPlacement, icon, iconPlacement }: LinkProps) => import('react').JSX.Element;
 declare const _default: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<LinkProps>): import('react').JSX.Element;
     displayName: string;