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

package/dist/dts/text/text.d.ts

@@ -0,0 +1,91 @@
+import { FASTElement } from '@microsoft/fast-element';
+import type { TextAlign, TextFont, TextSize, TextWeight } from './text.options.js';
+/**
+ * The base class used for constructing a fluent-text custom element
+ * @public
+ */
+export declare class Text extends FASTElement {
+    /**
+     * The text will not wrap
+     * NOTE: In Fluent UI React v9 this is "wrap"
+     * Boolean attributes which default to true in HTML can't be switched off in the DOM
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: nowrap
+     */
+    nowrap: boolean;
+    /**
+     * The text truncates
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: truncate
+     */
+    truncate: boolean;
+    /**
+     * The text style is italic
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: italic
+     */
+    italic: boolean;
+    /**
+     * The text style is underline
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: underline
+     */
+    underline: boolean;
+    /**
+     * The text style is strikethrough
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: strikethrough
+     */
+    strikethrough: boolean;
+    /**
+     * An text can take up the width of its container.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: block
+     */
+    block: boolean;
+    /**
+     * THe Text size
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: size
+     *
+     */
+    size?: TextSize;
+    /**
+     * THe Text font
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: font
+     */
+    font?: TextFont;
+    /**
+     * THe Text weight
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: weight
+     */
+    weight?: TextWeight;
+    /**
+     * THe Text align
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: align
+     */
+    align?: TextAlign;
+}

package/dist/dts/text/text.definition.d.ts

@@ -0,0 +1,10 @@
+import { Text } from './text.js';
+/**
+ * The Fluent Text Element.
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-text\>
+ */
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof Text>;

package/dist/dts/text/text.options.d.ts

@@ -0,0 +1,67 @@
+import { ValuesOf } from '@microsoft/fast-foundation';
+/**
+ * TextSize constants
+ * @public
+ */
+export declare const TextSize: {
+    readonly _100: "100";
+    readonly _200: "200";
+    readonly _300: "300";
+    readonly _400: "400";
+    readonly _500: "500";
+    readonly _600: "600";
+    readonly _700: "700";
+    readonly _800: "800";
+    readonly _900: "900";
+    readonly _1000: "1000";
+};
+/**
+ * The type for TextSize
+ * The font size and line height based on the theme tokens
+ * @public
+ */
+export declare type TextSize = ValuesOf<typeof TextSize>;
+/**
+ * TextFont Constants
+ * @public
+ */
+export declare const TextFont: {
+    readonly base: "base";
+    readonly numeric: "numeric";
+    readonly monospace: "monospace";
+};
+/**
+ * Applies font family to the content
+ * @public
+ */
+export declare type TextFont = ValuesOf<typeof TextFont>;
+/**
+ * TextWeight Constants
+ * @public
+ */
+export declare const TextWeight: {
+    readonly medium: "medium";
+    readonly regular: "regular";
+    readonly semibold: "semibold";
+    readonly bold: "bold";
+};
+/**
+ * Applies font weight to the content
+ * @public
+ */
+export declare type TextWeight = ValuesOf<typeof TextWeight>;
+/**
+ * TextAlign Constants
+ * @public
+ */
+export declare const TextAlign: {
+    readonly start: "start";
+    readonly end: "end";
+    readonly center: "center";
+    readonly justify: "justify";
+};
+/**
+ * Aligns the content
+ * @public
+ */
+export declare type TextAlign = ValuesOf<typeof TextAlign>;

package/dist/dts/text/text.styles.d.ts

@@ -0,0 +1,4 @@
+/** Text styles
+ * @public
+ */
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/dts/text/text.template.d.ts

@@ -0,0 +1,6 @@
+import { ElementViewTemplate } from '@microsoft/fast-element';
+import type { Text } from './text.js';
+/**
+ * @internal
+ */
+export declare const template: ElementViewTemplate<Text>;

package/dist/dts/theme/design-tokens.d.ts

@@ -168,6 +168,8 @@ export declare const colorNeutralBackgroundDisabled: import("@microsoft/fast-fou
 export declare const colorNeutralBackgroundInvertedDisabled: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const colorNeutralStencil1: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const colorNeutralStencil2: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const colorNeutralStencil1Alpha: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const colorNeutralStencil2Alpha: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const colorBackgroundOverlay: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const colorScrollbarOverlay: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const colorBrandBackground: import("@microsoft/fast-foundation").CSSDesignToken<string>;
@@ -365,6 +367,9 @@ export declare const colorPalettePlatinumBorderActive: import("@microsoft/fast-f
 export declare const colorPaletteAnchorBackground2: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const colorPaletteAnchorForeground2: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const colorPaletteAnchorBorderActive: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const colorPaletteRedForegroundInverted: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const colorPaletteGreenForegroundInverted: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const colorPaletteYellowForegroundInverted: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const shadow2: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const shadow4: import("@microsoft/fast-foundation").CSSDesignToken<string>;
 export declare const shadow8: import("@microsoft/fast-foundation").CSSDesignToken<string>;

package/dist/dts/theme/index.d.ts

@@ -1,2 +1,2 @@
-export * from './design-tokens';
-export { setTheme } from './set-theme';
+export * from './design-tokens.js';
+export { setTheme } from './set-theme.js';

package/dist/dts/utils/get-initials.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Get (up to 2 characters) initials based on display name of the persona.
+ *
+ * @param displayName - The full name of the person or entity
+ * @param isRtl - Whether the display is in RTL
+ * @param options - Extra options to control the behavior of getInitials
+ *
+ * @returns The 1 or 2 character initials based on the name. Or an empty string if no initials
+ * could be derived from the name.
+ *
+ * @internal
+ */
+export declare function getInitials(displayName: string | undefined | null, isRtl: boolean, options?: {
+    /** Should initials be generated from phone numbers (default false) */
+    allowPhoneInitials?: boolean;
+    /** Returns only the first initial */
+    firstInitialOnly?: boolean;
+}): string;

package/dist/esm/accordion/accordion.definition.js

@@ -0,0 +1,19 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { Accordion } from './accordion.js';
+import { styles } from './accordion.styles.js';
+import { template } from './accordion.template.js';
+/**
+ * The Fluent Accordion Element. Implements {@link @microsoft/fast-foundation#Accordion },
+ * {@link @microsoft/fast-foundation#accordionTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-accordion\>
+ */
+export const definition = Accordion.compose({
+    name: `${FluentDesignSystem.prefix}-accordion`,
+    template,
+    styles,
+});
+//# sourceMappingURL=accordion.definition.js.map

package/dist/esm/accordion/accordion.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.definition.js","sourceRoot":"","sources":["../../../src/accordion/accordion.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,SAAS,CAAC,OAAO,CAAC;IAC1C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,YAAY;IAC9C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}

package/dist/esm/accordion/accordion.js

@@ -0,0 +1,8 @@
+import { FASTAccordion } from '@microsoft/fast-foundation';
+/**
+ * The base class used for constructing a fluent-accordion custom element
+ * @public
+ */
+export class Accordion extends FASTAccordion {
+}
+//# sourceMappingURL=accordion.js.map

package/dist/esm/accordion/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/accordion/accordion.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAE3D;;;GAGG;AACH,MAAM,OAAO,SAAU,SAAQ,aAAa;CAAG"}

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

@@ -0,0 +1,12 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+export const styles = css `
+  ${display('flex')}
+
+  :host {
+    flex-direction: column;
+    width: 100%;
+    contain: content;
+  }
+`;
+//# sourceMappingURL=accordion.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.styles.js","sourceRoot":"","sources":["../../../src/accordion/accordion.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;;CAOlB,CAAC"}

package/dist/esm/accordion/accordion.template.js

@@ -0,0 +1,3 @@
+import { accordionTemplate } from '@microsoft/fast-foundation';
+export const template = accordionTemplate();
+//# sourceMappingURL=accordion.template.js.map

package/dist/esm/accordion/accordion.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.template.js","sourceRoot":"","sources":["../../../src/accordion/accordion.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAG/D,MAAM,CAAC,MAAM,QAAQ,GAAmC,iBAAiB,EAAE,CAAC"}

package/dist/esm/accordion/define.js

@@ -0,0 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './accordion.definition.js';
+definition.define(FluentDesignSystem.registry);
+//# sourceMappingURL=define.js.map

package/dist/esm/accordion/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/accordion/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/accordion/index.js

@@ -0,0 +1,5 @@
+export * from './accordion.js';
+export { template as accordionTemplate } from './accordion.template.js';
+export { styles as accordionStyles } from './accordion.styles.js';
+export { definition as accordionDefinition } from './accordion.definition.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/accordion/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/accordion/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,2BAA2B,CAAC"}

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

@@ -0,0 +1,19 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { AccordionItem } from './accordion-item.js';
+import { styles } from './accordion-item.styles.js';
+import { template } from './accordion-item.template.js';
+/**
+ * The Fluent AccordionItem Element. Implements {@link @microsoft/fast-foundation#AccordionItem },
+ * {@link @microsoft/fast-foundation#accordionItemTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-accordion-item\>
+ */
+export const definition = AccordionItem.compose({
+    name: `${FluentDesignSystem.prefix}-accordion-item`,
+    template,
+    styles,
+});
+//# sourceMappingURL=accordion-item.definition.js.map

package/dist/esm/accordion-item/accordion-item.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-item.definition.js","sourceRoot":"","sources":["../../../src/accordion-item/accordion-item.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAExD;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CAAC,OAAO,CAAC;IAC9C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,iBAAiB;IACnD,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}

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

@@ -0,0 +1,29 @@
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
+import { FASTAccordionItem } from '@microsoft/fast-foundation';
+/**
+ * @internal
+ */
+export class AccordionItem extends FASTAccordionItem {
+    constructor() {
+        super(...arguments);
+        /**
+         * Sets the width of the focus state.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: block
+         */
+        this.block = false;
+    }
+}
+__decorate([
+    attr
+], AccordionItem.prototype, "size", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], AccordionItem.prototype, "block", void 0);
+__decorate([
+    attr({ attribute: 'expand-icon-position' })
+], AccordionItem.prototype, "expandIconPosition", void 0);
+//# sourceMappingURL=accordion-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-item.js","sourceRoot":"","sources":["../../../src/accordion-item/accordion-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAG/D;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,iBAAiB;IAApD;;QAYE;;;;;;WAMG;QAEI,UAAK,GAAY,KAAK,CAAC;IAYhC,CAAC;CAAA;AAtBC;IADC,IAAI;2CAC2B;AAUhC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;4CACI;AAW9B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,sBAAsB,EAAE,CAAC;yDACgB"}

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

@@ -0,0 +1,17 @@
+/**
+ * An Accordion Item header font size can be small, medium, large, and extra-large
+ */
+export const AccordionItemSize = {
+    small: 'small',
+    medium: 'medium',
+    large: 'large',
+    extraLarge: 'extra-large',
+};
+/**
+ * An Accordion Item expand/collapse icon can appear at the start or end of the accordion
+ */
+export const AccordionItemExpandIconPosition = {
+    start: 'start',
+    end: 'end',
+};
+//# sourceMappingURL=accordion-item.options.js.map

package/dist/esm/accordion-item/accordion-item.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-item.options.js","sourceRoot":"","sources":["../../../src/accordion-item/accordion-item.options.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,UAAU,EAAE,aAAa;CACjB,CAAC;AAQX;;GAEG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG;IAC7C,KAAK,EAAE,OAAO;IACd,GAAG,EAAE,KAAK;CACF,CAAC"}

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

@@ -0,0 +1,198 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { borderRadiusMedium, borderRadiusSmall, colorNeutralForeground1, colorNeutralForegroundDisabled, colorStrokeFocus1, colorStrokeFocus2, colorTransparentBackground, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontSizeBase500, fontWeightRegular, lineHeightBase200, lineHeightBase300, lineHeightBase400, lineHeightBase500, spacingHorizontalM, spacingHorizontalMNudge, spacingHorizontalS, } from '../theme/design-tokens.js';
+export const styles = css `
+  ${display('block')}
+
+  :host {
+    max-width: fit-content;
+    contain: content;
+  }
+
+  .heading {
+    height: 44px;
+    display: grid;
+    position: relative;
+    vertical-align: middle;
+    padding-inline: ${spacingHorizontalM} ${spacingHorizontalMNudge};
+    border-radius: ${borderRadiusMedium};
+    font-family: ${fontFamilyBase};
+    font-size: ${fontSizeBase300};
+    font-weight: ${fontWeightRegular};
+    line-height: ${lineHeightBase300};
+    grid-template-columns: auto auto 1fr auto;
+  }
+
+  .heading-content {
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  .button {
+    box-sizing: border-box;
+    appearance: none;
+    border: none;
+    outline: none;
+    text-align: start;
+    cursor: pointer;
+    font-family: inherit;
+    height: 44px;
+    color: ${colorNeutralForeground1};
+    background: ${colorTransparentBackground};
+    line-height: ${lineHeightBase300};
+    height: auto;
+    padding: 0;
+    font-size: inherit;
+    grid-column: auto / span 2;
+    grid-row: 1;
+  }
+
+  .button::before {
+    content: '';
+    position: absolute;
+    inset: 0px;
+    cursor: pointer;
+    border-radius: ${borderRadiusSmall};
+  }
+
+  .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    position: relative;
+    height: 100%;
+    padding-right: ${spacingHorizontalS};
+    grid-column: 1 / span 1;
+    grid-row: 1;
+  }
+
+  .region {
+    margin: 0 ${spacingHorizontalM};
+  }
+
+  ::slotted([slot='start']),
+  ::slotted([slot='end']) {
+    justify-content: center;
+    align-items: center;
+    padding-right: ${spacingHorizontalS};
+    grid-column: 2 / span 1;
+    grid-row: 1 / span 1;
+  }
+
+  button:focus-visible::after {
+    content: '';
+    position: absolute;
+    inset: 0px;
+    cursor: pointer;
+    border-radius: ${borderRadiusSmall};
+    outline: none;
+    border: 2px solid ${colorStrokeFocus1};
+    box-shadow: inset 0 0 0 1px ${colorStrokeFocus2};
+  }
+
+  /* --- Disabled attr styles --- */
+
+  :host([disabled]) .button {
+    color: ${colorNeutralForegroundDisabled};
+  }
+  :host([disabled]) svg {
+    filter: invert(89%) sepia(0%) saturate(569%) hue-rotate(155deg) brightness(88%) contrast(87%);
+  }
+
+  /* --- Expanded attr styles --- */
+
+  :host([expanded]) .region {
+    display: block;
+  }
+
+  :host([expanded]) .default-collapsed-icon,
+  :host([expanded]) ::slotted([slot='collapsed-icon']),
+  :host(:not([expanded])) .default-expanded-icon,
+  :host(:not([expanded])) ::slotted([slot='expanded-icon']),
+  :host([expanded]) ::slotted([slot='end']),
+  ::slotted([slot='start']),
+  .region {
+    display: none;
+  }
+
+  :host([expanded]) ::slotted([slot='start']),
+  :host([expanded]) ::slotted([slot='expanded-icon']),
+  :host(:not([expanded])) ::slotted([slot='collapsed-icon']),
+  ::slotted([slot='end']) {
+    display: flex;
+  }
+
+  /* --- Appearance attr styles --- */
+
+  .heading {
+    font-size: ${fontSizeBase300};
+    line-height: ${lineHeightBase300};
+  }
+
+  :host([size='small']) .heading {
+    font-size: ${fontSizeBase200};
+    line-height: ${lineHeightBase200};
+  }
+
+  :host([size='large']) .heading {
+    font-size: ${fontSizeBase400};
+    line-height: ${lineHeightBase400};
+  }
+
+  :host([size='extra-large']) .heading {
+    font-size: ${fontSizeBase500};
+    line-height: ${lineHeightBase500};
+  }
+
+  /* --- expand-icon-position attr styles --- */
+
+  :host([expand-icon-position='end']) :slotted(span[slot='start']),
+  :host([expand-icon-position='end']) ::slotted(span[slot='end']) {
+    grid-column: 1 / span 1;
+    grid-row: 1;
+  }
+
+  :host([expand-icon-position='end']) ::slotted(span[slot='start']),
+  :host([expand-icon-position='end']) ::slotted(span[slot='end']) {
+    grid-column: 1 / span 1;
+    grid-row: 1;
+  }
+
+  :host([expand-icon-position='end']) .icon {
+    grid-column: 4 / span 1;
+    grid-row: 1;
+    display: flex;
+    padding-left: 10px;
+    padding-right: 0;
+  }
+
+  :host([expand-icon-position='end']) .button {
+    grid-column: 2 / span 3;
+    grid-row: 1;
+  }
+
+  /* --- Block attr styles --- */
+
+  :host([block]) {
+    max-width: 100%;
+  }
+
+  :host([expand-icon-position='end']) .heading {
+    grid-template-columns: auto auto 28px;
+  }
+
+  :host([expand-icon-position='end']) .icon {
+    grid-column: 5 / span 1;
+  }
+
+  :host([block][expand-icon-position='end']) .heading {
+    grid-template-columns: auto 1fr;
+  }
+
+  :host([block][expand-icon-position='end']) .icon {
+    grid-column: 5 / span 1;
+  }
+`;
+//# sourceMappingURL=accordion-item.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-item.styles.js","sourceRoot":"","sources":["../../../src/accordion-item/accordion-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,uBAAuB,EACvB,8BAA8B,EAC9B,iBAAiB,EACjB,iBAAiB,EACjB,0BAA0B,EAC1B,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;;;;;;;;;;;sBAYE,kBAAkB,IAAI,uBAAuB;qBAC9C,kBAAkB;mBACpB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;;;;;;;;;;;;;;;aAmBvB,uBAAuB;kBAClB,0BAA0B;mBACzB,iBAAiB;;;;;;;;;;;;;qBAaf,iBAAiB;;;;;;;;;;qBAUjB,kBAAkB;;;;;;gBAMvB,kBAAkB;;;;;;;qBAOb,kBAAkB;;;;;;;;;;qBAUlB,iBAAiB;;wBAEd,iBAAiB;kCACP,iBAAiB;;;;;;aAMtC,8BAA8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAgC1B,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDnC,CAAC"}

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

@@ -0,0 +1,37 @@
+import { html } from '@microsoft/fast-element';
+import { accordionItemTemplate } from '@microsoft/fast-foundation';
+const chevronRight20Filled = html.partial(`<svg
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class="default-collapsed-icon"
+>
+  <path
+    d="M7.73271 4.20694C8.03263 3.92125 8.50737 3.93279 8.79306 4.23271L13.7944 9.48318C14.0703 9.77285 14.0703 10.2281 13.7944 10.5178L8.79306 15.7682C8.50737 16.0681 8.03263 16.0797 7.73271 15.794C7.43279 15.5083 7.42125 15.0336 7.70694 14.7336L12.2155 10.0005L7.70694 5.26729C7.42125 4.96737 7.43279 4.49264 7.73271 4.20694Z"
+    fill="#212121"
+  />
+</svg>`);
+const chevronDown20Filled = html.partial(`<svg
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class="default-expanded-icon"
+>
+  <path
+    d="M15.794 7.73271C16.0797 8.03263 16.0681 8.50737 15.7682 8.79306L10.5178 13.7944C10.2281 14.0703 9.77285 14.0703 9.48318 13.7944L4.23271 8.79306C3.93279 8.50737 3.92125 8.03263 4.20694 7.73271C4.49264 7.43279 4.96737 7.42125 5.26729 7.70694L10.0005 12.2155L14.7336 7.70694C15.0336 7.42125 15.5083 7.43279 15.794 7.73271Z"
+    fill="#212121"
+  />
+</svg>`);
+/**
+ * The template for the fluent-accordion component.
+ * @public
+ */
+export const template = accordionItemTemplate({
+    collapsedIcon: chevronRight20Filled,
+    expandedIcon: chevronDown20Filled,
+});
+//# sourceMappingURL=accordion-item.template.js.map

package/dist/esm/accordion-item/accordion-item.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-item.template.js","sourceRoot":"","sources":["../../../src/accordion-item/accordion-item.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAGnE,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,CAAC;;;;;;;;;;;;OAYnC,CAAC,CAAC;AAET,MAAM,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC;;;;;;;;;;;;OAYlC,CAAC,CAAC;AAET;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAuC,qBAAqB,CAAC;IAChF,aAAa,EAAE,oBAAoB;IACnC,YAAY,EAAE,mBAAmB;CAClC,CAAC,CAAC"}

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

@@ -0,0 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './accordion-item.definition.js';
+definition.define(FluentDesignSystem.registry);
+//# sourceMappingURL=define.js.map

package/dist/esm/accordion-item/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/accordion-item/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAE5D,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}

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

@@ -0,0 +1,6 @@
+export * from './accordion-item.js';
+export * from './accordion-item.options.js';
+export { styles as accordionItemStyles } from './accordion-item.styles.js';
+export { definition as accordionItemDefinition } from './accordion-item.definition.js';
+export { template as accordionItemTemplate } from './accordion-item.template.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/accordion-item/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,MAAM,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAC3E,OAAO,EAAE,UAAU,IAAI,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AACvF,OAAO,EAAE,QAAQ,IAAI,qBAAqB,EAAE,MAAM,8BAA8B,CAAC"}