@genesislcap/foundation-ui 14.490.0 → 14.491.0-FUI-2567.1

package/dist/foundation-ui.d.ts

@@ -95,6 +95,7 @@ import { foregroundOnAccentHover } from '@microsoft/fast-components';
 import { foregroundOnAccentHoverLarge } from '@microsoft/fast-components';
 import { foregroundOnAccentRest } from '@microsoft/fast-components';
 import { foregroundOnAccentRestLarge } from '@microsoft/fast-components';
+import { FormAssociated } from '@microsoft/fast-foundation';
 import { FoundationAnalytics } from '@genesislcap/foundation-comms';
 import { dataGridCellTemplate as foundationDataGridCellTemplate } from '@microsoft/fast-foundation';
 import { dataGridRowTemplate as foundationDataGridRowTemplate } from '@microsoft/fast-foundation';
@@ -861,6 +862,17 @@ export declare const baseComponents: {
     foundationTreeItem: (overrideDefinition?: OverrideFoundationElementDefinition<TreeItemOptions>) => FoundationElementRegistry<TreeItemOptions, Constructable<FoundationElement>>;
     foundationTreeView: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition>) => FoundationElementRegistry<FoundationElementDefinition, TreeView>;
     foundationUrlInput: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition>) => FoundationElementRegistry<FoundationElementDefinition, UrlInput>;
+    foundationVerificationCodeInput: (overrideDefinition?: OverrideFoundationElementDefinition<    {
+    baseName: string;
+    template: ViewTemplate<VerificationCodeInput, any>;
+    styles: ElementStyles;
+    shadowOptions: ShadowRootInit;
+    }>) => FoundationElementRegistry<    {
+    baseName: string;
+    template: ViewTemplate<VerificationCodeInput, any>;
+    styles: ElementStyles;
+    shadowOptions: ShadowRootInit;
+    }, VerificationCodeInput>;
     foundationSectionNavigator: (overrideDefinition?: OverrideFoundationElementDefinition<    {
     baseName: string;
     template: ViewTemplate<SectionNavigator, any>;
@@ -2259,6 +2271,8 @@ export declare const defaultTreeViewConfig: {};
 
 export declare const defaultUrlInputConfig: {};
 
+export declare const defaultVerificationCodeInputConfig: {};
+
 /**
  * Defines a platform custom element based on the provided type and definition.
  *
@@ -5017,6 +5031,31 @@ export declare class FoundationValueExpressionBuilder extends ExpressionBuilder
     dispatchChangeEvent(group: ExpressionBuilderTypes.Group): void;
 }
 
+/**
+ * The Foundation Verification Code Input
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<foundation-verification-code-input\>
+ */
+export declare const foundationVerificationCodeInput: (overrideDefinition?: OverrideFoundationElementDefinition<    {
+baseName: string;
+template: ViewTemplate<VerificationCodeInput, any>;
+styles: ElementStyles;
+shadowOptions: ShadowRootInit;
+}>) => FoundationElementRegistry<    {
+baseName: string;
+template: ViewTemplate<VerificationCodeInput, any>;
+styles: ElementStyles;
+shadowOptions: ShadowRootInit;
+}, typeof VerificationCodeInput>;
+
+export declare const foundationVerificationCodeInputShadowOptions: ShadowRootInit;
+
+export declare const foundationVerificationCodeInputStyles: ElementStyles;
+
+export declare const foundationVerificationCodeInputTemplate: ViewTemplate<VerificationCodeInput, any>;
+
 /**
  * Converts a server BinaryExpression to a client BinaryOperator
  *
@@ -7422,6 +7461,132 @@ export declare interface ValueChangeEventDetail {
     label: string;
 }
 
+/**
+ * Multi-digit verification code input for OTP / 2FA flows.
+ *
+ * Form-associated (FAST `FormAssociated`): host `name` / `required` / `value` participate
+ * in native HTML form validation and submission like {@link TextField}.
+ *
+ * @public
+ * @tagname %%prefix%%-verification-code-input
+ *
+ * @fires change - Fired when any digit changes. Detail: `{ value: string }`.
+ * @fires complete - Fired when all digits are filled. Detail: `{ value: string }`.
+ */
+export declare class VerificationCodeInput extends VerificationCodeInput_base {
+    /**
+     * Proxy element for form association when ElementInternals is unavailable.
+     * Initialized in the constructor (after `super()`) so it exists before attribute
+     * change handlers run — same pattern as FAST `FormAssociatedTextField`.
+     * @internal
+     */
+    proxy: HTMLInputElement;
+    /** Per-digit values indexed from `0` to `digits - 1`. */
+    values: string[];
+    /** Slotted label content; when empty the label is visually hidden. */
+    defaultSlottedNodes: any;
+    private readonly controlListeners;
+    /** Skip digit re-sync when `value` is updated from digit entry (`commitValues`). */
+    private syncingFromDigits;
+    constructor();
+    /**
+     * Optional host id used as a prefix for digit input ids (`{id}-0`, `{id}-1`, …)
+     * and the associated label element.
+     */
+    id: string;
+    /**
+     * Visual treatment applied to each digit field.
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     * @defaultValue outline
+     */
+    appearance: string;
+    /**
+     * Number of single-character digit fields to render.
+     * @public
+     * @remarks
+     * HTML Attribute: digits
+     * @defaultValue 6
+     */
+    digits: number;
+    /**
+     * When true, digit fields are non-interactive.
+     * @public
+     * @remarks
+     * HTML Attribute: readonly
+     */
+    readOnly: boolean;
+    /**
+     * When true, digit fields are non-interactive.
+     * @public
+     * @remarks
+     * HTML Attribute: disabled
+     */
+    disabled: boolean;
+    /**
+     * When true, focuses the first digit on connect (and after SPA route commit when hosted that way).
+     * @public
+     * @remarks
+     * HTML Attribute: autofocus
+     */
+    autofocus: boolean;
+    /**
+     * When true, applies the error visual state to each digit field.
+     * @public
+     * @remarks
+     * HTML Attribute: error
+     */
+    error: boolean;
+    get digitsIndexes(): number[];
+    get controlIdPrefix(): string;
+    get labelId(): string;
+    get hasLabel(): boolean;
+    getControlId(index: number): string;
+    /** Clears digits, emits `change`, and focuses the first field when connected. */
+    clear(): void;
+    focus(): void;
+    /** @internal */
+    valueChanged(previous: string, next: string): void;
+    /** @internal */
+    validate(anchor?: HTMLElement): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    digitsChanged(): void;
+    get digitClassnames(): string;
+    private sanitizeCode;
+    private bindControlListeners;
+    private unbindControlListeners;
+    private onKeyDown;
+    private isBlockedCharacter;
+    private onInput;
+    private onPaste;
+    private handleBackspace;
+    private handleDelete;
+    private getIndexFromInput;
+    /** Maps a sanitized code string into per-digit `values` and syncs the DOM when connected. */
+    private syncDigitsFromValue;
+    private updateDigit;
+    private applyDigits;
+    /** Pushes digit state into the form-associated `value` and emits change / complete. */
+    private commitValues;
+    private syncFieldValues;
+    private syncFieldValue;
+    private focusDigit;
+    private get rootNode();
+    private getControlElement;
+    private isComplete;
+    private emitChange;
+}
+
+declare class _VerificationCodeInput extends FoundationElement {
+}
+
+declare interface _VerificationCodeInput extends FormAssociated {
+}
+
+declare const VerificationCodeInput_base: typeof _VerificationCodeInput;
+
 export declare type VerticalAlign = 'baseline' | 'top' | 'middle' | 'bottom' | 'sub' | 'text-top';
 
 export declare type WeeklyConfig = {

package/dist/react.cjs

@@ -101,6 +101,7 @@ const { Toolbar: ToolbarWC } = require('./esm/toolbar/toolbar.js');
 const { Tooltip: TooltipWC } = require('./esm/tooltip/tooltip.js');
 const { TreeView: TreeViewWC } = require('./esm/tree-view/tree-view.js');
 const { UrlInput: UrlInputWC } = require('./esm/url-input/url-input.js');
+const { VerificationCodeInput: VerificationCodeInputWC } = require('./esm/verification-code-input/verification-code-input.js');
 
 function _mergeRefs(...refs) {
   return (value) => {
@@ -111,14 +112,14 @@ function _mergeRefs(...refs) {
   };
 }
 
-const Accordion = React.forwardRef(function Accordion(props, ref) {
+const AccordionItem = React.forwardRef(function AccordionItem(props, ref) {
   const { children, ...rest } = props;
-  return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-accordion', { ...rest, ref }, children);
+  return React.createElement(customElements.getName(AccordionItemWC) ?? '%%prefix%%-accordion-item', { ...rest, ref }, children);
 });
 
-const AccordionItem = React.forwardRef(function AccordionItem(props, ref) {
+const Accordion = React.forwardRef(function Accordion(props, ref) {
   const { children, ...rest } = props;
-  return React.createElement(customElements.getName(AccordionItemWC) ?? '%%prefix%%-accordion-item', { ...rest, ref }, children);
+  return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-accordion', { ...rest, ref }, children);
 });
 
 const ActionsMenu = React.forwardRef(function ActionsMenu(props, ref) {
@@ -180,14 +181,14 @@ const AnchoredRegion = React.forwardRef(function AnchoredRegion(props, ref) {
   return React.createElement(customElements.getName(AnchoredRegionWC) ?? '%%prefix%%-anchored-region', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-const Badge = React.forwardRef(function Badge(props, ref) {
+const Avatar = React.forwardRef(function Avatar(props, ref) {
   const { children, ...rest } = props;
-  return React.createElement(customElements.getName(BadgeWC) ?? '%%prefix%%-badge', { ...rest, ref }, children);
+  return React.createElement(customElements.getName(AvatarWC) ?? '%%prefix%%-avatar', { ...rest, ref }, children);
 });
 
-const Avatar = React.forwardRef(function Avatar(props, ref) {
+const Badge = React.forwardRef(function Badge(props, ref) {
   const { children, ...rest } = props;
-  return React.createElement(customElements.getName(AvatarWC) ?? '%%prefix%%-avatar', { ...rest, ref }, children);
+  return React.createElement(customElements.getName(BadgeWC) ?? '%%prefix%%-badge', { ...rest, ref }, children);
 });
 
 const Banner = React.forwardRef(function Banner(props, ref) {
@@ -1050,6 +1051,23 @@ const UrlInput = React.forwardRef(function UrlInput(props, ref) {
   return React.createElement(customElements.getName(UrlInputWC) ?? '%%prefix%%-url-input', { ...rest, ref }, children);
 });
 
+const VerificationCodeInput = React.forwardRef(function VerificationCodeInput(props, ref) {
+  const { onComplete, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onCompleteRef = React.useRef(onComplete);
+  _onCompleteRef.current = onComplete;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onCompleteFn = (e) => _onCompleteRef.current?.(e);
+    el.addEventListener('complete', _onCompleteFn);
+    return () => {
+      el.removeEventListener('complete', _onCompleteFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(VerificationCodeInputWC) ?? '%%prefix%%-verification-code-input', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
+});
+
 const DailyRecurrence = React.forwardRef(function DailyRecurrence(props, ref) {
   const { onUpdateCronConfig, children, ...rest } = props;
   const _innerRef = React.useRef(null);
@@ -1102,15 +1120,15 @@ const WeeklyRecurrence = React.forwardRef(function WeeklyRecurrence(props, ref)
 });
 
 module.exports = {
-  Accordion,
   AccordionItem,
+  Accordion,
   ActionsMenu,
   AiCriteriaSearch,
   AiIndicator,
   Anchor,
   AnchoredRegion,
-  Badge,
   Avatar,
+  Badge,
   Banner,
   Breadcrumb,
   BreadcrumbItem,
@@ -1194,6 +1212,7 @@ module.exports = {
   Tooltip,
   TreeView,
   UrlInput,
+  VerificationCodeInput,
   DailyRecurrence,
   MonthlyYearlyRecurrence,
   WeeklyRecurrence,

package/dist/react.mjs

@@ -99,6 +99,7 @@ import { Toolbar as ToolbarWC } from './esm/toolbar/toolbar.js';
 import { Tooltip as TooltipWC } from './esm/tooltip/tooltip.js';
 import { TreeView as TreeViewWC } from './esm/tree-view/tree-view.js';
 import { UrlInput as UrlInputWC } from './esm/url-input/url-input.js';
+import { VerificationCodeInput as VerificationCodeInputWC } from './esm/verification-code-input/verification-code-input.js';
 
 function _mergeRefs(...refs) {
   return (value) => {
@@ -109,14 +110,14 @@ function _mergeRefs(...refs) {
   };
 }
 
-export const Accordion = React.forwardRef(function Accordion(props, ref) {
+export const AccordionItem = React.forwardRef(function AccordionItem(props, ref) {
   const { children, ...rest } = props;
-  return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-accordion', { ...rest, ref }, children);
+  return React.createElement(customElements.getName(AccordionItemWC) ?? '%%prefix%%-accordion-item', { ...rest, ref }, children);
 });
 
-export const AccordionItem = React.forwardRef(function AccordionItem(props, ref) {
+export const Accordion = React.forwardRef(function Accordion(props, ref) {
   const { children, ...rest } = props;
-  return React.createElement(customElements.getName(AccordionItemWC) ?? '%%prefix%%-accordion-item', { ...rest, ref }, children);
+  return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-accordion', { ...rest, ref }, children);
 });
 
 export const ActionsMenu = React.forwardRef(function ActionsMenu(props, ref) {
@@ -178,14 +179,14 @@ export const AnchoredRegion = React.forwardRef(function AnchoredRegion(props, re
   return React.createElement(customElements.getName(AnchoredRegionWC) ?? '%%prefix%%-anchored-region', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-export const Badge = React.forwardRef(function Badge(props, ref) {
+export const Avatar = React.forwardRef(function Avatar(props, ref) {
   const { children, ...rest } = props;
-  return React.createElement(customElements.getName(BadgeWC) ?? '%%prefix%%-badge', { ...rest, ref }, children);
+  return React.createElement(customElements.getName(AvatarWC) ?? '%%prefix%%-avatar', { ...rest, ref }, children);
 });
 
-export const Avatar = React.forwardRef(function Avatar(props, ref) {
+export const Badge = React.forwardRef(function Badge(props, ref) {
   const { children, ...rest } = props;
-  return React.createElement(customElements.getName(AvatarWC) ?? '%%prefix%%-avatar', { ...rest, ref }, children);
+  return React.createElement(customElements.getName(BadgeWC) ?? '%%prefix%%-badge', { ...rest, ref }, children);
 });
 
 export const Banner = React.forwardRef(function Banner(props, ref) {
@@ -1048,6 +1049,23 @@ export const UrlInput = React.forwardRef(function UrlInput(props, ref) {
   return React.createElement(customElements.getName(UrlInputWC) ?? '%%prefix%%-url-input', { ...rest, ref }, children);
 });
 
+export const VerificationCodeInput = React.forwardRef(function VerificationCodeInput(props, ref) {
+  const { onComplete, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onCompleteRef = React.useRef(onComplete);
+  _onCompleteRef.current = onComplete;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onCompleteFn = (e) => _onCompleteRef.current?.(e);
+    el.addEventListener('complete', _onCompleteFn);
+    return () => {
+      el.removeEventListener('complete', _onCompleteFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(VerificationCodeInputWC) ?? '%%prefix%%-verification-code-input', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
+});
+
 export const DailyRecurrence = React.forwardRef(function DailyRecurrence(props, ref) {
   const { onUpdateCronConfig, children, ...rest } = props;
   const _innerRef = React.useRef(null);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-ui",
   "description": "Genesis Foundation UI",
-  "version": "14.490.0",
+  "version": "14.491.0-FUI-2567.1",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -85,13 +85,13 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.490.0",
-    "@genesislcap/genx": "14.490.0",
-    "@genesislcap/rollup-builder": "14.490.0",
-    "@genesislcap/ts-builder": "14.490.0",
-    "@genesislcap/uvu-playwright-builder": "14.490.0",
-    "@genesislcap/vite-builder": "14.490.0",
-    "@genesislcap/webpack-builder": "14.490.0",
+    "@genesislcap/foundation-testing": "14.491.0-FUI-2567.1",
+    "@genesislcap/genx": "14.491.0-FUI-2567.1",
+    "@genesislcap/rollup-builder": "14.491.0-FUI-2567.1",
+    "@genesislcap/ts-builder": "14.491.0-FUI-2567.1",
+    "@genesislcap/uvu-playwright-builder": "14.491.0-FUI-2567.1",
+    "@genesislcap/vite-builder": "14.491.0-FUI-2567.1",
+    "@genesislcap/webpack-builder": "14.491.0-FUI-2567.1",
     "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.490.0",
-    "@genesislcap/foundation-ai": "14.490.0",
-    "@genesislcap/foundation-comms": "14.490.0",
-    "@genesislcap/foundation-criteria": "14.490.0",
-    "@genesislcap/foundation-errors": "14.490.0",
-    "@genesislcap/foundation-events": "14.490.0",
-    "@genesislcap/foundation-logger": "14.490.0",
-    "@genesislcap/foundation-notifications": "14.490.0",
-    "@genesislcap/foundation-user": "14.490.0",
-    "@genesislcap/foundation-utils": "14.490.0",
+    "@genesislcap/expression-builder": "14.491.0-FUI-2567.1",
+    "@genesislcap/foundation-ai": "14.491.0-FUI-2567.1",
+    "@genesislcap/foundation-comms": "14.491.0-FUI-2567.1",
+    "@genesislcap/foundation-criteria": "14.491.0-FUI-2567.1",
+    "@genesislcap/foundation-errors": "14.491.0-FUI-2567.1",
+    "@genesislcap/foundation-events": "14.491.0-FUI-2567.1",
+    "@genesislcap/foundation-logger": "14.491.0-FUI-2567.1",
+    "@genesislcap/foundation-notifications": "14.491.0-FUI-2567.1",
+    "@genesislcap/foundation-user": "14.491.0-FUI-2567.1",
+    "@genesislcap/foundation-utils": "14.491.0-FUI-2567.1",
     "@microsoft/fast-colors": "5.3.1",
     "@microsoft/fast-components": "2.30.6",
     "@microsoft/fast-element": "1.14.0",
@@ -142,5 +142,5 @@
       "require": "./dist/react.cjs"
     }
   },
-  "gitHead": "2c5e250d11742abd582e39a370b003ef8d04a5fb"
+  "gitHead": "35adb206a99accc5a788fd8f1e1161e16b19351e"
 }