@ni/nimble-components 1.0.0-beta.101 → 1.0.0-beta.102

package/dist/esm/theme-provider/design-tokens.js

@@ -1,164 +1,164 @@
-import { DesignToken } from '@microsoft/fast-foundation';
-import hexRgb from 'hex-rgb';
-import { Black91, Black88, Black85, Black15, Black75, White, Enterprise, Selection100, SlLegacyBlue, Fail100LightUi, SmallDelay, MediumDelay, Fail100DarkUi, BodyFamily, BodySize, ControlLabel1Family, ControlLabel1Size, ControlLabel1Weight, Warning100LightUi, Warning100DarkUi, Pass100LightUi, Pass100DarkUi, Title2Size, Title2Family, GroupLabel1Family, GroupLabel1Size, GroupLabel1Weight } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
-import { NimbleTheme } from './themes';
-function rgbString(hexValue) {
-    const { red, green, blue } = hexRgb(hexValue);
-    return `${red}, ${green}, ${blue}`;
-}
-function hexToRgba(hexValue, alpha) {
-    const { red, green, blue } = hexRgb(hexValue);
-    return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
-}
-const { create } = DesignToken;
-export const theme = create({
-    name: 'theme',
-    cssCustomPropertyName: null
-}).withDefault(NimbleTheme.Light);
-function getColorForTheme(element, lightThemeColor, darkThemeColor, colorThemeColor, legacyBlueThemeColor) {
-    switch (theme.getValueFor(element)) {
-        case NimbleTheme.Light:
-            return lightThemeColor;
-        case NimbleTheme.Dark:
-            return darkThemeColor;
-        case NimbleTheme.Color:
-            return colorThemeColor;
-        case NimbleTheme.LegacyBlue:
-            return legacyBlueThemeColor;
-        default:
-            return lightThemeColor;
-    }
-}
-function getDefaultLineColorForTheme(element) {
-    switch (theme.getValueFor(element)) {
-        case NimbleTheme.Light:
-            return Black91;
-        case NimbleTheme.Dark:
-            return Black15;
-        case NimbleTheme.Color:
-            return White;
-        case NimbleTheme.LegacyBlue:
-            return Black91;
-        default:
-            return Black91;
-    }
-}
-function getDefaultFontColorForTheme(element) {
-    switch (theme.getValueFor(element)) {
-        case NimbleTheme.Light:
-            return Black91;
-        case NimbleTheme.Dark:
-            return Black15;
-        case NimbleTheme.Color:
-            return White;
-        case NimbleTheme.LegacyBlue:
-            return Black75;
-        default:
-            return Black91;
-    }
-}
-function getFontForTheme(element) {
-    switch (theme.getValueFor(element)) {
-        case NimbleTheme.LegacyBlue:
-            return `${BodyFamily}`;
-        default:
-            return `${ControlLabel1Family}, ${BodyFamily}`;
-    }
-}
-function getGroupLabelFontForTheme(element) {
-    switch (theme.getValueFor(element)) {
-        case NimbleTheme.LegacyBlue:
-            return `${BodyFamily}`;
-        default:
-            return `${GroupLabel1Family}, ${BodyFamily}`;
-    }
-}
-function getGroupLabelTextTransform(element) {
-    switch (theme.getValueFor(element)) {
-        case NimbleTheme.LegacyBlue:
-            return 'none';
-        default:
-            return 'uppercase';
-    }
-}
-function getLabelTextTransform(element) {
-    switch (theme.getValueFor(element)) {
-        case NimbleTheme.LegacyBlue:
-            return 'none';
-        default:
-            return 'none';
-    }
-}
-function getLabelTextSize(element) {
-    switch (theme.getValueFor(element)) {
-        case NimbleTheme.LegacyBlue:
-            return '13px';
-        default:
-            return ControlLabel1Size;
-    }
-}
-function getPasswordRevealFilter(element) {
-    switch (theme.getValueFor(element)) {
-        case NimbleTheme.Color:
-        case NimbleTheme.Dark:
-            return 'invert(100%)';
-        default:
-            return 'invert(0%)';
-    }
-}
-const fillColorSelectedTheme = (element) => getColorForTheme(element, Selection100, Selection100, White, SlLegacyBlue);
-const fillColorHoverTheme = (element) => getColorForTheme(element, Black91, Black15, White, SlLegacyBlue);
-// Color Tokens
-export const actionColorRgb = create('action-color-rgb').withDefault((element) => rgbString(getColorForTheme(element, Black91, Black15, White, SlLegacyBlue)));
-export const applicationBackgroundColor = create('application-background-color').withDefault((element) => getColorForTheme(element, White, Black85, Enterprise, White));
-export const fillColorSelected = create('fill-color-selected').withDefault((element) => hexToRgba(fillColorSelectedTheme(element), 0.3));
-export const fillColorSelectedRgb = create('fill-color-selected-rgb').withDefault((element) => rgbString(fillColorSelectedTheme(element)));
-export const fillColorSelectedHover = create('fill-color-selected-hover').withDefault((element) => hexToRgba(fillColorSelectedTheme(element), 0.15));
-export const fillColorHover = create('fill-color-hover').withDefault((element) => hexToRgba(fillColorHoverTheme(element), 0.1));
-export const borderColor = create('border-color').withDefault((element) => getDefaultLineColorForTheme(element));
-export const borderColorRgb = create('border-color-rgb').withDefault((element) => rgbString(getDefaultLineColorForTheme(element)));
-export const failColorTheme = (element) => getColorForTheme(element, Fail100LightUi, Fail100DarkUi, Fail100DarkUi, Fail100LightUi);
-export const failColor = create('fail-color').withDefault((element) => failColorTheme(element));
-export const warningColorTheme = (element) => getColorForTheme(element, Warning100LightUi, Warning100DarkUi, Warning100DarkUi, Warning100LightUi);
-export const warningColor = create('warning-color').withDefault((element) => warningColorTheme(element));
-export const passColorTheme = (element) => getColorForTheme(element, Pass100LightUi, Pass100DarkUi, Pass100DarkUi, Pass100LightUi);
-export const passColor = create('pass-color').withDefault((element) => passColorTheme(element));
-export const borderColorHover = create('border-color-hover').withDefault((element) => getColorForTheme(element, Selection100, Selection100, White, hexToRgba(SlLegacyBlue, 0.9)));
-export const popupBoxShadowColor = create('popup-box-shadow-color').withDefault((element) => hexToRgba(getColorForTheme(element, Black75, Black85, Black85, Black75), 0.3));
-export const popupBorderColor = create('popup-border-color').withDefault((element) => hexToRgba(getColorForTheme(element, Black91, Black15, White, Black91), 0.3));
-// Component Sizing Tokens
-export const controlHeight = create('control-height').withDefault('32px');
-export const standardPadding = create('standard-padding').withDefault('16px');
-export const labelHeight = create('label-height').withDefault('16px');
-export const borderWidth = create('border-width').withDefault('1px');
-export const iconSize = create('icon-size').withDefault('16px');
-export const drawerWidth = create('drawer-width').withDefault('784px');
-// Font Family Tokens
-export const fontFamily = create('font-family').withDefault(BodyFamily);
-export const labelFontFamily = create('label-font-family').withDefault((element) => getFontForTheme(element));
-export const groupLabelFontFamily = create('group-label-font-family').withDefault((element) => getGroupLabelFontForTheme(element));
-export const drawerHeaderFontFamily = create('drawer-header-font-family').withDefault(Title2Family);
-// Font Sizing Tokens
-export const labelFontSize = create('label-font-size').withDefault((element) => getLabelTextSize(element));
-export const contentFontSize = create('content-font-size').withDefault(BodySize);
-export const groupLabelFontSize = create('group-label-font-size').withDefault(GroupLabel1Size);
-export const drawerHeaderFontSize = create('drawer-header-font-size').withDefault(Title2Size);
-// Font Weight Tokens
-export const groupLabelFontWeight = create('group-label-font-weight').withDefault(GroupLabel1Weight);
-export const labelFontWeight = create('label-font-weight').withDefault(ControlLabel1Weight);
-// Font Color Tokens
-export const labelFontColor = create('label-font-color').withDefault((element) => hexToRgba(getDefaultFontColorForTheme(element), 0.6));
-export const groupLabelFontColor = create('group-label-font-color').withDefault((element) => getDefaultFontColorForTheme(element));
-export const contentFontColor = create('content-font-color').withDefault((element) => getColorForTheme(element, Black91, Black15, White, Black88));
-export const buttonContentFontColor = create('button-content-font-color').withDefault((element) => getColorForTheme(element, Black91, Black15, White, SlLegacyBlue));
-export const labelFontColorDisabled = create('label-font-color-disabled').withDefault((element) => hexToRgba(getDefaultLineColorForTheme(element), 0.3));
-export const labelTextTransform = create('label-text-transform').withDefault((element) => getLabelTextTransform(element));
-export const groupLabelTextTransform = create('group-label-text-transform').withDefault((element) => getGroupLabelTextTransform(element));
-export const contentFontColorDisabled = create('content-font-color-disabled').withDefault((element) => hexToRgba(getColorForTheme(element, Black91, Black15, White, Black88), 0.3));
-// Animation Tokens
-export const smallDelay = create('small-delay').withDefault(SmallDelay);
-export const mediumDelay = create('medium-delay').withDefault(MediumDelay);
-export const drawerAnimationDurationMs = create('drawer-animation-duration-ms').withDefault(250);
-// Filter Tokens
-export const passwordRevealFilter = create('password-reveal-filter').withDefault((element) => getPasswordRevealFilter(element));
+import { DesignToken } from '@microsoft/fast-foundation';
+import hexRgb from 'hex-rgb';
+import { Black91, Black88, Black85, Black15, Black75, White, Enterprise, Selection100, SlLegacyBlue, Fail100LightUi, SmallDelay, MediumDelay, Fail100DarkUi, BodyFamily, BodySize, ControlLabel1Family, ControlLabel1Size, ControlLabel1Weight, Warning100LightUi, Warning100DarkUi, Pass100LightUi, Pass100DarkUi, Title2Size, Title2Family, GroupLabel1Family, GroupLabel1Size, GroupLabel1Weight } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { NimbleTheme } from './themes';
+function rgbString(hexValue) {
+    const { red, green, blue } = hexRgb(hexValue);
+    return `${red}, ${green}, ${blue}`;
+}
+function hexToRgba(hexValue, alpha) {
+    const { red, green, blue } = hexRgb(hexValue);
+    return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+}
+const { create } = DesignToken;
+export const theme = create({
+    name: 'theme',
+    cssCustomPropertyName: null
+}).withDefault(NimbleTheme.Light);
+function getColorForTheme(element, lightThemeColor, darkThemeColor, colorThemeColor, legacyBlueThemeColor) {
+    switch (theme.getValueFor(element)) {
+        case NimbleTheme.Light:
+            return lightThemeColor;
+        case NimbleTheme.Dark:
+            return darkThemeColor;
+        case NimbleTheme.Color:
+            return colorThemeColor;
+        case NimbleTheme.LegacyBlue:
+            return legacyBlueThemeColor;
+        default:
+            return lightThemeColor;
+    }
+}
+function getDefaultLineColorForTheme(element) {
+    switch (theme.getValueFor(element)) {
+        case NimbleTheme.Light:
+            return Black91;
+        case NimbleTheme.Dark:
+            return Black15;
+        case NimbleTheme.Color:
+            return White;
+        case NimbleTheme.LegacyBlue:
+            return Black91;
+        default:
+            return Black91;
+    }
+}
+function getDefaultFontColorForTheme(element) {
+    switch (theme.getValueFor(element)) {
+        case NimbleTheme.Light:
+            return Black91;
+        case NimbleTheme.Dark:
+            return Black15;
+        case NimbleTheme.Color:
+            return White;
+        case NimbleTheme.LegacyBlue:
+            return Black75;
+        default:
+            return Black91;
+    }
+}
+function getFontForTheme(element) {
+    switch (theme.getValueFor(element)) {
+        case NimbleTheme.LegacyBlue:
+            return `${BodyFamily}`;
+        default:
+            return `${ControlLabel1Family}, ${BodyFamily}`;
+    }
+}
+function getGroupLabelFontForTheme(element) {
+    switch (theme.getValueFor(element)) {
+        case NimbleTheme.LegacyBlue:
+            return `${BodyFamily}`;
+        default:
+            return `${GroupLabel1Family}, ${BodyFamily}`;
+    }
+}
+function getGroupLabelTextTransform(element) {
+    switch (theme.getValueFor(element)) {
+        case NimbleTheme.LegacyBlue:
+            return 'none';
+        default:
+            return 'uppercase';
+    }
+}
+function getLabelTextTransform(element) {
+    switch (theme.getValueFor(element)) {
+        case NimbleTheme.LegacyBlue:
+            return 'none';
+        default:
+            return 'none';
+    }
+}
+function getLabelTextSize(element) {
+    switch (theme.getValueFor(element)) {
+        case NimbleTheme.LegacyBlue:
+            return '13px';
+        default:
+            return ControlLabel1Size;
+    }
+}
+function getPasswordRevealFilter(element) {
+    switch (theme.getValueFor(element)) {
+        case NimbleTheme.Color:
+        case NimbleTheme.Dark:
+            return 'invert(100%)';
+        default:
+            return 'invert(0%)';
+    }
+}
+const fillColorSelectedTheme = (element) => getColorForTheme(element, Selection100, Selection100, White, SlLegacyBlue);
+const fillColorHoverTheme = (element) => getColorForTheme(element, Black91, Black15, White, SlLegacyBlue);
+// Color Tokens
+export const actionColorRgb = create('action-color-rgb').withDefault((element) => rgbString(getColorForTheme(element, Black91, Black15, White, SlLegacyBlue)));
+export const applicationBackgroundColor = create('application-background-color').withDefault((element) => getColorForTheme(element, White, Black85, Enterprise, White));
+export const fillColorSelected = create('fill-color-selected').withDefault((element) => hexToRgba(fillColorSelectedTheme(element), 0.3));
+export const fillColorSelectedRgb = create('fill-color-selected-rgb').withDefault((element) => rgbString(fillColorSelectedTheme(element)));
+export const fillColorSelectedHover = create('fill-color-selected-hover').withDefault((element) => hexToRgba(fillColorSelectedTheme(element), 0.15));
+export const fillColorHover = create('fill-color-hover').withDefault((element) => hexToRgba(fillColorHoverTheme(element), 0.1));
+export const borderColor = create('border-color').withDefault((element) => getDefaultLineColorForTheme(element));
+export const borderColorRgb = create('border-color-rgb').withDefault((element) => rgbString(getDefaultLineColorForTheme(element)));
+export const failColorTheme = (element) => getColorForTheme(element, Fail100LightUi, Fail100DarkUi, Fail100DarkUi, Fail100LightUi);
+export const failColor = create('fail-color').withDefault((element) => failColorTheme(element));
+export const warningColorTheme = (element) => getColorForTheme(element, Warning100LightUi, Warning100DarkUi, Warning100DarkUi, Warning100LightUi);
+export const warningColor = create('warning-color').withDefault((element) => warningColorTheme(element));
+export const passColorTheme = (element) => getColorForTheme(element, Pass100LightUi, Pass100DarkUi, Pass100DarkUi, Pass100LightUi);
+export const passColor = create('pass-color').withDefault((element) => passColorTheme(element));
+export const borderColorHover = create('border-color-hover').withDefault((element) => getColorForTheme(element, Selection100, Selection100, White, hexToRgba(SlLegacyBlue, 0.9)));
+export const popupBoxShadowColor = create('popup-box-shadow-color').withDefault((element) => hexToRgba(getColorForTheme(element, Black75, Black85, Black85, Black75), 0.3));
+export const popupBorderColor = create('popup-border-color').withDefault((element) => hexToRgba(getColorForTheme(element, Black91, Black15, White, Black91), 0.3));
+// Component Sizing Tokens
+export const controlHeight = create('control-height').withDefault('32px');
+export const standardPadding = create('standard-padding').withDefault('16px');
+export const labelHeight = create('label-height').withDefault('16px');
+export const borderWidth = create('border-width').withDefault('1px');
+export const iconSize = create('icon-size').withDefault('16px');
+export const drawerWidth = create('drawer-width').withDefault('784px');
+// Font Family Tokens
+export const fontFamily = create('font-family').withDefault(BodyFamily);
+export const labelFontFamily = create('label-font-family').withDefault((element) => getFontForTheme(element));
+export const groupLabelFontFamily = create('group-label-font-family').withDefault((element) => getGroupLabelFontForTheme(element));
+export const drawerHeaderFontFamily = create('drawer-header-font-family').withDefault(Title2Family);
+// Font Sizing Tokens
+export const labelFontSize = create('label-font-size').withDefault((element) => getLabelTextSize(element));
+export const contentFontSize = create('content-font-size').withDefault(BodySize);
+export const groupLabelFontSize = create('group-label-font-size').withDefault(GroupLabel1Size);
+export const drawerHeaderFontSize = create('drawer-header-font-size').withDefault(Title2Size);
+// Font Weight Tokens
+export const groupLabelFontWeight = create('group-label-font-weight').withDefault(GroupLabel1Weight);
+export const labelFontWeight = create('label-font-weight').withDefault(ControlLabel1Weight);
+// Font Color Tokens
+export const labelFontColor = create('label-font-color').withDefault((element) => hexToRgba(getDefaultFontColorForTheme(element), 0.6));
+export const groupLabelFontColor = create('group-label-font-color').withDefault((element) => getDefaultFontColorForTheme(element));
+export const contentFontColor = create('content-font-color').withDefault((element) => getColorForTheme(element, Black91, Black15, White, Black88));
+export const buttonContentFontColor = create('button-content-font-color').withDefault((element) => getColorForTheme(element, Black91, Black15, White, SlLegacyBlue));
+export const labelFontColorDisabled = create('label-font-color-disabled').withDefault((element) => hexToRgba(getDefaultLineColorForTheme(element), 0.3));
+export const labelTextTransform = create('label-text-transform').withDefault((element) => getLabelTextTransform(element));
+export const groupLabelTextTransform = create('group-label-text-transform').withDefault((element) => getGroupLabelTextTransform(element));
+export const contentFontColorDisabled = create('content-font-color-disabled').withDefault((element) => hexToRgba(getColorForTheme(element, Black91, Black15, White, Black88), 0.3));
+// Animation Tokens
+export const smallDelay = create('small-delay').withDefault(SmallDelay);
+export const mediumDelay = create('medium-delay').withDefault(MediumDelay);
+export const drawerAnimationDurationMs = create('drawer-animation-duration-ms').withDefault(250);
+// Filter Tokens
+export const passwordRevealFilter = create('password-reveal-filter').withDefault((element) => getPasswordRevealFilter(element));
 //# sourceMappingURL=design-tokens.js.map

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

@@ -1,10 +1,10 @@
-import { FoundationElement } from '@microsoft/fast-foundation';
-import type { NimbleTheme } from './themes';
-export type { NimbleThemeProvider };
-/**
- * The NimbleThemeProvider implementation
- * @internal
- */
-declare class NimbleThemeProvider extends FoundationElement {
-    theme: NimbleTheme;
-}
+import { FoundationElement } from '@microsoft/fast-foundation';
+import type { NimbleTheme } from './themes';
+export type { NimbleThemeProvider };
+/**
+ * The NimbleThemeProvider implementation
+ * @internal
+ */
+declare class NimbleThemeProvider extends FoundationElement {
+    theme: NimbleTheme;
+}

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

@@ -1,43 +1,43 @@
-import { __decorate } from "tslib";
-import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
-import { attr, css } from '@microsoft/fast-element';
-import { template } from './template';
-import { theme } from './design-tokens';
-function designToken(token) {
-    return (source, key) => {
-        source[`${key}Changed`] = function keyChanged(_prev, next) {
-            if (next !== undefined && next !== null) {
-                token.setValueFor(this, next);
-            }
-            else {
-                token.deleteValueFor(this);
-            }
-        };
-    };
-}
-/**
- * The NimbleThemeProvider implementation
- * @internal
- */
-class NimbleThemeProvider extends FoundationElement {
-}
-__decorate([
-    attr({
-        attribute: 'theme'
-    }),
-    designToken(theme)
-], NimbleThemeProvider.prototype, "theme", void 0);
-const styles = css `
-    :host {
-        display: contents;
-    }
-`;
-const nimbleDesignSystemProvider = NimbleThemeProvider.compose({
-    baseName: 'theme-provider',
-    styles,
-    template
-});
-DesignSystem.getOrCreate()
-    .withPrefix('nimble')
-    .register(nimbleDesignSystemProvider());
+import { __decorate } from "tslib";
+import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
+import { attr, css } from '@microsoft/fast-element';
+import { template } from './template';
+import { theme } from './design-tokens';
+function designToken(token) {
+    return (source, key) => {
+        source[`${key}Changed`] = function keyChanged(_prev, next) {
+            if (next !== undefined && next !== null) {
+                token.setValueFor(this, next);
+            }
+            else {
+                token.deleteValueFor(this);
+            }
+        };
+    };
+}
+/**
+ * The NimbleThemeProvider implementation
+ * @internal
+ */
+class NimbleThemeProvider extends FoundationElement {
+}
+__decorate([
+    attr({
+        attribute: 'theme'
+    }),
+    designToken(theme)
+], NimbleThemeProvider.prototype, "theme", void 0);
+const styles = css `
+    :host {
+        display: contents;
+    }
+`;
+const nimbleDesignSystemProvider = NimbleThemeProvider.compose({
+    baseName: 'theme-provider',
+    styles,
+    template
+});
+DesignSystem.getOrCreate()
+    .withPrefix('nimble')
+    .register(nimbleDesignSystemProvider());
 //# sourceMappingURL=index.js.map

package/dist/esm/theme-provider/template.d.ts

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

package/dist/esm/theme-provider/template.js

@@ -1,3 +1,3 @@
-import { html } from '@microsoft/fast-element';
-export const template = html `<slot></slot>`;
+import { html } from '@microsoft/fast-element';
+export const template = html `<slot></slot>`;
 //# sourceMappingURL=template.js.map

package/dist/esm/theme-provider/themes.d.ts

@@ -1,6 +1,6 @@
-export declare enum NimbleTheme {
-    Light = "light",
-    Dark = "dark",
-    Color = "color",
-    LegacyBlue = "legacy-blue"
-}
+export declare enum NimbleTheme {
+    Light = "light",
+    Dark = "dark",
+    Color = "color",
+    LegacyBlue = "legacy-blue"
+}

package/dist/esm/theme-provider/themes.js

@@ -1,8 +1,8 @@
-export var NimbleTheme;
-(function (NimbleTheme) {
-    NimbleTheme["Light"] = "light";
-    NimbleTheme["Dark"] = "dark";
-    NimbleTheme["Color"] = "color";
-    NimbleTheme["LegacyBlue"] = "legacy-blue"; // ⛔️ only for use within SystemLink apps that haven't been updated to brand-aligned controls
-})(NimbleTheme || (NimbleTheme = {}));
+export var NimbleTheme;
+(function (NimbleTheme) {
+    NimbleTheme["Light"] = "light";
+    NimbleTheme["Dark"] = "dark";
+    NimbleTheme["Color"] = "color";
+    NimbleTheme["LegacyBlue"] = "legacy-blue"; // ⛔️ only for use within SystemLink apps that haven't been updated to brand-aligned controls
+})(NimbleTheme || (NimbleTheme = {}));
 //# sourceMappingURL=themes.js.map

package/dist/esm/tree-item/index.d.ts

@@ -1,28 +1,28 @@
-import { TreeItem as FoundationTreeItem } from '@microsoft/fast-foundation';
-/**
- * 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\>
- *
- */
-export 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;
-}
+import { TreeItem as FoundationTreeItem } from '@microsoft/fast-foundation';
+/**
+ * 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\>
+ *
+ */
+export 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;
+}