@ni/nimble-components 29.0.0 → 29.1.1

package/dist/esm/anchor/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 { focusVisible } from '../utilities/style/focus';
 import { linkActiveFontColor, linkActiveProminentFontColor, linkDisabledFontColor, linkFont, linkFontColor, linkProminentFontColor } from '../theme-provider/design-tokens';
 export const styles = css `

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EACH,mBAAmB,EACnB,4BAA4B,EAC5B,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,sBAAsB,EACzB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,QAAQ,CAAC;;;;oBAIP,QAAQ;;;;;;;;qBAQP,aAAa;;;;;;;;;qBASb,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;kBAuBzB,YAAY;;;;;;;;;qBAST,mBAAmB;;;;;;qBAMnB,4BAA4B;;;;;;;;;;qBAU5B,qBAAqB;;;CAGzC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport { focusVisible } from '../utilities/style/focus';\nimport {\n    linkActiveFontColor,\n    linkActiveProminentFontColor,\n    linkDisabledFontColor,\n    linkFont,\n    linkFontColor,\n    linkProminentFontColor\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    @layer base, hover, focusVisible, active, disabled;\n\n    @layer base {\n        ${display('inline')}\n\n        :host {\n            box-sizing: border-box;\n            font: ${linkFont};\n        }\n\n        .top-container {\n            display: contents;\n        }\n\n        .control {\n            color: ${linkFontColor};\n            text-decoration: underline;\n        }\n\n        :host([underline-hidden]) .control {\n            text-decoration: none;\n        }\n\n        :host([appearance='prominent']) .control {\n            color: ${linkProminentFontColor};\n        }\n\n        [part='start'] {\n            display: none;\n        }\n\n        .content {\n            pointer-events: none;\n        }\n\n        [part='end'] {\n            display: none;\n        }\n    }\n\n    @layer hover {\n        .control:any-link:hover {\n            text-decoration: underline;\n        }\n    }\n\n    @layer focusVisible {\n        .control${focusVisible} {\n            outline: none;\n            box-shadow: inset 0px -1px;\n            text-decoration: underline;\n        }\n    }\n\n    @layer active {\n        .control:active {\n            color: ${linkActiveFontColor};\n            text-decoration: underline;\n            box-shadow: none;\n        }\n\n        :host([appearance='prominent']) .control:active {\n            color: ${linkActiveProminentFontColor};\n        }\n\n        :host([underline-hidden]) .control:active {\n            text-decoration: none;\n        }\n    }\n\n    @layer disabled {\n        .control:not(:any-link) {\n            color: ${linkDisabledFontColor};\n        }\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EACH,mBAAmB,EACnB,4BAA4B,EAC5B,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,sBAAsB,EACzB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,QAAQ,CAAC;;;;oBAIP,QAAQ;;;;;;;;qBAQP,aAAa;;;;;;;;;qBASb,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;kBAuBzB,YAAY;;;;;;;;;qBAST,mBAAmB;;;;;;qBAMnB,4BAA4B;;;;;;;;;;qBAU5B,qBAAqB;;;CAGzC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport { focusVisible } from '../utilities/style/focus';\nimport {\n    linkActiveFontColor,\n    linkActiveProminentFontColor,\n    linkDisabledFontColor,\n    linkFont,\n    linkFontColor,\n    linkProminentFontColor\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    @layer base, hover, focusVisible, active, disabled;\n\n    @layer base {\n        ${display('inline')}\n\n        :host {\n            box-sizing: border-box;\n            font: ${linkFont};\n        }\n\n        .top-container {\n            display: contents;\n        }\n\n        .control {\n            color: ${linkFontColor};\n            text-decoration: underline;\n        }\n\n        :host([underline-hidden]) .control {\n            text-decoration: none;\n        }\n\n        :host([appearance='prominent']) .control {\n            color: ${linkProminentFontColor};\n        }\n\n        [part='start'] {\n            display: none;\n        }\n\n        .content {\n            pointer-events: none;\n        }\n\n        [part='end'] {\n            display: none;\n        }\n    }\n\n    @layer hover {\n        .control:any-link:hover {\n            text-decoration: underline;\n        }\n    }\n\n    @layer focusVisible {\n        .control${focusVisible} {\n            outline: none;\n            box-shadow: inset 0px -1px;\n            text-decoration: underline;\n        }\n    }\n\n    @layer active {\n        .control:active {\n            color: ${linkActiveFontColor};\n            text-decoration: underline;\n            box-shadow: none;\n        }\n\n        :host([appearance='prominent']) .control:active {\n            color: ${linkActiveProminentFontColor};\n        }\n\n        :host([underline-hidden]) .control:active {\n            text-decoration: none;\n        }\n    }\n\n    @layer disabled {\n        .control:not(:any-link) {\n            color: ${linkDisabledFontColor};\n        }\n    }\n`;\n"]}

package/dist/esm/anchor-menu-item/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 { bodyDisabledFontColor, bodyFont, bodyFontColor, borderHoverColor, controlHeight, fillHoverColor, fillSelectedColor, iconColor, iconSize } from '../theme-provider/design-tokens';
 import { focusVisible } from '../utilities/style/focus';
 export const styles = css `

package/dist/esm/anchor-menu-item/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor-menu-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,QAAQ,EACX,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;gBAGL,QAAQ;;;;sBAIF,cAAc;;;;sBAId,iBAAiB;;;;;;;;;;;;kBAYrB,aAAa;;;;;;;;iBAQd,aAAa;;;;;;;;;OASvB,YAAY;6BACU,gBAAgB;;;;;iBAK5B,qBAAqB;;;;;;iCAML,QAAQ;;;;;;;;;UAS/B,SAAS,CAAC,iBAAiB;iBACpB,QAAQ;kBACP,QAAQ;;;;;;;;;;;;;;;;;;CAkBzB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\n\nimport {\n    bodyDisabledFontColor,\n    bodyFont,\n    bodyFontColor,\n    borderHoverColor,\n    controlHeight,\n    fillHoverColor,\n    fillSelectedColor,\n    iconColor,\n    iconSize\n} from '../theme-provider/design-tokens';\nimport { focusVisible } from '../utilities/style/focus';\n\nexport const styles = css`\n    ${display('grid')}\n\n    :host {\n        font: ${bodyFont};\n    }\n\n    :host(:hover) {\n        background: ${fillHoverColor};\n    }\n\n    :host(:active) {\n        background: ${fillSelectedColor};\n    }\n\n    :host([disabled]) {\n        background: transparent;\n    }\n\n    a {\n        display: grid;\n        contain: layout;\n        overflow: visible;\n        box-sizing: border-box;\n        height: ${controlHeight};\n        grid-template-columns: 1fr;\n        column-gap: 8px;\n        grid-template-rows: 1fr;\n        justify-items: start;\n        align-items: center;\n        margin: 0 0;\n        white-space: nowrap;\n        color: ${bodyFontColor};\n        fill: currentcolor;\n        cursor: pointer;\n        text-decoration: none;\n        outline: none;\n        padding-left: 8px;\n        padding-right: 8px;\n    }\n\n    a${focusVisible} {\n        outline: 2px solid ${borderHoverColor};\n        outline-offset: -2px;\n    }\n\n    :host([disabled]) a {\n        color: ${bodyDisabledFontColor};\n        fill: currentcolor;\n        cursor: default;\n    }\n\n    :host(.indent-1) a {\n        grid-template-columns: ${iconSize} 1fr;\n    }\n\n    [part='start'] {\n        display: contents;\n        pointer-events: none;\n    }\n\n    slot[name='start']::slotted(*) {\n        ${iconColor.cssCustomProperty}: currentcolor;\n        width: ${iconSize};\n        height: ${iconSize};\n    }\n\n    :host(.indent-1) [part='start'] {\n        grid-column: 1;\n    }\n\n    .content {\n        pointer-events: none;\n    }\n\n    :host(.indent-1) .content {\n        grid-column: 2;\n    }\n\n    [part='end'] {\n        display: none;\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor-menu-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,QAAQ,EACX,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;gBAGL,QAAQ;;;;sBAIF,cAAc;;;;sBAId,iBAAiB;;;;;;;;;;;;kBAYrB,aAAa;;;;;;;;iBAQd,aAAa;;;;;;;;;OASvB,YAAY;6BACU,gBAAgB;;;;;iBAK5B,qBAAqB;;;;;;iCAML,QAAQ;;;;;;;;;UAS/B,SAAS,CAAC,iBAAiB;iBACpB,QAAQ;kBACP,QAAQ;;;;;;;;;;;;;;;;;;CAkBzB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\n\nimport {\n    bodyDisabledFontColor,\n    bodyFont,\n    bodyFontColor,\n    borderHoverColor,\n    controlHeight,\n    fillHoverColor,\n    fillSelectedColor,\n    iconColor,\n    iconSize\n} from '../theme-provider/design-tokens';\nimport { focusVisible } from '../utilities/style/focus';\n\nexport const styles = css`\n    ${display('grid')}\n\n    :host {\n        font: ${bodyFont};\n    }\n\n    :host(:hover) {\n        background: ${fillHoverColor};\n    }\n\n    :host(:active) {\n        background: ${fillSelectedColor};\n    }\n\n    :host([disabled]) {\n        background: transparent;\n    }\n\n    a {\n        display: grid;\n        contain: layout;\n        overflow: visible;\n        box-sizing: border-box;\n        height: ${controlHeight};\n        grid-template-columns: 1fr;\n        column-gap: 8px;\n        grid-template-rows: 1fr;\n        justify-items: start;\n        align-items: center;\n        margin: 0 0;\n        white-space: nowrap;\n        color: ${bodyFontColor};\n        fill: currentcolor;\n        cursor: pointer;\n        text-decoration: none;\n        outline: none;\n        padding-left: 8px;\n        padding-right: 8px;\n    }\n\n    a${focusVisible} {\n        outline: 2px solid ${borderHoverColor};\n        outline-offset: -2px;\n    }\n\n    :host([disabled]) a {\n        color: ${bodyDisabledFontColor};\n        fill: currentcolor;\n        cursor: default;\n    }\n\n    :host(.indent-1) a {\n        grid-template-columns: ${iconSize} 1fr;\n    }\n\n    [part='start'] {\n        display: contents;\n        pointer-events: none;\n    }\n\n    slot[name='start']::slotted(*) {\n        ${iconColor.cssCustomProperty}: currentcolor;\n        width: ${iconSize};\n        height: ${iconSize};\n    }\n\n    :host(.indent-1) [part='start'] {\n        grid-column: 1;\n    }\n\n    .content {\n        pointer-events: none;\n    }\n\n    :host(.indent-1) .content {\n        grid-column: 2;\n    }\n\n    [part='end'] {\n        display: none;\n    }\n`;\n"]}

package/dist/esm/anchor-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 { focusVisible } from '../utilities/style/focus';
 import { bodyDisabledFontColor, bodyFontColor, borderHoverColor, borderWidth, buttonLabelFont, controlHeight, fillHoverColor, fillHoverSelectedColor, smallDelay, mediumPadding, standardPadding } from '../theme-provider/design-tokens';
 export const styles = css `

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor-tab/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EACH,qBAAqB,EACrB,aAAa,EACb,gBAAgB,EAChB,WAAW,EACX,eAAe,EACf,aAAa,EACb,cAAc,EACd,sBAAsB,EACtB,UAAU,EACV,aAAa,EACb,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;gBAKZ,eAAe;kBACb,aAAa;iBACd,aAAa;;;;;;;;;;;4BAWF,cAAc;;;;4BAId,sBAAsB;;;;;;;;;iBASjC,qBAAqB;;;;;;;mBAOnB,aAAa,IAAI,eAAe;mBAChC,aAAa,MAAM,WAAW;;;;;;;;;;;;yBAYxB,gBAAgB;;4BAEb,UAAU;;;;;;;;;OAS/B,YAAY;;;;;;;;;;;;;;;;;;;;yBAoBM,gBAAgB;;4BAEb,UAAU;;;;;;;;;OAS/B,YAAY;;;;;;;;;;;oCAWiB,gBAAgB;;;;;;;;;;CAUnD,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport { focusVisible } from '../utilities/style/focus';\nimport {\n    bodyDisabledFontColor,\n    bodyFontColor,\n    borderHoverColor,\n    borderWidth,\n    buttonLabelFont,\n    controlHeight,\n    fillHoverColor,\n    fillHoverSelectedColor,\n    smallDelay,\n    mediumPadding,\n    standardPadding\n} from '../theme-provider/design-tokens';\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-current]) {\n        background-color: ${fillHoverSelectedColor};\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        pointer-events: none;\n        display: block;\n        padding: ${mediumPadding} ${standardPadding}\n            calc(${mediumPadding} - ${borderWidth});\n    }\n\n    a::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        a::before {\n            transition-duration: 0s;\n        }\n    }\n\n    a${focusVisible}::before {\n        width: calc(100% - 2 * var(--ni-private-focus-indicator-inset-width));\n    }\n\n    a {\n        display: inline-flex;\n        text-decoration: none;\n        color: inherit;\n        cursor: inherit;\n        outline: none;\n        align-items: center;\n        justify-content: center;\n    }\n\n    a::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        a::after {\n            transition-duration: 0s;\n        }\n    }\n\n    a${focusVisible}::after {\n        width: 100%;\n        border-bottom-width: var(--ni-private-focus-indicator-width);\n    }\n\n    :host([aria-current]) a::after {\n        width: 100%;\n        border-bottom-width: var(--ni-private-active-indicator-width);\n    }\n\n    :host([disabled][aria-current]) a::after {\n        border-bottom-color: rgba(${borderHoverColor}, 0.3);\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    [part='end'] {\n        display: none;\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor-tab/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EACH,qBAAqB,EACrB,aAAa,EACb,gBAAgB,EAChB,WAAW,EACX,eAAe,EACf,aAAa,EACb,cAAc,EACd,sBAAsB,EACtB,UAAU,EACV,aAAa,EACb,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;gBAKZ,eAAe;kBACb,aAAa;iBACd,aAAa;;;;;;;;;;;4BAWF,cAAc;;;;4BAId,sBAAsB;;;;;;;;;iBASjC,qBAAqB;;;;;;;mBAOnB,aAAa,IAAI,eAAe;mBAChC,aAAa,MAAM,WAAW;;;;;;;;;;;;yBAYxB,gBAAgB;;4BAEb,UAAU;;;;;;;;;OAS/B,YAAY;;;;;;;;;;;;;;;;;;;;yBAoBM,gBAAgB;;4BAEb,UAAU;;;;;;;;;OAS/B,YAAY;;;;;;;;;;;oCAWiB,gBAAgB;;;;;;;;;;CAUnD,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport { focusVisible } from '../utilities/style/focus';\nimport {\n    bodyDisabledFontColor,\n    bodyFontColor,\n    borderHoverColor,\n    borderWidth,\n    buttonLabelFont,\n    controlHeight,\n    fillHoverColor,\n    fillHoverSelectedColor,\n    smallDelay,\n    mediumPadding,\n    standardPadding\n} from '../theme-provider/design-tokens';\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-current]) {\n        background-color: ${fillHoverSelectedColor};\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        pointer-events: none;\n        display: block;\n        padding: ${mediumPadding} ${standardPadding}\n            calc(${mediumPadding} - ${borderWidth});\n    }\n\n    a::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        a::before {\n            transition-duration: 0s;\n        }\n    }\n\n    a${focusVisible}::before {\n        width: calc(100% - 2 * var(--ni-private-focus-indicator-inset-width));\n    }\n\n    a {\n        display: inline-flex;\n        text-decoration: none;\n        color: inherit;\n        cursor: inherit;\n        outline: none;\n        align-items: center;\n        justify-content: center;\n    }\n\n    a::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        a::after {\n            transition-duration: 0s;\n        }\n    }\n\n    a${focusVisible}::after {\n        width: 100%;\n        border-bottom-width: var(--ni-private-focus-indicator-width);\n    }\n\n    :host([aria-current]) a::after {\n        width: 100%;\n        border-bottom-width: var(--ni-private-active-indicator-width);\n    }\n\n    :host([disabled][aria-current]) a::after {\n        border-bottom-color: rgba(${borderHoverColor}, 0.3);\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    [part='end'] {\n        display: none;\n    }\n`;\n"]}

package/dist/esm/anchor-tabs/styles.js

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 export const styles = css `
     ${display('grid')}
 

package/dist/esm/anchor-tabs/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor-tabs/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;;;CAmBpB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\n\nexport const styles = css`\n    ${display('grid')}\n\n    :host {\n        box-sizing: border-box;\n        grid-template-columns: auto 1fr;\n        grid-template-rows: auto 1fr;\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    .tablist {\n        display: grid;\n        grid-template-rows: auto auto;\n        grid-template-columns: auto;\n        width: max-content;\n        align-self: end;\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor-tabs/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;;;CAmBpB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\n\nexport const styles = css`\n    ${display('grid')}\n\n    :host {\n        box-sizing: border-box;\n        grid-template-columns: auto 1fr;\n        grid-template-rows: auto 1fr;\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    .tablist {\n        display: grid;\n        grid-template-rows: auto auto;\n        grid-template-columns: auto;\n        width: max-content;\n        align-self: end;\n    }\n`;\n"]}

package/dist/esm/anchor-tree-item/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 { bodyFontFamily, bodyFontWeight, bodyFontColor, borderHoverColor, borderWidth, iconSize, fillHoverColor, fillHoverSelectedColor, fillSelectedColor, bodyFontSize, bodyDisabledFontColor, iconColor } from '../theme-provider/design-tokens';
 import { focusVisible } from '../utilities/style/focus';
 import { userSelectNone } from '../utilities/style/user-select';

package/dist/esm/anchor-tree-item/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor-tree-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,cAAc,EACd,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,WAAW,EACX,QAAQ,EACR,cAAc,EACd,sBAAsB,EACtB,iBAAiB,EACjB,YAAY,EACZ,qBAAqB,EACrB,SAAS,EACZ,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;UAGZ;AACE,yEAAyE,CAAC,EAC9E;uBACe,cAAc;uBACd,cAAc;;;;iBAIpB,aAAa;;;;;;iBAMb,qBAAqB;;;;;;;;;;cAUxB,YAAY;kCACQ,WAAW,IAAI,gBAAgB;mBAC9C,WAAW,UAAU,gBAAgB;;;;;;;;uBAQjC,QAAQ;;;;;sBAKT,cAAc;;;;;;;;sBAQd,iBAAiB;;;;sBAIjB,sBAAsB;;;;;;;;;;;;;;;;;qBAiBvB,YAAY;UACvB,cAAc;;+BAEO,QAAQ;;;MAGjC;AACE,wEAAwE,CAAC,EAC7E;;iBAEa,QAAQ;;;;MAInB,CAAA,sEAAuE,EAAE;;;+BAGhD,QAAQ;6BACV,QAAQ;;;;UAI3B,SAAS,CAAC,iBAAiB;iBACpB,QAAQ;kBACP,QAAQ;;;;;;;;;;CAUzB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n    bodyFontFamily,\n    bodyFontWeight,\n    bodyFontColor,\n    borderHoverColor,\n    borderWidth,\n    iconSize,\n    fillHoverColor,\n    fillHoverSelectedColor,\n    fillSelectedColor,\n    bodyFontSize,\n    bodyDisabledFontColor,\n    iconColor\n} from '../theme-provider/design-tokens';\nimport { focusVisible } from '../utilities/style/focus';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n    ${display('block')}\n\n    :host {\n        ${\n            /* don't set font-size here or else it overrides what we set on .items */ ''\n        }\n        font-family: ${bodyFontFamily};\n        font-weight: ${bodyFontWeight};\n        contain: content;\n        position: relative;\n        outline: none;\n        color: ${bodyFontColor};\n        cursor: pointer;\n        --ni-private-tree-item-nested-width: 0;\n    }\n\n    :host([disabled]) {\n        color: ${bodyDisabledFontColor};\n        cursor: default;\n    }\n\n    .control {\n        display: flex;\n        text-decoration: none;\n        color: inherit;\n    }\n\n    .control${focusVisible} {\n        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n        outline: ${borderWidth} solid ${borderHoverColor};\n        outline-offset: -2px;\n    }\n\n    .positioning-region {\n        display: flex;\n        position: relative;\n        box-sizing: border-box;\n        height: calc(${iconSize} * 2);\n        width: 100%;\n    }\n\n    .positioning-region:hover {\n        background: ${fillHoverColor};\n    }\n\n    :host([disabled]) .positioning-region:hover {\n        background: transparent;\n    }\n\n    :host([selected]) .positioning-region {\n        background: ${fillSelectedColor};\n    }\n\n    :host([selected]) .positioning-region:hover {\n        background: ${fillHoverSelectedColor};\n    }\n\n    .positioning-region::before {\n        content: '';\n        display: block;\n        width: var(--ni-private-tree-item-nested-width);\n        flex-shrink: 0;\n    }\n\n    .content-region {\n        display: inline-flex;\n        align-items: center;\n        white-space: nowrap;\n        width: 100%;\n        padding-left: 10px;\n        font: inherit;\n        font-size: ${bodyFontSize};\n        ${userSelectNone}\n        position: relative;\n        margin-inline-start: ${iconSize};\n    }\n\n    ${\n        /* this rule keeps children without an icon text aligned with parents */ ''\n    }\n    [part=\"start\"] {\n        width: ${iconSize};\n        pointer-events: none;\n    }\n\n    ${/* the start class is applied when the corresponding slot is filled */ ''}\n    .start {\n        display: flex;\n        margin-inline-start: ${iconSize};\n        margin-inline-end: ${iconSize};\n    }\n\n    slot[name='start']::slotted(*) {\n        ${iconColor.cssCustomProperty}: currentcolor;\n        width: ${iconSize};\n        height: ${iconSize};\n    }\n\n    .content {\n        pointer-events: none;\n    }\n\n    [part='end'] {\n        display: none;\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor-tree-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,cAAc,EACd,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,WAAW,EACX,QAAQ,EACR,cAAc,EACd,sBAAsB,EACtB,iBAAiB,EACjB,YAAY,EACZ,qBAAqB,EACrB,SAAS,EACZ,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;UAGZ;AACE,yEAAyE,CAAC,EAC9E;uBACe,cAAc;uBACd,cAAc;;;;iBAIpB,aAAa;;;;;;iBAMb,qBAAqB;;;;;;;;;;cAUxB,YAAY;kCACQ,WAAW,IAAI,gBAAgB;mBAC9C,WAAW,UAAU,gBAAgB;;;;;;;;uBAQjC,QAAQ;;;;;sBAKT,cAAc;;;;;;;;sBAQd,iBAAiB;;;;sBAIjB,sBAAsB;;;;;;;;;;;;;;;;;qBAiBvB,YAAY;UACvB,cAAc;;+BAEO,QAAQ;;;MAGjC;AACE,wEAAwE,CAAC,EAC7E;;iBAEa,QAAQ;;;;MAInB,CAAA,sEAAuE,EAAE;;;+BAGhD,QAAQ;6BACV,QAAQ;;;;UAI3B,SAAS,CAAC,iBAAiB;iBACpB,QAAQ;kBACP,QAAQ;;;;;;;;;;CAUzB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    bodyFontFamily,\n    bodyFontWeight,\n    bodyFontColor,\n    borderHoverColor,\n    borderWidth,\n    iconSize,\n    fillHoverColor,\n    fillHoverSelectedColor,\n    fillSelectedColor,\n    bodyFontSize,\n    bodyDisabledFontColor,\n    iconColor\n} from '../theme-provider/design-tokens';\nimport { focusVisible } from '../utilities/style/focus';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n    ${display('block')}\n\n    :host {\n        ${\n            /* don't set font-size here or else it overrides what we set on .items */ ''\n        }\n        font-family: ${bodyFontFamily};\n        font-weight: ${bodyFontWeight};\n        contain: content;\n        position: relative;\n        outline: none;\n        color: ${bodyFontColor};\n        cursor: pointer;\n        --ni-private-tree-item-nested-width: 0;\n    }\n\n    :host([disabled]) {\n        color: ${bodyDisabledFontColor};\n        cursor: default;\n    }\n\n    .control {\n        display: flex;\n        text-decoration: none;\n        color: inherit;\n    }\n\n    .control${focusVisible} {\n        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n        outline: ${borderWidth} solid ${borderHoverColor};\n        outline-offset: -2px;\n    }\n\n    .positioning-region {\n        display: flex;\n        position: relative;\n        box-sizing: border-box;\n        height: calc(${iconSize} * 2);\n        width: 100%;\n    }\n\n    .positioning-region:hover {\n        background: ${fillHoverColor};\n    }\n\n    :host([disabled]) .positioning-region:hover {\n        background: transparent;\n    }\n\n    :host([selected]) .positioning-region {\n        background: ${fillSelectedColor};\n    }\n\n    :host([selected]) .positioning-region:hover {\n        background: ${fillHoverSelectedColor};\n    }\n\n    .positioning-region::before {\n        content: '';\n        display: block;\n        width: var(--ni-private-tree-item-nested-width);\n        flex-shrink: 0;\n    }\n\n    .content-region {\n        display: inline-flex;\n        align-items: center;\n        white-space: nowrap;\n        width: 100%;\n        padding-left: 10px;\n        font: inherit;\n        font-size: ${bodyFontSize};\n        ${userSelectNone}\n        position: relative;\n        margin-inline-start: ${iconSize};\n    }\n\n    ${\n        /* this rule keeps children without an icon text aligned with parents */ ''\n    }\n    [part=\"start\"] {\n        width: ${iconSize};\n        pointer-events: none;\n    }\n\n    ${/* the start class is applied when the corresponding slot is filled */ ''}\n    .start {\n        display: flex;\n        margin-inline-start: ${iconSize};\n        margin-inline-end: ${iconSize};\n    }\n\n    slot[name='start']::slotted(*) {\n        ${iconColor.cssCustomProperty}: currentcolor;\n        width: ${iconSize};\n        height: ${iconSize};\n    }\n\n    .content {\n        pointer-events: none;\n    }\n\n    [part='end'] {\n        display: none;\n    }\n`;\n"]}

package/dist/esm/anchored-region/styles.js

@@ -1,14 +1,17 @@
 import { css } from '@microsoft/fast-element';
 import { ZIndexLevels } from '../utilities/style/types';
+import { display } from '../utilities/style/display';
 export const styles = css `
+    ${display('block')}
+
     :host {
-        /* Avoid using the 'display' helper to customize hidden behavior */
-        display: block;
         contain: layout;
         z-index: ${ZIndexLevels.zIndex1000};
     }
 
+    ${'' /* Override 'display' helper hidden behavior */}
     :host([hidden]) {
+        display: block;
         visibility: hidden;
     }
 `;

package/dist/esm/anchored-region/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchored-region/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;mBAKN,YAAY,CAAC,UAAU;;;;;;CAMzC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { ZIndexLevels } from '../utilities/style/types';\n\nexport const styles = css`\n    :host {\n        /* Avoid using the 'display' helper to customize hidden behavior */\n        display: block;\n        contain: layout;\n        z-index: ${ZIndexLevels.zIndex1000};\n    }\n\n    :host([hidden]) {\n        visibility: hidden;\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchored-region/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;;mBAIH,YAAY,CAAC,UAAU;;;MAGpC,EAAE,CAAC,+CAA+C;;;;;CAKvD,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { ZIndexLevels } from '../utilities/style/types';\nimport { display } from '../utilities/style/display';\n\nexport const styles = css`\n    ${display('block')}\n\n    :host {\n        contain: layout;\n        z-index: ${ZIndexLevels.zIndex1000};\n    }\n\n    ${'' /* Override 'display' helper hidden behavior */}\n    :host([hidden]) {\n        display: block;\n        visibility: hidden;\n    }\n`;\n"]}

package/dist/esm/banner/styles.js

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
 import { BannerFail100DarkUi, Black75, Fail100LightUi, Information100DarkUi, Information100LightUi, Warning100DarkUi, Warning100LightUi, White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { display } from '../utilities/style/display';
 import { actionRgbPartialColor, applicationBackgroundColor, bodyFont, borderHoverColor, buttonLabelFontColor, controlHeight, controlSlimHeight, fillSelectedColor, iconColor, iconSize, linkActiveFontColor, linkDisabledFontColor, linkFontColor, standardPadding } from '../theme-provider/design-tokens';
 import { Theme } from '../theme-provider/types';
 import { hexToRgbaCssColor } from '../utilities/style/colors';

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/banner/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,mBAAmB,EACnB,OAAO,EACP,cAAc,EACd,oBAAoB,EACpB,qBAAqB,EACrB,gBAAgB,EAChB,iBAAiB,EACjB,KAAK,EACR,MAAM,kDAAkD,CAAC;AAE1D,OAAO,EACH,qBAAqB,EACrB,0BAA0B,EAC1B,QAAQ,EACR,gBAAgB,EAChB,oBAAoB,EACpB,aAAa,EACb,iBAAiB,EACjB,iBAAiB,EACjB,SAAS,EACT,QAAQ,EACR,mBAAmB,EACnB,qBAAqB,EACrB,aAAa,EACb,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;gBAGL,QAAQ;;;;iBAIP,KAAK;UACZ,SAAS,CAAC,iBAAiB,KAAK,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAkC7D,gBAAgB;;;;kBAIR,aAAa;;;;;;;;;;;uBAWR,eAAe;;;;;UAK5B,aAAa,CAAC,iBAAiB,KAAK,KAAK;UACzC,qBAAqB,CAAC,iBAAiB,KAAK,KAAK;UACjD,mBAAmB,CAAC,iBAAiB,KAAK,iBAAiB,CACzD,KAAK,EACL,GAAG,CACN;;;;;UAKC,aAAa,CAAC,iBAAiB,KAAK,iBAAiB;UACrD,oBAAoB,CAAC,iBAAiB,KAAK,KAAK;UAChD,iBAAiB,CAAC,iBAAiB,KAAK,iBAAiB,CACvD,KAAK,EACL,GAAG,CACN;UACC,gBAAgB,CAAC,iBAAiB,KAAK,KAAK;;;;UAI5C,qBAAqB,CAAC,iBAAiB,KAAK,KAAK;;;;;;;;;;UAUjD,aAAa,CAAC,iBAAiB;UAC/B,QAAQ,CAAC,iBAAiB;UAC1B,oBAAoB,CAAC,iBAAiB,KAAK,KAAK;UAChD,gBAAgB,CAAC,iBAAiB;UAClC,iBAAiB,CAAC,iBAAiB,KAAK,iBAAiB,CACvD,KAAK,EACL,GAAG,CACN;;;;6BAIoB,KAAK;;;;sBAIZ,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;CAElD,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,OAAO;;;;8BAIP,cAAc;;;;8BAId,iBAAiB;;;;8BAIjB,qBAAqB;;SAE1C,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;8BAEmB,OAAO;;;;8BAIP,mBAAmB;;;;8BAInB,gBAAgB;;;;8BAIhB,oBAAoB;;SAEzC,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,0BAA0B;;;;8BAI1B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;SAElD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n    BannerFail100DarkUi,\n    Black75,\n    Fail100LightUi,\n    Information100DarkUi,\n    Information100LightUi,\n    Warning100DarkUi,\n    Warning100LightUi,\n    White\n} from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\n\nimport {\n    actionRgbPartialColor,\n    applicationBackgroundColor,\n    bodyFont,\n    borderHoverColor,\n    buttonLabelFontColor,\n    controlHeight,\n    controlSlimHeight,\n    fillSelectedColor,\n    iconColor,\n    iconSize,\n    linkActiveFontColor,\n    linkDisabledFontColor,\n    linkFontColor,\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 { accessiblyHidden } from '../utilities/style/accessibly-hidden';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        font: ${bodyFont};\n        font-size: 12.8px;\n        align-items: top;\n        overflow: hidden;\n        color: ${White};\n        ${iconColor.cssCustomProperty}: ${hexToRgbaCssColor(White, 0.6)};\n    }\n\n    :host(:not([open])) {\n        display: none;\n    }\n\n    .container {\n        display: flex;\n        width: 100%;\n    }\n\n    .icon {\n        width: 48px;\n        display: flex;\n        justify-content: center;\n        margin-top: 8px;\n        flex: 0 0 auto;\n    }\n\n    .text {\n        display: inline;\n        margin-top: 7px;\n        margin-bottom: 7px;\n    }\n\n    slot[name='title'] {\n        display: inline;\n        font-weight: bold;\n        padding-right: 8px;\n        white-space: nowrap;\n    }\n\n    :host([title-hidden]) slot[name='title'] {\n        ${accessiblyHidden}\n    }\n\n    .controls {\n        height: ${controlHeight};\n        margin-left: auto;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        align-self: flex-start;\n    }\n\n    slot[name='action'] {\n        display: flex;\n        align-content: center;\n        margin-left: ${standardPadding};\n        white-space: nowrap;\n    }\n\n    slot[name='action']::slotted(nimble-anchor) {\n        ${linkFontColor.cssCustomProperty}: ${White};\n        ${linkDisabledFontColor.cssCustomProperty}: ${White};\n        ${linkActiveFontColor.cssCustomProperty}: ${hexToRgbaCssColor(\n            White,\n            0.6\n        )};\n        font-size: 12.8px;\n    }\n\n    slot[name='action']::slotted(nimble-button) {\n        ${controlHeight.cssCustomProperty}: ${controlSlimHeight};\n        ${buttonLabelFontColor.cssCustomProperty}: ${White};\n        ${fillSelectedColor.cssCustomProperty}: ${hexToRgbaCssColor(\n            White,\n            0.2\n        )};\n        ${borderHoverColor.cssCustomProperty}: ${White};\n    }\n\n    slot[name='action']::slotted(nimble-button[appearance='outline']) {\n        ${actionRgbPartialColor.cssCustomProperty}: ${White}\n    }\n\n    .dismiss {\n        width: 48px;\n        display: flex;\n        justify-content: center;\n    }\n\n    .dismiss nimble-button {\n        ${controlHeight.cssCustomProperty}: 16px;\n        ${iconSize.cssCustomProperty}: 14px;\n        ${buttonLabelFontColor.cssCustomProperty}: ${White};\n        ${borderHoverColor.cssCustomProperty}: transparent;\n        ${fillSelectedColor.cssCustomProperty}: ${hexToRgbaCssColor(\n            White,\n            0.2\n        )};\n    }\n\n    .dismiss nimble-button:focus-within {\n        outline: 2px solid ${White};\n    }\n\n    .dismiss nimble-button:hover {\n        background: ${hexToRgbaCssColor(White, 0.2)};\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.light,\n        css`\n            :host {\n                background: ${Black75};\n            }\n\n            :host([severity='error']) {\n                background: ${Fail100LightUi};\n            }\n\n            :host([severity='warning']) {\n                background: ${Warning100LightUi};\n            }\n\n            :host([severity='information']) {\n                background: ${Information100LightUi};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.dark,\n        css`\n            :host {\n                background: ${Black75};\n            }\n\n            :host([severity='error']) {\n                background: ${BannerFail100DarkUi};\n            }\n\n            :host([severity='warning']) {\n                background: ${Warning100DarkUi};\n            }\n\n            :host([severity='information']) {\n                background: ${Information100DarkUi};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            :host {\n                background: ${applicationBackgroundColor};\n            }\n\n            .container {\n                background: ${hexToRgbaCssColor(White, 0.3)};\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/banner/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,mBAAmB,EACnB,OAAO,EACP,cAAc,EACd,oBAAoB,EACpB,qBAAqB,EACrB,gBAAgB,EAChB,iBAAiB,EACjB,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,0BAA0B,EAC1B,QAAQ,EACR,gBAAgB,EAChB,oBAAoB,EACpB,aAAa,EACb,iBAAiB,EACjB,iBAAiB,EACjB,SAAS,EACT,QAAQ,EACR,mBAAmB,EACnB,qBAAqB,EACrB,aAAa,EACb,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;gBAGL,QAAQ;;;;iBAIP,KAAK;UACZ,SAAS,CAAC,iBAAiB,KAAK,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAkC7D,gBAAgB;;;;kBAIR,aAAa;;;;;;;;;;;uBAWR,eAAe;;;;;UAK5B,aAAa,CAAC,iBAAiB,KAAK,KAAK;UACzC,qBAAqB,CAAC,iBAAiB,KAAK,KAAK;UACjD,mBAAmB,CAAC,iBAAiB,KAAK,iBAAiB,CACzD,KAAK,EACL,GAAG,CACN;;;;;UAKC,aAAa,CAAC,iBAAiB,KAAK,iBAAiB;UACrD,oBAAoB,CAAC,iBAAiB,KAAK,KAAK;UAChD,iBAAiB,CAAC,iBAAiB,KAAK,iBAAiB,CACvD,KAAK,EACL,GAAG,CACN;UACC,gBAAgB,CAAC,iBAAiB,KAAK,KAAK;;;;UAI5C,qBAAqB,CAAC,iBAAiB,KAAK,KAAK;;;;;;;;;;UAUjD,aAAa,CAAC,iBAAiB;UAC/B,QAAQ,CAAC,iBAAiB;UAC1B,oBAAoB,CAAC,iBAAiB,KAAK,KAAK;UAChD,gBAAgB,CAAC,iBAAiB;UAClC,iBAAiB,CAAC,iBAAiB,KAAK,iBAAiB,CACvD,KAAK,EACL,GAAG,CACN;;;;6BAIoB,KAAK;;;;sBAIZ,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;CAElD,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,OAAO;;;;8BAIP,cAAc;;;;8BAId,iBAAiB;;;;8BAIjB,qBAAqB;;SAE1C,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;8BAEmB,OAAO;;;;8BAIP,mBAAmB;;;;8BAInB,gBAAgB;;;;8BAIhB,oBAAoB;;SAEzC,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,0BAA0B;;;;8BAI1B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;SAElD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport {\n    BannerFail100DarkUi,\n    Black75,\n    Fail100LightUi,\n    Information100DarkUi,\n    Information100LightUi,\n    Warning100DarkUi,\n    Warning100LightUi,\n    White\n} from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../utilities/style/display';\n\nimport {\n    actionRgbPartialColor,\n    applicationBackgroundColor,\n    bodyFont,\n    borderHoverColor,\n    buttonLabelFontColor,\n    controlHeight,\n    controlSlimHeight,\n    fillSelectedColor,\n    iconColor,\n    iconSize,\n    linkActiveFontColor,\n    linkDisabledFontColor,\n    linkFontColor,\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 { accessiblyHidden } from '../utilities/style/accessibly-hidden';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        font: ${bodyFont};\n        font-size: 12.8px;\n        align-items: top;\n        overflow: hidden;\n        color: ${White};\n        ${iconColor.cssCustomProperty}: ${hexToRgbaCssColor(White, 0.6)};\n    }\n\n    :host(:not([open])) {\n        display: none;\n    }\n\n    .container {\n        display: flex;\n        width: 100%;\n    }\n\n    .icon {\n        width: 48px;\n        display: flex;\n        justify-content: center;\n        margin-top: 8px;\n        flex: 0 0 auto;\n    }\n\n    .text {\n        display: inline;\n        margin-top: 7px;\n        margin-bottom: 7px;\n    }\n\n    slot[name='title'] {\n        display: inline;\n        font-weight: bold;\n        padding-right: 8px;\n        white-space: nowrap;\n    }\n\n    :host([title-hidden]) slot[name='title'] {\n        ${accessiblyHidden}\n    }\n\n    .controls {\n        height: ${controlHeight};\n        margin-left: auto;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        align-self: flex-start;\n    }\n\n    slot[name='action'] {\n        display: flex;\n        align-content: center;\n        margin-left: ${standardPadding};\n        white-space: nowrap;\n    }\n\n    slot[name='action']::slotted(nimble-anchor) {\n        ${linkFontColor.cssCustomProperty}: ${White};\n        ${linkDisabledFontColor.cssCustomProperty}: ${White};\n        ${linkActiveFontColor.cssCustomProperty}: ${hexToRgbaCssColor(\n            White,\n            0.6\n        )};\n        font-size: 12.8px;\n    }\n\n    slot[name='action']::slotted(nimble-button) {\n        ${controlHeight.cssCustomProperty}: ${controlSlimHeight};\n        ${buttonLabelFontColor.cssCustomProperty}: ${White};\n        ${fillSelectedColor.cssCustomProperty}: ${hexToRgbaCssColor(\n            White,\n            0.2\n        )};\n        ${borderHoverColor.cssCustomProperty}: ${White};\n    }\n\n    slot[name='action']::slotted(nimble-button[appearance='outline']) {\n        ${actionRgbPartialColor.cssCustomProperty}: ${White}\n    }\n\n    .dismiss {\n        width: 48px;\n        display: flex;\n        justify-content: center;\n    }\n\n    .dismiss nimble-button {\n        ${controlHeight.cssCustomProperty}: 16px;\n        ${iconSize.cssCustomProperty}: 14px;\n        ${buttonLabelFontColor.cssCustomProperty}: ${White};\n        ${borderHoverColor.cssCustomProperty}: transparent;\n        ${fillSelectedColor.cssCustomProperty}: ${hexToRgbaCssColor(\n            White,\n            0.2\n        )};\n    }\n\n    .dismiss nimble-button:focus-within {\n        outline: 2px solid ${White};\n    }\n\n    .dismiss nimble-button:hover {\n        background: ${hexToRgbaCssColor(White, 0.2)};\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.light,\n        css`\n            :host {\n                background: ${Black75};\n            }\n\n            :host([severity='error']) {\n                background: ${Fail100LightUi};\n            }\n\n            :host([severity='warning']) {\n                background: ${Warning100LightUi};\n            }\n\n            :host([severity='information']) {\n                background: ${Information100LightUi};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.dark,\n        css`\n            :host {\n                background: ${Black75};\n            }\n\n            :host([severity='error']) {\n                background: ${BannerFail100DarkUi};\n            }\n\n            :host([severity='warning']) {\n                background: ${Warning100DarkUi};\n            }\n\n            :host([severity='information']) {\n                background: ${Information100DarkUi};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            :host {\n                background: ${applicationBackgroundColor};\n            }\n\n            .container {\n                background: ${hexToRgbaCssColor(White, 0.3)};\n            }\n        `\n    )\n);\n"]}

package/dist/esm/breadcrumb/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 { bodyEmphasizedFont, linkActiveFontColor, linkActiveProminentFontColor, linkFont, linkFontColor, linkProminentFontColor } from '../theme-provider/design-tokens';
 export const styles = css `
     ${display('inline-block')}

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/breadcrumb/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,kBAAkB,EAClB,mBAAmB,EACnB,4BAA4B,EAC5B,QAAQ,EACR,aAAa,EACb,sBAAsB,EACzB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;;gBAIb,QAAQ;mDAC2B,aAAa;0DACN,mBAAmB;;;;mDAI1B,sBAAsB;0DACf,4BAA4B;;;;;;;;;;;;;gBAatE,kBAAkB;;CAEjC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n    bodyEmphasizedFont,\n    linkActiveFontColor,\n    linkActiveProminentFontColor,\n    linkFont,\n    linkFontColor,\n    linkProminentFontColor\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: ${linkFont};\n        --ni-private-breadcrumb-link-font-color: ${linkFontColor};\n        --ni-private-breadcrumb-link-active-font-color: ${linkActiveFontColor};\n    }\n\n    :host([appearance='prominent']) {\n        --ni-private-breadcrumb-link-font-color: ${linkProminentFontColor};\n        --ni-private-breadcrumb-link-active-font-color: ${linkActiveProminentFontColor};\n    }\n\n    .list {\n        display: flex;\n        flex-wrap: wrap;\n    }\n\n    ::slotted(*:first-child) {\n        padding-left: 0px;\n    }\n\n    ::slotted(*:not([href]):last-child) {\n        font: ${bodyEmphasizedFont};\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/breadcrumb/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,kBAAkB,EAClB,mBAAmB,EACnB,4BAA4B,EAC5B,QAAQ,EACR,aAAa,EACb,sBAAsB,EACzB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;;gBAIb,QAAQ;mDAC2B,aAAa;0DACN,mBAAmB;;;;mDAI1B,sBAAsB;0DACf,4BAA4B;;;;;;;;;;;;;gBAatE,kBAAkB;;CAEjC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    bodyEmphasizedFont,\n    linkActiveFontColor,\n    linkActiveProminentFontColor,\n    linkFont,\n    linkFontColor,\n    linkProminentFontColor\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: ${linkFont};\n        --ni-private-breadcrumb-link-font-color: ${linkFontColor};\n        --ni-private-breadcrumb-link-active-font-color: ${linkActiveFontColor};\n    }\n\n    :host([appearance='prominent']) {\n        --ni-private-breadcrumb-link-font-color: ${linkProminentFontColor};\n        --ni-private-breadcrumb-link-active-font-color: ${linkActiveProminentFontColor};\n    }\n\n    .list {\n        display: flex;\n        flex-wrap: wrap;\n    }\n\n    ::slotted(*:first-child) {\n        padding-left: 0px;\n    }\n\n    ::slotted(*:not([href]):last-child) {\n        font: ${bodyEmphasizedFont};\n    }\n`;\n"]}

package/dist/esm/breadcrumb-item/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 { bodyFontColor, borderHoverColor, borderWidth, controlHeight, iconSize, linkFont, placeholderFontColor } from '../theme-provider/design-tokens';
 import { focusVisible } from '../utilities/style/focus';
 export const styles = css `

package/dist/esm/breadcrumb-item/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/breadcrumb-item/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,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,oBAAoB,EACvB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;kBAGV,aAAa;;mCAEI,WAAW;;UAEpC;AACE;mDACmD,CAAC,EACxD;iBACS,aAAa;gBACd,QAAQ;;;;;;;;;;;;;kBAaN,WAAW;oCACO,WAAW;;;;;;;;cAQjC,YAAY;kBACR,WAAW,UAAU,gBAAgB;6BAC1B,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA2B5B,QAAQ;kBACP,QAAQ;gBACV,oBAAoB;;CAEnC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n    bodyFontColor,\n    borderHoverColor,\n    borderWidth,\n    controlHeight,\n    iconSize,\n    linkFont,\n    placeholderFontColor\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        height: ${controlHeight};\n        box-sizing: border-box;\n        padding-left: calc(4px - ${borderWidth});\n\n        ${\n            /* When href removed the .control element is also removed\n             so this becomes the fallback color for the slot */ ''\n        }\n        color: ${bodyFontColor};\n        font: ${linkFont};\n    }\n\n    .listitem {\n        display: flex;\n        align-items: center;\n    }\n\n    .control {\n        color: var(--ni-private-breadcrumb-link-font-color);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border: ${borderWidth} solid transparent;\n        padding-right: calc(4px - ${borderWidth});\n        text-decoration: none;\n    }\n\n    .control:hover {\n        text-decoration: underline;\n    }\n\n    .control${focusVisible} {\n        border: ${borderWidth} solid ${borderHoverColor};\n        outline: 2px solid ${borderHoverColor};\n        outline-offset: 1px;\n    }\n\n    .control:active {\n        color: var(--ni-private-breadcrumb-link-active-font-color);\n        text-decoration: none;\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    .content {\n        pointer-events: none;\n    }\n\n    [part='end'] {\n        display: none;\n    }\n\n    slot[name='separator'] {\n        display: flex;\n        align-items: center;\n    }\n\n    slot[name='separator'] svg {\n        width: ${iconSize};\n        height: ${iconSize};\n        fill: ${placeholderFontColor};\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/breadcrumb-item/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,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,oBAAoB,EACvB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;kBAGV,aAAa;;mCAEI,WAAW;;UAEpC;AACE;mDACmD,CAAC,EACxD;iBACS,aAAa;gBACd,QAAQ;;;;;;;;;;;;;kBAaN,WAAW;oCACO,WAAW;;;;;;;;cAQjC,YAAY;kBACR,WAAW,UAAU,gBAAgB;6BAC1B,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA2B5B,QAAQ;kBACP,QAAQ;gBACV,oBAAoB;;CAEnC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    bodyFontColor,\n    borderHoverColor,\n    borderWidth,\n    controlHeight,\n    iconSize,\n    linkFont,\n    placeholderFontColor\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        height: ${controlHeight};\n        box-sizing: border-box;\n        padding-left: calc(4px - ${borderWidth});\n\n        ${\n            /* When href removed the .control element is also removed\n             so this becomes the fallback color for the slot */ ''\n        }\n        color: ${bodyFontColor};\n        font: ${linkFont};\n    }\n\n    .listitem {\n        display: flex;\n        align-items: center;\n    }\n\n    .control {\n        color: var(--ni-private-breadcrumb-link-font-color);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border: ${borderWidth} solid transparent;\n        padding-right: calc(4px - ${borderWidth});\n        text-decoration: none;\n    }\n\n    .control:hover {\n        text-decoration: underline;\n    }\n\n    .control${focusVisible} {\n        border: ${borderWidth} solid ${borderHoverColor};\n        outline: 2px solid ${borderHoverColor};\n        outline-offset: 1px;\n    }\n\n    .control:active {\n        color: var(--ni-private-breadcrumb-link-active-font-color);\n        text-decoration: none;\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    .content {\n        pointer-events: none;\n    }\n\n    [part='end'] {\n        display: none;\n    }\n\n    slot[name='separator'] {\n        display: flex;\n        align-items: center;\n    }\n\n    slot[name='separator'] svg {\n        width: ${iconSize};\n        height: ${iconSize};\n        fill: ${placeholderFontColor};\n    }\n`;\n"]}

package/dist/esm/card/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 { bodyEmphasizedFontWeight, bodyFont, bodyFontColor, cardBorderColor, largePadding, subtitleFontColor, subtitlePlus1Font } from '../theme-provider/design-tokens';
 export const styles = css `
     ${display('flex')}

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/card/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,wBAAwB,EACxB,QAAQ,EACR,aAAa,EACb,eAAe,EACf,YAAY,EACZ,iBAAiB,EACjB,iBAAiB,EACpB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;eAIN,YAAY;mBACR,YAAY;4BACH,eAAe;;gBAE3B,QAAQ;iBACP,aAAa;;;;;;;;gBAQd,iBAAiB;uBACV,wBAAwB;iBAC9B,iBAAiB;;CAEjC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n    bodyEmphasizedFontWeight,\n    bodyFont,\n    bodyFontColor,\n    cardBorderColor,\n    largePadding,\n    subtitleFontColor,\n    subtitlePlus1Font\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        flex-direction: column;\n        gap: ${largePadding};\n        padding: ${largePadding};\n        border: 2px solid ${cardBorderColor};\n        border-radius: 8px;\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n    }\n\n    section {\n        display: contents;\n    }\n\n    slot[name='title'] {\n        font: ${subtitlePlus1Font};\n        font-weight: ${bodyEmphasizedFontWeight};\n        color: ${subtitleFontColor};\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/card/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,wBAAwB,EACxB,QAAQ,EACR,aAAa,EACb,eAAe,EACf,YAAY,EACZ,iBAAiB,EACjB,iBAAiB,EACpB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;eAIN,YAAY;mBACR,YAAY;4BACH,eAAe;;gBAE3B,QAAQ;iBACP,aAAa;;;;;;;;gBAQd,iBAAiB;uBACV,wBAAwB;iBAC9B,iBAAiB;;CAEjC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    bodyEmphasizedFontWeight,\n    bodyFont,\n    bodyFontColor,\n    cardBorderColor,\n    largePadding,\n    subtitleFontColor,\n    subtitlePlus1Font\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        flex-direction: column;\n        gap: ${largePadding};\n        padding: ${largePadding};\n        border: 2px solid ${cardBorderColor};\n        border-radius: 8px;\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n    }\n\n    section {\n        display: contents;\n    }\n\n    slot[name='title'] {\n        font: ${subtitlePlus1Font};\n        font-weight: ${bodyEmphasizedFontWeight};\n        color: ${subtitleFontColor};\n    }\n`;\n"]}

package/dist/esm/card-button/styles.js

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { Black, Black15, Black91, White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 import { focusVisible } from '../utilities/style/focus';
 import { borderWidth, smallDelay, buttonLabelFont, buttonLabelFontColor, borderHoverColor } from '../theme-provider/design-tokens';
 import { themeBehavior } from '../utilities/style/theme';

package/dist/esm/card-button/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/card-button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,KAAK,EACL,OAAO,EACP,OAAO,EACP,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,WAAW,EACX,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,gBAAgB,EACnB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;iBAIX,oBAAoB;gBACrB,eAAe;;;;;iCAKE,UAAU;;;;;;;;;;kCAUT,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;;;;;;;;;;;;;;;kBAgB7C,WAAW;;;;;;;;;;;;;;cAcf,YAAY;kCACQ,WAAW,IAAI,gBAAgB;wBACzC,gBAAgB;mBACrB,WAAW,UAAU,gBAAgB;;;;;;;;;;;;;;;;gCAgBxB,YAAY;wBACpB,gBAAgB;;;;;;;gCAOR,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6B3C,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;mEAEwD,iBAAiB,CAChE,KAAK,EACL,GAAG,CACN;oEACmD,KAAK;gEACT,iBAAiB,CAC7D,OAAO,EACP,GAAG,CACN;kEACiD,iBAAiB,CAC/D,OAAO,EACP,GAAG,CACN;;SAER,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;mEAEwD,iBAAiB,CAChE,OAAO,EACP,IAAI,CACP;oEACmD,iBAAiB,CACjE,OAAO,EACP,IAAI,CACP;gEAC+C,iBAAiB,CAC7D,OAAO,EACP,GAAG,CACN;kEACiD,OAAO;;SAEhE,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;mEAEwD,iBAAiB,CAChE,KAAK,EACL,IAAI,CACP;oEACmD,iBAAiB,CACjE,KAAK,EACL,IAAI,CACP;gEAC+C,iBAAiB,CAC7D,KAAK,EACL,GAAG,CACN;kEACiD,iBAAiB,CAC/D,KAAK,EACL,GAAG,CACN;;SAER,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport {\n    Black,\n    Black15,\n    Black91,\n    White\n} from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '@microsoft/fast-foundation';\nimport { focusVisible } from '../utilities/style/focus';\n\nimport {\n    borderWidth,\n    smallDelay,\n    buttonLabelFont,\n    buttonLabelFontColor,\n    borderHoverColor\n} from '../theme-provider/design-tokens';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\nimport { Theme } from '../theme-provider/types';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        background-color: transparent;\n        color: ${buttonLabelFontColor};\n        font: ${buttonLabelFont};\n        cursor: pointer;\n        outline: none;\n        border: none;\n        box-sizing: border-box;\n        transition: box-shadow ${smallDelay};\n    }\n\n    @media (prefers-reduced-motion) {\n        :host {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(:hover) {\n        box-shadow: 0px 1px 4px ${hexToRgbaCssColor(Black, 0.3)};\n    }\n\n    :host(:active) {\n        box-shadow: none;\n    }\n\n    :host([disabled]) {\n        cursor: default;\n        box-shadow: none;\n    }\n\n    .control {\n        background-color: transparent;\n        height: 100%;\n        width: 100%;\n        border: ${borderWidth} solid transparent;\n        color: inherit;\n        border-radius: inherit;\n        fill: inherit;\n        cursor: inherit;\n        font: inherit;\n        outline: none;\n        padding: 0px;\n    }\n\n    .control:hover {\n        background: var(--ni-private-card-button-background-hover-color);\n    }\n\n    .control${focusVisible} {\n        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n        border-color: ${borderHoverColor};\n        outline: ${borderWidth} solid ${borderHoverColor};\n        outline-offset: -4px;\n    }\n\n    .control:active {\n        background: var(--ni-private-card-button-background-active-color);\n        border-color: var(--ni-private-card-button-border-active-color);\n        outline: none;\n        box-shadow: none;\n    }\n\n    :host([selected]) .control {\n        background: var(--ni-private-card-button-background-active-color);\n        border-color: var(--ni-private-card-button-border-selected-color);\n    }\n\n    :host([selected]) .control${focusVisible} {\n        border-color: ${borderHoverColor};\n    }\n\n    :host([selected]) .control:active {\n        border-color: var(--ni-private-card-button-border-active-color);\n    }\n\n    :host([selected]) .control${focusVisible}:active {\n        outline: none;\n        box-shadow: none;\n    }\n\n    .control[disabled] {\n        background: transparent;\n        opacity: 0.3;\n    }\n\n    .control[disabled]:active {\n        border-color: transparent;\n    }\n\n    :host([selected]) .control[disabled]:active {\n        border-color: var(--ni-private-card-button-border-selected-color);\n    }\n\n    .content {\n        display: contents;\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    [part='end'] {\n        display: none;\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.light,\n        css`\n            :host {\n                --ni-private-card-button-background-hover-color: ${hexToRgbaCssColor(\n                    White,\n                    0.3\n                )};\n                --ni-private-card-button-background-active-color: ${White};\n                --ni-private-card-button-border-active-color: ${hexToRgbaCssColor(\n                    Black91,\n                    0.2\n                )};\n                --ni-private-card-button-border-selected-color: ${hexToRgbaCssColor(\n                    Black91,\n                    0.6\n                )};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.dark,\n        css`\n            :host {\n                --ni-private-card-button-background-hover-color: ${hexToRgbaCssColor(\n                    Black15,\n                    0.07\n                )};\n                --ni-private-card-button-background-active-color: ${hexToRgbaCssColor(\n                    Black15,\n                    0.15\n                )};\n                --ni-private-card-button-border-active-color: ${hexToRgbaCssColor(\n                    Black15,\n                    0.2\n                )};\n                --ni-private-card-button-border-selected-color: ${Black15};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            :host {\n                --ni-private-card-button-background-hover-color: ${hexToRgbaCssColor(\n                    White,\n                    0.07\n                )};\n                --ni-private-card-button-background-active-color: ${hexToRgbaCssColor(\n                    White,\n                    0.15\n                )};\n                --ni-private-card-button-border-active-color: ${hexToRgbaCssColor(\n                    White,\n                    0.2\n                )};\n                --ni-private-card-button-border-selected-color: ${hexToRgbaCssColor(\n                    White,\n                    0.6\n                )};\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/card-button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,KAAK,EACL,OAAO,EACP,OAAO,EACP,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,WAAW,EACX,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,gBAAgB,EACnB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;iBAIX,oBAAoB;gBACrB,eAAe;;;;;iCAKE,UAAU;;;;;;;;;;kCAUT,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;;;;;;;;;;;;;;;kBAgB7C,WAAW;;;;;;;;;;;;;;cAcf,YAAY;kCACQ,WAAW,IAAI,gBAAgB;wBACzC,gBAAgB;mBACrB,WAAW,UAAU,gBAAgB;;;;;;;;;;;;;;;;gCAgBxB,YAAY;wBACpB,gBAAgB;;;;;;;gCAOR,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6B3C,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;mEAEwD,iBAAiB,CAChE,KAAK,EACL,GAAG,CACN;oEACmD,KAAK;gEACT,iBAAiB,CAC7D,OAAO,EACP,GAAG,CACN;kEACiD,iBAAiB,CAC/D,OAAO,EACP,GAAG,CACN;;SAER,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;mEAEwD,iBAAiB,CAChE,OAAO,EACP,IAAI,CACP;oEACmD,iBAAiB,CACjE,OAAO,EACP,IAAI,CACP;gEAC+C,iBAAiB,CAC7D,OAAO,EACP,GAAG,CACN;kEACiD,OAAO;;SAEhE,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;mEAEwD,iBAAiB,CAChE,KAAK,EACL,IAAI,CACP;oEACmD,iBAAiB,CACjE,KAAK,EACL,IAAI,CACP;gEAC+C,iBAAiB,CAC7D,KAAK,EACL,GAAG,CACN;kEACiD,iBAAiB,CAC/D,KAAK,EACL,GAAG,CACN;;SAER,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport {\n    Black,\n    Black15,\n    Black91,\n    White\n} from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../utilities/style/display';\nimport { focusVisible } from '../utilities/style/focus';\n\nimport {\n    borderWidth,\n    smallDelay,\n    buttonLabelFont,\n    buttonLabelFontColor,\n    borderHoverColor\n} from '../theme-provider/design-tokens';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\nimport { Theme } from '../theme-provider/types';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        background-color: transparent;\n        color: ${buttonLabelFontColor};\n        font: ${buttonLabelFont};\n        cursor: pointer;\n        outline: none;\n        border: none;\n        box-sizing: border-box;\n        transition: box-shadow ${smallDelay};\n    }\n\n    @media (prefers-reduced-motion) {\n        :host {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(:hover) {\n        box-shadow: 0px 1px 4px ${hexToRgbaCssColor(Black, 0.3)};\n    }\n\n    :host(:active) {\n        box-shadow: none;\n    }\n\n    :host([disabled]) {\n        cursor: default;\n        box-shadow: none;\n    }\n\n    .control {\n        background-color: transparent;\n        height: 100%;\n        width: 100%;\n        border: ${borderWidth} solid transparent;\n        color: inherit;\n        border-radius: inherit;\n        fill: inherit;\n        cursor: inherit;\n        font: inherit;\n        outline: none;\n        padding: 0px;\n    }\n\n    .control:hover {\n        background: var(--ni-private-card-button-background-hover-color);\n    }\n\n    .control${focusVisible} {\n        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n        border-color: ${borderHoverColor};\n        outline: ${borderWidth} solid ${borderHoverColor};\n        outline-offset: -4px;\n    }\n\n    .control:active {\n        background: var(--ni-private-card-button-background-active-color);\n        border-color: var(--ni-private-card-button-border-active-color);\n        outline: none;\n        box-shadow: none;\n    }\n\n    :host([selected]) .control {\n        background: var(--ni-private-card-button-background-active-color);\n        border-color: var(--ni-private-card-button-border-selected-color);\n    }\n\n    :host([selected]) .control${focusVisible} {\n        border-color: ${borderHoverColor};\n    }\n\n    :host([selected]) .control:active {\n        border-color: var(--ni-private-card-button-border-active-color);\n    }\n\n    :host([selected]) .control${focusVisible}:active {\n        outline: none;\n        box-shadow: none;\n    }\n\n    .control[disabled] {\n        background: transparent;\n        opacity: 0.3;\n    }\n\n    .control[disabled]:active {\n        border-color: transparent;\n    }\n\n    :host([selected]) .control[disabled]:active {\n        border-color: var(--ni-private-card-button-border-selected-color);\n    }\n\n    .content {\n        display: contents;\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    [part='end'] {\n        display: none;\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.light,\n        css`\n            :host {\n                --ni-private-card-button-background-hover-color: ${hexToRgbaCssColor(\n                    White,\n                    0.3\n                )};\n                --ni-private-card-button-background-active-color: ${White};\n                --ni-private-card-button-border-active-color: ${hexToRgbaCssColor(\n                    Black91,\n                    0.2\n                )};\n                --ni-private-card-button-border-selected-color: ${hexToRgbaCssColor(\n                    Black91,\n                    0.6\n                )};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.dark,\n        css`\n            :host {\n                --ni-private-card-button-background-hover-color: ${hexToRgbaCssColor(\n                    Black15,\n                    0.07\n                )};\n                --ni-private-card-button-background-active-color: ${hexToRgbaCssColor(\n                    Black15,\n                    0.15\n                )};\n                --ni-private-card-button-border-active-color: ${hexToRgbaCssColor(\n                    Black15,\n                    0.2\n                )};\n                --ni-private-card-button-border-selected-color: ${Black15};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            :host {\n                --ni-private-card-button-background-hover-color: ${hexToRgbaCssColor(\n                    White,\n                    0.07\n                )};\n                --ni-private-card-button-background-active-color: ${hexToRgbaCssColor(\n                    White,\n                    0.15\n                )};\n                --ni-private-card-button-border-active-color: ${hexToRgbaCssColor(\n                    White,\n                    0.2\n                )};\n                --ni-private-card-button-border-selected-color: ${hexToRgbaCssColor(\n                    White,\n                    0.6\n                )};\n            }\n        `\n    )\n);\n"]}

package/dist/esm/checkbox/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 { focusVisible } from '../utilities/style/focus';
 import { borderColor, borderHoverColor, borderRgbPartialColor, bodyFontColor, bodyDisabledFontColor, controlHeight, iconSize, borderWidth, smallDelay, bodyFont } from '../theme-provider/design-tokens';
 import { userSelectNone } from '../utilities/style/user-select';

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/checkbox/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,WAAW,EACX,gBAAgB,EAChB,qBAAqB,EACrB,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,QAAQ,EACR,WAAW,EACX,UAAU,EACV,QAAQ,EACX,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;gBAGZ,QAAQ;;;;UAId,cAAc;;;;;;;;sBAQF,aAAa;uBACZ,aAAa;;;kBAGlB,WAAW,UAAU,WAAW;;;;;iCAKjB,UAAU;UACjC;AACE;;;GAGG,CAAC,EACR;;;;;;;;;;;iCAWyB,qBAAqB;6BACzB,qBAAqB;;;;wBAI1B,gBAAgB;kCACN,WAAW,IAAI,gBAAgB;;;YAGrD,YAAY;wBACA,gBAAgB;6BACX,gBAAgB;;;;;;iBAM5B,aAAa;;;;;;iBAMb,qBAAqB;;;;;;;;;kBASpB,QAAQ;iBACT,QAAQ;;;;;;;;;gBAST,WAAW;;;;qBAIN,qBAAqB;;;;kBAIxB,QAAQ;iBACT,QAAQ;;;;;;;;;gBAST,WAAW;;;;qBAIN,qBAAqB;;CAEzC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport { focusVisible } from '../utilities/style/focus';\n\nimport {\n    borderColor,\n    borderHoverColor,\n    borderRgbPartialColor,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    controlHeight,\n    iconSize,\n    borderWidth,\n    smallDelay,\n    bodyFont\n} from '../theme-provider/design-tokens';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        font: ${bodyFont};\n        align-items: center;\n        cursor: pointer;\n        outline: none;\n        ${userSelectNone}\n    }\n\n    :host([disabled]) {\n        cursor: default;\n    }\n\n    .control {\n        width: calc(${controlHeight} / 2);\n        height: calc(${controlHeight} / 2);\n        box-sizing: border-box;\n        flex-shrink: 0;\n        border: ${borderWidth} solid ${borderColor};\n        padding: 2px;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        transition: box-shadow ${smallDelay};\n        ${\n            /*\n             * Firefox includes the line height in the outline height calculation (not sure if intended or accidental).\n             * Set it to 0 to ensure the outline is just as high as the control.\n             */ ''\n        }\n        line-height: 0;\n    }\n\n    @media (prefers-reduced-motion) {\n        .control {\n            transition-duration: 0s;\n        }\n    }\n\n    :host([disabled]) .control {\n        background-color: rgba(${borderRgbPartialColor}, 0.1);\n        border-color: rgba(${borderRgbPartialColor}, 0.2);\n    }\n\n    :host(:not([disabled]):not(:active):hover) .control {\n        border-color: ${borderHoverColor};\n        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n    }\n\n    :host(${focusVisible}) .control {\n        border-color: ${borderHoverColor};\n        outline: 2px solid ${borderHoverColor};\n        outline-offset: 1px;\n    }\n\n    .label {\n        font: inherit;\n        color: ${bodyFontColor};\n        padding-left: 1ch;\n        cursor: inherit;\n    }\n\n    :host([disabled]) .label {\n        color: ${bodyDisabledFontColor};\n    }\n\n    slot[name='checked-indicator'],\n    slot[name='indeterminate-indicator'] {\n        display: none;\n    }\n\n    slot[name='checked-indicator'] svg {\n        height: ${iconSize};\n        width: ${iconSize};\n        overflow: visible;\n    }\n\n    :host(.checked:not(.indeterminate)) slot[name='checked-indicator'] {\n        display: contents;\n    }\n\n    slot[name='checked-indicator'] svg {\n        fill: ${borderColor};\n    }\n\n    :host([disabled]) slot[name='checked-indicator'] svg {\n        fill: rgba(${borderRgbPartialColor}, 0.3);\n    }\n\n    slot[name='indeterminate-indicator'] svg {\n        height: ${iconSize};\n        width: ${iconSize};\n        overflow: visible;\n    }\n\n    :host(.indeterminate) slot[name='indeterminate-indicator'] {\n        display: contents;\n    }\n\n    slot[name='indeterminate-indicator'] svg {\n        fill: ${borderColor};\n    }\n\n    :host([disabled]) slot[name='indeterminate-indicator'] svg {\n        fill: rgba(${borderRgbPartialColor}, 0.3);\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/checkbox/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,WAAW,EACX,gBAAgB,EAChB,qBAAqB,EACrB,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,QAAQ,EACR,WAAW,EACX,UAAU,EACV,QAAQ,EACX,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;gBAGZ,QAAQ;;;;UAId,cAAc;;;;;;;;sBAQF,aAAa;uBACZ,aAAa;;;kBAGlB,WAAW,UAAU,WAAW;;;;;iCAKjB,UAAU;UACjC;AACE;;;GAGG,CAAC,EACR;;;;;;;;;;;iCAWyB,qBAAqB;6BACzB,qBAAqB;;;;wBAI1B,gBAAgB;kCACN,WAAW,IAAI,gBAAgB;;;YAGrD,YAAY;wBACA,gBAAgB;6BACX,gBAAgB;;;;;;iBAM5B,aAAa;;;;;;iBAMb,qBAAqB;;;;;;;;;kBASpB,QAAQ;iBACT,QAAQ;;;;;;;;;gBAST,WAAW;;;;qBAIN,qBAAqB;;;;kBAIxB,QAAQ;iBACT,QAAQ;;;;;;;;;gBAST,WAAW;;;;qBAIN,qBAAqB;;CAEzC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport { focusVisible } from '../utilities/style/focus';\n\nimport {\n    borderColor,\n    borderHoverColor,\n    borderRgbPartialColor,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    controlHeight,\n    iconSize,\n    borderWidth,\n    smallDelay,\n    bodyFont\n} from '../theme-provider/design-tokens';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        font: ${bodyFont};\n        align-items: center;\n        cursor: pointer;\n        outline: none;\n        ${userSelectNone}\n    }\n\n    :host([disabled]) {\n        cursor: default;\n    }\n\n    .control {\n        width: calc(${controlHeight} / 2);\n        height: calc(${controlHeight} / 2);\n        box-sizing: border-box;\n        flex-shrink: 0;\n        border: ${borderWidth} solid ${borderColor};\n        padding: 2px;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        transition: box-shadow ${smallDelay};\n        ${\n            /*\n             * Firefox includes the line height in the outline height calculation (not sure if intended or accidental).\n             * Set it to 0 to ensure the outline is just as high as the control.\n             */ ''\n        }\n        line-height: 0;\n    }\n\n    @media (prefers-reduced-motion) {\n        .control {\n            transition-duration: 0s;\n        }\n    }\n\n    :host([disabled]) .control {\n        background-color: rgba(${borderRgbPartialColor}, 0.1);\n        border-color: rgba(${borderRgbPartialColor}, 0.2);\n    }\n\n    :host(:not([disabled]):not(:active):hover) .control {\n        border-color: ${borderHoverColor};\n        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n    }\n\n    :host(${focusVisible}) .control {\n        border-color: ${borderHoverColor};\n        outline: 2px solid ${borderHoverColor};\n        outline-offset: 1px;\n    }\n\n    .label {\n        font: inherit;\n        color: ${bodyFontColor};\n        padding-left: 1ch;\n        cursor: inherit;\n    }\n\n    :host([disabled]) .label {\n        color: ${bodyDisabledFontColor};\n    }\n\n    slot[name='checked-indicator'],\n    slot[name='indeterminate-indicator'] {\n        display: none;\n    }\n\n    slot[name='checked-indicator'] svg {\n        height: ${iconSize};\n        width: ${iconSize};\n        overflow: visible;\n    }\n\n    :host(.checked:not(.indeterminate)) slot[name='checked-indicator'] {\n        display: contents;\n    }\n\n    slot[name='checked-indicator'] svg {\n        fill: ${borderColor};\n    }\n\n    :host([disabled]) slot[name='checked-indicator'] svg {\n        fill: rgba(${borderRgbPartialColor}, 0.3);\n    }\n\n    slot[name='indeterminate-indicator'] svg {\n        height: ${iconSize};\n        width: ${iconSize};\n        overflow: visible;\n    }\n\n    :host(.indeterminate) slot[name='indeterminate-indicator'] {\n        display: contents;\n    }\n\n    slot[name='indeterminate-indicator'] svg {\n        fill: ${borderColor};\n    }\n\n    :host([disabled]) slot[name='indeterminate-indicator'] svg {\n        fill: rgba(${borderRgbPartialColor}, 0.3);\n    }\n`;\n"]}

package/dist/esm/dialog/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 { applicationBackgroundColor, standardPadding, actionRgbPartialColor, bodyFont, bodyFontColor, titlePlus1Font, titlePlus1FontColor, smallPadding, subtitleFont, subtitleFontColor, elevation3BoxShadow, dialogSmallWidth, dialogSmallHeight, dialogSmallMaxHeight, borderHoverColor } from '../theme-provider/design-tokens';
 import { modalBackdropColorThemeColorStatic, modalBackdropColorThemeDarkStatic, modalBackdropColorThemeLightStatic } from '../theme-provider/design-tokens-static';
 import { Theme } from '../theme-provider/types';

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/dialog/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,0BAA0B,EAC1B,eAAe,EACf,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,cAAc,EACd,mBAAmB,EACnB,YAAY,EACZ,YAAY,EACZ,iBAAiB,EACjB,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,EACnB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACH,kCAAkC,EAClC,iCAAiC,EACjC,kCAAkC,EACrC,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;4BAIO,0BAA0B;;sBAEhC,mBAAmB;;iBAExB,gBAAgB;kBACf,iBAAiB;sBACb,oBAAoB;;;;;;;YAO9B,YAAY;6BACK,gBAAgB;;;;;;;;;eAS9B,YAAY;;;;UAIjB,gBAAgB;;;;gBAIV,cAAc;iBACb,mBAAmB;;;;;;;gBAOpB,YAAY;iBACX,iBAAiB;;;;;;gBAMlB,QAAQ;iBACP,aAAa;;;eAGf,eAAe;;UAEpB;AACE;;;;;GAKG;AACH,EACJ;;;;;;qCAM6B,qBAAqB;;;;;eAK3C,eAAe;;;;;;;;;;;;CAY7B,CAAC,aAAa;AACX;;;GAGG;AACH,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,kCAAkC;;SAEvD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;8BAEmB,iCAAiC;;SAEtD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,kCAAkC;;SAEvD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\n\nimport {\n    applicationBackgroundColor,\n    standardPadding,\n    actionRgbPartialColor,\n    bodyFont,\n    bodyFontColor,\n    titlePlus1Font,\n    titlePlus1FontColor,\n    smallPadding,\n    subtitleFont,\n    subtitleFontColor,\n    elevation3BoxShadow,\n    dialogSmallWidth,\n    dialogSmallHeight,\n    dialogSmallMaxHeight,\n    borderHoverColor\n} from '../theme-provider/design-tokens';\nimport {\n    modalBackdropColorThemeColorStatic,\n    modalBackdropColorThemeDarkStatic,\n    modalBackdropColorThemeLightStatic\n} from '../theme-provider/design-tokens-static';\nimport { Theme } from '../theme-provider/types';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { accessiblyHidden } from '../utilities/style/accessibly-hidden';\nimport { focusVisible } from '../utilities/style/focus';\n\nexport const styles = css`\n    ${display('grid')}\n\n    dialog {\n        flex-direction: column;\n        background-color: ${applicationBackgroundColor};\n        border: none;\n        box-shadow: ${elevation3BoxShadow};\n        padding: 0px;\n        width: ${dialogSmallWidth};\n        height: ${dialogSmallHeight};\n        max-height: ${dialogSmallMaxHeight};\n    }\n\n    dialog[open] {\n        display: flex;\n    }\n\n    dialog${focusVisible} {\n        outline: 2px solid ${borderHoverColor};\n    }\n\n    header {\n        min-height: 48px;\n        padding: 24px 24px 0px 24px;\n        flex: none;\n        display: flex;\n        flex-direction: column;\n        gap: ${smallPadding};\n    }\n\n    :host([header-hidden]) header {\n        ${accessiblyHidden}\n    }\n\n    .title {\n        font: ${titlePlus1Font};\n        color: ${titlePlus1FontColor};\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n\n    .subtitle {\n        font: ${subtitleFont};\n        color: ${subtitleFontColor};\n    }\n\n    section {\n        flex: auto;\n        overflow-y: auto;\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n        display: flex;\n        flex-direction: column;\n        gap: ${standardPadding};\n\n        ${\n            /**\n             * Use padding on all sides except the top because the padding is within\n             * the scrollable area. The whole scrollable area, including the top of\n             * the scrollbar, should be 24px away from the header, so use a margin\n             * instead of padding for the top.\n             */\n            ''\n        }\n        padding: 0px 24px 24px 24px;\n        margin-top: 24px;\n    }\n\n    footer {\n        border-top: 2px solid rgba(${actionRgbPartialColor}, 0.1);\n        padding: 24px;\n        flex: none;\n        display: flex;\n        justify-content: flex-end;\n        gap: ${standardPadding};\n    }\n\n    footer.empty {\n        padding: 0px;\n        height: 72px;\n        border-top: none;\n    }\n\n    :host([footer-hidden]) footer {\n        display: none;\n    }\n`.withBehaviors(\n    /*\n     * We cannot use the modalBackdropColor token directly because the backdrop\n     * element is not a descendant of the nimble-theme-provider element.\n     */\n    themeBehavior(\n        Theme.light,\n        css`\n            dialog::backdrop {\n                background: ${modalBackdropColorThemeLightStatic};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.dark,\n        css`\n            dialog::backdrop {\n                background: ${modalBackdropColorThemeDarkStatic};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            dialog::backdrop {\n                background: ${modalBackdropColorThemeColorStatic};\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/dialog/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,0BAA0B,EAC1B,eAAe,EACf,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,cAAc,EACd,mBAAmB,EACnB,YAAY,EACZ,YAAY,EACZ,iBAAiB,EACjB,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,EACnB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACH,kCAAkC,EAClC,iCAAiC,EACjC,kCAAkC,EACrC,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;4BAIO,0BAA0B;;sBAEhC,mBAAmB;;iBAExB,gBAAgB;kBACf,iBAAiB;sBACb,oBAAoB;;;;;;;YAO9B,YAAY;6BACK,gBAAgB;;;;;;;;;eAS9B,YAAY;;;;UAIjB,gBAAgB;;;;gBAIV,cAAc;iBACb,mBAAmB;;;;;;;gBAOpB,YAAY;iBACX,iBAAiB;;;;;;gBAMlB,QAAQ;iBACP,aAAa;;;eAGf,eAAe;;UAEpB;AACE;;;;;GAKG;AACH,EACJ;;;;;;qCAM6B,qBAAqB;;;;;eAK3C,eAAe;;;;;;;;;;;;CAY7B,CAAC,aAAa;AACX;;;GAGG;AACH,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,kCAAkC;;SAEvD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;8BAEmB,iCAAiC;;SAEtD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,kCAAkC;;SAEvD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\n\nimport {\n    applicationBackgroundColor,\n    standardPadding,\n    actionRgbPartialColor,\n    bodyFont,\n    bodyFontColor,\n    titlePlus1Font,\n    titlePlus1FontColor,\n    smallPadding,\n    subtitleFont,\n    subtitleFontColor,\n    elevation3BoxShadow,\n    dialogSmallWidth,\n    dialogSmallHeight,\n    dialogSmallMaxHeight,\n    borderHoverColor\n} from '../theme-provider/design-tokens';\nimport {\n    modalBackdropColorThemeColorStatic,\n    modalBackdropColorThemeDarkStatic,\n    modalBackdropColorThemeLightStatic\n} from '../theme-provider/design-tokens-static';\nimport { Theme } from '../theme-provider/types';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { accessiblyHidden } from '../utilities/style/accessibly-hidden';\nimport { focusVisible } from '../utilities/style/focus';\n\nexport const styles = css`\n    ${display('grid')}\n\n    dialog {\n        flex-direction: column;\n        background-color: ${applicationBackgroundColor};\n        border: none;\n        box-shadow: ${elevation3BoxShadow};\n        padding: 0px;\n        width: ${dialogSmallWidth};\n        height: ${dialogSmallHeight};\n        max-height: ${dialogSmallMaxHeight};\n    }\n\n    dialog[open] {\n        display: flex;\n    }\n\n    dialog${focusVisible} {\n        outline: 2px solid ${borderHoverColor};\n    }\n\n    header {\n        min-height: 48px;\n        padding: 24px 24px 0px 24px;\n        flex: none;\n        display: flex;\n        flex-direction: column;\n        gap: ${smallPadding};\n    }\n\n    :host([header-hidden]) header {\n        ${accessiblyHidden}\n    }\n\n    .title {\n        font: ${titlePlus1Font};\n        color: ${titlePlus1FontColor};\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n\n    .subtitle {\n        font: ${subtitleFont};\n        color: ${subtitleFontColor};\n    }\n\n    section {\n        flex: auto;\n        overflow-y: auto;\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n        display: flex;\n        flex-direction: column;\n        gap: ${standardPadding};\n\n        ${\n            /**\n             * Use padding on all sides except the top because the padding is within\n             * the scrollable area. The whole scrollable area, including the top of\n             * the scrollbar, should be 24px away from the header, so use a margin\n             * instead of padding for the top.\n             */\n            ''\n        }\n        padding: 0px 24px 24px 24px;\n        margin-top: 24px;\n    }\n\n    footer {\n        border-top: 2px solid rgba(${actionRgbPartialColor}, 0.1);\n        padding: 24px;\n        flex: none;\n        display: flex;\n        justify-content: flex-end;\n        gap: ${standardPadding};\n    }\n\n    footer.empty {\n        padding: 0px;\n        height: 72px;\n        border-top: none;\n    }\n\n    :host([footer-hidden]) footer {\n        display: none;\n    }\n`.withBehaviors(\n    /*\n     * We cannot use the modalBackdropColor token directly because the backdrop\n     * element is not a descendant of the nimble-theme-provider element.\n     */\n    themeBehavior(\n        Theme.light,\n        css`\n            dialog::backdrop {\n                background: ${modalBackdropColorThemeLightStatic};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.dark,\n        css`\n            dialog::backdrop {\n                background: ${modalBackdropColorThemeDarkStatic};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            dialog::backdrop {\n                background: ${modalBackdropColorThemeColorStatic};\n            }\n        `\n    )\n);\n"]}

package/dist/esm/drawer/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 { applicationBackgroundColor, bodyFont, bodyFontColor, standardPadding, titlePlus1Font, drawerWidth, largeDelay, actionRgbPartialColor } from '../theme-provider/design-tokens';
 import { modalBackdropColorThemeColorStatic, modalBackdropColorThemeDarkStatic, modalBackdropColorThemeLightStatic, largeDelayStatic } from '../theme-provider/design-tokens-static';
 import { Theme } from '../theme-provider/types';

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/drawer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,eAAe,EACf,cAAc,EACd,WAAW,EACX,UAAU,EACV,qBAAqB,EACxB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACH,kCAAkC,EAClC,iCAAiC,EACjC,kCAAkC,EAClC,gBAAgB,EACnB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;;;;;gBAON,QAAQ;iBACP,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yDA8B2B,gBAAgB;;;;;;;;;;;;;iBAaxD,WAAW;;4BAEA,0BAA0B;;;;;;;;;;;;;;;;;+DAiBS,UAAU;;;;;;;;;;;;;;;;;;;gEAmBT,UAAU;;;;;;;6DAOb,UAAU;;;;;;;;;;;;MAYjE;AACE;;;EAGE,CAAC,EACP;;;mBAGe,eAAe;;gBAElB,cAAc;;;;mBAIX,eAAe;;;;;;mBAMf,eAAe;;;;qCAIG,qBAAqB;;CAEzD,CAAC,aAAa;AACX;;;GAGG;AACH,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,kCAAkC;;SAEvD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;8BAEmB,iCAAiC;;SAEtD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,kCAAkC;;SAEvD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n    applicationBackgroundColor,\n    bodyFont,\n    bodyFontColor,\n    standardPadding,\n    titlePlus1Font,\n    drawerWidth,\n    largeDelay,\n    actionRgbPartialColor\n} from '../theme-provider/design-tokens';\nimport {\n    modalBackdropColorThemeColorStatic,\n    modalBackdropColorThemeDarkStatic,\n    modalBackdropColorThemeLightStatic,\n    largeDelayStatic\n} from '../theme-provider/design-tokens-static';\nimport { Theme } from '../theme-provider/types';\nimport { themeBehavior } from '../utilities/style/theme';\n\nexport const styles = css`\n    ${display('block')}\n\n    :host {\n        position: absolute;\n        width: auto;\n        height: 100%;\n        outline: none;\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n    }\n\n    dialog {\n        color: inherit;\n        font: inherit;\n        background-color: transparent;\n        width: auto;\n        top: 0px;\n        bottom: 0px;\n        border-radius: 0px;\n        border-width: 0px;\n        height: 100%;\n        margin: 0px;\n        padding: 0px;\n        max-width: none;\n        max-height: none;\n        overflow: hidden;\n    }\n\n    @keyframes ni-private-drawer-fade-in-keyframes {\n        0% {\n            opacity: 0;\n        }\n        100% {\n            opacity: 1;\n        }\n    }\n\n    dialog.animating::backdrop {\n        animation: ni-private-drawer-fade-in-keyframes ${largeDelayStatic}\n            ease-in;\n    }\n\n    dialog.closing::backdrop {\n        animation-direction: reverse;\n    }\n\n    .dialog-contents {\n        box-sizing: border-box;\n        display: flex;\n        flex-direction: column;\n        position: absolute;\n        width: ${drawerWidth};\n        height: 100%;\n        background-color: ${applicationBackgroundColor};\n    }\n\n    @keyframes ni-private-drawer-slide-in-left-keyframes {\n        0% {\n            transform: translate(-100%);\n        }\n        100% {\n            transform: translate(0%);\n        }\n    }\n\n    :host([location='left']) .dialog-contents {\n        box-shadow: 3px 0px 8px #00000033;\n    }\n\n    :host([location='left']) dialog.animating .dialog-contents {\n        animation: ni-private-drawer-slide-in-left-keyframes ${largeDelay}\n            ease-in;\n    }\n\n    @keyframes ni-private-drawer-slide-in-right-keyframes {\n        0% {\n            transform: translate(100%);\n        }\n        100% {\n            transform: translate(0%);\n        }\n    }\n\n    :host([location='right']) .dialog-contents {\n        right: 0px;\n        box-shadow: -3px 0px 8px #00000033;\n    }\n\n    :host([location='right']) dialog.animating .dialog-contents {\n        animation: ni-private-drawer-slide-in-right-keyframes ${largeDelay}\n            ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        :host([location='left']) dialog.animating .dialog-contents,\n        :host([location='right']) dialog.animating .dialog-contents {\n            animation: ni-private-drawer-fade-in-keyframes ${largeDelay} ease-in;\n        }\n    }\n\n    :host([location='left']) dialog.closing .dialog-contents {\n        animation-direction: reverse;\n    }\n\n    :host([location='right']) dialog.closing .dialog-contents {\n        animation-direction: reverse;\n    }\n\n    ${\n        /*\n            Styling for a 3-panel drawer with header, footer, and a content\n            region filling the remaining space/height\n        */ ''\n    }\n\n    ::slotted(header) {\n        padding: ${standardPadding};\n        flex: none;\n        font: ${titlePlus1Font};\n    }\n\n    ::slotted(section) {\n        padding: ${standardPadding};\n        flex: auto;\n        overflow-y: auto;\n    }\n\n    ::slotted(footer) {\n        padding: ${standardPadding};\n        flex: none;\n        display: flex;\n        justify-content: flex-end;\n        border-top: 2px solid rgba(${actionRgbPartialColor}, 0.1);\n    }\n`.withBehaviors(\n    /*\n     * We cannot use the modalBackdropColor token directly because the backdrop\n     * element is not a descendant of the nimble-theme-provider element.\n     */\n    themeBehavior(\n        Theme.light,\n        css`\n            dialog::backdrop {\n                background: ${modalBackdropColorThemeLightStatic};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.dark,\n        css`\n            dialog::backdrop {\n                background: ${modalBackdropColorThemeDarkStatic};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            dialog::backdrop {\n                background: ${modalBackdropColorThemeColorStatic};\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/drawer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,eAAe,EACf,cAAc,EACd,WAAW,EACX,UAAU,EACV,qBAAqB,EACxB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACH,kCAAkC,EAClC,iCAAiC,EACjC,kCAAkC,EAClC,gBAAgB,EACnB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;;;;;gBAON,QAAQ;iBACP,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yDA8B2B,gBAAgB;;;;;;;;;;;;;iBAaxD,WAAW;;4BAEA,0BAA0B;;;;;;;;;;;;;;;;;+DAiBS,UAAU;;;;;;;;;;;;;;;;;;;gEAmBT,UAAU;;;;;;;6DAOb,UAAU;;;;;;;;;;;;MAYjE;AACE;;;EAGE,CAAC,EACP;;;mBAGe,eAAe;;gBAElB,cAAc;;;;mBAIX,eAAe;;;;;;mBAMf,eAAe;;;;qCAIG,qBAAqB;;CAEzD,CAAC,aAAa;AACX;;;GAGG;AACH,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,kCAAkC;;SAEvD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;8BAEmB,iCAAiC;;SAEtD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,kCAAkC;;SAEvD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    applicationBackgroundColor,\n    bodyFont,\n    bodyFontColor,\n    standardPadding,\n    titlePlus1Font,\n    drawerWidth,\n    largeDelay,\n    actionRgbPartialColor\n} from '../theme-provider/design-tokens';\nimport {\n    modalBackdropColorThemeColorStatic,\n    modalBackdropColorThemeDarkStatic,\n    modalBackdropColorThemeLightStatic,\n    largeDelayStatic\n} from '../theme-provider/design-tokens-static';\nimport { Theme } from '../theme-provider/types';\nimport { themeBehavior } from '../utilities/style/theme';\n\nexport const styles = css`\n    ${display('block')}\n\n    :host {\n        position: absolute;\n        width: auto;\n        height: 100%;\n        outline: none;\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n    }\n\n    dialog {\n        color: inherit;\n        font: inherit;\n        background-color: transparent;\n        width: auto;\n        top: 0px;\n        bottom: 0px;\n        border-radius: 0px;\n        border-width: 0px;\n        height: 100%;\n        margin: 0px;\n        padding: 0px;\n        max-width: none;\n        max-height: none;\n        overflow: hidden;\n    }\n\n    @keyframes ni-private-drawer-fade-in-keyframes {\n        0% {\n            opacity: 0;\n        }\n        100% {\n            opacity: 1;\n        }\n    }\n\n    dialog.animating::backdrop {\n        animation: ni-private-drawer-fade-in-keyframes ${largeDelayStatic}\n            ease-in;\n    }\n\n    dialog.closing::backdrop {\n        animation-direction: reverse;\n    }\n\n    .dialog-contents {\n        box-sizing: border-box;\n        display: flex;\n        flex-direction: column;\n        position: absolute;\n        width: ${drawerWidth};\n        height: 100%;\n        background-color: ${applicationBackgroundColor};\n    }\n\n    @keyframes ni-private-drawer-slide-in-left-keyframes {\n        0% {\n            transform: translate(-100%);\n        }\n        100% {\n            transform: translate(0%);\n        }\n    }\n\n    :host([location='left']) .dialog-contents {\n        box-shadow: 3px 0px 8px #00000033;\n    }\n\n    :host([location='left']) dialog.animating .dialog-contents {\n        animation: ni-private-drawer-slide-in-left-keyframes ${largeDelay}\n            ease-in;\n    }\n\n    @keyframes ni-private-drawer-slide-in-right-keyframes {\n        0% {\n            transform: translate(100%);\n        }\n        100% {\n            transform: translate(0%);\n        }\n    }\n\n    :host([location='right']) .dialog-contents {\n        right: 0px;\n        box-shadow: -3px 0px 8px #00000033;\n    }\n\n    :host([location='right']) dialog.animating .dialog-contents {\n        animation: ni-private-drawer-slide-in-right-keyframes ${largeDelay}\n            ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        :host([location='left']) dialog.animating .dialog-contents,\n        :host([location='right']) dialog.animating .dialog-contents {\n            animation: ni-private-drawer-fade-in-keyframes ${largeDelay} ease-in;\n        }\n    }\n\n    :host([location='left']) dialog.closing .dialog-contents {\n        animation-direction: reverse;\n    }\n\n    :host([location='right']) dialog.closing .dialog-contents {\n        animation-direction: reverse;\n    }\n\n    ${\n        /*\n            Styling for a 3-panel drawer with header, footer, and a content\n            region filling the remaining space/height\n        */ ''\n    }\n\n    ::slotted(header) {\n        padding: ${standardPadding};\n        flex: none;\n        font: ${titlePlus1Font};\n    }\n\n    ::slotted(section) {\n        padding: ${standardPadding};\n        flex: auto;\n        overflow-y: auto;\n    }\n\n    ::slotted(footer) {\n        padding: ${standardPadding};\n        flex: none;\n        display: flex;\n        justify-content: flex-end;\n        border-top: 2px solid rgba(${actionRgbPartialColor}, 0.1);\n    }\n`.withBehaviors(\n    /*\n     * We cannot use the modalBackdropColor token directly because the backdrop\n     * element is not a descendant of the nimble-theme-provider element.\n     */\n    themeBehavior(\n        Theme.light,\n        css`\n            dialog::backdrop {\n                background: ${modalBackdropColorThemeLightStatic};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.dark,\n        css`\n            dialog::backdrop {\n                background: ${modalBackdropColorThemeDarkStatic};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            dialog::backdrop {\n                background: ${modalBackdropColorThemeColorStatic};\n            }\n        `\n    )\n);\n"]}

package/dist/esm/icon-base/index.js

@@ -19,8 +19,7 @@ export const registerIcon = (baseName, iconClass) => {
     const composedIcon = iconClass.compose({
         baseName,
         template,
-        styles,
-        baseClass: iconClass
+        styles
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
 };

package/dist/esm/icon-base/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/icon-base/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE7E,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC;;GAEG;AACH,MAAM,OAAO,IAAK,SAAQ,iBAAiB;IASvC,YAAmB,gBAAgB,CAAiB,IAAgB;QAChE,KAAK,EAAE,CAAC;QADwC,SAAI,GAAJ,IAAI,CAAY;IAEpE,CAAC;CACJ;AALU;IADN,IAAI;sCACyB;AASlC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,QAAgB,EAAE,SAAoB,EAAQ,EAAE;IACzE,MAAM,YAAY,GAAG,SAAS,CAAC,OAAO,CAAC;QACnC,QAAQ;QACR,QAAQ;QACR,MAAM;QACN,SAAS,EAAE,SAAS;KACvB,CAAC,CAAC;IAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC;AAC7E,CAAC,CAAC","sourcesContent":["import { attr } from '@microsoft/fast-element';\nimport { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';\nimport type { NimbleIcon } from '@ni/nimble-tokens/dist/icons/js';\nimport { template } from './template';\nimport { styles } from './styles';\nimport type { IconSeverity } from './types';\n\n/**\n * The base class for icon components\n */\nexport class Icon extends FoundationElement {\n    /**\n     * @public\n     * @remarks\n     * HTML Attribute: severity\n     */\n    @attr\n    public severity: IconSeverity;\n\n    public constructor(/** @internal */ public readonly icon: NimbleIcon) {\n        super();\n    }\n}\n\ntype IconClass = typeof Icon;\n\nexport const registerIcon = (baseName: string, iconClass: IconClass): void => {\n    const composedIcon = iconClass.compose({\n        baseName,\n        template,\n        styles,\n        baseClass: iconClass\n    });\n\n    DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());\n};\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/icon-base/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE7E,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC;;GAEG;AACH,MAAM,OAAO,IAAK,SAAQ,iBAAiB;IASvC,YAAmB,gBAAgB,CAAiB,IAAgB;QAChE,KAAK,EAAE,CAAC;QADwC,SAAI,GAAJ,IAAI,CAAY;IAEpE,CAAC;CACJ;AALU;IADN,IAAI;sCACyB;AASlC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,QAAgB,EAAE,SAAoB,EAAQ,EAAE;IACzE,MAAM,YAAY,GAAG,SAAS,CAAC,OAAO,CAAC;QACnC,QAAQ;QACR,QAAQ;QACR,MAAM;KACT,CAAC,CAAC;IAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC;AAC7E,CAAC,CAAC","sourcesContent":["import { attr } from '@microsoft/fast-element';\nimport { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';\nimport type { NimbleIcon } from '@ni/nimble-tokens/dist/icons/js';\nimport { template } from './template';\nimport { styles } from './styles';\nimport type { IconSeverity } from './types';\n\n/**\n * The base class for icon components\n */\nexport class Icon extends FoundationElement {\n    /**\n     * @public\n     * @remarks\n     * HTML Attribute: severity\n     */\n    @attr\n    public severity: IconSeverity;\n\n    public constructor(/** @internal */ public readonly icon: NimbleIcon) {\n        super();\n    }\n}\n\ntype IconClass = typeof Icon;\n\nexport const registerIcon = (baseName: string, iconClass: IconClass): void => {\n    const composedIcon = iconClass.compose({\n        baseName,\n        template,\n        styles\n    });\n\n    DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());\n};\n"]}

package/dist/esm/icon-base/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 { iconSize, warningColor, failColor, passColor, iconColor, informationColor } from '../theme-provider/design-tokens';
 import { userSelectNone } from '../utilities/style/user-select';
 export const styles = css `

package/dist/esm/icon-base/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/icon-base/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,YAAY,EACZ,SAAS,EACT,SAAS,EACT,SAAS,EACT,gBAAgB,EACnB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;UAIlB,cAAc;iBACP,QAAQ;kBACP,QAAQ;;;;;;;;;UAShB,SAAS,CAAC,iBAAiB,KAAK,SAAS;;;;UAIzC,SAAS,CAAC,iBAAiB,KAAK,YAAY;;;;UAI5C,SAAS,CAAC,iBAAiB,KAAK,SAAS;;;;UAIzC,SAAS,CAAC,iBAAiB,KAAK,gBAAgB;;;;gBAI1C,SAAS;;;;CAIxB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n    iconSize,\n    warningColor,\n    failColor,\n    passColor,\n    iconColor,\n    informationColor\n} from '../theme-provider/design-tokens';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        align-items: center;\n        ${userSelectNone}\n        width: ${iconSize};\n        height: ${iconSize};\n    }\n\n    .icon {\n        width: 100%;\n        height: 100%;\n    }\n\n    :host([severity='error']) {\n        ${iconColor.cssCustomProperty}: ${failColor};\n    }\n\n    :host([severity='warning']) {\n        ${iconColor.cssCustomProperty}: ${warningColor};\n    }\n\n    :host([severity='success']) {\n        ${iconColor.cssCustomProperty}: ${passColor};\n    }\n\n    :host([severity='information']) {\n        ${iconColor.cssCustomProperty}: ${informationColor};\n    }\n\n    .icon svg {\n        fill: ${iconColor};\n        width: 100%;\n        height: 100%;\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/icon-base/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,YAAY,EACZ,SAAS,EACT,SAAS,EACT,SAAS,EACT,gBAAgB,EACnB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;UAIlB,cAAc;iBACP,QAAQ;kBACP,QAAQ;;;;;;;;;UAShB,SAAS,CAAC,iBAAiB,KAAK,SAAS;;;;UAIzC,SAAS,CAAC,iBAAiB,KAAK,YAAY;;;;UAI5C,SAAS,CAAC,iBAAiB,KAAK,SAAS;;;;UAIzC,SAAS,CAAC,iBAAiB,KAAK,gBAAgB;;;;gBAI1C,SAAS;;;;CAIxB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    iconSize,\n    warningColor,\n    failColor,\n    passColor,\n    iconColor,\n    informationColor\n} from '../theme-provider/design-tokens';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        align-items: center;\n        ${userSelectNone}\n        width: ${iconSize};\n        height: ${iconSize};\n    }\n\n    .icon {\n        width: 100%;\n        height: 100%;\n    }\n\n    :host([severity='error']) {\n        ${iconColor.cssCustomProperty}: ${failColor};\n    }\n\n    :host([severity='warning']) {\n        ${iconColor.cssCustomProperty}: ${warningColor};\n    }\n\n    :host([severity='success']) {\n        ${iconColor.cssCustomProperty}: ${passColor};\n    }\n\n    :host([severity='information']) {\n        ${iconColor.cssCustomProperty}: ${informationColor};\n    }\n\n    .icon svg {\n        fill: ${iconColor};\n        width: 100%;\n        height: 100%;\n    }\n`;\n"]}

package/dist/esm/label-provider/base/styles.d.ts

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

package/dist/esm/label-provider/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/label-provider/base/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/label-provider/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/label-provider/core/index.js

@@ -3,6 +3,7 @@ import { attr } from '@microsoft/fast-element';
 import { DesignSystem } from '@microsoft/fast-foundation';
 import { LabelProviderBase } from '../base';
 import { popupDismissLabel, numericDecrementLabel, numericIncrementLabel, popupIconErrorLabel, popupIconWarningLabel, popupIconInformationLabel, filterSearchLabel, filterNoResultsLabel } from './label-tokens';
+import { styles } from '../base/styles';
 const supportedLabels = {
     popupDismiss: popupDismissLabel,
     numericDecrement: numericDecrementLabel,
@@ -47,7 +48,8 @@ __decorate([
     attr({ attribute: 'filter-no-results' })
 ], LabelProviderCore.prototype, "filterNoResults", void 0);
 const nimbleLabelProviderCore = LabelProviderCore.compose({
-    baseName: 'label-provider-core'
+    baseName: 'label-provider-core',
+    styles
 });
 DesignSystem.getOrCreate()
     .withPrefix('nimble')

package/dist/esm/label-provider/core/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/label-provider/core/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAmB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC7D,OAAO,EACH,iBAAiB,EACjB,qBAAqB,EACrB,qBAAqB,EACrB,mBAAmB,EACnB,qBAAqB,EACrB,yBAAyB,EACzB,iBAAiB,EACjB,oBAAoB,EACvB,MAAM,gBAAgB,CAAC;AAQxB,MAAM,eAAe,GAAG;IACpB,YAAY,EAAE,iBAAiB;IAC/B,gBAAgB,EAAE,qBAAqB;IACvC,gBAAgB,EAAE,qBAAqB;IACvC,cAAc,EAAE,mBAAmB;IACnC,gBAAgB,EAAE,qBAAqB;IACvC,oBAAoB,EAAE,yBAAyB;IAC/C,YAAY,EAAE,iBAAiB;IAC/B,eAAe,EAAE,oBAAoB;CAC/B,CAAC;AAEX;;GAEG;AACH,MAAM,OAAO,iBACT,SAAQ,iBAAyC;IADrD;;QA2BgC,oBAAe,GAAG,eAAe,CAAC;IAClE,CAAC;CAAA;AAxBU;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;uDACG;AAGjC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;2DACG;AAGrC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;2DACG;AAGrC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;yDACE;AAGnC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;2DACE;AAGrC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,wBAAwB,EAAE,CAAC;+DACE;AAGzC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;uDACG;AAGjC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;0DACE;AAK/C,MAAM,uBAAuB,GAAG,iBAAiB,CAAC,OAAO,CAAC;IACtD,QAAQ,EAAE,qBAAqB;CAClC,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,uBAAuB,EAAE,CAAC,CAAC;AACzC,MAAM,CAAC,MAAM,oBAAoB,GAAG,4BAA4B,CAAC","sourcesContent":["import { attr } from '@microsoft/fast-element';\nimport { DesignSystem } from '@microsoft/fast-foundation';\nimport { DesignTokensFor, LabelProviderBase } from '../base';\nimport {\n    popupDismissLabel,\n    numericDecrementLabel,\n    numericIncrementLabel,\n    popupIconErrorLabel,\n    popupIconWarningLabel,\n    popupIconInformationLabel,\n    filterSearchLabel,\n    filterNoResultsLabel\n} from './label-tokens';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-label-provider-core': LabelProviderCore;\n    }\n}\n\nconst supportedLabels = {\n    popupDismiss: popupDismissLabel,\n    numericDecrement: numericDecrementLabel,\n    numericIncrement: numericIncrementLabel,\n    popupIconError: popupIconErrorLabel,\n    popupIconWarning: popupIconWarningLabel,\n    popupIconInformation: popupIconInformationLabel,\n    filterSearch: filterSearchLabel,\n    filterNoResults: filterNoResultsLabel\n} as const;\n\n/**\n * Core label provider for Nimble\n */\nexport class LabelProviderCore\n    extends LabelProviderBase<typeof supportedLabels>\n    implements DesignTokensFor<typeof supportedLabels> {\n    @attr({ attribute: 'popup-dismiss' })\n    public popupDismiss: string | undefined;\n\n    @attr({ attribute: 'numeric-decrement' })\n    public numericDecrement: string | undefined;\n\n    @attr({ attribute: 'numeric-increment' })\n    public numericIncrement: string | undefined;\n\n    @attr({ attribute: 'popup-icon-error' })\n    public popupIconError: string | undefined;\n\n    @attr({ attribute: 'popup-icon-warning' })\n    public popupIconWarning: string | undefined;\n\n    @attr({ attribute: 'popup-icon-information' })\n    public popupIconInformation: string | undefined;\n\n    @attr({ attribute: 'filter-search' })\n    public filterSearch: string | undefined;\n\n    @attr({ attribute: 'filter-no-results' })\n    public filterNoResults: string | undefined;\n\n    protected override readonly supportedLabels = supportedLabels;\n}\n\nconst nimbleLabelProviderCore = LabelProviderCore.compose({\n    baseName: 'label-provider-core'\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(nimbleLabelProviderCore());\nexport const labelProviderCoreTag = 'nimble-label-provider-core';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/label-provider/core/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAmB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC7D,OAAO,EACH,iBAAiB,EACjB,qBAAqB,EACrB,qBAAqB,EACrB,mBAAmB,EACnB,qBAAqB,EACrB,yBAAyB,EACzB,iBAAiB,EACjB,oBAAoB,EACvB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAQxC,MAAM,eAAe,GAAG;IACpB,YAAY,EAAE,iBAAiB;IAC/B,gBAAgB,EAAE,qBAAqB;IACvC,gBAAgB,EAAE,qBAAqB;IACvC,cAAc,EAAE,mBAAmB;IACnC,gBAAgB,EAAE,qBAAqB;IACvC,oBAAoB,EAAE,yBAAyB;IAC/C,YAAY,EAAE,iBAAiB;IAC/B,eAAe,EAAE,oBAAoB;CAC/B,CAAC;AAEX;;GAEG;AACH,MAAM,OAAO,iBACT,SAAQ,iBAAyC;IADrD;;QA2BgC,oBAAe,GAAG,eAAe,CAAC;IAClE,CAAC;CAAA;AAxBU;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;uDACG;AAGjC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;2DACG;AAGrC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;2DACG;AAGrC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;yDACE;AAGnC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;2DACE;AAGrC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,wBAAwB,EAAE,CAAC;+DACE;AAGzC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;uDACG;AAGjC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;0DACE;AAK/C,MAAM,uBAAuB,GAAG,iBAAiB,CAAC,OAAO,CAAC;IACtD,QAAQ,EAAE,qBAAqB;IAC/B,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,uBAAuB,EAAE,CAAC,CAAC;AACzC,MAAM,CAAC,MAAM,oBAAoB,GAAG,4BAA4B,CAAC","sourcesContent":["import { attr } from '@microsoft/fast-element';\nimport { DesignSystem } from '@microsoft/fast-foundation';\nimport { DesignTokensFor, LabelProviderBase } from '../base';\nimport {\n    popupDismissLabel,\n    numericDecrementLabel,\n    numericIncrementLabel,\n    popupIconErrorLabel,\n    popupIconWarningLabel,\n    popupIconInformationLabel,\n    filterSearchLabel,\n    filterNoResultsLabel\n} from './label-tokens';\nimport { styles } from '../base/styles';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-label-provider-core': LabelProviderCore;\n    }\n}\n\nconst supportedLabels = {\n    popupDismiss: popupDismissLabel,\n    numericDecrement: numericDecrementLabel,\n    numericIncrement: numericIncrementLabel,\n    popupIconError: popupIconErrorLabel,\n    popupIconWarning: popupIconWarningLabel,\n    popupIconInformation: popupIconInformationLabel,\n    filterSearch: filterSearchLabel,\n    filterNoResults: filterNoResultsLabel\n} as const;\n\n/**\n * Core label provider for Nimble\n */\nexport class LabelProviderCore\n    extends LabelProviderBase<typeof supportedLabels>\n    implements DesignTokensFor<typeof supportedLabels> {\n    @attr({ attribute: 'popup-dismiss' })\n    public popupDismiss: string | undefined;\n\n    @attr({ attribute: 'numeric-decrement' })\n    public numericDecrement: string | undefined;\n\n    @attr({ attribute: 'numeric-increment' })\n    public numericIncrement: string | undefined;\n\n    @attr({ attribute: 'popup-icon-error' })\n    public popupIconError: string | undefined;\n\n    @attr({ attribute: 'popup-icon-warning' })\n    public popupIconWarning: string | undefined;\n\n    @attr({ attribute: 'popup-icon-information' })\n    public popupIconInformation: string | undefined;\n\n    @attr({ attribute: 'filter-search' })\n    public filterSearch: string | undefined;\n\n    @attr({ attribute: 'filter-no-results' })\n    public filterNoResults: string | undefined;\n\n    protected override readonly supportedLabels = supportedLabels;\n}\n\nconst nimbleLabelProviderCore = LabelProviderCore.compose({\n    baseName: 'label-provider-core',\n    styles\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(nimbleLabelProviderCore());\nexport const labelProviderCoreTag = 'nimble-label-provider-core';\n"]}

package/dist/esm/label-provider/rich-text/index.js

@@ -3,6 +3,7 @@ import { attr } from '@microsoft/fast-element';
 import { DesignSystem } from '@microsoft/fast-foundation';
 import { LabelProviderBase } from '../base';
 import { richTextToggleBoldLabel, richTextToggleItalicsLabel, richTextToggleBulletedListLabel, richTextToggleNumberedListLabel } from './label-tokens';
+import { styles } from '../base/styles';
 const supportedLabels = {
     toggleBold: richTextToggleBoldLabel,
     toggleItalics: richTextToggleItalicsLabel,
@@ -31,7 +32,8 @@ __decorate([
     attr({ attribute: 'toggle-numbered-list' })
 ], LabelProviderRichText.prototype, "toggleNumberedList", void 0);
 const nimbleLabelProviderRichText = LabelProviderRichText.compose({
-    baseName: 'label-provider-rich-text'
+    baseName: 'label-provider-rich-text',
+    styles
 });
 DesignSystem.getOrCreate()
     .withPrefix('nimble')

package/dist/esm/label-provider/rich-text/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/label-provider/rich-text/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAmB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC7D,OAAO,EACH,uBAAuB,EACvB,0BAA0B,EAC1B,+BAA+B,EAC/B,+BAA+B,EAClC,MAAM,gBAAgB,CAAC;AAQxB,MAAM,eAAe,GAAG;IACpB,UAAU,EAAE,uBAAuB;IACnC,aAAa,EAAE,0BAA0B;IACzC,kBAAkB,EAAE,+BAA+B;IACnD,kBAAkB,EAAE,+BAA+B;CAC7C,CAAC;AAEX;;GAEG;AACH,MAAM,OAAO,qBACT,SAAQ,iBAAyC;IADrD;;QAegC,oBAAe,GAAG,eAAe,CAAC;IAClE,CAAC;CAAA;AAZU;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;yDACG;AAG/B;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;4DACG;AAGlC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,sBAAsB,EAAE,CAAC;iEACE;AAGvC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,sBAAsB,EAAE,CAAC;iEACE;AAKlD,MAAM,2BAA2B,GAAG,qBAAqB,CAAC,OAAO,CAAC;IAC9D,QAAQ,EAAE,0BAA0B;CACvC,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,2BAA2B,EAAE,CAAC,CAAC;AAC7C,MAAM,CAAC,MAAM,wBAAwB,GAAG,iCAAiC,CAAC","sourcesContent":["import { attr } from '@microsoft/fast-element';\nimport { DesignSystem } from '@microsoft/fast-foundation';\nimport { DesignTokensFor, LabelProviderBase } from '../base';\nimport {\n    richTextToggleBoldLabel,\n    richTextToggleItalicsLabel,\n    richTextToggleBulletedListLabel,\n    richTextToggleNumberedListLabel\n} from './label-tokens';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-label-provider-rich-text': LabelProviderRichText;\n    }\n}\n\nconst supportedLabels = {\n    toggleBold: richTextToggleBoldLabel,\n    toggleItalics: richTextToggleItalicsLabel,\n    toggleBulletedList: richTextToggleBulletedListLabel,\n    toggleNumberedList: richTextToggleNumberedListLabel\n} as const;\n\n/**\n * Label provider for the Nimble rich text component\n */\nexport class LabelProviderRichText\n    extends LabelProviderBase<typeof supportedLabels>\n    implements DesignTokensFor<typeof supportedLabels> {\n    @attr({ attribute: 'toggle-bold' })\n    public toggleBold: string | undefined;\n\n    @attr({ attribute: 'toggle-italics' })\n    public toggleItalics: string | undefined;\n\n    @attr({ attribute: 'toggle-bulleted-list' })\n    public toggleBulletedList: string | undefined;\n\n    @attr({ attribute: 'toggle-numbered-list' })\n    public toggleNumberedList: string | undefined;\n\n    protected override readonly supportedLabels = supportedLabels;\n}\n\nconst nimbleLabelProviderRichText = LabelProviderRichText.compose({\n    baseName: 'label-provider-rich-text'\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(nimbleLabelProviderRichText());\nexport const labelProviderRichTextTag = 'nimble-label-provider-rich-text';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/label-provider/rich-text/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAmB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC7D,OAAO,EACH,uBAAuB,EACvB,0BAA0B,EAC1B,+BAA+B,EAC/B,+BAA+B,EAClC,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAQxC,MAAM,eAAe,GAAG;IACpB,UAAU,EAAE,uBAAuB;IACnC,aAAa,EAAE,0BAA0B;IACzC,kBAAkB,EAAE,+BAA+B;IACnD,kBAAkB,EAAE,+BAA+B;CAC7C,CAAC;AAEX;;GAEG;AACH,MAAM,OAAO,qBACT,SAAQ,iBAAyC;IADrD;;QAegC,oBAAe,GAAG,eAAe,CAAC;IAClE,CAAC;CAAA;AAZU;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;yDACG;AAG/B;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;4DACG;AAGlC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,sBAAsB,EAAE,CAAC;iEACE;AAGvC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,sBAAsB,EAAE,CAAC;iEACE;AAKlD,MAAM,2BAA2B,GAAG,qBAAqB,CAAC,OAAO,CAAC;IAC9D,QAAQ,EAAE,0BAA0B;IACpC,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,2BAA2B,EAAE,CAAC,CAAC;AAC7C,MAAM,CAAC,MAAM,wBAAwB,GAAG,iCAAiC,CAAC","sourcesContent":["import { attr } from '@microsoft/fast-element';\nimport { DesignSystem } from '@microsoft/fast-foundation';\nimport { DesignTokensFor, LabelProviderBase } from '../base';\nimport {\n    richTextToggleBoldLabel,\n    richTextToggleItalicsLabel,\n    richTextToggleBulletedListLabel,\n    richTextToggleNumberedListLabel\n} from './label-tokens';\nimport { styles } from '../base/styles';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-label-provider-rich-text': LabelProviderRichText;\n    }\n}\n\nconst supportedLabels = {\n    toggleBold: richTextToggleBoldLabel,\n    toggleItalics: richTextToggleItalicsLabel,\n    toggleBulletedList: richTextToggleBulletedListLabel,\n    toggleNumberedList: richTextToggleNumberedListLabel\n} as const;\n\n/**\n * Label provider for the Nimble rich text component\n */\nexport class LabelProviderRichText\n    extends LabelProviderBase<typeof supportedLabels>\n    implements DesignTokensFor<typeof supportedLabels> {\n    @attr({ attribute: 'toggle-bold' })\n    public toggleBold: string | undefined;\n\n    @attr({ attribute: 'toggle-italics' })\n    public toggleItalics: string | undefined;\n\n    @attr({ attribute: 'toggle-bulleted-list' })\n    public toggleBulletedList: string | undefined;\n\n    @attr({ attribute: 'toggle-numbered-list' })\n    public toggleNumberedList: string | undefined;\n\n    protected override readonly supportedLabels = supportedLabels;\n}\n\nconst nimbleLabelProviderRichText = LabelProviderRichText.compose({\n    baseName: 'label-provider-rich-text',\n    styles\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(nimbleLabelProviderRichText());\nexport const labelProviderRichTextTag = 'nimble-label-provider-rich-text';\n"]}