@fluentui/web-components 3.0.0-beta.9 → 3.0.0-beta.91

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

@@ -0,0 +1,38 @@
+import { TreeItemAppearance, TreeItemSize } from './tree-item.options.js';
+import { BaseTreeItem } from './tree-item.base.js';
+export declare class TreeItem extends BaseTreeItem {
+    /**
+     * The size of the tree item element
+     * @public
+     */
+    size: TreeItemSize;
+    /**
+     * Handles changes to the size attribute
+     * we update the child tree items' size based on the size
+     *  @internal
+     */
+    private sizeChanged;
+    /**
+     * The size of the tree item element
+     * @public
+     */
+    appearance: TreeItemAppearance;
+    /**
+     * Handles changes to the appearance attribute
+     *
+     * @internal
+     */
+    private appearanceChanged;
+    /**
+     * child tree items supered change event
+     * @internal
+     */
+    childTreeItemsChanged(): void;
+    /**
+     * 1. Update the child items' size based on the tree's size
+     * 2. Update the child items' appearance based on the tree's appearance
+     *
+     * @public
+     */
+    updateSizeAndAppearance(): void;
+}

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

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

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

@@ -0,0 +1,22 @@
+import { ValuesOf } from '../utils/typings.js';
+import { BaseTreeItem } from './tree-item.base.js';
+export declare const TreeItemAppearance: {
+    readonly subtle: "subtle";
+    readonly subtleAlpha: "subtle-alpha";
+    readonly transparent: "transparent";
+};
+export type TreeItemAppearance = ValuesOf<typeof TreeItemAppearance>;
+export declare const TreeItemSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+};
+export type TreeItemSize = ValuesOf<typeof TreeItemSize>;
+/**
+ * Predicate function that determines if the element should be considered an tree-item.
+ *
+ * @param element - The element to check.
+ * @param tagName - The tag name to check.
+ * @returns true if the element is a dropdown.
+ * @public
+ */
+export declare function isTreeItem(element?: Node | null, tagName?: string): element is BaseTreeItem;

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

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

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

@@ -0,0 +1,2 @@
+import type { TreeItem } from './tree-item.js';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<TreeItem, any>;

package/dist/dts/tsdoc-metadata.json

@@ -0,0 +1,11 @@
+// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
+// It should be published with your NPM package.  It should not be tracked by Git.
+{
+  "tsdocVersion": "0.12",
+  "toolPackages": [
+    {
+      "packageName": "@microsoft/api-extractor",
+      "packageVersion": "7.49.1"
+    }
+  ]
+}

package/dist/dts/utils/behaviors/match-media-stylesheet-behavior.d.ts

@@ -0,0 +1,124 @@
+import type { ElementStyles, HostBehavior, HostController } from '@microsoft/fast-element';
+/**
+ * An event listener fired by a {@link https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList | MediaQueryList }.
+ * @public
+ */
+export type MediaQueryListListener = (this: MediaQueryList, ev?: MediaQueryListEvent) => void;
+/**
+ * An abstract behavior to react to media queries. Implementations should implement
+ * the `constructListener` method to perform some action based on media query changes.
+ *
+ * @public
+ */
+export declare abstract class MatchMediaBehavior implements HostBehavior {
+    /**
+     * The behavior needs to operate on element instances but elements might share a behavior instance.
+     * To ensure proper attachment / detachment per instance, we construct a listener for
+     * each bind invocation and cache the listeners by element reference.
+     */
+    private listenerCache;
+    /**
+     * The media query that the behavior operates on.
+     */
+    readonly query: MediaQueryList;
+    /**
+     *
+     * @param query - The media query to operate from.
+     */
+    constructor(query: MediaQueryList);
+    /**
+     * Constructs a function that will be invoked with the MediaQueryList context
+     * @param controller - The host controller orchestrating this behavior.
+     */
+    protected abstract constructListener(controller: HostController): MediaQueryListListener;
+    /**
+     * Binds the behavior to the element.
+     * @param controller - The host controller orchestrating this behavior.
+     */
+    connectedCallback(controller: HostController): void;
+    /**
+     * Unbinds the behavior from the element.
+     * @param controller - The host controller orchestrating this behavior.
+     */
+    disconnectedCallback(controller: HostController): void;
+}
+/**
+ * A behavior to add or remove a stylesheet from an element based on a media query. The behavior ensures that
+ * styles are applied while the a query matches the environment and that styles are not applied if the query does
+ * not match the environment.
+ *
+ * @public
+ */
+export declare class MatchMediaStyleSheetBehavior extends MatchMediaBehavior {
+    /**
+     * The media query that the behavior operates on.
+     */
+    readonly query: MediaQueryList;
+    /**
+     * The styles object to be managed by the behavior.
+     */
+    readonly styles: ElementStyles;
+    /**
+     * Constructs a {@link MatchMediaStyleSheetBehavior} instance.
+     * @param query - The media query to operate from.
+     * @param styles - The styles to coordinate with the query.
+     */
+    constructor(query: MediaQueryList, styles: ElementStyles);
+    /**
+     * Defines a function to construct {@link MatchMediaStyleSheetBehavior | MatchMediaStyleSheetBehaviors} for
+     * a provided query.
+     * @param query - The media query to operate from.
+     *
+     * @public
+     * @example
+     *
+     * ```ts
+     * import { css } from "@microsoft/fast-element";
+     * import { MatchMediaStyleSheetBehavior } from "@fluentui/web-components";
+     *
+     * const landscapeBehavior = MatchMediaStyleSheetBehavior.with(
+     *   window.matchMedia("(orientation: landscape)")
+     * );
+     *
+     * const styles = css`
+     *   :host {
+     *     width: 200px;
+     *     height: 400px;
+     *   }
+     * `
+     * .withBehaviors(landscapeBehavior(css`
+     *   :host {
+     *     width: 400px;
+     *     height: 200px;
+     *   }
+     * `))
+     * ```
+     */
+    static with(query: MediaQueryList): (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
+    /**
+     * Constructs a match-media listener for a provided element.
+     * @param source - the element for which to attach or detach styles.
+     */
+    protected constructListener(controller: HostController): MediaQueryListListener;
+    /**
+     * Unbinds the behavior from the element.
+     * @param controller - The host controller orchestrating this behavior.
+     * @internal
+     */
+    removedCallback(controller: HostController<any>): void;
+}
+/**
+ * This can be used to construct a behavior to apply a forced-colors only stylesheet.
+ * @public
+ */
+export declare const forcedColorsStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
+/**
+ * This can be used to construct a behavior to apply a prefers color scheme: dark only stylesheet.
+ * @public
+ */
+export declare const darkModeStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
+/**
+ * This can be used to construct a behavior to apply a prefers color scheme: light only stylesheet.
+ * @public
+ */
+export declare const lightModeStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;

package/dist/dts/utils/converters.d.ts

@@ -0,0 +1,17 @@
+import type { ValueConverter } from '@microsoft/fast-element';
+/**
+ * A {@link ValueConverter} that makes sure the attribute and property values
+ * are a string representation of a number, e.g. `'10'` instead of `10`.
+ *
+ * @remarks
+ * This converter allows any data type, but if the data is evaluated as `NaN`
+ * by `Number.isNaN()`, it’d be converted to an empty string. Otherwise, the
+ * converted value is a string of number.
+ *
+ * It is useful for somm  custom element’s attributes and properties, e.g.
+ * `min`, `max`, `step` on an `<input type=range>`-like element, to align with
+ * the built-in HTML element behavior, those property values should be strings.
+ *
+ * @public
+ */
+export declare const numberLikeStringConverter: ValueConverter;

package/dist/dts/utils/display.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Define all possible CSS display values.
+ * @public
+ */
+export type CSSDisplayPropertyValue = 'block' | 'contents' | 'flex' | 'grid' | 'inherit' | 'initial' | 'inline' | 'inline-block' | 'inline-flex' | 'inline-grid' | 'inline-table' | 'list-item' | 'none' | 'run-in' | 'table' | 'table-caption' | 'table-cell' | 'table-column' | 'table-column-group' | 'table-footer-group' | 'table-header-group' | 'table-row' | 'table-row-group';
+/**
+ * A CSS fragment to set `display: none;` when the host is hidden using the [hidden] attribute.
+ * @public
+ */
+export declare const hidden = ":host([hidden]){display:none}";
+/**
+ * Applies a CSS display property.
+ * Also adds CSS rules to not display the element when the [hidden] attribute is applied to the element.
+ * @param display - The CSS display property value
+ * @public
+ */
+export declare function display(displayValue: CSSDisplayPropertyValue): string;

package/dist/dts/utils/element-internals.d.ts

@@ -0,0 +1,54 @@
+import { CustomStatesSetSupported } from './support.js';
+/**
+ * Inference type for a CSS custom state selector.
+ * @public
+ */
+export type StateSelector<S> = S extends string ? `:state(${S})` | `[state--${S}]` : never;
+export { CustomStatesSetSupported };
+/**
+ * Returns a string that represents a CSS custom state selector.
+ *
+ * @param state - the state value.
+ * @returns a string that represents a CSS state selector, or a custom attribute selector if the browser does not
+ * support Custom States.
+ *
+ * @public
+ */
+export declare function stateSelector<S extends string>(state: S): StateSelector<S>;
+/**
+ * This function is used to toggle a state on the control. If the browser supports Custom States, the state is toggled
+ * on the `ElementInternals.states` set. If the browser does not support Custom States, the state is toggled on the host
+ * element as an attribute with the format `state--{state}`.
+ *
+ * @see The {@link https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet | CustomStateSet} interface
+ * @see The {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | ElementInternals} interface
+ * @see The CSS {@link https://developer.mozilla.org/en-US/docs/Web/CSS/:state | `:state()`} pseudo-class
+ *
+ * @param elementInternals - the `ElementInternals` instance for the component
+ * @param state - the state to toggle
+ * @param force - force the state to be toggled on or off
+ * @internal
+ */
+export declare function toggleState(elementInternals: ElementInternals | undefined, state: string | undefined, force?: boolean): void;
+/**
+ * Check if a given attribute value is a valid state. Attribute values are often kebab-cased, so this function converts
+ * the kebab-cased `state` to camelCase and checks if it exists in as a key in the `States` object.
+ *
+ * @param States  - the object containing valid states for the attribute
+ * @param state - the state to check
+ * @returns true if the state is in the States object
+ * @internal
+ */
+export declare function hasMatchingState(States: Record<string, string> | undefined, state: string | undefined): boolean;
+/**
+ * Swap an old state for a new state.
+ *
+ * @param elementInternals - the `ElementInternals` instance for the component
+ * @param prev - the previous state to remove
+ * @param next - the new state to add
+ * @param States - the object containing valid states for the attribute
+ * @param prefix - an optional prefix to add to the state
+ *
+ * @internal
+ */
+export declare function swapStates(elementInternals: ElementInternals, prev?: string | undefined, next?: string | undefined, States?: Record<string, string>, prefix?: string): void;

package/dist/dts/utils/focusable-element.d.ts

@@ -0,0 +1,3 @@
+export declare const isARIADisabledElement: (el: Element) => boolean;
+export declare const isHiddenElement: (el: Element) => boolean;
+export declare const isFocusableElement: (el: Element) => boolean;

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

@@ -1,4 +1,8 @@
+export * from './converters.js';
 export * from './direction.js';
 export * from './typings.js';
 export * from './template-helpers.js';
 export * from './whitespace-filter.js';
+export * from './display.js';
+export * from './behaviors/match-media-stylesheet-behavior.js';
+export * from './support.js';

package/dist/dts/utils/language.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Determines the current language code of an element.
+ *
+ * @param rootNode - the HTMLElement to begin the query from, usually "this" when used in a component controller
+ * @returns the language code of the element
+ *
+ * @public
+ */
+export declare function getLanguage(rootNode: HTMLElement): Intl.BCP47LanguageTag;

package/dist/dts/utils/root-active-element.d.ts

@@ -0,0 +1 @@
+export declare function getRootActiveElement(element: Element): Element | null;

package/dist/dts/utils/support.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Check if the browser supports CSS Anchor Positioning.
+ * @public
+ */
+export declare const AnchorPositioningCSSSupported: boolean;
+/**
+ * Check if the browser supports HTML Anchor Positioning.
+ * @public
+ */
+export declare const AnchorPositioningHTMLSupported: boolean;
+/**
+ * Check if the browser supports Custom States.
+ * @public
+ */
+export declare const CustomStatesSetSupported: boolean;

package/dist/dts/utils/template-helpers.d.ts

@@ -1,5 +1,4 @@
-import { CaptureType, HTMLDirective } from '@microsoft/fast-element';
-import type { SyntheticViewTemplate } from '@microsoft/fast-element';
+import { type CaptureType, type HTMLDirective, type SyntheticViewTemplate } from '@microsoft/fast-element';
 /**
  * A value that can be statically composed into a
  * foundation template.
@@ -8,7 +7,7 @@ import type { SyntheticViewTemplate } from '@microsoft/fast-element';
  * safe and will not enable an XSS attack.
  * @public
  */
-export declare type StaticallyComposableHTML<TSource = any, TParent = any> = string | HTMLDirective | SyntheticViewTemplate<TSource, TParent> | undefined;
+export type StaticallyComposableHTML<TSource = any, TParent = any> = string | HTMLDirective | SyntheticViewTemplate<TSource, TParent> | undefined;
 /**
  * A function to compose template options.
  * @public

package/dist/dts/utils/typings.d.ts

@@ -3,4 +3,4 @@
  * Example: export type Foo = ValuesOf\<typeof Foo\>
  * @public
  */
-export declare type ValuesOf<T> = T[keyof T];
+export type ValuesOf<T> = T[keyof T];

package/dist/dts/utils/unique-id.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Generates a unique element id.
+ *
+ * @param prefix - The prefix to use for the unique id.
+ * @returns A unique id.
+ *
+ * @public
+ */
+export declare function uniqueId(prefix?: string): string;

package/dist/esm/accordion/accordion.bench.js

@@ -0,0 +1,30 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition as accordionItemDefinition } from '../accordion-item/accordion-item.definition.js';
+import { definition as accordiongDefinition } from './accordion.definition.js';
+accordiongDefinition.define(FluentDesignSystem.registry);
+accordionItemDefinition.define(FluentDesignSystem.registry);
+const itemRenderer = () => {
+    const accordion = document.createElement('fluent-accordion');
+    const accordionItem = document.createElement('fluent-accordion-item');
+    const accordionItem2 = document.createElement('fluent-accordion-item');
+    const accordionItem3 = document.createElement('fluent-accordion-item');
+    const heading = document.createElement('span');
+    const heading2 = document.createElement('span');
+    const heading3 = document.createElement('span');
+    heading.setAttribute('slot', 'heading');
+    heading2.setAttribute('slot', 'heading');
+    heading3.setAttribute('slot', 'heading');
+    heading.appendChild(document.createTextNode('Accordion item 1'));
+    heading2.appendChild(document.createTextNode('Accordion item 2'));
+    heading3.appendChild(document.createTextNode('Accordion item 3'));
+    accordionItem.appendChild(heading);
+    accordionItem2.appendChild(heading2);
+    accordionItem3.appendChild(heading3);
+    accordion.appendChild(accordionItem);
+    accordion.appendChild(accordionItem2);
+    accordion.appendChild(accordionItem3);
+    return accordion;
+};
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';
+//# sourceMappingURL=accordion.bench.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.bench.js","sourceRoot":"","sources":["../../../src/accordion/accordion.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,IAAI,uBAAuB,EAAE,MAAM,gDAAgD,CAAC;AACvG,OAAO,EAAE,UAAU,IAAI,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAE/E,oBAAoB,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AACzD,uBAAuB,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAE5D,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC7D,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IACtE,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IACvE,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IACvE,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/C,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAChD,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAEhD,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACxC,QAAQ,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACzC,QAAQ,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACzC,OAAO,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACjE,QAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAClE,QAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAElE,aAAa,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IACnC,cAAc,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;IACrC,cAAc,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;IAErC,SAAS,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;IACrC,SAAS,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;IACtC,SAAS,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;IAEtC,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/accordion/accordion.js

@@ -1,20 +1,15 @@
-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 { __decorate } from "tslib";
 import { Observable } from '@microsoft/fast-element';
 import { attr, FASTElement, observable } from '@microsoft/fast-element';
-import { keyArrowDown, keyArrowUp, keyEnd, keyHome, wrapInBounds } from '@microsoft/fast-web-utilities';
-import { AccordionItem } from '../accordion-item/accordion-item.js';
+import { BaseAccordionItem } from '../accordion-item/accordion-item.base.js';
 import { AccordionExpandMode } from './accordion.options.js';
 /**
  * An Accordion Custom HTML Element
  * Implements {@link https://www.w3.org/TR/wai-aria-practices-1.1/#accordion | ARIA Accordion}.
  *
+ * @slot - The default slot for the accordion items
  * @fires change - Fires a custom 'change' event when the active item changes
- * @csspart item - The slot for the accordion items
+ *
  * @public
  */
 export class Accordion extends FASTElement {
@@ -30,53 +25,53 @@ export class Accordion extends FASTElement {
          */
         this.expandmode = AccordionExpandMode.multi;
         this.activeItemIndex = 0;
-        this.change = () => {
-            this.$emit('change', this.activeid);
-        };
+        /**
+         * Resets event listeners and sets the `accordionItems` property
+         * then rebinds event listeners to each non-disabled item
+         * @returns {void}
+         */
         this.setItems = () => {
             if (this.slottedAccordionItems.length === 0) {
                 return;
             }
+            // Get all existing children and remove event listeners
             const children = Array.from(this.children);
             this.removeItemListeners(children);
+            // Resubscribe to the `disabled` attribute of all children
             children.forEach((child) => Observable.getNotifier(child).subscribe(this, 'disabled'));
+            // Add event listeners to each non-disabled AccordionItem
             this.accordionItems = children.filter(child => !child.hasAttribute('disabled'));
-            this.accordionIds = this.getItemIds();
             this.accordionItems.forEach((item, index) => {
-                if (item instanceof AccordionItem) {
-                    item.addEventListener('click', this.activeItemChange);
-                    item.addEventListener('keydown', this.handleItemKeyDown);
-                    item.addEventListener('focus', this.handleItemFocus);
+                if (item instanceof BaseAccordionItem) {
+                    item.addEventListener('click', this.expandedChangedHandler);
+                    // Subscribe to the expanded attribute of the item
                     Observable.getNotifier(item).subscribe(this, 'expanded');
                 }
-                const itemId = this.accordionIds[index];
-                item.setAttribute('id', typeof itemId !== 'string' ? `accordion-${index + 1}` : itemId);
-                this.activeid = this.accordionIds[this.activeItemIndex];
             });
             if (this.isSingleExpandMode()) {
                 const expandedItem = this.findExpandedItem();
                 this.setSingleExpandMode(expandedItem);
             }
         };
+        /**
+         * Removes event listeners from the previous accordion items
+         * @param oldValue An array of the previous accordion items
+         */
         this.removeItemListeners = (oldValue) => {
             oldValue.forEach((item, index) => {
                 Observable.getNotifier(item).unsubscribe(this, 'disabled');
                 Observable.getNotifier(item).unsubscribe(this, 'expanded');
-                item.removeEventListener('click', this.activeItemChange);
-                item.removeEventListener('keydown', this.handleItemKeyDown);
-                item.removeEventListener('focus', this.handleItemFocus);
+                item.removeEventListener('click', this.expandedChangedHandler);
             });
         };
-        this.activeItemChange = (event) => {
-            if (event.defaultPrevented || event.target !== event.currentTarget) {
-                return;
-            }
-            event.preventDefault();
-            this.handleExpandedChange(event.target);
-        };
-        this.handleExpandedChange = (item) => {
-            if (item instanceof AccordionItem) {
-                this.activeid = item.getAttribute('id');
+        /**
+         * Changes the expanded state of the accordion item
+         * @param evt Click event
+         * @returns
+         */
+        this.expandedChangedHandler = (evt) => {
+            const item = evt.target;
+            if (item instanceof BaseAccordionItem) {
                 if (!this.isSingleExpandMode()) {
                     item.expanded = !item.expanded;
                     // setSingleExpandMode sets activeItemIndex on its own
@@ -85,45 +80,7 @@ export class Accordion extends FASTElement {
                 else {
                     this.setSingleExpandMode(item);
                 }
-                this.change();
-            }
-        };
-        this.handleItemKeyDown = (event) => {
-            // only handle the keydown if the event target is the accordion item
-            // prevents arrow keys from moving focus to accordion headers when focus is on accordion item panel content
-            if (event.target !== event.currentTarget) {
-                return;
-            }
-            this.accordionIds = this.getItemIds();
-            switch (event.key) {
-                case keyArrowUp:
-                    event.preventDefault();
-                    this.adjust(-1);
-                    break;
-                case keyArrowDown:
-                    event.preventDefault();
-                    this.adjust(1);
-                    break;
-                case keyHome:
-                    this.activeItemIndex = 0;
-                    this.focusItem();
-                    break;
-                case keyEnd:
-                    this.activeItemIndex = this.accordionItems.length - 1;
-                    this.focusItem();
-                    break;
-            }
-        };
-        this.handleItemFocus = (event) => {
-            // update the active item index if the focus moves to an accordion item via a different method other than the up and down arrow key actions
-            // only do so if the focus is actually on the accordion item and not on any of its children
-            if (event.target === event.currentTarget) {
-                const focusedItem = event.target;
-                const focusedIndex = (this.activeItemIndex = Array.from(this.accordionItems).indexOf(focusedItem));
-                if (this.activeItemIndex !== focusedIndex && focusedIndex !== -1) {
-                    this.activeItemIndex = focusedIndex;
-                    this.activeid = this.accordionIds[this.activeItemIndex];
-                }
+                this.$emit('change');
             }
         };
     }
@@ -135,12 +92,12 @@ export class Accordion extends FASTElement {
         if (!expandedItem) {
             return;
         }
-        if (next !== AccordionExpandMode.single) {
-            expandedItem === null || expandedItem === void 0 ? void 0 : expandedItem.expandbutton.removeAttribute('aria-disabled');
-        }
-        else {
+        if (next === AccordionExpandMode.single) {
             this.setSingleExpandMode(expandedItem);
+            return;
         }
+        // Clean up single expand mode behavior
+        expandedItem?.expandbutton.removeAttribute('aria-disabled');
     }
     /**
      * @internal
@@ -151,6 +108,7 @@ export class Accordion extends FASTElement {
         }
     }
     /**
+     * Watch for changes to the slotted accordion items `disabled` and `expanded` attributes
      * @internal
      */
     handleChange(source, propertyName) {
@@ -165,13 +123,28 @@ export class Accordion extends FASTElement {
             }
         }
     }
+    /**
+     * Find the first expanded item in the accordion
+     * @returns {void}
+     */
     findExpandedItem() {
-        var _a;
         if (this.accordionItems.length === 0) {
             return null;
         }
-        return ((_a = this.accordionItems.find((item) => item instanceof AccordionItem && item.expanded)) !== null && _a !== void 0 ? _a : this.accordionItems[0]);
+        return (this.accordionItems.find((item) => item instanceof BaseAccordionItem && item.expanded) ?? this.accordionItems[0]);
     }
+    /**
+     * Checks if the accordion is in single expand mode
+     * @returns {boolean}
+     */
+    isSingleExpandMode() {
+        return this.expandmode === AccordionExpandMode.single;
+    }
+    /**
+     * Controls the behavior of the accordion in single expand mode
+     * @param expandedItem The item to expand in single expand mode
+     * @returns {void}
+     */
     setSingleExpandMode(expandedItem) {
         if (this.accordionItems.length === 0) {
             return;
@@ -179,7 +152,7 @@ export class Accordion extends FASTElement {
         const currentItems = Array.from(this.accordionItems);
         this.activeItemIndex = currentItems.indexOf(expandedItem);
         currentItems.forEach((item, index) => {
-            if (item instanceof AccordionItem) {
+            if (item instanceof BaseAccordionItem) {
                 if (this.activeItemIndex === index) {
                     item.expanded = true;
                     item.expandbutton.setAttribute('aria-disabled', 'true');
@@ -193,24 +166,6 @@ export class Accordion extends FASTElement {
             }
         });
     }
-    getItemIds() {
-        return this.slottedAccordionItems.map((accordionItem) => {
-            return accordionItem.id;
-        });
-    }
-    isSingleExpandMode() {
-        return this.expandmode === AccordionExpandMode.single;
-    }
-    adjust(adjustment) {
-        this.activeItemIndex = wrapInBounds(0, this.accordionItems.length - 1, this.activeItemIndex + adjustment);
-        this.focusItem();
-    }
-    focusItem() {
-        const element = this.accordionItems[this.activeItemIndex];
-        if (element instanceof AccordionItem) {
-            element.expandbutton.focus();
-        }
-    }
 }
 __decorate([
     attr({ attribute: 'expand-mode' })