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

package/dist/esm/button/index.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { attr, html } from '@microsoft/fast-element';
+import { attr } from '@microsoft/fast-element';
 import { Button as FoundationButton, buttonTemplate as template, DesignSystem } from '@microsoft/fast-foundation';
 import { styles } from './styles';
 import { ButtonAppearance } from './types';
@@ -29,7 +29,6 @@ __decorate([
 const nimbleButton = Button.compose({
     baseName: 'button',
     template,
-    start: html `<span part="icon"><slot name="icon"></slot></span>`,
     styles,
     shadowOptions: {
         delegatesFocus: true

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EACH,MAAM,IAAI,gBAAgB,EAE1B,cAAc,IAAI,QAAQ,EAC1B,YAAY,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAI3C;;GAEG;AACH,MAAM,MAAO,SAAQ,gBAAgB;IAW1B,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YAClB,IAAI,CAAC,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC;SAC9C;IACL,CAAC;CACJ;AARG;IADC,IAAI;0CAC+B;AAUxC;;;;;;;;GAQG;AACH,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IAC/C,QAAQ,EAAE,QAAQ;IAClB,QAAQ;IACR,KAAK,EAAE,IAAI,CAAQ,oDAAoD;IACvE,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,MAAM,IAAI,gBAAgB,EAE1B,cAAc,IAAI,QAAQ,EAC1B,YAAY,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAI3C;;GAEG;AACH,MAAM,MAAO,SAAQ,gBAAgB;IAW1B,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YAClB,IAAI,CAAC,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC;SAC9C;IACL,CAAC;CACJ;AARG;IADC,IAAI;0CAC+B;AAUxC;;;;;;;;GAQG;AACH,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IAC/C,QAAQ,EAAE,QAAQ;IAClB,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC"}

package/dist/esm/button/styles.js

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { focusVisible } from '../utilities/style/focus';
-import { actionColorRgb, borderColorHover, borderColorRgb, borderWidth, buttonContentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, fillColorSelected, fontFamily, iconSize, smallDelay, standardPadding } from '../theme-provider/design-tokens';
+import { actionColorRgb, borderColorHover, borderColorRgb, borderWidth, buttonContentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, fillColorSelected, fontFamily, smallDelay, standardPadding } from '../theme-provider/design-tokens';
 import { appearanceBehavior } from './behaviors';
 import { ButtonAppearance } from './types';
 export const styles = css `
@@ -85,23 +85,17 @@ export const styles = css `
         display: contents;
     }
 
-    [part='icon'] {
-        display: contents;
+    slot[name='start']::slotted(*) {
+        --icon-color: ${buttonContentFontColor};
     }
 
-    slot[name='icon']::slotted(*) {
-        width: ${iconSize};
-        height: ${iconSize};
-        fill: ${buttonContentFontColor};
+    :host([disabled]) slot[name='start']::slotted(*) {
+        opacity: 0.6;
     }
 
     [part='end'] {
         display: none;
     }
-
-    :host([disabled]) slot[name='icon']::slotted(*) {
-        opacity: 0.6;
-    }
 `
     // prettier-ignore
     .withBehaviors(appearanceBehavior(ButtonAppearance.Outline, css `

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EACH,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,sBAAsB,EACtB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,iBAAiB,EACjB,UAAU,EACV,QAAQ,EACR,UAAU,EACV,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;kBAIP,aAAa;iBACd,sBAAsB;uBAChB,UAAU;qBACZ,eAAe;;;;;UAK1B;AACE;;;EAGE,CAAC,EACP;;;;;iBAKS,wBAAwB;;;;;;;;kBAQvB,WAAW;;;;;;;;;;;;;;qBAcR,eAAe;iCACH,UAAU;;;;;;;;;;kCAUT,WAAW,IAAI,gBAAgB;;;;cAInD,YAAY;kCACQ,WAAW,IAAI,gBAAgB;mBAC9C,WAAW,UAAU,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA2BvC,QAAQ;kBACP,QAAQ;gBACV,sBAAsB;;;;;;;;;;CAUrC;IACG,kBAAkB;KACjB,aAAa,CACV,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;;yCAG0B,cAAc;;;;;oCAKnB,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;;;;;;yCAMhB,cAAc;;aAE1C,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;;;;;oCAQqB,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;;;;;;;;aAQ5C,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;6CAE8B,cAAc;;;;;6CAKd,cAAc;oCACvB,gBAAgB;;;0BAG1B,YAAY;6CACO,cAAc;oCACvB,gBAAgB;;;;wCAIZ,iBAAiB;;;;;6CAKZ,cAAc;yCAClB,cAAc;;aAE1C,CACJ,CACJ,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EACH,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,sBAAsB,EACtB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,iBAAiB,EACjB,UAAU,EACV,UAAU,EACV,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;kBAIP,aAAa;iBACd,sBAAsB;uBAChB,UAAU;qBACZ,eAAe;;;;;UAK1B;AACE;;;EAGE,CAAC,EACP;;;;;iBAKS,wBAAwB;;;;;;;;kBAQvB,WAAW;;;;;;;;;;;;;;qBAcR,eAAe;iCACH,UAAU;;;;;;;;;;kCAUT,WAAW,IAAI,gBAAgB;;;;cAInD,YAAY;kCACQ,WAAW,IAAI,gBAAgB;mBAC9C,WAAW,UAAU,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;wBAuBhC,sBAAsB;;;;;;;;;;CAU7C;IACG,kBAAkB;KACjB,aAAa,CACV,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;;yCAG0B,cAAc;;;;;oCAKnB,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;;;;;;yCAMhB,cAAc;;aAE1C,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;;;;;oCAQqB,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;;;;;;;;aAQ5C,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;6CAE8B,cAAc;;;;;6CAKd,cAAc;oCACvB,gBAAgB;;;0BAG1B,YAAY;6CACO,cAAc;oCACvB,gBAAgB;;;;wCAIZ,iBAAiB;;;;;6CAKZ,cAAc;yCAClB,cAAc;;aAE1C,CACJ,CACJ,CAAC"}

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

@@ -1,5 +1,6 @@
 import type { Meta, Story } from '@storybook/html';
 import '../index';
+import '../../icons/access-control';
 declare const metadata: Meta;
 export default metadata;
 export declare const defaultButton: (source: any) => Node;

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

@@ -1,9 +1,10 @@
 import { withXD } from 'storybook-addon-xd-designs';
-import { html } from '@microsoft/fast-element';
+import { html, when } from '@microsoft/fast-element';
 import { ButtonAppearance } from '../types';
-import { disabledStates, iconStates, createMatrix, themeWrapper } from '../../tests/utilities/theme-test-helpers';
+import { disabledStates, iconVisibleStates, createMatrix, themeWrapper } from '../../tests/utilities/theme-test-helpers';
 import { createRenderer } from '../../tests/utilities/storybook-test-helpers';
 import '../index';
+import '../../icons/access-control';
 const metadata = {
     title: 'Tests/Button',
     decorators: [withXD],
@@ -19,11 +20,15 @@ export const defaultButton = createRenderer(html `<nimble-button>Default Button<
 const noContent = 'NO_CONTENT';
 const appearanceStates = [...Object.entries(ButtonAppearance), [noContent, '']];
 // prettier-ignore
-const component = ([disabledName, disabled], [appearanceName, appearance], icon) => html `
+const component = ([disabledName, disabled], [appearanceName, appearance], iconVisible) => html `
     <nimble-button appearance="${() => appearance}" ?disabled=${() => disabled}>
-        ${() => icon}
+        ${when(() => iconVisible, html `<nimble-access-control-icon></nimble-access-control-icon>`)}
         ${() => (appearanceName === noContent ? '' : `${appearanceName} Button ${disabledName}`)}
     </nimble-button>
 `;
-export const buttonThemeMatrix = createRenderer(themeWrapper(createMatrix(component, [disabledStates, appearanceStates, iconStates])));
+export const buttonThemeMatrix = createRenderer(themeWrapper(createMatrix(component, [
+    disabledStates,
+    appearanceStates,
+    iconVisibleStates
+])));
 //# sourceMappingURL=button-matrix.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"button-matrix.stories.js","sourceRoot":"","sources":["../../../../src/button/tests/button-matrix.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAgB,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EACH,cAAc,EAEd,UAAU,EAEV,YAAY,EACZ,YAAY,EACf,MAAM,0CAA0C,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,8CAA8C,CAAC;AAC9E,OAAO,UAAU,CAAC;AAElB,MAAM,QAAQ,GAAS;IACnB,KAAK,EAAE,cAAc;IACrB,UAAU,EAAE,CAAC,MAAM,CAAC;IACpB,UAAU,EAAE;QACR,MAAM,EAAE;YACJ,WAAW,EACP,wHAAwH;SAC/H;QACD,QAAQ,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE;KAC5C;CACJ,CAAC;AAEF,eAAe,QAAQ,CAAC;AAExB,MAAM,CAAC,MAAM,aAAa,GAAG,cAAc,CACvC,IAAI,CAAA,+CAA+C,CACtD,CAAC;AACF,MAAM,SAAS,GAAG,YAAY,CAAC;AAC/B,MAAM,gBAAgB,GAAG,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC;AAGhF,kBAAkB;AAClB,MAAM,SAAS,GAAG,CACd,CAAC,YAAY,EAAE,QAAQ,CAAgB,EACvC,CAAC,cAAc,EAAE,UAAU,CAAkB,EAC7C,IAAe,EACH,EAAE,CAAC,IAAI,CAAA;iCACU,GAAG,EAAE,CAAC,UAAU,eAAe,GAAG,EAAE,CAAC,QAAQ;UACpE,GAAG,EAAE,CAAC,IAAI;UACV,GAAG,EAAE,CAAC,CAAC,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,cAAc,WAAW,YAAY,EAAE,CAAC;;CAE/F,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAU,cAAc,CAClD,YAAY,CACR,YAAY,CAAC,SAAS,EAAE,CAAC,cAAc,EAAE,gBAAgB,EAAE,UAAU,CAAC,CAAC,CAC1E,CACJ,CAAC"}
+{"version":3,"file":"button-matrix.stories.js","sourceRoot":"","sources":["../../../../src/button/tests/button-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,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EACH,cAAc,EAEd,iBAAiB,EAEjB,YAAY,EACZ,YAAY,EACf,MAAM,0CAA0C,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,8CAA8C,CAAC;AAC9E,OAAO,UAAU,CAAC;AAClB,OAAO,4BAA4B,CAAC;AAEpC,MAAM,QAAQ,GAAS;IACnB,KAAK,EAAE,cAAc;IACrB,UAAU,EAAE,CAAC,MAAM,CAAC;IACpB,UAAU,EAAE;QACR,MAAM,EAAE;YACJ,WAAW,EACP,wHAAwH;SAC/H;QACD,QAAQ,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE;KAC5C;CACJ,CAAC;AAEF,eAAe,QAAQ,CAAC;AAExB,MAAM,CAAC,MAAM,aAAa,GAAG,cAAc,CACvC,IAAI,CAAA,+CAA+C,CACtD,CAAC;AACF,MAAM,SAAS,GAAG,YAAY,CAAC;AAC/B,MAAM,gBAAgB,GAAG,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC;AAGhF,kBAAkB;AAClB,MAAM,SAAS,GAAG,CACd,CAAC,YAAY,EAAE,QAAQ,CAAgB,EACvC,CAAC,cAAc,EAAE,UAAU,CAAkB,EAC7C,WAA6B,EACjB,EAAE,CAAC,IAAI,CAAA;iCACU,GAAG,EAAE,CAAC,UAAU,eAAe,GAAG,EAAE,CAAC,QAAQ;UACpE,IAAI,CAAC,GAAG,EAAE,CAAC,WAAW,EAAE,IAAI,CAAA,2DAA2D,CAAC;UACxF,GAAG,EAAE,CAAC,CAAC,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,cAAc,WAAW,YAAY,EAAE,CAAC;;CAE/F,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAU,cAAc,CAClD,YAAY,CACR,YAAY,CAAC,SAAS,EAAE;IACpB,cAAc;IACd,gBAAgB;IAChB,iBAAiB;CACpB,CAAC,CACL,CACJ,CAAC"}

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

@@ -1,5 +1,6 @@
 import type { Story, Meta } from '@storybook/html';
 import '../index';
+import '../../icons/access-control';
 interface ButtonArgs {
     label: string;
     appearance: string;

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

@@ -1,8 +1,8 @@
 import { withXD } from 'storybook-addon-xd-designs';
-import { controlsSearch16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
 import { html, when } from '@microsoft/fast-element';
 import { ButtonAppearance } from '../types';
 import '../index';
+import '../../icons/access-control';
 import { createRenderer } from '../../tests/utilities/storybook-test-helpers';
 const metadata = {
     title: 'Button',
@@ -24,7 +24,7 @@ const metadata = {
     // prettier-ignore
     render: createRenderer(html `
         <nimble-button ?disabled="${x => x.disabled}" appearance="${x => x.appearance}">
-            ${when(x => x.icon, html `<div slot="icon">${controlsSearch16X16.data}</div>`)}
+            ${when(x => x.icon, html `<nimble-access-control-icon></nimble-access-control-icon>`)}
             ${x => x.label}
         </nimble-button>
 `),

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

@@ -1 +1 @@
-{"version":3,"file":"button.stories.js","sourceRoot":"","sources":["../../../../src/button/tests/button.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,UAAU,CAAC;AAClB,OAAO,EAAE,cAAc,EAAE,MAAM,8CAA8C,CAAC;AAS9E,MAAM,QAAQ,GAAqB;IAC/B,KAAK,EAAE,QAAQ;IACf,UAAU,EAAE,CAAC,MAAM,CAAC;IACpB,UAAU,EAAE;QACR,MAAM,EAAE;YACJ,WAAW,EACP,wHAAwH;SAC/H;QACD,OAAO,EAAE;YACL,OAAO,EAAE,CAAC,OAAO,CAAC;SACrB;KACJ;IACD,QAAQ,EAAE;QACN,UAAU,EAAE;YACR,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,gBAAgB,CAAC;YACxC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC7B;KACJ;IACD,kBAAkB;IAClB,MAAM,EAAE,cAAc,CAAC,IAAI,CAAA;oCACK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;cACvE,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,CAAA,oBAAoB,mBAAmB,CAAC,IAAI,QAAQ,CAAC;cAC3E,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;;CAEzB,CAAC;IACE,IAAI,EAAE;QACF,KAAK,EAAE,cAAc;QACrB,UAAU,EAAE,OAAO;QACnB,IAAI,EAAE,KAAK;QACX,QAAQ,EAAE,KAAK;KAClB;CACJ,CAAC;AAEF,eAAe,QAAQ,CAAC;AAExB,MAAM,CAAC,MAAM,aAAa,GAAsB;IAC5C,IAAI,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,gBAAgB,CAAC,OAAO,EAAE;CAC1E,CAAC;AACF,MAAM,CAAC,MAAM,WAAW,GAAsB;IAC1C,IAAI,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,gBAAgB,CAAC,KAAK,EAAE;CACtE,CAAC;AACF,MAAM,CAAC,MAAM,WAAW,GAAsB;IAC1C,IAAI,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,gBAAgB,CAAC,KAAK,EAAE;CACtE,CAAC"}
+{"version":3,"file":"button.stories.js","sourceRoot":"","sources":["../../../../src/button/tests/button.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,UAAU,CAAC;AAClB,OAAO,4BAA4B,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,8CAA8C,CAAC;AAS9E,MAAM,QAAQ,GAAqB;IAC/B,KAAK,EAAE,QAAQ;IACf,UAAU,EAAE,CAAC,MAAM,CAAC;IACpB,UAAU,EAAE;QACR,MAAM,EAAE;YACJ,WAAW,EACP,wHAAwH;SAC/H;QACD,OAAO,EAAE;YACL,OAAO,EAAE,CAAC,OAAO,CAAC;SACrB;KACJ;IACD,QAAQ,EAAE;QACN,UAAU,EAAE;YACR,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,gBAAgB,CAAC;YACxC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC7B;KACJ;IACD,kBAAkB;IAClB,MAAM,EAAE,cAAc,CAAC,IAAI,CAAA;oCACK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;cACvE,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,CAAA,2DAA2D,CAAC;cAClF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;;CAEzB,CAAC;IACE,IAAI,EAAE;QACF,KAAK,EAAE,cAAc;QACrB,UAAU,EAAE,OAAO;QACnB,IAAI,EAAE,KAAK;QACX,QAAQ,EAAE,KAAK;KAClB;CACJ,CAAC;AAEF,eAAe,QAAQ,CAAC;AAExB,MAAM,CAAC,MAAM,aAAa,GAAsB;IAC5C,IAAI,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,gBAAgB,CAAC,OAAO,EAAE;CAC1E,CAAC;AACF,MAAM,CAAC,MAAM,WAAW,GAAsB;IAC1C,IAAI,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,gBAAgB,CAAC,KAAK,EAAE;CACtE,CAAC;AACF,MAAM,CAAC,MAAM,WAAW,GAAsB;IAC1C,IAAI,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,gBAAgB,CAAC,KAAK,EAAE;CACtE,CAAC"}

package/dist/esm/checkbox/index.js

@@ -6,7 +6,7 @@ const nimbleCheckbox = FoundationCheckbox.compose({
     baseName: 'checkbox',
     template,
     styles,
-    checkedIndicator: `${controlsCheckboxCheck16X16.data}`
+    checkedIndicator: controlsCheckboxCheck16X16.data
 });
 DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,QAAQ,IAAI,kBAAkB,EAE9B,gBAAgB,IAAI,QAAQ,EAC/B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sDAAsD,CAAC;AAElG,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,kBAAkB,IAAI,QAAQ,EAAE,CAAC;AAE1C,MAAM,cAAc,GAAG,kBAAkB,CAAC,OAAO,CAAkB;IAC/D,QAAQ,EAAE,UAAU;IACpB,QAAQ;IACR,MAAM;IACN,gBAAgB,EAAE,GAAG,0BAA0B,CAAC,IAAI,EAAE;CACzD,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/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,QAAQ,IAAI,kBAAkB,EAE9B,gBAAgB,IAAI,QAAQ,EAC/B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sDAAsD,CAAC;AAElG,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,kBAAkB,IAAI,QAAQ,EAAE,CAAC;AAE1C,MAAM,cAAc,GAAG,kBAAkB,CAAC,OAAO,CAAkB;IAC/D,QAAQ,EAAE,UAAU;IACpB,QAAQ;IACR,MAAM;IACN,gBAAgB,EAAE,0BAA0B,CAAC,IAAI;CACpD,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC"}

package/dist/esm/drawer/animations.d.ts

@@ -0,0 +1,14 @@
+export declare const animationConfig: {
+    slideLeftKeyframes: Keyframe[];
+    slideRightKeyframes: Keyframe[];
+    fadeOverlayKeyframes: Keyframe[];
+    slideInOptions: {
+        duration: number;
+        easing: string;
+    };
+    slideOutOptions: {
+        duration: number;
+        easing: string;
+        direction: string;
+    };
+};

package/dist/esm/drawer/animations.js

@@ -0,0 +1,52 @@
+const slideLeftKeyframes = [
+    {
+        transform: 'translateX(-100%)',
+        visibility: 'hidden',
+        offset: 0
+    },
+    {
+        transform: 'translateX(-100%)',
+        visibility: 'visible',
+        offset: 0.01
+    },
+    {
+        transform: 'translateX(0%)',
+        visibility: 'visible',
+        offset: 1
+    }
+];
+const slideRightKeyframes = [
+    {
+        transform: 'translateX(100%)',
+        visibility: 'hidden',
+        offset: 0
+    },
+    {
+        transform: 'translateX(100%)',
+        visibility: 'visible',
+        offset: 0.01
+    },
+    {
+        transform: 'translateX(0%)',
+        visibility: 'visible',
+        offset: 1
+    }
+];
+const fadeOverlayKeyframes = [{ opacity: 0 }, { opacity: 1 }];
+const slideInOptions = {
+    duration: 1,
+    easing: 'ease-out'
+};
+const slideOutOptions = {
+    duration: 1,
+    easing: 'ease-in',
+    direction: 'reverse'
+};
+export const animationConfig = {
+    slideLeftKeyframes,
+    slideRightKeyframes,
+    fadeOverlayKeyframes,
+    slideInOptions,
+    slideOutOptions
+};
+//# sourceMappingURL=animations.js.map

package/dist/esm/drawer/animations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animations.js","sourceRoot":"","sources":["../../../src/drawer/animations.ts"],"names":[],"mappings":"AAAA,MAAM,kBAAkB,GAAe;IACnC;QACI,SAAS,EAAE,mBAAmB;QAC9B,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,CAAC;KACZ;IACD;QACI,SAAS,EAAE,mBAAmB;QAC9B,UAAU,EAAE,SAAS;QACrB,MAAM,EAAE,IAAI;KACf;IACD;QACI,SAAS,EAAE,gBAAgB;QAC3B,UAAU,EAAE,SAAS;QACrB,MAAM,EAAE,CAAC;KACZ;CACJ,CAAC;AAEF,MAAM,mBAAmB,GAAe;IACpC;QACI,SAAS,EAAE,kBAAkB;QAC7B,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,CAAC;KACZ;IACD;QACI,SAAS,EAAE,kBAAkB;QAC7B,UAAU,EAAE,SAAS;QACrB,MAAM,EAAE,IAAI;KACf;IACD;QACI,SAAS,EAAE,gBAAgB;QAC3B,UAAU,EAAE,SAAS;QACrB,MAAM,EAAE,CAAC;KACZ;CACJ,CAAC;AAEF,MAAM,oBAAoB,GAAe,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;AAE1E,MAAM,cAAc,GAAG;IACnB,QAAQ,EAAE,CAAC;IACX,MAAM,EAAE,UAAU;CACrB,CAAC;AAEF,MAAM,eAAe,GAAG;IACpB,QAAQ,EAAE,CAAC;IACX,MAAM,EAAE,SAAS;IACjB,SAAS,EAAE,SAAS;CACvB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG;IAC3B,kBAAkB;IAClB,mBAAmB;IACnB,oBAAoB;IACpB,cAAc;IACd,eAAe;CAClB,CAAC"}

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

@@ -0,0 +1,39 @@
+import { Dialog as FoundationDialog } from '@microsoft/fast-foundation';
+import { DrawerLocation, DrawerState } from './types';
+/**
+ * Drawer/Sidenav control. Shows content in a panel on the left / right side of the screen,
+ * which animates to be visible with a slide-in / slide-out animation.
+ * Configured via 'location', 'state', 'modal', 'preventDismiss' properties.
+ */
+export declare class Drawer extends FoundationDialog {
+    location: DrawerLocation;
+    state: DrawerState;
+    /**
+     * True to prevent dismissing the drawer when the overlay outside the drawer is clicked.
+     * Only applicable when 'modal' is set to true (i.e. when the overlay is used).
+     * HTML Attribute: prevent-dismiss
+     */
+    preventDismiss: boolean;
+    private readonly propertiesToWatch;
+    private propertyChangeNotifier?;
+    private animationDurationMilliseconds;
+    private animationGroup?;
+    private animationsEnabledChangedHandler?;
+    private prefersReducedMotionMediaQuery?;
+    private propertyChangeSubscriber?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    show(): void;
+    hide(): void;
+    dismiss(): void;
+    private onPropertyChange;
+    private onHiddenChanged;
+    private onLocationChanged;
+    private onStateChanged;
+    private updateAnimationDuration;
+    private animateOpening;
+    private animateClosing;
+    private animateOpenClose;
+    private cancelCurrentAnimation;
+}
+export declare const nimbleDrawer: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof Drawer>;

package/dist/esm/drawer/index.js

@@ -0,0 +1,189 @@
+import { __decorate } from "tslib";
+import { AnimateGroup, AnimateTo } from '@microsoft/fast-animation';
+import { attr, Observable } from '@microsoft/fast-element';
+import { DesignSystem, Dialog as FoundationDialog, dialogTemplate as template } from '@microsoft/fast-foundation';
+import { drawerAnimationDurationMs } from '../theme-provider/design-tokens';
+import { animationConfig } from './animations';
+import { styles } from './styles';
+import { DrawerLocation, DrawerState } from './types';
+const animationDurationWhenDisabledMilliseconds = 0.001;
+/**
+ * Drawer/Sidenav control. Shows content in a panel on the left / right side of the screen,
+ * which animates to be visible with a slide-in / slide-out animation.
+ * Configured via 'location', 'state', 'modal', 'preventDismiss' properties.
+ */
+export class Drawer extends FoundationDialog {
+    constructor() {
+        super(...arguments);
+        this.location = DrawerLocation.Left;
+        this.state = DrawerState.Closed;
+        /**
+         * True to prevent dismissing the drawer when the overlay outside the drawer is clicked.
+         * Only applicable when 'modal' is set to true (i.e. when the overlay is used).
+         * HTML Attribute: prevent-dismiss
+         */
+        this.preventDismiss = false;
+        this.propertiesToWatch = ['hidden', 'location', 'state'];
+        this.animationDurationMilliseconds = animationDurationWhenDisabledMilliseconds;
+    }
+    connectedCallback() {
+        // disable trapFocus before super.connectedCallback as FAST Dialog will immediately queue work to
+        // change focus if it's true before connectedCallback
+        this.trapFocus = false;
+        super.connectedCallback();
+        this.prefersReducedMotionMediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+        this.updateAnimationDuration();
+        this.animationsEnabledChangedHandler = () => this.updateAnimationDuration();
+        this.prefersReducedMotionMediaQuery.addEventListener('change', this.animationsEnabledChangedHandler);
+        this.onStateChanged();
+        const notifier = Observable.getNotifier(this);
+        const subscriber = {
+            handleChange: (_source, propertyName) => this.onPropertyChange(propertyName)
+        };
+        this.propertiesToWatch.forEach(propertyName => notifier.subscribe(subscriber, propertyName));
+        this.propertyChangeSubscriber = subscriber;
+        this.propertyChangeNotifier = notifier;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.cancelCurrentAnimation();
+        if (this.propertyChangeNotifier && this.propertyChangeSubscriber) {
+            this.propertiesToWatch.forEach(propertyName => this.propertyChangeNotifier.unsubscribe(this.propertyChangeSubscriber, propertyName));
+            this.propertyChangeNotifier = undefined;
+            this.propertyChangeSubscriber = undefined;
+        }
+        if (this.prefersReducedMotionMediaQuery
+            && this.animationsEnabledChangedHandler) {
+            this.prefersReducedMotionMediaQuery.removeEventListener('change', this.animationsEnabledChangedHandler);
+            this.prefersReducedMotionMediaQuery = undefined;
+            this.animationsEnabledChangedHandler = undefined;
+        }
+    }
+    show() {
+        // Not calling super.show() as that will immediately show the drawer, whereas 'Opening' state will animate
+        this.state = DrawerState.Opening;
+    }
+    hide() {
+        // Not calling super.hide() as that will immediately hide the drawer, whereas 'Closing' state will animate
+        this.state = DrawerState.Closing;
+    }
+    dismiss() {
+        if (!this.preventDismiss) {
+            super.dismiss();
+            this.hide();
+        }
+    }
+    onPropertyChange(propertyName) {
+        switch (propertyName) {
+            case 'hidden':
+                this.onHiddenChanged();
+                break;
+            case 'location':
+                this.onLocationChanged();
+                break;
+            case 'state':
+                this.onStateChanged();
+                break;
+            default:
+                break;
+        }
+    }
+    onHiddenChanged() {
+        if (this.hidden && this.state !== DrawerState.Closed) {
+            this.state = DrawerState.Closed;
+        }
+        else if (!this.hidden && this.state === DrawerState.Closed) {
+            this.state = DrawerState.Opened;
+        }
+    }
+    onLocationChanged() {
+        this.cancelCurrentAnimation();
+    }
+    onStateChanged() {
+        if (this.isConnected) {
+            this.cancelCurrentAnimation();
+            switch (this.state) {
+                case DrawerState.Opening:
+                    this.animateOpening();
+                    this.hidden = false;
+                    break;
+                case DrawerState.Opened:
+                    this.hidden = false;
+                    break;
+                case DrawerState.Closing:
+                    this.hidden = false;
+                    this.animateClosing();
+                    break;
+                case DrawerState.Closed:
+                    this.hidden = true;
+                    break;
+                default:
+                    throw new Error('Unsupported state value. Expected: opening/opened/closing/closed');
+            }
+        }
+    }
+    updateAnimationDuration() {
+        const disableAnimations = this.prefersReducedMotionMediaQuery?.matches;
+        this.animationDurationMilliseconds = disableAnimations
+            ? animationDurationWhenDisabledMilliseconds
+            : drawerAnimationDurationMs.getValueFor(this);
+    }
+    animateOpening() {
+        this.animateOpenClose(true);
+    }
+    animateClosing() {
+        if (!this.hidden) {
+            this.animateOpenClose(false);
+        }
+        else {
+            this.state = DrawerState.Closed;
+        }
+    }
+    animateOpenClose(drawerOpening) {
+        const options = {
+            ...(drawerOpening
+                ? animationConfig.slideInOptions
+                : animationConfig.slideOutOptions),
+            duration: this.animationDurationMilliseconds
+        };
+        const drawerKeyframes = this.location === DrawerLocation.Right
+            ? animationConfig.slideRightKeyframes
+            : animationConfig.slideLeftKeyframes;
+        const dialogAnimation = new AnimateTo(this.dialog, undefined, options);
+        dialogAnimation.addKeyframes(drawerKeyframes);
+        const animations = [dialogAnimation];
+        const overlay = this.shadowRoot?.querySelector('.overlay');
+        if (overlay) {
+            const overlayAnimation = new AnimateTo(overlay, undefined, options);
+            overlayAnimation.addKeyframes(animationConfig.fadeOverlayKeyframes);
+            animations.push(overlayAnimation);
+        }
+        const animationGroup = new AnimateGroup(animations);
+        animationGroup.onFinish = () => {
+            this.state = drawerOpening
+                ? DrawerState.Opened
+                : DrawerState.Closed;
+        };
+        this.animationGroup = animationGroup;
+        animationGroup.play();
+    }
+    cancelCurrentAnimation() {
+        this.animationGroup?.cancel();
+    }
+}
+__decorate([
+    attr
+], Drawer.prototype, "location", void 0);
+__decorate([
+    attr
+], Drawer.prototype, "state", void 0);
+__decorate([
+    attr({ attribute: 'prevent-dismiss', mode: 'boolean' })
+], Drawer.prototype, "preventDismiss", void 0);
+export const nimbleDrawer = Drawer.compose({
+    baseName: 'drawer',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/drawer/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/drawer/styles.d.ts

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

package/dist/esm/drawer/styles.js

@@ -0,0 +1,109 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { applicationBackgroundColor, borderWidth, contentFontSize, drawerHeaderFontFamily, drawerHeaderFontSize, fontFamily, labelFontColor, popupBorderColor, popupBoxShadowColor } from '../theme-provider/design-tokens';
+export const styles = css `
+    ${display('block')} :host {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: fit-content;
+        height: 100%;
+        outline: none;
+        font-family: ${fontFamily};
+        font-size: ${contentFontSize};
+        color: ${labelFontColor};
+    }
+
+    :host([location='left']) {
+        left: 0px;
+    }
+
+    :host([location='right']) {
+        right: 0px;
+    }
+
+    .positioning-region {
+        display: block;
+        position: relative;
+        justify-content: center;
+        width: fit-content;
+        height: 100%;
+        inset: 0px;
+        overflow: hidden;
+        z-index: 999;
+    }
+
+    :host([modal]) .positioning-region {
+        width: 100%;
+        position: fixed;
+        display: flex;
+    }
+
+    .overlay {
+        position: fixed;
+        inset: 0px;
+        background: ${popupBorderColor};
+        touch-action: none;
+    }
+
+    .control {
+        position: relative;
+        top: 0px;
+        bottom: 0px;
+        width: fit-content;
+        height: 100%;
+        display: grid;
+        grid-template-rows: max-content auto max-content;
+        flex-direction: column;
+        box-sizing: border-box;
+        border-radius: 0px;
+        border-width: 0px;
+        width: var(--drawer-width);
+        background-color: ${applicationBackgroundColor};
+    }
+
+    :host([modal]) .control {
+        position: absolute;
+        height: 100%;
+    }
+
+    :host(.hidden) .control {
+        visibility: hidden;
+    }
+
+    :host([location='left']) .control {
+        left: 0px;
+        border-right: ${borderWidth} solid ${popupBoxShadowColor};
+    }
+
+    :host([location='right']) .control {
+        right: 0px;
+        border-left: ${borderWidth} solid ${popupBoxShadowColor};
+    }
+
+    ${
+/*
+    Styling for a 3-panel drawer with header, footer, and a content
+    region filling the remaining space/height
+*/ ''}
+
+    ::slotted(header) {
+        padding: var(--standard-padding);
+        font-family: ${drawerHeaderFontFamily};
+        font-size: ${drawerHeaderFontSize};
+    }
+
+    ::slotted(section) {
+        padding: var(--standard-padding);
+        grid-row: 2;
+        overflow-y: auto;
+    }
+
+    ::slotted(footer) {
+        padding: var(--standard-padding);
+        display: flex;
+        justify-content: flex-end;
+        border-top: ${borderWidth} solid ${popupBorderColor};
+    }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/drawer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,eAAe,EACf,sBAAsB,EACtB,oBAAoB,EACpB,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,mBAAmB,EACtB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;;;;;uBAOC,UAAU;qBACZ,eAAe;iBACnB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA+BT,gBAAgB;;;;;;;;;;;;;;;;;4BAiBV,0BAA0B;;;;;;;;;;;;;;wBAc9B,WAAW,UAAU,mBAAmB;;;;;uBAKzC,WAAW,UAAU,mBAAmB;;;MAGzD;AACE;;;EAGE,CAAC,EACP;;;;uBAImB,sBAAsB;qBACxB,oBAAoB;;;;;;;;;;;;;sBAanB,WAAW,UAAU,gBAAgB;;CAE1D,CAAC"}

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

@@ -0,0 +1,9 @@
+import type { Meta, Story } from '@storybook/html';
+import '../index';
+declare const metadata: Meta;
+export default metadata;
+export declare const drawerLightThemeWhiteBackground: Story;
+export declare const drawerColorThemeGreenBackground: Story;
+export declare const drawerColorThemeDarkGreenBackground: Story;
+export declare const drawerDarkThemeBlackBackground: Story;
+export declare const drawerLegacyBlueThemeWhiteBackground: Story;