@ni/nimble-components 11.15.1 → 12.0.1

package/dist/esm/tooltip/template.js

@@ -1,12 +1,12 @@
 import { html, ref, when } from '@microsoft/fast-element';
+import { DesignSystem } from '@microsoft/fast-foundation';
 import { AnchoredRegion } from '../anchored-region';
 import { IconExclamationMark } from '../icons/exclamation-mark';
 import { IconInfo } from '../icons/info';
 // prettier-ignore
-export const template = context => {
-    return html `
+export const template = html `
             ${when(x => x.tooltipVisible, html `
-            <${context.tagFor(AnchoredRegion)}
+            <${DesignSystem.tagFor(AnchoredRegion)}
                 class="anchored-region"
                 fixed-placement="true"
                 auto-update-mode="${x => x.autoUpdateMode}"
@@ -24,12 +24,17 @@ export const template = context => {
                 ${ref('region')}
             >
                 <div class="tooltip" part="tooltip" role="tooltip">
-                    <${context.tagFor(IconExclamationMark)} class="fail status-icon"></${context.tagFor(IconExclamationMark)}>
-                    <${context.tagFor(IconInfo)} class="information status-icon"></${context.tagFor(IconInfo)}>
+                    <${DesignSystem.tagFor(IconExclamationMark)}
+                        severity="error"
+                        class="status-icon"
+                    ></${DesignSystem.tagFor(IconExclamationMark)}>
+                    <${DesignSystem.tagFor(IconInfo)}
+                        severity="information"
+                        class="status-icon"
+                    ></${DesignSystem.tagFor(IconInfo)}>
                     <slot></slot>
                 </div>
-            </${context.tagFor(AnchoredRegion)}>
+            </${DesignSystem.tagFor(AnchoredRegion)}>
         `)}
-        `;
-};
+`;
 //# sourceMappingURL=template.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/tooltip/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAgB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAExE,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGzC,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAqD,OAAO,CAAC,EAAE;IAChF,OAAO,IAAI,CAAS;cACV,IAAI,CACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EACrB,IAAI,CAAS;eACN,OAAO,CAAC,MAAM,CAAC,cAAc,CAAC;;;oCAGT,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;6CACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,uBAAuB;6CAC9B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,uBAAuB;kCACzC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa;oCAClB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;+CACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,yBAAyB;+CAChC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,yBAAyB;sCACzC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB;oCAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;0CAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,sBAAsB;4CAC3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,oBAAoB;uBAChD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;kBAC5B,GAAG,CAAC,QAAQ,CAAC;;;uBAGR,OAAO,CAAC,MAAM,CAAC,mBAAmB,CAAC,+BAA+B,OAAO,CAAC,MAAM,CAAC,mBAAmB,CAAC;uBACrG,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,sCAAsC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC;;;gBAG7F,OAAO,CAAC,MAAM,CAAC,cAAc,CAAC;SACrC,CACJ;SACI,CAAC;AACV,CAAC,CAAC"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/tooltip/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGzC,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAS;cACvB,IAAI,CACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EACrB,IAAI,CAAS;eACN,YAAY,CAAC,MAAM,CAAC,cAAc,CAAC;;;oCAGd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;6CACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,uBAAuB;6CAC9B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,uBAAuB;kCACzC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa;oCAClB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;+CACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,yBAAyB;+CAChC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,yBAAyB;sCACzC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB;oCAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;0CAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,sBAAsB;4CAC3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,oBAAoB;uBAChD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;kBAC5B,GAAG,CAAC,QAAQ,CAAC;;;uBAGR,YAAY,CAAC,MAAM,CAAC,mBAAmB,CAAC;;;yBAGtC,YAAY,CAAC,MAAM,CAAC,mBAAmB,CAAC;uBAC1C,YAAY,CAAC,MAAM,CAAC,QAAQ,CAAC;;;yBAG3B,YAAY,CAAC,MAAM,CAAC,QAAQ,CAAC;;;gBAGtC,YAAY,CAAC,MAAM,CAAC,cAAc,CAAC;SAC1C,CACJ;CACJ,CAAC"}

package/dist/esm/tooltip/types.d.ts

@@ -2,9 +2,9 @@
  * Types of tooltip appearance.
  * @public
  */
-export declare const TooltipStatus: {
-    readonly default: "";
-    readonly fail: "fail";
+export declare const TooltipSeverity: {
+    readonly default: undefined;
+    readonly error: "error";
     readonly information: "information";
 };
-export declare type TooltipStatus = typeof TooltipStatus[keyof typeof TooltipStatus];
+export declare type TooltipSeverity = typeof TooltipSeverity[keyof typeof TooltipSeverity];

package/dist/esm/tooltip/types.js

@@ -2,9 +2,9 @@
  * Types of tooltip appearance.
  * @public
  */
-export const TooltipStatus = {
-    default: '',
-    fail: 'fail',
+export const TooltipSeverity = {
+    default: undefined,
+    error: 'error',
     information: 'information'
 };
 //# sourceMappingURL=types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/tooltip/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IACzB,OAAO,EAAE,EAAE;IACX,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,aAAa;CACpB,CAAC"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/tooltip/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC3B,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,aAAa;CACpB,CAAC"}

package/dist/esm/tree-item/styles.d.ts

@@ -1,3 +1 @@
-import { ElementStyles } from '@microsoft/fast-element';
-import { FoundationElementTemplate, TreeItemOptions } from '@microsoft/fast-foundation';
-export declare const styles: FoundationElementTemplate<ElementStyles, TreeItemOptions>;
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

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

@@ -1,199 +1,204 @@
 import { css } from '@microsoft/fast-element';
-import { display, TreeItem } from '@microsoft/fast-foundation';
+import { display } from '@microsoft/fast-foundation';
 import { focusVisible } from '../utilities/style/focus';
 import { bodyFontColor, bodyFontFamily, bodyFontSize, bodyFontWeight, borderHoverColor, fillSelectedColor, fillHoverColor, fillHoverSelectedColor, borderWidth, iconSize } from '../theme-provider/design-tokens';
 import { groupSelectedAttribute } from '../tree-view/types';
 import { DirectionalStyleSheetBehavior } from '../utilities/style/direction';
-export const styles = (context, _definition) => css `
-            ${display('block')}
+export const styles = css `
+    ${display('block')}
 
-            :host {
-                ${
+    :host {
+        ${
 /* don't set font-size here or else it overrides what we set on .items */ ''}
-                font-family: ${bodyFontFamily};
-                font-weight: ${bodyFontWeight};
-                contain: content;
-                position: relative;
-                outline: none;
-                color: ${bodyFontColor};
-                cursor: pointer;
-                --ni-private-tree-item-nested-width: 0;
-            }
-
-            ${ /* this controls the side border */''}
-            :host([${groupSelectedAttribute}])::after {
-                background: ${borderHoverColor};
-                border-radius: 0px;
-                content: '';
-                display: block;
-                position: absolute;
-                top: 0px;
-                width: calc(${borderWidth} * 2);
-                height: calc(${iconSize} * 2);
-            }
-
-            .positioning-region {
-                display: flex;
-                position: relative;
-                box-sizing: border-box;
-                height: calc(${iconSize} * 2);
-            }
-
-            .positioning-region:hover {
-                background: ${fillHoverColor};
-            }
-
-            :host([${groupSelectedAttribute}]) .positioning-region:hover {
-                background: ${fillHoverSelectedColor};
-            }
-
-            :host(${focusVisible}) .positioning-region {
-                box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
-                outline: ${borderWidth} solid ${borderHoverColor};
-                outline-offset: -2px;
-            }
-
-            :host([selected]) .positioning-region {
-                background: ${fillSelectedColor};
-            }
-
-            :host([selected]) .positioning-region:hover {
-                background: ${fillHoverSelectedColor};
-            }
-
-            .positioning-region::before {
-                content: '';
-                display: block;
-                width: var(--ni-private-tree-item-nested-width);
-                flex-shrink: 0;
-            }
-
-            .content-region {
-                display: inline-flex;
-                align-items: center;
-                white-space: nowrap;
-                width: 100%;
-                padding-left: 10px;
-                font: inherit;
-                font-size: ${bodyFontSize};
-                user-select: none;
-                position: relative;
-                margin-inline-start: ${iconSize};
-            }
-
-            :host(${focusVisible}) .content-region {
-                outline: none;
-            }
+        font-family: ${bodyFontFamily};
+        font-weight: ${bodyFontWeight};
+        contain: content;
+        position: relative;
+        outline: none;
+        color: ${bodyFontColor};
+        cursor: pointer;
+        --ni-private-tree-item-nested-width: 0;
+    }
+
+    ${ /* this controls the side border */''}
+    :host([${groupSelectedAttribute}])::after {
+        background: ${borderHoverColor};
+        border-radius: 0px;
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0px;
+        width: calc(${borderWidth} * 2);
+        height: calc(${iconSize} * 2);
+    }
+
+    .positioning-region {
+        display: flex;
+        position: relative;
+        box-sizing: border-box;
+        height: calc(${iconSize} * 2);
+    }
+
+    .positioning-region:hover {
+        background: ${fillHoverColor};
+    }
+
+    :host([${groupSelectedAttribute}]) .positioning-region:hover {
+        background: ${fillHoverSelectedColor};
+    }
+
+    :host(${focusVisible}) .positioning-region {
+        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+        outline: ${borderWidth} solid ${borderHoverColor};
+        outline-offset: -2px;
+    }
+
+    :host([selected]) .positioning-region {
+        background: ${fillSelectedColor};
+    }
+
+    :host([selected]) .positioning-region:hover {
+        background: ${fillHoverSelectedColor};
+    }
+
+    .positioning-region::before {
+        content: '';
+        display: block;
+        width: var(--ni-private-tree-item-nested-width);
+        flex-shrink: 0;
+    }
+
+    .content-region {
+        display: inline-flex;
+        align-items: center;
+        white-space: nowrap;
+        width: 100%;
+        padding-left: 10px;
+        font: inherit;
+        font-size: ${bodyFontSize};
+        user-select: none;
+        position: relative;
+        margin-inline-start: ${iconSize};
+    }
+
+    :host(${focusVisible}) .content-region {
+        outline: none;
+    }
+
+    :host([disabled]) .content-region {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    .expand-collapse-button {
+        background: none;
+        border: none;
+        outline: none;
+        width: ${iconSize};
+        height: ${iconSize};
+        padding: 0px;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        margin-left: 10px;
+        position: absolute;
+    }
+
+    .expand-collapse-button svg {
+        width: ${iconSize};
+        height: ${iconSize};
+        transition: transform 0.2s ease-in;
+        pointer-events: none;
+        fill: currentcolor;
+    }
+
+    ${
+/* this rule keeps children without an icon text aligned with parents */ ''}
+    span[part="start"] {
+        width: ${iconSize};
+    }
 
-            :host([disabled]) .content-region {
-                opacity: 0.5;
-                cursor: not-allowed;
-            }
+    ${
+/* the start class is applied when the corresponding slots is filled */ ''}
+    .start {
+        display: flex;
+        fill: currentcolor;
+        margin-inline-start: ${iconSize};
+        margin-inline-end: ${iconSize};
+    }
+
+    slot[name='start']::slotted(*) {
+        width: ${iconSize};
+        height: ${iconSize};
+    }
+
+    ${
+/*
+Cannot call DesignSystem.tagFor(TreeItem) as this string is evaluated
+before the registration of the element itself; the style is self-referencing.
+Instead styling against the role which is more general and likely a better approach.
+*/ ''}
+    ::slotted([role='treeitem']) {
+        --ni-private-tree-item-nested-width: 1em;
+        --ni-private-expand-collapse-button-nested-width: calc(
+            ${iconSize} * -1
+        );
+    }
+
+    ${ /* the end class is applied when the corresponding slots is filled */''}
+    .end {
+        display: flex;
+        fill: currentcolor;
+        margin-inline-start: ${iconSize};
+    }
+
+    .items {
+        display: none;
+        ${
+/*
+ * this controls the nested indentation (by affecting .positioning-region::before)
+ * it must minimally contain arithmetic with an em and a px value
+ * make it larger or shorter by changing the px value
+ */ ''}
+        font-size: calc(1em + (${iconSize} * 2));
+    }
 
+    :host([expanded]) .items {
+        display: block;
+    }
+`.withBehaviors(new DirectionalStyleSheetBehavior(
+// ltr styles
+css `
             .expand-collapse-button {
-                background: none;
-                border: none;
-                outline: none;
-                width: ${iconSize};
-                height: ${iconSize};
-                padding: 0px;
-                justify-content: center;
-                align-items: center;
-                cursor: pointer;
-                margin-left: 10px;
-                position: absolute;
+                left: var(
+                    --ni-private-expand-collapse-button-nested-width,
+                    calc(${iconSize} * -1)
+                );
             }
 
             .expand-collapse-button svg {
-                width: ${iconSize};
-                height: ${iconSize};
-                transition: transform 0.2s ease-in;
-                pointer-events: none;
-                fill: currentcolor;
-            }
-
-            ${
-/* this rule keeps children without an icon text aligned with parents */ ''}
-            span[part="start"] {
-                width: ${iconSize};
-            }
-
-            ${
-/* the start class is applied when the corresponding slots is filled */ ''}
-            .start {
-                display: flex;
-                fill: currentcolor;
-                margin-inline-start: ${iconSize};
-                margin-inline-end: ${iconSize};
+                transform: rotate(90deg);
             }
 
-            slot[name='start']::slotted(*) {
-                width: ${iconSize};
-                height: ${iconSize};
+            :host([expanded]) .expand-collapse-button svg {
+                transform: rotate(180deg);
             }
-
-            ::slotted(${context.tagFor(TreeItem)}) {
-                --ni-private-tree-item-nested-width: 1em;
-                --ni-private-expand-collapse-button-nested-width: calc(
-                    ${iconSize} * -1
+        `, 
+// rtl styles
+css `
+            .expand-collapse-button {
+                right: var(
+                    --ni-private-expand-collapse-button-nested-width,
+                    calc(${iconSize} * -1)
                 );
             }
 
-            ${
-/* the end class is applied when the corresponding slots is filled */ ''}
-            .end {
-                display: flex;
-                fill: currentcolor;
-                margin-inline-start: ${iconSize};
-            }
-
-            .items {
-                display: none;
-                ${
-/*
- * this controls the nested indentation (by affecting .positioning-region::before)
- * it must minimally contain arithmetic with an em and a px value
- * make it larger or shorter by changing the px value
- */ ''}
-                font-size: calc(1em + (${iconSize} * 2));
+            .expand-collapse-button svg {
+                transform: rotate(180deg);
             }
 
-            :host([expanded]) .items {
-                display: block;
+            :host([expanded]) .expand-collapse-button svg {
+                transform: rotate(135deg);
             }
-        `.withBehaviors(new DirectionalStyleSheetBehavior(
-// ltr styles
-css `
-                    .expand-collapse-button {
-                        left: var(
-                            --ni-private-expand-collapse-button-nested-width,
-                            calc(${iconSize} * -1)
-                        );
-                    }
-
-                    .expand-collapse-button svg {
-                        transform: rotate(90deg);
-                    }
-
-                    :host([expanded]) .expand-collapse-button svg {
-                        transform: rotate(180deg);
-                    }
-                `, 
-// rtl styles
-css `
-                    .expand-collapse-button {
-                        right: var(
-                            --ni-private-expand-collapse-button-nested-width,
-                            calc(${iconSize} * -1)
-                        );
-                    }
-
-                    .expand-collapse-button svg {
-                        transform: rotate(180deg);
-                    }
-
-                    :host([expanded]) .expand-collapse-button svg {
-                        transform: rotate(135deg);
-                    }
-                `));
+        `));
 //# sourceMappingURL=styles.js.map

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,EAAiB,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EACH,OAAO,EAEP,QAAQ,EAEX,MAAM,4BAA4B,CAAC;AACpC,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,EACX,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,6BAA6B,EAAE,MAAM,8BAA8B,CAAC;AAE7E,MAAM,CAAC,MAAM,MAAM,GAA8D,CAAC,OAAO,EAAE,WAAW,EAAE,EAAE,CAAC,GAAG,CAAA;cAChG,OAAO,CAAC,OAAO,CAAC;;;kBAGZ;AACE,yEAAyE,CAAC,EAC9E;+BACe,cAAc;+BACd,cAAc;;;;yBAIpB,aAAa;;;;;cAKxB,CAAA,mCAAoC,EAAE;qBAC/B,sBAAsB;8BACb,gBAAgB;;;;;;8BAMhB,WAAW;+BACV,QAAQ;;;;;;;+BAOR,QAAQ;;;;8BAIT,cAAc;;;qBAGvB,sBAAsB;8BACb,sBAAsB;;;oBAGhC,YAAY;0CACU,WAAW,IAAI,gBAAgB;2BAC9C,WAAW,UAAU,gBAAgB;;;;;8BAKlC,iBAAiB;;;;8BAIjB,sBAAsB;;;;;;;;;;;;;;;;;6BAiBvB,YAAY;;;uCAGF,QAAQ;;;oBAG3B,YAAY;;;;;;;;;;;;;yBAaP,QAAQ;0BACP,QAAQ;;;;;;;;;;yBAUT,QAAQ;0BACP,QAAQ;;;;;;cAMpB;AACE,wEAAwE,CAAC,EAC7E;;yBAEa,QAAQ;;;cAGnB;AACE,uEAAuE,CAAC,EAC5E;;;;uCAI2B,QAAQ;qCACV,QAAQ;;;;yBAIpB,QAAQ;0BACP,QAAQ;;;wBAGV,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC;;;sBAG1B,QAAQ;;;;cAIhB;AACE,qEAAqE,CAAC,EAC1E;;;;uCAI2B,QAAQ;;;;;kBAK7B;AACE;;;;GAIG,CAAC,EACR;yCACyB,QAAQ;;;;;;SAMxC,CAAC,aAAa,CACX,IAAI,6BAA6B;AAC7B,aAAa;AACb,GAAG,CAAA;;;;mCAIgB,QAAQ;;;;;;;;;;;iBAW1B;AACD,aAAa;AACb,GAAG,CAAA;;;;mCAIgB,QAAQ;;;;;;;;;;;iBAW1B,CACJ,CACJ,CAAC"}
+{"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,EACX,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,6BAA6B,EAAE,MAAM,8BAA8B,CAAC;AAE7E,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;UAGZ;AACE,yEAAyE,CAAC,EAC9E;uBACe,cAAc;uBACd,cAAc;;;;iBAIpB,aAAa;;;;;MAKxB,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;;;;;;;;;;;;;;;;;qBAiBvB,YAAY;;;+BAGF,QAAQ;;;YAG3B,YAAY;;;;;;;;;;;;;iBAaP,QAAQ;kBACP,QAAQ;;;;;;;;;;iBAUT,QAAQ;kBACP,QAAQ;;;;;;MAMpB;AACE,wEAAwE,CAAC,EAC7E;;iBAEa,QAAQ;;;MAGnB;AACE,uEAAuE,CAAC,EAC5E;;;;+BAI2B,QAAQ;6BACV,QAAQ;;;;iBAIpB,QAAQ;kBACP,QAAQ;;;MAGpB;AACE;;;;EAIF,CAAC,EACH;;;;cAIU,QAAQ;;;;MAIhB,CAAA,qEAAsE,EAAE;;;;+BAI/C,QAAQ;;;;;UAK7B;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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "11.15.1",
+  "version": "12.0.1",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",
@@ -50,7 +50,7 @@
     "@microsoft/fast-element": "^1.10.1",
     "@microsoft/fast-foundation": "^2.46.11",
     "@microsoft/fast-web-utilities": "^5.4.1",
-    "@ni/nimble-tokens": "^4.1.0",
+    "@ni/nimble-tokens": "^4.1.1",
     "hex-rgb": "^5.0.0",
     "tslib": "^2.2.0"
   },