@ni/nimble-components 11.0.4 → 11.2.0

package/dist/esm/all-components.d.ts

@@ -8,6 +8,7 @@ import './breadcrumb';
 import './breadcrumb-item';
 import './button';
 import './checkbox';
+import './combobox';
 import './drawer';
 import './icons/all-icons';
 import './list-option';

package/dist/esm/all-components.js

@@ -8,6 +8,7 @@ import './breadcrumb';
 import './breadcrumb-item';
 import './button';
 import './checkbox';
+import './combobox';
 import './drawer';
 import './icons/all-icons';
 import './list-option';

package/dist/esm/all-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,QAAQ,CAAC;AAChB,OAAO,eAAe,CAAC;AACvB,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AACrB,OAAO,QAAQ,CAAC;AAChB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC;AACrB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AACzB,OAAO,WAAW,CAAC;AACnB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC"}
+{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,YAAY,CAAC;AACpB,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,QAAQ,CAAC;AAChB,OAAO,eAAe,CAAC;AACvB,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AACrB,OAAO,QAAQ,CAAC;AAChB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC;AACrB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AACzB,OAAO,WAAW,CAAC;AACnB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC"}

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

@@ -0,0 +1,41 @@
+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';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-combobox': Combobox;
+    }
+}
+/**
+ * A nimble-styed HTML combobox
+ */
+export declare class Combobox extends FoundationCombobox implements IHasErrorText {
+    /**
+     * The ref to the internal dropdown button element.
+     *
+     * @internal
+     */
+    readonly dropdownButton: ToggleButton | undefined;
+    /**
+     * A message explaining why the value is invalid.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: error-text
+     */
+    errorText: string | undefined;
+    setPositioning(): void;
+    slottedOptionsChanged(prev: HTMLElement[], next: HTMLElement[]): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    toggleButtonClickHandler(e: Event): void;
+    toggleButtonChangeHandler(e: Event): void;
+    toggleButtonKeyDownHandler(e: KeyboardEvent): boolean;
+    filterOptions(): void;
+    protected openChanged(): void;
+    private ariaLabelChanged;
+    private updateInputAriaLabel;
+    private readonly focusOutHandler;
+}

package/dist/esm/combobox/index.js

@@ -0,0 +1,136 @@
+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 { errorTextTemplate } from '../patterns/error/template';
+import '../icons/exclamation-mark';
+import '../icons/arrow-expander-down';
+import { styles } from './styles';
+/**
+ * A nimble-styed HTML combobox
+ */
+export class Combobox extends FoundationCombobox {
+    constructor() {
+        super(...arguments);
+        this.focusOutHandler = () => {
+            this.open = false;
+        };
+    }
+    // Workaround for https://github.com/microsoft/fast/issues/5123
+    setPositioning() {
+        if (!this.$fastController.isConnected) {
+            // Don't call setPositioning() until we're connected,
+            // since this.forcedPosition isn't initialized yet.
+            return;
+        }
+        super.setPositioning();
+    }
+    // Workaround for https://github.com/microsoft/fast/issues/5773
+    slottedOptionsChanged(prev, next) {
+        const value = this.value;
+        super.slottedOptionsChanged(prev, next);
+        if (value) {
+            this.value = value;
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Call setPositioning() after this.forcedPosition is initialized.
+        this.setPositioning();
+        this.updateInputAriaLabel();
+        this.addEventListener('focusout', this.focusOutHandler);
+    }
+    disconnectedCallback() {
+        this.removeEventListener('focusout', this.focusOutHandler);
+    }
+    toggleButtonClickHandler(e) {
+        e.stopImmediatePropagation();
+    }
+    toggleButtonChangeHandler(e) {
+        this.open = this.dropdownButton.checked;
+        e.stopImmediatePropagation();
+    }
+    toggleButtonKeyDownHandler(e) {
+        switch (e.key) {
+            case keyArrowUp:
+            case keyArrowDown:
+            case keySpace:
+            case keyEnter:
+                this.open = true;
+                this.stopPropagation(e);
+                return false;
+            default:
+                return true;
+        }
+    }
+    filterOptions() {
+        super.filterOptions();
+        const enabledOptions = this.filteredOptions.filter(o => !o.disabled);
+        this.filteredOptions = enabledOptions;
+    }
+    openChanged() {
+        super.openChanged();
+        if (this.dropdownButton) {
+            this.dropdownButton.checked = this.open;
+        }
+    }
+    // Workaround for https://github.com/microsoft/fast/issues/6041.
+    ariaLabelChanged(_oldValue, _newValue) {
+        this.updateInputAriaLabel();
+    }
+    updateInputAriaLabel() {
+        const inputElement = this.shadowRoot?.querySelector('.selected-value');
+        if (this.ariaLabel) {
+            inputElement?.setAttribute('aria-label', this.ariaLabel);
+        }
+        else {
+            inputElement?.removeAttribute('aria-label');
+        }
+    }
+}
+__decorate([
+    observable
+], Combobox.prototype, "dropdownButton", void 0);
+__decorate([
+    attr({ attribute: 'error-text' })
+], Combobox.prototype, "errorText", void 0);
+const nimbleCombobox = Combobox.compose({
+    baseName: 'combobox',
+    baseClass: FoundationCombobox,
+    template,
+    styles,
+    shadowOptions: {
+        delegatesFocus: true
+    },
+    end: html `
+        <div class="end-slot-container">
+            <nimble-icon-exclamation-mark
+                class="error-icon fail"
+            ></nimble-icon-exclamation-mark>
+            <div class="separator"></div>
+            <nimble-toggle-button
+                ${ref('dropdownButton')}
+                appearance="ghost"
+                ?checked="${x => x.open}"
+                ?disabled="${x => x.disabled}"
+                content-hidden="true"
+                @click="${(x, c) => x.toggleButtonClickHandler(c.event)}"
+                @change="${(x, c) => x.toggleButtonChangeHandler(c.event)}"
+                @keydown="${(x, c) => x.toggleButtonKeyDownHandler(c.event)}"
+                class="dropdown-button"
+                part="button"
+                aria-haspopup="true"
+                aria-expanded="${x => x.open}"
+            >
+                <nimble-icon-arrow-expander-down
+                    slot="start"
+                    class="dropdown-icon"
+                >
+                </nimble-icon-arrow-expander-down>
+            </nimble-toggle-button>
+        </div>
+        ${errorTextTemplate}
+    `
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCombobox());
+//# sourceMappingURL=index.js.map

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

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

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

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

package/dist/esm/combobox/styles.js

@@ -0,0 +1,87 @@
+import { css } from '@microsoft/fast-element';
+import { controlHeight, failColor, bodyDisabledFontColor, borderRgbPartialColor, smallPadding } from '../theme-provider/design-tokens';
+import { styles as dropdownStyles } from '../patterns/dropdown/styles';
+import { styles as errorStyles } from '../patterns/error/styles';
+import { focusVisible } from '../utilities/style/focus';
+export const styles = css `
+    ${dropdownStyles}
+    ${errorStyles}
+
+    :host {
+        --ni-private-hover-bottom-border-width: 2px;
+        --ni-private-bottom-border-width: 1px;
+    }
+
+    :host([disabled]) *,
+    :host([disabled]) {
+        user-select: none;
+        color: ${bodyDisabledFontColor};
+    }
+
+    .control {
+        bottom-border-width: var(--ni-private-bottom-border-width);
+    }
+
+    :host(.invalid) .control {
+        border-bottom: var(--ni-private-bottom-border-width) solid ${failColor};
+    }
+
+    :host([disabled]) .control {
+        border-color: rgba(${borderRgbPartialColor}, 0.1);
+    }
+
+    :host(.invalid[disabled]) .control {
+        border-color: ${failColor};
+    }
+
+    .selected-value {
+        -webkit-appearance: none;
+        background: transparent;
+        border: none;
+        color: inherit;
+        margin: auto 0;
+        width: 100%;
+        font-size: inherit;
+        padding-left: 0px;
+    }
+
+    .selected-value:hover,
+    .selected-value:disabled,
+    .selected-value:active,
+    .selected-value${focusVisible} {
+        outline: none;
+    }
+
+    [part='indicator'] {
+        display: none;
+    }
+
+    .end-slot-container {
+        display: flex;
+        align-items: baseline;
+        padding-right: ${smallPadding};
+    }
+
+    .separator {
+        display: inline;
+        width: 2px;
+        border-right: 2px solid rgba(${borderRgbPartialColor}, 0.15);
+        height: calc(${controlHeight} - 12px);
+        align-self: center;
+        padding-left: 4px;
+    }
+
+    .dropdown-button {
+        ${controlHeight.cssCustomProperty}: 24px;
+        margin-left: ${smallPadding};
+    }
+
+    :host([disabled]) .dropdown-icon {
+        fill: ${bodyDisabledFontColor};
+    }
+
+    :host(:empty) .listbox {
+        display: none;
+    }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/combobox/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,aAAa,EACb,SAAS,EACT,qBAAqB,EACrB,qBAAqB,EACrB,YAAY,EACf,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,cAAc;MACd,WAAW;;;;;;;;;;iBAUA,qBAAqB;;;;;;;;qEAQ+B,SAAS;;;;6BAIjD,qBAAqB;;;;wBAI1B,SAAS;;;;;;;;;;;;;;;;;qBAiBZ,YAAY;;;;;;;;;;;yBAWR,YAAY;;;;;;uCAME,qBAAqB;uBACrC,aAAa;;;;;;UAM1B,aAAa,CAAC,iBAAiB;uBAClB,YAAY;;;;gBAInB,qBAAqB;;;;;;CAMpC,CAAC"}

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

@@ -0,0 +1,2 @@
+import { ComboboxAutocomplete } from '@microsoft/fast-foundation';
+export { ComboboxAutocomplete };

package/dist/esm/combobox/types.js

@@ -0,0 +1,3 @@
+import { ComboboxAutocomplete } from '@microsoft/fast-foundation';
+export { ComboboxAutocomplete };
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/combobox/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAO,EAAE,oBAAoB,EAAE,CAAC"}

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

@@ -1,4 +1,5 @@
 import { NumberField as FoundationNumberField } from '@microsoft/fast-foundation';
+import { NumberFieldAppearance } from './types';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-number-field': NumberField;
@@ -8,4 +9,6 @@ declare global {
  * A nimble-styled HTML number input
  */
 export declare class NumberField extends FoundationNumberField {
+    appearance: NumberFieldAppearance;
+    connectedCallback(): void;
 }

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

@@ -1,11 +1,25 @@
+import { __decorate } from "tslib";
+import { attr, html } from '@microsoft/fast-element';
 import { DesignSystem, NumberField as FoundationNumberField, numberFieldTemplate as template } from '@microsoft/fast-foundation';
-import { arrowExpanderDown16X16, arrowExpanderUp16X16 } from '@ni/nimble-tokens/dist/icons/js';
 import { styles } from './styles';
+import { NumberFieldAppearance } from './types';
 /**
  * A nimble-styled HTML number input
  */
 export class NumberField extends FoundationNumberField {
+    constructor() {
+        super(...arguments);
+        this.appearance = NumberFieldAppearance.underline;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // This is a workaround for FAST issue: https://github.com/microsoft/fast/issues/6148
+        this.control.setAttribute('role', 'spinbutton');
+    }
 }
+__decorate([
+    attr
+], NumberField.prototype, "appearance", void 0);
 /**
  * A function that returns a number-field registration for configuring the component with a DesignSystem.
  *
@@ -22,8 +36,28 @@ const nimbleNumberField = NumberField.compose({
     shadowOptions: {
         delegatesFocus: true
     },
-    stepDownGlyph: arrowExpanderDown16X16.data,
-    stepUpGlyph: arrowExpanderUp16X16.data
+    stepDownGlyph: html `
+        <nimble-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>
+    `,
+    stepUpGlyph: html `
+        <nimble-button
+            class="step-up-down-button"
+            appearance="ghost"
+            content-hidden
+            tabindex="-1"
+        >
+            "Increment"
+            <nimble-icon-add slot="start"></nimble-icon-add>
+        </nimble-button>
+    `
 });
 DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 //# sourceMappingURL=index.js.map

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,EACH,YAAY,EACZ,WAAW,IAAI,qBAAqB,EAEpC,mBAAmB,IAAI,QAAQ,EAClC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACH,sBAAsB,EACtB,oBAAoB,EACvB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAQlC;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,qBAAqB;CAAG;AAEzD;;;;;;;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,sBAAsB,CAAC,IAAI;IAC1C,WAAW,EAAE,oBAAoB,CAAC,IAAI;CACzC,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;AAQhD;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,qBAAqB;IAAtD;;QAEW,eAAU,GAA0B,qBAAqB,CAAC,SAAS,CAAC;IAQ/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;AARG;IADC,IAAI;+CACsE;AAU/E;;;;;;;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;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

@@ -1,6 +1,8 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { borderColor, borderRgbPartialColor, borderHoverColor, borderWidth, bodyFontColor, bodyDisabledFontColor, controlHeight, fillSelectedRgbPartialColor, iconSize, controlLabelFont, controlLabelFontColor, labelHeight, smallDelay, bodyFont, failColor, standardPadding } from '../theme-provider/design-tokens';
+import { borderRgbPartialColor, borderHoverColor, borderWidth, bodyFontColor, bodyDisabledFontColor, controlHeight, fillSelectedRgbPartialColor, controlLabelFont, controlLabelFontColor, labelHeight, smallDelay, bodyFont, failColor, standardPadding, controlLabelDisabledFontColor } from '../theme-provider/design-tokens';
+import { appearanceBehavior } from '../utilities/style/appearance';
+import { NumberFieldAppearance } from './types';
 export const styles = css `
     ${display('inline-block')}
 
@@ -24,6 +26,10 @@ export const styles = css `
         font: ${controlLabelFont};
     }
 
+    :host([disabled]) .label {
+        color: ${controlLabelDisabledFontColor};
+    }
+
     .root {
         box-sizing: border-box;
         position: relative;
@@ -31,7 +37,7 @@ export const styles = css `
         flex-direction: row;
         justify-content: center;
         border-radius: 0px;
-        border-bottom: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.3);
+        border: 0px solid rgba(${borderRgbPartialColor}, 0.3);
         gap: calc(${standardPadding} / 2);
     }
 
@@ -39,9 +45,8 @@ export const styles = css `
         border-bottom-color: ${borderHoverColor};
     }
 
-    :host([disabled]) .root,
-    :host([disabled]) .root:hover {
-        border-bottom: ${borderWidth} solid ${bodyDisabledFontColor};
+    :host([disabled]) .root {
+        border-color: rgba(${borderRgbPartialColor}, 0.1);
     }
 
     .root::before {
@@ -90,7 +95,7 @@ export const styles = css `
         font: inherit;
         background: transparent;
         color: inherit;
-        height: calc(${controlHeight} - ${borderWidth});
+        height: ${controlHeight};
         width: 100%;
         border: none;
         padding: 0px;
@@ -122,24 +127,47 @@ export const styles = css `
 
     .controls {
         display: flex;
-        flex-direction: column;
-    }
-
-    .step-up,
-    .step-down {
-        display: inline-flex;
-        height: 15px;
-        width: 15px;
-        cursor: pointer;
+        flex-direction: row-reverse;
         justify-content: center;
         align-items: center;
     }
 
-    .step-up svg,
-    .step-down svg {
-        height: ${iconSize};
-        width: ${iconSize};
-        fill: ${borderColor};
-    }
-`;
+    .step-up-down-button {
+        ${controlHeight.cssCustomProperty}: 24px;
+    }
+`.withBehaviors(appearanceBehavior(NumberFieldAppearance.underline, css `
+            .root {
+                border-bottom-width: ${borderWidth};
+                padding-top: ${borderWidth};
+                padding-left: ${borderWidth};
+                padding-right: ${borderWidth};
+            }
+
+            .control {
+                height: calc(${controlHeight} - 2 * ${borderWidth});
+            }
+        `), appearanceBehavior(NumberFieldAppearance.block, css `
+            .root {
+                background-color: rgba(${borderRgbPartialColor}, 0.1);
+                padding-left: ${borderWidth};
+                padding-right: ${borderWidth};
+            }
+
+            .root:focus-within,
+            :host(.invalid) .root {
+                border-bottom-width: ${borderWidth};
+            }
+
+            :host([disabled]) .root {
+                background-color: rgba(${borderRgbPartialColor}, 0.07);
+            }
+        `), appearanceBehavior(NumberFieldAppearance.outline, css `
+            .root {
+                border-width: ${borderWidth};
+            }
+
+            .control {
+                height: calc(${controlHeight} - 2 * ${borderWidth});
+            }
+        `));
 //# sourceMappingURL=styles.js.map

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,WAAW,EACX,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,2BAA2B,EAC3B,QAAQ,EACR,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,UAAU,EACV,QAAQ,EACR,SAAS,EACT,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;gBAGb,QAAQ;;;iBAGP,aAAa;uBACP,WAAW,MAAM,aAAa;mDACF,WAAW;;;;iBAI7C,qBAAqB;;;;;;iBAMrB,qBAAqB;gBACtB,gBAAgB;;;;;;;;;;yBAUP,WAAW,eAAe,qBAAqB;oBACpD,eAAe;;;;+BAIJ,gBAAgB;;;;;yBAKtB,WAAW,UAAU,qBAAqB;;;;UAIzD,CAAA,yCAA0C,EAAE;;;;;;;;;;4BAU1B,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;uBAoBjB,aAAa,MAAM,WAAW;;;;;;;;;;;;;;iBAcpC,qBAAqB;2BACX,2BAA2B;;;;iBAIrC,qBAAqB;;;;;;;;iBAQrB,qBAAqB;;;;;;;;;;;;;;;;;;;;kBAoBpB,QAAQ;iBACT,QAAQ;gBACT,WAAW;;CAE1B,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,2BAA2B,EAC3B,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;AAEhD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;gBAGb,QAAQ;;;iBAGP,aAAa;uBACP,WAAW,MAAM,aAAa;mDACF,WAAW;;;;iBAI7C,qBAAqB;;;;;;iBAMrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;iCAUb,qBAAqB;oBAClC,eAAe;;;;+BAIJ,gBAAgB;;;;6BAIlB,qBAAqB;;;;UAIxC,CAAA,yCAA0C,EAAE;;;;;;;;;;4BAU1B,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;kBAoBtB,aAAa;;;;;;;;;;;;;;iBAcd,qBAAqB;2BACX,2BAA2B;;;;iBAIrC,qBAAqB;;;;;;;;iBAQrB,qBAAqB;;;;;;;;;;;UAW5B,aAAa,CAAC,iBAAiB;;CAExC,CAAC,aAAa,CACP,kBAAkB,CACd,qBAAqB,CAAC,SAAS,EAC/B,GAAG,CAAA;;uCAEwB,WAAW;+BACnB,WAAW;gCACV,WAAW;iCACV,WAAW;;;;+BAIb,aAAa,UAAU,WAAW;;SAExD,CACA,EACD,kBAAkB,CACd,qBAAqB,CAAC,KAAK,EAC3B,GAAG,CAAA;;yCAE0B,qBAAqB;gCAC9B,WAAW;iCACV,WAAW;;;;;uCAKL,WAAW;;;;yCAIT,qBAAqB;;SAErD,CACA,EACD,kBAAkB,CACd,qBAAqB,CAAC,OAAO,EAC7B,GAAG,CAAA;;gCAEiB,WAAW;;;;+BAIZ,aAAa,UAAU,WAAW;;SAExD,CACA,CACJ,CAAC"}

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

@@ -0,0 +1,9 @@
+/**
+ * Values for the 'appearance' property of the number field
+ */
+export declare const NumberFieldAppearance: {
+    readonly underline: "underline";
+    readonly outline: "outline";
+    readonly block: "block";
+};
+export declare type NumberFieldAppearance = typeof NumberFieldAppearance[keyof typeof NumberFieldAppearance];

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

@@ -0,0 +1,9 @@
+/**
+ * Values for the 'appearance' property of the number field
+ */
+export const NumberFieldAppearance = {
+    underline: 'underline',
+    outline: 'outline',
+    block: 'block'
+};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/number-field/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACjC,SAAS,EAAE,WAAW;IACtB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;CACR,CAAC"}

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

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