@genesislcap/rapid-design-system 14.127.2

package/dist/esm/tabs/tabs.styles.js

@@ -0,0 +1,79 @@
+import { foundationTabsStyles } from '@genesislcap/foundation-ui';
+import { density, designUnit, neutralLayer3 } from '@microsoft/fast-components';
+import { css } from '@microsoft/fast-element';
+export const rapidTabsStyles = (context, definition) => css `
+  ${foundationTabsStyles(context, definition)}
+  :host {
+    --base-height-multiplier: 9;
+
+    /* UX team wants this color
+      --neutral-fill-rest: #1f282d;
+      */
+  }
+
+  :host .tablist {
+    padding: 0;
+    display: grid;
+    border-bottom: calc(var(--stroke-width) * 1px) solid ${neutralLayer3};
+    width: max-content;
+  }
+
+  :host .end,
+  :host .start {
+    padding: 0 calc((16 + ${designUnit} * 2 * ${density}) * 1px);
+    height: calc(100% - 1px);
+    display: flex;
+    align-items: center;
+    background-color: var(--neutral-layer-3);
+  }
+
+  ::slotted([slot='tab']:hover) {
+    color: var(--neutral-foreground-rest);
+    background: var(--neutral-layer-1);
+  }
+
+  ::slotted([role='tab']) {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    background: var(--neutral-layer-3);
+    /* stylelint-disable color-function-notation */
+    box-shadow: 0 0 15px rgba(0, 0, 0, 35%);
+    padding: 0 calc((16 + ${designUnit} * 2 * ${density}) * 1px);
+    margin-right: calc((var(--design-unit) -1) * 1px);
+  }
+
+  ::slotted([role='tab'][aria-selected='true']) {
+    color: var(--accent-foreground-rest);
+    background: var(--neutral-layer-4);
+  }
+
+  /* stylelint-disable selector-class-pattern */
+  .activeIndicator {
+    display: none;
+  }
+
+  :host([appearance='secondary']) .tablist .activeIndicator {
+    display: block;
+    height: 1px;
+    margin-top: unset;
+  }
+
+  ::slotted([role='tab'][aria-selected='true'][appearance='secondary']) {
+    background: none;
+  }
+
+  ::slotted([role='tab'][appearance='secondary']) {
+    margin-left: 0;
+    box-shadow: none;
+    background: none;
+  }
+
+  :host([appearance='secondary']:hover) {
+    color: var(--neutral-foreground-rest);
+    background: none;
+  }
+
+  :host([orientation='horizontal']) ::slotted([role='tabpanel'][slot='tabpanel']) {
+    padding: 0 calc((3 + (var(--design-unit) * 2 * var(--density))) * 1px);
+  }
+`;

package/dist/esm/tabs/tabs.template.js

@@ -0,0 +1,2 @@
+import { foundationTabsTemplate } from '@genesislcap/foundation-ui';
+export const rapidTabsTemplate = (context, definition) => foundationTabsTemplate(context, definition);

package/dist/esm/text-area/index.js

@@ -0,0 +1,3 @@
+export * from './text-area';
+export * from './text-area.styles';
+export * from './text-area.template';

package/dist/esm/text-area/text-area.js

@@ -0,0 +1,10 @@
+import { defaultTextAreaConfig, foundationTextAreaShadowOptions, TextArea as FoundationTextArea, } from '@genesislcap/foundation-ui';
+import { rapidTextAreaStyles as styles } from './text-area.styles';
+import { rapidTextAreaTemplate as template } from './text-area.template';
+/**
+ * @tagname %%prefix%%-text-area
+ */
+export class TextArea extends FoundationTextArea {
+}
+export const rapidTextArea = TextArea.compose(Object.assign({ baseName: 'text-area', template,
+    styles, shadowOptions: foundationTextAreaShadowOptions }, defaultTextAreaConfig));

package/dist/esm/text-area/text-area.stories.js

@@ -0,0 +1,33 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Text Area',
+    component: 'rapid-text-area',
+};
+export default meta;
+export const DEfault = {
+    args: {
+        value: 'some sample text',
+        placeholder: 'Enter text...',
+        label: 'Text Area',
+        disabled: false,
+        resize: 'both',
+    },
+    argTypes: {
+        resize: {
+            control: 'select',
+            options: ['both', 'vertical', 'horizontal', 'none'],
+        },
+    },
+    render: ({ placeholder, label, value, resize, disabled }) => html `
+    <div style="height: 200px;">
+      <rapid-text-area
+        resize="${resize}"
+        placeholder="${placeholder}"
+        value="${value}"
+        .disabled="${disabled}"
+      >
+        ${label}
+      </rapid-text-area>
+    </div>
+  `,
+};

package/dist/esm/text-area/text-area.styles.js

@@ -0,0 +1,29 @@
+import { foundationTextAreaStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidTextAreaStyles = (context, definition) => css `
+  ${foundationTextAreaStyles(context, definition)}
+
+  :host .control {
+    height: 100%;
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);
+    background-color: color-mix(in srgb, var(--neutral-fill-input-rest), transparent 94%);
+    border-radius: calc(var(--control-corner-radius) * 1px);
+  }
+
+  :host(:hover:not([disabled])) .control {
+    border-color: var(--neutral-stroke-hover);
+    background: none;
+  }
+
+  :host(:focus-within:not([disabled])) .control {
+    background-color: var(--neutral-layer-4);
+    border: 1px solid var(--accent-fill-rest);
+    box-shadow: none;
+  }
+
+  .label {
+    color: var(--neutral-foreground-hint);
+    font-weight: 700;
+    margin: calc(var(--design-unit) * 2px) 0;
+  }
+`;

package/dist/esm/text-area/text-area.template.js

@@ -0,0 +1,2 @@
+import { foundationTextAreaTemplate } from '@genesislcap/foundation-ui';
+export const rapidTextAreaTemplate = (context, definition) => foundationTextAreaTemplate(context, definition);

package/dist/esm/text-field/index.js

@@ -0,0 +1,3 @@
+export * from './text-field';
+export * from './text-field.styles';
+export * from './text-field.template';

package/dist/esm/text-field/text-field.js

@@ -0,0 +1,10 @@
+import { defaultTextFieldConfig, foundationTextFieldShadowOptions, TextField as FoundationTextField, } from '@genesislcap/foundation-ui';
+import { rapidTextFieldStyles as styles } from './text-field.styles';
+import { rapidTextFieldTemplate as template } from './text-field.template';
+/**
+ * @tagname %%prefix%%-text-field
+ */
+export class TextField extends FoundationTextField {
+}
+export const rapidTextField = TextField.compose(Object.assign({ baseName: 'text-field', template,
+    styles, shadowOptions: foundationTextFieldShadowOptions }, defaultTextFieldConfig));

package/dist/esm/text-field/text-field.stories.js

@@ -0,0 +1,32 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Text Field',
+    component: 'rapid-text-field',
+};
+export default meta;
+const wrapperStyle = 'display: flex; flex-direction: column;';
+export const Default = {
+    args: {
+        value: 'some sample text',
+        placeholder: 'Enter text...',
+        label: 'Text Field',
+        disabled: false,
+    },
+    render: ({ placeholder, label, value, resize, disabled }) => html `
+    <div style="${wrapperStyle}">
+      <rapid-text-field placeholder="${placeholder}" value="${value}" .disabled="${disabled}">
+        ${label}
+      </rapid-text-field>
+    </div>
+  `,
+};
+export const DateTime = {
+    render: () => html `
+    <div style="${wrapperStyle}">
+      <rapid-text-field type="datetime-local">Datetime local type</rapid-text-field>
+      <rapid-text-field type="datetime-local" step=".001">
+        Datetime local with step attr
+      </rapid-text-field>
+    </div>
+  `,
+};

package/dist/esm/text-field/text-field.styles.js

@@ -0,0 +1,41 @@
+import { foundationTextFieldStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidTextFieldStyles = (context, definition) => css `
+  ${foundationTextFieldStyles(context, definition)}
+
+  :host {
+    margin-bottom: calc(var(--design-unit) * 2px);
+  }
+
+  :host .control {
+    height: 100%;
+    border-radius: calc(var(--control-corner-radius) * 1px);
+    padding: 0 calc(var(--design-unit) * 2px);
+  }
+
+  :host .root {
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);
+    background-color: color-mix(in srgb, var(--neutral-fill-input-rest), transparent 94%);
+    height: calc(
+      (((var(--base-height-multiplier) + var(--density)) * var(--design-unit)) - 4) * 1px
+    );
+  }
+
+  :host(:hover:not([disabled])) .root {
+    border-color: var(--neutral-stroke-hover);
+    background: none;
+  }
+
+  :host(:focus-within:not([disabled])) .root {
+    background-color: var(--neutral-layer-4);
+    border: 1px solid var(--accent-fill-rest);
+    box-shadow: none;
+  }
+
+  .label {
+    color: var(--neutral-foreground-hint);
+    font-weight: 700;
+    margin: calc(var(--design-unit) * 2px) 0;
+  }
+`;
+// TODO: Add styles for help text and error text and also end slot icons

package/dist/esm/text-field/text-field.template.js

@@ -0,0 +1,2 @@
+import { foundationTextFieldTemplate } from '@genesislcap/foundation-ui';
+export const rapidTextFieldTemplate = (context, definition) => foundationTextFieldTemplate(context, definition);

package/dist/esm/toast/index.js

@@ -0,0 +1,3 @@
+export * from './toast.styles';
+export * from './toast';
+export { foundationToastTemplate as rapidToastTemplate } from '@genesislcap/foundation-ui';

package/dist/esm/toast/toast.js

@@ -0,0 +1,17 @@
+import { foundationToastTemplate as rapidToastTemplate, foundationToastShadowOptions, defaultToastConfig as foundationConfig, Toast as FoundationToast, } from '@genesislcap/foundation-ui';
+import { rapidToastStyles } from './toast.styles';
+export const defaultToastConfig = foundationConfig;
+export const rapidToastShadowOptions = foundationToastShadowOptions;
+/**
+ * @tagname %%prefix%%-toast
+ */
+export class Toast extends FoundationToast {
+}
+/**
+ * The rapid Toast
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<rapid-toast\>
+ */
+export const rapidToast = Toast.compose(Object.assign({ baseName: 'toast', shadowOptions: rapidToastShadowOptions, styles: rapidToastStyles, template: rapidToastTemplate }, defaultToastConfig));

package/dist/esm/toast/toast.stories.js

@@ -0,0 +1,59 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Toast',
+    component: 'rapid-toast',
+};
+export default meta;
+export const Default = {
+    args: {
+        notify: 'warning',
+    },
+    argTypes: {
+        notify: {
+            control: 'select',
+            options: ['warning', 'success', 'critical', 'primary', 'serious'],
+        },
+    },
+    render: ({ notify }) => html `
+    <div style="position: absolute; right: 0; top: 0; display: flex; flex-direction: column;">
+      <rapid-toast notify="${notify}">
+        <span slot="top">Toast title</span>
+        <span slot="content">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet.
+          Lorem, ipsum dolor.
+        </span>
+        <span slot="date">Today 14:28</span>
+      </rapid-toast>
+    </div>
+  `,
+};
+export const Examples = {
+    render: () => html `
+    <div style="position: absolute; right: 0; top: 0; display: flex; flex-direction: column">
+      <rapid-toast notify="warning">
+        <span slot="top">Toast title</span>
+        <span slot="content">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet.
+          Lorem, ipsum dolor.
+        </span>
+        <span slot="date">Today 14:28</span>
+      </rapid-toast>
+      <rapid-toast notify="success">
+        <span slot="top">Toast title</span>
+        <span slot="date">Today 14:28</span>
+      </rapid-toast>
+      <rapid-toast notify="critical">
+        <span slot="top">Toast title</span>
+      </rapid-toast>
+      <rapid-toast>
+        <span slot="top">Toast title</span>
+        <span slot="content">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet.
+          Lorem, ipsum dolor.
+        </span>
+        <span slot="date">Today 14:28</span>
+        <rapid-button appearance="primary-gradient" slot="bottom">Close notification</rapid-button>
+      </rapid-toast>
+    </div>
+  `,
+};

package/dist/esm/toast/toast.styles.js

@@ -0,0 +1,60 @@
+import { foundationToastStyles } from '@genesislcap/foundation-ui';
+import { neutralLayer1 } from '@microsoft/fast-components';
+import { css } from '@microsoft/fast-element';
+// See https://www.fast.design/docs/fast-element/leveraging-css/, https://www.fast.design/docs/design-systems/fast-frame
+export const rapidToastStyles = css `
+  ${foundationToastStyles}
+  .toast {
+    background-color: ${neutralLayer1};
+    border-radius: calc(var(--control-corner-radius) * 2px) calc(var(--control-corner-radius) * 2px);
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);
+  }
+
+  .top {
+    align-items: flex-start;
+  }
+
+  :host {
+    font-size: var(--type-ramp-base-font-size);
+    font-family: var(--body-font);
+    line-height: var(--type-ramp-base-line-height);
+    color: var(--neutral-foreground-rest);
+  }
+
+  .content {
+    font-size: var(--type-ramp-minus-1-font-size);
+  }
+
+  .date {
+    margin: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 0)
+      calc(var(--design-unit) * 1px);
+  }
+
+  .content-wrapper {
+    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 1px)
+      calc(var(--design-unit) * 1px) calc(var(--design-unit) * 2px);
+  }
+
+  .toast::after {
+    background-color: var(--accent-fill-rest);
+    border-radius: 0;
+    height: calc(100% - calc(var(--design-unit) * 5px));
+    margin: calc(var(--design-unit) * 0) calc(var(--design-unit) * 1px);
+  }
+
+  :host([notify='warning']) .toast::after {
+    background-color: var(--warning-color);
+  }
+
+  :host([notify='success']) .toast::after {
+    background-color: var(--success-color);
+  }
+
+  :host([notify='critical']) .toast::after {
+    background-color: var(--error-color);
+  }
+
+  :host([notify='serious']) .toast::after {
+    background-color: var(--error-color);
+  }
+`;

package/dist/esm/toolbar/index.js

@@ -0,0 +1,3 @@
+export * from './toolbar';
+export * from './toolbar.styles';
+export * from './toolbar.template';

package/dist/esm/toolbar/toolbar.js

@@ -0,0 +1,10 @@
+import { defaultToolbarConfig, foundationToolbarShadowOptions, Toolbar as FoundationToolbar, } from '@genesislcap/foundation-ui';
+import { rapidToolbarStyles as styles } from './toolbar.styles';
+import { rapidToolbarTemplate as template } from './toolbar.template';
+/**
+ * @tagname %%prefix%%-toolbar
+ */
+export class Toolbar extends FoundationToolbar {
+}
+export const rapidToolbar = Toolbar.compose(Object.assign({ baseName: 'toolbar', template,
+    styles, shadowOptions: foundationToolbarShadowOptions }, defaultToolbarConfig));

package/dist/esm/toolbar/toolbar.stories.js

@@ -0,0 +1,30 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Toolbar',
+    component: 'rapid-toolbar',
+};
+export default meta;
+export const Primary = {
+    render: () => html `
+    <rapid-toolbar>
+      <rapid-button slot="start">
+        <rapid-icon name="home" slot="start"></rapid-icon>
+        Home
+      </rapid-button>
+      <rapid-checkbox>Checkbox</rapid-checkbox>
+      <rapid-checkbox>Checkbox</rapid-checkbox>
+      <rapid-button>Rapid Button 1</rapid-button>
+      <rapid-button>Rapid Button 2</rapid-button>
+      <rapid-button>Rapid Button 3</rapid-button>
+      <rapid-button slot="end">
+        <rapid-icon name="power-off" slot="start"></rapid-icon>
+        Sign Out
+      </rapid-button>
+      <rapid-select>
+        <rapid-option value="1">Rapid Option 1</rapid-option>
+        <rapid-option value="2">Rapid Option 2</rapid-option>
+        <rapid-option value="3">Rapid Option 3</rapid-option>
+      </rapid-select>
+    </rapid-toolbar>
+  `,
+};

package/dist/esm/toolbar/toolbar.styles.js

@@ -0,0 +1,13 @@
+import { foundationToolbarStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidToolbarStyles = (context, definition) => css `
+  ${foundationToolbarStyles(context, definition)}
+  :host {
+    align-items: center;
+    color: var(--neutral-foreground-rest);
+  }
+
+  .positioning-region {
+    align-items: center;
+  }
+`;

package/dist/esm/toolbar/toolbar.template.js

@@ -0,0 +1,2 @@
+import { foundationToolbarTemplate } from '@genesislcap/foundation-ui';
+export const rapidToolbarTemplate = (context, definition) => foundationToolbarTemplate(context, definition);

package/dist/esm/tooltip/index.js

@@ -0,0 +1 @@
+export * from './tooltip';

package/dist/esm/tooltip/tooltip.js

@@ -0,0 +1,7 @@
+import { Tooltip as foundationTooltip, foundationTooltipShadowOptions, defaultTooltipConfig, } from '@genesislcap/foundation-ui';
+import { rapidTooltipStyles as styles } from './tooltip.styles';
+import { rapidTooltipTemplate as template } from './tooltip.template';
+export class Tooltip extends foundationTooltip {
+}
+export const rapidTooltip = Tooltip.compose(Object.assign({ baseName: 'tooltip', template,
+    styles, shadowOptions: foundationTooltipShadowOptions }, defaultTooltipConfig));

package/dist/esm/tooltip/tooltip.stories.js

@@ -0,0 +1,22 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Tooltip',
+    component: 'rapid-tooltip',
+};
+export default meta;
+export const Primary = {
+    render: () => html `
+    <rapid-button id="rapid-btn-tooltip-anchor">Hover me</rapid-button>
+    <rapid-tooltip anchor="rapid-btn-tooltip-anchor">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.
+      Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar
+      tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+      Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien
+      nunc eget odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod
+      bibendum laoreet.
+    </rapid-tooltip>
+
+    <rapid-badge id="rapid-badge-tooltip-anchor">And me too!</rapid-badge>
+    <rapid-tooltip anchor="rapid-badge-tooltip-anchor">Heyyy</rapid-tooltip>
+  `,
+};

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

@@ -0,0 +1,26 @@
+import { foundationTooltipStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidTooltipStyles = (context, definition) => css `
+  ${foundationTooltipStyles(context, definition)}
+
+  :host {
+    visibility: visible;
+  }
+
+  .tooltip {
+    padding: calc((var(--design-unit) - 1) * 2px) calc(var(--design-unit) * 2px);
+    text-align: center;
+    white-space: inherit;
+    font-weight: 400;
+  }
+
+  alpha-anchored-region.bottom .tooltip {
+    margin-top: calc(var(--design-unit) * 1px);
+    margin-left: calc(var(--design-unit) * 2px);
+  }
+
+  alpha-anchored-region.top.right .tooltip,
+  alpha-anchored-region.bottom.right .tooltip {
+    margin-left: 0;
+  }
+`;

package/dist/esm/tooltip/tooltip.template.js

@@ -0,0 +1,2 @@
+import { foundationTooltipTemplate } from '@genesislcap/foundation-ui';
+export const rapidTooltipTemplate = (context, definition) => foundationTooltipTemplate(context, definition);

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

@@ -0,0 +1,3 @@
+export * from './tree-item.template';
+export * from './tree-item.styles';
+export * from './tree-item';

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

@@ -0,0 +1,16 @@
+import { foundationTreeItemShadowOptions, TreeItem as FoundationTreeItem, } from '@genesislcap/foundation-ui';
+import { rapidTreeItemStyles as styles } from './tree-item.styles';
+import { rapidTreeItemTemplate as template } from './tree-item.template';
+/**
+ * @tagname %%prefix%%-tree-item
+ */
+export class TreeItem extends FoundationTreeItem {
+}
+export const defaultRapidTreeItemConfig = {
+    expandCollapseGlyph: `
+  <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="expand-collapse-glyph">
+  <path d="M4.023 15.273L11.29 8 4.023.727l.704-.704L12.71 8l-7.984 7.977-.704-.704z"/>
+  </svg>`,
+};
+export const rapidTreeItem = TreeItem.compose(Object.assign({ baseName: 'tree-item', template,
+    styles, shadowOptions: foundationTreeItemShadowOptions }, defaultRapidTreeItemConfig));

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

@@ -0,0 +1,42 @@
+import { foundationTreeItemStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidTreeItemStyles = (context, definition) => css `
+  ${foundationTreeItemStyles(context, definition)}
+  :host {
+    font-size: var(--type-ramp-base-font-size);
+    color: var(--neutral-foreground-rest);
+    background-color: transparent;
+  }
+
+  :host(.nested) .expand-collapse-button {
+    background: var(--neutral-fill-rest);
+    border-radius: calc(var(--control-corner-radius) * 1px);
+    width: calc(var(--design-unit) * 5px);
+    height: calc(var(--design-unit) * 5px);
+    margin-left: calc(var(--design-unit) * 2px);
+  }
+
+  :host([selected]) .positioning-region {
+    background: var(--neutral-fill-stealth-active);
+  }
+
+  .positioning-region::before {
+    width: calc(var(--design-unit) * 1px);
+  }
+
+  :host([selected])::after {
+    background: var(--accent-fill-rest);
+    background-origin: border-box;
+    background-size: cover;
+    background-repeat: no-repeat;
+  }
+
+  :host([slot='item']) .content-region {
+    margin-inline-start: calc(var(--design-unit) * 4px + var(--expand-collapse-button-size));
+  }
+
+  .expand-collapse-glyph {
+    width: calc(var(--design-unit) * 3px);
+    height: calc(var(--design-unit) * 3px);
+  }
+`;

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

@@ -0,0 +1,2 @@
+import { foundationTreeItemTemplate as foundationTreeItemTemplate } from '@genesislcap/foundation-ui';
+export const rapidTreeItemTemplate = (context, definition) => foundationTreeItemTemplate(context, definition);

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

@@ -0,0 +1,3 @@
+export * from './tree-view.template';
+export * from './tree-view.styles';
+export * from './tree-view';

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

@@ -0,0 +1,10 @@
+import { defaultTreeViewConfig, foundationTreeViewShadowOptions, TreeView as FoundationTreeView, } from '@genesislcap/foundation-ui';
+import { rapidTreeViewStyles as styles } from './tree-view.styles';
+import { rapidTreeViewTemplate as template } from './tree-view.template';
+/**
+ * @tagname %%prefix%%-tree-view
+ */
+export class TreeView extends FoundationTreeView {
+}
+export const rapidTreeView = TreeView.compose(Object.assign({ baseName: 'tree-view', template,
+    styles, shadowOptions: foundationTreeViewShadowOptions }, defaultTreeViewConfig));

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

@@ -0,0 +1,19 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Tree View',
+    component: 'rapid-tree-view',
+};
+export default meta;
+export const Primary = {
+    render: () => html `
+    <rapid-tree-view style="width: 200px;">
+      <rapid-tree-item>
+        Tree item 1
+        <rapid-tree-item>Sub Tree Item 1</rapid-tree-item>
+        <rapid-tree-item>Sub Tree Item 2</rapid-tree-item>
+        <rapid-tree-item>Sub Tree Item 3</rapid-tree-item>
+      </rapid-tree-item>
+      <rapid-tree-item>Tree item 2</rapid-tree-item>
+    </rapid-tree-view>
+  `,
+};

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

@@ -0,0 +1,5 @@
+import { foundationTreeViewStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidTreeViewStyles = (context, definition) => css `
+  ${foundationTreeViewStyles(context, definition)}
+`;

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

@@ -0,0 +1,2 @@
+import { foundationTreeViewTemplate as foundationTreeViewTemplate } from '@genesislcap/foundation-ui';
+export const rapidTreeViewTemplate = (context, definition) => foundationTreeViewTemplate(context, definition);