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

package/dist/esm/_docs/design-system/color-explorer/components/sample-page/sample-page.template.js

@@ -1,82 +0,0 @@
-import { html } from '@microsoft/fast-element';
-// import MoreIcon from "@fluentui/svg-icons/icons/more_horizontal_20_regular.svg";
-// import DownloadIcon from "@fluentui/svg-icons/icons/arrow_download_20_regular.svg";
-// import PlayIcon from "@fluentui/svg-icons/icons/play_20_regular.svg";
-export const samplePageTemplate = html `
-  <template>
-    <fluent-card>
-      <div class="image-container">
-        <fluent-badge fill="primary" color="primary" class="badge"> Badge </fluent-badge>
-      </div>
-      <div class="text-container">
-        <h3>Example card</h3>
-        <p>
-          At purus lectus quis habitant commodo, cras. Aliquam malesuada velit a tortor. Felis orci tellus netus risus
-          et ultricies augue aliquet. Suscipit mattis mus amet nibh...
-        </p>
-        <fluent-divider></fluent-divider>
-        <div class="sample-control">
-          <span class="sample-control-icon"></span>
-          <span class="sample-control-text">Label</span>
-          <div class="sample-control-actions">
-            <fluent-button appearance="stealth" aria-label="Example 'more' button">
-              <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                <path
-                  d="M6.25 10a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0zm5 0a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0zM15 11.25a1.25 1.25 0 100-2.5 1.25 1.25 0 000 2.5z"
-                />
-              </svg>
-            </fluent-button>
-          </div>
-        </div>
-      </div>
-    </fluent-card>
-    <div class="preview-controls">
-      <fluent-progress aria-label="Example progress bar"></fluent-progress>
-      <fluent-menu aria-label="Example menu">
-        <fluent-menu-item role="menuitem" aria-label="Example menu item"> Menu item 1 </fluent-menu-item>
-        <fluent-menu-item role="menuitem" aria-label="Example menu item"> Menu item 2 </fluent-menu-item>
-        <fluent-menu-item role="menuitem" aria-label="Example menu item"> Menu item 3 </fluent-menu-item>
-        <fluent-divider></fluent-divider>
-        <fluent-menu-item role="menuitem" aria-label="Example menu item"> Menu item 4 </fluent-menu-item>
-      </fluent-menu>
-      <div class="control-container">
-        <fluent-radio-group class="example-radios" name="example radio group" orientation="vertical">
-          <fluent-radio aria-label="Example radio 1">Radio 1</fluent-radio>
-          <fluent-radio aria-label="Example radio 2">Radio 2</fluent-radio>
-        </fluent-radio-group>
-        <div class="control-container-grid">
-          <fluent-switch aria-label="Example toggle">Toggle</fluent-switch>
-          <fluent-checkbox class="checkbox" aria-label="Example checkbox"> Checkbox </fluent-checkbox>
-        </div>
-      </div>
-      <fluent-text-field placeholder="Text field" aria-label="Example text field"></fluent-text-field>
-      <div class="control-container-2">
-        <fluent-slider aria-label="Example slider"></fluent-slider>
-        <fluent-flipper></fluent-flipper>
-        <fluent-flipper disabled></fluent-flipper>
-      </div>
-      <div class="control-container">
-        <fluent-button appearance="accent" aria-label="Example 'download' button">
-          Button
-          <span slot="start">
-            <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-              <path
-                d="M15.5 17a.5.5 0 01.09 1H4.5a.5.5 0 01-.09-1H15.5zM10 2a.5.5 0 01.5.41V14.3l3.64-3.65a.5.5 0 01.64-.06l.07.06c.17.17.2.44.06.63l-.06.07-4.5 4.5a.5.5 0 01-.25.14L10 16a.5.5 0 01-.4-.2l-4.46-4.45a.5.5 0 01.64-.76l.07.06 3.65 3.64V2.5c0-.27.22-.5.5-.5z"
-              />
-            </svg>
-          </span>
-        </fluent-button>
-        <fluent-button appearance="neutral" aria-label="Example 'play' button">
-          Button
-          <span slot="start">
-            <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-              <path
-                d="M17.22 8.69a1.5 1.5 0 010 2.62l-10 5.5A1.5 1.5 0 015 15.5v-11A1.5 1.5 0 017.22 3.2l10 5.5zm-.48 1.75a.5.5 0 000-.88l-10-5.5A.5.5 0 006 4.5v11c0 .38.4.62.74.44l10-5.5z"
-              />
-            </svg>
-          </span>
-        </fluent-button>
-      </div>
-    </div>
-  </template>
-`;

package/dist/esm/_docs/design-system/color-explorer/components/swatch.js

@@ -1,163 +0,0 @@
-import { __decorate } from "tslib";
-import { contrastRatio, parseColor } from '@microsoft/fast-colors';
-import { attr, css, customElement, html, observable } from '@microsoft/fast-element';
-import { FoundationElement } from '@microsoft/fast-foundation';
-import { elevation, fillColor, neutralForegroundHint } from '../../../../index-rollup';
-export var SwatchTypes;
-(function (SwatchTypes) {
-    SwatchTypes["fill"] = "fill";
-    SwatchTypes["foreground"] = "foreground";
-    SwatchTypes["outline"] = "outline";
-})(SwatchTypes || (SwatchTypes = {}));
-const template = html `
-  <template class="${x => x.type}">
-    <div class="icon" style="${x => x.iconStyle}" title="${x => x.contrastMessage}"></div>
-    <code class="recipe-name"> ${x => x.recipeName} </code>
-    <code class="hex-code"> ${x => x.colorValue} </code>
-  </template>
-`;
-const styles = css `
-  :host {
-    display: grid;
-    grid-template-columns: auto 1fr auto;
-    grid-template-rows: auto;
-    align-items: center;
-    width: 100%;
-    padding: 4px 0;
-    box-sizing: border-box;
-    color: ${neutralForegroundHint};
-    font-size: 12px;
-    grid-column-gap: 16px;
-    justify-items: start;
-  }
-  :host(.foreground) .icon {
-    border: 1px solid black;
-  }
-  :host(.foreground) .icon::before {
-    font-size: 13px;
-    content: 'A';
-    font-weight: 400;
-  }
-  .icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: 20px;
-    border-radius: 2px;
-    box-sizing: border-box;
-    --elevation: 4;
-    ${elevation}
-  }
-  .recipe-name {
-    grid-column: 2;
-    grid-row: 1;
-  }
-  .hex-code {
-    grid-column: 3;
-    grid-row: 1;
-  }
-`;
-let AppSwatch = class AppSwatch extends FoundationElement {
-    foregroundRecipeChanged() {
-        this.updateObservables();
-    }
-    fillRecipeChanged() {
-        this.updateObservables();
-    }
-    outlineRecipeChanged() {
-        this.updateObservables();
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        const fillColorChangeHandler = () => {
-            this.updateObservables();
-        };
-        fillColor.subscribe({
-            handleChange: fillColorChangeHandler,
-        }, this);
-        this.updateObservables();
-    }
-    updateObservables() {
-        this.updateIconStyle();
-        this.updateContrastMessage();
-        this.updateColorValue();
-    }
-    tokenCSS(token) {
-        return token && typeof token.createCSS === 'function' ? token.createCSS() : '';
-    }
-    evaluateToken(token) {
-        return (token === null || token === void 0 ? void 0 : token.getValueFor(this).toColorString()) || '';
-    }
-    updateIconStyle() {
-        const background = `background-color: ${this.tokenCSS(this.fillRecipe)}`;
-        this.iconStyle =
-            this.type === SwatchTypes.outline
-                ? `border: 4px solid ${this.tokenCSS(this.outlineRecipe)}; ${background}`
-                : this.type === SwatchTypes.foreground
-                    ? `color: ${this.tokenCSS(this.foregroundRecipe)}; ${background}`
-                    : background;
-    }
-    formatContrast(a, b) {
-        return a && b
-            ? contrastRatio(parseColor(this.evaluateToken(a)), parseColor(this.evaluateToken(b))).toFixed(2)
-            : '';
-    }
-    formatBackgroundContrast(a, b) {
-        return `BG contrast: ${this.formatContrast(a, b)} : 1`;
-    }
-    formatForegroundContrast(a, b) {
-        return `Text contrast: ${this.formatContrast(a, b)} : 1`;
-    }
-    updateContrastMessage() {
-        const backgroundContrastMessage = this.formatBackgroundContrast(this.type === SwatchTypes.foreground
-            ? this.foregroundRecipe
-            : this.type === SwatchTypes.outline
-                ? this.outlineRecipe
-                : this.fillRecipe, this.type === SwatchTypes.foreground || this.type === SwatchTypes.outline ? this.fillRecipe : fillColor);
-        this.contrastMessage =
-            this.type === SwatchTypes.fill
-                ? backgroundContrastMessage.concat('\n', this.formatForegroundContrast(this.fillRecipe, this.foregroundRecipe))
-                : backgroundContrastMessage;
-    }
-    updateColorValue() {
-        const recipe = this.type === SwatchTypes.outline
-            ? this.outlineRecipe
-            : this.type === SwatchTypes.foreground
-                ? this.foregroundRecipe
-                : this.fillRecipe;
-        this.colorValue = this.evaluateToken(recipe).toUpperCase();
-    }
-};
-__decorate([
-    attr
-], AppSwatch.prototype, "type", void 0);
-__decorate([
-    attr({ attribute: 'recipe-name' })
-], AppSwatch.prototype, "recipeName", void 0);
-__decorate([
-    observable
-], AppSwatch.prototype, "foregroundRecipe", void 0);
-__decorate([
-    observable
-], AppSwatch.prototype, "fillRecipe", void 0);
-__decorate([
-    observable
-], AppSwatch.prototype, "outlineRecipe", void 0);
-__decorate([
-    observable
-], AppSwatch.prototype, "iconStyle", void 0);
-__decorate([
-    observable
-], AppSwatch.prototype, "contrastMessage", void 0);
-__decorate([
-    observable
-], AppSwatch.prototype, "colorValue", void 0);
-AppSwatch = __decorate([
-    customElement({
-        name: 'app-swatch',
-        template,
-        styles,
-    })
-], AppSwatch);
-export { AppSwatch };

package/dist/esm/_docs/design-system/color-explorer/custom-elements.js

@@ -1,3 +0,0 @@
-import { layerBackground } from './components/layer-background';
-export { layerBackground };
-export const appComponents = [layerBackground()];

package/dist/esm/_docs/design-system/color-explorer/index.js

@@ -1,14 +0,0 @@
-import { allComponents as fluentComponents, provideFluentDesignSystem } from '../../../index-rollup';
-import { fastToolingColorPicker } from './components/color-picker';
-import { App } from './app';
-import { appComponents } from './custom-elements';
-export function init() {
-    provideFluentDesignSystem()
-        .register(fluentComponents)
-        .withPrefix('fast-tooling')
-        .register(fastToolingColorPicker())
-        .withPrefix('app')
-        .register(appComponents);
-}
-App;
-export { App } from './app';

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

@@ -1,154 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { DesignToken, display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { SystemColors } from '@microsoft/fast-web-utilities';
-import { controlCornerRadius, designUnit, layerCornerRadius, neutralFillLayerAltRest, neutralFillLayerRecipe, neutralFillLayerRest, neutralFillStealthRecipe, neutralForegroundRest, neutralStrokeLayerRest, strokeWidth, } from '../../design-tokens';
-import { focusTreatmentBase } from '../../styles/focus';
-import { typeRampBase } from '../../styles/patterns/type-ramp';
-import { heightNumber } from '../../styles/size';
-const neutralFillStealthRestOnNeutralFillLayerRest = DesignToken.create('neutral-fill-stealth-rest-on-neutral-fill-layer-rest').withDefault((target) => {
-    const baseRecipe = neutralFillLayerRecipe.getValueFor(target);
-    const buttonRecipe = neutralFillStealthRecipe.getValueFor(target);
-    return buttonRecipe.evaluate(target, baseRecipe.evaluate(target).rest).rest;
-});
-const neutralFillStealthHoverOnNeutralFillLayerRest = DesignToken.create('neutral-fill-stealth-hover-on-neutral-fill-layer-rest').withDefault((target) => {
-    const baseRecipe = neutralFillLayerRecipe.getValueFor(target);
-    const buttonRecipe = neutralFillStealthRecipe.getValueFor(target);
-    return buttonRecipe.evaluate(target, baseRecipe.evaluate(target).rest).hover;
-});
-const neutralFillStealthActiveOnNeutralFillLayerRest = DesignToken.create('neutral-fill-stealth-active-on-neutral-fill-layer-rest').withDefault((target) => {
-    const baseRecipe = neutralFillLayerRecipe.getValueFor(target);
-    const buttonRecipe = neutralFillStealthRecipe.getValueFor(target);
-    return buttonRecipe.evaluate(target, baseRecipe.evaluate(target).rest).active;
-});
-export const accordionItemStyles = (context, definition) => css `
-    ${display('flex')} :host {
-      box-sizing: border-box;
-      ${typeRampBase};
-      flex-direction: column;
-      background: ${neutralFillLayerRest};
-      color: ${neutralForegroundRest};
-      border: calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};
-      border-radius: calc(${layerCornerRadius} * 1px);
-    }
-
-    .region {
-      display: none;
-      padding: calc(${designUnit} * 2 * 1px);
-      background: ${neutralFillLayerAltRest};
-    }
-
-    .heading {
-      display: grid;
-      position: relative;
-      grid-template-columns: auto 1fr auto auto;
-      align-items: center;
-    }
-
-    .button {
-      appearance: none;
-      border: none;
-      background: none;
-      grid-column: 2;
-      grid-row: 1;
-      outline: none;
-      margin: calc(${designUnit} * 3 * 1px) 0;
-      padding: 0 calc(${designUnit} * 2 * 1px);
-      text-align: left;
-      color: inherit;
-      cursor: pointer;
-      font: inherit;
-    }
-
-    .button::before {
-      content: '';
-      position: absolute;
-      top: calc(${strokeWidth} * -1px);
-      left: calc(${strokeWidth} * -1px);
-      right: calc(${strokeWidth} * -1px);
-      bottom: calc(${strokeWidth} * -1px);
-      cursor: pointer;
-    }
-
-    .button:${focusVisible}::before {
-      ${focusTreatmentBase}
-      border-radius: calc(${layerCornerRadius} * 1px);
-    }
-
-    :host(.expanded) .button:${focusVisible}::before {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    :host(.expanded) .region {
-      display: block;
-      border-top: calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};
-      border-bottom-left-radius: calc((${layerCornerRadius} - ${strokeWidth}) * 1px);
-      border-bottom-right-radius: calc((${layerCornerRadius} - ${strokeWidth}) * 1px);
-    }
-
-    .icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      grid-column: 4;
-      pointer-events: none;
-      background: ${neutralFillStealthRestOnNeutralFillLayerRest};
-      border-radius: calc(${controlCornerRadius} * 1px);
-      fill: currentcolor;
-      width: calc(${heightNumber} * 1px);
-      height: calc(${heightNumber} * 1px);
-      margin: calc(${designUnit} * 2 * 1px);
-    }
-
-    .heading:hover .icon {
-      background: ${neutralFillStealthHoverOnNeutralFillLayerRest};
-    }
-
-    .heading:active .icon {
-      background: ${neutralFillStealthActiveOnNeutralFillLayerRest};
-    }
-
-    slot[name='collapsed-icon'] {
-      display: flex;
-    }
-
-    :host(.expanded) slot[name='collapsed-icon'] {
-      display: none;
-    }
-
-    slot[name='expanded-icon'] {
-      display: none;
-    }
-
-    :host(.expanded) slot[name='expanded-icon'] {
-      display: flex;
-    }
-
-    .start {
-      display: flex;
-      align-items: center;
-      padding-inline-start: calc(${designUnit} * 2 * 1px);
-      justify-content: center;
-      grid-column: 1;
-    }
-
-    .end {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      grid-column: 3;
-    }
-
-    .icon,
-    .start,
-    .end {
-      position: relative;
-    }
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        .button:${focusVisible}::before {
-          outline-color: ${SystemColors.Highlight};
-        }
-        .icon {
-          fill: ${SystemColors.ButtonText};
-        }
-      `));

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

@@ -1,67 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-accordion-item",
-            "title": "Accordion item",
-            "description": "The Fluent UI accordion item element",
-            "attributes": [
-                {
-                    "name": "heading-level",
-                    "title": "Level",
-                    "description": "The aria-level value (1-6) for the item heading, representing its semantic hierarchy",
-                    "type": "number",
-                    "default": 2,
-                    "required": false
-                },
-                {
-                    "name": "expanded",
-                    "title": "Expanded",
-                    "description": "The expanded state of the item",
-                    "type": "boolean",
-                    "default": false,
-                    "required": false
-                },
-                {
-                    "name": "id",
-                    "title": "ID",
-                    "description": "The HTML ID attribute for the invoking element",
-                    "type": "string",
-                    "required": false
-                }
-            ],
-            "slots": [
-                {
-                    "name": "",
-                    "title": "Default slot",
-                    "description": "The contents of the item"
-                },
-                {
-                    "name": "heading",
-                    "title": "Heading slot",
-                    "description": "The heading of the accordion item"
-                },
-                {
-                    "name": "start",
-                    "title": "Start slot",
-                    "description": "Contents of the start slot are positioned before the heading"
-                },
-                {
-                    "name": "end",
-                    "title": "End slot",
-                    "description": "Contents of the end slot are positioned after the heading and before the expand/collapse icons"
-                },
-                {
-                    "name": "expanded-icon",
-                    "title": "Expanded icon slot",
-                    "description": "Slot to provide a custom icon representing the expanded state"
-                },
-                {
-                    "name": "collapsed-icon",
-                    "title": "Collapsed icon slot",
-                    "description": "Slot to provide a custom icon representing the collapsed state"
-                }
-            ]
-        }
-    ]
-}

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

@@ -1,32 +0,0 @@
-import { AccordionItem, accordionItemTemplate as template } from '@microsoft/fast-foundation';
-import { accordionItemStyles as styles } from './accordion-item.styles';
-/**
- * The Fluent Accordion Item Element. Implements {@link @microsoft/fast-foundation#AccordionItem},
- * {@link @microsoft/fast-foundation#accordionItemTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-accordion-item\>
- */
-export const fluentAccordionItem = AccordionItem.compose({
-    baseName: 'accordion-item',
-    template,
-    styles,
-    collapsedIcon: `
-    <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
-      <path d="M2.15 4.65c.2-.2.5-.2.7 0L6 7.79l3.15-3.14a.5.5 0 11.7.7l-3.5 3.5a.5.5 0 01-.7 0l-3.5-3.5a.5.5 0 010-.7z"/>
-    </svg>
-  `,
-    expandedIcon: `
-    <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
-      <path d="M2.15 7.35c.2.2.5.2.7 0L6 4.21l3.15 3.14a.5.5 0 10.7-.7l-3.5-3.5a.5.5 0 00-.7 0l-3.5 3.5a.5.5 0 000 .7z"/>
-    </svg>
-  `,
-});
-/**
- * Styles for AccordionItem
- * @public
- */
-export const accordionItemStyles = styles;
-export { AccordionItem };

package/dist/esm/accordion/accordion.stories.js

@@ -1,66 +0,0 @@
-import { fluentAccordion } from './index';
-export default {
-    title: 'Components/Accordion',
-    component: fluentAccordion,
-    argTypes: {
-        expandMode: {
-            options: ['single', 'multi'],
-            control: { type: 'radio' },
-            defaultValue: 'multi',
-        },
-    },
-};
-const AccordionTemplate = ({ expandMode }) => `
-  <fluent-accordion
-    ${expandMode ? `expand-mode="${expandMode}"` : ''}
-  >
-    <fluent-accordion-item expanded>
-      <div slot="start">
-        <button>1</button>
-      </div>
-      <div slot="end">
-        <button>1</button>
-      </div>
-      <span slot="heading">Panel one</span>
-      Panel one content
-    </fluent-accordion-item>
-    <fluent-accordion-item>
-      <span slot="heading">Panel two</span>
-      Panel two content
-    </fluent-accordion-item>
-    <fluent-accordion-item expanded>
-      <span slot="heading">Panel three</span>
-      Panel three content
-    </fluent-accordion-item>
-  </fluent-accordion>
-`;
-export const Accordion = AccordionTemplate.bind({});
-const example = `
-<fluent-accordion>
-  <fluent-accordion-item expanded>
-    <div slot="start">
-      <button>1</button>
-    </div>
-    <div slot="end">
-      <button>1</button>
-    </div>
-    <span slot="heading">Panel one</span>
-    Panel one content
-  </fluent-accordion-item>
-  <fluent-accordion-item>
-    <span slot="heading">Panel two</span>
-    Panel two content
-  </fluent-accordion-item>
-  <fluent-accordion-item expanded>
-    <span slot="heading">Panel three</span>
-    Panel three content
-  </fluent-accordion-item>
-</fluent-accordion>
-`;
-Accordion.parameters = {
-    docs: {
-        source: {
-            code: example,
-        },
-    },
-};

package/dist/esm/accordion/accordion.styles.js

@@ -1,13 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
-import { designUnit, neutralForegroundRest } from '../design-tokens';
-import { typeRampBase } from '../styles/patterns/type-ramp';
-export const accordionStyles = (context, definition) => css `
-    ${display('flex')} :host {
-      box-sizing: border-box;
-      flex-direction: column;
-      ${typeRampBase}
-      color: ${neutralForegroundRest};
-      gap: calc(${designUnit} * 1px);
-    }
-  `;

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

@@ -1,35 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-accordion",
-            "title": "Accordion",
-            "description": "The Fluent UI accordion element",
-            "attributes": [
-                {
-                    "name": "expand-mode",
-                    "title": "Expand mode",
-                    "description": "The way items are allowed to expand",
-                    "type": "string",
-                    "values": [
-                        {
-                            "name": "single"
-                        },
-                        {
-                            "name": "multi"
-                        }
-                    ],
-                    "default": "multi",
-                    "required": false
-                }
-            ],
-            "slots": [
-                {
-                    "name": "item",
-                    "title": "Item slot",
-                    "description": "The default slot for accordion items"
-                }
-            ]
-        }
-    ]
-}

package/dist/esm/accordion/index.js

@@ -1,27 +0,0 @@
-import { Accordion, accordionTemplate as template } from '@microsoft/fast-foundation';
-import { accordionStyles as styles } from './accordion.styles';
-export * from './accordion-item/index';
-/**
- * The Fluent Accordion Element. Implements {@link @microsoft/fast-foundation#Accordion},
- * {@link @microsoft/fast-foundation#accordionTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-accordion\>
- */
-export const fluentAccordion = Accordion.compose({
-    baseName: 'accordion',
-    template,
-    styles,
-});
-/**
- * Styles for Accordion
- * @public
- */
-export const accordionStyles = styles;
-/**
- * Base class for Accordion
- * @public
- */
-export { Accordion };