@vonage/vivid 4.12.0 → 4.13.0

package/lib/accordion/accordion.d.ts

@@ -1,5 +1,24 @@
-import { AccordionExpandMode, Accordion as FastAccordion } from '@microsoft/fast-foundation';
-export declare class Accordion extends FastAccordion {
+import { FoundationElement } from '@microsoft/fast-foundation';
+export declare const AccordionExpandMode: {
+    readonly single: "single";
+    readonly multi: "multi";
+};
+export type AccordionExpandMode = typeof AccordionExpandMode[keyof typeof AccordionExpandMode];
+export declare class Accordion extends FoundationElement {
     expandmode: AccordionExpandMode;
+    activeid: string | null;
+    activeItemIndex: number;
+    accordionIds: Array<string | null>;
+    private change;
+    private findExpandedItem;
+    private setItems;
+    private resetItems;
+    private removeItemListeners;
+    private activeItemChange;
+    private getItemIds;
+    private isSingleExpandMode;
+    private handleItemKeyDown;
+    private adjust;
+    private focusItem;
     closeAll(): void;
 }

package/lib/accordion-item/accordion-item.d.ts

@@ -1,12 +1,16 @@
-import { AccordionItem as FASTAccordionItem } from '@microsoft/fast-foundation';
+import { FoundationElement } from '@microsoft/fast-foundation';
 import { AffixIconWithTrailing } from '../../shared/patterns/affix';
 import type { Size } from '../enums.js';
 export type AccordionItemSize = Extract<Size, Size.Condensed | Size.Normal>;
-export declare class AccordionItem extends FASTAccordionItem {
+export declare class AccordionItem extends FoundationElement {
+    headinglevel: 1 | 2 | 3 | 4 | 5 | 6;
+    expanded: boolean;
+    id: string;
     heading?: string;
     noIndicator: boolean;
     meta?: string;
     size?: AccordionItemSize;
+    private change;
 }
 export interface AccordionItem extends AffixIconWithTrailing {
 }

package/lib/calendar/calendar.d.ts

@@ -5,7 +5,7 @@ export declare class Calendar extends FoundationElement {
     startDay?: 'sunday' | 'monday';
     locales?: string | string[] | undefined;
     hour12: boolean;
-    getEventContext: (this: Calendar, e: MouseEvent | KeyboardEvent) => import("./helpers/calendar.event-context").CalendarEventContext | null;
+    getEventContext: (this: Calendar, e: KeyboardEvent | MouseEvent) => import("./helpers/calendar.event-context").CalendarEventContext | null;
     private getCalendarEventContainingCell;
     private arrowKeysInteractions;
     private activateElement;

package/lib/date-picker/date-picker.d.ts

@@ -2,6 +2,7 @@ import { type ErrorText, type FormElement } from '../../shared/patterns';
 import { DatePickerBase } from '../../shared/date-picker/date-picker-base';
 export declare class DatePicker extends DatePickerBase {
     #private;
+    protected _updatePresentationValue(): void;
     constructor();
 }
 export interface DatePicker extends ErrorText, FormElement {

package/lib/file-picker/file-picker.d.ts

@@ -14,6 +14,12 @@ export declare class FilePicker extends FormAssociatedFilePicker {
     accept?: string;
     acceptChanged(_oldValue: string, newValue: string): void;
     size?: FilePickerSize;
+    invalidFileTypeError?: string;
+    invalidFileTypeErrorChanged(_oldValue: string, newValue: string): void;
+    maxFilesExceededError?: string;
+    maxFilesExceededErrorChanged(_oldValue: string, newValue: string): void;
+    fileTooBigError?: string;
+    fileTooBigErrorChanged(_oldValue: string, newValue: string): void;
     nameChanged(previous: string, next: string): void;
     private buttonTag;
     constructor();

package/lib/menu/menu.d.ts

@@ -1,8 +1,22 @@
-import { Menu as FastMenu } from '@microsoft/fast-foundation';
+import { FoundationElement } from '@microsoft/fast-foundation';
 import type { Placement, Strategy } from '@floating-ui/dom';
 import { type Anchored } from '../../shared/patterns/anchored';
-export declare class Menu extends FastMenu {
+export declare class Menu extends FoundationElement {
     #private;
+    private menuItems;
+    private expandedItem;
+    private focusIndex;
+    private static focusableElementRoles;
+    focus(): void;
+    collapseExpandedItem(): void;
+    private handleItemFocus;
+    private handleExpandedChanged;
+    private removeItemListeners;
+    private setItems;
+    private domChildren;
+    private isMenuItemElement;
+    private isFocusableElement;
+    private setFocus;
     ariaLabel: string | null;
     placement?: Placement;
     trigger?: 'auto' | 'legacy' | 'off';
@@ -10,7 +24,6 @@ export declare class Menu extends FastMenu {
     positionStrategy?: Strategy;
     open: boolean;
     openChanged(_: boolean, newValue: boolean): void;
-    constructor();
     _onFocusout: (e: FocusEvent) => void;
     actionItemsSlottedContent?: HTMLElement[];
 }

package/lib/menu-item/menu-item.d.ts

@@ -1,4 +1,4 @@
-import { MenuItem as FastMenuItem } from '@microsoft/fast-foundation';
+import { FoundationElement } from '@microsoft/fast-foundation';
 import { AffixIcon } from '../../shared/patterns/affix';
 import { Connotation } from '../enums';
 export declare const MenuItemRole: {
@@ -7,13 +7,20 @@ export declare const MenuItemRole: {
     readonly menuitemcheckbox: "menuitemcheckbox";
     readonly menuitemradio: "menuitemradio";
 };
+export type MenuItemRole = typeof MenuItemRole[keyof typeof MenuItemRole];
 export declare enum CheckAppearance {
     Normal = "normal",
     TickOnly = "tick-only"
 }
 export type MenuItemConnotation = Extract<Connotation, Connotation.CTA | Connotation.Accent>;
-export declare class MenuItem extends FastMenuItem {
+export declare class MenuItem extends FoundationElement {
     #private;
+    disabled: boolean;
+    expanded: boolean;
+    role: MenuItemRole;
+    checked: boolean;
+    private observer;
+    private invoke;
     text?: string;
     textSecondary?: string;
     connotation?: MenuItemConnotation;
@@ -21,6 +28,7 @@ export declare class MenuItem extends FastMenuItem {
     checkedAppearance?: CheckAppearance;
     trailingMetaSlottedContent?: HTMLElement[];
     constructor();
+    private updateSubmenu;
 }
 export interface MenuItem extends AffixIcon {
 }

package/lib/option/option.d.ts

@@ -1,12 +1,32 @@
-import { ListboxOption as FoundationListboxOption } from '@microsoft/fast-foundation';
-import { AffixIconWithTrailing } from '../../shared/patterns/affix';
-export declare class ListboxOption extends FoundationListboxOption {
-    _text?: string;
-    set text(value: string);
-    get text(): string;
+import { FoundationElement } from '@microsoft/fast-foundation';
+export declare class ListboxOption extends FoundationElement {
+    checked?: boolean;
+    protected checkedChanged(_: boolean | unknown, next?: boolean): void;
+    defaultSelected: boolean;
+    protected defaultSelectedChanged(): void;
+    disabled: boolean;
+    protected disabledChanged(): void;
+    selectedAttribute: boolean;
+    protected selectedAttributeChanged(): void;
+    selected: boolean;
+    protected selectedChanged(): void;
+    dirtyValue: boolean;
+    protected initialValue: string;
+    initialValueChanged(): void;
     _label?: string;
     get label(): string;
     set label(value: string);
+    _text?: string;
+    set text(value: string);
+    get text(): string;
+    set value(next: string);
+    get value(): string;
+    get form(): HTMLFormElement | null;
+    constructor(text?: string, value?: string, defaultSelected?: boolean, selected?: boolean);
 }
-export interface ListboxOption extends AffixIconWithTrailing {
+export declare class DelegatesARIAListboxOption {
+    ariaChecked: 'true' | 'false' | string | null;
+    ariaPosInSet: string | null;
+    ariaSelected: 'true' | 'false' | string | null;
+    ariaSetSize: string | null;
 }

package/lib/radio/radio.d.ts

@@ -1,8 +1,18 @@
-import { Radio as FastRadio } from '@microsoft/fast-foundation';
+import { type SyntheticViewTemplate } from '@microsoft/fast-element';
+import { type FoundationElementDefinition } from '@microsoft/fast-foundation';
 import type { Connotation } from '../enums.js';
+import { FormAssociatedRadio } from './radio.form-associated';
 export type RadioConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA>;
-export declare class Radio extends FastRadio {
+export type RadioControl = Pick<HTMLInputElement, 'checked' | 'disabled' | 'readOnly' | 'focus' | 'setAttribute' | 'getAttribute'>;
+export type RadioOptions = FoundationElementDefinition & {
+    checkedIndicator?: string | SyntheticViewTemplate;
+};
+export declare class Radio extends FormAssociatedRadio {
     ariaLabel: string | null;
     label?: string;
     connotation?: RadioConnotation;
+    readOnly: boolean;
+    name: string;
+    constructor();
+    private isInsideRadioGroup;
 }

package/lib/radio/radio.form-associated.d.ts

@@ -0,0 +1,10 @@
+import { CheckableFormAssociated, FoundationElement } from '@microsoft/fast-foundation';
+declare class _Radio extends FoundationElement {
+}
+interface _Radio extends CheckableFormAssociated {
+}
+declare const FormAssociatedRadio_base: typeof _Radio;
+export declare class FormAssociatedRadio extends FormAssociatedRadio_base {
+    proxy: HTMLInputElement;
+}
+export {};

package/lib/radio-group/radio-group.d.ts

@@ -1,4 +1,22 @@
-import { RadioGroup as FastRadioGroup } from '@microsoft/fast-foundation';
-export declare class RadioGroup extends FastRadioGroup {
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { Orientation } from '@microsoft/fast-web-utilities';
+export declare class RadioGroup extends FoundationElement {
+    #private;
     label?: string;
+    readOnly: boolean;
+    disabled: boolean;
+    name: string;
+    nameChanged(): void;
+    value: string;
+    orientation: Orientation | 'horizontal' | 'vertical';
+    private get isInsideToolbar();
+    disconnectedCallback(): void;
+    private setupRadioButtons;
+    private radioChangeHandler;
+    private moveToRadioByIndex;
+    private moveRightOffGroup;
+    private moveLeftOffGroup;
+    private checkFocusedRadio;
+    private moveRight;
+    private moveLeft;
 }

package/lib/switch/switch.d.ts

@@ -1,7 +1,10 @@
-import { Switch as FoundationSwitch } from '@microsoft/fast-foundation';
 import type { Connotation } from '../enums';
+import { FormAssociatedSwitch } from './switch.form-associated';
 export type SwitchConnotation = Connotation.Accent | Connotation.Alert | Connotation.Announcement | Connotation.Success | Connotation.CTA;
-export declare class Switch extends FoundationSwitch {
+export declare class Switch extends FormAssociatedSwitch {
     label?: string;
     connotation?: SwitchConnotation;
+    readOnly: boolean;
+    constructor();
+    private updateForm;
 }

package/lib/switch/switch.form-associated.d.ts

@@ -0,0 +1,10 @@
+import { CheckableFormAssociated, FoundationElement } from '@microsoft/fast-foundation';
+declare class _Switch extends FoundationElement {
+}
+interface _Switch extends CheckableFormAssociated {
+}
+declare const FormAssociatedSwitch_base: typeof _Switch;
+export declare class FormAssociatedSwitch extends FormAssociatedSwitch_base {
+    proxy: HTMLInputElement;
+}
+export {};

package/lib/tab/tab.d.ts

@@ -1,10 +1,11 @@
-import { Tab as FoundationTab } from '@microsoft/fast-foundation';
+import { FoundationElement } from '@microsoft/fast-foundation';
 import { AffixIconWithTrailing } from '../../shared/patterns/affix';
 import { Localized } from '../../shared/patterns';
 import type { Connotation, Shape } from '../enums.js';
 export type TabConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA>;
 export type TabShape = Extract<Shape, Shape.Rounded | Shape.Sharp>;
-export declare class Tab extends FoundationTab {
+export declare class Tab extends FoundationElement {
+    disabled: boolean;
     connotation?: TabConnotation;
     shape?: TabShape;
     label?: string;

package/lib/tab-panel/tab-panel.d.ts

@@ -1,3 +1,3 @@
-import { TabPanel as FoundationTabPanel } from '@microsoft/fast-foundation';
-export declare class TabPanel extends FoundationTabPanel {
+import { FoundationElement } from '@microsoft/fast-foundation';
+export declare class TabPanel extends FoundationElement {
 }

package/lib/tabs/tabs.d.ts

@@ -1,21 +1,43 @@
-import { Tabs as FoundationTabs } from '@microsoft/fast-foundation';
+import { FoundationElement, TabsOrientation } from '@microsoft/fast-foundation';
 import type { Connotation, TabsGutters } from '../enums.js';
 export declare const ACTIVE_TAB_WIDTH = "--_tabs-active-tab-inline-size";
+export declare const TABLIST_COLUMN = "--_tabs-tablist-column";
 export type TabsConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA>;
-export type Gutters = Extract<TabsGutters, TabsGutters.Small | TabsGutters.None>;
-export declare class Tabs extends FoundationTabs {
+export declare class Tabs extends FoundationElement {
     #private;
+    orientation: TabsOrientation;
+    activeid: string;
+    activeindicator: boolean;
+    activetab: HTMLElement;
+    private prevActiveTabIndex;
+    private activeTabIndex;
+    private tabIds;
+    private tabpanelIds;
+    private change;
+    private isDisabledElement;
+    private isHiddenElement;
+    private isFocusableElement;
+    private getActiveIndex;
+    private setTabs;
+    private setTabPanels;
+    private getTabIds;
+    private getTabPanelIds;
+    private setComponent;
+    private handleTabClick;
+    private isHorizontal;
+    private handleTabKeyDown;
+    adjust(adjustment: number): void;
+    private adjustForward;
+    private adjustBackward;
+    private moveToTabByIndex;
+    private focusTab;
     tablist?: HTMLElement;
     connotation?: TabsConnotation;
-    gutters?: Gutters;
+    gutters?: TabsGutters;
     scrollablePanel: boolean;
-    connotationChanged(): void;
-    orientationChanged(): void;
-    activeidChanged(oldValue: string, newValue: string): void;
-    tabsChanged(): void;
-    tabpanelsChanged(): void;
-    patchIndicatorStyleTransition(): void;
+    tabsLayout?: 'align-start' | 'stretch';
     connectedCallback(): void;
     disconnectedCallback(): void;
-    constructor();
+    private handleActiveIndicatorPosition;
+    private animateActiveIndicator;
 }

package/lib/text-area/text-area.d.ts

@@ -1,11 +1,33 @@
-import { TextArea as FoundationTextArea } from '@microsoft/fast-foundation';
 import { type ErrorText, type FormElement, FormElementCharCount, FormElementHelperText, FormElementSuccessText } from '../../shared/patterns';
+import { DelegatesARIATextbox } from '../text-field/text-field';
+import { FormAssociatedTextArea } from './text-field.form-associated';
 export type TextAreaWrap = 'hard' | 'soft' | 'off';
-export declare class TextArea extends FoundationTextArea {
+export declare const TextAreaResize: {
+    readonly none: "none";
+    readonly both: "both";
+    readonly horizontal: "horizontal";
+    readonly vertical: "vertical";
+};
+export type TextAreaResize = typeof TextAreaResize[keyof typeof TextAreaResize];
+export declare class TextArea extends FormAssociatedTextArea {
     #private;
+    readOnly: boolean;
+    resize: TextAreaResize;
+    autofocus: boolean;
+    formId: string;
+    list: string;
+    maxlength: number;
+    minlength: number;
+    name: string;
+    placeholder: string;
+    cols: number;
+    rows: number;
+    spellcheck: boolean;
+    select(): void;
+    validate(): void;
     wrap?: TextAreaWrap;
     connectedCallback(): void;
     disconnectedCallback(): void;
 }
-export interface TextArea extends FormElement, ErrorText, FormElementCharCount, FormElementHelperText, FormElementSuccessText {
+export interface TextArea extends FormElement, ErrorText, FormElementCharCount, FormElementHelperText, FormElementSuccessText, DelegatesARIATextbox {
 }

package/lib/text-area/text-field.form-associated.d.ts

@@ -0,0 +1,10 @@
+import { FormAssociated, FoundationElement } from '@microsoft/fast-foundation';
+declare class _TextArea extends FoundationElement {
+}
+interface _TextArea extends FormAssociated {
+}
+declare const FormAssociatedTextArea_base: typeof _TextArea;
+export declare class FormAssociatedTextArea extends FormAssociatedTextArea_base {
+    proxy: HTMLTextAreaElement;
+}
+export {};

package/lib/text-field/text-field.d.ts

@@ -1,11 +1,32 @@
-import { TextField as FoundationTextfield } from '@microsoft/fast-foundation';
 import type { Appearance, Shape, Size } from '../enums';
 import { AffixIcon, type ErrorText, type FormElement, FormElementCharCount, FormElementHelperText, FormElementSuccessText } from '../../shared/patterns';
+import { ARIAGlobalStatesAndProperties } from '../../shared/foundation/patterns';
+import { FormAssociatedTextField } from './text-field.form-associated';
 export type TextFieldAppearance = Extract<Appearance, Appearance.Fieldset | Appearance.Ghost>;
 export type TextFieldShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
 export type TextFieldSize = Extract<Size, Size.Condensed | Size.Normal>;
-export declare class TextField extends FoundationTextfield {
+export declare const TextFieldType: {
+    readonly email: "email";
+    readonly password: "password";
+    readonly tel: "tel";
+    readonly text: "text";
+    readonly url: "url";
+};
+export type TextFieldType = typeof TextFieldType[keyof typeof TextFieldType];
+export declare class TextField extends FormAssociatedTextField {
     #private;
+    readOnly: boolean;
+    autofocus: boolean;
+    placeholder: string;
+    type: TextFieldType;
+    list: string;
+    maxlength: number;
+    minlength: number;
+    pattern: string;
+    size: number;
+    spellcheck: boolean;
+    select(): void;
+    validate(): void;
     appearance?: TextFieldAppearance;
     shape?: TextFieldShape;
     autoComplete?: string;
@@ -16,5 +37,9 @@ export declare class TextField extends FoundationTextfield {
     disconnectedCallback(): void;
     focus(): void;
 }
-export interface TextField extends AffixIcon, ErrorText, FormElement, FormElementCharCount, FormElementHelperText, FormElementSuccessText {
+export declare class DelegatesARIATextbox {
+}
+export interface DelegatesARIATextbox extends ARIAGlobalStatesAndProperties {
+}
+export interface TextField extends AffixIcon, ErrorText, FormElement, FormElementCharCount, FormElementHelperText, FormElementSuccessText, DelegatesARIATextbox {
 }

package/lib/text-field/text-field.form-associated.d.ts

@@ -0,0 +1,10 @@
+import { FormAssociated, FoundationElement } from '@microsoft/fast-foundation';
+declare class _TextField extends FoundationElement {
+}
+interface _TextField extends FormAssociated {
+}
+declare const FormAssociatedTextField_base: typeof _TextField;
+export declare class FormAssociatedTextField extends FormAssociatedTextField_base {
+    proxy: HTMLInputElement;
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vonage/vivid",
-	"version": "4.12.0",
+	"version": "4.13.0",
 	"type": "module",
 	"module": "./index.js",
 	"main": "./index.cjs",

package/shared/date-picker/date-picker-base.d.ts

@@ -14,6 +14,7 @@ export declare abstract class DatePickerBase extends FormAssociatedDatePickerBas
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected abstract _getCustomValidationError(): string | null;
+    protected abstract _updatePresentationValue(): void;
     protected abstract _getSelectedDates(): DateStr[];
 }
 export interface DatePickerBase extends Localized, FormElementHelperText, TrappedFocus {

package/shared/definition.cjs

@@ -3,79 +3,10 @@
 const index = require('./index.cjs');
 const definition = require('./definition27.cjs');
 const affix = require('./affix.cjs');
-const startEnd = require('./start-end.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const ref = require('./ref.cjs');
 const when = require('./when.cjs');
 
-/**
- * An individual item in an {@link @microsoft/fast-foundation#(Accordion:class) }.
- *
- * @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 expanded-icon - The expanded icon slot
- * @csspart collapsed-icon - The collapsed icon
- * @csspart region - The wrapper for the accordion item content
- *
- * @public
- */
-let AccordionItem$1 = class AccordionItem extends index.FoundationElement {
-    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;
-        /**
-         * @internal
-         */
-        this.clickHandler = (e) => {
-            this.expanded = !this.expanded;
-            this.change();
-        };
-        this.change = () => {
-            this.$emit("change");
-        };
-    }
-};
-index.__decorate([
-    index.attr({
-        attribute: "heading-level",
-        mode: "fromView",
-        converter: index.nullableNumberConverter,
-    })
-], AccordionItem$1.prototype, "headinglevel", void 0);
-index.__decorate([
-    index.attr({ mode: "boolean" })
-], AccordionItem$1.prototype, "expanded", void 0);
-index.__decorate([
-    index.attr
-], AccordionItem$1.prototype, "id", void 0);
-applyMixins.applyMixins(AccordionItem$1, startEnd.StartEnd);
-
 const styles = ":host{--_vvd-accordion-item-accent-firm-wrapper: var( --vvd-accordion-item-accent-firm )}.heading-button{--vvd-accordion-item-accent-firm: var( --_vvd-accordion-item-accent-firm-wrapper, var(--vvd-accordion-item-accent-primary) )}:host{display:flex;box-sizing:border-box;flex-direction:column}.heading-container{margin:0}.heading-button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.heading-button:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.heading-button:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.heading-button{--_connotation-color-faint: var(--vvd-accordion-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-accordion-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-accordion-item-accent-firm, var(--vvd-color-canvas-text))}.heading-button{--focus-stroke-gap-color: transparent;display:flex;width:100%;align-items:center;padding:16px;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer;text-align:left}.heading-button:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex:auto}.meta{overflow:hidden;max-width:var(--accordion-item-meta-inline-size, 20%);flex-shrink:0;color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{display:none;padding:8px 32px 24px 16px}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}";
 
 var __defProp = Object.defineProperty;
@@ -87,12 +18,38 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class AccordionItem extends AccordionItem$1 {
+class AccordionItem extends index.FoundationElement {
   constructor() {
     super(...arguments);
+    this.headinglevel = 2;
+    this.expanded = false;
     this.noIndicator = false;
+    /**
+     * @internal
+     */
+    this.clickHandler = () => {
+      this.expanded = !this.expanded;
+      this.change();
+    };
+    this.change = () => {
+      this.$emit("change");
+    };
   }
 }
+__decorateClass([
+  index.attr({
+    attribute: "heading-level",
+    mode: "fromView",
+    converter: index.nullableNumberConverter
+  })
+], AccordionItem.prototype, "headinglevel");
+__decorateClass([
+  index.attr({ mode: "boolean" })
+], AccordionItem.prototype, "expanded");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  index.attr
+], AccordionItem.prototype, "id");
 __decorateClass([
   index.attr
 ], AccordionItem.prototype, "heading");
@@ -116,7 +73,7 @@ const header = (context, hTag) => {
 				id="${(x) => x.id}"
 				aria-expanded="${(x) => x.expanded}"
 				aria-controls="${(x) => x.id}-panel"
-				@click="${(x, c) => x.clickHandler(c.event)}"
+				@click="${(x) => x.clickHandler()}"
 				${ref.ref("expandbutton")}
 			>
 
@@ -158,7 +115,7 @@ const accordionItemRegistries = [
 ];
 const registerAccordionItem = index.registerFactory(accordionItemRegistries);
 
-exports.AccordionItem = AccordionItem$1;
+exports.AccordionItem = AccordionItem;
 exports.accordionItemDefinition = accordionItemDefinition;
 exports.accordionItemRegistries = accordionItemRegistries;
 exports.registerAccordionItem = registerAccordionItem;