@ni/fast-foundation 0.0.2

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

@@ -0,0 +1 @@
+export * from "./di.js";

package/dist/dts/dialog/dialog.d.ts

@@ -0,0 +1,153 @@
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+/**
+ * A Switch Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#dialog | ARIA dialog }.
+ *
+ * @slot - The default slot for the dialog content
+ * @csspart positioning-region - A wrapping element used to center the dialog and position the modal overlay
+ * @csspart overlay - The modal dialog overlay
+ * @csspart control - The dialog element
+ * @fires cancel - Fires a custom 'cancel' event when the modal overlay is clicked
+ * @fires close - Fires a custom 'close' event when the dialog is hidden
+ *
+ * @public
+ */
+export declare class Dialog extends FoundationElement {
+    /**
+     * Indicates the element is modal. When modal, user mouse interaction will be limited to the contents of the element by a modal
+     * overlay.  Clicks on the overlay will cause the dialog to emit a "dismiss" event.
+     * @public
+     * @defaultValue - true
+     * @remarks
+     * HTML Attribute: modal
+     */
+    modal: boolean;
+    /**
+     * The hidden state of the element.
+     *
+     * @public
+     * @defaultValue - false
+     * @remarks
+     * HTML Attribute: hidden
+     */
+    hidden: boolean;
+    /**
+     * Indicates that the dialog should trap focus.
+     *
+     * @public
+     * @defaultValue - true
+     * @remarks
+     * HTML Attribute: trap-focus
+     */
+    trapFocus: boolean;
+    private trapFocusChanged;
+    /**
+     * The id of the element describing the dialog.
+     * @public
+     * @remarks
+     * HTML Attribute: aria-describedby
+     */
+    ariaDescribedby: string;
+    /**
+     * The id of the element labeling the dialog.
+     * @public
+     * @remarks
+     * HTML Attribute: aria-labelledby
+     */
+    ariaLabelledby: string;
+    /**
+     * The label surfaced to assistive technologies.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: aria-label
+     */
+    ariaLabel: string;
+    /**
+     * @internal
+     */
+    dialog: HTMLDivElement;
+    /**
+     * @internal
+     */
+    private isTrappingFocus;
+    /**
+     * @internal
+     */
+    private notifier;
+    /**
+     * @internal
+     */
+    dismiss(): void;
+    /**
+     * The method to show the dialog.
+     *
+     * @public
+     */
+    show(): void;
+    /**
+     * The method to hide the dialog.
+     *
+     * @public
+     */
+    hide(): void;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    disconnectedCallback(): void;
+    /**
+     * @internal
+     */
+    handleChange(source: any, propertyName: string): void;
+    private handleDocumentKeydown;
+    private handleDocumentFocus;
+    private handleTabKeyDown;
+    private getTabQueueBounds;
+    /**
+     * focus on first element of tab queue
+     */
+    private focusFirstElement;
+    /**
+     * we should only focus if focus has not already been brought to the dialog
+     */
+    private shouldForceFocus;
+    /**
+     * we should we be active trapping focus
+     */
+    private shouldTrapFocus;
+    /**
+     *
+     *
+     * @internal
+     */
+    private updateTrapFocus;
+    /**
+     * Reduce a collection to only its focusable elements.
+     *
+     * @param elements - Collection of elements to reduce
+     * @param element - The current element
+     *
+     * @internal
+     */
+    private static reduceTabbableItems;
+    /**
+     * Test if element is focusable fast element
+     *
+     * @param element - The element to check
+     *
+     * @internal
+     */
+    private static isFocusableFastElement;
+    /**
+     * Test if the element has a focusable shadow
+     *
+     * @param element - The element to check
+     *
+     * @internal
+     */
+    private static hasTabbableShadow;
+}

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

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

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

package/dist/dts/directives/reflect-attributes.d.ts

@@ -0,0 +1,18 @@
+import type { CaptureType } from "@ni/fast-element";
+/**
+ * Reflects attributes from the host element to the target element of the directive.
+ * @param attributes - The attributes to reflect
+ *
+ * @beta
+ * @example
+ * ```ts
+ * const template = html`
+ *     <button
+ *         ${reflectAttributes("aria-label", "aria-describedby")}
+ *     >
+ *          hello world
+ *     </button
+ * `
+ * ```
+ */
+export declare function reflectAttributes<T = any>(...attributes: string[]): CaptureType<T>;

package/dist/dts/disclosure/disclosure.d.ts

@@ -0,0 +1,59 @@
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+/**
+ * A Disclosure Custom HTML Element.
+ * Based largely on the {@link https://w3c.github.io/aria-practices/#disclosure | disclosure element }.
+ *
+ * @slot start - Content which can be provided before the summary content
+ * @slot end - Content which can be provided after the summary content
+ * @slot title - The summary content
+ * @slot - The default slot for the disclosure content
+ * @fires toggle - fires a toggle event when the summary is toggled
+ *
+ * @public
+ */
+export declare class Disclosure extends FoundationElement {
+    /**
+     * Determines if the element should show the extra content or not.
+     *
+     * @public
+     */
+    expanded: boolean;
+    /**
+     * Invoker title
+     *
+     * @public
+     */
+    title: string;
+    /**
+     * @internal
+     */
+    details: HTMLDetailsElement;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    disconnectedCallback(): void;
+    /**
+     * Show extra content.
+     */
+    show(): void;
+    /**
+     * Hide extra content.
+     */
+    hide(): void;
+    /**
+     * Toggle the current(expanded/collapsed) state.
+     */
+    toggle(): void;
+    /**
+     * Register listener and set default disclosure mode
+     */
+    protected setup(): void;
+    /**
+     * Update the aria attr and fire `toggle` event
+     */
+    protected onToggle(): void;
+}

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

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

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

package/dist/dts/divider/divider.d.ts

@@ -0,0 +1,28 @@
+import { Orientation } from "@ni/fast-web-utilities";
+import { FoundationElement } from "../foundation-element/foundation-element.js";
+import { DividerRole } from "./divider.options.js";
+export { DividerRole };
+/**
+ * A Divider Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#separator | ARIA separator } or {@link https://www.w3.org/TR/wai-aria-1.1/#presentation | ARIA presentation}.
+ *
+ * @public
+ */
+export declare class Divider extends FoundationElement {
+    /**
+     * The role of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: role
+     */
+    role: DividerRole;
+    /**
+     * The orientation of the divider.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: orientation
+     */
+    orientation: Orientation;
+}

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

@@ -0,0 +1,19 @@
+/**
+ * Divider roles
+ * @public
+ */
+export declare const DividerRole: {
+    /**
+     * The divider semantically separates content
+     */
+    readonly separator: "separator";
+    /**
+     * The divider has no semantic value and is for visual presentation only.
+     */
+    readonly presentation: "presentation";
+};
+/**
+ * The types for Divider roles
+ * @public
+ */
+export type DividerRole = typeof DividerRole[keyof typeof DividerRole];

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

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

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

package/dist/dts/flipper/flipper.d.ts

@@ -0,0 +1,57 @@
+import { SyntheticViewTemplate } from "@ni/fast-element";
+import { FoundationElement, FoundationElementDefinition } from "../foundation-element/foundation-element.js";
+import { FlipperDirection } from "./flipper.options.js";
+export { FlipperDirection };
+/**
+ * Flipper configuration options
+ * @public
+ */
+export type FlipperOptions = FoundationElementDefinition & {
+    next?: string | SyntheticViewTemplate;
+    previous?: string | SyntheticViewTemplate;
+};
+/**
+ * A Flipper Custom HTML Element.
+ * Flippers are a form of button that implies directional content navigation, such as in a carousel.
+ *
+ * @slot next - The next flipper content
+ * @slot previous - The previous flipper content
+ * @csspart next - Wraps the next flipper content
+ * @csspart previous - Wraps the previous flipper content
+ * @fires click - Fires a custom 'click' event when Enter or Space is invoked via keyboard and the flipper is exposed to assistive technologies.
+ *
+ * @public
+ */
+export declare class Flipper extends FoundationElement {
+    /**
+     * The disabled state of the flipper.
+     * @public
+     * @remarks
+     * HTML Attribute: disabled
+     */
+    disabled: boolean;
+    /**
+     * Indicates the flipper should be hidden from assistive technology. Because flippers are often supplementary navigation, they are often hidden from assistive technology.
+     *
+     * @public
+     * @defaultValue - true
+     * @remarks
+     * HTML Attribute: aria-hidden
+     */
+    hiddenFromAT: boolean;
+    /**
+     * The direction that the flipper implies navigating.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: direction
+     */
+    direction: FlipperDirection;
+    /**
+     * Simulate a click event when the flipper has focus and the user hits enter or space keys
+     * Blur focus if the user hits escape key
+     * @param e - Keyboard event
+     * @public
+     */
+    keyupHandler(e: Event & KeyboardEvent): void;
+}

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

@@ -0,0 +1,13 @@
+/**
+ * The direction options for flipper.
+ * @public
+ */
+export declare const FlipperDirection: {
+    readonly next: "next";
+    readonly previous: "previous";
+};
+/**
+ * The types for the flipper direction options.
+ * @public
+ */
+export type FlipperDirection = typeof FlipperDirection[keyof typeof FlipperDirection];

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

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

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

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

@@ -0,0 +1,177 @@
+import type { Constructable, FASTElement } from "@ni/fast-element";
+/**
+ * This file enables typing support for ElementInternals APIs.
+ * It is largely taken from https://github.com/microsoft/TSJS-lib-generator/pull/818/files.
+ *
+ * When TypeScript adds support for these APIs we can delete this file.
+ */
+interface ValidityStateFlags {
+    badInput?: boolean;
+    customError?: boolean;
+    patternMismatch?: boolean;
+    rangeOverflow?: boolean;
+    rangeUnderflow?: boolean;
+    stepMismatch?: boolean;
+    tooLong?: boolean;
+    tooShort?: boolean;
+    typeMismatch?: boolean;
+    valueMissing?: boolean;
+}
+/**
+ * Source:
+ * https://html.spec.whatwg.org/multipage/custom-elements.html#elementinternals
+ */
+interface ElementInternals {
+    /**
+     * Returns the form owner of internals target element.
+     */
+    readonly form: HTMLFormElement | null;
+    /**
+     * Returns a NodeList of all the label elements that internals target element is associated with.
+     */
+    readonly labels: NodeList;
+    /**
+     * Returns the error message that would be shown to the user if internals target element was to be checked for validity.
+     */
+    readonly validationMessage: string;
+    /**
+     * Returns the ValidityState object for internals target element.
+     */
+    readonly validity: ValidityState;
+    /**
+     * Returns true if internals target element will be validated when the form is submitted; false otherwise.
+     */
+    readonly willValidate: boolean;
+    /**
+     * Returns true if internals target element has no validity problems; false otherwise. Fires an invalid event at the element in the latter case.
+     */
+    checkValidity(): boolean;
+    /**
+     * Returns true if internals target element has no validity problems; otherwise,
+     * returns false, fires an invalid event at the element, and (if the event isn't canceled) reports the problem to the user.
+     */
+    reportValidity(): boolean;
+    /**
+     * Sets both the state and submission value of internals target element to value.
+     *
+     * While "null" isn't enumerated as a argument type (here)[https://html.spec.whatwg.org/multipage/custom-elements.html#the-elementinternals-interface],
+     * In practice it appears to remove the value from the form data on submission. Adding it as a valid type here
+     * becuase that capability is required for checkbox and radio types
+     */
+    setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
+    /**
+     * Marks internals target element as suffering from the constraints indicated by the flags argument,
+     * and sets the element's validation message to message.
+     * If anchor is specified, the user agent might use
+     * it to indicate problems with the constraints of internals target
+     * element when the form owner is validated interactively or reportValidity() is called.
+     */
+    setValidity(flags: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;
+}
+declare let ElementInternals: {
+    prototype: ElementInternals;
+    new (): ElementInternals;
+};
+/**
+ * @alpha
+ */
+export declare const supportsElementInternals: boolean;
+/**
+ * Base class for providing Custom Element Form Association.
+ *
+ * @alpha
+ */
+export interface FormAssociated extends Omit<ElementInternals, "labels"> {
+    dirtyValue: boolean;
+    disabled: boolean;
+    readonly elementInternals: ElementInternals | null;
+    readonly formAssociated: boolean;
+    initialValue: string;
+    readonly labels: ReadonlyArray<Node[]>;
+    name: string;
+    required: boolean;
+    value: string;
+    currentValue: string;
+    attachProxy(): void;
+    detachProxy(): void;
+    disabledChanged?(previous: boolean, next: boolean): void;
+    formDisabledCallback?(disabled: boolean): void;
+    formResetCallback(): void;
+    initialValueChanged?(previous: string, next: string): void;
+    nameChanged?(previous: string, next: string): void;
+    requiredChanged(prev: boolean, next: boolean): void;
+    stopPropagation(e: Event): void;
+    /**
+     * Sets the validity of the custom element. By default this uses the proxy element to determine
+     * validity, but this can be extended or replaced in implementation.
+     *
+     * @param anchor - The anchor element to provide to ElementInternals.setValidity for surfacing the browser's constraint validation UI
+     */
+    validate(anchor?: HTMLElement): void;
+    valueChanged(previous: string, next: string): void;
+}
+/**
+ * Base class for providing Custom Element Form Association with checkable features.
+ *
+ * @alpha
+ */
+export interface CheckableFormAssociated extends FormAssociated {
+    currentChecked: boolean;
+    dirtyChecked: boolean;
+    checkedAttribute: boolean;
+    defaultChecked: boolean;
+    defaultCheckedChanged(oldValue: boolean | undefined, newValue: boolean): void;
+    checked: boolean;
+    checkedChanged(oldValue: boolean | undefined, newValue: boolean): void;
+}
+/**
+ * Avaiable types for the `proxy` property.
+ * @alpha
+ */
+export type ProxyElement = HTMLSelectElement | HTMLTextAreaElement | HTMLInputElement;
+/**
+ * Identifies a class as having a proxy element and optional submethods related
+ * to the proxy element.
+ *
+ * @alpha
+ */
+export interface FormAssociatedProxy {
+    proxy: ProxyElement;
+    disabledChanged?(previous: boolean, next: boolean): void;
+    formDisabledCallback?(disabled: boolean): void;
+    formResetCallback?(): void;
+    initialValueChanged?(previous: string, next: string): void;
+    valueChanged?(previous: string, next: string): void;
+    nameChanged?(previous: string, next: string): void;
+}
+/**
+ * Combined type to describe a Form-associated element.
+ *
+ * @alpha
+ */
+export type FormAssociatedElement = FormAssociated & FASTElement & HTMLElement & FormAssociatedProxy;
+/**
+ * Combined type to describe a checkable Form-associated element.
+ *
+ * @alpha
+ */
+export type CheckableFormAssociatedElement = FormAssociatedElement & CheckableFormAssociated & {
+    proxy: HTMLInputElement;
+};
+/**
+ * Combined type to describe a Constructable Form-Associated type.
+ *
+ * @alpha
+ */
+export type ConstructableFormAssociated = Constructable<HTMLElement & FASTElement>;
+/**
+ * Base function for providing Custom Element Form Association.
+ *
+ * @alpha
+ */
+export declare function FormAssociated<T extends ConstructableFormAssociated>(BaseCtor: T): T;
+/**
+ * @alpha
+ */
+export declare function CheckableFormAssociated<T extends ConstructableFormAssociated>(BaseCtor: T): T;
+export {};

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

@@ -0,0 +1 @@
+export * from "./form-associated.js";