@genesislcap/foundation-ui 14.411.0 → 14.412.0

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

@@ -8,6 +8,27 @@ export declare class TextField extends FASTTextField {
     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: {};

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;CACpB;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;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"}

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,aAUF,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;AAEpC,eAAO,MAAM,yBAAyB,GACpC,SAAS,wBAAwB,EACjC,YAAY,2BAA2B,KACtC,aAmEF,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"text-field.template.d.ts","sourceRoot":"","sources":["../../../src/text-field/text-field.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAEL,yBAAyB,EAEzB,gBAAgB,EAEjB,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C;;;;;GAKG;AACH,eAAO,MAAM,2BAA2B,EAAE,yBAAyB,CACjE,YAAY,CAAC,SAAS,CAAC,EACvB,gBAAgB,CAgEjB,CAAC"}
+{"version":3,"file":"text-field.template.d.ts","sourceRoot":"","sources":["../../../src/text-field/text-field.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAEL,yBAAyB,EAEzB,gBAAgB,EAEjB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C;;;;;GAKG;AACH,eAAO,MAAM,2BAA2B,EAAE,yBAAyB,CACjE,YAAY,CAAC,SAAS,CAAC,EACvB,gBAAgB,CA2FjB,CAAC"}

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

@@ -12,6 +12,14 @@ export class TextField extends FASTTextField {
         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) {
@@ -23,6 +31,37 @@ 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
@@ -33,6 +72,15 @@ __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

@@ -4,6 +4,63 @@ import { css } from '@microsoft/fast-element';
 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;
+  }
+
   input {
     color-scheme: ${activeColorScheme};
   }

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

@@ -1,5 +1,6 @@
-import { html, ref, slotted } from '@microsoft/fast-element';
+import { html, ref, slotted, when } from '@microsoft/fast-element';
 import { endSlotTemplate, startSlotTemplate, whitespaceFilter, } from '@microsoft/fast-foundation';
+import { classNames } from '@microsoft/fast-web-utilities';
 /**
  * @privateRemarks TODO: Raise PR against FAST
  * Unfortunately this template is almost a complete duplicate of the original fast version, just with additional
@@ -8,9 +9,7 @@ import { endSlotTemplate, startSlotTemplate, whitespaceFilter, } from '@microsof
  */
 export const foundationTextFieldTemplate = (context, definition) => html `
   <template
-    class="
-            ${(x) => (x.readOnly ? 'readonly' : '')}
-        "
+    class="${(x) => classNames(['readonly', x.readOnly], ['has-prefix', !!x.prefix], ['has-suffix', !!x.suffix])}"
   >
     <label
       part="label"
@@ -21,50 +20,72 @@ export const foundationTextFieldTemplate = (context, definition) => html `
     </label>
     <div class="root" part="root">
       ${startSlotTemplate(context, definition)}
-      <input
-        name="${(x) => x.name}"
-        autocomplete="${(x) => x.autocomplete}"
-        autocapitalize="${(x) => x.autocapitalize}"
-        id="${(x) => (x.id ? x.id : 'control')}"
-        class="control"
-        part="control"
-        @input="${(x) => x.handleTextInput()}"
-        @change="${(x) => x.handleChange()}"
-        step="${(x) => x.step}"
-        ?autofocus="${(x) => x.autofocus}"
-        ?disabled="${(x) => x.disabled}"
-        list="${(x) => x.list}"
-        maxlength="${(x) => x.maxlength}"
-        minlength="${(x) => x.minlength}"
-        pattern="${(x) => x.pattern}"
-        placeholder="${(x) => x.placeholder}"
-        ?readonly="${(x) => x.readOnly}"
-        ?required="${(x) => x.required}"
-        size="${(x) => x.size}"
-        ?spellcheck="${(x) => x.spellcheck}"
-        :value="${(x) => x.value}"
-        type="${(x) => x.type}"
-        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
+          name="${(x) => x.name}"
+          autocomplete="${(x) => x.autocomplete}"
+          autocapitalize="${(x) => x.autocapitalize}"
+          id="${(x) => (x.id ? x.id : 'control')}"
+          class="control"
+          part="control"
+          @input="${(x) => x.handleTextInput()}"
+          @change="${(x) => x.handleChange()}"
+          step="${(x) => x.step}"
+          ?autofocus="${(x) => x.autofocus}"
+          ?disabled="${(x) => x.disabled}"
+          list="${(x) => x.list}"
+          maxlength="${(x) => x.maxlength}"
+          minlength="${(x) => x.minlength}"
+          pattern="${(x) => x.pattern}"
+          placeholder="${(x) => x.placeholder}"
+          ?readonly="${(x) => x.readOnly}"
+          ?required="${(x) => x.required}"
+          size="${(x) => x.size}"
+          ?spellcheck="${(x) => x.spellcheck}"
+          :value="${(x) => x.value}"
+          type="${(x) => x.type}"
+          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>
       ${endSlotTemplate(context, definition)}
     </div>
   </template>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-ui",
   "description": "Genesis Foundation UI",
-  "version": "14.411.0",
+  "version": "14.412.0",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -85,13 +85,13 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.411.0",
-    "@genesislcap/genx": "14.411.0",
-    "@genesislcap/rollup-builder": "14.411.0",
-    "@genesislcap/ts-builder": "14.411.0",
-    "@genesislcap/uvu-playwright-builder": "14.411.0",
-    "@genesislcap/vite-builder": "14.411.0",
-    "@genesislcap/webpack-builder": "14.411.0",
+    "@genesislcap/foundation-testing": "14.412.0",
+    "@genesislcap/genx": "14.412.0",
+    "@genesislcap/rollup-builder": "14.412.0",
+    "@genesislcap/ts-builder": "14.412.0",
+    "@genesislcap/uvu-playwright-builder": "14.412.0",
+    "@genesislcap/vite-builder": "14.412.0",
+    "@genesislcap/webpack-builder": "14.412.0",
     "copyfiles": "^2.4.1"
   },
   "dependencies": {
@@ -100,16 +100,16 @@
     "@fortawesome/free-regular-svg-icons": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@genesiscommunitysuccess/analyzer-import-alias-plugin": "^5.0.3",
-    "@genesislcap/expression-builder": "14.411.0",
-    "@genesislcap/foundation-ai": "14.411.0",
-    "@genesislcap/foundation-comms": "14.411.0",
-    "@genesislcap/foundation-criteria": "14.411.0",
-    "@genesislcap/foundation-errors": "14.411.0",
-    "@genesislcap/foundation-events": "14.411.0",
-    "@genesislcap/foundation-logger": "14.411.0",
-    "@genesislcap/foundation-notifications": "14.411.0",
-    "@genesislcap/foundation-user": "14.411.0",
-    "@genesislcap/foundation-utils": "14.411.0",
+    "@genesislcap/expression-builder": "14.412.0",
+    "@genesislcap/foundation-ai": "14.412.0",
+    "@genesislcap/foundation-comms": "14.412.0",
+    "@genesislcap/foundation-criteria": "14.412.0",
+    "@genesislcap/foundation-errors": "14.412.0",
+    "@genesislcap/foundation-events": "14.412.0",
+    "@genesislcap/foundation-logger": "14.412.0",
+    "@genesislcap/foundation-notifications": "14.412.0",
+    "@genesislcap/foundation-user": "14.412.0",
+    "@genesislcap/foundation-utils": "14.412.0",
     "@microsoft/fast-colors": "5.3.1",
     "@microsoft/fast-components": "2.30.6",
     "@microsoft/fast-element": "1.14.0",
@@ -131,5 +131,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "f0f06261f9263da766433fa02f4c011c3391e3c4"
+  "gitHead": "b759370097c295bea2a87d6f3a132ec6dba807ca"
 }