@fluentui/web-components 3.0.0-beta.1 → 3.0.0-beta.100

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

@@ -0,0 +1,189 @@
+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);
+        if (!next.length) {
+            this.removeEventListener('invalid', this.invalidHandler, { capture: true });
+            return;
+        }
+        this.addEventListener('invalid', this.invalidHandler, { capture: true });
+    }
+    /**
+     * 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) {
+        if (next?.length) {
+            this.input = next?.[0];
+            this.setStates();
+        }
+    }
+    /**
+     * 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();
+        }
+    }
+    /**
+     * 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';
+    }
+    /**
+     * 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`;
+                    label.setAttribute('aria-hidden', 'true');
+                    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.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.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.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.js

@@ -0,0 +1,135 @@
+import { css } from '@microsoft/fast-element';
+import { badInputState, customErrorState, disabledState, focusVisibleState, hasMessageState, patternMismatchState, rangeOverflowState, rangeUnderflowState, stepMismatchState, tooLongState, tooShortState, typeMismatchState, validState, valueMissingState, } from '../styles/states/index.js';
+import { borderRadiusMedium, colorNeutralForeground1, colorStrokeFocus2, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontWeightRegular, fontWeightSemibold, lineHeightBase200, lineHeightBase300, lineHeightBase400, spacingHorizontalM, 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;
+    position: relative;
+  }
+
+  :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([label-position='below']:not(${hasMessageState})) {
+    grid-template-areas: 'input' 'label';
+  }
+
+  ::slotted([slot='label'])::after {
+    content: '';
+    display: block;
+    position: absolute;
+    inset: 0;
+  }
+
+  ::slotted([slot='input']) {
+    grid-area: input;
+    position: relative;
+    z-index: 1;
+  }
+
+  ::slotted([slot='message']) {
+    margin-block-start: ${spacingVerticalXXS};
+    grid-area: message;
+  }
+
+  :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};
+    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,eAAe,EACf,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,EACnB,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,UAAU,EACV,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAElB,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;;;;;;aAMlB,uBAAuB;eACrB,gBAAgB;;;;;;;;;;;;;;;;;;yBAkBN,kBAAkB;;;;;eAK5B,kBAAkB;;;;;;;;;0BASP,gBAAgB;;;uCAGH,eAAe;;;;;;;;;;;;;;;;;;0BAkB5B,kBAAkB;;;;UAIlC,iBAAiB;qBACN,kBAAkB;eACxB,gBAAgB,UAAU,iBAAiB;;;;;;;mBAOvC,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;mBAEjB,iBAAiB;;;;;iBAKnB,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.js

@@ -0,0 +1,26 @@
+import { children, elements, html, slotted } from '@microsoft/fast-element';
+/**
+ * Template for the Field component
+ * @public
+ */
+export const template = html `
+  <template
+    @click="${(x, c) => x.clickHandler(c.event)}"
+    @change="${(x, c) => x.changeHandler(c.event)}"
+    @focusin="${(x, c) => x.focusinHandler(c.event)}"
+    @focusout="${(x, c) => x.focusoutHandler(c.event)}"
+    ${children({
+    property: 'slottedInputs',
+    attributes: true,
+    attributeFilter: ['disabled', 'required', 'readonly'],
+    subtree: true,
+    selector: '[slot="input"]',
+    filter: elements(),
+})}
+  >
+    <slot name="label" part="label" ${slotted('labelSlot')}></slot>
+    <slot name="input" part="input"></slot>
+    <slot name="message" part="message" ${slotted({ property: 'messageSlot', filter: elements('[flag]') })}></slot>
+  </template>
+`;
+//# sourceMappingURL=field.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field.template.js","sourceRoot":"","sources":["../../../src/field/field.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAA4B,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGtG;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAwB,IAAI,CAAO;;cAE1C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;eAC9C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAmB,CAAC;gBAC/C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAmB,CAAC;iBAChD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAmB,CAAC;MAC7D,QAAQ,CAAC;IACT,QAAQ,EAAE,eAAe;IACzB,UAAU,EAAE,IAAI;IAChB,eAAe,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,UAAU,CAAC;IACrD,OAAO,EAAE,IAAI;IACb,QAAQ,EAAE,gBAAgB;IAC1B,MAAM,EAAE,QAAQ,EAAE;CACnB,CAAC;;sCAEgC,OAAO,CAAC,WAAW,CAAC;;0CAEhB,OAAO,CAAC,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;;CAEzG,CAAC"}

package/dist/esm/field/index.js

@@ -0,0 +1,7 @@
+export { BaseField } from './field.base.js';
+export { Field } from './field.js';
+export { LabelPosition as FieldLabelPosition, ValidationFlags } from './field.options.js';
+export { definition as FieldDefinition } from './field.definition.js';
+export { styles as FieldStyles } from './field.styles.js';
+export { template as FieldTemplate } from './field.template.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,aAAa,IAAI,kBAAkB,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1F,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/esm/image/image.bench.js

@@ -0,0 +1,14 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './image.definition.js';
+definition.define(FluentDesignSystem.registry);
+const itemRenderer = () => {
+    const image = document.createElement('fluent-image');
+    const img = document.createElement('img');
+    img.setAttribute('src', 'https://picsum.photos/300/100');
+    img.setAttribute('alt', 'Placeholder image');
+    image.appendChild(img);
+    return image;
+};
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';
+//# sourceMappingURL=image.bench.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image.bench.js","sourceRoot":"","sources":["../../../src/image/image.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,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC1C,GAAG,CAAC,YAAY,CAAC,KAAK,EAAE,+BAA+B,CAAC,CAAC;IACzD,GAAG,CAAC,YAAY,CAAC,KAAK,EAAE,mBAAmB,CAAC,CAAC;IAC7C,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IACvB,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/image/image.js

@@ -1,12 +1,10 @@
-var __decorate = (this && this.__decorate) || function (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;
-};
+import { __decorate } from "tslib";
 import { attr, FASTElement } from '@microsoft/fast-element';
 /**
  * The base class used for constucting a fluent image custom element
+ *
+ * @tag fluent-image
+ *
  * @public
  */
 export class Image extends FASTElement {

package/dist/esm/image/image.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.js","sourceRoot":"","sources":["../../../src/image/image.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG5D;;;GAGG;AACH,MAAM,OAAO,KAAM,SAAQ,WAAW;CA8CrC;AArCC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;oCACH;AASvB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uCACA;AAS1B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;qCACF;AASxB;IADC,IAAI;kCACiB;AAStB;IADC,IAAI;oCACqB"}
+{"version":3,"file":"image.js","sourceRoot":"","sources":["../../../src/image/image.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG5D;;;;;;GAMG;AACH,MAAM,OAAO,KAAM,SAAQ,WAAW;CAkDrC;AAzCQ;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;oCACH;AAUhB;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uCACA;AAUnB;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;qCACF;AAUjB;IADN,IAAI;kCACiB;AAUf;IADN,IAAI;oCACqB"}

package/dist/esm/image/image.options.js

@@ -7,7 +7,6 @@ export const ImageFit = {
     center: 'center',
     contain: 'contain',
     cover: 'cover',
-    default: 'default',
 };
 /**
  * Image shape

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

@@ -1 +1 @@
-{"version":3,"file":"image.options.js","sourceRoot":"","sources":["../../../src/image/image.options.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,SAAS;CACV,CAAC;AAOX;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACR,CAAC"}
+{"version":3,"file":"image.options.js","sourceRoot":"","sources":["../../../src/image/image.options.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;CACN,CAAC;AAOX;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACR,CAAC"}

package/dist/esm/image/image.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.template.js","sourceRoot":"","sources":["../../../src/image/image.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGpE;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA+B,IAAI,CAAO,eAAe,CAAC"}
+{"version":3,"file":"image.template.js","sourceRoot":"","sources":["../../../src/image/image.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGzE;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA+B,IAAI,CAAO,eAAe,CAAC"}

package/dist/esm/image/index.js

@@ -1,5 +1,5 @@
-export * from './image.js';
-export * from './image.options.js';
+export { Image } from './image.js';
+export { ImageFit, ImageShape } from './image.options.js';
 export { definition as ImageDefinition } from './image.definition.js';
 export { template as ImageTemplate } from './image.template.js';
 export { styles as ImageStyles } from './image.styles.js';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/image/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/image/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/esm/index-rollup.js

@@ -1,2 +1,45 @@
-export * from './index.js';
+import './accordion-item/define.js';
+import './accordion/define.js';
+import './anchor-button/define.js';
+import './avatar/define.js';
+import './badge/define.js';
+import './button/define.js';
+import './checkbox/define.js';
+import './compound-button/define.js';
+import './counter-badge/define.js';
+import './dialog/define.js';
+import './dialog-body/define.js';
+import './divider/define.js';
+import './drawer/define.js';
+import './drawer-body/define.js';
+import './dropdown/define.js';
+import './field/define.js';
+import './image/define.js';
+import './label/define.js';
+import './link/define.js';
+import './listbox/define.js';
+import './menu-button/define.js';
+import './menu-item/define.js';
+import './menu-list/define.js';
+import './menu/define.js';
+import './message-bar/define.js';
+import './option/define.js';
+import './progress-bar/define.js';
+import './radio-group/define.js';
+import './radio/define.js';
+import './rating-display/define.js';
+import './slider/define.js';
+import './spinner/define.js';
+import './switch/define.js';
+import './tab-panel/define.js';
+import './tab/define.js';
+import './tabs/define.js';
+import './tablist/define.js';
+import './textarea/define.js';
+import './text-input/define.js';
+import './text/define.js';
+import './toggle-button/define.js';
+import './tooltip/define.js';
+import './tree/define.js';
+import './tree-item/define.js';
 //# sourceMappingURL=index-rollup.js.map

package/dist/esm/index-rollup.js.map

@@ -1 +1 @@
-{"version":3,"file":"index-rollup.js","sourceRoot":"","sources":["../../src/index-rollup.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index-rollup.js","sourceRoot":"","sources":["../../src/index-rollup.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAC;AACpC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,2BAA2B,CAAC;AACnC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,6BAA6B,CAAC;AACrC,OAAO,2BAA2B,CAAC;AACnC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,yBAAyB,CAAC;AACjC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,yBAAyB,CAAC;AACjC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,yBAAyB,CAAC;AACjC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,0BAA0B,CAAC;AAClC,OAAO,yBAAyB,CAAC;AACjC,OAAO,mBAAmB,CAAC;AAC3B,OAAO,4BAA4B,CAAC;AACpC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,iBAAiB,CAAC;AACzB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,wBAAwB,CAAC;AAChC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,2BAA2B,CAAC;AACnC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,uBAAuB,CAAC"}