typescript-overlay-essentials 1.6.2 → 2.0.1

package/dist/MultipleChoiceOverlay.css

@@ -1,4 +1,4 @@
-.multiplechoice-overlay {
+.overlay-essentials-multiplechoice-overlay {
     position: fixed;
     top: 0;
     left: 0;
@@ -9,9 +9,11 @@
     align-items: center;
     justify-content: center;
     z-index: 10000;
+    white-space: pre-line;
+    word-break: break-word;
 }
 
-.multiplechoice-box {
+.overlay-essentials-multiplechoice-box {
     background-color: var(--Hellgrau, white);
     color: var(--HellSchwarz,#2c2c2c);
     padding: 2rem;
@@ -37,30 +39,30 @@
     }
 }
 
-.multiplechoice-box .headline {
+.overlay-essentials-multiplechoice-box .overlay-essentials-headline {
     margin-bottom: 0.75em;
 }
 
-.multiplechoice-box .information-buttons {
+.overlay-essentials-multiplechoice-box .overlay-essentials-information-buttons {
     display: flex;
     justify-content: center;
     gap: 1rem;
     margin-top: 1.5rem;
 }
 
-    .multiplechoice-box .information-buttons button {
+    .overlay-essentials-multiplechoice-box .overlay-essentials-information-buttons button {
         font-size: 85%;
         padding: 0.5rem 1.1rem;
     }
 
 /* === Stylisierte Checkbox === */
-.multiplechoice-box .choices-input {
+.overlay-essentials-multiplechoice-box .overlay-essentials-choices-input {
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
-.multiplechoice-box .choices-input input[type="checkbox"] {
+.overlay-essentials-multiplechoice-box .overlay-essentials-choices-input input[type="checkbox"] {
     appearance: none;
     width: 20px;
     height: 20px;
@@ -74,22 +76,22 @@
     margin-right: 0.5rem;
 }
 
-    .multiplechoice-box .choices-input input[type="checkbox"]:checked {
+    .overlay-essentials-multiplechoice-box .overlay-essentials-choices-input input[type="checkbox"]:checked {
         background-color: var(--DunkelAkzent, #4aabf5) ;
         border-color: var(--DunkelAkzent, #4aabf5) ;
     }
 
-        .multiplechoice-box .choices-input input[type="checkbox"]:hover {
+        .overlay-essentials-multiplechoice-box .overlay-essentials-choices-input input[type="checkbox"]:hover {
             background-color: var(--Hellgrau, #ddd); 
             border-color: var(--Dunkelgrau, #999);
         }
 
-        .multiplechoice-box .choices-input input[type="checkbox"]:checked:hover {
+        .overlay-essentials-multiplechoice-box .overlay-essentials-choices-input input[type="checkbox"]:checked:hover {
             background-color: var(--HSDAkzent, #4aabf5) ;
             border-color: var(--HSDAkzent, #4aabf5) ;
         }
 
-        .multiplechoice-box .choices-input input[type="checkbox"]:disabled {
+        .overlay-essentials-multiplechoice-box .overlay-essentials-choices-input input[type="checkbox"]:disabled {
             background-color: var(--Mittelgrau, #ddd); 
             border-color: var(--Dunkelgrau, #999);
             cursor: auto;
@@ -97,7 +99,7 @@
 
 
         /* Häkchen aus zwei Linien */
-        .multiplechoice-box .choices-input input[type="checkbox"]:checked::after {
+        .overlay-essentials-multiplechoice-box .overlay-essentials-choices-input input[type="checkbox"]:checked::after {
             content: "";
             position: absolute;
             left: 5px;
@@ -109,12 +111,12 @@
             transform: rotate(45deg);
         }
 
-    .multiplechoice-box .choices-input input[type="checkbox"]:focus {
+    .overlay-essentials-multiplechoice-box .overlay-essentials-choices-input input[type="checkbox"]:focus {
         outline: none;
         box-shadow: 0 0 0 2px var(--MittelAkzent, rgba(74, 171, 245));
     }
 
-.multiplechoice-box .choice-label {
+.overlay-essentials-multiplechoice-box .overlay-essentials-choice-label {
     justify-content: flex-start;
     display: flex;
     align-items: center;
@@ -122,7 +124,7 @@
     vertical-align: middle;
 }
 
-.multiplechoice-box .choices-container{
+.overlay-essentials-multiplechoice-box .overlay-essentials-choices-container{
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -131,52 +133,52 @@
     padding: 1rem;
 }
 
-/* Light Mode */
-@media (prefers-color-scheme: dark) {
+/* Dark Mode */
+[visual-theme="dark"] {
     
-    .multiplechoice-box {
+    .overlay-essentials-multiplechoice-box {
         background-color: var(--HellSchwarz,#2c2c2c);
         color: var(--FastWeiß, white);
     }
 
-    .multiplechoice-box .choices-input input[type="checkbox"] {
+    .overlay-essentials-multiplechoice-box .overlay-essentials-choices-input input[type="checkbox"] {
         background-color: var(--Dunkelgrau, #888);
         background-color: var(--FastSchwarz,#222);
     }
 
-        .multiplechoice-box .choices-input input[type="checkbox"]:checked {
+        .overlay-essentials-multiplechoice-box .overlay-essentials-choices-input input[type="checkbox"]:checked {
             background-color: var(--DunkelAkzent, #4aabf5);
             border-color: var(--DunkelAkzent, #4aabf5);
         }
 
-        .multiplechoice-box .choices-input input[type="checkbox"]:hover {
+        .overlay-essentials-multiplechoice-box .overlay-essentials-choices-input input[type="checkbox"]:hover {
             background-color: var(--Dunkelgrau, #ddd); 
             border-color: var(--Hellgrau, #999);
         }
 
-        .multiplechoice-box .choices-input input[type="checkbox"]:checked:hover {
+        .overlay-essentials-multiplechoice-box .overlay-essentials-choices-input input[type="checkbox"]:checked:hover {
             background-color: var(--HSDAkzent, #4aabf5) ;
             border-color: var(--HSDAkzent, #4aabf5) ;
         }
 
-            .multiplechoice-box .choices-input input[type="checkbox"]:checked::after {
+            .overlay-essentials-multiplechoice-box .overlay-essentials-choices-input input[type="checkbox"]:checked::after {
                 border-color: white;
             }
 
-    .multiplechoice-box .choices-input input[type="checkbox"]:disabled {
+    .overlay-essentials-multiplechoice-box .overlay-essentials-choices-input input[type="checkbox"]:disabled {
         background-color: var(--Dunkelgrau, #999); 
         border-color: var(--Mittelgrau, #ddd);
         cursor: auto;
     }
 }
 
-.multiplechoice-box .closeButton {
+.overlay-essentials-multiplechoice-box .overlay-essentials-closeButton {
     right: 10px;
     top: 10px;
     position: absolute;
 }
 
-    .multiplechoice-box .close-icon:hover {
+    .overlay-essentials-multiplechoice-box .overlay-essentials-close-icon:hover {
         color: var(--HSDAkzent);
         cursor: pointer;
     }

package/dist/MultipleChoiceOverlay.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, Dispatch, SetStateAction } from 'react';
 import * as React from 'react';
 import './MultipleChoiceOverlay.css';
 export interface MultipleChoiceOverlayState {
@@ -20,5 +20,5 @@ export interface MultipleChoiceOverlayState {
 export declare const defaultMultipleChoiceState: MultipleChoiceOverlayState;
 export declare function MultipleChoiceOverlay({ state, setState }: {
     state: MultipleChoiceOverlayState;
-    setState: (state: MultipleChoiceOverlayState) => void;
+    setState: Dispatch<SetStateAction<MultipleChoiceOverlayState>>;
 }): React.ReactElement;

package/dist/MultipleChoiceOverlay.js

@@ -71,31 +71,31 @@ export function MultipleChoiceOverlay({ state, setState }) {
             tempState.handler(tempState.handlerArgs);
     };
     return showOverlay ?
-        _jsx("div", { className: "multiplechoice-overlay", children: _jsxs("div", { className: "multiplechoice-box", style: (state === null || state === void 0 ? void 0 : state.style) !== undefined ? state.style : {}, role: "dialog", "aria-modal": "true", "aria-labelledby": (state === null || state === void 0 ? void 0 : state.headline) != null ? "multiple-choice-headline" : undefined, "aria-label": (state === null || state === void 0 ? void 0 : state.headline) != null ? undefined : "Mehrfachauswahl", "aria-describedby": "multiple-choice-message", onKeyDown: (event) => { if (event.key === "Escape")
+        _jsx("div", { className: "overlay-essentials-multiplechoice-overlay", children: _jsxs("div", { className: "overlay-essentials-multiplechoice-box", style: (state === null || state === void 0 ? void 0 : state.style) !== undefined ? state.style : {}, role: "dialog", "aria-modal": "true", "aria-labelledby": (state === null || state === void 0 ? void 0 : state.headline) != null ? "multiple-choice-headline" : undefined, "aria-label": (state === null || state === void 0 ? void 0 : state.headline) != null ? undefined : "Mehrfachauswahl", "aria-describedby": "multiple-choice-message", onKeyDown: (event) => { if (event.key === "Escape")
                     handleAction(state.handlerCancel, false); }, children: [state.addCloseButton ?
-                        _jsx("span", { className: "closeButton", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", tabIndex: 0, className: "close-icon", onClick: () => handleAction(undefined, false), onKeyDown: (e) => {
+                        _jsx("span", { className: "overlay-essentials-closeButton", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", tabIndex: 0, className: "overlay-essentials-close-icon", onClick: () => handleAction(undefined, false), onKeyDown: (e) => {
                                     if (e.key === 'Enter' || e.key === ' ') {
                                         e.preventDefault(); // Verhindert Scroll bei Space
                                         handleAction(undefined, false);
                                     }
                                 }, role: "button", "aria-label": "Dialog schlie\u00DFen", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) }) :
-                        _jsx(_Fragment, {}), _jsx("div", { className: "headline", id: "multiple-choice-headline", style: { whiteSpace: "pre-line", wordBreak: "break-word" }, children: _jsx("strong", { children: (state === null || state === void 0 ? void 0 : state.headline) != null ? state.headline : "" }) }), _jsx("div", { id: "multiple-choice-message", style: { whiteSpace: "pre-line", wordBreak: "break-word" }, children: (state === null || state === void 0 ? void 0 : state.message) != null ? state.message : "" }), _jsx("div", { className: "choices-input", role: "group", "aria-label": "Auswahloptionen", children: _jsx("div", { className: "choices-container", children: state === null || state === void 0 ? void 0 : state.choices.map((choice, index) => {
+                        _jsx(_Fragment, {}), _jsx("div", { className: "overlay-essentials-headline", id: "overlay-essentials-multiple-choice-headline", children: _jsx("strong", { children: (state === null || state === void 0 ? void 0 : state.headline) != null ? state.headline : "" }) }), _jsx("div", { id: "overlay-essentials-multiple-choice-message", children: (state === null || state === void 0 ? void 0 : state.message) != null ? state.message : "" }), _jsx("div", { className: "overlay-essentials-choices-input", role: "group", "aria-label": "Auswahloptionen", children: _jsx("div", { className: "overlay-essentials-choices-container", children: state === null || state === void 0 ? void 0 : state.choices.map((choice, index) => {
                                 var _a;
-                                return (_jsxs("label", { className: "choice-label", children: [_jsx("input", { type: "checkbox", checked: input.includes(choice), disabled: (_a = state.disabledChoices) === null || _a === void 0 ? void 0 : _a.includes(choice), onChange: () => toggle(choice), tabIndex: 0, onKeyDown: (e) => {
+                                return (_jsxs("label", { className: "overlay-essentials-choice-label", children: [_jsx("input", { type: "checkbox", checked: input.includes(choice), disabled: (_a = state.disabledChoices) === null || _a === void 0 ? void 0 : _a.includes(choice), onChange: () => toggle(choice), tabIndex: 0, onKeyDown: (e) => {
                                                 if (e.key === 'Enter' || e.key === ' ') {
                                                     e.preventDefault(); // Verhindert Scroll bei Space
                                                     toggle(choice);
                                                 }
                                             } }), choice] }, index));
-                            }) }) }), _jsxs("div", { className: "information-buttons", children: [_jsx("button", { onClick: () => handleAction(state.handlerCancel, false), onKeyDown: (event) => {
+                            }) }) }), _jsxs("div", { className: "overlay-essentials-information-buttons", children: [_jsx("button", { onClick: () => handleAction(state.handlerCancel, false), onKeyDown: (event) => {
                                     if (event.key === "Enter" || event.key === ' ') {
                                         event.preventDefault(); // Verhindert Scroll bei Space
                                         handleAction(state.handlerCancel, false);
                                     }
-                                }, className: "px-4 py-2 bg-gray-300 rounded", style: (state === null || state === void 0 ? void 0 : state.cancelButtonStyle) != null ? state.cancelButtonStyle : {}, children: (state === null || state === void 0 ? void 0 : state.cancelButtonText) != null ? state.cancelButtonText : "Abbrechen" }), _jsx("button", { onClick: () => handleAction(state.handlerOk, true), type: "button", autoFocus: true, onKeyDown: (event) => {
+                                }, className: "overlay-essentials-px-4 py-2 bg-gray-300 rounded", style: (state === null || state === void 0 ? void 0 : state.cancelButtonStyle) != null ? state.cancelButtonStyle : {}, children: (state === null || state === void 0 ? void 0 : state.cancelButtonText) != null ? state.cancelButtonText : "Abbrechen" }), _jsx("button", { onClick: () => handleAction(state.handlerOk, true), type: "button", autoFocus: true, onKeyDown: (event) => {
                                     if (event.key === "Enter" || event.key === ' ') {
                                         event.preventDefault(); // Verhindert Scroll bei Space
                                         handleAction(state.handlerOk, true);
                                     }
-                                }, className: "px-4 py-2 bg-blue-600 text-white rounded", style: (state === null || state === void 0 ? void 0 : state.proceedButtonStyle) != null ? state.proceedButtonStyle : {}, children: (state === null || state === void 0 ? void 0 : state.proceedButtonText) != null ? state.proceedButtonText : "OK" })] })] }) }) : _jsx(_Fragment, {});
+                                }, className: "overlay-essentials-px-4 py-2 bg-blue-600 text-white rounded", style: (state === null || state === void 0 ? void 0 : state.proceedButtonStyle) != null ? state.proceedButtonStyle : {}, children: (state === null || state === void 0 ? void 0 : state.proceedButtonText) != null ? state.proceedButtonText : "OK" })] })] }) }) : _jsx(_Fragment, {});
 }

package/dist/MultipleRadioOverlay.css

@@ -1,4 +1,4 @@
-.multipleradio-overlay {
+.overlay-essentials-multipleradio-overlay {
     position: fixed;
     top: 0;
     left: 0;
@@ -9,9 +9,11 @@
     align-items: center;
     justify-content: center;
     z-index: 10000;
+    white-space: pre-line;
+    word-break: break-word;
 }
 
-.multipleradio-box {
+.overlay-essentials-multipleradio-box {
     background-color: var(--Hellgrau, white);
     color: var(--HellSchwarz,#2c2c2c);
     padding: 2rem;
@@ -37,30 +39,30 @@
     }
 }
 
-.multipleradio-box .headline {
+.overlay-essentials-multipleradio-box .overlay-essentials-headline {
     margin-bottom: 0.75em;
 }
 
-.multipleradio-box .information-buttons {
+.overlay-essentials-multipleradio-box .overlay-essentials-information-buttons {
     display: flex;
     justify-content: center;
     gap: 1rem;
     margin-top: 1.5rem;
 }
 
-    .multipleradio-box .information-buttons button {
+    .overlay-essentials-multipleradio-box .overlay-essentials-information-buttons button {
         font-size: 85%;
         padding: 0.5rem 1.1rem;
     }
 
 /* === Stylisierte Checkbox === */
-.multipleradio-box .radios-input {
+.overlay-essentials-multipleradio-box .overlay-essentials-radios-input {
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
-.multipleradio-box .radios-input input[type="checkbox"] {
+.overlay-essentials-multipleradio-box .overlay-essentials-radios-input input[type="checkbox"] {
     appearance: none;
     width: 20px;
     height: 20px;
@@ -74,29 +76,29 @@
     margin-right: 0.5rem;
 }
 
-    .multipleradio-box .radios-input input[type="checkbox"]:checked {
+    .overlay-essentials-multipleradio-box .overlay-essentials-radios-input input[type="checkbox"]:checked {
         background-color: var(--DunkelAkzent, #4aabf5) ;
         border-color: var(--DunkelAkzent, #4aabf5) ;
     }
 
-        .multipleradio-box .radios-input input[type="checkbox"]:hover {
+        .overlay-essentials-multipleradio-box .overlay-essentials-radios-input input[type="checkbox"]:hover {
             background-color: var(--Hellgrau, #ddd); 
             border-color: var(--Dunkelgrau, #999);
         }
 
-        .multipleradio-box .radios-input input[type="checkbox"]:checked:hover {
+        .overlay-essentials-multipleradio-box .overlay-essentials-radios-input input[type="checkbox"]:checked:hover {
             background-color: var(--HSDAkzent, #4aabf5) ;
             border-color: var(--HSDAkzent, #4aabf5) ;
         }
 
-        .multipleradio-box .radios-input input[type="checkbox"]:disabled {
+        .overlay-essentials-multipleradio-box .overlay-essentials-radios-input input[type="checkbox"]:disabled {
             background-color: var(--Mittelgrau, #ddd); 
             border-color: var(--Dunkelgrau, #999);
             cursor: auto;
         }
 
         /* Häkchen aus zwei Linien */
-        .multipleradio-box .radios-input input[type="checkbox"]:checked::after {
+        .overlay-essentials-multipleradio-box .overlay-essentials-radios-input input[type="checkbox"]:checked::after {
             content: "";
             position: absolute;
             left: 5px;
@@ -108,12 +110,12 @@
             transform: rotate(45deg);
         }
 
-    .multipleradio-box .radios-input input[type="checkbox"]:focus {
+    .overlay-essentials-multipleradio-box .overlay-essentials-radios-input input[type="checkbox"]:focus {
         outline: none;
         box-shadow: 0 0 0 2px var(--MittelAkzent, rgba(74, 171, 245));
     }
 
-.multipleradio-box .radio-label {
+.overlay-essentials-multipleradio-box .overlay-essentials-radio-label {
     justify-content: flex-start;
     display: flex;
     align-items: center;
@@ -121,7 +123,7 @@
     vertical-align: middle;
 }
 
-.multipleradio-box .radios-container{
+.overlay-essentials-multipleradio-box .overlay-essentials-radios-container{
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -131,51 +133,51 @@
 }
 
 /* Light Mode */
-@media (prefers-color-scheme: dark) {
+[visual-theme="dark"] {
     
-    .multipleradio-box {
+    .overlay-essentials-multipleradio-box {
         background-color: var(--HellSchwarz,#2c2c2c);
         color: var(--FastWeiß, white);
     }
 
-    .multipleradio-box .radios-input input[type="checkbox"] {
+    .overlay-essentials-multipleradio-box .overlay-essentials-radios-input input[type="checkbox"] {
         background-color: var(--Dunkelgrau, #888);
         background-color: var(--FastSchwarz,#222);
     }
 
-        .multipleradio-box .radios-input input[type="checkbox"]:checked {
+        .overlay-essentials-multipleradio-box .overlay-essentials-radios-input input[type="checkbox"]:checked {
             background-color: var(--DunkelAkzent, #4aabf5);
             border-color: var(--DunkelAkzent, #4aabf5);
         }
 
-        .multipleradio-box .radios-input input[type="checkbox"]:hover {
+        .overlay-essentials-multipleradio-box .overlay-essentials-radios-input input[type="checkbox"]:hover {
             background-color: var(--Dunkelgrau, #ddd); 
             border-color: var(--Hellgrau, #999);
         }
 
-        .multipleradio-box .radios-input input[type="checkbox"]:checked:hover {
+        .overlay-essentials-multipleradio-box .overlay-essentials-radios-input input[type="checkbox"]:checked:hover {
             background-color: var(--HSDAkzent, #4aabf5) ;
             border-color: var(--HSDAkzent, #4aabf5) ;
         }
 
-            .multipleradio-box .radios-input input[type="checkbox"]:checked::after {
+            .overlay-essentials-multipleradio-box .overlay-essentials-radios-input input[type="checkbox"]:checked::after {
                 border-color: white;
             }
 
-    .multipleradio-box .radios-input input[type="checkbox"]:disabled {
+    .overlay-essentials-multipleradio-box .overlay-essentials-radios-input input[type="checkbox"]:disabled {
         background-color: var(--Dunkelgrau, #999);
         border-color: var(--Mittelgrau, #ddd); 
         cursor: auto;
     }
 }
 
-.multipleradio-box .closeButton {
+.overlay-essentials-multipleradio-box .overlay-essentials-closeButton {
     right: 10px;
     top: 10px;
     position: absolute;
 }
 
-    .multipleradio-box .close-icon:hover {
+    .overlay-essentials-multipleradio-box .overlay-essentials-close-icon:hover {
         color: var(--HSDAkzent);
         cursor: pointer;
     }

package/dist/MultipleRadioOverlay.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, Dispatch, SetStateAction } from 'react';
 import * as React from 'react';
 import './MultipleRadioOverlay.css';
 export interface MultipleRadioOverlayState {
@@ -20,5 +20,5 @@ export interface MultipleRadioOverlayState {
 export declare const defaultMultipleRadioState: MultipleRadioOverlayState;
 export declare function MultipleRadioOverlay({ state, setState }: {
     state: MultipleRadioOverlayState;
-    setState: (state: MultipleRadioOverlayState) => void;
+    setState: Dispatch<SetStateAction<MultipleRadioOverlayState>>;
 }): React.ReactElement;

package/dist/MultipleRadioOverlay.js

@@ -61,31 +61,31 @@ export function MultipleRadioOverlay({ state, setState }) {
             tempState.handler(tempState.handlerArgs);
     };
     return showOverlay ?
-        _jsx("div", { className: "multipleradio-overlay", children: _jsxs("div", { className: "multipleradio-box", style: (state === null || state === void 0 ? void 0 : state.style) !== undefined ? state.style : {}, role: "dialog", "aria-modal": "true", "aria-labelledby": (state === null || state === void 0 ? void 0 : state.headline) != null ? "multiple-radio-headline" : undefined, "aria-label": (state === null || state === void 0 ? void 0 : state.headline) != null ? undefined : "Einfachauswahl", "aria-describedby": "multiple-radio-message", onKeyDown: (event) => { if (event.key === "Escape")
+        _jsx("div", { className: "overlay-essentials-multipleradio-overlay", children: _jsxs("div", { className: "overlay-essentials-multipleradio-box", style: (state === null || state === void 0 ? void 0 : state.style) !== undefined ? state.style : {}, role: "dialog", "aria-modal": "true", "aria-labelledby": (state === null || state === void 0 ? void 0 : state.headline) != null ? "multiple-radio-headline" : undefined, "aria-label": (state === null || state === void 0 ? void 0 : state.headline) != null ? undefined : "Einfachauswahl", "aria-describedby": "multiple-radio-message", onKeyDown: (event) => { if (event.key === "Escape")
                     handleAction(state.handlerCancel, false); }, children: [state.addCloseButton ?
-                        _jsx("span", { className: "closeButton", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", tabIndex: 0, className: "close-icon", onClick: () => handleAction(undefined, false), onKeyDown: (e) => {
+                        _jsx("span", { className: "overlay-essentials-closeButton", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", tabIndex: 0, className: "overlay-essentials-close-icon", onClick: () => handleAction(undefined, false), onKeyDown: (e) => {
                                     if (e.key === 'Enter' || e.key === ' ') {
                                         e.preventDefault(); // Verhindert Scroll bei Space
                                         handleAction(undefined, false);
                                     }
                                 }, role: "button", "aria-label": "Dialog schlie\u00DFen", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) }) :
-                        _jsx(_Fragment, {}), _jsx("div", { className: "headline", id: "multiple-radio-headline", style: { whiteSpace: "pre-line", wordBreak: "break-word" }, children: _jsx("strong", { children: (state === null || state === void 0 ? void 0 : state.headline) != null ? state.headline : "" }) }), _jsx("div", { id: "multiple-radio-message", style: { whiteSpace: "pre-line", wordBreak: "break-word" }, children: (state === null || state === void 0 ? void 0 : state.message) != null ? state.message : "" }), _jsx("div", { className: "radios-input", role: "radiogroup", "aria-label": "Auswahloptionen", children: _jsx("div", { className: "radios-container", children: state === null || state === void 0 ? void 0 : state.choices.map((choice, index) => {
+                        _jsx(_Fragment, {}), _jsx("div", { className: "overlay-essentials-headline", id: "overlay-essentials-multiple-radio-headline", children: _jsx("strong", { children: (state === null || state === void 0 ? void 0 : state.headline) != null ? state.headline : "" }) }), _jsx("div", { id: "overlay-essentials-multiple-radio-message", children: (state === null || state === void 0 ? void 0 : state.message) != null ? state.message : "" }), _jsx("div", { className: "overlay-essentials-radios-input", role: "radiogroup", "aria-label": "Auswahloptionen", children: _jsx("div", { className: "overlay-essentials-radios-container", children: state === null || state === void 0 ? void 0 : state.choices.map((choice, index) => {
                                 var _a;
-                                return (_jsxs("label", { className: "radio-label", children: [_jsx("input", { type: "radio", name: "multiple-radio-options", checked: input === choice, disabled: (_a = state.disabledChoices) === null || _a === void 0 ? void 0 : _a.includes(choice), onChange: () => setInput(choice), tabIndex: 0, onKeyDown: (e) => {
+                                return (_jsxs("label", { className: "overlay-essentials-radio-label", children: [_jsx("input", { type: "radio", name: "multiple-radio-options", checked: input === choice, disabled: (_a = state.disabledChoices) === null || _a === void 0 ? void 0 : _a.includes(choice), onChange: () => setInput(choice), tabIndex: 0, onKeyDown: (e) => {
                                                 if (e.key === 'Enter' || e.key === ' ') {
                                                     e.preventDefault(); // Verhindert Scroll bei Space
                                                     setInput(choice);
                                                 }
                                             } }), choice] }, index));
-                            }) }) }), _jsxs("div", { className: "information-buttons", children: [_jsx("button", { onClick: () => handleAction(state.handlerCancel, false), onKeyDown: (event) => {
+                            }) }) }), _jsxs("div", { className: "overlay-essentials-information-buttons", children: [_jsx("button", { onClick: () => handleAction(state.handlerCancel, false), onKeyDown: (event) => {
                                     if (event.key === "Enter" || event.key === ' ') {
                                         event.preventDefault(); // Verhindert Scroll bei Space
                                         handleAction(state.handlerCancel, false);
                                     }
-                                }, className: "px-4 py-2 bg-gray-300 rounded", style: (state === null || state === void 0 ? void 0 : state.cancelButtonStyle) != null ? state.cancelButtonStyle : {}, children: (state === null || state === void 0 ? void 0 : state.cancelButtonText) != null ? state.cancelButtonText : "Abbrechen" }), _jsx("button", { onClick: () => handleAction(state.handlerOk, true), type: "button", autoFocus: true, onKeyDown: (event) => {
+                                }, className: "overlay-essentials-px-4 py-2 bg-gray-300 rounded", style: (state === null || state === void 0 ? void 0 : state.cancelButtonStyle) != null ? state.cancelButtonStyle : {}, children: (state === null || state === void 0 ? void 0 : state.cancelButtonText) != null ? state.cancelButtonText : "Abbrechen" }), _jsx("button", { onClick: () => handleAction(state.handlerOk, true), type: "button", autoFocus: true, onKeyDown: (event) => {
                                     if (event.key === "Enter" || event.key === ' ') {
                                         event.preventDefault(); // Verhindert Scroll bei Space
                                         handleAction(state.handlerOk, true);
                                     }
-                                }, className: "px-4 py-2 bg-blue-600 text-white rounded", style: (state === null || state === void 0 ? void 0 : state.proceedButtonStyle) != null ? state.proceedButtonStyle : {}, children: (state === null || state === void 0 ? void 0 : state.proceedButtonText) != null ? state.proceedButtonText : "OK" })] })] }) }) : _jsx(_Fragment, {});
+                                }, className: "overlay-essentials-px-4 py-2 bg-blue-600 text-white rounded", style: (state === null || state === void 0 ? void 0 : state.proceedButtonStyle) != null ? state.proceedButtonStyle : {}, children: (state === null || state === void 0 ? void 0 : state.proceedButtonText) != null ? state.proceedButtonText : "OK" })] })] }) }) : _jsx(_Fragment, {});
 }

package/dist/Toast.css

@@ -1,4 +1,4 @@
-.toast-notification {
+.overlay-essentials-toast-notification {
     font-size: 80%;
     position: fixed;
     top: 14rem;

package/dist/Toast.d.ts

@@ -1,6 +1,6 @@
-import { ReactElement } from 'react';
+import { ReactElement, Dispatch, SetStateAction } from 'react';
 import './Toast.css';
 export declare function Toast({ state, setState }: {
-    state: string;
-    setState: (value: string) => void;
+    state: string | React.ReactElement;
+    setState: Dispatch<SetStateAction<string | React.ReactElement>>;
 }): ReactElement;

package/dist/Toast.js

@@ -19,5 +19,5 @@ export function Toast({ state, setState }) {
             setShowToast(false);
         }
     }, [toastContent, setState]);
-    return _jsx(_Fragment, { children: showToast && (_jsx("div", { className: "toast-notification", role: "status", "aria-live": "polite", "aria-atomic": "true", children: toastContent })) });
+    return _jsx(_Fragment, { children: showToast && (_jsx("div", { className: "overlay-essentials-toast-notification", role: "status", "aria-live": "polite", "aria-atomic": "true", children: toastContent })) });
 }

package/dist/ToggleSwitch.css

@@ -1,4 +1,4 @@
-.toggleWrapper {
+.overlay-essentials-toggleWrapper {
     position: relative;
     display: flex;
     width: fit-content; 
@@ -13,7 +13,7 @@
     float: right;
 }
 
-.toggleOption {
+.overlay-essentials-toggleOption {
     border: 0;
     background: transparent;
     font: inherit;
@@ -28,16 +28,16 @@
     white-space: nowrap;
 }
 
-.toggleOption:focus-visible {
+.overlay-essentials-toggleOption:focus-visible {
     outline: 3px solid var(--DunkelAkzent, #8b0000);
     outline-offset: -3px;
 }
 
-.toggleOption.active {
+.overlay-essentials-toggleOption.active {
     color: black;
 }
 
-.toggleSlider {
+.overlay-essentials-toggleSlider {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -48,10 +48,10 @@
     z-index: 1;
 }
 
-.toggleSlider.left {
+.overlay-essentials-toggleSlider.left {
     transform: translateX(0%);
 }
 
-.toggleSlider.right {
+.overlay-essentials-toggleSlider.right {
     transform: translateX(100%);
 }

package/dist/ToggleSwitch.js

@@ -23,5 +23,5 @@ export function ToggleSwitch({ optionLeft, optionRight, value, onChange }) {
             width: `calc(${offsetWidth}px)`
         });
     }, [value, optionLeft, optionRight]);
-    return (_jsxs("div", { className: "toggleWrapper", ref: containerRef, role: "group", "aria-label": "Auswahl", children: [_jsx("button", { type: "button", className: `toggleOption ${value === optionLeft.value ? "active" : ""}`, ref: el => { optionLeftRef.current = el; }, onClick: () => onChange(optionLeft.value), "aria-pressed": value === optionLeft.value, children: optionLeft.label }), _jsx("button", { type: "button", className: `toggleOption ${value === optionRight.value ? "active" : ""}`, ref: el => { optionRightRef.current = el; }, onClick: () => onChange(optionRight.value), "aria-pressed": value === optionRight.value, children: optionRight.label }), _jsx("div", { className: `toggleSlider ${value === optionLeft.value ? "left" : "right"}`, style: sliderStyle, "aria-hidden": "true" })] }));
+    return (_jsxs("div", { className: "overlay-essentials-toggleWrapper", ref: containerRef, role: "group", "aria-label": "Auswahl", children: [_jsx("button", { type: "button", className: `overlay-essentials-toggleOption ${value === optionLeft.value ? "overlay-essentials-active" : ""}`, ref: el => { optionLeftRef.current = el; }, onClick: () => onChange(optionLeft.value), "aria-pressed": value === optionLeft.value, children: optionLeft.label }), _jsx("button", { type: "button", className: `overlay-essentials-toggleOption ${value === optionRight.value ? "overlay-essentials-active" : ""}`, ref: el => { optionRightRef.current = el; }, onClick: () => onChange(optionRight.value), "aria-pressed": value === optionRight.value, children: optionRight.label }), _jsx("div", { className: `overlay-essentials-toggleSlider ${value === optionLeft.value ? "overlay-essentials-left" : "overlay-essentials-right"}`, style: sliderStyle, "aria-hidden": "true" })] }));
 }

package/dist/TutorialOverlay.css

@@ -0,0 +1,94 @@
+.overlay-essentials-tutorial-headline {
+    white-space: pre-line;
+    word-break: break-word;
+    text-align: center;
+}
+
+.overlay-essentials-tutorial-message {
+    white-space: pre-line;
+    word-break: break-word;
+}
+
+.overlay-essentials-tutorial-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10000;
+    inset: 0;
+
+    &.overlay-essentials-darken {
+        background-color: rgba(0, 0, 0, 0.6);
+    }
+}
+
+.overlay-essentials-tutorial-highlight-hole {
+    position: fixed;
+    border-radius: 8px;
+    pointer-events: none;
+
+    z-index: 10000;
+
+    border: 2px solid white;
+
+    box-shadow:
+        0 0 0 4px rgba(255,255,255,0.25),
+        0 0 0 9999px rgba(0,0,0,0.6);
+}
+
+
+.overlay-essentials-tutorial-box {
+    background-color: var(--Hellgrau, white);
+    color: var(--HellSchwarz,#2c2c2c);
+    padding: 2rem;
+    border-radius: 12px;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
+    max-width: 500px;
+    width: 90%;
+    animation: fadeIn 0.3s ease-in-out;
+    z-index: 10001;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+.overlay-essentials-tutorial-box div {
+    margin-bottom: 0.5em;
+}
+
+.overlay-essentials-tutorial-box .headline {
+    margin-bottom: 0.75em;
+}
+
+.overlay-essentials-tutorial-box .tutorial-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    margin-top: 1.5rem;
+}
+
+.overlay-essentials-tutorial-box .tutorial-buttons button {
+    font-size: 85%;
+    padding: 0.5rem 1.1rem;
+}
+
+/* ==== Dark Mode Support ==== */
+[visual-theme="dark"] {
+    .tutorial-box {
+        background-color: var(--HellSchwarz,#2c2c2c);
+        color: white;
+    }
+}