@ni/fast-foundation 0.0.2

package/dist/dts/radio-group/radio-group.d.ts

@@ -0,0 +1,101 @@
+import { Orientation } from "@ni/fast-web-utilities";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+/**
+ * An Radio Group Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#radiogroup | ARIA radiogroup }.
+ *
+ * @slot label - The slot for the label
+ * @slot - The default slot for radio buttons
+ * @csspart positioning-region - The positioning region for laying out the radios
+ * @fires change - Fires a custom 'change' event when the value changes
+ *
+ * @public
+ */
+export declare class RadioGroup extends FoundationElement {
+    /**
+     * When true, the child radios 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;
+    private readOnlyChanged;
+    /**
+     * Disables the radio group and child radios.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: disabled
+     */
+    disabled: boolean;
+    private disabledChanged;
+    /**
+     * The name of the radio group. Setting this value will set the name value
+     * for all child radio elements.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: name
+     */
+    name: string;
+    protected nameChanged(): void;
+    /**
+     * The value of the checked radio
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: value
+     */
+    value: string;
+    protected valueChanged(): void;
+    /**
+     * The orientation of the group
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: orientation
+     */
+    orientation: Orientation | "horizontal" | "vertical";
+    childItems: HTMLElement[];
+    /**
+     * @internal
+     */
+    slottedRadioButtons: HTMLElement[];
+    private slottedRadioButtonsChanged;
+    private selectedRadio;
+    private focusedRadio;
+    private direction;
+    private get parentToolbar();
+    private get isInsideToolbar();
+    private get isInsideFoundationToolbar();
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private setupRadioButtons;
+    private radioChangeHandler;
+    private moveToRadioByIndex;
+    private moveRightOffGroup;
+    private moveLeftOffGroup;
+    /**
+     * @internal
+     */
+    focusOutHandler: (e: FocusEvent) => boolean | void;
+    /**
+     * @internal
+     */
+    clickHandler: (e: MouseEvent) => void;
+    private shouldMoveOffGroupToTheRight;
+    private shouldMoveOffGroupToTheLeft;
+    private checkFocusedRadio;
+    private moveRight;
+    private moveLeft;
+    /**
+     * keyboard handling per https://w3c.github.io/aria-practices/#for-radio-groups-not-contained-in-a-toolbar
+     * navigation is different when there is an ancestor with role='toolbar'
+     *
+     * @internal
+     */
+    keydownHandler: (e: KeyboardEvent) => boolean | void;
+}

package/dist/dts/radio-group/radio-group.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 { RadioGroup } from "./radio-group.js";
+/**
+ * The template for the {@link @ni/fast-foundation#RadioGroup} component.
+ * @public
+ */
+export declare const radioGroupTemplate: FoundationElementTemplate<ViewTemplate<RadioGroup>>;

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

@@ -0,0 +1,2 @@
+export * from "./search.template.js";
+export * from "./search.js";

package/dist/dts/search/search.d.ts

@@ -0,0 +1,162 @@
+import { ARIAGlobalStatesAndProperties, StartEnd, StartEndOptions } from "../patterns/index.js";
+import type { FoundationElementDefinition } from "../foundation-element/foundation-element.js";
+import { FormAssociatedSearch } from "./search.form-associated.js";
+/**
+ * Search configuration options
+ * @public
+ */
+export type SearchOptions = FoundationElementDefinition & StartEndOptions;
+/**
+ * A Search Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search | <input type="search" /> element }.
+ *
+ * @slot start - Content which can be provided before the search input
+ * @slot end - Content which can be provided after the search clear button
+ * @slot - The default slot for the label
+ * @slot close-button - The clear button
+ * @slot close-glyph - The clear glyph
+ * @csspart label - The label
+ * @csspart root - The element wrapping the control, including start and end slots
+ * @csspart control - The element representing the input
+ * @csspart clear-button - The button to clear the input
+ *
+ * @public
+ */
+export declare class Search extends FormAssociatedSearch {
+    /**
+     * 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;
+    private readOnlyChanged;
+    /**
+     * 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;
+    private autofocusChanged;
+    /**
+     * 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;
+    private placeholderChanged;
+    /**
+     * 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;
+    private listChanged;
+    /**
+     * The maximum number of characters a user can enter.
+     * @public
+     * @remarks
+     * HTMLAttribute: maxlength
+     */
+    maxlength: number;
+    private maxlengthChanged;
+    /**
+     * The minimum number of characters a user can enter.
+     * @public
+     * @remarks
+     * HTMLAttribute: minlength
+     */
+    minlength: number;
+    private minlengthChanged;
+    /**
+     * A regular expression that the value must match to pass validation.
+     * @public
+     * @remarks
+     * HTMLAttribute: pattern
+     */
+    pattern: string;
+    private patternChanged;
+    /**
+     * Sets the width of the element to a specified number of characters.
+     * @public
+     * @remarks
+     * HTMLAttribute: size
+     */
+    size: number;
+    private sizeChanged;
+    /**
+     * Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used.
+     * @public
+     * @remarks
+     * HTMLAttribute: size
+     */
+    spellcheck: boolean;
+    private spellcheckChanged;
+    /**
+     * @internal
+     */
+    defaultSlottedNodes: Node[];
+    /**
+     * A reference to the internal close button element
+     * @internal
+     */
+    root: HTMLDivElement;
+    /**
+     * A reference to the internal input element
+     * @internal
+     */
+    control: HTMLInputElement;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /** {@inheritDoc (FormAssociated:interface).validate} */
+    validate(): void;
+    /**
+     * Handles the internal control's `input` event
+     * @internal
+     */
+    handleTextInput(): void;
+    /**
+     * Handles the control's clear value event
+     * @public
+     */
+    handleClearInput(): 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;
+}
+/**
+ * Includes ARIA states and properties relating to the ARIA textbox role
+ *
+ * @public
+ */
+export declare class DelegatesARIASearch {
+}
+/**
+ * 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 DelegatesARIASearch extends ARIAGlobalStatesAndProperties {
+}
+/**
+ * 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 Search extends StartEnd, DelegatesARIASearch {
+}

package/dist/dts/search/search.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 _Search extends FoundationElement {
+}
+interface _Search extends FormAssociated {
+}
+declare const FormAssociatedSearch_base: typeof _Search;
+/**
+ * A form-associated base class for the {@link @ni/fast-foundation#(Search:class)} component.
+ *
+ * @internal
+ */
+export declare class FormAssociatedSearch extends FormAssociatedSearch_base {
+    proxy: HTMLInputElement;
+}
+export {};

package/dist/dts/search/search.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 { Search, SearchOptions } from "./search.js";
+/**
+ * The template for the {@link @ni/fast-foundation#(Search:class)} component.
+ * @public
+ */
+export declare const searchTemplate: FoundationElementTemplate<ViewTemplate<Search>, SearchOptions>;

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

@@ -0,0 +1,3 @@
+export * from "./select.js";
+export * from "./select.options.js";
+export * from "./select.template.js";

package/dist/dts/select/select.d.ts

@@ -0,0 +1,289 @@
+import type { SyntheticViewTemplate } from "@ni/fast-element";
+import type { FoundationElementDefinition } from "../foundation-element/foundation-element.js";
+import type { ListboxOption } from "../listbox-option/listbox-option.js";
+import { DelegatesARIAListbox } from "../listbox/listbox.js";
+import type { StartEndOptions } from "../patterns/start-end.js";
+import { StartEnd } from "../patterns/start-end.js";
+import { FormAssociatedSelect } from "./select.form-associated.js";
+import { SelectPosition } from "./select.options.js";
+/**
+ * Select configuration options
+ * @public
+ */
+export type SelectOptions = FoundationElementDefinition & StartEndOptions & {
+    indicator?: string | SyntheticViewTemplate;
+};
+/**
+ * A Select Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#select | ARIA select }.
+ *
+ * @slot start - Content which can be provided before the button content
+ * @slot end - Content which can be provided after the button content
+ * @slot button-container - The element representing the select button
+ * @slot selected-value - The selected value
+ * @slot indicator - The visual indicator for the expand/collapse state of the button
+ * @slot - The default slot for slotted options
+ * @csspart control - The element representing the select invoking element
+ * @csspart selected-value - The element wrapping the selected value
+ * @csspart indicator - The element wrapping the visual indicator
+ * @csspart listbox - The listbox element
+ * @fires input - Fires a custom 'input' event when the value updates
+ * @fires change - Fires a custom 'change' event when the value updates
+ *
+ * @public
+ */
+export declare class Select extends FormAssociatedSelect {
+    /**
+     * The open attribute.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: open
+     */
+    open: boolean;
+    /**
+     * Sets focus and synchronizes ARIA attributes when the open property changes.
+     *
+     * @param prev - the previous open value
+     * @param next - the current open value
+     *
+     * @internal
+     */
+    protected openChanged(prev: boolean | undefined, next: boolean): void;
+    /**
+     * The selectedIndex when the open property is true.
+     *
+     * @internal
+     */
+    private indexWhenOpened;
+    /**
+     * The internal value property.
+     *
+     * @internal
+     */
+    private _value;
+    /**
+     * The component is collapsible when in single-selection mode with no size attribute.
+     *
+     * @internal
+     */
+    get collapsible(): boolean;
+    /**
+     * The ref to the internal `.control` element.
+     *
+     * @internal
+     */
+    control: HTMLElement;
+    /**
+     * The value property.
+     *
+     * @public
+     */
+    get value(): string;
+    set value(next: string);
+    /**
+     * Sets the value and display value to match the first selected option.
+     *
+     * @param shouldEmit - if true, the input and change events will be emitted
+     *
+     * @internal
+     */
+    private updateValue;
+    /**
+     * Updates the proxy value when the selected index changes.
+     *
+     * @param prev - the previous selected index
+     * @param next - the next selected index
+     *
+     * @internal
+     */
+    selectedIndexChanged(prev: number | undefined, next: number): void;
+    /**
+     * Reflects the placement for the listbox when the select is open.
+     *
+     * @public
+     */
+    positionAttribute?: SelectPosition;
+    /**
+     * Indicates the initial state of the position attribute.
+     *
+     * @internal
+     */
+    private forcedPosition;
+    /**
+     * Holds the current state for the calculated position of the listbox.
+     *
+     * @public
+     */
+    position?: SelectPosition;
+    protected positionChanged(prev: SelectPosition | undefined, next: SelectPosition | undefined): void;
+    /**
+     * Reference to the internal listbox element.
+     *
+     * @internal
+     */
+    listbox: HTMLDivElement;
+    /**
+     * The unique id for the internal listbox element.
+     *
+     * @internal
+     */
+    listboxId: string;
+    /**
+     * Calculate and apply listbox positioning based on available viewport space.
+     *
+     * @public
+     */
+    setPositioning(): void;
+    /**
+     * The max height for the listbox when opened.
+     *
+     * @internal
+     */
+    maxHeight: number;
+    /**
+     * The value displayed on the button.
+     *
+     * @public
+     */
+    get displayValue(): string;
+    /**
+     * Synchronize the `aria-disabled` property when the `disabled` property changes.
+     *
+     * @param prev - The previous disabled value
+     * @param next - The next disabled value
+     *
+     * @internal
+     */
+    disabledChanged(prev: boolean, next: boolean): void;
+    /**
+     * Reset the element to its first selectable option when its parent form is reset.
+     *
+     * @internal
+     */
+    formResetCallback(): void;
+    /**
+     * Handle opening and closing the listbox when the select is clicked.
+     *
+     * @param e - the mouse event
+     * @internal
+     */
+    clickHandler(e: MouseEvent): boolean | void;
+    /**
+     * Handles focus state when the element or its children lose focus.
+     *
+     * @param e - The focus event
+     * @internal
+     */
+    focusoutHandler(e: FocusEvent): boolean | void;
+    /**
+     * Updates the value when an option's value changes.
+     *
+     * @param source - the source object
+     * @param propertyName - the property to evaluate
+     *
+     * @internal
+     * @override
+     */
+    handleChange(source: any, propertyName: string): void;
+    /**
+     * Synchronize the form-associated proxy and updates the value property of the element.
+     *
+     * @param prev - the previous collection of slotted option elements
+     * @param next - the next collection of slotted option elements
+     *
+     * @internal
+     */
+    slottedOptionsChanged(prev: Element[] | undefined, next: Element[]): void;
+    /**
+     * Prevents focus when size is set and a scrollbar is clicked.
+     *
+     * @param e - the mouse event object
+     *
+     * @override
+     * @internal
+     */
+    mousedownHandler(e: MouseEvent): boolean | void;
+    /**
+     * Sets the multiple property on the proxy element.
+     *
+     * @param prev - the previous multiple value
+     * @param next - the current multiple value
+     */
+    multipleChanged(prev: boolean | undefined, next: boolean): void;
+    /**
+     * Updates the selectedness of each option when the list of selected options changes.
+     *
+     * @param prev - the previous list of selected options
+     * @param next - the current list of selected options
+     *
+     * @override
+     * @internal
+     */
+    protected selectedOptionsChanged(prev: ListboxOption[] | undefined, next: ListboxOption[]): void;
+    /**
+     * Sets the selected index to match the first option with the selected attribute, or
+     * the first selectable option.
+     *
+     * @override
+     * @internal
+     */
+    protected setDefaultSelectedOption(): void;
+    /**
+     * Resets and fills the proxy to match the component's options.
+     *
+     * @internal
+     */
+    private setProxyOptions;
+    /**
+     * Handle keyboard interaction for the select.
+     *
+     * @param e - the keyboard event
+     * @internal
+     */
+    keydownHandler(e: KeyboardEvent): boolean | void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Updates the proxy's size property when the size attribute changes.
+     *
+     * @param prev - the previous size
+     * @param next - the current size
+     *
+     * @override
+     * @internal
+     */
+    protected sizeChanged(prev: number | undefined, next: number): void;
+    /**
+     *
+     * @internal
+     */
+    private updateDisplayValue;
+}
+/**
+ * Includes ARIA states and properties relating to the ARIA select role.
+ *
+ * @public
+ */
+export declare class DelegatesARIASelect {
+    /**
+     * See {@link https://www.w3.org/TR/wai-aria-1.2/#combobox} for more information
+     * @public
+     * @remarks
+     * HTML Attribute: `aria-controls`
+     */
+    ariaControls: string | null;
+}
+/**
+ * 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 DelegatesARIASelect extends DelegatesARIAListbox {
+}
+/**
+ * @internal
+ */
+export interface Select extends StartEnd, DelegatesARIASelect {
+}

package/dist/dts/select/select.form-associated.d.ts

@@ -0,0 +1,16 @@
+import { ListboxElement } from "../listbox/listbox.element.js";
+import { FormAssociated } from "../form-associated/form-associated.js";
+declare class _Select extends ListboxElement {
+}
+interface _Select extends FormAssociated {
+}
+declare const FormAssociatedSelect_base: typeof _Select;
+/**
+ * A form-associated base class for the {@link @ni/fast-foundation#(Select:class)} component.
+ *
+ * @internal
+ */
+export declare class FormAssociatedSelect extends FormAssociatedSelect_base {
+    proxy: HTMLSelectElement;
+}
+export {};

package/dist/dts/select/select.options.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Positioning directions for the listbox when a select is open.
+ * @public
+ */
+export declare const SelectPosition: {
+    readonly above: "above";
+    readonly below: "below";
+};
+/**
+ * Types for positioning the select element listbox when open
+ * @public
+ */
+export type SelectPosition = typeof SelectPosition[keyof typeof SelectPosition];

package/dist/dts/select/select.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 { Select, SelectOptions } from "./select.js";
+/**
+ * The template for the {@link @ni/fast-foundation#(Select:class)} component.
+ * @public
+ */
+export declare const selectTemplate: FoundationElementTemplate<ViewTemplate<Select>, SelectOptions>;

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

@@ -0,0 +1,2 @@
+export * from "./skeleton.template.js";
+export * from "./skeleton.js";

package/dist/dts/skeleton/skeleton.d.ts

@@ -0,0 +1,47 @@
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+/**
+ * A structure representing skeleton shapes
+ * @public
+ */
+export type SkeletonShape = "rect" | "circle";
+/**
+ * A Skeleton Custom HTML Element.
+ *
+ * @slot - The default slot
+ *
+ * @public
+ */
+export declare class Skeleton extends FoundationElement {
+    /**
+     * Indicates the Skeleton should have a filled style.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: fill
+     */
+    fill: string;
+    /**
+     * Indicates what the shape of the Skeleton should be.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: shape
+     */
+    shape: SkeletonShape;
+    /**
+     * Indicates that the component can accept a pattern URL.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: shape
+     */
+    pattern: string;
+    /**
+     * Indicates that the component has an activated shimmer effect
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: shimmer
+     */
+    shimmer: boolean;
+}

package/dist/dts/skeleton/skeleton.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 { Skeleton } from "./skeleton.js";
+/**
+ * The template for the fast-skeleton component
+ * @public
+ */
+export declare const skeletonTemplate: FoundationElementTemplate<ViewTemplate<Skeleton>>;