@ni/nimble-components 11.15.1 → 12.0.1

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

@@ -1,4 +1,5 @@
 import { Breadcrumb as FoundationBreadcrumb } from '@microsoft/fast-foundation';
+import type { BreadcrumbAppearance } from './types';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-breadcrumb': Breadcrumb;
@@ -8,4 +9,5 @@ declare global {
  * A nimble-styled breadcrumb
  */
 export declare class Breadcrumb extends FoundationBreadcrumb {
+    appearance: BreadcrumbAppearance;
 }

package/dist/esm/breadcrumb/index.js

@@ -1,3 +1,5 @@
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
 import { DesignSystem, Breadcrumb as FoundationBreadcrumb, breadcrumbTemplate as template } from '@microsoft/fast-foundation';
 import { styles } from './styles';
 /**
@@ -5,6 +7,9 @@ import { styles } from './styles';
  */
 export class Breadcrumb extends FoundationBreadcrumb {
 }
+__decorate([
+    attr
+], Breadcrumb.prototype, "appearance", void 0);
 const nimbleBreadcrumb = Breadcrumb.compose({
     baseName: 'breadcrumb',
     baseClass: FoundationBreadcrumb,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/breadcrumb/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,UAAU,IAAI,oBAAoB,EAClC,kBAAkB,IAAI,QAAQ,EACjC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAQlC;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,oBAAoB;CAAG;AAEvD,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,CAAC;IACxC,QAAQ,EAAE,YAAY;IACtB,SAAS,EAAE,oBAAoB;IAC/B,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,gBAAgB,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/breadcrumb/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,YAAY,EACZ,UAAU,IAAI,oBAAoB,EAClC,kBAAkB,IAAI,QAAQ,EACjC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AASlC;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,oBAAoB;CAGnD;AADG;IADC,IAAI;8CACmC;AAG5C,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,CAAC;IACxC,QAAQ,EAAE,YAAY;IACtB,SAAS,EAAE,oBAAoB;IAC/B,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,gBAAgB,EAAE,CAAC,CAAC"}

package/dist/esm/breadcrumb/styles.js

@@ -19,7 +19,7 @@ export const styles = css `
         flex-wrap: wrap;
     }
 
-    :host(.prominent-links) {
+    :host([appearance='prominent']) {
         --ni-private-breadcrumb-link-active-font-color: ${bodyFontColor};
     }
 
@@ -35,7 +35,7 @@ export const styles = css `
                 --ni-private-breadcrumb-link-active-font-color: ${DigitalGreenDark};
             }
 
-            :host(.prominent-links) {
+            :host([appearance='prominent']) {
                 --ni-private-breadcrumb-link-font-color: ${DigitalGreenDark};
             }
         `), themeBehavior(Theme.dark, css `
@@ -43,7 +43,7 @@ export const styles = css `
                 --ni-private-breadcrumb-link-active-font-color: ${PowerGreen};
             }
 
-            :host(.prominent-links) {
+            :host([appearance='prominent']) {
                 --ni-private-breadcrumb-link-font-color: ${PowerGreen};
             }
         `), themeBehavior(Theme.color, css `
@@ -51,7 +51,7 @@ export const styles = css `
                 --ni-private-breadcrumb-link-active-font-color: ${hexToRgbaCssColor(White, 0.6)};
             }
 
-            :host(.prominent-links) {
+            :host([appearance='prominent']) {
                 --ni-private-breadcrumb-link-font-color: ${PowerGreen};
             }
         `));

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

@@ -0,0 +1,9 @@
+/**
+ * Predefined icon appearance states
+ * @public
+ */
+export declare const BreadcrumbAppearance: {
+    readonly default: undefined;
+    readonly prominent: "prominent";
+};
+export declare type BreadcrumbAppearance = typeof BreadcrumbAppearance[keyof typeof BreadcrumbAppearance];

package/dist/esm/breadcrumb/types.js

@@ -0,0 +1,9 @@
+/**
+ * Predefined icon appearance states
+ * @public
+ */
+export const BreadcrumbAppearance = {
+    default: undefined,
+    prominent: 'prominent'
+};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/breadcrumb/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAChC,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,WAAW;CAChB,CAAC"}

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

@@ -1,6 +1,6 @@
 import { Button as FoundationButton } from '@microsoft/fast-foundation';
-import type { IButton } from '../patterns/button/types';
-import { ButtonAppearance } from './types';
+import type { ButtonPattern } from '../patterns/button/types';
+import { ButtonAppearance, ButtonAppearanceVariant } from './types';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-button': Button;
@@ -9,13 +9,19 @@ declare global {
 /**
  * A nimble-styled HTML button
  */
-export declare class Button extends FoundationButton implements IButton {
+export declare class Button extends FoundationButton implements ButtonPattern {
     /**
      * @public
      * @remarks
      * HTML Attribute: appearance
      */
     appearance: ButtonAppearance;
+    /**
+     * @public
+     * @remarks
+     * HTML Attribute: appearance-variant
+     */
+    appearanceVariant: ButtonAppearanceVariant;
     /**
      * @public
      * @remarks

package/dist/esm/button/index.js

@@ -26,6 +26,9 @@ export class Button extends FoundationButton {
 __decorate([
     attr
 ], Button.prototype, "appearance", void 0);
+__decorate([
+    attr({ attribute: 'appearance-variant' })
+], Button.prototype, "appearanceVariant", void 0);
 __decorate([
     attr({ attribute: 'content-hidden', mode: 'boolean' })
 ], Button.prototype, "contentHidden", void 0);

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;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAQ3C;;GAEG;AACH,MAAM,OAAO,MAAO,SAAQ,gBAAgB;IAA5C;;QACI;;;;WAIG;QAEI,eAAU,GAAqB,gBAAgB,CAAC,OAAO,CAAC;QAE/D;;;;WAIG;QAEI,kBAAa,GAAG,KAAK,CAAC;IACjC,CAAC;CAAA;AATG;IADC,IAAI;0CAC0D;AAQ/D;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;6CAC1B;AAGjC;;;;;;;;GAQG;AACH,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IAC/C,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,gBAAgB;IAC3B,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;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAA2B,MAAM,SAAS,CAAC;AAQpE;;GAEG;AACH,MAAM,OAAO,MAAO,SAAQ,gBAAgB;IAA5C;;QACI;;;;WAIG;QAEI,eAAU,GAAqB,gBAAgB,CAAC,OAAO,CAAC;QAU/D;;;;WAIG;QAEI,kBAAa,GAAG,KAAK,CAAC;IACjC,CAAC;CAAA;AAjBG;IADC,IAAI;0CAC0D;AAQ/D;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;iDACQ;AAQlD;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;6CAC1B;AAGjC;;;;;;;;GAQG;AACH,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IAC/C,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,gBAAgB;IAC3B,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

@@ -5,44 +5,44 @@ import { styles as buttonStyles } from '../patterns/button/styles';
 import { appearanceBehavior } from '../utilities/style/appearance';
 import { ButtonAppearance } from './types';
 export const styles = buttonStyles.withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
-            :host(.primary) .control {
+            :host([appearance-variant='primary']) .control {
                 box-shadow: 0px 0px 0px ${borderWidth}
                     rgba(${actionRgbPartialColor}, 0.3) inset;
             }
 
-            :host(.primary) .control:hover {
+            :host([appearance-variant='primary']) .control:hover {
                 box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
             }
 
-            :host(.primary) .control${focusVisible} {
+            :host([appearance-variant='primary']) .control${focusVisible} {
                 box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
             }
 
-            :host(.primary) .control:active {
+            :host([appearance-variant='primary']) .control:active {
                 box-shadow: none;
             }
 
-            :host(.primary) .control[disabled] {
+            :host([appearance-variant='primary']) .control[disabled] {
                 box-shadow: none;
             }
         `), appearanceBehavior(ButtonAppearance.block, css `
-            :host(.primary) .control {
+            :host([appearance-variant='primary']) .control {
                 background-clip: padding-box;
                 border-color: rgba(${actionRgbPartialColor}, 0.3);
                 border-width: calc(2 * ${borderWidth});
                 padding: 0 calc(${standardPadding} - ${borderWidth});
             }
 
-            :host(.primary[content-hidden]) .control {
+            :host([appearance-variant='primary'][content-hidden]) .control {
                 padding: 0px;
             }
 
-            :host(.primary) .control:hover {
+            :host([appearance-variant='primary']) .control:hover {
                 border-color: ${borderHoverColor};
                 box-shadow: none;
             }
 
-            :host(.primary) .control${focusVisible} {
+            :host([appearance-variant='primary']) .control${focusVisible} {
                 background-clip: border-box;
                 border-color: ${borderHoverColor};
                 border-width: ${borderWidth};
@@ -50,11 +50,12 @@ export const styles = buttonStyles.withBehaviors(appearanceBehavior(ButtonAppear
                 padding: 0 ${standardPadding};
             }
 
-            :host(.primary[content-hidden]) .control${focusVisible} {
+            :host([appearance-variant='primary'][content-hidden])
+                .control${focusVisible} {
                 padding: 0px;
             }
 
-            :host(.primary) .control:active {
+            :host([appearance-variant='primary']) .control:active {
                 background-clip: border-box;
                 border-color: ${fillSelectedColor};
                 border-width: ${borderWidth};
@@ -62,11 +63,12 @@ export const styles = buttonStyles.withBehaviors(appearanceBehavior(ButtonAppear
                 padding: 0 ${standardPadding};
             }
 
-            :host(.primary[content-hidden]) .control:active {
+            :host([appearance-variant='primary'][content-hidden])
+                .control:active {
                 padding: 0px;
             }
 
-            :host(.primary) .control[disabled] {
+            :host([appearance-variant='primary']) .control[disabled] {
                 background-clip: border-box;
                 border-color: transparent;
                 border-width: ${borderWidth};
@@ -74,7 +76,8 @@ export const styles = buttonStyles.withBehaviors(appearanceBehavior(ButtonAppear
                 padding: 0 ${standardPadding};
             }
 
-            :host(.primary[content-hidden]) .control[disabled] {
+            :host([appearance-variant='primary'][content-hidden])
+                .control[disabled] {
                 padding: 0px;
             }
         `));

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,iBAAiB,EACjB,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,CAAC,MAAM,MAAM,GAAG,YAAY,CAAC,aAAa,CAC5C,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;0CAE+B,WAAW;2BAC1B,qBAAqB;;;;0CAIN,WAAW,IAAI,gBAAgB;;;sCAGnC,YAAY;0CACR,WAAW,IAAI,gBAAgB;;;;;;;;;;SAUhE,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;qCAG0B,qBAAqB;yCACjB,WAAW;kCAClB,eAAe,MAAM,WAAW;;;;;;;;gCAQlC,gBAAgB;;;;sCAIV,YAAY;;gCAElB,gBAAgB;gCAChB,WAAW;0CACD,WAAW,IAAI,gBAAgB;6BAC5C,eAAe;;;sDAGU,YAAY;;;;;;gCAMlC,iBAAiB;gCACjB,WAAW;;6BAEd,eAAe;;;;;;;;;;gCAUZ,WAAW;;6BAEd,eAAe;;;;;;SAMnC,CACJ,CACJ,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,iBAAiB,EACjB,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,CAAC,MAAM,MAAM,GAAG,YAAY,CAAC,aAAa,CAC5C,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;0CAE+B,WAAW;2BAC1B,qBAAqB;;;;0CAIN,WAAW,IAAI,gBAAgB;;;4DAGb,YAAY;0CAC9B,WAAW,IAAI,gBAAgB;;;;;;;;;;SAUhE,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;qCAG0B,qBAAqB;yCACjB,WAAW;kCAClB,eAAe,MAAM,WAAW;;;;;;;;gCAQlC,gBAAgB;;;;4DAIY,YAAY;;gCAExC,gBAAgB;gCAChB,WAAW;0CACD,WAAW,IAAI,gBAAgB;6BAC5C,eAAe;;;;0BAIlB,YAAY;;;;;;gCAMN,iBAAiB;gCACjB,WAAW;;6BAEd,eAAe;;;;;;;;;;;gCAWZ,WAAW;;6BAEd,eAAe;;;;;;;SAOnC,CACJ,CACJ,CAAC"}

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

@@ -5,3 +5,12 @@
 import type { Button } from '@microsoft/fast-foundation';
 export { ButtonAppearance } from '../patterns/button/types';
 export declare type ButtonType = Button['type'];
+/**
+ * Types of button appearance variants.
+ * @public
+ */
+export declare const ButtonAppearanceVariant: {
+    readonly default: undefined;
+    readonly primary: "primary";
+};
+export declare type ButtonAppearanceVariant = typeof ButtonAppearanceVariant[keyof typeof ButtonAppearanceVariant];

package/dist/esm/button/types.js

@@ -1,2 +1,10 @@
 export { ButtonAppearance } from '../patterns/button/types';
+/**
+ * Types of button appearance variants.
+ * @public
+ */
+export const ButtonAppearanceVariant = {
+    default: undefined,
+    primary: 'primary'
+};
 //# 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,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;AAG5D;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACnC,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;CACZ,CAAC"}

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

@@ -1,8 +1,7 @@
 import { Combobox as FoundationCombobox } from '@microsoft/fast-foundation';
-import type { ToggleButton } from '../toggle-button';
-import '../icons/exclamation-mark';
-import '../icons/arrow-expander-down';
-import type { IHasErrorText } from '../patterns/error/types';
+import { ToggleButton } from '../toggle-button';
+import type { ErrorPattern } from '../patterns/error/types';
+import type { DropdownPattern } from '../patterns/dropdown/types';
 import { DropdownAppearance } from '../patterns/dropdown/types';
 declare global {
     interface HTMLElementTagNameMap {
@@ -12,7 +11,7 @@ declare global {
 /**
  * A nimble-styed HTML combobox
  */
-export declare class Combobox extends FoundationCombobox implements IHasErrorText {
+export declare class Combobox extends FoundationCombobox implements DropdownPattern, ErrorPattern {
     appearance: DropdownAppearance;
     /**
      * The ref to the internal dropdown button element.
@@ -27,7 +26,8 @@ export declare class Combobox extends FoundationCombobox implements IHasErrorTex
      * @remarks
      * HTML Attribute: error-text
      */
-    errorText: string | undefined;
+    errorText?: string;
+    errorVisible: boolean;
     private valueUpdatedByInput;
     private valueBeforeTextUpdate?;
     setPositioning(): void;

package/dist/esm/combobox/index.js

@@ -2,9 +2,10 @@ import { __decorate } from "tslib";
 import { attr, html, observable, ref } from '@microsoft/fast-element';
 import { DesignSystem, Combobox as FoundationCombobox, comboboxTemplate as template } from '@microsoft/fast-foundation';
 import { keyArrowDown, keyArrowUp, keyEnter, keySpace } from '@microsoft/fast-web-utilities';
+import { ToggleButton } from '../toggle-button';
 import { errorTextTemplate } from '../patterns/error/template';
-import '../icons/exclamation-mark';
-import '../icons/arrow-expander-down';
+import { IconArrowExpanderDown } from '../icons/arrow-expander-down';
+import { IconExclamationMark } from '../icons/exclamation-mark';
 import { styles } from './styles';
 import { DropdownAppearance } from '../patterns/dropdown/types';
 /**
@@ -14,6 +15,7 @@ export class Combobox extends FoundationCombobox {
     constructor() {
         super(...arguments);
         this.appearance = DropdownAppearance.underline;
+        this.errorVisible = false;
         this.valueUpdatedByInput = false;
     }
     // Workaround for https://github.com/microsoft/fast/issues/5123
@@ -155,6 +157,9 @@ __decorate([
 __decorate([
     attr({ attribute: 'error-text' })
 ], Combobox.prototype, "errorText", void 0);
+__decorate([
+    attr({ attribute: 'error-visible', mode: 'boolean' })
+], Combobox.prototype, "errorVisible", void 0);
 const nimbleCombobox = Combobox.compose({
     baseName: 'combobox',
     baseClass: FoundationCombobox,
@@ -165,11 +170,12 @@ const nimbleCombobox = Combobox.compose({
     },
     end: html `
         <div class="end-slot-container">
-            <nimble-icon-exclamation-mark
-                class="error-icon fail"
-            ></nimble-icon-exclamation-mark>
+            <${DesignSystem.tagFor(IconExclamationMark)}
+                severity="error"
+                class="error-icon"
+            ></${DesignSystem.tagFor(IconExclamationMark)}>
             <div class="separator"></div>
-            <nimble-toggle-button
+            <${DesignSystem.tagFor(ToggleButton)}
                 ${ref('dropdownButton')}
                 appearance="ghost"
                 ?checked="${x => x.open}"
@@ -184,12 +190,12 @@ const nimbleCombobox = Combobox.compose({
                 aria-expanded="${x => x.open}"
                 tabindex="-1"
             >
-                <nimble-icon-arrow-expander-down
+                <${DesignSystem.tagFor(IconArrowExpanderDown)}
                     slot="start"
                     class="dropdown-icon"
                 >
-                </nimble-icon-arrow-expander-down>
-            </nimble-toggle-button>
+                </${DesignSystem.tagFor(IconArrowExpanderDown)}>
+            </${DesignSystem.tagFor(ToggleButton)}>
         </div>
         ${errorTextTemplate}
     `

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

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

package/dist/esm/combobox/styles.js

@@ -23,7 +23,7 @@ export const styles = css `
         color: ${bodyDisabledFontColor};
     }
 
-    :host(.invalid)::after {
+    :host([error-visible])::after {
         border-bottom-color: ${failColor};
     }
 
@@ -35,7 +35,7 @@ export const styles = css `
         border-bottom-color: ${borderHoverColor};
     }
 
-    :host(.invalid) .control {
+    :host([error-visible]) .control {
         border-bottom: var(--ni-private-bottom-border-width) solid ${failColor};
     }
 
@@ -43,8 +43,8 @@ export const styles = css `
         border-color: rgba(${borderRgbPartialColor}, 0.1);
     }
 
-    :host(.invalid[disabled]) .control,
-    :host(.open.invalid) .control {
+    :host([error-visible][disabled]) .control,
+    :host([error-visible][open]) .control {
         border-bottom-color: ${failColor};
     }
 
@@ -98,7 +98,7 @@ export const styles = css `
         display: none;
     }
 `.withBehaviors(appearanceBehavior(DropdownAppearance.block, css `
-            :host(.invalid) .control {
+            :host([error-visible]) .control {
                 border-bottom-width: ${borderWidth};
                 padding-bottom: 0;
             }

package/dist/esm/drawer/styles.js

@@ -71,10 +71,6 @@ export const styles = css `
         height: 100%;
     }
 
-    :host(.hidden) .control {
-        visibility: hidden;
-    }
-
     :host([location='left']) .control {
         left: 0px;
         border-right: ${borderWidth} solid ${popupBoxShadowColor};

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/drawer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,cAAc,EACd,WAAW,EACX,kBAAkB,EACrB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;;;;;;;gBASN,QAAQ;iBACP,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAgCxB,CAAA,8DAA+D,EAAE;;;;sBAIjD,kBAAkB;;;;;;;;;;;;;iBAavB,WAAW;;4BAEA,0BAA0B;;;;;;;;;;;;;;wBAc9B,WAAW,UAAU,mBAAmB;;;;;uBAKzC,WAAW,UAAU,mBAAmB;;;MAGzD;AACE;;;EAGE,CAAC,EACP;;;mBAGe,eAAe;;gBAElB,cAAc;;;;mBAIX,eAAe;;;;;;mBAMf,eAAe;;;;sBAIZ,WAAW,UAAU,gBAAgB;;CAE1D,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/drawer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,cAAc,EACd,WAAW,EACX,kBAAkB,EACrB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;;;;;;;gBASN,QAAQ;iBACP,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAgCxB,CAAA,8DAA+D,EAAE;;;;sBAIjD,kBAAkB;;;;;;;;;;;;;iBAavB,WAAW;;4BAEA,0BAA0B;;;;;;;;;;wBAU9B,WAAW,UAAU,mBAAmB;;;;;uBAKzC,WAAW,UAAU,mBAAmB;;;MAGzD;AACE;;;EAGE,CAAC,EACP;;;mBAGe,eAAe;;gBAElB,cAAc;;;;mBAIX,eAAe;;;;;;mBAMf,eAAe;;;;sBAIZ,WAAW,UAAU,gBAAgB;;CAE1D,CAAC"}

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

@@ -1,11 +1,18 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
 import type { NimbleIcon } from '@ni/nimble-tokens/dist/icons/js';
+import type { IconSeverity } from './types';
 /**
  * The base class for icon components
  */
 export declare class Icon extends FoundationElement {
-    icon: NimbleIcon;
-    constructor(icon: NimbleIcon);
+    readonly icon: NimbleIcon;
+    /**
+     * @public
+     * @remarks
+     * HTML Attribute: severity
+     */
+    severity: IconSeverity;
+    constructor(/** @internal */ icon: NimbleIcon);
 }
 declare type IconClass = typeof Icon;
 export declare const registerIcon: (baseName: string, iconClass: IconClass) => void;

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

@@ -1,3 +1,5 @@
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
 import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
 import { template } from './template';
 import { styles } from './styles';
@@ -5,11 +7,14 @@ import { styles } from './styles';
  * The base class for icon components
  */
 export class Icon extends FoundationElement {
-    constructor(icon) {
+    constructor(/** @internal */ icon) {
         super();
         this.icon = icon;
     }
 }
+__decorate([
+    attr
+], Icon.prototype, "severity", void 0);
 export const registerIcon = (baseName, iconClass) => {
     const composedIcon = iconClass.compose({
         baseName,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/icon-base/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE7E,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC;;GAEG;AACH,MAAM,OAAO,IAAK,SAAQ,iBAAiB;IACvC,YAA0B,IAAgB;QACtC,KAAK,EAAE,CAAC;QADc,SAAI,GAAJ,IAAI,CAAY;IAE1C,CAAC;CACJ;AAID,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,QAAgB,EAAE,SAAoB,EAAQ,EAAE;IACzE,MAAM,YAAY,GAAG,SAAS,CAAC,OAAO,CAAC;QACnC,QAAQ;QACR,QAAQ;QACR,MAAM;QACN,SAAS,EAAE,SAAS;KACvB,CAAC,CAAC;IAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC;AAC7E,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/icon-base/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE7E,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC;;GAEG;AACH,MAAM,OAAO,IAAK,SAAQ,iBAAiB;IASvC,YAAmB,gBAAgB,CAAiB,IAAgB;QAChE,KAAK,EAAE,CAAC;QADwC,SAAI,GAAJ,IAAI,CAAY;IAEpE,CAAC;CACJ;AALG;IADC,IAAI;sCACyB;AASlC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,QAAgB,EAAE,SAAoB,EAAQ,EAAE;IACzE,MAAM,YAAY,GAAG,SAAS,CAAC,OAAO,CAAC;QACnC,QAAQ;QACR,QAAQ;QACR,MAAM;QACN,SAAS,EAAE,SAAS;KACvB,CAAC,CAAC;IAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC;AAC7E,CAAC,CAAC"}

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

@@ -16,19 +16,19 @@ export const styles = css `
         height: 100%;
     }
 
-    :host(.fail) {
+    :host([severity='error']) {
         ${iconColor.cssCustomProperty}: ${failColor};
     }
 
-    :host(.warning) {
+    :host([severity='warning']) {
         ${iconColor.cssCustomProperty}: ${warningColor};
     }
 
-    :host(.pass) {
+    :host([severity='success']) {
         ${iconColor.cssCustomProperty}: ${passColor};
     }
 
-    :host(.information) {
+    :host([severity='information']) {
         ${iconColor.cssCustomProperty}: ${informationColor};
     }
 

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

@@ -1,12 +1,12 @@
 /**
- * Predefined icon status states
+ * Predefined icon appearance states
  * @public
  */
-export declare const IconStatus: {
-    readonly fail: "fail";
+export declare const IconSeverity: {
+    readonly default: undefined;
+    readonly error: "error";
     readonly warning: "warning";
-    readonly pass: "pass";
-    readonly regular: "regular";
+    readonly success: "success";
     readonly information: "information";
 };
-export declare type IconStatus = typeof IconStatus[keyof typeof IconStatus];
+export declare type IconSeverity = typeof IconSeverity[keyof typeof IconSeverity];

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

@@ -1,12 +1,12 @@
 /**
- * Predefined icon status states
+ * Predefined icon appearance states
  * @public
  */
-export const IconStatus = {
-    fail: 'fail',
+export const IconSeverity = {
+    default: undefined,
+    error: 'error',
     warning: 'warning',
-    pass: 'pass',
-    regular: 'regular',
+    success: 'success',
     information: 'information'
 };
 //# 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,CAAC,MAAM,UAAU,GAAG;IACtB,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;IAClB,WAAW,EAAE,aAAa;CACpB,CAAC"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/icon-base/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IACxB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,WAAW,EAAE,aAAa;CACpB,CAAC"}

package/dist/esm/list-option/styles.js

@@ -16,13 +16,13 @@ export const styles = css `
         padding: 8px 4px;
     }
 
-    :host(.selected) {
+    :host([aria-selected='true']) {
         box-shadow: none;
         outline: none;
         background-color: ${fillSelectedColor};
     }
 
-    :host(:hover.selected) {
+    :host([aria-selected='true']:hover) {
         background-color: ${fillHoverSelectedColor};
     }
 

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

@@ -2,7 +2,7 @@ import { FoundationElement } from '@microsoft/fast-foundation';
 import { ButtonAppearance } from '../button/types';
 import type { ToggleButton } from '../toggle-button';
 import { MenuButtonPosition } from './types';
-import type { IButton } from '../patterns/button/types';
+import type { ButtonPattern } from '../patterns/button/types';
 import type { AnchoredRegion } from '../anchored-region';
 declare global {
     interface HTMLElementTagNameMap {
@@ -12,7 +12,7 @@ declare global {
 /**
  * A nimble-styled menu button control.
  */
-export declare class MenuButton extends FoundationElement implements IButton {
+export declare class MenuButton extends FoundationElement implements ButtonPattern {
     appearance: ButtonAppearance;
     disabled: boolean;
     contentHidden: boolean;
@@ -25,11 +25,11 @@ export declare class MenuButton extends FoundationElement implements IButton {
      */
     position: MenuButtonPosition;
     /** @internal */
-    readonly toggleButton: ToggleButton | undefined;
+    readonly toggleButton?: ToggleButton;
     /** @internal */
-    readonly region: AnchoredRegion | undefined;
+    readonly region?: AnchoredRegion;
     /** @internal */
-    readonly slottedMenus: HTMLElement[] | undefined;
+    readonly slottedMenus?: HTMLElement[];
     /**
      * Used to maintain the internal state of whether the last menu item should be focused instead
      * of the first menu item the next time the menu is opened.