@plitzi/sdk-elements 0.38.6 → 0.38.7

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

@@ -1,6 +1,26 @@
 import { elementDeclaration as e, valuesOf as t } from "@plitzi/sdk-shared/authoring/declare";
 //#region src/elements/basic/ThemeToggle/declaration.ts
-var n = e()({
+var n = {
+	"margin-top": "0px",
+	"margin-right": "0px",
+	"margin-bottom": "0px",
+	"margin-left": "0px",
+	"padding-top": "0px",
+	"padding-right": "0px",
+	"padding-bottom": "0px",
+	"padding-left": "0px",
+	display: "inline-flex",
+	"align-items": "center",
+	"background-color": "transparent",
+	color: "inherit",
+	"font-family": "inherit",
+	"font-size": "inherit",
+	"font-style": "inherit",
+	"font-weight": "inherit",
+	"line-height": "inherit",
+	"letter-spacing": "inherit",
+	cursor: "pointer"
+}, r = e()({
 	type: "themeToggle",
 	attributeValues: { subType: t()(["switch", "segmented"]) },
 	triggers: { onThemeChange: {
@@ -21,7 +41,7 @@ var n = 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. It shows the icon of the scheme in use by default; key a rule off `data-theme-icon` to change that.",
+			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: its buttons carry no browser look and take the colour and type around them — style them with the space own classes. A `segmented` one marks the chosen option with `aria-pressed`, which is the `current` state of its `option` slot. It shows the icon of the scheme in use by default; key a rule off `data-theme-icon` to change that. A `switch` marks the icon of the scheme in use — the one chosen, or the machine one while none is — with `aria-current`, the `current` state of its `icon` slot.",
 			items: [],
 			bindings: {},
 			styleSelectors: {
@@ -52,15 +72,19 @@ var n = e()({
 		defaultStyle: {
 			name: "Theme Toggle",
 			displayMode: "desktop",
-			style: { base: { default: {
-				display: "inline-flex",
-				"align-items": "center",
-				cursor: "pointer"
-			} } },
+			style: {
+				base: { default: n },
+				icon: { default: {} },
+				option: { default: {
+					...n,
+					"row-gap": "4px",
+					"column-gap": "4px"
+				} }
+			},
 			subTypes: {}
 		},
 		settings: {}
 	}
 });
 //#endregion
-export { n as default };
+export { r as default };

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

@@ -28,7 +28,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. 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: {
@@ -64,9 +64,53 @@ declare const ThemeToggle: {
             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;
                     };
                 };
             };