@ni/fast-foundation 0.0.2

package/dist/dts/listbox-option/listbox-option.d.ts

@@ -0,0 +1,176 @@
+import type { FoundationElementDefinition } from "../foundation-element/foundation-element.js";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+import { ARIAGlobalStatesAndProperties } from "../patterns/aria-global.js";
+import type { StartEndOptions } from "../patterns/start-end.js";
+import { StartEnd } from "../patterns/start-end.js";
+/**
+ * Listbox option configuration options
+ * @public
+ */
+export type ListboxOptionOptions = FoundationElementDefinition & StartEndOptions;
+/**
+ * Determines if the element is a {@link (ListboxOption:class)}
+ *
+ * @param element - the element to test.
+ * @public
+ */
+export declare function isListboxOption(el: Element): el is ListboxOption;
+/**
+ * An Option Custom HTML Element.
+ * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#option | ARIA option }.
+ *
+ * @slot start - Content which can be provided before the listbox option content
+ * @slot end - Content which can be provided after the listbox option content
+ * @slot - The default slot for listbox option content
+ * @csspart content - Wraps the listbox option content
+ *
+ * @public
+ */
+export declare class ListboxOption extends FoundationElement {
+    /**
+     * @internal
+     */
+    private _value;
+    /**
+     * @internal
+     */
+    proxy: HTMLOptionElement;
+    /**
+     * The checked state is used when the parent listbox is in multiple selection mode.
+     * To avoid accessibility conflicts, the checked state should not be present in
+     * single selection mode.
+     *
+     * @public
+     */
+    checked?: boolean;
+    /**
+     * Updates the ariaChecked property when the checked property changes.
+     *
+     * @param prev - the previous checked value
+     * @param next - the current checked value
+     *
+     * @public
+     */
+    protected checkedChanged(prev: boolean | unknown, next?: boolean): void;
+    /**
+     * The default slotted content.
+     *
+     * @public
+     */
+    content: Node[];
+    /**
+     * Updates the proxy's text content when the default slot changes.
+     * @param prev - the previous content value
+     * @param next - the current content value
+     *
+     * @internal
+     */
+    protected contentChanged(prev: undefined | Node[], next: Node[]): void;
+    /**
+     * The defaultSelected state of the option.
+     * @public
+     */
+    defaultSelected: boolean;
+    protected defaultSelectedChanged(): void;
+    /**
+     * Tracks whether the "selected" property has been changed.
+     * @internal
+     */
+    private dirtySelected;
+    /**
+     * The disabled state of the option.
+     * @public
+     * @remarks
+     * HTML Attribute: disabled
+     */
+    disabled: boolean;
+    protected disabledChanged(prev: boolean, next: boolean): void;
+    /**
+     * The selected attribute value. This sets the initial selected value.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: selected
+     */
+    selectedAttribute: boolean;
+    protected selectedAttributeChanged(): void;
+    /**
+     * The checked state of the control.
+     *
+     * @public
+     */
+    selected: boolean;
+    protected selectedChanged(): void;
+    /**
+     * Track whether the value has been changed from the initial value
+     */
+    dirtyValue: boolean;
+    /**
+     * The initial value of the option. This value sets the `value` property
+     * only when the `value` property has not been explicitly set.
+     *
+     * @remarks
+     * HTML Attribute: value
+     */
+    protected initialValue: string;
+    initialValueChanged(previous: string, next: string): void;
+    get label(): string;
+    get text(): string;
+    set value(next: string);
+    get value(): string;
+    get form(): HTMLFormElement | null;
+    constructor(text?: string, value?: string, defaultSelected?: boolean, selected?: boolean);
+}
+/**
+ * States and properties relating to the ARIA `option` role.
+ *
+ * @public
+ */
+export declare class DelegatesARIAListboxOption {
+    /**
+     * See {@link https://www.w3.org/TR/wai-aria-1.2/#option} for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: `aria-checked`
+     */
+    ariaChecked: "true" | "false" | string | null;
+    /**
+     * See {@link https://www.w3.org/TR/wai-aria-1.2/#option} for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: `aria-posinset`
+     */
+    ariaPosInSet: string | null;
+    /**
+     * See {@link https://www.w3.org/TR/wai-aria-1.2/#option} for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: `aria-selected`
+     */
+    ariaSelected: "true" | "false" | string | null;
+    /**
+     * See {@link https://www.w3.org/TR/wai-aria-1.2/#option} for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: `aria-setsize`
+     */
+    ariaSetSize: string | null;
+}
+/**
+ * @internal
+ * @privateRemarks
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast/issues/3317
+ */
+export interface DelegatesARIAListboxOption extends ARIAGlobalStatesAndProperties {
+}
+/**
+ * @internal
+ * @privateRemarks
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast/issues/3317
+ */
+export interface ListboxOption extends StartEnd, DelegatesARIAListboxOption {
+}

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

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

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

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

@@ -0,0 +1,78 @@
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+/**
+ * A Menu Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#menu | ARIA menu }.
+ *
+ * @slot - The default slot for the menu items
+ *
+ * @public
+ */
+export declare class Menu extends FoundationElement {
+    /**
+     * @internal
+     */
+    items: HTMLSlotElement;
+    private itemsChanged;
+    private menuItems;
+    private expandedItem;
+    /**
+     * The index of the focusable element in the items array
+     * defaults to -1
+     */
+    private focusIndex;
+    private static focusableElementRoles;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    disconnectedCallback(): void;
+    /**
+     * @internal
+     */
+    readonly isNestedMenu: () => boolean;
+    /**
+     * Focuses the first item in the menu.
+     *
+     * @public
+     */
+    focus(): void;
+    /**
+     * Collapses any expanded menu items.
+     *
+     * @public
+     */
+    collapseExpandedItem(): void;
+    /**
+     * @internal
+     */
+    handleMenuKeyDown(e: KeyboardEvent): void | boolean;
+    /**
+     * if focus is moving out of the menu, reset to a stable initial state
+     * @internal
+     */
+    handleFocusOut: (e: FocusEvent) => void;
+    private handleItemFocus;
+    private handleExpandedChanged;
+    private removeItemListeners;
+    private setItems;
+    /**
+     * handle change from child element
+     */
+    private changeHandler;
+    /**
+     * get an array of valid DOM children
+     */
+    private domChildren;
+    /**
+     * check if the item is a menu item
+     */
+    private isMenuItemElement;
+    /**
+     * check if the item is focusable
+     */
+    private isFocusableElement;
+    private setFocus;
+}

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

package/dist/dts/menu-item/index.d.ts

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

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

@@ -0,0 +1,160 @@
+import { SyntheticViewTemplate } from "@ni/fast-element";
+import { Direction } from "@ni/fast-web-utilities";
+import type { AnchoredRegion } from "../anchored-region/anchored-region.js";
+import { FoundationElement, FoundationElementDefinition } from "../foundation-element/foundation-element.js";
+import { StartEnd, StartEndOptions } from "../patterns/start-end.js";
+import { MenuItemRole, roleForMenuItem } from "./menu-item.options.js";
+export { MenuItemRole, roleForMenuItem };
+/**
+ * Types of menu item column count.
+ * @public
+ */
+export type MenuItemColumnCount = 0 | 1 | 2;
+/**
+ * Menu Item configuration options
+ * @public
+ */
+export type MenuItemOptions = FoundationElementDefinition & StartEndOptions & {
+    checkboxIndicator?: string | SyntheticViewTemplate;
+    expandCollapseGlyph?: string | SyntheticViewTemplate;
+    radioIndicator?: string | SyntheticViewTemplate;
+};
+/**
+ * A Switch Custom HTML Element.
+ * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#menuitem | ARIA menuitem }, {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemcheckbox | ARIA menuitemcheckbox}, or {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemradio | ARIA menuitemradio }.
+ *
+ * @slot checked-indicator - The checked indicator
+ * @slot radio-indicator - The radio indicator
+ * @slot start - Content which can be provided before the menu item content
+ * @slot end - Content which can be provided after the menu item content
+ * @slot - The default slot for menu item content
+ * @slot expand-collapse-indicator - The expand/collapse indicator
+ * @slot submenu - Used to nest menu's within menu items
+ * @csspart input-container - The element representing the visual checked or radio indicator
+ * @csspart checkbox - The element wrapping the `menuitemcheckbox` indicator
+ * @csspart radio - The element wrapping the `menuitemradio` indicator
+ * @csspart content - The element wrapping the menu item content
+ * @csspart expand-collapse-glyph-container - The element wrapping the expand collapse element
+ * @csspart expand-collapse - The expand/collapse element
+ * @csspart submenu-region - The container for the submenu, used for positioning
+ * @fires expanded-change - Fires a custom 'expanded-change' event when the expanded state changes
+ * @fires change - Fires a custom 'change' event when a non-submenu item with a role of `menuitemcheckbox`, `menuitemradio`, or `menuitem` is invoked
+ *
+ * @public
+ */
+export declare class MenuItem extends FoundationElement {
+    /**
+     * The disabled state of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: disabled
+     */
+    disabled: boolean;
+    /**
+     * The expanded state of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: expanded
+     */
+    expanded: boolean;
+    private expandedChanged;
+    /**
+     * @internal
+     */
+    startColumnCount: MenuItemColumnCount;
+    /**
+     * The role of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: role
+     */
+    role: MenuItemRole;
+    /**
+     * The checked value of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: checked
+     */
+    checked: boolean;
+    private checkedChanged;
+    /**
+     * reference to the anchored region
+     *
+     * @internal
+     */
+    submenuRegion: AnchoredRegion;
+    /**
+     * @internal
+     */
+    hasSubmenu: boolean;
+    /**
+     * Track current direction to pass to the anchored region
+     *
+     * @internal
+     */
+    currentDirection: Direction;
+    /**
+     * @internal
+     */
+    submenu: Element | undefined;
+    private focusSubmenuOnLoad;
+    private observer;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    disconnectedCallback(): void;
+    /**
+     * @internal
+     */
+    handleMenuItemKeyDown: (e: KeyboardEvent) => boolean;
+    /**
+     * @internal
+     */
+    handleMenuItemClick: (e: MouseEvent) => boolean;
+    /**
+     * @internal
+     */
+    submenuLoaded: () => void;
+    /**
+     * @internal
+     */
+    handleMouseOver: (e: MouseEvent) => boolean;
+    /**
+     * @internal
+     */
+    handleMouseOut: (e: MouseEvent) => boolean;
+    /**
+     * @internal
+     */
+    private expandAndFocus;
+    /**
+     * @internal
+     */
+    private invoke;
+    /**
+     * Gets the submenu element if any
+     *
+     * @internal
+     */
+    private updateSubmenu;
+    /**
+     * get an array of valid DOM children
+     */
+    private domChildren;
+}
+/**
+ * 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 MenuItem extends StartEnd {
+}

package/dist/dts/menu-item/menu-item.options.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Menu items roles.
+ * @public
+ */
+export declare const MenuItemRole: {
+    /**
+     * The menu item has a "menuitem" role
+     */
+    readonly menuitem: "menuitem";
+    /**
+     * The menu item has a "menuitemcheckbox" role
+     */
+    readonly menuitemcheckbox: "menuitemcheckbox";
+    /**
+     * The menu item has a "menuitemradio" role
+     */
+    readonly menuitemradio: "menuitemradio";
+};
+/**
+ * The types for menu item roles
+ * @public
+ */
+export type MenuItemRole = typeof MenuItemRole[keyof typeof MenuItemRole];
+/**
+ * @internal
+ */
+export declare const roleForMenuItem: {
+    [value in keyof typeof MenuItemRole]: typeof MenuItemRole[value];
+};

package/dist/dts/menu-item/menu-item.template.d.ts

@@ -0,0 +1,10 @@
+import type { ViewTemplate } from "@ni/fast-element";
+import type { FoundationElementTemplate } from "../foundation-element/foundation-element.js";
+import type { MenuItem, MenuItemOptions } from "./menu-item.js";
+/**
+ * Generates a template for the {@link @ni/fast-foundation#(MenuItem:class)} component using
+ * the provided prefix.
+ *
+ * @public
+ */
+export declare const menuItemTemplate: FoundationElementTemplate<ViewTemplate<MenuItem>, MenuItemOptions>;

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

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