@plitzi/sdk-elements 0.37.2 → 0.37.4

package/dist/elements/form/FormControl/inputs/useFocusWhenShown.mjs

@@ -0,0 +1,9 @@
+import { useEffect as e } from "react";
+//#region src/elements/form/FormControl/inputs/useFocusWhenShown.ts
+var t = (t, n) => {
+	e(() => {
+		n && t.current?.focus();
+	}, [t, n]);
+};
+//#endregion
+export { t as default };

package/dist/elements/index.d.ts

@@ -22,6 +22,7 @@ import { default as FontAwesome } from './media/FontAwesome';
 import { default as Image } from './media/Image';
 import { default as Video } from './media/Video';
 import { default as ApiContainer } from './provider/ApiContainer';
+import { default as Channel } from './provider/Channel';
 import { default as Container } from './structure/Container';
 import { default as DialogContainer } from './structure/DialogContainer';
 import { default as List } from './structure/List';
@@ -51,10 +52,11 @@ export * from './media/FontAwesome';
 export * from './media/Image';
 export * from './media/Video';
 export * from './provider/ApiContainer';
+export * from './provider/Channel';
 export * from './structure/Container';
 export * from './structure/DialogContainer';
 export * from './structure/List';
 export * from './structure/ModalContainer';
 export * from './structure/Pagination';
 export * from './structure/TabContainer';
-export { NodeHtml, Dropdown, NotFound, Loading, Custom, Reference, BlockHtml, BlockJsx, Page, Container, LayoutContainer, DialogContainer, ModalContainer, TabContainer, Heading, Image, Video, FontAwesome, Button, Paragraph, RichText, Text, ThemeToggle, List, Link, Markdown, Pagination, Form, FormControl, ApiContainer };
+export { NodeHtml, Dropdown, NotFound, Loading, Custom, Reference, BlockHtml, BlockJsx, Page, Container, LayoutContainer, DialogContainer, ModalContainer, TabContainer, Heading, Image, Video, FontAwesome, Button, Paragraph, RichText, Text, ThemeToggle, List, Link, Markdown, Pagination, Form, FormControl, ApiContainer, Channel };

package/dist/elements/index.mjs

@@ -23,21 +23,23 @@ import x from "./media/FontAwesome/index.mjs";
 import S from "./media/Image/index.mjs";
 import C from "./media/Video/index.mjs";
 import w from "./provider/ApiContainer/index.mjs";
-import T from "./structure/Container/index.mjs";
-import E from "./structure/DialogContainer/index.mjs";
-import D from "./structure/List/index.mjs";
-import O from "./structure/ModalContainer/index.mjs";
-import k from "./structure/Pagination/index.mjs";
-import A from "./structure/TabContainer/index.mjs";
+import T from "./provider/Channel/index.mjs";
+import E from "./structure/Container/index.mjs";
+import D from "./structure/DialogContainer/index.mjs";
+import O from "./structure/List/index.mjs";
+import k from "./structure/ModalContainer/index.mjs";
+import A from "./structure/Pagination/index.mjs";
+import j from "./structure/TabContainer/index.mjs";
 //#region src/elements/index.ts
-var j = /* @__PURE__ */ e({
+var M = /* @__PURE__ */ e({
 	ApiContainer: () => w,
 	BlockHtml: () => t,
 	BlockJsx: () => n,
 	Button: () => o,
-	Container: () => T,
+	Channel: () => T,
+	Container: () => E,
 	Custom: () => r,
-	DialogContainer: () => E,
+	DialogContainer: () => D,
 	Dropdown: () => s,
 	FontAwesome: () => x,
 	Form: () => h,
@@ -46,21 +48,21 @@ var j = /* @__PURE__ */ e({
 	Image: () => S,
 	LayoutContainer: () => _,
 	Link: () => l,
-	List: () => D,
+	List: () => O,
 	Loading: () => v,
 	Markdown: () => u,
-	ModalContainer: () => O,
+	ModalContainer: () => k,
 	NodeHtml: () => i,
 	NotFound: () => y,
 	Page: () => b,
-	Pagination: () => k,
+	Pagination: () => A,
 	Paragraph: () => d,
 	Reference: () => a,
 	RichText: () => f,
-	TabContainer: () => A,
+	TabContainer: () => j,
 	Text: () => p,
 	ThemeToggle: () => m,
 	Video: () => C
 });
 //#endregion
-export { w as ApiContainer, t as BlockHtml, n as BlockJsx, o as Button, T as Container, r as Custom, E as DialogContainer, s as Dropdown, x as FontAwesome, h as Form, g as FormControl, c as Heading, S as Image, _ as LayoutContainer, l as Link, D as List, v as Loading, u as Markdown, O as ModalContainer, i as NodeHtml, y as NotFound, b as Page, k as Pagination, d as Paragraph, a as Reference, f as RichText, A as TabContainer, p as Text, m as ThemeToggle, C as Video, j as elements_exports };
+export { w as ApiContainer, t as BlockHtml, n as BlockJsx, o as Button, T as Channel, E as Container, r as Custom, D as DialogContainer, s as Dropdown, x as FontAwesome, h as Form, g as FormControl, c as Heading, S as Image, _ as LayoutContainer, l as Link, O as List, v as Loading, u as Markdown, k as ModalContainer, i as NodeHtml, y as NotFound, b as Page, A as Pagination, d as Paragraph, a as Reference, f as RichText, j as TabContainer, p as Text, m as ThemeToggle, C as Video, M as elements_exports };

package/dist/elements/internal/LayoutContainer/declaration.d.ts

@@ -4,6 +4,9 @@ import { AuthorableAttributes } from '@plitzi/sdk-shared/authoring/declare';
 export type LayoutContainerAttributes = AuthorableAttributes<LayoutContainerProps>;
 declare const declaration: {
     readonly type: "layoutContainer";
+    readonly attributeValues: {
+        readonly subType: readonly string[];
+    };
     readonly content: {
         readonly attributes: {
             readonly subType: "div";

package/dist/elements/internal/LayoutContainer/declaration.mjs

@@ -1,7 +1,19 @@
-import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
+import { elementDeclaration as e, valuesOf as t } from "@plitzi/sdk-shared/authoring/declare";
 //#region src/elements/internal/LayoutContainer/declaration.ts
-var t = e()({
+var n = e()({
 	type: "layoutContainer",
+	attributeValues: { subType: t()([
+		"div",
+		"header",
+		"footer",
+		"nav",
+		"main",
+		"section",
+		"article",
+		"aside",
+		"address",
+		"figure"
+	]) },
 	content: {
 		attributes: { subType: "div" },
 		definition: {
@@ -41,4 +53,4 @@ var t = e()({
 	}
 });
 //#endregion
-export { t as default };
+export { n as default };

package/dist/elements/internal/LayoutContainer/index.d.ts

@@ -3,6 +3,9 @@ declare const LayoutContainer: {
     displayName: string;
 } & {
     readonly type: "layoutContainer";
+    readonly attributeValues: {
+        readonly subType: readonly string[];
+    };
     readonly content: {
         readonly attributes: {
             readonly subType: "div";

package/dist/elements/media/FontAwesome/FontAwesome.d.ts

@@ -5,8 +5,15 @@ export type FontAwesomeProps = {
     icon?: string;
     size?: string;
     iconAnimation?: string;
+    /**
+     * What the icon means, for an icon that says something on its own — a status, a rating, a warning with no words
+     * beside it. Left empty, the icon is decoration and is hidden from screen readers and browser agents: a glyph from
+     * an icon font reads as a private-use character, which is noise at best. An icon inside a button or a link is named
+     * by that button or link (its text or its `title`), never here.
+     */
+    label?: string;
 };
-declare const FontAwesome: ({ ref, className, icon, size, iconAnimation }: FontAwesomeProps) => import('react').JSX.Element;
+declare const FontAwesome: ({ ref, className, icon, size, iconAnimation, label }: FontAwesomeProps) => import('react').JSX.Element;
 declare const _default: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<FontAwesomeProps>): import('react').JSX.Element;
     displayName: string;

package/dist/elements/media/FontAwesome/FontAwesome.mjs

@@ -3,10 +3,17 @@ import { RootElement as t } from "../../../Element/RootElement.mjs";
 import { jsx as n } from "react/jsx-runtime";
 import r from "clsx";
 //#region src/elements/media/FontAwesome/FontAwesome.tsx
-var i = ({ ref: e, className: i = "", icon: a = "fas fa-flag", size: o = "fa-1x", iconAnimation: s = "" }) => /* @__PURE__ */ n(t, {
-	ref: e,
-	tag: "i",
-	className: r("plitzi-component__fontawesome", i, a, o, s)
-}), a = e(i);
+var i = ({ ref: e, className: i = "", icon: a = "fas fa-flag", size: o = "fa-1x", iconAnimation: s = "", label: c = "" }) => {
+	let l = c ? {
+		role: "img",
+		"aria-label": c
+	} : { "aria-hidden": !0 };
+	return /* @__PURE__ */ n(t, {
+		ref: e,
+		tag: "i",
+		className: r("plitzi-component__fontawesome", i, a, o, s),
+		...l
+	});
+}, a = e(i);
 //#endregion
 export { i as FontAwesome, a as default };

package/dist/elements/media/FontAwesome/Settings.d.ts

@@ -2,7 +2,8 @@ type SettingsProps = {
     icon?: string;
     size?: 'fa-1x' | 'fa-2x' | 'fa-3x' | 'fa-4x';
     iconAnimation?: string;
+    label?: string;
     onUpdate?: (key: string, value: string | boolean | number) => void;
 };
-declare const Settings: ({ icon, size, iconAnimation, onUpdate }: SettingsProps) => import('react').JSX.Element;
+declare const Settings: ({ icon, size, iconAnimation, label, onUpdate }: SettingsProps) => import('react').JSX.Element;
 export default Settings;

package/dist/elements/media/FontAwesome/Settings.mjs

@@ -4,13 +4,13 @@ import o from "clsx";
 import s from "@plitzi/plitzi-ui/Input";
 import c from "@plitzi/plitzi-ui/Select";
 //#region src/elements/media/FontAwesome/Settings.tsx
-var l = ({ icon: l = "", size: u = "fa-1x", iconAnimation: d = "", onUpdate: f }) => {
-	let [p, m] = r({}), [h, g] = r(""), [_, v] = r(!1), [y, b] = r(""), x = e((e) => () => f?.("icon", e), [f]), S = n(() => Object.keys(p).map((e) => {
-		let { styles: t, label: n } = p[e];
-		if (!n.toLowerCase().includes(y.toLowerCase())) return [];
+var l = ({ icon: l = "", size: u = "fa-1x", iconAnimation: d = "", label: f = "", onUpdate: p }) => {
+	let [m, h] = r({}), [g, _] = r(""), [v, y] = r(!1), [b, x] = r(""), S = e((e) => () => p?.("icon", e), [p]), C = n(() => Object.keys(m).map((e) => {
+		let { styles: t, label: n } = m[e];
+		if (!n.toLowerCase().includes(b.toLowerCase())) return [];
 		let r = [];
 		return t.forEach((t) => {
-			if (h !== "" && t !== h) return;
+			if (g !== "" && t !== g) return;
 			let a = "fa";
 			switch (t) {
 				case "brands":
@@ -24,34 +24,41 @@ var l = ({ icon: l = "", size: u = "fa-1x", iconAnimation: d = "", onUpdate: f }
 			let s = `${a} fa-${e}`;
 			r.push(/* @__PURE__ */ i("div", {
 				className: o("flex h-6 w-6 cursor-pointer items-center justify-center rounded-md p-1 hover:bg-blue-200 hover:text-white", { "bg-[#339af0] text-white": s === l }),
-				onClick: x(s),
+				onClick: S(s),
 				title: `${n} - [${e}]`,
 				children: /* @__PURE__ */ i("i", { className: s }, `${e}_${a}`)
 			}, s));
 		}), r;
 	}), [
 		l,
-		p,
-		y,
-		h,
-		x
-	]), C = async () => {
-		v(!0);
+		m,
+		b,
+		g,
+		S
+	]), w = async () => {
+		y(!0);
 		let e = await fetch("https://raw.githubusercontent.com/FortAwesome/Font-Awesome/6.x/metadata/icons.json");
-		m(await e.json()), v(!1);
+		h(await e.json()), y(!1);
 	};
 	t(() => {
-		C();
+		w();
 	}, []);
-	let w = e((e) => b(e), []), T = e((e) => (t) => f?.(e, t), [f]), E = e((e) => g(e), []);
+	let T = e((e) => x(e), []), E = e((e) => (t) => p?.(e, t), [p]), D = e((e) => _(e), []);
 	return /* @__PURE__ */ a("div", {
 		className: "flex grow basis-0 flex-col gap-4 py-2",
 		children: [
+			/* @__PURE__ */ i(s, {
+				value: f,
+				label: "Meaning",
+				placeholder: "Only for an icon that says something alone",
+				onChange: E("label"),
+				size: "xs"
+			}),
 			/* @__PURE__ */ a(c, {
-				value: h,
+				value: g,
 				placeholder: "All",
 				label: "Icon Type",
-				onChange: E,
+				onChange: D,
 				size: "xs",
 				children: [
 					/* @__PURE__ */ i("option", {
@@ -72,7 +79,7 @@ var l = ({ icon: l = "", size: u = "fa-1x", iconAnimation: d = "", onUpdate: f }
 				label: "Icon Animation",
 				value: d,
 				placeholder: "None",
-				onChange: T("iconAnimation"),
+				onChange: E("iconAnimation"),
 				size: "xs",
 				children: [
 					/* @__PURE__ */ i("option", {
@@ -108,7 +115,7 @@ var l = ({ icon: l = "", size: u = "fa-1x", iconAnimation: d = "", onUpdate: f }
 			/* @__PURE__ */ a(c, {
 				value: u,
 				label: "Icon Size",
-				onChange: T("size"),
+				onChange: E("size"),
 				size: "xs",
 				children: [
 					/* @__PURE__ */ i("option", {
@@ -130,16 +137,16 @@ var l = ({ icon: l = "", size: u = "fa-1x", iconAnimation: d = "", onUpdate: f }
 				]
 			}),
 			/* @__PURE__ */ i(s, {
-				value: y,
+				value: b,
 				placeholder: "Search Icon...",
-				onChange: w,
+				onChange: T,
 				size: "xs"
 			}),
 			/* @__PURE__ */ i("div", {
 				className: "flex grow basis-0 flex-col overflow-auto py-2",
 				children: /* @__PURE__ */ a("div", {
 					className: "flex flex-wrap items-center justify-center gap-1",
-					children: [_ && /* @__PURE__ */ i("i", { className: "fa-solid fa-sync fa-spin fa-3x" }), !_ && S]
+					children: [v && /* @__PURE__ */ i("i", { className: "fa-solid fa-sync fa-spin fa-3x" }), !v && C]
 				})
 			})
 		]

package/dist/elements/media/FontAwesome/declaration.d.ts

@@ -56,6 +56,7 @@ declare const declaration: {
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
     size?: string | undefined;
+    label?: string | undefined;
     icon?: string | undefined;
     iconAnimation?: string | undefined;
 }>>;

package/dist/elements/media/FontAwesome/index.d.ts

@@ -55,6 +55,7 @@ declare const FontAwesome: {
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
     size?: string | undefined;
+    label?: string | undefined;
     icon?: string | undefined;
     iconAnimation?: string | undefined;
 }>>;

package/dist/elements/media/Image/Image.d.ts

@@ -3,11 +3,22 @@ export type ImageProps = {
     ref?: RefObject<HTMLElement>;
     className?: string;
     src?: string;
+    /**
+     * What the picture shows, in words — read by screen readers and browser agents in its place, and shown when it
+     * cannot load. Say what it is for on this page, not what file it is: "Maya presenting the roadmap", not "photo".
+     */
     alt?: string;
+    /**
+     * A picture that adds nothing the words around it do not already say — a texture, an ornament, a photo beside a
+     * caption that describes it. It is left out of what assistive technology reads (`alt=""`), whatever `alt` says,
+     * and the linter stops asking for a description.
+     */
+    decorative?: boolean;
     fetchPriority?: 'high' | 'low' | 'auto';
-    loadMode?: 'eager' | 'lazy';
+    /** `auto` leaves the choice to the browser — what the builder offers first. */
+    loadMode?: 'auto' | 'eager' | 'lazy';
 };
-declare const Image: ({ ref, className, src: srcProp, alt, fetchPriority, loadMode }: ImageProps) => import('react').JSX.Element;
+declare const Image: ({ ref, className, src: srcProp, alt: altProp, decorative, fetchPriority, loadMode }: ImageProps) => import('react').JSX.Element;
 declare const _default: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<ImageProps>): import('react').JSX.Element;
     displayName: string;

package/dist/elements/media/Image/Image.mjs

@@ -1,37 +1,37 @@
 import e from "../../../Element/hocs/withElement.mjs";
 import { RootElement as t } from "../../../Element/RootElement.mjs";
 import { getFallbackSVGBase64 as n } from "./ImageHelper.mjs";
-import { useCallback as r } from "react";
-import i from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { jsx as a } from "react/jsx-runtime";
-import o from "clsx";
+import { useCallback as r, useState as i } from "react";
+import a from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { jsx as o } from "react/jsx-runtime";
+import s from "clsx";
 //#region src/elements/media/Image/Image.tsx
-var s = n(), c = "https://cdn.plitzi.com/resources/img/placeholder-img.svg", l = ({ ref: e, className: n = "", src: l, alt: u = "", fetchPriority: d = "auto", loadMode: f }) => {
-	let { settings: { previewMode: p } } = i(), m = l || c, h = r((e) => {
-		e.currentTarget.onerror = null, e.currentTarget.src = s;
-	}, []);
-	return p ? /* @__PURE__ */ a(t, {
+var c = n(), l = "https://cdn.plitzi.com/resources/img/placeholder-img.svg", u = ({ ref: e, className: n = "", src: u, alt: d = "", decorative: f = !1, fetchPriority: p = "auto", loadMode: m }) => {
+	let { settings: { previewMode: h } } = a(), g = u || l, _ = f ? "" : d, [v, y] = i(void 0), b = v === g, x = r(() => y(g), [g]), S = b ? c : g, C = b ? { "data-plitzi-failed": g } : {}, w = m === "auto" ? void 0 : m;
+	return h ? /* @__PURE__ */ o(t, {
 		tag: "img",
 		draggable: !1,
 		ref: e,
-		className: o("plitzi-component__image", n),
-		src: m,
-		alt: u,
-		loading: f,
-		fetchPriority: d,
-		onError: h
-	}) : /* @__PURE__ */ a(t, {
+		className: s("plitzi-component__image", n),
+		src: S,
+		alt: _,
+		loading: w,
+		fetchPriority: p,
+		onError: b ? void 0 : x,
+		...C
+	}) : /* @__PURE__ */ o(t, {
 		ref: e,
-		className: o("plitzi-component__image image--edit-mode", n),
-		children: /* @__PURE__ */ a("img", {
+		className: s("plitzi-component__image image--edit-mode", n),
+		children: /* @__PURE__ */ o("img", {
 			draggable: !1,
-			src: m,
-			alt: u,
-			loading: f,
-			fetchPriority: d,
-			onError: h
+			src: S,
+			alt: _,
+			loading: w,
+			fetchPriority: p,
+			onError: b ? void 0 : x,
+			...C
 		})
 	});
-}, u = e(l);
+}, d = e(u);
 //#endregion
-export { l as Image, u as default };
+export { u as Image, d as default };

package/dist/elements/media/Image/Settings.d.ts

@@ -1,9 +1,11 @@
 type SettingsProps = {
     src?: string;
+    alt?: string;
+    decorative?: boolean;
     fetchPriority?: 'high' | 'low' | 'auto';
     loadMode?: 'auto' | 'lazy' | 'eager';
     variables?: Record<string, string>;
     onUpdate?: (key: string, value: string | boolean | number) => void;
 };
-declare const Settings: ({ src, variables, fetchPriority, loadMode, onUpdate }: SettingsProps) => import('react').JSX.Element;
+declare const Settings: ({ src, alt, decorative, variables, fetchPriority, loadMode, onUpdate }: SettingsProps) => import('react').JSX.Element;
 export default Settings;

package/dist/elements/media/Image/Settings.mjs

@@ -1,37 +1,51 @@
 import { useCallback as e, useMemo as t } from "react";
 import { processTwig as n } from "@plitzi/sdk-shared/helpers/twigWrapper";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import a from "@plitzi/plitzi-ui/Input";
-import o from "@plitzi/plitzi-ui/Select";
+import a from "@plitzi/plitzi-ui/Checkbox";
+import o from "@plitzi/plitzi-ui/Input";
+import s from "@plitzi/plitzi-ui/Select";
 //#region src/elements/media/Image/Settings.tsx
-var s = ({ src: s = "", variables: c, fetchPriority: l = "auto", loadMode: u = "auto", onUpdate: d }) => {
-	let f = t(() => n(s, c, !0), [c, s]), p = e((e) => (t) => d?.(e, t), [d]);
+var c = ({ src: c = "", alt: l = "", decorative: u = !1, variables: d, fetchPriority: f = "auto", loadMode: p = "auto", onUpdate: m }) => {
+	let h = t(() => n(c, d, !0), [d, c]), g = e((e) => (t) => m?.(e, t), [m]), _ = e((e) => m?.("decorative", e.target.checked), [m]);
 	return /* @__PURE__ */ i("div", {
 		className: "flex h-full flex-col gap-4 py-2",
 		children: [
 			/* @__PURE__ */ i("div", {
 				className: "flex flex-col",
-				children: [/* @__PURE__ */ r(a, {
-					value: s,
+				children: [/* @__PURE__ */ r(o, {
+					value: c,
 					label: "Url",
-					onChange: p("src"),
+					onChange: g("src"),
 					size: "xs"
-				}), f && /* @__PURE__ */ i("div", {
+				}), h && /* @__PURE__ */ i("div", {
 					className: "relative mt-2 flex items-center justify-center rounded-sm border border-gray-300 p-2",
 					children: [/* @__PURE__ */ r("div", {
 						className: "absolute top-2 left-2 rounded-tl rounded-br border border-gray-300 bg-white p-1 text-xs",
 						children: "Preview"
 					}), /* @__PURE__ */ r("img", {
-						src: f,
+						src: h,
 						alt: "",
 						className: "h-full w-full rounded-sm"
 					})]
 				})]
 			}),
-			/* @__PURE__ */ i(o, {
+			!u && /* @__PURE__ */ r(o, {
 				value: l,
+				label: "Alt Text",
+				placeholder: "What the picture shows, for who cannot see it",
+				onChange: g("alt"),
+				size: "xs"
+			}),
+			/* @__PURE__ */ r(a, {
+				checked: u,
+				label: "Decorative (nothing to describe)",
+				onChange: _,
+				size: "xs"
+			}),
+			/* @__PURE__ */ i(s, {
+				value: f,
 				label: "Fetch Priority",
-				onChange: p("fetchPriority"),
+				onChange: g("fetchPriority"),
 				size: "xs",
 				children: [
 					/* @__PURE__ */ r("option", {
@@ -48,10 +62,10 @@ var s = ({ src: s = "", variables: c, fetchPriority: l = "auto", loadMode: u = "
 					})
 				]
 			}),
-			/* @__PURE__ */ i(o, {
-				value: u,
+			/* @__PURE__ */ i(s, {
+				value: p,
 				label: "Load Mode",
-				onChange: p("loadMode"),
+				onChange: g("loadMode"),
 				size: "xs",
 				children: [
 					/* @__PURE__ */ r("option", {
@@ -72,4 +86,4 @@ var s = ({ src: s = "", variables: c, fetchPriority: l = "auto", loadMode: u = "
 	});
 };
 //#endregion
-export { s as default };
+export { c as default };

package/dist/elements/media/Image/declaration.d.ts

@@ -4,10 +4,15 @@ import { AuthorableAttributes } from '@plitzi/sdk-shared/authoring/declare';
 export type ImageAttributes = AuthorableAttributes<ImageProps>;
 declare const declaration: {
     readonly type: "image";
+    readonly attributeValues: {
+        readonly fetchPriority: readonly string[];
+        readonly loadMode: readonly string[];
+    };
     readonly content: {
         readonly attributes: {
             readonly src: "https://cdn.plitzi.com/resources/img/placeholder-img.svg";
             readonly alt: "";
+            readonly decorative: false;
             readonly fetchPriority: "auto";
             readonly loadMode: "auto";
         };
@@ -60,6 +65,7 @@ declare const declaration: {
     fetchPriority?: "high" | "low" | "auto" | undefined;
     src?: string | undefined;
     alt?: string | undefined;
-    loadMode?: "eager" | "lazy" | undefined;
+    decorative?: boolean | undefined;
+    loadMode?: "auto" | "eager" | "lazy" | undefined;
 }>>;
 export default declaration;

package/dist/elements/media/Image/declaration.mjs

@@ -1,11 +1,24 @@
-import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
+import { elementDeclaration as e, valuesOf as t } from "@plitzi/sdk-shared/authoring/declare";
 //#region src/elements/media/Image/declaration.ts
-var t = e()({
+var n = e()({
 	type: "image",
+	attributeValues: {
+		fetchPriority: t()([
+			"high",
+			"low",
+			"auto"
+		]),
+		loadMode: t()([
+			"auto",
+			"eager",
+			"lazy"
+		])
+	},
 	content: {
 		attributes: {
 			src: "https://cdn.plitzi.com/resources/img/placeholder-img.svg",
 			alt: "",
+			decorative: !1,
 			fetchPriority: "auto",
 			loadMode: "auto"
 		},
@@ -48,4 +61,4 @@ var t = e()({
 	}
 });
 //#endregion
-export { t as default };
+export { n as default };

package/dist/elements/media/Image/index.d.ts

@@ -3,10 +3,15 @@ declare const Image: {
     displayName: string;
 } & {
     readonly type: "image";
+    readonly attributeValues: {
+        readonly fetchPriority: readonly string[];
+        readonly loadMode: readonly string[];
+    };
     readonly content: {
         readonly attributes: {
             readonly src: "https://cdn.plitzi.com/resources/img/placeholder-img.svg";
             readonly alt: "";
+            readonly decorative: false;
             readonly fetchPriority: "auto";
             readonly loadMode: "auto";
         };
@@ -59,6 +64,7 @@ declare const Image: {
     fetchPriority?: "high" | "low" | "auto" | undefined;
     src?: string | undefined;
     alt?: string | undefined;
-    loadMode?: "eager" | "lazy" | undefined;
+    decorative?: boolean | undefined;
+    loadMode?: "auto" | "eager" | "lazy" | undefined;
 }>>;
 export default Image;