@ni/nimble-components 1.0.0-beta.81 → 1.0.0-beta.85

package/dist/esm/menu/index.d.ts

@@ -3,13 +3,3 @@ import { Menu as FoundationMenu } from '@microsoft/fast-foundation';
  * A nimble-styled menu
  */
 export { FoundationMenu as Menu };
-/**
- * A function that returns a nimble-menu registration for configuring the component with a DesignSystem.
- * Implements {@link @microsoft/fast-foundation#menuTemplate}
- *
- * @public
- * @remarks
- * Generates HTML Element: \<nimble-menu\>
- *
- */
-export declare const nimbleMenu: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof FoundationMenu>;

package/dist/esm/menu/index.js

@@ -13,7 +13,7 @@ export { FoundationMenu as Menu };
  * Generates HTML Element: \<nimble-menu\>
  *
  */
-export const nimbleMenu = FoundationMenu.compose({
+const nimbleMenu = FoundationMenu.compose({
     baseName: 'menu',
     template,
     styles

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,IAAI,IAAI,cAAc,EACtB,YAAY,IAAI,QAAQ,EAC3B,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC;;GAEG;AACH,OAAO,EAAE,cAAc,IAAI,IAAI,EAAE,CAAC;AAElC;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,cAAc,CAAC,OAAO,CAAC;IAC7C,QAAQ,EAAE,MAAM;IAChB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,IAAI,IAAI,cAAc,EACtB,YAAY,IAAI,QAAQ,EAC3B,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC;;GAEG;AACH,OAAO,EAAE,cAAc,IAAI,IAAI,EAAE,CAAC;AAElC;;;;;;;;GAQG;AACH,MAAM,UAAU,GAAG,cAAc,CAAC,OAAO,CAAC;IACtC,QAAQ,EAAE,MAAM;IAChB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC"}

package/dist/esm/menu/styles.js

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { applicationBackgroundColor, borderWidth, borderColor, popupBorderColor, popupBoxShadowColor } from '../theme-provider/design-tokens';
+import { applicationBackgroundColor, borderWidth, borderColor, popupBorderColor, popupBoxShadowColor, labelFontFamily, labelFontSize, labelHeight, labelTextTransform, labelFontColor } from '../theme-provider/design-tokens';
 export const styles = css `
     ${display('grid')}
     :host {
@@ -12,6 +12,10 @@ export const styles = css `
         width: max-content;
         box-shadow: 0px 2px 3px ${popupBoxShadowColor};
     }
+    ::slotted(*) {
+        padding-left: 8px;
+        padding-right: 8px;
+    }
     ::slotted(hr) {
         box-sizing: content-box;
         height: 2px;
@@ -20,5 +24,15 @@ export const styles = css `
         background: ${borderColor};
         opacity: 0.1;
     }
+    ::slotted(header) {
+        display: flex;
+        font-family: ${labelFontFamily};
+        font-size: ${labelFontSize};
+        line-height: ${labelHeight};
+        color: ${labelFontColor};
+        text-transform: ${labelTextTransform};
+        padding-top: 4px;
+        padding-bottom: 4px;
+    }
 `;
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/menu/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,WAAW,EACX,gBAAgB,EAChB,mBAAmB,EACtB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;sBAEC,0BAA0B;kBAC9B,WAAW,UAAU,gBAAgB;;;;;kCAKrB,mBAAmB;;;;;;;sBAO/B,WAAW;;;CAGhC,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/menu/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,WAAW,EACX,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,aAAa,EACb,WAAW,EACX,kBAAkB,EAClB,cAAc,EACjB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;sBAEC,0BAA0B;kBAC9B,WAAW,UAAU,gBAAgB;;;;;kCAKrB,mBAAmB;;;;;;;;;;;sBAW/B,WAAW;;;;;uBAKV,eAAe;qBACjB,aAAa;uBACX,WAAW;iBACjB,cAAc;0BACL,kBAAkB;;;;CAI3C,CAAC"}

package/dist/esm/menu/tests/menu-matrix.stories.d.ts

@@ -1,5 +1,6 @@
 import type { Story, Meta } from '@storybook/html';
 import '../index';
+import '../../icons/admin';
 declare const metadata: Meta;
 export default metadata;
 export declare const menuThemeMatrix: Story;

package/dist/esm/menu/tests/menu-matrix.stories.js

@@ -1,10 +1,9 @@
 import { html, when } from '@microsoft/fast-element';
-import { admin16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
 import { withXD } from 'storybook-addon-xd-designs';
 import { createRenderer } from '../../tests/utilities/storybook-test-helpers';
-import { createMatrix, themeWrapper } from '../../tests/utilities/theme-test-helpers';
+import { createMatrix, iconVisibleStates, themeWrapper } from '../../tests/utilities/theme-test-helpers';
 import '../index';
-const menuIconStates = [false, true];
+import '../../icons/admin';
 const metadata = {
     title: 'Tests/Menu',
     decorators: [withXD],
@@ -20,12 +19,13 @@ export default metadata;
 const component = (icon) => html `
     <span style="padding: 15px; display:inline-flex;">
         <nimble-menu>
+            <header>Header</header>
             <nimble-menu-item>Item 1</nimble-menu-item>
             <hr>
             <nimble-menu-item disabled>Item 2</nimble-menu-item>
-            <nimble-menu-item>${when(() => icon, html `<div slot="start">${admin16X16.data}</div>`)}Item 3</nimble-menu-item>
+            <nimble-menu-item>${when(() => icon, html `<nimble-admin-icon></nimble-admin-icon>`)}Item 3</nimble-menu-item>
         </nimble-menu>
     </span>
 `;
-export const menuThemeMatrix = createRenderer(themeWrapper(createMatrix(component, [menuIconStates])));
+export const menuThemeMatrix = createRenderer(themeWrapper(createMatrix(component, [iconVisibleStates])));
 //# sourceMappingURL=menu-matrix.stories.js.map

package/dist/esm/menu/tests/menu-matrix.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-matrix.stories.js","sourceRoot":"","sources":["../../../../src/menu/tests/menu-matrix.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAgB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,sDAAsD,CAAC;AAElF,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,8CAA8C,CAAC;AAC9E,OAAO,EACH,YAAY,EACZ,YAAY,EACf,MAAM,0CAA0C,CAAC;AAClD,OAAO,UAAU,CAAC;AAMlB,MAAM,cAAc,GAAoB,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;AAEtD,MAAM,QAAQ,GAAS;IACnB,KAAK,EAAE,YAAY;IACnB,UAAU,EAAE,CAAC,MAAM,CAAC;IACpB,UAAU,EAAE;QACR,MAAM,EAAE;YACJ,WAAW,EACP,uHAAuH;SAC9H;QACD,QAAQ,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE;KAC5C;CACJ,CAAC;AAEF,eAAe,QAAQ,CAAC;AAExB,kBAAkB;AAClB,MAAM,SAAS,GAAG,CACd,IAAmB,EACP,EAAE,CAAC,IAAI,CAAA;;;;;;gCAMS,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,EAAE,IAAI,CAAA,qBAAqB,UAAU,CAAC,IAAI,QAAQ,CAAC;;;CAGjG,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAU,cAAc,CAChD,YAAY,CAAC,YAAY,CAAC,SAAS,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,CAC1D,CAAC"}
+{"version":3,"file":"menu-matrix.stories.js","sourceRoot":"","sources":["../../../../src/menu/tests/menu-matrix.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAgB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,8CAA8C,CAAC;AAC9E,OAAO,EACH,YAAY,EAEZ,iBAAiB,EACjB,YAAY,EACf,MAAM,0CAA0C,CAAC;AAClD,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAE3B,MAAM,QAAQ,GAAS;IACnB,KAAK,EAAE,YAAY;IACnB,UAAU,EAAE,CAAC,MAAM,CAAC;IACpB,UAAU,EAAE;QACR,MAAM,EAAE;YACJ,WAAW,EACP,uHAAuH;SAC9H;QACD,QAAQ,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE;KAC5C;CACJ,CAAC;AAEF,eAAe,QAAQ,CAAC;AAExB,kBAAkB;AAClB,MAAM,SAAS,GAAG,CACd,IAAsB,EACV,EAAE,CAAC,IAAI,CAAA;;;;;;;gCAOS,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,EAAE,IAAI,CAAA,yCAAyC,CAAC;;;CAG9F,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAU,cAAc,CAChD,YAAY,CAAC,YAAY,CAAC,SAAS,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAC7D,CAAC"}

package/dist/esm/menu/tests/menu.stories.d.ts

@@ -1,14 +1,18 @@
 import type { Story, Meta } from '@storybook/html';
 import '../index';
 import '../../menu-item/index';
+import '../../icons/admin';
+import '../../icons/logout';
 interface MenuArgs {
-    options: ItemArgs[];
+    itemOptions: ItemArgs[];
 }
 interface ItemArgs {
     text: string;
     disabled: boolean;
     icon: boolean;
+    type: 'nimble-menu-item' | 'header' | 'hr';
 }
 declare const metadata: Meta<MenuArgs>;
 export default metadata;
-export declare const menu: Story;
+export declare const menu: Story<MenuArgs>;
+export declare const customMenu: Story;

package/dist/esm/menu/tests/menu.stories.js

@@ -1,9 +1,10 @@
 import { withXD } from 'storybook-addon-xd-designs';
+import { html, repeat, when } from '@microsoft/fast-element';
 import '../index';
 import '../../menu-item/index';
-import { admin16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
-import { html, repeat, when } from '@microsoft/fast-element';
 import { createRenderer } from '../../tests/utilities/storybook-test-helpers';
+import '../../icons/admin';
+import '../../icons/logout';
 const metadata = {
     title: 'Menu',
     decorators: [withXD],
@@ -14,38 +15,101 @@ const metadata = {
         actions: {
             handles: ['change']
         }
-    },
+    }
+};
+export default metadata;
+export const menu = {
     // prettier-ignore
     render: createRenderer(html `
         <nimble-menu>
-            ${repeat(x => x.options, html `
-                <nimble-menu-item ?disabled="${x => x.disabled}">
-                    ${when(x => x.icon, html `<div slot="start">${admin16X16.data}</div>`)}
-                    ${x => x.text}
-                </nimble-menu-item>
+            ${repeat(x => x.itemOptions, html `
+                ${when(x => x.type === 'nimble-menu-item', html `
+                    <nimble-menu-item ?disabled="${x => x.disabled}">
+                        ${when(x => x.icon, html `<nimble-admin-icon></nimble-admin-icon>`)}
+                        ${x => x.text}
+                    </nimble-menu-item>
+                `)}
+                ${when(x => x.type === 'header', html `
+                    <header>
+                        ${x => x.text}
+                    </header>
+                `)}
+                ${when(x => x.type === 'hr', html `
+                    <hr>
+                `)}
             `)}
         </nimble-menu>
         `),
     args: {
-        options: [
+        itemOptions: [
+            {
+                text: 'Header 1',
+                disabled: false,
+                icon: false,
+                type: 'header'
+            },
             {
                 text: 'Item 1',
                 disabled: false,
-                icon: false
+                icon: false,
+                type: 'nimble-menu-item'
             },
             {
                 text: 'Item 2',
                 disabled: false,
-                icon: false
+                icon: false,
+                type: 'nimble-menu-item'
             },
             {
                 text: 'Item 3',
                 disabled: false,
-                icon: false
+                icon: false,
+                type: 'nimble-menu-item'
+            },
+            {
+                text: 'Divider',
+                disabled: false,
+                icon: false,
+                type: 'hr'
+            },
+            {
+                text: 'Header 2',
+                disabled: false,
+                icon: false,
+                type: 'header'
+            },
+            {
+                text: 'Item 4',
+                disabled: false,
+                icon: false,
+                type: 'nimble-menu-item'
+            },
+            {
+                text: 'Item 5',
+                disabled: false,
+                icon: false,
+                type: 'nimble-menu-item'
+            },
+            {
+                text: 'Item 6',
+                disabled: false,
+                icon: false,
+                type: 'nimble-menu-item'
             }
         ]
     }
 };
-export default metadata;
-export const menu = {};
+export const customMenu = {
+    // prettier-ignore
+    render: createRenderer(html `
+        <nimble-menu>
+            <div style="display: grid; font-family: Source Sans Pro; font-size: 11px;">
+                <div style="font-weight: bold; color: black;">lvadmin User</div>
+                <div style="color: gray;">lvadmin</div>
+            </div>
+            <nimble-menu-item><nimble-admin-icon></nimble-admin-icon>Account</nimble-menu-item>
+            <nimble-menu-item><nimble-logout-icon></nimble-logout-icon>Log out</nimble-menu-item>
+        </nimble-menu>
+    `)
+};
 //# sourceMappingURL=menu.stories.js.map

package/dist/esm/menu/tests/menu.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.stories.js","sourceRoot":"","sources":["../../../../src/menu/tests/menu.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,UAAU,CAAC;AAClB,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sDAAsD,CAAC;AAClF,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,8CAA8C,CAAC;AAY9E,MAAM,QAAQ,GAAmB;IAC7B,KAAK,EAAE,MAAM;IACb,UAAU,EAAE,CAAC,MAAM,CAAC;IACpB,UAAU,EAAE;QACR,MAAM,EAAE;YACJ,WAAW,EACP,uHAAuH;SAC9H;QACD,OAAO,EAAE;YACL,OAAO,EAAE,CAAC,QAAQ,CAAC;SACtB;KACJ;IACD,kBAAkB;IAClB,MAAM,EAAE,cAAc,CAAW,IAAI,CAAA;;cAE3B,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,IAAI,CAAU;+CACJ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;sBACxC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,CAAA,qBAAqB,UAAU,CAAC,IAAI,QAAQ,CAAC;sBACnE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;;aAEpB,CAAC;;SAEL,CAAC;IACN,IAAI,EAAE;QACF,OAAO,EAAE;YACL;gBACI,IAAI,EAAE,QAAQ;gBACd,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,KAAK;aACd;YACD;gBACI,IAAI,EAAE,QAAQ;gBACd,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,KAAK;aACd;YACD;gBACI,IAAI,EAAE,QAAQ;gBACd,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,KAAK;aACd;SACJ;KACJ;CACJ,CAAC;AAEF,eAAe,QAAQ,CAAC;AAExB,MAAM,CAAC,MAAM,IAAI,GAAU,EAAE,CAAC"}
+{"version":3,"file":"menu.stories.js","sourceRoot":"","sources":["../../../../src/menu/tests/menu.stories.ts"],"names":[],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import { focusVisible } from '../utilities/style/focus';
-import { controlHeight, fontFamily, contentFontSize, fillColorSelected, fillColorHover, contentFontColor, borderColorHover, borderWidth, contentFontColorDisabled, iconSize } from '../theme-provider/design-tokens';
+import { controlHeight, fontFamily, contentFontSize, fillColorSelected, fillColorHover, contentFontColor, borderColorHover, contentFontColorDisabled, iconSize } from '../theme-provider/design-tokens';
 export const styles = css `
     ${display('grid')}
     :host {
@@ -24,8 +24,7 @@ export const styles = css `
         font-size: ${contentFontSize};
     }
     :host(${focusVisible}) {
-        box-shadow: 0px 0px 0px ${borderWidth} ${borderColorHover} inset;
-        outline: ${borderWidth} solid ${borderColorHover};
+        outline: 2px solid ${borderColorHover};
         outline-offset: -2px;
     }
     :host(:hover) {

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/menu-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,aAAa,EACb,UAAU,EACV,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,WAAW,EACX,wBAAwB,EACxB,QAAQ,EACX,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;kBAKH,aAAa;;;;;;;;;iBASd,gBAAgB;;;uBAGV,UAAU;qBACZ,eAAe;;YAExB,YAAY;kCACU,WAAW,IAAI,gBAAgB;mBAC9C,WAAW,UAAU,gBAAgB;;;;sBAIlC,cAAc;;;sBAGd,iBAAiB;;;iBAGtB,wBAAwB;;;;;;;;iCAQR,QAAQ;;;;;;;;iBAQxB,QAAQ;kBACP,QAAQ;;;;;;;;CAQzB,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/menu-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,aAAa,EACb,UAAU,EACV,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,wBAAwB,EACxB,QAAQ,EACX,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;kBAKH,aAAa;;;;;;;;;iBASd,gBAAgB;;;uBAGV,UAAU;qBACZ,eAAe;;YAExB,YAAY;6BACK,gBAAgB;;;;sBAIvB,cAAc;;;sBAGd,iBAAiB;;;iBAGtB,wBAAwB;;;;;;;;iCAQR,QAAQ;;;;;;;;iBAQxB,QAAQ;kBACP,QAAQ;;;;;;;;CAQzB,CAAC"}

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

@@ -16,8 +16,8 @@ const nimbleNumberField = FoundationNumberField.compose({
     shadowOptions: {
         delegatesFocus: true
     },
-    stepDownGlyph: `${controlsArrowExpanderDown16X16.data}`,
-    stepUpGlyph: `${controlsArrowExpanderUp16X16.data}`
+    stepDownGlyph: controlsArrowExpanderDown16X16.data,
+    stepUpGlyph: controlsArrowExpanderUp16X16.data
 });
 DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/number-field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,WAAW,IAAI,qBAAqB,EAEpC,mBAAmB,IAAI,QAAQ,EAClC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACH,8BAA8B,EAC9B,4BAA4B,EAC/B,MAAM,sDAAsD,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AASlC;;;;;;;GAOG;AACH,MAAM,iBAAiB,GAAG,qBAAqB,CAAC,OAAO,CAAqB;IACxE,QAAQ,EAAE,cAAc;IACxB,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;IACD,aAAa,EAAE,GAAG,8BAA8B,CAAC,IAAI,EAAE;IACvD,WAAW,EAAE,GAAG,4BAA4B,CAAC,IAAI,EAAE;CACtD,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/number-field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,WAAW,IAAI,qBAAqB,EAEpC,mBAAmB,IAAI,QAAQ,EAClC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACH,8BAA8B,EAC9B,4BAA4B,EAC/B,MAAM,sDAAsD,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AASlC;;;;;;;GAOG;AACH,MAAM,iBAAiB,GAAG,qBAAqB,CAAC,OAAO,CAAqB;IACxE,QAAQ,EAAE,cAAc;IACxB,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;IACD,aAAa,EAAE,8BAA8B,CAAC,IAAI;IAClD,WAAW,EAAE,4BAA4B,CAAC,IAAI;CACjD,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAC"}

package/dist/esm/tab/index.d.ts

@@ -1,3 +1,2 @@
 import { Tab } from '@microsoft/fast-foundation';
 export type { Tab };
-export declare const nimbleTab: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof Tab>;

package/dist/esm/tab/index.js

@@ -1,6 +1,6 @@
 import { DesignSystem, Tab, tabTemplate as template } from '@microsoft/fast-foundation';
 import { styles } from './styles';
-export const nimbleTab = Tab.compose({
+const nimbleTab = Tab.compose({
     baseName: 'tab',
     template,
     styles

package/dist/esm/tab/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tab/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,GAAG,EACH,WAAW,IAAI,QAAQ,EAC1B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIlC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO,CAAC;IACjC,QAAQ,EAAE,KAAK;IACf,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tab/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,GAAG,EACH,WAAW,IAAI,QAAQ,EAC1B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIlC,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO,CAAC;IAC1B,QAAQ,EAAE,KAAK;IACf,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAC"}

package/dist/esm/tab-panel/index.d.ts

@@ -1,3 +1,2 @@
 import { TabPanel } from '@microsoft/fast-foundation';
 export type { TabPanel };
-export declare const nimbleTabPanel: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof TabPanel>;

package/dist/esm/tab-panel/index.js

@@ -1,6 +1,6 @@
 import { DesignSystem, TabPanel, tabPanelTemplate as template } from '@microsoft/fast-foundation';
 import { styles } from './styles';
-export const nimbleTabPanel = TabPanel.compose({
+const nimbleTabPanel = TabPanel.compose({
     baseName: 'tab-panel',
     template,
     styles

package/dist/esm/tab-panel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tab-panel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,QAAQ,EACR,gBAAgB,IAAI,QAAQ,EAC/B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIlC,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC;IAC3C,QAAQ,EAAE,WAAW;IACrB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tab-panel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,QAAQ,EACR,gBAAgB,IAAI,QAAQ,EAC/B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIlC,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC;IACpC,QAAQ,EAAE,WAAW;IACrB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC"}

package/dist/esm/tabs/index.d.ts

@@ -1,5 +1,2 @@
 import { Tabs } from '@microsoft/fast-foundation';
-export * from '../tab';
-export * from '../tab-panel';
-export * from '../tabs-toolbar';
 export type { Tabs };

package/dist/esm/tabs/index.js

@@ -1,14 +1,9 @@
-import { html } from '@microsoft/fast-element';
 import { DesignSystem, Tabs, tabsTemplate as template } from '@microsoft/fast-foundation';
 import { styles } from './styles';
-export * from '../tab';
-export * from '../tab-panel';
-export * from '../tabs-toolbar';
 const nimbleTabs = Tabs.compose({
     baseName: 'tabs',
     template,
-    styles,
-    end: html `<slot name="toolbar"></slot>`
+    styles
 });
 DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabs());
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,YAAY,EACZ,IAAI,EAEJ,YAAY,IAAI,QAAQ,EAC3B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAIhC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAc;IACzC,QAAQ,EAAE,MAAM;IAChB,QAAQ;IACR,MAAM;IACN,GAAG,EAAE,IAAI,CAAA,8BAA8B;CAC1C,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,IAAI,EAEJ,YAAY,IAAI,QAAQ,EAC3B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIlC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAc;IACzC,QAAQ,EAAE,MAAM;IAChB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC"}

package/dist/esm/tabs/tests/tabs-matrix.stories.d.ts

@@ -1,5 +1,8 @@
 import type { Meta, Story } from '@storybook/html';
 import '../index';
+import '../../tab';
+import '../../tab-panel';
+import '../../tabs-toolbar';
 import '../../button';
 declare const metadata: Meta;
 export default metadata;

package/dist/esm/tabs/tests/tabs-matrix.stories.js

@@ -3,6 +3,9 @@ import { html, when } from '@microsoft/fast-element';
 import { createRenderer } from '../../tests/utilities/storybook-test-helpers';
 import { disabledStates, createMatrix, themeWrapper } from '../../tests/utilities/theme-test-helpers';
 import '../index';
+import '../../tab';
+import '../../tab-panel';
+import '../../tabs-toolbar';
 import '../../button';
 const metadata = {
     title: 'Tests/Tabs',

package/dist/esm/tabs/tests/tabs-matrix.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-matrix.stories.js","sourceRoot":"","sources":["../../../../src/tabs/tests/tabs-matrix.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAgB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,8CAA8C,CAAC;AAC9E,OAAO,EAEH,cAAc,EACd,YAAY,EACZ,YAAY,EACf,MAAM,0CAA0C,CAAC;AAClD,OAAO,UAAU,CAAC;AAClB,OAAO,cAAc,CAAC;AAEtB,MAAM,QAAQ,GAAS;IACnB,KAAK,EAAE,YAAY;IACnB,UAAU,EAAE,CAAC,MAAM,CAAC;IACpB,UAAU,EAAE;QACR,MAAM,EAAE;YACJ,WAAW,EACP,uHAAuH;SAC9H;QACD,QAAQ,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE;KAC5C;CACJ,CAAC;AAEF,eAAe,QAAQ,CAAC;AAGxB,MAAM,gBAAgB,GAAuB,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;AAE3D,kBAAkB;AAClB,MAAM,SAAS,GAAG,CACd,OAAyB,EACzB,CAAC,YAAY,EAAE,QAAQ,CAAgB,EAC3B,EAAE,CAAC,IAAI,CAAA;;UAEb,IAAI,CAAC,GAAG,EAAE,CAAC,OAAO,EAAE,IAAI,CAAA;;;;SAIzB,CAAC;;iCAEuB,GAAG,EAAE,CAAC,QAAQ;sBACzB,GAAG,EAAE,CAAC,YAAY;;;;;CAKvC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAU,cAAc,CAChD,YAAY,CAAC,YAAY,CAAC,SAAS,EAAE,CAAC,gBAAgB,EAAE,cAAc,CAAC,CAAC,CAAC,CAC5E,CAAC"}
+{"version":3,"file":"tabs-matrix.stories.js","sourceRoot":"","sources":["../../../../src/tabs/tests/tabs-matrix.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAgB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,8CAA8C,CAAC;AAC9E,OAAO,EAEH,cAAc,EACd,YAAY,EACZ,YAAY,EACf,MAAM,0CAA0C,CAAC;AAClD,OAAO,UAAU,CAAC;AAClB,OAAO,WAAW,CAAC;AACnB,OAAO,iBAAiB,CAAC;AACzB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,cAAc,CAAC;AAEtB,MAAM,QAAQ,GAAS;IACnB,KAAK,EAAE,YAAY;IACnB,UAAU,EAAE,CAAC,MAAM,CAAC;IACpB,UAAU,EAAE;QACR,MAAM,EAAE;YACJ,WAAW,EACP,uHAAuH;SAC9H;QACD,QAAQ,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE;KAC5C;CACJ,CAAC;AAEF,eAAe,QAAQ,CAAC;AAGxB,MAAM,gBAAgB,GAAuB,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;AAE3D,kBAAkB;AAClB,MAAM,SAAS,GAAG,CACd,OAAyB,EACzB,CAAC,YAAY,EAAE,QAAQ,CAAgB,EAC3B,EAAE,CAAC,IAAI,CAAA;;UAEb,IAAI,CAAC,GAAG,EAAE,CAAC,OAAO,EAAE,IAAI,CAAA;;;;SAIzB,CAAC;;iCAEuB,GAAG,EAAE,CAAC,QAAQ;sBACzB,GAAG,EAAE,CAAC,YAAY;;;;;CAKvC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAU,cAAc,CAChD,YAAY,CAAC,YAAY,CAAC,SAAS,EAAE,CAAC,gBAAgB,EAAE,cAAc,CAAC,CAAC,CAAC,CAC5E,CAAC"}

package/dist/esm/tabs/tests/tabs.stories.d.ts

@@ -1,6 +1,9 @@
 import type { Meta, Story } from '@storybook/html';
-import '../../button';
 import '../index';
+import '../../tab';
+import '../../tab-panel';
+import '../../tabs-toolbar';
+import '../../button';
 interface TabsArgs {
     tabs: TabArgs[];
     toolbar: string;

package/dist/esm/tabs/tests/tabs.stories.js

@@ -1,8 +1,11 @@
 import { html, repeat, when } from '@microsoft/fast-element';
 import { withXD } from 'storybook-addon-xd-designs';
-import '../../button';
 import { createRenderer } from '../../tests/utilities/storybook-test-helpers';
 import '../index';
+import '../../tab';
+import '../../tab-panel';
+import '../../tabs-toolbar';
+import '../../button';
 const metadata = {
     title: 'Tabs',
     decorators: [withXD],

package/dist/esm/tabs/tests/tabs.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.stories.js","sourceRoot":"","sources":["../../../../src/tabs/tests/tabs.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,cAAc,EAAE,MAAM,8CAA8C,CAAC;AAC9E,OAAO,UAAU,CAAC;AAalB,MAAM,QAAQ,GAAmB;IAC7B,KAAK,EAAE,MAAM;IACb,UAAU,EAAE,CAAC,MAAM,CAAC;IACpB,UAAU,EAAE;QACR,MAAM,EAAE;YACJ,WAAW,EACP,uHAAuH;SAC9H;KACJ;IACD,kBAAkB;IAClB,MAAM,EAAE,cAAc,CAAC,IAAI,CAAA;;cAEjB,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,IAAI,CAAU,oCAAoC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,0BAA0B,CAAC;cAChH,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,CAAS;yCACN,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;aAC5D,CAAC;cACA,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,CAAS;oCACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;aACrC,CAAC;;KAET,CAAC;IACF,IAAI,EAAE;QACF,IAAI,EAAE;YACF;gBACI,KAAK,EAAE,SAAS;gBAChB,OAAO,EAAE,0BAA0B;gBACnC,QAAQ,EAAE,KAAK;aAClB;YACD;gBACI,KAAK,EAAE,SAAS;gBAChB,OAAO,EAAE,2BAA2B;gBACpC,QAAQ,EAAE,KAAK;aAClB;YACD;gBACI,KAAK,EAAE,WAAW;gBAClB,OAAO,EAAE,0BAA0B;gBACnC,QAAQ,EAAE,KAAK;aAClB;SACJ;KACJ;CACJ,CAAC;AAEF,eAAe,QAAQ,CAAC;AAExB,MAAM,CAAC,MAAM,IAAI,GAAoB,EAAE,CAAC;AAExC,MAAM,CAAC,MAAM,OAAO,GAAoB;IACpC,IAAI,EAAE;QACF,OAAO,EACH,kEAAkE;KACzE;CACJ,CAAC"}
+{"version":3,"file":"tabs.stories.js","sourceRoot":"","sources":["../../../../src/tabs/tests/tabs.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,8CAA8C,CAAC;AAC9E,OAAO,UAAU,CAAC;AAClB,OAAO,WAAW,CAAC;AACnB,OAAO,iBAAiB,CAAC;AACzB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,cAAc,CAAC;AAatB,MAAM,QAAQ,GAAmB;IAC7B,KAAK,EAAE,MAAM;IACb,UAAU,EAAE,CAAC,MAAM,CAAC;IACpB,UAAU,EAAE;QACR,MAAM,EAAE;YACJ,WAAW,EACP,uHAAuH;SAC9H;KACJ;IACD,kBAAkB;IAClB,MAAM,EAAE,cAAc,CAAC,IAAI,CAAA;;cAEjB,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,IAAI,CAAU,oCAAoC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,0BAA0B,CAAC;cAChH,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,CAAS;yCACN,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;aAC5D,CAAC;cACA,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,CAAS;oCACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;aACrC,CAAC;;KAET,CAAC;IACF,IAAI,EAAE;QACF,IAAI,EAAE;YACF;gBACI,KAAK,EAAE,SAAS;gBAChB,OAAO,EAAE,0BAA0B;gBACnC,QAAQ,EAAE,KAAK;aAClB;YACD;gBACI,KAAK,EAAE,SAAS;gBAChB,OAAO,EAAE,2BAA2B;gBACpC,QAAQ,EAAE,KAAK;aAClB;YACD;gBACI,KAAK,EAAE,WAAW;gBAClB,OAAO,EAAE,0BAA0B;gBACnC,QAAQ,EAAE,KAAK;aAClB;SACJ;KACJ;CACJ,CAAC;AAEF,eAAe,QAAQ,CAAC;AAExB,MAAM,CAAC,MAAM,IAAI,GAAoB,EAAE,CAAC;AAExC,MAAM,CAAC,MAAM,OAAO,GAAoB;IACpC,IAAI,EAAE;QACF,OAAO,EACH,kEAAkE;KACzE;CACJ,CAAC"}

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

@@ -1,6 +1,6 @@
 import { html } from '@microsoft/fast-element';
 export const template = html `
-    <template slot="toolbar">
+    <template slot="end">
         <div class="separator"></div>
         <slot></slot>
     </template>

package/dist/esm/tests/utilities/theme-test-helpers.d.ts

@@ -1,18 +1,19 @@
 import { ViewTemplate } from '@microsoft/fast-element';
 import { NimbleTheme } from '../../theme-provider/themes';
-export declare const backgrounds: {
+export interface BackgroundState {
     name: string;
     value: string;
     theme: NimbleTheme;
-}[];
+}
+export declare const backgroundStates: BackgroundState[];
 export declare type DisabledState = [string, boolean];
 export declare const disabledStates: DisabledState[];
 export declare type InvalidState = [string, string];
 export declare const invalidStates: InvalidState[];
 export declare type ReadOnlyState = [string, boolean];
 export declare const readOnlyStates: ReadOnlyState[];
-export declare type IconState = ViewTemplate;
-export declare const iconStates: ViewTemplate[];
+export declare type IconVisibleState = boolean;
+export declare const iconVisibleStates: IconVisibleState[];
 export declare type ExpandedState = [string, boolean];
 export declare const expandedStates: ExpandedState[];
 export declare type SelectedState = [string, boolean];

package/dist/esm/tests/utilities/theme-test-helpers.js

@@ -1,7 +1,6 @@
 import { html, repeat } from '@microsoft/fast-element';
-import { controlsSearch16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
 import { NimbleTheme } from '../../theme-provider/themes';
-export const backgrounds = [
+export const backgroundStates = [
     {
         name: `"${NimbleTheme.Light}" theme on white`,
         value: '#F4F4F4',
@@ -40,12 +39,7 @@ export const readOnlyStates = [
     ['', false],
     ['Read-Only', true]
 ];
-export const iconStates = [
-    // An empty template requires a space to prevent errors
-    // prettier-ignore
-    html ` `,
-    html `<div slot="icon">${controlsSearch16X16.data}</div>`
-];
+export const iconVisibleStates = [false, true];
 export const expandedStates = [
     ['Collapsed', false],
     ['Expanded', true]
@@ -78,14 +72,11 @@ export function createMatrix(component, dimensions) {
 /**
  * Wraps a given component template with a region for each of the available themes.
  */
-// prettier-ignore
-export const themeWrapper = (template) => html `
-    ${repeat(() => backgrounds, html `
-    <nimble-theme-provider theme="${x => x.theme}">
-        <div style="background-color: ${x => x.value}; padding:20px;">
-            ${template}
-        </div>
-    </nimble-theme-provider>
-    `)}
-`;
+export const themeWrapper = (template) => createMatrix(({ theme, value }) => html `
+            <nimble-theme-provider theme="${theme}">
+                <div style="background-color: ${value}; padding:20px;">
+                    ${template}
+                </div>
+            </nimble-theme-provider>
+        `, [backgroundStates]);
 //# sourceMappingURL=theme-test-helpers.js.map

package/dist/esm/tests/utilities/theme-test-helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-test-helpers.js","sourceRoot":"","sources":["../../../../src/tests/utilities/theme-test-helpers.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"theme-test-helpers.js","sourceRoot":"","sources":["../../../../src/tests/utilities/theme-test-helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAgB,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAQ1D,MAAM,CAAC,MAAM,gBAAgB,GAAsB;IAC/C;QACI,IAAI,EAAE,IAAI,WAAW,CAAC,KAAK,kBAAkB;QAC7C,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,WAAW,CAAC,KAAK;KAC3B;IACD;QACI,IAAI,EAAE,IAAI,WAAW,CAAC,KAAK,kBAAkB;QAC7C,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,WAAW,CAAC,KAAK;KAC3B;IACD;QACI,IAAI,EAAE,IAAI,WAAW,CAAC,KAAK,uBAAuB;QAClD,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,WAAW,CAAC,KAAK;KAC3B;IACD;QACI,IAAI,EAAE,IAAI,WAAW,CAAC,IAAI,kBAAkB;QAC5C,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,WAAW,CAAC,IAAI;KAC1B;IACD;QACI,IAAI,EAAE,IAAI,WAAW,CAAC,UAAU,kBAAkB;QAClD,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,WAAW,CAAC,UAAU;KAChC;CACJ,CAAC;AAGF,MAAM,CAAC,MAAM,cAAc,GAAoB;IAC3C,CAAC,EAAE,EAAE,KAAK,CAAC;IACX,CAAC,UAAU,EAAE,IAAI,CAAC;CACrB,CAAC;AAGF,MAAM,CAAC,MAAM,aAAa,GAAmB;IACzC,CAAC,EAAE,EAAE,EAAE,CAAC;IACR,CAAC,SAAS,EAAE,SAAS,CAAC;CACzB,CAAC;AAGF,MAAM,CAAC,MAAM,cAAc,GAAoB;IAC3C,CAAC,EAAE,EAAE,KAAK,CAAC;IACX,CAAC,WAAW,EAAE,IAAI,CAAC;CACtB,CAAC;AAGF,MAAM,CAAC,MAAM,iBAAiB,GAAuB,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;AAGnE,MAAM,CAAC,MAAM,cAAc,GAAoB;IAC3C,CAAC,WAAW,EAAE,KAAK,CAAC;IACpB,CAAC,UAAU,EAAE,IAAI,CAAC;CACrB,CAAC;AAGF,MAAM,CAAC,MAAM,cAAc,GAAoB;IAC3C,CAAC,YAAY,EAAE,KAAK,CAAC;IACrB,CAAC,UAAU,EAAE,IAAI,CAAC;CACrB,CAAC;AA2CF,MAAM,UAAU,YAAY,CACxB,SAAiD,EACjD,UAAwB;IAExB,MAAM,MAAM,GAAmB,EAAE,CAAC;IAClC,MAAM,iBAAiB,GAAG,CACtB,iBAA+B,EAC/B,GAAG,MAAiB,EAChB,EAAE;QACN,IAAI,iBAAiB,IAAI,iBAAiB,CAAC,MAAM,IAAI,CAAC,EAAE;YACpD,MAAM,CAAC,gBAAgB,EAAE,GAAG,mBAAmB,CAAC,GAAG,iBAAiB,CAAC;YACrE,KAAK,MAAM,YAAY,IAAI,gBAAgB,EAAE;gBACzC,iBAAiB,CAAC,mBAAmB,EAAE,GAAG,MAAM,EAAE,YAAY,CAAC,CAAC;aACnE;SACJ;aAAM;YACH,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC;SACrC;IACL,CAAC,CAAC;IACF,iBAAiB,CAAC,UAAU,CAAC,CAAC;IAC9B,kBAAkB;IAClB,OAAO,IAAI,CAAA;UACL,MAAM,CAAC,GAAG,EAAE,CAAC,MAAM,EAAE,IAAI,CAAA;cACrB,CAAC,CAAe,EAAgB,EAAE,CAAC,CAAC;SACzC,CAAC;KACL,CAAC;AACN,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,QAAsB,EAAgB,EAAE,CAAC,YAAY,CAC9E,CAAC,EAAE,KAAK,EAAE,KAAK,EAAmB,EAAE,EAAE,CAAC,IAAI,CAAA;4CACH,KAAK;gDACD,KAAK;sBAC/B,QAAQ;;;SAGrB,EACL,CAAC,gBAAgB,CAAC,CACrB,CAAC"}

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

@@ -8,7 +8,7 @@ const nimbleTextField = FoundationTextField.compose({
     shadowOptions: {
         delegatesFocus: true
     },
-    end: `${statusAlarmActive16X16.data}`
+    end: statusAlarmActive16X16.data
 });
 DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTextField());
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/text-field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,SAAS,IAAI,mBAAmB,EAEhC,iBAAiB,IAAI,QAAQ,EAChC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,sDAAsD,CAAC;AAC9F,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AASlC,MAAM,eAAe,GAAG,mBAAmB,CAAC,OAAO,CAAmB;IAClE,QAAQ,EAAE,YAAY;IACtB,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;IACD,GAAG,EAAE,GAAG,sBAAsB,CAAC,IAAI,EAAE;CACxC,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/text-field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,SAAS,IAAI,mBAAmB,EAEhC,iBAAiB,IAAI,QAAQ,EAChC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,sDAAsD,CAAC;AAC9F,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AASlC,MAAM,eAAe,GAAG,mBAAmB,CAAC,OAAO,CAAmB;IAClE,QAAQ,EAAE,YAAY;IACtB,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;IACD,GAAG,EAAE,sBAAsB,CAAC,IAAI;CACnC,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC"}

package/dist/esm/theme-provider/design-tokens.d.ts

@@ -23,10 +23,13 @@ export declare const standardPadding: import("@microsoft/fast-foundation").CSSDe
 export declare const labelHeight: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const borderWidth: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const iconSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const drawerWidth: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const fontFamily: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const labelFontFamily: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const drawerHeaderFontFamily: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const labelFontSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const contentFontSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const drawerHeaderFontSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const labelFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const contentFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const buttonContentFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
@@ -35,4 +38,5 @@ export declare const labelTextTransform: import("@microsoft/fast-foundation").CS
 export declare const contentFontColorDisabled: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const smallDelay: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const mediumDelay: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const drawerAnimationDurationMs: import("@microsoft/fast-foundation").CSSDesignToken<number>;
 export declare const passwordRevealFilter: import("@microsoft/fast-foundation").CSSDesignToken<string>;