@ni/ok-components 1.13.0 → 1.14.0

package/dist/custom-elements.json

@@ -3758,6 +3758,196 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/fv/toolbar/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A Nimble toolbar that automatically collapses declaratively configured actions.",
+          "name": "FvToolbar",
+          "members": [
+            {
+              "kind": "field",
+              "name": "overflowLabel",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "'More actions'"
+            },
+            {
+              "kind": "field",
+              "name": "items",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Map<Button, ResponsiveItem>()"
+            },
+            {
+              "kind": "field",
+              "name": "resizeObserver",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new ResizeObserver(() => this.scheduleLayout())"
+            },
+            {
+              "kind": "field",
+              "name": "mutationObserver",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new MutationObserver(records => { for (const record of records) { const item = record.target instanceof Button ? this.items.get(record.target) : undefined; if (item && record.attributeName === 'hidden') { item.hidden = item.button.hidden; } if (item && record.attributeName === 'content-hidden') { item.contentHidden = item.button.contentHidden; } } this.scheduleLayout(); })"
+            },
+            {
+              "kind": "field",
+              "name": "observedChildren",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Set<Element>()"
+            },
+            {
+              "kind": "field",
+              "name": "frame",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "allSlottedItems",
+              "type": {
+                "text": "(HTMLElement | Node)[]"
+              },
+              "privacy": "protected",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "observeMutations",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "scheduleLayout",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "restoreItem",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "item",
+                  "type": {
+                    "text": "ResponsiveItem"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "syncItems",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "ResponsiveItem[]"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "updateLayout",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "showOverflow",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "show",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "fits",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "overflow-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'More actions'",
+              "fieldName": "overflowLabel"
+            }
+          ],
+          "superclass": {
+            "name": "Toolbar",
+            "package": "@ni/nimble-components/dist/esm/toolbar"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "fvToolbarTag",
+          "type": {
+            "text": "string"
+          },
+          "default": "'ok-fv-toolbar'"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FvToolbar",
+          "declaration": {
+            "name": "FvToolbar",
+            "module": "src/fv/toolbar/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "fvToolbarTag",
+          "declaration": {
+            "name": "fvToolbarTag",
+            "module": "src/fv/toolbar/index.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/ts/icon-dynamic/index.ts",

package/dist/custom-elements.md

@@ -608,6 +608,29 @@
 
 <hr/>
 
+## class: `FvToolbar`
+
+### Superclass
+
+| Name      | Module | Package                                |
+| --------- | ------ | -------------------------------------- |
+| `Toolbar` |        | @ni/nimble-components/dist/esm/toolbar |
+
+### Fields
+
+| Name              | Privacy   | Type                      | Default          | Description | Inherited From |
+| ----------------- | --------- | ------------------------- | ---------------- | ----------- | -------------- |
+| `overflowLabel`   | public    | `string`                  | `'More actions'` |             |                |
+| `allSlottedItems` | protected | `(HTMLElement \| Node)[]` |                  |             |                |
+
+### Attributes
+
+| Name             | Field         | Inherited From |
+| ---------------- | ------------- | -------------- |
+| `overflow-label` | overflowLabel |                |
+
+<hr/>
+
 ## class: `TsIconDynamic`
 
 ### Superclass

package/dist/esm/fv/all-fv.d.ts

@@ -15,3 +15,4 @@ import './summary-panel-tile';
 import './search-input';
 import './splitter';
 import './split-layout';
+import './toolbar';

package/dist/esm/fv/all-fv.js

@@ -15,4 +15,5 @@ import './summary-panel-tile';
 import './search-input';
 import './splitter';
 import './split-layout';
+import './toolbar';
 //# sourceMappingURL=all-fv.js.map

package/dist/esm/fv/all-fv.js.map

@@ -1 +1 @@
-{"version":3,"file":"all-fv.js","sourceRoot":"","sources":["../../../src/fv/all-fv.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,QAAQ,CAAC;AAChB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,2BAA2B,CAAC;AACnC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,gBAAgB,CAAC;AACxB,OAAO,uBAAuB,CAAC;AAC/B,OAAO,iBAAiB,CAAC;AACzB,OAAO,iBAAiB,CAAC;AACzB,OAAO,sBAAsB,CAAC;AAC9B,OAAO,gBAAgB,CAAC;AACxB,OAAO,YAAY,CAAC;AACpB,OAAO,gBAAgB,CAAC","sourcesContent":["import './accordion-item';\nimport './card';\nimport './bulk-edit-field';\nimport './chip-selector';\nimport './context-help';\nimport './edit-commit-bar';\nimport './filter-bar';\nimport './master-detail-list-item';\nimport './master-detail-list';\nimport './split-button';\nimport './split-button-anchor';\nimport './sticky-header';\nimport './summary-panel';\nimport './summary-panel-tile';\nimport './search-input';\nimport './splitter';\nimport './split-layout';\n"]}
+{"version":3,"file":"all-fv.js","sourceRoot":"","sources":["../../../src/fv/all-fv.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,QAAQ,CAAC;AAChB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,2BAA2B,CAAC;AACnC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,gBAAgB,CAAC;AACxB,OAAO,uBAAuB,CAAC;AAC/B,OAAO,iBAAiB,CAAC;AACzB,OAAO,iBAAiB,CAAC;AACzB,OAAO,sBAAsB,CAAC;AAC9B,OAAO,gBAAgB,CAAC;AACxB,OAAO,YAAY,CAAC;AACpB,OAAO,gBAAgB,CAAC;AACxB,OAAO,WAAW,CAAC","sourcesContent":["import './accordion-item';\nimport './card';\nimport './bulk-edit-field';\nimport './chip-selector';\nimport './context-help';\nimport './edit-commit-bar';\nimport './filter-bar';\nimport './master-detail-list-item';\nimport './master-detail-list';\nimport './split-button';\nimport './split-button-anchor';\nimport './sticky-header';\nimport './summary-panel';\nimport './summary-panel-tile';\nimport './search-input';\nimport './splitter';\nimport './split-layout';\nimport './toolbar';\n"]}

package/dist/esm/fv/toolbar/index.d.ts

@@ -0,0 +1,36 @@
+import { Toolbar } from '@ni/nimble-components/dist/esm/toolbar';
+import type { MenuButton } from '@ni/nimble-components/dist/esm/menu-button';
+import type { Menu } from '@ni/nimble-components/dist/esm/menu';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-fv-toolbar': FvToolbar;
+    }
+}
+/**
+ * A Nimble toolbar that automatically collapses declaratively configured actions.
+ */
+export declare class FvToolbar extends Toolbar {
+    overflowLabel: string;
+    /** @internal */
+    hasOverflow: boolean;
+    /** @internal */
+    overflowButton: MenuButton;
+    /** @internal */
+    overflowMenu: Menu;
+    private readonly items;
+    private readonly resizeObserver;
+    private readonly mutationObserver;
+    private readonly observedChildren;
+    private frame;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected get allSlottedItems(): (HTMLElement | Node)[];
+    private observeMutations;
+    private readonly scheduleLayout;
+    private restoreItem;
+    private syncItems;
+    private updateLayout;
+    private showOverflow;
+    private fits;
+}
+export declare const fvToolbarTag = "ok-fv-toolbar";

package/dist/esm/fv/toolbar/index.js

@@ -0,0 +1,253 @@
+import { __decorate } from "tslib";
+import { attr, observable } from '@ni/fast-element';
+import { DesignSystem } from '@ni/fast-foundation';
+import { Toolbar } from '@ni/nimble-components/dist/esm/toolbar';
+import { Button } from '@ni/nimble-components/dist/esm/button';
+import { MenuItem, menuItemTag } from '@ni/nimble-components/dist/esm/menu-item';
+import { styles } from './styles';
+import { template } from './template';
+/**
+ * A Nimble toolbar that automatically collapses declaratively configured actions.
+ */
+export class FvToolbar extends Toolbar {
+    constructor() {
+        super(...arguments);
+        this.overflowLabel = 'More actions';
+        /** @internal */
+        this.hasOverflow = false;
+        this.items = new Map();
+        this.resizeObserver = new ResizeObserver(() => this.scheduleLayout());
+        this.mutationObserver = new MutationObserver(records => {
+            for (const record of records) {
+                const item = record.target instanceof Button ? this.items.get(record.target) : undefined;
+                if (item && record.attributeName === 'hidden') {
+                    item.hidden = item.button.hidden;
+                }
+                if (item && record.attributeName === 'content-hidden') {
+                    item.contentHidden = item.button.contentHidden;
+                }
+            }
+            this.scheduleLayout();
+        });
+        this.observedChildren = new Set();
+        this.frame = 0;
+        this.scheduleLayout = () => {
+            if (!this.isConnected || this.frame !== 0) {
+                return;
+            }
+            this.frame = requestAnimationFrame(() => {
+                this.frame = 0;
+                this.updateLayout();
+            });
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.resizeObserver.observe(this);
+        this.observeMutations();
+        this.ownerDocument.fonts.addEventListener('loadingdone', this.scheduleLayout);
+        this.scheduleLayout();
+    }
+    disconnectedCallback() {
+        this.resizeObserver.disconnect();
+        this.mutationObserver.disconnect();
+        this.ownerDocument.fonts.removeEventListener('loadingdone', this.scheduleLayout);
+        cancelAnimationFrame(this.frame);
+        this.frame = 0;
+        for (const item of this.items.values()) {
+            this.restoreItem(item);
+        }
+        this.items.clear();
+        this.observedChildren.clear();
+        super.disconnectedCallback();
+    }
+    get allSlottedItems() {
+        return [
+            ...super.allSlottedItems,
+            ...(this.hasOverflow ? [this.overflowButton] : [])
+        ];
+    }
+    observeMutations() {
+        this.mutationObserver.observe(this, {
+            subtree: true,
+            childList: true,
+            characterData: true,
+            attributes: true,
+            attributeFilter: [
+                'data-responsive', 'data-priority', 'disabled', 'hidden',
+                'content-hidden', 'aria-label', 'slot', 'class', 'style'
+            ]
+        });
+    }
+    restoreItem(item) {
+        item.button.hidden = item.hidden;
+        item.button.toggleAttribute('content-hidden', item.contentHidden);
+        item.menuItem.remove();
+    }
+    syncItems() {
+        const buttons = Array.from(this.children).filter((child) => child instanceof Button && child.hasAttribute('data-responsive'));
+        for (const [button, item] of this.items) {
+            if (!buttons.includes(button)) {
+                this.restoreItem(item);
+                this.items.delete(button);
+            }
+        }
+        for (const button of buttons) {
+            const value = button.getAttribute('data-responsive')?.trim() ?? '';
+            const tokens = value.split(/\s+/);
+            const stages = ['label', 'icon', 'overflow'].filter(stage => tokens.includes(stage));
+            const priority = Number(button.getAttribute('data-priority') ?? 0);
+            if (stages.length === 0 || tokens.some(token => !stages.some(stage => stage === token))
+                || !Number.isFinite(priority)
+                || (stages.includes('icon') && !button.querySelector(':scope > [slot="start"]'))) {
+                throw new Error('ok-fv-toolbar requires valid data-responsive stages, a finite data-priority, and a direct start-slot icon for icon-only actions.');
+            }
+            let item = this.items.get(button);
+            if (!item) {
+                const menuItem = this.ownerDocument.createElement(menuItemTag);
+                menuItem.addEventListener('change', () => {
+                    if (!button.disabled) {
+                        button.click();
+                    }
+                });
+                item = {
+                    button,
+                    stages,
+                    priority,
+                    hidden: button.hidden,
+                    contentHidden: button.contentHidden,
+                    menuItem
+                };
+                this.items.set(button, item);
+            }
+            item.stages = stages;
+            item.priority = priority;
+            item.menuItem.disabled = button.disabled;
+            const label = (button.getAttribute('aria-label')
+                ?? Array.from(button.childNodes)
+                    .filter(node => node.nodeType === Node.TEXT_NODE
+                    || (node instanceof Element && !node.hasAttribute('slot')))
+                    .map(node => node.textContent).join('')).trim();
+            if (!label) {
+                throw new Error('ok-fv-toolbar responsive actions require a text label or aria-label.');
+            }
+            if (item.menuItem.textContent !== label) {
+                item.menuItem.textContent = label;
+            }
+        }
+        return buttons.map(button => this.items.get(button));
+    }
+    updateLayout() {
+        // Ignore our own presentation mutations, not application changes.
+        this.mutationObserver.disconnect();
+        try {
+            const menuFocus = this.shadowRoot?.activeElement;
+            const menuHadFocus = menuFocus && this.overflowButton.contains(menuFocus);
+            const previousMenuItems = Array.from(this.overflowMenu.children);
+            const items = this.syncItems();
+            const root = this.getRootNode();
+            const activeElement = root instanceof ShadowRoot ? root.activeElement : this.ownerDocument.activeElement;
+            const focusedItem = items.find(item => item.button === activeElement);
+            for (const child of this.observedChildren) {
+                if (child.parentElement !== this) {
+                    this.resizeObserver.unobserve(child);
+                    this.observedChildren.delete(child);
+                }
+            }
+            for (const child of this.children) {
+                if (!this.observedChildren.has(child)) {
+                    this.resizeObserver.observe(child);
+                    this.observedChildren.add(child);
+                }
+            }
+            const overflow = new Set();
+            for (const item of items) {
+                item.button.hidden = item.hidden;
+                item.button.toggleAttribute('content-hidden', item.stages[0] === 'icon');
+                if (!item.hidden && item.stages[0] === 'overflow') {
+                    overflow.add(item);
+                    item.button.hidden = true;
+                }
+            }
+            this.showOverflow(overflow.size > 0);
+            const ordered = items.filter(item => !item.hidden).reverse()
+                .sort((a, b) => a.priority - b.priority);
+            // ponytail: measure each transition; cache widths only if large toolbars make this costly.
+            for (const stage of ['icon', 'overflow']) {
+                for (const item of ordered) {
+                    if (this.fits()) {
+                        break;
+                    }
+                    if (overflow.has(item) || !item.stages.includes(stage)) {
+                        continue;
+                    }
+                    if (stage === 'icon') {
+                        item.button.toggleAttribute('content-hidden', true);
+                    }
+                    else {
+                        item.button.hidden = true;
+                        overflow.add(item);
+                        this.showOverflow(true);
+                    }
+                }
+            }
+            const overflowItems = items.filter(item => overflow.has(item));
+            const nextMenuItems = overflowItems.map(item => item.menuItem);
+            if (nextMenuItems.length !== previousMenuItems.length
+                || nextMenuItems.some((item, index) => previousMenuItems[index] !== item)) {
+                this.overflowButton.open = false;
+                this.overflowMenu.replaceChildren(...nextMenuItems);
+            }
+            if (!this.hasOverflow) {
+                this.overflowButton.open = false;
+            }
+            this.overflowButton.hidden = !this.hasOverflow;
+            this.overflowButton.classList.remove('unreserved');
+            this.reduceFocusableElements();
+            if (focusedItem && overflow.has(focusedItem)) {
+                this.overflowButton.focus();
+            }
+            else if (menuHadFocus) {
+                if (this.hasOverflow) {
+                    if (this.overflowButton.open && menuFocus instanceof HTMLElement && menuFocus.isConnected) {
+                        menuFocus.focus();
+                    }
+                    else {
+                        this.overflowButton.focus();
+                    }
+                }
+                else {
+                    Array.from(this.querySelectorAll('[tabindex="0"]'))
+                        .find(control => !control.closest('[hidden], [disabled]'))?.focus();
+                }
+            }
+        }
+        finally {
+            this.observeMutations();
+        }
+    }
+    showOverflow(show) {
+        this.hasOverflow = show;
+        // Remove the trigger from width calculations without hiding its focused menu.
+        this.overflowButton.classList.toggle('unreserved', !show);
+        this.overflowButton.hidden = false;
+    }
+    fits() {
+        const region = this.shadowRoot.querySelector('.positioning-region');
+        return region.scrollWidth <= region.clientWidth;
+    }
+}
+__decorate([
+    attr({ attribute: 'overflow-label' })
+], FvToolbar.prototype, "overflowLabel", void 0);
+__decorate([
+    observable
+], FvToolbar.prototype, "hasOverflow", void 0);
+const okFvToolbar = FvToolbar.compose({
+    baseName: 'fv-toolbar',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('ok').register(okFvToolbar());
+export const fvToolbarTag = 'ok-fv-toolbar';
+//# sourceMappingURL=index.js.map

package/dist/esm/fv/toolbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fv/toolbar/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { attr, observable } from '@ni/fast-element';\nimport { DesignSystem } from '@ni/fast-foundation';\nimport { Toolbar } from '@ni/nimble-components/dist/esm/toolbar';\nimport { Button } from '@ni/nimble-components/dist/esm/button';\nimport type { MenuButton } from '@ni/nimble-components/dist/esm/menu-button';\nimport { MenuItem, menuItemTag } from '@ni/nimble-components/dist/esm/menu-item';\nimport type { Menu } from '@ni/nimble-components/dist/esm/menu';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'ok-fv-toolbar': FvToolbar;\n    }\n}\n\ntype Presentation = 'label' | 'icon' | 'overflow';\n\ninterface ResponsiveItem {\n    button: Button;\n    stages: Presentation[];\n    priority: number;\n    contentHidden: boolean;\n    hidden: boolean;\n    menuItem: MenuItem;\n}\n\n/**\n * A Nimble toolbar that automatically collapses declaratively configured actions.\n */\nexport class FvToolbar extends Toolbar {\n    @attr({ attribute: 'overflow-label' })\n    public overflowLabel = 'More actions';\n\n    /** @internal */\n    @observable\n    public hasOverflow = false;\n\n    /** @internal */\n    public overflowButton!: MenuButton;\n\n    /** @internal */\n    public overflowMenu!: Menu;\n\n    private readonly items = new Map<Button, ResponsiveItem>();\n    private readonly resizeObserver = new ResizeObserver(() => this.scheduleLayout());\n    private readonly mutationObserver = new MutationObserver(records => {\n        for (const record of records) {\n            const item = record.target instanceof Button ? this.items.get(record.target) : undefined;\n            if (item && record.attributeName === 'hidden') {\n                item.hidden = item.button.hidden;\n            }\n            if (item && record.attributeName === 'content-hidden') {\n                item.contentHidden = item.button.contentHidden;\n            }\n        }\n        this.scheduleLayout();\n    });\n\n    private readonly observedChildren = new Set<Element>();\n    private frame = 0;\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        this.resizeObserver.observe(this);\n        this.observeMutations();\n        this.ownerDocument.fonts.addEventListener('loadingdone', this.scheduleLayout);\n        this.scheduleLayout();\n    }\n\n    public override disconnectedCallback(): void {\n        this.resizeObserver.disconnect();\n        this.mutationObserver.disconnect();\n        this.ownerDocument.fonts.removeEventListener('loadingdone', this.scheduleLayout);\n        cancelAnimationFrame(this.frame);\n        this.frame = 0;\n        for (const item of this.items.values()) {\n            this.restoreItem(item);\n        }\n        this.items.clear();\n        this.observedChildren.clear();\n        super.disconnectedCallback();\n    }\n\n    protected override get allSlottedItems(): (HTMLElement | Node)[] {\n        return [\n            ...super.allSlottedItems,\n            ...(this.hasOverflow ? [this.overflowButton] : [])\n        ];\n    }\n\n    private observeMutations(): void {\n        this.mutationObserver.observe(this, {\n            subtree: true,\n            childList: true,\n            characterData: true,\n            attributes: true,\n            attributeFilter: [\n                'data-responsive', 'data-priority', 'disabled', 'hidden',\n                'content-hidden', 'aria-label', 'slot', 'class', 'style'\n            ]\n        });\n    }\n\n    private readonly scheduleLayout = (): void => {\n        if (!this.isConnected || this.frame !== 0) {\n            return;\n        }\n        this.frame = requestAnimationFrame(() => {\n            this.frame = 0;\n            this.updateLayout();\n        });\n    };\n\n    private restoreItem(item: ResponsiveItem): void {\n        item.button.hidden = item.hidden;\n        item.button.toggleAttribute('content-hidden', item.contentHidden);\n        item.menuItem.remove();\n    }\n\n    private syncItems(): ResponsiveItem[] {\n        const buttons = Array.from(this.children).filter(\n            (child): child is Button => child instanceof Button && child.hasAttribute('data-responsive')\n        );\n        for (const [button, item] of this.items) {\n            if (!buttons.includes(button)) {\n                this.restoreItem(item);\n                this.items.delete(button);\n            }\n        }\n        for (const button of buttons) {\n            const value = button.getAttribute('data-responsive')?.trim() ?? '';\n            const tokens = value.split(/\\s+/);\n            const stages = (['label', 'icon', 'overflow'] as const).filter(stage => tokens.includes(stage));\n            const priority = Number(button.getAttribute('data-priority') ?? 0);\n            if (stages.length === 0 || tokens.some(token => !stages.some(stage => stage === token))\n                || !Number.isFinite(priority)\n                || (stages.includes('icon') && !button.querySelector(':scope > [slot=\"start\"]'))) {\n                throw new Error('ok-fv-toolbar requires valid data-responsive stages, a finite data-priority, and a direct start-slot icon for icon-only actions.');\n            }\n            let item = this.items.get(button);\n            if (!item) {\n                const menuItem = this.ownerDocument.createElement(menuItemTag);\n                menuItem.addEventListener('change', () => {\n                    if (!button.disabled) {\n                        button.click();\n                    }\n                });\n                item = {\n                    button,\n                    stages,\n                    priority,\n                    hidden: button.hidden,\n                    contentHidden: button.contentHidden,\n                    menuItem\n                };\n                this.items.set(button, item);\n            }\n            item.stages = stages;\n            item.priority = priority;\n            item.menuItem.disabled = button.disabled;\n            const label = (button.getAttribute('aria-label')\n                ?? Array.from(button.childNodes)\n                    .filter(node => node.nodeType === Node.TEXT_NODE\n                        || (node instanceof Element && !node.hasAttribute('slot')))\n                    .map(node => node.textContent).join('')).trim();\n            if (!label) {\n                throw new Error('ok-fv-toolbar responsive actions require a text label or aria-label.');\n            }\n            if (item.menuItem.textContent !== label) {\n                item.menuItem.textContent = label;\n            }\n        }\n        return buttons.map(button => this.items.get(button)!);\n    }\n\n    private updateLayout(): void {\n        // Ignore our own presentation mutations, not application changes.\n        this.mutationObserver.disconnect();\n        try {\n            const menuFocus = this.shadowRoot?.activeElement;\n            const menuHadFocus = menuFocus && this.overflowButton.contains(menuFocus);\n            const previousMenuItems = Array.from(this.overflowMenu.children);\n            const items = this.syncItems();\n            const root = this.getRootNode();\n            const activeElement = root instanceof ShadowRoot ? root.activeElement : this.ownerDocument.activeElement;\n            const focusedItem = items.find(item => item.button === activeElement);\n            for (const child of this.observedChildren) {\n                if (child.parentElement !== this) {\n                    this.resizeObserver.unobserve(child);\n                    this.observedChildren.delete(child);\n                }\n            }\n            for (const child of this.children) {\n                if (!this.observedChildren.has(child)) {\n                    this.resizeObserver.observe(child);\n                    this.observedChildren.add(child);\n                }\n            }\n            const overflow = new Set<ResponsiveItem>();\n            for (const item of items) {\n                item.button.hidden = item.hidden;\n                item.button.toggleAttribute('content-hidden', item.stages[0] === 'icon');\n                if (!item.hidden && item.stages[0] === 'overflow') {\n                    overflow.add(item);\n                    item.button.hidden = true;\n                }\n            }\n            this.showOverflow(overflow.size > 0);\n            const ordered = items.filter(item => !item.hidden).reverse()\n                .sort((a, b) => a.priority - b.priority);\n            // ponytail: measure each transition; cache widths only if large toolbars make this costly.\n            for (const stage of ['icon', 'overflow'] as const) {\n                for (const item of ordered) {\n                    if (this.fits()) {\n                        break;\n                    }\n                    if (overflow.has(item) || !item.stages.includes(stage)) {\n                        continue;\n                    }\n                    if (stage === 'icon') {\n                        item.button.toggleAttribute('content-hidden', true);\n                    } else {\n                        item.button.hidden = true;\n                        overflow.add(item);\n                        this.showOverflow(true);\n                    }\n                }\n            }\n            const overflowItems = items.filter(item => overflow.has(item));\n            const nextMenuItems = overflowItems.map(item => item.menuItem);\n            if (nextMenuItems.length !== previousMenuItems.length\n                || nextMenuItems.some((item, index) => previousMenuItems[index] !== item)) {\n                this.overflowButton.open = false;\n                this.overflowMenu.replaceChildren(...nextMenuItems);\n            }\n            if (!this.hasOverflow) {\n                this.overflowButton.open = false;\n            }\n            this.overflowButton.hidden = !this.hasOverflow;\n            this.overflowButton.classList.remove('unreserved');\n            this.reduceFocusableElements();\n            if (focusedItem && overflow.has(focusedItem)) {\n                this.overflowButton.focus();\n            } else if (menuHadFocus) {\n                if (this.hasOverflow) {\n                    if (this.overflowButton.open && menuFocus instanceof HTMLElement && menuFocus.isConnected) {\n                        menuFocus.focus();\n                    } else {\n                        this.overflowButton.focus();\n                    }\n                } else {\n                    Array.from(this.querySelectorAll<HTMLElement>('[tabindex=\"0\"]'))\n                        .find(control => !control.closest('[hidden], [disabled]'))?.focus();\n                }\n            }\n        } finally {\n            this.observeMutations();\n        }\n    }\n\n    private showOverflow(show: boolean): void {\n        this.hasOverflow = show;\n        // Remove the trigger from width calculations without hiding its focused menu.\n        this.overflowButton.classList.toggle('unreserved', !show);\n        this.overflowButton.hidden = false;\n    }\n\n    private fits(): boolean {\n        const region = this.shadowRoot!.querySelector<HTMLElement>('.positioning-region')!;\n        return region.scrollWidth <= region.clientWidth;\n    }\n}\n\nconst okFvToolbar = FvToolbar.compose({\n    baseName: 'fv-toolbar',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('ok').register(okFvToolbar());\nexport const fvToolbarTag = 'ok-fv-toolbar';\n"]}

package/dist/esm/fv/toolbar/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@ni/fast-element").ElementStyles;

package/dist/esm/fv/toolbar/styles.js

@@ -0,0 +1,39 @@
+import { css } from '@ni/fast-element';
+import { styles as toolbarStyles } from '@ni/nimble-components/dist/esm/toolbar/styles';
+export const styles = css `
+    ${toolbarStyles}
+
+    :host {
+        display: block;
+        min-width: 0;
+        max-width: 100%;
+    }
+
+    .positioning-region {
+        position: relative;
+        overflow-x: auto;
+    }
+
+    .unreserved {
+        position: absolute;
+        inset-inline-end: 0;
+    }
+
+    [part='start'],
+    [part='end'],
+    nimble-menu-button,
+    ::slotted(*) {
+        flex-shrink: 0;
+    }
+
+    [part='start'] {
+        margin: 0;
+        margin-inline-end: auto;
+    }
+
+    [part='end'] {
+        margin: 0;
+        margin-inline-start: auto;
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/fv/toolbar/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/toolbar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,+CAA+C,CAAC;AAExF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkClB,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { styles as toolbarStyles } from '@ni/nimble-components/dist/esm/toolbar/styles';\n\nexport const styles = css`\n    ${toolbarStyles}\n\n    :host {\n        display: block;\n        min-width: 0;\n        max-width: 100%;\n    }\n\n    .positioning-region {\n        position: relative;\n        overflow-x: auto;\n    }\n\n    .unreserved {\n        position: absolute;\n        inset-inline-end: 0;\n    }\n\n    [part='start'],\n    [part='end'],\n    nimble-menu-button,\n    ::slotted(*) {\n        flex-shrink: 0;\n    }\n\n    [part='start'] {\n        margin: 0;\n        margin-inline-end: auto;\n    }\n\n    [part='end'] {\n        margin: 0;\n        margin-inline-start: auto;\n    }\n`;\n"]}

package/dist/esm/fv/toolbar/template.d.ts

@@ -0,0 +1,4 @@
+import { type ViewTemplate } from '@ni/fast-element';
+import { type FoundationElementTemplate, type ToolbarOptions } from '@ni/fast-foundation';
+import type { FvToolbar } from '.';
+export declare const template: FoundationElementTemplate<ViewTemplate<FvToolbar>, ToolbarOptions>;