@genesislcap/foundation-ui 15.0.0 → 15.1.0-FUI-2567.3

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';
@@ -872,6 +873,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>;
@@ -2297,6 +2309,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.
  *
@@ -5078,6 +5092,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
  *
@@ -7530,6 +7569,133 @@ 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: `VerificationCodeInputEventDetail`
+ * @fires complete - Fired when all digits are filled. detail: `VerificationCodeInputEventDetail`
+ */
+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, 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;
+
+/**
+ * Detail payload of the `change` and `complete` events.
+ * @public
+ */
+export declare interface VerificationCodeInputEventDetail {
+    value: string;
+}
+
 export declare type VerticalAlign = 'baseline' | 'top' | 'middle' | 'bottom' | 'sub' | 'text-top';
 
 export declare type WeeklyConfig = {

package/dist/react.cjs

@@ -102,6 +102,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) => {
@@ -122,16 +123,6 @@ const ActionsMenu = React.forwardRef(function ActionsMenu(props, ref) {
   return React.createElement(customElements.getName(ActionsMenuWC) ?? '%%prefix%%-actions-menu', { ...rest, ref }, children);
 });
 
-const Accordion = React.forwardRef(function Accordion(props, ref) {
-  const { children, ...rest } = props;
-  return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-accordion', { ...rest, ref }, children);
-});
-
-const AiIndicator = React.forwardRef(function AiIndicator(props, ref) {
-  const { children, ...rest } = props;
-  return React.createElement(customElements.getName(AiIndicatorWC) ?? '%%prefix%%-ai-indicator', { ...rest, ref }, children);
-});
-
 const AiCriteriaSearch = React.forwardRef(function AiCriteriaSearch(props, ref) {
   const { onCriteriaChanged, onValidationErrors, children, ...rest } = props;
   const _innerRef = React.useRef(null);
@@ -154,6 +145,16 @@ const AiCriteriaSearch = React.forwardRef(function AiCriteriaSearch(props, ref)
   return React.createElement(customElements.getName(AiCriteriaSearchWC) ?? '%%prefix%%-ai-criteria-search', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
+const AiIndicator = React.forwardRef(function AiIndicator(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(AiIndicatorWC) ?? '%%prefix%%-ai-indicator', { ...rest, ref }, children);
+});
+
+const Accordion = React.forwardRef(function Accordion(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-accordion', { ...rest, ref }, children);
+});
+
 const Anchor = React.forwardRef(function Anchor(props, ref) {
   const { children, ...rest } = props;
   return React.createElement(customElements.getName(AnchorWC) ?? '%%prefix%%-anchor', { ...rest, ref }, children);
@@ -1073,6 +1074,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);
@@ -1127,9 +1145,9 @@ const WeeklyRecurrence = React.forwardRef(function WeeklyRecurrence(props, ref)
 module.exports = {
   AccordionItem,
   ActionsMenu,
-  Accordion,
-  AiIndicator,
   AiCriteriaSearch,
+  AiIndicator,
+  Accordion,
   Anchor,
   AnchoredRegion,
   Avatar,
@@ -1218,6 +1236,7 @@ module.exports = {
   Tooltip,
   TreeView,
   UrlInput,
+  VerificationCodeInput,
   DailyRecurrence,
   MonthlyYearlyRecurrence,
   WeeklyRecurrence,

package/dist/react.mjs

@@ -100,6 +100,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) => {
@@ -120,16 +121,6 @@ export const ActionsMenu = React.forwardRef(function ActionsMenu(props, ref) {
   return React.createElement(customElements.getName(ActionsMenuWC) ?? '%%prefix%%-actions-menu', { ...rest, ref }, children);
 });
 
-export const Accordion = React.forwardRef(function Accordion(props, ref) {
-  const { children, ...rest } = props;
-  return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-accordion', { ...rest, ref }, children);
-});
-
-export const AiIndicator = React.forwardRef(function AiIndicator(props, ref) {
-  const { children, ...rest } = props;
-  return React.createElement(customElements.getName(AiIndicatorWC) ?? '%%prefix%%-ai-indicator', { ...rest, ref }, children);
-});
-
 export const AiCriteriaSearch = React.forwardRef(function AiCriteriaSearch(props, ref) {
   const { onCriteriaChanged, onValidationErrors, children, ...rest } = props;
   const _innerRef = React.useRef(null);
@@ -152,6 +143,16 @@ export const AiCriteriaSearch = React.forwardRef(function AiCriteriaSearch(props
   return React.createElement(customElements.getName(AiCriteriaSearchWC) ?? '%%prefix%%-ai-criteria-search', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
+export const AiIndicator = React.forwardRef(function AiIndicator(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(AiIndicatorWC) ?? '%%prefix%%-ai-indicator', { ...rest, ref }, children);
+});
+
+export const Accordion = React.forwardRef(function Accordion(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-accordion', { ...rest, ref }, children);
+});
+
 export const Anchor = React.forwardRef(function Anchor(props, ref) {
   const { children, ...rest } = props;
   return React.createElement(customElements.getName(AnchorWC) ?? '%%prefix%%-anchor', { ...rest, ref }, children);
@@ -1071,6 +1072,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": "15.0.0",
+  "version": "15.1.0-FUI-2567.3",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -85,13 +85,13 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "15.0.0",
-    "@genesislcap/genx": "15.0.0",
-    "@genesislcap/rollup-builder": "15.0.0",
-    "@genesislcap/ts-builder": "15.0.0",
-    "@genesislcap/uvu-playwright-builder": "15.0.0",
-    "@genesislcap/vite-builder": "15.0.0",
-    "@genesislcap/webpack-builder": "15.0.0",
+    "@genesislcap/foundation-testing": "15.1.0-FUI-2567.3",
+    "@genesislcap/genx": "15.1.0-FUI-2567.3",
+    "@genesislcap/rollup-builder": "15.1.0-FUI-2567.3",
+    "@genesislcap/ts-builder": "15.1.0-FUI-2567.3",
+    "@genesislcap/uvu-playwright-builder": "15.1.0-FUI-2567.3",
+    "@genesislcap/vite-builder": "15.1.0-FUI-2567.3",
+    "@genesislcap/webpack-builder": "15.1.0-FUI-2567.3",
     "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": "15.0.0",
-    "@genesislcap/foundation-ai": "15.0.0",
-    "@genesislcap/foundation-comms": "15.0.0",
-    "@genesislcap/foundation-criteria": "15.0.0",
-    "@genesislcap/foundation-errors": "15.0.0",
-    "@genesislcap/foundation-events": "15.0.0",
-    "@genesislcap/foundation-logger": "15.0.0",
-    "@genesislcap/foundation-notifications": "15.0.0",
-    "@genesislcap/foundation-user": "15.0.0",
-    "@genesislcap/foundation-utils": "15.0.0",
+    "@genesislcap/expression-builder": "15.1.0-FUI-2567.3",
+    "@genesislcap/foundation-ai": "15.1.0-FUI-2567.3",
+    "@genesislcap/foundation-comms": "15.1.0-FUI-2567.3",
+    "@genesislcap/foundation-criteria": "15.1.0-FUI-2567.3",
+    "@genesislcap/foundation-errors": "15.1.0-FUI-2567.3",
+    "@genesislcap/foundation-events": "15.1.0-FUI-2567.3",
+    "@genesislcap/foundation-logger": "15.1.0-FUI-2567.3",
+    "@genesislcap/foundation-notifications": "15.1.0-FUI-2567.3",
+    "@genesislcap/foundation-user": "15.1.0-FUI-2567.3",
+    "@genesislcap/foundation-utils": "15.1.0-FUI-2567.3",
     "@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": "035852ede9f26ea4434f1b3dfaff98db41490246"
+  "gitHead": "7ca16e74cbe5ce3f8503756bb708162eb7246897"
 }