@ni/nimble-components 1.0.0-beta.11 → 1.0.0-beta.113

package/README.md

@@ -1,5 +1,5 @@
 <div align="center">
-    <p align="center"><b>ni | nimble | components</b></p>
+    <p><b>ni | nimble | components</b></p>
 </div>
 
 # Nimble Components
@@ -10,11 +10,22 @@ NI-styled web components for web applications.
 
 ## Getting Started
 
+### Framework Support
+
 If you are using one of the following frameworks see associated wrapper documentation:
 
-1. Angular: See the [nimble-angular](../../angular-workspace/projects/ni/nimble-angular) documentation.
-2. Blazor WebAssembly or Blazor Server: See the [nimble-blazor](../nimble-blazor) documentation.
+1. Angular: See the [nimble-angular](/angular-workspace/projects/ni/nimble-angular) documentation.
+2. Blazor WebAssembly or Blazor Server: See the [nimble-blazor](/packages/nimble-blazor) documentation.
+
+### Using `nimble-components` in a Webpack Application
+
+If you have an existing application that incorporates a module bundler like [Webpack](https://webpack.js.org/) but doesn't include one of the above frameworks, you can use `@ni/nimble-components` directly. Exact instructions will depend on your application, but here are some common steps:
+
+1. Install the package from [the public NPM registry](https://www.npmjs.com/package/@ni/nimble-components) by running `npm install @ni/nimble-components`.
+2. Import the component you want to use from the file you want to use it in. For example: `import '@ni/nimble-components/dist/esm/icons/succeeded';`
+3. Add the HTML for the component to your page. You can see sample code for each component in the [Nimble Storybook](https://ni.github.io/nimble/storybook/) by going to the **Docs** tab for the component and clicking **Show code**. For example: `<nimble-succeeded-icon></nimble-succeeded-icon>`.
+4. Nimble components are [standard web components (custom elements)](https://developer.mozilla.org/en-US/docs/Web/Web_Components) so you can configure them via normal DOM APIs like attributes, properties, events, and methods. The [Storybook documentation](https://ni.github.io/nimble/storybook/) for each component describes its custom API.
 
 ## Contributing
 
-Follow the instructions in [CONTRIBUTING.md](CONTRIBUTING.md) to modify this library.
+Follow the instructions in [CONTRIBUTING.md](/packages/nimble-components/CONTRIBUTING.md) to modify this library.

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

@@ -1 +1 @@
-{"version":3,"file":"behaviors.js","sourceRoot":"","sources":["../../../src/button/behaviors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AAIxE;;;;;;;;GAQG;AACH,MAAM,UAAU,kBAAkB,CAAC,KAAuB,EAAE,MAAqB;IAC7E,OAAO,IAAI,0BAA0B,CAAC,YAAY,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AACvE,CAAC"}
+{"version":3,"file":"behaviors.js","sourceRoot":"","sources":["../../../src/button/behaviors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AAIxE;;;;;;;;GAQG;AACH,MAAM,UAAU,kBAAkB,CAC9B,KAAuB,EACvB,MAAqB;IAErB,OAAO,IAAI,0BAA0B,CAAC,YAAY,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AACvE,CAAC"}

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

@@ -1,6 +1,9 @@
 import { Button as FoundationButton } from '@microsoft/fast-foundation';
 import { ButtonAppearance } from './types';
 export type { Button };
+/**
+ * A nimble-styled HTML button
+ */
 declare class Button extends FoundationButton {
     /**
      * The appearance the button should have.

package/dist/esm/button/index.js

@@ -3,15 +3,10 @@ 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';
+/**
+ * A nimble-styled HTML button
+ */
 class Button extends FoundationButton {
-    /**
-     * The appearance the button should have.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: appearance
-     */
-    appearance;
     connectedCallback() {
         super.connectedCallback();
         if (!this.appearance) {
@@ -36,8 +31,8 @@ const nimbleButton = Button.compose({
     template,
     styles,
     shadowOptions: {
-        delegatesFocus: true,
-    },
+        delegatesFocus: true
+    }
 });
 DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleButton());
 //# sourceMappingURL=index.js.map

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,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,MAAM,IAAI,gBAAgB,EAAE,cAAc,IAAI,QAAQ,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAClH,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAI3C,MAAM,MAAO,SAAQ,gBAAgB;IACjC;;;;;;OAMG;IAEI,UAAU,CAAmB;IAE7B,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,CAAC;IAChC,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"}
+{"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,107 +1,178 @@
 import { css } from '@microsoft/fast-element';
-import { borderColorRgb, borderColorHover, controlHeight, standardPadding, fontFamily, fontColor, fillColorSelected, contentFontSize, fontColorDisabled } from '../theme-provider/design-tokens';
+import { display } from '@microsoft/fast-foundation';
+import { focusVisible } from '../utilities/style/focus';
+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 `
+    ${display('inline-flex')}
+
     :host {
-        display: inline-block;
         background-color: transparent;
         height: ${controlHeight};
-        color: ${fontColor};
+        color: ${buttonContentFontColor};
         font-family: ${fontFamily};
         font-size: ${contentFontSize};
         cursor: pointer;
-        text-align: center;
         outline: none;
-    }
-
-    :host(:hover),
-    :host(:focus-within) {
-        box-shadow: 0px 0px 0px 1px ${borderColorHover} inset;
-    }
-
-    :host(:focus-within:not(:active)) {
-        outline: 1px solid ${borderColorHover};
-        outline-offset: -4px;
-    }
-
-    :host(:active) {
-        background-color: ${fillColorSelected};
-        box-shadow: none;
+        border: none;
+        box-sizing: border-box;
+        ${
+/*
+    Not sure why but this is needed to get buttons with icons and buttons
+    without icons to align on the same line when the button is inline-flex
+*/ ''}
+        vertical-align: middle;
     }
 
     :host([disabled]) {
-        color: ${fontColorDisabled};
-        background-color: transparent;
-        box-shadow: none;
+        color: ${contentFontColorDisabled};
         cursor: default;
     }
 
     .control {
         background-color: transparent;
         height: inherit;
-        border: 0px solid transparent;
+        width: inherit;
+        border: ${borderWidth} solid transparent;
+        box-sizing: border-box;
         color: inherit;
         border-radius: inherit;
         fill: inherit;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
         cursor: inherit;
         font-family: inherit;
         font-size: inherit;
-        line-height: inherit;
         outline: none;
+        margin: 0;
         padding: 0 ${standardPadding};
-    }`.withBehaviors(appearanceBehavior(ButtonAppearance.Outline, css `
-                :host {
-                    border: 1px solid rgba(${borderColorRgb}, 0.3);
+        transition: box-shadow ${smallDelay};
+    }
+
+    @media (prefers-reduced-motion) {
+        .control {
+            transition-duration: 0s;
+        }
+    }
+
+    .control:hover {
+        box-shadow: 0px 0px 0px ${borderWidth} ${borderColorHover} inset;
+        outline: none;
+    }
+
+    .control${focusVisible} {
+        box-shadow: 0px 0px 0px ${borderWidth} ${borderColorHover} inset;
+        outline: ${borderWidth} solid ${borderColorHover};
+        outline-offset: -4px;
+    }
+
+    .control:active {
+        box-shadow: none;
+        outline: none;
+    }
+
+    .control[disabled] {
+        box-shadow: none;
+        outline: none;
+    }
+
+    .content {
+        display: contents;
+    }
+
+    [part='start'] {
+        display: contents;
+    }
+
+    slot[name='start']::slotted(*) {
+        --icon-color: ${buttonContentFontColor};
+    }
+
+    :host([disabled]) slot[name='start']::slotted(*) {
+        opacity: 0.6;
+    }
+
+    [part='end'] {
+        display: none;
+    }
+`
+    // prettier-ignore
+    .withBehaviors(appearanceBehavior(ButtonAppearance.Outline, css `
+                .control {
+                    background-color: transparent;
+                    border-color: rgba(${actionColorRgb}, 0.5);
                 }
 
-                :host(:hover),
-                :host(:focus-within) {
-                    border: 1px solid ${borderColorHover};
+                .control:hover {
+                    background-color: transparent;
+                    border-color: ${borderColorHover};
                 }
 
-                :host(:active) {
+                .control${focusVisible} {
+                    background-color: transparent;
+                    border-color: ${borderColorHover};
+                }
+
+                .control:active {
+                    background-color: ${fillColorSelected};
                     border-color: transparent;
                 }
 
-                :host([disabled]) {
+                .control[disabled] {
+                    background-color: transparent;
                     border-color: rgba(${borderColorRgb}, 0.2);
                 }
             `), appearanceBehavior(ButtonAppearance.Ghost, css `
-                :host {
-                    border: 1px solid transparent;
+                .control {
+                    background-color: transparent;
+                    border-color: transparent;
+                }
+
+                .control:hover {
+                    background-color: transparent;
+                    border-color: ${borderColorHover};
+                }
+
+                .control${focusVisible} {
+                    background-color: transparent;
+                    border-color: ${borderColorHover};
                 }
 
-                :host(:hover),
-                :host(:focus-within) {
-                    border: 1px solid ${borderColorHover};
+                .control:active {
+                    background-color: ${fillColorSelected};
+                    border-color: transparent;
                 }
 
-                :host(:active),
-                :host([disabled]) {
+                .control[disabled] {
+                    background-color: transparent;
                     border-color: transparent;
                 }
             `), appearanceBehavior(ButtonAppearance.Block, css `
-                :host {
-                    border: 1px solid transparent;
+                .control {
+                    background-color: rgba(${borderColorRgb}, 0.1);
+                    border-color: transparent;
                 }
 
-                :host(:not(:active)),
-                :host([disabled]) {
+                .control:hover {
                     background-color: rgba(${borderColorRgb}, 0.1);
+                    border-color: ${borderColorHover};
                 }
 
-                :host(:hover),
-                :host(:focus-within) {
-                    border: 1px solid ${borderColorHover};
+                .control${focusVisible} {
+                    background-color: rgba(${borderColorRgb}, 0.1);
+                    border-color: ${borderColorHover};
                 }
 
-                :host(:active) {
+                .control:active {
+                    background-color: ${fillColorSelected};
                     border-color: transparent;
                 }
 
-                :host([disabled]) {
-                    /* This opacity adds to the existing 10% background opacity. */
+                .control[disabled] {
+                    background-color: rgba(${borderColorRgb}, 0.1);
                     border-color: rgba(${borderColorRgb}, 0.1);
                 }
             `));

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,EACH,cAAc,EACd,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,UAAU,EACV,SAAS,EACT,iBAAiB,EACjB,eAAe,EACf,iBAAiB,EACpB,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,SAAS;uBACH,UAAU;qBACZ,eAAe;;;;;;;;sCAQE,gBAAgB;;;;6BAIzB,gBAAgB;;;;;4BAKjB,iBAAiB;;;;;iBAK5B,iBAAiB;;;;;;;;;;;;;;;;;;qBAkBb,eAAe;MAC9B,CAAC,aAAa,CACZ,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;6CAE8B,cAAc;;;;;wCAKnB,gBAAgB;;;;;;;;yCAQf,cAAc;;aAE1C,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;;;;wCAOyB,gBAAgB;;;;;;;aAO3C,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;;;;6CAO8B,cAAc;;;;;wCAKnB,gBAAgB;;;;;;;;;yCASf,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,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,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;MACnB,OAAO,CAAC,aAAa,CAAC;;;;kBAIV,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/types.d.ts

@@ -2,8 +2,11 @@
  * Types of button appearance.
  * @public
  */
+import type { Button } from '@microsoft/fast-foundation';
+export declare type ButtonAppearanceAttribute = 'outline' | 'ghost' | 'block';
 export declare enum ButtonAppearance {
     Outline = "outline",
     Ghost = "ghost",
     Block = "block"
 }
+export declare type ButtonType = Button['type'];

package/dist/esm/button/types.js

@@ -1,7 +1,3 @@
-/**
- * Types of button appearance.
- * @public
- */
 export var ButtonAppearance;
 (function (ButtonAppearance) {
     ButtonAppearance["Outline"] = "outline";

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/button/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAN,IAAY,gBAIX;AAJD,WAAY,gBAAgB;IACxB,uCAAmB,CAAA;IACnB,mCAAe,CAAA;IACf,mCAAe,CAAA;AACnB,CAAC,EAJW,gBAAgB,KAAhB,gBAAgB,QAI3B"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/button/types.ts"],"names":[],"mappings":"AAOA,MAAM,CAAN,IAAY,gBAIX;AAJD,WAAY,gBAAgB;IACxB,uCAAmB,CAAA;IACnB,mCAAe,CAAA;IACf,mCAAe,CAAA;AACnB,CAAC,EAJW,gBAAgB,KAAhB,gBAAgB,QAI3B"}

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

@@ -0,0 +1,2 @@
+import { Checkbox } from '@microsoft/fast-foundation';
+export type { Checkbox };

package/dist/esm/checkbox/index.js

@@ -0,0 +1,11 @@
+import { DesignSystem, Checkbox, checkboxTemplate as template } from '@microsoft/fast-foundation';
+import { controlsCheckboxCheck16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
+import { styles } from './styles';
+const nimbleCheckbox = Checkbox.compose({
+    baseName: 'checkbox',
+    template,
+    styles,
+    checkedIndicator: controlsCheckboxCheck16X16.data
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,QAAQ,EAER,gBAAgB,IAAI,QAAQ,EAC/B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sDAAsD,CAAC;AAClG,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIlC,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAkB;IACrD,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/checkbox/styles.d.ts

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

package/dist/esm/checkbox/styles.js

@@ -0,0 +1,92 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { focusVisible } from '../utilities/style/focus';
+import { borderColor, borderColorHover, borderColorRgb, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, labelHeight, iconSize, fontFamily, borderWidth, smallDelay } from '../theme-provider/design-tokens';
+export const styles = css `
+    ${display('inline-flex')}
+
+    :host {
+        align-items: center;
+        cursor: pointer;
+        outline: none;
+        user-select: none;
+    }
+
+    :host([disabled]) {
+        cursor: default;
+    }
+
+    .control {
+        width: calc(${controlHeight} / 2);
+        height: calc(${controlHeight} / 2);
+        box-sizing: border-box;
+        flex-shrink: 0;
+        border: ${borderWidth} solid ${borderColor};
+        padding: 2px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        transition: box-shadow ${smallDelay};
+        ${
+/*
+ * Firefox includes the line height in the outline height calculation (not sure if intended or accidental).
+ * Set it to 0 to ensure the outline is just as high as the control.
+ */ ''}
+        line-height: 0;
+    }
+
+    @media (prefers-reduced-motion) {
+        .control {
+            transition-duration: 0s;
+        }
+    }
+
+    :host([disabled]) .control {
+        background-color: rgba(${borderColorRgb}, 0.1);
+        border-color: rgba(${borderColorRgb}, 0.2);
+    }
+
+    :host(:not([disabled]):not(:active):hover) .control {
+        border-color: ${borderColorHover};
+        box-shadow: 0px 0px 0px ${borderWidth} ${borderColorHover} inset;
+    }
+
+    :host(${focusVisible}) .control {
+        border-color: ${borderColorHover};
+        outline: 2px solid ${borderColorHover};
+        outline-offset: 2px;
+    }
+
+    .label {
+        font-family: ${fontFamily};
+        font-size: ${contentFontSize};
+        color: ${contentFontColor};
+        line-height: ${labelHeight};
+        padding-left: 1ch;
+        cursor: inherit;
+    }
+
+    :host([disabled]) .label {
+        color: ${contentFontColorDisabled};
+    }
+
+    slot[name='checked-indicator'] svg {
+        height: ${iconSize};
+        width: ${iconSize};
+        overflow: visible;
+    }
+
+    slot[name='checked-indicator'] path {
+        fill: ${borderColor};
+        opacity: 0;
+    }
+
+    :host([aria-checked='true']) slot[name='checked-indicator'] path {
+        opacity: 1;
+    }
+
+    :host([disabled]) slot[name='checked-indicator'] path {
+        fill: rgba(${borderColorRgb}, 0.3);
+    }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/checkbox/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,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,WAAW,EACX,QAAQ,EACR,UAAU,EACV,WAAW,EACX,UAAU,EACb,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;;;;;;;;;;sBAcN,aAAa;uBACZ,aAAa;;;kBAGlB,WAAW,UAAU,WAAW;;;;;iCAKjB,UAAU;UACjC;AACE;;;GAGG,CAAC,EACR;;;;;;;;;;;iCAWyB,cAAc;6BAClB,cAAc;;;;wBAInB,gBAAgB;kCACN,WAAW,IAAI,gBAAgB;;;YAGrD,YAAY;wBACA,gBAAgB;6BACX,gBAAgB;;;;;uBAKtB,UAAU;qBACZ,eAAe;iBACnB,gBAAgB;uBACV,WAAW;;;;;;iBAMjB,wBAAwB;;;;kBAIvB,QAAQ;iBACT,QAAQ;;;;;gBAKT,WAAW;;;;;;;;;qBASN,cAAc;;CAElC,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,40 @@
+import { Dialog as FoundationDialog } from '@microsoft/fast-foundation';
+import { DrawerLocation, DrawerState } from './types';
+export type { Drawer };
+/**
+ * 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.
+ */
+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>;