@ni/nimble-components 29.3.3 → 29.3.5

package/dist/esm/anchor/styles.js

@@ -9,7 +9,6 @@ export const styles = css `
         ${display('inline')}
 
         :host {
-            box-sizing: border-box;
             font: ${linkFont};
         }
 

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,gBAAgB,EAChB,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;;;;qBAIT,gBAAgB;;;;;;qBAMhB,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    borderHoverColor,\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            color: ${borderHoverColor};\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,gBAAgB,EAChB,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;;;oBAGP,QAAQ;;;;;;;;qBAQP,aAAa;;;;;;;;;qBASb,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;kBAuBzB,YAAY;;;;qBAIT,gBAAgB;;;;;;qBAMhB,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    borderHoverColor,\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            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            color: ${borderHoverColor};\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

@@ -25,7 +25,6 @@ export const styles = css `
         display: grid;
         contain: layout;
         overflow: visible;
-        box-sizing: border-box;
         height: ${controlHeight};
         grid-template-columns: 1fr;
         column-gap: 8px;

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 '../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"]}
+{"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;;;;;;;;;;;kBAWrB,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        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

@@ -7,7 +7,6 @@ export const styles = css `
 
     :host {
         position: relative;
-        box-sizing: border-box;
         font: ${buttonLabelFont};
         height: ${controlHeight};
         color: ${bodyFontColor};

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 '../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"]}
+{"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;;;;gBAIZ,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        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

@@ -4,7 +4,6 @@ export const styles = css `
     ${display('grid')}
 
     :host {
-        box-sizing: border-box;
         grid-template-columns: auto 1fr;
         grid-template-rows: auto 1fr;
     }

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 '../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"]}
+{"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;;;;;;;;;;;;;;;;;;CAkBpB,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        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

@@ -39,7 +39,6 @@ export const styles = css `
     .positioning-region {
         display: flex;
         position: relative;
-        box-sizing: border-box;
         height: calc(${iconSize} * 2);
         width: 100%;
     }

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 '../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"]}
+{"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;;;;;;;uBAOjC,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        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/breadcrumb/styles.js

@@ -5,7 +5,6 @@ export const styles = css `
     ${display('inline-block')}
 
     :host {
-        box-sizing: border-box;
         font: ${linkFont};
         --ni-private-breadcrumb-link-font-color: ${linkFontColor};
         --ni-private-breadcrumb-link-active-font-color: ${linkActiveFontColor};

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 '../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"]}
+{"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;;;gBAGb,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        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

@@ -7,7 +7,6 @@ export const styles = css `
 
     :host {
         height: ${controlHeight};
-        box-sizing: border-box;
         padding-left: calc(4px - ${borderWidth});
 
         ${

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 '../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"]}
+{"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;mCACI,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        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-button/styles.js

@@ -16,7 +16,6 @@ export const styles = css `
         cursor: pointer;
         outline: none;
         border: none;
-        box-sizing: border-box;
         transition: box-shadow ${smallDelay};
     }
 

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 '../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"]}
+{"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;;;;iCAIE,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        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

@@ -21,7 +21,6 @@ export const styles = css `
     .control {
         width: calc(${controlHeight} / 2);
         height: calc(${controlHeight} / 2);
-        box-sizing: border-box;
         flex-shrink: 0;
         border: ${borderWidth} solid ${borderColor};
         padding: 2px;

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 '../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"]}
+{"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;;kBAElB,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        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/combobox/styles.js

@@ -66,7 +66,7 @@ export const styles = css `
         border-right: 2px solid rgba(${borderRgbPartialColor}, 0.15);
         height: calc(${controlHeight} - 12px);
         align-self: center;
-        padding-left: 4px;
+        margin-left: 4px;
     }
 
     .dropdown-button {

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/combobox/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,aAAa,EACb,qBAAqB,EACrB,qBAAqB,EACrB,YAAY,EACZ,gBAAgB,EAChB,WAAW,EACd,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,cAAc;MACd,WAAW;;;;;;cAMH,aAAa,UAAU,WAAW;;;;;;UAMtC,cAAc;iBACP,qBAAqB;;;;;;;;+BAQP,gBAAgB;;;;;;;;;;;;;;;;;qBAiB1B,YAAY;;;;;;;;;;;yBAWR,YAAY;;;;;;uCAME,qBAAqB;uBACrC,aAAa;;;;;;UAM1B,aAAa,CAAC,iBAAiB;uBAClB,YAAY;;;;gBAInB,qBAAqB;;;;;;CAMpC,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport {\n    controlHeight,\n    bodyDisabledFontColor,\n    borderRgbPartialColor,\n    smallPadding,\n    borderHoverColor,\n    borderWidth\n} from '../theme-provider/design-tokens';\n\nimport { styles as dropdownStyles } from '../patterns/dropdown/styles';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport { focusVisible } from '../utilities/style/focus';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { DropdownAppearance } from '../select/types';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n    ${dropdownStyles}\n    ${errorStyles}\n\n    :host {\n        --ni-private-hover-bottom-border-width: 2px;\n        --ni-private-bottom-border-width: 1px;\n        --ni-private-height-within-border: calc(\n            ${controlHeight} - 2 * ${borderWidth}\n        );\n    }\n\n    :host([disabled]) *,\n    :host([disabled]) {\n        ${userSelectNone}\n        color: ${bodyDisabledFontColor};\n    }\n\n    .control {\n        bottom-border-width: var(--ni-private-bottom-border-width);\n    }\n\n    .control:focus-within {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    .selected-value {\n        -webkit-appearance: none;\n        background: transparent;\n        border: none;\n        color: inherit;\n        margin: auto 0;\n        width: 100%;\n        font: inherit;\n        height: var(--ni-private-height-within-border);\n    }\n\n    .selected-value:hover,\n    .selected-value:disabled,\n    .selected-value:active,\n    .selected-value${focusVisible} {\n        outline: none;\n    }\n\n    [part='indicator'] {\n        display: none;\n    }\n\n    .end-slot-container {\n        display: flex;\n        align-items: baseline;\n        padding-right: ${smallPadding};\n    }\n\n    .separator {\n        display: inline;\n        width: 2px;\n        border-right: 2px solid rgba(${borderRgbPartialColor}, 0.15);\n        height: calc(${controlHeight} - 12px);\n        align-self: center;\n        padding-left: 4px;\n    }\n\n    .dropdown-button {\n        ${controlHeight.cssCustomProperty}: 24px;\n        margin-left: ${smallPadding};\n    }\n\n    :host([disabled]) .dropdown-icon {\n        fill: ${bodyDisabledFontColor};\n    }\n\n    :host(:empty) .listbox {\n        display: none;\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        DropdownAppearance.block,\n        css`\n            :host([error-visible]) .control {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/combobox/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,aAAa,EACb,qBAAqB,EACrB,qBAAqB,EACrB,YAAY,EACZ,gBAAgB,EAChB,WAAW,EACd,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,cAAc;MACd,WAAW;;;;;;cAMH,aAAa,UAAU,WAAW;;;;;;UAMtC,cAAc;iBACP,qBAAqB;;;;;;;;+BAQP,gBAAgB;;;;;;;;;;;;;;;;;qBAiB1B,YAAY;;;;;;;;;;;yBAWR,YAAY;;;;;;uCAME,qBAAqB;uBACrC,aAAa;;;;;;UAM1B,aAAa,CAAC,iBAAiB;uBAClB,YAAY;;;;gBAInB,qBAAqB;;;;;;CAMpC,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport {\n    controlHeight,\n    bodyDisabledFontColor,\n    borderRgbPartialColor,\n    smallPadding,\n    borderHoverColor,\n    borderWidth\n} from '../theme-provider/design-tokens';\n\nimport { styles as dropdownStyles } from '../patterns/dropdown/styles';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport { focusVisible } from '../utilities/style/focus';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { DropdownAppearance } from '../select/types';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n    ${dropdownStyles}\n    ${errorStyles}\n\n    :host {\n        --ni-private-hover-bottom-border-width: 2px;\n        --ni-private-bottom-border-width: 1px;\n        --ni-private-height-within-border: calc(\n            ${controlHeight} - 2 * ${borderWidth}\n        );\n    }\n\n    :host([disabled]) *,\n    :host([disabled]) {\n        ${userSelectNone}\n        color: ${bodyDisabledFontColor};\n    }\n\n    .control {\n        bottom-border-width: var(--ni-private-bottom-border-width);\n    }\n\n    .control:focus-within {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    .selected-value {\n        -webkit-appearance: none;\n        background: transparent;\n        border: none;\n        color: inherit;\n        margin: auto 0;\n        width: 100%;\n        font: inherit;\n        height: var(--ni-private-height-within-border);\n    }\n\n    .selected-value:hover,\n    .selected-value:disabled,\n    .selected-value:active,\n    .selected-value${focusVisible} {\n        outline: none;\n    }\n\n    [part='indicator'] {\n        display: none;\n    }\n\n    .end-slot-container {\n        display: flex;\n        align-items: baseline;\n        padding-right: ${smallPadding};\n    }\n\n    .separator {\n        display: inline;\n        width: 2px;\n        border-right: 2px solid rgba(${borderRgbPartialColor}, 0.15);\n        height: calc(${controlHeight} - 12px);\n        align-self: center;\n        margin-left: 4px;\n    }\n\n    .dropdown-button {\n        ${controlHeight.cssCustomProperty}: 24px;\n        margin-left: ${smallPadding};\n    }\n\n    :host([disabled]) .dropdown-icon {\n        fill: ${bodyDisabledFontColor};\n    }\n\n    :host(:empty) .listbox {\n        display: none;\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        DropdownAppearance.block,\n        css`\n            :host([error-visible]) .control {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n        `\n    )\n);\n"]}

package/dist/esm/drawer/styles.js

@@ -52,7 +52,6 @@ export const styles = css `
     }
 
     .dialog-contents {
-        box-sizing: border-box;
         display: flex;
         flex-direction: column;
         position: absolute;

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 '../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"]}
+{"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;;;;;;;;;;;;iBAYxD,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        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/menu/styles.js

@@ -34,7 +34,7 @@ export const styles = css `
     }
 
     ::slotted(hr) {
-        box-sizing: content-box;
+        box-sizing: border-box;
         height: 2px;
         margin: ${smallPadding};
         border: none;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/menu/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,wBAAwB,EACxB,oBAAoB,EACpB,YAAY,EACZ,aAAa,EACb,mBAAmB,EACnB,YAAY,EACf,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,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;sBAGC,0BAA0B;kBAC9B,WAAW,UAAU,gBAAgB;;qBAElC,YAAY;;sBAEX,mBAAmB;;;;;;;;;oBASrB,aAAa;;;;;;;;;;;;kBAYf,YAAY;;sBAER,WAAW;;;;;;gBAMjB,eAAe;iBACd,oBAAoB;0BACX,wBAAwB;uBAC3B,YAAY;0BACT,YAAY;;;gBAGtB,iBAAiB;;;CAGhC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEnD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../utilities/style/display';\n\nimport {\n    applicationBackgroundColor,\n    borderWidth,\n    borderColor,\n    popupBorderColor,\n    groupHeaderFont,\n    groupHeaderTextTransform,\n    groupHeaderFontColor,\n    smallPadding,\n    mediumPadding,\n    elevation2BoxShadow,\n    menuMinWidth\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 { anchorMenuItemTag } from '../anchor-menu-item';\n\nexport const styles = css`\n    ${display('grid')}\n\n    :host {\n        background: ${applicationBackgroundColor};\n        border: ${borderWidth} solid ${popupBorderColor};\n        margin: 0;\n        min-width: ${menuMinWidth};\n        width: max-content;\n        box-shadow: ${elevation2BoxShadow};\n    }\n\n    slot {\n        padding: 4px;\n        display: block;\n    }\n\n    :host([slot='submenu']) {\n        margin: 0 ${mediumPadding};\n        cursor: default;\n    }\n\n    ::slotted(*) {\n        padding-left: 8px;\n        padding-right: 8px;\n    }\n\n    ::slotted(hr) {\n        box-sizing: content-box;\n        height: 2px;\n        margin: ${smallPadding};\n        border: none;\n        background: ${borderColor};\n        opacity: 0.1;\n    }\n\n    ::slotted(header) {\n        display: flex;\n        font: ${groupHeaderFont};\n        color: ${groupHeaderFontColor};\n        text-transform: ${groupHeaderTextTransform};\n        padding-top: ${smallPadding};\n        padding-bottom: ${smallPadding};\n    }\n\n    ::slotted(${anchorMenuItemTag}) {\n        padding: 0px;\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.color,\n        css`\n            slot {\n                background: ${hexToRgbaCssColor(White, 0.15)};\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/menu/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,wBAAwB,EACxB,oBAAoB,EACpB,YAAY,EACZ,aAAa,EACb,mBAAmB,EACnB,YAAY,EACf,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,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;sBAGC,0BAA0B;kBAC9B,WAAW,UAAU,gBAAgB;;qBAElC,YAAY;;sBAEX,mBAAmB;;;;;;;;;oBASrB,aAAa;;;;;;;;;;;;kBAYf,YAAY;;sBAER,WAAW;;;;;;gBAMjB,eAAe;iBACd,oBAAoB;0BACX,wBAAwB;uBAC3B,YAAY;0BACT,YAAY;;;gBAGtB,iBAAiB;;;CAGhC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEnD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../utilities/style/display';\n\nimport {\n    applicationBackgroundColor,\n    borderWidth,\n    borderColor,\n    popupBorderColor,\n    groupHeaderFont,\n    groupHeaderTextTransform,\n    groupHeaderFontColor,\n    smallPadding,\n    mediumPadding,\n    elevation2BoxShadow,\n    menuMinWidth\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 { anchorMenuItemTag } from '../anchor-menu-item';\n\nexport const styles = css`\n    ${display('grid')}\n\n    :host {\n        background: ${applicationBackgroundColor};\n        border: ${borderWidth} solid ${popupBorderColor};\n        margin: 0;\n        min-width: ${menuMinWidth};\n        width: max-content;\n        box-shadow: ${elevation2BoxShadow};\n    }\n\n    slot {\n        padding: 4px;\n        display: block;\n    }\n\n    :host([slot='submenu']) {\n        margin: 0 ${mediumPadding};\n        cursor: default;\n    }\n\n    ::slotted(*) {\n        padding-left: 8px;\n        padding-right: 8px;\n    }\n\n    ::slotted(hr) {\n        box-sizing: border-box;\n        height: 2px;\n        margin: ${smallPadding};\n        border: none;\n        background: ${borderColor};\n        opacity: 0.1;\n    }\n\n    ::slotted(header) {\n        display: flex;\n        font: ${groupHeaderFont};\n        color: ${groupHeaderFontColor};\n        text-transform: ${groupHeaderTextTransform};\n        padding-top: ${smallPadding};\n        padding-bottom: ${smallPadding};\n    }\n\n    ::slotted(${anchorMenuItemTag}) {\n        padding: 0px;\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.color,\n        css`\n            slot {\n                background: ${hexToRgbaCssColor(White, 0.15)};\n            }\n        `\n    )\n);\n"]}

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

@@ -8,7 +8,6 @@ export const styles = css `
     :host {
         contain: layout;
         overflow: visible;
-        box-sizing: border-box;
         height: ${controlHeight};
         grid-template-columns: 1fr;
         column-gap: 8px;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/menu-item/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,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,qBAAqB,EACrB,SAAS,EACZ,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;kBAMH,aAAa;;;;;;;;;;iBAUd,aAAa;;;gBAGd,QAAQ;;YAEZ,YAAY;6BACK,gBAAgB;;;;sBAIvB,cAAc;;;sBAGd,cAAc;;;sBAGd,iBAAiB;;;iBAGtB,qBAAqB;;;;;;;;qCAQD,QAAQ;;;iCAGZ,QAAQ;;;iCAGR,QAAQ,QAAQ,QAAQ;;;;;;UAM/C,SAAS,CAAC,iBAAiB;iBACpB,QAAQ;kBACP,QAAQ;;;;;;;;;;;iBAWT,QAAQ;kBACP,QAAQ;;;;;;;;CAQzB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport { focusVisible } from '../utilities/style/focus';\n\nimport {\n    controlHeight,\n    fillSelectedColor,\n    fillHoverColor,\n    bodyFontColor,\n    borderHoverColor,\n    iconSize,\n    bodyFont,\n    bodyDisabledFontColor,\n    iconColor\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('grid')}\n\n    :host {\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        padding-left: 8px;\n        padding-right: 8px;\n        margin: 0 0;\n        white-space: nowrap;\n        color: ${bodyFontColor};\n        fill: currentcolor;\n        cursor: pointer;\n        font: ${bodyFont};\n    }\n    :host(${focusVisible}) {\n        outline: 2px solid ${borderHoverColor};\n        outline-offset: -2px;\n    }\n    :host([expanded]) {\n        background: ${fillHoverColor};\n    }\n    :host(:hover) {\n        background: ${fillHoverColor};\n    }\n    :host(:active:not([expanded])) {\n        background: ${fillSelectedColor};\n    }\n    :host([disabled]) {\n        color: ${bodyDisabledFontColor};\n        fill: currentcolor;\n        cursor: default;\n    }\n    :host([disabled]:hover) {\n        background: transparent;\n    }\n    :host(.indent-0[aria-haspopup='menu']) {\n        grid-template-columns: 1fr ${iconSize};\n    }\n    :host(.indent-1) {\n        grid-template-columns: ${iconSize} 1fr;\n    }\n    :host(.indent-1[aria-haspopup='menu']) {\n        grid-template-columns: ${iconSize} 1fr ${iconSize};\n    }\n    [part='start'] {\n        display: contents;\n    }\n    slot[name='start']::slotted(*) {\n        ${iconColor.cssCustomProperty}: currentcolor;\n        width: ${iconSize};\n        height: ${iconSize};\n    }\n    :host(.indent-1) [part='start'] {\n        grid-column: 1;\n    }\n    :host(.indent-1) .content {\n        grid-column: 2;\n    }\n    .expand-collapse-glyph-container {\n        grid-row: 1;\n        fill: currentcolor;\n        width: ${iconSize};\n        height: ${iconSize};\n    }\n    :host(.indent-0) .expand-collapse-glyph-container {\n        grid-column: 2;\n    }\n    :host(.indent-1) .expand-collapse-glyph-container {\n        grid-column: 3;\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/menu-item/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,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,qBAAqB,EACrB,SAAS,EACZ,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;kBAKH,aAAa;;;;;;;;;;iBAUd,aAAa;;;gBAGd,QAAQ;;YAEZ,YAAY;6BACK,gBAAgB;;;;sBAIvB,cAAc;;;sBAGd,cAAc;;;sBAGd,iBAAiB;;;iBAGtB,qBAAqB;;;;;;;;qCAQD,QAAQ;;;iCAGZ,QAAQ;;;iCAGR,QAAQ,QAAQ,QAAQ;;;;;;UAM/C,SAAS,CAAC,iBAAiB;iBACpB,QAAQ;kBACP,QAAQ;;;;;;;;;;;iBAWT,QAAQ;kBACP,QAAQ;;;;;;;;CAQzB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport { focusVisible } from '../utilities/style/focus';\n\nimport {\n    controlHeight,\n    fillSelectedColor,\n    fillHoverColor,\n    bodyFontColor,\n    borderHoverColor,\n    iconSize,\n    bodyFont,\n    bodyDisabledFontColor,\n    iconColor\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('grid')}\n\n    :host {\n        contain: layout;\n        overflow: visible;\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        padding-left: 8px;\n        padding-right: 8px;\n        margin: 0 0;\n        white-space: nowrap;\n        color: ${bodyFontColor};\n        fill: currentcolor;\n        cursor: pointer;\n        font: ${bodyFont};\n    }\n    :host(${focusVisible}) {\n        outline: 2px solid ${borderHoverColor};\n        outline-offset: -2px;\n    }\n    :host([expanded]) {\n        background: ${fillHoverColor};\n    }\n    :host(:hover) {\n        background: ${fillHoverColor};\n    }\n    :host(:active:not([expanded])) {\n        background: ${fillSelectedColor};\n    }\n    :host([disabled]) {\n        color: ${bodyDisabledFontColor};\n        fill: currentcolor;\n        cursor: default;\n    }\n    :host([disabled]:hover) {\n        background: transparent;\n    }\n    :host(.indent-0[aria-haspopup='menu']) {\n        grid-template-columns: 1fr ${iconSize};\n    }\n    :host(.indent-1) {\n        grid-template-columns: ${iconSize} 1fr;\n    }\n    :host(.indent-1[aria-haspopup='menu']) {\n        grid-template-columns: ${iconSize} 1fr ${iconSize};\n    }\n    [part='start'] {\n        display: contents;\n    }\n    slot[name='start']::slotted(*) {\n        ${iconColor.cssCustomProperty}: currentcolor;\n        width: ${iconSize};\n        height: ${iconSize};\n    }\n    :host(.indent-1) [part='start'] {\n        grid-column: 1;\n    }\n    :host(.indent-1) .content {\n        grid-column: 2;\n    }\n    .expand-collapse-glyph-container {\n        grid-row: 1;\n        fill: currentcolor;\n        width: ${iconSize};\n        height: ${iconSize};\n    }\n    :host(.indent-0) .expand-collapse-glyph-container {\n        grid-column: 2;\n    }\n    :host(.indent-1) .expand-collapse-glyph-container {\n        grid-column: 3;\n    }\n`;\n"]}

package/dist/esm/number-field/styles.js

@@ -36,7 +36,6 @@ export const styles = css `
     }
 
     .root {
-        box-sizing: border-box;
         position: relative;
         display: flex;
         flex-direction: row;
@@ -153,7 +152,7 @@ export const styles = css `
 
     .error-icon {
         order: 1;
-        padding-right: ${smallPadding};
+        margin-right: ${smallPadding};
     }
 `.withBehaviors(appearanceBehavior(NumberFieldAppearance.underline, css `
             .root {

package/dist/esm/number-field/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/number-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,aAAa,EACb,YAAY,EACZ,6BAA6B,EAChC,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;MACvB,WAAW;;;gBAGD,QAAQ;;UAEd,cAAc;iBACP,aAAa;mDACqB,WAAW;;cAEhD,aAAa,UAAU,WAAW;;;;;iBAK/B,qBAAqB;;;;;;iBAMrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;iCAWb,qBAAqB;mBACnC,WAAW;;;;+BAIC,gBAAgB;;;;6BAIlB,qBAAqB;;;;+BAInB,SAAS;;;;UAI9B,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;4BAMI,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;;;;;wBAwBhB,aAAa;;;;;;;;;;;iBAWpB,qBAAqB;;;;iBAIrB,qBAAqB;;;;;;;MAOhC;AACE;sFACsF,CAAC,EAC3F;;;yBAGqB,YAAY;;;;;;;;UAQ3B,aAAa,CAAC,iBAAiB;;;;;;;;;yBAShB,YAAY;;CAEpC,CAAC,aAAa,CACX,kBAAkB,CACd,qBAAqB,CAAC,SAAS,EAC/B,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,kBAAkB,CACd,qBAAqB,CAAC,KAAK,EAC3B,GAAG,CAAA;;yCAE8B,qBAAqB;;;;;uCAKvB,WAAW;;;;;;;;;yCAST,qBAAqB;;SAErD,CACJ,EACD,kBAAkB,CACd,qBAAqB,CAAC,OAAO,EAC7B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    borderRgbPartialColor,\n    borderHoverColor,\n    borderWidth,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    controlHeight,\n    controlLabelFont,\n    controlLabelFontColor,\n    smallDelay,\n    bodyFont,\n    failColor,\n    mediumPadding,\n    smallPadding,\n    controlLabelDisabledFontColor\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { NumberFieldAppearance } from './types';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n    ${display('inline-block')}\n    ${errorStyles}\n\n    :host {\n        font: ${bodyFont};\n        outline: none;\n        ${userSelectNone}\n        color: ${bodyFontColor};\n        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n        --ni-private-height-within-border: calc(\n            ${controlHeight} - 2 * ${borderWidth}\n        );\n    }\n\n    :host([disabled]) {\n        color: ${bodyDisabledFontColor};\n        cursor: default;\n    }\n\n    .label {\n        display: flex;\n        color: ${controlLabelFontColor};\n        font: ${controlLabelFont};\n    }\n\n    :host([disabled]) .label {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    .root {\n        box-sizing: border-box;\n        position: relative;\n        display: flex;\n        flex-direction: row;\n        justify-content: center;\n        align-items: center;\n        border-radius: 0px;\n        border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n        padding: ${borderWidth};\n    }\n\n    .root:focus-within {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    :host([disabled]) .root {\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([error-visible]) .root {\n        border-bottom-color: ${failColor};\n    }\n\n    .root::before {\n        ${/* Empty string causes alignment issue */ ''}\n        content: ' ';\n        color: transparent;\n        width: 0px;\n        ${userSelectNone}\n    }\n\n    .root::after {\n        content: '';\n        position: absolute;\n        bottom: calc(-1 * ${borderWidth});\n        width: 0px;\n        height: 0px;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-hover-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        .root::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host([error-visible]) .root::after {\n        border-bottom-color: ${failColor};\n    }\n\n    :host(:hover) .root::after {\n        width: 100%;\n    }\n\n    :host([disabled]:hover) .root::after {\n        width: 0px;\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    .control {\n        -webkit-appearance: none;\n        font: inherit;\n        background: transparent;\n        color: inherit;\n        height: var(--ni-private-height-within-border);\n        width: 100%;\n        border: none;\n        padding: 0px;\n        padding-left: ${mediumPadding};\n    }\n\n    .control:hover,\n    .control:focus,\n    .control:disabled,\n    .control:active {\n        outline: none;\n    }\n\n    .control::placeholder {\n        color: ${controlLabelFontColor};\n    }\n\n    .control[disabled]::placeholder {\n        color: ${bodyDisabledFontColor};\n    }\n\n    .controls {\n        display: contents;\n    }\n\n    ${\n        /* We are using flex `order` to define the visual ordering of the inc/dec buttons\n         and the invalid icon because they are not \"interactive\" i.e. part of the tab order */ ''\n    }\n    .step-up {\n        order: 3;\n        padding-right: ${smallPadding};\n    }\n\n    .step-down {\n        order: 2;\n    }\n\n    .step-up-down-button {\n        ${controlHeight.cssCustomProperty}: 24px;\n    }\n\n    [part='end'] {\n        display: contents;\n    }\n\n    .error-icon {\n        order: 1;\n        padding-right: ${smallPadding};\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        NumberFieldAppearance.underline,\n        css`\n            .root {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n        `\n    ),\n    appearanceBehavior(\n        NumberFieldAppearance.block,\n        css`\n            .root {\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            .root:focus-within,\n            :host([error-visible]) .root {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host(:hover) .root {\n                padding-bottom: 0;\n            }\n\n            :host([disabled]) .root {\n                background-color: rgba(${borderRgbPartialColor}, 0.07);\n            }\n        `\n    ),\n    appearanceBehavior(\n        NumberFieldAppearance.outline,\n        css`\n            .root {\n                border-width: ${borderWidth};\n                padding: 0;\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/number-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,aAAa,EACb,YAAY,EACZ,6BAA6B,EAChC,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;MACvB,WAAW;;;gBAGD,QAAQ;;UAEd,cAAc;iBACP,aAAa;mDACqB,WAAW;;cAEhD,aAAa,UAAU,WAAW;;;;;iBAK/B,qBAAqB;;;;;;iBAMrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;iCAUb,qBAAqB;mBACnC,WAAW;;;;+BAIC,gBAAgB;;;;6BAIlB,qBAAqB;;;;+BAInB,SAAS;;;;UAI9B,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;4BAMI,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;;;;;wBAwBhB,aAAa;;;;;;;;;;;iBAWpB,qBAAqB;;;;iBAIrB,qBAAqB;;;;;;;MAOhC;AACE;sFACsF,CAAC,EAC3F;;;yBAGqB,YAAY;;;;;;;;UAQ3B,aAAa,CAAC,iBAAiB;;;;;;;;;wBASjB,YAAY;;CAEnC,CAAC,aAAa,CACX,kBAAkB,CACd,qBAAqB,CAAC,SAAS,EAC/B,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,kBAAkB,CACd,qBAAqB,CAAC,KAAK,EAC3B,GAAG,CAAA;;yCAE8B,qBAAqB;;;;;uCAKvB,WAAW;;;;;;;;;yCAST,qBAAqB;;SAErD,CACJ,EACD,kBAAkB,CACd,qBAAqB,CAAC,OAAO,EAC7B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    borderRgbPartialColor,\n    borderHoverColor,\n    borderWidth,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    controlHeight,\n    controlLabelFont,\n    controlLabelFontColor,\n    smallDelay,\n    bodyFont,\n    failColor,\n    mediumPadding,\n    smallPadding,\n    controlLabelDisabledFontColor\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { NumberFieldAppearance } from './types';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n    ${display('inline-block')}\n    ${errorStyles}\n\n    :host {\n        font: ${bodyFont};\n        outline: none;\n        ${userSelectNone}\n        color: ${bodyFontColor};\n        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n        --ni-private-height-within-border: calc(\n            ${controlHeight} - 2 * ${borderWidth}\n        );\n    }\n\n    :host([disabled]) {\n        color: ${bodyDisabledFontColor};\n        cursor: default;\n    }\n\n    .label {\n        display: flex;\n        color: ${controlLabelFontColor};\n        font: ${controlLabelFont};\n    }\n\n    :host([disabled]) .label {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    .root {\n        position: relative;\n        display: flex;\n        flex-direction: row;\n        justify-content: center;\n        align-items: center;\n        border-radius: 0px;\n        border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n        padding: ${borderWidth};\n    }\n\n    .root:focus-within {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    :host([disabled]) .root {\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([error-visible]) .root {\n        border-bottom-color: ${failColor};\n    }\n\n    .root::before {\n        ${/* Empty string causes alignment issue */ ''}\n        content: ' ';\n        color: transparent;\n        width: 0px;\n        ${userSelectNone}\n    }\n\n    .root::after {\n        content: '';\n        position: absolute;\n        bottom: calc(-1 * ${borderWidth});\n        width: 0px;\n        height: 0px;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-hover-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        .root::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host([error-visible]) .root::after {\n        border-bottom-color: ${failColor};\n    }\n\n    :host(:hover) .root::after {\n        width: 100%;\n    }\n\n    :host([disabled]:hover) .root::after {\n        width: 0px;\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    .control {\n        -webkit-appearance: none;\n        font: inherit;\n        background: transparent;\n        color: inherit;\n        height: var(--ni-private-height-within-border);\n        width: 100%;\n        border: none;\n        padding: 0px;\n        padding-left: ${mediumPadding};\n    }\n\n    .control:hover,\n    .control:focus,\n    .control:disabled,\n    .control:active {\n        outline: none;\n    }\n\n    .control::placeholder {\n        color: ${controlLabelFontColor};\n    }\n\n    .control[disabled]::placeholder {\n        color: ${bodyDisabledFontColor};\n    }\n\n    .controls {\n        display: contents;\n    }\n\n    ${\n        /* We are using flex `order` to define the visual ordering of the inc/dec buttons\n         and the invalid icon because they are not \"interactive\" i.e. part of the tab order */ ''\n    }\n    .step-up {\n        order: 3;\n        padding-right: ${smallPadding};\n    }\n\n    .step-down {\n        order: 2;\n    }\n\n    .step-up-down-button {\n        ${controlHeight.cssCustomProperty}: 24px;\n    }\n\n    [part='end'] {\n        display: contents;\n    }\n\n    .error-icon {\n        order: 1;\n        margin-right: ${smallPadding};\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        NumberFieldAppearance.underline,\n        css`\n            .root {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n        `\n    ),\n    appearanceBehavior(\n        NumberFieldAppearance.block,\n        css`\n            .root {\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            .root:focus-within,\n            :host([error-visible]) .root {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host(:hover) .root {\n                padding-bottom: 0;\n            }\n\n            :host([disabled]) .root {\n                background-color: rgba(${borderRgbPartialColor}, 0.07);\n            }\n        `\n    ),\n    appearanceBehavior(\n        NumberFieldAppearance.outline,\n        css`\n            .root {\n                border-width: ${borderWidth};\n                padding: 0;\n            }\n        `\n    )\n);\n"]}

package/dist/esm/patterns/button/styles.js

@@ -19,7 +19,6 @@ export const styles = css `
             cursor: pointer;
             outline: none;
             border: none;
-            box-sizing: border-box;
             ${
 /*
     Not sure why but this is needed to get buttons with icons and buttons
@@ -34,7 +33,6 @@ export const styles = css `
             height: 100%;
             width: 100%;
             border: ${borderWidth} solid transparent;
-            box-sizing: border-box;
             color: inherit;
             border-radius: inherit;
             fill: inherit;
@@ -68,10 +66,9 @@ export const styles = css `
             width: 100%;
             height: 100%;
             pointer-events: none;
-            box-sizing: border-box;
             outline: 0px solid transparent;
             color: transparent;
-            background-clip: content-box;
+            background-clip: border-box;
             transition: outline ${smallDelay} ease-in-out;
         }
 

package/dist/esm/patterns/button/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,eAAe,EACf,oBAAoB,EACpB,4BAA4B,EAC5B,aAAa,EACb,iBAAiB,EACjB,SAAS,EACT,UAAU,EACV,eAAe,EACf,sBAAsB,EACtB,sBAAsB,EACtB,qBAAqB,EACrB,0BAA0B,EAC1B,8BAA8B,EAC9B,4BAA4B,EAC/B,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAE3E,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,aAAa,CAAC;;;;sBAIV,aAAa;qBACd,oBAAoB;oBACrB,eAAe;;;;;cAKrB;AACE;;;;EAIE,CAAC,EACP;;;;;;;;sBAQU,WAAW;;;;;;;;;;;;;yBAaR,eAAe;;;6BAGX,UAAU;+BACR,UAAU;kCACP,UAAU;;;;;;;;;;;;;;;;;;;;;kCAqBV,UAAU;;;;;;;;;cAS9B,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;cAIpD,gBAAgB;;;;;cAKhB,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;4BAMtC,gBAAgB;sCACN,WAAW,IAAI,gBAAgB;;;;;kBAKnD,YAAY;4BACF,gBAAgB;sCACN,WAAW,IAAI,gBAAgB;;;kBAGnD,YAAY;uBACP,WAAW,UAAU,gBAAgB;;;;;;;;qBAQvC,oBAAoB;4BACb,gBAAgB;;kBAE1B,iBAAiB;kBACjB,iBAAiB;;;;;;;;;;;cAWrB,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;;;;;qBAU7C,4BAA4B;;;;;;;;;;;;;cAanC,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;;;;;;;;;;CAejE,CAAC,aAAa,CACX,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;;yCAG8B,qBAAqB;;;;;;yCAMrB,qBAAqB;;;SAGrD,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;;;SAMF,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;+BAIoB,qBAAqB;+BACrB,qBAAqB;;yCAEX,qBAAqB;;;;;;;;;;;0BAWpC,YAAY;;;;;;;;+BAQP,qBAAqB;+BACrB,qBAAqB;;yCAEX,qBAAqB;;;SAGrD,CACJ,CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,6BAA6B,GAAG,GAAG,CAAA,EAAE,CAAC,aAAa,CAC5D,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;;oCAGyB,qBAAqB;;;;oCAIrB,8BAA8B;6BACrC,4BAA4B;;;;;sBAKnC,SAAS,CAAC,iBAAiB,KAAK,4BAA4B;;;;;;6BAMrD,4BAA4B;;;;;;;;;sBASnC,SAAS,CAAC,iBAAiB,KAAK,4BAA4B;;;SAGzE,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;0BAIe,sBAAsB;0BACtB,sBAAsB;;6BAEnB,sBAAsB;oCACf,sBAAsB;;;;;0BAKhC,qBAAqB;0BACrB,qBAAqB;;6BAElB,0BAA0B;oCACnB,qBAAqB;;;;;sBAKnC,SAAS,CAAC,iBAAiB,KAAK,sBAAsB;;;;;sBAKtD,SAAS,CAAC,iBAAiB,KAAK,sBAAsB;;;SAGnE,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../utilities/style/display';\nimport { focusVisible } from '../../utilities/style/focus';\nimport {\n    actionRgbPartialColor,\n    borderHoverColor,\n    borderRgbPartialColor,\n    borderWidth,\n    buttonLabelFont,\n    buttonLabelFontColor,\n    buttonLabelDisabledFontColor,\n    controlHeight,\n    fillSelectedColor,\n    iconColor,\n    smallDelay,\n    standardPadding,\n    buttonPrimaryFontColor,\n    buttonFillPrimaryColor,\n    buttonFillAccentColor,\n    buttonAccentBlockFontColor,\n    buttonBorderAccentOutlineColor,\n    buttonAccentOutlineFontColor\n} from '../../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../../utilities/style/appearance';\nimport { ButtonAppearance } from './types';\nimport { accessiblyHidden } from '../../utilities/style/accessibly-hidden';\n\nexport const styles = css`\n    @layer base, checked, hover, focusVisible, active, disabled, top;\n\n    @layer base {\n        ${display('inline-flex')}\n\n        :host {\n            background-color: transparent;\n            height: ${controlHeight};\n            color: ${buttonLabelFontColor};\n            font: ${buttonLabelFont};\n            cursor: pointer;\n            outline: none;\n            border: none;\n            box-sizing: border-box;\n            ${\n                /*\n                    Not sure why but this is needed to get buttons with icons and buttons\n                    without icons to align on the same line when the button is inline-flex\n                    See: https://github.com/ni/nimble/issues/503\n                */ ''\n            }\n            vertical-align: middle;\n        }\n\n        .control {\n            background-color: transparent;\n            height: 100%;\n            width: 100%;\n            border: ${borderWidth} solid transparent;\n            box-sizing: border-box;\n            color: inherit;\n            border-radius: inherit;\n            fill: inherit;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            gap: 4px;\n            cursor: inherit;\n            font: inherit;\n            outline: none;\n            margin: 0;\n            padding: 0 ${standardPadding};\n            position: relative;\n            transition:\n                box-shadow ${smallDelay} ease-in-out,\n                border-color ${smallDelay} ease-in-out,\n                background-size ${smallDelay} ease-in-out;\n            background-size: 100% 100%;\n            background-repeat: no-repeat;\n            background-position: center;\n        }\n\n        :host([content-hidden]) .control {\n            aspect-ratio: 1 / 1;\n            padding: 0px;\n        }\n\n        .control::before {\n            content: '';\n            position: absolute;\n            width: 100%;\n            height: 100%;\n            pointer-events: none;\n            box-sizing: border-box;\n            outline: 0px solid transparent;\n            color: transparent;\n            background-clip: content-box;\n            transition: outline ${smallDelay} ease-in-out;\n        }\n\n        .content {\n            display: contents;\n        }\n\n        [part='start'] {\n            display: contents;\n            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n        }\n\n        :host([content-hidden]) .content {\n            ${accessiblyHidden}\n        }\n\n        [part='end'] {\n            display: contents;\n            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n        }\n    }\n\n    @layer hover {\n        .control:hover {\n            border-color: ${borderHoverColor};\n            box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n        }\n    }\n\n    @layer focusVisible {\n        .control${focusVisible} {\n            border-color: ${borderHoverColor};\n            box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n        }\n\n        .control${focusVisible}::before {\n            outline: ${borderWidth} solid ${borderHoverColor};\n            outline-offset: -3px;\n        }\n    }\n\n    @layer active {\n        .control:active {\n            box-shadow: none;\n            color: ${buttonLabelFontColor};\n            border-color: ${borderHoverColor};\n            background-image: linear-gradient(\n                ${fillSelectedColor},\n                ${fillSelectedColor}\n            );\n            background-size: calc(100% - 2px) calc(100% - 2px);\n        }\n\n        .control:active::before {\n            outline: none;\n        }\n\n        .control:active [part='start'],\n        .control:active [part='end'] {\n            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n        }\n    }\n\n    @layer disabled {\n        :host([disabled]) {\n            cursor: default;\n        }\n\n        :host([disabled]) .control {\n            color: ${buttonLabelDisabledFontColor};\n            box-shadow: none;\n            background-image: none;\n            background-size: 100% 100%;\n        }\n\n        :host([disabled]) .control::before {\n            box-shadow: none;\n        }\n\n        :host([disabled]) slot[name='start']::slotted(*),\n        :host([disabled]) slot[name='end']::slotted(*) {\n            opacity: 0.3;\n            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n        }\n    }\n\n    @layer top {\n        @media (prefers-reduced-motion) {\n            .control {\n                transition-duration: 0s;\n            }\n        }\n\n        :host([content-hidden]) [part='end'] {\n            display: none;\n        }\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        ButtonAppearance.outline,\n        css`\n            @layer base {\n                .control {\n                    border-color: rgba(${actionRgbPartialColor}, 0.3);\n                }\n            }\n\n            @layer disabled {\n                :host([disabled]) .control {\n                    border-color: rgba(${borderRgbPartialColor}, 0.3);\n                }\n            }\n        `\n    ),\n    appearanceBehavior(\n        ButtonAppearance.ghost,\n        css`\n            @layer disabled {\n                :host([disabled]) .control {\n                    border-color: transparent;\n                }\n            }\n        `\n    ),\n    appearanceBehavior(\n        ButtonAppearance.block,\n        css`\n            @layer base {\n                .control {\n                    background-image: linear-gradient(\n                        rgba(${borderRgbPartialColor}, 0.1),\n                        rgba(${borderRgbPartialColor}, 0.1)\n                    );\n                    border-color: rgba(${borderRgbPartialColor}, 0.1);\n                }\n            }\n\n            @layer hover {\n                .control:hover {\n                    background-size: calc(100% - 4px) calc(100% - 4px);\n                }\n            }\n\n            @layer focusVisible {\n                .control${focusVisible} {\n                    background-size: calc(100% - 4px) calc(100% - 4px);\n                }\n            }\n\n            @layer disabled {\n                :host([disabled]) .control {\n                    background-image: linear-gradient(\n                        rgba(${borderRgbPartialColor}, 0.1),\n                        rgba(${borderRgbPartialColor}, 0.1)\n                    );\n                    border-color: rgba(${borderRgbPartialColor}, 0.1);\n                }\n            }\n        `\n    )\n);\n\nexport const buttonAppearanceVariantStyles = css``.withBehaviors(\n    appearanceBehavior(\n        ButtonAppearance.outline,\n        css`\n            @layer base {\n                :host([appearance-variant='primary']) .control {\n                    border-color: ${actionRgbPartialColor};\n                }\n\n                :host([appearance-variant='accent']) .control {\n                    border-color: ${buttonBorderAccentOutlineColor};\n                    color: ${buttonAccentOutlineFontColor};\n                }\n\n                :host([appearance-variant='accent']) [part='start'],\n                :host([appearance-variant='accent']) [part='end'] {\n                    ${iconColor.cssCustomProperty}: ${buttonAccentOutlineFontColor};\n                }\n            }\n\n            @layer active {\n                :host([appearance-variant='accent']) .control:active {\n                    color: ${buttonAccentOutlineFontColor};\n                }\n\n                :host([appearance-variant='accent'])\n                    .control:active\n                    [part='start'],\n                :host([appearance-variant='accent'])\n                    .control:active\n                    [part='end'] {\n                    ${iconColor.cssCustomProperty}: ${buttonAccentOutlineFontColor};\n                }\n            }\n        `\n    ),\n    appearanceBehavior(\n        ButtonAppearance.block,\n        css`\n            @layer base {\n                :host([appearance-variant='primary']) .control {\n                    background-image: linear-gradient(\n                        ${buttonFillPrimaryColor},\n                        ${buttonFillPrimaryColor}\n                    );\n                    color: ${buttonPrimaryFontColor};\n                    border-color: ${buttonFillPrimaryColor};\n                }\n\n                :host([appearance-variant='accent']) .control {\n                    background-image: linear-gradient(\n                        ${buttonFillAccentColor},\n                        ${buttonFillAccentColor}\n                    );\n                    color: ${buttonAccentBlockFontColor};\n                    border-color: ${buttonFillAccentColor};\n                }\n\n                :host([appearance-variant='primary']) [part='start'],\n                :host([appearance-variant='primary']) [part='end'] {\n                    ${iconColor.cssCustomProperty}: ${buttonPrimaryFontColor};\n                }\n\n                :host([appearance-variant='accent']) [part='start'],\n                :host([appearance-variant='accent']) [part='end'] {\n                    ${iconColor.cssCustomProperty}: ${buttonPrimaryFontColor};\n                }\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,eAAe,EACf,oBAAoB,EACpB,4BAA4B,EAC5B,aAAa,EACb,iBAAiB,EACjB,SAAS,EACT,UAAU,EACV,eAAe,EACf,sBAAsB,EACtB,sBAAsB,EACtB,qBAAqB,EACrB,0BAA0B,EAC1B,8BAA8B,EAC9B,4BAA4B,EAC/B,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAE3E,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,aAAa,CAAC;;;;sBAIV,aAAa;qBACd,oBAAoB;oBACrB,eAAe;;;;cAIrB;AACE;;;;EAIE,CAAC,EACP;;;;;;;;sBAQU,WAAW;;;;;;;;;;;;yBAYR,eAAe;;;6BAGX,UAAU;+BACR,UAAU;kCACP,UAAU;;;;;;;;;;;;;;;;;;;;kCAoBV,UAAU;;;;;;;;;cAS9B,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;cAIpD,gBAAgB;;;;;cAKhB,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;4BAMtC,gBAAgB;sCACN,WAAW,IAAI,gBAAgB;;;;;kBAKnD,YAAY;4BACF,gBAAgB;sCACN,WAAW,IAAI,gBAAgB;;;kBAGnD,YAAY;uBACP,WAAW,UAAU,gBAAgB;;;;;;;;qBAQvC,oBAAoB;4BACb,gBAAgB;;kBAE1B,iBAAiB;kBACjB,iBAAiB;;;;;;;;;;;cAWrB,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;;;;;qBAU7C,4BAA4B;;;;;;;;;;;;;cAanC,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;;;;;;;;;;CAejE,CAAC,aAAa,CACX,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;;yCAG8B,qBAAqB;;;;;;yCAMrB,qBAAqB;;;SAGrD,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;;;SAMF,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;+BAIoB,qBAAqB;+BACrB,qBAAqB;;yCAEX,qBAAqB;;;;;;;;;;;0BAWpC,YAAY;;;;;;;;+BAQP,qBAAqB;+BACrB,qBAAqB;;yCAEX,qBAAqB;;;SAGrD,CACJ,CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,6BAA6B,GAAG,GAAG,CAAA,EAAE,CAAC,aAAa,CAC5D,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;;oCAGyB,qBAAqB;;;;oCAIrB,8BAA8B;6BACrC,4BAA4B;;;;;sBAKnC,SAAS,CAAC,iBAAiB,KAAK,4BAA4B;;;;;;6BAMrD,4BAA4B;;;;;;;;;sBASnC,SAAS,CAAC,iBAAiB,KAAK,4BAA4B;;;SAGzE,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;0BAIe,sBAAsB;0BACtB,sBAAsB;;6BAEnB,sBAAsB;oCACf,sBAAsB;;;;;0BAKhC,qBAAqB;0BACrB,qBAAqB;;6BAElB,0BAA0B;oCACnB,qBAAqB;;;;;sBAKnC,SAAS,CAAC,iBAAiB,KAAK,sBAAsB;;;;;sBAKtD,SAAS,CAAC,iBAAiB,KAAK,sBAAsB;;;SAGnE,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../utilities/style/display';\nimport { focusVisible } from '../../utilities/style/focus';\nimport {\n    actionRgbPartialColor,\n    borderHoverColor,\n    borderRgbPartialColor,\n    borderWidth,\n    buttonLabelFont,\n    buttonLabelFontColor,\n    buttonLabelDisabledFontColor,\n    controlHeight,\n    fillSelectedColor,\n    iconColor,\n    smallDelay,\n    standardPadding,\n    buttonPrimaryFontColor,\n    buttonFillPrimaryColor,\n    buttonFillAccentColor,\n    buttonAccentBlockFontColor,\n    buttonBorderAccentOutlineColor,\n    buttonAccentOutlineFontColor\n} from '../../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../../utilities/style/appearance';\nimport { ButtonAppearance } from './types';\nimport { accessiblyHidden } from '../../utilities/style/accessibly-hidden';\n\nexport const styles = css`\n    @layer base, checked, hover, focusVisible, active, disabled, top;\n\n    @layer base {\n        ${display('inline-flex')}\n\n        :host {\n            background-color: transparent;\n            height: ${controlHeight};\n            color: ${buttonLabelFontColor};\n            font: ${buttonLabelFont};\n            cursor: pointer;\n            outline: none;\n            border: none;\n            ${\n                /*\n                    Not sure why but this is needed to get buttons with icons and buttons\n                    without icons to align on the same line when the button is inline-flex\n                    See: https://github.com/ni/nimble/issues/503\n                */ ''\n            }\n            vertical-align: middle;\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            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            gap: 4px;\n            cursor: inherit;\n            font: inherit;\n            outline: none;\n            margin: 0;\n            padding: 0 ${standardPadding};\n            position: relative;\n            transition:\n                box-shadow ${smallDelay} ease-in-out,\n                border-color ${smallDelay} ease-in-out,\n                background-size ${smallDelay} ease-in-out;\n            background-size: 100% 100%;\n            background-repeat: no-repeat;\n            background-position: center;\n        }\n\n        :host([content-hidden]) .control {\n            aspect-ratio: 1 / 1;\n            padding: 0px;\n        }\n\n        .control::before {\n            content: '';\n            position: absolute;\n            width: 100%;\n            height: 100%;\n            pointer-events: none;\n            outline: 0px solid transparent;\n            color: transparent;\n            background-clip: border-box;\n            transition: outline ${smallDelay} ease-in-out;\n        }\n\n        .content {\n            display: contents;\n        }\n\n        [part='start'] {\n            display: contents;\n            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n        }\n\n        :host([content-hidden]) .content {\n            ${accessiblyHidden}\n        }\n\n        [part='end'] {\n            display: contents;\n            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n        }\n    }\n\n    @layer hover {\n        .control:hover {\n            border-color: ${borderHoverColor};\n            box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n        }\n    }\n\n    @layer focusVisible {\n        .control${focusVisible} {\n            border-color: ${borderHoverColor};\n            box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n        }\n\n        .control${focusVisible}::before {\n            outline: ${borderWidth} solid ${borderHoverColor};\n            outline-offset: -3px;\n        }\n    }\n\n    @layer active {\n        .control:active {\n            box-shadow: none;\n            color: ${buttonLabelFontColor};\n            border-color: ${borderHoverColor};\n            background-image: linear-gradient(\n                ${fillSelectedColor},\n                ${fillSelectedColor}\n            );\n            background-size: calc(100% - 2px) calc(100% - 2px);\n        }\n\n        .control:active::before {\n            outline: none;\n        }\n\n        .control:active [part='start'],\n        .control:active [part='end'] {\n            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n        }\n    }\n\n    @layer disabled {\n        :host([disabled]) {\n            cursor: default;\n        }\n\n        :host([disabled]) .control {\n            color: ${buttonLabelDisabledFontColor};\n            box-shadow: none;\n            background-image: none;\n            background-size: 100% 100%;\n        }\n\n        :host([disabled]) .control::before {\n            box-shadow: none;\n        }\n\n        :host([disabled]) slot[name='start']::slotted(*),\n        :host([disabled]) slot[name='end']::slotted(*) {\n            opacity: 0.3;\n            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n        }\n    }\n\n    @layer top {\n        @media (prefers-reduced-motion) {\n            .control {\n                transition-duration: 0s;\n            }\n        }\n\n        :host([content-hidden]) [part='end'] {\n            display: none;\n        }\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        ButtonAppearance.outline,\n        css`\n            @layer base {\n                .control {\n                    border-color: rgba(${actionRgbPartialColor}, 0.3);\n                }\n            }\n\n            @layer disabled {\n                :host([disabled]) .control {\n                    border-color: rgba(${borderRgbPartialColor}, 0.3);\n                }\n            }\n        `\n    ),\n    appearanceBehavior(\n        ButtonAppearance.ghost,\n        css`\n            @layer disabled {\n                :host([disabled]) .control {\n                    border-color: transparent;\n                }\n            }\n        `\n    ),\n    appearanceBehavior(\n        ButtonAppearance.block,\n        css`\n            @layer base {\n                .control {\n                    background-image: linear-gradient(\n                        rgba(${borderRgbPartialColor}, 0.1),\n                        rgba(${borderRgbPartialColor}, 0.1)\n                    );\n                    border-color: rgba(${borderRgbPartialColor}, 0.1);\n                }\n            }\n\n            @layer hover {\n                .control:hover {\n                    background-size: calc(100% - 4px) calc(100% - 4px);\n                }\n            }\n\n            @layer focusVisible {\n                .control${focusVisible} {\n                    background-size: calc(100% - 4px) calc(100% - 4px);\n                }\n            }\n\n            @layer disabled {\n                :host([disabled]) .control {\n                    background-image: linear-gradient(\n                        rgba(${borderRgbPartialColor}, 0.1),\n                        rgba(${borderRgbPartialColor}, 0.1)\n                    );\n                    border-color: rgba(${borderRgbPartialColor}, 0.1);\n                }\n            }\n        `\n    )\n);\n\nexport const buttonAppearanceVariantStyles = css``.withBehaviors(\n    appearanceBehavior(\n        ButtonAppearance.outline,\n        css`\n            @layer base {\n                :host([appearance-variant='primary']) .control {\n                    border-color: ${actionRgbPartialColor};\n                }\n\n                :host([appearance-variant='accent']) .control {\n                    border-color: ${buttonBorderAccentOutlineColor};\n                    color: ${buttonAccentOutlineFontColor};\n                }\n\n                :host([appearance-variant='accent']) [part='start'],\n                :host([appearance-variant='accent']) [part='end'] {\n                    ${iconColor.cssCustomProperty}: ${buttonAccentOutlineFontColor};\n                }\n            }\n\n            @layer active {\n                :host([appearance-variant='accent']) .control:active {\n                    color: ${buttonAccentOutlineFontColor};\n                }\n\n                :host([appearance-variant='accent'])\n                    .control:active\n                    [part='start'],\n                :host([appearance-variant='accent'])\n                    .control:active\n                    [part='end'] {\n                    ${iconColor.cssCustomProperty}: ${buttonAccentOutlineFontColor};\n                }\n            }\n        `\n    ),\n    appearanceBehavior(\n        ButtonAppearance.block,\n        css`\n            @layer base {\n                :host([appearance-variant='primary']) .control {\n                    background-image: linear-gradient(\n                        ${buttonFillPrimaryColor},\n                        ${buttonFillPrimaryColor}\n                    );\n                    color: ${buttonPrimaryFontColor};\n                    border-color: ${buttonFillPrimaryColor};\n                }\n\n                :host([appearance-variant='accent']) .control {\n                    background-image: linear-gradient(\n                        ${buttonFillAccentColor},\n                        ${buttonFillAccentColor}\n                    );\n                    color: ${buttonAccentBlockFontColor};\n                    border-color: ${buttonFillAccentColor};\n                }\n\n                :host([appearance-variant='primary']) [part='start'],\n                :host([appearance-variant='primary']) [part='end'] {\n                    ${iconColor.cssCustomProperty}: ${buttonPrimaryFontColor};\n                }\n\n                :host([appearance-variant='accent']) [part='start'],\n                :host([appearance-variant='accent']) [part='end'] {\n                    ${iconColor.cssCustomProperty}: ${buttonPrimaryFontColor};\n                }\n            }\n        `\n    )\n);\n"]}

package/dist/esm/patterns/dropdown/styles.js

@@ -13,7 +13,6 @@ export const styles = css `
     ${display('inline-flex')}
 
     :host {
-        box-sizing: border-box;
         color: ${bodyFontColor};
         font: ${bodyFont};
         height: ${controlHeight};
@@ -91,7 +90,6 @@ export const styles = css `
 
     .control {
         align-items: center;
-        box-sizing: border-box;
         cursor: pointer;
         display: flex;
         min-height: 100%;
@@ -118,7 +116,6 @@ export const styles = css `
     }
 
     .listbox {
-        box-sizing: border-box;
         display: inline-flex;
         flex-direction: column;
         overflow-y: auto;