@genesislcap/rapid-design-system 14.127.2

package/dist/esm/checkbox/checkbox.js

@@ -0,0 +1,7 @@
+import { Checkbox as FoundationCheckbox, defaultCheckboxConfig, foundationCheckboxShadowOptions, } from '@genesislcap/foundation-ui';
+import { rapidCheckboxStyles as styles } from './checkbox.styles';
+import { rapidCheckboxTemplate as template } from './checkbox.template';
+export class Checkbox extends FoundationCheckbox {
+}
+export const rapidCheckbox = Checkbox.compose(Object.assign({ baseName: 'checkbox', template,
+    styles, shadowOptions: foundationCheckboxShadowOptions }, defaultCheckboxConfig));

package/dist/esm/checkbox/checkbox.stories.js

@@ -0,0 +1,15 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Checkbox',
+    component: 'rapid-checkbox>',
+};
+export default meta;
+const wrapperStyle = 'display: flex; flex-direction: column; justify-content: space-between; height: 200px';
+export const Primary = {
+    args: {},
+    render: () => html `
+    <div style="${wrapperStyle}">
+      <rapid-checkbox>Default Rapid Checkbox</rapid-checkbox>
+    </div>
+  `,
+};

package/dist/esm/checkbox/checkbox.styles.js

@@ -0,0 +1,19 @@
+import { foundationCheckboxStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidCheckboxStyles = (context, definition) => css `
+  ${foundationCheckboxStyles(context, definition)}
+  :host([aria-checked='true']:not([disabled])) .control:hover .checked-indicator {
+    fill: var(--neutral-foreground-rest);
+  }
+
+  .checked-indicator {
+    fill: var(--neutral-foreground-rest);
+    box-shadow: 2px 1000px 1px rgb(0 0 0 / 20%) inset;
+    border-radius: calc(var(--control-corner-radius) * 1px);
+  }
+
+  .label {
+    padding-inline-start: calc(var(--design-unit) * 2px);
+  }
+`;
+// fill was --foreground-on-accent-rest

package/dist/esm/checkbox/checkbox.template.js

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

package/dist/esm/checkbox/index.js

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

package/dist/esm/combobox/combobox.js

@@ -0,0 +1,10 @@
+import { Combobox as FoundationComboBox, defaultComboboxConfig, foundationComboboxShadowOptions, } from '@genesislcap/foundation-ui';
+import { rapidComboboxStyles as styles } from './combobox.styles';
+import { rapidComboboxTemplate as template } from './combobox.template';
+/**
+ * @tagname %%prefix%%-combobox
+ */
+export class Combobox extends FoundationComboBox {
+}
+export const rapidCombobox = Combobox.compose(Object.assign({ baseName: 'combobox', template,
+    styles, shadowOptions: foundationComboboxShadowOptions }, defaultComboboxConfig));

package/dist/esm/combobox/combobox.stories.js

@@ -0,0 +1,34 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Combobox',
+    component: 'rapid-combobox',
+};
+export default meta;
+const wrapperStyle = 'height: 500px; width: 100%; display: flex; justify-content: center; align-items: center;';
+const OptionsMapperTemplate = {
+    render: ({ options, position }) => html `
+    <div style="${wrapperStyle}">
+      <rapid-combobox position="${position}">
+        ${options.map((option) => html `
+            <rapid-option value="${option.value}">${option.text}</rapid-option>
+          `)}
+      </rapid-combobox>
+    </div>
+  `,
+};
+const optionsData = [
+    { text: 'Rapid Option 1', value: 1 },
+    { text: 'Rapid Option 2', value: 2 },
+    { text: 'Rapid Option 3', value: 3 },
+    { text: 'Rapid Option 4', value: 4 },
+    { text: 'Rapid Option 5', value: 5 },
+];
+export const Primary = Object.assign(Object.assign({}, OptionsMapperTemplate), { argTypes: {
+        position: {
+            control: 'select',
+            options: ['above', 'below'],
+        },
+    }, args: {
+        options: optionsData,
+        position: 'below',
+    } });

package/dist/esm/combobox/combobox.styles.js

@@ -0,0 +1,78 @@
+import { foundationComboboxStyles } from '@genesislcap/foundation-ui';
+import { designUnit } from '@microsoft/fast-components';
+import { css } from '@microsoft/fast-element';
+export const rapidComboboxStyles = (context, definition) => css `
+  ${foundationComboboxStyles(context, definition)}
+  :host {
+    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(:focus-within:not([disabled])) {
+    background-color: var(--neutral-layer-4);
+    border: 1px solid var(--accent-fill-rest);
+  }
+
+  :host(:hover:not([disabled]):not([open])) {
+    border-color: var(--neutral-stroke-hover);
+    background: none;
+  }
+
+  :host([open][position='below']) .listbox {
+    padding: 0;
+    margin-top: calc(${designUnit} * 1px);
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);
+    border-radius: calc(var(--control-corner-radius) * 1px);
+  }
+
+  :host .listbox ::slotted(*:last-child) {
+    border-bottom: none;
+  }
+
+  .control {
+    padding: 0 calc((var(--design-unit) - 1) * 1px) 0 calc(var(--design-unit) * 2px);
+  }
+
+  :host(:not([disabled])) .control:active {
+    background: none;
+  }
+
+  .indicator {
+    width: calc((var(--base-height-multiplier) * (var(--design-unit) - 1)) * 1px);
+    height: calc((var(--base-height-multiplier) * (var(--design-unit) - 1)) * 1px);
+    background-color: var(--neutral-fill-rest);
+    border-radius: calc(var(--control-corner-radius) * 1px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .combo-box-indicator {
+    width: 1em;
+    height: 1em;
+    transition: all 0.35s;
+  }
+
+  .selected-value {
+    height: calc(100% - (var(--design-unit) * 1px));
+    padding: 0;
+    margin: 0;
+  }
+
+  :host(:focus-within:not([disabled])) .indicator {
+    background-color: transparent;
+  }
+
+  :host([open]) .combo-box-indicator {
+    transition: all 0.35s;
+    transform: rotate(180deg);
+  }
+
+  ::slotted([role='option']) {
+    margin: 0;
+  }
+`;
+// TODO: check if combo-box-indicator(svg) size needs to be made configurable

package/dist/esm/combobox/combobox.template.js

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

package/dist/esm/combobox/index.js

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

package/dist/esm/connection-indicator/connection-indicator.js

@@ -0,0 +1,12 @@
+import { ConnectionIndicator as FoundationConnectionIndicator, foundationConnectionIndicatorTemplate as template, } from '@genesislcap/foundation-ui';
+import { rapidConnectionIndicatorStyles as styles } from './connection-indicator.styles';
+/**
+ * @tagname %%prefix%%-connection-indicator
+ */
+export class ConnectionIndicator extends FoundationConnectionIndicator {
+}
+export const rapidConnectionIndicator = ConnectionIndicator.compose({
+    baseName: 'connection-indicator',
+    template,
+    styles,
+});

package/dist/esm/connection-indicator/connection-indicator.stories.js

@@ -0,0 +1,14 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Connection Indicator',
+    component: 'rapid-connection-indicator',
+};
+export default meta;
+export const Primary = {
+    args: {
+        showLabel: true,
+    },
+    render: ({ showLabel, color }) => html `
+    <rapid-connection-indicator show-label="${showLabel}"></rapid-connection-indicator>
+  `,
+};

package/dist/esm/connection-indicator/connection-indicator.styles.js

@@ -0,0 +1,26 @@
+import { foundationConnectionIndicatorStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidConnectionIndicatorStyles = (context, definition) => css `
+  ${foundationConnectionIndicatorStyles(context, definition)}
+  :host {
+    --light-size: calc(var(--design-unit) * 3px);
+    --red: var(--error-color);
+    --trafic-light-red: color-mix(in srgb, var(--red), transparent 0%);
+    --trafic-light-red-glow: color-mix(in srgb, var(--red), transparent 60%) 0 0 4px 4px,
+      color-mix(in srgb, var(--red), transparent 80%) 0 0 8px 8px;
+    --green: var(--success-color);
+    --trafic-light-green: color-mix(in srgb, var(--green), transparent 0%);
+    --trafic-light-green-glow: color-mix(in srgb, var(--green), transparent 60%) 0 0 4px 4px,
+      color-mix(in srgb, var(--green), transparent 80%) 0 0 8px 8px;
+  }
+
+  .light {
+    margin: calc(var(--design-unit) * 4px);
+  }
+
+  .label {
+    font-family: var(--body-font);
+    font-size: var(--type-ramp-base-font-size);
+    color: var(--neutral-stroke-rest);
+  }
+`;

package/dist/esm/connection-indicator/index.js

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

package/dist/esm/data-grid/data-grid.js

@@ -0,0 +1,10 @@
+import { foundationDataGrid } from '@genesislcap/foundation-ui';
+import { getExports } from '../utils';
+// eslint-disable-next-line prettier/prettier
+const { defaultConfig, shadowOptions, styles, template } = getExports(foundationDataGrid);
+export const rapidDataGrid = () => foundationDataGrid();
+export { DataGrid } from '@genesislcap/foundation-ui';
+export const defaultDataGridConfig = defaultConfig;
+export const rapidDataGridTemplate = template;
+export const rapidDataGridStyles = styles;
+export const rapidDataGridShadowOptions = shadowOptions;

package/dist/esm/data-grid/index.js

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

package/dist/esm/data-grid-cell/data-grid-cell.js

@@ -0,0 +1,10 @@
+import { foundationDataGridCell } from '@genesislcap/foundation-ui';
+import { getExports } from '../utils';
+// eslint-disable-next-line prettier/prettier
+const { defaultConfig, shadowOptions, styles, template } = getExports(foundationDataGridCell);
+export const rapidDataGridCell = () => foundationDataGridCell();
+export { DataGridCell } from '@genesislcap/foundation-ui';
+export const defaultDataGridCellConfig = defaultConfig;
+export const rapidDataGridCellTemplate = template;
+export const rapidDataGridCellStyles = styles;
+export const rapidDataGridCellShadowOptions = shadowOptions;

package/dist/esm/data-grid-cell/index.js

@@ -0,0 +1 @@
+export * from './data-grid-cell';

package/dist/esm/data-grid-row/data-grid-row.js

@@ -0,0 +1,10 @@
+import { foundationDataGridRow } from '@genesislcap/foundation-ui';
+import { getExports } from '../utils';
+// eslint-disable-next-line prettier/prettier
+const { defaultConfig, shadowOptions, styles, template } = getExports(foundationDataGridRow);
+export const rapidDataGridRow = () => foundationDataGridRow();
+export { DataGridRow } from '@genesislcap/foundation-ui';
+export const defaultDataGridRowConfig = defaultConfig;
+export const rapidDataGridRowTemplate = template;
+export const rapidDataGridRowStyles = styles;
+export const rapidDataGridRowShadowOptions = shadowOptions;

package/dist/esm/data-grid-row/index.js

@@ -0,0 +1 @@
+export * from './data-grid-row';

package/dist/esm/date-picker/date-picker.js

@@ -0,0 +1,12 @@
+import { DatePicker as FoundationDatePicker } from '@genesislcap/foundation-ui';
+import { rapidDatePickerStyles as styles } from './date-picker.styles';
+import { rapidDatePickerTemplate as template } from './date-picker.template';
+export const rapidDatePickerShadowOptions = undefined;
+export const defaultDatePickerConfig = {};
+/**
+ * @tagname %%prefix%%-date-picker
+ */
+export class DatePicker extends FoundationDatePicker {
+}
+export const rapidDatePicker = DatePicker.compose(Object.assign({ baseName: 'date-picker', template,
+    styles, shadowOptions: rapidDatePickerShadowOptions }, defaultDatePickerConfig));

package/dist/esm/date-picker/date-picker.stories.js

@@ -0,0 +1,28 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Date Picker',
+    component: 'rapid-date-picker',
+};
+export default meta;
+const wrapperStyle = 'display: flex; flex-direction: row; justify-content: center; width: 100%; height: 500px;';
+export const Primary = {
+    args: {
+        firstDataPickerValue: '01-01-2021',
+        secondDatePickerFormat: 'MMMM/DD/YY',
+        thirdDatePickerFormat: 'MMM/ddd/YYYY',
+        thirdDatePickerValue: '01-01-2023',
+        label: 'Date Picker',
+    },
+    render: ({ firstDataPickerValue, secondDatePickerFormat, thirdDatePickerFormat, thirdDatePickerValue, label, }) => html `
+    <div style="${wrapperStyle}">
+      <div>
+        <rapid-date-picker value="${firstDataPickerValue}" label="${label}"></rapid-date-picker>
+        <rapid-date-picker format="${secondDatePickerFormat}"></rapid-date-picker>
+        <rapid-date-picker
+          format="${thirdDatePickerFormat}"
+          value="${thirdDatePickerValue}"
+        ></rapid-date-picker>
+      </div>
+    </div>
+  `,
+};

package/dist/esm/date-picker/date-picker.styles.js

@@ -0,0 +1,86 @@
+import { foundationDatePickerStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidDatePickerStyles = () => css `
+  ${foundationDatePickerStyles}
+
+  :host {
+    --primary-gradient-angle: -113.5deg;
+
+    display: inline-block;
+  }
+
+  .calendar-dropdown {
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);
+    background: var(--neutral-fill-input-rest);
+    top: auto;
+    margin: 0;
+    font-family: var(--body-font);
+    font-size: var(--type-ramp-base-font-size);
+    line-height: var(--type-ramp-base-line-height);
+  }
+
+  .icon-container:hover {
+    background-color: var(--neutral-fill-hover);
+    color: var(--neutral-foreground-rest);
+  }
+
+  .week-days,
+  .header h3,
+  .header .months-arrows .icon-container rapid-icon {
+    color: var(--neutral-stroke-rest);
+  }
+
+  .header .icon-container {
+    width: calc((var(--base-height-multiplier) * (var(--design-unit) - 1)) * 1px);
+    height: calc((var(--base-height-multiplier) * (var(--design-unit) - 1)) * 1px);
+    border-radius: calc(var(--control-corner-radius) * 1px);
+    background-color: var(--neutral-fill-input-rest);
+  }
+
+  .header .months-arrows .icon-container {
+    background-color: var(--neutral-fill-rest);
+  }
+
+  .header .months-arrows .icon-container:hover {
+    background-color: var(--neutral-fill-hover);
+    color: var(--neutral-foreground-rest);
+  }
+
+  .header .months-arrows .icon-container:hover rapid-icon {
+    color: var(--neutral-stroke-hover);
+  }
+
+  .month-day.current {
+    color: var(--neutral-foreground-rest);
+  }
+
+  .input-icon-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: calc(var(--control-corner-radius) * 1px);
+    width: calc((var(--base-height-multiplier) * (var(--design-unit) - 1)) * 1px);
+    height: calc((var(--base-height-multiplier) * (var(--design-unit) - 1)) * 1px);
+  }
+
+  .input-icon-container:hover {
+    background-color: var(--neutral-fill-rest);
+  }
+
+  .date-toggle::part(end) {
+    margin-inline-end: calc(var(--design-unit) * 1px);
+  }
+
+  .date-toggle {
+    margin-bottom: 0;
+  }
+
+  .month-day {
+    width: calc(((var(--base-height-multiplier) * (var(--design-unit) - 1)) + 2) * 1px);
+    height: calc(((var(--base-height-multiplier) * (var(--design-unit) - 1)) + 2) * 1px);
+  }
+
+  .week-days span {
+    font-size: var(--type-ramp-minus-2-font-size);
+  }
+`;

package/dist/esm/date-picker/date-picker.template.js

@@ -0,0 +1,5 @@
+import { getPrefixedDatePicker } from '@genesislcap/foundation-ui';
+import { html } from '@microsoft/fast-element';
+export const rapidDatePickerTemplate = html `
+  ${getPrefixedDatePicker('rapid')}
+`;

package/dist/esm/date-picker/index.js

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

package/dist/esm/design-system-provider/design-system-provider.js

@@ -0,0 +1,17 @@
+import { provideTokens } from '@genesislcap/foundation-ui';
+import { DesignSystemProvider as FASTDesignSystemProvider } from '@microsoft/fast-components';
+import { html } from '@microsoft/fast-element';
+import * as tokens from '../_config/tokens';
+import * as values from '../_config/values';
+export class DesignSystemProvider extends FASTDesignSystemProvider {
+    constructor() {
+        super();
+        provideTokens(tokens, values, this);
+    }
+}
+export const designSystemProvider = DesignSystemProvider.compose({
+    baseName: 'design-system-provider',
+    template: html `
+    <slot></slot>
+  `,
+});

package/dist/esm/design-system-provider/index.js

@@ -0,0 +1 @@
+export * from './design-system-provider';

package/dist/esm/dialog/dialog.js

@@ -0,0 +1,18 @@
+import { Dialog as FoundationDialog, foundationDialogTemplate, foundationDialogShadowOptions, defaultDialogConfig as foundationConfig, } from '@genesislcap/foundation-ui';
+import { rapidDialogStyles } from './dialog.styles';
+export const defaultDialogConfig = foundationConfig;
+export const rapidDialogTemplate = foundationDialogTemplate;
+export const rapidDialogShadowOptions = foundationDialogShadowOptions;
+/**
+ * @tagname %%prefix%%-dialog
+ */
+export class Dialog extends FoundationDialog {
+}
+/**
+ * The Rapid Dialog
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<rapid-dialog\>
+ */
+export const rapidDialog = Dialog.compose(Object.assign({ baseName: 'dialog', shadowOptions: rapidDialogShadowOptions, styles: rapidDialogStyles, template: rapidDialogTemplate }, defaultDialogConfig));

package/dist/esm/dialog/dialog.stories.js

@@ -0,0 +1,36 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Dialog',
+    component: 'rapid-dialog',
+};
+export default meta;
+const showDialog = (e) => {
+    const dialog = document.querySelector('rapid-dialog');
+    dialog.show();
+};
+const closeDialog = (e) => {
+    const dialog = document.querySelector('rapid-dialog');
+    dialog.close();
+};
+export const Primary = {
+    args: {
+        dialogMaxWidth: '557px',
+        dialogTitle: 'Dialog Title',
+        dialogInitialText: 'Some text in a Rapid Dialog',
+        dialogMainText: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis similique iste ab sed
+      voluptatem ut suscipit tenetur distinctio? Quo est debitis pariatur qui quisquam repudiandae
+      at atque et quibusdam rerum, reprehenderit sed laborum officiis distinctio dolorum
+      temporibus aperiam dolor consequatur perferendis aspernatur fugit repellendus asperiores,
+      voluptas illo? Voluptatum, atque quidem?`,
+        dialogCloseButtonText: 'Close this dialog',
+    },
+    render: ({ dialogMaxWidth, dialogTitle, dialogInitialText, dialogMainText, dialogCloseButtonText, }) => html `
+    <rapid-button @click="${showDialog}">Show Rapid Dialog</rapid-button>
+    <rapid-dialog style="--dialog-max-width: ${dialogMaxWidth};">
+      <div slot="top">${dialogTitle}</div>
+      <p>${dialogInitialText}</p>
+      <p>${dialogMainText}</p>
+      <rapid-button @click="${closeDialog}" slot="bottom">${dialogCloseButtonText}</rapid-button>
+    </rapid-dialog>
+  `,
+};

package/dist/esm/dialog/dialog.styles.js

@@ -0,0 +1,81 @@
+import { foundationDialogStyles } from '@genesislcap/foundation-ui';
+import { neutralForegroundRest, neutralLayer2 } from '@microsoft/fast-components';
+import { css } from '@microsoft/fast-element';
+export const rapidDialogStyles = css `
+  ${foundationDialogStyles}
+  :host {
+    --dialog-background: ${neutralLayer2};
+
+    font-family: var(--body-font);
+    font-size: var(--type-ramp-base-font-size);
+    line-height: var(--type-ramp-base-line-height);
+  }
+
+  dialog {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    border-radius: calc(var(--control-corner-radius) * 1px);
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);
+    text-align: left;
+    line-height: normal;
+    box-shadow: 0 2px 15px 0 rgb(0 0 0 / 35%);
+  }
+
+  .top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: var(--neutral-foreground-rest);
+    margin-bottom: calc(var(--design-unit) * 2px);
+    font-weight: 500;
+  }
+
+  .bottom {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    color: var(--neutral-foreground-rest);
+  }
+
+  :host slot:first-of-type {
+    color: ${neutralForegroundRest};
+  }
+
+  ::slotted(rapid-button) {
+    margin-top: calc(var(--design-unit) * 4px - 1px);
+  }
+
+  .content-wrapper {
+    min-width: var(--dialog-min-width);
+    min-height: var(--dialog-min-height);
+    height: fit-content;
+    width: fit-content;
+    max-width: var(--dialog-max-width);
+    max-height: var(--dialog-max-height);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: stretch;
+  }
+
+  .close-icon:hover svg {
+    background-color: color-mix(in srgb, var(--neutral-foreground-rest), transparent 95%);
+  }
+
+  .close-icon svg g path {
+    fill: color-mix(in srgb, var(--neutral-foreground-rest), transparent 50%);
+  }
+
+  .close-icon:hover svg g path {
+    fill: var(--neutral-foreground-rest);
+  }
+
+  .close-icon:active svg {
+    background-color: var(--neutral-layer-4);
+  }
+
+  .close-icon:active svg g path {
+    fill: color-mix(in srgb, var(--neutral-foreground-rest), transparent 67%);
+  }
+`;

package/dist/esm/dialog/index.js

@@ -0,0 +1,3 @@
+export * from './dialog';
+export * from './dialog.styles';
+export { foundationDialogTemplate as rapidDialogTemplate } from '@genesislcap/foundation-ui';

package/dist/esm/disclosure/disclosure.js

@@ -0,0 +1,10 @@
+import { defaultDisclosureConfig, Disclosure as FoundationDisclosure, foundationDialogShadowOptions, } from '@genesislcap/foundation-ui';
+import { rapidDisclosureStyles as styles } from './disclosure.styles';
+import { rapidDisclosureTemplate as template } from './disclosure.template';
+/**
+ * @tagname %%prefix%%-disclosure
+ */
+export class Disclosure extends FoundationDisclosure {
+}
+export const rapidDisclosure = Disclosure.compose(Object.assign({ baseName: 'disclosure', template,
+    styles, shadowOptions: foundationDialogShadowOptions }, defaultDisclosureConfig));

package/dist/esm/disclosure/disclosure.stories.js

@@ -0,0 +1,30 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Disclosure',
+    component: 'rapid-disclosure',
+};
+export default meta;
+export const Primary = {
+    argTypes: {
+        fastAppearance: {
+            control: 'select',
+            options: ['lightweight', 'accent'],
+        },
+    },
+    args: {
+        disclosureTitle: 'Open Disclosure',
+        disclosureText: `Created by writer Gardner Fox and artist Harry Lampert, the original Flashfirst appeared
+    in Flash Comics #1 (cover date January 1940/release monthNovember 1939). Nicknamed the
+    "Scarlet Speedster", all incarnations of theFlash possess "super speed", which includes
+    the ability to run, move, andthink extremely fast, use superhuman reflexes, and seemingly
+    violatecertain laws of physics.`,
+        disclosureEndSlot: '⚡️',
+        fastAppearance: 'lightweight',
+    },
+    render: ({ fastAppearance, disclosureTitle, disclosureText, disclosureEndSlot }) => html `
+    <rapid-disclosure appearance="${fastAppearance}" title="${disclosureTitle}">
+      <span slot="end">${disclosureEndSlot}</span>
+      <div>${disclosureText}</div>
+    </rapid-disclosure>
+  `,
+};