@ni/nimble-components 29.3.4 → 29.3.6

package/dist/esm/table-column/mapping/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/mapping/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { attr } from '@microsoft/fast-element';\nimport {\n    MappingConfigs,\n    TableColumnEnumBase,\n    TableColumnEnumColumnConfig\n} from '../enum-base';\nimport { styles } from '../enum-base/styles';\nimport { template } from '../enum-base/template';\nimport {\n    TableColumnSortOperation,\n    singleIconColumnWidth,\n    defaultMinPixelWidth\n} from '../base/types';\nimport { mixinGroupableColumnAPI } from '../mixins/groupable-column';\nimport { mixinFractionalWidthColumnAPI } from '../mixins/fractional-width-column';\nimport { MappingSpinner } from '../../mapping/spinner';\nimport { MappingIcon } from '../../mapping/icon';\nimport { TableColumnMappingValidator } from './models/table-column-mapping-validator';\nimport type { ColumnInternalsOptions } from '../base/models/column-internals';\nimport { tableColumnMappingGroupHeaderViewTag } from './group-header-view';\nimport { tableColumnMappingCellViewTag } from './cell-view';\nimport type { Mapping } from '../../mapping/base';\nimport type { MappingConfig } from '../enum-base/models/mapping-config';\nimport { MappingIconConfig } from '../enum-base/models/mapping-icon-config';\nimport { MappingSpinnerConfig } from '../enum-base/models/mapping-spinner-config';\nimport { MappingText } from '../../mapping/text';\nimport { MappingTextConfig } from '../enum-base/models/mapping-text-config';\nimport { MappingEmpty } from '../../mapping/empty';\nimport { MappingEmptyConfig } from '../enum-base/models/mapping-empty-config';\nimport { TableColumnMappingWidthMode } from './types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-column-mapping': TableColumnMapping;\n    }\n}\n\n/**\n * Table column that maps number, boolean, or string values to an icon, a spinner,\n * text, or an icon/spinner with text.\n */\nexport class TableColumnMapping extends mixinGroupableColumnAPI(\n    mixinFractionalWidthColumnAPI(\n        TableColumnEnumBase<\n        TableColumnEnumColumnConfig,\n        TableColumnMappingValidator\n        >\n    )\n) {\n    @attr({ attribute: 'width-mode' })\n    public widthMode: TableColumnMappingWidthMode;\n\n    public override minPixelWidthChanged(): void {\n        if (this.widthMode !== TableColumnMappingWidthMode.iconSize) {\n            this.columnInternals.minPixelWidth = this.getConfiguredMinPixelWidth();\n        }\n    }\n\n    protected override getColumnInternalsOptions(): ColumnInternalsOptions<TableColumnMappingValidator> {\n        return {\n            cellRecordFieldNames: ['value'],\n            cellViewTag: tableColumnMappingCellViewTag,\n            groupHeaderViewTag: tableColumnMappingGroupHeaderViewTag,\n            delegatedEvents: [],\n            sortOperation: TableColumnSortOperation.basic,\n            validator: new TableColumnMappingValidator()\n        };\n    }\n\n    protected override createColumnConfig(\n        mappingConfigs: MappingConfigs\n    ): TableColumnEnumColumnConfig {\n        return {\n            mappingConfigs\n        };\n    }\n\n    protected createMappingConfig(mapping: Mapping<unknown>): MappingConfig {\n        if (mapping instanceof MappingIcon) {\n            if (!mapping.resolvedIcon) {\n                throw Error('Unresolved icon');\n            }\n\n            return new MappingIconConfig(\n                mapping.resolvedIcon,\n                mapping.severity,\n                mapping.text,\n                mapping.textHidden\n            );\n        }\n        if (mapping instanceof MappingSpinner) {\n            return new MappingSpinnerConfig(mapping.text, mapping.textHidden);\n        }\n        if (mapping instanceof MappingText) {\n            return new MappingTextConfig(mapping.text);\n        }\n        if (mapping instanceof MappingEmpty) {\n            return new MappingEmptyConfig(mapping.text);\n        }\n        // Getting here would indicate a programming error, b/c validation will prevent\n        // this function from running when there is an unsupported mapping.\n        throw new Error('Unsupported mapping');\n    }\n\n    private widthModeChanged(): void {\n        if (this.widthMode === TableColumnMappingWidthMode.iconSize) {\n            this.columnInternals.resizingDisabled = true;\n            this.columnInternals.hideHeaderIndicators = true;\n            this.columnInternals.pixelWidth = singleIconColumnWidth;\n            this.columnInternals.minPixelWidth = singleIconColumnWidth;\n        } else {\n            this.columnInternals.resizingDisabled = false;\n            this.columnInternals.hideHeaderIndicators = false;\n            this.columnInternals.pixelWidth = undefined;\n            this.columnInternals.minPixelWidth = this.getConfiguredMinPixelWidth();\n        }\n    }\n\n    private getConfiguredMinPixelWidth(): number {\n        if (typeof this.minPixelWidth === 'number') {\n            return this.minPixelWidth;\n        }\n        return defaultMinPixelWidth;\n    }\n}\n\nconst nimbleTableColumnMapping = TableColumnMapping.compose({\n    baseName: 'table-column-mapping',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(nimbleTableColumnMapping());\nexport const tableColumnMappingTag = 'nimble-table-column-mapping';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/mapping/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { attr } from '@microsoft/fast-element';\nimport {\n    MappingConfigs,\n    TableColumnEnumBase,\n    TableColumnEnumColumnConfig\n} from '../enum-base';\nimport { styles } from '../enum-base/styles';\nimport { template } from '../enum-base/template';\nimport {\n    TableColumnSortOperation,\n    singleIconColumnWidth,\n    defaultMinPixelWidth\n} from '../base/types';\nimport { mixinGroupableColumnAPI } from '../mixins/groupable-column';\nimport { mixinFractionalWidthColumnAPI } from '../mixins/fractional-width-column';\nimport { MappingSpinner } from '../../mapping/spinner';\nimport { MappingIcon } from '../../mapping/icon';\nimport { TableColumnMappingValidator } from './models/table-column-mapping-validator';\nimport type { ColumnInternalsOptions } from '../base/models/column-internals';\nimport { tableColumnMappingGroupHeaderViewTag } from './group-header-view';\nimport { tableColumnMappingCellViewTag } from './cell-view';\nimport type { Mapping } from '../../mapping/base';\nimport type { MappingConfig } from '../enum-base/models/mapping-config';\nimport { MappingIconConfig } from '../enum-base/models/mapping-icon-config';\nimport { MappingSpinnerConfig } from '../enum-base/models/mapping-spinner-config';\nimport { MappingText } from '../../mapping/text';\nimport { MappingTextConfig } from '../enum-base/models/mapping-text-config';\nimport { MappingEmpty } from '../../mapping/empty';\nimport { MappingEmptyConfig } from '../enum-base/models/mapping-empty-config';\nimport { TableColumnMappingWidthMode } from './types';\nimport { mixinSortableColumnAPI } from '../mixins/sortable-column';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-column-mapping': TableColumnMapping;\n    }\n}\n\n/**\n * Table column that maps number, boolean, or string values to an icon, a spinner,\n * text, or an icon/spinner with text.\n */\nexport class TableColumnMapping extends mixinGroupableColumnAPI(\n    mixinFractionalWidthColumnAPI(\n        mixinSortableColumnAPI(\n            TableColumnEnumBase<\n            TableColumnEnumColumnConfig,\n            TableColumnMappingValidator\n            >\n        )\n    )\n) {\n    @attr({ attribute: 'width-mode' })\n    public widthMode: TableColumnMappingWidthMode;\n\n    public override minPixelWidthChanged(): void {\n        if (this.widthMode !== TableColumnMappingWidthMode.iconSize) {\n            this.columnInternals.minPixelWidth = this.getConfiguredMinPixelWidth();\n        }\n    }\n\n    protected override getColumnInternalsOptions(): ColumnInternalsOptions<TableColumnMappingValidator> {\n        return {\n            cellRecordFieldNames: ['value'],\n            cellViewTag: tableColumnMappingCellViewTag,\n            groupHeaderViewTag: tableColumnMappingGroupHeaderViewTag,\n            delegatedEvents: [],\n            sortOperation: TableColumnSortOperation.basic,\n            validator: new TableColumnMappingValidator()\n        };\n    }\n\n    protected override createColumnConfig(\n        mappingConfigs: MappingConfigs\n    ): TableColumnEnumColumnConfig {\n        return {\n            mappingConfigs\n        };\n    }\n\n    protected createMappingConfig(mapping: Mapping<unknown>): MappingConfig {\n        if (mapping instanceof MappingIcon) {\n            if (!mapping.resolvedIcon) {\n                throw Error('Unresolved icon');\n            }\n\n            return new MappingIconConfig(\n                mapping.resolvedIcon,\n                mapping.severity,\n                mapping.text,\n                mapping.textHidden\n            );\n        }\n        if (mapping instanceof MappingSpinner) {\n            return new MappingSpinnerConfig(mapping.text, mapping.textHidden);\n        }\n        if (mapping instanceof MappingText) {\n            return new MappingTextConfig(mapping.text);\n        }\n        if (mapping instanceof MappingEmpty) {\n            return new MappingEmptyConfig(mapping.text);\n        }\n        // Getting here would indicate a programming error, b/c validation will prevent\n        // this function from running when there is an unsupported mapping.\n        throw new Error('Unsupported mapping');\n    }\n\n    private widthModeChanged(): void {\n        if (this.widthMode === TableColumnMappingWidthMode.iconSize) {\n            this.columnInternals.resizingDisabled = true;\n            this.columnInternals.hideHeaderIndicators = true;\n            this.columnInternals.pixelWidth = singleIconColumnWidth;\n            this.columnInternals.minPixelWidth = singleIconColumnWidth;\n        } else {\n            this.columnInternals.resizingDisabled = false;\n            this.columnInternals.hideHeaderIndicators = false;\n            this.columnInternals.pixelWidth = undefined;\n            this.columnInternals.minPixelWidth = this.getConfiguredMinPixelWidth();\n        }\n    }\n\n    private getConfiguredMinPixelWidth(): number {\n        if (typeof this.minPixelWidth === 'number') {\n            return this.minPixelWidth;\n        }\n        return defaultMinPixelWidth;\n    }\n}\n\nconst nimbleTableColumnMapping = TableColumnMapping.compose({\n    baseName: 'table-column-mapping',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(nimbleTableColumnMapping());\nexport const tableColumnMappingTag = 'nimble-table-column-mapping';\n"]}

package/dist/esm/table-column/mixins/fractional-width-column.js

@@ -9,20 +9,10 @@ export function mixinFractionalWidthColumnAPI(base) {
      */
     class FractionalWidthColumn extends base {
         fractionalWidthChanged() {
-            if (typeof this.fractionalWidth === 'number') {
-                this.columnInternals.fractionalWidth = this.fractionalWidth;
-            }
-            else {
-                this.columnInternals.fractionalWidth = defaultFractionalWidth;
-            }
+            this.columnInternals.fractionalWidth = this.fractionalWidth ?? defaultFractionalWidth;
         }
         minPixelWidthChanged() {
-            if (typeof this.minPixelWidth === 'number') {
-                this.columnInternals.minPixelWidth = this.minPixelWidth;
-            }
-            else {
-                this.columnInternals.minPixelWidth = defaultMinPixelWidth;
-            }
+            this.columnInternals.minPixelWidth = this.minPixelWidth ?? defaultMinPixelWidth;
         }
     }
     attr({ attribute: 'fractional-width', converter: nullableNumberConverter })(

package/dist/esm/table-column/mixins/fractional-width-column.js.map

@@ -1 +1 @@
-{"version":3,"file":"fractional-width-column.js","sourceRoot":"","sources":["../../../../src/table-column/mixins/fractional-width-column.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAExE,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAQ7E,4HAA4H;AAC5H,+HAA+H;AAC/H,MAAM,UAAU,6BAA6B,CAE3C,IAAW;IACT;;;OAGG;IACH,MAAe,qBAAsB,SAAQ,IAAI;QAKtC,sBAAsB;YACzB,IAAI,OAAO,IAAI,CAAC,eAAe,KAAK,QAAQ,EAAE;gBAC1C,IAAI,CAAC,eAAe,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;aAC/D;iBAAM;gBACH,IAAI,CAAC,eAAe,CAAC,eAAe,GAAG,sBAAsB,CAAC;aACjE;QACL,CAAC;QAEM,oBAAoB;YACvB,IAAI,OAAO,IAAI,CAAC,aAAa,KAAK,QAAQ,EAAE;gBACxC,IAAI,CAAC,eAAe,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;aAC3D;iBAAM;gBACH,IAAI,CAAC,eAAe,CAAC,aAAa,GAAG,oBAAoB,CAAC;aAC7D;QACL,CAAC;KACJ;IAED,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;IACvE,iEAAiE;IACjE,qBAAqB,CAAC,SAAS,EAC/B,iBAAiB,CACpB,CAAC;IACF,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;IACtE,iEAAiE;IACjE,qBAAqB,CAAC,SAAS,EAC/B,eAAe,CAClB,CAAC;IACF,OAAO,qBAAqB,CAAC;AACjC,CAAC","sourcesContent":["import { attr, nullableNumberConverter } from '@microsoft/fast-element';\nimport type { TableColumn } from '../base';\nimport { defaultMinPixelWidth, defaultFractionalWidth } from '../base/types';\n\n// Pick just the relevant properties the mixin depends on (typescript complains if the mixin declares private / protected base exports)\ntype SizedTableColumn = Pick<TableColumn, 'columnInternals'>;\n// prettier-ignore\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype SizedTableColumnConstructor = abstract new (...args: any[]) => SizedTableColumn;\n\n// As the returned class is internal to the function, we can't write a signature that uses is directly, so rely on inference\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type\nexport function mixinFractionalWidthColumnAPI<\n    TBase extends SizedTableColumnConstructor\n>(base: TBase) {\n    /**\n     * The Mixin that provides a concrete column with the API to support being resized\n     * proportionally within a Table.\n     */\n    abstract class FractionalWidthColumn extends base {\n        public fractionalWidth?: number | null;\n\n        public minPixelWidth?: number | null;\n\n        public fractionalWidthChanged(): void {\n            if (typeof this.fractionalWidth === 'number') {\n                this.columnInternals.fractionalWidth = this.fractionalWidth;\n            } else {\n                this.columnInternals.fractionalWidth = defaultFractionalWidth;\n            }\n        }\n\n        public minPixelWidthChanged(): void {\n            if (typeof this.minPixelWidth === 'number') {\n                this.columnInternals.minPixelWidth = this.minPixelWidth;\n            } else {\n                this.columnInternals.minPixelWidth = defaultMinPixelWidth;\n            }\n        }\n    }\n\n    attr({ attribute: 'fractional-width', converter: nullableNumberConverter })(\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n        FractionalWidthColumn.prototype,\n        'fractionalWidth'\n    );\n    attr({ attribute: 'min-pixel-width', converter: nullableNumberConverter })(\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n        FractionalWidthColumn.prototype,\n        'minPixelWidth'\n    );\n    return FractionalWidthColumn;\n}\n"]}
+{"version":3,"file":"fractional-width-column.js","sourceRoot":"","sources":["../../../../src/table-column/mixins/fractional-width-column.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAExE,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAQ7E,4HAA4H;AAC5H,+HAA+H;AAC/H,MAAM,UAAU,6BAA6B,CAE3C,IAAW;IACT;;;OAGG;IACH,MAAe,qBAAsB,SAAQ,IAAI;QAKtC,sBAAsB;YACzB,IAAI,CAAC,eAAe,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,IAAI,sBAAsB,CAAC;QAC1F,CAAC;QAEM,oBAAoB;YACvB,IAAI,CAAC,eAAe,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,IAAI,oBAAoB,CAAC;QACpF,CAAC;KACJ;IAED,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;IACvE,iEAAiE;IACjE,qBAAqB,CAAC,SAAS,EAC/B,iBAAiB,CACpB,CAAC;IACF,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;IACtE,iEAAiE;IACjE,qBAAqB,CAAC,SAAS,EAC/B,eAAe,CAClB,CAAC;IACF,OAAO,qBAAqB,CAAC;AACjC,CAAC","sourcesContent":["import { attr, nullableNumberConverter } from '@microsoft/fast-element';\nimport type { TableColumn } from '../base';\nimport { defaultMinPixelWidth, defaultFractionalWidth } from '../base/types';\n\n// Pick just the relevant properties the mixin depends on (typescript complains if the mixin declares private / protected base exports)\ntype SizedTableColumn = Pick<TableColumn, 'columnInternals'>;\n// prettier-ignore\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype SizedTableColumnConstructor = abstract new (...args: any[]) => SizedTableColumn;\n\n// As the returned class is internal to the function, we can't write a signature that uses is directly, so rely on inference\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type\nexport function mixinFractionalWidthColumnAPI<\n    TBase extends SizedTableColumnConstructor\n>(base: TBase) {\n    /**\n     * The Mixin that provides a concrete column with the API to support being resized\n     * proportionally within a Table.\n     */\n    abstract class FractionalWidthColumn extends base {\n        public fractionalWidth?: number | null;\n\n        public minPixelWidth?: number | null;\n\n        public fractionalWidthChanged(): void {\n            this.columnInternals.fractionalWidth = this.fractionalWidth ?? defaultFractionalWidth;\n        }\n\n        public minPixelWidthChanged(): void {\n            this.columnInternals.minPixelWidth = this.minPixelWidth ?? defaultMinPixelWidth;\n        }\n    }\n\n    attr({ attribute: 'fractional-width', converter: nullableNumberConverter })(\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n        FractionalWidthColumn.prototype,\n        'fractionalWidth'\n    );\n    attr({ attribute: 'min-pixel-width', converter: nullableNumberConverter })(\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n        FractionalWidthColumn.prototype,\n        'minPixelWidth'\n    );\n    return FractionalWidthColumn;\n}\n"]}

package/dist/esm/table-column/mixins/groupable-column.js

@@ -10,18 +10,12 @@ export function mixinGroupableColumnAPI(base) {
         constructor() {
             super(...arguments);
             this.groupingDisabled = false;
-            this.groupIndex = null;
         }
         groupingDisabledChanged() {
             this.columnInternals.groupingDisabled = this.groupingDisabled;
         }
         groupIndexChanged() {
-            if (typeof this.groupIndex === 'number') {
-                this.columnInternals.groupIndex = this.groupIndex;
-            }
-            else {
-                this.columnInternals.groupIndex = undefined;
-            }
+            this.columnInternals.groupIndex = this.groupIndex ?? undefined;
         }
     }
     attr({ attribute: 'grouping-disabled', mode: 'boolean' })(

package/dist/esm/table-column/mixins/groupable-column.js.map

@@ -1 +1 @@
-{"version":3,"file":"groupable-column.js","sourceRoot":"","sources":["../../../../src/table-column/mixins/groupable-column.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AASxE,4HAA4H;AAC5H,+HAA+H;AAC/H,MAAM,UAAU,uBAAuB,CAErC,IAAW;IACT;;;OAGG;IACH,MAAe,eAAgB,SAAQ,IAAI;QAA3C;;YACW,qBAAgB,GAAG,KAAK,CAAC;YAEzB,eAAU,GAAmB,IAAI,CAAC;QAa7C,CAAC;QAXU,uBAAuB;YAC1B,IAAI,CAAC,eAAe,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC;QAClE,CAAC;QAEM,iBAAiB;YACpB,IAAI,OAAO,IAAI,CAAC,UAAU,KAAK,QAAQ,EAAE;gBACrC,IAAI,CAAC,eAAe,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;aACrD;iBAAM;gBACH,IAAI,CAAC,eAAe,CAAC,UAAU,GAAG,SAAS,CAAC;aAC/C;QACL,CAAC;KACJ;IACD,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;IACrD,iEAAiE;IACjE,eAAe,CAAC,SAAS,EACzB,kBAAkB,CACrB,CAAC;IACF,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;IAClE,iEAAiE;IACjE,eAAe,CAAC,SAAS,EACzB,YAAY,CACf,CAAC;IAEF,OAAO,eAAe,CAAC;AAC3B,CAAC","sourcesContent":["import { attr, nullableNumberConverter } from '@microsoft/fast-element';\nimport type { TableColumn } from '../base';\n\n// Pick just the relevant properties the mixin depends on (typescript complains if the mixin declares private / protected base exports)\ntype GroupableTableColumn = Pick<TableColumn, 'columnInternals'>;\n// prettier-ignore\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype GroupableTableColumnConstructor = abstract new (...args: any[]) => GroupableTableColumn;\n\n// As the returned class is internal to the function, we can't write a signature that uses is directly, so rely on inference\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type\nexport function mixinGroupableColumnAPI<\n    TBase extends GroupableTableColumnConstructor\n>(base: TBase) {\n    /**\n     * The Mixin that provides a concrete column with the API to allow grouping\n     * by the values in that column.\n     */\n    abstract class GroupableColumn extends base {\n        public groupingDisabled = false;\n\n        public groupIndex?: number | null = null;\n\n        public groupingDisabledChanged(): void {\n            this.columnInternals.groupingDisabled = this.groupingDisabled;\n        }\n\n        public groupIndexChanged(): void {\n            if (typeof this.groupIndex === 'number') {\n                this.columnInternals.groupIndex = this.groupIndex;\n            } else {\n                this.columnInternals.groupIndex = undefined;\n            }\n        }\n    }\n    attr({ attribute: 'grouping-disabled', mode: 'boolean' })(\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n        GroupableColumn.prototype,\n        'groupingDisabled'\n    );\n    attr({ attribute: 'group-index', converter: nullableNumberConverter })(\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n        GroupableColumn.prototype,\n        'groupIndex'\n    );\n\n    return GroupableColumn;\n}\n"]}
+{"version":3,"file":"groupable-column.js","sourceRoot":"","sources":["../../../../src/table-column/mixins/groupable-column.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AASxE,4HAA4H;AAC5H,+HAA+H;AAC/H,MAAM,UAAU,uBAAuB,CAErC,IAAW;IACT;;;OAGG;IACH,MAAe,eAAgB,SAAQ,IAAI;QAA3C;;YACW,qBAAgB,GAAG,KAAK,CAAC;QAWpC,CAAC;QAPU,uBAAuB;YAC1B,IAAI,CAAC,eAAe,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC;QAClE,CAAC;QAEM,iBAAiB;YACpB,IAAI,CAAC,eAAe,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,IAAI,SAAS,CAAC;QACnE,CAAC;KACJ;IACD,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;IACrD,iEAAiE;IACjE,eAAe,CAAC,SAAS,EACzB,kBAAkB,CACrB,CAAC;IACF,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;IAClE,iEAAiE;IACjE,eAAe,CAAC,SAAS,EACzB,YAAY,CACf,CAAC;IAEF,OAAO,eAAe,CAAC;AAC3B,CAAC","sourcesContent":["import { attr, nullableNumberConverter } from '@microsoft/fast-element';\nimport type { TableColumn } from '../base';\n\n// Pick just the relevant properties the mixin depends on (typescript complains if the mixin declares private / protected base exports)\ntype GroupableTableColumn = Pick<TableColumn, 'columnInternals'>;\n// prettier-ignore\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype GroupableTableColumnConstructor = abstract new (...args: any[]) => GroupableTableColumn;\n\n// As the returned class is internal to the function, we can't write a signature that uses is directly, so rely on inference\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type\nexport function mixinGroupableColumnAPI<\n    TBase extends GroupableTableColumnConstructor\n>(base: TBase) {\n    /**\n     * The Mixin that provides a concrete column with the API to allow grouping\n     * by the values in that column.\n     */\n    abstract class GroupableColumn extends base {\n        public groupingDisabled = false;\n\n        public groupIndex?: number | null;\n\n        public groupingDisabledChanged(): void {\n            this.columnInternals.groupingDisabled = this.groupingDisabled;\n        }\n\n        public groupIndexChanged(): void {\n            this.columnInternals.groupIndex = this.groupIndex ?? undefined;\n        }\n    }\n    attr({ attribute: 'grouping-disabled', mode: 'boolean' })(\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n        GroupableColumn.prototype,\n        'groupingDisabled'\n    );\n    attr({ attribute: 'group-index', converter: nullableNumberConverter })(\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n        GroupableColumn.prototype,\n        'groupIndex'\n    );\n\n    return GroupableColumn;\n}\n"]}

package/dist/esm/table-column/mixins/sortable-column.d.ts

@@ -0,0 +1,17 @@
+import type { TableColumn } from '../base';
+import { TableColumnSortDirection } from '../../table/types';
+type SortableTableColumn = Pick<TableColumn, 'columnInternals'>;
+type SortableTableColumnConstructor = abstract new (...args: any[]) => SortableTableColumn;
+export declare function mixinSortableColumnAPI<TBase extends SortableTableColumnConstructor>(base: TBase): (abstract new (...args: any[]) => {
+    sortingDisabled: boolean;
+    sortIndex?: number | null | undefined;
+    sortDirection: TableColumnSortDirection;
+    /** @internal */
+    sortingDisabledChanged(): void;
+    /** @internal */
+    sortDirectionChanged(): void;
+    /** @internal */
+    sortIndexChanged(): void;
+    readonly columnInternals: import("../base/models/column-internals").ColumnInternals<unknown, import("../base/models/column-validator").ColumnValidator<[]>>;
+}) & TBase;
+export {};

package/dist/esm/table-column/mixins/sortable-column.js

@@ -0,0 +1,52 @@
+import { attr, nullableNumberConverter } from '@microsoft/fast-element';
+import { TableColumnSortDirection } from '../../table/types';
+// As the returned class is internal to the function, we can't write a signature that uses is directly, so rely on inference
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
+export function mixinSortableColumnAPI(base) {
+    /**
+     * The Mixin that provides a concrete column with the API to allow sorting
+     * by the values in that column.
+     */
+    class SortableColumn extends base {
+        constructor() {
+            super(...arguments);
+            this.sortingDisabled = false;
+            this.sortDirection = TableColumnSortDirection.none;
+        }
+        /** @internal */
+        sortingDisabledChanged() {
+            this.columnInternals.sortingDisabled = this.sortingDisabled;
+            if (this.sortingDisabled) {
+                this.columnInternals.currentSortDirection = TableColumnSortDirection.none;
+                this.columnInternals.currentSortIndex = undefined;
+            }
+            else {
+                this.columnInternals.currentSortDirection = this.sortDirection;
+                this.columnInternals.currentSortIndex = this.sortIndex ?? undefined;
+            }
+        }
+        /** @internal */
+        sortDirectionChanged() {
+            if (!this.sortingDisabled) {
+                this.columnInternals.currentSortDirection = this.sortDirection;
+            }
+        }
+        /** @internal */
+        sortIndexChanged() {
+            if (!this.sortingDisabled) {
+                this.columnInternals.currentSortIndex = this.sortIndex ?? undefined;
+            }
+        }
+    }
+    attr({ attribute: 'sorting-disabled', mode: 'boolean' })(
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    SortableColumn.prototype, 'sortingDisabled');
+    attr({ attribute: 'sort-index', converter: nullableNumberConverter })(
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    SortableColumn.prototype, 'sortIndex');
+    attr({ attribute: 'sort-direction' })(
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    SortableColumn.prototype, 'sortDirection');
+    return SortableColumn;
+}
+//# sourceMappingURL=sortable-column.js.map

package/dist/esm/table-column/mixins/sortable-column.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortable-column.js","sourceRoot":"","sources":["../../../../src/table-column/mixins/sortable-column.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAExE,OAAO,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAQ7D,4HAA4H;AAC5H,+HAA+H;AAC/H,MAAM,UAAU,sBAAsB,CAEpC,IAAW;IACT;;;OAGG;IACH,MAAe,cAAe,SAAQ,IAAI;QAA1C;;YACW,oBAAe,GAAG,KAAK,CAAC;YAIxB,kBAAa,GAA6B,wBAAwB,CAAC,IAAI,CAAC;QA2BnF,CAAC;QAzBG,gBAAgB;QACT,sBAAsB;YACzB,IAAI,CAAC,eAAe,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;YAC5D,IAAI,IAAI,CAAC,eAAe,EAAE;gBACtB,IAAI,CAAC,eAAe,CAAC,oBAAoB,GAAG,wBAAwB,CAAC,IAAI,CAAC;gBAC1E,IAAI,CAAC,eAAe,CAAC,gBAAgB,GAAG,SAAS,CAAC;aACrD;iBAAM;gBACH,IAAI,CAAC,eAAe,CAAC,oBAAoB,GAAG,IAAI,CAAC,aAAa,CAAC;gBAC/D,IAAI,CAAC,eAAe,CAAC,gBAAgB,GAAG,IAAI,CAAC,SAAS,IAAI,SAAS,CAAC;aACvE;QACL,CAAC;QAED,gBAAgB;QACT,oBAAoB;YACvB,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;gBACvB,IAAI,CAAC,eAAe,CAAC,oBAAoB,GAAG,IAAI,CAAC,aAAa,CAAC;aAClE;QACL,CAAC;QAED,gBAAgB;QACT,gBAAgB;YACnB,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;gBACvB,IAAI,CAAC,eAAe,CAAC,gBAAgB,GAAG,IAAI,CAAC,SAAS,IAAI,SAAS,CAAC;aACvE;QACL,CAAC;KACJ;IACD,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;IACpD,iEAAiE;IACjE,cAAc,CAAC,SAAS,EACxB,iBAAiB,CACpB,CAAC;IACF,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;IACjE,iEAAiE;IACjE,cAAc,CAAC,SAAS,EACxB,WAAW,CACd,CAAC;IACF,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;IACjC,iEAAiE;IACjE,cAAc,CAAC,SAAS,EACxB,eAAe,CAClB,CAAC;IAEF,OAAO,cAAc,CAAC;AAC1B,CAAC","sourcesContent":["import { attr, nullableNumberConverter } from '@microsoft/fast-element';\nimport type { TableColumn } from '../base';\nimport { TableColumnSortDirection } from '../../table/types';\n\n// Pick just the relevant properties the mixin depends on (typescript complains if the mixin declares private / protected base exports)\ntype SortableTableColumn = Pick<TableColumn, 'columnInternals'>;\n// prettier-ignore\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype SortableTableColumnConstructor = abstract new (...args: any[]) => SortableTableColumn;\n\n// As the returned class is internal to the function, we can't write a signature that uses is directly, so rely on inference\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type\nexport function mixinSortableColumnAPI<\n    TBase extends SortableTableColumnConstructor\n>(base: TBase) {\n    /**\n     * The Mixin that provides a concrete column with the API to allow sorting\n     * by the values in that column.\n     */\n    abstract class SortableColumn extends base {\n        public sortingDisabled = false;\n\n        public sortIndex?: number | null;\n\n        public sortDirection: TableColumnSortDirection = TableColumnSortDirection.none;\n\n        /** @internal */\n        public sortingDisabledChanged(): void {\n            this.columnInternals.sortingDisabled = this.sortingDisabled;\n            if (this.sortingDisabled) {\n                this.columnInternals.currentSortDirection = TableColumnSortDirection.none;\n                this.columnInternals.currentSortIndex = undefined;\n            } else {\n                this.columnInternals.currentSortDirection = this.sortDirection;\n                this.columnInternals.currentSortIndex = this.sortIndex ?? undefined;\n            }\n        }\n\n        /** @internal */\n        public sortDirectionChanged(): void {\n            if (!this.sortingDisabled) {\n                this.columnInternals.currentSortDirection = this.sortDirection;\n            }\n        }\n\n        /** @internal */\n        public sortIndexChanged(): void {\n            if (!this.sortingDisabled) {\n                this.columnInternals.currentSortIndex = this.sortIndex ?? undefined;\n            }\n        }\n    }\n    attr({ attribute: 'sorting-disabled', mode: 'boolean' })(\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n        SortableColumn.prototype,\n        'sortingDisabled'\n    );\n    attr({ attribute: 'sort-index', converter: nullableNumberConverter })(\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n        SortableColumn.prototype,\n        'sortIndex'\n    );\n    attr({ attribute: 'sort-direction' })(\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n        SortableColumn.prototype,\n        'sortDirection'\n    );\n\n    return SortableColumn;\n}\n"]}

package/dist/esm/table-column/number-text/index.d.ts

@@ -31,6 +31,14 @@ declare const TableColumnNumberText_base: (abstract new (...args: any[]) => {
 }) & (abstract new (...args: any[]) => {
     placeholder?: string | undefined;
     placeholderChanged(): void;
+}) & (abstract new (...args: any[]) => {
+    sortingDisabled: boolean;
+    sortIndex?: number | null | undefined;
+    sortDirection: import("../../table/types").TableColumnSortDirection;
+    sortingDisabledChanged(): void;
+    sortDirectionChanged(): void;
+    sortIndexChanged(): void;
+    readonly columnInternals: import("../base/models/column-internals").ColumnInternals<unknown, import("../base/models/column-validator").ColumnValidator<[]>>;
 }) & ((abstract new () => TableColumnTextBase<TableColumnNumberTextColumnConfig, TableColumnNumberTextValidator>) & {
     compose<T extends import("@microsoft/fast-foundation").FoundationElementDefinition = import("@microsoft/fast-foundation").FoundationElementDefinition, K extends import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement> = import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>(this: K, elementDefinition: T): (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<T> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<T, K>;
     from<TBase extends {

package/dist/esm/table-column/text/index.d.ts

@@ -26,6 +26,14 @@ declare const TableColumnText_base: (abstract new (...args: any[]) => {
 }) & (abstract new (...args: any[]) => {
     placeholder?: string | undefined;
     placeholderChanged(): void;
+}) & (abstract new (...args: any[]) => {
+    sortingDisabled: boolean;
+    sortIndex?: number | null | undefined;
+    sortDirection: import("../../table/types").TableColumnSortDirection;
+    sortingDisabledChanged(): void;
+    sortDirectionChanged(): void;
+    sortIndexChanged(): void;
+    readonly columnInternals: import("../base/models/column-internals").ColumnInternals<unknown, ColumnValidator<[]>>;
 }) & ((abstract new () => TableColumnTextBase<TableColumnTextColumnConfig, ColumnValidator<[]>>) & {
     compose<T extends import("@microsoft/fast-foundation").FoundationElementDefinition = import("@microsoft/fast-foundation").FoundationElementDefinition, K extends import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement> = import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>(this: K, elementDefinition: T): (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<T> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<T, K>;
     from<TBase extends {

package/dist/esm/table-column/text-base/index.d.ts

@@ -23,5 +23,13 @@ export declare function mixinTextBase<TBase extends TableColumnBaseConstructor<T
 }) & (abstract new (...args: any[]) => {
     placeholder?: string | undefined;
     placeholderChanged(): void;
+}) & (abstract new (...args: any[]) => {
+    sortingDisabled: boolean;
+    sortIndex?: number | null | undefined;
+    sortDirection: import("../../table/types").TableColumnSortDirection;
+    sortingDisabledChanged(): void;
+    sortDirectionChanged(): void;
+    sortIndexChanged(): void;
+    readonly columnInternals: import("../base/models/column-internals").ColumnInternals<unknown, ColumnValidator<[]>>;
 }) & TBase;
 export {};

package/dist/esm/table-column/text-base/index.js

@@ -4,6 +4,7 @@ import { TableColumn } from '../base';
 import { mixinFractionalWidthColumnAPI } from '../mixins/fractional-width-column';
 import { mixinGroupableColumnAPI } from '../mixins/groupable-column';
 import { mixinColumnWithPlaceholderAPI } from '../mixins/placeholder';
+import { mixinSortableColumnAPI } from '../mixins/sortable-column';
 /**
  * The base class for table columns that display fields of any type as text.
  */
@@ -18,6 +19,6 @@ __decorate([
 ], TableColumnTextBase.prototype, "fieldName", void 0);
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type, @typescript-eslint/no-explicit-any
 export function mixinTextBase(base) {
-    return mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI(mixinColumnWithPlaceholderAPI(base)));
+    return mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI(mixinColumnWithPlaceholderAPI(mixinSortableColumnAPI(base))));
 }
 //# sourceMappingURL=index.js.map

package/dist/esm/table-column/text-base/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/text-base/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,EAAE,6BAA6B,EAAE,MAAM,mCAAmC,CAAC;AAClF,OAAO,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,EAAE,6BAA6B,EAAE,MAAM,uBAAuB,CAAC;AAGtE;;GAEG;AACH,MAAM,OAAgB,mBAGpB,SAAQ,WAA4C;IAIxC,gBAAgB;QACtB,IAAI,CAAC,eAAe,CAAC,oBAAoB,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC7D,IAAI,CAAC,eAAe,CAAC,0BAA0B,GAAG,IAAI,CAAC,SAAS,CAAC;IACrE,CAAC;CACJ;AANU;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;sDACR;AAgB9B,mKAAmK;AACnK,MAAM,UAAU,aAAa,CAI3B,IAAW;IACT,OAAO,uBAAuB,CAC1B,6BAA6B,CAAC,6BAA6B,CAAC,IAAI,CAAC,CAAC,CACrE,CAAC;AACN,CAAC","sourcesContent":["import { attr } from '@microsoft/fast-element';\nimport { TableColumn } from '../base';\nimport { mixinFractionalWidthColumnAPI } from '../mixins/fractional-width-column';\nimport { mixinGroupableColumnAPI } from '../mixins/groupable-column';\nimport { mixinColumnWithPlaceholderAPI } from '../mixins/placeholder';\nimport type { ColumnValidator } from '../base/models/column-validator';\n\n/**\n * The base class for table columns that display fields of any type as text.\n */\nexport abstract class TableColumnTextBase<\n    TColumnConfig,\n    TColumnValidator extends ColumnValidator<[]> = ColumnValidator<[]>\n> extends TableColumn<TColumnConfig, TColumnValidator> {\n    @attr({ attribute: 'field-name' })\n    public fieldName?: string;\n\n    protected fieldNameChanged(): void {\n        this.columnInternals.dataRecordFieldNames = [this.fieldName];\n        this.columnInternals.operandDataRecordFieldName = this.fieldName;\n    }\n}\n\ntype TableColumnBaseConstructor<\n    TColumnConfig,\n    TColumnValidator extends ColumnValidator<[]>\n> = abstract new (\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    ...args: any[]\n) => TableColumnTextBase<TColumnConfig, TColumnValidator>;\n\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type, @typescript-eslint/no-explicit-any\nexport function mixinTextBase<\n    TBase extends TableColumnBaseConstructor<TColumnConfig, TColumnValidator>,\n    TColumnConfig,\n    TColumnValidator extends ColumnValidator<[]> = ColumnValidator<[]>\n>(base: TBase) {\n    return mixinGroupableColumnAPI(\n        mixinFractionalWidthColumnAPI(mixinColumnWithPlaceholderAPI(base))\n    );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/text-base/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,EAAE,6BAA6B,EAAE,MAAM,mCAAmC,CAAC;AAClF,OAAO,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,EAAE,6BAA6B,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAEnE;;GAEG;AACH,MAAM,OAAgB,mBAGpB,SAAQ,WAA4C;IAIxC,gBAAgB;QACtB,IAAI,CAAC,eAAe,CAAC,oBAAoB,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC7D,IAAI,CAAC,eAAe,CAAC,0BAA0B,GAAG,IAAI,CAAC,SAAS,CAAC;IACrE,CAAC;CACJ;AANU;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;sDACR;AAgB9B,mKAAmK;AACnK,MAAM,UAAU,aAAa,CAI3B,IAAW;IACT,OAAO,uBAAuB,CAC1B,6BAA6B,CACzB,6BAA6B,CAAC,sBAAsB,CAAC,IAAI,CAAC,CAAC,CAC9D,CACJ,CAAC;AACN,CAAC","sourcesContent":["import { attr } from '@microsoft/fast-element';\nimport { TableColumn } from '../base';\nimport { mixinFractionalWidthColumnAPI } from '../mixins/fractional-width-column';\nimport { mixinGroupableColumnAPI } from '../mixins/groupable-column';\nimport { mixinColumnWithPlaceholderAPI } from '../mixins/placeholder';\nimport type { ColumnValidator } from '../base/models/column-validator';\nimport { mixinSortableColumnAPI } from '../mixins/sortable-column';\n\n/**\n * The base class for table columns that display fields of any type as text.\n */\nexport abstract class TableColumnTextBase<\n    TColumnConfig,\n    TColumnValidator extends ColumnValidator<[]> = ColumnValidator<[]>\n> extends TableColumn<TColumnConfig, TColumnValidator> {\n    @attr({ attribute: 'field-name' })\n    public fieldName?: string;\n\n    protected fieldNameChanged(): void {\n        this.columnInternals.dataRecordFieldNames = [this.fieldName];\n        this.columnInternals.operandDataRecordFieldName = this.fieldName;\n    }\n}\n\ntype TableColumnBaseConstructor<\n    TColumnConfig,\n    TColumnValidator extends ColumnValidator<[]>\n> = abstract new (\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    ...args: any[]\n) => TableColumnTextBase<TColumnConfig, TColumnValidator>;\n\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type, @typescript-eslint/no-explicit-any\nexport function mixinTextBase<\n    TBase extends TableColumnBaseConstructor<TColumnConfig, TColumnValidator>,\n    TColumnConfig,\n    TColumnValidator extends ColumnValidator<[]> = ColumnValidator<[]>\n>(base: TBase) {\n    return mixinGroupableColumnAPI(\n        mixinFractionalWidthColumnAPI(\n            mixinColumnWithPlaceholderAPI(mixinSortableColumnAPI(base))\n        )\n    );\n}\n"]}

package/dist/esm/tabs/styles.js

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

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

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

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

@@ -7,7 +7,6 @@ export const styles = css `
     :host {
         align-items: center;
         height: ${controlHeight};
-        box-sizing: border-box;
         font: ${bodyFont};
         color: ${bodyFontColor};
     }

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tabs-toolbar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACf,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;kBAIH,aAAa;;gBAEf,QAAQ;iBACP,aAAa;;;;;;4BAMF,WAAW;mBACpB,qBAAqB;kBACtB,YAAY,IAAI,aAAa;;CAE9C,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    bodyFont,\n    bodyFontColor,\n    borderRgbPartialColor,\n    borderWidth,\n    controlHeight,\n    mediumPadding,\n    smallPadding\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        align-items: center;\n        height: ${controlHeight};\n        box-sizing: border-box;\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n    }\n\n    .separator {\n        display: inline-block;\n        height: 24px;\n        border-left: calc(${borderWidth} * 2) solid\n            rgba(${borderRgbPartialColor}, 0.3);\n        margin: ${smallPadding} ${mediumPadding};\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tabs-toolbar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACf,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;kBAIH,aAAa;gBACf,QAAQ;iBACP,aAAa;;;;;;4BAMF,WAAW;mBACpB,qBAAqB;kBACtB,YAAY,IAAI,aAAa;;CAE9C,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    bodyFont,\n    bodyFontColor,\n    borderRgbPartialColor,\n    borderWidth,\n    controlHeight,\n    mediumPadding,\n    smallPadding\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        align-items: center;\n        height: ${controlHeight};\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n    }\n\n    .separator {\n        display: inline-block;\n        height: 24px;\n        border-left: calc(${borderWidth} * 2) solid\n            rgba(${borderRgbPartialColor}, 0.3);\n        margin: ${smallPadding} ${mediumPadding};\n    }\n`;\n"]}

package/dist/esm/text-area/styles.js

@@ -76,7 +76,6 @@ export const styles = css `
         font: inherit;
         flex-grow: 1;
         outline: none;
-        box-sizing: border-box;
         position: relative;
         color: inherit;
         border-radius: 0px;

package/dist/esm/text-area/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-area/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,UAAU,EACV,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,QAAQ,EACR,6BAA6B,EAC7B,QAAQ,EACR,SAAS,EACT,eAAe,EACf,aAAa,EAChB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,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,aAAa,CAAC;MACtB,WAAW;;;gBAGD,QAAQ;;UAEd,cAAc;iBACP,aAAa;;;mDAGqB,WAAW;;;;iBAI7C,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;;;4BAclB,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;;;kBAsBtB,WAAW;;2BAEF,QAAQ,MAAM,eAAe;;UAE9C;AACE,wFAAwF,CAAC,EAC7F;8BACsB,QAAQ;;;;;;;;;;;;+BAYP,gBAAgB;;;;;;;;6BAQlB,qBAAqB;;;;+BAInB,SAAS;;;;+BAIT,SAAS;;;;iBAIvB,qBAAqB;;;;iBAIrB,6BAA6B;;;;;;;;;;;;;;;;;;;;eAoB/B,aAAa;;;CAG3B,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,OAAO,EAC1B,GAAG,CAAA;;qCAE0B,qBAAqB;;;SAGjD,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;;;;;;yCASrB,qBAAqB;;;;uCAIvB,SAAS;;SAEvC,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    borderRgbPartialColor,\n    borderHoverColor,\n    borderWidth,\n    smallDelay,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    controlLabelFont,\n    controlLabelFontColor,\n    bodyFont,\n    controlLabelDisabledFontColor,\n    iconSize,\n    failColor,\n    standardPadding,\n    mediumPadding\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { TextAreaAppearance } 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-flex')}\n    ${errorStyles}\n\n    :host {\n        font: ${bodyFont};\n        outline: none;\n        ${userSelectNone}\n        color: ${bodyFontColor};\n        flex-direction: column;\n        vertical-align: top;\n        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n    }\n\n    :host([disabled]) {\n        color: ${bodyDisabledFontColor};\n    }\n\n    .label {\n        display: block;\n        color: ${controlLabelFontColor};\n        font: ${controlLabelFont};\n    }\n\n    :host([disabled]) .label {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    .container {\n        display: flex;\n        justify-content: center;\n        position: relative;\n        height: 100%;\n        width: 100%;\n    }\n\n    .container::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        .container::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host([error-visible]) .container::after {\n        border-bottom-color: ${failColor};\n    }\n\n    :host(:hover) .container::after {\n        width: 100%;\n    }\n\n    :host([disabled]:hover) .container::after,\n    :host([readonly]:hover) .container::after {\n        width: 0px;\n    }\n\n    .control {\n        -webkit-appearance: none;\n        font: inherit;\n        flex-grow: 1;\n        outline: none;\n        box-sizing: border-box;\n        position: relative;\n        color: inherit;\n        border-radius: 0px;\n        align-items: flex-end;\n        border: ${borderWidth} solid transparent;\n        min-width: 100px;\n        min-height: calc(${iconSize} + ${standardPadding});\n        padding: 8px;\n        ${\n            /* This padding ensures that showing/hiding the error icon doesn't affect text layout */ ''\n        }\n        padding-right: calc(${iconSize});\n        margin: 0px;\n        resize: none;\n    }\n\n    @media (prefers-reduced-motion) {\n        .control {\n            transition-duration: 0s;\n        }\n    }\n\n    .control:focus-within {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    .control[readonly],\n    .control[readonly]:hover,\n    .control[readonly]:hover:focus-within,\n    .control[disabled],\n    .control[disabled]:hover {\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([error-visible]) .control {\n        border-bottom-color: ${failColor};\n    }\n\n    :host([error-visible]) .control[readonly]:hover:focus-within {\n        border-bottom-color: ${failColor};\n    }\n\n    .control::placeholder {\n        color: ${controlLabelFontColor};\n    }\n\n    .control[disabled]::placeholder {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    :host([resize='both']) .control {\n        resize: both;\n    }\n    :host([resize='horizontal']) .control {\n        resize: horizontal;\n    }\n    :host([resize='vertical']) .control {\n        resize: vertical;\n    }\n\n    :host([error-visible]) .error-icon {\n        display: none;\n    }\n\n    :host([error-visible]) .error-icon.scrollbar-width-calculated {\n        display: inline-flex;\n        position: absolute;\n        top: ${mediumPadding};\n        right: var(--ni-private-scrollbar-width);\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        TextAreaAppearance.outline,\n        css`\n            .control {\n                border-color: rgba(${borderRgbPartialColor}, 0.3);\n                background-color: transparent;\n            }\n        `\n    ),\n    appearanceBehavior(\n        TextAreaAppearance.block,\n        css`\n            .control {\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            :host([readonly]) .control {\n                background-color: transparent;\n            }\n\n            :host([disabled]) .control {\n                border-color: transparent;\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            :host([error-visible][disabled]) .control {\n                border-bottom-color: ${failColor};\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-area/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,UAAU,EACV,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,QAAQ,EACR,6BAA6B,EAC7B,QAAQ,EACR,SAAS,EACT,eAAe,EACf,aAAa,EAChB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,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,aAAa,CAAC;MACtB,WAAW;;;gBAGD,QAAQ;;UAEd,cAAc;iBACP,aAAa;;;mDAGqB,WAAW;;;;iBAI7C,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;;;4BAclB,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;;kBAqBtB,WAAW;;2BAEF,QAAQ,MAAM,eAAe;;UAE9C;AACE,wFAAwF,CAAC,EAC7F;8BACsB,QAAQ;;;;;;;;;;;;+BAYP,gBAAgB;;;;;;;;6BAQlB,qBAAqB;;;;+BAInB,SAAS;;;;+BAIT,SAAS;;;;iBAIvB,qBAAqB;;;;iBAIrB,6BAA6B;;;;;;;;;;;;;;;;;;;;eAoB/B,aAAa;;;CAG3B,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,OAAO,EAC1B,GAAG,CAAA;;qCAE0B,qBAAqB;;;SAGjD,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;;;;;;yCASrB,qBAAqB;;;;uCAIvB,SAAS;;SAEvC,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    borderRgbPartialColor,\n    borderHoverColor,\n    borderWidth,\n    smallDelay,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    controlLabelFont,\n    controlLabelFontColor,\n    bodyFont,\n    controlLabelDisabledFontColor,\n    iconSize,\n    failColor,\n    standardPadding,\n    mediumPadding\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { TextAreaAppearance } 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-flex')}\n    ${errorStyles}\n\n    :host {\n        font: ${bodyFont};\n        outline: none;\n        ${userSelectNone}\n        color: ${bodyFontColor};\n        flex-direction: column;\n        vertical-align: top;\n        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n    }\n\n    :host([disabled]) {\n        color: ${bodyDisabledFontColor};\n    }\n\n    .label {\n        display: block;\n        color: ${controlLabelFontColor};\n        font: ${controlLabelFont};\n    }\n\n    :host([disabled]) .label {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    .container {\n        display: flex;\n        justify-content: center;\n        position: relative;\n        height: 100%;\n        width: 100%;\n    }\n\n    .container::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        .container::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host([error-visible]) .container::after {\n        border-bottom-color: ${failColor};\n    }\n\n    :host(:hover) .container::after {\n        width: 100%;\n    }\n\n    :host([disabled]:hover) .container::after,\n    :host([readonly]:hover) .container::after {\n        width: 0px;\n    }\n\n    .control {\n        -webkit-appearance: none;\n        font: inherit;\n        flex-grow: 1;\n        outline: none;\n        position: relative;\n        color: inherit;\n        border-radius: 0px;\n        align-items: flex-end;\n        border: ${borderWidth} solid transparent;\n        min-width: 100px;\n        min-height: calc(${iconSize} + ${standardPadding});\n        padding: 8px;\n        ${\n            /* This padding ensures that showing/hiding the error icon doesn't affect text layout */ ''\n        }\n        padding-right: calc(${iconSize});\n        margin: 0px;\n        resize: none;\n    }\n\n    @media (prefers-reduced-motion) {\n        .control {\n            transition-duration: 0s;\n        }\n    }\n\n    .control:focus-within {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    .control[readonly],\n    .control[readonly]:hover,\n    .control[readonly]:hover:focus-within,\n    .control[disabled],\n    .control[disabled]:hover {\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([error-visible]) .control {\n        border-bottom-color: ${failColor};\n    }\n\n    :host([error-visible]) .control[readonly]:hover:focus-within {\n        border-bottom-color: ${failColor};\n    }\n\n    .control::placeholder {\n        color: ${controlLabelFontColor};\n    }\n\n    .control[disabled]::placeholder {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    :host([resize='both']) .control {\n        resize: both;\n    }\n    :host([resize='horizontal']) .control {\n        resize: horizontal;\n    }\n    :host([resize='vertical']) .control {\n        resize: vertical;\n    }\n\n    :host([error-visible]) .error-icon {\n        display: none;\n    }\n\n    :host([error-visible]) .error-icon.scrollbar-width-calculated {\n        display: inline-flex;\n        position: absolute;\n        top: ${mediumPadding};\n        right: var(--ni-private-scrollbar-width);\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        TextAreaAppearance.outline,\n        css`\n            .control {\n                border-color: rgba(${borderRgbPartialColor}, 0.3);\n                background-color: transparent;\n            }\n        `\n    ),\n    appearanceBehavior(\n        TextAreaAppearance.block,\n        css`\n            .control {\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            :host([readonly]) .control {\n                background-color: transparent;\n            }\n\n            :host([disabled]) .control {\n                border-color: transparent;\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            :host([error-visible][disabled]) .control {\n                border-bottom-color: ${failColor};\n            }\n        `\n    )\n);\n"]}

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

@@ -37,7 +37,6 @@ export const styles = css `
     }
 
     .root {
-        box-sizing: border-box;
         position: relative;
         display: flex;
         flex-direction: row;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,6BAA6B,EAC7B,aAAa,EAChB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,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;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;iCAYb,qBAAqB;eACvC,aAAa;mBACT,WAAW;;;;6BAID,qBAAqB;;;;6BAIrB,qBAAqB;;;;+BAInB,SAAS;;;;+BAIT,gBAAgB;;;;;;;;;UASrC,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;;;UAQd,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA0Cd;AACE;;6CAE6C,CAAC,EAClD;;;;;iBAKS,qBAAqB;;;;iBAIrB,qBAAqB;;;;;;;;;;4BAUV,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;UAiB9B,aAAa,CAAC,iBAAiB;;CAExC,CAAC,aAAa,CACX,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,KAAK,EACzB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;gCAI9B,WAAW;iCACV,WAAW;;;;;uCAKL,WAAW;;;;;;;;;yCAST,qBAAqB;;;;;yCAKrB,qBAAqB;;SAErD,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,OAAO,EAC3B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;gCAEqB,WAAW;iCACV,WAAW;;;;;;SAMnC,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;;SAIF,CACJ,EACD,aAAa,CACT,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,EACzB,GAAG,CAAA;;;;SAIF,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\n\nimport {\n    borderRgbPartialColor,\n    borderHoverColor,\n    borderWidth,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    controlHeight,\n    failColor,\n    smallDelay,\n    controlLabelFont,\n    bodyFont,\n    controlLabelFontColor,\n    controlLabelDisabledFontColor,\n    mediumPadding\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { TextFieldAppearance } from './types';\nimport { Theme } from '../theme-provider/types';\nimport { themeBehavior } from '../utilities/style/theme';\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    }\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        border-radius: 0px;\n        font: inherit;\n        align-items: center;\n        justify-content: center;\n        border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n        gap: ${mediumPadding};\n        padding: ${borderWidth};\n    }\n\n    :host([readonly]) .root {\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\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:focus-within {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    :host([appearance='frameless'][full-bleed]) .root {\n        padding-left: 0px;\n        padding-right: 0px;\n    }\n\n    .root::before {\n        ${/* Empty string causes alignment issue */ ''}\n        content: ' ';\n        color: transparent;\n        width: 0px;\n        ${userSelectNone}\n    }\n\n    :host([appearance='frameless'][full-bleed]) .root::before {\n        display: none;\n    }\n\n    .root::after {\n        ${/* Empty string causes alignment issue */ ''}\n        content: ' ';\n        color: transparent;\n        width: 0px;\n        ${userSelectNone}\n    }\n\n    :host([appearance='frameless'][full-bleed]) .root::after {\n        display: none;\n    }\n\n    [part='start'] {\n        display: contents;\n    }\n\n    slot[name='start']::slotted(*) {\n        flex: none;\n        opacity: 0.6;\n    }\n\n    :host([disabled]) slot[name='start']::slotted(*) {\n        opacity: 0.3;\n    }\n\n    .control {\n        -webkit-appearance: none;\n        font: inherit;\n        background: transparent;\n        color: inherit;\n        padding: 0px;\n        height: var(--ni-private-height-within-border);\n        width: 100%;\n        margin-top: auto;\n        margin-bottom: auto;\n        border: none;\n        text-overflow: ellipsis;\n    }\n\n    .control:hover,\n    .control:focus,\n    .control:disabled,\n    .control:active {\n        outline: none;\n    }\n\n    .control:disabled {\n        ${\n            /* There's an issue with the input element where the ellipsized\n               overflowed text is blank when scrolled into view, so just clip instead.\n               See https://webcompat.com/issues/104481 */ ''\n        }\n        text-overflow: clip;\n    }\n\n    .control::placeholder {\n        color: ${controlLabelFontColor};\n    }\n\n    .control[disabled]::placeholder {\n        color: ${bodyDisabledFontColor};\n    }\n\n    [part='end'] {\n        display: contents;\n    }\n\n    [part='end']::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        [part='end']::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host([error-visible]) [part='end']::after {\n        border-bottom-color: ${failColor};\n    }\n\n    :host(:hover) [part='end']::after {\n        width: 100%;\n    }\n\n    :host([disabled]:hover) [part='end']::after,\n    :host([readonly]:hover) [part='end']::after {\n        width: 0px;\n    }\n\n    [part='actions'] {\n        display: contents;\n    }\n\n    slot[name='actions']::slotted(*) {\n        ${controlHeight.cssCustomProperty}: 24px;\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        TextFieldAppearance.underline,\n        css`\n            .root {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n        `\n    ),\n    appearanceBehavior(\n        TextFieldAppearance.block,\n        css`\n            .root {\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            .control {\n                padding-left: ${borderWidth};\n                padding-right: ${borderWidth};\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([readonly]) .root {\n                background-color: rgba(${borderRgbPartialColor}, 0.07);\n                border-color: transparent;\n            }\n\n            :host([disabled]) .root {\n                background-color: rgba(${borderRgbPartialColor}, 0.07);\n            }\n        `\n    ),\n    appearanceBehavior(\n        TextFieldAppearance.outline,\n        css`\n            .root {\n                border-width: ${borderWidth};\n                padding: 0;\n            }\n        `\n    ),\n    appearanceBehavior(\n        TextFieldAppearance.frameless,\n        css`\n            .control {\n                padding-left: ${borderWidth};\n                padding-right: ${borderWidth};\n            }\n\n            :host([readonly]) .root {\n                border-color: transparent;\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.light,\n        css`\n            .control::-ms-reveal {\n                filter: invert(0%);\n            }\n        `\n    ),\n    themeBehavior(\n        [Theme.dark, Theme.color],\n        css`\n            .control::-ms-reveal {\n                filter: invert(100%);\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,6BAA6B,EAC7B,aAAa,EAChB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,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;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;iCAWb,qBAAqB;eACvC,aAAa;mBACT,WAAW;;;;6BAID,qBAAqB;;;;6BAIrB,qBAAqB;;;;+BAInB,SAAS;;;;+BAIT,gBAAgB;;;;;;;;;UASrC,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;;;UAQd,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA0Cd;AACE;;6CAE6C,CAAC,EAClD;;;;;iBAKS,qBAAqB;;;;iBAIrB,qBAAqB;;;;;;;;;;4BAUV,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;UAiB9B,aAAa,CAAC,iBAAiB;;CAExC,CAAC,aAAa,CACX,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,KAAK,EACzB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;gCAI9B,WAAW;iCACV,WAAW;;;;;uCAKL,WAAW;;;;;;;;;yCAST,qBAAqB;;;;;yCAKrB,qBAAqB;;SAErD,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,OAAO,EAC3B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;gCAEqB,WAAW;iCACV,WAAW;;;;;;SAMnC,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;;SAIF,CACJ,EACD,aAAa,CACT,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,EACzB,GAAG,CAAA;;;;SAIF,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\n\nimport {\n    borderRgbPartialColor,\n    borderHoverColor,\n    borderWidth,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    controlHeight,\n    failColor,\n    smallDelay,\n    controlLabelFont,\n    bodyFont,\n    controlLabelFontColor,\n    controlLabelDisabledFontColor,\n    mediumPadding\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { TextFieldAppearance } from './types';\nimport { Theme } from '../theme-provider/types';\nimport { themeBehavior } from '../utilities/style/theme';\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    }\n\n    .label {\n        display: flex;\n        color: ${controlLabelFontColor};\n        font: ${controlLabelFont};\n    }\n\n    :host([disabled]) .label {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    .root {\n        position: relative;\n        display: flex;\n        flex-direction: row;\n        border-radius: 0px;\n        font: inherit;\n        align-items: center;\n        justify-content: center;\n        border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n        gap: ${mediumPadding};\n        padding: ${borderWidth};\n    }\n\n    :host([readonly]) .root {\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\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:focus-within {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    :host([appearance='frameless'][full-bleed]) .root {\n        padding-left: 0px;\n        padding-right: 0px;\n    }\n\n    .root::before {\n        ${/* Empty string causes alignment issue */ ''}\n        content: ' ';\n        color: transparent;\n        width: 0px;\n        ${userSelectNone}\n    }\n\n    :host([appearance='frameless'][full-bleed]) .root::before {\n        display: none;\n    }\n\n    .root::after {\n        ${/* Empty string causes alignment issue */ ''}\n        content: ' ';\n        color: transparent;\n        width: 0px;\n        ${userSelectNone}\n    }\n\n    :host([appearance='frameless'][full-bleed]) .root::after {\n        display: none;\n    }\n\n    [part='start'] {\n        display: contents;\n    }\n\n    slot[name='start']::slotted(*) {\n        flex: none;\n        opacity: 0.6;\n    }\n\n    :host([disabled]) slot[name='start']::slotted(*) {\n        opacity: 0.3;\n    }\n\n    .control {\n        -webkit-appearance: none;\n        font: inherit;\n        background: transparent;\n        color: inherit;\n        padding: 0px;\n        height: var(--ni-private-height-within-border);\n        width: 100%;\n        margin-top: auto;\n        margin-bottom: auto;\n        border: none;\n        text-overflow: ellipsis;\n    }\n\n    .control:hover,\n    .control:focus,\n    .control:disabled,\n    .control:active {\n        outline: none;\n    }\n\n    .control:disabled {\n        ${\n            /* There's an issue with the input element where the ellipsized\n               overflowed text is blank when scrolled into view, so just clip instead.\n               See https://webcompat.com/issues/104481 */ ''\n        }\n        text-overflow: clip;\n    }\n\n    .control::placeholder {\n        color: ${controlLabelFontColor};\n    }\n\n    .control[disabled]::placeholder {\n        color: ${bodyDisabledFontColor};\n    }\n\n    [part='end'] {\n        display: contents;\n    }\n\n    [part='end']::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        [part='end']::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host([error-visible]) [part='end']::after {\n        border-bottom-color: ${failColor};\n    }\n\n    :host(:hover) [part='end']::after {\n        width: 100%;\n    }\n\n    :host([disabled]:hover) [part='end']::after,\n    :host([readonly]:hover) [part='end']::after {\n        width: 0px;\n    }\n\n    [part='actions'] {\n        display: contents;\n    }\n\n    slot[name='actions']::slotted(*) {\n        ${controlHeight.cssCustomProperty}: 24px;\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        TextFieldAppearance.underline,\n        css`\n            .root {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n        `\n    ),\n    appearanceBehavior(\n        TextFieldAppearance.block,\n        css`\n            .root {\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            .control {\n                padding-left: ${borderWidth};\n                padding-right: ${borderWidth};\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([readonly]) .root {\n                background-color: rgba(${borderRgbPartialColor}, 0.07);\n                border-color: transparent;\n            }\n\n            :host([disabled]) .root {\n                background-color: rgba(${borderRgbPartialColor}, 0.07);\n            }\n        `\n    ),\n    appearanceBehavior(\n        TextFieldAppearance.outline,\n        css`\n            .root {\n                border-width: ${borderWidth};\n                padding: 0;\n            }\n        `\n    ),\n    appearanceBehavior(\n        TextFieldAppearance.frameless,\n        css`\n            .control {\n                padding-left: ${borderWidth};\n                padding-right: ${borderWidth};\n            }\n\n            :host([readonly]) .root {\n                border-color: transparent;\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.light,\n        css`\n            .control::-ms-reveal {\n                filter: invert(0%);\n            }\n        `\n    ),\n    themeBehavior(\n        [Theme.dark, Theme.color],\n        css`\n            .control::-ms-reveal {\n                filter: invert(100%);\n            }\n        `\n    )\n);\n"]}

package/dist/esm/tooltip/styles.js

@@ -17,7 +17,6 @@ export const styles = css `
     }
 
     .tooltip {
-        box-sizing: border-box;
         flex-shrink: 0;
         max-width: 440px;
         box-shadow: ${elevation2BoxShadow};

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tooltip/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,mBAAmB,EACnB,OAAO,EACP,OAAO,EACP,OAAO,EACP,WAAW,EACX,oBAAoB,EACpB,qBAAqB,EACrB,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,kBAAkB,EAClB,uBAAuB,EACvB,WAAW,EACX,aAAa,EACb,YAAY,EACZ,mBAAmB,EACtB,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;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;gBAGZ,kBAAkB;iBACjB,uBAAuB;;6CAEK,iBAAiB,CAAC,OAAO,EAAE,GAAG,CAAC;iDAC3B,OAAO;;;;;;;sBAOlC,mBAAmB;;kBAEvB,WAAW;;;wBAGL,aAAa;yBACZ,aAAa;uBACf,YAAY;;;;;;;;;;;;;;;;;;;CAmBlC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;qDAE0C,mBAAmB;yDACf,KAAK;;;;qDAIT,qBAAqB;yDACjB,KAAK;;SAErD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;qDAE0C,iBAAiB,CAClD,OAAO,EACP,GAAG,CACN;yDACwC,OAAO;;;;qDAIX,oBAAoB;;;;qDAIpB,mBAAmB;;SAE/D,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;oCAEyB,WAAW;;;;qDAIM,iBAAiB,CAClD,KAAK,EACL,GAAG,CACN;yDACwC,iBAAiB,CACtD,KAAK,EACL,IAAI,CACP;;;;qDAIoC,KAAK;;;;qDAIL,KAAK;;;;;;SAMjD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport {\n    BannerFail100DarkUi,\n    Black15,\n    Black85,\n    Black91,\n    ForestGreen,\n    Information100DarkUi,\n    Information100LightUi,\n    White\n} from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../utilities/style/display';\nimport {\n    tooltipCaptionFont,\n    tooltipCaptionFontColor,\n    borderWidth,\n    mediumPadding,\n    smallPadding,\n    elevation2BoxShadow\n} from '../theme-provider/design-tokens';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\nimport { themeBehavior } from '../utilities/style/theme';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        font: ${tooltipCaptionFont};\n        color: ${tooltipCaptionFontColor};\n        text-align: left;\n        --ni-private-tooltip-border-color: ${hexToRgbaCssColor(Black91, 0.3)};\n        --ni-private-tooltip-background-color: ${Black15};\n    }\n\n    .tooltip {\n        box-sizing: border-box;\n        flex-shrink: 0;\n        max-width: 440px;\n        box-shadow: ${elevation2BoxShadow};\n        display: inline-flex;\n        border: ${borderWidth} solid var(--ni-private-tooltip-border-color);\n        background-color: var(--ni-private-tooltip-background-color);\n        padding-bottom: 6px;\n        padding-left: ${mediumPadding};\n        padding-right: ${mediumPadding};\n        padding-top: ${smallPadding};\n    }\n\n    .status-icon {\n        display: none;\n        width: 14px;\n        height: 14px;\n        padding-right: 8px;\n    }\n\n    :host([severity='error'][icon-visible]) [severity='error'] {\n        display: flex;\n        flex: 0 0 auto;\n    }\n\n    :host([severity='information'][icon-visible]) [severity='information'] {\n        display: flex;\n        flex: 0 0 auto;\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.light,\n        css`\n            :host([severity='error']) {\n                --ni-private-tooltip-border-color: ${BannerFail100DarkUi};\n                --ni-private-tooltip-background-color: ${White};\n            }\n\n            :host([severity='information']) {\n                --ni-private-tooltip-border-color: ${Information100LightUi};\n                --ni-private-tooltip-background-color: ${White};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.dark,\n        css`\n            :host {\n                --ni-private-tooltip-border-color: ${hexToRgbaCssColor(\n                    Black15,\n                    0.3\n                )};\n                --ni-private-tooltip-background-color: ${Black85};\n            }\n\n            :host([severity='information']) {\n                --ni-private-tooltip-border-color: ${Information100DarkUi};\n            }\n\n            :host([severity='error']) {\n                --ni-private-tooltip-border-color: ${BannerFail100DarkUi};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            .anchored-region {\n                background-color: ${ForestGreen};\n            }\n\n            :host {\n                --ni-private-tooltip-border-color: ${hexToRgbaCssColor(\n                    White,\n                    0.3\n                )};\n                --ni-private-tooltip-background-color: ${hexToRgbaCssColor(\n                    White,\n                    0.15\n                )};\n            }\n\n            :host([severity='error']) {\n                --ni-private-tooltip-border-color: ${White};\n            }\n\n            :host([severity='information']) {\n                --ni-private-tooltip-border-color: ${White};\n            }\n\n            .status-icon {\n                opacity: 0.6;\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tooltip/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,mBAAmB,EACnB,OAAO,EACP,OAAO,EACP,OAAO,EACP,WAAW,EACX,oBAAoB,EACpB,qBAAqB,EACrB,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,kBAAkB,EAClB,uBAAuB,EACvB,WAAW,EACX,aAAa,EACb,YAAY,EACZ,mBAAmB,EACtB,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;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;gBAGZ,kBAAkB;iBACjB,uBAAuB;;6CAEK,iBAAiB,CAAC,OAAO,EAAE,GAAG,CAAC;iDAC3B,OAAO;;;;;;sBAMlC,mBAAmB;;kBAEvB,WAAW;;;wBAGL,aAAa;yBACZ,aAAa;uBACf,YAAY;;;;;;;;;;;;;;;;;;;CAmBlC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;qDAE0C,mBAAmB;yDACf,KAAK;;;;qDAIT,qBAAqB;yDACjB,KAAK;;SAErD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;qDAE0C,iBAAiB,CAClD,OAAO,EACP,GAAG,CACN;yDACwC,OAAO;;;;qDAIX,oBAAoB;;;;qDAIpB,mBAAmB;;SAE/D,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;oCAEyB,WAAW;;;;qDAIM,iBAAiB,CAClD,KAAK,EACL,GAAG,CACN;yDACwC,iBAAiB,CACtD,KAAK,EACL,IAAI,CACP;;;;qDAIoC,KAAK;;;;qDAIL,KAAK;;;;;;SAMjD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport {\n    BannerFail100DarkUi,\n    Black15,\n    Black85,\n    Black91,\n    ForestGreen,\n    Information100DarkUi,\n    Information100LightUi,\n    White\n} from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../utilities/style/display';\nimport {\n    tooltipCaptionFont,\n    tooltipCaptionFontColor,\n    borderWidth,\n    mediumPadding,\n    smallPadding,\n    elevation2BoxShadow\n} from '../theme-provider/design-tokens';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\nimport { themeBehavior } from '../utilities/style/theme';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        font: ${tooltipCaptionFont};\n        color: ${tooltipCaptionFontColor};\n        text-align: left;\n        --ni-private-tooltip-border-color: ${hexToRgbaCssColor(Black91, 0.3)};\n        --ni-private-tooltip-background-color: ${Black15};\n    }\n\n    .tooltip {\n        flex-shrink: 0;\n        max-width: 440px;\n        box-shadow: ${elevation2BoxShadow};\n        display: inline-flex;\n        border: ${borderWidth} solid var(--ni-private-tooltip-border-color);\n        background-color: var(--ni-private-tooltip-background-color);\n        padding-bottom: 6px;\n        padding-left: ${mediumPadding};\n        padding-right: ${mediumPadding};\n        padding-top: ${smallPadding};\n    }\n\n    .status-icon {\n        display: none;\n        width: 14px;\n        height: 14px;\n        padding-right: 8px;\n    }\n\n    :host([severity='error'][icon-visible]) [severity='error'] {\n        display: flex;\n        flex: 0 0 auto;\n    }\n\n    :host([severity='information'][icon-visible]) [severity='information'] {\n        display: flex;\n        flex: 0 0 auto;\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.light,\n        css`\n            :host([severity='error']) {\n                --ni-private-tooltip-border-color: ${BannerFail100DarkUi};\n                --ni-private-tooltip-background-color: ${White};\n            }\n\n            :host([severity='information']) {\n                --ni-private-tooltip-border-color: ${Information100LightUi};\n                --ni-private-tooltip-background-color: ${White};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.dark,\n        css`\n            :host {\n                --ni-private-tooltip-border-color: ${hexToRgbaCssColor(\n                    Black15,\n                    0.3\n                )};\n                --ni-private-tooltip-background-color: ${Black85};\n            }\n\n            :host([severity='information']) {\n                --ni-private-tooltip-border-color: ${Information100DarkUi};\n            }\n\n            :host([severity='error']) {\n                --ni-private-tooltip-border-color: ${BannerFail100DarkUi};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            .anchored-region {\n                background-color: ${ForestGreen};\n            }\n\n            :host {\n                --ni-private-tooltip-border-color: ${hexToRgbaCssColor(\n                    White,\n                    0.3\n                )};\n                --ni-private-tooltip-background-color: ${hexToRgbaCssColor(\n                    White,\n                    0.15\n                )};\n            }\n\n            :host([severity='error']) {\n                --ni-private-tooltip-border-color: ${White};\n            }\n\n            :host([severity='information']) {\n                --ni-private-tooltip-border-color: ${White};\n            }\n\n            .status-icon {\n                opacity: 0.6;\n            }\n        `\n    )\n);\n"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tree-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;AACxD,OAAO,EACH,aAAa,EACb,cAAc,EACd,YAAY,EACZ,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,EACd,sBAAsB,EACtB,WAAW,EACX,QAAQ,EACR,WAAW,EACX,qBAAqB,EACrB,SAAS,EACZ,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,6BAA6B,EAAE,MAAM,8BAA8B,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;UAGZ;AACE,yEAAyE,CAAC,EAC9E;uBACe,cAAc;uBACd,cAAc;;;;iBAIpB,aAAa;;;;;;iBAMb,qBAAqB;;;;MAIhC,CAAA,mCAAoC,EAAE;aAC/B,sBAAsB;sBACb,gBAAgB;;;;;;sBAMhB,WAAW;uBACV,QAAQ;;;;;;;uBAOR,QAAQ;;;;sBAIT,cAAc;;;aAGvB,sBAAsB;sBACb,sBAAsB;;;YAGhC,YAAY;kCACU,WAAW,IAAI,gBAAgB;mBAC9C,WAAW,UAAU,gBAAgB;;;;;sBAKlC,iBAAiB;;;;sBAIjB,sBAAsB;;;;;;;;;;;;;;;;;;;;;qBAqBvB,YAAY;UACvB,cAAc;;+BAEO,QAAQ;;;YAG3B,YAAY;;;;;;;;iBAQP,QAAQ;kBACP,QAAQ;;;;;;;;;iBAST,QAAQ;kBACP,QAAQ;gCACM,WAAW;;;;;MAKrC;AACE,wEAAwE,CAAC,EAC7E;;iBAEa,QAAQ;;;MAGnB;AACE,uEAAuE,CAAC,EAC5E;;;+BAG2B,QAAQ;6BACV,QAAQ;;;;UAI3B,SAAS,CAAC,iBAAiB;iBACpB,QAAQ;kBACP,QAAQ;;;;;;cAMZ,QAAQ;;;;;;;;;;UAUZ;AACE;;;;GAIG,CAAC,EACR;iCACyB,QAAQ;;;;;;CAMxC,CAAC,aAAa,CACX,IAAI,6BAA6B;AAC7B,aAAa;AACb,GAAG,CAAA;;;;2BAIgB,QAAQ;;;;;;;;;;;SAW1B;AACD,aAAa;AACb,GAAG,CAAA;;;;2BAIgB,QAAQ;;;;;;;;;;;SAW1B,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport { focusVisible } from '../utilities/style/focus';\nimport {\n    bodyFontColor,\n    bodyFontFamily,\n    bodyFontSize,\n    bodyFontWeight,\n    borderHoverColor,\n    fillSelectedColor,\n    fillHoverColor,\n    fillHoverSelectedColor,\n    borderWidth,\n    iconSize,\n    mediumDelay,\n    bodyDisabledFontColor,\n    iconColor\n} from '../theme-provider/design-tokens';\nimport { groupSelectedAttribute } from '../tree-view/types';\nimport { DirectionalStyleSheetBehavior } from '../utilities/style/direction';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n    ${display('block')}\n\n    :host {\n        ${\n            /* don't set font-size here or else it overrides what we set on .items */ ''\n        }\n        font-family: ${bodyFontFamily};\n        font-weight: ${bodyFontWeight};\n        contain: content;\n        position: relative;\n        outline: none;\n        color: ${bodyFontColor};\n        cursor: pointer;\n        --ni-private-tree-item-nested-width: 0;\n    }\n\n    :host([disabled]) {\n        color: ${bodyDisabledFontColor};\n        cursor: default;\n    }\n\n    ${/* this controls the side border */ ''}\n    :host([${groupSelectedAttribute}])::after {\n        background: ${borderHoverColor};\n        border-radius: 0px;\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0px;\n        width: calc(${borderWidth} * 2);\n        height: calc(${iconSize} * 2);\n    }\n\n    .positioning-region {\n        display: flex;\n        position: relative;\n        box-sizing: border-box;\n        height: calc(${iconSize} * 2);\n    }\n\n    .positioning-region:hover {\n        background: ${fillHoverColor};\n    }\n\n    :host([${groupSelectedAttribute}]) .positioning-region:hover {\n        background: ${fillHoverSelectedColor};\n    }\n\n    :host(${focusVisible}) .positioning-region {\n        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n        outline: ${borderWidth} solid ${borderHoverColor};\n        outline-offset: -2px;\n    }\n\n    :host([selected]) .positioning-region {\n        background: ${fillSelectedColor};\n    }\n\n    :host([selected]) .positioning-region:hover {\n        background: ${fillHoverSelectedColor};\n    }\n\n    :host([disabled]) .positioning-region:hover {\n        background-color: transparent;\n    }\n\n    .positioning-region::before {\n        content: '';\n        display: block;\n        width: var(--ni-private-tree-item-nested-width);\n        flex-shrink: 0;\n    }\n\n    .content-region {\n        display: inline-flex;\n        align-items: center;\n        white-space: nowrap;\n        width: 100%;\n        padding-left: 10px;\n        font: inherit;\n        font-size: ${bodyFontSize};\n        ${userSelectNone}\n        position: relative;\n        margin-inline-start: ${iconSize};\n    }\n\n    :host(${focusVisible}) .content-region {\n        outline: none;\n    }\n\n    .expand-collapse-button {\n        background: none;\n        border: none;\n        outline: none;\n        width: ${iconSize};\n        height: ${iconSize};\n        padding: 0px;\n        justify-content: center;\n        align-items: center;\n        margin-left: 10px;\n        position: absolute;\n    }\n\n    .expand-collapse-button svg {\n        width: ${iconSize};\n        height: ${iconSize};\n        transition: transform ${mediumDelay} ease-in;\n        pointer-events: none;\n        fill: currentcolor;\n    }\n\n    ${\n        /* this rule keeps children without an icon text aligned with parents */ ''\n    }\n    [part=\"start\"] {\n        width: ${iconSize};\n    }\n\n    ${\n        /* the start class is applied when the corresponding slots is filled */ ''\n    }\n    .start {\n        display: flex;\n        margin-inline-start: ${iconSize};\n        margin-inline-end: ${iconSize};\n    }\n\n    slot[name='start']::slotted(*) {\n        ${iconColor.cssCustomProperty}: currentcolor;\n        width: ${iconSize};\n        height: ${iconSize};\n    }\n\n    ::slotted([role='treeitem']) {\n        --ni-private-tree-item-nested-width: 1em;\n        --ni-private-expand-collapse-button-nested-width: calc(\n            ${iconSize} * -1\n        );\n    }\n\n    [part='end'] {\n        display: none;\n    }\n\n    .items {\n        display: none;\n        ${\n            /*\n             * this controls the nested indentation (by affecting .positioning-region::before)\n             * it must minimally contain arithmetic with an em and a px value\n             * make it larger or shorter by changing the px value\n             */ ''\n        }\n        font-size: calc(1em + (${iconSize} * 2));\n    }\n\n    :host([expanded]) .items {\n        display: block;\n    }\n`.withBehaviors(\n    new DirectionalStyleSheetBehavior(\n        // ltr styles\n        css`\n            .expand-collapse-button {\n                left: var(\n                    --ni-private-expand-collapse-button-nested-width,\n                    calc(${iconSize} * -1)\n                );\n            }\n\n            .expand-collapse-button svg {\n                transform: rotate(90deg);\n            }\n\n            :host([expanded]) .expand-collapse-button svg {\n                transform: rotate(180deg);\n            }\n        `,\n        // rtl styles\n        css`\n            .expand-collapse-button {\n                right: var(\n                    --ni-private-expand-collapse-button-nested-width,\n                    calc(${iconSize} * -1)\n                );\n            }\n\n            .expand-collapse-button svg {\n                transform: rotate(180deg);\n            }\n\n            :host([expanded]) .expand-collapse-button svg {\n                transform: rotate(135deg);\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tree-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;AACxD,OAAO,EACH,aAAa,EACb,cAAc,EACd,YAAY,EACZ,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,EACd,sBAAsB,EACtB,WAAW,EACX,QAAQ,EACR,WAAW,EACX,qBAAqB,EACrB,SAAS,EACZ,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,6BAA6B,EAAE,MAAM,8BAA8B,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;UAGZ;AACE,yEAAyE,CAAC,EAC9E;uBACe,cAAc;uBACd,cAAc;;;;iBAIpB,aAAa;;;;;;iBAMb,qBAAqB;;;;MAIhC,CAAA,mCAAoC,EAAE;aAC/B,sBAAsB;sBACb,gBAAgB;;;;;;sBAMhB,WAAW;uBACV,QAAQ;;;;;;uBAMR,QAAQ;;;;sBAIT,cAAc;;;aAGvB,sBAAsB;sBACb,sBAAsB;;;YAGhC,YAAY;kCACU,WAAW,IAAI,gBAAgB;mBAC9C,WAAW,UAAU,gBAAgB;;;;;sBAKlC,iBAAiB;;;;sBAIjB,sBAAsB;;;;;;;;;;;;;;;;;;;;;qBAqBvB,YAAY;UACvB,cAAc;;+BAEO,QAAQ;;;YAG3B,YAAY;;;;;;;;iBAQP,QAAQ;kBACP,QAAQ;;;;;;;;;iBAST,QAAQ;kBACP,QAAQ;gCACM,WAAW;;;;;MAKrC;AACE,wEAAwE,CAAC,EAC7E;;iBAEa,QAAQ;;;MAGnB;AACE,uEAAuE,CAAC,EAC5E;;;+BAG2B,QAAQ;6BACV,QAAQ;;;;UAI3B,SAAS,CAAC,iBAAiB;iBACpB,QAAQ;kBACP,QAAQ;;;;;;cAMZ,QAAQ;;;;;;;;;;UAUZ;AACE;;;;GAIG,CAAC,EACR;iCACyB,QAAQ;;;;;;CAMxC,CAAC,aAAa,CACX,IAAI,6BAA6B;AAC7B,aAAa;AACb,GAAG,CAAA;;;;2BAIgB,QAAQ;;;;;;;;;;;SAW1B;AACD,aAAa;AACb,GAAG,CAAA;;;;2BAIgB,QAAQ;;;;;;;;;;;SAW1B,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport { focusVisible } from '../utilities/style/focus';\nimport {\n    bodyFontColor,\n    bodyFontFamily,\n    bodyFontSize,\n    bodyFontWeight,\n    borderHoverColor,\n    fillSelectedColor,\n    fillHoverColor,\n    fillHoverSelectedColor,\n    borderWidth,\n    iconSize,\n    mediumDelay,\n    bodyDisabledFontColor,\n    iconColor\n} from '../theme-provider/design-tokens';\nimport { groupSelectedAttribute } from '../tree-view/types';\nimport { DirectionalStyleSheetBehavior } from '../utilities/style/direction';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n    ${display('block')}\n\n    :host {\n        ${\n            /* don't set font-size here or else it overrides what we set on .items */ ''\n        }\n        font-family: ${bodyFontFamily};\n        font-weight: ${bodyFontWeight};\n        contain: content;\n        position: relative;\n        outline: none;\n        color: ${bodyFontColor};\n        cursor: pointer;\n        --ni-private-tree-item-nested-width: 0;\n    }\n\n    :host([disabled]) {\n        color: ${bodyDisabledFontColor};\n        cursor: default;\n    }\n\n    ${/* this controls the side border */ ''}\n    :host([${groupSelectedAttribute}])::after {\n        background: ${borderHoverColor};\n        border-radius: 0px;\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0px;\n        width: calc(${borderWidth} * 2);\n        height: calc(${iconSize} * 2);\n    }\n\n    .positioning-region {\n        display: flex;\n        position: relative;\n        height: calc(${iconSize} * 2);\n    }\n\n    .positioning-region:hover {\n        background: ${fillHoverColor};\n    }\n\n    :host([${groupSelectedAttribute}]) .positioning-region:hover {\n        background: ${fillHoverSelectedColor};\n    }\n\n    :host(${focusVisible}) .positioning-region {\n        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n        outline: ${borderWidth} solid ${borderHoverColor};\n        outline-offset: -2px;\n    }\n\n    :host([selected]) .positioning-region {\n        background: ${fillSelectedColor};\n    }\n\n    :host([selected]) .positioning-region:hover {\n        background: ${fillHoverSelectedColor};\n    }\n\n    :host([disabled]) .positioning-region:hover {\n        background-color: transparent;\n    }\n\n    .positioning-region::before {\n        content: '';\n        display: block;\n        width: var(--ni-private-tree-item-nested-width);\n        flex-shrink: 0;\n    }\n\n    .content-region {\n        display: inline-flex;\n        align-items: center;\n        white-space: nowrap;\n        width: 100%;\n        padding-left: 10px;\n        font: inherit;\n        font-size: ${bodyFontSize};\n        ${userSelectNone}\n        position: relative;\n        margin-inline-start: ${iconSize};\n    }\n\n    :host(${focusVisible}) .content-region {\n        outline: none;\n    }\n\n    .expand-collapse-button {\n        background: none;\n        border: none;\n        outline: none;\n        width: ${iconSize};\n        height: ${iconSize};\n        padding: 0px;\n        justify-content: center;\n        align-items: center;\n        margin-left: 10px;\n        position: absolute;\n    }\n\n    .expand-collapse-button svg {\n        width: ${iconSize};\n        height: ${iconSize};\n        transition: transform ${mediumDelay} ease-in;\n        pointer-events: none;\n        fill: currentcolor;\n    }\n\n    ${\n        /* this rule keeps children without an icon text aligned with parents */ ''\n    }\n    [part=\"start\"] {\n        width: ${iconSize};\n    }\n\n    ${\n        /* the start class is applied when the corresponding slots is filled */ ''\n    }\n    .start {\n        display: flex;\n        margin-inline-start: ${iconSize};\n        margin-inline-end: ${iconSize};\n    }\n\n    slot[name='start']::slotted(*) {\n        ${iconColor.cssCustomProperty}: currentcolor;\n        width: ${iconSize};\n        height: ${iconSize};\n    }\n\n    ::slotted([role='treeitem']) {\n        --ni-private-tree-item-nested-width: 1em;\n        --ni-private-expand-collapse-button-nested-width: calc(\n            ${iconSize} * -1\n        );\n    }\n\n    [part='end'] {\n        display: none;\n    }\n\n    .items {\n        display: none;\n        ${\n            /*\n             * this controls the nested indentation (by affecting .positioning-region::before)\n             * it must minimally contain arithmetic with an em and a px value\n             * make it larger or shorter by changing the px value\n             */ ''\n        }\n        font-size: calc(1em + (${iconSize} * 2));\n    }\n\n    :host([expanded]) .items {\n        display: block;\n    }\n`.withBehaviors(\n    new DirectionalStyleSheetBehavior(\n        // ltr styles\n        css`\n            .expand-collapse-button {\n                left: var(\n                    --ni-private-expand-collapse-button-nested-width,\n                    calc(${iconSize} * -1)\n                );\n            }\n\n            .expand-collapse-button svg {\n                transform: rotate(90deg);\n            }\n\n            :host([expanded]) .expand-collapse-button svg {\n                transform: rotate(180deg);\n            }\n        `,\n        // rtl styles\n        css`\n            .expand-collapse-button {\n                right: var(\n                    --ni-private-expand-collapse-button-nested-width,\n                    calc(${iconSize} * -1)\n                );\n            }\n\n            .expand-collapse-button svg {\n                transform: rotate(180deg);\n            }\n\n            :host([expanded]) .expand-collapse-button svg {\n                transform: rotate(135deg);\n            }\n        `\n    )\n);\n"]}

package/dist/esm/utilities/style/display.d.ts

@@ -1,6 +1,8 @@
 import { display as foundationDisplay } from '@microsoft/fast-foundation';
 /**
- * This utility will generate the appropriate display style, as well as a style rule
- * to hide the host element when its `hidden` attribute is set.
+ * Each element should use the display utility which will create styles to:
+ * - Set the `:host` display property
+ * - Respond to the `hidden` attribute set on `:host`
+ * - Configure `box-sizing` for `:host`, all elements in shadow root, and `::before` / `::after` pseudoelements
  */
 export declare const display: typeof foundationDisplay;

package/dist/esm/utilities/style/display.js

@@ -2,8 +2,10 @@ import {
 // eslint-disable-next-line no-restricted-imports
 display as foundationDisplay } from '@microsoft/fast-foundation';
 /**
- * This utility will generate the appropriate display style, as well as a style rule
- * to hide the host element when its `hidden` attribute is set.
+ * Each element should use the display utility which will create styles to:
+ * - Set the `:host` display property
+ * - Respond to the `hidden` attribute set on `:host`
+ * - Configure `box-sizing` for `:host`, all elements in shadow root, and `::before` / `::after` pseudoelements
  */
-export const display = (displayValue) => `${foundationDisplay(displayValue)}`;
+export const display = (displayValue) => `${foundationDisplay(displayValue)}:host{box-sizing:border-box;}*{box-sizing:border-box;}:host::before,:host::after,::before,::after{box-sizing:border-box;}`;
 //# sourceMappingURL=display.js.map

package/dist/esm/utilities/style/display.js.map

@@ -1 +1 @@
-{"version":3,"file":"display.js","sourceRoot":"","sources":["../../../../src/utilities/style/display.ts"],"names":[],"mappings":"AAAA,OAAO;AAEH,iDAAiD;AACjD,OAAO,IAAI,iBAAiB,EAC/B,MAAM,4BAA4B,CAAC;AAEpC;;;GAGG;AACH,MAAM,CAAC,MAAM,OAAO,GAA6B,CAC7C,YAAqC,EACvC,EAAE,CAAC,GAAG,iBAAiB,CAAC,YAAY,CAAC,EAAE,CAAC","sourcesContent":["import {\n    type CSSDisplayPropertyValue,\n    // eslint-disable-next-line no-restricted-imports\n    display as foundationDisplay\n} from '@microsoft/fast-foundation';\n\n/**\n * This utility will generate the appropriate display style, as well as a style rule\n * to hide the host element when its `hidden` attribute is set.\n */\nexport const display: typeof foundationDisplay = (\n    displayValue: CSSDisplayPropertyValue\n) => `${foundationDisplay(displayValue)}`;\n"]}
+{"version":3,"file":"display.js","sourceRoot":"","sources":["../../../../src/utilities/style/display.ts"],"names":[],"mappings":"AAAA,OAAO;AAEH,iDAAiD;AACjD,OAAO,IAAI,iBAAiB,EAC/B,MAAM,4BAA4B,CAAC;AAEpC;;;;;GAKG;AACH,MAAM,CAAC,MAAM,OAAO,GAA6B,CAC7C,YAAqC,EACvC,EAAE,CAAC,GAAG,iBAAiB,CAAC,YAAY,CAAC,2HAA2H,CAAC","sourcesContent":["import {\n    type CSSDisplayPropertyValue,\n    // eslint-disable-next-line no-restricted-imports\n    display as foundationDisplay\n} from '@microsoft/fast-foundation';\n\n/**\n * Each element should use the display utility which will create styles to:\n * - Set the `:host` display property\n * - Respond to the `hidden` attribute set on `:host`\n * - Configure `box-sizing` for `:host`, all elements in shadow root, and `::before` / `::after` pseudoelements\n */\nexport const display: typeof foundationDisplay = (\n    displayValue: CSSDisplayPropertyValue\n) => `${foundationDisplay(displayValue)}:host{box-sizing:border-box;}*{box-sizing:border-box;}:host::before,:host::after,::before,::after{box-sizing:border-box;}`;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "29.3.4",
+  "version": "29.3.6",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run generate-workers && npm run build-components && npm run bundle-components && npm run generate-scss",