@fluentui/web-components 3.0.0-beta.13 → 3.0.0-beta.130

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

@@ -0,0 +1,57 @@
+import type { StaticallyComposableHTML } from '../utils/index.js';
+import { StartEnd } from '../patterns/index.js';
+import type { StartEndOptions } from '../patterns/index.js';
+import { BaseAccordionItem } from './accordion-item.base.js';
+import { AccordionItemMarkerPosition, AccordionItemSize } from './accordion-item.options.js';
+export type { StaticallyComposableHTML } from '../utils/index.js';
+/**
+ * Accordion Item configuration options
+ *
+ * @tag fluent-accordion-item
+ *
+ * @public
+ */
+export type AccordionItemOptions = StartEndOptions<AccordionItem> & {
+    expandedIcon?: StaticallyComposableHTML<AccordionItem>;
+    collapsedIcon?: StaticallyComposableHTML<AccordionItem>;
+};
+/**
+ * An Accordion Item Custom HTML Element.
+ * Based on BaseAccordionItem and includes style and layout specific attributes
+ *
+ * @public
+ */
+export declare class AccordionItem extends BaseAccordionItem {
+    /**
+     * Defines accordion header font size.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: size
+     */
+    size?: AccordionItemSize;
+    /**
+     * Sets expand and collapsed icon position.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: marker-position
+     */
+    markerPosition?: AccordionItemMarkerPosition;
+    /**
+     * Sets the width of the focus state.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: block
+     */
+    block: boolean;
+}
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast/issues/3317
+ * @internal
+ */
+export interface AccordionItem extends StartEnd {
+}

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

@@ -1,67 +1,17 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { attr, FASTElement, nullableNumberConverter } from '@microsoft/fast-element';
-import { uniqueId } from '@microsoft/fast-web-utilities';
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
 import { StartEnd } from '../patterns/index.js';
 import { applyMixins } from '../utils/apply-mixins.js';
+import { BaseAccordionItem } from './accordion-item.base.js';
 /**
- *
- * @slot start - Content which can be provided between the heading and the icon
- * @slot end - Content which can be provided between the start slot and icon
- * @slot heading - Content which serves as the accordion item heading and text of the expand button
- * @slot - The default slot for accordion item content
- * @slot expanded-icon - The expanded icon
- * @slot collapsed-icon - The collapsed icon
- * @fires change - Fires a custom 'change' event when the button is invoked
- * @csspart heading - Wraps the button
- * @csspart button - The button which serves to invoke the item
- * @csspart heading-content - Wraps the slot for the heading content within the button
- * @csspart icon - The icon container
- * @csspart region - The wrapper for the accordion item content
+ * An Accordion Item Custom HTML Element.
+ * Based on BaseAccordionItem and includes style and layout specific attributes
  *
  * @public
  */
-export class AccordionItem extends FASTElement {
+export class AccordionItem extends BaseAccordionItem {
     constructor() {
         super(...arguments);
-        /**
-         * Configures the {@link https://www.w3.org/TR/wai-aria-1.1/#aria-level | level} of the
-         * heading element.
-         *
-         * @defaultValue 2
-         * @public
-         * @remarks
-         * HTML attribute: heading-level
-         */
-        this.headinglevel = 2;
-        /**
-         * Expands or collapses the item.
-         *
-         * @public
-         * @remarks
-         * HTML attribute: expanded
-         */
-        this.expanded = false;
-        /**
-         * Disables an accordion item
-         *
-         * @public
-         * @remarks
-         * HTML attribute: disabled
-         */
-        this.disabled = false;
-        /**
-         * The item ID
-         *
-         * @public
-         * @remarks
-         * HTML Attribute: id
-         */
-        this.id = uniqueId('accordion-');
         /**
          * Sets the width of the focus state.
          *
@@ -70,41 +20,16 @@ export class AccordionItem extends FASTElement {
          * HTML Attribute: block
          */
         this.block = false;
-        /**
-         * @internal
-         */
-        this.clickHandler = (e) => {
-            if (this.disabled) {
-                return;
-            }
-            this.$emit('click', e);
-        };
     }
 }
-__decorate([
-    attr({
-        attribute: 'heading-level',
-        mode: 'fromView',
-        converter: nullableNumberConverter,
-    })
-], AccordionItem.prototype, "headinglevel", void 0);
-__decorate([
-    attr({ mode: 'boolean' })
-], AccordionItem.prototype, "expanded", void 0);
-__decorate([
-    attr({ mode: 'boolean' })
-], AccordionItem.prototype, "disabled", void 0);
-__decorate([
-    attr
-], AccordionItem.prototype, "id", void 0);
 __decorate([
     attr
 ], AccordionItem.prototype, "size", void 0);
+__decorate([
+    attr({ attribute: 'marker-position' })
+], AccordionItem.prototype, "markerPosition", void 0);
 __decorate([
     attr({ mode: 'boolean' })
 ], AccordionItem.prototype, "block", void 0);
-__decorate([
-    attr({ attribute: 'expand-icon-position' })
-], AccordionItem.prototype, "expandIconPosition", void 0);
 applyMixins(AccordionItem, StartEnd);
 //# sourceMappingURL=accordion-item.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"accordion-item.js","sourceRoot":"","sources":["../../../src/accordion-item/accordion-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AACrF,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAEzD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAYvD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,OAAO,aAAc,SAAQ,WAAW;IAA9C;;QACE;;;;;;;;WAQG;QAMI,iBAAY,GAA0B,CAAC,CAAC;QAE/C;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;QAEjC;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;QAEjC;;;;;;WAMG;QAEI,OAAE,GAAW,QAAQ,CAAC,YAAY,CAAC,CAAC;QAa3C;;;;;;WAMG;QAEI,UAAK,GAAY,KAAK,CAAC;QAkB9B;;WAEG;QACI,iBAAY,GAAG,CAAC,CAAa,EAAE,EAAE;YACtC,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YAED,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;QACzB,CAAC,CAAC;IACJ,CAAC;CAAA;AA/EC;IALC,IAAI,CAAC;QACJ,SAAS,EAAE,eAAe;QAC1B,IAAI,EAAE,UAAU;QAChB,SAAS,EAAE,uBAAuB;KACnC,CAAC;mDAC6C;AAU/C;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;+CACO;AAUjC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;+CACO;AAUjC;IADC,IAAI;yCACsC;AAW3C;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;AA2B9D,WAAW,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"accordion-item.js","sourceRoot":"","sources":["../../../src/accordion-item/accordion-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAiB7D;;;;;GAKG;AACH,MAAM,OAAO,aAAc,SAAQ,iBAAiB;IAApD;;QAqBE;;;;;;WAMG;QAEI,UAAK,GAAY,KAAK,CAAC;IAChC,CAAC;CAAA;AArBQ;IADN,IAAI;2CAC2B;AAUzB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;qDACa;AAU7C;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;4CACI;AAWhC,WAAW,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC"}

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

@@ -0,0 +1,27 @@
+import type { ValuesOf } from '../utils/index.js';
+/**
+ * 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 type AccordionItemSize = ValuesOf<typeof AccordionItemSize>;
+/**
+ * An Accordion Item expand/collapse icon can appear at the start or end of the accordion
+ */
+export declare const AccordionItemMarkerPosition: {
+    readonly start: "start";
+    readonly end: "end";
+};
+/**
+ * Applies expand/collapse icon position
+ * @public
+ */
+export type AccordionItemMarkerPosition = ValuesOf<typeof AccordionItemMarkerPosition>;

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

@@ -10,7 +10,7 @@ export const AccordionItemSize = {
 /**
  * An Accordion Item expand/collapse icon can appear at the start or end of the accordion
  */
-export const AccordionItemExpandIconPosition = {
+export const AccordionItemMarkerPosition = {
     start: 'start',
     end: 'end',
 };

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

@@ -1 +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"}
+{"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,2BAA2B,GAAG;IACzC,KAAK,EAAE,OAAO;IACd,GAAG,EAAE,KAAK;CACF,CAAC"}

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

@@ -13,7 +13,6 @@ export const styles = css `
     height: 44px;
     display: grid;
     position: relative;
-    vertical-align: middle;
     padding-inline: ${spacingHorizontalM} ${spacingHorizontalMNudge};
     border-radius: ${borderRadiusMedium};
     font-family: ${fontFamilyBase};
@@ -23,29 +22,20 @@ export const styles = css `
     grid-template-columns: auto auto 1fr auto;
   }
 
-  .heading-content {
-    height: 100%;
-    display: flex;
-    align-items: center;
-  }
-
   .button {
-    box-sizing: border-box;
     appearance: none;
+    background: ${colorTransparentBackground};
     border: none;
-    outline: none;
-    text-align: start;
-    cursor: pointer;
-    font-family: inherit;
-    height: 44px;
+    box-sizing: border-box;
     color: ${colorNeutralForeground1};
-    background: ${colorTransparentBackground};
-    line-height: ${lineHeightBase300};
-    height: auto;
-    padding: 0;
-    font-size: inherit;
+    cursor: pointer;
+    font: inherit;
     grid-column: auto / span 2;
     grid-row: 1;
+    height: 44px;
+    outline: none;
+    padding: 0;
+    text-align: start;
   }
 
   .button::before {
@@ -56,29 +46,30 @@ export const styles = css `
     border-radius: ${borderRadiusSmall};
   }
 
-  .icon {
+  :where(.default-marker-collapsed, .default-marker-expanded),
+  ::slotted(:is([slot='marker-collapsed'], [slot='marker-expanded'])) {
     display: flex;
     align-items: center;
     justify-content: center;
     pointer-events: none;
     position: relative;
     height: 100%;
-    padding-right: ${spacingHorizontalS};
+    padding-inline-end: ${spacingHorizontalS};
     grid-column: 1 / span 1;
     grid-row: 1;
   }
 
-  .region {
+  .content {
     margin: 0 ${spacingHorizontalM};
   }
 
-  ::slotted([slot='start']),
-  ::slotted([slot='end']) {
+  ::slotted([slot='start']) {
+    display: flex;
     justify-content: center;
     align-items: center;
     padding-right: ${spacingHorizontalS};
     grid-column: 2 / span 1;
-    grid-row: 1 / span 1;
+    grid-row: 1;
   }
 
   button:focus-visible::after {
@@ -97,30 +88,26 @@ export const styles = css `
   :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 {
+  :host([expanded]) .content {
     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 {
+  :host([expanded]) .default-marker-collapsed,
+  :host([expanded]) ::slotted([slot='marker-collapsed']),
+  :host(:not([expanded])) :is(.default-marker-expanded, .content),
+  :host(:not([expanded])) ::slotted([slot='marker-expanded']) {
     display: none;
   }
 
-  :host([expanded]) ::slotted([slot='start']),
-  :host([expanded]) ::slotted([slot='expanded-icon']),
-  :host(:not([expanded])) ::slotted([slot='collapsed-icon']),
-  ::slotted([slot='end']) {
+  :host([expanded]) ::slotted([slot='marker-expanded']),
+  :host(:not([expanded])) ::slotted([slot='marker-collapsed']) {
     display: flex;
   }
 
@@ -146,31 +133,20 @@ export const styles = css `
     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;
-  }
+  /* --- marker-position attr styles --- */
 
-  :host([expand-icon-position='end']) ::slotted(span[slot='start']),
-  :host([expand-icon-position='end']) ::slotted(span[slot='end']) {
+  :host([marker-position='end']) ::slotted([slot='start']) {
     grid-column: 1 / span 1;
-    grid-row: 1;
   }
 
-  :host([expand-icon-position='end']) .icon {
+  :host([marker-position='end']) :is(.default-marker-collapsed, .default-marker-expanded) {
     grid-column: 4 / span 1;
-    grid-row: 1;
-    display: flex;
-    padding-left: 10px;
-    padding-right: 0;
+    padding-inline-start: ${spacingHorizontalS};
+    padding-inline-end: 0;
   }
 
-  :host([expand-icon-position='end']) .button {
+  :host([marker-position='end']) .button {
     grid-column: 2 / span 3;
-    grid-row: 1;
   }
 
   /* --- Block attr styles --- */
@@ -179,19 +155,20 @@ export const styles = css `
     max-width: 100%;
   }
 
-  :host([expand-icon-position='end']) .heading {
+  :host([marker-position='end']) .heading {
     grid-template-columns: auto auto 28px;
+    padding-inline: ${spacingHorizontalM};
   }
 
-  :host([expand-icon-position='end']) .icon {
-    grid-column: 5 / span 1;
+  :host([marker-position='end']:has([slot='start'])) .heading {
+    padding-inline: ${spacingHorizontalMNudge} ${spacingHorizontalM};
   }
 
-  :host([block][expand-icon-position='end']) .heading {
+  :host([block][marker-position='end']) .heading {
     grid-template-columns: auto 1fr;
   }
 
-  :host([block][expand-icon-position='end']) .icon {
+  :host([marker-position='end']) :is(.default-marker-collapsed, .default-marker-expanded) {
     grid-column: 5 / span 1;
   }
 `;

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

@@ -1 +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,mBAAmB,CAAC;AAC5C,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"}
+{"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,mBAAmB,CAAC;AAC5C,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;;;;;;kBAMlB,0BAA0B;;;aAG/B,uBAAuB;;;;;;;;;;;;;;;;qBAgBf,iBAAiB;;;;;;;;;;;0BAWZ,kBAAkB;;;;;;gBAM5B,kBAAkB;;;;;;;qBAOb,kBAAkB;;;;;;;;;;qBAUlB,iBAAiB;;wBAEd,iBAAiB;kCACP,iBAAiB;;;;;;aAMtC,8BAA8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA4B1B,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;;;;;;;;4BAWR,kBAAkB;;;;;;;;;;;;;;;;sBAgBxB,kBAAkB;;;;sBAIlB,uBAAuB,IAAI,kBAAkB;;;;;;;;;;CAUlE,CAAC"}

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

@@ -0,0 +1,8 @@
+import { type ElementViewTemplate } from '@microsoft/fast-element';
+import type { AccordionItem, AccordionItemOptions } from './accordion-item.js';
+export declare function accordionItemTemplate<T extends AccordionItem>(options?: AccordionItemOptions): ElementViewTemplate<T>;
+/**
+ * The template for the fluent-accordion component.
+ * @public
+ */
+export declare const template: ElementViewTemplate<AccordionItem>;

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

@@ -1,5 +1,5 @@
 import { html, ref } from '@microsoft/fast-element';
-import { endSlotTemplate, startSlotTemplate } from '../patterns/index.js';
+import { startSlotTemplate } from '../patterns/index.js';
 import { staticallyCompose } from '../utils/index.js';
 const chevronRight20Filled = html.partial(`<svg
   width="20"
@@ -7,7 +7,8 @@ const chevronRight20Filled = html.partial(`<svg
   viewBox="0 0 20 20"
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
-  class="default-collapsed-icon"
+  class="default-marker-collapsed"
+  aria-hidden="true"
 >
   <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"
@@ -20,7 +21,8 @@ const chevronDown20Filled = html.partial(`<svg
   viewBox="0 0 20 20"
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
-  class="default-expanded-icon"
+  class="default-marker-expanded"
+  aria-hidden="true"
 >
   <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"
@@ -29,47 +31,26 @@ const chevronDown20Filled = html.partial(`<svg
 </svg>`);
 export function accordionItemTemplate(options = {}) {
     return html `
-      <div
-          class="heading"
-          part="heading"
-          role="heading"
-          aria-level="${x => x.headinglevel}"
+    <div class="heading" part="heading" role="heading" aria-level="${x => x.headinglevel}">
+      <button
+        class="button"
+        part="button"
+        ${ref('expandbutton')}
+        ?disabled="${x => (x.disabled ? 'true' : void 0)}"
+        aria-expanded="${x => x.expanded}"
+        aria-controls="${x => x.id}-panel"
+        id="${x => x.id}"
       >
-          <button
-              class="button"
-              part="button"
-              ${ref('expandbutton')}
-              ?disabled="${x => (x.disabled ? 'true' : void 0)}"
-              aria-expanded="${x => x.expanded}"
-              aria-controls="${x => x.id}-panel"
-              id="${x => x.id}"
-              @click="${(x, c) => x.clickHandler(c.event)}"
-          >
-              <span class="heading-content" part="heading-content">
-                  <slot name="heading"></slot>
-              </span>
-          </button>
-          ${startSlotTemplate(options)}
-          ${endSlotTemplate(options)}
-          <span class="icon" part="icon" aria-hidden="true">
-              <slot name="expanded-icon">
-                  ${staticallyCompose(options.expandedIcon)}
-              </slot>
-              <slot name="collapsed-icon">
-                  ${staticallyCompose(options.collapsedIcon)}
-              </slot>
-          <span>
-      </div>
-      <div
-          class="region"
-          part="region"
-          id="${x => x.id}-panel"
-          role="region"
-          aria-labelledby="${x => x.id}"
-      >
-          <slot></slot>
-      </div>
-`;
+        <slot name="heading"></slot>
+      </button>
+      ${startSlotTemplate(options)}
+      <slot name="marker-expanded"> ${staticallyCompose(options.expandedIcon)} </slot>
+      <slot name="marker-collapsed"> ${staticallyCompose(options.collapsedIcon)} </slot>
+    </div>
+    <div class="content" part="content" id="${x => x.id}-panel" role="region" aria-labelledby="${x => x.id}">
+      <slot></slot>
+    </div>
+  `;
 }
 /**
  * The template for the fluent-accordion component.

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

@@ -1 +1 @@
-{"version":3,"file":"accordion-item.template.js","sourceRoot":"","sources":["../../../src/accordion-item/accordion-item.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAGtD,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,CAAC;;;;;;;;;;;;OAYnC,CAAC,CAAC;AAET,MAAM,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC;;;;;;;;;;;;OAYlC,CAAC,CAAC;AAET,MAAM,UAAU,qBAAqB,CACnC,UAAgC,EAAE;IAElC,OAAO,IAAI,CAAG;;;;;wBAKQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;;;;;gBAK3B,GAAG,CAAC,cAAc,CAAC;2BACR,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;+BAC/B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;+BACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;oBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;wBACL,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;;;;;;YAM3D,iBAAiB,CAAC,OAAO,CAAC;YAC1B,eAAe,CAAC,OAAO,CAAC;;;oBAGhB,iBAAiB,CAAC,OAAO,CAAC,YAAY,CAAC;;;oBAGvC,iBAAiB,CAAC,OAAO,CAAC,aAAa,CAAC;;;;;;;gBAO5C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;;6BAEI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;;;;CAIrC,CAAC;AACF,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAuC,qBAAqB,CAAC;IAChF,aAAa,EAAE,oBAAoB;IACnC,YAAY,EAAE,mBAAmB;CAClC,CAAC,CAAC"}
+{"version":3,"file":"accordion-item.template.js","sourceRoot":"","sources":["../../../src/accordion-item/accordion-item.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAGtD,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,CAAC;;;;;;;;;;;;;OAanC,CAAC,CAAC;AAET,MAAM,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC;;;;;;;;;;;;;OAalC,CAAC,CAAC;AAET,MAAM,UAAU,qBAAqB,CACnC,UAAgC,EAAE;IAElC,OAAO,IAAI,CAAG;qEACqD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;;;;UAI9E,GAAG,CAAC,cAAc,CAAC;qBACR,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;yBAC/B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;yBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;cACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;;;;QAIf,iBAAiB,CAAC,OAAO,CAAC;sCACI,iBAAiB,CAAC,OAAO,CAAC,YAAY,CAAC;uCACtC,iBAAiB,CAAC,OAAO,CAAC,aAAa,CAAC;;8CAEjC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,0CAA0C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;;;GAGvG,CAAC;AACJ,CAAC;AAED;;;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/index.d.ts

@@ -0,0 +1,7 @@
+export { BaseAccordionItem } from './accordion-item.base.js';
+export { AccordionItem } from './accordion-item.js';
+export type { AccordionItemOptions } from './accordion-item.js';
+export { AccordionItemSize, AccordionItemMarkerPosition } 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/esm/accordion-item/index.js

@@ -1,5 +1,6 @@
-export * from './accordion-item.js';
-export * from './accordion-item.options.js';
+export { BaseAccordionItem } from './accordion-item.base.js';
+export { AccordionItem } from './accordion-item.js';
+export { AccordionItemSize, AccordionItemMarkerPosition } 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/esm/accordion-item/index.js.map

@@ -1 +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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/accordion-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,iBAAiB,EAAE,2BAA2B,EAAE,MAAM,6BAA6B,CAAC;AAC7F,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"}