@ni/nimble-components 1.0.0 → 1.2.0

package/dist/esm/button/index.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { attr } from '@microsoft/fast-element';
 import { Button as FoundationButton, buttonTemplate as template, DesignSystem } from '@microsoft/fast-foundation';
-import { styles } from './styles';
+import { styles } from '../patterns/button/styles';
 import { ButtonAppearance } from './types';
 /**
  * A nimble-styled HTML button

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,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;AAU3C;;GAEG;AACH,MAAM,MAAO,SAAQ,gBAAgB;IAArC;;QAWI;;;;;;;;WAQG;QAEI,kBAAa,GAAG,KAAK,CAAC;QAEZ,cAAS,GAAG,uBAAuB,CAAC;IAYzD,CAAC;IAVU,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YAClB,IAAI,CAAC,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC;SAC9C;QAED,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,CAAE,CAAC;QACxD,OAAO,CAAC,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC;QAC5B,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,iBAAiB,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IACjE,CAAC;CACJ;AA1BG;IADC,IAAI;0CACgC;AAYrC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;6CAC1B;AAgBjC;;;;;;;;GAQG;AACH,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IAC/C,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,gBAAgB;IAC3B,0GAA0G;IAC1G,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,2BAA2B,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAU3C;;GAEG;AACH,MAAM,MAAO,SAAQ,gBAAgB;IAArC;;QAWI;;;;;;;;WAQG;QAEI,kBAAa,GAAG,KAAK,CAAC;QAEZ,cAAS,GAAG,uBAAuB,CAAC;IAYzD,CAAC;IAVU,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YAClB,IAAI,CAAC,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC;SAC9C;QAED,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,CAAE,CAAC;QACxD,OAAO,CAAC,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC;QAC5B,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,iBAAiB,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IACjE,CAAC;CACJ;AA1BG;IADC,IAAI;0CACgC;AAYrC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;6CAC1B;AAgBjC;;;;;;;;GAQG;AACH,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IAC/C,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,gBAAgB;IAC3B,0GAA0G;IAC1G,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/types.d.ts

@@ -3,10 +3,6 @@
  * @public
  */
 import type { Button } from '@microsoft/fast-foundation';
-export declare enum ButtonAppearance {
-    Outline = "outline",
-    Ghost = "ghost",
-    Block = "block"
-}
-export declare type ButtonAppearanceAttribute = `${ButtonAppearance}`;
+export type { ButtonAppearanceAttribute } from '../patterns/button/types';
+export { ButtonAppearance } from '../patterns/button/types';
 export declare type ButtonType = Button['type'];

package/dist/esm/button/types.js

@@ -1,7 +1,2 @@
-export var ButtonAppearance;
-(function (ButtonAppearance) {
-    ButtonAppearance["Outline"] = "outline";
-    ButtonAppearance["Ghost"] = "ghost";
-    ButtonAppearance["Block"] = "block";
-})(ButtonAppearance || (ButtonAppearance = {}));
+export { ButtonAppearance } from '../patterns/button/types';
 //# sourceMappingURL=types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/button/types.ts"],"names":[],"mappings":"AAMA,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,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/esm/nimble-components/src/button/types.d.ts

@@ -3,10 +3,6 @@
  * @public
  */
 import type { Button } from '@microsoft/fast-foundation';
-export declare enum ButtonAppearance {
-    Outline = "outline",
-    Ghost = "ghost",
-    Block = "block"
-}
-export declare type ButtonAppearanceAttribute = `${ButtonAppearance}`;
+export type { ButtonAppearanceAttribute } from '../patterns/button/types';
+export { ButtonAppearance } from '../patterns/button/types';
 export declare type ButtonType = Button['type'];

package/dist/esm/nimble-components/src/patterns/button/types.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Types of button appearance.
+ * @public
+ */
+export declare enum ButtonAppearance {
+    Outline = "outline",
+    Ghost = "ghost",
+    Block = "block"
+}
+export declare type ButtonAppearanceAttribute = `${ButtonAppearance}`;

package/dist/esm/nimble-components/src/text-field/index.d.ts

@@ -1,4 +1,5 @@
 import { TextField as FoundationTextField } from '@microsoft/fast-foundation';
+import { TextFieldAppearance } from './types';
 export type { TextField };
 declare global {
     interface HTMLElementTagNameMap {
@@ -9,4 +10,13 @@ declare global {
  * A nimble-styed HTML text input
  */
 declare class TextField extends FoundationTextField {
+    /**
+     * The appearance the text field should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance: TextFieldAppearance;
+    connectedCallback(): void;
 }

package/dist/esm/nimble-components/src/text-field/types.d.ts

@@ -1,3 +1,21 @@
 import { TextFieldType } from '@microsoft/fast-foundation';
-export { TextFieldType };
+/**
+ * Values for the 'type' attribute of the text field.
+ */
 export declare type TextFieldTypeAttribute = `${TextFieldType}`;
+/**
+ * Values for the 'type' property of the text field.
+ */
+export { TextFieldType };
+/**
+ * Values for the 'appearance' attribute of the text field.
+ */
+export declare type TextFieldAppearanceAttribute = `${TextFieldAppearance}`;
+/**
+ * Values for the 'appearance' property of the text field
+ */
+export declare enum TextFieldAppearance {
+    Underline = "underline",
+    Outline = "outline",
+    Block = "block"
+}

package/dist/esm/nimble-components/src/toggle-button/index.d.ts

@@ -0,0 +1,33 @@
+import { Switch as FoundationSwitch } from '@microsoft/fast-foundation';
+import { ButtonAppearance } from '../patterns/button/types';
+export type { ToggleButton };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-toggle-button': ToggleButton;
+    }
+}
+/**
+ * A nimble-styled toggle button control.
+ */
+declare class ToggleButton extends FoundationSwitch {
+    /**
+     * The appearance the button should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance: ButtonAppearance;
+    /**
+     * Specify as 'true' to hide the text content of the button. The button will
+     * become square, and the text content will be used as the label of the button
+     * for accessibility purposes.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: content-hidden
+     */
+    contentHidden: boolean;
+    readonly control: HTMLElement;
+    connectedCallback(): void;
+}

package/dist/esm/nimble-components/src/toggle-button/template.d.ts

@@ -0,0 +1,2 @@
+import type { ToggleButton } from '.';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<ToggleButton, any>;

package/dist/esm/nimble-components/src/toggle-button/types.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Types of toggle button appearance.
+ * @public
+ */
+export type { ButtonAppearanceAttribute } from '../patterns/button/types';
+export { ButtonAppearance } from '../patterns/button/types';

package/dist/esm/{button/behaviors.d.ts → nimble-components/src/utilities/style/appearance.d.ts}

@@ -1,5 +1,4 @@
 import type { Behavior, ElementStyles } from '@microsoft/fast-element';
-import type { ButtonAppearance } from './types';
 /**
  * Behavior that will conditionally apply a stylesheet based on the element's
  * appearance property
@@ -9,4 +8,4 @@ import type { ButtonAppearance } from './types';
  *
  * @public
  */
-export declare function appearanceBehavior(value: ButtonAppearance, styles: ElementStyles): Behavior;
+export declare function appearanceBehavior<AppearanceType>(value: AppearanceType, styles: ElementStyles): Behavior;

package/dist/esm/patterns/button/styles.d.ts

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

package/dist/esm/{button → patterns/button}/styles.js

@@ -1,8 +1,8 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { focusVisible } from '../utilities/style/focus';
-import { actionColorRgbPartial, borderColorHover, borderColorRgbPartial, borderWidth, buttonContentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, fillColorSelected, fontFamily, iconColor, smallDelay, standardPadding } from '../theme-provider/design-tokens';
-import { appearanceBehavior } from './behaviors';
+import { focusVisible } from '../../utilities/style/focus';
+import { actionColorRgbPartial, borderColorHover, borderColorRgbPartial, borderWidth, buttonContentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, fillColorSelected, fontFamily, iconColor, smallDelay, standardPadding } from '../../theme-provider/design-tokens';
+import { appearanceBehavior } from '../../utilities/style/appearance';
 import { ButtonAppearance } from './types';
 export const styles = css `
     ${display('inline-flex')}
@@ -113,7 +113,7 @@ export const styles = css `
     .withBehaviors(appearanceBehavior(ButtonAppearance.Outline, css `
                 .control {
                     background-color: transparent;
-                    border-color: rgba(${actionColorRgbPartial}, 0.5);
+                    border-color: rgba(${actionColorRgbPartial}, 0.3);
                 }
 
                 .control:hover {
@@ -128,7 +128,7 @@ export const styles = css `
 
                 .control:active {
                     background-color: ${fillColorSelected};
-                    border-color: transparent;
+                    border-color: ${fillColorSelected};
                 }
 
                 .control[disabled] {
@@ -153,7 +153,7 @@ export const styles = css `
 
                 .control:active {
                     background-color: ${fillColorSelected};
-                    border-color: transparent;
+                    border-color: ${fillColorSelected};
                 }
 
                 .control[disabled] {
@@ -178,12 +178,12 @@ export const styles = css `
 
                 .control:active {
                     background-color: ${fillColorSelected};
-                    border-color: transparent;
+                    border-color: ${fillColorSelected};
                 }
 
                 .control[disabled] {
                     background-color: rgba(${borderColorRgbPartial}, 0.1);
-                    border-color: rgba(${borderColorRgbPartial}, 0.1);
+                    border-color: transparent;
                 }
             `));
 //# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/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,6BAA6B,CAAC;AAC3D,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,sBAAsB,EACtB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,iBAAiB,EACjB,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EAClB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,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;;;;EAIE,CAAC,EACP;;;;;iBAKS,wBAAwB;;;;;;;;kBAQvB,WAAW;;;;;;;;;;;;;;qBAcR,eAAe;iCACH,UAAU;;;;iBAI1B,aAAa;;;;;;;;;;;kCAWI,WAAW,IAAI,gBAAgB;;;;cAInD,YAAY;kCACQ,WAAW,IAAI,gBAAgB;mBAC9C,WAAW,UAAU,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;UA2B9C,SAAS,CAAC,iBAAiB,KAAK,sBAAsB;;;;;;;;;;CAU/D;IACG,kBAAkB;KACjB,aAAa,CACV,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;;yCAG0B,qBAAqB;;;;;oCAK1B,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;oCACrB,iBAAiB;;;;;yCAKZ,qBAAqB;;aAEjD,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;;;;;oCAQqB,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;oCACrB,iBAAiB;;;;;;;aAOxC,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;6CAE8B,qBAAqB;;;;;6CAKrB,qBAAqB;oCAC9B,gBAAgB;;;0BAG1B,YAAY;6CACO,qBAAqB;oCAC9B,gBAAgB;;;;wCAIZ,iBAAiB;oCACrB,iBAAiB;;;;6CAIR,qBAAqB;;;aAGrD,CACJ,CACJ,CAAC"}

package/dist/esm/patterns/button/types.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Types of button appearance.
+ * @public
+ */
+export declare enum ButtonAppearance {
+    Outline = "outline",
+    Ghost = "ghost",
+    Block = "block"
+}
+export declare type ButtonAppearanceAttribute = `${ButtonAppearance}`;

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

@@ -0,0 +1,11 @@
+/**
+ * Types of button appearance.
+ * @public
+ */
+export var ButtonAppearance;
+(function (ButtonAppearance) {
+    ButtonAppearance["Outline"] = "outline";
+    ButtonAppearance["Ghost"] = "ghost";
+    ButtonAppearance["Block"] = "block";
+})(ButtonAppearance || (ButtonAppearance = {}));
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/patterns/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"}

package/dist/esm/select/styles.js

@@ -24,6 +24,12 @@ export const styles = css `
         overflow-y: auto;
         position: absolute;
         width: 100%;
+        ${
+/*
+ * The --max-height custom property is defined by fast-foundation.
+ * See: https://github.com/microsoft/fast/blob/af1f8736ae9ff54a7449324bad952865981d1ece/packages/web-components/fast-foundation/src/select/select.ts#L199
+ */ ''}
+        max-height: calc(var(--max-height) - ${controlHeight});
         z-index: 1;
         padding: 4px;
         box-shadow: 0px 3px 3px ${popupBoxShadowColor};

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/select/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,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,UAAU,EACV,QAAQ,EACR,gBAAgB,EAChB,mBAAmB,EACnB,UAAU,EACb,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;iBAIX,gBAAgB;uBACV,UAAU;kBACf,aAAa;;;;;;;;;;;;;;;;;;kCAkBG,mBAAmB;4BACzB,gBAAgB;4BAChB,0BAA0B;;;;;;;;;;;;;qBAajC,eAAe;;;;yBAIX,WAAW,UAAU,wBAAwB;;;;;;;;;;;yBAW7C,WAAW,UAAU,gBAAgB;oCAC1B,UAAU,oBAAoB,UAAU;;;;mCAIzC,gBAAgB;;oCAEf,UAAU,oBAAoB,UAAU;;;;;yBAKnD,WAAW,UAAU,wBAAwB;;iBAErD,wBAAwB;;;;;;;;;;;;;;kBAcvB,aAAa;;;;oBAIX,aAAa;;;;;;;;;;;;;;;;;;;;;;iBAsBhB,QAAQ;kBACP,QAAQ;gBACV,gBAAgB;;;;gBAIhB,wBAAwB;;;;;;;;;;;;;;;;;;;;;CAqBvC,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/select/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,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,UAAU,EACV,QAAQ,EACR,gBAAgB,EAChB,mBAAmB,EACnB,UAAU,EACb,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;iBAIX,gBAAgB;uBACV,UAAU;kBACf,aAAa;;;;;;;;;;;;;;;;UAgBrB;AACE;;;GAGG,CAAC,EACR;+CACuC,aAAa;;;kCAG1B,mBAAmB;4BACzB,gBAAgB;4BAChB,0BAA0B;;;;;;;;;;;;;qBAajC,eAAe;;;;yBAIX,WAAW,UAAU,wBAAwB;;;;;;;;;;;yBAW7C,WAAW,UAAU,gBAAgB;oCAC1B,UAAU,oBAAoB,UAAU;;;;mCAIzC,gBAAgB;;oCAEf,UAAU,oBAAoB,UAAU;;;;;yBAKnD,WAAW,UAAU,wBAAwB;;iBAErD,wBAAwB;;;;;;;;;;;;;;kBAcvB,aAAa;;;;oBAIX,aAAa;;;;;;;;;;;;;;;;;;;;;;iBAsBhB,QAAQ;kBACP,QAAQ;gBACV,gBAAgB;;;;gBAIhB,wBAAwB;;;;;;;;;;;;;;;;;;;;;CAqBvC,CAAC"}

package/dist/esm/text-field/index.d.ts

@@ -1,4 +1,5 @@
 import { TextField as FoundationTextField } from '@microsoft/fast-foundation';
+import { TextFieldAppearance } from './types';
 export type { TextField };
 declare global {
     interface HTMLElementTagNameMap {
@@ -9,4 +10,13 @@ declare global {
  * A nimble-styed HTML text input
  */
 declare class TextField extends FoundationTextField {
+    /**
+     * The appearance the text field should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance: TextFieldAppearance;
+    connectedCallback(): void;
 }

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

@@ -1,11 +1,23 @@
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
 import { DesignSystem, TextField as FoundationTextField, textFieldTemplate as template } from '@microsoft/fast-foundation';
 import { statusAlarmActive16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
 import { styles } from './styles';
+import { TextFieldAppearance } from './types';
 /**
  * A nimble-styed HTML text input
  */
 class TextField extends FoundationTextField {
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.appearance) {
+            this.appearance = TextFieldAppearance.Underline;
+        }
+    }
 }
+__decorate([
+    attr
+], TextField.prototype, "appearance", void 0);
 const nimbleTextField = TextField.compose({
     baseName: 'text-field',
     baseClass: FoundationTextField,

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;AAUlC;;GAEG;AACH,MAAM,SAAU,SAAQ,mBAAmB;CAAG;AAE9C,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAmB;IACxD,QAAQ,EAAE,YAAY;IACtB,SAAS,EAAE,mBAAmB;IAC9B,0GAA0G;IAC1G,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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/text-field/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,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;AAClC,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAU9C;;GAEG;AACH,MAAM,SAAU,SAAQ,mBAAmB;IAWhC,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YAClB,IAAI,CAAC,UAAU,GAAG,mBAAmB,CAAC,SAAS,CAAC;SACnD;IACL,CAAC;CACJ;AARG;IADC,IAAI;6CACmC;AAU5C,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAmB;IACxD,QAAQ,EAAE,YAAY;IACtB,SAAS,EAAE,mBAAmB;IAC9B,0GAA0G;IAC1G,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/text-field/styles.js

@@ -1,6 +1,8 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { borderColorRgbPartial, borderColorHover, borderWidth, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, failColor, fillColorSelectedRgbPartial, fontFamily, iconSize, labelFontColor, labelFontFamily, labelFontSize, labelFontWeight, labelHeight, labelTextTransform, smallDelay } from '../theme-provider/design-tokens';
+import { borderColorRgbPartial, borderColorHover, borderWidth, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, failColor, fillColorSelectedRgbPartial, fontFamily, iconSize, labelFontColor, labelFontColorDisabled, labelFontFamily, labelFontSize, labelFontWeight, labelHeight, labelTextTransform, smallDelay, standardPadding } from '../theme-provider/design-tokens';
+import { appearanceBehavior } from '../utilities/style/appearance';
+import { TextFieldAppearance } from './types';
 import { Theme } from '../theme-provider/types';
 import { themeBehavior } from '../utilities/style/theme';
 export const styles = css `
@@ -26,41 +28,49 @@ export const styles = css `
         flex-direction: row;
         border-radius: 0px;
         font-family: ${fontFamily};
-        border-bottom: ${borderWidth} solid rgba(${borderColorRgbPartial}, 0.3);
-        padding-bottom: 1px;
         transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
         align-items: flex-end;
+        --ni-private-hover-bottom-border-width: 2px;
+        border: 0px solid rgba(${borderColorRgbPartial}, 0.3);
+        border-bottom-width: var(--ni-private-bottom-border-width);
+        padding-bottom: calc(
+            var(--ni-private-hover-bottom-border-width) -
+                var(--ni-private-bottom-border-width)
+        );
     }
 
-    @media (prefers-reduced-motion) {
-        .root {
-            transition-duration: 0s;
-        }
+    :host .root:hover {
+        --ni-private-bottom-border-width: var(
+            --ni-private-hover-bottom-border-width
+        );
+    }
+
+    :host([disabled]) .root:hover {
+        --ni-private-bottom-border-width: 1px;
     }
 
+    .root:focus-within,
     .root:hover {
-        border-bottom: 2px solid ${borderColorHover};
-        padding-bottom: 0px;
+        border-bottom-color: ${borderColorHover};
     }
 
     :host(.invalid) .root {
-        border-bottom: ${borderWidth} solid ${failColor};
+        border-bottom-color: ${failColor};
     }
 
-    :host(.invalid) .root:hover {
-        border-bottom: 2px solid ${failColor};
-        padding-bottom: 0px;
+    :host([disabled]) .root {
+        border-color: rgba(${borderColorRgbPartial}, 0.1);
     }
 
-    :host([disabled]) .root,
-    :host([disabled]) .root:hover {
-        border-bottom: ${borderWidth} solid ${contentFontColorDisabled};
-        padding-bottom: 1px;
+    :host([readonly]) .root {
+        border: none;
+        padding: ${borderWidth};
     }
 
-    :host([readonly]) .root,
-    :host([readonly]) .root:hover {
-        border: none;
+    @media (prefers-reduced-motion) {
+        .root {
+            transition-duration: 0s;
+        }
     }
 
     .control {
@@ -68,10 +78,17 @@ export const styles = css `
         font: inherit;
         background: transparent;
         color: inherit;
-        height: 28px;
+        padding-top: 0px;
+        padding-bottom: 0px;
+        height: calc(
+            ${controlHeight} - ${borderWidth} -
+                var(--ni-private-hover-bottom-border-width)
+        );
         width: 100%;
         margin-top: auto;
         margin-bottom: auto;
+        padding-left: calc(${standardPadding} / 2);
+        padding-right: calc(${standardPadding} / 2);
         border: none;
     }
 
@@ -113,6 +130,10 @@ export const styles = css `
         text-transform: ${labelTextTransform};
     }
 
+    :host([disabled]) .label {
+        color: ${labelFontColorDisabled};
+    }
+
     :host [part='end'] {
         display: none;
     }
@@ -136,7 +157,39 @@ export const styles = css `
     :host([disabled]) [part='end'] path {
         fill: ${contentFontColorDisabled};
     }
-`.withBehaviors(themeBehavior(css `
+`.withBehaviors(appearanceBehavior(TextFieldAppearance.Underline, css `
+            .root {
+                --ni-private-bottom-border-width: 1px;
+                padding-top: ${borderWidth};
+                padding-left: ${borderWidth};
+                padding-right: ${borderWidth};
+            }
+        `), appearanceBehavior(TextFieldAppearance.Block, css `
+            .root {
+                background-color: rgba(${borderColorRgbPartial}, 0.05);
+                --ni-private-bottom-border-width: 0px;
+                padding-top: ${borderWidth};
+                padding-left: ${borderWidth};
+                padding-right: ${borderWidth};
+            }
+
+            .root:focus-within,
+            :host(.invalid) .root,
+            :host([disabled]) .root {
+                --ni-private-bottom-border-width: 1px;
+            }
+
+            :host([disabled]) .root,
+            :host([readonly]) .root {
+                background-color: transparent;
+            }
+        `), appearanceBehavior(TextFieldAppearance.Outline, css `
+            .root {
+                --ni-private-bottom-border-width: 1px;
+                border-width: ${borderWidth};
+                border-bottom-width: var(--ni-private-bottom-border-width);
+            }
+        `), themeBehavior(css `
             ${'' /* Light theme */}
             .control::-ms-reveal {
                 filter: invert(0%);

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,SAAS,EACT,2BAA2B,EAC3B,UAAU,EACV,QAAQ,EACR,cAAc,EACd,eAAe,EACf,aAAa,EACb,eAAe,EACf,WAAW,EACX,kBAAkB,EAClB,UAAU,EACb,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;uBAGN,UAAU;qBACZ,eAAe;;;iBAGnB,gBAAgB;uBACV,WAAW,MAAM,aAAa;;;;iBAIpC,wBAAwB;;;;;;;;;uBASlB,UAAU;yBACR,WAAW,eAAe,qBAAqB;;oCAEpC,UAAU,oBAAoB,UAAU;;;;;;;;;;;mCAWzC,gBAAgB;;;;;yBAK1B,WAAW,UAAU,SAAS;;;;mCAIpB,SAAS;;;;;;yBAMnB,WAAW,UAAU,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA6BrD,cAAc;2BACJ,2BAA2B;;;;iBAIrC,cAAc;;;;;;;;;;;;iBAYd,wBAAwB;;;;;iBAKxB,cAAc;uBACR,eAAe;qBACjB,aAAa;uBACX,eAAe;uBACf,WAAW;0BACR,kBAAkB;;;;;;;;;;;;;;;kBAe1B,QAAQ;iBACT,QAAQ;;;;gBAIT,SAAS;;;;gBAIT,wBAAwB;;CAEvC,CAAC,aAAa,CACP,aAAa,CACT,GAAG,CAAA;cACD,EAAE,CAAC,iBAAiB;;;;SAIzB,EACG,GAAG,CAAA;cACD,EAAE,CAAC,gBAAgB;;;;SAIxB;AACG,cAAc;AACd,KAAK,CAAC,IAAI;AACV,mBAAmB;AACnB,KAAK,CAAC,KAAK,CACd,CACJ,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,SAAS,EACT,2BAA2B,EAC3B,UAAU,EACV,QAAQ,EACR,cAAc,EACd,sBAAsB,EACtB,eAAe,EACf,aAAa,EACb,eAAe,EACf,WAAW,EACX,kBAAkB,EAClB,UAAU,EACV,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;uBAGN,UAAU;qBACZ,eAAe;;;iBAGnB,gBAAgB;uBACV,WAAW,MAAM,aAAa;;;;iBAIpC,wBAAwB;;;;;;;;;uBASlB,UAAU;oCACG,UAAU,oBAAoB,UAAU;;;iCAG3C,qBAAqB;;;;;;;;;;;;;;;;;;;;+BAoBvB,gBAAgB;;;;+BAIhB,SAAS;;;;6BAIX,qBAAqB;;;;;mBAK/B,WAAW;;;;;;;;;;;;;;;;;cAiBhB,aAAa,MAAM,WAAW;;;;;;6BAMf,eAAe;8BACd,eAAe;;;;;;;;;;;;iBAY5B,cAAc;2BACJ,2BAA2B;;;;iBAIrC,cAAc;;;;;;;;;;;;iBAYd,wBAAwB;;;;;iBAKxB,cAAc;uBACR,eAAe;qBACjB,aAAa;uBACX,eAAe;uBACf,WAAW;0BACR,kBAAkB;;;;iBAI3B,sBAAsB;;;;;;;;;;;;;;;kBAerB,QAAQ;iBACT,QAAQ;;;;gBAIT,SAAS;;;;gBAIT,wBAAwB;;CAEvC,CAAC,aAAa,CACP,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;;+BAGgB,WAAW;gCACV,WAAW;iCACV,WAAW;;SAEnC,CACA,EACD,kBAAkB,CACd,mBAAmB,CAAC,KAAK,EACzB,GAAG,CAAA;;yCAE0B,qBAAqB;;+BAE/B,WAAW;gCACV,WAAW;iCACV,WAAW;;;;;;;;;;;;;SAanC,CACA,EACD,kBAAkB,CACd,mBAAmB,CAAC,OAAO,EAC3B,GAAG,CAAA;;;gCAGiB,WAAW;;;SAGlC,CACA,EACD,aAAa,CACT,GAAG,CAAA;cACD,EAAE,CAAC,iBAAiB;;;;SAIzB,EACG,GAAG,CAAA;cACD,EAAE,CAAC,gBAAgB;;;;SAIxB;AACG,cAAc;AACd,KAAK,CAAC,IAAI;AACV,mBAAmB;AACnB,KAAK,CAAC,KAAK,CACd,CACJ,CAAC"}

package/dist/esm/text-field/types.d.ts

@@ -1,3 +1,21 @@
 import { TextFieldType } from '@microsoft/fast-foundation';
-export { TextFieldType };
+/**
+ * Values for the 'type' attribute of the text field.
+ */
 export declare type TextFieldTypeAttribute = `${TextFieldType}`;
+/**
+ * Values for the 'type' property of the text field.
+ */
+export { TextFieldType };
+/**
+ * Values for the 'appearance' attribute of the text field.
+ */
+export declare type TextFieldAppearanceAttribute = `${TextFieldAppearance}`;
+/**
+ * Values for the 'appearance' property of the text field
+ */
+export declare enum TextFieldAppearance {
+    Underline = "underline",
+    Outline = "outline",
+    Block = "block"
+}

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

@@ -1,3 +1,15 @@
 import { TextFieldType } from '@microsoft/fast-foundation';
+/**
+ * Values for the 'type' property of the text field.
+ */
 export { TextFieldType };
+/**
+ * Values for the 'appearance' property of the text field
+ */
+export var TextFieldAppearance;
+(function (TextFieldAppearance) {
+    TextFieldAppearance["Underline"] = "underline";
+    TextFieldAppearance["Outline"] = "outline";
+    TextFieldAppearance["Block"] = "block";
+})(TextFieldAppearance || (TextFieldAppearance = {}));
 //# sourceMappingURL=types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/text-field/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAE3D,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/text-field/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAO3D;;GAEG;AACH,OAAO,EAAE,aAAa,EAAE,CAAC;AAOzB;;GAEG;AACH,MAAM,CAAN,IAAY,mBAIX;AAJD,WAAY,mBAAmB;IAC3B,8CAAuB,CAAA;IACvB,0CAAmB,CAAA;IACnB,sCAAe,CAAA;AACnB,CAAC,EAJW,mBAAmB,KAAnB,mBAAmB,QAI9B"}

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

@@ -0,0 +1,33 @@
+import { Switch as FoundationSwitch } from '@microsoft/fast-foundation';
+import { ButtonAppearance } from '../patterns/button/types';
+export type { ToggleButton };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-toggle-button': ToggleButton;
+    }
+}
+/**
+ * A nimble-styled toggle button control.
+ */
+declare class ToggleButton extends FoundationSwitch {
+    /**
+     * The appearance the button should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance: ButtonAppearance;
+    /**
+     * Specify as 'true' to hide the text content of the button. The button will
+     * become square, and the text content will be used as the label of the button
+     * for accessibility purposes.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: content-hidden
+     */
+    contentHidden: boolean;
+    readonly control: HTMLElement;
+    connectedCallback(): void;
+}

package/dist/esm/toggle-button/index.js

@@ -0,0 +1,43 @@
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
+import { DesignSystem, Switch as FoundationSwitch } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+import { ButtonAppearance } from '../patterns/button/types';
+/**
+ * A nimble-styled toggle button control.
+ */
+class ToggleButton extends FoundationSwitch {
+    constructor() {
+        super(...arguments);
+        /**
+         * Specify as 'true' to hide the text content of the button. The button will
+         * become square, and the text content will be used as the label of the button
+         * for accessibility purposes.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: content-hidden
+         */
+        this.contentHidden = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.appearance) {
+            this.appearance = ButtonAppearance.Outline;
+        }
+    }
+}
+__decorate([
+    attr
+], ToggleButton.prototype, "appearance", void 0);
+__decorate([
+    attr({ attribute: 'content-hidden', mode: 'boolean' })
+], ToggleButton.prototype, "contentHidden", void 0);
+const nimbleToggleButton = ToggleButton.compose({
+    baseName: 'toggle-button',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToggleButton());
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/toggle-button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,YAAY,EACZ,MAAM,IAAI,gBAAgB,EAE7B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAU5D;;GAEG;AACH,MAAM,YAAa,SAAQ,gBAAgB;IAA3C;;QAWI;;;;;;;;WAQG;QAEI,kBAAa,GAAG,KAAK,CAAC;IAUjC,CAAC;IANU,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;AAtBG;IADC,IAAI;gDACgC;AAYrC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;mDAC1B;AAYjC,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,CAAgB;IAC3D,QAAQ,EAAE,eAAe;IACzB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,kBAAkB,EAAE,CAAC,CAAC"}

package/dist/esm/toggle-button/styles.d.ts

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

package/dist/esm/toggle-button/styles.js

@@ -0,0 +1,31 @@
+import { css } from '@microsoft/fast-element';
+import { focusVisible } from '../utilities/style/focus';
+import { fillColorSelected } from '../theme-provider/design-tokens';
+import { styles as buttonStyles } from '../patterns/button/styles';
+export const styles = css `
+    ${buttonStyles}
+
+    .control[aria-pressed='true'] {
+        background-color: ${fillColorSelected};
+        border-color: ${fillColorSelected};
+    }
+
+    .control[aria-pressed='true']:hover {
+        background-color: ${fillColorSelected};
+    }
+
+    .control[aria-pressed='true']${focusVisible} {
+        background-color: ${fillColorSelected};
+    }
+
+    .control[aria-pressed='true'][disabled] {
+        background-color: ${fillColorSelected};
+        border-color: ${fillColorSelected};
+    }
+
+    .control[aria-pressed='true'][disabled]:hover {
+        background-color: ${fillColorSelected};
+        border-color: ${fillColorSelected};
+    }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/toggle-button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEnE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,YAAY;;;4BAGU,iBAAiB;wBACrB,iBAAiB;;;;4BAIb,iBAAiB;;;mCAGV,YAAY;4BACnB,iBAAiB;;;;4BAIjB,iBAAiB;wBACrB,iBAAiB;;;;4BAIb,iBAAiB;wBACrB,iBAAiB;;CAExC,CAAC"}

package/dist/esm/toggle-button/template.d.ts

@@ -0,0 +1,2 @@
+import type { ToggleButton } from '.';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<ToggleButton, any>;

package/dist/esm/toggle-button/template.js

@@ -0,0 +1,25 @@
+import { html, ref } from '@microsoft/fast-element';
+export const template = html `
+    <div
+        role="button"
+        part="control"
+        aria-pressed="${(x) => x.checked}"
+        aria-disabled="${(x) => x.disabled}"
+        aria-readonly="${(x) => x.readOnly}"
+        aria-labelledby="nimble-toggle-button-content"
+        tabindex="${(x) => (x.disabled ? null : 0)}"
+        @keypress="${(x, c) => x.keypressHandler(c.event)}"
+        @click="${(x, c) => x.clickHandler(c.event)}"
+        class="control ${(x) => (x.checked ? 'checked' : '')}"
+        ?disabled="${x => x.disabled}"
+        ${ref('control')}
+    >
+        <span part="start" class="start">
+            <slot name="start"></slot>
+        </span>
+        <span class="content" part="content" id="nimble-toggle-button-content">
+            <slot></slot>
+        </span>
+    </div>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/toggle-button/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/toggle-button/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAGpD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAc;;;;wBAIlB,CAAC,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO;yBAC7B,CAAC,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;yBAC/B,CAAC,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;;oBAEpC,CAAC,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;qBAC3C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAsB,CAAC;kBACxD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;yBACxC,CAAC,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;qBACrD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;UAC1B,GAAG,CAAC,SAAS,CAAC;;;;;;;;;CASvB,CAAC"}

package/dist/esm/toggle-button/types.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Types of toggle button appearance.
+ * @public
+ */
+export type { ButtonAppearanceAttribute } from '../patterns/button/types';
+export { ButtonAppearance } from '../patterns/button/types';

package/dist/esm/toggle-button/types.js

@@ -0,0 +1,2 @@
+export { ButtonAppearance } from '../patterns/button/types';
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/toggle-button/types.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/esm/{nimble-components/src/button/behaviors.d.ts → utilities/style/appearance.d.ts}

@@ -1,5 +1,4 @@
 import type { Behavior, ElementStyles } from '@microsoft/fast-element';
-import type { ButtonAppearance } from './types';
 /**
  * Behavior that will conditionally apply a stylesheet based on the element's
  * appearance property
@@ -9,4 +8,4 @@ import type { ButtonAppearance } from './types';
  *
  * @public
  */
-export declare function appearanceBehavior(value: ButtonAppearance, styles: ElementStyles): Behavior;
+export declare function appearanceBehavior<AppearanceType>(value: AppearanceType, styles: ElementStyles): Behavior;

package/dist/esm/{button/behaviors.js → utilities/style/appearance.js}

@@ -11,4 +11,4 @@ import { PropertyStyleSheetBehavior } from '@microsoft/fast-foundation';
 export function appearanceBehavior(value, styles) {
     return new PropertyStyleSheetBehavior('appearance', value, styles);
 }
-//# sourceMappingURL=behaviors.js.map
+//# sourceMappingURL=appearance.js.map

package/dist/esm/utilities/style/appearance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"appearance.js","sourceRoot":"","sources":["../../../../src/utilities/style/appearance.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AAGxE;;;;;;;;GAQG;AACH,MAAM,UAAU,kBAAkB,CAC9B,KAAqB,EACrB,MAAqB;IAErB,OAAO,IAAI,0BAA0B,CAAC,YAAY,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AACvE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run build-components && npm run generate-scss && npm run build-storybook",
@@ -42,10 +42,10 @@
   },
   "homepage": "https://github.com/ni/nimble#readme",
   "dependencies": {
-    "@microsoft/fast-animation": "^4.1.5",
-    "@microsoft/fast-element": "^1.6.1",
-    "@microsoft/fast-foundation": "^2.22.0",
-    "@microsoft/fast-web-utilities": "^5.0.2",
+    "@microsoft/fast-animation": "^4.1.8",
+    "@microsoft/fast-element": "^1.7.0",
+    "@microsoft/fast-foundation": "^2.28.0 <2.29.0",
+    "@microsoft/fast-web-utilities": "^5.1.0",
     "@ni/nimble-tokens": "^1.0.0",
     "hex-rgb": "^5.0.0"
   },

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

@@ -1 +0,0 @@
-{"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/styles.js.map

@@ -1 +0,0 @@
-{"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,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,sBAAsB,EACtB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,iBAAiB,EACjB,UAAU,EACV,SAAS,EACT,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;;;;EAIE,CAAC,EACP;;;;;iBAKS,wBAAwB;;;;;;;;kBAQvB,WAAW;;;;;;;;;;;;;;qBAcR,eAAe;iCACH,UAAU;;;;iBAI1B,aAAa;;;;;;;;;;;kCAWI,WAAW,IAAI,gBAAgB;;;;cAInD,YAAY;kCACQ,WAAW,IAAI,gBAAgB;mBAC9C,WAAW,UAAU,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;UA2B9C,SAAS,CAAC,iBAAiB,KAAK,sBAAsB;;;;;;;;;;CAU/D;IACG,kBAAkB;KACjB,aAAa,CACV,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;;yCAG0B,qBAAqB;;;;;oCAK1B,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;;;;;;yCAMhB,qBAAqB;;aAEjD,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,qBAAqB;;;;;6CAKrB,qBAAqB;oCAC9B,gBAAgB;;;0BAG1B,YAAY;6CACO,qBAAqB;oCAC9B,gBAAgB;;;;wCAIZ,iBAAiB;;;;;6CAKZ,qBAAqB;yCACzB,qBAAqB;;aAEjD,CACJ,CACJ,CAAC"}