tosijs-ui 1.4.8 → 1.4.9

package/dist/data-table.js

@@ -72,10 +72,10 @@ preview.append(tosiTable({
 }
 ```
 ```test
-const table = await new Promise(resolve => {
+const table = await waitFor('tosi-table')
+await new Promise(resolve => {
   const check = () => {
-    const t = preview.querySelector('tosi-table')
-    if (t && t.visibleRows.length > 0) return resolve(t)
+    if (table.visibleRows.length > 0) return resolve()
     setTimeout(check, 100)
   }
   check()
@@ -84,18 +84,25 @@ const table = await new Promise(resolve => {
 test('table renders with data', () => {
   expect(table.multiple).toBe(true)
   expect(table.visibleRows.length).toBeGreaterThan(0)
+  expect(table.array.length).toBeGreaterThan(0)
 })
 
-test('row selection works', () => {
-  const rows = table.visibleRows
+test('row selection via data model', () => {
+  const items = table.array
   table.deSelect()
-  table.selectRow(rows[0])
-  table.selectRow(rows[1])
+  table.selectRow(items[0])
+  table.selectRow(items[1])
+
+  // Data model reflects selection immediately
+  expect(items[0][table.selectedKey]).toBe(true)
+  expect(items[1][table.selectedKey]).toBe(true)
   expect(table.selectedRows.length).toBe(2)
-  expect(table.querySelectorAll('.tr[aria-selected]').length).toBe(2)
+
+  // Deselect and verify data model
   table.deSelect()
   expect(table.selectedRows.length).toBe(0)
-  expect(table.querySelectorAll('.tr[aria-selected]').length).toBe(0)
+  expect(items[0][table.selectedKey]).not.toBe(true)
+  expect(items[1][table.selectedKey]).not.toBe(true)
 })
 ```
 

package/dist/doc-browser.js

@@ -709,7 +709,7 @@ export function createDocBrowser(options) {
         // Create a hidden iframe to run tests in background
         const testFrame = document.createElement('iframe');
         testFrame.style.cssText =
-            'position: fixed; left: -9999px; width: 800px; height: 600px; visibility: hidden;';
+            'position: fixed; left: 0; top: 0; width: 800px; height: 600px; opacity: 0; pointer-events: none;';
         document.body.appendChild(testFrame);
         const currentFilename = String(app.currentDoc.filename);
         for (const doc of docsWithTests) {
@@ -750,8 +750,27 @@ export function createDocBrowser(options) {
             if (frameDoc) {
                 frameDoc.body.innerHTML = '';
                 frameDoc.body.appendChild(testContainer);
-                // Wait for all live examples to finish rendering/testing
-                await new Promise((resolve) => setTimeout(resolve, 500));
+                // Wait for all live examples with tests to finish (max 30s per page)
+                await new Promise((resolve) => {
+                    const deadline = Date.now() + 30_000;
+                    const checkDone = () => {
+                        if (Date.now() > deadline) {
+                            resolve();
+                            return;
+                        }
+                        const examples = testContainer.querySelectorAll('tosi-example');
+                        const withTests = [...examples].filter((ex) => ex.classList.contains('-has-tests'));
+                        const running = withTests.filter((ex) => ex.classList.contains('-test-running'));
+                        if (withTests.length > 0 && running.length === 0) {
+                            resolve();
+                        }
+                        else {
+                            setTimeout(checkDone, 100);
+                        }
+                    };
+                    // Give initial render time to start
+                    setTimeout(checkDone, 200);
+                });
             }
             markPageTested(doc.filename);
         }

package/dist/header.d.ts

@@ -0,0 +1,54 @@
+import { Component, ElementCreator, elements } from 'tosijs';
+export declare class TosiHeader extends Component {
+    static preferredTagName: string;
+    static shadowStyleSpec: {
+        ':host': {
+            display: string;
+            alignItems: string;
+            padding: string;
+            background: string;
+            lineHeight: string;
+            gap: string;
+        };
+        '::slotted(*)': {
+            display: string;
+            alignItems: string;
+        };
+    };
+    content: ({ slot }: typeof elements) => HTMLSlotElement[];
+}
+export declare const tosiHeader: ElementCreator<TosiHeader>;
+export interface HeaderLinks {
+    github?: string;
+    npm?: string;
+    discord?: string;
+    blog?: string;
+    tosijs?: string;
+    [key: string]: string | undefined;
+}
+export declare class TosiHeaderLinks extends Component {
+    static preferredTagName: string;
+    static lightStyleSpec: {
+        ':host': {
+            display: string;
+            alignItems: string;
+            gap: string;
+        };
+        ':host a': {
+            color: string;
+            textDecoration: string;
+            display: string;
+            alignItems: string;
+            padding: string;
+            opacity: string;
+            cursor: string;
+        };
+        ':host a:hover': {
+            opacity: string;
+        };
+    };
+    links: HeaderLinks;
+    content: null;
+    render(): void;
+}
+export declare const tosiHeaderLinks: ElementCreator<TosiHeaderLinks>;

package/dist/header.js

@@ -0,0 +1,156 @@
+/*#
+# header
+
+A simple flex header. Compose it with `elastic()` and `spacer()` from
+`layout` to arrange content however you like.
+
+## Basic Header
+
+```html
+<tosi-header>
+  <h2 class="header-part">My App</h2>
+</tosi-header>
+```
+```css
+.header-part {
+  color: white;
+  margin: 0;
+  line-height: 32px;
+}
+```
+
+## Header with Menu
+
+Use `elastic()` to push the menu to the right:
+
+```js
+import { elements } from 'tosijs'
+import { tosiHeader, tosiMenu, elastic, icons } from 'tosijs-ui'
+
+const menu = tosiMenu({ class: 'menu-demo' }, icons.moreVertical())
+menu.menuItems = [
+  { caption: 'About', tooltip: 'Learn more about this app', action() { alert('About!') } },
+  { caption: 'Settings', icon: 'settings', tooltip: 'Appearance options', menuItems: [
+    { caption: 'Dark Mode' },
+    { caption: 'High Contrast' },
+  ]},
+]
+
+preview.append(
+  tosiHeader(
+    { class: 'menu-demo' },
+    elements.h2({ class: 'menu-demo' }, 'Demo'),
+    elastic(),
+    menu,
+  )
+)
+```
+```css
+.menu-demo * {
+  color: white;
+  margin: 0;
+  --text-color: white;
+  --button-bg: transparent;
+}
+.menu-demo button:hover {
+  background: #fff4;
+}
+```
+
+## Header with Links
+
+Use `elastic()` to push `<tosi-header-links>` to the right:
+
+```js
+import { elements } from 'tosijs'
+import { tosiHeader, tosiHeaderLinks, elastic } from 'tosijs-ui'
+
+preview.append(
+  tosiHeader(
+    { class: 'links-demo' },
+    elements.h2({ class: 'links-demo' }, 'My Project'),
+    elastic(),
+    tosiHeaderLinks({
+      links: {
+        github: 'https://github.com/example/project',
+        npm: 'https://www.npmjs.com/package/example',
+        discord: 'https://discord.gg/example',
+      },
+    })
+  )
+)
+```
+```css
+.links-demo {
+  color: white;
+  margin: 0;
+}
+```
+*/
+import { Component, elements, varDefault } from 'tosijs';
+import { icons } from './icons';
+const { a } = elements;
+// ============================================================================
+// Header Component
+// ============================================================================
+export class TosiHeader extends Component {
+    static preferredTagName = 'tosi-header';
+    static shadowStyleSpec = {
+        ':host': {
+            display: 'flex',
+            alignItems: 'center',
+            padding: varDefault.tosiHeaderPadding('12px 24px'),
+            background: varDefault.tosiHeaderBg('var(--tosi-accent, #EE257B)'),
+            lineHeight: varDefault.tosiHeaderLineHeight('32px'),
+            gap: varDefault.tosiHeaderGap('8px'),
+        },
+        '::slotted(*)': {
+            display: 'inline-flex',
+            alignItems: 'center',
+        },
+    };
+    content = ({ slot }) => [slot()];
+}
+export const tosiHeader = TosiHeader.elementCreator();
+const linkIcons = {
+    tosijs: () => icons.tosi(),
+    discord: () => icons.discord(),
+    blog: () => icons.blog(),
+    github: () => icons.github(),
+    npm: () => icons.npm(),
+};
+export class TosiHeaderLinks extends Component {
+    static preferredTagName = 'tosi-header-links';
+    static lightStyleSpec = {
+        ':host': {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '4px',
+        },
+        ':host a': {
+            color: 'inherit',
+            textDecoration: 'none',
+            display: 'inline-flex',
+            alignItems: 'center',
+            padding: '4px',
+            opacity: '0.8',
+            cursor: 'pointer',
+        },
+        ':host a:hover': {
+            opacity: '1',
+        },
+    };
+    links = {};
+    content = null;
+    render() {
+        super.render();
+        const fragment = [];
+        for (const [key, url] of Object.entries(this.links)) {
+            if (!url || !linkIcons[key])
+                continue;
+            fragment.push(a({ title: key, target: '_blank', href: url }, linkIcons[key]()));
+        }
+        this.replaceChildren(...fragment);
+    }
+}
+export const tosiHeaderLinks = TosiHeaderLinks.elementCreator();