[chore]: create base class for accordion item and remove style and la…

…yout specific api

packages/web-components/docs/api-report.md

@@ -51,20 +51,8 @@ export type AccordionExpandMode = ValuesOf<typeof AccordionExpandMode>;
 // Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag
 // Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "AccordionItem" because one of its declarations is marked as @internal
 //
-// @public (undocumented)
-export class AccordionItem extends FASTElement {
-    block: boolean;
-    blockChanged(prev: boolean, next: boolean): void;
-    disabled: boolean;
-    disabledChanged(prev: boolean, next: boolean): void;
-    // @internal
-    elementInternals: ElementInternals;
-    // @internal (undocumented)
-    expandbutton: HTMLElement;
-    expanded: boolean;
-    expandedChanged(prev: boolean, next: boolean): void;
-    headinglevel: 1 | 2 | 3 | 4 | 5 | 6;
-    id: string;
+// @public
+export class AccordionItem extends BaseAccordionItem {
     markerPosition?: AccordionItemMarkerPosition;
     markerPositionChanged(prev: AccordionItemMarkerPosition, next: AccordionItemMarkerPosition): void;
     size?: AccordionItemSize;
@@ -436,6 +424,22 @@ export const BadgeStyles: ElementStyles;
 // @public (undocumented)
 export const BadgeTemplate: ElementViewTemplate<Badge>;
 
+// @public (undocumented)
+export class BaseAccordionItem extends FASTElement {
+    block: boolean;
+    blockChanged(prev: boolean, next: boolean): void;
+    disabled: boolean;
+    disabledChanged(prev: boolean, next: boolean): void;
+    // @internal
+    elementInternals: ElementInternals;
+    // @internal (undocumented)
+    expandbutton: HTMLElement;
+    expanded: boolean;
+    expandedChanged(prev: boolean, next: boolean): void;
+    headinglevel: 1 | 2 | 3 | 4 | 5 | 6;
+    id: string;
+}
+
 // @public
 export class BaseAvatar extends FASTElement {
     constructor();

packages/web-components/src/accordion-item/accordion-item.ts

@@ -29,7 +29,7 @@ export type AccordionItemOptions = StartEndOptions<AccordionItem> & {
  *
  * @public
  */
-export class AccordionItem extends FASTElement {
+export class BaseAccordionItem extends FASTElement {
   /**
    * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
    *
@@ -101,46 +101,59 @@ export class AccordionItem extends FASTElement {
   public id: string = uniqueId('accordion-');
 
   /**
-   * Defines accordion header font size.
+   * Sets the width of the focus state.
    *
    * @public
    * @remarks
-   * HTML Attribute: size
+   * HTML Attribute: block
    */
-  @attr
-  public size?: AccordionItemSize;
+  @attr({ mode: 'boolean' })
+  public block: boolean = false;
 
   /**
-   * Handles changes to size attribute
+   * Handles changes to block attribute
    * @param prev - previous value
    * @param next - next value
    */
-  public sizeChanged(prev: AccordionItemSize, next: AccordionItemSize): void {
-    if (prev) {
-      toggleState(this.elementInternals, prev, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, next, true);
-    }
+  public blockChanged(prev: boolean, next: boolean): void {
+    toggleState(this.elementInternals, 'block', next);
   }
 
   /**
-   * Sets the width of the focus state.
+   * @internal
+   */
+  public expandbutton!: HTMLElement;
+}
+
+/**
+ * An Accordion Item Custom HTML Element.
+ * Based on BaseAccordionItem and includes style and layout specific attributes
+ *
+ * @public
+ */
+export class AccordionItem extends BaseAccordionItem {
+  /**
+   * Defines accordion header font size.
    *
    * @public
    * @remarks
-   * HTML Attribute: block
+   * HTML Attribute: size
    */
-  @attr({ mode: 'boolean' })
-  public block: boolean = false;
+  @attr
+  public size?: AccordionItemSize;
 
   /**
-   * Handles changes to block attribute
+   * Handles changes to size attribute
    * @param prev - previous value
    * @param next - next value
    */
-  public blockChanged(prev: boolean, next: boolean): void {
-    toggleState(this.elementInternals, 'block', next);
+  public sizeChanged(prev: AccordionItemSize, next: AccordionItemSize): void {
+    if (prev) {
+      toggleState(this.elementInternals, prev, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, next, true);
+    }
   }
 
   /**
@@ -166,11 +179,6 @@ export class AccordionItem extends FASTElement {
       toggleState(this.elementInternals, `align-${next}`, true);
     }
   }
-
-  /**
-   * @internal
-   */
-  public expandbutton!: HTMLElement;
 }
 
 /**

packages/web-components/src/accordion-item/index.ts

@@ -1,4 +1,4 @@
-export { AccordionItem } from './accordion-item.js';
+export { AccordionItem, BaseAccordionItem } 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';

packages/web-components/src/index.ts

@@ -5,6 +5,7 @@ export {
   AccordionItemSize,
   accordionItemStyles,
   accordionItemTemplate,
+  BaseAccordionItem,
 } from './accordion-item/index.js';
 export type { AccordionItemOptions } from './accordion-item/index.js';
 export {