tosijs-ui 1.16.21 → 1.16.23

package/dist/index.d.ts

@@ -20,6 +20,7 @@ export * from './layout.js';
 export * from './live-theme.js';
 export * from './localize.js';
 export { makeSorter } from './make-sorter.js';
+export { naturalCompare, naturalSorter, isBlank } from './natural-compare.js';
 export * from './mapbox.js';
 export * from './match-shortcut.js';
 export * from './markdown-viewer.js';

package/dist/index.js

@@ -70,6 +70,7 @@ export * from './layout.js';
 export * from './live-theme.js';
 export * from './localize.js';
 export { makeSorter } from './make-sorter.js';
+export { naturalCompare, naturalSorter, isBlank } from './natural-compare.js';
 export * from './mapbox.js';
 export * from './match-shortcut.js';
 export * from './markdown-viewer.js';

package/dist/live-example/component.js

@@ -583,10 +583,9 @@ attribute directly.
   `tosijs`/`tosijs-ui` are the host's own instances, so `tosi()` singletons stay shared;
   namespace your state to keep examples from stomping each other. (The boolean `iframe`
   attribute is a back-compat alias for `mode="iframe"`.)
-- **`ide`** — fully sandboxed: real, **published** dependencies (all imports resolved by
-  the import-resolver, not your working copy) in an isolated realm — the standalone-app
-  mode, for running arbitrary code rather than demoing the library under development.
-  *(Recognized now; its distinct real-module execution is in progress.)*
+- **`ide`** — reserved for a fully sandboxed mode (published dependencies in an isolated
+  realm). **Today it runs exactly like `iframe`**, so don't choose it for isolation it does
+  not yet provide.
 
 *Fully-isolated examples (a separate module realm, so even `tosi()` state and
 imported dependencies are sandboxed — the way tjs-lang's playgrounds do it with a

package/dist/menu.js

@@ -98,7 +98,7 @@ const menuItems = [
       {
         icon: 'tosi',
         caption: 'tosi',
-        action: 'https://xinjs.net'
+        action: 'https://tosijs.net'
       },
       {
         icon: 'tosiPlatform',
@@ -373,7 +373,7 @@ way.
 
 ## Localization
 
-If you set `localized: true` in `PopMenuOptions` then menu captions will be be
+If you set `localized: true` in `PopMenuOptions` then menu captions will be
 passed through `localize`. You'll need to provide the appropriate localized strings,
 of course.
 

package/dist/natural-compare.js

@@ -1,8 +1,7 @@
+/*{ "parent": "Helper Libraries" }*/
 /*#
 # naturalCompare
 
-<!--{ "parent": "Helper Libraries" }-->
-
 Comparing values the way a reader expects, for sorting tables, navs and lists.
 
 ```js
@@ -12,6 +11,11 @@ const rows = ['9', '399', '1200', '3.5', '40']
 preview.textContent = rows.slice().sort(naturalCompare).join(', ')
 // 3.5, 9, 40, 399, 1200   — not 1200, 3.5, 399, 40, 9
 ```
+```test
+test('numeric strings sort numerically', () => {
+  expect(preview.textContent).toBe('3.5, 9, 40, 399, 1200')
+})
+```
 
 A raw `>` compares strings **lexically**, so any column of numeric strings sorts by first
 digit — and real data is full of them: CSV and TSV imports, BigQuery exports, JSON where

package/dist/password-strength.js

@@ -1,7 +1,7 @@
 /*#
 # password strength
 
-Just wrap it a `<tosi-password-strength>` element around an `<input>`
+Just wrap a `<tosi-password-strength>` element around an `<input>`
 and it will gauge its content strength as a password. It will also
 let you **securely verify** that the password hasn't been breached.
 

package/dist/pocket-bar.js

@@ -70,7 +70,7 @@ them to see the bar grow in its `direction`.
 
 ## Attributes
 
-- `icon` — the handle icon (any icon name or [composition](icon-composition)). By
+- `icon` — the handle icon (any icon name or [composition](/icon-composition/)). By
   default it hints the growth axis: `moreHorizontal` (⋯) for a horizontal bar,
   `moreVertical` (⋮) for a vertical one.
 - `direction` — where the bar grows, using the `FloatPosition` vocabulary
@@ -78,7 +78,7 @@ them to see the bar grow in its `direction`.
   (the default) grows a **horizontal** bar toward the nearer edge of the screen.
   `e` / `w` (and `en` / `es` / `wn` / `ws`) grow a horizontal bar; `n` / `s` (and
   `ne` / `nw` / `se` / `sw`) grow a **vertical** one. The bar is placed
-  edge-contiguous with the handle via [positionFloat](popFloat).
+  edge-contiguous with the handle via [positionFloat](/pop-float/).
 - `open` — reflects the open state. Hover / focus / tap peek it open; clicking the
   handle keeps it open until you click the handle again or click outside.
 

package/dist/segmented.js

@@ -138,6 +138,7 @@ The following CSS variables can be used to control customize the `<tosi-segmente
 import { elements, varDefault, deprecated, withAttributes, } from 'tosijs';
 import { icons } from './icons.js';
 import { tosiLocalized } from './localize.js';
+import { splitCaptionIcon } from './caption-icon.js';
 const { div, slot, label, span, input } = elements;
 export class TosiSegmented extends withAttributes({
     direction: 'row',
@@ -170,9 +171,7 @@ export class TosiSegmented extends withAttributes({
             .filter((c) => c.trim() !== '')
             .map((c) => {
             const [value, remains] = c.split('=').map((v) => v.trim());
-            const [caption, iconName] = (remains || value)
-                .split(':')
-                .map((v) => v.trim());
+            const [caption, iconName] = splitCaptionIcon(remains || value);
             const icon = iconName ? icons[iconName]() : '';
             return { value, icon, caption };
         });
@@ -363,7 +362,7 @@ export class TosiSegmented extends withAttributes({
     get _choicesWithOther() {
         const options = [...this.choices];
         if (this.other && !this.multiple) {
-            const [caption, icon] = this.other.split(':');
+            const [caption, icon] = splitCaptionIcon(this.other);
             options.push({
                 value: '',
                 caption,

package/dist/select.js

@@ -211,6 +211,7 @@ import { elements, vars, throttle, deprecated, withAttributes, } from 'tosijs';
 import { icons } from './icons.js';
 import { popMenu, removeLastMenu, resolveMenuItems, findShortcutAction, } from './menu.js';
 import { localize, XinLocalized } from './localize.js';
+import { splitCaptionIcon } from './caption-icon.js';
 const { button, span, input } = elements;
 const hasValue = (options, value) => {
     return !!options.find((option) => {
@@ -320,7 +321,7 @@ export class TosiSelect extends withAttributes({
                 // Simple format: just "value" means value=caption
                 return { value, caption: value };
             }
-            const [caption, iconName] = remains.split(':').map((v) => v.trim());
+            const [caption, iconName] = splitCaptionIcon(remains);
             return {
                 value,
                 caption: caption || value,

package/dist/size-break.js

@@ -3,9 +3,10 @@ const { slot } = elements;
 /*#
 # size-break
 
-While we wait for enough browsers to implement [container-queries](https://www.w3.org/TR/css-contain-3/),
-and in any event when you simply want to do different things at different sizes (e.g. in the project I'm
-working on right now, a row of buttons turns into a menu at narrow widths) there's `<tosi-sizebreak>`.
+`<tosi-sizebreak>` shows different content at different sizes, for example a row of buttons
+that becomes a menu when there is no room for it. [Container
+queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_size_and_style_queries)
+can restyle content by size; this swaps the content itself, without CSS.
 
 Note that the sizes referred to are of the `<tosi-sizebreak>`'s `.offsetParent`, and it watches for
 the window's `resize` events and its own (via `ResizeObserver`).

package/dist/track-drag.js

@@ -96,7 +96,7 @@ console warning about handlers that delay scrolling, and that warning only ever
 
 ## findHighestZ
 
-`findHighestZ(selector = 'body *'): number` returns the the highest `z-index` of any element
+`findHighestZ(selector = 'body *'): number` returns the highest `z-index` of any element
 matching `selector`.
 */
 /*{ "parent": "Helper Libraries" }*/

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "1.16.21";
+export declare const version = "1.16.23";

package/dist/version.js

@@ -1 +1 @@
-export const version = '1.16.21';
+export const version = '1.16.23';

package/llms.txt

@@ -1,4 +1,4 @@
-# tosijs-ui v1.16.21
+# tosijs-ui v1.16.23
 
 Simple, robust web-components for use with tosijs or anything else.
 
@@ -30,7 +30,7 @@ don't clobber each other; the `iframe` attribute isolates DOM/CSS, not state.
 - https://ui.tosijs.net/adopting-the-doc-system/ — Adopting the doc system
   A first hour with tosijs-ui/site: the minimum that works, how to tell it is actually working, and the four things that fail silently while the site still serves 200s.
 - https://ui.tosijs.net/appendices/ — Appendices
-  Reference material on the library's own systems — the doc browser, the
+  Upgrading and release tooling.
 - https://ui.tosijs.net/carousel/ — carousel
   This is a minimalist carousel component that supports the usual stuff.
 - https://ui.tosijs.net/code-editor/ — code
@@ -46,13 +46,15 @@ don't clobber each other; the `iframe` attribute isolates DOM/CSS, not state.
 - https://ui.tosijs.net/diff/ — diff
   `<tosi-diff>` renders a unified, line-by-line diff between two strings — the kind
 - https://ui.tosijs.net/doc-browser/ — doc-browser
-  The `tosijs-ui` library provides everything you need to create a self-documented testbed similar
+  `createDocBrowser()` renders a documentation corpus as a browsable, searchable testbed with
 - https://ui.tosijs.net/doc-site-system/ — Doc-Site System
   How tosijs-ui's static, pre-rendered, hydrating documentation-site system works — and how to adopt it (tosijs-ui/site) in your own project.
 - https://ui.tosijs.net/doc-system/ — doc-system
   `<tosi-doc-system>` turns a folder of pre-rendered, statically-served pages into a
 - https://ui.tosijs.net/docs/ — docs
-  Utility for extracting documentation from markdown files and inline comments in source code.
+  `extractDocs` collects documentation from markdown files and `/*#` comment blocks in source
+- https://ui.tosijs.net/documentation-system/ — Documentation System
+  tosijs-ui/site: turn markdown and doc comments into a static, pre-rendered documentation site with live, self-testing examples, an ePub and print.
 - https://ui.tosijs.net/drag-and-drop/ — drag & drop
   A lightweight library that leverages HTML5 drag and drop behavior.
 - https://ui.tosijs.net/editable-rect/ — editable-rect
@@ -80,7 +82,7 @@ don't clobber each other; the `iframe` attribute isolates DOM/CSS, not state.
 - https://ui.tosijs.net/highlight-block/ — highlight-block
   `<tosi-highlight>` pretty-prints a static code sample. It is **not** an editor — for that
 - https://ui.tosijs.net/highlight-styles/ — highlight-styles
-  The syntax-highlighting token palette, on its own.
+  The syntax-highlighting token palette, on its own. The package ships no CSS files (every
 - https://ui.tosijs.net/icon-composition/ — Icon Composition
   This is a toy for playing with the icon composition language introduced in tosijs-ui 1.5.10. It's documented [here](/...
 - https://ui.tosijs.net/icons/ — icons
@@ -108,7 +110,7 @@ don't clobber each other; the `iframe` attribute isolates DOM/CSS, not state.
 - https://ui.tosijs.net/menu/ — menu
   Being able to pop a menu up anywhere is just so nice, and `tosijs-ui` allows menus
 - https://ui.tosijs.net/migrating/ — Migrating from older versions
-  Breaking changes and migration checklists for tosijs-ui releases you may be upgrading past — 1.16.0's tosijs 1.10 typing and sanitize-by-default, 1.11.0's validator seam, 1.9.1's Node resolution fix, 1.7.0's editor change and the 1.3.0 xinjs-ui rename.
+  Breaking changes and migration checklists for tosijs-ui releases you may be upgrading past — 1.16.21's tosijs floor, 1.16.19's throwing iconSvg, 1.16.17's tjs-lang 0.14, 1.16.0's tosijs 1.10 typing and sanitize-by-default, 1.11.0's validator seam, 1.9.1's Node resolution fix, 1.7.0's editor change and the 1.3.0 xinjs-ui rename.
 - https://ui.tosijs.net/month/ — month
   This is a component for displaying a month and selecting days within that month.
 - https://ui.tosijs.net/natural-compare/ — naturalCompare
@@ -117,8 +119,10 @@ don't clobber each other; the `iframe` attribute isolates DOM/CSS, not state.
   `TosiNotification` provides a singleton custom `<tosi-notification>` element that manages
 - https://ui.tosijs.net/one-source-every-artifact/ — One Source
   How the tosijs doc system turns a single corpus of doc-comments and markdown into a static SEO site, a self-testing live playground with in-browser TypeScript, an ePub and PDF, and an agent-debuggable page — all deploying as static files.
+- https://ui.tosijs.net/no-header-demo/ — Page without the header
+  A page using header: false with layout: full-screen — no site chrome at all, for an app page with its own toolbar.
 - https://ui.tosijs.net/password-strength/ — password strength
-  Just wrap it a `<tosi-password-strength>` element around an `<input>`
+  Just wrap a `<tosi-password-strength>` element around an `<input>`
 - https://ui.tosijs.net/pocket-bar/ — pocket bar
   A **pocket toolbar**: a single icon at rest that expands into a bar of your controls
 - https://ui.tosijs.net/pop-float/ — popFloat
@@ -144,7 +148,7 @@ don't clobber each other; the `iframe` attribute isolates DOM/CSS, not state.
 - https://ui.tosijs.net/side-nav/ — sidebar
   The default layout for iOS / iPadOS apps is to hide the sidebar when displaying content on small
 - https://ui.tosijs.net/size-break/ — size-break
-  While we wait for enough browsers to implement [container-queries](https://www.w3.org/TR/css-contain-3/),
+  `<tosi-sizebreak>` shows different content at different sizes, for example a row of buttons
 - https://ui.tosijs.net/sizer/ — sizer
   This is a super-simple component that you can put in a fixed size element allowing it to be resized
 - https://ui.tosijs.net/data-table/ — table

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tosijs-ui",
-  "version": "1.16.21",
+  "version": "1.16.23",
   "description": "simple robust web-components for use with tosijs or anything else",
   "scripts": {
     "start": "bun --watch bin/dev.ts",