@ni/fast-foundation 0.0.2

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

@@ -0,0 +1,227 @@
+import { SyntheticViewTemplate } from "@ni/fast-element";
+import { StartEnd, StartEndOptions } from "../patterns/start-end.js";
+import type { FoundationElementDefinition } from "../foundation-element/foundation-element.js";
+import { DelegatesARIATextbox } from "../text-field/text-field.js";
+import { FormAssociatedNumberField } from "./number-field.form-associated.js";
+/**
+ * Number Field configuration options
+ * @public
+ */
+export type NumberFieldOptions = FoundationElementDefinition & StartEndOptions & {
+    stepDownGlyph?: string | SyntheticViewTemplate;
+    stepUpGlyph?: string | SyntheticViewTemplate;
+};
+/**
+ * A Number Field Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number | <input type="number" /> element }.
+ *
+ * @slot start - Content which can be provided before the number field input
+ * @slot end - Content which can be provided after the number field input
+ * @slot - The default slot for the label
+ * @slot step-up-glyph - The glyph for the step up control
+ * @slot step-down-glyph - The glyph for the step down control
+ * @csspart label - The label
+ * @csspart root - The element wrapping the control, including start and end slots
+ * @csspart control - The element representing the input
+ * @csspart controls - The step up and step down controls
+ * @csspart step-up - The step up control
+ * @csspart step-down - The step down control
+ * @fires input - Fires a custom 'input' event when the value has changed
+ * @fires change - Fires a custom 'change' event when the value has changed
+ *
+ * @public
+ */
+export declare class NumberField extends FormAssociatedNumberField {
+    /**
+     * When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute} for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: readonly
+     */
+    readOnly: boolean;
+    /**
+     * Indicates that this element should get focus after the page finishes loading. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus | autofocus HTML attribute} for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: autofocus
+     */
+    autofocus: boolean;
+    /**
+     * When true, spin buttons will not be rendered
+     * @public
+     * @remarks
+     * HTML Attribute: autofocus
+     */
+    hideStep: boolean;
+    /**
+     * Sets the placeholder value of the element, generally used to provide a hint to the user.
+     * @public
+     * @remarks
+     * HTML Attribute: placeholder
+     * Using this attribute does is not a valid substitute for a labeling element.
+     */
+    placeholder: string;
+    /**
+     * Allows associating a {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist | datalist} to the element by {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/id}.
+     * @public
+     * @remarks
+     * HTML Attribute: list
+     */
+    list: string;
+    /**
+     * The maximum number of characters a user can enter.
+     * @public
+     * @remarks
+     * HTMLAttribute: maxlength
+     */
+    maxlength: number;
+    /**
+     * The minimum number of characters a user can enter.
+     * @public
+     * @remarks
+     * HTMLAttribute: minlength
+     */
+    minlength: number;
+    /**
+     * Sets the width of the element to a specified number of characters.
+     * @public
+     * @remarks
+     * HTMLAttribute: size
+     */
+    size: number;
+    /**
+     * Amount to increment or decrement the value by
+     * @public
+     * @remarks
+     * HTMLAttribute: step
+     */
+    step: number;
+    /**
+     * The maximum the value can be
+     * @public
+     * @remarks
+     * HTMLAttribute: max
+     */
+    max: number;
+    /**
+     * Ensures that the max is greater than the min and that the value
+     *  is less than the max
+     * @param previous - the previous max value
+     * @param next - updated max value
+     *
+     * @internal
+     */
+    maxChanged(previous: number, next: number): void;
+    /**
+     * The minimum the value can be
+     * @public
+     * @remarks
+     * HTMLAttribute: min
+     */
+    min: number;
+    /**
+     * Ensures that the min is less than the max and that the value
+     *  is greater than the min
+     * @param previous - previous min value
+     * @param next - updated min value
+     *
+     * @internal
+     */
+    minChanged(previous: number, next: number): void;
+    /**
+     * The default slotted items
+     * @internal
+     */
+    defaultSlottedNodes: Node[];
+    /**
+     * A reference to the internal input element
+     * @internal
+     */
+    control: HTMLInputElement;
+    /**
+     * Flag to indicate that the value change is from the user input
+     * @internal
+     */
+    private isUserInput;
+    /**
+     * The value property, typed as a number.
+     *
+     * @public
+     */
+    get valueAsNumber(): number;
+    set valueAsNumber(next: number);
+    /**
+     * Validates that the value is a number between the min and max
+     * @param previous - previous stored value
+     * @param next - value being updated
+     * @param updateControl - should the text field be updated with value, defaults to true
+     * @internal
+     */
+    valueChanged(previous: string, next: string): void;
+    /** {@inheritDoc (FormAssociated:interface).validate} */
+    validate(): void;
+    /**
+     * Sets the internal value to a valid number between the min and max properties
+     * @param value - user input
+     *
+     * @internal
+     */
+    private getValidValue;
+    /**
+     * Increments the value using the step value
+     *
+     * @public
+     */
+    stepUp(): void;
+    /**
+     * Decrements the value using the step value
+     *
+     * @public
+     */
+    stepDown(): void;
+    /**
+     * Sets up the initial state of the number field
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * Selects all the text in the number field
+     *
+     * @public
+     */
+    protected select(): void;
+    /**
+     * Handles the internal control's `input` event
+     * @internal
+     */
+    handleTextInput(): void;
+    /**
+     * Change event handler for inner control.
+     * @remarks
+     * "Change" events are not `composable` so they will not
+     * permeate the shadow DOM boundary. This fn effectively proxies
+     * the change event, emitting a `change` event whenever the internal
+     * control emits a `change` event
+     * @internal
+     */
+    handleChange(): void;
+    /**
+     * Handles the internal control's `keydown` event
+     * @internal
+     */
+    handleKeyDown(e: KeyboardEvent): boolean;
+    /**
+     * Handles populating the input field with a validated value when
+     *  leaving the input field.
+     * @internal
+     */
+    handleBlur(): void;
+}
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast/issues/3317
+ * @internal
+ */
+export interface NumberField extends StartEnd, DelegatesARIATextbox {
+}

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

@@ -0,0 +1,16 @@
+import { FormAssociated } from "../form-associated/form-associated.js";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+declare class _NumberField extends FoundationElement {
+}
+interface _NumberField extends FormAssociated {
+}
+declare const FormAssociatedNumberField_base: typeof _NumberField;
+/**
+ * A form-associated base class for the {@link @ni/fast-foundation#(NumberField:class)} component.
+ *
+ * @internal
+ */
+export declare class FormAssociatedNumberField extends FormAssociatedNumberField_base {
+    proxy: HTMLInputElement;
+}
+export {};

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

@@ -0,0 +1,8 @@
+import type { ViewTemplate } from "@ni/fast-element";
+import type { FoundationElementTemplate } from "../foundation-element/foundation-element.js";
+import type { NumberField, NumberFieldOptions } from "./number-field.js";
+/**
+ * The template for the {@link @ni/fast-foundation#(NumberField:class)} component.
+ * @public
+ */
+export declare const numberFieldTemplate: FoundationElementTemplate<ViewTemplate<NumberField>, NumberFieldOptions>;

package/dist/dts/patterns/aria-global.d.ts

@@ -0,0 +1,189 @@
+/**
+ * Some states and properties are applicable to all host language elements regardless of whether a role is applied.
+ * The following global states and properties are supported by all roles and by all base markup elements.
+ * {@link https://www.w3.org/TR/wai-aria-1.1/#global_states}
+ *
+ * This is intended to be used as a mixin. Be sure you extend FASTElement.
+ *
+ * @public
+ */
+export declare class ARIAGlobalStatesAndProperties {
+    /**
+     * Indicates whether assistive technologies will present all, or only parts of,
+     * the changed region based on the change notifications defined by the aria-relevant attribute.
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-atomic}
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: aria-atomic
+     */
+    ariaAtomic: "true" | "false" | string | null;
+    /**
+     * Indicates an element is being modified and that assistive technologies MAY want to wait
+     * until the modifications are complete before exposing them to the user.
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-busy}
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: aria-busy
+     */
+    ariaBusy: "true" | "false" | string | null;
+    /**
+     * Identifies the element (or elements) whose contents or presence are controlled by the current element.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-controls}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-controls
+     */
+    ariaControls: string | null;
+    /**
+     * Indicates the element that represents the current item within a container or set of related elements.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-current}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-current
+     */
+    ariaCurrent: "page" | "step" | "location" | "date" | "time" | "true" | "false" | string | null;
+    /**
+     * Identifies the element (or elements) that describes the object.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-describedby}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-describedby
+     */
+    ariaDescribedby: string | null;
+    /**
+     * Identifies the element that provides a detailed, extended description for the object.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-details}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-details
+     */
+    ariaDetails: string | null;
+    /**
+     * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-disabled}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-disabled
+     */
+    ariaDisabled: "true" | "false" | string | null;
+    /**
+     * Identifies the element that provides an error message for the object.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-errormessage}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-errormessage
+     */
+    ariaErrormessage: string | null;
+    /**
+     * Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
+     * allows assistive technology to override the general default of reading in document source order.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-flowto}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-flowto
+     */
+    ariaFlowto: string | null;
+    /**
+     * Indicates the availability and type of interactive popup element,
+     * such as menu or dialog, that can be triggered by an element.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-haspopup
+     */
+    ariaHaspopup: "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | string | null;
+    /**
+     * Indicates whether the element is exposed to an accessibility API
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-hidden}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-hidden
+     */
+    ariaHidden: "false" | "true" | string | null;
+    /**
+     * Indicates the entered value does not conform to the format expected by the application.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-invalid}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-invalid
+     */
+    ariaInvalid: "false" | "true" | "grammar" | "spelling" | string | null;
+    /**
+     * Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-keyshortcuts}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-keyshortcuts
+     */
+    ariaKeyshortcuts: string | null;
+    /**
+     * Defines a string value that labels the current element.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-label}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-label
+     */
+    ariaLabel: string | null;
+    /**
+     * Identifies the element (or elements) that labels the current element.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-labelledby
+     */
+    ariaLabelledby: string | null;
+    /**
+     * Indicates that an element will be updated, and describes the types of updates the user agents,
+     * assistive technologies, and user can expect from the live region.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-live}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-live
+     */
+    ariaLive: "assertive" | "off" | "polite" | string | null;
+    /**
+     * Identifies an element (or elements) in order to define a visual,
+     * functional, or contextual parent/child relationship between DOM elements
+     * where the DOM hierarchy cannot be used to represent the relationship.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-owns}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-owns
+     */
+    ariaOwns: string | null;
+    /**
+     * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-relevant}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-relevant
+     */
+    ariaRelevant: "additions" | "additions text" | "all" | "removals" | "text" | string | null;
+    /**
+     * Defines a human-readable, author-localized description for the role of an element.
+     *
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription}
+     * @public
+     * @remarks
+     * HTML Attribute: aria-roledescription
+     */
+    ariaRoledescription: string | null;
+}

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

@@ -0,0 +1,2 @@
+export * from "./aria-global.js";
+export * from "./start-end.js";

package/dist/dts/patterns/start-end.d.ts

@@ -0,0 +1,65 @@
+import { SyntheticViewTemplate } from "@ni/fast-element";
+import type { ViewTemplate } from "@ni/fast-element";
+import type { ElementDefinitionContext } from "../design-system/registration-context.js";
+/**
+ * Start configuration options
+ * @public
+ */
+export type StartOptions = {
+    start?: string | SyntheticViewTemplate;
+};
+/**
+ * End configuration options
+ * @public
+ */
+export type EndOptions = {
+    end?: string | SyntheticViewTemplate;
+};
+/**
+ * Start/End configuration options
+ * @public
+ */
+export type StartEndOptions = StartOptions & EndOptions;
+/**
+ * A mixin class implementing start and end elements.
+ * These are generally used to decorate text elements with icons or other visual indicators.
+ * @public
+ */
+export declare class StartEnd {
+    start: HTMLSlotElement;
+    startContainer: HTMLSpanElement;
+    handleStartContentChange(): void;
+    end: HTMLSlotElement;
+    endContainer: HTMLSpanElement;
+    handleEndContentChange(): void;
+}
+/**
+ * The template for the end element.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ */
+export declare const endSlotTemplate: (context: ElementDefinitionContext, definition: EndOptions) => ViewTemplate<StartEnd>;
+/**
+ * The template for the start element.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ */
+export declare const startSlotTemplate: (context: ElementDefinitionContext, definition: StartOptions) => ViewTemplate<StartEnd>;
+/**
+ * The template for the end element.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ * @deprecated - use endSlotTemplate
+ */
+export declare const endTemplate: ViewTemplate<StartEnd>;
+/**
+ * The template for the start element.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ * @deprecated - use startSlotTemplate
+ */
+export declare const startTemplate: ViewTemplate<StartEnd>;

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

@@ -0,0 +1,10 @@
+export * from "./picker.template.js";
+export * from "./picker.js";
+export * from "./picker-menu.template.js";
+export * from "./picker-menu.js";
+export * from "./picker-menu-option.template.js";
+export * from "./picker-menu-option.js";
+export * from "./picker-list.template.js";
+export * from "./picker-list.js";
+export * from "./picker-list-item.template.js";
+export * from "./picker-list-item.js";

package/dist/dts/picker/picker-list-item.d.ts

@@ -0,0 +1,38 @@
+import { ViewTemplate } from "@ni/fast-element";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+/**
+ * A picker list item Custom HTML Element.
+ *
+ * @alpha
+ */
+export declare class PickerListItem extends FoundationElement {
+    /**
+     * The underlying string value of the item
+     *
+     * @alpha
+     * @remarks
+     * HTML Attribute: value
+     */
+    value: string;
+    /**
+     *  The template used to render the contents of the list item
+     *
+     * @alpha
+     */
+    contentsTemplate: ViewTemplate;
+    private contentsTemplateChanged;
+    private customView;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    disconnectedCallback(): void;
+    handleKeyDown(e: KeyboardEvent): boolean;
+    handleClick(e: MouseEvent): boolean;
+    private handleInvoke;
+    private updateView;
+    private disconnectView;
+}

package/dist/dts/picker/picker-list-item.template.d.ts

@@ -0,0 +1,8 @@
+import { ViewTemplate } from "@ni/fast-element";
+import type { FoundationElementTemplate } from "../foundation-element/foundation-element.js";
+import type { PickerListItem } from "./picker-list-item.js";
+/**
+ *
+ * @public
+ */
+export declare const pickerListItemTemplate: FoundationElementTemplate<ViewTemplate<PickerListItem>>;

package/dist/dts/picker/picker-list.d.ts

@@ -0,0 +1,8 @@
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+/**
+ * A List Picker Menu Custom HTML Element.
+ *
+ * @alpha
+ */
+export declare class PickerList extends FoundationElement {
+}

package/dist/dts/picker/picker-list.template.d.ts

@@ -0,0 +1,8 @@
+import { ViewTemplate } from "@ni/fast-element";
+import type { FoundationElementTemplate } from "../foundation-element/foundation-element.js";
+import type { PickerList } from "./picker-list.js";
+/**
+ *
+ * @public
+ */
+export declare const pickerListTemplate: FoundationElementTemplate<ViewTemplate<PickerList>>;

package/dist/dts/picker/picker-menu-option.d.ts

@@ -0,0 +1,37 @@
+import { ViewTemplate } from "@ni/fast-element";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+/**
+ * A picker list item Custom HTML Element.
+ *
+ * @alpha
+ */
+export declare class PickerMenuOption extends FoundationElement {
+    /**
+     * The underlying string value of the item
+     *
+     * @alpha
+     * @remarks
+     * HTML Attribute: value
+     */
+    value: string;
+    /**
+     *  The template used to render the contents of the list item
+     *
+     * @alpha
+     */
+    contentsTemplate: ViewTemplate;
+    private contentsTemplateChanged;
+    private customView;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    disconnectedCallback(): void;
+    handleClick(e: MouseEvent): boolean;
+    private handleInvoked;
+    private updateView;
+    private disconnectView;
+}

package/dist/dts/picker/picker-menu-option.template.d.ts

@@ -0,0 +1,8 @@
+import { ViewTemplate } from "@ni/fast-element";
+import type { FoundationElementTemplate } from "../foundation-element/foundation-element.js";
+import type { PickerMenuOption } from "./picker-menu-option.js";
+/**
+ *
+ * @public
+ */
+export declare const pickerMenuOptionTemplate: FoundationElementTemplate<ViewTemplate<PickerMenuOption>>;

package/dist/dts/picker/picker-menu.d.ts

@@ -0,0 +1,46 @@
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+/**
+ * A List Picker Menu Custom HTML Element.
+ *
+ * @alpha
+ */
+export declare class PickerMenu extends FoundationElement {
+    /**
+     *  Elements in the default slot
+     *
+     * @internal
+     */
+    menuElements: HTMLElement[];
+    menuElementsChanged(): void;
+    /**
+     *  Elements in the header slot
+     *
+     *
+     * @internal
+     */
+    headerElements: HTMLElement[];
+    headerElementsChanged(): void;
+    /**
+     *  Elements in the footer slot
+     *
+     *
+     * @internal
+     */
+    footerElements: HTMLElement[];
+    footerElementsChanged(): void;
+    /**
+     * Text to display to assistive technology when
+     * suggestions are available
+     *
+     * @alpha
+     */
+    suggestionsAvailableText: string;
+    /**
+     * Children that are list items
+     *
+     * @internal
+     */
+    optionElements: HTMLElement[];
+    private updateOptions;
+    private addSlottedListItems;
+}