tosijs-ui 1.7.2 → 1.7.3

package/dist/index.d.ts

@@ -29,6 +29,7 @@ export * from './menu';
 export * from './month';
 export * from './notifications';
 export * from './password-strength';
+export * from './pocket-bar';
 export * from './pop-float';
 export * from './rating';
 export * from './rich-text';

package/dist/index.js

@@ -29,6 +29,7 @@ export * from './menu';
 export * from './month';
 export * from './notifications';
 export * from './password-strength';
+export * from './pocket-bar';
 export * from './pop-float';
 export * from './rating';
 export * from './rich-text';

package/dist/live-example/code-transform.d.ts

@@ -1,5 +1,19 @@
 import { Dialect, ExampleContext, TransformFn } from './types';
 export declare const AsyncFunction: Function;
+/**
+ * Thrown by `rewriteImports` when an example has a static import the environment
+ * can't satisfy (a non-context package with no import-resolver). This is NOT a code
+ * defect — the code is fine, the doc environment just doesn't provide the dependency
+ * — so the build check treats it as a *warning* (the block is display-only) rather
+ * than a fatal error, and can tell it apart from a real syntax/transpile error.
+ */
+export declare class UnsupportedImportError extends Error {
+    /** The offending `import …` statement. */
+    readonly statement: string;
+    constructor(message: string, 
+    /** The offending `import …` statement. */
+    statement: string);
+}
 /**
  * Sanitize a context module key into a JS identifier used as the binding name
  * in rewritten imports and as the AsyncFunction parameter. Must be applied

package/dist/live-example/code-transform.js

@@ -1,6 +1,23 @@
 export const AsyncFunction = (async () => {
     /* placeholder */
 }).constructor;
+/**
+ * Thrown by `rewriteImports` when an example has a static import the environment
+ * can't satisfy (a non-context package with no import-resolver). This is NOT a code
+ * defect — the code is fine, the doc environment just doesn't provide the dependency
+ * — so the build check treats it as a *warning* (the block is display-only) rather
+ * than a fatal error, and can tell it apart from a real syntax/transpile error.
+ */
+export class UnsupportedImportError extends Error {
+    statement;
+    constructor(message, 
+    /** The offending `import …` statement. */
+    statement) {
+        super(message);
+        this.statement = statement;
+        this.name = 'UnsupportedImportError';
+    }
+}
 /**
  * Sanitize a context module key into a JS identifier used as the binding name
  * in rewritten imports and as the AsyncFunction parameter. Must be applied
@@ -90,12 +107,13 @@ importPrefix = resolverPrefix()) {
     // Anything still a static import is unsupported — fail loudly with the line.
     const leftover = result.match(/^\s*import\s+['"{*\w][^\n]*/m);
     if (leftover) {
-        throw new Error(`live example: unsupported import \`${leftover[0].trim()}\` — imports ` +
+        const statement = leftover[0].trim();
+        throw new UnsupportedImportError(`live example: unsupported import \`${statement}\` — imports ` +
             `from the example context (${contextKeys.join(', ')}) are supported in ` +
             `{ named }, * as ns, or default form` +
             (importPrefix
                 ? `, and other packages resolve via the import-resolver.`
-                : ` (enable importResolver to import other packages).`));
+                : ` (enable importResolver to import other packages).`), statement);
     }
     return result;
 }

package/dist/live-example/component.d.ts

@@ -27,7 +27,7 @@ export declare class LiveExample extends Component<ExampleParts> {
             boxShadow: string;
             overflow: string;
         };
-        ':host.-locally-edited [part="exampleWidgets"]': {
+        ':host.-locally-edited > [part="example"] > [part="exampleWidgets"]': {
             outline: string;
             outlineOffset: string;
             borderRadius: string;
@@ -53,7 +53,7 @@ export declare class LiveExample extends Component<ExampleParts> {
         ':host.-vertical .layout-indicator': {
             transform: string;
         };
-        ':host.-maximize .hide-if-maximized, :host:not(.-maximize) .show-if-maximized': {
+        ':host.-maximize > [part="example"] > [part="exampleWidgets"] .hide-if-maximized, :host:not(.-maximize) > [part="example"] > [part="exampleWidgets"] .show-if-maximized': {
             display: string;
         };
         ':host [part="example"]': {
@@ -89,17 +89,23 @@ export declare class LiveExample extends Component<ExampleParts> {
         };
         ':host [part="exampleWidgets"]': {
             position: string;
-            left: string;
-            bottom: string;
-            '--widget-color': string;
-            borderRadius: string;
-            width: string;
-            height: string;
-            lineHeight: string;
+            top: string;
+            right: string;
             zIndex: string;
+            color: string;
+            '--widget-color': string;
+            '--tosi-pocket-handle-color': string;
+        };
+        ':host [part="exampleWidgets"] button': {
+            '--text-color': string;
         };
-        ':host [part="exampleWidgets"] svg': {
-            stroke: string;
+        ':host [part="exampleWidgets"] .tests-toggle input': {
+            display: string;
+        };
+        ':host [part="exampleWidgets"] .tests-toggle': {
+            opacity: string;
+            filter: string;
+            transition: string;
         };
         ':host .code-editors': {
             overflow: string;
@@ -134,33 +140,6 @@ export declare class LiveExample extends Component<ExampleParts> {
         ':host .sizer': {
             cursor: string;
         };
-        ':host [part="testIndicator"]': {
-            position: string;
-            top: string;
-            right: string;
-            width: string;
-            height: string;
-            borderRadius: string;
-            background: string;
-            zIndex: string;
-            display: string;
-        };
-        ':host.-has-tests [part="testIndicator"]': {
-            display: string;
-            opacity: string;
-        };
-        ':host.-test-running [part="testIndicator"]': {
-            background: string;
-            animation: string;
-        };
-        ':host.-test-passed [part="testIndicator"]': {
-            background: string;
-            animation: string;
-        };
-        ':host.-test-failed [part="testIndicator"]': {
-            background: string;
-            animation: string;
-        };
         '@keyframes test-pulse': {
             '0%, 100%': {
                 opacity: string;
@@ -169,21 +148,14 @@ export declare class LiveExample extends Component<ExampleParts> {
                 opacity: string;
             };
         };
-        '@keyframes test-fade': {
-            '0%': {
-                opacity: string;
-            };
-            '50%': {
-                opacity: string;
-            };
-            '100%': {
-                opacity: string;
-            };
+        ':host.-test-running > [part="example"] > [part="exampleWidgets"]': {
+            '--widget-color': string;
+            animation: string;
         };
-        ':host.-test-passed [part="exampleWidgets"]': {
+        ':host.-test-passed > [part="example"] > [part="exampleWidgets"]': {
             '--widget-color': string;
         };
-        ':host.-test-failed [part="exampleWidgets"]': {
+        ':host.-test-failed > [part="example"] > [part="exampleWidgets"]': {
             '--widget-color': string;
         };
         ':host [part="testResults"]': {
@@ -291,7 +263,8 @@ export declare class LiveExample extends Component<ExampleParts> {
     get isMaximized(): boolean;
     flipLayout: () => void;
     saveToSource: () => Promise<void>;
-    exampleMenu: () => void;
+    handleTestsToggle: (event: Event) => void;
+    updateExampleWidgets: () => void;
     handleShortcuts: (event: KeyboardEvent) => void;
     content: () => any[];
     private buildEditorPanel;

package/dist/live-example/component.js

@@ -413,6 +413,7 @@ import { Component, elements, tosi } from 'tosijs';
 import { codeEditor, CodeEditor } from '../code-editor';
 import { tosiTabs } from '../tab-selector';
 import { icons } from '../icons';
+import { tosiPocketBar } from '../pocket-bar';
 import { postNotification } from '../notifications';
 import { popMenu } from '../menu';
 import { loadTransform, loadTjsTestApi, rewriteImports, contextVarName, AsyncFunction, } from './code-transform';
@@ -423,7 +424,7 @@ import { rewriteExampleBlocks, groupExamples, findFencedBlocks, } from './save-t
 import { exampleEditKey, saveExampleEdit, loadExampleEdit, clearExampleEdit, hasExampleEdit, } from './example-store';
 import { liveExampleStyleSpec } from './styles';
 import { runTests } from './test-harness';
-const { div, tosiSlot, style, button, pre, span } = elements;
+const { div, tosiSlot, style, button, pre, span, label, input } = elements;
 // Test mode: controlled by localStorage, defaults to enabled on localhost
 const TESTS_ENABLED_KEY = 'tosijs-ui-tests-enabled';
 const isLocalhost = typeof window !== 'undefined' &&
@@ -495,7 +496,11 @@ export class LiveExample extends Component {
             return m;
         if (m)
             console.warn(`<tosi-example>: unknown mode "${m}" — running inline`);
-        return this.iframe ? 'iframe' : 'inline';
+        // STRICT boolean: only an explicit `true` means iframe. `iframe` is a
+        // presence-only boolean attribute aliasing mode; a loose `this.iframe ?` would
+        // treat a stray non-boolean value ('', 'false', an attribute string) as truthy
+        // and silently force EVERY example into an iframe. Default is inline.
+        return this.iframe === true ? 'iframe' : 'inline';
     }
     prefix = 'lx';
     storageKey = STORAGE_KEY;
@@ -874,43 +879,21 @@ export class LiveExample extends Component {
             window.alert('Save failed.');
         }
     };
-    exampleMenu = () => {
-        const testsOn = testManager.enabled.value;
-        popMenu({
-            target: this.parts.exampleWidgets,
-            width: 'auto',
-            menuItems: [
-                {
-                    icon: 'edit2',
-                    caption: 'view/edit code',
-                    action: this.showCode,
-                },
-                {
-                    icon: 'edit',
-                    caption: 'view/edit code in a new window',
-                    action: this.openEditorWindow,
-                },
-                null,
-                {
-                    icon: this.isMaximized ? 'minimize' : 'maximize',
-                    caption: this.isMaximized ? 'restore preview' : 'maximize preview',
-                    action: this.toggleMaximize,
-                },
-                null,
-                {
-                    icon: testsOn ? 'check' : '',
-                    caption: 'Run tests',
-                    action: () => {
-                        if (testsOn) {
-                            disableTests();
-                        }
-                        else {
-                            enableTests();
-                        }
-                    },
-                },
-            ],
-        });
+    handleTestsToggle = (event) => {
+        if (event.target.checked)
+            enableTests();
+        else
+            disableTests();
+    };
+    // The maximize icon + title toggle purely in CSS (.hide-if-maximized /
+    // .show-if-maximized); only the run-tests checkbox needs a JS sync so its state
+    // is correct on first paint and after the global flag changes. (Its greyed /
+    // monochrome look keys off the --tests-enabled CSS var, which is global.)
+    updateExampleWidgets = () => {
+        if (!this.hydrated)
+            return;
+        if (this.parts.testsCheckbox)
+            this.parts.testsCheckbox.checked = testManager.enabled.value;
     };
     handleShortcuts = (event) => {
         if (event.metaKey || event.ctrlKey) {
@@ -938,11 +921,14 @@ export class LiveExample extends Component {
         }
     };
     content = () => [
-        div({ part: 'example' }, style({ part: 'style' }), div({ part: 'testIndicator', title: 'test status' }), pre({ part: 'testResults', hidden: true }), button({
-            title: 'example menu',
-            part: 'exampleWidgets',
-            onClick: this.exampleMenu,
-        }, icons.code())),
+        div({ part: 'example' }, style({ part: 'style' }), pre({ part: 'testResults', hidden: true }), 
+        // The example toolbar: a pocket bar whose collapsed `<>` handle carries the
+        // test-status colour (via --widget-color). Pinned top-right, growing left, so
+        // it never covers the editor in side-by-side mode.
+        tosiPocketBar({ part: 'exampleWidgets', icon: 'code', direction: 'w' }, button({ title: 'view/edit code', onClick: this.showCode }, icons.edit2()), button({ title: 'view/edit code in a new window', onClick: this.openEditorWindow }, icons.edit()), button({ title: 'toggle preview size', onClick: this.toggleMaximize }, 
+        // Both icons render; the existing .hide-if-maximized / .show-if-maximized
+        // CSS shows the right one for the current state — no JS icon swap.
+        icons.maximize({ class: 'hide-if-maximized' }), icons.minimize({ class: 'show-if-maximized' })), label({ class: 'tests-toggle', title: 'run tests' }, input({ type: 'checkbox', part: 'testsCheckbox', onChange: this.handleTestsToggle }), icons.check()))),
         // Empty until first showCode. buildEditorPanel() fills it lazily so a reader
         // who never opens a panel never constructs a <tosi-code> (and never pulls the
         // CodeMirror chunk). See ensureEditors().
@@ -1046,6 +1032,10 @@ export class LiveExample extends Component {
         // does not fire reliably during page unload.
         this.beforeUnloadHandler = () => this.remoteSync?.sendClose();
         addEventListener('beforeunload', this.beforeUnloadHandler);
+        // Reflect maximize state + tests-enabled on the pocket-bar controls. The
+        // run-tests icon greys globally via the --tests-enabled CSS var (maintained on
+        // <body>), so no per-instance observer is needed to keep examples in sync.
+        this.updateExampleWidgets();
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -1505,12 +1495,13 @@ export class LiveExample extends Component {
         }
     };
     displayTestResults() {
-        const { testResults: resultsEl, testIndicator } = this.parts;
+        const { testResults: resultsEl, exampleWidgets } = this.parts;
         const results = this.testResults;
         if (!results || results.tests.length === 0) {
             resultsEl.hidden = true;
             this.classList.remove('-test-passed', '-test-failed');
-            testIndicator.title = 'no tests';
+            if (exampleWidgets)
+                exampleWidgets.title = 'no tests';
             return;
         }
         resultsEl.innerHTML = '';
@@ -1526,11 +1517,12 @@ export class LiveExample extends Component {
         }
         this.classList.toggle('-test-passed', results.failed === 0);
         this.classList.toggle('-test-failed', results.failed > 0);
-        // Update indicator title
-        testIndicator.title =
-            results.failed === 0
-                ? `${results.passed} tests passed`
-                : `${results.failed}/${results.tests.length} tests failed`;
+        // The `<>` handle colour shows pass/fail; its tooltip carries the detail.
+        if (exampleWidgets)
+            exampleWidgets.title =
+                results.failed === 0
+                    ? `${results.passed} tests passed`
+                    : `${results.failed}/${results.tests.length} tests failed`;
         // Update visibility based on tab and failure status
         this.updateTestResultsVisibility();
         // Dispatch event for doc-browser to track results
@@ -1584,6 +1576,7 @@ export class LiveExample extends Component {
     }
     render() {
         super.render();
+        this.updateExampleWidgets();
         if (this.remoteId !== '') {
             const data = localStorage.getItem(this.storageKey);
             if (data !== null) {

package/dist/live-example/styles.d.ts

@@ -14,7 +14,7 @@ export declare const liveExampleStyleSpec: {
         boxShadow: string;
         overflow: string;
     };
-    ':host.-locally-edited [part="exampleWidgets"]': {
+    ':host.-locally-edited > [part="example"] > [part="exampleWidgets"]': {
         outline: string;
         outlineOffset: string;
         borderRadius: string;
@@ -40,7 +40,7 @@ export declare const liveExampleStyleSpec: {
     ':host.-vertical .layout-indicator': {
         transform: string;
     };
-    ':host.-maximize .hide-if-maximized, :host:not(.-maximize) .show-if-maximized': {
+    ':host.-maximize > [part="example"] > [part="exampleWidgets"] .hide-if-maximized, :host:not(.-maximize) > [part="example"] > [part="exampleWidgets"] .show-if-maximized': {
         display: string;
     };
     ':host [part="example"]': {
@@ -76,17 +76,23 @@ export declare const liveExampleStyleSpec: {
     };
     ':host [part="exampleWidgets"]': {
         position: string;
-        left: string;
-        bottom: string;
-        '--widget-color': string;
-        borderRadius: string;
-        width: string;
-        height: string;
-        lineHeight: string;
+        top: string;
+        right: string;
         zIndex: string;
+        color: string;
+        '--widget-color': string;
+        '--tosi-pocket-handle-color': string;
+    };
+    ':host [part="exampleWidgets"] button': {
+        '--text-color': string;
     };
-    ':host [part="exampleWidgets"] svg': {
-        stroke: string;
+    ':host [part="exampleWidgets"] .tests-toggle input': {
+        display: string;
+    };
+    ':host [part="exampleWidgets"] .tests-toggle': {
+        opacity: string;
+        filter: string;
+        transition: string;
     };
     ':host .code-editors': {
         overflow: string;
@@ -121,33 +127,6 @@ export declare const liveExampleStyleSpec: {
     ':host .sizer': {
         cursor: string;
     };
-    ':host [part="testIndicator"]': {
-        position: string;
-        top: string;
-        right: string;
-        width: string;
-        height: string;
-        borderRadius: string;
-        background: string;
-        zIndex: string;
-        display: string;
-    };
-    ':host.-has-tests [part="testIndicator"]': {
-        display: string;
-        opacity: string;
-    };
-    ':host.-test-running [part="testIndicator"]': {
-        background: string;
-        animation: string;
-    };
-    ':host.-test-passed [part="testIndicator"]': {
-        background: string;
-        animation: string;
-    };
-    ':host.-test-failed [part="testIndicator"]': {
-        background: string;
-        animation: string;
-    };
     '@keyframes test-pulse': {
         '0%, 100%': {
             opacity: string;
@@ -156,21 +135,14 @@ export declare const liveExampleStyleSpec: {
             opacity: string;
         };
     };
-    '@keyframes test-fade': {
-        '0%': {
-            opacity: string;
-        };
-        '50%': {
-            opacity: string;
-        };
-        '100%': {
-            opacity: string;
-        };
+    ':host.-test-running > [part="example"] > [part="exampleWidgets"]': {
+        '--widget-color': string;
+        animation: string;
     };
-    ':host.-test-passed [part="exampleWidgets"]': {
+    ':host.-test-passed > [part="example"] > [part="exampleWidgets"]': {
         '--widget-color': string;
     };
-    ':host.-test-failed [part="exampleWidgets"]': {
+    ':host.-test-failed > [part="example"] > [part="exampleWidgets"]': {
         '--widget-color': string;
     };
     ':host [part="testResults"]': {

package/dist/live-example/styles.js

@@ -19,10 +19,14 @@ export const liveExampleStyleSpec = {
         boxShadow: 'inset 0 0 0 2px #8883',
         overflow: 'hidden',
     },
-    // Local-edit indicator: an accent outline on the always-visible `<>` example
-    // button (bottom-left) when this example differs from its doc source — visible
-    // whether or not the code editor is open (e.g. an auto-restored saved edit).
-    ':host.-locally-edited [part="exampleWidgets"]': {
+    // Local-edit indicator: an accent outline on the always-visible `<>` handle when
+    // this example differs from its doc source. NB every `:host.STATE [part=…]` rule
+    // in this file uses `> [part="example"] > [part="exampleWidgets"]`, not a bare
+    // descendant: a light-DOM `:host` is a global `tosi-example …` selector, so a
+    // descendant combinator would leak a CONTAINER example's state class onto a
+    // NESTED example's widget (the self-hosting demo). The child chain pins each rule
+    // to the example's own direct toolbar.
+    ':host.-locally-edited > [part="example"] > [part="exampleWidgets"]': {
         outline: '2px solid var(--brand-color, #da1167)',
         outlineOffset: '1px',
         borderRadius: '4px',
@@ -48,7 +52,9 @@ export const liveExampleStyleSpec = {
     ':host.-vertical .layout-indicator': {
         transform: 'rotateZ(180deg)',
     },
-    ':host.-maximize .hide-if-maximized, :host:not(.-maximize) .show-if-maximized': {
+    // Maximize/restore icon toggle — scoped to the example's own toolbar so a
+    // container example's -maximize doesn't hide a nested example's maximize icon.
+    ':host.-maximize > [part="example"] > [part="exampleWidgets"] .hide-if-maximized, :host:not(.-maximize) > [part="example"] > [part="exampleWidgets"] .show-if-maximized': {
         display: 'none',
     },
     ':host [part="example"]': {
@@ -86,23 +92,42 @@ export const liveExampleStyleSpec = {
         height: '100%',
         position: 'relative',
     },
+    // The example toolbar (a <tosi-pocket-bar>), pinned top-right so it never covers
+    // the editor in side-by-side mode. Only the collapsed `<>` handle carries the
+    // test-status colour — the action buttons stay neutral — via the pocket bar's
+    // --tosi-pocket-handle-color (the -test-* rules below drive --widget-color).
     ':host [part="exampleWidgets"]': {
         position: 'absolute',
-        left: '5px',
-        bottom: '5px',
-        '--widget-color': 'var(--brand-color)',
-        borderRadius: '5px',
-        width: '44px',
-        height: '44px',
-        lineHeight: '44px',
+        top: '5px',
+        right: '5px',
         zIndex: '100',
+        // Action controls are neutral (text colour); only the handle carries status.
+        color: 'var(--text-color)',
+        '--widget-color': 'var(--brand-color)',
+        '--tosi-pocket-handle-color': 'var(--widget-color)',
+    },
+    // The doc site brand-colours bare <button>s by overriding --text-color ON the
+    // button (a link affordance). Revert it here so the toolbar's icon buttons are
+    // neutral, matching the check <label> (which the button rule never touched).
+    ':host [part="exampleWidgets"] button': {
+        '--text-color': 'inherit',
+    },
+    // Run-tests toggle: the native checkbox is hidden; its icon is full-colour when
+    // tests are on and greyed + monochrome when off. --tests-enabled (0|1, set on
+    // <body>) is global, so every example's toggle stays in sync with no JS.
+    ':host [part="exampleWidgets"] .tests-toggle input': {
+        display: 'none',
     },
-    ':host [part="exampleWidgets"] svg': {
-        stroke: 'var(--widget-color)',
+    ':host [part="exampleWidgets"] .tests-toggle': {
+        opacity: 'calc(0.4 + 0.6 * var(--tests-enabled, 0))',
+        filter: 'grayscale(calc(1 - var(--tests-enabled, 0)))',
+        transition: 'opacity 0.2s, filter 0.2s',
     },
     ':host .code-editors': {
         overflow: 'hidden',
-        background: 'white',
+        // Match the editor surface (neutral off-white; off-black in dark mode) instead
+        // of a hardcoded white that wouldn't adapt.
+        background: 'var(--code-bg, #fdfdfd)',
         position: 'relative',
         top: '0',
         right: '0',
@@ -133,47 +158,21 @@ export const liveExampleStyleSpec = {
     ':host .sizer': {
         cursor: 'nwse-resize',
     },
-    // Test status indicator (--tests-enabled CSS var pierces shadow DOM)
-    ':host [part="testIndicator"]': {
-        position: 'absolute',
-        top: '8px',
-        right: '8px',
-        width: '12px',
-        height: '12px',
-        borderRadius: '50%',
-        background: '#888',
-        zIndex: '100',
-        display: 'none',
-    },
-    ':host.-has-tests [part="testIndicator"]': {
-        display: 'block',
-        opacity: 'var(--tests-enabled, 1)',
-    },
-    ':host.-test-running [part="testIndicator"]': {
-        background: '#fa0',
-        animation: 'test-pulse 0.5s ease-in-out infinite',
-    },
-    ':host.-test-passed [part="testIndicator"]': {
-        background: '#0a0',
-        animation: 'test-fade 2s ease-out forwards',
-    },
-    ':host.-test-failed [part="testIndicator"]': {
-        background: '#c00',
-        animation: 'test-pulse 1s ease-in-out infinite',
-    },
     '@keyframes test-pulse': {
         '0%, 100%': { opacity: '1' },
         '50%': { opacity: '0.4' },
     },
-    '@keyframes test-fade': {
-        '0%': { opacity: '1' },
-        '50%': { opacity: '1' },
-        '100%': { opacity: '0' },
+    // Test status colours the `<>` handle (via --widget-color → the pocket bar's
+    // --tosi-pocket-handle-color). The handle is translucent at rest, so the colour
+    // reads as a subtle tint until you hover.
+    ':host.-test-running > [part="example"] > [part="exampleWidgets"]': {
+        '--widget-color': '#fa0',
+        animation: 'test-pulse 0.75s ease-in-out infinite',
     },
-    ':host.-test-passed [part="exampleWidgets"]': {
+    ':host.-test-passed > [part="example"] > [part="exampleWidgets"]': {
         '--widget-color': '#0a0',
     },
-    ':host.-test-failed [part="exampleWidgets"]': {
+    ':host.-test-failed > [part="example"] > [part="exampleWidgets"]': {
         '--widget-color': '#f00',
     },
     ':host [part="testResults"]': {

package/dist/live-example/types.d.ts

@@ -9,14 +9,14 @@ export interface ExampleParts extends PartsMap {
     codeEditors: HTMLElement;
     undo: HTMLButtonElement;
     redo: HTMLButtonElement;
-    exampleWidgets: HTMLButtonElement;
+    exampleWidgets: HTMLElement;
+    testsCheckbox: HTMLInputElement;
     editors: TosiTabs;
     code: HTMLElement;
     sources: HTMLElement;
     style: HTMLStyleElement;
     example: HTMLElement;
     testResults: HTMLElement;
-    testIndicator: HTMLElement;
     js: CodeEditor;
     html: CodeEditor;
     css: CodeEditor;