@genesislcap/foundation-ui 14.416.1 → 14.417.0-FUI-0-react-renderers.1

package/dist/dts/_common/affix-mixin.d.ts

@@ -0,0 +1,46 @@
+type Constructor<T = object> = new (...args: any[]) => T;
+interface AffixMixinBase {
+    ariaDescribedby: string | null;
+    id: string;
+}
+/**
+ * Mixin that adds prefix/suffix affix support with screen-reader handling to an input field component.
+ * Shared between TextField and NumberField to keep the behaviour consistent and avoid duplication.
+ */
+export declare function AffixMixin<TBase extends Constructor<AffixMixinBase>>(Base: TBase): {
+    new (...args: any[]): {
+        /**
+         * Optional non-editable label shown on the left inside the field, before the input.
+         */
+        prefix: string;
+        /**
+         * Optional non-editable suffix (e.g. unit label) shown on the right inside the field.
+         */
+        suffix: string;
+        /**
+         * When true, prefix/suffix are not exposed to assistive technology (`aria-hidden` on affixes,
+         * and their ids are omitted from the control's `aria-describedby`).
+         * Use only when the unit or symbol is redundant with the visible label or other text.
+         * @remarks
+         * By default, affix text is **included** for screen readers: stable ids are assigned to the
+         * affix nodes and referenced from the input's `aria-describedby` (merged with any author
+         * `aria-describedby`), which announces them as supplementary description after the field name
+         * from the label.
+         * For cases where the affix should be part of the accessible **name** instead (e.g. currency
+         * code read as part of the label), set `hide-affix-from-screen-reader` and wire
+         * `aria-labelledby` on the host to reference the label slot and your own elements, or provide
+         * a single `aria-label` that includes the full name.
+         */
+        hideAffixFromScreenReader: boolean;
+        /**
+         * Merges the host `aria-describedby` with ids of the prefix/suffix nodes when those affixes
+         * are exposed to screen readers.
+         * @internal
+         */
+        get controlAriaDescribedby(): string | undefined;
+        ariaDescribedby: string | null;
+        id: string;
+    };
+} & TBase;
+export {};
+//# sourceMappingURL=affix-mixin.d.ts.map

package/dist/dts/_common/affix-mixin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"affix-mixin.d.ts","sourceRoot":"","sources":["../../../src/_common/affix-mixin.ts"],"names":[],"mappings":"AAEA,KAAK,WAAW,CAAC,CAAC,GAAG,MAAM,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAEzD,UAAU,cAAc;IACtB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,EAAE,EAAE,MAAM,CAAC;CACZ;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,KAAK,SAAS,WAAW,CAAC,cAAc,CAAC,EAAE,IAAI,EAAE,KAAK;kBAXpC,GAAG,EAAE;QAa9C;;WAEG;gBACW,MAAM;QAEpB;;WAEG;gBACW,MAAM;QAEpB;;;;;;;;;;;;;WAaG;mCAEwB,OAAO;QAElC;;;;WAIG;sCAC2B,MAAM,GAAG,SAAS;yBA1CjC,MAAM,GAAG,IAAI;YAC1B,MAAM;;UAsEX"}

package/dist/dts/_common/field-styles.d.ts

@@ -0,0 +1,2 @@
+export declare const sharedFieldStyles: import("@microsoft/fast-element").ElementStyles;
+//# sourceMappingURL=field-styles.d.ts.map

package/dist/dts/_common/field-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-styles.d.ts","sourceRoot":"","sources":["../../../src/_common/field-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,iDA4D7B,CAAC"}

package/dist/dts/_common/index.d.ts

@@ -1,3 +1,5 @@
+export * from './affix-mixin';
 export * from './base-file-component';
+export * from './field-styles';
 export * from './icons';
 //# sourceMappingURL=index.d.ts.map

package/dist/dts/_common/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/_common/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/_common/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC"}

package/dist/dts/number-field/number-field.d.ts

@@ -1,9 +1,19 @@
 import { NumberField as FASTNumberField } from '@microsoft/fast-components';
 import type { NumberFieldOptions } from '@microsoft/fast-foundation';
+declare const NumberField_base: {
+    new (...args: any[]): {
+        prefix: string;
+        suffix: string;
+        hideAffixFromScreenReader: boolean;
+        get controlAriaDescribedby(): string | undefined;
+        ariaDescribedby: string | null;
+        id: string;
+    };
+} & typeof FASTNumberField;
 /**
  * @tagname %%prefix%%-number-field
  */
-export declare class NumberField extends FASTNumberField {
+export declare class NumberField extends NumberField_base {
     autocomplete: string;
     private autocompleteChanged;
     hideStep: boolean;
@@ -33,4 +43,5 @@ export declare const defaultNumberFieldConfig: {
  * HTML Element: \<foundation-number-field\>
  */
 export declare const foundationNumberField: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<NumberFieldOptions>) => import("@microsoft/fast-foundation").FoundationElementRegistry<NumberFieldOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
+export {};
 //# sourceMappingURL=number-field.d.ts.map

package/dist/dts/number-field/number-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"number-field.d.ts","sourceRoot":"","sources":["../../../src/number-field/number-field.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE5E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAiBrE;;GAEG;AACH,qBAAa,WAAY,SAAQ,eAAe;IACxC,YAAY,EAAE,MAAM,CAAS;IACnC,OAAO,CAAC,mBAAmB;IAKA,QAAQ,EAAE,OAAO,CAAS;IAC/C,KAAK,EAAE,MAAM,CAAM;IACE,cAAc,EAAE,OAAO,CAAS;IACrD,MAAM,EAAE,MAAM,CAAW;IACJ,iBAAiB,EAAE,OAAO,CAAS;IACxD,qBAAqB,EAAE,MAAM,CAAuB;IAE1D,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAG/B;IAEF,MAAM,IAAI,IAAI;IAuCd,QAAQ,IAAI,IAAI;IA0ChB,2BAA2B;IAK3B,eAAe,IAAI,IAAI;IAoCvB,YAAY,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,GAAG,IAAI;IA+C5C,UAAU,IAAI,IAAI;CA4BnB;AAED,eAAO,MAAM,kCAAkC,EAAE,cAGhD,CAAC;AAEF,eAAO,MAAM,wBAAwB;;;CAWpC,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,oTAMhC,CAAC"}
+{"version":3,"file":"number-field.d.ts","sourceRoot":"","sources":["../../../src/number-field/number-field.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE5E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;;;;;;;;;;;AAkBrE;;GAEG;AACH,qBAAa,WAAY,SAAQ,gBAA2B;IACpD,YAAY,EAAE,MAAM,CAAS;IACnC,OAAO,CAAC,mBAAmB;IAKA,QAAQ,EAAE,OAAO,CAAS;IAE/C,KAAK,EAAE,MAAM,CAAM;IACE,cAAc,EAAE,OAAO,CAAS;IACrD,MAAM,EAAE,MAAM,CAAW;IACJ,iBAAiB,EAAE,OAAO,CAAS;IACxD,qBAAqB,EAAE,MAAM,CAAuB;IAE1D,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAG/B;IAEF,MAAM,IAAI,IAAI;IAuCd,QAAQ,IAAI,IAAI;IA0ChB,2BAA2B;IAK3B,eAAe,IAAI,IAAI;IAoCvB,YAAY,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,GAAG,IAAI;IA+C5C,UAAU,IAAI,IAAI;CA4BnB;AAED,eAAO,MAAM,kCAAkC,EAAE,cAGhD,CAAC;AAEF,eAAO,MAAM,wBAAwB;;;CAWpC,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,oTAMhC,CAAC"}

package/dist/dts/number-field/number-field.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"number-field.styles.d.ts","sourceRoot":"","sources":["../../../src/number-field/number-field.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EACV,wBAAwB,EACxB,2BAA2B,EAC5B,MAAM,4BAA4B,CAAC;AAEpC,eAAO,MAAM,2BAA2B,GACtC,SAAS,wBAAwB,EACjC,YAAY,2BAA2B,KACtC,aAkCF,CAAC"}
+{"version":3,"file":"number-field.styles.d.ts","sourceRoot":"","sources":["../../../src/number-field/number-field.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EACV,wBAAwB,EACxB,2BAA2B,EAC5B,MAAM,4BAA4B,CAAC;AAGpC,eAAO,MAAM,2BAA2B,GACtC,SAAS,wBAAwB,EACjC,YAAY,2BAA2B,KACtC,aAgCF,CAAC"}

package/dist/dts/number-field/number-field.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"number-field.template.d.ts","sourceRoot":"","sources":["../../../src/number-field/number-field.template.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE5D,OAAO,EAGL,yBAAyB,EACzB,kBAAkB,EAEnB,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD;;;;;GAKG;AACH,eAAO,MAAM,6BAA6B,EAAE,yBAAyB,CACnE,YAAY,CAAC,WAAW,CAAC,EACzB,kBAAkB,CA0EnB,CAAC"}
+{"version":3,"file":"number-field.template.d.ts","sourceRoot":"","sources":["../../../src/number-field/number-field.template.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE5D,OAAO,EAGL,yBAAyB,EACzB,kBAAkB,EAEnB,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD;;;;;GAKG;AACH,eAAO,MAAM,6BAA6B,EAAE,yBAAyB,CACnE,YAAY,CAAC,WAAW,CAAC,EACzB,kBAAkB,CA2GnB,CAAC"}

package/dist/dts/text-field/text-field.d.ts

@@ -1,34 +1,23 @@
 import { TextField as FASTTextField } from '@microsoft/fast-components';
+declare const TextField_base: {
+    new (...args: any[]): {
+        prefix: string;
+        suffix: string;
+        hideAffixFromScreenReader: boolean;
+        get controlAriaDescribedby(): string | undefined;
+        ariaDescribedby: string | null;
+        id: string;
+    };
+} & typeof FASTTextField;
 /**
  * @tagname %%prefix%%-text-field
  */
-export declare class TextField extends FASTTextField {
+export declare class TextField extends TextField_base {
     autocomplete: string;
     private autocompleteChanged;
     autocapitalize: string;
     private autocapitalizeChanged;
     step: number;
-    /**
-     * Optional non-editable label shown on the left inside the field, before the input.
-     */
-    prefix: string;
-    /**
-     * Optional non-editable suffix (e.g. unit label) shown on the right inside the field.
-     */
-    suffix: string;
-    /**
-     * When true, prefix/suffix are not exposed to assistive technology (`aria-hidden` on affixes, and their ids are omitted from the control’s `aria-describedby`).
-     * Use only when the unit or symbol is redundant with the visible label or other text.
-     * @remarks
-     * By default, affix text is **included** for screen readers: stable ids are assigned to the affix nodes and referenced from the input’s `aria-describedby` (merged with any author `aria-describedby`), which announces them as supplementary description after the field name from the label.
-     * For cases where the affix should be part of the accessible **name** instead (e.g. currency code read as part of the label), set `hide-affix-from-screen-reader` and wire `aria-labelledby` on the host to reference the label slot and your own elements, or provide a single `aria-label` that includes the full name.
-     */
-    hideAffixFromScreenReader: boolean;
-    /**
-     * Merges the host `aria-describedby` with ids of the prefix/suffix nodes when those affixes are exposed to SRs.
-     * @internal
-     */
-    get controlAriaDescribedby(): string | undefined;
 }
 export declare const foundationTextFieldShadowOptions: ShadowRootInit;
 export declare const defaultTextFieldConfig: {};
@@ -40,4 +29,5 @@ export declare const defaultTextFieldConfig: {};
  * HTML Element: \<foundation-text-field\>
  */
 export declare const foundationTextField: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition>) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof TextField>;
+export {};
 //# sourceMappingURL=text-field.d.ts.map

package/dist/dts/text-field/text-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../../src/text-field/text-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAOxE;;GAEG;AACH,qBAAa,SAAU,SAAQ,aAAa;IACpC,YAAY,EAAE,MAAM,CAAS;IACnC,OAAO,CAAC,mBAAmB;IAKrB,cAAc,EAAE,MAAM,CAAS;IACrC,OAAO,CAAC,qBAAqB;IAKvB,IAAI,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACG,MAAM,EAAE,MAAM,CAAC;IAErB;;OAEG;IACG,MAAM,EAAE,MAAM,CAAC;IAErB;;;;;;OAMG;IAEH,yBAAyB,EAAE,OAAO,CAAS;IAE3C;;;OAGG;IACH,IAAI,sBAAsB,IAAI,MAAM,GAAG,SAAS,CAyB/C;CACF;AAGD,eAAO,MAAM,gCAAgC,EAAE,cAG9C,CAAC;AAEF,eAAO,MAAM,sBAAsB,IAAK,CAAC;AAEzC;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,yTAM9B,CAAC"}
+{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../../src/text-field/text-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;;;;;;;;;;;AAQxE;;GAEG;AACH,qBAAa,SAAU,SAAQ,cAAyB;IAChD,YAAY,EAAE,MAAM,CAAS;IACnC,OAAO,CAAC,mBAAmB;IAKrB,cAAc,EAAE,MAAM,CAAS;IACrC,OAAO,CAAC,qBAAqB;IAKvB,IAAI,EAAE,MAAM,CAAC;CACpB;AAGD,eAAO,MAAM,gCAAgC,EAAE,cAG9C,CAAC;AAEF,eAAO,MAAM,sBAAsB,IAAK,CAAC;AAEzC;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,yTAM9B,CAAC"}

package/dist/dts/text-field/text-field.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.styles.d.ts","sourceRoot":"","sources":["../../../src/text-field/text-field.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAO,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EACV,wBAAwB,EACxB,2BAA2B,EAC5B,MAAM,4BAA4B,CAAC;AAEpC,eAAO,MAAM,yBAAyB,GACpC,SAAS,wBAAwB,EACjC,YAAY,2BAA2B,KACtC,aAmEF,CAAC"}
+{"version":3,"file":"text-field.styles.d.ts","sourceRoot":"","sources":["../../../src/text-field/text-field.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAO,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EACV,wBAAwB,EACxB,2BAA2B,EAC5B,MAAM,4BAA4B,CAAC;AAGpC,eAAO,MAAM,yBAAyB,GACpC,SAAS,wBAAwB,EACjC,YAAY,2BAA2B,KACtC,aAQF,CAAC"}

package/dist/esm/_common/affix-mixin.js

@@ -0,0 +1,70 @@
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
+/**
+ * Mixin that adds prefix/suffix affix support with screen-reader handling to an input field component.
+ * Shared between TextField and NumberField to keep the behaviour consistent and avoid duplication.
+ */
+export function AffixMixin(Base) {
+    class AffixClass extends Base {
+        constructor() {
+            super(...arguments);
+            /**
+             * When true, prefix/suffix are not exposed to assistive technology (`aria-hidden` on affixes,
+             * and their ids are omitted from the control's `aria-describedby`).
+             * Use only when the unit or symbol is redundant with the visible label or other text.
+             * @remarks
+             * By default, affix text is **included** for screen readers: stable ids are assigned to the
+             * affix nodes and referenced from the input's `aria-describedby` (merged with any author
+             * `aria-describedby`), which announces them as supplementary description after the field name
+             * from the label.
+             * For cases where the affix should be part of the accessible **name** instead (e.g. currency
+             * code read as part of the label), set `hide-affix-from-screen-reader` and wire
+             * `aria-labelledby` on the host to reference the label slot and your own elements, or provide
+             * a single `aria-label` that includes the full name.
+             */
+            this.hideAffixFromScreenReader = false;
+        }
+        /**
+         * Merges the host `aria-describedby` with ids of the prefix/suffix nodes when those affixes
+         * are exposed to screen readers.
+         * @internal
+         */
+        get controlAriaDescribedby() {
+            var _a;
+            const hostIds = (_a = this.ariaDescribedby) === null || _a === void 0 ? void 0 : _a.trim();
+            const parts = [];
+            if (hostIds) {
+                parts.push(...hostIds.split(/\s+/).filter(Boolean));
+            }
+            if (!this.hideAffixFromScreenReader) {
+                const base = this.id || 'control';
+                if (this.prefix) {
+                    parts.push(`${base}-prefix`);
+                }
+                if (this.suffix) {
+                    parts.push(`${base}-suffix`);
+                }
+            }
+            const seen = new Set();
+            const deduped = [];
+            for (const id of parts) {
+                if (!seen.has(id)) {
+                    seen.add(id);
+                    deduped.push(id);
+                }
+            }
+            const merged = deduped.join(' ');
+            return merged || undefined;
+        }
+    }
+    __decorate([
+        attr
+    ], AffixClass.prototype, "prefix", void 0);
+    __decorate([
+        attr
+    ], AffixClass.prototype, "suffix", void 0);
+    __decorate([
+        attr({ attribute: 'hide-affix-from-screen-reader', mode: 'boolean' })
+    ], AffixClass.prototype, "hideAffixFromScreenReader", void 0);
+    return AffixClass;
+}

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

@@ -0,0 +1,62 @@
+import { css } from '@microsoft/fast-element';
+export const sharedFieldStyles = css `
+  .label-hidden {
+    margin: 0;
+  }
+
+  .control-field {
+    display: flex;
+    flex: 1 1 0%;
+    min-width: 0;
+    align-self: stretch;
+    align-items: stretch;
+  }
+
+  .control-field .control {
+    flex: 1 1 auto;
+    min-width: 0;
+    width: auto;
+  }
+
+  .prefix,
+  .suffix {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    padding: 0 calc(var(--design-unit) * 2px);
+    user-select: none;
+    white-space: nowrap;
+    background-color: var(--neutral-fill-rest);
+    color: var(--neutral-foreground-hint);
+    font-size: var(--type-ramp-base-font-size);
+    font-family: inherit;
+    line-height: 1;
+  }
+
+  .prefix {
+    border-right: 1px solid var(--neutral-stroke-divider-rest);
+    border-radius: calc(var(--control-corner-radius) * 1px) 0 0
+      calc(var(--control-corner-radius) * 1px);
+  }
+
+  .suffix {
+    border-left: 1px solid var(--neutral-stroke-divider-rest);
+    border-radius: 0 calc(var(--control-corner-radius) * 1px)
+      calc(var(--control-corner-radius) * 1px) 0;
+  }
+
+  :host(.has-prefix:not(.has-suffix)) .control-field .control {
+    border-radius: 0 calc(var(--control-corner-radius) * 1px)
+      calc(var(--control-corner-radius) * 1px) 0;
+  }
+
+  :host(.has-suffix:not(.has-prefix)) .control-field .control {
+    border-radius: calc(var(--control-corner-radius) * 1px) 0 0
+      calc(var(--control-corner-radius) * 1px);
+  }
+
+  :host(.has-prefix.has-suffix) .control-field .control {
+    border-radius: 0;
+  }
+`;

package/dist/esm/_common/index.js

@@ -1,2 +1,4 @@
+export * from './affix-mixin';
 export * from './base-file-component';
+export * from './field-styles';
 export * from './icons';

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

@@ -2,6 +2,7 @@ import { __decorate } from "tslib";
 import { NumberParser } from '@genesislcap/foundation-utils';
 import { NumberField as FASTNumberField } from '@microsoft/fast-components';
 import { DOM, attr } from '@microsoft/fast-element';
+import { AffixMixin } from '../_common';
 import { foundationNumberFieldStyles as styles } from './number-field.styles';
 import { foundationNumberFieldTemplate as template } from './number-field.template';
 import { applyDecimalPrecisionLimits, calculateAutoStepPrecision, decrementWithPrecision, formatControlValue, incrementWithPrecision, toIntlNumberFormat, validateInput, validateMinMax, } from './utils';
@@ -10,7 +11,7 @@ const MAX_INPUT_PRECISION = 12;
 /**
  * @tagname %%prefix%%-number-field
  */
-export class NumberField extends FASTNumberField {
+export class NumberField extends AffixMixin(FASTNumberField) {
     constructor() {
         super(...arguments);
         this.autocomplete = 'off';

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

@@ -1,5 +1,6 @@
 import { numberFieldStyles as fastNumberFieldStyles } from '@microsoft/fast-components';
 import { css } from '@microsoft/fast-element';
+import { sharedFieldStyles } from '../_common';
 export const foundationNumberFieldStyles = (context, definition) => css `
   ${fastNumberFieldStyles(context, definition)}
   ::part(label) {
@@ -31,7 +32,5 @@ export const foundationNumberFieldStyles = (context, definition) => css `
     margin-inline-end: unset;
   }
 
-  .label-hidden {
-    margin: 0;
-  }
+  ${sharedFieldStyles}
 `;

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

@@ -7,7 +7,11 @@ import { endSlotTemplate, startSlotTemplate, } from '@microsoft/fast-foundation'
  * Taken from `@microsoft/fast-foundation.46.2`
  */
 export const foundationNumberFieldTemplate = (context, definition) => html `
-  <template class="${(x) => (x.readOnly ? 'readonly' : '')}">
+  <template
+    class="${(x) => [x.readOnly ? 'readonly' : '', x.prefix ? 'has-prefix' : '', x.suffix ? 'has-suffix' : '']
+    .filter(Boolean)
+    .join(' ')}"
+  >
     <label
       part="label"
       for="${(x) => (x.id ? x.id : 'control')}"
@@ -17,51 +21,73 @@ export const foundationNumberFieldTemplate = (context, definition) => html `
     </label>
     <div class="root" part="root">
       ${startSlotTemplate(context, definition)}
-      <input
-        class="control"
-        part="control"
-        name="${(x) => x.name}"
-        autocomplete="${(x) => x.autocomplete}"
-        id="${(x) => (x.id ? x.id : 'control')}"
-        @input="${(x) => x.handleTextInput()}"
-        @change="${(x) => x.handleChange()}"
-        @keydown="${(x, c) => x.handleKeyDown(c.event)}"
-        @blur="${(x, c) => x.handleBlur()}"
-        ?autofocus="${(x) => x.autofocus}"
-        ?disabled="${(x) => x.disabled}"
-        list="${(x) => x.list}"
-        maxlength="${(x) => x.maxlength}"
-        minlength="${(x) => x.minlength}"
-        placeholder="${(x) => x.placeholder}"
-        ?readonly="${(x) => x.readOnly}"
-        ?required="${(x) => x.required}"
-        size="${(x) => x.size}"
-        type="text"
-        inputmode="numeric"
-        min="${(x) => x.min}"
-        max="${(x) => x.max}"
-        step="${(x) => x.step}"
-        aria-atomic="${(x) => x.ariaAtomic}"
-        aria-busy="${(x) => x.ariaBusy}"
-        aria-controls="${(x) => x.ariaControls}"
-        aria-current="${(x) => x.ariaCurrent}"
-        aria-describedby="${(x) => x.ariaDescribedby}"
-        aria-details="${(x) => x.ariaDetails}"
-        aria-disabled="${(x) => x.ariaDisabled}"
-        aria-errormessage="${(x) => x.ariaErrormessage}"
-        aria-flowto="${(x) => x.ariaFlowto}"
-        aria-haspopup="${(x) => x.ariaHaspopup}"
-        aria-hidden="${(x) => x.ariaHidden}"
-        aria-invalid="${(x) => x.ariaInvalid}"
-        aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
-        aria-label="${(x) => x.ariaLabel}"
-        aria-labelledby="${(x) => x.ariaLabelledby}"
-        aria-live="${(x) => x.ariaLive}"
-        aria-owns="${(x) => x.ariaOwns}"
-        aria-relevant="${(x) => x.ariaRelevant}"
-        aria-roledescription="${(x) => x.ariaRoledescription}"
-        ${ref('control')}
-      />
+      <div class="control-field">
+        ${when((x) => x.prefix, html `
+            <span
+              class="prefix"
+              part="prefix"
+              id="${(x) => `${x.id || 'control'}-prefix`}"
+              ?aria-hidden="${(x) => x.hideAffixFromScreenReader}"
+            >
+              ${(x) => x.prefix}
+            </span>
+          `)}
+        <input
+          class="control"
+          part="control"
+          name="${(x) => x.name}"
+          autocomplete="${(x) => x.autocomplete}"
+          id="${(x) => (x.id ? x.id : 'control')}"
+          @input="${(x) => x.handleTextInput()}"
+          @change="${(x) => x.handleChange()}"
+          @keydown="${(x, c) => x.handleKeyDown(c.event)}"
+          @blur="${(x, c) => x.handleBlur()}"
+          ?autofocus="${(x) => x.autofocus}"
+          ?disabled="${(x) => x.disabled}"
+          list="${(x) => x.list}"
+          maxlength="${(x) => x.maxlength}"
+          minlength="${(x) => x.minlength}"
+          placeholder="${(x) => x.placeholder}"
+          ?readonly="${(x) => x.readOnly}"
+          ?required="${(x) => x.required}"
+          size="${(x) => x.size}"
+          type="text"
+          inputmode="numeric"
+          min="${(x) => x.min}"
+          max="${(x) => x.max}"
+          step="${(x) => x.step}"
+          aria-atomic="${(x) => x.ariaAtomic}"
+          aria-busy="${(x) => x.ariaBusy}"
+          aria-controls="${(x) => x.ariaControls}"
+          aria-current="${(x) => x.ariaCurrent}"
+          aria-describedby="${(x) => x.controlAriaDescribedby}"
+          aria-details="${(x) => x.ariaDetails}"
+          aria-disabled="${(x) => x.ariaDisabled}"
+          aria-errormessage="${(x) => x.ariaErrormessage}"
+          aria-flowto="${(x) => x.ariaFlowto}"
+          aria-haspopup="${(x) => x.ariaHaspopup}"
+          aria-hidden="${(x) => x.ariaHidden}"
+          aria-invalid="${(x) => x.ariaInvalid}"
+          aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
+          aria-label="${(x) => x.ariaLabel}"
+          aria-labelledby="${(x) => x.ariaLabelledby}"
+          aria-live="${(x) => x.ariaLive}"
+          aria-owns="${(x) => x.ariaOwns}"
+          aria-relevant="${(x) => x.ariaRelevant}"
+          aria-roledescription="${(x) => x.ariaRoledescription}"
+          ${ref('control')}
+        />
+        ${when((x) => x.suffix, html `
+            <span
+              class="suffix"
+              part="suffix"
+              id="${(x) => `${x.id || 'control'}-suffix`}"
+              ?aria-hidden="${(x) => x.hideAffixFromScreenReader}"
+            >
+              ${(x) => x.suffix}
+            </span>
+          `)}
+      </div>
       ${when((x) => !x.hideStep && !x.readOnly && !x.disabled, html `
           <div class="controls" part="controls">
             <div class="step-up" part="step-up" @click="${(x) => x.stepUp()}">

package/dist/esm/text-field/text-field.js

@@ -1,25 +1,18 @@
 import { __decorate } from "tslib";
 import { TextField as FASTTextField } from '@microsoft/fast-components';
 import { attr } from '@microsoft/fast-element';
+import { AffixMixin } from '../_common';
 import { foundationTextFieldStyles as styles } from './text-field.styles';
 import { foundationTextFieldTemplate as template } from './text-field.template';
 // TODO: Raise a PR against FAST to get autocomplete stuff in place
 /**
  * @tagname %%prefix%%-text-field
  */
-export class TextField extends FASTTextField {
+export class TextField extends AffixMixin(FASTTextField) {
     constructor() {
         super(...arguments);
         this.autocomplete = 'off';
         this.autocapitalize = 'off';
-        /**
-         * When true, prefix/suffix are not exposed to assistive technology (`aria-hidden` on affixes, and their ids are omitted from the control’s `aria-describedby`).
-         * Use only when the unit or symbol is redundant with the visible label or other text.
-         * @remarks
-         * By default, affix text is **included** for screen readers: stable ids are assigned to the affix nodes and referenced from the input’s `aria-describedby` (merged with any author `aria-describedby`), which announces them as supplementary description after the field name from the label.
-         * For cases where the affix should be part of the accessible **name** instead (e.g. currency code read as part of the label), set `hide-affix-from-screen-reader` and wire `aria-labelledby` on the host to reference the label slot and your own elements, or provide a single `aria-label` that includes the full name.
-         */
-        this.hideAffixFromScreenReader = false;
     }
     autocompleteChanged() {
         if (this.proxy instanceof HTMLInputElement) {
@@ -31,37 +24,6 @@ export class TextField extends FASTTextField {
             this.proxy.autocapitalize = this.autocapitalize;
         }
     }
-    /**
-     * Merges the host `aria-describedby` with ids of the prefix/suffix nodes when those affixes are exposed to SRs.
-     * @internal
-     */
-    get controlAriaDescribedby() {
-        var _a;
-        const hostIds = (_a = this.ariaDescribedby) === null || _a === void 0 ? void 0 : _a.trim();
-        const parts = [];
-        if (hostIds) {
-            parts.push(...hostIds.split(/\s+/).filter(Boolean));
-        }
-        if (!this.hideAffixFromScreenReader) {
-            const base = this.id || 'control';
-            if (this.prefix) {
-                parts.push(`${base}-prefix`);
-            }
-            if (this.suffix) {
-                parts.push(`${base}-suffix`);
-            }
-        }
-        const seen = new Set();
-        const deduped = [];
-        for (const id of parts) {
-            if (!seen.has(id)) {
-                seen.add(id);
-                deduped.push(id);
-            }
-        }
-        const merged = deduped.join(' ');
-        return merged || undefined;
-    }
 }
 __decorate([
     attr
@@ -72,15 +34,6 @@ __decorate([
 __decorate([
     attr
 ], TextField.prototype, "step", void 0);
-__decorate([
-    attr
-], TextField.prototype, "prefix", void 0);
-__decorate([
-    attr
-], TextField.prototype, "suffix", void 0);
-__decorate([
-    attr({ attribute: 'hide-affix-from-screen-reader', mode: 'boolean' })
-], TextField.prototype, "hideAffixFromScreenReader", void 0);
 // explicitly declaring for extensibility
 export const foundationTextFieldShadowOptions = {
     mode: 'open',

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

@@ -1,71 +1,13 @@
 import { activeColorScheme } from '@genesislcap/foundation-utils';
 import { textFieldStyles as fastTextFieldStyles } from '@microsoft/fast-components';
 import { css } from '@microsoft/fast-element';
+import { sharedFieldStyles } from '../_common';
 export const foundationTextFieldStyles = (context, definition) => css `
   ${fastTextFieldStyles(context, definition)}
-
   /* Override FAST .root align-items: baseline for this flex child so it still fills the row. */
-  .control-field {
-    display: flex;
-    flex: 1 1 0%;
-    min-width: 0;
-    align-self: stretch;
-    align-items: stretch;
-  }
-
-  .control-field .control {
-    flex: 1 1 auto;
-    min-width: 0;
-    width: auto;
-  }
-
-  .prefix,
-  .suffix {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    box-sizing: border-box;
-    padding: 0 calc(var(--design-unit) * 2px);
-    user-select: none;
-    white-space: nowrap;
-    background-color: var(--neutral-fill-rest);
-    color: var(--neutral-foreground-hint);
-    font-size: var(--type-ramp-base-font-size);
-    font-family: inherit;
-    line-height: 1;
-  }
-
-  .prefix {
-    border-right: 1px solid var(--neutral-stroke-divider-rest);
-    border-radius: calc(var(--control-corner-radius) * 1px) 0 0
-      calc(var(--control-corner-radius) * 1px);
-  }
-
-  .suffix {
-    border-left: 1px solid var(--neutral-stroke-divider-rest);
-    border-radius: 0 calc(var(--control-corner-radius) * 1px)
-      calc(var(--control-corner-radius) * 1px) 0;
-  }
-
-  :host(.has-prefix:not(.has-suffix)) .control-field .control {
-    border-radius: 0 calc(var(--control-corner-radius) * 1px)
-      calc(var(--control-corner-radius) * 1px) 0;
-  }
-
-  :host(.has-suffix:not(.has-prefix)) .control-field .control {
-    border-radius: calc(var(--control-corner-radius) * 1px) 0 0
-      calc(var(--control-corner-radius) * 1px);
-  }
-
-  :host(.has-prefix.has-suffix) .control-field .control {
-    border-radius: 0;
-  }
+  ${sharedFieldStyles}
 
   input {
     color-scheme: ${activeColorScheme};
   }
-
-  .label-hidden {
-    margin: 0;
-  }
 `;