@fluentui/web-components 3.0.0-alpha.3 → 3.0.0-alpha.5

package/CHANGELOG.json

@@ -2,7 +2,75 @@
   "name": "@fluentui/web-components",
   "entries": [
     {
-      "date": "Wed, 15 Feb 2023 04:24:29 GMT",
+      "date": "Wed, 22 Feb 2023 04:22:33 GMT",
+      "tag": "@fluentui/web-components_v3.0.0-alpha.5",
+      "version": "3.0.0-alpha.5",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "brianbrady@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "1ad2597f744bf7c3e2eada7720eea793fcee660e",
+            "comment": "feat(accordion): Add accordion web component"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 21 Feb 2023 04:21:36 GMT",
+      "tag": "@fluentui/web-components_v3.0.0-alpha.4",
+      "version": "3.0.0-alpha.4",
+      "comments": {
+        "none": [
+          {
+            "author": "miroslav.stastny@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "57f2ea7f8389f1409fba6fb0697708ddf8fb05d9",
+            "comment": "docs: Add landing page"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 17 Feb 2023 04:19:53 GMT",
+      "tag": "@fluentui/web-components_v3.0.0-alpha.4",
+      "version": "3.0.0-alpha.4",
+      "comments": {
+        "none": [
+          {
+            "author": "jslone@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "b79b33d10cbd6015531fa943e0e6dbe7f84b9b42",
+            "comment": "chore: run manually to bump wc to fix failed CI release"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 16 Feb 2023 16:51:48 GMT",
+      "tag": "@fluentui/web-components_v3.0.0-alpha.4",
+      "version": "3.0.0-alpha.4",
+      "comments": {
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "ae03f3eec389aca7e15fde295868aacd51eb1822",
+            "comment": "chore(web-components): introduce ts-solution configs and monorepo setup/DX"
+          }
+        ],
+        "prerelease": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "226b7af089cea03d27ec722cabc73d018f263fd1",
+            "comment": "fix(web-components): dont ship non production assets to npm registry"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 15 Feb 2023 04:24:51 GMT",
       "tag": "@fluentui/web-components_v3.0.0-alpha.3",
       "version": "3.0.0-alpha.3",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,30 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Wed, 15 Feb 2023 04:24:29 GMT and should not be manually modified.
+This log was last generated on Wed, 22 Feb 2023 04:22:33 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [3.0.0-alpha.5](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.5)
+
+Wed, 22 Feb 2023 04:22:33 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.4..@fluentui/web-components_v3.0.0-alpha.5)
+
+### Changes
+
+- feat(accordion): Add accordion web component ([PR #26547](https://github.com/microsoft/fluentui/pull/26547) by brianbrady@microsoft.com)
+
+## [3.0.0-alpha.4](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.4)
+
+Thu, 16 Feb 2023 16:51:48 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.3..@fluentui/web-components_v3.0.0-alpha.4)
+
+### Changes
+
+- fix(web-components): dont ship non production assets to npm registry ([PR #26854](https://github.com/microsoft/fluentui/pull/26854) by martinhochel@microsoft.com)
+
 ## [3.0.0-alpha.3](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.3)
 
-Wed, 15 Feb 2023 04:24:29 GMT 
+Wed, 15 Feb 2023 04:24:51 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.2..@fluentui/web-components_v3.0.0-alpha.3)
 
 ### Changes

package/dist/dts/accordion/accordion.d.ts

@@ -0,0 +1,7 @@
+import { FASTAccordion } from '@microsoft/fast-foundation';
+/**
+ * The base class used for constructing a fluent-accordion custom element
+ * @public
+ */
+export declare class Accordion extends FASTAccordion {
+}

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

@@ -0,0 +1,11 @@
+import { Accordion } from './accordion.js';
+/**
+ * The Fluent Accordion Element. Implements {@link @microsoft/fast-foundation#Accordion },
+ * {@link @microsoft/fast-foundation#accordionTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-accordion\>
+ */
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof Accordion>;

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

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

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

@@ -0,0 +1,3 @@
+import { ElementViewTemplate } from '@microsoft/fast-element';
+import type { Accordion } from './accordion.js';
+export declare const template: ElementViewTemplate<Accordion>;

package/dist/dts/accordion/define.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,4 @@
+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';

package/dist/dts/accordion-item/accordion-item.d.ts

@@ -0,0 +1,33 @@
+import { FASTAccordionItem } from '@microsoft/fast-foundation';
+import { AccordionItemExpandIconPosition, AccordionItemSize } from './accordion-item.options.js';
+/**
+ * @internal
+ */
+export declare class AccordionItem extends FASTAccordionItem {
+    /**
+     * Defines accordion header font size.
+     *
+     * @public
+     * @default 'medium'
+     * @remarks
+     * HTML Attribute: size
+     */
+    size: AccordionItemSize;
+    /**
+     * Sets the width of the focus state.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: block
+     */
+    block: boolean;
+    /**
+     * Sets expand and collapsed icon position.
+     *
+     * @public
+     * @default 'start'
+     * @remarks
+     * HTML Attribute: expandIconPosition
+     */
+    expandIconPosition: AccordionItemExpandIconPosition;
+}

package/dist/dts/accordion-item/accordion-item.definition.d.ts

@@ -0,0 +1,11 @@
+import { AccordionItem } from './accordion-item.js';
+/**
+ * The Fluent AccordionItem Element. Implements {@link @microsoft/fast-foundation#AccordionItem },
+ * {@link @microsoft/fast-foundation#accordionItemTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-accordion-item\>
+ */
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof AccordionItem>;

package/dist/dts/accordion-item/accordion-item.options.d.ts

@@ -0,0 +1,27 @@
+import { ValuesOf } from '@microsoft/fast-foundation';
+/**
+ * An Accordion Item header font size can be small, medium, large, and extra-large
+ */
+export declare const AccordionItemSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+    readonly extraLarge: "extra-large";
+};
+/**
+ * Applies font size to accordion header
+ * @public
+ */
+export declare type AccordionItemSize = ValuesOf<typeof AccordionItemSize>;
+/**
+ * An Accordion Item expand/collapse icon can appear at the start or end of the accordion
+ */
+export declare const AccordionItemExpandIconPosition: {
+    readonly start: "start";
+    readonly end: "end";
+};
+/**
+ * Applies expand/collapse icon position
+ * @public
+ */
+export declare type AccordionItemExpandIconPosition = ValuesOf<typeof AccordionItemExpandIconPosition>;

package/dist/dts/accordion-item/accordion-item.styles.d.ts

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

package/dist/dts/accordion-item/accordion-item.template.d.ts

@@ -0,0 +1,7 @@
+import { ElementViewTemplate } from '@microsoft/fast-element';
+import { AccordionItem } from './accordion-item.js';
+/**
+ * The template for the fluent-accordion component.
+ * @public
+ */
+export declare const template: ElementViewTemplate<AccordionItem>;

package/dist/dts/accordion-item/define.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/dts/accordion-item/index.d.ts

@@ -0,0 +1,5 @@
+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';

package/dist/dts/index.d.ts

@@ -1,3 +1,5 @@
+export * from './accordion/index.js';
+export * from './accordion-item/index.js';
 export * from './badge/index.js';
 export * from './counter-badge/index.js';
 export * from './progress-bar/index.js';

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,11 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+export const styles = css `
+  ${display('flex')}
+
+  :host {
+    flex-direction: column;
+    width: 100%;
+  }
+`;
+//# 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;;;;;;CAMlB,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;2CAC0B;AAU/B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;4CACI;AAW9B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,sBAAsB,EAAE,CAAC;yDACe"}

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,197 @@
+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;
+  }
+
+  .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;;;;;;;;;;;sBAWE,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