@ni/nimble-components 11.15.1 → 12.0.0

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

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

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

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

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

@@ -1,13 +1,14 @@
 import { elements, html, ref, slotted, when } from '@microsoft/fast-element';
+import { DesignSystem } from '@microsoft/fast-foundation';
 import { ToggleButton } from '../toggle-button';
 import { AnchoredRegion } from '../anchored-region';
 // prettier-ignore
-export const template = context => html `
+export const template = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
     >
-        <${context.tagFor(ToggleButton)}
+        <${DesignSystem.tagFor(ToggleButton)}
             part="button"
             appearance="${x => x.appearance}"
             ?content-hidden="${x => x.contentHidden}"
@@ -24,9 +25,9 @@ export const template = context => html `
             <slot slot="start" name="start"></slot>
             <slot></slot>
             <slot slot="end" name="end"></slot>
-        </${context.tagFor(ToggleButton)}>
+        </${DesignSystem.tagFor(ToggleButton)}>
         ${when(x => x.open, html `
-            <${context.tagFor(AnchoredRegion)}
+            <${DesignSystem.tagFor(AnchoredRegion)}
                 fixed-placement="true"
                 auto-update-mode="auto"
                 horizontal-inset="true"
@@ -40,7 +41,7 @@ export const template = context => html `
                 <span part="menu">
                     <slot name="menu" ${slotted({ property: 'slottedMenus', filter: elements('[role=menu]') })}></slot>
                 </span>
-            </${context.tagFor(AnchoredRegion)}>
+            </${DesignSystem.tagFor(AnchoredRegion)}>
         `)}
     </template>
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/menu-button/template.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,QAAQ,EACR,IAAI,EACJ,GAAG,EACH,OAAO,EAEP,IAAI,EACP,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAwD,OAAO,CAAC,EAAE,CAAC,IAAI,CAAY;;iBAEvF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;qBACP,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAmB,CAAC;;WAE5D,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC;;0BAEb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;+BACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa;wBAC3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;yBACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;6BAEX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;uBACjB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,KAAK,CAAC;wBACpD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,KAAsB,CAAC;cAC1E,GAAG,CAAC,cAAc,CAAC;;;cAGnB,EAAE,CAAC,wFAAwF;;;;YAI7F,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC;UAC9B,IAAI,CACN,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EACX,IAAI,CAAY;eACT,OAAO,CAAC,MAAM,CAAC,cAAc,CAAC;;;;;6CAKA,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC;6CAC1D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;2BAClE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE;4BAC3B,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAsB,CAAC;kBAClE,GAAG,CAAC,QAAQ,CAAC;;;wCAGS,OAAO,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,EAAE,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;;gBAE9F,OAAO,CAAC,MAAM,CAAC,cAAc,CAAC;SACrC,CACJ;;CAEJ,CAAC"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/menu-button/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAY;;iBAEvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;qBACP,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAmB,CAAC;;WAE5D,YAAY,CAAC,MAAM,CAAC,YAAY,CAAC;;0BAElB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;+BACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa;wBAC3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;yBACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;6BAEX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;uBACjB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,KAAK,CAAC;wBACpD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,KAAsB,CAAC;cAC1E,GAAG,CAAC,cAAc,CAAC;;;cAGnB,EAAE,CAAC,wFAAwF;;;;YAI7F,YAAY,CAAC,MAAM,CAAC,YAAY,CAAC;UACnC,IAAI,CACN,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EACX,IAAI,CAAY;eACT,YAAY,CAAC,MAAM,CAAC,cAAc,CAAC;;;;;6CAKL,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC;6CAC1D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;2BAClE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE;4BAC3B,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAsB,CAAC;kBAClE,GAAG,CAAC,QAAQ,CAAC;;;wCAGS,OAAO,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,EAAE,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;;gBAE9F,YAAY,CAAC,MAAM,CAAC,cAAc,CAAC;SAC1C,CACJ;;CAEJ,CAAC"}

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

@@ -1,8 +1,6 @@
 import { NumberField as FoundationNumberField } from '@microsoft/fast-foundation';
 import { NumberFieldAppearance } from './types';
-import '../icons/add';
-import '../icons/exclamation-mark';
-import '../icons/minus-wide';
+import type { ErrorPattern } from '../patterns/error/types';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-number-field': NumberField;
@@ -11,7 +9,7 @@ declare global {
 /**
  * A nimble-styled HTML number input
  */
-export declare class NumberField extends FoundationNumberField {
+export declare class NumberField extends FoundationNumberField implements ErrorPattern {
     appearance: NumberFieldAppearance;
     /**
      * A message explaining why the value is invalid.
@@ -20,6 +18,7 @@ export declare class NumberField extends FoundationNumberField {
      * @remarks
      * HTML Attribute: error-text
      */
-    errorText: string | undefined;
+    errorText?: string;
+    errorVisible: boolean;
     connectedCallback(): void;
 }

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

@@ -4,9 +4,10 @@ import { DesignSystem, NumberField as FoundationNumberField, numberFieldTemplate
 import { styles } from './styles';
 import { NumberFieldAppearance } from './types';
 import { errorTextTemplate } from '../patterns/error/template';
-import '../icons/add';
-import '../icons/exclamation-mark';
-import '../icons/minus-wide';
+import { Button } from '../button';
+import { IconMinusWide } from '../icons/minus-wide';
+import { IconAdd } from '../icons/add';
+import { IconExclamationMark } from '../icons/exclamation-mark';
 /**
  * A nimble-styled HTML number input
  */
@@ -14,6 +15,7 @@ export class NumberField extends FoundationNumberField {
     constructor() {
         super(...arguments);
         this.appearance = NumberFieldAppearance.underline;
+        this.errorVisible = false;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -27,6 +29,9 @@ __decorate([
 __decorate([
     attr({ attribute: 'error-text' })
 ], NumberField.prototype, "errorText", void 0);
+__decorate([
+    attr({ attribute: 'error-visible', mode: 'boolean' })
+], NumberField.prototype, "errorVisible", void 0);
 /**
  * A function that returns a number-field registration for configuring the component with a DesignSystem.
  *
@@ -44,31 +49,37 @@ const nimbleNumberField = NumberField.compose({
         delegatesFocus: true
     },
     stepDownGlyph: html `
-        <nimble-button
+        <${DesignSystem.tagFor(Button)}
             class="step-up-down-button"
             appearance="ghost"
             content-hidden
             tabindex="-1"
         >
             "Decrement"
-            <nimble-icon-minus-wide slot="start"></nimble-icon-minus-wide>
-        </nimble-button>
+            <${DesignSystem.tagFor(IconMinusWide)}
+                slot="start"
+            >
+            </${DesignSystem.tagFor(IconMinusWide)}>
+        </${DesignSystem.tagFor(Button)}>
     `,
     stepUpGlyph: html `
-        <nimble-button
+        <${DesignSystem.tagFor(Button)}
             class="step-up-down-button"
             appearance="ghost"
             content-hidden
             tabindex="-1"
         >
             "Increment"
-            <nimble-icon-add slot="start"></nimble-icon-add>
-        </nimble-button>
+            <${DesignSystem.tagFor(IconAdd)}
+                slot="start">
+            </${DesignSystem.tagFor(IconAdd)}>
+        </${DesignSystem.tagFor(Button)}>
     `,
     end: html `
-        <nimble-icon-exclamation-mark
-            class="error-icon fail"
-        ></nimble-icon-exclamation-mark>
+        <${DesignSystem.tagFor(IconExclamationMark)}
+            severity="error"
+            class="error-icon"
+        ></${DesignSystem.tagFor(IconExclamationMark)}>
         ${errorTextTemplate}
     `
 });

package/dist/esm/number-field/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/number-field/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EACH,YAAY,EACZ,WAAW,IAAI,qBAAqB,EAEpC,mBAAmB,IAAI,QAAQ,EAClC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,cAAc,CAAC;AACtB,OAAO,2BAA2B,CAAC;AACnC,OAAO,qBAAqB,CAAC;AAQ7B;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,qBAAqB;IAAtD;;QAEW,eAAU,GAA0B,qBAAqB,CAAC,SAAS,CAAC;IAkB/E,CAAC;IANmB,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,qFAAqF;QACrF,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IACpD,CAAC;CACJ;AAlBG;IADC,IAAI;+CACsE;AAU3E;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;8CACG;AAUzC;;;;;;;GAOG;AACH,MAAM,iBAAiB,GAAG,WAAW,CAAC,OAAO,CAAqB;IAC9D,QAAQ,EAAE,cAAc;IACxB,SAAS,EAAE,qBAAqB;IAChC,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;IACD,aAAa,EAAE,IAAI,CAAA;;;;;;;;;;KAUlB;IACD,WAAW,EAAE,IAAI,CAAA;;;;;;;;;;KAUhB;IACD,GAAG,EAAE,IAAI,CAAa;;;;UAIhB,iBAAiB;KACtB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/number-field/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EACH,YAAY,EACZ,WAAW,IAAI,qBAAqB,EAEpC,mBAAmB,IAAI,QAAQ,EAClC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAQhE;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,qBAAqB;IAAtD;;QAEW,eAAU,GAA0B,qBAAqB,CAAC,SAAS,CAAC;QAapE,iBAAY,GAAG,KAAK,CAAC;IAQhC,CAAC;IANmB,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,qFAAqF;QACrF,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IACpD,CAAC;CACJ;AArBG;IADC,IAAI;+CACsE;AAU3E;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;8CACR;AAG1B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;iDAC1B;AAUhC;;;;;;;GAOG;AACH,MAAM,iBAAiB,GAAG,WAAW,CAAC,OAAO,CAAqB;IAC9D,QAAQ,EAAE,cAAc;IACxB,SAAS,EAAE,qBAAqB;IAChC,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;IACD,aAAa,EAAE,IAAI,CAAA;WACZ,YAAY,CAAC,MAAM,CAAC,MAAM,CAAC;;;;;;;eAOvB,YAAY,CAAC,MAAM,CAAC,aAAa,CAAC;;;gBAGjC,YAAY,CAAC,MAAM,CAAC,aAAa,CAAC;YACtC,YAAY,CAAC,MAAM,CAAC,MAAM,CAAC;KAClC;IACD,WAAW,EAAE,IAAI,CAAA;WACV,YAAY,CAAC,MAAM,CAAC,MAAM,CAAC;;;;;;;eAOvB,YAAY,CAAC,MAAM,CAAC,OAAO,CAAC;;gBAE3B,YAAY,CAAC,MAAM,CAAC,OAAO,CAAC;YAChC,YAAY,CAAC,MAAM,CAAC,MAAM,CAAC;KAClC;IACD,GAAG,EAAE,IAAI,CAAa;WACf,YAAY,CAAC,MAAM,CAAC,mBAAmB,CAAC;;;aAGtC,YAAY,CAAC,MAAM,CAAC,mBAAmB,CAAC;UAC3C,iBAAiB;KACtB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAC"}

package/dist/esm/number-field/styles.js

@@ -55,7 +55,7 @@ export const styles = css `
         border-color: rgba(${borderRgbPartialColor}, 0.1);
     }
 
-    :host(.invalid) .root {
+    :host([error-visible]) .root {
         border-bottom-color: ${failColor};
     }
 
@@ -84,7 +84,7 @@ export const styles = css `
         }
     }
 
-    :host(.invalid) .root::after {
+    :host([error-visible]) .root::after {
         border-bottom-color: ${failColor};
     }
 
@@ -132,7 +132,8 @@ export const styles = css `
     }
 
     ${
-/* We are using flex `order` to define the visual ordering of the inc/dec buttons and the invalid icon because they are not "interactive" i.e. part of the tab order */ ''}
+/* We are using flex `order` to define the visual ordering of the inc/dec buttons
+ and the invalid icon because they are not "interactive" i.e. part of the tab order */ ''}
     .step-up {
         order: 3;
         padding-right: calc(${standardPadding} / 4);
@@ -165,7 +166,7 @@ export const styles = css `
             }
 
             .root:focus-within,
-            :host(.invalid) .root {
+            :host([error-visible]) .root {
                 border-bottom-width: ${borderWidth};
                 padding-bottom: 0;
             }

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/number-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,UAAU,EACV,QAAQ,EACR,SAAS,EACT,eAAe,EACf,6BAA6B,EAChC,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEjE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;MACvB,WAAW;;;gBAGD,QAAQ;;;iBAGP,aAAa;uBACP,WAAW,MAAM,aAAa;mDACF,WAAW;;cAEhD,aAAa,UAAU,WAAW;;;;;iBAK/B,qBAAqB;;;;;;iBAMrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;iCAWb,qBAAqB;mBACnC,WAAW;;;;+BAIC,gBAAgB;;;;6BAIlB,qBAAqB;;;;+BAInB,SAAS;;;;UAI9B,CAAA,yCAA0C,EAAE;;;;;;;;;;4BAU1B,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;;;;;6BAwBX,eAAe;;;;;;;;;;;iBAW3B,qBAAqB;;;;iBAIrB,qBAAqB;;;;;;;MAOhC;AACE,uKAAuK,CAAC,EAC5K;;;8BAG0B,eAAe;;;;;;;;UAQnC,aAAa,CAAC,iBAAiB;;;;;;;;;8BASX,eAAe;;CAE5C,CAAC,aAAa,CACX,kBAAkB,CACd,qBAAqB,CAAC,SAAS,EAC/B,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,kBAAkB,CACd,qBAAqB,CAAC,KAAK,EAC3B,GAAG,CAAA;;yCAE8B,qBAAqB;;;;;uCAKvB,WAAW;;;;;;;;;yCAST,qBAAqB;;SAErD,CACJ,EACD,kBAAkB,CACd,qBAAqB,CAAC,OAAO,EAC7B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,CACJ,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/number-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,UAAU,EACV,QAAQ,EACR,SAAS,EACT,eAAe,EACf,6BAA6B,EAChC,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEjE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;MACvB,WAAW;;;gBAGD,QAAQ;;;iBAGP,aAAa;uBACP,WAAW,MAAM,aAAa;mDACF,WAAW;;cAEhD,aAAa,UAAU,WAAW;;;;;iBAK/B,qBAAqB;;;;;;iBAMrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;iCAWb,qBAAqB;mBACnC,WAAW;;;;+BAIC,gBAAgB;;;;6BAIlB,qBAAqB;;;;+BAInB,SAAS;;;;UAI9B,CAAA,yCAA0C,EAAE;;;;;;;;;;4BAU1B,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;;;;;6BAwBX,eAAe;;;;;;;;;;;iBAW3B,qBAAqB;;;;iBAIrB,qBAAqB;;;;;;;MAOhC;AACE;sFACsF,CAAC,EAC3F;;;8BAG0B,eAAe;;;;;;;;UAQnC,aAAa,CAAC,iBAAiB;;;;;;;;;8BASX,eAAe;;CAE5C,CAAC,aAAa,CACX,kBAAkB,CACd,qBAAqB,CAAC,SAAS,EAC/B,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,kBAAkB,CACd,qBAAqB,CAAC,KAAK,EAC3B,GAAG,CAAA;;yCAE8B,qBAAqB;;;;;uCAKvB,WAAW;;;;;;;;;yCAST,qBAAqB;;SAErD,CACJ,EACD,kBAAkB,CACd,qBAAqB,CAAC,OAAO,EAC7B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,CACJ,CAAC"}

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

@@ -2,7 +2,7 @@
  * The interface that buttons of various types implement. The properties in this interface
  * are leveraged by the shared button pattern css.
  */
-export interface IButton {
+export interface ButtonPattern {
     /**
      * The appearance the button should have.
      */

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

@@ -84,7 +84,7 @@ export const styles = css `
         padding: ${borderWidth};
     }
 
-    :host(.open:not(:hover)) .control {
+    :host([open]:not(:hover)) .control {
         border-bottom-color: ${borderHoverColor};
     }
 

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

@@ -1,3 +1,11 @@
+import type { ErrorPattern } from '../error/types';
+/**
+ * The interface that dropdowns of various types implement. The properties in this interface
+ * are leveraged by the shared dropdown pattern css.
+ */
+export interface DropdownPattern extends ErrorPattern {
+    position?: DropdownPosition;
+}
 export declare const DropdownPosition: {
     readonly above: "above";
     readonly below: "below";

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

@@ -1,7 +1,6 @@
-import { SelectPosition } from '@microsoft/fast-foundation';
 export const DropdownPosition = {
-    above: SelectPosition.above,
-    below: SelectPosition.below
+    above: 'above',
+    below: 'below'
 };
 export const DropdownAppearance = {
     underline: 'underline',

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/patterns/dropdown/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAE5D,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,KAAK,EAAE,cAAc,CAAC,KAAK;CACrB,CAAC;AAIX,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAC9B,SAAS,EAAE,WAAW;IACtB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;CACR,CAAC"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/patterns/dropdown/types.ts"],"names":[],"mappings":"AAUA,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;CACR,CAAC;AAIX,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAC9B,SAAS,EAAE,WAAW;IACtB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;CACR,CAAC"}

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

@@ -5,7 +5,7 @@ export const styles = css `
         display: none;
     }
 
-    :host(.invalid) .error-icon {
+    :host([error-visible]) .error-icon {
         display: inline-flex;
         width: ${iconSize};
         height: ${iconSize};
@@ -16,7 +16,7 @@ export const styles = css `
         display: none;
     }
 
-    :host(.invalid) .error-text {
+    :host([error-visible]) .error-text {
         display: block;
         font: ${errorTextFont};
         color: ${failColor};
@@ -29,11 +29,11 @@ export const styles = css `
         white-space: nowrap;
     }
 
-    :host(.invalid[readonly]:not([disabled])) .error-text {
+    :host([error-visible][readonly]:not([disabled])) .error-text {
         top: calc(${controlHeight} - ${borderWidth});
     }
 
-    :host(.invalid) .error-text:empty {
+    :host([error-visible]) .error-text:empty {
         display: none;
     }
 `;

package/dist/esm/patterns/error/template.d.ts

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

package/dist/esm/patterns/error/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/patterns/error/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C,MAAM,CAAC,MAAM,iBAAiB,GAAG,IAAI,CAAe;qCACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;UAC3C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;;CAEzB,CAAC"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/patterns/error/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C,MAAM,CAAC,MAAM,iBAAiB,GAAG,IAAI,CAAc;qCACd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;UAC3C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;;CAEzB,CAAC"}

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

@@ -1,9 +1,10 @@
 /**
- * This interface should be used by components that want to leverage the errorTextTemplate defined in templates.ts
+ * This interface should be used by components that want to leverage the error pattern. The error pattern conditionally adds error text to the template when an error is configured to be visible.
  */
-export interface IHasErrorText {
+export interface ErrorPattern {
     /**
-     * The error text that will be displayed when a component has the 'invalid' class set
+     * The error text that will be displayed when a component is in the error appearance
      */
-    errorText: string | undefined;
+    errorText?: string;
+    errorVisible: boolean;
 }

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

@@ -1,7 +1,6 @@
 import { TextField as FoundationTextField } from '@microsoft/fast-foundation';
-import '../icons/exclamation-mark';
 import { TextFieldAppearance } from './types';
-import type { IHasErrorText } from '../patterns/error/types';
+import type { ErrorPattern } from '../patterns/error/types';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-text-field': TextField;
@@ -10,7 +9,7 @@ declare global {
 /**
  * A nimble-styed HTML text input
  */
-export declare class TextField extends FoundationTextField implements IHasErrorText {
+export declare class TextField extends FoundationTextField implements ErrorPattern {
     /**
      * The appearance the text field should have.
      *
@@ -26,6 +25,7 @@ export declare class TextField extends FoundationTextField implements IHasErrorT
      * @remarks
      * HTML Attribute: error-text
      */
-    errorText: string | undefined;
-    connectedCallback(): void;
+    errorText?: string;
+    errorVisible: boolean;
+    fullBleed: boolean;
 }

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

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
 import { attr, html } from '@microsoft/fast-element';
 import { DesignSystem, TextField as FoundationTextField, textFieldTemplate as template } from '@microsoft/fast-foundation';
-import '../icons/exclamation-mark';
 import { styles } from './styles';
 import { TextFieldAppearance } from './types';
 import { errorTextTemplate } from '../patterns/error/template';
+import { IconExclamationMark } from '../icons/exclamation-mark';
 /**
  * A nimble-styed HTML text input
  */
@@ -19,10 +19,8 @@ export class TextField extends FoundationTextField {
          * HTML Attribute: appearance
          */
         this.appearance = TextFieldAppearance.underline;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.control.setAttribute('aria-errormessage', 'errortext');
+        this.errorVisible = false;
+        this.fullBleed = false;
     }
 }
 __decorate([
@@ -31,6 +29,12 @@ __decorate([
 __decorate([
     attr({ attribute: 'error-text' })
 ], TextField.prototype, "errorText", void 0);
+__decorate([
+    attr({ attribute: 'error-visible', mode: 'boolean' })
+], TextField.prototype, "errorVisible", void 0);
+__decorate([
+    attr({ attribute: 'full-bleed', mode: 'boolean' })
+], TextField.prototype, "fullBleed", void 0);
 const nimbleTextField = TextField.compose({
     baseName: 'text-field',
     baseClass: FoundationTextField,
@@ -40,9 +44,10 @@ const nimbleTextField = TextField.compose({
         delegatesFocus: true
     },
     end: html `
-        <nimble-icon-exclamation-mark
-            class="error-icon fail"
-        ></nimble-icon-exclamation-mark>
+        <${DesignSystem.tagFor(IconExclamationMark)}
+            severity="error"
+            class="error-icon"
+        ></${DesignSystem.tagFor(IconExclamationMark)}>
         <span part="actions">
             <slot name="actions"></slot>
         </span>

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,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EACH,YAAY,EACZ,SAAS,IAAI,mBAAmB,EAEhC,iBAAiB,IAAI,QAAQ,EAChC,MAAM,4BAA4B,CAAC;AACpC,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAS/D;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,mBAAmB;IAAlD;;QACI;;;;;;WAMG;QAEI,eAAU,GAAwB,mBAAmB,CAAC,SAAS,CAAC;IAgB3E,CAAC;IAJmB,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,mBAAmB,EAAE,WAAW,CAAC,CAAC;IAChE,CAAC;CACJ;AAhBG;IADC,IAAI;6CACkE;AAUvE;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;4CACG;AAQzC,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAmB;IACxD,QAAQ,EAAE,YAAY;IACtB,SAAS,EAAE,mBAAmB;IAC9B,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;IACD,GAAG,EAAE,IAAI,CAAW;;;;;;;UAOd,iBAAiB;KACtB;CACJ,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,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EACH,YAAY,EACZ,SAAS,IAAI,mBAAmB,EAEhC,iBAAiB,IAAI,QAAQ,EAChC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAQhE;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,mBAAmB;IAAlD;;QACI;;;;;;WAMG;QAEI,eAAU,GAAwB,mBAAmB,CAAC,SAAS,CAAC;QAahE,iBAAY,GAAG,KAAK,CAAC;QAGrB,cAAS,GAAG,KAAK,CAAC;IAC7B,CAAC;CAAA;AAjBG;IADC,IAAI;6CACkE;AAUvE;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;4CACR;AAG1B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;+CAC1B;AAG5B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;4CAC1B;AAG7B,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAmB;IACxD,QAAQ,EAAE,YAAY;IACtB,SAAS,EAAE,mBAAmB;IAC9B,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;IACD,GAAG,EAAE,IAAI,CAAW;WACb,YAAY,CAAC,MAAM,CAAC,mBAAmB,CAAC;;;aAGtC,YAAY,CAAC,MAAM,CAAC,mBAAmB,CAAC;;;;UAI3C,iBAAiB;KACtB;CACJ,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

@@ -59,7 +59,7 @@ export const styles = css `
         border-color: rgba(${borderRgbPartialColor}, 0.1);
     }
 
-    :host(.invalid) .root {
+    :host([error-visible]) .root {
         border-bottom-color: ${failColor};
     }
 
@@ -67,7 +67,7 @@ export const styles = css `
         border-bottom-color: ${borderHoverColor};
     }
 
-    :host([appearance='frameless'].clear-inline-padding) .root {
+    :host([appearance='frameless'][full-bleed]) .root {
         padding-left: 0px;
         padding-right: 0px;
     }
@@ -80,7 +80,7 @@ export const styles = css `
         user-select: none;
     }
 
-    :host([appearance='frameless'].clear-inline-padding) .root::before {
+    :host([appearance='frameless'][full-bleed]) .root::before {
         display: none;
     }
 
@@ -92,7 +92,7 @@ export const styles = css `
         user-select: none;
     }
 
-    :host([appearance='frameless'].clear-inline-padding) .root::after {
+    :host([appearance='frameless'][full-bleed]) .root::after {
         display: none;
     }
 
@@ -162,7 +162,7 @@ export const styles = css `
         }
     }
 
-    :host(.invalid) [part='end']::after {
+    :host([error-visible]) [part='end']::after {
         border-bottom-color: ${failColor};
     }
 
@@ -198,7 +198,7 @@ export const styles = css `
             }
 
             .root:focus-within,
-            :host(.invalid) .root {
+            :host([error-visible]) .root {
                 border-bottom-width: ${borderWidth};
                 padding-bottom: 0;
             }

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

@@ -1,5 +1,5 @@
 import { DelegatesARIAButton, StartEnd, Switch as FoundationSwitch } from '@microsoft/fast-foundation';
-import type { IButton } from '../patterns/button/types';
+import type { ButtonPattern } from '../patterns/button/types';
 import { ButtonAppearance } from './types';
 declare global {
     interface HTMLElementTagNameMap {
@@ -9,7 +9,7 @@ declare global {
 /**
  * A nimble-styled toggle button control.
  */
-export declare class ToggleButton extends FoundationSwitch implements IButton {
+export declare class ToggleButton extends FoundationSwitch implements ButtonPattern {
     /**
      * @public
      * @remarks

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

@@ -1,4 +1,5 @@
 import { Tooltip as FoundationTooltip } from '@microsoft/fast-foundation';
+import type { TooltipSeverity } from './types';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-tooltip': Tooltip;
@@ -8,4 +9,11 @@ declare global {
  * A nimble-styled tooltip control.
  */
 export declare class Tooltip extends FoundationTooltip {
+    /**
+     * @public
+     * @remarks
+     * HTML Attribute: severity
+     */
+    severity: TooltipSeverity;
+    iconVisible: boolean;
 }

package/dist/esm/tooltip/index.js

@@ -1,3 +1,5 @@
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
 import { DesignSystem, Tooltip as FoundationTooltip } from '@microsoft/fast-foundation';
 import { styles } from './styles';
 import { template } from './template';
@@ -5,7 +7,17 @@ import { template } from './template';
  * A nimble-styled tooltip control.
  */
 export class Tooltip extends FoundationTooltip {
+    constructor() {
+        super(...arguments);
+        this.iconVisible = false;
+    }
 }
+__decorate([
+    attr
+], Tooltip.prototype, "severity", void 0);
+__decorate([
+    attr({ attribute: 'icon-visible', mode: 'boolean' })
+], Tooltip.prototype, "iconVisible", void 0);
 const nimbleTooltip = Tooltip.compose({
     baseName: 'tooltip',
     baseClass: FoundationTooltip,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,OAAO,IAAI,iBAAiB,EAC/B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;GAEG;AACH,MAAM,OAAO,OAAQ,SAAQ,iBAAiB;CAAG;AAEjD,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC;IAClC,QAAQ,EAAE,SAAS;IACnB,SAAS,EAAE,iBAAiB;IAC5B,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tooltip/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,YAAY,EACZ,OAAO,IAAI,iBAAiB,EAC/B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAStC;;GAEG;AACH,MAAM,OAAO,OAAQ,SAAQ,iBAAiB;IAA9C;;QAUW,gBAAW,GAAG,KAAK,CAAC;IAC/B,CAAC;CAAA;AAJG;IADC,IAAI;yCAC4B;AAGjC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;4CAC1B;AAG/B,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC;IAClC,QAAQ,EAAE,SAAS;IACnB,SAAS,EAAE,iBAAiB;IAC5B,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC,CAAC"}

package/dist/esm/tooltip/styles.js

@@ -37,22 +37,22 @@ export const styles = css `
         padding-right: 8px;
     }
 
-    :host(.fail.icon-visible) .fail {
+    :host([severity='error'][icon-visible]) [severity='error'] {
         display: flex;
         flex: 0 0 auto;
     }
 
-    :host(.information.icon-visible) .information {
+    :host([severity='information'][icon-visible]) [severity='information'] {
         display: flex;
         flex: 0 0 auto;
     }
 `.withBehaviors(themeBehavior(Theme.light, css `
-            :host(.fail) {
+            :host([severity='error']) {
                 --ni-private-tooltip-border-color: ${BannerFail100DarkUi};
                 --ni-private-tooltip-background-color: ${White};
             }
 
-            :host(.information) {
+            :host([severity='information']) {
                 --ni-private-tooltip-border-color: ${Information100LightUi};
                 --ni-private-tooltip-background-color: ${White};
             }
@@ -62,11 +62,11 @@ export const styles = css `
                 --ni-private-tooltip-background-color: ${Black85};
             }
 
-            :host(.information) {
+            :host([severity='information']) {
                 --ni-private-tooltip-border-color: ${Information100DarkUi};
             }
 
-            :host(.fail) {
+            :host([severity='error']) {
                 --ni-private-tooltip-border-color: ${BannerFail100DarkUi};
             }
         `), themeBehavior(Theme.color, css `
@@ -79,11 +79,11 @@ export const styles = css `
                 --ni-private-tooltip-background-color: ${hexToRgbaCssColor(White, 0.15)};
             }
 
-            :host(.fail) {
+            :host([severity='error']) {
                 --ni-private-tooltip-border-color: ${White};
             }
 
-            :host(.information) {
+            :host([severity='information']) {
                 --ni-private-tooltip-border-color: ${White};
             }
 

package/dist/esm/tooltip/template.d.ts

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