npm - @ni/nimble-components - Versions diffs - 1.0.0-beta.122 → 1.0.0-beta.123 - Mend

@ni/nimble-components 1.0.0-beta.122 → 1.0.0-beta.123

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (70) hide show

package/README.md CHANGED Viewed

@@ -26,6 +26,33 @@ If you have an existing application that incorporates a module bundler like [Web
 3. Add the HTML for the component to your page. You can see sample code for each component in the [Nimble Storybook](https://ni.github.io/nimble/storybook/) by going to the **Docs** tab for the component and clicking **Show code**. For example: `<nimble-succeeded-icon></nimble-succeeded-icon>`.
 4. Nimble components are [standard web components (custom elements)](https://developer.mozilla.org/en-US/docs/Web/Web_Components) so you can configure them via normal DOM APIs like attributes, properties, events, and methods. The [Storybook documentation](https://ni.github.io/nimble/storybook/) for each component describes its custom API.
+## Theming
+This package contains a theming system which enables changing the appearance of controls based on user preferences or application designs. All built in components are styled in several themes. An application can also read the tokens underlying the themes to style other parts of the application or modify the tokens underlying the themes to customize the appearance beyond what Nimble offers.
+The theming system is composed of:
+1. theme-aware [design tokens](/packages/nimble-components/src/theme-provider/design-tokens.ts) which map base tokens from `nimble-tokens` to CSS variables and TypeScript constants that style parts of controls.
+2. a [theme provider component](/packages/nimble-components/src/theme-provider/index.ts) which organizes the higher level tokens into themes.
+### Using the Theming System
+1. Include the `<nimble-theme-provider>` element on your page and set its `theme` attribute. The theme provider has no appearance of its own but defines tokens that are used by descendant components. It will typically be at the root of the application:
+```html
+<body>
+    <nimble-theme-provider theme="light">
+        <!-- everything else -->
+    </nimble-theme-provider>
+</body>
+```
+2. _Optional_ Add other Nimble components as descendants of the theme provider and they will inherit the theme.
+3. _Optional_ Style non-Nimble components using the values which the theme provider defines for tokens.
+    - Tokens are exposed as CSS custom properties and as TypeScript constants using the [FAST Design Token](https://www.fast.design/docs/design-systems/design-tokens) implementation.
+    - These tokens are not yet documented but you can see their names in [`design-tokens.ts`](/packages/nimble-components/src/theme-provider/design-tokens.ts).
+4. _Optional_ Customize the theme for all or part of your application. Approaches for doing this are an area of active research; please reach out to the Nimble team to discuss your use case.
 ## Contributing
 Follow the instructions in [CONTRIBUTING.md](/packages/nimble-components/CONTRIBUTING.md) to modify this library.

package/dist/esm/nimble-components/src/button/behaviors.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import type { Behavior, ElementStyles } from '@microsoft/fast-element';
+import type { ButtonAppearance } from './types';
+/**
+ * Behavior that will conditionally apply a stylesheet based on the element's
+ * appearance property
+ *
+ * @param value - The value of the appearance property
+ * @param styles - The styles to be applied when condition matches
+ *
+ * @public
+ */
+export declare function appearanceBehavior(value: ButtonAppearance, styles: ElementStyles): Behavior;

package/dist/esm/nimble-components/src/button/index.d.ts ADDED Viewed

@@ -0,0 +1,24 @@
+import { Button as FoundationButton } from '@microsoft/fast-foundation';
+import { ButtonAppearance } from './types';
+export type { Button };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-button': Button;
+    }
+}
+/**
+ * A nimble-styled HTML button
+ */
+declare class Button extends FoundationButton {
+    /**
+     * The appearance the button should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance: ButtonAppearance;
+    connectedCallback(): void;
+    defaultSlottedContentChanged(): void;
+    private checkForEmptyText;
+}

package/dist/esm/nimble-components/src/button/styles.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/nimble-components/src/button/types.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+/**
+ * Types of button appearance.
+ * @public
+ */
+import type { Button } from '@microsoft/fast-foundation';
+export declare type ButtonAppearanceAttribute = 'outline' | 'ghost' | 'block';
+export declare enum ButtonAppearance {
+    Outline = "outline",
+    Ghost = "ghost",
+    Block = "block"
+}
+export declare type ButtonType = Button['type'];

package/dist/esm/nimble-components/src/checkbox/index.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { Checkbox as FoundationCheckbox } from '@microsoft/fast-foundation';
+export type { Checkbox };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-checkbox': Checkbox;
+    }
+}
+/**
+ * A nimble-styled checkbox control.
+ */
+declare class Checkbox extends FoundationCheckbox {
+}

package/dist/esm/nimble-components/src/checkbox/styles.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/nimble-components/src/drawer/animations.d.ts ADDED Viewed

@@ -0,0 +1,14 @@
+export declare const animationConfig: {
+    slideLeftKeyframes: Keyframe[];
+    slideRightKeyframes: Keyframe[];
+    fadeOverlayKeyframes: Keyframe[];
+    slideInOptions: {
+        duration: number;
+        easing: string;
+    };
+    slideOutOptions: {
+        duration: number;
+        easing: string;
+        direction: string;
+    };
+};

package/dist/esm/nimble-components/src/drawer/index.d.ts ADDED Viewed

@@ -0,0 +1,43 @@
+import { Dialog as FoundationDialog } from '@microsoft/fast-foundation';
+import { DrawerLocation, DrawerState } from './types';
+export type { Drawer };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-drawer': Drawer;
+    }
+}
+/**
+ * Drawer/Sidenav control. Shows content in a panel on the left / right side of the screen,
+ * which animates to be visible with a slide-in / slide-out animation.
+ * Configured via 'location', 'state', 'modal', 'preventDismiss' properties.
+ */
+declare class Drawer extends FoundationDialog {
+    location: DrawerLocation;
+    state: DrawerState;
+    /**
+     * True to prevent dismissing the drawer when the overlay outside the drawer is clicked.
+     * Only applicable when 'modal' is set to true (i.e. when the overlay is used).
+     * HTML Attribute: prevent-dismiss
+     */
+    preventDismiss: boolean;
+    private readonly propertiesToWatch;
+    private propertyChangeNotifier?;
+    private animationDurationMilliseconds;
+    private animationGroup?;
+    private animationsEnabledChangedHandler?;
+    private propertyChangeSubscriber?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    show(): void;
+    hide(): void;
+    dismiss(): void;
+    private onPropertyChange;
+    private onHiddenChanged;
+    private onLocationChanged;
+    private onStateChanged;
+    private updateAnimationDuration;
+    private animateOpening;
+    private animateClosing;
+    private animateOpenClose;
+    private cancelCurrentAnimation;
+}

package/dist/esm/nimble-components/src/drawer/styles.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/nimble-components/src/drawer/types.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+export declare type DrawerLocationAttribute = 'left' | 'right';
+export declare enum DrawerLocation {
+    Left = "left",
+    Right = "right"
+}
+export declare type DrawerStateAttribute = 'opening' | 'opened' | 'closing' | 'closed';
+export declare enum DrawerState {
+    Opening = "opening",
+    Opened = "opened",
+    Closing = "closing",
+    Closed = "closed"
+}

package/dist/esm/nimble-components/src/icon-base/index.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import type { NimbleIcon } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
+/**
+ * The base class for icon components
+ */
+export declare class Icon extends FoundationElement {
+    icon: NimbleIcon;
+    constructor(icon: NimbleIcon);
+}
+declare type IconClass = typeof Icon;
+export declare const registerIcon: (baseName: string, iconClass: IconClass) => void;
+export {};

package/dist/esm/nimble-components/src/icon-base/styles.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/nimble-components/src/icon-base/template.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import type { Icon } from '.';
2	+ export declare const template: import("@microsoft/fast-element").ViewTemplate<Icon, any>;

package/dist/esm/nimble-components/src/icon-base/types.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+/**
+ * Predefined icon status states
+ * @public
+ */
+export declare type IconStatusAttribute = 'fail' | 'warning' | 'pass' | 'regular';
+export declare enum IconStatus {
+    Fail = "fail",
+    Warning = "warning",
+    Pass = "pass",
+    Regular = "regular"
+}

package/dist/esm/nimble-components/src/icons/access-control.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-access-control-icon': AccessControlIcon;
+    }
+}
+/**
+ * The icon component for the 'access-control' icon
+ */
+export declare class AccessControlIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/admin.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-admin-icon': AdminIcon;
+    }
+}
+/**
+ * The icon component for the 'admin' icon
+ */
+export declare class AdminIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/administration.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-administration-icon': AdministrationIcon;
+    }
+}
+/**
+ * The icon component for the 'administration' icon
+ */
+export declare class AdministrationIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/all-icons.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+export { AccessControlIcon } from './access-control';
+export { AdminIcon } from './admin';
+export { AdministrationIcon } from './administration';
+export { CheckIcon } from './check';
+export { CustomApplicationsIcon } from './custom-applications';
+export { DeleteIcon } from './delete';
+export { FailIcon } from './fail';
+export { LoginIcon } from './login';
+export { LogoutIcon } from './logout';
+export { ManagedSystemsIcon } from './managed-systems';
+export { MeasurementDataAnalysisIcon } from './measurement-data-analysis';
+export { SettingsIcon } from './settings';
+export { SucceededIcon } from './succeeded';
+export { TestInsightsIcon } from './test-insights';
+export { UtilitiesIcon } from './utilities';

package/dist/esm/nimble-components/src/icons/check.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-check-icon': CheckIcon;
+    }
+}
+/**
+ *  The icon component for the 'check' icon
+ */
+export declare class CheckIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/custom-applications.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-custom-applications-icon': CustomApplicationsIcon;
+    }
+}
+/**
+ * The icon component for the 'custom-applications' icon
+ */
+export declare class CustomApplicationsIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/delete.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-delete-icon': DeleteIcon;
+    }
+}
+/**
+ * The icon component for the 'delete' icon
+ */
+export declare class DeleteIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/fail.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-fail-icon': FailIcon;
+    }
+}
+/**
+ *  The icon component for the 'fail' icon
+ */
+export declare class FailIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/login.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-login-icon': LoginIcon;
+    }
+}
+/**
+ * The icon component for the 'login' icon
+ */
+export declare class LoginIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/logout.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-logout-icon': LogoutIcon;
+    }
+}
+/**
+ * The icon component for the 'logout' icon
+ */
+export declare class LogoutIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/managed-systems.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-managed-systems-icon': ManagedSystemsIcon;
+    }
+}
+/**
+ * The icon component for the 'managed-systems' icon
+ */
+export declare class ManagedSystemsIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/measurement-data-analysis.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-measurement-data-analysis-icon': MeasurementDataAnalysisIcon;
+    }
+}
+/**
+ * The icon component for the 'measurement-data-analysis' icon
+ */
+export declare class MeasurementDataAnalysisIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/settings.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-settings-icon': SettingsIcon;
+    }
+}
+/**
+ * The icon component for the 'settings' icon
+ */
+export declare class SettingsIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/succeeded.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-succeeded-icon': SucceededIcon;
+    }
+}
+/**
+ *  The icon component for the 'succeeded' icon
+ */
+export declare class SucceededIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/test-insights.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-test-insights-icon': TestInsightsIcon;
+    }
+}
+/**
+ * The icon component for the 'test-insights' icon
+ */
+export declare class TestInsightsIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/utilities.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-utilities-icon': UtilitiesIcon;
+    }
+}
+/**
+ * The icon component for the 'utilities' icon
+ */
+export declare class UtilitiesIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/listbox-option/index.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import { ListboxOption as FoundationListboxOption } from '@microsoft/fast-foundation';
+export type { ListboxOption };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-listbox-option': ListboxOption;
+    }
+}
+/**
+ * A nimble-styled HTML listbox option
+ */
+declare class ListboxOption extends FoundationListboxOption {
+    get value(): string;
+    set value(value: string);
+    connectedCallback(): void;
+}

package/dist/esm/nimble-components/src/listbox-option/styles.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/nimble-components/src/menu/index.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { Menu as FoundationMenu } from '@microsoft/fast-foundation';
+export type { Menu };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-menu': Menu;
+    }
+}
+/**
+ * A nimble-styled menu
+ */
+declare class Menu extends FoundationMenu {
+}

package/dist/esm/nimble-components/src/menu/styles.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/nimble-components/src/menu-item/index.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { MenuItem as FoundationMenuItem } from '@microsoft/fast-foundation';
+export type { MenuItem };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-menu-item': MenuItem;
+    }
+}
+/**
+ * A nimble-styled menu-item
+ */
+declare class MenuItem extends FoundationMenuItem {
+}

package/dist/esm/nimble-components/src/menu-item/styles.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/nimble-components/src/number-field/index.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { NumberField as FoundationNumberField } from '@microsoft/fast-foundation';
+export type { NumberField };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-number-field': NumberField;
+    }
+}
+/**
+ * A nimble-styled HTML number input
+ */
+declare class NumberField extends FoundationNumberField {
+}

package/dist/esm/nimble-components/src/number-field/styles.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/nimble-components/src/select/index.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import { Select as FoundationSelect } from '@microsoft/fast-foundation';
+export type { Select };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-select': Select;
+    }
+}
+/**
+ * A nimble-styed HTML select
+ */
+declare class Select extends FoundationSelect {
+    get value(): string;
+    set value(value: string);
+    setPositioning(): void;
+    connectedCallback(): void;
+}

package/dist/esm/nimble-components/src/select/styles.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/nimble-components/src/tab/index.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { Tab as FoundationTab } from '@microsoft/fast-foundation';
+export type { Tab };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-tab': Tab;
+    }
+}
+/**
+ * A nimble-styled HTML tab
+ */
+declare class Tab extends FoundationTab {
+}

package/dist/esm/nimble-components/src/tab/styles.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/nimble-components/src/tab-panel/index.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { TabPanel as FoundationTabPanel } from '@microsoft/fast-foundation';
+export type { TabPanel };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-tab-panel': TabPanel;
+    }
+}
+/**
+ * A nimble-styled tab panel
+ */
+declare class TabPanel extends FoundationTabPanel {
+}

package/dist/esm/nimble-components/src/tab-panel/styles.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/nimble-components/src/tabs/index.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { Tabs as FoundationTabs } from '@microsoft/fast-foundation';
+export type { Tabs };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-tabs': Tabs;
+    }
+}
+/**
+ * A nimble-styled tabs control
+ */
+declare class Tabs extends FoundationTabs {
+}

package/dist/esm/nimble-components/src/tabs/styles.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/nimble-components/src/tabs-toolbar/index.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+export type { TabsToolbar };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-tabs-toolbar': TabsToolbar;
+    }
+}
+/**
+ * A nimble-styled container for toolbar content next to tabs.
+ */
+declare class TabsToolbar extends FoundationElement {
+}

package/dist/esm/nimble-components/src/tabs-toolbar/styles.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/nimble-components/src/tabs-toolbar/template.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const template: import("@microsoft/fast-element").ViewTemplate<any, any>;

package/dist/esm/nimble-components/src/testing/async-helpers.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+/**
+ * Allows test code to wait for components to complete pending asynchronous updates that resulted
+ * from DOM interactions like property or attribute changes.
+ */
+export declare const waitForUpdatesAsync: () => Promise<void>;
+/**
+ * Allows test code to force components to synchronously complete normally asynchronous pending
+ * updates that resulted from DOM interactions like property or attribute changes.
+ */
+export declare const processUpdates: () => void;

package/dist/esm/nimble-components/src/text-field/index.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { TextField as FoundationTextField } from '@microsoft/fast-foundation';
+export type { TextField };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-text-field': TextField;
+    }
+}
+/**
+ * A nimble-styed HTML text input
+ */
+declare class TextField extends FoundationTextField {
+}

package/dist/esm/nimble-components/src/text-field/styles.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/nimble-components/src/text-field/types.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { TextFieldType } from '@microsoft/fast-foundation';
+export declare type TextFieldTypeAttribute = 'email' | 'password' | 'tel' | 'text' | 'url';
+export { TextFieldType };

package/dist/esm/nimble-components/src/theme-provider/design-tokens.d.ts ADDED Viewed

@@ -0,0 +1,48 @@
+import { DesignToken } from '@microsoft/fast-foundation';
+import { NimbleTheme } from './types';
+export declare const theme: DesignToken<NimbleTheme>;
+export declare const actionColorRgb: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const applicationBackgroundColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const fillColorSelected: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const fillColorSelectedRgb: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const fillColorSelectedHover: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const fillColorHover: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const borderColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const borderColorRgb: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const failColorTheme: (element: HTMLElement) => string;
+export declare const failColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const warningColorTheme: (element: HTMLElement) => string;
+export declare const warningColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const passColorTheme: (element: HTMLElement) => string;
+export declare const passColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const borderColorHover: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const popupBoxShadowColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const popupBorderColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const controlHeight: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const standardPadding: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const labelHeight: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const borderWidth: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const iconSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const drawerWidth: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const fontFamily: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const labelFontFamily: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const groupLabelFontFamily: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const drawerHeaderFontFamily: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const labelFontSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const contentFontSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const groupLabelFontSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const drawerHeaderFontSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const groupLabelFontWeight: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const labelFontWeight: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const labelFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const groupLabelFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const contentFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const buttonContentFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const labelFontColorDisabled: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const labelTextTransform: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const groupLabelTextTransform: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const contentFontColorDisabled: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const smallDelay: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const mediumDelay: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const drawerAnimationDurationMs: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const passwordRevealFilter: import("@microsoft/fast-foundation").CSSDesignToken<string>;

package/dist/esm/nimble-components/src/theme-provider/index.d.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import type { NimbleTheme } from './types';
+export type { NimbleThemeProvider };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-theme-provider': NimbleThemeProvider;
+    }
+}
+/**
+ * The NimbleThemeProvider implementation. Add this component to the page and set its `theme` attribute to control
+ * the values of design tokens that provide colors and fonts as CSS custom properties to any descendant components.
+ * @internal
+ */
+declare class NimbleThemeProvider extends FoundationElement {
+    theme: NimbleTheme;
+    themeChanged(_prev: NimbleTheme | undefined, next: NimbleTheme | undefined): void;
+}

package/dist/esm/nimble-components/src/theme-provider/styles.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/nimble-components/src/theme-provider/template.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import type { NimbleThemeProvider } from '.';
2	+ export declare const template: import("@microsoft/fast-element").ViewTemplate<NimbleThemeProvider, any>;

package/dist/esm/nimble-components/src/theme-provider/types.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+export declare type NimbleThemeAttribute = 'light' | 'dark' | 'color' | 'legacy-blue';
+export declare enum NimbleTheme {
+    Light = "light",
+    Dark = "dark",
+    Color = "color",
+    LegacyBlue = "legacy-blue"
+}

package/dist/esm/nimble-components/src/tree-item/index.d.ts ADDED Viewed

@@ -0,0 +1,34 @@
+import { TreeItem as FoundationTreeItem } from '@microsoft/fast-foundation';
+export type { TreeItem };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-tree-item': TreeItem;
+    }
+}
+/**
+ * A function that returns a nimble-tree-item registration for configuring the component with a DesignSystem.
+ * Implements {@link @microsoft/fast-foundation#treeItemTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * Generates HTML Element: \<nimble-tree-item\>
+ *
+ */
+declare class TreeItem extends FoundationTreeItem {
+    private treeView;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private hasChildTreeItems;
+    private readonly handleClickOverride;
+    private readonly handleSelectedChange;
+    private clearTreeGroupSelection;
+    private setGroupSelectionOnRootParentTreeItem;
+    private getImmediateTreeItem;
+    /**
+     * This was copied directly from the FAST TreeItem implementation
+     * @returns the root tree view
+     */
+    private getParentTreeView;
+}

package/dist/esm/nimble-components/src/tree-item/styles.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { ElementStyles } from '@microsoft/fast-element';
+import { ElementDefinitionContext, TreeItemOptions } from '@microsoft/fast-foundation';
+export declare const styles: (context: ElementDefinitionContext, definition: TreeItemOptions) => ElementStyles;

package/dist/esm/nimble-components/src/tree-view/index.d.ts ADDED Viewed

@@ -0,0 +1,22 @@
+import { TreeView as FoundationTreeView } from '@microsoft/fast-foundation';
+import { TreeViewSelectionMode } from './types';
+export type { TreeView };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-tree-view': TreeView;
+    }
+}
+/**
+ * A function that returns a nimble-tree-view registration for configuring the component with a DesignSystem.
+ * Implements {@link @microsoft/fast-foundation#treeViewTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * Generates HTML Element: \<nimble-tree-view\>
+ *
+ */
+declare class TreeView extends FoundationTreeView {
+    selectionMode: TreeViewSelectionMode;
+    connectedCallback(): void;
+}

package/dist/esm/nimble-components/src/tree-view/styles.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/nimble-components/src/tree-view/types.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+export declare const pinnedSelectedAttribute = "pinned-selected";
+export declare const groupSelectedAttribute = "group-selected";
+export declare type TreeViewSelectionModeAttribute = 'all' | 'leaves-only';
+export declare enum TreeViewSelectionMode {
+    All = "all",
+    LeavesOnly = "leaves-only"
+}

package/dist/esm/nimble-components/src/utilities/style/focus.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+/**
+ * This file is a workaround for: https://github.com/prettier/prettier/issues/11400
+ */
+/**
+ * The string representing the focus selector to be used. Value
+ * will be ":focus-visible" when https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo
+ * is supported and ":focus" when it is not.
+ *
+ * @public
+ */
+export declare const focusVisible: string;

package/dist/esm/nimble-components/src/utilities/style/prefers-reduced-motion.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+/**
+ * Singleton utility to watch the prefers-reduced-motion media value
+ */
+export declare class PrefersReducedMotionWatcher {
+    static instance: PrefersReducedMotionWatcher;
+    readonly mediaQuery: MediaQueryList;
+    private constructor();
+}

package/dist/esm/theme-provider/index.d.ts CHANGED Viewed

@@ -7,7 +7,8 @@ declare global {
     }
 }
 /**
- * The NimbleThemeProvider implementation
+ * The NimbleThemeProvider implementation. Add this component to the page and set its `theme` attribute to control
+ * the values of design tokens that provide colors and fonts as CSS custom properties to any descendant components.
  * @internal
  */
 declare class NimbleThemeProvider extends FoundationElement {

package/dist/esm/theme-provider/index.js CHANGED Viewed

@@ -5,7 +5,8 @@ import { template } from './template';
 import { styles } from './styles';
 import { theme } from './design-tokens';
 /**
- * The NimbleThemeProvider implementation
+ * The NimbleThemeProvider implementation. Add this component to the page and set its `theme` attribute to control
+ * the values of design tokens that provide colors and fonts as CSS custom properties to any descendant components.
  * @internal
  */
 class NimbleThemeProvider extends FoundationElement {

package/dist/esm/theme-provider/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/theme-provider/index.ts"],"names":[],"mappings":";AAAA,OAAO,EACH,YAAY,EAEZ,iBAAiB,EACpB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAWxC~~;;;GAGG~~;AACH,MAAM,mBAAoB,SAAQ,iBAAiB;IAMxC,YAAY,CACf,KAA8B,EAC9B,IAA6B;QAE7B,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,IAAI,EAAE;YACrC,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,IAAqC,CAAC,CAAC;SAClE;aAAM;YACH,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;SAC9B;IACL,CAAC;CACJ;AAZG;IAHC,IAAI,CAAC;QACF,SAAS,EAAE,OAAO;KACrB,CAAC;kDACyB;AAc/B,MAAM,0BAA0B,GAAG,mBAAmB,CAAC,OAAO,CAAC;IAC3D,QAAQ,EAAE,gBAAgB;IAC1B,MAAM;IACN,QAAQ;CACX,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,0BAA0B,EAAE,CAAC,CAAC"}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/theme-provider/index.ts"],"names":[],"mappings":";AAAA,OAAO,EACH,YAAY,EAEZ,iBAAiB,EACpB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAWxC;;;;GAIG;AACH,MAAM,mBAAoB,SAAQ,iBAAiB;IAMxC,YAAY,CACf,KAA8B,EAC9B,IAA6B;QAE7B,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,IAAI,EAAE;YACrC,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,IAAqC,CAAC,CAAC;SAClE;aAAM;YACH,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;SAC9B;IACL,CAAC;CACJ;AAZG;IAHC,IAAI,CAAC;QACF,SAAS,EAAE,OAAO;KACrB,CAAC;kDACyB;AAc/B,MAAM,0BAA0B,GAAG,mBAAmB,CAAC,OAAO,CAAC;IAC3D,QAAQ,EAAE,gBAAgB;IAC1B,MAAM;IACN,QAAQ;CACX,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,0BAA0B,EAAE,CAAC,CAAC"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "1.0.0-beta.122",
+  "version": "1.0.0-beta.123",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run build-components && npm run build-storybook",
@@ -43,7 +43,7 @@
     "@microsoft/fast-components": "^2.0.0",
     "@microsoft/fast-element": "^1.6.1",
     "@microsoft/fast-foundation": "^2.22.0",
-    "@ni/nimble-tokens": "^1.0.0-beta.37",
+    "@ni/nimble-tokens": "^1.0.0-beta.38",
     "hex-rgb": "^5.0.0",
     "lodash-es": "^4.17.21"
   },