@plitzi/sdk-elements 0.38.5 → 0.38.7

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

@@ -7,14 +7,43 @@ declare const declaration: {
     readonly content: {
         readonly attributes: {
             readonly content: "Markdown";
+            readonly headingLinks: true;
         };
         readonly definition: {
             readonly label: "Markdown";
             readonly type: "markdown";
-            readonly description: "Renders a Markdown source string as formatted HTML.";
+            readonly description: string;
             readonly bindings: {};
             readonly styleSelectors: {
                 readonly base: "";
+                readonly heading: "";
+                readonly heading1: "";
+                readonly heading2: "";
+                readonly heading3: "";
+                readonly heading4: "";
+                readonly heading5: "";
+                readonly heading6: "";
+                readonly paragraph: "";
+                readonly link: "";
+                readonly strong: "";
+                readonly emphasis: "";
+                readonly list: "";
+                readonly listItem: "";
+                readonly quote: "";
+                readonly divider: "";
+                readonly code: "";
+                readonly codeBlock: "";
+                readonly codeBlockFrame: "";
+                readonly codeBlockHeader: "";
+                readonly codeBlockLanguage: "";
+                readonly codeBlockCopy: "";
+                readonly image: "";
+                readonly table: "";
+                readonly tableHead: "";
+                readonly tableRow: "";
+                readonly tableHeaderCell: "";
+                readonly tableCell: "";
+                readonly anchor: "";
             };
             readonly initialState: {
                 readonly visibility: true;
@@ -43,10 +72,7 @@ declare const declaration: {
             readonly displayMode: "desktop";
             readonly style: {
                 readonly base: {
-                    readonly default: {
-                        readonly 'font-size': "14px";
-                        readonly 'line-height': "1.714";
-                    };
+                    readonly default: {};
                 };
             };
         };
@@ -54,5 +80,6 @@ declare const declaration: {
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
     content?: string | undefined;
+    headingLinks?: boolean | undefined;
 }>>;
 export default declaration;

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

@@ -3,13 +3,46 @@ import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
 var t = e()({
 	type: "markdown",
 	content: {
-		attributes: { content: "Markdown" },
+		attributes: {
+			content: "Markdown",
+			headingLinks: !0
+		},
 		definition: {
 			label: "Markdown",
 			type: "markdown",
-			description: "Renders a Markdown source string as formatted HTML.",
+			description: "Renders a Markdown source string (GitHub-flavoured) as HTML, inside a `div.markdown`. Each part of it takes a class through the slot named for it: `heading` (every `h1`–`h6`) and `heading1`…`heading6` (that level only, beside it — a property goes on one of the two, never both), `paragraph`, `link`, `strong`, `emphasis` (`em`), `list` (`ul`/`ol`), `listItem`, `quote` (`blockquote`), `divider` (`hr`), `code` (inline), `image`, `table`, `tableHead` (`thead`), `tableRow`, `tableHeaderCell` (`th`) and `tableCell` (`td`). A fenced block is `codeBlock` (its `pre`) in `codeBlockFrame`, under `codeBlockHeader`, which holds `codeBlockLanguage` and the `codeBlockCopy` button. Every heading carries an id made of its words, which `/page#its-words` lands on, and starts with an empty link to itself — `a.anchor > span.octicon-link`, the `anchor` slot; `headingLinks: false` leaves the link out and keeps the id. Unstyled, it reads as a document — headings, lists, code, tables — from the base layer of the SDK, which a class on the slot of a part replaces property by property.",
 			bindings: {},
-			styleSelectors: { base: "" },
+			styleSelectors: {
+				base: "",
+				heading: "",
+				heading1: "",
+				heading2: "",
+				heading3: "",
+				heading4: "",
+				heading5: "",
+				heading6: "",
+				paragraph: "",
+				link: "",
+				strong: "",
+				emphasis: "",
+				list: "",
+				listItem: "",
+				quote: "",
+				divider: "",
+				code: "",
+				codeBlock: "",
+				codeBlockFrame: "",
+				codeBlockHeader: "",
+				codeBlockLanguage: "",
+				codeBlockCopy: "",
+				image: "",
+				table: "",
+				tableHead: "",
+				tableRow: "",
+				tableHeaderCell: "",
+				tableCell: "",
+				anchor: ""
+			},
 			initialState: { visibility: !0 }
 		},
 		builder: {
@@ -33,10 +66,7 @@ var t = e()({
 		defaultStyle: {
 			name: "Markdown",
 			displayMode: "desktop",
-			style: { base: { default: {
-				"font-size": "14px",
-				"line-height": "1.714"
-			} } }
+			style: { base: { default: {} } }
 		},
 		settings: {}
 	}

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

@@ -0,0 +1,7 @@
+import { MarkdownClassNames } from '../../../../components/MarkdownDocument';
+/**
+ * The class of each part of a Markdown document, read off the element's slots of the same names — the same object
+ * while the classes stay the same: a new one rebuilds every tag of the document.
+ */
+declare const useMarkdownClassNames: (styleSelectors: Readonly<Partial<Record<string, string>>>) => MarkdownClassNames;
+export default useMarkdownClassNames;

package/dist/elements/basic/Markdown/hooks/useMarkdownClassNames.mjs

@@ -0,0 +1,13 @@
+import { MARKDOWN_PARTS as e } from "../../../../components/MarkdownDocument/helpers/markdownParts.mjs";
+import t from "@plitzi/sdk-shared/hooks/useStableValue";
+//#region src/elements/basic/Markdown/hooks/useMarkdownClassNames.ts
+var n = (n) => {
+	let r = {};
+	for (let t of e) {
+		let e = n[t];
+		e && (r[t] = e);
+	}
+	return t(r);
+};
+//#endregion
+export { n as default };

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

@@ -6,14 +6,43 @@ declare const Markdown: {
     readonly content: {
         readonly attributes: {
             readonly content: "Markdown";
+            readonly headingLinks: true;
         };
         readonly definition: {
             readonly label: "Markdown";
             readonly type: "markdown";
-            readonly description: "Renders a Markdown source string as formatted HTML.";
+            readonly description: string;
             readonly bindings: {};
             readonly styleSelectors: {
                 readonly base: "";
+                readonly heading: "";
+                readonly heading1: "";
+                readonly heading2: "";
+                readonly heading3: "";
+                readonly heading4: "";
+                readonly heading5: "";
+                readonly heading6: "";
+                readonly paragraph: "";
+                readonly link: "";
+                readonly strong: "";
+                readonly emphasis: "";
+                readonly list: "";
+                readonly listItem: "";
+                readonly quote: "";
+                readonly divider: "";
+                readonly code: "";
+                readonly codeBlock: "";
+                readonly codeBlockFrame: "";
+                readonly codeBlockHeader: "";
+                readonly codeBlockLanguage: "";
+                readonly codeBlockCopy: "";
+                readonly image: "";
+                readonly table: "";
+                readonly tableHead: "";
+                readonly tableRow: "";
+                readonly tableHeaderCell: "";
+                readonly tableCell: "";
+                readonly anchor: "";
             };
             readonly initialState: {
                 readonly visibility: true;
@@ -42,10 +71,7 @@ declare const Markdown: {
             readonly displayMode: "desktop";
             readonly style: {
                 readonly base: {
-                    readonly default: {
-                        readonly 'font-size': "14px";
-                        readonly 'line-height': "1.714";
-                    };
+                    readonly default: {};
                 };
             };
         };
@@ -53,5 +79,6 @@ declare const Markdown: {
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
     content?: string | undefined;
+    headingLinks?: boolean | undefined;
 }>>;
 export default Markdown;

package/dist/elements/basic/RichText/RichText.mjs

@@ -1,30 +1,37 @@
 import e from "../../../Element/hocs/withElement.mjs";
-import { RootElement as t } from "../../../Element/RootElement.mjs";
-import { rebaseHtmlMedia as n, sanitizeHtml as r } from "./sanitizeHtml.mjs";
-import { useMemo as i } from "react";
-import a from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import c from "clsx";
-import l from "@plitzi/plitzi-ui/Markdown";
+import t from "../../../Element/hooks/useElement.mjs";
+import { RootElement as n } from "../../../Element/RootElement.mjs";
+import r from "../../../components/MarkdownDocument/index.mjs";
+import i from "../Markdown/hooks/useMarkdownClassNames.mjs";
+import { classHtmlParts as a } from "./classHtmlParts.mjs";
+import { rebaseHtmlMedia as o, sanitizeHtml as s } from "./sanitizeHtml.mjs";
+import { useMemo 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";
 //#region src/elements/basic/RichText/RichText.tsx
-var u = ({ ref: e, className: u = "", content: d = "", format: f = "html", mediaBaseUrl: p = "" }) => {
-	let { settings: { previewMode: m } } = a(), h = i(() => f === "html" ? n(r(d), p) : "", [
-		f,
-		d,
-		p
+var p = ({ ref: e, className: p = "", content: m = "", format: h = "html", mediaBaseUrl: g = "" }) => {
+	let { settings: { previewMode: _ } } = l(), { definition: { styleSelectors: v } } = t(), y = i(v), b = c(() => h === "html" ? a(o(s(m), g), y) : "", [
+		h,
+		m,
+		g,
+		y
 	]);
-	return /* @__PURE__ */ s(t, {
+	return /* @__PURE__ */ d(n, {
 		ref: e,
-		className: c("plitzi-component__rich-text", { "plitzi-component__rich-text--edit-mode": !m }, u),
+		className: f("plitzi-component__rich-text", { "plitzi-component__rich-text--edit-mode": !_ }, p),
 		children: [
-			f === "html" && /* @__PURE__ */ o("div", { dangerouslySetInnerHTML: { __html: h } }),
-			f === "markdown" && /* @__PURE__ */ o(l, { children: d }),
-			f === "text" && /* @__PURE__ */ o("div", {
+			h === "html" && /* @__PURE__ */ u("div", { dangerouslySetInnerHTML: { __html: b } }),
+			h === "markdown" && /* @__PURE__ */ u(r, {
+				classNames: y,
+				children: m
+			}),
+			h === "text" && /* @__PURE__ */ u("div", {
 				className: "plitzi-component__rich-text-plain",
-				children: d
+				children: m
 			})
 		]
 	});
-}, d = e(u);
+}, m = e(p);
 //#endregion
-export { u as RichText, d as default };
+export { p as RichText, m as default };

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

@@ -0,0 +1,14 @@
+import { MarkdownClassNames, MarkdownPart } from '../../../components/MarkdownDocument';
+/**
+ * The part each tag of a body's HTML is, named as the parts of a Markdown document are, so one set of slots dresses
+ * a body whichever format the CMS returns it in. `b` and `i` are the `strong` and `emphasis` an older editor writes.
+ */
+export declare const HTML_TAG_PARTS: Readonly<Partial<Record<string, readonly MarkdownPart[]>>>;
+/**
+ * A body's HTML with the class of each of its parts on the tags that are that part.
+ *
+ * Read off the markup as a string, as the sanitizer reads it, so the server renders the same classes the browser does.
+ * `code` is inline code, as in a Markdown document: the `code` of a `pre` is the block's, and the `pre` takes
+ * `codeBlock`.
+ */
+export declare const classHtmlParts: (html: string, classNames: MarkdownClassNames) => string;

package/dist/elements/basic/RichText/classHtmlParts.mjs

@@ -0,0 +1,48 @@
+import e from "clsx";
+//#region src/elements/basic/RichText/classHtmlParts.ts
+var t = {
+	h1: ["heading", "heading1"],
+	h2: ["heading", "heading2"],
+	h3: ["heading", "heading3"],
+	h4: ["heading", "heading4"],
+	h5: ["heading", "heading5"],
+	h6: ["heading", "heading6"],
+	p: ["paragraph"],
+	a: ["link"],
+	strong: ["strong"],
+	b: ["strong"],
+	em: ["emphasis"],
+	i: ["emphasis"],
+	ul: ["list"],
+	ol: ["list"],
+	li: ["listItem"],
+	blockquote: ["quote"],
+	hr: ["divider"],
+	code: ["code"],
+	pre: ["codeBlock"],
+	img: ["image"],
+	table: ["table"],
+	thead: ["tableHead"],
+	tr: ["tableRow"],
+	th: ["tableHeaderCell"],
+	td: ["tableCell"]
+}, n = /<(\/?)([a-zA-Z][a-zA-Z0-9]*)((?:[^>"']|"[^"]*"|'[^']*')*)>/g, r = /\sclass\s*=\s*("[^"]*"|'[^']*'|[^\s"'>]+)/i, i = /^["']|["']$/g, a = /\s*\/$/, o = (t, n) => {
+	let o = r.exec(t);
+	if (o) {
+		let a = o[1].replace(i, "");
+		return t.replace(r, ` class="${e(a, n)}"`);
+	}
+	let s = a.exec(t)?.[0] ?? "";
+	return `${t.slice(0, t.length - s.length)} class="${n}"${s}`;
+}, s = (r, i) => {
+	if (!Object.values(i).some(Boolean)) return r;
+	let a = 0;
+	return r.replace(n, (n, r, s, c) => {
+		let l = s.toLowerCase();
+		if (l === "pre" && (a = Math.max(a + (r ? -1 : 1), 0)), r || l === "code" && a > 0) return n;
+		let u = e((t[l] ?? []).map((e) => i[e]));
+		return u ? `<${s}${o(c, u)}>` : n;
+	});
+};
+//#endregion
+export { t as HTML_TAG_PARTS, s as classHtmlParts };

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

@@ -16,11 +16,38 @@ declare const declaration: {
         readonly definition: {
             readonly label: "Rich Text";
             readonly type: "richText";
-            readonly description: "Renders a body field coming from a CMS — HTML, markdown or plain text. Scripts and event handlers are stripped before rendering, so third-party content cannot execute.";
+            readonly description: string;
             readonly items: readonly [];
             readonly bindings: {};
             readonly styleSelectors: {
                 readonly base: "";
+                readonly heading: "";
+                readonly heading1: "";
+                readonly heading2: "";
+                readonly heading3: "";
+                readonly heading4: "";
+                readonly heading5: "";
+                readonly heading6: "";
+                readonly paragraph: "";
+                readonly link: "";
+                readonly strong: "";
+                readonly emphasis: "";
+                readonly list: "";
+                readonly listItem: "";
+                readonly quote: "";
+                readonly divider: "";
+                readonly code: "";
+                readonly codeBlock: "";
+                readonly codeBlockFrame: "";
+                readonly codeBlockHeader: "";
+                readonly codeBlockLanguage: "";
+                readonly codeBlockCopy: "";
+                readonly image: "";
+                readonly table: "";
+                readonly tableHead: "";
+                readonly tableRow: "";
+                readonly tableHeaderCell: "";
+                readonly tableCell: "";
             };
             readonly initialState: {
                 readonly visibility: true;

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

@@ -16,10 +16,39 @@ var n = e()({
 		definition: {
 			label: "Rich Text",
 			type: "richText",
-			description: "Renders a body field coming from a CMS — HTML, markdown or plain text. Scripts and event handlers are stripped before rendering, so third-party content cannot execute.",
+			description: "Renders a body field coming from a CMS — HTML, markdown or plain text. Scripts and event handlers are stripped before rendering, so third-party content cannot execute. The parts of an HTML or markdown body take a class through the slots a `markdown` has, by the same names: `heading` and `heading1`…`heading6` (a property on one of the two, never both), `paragraph`, `link`, `strong` (`strong`/`b`), `emphasis` (`em`/`i`), `list`, `listItem`, `quote`, `divider`, `code` (inline), `codeBlock` (`pre`), `image`, `table`, `tableHead`, `tableRow`, `tableHeaderCell`, `tableCell`; the fenced block of a markdown body also sits in `codeBlockFrame`, under `codeBlockHeader` with `codeBlockLanguage` and `codeBlockCopy`. Unstyled, a body reads as a document from the base layer of the SDK, which a class on the slot of a part replaces property by property.",
 			items: [],
 			bindings: {},
-			styleSelectors: { base: "" },
+			styleSelectors: {
+				base: "",
+				heading: "",
+				heading1: "",
+				heading2: "",
+				heading3: "",
+				heading4: "",
+				heading5: "",
+				heading6: "",
+				paragraph: "",
+				link: "",
+				strong: "",
+				emphasis: "",
+				list: "",
+				listItem: "",
+				quote: "",
+				divider: "",
+				code: "",
+				codeBlock: "",
+				codeBlockFrame: "",
+				codeBlockHeader: "",
+				codeBlockLanguage: "",
+				codeBlockCopy: "",
+				image: "",
+				table: "",
+				tableHead: "",
+				tableRow: "",
+				tableHeaderCell: "",
+				tableCell: ""
+			},
 			initialState: { visibility: !0 }
 		},
 		builder: {

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

@@ -15,11 +15,38 @@ declare const RichText: {
         readonly definition: {
             readonly label: "Rich Text";
             readonly type: "richText";
-            readonly description: "Renders a body field coming from a CMS — HTML, markdown or plain text. Scripts and event handlers are stripped before rendering, so third-party content cannot execute.";
+            readonly description: string;
             readonly items: readonly [];
             readonly bindings: {};
             readonly styleSelectors: {
                 readonly base: "";
+                readonly heading: "";
+                readonly heading1: "";
+                readonly heading2: "";
+                readonly heading3: "";
+                readonly heading4: "";
+                readonly heading5: "";
+                readonly heading6: "";
+                readonly paragraph: "";
+                readonly link: "";
+                readonly strong: "";
+                readonly emphasis: "";
+                readonly list: "";
+                readonly listItem: "";
+                readonly quote: "";
+                readonly divider: "";
+                readonly code: "";
+                readonly codeBlock: "";
+                readonly codeBlockFrame: "";
+                readonly codeBlockHeader: "";
+                readonly codeBlockLanguage: "";
+                readonly codeBlockCopy: "";
+                readonly image: "";
+                readonly table: "";
+                readonly tableHead: "";
+                readonly tableRow: "";
+                readonly tableHeaderCell: "";
+                readonly tableCell: "";
             };
             readonly initialState: {
                 readonly visibility: true;

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

@@ -44,8 +44,6 @@ declare const declaration: {
             readonly style: {
                 readonly base: {
                     readonly default: {
-                        readonly 'font-size': "14px";
-                        readonly 'line-height': "1.714";
                         readonly display: "inline";
                     };
                 };

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

@@ -33,11 +33,7 @@ var t = e()({
 		defaultStyle: {
 			name: "Text",
 			displayMode: "desktop",
-			style: { base: { default: {
-				"font-size": "14px",
-				"line-height": "1.714",
-				display: "inline"
-			} } }
+			style: { base: { default: { display: "inline" } } }
 		},
 		settings: {}
 	}

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

@@ -43,8 +43,6 @@ declare const Text: {
             readonly style: {
                 readonly base: {
                     readonly default: {
-                        readonly 'font-size': "14px";
-                        readonly 'line-height': "1.714";
                         readonly display: "inline";
                     };
                 };

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

@@ -37,11 +37,11 @@ var h = () => () => {}, g = () => !0, _ = () => !1, v = () => /* @__PURE__ */ f(
 		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"
 	})
 }), 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(() => [
+	let { theme: E, resolvedTheme: D, setTheme: O, toggleTheme: k } = m(), { id: A, definition: { styleSelectors: j } } = t(), { settings: { previewMode: M }, contexts: { InteractionsContext: N } } = u(), { interactionsManager: P } = i(N), F = l(h, g, _), I = a((e) => (t) => {
+		t.preventDefault(), M && O(e);
+	}, [M, O]), L = a((e) => {
+		e.preventDefault(), M && k();
+	}, [M, k]), R = s(() => [
 		...T ? [{
 			value: "system",
 			label: w,
@@ -62,14 +62,14 @@ var h = () => () => {}, g = () => !0, _ = () => !1, v = () => /* @__PURE__ */ f(
 		w,
 		S,
 		C
-	]), R = c(null);
+	]), z = c(null);
 	return o(() => {
-		let e = R.current;
-		R.current = E, e !== null && e !== E && N.interactionTrigger(k, "onThemeChange", { theme: E });
+		let e = z.current;
+		z.current = E, e !== null && e !== E && P.interactionTrigger(A, "onThemeChange", { theme: E });
 	}, [
 		E,
-		N,
-		k
+		P,
+		A
 	]), x === "segmented" ? /* @__PURE__ */ d(n, {
 		ref: e,
 		tag: "div",
@@ -77,13 +77,13 @@ var h = () => () => {}, g = () => !0, _ = () => !1, v = () => /* @__PURE__ */ f(
 		"aria-label": `${S} / ${C}`,
 		className: p("plitzi-component__theme-toggle plitzi-component__theme-toggle--segmented", b),
 		interactionTriggers: r.triggers,
-		children: L.map((e) => /* @__PURE__ */ f("button", {
+		children: R.map((e) => /* @__PURE__ */ f("button", {
 			type: "button",
-			className: p("plitzi-component__theme-toggle-option", A.option),
-			"data-active": P && E === e.value ? "true" : void 0,
-			"aria-pressed": P ? E === e.value : void 0,
+			className: p("plitzi-component__theme-toggle-option", j.option),
+			"data-active": F && E === e.value ? "true" : void 0,
+			"aria-pressed": F ? E === e.value : void 0,
 			"data-theme-option": e.value,
-			onClick: F(e.value),
+			onClick: I(e.value),
 			children: [e.icon, /* @__PURE__ */ d("span", { children: e.label })]
 		}, e.value))
 	}) : /* @__PURE__ */ f(n, {
@@ -92,16 +92,18 @@ var h = () => () => {}, g = () => !0, _ = () => !1, v = () => /* @__PURE__ */ f(
 		className: p("plitzi-component__theme-toggle plitzi-component__theme-toggle--switch", b),
 		interactionTriggers: r.triggers,
 		type: "button",
-		onClick: I,
+		onClick: L,
 		"aria-label": `${S} / ${C}`,
 		title: `${S} / ${C}`,
 		children: [/* @__PURE__ */ d("span", {
-			className: p("plitzi-component__theme-toggle-icon", A.icon),
+			className: p("plitzi-component__theme-toggle-icon", j.icon),
 			"data-theme-icon": "light",
+			"aria-current": F && D === "light" ? "true" : void 0,
 			children: /* @__PURE__ */ d(v, {})
 		}), /* @__PURE__ */ d("span", {
-			className: p("plitzi-component__theme-toggle-icon", A.icon),
+			className: p("plitzi-component__theme-toggle-icon", j.icon),
 			"data-theme-icon": "dark",
+			"aria-current": F && D === "dark" ? "true" : void 0,
 			children: /* @__PURE__ */ d(y, {})
 		})]
 	});

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

@@ -29,7 +29,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. It shows the icon of the scheme in use by default; key a rule off `data-theme-icon` to change that.";
+            readonly description: string;
             readonly items: readonly [];
             readonly bindings: {};
             readonly styleSelectors: {
@@ -65,9 +65,53 @@ declare const declaration: {
             readonly style: {
                 readonly base: {
                     readonly default: {
-                        readonly display: "inline-flex";
-                        readonly 'align-items': "center";
-                        readonly cursor: "pointer";
+                        'margin-top': string;
+                        'margin-right': string;
+                        'margin-bottom': string;
+                        'margin-left': string;
+                        'padding-top': string;
+                        'padding-right': string;
+                        'padding-bottom': string;
+                        'padding-left': string;
+                        display: string;
+                        'align-items': string;
+                        'background-color': string;
+                        color: string;
+                        'font-family': string;
+                        'font-size': string;
+                        'font-style': string;
+                        'font-weight': string;
+                        'line-height': string;
+                        'letter-spacing': string;
+                        cursor: string;
+                    };
+                };
+                readonly icon: {
+                    readonly default: {};
+                };
+                readonly option: {
+                    readonly default: {
+                        readonly 'row-gap': "4px";
+                        readonly 'column-gap': "4px";
+                        readonly 'margin-top': string;
+                        readonly 'margin-right': string;
+                        readonly 'margin-bottom': string;
+                        readonly 'margin-left': string;
+                        readonly 'padding-top': string;
+                        readonly 'padding-right': string;
+                        readonly 'padding-bottom': string;
+                        readonly 'padding-left': string;
+                        readonly display: string;
+                        readonly 'align-items': string;
+                        readonly 'background-color': string;
+                        readonly color: string;
+                        readonly 'font-family': string;
+                        readonly 'font-size': string;
+                        readonly 'font-style': string;
+                        readonly 'font-weight': string;
+                        readonly 'line-height': string;
+                        readonly 'letter-spacing': string;
+                        readonly cursor: string;
                     };
                 };
             };