@ni/nimble-components 11.15.1 → 12.0.1

package/dist/all-components-bundle.js

@@ -14844,6 +14844,28 @@
         .withPrefix('nimble')
         .register(nimbleAnchoredRegion());
 
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    function __decorate(decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    }
+
     /**
      * Do not edit directly
      * Generated on Thu, 26 May 2022 18:20:05 GMT
@@ -15175,28 +15197,6 @@
     const prefix = 'ni-nimble';
     const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
 
-    /*! *****************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-
-    function __decorate(decorators, target, key, desc) {
-        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-    }
-
     const template$7 = html `<slot></slot>`;
 
     const styles$w = css `
@@ -15494,7 +15494,7 @@
         flex-wrap: wrap;
     }
 
-    :host(.prominent-links) {
+    :host([appearance='prominent']) {
         --ni-private-breadcrumb-link-active-font-color: ${bodyFontColor};
     }
 
@@ -15510,7 +15510,7 @@
                 --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 `
@@ -15518,7 +15518,7 @@
                 --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 `
@@ -15526,7 +15526,7 @@
                 --ni-private-breadcrumb-link-active-font-color: ${hexToRgbaCssColor(White, 0.6)};
             }
 
-            :host(.prominent-links) {
+            :host([appearance='prominent']) {
                 --ni-private-breadcrumb-link-font-color: ${PowerGreen};
             }
         `));
@@ -15536,6 +15536,9 @@
      */
     class Breadcrumb extends Breadcrumb$1 {
     }
+    __decorate([
+        attr
+    ], Breadcrumb.prototype, "appearance", void 0);
     const nimbleBreadcrumb = Breadcrumb.compose({
         baseName: 'breadcrumb',
         baseClass: Breadcrumb$1,
@@ -16516,44 +16519,44 @@
         `));
 
     const styles$s = styles$t.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};
@@ -16561,11 +16564,12 @@
                 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};
@@ -16573,11 +16577,12 @@
                 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};
@@ -16585,7 +16590,8 @@
                 padding: 0 ${standardPadding};
             }
 
-            :host(.primary[content-hidden]) .control[disabled] {
+            :host([appearance-variant='primary'][content-hidden])
+                .control[disabled] {
                 padding: 0px;
             }
         `));
@@ -16613,6 +16619,9 @@
     __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);
@@ -16926,19 +16935,129 @@
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
 
+    const styles$p = css `
+    ${styles$t}
+
+    .control[aria-pressed='true'] {
+        background-color: ${fillSelectedColor};
+        border-color: ${fillSelectedColor};
+    }
+
+    .control[aria-pressed='true']:hover {
+        background-color: ${fillSelectedColor};
+    }
+
+    .control[aria-pressed='true']${focusVisible} {
+        background-color: ${fillSelectedColor};
+    }
+
+    .control[aria-pressed='true'][disabled] {
+        background-color: ${fillSelectedColor};
+        border-color: ${fillSelectedColor};
+    }
+
+    .control[aria-pressed='true'][disabled]:hover {
+        background-color: ${fillSelectedColor};
+        border-color: ${fillSelectedColor};
+    }
+`;
+
+    const template$6 = (context, definition) => html `
+    <div
+        role="button"
+        part="control"
+        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}"
+        ${'' /* Configure aria-disabled, aria-readonly, and aria-pressed based on the
+    toggle button's state to keep the ARIA attributes consistent with the component's
+    state without a client having to configure ARIA attributes directly */}
+        aria-disabled="${x => x.disabled}"
+        aria-readonly="${x => x.readOnly}"
+        aria-pressed="${x => x.checked}"
+        ${'' /* Configure all other ARIA attributes based on the aria attributes
+    configured on the toggle button */}
+        aria-atomic="${x => x.ariaAtomic}"
+        aria-busy="${x => x.ariaBusy}"
+        aria-controls="${x => x.ariaControls}"
+        aria-current="${x => x.ariaCurrent}"
+        aria-describedby="${x => x.ariaDescribedby}"
+        aria-details="${x => x.ariaDetails}"
+        aria-errormessage="${x => x.ariaErrormessage}"
+        aria-expanded="${x => x.ariaExpanded}"
+        aria-flowto="${x => x.ariaFlowto}"
+        aria-haspopup="${x => x.ariaHaspopup}"
+        aria-hidden="${x => x.ariaHidden}"
+        aria-invalid="${x => x.ariaInvalid}"
+        aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
+        aria-label="${x => x.ariaLabel}"
+        aria-labelledby="${x => x.ariaLabelledby}"
+        aria-live="${x => x.ariaLive}"
+        aria-owns="${x => x.ariaOwns}"
+        aria-relevant="${x => x.ariaRelevant}"
+        aria-roledescription="${x => x.ariaRoledescription}"
+        ${ref('control')}
+    >
+        ${startSlotTemplate(context, definition)}
+        <span class="content" part="content">
+            <slot></slot>
+        </span>
+        ${endSlotTemplate(context, definition)}
+    </div>
+`;
+
+    /**
+     * A nimble-styled toggle button control.
+     */
+    class ToggleButton extends Switch$1 {
+        constructor() {
+            super(...arguments);
+            /**
+             * @public
+             * @remarks
+             * HTML Attribute: appearance
+             */
+            this.appearance = ButtonAppearance.outline;
+            /**
+             * @public
+             * @remarks
+             * HTML Attribute: content-hidden
+             */
+            this.contentHidden = false;
+        }
+    }
+    __decorate([
+        attr
+    ], ToggleButton.prototype, "appearance", void 0);
+    __decorate([
+        attr({ attribute: 'content-hidden', mode: 'boolean' })
+    ], ToggleButton.prototype, "contentHidden", void 0);
+    applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
+    const nimbleToggleButton = ToggleButton.compose({
+        baseName: 'toggle-button',
+        template: template$6,
+        styles: styles$p,
+        shadowOptions: {
+            delegatesFocus: true
+        }
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToggleButton());
+
     const errorTextTemplate = html `
     <div class="error-text" title="${x => x.errorText}" aria-live="polite">
         ${x => x.errorText}
     </div>
 `;
 
-    const template$6 = html `
+    const template$5 = html `
     <template>
         <div class="icon" :innerHTML=${x => x.icon.data}></div>
     </template
 `;
 
-    const styles$p = css `
+    const styles$o = css `
     ${display('inline-flex')}
 
     :host {
@@ -16953,19 +17072,19 @@
         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};
     }
 
@@ -16980,16 +17099,19 @@
      * The base class for icon components
      */
     class Icon extends FoundationElement {
-        constructor(icon) {
+        constructor(/** @internal */ icon) {
             super();
             this.icon = icon;
         }
     }
+    __decorate([
+        attr
+    ], Icon.prototype, "severity", void 0);
     const registerIcon = (baseName, iconClass) => {
         const composedIcon = iconClass.compose({
             baseName,
-            template: template$6,
-            styles: styles$p,
+            template: template$5,
+            styles: styles$o,
             baseClass: iconClass
         });
         DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
@@ -16997,37 +17119,33 @@
 
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
-     * The icon component for the 'exclamationMark' icon
+     * The icon component for the 'arrowExpanderDown' icon
      */
-    class IconExclamationMark extends Icon {
+    class IconArrowExpanderDown extends Icon {
         constructor() {
-            super(exclamationMark16X16);
+            super(arrowExpanderDown16X16);
         }
     }
-    registerIcon('icon-exclamation-mark', IconExclamationMark);
+    registerIcon('icon-arrow-expander-down', IconArrowExpanderDown);
 
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
-     * The icon component for the 'arrowExpanderDown' icon
+     * The icon component for the 'exclamationMark' icon
      */
-    class IconArrowExpanderDown extends Icon {
+    class IconExclamationMark extends Icon {
         constructor() {
-            super(arrowExpanderDown16X16);
+            super(exclamationMark16X16);
         }
     }
-    registerIcon('icon-arrow-expander-down', IconArrowExpanderDown);
+    registerIcon('icon-exclamation-mark', IconExclamationMark);
 
-    ({
-        above: SelectPosition.above,
-        below: SelectPosition.below
-    });
     const DropdownAppearance = {
         underline: 'underline',
         outline: 'outline',
         block: 'block'
     };
 
-    const styles$o = css `
+    const styles$n = css `
     ${display('inline-flex')}
 
     :host {
@@ -17107,7 +17225,7 @@
         padding: ${borderWidth};
     }
 
-    :host(.open:not(:hover)) .control {
+    :host([open]:not(:hover)) .control {
         border-bottom-color: ${borderHoverColor};
     }
 
@@ -17241,12 +17359,12 @@
             }
         `));
 
-    const styles$n = css `
+    const styles$m = css `
     .error-icon {
         display: none;
     }
 
-    :host(.invalid) .error-icon {
+    :host([error-visible]) .error-icon {
         display: inline-flex;
         width: ${iconSize};
         height: ${iconSize};
@@ -17257,7 +17375,7 @@
         display: none;
     }
 
-    :host(.invalid) .error-text {
+    :host([error-visible]) .error-text {
         display: block;
         font: ${errorTextFont};
         color: ${failColor};
@@ -17270,18 +17388,18 @@
         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;
     }
 `;
 
-    const styles$m = css `
-    ${styles$o}
+    const styles$l = css `
     ${styles$n}
+    ${styles$m}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -17297,7 +17415,7 @@
         color: ${bodyDisabledFontColor};
     }
 
-    :host(.invalid)::after {
+    :host([error-visible])::after {
         border-bottom-color: ${failColor};
     }
 
@@ -17309,7 +17427,7 @@
         border-bottom-color: ${borderHoverColor};
     }
 
-    :host(.invalid) .control {
+    :host([error-visible]) .control {
         border-bottom: var(--ni-private-bottom-border-width) solid ${failColor};
     }
 
@@ -17317,8 +17435,8 @@
         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};
     }
 
@@ -17372,7 +17490,7 @@
         display: none;
     }
 `.withBehaviors(appearanceBehavior(DropdownAppearance.block, css `
-            :host(.invalid) .control {
+            :host([error-visible]) .control {
                 border-bottom-width: ${borderWidth};
                 padding-bottom: 0;
             }
@@ -17385,6 +17503,7 @@
         constructor() {
             super(...arguments);
             this.appearance = DropdownAppearance.underline;
+            this.errorVisible = false;
             this.valueUpdatedByInput = false;
         }
         // Workaround for https://github.com/microsoft/fast/issues/5123
@@ -17526,21 +17645,25 @@
     __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: Combobox$1,
         template: comboboxTemplate,
-        styles: styles$m,
+        styles: styles$l,
         shadowOptions: {
             delegatesFocus: true
         },
         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}"
@@ -17555,19 +17678,19 @@
                 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}
     `
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCombobox());
 
-    const styles$l = css `
+    const styles$k = css `
     ${display('grid')}
 
     dialog {
@@ -17595,7 +17718,7 @@
             }
         `));
 
-    const template$5 = html `
+    const template$4 = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -17681,8 +17804,8 @@
     applyMixins(Dialog, ARIAGlobalStatesAndProperties);
     const nimbleDialog = Dialog.compose({
         baseName: 'dialog',
-        template: template$5,
-        styles: styles$l,
+        template: template$4,
+        styles: styles$k,
         baseClass: Dialog
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
@@ -18776,7 +18899,7 @@
         slideOutOptions
     };
 
-    const styles$k = css `
+    const styles$j = css `
     ${display('block')}
 
     :host {
@@ -18846,10 +18969,6 @@
         height: 100%;
     }
 
-    :host(.hidden) .control {
-        visibility: hidden;
-    }
-
     :host([location='left']) .control {
         left: 0px;
         border-right: ${borderWidth} solid ${popupBoxShadowColor};
@@ -19088,7 +19207,7 @@
     const nimbleDrawer = Drawer.compose({
         baseName: 'drawer',
         template: dialogTemplate,
-        styles: styles$k
+        styles: styles$j
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
@@ -20687,7 +20806,7 @@
     }
     registerIcon('icon-xmark-check', IconXmarkCheck);
 
-    const styles$j = css `
+    const styles$i = css `
     ${display('flex')}
 
     :host {
@@ -20701,13 +20820,13 @@
         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};
     }
 
@@ -20767,11 +20886,11 @@
         baseName: 'list-option',
         baseClass: ListboxOption,
         template: listboxOptionTemplate,
-        styles: styles$j
+        styles: styles$i
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
 
-    const styles$i = css `
+    const styles$h = css `
     ${display('grid')}
 
     :host {
@@ -20826,11 +20945,11 @@
         baseName: 'menu',
         baseClass: Menu$1,
         template: menuTemplate,
-        styles: styles$i
+        styles: styles$h
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
 
-    const styles$h = css `
+    const styles$g = css `
     ${display('inline-block')}
 
     :host {
@@ -20848,123 +20967,13 @@
     }
 `;
 
-    const styles$g = css `
-    ${styles$t}
-
-    .control[aria-pressed='true'] {
-        background-color: ${fillSelectedColor};
-        border-color: ${fillSelectedColor};
-    }
-
-    .control[aria-pressed='true']:hover {
-        background-color: ${fillSelectedColor};
-    }
-
-    .control[aria-pressed='true']${focusVisible} {
-        background-color: ${fillSelectedColor};
-    }
-
-    .control[aria-pressed='true'][disabled] {
-        background-color: ${fillSelectedColor};
-        border-color: ${fillSelectedColor};
-    }
-
-    .control[aria-pressed='true'][disabled]:hover {
-        background-color: ${fillSelectedColor};
-        border-color: ${fillSelectedColor};
-    }
-`;
-
-    const template$4 = (context, definition) => html `
-    <div
-        role="button"
-        part="control"
-        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}"
-        ${'' /* Configure aria-disabled, aria-readonly, and aria-pressed based on the
-    toggle button's state to keep the ARIA attributes consistent with the component's
-    state without a client having to configure ARIA attributes directly */}
-        aria-disabled="${x => x.disabled}"
-        aria-readonly="${x => x.readOnly}"
-        aria-pressed="${x => x.checked}"
-        ${'' /* Configure all other ARIA attributes based on the aria attributes
-    configured on the toggle button */}
-        aria-atomic="${x => x.ariaAtomic}"
-        aria-busy="${x => x.ariaBusy}"
-        aria-controls="${x => x.ariaControls}"
-        aria-current="${x => x.ariaCurrent}"
-        aria-describedby="${x => x.ariaDescribedby}"
-        aria-details="${x => x.ariaDetails}"
-        aria-errormessage="${x => x.ariaErrormessage}"
-        aria-expanded="${x => x.ariaExpanded}"
-        aria-flowto="${x => x.ariaFlowto}"
-        aria-haspopup="${x => x.ariaHaspopup}"
-        aria-hidden="${x => x.ariaHidden}"
-        aria-invalid="${x => x.ariaInvalid}"
-        aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
-        aria-label="${x => x.ariaLabel}"
-        aria-labelledby="${x => x.ariaLabelledby}"
-        aria-live="${x => x.ariaLive}"
-        aria-owns="${x => x.ariaOwns}"
-        aria-relevant="${x => x.ariaRelevant}"
-        aria-roledescription="${x => x.ariaRoledescription}"
-        ${ref('control')}
-    >
-        ${startSlotTemplate(context, definition)}
-        <span class="content" part="content">
-            <slot></slot>
-        </span>
-        ${endSlotTemplate(context, definition)}
-    </div>
-`;
-
-    /**
-     * A nimble-styled toggle button control.
-     */
-    class ToggleButton extends Switch$1 {
-        constructor() {
-            super(...arguments);
-            /**
-             * @public
-             * @remarks
-             * HTML Attribute: appearance
-             */
-            this.appearance = ButtonAppearance.outline;
-            /**
-             * @public
-             * @remarks
-             * HTML Attribute: content-hidden
-             */
-            this.contentHidden = false;
-        }
-    }
-    __decorate([
-        attr
-    ], ToggleButton.prototype, "appearance", void 0);
-    __decorate([
-        attr({ attribute: 'content-hidden', mode: 'boolean' })
-    ], ToggleButton.prototype, "contentHidden", void 0);
-    applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
-    const nimbleToggleButton = ToggleButton.compose({
-        baseName: 'toggle-button',
-        template: template$4,
-        styles: styles$g,
-        shadowOptions: {
-            delegatesFocus: true
-        }
-    });
-    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToggleButton());
-
     // prettier-ignore
-    const template$3 = context => html `
+    const template$3 = 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}"
@@ -20981,9 +20990,9 @@
             <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"
@@ -20997,7 +21006,7 @@
                 <span part="menu">
                     <slot name="menu" ${slotted({ property: 'slottedMenus', filter: elements('[role=menu]') })}></slot>
                 </span>
-            </${context.tagFor(AnchoredRegion)}>
+            </${DesignSystem.tagFor(AnchoredRegion)}>
         `)}
     </template>
 `;
@@ -21168,7 +21177,7 @@
     const nimbleMenuButton = MenuButton.compose({
         baseName: 'menu-button',
         template: template$3,
-        styles: styles$h,
+        styles: styles$g,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -21289,7 +21298,7 @@
 
     const styles$e = css `
     ${display('inline-block')}
-    ${styles$n}
+    ${styles$m}
 
     :host {
         font: ${bodyFont};
@@ -21338,7 +21347,7 @@
         border-color: rgba(${borderRgbPartialColor}, 0.1);
     }
 
-    :host(.invalid) .root {
+    :host([error-visible]) .root {
         border-bottom-color: ${failColor};
     }
 
@@ -21367,7 +21376,7 @@
         }
     }
 
-    :host(.invalid) .root::after {
+    :host([error-visible]) .root::after {
         border-bottom-color: ${failColor};
     }
 
@@ -21415,7 +21424,8 @@
     }
 
     ${
-/* 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);
@@ -21448,7 +21458,7 @@
             }
 
             .root:focus-within,
-            :host(.invalid) .root {
+            :host([error-visible]) .root {
                 border-bottom-width: ${borderWidth};
                 padding-bottom: 0;
             }
@@ -21474,6 +21484,7 @@
         constructor() {
             super(...arguments);
             this.appearance = NumberFieldAppearance.underline;
+            this.errorVisible = false;
         }
         connectedCallback() {
             super.connectedCallback();
@@ -21487,6 +21498,9 @@
     __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.
      *
@@ -21504,31 +21518,37 @@
             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}
     `
     });
@@ -21682,7 +21702,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadioGroup());
 
     const styles$b = css `
-    ${styles$o}
+    ${styles$n}
 `;
 
     /**
@@ -22316,7 +22336,7 @@
 
     const styles$4 = css `
     ${display('inline-block')}
-    ${styles$n}
+    ${styles$m}
 
     :host {
         font: ${bodyFont};
@@ -22367,7 +22387,7 @@
         border-color: rgba(${borderRgbPartialColor}, 0.1);
     }
 
-    :host(.invalid) .root {
+    :host([error-visible]) .root {
         border-bottom-color: ${failColor};
     }
 
@@ -22375,7 +22395,7 @@
         border-bottom-color: ${borderHoverColor};
     }
 
-    :host([appearance='frameless'].clear-inline-padding) .root {
+    :host([appearance='frameless'][full-bleed]) .root {
         padding-left: 0px;
         padding-right: 0px;
     }
@@ -22388,7 +22408,7 @@
         user-select: none;
     }
 
-    :host([appearance='frameless'].clear-inline-padding) .root::before {
+    :host([appearance='frameless'][full-bleed]) .root::before {
         display: none;
     }
 
@@ -22400,7 +22420,7 @@
         user-select: none;
     }
 
-    :host([appearance='frameless'].clear-inline-padding) .root::after {
+    :host([appearance='frameless'][full-bleed]) .root::after {
         display: none;
     }
 
@@ -22470,7 +22490,7 @@
         }
     }
 
-    :host(.invalid) [part='end']::after {
+    :host([error-visible]) [part='end']::after {
         border-bottom-color: ${failColor};
     }
 
@@ -22506,7 +22526,7 @@
             }
 
             .root:focus-within,
-            :host(.invalid) .root {
+            :host([error-visible]) .root {
                 border-bottom-width: ${borderWidth};
                 padding-bottom: 0;
             }
@@ -22561,10 +22581,8 @@
              * HTML Attribute: appearance
              */
             this.appearance = TextFieldAppearance.underline;
-        }
-        connectedCallback() {
-            super.connectedCallback();
-            this.control.setAttribute('aria-errormessage', 'errortext');
+            this.errorVisible = false;
+            this.fullBleed = false;
         }
     }
     __decorate([
@@ -22573,6 +22591,12 @@
     __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: TextField$1,
@@ -22582,9 +22606,10 @@
             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>
@@ -22667,22 +22692,22 @@
         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};
             }
@@ -22692,11 +22717,11 @@
                 --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 `
@@ -22709,11 +22734,11 @@
                 --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};
             }
 
@@ -22723,10 +22748,9 @@
         `));
 
     // prettier-ignore
-    const template = context => {
-        return html `
+    const template = html `
             ${when(x => x.tooltipVisible, html `
-            <${context.tagFor(AnchoredRegion)}
+            <${DesignSystem.tagFor(AnchoredRegion)}
                 class="anchored-region"
                 fixed-placement="true"
                 auto-update-mode="${x => x.autoUpdateMode}"
@@ -22744,20 +22768,35 @@
                 ${ref('region')}
             >
                 <div class="tooltip" part="tooltip" role="tooltip">
-                    <${context.tagFor(IconExclamationMark)} class="fail status-icon"></${context.tagFor(IconExclamationMark)}>
-                    <${context.tagFor(IconInfo)} class="information status-icon"></${context.tagFor(IconInfo)}>
+                    <${DesignSystem.tagFor(IconExclamationMark)}
+                        severity="error"
+                        class="status-icon"
+                    ></${DesignSystem.tagFor(IconExclamationMark)}>
+                    <${DesignSystem.tagFor(IconInfo)}
+                        severity="information"
+                        class="status-icon"
+                    ></${DesignSystem.tagFor(IconInfo)}>
                     <slot></slot>
                 </div>
-            </${context.tagFor(AnchoredRegion)}>
+            </${DesignSystem.tagFor(AnchoredRegion)}>
         `)}
-        `;
-    };
+`;
 
     /**
      * A nimble-styled tooltip control.
      */
     class Tooltip extends Tooltip$1 {
+        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: Tooltip$1,
@@ -22848,198 +22887,203 @@
         }
     }
 
-    const styles$1 = (context, _definition) => css `
-            ${display('block')}
+    const styles$1 = css `
+    ${display('block')}
 
-            :host {
-                ${
+    :host {
+        ${
 /* don't set font-size here or else it overrides what we set on .items */ ''}
-                font-family: ${bodyFontFamily};
-                font-weight: ${bodyFontWeight};
-                contain: content;
-                position: relative;
-                outline: none;
-                color: ${bodyFontColor};
-                cursor: pointer;
-                --ni-private-tree-item-nested-width: 0;
-            }
+        font-family: ${bodyFontFamily};
+        font-weight: ${bodyFontWeight};
+        contain: content;
+        position: relative;
+        outline: none;
+        color: ${bodyFontColor};
+        cursor: pointer;
+        --ni-private-tree-item-nested-width: 0;
+    }
 
-            ${ /* this controls the side border */''}
-            :host([${groupSelectedAttribute}])::after {
-                background: ${borderHoverColor};
-                border-radius: 0px;
-                content: '';
-                display: block;
-                position: absolute;
-                top: 0px;
-                width: calc(${borderWidth} * 2);
-                height: calc(${iconSize} * 2);
-            }
+    ${ /* this controls the side border */''}
+    :host([${groupSelectedAttribute}])::after {
+        background: ${borderHoverColor};
+        border-radius: 0px;
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0px;
+        width: calc(${borderWidth} * 2);
+        height: calc(${iconSize} * 2);
+    }
 
-            .positioning-region {
-                display: flex;
-                position: relative;
-                box-sizing: border-box;
-                height: calc(${iconSize} * 2);
-            }
+    .positioning-region {
+        display: flex;
+        position: relative;
+        box-sizing: border-box;
+        height: calc(${iconSize} * 2);
+    }
 
-            .positioning-region:hover {
-                background: ${fillHoverColor};
-            }
+    .positioning-region:hover {
+        background: ${fillHoverColor};
+    }
 
-            :host([${groupSelectedAttribute}]) .positioning-region:hover {
-                background: ${fillHoverSelectedColor};
-            }
+    :host([${groupSelectedAttribute}]) .positioning-region:hover {
+        background: ${fillHoverSelectedColor};
+    }
 
-            :host(${focusVisible}) .positioning-region {
-                box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
-                outline: ${borderWidth} solid ${borderHoverColor};
-                outline-offset: -2px;
-            }
+    :host(${focusVisible}) .positioning-region {
+        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+        outline: ${borderWidth} solid ${borderHoverColor};
+        outline-offset: -2px;
+    }
 
-            :host([selected]) .positioning-region {
-                background: ${fillSelectedColor};
-            }
+    :host([selected]) .positioning-region {
+        background: ${fillSelectedColor};
+    }
 
-            :host([selected]) .positioning-region:hover {
-                background: ${fillHoverSelectedColor};
-            }
+    :host([selected]) .positioning-region:hover {
+        background: ${fillHoverSelectedColor};
+    }
 
-            .positioning-region::before {
-                content: '';
-                display: block;
-                width: var(--ni-private-tree-item-nested-width);
-                flex-shrink: 0;
-            }
+    .positioning-region::before {
+        content: '';
+        display: block;
+        width: var(--ni-private-tree-item-nested-width);
+        flex-shrink: 0;
+    }
 
-            .content-region {
-                display: inline-flex;
-                align-items: center;
-                white-space: nowrap;
-                width: 100%;
-                padding-left: 10px;
-                font: inherit;
-                font-size: ${bodyFontSize};
-                user-select: none;
-                position: relative;
-                margin-inline-start: ${iconSize};
-            }
+    .content-region {
+        display: inline-flex;
+        align-items: center;
+        white-space: nowrap;
+        width: 100%;
+        padding-left: 10px;
+        font: inherit;
+        font-size: ${bodyFontSize};
+        user-select: none;
+        position: relative;
+        margin-inline-start: ${iconSize};
+    }
 
-            :host(${focusVisible}) .content-region {
-                outline: none;
-            }
+    :host(${focusVisible}) .content-region {
+        outline: none;
+    }
 
-            :host([disabled]) .content-region {
-                opacity: 0.5;
-                cursor: not-allowed;
-            }
+    :host([disabled]) .content-region {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
 
-            .expand-collapse-button {
-                background: none;
-                border: none;
-                outline: none;
-                width: ${iconSize};
-                height: ${iconSize};
-                padding: 0px;
-                justify-content: center;
-                align-items: center;
-                cursor: pointer;
-                margin-left: 10px;
-                position: absolute;
-            }
+    .expand-collapse-button {
+        background: none;
+        border: none;
+        outline: none;
+        width: ${iconSize};
+        height: ${iconSize};
+        padding: 0px;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        margin-left: 10px;
+        position: absolute;
+    }
 
-            .expand-collapse-button svg {
-                width: ${iconSize};
-                height: ${iconSize};
-                transition: transform 0.2s ease-in;
-                pointer-events: none;
-                fill: currentcolor;
-            }
+    .expand-collapse-button svg {
+        width: ${iconSize};
+        height: ${iconSize};
+        transition: transform 0.2s ease-in;
+        pointer-events: none;
+        fill: currentcolor;
+    }
 
-            ${
+    ${
 /* this rule keeps children without an icon text aligned with parents */ ''}
-            span[part="start"] {
-                width: ${iconSize};
-            }
+    span[part="start"] {
+        width: ${iconSize};
+    }
 
-            ${
+    ${
 /* the start class is applied when the corresponding slots is filled */ ''}
-            .start {
-                display: flex;
-                fill: currentcolor;
-                margin-inline-start: ${iconSize};
-                margin-inline-end: ${iconSize};
-            }
+    .start {
+        display: flex;
+        fill: currentcolor;
+        margin-inline-start: ${iconSize};
+        margin-inline-end: ${iconSize};
+    }
 
-            slot[name='start']::slotted(*) {
-                width: ${iconSize};
-                height: ${iconSize};
-            }
+    slot[name='start']::slotted(*) {
+        width: ${iconSize};
+        height: ${iconSize};
+    }
 
-            ::slotted(${context.tagFor(TreeItem$1)}) {
-                --ni-private-tree-item-nested-width: 1em;
-                --ni-private-expand-collapse-button-nested-width: calc(
-                    ${iconSize} * -1
-                );
-            }
+    ${
+/*
+Cannot call DesignSystem.tagFor(TreeItem) as this string is evaluated
+before the registration of the element itself; the style is self-referencing.
+Instead styling against the role which is more general and likely a better approach.
+*/ ''}
+    ::slotted([role='treeitem']) {
+        --ni-private-tree-item-nested-width: 1em;
+        --ni-private-expand-collapse-button-nested-width: calc(
+            ${iconSize} * -1
+        );
+    }
 
-            ${
-/* the end class is applied when the corresponding slots is filled */ ''}
-            .end {
-                display: flex;
-                fill: currentcolor;
-                margin-inline-start: ${iconSize};
-            }
+    ${ /* the end class is applied when the corresponding slots is filled */''}
+    .end {
+        display: flex;
+        fill: currentcolor;
+        margin-inline-start: ${iconSize};
+    }
 
-            .items {
-                display: none;
-                ${
+    .items {
+        display: none;
+        ${
 /*
  * this controls the nested indentation (by affecting .positioning-region::before)
  * it must minimally contain arithmetic with an em and a px value
  * make it larger or shorter by changing the px value
  */ ''}
-                font-size: calc(1em + (${iconSize} * 2));
-            }
+        font-size: calc(1em + (${iconSize} * 2));
+    }
 
-            :host([expanded]) .items {
-                display: block;
-            }
-        `.withBehaviors(new DirectionalStyleSheetBehavior(
+    :host([expanded]) .items {
+        display: block;
+    }
+`.withBehaviors(new DirectionalStyleSheetBehavior(
     // ltr styles
     css `
-                    .expand-collapse-button {
-                        left: var(
-                            --ni-private-expand-collapse-button-nested-width,
-                            calc(${iconSize} * -1)
-                        );
-                    }
+            .expand-collapse-button {
+                left: var(
+                    --ni-private-expand-collapse-button-nested-width,
+                    calc(${iconSize} * -1)
+                );
+            }
 
-                    .expand-collapse-button svg {
-                        transform: rotate(90deg);
-                    }
+            .expand-collapse-button svg {
+                transform: rotate(90deg);
+            }
 
-                    :host([expanded]) .expand-collapse-button svg {
-                        transform: rotate(180deg);
-                    }
-                `, 
+            :host([expanded]) .expand-collapse-button svg {
+                transform: rotate(180deg);
+            }
+        `, 
     // rtl styles
     css `
-                    .expand-collapse-button {
-                        right: var(
-                            --ni-private-expand-collapse-button-nested-width,
-                            calc(${iconSize} * -1)
-                        );
-                    }
+            .expand-collapse-button {
+                right: var(
+                    --ni-private-expand-collapse-button-nested-width,
+                    calc(${iconSize} * -1)
+                );
+            }
 
-                    .expand-collapse-button svg {
-                        transform: rotate(180deg);
-                    }
+            .expand-collapse-button svg {
+                transform: rotate(180deg);
+            }
 
-                    :host([expanded]) .expand-collapse-button svg {
-                        transform: rotate(135deg);
-                    }
-                `));
+            :host([expanded]) .expand-collapse-button svg {
+                transform: rotate(135deg);
+            }
+        `));
 
     /**
      * A function that returns a nimble-tree-item registration for configuring the component with a DesignSystem.