@plitzi/sdk-elements 0.37.1 → 0.37.2

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

@@ -1,13 +1,14 @@
 declare const Dropdown: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Dropdown').DropdownProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Dropdown').DropdownProps>): import('react').JSX.Element;
     displayName: string;
 } & {
     plugins: {
         dropdownPopup: {
-            (props: import('../../../Element/hocs/withElement').WithElementProps<import('./DropdownPopup/DropdownPopup').DropdownPopupProps>): import("react").JSX.Element;
+            (props: import('../../../Element/hocs/withElement').WithElementProps<import('./DropdownPopup/DropdownPopup').DropdownPopupProps>): import('react').JSX.Element;
             displayName: string;
         } & {
             readonly type: "dropdownPopup";
+            readonly ancestorType: "dropdown";
             readonly content: {
                 readonly attributes: {};
                 readonly definition: {
@@ -45,7 +46,7 @@ declare const Dropdown: {
                     readonly style: {
                         readonly base: {
                             readonly default: {
-                                readonly 'background-color': "white";
+                                readonly 'background-color': "light-dark(white, oklch(0.21 0.006 285.885))";
                                 readonly 'padding-right': "4px";
                                 readonly 'padding-bottom': "4px";
                                 readonly 'padding-left': "4px";

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

@@ -5,9 +5,9 @@ export type HeadingProps = {
     content?: string;
     subType?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 };
-declare const Heading: ({ ref, className, content, subType }: HeadingProps) => import("react").JSX.Element;
+declare const Heading: ({ ref, className, content, subType }: HeadingProps) => import('react').JSX.Element;
 declare const _default: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<HeadingProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<HeadingProps>): import('react').JSX.Element;
     displayName: string;
 };
 export default _default;

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

@@ -3,5 +3,5 @@ type SettingsProps = {
     content?: string;
     onUpdate?: (key: string, value: string | boolean | number) => void;
 };
-declare const Settings: ({ subType, content, onUpdate }: SettingsProps) => import("react").JSX.Element;
+declare const Settings: ({ subType, content, onUpdate }: SettingsProps) => import('react').JSX.Element;
 export default Settings;

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

@@ -1,5 +1,5 @@
 declare const Heading: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Heading').HeadingProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Heading').HeadingProps>): import('react').JSX.Element;
     displayName: string;
 } & {
     readonly type: "heading";

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

@@ -14,9 +14,9 @@ export type LinkProps = {
      */
     label?: string;
 };
-declare const Link: ({ ref, children, className, href, target, mode, label }: 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;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<LinkProps>): import('react').JSX.Element;
     displayName: string;
 };
 export default _default;

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

@@ -18,8 +18,8 @@ var u = ({ ref: e, children: u, className: d = "", href: f = "#", target: p = "s
 		"navigation.navigate"
 	]), C = r(() => {
 		if (m === "external") return f;
-		let e = `/${f}`.replaceAll(/[/]+/gim, "/");
 		if (m === "internal") {
+			let e = `/${f}`.replaceAll(/[/]+/gim, "/");
 			try {
 				let t = o(e, {
 					...x,

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

@@ -4,5 +4,5 @@ type SettingsProps = {
     target?: 'blank' | 'self' | 'parent' | 'top';
     onUpdate?: (key: string, value: string | boolean | number) => void;
 };
-declare const Settings: ({ mode, href, target, onUpdate }: SettingsProps) => import("react").JSX.Element;
+declare const Settings: ({ mode, href, target, onUpdate }: SettingsProps) => import('react').JSX.Element;
 export default Settings;

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

@@ -1,5 +1,5 @@
 declare const Link: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Link').LinkProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Link').LinkProps>): import('react').JSX.Element;
     displayName: string;
 } & {
     readonly type: "link";

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

@@ -4,9 +4,9 @@ export type MarkdownProps = {
     className: string;
     content: string;
 };
-declare const Markdown: ({ ref, content, className }: MarkdownProps) => import("react").JSX.Element;
+declare const Markdown: ({ ref, content, className }: MarkdownProps) => import('react').JSX.Element;
 declare const _default: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<MarkdownProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<MarkdownProps>): import('react').JSX.Element;
     displayName: string;
 };
 export default _default;

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

@@ -2,5 +2,5 @@ type SettingsProps = {
     content?: string;
     onUpdate?: (key: string, value: string | boolean | number) => void;
 };
-declare const Settings: ({ content, onUpdate }: SettingsProps) => import("react").JSX.Element;
+declare const Settings: ({ content, onUpdate }: SettingsProps) => import('react').JSX.Element;
 export default Settings;

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

@@ -1,5 +1,5 @@
 declare const Markdown: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Markdown').MarkdownProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Markdown').MarkdownProps>): import('react').JSX.Element;
     displayName: string;
 } & {
     readonly type: "markdown";

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

@@ -4,9 +4,9 @@ export type ParagraphProps = {
     content?: string | number;
     className?: string;
 };
-declare const Paragraph: ({ ref, content, className }: ParagraphProps) => import("react").JSX.Element;
+declare const Paragraph: ({ ref, content, className }: ParagraphProps) => import('react').JSX.Element;
 declare const _default: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<ParagraphProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<ParagraphProps>): import('react').JSX.Element;
     displayName: string;
 };
 export default _default;

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

@@ -2,5 +2,5 @@ type SettingsProps = {
     content?: string;
     onUpdate?: (key: string, value: string | boolean | number) => void;
 };
-declare const Settings: ({ content, onUpdate }: SettingsProps) => import("react").JSX.Element;
+declare const Settings: ({ content, onUpdate }: SettingsProps) => import('react').JSX.Element;
 export default Settings;

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

@@ -1,5 +1,5 @@
 declare const Paragraph: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Paragraph').ParagraphProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Paragraph').ParagraphProps>): import('react').JSX.Element;
     displayName: string;
 } & {
     readonly type: "paragraph";

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

@@ -11,9 +11,9 @@ export type RichTextProps = {
      *  body field is opaque to it. */
     mediaBaseUrl?: string;
 };
-declare const RichText: ({ ref, className, content, format, mediaBaseUrl }: RichTextProps) => import("react").JSX.Element;
+declare const RichText: ({ ref, className, content, format, mediaBaseUrl }: RichTextProps) => import('react').JSX.Element;
 declare const _default: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<RichTextProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<RichTextProps>): import('react').JSX.Element;
     displayName: string;
 };
 export default _default;

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

@@ -3,5 +3,5 @@ type SettingsProps = {
     mediaBaseUrl?: string;
     onUpdate?: (key: string, value: string | boolean | number | object) => void;
 };
-declare const Settings: ({ format, mediaBaseUrl, onUpdate }: SettingsProps) => import("react").JSX.Element;
+declare const Settings: ({ format, mediaBaseUrl, onUpdate }: SettingsProps) => import('react').JSX.Element;
 export default Settings;

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

@@ -1,5 +1,5 @@
 declare const RichText: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./RichText').RichTextProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./RichText').RichTextProps>): import('react').JSX.Element;
     displayName: string;
 } & {
     readonly type: "richText";

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

@@ -2,5 +2,5 @@ type SettingsProps = {
     content?: string;
     onUpdate?: (key: string, value: string | boolean | number) => void;
 };
-declare const Settings: ({ content, onUpdate }: SettingsProps) => import("react").JSX.Element;
+declare const Settings: ({ content, onUpdate }: SettingsProps) => import('react').JSX.Element;
 export default Settings;

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

@@ -4,9 +4,9 @@ export type TextProps = {
     className?: string;
     content?: string | number;
 };
-declare const Text: ({ ref, content, className }: TextProps) => import("react").JSX.Element;
+declare const Text: ({ ref, content, className }: TextProps) => import('react').JSX.Element;
 declare const _default: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<TextProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<TextProps>): import('react').JSX.Element;
     displayName: string;
 };
 export default _default;

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

@@ -1,5 +1,5 @@
 declare const Text: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Text').TextProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Text').TextProps>): import('react').JSX.Element;
     displayName: string;
 } & {
     readonly type: "text";

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

@@ -22,9 +22,9 @@ export type ThemeToggleProps = {
  * shows, so the server and the browser agree byte for byte: a control whose markup changed with the stored theme
  * would either flash the wrong icon on every load or force the page to wait for storage before painting.
  */
-declare const ThemeToggle: ({ ref, className, subType, lightLabel, darkLabel, systemLabel, showSystem }: ThemeToggleProps) => import("react").JSX.Element;
+declare const ThemeToggle: ({ ref, className, subType, lightLabel, darkLabel, systemLabel, showSystem }: ThemeToggleProps) => import('react').JSX.Element;
 declare const _default: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<ThemeToggleProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<ThemeToggleProps>): import('react').JSX.Element;
     displayName: string;
 };
 export default _default;

package/dist/elements/basic/ThemeToggle/ThemeToggle.mjs

@@ -1,13 +1,14 @@
 import e from "../../../Element/hocs/withElement.mjs";
 import t from "../../../Element/hooks/useElement.mjs";
 import { RootElement as n } from "../../../Element/RootElement.mjs";
-import { use as r, useCallback as i, useEffect as a, useMemo as o, useRef as s, useSyncExternalStore as c } from "react";
-import l from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import f from "clsx";
-import p from "@plitzi/sdk-shared/theme/useTheme";
+import r from "./declaration.mjs";
+import { use as i, useCallback as a, useEffect as o, useMemo as s, useRef as c, useSyncExternalStore as l } from "react";
+import u from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import p from "clsx";
+import m from "@plitzi/sdk-shared/theme/useTheme";
 //#region src/elements/basic/ThemeToggle/ThemeToggle.tsx
-var m = () => () => {}, h = () => !0, g = () => !1, _ = () => /* @__PURE__ */ d("svg", {
+var h = () => () => {}, g = () => !0, _ = () => !1, v = () => /* @__PURE__ */ f("svg", {
 	viewBox: "0 0 24 24",
 	width: "1em",
 	height: "1em",
@@ -15,15 +16,15 @@ var m = () => () => {}, h = () => !0, g = () => !1, _ = () => /* @__PURE__ */ d(
 	stroke: "currentColor",
 	strokeWidth: "2",
 	"aria-hidden": !0,
-	children: [/* @__PURE__ */ u("circle", {
+	children: [/* @__PURE__ */ d("circle", {
 		cx: "12",
 		cy: "12",
 		r: "4.2"
-	}), /* @__PURE__ */ u("path", {
+	}), /* @__PURE__ */ d("path", {
 		strokeLinecap: "round",
 		d: "M12 2.6v2.2M12 19.2v2.2M4.2 12H2M22 12h-2.2M6.3 6.3 4.8 4.8M19.2 19.2l-1.5-1.5M17.7 6.3l1.5-1.5M4.8 19.2l1.5-1.5"
 	})]
-}), v = () => /* @__PURE__ */ u("svg", {
+}), y = () => /* @__PURE__ */ d("svg", {
 	viewBox: "0 0 24 24",
 	width: "1em",
 	height: "1em",
@@ -31,84 +32,76 @@ var m = () => () => {}, h = () => !0, g = () => !1, _ = () => /* @__PURE__ */ d(
 	stroke: "currentColor",
 	strokeWidth: "2",
 	"aria-hidden": !0,
-	children: /* @__PURE__ */ u("path", {
+	children: /* @__PURE__ */ d("path", {
 		strokeLinejoin: "round",
 		d: "M20.5 14.3A8.6 8.6 0 0 1 9.7 3.5a8.6 8.6 0 1 0 10.8 10.8Z"
 	})
-}), y = ({ ref: e, className: y = "", subType: b = "switch", lightLabel: x = "Light", darkLabel: S = "Dark", systemLabel: C = "System", showSystem: w = !1 }) => {
-	let { theme: T, setTheme: E, toggleTheme: D } = p(), { id: O, definition: { styleSelectors: k } } = t(), { settings: { previewMode: A }, contexts: { InteractionsContext: j } } = l(), { interactionsManager: M } = r(j), N = c(m, h, g), P = i((e) => (t) => {
-		t.preventDefault(), A && E(e);
-	}, [A, E]), F = i((e) => {
-		e.preventDefault(), A && D();
-	}, [A, D]), I = o(() => [
-		...w ? [{
+}), b = ({ ref: e, className: b = "", subType: x = "switch", lightLabel: S = "Light", darkLabel: C = "Dark", systemLabel: w = "System", showSystem: T = !1 }) => {
+	let { theme: E, setTheme: D, toggleTheme: O } = m(), { id: k, definition: { styleSelectors: A } } = t(), { settings: { previewMode: j }, contexts: { InteractionsContext: M } } = u(), { interactionsManager: N } = i(M), P = l(h, g, _), F = a((e) => (t) => {
+		t.preventDefault(), j && D(e);
+	}, [j, D]), I = a((e) => {
+		e.preventDefault(), j && O();
+	}, [j, O]), L = s(() => [
+		...T ? [{
 			value: "system",
-			label: C,
+			label: w,
 			icon: null
 		}] : [],
 		{
 			value: "light",
-			label: x,
-			icon: /* @__PURE__ */ u(_, {})
+			label: S,
+			icon: /* @__PURE__ */ d(v, {})
 		},
 		{
 			value: "dark",
-			label: S,
-			icon: /* @__PURE__ */ u(v, {})
+			label: C,
+			icon: /* @__PURE__ */ d(y, {})
 		}
 	], [
+		T,
 		w,
-		C,
-		x,
-		S
-	]), L = s(null);
-	a(() => {
-		let e = L.current;
-		L.current = T, e !== null && e !== T && M.interactionTrigger(O, "onThemeChange", { theme: T });
+		S,
+		C
+	]), R = c(null);
+	return o(() => {
+		let e = R.current;
+		R.current = E, e !== null && e !== E && N.interactionTrigger(k, "onThemeChange", { theme: E });
 	}, [
-		T,
-		M,
-		O
-	]);
-	let R = o(() => ({ onThemeChange: {
-		action: "onThemeChange",
-		title: "On Theme Change",
-		type: "trigger",
-		params: {},
-		preview: { theme: "dark" }
-	} }), []);
-	return b === "segmented" ? /* @__PURE__ */ u(n, {
+		E,
+		N,
+		k
+	]), x === "segmented" ? /* @__PURE__ */ d(n, {
 		ref: e,
 		tag: "div",
-		className: f("plitzi-component__theme-toggle plitzi-component__theme-toggle--segmented", y),
-		interactionTriggers: R,
-		children: I.map((e) => /* @__PURE__ */ d("button", {
+		className: p("plitzi-component__theme-toggle plitzi-component__theme-toggle--segmented", b),
+		interactionTriggers: r.triggers,
+		children: L.map((e) => /* @__PURE__ */ f("button", {
 			type: "button",
-			className: f("plitzi-component__theme-toggle-option", k.option),
-			"data-active": N && T === e.value ? "true" : void 0,
+			className: p("plitzi-component__theme-toggle-option", A.option),
+			"data-active": P && E === e.value ? "true" : void 0,
 			"data-theme-option": e.value,
-			onClick: P(e.value),
-			children: [e.icon, /* @__PURE__ */ u("span", { children: e.label })]
+			onClick: F(e.value),
+			children: [e.icon, /* @__PURE__ */ d("span", { children: e.label })]
 		}, e.value))
-	}) : /* @__PURE__ */ d(n, {
+	}) : /* @__PURE__ */ f(n, {
 		ref: e,
 		tag: "button",
-		className: f("plitzi-component__theme-toggle plitzi-component__theme-toggle--switch", y),
-		interactionTriggers: R,
+		className: p("plitzi-component__theme-toggle plitzi-component__theme-toggle--switch", b),
+		interactionTriggers: r.triggers,
 		type: "button",
-		onClick: F,
-		"aria-label": `${x} / ${S}`,
-		title: `${x} / ${S}`,
-		children: [/* @__PURE__ */ u("span", {
-			className: f("plitzi-component__theme-toggle-icon", k.icon),
+		onClick: I,
+		"aria-label": `${S} / ${C}`,
+		title: `${S} / ${C}`,
+		children: [/* @__PURE__ */ d("span", {
+			className: p("plitzi-component__theme-toggle-icon", A.icon),
 			"data-theme-icon": "light",
-			children: /* @__PURE__ */ u(_, {})
-		}), /* @__PURE__ */ u("span", {
-			className: f("plitzi-component__theme-toggle-icon", k.icon),
+			children: /* @__PURE__ */ d(v, {})
+		}), /* @__PURE__ */ d("span", {
+			className: p("plitzi-component__theme-toggle-icon", A.icon),
 			"data-theme-icon": "dark",
-			children: /* @__PURE__ */ u(v, {})
+			children: /* @__PURE__ */ d(y, {})
 		})]
 	});
-}, b = e(y);
+}, x = e(b);
 //#endregion
-export { y as ThemeToggle, b as default };
+export { b as ThemeToggle, x as default };

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

@@ -4,6 +4,17 @@ import { AuthorableAttributes } from '@plitzi/sdk-shared/authoring/declare';
 export type ThemeToggleAttributes = AuthorableAttributes<ThemeToggleProps>;
 declare const declaration: {
     readonly type: "themeToggle";
+    readonly triggers: {
+        readonly onThemeChange: {
+            readonly action: "onThemeChange";
+            readonly title: "On Theme Change";
+            readonly type: "trigger";
+            readonly params: {};
+            readonly preview: {
+                readonly theme: "dark";
+            };
+        };
+    };
     readonly content: {
         readonly attributes: {
             readonly subType: "switch";
@@ -15,7 +26,7 @@ declare const declaration: {
         readonly definition: {
             readonly label: "Theme Toggle";
             readonly type: "themeToggle";
-            readonly description: "Lets a visitor choose light or dark. It writes the choice on the document root, where a space stylesheet is already looking for it, and remembers it — so the machine decides until somebody says otherwise. It ships no colours of its own: style it with the space own classes, and use `data-theme-icon` to decide which icon each scheme shows.";
+            readonly description: "Lets a visitor choose light or dark. It writes the choice on the document root, where a space stylesheet is already looking for it, and remembers it — so the machine decides until somebody says otherwise. It ships no colours of its own: style it with the space own classes. It shows the icon of the scheme in use by default; key a rule off `data-theme-icon` to change that.";
             readonly items: readonly [];
             readonly bindings: {};
             readonly styleSelectors: {

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

@@ -2,6 +2,13 @@ import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
 //#region src/elements/basic/ThemeToggle/declaration.ts
 var t = e()({
 	type: "themeToggle",
+	triggers: { onThemeChange: {
+		action: "onThemeChange",
+		title: "On Theme Change",
+		type: "trigger",
+		params: {},
+		preview: { theme: "dark" }
+	} },
 	content: {
 		attributes: {
 			subType: "switch",
@@ -13,7 +20,7 @@ var t = e()({
 		definition: {
 			label: "Theme Toggle",
 			type: "themeToggle",
-			description: "Lets a visitor choose light or dark. It writes the choice on the document root, where a space stylesheet is already looking for it, and remembers it — so the machine decides until somebody says otherwise. It ships no colours of its own: style it with the space own classes, and use `data-theme-icon` to decide which icon each scheme shows.",
+			description: "Lets a visitor choose light or dark. It writes the choice on the document root, where a space stylesheet is already looking for it, and remembers it — so the machine decides until somebody says otherwise. It ships no colours of its own: style it with the space own classes. It shows the icon of the scheme in use by default; key a rule off `data-theme-icon` to change that.",
 			items: [],
 			bindings: {},
 			styleSelectors: {

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

@@ -1,8 +1,19 @@
 declare const ThemeToggle: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./ThemeToggle').ThemeToggleProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./ThemeToggle').ThemeToggleProps>): import('react').JSX.Element;
     displayName: string;
 } & {
     readonly type: "themeToggle";
+    readonly triggers: {
+        readonly onThemeChange: {
+            readonly action: "onThemeChange";
+            readonly title: "On Theme Change";
+            readonly type: "trigger";
+            readonly params: {};
+            readonly preview: {
+                readonly theme: "dark";
+            };
+        };
+    };
     readonly content: {
         readonly attributes: {
             readonly subType: "switch";
@@ -14,7 +25,7 @@ declare const ThemeToggle: {
         readonly definition: {
             readonly label: "Theme Toggle";
             readonly type: "themeToggle";
-            readonly description: "Lets a visitor choose light or dark. It writes the choice on the document root, where a space stylesheet is already looking for it, and remembers it — so the machine decides until somebody says otherwise. It ships no colours of its own: style it with the space own classes, and use `data-theme-icon` to decide which icon each scheme shows.";
+            readonly description: "Lets a visitor choose light or dark. It writes the choice on the document root, where a space stylesheet is already looking for it, and remembers it — so the machine decides until somebody says otherwise. It ships no colours of its own: style it with the space own classes. It shows the icon of the scheme in use by default; key a rule off `data-theme-icon` to change that.";
             readonly items: readonly [];
             readonly bindings: {};
             readonly styleSelectors: {