@ni/nimble-components 11.0.4 → 11.1.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/styles.js

@@ -55,6 +55,7 @@ export const styles = css `
     .root::after {
         content: '';
         position: absolute;
+        left: 0px;
         bottom: calc(-1 * ${borderWidth});
         width: 0px;
         height: 0px;

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,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;;;;;;;;;;;4BAW1B,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"}

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

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

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

@@ -0,0 +1,193 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { applicationBackgroundColor, bodyFont, bodyFontColor, bodyDisabledFontColor, borderHoverColor, borderWidth, controlHeight, iconSize, popupBorderColor, popupBoxShadowColor, smallDelay, smallPadding, failColor, borderRgbPartialColor } from '../../theme-provider/design-tokens';
+import { focusVisible } from '../../utilities/style/focus';
+export const styles = css `
+    ${display('inline-flex')}
+
+    :host {
+        box-sizing: border-box;
+        color: ${bodyFontColor};
+        font: ${bodyFont};
+        height: ${controlHeight};
+        position: relative;
+        justify-content: center;
+        user-select: none;
+        min-width: 250px;
+        outline: none;
+        vertical-align: top;
+        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
+        --ni-private-focus-indicator-width: 1px;
+        --ni-private-indicator-lines-gap: 1px;
+    }
+
+    :host::before {
+        content: '';
+        position: absolute;
+        bottom: calc(
+            var(--ni-private-hover-indicator-width) +
+                var(--ni-private-indicator-lines-gap)
+        );
+        width: 0px;
+        height: 0px;
+        justify-self: center;
+        border-bottom: ${borderHoverColor}
+            var(--ni-private-focus-indicator-width) solid;
+        transition: width ${smallDelay} ease-in;
+    }
+
+    @media (prefers-reduced-motion) {
+        :host::before {
+            transition-duration: 0s;
+        }
+    }
+
+    :host(${focusVisible})::before {
+        width: calc(100% - 8px);
+    }
+
+    :host::after {
+        content: '';
+        position: absolute;
+        bottom: calc(-1 * ${borderWidth});
+        width: 0px;
+        height: 0px;
+        justify-self: center;
+        border-bottom: ${borderHoverColor}
+            var(--ni-private-hover-indicator-width) solid;
+        transition: width ${smallDelay} ease-in;
+    }
+
+    :host(.invalid)::after {
+        border-bottom-color: ${failColor};
+    }
+
+    @media (prefers-reduced-motion) {
+        :host::after {
+            transition-duration: 0s;
+        }
+    }
+
+    :host(:hover)::after,
+    :host(${focusVisible})::after {
+        width: 100%;
+    }
+
+    :host([disabled]:hover)::after {
+        width: 0px;
+    }
+
+    .control {
+        align-items: center;
+        box-sizing: border-box;
+        cursor: pointer;
+        display: flex;
+        min-height: 100%;
+        width: 100%;
+        border-bottom: ${borderWidth} solid ${bodyDisabledFontColor};
+        background-color: transparent;
+        padding-left: 8px;
+        padding-bottom: 1px;
+    }
+
+    :host(.open:not(:hover)) .control {
+        border-bottom-color: ${borderHoverColor};
+    }
+
+    :host([disabled]) .control {
+        cursor: default;
+        color: ${bodyDisabledFontColor};
+        border-color: rgba(${borderRgbPartialColor}, 0.1);
+    }
+
+    .listbox {
+        box-sizing: border-box;
+        display: inline-flex;
+        flex-direction: column;
+        left: 0;
+        overflow-y: auto;
+        position: absolute;
+        width: 100%;
+        --ni-private-listbox-padding: ${smallPadding};
+        max-height: calc(
+            var(--ni-private-select-max-height) - 2 *
+                var(--ni-private-listbox-padding)
+        );
+        z-index: 1;
+        padding: var(--ni-private-listbox-padding);
+        box-shadow: 0px 3px 3px ${popupBoxShadowColor};
+        border: 1px solid ${popupBorderColor};
+        background-color: ${applicationBackgroundColor};
+        background-clip: padding-box;
+    }
+
+    .listbox[hidden] {
+        display: none;
+    }
+
+    :host([open][position='above']) .listbox {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    :host([open][position='below']) .listbox {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
+
+    :host([open][position='above']) .listbox {
+        bottom: ${controlHeight};
+    }
+
+    :host([open][position='below']) .listbox {
+        top: calc(${controlHeight} + ${smallPadding});
+    }
+
+    .selected-value {
+        flex: auto;
+        font-family: inherit;
+        text-align: start;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+
+    .indicator {
+        flex: none;
+        margin-inline-start: 1em;
+        padding-right: 8px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .indicator slot[name='indicator'] svg {
+        width: ${iconSize};
+        height: ${iconSize};
+        fill: ${bodyFontColor};
+    }
+
+    :host([disabled]) .indicator slot[name='indicator'] svg {
+        fill: ${bodyDisabledFontColor};
+    }
+
+    slot[name='listbox'] {
+        display: none;
+        width: 100%;
+    }
+
+    :host([open]) slot[name='listbox'] {
+        display: flex;
+        position: absolute;
+    }
+
+    .end {
+        margin-inline-start: auto;
+    }
+
+    ::slotted([role='option']),
+    ::slotted(option) {
+        flex: none;
+    }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/dropdown/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,gBAAgB,EAChB,mBAAmB,EACnB,UAAU,EACV,YAAY,EACZ,SAAS,EACT,qBAAqB,EACxB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAE3D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;iBAIX,aAAa;gBACd,QAAQ;kBACN,aAAa;;;;;;;mDAOoB,WAAW;;;;;;;;;;;;;;;yBAerC,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;;;4BAOI,WAAW;;;;yBAId,gBAAgB;;4BAEb,UAAU;;;;+BAIP,SAAS;;;;;;;;;;YAU5B,YAAY;;;;;;;;;;;;;;;yBAeC,WAAW,UAAU,qBAAqB;;;;;;;+BAOpC,gBAAgB;;;;;iBAK9B,qBAAqB;6BACT,qBAAqB;;;;;;;;;;;wCAWV,YAAY;;;;;;;kCAOlB,mBAAmB;4BACzB,gBAAgB;4BAChB,0BAA0B;;;;;;;;;;;;;;;;;;;kBAmBpC,aAAa;;;;oBAIX,aAAa,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;iBAsBlC,QAAQ;kBACP,QAAQ;gBACV,aAAa;;;;gBAIb,qBAAqB;;;;;;;;;;;;;;;;;;;;;CAqBpC,CAAC"}

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

@@ -0,0 +1,5 @@
+export declare const DropdownPosition: {
+    readonly above: "above";
+    readonly below: "below";
+};
+export declare type DropdownPosition = typeof DropdownPosition[keyof typeof DropdownPosition];

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

@@ -0,0 +1,6 @@
+import { SelectPosition } from '@microsoft/fast-foundation';
+export const DropdownPosition = {
+    above: SelectPosition.above,
+    below: SelectPosition.below
+};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +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"}

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

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

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

@@ -0,0 +1,40 @@
+import { css } from '@microsoft/fast-element';
+import { controlHeight, failColor, errorTextFont, borderWidth, iconSize } from '../../theme-provider/design-tokens';
+export const styles = css `
+    .error-icon {
+        display: none;
+    }
+
+    :host(.invalid) .error-icon {
+        display: inline-flex;
+        width: ${iconSize};
+        height: ${iconSize};
+        flex: none;
+    }
+
+    .error-text {
+        display: none;
+    }
+
+    :host(.invalid) .error-text {
+        display: block;
+        font: ${errorTextFont};
+        color: ${failColor};
+        width: 100%;
+        position: absolute;
+        top: ${controlHeight};
+        left: 0px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    :host(.invalid[readonly]:not([disabled])) .error-text {
+        top: calc(${controlHeight} - ${borderWidth});
+    }
+
+    :host(.invalid) .error-text:empty {
+        display: none;
+    }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/error/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,aAAa,EACb,SAAS,EACT,aAAa,EACb,WAAW,EACX,QAAQ,EACX,MAAM,oCAAoC,CAAC;AAE5C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;iBAOR,QAAQ;kBACP,QAAQ;;;;;;;;;;gBAUV,aAAa;iBACZ,SAAS;;;eAGX,aAAa;;;;;;;;oBAQR,aAAa,MAAM,WAAW;;;;;;CAMjD,CAAC"}

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

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

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

@@ -0,0 +1,7 @@
+import { html } from '@microsoft/fast-element';
+export const errorTextTemplate = html `
+    <div class="error-text" title="${x => x.errorText}" aria-live="polite">
+        ${x => x.errorText}
+    </div>
+`;
+//# sourceMappingURL=template.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,9 @@
+/**
+ * This interface should be used by components that want to leverage the errorTextTemplate defined in templates.ts
+ */
+export interface IHasErrorText {
+    /**
+     * The error text that will be displayed when a component has the 'invalid' class set
+     */
+    errorText: string | undefined;
+}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/patterns/error/types.ts"],"names":[],"mappings":""}