@ni/ok-components 1.13.0 → 1.15.0

package/dist/esm/fv/split-button-anchor/styles.js

@@ -1,228 +1,2 @@
-import { css } from '@ni/fast-element';
-import { actionRgbPartialColor, borderHoverColor, borderRgbPartialColor, borderWidth, buttonAccentBlockFontColor, buttonAccentOutlineFontColor, buttonBorderAccentOutlineColor, buttonFillAccentColor, buttonFillPrimaryColor, buttonLabelDisabledFontColor, buttonLabelFont, buttonLabelFontColor, buttonPrimaryFontColor, controlHeight, fillSelectedColor, iconColor, smallDelay, standardPadding } 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-block')}
-
-        :host {
-            --ni-private-ok-fv-split-button-anchor-background-image: none;
-            --ni-private-ok-fv-split-button-anchor-background-size: 100% 100%;
-            --ni-private-ok-fv-split-button-anchor-background-size-emphasis: 100% 100%;
-            --ni-private-ok-fv-split-button-anchor-border: rgba(${actionRgbPartialColor}, 0.3);
-            --ni-private-ok-fv-split-button-anchor-color: ${buttonLabelFontColor};
-            position: relative;
-            height: ${controlHeight};
-            vertical-align: middle;
-        }
-
-        :host([appearance='ghost']) {
-            --ni-private-ok-fv-split-button-anchor-border: transparent;
-        }
-
-        :host([appearance='block']) {
-            --ni-private-ok-fv-split-button-anchor-background-image: linear-gradient(
-                rgba(${borderRgbPartialColor}, 0.1),
-                rgba(${borderRgbPartialColor}, 0.1)
-            );
-            --ni-private-ok-fv-split-button-anchor-border: rgba(${borderRgbPartialColor}, 0.1);
-            --ni-private-ok-fv-split-button-anchor-background-size-emphasis: calc(100% - 4px) calc(100% - 4px);
-        }
-
-        :host([appearance='outline'][appearance-variant='primary']) {
-            --ni-private-ok-fv-split-button-anchor-border: rgb(${actionRgbPartialColor});
-        }
-
-        :host([appearance='outline'][appearance-variant='accent']) {
-            --ni-private-ok-fv-split-button-anchor-border: ${buttonBorderAccentOutlineColor};
-            --ni-private-ok-fv-split-button-anchor-color: ${buttonAccentOutlineFontColor};
-        }
-
-        :host([appearance='block'][appearance-variant='primary']) {
-            --ni-private-ok-fv-split-button-anchor-background-image: linear-gradient(
-                ${buttonFillPrimaryColor},
-                ${buttonFillPrimaryColor}
-            );
-            --ni-private-ok-fv-split-button-anchor-border: ${buttonFillPrimaryColor};
-            --ni-private-ok-fv-split-button-anchor-color: ${buttonPrimaryFontColor};
-        }
-
-        :host([appearance='block'][appearance-variant='accent']) {
-            --ni-private-ok-fv-split-button-anchor-background-image: linear-gradient(
-                ${buttonFillAccentColor},
-                ${buttonFillAccentColor}
-            );
-            --ni-private-ok-fv-split-button-anchor-border: ${buttonFillAccentColor};
-            --ni-private-ok-fv-split-button-anchor-color: ${buttonAccentBlockFontColor};
-        }
-
-        .split-button-container {
-            position: relative;
-            display: inline-flex;
-            align-items: stretch;
-            height: 100%;
-        }
-
-        .split-button-primary,
-        .split-button-toggle {
-            appearance: none;
-            position: relative;
-            z-index: 0;
-            height: 100%;
-            box-sizing: border-box;
-            margin: 0;
-            border: ${borderWidth} solid var(--ni-private-ok-fv-split-button-anchor-border);
-            background-color: transparent;
-            background-image: var(--ni-private-ok-fv-split-button-anchor-background-image);
-            background-position: center;
-            background-repeat: no-repeat;
-            background-size: var(--ni-private-ok-fv-split-button-anchor-background-size);
-            color: var(--ni-private-ok-fv-split-button-anchor-color);
-            fill: currentcolor;
-            font: ${buttonLabelFont};
-            cursor: pointer;
-            outline: none;
-            transition:
-                box-shadow ${smallDelay} ease-in-out,
-                border-color ${smallDelay} ease-in-out,
-                background-size ${smallDelay} ease-in-out;
-        }
-
-        .split-button-primary {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            padding: 0 ${standardPadding};
-            border-inline-end-color: transparent;
-            white-space: nowrap;
-            text-decoration: none;
-        }
-
-        .split-button-primary::before,
-        .split-button-toggle::before {
-            content: '';
-            position: absolute;
-            inset: 0;
-            pointer-events: none;
-            outline: 0px solid transparent;
-            outline-offset: -3px;
-            transition: outline ${smallDelay} ease-in-out;
-        }
-
-        .split-button-toggle {
-            width: ${controlHeight};
-            min-width: ${controlHeight};
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            border-inline-start-color: var(--ni-private-ok-fv-split-button-anchor-border);
-            margin-inline-start: calc(-1 * ${borderWidth});
-        }
-
-        .split-button-toggle > * {
-            color: currentColor;
-            ${iconColor.cssCustomProperty}: currentColor;
-        }
-
-        .split-button-primary-disabled {
-            cursor: default;
-        }
-
-        :host([appearance='ghost']) .split-button-primary,
-        :host([appearance='ghost']) .split-button-toggle {
-            border-color: transparent;
-            box-shadow: none;
-        }
-
-        slot[name='menu']::slotted(*) {
-            min-width: 100%;
-            margin: 4px 0 0;
-        }
-    }
-
-    @layer hover {
-        .split-button-primary:hover,
-        .split-button-toggle:hover {
-            border-color: ${borderHoverColor};
-            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
-            background-size: var(--ni-private-ok-fv-split-button-anchor-background-size-emphasis);
-            z-index: 1;
-        }
-
-        :host([appearance='ghost']) .split-button-primary:hover,
-        :host([appearance='ghost']) .split-button-toggle:hover {
-            border-color: ${borderHoverColor};
-            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
-        }
-    }
-
-    @layer focusVisible {
-        .split-button-primary:focus-visible,
-        .split-button-toggle:focus-visible {
-            border-color: ${borderHoverColor};
-            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
-            background-size: var(--ni-private-ok-fv-split-button-anchor-background-size-emphasis);
-            z-index: 1;
-        }
-
-        .split-button-primary:focus-visible::before,
-        .split-button-toggle:focus-visible::before {
-            outline: ${borderWidth} solid ${borderHoverColor};
-        }
-
-        :host([appearance='ghost']) .split-button-primary:focus-visible,
-        :host([appearance='ghost']) .split-button-toggle:focus-visible {
-            border-color: ${borderHoverColor};
-            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
-        }
-    }
-
-    @layer active {
-        .split-button-primary:active,
-        .split-button-toggle:active,
-        :host([open]) .split-button-toggle {
-            border-color: ${borderHoverColor};
-            box-shadow: none;
-            background-image: linear-gradient(${fillSelectedColor}, ${fillSelectedColor});
-            background-size: calc(100% - 2px) calc(100% - 2px);
-        }
-
-        :host([appearance='block']) .split-button-primary:active,
-        :host([appearance='block']) .split-button-toggle:active,
-        :host([appearance='block'][open]) .split-button-toggle {
-            background-size: calc(100% - 4px) calc(100% - 4px);
-        }
-
-        :host([appearance='outline'][appearance-variant='accent']) .split-button-primary:active,
-        :host([appearance='outline'][appearance-variant='accent']) .split-button-toggle:active,
-        :host([appearance='outline'][appearance-variant='accent'][open]) .split-button-toggle {
-            color: ${buttonAccentOutlineFontColor};
-        }
-    }
-
-    @layer disabled {
-        :host([disabled]) {
-            --ni-private-ok-fv-split-button-anchor-color: ${buttonLabelDisabledFontColor};
-        }
-
-        :host([disabled][appearance='outline']) {
-            --ni-private-ok-fv-split-button-anchor-border: rgba(${borderRgbPartialColor}, 0.3);
-        }
-
-        :host([disabled]) .split-button-primary,
-        :host([disabled]) .split-button-toggle {
-            cursor: default;
-            box-shadow: none;
-        }
-
-        :host([disabled][appearance='ghost']) .split-button-primary,
-        :host([disabled][appearance='ghost']) .split-button-toggle {
-            border-color: transparent;
-        }
-    }
-
-    @layer top {}
-`;
+export { styles } from '../split-button/styles';
 //# sourceMappingURL=styles.js.map

package/dist/esm/fv/split-button-anchor/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/split-button-anchor/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,0BAA0B,EAC1B,4BAA4B,EAC5B,8BAA8B,EAC9B,qBAAqB,EACrB,sBAAsB,EACtB,4BAA4B,EAC5B,eAAe,EACf,oBAAoB,EACpB,sBAAsB,EACtB,aAAa,EACb,iBAAiB,EACjB,SAAS,EACT,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;;;;;;kEAMiC,qBAAqB;4DAC3B,oBAAoB;;sBAE1D,aAAa;;;;;;;;;;uBAUZ,qBAAqB;uBACrB,qBAAqB;;kEAEsB,qBAAqB;;;;;iEAKtB,qBAAqB;;;;6DAIzB,8BAA8B;4DAC/B,4BAA4B;;;;;kBAKtE,sBAAsB;kBACtB,sBAAsB;;6DAEqB,sBAAsB;4DACvB,sBAAsB;;;;;kBAKhE,qBAAqB;kBACrB,qBAAqB;;6DAEsB,qBAAqB;4DACtB,0BAA0B;;;;;;;;;;;;;;;;;;sBAkBhE,WAAW;;;;;;;;oBAQb,eAAe;;;;6BAIN,UAAU;+BACR,UAAU;kCACP,UAAU;;;;;;;yBAOnB,eAAe;;;;;;;;;;;;;;kCAcN,UAAU;;;;qBAIvB,aAAa;yBACT,aAAa;;;;;6CAKO,WAAW;;;;;cAK1C,SAAS,CAAC,iBAAiB;;;;;;;;;;;;;;;;;;;;;;4BAsBb,gBAAgB;gCACZ,WAAW,IAAI,gBAAgB;;;;;;;4BAOnC,gBAAgB;gCACZ,WAAW,IAAI,gBAAgB;;;;;;;4BAOnC,gBAAgB;gCACZ,WAAW,IAAI,gBAAgB;;;;;;;uBAOxC,WAAW,UAAU,gBAAgB;;;;;4BAKhC,gBAAgB;gCACZ,WAAW,IAAI,gBAAgB;;;;;;;;4BAQnC,gBAAgB;;gDAEI,iBAAiB,KAAK,iBAAiB;;;;;;;;;;;;;qBAalE,4BAA4B;;;;;;4DAMW,4BAA4B;;;;kEAItB,qBAAqB;;;;;;;;;;;;;;;;CAgBtF,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    actionRgbPartialColor,\n    borderHoverColor,\n    borderRgbPartialColor,\n    borderWidth,\n    buttonAccentBlockFontColor,\n    buttonAccentOutlineFontColor,\n    buttonBorderAccentOutlineColor,\n    buttonFillAccentColor,\n    buttonFillPrimaryColor,\n    buttonLabelDisabledFontColor,\n    buttonLabelFont,\n    buttonLabelFontColor,\n    buttonPrimaryFontColor,\n    controlHeight,\n    fillSelectedColor,\n    iconColor,\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-split-button-anchor-background-image: none;\n            --ni-private-ok-fv-split-button-anchor-background-size: 100% 100%;\n            --ni-private-ok-fv-split-button-anchor-background-size-emphasis: 100% 100%;\n            --ni-private-ok-fv-split-button-anchor-border: rgba(${actionRgbPartialColor}, 0.3);\n            --ni-private-ok-fv-split-button-anchor-color: ${buttonLabelFontColor};\n            position: relative;\n            height: ${controlHeight};\n            vertical-align: middle;\n        }\n\n        :host([appearance='ghost']) {\n            --ni-private-ok-fv-split-button-anchor-border: transparent;\n        }\n\n        :host([appearance='block']) {\n            --ni-private-ok-fv-split-button-anchor-background-image: linear-gradient(\n                rgba(${borderRgbPartialColor}, 0.1),\n                rgba(${borderRgbPartialColor}, 0.1)\n            );\n            --ni-private-ok-fv-split-button-anchor-border: rgba(${borderRgbPartialColor}, 0.1);\n            --ni-private-ok-fv-split-button-anchor-background-size-emphasis: calc(100% - 4px) calc(100% - 4px);\n        }\n\n        :host([appearance='outline'][appearance-variant='primary']) {\n            --ni-private-ok-fv-split-button-anchor-border: rgb(${actionRgbPartialColor});\n        }\n\n        :host([appearance='outline'][appearance-variant='accent']) {\n            --ni-private-ok-fv-split-button-anchor-border: ${buttonBorderAccentOutlineColor};\n            --ni-private-ok-fv-split-button-anchor-color: ${buttonAccentOutlineFontColor};\n        }\n\n        :host([appearance='block'][appearance-variant='primary']) {\n            --ni-private-ok-fv-split-button-anchor-background-image: linear-gradient(\n                ${buttonFillPrimaryColor},\n                ${buttonFillPrimaryColor}\n            );\n            --ni-private-ok-fv-split-button-anchor-border: ${buttonFillPrimaryColor};\n            --ni-private-ok-fv-split-button-anchor-color: ${buttonPrimaryFontColor};\n        }\n\n        :host([appearance='block'][appearance-variant='accent']) {\n            --ni-private-ok-fv-split-button-anchor-background-image: linear-gradient(\n                ${buttonFillAccentColor},\n                ${buttonFillAccentColor}\n            );\n            --ni-private-ok-fv-split-button-anchor-border: ${buttonFillAccentColor};\n            --ni-private-ok-fv-split-button-anchor-color: ${buttonAccentBlockFontColor};\n        }\n\n        .split-button-container {\n            position: relative;\n            display: inline-flex;\n            align-items: stretch;\n            height: 100%;\n        }\n\n        .split-button-primary,\n        .split-button-toggle {\n            appearance: none;\n            position: relative;\n            z-index: 0;\n            height: 100%;\n            box-sizing: border-box;\n            margin: 0;\n            border: ${borderWidth} solid var(--ni-private-ok-fv-split-button-anchor-border);\n            background-color: transparent;\n            background-image: var(--ni-private-ok-fv-split-button-anchor-background-image);\n            background-position: center;\n            background-repeat: no-repeat;\n            background-size: var(--ni-private-ok-fv-split-button-anchor-background-size);\n            color: var(--ni-private-ok-fv-split-button-anchor-color);\n            fill: currentcolor;\n            font: ${buttonLabelFont};\n            cursor: pointer;\n            outline: none;\n            transition:\n                box-shadow ${smallDelay} ease-in-out,\n                border-color ${smallDelay} ease-in-out,\n                background-size ${smallDelay} ease-in-out;\n        }\n\n        .split-button-primary {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            padding: 0 ${standardPadding};\n            border-inline-end-color: transparent;\n            white-space: nowrap;\n            text-decoration: none;\n        }\n\n        .split-button-primary::before,\n        .split-button-toggle::before {\n            content: '';\n            position: absolute;\n            inset: 0;\n            pointer-events: none;\n            outline: 0px solid transparent;\n            outline-offset: -3px;\n            transition: outline ${smallDelay} ease-in-out;\n        }\n\n        .split-button-toggle {\n            width: ${controlHeight};\n            min-width: ${controlHeight};\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            border-inline-start-color: var(--ni-private-ok-fv-split-button-anchor-border);\n            margin-inline-start: calc(-1 * ${borderWidth});\n        }\n\n        .split-button-toggle > * {\n            color: currentColor;\n            ${iconColor.cssCustomProperty}: currentColor;\n        }\n\n        .split-button-primary-disabled {\n            cursor: default;\n        }\n\n        :host([appearance='ghost']) .split-button-primary,\n        :host([appearance='ghost']) .split-button-toggle {\n            border-color: transparent;\n            box-shadow: none;\n        }\n\n        slot[name='menu']::slotted(*) {\n            min-width: 100%;\n            margin: 4px 0 0;\n        }\n    }\n\n    @layer hover {\n        .split-button-primary:hover,\n        .split-button-toggle:hover {\n            border-color: ${borderHoverColor};\n            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;\n            background-size: var(--ni-private-ok-fv-split-button-anchor-background-size-emphasis);\n            z-index: 1;\n        }\n\n        :host([appearance='ghost']) .split-button-primary:hover,\n        :host([appearance='ghost']) .split-button-toggle:hover {\n            border-color: ${borderHoverColor};\n            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;\n        }\n    }\n\n    @layer focusVisible {\n        .split-button-primary:focus-visible,\n        .split-button-toggle:focus-visible {\n            border-color: ${borderHoverColor};\n            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;\n            background-size: var(--ni-private-ok-fv-split-button-anchor-background-size-emphasis);\n            z-index: 1;\n        }\n\n        .split-button-primary:focus-visible::before,\n        .split-button-toggle:focus-visible::before {\n            outline: ${borderWidth} solid ${borderHoverColor};\n        }\n\n        :host([appearance='ghost']) .split-button-primary:focus-visible,\n        :host([appearance='ghost']) .split-button-toggle:focus-visible {\n            border-color: ${borderHoverColor};\n            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;\n        }\n    }\n\n    @layer active {\n        .split-button-primary:active,\n        .split-button-toggle:active,\n        :host([open]) .split-button-toggle {\n            border-color: ${borderHoverColor};\n            box-shadow: none;\n            background-image: linear-gradient(${fillSelectedColor}, ${fillSelectedColor});\n            background-size: calc(100% - 2px) calc(100% - 2px);\n        }\n\n        :host([appearance='block']) .split-button-primary:active,\n        :host([appearance='block']) .split-button-toggle:active,\n        :host([appearance='block'][open]) .split-button-toggle {\n            background-size: calc(100% - 4px) calc(100% - 4px);\n        }\n\n        :host([appearance='outline'][appearance-variant='accent']) .split-button-primary:active,\n        :host([appearance='outline'][appearance-variant='accent']) .split-button-toggle:active,\n        :host([appearance='outline'][appearance-variant='accent'][open]) .split-button-toggle {\n            color: ${buttonAccentOutlineFontColor};\n        }\n    }\n\n    @layer disabled {\n        :host([disabled]) {\n            --ni-private-ok-fv-split-button-anchor-color: ${buttonLabelDisabledFontColor};\n        }\n\n        :host([disabled][appearance='outline']) {\n            --ni-private-ok-fv-split-button-anchor-border: rgba(${borderRgbPartialColor}, 0.3);\n        }\n\n        :host([disabled]) .split-button-primary,\n        :host([disabled]) .split-button-toggle {\n            cursor: default;\n            box-shadow: none;\n        }\n\n        :host([disabled][appearance='ghost']) .split-button-primary,\n        :host([disabled][appearance='ghost']) .split-button-toggle {\n            border-color: transparent;\n        }\n    }\n\n    @layer top {}\n`;"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/split-button-anchor/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["export { styles } from '../split-button/styles';\n"]}

package/dist/esm/fv/split-button-anchor/template.js

@@ -1,10 +1,14 @@
 import { html, ref, when } from '@ni/fast-element';
 import { iconArrowExpanderDownTag } from '@ni/nimble-components/dist/esm/icons/arrow-expander-down';
 import { anchoredRegionTag } from '@ni/nimble-components/dist/esm/anchored-region';
+const primaryContent = html `
+    <slot name="start"></slot>
+    <span>${x => x.label}</span>
+    <slot name="end"></slot>
+`;
 export const template = html `
     <div
         class="split-button-container"
-        ${ref('splitButtonContainer')}
     >
         ${when(x => !x.disabled && x.href.length > 0, html `
                 <a
@@ -18,7 +22,7 @@ export const template = html `
     return true;
 }}"
                 >
-                    ${x => x.label}
+                    ${primaryContent}
                 </a>
             `)}
         ${when(x => x.disabled || x.href.length === 0, html `
@@ -26,11 +30,12 @@ export const template = html `
                     class="split-button-primary split-button-primary-disabled"
                     aria-disabled="${x => x.disabled}"
                 >
-                    ${x => x.label}
+                    ${primaryContent}
                 </span>
             `)}
         <button
             class="split-button-toggle"
+            ${ref('toggleButton')}
             type="button"
             ?disabled="${x => x.disabled}"
             aria-label="${x => `More actions for ${x.label}`}"
@@ -50,9 +55,9 @@ export const template = html `
                 auto-update-mode="auto"
                 horizontal-inset
                 horizontal-positioning-mode="dynamic"
+                horizontal-default-position="end"
                 vertical-positioning-mode="locktodefault"
                 vertical-default-position="bottom"
-                horizontal-scaling="anchor"
                 ${ref('region')}
             >
                 <span part="menu">

package/dist/esm/fv/split-button-anchor/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/fv/split-button-anchor/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,wBAAwB,EAAE,MAAM,0DAA0D,CAAC;AACpG,OAAO,EAAE,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AAGnF,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAqB;;;UAGvC,GAAG,CAAC,sBAAsB,CAAC;;UAE3B,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EACrC,IAAI,CAAqB;;;4BAGT,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;8BACT,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,IAAI,SAAS;2BAC7B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,IAAI,SAAS;gCAClB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,IAAI,SAAS;8BAC9B,CAAC,CAAC,EAAE;IACV,CAAC,CAAC,kBAAkB,EAAE,CAAC;IACvB,OAAO,IAAI,CAAC;AAChB,CAAC;;sBAEC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;;aAErB,CACJ;UACC,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,EACtC,IAAI,CAAqB;;;qCAGA,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;sBAE9B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;;aAErB,CACJ;;;;yBAIgB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;0BACd,CAAC,CAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC,KAAK,EAAE;6BAC/B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;;sBAElB,CAAC,CAAC,EAAE;IACV,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACtB,OAAO,IAAI,CAAC;AAChB,CAAC;;eAEE,wBAAwB,MAAM,wBAAwB;;;MAG/D,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EACX,IAAI,CAAqB;eAClB,iBAAiB;;;;;;;;kBAQd,GAAG,CAAC,QAAQ,CAAC;;;;;gBAKf,iBAAiB;SACxB,CACJ;CACJ,CAAC","sourcesContent":["import { html, ref, when } from '@ni/fast-element';\nimport { iconArrowExpanderDownTag } from '@ni/nimble-components/dist/esm/icons/arrow-expander-down';\nimport { anchoredRegionTag } from '@ni/nimble-components/dist/esm/anchored-region';\nimport type { FvSplitButtonAnchor } from '.';\n\nexport const template = html<FvSplitButtonAnchor>`\n    <div\n        class=\"split-button-container\"\n        ${ref('splitButtonContainer')}\n    >\n        ${when(\n            x => !x.disabled && x.href.length > 0,\n            html<FvSplitButtonAnchor>`\n                <a\n                    class=\"split-button-primary\"\n                    href=\"${x => x.href}\"\n                    target=\"${x => x.target || undefined}\"\n                    rel=\"${x => x.rel || undefined}\"\n                    download=\"${x => x.download || undefined}\"\n                    @click=\"${x => {\n                        x.handlePrimaryClick();\n                        return true;\n                    }}\"\n                >\n                    ${x => x.label}\n                </a>\n            `\n        )}\n        ${when(\n            x => x.disabled || x.href.length === 0,\n            html<FvSplitButtonAnchor>`\n                <span\n                    class=\"split-button-primary split-button-primary-disabled\"\n                    aria-disabled=\"${x => x.disabled}\"\n                >\n                    ${x => x.label}\n                </span>\n            `\n        )}\n        <button\n            class=\"split-button-toggle\"\n            type=\"button\"\n            ?disabled=\"${x => x.disabled}\"\n            aria-label=\"${x => `More actions for ${x.label}`}\"\n            aria-expanded=\"${x => x.open}\"\n            aria-haspopup=\"menu\"\n            @click=\"${x => {\n                x.handleToggleClick();\n                return true;\n            }}\"\n        >\n            <${iconArrowExpanderDownTag}></${iconArrowExpanderDownTag}>\n        </button>\n    </div>\n    ${when(\n        x => x.open,\n        html<FvSplitButtonAnchor>`\n            <${anchoredRegionTag}\n                fixed-placement\n                auto-update-mode=\"auto\"\n                horizontal-inset\n                horizontal-positioning-mode=\"dynamic\"\n                vertical-positioning-mode=\"locktodefault\"\n                vertical-default-position=\"bottom\"\n                horizontal-scaling=\"anchor\"\n                ${ref('region')}\n            >\n                <span part=\"menu\">\n                    <slot name=\"menu\"></slot>\n                </span>\n            </${anchoredRegionTag}>\n        `\n    )}\n`;"]}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/fv/split-button-anchor/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,wBAAwB,EAAE,MAAM,0DAA0D,CAAC;AACpG,OAAO,EAAE,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AAGnF,MAAM,cAAc,GAAG,IAAI,CAAqB;;YAEpC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;;CAEvB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAqB;;;;UAIvC,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EACrC,IAAI,CAAqB;;;4BAGT,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;8BACT,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,IAAI,SAAS;2BAC7B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,IAAI,SAAS;gCAClB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,IAAI,SAAS;8BAC9B,CAAC,CAAC,EAAE;IACV,CAAC,CAAC,kBAAkB,EAAE,CAAC;IACvB,OAAO,IAAI,CAAC;AAChB,CAAC;;sBAEC,cAAc;;aAEvB,CACJ;UACC,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,EACtC,IAAI,CAAqB;;;qCAGA,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;sBAE9B,cAAc;;aAEvB,CACJ;;;cAGK,GAAG,CAAC,cAAc,CAAC;;yBAER,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;0BACd,CAAC,CAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC,KAAK,EAAE;6BAC/B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;;sBAElB,CAAC,CAAC,EAAE;IACV,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACtB,OAAO,IAAI,CAAC;AAChB,CAAC;;eAEE,wBAAwB,MAAM,wBAAwB;;;MAG/D,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EACX,IAAI,CAAqB;eAClB,iBAAiB;;;;;;;;kBAQd,GAAG,CAAC,QAAQ,CAAC;;;;;gBAKf,iBAAiB;SACxB,CACJ;CACJ,CAAC","sourcesContent":["import { html, ref, when } from '@ni/fast-element';\nimport { iconArrowExpanderDownTag } from '@ni/nimble-components/dist/esm/icons/arrow-expander-down';\nimport { anchoredRegionTag } from '@ni/nimble-components/dist/esm/anchored-region';\nimport type { FvSplitButtonAnchor } from '.';\n\nconst primaryContent = html<FvSplitButtonAnchor>`\n    <slot name=\"start\"></slot>\n    <span>${x => x.label}</span>\n    <slot name=\"end\"></slot>\n`;\n\nexport const template = html<FvSplitButtonAnchor>`\n    <div\n        class=\"split-button-container\"\n    >\n        ${when(\n            x => !x.disabled && x.href.length > 0,\n            html<FvSplitButtonAnchor>`\n                <a\n                    class=\"split-button-primary\"\n                    href=\"${x => x.href}\"\n                    target=\"${x => x.target || undefined}\"\n                    rel=\"${x => x.rel || undefined}\"\n                    download=\"${x => x.download || undefined}\"\n                    @click=\"${x => {\n                        x.handlePrimaryClick();\n                        return true;\n                    }}\"\n                >\n                    ${primaryContent}\n                </a>\n            `\n        )}\n        ${when(\n            x => x.disabled || x.href.length === 0,\n            html<FvSplitButtonAnchor>`\n                <span\n                    class=\"split-button-primary split-button-primary-disabled\"\n                    aria-disabled=\"${x => x.disabled}\"\n                >\n                    ${primaryContent}\n                </span>\n            `\n        )}\n        <button\n            class=\"split-button-toggle\"\n            ${ref('toggleButton')}\n            type=\"button\"\n            ?disabled=\"${x => x.disabled}\"\n            aria-label=\"${x => `More actions for ${x.label}`}\"\n            aria-expanded=\"${x => x.open}\"\n            aria-haspopup=\"menu\"\n            @click=\"${x => {\n                x.handleToggleClick();\n                return true;\n            }}\"\n        >\n            <${iconArrowExpanderDownTag}></${iconArrowExpanderDownTag}>\n        </button>\n    </div>\n    ${when(\n        x => x.open,\n        html<FvSplitButtonAnchor>`\n            <${anchoredRegionTag}\n                fixed-placement\n                auto-update-mode=\"auto\"\n                horizontal-inset\n                horizontal-positioning-mode=\"dynamic\"\n                horizontal-default-position=\"end\"\n                vertical-positioning-mode=\"locktodefault\"\n                vertical-default-position=\"bottom\"\n                ${ref('region')}\n            >\n                <span part=\"menu\">\n                    <slot name=\"menu\"></slot>\n                </span>\n            </${anchoredRegionTag}>\n        `\n    )}\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