tosijs-ui 1.7.2 → 1.7.3

package/dist/pocket-bar.d.ts

@@ -0,0 +1,99 @@
+import { Component as WebComponent, ElementCreator, PartsMap } from 'tosijs';
+import { SvgIcon } from './icons';
+interface PocketBarParts extends PartsMap {
+    handle: HTMLButtonElement;
+    handleIcon: SvgIcon;
+    bar: HTMLDivElement;
+}
+export declare class TosiPocketBar extends WebComponent<PocketBarParts> {
+    static preferredTagName: string;
+    static initAttributes: {
+        icon: string;
+        direction: string;
+        open: boolean;
+    };
+    private pinned;
+    private get vertical();
+    private get resolvedIcon();
+    private get floatPosition();
+    reposition: () => void;
+    private setOpen;
+    private handlePointerEnter;
+    private handlePointerLeave;
+    private handleFocusIn;
+    private handleFocusOut;
+    toggle: (event?: Event) => void;
+    private handleOutsidePointer;
+    private handleScrollResize;
+    content: () => (HTMLDivElement | HTMLButtonElement)[];
+    static shadowStyleSpec: {
+        ':host': {
+            display: string;
+            position: string;
+            opacity: string;
+            transition: string;
+        };
+        ':host([open])': {
+            opacity: string;
+        };
+        ':host [part="handle"]': {
+            display: string;
+            alignItems: string;
+            justifyContent: string;
+            padding: string;
+            border: string;
+            margin: string;
+            cursor: string;
+            color: string;
+            background: string;
+            backdropFilter: string;
+            borderRadius: string;
+            transition: string;
+        };
+        ':host [part="bar"]': {
+            position: string;
+            display: string;
+            gap: string;
+            padding: string;
+            background: string;
+            backdropFilter: string;
+            borderRadius: string;
+            boxShadow: string;
+            opacity: string;
+            pointerEvents: string;
+            transform: string;
+            transition: string;
+        };
+        ':host([open]) [part="bar"]': {
+            opacity: string;
+            pointerEvents: string;
+            transform: string;
+        };
+        '::slotted(button), ::slotted(label)': {
+            display: string;
+            alignItems: string;
+            gap: string;
+            padding: string;
+            margin: string;
+            border: string;
+            background: string;
+            color: string;
+            font: string;
+            cursor: string;
+            borderRadius: string;
+            transition: string;
+        };
+        '::slotted(button:hover), ::slotted(label:hover)': {
+            background: string;
+        };
+        '::slotted(label:has(input[type="checkbox"]:not(:checked)))': {
+            opacity: string;
+            filter: string;
+        };
+    };
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): void;
+}
+export declare const tosiPocketBar: ElementCreator<TosiPocketBar>;
+export {};

package/dist/pocket-bar.js

@@ -0,0 +1,298 @@
+/*#
+# pocket bar
+
+A **pocket toolbar**: a single icon at rest that expands into a bar of your controls
+on hover or tap, then tucks away again. It's translucent until you touch it, so it
+stays out of the way when pinned over content.
+
+Whatever you put inside is the toolbar — they're your light-DOM children, so *any*
+control works: buttons, a checkbox, a segmented control. The component only supplies
+the handle, the reveal, and the positioning.
+
+Hover (or focus, or tap) peeks it open; **click the handle to keep it open**, and
+click the handle again — or anywhere outside — to dismiss it.
+
+```html
+<div class="pocket-demo">
+  <tosi-pocket-bar direction="e">
+    <button title="Cut"><tosi-icon icon="scissors"></tosi-icon></button>
+    <button title="Copy"><tosi-icon icon="copy"></tosi-icon></button>
+    <button title="Paste"><tosi-icon icon="clipboard"></tosi-icon></button>
+  </tosi-pocket-bar>
+
+  <tosi-pocket-bar direction="s">
+    <button title="Bold"><tosi-icon icon="bold"></tosi-icon></button>
+    <button title="Italic"><tosi-icon icon="italic"></tosi-icon></button>
+    <button title="Underline"><tosi-icon icon="underline"></tosi-icon></button>
+  </tosi-pocket-bar>
+
+  <tosi-pocket-bar direction="w">
+    <button title="Zoom in"><tosi-icon icon="zoomIn"></tosi-icon></button>
+    <button title="Zoom out"><tosi-icon icon="zoomOut"></tosi-icon></button>
+  </tosi-pocket-bar>
+
+  <tosi-pocket-bar direction="n" icon="settings">
+    <label title="Snap to grid"><input type="checkbox" checked /><tosi-icon icon="grid"></tosi-icon></label>
+    <button title="Undo"><tosi-icon icon="cornerUpLeft"></tosi-icon></button>
+    <button title="Redo"><tosi-icon icon="cornerUpRight"></tosi-icon></button>
+  </tosi-pocket-bar>
+</div>
+```
+```css
+.preview .pocket-demo {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  height: 260px;
+  padding: 60px 20px;
+}
+.preview .pocket-demo tosi-pocket-bar button,
+.preview .pocket-demo tosi-pocket-bar label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 5px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+.preview .pocket-demo tosi-pocket-bar button:hover,
+.preview .pocket-demo tosi-pocket-bar label:hover {
+  background: #8882;
+}
+```
+
+Each handle above hints its axis — `⋯` for the horizontal bars (`e`, `w`), `⋮` for the
+vertical ones (`n`, `s`) — and the fourth uses an explicit `settings` icon. Hover any of
+them to see the bar grow in its `direction`.
+
+## Attributes
+
+- `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
+  (`n | e | s | w | ne | nw | se | sw | en | wn | es | ws | side | auto`). `auto`
+  (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).
+- `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.
+
+The handle is slightly translucent at rest (`--tosi-pocket-opacity`, default `0.75`)
+and opaque while open; it keeps a blurred glass chip (`--tosi-pocket-bg`, a translucent
+tint of `--tosi-bg`, so it follows the theme) so it stays legible over busy content.
+
+### Styling hooks
+
+- `--tosi-pocket-opacity` — resting opacity of the whole widget (default `0.75`).
+- `--tosi-pocket-bg` — the glass background (a translucent tint of `--tosi-bg`).
+- `--tosi-pocket-handle-color` — colour of just the collapsed handle icon, independent
+  of the bar's controls (e.g. to flag status on the handle alone). Default `inherit`.
+
+Slotted `<button>`s and `<label>`s get flat icon-button styling by default. A
+checkbox-as-icon — a `<label>` wrapping an `<input type=checkbox>` and an icon — greys
+and desaturates until checked, so a toggle needs no extra CSS.
+*/
+/*{ "parent": "Components" }*/
+import { Component as WebComponent, elements, vars, varDefault, } from 'tosijs';
+import { svgIcon } from './icons';
+import { positionFloat } from './pop-float';
+const { button, div, slot } = elements;
+export class TosiPocketBar extends WebComponent {
+    static preferredTagName = 'tosi-pocket-bar';
+    static initAttributes = {
+        icon: '',
+        direction: 'auto',
+        open: false,
+    };
+    // Whether the bar is *pinned* open by a click (vs. a transient hover/focus peek).
+    pinned = false;
+    // n/s grow a vertical bar; everything else (auto, e/w, side) is horizontal.
+    get vertical() {
+        return /^[ns]/.test(this.direction);
+    }
+    // Default handle hints the growth axis: ⋮ for a vertical bar, ⋯ for a horizontal
+    // one. An explicit `icon` always wins.
+    get resolvedIcon() {
+        return this.icon || (this.vertical ? 'moreVertical' : 'moreHorizontal');
+    }
+    // `auto` → positionFloat's `side` mode: a horizontal bar toward the nearer screen
+    // edge. Everything else is a FloatPosition passed straight through.
+    get floatPosition() {
+        return (this.direction === 'auto' ? 'side' : this.direction);
+    }
+    reposition = () => {
+        if (!this.hydrated)
+            return;
+        positionFloat(this.parts.bar, this.parts.handle, this.floatPosition, 'remain', 'remain');
+    };
+    // Open is driven authoritatively in JS (not CSS :hover), so an explicit close —
+    // clicking the handle again, or clicking outside — always wins over a lingering
+    // hover. Otherwise a click-to-open bar could never be dismissed while the pointer
+    // stayed over it.
+    setOpen(open) {
+        if (this.open !== open)
+            this.open = open;
+        if (open)
+            this.reposition();
+    }
+    handlePointerEnter = () => this.setOpen(true);
+    handlePointerLeave = () => {
+        if (!this.pinned)
+            this.setOpen(false);
+    };
+    handleFocusIn = () => this.setOpen(true);
+    handleFocusOut = () => {
+        // Close once focus has left the whole component (unless pinned) — next frame,
+        // after focus has landed on its new target.
+        requestAnimationFrame(() => {
+            if (!this.pinned && !this.matches(':focus-within'))
+                this.setOpen(false);
+        });
+    };
+    toggle = (event) => {
+        event?.preventDefault();
+        this.pinned = !this.pinned;
+        this.setOpen(this.pinned);
+    };
+    // A pointer-down anywhere outside a pinned bar dismisses it (composedPath so it
+    // works across the shadow boundary and the position:fixed bar).
+    handleOutsidePointer = (event) => {
+        if (!this.pinned)
+            return;
+        const path = event.composedPath();
+        if (!path.includes(this) && !path.includes(this.parts.bar)) {
+            this.pinned = false;
+            this.setOpen(false);
+        }
+    };
+    handleScrollResize = () => {
+        if (this.open)
+            this.reposition();
+    };
+    content = () => [
+        button({
+            part: 'handle',
+            class: 'no-drag',
+            title: 'toolbar',
+            'aria-label': 'toolbar',
+            'aria-expanded': 'false',
+            onClick: this.toggle,
+        }, svgIcon({ part: 'handleIcon', icon: this.resolvedIcon })),
+        div({
+            part: 'bar',
+            role: 'toolbar',
+            // Set at construction (render() keeps it in sync if `direction` changes).
+            style: { flexDirection: this.vertical ? 'column' : 'row' },
+        }, slot()),
+    ];
+    static shadowStyleSpec = {
+        ':host': {
+            display: 'inline-flex',
+            position: 'relative',
+            // Slightly translucent at rest so it stays out of the way, fully opaque when
+            // open. The handle keeps a blurred glass chip even at rest (below), so it
+            // stays legible over busy content instead of a bare, hard-to-see icon.
+            opacity: varDefault.tosiPocketOpacity('0.75'),
+            transition: 'opacity 0.15s ease-out',
+        },
+        ':host([open])': {
+            opacity: '1',
+        },
+        ':host [part="handle"]': {
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: vars.spacing50,
+            border: '0',
+            margin: '0',
+            cursor: 'pointer',
+            // The handle's colour is independently settable (the bar's controls stay
+            // neutral), so a consumer can e.g. flag status on just the collapsed icon.
+            color: varDefault.tosiPocketHandleColor('inherit'),
+            // A blurred "glass" chip tinted from --tosi-bg (theme-aware, light or dark).
+            // The backdrop blur keeps the icon readable over any background.
+            background: varDefault.tosiPocketBg('color-mix(in srgb, var(--tosi-bg, #fff) 85%, transparent)'),
+            backdropFilter: 'blur(12px)',
+            borderRadius: vars.spacing,
+            transition: 'background 0.15s ease-out',
+        },
+        ':host [part="bar"]': {
+            position: 'fixed',
+            display: 'flex',
+            gap: vars.spacing25,
+            padding: vars.spacing25,
+            background: varDefault.tosiPocketBg('color-mix(in srgb, var(--tosi-bg, #fff) 82%, transparent)'),
+            backdropFilter: 'blur(12px)',
+            borderRadius: vars.spacing,
+            boxShadow: `0 ${vars.spacing25} ${vars.spacing} #0003`,
+            // Hidden and inert at rest; revealed when open.
+            opacity: '0',
+            pointerEvents: 'none',
+            transform: 'scale(0.9)',
+            transition: 'opacity 0.15s ease-out, transform 0.15s ease-out',
+        },
+        ':host([open]) [part="bar"]': {
+            opacity: '1',
+            pointerEvents: 'auto',
+            transform: 'scale(1)',
+        },
+        // Sensible defaults for slotted controls so a bar of icon-buttons needs no
+        // extra CSS: flat icon-buttons with a subtle hover tint. A checkbox-as-icon
+        // (label wrapping an <input type=checkbox> + an icon) greys and desaturates
+        // until it's checked — the easy way to build a toggle. Consumers override any
+        // of this from the light DOM (higher specificity) or hide the native checkbox.
+        '::slotted(button), ::slotted(label)': {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: vars.spacing25,
+            padding: vars.spacing50,
+            margin: '0',
+            border: '0',
+            background: 'transparent',
+            color: 'inherit',
+            font: 'inherit',
+            cursor: 'pointer',
+            borderRadius: vars.spacing25,
+            transition: 'background 0.15s ease-out, opacity 0.15s, filter 0.15s',
+        },
+        '::slotted(button:hover), ::slotted(label:hover)': {
+            background: 'color-mix(in srgb, currentColor 15%, transparent)',
+        },
+        '::slotted(label:has(input[type="checkbox"]:not(:checked)))': {
+            opacity: '0.45',
+            filter: 'grayscale(1)',
+        },
+    };
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('pointerenter', this.handlePointerEnter);
+        this.addEventListener('pointerleave', this.handlePointerLeave);
+        this.addEventListener('focusin', this.handleFocusIn);
+        this.addEventListener('focusout', this.handleFocusOut);
+        document.addEventListener('pointerdown', this.handleOutsidePointer, true);
+        window.addEventListener('scroll', this.handleScrollResize, {
+            passive: true,
+            capture: true,
+        });
+        window.addEventListener('resize', this.handleScrollResize, { passive: true });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('pointerdown', this.handleOutsidePointer, true);
+        window.removeEventListener('scroll', this.handleScrollResize, true);
+        window.removeEventListener('resize', this.handleScrollResize);
+    }
+    render() {
+        super.render();
+        this.parts.handleIcon.icon = this.resolvedIcon;
+        this.parts.bar.style.flexDirection = this.vertical ? 'column' : 'row';
+        this.parts.handle.setAttribute('aria-expanded', String(!!this.open));
+        this.reposition();
+    }
+}
+export const tosiPocketBar = TosiPocketBar.elementCreator();

package/dist/pop-float.d.ts

@@ -11,4 +11,4 @@ export interface PopFloatOptions {
     draggable?: boolean;
 }
 export declare const popFloat: (options: PopFloatOptions) => TosiFloat;
-export declare const positionFloat: (element: TosiFloat, target: HTMLElement, position?: FloatPosition, remainOnScroll?: "hide" | "remove" | "remain", remainOnResize?: "hide" | "remove" | "remain", draggable?: boolean) => void;
+export declare const positionFloat: (element: HTMLElement, target: HTMLElement, position?: FloatPosition, remainOnScroll?: "hide" | "remove" | "remain", remainOnResize?: "hide" | "remove" | "remain", draggable?: boolean) => void;

package/dist/pop-float.js

@@ -241,7 +241,7 @@ preview.append(button(
 ```
 
 */
-import { tosiFloat } from './float';
+import { tosiFloat, TosiFloat } from './float';
 import { bringToFront } from './track-drag';
 export const popFloat = (options) => {
     const { content, target, position, remainOnScroll, remainOnResize, draggable, } = options;
@@ -255,19 +255,25 @@ export const popFloat = (options) => {
     document.body.append(float);
     return float;
 };
-export const positionFloat = (element, target, position, remainOnScroll, remainOnResize, draggable = false) => {
+export const positionFloat = (
+// Any element can be positioned relative to a target — only the remain-on-* /
+// drag behaviors below are TosiFloat-specific (guarded), the geometry is not.
+// (A `<tosi-pocket-bar>` positions its plain bar element this way.)
+element, target, position, remainOnScroll, remainOnResize, draggable = false) => {
     {
         const { position } = getComputedStyle(element);
         if (position !== 'fixed') {
             element.style.position = 'fixed';
         }
-        if (remainOnResize)
-            element.remainOnResize = remainOnResize;
-        if (remainOnScroll)
-            element.remainOnScroll = remainOnScroll;
+        if (element instanceof TosiFloat) {
+            if (remainOnResize)
+                element.remainOnResize = remainOnResize;
+            if (remainOnScroll)
+                element.remainOnScroll = remainOnScroll;
+            element.drag = draggable;
+        }
         bringToFront(element);
     }
-    element.drag = draggable;
     const { left, top, width, height } = target.getBoundingClientRect();
     const cx = left + width * 0.5;
     const cy = top + height * 0.5;

package/dist/segmented.d.ts

@@ -87,7 +87,6 @@ export declare class TosiSegmented extends WebComponent {
         };
     };
     private syncCurrent;
-    private valueChanged;
     handleChange: () => void;
     handleKey: (event: KeyboardEvent) => void;
     connectedCallback(): void;

package/dist/segmented.js

@@ -262,17 +262,20 @@ export class TosiSegmented extends WebComponent {
             opacity: varDefault.segmentedPlaceholderOpacity(0.75),
         },
     };
-    // Reflects each radio/checkbox's checked state onto its containing label as a
-    // `.current` class so the selection highlight updates reliably (see note on the
-    // `.current` style rule).
+    // Reflects the selection onto each label as a `.current` class so the highlight
+    // updates reliably (see note on the `.current` style rule). Derived from
+    // `this.value` (the authoritative selection, matching render()'s `checked` logic),
+    // NOT from re-reading each `input.checked`: on Firefox/WebKit that live read can
+    // lag the native radio update at change time, leaving `.current` on the previous
+    // segment while `input.checked` (and `value`) are already correct.
     syncCurrent() {
         const { options } = this.parts;
+        const { values, isOtherValue } = this;
         options.querySelectorAll('label').forEach((label) => {
-            const input = label.querySelector('input');
-            label.classList.toggle('current', Boolean(input && input.checked));
+            const val = label.querySelector('input')?.value ?? '';
+            label.classList.toggle('current', values.includes(val) || (val === '' && isOtherValue));
         });
     }
-    valueChanged = false;
     handleChange = () => {
         const { options, custom } = this.parts;
         if (this.multiple) {
@@ -298,7 +301,6 @@ export class TosiSegmented extends WebComponent {
             }
         }
         this.syncCurrent();
-        this.valueChanged = true;
     };
     handleKey = (event) => {
         let blockEvent = false;
@@ -378,29 +380,45 @@ export class TosiSegmented extends WebComponent {
     }
     render() {
         super.render();
-        if (this.valueChanged) {
-            this.valueChanged = false;
-            return;
-        }
         const { options, custom } = this.parts;
-        options.textContent = '';
         const type = this.multiple ? 'checkbox' : 'radio';
         const { values, isOtherValue } = this;
-        options.append(...this._choicesWithOther.map((choice) => {
-            return label({ tabindex: 0 }, input({
+        const choices = this._choicesWithOther;
+        const isChecked = (value) => values.includes(value) || (value === '' && isOtherValue);
+        // Idempotent: rebuild the <label>s ONLY when the choice set changed; otherwise
+        // reconcile `checked` in place. Re-creating them every render (previously avoided
+        // by a `valueChanged` timing flag) dropped focus from the segment you just
+        // clicked and is provably redundant when the labels already match the choices —
+        // so render is now safe to run any number of times, any time.
+        const labels = [...options.querySelectorAll('label')];
+        const structureMatches = labels.length === choices.length &&
+            labels.every((l, i) => l.querySelector('input')?.value === choices[i].value);
+        if (structureMatches) {
+            labels.forEach((label) => {
+                const input = label.querySelector('input');
+                if (input && input.checked !== isChecked(input.value)) {
+                    input.checked = isChecked(input.value);
+                }
+            });
+        }
+        else {
+            options.textContent = '';
+            options.append(...choices.map((choice) => label({ tabindex: 0 }, input({
                 type,
                 name: this.name,
                 value: choice.value,
-                checked: values.includes(choice.value) ||
-                    (choice.value === '' && isOtherValue),
+                checked: isChecked(choice.value),
                 tabIndex: -1,
-            }), choice.icon || { class: 'no-icon' }, this.localized ? tosiLocalized(choice.caption) : span(choice.caption));
-        }));
+            }), choice.icon || { class: 'no-icon' }, this.localized ? tosiLocalized(choice.caption) : span(choice.caption))));
+        }
         if (this.other && !this.multiple) {
             custom.hidden = !isOtherValue;
-            custom.value = isOtherValue ? this.value : '';
+            const customValue = isOtherValue ? this.value : '';
+            if (custom.value !== customValue)
+                custom.value = customValue;
             custom.placeholder = this.placeholder;
-            options.append(custom);
+            if (custom.parentElement !== options)
+                options.append(custom);
         }
         this.syncCurrent();
     }