@ni/nimble-components 35.4.0 → 35.5.1

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/label-provider/core/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAwB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAClE,OAAO,EACH,iBAAiB,EACjB,qBAAqB,EACrB,qBAAqB,EACrB,mBAAmB,EACnB,qBAAqB,EACrB,yBAAyB,EACzB,iBAAiB,EACjB,oBAAoB,EACpB,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,eAAe,EAClB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAQxC,MAAM,eAAe,GAAG;IACpB,YAAY,EAAE,iBAAiB;IAC/B,gBAAgB,EAAE,qBAAqB;IACvC,gBAAgB,EAAE,qBAAqB;IACvC,cAAc,EAAE,mBAAmB;IACnC,gBAAgB,EAAE,qBAAqB;IACvC,oBAAoB,EAAE,yBAAyB;IAC/C,YAAY,EAAE,iBAAiB;IAC/B,eAAe,EAAE,oBAAoB;IACrC,OAAO,EAAE,YAAY;IACrB,cAAc,EAAE,mBAAmB;IACnC,aAAa,EAAE,kBAAkB;IACjC,UAAU,EAAE,eAAe;CACrB,CAAC;AAEX;;GAEG;AACH,MAAM,OAAO,iBACT,SAAQ,iBAAyC;IADrD;;QAuCgC,oBAAe,GAAG,eAAe,CAAC;IAClE,CAAC;CAAA;AApCU;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;uDACG;AAGjC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;2DACG;AAGrC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;2DACG;AAGrC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;yDACE;AAGnC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;2DACE;AAGrC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,wBAAwB,EAAE,CAAC;+DACE;AAGzC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;uDACG;AAGjC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;0DACE;AAGpC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;kDACI;AAG5B;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;yDACG;AAGnC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;wDACG;AAGlC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;qDACG;AAK1C,MAAM,uBAAuB,GAAG,iBAAiB,CAAC,OAAO,CAAC;IACtD,QAAQ,EAAE,qBAAqB;IAC/B,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,uBAAuB,EAAE,CAAC,CAAC;AACzC,MAAM,CAAC,MAAM,oBAAoB,GAAG,4BAA4B,CAAC","sourcesContent":["import { attr } from '@ni/fast-element';\nimport { DesignSystem } from '@ni/fast-foundation';\nimport { type DesignTokensFor, LabelProviderBase } from '../base';\nimport {\n    popupDismissLabel,\n    numericDecrementLabel,\n    numericIncrementLabel,\n    popupIconErrorLabel,\n    popupIconWarningLabel,\n    popupIconInformationLabel,\n    filterSearchLabel,\n    filterNoResultsLabel,\n    loadingLabel,\n    scrollBackwardLabel,\n    scrollForwardLabel,\n    itemRemoveLabel\n} from './label-tokens';\nimport { styles } from '../base/styles';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-label-provider-core': LabelProviderCore;\n    }\n}\n\nconst supportedLabels = {\n    popupDismiss: popupDismissLabel,\n    numericDecrement: numericDecrementLabel,\n    numericIncrement: numericIncrementLabel,\n    popupIconError: popupIconErrorLabel,\n    popupIconWarning: popupIconWarningLabel,\n    popupIconInformation: popupIconInformationLabel,\n    filterSearch: filterSearchLabel,\n    filterNoResults: filterNoResultsLabel,\n    loading: loadingLabel,\n    scrollBackward: scrollBackwardLabel,\n    scrollForward: scrollForwardLabel,\n    itemRemove: itemRemoveLabel\n} as const;\n\n/**\n * Core label provider for Nimble\n */\nexport class LabelProviderCore\n    extends LabelProviderBase<typeof supportedLabels>\n    implements DesignTokensFor<typeof supportedLabels> {\n    @attr({ attribute: 'popup-dismiss' })\n    public popupDismiss: string | undefined;\n\n    @attr({ attribute: 'numeric-decrement' })\n    public numericDecrement: string | undefined;\n\n    @attr({ attribute: 'numeric-increment' })\n    public numericIncrement: string | undefined;\n\n    @attr({ attribute: 'popup-icon-error' })\n    public popupIconError: string | undefined;\n\n    @attr({ attribute: 'popup-icon-warning' })\n    public popupIconWarning: string | undefined;\n\n    @attr({ attribute: 'popup-icon-information' })\n    public popupIconInformation: string | undefined;\n\n    @attr({ attribute: 'filter-search' })\n    public filterSearch: string | undefined;\n\n    @attr({ attribute: 'filter-no-results' })\n    public filterNoResults: string | undefined;\n\n    @attr({ attribute: 'loading' })\n    public loading: string | undefined;\n\n    @attr({ attribute: 'scroll-backward' })\n    public scrollBackward: string | undefined;\n\n    @attr({ attribute: 'scroll-forward' })\n    public scrollForward: string | undefined;\n\n    @attr({ attribute: 'item-remove' })\n    public itemRemove: string | undefined;\n\n    protected override readonly supportedLabels = supportedLabels;\n}\n\nconst nimbleLabelProviderCore = LabelProviderCore.compose({\n    baseName: 'label-provider-core',\n    styles\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(nimbleLabelProviderCore());\nexport const labelProviderCoreTag = 'nimble-label-provider-core';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/label-provider/core/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAwB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAClE,OAAO,EACH,iBAAiB,EACjB,qBAAqB,EACrB,qBAAqB,EACrB,mBAAmB,EACnB,qBAAqB,EACrB,uBAAuB,EACvB,qBAAqB,EACrB,yBAAyB,EACzB,iBAAiB,EACjB,oBAAoB,EACpB,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,eAAe,EAClB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAQxC,MAAM,eAAe,GAAG;IACpB,YAAY,EAAE,iBAAiB;IAC/B,gBAAgB,EAAE,qBAAqB;IACvC,gBAAgB,EAAE,qBAAqB;IACvC,cAAc,EAAE,mBAAmB;IACnC,gBAAgB,EAAE,qBAAqB;IACvC,kBAAkB,EAAE,uBAAuB;IAC3C,gBAAgB,EAAE,qBAAqB;IACvC,oBAAoB,EAAE,yBAAyB;IAC/C,YAAY,EAAE,iBAAiB;IAC/B,eAAe,EAAE,oBAAoB;IACrC,OAAO,EAAE,YAAY;IACrB,cAAc,EAAE,mBAAmB;IACnC,aAAa,EAAE,kBAAkB;IACjC,UAAU,EAAE,eAAe;CACrB,CAAC;AAEX;;GAEG;AACH,MAAM,OAAO,iBACT,SAAQ,iBAAyC;IADrD;;QA6CgC,oBAAe,GAAG,eAAe,CAAC;IAClE,CAAC;CAAA;AA1CU;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;uDACG;AAGjC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;2DACG;AAGrC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;2DACG;AAGrC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;yDACE;AAGnC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;2DACE;AAGrC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,sBAAsB,EAAE,CAAC;6DACE;AAGvC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;2DACE;AAGrC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,wBAAwB,EAAE,CAAC;+DACE;AAGzC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;uDACG;AAGjC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;0DACE;AAGpC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;kDACI;AAG5B;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;yDACG;AAGnC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;wDACG;AAGlC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;qDACG;AAK1C,MAAM,uBAAuB,GAAG,iBAAiB,CAAC,OAAO,CAAC;IACtD,QAAQ,EAAE,qBAAqB;IAC/B,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,uBAAuB,EAAE,CAAC,CAAC;AACzC,MAAM,CAAC,MAAM,oBAAoB,GAAG,4BAA4B,CAAC","sourcesContent":["import { attr } from '@ni/fast-element';\nimport { DesignSystem } from '@ni/fast-foundation';\nimport { type DesignTokensFor, LabelProviderBase } from '../base';\nimport {\n    popupDismissLabel,\n    numericDecrementLabel,\n    numericIncrementLabel,\n    popupIconErrorLabel,\n    popupIconWarningLabel,\n    popupIconCompletedLabel,\n    popupIconCurrentLabel,\n    popupIconInformationLabel,\n    filterSearchLabel,\n    filterNoResultsLabel,\n    loadingLabel,\n    scrollBackwardLabel,\n    scrollForwardLabel,\n    itemRemoveLabel\n} from './label-tokens';\nimport { styles } from '../base/styles';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-label-provider-core': LabelProviderCore;\n    }\n}\n\nconst supportedLabels = {\n    popupDismiss: popupDismissLabel,\n    numericDecrement: numericDecrementLabel,\n    numericIncrement: numericIncrementLabel,\n    popupIconError: popupIconErrorLabel,\n    popupIconWarning: popupIconWarningLabel,\n    popupIconCompleted: popupIconCompletedLabel,\n    popupIconCurrent: popupIconCurrentLabel,\n    popupIconInformation: popupIconInformationLabel,\n    filterSearch: filterSearchLabel,\n    filterNoResults: filterNoResultsLabel,\n    loading: loadingLabel,\n    scrollBackward: scrollBackwardLabel,\n    scrollForward: scrollForwardLabel,\n    itemRemove: itemRemoveLabel\n} as const;\n\n/**\n * Core label provider for Nimble\n */\nexport class LabelProviderCore\n    extends LabelProviderBase<typeof supportedLabels>\n    implements DesignTokensFor<typeof supportedLabels> {\n    @attr({ attribute: 'popup-dismiss' })\n    public popupDismiss: string | undefined;\n\n    @attr({ attribute: 'numeric-decrement' })\n    public numericDecrement: string | undefined;\n\n    @attr({ attribute: 'numeric-increment' })\n    public numericIncrement: string | undefined;\n\n    @attr({ attribute: 'popup-icon-error' })\n    public popupIconError: string | undefined;\n\n    @attr({ attribute: 'popup-icon-warning' })\n    public popupIconWarning: string | undefined;\n\n    @attr({ attribute: 'popup-icon-completed' })\n    public popupIconCompleted: string | undefined;\n\n    @attr({ attribute: 'popup-icon-current' })\n    public popupIconCurrent: string | undefined;\n\n    @attr({ attribute: 'popup-icon-information' })\n    public popupIconInformation: string | undefined;\n\n    @attr({ attribute: 'filter-search' })\n    public filterSearch: string | undefined;\n\n    @attr({ attribute: 'filter-no-results' })\n    public filterNoResults: string | undefined;\n\n    @attr({ attribute: 'loading' })\n    public loading: string | undefined;\n\n    @attr({ attribute: 'scroll-backward' })\n    public scrollBackward: string | undefined;\n\n    @attr({ attribute: 'scroll-forward' })\n    public scrollForward: string | undefined;\n\n    @attr({ attribute: 'item-remove' })\n    public itemRemove: string | undefined;\n\n    protected override readonly supportedLabels = supportedLabels;\n}\n\nconst nimbleLabelProviderCore = LabelProviderCore.compose({\n    baseName: 'label-provider-core',\n    styles\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(nimbleLabelProviderCore());\nexport const labelProviderCoreTag = 'nimble-label-provider-core';\n"]}

package/dist/esm/label-provider/core/label-token-defaults.js

@@ -4,6 +4,8 @@ export const coreLabelDefaults = {
     numericDecrementLabel: 'Decrement',
     popupIconErrorLabel: 'Error',
     popupIconWarningLabel: 'Warning',
+    popupIconCompletedLabel: 'Completed',
+    popupIconCurrentLabel: 'Current',
     popupIconInformationLabel: 'Information',
     filterSearchLabel: 'Search',
     filterNoResultsLabel: 'No items found',

package/dist/esm/label-provider/core/label-token-defaults.js.map

@@ -1 +1 @@
-{"version":3,"file":"label-token-defaults.js","sourceRoot":"","sources":["../../../../src/label-provider/core/label-token-defaults.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,iBAAiB,GAA4C;IACtE,iBAAiB,EAAE,OAAO;IAC1B,qBAAqB,EAAE,WAAW;IAClC,qBAAqB,EAAE,WAAW;IAClC,mBAAmB,EAAE,OAAO;IAC5B,qBAAqB,EAAE,SAAS;IAChC,yBAAyB,EAAE,aAAa;IACxC,iBAAiB,EAAE,QAAQ;IAC3B,oBAAoB,EAAE,gBAAgB;IACtC,YAAY,EAAE,UAAU;IACxB,mBAAmB,EAAE,iBAAiB;IACtC,kBAAkB,EAAE,gBAAgB;IACpC,eAAe,EAAE,QAAQ;CAC5B,CAAC","sourcesContent":["import type * as TokensNamespace from './label-tokens';\n\ntype TokenName = keyof typeof TokensNamespace;\n\nexport const coreLabelDefaults: { readonly [key in TokenName]: string } = {\n    popupDismissLabel: 'Close',\n    numericIncrementLabel: 'Increment',\n    numericDecrementLabel: 'Decrement',\n    popupIconErrorLabel: 'Error',\n    popupIconWarningLabel: 'Warning',\n    popupIconInformationLabel: 'Information',\n    filterSearchLabel: 'Search',\n    filterNoResultsLabel: 'No items found',\n    loadingLabel: 'Loading…',\n    scrollBackwardLabel: 'Scroll backward',\n    scrollForwardLabel: 'Scroll forward',\n    itemRemoveLabel: 'Remove'\n};\n"]}
+{"version":3,"file":"label-token-defaults.js","sourceRoot":"","sources":["../../../../src/label-provider/core/label-token-defaults.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,iBAAiB,GAA4C;IACtE,iBAAiB,EAAE,OAAO;IAC1B,qBAAqB,EAAE,WAAW;IAClC,qBAAqB,EAAE,WAAW;IAClC,mBAAmB,EAAE,OAAO;IAC5B,qBAAqB,EAAE,SAAS;IAChC,uBAAuB,EAAE,WAAW;IACpC,qBAAqB,EAAE,SAAS;IAChC,yBAAyB,EAAE,aAAa;IACxC,iBAAiB,EAAE,QAAQ;IAC3B,oBAAoB,EAAE,gBAAgB;IACtC,YAAY,EAAE,UAAU;IACxB,mBAAmB,EAAE,iBAAiB;IACtC,kBAAkB,EAAE,gBAAgB;IACpC,eAAe,EAAE,QAAQ;CAC5B,CAAC","sourcesContent":["import type * as TokensNamespace from './label-tokens';\n\ntype TokenName = keyof typeof TokensNamespace;\n\nexport const coreLabelDefaults: { readonly [key in TokenName]: string } = {\n    popupDismissLabel: 'Close',\n    numericIncrementLabel: 'Increment',\n    numericDecrementLabel: 'Decrement',\n    popupIconErrorLabel: 'Error',\n    popupIconWarningLabel: 'Warning',\n    popupIconCompletedLabel: 'Completed',\n    popupIconCurrentLabel: 'Current',\n    popupIconInformationLabel: 'Information',\n    filterSearchLabel: 'Search',\n    filterNoResultsLabel: 'No items found',\n    loadingLabel: 'Loading…',\n    scrollBackwardLabel: 'Scroll backward',\n    scrollForwardLabel: 'Scroll forward',\n    itemRemoveLabel: 'Remove'\n};\n"]}

package/dist/esm/label-provider/core/label-tokens.d.ts

@@ -4,6 +4,8 @@ export declare const numericDecrementLabel: DesignToken<string>;
 export declare const numericIncrementLabel: DesignToken<string>;
 export declare const popupIconErrorLabel: DesignToken<string>;
 export declare const popupIconWarningLabel: DesignToken<string>;
+export declare const popupIconCompletedLabel: DesignToken<string>;
+export declare const popupIconCurrentLabel: DesignToken<string>;
 export declare const popupIconInformationLabel: DesignToken<string>;
 export declare const filterSearchLabel: DesignToken<string>;
 export declare const filterNoResultsLabel: DesignToken<string>;

package/dist/esm/label-provider/core/label-tokens.js

@@ -20,6 +20,14 @@ export const popupIconWarningLabel = DesignToken.create({
     name: 'popup-icon-warning-label',
     cssCustomPropertyName: null
 }).withDefault(coreLabelDefaults.popupIconWarningLabel);
+export const popupIconCompletedLabel = DesignToken.create({
+    name: 'popup-icon-completed-label',
+    cssCustomPropertyName: null
+}).withDefault(coreLabelDefaults.popupIconCompletedLabel);
+export const popupIconCurrentLabel = DesignToken.create({
+    name: 'popup-icon-current-label',
+    cssCustomPropertyName: null
+}).withDefault(coreLabelDefaults.popupIconCurrentLabel);
 export const popupIconInformationLabel = DesignToken.create({
     name: 'popup-icon-information-label',
     cssCustomPropertyName: null

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

@@ -1 +1 @@
-{"version":3,"file":"label-tokens.js","sourceRoot":"","sources":["../../../../src/label-provider/core/label-tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,MAAM,CAAC,MAAM,iBAAiB,GAAG,WAAW,CAAC,MAAM,CAAS;IACxD,IAAI,EAAE,qBAAqB;IAC3B,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;AAEpD,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,CAAC,MAAM,CAAS;IAC5D,IAAI,EAAE,yBAAyB;IAC/B,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,qBAAqB,CAAC,CAAC;AAExD,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,CAAC,MAAM,CAAS;IAC5D,IAAI,EAAE,yBAAyB;IAC/B,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,qBAAqB,CAAC,CAAC;AAExD,MAAM,CAAC,MAAM,mBAAmB,GAAG,WAAW,CAAC,MAAM,CAAS;IAC1D,IAAI,EAAE,wBAAwB;IAC9B,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;AAEtD,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,CAAC,MAAM,CAAS;IAC5D,IAAI,EAAE,0BAA0B;IAChC,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,qBAAqB,CAAC,CAAC;AAExD,MAAM,CAAC,MAAM,yBAAyB,GAAG,WAAW,CAAC,MAAM,CAAS;IAChE,IAAI,EAAE,8BAA8B;IACpC,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,yBAAyB,CAAC,CAAC;AAE5D,MAAM,CAAC,MAAM,iBAAiB,GAAG,WAAW,CAAC,MAAM,CAAS;IACxD,IAAI,EAAE,qBAAqB;IAC3B,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;AAEpD,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,CAAC,MAAM,CAAS;IAC3D,IAAI,EAAE,yBAAyB;IAC/B,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;AAEvD,MAAM,CAAC,MAAM,YAAY,GAAG,WAAW,CAAC,MAAM,CAAS;IACnD,IAAI,EAAE,eAAe;IACrB,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAAC;AAE/C,MAAM,CAAC,MAAM,mBAAmB,GAAG,WAAW,CAAC,MAAM,CAAS;IAC1D,IAAI,EAAE,uBAAuB;IAC7B,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;AAEtD,MAAM,CAAC,MAAM,kBAAkB,GAAG,WAAW,CAAC,MAAM,CAAS;IACzD,IAAI,EAAE,sBAAsB;IAC5B,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CAAC;AAErD,MAAM,CAAC,MAAM,eAAe,GAAG,WAAW,CAAC,MAAM,CAAS;IACtD,IAAI,EAAE,mBAAmB;IACzB,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC","sourcesContent":["import { DesignToken } from '@ni/fast-foundation';\nimport { coreLabelDefaults } from './label-token-defaults';\n\nexport const popupDismissLabel = DesignToken.create<string>({\n    name: 'popup-dismiss-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.popupDismissLabel);\n\nexport const numericDecrementLabel = DesignToken.create<string>({\n    name: 'numeric-decrement-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.numericDecrementLabel);\n\nexport const numericIncrementLabel = DesignToken.create<string>({\n    name: 'numeric-increment-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.numericIncrementLabel);\n\nexport const popupIconErrorLabel = DesignToken.create<string>({\n    name: 'popup-icon-error-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.popupIconErrorLabel);\n\nexport const popupIconWarningLabel = DesignToken.create<string>({\n    name: 'popup-icon-warning-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.popupIconWarningLabel);\n\nexport const popupIconInformationLabel = DesignToken.create<string>({\n    name: 'popup-icon-information-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.popupIconInformationLabel);\n\nexport const filterSearchLabel = DesignToken.create<string>({\n    name: 'filter-search-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.filterSearchLabel);\n\nexport const filterNoResultsLabel = DesignToken.create<string>({\n    name: 'filter-no-results-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.filterNoResultsLabel);\n\nexport const loadingLabel = DesignToken.create<string>({\n    name: 'loading-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.loadingLabel);\n\nexport const scrollBackwardLabel = DesignToken.create<string>({\n    name: 'scroll-backward-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.scrollBackwardLabel);\n\nexport const scrollForwardLabel = DesignToken.create<string>({\n    name: 'scroll-forward-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.scrollForwardLabel);\n\nexport const itemRemoveLabel = DesignToken.create<string>({\n    name: 'item-remove-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.itemRemoveLabel);\n"]}
+{"version":3,"file":"label-tokens.js","sourceRoot":"","sources":["../../../../src/label-provider/core/label-tokens.ts"],"names":[],"mappings":"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","sourcesContent":["import { DesignToken } from '@ni/fast-foundation';\nimport { coreLabelDefaults } from './label-token-defaults';\n\nexport const popupDismissLabel = DesignToken.create<string>({\n    name: 'popup-dismiss-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.popupDismissLabel);\n\nexport const numericDecrementLabel = DesignToken.create<string>({\n    name: 'numeric-decrement-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.numericDecrementLabel);\n\nexport const numericIncrementLabel = DesignToken.create<string>({\n    name: 'numeric-increment-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.numericIncrementLabel);\n\nexport const popupIconErrorLabel = DesignToken.create<string>({\n    name: 'popup-icon-error-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.popupIconErrorLabel);\n\nexport const popupIconWarningLabel = DesignToken.create<string>({\n    name: 'popup-icon-warning-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.popupIconWarningLabel);\n\nexport const popupIconCompletedLabel = DesignToken.create<string>({\n    name: 'popup-icon-completed-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.popupIconCompletedLabel);\n\nexport const popupIconCurrentLabel = DesignToken.create<string>({\n    name: 'popup-icon-current-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.popupIconCurrentLabel);\n\nexport const popupIconInformationLabel = DesignToken.create<string>({\n    name: 'popup-icon-information-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.popupIconInformationLabel);\n\nexport const filterSearchLabel = DesignToken.create<string>({\n    name: 'filter-search-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.filterSearchLabel);\n\nexport const filterNoResultsLabel = DesignToken.create<string>({\n    name: 'filter-no-results-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.filterNoResultsLabel);\n\nexport const loadingLabel = DesignToken.create<string>({\n    name: 'loading-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.loadingLabel);\n\nexport const scrollBackwardLabel = DesignToken.create<string>({\n    name: 'scroll-backward-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.scrollBackwardLabel);\n\nexport const scrollForwardLabel = DesignToken.create<string>({\n    name: 'scroll-forward-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.scrollForwardLabel);\n\nexport const itemRemoveLabel = DesignToken.create<string>({\n    name: 'item-remove-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.itemRemoveLabel);\n"]}

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

@@ -1,5 +1,5 @@
 import { cssPartial } from '@ni/fast-element';
-import { failColor, errorTextFontLineHeight, errorTextFont, buttonLabelFontColor, warningFontColor } from '../../theme-provider/design-tokens';
+import { failColor, errorTextFont, buttonLabelFontColor, warningFontColor, } from '../../theme-provider/design-tokens';
 // These styles end up inside a @layer block so must use the
 // cssPartial tag instead of the css tag
 export const styles = cssPartial `
@@ -7,16 +7,14 @@ export const styles = cssPartial `
         display: none;
         font: ${errorTextFont};
         color: ${buttonLabelFontColor};
-        width: 100%;
         position: absolute;
-        ${'' /* The -2px modifier of the bottom position is to intentionally have the severity text slightly overlap the control by 2px */}
-        bottom: calc(-1 * (${errorTextFontLineHeight} - 2px));
-        left: 0px;
+        padding: 0;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        width: 100%;
     }
-    
+
     :host([severity="error"]) .severity-text {
         display: block;
         color: ${failColor};

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/severity/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EACH,SAAS,EACT,uBAAuB,EACvB,aAAa,EACb,oBAAoB,EACpB,gBAAgB,EACnB,MAAM,oCAAoC,CAAC;AAE5C,4DAA4D;AAC5D,wCAAwC;AACxC,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAA;;;gBAGhB,aAAa;iBACZ,oBAAoB;;;UAG3B,EAAE,CAAC,6HAA6H;6BAC7G,uBAAuB;;;;;;;;;iBASnC,SAAS;;;;;iBAKT,gBAAgB;;;;;CAKhC,CAAC","sourcesContent":["import { cssPartial } from '@ni/fast-element';\nimport {\n    failColor,\n    errorTextFontLineHeight,\n    errorTextFont,\n    buttonLabelFontColor,\n    warningFontColor\n} from '../../theme-provider/design-tokens';\n\n// These styles end up inside a @layer block so must use the\n// cssPartial tag instead of the css tag\nexport const styles = cssPartial`\n    .severity-text {\n        display: none;\n        font: ${errorTextFont};\n        color: ${buttonLabelFontColor};\n        width: 100%;\n        position: absolute;\n        ${'' /* The -2px modifier of the bottom position is to intentionally have the severity text slightly overlap the control by 2px */}\n        bottom: calc(-1 * (${errorTextFontLineHeight} - 2px));\n        left: 0px;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n    \n    :host([severity=\"error\"]) .severity-text {\n        display: block;\n        color: ${failColor};\n    }\n\n    :host([severity=\"warning\"]) .severity-text {\n        display: block;\n        color: ${warningFontColor};\n    }\n    .severity-text:empty {\n        display: none;\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/severity/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EACH,SAAS,EACT,aAAa,EACb,oBAAoB,EACpB,gBAAgB,GACnB,MAAM,oCAAoC,CAAC;AAE5C,4DAA4D;AAC5D,wCAAwC;AACxC,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAA;;;gBAGhB,aAAa;iBACZ,oBAAoB;;;;;;;;;;;iBAWpB,SAAS;;;;;iBAKT,gBAAgB;;;;;CAKhC,CAAC","sourcesContent":["import { cssPartial } from '@ni/fast-element';\nimport {\n    failColor,\n    errorTextFont,\n    buttonLabelFontColor,\n    warningFontColor,\n} from '../../theme-provider/design-tokens';\n\n// These styles end up inside a @layer block so must use the\n// cssPartial tag instead of the css tag\nexport const styles = cssPartial`\n    .severity-text {\n        display: none;\n        font: ${errorTextFont};\n        color: ${buttonLabelFontColor};\n        position: absolute;\n        padding: 0;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        width: 100%;\n    }\n\n    :host([severity=\"error\"]) .severity-text {\n        display: block;\n        color: ${failColor};\n    }\n\n    :host([severity=\"warning\"]) .severity-text {\n        display: block;\n        color: ${warningFontColor};\n    }\n    .severity-text:empty {\n        display: none;\n    }\n`;\n"]}

package/dist/esm/patterns/severity/template.js

@@ -6,5 +6,6 @@ export const severityTextTemplate = html `
         ${overflow('severityHasOverflow')}
         title="${x => (x.severityHasOverflow && x.severityText ? x.severityText : undefined)}"
         aria-live="polite"
+        @click="${(_x, c) => c.event.stopImmediatePropagation()}"
     >${x => x.severityText}</div>`;
 //# sourceMappingURL=template.js.map

package/dist/esm/patterns/severity/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/patterns/severity/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAE9D,MAAM,CAAC,MAAM,oBAAoB,GAAG,IAAI,CAAiB;;;UAG/C,QAAQ,CAAC,qBAAqB,CAAC;iBACxB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC;;OAErF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,QAAQ,CAAC","sourcesContent":["import { html } from '@ni/fast-element';\nimport type { SeverityPattern } from './types';\nimport { overflow } from '../../utilities/directive/overflow';\n\nexport const severityTextTemplate = html<SeverityPattern>`\n    <div\n        class=\"severity-text\"\n        ${overflow('severityHasOverflow')}\n        title=\"${x => (x.severityHasOverflow && x.severityText ? x.severityText : undefined)}\"\n        aria-live=\"polite\"\n    >${x => x.severityText}</div>`;\n"]}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/patterns/severity/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAE9D,MAAM,CAAC,MAAM,oBAAoB,GAAG,IAAI,CAAiB;;;UAG/C,QAAQ,CAAC,qBAAqB,CAAC;iBACxB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC;;kBAE1E,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,wBAAwB,EAAE;OACxD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,QAAQ,CAAC","sourcesContent":["import { html } from '@ni/fast-element';\nimport type { SeverityPattern } from './types';\nimport { overflow } from '../../utilities/directive/overflow';\n\nexport const severityTextTemplate = html<SeverityPattern>`\n    <div\n        class=\"severity-text\"\n        ${overflow('severityHasOverflow')}\n        title=\"${x => (x.severityHasOverflow && x.severityText ? x.severityText : undefined)}\"\n        aria-live=\"polite\"\n        @click=\"${(_x, c) => c.event.stopImmediatePropagation()}\"\n    >${x => x.severityText}</div>`;\n"]}

package/dist/esm/patterns/severity/testing/severity-pattern.pageobject.d.ts

@@ -8,5 +8,6 @@ export declare class SeverityPatternPageObject {
     getDisplayedSeverityText(): string;
     getSeverityTextTitle(): string;
     dispatchEventToSeverityText(event: MouseEvent): void;
+    clickSeverityText(): void;
     private getSeverityTextElement;
 }

package/dist/esm/patterns/severity/testing/severity-pattern.pageobject.js

@@ -29,6 +29,13 @@ export class SeverityPatternPageObject {
         severityTextDiv.dispatchEvent(event);
         processUpdates();
     }
+    clickSeverityText() {
+        const severityTextDiv = this.getSeverityTextElement();
+        if (!severityTextDiv) {
+            throw new Error('Severity text element not found');
+        }
+        severityTextDiv.click();
+    }
     getSeverityTextElement() {
         return this.element.shadowRoot.querySelector('.severity-text');
     }

package/dist/esm/patterns/severity/testing/severity-pattern.pageobject.js.map

@@ -1 +1 @@
-{"version":3,"file":"severity-pattern.pageobject.js","sourceRoot":"","sources":["../../../../../src/patterns/severity/testing/severity-pattern.pageobject.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE;;GAEG;AACH,MAAM,OAAO,yBAAyB;IAClC,YAAoC,OAA0B;QAA1B,YAAO,GAAP,OAAO,CAAmB;IAAG,CAAC;IAE3D,wBAAwB;QAC3B,MAAM,eAAe,GAAG,IAAI,CAAC,sBAAsB,EAAE,CAAC;QACtD,IACI,CAAC,eAAe;eACb,gBAAgB,CAAC,eAAe,CAAC,CAAC,OAAO,KAAK,MAAM,EACzD,CAAC;YACC,OAAO,EAAE,CAAC;QACd,CAAC;QACD,OAAO,eAAe,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IACrD,CAAC;IAEM,oBAAoB;QACvB,MAAM,eAAe,GAAG,IAAI,CAAC,sBAAsB,EAAE,CAAC;QACtD,IAAI,CAAC,eAAe,EAAE,CAAC;YACnB,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;QACvD,CAAC;QACD,OAAO,eAAe,CAAC,KAAK,CAAC;IACjC,CAAC;IAEM,2BAA2B,CAAC,KAAiB;QAChD,MAAM,eAAe,GAAG,IAAI,CAAC,sBAAsB,EAAE,CAAC;QACtD,IAAI,CAAC,eAAe,EAAE,CAAC;YACnB,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;QACvD,CAAC;QACD,eAAe,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACrC,cAAc,EAAE,CAAC;IACrB,CAAC;IAEO,sBAAsB;QAC1B,OAAO,IAAI,CAAC,OAAO,CAAC,UAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACpE,CAAC;CACJ","sourcesContent":["import type { FoundationElement } from '@ni/fast-foundation';\nimport { processUpdates } from '../../../testing/async-helpers';\n\n/**\n * A page object for the elements that use the error pattern mixin.\n */\nexport class SeverityPatternPageObject {\n    public constructor(private readonly element: FoundationElement) {}\n\n    public getDisplayedSeverityText(): string {\n        const severityTextDiv = this.getSeverityTextElement();\n        if (\n            !severityTextDiv\n            || getComputedStyle(severityTextDiv).display === 'none'\n        ) {\n            return '';\n        }\n        return severityTextDiv.textContent?.trim() ?? '';\n    }\n\n    public getSeverityTextTitle(): string {\n        const severityTextDiv = this.getSeverityTextElement();\n        if (!severityTextDiv) {\n            throw new Error('Severity text element not found');\n        }\n        return severityTextDiv.title;\n    }\n\n    public dispatchEventToSeverityText(event: MouseEvent): void {\n        const severityTextDiv = this.getSeverityTextElement();\n        if (!severityTextDiv) {\n            throw new Error('Severity text element not found');\n        }\n        severityTextDiv.dispatchEvent(event);\n        processUpdates();\n    }\n\n    private getSeverityTextElement(): HTMLDivElement | null {\n        return this.element.shadowRoot!.querySelector('.severity-text');\n    }\n}\n"]}
+{"version":3,"file":"severity-pattern.pageobject.js","sourceRoot":"","sources":["../../../../../src/patterns/severity/testing/severity-pattern.pageobject.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE;;GAEG;AACH,MAAM,OAAO,yBAAyB;IAClC,YAAoC,OAA0B;QAA1B,YAAO,GAAP,OAAO,CAAmB;IAAG,CAAC;IAE3D,wBAAwB;QAC3B,MAAM,eAAe,GAAG,IAAI,CAAC,sBAAsB,EAAE,CAAC;QACtD,IACI,CAAC,eAAe;eACb,gBAAgB,CAAC,eAAe,CAAC,CAAC,OAAO,KAAK,MAAM,EACzD,CAAC;YACC,OAAO,EAAE,CAAC;QACd,CAAC;QACD,OAAO,eAAe,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IACrD,CAAC;IAEM,oBAAoB;QACvB,MAAM,eAAe,GAAG,IAAI,CAAC,sBAAsB,EAAE,CAAC;QACtD,IAAI,CAAC,eAAe,EAAE,CAAC;YACnB,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;QACvD,CAAC;QACD,OAAO,eAAe,CAAC,KAAK,CAAC;IACjC,CAAC;IAEM,2BAA2B,CAAC,KAAiB;QAChD,MAAM,eAAe,GAAG,IAAI,CAAC,sBAAsB,EAAE,CAAC;QACtD,IAAI,CAAC,eAAe,EAAE,CAAC;YACnB,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;QACvD,CAAC;QACD,eAAe,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACrC,cAAc,EAAE,CAAC;IACrB,CAAC;IAEM,iBAAiB;QACpB,MAAM,eAAe,GAAG,IAAI,CAAC,sBAAsB,EAAE,CAAC;QACtD,IAAI,CAAC,eAAe,EAAE,CAAC;YACnB,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;QACvD,CAAC;QACD,eAAe,CAAC,KAAK,EAAE,CAAC;IAC5B,CAAC;IAEO,sBAAsB;QAC1B,OAAO,IAAI,CAAC,OAAO,CAAC,UAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACpE,CAAC;CACJ","sourcesContent":["import type { FoundationElement } from '@ni/fast-foundation';\nimport { processUpdates } from '../../../testing/async-helpers';\n\n/**\n * A page object for the elements that use the error pattern mixin.\n */\nexport class SeverityPatternPageObject {\n    public constructor(private readonly element: FoundationElement) {}\n\n    public getDisplayedSeverityText(): string {\n        const severityTextDiv = this.getSeverityTextElement();\n        if (\n            !severityTextDiv\n            || getComputedStyle(severityTextDiv).display === 'none'\n        ) {\n            return '';\n        }\n        return severityTextDiv.textContent?.trim() ?? '';\n    }\n\n    public getSeverityTextTitle(): string {\n        const severityTextDiv = this.getSeverityTextElement();\n        if (!severityTextDiv) {\n            throw new Error('Severity text element not found');\n        }\n        return severityTextDiv.title;\n    }\n\n    public dispatchEventToSeverityText(event: MouseEvent): void {\n        const severityTextDiv = this.getSeverityTextElement();\n        if (!severityTextDiv) {\n            throw new Error('Severity text element not found');\n        }\n        severityTextDiv.dispatchEvent(event);\n        processUpdates();\n    }\n\n    public clickSeverityText(): void {\n        const severityTextDiv = this.getSeverityTextElement();\n        if (!severityTextDiv) {\n            throw new Error('Severity text element not found');\n        }\n        severityTextDiv.click();\n    }\n\n    private getSeverityTextElement(): HTMLDivElement | null {\n        return this.element.shadowRoot!.querySelector('.severity-text');\n    }\n}\n"]}

package/dist/esm/patterns/step/models/step-internals.d.ts

@@ -5,4 +5,5 @@ import { StepperOrientation } from '../../../stepper/types';
 export declare class StepInternals {
     orientation: StepperOrientation;
     last: boolean;
+    position: number;
 }

package/dist/esm/patterns/step/models/step-internals.js

@@ -8,6 +8,7 @@ export class StepInternals {
     constructor() {
         this.orientation = StepperOrientation.horizontal;
         this.last = false;
+        this.position = 1;
     }
 }
 __decorate([
@@ -16,4 +17,7 @@ __decorate([
 __decorate([
     observable
 ], StepInternals.prototype, "last", void 0);
+__decorate([
+    observable
+], StepInternals.prototype, "position", void 0);
 //# sourceMappingURL=step-internals.js.map

package/dist/esm/patterns/step/models/step-internals.js.map

@@ -1 +1 @@
-{"version":3,"file":"step-internals.js","sourceRoot":"","sources":["../../../../../src/patterns/step/models/step-internals.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D;;GAEG;AACH,MAAM,OAAO,aAAa;IAA1B;QAEW,gBAAW,GAAuB,kBAAkB,CAAC,UAAU,CAAC;QAGhE,SAAI,GAAG,KAAK,CAAC;IACxB,CAAC;CAAA;AAJU;IADN,UAAU;kDAC4D;AAGhE;IADN,UAAU;2CACS","sourcesContent":["import { observable } from '@ni/fast-element';\nimport { StepperOrientation } from '../../../stepper/types';\n\n/**\n * Internal properties configurable for a step\n */\nexport class StepInternals {\n    @observable\n    public orientation: StepperOrientation = StepperOrientation.horizontal;\n\n    @observable\n    public last = false;\n}\n"]}
+{"version":3,"file":"step-internals.js","sourceRoot":"","sources":["../../../../../src/patterns/step/models/step-internals.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D;;GAEG;AACH,MAAM,OAAO,aAAa;IAA1B;QAEW,gBAAW,GAAuB,kBAAkB,CAAC,UAAU,CAAC;QAGhE,SAAI,GAAG,KAAK,CAAC;QAGb,aAAQ,GAAG,CAAC,CAAC;IACxB,CAAC;CAAA;AAPU;IADN,UAAU;kDAC4D;AAGhE;IADN,UAAU;2CACS;AAGb;IADN,UAAU;+CACS","sourcesContent":["import { observable } from '@ni/fast-element';\nimport { StepperOrientation } from '../../../stepper/types';\n\n/**\n * Internal properties configurable for a step\n */\nexport class StepInternals {\n    @observable\n    public orientation: StepperOrientation = StepperOrientation.horizontal;\n\n    @observable\n    public last = false;\n\n    @observable\n    public position = 1;\n}\n"]}

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

@@ -1,12 +1,13 @@
 import { css } from '@ni/fast-element';
 import { Black15, Black91, White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
 import { display } from '../../utilities/style/display';
-import { buttonLabelFont, buttonLabelFontColor, smallPadding, bodyFont, errorTextFont, controlSlimHeight, borderRgbPartialColor, borderHoverColor, borderWidth, smallDelay, fillSelectedColor, passColor, failColor, warningColor, buttonLabelDisabledFontColor, iconColor, menuMinWidth, standardPadding, controlHeight, errorTextFontLineHeight } from '../../theme-provider/design-tokens';
+import { buttonLabelFont, buttonLabelFontColor, smallPadding, bodyFont, errorTextFont, controlSlimHeight, borderRgbPartialColor, borderHoverColor, borderWidth, smallDelay, fillSelectedColor, passColor, failColor, warningColor, buttonLabelDisabledFontColor, iconColor, standardPadding, controlHeight, errorTextFontLineHeight, } from '../../theme-provider/design-tokens';
 import { styles as severityStyles } from '../severity/styles';
 import { focusVisible } from '../../utilities/style/focus';
 import { userSelectNone } from '../../utilities/style/user-select';
 import { themeBehavior } from '../../utilities/style/theme';
 import { Theme } from '../../theme-provider/types';
+import { accessiblyHidden } from '../../utilities/style/accessibly-hidden';
 export const styles = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
@@ -14,9 +15,6 @@ export const styles = css `
         ${display('inline-flex')}
         ${severityStyles}
         :host {
-            ${'' /* Based on text layout: Top padding + title height + subtitle height + bottom padding */}
-            height: calc(${smallPadding} + ${controlSlimHeight} + ${errorTextFontLineHeight} + ${smallPadding});
-            width: ${menuMinWidth};
             color: ${buttonLabelFontColor};
             font: ${buttonLabelFont};
             white-space: nowrap;
@@ -30,21 +28,36 @@ export const styles = css `
             width: 100%;
             height: 100%;
             position: relative;
+            list-style: none;
+            --ni-private-step-content-height: calc(${smallPadding} + ${controlSlimHeight} + ${errorTextFontLineHeight});
+            --ni-private-step-content-offset: calc(${controlHeight} + ${smallPadding});
         }
 
-        .control { 
-            display: inline-flex;
-            align-items: start;
-            justify-content: flex-start;
+        .control {
+            display: inline-grid;
             height: 100%;
             width: 100%;
+            grid-template-areas:
+                "icon top-spacer top-spacer"
+                "icon title line"
+                "icon subtitle subtitle";
+            grid-template-columns:
+                ${controlHeight} ${'' /* Icon width */}
+                min-content ${'' /* Show the full title and subtitle */}
+                1fr; ${'' /* Line is only fr unit so fills remaining space */}
+            grid-template-rows:
+                ${smallPadding}
+                ${controlSlimHeight}
+                min-content;
+            column-gap: 4px;
+
+            align-items: start;
+            margin: 0;
+            padding: 0;
             color: inherit;
             background-color: transparent;
-            gap: ${smallPadding};
             cursor: pointer;
             outline: none;
-            margin: 0; 
-            padding: 0 ${smallPadding} 0 0;
             --ni-private-step-icon-background-full-size: 100% 100%;
             ${'' /* 6px = (2px icon border + 1px inset) * 2 sides */}
             --ni-private-step-icon-background-inset-size: calc(100% - 6px) calc(100% - 6px);
@@ -58,6 +71,70 @@ export const styles = css `
             --ni-private-step-line-color: rgba(${borderRgbPartialColor}, 0.1);
         }
 
+        .container.last .control {
+            grid-template-areas:
+                "icon top-spacer"
+                "icon title"
+                "icon subtitle";
+            grid-template-columns:
+                ${controlHeight}
+                min-content;
+            grid-template-rows:
+                ${smallPadding}
+                ${controlSlimHeight}
+                min-content;
+        }
+
+        .container.vertical .control {
+            ${'' /*
+Defines an interaction area clip-path that leaves out the severity text so it is easily selectable:
+1----------------2
+|    title       |
+|    subtitle    |
+|  4-------------3
+|  | severity-text
+|  |
+6--5
+*/}
+            clip-path: polygon(
+                0% 0%,
+                100% 0%,
+                100% var(--ni-private-step-content-height),
+                var(--ni-private-step-content-offset) var(--ni-private-step-content-height),
+                var(--ni-private-step-content-offset) 100%,
+                0% 100%
+            );
+            grid-template-areas:
+                "icon top-spacer"
+                "icon title"
+                "icon subtitle"
+                "line subtitle"
+                "line .";
+            grid-template-columns:
+                ${controlHeight}
+                min-content;
+            grid-template-rows:
+                ${smallPadding}
+                ${controlSlimHeight}
+                calc(${controlHeight} - ${smallPadding} - ${controlSlimHeight})
+                min-content
+                1fr;
+        }
+
+        .container.vertical.last .control {
+            grid-template-areas:
+                "icon top-spacer"
+                "icon title"
+                "icon subtitle";
+            grid-template-columns:
+                ${controlHeight}
+                min-content;
+            grid-template-rows:
+                ${smallPadding}
+                ${controlSlimHeight}
+                min-content;
+        }
+
         :host([severity="error"]) .control {
             --ni-private-step-icon-color: ${failColor};
             --ni-private-step-icon-border-color: ${failColor};
@@ -91,6 +168,7 @@ export const styles = css `
         }
 
         .icon {
+            grid-area: icon;
             display: inline-flex;
             align-items: center;
             justify-content: center;
@@ -110,7 +188,7 @@ export const styles = css `
                 ${'' /* Workaround to prevent aliasing on radial-gradient boundaries, see:
         https://frontendmasters.com/blog/obsessing-over-smooth-radial-gradient-disc-edges
     */}
-                var(--ni-private-step-icon-background-color) calc(100% - 1px/var(--ni-private-device-resolution)),
+                var(--ni-private-step-icon-background-color) calc(100% - 1px/var(--ni-private-device-pixel-ratio, 1)),
                 transparent 100%
             );
             background-origin: border-box;
@@ -148,18 +226,22 @@ export const styles = css `
                 outline-offset ${smallDelay} ease-in-out;
         }
 
-        .icon-slot {
+        .current-label {
+            ${accessiblyHidden}
+        }
+
+        .step-indicator {
             display: contents;
         }
 
-        :host([severity="error"]) .icon-slot,
-        :host([severity="warning"]) .icon-slot,
-        :host([severity="success"]) .icon-slot {
+        :host([severity="error"]) .step-indicator,
+        :host([severity="warning"]) .step-indicator,
+        :host([severity="success"]) .step-indicator {
             display: none;
         }
 
-        :host([selected]) .icon-slot,
-        :host([disabled]) .icon-slot {
+        :host([selected]) .step-indicator,
+        :host([disabled]) .step-indicator {
             display: contents;
         }
 
@@ -178,62 +260,80 @@ export const styles = css `
             display: none;
         }
 
-        .content {
-            display: inline-flex;
-            ${'' /* Control width - icon size */}
-            width: calc(100% - 32px);
-            flex-direction: column;
-            padding-top: ${smallPadding};
-            padding-bottom: ${smallPadding};
+        .top-spacer {
+            grid-area: top-spacer;
+            height: ${smallPadding};
         }
 
-        .title-wrapper {
-            display: inline-flex;
+        .title {
+            grid-area: title;
+            min-width: min-content;
             height: ${controlSlimHeight};
-            flex-direction: row;
-            align-items: center;
-            justify-content: start;
-            gap: ${smallPadding};
+            display: inline-block;
+            align-content: center;
             font: ${bodyFont};
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
 
         [part='start'] {
             display: none;
         }
 
-        .title {
-            display: inline-block;
-            flex: none;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            ${'' /* Content width - (gap + line min width) */}
-            max-width: calc(100% - (${smallPadding} + ${standardPadding}));
-        }
-
         [part='end'] {
             display: none;
         }
-        
+
         .line {
+            grid-area: line;
+            align-self: center;
+            justify-self: center;
             display: inline-block;
-            flex: 1;
+            width: 100%;
             min-width: ${standardPadding};
             height: 1px;
+            min-height: 1px;
             background: var(--ni-private-step-line-color);
+            background-clip: content-box;
             transform: scale(1, 1);
             transition:
                 background-color ${smallDelay} ease-in-out,
                 transform ${smallDelay} ease-in-out;
         }
 
+        .container.last .line {
+            display: none;
+        }
+
+        .container.vertical .line {
+            width: 1px;
+            min-width: 1px;
+            height: 100%;
+            padding-top: ${smallPadding};
+            min-height: ${standardPadding};
+        }
+
         .subtitle {
+            grid-area: subtitle;
+            display: inline-block;
+            min-width: min-content;
+            height: ${errorTextFontLineHeight};
+            align-content: center;
             font: ${errorTextFont};
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
-            ${'' /* Content width */}
-            max-width: 100%;
+        }
+
+        .severity-text {
+            left: 0px;
+            top: var(--ni-private-step-content-height);
+        }
+
+        .container.vertical .severity-text {
+            width: calc(100% - var(--ni-private-step-content-offset));
+            left: var(--ni-private-step-content-offset);
         }
     }
 
@@ -277,6 +377,10 @@ export const styles = css `
         .control:hover .line {
             transform: scale(1, 2);
         }
+
+        .container.vertical .control:hover .line {
+            transform: scale(2, 1);
+        }
     }
 
     @layer focusVisible {
@@ -316,7 +420,7 @@ export const styles = css `
             --ni-private-step-icon-outline-inset-color: ${borderHoverColor};
             --ni-private-step-line-color: ${borderHoverColor};
         }
-    
+
         .control${focusVisible} .icon {
             border-width: 2px;
         }
@@ -329,6 +433,10 @@ export const styles = css `
         .control${focusVisible} .line {
             transform: scale(1, 2);
         }
+
+        .container.vertical .control${focusVisible} .line {
+            transform: scale(2, 1);
+        }
     }
 
     @layer active {