@ni/nimble-components 29.0.0 → 29.1.1

package/dist/esm/label-provider/table/index.js

@@ -3,6 +3,7 @@ import { attr } from '@microsoft/fast-element';
 import { DesignSystem } from '@microsoft/fast-foundation';
 import { LabelProviderBase } from '../base';
 import { tableCellActionMenuLabel, tableColumnHeaderGroupedLabel, tableColumnHeaderSortedAscendingLabel, tableColumnHeaderSortedDescendingLabel, tableGroupCollapseLabel, tableGroupExpandLabel, tableGroupSelectAllLabel, tableCollapseAllLabel, tableRowCollapseLabel, tableRowExpandLabel, tableRowOperationColumnLabel, tableRowSelectLabel, tableSelectAllLabel, tableRowLoadingLabel, tableGroupRowPlaceholderEmptyLabel, tableGroupRowPlaceholderNoValueLabel } from './label-tokens';
+import { styles } from '../base/styles';
 const supportedLabels = {
     groupCollapse: tableGroupCollapseLabel,
     groupExpand: tableGroupExpandLabel,
@@ -79,7 +80,8 @@ __decorate([
     attr({ attribute: 'group-row-placeholder-empty' })
 ], LabelProviderTable.prototype, "groupRowPlaceholderEmpty", void 0);
 const nimbleLabelProviderTable = LabelProviderTable.compose({
-    baseName: 'label-provider-table'
+    baseName: 'label-provider-table',
+    styles
 });
 DesignSystem.getOrCreate()
     .withPrefix('nimble')

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/label-provider/table/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { attr } from '@microsoft/fast-element';\nimport { DesignSystem } from '@microsoft/fast-foundation';\nimport { DesignTokensFor, LabelProviderBase } from '../base';\nimport {\n    tableCellActionMenuLabel,\n    tableColumnHeaderGroupedLabel,\n    tableColumnHeaderSortedAscendingLabel,\n    tableColumnHeaderSortedDescendingLabel,\n    tableGroupCollapseLabel,\n    tableGroupExpandLabel,\n    tableGroupSelectAllLabel,\n    tableCollapseAllLabel,\n    tableRowCollapseLabel,\n    tableRowExpandLabel,\n    tableRowOperationColumnLabel,\n    tableRowSelectLabel,\n    tableSelectAllLabel,\n    tableRowLoadingLabel,\n    tableGroupRowPlaceholderEmptyLabel,\n    tableGroupRowPlaceholderNoValueLabel\n} from './label-tokens';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-label-provider-table': LabelProviderTable;\n    }\n}\n\nconst supportedLabels = {\n    groupCollapse: tableGroupCollapseLabel,\n    groupExpand: tableGroupExpandLabel,\n    rowCollapse: tableRowCollapseLabel,\n    rowExpand: tableRowExpandLabel,\n    collapseAll: tableCollapseAllLabel,\n    cellActionMenu: tableCellActionMenuLabel,\n    columnHeaderGrouped: tableColumnHeaderGroupedLabel,\n    columnHeaderSortedAscending: tableColumnHeaderSortedAscendingLabel,\n    columnHeaderSortedDescending: tableColumnHeaderSortedDescendingLabel,\n    selectAll: tableSelectAllLabel,\n    groupSelectAll: tableGroupSelectAllLabel,\n    rowSelect: tableRowSelectLabel,\n    rowOperationColumn: tableRowOperationColumnLabel,\n    rowLoading: tableRowLoadingLabel,\n    groupRowPlaceholderNoValue: tableGroupRowPlaceholderNoValueLabel,\n    groupRowPlaceholderEmpty: tableGroupRowPlaceholderEmptyLabel\n} as const;\n\n/**\n * Label provider for the Nimble table (and its sub-components and columns)\n */\nexport class LabelProviderTable\n    extends LabelProviderBase<typeof supportedLabels>\n    implements DesignTokensFor<typeof supportedLabels> {\n    @attr({ attribute: 'group-collapse' })\n    public groupCollapse: string | undefined;\n\n    @attr({ attribute: 'group-expand' })\n    public groupExpand: string | undefined;\n\n    @attr({ attribute: 'row-collapse' })\n    public rowCollapse: string | undefined;\n\n    @attr({ attribute: 'row-expand' })\n    public rowExpand: string | undefined;\n\n    @attr({ attribute: 'collapse-all' })\n    public collapseAll: string | undefined;\n\n    @attr({ attribute: 'cell-action-menu' })\n    public cellActionMenu: string | undefined;\n\n    @attr({ attribute: 'column-header-grouped' })\n    public columnHeaderGrouped: string | undefined;\n\n    @attr({ attribute: 'column-header-sorted-ascending' })\n    public columnHeaderSortedAscending: string | undefined;\n\n    @attr({ attribute: 'column-header-sorted-descending' })\n    public columnHeaderSortedDescending: string | undefined;\n\n    @attr({ attribute: 'select-all' })\n    public selectAll: string | undefined;\n\n    @attr({ attribute: 'group-select-all' })\n    public groupSelectAll: string | undefined;\n\n    @attr({ attribute: 'row-select' })\n    public rowSelect: string | undefined;\n\n    @attr({ attribute: 'row-operation-column' })\n    public rowOperationColumn: string | undefined;\n\n    @attr({ attribute: 'row-loading' })\n    public rowLoading: string | undefined;\n\n    @attr({ attribute: 'group-row-placeholder-no-value' })\n    public groupRowPlaceholderNoValue: string | undefined;\n\n    @attr({ attribute: 'group-row-placeholder-empty' })\n    public groupRowPlaceholderEmpty: string | undefined;\n\n    protected override readonly supportedLabels = supportedLabels;\n}\n\nconst nimbleLabelProviderTable = LabelProviderTable.compose({\n    baseName: 'label-provider-table'\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(nimbleLabelProviderTable());\nexport const labelProviderTableTag = 'nimble-label-provider-table';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/label-provider/table/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { attr } from '@microsoft/fast-element';\nimport { DesignSystem } from '@microsoft/fast-foundation';\nimport { DesignTokensFor, LabelProviderBase } from '../base';\nimport {\n    tableCellActionMenuLabel,\n    tableColumnHeaderGroupedLabel,\n    tableColumnHeaderSortedAscendingLabel,\n    tableColumnHeaderSortedDescendingLabel,\n    tableGroupCollapseLabel,\n    tableGroupExpandLabel,\n    tableGroupSelectAllLabel,\n    tableCollapseAllLabel,\n    tableRowCollapseLabel,\n    tableRowExpandLabel,\n    tableRowOperationColumnLabel,\n    tableRowSelectLabel,\n    tableSelectAllLabel,\n    tableRowLoadingLabel,\n    tableGroupRowPlaceholderEmptyLabel,\n    tableGroupRowPlaceholderNoValueLabel\n} from './label-tokens';\nimport { styles } from '../base/styles';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-label-provider-table': LabelProviderTable;\n    }\n}\n\nconst supportedLabels = {\n    groupCollapse: tableGroupCollapseLabel,\n    groupExpand: tableGroupExpandLabel,\n    rowCollapse: tableRowCollapseLabel,\n    rowExpand: tableRowExpandLabel,\n    collapseAll: tableCollapseAllLabel,\n    cellActionMenu: tableCellActionMenuLabel,\n    columnHeaderGrouped: tableColumnHeaderGroupedLabel,\n    columnHeaderSortedAscending: tableColumnHeaderSortedAscendingLabel,\n    columnHeaderSortedDescending: tableColumnHeaderSortedDescendingLabel,\n    selectAll: tableSelectAllLabel,\n    groupSelectAll: tableGroupSelectAllLabel,\n    rowSelect: tableRowSelectLabel,\n    rowOperationColumn: tableRowOperationColumnLabel,\n    rowLoading: tableRowLoadingLabel,\n    groupRowPlaceholderNoValue: tableGroupRowPlaceholderNoValueLabel,\n    groupRowPlaceholderEmpty: tableGroupRowPlaceholderEmptyLabel\n} as const;\n\n/**\n * Label provider for the Nimble table (and its sub-components and columns)\n */\nexport class LabelProviderTable\n    extends LabelProviderBase<typeof supportedLabels>\n    implements DesignTokensFor<typeof supportedLabels> {\n    @attr({ attribute: 'group-collapse' })\n    public groupCollapse: string | undefined;\n\n    @attr({ attribute: 'group-expand' })\n    public groupExpand: string | undefined;\n\n    @attr({ attribute: 'row-collapse' })\n    public rowCollapse: string | undefined;\n\n    @attr({ attribute: 'row-expand' })\n    public rowExpand: string | undefined;\n\n    @attr({ attribute: 'collapse-all' })\n    public collapseAll: string | undefined;\n\n    @attr({ attribute: 'cell-action-menu' })\n    public cellActionMenu: string | undefined;\n\n    @attr({ attribute: 'column-header-grouped' })\n    public columnHeaderGrouped: string | undefined;\n\n    @attr({ attribute: 'column-header-sorted-ascending' })\n    public columnHeaderSortedAscending: string | undefined;\n\n    @attr({ attribute: 'column-header-sorted-descending' })\n    public columnHeaderSortedDescending: string | undefined;\n\n    @attr({ attribute: 'select-all' })\n    public selectAll: string | undefined;\n\n    @attr({ attribute: 'group-select-all' })\n    public groupSelectAll: string | undefined;\n\n    @attr({ attribute: 'row-select' })\n    public rowSelect: string | undefined;\n\n    @attr({ attribute: 'row-operation-column' })\n    public rowOperationColumn: string | undefined;\n\n    @attr({ attribute: 'row-loading' })\n    public rowLoading: string | undefined;\n\n    @attr({ attribute: 'group-row-placeholder-no-value' })\n    public groupRowPlaceholderNoValue: string | undefined;\n\n    @attr({ attribute: 'group-row-placeholder-empty' })\n    public groupRowPlaceholderEmpty: string | undefined;\n\n    protected override readonly supportedLabels = supportedLabels;\n}\n\nconst nimbleLabelProviderTable = LabelProviderTable.compose({\n    baseName: 'label-provider-table',\n    styles\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(nimbleLabelProviderTable());\nexport const labelProviderTableTag = 'nimble-label-provider-table';\n"]}

package/dist/esm/list-option/styles.js

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

package/dist/esm/list-option/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/list-option/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,gBAAgB,EAChB,iBAAiB,EACjB,sBAAsB,EACtB,cAAc,EACd,QAAQ,EACR,qBAAqB,EACrB,aAAa,EAChB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;gBAGL,QAAQ;;;kBAGN,aAAa;;;;;;4BAMH,iBAAiB;;;;4BAIjB,sBAAsB;;;;4BAItB,cAAc;;;;;;;;aAQ7B,YAAY;sCACa,gBAAgB;6BACzB,gBAAgB;;;;;;;4BAOjB,iBAAiB;;;;iBAI5B,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BrC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport { focusVisible } from '../utilities/style/focus';\n\nimport {\n    borderHoverColor,\n    fillSelectedColor,\n    fillHoverSelectedColor,\n    fillHoverColor,\n    bodyFont,\n    bodyDisabledFontColor,\n    controlHeight\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        font: ${bodyFont};\n        cursor: pointer;\n        justify-content: left;\n        height: ${controlHeight};\n    }\n\n    :host([aria-selected='true']) {\n        box-shadow: none;\n        outline: none;\n        background-color: ${fillSelectedColor};\n    }\n\n    :host([aria-selected='true']:hover) {\n        background-color: ${fillHoverSelectedColor};\n    }\n\n    :host(:hover) {\n        background-color: ${fillHoverColor};\n    }\n\n    :host(:hover):host([disabled]) {\n        box-shadow: none;\n        background-color: transparent;\n    }\n\n    :host(:${focusVisible}) {\n        box-shadow: 0px 0px 0px 1px ${borderHoverColor} inset;\n        outline: 1px solid ${borderHoverColor};\n        outline-offset: -4px;\n    }\n\n    :host(:active) {\n        box-shadow: none;\n        outline: none;\n        background-color: ${fillSelectedColor};\n    }\n\n    :host([disabled]) {\n        color: ${bodyDisabledFontColor};\n        cursor: default;\n    }\n\n    :host([visually-hidden]) {\n        display: none;\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    .content {\n        padding: 8px 4px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n\n    .content[disabled] {\n        box-shadow: none;\n        outline: none;\n    }\n\n    [part='end'] {\n        display: none;\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/list-option/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,gBAAgB,EAChB,iBAAiB,EACjB,sBAAsB,EACtB,cAAc,EACd,QAAQ,EACR,qBAAqB,EACrB,aAAa,EAChB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;gBAGL,QAAQ;;;kBAGN,aAAa;;;;;;4BAMH,iBAAiB;;;;4BAIjB,sBAAsB;;;;4BAItB,cAAc;;;;;;;;aAQ7B,YAAY;sCACa,gBAAgB;6BACzB,gBAAgB;;;;;;;4BAOjB,iBAAiB;;;;iBAI5B,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BrC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport { focusVisible } from '../utilities/style/focus';\n\nimport {\n    borderHoverColor,\n    fillSelectedColor,\n    fillHoverSelectedColor,\n    fillHoverColor,\n    bodyFont,\n    bodyDisabledFontColor,\n    controlHeight\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        font: ${bodyFont};\n        cursor: pointer;\n        justify-content: left;\n        height: ${controlHeight};\n    }\n\n    :host([aria-selected='true']) {\n        box-shadow: none;\n        outline: none;\n        background-color: ${fillSelectedColor};\n    }\n\n    :host([aria-selected='true']:hover) {\n        background-color: ${fillHoverSelectedColor};\n    }\n\n    :host(:hover) {\n        background-color: ${fillHoverColor};\n    }\n\n    :host(:hover):host([disabled]) {\n        box-shadow: none;\n        background-color: transparent;\n    }\n\n    :host(:${focusVisible}) {\n        box-shadow: 0px 0px 0px 1px ${borderHoverColor} inset;\n        outline: 1px solid ${borderHoverColor};\n        outline-offset: -4px;\n    }\n\n    :host(:active) {\n        box-shadow: none;\n        outline: none;\n        background-color: ${fillSelectedColor};\n    }\n\n    :host([disabled]) {\n        color: ${bodyDisabledFontColor};\n        cursor: default;\n    }\n\n    :host([visually-hidden]) {\n        display: none;\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    .content {\n        padding: 8px 4px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n\n    .content[disabled] {\n        box-shadow: none;\n        outline: none;\n    }\n\n    [part='end'] {\n        display: none;\n    }\n`;\n"]}

package/dist/esm/listbox/styles.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/listbox/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,gBAAgB,EAChB,mBAAmB,EACnB,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,YAAY,EACf,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;sBAGN,0BAA0B;kBAC9B,WAAW,UAAU,gBAAgB;;;qBAGlC,YAAY;sBACX,mBAAmB;iBACxB,aAAa;gBACd,QAAQ;;;;;;;;mBAQL,YAAY;;;CAG9B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\n\nimport {\n    applicationBackgroundColor,\n    borderWidth,\n    popupBorderColor,\n    elevation2BoxShadow,\n    bodyFont,\n    bodyFontColor,\n    smallPadding,\n    menuMinWidth\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        background: ${applicationBackgroundColor};\n        border: ${borderWidth} solid ${popupBorderColor};\n        flex-direction: column;\n        margin: 0;\n        min-width: ${menuMinWidth};\n        box-shadow: ${elevation2BoxShadow};\n        color: ${bodyFontColor};\n        font: ${bodyFont};\n    }\n\n    :host(:focus) {\n        outline: 0px;\n    }\n\n    slot {\n        padding: ${smallPadding};\n        display: block;\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/listbox/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,gBAAgB,EAChB,mBAAmB,EACnB,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,YAAY,EACf,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;sBAGN,0BAA0B;kBAC9B,WAAW,UAAU,gBAAgB;;;qBAGlC,YAAY;sBACX,mBAAmB;iBACxB,aAAa;gBACd,QAAQ;;;;;;;;mBAQL,YAAY;;;CAG9B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\n\nimport {\n    applicationBackgroundColor,\n    borderWidth,\n    popupBorderColor,\n    elevation2BoxShadow,\n    bodyFont,\n    bodyFontColor,\n    smallPadding,\n    menuMinWidth\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        background: ${applicationBackgroundColor};\n        border: ${borderWidth} solid ${popupBorderColor};\n        flex-direction: column;\n        margin: 0;\n        min-width: ${menuMinWidth};\n        box-shadow: ${elevation2BoxShadow};\n        color: ${bodyFontColor};\n        font: ${bodyFont};\n    }\n\n    :host(:focus) {\n        outline: 0px;\n    }\n\n    slot {\n        padding: ${smallPadding};\n        display: block;\n    }\n`;\n"]}

package/dist/esm/mapping/base/styles.d.ts

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

package/dist/esm/mapping/base/styles.js

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

package/dist/esm/mapping/base/styles.js.map

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

package/dist/esm/mapping/empty/index.js

@@ -3,6 +3,7 @@ import { DesignSystem } from '@microsoft/fast-foundation';
 import { attr } from '@microsoft/fast-element';
 import { Mapping } from '../base';
 import { template } from '../base/template';
+import { styles } from '../base/styles';
 /**
  * Maps data values to text.
  * One or more may be added as children of a nimble-table-column-mapping element. The
@@ -15,7 +16,8 @@ __decorate([
 ], MappingEmpty.prototype, "text", void 0);
 const emptyMapping = MappingEmpty.compose({
     baseName: 'mapping-empty',
-    template
+    template,
+    styles
 });
 DesignSystem.getOrCreate().withPrefix('nimble').register(emptyMapping());
 export const mappingEmptyTag = 'nimble-mapping-empty';

package/dist/esm/mapping/empty/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/mapping/empty/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAS5C;;;;GAIG;AACH,MAAM,OAAO,YAAa,SAAQ,OAAmB;CAGpD;AADU;IADN,IAAI,EAAE;0CACc;AAGzB,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,CAAC;IACtC,QAAQ,EAAE,eAAe;IACzB,QAAQ;CACX,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC;AACzE,MAAM,CAAC,MAAM,eAAe,GAAG,sBAAsB,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { attr } from '@microsoft/fast-element';\nimport { Mapping } from '../base';\nimport { template } from '../base/template';\nimport type { MappingKey } from '../base/types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-mapping-empty': MappingEmpty;\n    }\n}\n\n/**\n * Maps data values to text.\n * One or more may be added as children of a nimble-table-column-mapping element. The\n * mapping displays an empty cell and text-only group rows.\n */\nexport class MappingEmpty extends Mapping<MappingKey> {\n    @attr()\n    public text?: string;\n}\n\nconst emptyMapping = MappingEmpty.compose({\n    baseName: 'mapping-empty',\n    template\n});\nDesignSystem.getOrCreate().withPrefix('nimble').register(emptyMapping());\nexport const mappingEmptyTag = 'nimble-mapping-empty';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/mapping/empty/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAQxC;;;;GAIG;AACH,MAAM,OAAO,YAAa,SAAQ,OAAmB;CAGpD;AADU;IADN,IAAI,EAAE;0CACc;AAGzB,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,CAAC;IACtC,QAAQ,EAAE,eAAe;IACzB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC;AACzE,MAAM,CAAC,MAAM,eAAe,GAAG,sBAAsB,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { attr } from '@microsoft/fast-element';\nimport { Mapping } from '../base';\nimport { template } from '../base/template';\nimport type { MappingKey } from '../base/types';\nimport { styles } from '../base/styles';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-mapping-empty': MappingEmpty;\n    }\n}\n\n/**\n * Maps data values to text.\n * One or more may be added as children of a nimble-table-column-mapping element. The\n * mapping displays an empty cell and text-only group rows.\n */\nexport class MappingEmpty extends Mapping<MappingKey> {\n    @attr()\n    public text?: string;\n}\n\nconst emptyMapping = MappingEmpty.compose({\n    baseName: 'mapping-empty',\n    template,\n    styles\n});\nDesignSystem.getOrCreate().withPrefix('nimble').register(emptyMapping());\nexport const mappingEmptyTag = 'nimble-mapping-empty';\n"]}

package/dist/esm/mapping/icon/index.js

@@ -4,6 +4,7 @@ import { DesignSystem } from '@microsoft/fast-foundation';
 import { Mapping } from '../base';
 import { template } from '../base/template';
 import { Icon } from '../../icon-base';
+import { styles } from '../base/styles';
 function isIconClass(elementClass) {
     return elementClass.prototype instanceof Icon;
 }
@@ -70,7 +71,8 @@ __decorate([
 ], MappingIcon.prototype, "resolvedIcon", void 0);
 const iconMapping = MappingIcon.compose({
     baseName: 'mapping-icon',
-    template
+    template,
+    styles
 });
 DesignSystem.getOrCreate().withPrefix('nimble').register(iconMapping());
 export const mappingIconTag = 'nimble-mapping-icon';

package/dist/esm/mapping/icon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/mapping/icon/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AASvC,SAAS,WAAW,CAAC,YAAsC;IACvD,OAAO,YAAY,CAAC,SAAS,YAAY,IAAI,CAAC;AAClD,CAAC;AAED;;;;GAIG;AACH,MAAM,OAAO,WAAY,SAAQ,OAAmB;IAApD;;QAWW,eAAU,GAAG,KAAK,CAAC;IA+C9B,CAAC;IArCG,gFAAgF;IACxE,KAAK,CAAC,gBAAgB,CAAC,IAAY;QACvC,IAAI;YACA,kEAAkE;YAClE,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;YAC9B,MAAM,cAAc,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;SAC1C;QAAC,OAAO,EAAE,EAAE;YACT,iEAAiE;YACjE,2FAA2F;YAC3F,iDAAiD;YACjD,OAAO;SACV;QAED,IAAI,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE;YACpB,mEAAmE;YACnE,2FAA2F;YAC3F,iDAAiD;YACjD,OAAO;SACV;QAED,MAAM,YAAY,GAAG,cAAc,CAAC,GAAG,CAAC,IAAI,CAAE,CAAC;QAC/C,IAAI,CAAC,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IACrE,CAAC;IAEO,WAAW;QACf,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACvB,IAAI,CAAC,IAAI,EAAE;YACP,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;YAC9B,OAAO;SACV;QACD,MAAM,YAAY,GAAG,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAC9C,IAAI,YAAY,EAAE;YACd,IAAI,CAAC,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;YACjE,OAAO;SACV;QACD,KAAK,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACrC,CAAC;CACJ;AAxDU;IADN,IAAI,EAAE;yCACc;AAGd;IADN,IAAI,EAAE;6CACuB;AAGvB;IADN,IAAI,EAAE;yCACc;AAGd;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;+CAC1B;AAQnB;IADN,UAAU;iDACkB;AAyCjC,MAAM,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC;IACpC,QAAQ,EAAE,cAAc;IACxB,QAAQ;CACX,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC;AACxE,MAAM,CAAC,MAAM,cAAc,GAAG,qBAAqB,CAAC","sourcesContent":["import { attr, observable } from '@microsoft/fast-element';\nimport { DesignSystem } from '@microsoft/fast-foundation';\nimport { Mapping } from '../base';\nimport { template } from '../base/template';\nimport type { IconSeverity } from '../../icon-base/types';\nimport { Icon } from '../../icon-base';\nimport type { MappingKey } from '../base/types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-mapping-icon': MappingIcon;\n    }\n}\n\nfunction isIconClass(elementClass: CustomElementConstructor): boolean {\n    return elementClass.prototype instanceof Icon;\n}\n\n/**\n * Maps a data value to an icon.\n * One or more may be added as children of a nimble-table-column-mapping element to define\n * how specific data values should be displayed as icons in that column's cells.\n */\nexport class MappingIcon extends Mapping<MappingKey> {\n    @attr()\n    public icon?: string;\n\n    @attr()\n    public severity: IconSeverity;\n\n    @attr()\n    public text?: string;\n\n    @attr({ attribute: 'text-hidden', mode: 'boolean' })\n    public textHidden = false;\n\n    /**\n     * @internal\n     * Calculated asynchronously by the icon mapping based on the configured icon value.\n     * When assigned, it corresponds to an element name that is resolved to type of Nimble Icon.\n     */\n    @observable\n    public resolvedIcon?: string;\n\n    // Allow icons to be defined asynchronously from when the property is configured\n    private async resolveIconAsync(icon: string): Promise<void> {\n        try {\n            // Clear the current resolution while waiting for async resolution\n            this.resolvedIcon = undefined;\n            await customElements.whenDefined(icon);\n        } catch (ex) {\n            // If any error (i.e. invalid custom element name) don't continue\n            // Don't update the resolvedIcon as it was already set to undefined before async resolution\n            // (in case other async resolutions were started)\n            return;\n        }\n\n        if (icon !== this.icon) {\n            // Possible the icon has changed while waiting for async resolution\n            // Don't update the resolvedIcon as it was already set to undefined before async resolution\n            // (in case other async resolutions were started)\n            return;\n        }\n\n        const elementClass = customElements.get(icon)!;\n        this.resolvedIcon = isIconClass(elementClass) ? icon : undefined;\n    }\n\n    private iconChanged(): void {\n        const icon = this.icon;\n        if (!icon) {\n            this.resolvedIcon = undefined;\n            return;\n        }\n        const elementClass = customElements.get(icon);\n        if (elementClass) {\n            this.resolvedIcon = isIconClass(elementClass) ? icon : undefined;\n            return;\n        }\n        void this.resolveIconAsync(icon);\n    }\n}\n\nconst iconMapping = MappingIcon.compose({\n    baseName: 'mapping-icon',\n    template\n});\nDesignSystem.getOrCreate().withPrefix('nimble').register(iconMapping());\nexport const mappingIconTag = 'nimble-mapping-icon';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/mapping/icon/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAQxC,SAAS,WAAW,CAAC,YAAsC;IACvD,OAAO,YAAY,CAAC,SAAS,YAAY,IAAI,CAAC;AAClD,CAAC;AAED;;;;GAIG;AACH,MAAM,OAAO,WAAY,SAAQ,OAAmB;IAApD;;QAWW,eAAU,GAAG,KAAK,CAAC;IA+C9B,CAAC;IArCG,gFAAgF;IACxE,KAAK,CAAC,gBAAgB,CAAC,IAAY;QACvC,IAAI;YACA,kEAAkE;YAClE,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;YAC9B,MAAM,cAAc,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;SAC1C;QAAC,OAAO,EAAE,EAAE;YACT,iEAAiE;YACjE,2FAA2F;YAC3F,iDAAiD;YACjD,OAAO;SACV;QAED,IAAI,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE;YACpB,mEAAmE;YACnE,2FAA2F;YAC3F,iDAAiD;YACjD,OAAO;SACV;QAED,MAAM,YAAY,GAAG,cAAc,CAAC,GAAG,CAAC,IAAI,CAAE,CAAC;QAC/C,IAAI,CAAC,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IACrE,CAAC;IAEO,WAAW;QACf,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACvB,IAAI,CAAC,IAAI,EAAE;YACP,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;YAC9B,OAAO;SACV;QACD,MAAM,YAAY,GAAG,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAC9C,IAAI,YAAY,EAAE;YACd,IAAI,CAAC,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;YACjE,OAAO;SACV;QACD,KAAK,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACrC,CAAC;CACJ;AAxDU;IADN,IAAI,EAAE;yCACc;AAGd;IADN,IAAI,EAAE;6CACuB;AAGvB;IADN,IAAI,EAAE;yCACc;AAGd;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;+CAC1B;AAQnB;IADN,UAAU;iDACkB;AAyCjC,MAAM,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC;IACpC,QAAQ,EAAE,cAAc;IACxB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC;AACxE,MAAM,CAAC,MAAM,cAAc,GAAG,qBAAqB,CAAC","sourcesContent":["import { attr, observable } from '@microsoft/fast-element';\nimport { DesignSystem } from '@microsoft/fast-foundation';\nimport { Mapping } from '../base';\nimport { template } from '../base/template';\nimport type { IconSeverity } from '../../icon-base/types';\nimport { Icon } from '../../icon-base';\nimport type { MappingKey } from '../base/types';\nimport { styles } from '../base/styles';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-mapping-icon': MappingIcon;\n    }\n}\n\nfunction isIconClass(elementClass: CustomElementConstructor): boolean {\n    return elementClass.prototype instanceof Icon;\n}\n\n/**\n * Maps a data value to an icon.\n * One or more may be added as children of a nimble-table-column-mapping element to define\n * how specific data values should be displayed as icons in that column's cells.\n */\nexport class MappingIcon extends Mapping<MappingKey> {\n    @attr()\n    public icon?: string;\n\n    @attr()\n    public severity: IconSeverity;\n\n    @attr()\n    public text?: string;\n\n    @attr({ attribute: 'text-hidden', mode: 'boolean' })\n    public textHidden = false;\n\n    /**\n     * @internal\n     * Calculated asynchronously by the icon mapping based on the configured icon value.\n     * When assigned, it corresponds to an element name that is resolved to type of Nimble Icon.\n     */\n    @observable\n    public resolvedIcon?: string;\n\n    // Allow icons to be defined asynchronously from when the property is configured\n    private async resolveIconAsync(icon: string): Promise<void> {\n        try {\n            // Clear the current resolution while waiting for async resolution\n            this.resolvedIcon = undefined;\n            await customElements.whenDefined(icon);\n        } catch (ex) {\n            // If any error (i.e. invalid custom element name) don't continue\n            // Don't update the resolvedIcon as it was already set to undefined before async resolution\n            // (in case other async resolutions were started)\n            return;\n        }\n\n        if (icon !== this.icon) {\n            // Possible the icon has changed while waiting for async resolution\n            // Don't update the resolvedIcon as it was already set to undefined before async resolution\n            // (in case other async resolutions were started)\n            return;\n        }\n\n        const elementClass = customElements.get(icon)!;\n        this.resolvedIcon = isIconClass(elementClass) ? icon : undefined;\n    }\n\n    private iconChanged(): void {\n        const icon = this.icon;\n        if (!icon) {\n            this.resolvedIcon = undefined;\n            return;\n        }\n        const elementClass = customElements.get(icon);\n        if (elementClass) {\n            this.resolvedIcon = isIconClass(elementClass) ? icon : undefined;\n            return;\n        }\n        void this.resolveIconAsync(icon);\n    }\n}\n\nconst iconMapping = MappingIcon.compose({\n    baseName: 'mapping-icon',\n    template,\n    styles\n});\nDesignSystem.getOrCreate().withPrefix('nimble').register(iconMapping());\nexport const mappingIconTag = 'nimble-mapping-icon';\n"]}

package/dist/esm/mapping/spinner/index.js

@@ -3,6 +3,7 @@ import { DesignSystem } from '@microsoft/fast-foundation';
 import { attr } from '@microsoft/fast-element';
 import { Mapping } from '../base';
 import { template } from '../base/template';
+import { styles } from '../base/styles';
 /**
  * Maps data values to a spinner.
  * One or more may be added as children of a nimble-table-column-mapping element to define
@@ -22,7 +23,8 @@ __decorate([
 ], MappingSpinner.prototype, "textHidden", void 0);
 const spinnerMapping = MappingSpinner.compose({
     baseName: 'mapping-spinner',
-    template
+    template,
+    styles
 });
 DesignSystem.getOrCreate().withPrefix('nimble').register(spinnerMapping());
 export const mappingSpinnerTag = 'nimble-mapping-spinner';

package/dist/esm/mapping/spinner/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/mapping/spinner/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAS5C;;;;GAIG;AACH,MAAM,OAAO,cAAe,SAAQ,OAAmB;IAAvD;;QAKW,eAAU,GAAG,KAAK,CAAC;IAC9B,CAAC;CAAA;AAJU;IADN,IAAI,EAAE;4CACc;AAGd;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;kDAC1B;AAG9B,MAAM,cAAc,GAAG,cAAc,CAAC,OAAO,CAAC;IAC1C,QAAQ,EAAE,iBAAiB;IAC3B,QAAQ;CACX,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC;AAC3E,MAAM,CAAC,MAAM,iBAAiB,GAAG,wBAAwB,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { attr } from '@microsoft/fast-element';\nimport { Mapping } from '../base';\nimport { template } from '../base/template';\nimport type { MappingKey } from '../base/types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-mapping-spinner': MappingSpinner;\n    }\n}\n\n/**\n * Maps data values to a spinner.\n * One or more may be added as children of a nimble-table-column-mapping element to define\n * which specific data values should be displayed as spinners in that column's cells.\n */\nexport class MappingSpinner extends Mapping<MappingKey> {\n    @attr()\n    public text?: string;\n\n    @attr({ attribute: 'text-hidden', mode: 'boolean' })\n    public textHidden = false;\n}\n\nconst spinnerMapping = MappingSpinner.compose({\n    baseName: 'mapping-spinner',\n    template\n});\nDesignSystem.getOrCreate().withPrefix('nimble').register(spinnerMapping());\nexport const mappingSpinnerTag = 'nimble-mapping-spinner';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/mapping/spinner/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAQxC;;;;GAIG;AACH,MAAM,OAAO,cAAe,SAAQ,OAAmB;IAAvD;;QAKW,eAAU,GAAG,KAAK,CAAC;IAC9B,CAAC;CAAA;AAJU;IADN,IAAI,EAAE;4CACc;AAGd;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;kDAC1B;AAG9B,MAAM,cAAc,GAAG,cAAc,CAAC,OAAO,CAAC;IAC1C,QAAQ,EAAE,iBAAiB;IAC3B,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC;AAC3E,MAAM,CAAC,MAAM,iBAAiB,GAAG,wBAAwB,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { attr } from '@microsoft/fast-element';\nimport { Mapping } from '../base';\nimport { template } from '../base/template';\nimport type { MappingKey } from '../base/types';\nimport { styles } from '../base/styles';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-mapping-spinner': MappingSpinner;\n    }\n}\n\n/**\n * Maps data values to a spinner.\n * One or more may be added as children of a nimble-table-column-mapping element to define\n * which specific data values should be displayed as spinners in that column's cells.\n */\nexport class MappingSpinner extends Mapping<MappingKey> {\n    @attr()\n    public text?: string;\n\n    @attr({ attribute: 'text-hidden', mode: 'boolean' })\n    public textHidden = false;\n}\n\nconst spinnerMapping = MappingSpinner.compose({\n    baseName: 'mapping-spinner',\n    template,\n    styles\n});\nDesignSystem.getOrCreate().withPrefix('nimble').register(spinnerMapping());\nexport const mappingSpinnerTag = 'nimble-mapping-spinner';\n"]}

package/dist/esm/mapping/text/index.js

@@ -3,6 +3,7 @@ import { DesignSystem } from '@microsoft/fast-foundation';
 import { attr } from '@microsoft/fast-element';
 import { Mapping } from '../base';
 import { template } from '../base/template';
+import { styles } from '../base/styles';
 /**
  * Defines a mapping from one data value ('key' property) to display text ('text' property).
  * One or more may be added as children of a nimble-table-column-mapping element to define
@@ -15,7 +16,8 @@ __decorate([
 ], MappingText.prototype, "text", void 0);
 const textMapping = MappingText.compose({
     baseName: 'mapping-text',
-    template
+    template,
+    styles
 });
 DesignSystem.getOrCreate().withPrefix('nimble').register(textMapping());
 export const mappingTextTag = 'nimble-mapping-text';

package/dist/esm/mapping/text/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/mapping/text/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAS5C;;;;GAIG;AACH,MAAM,OAAO,WAAY,SAAQ,OAAmB;CAGnD;AADU;IADN,IAAI,EAAE;yCACc;AAGzB,MAAM,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC;IACpC,QAAQ,EAAE,cAAc;IACxB,QAAQ;CACX,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC;AACxE,MAAM,CAAC,MAAM,cAAc,GAAG,qBAAqB,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { attr } from '@microsoft/fast-element';\nimport { Mapping } from '../base';\nimport { template } from '../base/template';\nimport type { MappingKey } from '../base/types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-mapping-text': MappingText;\n    }\n}\n\n/**\n * Defines a mapping from one data value ('key' property) to display text ('text' property).\n * One or more may be added as children of a nimble-table-column-mapping element to define\n * how a specific data value should be displayed as text in that column's cells.\n */\nexport class MappingText extends Mapping<MappingKey> {\n    @attr()\n    public text?: string;\n}\n\nconst textMapping = MappingText.compose({\n    baseName: 'mapping-text',\n    template\n});\nDesignSystem.getOrCreate().withPrefix('nimble').register(textMapping());\nexport const mappingTextTag = 'nimble-mapping-text';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/mapping/text/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAQxC;;;;GAIG;AACH,MAAM,OAAO,WAAY,SAAQ,OAAmB;CAGnD;AADU;IADN,IAAI,EAAE;yCACc;AAGzB,MAAM,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC;IACpC,QAAQ,EAAE,cAAc;IACxB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC;AACxE,MAAM,CAAC,MAAM,cAAc,GAAG,qBAAqB,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { attr } from '@microsoft/fast-element';\nimport { Mapping } from '../base';\nimport { template } from '../base/template';\nimport type { MappingKey } from '../base/types';\nimport { styles } from '../base/styles';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-mapping-text': MappingText;\n    }\n}\n\n/**\n * Defines a mapping from one data value ('key' property) to display text ('text' property).\n * One or more may be added as children of a nimble-table-column-mapping element to define\n * how a specific data value should be displayed as text in that column's cells.\n */\nexport class MappingText extends Mapping<MappingKey> {\n    @attr()\n    public text?: string;\n}\n\nconst textMapping = MappingText.compose({\n    baseName: 'mapping-text',\n    template,\n    styles\n});\nDesignSystem.getOrCreate().withPrefix('nimble').register(textMapping());\nexport const mappingTextTag = 'nimble-mapping-text';\n"]}

package/dist/esm/mapping/user/index.js

@@ -3,6 +3,7 @@ import { attr } from '@microsoft/fast-element';
 import { DesignSystem } from '@microsoft/fast-foundation';
 import { Mapping } from '../base';
 import { template } from '../base/template';
+import { styles } from '../base/styles';
 /**
  * Maps key (url) to a user
  * Non-visible configuration element for mapping rich text user mention keys to a user
@@ -14,7 +15,8 @@ __decorate([
 ], MappingUser.prototype, "displayName", void 0);
 const mappingUser = MappingUser.compose({
     baseName: 'mapping-user',
-    template
+    template,
+    styles
 });
 DesignSystem.getOrCreate().withPrefix('nimble').register(mappingUser());
 export const mappingUserTag = 'nimble-mapping-user';

package/dist/esm/mapping/user/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/mapping/user/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAElC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAO5C;;;GAGG;AACH,MAAM,OAAO,WAAY,SAAQ,OAAuB;CAGvD;AADU;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;gDACR;AAEhC,MAAM,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC;IACpC,QAAQ,EAAE,cAAc;IACxB,QAAQ;CACX,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC;AACxE,MAAM,CAAC,MAAM,cAAc,GAAG,qBAAqB,CAAC","sourcesContent":["import { attr } from '@microsoft/fast-element';\nimport { DesignSystem } from '@microsoft/fast-foundation';\nimport { Mapping } from '../base';\nimport type { MappingUserKey } from '../base/types';\nimport { template } from '../base/template';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-mapping-user': MappingUser;\n    }\n}\n/**\n * Maps key (url) to a user\n * Non-visible configuration element for mapping rich text user mention keys to a user\n */\nexport class MappingUser extends Mapping<MappingUserKey> {\n    @attr({ attribute: 'display-name' })\n    public displayName?: string;\n}\nconst mappingUser = MappingUser.compose({\n    baseName: 'mapping-user',\n    template\n});\nDesignSystem.getOrCreate().withPrefix('nimble').register(mappingUser());\nexport const mappingUserTag = 'nimble-mapping-user';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/mapping/user/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAElC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAOxC;;;GAGG;AACH,MAAM,OAAO,WAAY,SAAQ,OAAuB;CAGvD;AADU;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;gDACR;AAEhC,MAAM,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC;IACpC,QAAQ,EAAE,cAAc;IACxB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC;AACxE,MAAM,CAAC,MAAM,cAAc,GAAG,qBAAqB,CAAC","sourcesContent":["import { attr } from '@microsoft/fast-element';\nimport { DesignSystem } from '@microsoft/fast-foundation';\nimport { Mapping } from '../base';\nimport type { MappingUserKey } from '../base/types';\nimport { template } from '../base/template';\nimport { styles } from '../base/styles';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-mapping-user': MappingUser;\n    }\n}\n/**\n * Maps key (url) to a user\n * Non-visible configuration element for mapping rich text user mention keys to a user\n */\nexport class MappingUser extends Mapping<MappingUserKey> {\n    @attr({ attribute: 'display-name' })\n    public displayName?: string;\n}\nconst mappingUser = MappingUser.compose({\n    baseName: 'mapping-user',\n    template,\n    styles\n});\nDesignSystem.getOrCreate().withPrefix('nimble').register(mappingUser());\nexport const mappingUserTag = 'nimble-mapping-user';\n"]}

package/dist/esm/menu/styles.js

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
 import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { display } from '../utilities/style/display';
 import { applicationBackgroundColor, borderWidth, borderColor, popupBorderColor, groupHeaderFont, groupHeaderTextTransform, groupHeaderFontColor, smallPadding, mediumPadding, elevation2BoxShadow, menuMinWidth } from '../theme-provider/design-tokens';
 import { Theme } from '../theme-provider/types';
 import { hexToRgbaCssColor } from '../utilities/style/colors';

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,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AAEzE,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 { display } from '@microsoft/fast-foundation';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\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: 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"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/menu-button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAE9E,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;kBAGX,aAAa;;;;;;;;;sBAST,YAAY;yBACT,YAAY;;CAEpC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport { controlHeight, smallPadding } from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('inline-block')}\n\n    :host {\n        height: ${controlHeight};\n    }\n\n    [part='button'] {\n        width: 100%;\n        height: 100%;\n    }\n\n    slot[name='menu']::slotted(*) {\n        margin-top: ${smallPadding};\n        margin-bottom: ${smallPadding};\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/menu-button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAE9E,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;kBAGX,aAAa;;;;;;;;;sBAST,YAAY;yBACT,YAAY;;CAEpC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport { controlHeight, smallPadding } from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('inline-block')}\n\n    :host {\n        height: ${controlHeight};\n    }\n\n    [part='button'] {\n        width: 100%;\n        height: 100%;\n    }\n\n    slot[name='menu']::slotted(*) {\n        margin-top: ${smallPadding};\n        margin-bottom: ${smallPadding};\n    }\n`;\n"]}

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

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 import { focusVisible } from '../utilities/style/focus';
 import { controlHeight, fillSelectedColor, fillHoverColor, bodyFontColor, borderHoverColor, iconSize, bodyFont, bodyDisabledFontColor, iconColor } from '../theme-provider/design-tokens';
 export const styles = css `

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 '@microsoft/fast-foundation';\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;;;;;;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"]}

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

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 import { borderRgbPartialColor, borderHoverColor, borderWidth, bodyFontColor, bodyDisabledFontColor, controlHeight, controlLabelFont, controlLabelFontColor, smallDelay, bodyFont, failColor, mediumPadding, smallPadding, controlLabelDisabledFontColor } from '../theme-provider/design-tokens';
 import { appearanceBehavior } from '../utilities/style/appearance';
 import { NumberFieldAppearance } from './types';

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 '@microsoft/fast-foundation';\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;;;;;;;;;;;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"]}

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

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../../utilities/style/display';
 import { focusVisible } from '../../utilities/style/focus';
 import { actionRgbPartialColor, borderHoverColor, borderRgbPartialColor, borderWidth, buttonLabelFont, buttonLabelFontColor, buttonLabelDisabledFontColor, controlHeight, fillSelectedColor, iconColor, smallDelay, standardPadding, buttonPrimaryFontColor, buttonFillPrimaryColor, buttonFillAccentColor, buttonAccentBlockFontColor, buttonBorderAccentOutlineColor, buttonAccentOutlineFontColor } from '../../theme-provider/design-tokens';
 import { appearanceBehavior } from '../../utilities/style/appearance';

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/button/styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\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":"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","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"]}

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

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
 import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { display } from '../../utilities/style/display';
 import { applicationBackgroundColor, bodyFont, bodyFontColor, bodyDisabledFontColor, borderHoverColor, borderWidth, controlHeight, iconSize, menuMinWidth, popupBorderColor, smallDelay, smallPadding, borderRgbPartialColor, mediumPadding, failColor, elevation2BoxShadow } from '../../theme-provider/design-tokens';
 import { Theme } from '../../theme-provider/types';
 import { appearanceBehavior } from '../../utilities/style/appearance';
@@ -171,7 +171,7 @@ export const styles = css `
 
     .indicator {
         flex: none;
-        margin-inline-start: 1em;
+        margin-left: ${smallPadding};
         padding-right: 8px;
         display: flex;
         justify-content: center;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/dropdown/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,mBAAmB,EACtB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAEnE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;iBAIX,aAAa;gBACd,QAAQ;kBACN,aAAa;;;UAGrB,cAAc;qBACH,YAAY;;;mDAGkB,WAAW;;;;;;;;uBAQvC,WAAW;;;;yBAIT,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;+BAKO,SAAS;;;;;;4BAMZ,WAAW;;;;yBAId,gBAAgB;;4BAEb,UAAU;;;;;;;;;;YAU1B,YAAY;;;;;+BAKO,SAAS;;;;;;;;;;;;;;;;;;iCAkBP,qBAAqB;;mBAEnC,WAAW;;;;+BAIC,gBAAgB;;;;;iBAK9B,qBAAqB;6BACT,qBAAqB;;;;;;+BAMnB,SAAS;;;;;;;;;wCASA,YAAY;iEACa,YAAY;sBACvD,mBAAmB;4BACb,gBAAgB;4BAChB,0BAA0B;;;;;;;;;;;;;;;;;;;;0BAoB5B,YAAY;;;;uBAIf,YAAY;;;;;;;;;;;wBAWX,aAAa;;;;iBAIpB,qBAAqB;;;;;;;;;;;;;iBAarB,QAAQ;kBACP,QAAQ;gBACV,aAAa;;;;gBAIb,qBAAqB;;;;;;;;;;;CAWpC,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,SAAS,EAC5B,GAAG,CAAA;;uCAE4B,WAAW;;;;;qCAKb,qBAAqB;;SAEjD,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,OAAO,EAC1B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;uCAIvB,WAAW;;;;;yCAKT,qBAAqB;;SAErD,CACJ,EACD,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 { display } from '@microsoft/fast-foundation';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport {\n    applicationBackgroundColor,\n    bodyFont,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    borderHoverColor,\n    borderWidth,\n    controlHeight,\n    iconSize,\n    menuMinWidth,\n    popupBorderColor,\n    smallDelay,\n    smallPadding,\n    borderRgbPartialColor,\n    mediumPadding,\n    failColor,\n    elevation2BoxShadow\n} from '../../theme-provider/design-tokens';\nimport { Theme } from '../../theme-provider/types';\nimport { appearanceBehavior } from '../../utilities/style/appearance';\nimport { hexToRgbaCssColor } from '../../utilities/style/colors';\nimport { focusVisible } from '../../utilities/style/focus';\nimport { themeBehavior } from '../../utilities/style/theme';\nimport { DropdownAppearance } from './types';\nimport { userSelectNone } from '../../utilities/style/user-select';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        box-sizing: border-box;\n        color: ${bodyFontColor};\n        font: ${bodyFont};\n        height: ${controlHeight};\n        position: relative;\n        justify-content: center;\n        ${userSelectNone}\n        min-width: ${menuMinWidth};\n        outline: none;\n        vertical-align: top;\n        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n        --ni-private-focus-indicator-width: 1px;\n        --ni-private-indicator-lines-gap: 1px;\n    }\n\n    :host::before {\n        content: '';\n        position: absolute;\n        bottom: calc(${borderWidth} + var(--ni-private-indicator-lines-gap));\n        width: 0px;\n        height: 0px;\n        justify-self: center;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-focus-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        :host::before {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(${focusVisible})::before {\n        width: calc(100% - 8px);\n    }\n\n    :host([error-visible]):before {\n        border-bottom-color: ${failColor};\n    }\n\n    :host::after {\n        content: '';\n        position: absolute;\n        bottom: calc(-1 * ${borderWidth});\n        width: 0px;\n        height: 0px;\n        justify-self: center;\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        :host::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(:hover)::after,\n    :host(${focusVisible})::after {\n        width: 100%;\n    }\n\n    :host([error-visible]):after {\n        border-bottom-color: ${failColor};\n    }\n\n    :host([disabled]:hover)::after {\n        width: 0px;\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    .control {\n        align-items: center;\n        box-sizing: border-box;\n        cursor: pointer;\n        display: flex;\n        min-height: 100%;\n        width: 100%;\n        border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n        background-color: transparent;\n        padding: ${borderWidth};\n    }\n\n    :host([open]:not(:hover)) .control {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    :host([disabled]) .control {\n        cursor: default;\n        color: ${bodyDisabledFontColor};\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([error-visible]) .control,\n    :host([error-visible][open]) .control,\n    :host([error-visible][disabled]) .control {\n        border-bottom-color: ${failColor};\n    }\n\n    .listbox {\n        box-sizing: border-box;\n        display: inline-flex;\n        flex-direction: column;\n        overflow-y: auto;\n        width: 100%;\n        --ni-private-listbox-padding: ${smallPadding};\n        max-height: calc(var(--ni-private-select-max-height) - ${smallPadding});\n        box-shadow: ${elevation2BoxShadow};\n        border: 1px solid ${popupBorderColor};\n        background-color: ${applicationBackgroundColor};\n    }\n\n    .listbox slot {\n        display: block;\n        background: transparent;\n        padding: var(--ni-private-listbox-padding);\n    }\n\n    :host([open][position='above']) .listbox {\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n    }\n\n    :host([open][position='below']) .listbox {\n        border-top-left-radius: 0;\n        border-top-right-radius: 0;\n    }\n\n    :host([open][position='above']) .anchored-region {\n        padding-bottom: ${smallPadding};\n    }\n\n    :host([open][position='below']) .anchored-region {\n        padding-top: ${smallPadding};\n    }\n\n    .selected-value {\n        flex: auto;\n        font-family: inherit;\n        text-align: start;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        padding: 0px;\n        padding-left: ${mediumPadding};\n    }\n\n    .selected-value[disabled]::placeholder {\n        color: ${bodyDisabledFontColor};\n    }\n\n    .indicator {\n        flex: none;\n        margin-inline-start: 1em;\n        padding-right: 8px;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n    }\n\n    .indicator slot[name='indicator'] svg {\n        width: ${iconSize};\n        height: ${iconSize};\n        fill: ${bodyFontColor};\n    }\n\n    :host([disabled]) .indicator slot[name='indicator'] svg {\n        fill: ${bodyDisabledFontColor};\n    }\n\n    [part='end'] {\n        margin-inline-start: auto;\n    }\n\n    ::slotted([role='option']),\n    ::slotted(option) {\n        flex: none;\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        DropdownAppearance.underline,\n        css`\n            .control {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host([disabled]) .control {\n                border-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n        `\n    ),\n    appearanceBehavior(\n        DropdownAppearance.outline,\n        css`\n            .control {\n                border-width: ${borderWidth};\n                padding: 0;\n            }\n        `\n    ),\n    appearanceBehavior(\n        DropdownAppearance.block,\n        css`\n            .control {\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            .control:focus-within {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host([disabled]) .control {\n                background-color: rgba(${borderRgbPartialColor}, 0.07);\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            .listbox slot {\n                background: ${hexToRgbaCssColor(White, 0.15)};\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/dropdown/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,+BAA+B,CAAC;AACxD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,mBAAmB,EACtB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAEnE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;iBAIX,aAAa;gBACd,QAAQ;kBACN,aAAa;;;UAGrB,cAAc;qBACH,YAAY;;;mDAGkB,WAAW;;;;;;;;uBAQvC,WAAW;;;;yBAIT,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;+BAKO,SAAS;;;;;;4BAMZ,WAAW;;;;yBAId,gBAAgB;;4BAEb,UAAU;;;;;;;;;;YAU1B,YAAY;;;;;+BAKO,SAAS;;;;;;;;;;;;;;;;;;iCAkBP,qBAAqB;;mBAEnC,WAAW;;;;+BAIC,gBAAgB;;;;;iBAK9B,qBAAqB;6BACT,qBAAqB;;;;;;+BAMnB,SAAS;;;;;;;;;wCASA,YAAY;iEACa,YAAY;sBACvD,mBAAmB;4BACb,gBAAgB;4BAChB,0BAA0B;;;;;;;;;;;;;;;;;;;;0BAoB5B,YAAY;;;;uBAIf,YAAY;;;;;;;;;;;wBAWX,aAAa;;;;iBAIpB,qBAAqB;;;;;uBAKf,YAAY;;;;;;;;iBAQlB,QAAQ;kBACP,QAAQ;gBACV,aAAa;;;;gBAIb,qBAAqB;;;;;;;;;;;CAWpC,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,SAAS,EAC5B,GAAG,CAAA;;uCAE4B,WAAW;;;;;qCAKb,qBAAqB;;SAEjD,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,OAAO,EAC1B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;uCAIvB,WAAW;;;;;yCAKT,qBAAqB;;SAErD,CACJ,EACD,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';\nimport {\n    applicationBackgroundColor,\n    bodyFont,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    borderHoverColor,\n    borderWidth,\n    controlHeight,\n    iconSize,\n    menuMinWidth,\n    popupBorderColor,\n    smallDelay,\n    smallPadding,\n    borderRgbPartialColor,\n    mediumPadding,\n    failColor,\n    elevation2BoxShadow\n} from '../../theme-provider/design-tokens';\nimport { Theme } from '../../theme-provider/types';\nimport { appearanceBehavior } from '../../utilities/style/appearance';\nimport { hexToRgbaCssColor } from '../../utilities/style/colors';\nimport { focusVisible } from '../../utilities/style/focus';\nimport { themeBehavior } from '../../utilities/style/theme';\nimport { DropdownAppearance } from './types';\nimport { userSelectNone } from '../../utilities/style/user-select';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        box-sizing: border-box;\n        color: ${bodyFontColor};\n        font: ${bodyFont};\n        height: ${controlHeight};\n        position: relative;\n        justify-content: center;\n        ${userSelectNone}\n        min-width: ${menuMinWidth};\n        outline: none;\n        vertical-align: top;\n        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n        --ni-private-focus-indicator-width: 1px;\n        --ni-private-indicator-lines-gap: 1px;\n    }\n\n    :host::before {\n        content: '';\n        position: absolute;\n        bottom: calc(${borderWidth} + var(--ni-private-indicator-lines-gap));\n        width: 0px;\n        height: 0px;\n        justify-self: center;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-focus-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        :host::before {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(${focusVisible})::before {\n        width: calc(100% - 8px);\n    }\n\n    :host([error-visible]):before {\n        border-bottom-color: ${failColor};\n    }\n\n    :host::after {\n        content: '';\n        position: absolute;\n        bottom: calc(-1 * ${borderWidth});\n        width: 0px;\n        height: 0px;\n        justify-self: center;\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        :host::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(:hover)::after,\n    :host(${focusVisible})::after {\n        width: 100%;\n    }\n\n    :host([error-visible]):after {\n        border-bottom-color: ${failColor};\n    }\n\n    :host([disabled]:hover)::after {\n        width: 0px;\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    .control {\n        align-items: center;\n        box-sizing: border-box;\n        cursor: pointer;\n        display: flex;\n        min-height: 100%;\n        width: 100%;\n        border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n        background-color: transparent;\n        padding: ${borderWidth};\n    }\n\n    :host([open]:not(:hover)) .control {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    :host([disabled]) .control {\n        cursor: default;\n        color: ${bodyDisabledFontColor};\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([error-visible]) .control,\n    :host([error-visible][open]) .control,\n    :host([error-visible][disabled]) .control {\n        border-bottom-color: ${failColor};\n    }\n\n    .listbox {\n        box-sizing: border-box;\n        display: inline-flex;\n        flex-direction: column;\n        overflow-y: auto;\n        width: 100%;\n        --ni-private-listbox-padding: ${smallPadding};\n        max-height: calc(var(--ni-private-select-max-height) - ${smallPadding});\n        box-shadow: ${elevation2BoxShadow};\n        border: 1px solid ${popupBorderColor};\n        background-color: ${applicationBackgroundColor};\n    }\n\n    .listbox slot {\n        display: block;\n        background: transparent;\n        padding: var(--ni-private-listbox-padding);\n    }\n\n    :host([open][position='above']) .listbox {\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n    }\n\n    :host([open][position='below']) .listbox {\n        border-top-left-radius: 0;\n        border-top-right-radius: 0;\n    }\n\n    :host([open][position='above']) .anchored-region {\n        padding-bottom: ${smallPadding};\n    }\n\n    :host([open][position='below']) .anchored-region {\n        padding-top: ${smallPadding};\n    }\n\n    .selected-value {\n        flex: auto;\n        font-family: inherit;\n        text-align: start;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        padding: 0px;\n        padding-left: ${mediumPadding};\n    }\n\n    .selected-value[disabled]::placeholder {\n        color: ${bodyDisabledFontColor};\n    }\n\n    .indicator {\n        flex: none;\n        margin-left: ${smallPadding};\n        padding-right: 8px;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n    }\n\n    .indicator slot[name='indicator'] svg {\n        width: ${iconSize};\n        height: ${iconSize};\n        fill: ${bodyFontColor};\n    }\n\n    :host([disabled]) .indicator slot[name='indicator'] svg {\n        fill: ${bodyDisabledFontColor};\n    }\n\n    [part='end'] {\n        margin-inline-start: auto;\n    }\n\n    ::slotted([role='option']),\n    ::slotted(option) {\n        flex: none;\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        DropdownAppearance.underline,\n        css`\n            .control {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host([disabled]) .control {\n                border-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n        `\n    ),\n    appearanceBehavior(\n        DropdownAppearance.outline,\n        css`\n            .control {\n                border-width: ${borderWidth};\n                padding: 0;\n            }\n        `\n    ),\n    appearanceBehavior(\n        DropdownAppearance.block,\n        css`\n            .control {\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            .control:focus-within {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host([disabled]) .control {\n                background-color: rgba(${borderRgbPartialColor}, 0.07);\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            .listbox slot {\n                background: ${hexToRgbaCssColor(White, 0.15)};\n            }\n        `\n    )\n);\n"]}

package/dist/esm/radio/styles.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/radio/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,UAAU,EACb,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;gBAGZ,QAAQ;;;;;;;;;;;;;sBAaF,aAAa;uBACZ,aAAa;;;kBAGlB,WAAW,UAAU,WAAW;;;;;iCAKjB,UAAU;UACjC;AACE;;;GAGG,CAAC,EACR;;;;;iCAKyB,qBAAqB;6BACzB,qBAAqB;;;;wBAI1B,gBAAgB;kCACN,WAAW,IAAI,gBAAgB;;;YAGrD,YAAY;wBACA,gBAAgB;;;YAG5B,YAAY;;;4BAGI,aAAa;6BACZ,aAAa;4BACd,gBAAgB;;;;;;iBAM3B,aAAa;;;;;;iBAMb,qBAAqB;;;;;;;;kBAQpB,QAAQ;iBACT,QAAQ;;;;;;;;;gBAST,WAAW;;;;qBAIN,qBAAqB;;CAEzC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n    bodyDisabledFontColor,\n    bodyFont,\n    bodyFontColor,\n    borderColor,\n    borderHoverColor,\n    borderRgbPartialColor,\n    borderWidth,\n    controlHeight,\n    iconSize,\n    smallDelay\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        font: ${bodyFont};\n        align-items: center;\n        outline: none;\n        width: fit-content;\n        cursor: pointer;\n    }\n\n    :host([disabled]) {\n        cursor: default;\n    }\n\n    .control {\n        position: relative;\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        border-radius: 100%;\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    :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    }\n\n    :host(${focusVisible}) .control::after {\n        content: '';\n        position: absolute;\n        width: calc(2px + ${controlHeight} / 2);\n        height: calc(2px + ${controlHeight} / 2);\n        border: 2px solid ${borderHoverColor};\n        border-radius: 100%;\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        display: none;\n    }\n\n    slot[name='checked-indicator'] svg {\n        height: ${iconSize};\n        width: ${iconSize};\n        overflow: visible;\n    }\n\n    :host(.checked) slot[name='checked-indicator'] {\n        display: contents;\n    }\n\n    slot[name='checked-indicator'] circle {\n        fill: ${borderColor};\n    }\n\n    :host([disabled]) slot[name='checked-indicator'] circle {\n        fill: rgba(${borderRgbPartialColor}, 0.3);\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/radio/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,UAAU,EACb,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;gBAGZ,QAAQ;;;;;;;;;;;;;sBAaF,aAAa;uBACZ,aAAa;;;kBAGlB,WAAW,UAAU,WAAW;;;;;iCAKjB,UAAU;UACjC;AACE;;;GAGG,CAAC,EACR;;;;;iCAKyB,qBAAqB;6BACzB,qBAAqB;;;;wBAI1B,gBAAgB;kCACN,WAAW,IAAI,gBAAgB;;;YAGrD,YAAY;wBACA,gBAAgB;;;YAG5B,YAAY;;;4BAGI,aAAa;6BACZ,aAAa;4BACd,gBAAgB;;;;;;iBAM3B,aAAa;;;;;;iBAMb,qBAAqB;;;;;;;;kBAQpB,QAAQ;iBACT,QAAQ;;;;;;;;;gBAST,WAAW;;;;qBAIN,qBAAqB;;CAEzC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    bodyDisabledFontColor,\n    bodyFont,\n    bodyFontColor,\n    borderColor,\n    borderHoverColor,\n    borderRgbPartialColor,\n    borderWidth,\n    controlHeight,\n    iconSize,\n    smallDelay\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        font: ${bodyFont};\n        align-items: center;\n        outline: none;\n        width: fit-content;\n        cursor: pointer;\n    }\n\n    :host([disabled]) {\n        cursor: default;\n    }\n\n    .control {\n        position: relative;\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        border-radius: 100%;\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    :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    }\n\n    :host(${focusVisible}) .control::after {\n        content: '';\n        position: absolute;\n        width: calc(2px + ${controlHeight} / 2);\n        height: calc(2px + ${controlHeight} / 2);\n        border: 2px solid ${borderHoverColor};\n        border-radius: 100%;\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        display: none;\n    }\n\n    slot[name='checked-indicator'] svg {\n        height: ${iconSize};\n        width: ${iconSize};\n        overflow: visible;\n    }\n\n    :host(.checked) slot[name='checked-indicator'] {\n        display: contents;\n    }\n\n    slot[name='checked-indicator'] circle {\n        fill: ${borderColor};\n    }\n\n    :host([disabled]) slot[name='checked-indicator'] circle {\n        fill: rgba(${borderRgbPartialColor}, 0.3);\n    }\n`;\n"]}

package/dist/esm/radio-group/styles.js

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

package/dist/esm/radio-group/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/radio-group/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,6BAA6B,EAC7B,gBAAgB,EAChB,qBAAqB,EACrB,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;;eAId,eAAe;;;;;;;;;;;;gBAYd,gBAAgB;iBACf,qBAAqB;;;;iBAIrB,6BAA6B;;CAE7C,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n    controlLabelDisabledFontColor,\n    controlLabelFont,\n    controlLabelFontColor,\n    standardPadding\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('inline-block')}\n\n    .positioning-region {\n        display: flex;\n        gap: ${standardPadding};\n    }\n\n    :host([orientation='vertical']) .positioning-region {\n        flex-direction: column;\n    }\n\n    :host([orientation='horizontal']) .positioning-region {\n        flex-direction: row;\n    }\n\n    slot[name='label'] {\n        font: ${controlLabelFont};\n        color: ${controlLabelFontColor};\n    }\n\n    :host([disabled]) slot[name='label'] {\n        color: ${controlLabelDisabledFontColor};\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/radio-group/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,6BAA6B,EAC7B,gBAAgB,EAChB,qBAAqB,EACrB,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;;eAId,eAAe;;;;;;;;;;;;gBAYd,gBAAgB;iBACf,qBAAqB;;;;iBAIrB,6BAA6B;;CAE7C,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    controlLabelDisabledFontColor,\n    controlLabelFont,\n    controlLabelFontColor,\n    standardPadding\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('inline-block')}\n\n    .positioning-region {\n        display: flex;\n        gap: ${standardPadding};\n    }\n\n    :host([orientation='vertical']) .positioning-region {\n        flex-direction: column;\n    }\n\n    :host([orientation='horizontal']) .positioning-region {\n        flex-direction: row;\n    }\n\n    slot[name='label'] {\n        font: ${controlLabelFont};\n        color: ${controlLabelFontColor};\n    }\n\n    :host([disabled]) slot[name='label'] {\n        color: ${controlLabelDisabledFontColor};\n    }\n`;\n"]}