@fluentui/web-components 3.0.0-beta.13 → 3.0.0-beta.131

package/dist/esm/field/field.base.d.ts

@@ -0,0 +1,123 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { type SlottableInput } from './field.options.js';
+/**
+ * A Field Custom HTML Element.
+ *
+ * @public
+ */
+export declare class BaseField extends FASTElement {
+    private slottedInputObserver;
+    /**
+     * The slotted label elements.
+     *
+     * @internal
+     */
+    labelSlot: Node[];
+    /**
+     * Updates attributes on the slotted label elements.
+     *
+     * @param prev - the previous list of slotted label elements
+     * @param next - the current list of slotted label elements
+     */
+    protected labelSlotChanged(prev: Node[], next: Node[]): void;
+    /**
+     * The slotted message elements. Filtered to only include elements with a `flag` attribute.
+     *
+     * @internal
+     */
+    messageSlot: Element[];
+    /**
+     * Adds or removes the `invalid` event listener based on the presence of slotted message elements.
+     *
+     * @param prev - the previous list of slotted message elements
+     * @param next - the current list of slotted message elements
+     * @internal
+     */
+    messageSlotChanged(prev: Element[], next: Element[]): void;
+    /**
+     * The slotted inputs.
+     *
+     * @internal
+     * @privateRemarks
+     * This field is populated with the `children` directive in the template rather than `slotted`.
+     */
+    slottedInputs: SlottableInput[];
+    /**
+     * Sets the `input` property to the first slotted input.
+     *
+     * @param prev - The previous collection of inputs.
+     * @param next - The current collection of inputs.
+     * @internal
+     */
+    slottedInputsChanged(prev: SlottableInput[] | undefined, next: SlottableInput[] | undefined): void;
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * Reference to the first slotted input.
+     *
+     * @public
+     */
+    input: SlottableInput;
+    /**
+     * Updates the field's states and label properties when the assigned input changes.
+     *
+     * @param prev - the previous input
+     * @param next - the current input
+     */
+    inputChanged(prev: SlottableInput | undefined, next: SlottableInput | undefined): void;
+    /**
+     * Calls the `setStates` method when a `change` event is emitted from the slotted input.
+     *
+     * @param e - the event object
+     * @internal
+     */
+    changeHandler(e: Event): boolean | void;
+    /**
+     * Redirects `click` events to the slotted input.
+     *
+     * @param e - the event object
+     * @internal
+     */
+    clickHandler(e: MouseEvent): boolean | void;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Applies the `focus-visible` state to the element when the slotted input receives visible focus.
+     *
+     * @param e - the focus event
+     * @internal
+     */
+    focusinHandler(e: FocusEvent): boolean | void;
+    /**
+     * Removes the `focus-visible` state from the field when a slotted input loses focus.
+     *
+     * @param e - the focus event
+     * @internal
+     */
+    focusoutHandler(e: FocusEvent): boolean | void;
+    /**
+     * Toggles validity state flags on the element when the slotted input emits an `invalid` event (if slotted validation messages are present).
+     *
+     * @param e - the event object
+     * @internal
+     */
+    invalidHandler(e: Event): boolean | void;
+    /**
+     * Sets ARIA and form-related attributes on slotted label elements.
+     *
+     * @internal
+     */
+    private setLabelProperties;
+    /**
+     * Toggles the field's states based on the slotted input.
+     *
+     * @internal
+     */
+    setStates(): void;
+    setValidationStates(): void;
+}

package/dist/esm/field/field.base.js

@@ -0,0 +1,200 @@
+import { __decorate } from "tslib";
+import { FASTElement, observable } from '@microsoft/fast-element';
+import { uniqueId } from '@microsoft/fast-web-utilities';
+import { toggleState } from '../utils/element-internals.js';
+import { ValidationFlags } from './field.options.js';
+/**
+ * A Field Custom HTML Element.
+ *
+ * @public
+ */
+export class BaseField extends FASTElement {
+    /**
+     * Updates attributes on the slotted label elements.
+     *
+     * @param prev - the previous list of slotted label elements
+     * @param next - the current list of slotted label elements
+     */
+    labelSlotChanged(prev, next) {
+        if (next && this.input) {
+            this.setLabelProperties();
+            this.setStates();
+        }
+    }
+    /**
+     * Adds or removes the `invalid` event listener based on the presence of slotted message elements.
+     *
+     * @param prev - the previous list of slotted message elements
+     * @param next - the current list of slotted message elements
+     * @internal
+     */
+    messageSlotChanged(prev, next) {
+        toggleState(this.elementInternals, 'has-message', !!next.length);
+    }
+    /**
+     * Sets the `input` property to the first slotted input.
+     *
+     * @param prev - The previous collection of inputs.
+     * @param next - The current collection of inputs.
+     * @internal
+     */
+    slottedInputsChanged(prev, next) {
+        const filtered = next?.filter(node => node.nodeType === Node.ELEMENT_NODE) ?? [];
+        if (filtered?.length) {
+            this.input = filtered?.[0];
+        }
+    }
+    /**
+     * Updates the field's states and label properties when the assigned input changes.
+     *
+     * @param prev - the previous input
+     * @param next - the current input
+     */
+    inputChanged(prev, next) {
+        if (next) {
+            this.setStates();
+            this.setLabelProperties();
+            this.slottedInputObserver.observe(this.input, {
+                attributes: true,
+                attributeFilter: ['disabled', 'required', 'readonly'],
+                subtree: true,
+            });
+        }
+    }
+    /**
+     * Calls the `setStates` method when a `change` event is emitted from the slotted input.
+     *
+     * @param e - the event object
+     * @internal
+     */
+    changeHandler(e) {
+        this.setStates();
+        this.setValidationStates();
+        return true;
+    }
+    /**
+     * Redirects `click` events to the slotted input.
+     *
+     * @param e - the event object
+     * @internal
+     */
+    clickHandler(e) {
+        if (this === e.target) {
+            this.input.click();
+        }
+        return true;
+    }
+    constructor() {
+        super();
+        /**
+         * The slotted label elements.
+         *
+         * @internal
+         */
+        this.labelSlot = [];
+        /**
+         * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+         *
+         * @internal
+         */
+        this.elementInternals = this.attachInternals();
+        this.elementInternals.role = 'presentation';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('invalid', this.invalidHandler, { capture: true });
+        this.slottedInputObserver = new MutationObserver(() => {
+            this.setStates();
+        });
+    }
+    disconnectedCallback() {
+        this.slottedInputObserver.disconnect();
+        this.removeEventListener('invalid', this.invalidHandler, { capture: true });
+        super.disconnectedCallback();
+    }
+    /**
+     * Applies the `focus-visible` state to the element when the slotted input receives visible focus.
+     *
+     * @param e - the focus event
+     * @internal
+     */
+    focusinHandler(e) {
+        if (this.matches(':focus-within:has(> :focus-visible)')) {
+            toggleState(this.elementInternals, 'focus-visible', true);
+        }
+        return true;
+    }
+    /**
+     * Removes the `focus-visible` state from the field when a slotted input loses focus.
+     *
+     * @param e - the focus event
+     * @internal
+     */
+    focusoutHandler(e) {
+        toggleState(this.elementInternals, 'focus-visible', false);
+        return true;
+    }
+    /**
+     * Toggles validity state flags on the element when the slotted input emits an `invalid` event (if slotted validation messages are present).
+     *
+     * @param e - the event object
+     * @internal
+     */
+    invalidHandler(e) {
+        if (this.messageSlot.length) {
+            e.preventDefault();
+        }
+        this.setValidationStates();
+    }
+    /**
+     * Sets ARIA and form-related attributes on slotted label elements.
+     *
+     * @internal
+     */
+    setLabelProperties() {
+        if (this.$fastController.isConnected) {
+            this.input.id = this.input.id || uniqueId('input');
+            this.labelSlot?.forEach(label => {
+                if (label instanceof HTMLLabelElement) {
+                    label.htmlFor = label.htmlFor || this.input.id;
+                    label.id = label.id || `${this.input.id}--label`;
+                    this.input.setAttribute('aria-labelledby', label.id);
+                }
+            });
+        }
+    }
+    /**
+     * Toggles the field's states based on the slotted input.
+     *
+     * @internal
+     */
+    setStates() {
+        if (this.elementInternals && this.input) {
+            toggleState(this.elementInternals, 'disabled', !!this.input.disabled);
+            toggleState(this.elementInternals, 'readonly', !!this.input.readOnly);
+            toggleState(this.elementInternals, 'required', !!this.input.required);
+            toggleState(this.elementInternals, 'checked', !!this.input.checked);
+        }
+    }
+    setValidationStates() {
+        if (!this.input?.validity) {
+            return;
+        }
+        for (const [flag, value] of Object.entries(ValidationFlags)) {
+            toggleState(this.elementInternals, value, this.input.validity[flag]);
+        }
+    }
+}
+__decorate([
+    observable
+], BaseField.prototype, "labelSlot", void 0);
+__decorate([
+    observable
+], BaseField.prototype, "messageSlot", void 0);
+__decorate([
+    observable
+], BaseField.prototype, "slottedInputs", void 0);
+__decorate([
+    observable
+], BaseField.prototype, "input", void 0);
+//# sourceMappingURL=field.base.js.map

package/dist/esm/field/field.base.js.map

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

package/dist/esm/field/field.bench.d.ts

@@ -0,0 +1,3 @@
+declare const itemRenderer: () => HTMLElement;
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';

package/dist/esm/field/field.bench.js

@@ -0,0 +1,10 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './field.definition.js';
+definition.define(FluentDesignSystem.registry);
+const itemRenderer = () => {
+    const field = document.createElement('fluent-field');
+    return field;
+};
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';
+//# sourceMappingURL=field.bench.js.map

package/dist/esm/field/field.bench.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.bench.js","sourceRoot":"","sources":["../../../src/field/field.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IACrD,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/field/field.d.ts

@@ -0,0 +1,20 @@
+import { BaseField } from './field.base.js';
+import { LabelPosition } from './field.options.js';
+/**
+ * A Field Custom HTML Element.
+ * Based on BaseField and includes style and layout specific attributes
+ *
+ * @tag fluent-field
+ *
+ * @public
+ */
+export declare class Field extends BaseField {
+    /**
+     * The position of the label relative to the input.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `label-position`
+     */
+    labelPosition: LabelPosition;
+}

package/dist/esm/field/field.definition.d.ts

@@ -0,0 +1,9 @@
+import { Field } from './field.js';
+/**
+ * The Fluent Field Element
+ *
+ * @public
+ * @remarks
+ * HTML Element: `<fluent-field>`
+ */
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof Field>;

package/dist/esm/field/field.definition.js

@@ -0,0 +1,20 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { Field } from './field.js';
+import { styles } from './field.styles.js';
+import { template } from './field.template.js';
+/**
+ * The Fluent Field Element
+ *
+ * @public
+ * @remarks
+ * HTML Element: `<fluent-field>`
+ */
+export const definition = Field.compose({
+    name: `${FluentDesignSystem.prefix}-field`,
+    template,
+    styles,
+    shadowOptions: {
+        delegatesFocus: true,
+    },
+});
+//# sourceMappingURL=field.definition.js.map

package/dist/esm/field/field.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.definition.js","sourceRoot":"","sources":["../../../src/field/field.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC;IACtC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,QAAQ;IAC1C,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,cAAc,EAAE,IAAI;KACrB;CACF,CAAC,CAAC"}

package/dist/esm/field/field.js

@@ -0,0 +1,29 @@
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
+import { BaseField } from './field.base.js';
+import { LabelPosition } from './field.options.js';
+/**
+ * A Field Custom HTML Element.
+ * Based on BaseField and includes style and layout specific attributes
+ *
+ * @tag fluent-field
+ *
+ * @public
+ */
+export class Field extends BaseField {
+    constructor() {
+        super(...arguments);
+        /**
+         * The position of the label relative to the input.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: `label-position`
+         */
+        this.labelPosition = LabelPosition.above;
+    }
+}
+__decorate([
+    attr({ attribute: 'label-position' })
+], Field.prototype, "labelPosition", void 0);
+//# sourceMappingURL=field.js.map

package/dist/esm/field/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","sourceRoot":"","sources":["../../../src/field/field.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD;;;;;;;GAOG;AACH,MAAM,OAAO,KAAM,SAAQ,SAAS;IAApC;;QACE;;;;;;WAMG;QAEI,kBAAa,GAAkB,aAAa,CAAC,KAAK,CAAC;IAC5D,CAAC;CAAA;AADQ;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;4CACoB"}

package/dist/esm/field/field.options.d.ts

@@ -0,0 +1,43 @@
+import type { ValuesOf } from '../utils/typings.js';
+/**
+ * Label position values
+ * @public
+ */
+export declare const LabelPosition: {
+    readonly above: "above";
+    readonly after: "after";
+    readonly before: "before";
+};
+/** @public */
+export type LabelPosition = ValuesOf<typeof LabelPosition>;
+/**
+ * Synthetic type for slotted input elements
+ * @public
+ */
+export type SlottableInput = HTMLElement & ElementInternals & {
+    elementInternals?: ElementInternals;
+    required: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    checked?: boolean;
+    value?: string;
+};
+/**
+ * Synthetic type for slotted message elements
+ * @public
+ */
+export declare const ValidationFlags: {
+    readonly badInput: "bad-input";
+    readonly customError: "custom-error";
+    readonly patternMismatch: "pattern-mismatch";
+    readonly rangeOverflow: "range-overflow";
+    readonly rangeUnderflow: "range-underflow";
+    readonly stepMismatch: "step-mismatch";
+    readonly tooLong: "too-long";
+    readonly tooShort: "too-short";
+    readonly typeMismatch: "type-mismatch";
+    readonly valueMissing: "value-missing";
+    readonly valid: "valid";
+};
+/** @public */
+export type ValidationFlags = ValuesOf<typeof ValidationFlags>;

package/dist/esm/field/field.options.js

@@ -0,0 +1,27 @@
+/**
+ * Label position values
+ * @public
+ */
+export const LabelPosition = {
+    above: 'above',
+    after: 'after',
+    before: 'before',
+};
+/**
+ * Synthetic type for slotted message elements
+ * @public
+ */
+export const ValidationFlags = {
+    badInput: 'bad-input',
+    customError: 'custom-error',
+    patternMismatch: 'pattern-mismatch',
+    rangeOverflow: 'range-overflow',
+    rangeUnderflow: 'range-underflow',
+    stepMismatch: 'step-mismatch',
+    tooLong: 'too-long',
+    tooShort: 'too-short',
+    typeMismatch: 'type-mismatch',
+    valueMissing: 'value-missing',
+    valid: 'valid',
+};
+//# sourceMappingURL=field.options.js.map

package/dist/esm/field/field.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.options.js","sourceRoot":"","sources":["../../../src/field/field.options.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;CACR,CAAC;AAmBX;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,QAAQ,EAAE,WAAW;IACrB,WAAW,EAAE,cAAc;IAC3B,eAAe,EAAE,kBAAkB;IACnC,aAAa,EAAE,gBAAgB;IAC/B,cAAc,EAAE,iBAAiB;IACjC,YAAY,EAAE,eAAe;IAC7B,OAAO,EAAE,UAAU;IACnB,QAAQ,EAAE,WAAW;IACrB,YAAY,EAAE,eAAe;IAC7B,YAAY,EAAE,eAAe;IAC7B,KAAK,EAAE,OAAO;CACN,CAAC"}

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

@@ -0,0 +1,6 @@
+/**
+ * The styles for the {@link Field} component.
+ *
+ * @public
+ */
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

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

@@ -0,0 +1,133 @@
+import { css } from '@microsoft/fast-element';
+import { badInputState, customErrorState, disabledState, focusVisibleState, patternMismatchState, rangeOverflowState, rangeUnderflowState, requiredState, stepMismatchState, tooLongState, tooShortState, typeMismatchState, validState, valueMissingState, } from '../styles/states/index.js';
+import { borderRadiusMedium, colorNeutralForeground1, colorNeutralForeground3, colorPaletteRedForeground1, colorStrokeFocus2, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontWeightRegular, fontWeightSemibold, lineHeightBase200, lineHeightBase300, lineHeightBase400, spacingHorizontalM, spacingHorizontalXS, spacingVerticalM, spacingVerticalS, spacingVerticalXXS, strokeWidthThick, } from '../theme/design-tokens.js';
+import { display } from '../utils/display.js';
+import { ValidationFlags } from './field.options.js';
+/**
+ * The styles for the {@link Field} component.
+ *
+ * @public
+ */
+export const styles = css `
+  ${display('inline-grid')}
+
+  :host {
+    color: ${colorNeutralForeground1};
+    align-items: center;
+    gap: 0 ${spacingHorizontalM};
+    justify-items: start;
+  }
+
+  :has([slot='message']) {
+    color: ${colorNeutralForeground1};
+    row-gap: ${spacingVerticalS};
+  }
+
+  :not(::slotted([slot='label'])) {
+    gap: 0;
+  }
+
+  :host([label-position='before']) {
+    grid-template-areas: 'label input' 'label message';
+  }
+
+  :host([label-position='after']) {
+    gap: 0;
+    grid-template-areas: 'input label' 'message message';
+    grid-template-columns: auto 1fr;
+  }
+
+  :host([label-position='after']) ::slotted([slot='input']) {
+    margin-inline-end: ${spacingHorizontalM};
+  }
+
+  :host([label-position='above']) {
+    grid-template-areas: 'label' 'input' 'message';
+    row-gap: ${spacingVerticalXXS};
+  }
+
+  :host([label-position='below']) {
+    grid-template-areas: 'input' 'label' 'message';
+    justify-items: center;
+  }
+
+  :host([label-position='below']) ::slotted([slot='label']) {
+    margin-block-start: ${spacingVerticalM};
+  }
+
+  :host(${requiredState}) ::slotted([slot='label'])::after {
+    content: '*' / '';
+    color: ${colorPaletteRedForeground1};
+    margin-inline-start: ${spacingHorizontalXS};
+  }
+
+  ::slotted([slot='input']) {
+    grid-area: input;
+  }
+
+  ::slotted([slot='message']) {
+    color: ${colorNeutralForeground3};
+    font-family: ${fontFamilyBase};
+    font-size: ${fontSizeBase200};
+    font-weight: ${fontWeightRegular};
+    grid-area: message;
+    line-height: ${lineHeightBase200};
+    margin-block-start: ${spacingVerticalXXS};
+  }
+
+  :host(${focusVisibleState}:focus-within) {
+    border-radius: ${borderRadiusMedium};
+    outline: ${strokeWidthThick} solid ${colorStrokeFocus2};
+  }
+
+  ::slotted(label),
+  ::slotted([slot='label']) {
+    cursor: inherit;
+    display: inline-flex;
+    font-family: ${fontFamilyBase};
+    font-size: ${fontSizeBase300};
+    font-weight: ${fontWeightRegular};
+    grid-area: label;
+    line-height: ${lineHeightBase300};
+    justify-self: stretch;
+    user-select: none;
+  }
+
+  :host([size='small']) ::slotted(label) {
+    font-size: ${fontSizeBase200};
+    line-height: ${lineHeightBase200};
+  }
+
+  :host([size='large']) ::slotted(label) {
+    font-size: ${fontSizeBase400};
+    line-height: ${lineHeightBase400};
+  }
+
+  :host([size='large']) ::slotted(label),
+  :host([weight='semibold']) ::slotted(label) {
+    font-weight: ${fontWeightSemibold};
+  }
+
+  :host(${disabledState}) {
+    cursor: default;
+  }
+
+  ::slotted([flag]) {
+    display: none;
+  }
+
+  :host(${badInputState}) ::slotted([flag='${ValidationFlags.badInput}']),
+  :host(${customErrorState}) ::slotted([flag='${ValidationFlags.customError}']),
+  :host(${patternMismatchState}) ::slotted([flag='${ValidationFlags.patternMismatch}']),
+  :host(${rangeOverflowState}) ::slotted([flag='${ValidationFlags.rangeOverflow}']),
+  :host(${rangeUnderflowState}) ::slotted([flag='${ValidationFlags.rangeUnderflow}']),
+  :host(${stepMismatchState}) ::slotted([flag='${ValidationFlags.stepMismatch}']),
+  :host(${tooLongState}) ::slotted([flag='${ValidationFlags.tooLong}']),
+  :host(${tooShortState}) ::slotted([flag='${ValidationFlags.tooShort}']),
+  :host(${typeMismatchState}) ::slotted([flag='${ValidationFlags.typeMismatch}']),
+  :host(${valueMissingState}) ::slotted([flag='${ValidationFlags.valueMissing}']),
+  :host(${validState}) ::slotted([flag='${ValidationFlags.valid}']) {
+    display: block;
+  }
+`;
+//# sourceMappingURL=field.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field.styles.js","sourceRoot":"","sources":["../../../src/field/field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,iBAAiB,EACjB,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,EACnB,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,UAAU,EACV,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,uBAAuB,EACvB,0BAA0B,EAC1B,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,gBAAgB,EAChB,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;aAGb,uBAAuB;;aAEvB,kBAAkB;;;;;aAKlB,uBAAuB;eACrB,gBAAgB;;;;;;;;;;;;;;;;;;yBAkBN,kBAAkB;;;;;eAK5B,kBAAkB;;;;;;;;;0BASP,gBAAgB;;;UAGhC,aAAa;;aAEV,0BAA0B;2BACZ,mBAAmB;;;;;;;;aAQjC,uBAAuB;mBACjB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;mBAEjB,iBAAiB;0BACV,kBAAkB;;;UAGlC,iBAAiB;qBACN,kBAAkB;eACxB,gBAAgB,UAAU,iBAAiB;;;;;;;mBAOvC,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;mBAEjB,iBAAiB;;;;;;iBAMnB,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;;mBAKjB,kBAAkB;;;UAG3B,aAAa;;;;;;;;UAQb,aAAa,sBAAsB,eAAe,CAAC,QAAQ;UAC3D,gBAAgB,sBAAsB,eAAe,CAAC,WAAW;UACjE,oBAAoB,sBAAsB,eAAe,CAAC,eAAe;UACzE,kBAAkB,sBAAsB,eAAe,CAAC,aAAa;UACrE,mBAAmB,sBAAsB,eAAe,CAAC,cAAc;UACvE,iBAAiB,sBAAsB,eAAe,CAAC,YAAY;UACnE,YAAY,sBAAsB,eAAe,CAAC,OAAO;UACzD,aAAa,sBAAsB,eAAe,CAAC,QAAQ;UAC3D,iBAAiB,sBAAsB,eAAe,CAAC,YAAY;UACnE,iBAAiB,sBAAsB,eAAe,CAAC,YAAY;UACnE,UAAU,sBAAsB,eAAe,CAAC,KAAK;;;CAG9D,CAAC"}

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

@@ -0,0 +1,6 @@
+import { type ElementViewTemplate } from '@microsoft/fast-element';
+/**
+ * Template for the Field component
+ * @public
+ */
+export declare const template: ElementViewTemplate;