@ni/nimble-components 29.1.0 → 29.1.2

package/dist/esm/rich-text/editor/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/rich-text/editor/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,qBAAqB,EACrB,6BAA6B,EAC7B,SAAS,EACT,QAAQ,EACR,UAAU,EACV,aAAa,EACb,eAAe,EACf,aAAa,EACb,iBAAiB,EACpB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;MACtB,WAAW;;;gBAGD,QAAQ;;iBAEP,aAAa;;;cAGhB,WAAW;;;UAGf;AACE,yFAAyF,CAAC,EAC9F;;;;UAIE;AACE,qHAAqH,CAAC,EAC1H;;;;;;;;;;kBAUU,WAAW,eAAe,qBAAqB;;;;;;;4BAOrC,WAAW;;;;;yBAKd,gBAAgB;;4BAEb,UAAU;;;;+BAIP,gBAAgB;;;;;;;;;;iBAU9B,qBAAqB;kBACpB,WAAW,eAAe,qBAAqB;;;;+BAIlC,SAAS;;;;iCAIP,WAAW;;;;;;;;+BAQb,SAAS;;;;;;;;;;kBAUtB,WAAW;;;;;;;;;;;;;;;;;;UAkBnB;AACE,wFAAwF,CAAC,EAC7F;8BACsB,QAAQ;;;;;;MAMhC;AACE;;;;;GAKG,CAAC,EACR;;;;;;;;;;;;;;;;;MAiBE,CAAA,+DAAgE,EAAE;;;;;;;;;;;;;;;;;;MAkBlE;AACE;;;GAGG,CAAC,EACR;;iBAEa,qBAAqB;;;;;;;;;iBASrB,6BAA6B;;;MAGxC;AACE;;;GAGG,CAAC,EACR;;iBAEa,aAAa;;UAEpB;AACE;;;;;;;;GAQG,CAAC,EACR;;;;;iBAKS,qBAAqB;;;;;MAKhC,CAAA,2BAA4B,EAAE;;MAE9B,CAAA,uDAAwD,EAAE;;iBAE/C,aAAa;;;;iBAIb,qBAAqB;;;;;;;;;;;yBAWb,qBAAqB;;;;;;;;;MASxC,UAAU;;;;;;;;MAQV,UAAU;;;;MAIV,SAAS;MACT,eAAe;kBACH,iBAAiB;;;;;;6BAMN,eAAe;eAC7B,eAAe;;;;gBAId,SAAS;gBACT,eAAe;gBACf,eAAe;gBACf,aAAa;kBACX,iBAAiB;;;;;;;;;;eAUpB,aAAa;;;CAG3B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n    bodyDisabledFontColor,\n    bodyFont,\n    bodyFontColor,\n    borderHoverColor,\n    borderRgbPartialColor,\n    borderWidth,\n    controlLabelFontColor,\n    controlLabelDisabledFontColor,\n    failColor,\n    iconSize,\n    smallDelay,\n    mediumPadding,\n    standardPadding,\n    linkFontColor,\n    controlSlimHeight\n} from '../../theme-provider/design-tokens';\nimport { styles as errorStyles } from '../../patterns/error/styles';\nimport { toolbarTag } from '../../toolbar';\nimport { toggleButtonTag } from '../../toggle-button';\nimport { buttonTag } from '../../button';\nimport { anchorButtonTag } from '../../anchor-button';\nimport { menuButtonTag } from '../../menu-button';\n\nexport const styles = css`\n    ${display('inline-flex')}\n    ${errorStyles}\n\n    :host {\n        font: ${bodyFont};\n        outline: none;\n        color: ${bodyFontColor};\n        flex-direction: column;\n        --ni-private-rich-text-editor-hover-indicator-width: calc(\n            ${borderWidth} + 1px\n        );\n\n        ${\n            /** Initial height of rich text editor with one line space when the footer is visible. */ ''\n        }\n        height: 82px;\n        --ni-private-rich-text-editor-footer-section-height: 40px;\n        --ni-private-rich-text-editor-footer-section-border-top-width: 2px;\n        ${\n            /** Minimum width is added to accommodate all the possible buttons in the toolbar and to support the mobile width. */ ''\n        }\n        min-width: 360px;\n    }\n\n    .container {\n        box-sizing: border-box;\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        height: 100%;\n        border: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.3);\n    }\n\n    .container::after {\n        display: block;\n        content: ' ';\n        position: absolute;\n        bottom: calc(-1 * ${borderWidth});\n        width: 0px;\n        height: 0px;\n        left: 50%;\n        transform: translate(-50%, 50%);\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-rich-text-editor-hover-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    .container:focus-within {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    @media (prefers-reduced-motion) {\n        .container::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host([disabled]) .container {\n        color: ${bodyDisabledFontColor};\n        border: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([error-visible]) .container {\n        border-bottom-color: ${failColor};\n    }\n\n    :host(:hover) .container::after {\n        width: calc(100% + 2 * ${borderWidth});\n    }\n\n    :host([disabled]:hover) .container::after {\n        width: 0px;\n    }\n\n    :host([error-visible]) .container::after {\n        border-bottom-color: ${failColor};\n    }\n\n    .editor-container {\n        display: contents;\n    }\n\n    .editor {\n        display: flex;\n        flex-direction: column;\n        border: ${borderWidth} solid transparent;\n        border-radius: 0px;\n        flex: 1;\n        overflow: hidden;\n    }\n\n    :host([footer-hidden]) .editor {\n        height: 100%;\n    }\n\n    .ProseMirror {\n        overflow: auto;\n        height: 100%;\n        border: 0px;\n        border-radius: 0px;\n        background-color: transparent;\n        font: inherit;\n        padding: 8px;\n        ${\n            /* This padding ensures that showing/hiding the error icon doesn't affect text layout */ ''\n        }\n        padding-right: calc(${iconSize});\n        box-sizing: border-box;\n        position: relative;\n        color: inherit;\n    }\n\n    ${\n        /**\n         * Below are the styles from prosemirror-view as the Prose mirror expects the \"white-space\" to be set. The recommendation is to load the style from the below package.\n         * However, the other classes used in the below file like \".ProseMirror-selectednode\", \".ProseMirror-hideselection\" were not used anywhere in the \".Prosemirror\" content editable div in the DOM. So added only the necessary styles below.\n         *\n         * https://github.com/ProseMirror/prosemirror-view/blob/db2223a88b540a8f381fc2720198342e29a60566/style/prosemirror.css#L5C1-L12C2\n         */ ''\n    }\n    .ProseMirror {\n        word-wrap: break-word;\n        white-space: pre-wrap;\n        -webkit-font-variant-ligatures: none;\n        font-variant-ligatures: none;\n        font-feature-settings: 'liga' 0;\n    }\n\n    .ProseMirror pre {\n        white-space: pre-wrap;\n    }\n\n    .ProseMirror li {\n        position: relative;\n    }\n\n    ${/** End of Prose Mirror defined styles from prosemirror-view */ ''}\n\n    .ProseMirror-focused {\n        outline: none;\n    }\n\n    .ProseMirror > :first-child {\n        margin-block-start: 0;\n    }\n\n    .ProseMirror > :last-child {\n        margin-block-end: 0;\n    }\n\n    .ProseMirror li > p {\n        margin-block: 0;\n    }\n\n    ${\n        /**\n         * Styles provided by Tiptap are necessary to display the placeholder value when the editor is empty.\n         * Tiptap doc reference: https://tiptap.dev/api/extensions/placeholder#additional-setup\n         */ ''\n    }\n    .ProseMirror p.is-editor-empty:first-child::before {\n        color: ${controlLabelFontColor};\n        content: attr(data-placeholder);\n        float: left;\n        height: 0;\n        pointer-events: none;\n        word-break: break-word;\n    }\n\n    :host([disabled]) .ProseMirror p.is-editor-empty:first-child::before {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    ${\n        /**\n         * Custom anchor stylings can be removed once leveraging 'nimble-anchor' is supported.\n         * See: https://github.com/ni/nimble/issues/1516\n         */ ''\n    }\n    .ProseMirror a {\n        color: ${linkFontColor};\n        white-space: normal;\n        ${\n            /**\n             * Setting 'pointer-events: none;' to restrict the user from opening a link using the right-click context menu: If the user manually edits\n             * the link's text content, the 'href' attribute of the anchor tag will not be updated. If they attempt to open it using\n             * the right-click context menu with 'Open in new tab/window,' it will still navigate to the link specified\n             * in the 'href' attribute, which may create unnecessary confusion while trying to open the link.\n             *\n             * Using pointer-events: none to disable link interactions can be removed when hyperlink support is added.\n             * see: https://github.com/ni/nimble/issues/1527\n             */ ''\n        }\n        pointer-events: none;\n    }\n\n    :host([disabled]) .ProseMirror a {\n        color: ${bodyDisabledFontColor};\n        fill: currentcolor;\n        cursor: default;\n    }\n\n    ${/** End of anchor styles */ ''}\n\n    ${/* Shared styles for all mention views at edit time. */ ''}\n    .ProseMirror .nimble-mention-view-edit {\n        color: ${bodyFontColor};\n    }\n\n    :host([disabled]) .ProseMirror .nimble-mention-view-edit {\n        color: ${bodyDisabledFontColor};\n    }\n\n    .footer-section {\n        display: flex;\n        justify-content: space-between;\n        flex-shrink: 0;\n        border: 0px;\n        border-top: var(\n                --ni-private-rich-text-editor-footer-section-border-top-width\n            )\n            solid rgba(${borderRgbPartialColor}, 0.1);\n        height: var(--ni-private-rich-text-editor-footer-section-height);\n        overflow: hidden;\n    }\n\n    :host([footer-hidden]) .footer-section {\n        display: none;\n    }\n\n    ${toolbarTag}::part(positioning-region) {\n        background: transparent;\n        padding-right: 8px;\n        box-sizing: border-box;\n        gap: 0px;\n        height: var(--ni-private-rich-text-editor-footer-section-height);\n    }\n\n    ${toolbarTag}::part(start) {\n        gap: 8px;\n    }\n\n    ${buttonTag},\n    ${toggleButtonTag} {\n        height: ${controlSlimHeight};\n    }\n\n    .footer-actions {\n        display: flex;\n        justify-content: flex-end;\n        margin-inline-end: ${standardPadding};\n        gap: ${standardPadding};\n        place-items: center;\n    }\n\n    ::slotted(${buttonTag}),\n    ::slotted(${toggleButtonTag}),\n    ::slotted(${anchorButtonTag}),\n    ::slotted(${menuButtonTag}) {\n        height: ${controlSlimHeight};\n    }\n\n    :host([error-visible]) .error-icon {\n        display: none;\n    }\n\n    :host([error-visible]) .error-icon.scrollbar-width-calculated {\n        display: inline-flex;\n        position: absolute;\n        top: ${mediumPadding};\n        right: var(--ni-private-rich-text-editor-scrollbar-width);\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/rich-text/editor/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EACH,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,qBAAqB,EACrB,6BAA6B,EAC7B,SAAS,EACT,QAAQ,EACR,UAAU,EACV,aAAa,EACb,eAAe,EACf,aAAa,EACb,iBAAiB,EACpB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;MACtB,WAAW;;;gBAGD,QAAQ;;iBAEP,aAAa;;;cAGhB,WAAW;;;UAGf;AACE,yFAAyF,CAAC,EAC9F;;;;UAIE;AACE,qHAAqH,CAAC,EAC1H;;;;;;;;;;kBAUU,WAAW,eAAe,qBAAqB;;;;;;;4BAOrC,WAAW;;;;;yBAKd,gBAAgB;;4BAEb,UAAU;;;;+BAIP,gBAAgB;;;;;;;;;;iBAU9B,qBAAqB;kBACpB,WAAW,eAAe,qBAAqB;;;;+BAIlC,SAAS;;;;iCAIP,WAAW;;;;;;;;+BAQb,SAAS;;;;;;;;;;kBAUtB,WAAW;;;;;;;;;;;;;;;;;;UAkBnB;AACE,wFAAwF,CAAC,EAC7F;8BACsB,QAAQ;;;;;;MAMhC;AACE;;;;;GAKG,CAAC,EACR;;;;;;;;;;;;;;;;;MAiBE,CAAA,+DAAgE,EAAE;;;;;;;;;;;;;;;;;;MAkBlE;AACE;;;GAGG,CAAC,EACR;;iBAEa,qBAAqB;;;;;;;;;iBASrB,6BAA6B;;;MAGxC;AACE;;;GAGG,CAAC,EACR;;iBAEa,aAAa;;UAEpB;AACE;;;;;;;;GAQG,CAAC,EACR;;;;;iBAKS,qBAAqB;;;;;MAKhC,CAAA,2BAA4B,EAAE;;MAE9B,CAAA,uDAAwD,EAAE;;iBAE/C,aAAa;;;;iBAIb,qBAAqB;;;;;;;;;;;yBAWb,qBAAqB;;;;;;;;;MASxC,UAAU;;;;;;;;MAQV,UAAU;;;;MAIV,SAAS;MACT,eAAe;kBACH,iBAAiB;;;;;;6BAMN,eAAe;eAC7B,eAAe;;;;gBAId,SAAS;gBACT,eAAe;gBACf,eAAe;gBACf,aAAa;kBACX,iBAAiB;;;;;;;;;;eAUpB,aAAa;;;CAG3B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../utilities/style/display';\nimport {\n    bodyDisabledFontColor,\n    bodyFont,\n    bodyFontColor,\n    borderHoverColor,\n    borderRgbPartialColor,\n    borderWidth,\n    controlLabelFontColor,\n    controlLabelDisabledFontColor,\n    failColor,\n    iconSize,\n    smallDelay,\n    mediumPadding,\n    standardPadding,\n    linkFontColor,\n    controlSlimHeight\n} from '../../theme-provider/design-tokens';\nimport { styles as errorStyles } from '../../patterns/error/styles';\nimport { toolbarTag } from '../../toolbar';\nimport { toggleButtonTag } from '../../toggle-button';\nimport { buttonTag } from '../../button';\nimport { anchorButtonTag } from '../../anchor-button';\nimport { menuButtonTag } from '../../menu-button';\n\nexport const styles = css`\n    ${display('inline-flex')}\n    ${errorStyles}\n\n    :host {\n        font: ${bodyFont};\n        outline: none;\n        color: ${bodyFontColor};\n        flex-direction: column;\n        --ni-private-rich-text-editor-hover-indicator-width: calc(\n            ${borderWidth} + 1px\n        );\n\n        ${\n            /** Initial height of rich text editor with one line space when the footer is visible. */ ''\n        }\n        height: 82px;\n        --ni-private-rich-text-editor-footer-section-height: 40px;\n        --ni-private-rich-text-editor-footer-section-border-top-width: 2px;\n        ${\n            /** Minimum width is added to accommodate all the possible buttons in the toolbar and to support the mobile width. */ ''\n        }\n        min-width: 360px;\n    }\n\n    .container {\n        box-sizing: border-box;\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        height: 100%;\n        border: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.3);\n    }\n\n    .container::after {\n        display: block;\n        content: ' ';\n        position: absolute;\n        bottom: calc(-1 * ${borderWidth});\n        width: 0px;\n        height: 0px;\n        left: 50%;\n        transform: translate(-50%, 50%);\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-rich-text-editor-hover-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    .container:focus-within {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    @media (prefers-reduced-motion) {\n        .container::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host([disabled]) .container {\n        color: ${bodyDisabledFontColor};\n        border: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([error-visible]) .container {\n        border-bottom-color: ${failColor};\n    }\n\n    :host(:hover) .container::after {\n        width: calc(100% + 2 * ${borderWidth});\n    }\n\n    :host([disabled]:hover) .container::after {\n        width: 0px;\n    }\n\n    :host([error-visible]) .container::after {\n        border-bottom-color: ${failColor};\n    }\n\n    .editor-container {\n        display: contents;\n    }\n\n    .editor {\n        display: flex;\n        flex-direction: column;\n        border: ${borderWidth} solid transparent;\n        border-radius: 0px;\n        flex: 1;\n        overflow: hidden;\n    }\n\n    :host([footer-hidden]) .editor {\n        height: 100%;\n    }\n\n    .ProseMirror {\n        overflow: auto;\n        height: 100%;\n        border: 0px;\n        border-radius: 0px;\n        background-color: transparent;\n        font: inherit;\n        padding: 8px;\n        ${\n            /* This padding ensures that showing/hiding the error icon doesn't affect text layout */ ''\n        }\n        padding-right: calc(${iconSize});\n        box-sizing: border-box;\n        position: relative;\n        color: inherit;\n    }\n\n    ${\n        /**\n         * Below are the styles from prosemirror-view as the Prose mirror expects the \"white-space\" to be set. The recommendation is to load the style from the below package.\n         * However, the other classes used in the below file like \".ProseMirror-selectednode\", \".ProseMirror-hideselection\" were not used anywhere in the \".Prosemirror\" content editable div in the DOM. So added only the necessary styles below.\n         *\n         * https://github.com/ProseMirror/prosemirror-view/blob/db2223a88b540a8f381fc2720198342e29a60566/style/prosemirror.css#L5C1-L12C2\n         */ ''\n    }\n    .ProseMirror {\n        word-wrap: break-word;\n        white-space: pre-wrap;\n        -webkit-font-variant-ligatures: none;\n        font-variant-ligatures: none;\n        font-feature-settings: 'liga' 0;\n    }\n\n    .ProseMirror pre {\n        white-space: pre-wrap;\n    }\n\n    .ProseMirror li {\n        position: relative;\n    }\n\n    ${/** End of Prose Mirror defined styles from prosemirror-view */ ''}\n\n    .ProseMirror-focused {\n        outline: none;\n    }\n\n    .ProseMirror > :first-child {\n        margin-block-start: 0;\n    }\n\n    .ProseMirror > :last-child {\n        margin-block-end: 0;\n    }\n\n    .ProseMirror li > p {\n        margin-block: 0;\n    }\n\n    ${\n        /**\n         * Styles provided by Tiptap are necessary to display the placeholder value when the editor is empty.\n         * Tiptap doc reference: https://tiptap.dev/api/extensions/placeholder#additional-setup\n         */ ''\n    }\n    .ProseMirror p.is-editor-empty:first-child::before {\n        color: ${controlLabelFontColor};\n        content: attr(data-placeholder);\n        float: left;\n        height: 0;\n        pointer-events: none;\n        word-break: break-word;\n    }\n\n    :host([disabled]) .ProseMirror p.is-editor-empty:first-child::before {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    ${\n        /**\n         * Custom anchor stylings can be removed once leveraging 'nimble-anchor' is supported.\n         * See: https://github.com/ni/nimble/issues/1516\n         */ ''\n    }\n    .ProseMirror a {\n        color: ${linkFontColor};\n        white-space: normal;\n        ${\n            /**\n             * Setting 'pointer-events: none;' to restrict the user from opening a link using the right-click context menu: If the user manually edits\n             * the link's text content, the 'href' attribute of the anchor tag will not be updated. If they attempt to open it using\n             * the right-click context menu with 'Open in new tab/window,' it will still navigate to the link specified\n             * in the 'href' attribute, which may create unnecessary confusion while trying to open the link.\n             *\n             * Using pointer-events: none to disable link interactions can be removed when hyperlink support is added.\n             * see: https://github.com/ni/nimble/issues/1527\n             */ ''\n        }\n        pointer-events: none;\n    }\n\n    :host([disabled]) .ProseMirror a {\n        color: ${bodyDisabledFontColor};\n        fill: currentcolor;\n        cursor: default;\n    }\n\n    ${/** End of anchor styles */ ''}\n\n    ${/* Shared styles for all mention views at edit time. */ ''}\n    .ProseMirror .nimble-mention-view-edit {\n        color: ${bodyFontColor};\n    }\n\n    :host([disabled]) .ProseMirror .nimble-mention-view-edit {\n        color: ${bodyDisabledFontColor};\n    }\n\n    .footer-section {\n        display: flex;\n        justify-content: space-between;\n        flex-shrink: 0;\n        border: 0px;\n        border-top: var(\n                --ni-private-rich-text-editor-footer-section-border-top-width\n            )\n            solid rgba(${borderRgbPartialColor}, 0.1);\n        height: var(--ni-private-rich-text-editor-footer-section-height);\n        overflow: hidden;\n    }\n\n    :host([footer-hidden]) .footer-section {\n        display: none;\n    }\n\n    ${toolbarTag}::part(positioning-region) {\n        background: transparent;\n        padding-right: 8px;\n        box-sizing: border-box;\n        gap: 0px;\n        height: var(--ni-private-rich-text-editor-footer-section-height);\n    }\n\n    ${toolbarTag}::part(start) {\n        gap: 8px;\n    }\n\n    ${buttonTag},\n    ${toggleButtonTag} {\n        height: ${controlSlimHeight};\n    }\n\n    .footer-actions {\n        display: flex;\n        justify-content: flex-end;\n        margin-inline-end: ${standardPadding};\n        gap: ${standardPadding};\n        place-items: center;\n    }\n\n    ::slotted(${buttonTag}),\n    ::slotted(${toggleButtonTag}),\n    ::slotted(${anchorButtonTag}),\n    ::slotted(${menuButtonTag}) {\n        height: ${controlSlimHeight};\n    }\n\n    :host([error-visible]) .error-icon {\n        display: none;\n    }\n\n    :host([error-visible]) .error-icon.scrollbar-width-calculated {\n        display: inline-flex;\n        position: absolute;\n        top: ${mediumPadding};\n        right: var(--ni-private-rich-text-editor-scrollbar-width);\n    }\n`;\n"]}

package/dist/esm/rich-text/viewer/styles.js

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../../utilities/style/display';
 import { bodyFont, bodyFontColor, linkFontColor } from '../../theme-provider/design-tokens';
 export const styles = css `
     ${display('flex')}

package/dist/esm/rich-text/viewer/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/rich-text/viewer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,QAAQ,EACR,aAAa,EACb,aAAa,EAChB,MAAM,oCAAoC,CAAC;AAE5C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;gBAGL,QAAQ;;iBAEP,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;MA2BxB;AACE,gLAAgL,CAAC,EACrL;;;;;MAKE;AACE;;;;;;;;;;GAUG,CAAC,EACR;;iBAEa,aAAa;;CAE7B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n    bodyFont,\n    bodyFontColor,\n    linkFontColor\n} from '../../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        font: ${bodyFont};\n        outline: none;\n        color: ${bodyFontColor};\n        width: auto;\n        overflow: auto;\n        height: 100%;\n    }\n\n    .viewer {\n        font: inherit;\n        outline: none;\n        box-sizing: border-box;\n        position: relative;\n        color: inherit;\n        overflow-wrap: anywhere;\n    }\n\n    .viewer > :first-child {\n        margin-block-start: 0;\n    }\n\n    .viewer > :last-child {\n        margin-block-end: 0;\n    }\n\n    li > p {\n        margin-block: 0;\n    }\n\n    ${\n        /* In Firefox, if the paragraph within the list is empty, the ordered lists overlap. Therefore, hiding the paragraph element allows for the proper rendering of empty lists.  */ ''\n    }\n    li > p:empty {\n        display: none;\n    }\n\n    ${\n        /**\n         * In the rich-text editor, an absolute link renders as a native anchor, not a `nimble-anchor`. When such a link\n         * is not HTTPS/HTTP, the anchor renders without an `href`, appearing as plain text.\n         * However, in the rich-text viewer, absolute links are rendered as `nimble-anchor`s, and they do not look like\n         * plain text when the `href` attribute is absent. They have a \"disabled\" color and may have an underline.\n         * To ensure a consistent appearance between the editor and viewer, we force the font color to the default link/\n         * plain text color regardless of the `href` attribute's presence. To remove the underline, the markdown parser\n         * emits an `underline-hidden` attribute when the `href` attribute is absent.\n         *\n         * See models/markdown-parser.ts where link elements are emitted for more info.\n         */ ''\n    }\n    nimble-anchor::part(control) {\n        color: ${linkFontColor};\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/rich-text/viewer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EACH,QAAQ,EACR,aAAa,EACb,aAAa,EAChB,MAAM,oCAAoC,CAAC;AAE5C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;gBAGL,QAAQ;;iBAEP,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;MA2BxB;AACE,gLAAgL,CAAC,EACrL;;;;;MAKE;AACE;;;;;;;;;;GAUG,CAAC,EACR;;iBAEa,aAAa;;CAE7B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../utilities/style/display';\nimport {\n    bodyFont,\n    bodyFontColor,\n    linkFontColor\n} from '../../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        font: ${bodyFont};\n        outline: none;\n        color: ${bodyFontColor};\n        width: auto;\n        overflow: auto;\n        height: 100%;\n    }\n\n    .viewer {\n        font: inherit;\n        outline: none;\n        box-sizing: border-box;\n        position: relative;\n        color: inherit;\n        overflow-wrap: anywhere;\n    }\n\n    .viewer > :first-child {\n        margin-block-start: 0;\n    }\n\n    .viewer > :last-child {\n        margin-block-end: 0;\n    }\n\n    li > p {\n        margin-block: 0;\n    }\n\n    ${\n        /* In Firefox, if the paragraph within the list is empty, the ordered lists overlap. Therefore, hiding the paragraph element allows for the proper rendering of empty lists.  */ ''\n    }\n    li > p:empty {\n        display: none;\n    }\n\n    ${\n        /**\n         * In the rich-text editor, an absolute link renders as a native anchor, not a `nimble-anchor`. When such a link\n         * is not HTTPS/HTTP, the anchor renders without an `href`, appearing as plain text.\n         * However, in the rich-text viewer, absolute links are rendered as `nimble-anchor`s, and they do not look like\n         * plain text when the `href` attribute is absent. They have a \"disabled\" color and may have an underline.\n         * To ensure a consistent appearance between the editor and viewer, we force the font color to the default link/\n         * plain text color regardless of the `href` attribute's presence. To remove the underline, the markdown parser\n         * emits an `underline-hidden` attribute when the `href` attribute is absent.\n         *\n         * See models/markdown-parser.ts where link elements are emitted for more info.\n         */ ''\n    }\n    nimble-anchor::part(control) {\n        color: ${linkFontColor};\n    }\n`;\n"]}

package/dist/esm/rich-text-mention/base/styles.d.ts

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

package/dist/esm/rich-text-mention/base/styles.js

@@ -0,0 +1,6 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '../../utilities/style/display';
+export const styles = css `
+    ${display('none')}
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/rich-text-mention/base/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/rich-text-mention/base/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;CACpB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n    ${display('none')}\n`;\n"]}

package/dist/esm/rich-text-mention/users/index.js

@@ -6,6 +6,7 @@ import { iconAtTag } from '../../icons/at';
 import { MappingUser } from '../../mapping/user';
 import { RichTextMentionUsersValidator } from './models/rich-text-mention-users-validator';
 import { richTextMentionUsersViewTag } from './view';
+import { styles } from '../base/styles';
 /**
  * Rich Text user mention configuration element which will have MappingMentionUser elements as children
  */
@@ -32,7 +33,8 @@ export class RichTextMentionUsers extends RichTextMention {
 }
 const nimbleRichTextMentionUsers = RichTextMentionUsers.compose({
     baseName: 'rich-text-mention-users',
-    template
+    template,
+    styles
 });
 DesignSystem.getOrCreate()
     .withPrefix('nimble')

package/dist/esm/rich-text-mention/users/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/rich-text-mention/users/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAGjD,OAAO,EAAE,6BAA6B,EAAE,MAAM,4CAA4C,CAAC;AAC3F,OAAO,EAAE,2BAA2B,EAAE,MAAM,QAAQ,CAAC;AAQrD;;GAEG;AACH,MAAM,OAAO,oBAAqB,SAAQ,eAA8C;IACjE,0BAA0B;QACzC,OAAO;YACH,IAAI,EAAE,SAAS;YACf,SAAS,EAAE,GAAG;YACd,WAAW,EAAE,2BAA2B;YACxC,SAAS,EAAE,IAAI,6BAA6B,EAAE;SACjD,CAAC;IACN,CAAC;IAEkB,0BAA0B;QACzC,OAAO,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IAClC,CAAC;IAES,mBAAmB,CACzB,OAAgC;QAEhC,IAAI,OAAO,YAAY,WAAW,EAAE;YAChC,OAAO,IAAI,iBAAiB,CAAC,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;SAClE;QACD,+EAA+E;QAC/E,mEAAmE;QACnE,MAAM,IAAI,KAAK,CAAC,qBAAqB,CAAC,CAAC;IAC3C,CAAC;CACJ;AACD,MAAM,0BAA0B,GAAG,oBAAoB,CAAC,OAAO,CAAC;IAC5D,QAAQ,EAAE,yBAAyB;IACnC,QAAQ;CACX,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,0BAA0B,EAAE,CAAC,CAAC;AAC5C,MAAM,CAAC,MAAM,uBAAuB,GAAG,gCAAgC,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport type { MentionInternalsOptions } from '../base/models/mention-internals';\nimport { RichTextMention } from '../base';\nimport type { MappingConfig } from '../base/models/mapping-config';\nimport { MappingUserConfig } from './models/mapping-user-config';\nimport { template } from '../base/template';\nimport { iconAtTag } from '../../icons/at';\nimport { MappingUser } from '../../mapping/user';\nimport type { Mapping } from '../../mapping/base';\nimport type { MappingUserKey } from '../../mapping/base/types';\nimport { RichTextMentionUsersValidator } from './models/rich-text-mention-users-validator';\nimport { richTextMentionUsersViewTag } from './view';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-rich-text-mention-users': RichTextMentionUsers;\n    }\n}\n\n/**\n * Rich Text user mention configuration element which will have MappingMentionUser elements as children\n */\nexport class RichTextMentionUsers extends RichTextMention<RichTextMentionUsersValidator> {\n    protected override getMentionInternalsOptions(): MentionInternalsOptions<RichTextMentionUsersValidator> {\n        return {\n            icon: iconAtTag,\n            character: '@',\n            viewElement: richTextMentionUsersViewTag,\n            validator: new RichTextMentionUsersValidator()\n        };\n    }\n\n    protected override getObservedMappingProperty(): string[] {\n        return ['key', 'displayName'];\n    }\n\n    protected createMappingConfig(\n        mapping: Mapping<MappingUserKey>\n    ): MappingConfig {\n        if (mapping instanceof MappingUser) {\n            return new MappingUserConfig(mapping.key, mapping.displayName);\n        }\n        // Getting here would indicate a programming error, b/c validation will prevent\n        // this function from running when there is an unsupported mapping.\n        throw new Error('Unsupported mapping');\n    }\n}\nconst nimbleRichTextMentionUsers = RichTextMentionUsers.compose({\n    baseName: 'rich-text-mention-users',\n    template\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(nimbleRichTextMentionUsers());\nexport const richTextMentionUsersTag = 'nimble-rich-text-mention-users';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/rich-text-mention/users/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAGjD,OAAO,EAAE,6BAA6B,EAAE,MAAM,4CAA4C,CAAC;AAC3F,OAAO,EAAE,2BAA2B,EAAE,MAAM,QAAQ,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAQxC;;GAEG;AACH,MAAM,OAAO,oBAAqB,SAAQ,eAA8C;IACjE,0BAA0B;QACzC,OAAO;YACH,IAAI,EAAE,SAAS;YACf,SAAS,EAAE,GAAG;YACd,WAAW,EAAE,2BAA2B;YACxC,SAAS,EAAE,IAAI,6BAA6B,EAAE;SACjD,CAAC;IACN,CAAC;IAEkB,0BAA0B;QACzC,OAAO,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IAClC,CAAC;IAES,mBAAmB,CACzB,OAAgC;QAEhC,IAAI,OAAO,YAAY,WAAW,EAAE;YAChC,OAAO,IAAI,iBAAiB,CAAC,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;SAClE;QACD,+EAA+E;QAC/E,mEAAmE;QACnE,MAAM,IAAI,KAAK,CAAC,qBAAqB,CAAC,CAAC;IAC3C,CAAC;CACJ;AACD,MAAM,0BAA0B,GAAG,oBAAoB,CAAC,OAAO,CAAC;IAC5D,QAAQ,EAAE,yBAAyB;IACnC,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,0BAA0B,EAAE,CAAC,CAAC;AAC5C,MAAM,CAAC,MAAM,uBAAuB,GAAG,gCAAgC,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport type { MentionInternalsOptions } from '../base/models/mention-internals';\nimport { RichTextMention } from '../base';\nimport type { MappingConfig } from '../base/models/mapping-config';\nimport { MappingUserConfig } from './models/mapping-user-config';\nimport { template } from '../base/template';\nimport { iconAtTag } from '../../icons/at';\nimport { MappingUser } from '../../mapping/user';\nimport type { Mapping } from '../../mapping/base';\nimport type { MappingUserKey } from '../../mapping/base/types';\nimport { RichTextMentionUsersValidator } from './models/rich-text-mention-users-validator';\nimport { richTextMentionUsersViewTag } from './view';\nimport { styles } from '../base/styles';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-rich-text-mention-users': RichTextMentionUsers;\n    }\n}\n\n/**\n * Rich Text user mention configuration element which will have MappingMentionUser elements as children\n */\nexport class RichTextMentionUsers extends RichTextMention<RichTextMentionUsersValidator> {\n    protected override getMentionInternalsOptions(): MentionInternalsOptions<RichTextMentionUsersValidator> {\n        return {\n            icon: iconAtTag,\n            character: '@',\n            viewElement: richTextMentionUsersViewTag,\n            validator: new RichTextMentionUsersValidator()\n        };\n    }\n\n    protected override getObservedMappingProperty(): string[] {\n        return ['key', 'displayName'];\n    }\n\n    protected createMappingConfig(\n        mapping: Mapping<MappingUserKey>\n    ): MappingConfig {\n        if (mapping instanceof MappingUser) {\n            return new MappingUserConfig(mapping.key, mapping.displayName);\n        }\n        // Getting here would indicate a programming error, b/c validation will prevent\n        // this function from running when there is an unsupported mapping.\n        throw new Error('Unsupported mapping');\n    }\n}\nconst nimbleRichTextMentionUsers = RichTextMentionUsers.compose({\n    baseName: 'rich-text-mention-users',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(nimbleRichTextMentionUsers());\nexport const richTextMentionUsersTag = 'nimble-rich-text-mention-users';\n"]}

package/dist/esm/rich-text-mention/users/view/styles.js

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../../../utilities/style/display';
 import { mentionFont, mentionFontColor, mentionDisabledFontColor } from '../../../theme-provider/design-tokens';
 export const styles = css `
     ${display('inline-block')}

package/dist/esm/rich-text-mention/users/view/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/rich-text-mention/users/view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,WAAW,EACX,gBAAgB,EAChB,wBAAwB,EAC3B,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;;gBAIb,WAAW;;;;iBAIV,gBAAgB;;;;iBAIhB,wBAAwB;;CAExC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n    mentionFont,\n    mentionFontColor,\n    mentionDisabledFontColor\n} from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('inline-block')}\n\n    :host {\n        box-sizing: border-box;\n        font: ${mentionFont};\n    }\n\n    .control {\n        color: ${mentionFontColor};\n    }\n\n    :host([disabled]) .control {\n        color: ${mentionDisabledFontColor};\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/rich-text-mention/users/view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EACH,WAAW,EACX,gBAAgB,EAChB,wBAAwB,EAC3B,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;;gBAIb,WAAW;;;;iBAIV,gBAAgB;;;;iBAIhB,wBAAwB;;CAExC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../../utilities/style/display';\nimport {\n    mentionFont,\n    mentionFontColor,\n    mentionDisabledFontColor\n} from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('inline-block')}\n\n    :host {\n        box-sizing: border-box;\n        font: ${mentionFont};\n    }\n\n    .control {\n        color: ${mentionFontColor};\n    }\n\n    :host([disabled]) .control {\n        color: ${mentionDisabledFontColor};\n    }\n`;\n"]}

package/dist/esm/select/styles.js

@@ -2,7 +2,7 @@ import { css } from '@microsoft/fast-element';
 import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
 import { styles as dropdownStyles } from '../patterns/dropdown/styles';
 import { styles as errorStyles } from '../patterns/error/styles';
-import { borderRgbPartialColor, borderWidth, controlHeight, fillHoverColor, fillHoverSelectedColor, fillSelectedColor, mediumPadding, placeholderFontColor, smallPadding } from '../theme-provider/design-tokens';
+import { borderRgbPartialColor, borderWidth, controlHeight, controlSlimHeight, fillHoverColor, fillHoverSelectedColor, fillSelectedColor, mediumPadding, placeholderFontColor, smallPadding } from '../theme-provider/design-tokens';
 import { appearanceBehavior } from '../utilities/style/appearance';
 import { DropdownAppearance } from './types';
 import { focusVisible } from '../utilities/style/focus';
@@ -27,8 +27,7 @@ export const styles = css `
 
     .clear-button {
         order: 3;
-        width: auto;
-        height: auto;
+        height: ${controlSlimHeight};
         margin-left: ${smallPadding};
     }
 

package/dist/esm/select/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EACH,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,cAAc,EACd,sBAAsB,EACtB,iBAAiB,EACjB,aAAa,EACb,oBAAoB,EACpB,YAAY,EACf,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,cAAc;MACd,WAAW;;MAEX;AACE;gGACgG,CAAC,EACrG;;;iBAGa,oBAAoB;;;;;;;;;;;uBAWd,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA+BjB,aAAa;;;;;;;;8BAQD,qBAAqB;uBAC5B,aAAa,MAAM,YAAY,MAAM,WAAW;;;;kCAIrC,WAAW;;;;;;;8BAOf,qBAAqB;oBAC/B,aAAa,MAAM,YAAY,MAAM,WAAW;;;;kCAIlC,WAAW;;;;wBAIrB,YAAY;;;;;;;;;qBASf,YAAY,MAAM,aAAa;;;;;iBAKnC,oBAAoB;;;mBAGlB,YAAY;;;;;;;;;;;;;4BAaH,cAAc;;;;4BAId,iBAAiB;;;;4BAIjB,sBAAsB;;;;iBAIjC,oBAAoB;kBACnB,aAAa;;;mBAGZ,YAAY,IAAI,aAAa;;CAE/C,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;8BAGmB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEnD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { styles as dropdownStyles } from '../patterns/dropdown/styles';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport {\n    borderRgbPartialColor,\n    borderWidth,\n    controlHeight,\n    fillHoverColor,\n    fillHoverSelectedColor,\n    fillSelectedColor,\n    mediumPadding,\n    placeholderFontColor,\n    smallPadding\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { DropdownAppearance } from './types';\nimport { focusVisible } from '../utilities/style/focus';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\n\nexport const styles = css`\n    ${dropdownStyles}\n    ${errorStyles}\n\n    ${\n        /* We are using flex `order` to define the visual ordering of the selected value,\n         error icon, and dropdown arrow because they are not \"interactive\" i.e. part of the tab order */ ''\n    }\n\n    .selected-value.placeholder {\n        color: ${placeholderFontColor};\n    }\n\n    .selected-value {\n        order: 1;\n    }\n\n    .clear-button {\n        order: 3;\n        width: auto;\n        height: auto;\n        margin-left: ${smallPadding};\n    }\n\n    [part='indicator'] {\n        order: 4;\n    }\n\n    .error-icon {\n        order: 2;\n    }\n\n    [part='end'] {\n        display: contents;\n    }\n\n    .listbox {\n        overflow-x: clip;\n    }\n\n    .listbox.empty slot {\n        display: none;\n    }\n\n    .listbox.above {\n        flex-flow: column-reverse;\n    }\n\n    .filter-field {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        height: ${controlHeight};\n        background: transparent;\n    }\n\n    .filter-field::before {\n        content: '';\n        position: absolute;\n        height: 0px;\n        border-bottom: rgba(${borderRgbPartialColor}, 0.1) 2px solid;\n        bottom: calc(${controlHeight} + ${smallPadding} - ${borderWidth});\n    }\n\n    .filter-field.above::before {\n        width: calc(100% - (2 * ${borderWidth}));\n    }\n\n    .filter-field::after {\n        content: '';\n        position: absolute;\n        height: 0px;\n        border-bottom: rgba(${borderRgbPartialColor}, 0.1) 2px solid;\n        top: calc(${controlHeight} + ${smallPadding} - ${borderWidth});\n    }\n\n    .filter-field:not(.above)::after {\n        width: calc(100% - (2 * ${borderWidth}));\n    }\n\n    .filter-icon {\n        padding-left: ${smallPadding};\n    }\n\n    .filter-input {\n        background: transparent;\n        border: none;\n        color: inherit;\n        font: inherit;\n        height: var(--ni-nimble-control-height);\n        padding: 0 ${smallPadding} 0 ${mediumPadding};\n        width: 100%;\n    }\n\n    .filter-input::placeholder {\n        color: ${placeholderFontColor};\n    }\n\n    .filter-input${focusVisible} {\n        outline: 0px;\n    }\n\n    .scrollable-region {\n        overflow: auto;\n    }\n\n    ::slotted([role='option']) {\n        background-color: transparent;\n    }\n\n    ::slotted([role='option']:hover) {\n        background-color: ${fillHoverColor};\n    }\n\n    ::slotted([role='option'][active-option]) {\n        background-color: ${fillSelectedColor};\n    }\n\n    ::slotted([role='option'][active-option]:hover) {\n        background-color: ${fillHoverSelectedColor};\n    }\n\n    .no-results-label {\n        color: ${placeholderFontColor};\n        height: ${controlHeight};\n        display: inline-flex;\n        align-items: center;\n        padding: ${smallPadding} ${mediumPadding};\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        DropdownAppearance.block,\n        css`\n            :host([error-visible]) .control {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            .filter-field,\n            .no-results-label {\n                background: ${hexToRgbaCssColor(White, 0.15)};\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EACH,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,sBAAsB,EACtB,iBAAiB,EACjB,aAAa,EACb,oBAAoB,EACpB,YAAY,EACf,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,cAAc;MACd,WAAW;;MAEX;AACE;gGACgG,CAAC,EACrG;;;iBAGa,oBAAoB;;;;;;;;;kBASnB,iBAAiB;uBACZ,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA+BjB,aAAa;;;;;;;;8BAQD,qBAAqB;uBAC5B,aAAa,MAAM,YAAY,MAAM,WAAW;;;;kCAIrC,WAAW;;;;;;;8BAOf,qBAAqB;oBAC/B,aAAa,MAAM,YAAY,MAAM,WAAW;;;;kCAIlC,WAAW;;;;wBAIrB,YAAY;;;;;;;;;qBASf,YAAY,MAAM,aAAa;;;;;iBAKnC,oBAAoB;;;mBAGlB,YAAY;;;;;;;;;;;;;4BAaH,cAAc;;;;4BAId,iBAAiB;;;;4BAIjB,sBAAsB;;;;iBAIjC,oBAAoB;kBACnB,aAAa;;;mBAGZ,YAAY,IAAI,aAAa;;CAE/C,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;8BAGmB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEnD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { styles as dropdownStyles } from '../patterns/dropdown/styles';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport {\n    borderRgbPartialColor,\n    borderWidth,\n    controlHeight,\n    controlSlimHeight,\n    fillHoverColor,\n    fillHoverSelectedColor,\n    fillSelectedColor,\n    mediumPadding,\n    placeholderFontColor,\n    smallPadding\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { DropdownAppearance } from './types';\nimport { focusVisible } from '../utilities/style/focus';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\n\nexport const styles = css`\n    ${dropdownStyles}\n    ${errorStyles}\n\n    ${\n        /* We are using flex `order` to define the visual ordering of the selected value,\n         error icon, and dropdown arrow because they are not \"interactive\" i.e. part of the tab order */ ''\n    }\n\n    .selected-value.placeholder {\n        color: ${placeholderFontColor};\n    }\n\n    .selected-value {\n        order: 1;\n    }\n\n    .clear-button {\n        order: 3;\n        height: ${controlSlimHeight};\n        margin-left: ${smallPadding};\n    }\n\n    [part='indicator'] {\n        order: 4;\n    }\n\n    .error-icon {\n        order: 2;\n    }\n\n    [part='end'] {\n        display: contents;\n    }\n\n    .listbox {\n        overflow-x: clip;\n    }\n\n    .listbox.empty slot {\n        display: none;\n    }\n\n    .listbox.above {\n        flex-flow: column-reverse;\n    }\n\n    .filter-field {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        height: ${controlHeight};\n        background: transparent;\n    }\n\n    .filter-field::before {\n        content: '';\n        position: absolute;\n        height: 0px;\n        border-bottom: rgba(${borderRgbPartialColor}, 0.1) 2px solid;\n        bottom: calc(${controlHeight} + ${smallPadding} - ${borderWidth});\n    }\n\n    .filter-field.above::before {\n        width: calc(100% - (2 * ${borderWidth}));\n    }\n\n    .filter-field::after {\n        content: '';\n        position: absolute;\n        height: 0px;\n        border-bottom: rgba(${borderRgbPartialColor}, 0.1) 2px solid;\n        top: calc(${controlHeight} + ${smallPadding} - ${borderWidth});\n    }\n\n    .filter-field:not(.above)::after {\n        width: calc(100% - (2 * ${borderWidth}));\n    }\n\n    .filter-icon {\n        padding-left: ${smallPadding};\n    }\n\n    .filter-input {\n        background: transparent;\n        border: none;\n        color: inherit;\n        font: inherit;\n        height: var(--ni-nimble-control-height);\n        padding: 0 ${smallPadding} 0 ${mediumPadding};\n        width: 100%;\n    }\n\n    .filter-input::placeholder {\n        color: ${placeholderFontColor};\n    }\n\n    .filter-input${focusVisible} {\n        outline: 0px;\n    }\n\n    .scrollable-region {\n        overflow: auto;\n    }\n\n    ::slotted([role='option']) {\n        background-color: transparent;\n    }\n\n    ::slotted([role='option']:hover) {\n        background-color: ${fillHoverColor};\n    }\n\n    ::slotted([role='option'][active-option]) {\n        background-color: ${fillSelectedColor};\n    }\n\n    ::slotted([role='option'][active-option]:hover) {\n        background-color: ${fillHoverSelectedColor};\n    }\n\n    .no-results-label {\n        color: ${placeholderFontColor};\n        height: ${controlHeight};\n        display: inline-flex;\n        align-items: center;\n        padding: ${smallPadding} ${mediumPadding};\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        DropdownAppearance.block,\n        css`\n            :host([error-visible]) .control {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            .filter-field,\n            .no-results-label {\n                background: ${hexToRgbaCssColor(White, 0.15)};\n            }\n        `\n    )\n);\n"]}

package/dist/esm/select/template.js

@@ -7,7 +7,7 @@ import { iconMagnifyingGlassTag } from '../icons/magnifying-glass';
 import { filterNoResultsLabel, filterSearchLabel } from '../label-provider/core/label-tokens';
 import { FilterMode } from './types';
 import { buttonTag } from '../button';
-import { iconXmarkTag } from '../icons/xmark';
+import { iconTimesTag } from '../icons/times';
 /* eslint-disable @typescript-eslint/indent */
 // prettier-ignore
 export const template = (context, definition) => html `
@@ -54,7 +54,7 @@ export const template = (context, definition) => html `
                             content-hidden
                             appearance="ghost"
                             @click="${(x, c) => x.clearClickHandler(c.event)}">
-                            <${iconXmarkTag} slot="start"></${iconXmarkTag}>
+                            <${iconTimesTag} slot="start"></${iconTimesTag}>
                         </${buttonTag}>
                     `)}
                     <div aria-hidden="true" class="indicator" part="indicator">

package/dist/esm/select/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/select/template.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n    html,\n    ref,\n    slotted,\n    ViewTemplate,\n    when\n} from '@microsoft/fast-element';\nimport {\n    endSlotTemplate,\n    FoundationElementTemplate,\n    SelectOptions,\n    startSlotTemplate,\n    isListboxOption\n} from '@microsoft/fast-foundation';\nimport type { Select } from '.';\nimport { anchoredRegionTag } from '../anchored-region';\nimport { DropdownPosition } from '../patterns/dropdown/types';\nimport { overflow } from '../utilities/directive/overflow';\nimport { iconMagnifyingGlassTag } from '../icons/magnifying-glass';\nimport {\n    filterNoResultsLabel,\n    filterSearchLabel\n} from '../label-provider/core/label-tokens';\nimport { FilterMode } from './types';\nimport { buttonTag } from '../button';\nimport { iconXmarkTag } from '../icons/xmark';\n\n/* eslint-disable @typescript-eslint/indent */\n// prettier-ignore\nexport const template: FoundationElementTemplate<\nViewTemplate<Select>,\nSelectOptions\n> = (context, definition) => html<Select>`\n    <template\n        class=\"${x => [\n                x.collapsible && 'collapsible',\n                x.collapsible && x.open && 'open',\n                x.disabled && 'disabled',\n                x.collapsible && x.position,\n            ].filter(Boolean).join(' ')}\"\n        aria-activedescendant=\"${x => (x.filterMode === FilterMode.none ? x.ariaActiveDescendant : null)}\"\n        aria-controls=\"${x => (x.filterMode === FilterMode.none ? x.ariaControls : null)}\"\n        aria-disabled=\"${x => x.ariaDisabled}\"\n        aria-expanded=\"${x => x.ariaExpanded}\"\n        aria-haspopup=\"${x => (x.collapsible ? 'listbox' : null)}\"\n        aria-multiselectable=\"${x => x.ariaMultiSelectable}\"\n        ?open=\"${x => x.open}\"\n        role=\"combobox\"\n        tabindex=\"${x => (!x.disabled ? '0' : null)}\"\n        @click=\"${(x, c) => x.clickHandler(c.event as MouseEvent)}\"\n        @contentchange=\"${x => x.updateDisplayValue()}\"\n        @focusin=\"${(x, c) => x.focusinHandler(c.event as FocusEvent)}\"\n        @focusout=\"${(x, c) => x.focusoutHandler(c.event as FocusEvent)}\"\n        @keydown=\"${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}\"\n        @mousedown=\"${(x, c) => x.mousedownHandler(c.event as MouseEvent)}\"\n    >\n        ${when(x => x.collapsible, html<Select>`\n            <div\n                class=\"control\"\n                part=\"control\"\n                ?disabled=\"${x => x.disabled}\"\n                ${ref('control')}\n            >\n                ${startSlotTemplate(context, definition)}\n                <slot name=\"button-container\">\n                    <div class=\"selected-value ${x => (x.displayPlaceholder ? 'placeholder' : '')}\" part=\"selected-value\" ${overflow('hasOverflow')} title=${x => (x.hasOverflow && x.displayValue ? x.displayValue : null)}>\n                        <slot name=\"selected-value\">${x => x.displayValue}</slot>\n                    </div>\n                    ${when(x => !x.disabled && x.clearable && !x.displayPlaceholder && x.selectedIndex >= 0, html<Select>`\n                        <${buttonTag} \n                            class=\"clear-button\"\n                            tabindex=\"-1\"\n                            part=\"clear-button\"\n                            content-hidden\n                            appearance=\"ghost\"\n                            @click=\"${(x, c) => x.clearClickHandler(c.event as MouseEvent)}\">\n                            <${iconXmarkTag} slot=\"start\"></${iconXmarkTag}>\n                        </${buttonTag}>\n                    `)}\n                    <div aria-hidden=\"true\" class=\"indicator\" part=\"indicator\">\n                        <slot name=\"indicator\">\n                            ${definition.indicator || ''}\n                        </slot>\n                    </div>\n                </slot>\n                ${endSlotTemplate(context, definition)}\n            </div>\n            `)\n        }\n        <${anchoredRegionTag}\n            ${ref('anchoredRegion')}\n            class=\"anchored-region\"\n            fixed-placement\n            auto-update-mode=\"auto\"\n            vertical-default-position=\"${x => (x.positionAttribute === DropdownPosition.above ? 'top' : 'bottom')}\"\n            vertical-positioning-mode=\"${x => (!x.positionAttribute ? 'dynamic' : 'locktodefault')}\"\n            horizontal-default-position=\"center\"\n            horizontal-positioning-mode=\"locktodefault\"\n            horizontal-scaling=\"anchor\"\n            @loaded=\"${x => x.regionLoadedHandler()}\"\n            ?hidden=\"${x => (x.collapsible ? !x.open : false)}\">\n            <div class=\"listbox-background\">\n                <div\n                    class=\"\n                        listbox \n                        ${x => (x.filteredOptions.length === 0 ? 'empty' : '')}\n                        ${x => x.positionAttribute}\n                    \"\n                    id=\"${x => x.listboxId}\"\n                    part=\"listbox\"\n                    role=\"listbox\"\n                    ?disabled=\"${x => x.disabled}\"\n                    ${ref('listbox')}\n                >\n                    ${when(x => x.filterMode !== FilterMode.none, html<Select>`\n                        <div class=\"filter-field ${x => x.positionAttribute}\">\n                            <${iconMagnifyingGlassTag} class=\"filter-icon\"></${iconMagnifyingGlassTag}>\n                            <input\n                                ${ref('filterInput')}\n                                class=\"filter-input\"\n                                aria-controls=\"${x => x.ariaControls}\"\n                                aria-activedescendant=\"${x => x.ariaActiveDescendant}\"\n                                @input=\"${(x, c) => x.inputHandler(c.event as InputEvent)}\"\n                                @click=\"${(x, c) => x.inputClickHandler(c.event as MouseEvent)}\"\n                                placeholder=\"${x => filterSearchLabel.getValueFor(x)}\"\n                                value=\"${x => x.filter}\"\n                            />\n                        </div>\n                    `)}\n                    <div ${ref('scrollableRegion')}\n                        class=\"scrollable-region\">\n                        <slot\n                            ${slotted({\n                                filter: (n: Node) => n instanceof HTMLElement && isListboxOption(n),\n                                flatten: true,\n                                property: 'slottedOptions',\n                            })}\n                        ></slot>\n                    </div>\n                    ${when(x => (x.filterMode !== FilterMode.none && x.filteredOptions.length === 0), html<Select>`\n                        <span class=\"no-results-label ${x => x.positionAttribute}\">\n                            ${x => filterNoResultsLabel.getValueFor(x)}\n                        </span>\n                    `)}\n                </div>\n            </div>\n        </${anchoredRegionTag}>\n    </template>\n`;\n"]}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/select/template.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n    html,\n    ref,\n    slotted,\n    ViewTemplate,\n    when\n} from '@microsoft/fast-element';\nimport {\n    endSlotTemplate,\n    FoundationElementTemplate,\n    SelectOptions,\n    startSlotTemplate,\n    isListboxOption\n} from '@microsoft/fast-foundation';\nimport type { Select } from '.';\nimport { anchoredRegionTag } from '../anchored-region';\nimport { DropdownPosition } from '../patterns/dropdown/types';\nimport { overflow } from '../utilities/directive/overflow';\nimport { iconMagnifyingGlassTag } from '../icons/magnifying-glass';\nimport {\n    filterNoResultsLabel,\n    filterSearchLabel\n} from '../label-provider/core/label-tokens';\nimport { FilterMode } from './types';\nimport { buttonTag } from '../button';\nimport { iconTimesTag } from '../icons/times';\n\n/* eslint-disable @typescript-eslint/indent */\n// prettier-ignore\nexport const template: FoundationElementTemplate<\nViewTemplate<Select>,\nSelectOptions\n> = (context, definition) => html<Select>`\n    <template\n        class=\"${x => [\n                x.collapsible && 'collapsible',\n                x.collapsible && x.open && 'open',\n                x.disabled && 'disabled',\n                x.collapsible && x.position,\n            ].filter(Boolean).join(' ')}\"\n        aria-activedescendant=\"${x => (x.filterMode === FilterMode.none ? x.ariaActiveDescendant : null)}\"\n        aria-controls=\"${x => (x.filterMode === FilterMode.none ? x.ariaControls : null)}\"\n        aria-disabled=\"${x => x.ariaDisabled}\"\n        aria-expanded=\"${x => x.ariaExpanded}\"\n        aria-haspopup=\"${x => (x.collapsible ? 'listbox' : null)}\"\n        aria-multiselectable=\"${x => x.ariaMultiSelectable}\"\n        ?open=\"${x => x.open}\"\n        role=\"combobox\"\n        tabindex=\"${x => (!x.disabled ? '0' : null)}\"\n        @click=\"${(x, c) => x.clickHandler(c.event as MouseEvent)}\"\n        @contentchange=\"${x => x.updateDisplayValue()}\"\n        @focusin=\"${(x, c) => x.focusinHandler(c.event as FocusEvent)}\"\n        @focusout=\"${(x, c) => x.focusoutHandler(c.event as FocusEvent)}\"\n        @keydown=\"${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}\"\n        @mousedown=\"${(x, c) => x.mousedownHandler(c.event as MouseEvent)}\"\n    >\n        ${when(x => x.collapsible, html<Select>`\n            <div\n                class=\"control\"\n                part=\"control\"\n                ?disabled=\"${x => x.disabled}\"\n                ${ref('control')}\n            >\n                ${startSlotTemplate(context, definition)}\n                <slot name=\"button-container\">\n                    <div class=\"selected-value ${x => (x.displayPlaceholder ? 'placeholder' : '')}\" part=\"selected-value\" ${overflow('hasOverflow')} title=${x => (x.hasOverflow && x.displayValue ? x.displayValue : null)}>\n                        <slot name=\"selected-value\">${x => x.displayValue}</slot>\n                    </div>\n                    ${when(x => !x.disabled && x.clearable && !x.displayPlaceholder && x.selectedIndex >= 0, html<Select>`\n                        <${buttonTag} \n                            class=\"clear-button\"\n                            tabindex=\"-1\"\n                            part=\"clear-button\"\n                            content-hidden\n                            appearance=\"ghost\"\n                            @click=\"${(x, c) => x.clearClickHandler(c.event as MouseEvent)}\">\n                            <${iconTimesTag} slot=\"start\"></${iconTimesTag}>\n                        </${buttonTag}>\n                    `)}\n                    <div aria-hidden=\"true\" class=\"indicator\" part=\"indicator\">\n                        <slot name=\"indicator\">\n                            ${definition.indicator || ''}\n                        </slot>\n                    </div>\n                </slot>\n                ${endSlotTemplate(context, definition)}\n            </div>\n            `)\n        }\n        <${anchoredRegionTag}\n            ${ref('anchoredRegion')}\n            class=\"anchored-region\"\n            fixed-placement\n            auto-update-mode=\"auto\"\n            vertical-default-position=\"${x => (x.positionAttribute === DropdownPosition.above ? 'top' : 'bottom')}\"\n            vertical-positioning-mode=\"${x => (!x.positionAttribute ? 'dynamic' : 'locktodefault')}\"\n            horizontal-default-position=\"center\"\n            horizontal-positioning-mode=\"locktodefault\"\n            horizontal-scaling=\"anchor\"\n            @loaded=\"${x => x.regionLoadedHandler()}\"\n            ?hidden=\"${x => (x.collapsible ? !x.open : false)}\">\n            <div class=\"listbox-background\">\n                <div\n                    class=\"\n                        listbox \n                        ${x => (x.filteredOptions.length === 0 ? 'empty' : '')}\n                        ${x => x.positionAttribute}\n                    \"\n                    id=\"${x => x.listboxId}\"\n                    part=\"listbox\"\n                    role=\"listbox\"\n                    ?disabled=\"${x => x.disabled}\"\n                    ${ref('listbox')}\n                >\n                    ${when(x => x.filterMode !== FilterMode.none, html<Select>`\n                        <div class=\"filter-field ${x => x.positionAttribute}\">\n                            <${iconMagnifyingGlassTag} class=\"filter-icon\"></${iconMagnifyingGlassTag}>\n                            <input\n                                ${ref('filterInput')}\n                                class=\"filter-input\"\n                                aria-controls=\"${x => x.ariaControls}\"\n                                aria-activedescendant=\"${x => x.ariaActiveDescendant}\"\n                                @input=\"${(x, c) => x.inputHandler(c.event as InputEvent)}\"\n                                @click=\"${(x, c) => x.inputClickHandler(c.event as MouseEvent)}\"\n                                placeholder=\"${x => filterSearchLabel.getValueFor(x)}\"\n                                value=\"${x => x.filter}\"\n                            />\n                        </div>\n                    `)}\n                    <div ${ref('scrollableRegion')}\n                        class=\"scrollable-region\">\n                        <slot\n                            ${slotted({\n                                filter: (n: Node) => n instanceof HTMLElement && isListboxOption(n),\n                                flatten: true,\n                                property: 'slottedOptions',\n                            })}\n                        ></slot>\n                    </div>\n                    ${when(x => (x.filterMode !== FilterMode.none && x.filteredOptions.length === 0), html<Select>`\n                        <span class=\"no-results-label ${x => x.positionAttribute}\">\n                            ${x => filterNoResultsLabel.getValueFor(x)}\n                        </span>\n                    `)}\n                </div>\n            </div>\n        </${anchoredRegionTag}>\n    </template>\n`;\n"]}

package/dist/esm/spinner/styles.js

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
 import { Black15, Black91, DigitalGreenLight, PowerGreen, White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { display } from '../utilities/style/display';
 import { spinnerSmallHeight } from '../theme-provider/design-tokens';
 import { Theme } from '../theme-provider/types';
 import { themeBehavior } from '../utilities/style/theme';

package/dist/esm/spinner/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/spinner/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,OAAO,EACP,OAAO,EACP,iBAAiB,EACjB,UAAU,EACV,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;kBAGV,kBAAkB;;;;;mBAKjB,YAAY,CAAC,OAAO;;;;;;;;UAQ7B;AACE;;;;;;GAMG;AACH,EACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwHP,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8DAEmD,OAAO;;;8DAGP,iBAAiB;;SAEtE,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;8DAEmD,OAAO;;;8DAGP,UAAU;;SAE/D,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8DAEmD,KAAK;;;8DAGL,UAAU;;SAE/D,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n    Black15,\n    Black91,\n    DigitalGreenLight,\n    PowerGreen,\n    White\n} from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { spinnerSmallHeight } from '../theme-provider/design-tokens';\nimport { Theme } from '../theme-provider/types';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { ZIndexLevels } from '../utilities/style/types';\n\nexport const styles = css`\n    ${display('inline-grid')}\n\n    :host {\n        height: ${spinnerSmallHeight};\n        aspect-ratio: 1 / 1;\n    }\n\n    div.overlay {\n        z-index: ${ZIndexLevels.zIndex1};\n        margin: max(2px, 6.25%);\n        grid-area: 1/1;\n    }\n\n    div.container {\n        margin: max(2px, 6.25%);\n        grid-area: 1/1;\n        ${\n            /**\n             * At some spinner sizes / browser zoom levels, the spinner bits/squares appear to slightly overlap visually.\n             * If we set a color with transparency on each bit, it'll look wrong in the overlapping region (since the opacity\n             * combines and affects the color at the overlapping spot).\n             * Currently all 3 themes use a color with opacity = 0.6, so that's applied here on the parent element instead,\n             * which avoids that issue.\n             */\n            ''\n        }\n        opacity: 0.6;\n    }\n\n    :host([appearance='accent']) div.container {\n        opacity: 1;\n    }\n\n    div.bit1,\n    div.bit2 {\n        background: var(--ni-private-spinner-bits-background-color);\n        width: 50%;\n        height: 50%;\n        margin: auto;\n        animation-duration: 1600ms;\n        animation-iteration-count: infinite;\n        animation-play-state: var(\n            --ni-private-spinner-animation-play-state,\n            running\n        );\n        animation-timing-function: cubic-bezier(0.65, 0, 0.35, 0);\n    }\n\n    div.bit1 {\n        animation-name: ni-private-spinner-keyframes-1;\n    }\n\n    div.bit2 {\n        animation-name: ni-private-spinner-keyframes-2;\n    }\n\n    @media (prefers-reduced-motion) {\n        div.bit1,\n        div.bit2 {\n            animation-timing-function: ease-in-out, steps(1);\n            animation-duration: 3200ms;\n        }\n\n        div.bit1 {\n            animation-name: ni-private-spinner-no-motion-opacity-keyframes,\n                ni-private-spinner-no-motion-transform-keyframes-1;\n        }\n\n        div.bit2 {\n            animation-name: ni-private-spinner-no-motion-opacity-keyframes,\n                ni-private-spinner-no-motion-transform-keyframes-2;\n        }\n    }\n\n    @keyframes ni-private-spinner-keyframes-1 {\n        0%,\n        100% {\n            transform: translate(-50%, 0);\n        }\n\n        25% {\n            transform: translate(50%, 0);\n        }\n\n        50% {\n            transform: translate(50%, 100%);\n        }\n\n        75% {\n            transform: translate(-50%, 100%);\n        }\n    }\n\n    @keyframes ni-private-spinner-keyframes-2 {\n        0%,\n        100% {\n            transform: translate(50%, 0);\n        }\n\n        25% {\n            transform: translate(-50%, 0);\n        }\n\n        50% {\n            transform: translate(-50%, -100%);\n        }\n\n        75% {\n            transform: translate(50%, -100%);\n        }\n    }\n\n    @keyframes ni-private-spinner-no-motion-opacity-keyframes {\n        0%,\n        50%,\n        100% {\n            opacity: 0;\n        }\n\n        25%,\n        75% {\n            opacity: 1;\n        }\n    }\n\n    @keyframes ni-private-spinner-no-motion-transform-keyframes-1 {\n        0%,\n        100% {\n            transform: translate(-50%, 0);\n        }\n        50% {\n            transform: translate(50%, 0);\n        }\n    }\n\n    @keyframes ni-private-spinner-no-motion-transform-keyframes-2 {\n        0%,\n        100% {\n            transform: translate(50%, 0);\n        }\n\n        50% {\n            transform: translate(-50%, 0);\n        }\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.light,\n        css`\n            :host {\n                --ni-private-spinner-bits-background-color: ${Black91};\n            }\n            :host([appearance='accent']) {\n                --ni-private-spinner-bits-background-color: ${DigitalGreenLight};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.dark,\n        css`\n            :host {\n                --ni-private-spinner-bits-background-color: ${Black15};\n            }\n            :host([appearance='accent']) {\n                --ni-private-spinner-bits-background-color: ${PowerGreen};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            :host {\n                --ni-private-spinner-bits-background-color: ${White};\n            }\n            :host([appearance='accent']) {\n                --ni-private-spinner-bits-background-color: ${PowerGreen};\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/spinner/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,OAAO,EACP,OAAO,EACP,iBAAiB,EACjB,UAAU,EACV,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;kBAGV,kBAAkB;;;;;mBAKjB,YAAY,CAAC,OAAO;;;;;;;;UAQ7B;AACE;;;;;;GAMG;AACH,EACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwHP,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8DAEmD,OAAO;;;8DAGP,iBAAiB;;SAEtE,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;8DAEmD,OAAO;;;8DAGP,UAAU;;SAE/D,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8DAEmD,KAAK;;;8DAGL,UAAU;;SAE/D,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport {\n    Black15,\n    Black91,\n    DigitalGreenLight,\n    PowerGreen,\n    White\n} from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../utilities/style/display';\nimport { spinnerSmallHeight } from '../theme-provider/design-tokens';\nimport { Theme } from '../theme-provider/types';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { ZIndexLevels } from '../utilities/style/types';\n\nexport const styles = css`\n    ${display('inline-grid')}\n\n    :host {\n        height: ${spinnerSmallHeight};\n        aspect-ratio: 1 / 1;\n    }\n\n    div.overlay {\n        z-index: ${ZIndexLevels.zIndex1};\n        margin: max(2px, 6.25%);\n        grid-area: 1/1;\n    }\n\n    div.container {\n        margin: max(2px, 6.25%);\n        grid-area: 1/1;\n        ${\n            /**\n             * At some spinner sizes / browser zoom levels, the spinner bits/squares appear to slightly overlap visually.\n             * If we set a color with transparency on each bit, it'll look wrong in the overlapping region (since the opacity\n             * combines and affects the color at the overlapping spot).\n             * Currently all 3 themes use a color with opacity = 0.6, so that's applied here on the parent element instead,\n             * which avoids that issue.\n             */\n            ''\n        }\n        opacity: 0.6;\n    }\n\n    :host([appearance='accent']) div.container {\n        opacity: 1;\n    }\n\n    div.bit1,\n    div.bit2 {\n        background: var(--ni-private-spinner-bits-background-color);\n        width: 50%;\n        height: 50%;\n        margin: auto;\n        animation-duration: 1600ms;\n        animation-iteration-count: infinite;\n        animation-play-state: var(\n            --ni-private-spinner-animation-play-state,\n            running\n        );\n        animation-timing-function: cubic-bezier(0.65, 0, 0.35, 0);\n    }\n\n    div.bit1 {\n        animation-name: ni-private-spinner-keyframes-1;\n    }\n\n    div.bit2 {\n        animation-name: ni-private-spinner-keyframes-2;\n    }\n\n    @media (prefers-reduced-motion) {\n        div.bit1,\n        div.bit2 {\n            animation-timing-function: ease-in-out, steps(1);\n            animation-duration: 3200ms;\n        }\n\n        div.bit1 {\n            animation-name: ni-private-spinner-no-motion-opacity-keyframes,\n                ni-private-spinner-no-motion-transform-keyframes-1;\n        }\n\n        div.bit2 {\n            animation-name: ni-private-spinner-no-motion-opacity-keyframes,\n                ni-private-spinner-no-motion-transform-keyframes-2;\n        }\n    }\n\n    @keyframes ni-private-spinner-keyframes-1 {\n        0%,\n        100% {\n            transform: translate(-50%, 0);\n        }\n\n        25% {\n            transform: translate(50%, 0);\n        }\n\n        50% {\n            transform: translate(50%, 100%);\n        }\n\n        75% {\n            transform: translate(-50%, 100%);\n        }\n    }\n\n    @keyframes ni-private-spinner-keyframes-2 {\n        0%,\n        100% {\n            transform: translate(50%, 0);\n        }\n\n        25% {\n            transform: translate(-50%, 0);\n        }\n\n        50% {\n            transform: translate(-50%, -100%);\n        }\n\n        75% {\n            transform: translate(50%, -100%);\n        }\n    }\n\n    @keyframes ni-private-spinner-no-motion-opacity-keyframes {\n        0%,\n        50%,\n        100% {\n            opacity: 0;\n        }\n\n        25%,\n        75% {\n            opacity: 1;\n        }\n    }\n\n    @keyframes ni-private-spinner-no-motion-transform-keyframes-1 {\n        0%,\n        100% {\n            transform: translate(-50%, 0);\n        }\n        50% {\n            transform: translate(50%, 0);\n        }\n    }\n\n    @keyframes ni-private-spinner-no-motion-transform-keyframes-2 {\n        0%,\n        100% {\n            transform: translate(50%, 0);\n        }\n\n        50% {\n            transform: translate(-50%, 0);\n        }\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.light,\n        css`\n            :host {\n                --ni-private-spinner-bits-background-color: ${Black91};\n            }\n            :host([appearance='accent']) {\n                --ni-private-spinner-bits-background-color: ${DigitalGreenLight};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.dark,\n        css`\n            :host {\n                --ni-private-spinner-bits-background-color: ${Black15};\n            }\n            :host([appearance='accent']) {\n                --ni-private-spinner-bits-background-color: ${PowerGreen};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            :host {\n                --ni-private-spinner-bits-background-color: ${White};\n            }\n            :host([appearance='accent']) {\n                --ni-private-spinner-bits-background-color: ${PowerGreen};\n            }\n        `\n    )\n);\n"]}

package/dist/esm/switch/styles.js

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
 import { Black15, Black7, Black91, White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { display } from '../utilities/style/display';
 import { bodyFont, borderHoverColor, borderWidth, buttonLabelDisabledFontColor, buttonLabelFontColor, controlHeight, controlLabelDisabledFontColor, controlLabelFont, controlLabelFontColor, fillHoverColor, smallDelay } from '../theme-provider/design-tokens';
 import { Theme } from '../theme-provider/types';
 import { hexToRgbaCssColor } from '../utilities/style/colors';

package/dist/esm/switch/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/switch/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,OAAO,EACP,MAAM,EACN,OAAO,EACP,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EACH,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,4BAA4B,EAC5B,oBAAoB,EACpB,aAAa,EACb,6BAA6B,EAC7B,gBAAgB,EAChB,qBAAqB,EACrB,cAAc,EACd,UAAU,EACb,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;gBAIZ,QAAQ;iBACP,oBAAoB;;;;;;cAMvB,aAAa;;;;;;iBAMV,4BAA4B;;;;iBAI5B,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;;;;;;;;;;;4BAsBlB,cAAc;;;uBAGnB,WAAW;;;;;;;YAOtB,YAAY;wBACA,gBAAgB;;;;;gCAKR,UAAU;;;;;;;;;;;;;;;;;;;;;;;kBAuBxB,WAAW;;;;;uBAKN,WAAW,eAAe,gBAAgB;;;;;;;kBAO/C,WAAW;;;;YAIjB,YAAY;kBACN,WAAW,UAAU,gBAAgB;;;;;;;;;8BASzB,UAAU;;;;;;;;;;;;;;;;;;;;;;;CAuBvC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;iEAEsD,iBAAiB,CAC9D,OAAO,EACP,IAAI,CACP;kEACiD,KAAK;2EACI,iBAAiB,CACxE,KAAK,EACL,GAAG,CACN;8DAC6C,OAAO;uEACE,iBAAiB,CACpE,OAAO,EACP,GAAG,CACN;;SAER,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;iEAEsD,iBAAiB,CAC9D,OAAO,EACP,IAAI,CACP;kEACiD,iBAAiB,CAC/D,OAAO,EACP,GAAG,CACN;2EAC0D,iBAAiB,CACxE,OAAO,EACP,GAAG,CACN;8DAC6C,MAAM;uEACG,iBAAiB,CACpE,MAAM,EACN,GAAG,CACN;;SAER,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;iEAEsD,iBAAiB,CAC9D,KAAK,EACL,IAAI,CACP;kEACiD,iBAAiB,CAC/D,KAAK,EACL,GAAG,CACN;2EAC0D,iBAAiB,CACxE,KAAK,EACL,GAAG,CACN;8DAC6C,KAAK;uEACI,iBAAiB,CACpE,KAAK,EACL,GAAG,CACN;;SAER,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n    Black15,\n    Black7,\n    Black91,\n    White\n} from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport {\n    bodyFont,\n    borderHoverColor,\n    borderWidth,\n    buttonLabelDisabledFontColor,\n    buttonLabelFontColor,\n    controlHeight,\n    controlLabelDisabledFontColor,\n    controlLabelFont,\n    controlLabelFontColor,\n    fillHoverColor,\n    smallDelay\n} from '../theme-provider/design-tokens';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\nimport { focusVisible } from '../utilities/style/focus';\nimport { themeBehavior } from '../utilities/style/theme';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        outline: none;\n        font: ${bodyFont};\n        color: ${buttonLabelFontColor};\n        flex-direction: column;\n        cursor: pointer;\n        --ni-private-switch-height: 24px;\n        --ni-private-switch-indicator-size: 16px;\n        padding-bottom: calc(\n            ${controlHeight} - var(--ni-private-switch-height)\n        );\n    }\n\n    :host([disabled]) {\n        cursor: default;\n        color: ${buttonLabelDisabledFontColor};\n    }\n\n    .label {\n        color: ${controlLabelFontColor};\n        font: ${controlLabelFont};\n    }\n\n    :host([disabled]) .label {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    .label__hidden {\n        display: none;\n        visibility: hidden;\n    }\n\n    .switch-container {\n        display: flex;\n        align-items: center;\n    }\n\n    slot[name='unchecked-message']::slotted(*) {\n        margin-inline-end: 8px;\n    }\n\n    .switch {\n        display: flex;\n        height: var(--ni-private-switch-height);\n        width: calc(var(--ni-private-switch-height) * 2);\n        box-sizing: border-box;\n        background-color: ${fillHoverColor};\n        border-radius: calc(var(--ni-private-switch-height) / 2);\n        align-items: center;\n        border: calc(${borderWidth} * 2) solid transparent;\n    }\n\n    :host([disabled]) .switch {\n        background-color: var(--ni-private-switch-background-disabled-color);\n    }\n\n    :host(${focusVisible}) .switch {\n        border-color: ${borderHoverColor};\n    }\n\n    .checked-indicator-spacer {\n        flex-grow: 0;\n        transition: flex-grow ${smallDelay} ease-in-out;\n    }\n\n    :host([aria-checked='true']) .checked-indicator-spacer {\n        flex-grow: 1;\n    }\n\n    .checked-indicator {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        background-color: var(--ni-private-switch-indicator-background-color);\n        box-sizing: border-box;\n        width: var(--ni-private-switch-indicator-size);\n        height: var(--ni-private-switch-indicator-size);\n        border-radius: calc(var(--ni-private-switch-indicator-size) / 2);\n        margin: calc(\n            calc(\n                    var(--ni-private-switch-height) - var(\n                            --ni-private-switch-indicator-size\n                        )\n                ) / 2\n        );\n        border: ${borderWidth} solid\n            var(--ni-private-switch-indicator-border-color);\n    }\n\n    :host(:hover) .checked-indicator {\n        border: calc(${borderWidth} * 2) solid ${borderHoverColor};\n    }\n\n    :host([disabled]) .checked-indicator {\n        background-color: var(\n            --ni-private-switch-indicator-background-disabled-color\n        );\n        border: ${borderWidth} solid\n            var(--ni-private-switch-indicator-border-disabled-color);\n    }\n\n    :host(${focusVisible}) .checked-indicator {\n        border: ${borderWidth} solid ${borderHoverColor};\n    }\n\n    .checked-indicator-inner {\n        width: calc(var(--ni-private-switch-indicator-size) / 2);\n        height: calc(var(--ni-private-switch-indicator-size) / 2);\n        border-radius: calc(var(--ni-private-switch-indicator-size) / 4);\n        background-color: var(--ni-private-switch-indicator-border-color);\n        opacity: 0;\n        transition: opacity ${smallDelay} ease-in-out;\n    }\n\n    :host([disabled]) .checked-indicator-inner {\n        background-color: var(\n            --ni-private-switch-indicator-border-disabled-color\n        );\n    }\n\n    :host([aria-checked='true']) .checked-indicator-inner {\n        opacity: 1;\n    }\n\n    slot[name='checked-message']::slotted(*) {\n        margin-inline-start: 8px;\n    }\n\n    @media (prefers-reduced-motion) {\n        .checked-indicator-inner,\n        .checked-indicator-spacer {\n            transition-duration: 0s;\n        }\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.light,\n        css`\n            :host {\n                --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(\n                    Black91,\n                    0.07\n                )};\n                --ni-private-switch-indicator-background-color: ${White};\n                --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(\n                    White,\n                    0.1\n                )};\n                --ni-private-switch-indicator-border-color: ${Black91};\n                --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(\n                    Black91,\n                    0.3\n                )};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.dark,\n        css`\n            :host {\n                --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(\n                    Black15,\n                    0.07\n                )};\n                --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(\n                    Black91,\n                    0.3\n                )};\n                --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(\n                    Black91,\n                    0.1\n                )};\n                --ni-private-switch-indicator-border-color: ${Black7};\n                --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(\n                    Black7,\n                    0.3\n                )};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            :host {\n                --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(\n                    White,\n                    0.07\n                )};\n                --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(\n                    White,\n                    0.1\n                )};\n                --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(\n                    White,\n                    0.1\n                )};\n                --ni-private-switch-indicator-border-color: ${White};\n                --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(\n                    White,\n                    0.3\n                )};\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/switch/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,OAAO,EACP,MAAM,EACN,OAAO,EACP,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,4BAA4B,EAC5B,oBAAoB,EACpB,aAAa,EACb,6BAA6B,EAC7B,gBAAgB,EAChB,qBAAqB,EACrB,cAAc,EACd,UAAU,EACb,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;gBAIZ,QAAQ;iBACP,oBAAoB;;;;;;cAMvB,aAAa;;;;;;iBAMV,4BAA4B;;;;iBAI5B,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;;;;;;;;;;;4BAsBlB,cAAc;;;uBAGnB,WAAW;;;;;;;YAOtB,YAAY;wBACA,gBAAgB;;;;;gCAKR,UAAU;;;;;;;;;;;;;;;;;;;;;;;kBAuBxB,WAAW;;;;;uBAKN,WAAW,eAAe,gBAAgB;;;;;;;kBAO/C,WAAW;;;;YAIjB,YAAY;kBACN,WAAW,UAAU,gBAAgB;;;;;;;;;8BASzB,UAAU;;;;;;;;;;;;;;;;;;;;;;;CAuBvC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;iEAEsD,iBAAiB,CAC9D,OAAO,EACP,IAAI,CACP;kEACiD,KAAK;2EACI,iBAAiB,CACxE,KAAK,EACL,GAAG,CACN;8DAC6C,OAAO;uEACE,iBAAiB,CACpE,OAAO,EACP,GAAG,CACN;;SAER,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;iEAEsD,iBAAiB,CAC9D,OAAO,EACP,IAAI,CACP;kEACiD,iBAAiB,CAC/D,OAAO,EACP,GAAG,CACN;2EAC0D,iBAAiB,CACxE,OAAO,EACP,GAAG,CACN;8DAC6C,MAAM;uEACG,iBAAiB,CACpE,MAAM,EACN,GAAG,CACN;;SAER,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;iEAEsD,iBAAiB,CAC9D,KAAK,EACL,IAAI,CACP;kEACiD,iBAAiB,CAC/D,KAAK,EACL,GAAG,CACN;2EAC0D,iBAAiB,CACxE,KAAK,EACL,GAAG,CACN;8DAC6C,KAAK;uEACI,iBAAiB,CACpE,KAAK,EACL,GAAG,CACN;;SAER,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport {\n    Black15,\n    Black7,\n    Black91,\n    White\n} from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../utilities/style/display';\nimport {\n    bodyFont,\n    borderHoverColor,\n    borderWidth,\n    buttonLabelDisabledFontColor,\n    buttonLabelFontColor,\n    controlHeight,\n    controlLabelDisabledFontColor,\n    controlLabelFont,\n    controlLabelFontColor,\n    fillHoverColor,\n    smallDelay\n} from '../theme-provider/design-tokens';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\nimport { focusVisible } from '../utilities/style/focus';\nimport { themeBehavior } from '../utilities/style/theme';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        outline: none;\n        font: ${bodyFont};\n        color: ${buttonLabelFontColor};\n        flex-direction: column;\n        cursor: pointer;\n        --ni-private-switch-height: 24px;\n        --ni-private-switch-indicator-size: 16px;\n        padding-bottom: calc(\n            ${controlHeight} - var(--ni-private-switch-height)\n        );\n    }\n\n    :host([disabled]) {\n        cursor: default;\n        color: ${buttonLabelDisabledFontColor};\n    }\n\n    .label {\n        color: ${controlLabelFontColor};\n        font: ${controlLabelFont};\n    }\n\n    :host([disabled]) .label {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    .label__hidden {\n        display: none;\n        visibility: hidden;\n    }\n\n    .switch-container {\n        display: flex;\n        align-items: center;\n    }\n\n    slot[name='unchecked-message']::slotted(*) {\n        margin-inline-end: 8px;\n    }\n\n    .switch {\n        display: flex;\n        height: var(--ni-private-switch-height);\n        width: calc(var(--ni-private-switch-height) * 2);\n        box-sizing: border-box;\n        background-color: ${fillHoverColor};\n        border-radius: calc(var(--ni-private-switch-height) / 2);\n        align-items: center;\n        border: calc(${borderWidth} * 2) solid transparent;\n    }\n\n    :host([disabled]) .switch {\n        background-color: var(--ni-private-switch-background-disabled-color);\n    }\n\n    :host(${focusVisible}) .switch {\n        border-color: ${borderHoverColor};\n    }\n\n    .checked-indicator-spacer {\n        flex-grow: 0;\n        transition: flex-grow ${smallDelay} ease-in-out;\n    }\n\n    :host([aria-checked='true']) .checked-indicator-spacer {\n        flex-grow: 1;\n    }\n\n    .checked-indicator {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        background-color: var(--ni-private-switch-indicator-background-color);\n        box-sizing: border-box;\n        width: var(--ni-private-switch-indicator-size);\n        height: var(--ni-private-switch-indicator-size);\n        border-radius: calc(var(--ni-private-switch-indicator-size) / 2);\n        margin: calc(\n            calc(\n                    var(--ni-private-switch-height) - var(\n                            --ni-private-switch-indicator-size\n                        )\n                ) / 2\n        );\n        border: ${borderWidth} solid\n            var(--ni-private-switch-indicator-border-color);\n    }\n\n    :host(:hover) .checked-indicator {\n        border: calc(${borderWidth} * 2) solid ${borderHoverColor};\n    }\n\n    :host([disabled]) .checked-indicator {\n        background-color: var(\n            --ni-private-switch-indicator-background-disabled-color\n        );\n        border: ${borderWidth} solid\n            var(--ni-private-switch-indicator-border-disabled-color);\n    }\n\n    :host(${focusVisible}) .checked-indicator {\n        border: ${borderWidth} solid ${borderHoverColor};\n    }\n\n    .checked-indicator-inner {\n        width: calc(var(--ni-private-switch-indicator-size) / 2);\n        height: calc(var(--ni-private-switch-indicator-size) / 2);\n        border-radius: calc(var(--ni-private-switch-indicator-size) / 4);\n        background-color: var(--ni-private-switch-indicator-border-color);\n        opacity: 0;\n        transition: opacity ${smallDelay} ease-in-out;\n    }\n\n    :host([disabled]) .checked-indicator-inner {\n        background-color: var(\n            --ni-private-switch-indicator-border-disabled-color\n        );\n    }\n\n    :host([aria-checked='true']) .checked-indicator-inner {\n        opacity: 1;\n    }\n\n    slot[name='checked-message']::slotted(*) {\n        margin-inline-start: 8px;\n    }\n\n    @media (prefers-reduced-motion) {\n        .checked-indicator-inner,\n        .checked-indicator-spacer {\n            transition-duration: 0s;\n        }\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.light,\n        css`\n            :host {\n                --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(\n                    Black91,\n                    0.07\n                )};\n                --ni-private-switch-indicator-background-color: ${White};\n                --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(\n                    White,\n                    0.1\n                )};\n                --ni-private-switch-indicator-border-color: ${Black91};\n                --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(\n                    Black91,\n                    0.3\n                )};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.dark,\n        css`\n            :host {\n                --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(\n                    Black15,\n                    0.07\n                )};\n                --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(\n                    Black91,\n                    0.3\n                )};\n                --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(\n                    Black91,\n                    0.1\n                )};\n                --ni-private-switch-indicator-border-color: ${Black7};\n                --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(\n                    Black7,\n                    0.3\n                )};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            :host {\n                --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(\n                    White,\n                    0.07\n                )};\n                --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(\n                    White,\n                    0.1\n                )};\n                --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(\n                    White,\n                    0.1\n                )};\n                --ni-private-switch-indicator-border-color: ${White};\n                --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(\n                    White,\n                    0.3\n                )};\n            }\n        `\n    )\n);\n"]}

package/dist/esm/tab/styles.js

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 import { borderHoverColor, borderWidth, bodyFontColor, bodyDisabledFontColor, controlHeight, fillHoverColor, fillHoverSelectedColor, mediumPadding, standardPadding, smallDelay, buttonLabelFont } from '../theme-provider/design-tokens';
 import { focusVisible } from '../utilities/style/focus';
 export const styles = css `

package/dist/esm/tab/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tab/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,cAAc,EACd,sBAAsB,EACtB,aAAa,EACb,eAAe,EACf,UAAU,EACV,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;gBAKZ,eAAe;kBACb,aAAa;iBACd,aAAa;;;;;;;;;;;4BAWF,cAAc;;;;4BAId,sBAAsB;;;YAGtC,YAAY;;;;;;;;;;iBAUP,qBAAqB;;;;;;mBAMnB,aAAa,IAAI,eAAe;mBAChC,aAAa,MAAM,WAAW;;;;;;;;;;;;yBAYxB,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;;;;;;yBAUC,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;;;;;;;oCAWY,gBAAgB;;CAEnD,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n    borderHoverColor,\n    borderWidth,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    controlHeight,\n    fillHoverColor,\n    fillHoverSelectedColor,\n    mediumPadding,\n    standardPadding,\n    smallDelay,\n    buttonLabelFont\n} from '../theme-provider/design-tokens';\nimport { focusVisible } from '../utilities/style/focus';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        position: relative;\n        box-sizing: border-box;\n        font: ${buttonLabelFont};\n        height: ${controlHeight};\n        color: ${bodyFontColor};\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        --ni-private-active-indicator-width: 2px;\n        --ni-private-focus-indicator-width: 1px;\n        --ni-private-indicator-lines-gap: 1px;\n        --ni-private-focus-indicator-inset-width: 3px;\n    }\n\n    :host(:hover) {\n        background-color: ${fillHoverColor};\n    }\n\n    :host(:hover[aria-selected='true']) {\n        background-color: ${fillHoverSelectedColor};\n    }\n\n    :host(${focusVisible}) {\n        outline: none;\n    }\n\n    :host(:active) {\n        background: none;\n    }\n\n    :host([disabled]) {\n        cursor: default;\n        color: ${bodyDisabledFontColor};\n        background: none;\n    }\n\n    slot:not([name]) {\n        display: block;\n        padding: ${mediumPadding} ${standardPadding}\n            calc(${mediumPadding} - ${borderWidth});\n    }\n\n    :host::before {\n        content: '';\n        position: absolute;\n        bottom: calc(\n            var(--ni-private-active-indicator-width) +\n                var(--ni-private-indicator-lines-gap)\n        );\n        width: 0px;\n        height: 0px;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-focus-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        :host::before {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(${focusVisible})::before {\n        width: calc(100% - 2 * var(--ni-private-focus-indicator-inset-width));\n    }\n\n    :host::after {\n        content: '';\n        position: absolute;\n        bottom: 0px;\n        width: 0px;\n        height: 0px;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-active-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        :host::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(${focusVisible})::after {\n        width: 100%;\n        border-bottom-width: var(--ni-private-focus-indicator-width);\n    }\n\n    :host([aria-selected='true'])::after {\n        width: 100%;\n        border-bottom-width: var(--ni-private-active-indicator-width);\n    }\n\n    :host([aria-selected='true'][disabled])::after {\n        border-bottom-color: rgba(${borderHoverColor}, 0.3);\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tab/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,cAAc,EACd,sBAAsB,EACtB,aAAa,EACb,eAAe,EACf,UAAU,EACV,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;gBAKZ,eAAe;kBACb,aAAa;iBACd,aAAa;;;;;;;;;;;4BAWF,cAAc;;;;4BAId,sBAAsB;;;YAGtC,YAAY;;;;;;;;;;iBAUP,qBAAqB;;;;;;mBAMnB,aAAa,IAAI,eAAe;mBAChC,aAAa,MAAM,WAAW;;;;;;;;;;;;yBAYxB,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;;;;;;yBAUC,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;;;;;;;oCAWY,gBAAgB;;CAEnD,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    borderHoverColor,\n    borderWidth,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    controlHeight,\n    fillHoverColor,\n    fillHoverSelectedColor,\n    mediumPadding,\n    standardPadding,\n    smallDelay,\n    buttonLabelFont\n} from '../theme-provider/design-tokens';\nimport { focusVisible } from '../utilities/style/focus';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        position: relative;\n        box-sizing: border-box;\n        font: ${buttonLabelFont};\n        height: ${controlHeight};\n        color: ${bodyFontColor};\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        --ni-private-active-indicator-width: 2px;\n        --ni-private-focus-indicator-width: 1px;\n        --ni-private-indicator-lines-gap: 1px;\n        --ni-private-focus-indicator-inset-width: 3px;\n    }\n\n    :host(:hover) {\n        background-color: ${fillHoverColor};\n    }\n\n    :host(:hover[aria-selected='true']) {\n        background-color: ${fillHoverSelectedColor};\n    }\n\n    :host(${focusVisible}) {\n        outline: none;\n    }\n\n    :host(:active) {\n        background: none;\n    }\n\n    :host([disabled]) {\n        cursor: default;\n        color: ${bodyDisabledFontColor};\n        background: none;\n    }\n\n    slot:not([name]) {\n        display: block;\n        padding: ${mediumPadding} ${standardPadding}\n            calc(${mediumPadding} - ${borderWidth});\n    }\n\n    :host::before {\n        content: '';\n        position: absolute;\n        bottom: calc(\n            var(--ni-private-active-indicator-width) +\n                var(--ni-private-indicator-lines-gap)\n        );\n        width: 0px;\n        height: 0px;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-focus-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        :host::before {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(${focusVisible})::before {\n        width: calc(100% - 2 * var(--ni-private-focus-indicator-inset-width));\n    }\n\n    :host::after {\n        content: '';\n        position: absolute;\n        bottom: 0px;\n        width: 0px;\n        height: 0px;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-active-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        :host::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(${focusVisible})::after {\n        width: 100%;\n        border-bottom-width: var(--ni-private-focus-indicator-width);\n    }\n\n    :host([aria-selected='true'])::after {\n        width: 100%;\n        border-bottom-width: var(--ni-private-active-indicator-width);\n    }\n\n    :host([aria-selected='true'][disabled])::after {\n        border-bottom-color: rgba(${borderHoverColor}, 0.3);\n    }\n`;\n"]}

package/dist/esm/tab-panel/styles.js

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 import { bodyFont, bodyFontColor, standardPadding } from '../theme-provider/design-tokens';
 export const styles = css `
     ${display('block')}

package/dist/esm/tab-panel/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tab-panel/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,QAAQ,EACR,aAAa,EACb,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;;gBAIN,QAAQ;iBACP,aAAa;uBACP,eAAe;;CAErC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n    bodyFont,\n    bodyFontColor,\n    standardPadding\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('block')}\n\n    :host {\n        box-sizing: border-box;\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n        padding-top: ${standardPadding};\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tab-panel/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,QAAQ,EACR,aAAa,EACb,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;;gBAIN,QAAQ;iBACP,aAAa;uBACP,eAAe;;CAErC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    bodyFont,\n    bodyFontColor,\n    standardPadding\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('block')}\n\n    :host {\n        box-sizing: border-box;\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n        padding-top: ${standardPadding};\n    }\n`;\n"]}

package/dist/esm/table/components/cell/styles.js

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../../../utilities/style/display';
 import { controlHeight, controlSlimHeight, mediumPadding } from '../../../theme-provider/design-tokens';
 export const styles = css `
     ${display('flex')}
@@ -19,8 +19,6 @@ export const styles = css `
 
     .cell-view {
         overflow: hidden;
-        display: flex;
-        align-items: center;
     }
 
     .action-menu {

package/dist/esm/table/components/cell/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,aAAa,EACb,iBAAiB,EACjB,aAAa,EAChB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;uBAIE,aAAa;;cAEtB,aAAa,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;kBAoB5B,iBAAiB;;;CAGlC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n    controlHeight,\n    controlSlimHeight,\n    mediumPadding\n} from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        --ni-private-table-cell-nesting-level: 0;\n        padding: 0px ${mediumPadding};\n        padding-left: calc(\n            ${mediumPadding} + ${controlHeight} *\n                var(--ni-private-table-cell-nesting-level)\n        );\n        align-self: center;\n        height: 100%;\n        /* A default value that will be overridden by the row */\n        --ni-private-table-cell-action-menu-display: block;\n    }\n\n    .cell-view {\n        overflow: hidden;\n        display: flex;\n        align-items: center;\n    }\n\n    .action-menu {\n        display: var(--ni-private-table-cell-action-menu-display);\n        margin-left: auto;\n        flex-shrink: 0;\n        flex-grow: 0;\n        height: ${controlSlimHeight};\n        align-self: center;\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EACH,aAAa,EACb,iBAAiB,EACjB,aAAa,EAChB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;uBAIE,aAAa;;cAEtB,aAAa,MAAM,aAAa;;;;;;;;;;;;;;;;;;kBAkB5B,iBAAiB;;;CAGlC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../../utilities/style/display';\nimport {\n    controlHeight,\n    controlSlimHeight,\n    mediumPadding\n} from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        --ni-private-table-cell-nesting-level: 0;\n        padding: 0px ${mediumPadding};\n        padding-left: calc(\n            ${mediumPadding} + ${controlHeight} *\n                var(--ni-private-table-cell-nesting-level)\n        );\n        align-self: center;\n        height: 100%;\n        /* A default value that will be overridden by the row */\n        --ni-private-table-cell-action-menu-display: block;\n    }\n\n    .cell-view {\n        overflow: hidden;\n    }\n\n    .action-menu {\n        display: var(--ni-private-table-cell-action-menu-display);\n        margin-left: auto;\n        flex-shrink: 0;\n        flex-grow: 0;\n        height: ${controlSlimHeight};\n        align-self: center;\n    }\n`;\n"]}

package/dist/esm/table/components/group-row/styles.js

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
 import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { display } from '../../../utilities/style/display';
 import { applicationBackgroundColor, borderWidth, controlHeight, fillHoverColor, mediumPadding, standardPadding } from '../../../theme-provider/design-tokens';
 import { Theme } from '../../../theme-provider/types';
 import { hexToRgbaCssColor } from '../../../utilities/style/colors';
@@ -63,7 +63,6 @@ export const styles = css `
         padding-left: ${mediumPadding};
         ${userSelectNone}
         overflow: hidden;
-        display: flex;
     }
 
     .group-row-child-count {

package/dist/esm/table/components/group-row/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/group-row/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,aAAa,EACb,cAAc,EACd,aAAa,EACb,eAAe,EAClB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAE1F,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;MACf,oBAAoB;;;;uBAIH,aAAa,UAAU,WAAW;+BAC1B,WAAW,WAAW,0BAA0B;;;;kBAI7D,aAAa;;;;;;;;cAQjB,aAAa;;kBAET,aAAa;;;;;;;;;kBASb,aAAa;;;;;;;4BAOH,cAAc;;;;;cAK5B,aAAa,MAAM,eAAe;;;;;;;;;;;wBAWxB,aAAa;UAC3B,cAAc;;;;;;;yBAOC,aAAa;;UAE5B,cAAc;;;;;;;;uBAQD,eAAe;;;;;;CAMrC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;oCAEyB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEzD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;oCAEyB,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;SAExD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport {\n    applicationBackgroundColor,\n    borderWidth,\n    controlHeight,\n    fillHoverColor,\n    mediumPadding,\n    standardPadding\n} from '../../../theme-provider/design-tokens';\nimport { Theme } from '../../../theme-provider/types';\nimport { hexToRgbaCssColor } from '../../../utilities/style/colors';\nimport { themeBehavior } from '../../../utilities/style/theme';\nimport { userSelectNone } from '../../../utilities/style/user-select';\nimport { styles as expandCollapseStyles } from '../../../patterns/expand-collapse/styles';\n\nexport const styles = css`\n    ${display('grid')}\n    ${expandCollapseStyles}\n\n    :host {\n        align-items: center;\n        height: calc(${controlHeight} + 2 * ${borderWidth});\n        border-top: calc(2 * ${borderWidth}) solid ${applicationBackgroundColor};\n        box-sizing: border-box;\n        grid-template-columns:\n            calc(\n                ${controlHeight} *\n                    (var(--ni-private-table-group-row-indent-level) + 1)\n            )\n            1fr;\n    }\n\n    :host([selectable]) {\n        grid-template-columns:\n            ${controlHeight}\n            calc(\n                ${controlHeight} *\n                    (var(--ni-private-table-group-row-indent-level) + 1)\n            )\n            1fr;\n    }\n\n    :host::before {\n        content: '';\n        width: 100%;\n        height: ${controlHeight};\n        pointer-events: none;\n        bottom: 0px;\n        position: absolute;\n    }\n\n    :host(:hover)::before {\n        background-color: ${fillHoverColor};\n    }\n\n    .expand-collapse-button {\n        margin-left: calc(\n            ${mediumPadding} + ${standardPadding} * 2 *\n                var(--ni-private-table-group-row-indent-level)\n        );\n    }\n\n    .group-row-header-content {\n        display: flex;\n        overflow: hidden;\n    }\n\n    .group-header-view {\n        padding-left: ${mediumPadding};\n        ${userSelectNone}\n        overflow: hidden;\n        display: flex;\n    }\n\n    .group-row-child-count {\n        padding-left: 2px;\n        padding-right: ${mediumPadding};\n        pointer-events: none;\n        ${userSelectNone}\n    }\n\n    .checkbox-container {\n        display: flex;\n    }\n\n    .selection-checkbox {\n        margin-left: ${standardPadding};\n    }\n\n    .selection-checkbox::part(label) {\n        padding-left: 0px;\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.color,\n        css`\n            :host(:hover)::before {\n                background-color: ${hexToRgbaCssColor(White, 0.05)};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.dark,\n        css`\n            :host(:hover)::before {\n                background-color: ${hexToRgbaCssColor(White, 0.1)};\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/group-row/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,aAAa,EACb,cAAc,EACd,aAAa,EACb,eAAe,EAClB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAE1F,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;MACf,oBAAoB;;;;uBAIH,aAAa,UAAU,WAAW;+BAC1B,WAAW,WAAW,0BAA0B;;;;kBAI7D,aAAa;;;;;;;;cAQjB,aAAa;;kBAET,aAAa;;;;;;;;;kBASb,aAAa;;;;;;;4BAOH,cAAc;;;;;cAK5B,aAAa,MAAM,eAAe;;;;;;;;;;;wBAWxB,aAAa;UAC3B,cAAc;;;;;;yBAMC,aAAa;;UAE5B,cAAc;;;;;;;;uBAQD,eAAe;;;;;;CAMrC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;oCAEyB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEzD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;oCAEyB,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;SAExD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../../../utilities/style/display';\nimport {\n    applicationBackgroundColor,\n    borderWidth,\n    controlHeight,\n    fillHoverColor,\n    mediumPadding,\n    standardPadding\n} from '../../../theme-provider/design-tokens';\nimport { Theme } from '../../../theme-provider/types';\nimport { hexToRgbaCssColor } from '../../../utilities/style/colors';\nimport { themeBehavior } from '../../../utilities/style/theme';\nimport { userSelectNone } from '../../../utilities/style/user-select';\nimport { styles as expandCollapseStyles } from '../../../patterns/expand-collapse/styles';\n\nexport const styles = css`\n    ${display('grid')}\n    ${expandCollapseStyles}\n\n    :host {\n        align-items: center;\n        height: calc(${controlHeight} + 2 * ${borderWidth});\n        border-top: calc(2 * ${borderWidth}) solid ${applicationBackgroundColor};\n        box-sizing: border-box;\n        grid-template-columns:\n            calc(\n                ${controlHeight} *\n                    (var(--ni-private-table-group-row-indent-level) + 1)\n            )\n            1fr;\n    }\n\n    :host([selectable]) {\n        grid-template-columns:\n            ${controlHeight}\n            calc(\n                ${controlHeight} *\n                    (var(--ni-private-table-group-row-indent-level) + 1)\n            )\n            1fr;\n    }\n\n    :host::before {\n        content: '';\n        width: 100%;\n        height: ${controlHeight};\n        pointer-events: none;\n        bottom: 0px;\n        position: absolute;\n    }\n\n    :host(:hover)::before {\n        background-color: ${fillHoverColor};\n    }\n\n    .expand-collapse-button {\n        margin-left: calc(\n            ${mediumPadding} + ${standardPadding} * 2 *\n                var(--ni-private-table-group-row-indent-level)\n        );\n    }\n\n    .group-row-header-content {\n        display: flex;\n        overflow: hidden;\n    }\n\n    .group-header-view {\n        padding-left: ${mediumPadding};\n        ${userSelectNone}\n        overflow: hidden;\n    }\n\n    .group-row-child-count {\n        padding-left: 2px;\n        padding-right: ${mediumPadding};\n        pointer-events: none;\n        ${userSelectNone}\n    }\n\n    .checkbox-container {\n        display: flex;\n    }\n\n    .selection-checkbox {\n        margin-left: ${standardPadding};\n    }\n\n    .selection-checkbox::part(label) {\n        padding-left: 0px;\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.color,\n        css`\n            :host(:hover)::before {\n                background-color: ${hexToRgbaCssColor(White, 0.05)};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.dark,\n        css`\n            :host(:hover)::before {\n                background-color: ${hexToRgbaCssColor(White, 0.1)};\n            }\n        `\n    )\n);\n"]}

package/dist/esm/table/components/header/styles.js

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../../../utilities/style/display';
 import { controlHeight, iconColor, mediumPadding, tableHeaderFont, tableHeaderFontColor } from '../../../theme-provider/design-tokens';
 export const styles = css `
     ${display('flex')}

package/dist/esm/table/components/header/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/header/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,aAAa,EACb,SAAS,EACT,aAAa,EACb,eAAe,EACf,oBAAoB,EACvB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;kBAGH,aAAa;;uBAER,aAAa;gBACpB,eAAe;iBACd,oBAAoB;UAC3B,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;eAE/C,aAAa;;;;;;;;CAQ3B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n    controlHeight,\n    iconColor,\n    mediumPadding,\n    tableHeaderFont,\n    tableHeaderFontColor\n} from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        height: ${controlHeight};\n        align-items: center;\n        padding: 0px ${mediumPadding};\n        font: ${tableHeaderFont};\n        color: ${tableHeaderFontColor};\n        ${iconColor.cssCustomProperty}: ${tableHeaderFontColor};\n        text-transform: uppercase;\n        gap: ${mediumPadding};\n        cursor: default;\n    }\n\n    .sort-indicator,\n    .grouped-indicator {\n        flex: 0 0 auto;\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/header/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EACH,aAAa,EACb,SAAS,EACT,aAAa,EACb,eAAe,EACf,oBAAoB,EACvB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;kBAGH,aAAa;;uBAER,aAAa;gBACpB,eAAe;iBACd,oBAAoB;UAC3B,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;eAE/C,aAAa;;;;;;;;CAQ3B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../../utilities/style/display';\nimport {\n    controlHeight,\n    iconColor,\n    mediumPadding,\n    tableHeaderFont,\n    tableHeaderFontColor\n} from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        height: ${controlHeight};\n        align-items: center;\n        padding: 0px ${mediumPadding};\n        font: ${tableHeaderFont};\n        color: ${tableHeaderFontColor};\n        ${iconColor.cssCustomProperty}: ${tableHeaderFontColor};\n        text-transform: uppercase;\n        gap: ${mediumPadding};\n        cursor: default;\n    }\n\n    .sort-indicator,\n    .grouped-indicator {\n        flex: 0 0 auto;\n    }\n`;\n"]}

package/dist/esm/table/components/row/styles.js

@@ -1,14 +1,14 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
 import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { display } from '../../../utilities/style/display';
 import { applicationBackgroundColor, borderWidth, controlHeight, controlSlimHeight, fillHoverColor, fillHoverSelectedColor, fillSelectedColor, mediumPadding, standardPadding } from '../../../theme-provider/design-tokens';
 import { Theme } from '../../../theme-provider/types';
 import { hexToRgbaCssColor } from '../../../utilities/style/colors';
 import { themeBehavior } from '../../../utilities/style/theme';
 import { styles as expandCollapseStyles } from '../../../patterns/expand-collapse/styles';
 export const styles = css `
-    ${expandCollapseStyles}
     ${display('flex')}
+    ${expandCollapseStyles}
 
     :host {
         width: fit-content;

package/dist/esm/table/components/row/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/row/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,sBAAsB,EACtB,iBAAiB,EACjB,aAAa,EACb,eAAe,EAClB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,MAAM,IAAI,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAE1F,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,oBAAoB;MACpB,OAAO,CAAC,MAAM,CAAC;;;;;4BAKO,0BAA0B;uBAC/B,aAAa,UAAU,WAAW;+BAC1B,WAAW;;;;;;;;kBAQxB,aAAa;;;;;;;;4BAQH,cAAc;;;;4BAId,iBAAiB;;;;4BAIjB,sBAAsB;;;;;;cAMpC,aAAa;kBACT,aAAa;;;;;;iBAMd,iBAAiB;kBAChB,iBAAiB;;;;;;cAMrB,aAAa;kBACT,aAAa;;;;;;;;;;uBAUR,eAAe;;;;;;;;iBAQrB,aAAa;;;;;iBAKb,aAAa;;;;;;;;;;;;;eAaf,aAAa;;;;;;;;;;;;;;;;;;;CAmB3B,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;oCAEyB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;;;oCAI9B,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;;;oCAI9B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;SAExD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport {\n    applicationBackgroundColor,\n    borderWidth,\n    controlHeight,\n    controlSlimHeight,\n    fillHoverColor,\n    fillHoverSelectedColor,\n    fillSelectedColor,\n    mediumPadding,\n    standardPadding\n} from '../../../theme-provider/design-tokens';\nimport { Theme } from '../../../theme-provider/types';\nimport { hexToRgbaCssColor } from '../../../utilities/style/colors';\nimport { themeBehavior } from '../../../utilities/style/theme';\nimport { styles as expandCollapseStyles } from '../../../patterns/expand-collapse/styles';\n\nexport const styles = css`\n    ${expandCollapseStyles}\n    ${display('flex')}\n\n    :host {\n        width: fit-content;\n        min-width: 100%;\n        background-color: ${applicationBackgroundColor};\n        height: calc(${controlHeight} + 2 * ${borderWidth});\n        border-top: calc(2 * ${borderWidth}) solid transparent;\n        box-sizing: border-box;\n        background-clip: padding-box;\n    }\n\n    :host::before {\n        content: '';\n        width: 100%;\n        height: ${controlHeight};\n        pointer-events: none;\n        box-sizing: border-box;\n        bottom: 0px;\n        position: absolute;\n    }\n\n    :host([selectable]:not([selected]):hover)::before {\n        background-color: ${fillHoverColor};\n    }\n\n    :host([selected])::before {\n        background-color: ${fillSelectedColor};\n    }\n\n    :host([selected]:hover)::before {\n        background-color: ${fillHoverSelectedColor};\n    }\n\n    .expand-collapse-button {\n        flex: 0 0 auto;\n        padding-left: calc(\n            ${mediumPadding} + (var(--ni-private-table-row-indent-level) - 1) *\n                ${controlHeight}\n        );\n    }\n\n    .spinner-container {\n        flex: 0 0 auto;\n        width: ${controlSlimHeight};\n        height: ${controlSlimHeight};\n        align-self: center;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding-left: calc(\n            ${mediumPadding} + (var(--ni-private-table-row-indent-level) - 1) *\n                ${controlHeight}\n        );\n    }\n\n    .row-operations-container {\n        flex: 0 0 auto;\n        display: flex;\n    }\n\n    .selection-checkbox {\n        margin-left: ${standardPadding};\n    }\n\n    .selection-checkbox::part(label) {\n        padding-left: 0px;\n    }\n\n    .row-front-spacer {\n        width: ${controlHeight};\n        flex: 0 0 auto;\n    }\n\n    .row-front-spacer.top-level-parent {\n        width: ${mediumPadding};\n    }\n\n    .cell-container {\n        display: grid;\n        width: 100%;\n        grid-auto-flow: column;\n        grid-auto-columns: 1fr;\n        grid-template-columns: var(--ni-private-table-row-grid-columns) auto;\n    }\n\n    .cell-container.nested-parent {\n        margin-left: calc(\n            (${controlHeight} * var(--ni-private-table-row-indent-level)) * -1\n        );\n    }\n\n    nimble-table-cell {\n        --ni-private-table-cell-action-menu-display: none;\n    }\n\n    nimble-table-cell[menu-open] {\n        --ni-private-table-cell-action-menu-display: block;\n    }\n\n    :host(:hover) nimble-table-cell {\n        --ni-private-table-cell-action-menu-display: block;\n    }\n\n    :host([selected]) nimble-table-cell {\n        --ni-private-table-cell-action-menu-display: block;\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.color,\n        css`\n            :host([selectable]:not([selected]):hover)::before {\n                background-color: ${hexToRgbaCssColor(White, 0.05)};\n            }\n\n            :host([selected])::before {\n                background-color: ${hexToRgbaCssColor(White, 0.25)};\n            }\n\n            :host([selected]:hover)::before {\n                background-color: ${hexToRgbaCssColor(White, 0.2)};\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/row/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,sBAAsB,EACtB,iBAAiB,EACjB,aAAa,EACb,eAAe,EAClB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,MAAM,IAAI,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAE1F,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;MACf,oBAAoB;;;;;4BAKE,0BAA0B;uBAC/B,aAAa,UAAU,WAAW;+BAC1B,WAAW;;;;;;;;kBAQxB,aAAa;;;;;;;;4BAQH,cAAc;;;;4BAId,iBAAiB;;;;4BAIjB,sBAAsB;;;;;;cAMpC,aAAa;kBACT,aAAa;;;;;;iBAMd,iBAAiB;kBAChB,iBAAiB;;;;;;cAMrB,aAAa;kBACT,aAAa;;;;;;;;;;uBAUR,eAAe;;;;;;;;iBAQrB,aAAa;;;;;iBAKb,aAAa;;;;;;;;;;;;;eAaf,aAAa;;;;;;;;;;;;;;;;;;;CAmB3B,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;oCAEyB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;;;oCAI9B,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;;;oCAI9B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;SAExD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../../../utilities/style/display';\nimport {\n    applicationBackgroundColor,\n    borderWidth,\n    controlHeight,\n    controlSlimHeight,\n    fillHoverColor,\n    fillHoverSelectedColor,\n    fillSelectedColor,\n    mediumPadding,\n    standardPadding\n} from '../../../theme-provider/design-tokens';\nimport { Theme } from '../../../theme-provider/types';\nimport { hexToRgbaCssColor } from '../../../utilities/style/colors';\nimport { themeBehavior } from '../../../utilities/style/theme';\nimport { styles as expandCollapseStyles } from '../../../patterns/expand-collapse/styles';\n\nexport const styles = css`\n    ${display('flex')}\n    ${expandCollapseStyles}\n\n    :host {\n        width: fit-content;\n        min-width: 100%;\n        background-color: ${applicationBackgroundColor};\n        height: calc(${controlHeight} + 2 * ${borderWidth});\n        border-top: calc(2 * ${borderWidth}) solid transparent;\n        box-sizing: border-box;\n        background-clip: padding-box;\n    }\n\n    :host::before {\n        content: '';\n        width: 100%;\n        height: ${controlHeight};\n        pointer-events: none;\n        box-sizing: border-box;\n        bottom: 0px;\n        position: absolute;\n    }\n\n    :host([selectable]:not([selected]):hover)::before {\n        background-color: ${fillHoverColor};\n    }\n\n    :host([selected])::before {\n        background-color: ${fillSelectedColor};\n    }\n\n    :host([selected]:hover)::before {\n        background-color: ${fillHoverSelectedColor};\n    }\n\n    .expand-collapse-button {\n        flex: 0 0 auto;\n        padding-left: calc(\n            ${mediumPadding} + (var(--ni-private-table-row-indent-level) - 1) *\n                ${controlHeight}\n        );\n    }\n\n    .spinner-container {\n        flex: 0 0 auto;\n        width: ${controlSlimHeight};\n        height: ${controlSlimHeight};\n        align-self: center;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding-left: calc(\n            ${mediumPadding} + (var(--ni-private-table-row-indent-level) - 1) *\n                ${controlHeight}\n        );\n    }\n\n    .row-operations-container {\n        flex: 0 0 auto;\n        display: flex;\n    }\n\n    .selection-checkbox {\n        margin-left: ${standardPadding};\n    }\n\n    .selection-checkbox::part(label) {\n        padding-left: 0px;\n    }\n\n    .row-front-spacer {\n        width: ${controlHeight};\n        flex: 0 0 auto;\n    }\n\n    .row-front-spacer.top-level-parent {\n        width: ${mediumPadding};\n    }\n\n    .cell-container {\n        display: grid;\n        width: 100%;\n        grid-auto-flow: column;\n        grid-auto-columns: 1fr;\n        grid-template-columns: var(--ni-private-table-row-grid-columns) auto;\n    }\n\n    .cell-container.nested-parent {\n        margin-left: calc(\n            (${controlHeight} * var(--ni-private-table-row-indent-level)) * -1\n        );\n    }\n\n    nimble-table-cell {\n        --ni-private-table-cell-action-menu-display: none;\n    }\n\n    nimble-table-cell[menu-open] {\n        --ni-private-table-cell-action-menu-display: block;\n    }\n\n    :host(:hover) nimble-table-cell {\n        --ni-private-table-cell-action-menu-display: block;\n    }\n\n    :host([selected]) nimble-table-cell {\n        --ni-private-table-cell-action-menu-display: block;\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.color,\n        css`\n            :host([selectable]:not([selected]):hover)::before {\n                background-color: ${hexToRgbaCssColor(White, 0.05)};\n            }\n\n            :host([selected])::before {\n                background-color: ${hexToRgbaCssColor(White, 0.25)};\n            }\n\n            :host([selected]:hover)::before {\n                background-color: ${hexToRgbaCssColor(White, 0.2)};\n            }\n        `\n    )\n);\n"]}

package/dist/esm/table/styles.js

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
 import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { display } from '../utilities/style/display';
 import { applicationBackgroundColor, bodyFont, bodyFontColor, popupBorderColor, controlSlimHeight, mediumPadding, standardPadding, tableRowBorderColor, borderHoverColor } from '../theme-provider/design-tokens';
 import { Theme } from '../theme-provider/types';
 import { hexToRgbaCssColor } from '../utilities/style/colors';