@fluentui/web-components 2.5.10 → 3.0.0-alpha.1

package/dist/esm/tooltip/tooltip.styles.js

@@ -1,107 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { AnchoredRegion, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
-import { elevationShadowTooltip } from '../styles/index';
-import { controlCornerRadius, fillColor, neutralForegroundRest, neutralStrokeLayerRest, strokeWidth, } from '../design-tokens';
-import { typeRampBase } from '../styles/patterns/type-ramp';
-export const tooltipStyles = (context, definition) => css `
-    :host {
-      position: relative;
-      contain: layout;
-      overflow: visible;
-      height: 0;
-      width: 0;
-      z-index: 10000;
-    }
-
-    .tooltip {
-      box-sizing: border-box;
-      border-radius: calc(${controlCornerRadius} * 1px);
-      border: calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};
-      background: ${fillColor};
-      color: ${neutralForegroundRest};
-      padding: 4px 12px;
-      height: fit-content;
-      width: fit-content;
-      ${typeRampBase}
-      white-space: nowrap;
-      box-shadow: ${elevationShadowTooltip};
-    }
-
-    ${context.tagFor(AnchoredRegion)} {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      overflow: visible;
-      flex-direction: row;
-    }
-
-    ${context.tagFor(AnchoredRegion)}.right,
-    ${context.tagFor(AnchoredRegion)}.left {
-      flex-direction: column;
-    }
-
-    ${context.tagFor(AnchoredRegion)}.top .tooltip::after,
-    ${context.tagFor(AnchoredRegion)}.bottom .tooltip::after,
-    ${context.tagFor(AnchoredRegion)}.left .tooltip::after,
-    ${context.tagFor(AnchoredRegion)}.right .tooltip::after {
-      content: '';
-      width: 12px;
-      height: 12px;
-      background: ${fillColor};
-      border-top: calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};
-      border-left: calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};
-      position: absolute;
-    }
-
-    ${context.tagFor(AnchoredRegion)}.top .tooltip::after {
-      transform: translateX(-50%) rotate(225deg);
-      bottom: 5px;
-      left: 50%;
-    }
-
-    ${context.tagFor(AnchoredRegion)}.top .tooltip {
-      margin-bottom: 12px;
-    }
-
-    ${context.tagFor(AnchoredRegion)}.bottom .tooltip::after {
-      transform: translateX(-50%) rotate(45deg);
-      top: 5px;
-      left: 50%;
-    }
-
-    ${context.tagFor(AnchoredRegion)}.bottom .tooltip {
-      margin-top: 12px;
-    }
-
-    ${context.tagFor(AnchoredRegion)}.left .tooltip::after {
-      transform: translateY(-50%) rotate(135deg);
-      top: 50%;
-      right: 5px;
-    }
-
-    ${context.tagFor(AnchoredRegion)}.left .tooltip {
-      margin-right: 12px;
-    }
-
-    ${context.tagFor(AnchoredRegion)}.right .tooltip::after {
-      transform: translateY(-50%) rotate(-45deg);
-      top: 50%;
-      left: 5px;
-    }
-
-    ${context.tagFor(AnchoredRegion)}.right .tooltip {
-      margin-left: 12px;
-    }
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        :host([disabled]) {
-          opacity: 1;
-        }
-        ${context.tagFor(AnchoredRegion)}.top .tooltip::after,
-        ${context.tagFor(AnchoredRegion)}.bottom .tooltip::after,
-        ${context.tagFor(AnchoredRegion)}.left .tooltip::after,
-        ${context.tagFor(AnchoredRegion)}.right .tooltip::after {
-          content: '';
-          width: unset;
-          height: unset;
-        }
-      `));

package/dist/esm/tooltip/tooltip.vscode.definition.json

@@ -1,56 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-tooltip",
-            "title": "Tooltip",
-            "description": "The Fluent UI tooltip element",
-            "attributes": [
-                {
-                    "name": "visible",
-                    "title": "Visible",
-                    "description": "Sets whether the tooltip is visible or not",
-                    "type": "boolean",
-                    "required": false
-                },
-                {
-                    "name": "anchor",
-                    "title": "Anchor ID",
-                    "description": "The HTML ID of the element the tooltip is positioned relative to",
-                    "type": "string",
-                    "required": false
-                },
-                {
-                    "name": "delay",
-                    "title": "Delay",
-                    "description": "The delay in milliseconds before a tooltip is shown after a hover event",
-                    "type": "number",
-                    "default": 300,
-                    "required": false
-                },
-                {
-                    "name": "position",
-                    "title": "Position",
-                    "description": "Controls the placement of the tooltip relative to the configured 'Anchor ID'",
-                    "values": [
-                        { "name": "top" },
-                        { "name": "right" },
-                        { "name": "bottom" },
-                        { "name": "left" },
-                        { "name": "start" },
-                        { "name": "end" }
-                    ],
-                    "type": "string",
-                    "required": false
-                }
-            ],
-            "slots": [
-                {
-                    "name": "",
-                    "title": "Default slot",
-                    "description": "The tooltip content"
-                }
-            ]
-        }
-    ]
-}

package/dist/esm/tree-item/index.js

@@ -1,32 +0,0 @@
-import { treeItemTemplate as template, TreeItem } from '@microsoft/fast-foundation';
-import { treeItemStyles as styles } from './tree-item.styles';
-/**
- * The Fluent tree item Custom Element. Implements, {@link @microsoft/fast-foundation#TreeItem}
- * {@link @microsoft/fast-foundation#treeItemTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-tree-item\>
- *
- */
-export const fluentTreeItem = TreeItem.compose({
-    baseName: 'tree-item',
-    template,
-    styles,
-    expandCollapseGlyph: `
-    <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
-      <path d="M4.65 2.15a.5.5 0 000 .7L7.79 6 4.65 9.15a.5.5 0 10.7.7l3.5-3.5a.5.5 0 000-.7l-3.5-3.5a.5.5 0 00-.7 0z"/>
-    </svg>
-  `,
-});
-/**
- * Styles for TreeItem
- * @public
- */
-export const treeItemStyles = styles;
-/**
- * Tree item base class
- * @public
- */
-export { TreeItem };

package/dist/esm/tree-item/tree-item.stories.js

@@ -1,34 +0,0 @@
-import { fluentTreeItem } from './index';
-export default {
-    title: 'Components/Tree Item',
-    component: fluentTreeItem,
-    argTypes: {
-        disabled: {
-            control: { type: 'boolean' },
-        },
-        selected: {
-            control: { type: 'boolean' },
-        },
-    },
-};
-const TreeItemTemplate = ({ disabled, label, selected }) => `
-  <fluent-tree-item
-    ${disabled ? 'disabled' : ''}
-    ${selected ? 'selected' : ''}
-  >${label}</fluent-tree-item>`;
-export const TreeItem = TreeItemTemplate.bind({});
-TreeItem.args = {
-    label: 'Tree Item',
-    disabled: false,
-    selected: false,
-};
-const example = `
-<fluent-tree-item>Tree item</fluent-tree-item>
-`;
-TreeItem.parameters = {
-    docs: {
-        source: {
-            code: example,
-        },
-    },
-};

package/dist/esm/tree-item/tree-item.styles.js

@@ -1,227 +0,0 @@
-import { css, cssPartial } from '@microsoft/fast-element';
-import { DesignToken, disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { SystemColors } from '@microsoft/fast-web-utilities';
-import { DirectionalStyleSheetBehavior, heightNumber } from '../styles/index';
-import { accentFillRest, baseHeightMultiplier, bodyFont, controlCornerRadius, density, designUnit, disabledOpacity, focusStrokeWidth, neutralFillSecondaryRecipe, neutralFillSecondaryRest, neutralFillStealthActive, neutralFillStealthHover, neutralFillStealthRecipe, neutralFillStealthRest, neutralForegroundRest, strokeWidth, } from '../design-tokens';
-import { typeRampBase } from '../styles/patterns/type-ramp';
-import { focusTreatmentBase } from '../styles/focus';
-const ltr = css `
-  .expand-collapse-button svg {
-    transform: rotate(0deg);
-  }
-  :host(.nested) .expand-collapse-button {
-    left: var(--expand-collapse-button-nested-width, calc(${heightNumber} * -1px));
-  }
-  :host([selected])::after {
-    left: calc(${focusStrokeWidth} * 1px);
-  }
-  :host([expanded]) > .positioning-region .expand-collapse-button svg {
-    transform: rotate(90deg);
-  }
-`;
-const rtl = css `
-  .expand-collapse-button svg {
-    transform: rotate(180deg);
-  }
-  :host(.nested) .expand-collapse-button {
-    right: var(--expand-collapse-button-nested-width, calc(${heightNumber} * -1px));
-  }
-  :host([selected])::after {
-    right: calc(${focusStrokeWidth} * 1px);
-  }
-  :host([expanded]) > .positioning-region .expand-collapse-button svg {
-    transform: rotate(90deg);
-  }
-`;
-export const expandCollapseButtonSize = cssPartial `((${baseHeightMultiplier} / 2) * ${designUnit}) + ((${designUnit} * ${density}) / 2)`;
-const expandCollapseHover = DesignToken.create('tree-item-expand-collapse-hover').withDefault((target) => {
-    const recipe = neutralFillStealthRecipe.getValueFor(target);
-    return recipe.evaluate(target, recipe.evaluate(target).hover).hover;
-});
-const selectedExpandCollapseHover = DesignToken.create('tree-item-expand-collapse-selected-hover').withDefault((target) => {
-    const baseRecipe = neutralFillSecondaryRecipe.getValueFor(target);
-    const buttonRecipe = neutralFillStealthRecipe.getValueFor(target);
-    return buttonRecipe.evaluate(target, baseRecipe.evaluate(target).rest).hover;
-});
-export const treeItemStyles = (context, definition) => css `
-    ${display('block')} :host {
-      contain: content;
-      position: relative;
-      outline: none;
-      color: ${neutralForegroundRest};
-      fill: currentcolor;
-      cursor: pointer;
-      font-family: ${bodyFont};
-      --expand-collapse-button-size: calc(${heightNumber} * 1px);
-      --tree-item-nested-width: 0;
-    }
-
-    .positioning-region {
-      display: flex;
-      position: relative;
-      box-sizing: border-box;
-      background: ${neutralFillStealthRest};
-      border: calc(${strokeWidth} * 1px) solid transparent;
-      border-radius: calc(${controlCornerRadius} * 1px);
-      height: calc((${heightNumber} + 1) * 1px);
-    }
-
-    :host(:${focusVisible}) .positioning-region {
-      ${focusTreatmentBase}
-    }
-
-    .positioning-region::before {
-      content: '';
-      display: block;
-      width: var(--tree-item-nested-width);
-      flex-shrink: 0;
-    }
-
-    :host(:not([disabled])) .positioning-region:hover {
-      background: ${neutralFillStealthHover};
-    }
-
-    :host(:not([disabled])) .positioning-region:active {
-      background: ${neutralFillStealthActive};
-    }
-
-    .content-region {
-      display: inline-flex;
-      align-items: center;
-      white-space: nowrap;
-      width: 100%;
-      height: calc(${heightNumber} * 1px);
-      margin-inline-start: calc(${designUnit} * 2px + 8px);
-      ${typeRampBase}
-    }
-
-    .items {
-      display: none;
-      ${
-/* Font size should be based off calc(1em + (design-unit + glyph-size-number) * 1px) -
-    update when density story is figured out */ ''} font-size: calc(1em + (${designUnit} + 16) * 1px);
-    }
-
-    .expand-collapse-button {
-      background: none;
-      border: none;
-      border-radius: calc(${controlCornerRadius} * 1px);
-      ${
-/* Width and Height should be based off calc(glyph-size-number + (design-unit * 4) * 1px) -
-    update when density story is figured out */ ''} width: calc((${expandCollapseButtonSize} + (${designUnit} * 2)) * 1px);
-      height: calc((${expandCollapseButtonSize} + (${designUnit} * 2)) * 1px);
-      padding: 0;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      cursor: pointer;
-      margin: 0 6px;
-    }
-
-    .expand-collapse-button svg {
-      transition: transform 0.1s linear;
-      pointer-events: none;
-    }
-
-    .start,
-    .end {
-      display: flex;
-    }
-
-    .start {
-      ${
-/* need to swap out once we understand how horizontalSpacing will work */ ''} margin-inline-end: calc(${designUnit} * 2px + 2px);
-    }
-
-    .end {
-      ${
-/* need to swap out once we understand how horizontalSpacing will work */ ''} margin-inline-start: calc(${designUnit} * 2px + 2px);
-    }
-
-    :host(.expanded) > .items {
-      display: block;
-    }
-
-    :host([disabled]) {
-      opacity: ${disabledOpacity};
-      cursor: ${disabledCursor};
-    }
-
-    :host(.nested) .content-region {
-      position: relative;
-      margin-inline-start: var(--expand-collapse-button-size);
-    }
-
-    :host(.nested) .expand-collapse-button {
-      position: absolute;
-    }
-
-    :host(.nested) .expand-collapse-button:hover {
-      background: ${expandCollapseHover};
-    }
-
-    :host(:not([disabled])[selected]) .positioning-region {
-      background: ${neutralFillSecondaryRest};
-    }
-
-    :host(:not([disabled])[selected]) .expand-collapse-button:hover {
-      background: ${selectedExpandCollapseHover};
-    }
-
-    :host([selected])::after {
-      content: '';
-      display: block;
-      position: absolute;
-      top: calc((${heightNumber} / 4) * 1px);
-      width: 3px;
-      height: calc((${heightNumber} / 2) * 1px);
-      ${
-/* The french fry background needs to be calculated based on the selected background state for this control.
-    We currently have no way of changing that, so setting to accent-foreground-rest for the time being */ ''} background: ${accentFillRest};
-      border-radius: calc(${controlCornerRadius} * 1px);
-    }
-
-    ::slotted(fluent-tree-item) {
-      --tree-item-nested-width: 1em;
-      --expand-collapse-button-nested-width: calc(${heightNumber} * -1px);
-    }
-  `.withBehaviors(new DirectionalStyleSheetBehavior(ltr, rtl), forcedColorsStylesheetBehavior(css `
-        :host {
-          color: ${SystemColors.ButtonText};
-        }
-        .positioning-region {
-          border-color: ${SystemColors.ButtonFace};
-          background: ${SystemColors.ButtonFace};
-        }
-        :host(:not([disabled])) .positioning-region:hover,
-        :host(:not([disabled])) .positioning-region:active,
-        :host(:not([disabled])[selected]) .positioning-region {
-          background: ${SystemColors.Highlight};
-        }
-        :host .positioning-region:hover .content-region,
-        :host([selected]) .positioning-region .content-region {
-          forced-color-adjust: none;
-          color: ${SystemColors.HighlightText};
-        }
-        :host([disabled][selected]) .positioning-region .content-region {
-          color: ${SystemColors.GrayText};
-        }
-        :host([selected])::after {
-          background: ${SystemColors.HighlightText};
-        }
-        :host(:${focusVisible}) .positioning-region {
-          forced-color-adjust: none;
-          outline-color: ${SystemColors.ButtonFace};
-        }
-        :host([disabled]),
-        :host([disabled]) .content-region,
-        :host([disabled]) .positioning-region:hover .content-region {
-          opacity: 1;
-          color: ${SystemColors.GrayText};
-        }
-        :host(.nested) .expand-collapse-button:hover,
-        :host(:not([disabled])[selected]) .expand-collapse-button:hover {
-          background: ${SystemColors.ButtonFace};
-          fill: ${SystemColors.ButtonText};
-        }
-      `));

package/dist/esm/tree-item/tree-item.vscode.definition.json

@@ -1,63 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-tree-item",
-            "title": "Tree item",
-            "description": "The Fluent UI tree item element",
-            "attributes": [
-                {
-                    "name": "expanded",
-                    "title": "Expanded",
-                    "description": "Whether tree item is expanded or not",
-                    "default": false,
-                    "required": false,
-                    "type": "boolean"
-                },
-                {
-                    "name": "selected",
-                    "title": "Selected",
-                    "description": "Whether tree item is selected or not",
-                    "default": false,
-                    "required": false,
-                    "type": "boolean"
-                },
-                {
-                    "name": "disabled",
-                    "title": "Disabled",
-                    "description": "Sets the disabled state of the tree item",
-                    "type": "boolean",
-                    "default": false,
-                    "required": false
-                }
-            ],
-            "slots": [
-                {
-                    "name": "",
-                    "title": "Default slot",
-                    "description": "The visual label of the tree item"
-                },
-                {
-                    "name": "item",
-                    "title": "Item slot",
-                    "description": "Nested fluent-tree-item elements automatically apply a slot of item for an intuitive API"
-                },
-                {
-                    "name": "expand-collapse-glyph",
-                    "title": "Expand collapse glyph slot",
-                    "description": "Slot to provide a custom visual to represent the expanded and collapsed states"
-                },
-                {
-                    "name": "start",
-                    "title": "Start slot",
-                    "description": "Contents of the start slot are positioned after the expand/collapse glyph and before the item content"
-                },
-                {
-                    "name": "end",
-                    "title": "End slot",
-                    "description": "Contents of the end slot are positioned after the item content"
-                }
-            ]
-        }
-    ]
-}

package/dist/esm/tree-view/index.js

@@ -1,27 +0,0 @@
-import { treeViewTemplate as template, TreeView } from '@microsoft/fast-foundation';
-import { treeViewStyles as styles } from './tree-view.styles';
-/**
- * The Fluent tree view Custom Element. Implements, {@link @microsoft/fast-foundation#TreeView}
- * {@link @microsoft/fast-foundation#treeViewTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-tree-view\>
- *
- */
-export const fluentTreeView = TreeView.compose({
-    baseName: 'tree-view',
-    template,
-    styles,
-});
-/**
- * Styles for TreeView
- * @public
- */
-export const treeViewStyles = styles;
-/**
- * Tree View base class
- * @public
- */
-export { TreeView };

package/dist/esm/tree-view/tree-view.stories.js

@@ -1,99 +0,0 @@
-import { fluentTreeView } from './index';
-export default {
-    title: 'Components/Tree View',
-    component: fluentTreeView,
-    argTypes: {
-        renderCollapsedNodes: {
-            control: { type: 'boolean' },
-        },
-    },
-};
-const TreeViewTemplate = ({ renderCollapsedNodes }) => `
-<style>
-div.docs-story>div:first-child {
-  height: 26em !important;
-}
-</style>
-<fluent-tree-view
-  ${renderCollapsedNodes ? `render-collapsed-nodes="${renderCollapsedNodes}` : ''}
-">
-  <fluent-tree-item>
-    Root item 1
-    <fluent-tree-item>
-      Root item 1
-      <fluent-tree-item>
-        Flowers
-        <fluent-tree-item disabled>Daisy</fluent-tree-item>
-        <fluent-tree-item>
-          Sunflower
-          <svg slot="start" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="M12 5.5a1 1 0 100 2 1 1 0 000-2zm-5 1a1 1 0 112 0 1 1 0 01-2 0zm3.5-4a.5.5 0 00-1 0V3h-3C5.67 3 5 3.67 5 4.5v4c0 .83.67 1.5 1.5 1.5h7c.83 0 1.5-.67 1.5-1.5v-4c0-.83-.67-1.5-1.5-1.5h-3v-.5zM6.5 4h7c.28 0 .5.22.5.5v4a.5.5 0 01-.5.5h-7a.5.5 0 01-.5-.5v-4c0-.28.22-.5.5-.5zm3.75 14c2.62-.04 4.2-.6 5.12-1.44A3.52 3.52 0 0016.5 14h.01v-.69c0-1-.81-1.8-1.8-1.8h-3.2v-.01H5.3c-.99 0-1.8.81-1.8 1.81v.7c.04.77.25 1.75 1.13 2.55.93.84 2.5 1.4 5.12 1.44h.5zm-4.94-5.5h9.38c.45 0 .81.37.81.81v.44c0 .69-.13 1.46-.8 2.07C14 16.45 12.66 17 10 17s-4.01-.55-4.7-1.18a2.63 2.63 0 01-.8-2.07v-.44c0-.44.36-.8.8-.8z"
-            />
-          </svg>
-          <svg slot="end" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="M12 5.5a1 1 0 100 2 1 1 0 000-2zm-5 1a1 1 0 112 0 1 1 0 01-2 0zm3.5-4a.5.5 0 00-1 0V3h-3C5.67 3 5 3.67 5 4.5v4c0 .83.67 1.5 1.5 1.5h7c.83 0 1.5-.67 1.5-1.5v-4c0-.83-.67-1.5-1.5-1.5h-3v-.5zM6.5 4h7c.28 0 .5.22.5.5v4a.5.5 0 01-.5.5h-7a.5.5 0 01-.5-.5v-4c0-.28.22-.5.5-.5zm3.75 14c2.62-.04 4.2-.6 5.12-1.44A3.52 3.52 0 0016.5 14h.01v-.69c0-1-.81-1.8-1.8-1.8h-3.2v-.01H5.3c-.99 0-1.8.81-1.8 1.81v.7c.04.77.25 1.75 1.13 2.55.93.84 2.5 1.4 5.12 1.44h.5zm-4.94-5.5h9.38c.45 0 .81.37.81.81v.44c0 .69-.13 1.46-.8 2.07C14 16.45 12.66 17 10 17s-4.01-.55-4.7-1.18a2.63 2.63 0 01-.8-2.07v-.44c0-.44.36-.8.8-.8z"
-            />
-          </svg>
-        </fluent-tree-item>
-        <fluent-tree-item>Rose</fluent-tree-item>
-      </fluent-tree-item>
-      <fluent-tree-item>Nested item 2</fluent-tree-item>
-      <fluent-tree-item>Nested item 3</fluent-tree-item>
-    </fluent-tree-item>
-    <fluent-tree-item>Nested item 2</fluent-tree-item>
-    <fluent-tree-item>Nested item 3</fluent-tree-item>
-  </fluent-tree-item>
-  <fluent-tree-item>
-    Root item 2
-    <fluent-divider></fluent-divider>
-    <fluent-tree-item>
-      Flowers
-      <fluent-tree-item disabled>Daisy</fluent-tree-item>
-      <fluent-tree-item>Sunflower</fluent-tree-item>
-      <fluent-tree-item>Rose</fluent-tree-item>
-    </fluent-tree-item>
-    <fluent-tree-item>Nested item 2</fluent-tree-item>
-    <fluent-tree-item>Nested item 3</fluent-tree-item>
-  </fluent-tree-item>
-  <fluent-tree-item> Root item 3 - Leaf Erikson </fluent-tree-item>
-</fluent-tree-view>`;
-export const TreeView = TreeViewTemplate.bind({});
-TreeView.args = {
-    renderCollapsedNodes: false,
-};
-const example = `
-<fluent-tree-view>
-  <fluent-tree-item>
-    Root item 1
-    <fluent-tree-item>
-      Flowers
-      <fluent-tree-item disabled>Daisy</fluent-tree-item>
-      <fluent-tree-item>Sunflower</fluent-tree-item>
-      <fluent-tree-item>Rose</fluent-tree-item>
-    </fluent-tree-item>
-    <fluent-tree-item>Nested item 2</fluent-tree-item>
-    <fluent-tree-item>Nested item 3</fluent-tree-item>
-  </fluent-tree-item>
-  <fluent-tree-item>
-    Root item 2
-    <fluent-divider></fluent-divider>
-    <fluent-tree-item>
-      Flowers
-      <fluent-tree-item disabled>Daisy</fluent-tree-item>
-      <fluent-tree-item>Sunflower</fluent-tree-item>
-      <fluent-tree-item>Rose</fluent-tree-item>
-    </fluent-tree-item>
-    <fluent-tree-item>Nested item 2</fluent-tree-item>
-    <fluent-tree-item>Nested item 3</fluent-tree-item>
-  </fluent-tree-item>
-  <fluent-tree-item> Root item 3 - Leaf Erikson </fluent-tree-item>
-</fluent-tree-view>`;
-TreeView.parameters = {
-    docs: {
-        source: {
-            code: example,
-        },
-    },
-};

package/dist/esm/tree-view/tree-view.styles.js

@@ -1,14 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
-export const treeViewStyles = (context, definition) => css `
-  :host([hidden]) {
-    display: none;
-  }
-
-  ${display('flex')} :host {
-    flex-direction: column;
-    align-items: stretch;
-    min-width: fit-content;
-    font-size: 0;
-  }
-`;

package/dist/esm/tree-view/tree-view.vscode.definition.json

@@ -1,26 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-tree-view",
-            "title": "Tree view",
-            "description": "The Fluent UI tree view element",
-            "attributes": [
-                {
-                    "name": "render-collapsed-nodes",
-                    "title": "Render collapsed nodes",
-                    "description": "Determines whether the tree should render nodes under collapsed items",
-                    "type": "boolean",
-                    "required": false
-                }
-            ],
-            "slots": [
-                {
-                    "name": "",
-                    "title": "Default slot",
-                    "description": "Supports fluent-tree-item elements or elements with a role of 'treeitem'"
-                }
-            ]
-        }
-    ]
-}