@ni/nimble-components 9.0.3 → 10.0.1

package/dist/esm/button/index.js

@@ -14,7 +14,7 @@ export class Button extends FoundationButton {
          * @remarks
          * HTML Attribute: appearance
          */
-        this.appearance = ButtonAppearance.Outline;
+        this.appearance = ButtonAppearance.outline;
         /**
          * @public
          * @remarks

package/dist/esm/button/styles.js

@@ -6,7 +6,7 @@ import { appearanceBehavior } from '../utilities/style/appearance';
 import { ButtonAppearance } from './types';
 // prettier-ignore
 export const styles = buttonStyles
-    .withBehaviors(appearanceBehavior(ButtonAppearance.Outline, css `
+    .withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
                 :host(.primary) .control {
                     box-shadow: 0px 0px 0px ${borderWidth} rgba(${actionRgbPartialColor}, 0.3) inset;
                 }
@@ -26,7 +26,7 @@ export const styles = buttonStyles
                 :host(.primary) .control[disabled] {
                     box-shadow: none;
                 }
-            `), appearanceBehavior(ButtonAppearance.Block, css `
+            `), appearanceBehavior(ButtonAppearance.block, css `
                 :host(.primary) .control {
                     background-clip: padding-box;
                     border-color: rgba(${actionRgbPartialColor}, 0.3);

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

@@ -3,6 +3,5 @@
  * @public
  */
 import type { Button } from '@microsoft/fast-foundation';
-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.map

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

package/dist/esm/drawer/index.js

@@ -16,8 +16,8 @@ const animationDurationWhenDisabledMilliseconds = 0.001;
 export class Drawer extends FoundationDialog {
     constructor() {
         super(...arguments);
-        this.location = DrawerLocation.Left;
-        this.state = DrawerState.Closed;
+        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).
@@ -61,11 +61,11 @@ export class Drawer extends FoundationDialog {
     }
     show() {
         // Not calling super.show() as that will immediately show the drawer, whereas 'Opening' state will animate
-        this.state = DrawerState.Opening;
+        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;
+        this.state = DrawerState.closing;
     }
     /**
      * Handler for overlay clicks (user-initiated dismiss requests) only.
@@ -98,11 +98,11 @@ export class Drawer extends FoundationDialog {
         }
     }
     onHiddenChanged() {
-        if (this.hidden && this.state !== DrawerState.Closed) {
-            this.state = DrawerState.Closed;
+        if (this.hidden && this.state !== DrawerState.closed) {
+            this.state = DrawerState.closed;
         }
-        else if (!this.hidden && this.state === DrawerState.Closed) {
-            this.state = DrawerState.Opened;
+        else if (!this.hidden && this.state === DrawerState.closed) {
+            this.state = DrawerState.opened;
         }
     }
     onLocationChanged() {
@@ -112,18 +112,18 @@ export class Drawer extends FoundationDialog {
         if (this.isConnected) {
             this.cancelCurrentAnimation();
             switch (this.state) {
-                case DrawerState.Opening:
+                case DrawerState.opening:
                     this.animateOpening();
                     this.hidden = false;
                     break;
-                case DrawerState.Opened:
+                case DrawerState.opened:
                     this.hidden = false;
                     break;
-                case DrawerState.Closing:
+                case DrawerState.closing:
                     this.hidden = false;
                     this.animateClosing();
                     break;
-                case DrawerState.Closed:
+                case DrawerState.closed:
                     this.hidden = true;
                     break;
                 default:
@@ -152,7 +152,7 @@ export class Drawer extends FoundationDialog {
             this.animateOpenClose(false);
         }
         else {
-            this.state = DrawerState.Closed;
+            this.state = DrawerState.closed;
         }
     }
     animateOpenClose(drawerOpening) {
@@ -162,7 +162,7 @@ export class Drawer extends FoundationDialog {
                 : animationConfig.slideOutOptions),
             duration: this.animationDurationMilliseconds
         };
-        const drawerKeyframes = this.location === DrawerLocation.Right
+        const drawerKeyframes = this.location === DrawerLocation.right
             ? animationConfig.slideRightKeyframes
             : animationConfig.slideLeftKeyframes;
         const dialogAnimation = new AnimateTo(this.dialog, undefined, options);
@@ -177,8 +177,8 @@ export class Drawer extends FoundationDialog {
         const animationGroup = new AnimateGroup(animations);
         animationGroup.onFinish = () => {
             this.state = drawerOpening
-                ? DrawerState.Opened
-                : DrawerState.Closed;
+                ? DrawerState.opened
+                : DrawerState.closed;
         };
         this.animationGroup = animationGroup;
         animationGroup.play();

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

@@ -1,12 +1,12 @@
-export declare enum DrawerLocation {
-    Left = "left",
-    Right = "right"
-}
-export declare type DrawerLocationAttribute = `${DrawerLocation}`;
-export declare enum DrawerState {
-    Opening = "opening",
-    Opened = "opened",
-    Closing = "closing",
-    Closed = "closed"
-}
-export declare type DrawerStateAttribute = `${DrawerState}`;
+export declare const DrawerLocation: {
+    readonly left: "left";
+    readonly right: "right";
+};
+export declare type DrawerLocation = typeof DrawerLocation[keyof typeof DrawerLocation];
+export declare const DrawerState: {
+    readonly opening: "opening";
+    readonly opened: "opened";
+    readonly closing: "closing";
+    readonly closed: "closed";
+};
+export declare type DrawerState = typeof DrawerState[keyof typeof DrawerState];

package/dist/esm/drawer/types.js

@@ -1,13 +1,11 @@
-export var DrawerLocation;
-(function (DrawerLocation) {
-    DrawerLocation["Left"] = "left";
-    DrawerLocation["Right"] = "right";
-})(DrawerLocation || (DrawerLocation = {}));
-export var DrawerState;
-(function (DrawerState) {
-    DrawerState["Opening"] = "opening";
-    DrawerState["Opened"] = "opened";
-    DrawerState["Closing"] = "closing";
-    DrawerState["Closed"] = "closed";
-})(DrawerState || (DrawerState = {}));
+export const DrawerLocation = {
+    left: 'left',
+    right: 'right'
+};
+export const DrawerState = {
+    opening: 'opening',
+    opened: 'opened',
+    closing: 'closing',
+    closed: 'closed'
+};
 //# sourceMappingURL=types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/drawer/types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,cAGX;AAHD,WAAY,cAAc;IACtB,+BAAa,CAAA;IACb,iCAAe,CAAA;AACnB,CAAC,EAHW,cAAc,KAAd,cAAc,QAGzB;AAGD,MAAM,CAAN,IAAY,WAKX;AALD,WAAY,WAAW;IACnB,kCAAmB,CAAA;IACnB,gCAAiB,CAAA;IACjB,kCAAmB,CAAA;IACnB,gCAAiB,CAAA;AACrB,CAAC,EALW,WAAW,KAAX,WAAW,QAKtB"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/drawer/types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GAAG;IAC1B,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;CACR,CAAC;AAGX,MAAM,CAAC,MAAM,WAAW,GAAG;IACvB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACV,CAAC"}

package/dist/esm/icon-base/types.d.ts

@@ -2,10 +2,10 @@
  * Predefined icon status states
  * @public
  */
-export declare enum IconStatus {
-    Fail = "fail",
-    Warning = "warning",
-    Pass = "pass",
-    Regular = "regular"
-}
-export declare type IconStatusAttribute = `${IconStatus}`;
+export declare const IconStatus: {
+    readonly fail: "fail";
+    readonly warning: "warning";
+    readonly pass: "pass";
+    readonly regular: "regular";
+};
+export declare type IconStatus = typeof IconStatus[keyof typeof IconStatus];

package/dist/esm/icon-base/types.js

@@ -2,11 +2,10 @@
  * Predefined icon status states
  * @public
  */
-export var IconStatus;
-(function (IconStatus) {
-    IconStatus["Fail"] = "fail";
-    IconStatus["Warning"] = "warning";
-    IconStatus["Pass"] = "pass";
-    IconStatus["Regular"] = "regular";
-})(IconStatus || (IconStatus = {}));
+export const IconStatus = {
+    fail: 'fail',
+    warning: 'warning',
+    pass: 'pass',
+    regular: 'regular'
+};
 //# sourceMappingURL=types.js.map

package/dist/esm/icon-base/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/icon-base/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAN,IAAY,UAKX;AALD,WAAY,UAAU;IAClB,2BAAa,CAAA;IACb,iCAAmB,CAAA;IACnB,2BAAa,CAAA;IACb,iCAAmB,CAAA;AACvB,CAAC,EALW,UAAU,KAAV,UAAU,QAKrB"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/icon-base/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACtB,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;CACZ,CAAC"}

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

@@ -12,7 +12,7 @@ import { MenuButtonPosition } from './types';
 export class MenuButton extends FoundationElement {
     constructor() {
         super(...arguments);
-        this.appearance = ButtonAppearance.Outline;
+        this.appearance = ButtonAppearance.outline;
         this.disabled = false;
         this.contentHidden = false;
         /**

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

@@ -2,7 +2,6 @@
  * Types of menu button appearance.
  * @public
  */
-export type { ButtonAppearanceAttribute } from '../patterns/button/types';
 export { ButtonAppearance } from '../patterns/button/types';
 /**
  * The options of where to position the menu relative to the menu button.

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

@@ -1,8 +1,11 @@
+/**
+ * Types of menu button appearance.
+ * @public
+ */
 export { ButtonAppearance } from '../patterns/button/types';
 /**
  * The options of where to position the menu relative to the menu button.
  */
-// eslint-disable-next-line @typescript-eslint/naming-convention
 export const MenuButtonPosition = {
     above: 'above',
     below: 'below',

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/menu-button/types.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D;;GAEG;AACH,gEAAgE;AAChE,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAC9B,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;CACN,CAAC"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/menu-button/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAC9B,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;CACN,CAAC"}

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

@@ -3,6 +3,5 @@
  * @public
  */
 import type { Button } from '@microsoft/fast-foundation';
-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/drawer/types.d.ts

@@ -1,12 +1,12 @@
-export declare enum DrawerLocation {
-    Left = "left",
-    Right = "right"
-}
-export declare type DrawerLocationAttribute = `${DrawerLocation}`;
-export declare enum DrawerState {
-    Opening = "opening",
-    Opened = "opened",
-    Closing = "closing",
-    Closed = "closed"
-}
-export declare type DrawerStateAttribute = `${DrawerState}`;
+export declare const DrawerLocation: {
+    readonly left: "left";
+    readonly right: "right";
+};
+export declare type DrawerLocation = typeof DrawerLocation[keyof typeof DrawerLocation];
+export declare const DrawerState: {
+    readonly opening: "opening";
+    readonly opened: "opened";
+    readonly closing: "closing";
+    readonly closed: "closed";
+};
+export declare type DrawerState = typeof DrawerState[keyof typeof DrawerState];

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

@@ -2,10 +2,10 @@
  * Predefined icon status states
  * @public
  */
-export declare enum IconStatus {
-    Fail = "fail",
-    Warning = "warning",
-    Pass = "pass",
-    Regular = "regular"
-}
-export declare type IconStatusAttribute = `${IconStatus}`;
+export declare const IconStatus: {
+    readonly fail: "fail";
+    readonly warning: "warning";
+    readonly pass: "pass";
+    readonly regular: "regular";
+};
+export declare type IconStatus = typeof IconStatus[keyof typeof IconStatus];

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

@@ -2,7 +2,6 @@
  * Types of menu button appearance.
  * @public
  */
-export type { ButtonAppearanceAttribute } from '../patterns/button/types';
 export { ButtonAppearance } from '../patterns/button/types';
 /**
  * The options of where to position the menu relative to the menu button.

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

@@ -22,9 +22,9 @@ export interface IButton {
  * Types of button appearance.
  * @public
  */
-export declare enum ButtonAppearance {
-    Outline = "outline",
-    Ghost = "ghost",
-    Block = "block"
-}
-export declare type ButtonAppearanceAttribute = `${ButtonAppearance}`;
+export declare const ButtonAppearance: {
+    readonly outline: "outline";
+    readonly ghost: "ghost";
+    readonly block: "block";
+};
+export declare type ButtonAppearance = typeof ButtonAppearance[keyof typeof ButtonAppearance];

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

@@ -1,8 +1,7 @@
 import { TextAreaResize } from '@microsoft/fast-foundation';
 export { TextAreaResize };
-export declare type TextAreaResizeAttribute = `${TextAreaResize}`;
-export declare enum TextAreaAppearance {
-    Outline = "outline",
-    Block = "block"
-}
-export declare type TextAreaAppearanceAttribute = `${TextAreaAppearance}`;
+export declare const TextAreaAppearance: {
+    readonly outline: "outline";
+    readonly block: "block";
+};
+export declare type TextAreaAppearance = typeof TextAreaAppearance[keyof typeof TextAreaAppearance];

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

@@ -1,22 +1,15 @@
 import { TextFieldType } from '@microsoft/fast-foundation';
-/**
- * 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",
-    Frameless = "frameless"
-}
+export declare const TextFieldAppearance: {
+    readonly underline: "underline";
+    readonly outline: "outline";
+    readonly block: "block";
+    readonly frameless: "frameless";
+};
+export declare type TextFieldAppearance = typeof TextFieldAppearance[keyof typeof TextFieldAppearance];

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

@@ -1,6 +1,6 @@
-export declare enum Theme {
-    Light = "light",
-    Dark = "dark",
-    Color = "color"
-}
-export declare type ThemeAttribute = `${Theme}`;
+export declare const Theme: {
+    readonly light: "light";
+    readonly dark: "dark";
+    readonly color: "color";
+};
+export declare type Theme = typeof Theme[keyof typeof Theme];

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

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

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

@@ -1,8 +1,8 @@
 export declare const pinnedSelectedAttribute = "pinned-selected";
 export declare const groupSelectedAttribute = "group-selected";
-export declare enum TreeViewSelectionMode {
-    All = "all",
-    LeavesOnly = "leaves-only",
-    None = "none"
-}
-export declare type TreeViewSelectionModeAttribute = `${TreeViewSelectionMode}`;
+export declare const TreeViewSelectionMode: {
+    readonly all: "all";
+    readonly leavesOnly: "leaves-only";
+    readonly none: "none";
+};
+export declare type TreeViewSelectionMode = typeof TreeViewSelectionMode[keyof typeof TreeViewSelectionMode];

package/dist/esm/nimble-components/src/utilities/style/theme.d.ts

@@ -1,8 +1,8 @@
 import { Behavior, ElementStyles, FASTElement } from '@microsoft/fast-element';
 import type { Theme } from '../../theme-provider/types';
 export declare type LightStyle = ElementStyles | null;
-export declare type DarkStyleOrAlias = ElementStyles | null | Theme.Light;
-export declare type ColorStyleOrAlias = ElementStyles | null | Theme.Light | Theme.Dark;
+export declare type DarkStyleOrAlias = ElementStyles | null | Extract<Theme, 'light'>;
+export declare type ColorStyleOrAlias = ElementStyles | null | Extract<Theme, 'light' | 'dark'>;
 /**
  * Behavior to conditionally apply theme-based stylesheets.
  */
@@ -32,9 +32,9 @@ declare class ThemeStyleSheetBehavior implements Behavior {
  * css`
  *  // ...
  * `.withBehaviors(new ThemeStyleSheetBehavior(
- *   css`:host { ... Theme.Light style... }`),
- *   null, // No style needed for Theme.Dark style
- *   Theme.Light // For the Theme.Color style, re-use the previously set Theme.Light style
+ *   css`:host { ... Theme.light style... }`),
+ *   null, // No style needed for Theme.dark style
+ *   Theme.light // For the Theme.color style, re-use the previously set Theme.light style
  * )
  * ```
  */

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

@@ -125,7 +125,7 @@ export const styles = css `
     }
 `
     // prettier-ignore
-    .withBehaviors(appearanceBehavior(ButtonAppearance.Outline, css `
+    .withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
                 .control {
                     background-color: transparent;
                     border-color: rgba(${actionRgbPartialColor}, 0.3);
@@ -150,7 +150,7 @@ export const styles = css `
                     background-color: transparent;
                     border-color: rgba(${borderRgbPartialColor}, 0.2);
                 }
-            `), appearanceBehavior(ButtonAppearance.Ghost, css `
+            `), appearanceBehavior(ButtonAppearance.ghost, css `
                 .control {
                     background-color: transparent;
                     border-color: transparent;
@@ -175,7 +175,7 @@ export const styles = css `
                     background-color: transparent;
                     border-color: transparent;
                 }
-            `), appearanceBehavior(ButtonAppearance.Block, css `
+            `), appearanceBehavior(ButtonAppearance.block, css `
                 .control {
                     background-color: rgba(${borderRgbPartialColor}, 0.1);
                     border-color: transparent;

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

@@ -22,9 +22,9 @@ export interface IButton {
  * Types of button appearance.
  * @public
  */
-export declare enum ButtonAppearance {
-    Outline = "outline",
-    Ghost = "ghost",
-    Block = "block"
-}
-export declare type ButtonAppearanceAttribute = `${ButtonAppearance}`;
+export declare const ButtonAppearance: {
+    readonly outline: "outline";
+    readonly ghost: "ghost";
+    readonly block: "block";
+};
+export declare type ButtonAppearance = typeof ButtonAppearance[keyof typeof ButtonAppearance];

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/patterns/button/types.ts"],"names":[],"mappings":"AAuBA;;;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/patterns/button/types.ts"],"names":[],"mappings":"AAuBA;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;CACR,CAAC"}

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

@@ -16,7 +16,7 @@ export class TextArea extends FoundationTextArea {
          * @remarks
          * HTML Attribute: appearance
          */
-        this.appearance = TextAreaAppearance.Outline;
+        this.appearance = TextAreaAppearance.outline;
     }
 }
 __decorate([

package/dist/esm/text-area/styles.js

@@ -102,12 +102,12 @@ export const styles = css `
     }
 `
     // prettier-ignore
-    .withBehaviors(appearanceBehavior(TextAreaAppearance.Outline, css `
+    .withBehaviors(appearanceBehavior(TextAreaAppearance.outline, css `
                 .control {
                     border-color: rgba(${borderRgbPartialColor}, 0.3);
                     background-color: transparent;
                 }
-            `), appearanceBehavior(TextAreaAppearance.Block, css `
+            `), appearanceBehavior(TextAreaAppearance.block, css `
                 .control {
                     background-color: rgba(${borderRgbPartialColor}, 0.1);
                 }

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

@@ -1,8 +1,7 @@
 import { TextAreaResize } from '@microsoft/fast-foundation';
 export { TextAreaResize };
-export declare type TextAreaResizeAttribute = `${TextAreaResize}`;
-export declare enum TextAreaAppearance {
-    Outline = "outline",
-    Block = "block"
-}
-export declare type TextAreaAppearanceAttribute = `${TextAreaAppearance}`;
+export declare const TextAreaAppearance: {
+    readonly outline: "outline";
+    readonly block: "block";
+};
+export declare type TextAreaAppearance = typeof TextAreaAppearance[keyof typeof TextAreaAppearance];

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

@@ -1,8 +1,7 @@
 import { TextAreaResize } from '@microsoft/fast-foundation';
 export { TextAreaResize };
-export var TextAreaAppearance;
-(function (TextAreaAppearance) {
-    TextAreaAppearance["Outline"] = "outline";
-    TextAreaAppearance["Block"] = "block";
-})(TextAreaAppearance || (TextAreaAppearance = {}));
+export const TextAreaAppearance = {
+    outline: 'outline',
+    block: 'block'
+};
 //# sourceMappingURL=types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/text-area/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAE5D,OAAO,EAAE,cAAc,EAAE,CAAC;AAG1B,MAAM,CAAN,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC1B,yCAAmB,CAAA;IACnB,qCAAe,CAAA;AACnB,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,QAG7B"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/text-area/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAE5D,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAC9B,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;CACR,CAAC"}

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

@@ -17,7 +17,7 @@ export class TextField extends FoundationTextField {
          * @remarks
          * HTML Attribute: appearance
          */
-        this.appearance = TextFieldAppearance.Underline;
+        this.appearance = TextFieldAppearance.underline;
     }
     connectedCallback() {
         super.connectedCallback();