@ni/ok-components 1.2.1 → 1.3.0

package/dist/esm/fv/chip-selector/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/chip-selector/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,0BAA0B,EAC1B,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,6BAA6B,EAC7B,gBAAgB,EAChB,qBAAqB,EACrB,mBAAmB,EACnB,cAAc,EACd,sBAAsB,EACtB,iBAAiB,EACjB,SAAS,EACT,oBAAoB,EACpB,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,eAAe,EAClB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,cAAc,CAAC;;;;;;oBAMb,QAAQ;qBACP,aAAa;;;;;;;;;;gCAUF,YAAY;qBACvB,qBAAqB;oBACtB,gBAAgB;;;;;;;0BAOV,aAAa;sBACjB,WAAW,eAAe,qBAAqB;;;+BAGtC,UAAU;;;;;;;;;;;2CAWE,UAAU;;;;;;;;;;;;mCAYlB,UAAU;;;;;;;;;mBAS1B,YAAY;;uBAER,YAAY,IAAI,eAAe,IAAI,YAAY,IAAI,YAAY;;;;;;;2BAO3D,YAAY;;;+BAGR,qBAAqB;;;;;cAKtC,aAAa,CAAC,iBAAiB;;qCAER,YAAY;;;;;;;;;;;;;;;;;;qBAkB5B,oBAAoB;;;;cAI3B,aAAa,CAAC,iBAAiB;;4BAEjB,YAAY;6BACX,YAAY;;;;cAI3B,SAAS,CAAC,iBAAiB;;;;;;kCAMP,YAAY;;;;;sBAKxB,WAAW,UAAU,gBAAgB;0BACjC,0BAA0B;0BAC1B,mBAAmB;;;;;;;;;;;;;;;0BAenB,aAAa;yBACd,eAAe;;;;;;;;;;;;;0BAad,WAAW,eAAe,qBAAqB;;;;uBAIlD,YAAY,IAAI,eAAe;qBACjC,oBAAoB;;;;;;0BAMf,gBAAgB;;;;;0BAKhB,cAAc;;;;;;0BAMd,gBAAgB;;;;;;;;;;;;uBAYnB,WAAW,UAAU,gBAAgB;;;;;;;0BAOlC,gBAAgB;;;;;;;;;;;;0BAYhB,iBAAiB;;;;0BAIjB,sBAAsB;;;;0BAItB,iBAAiB;;;;;;qBAMtB,qBAAqB;;;;qBAIrB,6BAA6B;;;;iCAIjB,qBAAqB;+BACvB,qBAAqB;;;;;;;;;;;;;;CAcnD,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    applicationBackgroundColor,\n    bodyDisabledFontColor,\n    bodyFont,\n    bodyFontColor,\n    borderHoverColor,\n    borderRgbPartialColor,\n    borderWidth,\n    controlHeight,\n    controlLabelDisabledFontColor,\n    controlLabelFont,\n    controlLabelFontColor,\n    elevation2BoxShadow,\n    fillHoverColor,\n    fillHoverSelectedColor,\n    fillSelectedColor,\n    iconColor,\n    placeholderFontColor,\n    popupBorderColor,\n    smallDelay,\n    smallPadding,\n    standardPadding\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n    @layer base, hover, focusVisible, active, disabled, top;\n\n    @layer base {\n        ${display('inline-block')}\n\n        :host {\n            width: 300px;\n            max-width: 100%;\n            box-sizing: border-box;\n            font: ${bodyFont};\n            color: ${bodyFontColor};\n        }\n\n        .chip-selector {\n            position: relative;\n            width: 100%;\n        }\n\n        .label {\n            display: flex;\n            margin-block-end: ${smallPadding};\n            color: ${controlLabelFontColor};\n            font: ${controlLabelFont};\n        }\n\n        .chip-selector-field {\n            position: relative;\n            display: flex;\n            align-items: stretch;\n            min-height: ${controlHeight};\n            border: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.3);\n            background: transparent;\n            transition:\n                border-color ${smallDelay} ease-in-out;\n        }\n\n        .chip-selector-field::before {\n            content: '';\n            position: absolute;\n            inset-inline: 0;\n            inset-block-end: -1px;\n            height: 1px;\n            background: transparent;\n            pointer-events: none;\n            transition: background-color ${smallDelay} ease-in-out;\n        }\n\n        .chip-selector-field::after {\n            content: '';\n            position: absolute;\n            inset-inline: 0;\n            inset-block-end: -1px;\n            height: 2px;\n            background: transparent;\n            pointer-events: none;\n            transition:\n                background-color ${smallDelay} ease-in-out;\n        }\n\n        .chip-selector-selection-area {\n            position: relative;\n            display: flex;\n            flex: 1 1 auto;\n            flex-wrap: wrap;\n            align-items: center;\n            gap: ${smallPadding};\n            min-width: 0;\n            padding: ${smallPadding} ${standardPadding} ${smallPadding} ${smallPadding};\n            box-sizing: border-box;\n        }\n\n        .chip-selector-selection-area::after {\n            content: '';\n            position: absolute;\n            inset-block: ${smallPadding};\n            inset-inline-end: 0;\n            width: 2px;\n            background: rgba(${borderRgbPartialColor}, 0.2);\n        }\n\n        /* Target only the picker's internal chips, not slotted client content. */\n        .chip-selector-selection-area > nimble-chip {\n            ${controlHeight.cssCustomProperty}: 24px;\n            min-width: 0;\n            max-width: calc(100% - ${smallPadding});\n        }\n\n        .chip-selector-input {\n            -webkit-appearance: none;\n            appearance: none;\n            flex: 1 1 0;\n            min-width: 0;\n            width: 0;\n            padding: 0;\n            border: none;\n            background: transparent;\n            color: inherit;\n            font: inherit;\n            outline: none;\n        }\n\n        .chip-selector-input::placeholder {\n            color: ${placeholderFontColor};\n        }\n\n        .chip-selector-menu-button {\n            ${controlHeight.cssCustomProperty}: 24px;\n            align-self: flex-start;\n            margin-block: ${smallPadding};\n            margin-inline: ${smallPadding};\n        }\n\n        .chip-selector-menu-icon {\n            ${iconColor.cssCustomProperty}: currentColor;\n        }\n\n        .chip-selector-menu {\n            width: 100%;\n            box-sizing: border-box;\n            margin-block-start: ${smallPadding};\n            display: flex;\n            flex-direction: column;\n            max-height: 192px;\n            overflow-y: auto;\n            border: ${borderWidth} solid ${popupBorderColor};\n            background: ${applicationBackgroundColor};\n            box-shadow: ${elevation2BoxShadow};\n            border-radius: 4px;\n        }\n\n        .chip-selector-menu[hidden] {\n            display: none;\n        }\n\n        .chip-selector-option {\n            -webkit-appearance: none;\n            appearance: none;\n            display: flex;\n            align-items: center;\n            width: 100%;\n            min-width: 0;\n            min-height: ${controlHeight};\n            padding: 0 ${standardPadding};\n            border: none;\n            background: transparent;\n            color: inherit;\n            font: inherit;\n            text-align: left;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            cursor: pointer;\n        }\n\n        .chip-selector-create-option {\n            border-top: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.12);\n        }\n\n        .chip-selector-empty {\n            padding: ${smallPadding} ${standardPadding};\n            color: ${placeholderFontColor};\n        }\n    }\n\n    @layer hover {\n        .chip-selector-field:hover::after {\n            background: ${borderHoverColor};\n        }\n\n        .chip-selector-option:hover,\n        .chip-selector-option.active {\n            background: ${fillHoverColor};\n        }\n    }\n\n    @layer focusVisible {\n        .chip-selector-field:focus-within::before {\n            background: ${borderHoverColor};\n        }\n\n        .chip-selector-field:focus-within {\n            border-bottom-color: transparent;\n        }\n\n        .chip-selector-field:focus-within::after {\n            background: transparent;\n        }\n\n        .chip-selector-option:focus-visible {\n            outline: ${borderWidth} solid ${borderHoverColor};\n            outline-offset: -1px;\n        }\n    }\n\n    @layer active {\n        :host([open]) .chip-selector-field::before {\n            background: ${borderHoverColor};\n        }\n\n        :host([open]) .chip-selector-field {\n            border-bottom-color: transparent;\n        }\n\n        :host([open]) .chip-selector-field::after {\n            background: transparent;\n        }\n\n        .chip-selector-option[aria-selected='true'] {\n            background: ${fillSelectedColor};\n        }\n\n        .chip-selector-option[aria-selected='true']:hover {\n            background: ${fillHoverSelectedColor};\n        }\n\n        .chip-selector-option:active {\n            background: ${fillSelectedColor};\n        }\n    }\n\n    @layer disabled {\n        :host([disabled]) {\n            color: ${bodyDisabledFontColor};\n        }\n\n        :host([disabled]) .label {\n            color: ${controlLabelDisabledFontColor};\n        }\n\n        :host([disabled]) .chip-selector-field {\n            border-color: rgba(${borderRgbPartialColor}, 0.1);\n            background: rgba(${borderRgbPartialColor}, 0.07);\n        }\n\n        :host([disabled]) .chip-selector-field::after {\n            background: transparent;\n        }\n\n        :host([disabled]) .chip-selector-menu-button,\n        :host([disabled]) .chip-selector-input {\n            cursor: not-allowed;\n        }\n    }\n\n    @layer top {}\n`;"]}

package/dist/esm/fv/chip-selector/template.d.ts

@@ -0,0 +1,2 @@
+import type { FvChipSelector } from '.';
+export declare const template: import("@ni/fast-element").ViewTemplate<FvChipSelector, any>;

package/dist/esm/fv/chip-selector/template.js

@@ -0,0 +1,147 @@
+import { html, ref, repeat, when } from '@ni/fast-element';
+import { anchoredRegionTag } from '@ni/nimble-components/dist/esm/anchored-region';
+import { chipTag } from '@ni/nimble-components/dist/esm/chip';
+import { ChipAppearance } from '@ni/nimble-components/dist/esm/chip/types';
+import { iconArrowExpanderDownTag } from '@ni/nimble-components/dist/esm/icons/arrow-expander-down';
+import { menuTag } from '@ni/nimble-components/dist/esm/menu';
+import { menuItemTag } from '@ni/nimble-components/dist/esm/menu-item';
+import { toggleButtonTag } from '@ni/nimble-components/dist/esm/toggle-button';
+export const template = html `
+    <div class="chip-selector">
+        ${when(x => x.label.length > 0, html `
+                <label id="${x => x.labelId}" class="label" for="${x => x.inputId}">
+                    ${x => x.label}
+                </label>
+            `)}
+        <div
+            class="chip-selector-field"
+            role="combobox"
+            aria-expanded="${x => x.open}"
+            aria-controls="${x => x.menuId}"
+            aria-haspopup="listbox"
+            aria-disabled="${x => x.disabled}"
+            aria-labelledby="${x => (x.label.length > 0 ? x.labelId : null)}"
+            ${ref('field')}
+            @click="${(x, c) => {
+    x.handleFieldClick(c.event);
+    return true;
+}}"
+        >
+            <div class="chip-selector-selection-area">
+                ${repeat(x => x.selectedValueList, html `
+                        <${chipTag}
+                            removable
+                            appearance="${ChipAppearance.block}"
+                            data-chip-value="${x => x}"
+                            ?disabled="${(_, c) => c.parent.disabled}"
+                            @remove="${(_, c) => {
+    c.parent.handleChipRemove(c.event);
+    return true;
+}}"
+                        >
+                            ${x => x}
+                        </${chipTag}>
+                    `)}
+                <input
+                    id="${x => x.inputId}"
+                    class="chip-selector-input"
+                    type="text"
+                    autocomplete="off"
+                    spellcheck="false"
+                    placeholder="${x => (x.selectedValueList.length === 0 ? x.placeholder : '')}"
+                    :value="${x => x.filterText}"
+                    aria-controls="${x => x.menuId}"
+                    aria-activedescendant="${x => (x.open ? x.activeOptionId : null)}"
+                    aria-autocomplete="list"
+                    aria-expanded="${x => x.open}"
+                    aria-label="${x => (x.label.length === 0 ? x.placeholder || 'Chip selector' : null)}"
+                    aria-labelledby="${x => (x.label.length > 0 ? x.labelId : null)}"
+                    aria-haspopup="listbox"
+                    role="combobox"
+                    ?disabled="${x => x.disabled}"
+                    ${ref('captureInputRef')}
+                    @focus="${x => {
+    x.handleInputFocus();
+    return true;
+}}"
+                    @input="${(x, c) => {
+    x.handleInput(c.event);
+    return true;
+}}"
+                    @keydown="${(x, c) => x.handleInputKeydown(c.event)}"
+                />
+            </div>
+            <${toggleButtonTag}
+                class="chip-selector-menu-button"
+                appearance="ghost"
+                :checked="${x => x.open}"
+                ?disabled="${x => x.disabled}"
+                ${ref('captureMenuButtonRef')}
+                @click="${(x, c) => {
+    x.handleMenuButtonClick(c.event);
+    return true;
+}}"
+                @change="${(x, c) => {
+    x.handleMenuButtonChange(c.event);
+    return true;
+}}"
+                content-hidden="true"
+                aria-hidden="true"
+                tabindex="-1"
+            >
+                <${iconArrowExpanderDownTag} slot="start" class="chip-selector-menu-icon"></${iconArrowExpanderDownTag}>
+            </${toggleButtonTag}>
+        </div>
+        ${when(x => x.open, html `
+                <${anchoredRegionTag}
+                    class="chip-selector-anchored-region"
+                    ${ref('region')}
+                    fixed-placement
+                    auto-update-mode="auto"
+                    vertical-default-position="bottom"
+                    vertical-positioning-mode="locktodefault"
+                    horizontal-default-position="center"
+                    horizontal-positioning-mode="locktodefault"
+                    horizontal-scaling="anchor"
+                >
+                    <div @click="${(x, c) => {
+    x.handleMenuClick(c.event);
+    return true;
+}}"
+                    >
+                        <${menuTag}
+                            id="${x => x.menuId}"
+                            class="chip-selector-menu"
+                            @change="${(_, c) => {
+    c.event.stopPropagation();
+    return true;
+}}"
+                        >
+                            ${repeat(x => x.visibleOptionList, html `
+                                    <${menuItemTag}
+                                        id="${(_, c) => `${c.parent.menuId}-option-${c.index}`}"
+                                        class="chip-selector-option"
+                                        data-option-value="${x => x}"
+                                    >
+                                        ${x => x}
+                                    </${menuItemTag}>
+                                `)}
+                            ${when(x => x.customValueCandidate.length > 0, html `
+                                    <${menuItemTag}
+                                        id="${x => `${x.menuId}-option-create`}"
+                                        class="chip-selector-option chip-selector-create-option"
+                                        data-option-value="${x => x.customValueCandidate}"
+                                    >
+                                        ${x => x.createOptionLabel}
+                                    </${menuItemTag}>
+                                `)}
+                            ${when(x => x.showEmptyState, html `
+                                    <div class="chip-selector-empty">No matches</div>
+                                `)}
+                        </${menuTag}>
+                    </div>
+                </${anchoredRegionTag}>
+            `)}
+    </div>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/fv/chip-selector/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/fv/chip-selector/template.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, ref, repeat, when } from '@ni/fast-element';\nimport { anchoredRegionTag } from '@ni/nimble-components/dist/esm/anchored-region';\nimport { chipTag } from '@ni/nimble-components/dist/esm/chip';\nimport { ChipAppearance } from '@ni/nimble-components/dist/esm/chip/types';\nimport { iconArrowExpanderDownTag } from '@ni/nimble-components/dist/esm/icons/arrow-expander-down';\nimport { menuTag } from '@ni/nimble-components/dist/esm/menu';\nimport { menuItemTag } from '@ni/nimble-components/dist/esm/menu-item';\nimport { toggleButtonTag } from '@ni/nimble-components/dist/esm/toggle-button';\nimport type { FvChipSelector } from '.';\n\nexport const template = html<FvChipSelector>`\n    <div class=\"chip-selector\">\n        ${when(\n            x => x.label.length > 0,\n            html<FvChipSelector>`\n                <label id=\"${x => x.labelId}\" class=\"label\" for=\"${x => x.inputId}\">\n                    ${x => x.label}\n                </label>\n            `\n        )}\n        <div\n            class=\"chip-selector-field\"\n            role=\"combobox\"\n            aria-expanded=\"${x => x.open}\"\n            aria-controls=\"${x => x.menuId}\"\n            aria-haspopup=\"listbox\"\n            aria-disabled=\"${x => x.disabled}\"\n            aria-labelledby=\"${x => (x.label.length > 0 ? x.labelId : null)}\"\n            ${ref('field')}\n            @click=\"${(x, c) => {\n                x.handleFieldClick(c.event);\n                return true;\n            }}\"\n        >\n            <div class=\"chip-selector-selection-area\">\n                ${repeat(\n                    x => x.selectedValueList,\n                    html<string, FvChipSelector>`\n                        <${chipTag}\n                            removable\n                            appearance=\"${ChipAppearance.block}\"\n                            data-chip-value=\"${x => x}\"\n                            ?disabled=\"${(_, c) => c.parent.disabled}\"\n                            @remove=\"${(_, c) => {\n                                c.parent.handleChipRemove(c.event);\n                                return true;\n                            }}\"\n                        >\n                            ${x => x}\n                        </${chipTag}>\n                    `\n                )}\n                <input\n                    id=\"${x => x.inputId}\"\n                    class=\"chip-selector-input\"\n                    type=\"text\"\n                    autocomplete=\"off\"\n                    spellcheck=\"false\"\n                    placeholder=\"${x => (x.selectedValueList.length === 0 ? x.placeholder : '')}\"\n                    :value=\"${x => x.filterText}\"\n                    aria-controls=\"${x => x.menuId}\"\n                    aria-activedescendant=\"${x => (x.open ? x.activeOptionId : null)}\"\n                    aria-autocomplete=\"list\"\n                    aria-expanded=\"${x => x.open}\"\n                    aria-label=\"${x => (x.label.length === 0 ? x.placeholder || 'Chip selector' : null)}\"\n                    aria-labelledby=\"${x => (x.label.length > 0 ? x.labelId : null)}\"\n                    aria-haspopup=\"listbox\"\n                    role=\"combobox\"\n                    ?disabled=\"${x => x.disabled}\"\n                    ${ref('captureInputRef')}\n                    @focus=\"${x => {\n                        x.handleInputFocus();\n                        return true;\n                    }}\"\n                    @input=\"${(x, c) => {\n                        x.handleInput(c.event);\n                        return true;\n                    }}\"\n                    @keydown=\"${(x, c) => x.handleInputKeydown(c.event as KeyboardEvent)}\"\n                />\n            </div>\n            <${toggleButtonTag}\n                class=\"chip-selector-menu-button\"\n                appearance=\"ghost\"\n                :checked=\"${x => x.open}\"\n                ?disabled=\"${x => x.disabled}\"\n                ${ref('captureMenuButtonRef')}\n                @click=\"${(x, c) => {\n                    x.handleMenuButtonClick(c.event);\n                    return true;\n                }}\"\n                @change=\"${(x, c) => {\n                    x.handleMenuButtonChange(c.event);\n                    return true;\n                }}\"\n                content-hidden=\"true\"\n                aria-hidden=\"true\"\n                tabindex=\"-1\"\n            >\n                <${iconArrowExpanderDownTag} slot=\"start\" class=\"chip-selector-menu-icon\"></${iconArrowExpanderDownTag}>\n            </${toggleButtonTag}>\n        </div>\n        ${when(\n            x => x.open,\n            html<FvChipSelector>`\n                <${anchoredRegionTag}\n                    class=\"chip-selector-anchored-region\"\n                    ${ref('region')}\n                    fixed-placement\n                    auto-update-mode=\"auto\"\n                    vertical-default-position=\"bottom\"\n                    vertical-positioning-mode=\"locktodefault\"\n                    horizontal-default-position=\"center\"\n                    horizontal-positioning-mode=\"locktodefault\"\n                    horizontal-scaling=\"anchor\"\n                >\n                    <div @click=\"${(x, c) => {\n                            x.handleMenuClick(c.event);\n                            return true;\n                        }}\"\n                    >\n                        <${menuTag}\n                            id=\"${x => x.menuId}\"\n                            class=\"chip-selector-menu\"\n                            @change=\"${(_, c) => {\n                                c.event.stopPropagation();\n                                return true;\n                            }}\"\n                        >\n                            ${repeat(\n                                x => x.visibleOptionList,\n                                html<string, FvChipSelector>`\n                                    <${menuItemTag}\n                                        id=\"${(_, c) => `${c.parent.menuId}-option-${c.index}`}\"\n                                        class=\"chip-selector-option\"\n                                        data-option-value=\"${x => x}\"\n                                    >\n                                        ${x => x}\n                                    </${menuItemTag}>\n                                `\n                            )}\n                            ${when(\n                                x => x.customValueCandidate.length > 0,\n                                html<FvChipSelector>`\n                                    <${menuItemTag}\n                                        id=\"${x => `${x.menuId}-option-create`}\"\n                                        class=\"chip-selector-option chip-selector-create-option\"\n                                        data-option-value=\"${x => x.customValueCandidate}\"\n                                    >\n                                        ${x => x.createOptionLabel}\n                                    </${menuItemTag}>\n                                `\n                            )}\n                            ${when(\n                                x => x.showEmptyState,\n                                html<FvChipSelector>`\n                                    <div class=\"chip-selector-empty\">No matches</div>\n                                `\n                            )}\n                        </${menuTag}>\n                    </div>\n                </${anchoredRegionTag}>\n            `\n        )}\n    </div>\n`;"]}

package/dist/esm/fv/context-help/index.d.ts

@@ -0,0 +1,22 @@
+import { FoundationElement } from '@ni/fast-foundation';
+import '@ni/nimble-components/dist/esm/icons/info-circle';
+import '@ni/nimble-components/dist/esm/tooltip';
+import type { FvContextHelpSeverity } from './types';
+export type { FvContextHelpSeverity };
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-fv-context-help': FvContextHelp;
+    }
+}
+/**
+ * An info trigger with an attached tooltip for lightweight contextual guidance.
+ */
+export declare class FvContextHelp extends FoundationElement {
+    text: string;
+    triggerLabel: string;
+    severity: FvContextHelpSeverity;
+    iconVisible: boolean;
+    /** @internal */
+    readonly tooltipAnchorId: string;
+}
+export declare const fvContextHelpTag = "ok-fv-context-help";

package/dist/esm/fv/context-help/index.js

@@ -0,0 +1,41 @@
+import { __decorate } from "tslib";
+import { attr } from '@ni/fast-element';
+import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
+import { uniqueId } from '@ni/fast-web-utilities';
+import '@ni/nimble-components/dist/esm/icons/info-circle';
+import '@ni/nimble-components/dist/esm/tooltip';
+import { styles } from './styles';
+import { template } from './template';
+/**
+ * An info trigger with an attached tooltip for lightweight contextual guidance.
+ */
+export class FvContextHelp extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        this.text = '';
+        this.triggerLabel = 'Show help';
+        this.iconVisible = false;
+        /** @internal */
+        this.tooltipAnchorId = uniqueId('ok-fv-context-help');
+    }
+}
+__decorate([
+    attr
+], FvContextHelp.prototype, "text", void 0);
+__decorate([
+    attr({ attribute: 'trigger-label' })
+], FvContextHelp.prototype, "triggerLabel", void 0);
+__decorate([
+    attr
+], FvContextHelp.prototype, "severity", void 0);
+__decorate([
+    attr({ attribute: 'icon-visible', mode: 'boolean' })
+], FvContextHelp.prototype, "iconVisible", void 0);
+const okFvContextHelp = FvContextHelp.compose({
+    baseName: 'fv-context-help',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('ok').register(okFvContextHelp());
+export const fvContextHelpTag = 'ok-fv-context-help';
+//# sourceMappingURL=index.js.map

package/dist/esm/fv/context-help/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fv/context-help/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,kDAAkD,CAAC;AAC1D,OAAO,wCAAwC,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAWtC;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,iBAAiB;IAApD;;QAEW,SAAI,GAAG,EAAE,CAAC;QAGV,iBAAY,GAAG,WAAW,CAAC;QAM3B,gBAAW,GAAG,KAAK,CAAC;QAE3B,gBAAgB;QACA,oBAAe,GAAG,QAAQ,CAAC,oBAAoB,CAAC,CAAC;IACrE,CAAC;CAAA;AAbU;IADN,IAAI;2CACY;AAGV;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;mDACH;AAG3B;IADN,IAAI;+CACkC;AAGhC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;kDAC1B;AAM/B,MAAM,eAAe,GAAG,aAAa,CAAC,OAAO,CAAC;IAC1C,QAAQ,EAAE,iBAAiB;IAC3B,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC;AACxE,MAAM,CAAC,MAAM,gBAAgB,GAAG,oBAAoB,CAAC","sourcesContent":["import { attr } from '@ni/fast-element';\nimport { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport { uniqueId } from '@ni/fast-web-utilities';\nimport '@ni/nimble-components/dist/esm/icons/info-circle';\nimport '@ni/nimble-components/dist/esm/tooltip';\nimport { styles } from './styles';\nimport { template } from './template';\nimport type { FvContextHelpSeverity } from './types';\n\nexport type { FvContextHelpSeverity };\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'ok-fv-context-help': FvContextHelp;\n    }\n}\n\n/**\n * An info trigger with an attached tooltip for lightweight contextual guidance.\n */\nexport class FvContextHelp extends FoundationElement {\n    @attr\n    public text = '';\n\n    @attr({ attribute: 'trigger-label' })\n    public triggerLabel = 'Show help';\n\n    @attr\n    public severity: FvContextHelpSeverity;\n\n    @attr({ attribute: 'icon-visible', mode: 'boolean' })\n    public iconVisible = false;\n\n    /** @internal */\n    public readonly tooltipAnchorId = uniqueId('ok-fv-context-help');\n}\n\nconst okFvContextHelp = FvContextHelp.compose({\n    baseName: 'fv-context-help',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('ok').register(okFvContextHelp());\nexport const fvContextHelpTag = 'ok-fv-context-help';"]}

package/dist/esm/fv/context-help/styles.d.ts

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

package/dist/esm/fv/context-help/styles.js

@@ -0,0 +1,55 @@
+import { css } from '@ni/fast-element';
+import { borderHoverColor, iconColor, iconSize, linkFontColor } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+import { display } from '../../utilities/style/display';
+export const styles = css `
+    @layer base, hover, focusVisible, active, disabled, top;
+
+    @layer base {
+        ${display('inline-flex')}
+
+        :host {
+            align-items: center;
+            margin-left: 4px;
+        }
+
+        .context-help-trigger {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: ${iconSize};
+            height: ${iconSize};
+            padding: 0;
+            border: 0;
+            border-radius: 2px;
+            background: transparent;
+            color: ${linkFontColor};
+            cursor: help;
+        }
+
+        .context-help-trigger > * {
+            width: ${iconSize};
+            height: ${iconSize};
+            ${iconColor.cssCustomProperty}: currentColor;
+        }
+
+        nimble-tooltip:not(:defined) {
+            display: none;
+        }
+    }
+
+    @layer hover {}
+
+    @layer focusVisible {
+        .context-help-trigger:focus-visible {
+            outline: 2px solid ${borderHoverColor};
+            outline-offset: -2px;
+        }
+    }
+
+    @layer active {}
+
+    @layer disabled {}
+
+    @layer top {}
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/fv/context-help/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/context-help/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,gBAAgB,EAChB,SAAS,EACT,QAAQ,EACR,aAAa,EAChB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,aAAa,CAAC;;;;;;;;;;;qBAWX,QAAQ;sBACP,QAAQ;;;;;qBAKT,aAAa;;;;;qBAKb,QAAQ;sBACP,QAAQ;cAChB,SAAS,CAAC,iBAAiB;;;;;;;;;;;;iCAYR,gBAAgB;;;;;;;;;;CAUhD,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    borderHoverColor,\n    iconColor,\n    iconSize,\n    linkFontColor\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n    @layer base, hover, focusVisible, active, disabled, top;\n\n    @layer base {\n        ${display('inline-flex')}\n\n        :host {\n            align-items: center;\n            margin-left: 4px;\n        }\n\n        .context-help-trigger {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            width: ${iconSize};\n            height: ${iconSize};\n            padding: 0;\n            border: 0;\n            border-radius: 2px;\n            background: transparent;\n            color: ${linkFontColor};\n            cursor: help;\n        }\n\n        .context-help-trigger > * {\n            width: ${iconSize};\n            height: ${iconSize};\n            ${iconColor.cssCustomProperty}: currentColor;\n        }\n\n        nimble-tooltip:not(:defined) {\n            display: none;\n        }\n    }\n\n    @layer hover {}\n\n    @layer focusVisible {\n        .context-help-trigger:focus-visible {\n            outline: 2px solid ${borderHoverColor};\n            outline-offset: -2px;\n        }\n    }\n\n    @layer active {}\n\n    @layer disabled {}\n\n    @layer top {}\n`;"]}

package/dist/esm/fv/context-help/template.d.ts

@@ -0,0 +1,2 @@
+import type { FvContextHelp } from '.';
+export declare const template: import("@ni/fast-element").ViewTemplate<FvContextHelp, any>;

package/dist/esm/fv/context-help/template.js

@@ -0,0 +1,24 @@
+import { html, when } from '@ni/fast-element';
+import { iconInfoCircleTag } from '@ni/nimble-components/dist/esm/icons/info-circle';
+import { tooltipTag } from '@ni/nimble-components/dist/esm/tooltip';
+export const template = html `
+    <button
+        id="${x => x.tooltipAnchorId}"
+        class="context-help-trigger"
+        type="button"
+        aria-label="${x => x.triggerLabel}"
+    >
+        <${iconInfoCircleTag}></${iconInfoCircleTag}>
+    </button>
+    <${tooltipTag}
+        anchor="${x => x.tooltipAnchorId}"
+        severity="${x => x.severity}"
+        ?icon-visible="${x => x.iconVisible}"
+    >
+        ${when(x => x.text.length > 0, html `
+            <span>${x => x.text}</span>
+        `)}
+        <slot></slot>
+    </${tooltipTag}>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/fv/context-help/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/fv/context-help/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AACrF,OAAO,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AAGpE,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAe;;cAE7B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;;;sBAGd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;;WAE9B,iBAAiB,MAAM,iBAAiB;;OAE5C,UAAU;kBACC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;oBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;yBACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;;UAEjC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,IAAI,CAAe;oBACtC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;SACtB,CAAC;;QAEF,UAAU;CACjB,CAAC","sourcesContent":["import { html, when } from '@ni/fast-element';\nimport { iconInfoCircleTag } from '@ni/nimble-components/dist/esm/icons/info-circle';\nimport { tooltipTag } from '@ni/nimble-components/dist/esm/tooltip';\nimport type { FvContextHelp } from '.';\n\nexport const template = html<FvContextHelp>`\n    <button\n        id=\"${x => x.tooltipAnchorId}\"\n        class=\"context-help-trigger\"\n        type=\"button\"\n        aria-label=\"${x => x.triggerLabel}\"\n    >\n        <${iconInfoCircleTag}></${iconInfoCircleTag}>\n    </button>\n    <${tooltipTag}\n        anchor=\"${x => x.tooltipAnchorId}\"\n        severity=\"${x => x.severity}\"\n        ?icon-visible=\"${x => x.iconVisible}\"\n    >\n        ${when(x => x.text.length > 0, html<FvContextHelp>`\n            <span>${x => x.text}</span>\n        `)}\n        <slot></slot>\n    </${tooltipTag}>\n`;"]}

package/dist/esm/fv/context-help/types.d.ts

@@ -0,0 +1 @@
+export type FvContextHelpSeverity = 'error' | 'information' | undefined;

package/dist/esm/fv/context-help/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/fv/context-help/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/fv/context-help/types.ts"],"names":[],"mappings":"","sourcesContent":["export type FvContextHelpSeverity = 'error' | 'information' | undefined;"]}

package/dist/esm/fv/search-input/index.d.ts

@@ -10,8 +10,10 @@ declare global {
  */
 export declare class FvSearchInput extends FoundationTextField {
     appearance: FvSearchInputAppearanceType;
+    /** @internal */
     handleChange(): void;
     /**
+     * @internal
      * Clears the current value, restores focus to the text input, and
      * dispatches a synthetic `input` event on the host so consumers
      * observe the same immediate value-update contract as typing.

package/dist/esm/fv/search-input/index.js

@@ -12,11 +12,13 @@ export class FvSearchInput extends FoundationTextField {
         super(...arguments);
         this.appearance = FvSearchInputAppearance.outline;
     }
+    /** @internal */
     handleChange() {
         this.value = this.control.value;
         super.handleChange();
     }
     /**
+     * @internal
      * Clears the current value, restores focus to the text input, and
      * dispatches a synthetic `input` event on the host so consumers
      * observe the same immediate value-update contract as typing.

package/dist/esm/fv/search-input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fv/search-input/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EACH,YAAY,EACZ,SAAS,IAAI,mBAAmB,EAEnC,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EACH,uBAAuB,EAE1B,MAAM,SAAS,CAAC;AAQjB;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,mBAAmB;IAAtD;;QAEW,eAAU,GAAgC,uBAAuB,CAAC,OAAO,CAAC;IAwBrF,CAAC;IAtBmB,YAAY;QACxB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;QAChC,KAAK,CAAC,YAAY,EAAE,CAAC;IACzB,CAAC;IAED;;;;;;OAMG;IACI,KAAK;QACR,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE,CAAC;YACpB,OAAO,IAAI,CAAC;QAChB,CAAC;QAED,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QACrB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAC1E,OAAO,IAAI,CAAC;IAChB,CAAC;CACJ;AAxBU;IADN,IAAI;iDAC4E;AA0BrF,MAAM,eAAe,GAAG,aAAa,CAAC,OAAO,CAAmB;IAC5D,QAAQ,EAAE,iBAAiB;IAC3B,SAAS,EAAE,mBAAmB;IAC9B,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC;AACxE,MAAM,CAAC,MAAM,gBAAgB,GAAG,oBAAoB,CAAC","sourcesContent":["import { attr } from '@ni/fast-element';\nimport {\n    DesignSystem,\n    TextField as FoundationTextField,\n    type TextFieldOptions\n} from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { template } from './template';\nimport {\n    FvSearchInputAppearance,\n    type FvSearchInputAppearance as FvSearchInputAppearanceType\n} from './types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'ok-fv-search-input': FvSearchInput;\n    }\n}\n\n/**\n * A compact search input with a built-in clear affordance.\n */\nexport class FvSearchInput extends FoundationTextField {\n    @attr\n    public appearance: FvSearchInputAppearanceType = FvSearchInputAppearance.outline;\n\n    public override handleChange(): void {\n        this.value = this.control.value;\n        super.handleChange();\n    }\n\n    /**\n     * Clears the current value, restores focus to the text input, and\n     * dispatches a synthetic `input` event on the host so consumers\n     * observe the same immediate value-update contract as typing.\n     * The inner <input> value is updated on the next FAST render cycle\n     * via the `:value` template binding.\n     */\n    public clear(): boolean {\n        if (this.value === '') {\n            return true;\n        }\n\n        this.value = '';\n        this.control.focus();\n        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n        return true;\n    }\n}\n\nconst okFvSearchInput = FvSearchInput.compose<TextFieldOptions>({\n    baseName: 'fv-search-input',\n    baseClass: FoundationTextField,\n    template,\n    styles,\n    shadowOptions: {\n        delegatesFocus: true\n    }\n});\n\nDesignSystem.getOrCreate().withPrefix('ok').register(okFvSearchInput());\nexport const fvSearchInputTag = 'ok-fv-search-input';"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fv/search-input/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EACH,YAAY,EACZ,SAAS,IAAI,mBAAmB,EAEnC,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EACH,uBAAuB,EAE1B,MAAM,SAAS,CAAC;AAQjB;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,mBAAmB;IAAtD;;QAEW,eAAU,GAAgC,uBAAuB,CAAC,OAAO,CAAC;IA0BrF,CAAC;IAxBG,gBAAgB;IACA,YAAY;QACxB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;QAChC,KAAK,CAAC,YAAY,EAAE,CAAC;IACzB,CAAC;IAED;;;;;;;OAOG;IACI,KAAK;QACR,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE,CAAC;YACpB,OAAO,IAAI,CAAC;QAChB,CAAC;QAED,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QACrB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAC1E,OAAO,IAAI,CAAC;IAChB,CAAC;CACJ;AA1BU;IADN,IAAI;iDAC4E;AA4BrF,MAAM,eAAe,GAAG,aAAa,CAAC,OAAO,CAAmB;IAC5D,QAAQ,EAAE,iBAAiB;IAC3B,SAAS,EAAE,mBAAmB;IAC9B,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC;AACxE,MAAM,CAAC,MAAM,gBAAgB,GAAG,oBAAoB,CAAC","sourcesContent":["import { attr } from '@ni/fast-element';\nimport {\n    DesignSystem,\n    TextField as FoundationTextField,\n    type TextFieldOptions\n} from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { template } from './template';\nimport {\n    FvSearchInputAppearance,\n    type FvSearchInputAppearance as FvSearchInputAppearanceType\n} from './types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'ok-fv-search-input': FvSearchInput;\n    }\n}\n\n/**\n * A compact search input with a built-in clear affordance.\n */\nexport class FvSearchInput extends FoundationTextField {\n    @attr\n    public appearance: FvSearchInputAppearanceType = FvSearchInputAppearance.outline;\n\n    /** @internal */\n    public override handleChange(): void {\n        this.value = this.control.value;\n        super.handleChange();\n    }\n\n    /**\n     * @internal\n     * Clears the current value, restores focus to the text input, and\n     * dispatches a synthetic `input` event on the host so consumers\n     * observe the same immediate value-update contract as typing.\n     * The inner <input> value is updated on the next FAST render cycle\n     * via the `:value` template binding.\n     */\n    public clear(): boolean {\n        if (this.value === '') {\n            return true;\n        }\n\n        this.value = '';\n        this.control.focus();\n        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n        return true;\n    }\n}\n\nconst okFvSearchInput = FvSearchInput.compose<TextFieldOptions>({\n    baseName: 'fv-search-input',\n    baseClass: FoundationTextField,\n    template,\n    styles,\n    shadowOptions: {\n        delegatesFocus: true\n    }\n});\n\nDesignSystem.getOrCreate().withPrefix('ok').register(okFvSearchInput());\nexport const fvSearchInputTag = 'ok-fv-search-input';"]}

package/dist/esm/fv/search-input/styles.js

@@ -8,12 +8,12 @@ export const styles = css `
         ${display('inline-block')}
 
         :host {
-            --ni-private-fv-search-input-inline-padding: ${standardPadding};
-            --ni-private-fv-search-input-leading-inset: ${mediumPadding};
-            --ni-private-fv-search-input-leading-space: calc(var(--ni-private-fv-search-input-leading-inset) + ${iconSize} + ${smallPadding});
-            --ni-private-fv-search-input-trailing-space: calc(var(--ni-private-fv-search-input-inline-padding) + ${iconSize});
-            --ni-private-fv-search-input-border-color: rgba(${borderRgbPartialColor}, 0.3);
-            --ni-private-fv-search-input-border-radius: 0px;
+            --ni-private-ok-fv-search-input-inline-padding: ${standardPadding};
+            --ni-private-ok-fv-search-input-leading-inset: ${mediumPadding};
+            --ni-private-ok-fv-search-input-leading-space: calc(var(--ni-private-ok-fv-search-input-leading-inset) + ${iconSize} + ${smallPadding});
+            --ni-private-ok-fv-search-input-trailing-space: calc(var(--ni-private-ok-fv-search-input-inline-padding) + ${iconSize});
+            --ni-private-ok-fv-search-input-border-color: rgba(${borderRgbPartialColor}, 0.3);
+            --ni-private-ok-fv-search-input-border-radius: 0px;
             min-width: 120px;
             height: ${controlHeight};
             font: ${bodyFont};
@@ -27,7 +27,7 @@ export const styles = css `
             width: 100%;
             height: 100%;
             border: ${borderWidth} solid transparent;
-            border-radius: var(--ni-private-fv-search-input-border-radius);
+            border-radius: var(--ni-private-ok-fv-search-input-border-radius);
             color: inherit;
             background-color: transparent;
             transition:
@@ -56,7 +56,7 @@ export const styles = css `
             align-items: center;
             justify-content: center;
             top: 50%;
-            inset-inline-start: var(--ni-private-fv-search-input-leading-inset);
+            inset-inline-start: var(--ni-private-ok-fv-search-input-leading-inset);
             transform: translateY(-50%);
             color: ${placeholderFontColor};
             pointer-events: none;
@@ -71,7 +71,7 @@ export const styles = css `
             min-width: 0;
             width: 100%;
             height: 100%;
-            padding: 0 var(--ni-private-fv-search-input-trailing-space) 0 var(--ni-private-fv-search-input-leading-space);
+            padding: 0 var(--ni-private-ok-fv-search-input-trailing-space) 0 var(--ni-private-ok-fv-search-input-leading-space);
             font: inherit;
             line-height: normal;
             color: inherit;
@@ -93,21 +93,21 @@ export const styles = css `
             align-items: center;
             justify-content: center;
             top: 50%;
-            inset-inline-end: 2px;
+            inset-inline-end: 3px;
             height: calc(100% - 6px);
             aspect-ratio: 1;
             padding: 0;
             transform: translateY(-50%);
-            color: ${placeholderFontColor};
+            color: inherit;
             border: none;
             border-radius: 2px;
             background: transparent;
             cursor: pointer;
-            ${iconColor.cssCustomProperty}: ${placeholderFontColor};
+            ${iconColor.cssCustomProperty}: currentColor;
         }
 
         :host([appearance='outline']) .search-input-container {
-            border-color: var(--ni-private-fv-search-input-border-color);
+            border-color: var(--ni-private-ok-fv-search-input-border-color);
         }
 
         :host([appearance='block']) .search-input-container {
@@ -116,7 +116,7 @@ export const styles = css `
 
         :host([appearance='underline']) .search-input-container::after {
             transform: scaleX(1);
-            border-bottom-color: var(--ni-private-fv-search-input-border-color);
+            border-bottom-color: var(--ni-private-ok-fv-search-input-border-color);
         }
     }
 

package/dist/esm/fv/search-input/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/search-input/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,cAAc,EACd,SAAS,EACT,QAAQ,EACR,aAAa,EACb,oBAAoB,EACpB,YAAY,EACZ,UAAU,EACV,eAAe,EAClB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,cAAc,CAAC;;;2DAG0B,eAAe;0DAChB,aAAa;iHAC0C,QAAQ,MAAM,YAAY;mHACxB,QAAQ;8DAC7D,qBAAqB;;;sBAG7D,aAAa;oBACf,QAAQ;qBACP,aAAa;;;;;;;;;sBASZ,WAAW;;;;;+BAKF,UAAU;6BACZ,UAAU;mCACJ,UAAU;;;;;;;yCAOJ,WAAW;kCAClB,WAAW,iBAAiB,gBAAgB;;;;4BAIlD,UAAU;sCACA,UAAU;;;;;;;;;;;;qBAY3B,oBAAoB;;cAE3B,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;;;;;;;;;;;;;;;;;qBAsB7C,oBAAoB;;;;;;;;;;;;;;;;qBAgBpB,oBAAoB;;;;;cAK3B,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;;;qCAQ7B,qBAAqB;;;;;;;;;;;0BAWhC,cAAc;;;;4BAIZ,gBAAgB;gCACZ,WAAW,IAAI,gBAAgB;;;;;mCAK5B,gBAAgB;;;;mCAIhB,gBAAgB;;;;;mCAKhB,gBAAgB;;;;;;;;;;uBAU5B,WAAW,UAAU,gBAAgB;;;;;4BAKhC,gBAAgB;gCACZ,WAAW,IAAI,gBAAgB;;;;;mCAK5B,gBAAgB;;;;mCAIhB,gBAAgB;;;;;mCAKhB,gBAAgB;;;CAGlD,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    bodyFont,\n    bodyFontColor,\n    borderHoverColor,\n    borderRgbPartialColor,\n    borderWidth,\n    controlHeight,\n    fillHoverColor,\n    iconColor,\n    iconSize,\n    mediumPadding,\n    placeholderFontColor,\n    smallPadding,\n    smallDelay,\n    standardPadding\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n    @layer base, hover, focusVisible, active, disabled, top;\n\n    @layer base {\n        ${display('inline-block')}\n\n        :host {\n            --ni-private-fv-search-input-inline-padding: ${standardPadding};\n            --ni-private-fv-search-input-leading-inset: ${mediumPadding};\n            --ni-private-fv-search-input-leading-space: calc(var(--ni-private-fv-search-input-leading-inset) + ${iconSize} + ${smallPadding});\n            --ni-private-fv-search-input-trailing-space: calc(var(--ni-private-fv-search-input-inline-padding) + ${iconSize});\n            --ni-private-fv-search-input-border-color: rgba(${borderRgbPartialColor}, 0.3);\n            --ni-private-fv-search-input-border-radius: 0px;\n            min-width: 120px;\n            height: ${controlHeight};\n            font: ${bodyFont};\n            color: ${bodyFontColor};\n        }\n\n        .search-input-container {\n            position: relative;\n            display: flex;\n            align-items: center;\n            width: 100%;\n            height: 100%;\n            border: ${borderWidth} solid transparent;\n            border-radius: var(--ni-private-fv-search-input-border-radius);\n            color: inherit;\n            background-color: transparent;\n            transition:\n                border-color ${smallDelay} ease-in-out,\n                box-shadow ${smallDelay} ease-in-out,\n                background-color ${smallDelay} ease-in-out;\n        }\n\n        .search-input-container::after {\n            content: '';\n            position: absolute;\n            inset-inline: 0;\n            inset-block-end: calc(-1 * ${borderWidth});\n            border-bottom: calc(${borderWidth} + 1px) solid ${borderHoverColor};\n            transform: scaleX(0);\n            transform-origin: center;\n            transition:\n                transform ${smallDelay} ease-in-out,\n                border-bottom-color ${smallDelay} ease-in-out;\n            pointer-events: none;\n        }\n\n        .search-input-icon {\n            position: absolute;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            top: 50%;\n            inset-inline-start: var(--ni-private-fv-search-input-leading-inset);\n            transform: translateY(-50%);\n            color: ${placeholderFontColor};\n            pointer-events: none;\n            ${iconColor.cssCustomProperty}: ${placeholderFontColor};\n        }\n\n        .search-input {\n            -webkit-appearance: none;\n            appearance: none;\n            display: block;\n            flex: 1 1 auto;\n            min-width: 0;\n            width: 100%;\n            height: 100%;\n            padding: 0 var(--ni-private-fv-search-input-trailing-space) 0 var(--ni-private-fv-search-input-leading-space);\n            font: inherit;\n            line-height: normal;\n            color: inherit;\n            border: none;\n            outline: none;\n            border-radius: 0;\n            background: transparent;\n        }\n\n        .search-input::placeholder {\n            color: ${placeholderFontColor};\n        }\n\n        .search-input-clear {\n            -webkit-appearance: none;\n            appearance: none;\n            position: absolute;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            top: 50%;\n            inset-inline-end: 2px;\n            height: calc(100% - 6px);\n            aspect-ratio: 1;\n            padding: 0;\n            transform: translateY(-50%);\n            color: ${placeholderFontColor};\n            border: none;\n            border-radius: 2px;\n            background: transparent;\n            cursor: pointer;\n            ${iconColor.cssCustomProperty}: ${placeholderFontColor};\n        }\n\n        :host([appearance='outline']) .search-input-container {\n            border-color: var(--ni-private-fv-search-input-border-color);\n        }\n\n        :host([appearance='block']) .search-input-container {\n            background-color: rgba(${borderRgbPartialColor}, 0.1);\n        }\n\n        :host([appearance='underline']) .search-input-container::after {\n            transform: scaleX(1);\n            border-bottom-color: var(--ni-private-fv-search-input-border-color);\n        }\n    }\n\n    @layer hover {\n        .search-input-clear:hover {\n            background: ${fillHoverColor};\n        }\n\n        :host([appearance='outline']) .search-input-container:hover {\n            border-color: ${borderHoverColor};\n            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;\n        }\n\n        :host([appearance='block']) .search-input-container:hover::after {\n            transform: scaleX(1);\n            border-bottom-color: ${borderHoverColor};\n        }\n\n        :host([appearance='underline']) .search-input-container:hover::after {\n            border-bottom-color: ${borderHoverColor};\n        }\n\n        :host([appearance='frameless']) .search-input-container:hover::after {\n            transform: scaleX(1);\n            border-bottom-color: ${borderHoverColor};\n        }\n    }\n\n    @layer focusVisible {\n        .search-input:focus-visible {\n            outline: none;\n        }\n\n        .search-input-clear:focus-visible {\n            outline: ${borderWidth} solid ${borderHoverColor};\n            outline-offset: -1px;\n        }\n\n        :host([appearance='outline']) .search-input-container:focus-within {\n            border-color: ${borderHoverColor};\n            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;\n        }\n\n        :host([appearance='block']) .search-input-container:focus-within::after {\n            transform: scaleX(1);\n            border-bottom-color: ${borderHoverColor};\n        }\n\n        :host([appearance='underline']) .search-input-container:focus-within::after {\n            border-bottom-color: ${borderHoverColor};\n        }\n\n        :host([appearance='frameless']) .search-input-container:focus-within::after {\n            transform: scaleX(1);\n            border-bottom-color: ${borderHoverColor};\n        }\n    }\n`;"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/search-input/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,cAAc,EACd,SAAS,EACT,QAAQ,EACR,aAAa,EACb,oBAAoB,EACpB,YAAY,EACZ,UAAU,EACV,eAAe,EAClB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,cAAc,CAAC;;;8DAG6B,eAAe;6DAChB,aAAa;uHAC6C,QAAQ,MAAM,YAAY;yHACxB,QAAQ;iEAChE,qBAAqB;;;sBAGhE,aAAa;oBACf,QAAQ;qBACP,aAAa;;;;;;;;;sBASZ,WAAW;;;;;+BAKF,UAAU;6BACZ,UAAU;mCACJ,UAAU;;;;;;;yCAOJ,WAAW;kCAClB,WAAW,iBAAiB,gBAAgB;;;;4BAIlD,UAAU;sCACA,UAAU;;;;;;;;;;;;qBAY3B,oBAAoB;;cAE3B,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;;;;;;;;;;;;;;;;;qBAsB7C,oBAAoB;;;;;;;;;;;;;;;;;;;;;cAqB3B,SAAS,CAAC,iBAAiB;;;;;;;;qCAQJ,qBAAqB;;;;;;;;;;;0BAWhC,cAAc;;;;4BAIZ,gBAAgB;gCACZ,WAAW,IAAI,gBAAgB;;;;;mCAK5B,gBAAgB;;;;mCAIhB,gBAAgB;;;;;mCAKhB,gBAAgB;;;;;;;;;;uBAU5B,WAAW,UAAU,gBAAgB;;;;;4BAKhC,gBAAgB;gCACZ,WAAW,IAAI,gBAAgB;;;;;mCAK5B,gBAAgB;;;;mCAIhB,gBAAgB;;;;;mCAKhB,gBAAgB;;;CAGlD,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    bodyFont,\n    bodyFontColor,\n    borderHoverColor,\n    borderRgbPartialColor,\n    borderWidth,\n    controlHeight,\n    fillHoverColor,\n    iconColor,\n    iconSize,\n    mediumPadding,\n    placeholderFontColor,\n    smallPadding,\n    smallDelay,\n    standardPadding\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n    @layer base, hover, focusVisible, active, disabled, top;\n\n    @layer base {\n        ${display('inline-block')}\n\n        :host {\n            --ni-private-ok-fv-search-input-inline-padding: ${standardPadding};\n            --ni-private-ok-fv-search-input-leading-inset: ${mediumPadding};\n            --ni-private-ok-fv-search-input-leading-space: calc(var(--ni-private-ok-fv-search-input-leading-inset) + ${iconSize} + ${smallPadding});\n            --ni-private-ok-fv-search-input-trailing-space: calc(var(--ni-private-ok-fv-search-input-inline-padding) + ${iconSize});\n            --ni-private-ok-fv-search-input-border-color: rgba(${borderRgbPartialColor}, 0.3);\n            --ni-private-ok-fv-search-input-border-radius: 0px;\n            min-width: 120px;\n            height: ${controlHeight};\n            font: ${bodyFont};\n            color: ${bodyFontColor};\n        }\n\n        .search-input-container {\n            position: relative;\n            display: flex;\n            align-items: center;\n            width: 100%;\n            height: 100%;\n            border: ${borderWidth} solid transparent;\n            border-radius: var(--ni-private-ok-fv-search-input-border-radius);\n            color: inherit;\n            background-color: transparent;\n            transition:\n                border-color ${smallDelay} ease-in-out,\n                box-shadow ${smallDelay} ease-in-out,\n                background-color ${smallDelay} ease-in-out;\n        }\n\n        .search-input-container::after {\n            content: '';\n            position: absolute;\n            inset-inline: 0;\n            inset-block-end: calc(-1 * ${borderWidth});\n            border-bottom: calc(${borderWidth} + 1px) solid ${borderHoverColor};\n            transform: scaleX(0);\n            transform-origin: center;\n            transition:\n                transform ${smallDelay} ease-in-out,\n                border-bottom-color ${smallDelay} ease-in-out;\n            pointer-events: none;\n        }\n\n        .search-input-icon {\n            position: absolute;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            top: 50%;\n            inset-inline-start: var(--ni-private-ok-fv-search-input-leading-inset);\n            transform: translateY(-50%);\n            color: ${placeholderFontColor};\n            pointer-events: none;\n            ${iconColor.cssCustomProperty}: ${placeholderFontColor};\n        }\n\n        .search-input {\n            -webkit-appearance: none;\n            appearance: none;\n            display: block;\n            flex: 1 1 auto;\n            min-width: 0;\n            width: 100%;\n            height: 100%;\n            padding: 0 var(--ni-private-ok-fv-search-input-trailing-space) 0 var(--ni-private-ok-fv-search-input-leading-space);\n            font: inherit;\n            line-height: normal;\n            color: inherit;\n            border: none;\n            outline: none;\n            border-radius: 0;\n            background: transparent;\n        }\n\n        .search-input::placeholder {\n            color: ${placeholderFontColor};\n        }\n\n        .search-input-clear {\n            -webkit-appearance: none;\n            appearance: none;\n            position: absolute;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            top: 50%;\n            inset-inline-end: 3px;\n            height: calc(100% - 6px);\n            aspect-ratio: 1;\n            padding: 0;\n            transform: translateY(-50%);\n            color: inherit;\n            border: none;\n            border-radius: 2px;\n            background: transparent;\n            cursor: pointer;\n            ${iconColor.cssCustomProperty}: currentColor;\n        }\n\n        :host([appearance='outline']) .search-input-container {\n            border-color: var(--ni-private-ok-fv-search-input-border-color);\n        }\n\n        :host([appearance='block']) .search-input-container {\n            background-color: rgba(${borderRgbPartialColor}, 0.1);\n        }\n\n        :host([appearance='underline']) .search-input-container::after {\n            transform: scaleX(1);\n            border-bottom-color: var(--ni-private-ok-fv-search-input-border-color);\n        }\n    }\n\n    @layer hover {\n        .search-input-clear:hover {\n            background: ${fillHoverColor};\n        }\n\n        :host([appearance='outline']) .search-input-container:hover {\n            border-color: ${borderHoverColor};\n            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;\n        }\n\n        :host([appearance='block']) .search-input-container:hover::after {\n            transform: scaleX(1);\n            border-bottom-color: ${borderHoverColor};\n        }\n\n        :host([appearance='underline']) .search-input-container:hover::after {\n            border-bottom-color: ${borderHoverColor};\n        }\n\n        :host([appearance='frameless']) .search-input-container:hover::after {\n            transform: scaleX(1);\n            border-bottom-color: ${borderHoverColor};\n        }\n    }\n\n    @layer focusVisible {\n        .search-input:focus-visible {\n            outline: none;\n        }\n\n        .search-input-clear:focus-visible {\n            outline: ${borderWidth} solid ${borderHoverColor};\n            outline-offset: -1px;\n        }\n\n        :host([appearance='outline']) .search-input-container:focus-within {\n            border-color: ${borderHoverColor};\n            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;\n        }\n\n        :host([appearance='block']) .search-input-container:focus-within::after {\n            transform: scaleX(1);\n            border-bottom-color: ${borderHoverColor};\n        }\n\n        :host([appearance='underline']) .search-input-container:focus-within::after {\n            border-bottom-color: ${borderHoverColor};\n        }\n\n        :host([appearance='frameless']) .search-input-container:focus-within::after {\n            transform: scaleX(1);\n            border-bottom-color: ${borderHoverColor};\n        }\n    }\n`;"]}

package/dist/esm/fv/split-button/index.d.ts

@@ -0,0 +1,43 @@
+import { FoundationElement } from '@ni/fast-foundation';
+import type { AnchoredRegion } from '@ni/nimble-components/dist/esm/anchored-region';
+import { type FvSplitButtonAppearance as FvSplitButtonAppearanceType, type FvSplitButtonAppearanceVariant as FvSplitButtonAppearanceVariantType } from './types';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-fv-split-button': FvSplitButton;
+    }
+}
+/**
+ * A button with a primary action and a secondary expandable menu surface.
+ */
+export declare class FvSplitButton extends FoundationElement {
+    label: string;
+    disabled: boolean;
+    open: boolean;
+    appearance: FvSplitButtonAppearanceType;
+    appearanceVariant: FvSplitButtonAppearanceVariantType;
+    /** @internal */
+    splitButtonContainer?: HTMLDivElement;
+    /** @internal */
+    region?: AnchoredRegion;
+    /** @internal */
+    disabledChanged(): void;
+    /** @internal */
+    connectedCallback(): void;
+    /** @internal */
+    disconnectedCallback(): void;
+    /** @internal */
+    handlePrimaryClick(): void;
+    /** @internal */
+    handleToggleClick(): void;
+    /** @internal */
+    handleMenuChange(): void;
+    /** @internal */
+    regionChanged(prev: AnchoredRegion | undefined, _next: AnchoredRegion | undefined): void;
+    /** @internal */
+    splitButtonContainerChanged(): void;
+    private readonly documentClickHandler;
+    private readonly keydownHandler;
+    private readonly menuChangeHandler;
+    private setOpen;
+}
+export declare const fvSplitButtonTag = "ok-fv-split-button";