@tylertech/forge 3.0.0-next.14 → 3.0.0-next.15

package/esm/core/utils/a11y-utils.js

@@ -0,0 +1,223 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Adapted and influenced from [Material Web](https://github.com/material-components/material-web).
+ * The original source code can be found at: [GitHub](https://github.com/material-components/material-web/blob/main/internal/aria/aria.ts)
+ */
+import { toggleAttribute } from '@tylertech/forge-core';
+import { supportsElementInternalsAria } from './feature-detection';
+/**
+ * Reflective ARIA properties.
+ */
+export const ARIA_PROPERTIES = [
+    'ariaAtomic',
+    'ariaAutoComplete',
+    'ariaBusy',
+    'ariaChecked',
+    'ariaColCount',
+    'ariaColIndex',
+    'ariaColSpan',
+    'ariaCurrent',
+    'ariaDisabled',
+    'ariaExpanded',
+    'ariaHasPopup',
+    'ariaHidden',
+    'ariaInvalid',
+    'ariaKeyShortcuts',
+    'ariaLabel',
+    'ariaLevel',
+    'ariaLive',
+    'ariaModal',
+    'ariaMultiLine',
+    'ariaMultiSelectable',
+    'ariaOrientation',
+    'ariaPlaceholder',
+    'ariaPosInSet',
+    'ariaPressed',
+    'ariaReadOnly',
+    'ariaRequired',
+    'ariaRoleDescription',
+    'ariaRowCount',
+    'ariaRowIndex',
+    'ariaRowSpan',
+    'ariaSelected',
+    'ariaSetSize',
+    'ariaSort',
+    'ariaValueMax',
+    'ariaValueMin',
+    'ariaValueNow',
+    'ariaValueText'
+];
+/**
+ * An object mapping all ARIA attributes to their corresponding properties.
+ *
+ * This is required because the proeprty name cannot be reliably inferred from the attribute name.
+ */
+const ARIA_ATTRIBUTES_TO_PROPERTIES = {
+    'aria-atomic': 'ariaAtomic',
+    'aria-autocomplete': 'ariaAutoComplete',
+    'aria-busy': 'ariaBusy',
+    'aria-checked': 'ariaChecked',
+    'aria-colcount': 'ariaColCount',
+    'aria-colindex': 'ariaColIndex',
+    'aria-colindextext': 'ariaColIndexText',
+    'aria-colspan': 'ariaColSpan',
+    'aria-current': 'ariaCurrent',
+    'aria-disabled': 'ariaDisabled',
+    'aria-expanded': 'ariaExpanded',
+    'aria-haspopup': 'ariaHasPopup',
+    'aria-hidden': 'ariaHidden',
+    'aria-invalid': 'ariaInvalid',
+    'aria-keyshortcuts': 'ariaKeyShortcuts',
+    'aria-label': 'ariaLabel',
+    'aria-level': 'ariaLevel',
+    'aria-live': 'ariaLive',
+    'aria-modal': 'ariaModal',
+    'aria-multiline': 'ariaMultiLine',
+    'aria-multiselectable': 'ariaMultiSelectable',
+    'aria-orientation': 'ariaOrientation',
+    'aria-placeholder': 'ariaPlaceholder',
+    'aria-posinset': 'ariaPosInSet',
+    'aria-pressed': 'ariaPressed',
+    'aria-readonly': 'ariaReadOnly',
+    'aria-required': 'ariaRequired',
+    'aria-roledescription': 'ariaRoleDescription',
+    'aria-rowcount': 'ariaRowCount',
+    'aria-rowindex': 'ariaRowIndex',
+    'aria-rowindextext': 'ariaRowIndexText',
+    'aria-rowspan': 'ariaRowSpan',
+    'aria-selected': 'ariaSelected',
+    'aria-setsize': 'ariaSetSize',
+    'aria-sort': 'ariaSort',
+    'aria-valuemax': 'ariaValueMax',
+    'aria-valuemin': 'ariaValueMin',
+    'aria-valuenow': 'ariaValueNow',
+    'aria-valuetext': 'ariaValueText',
+    'role': 'role'
+};
+/**
+ * Gets the ARIA attribute corresponding to a given ARIA property.
+ *
+ * @param property An ARIA mixin property.
+ * @returns An ARIA attribute name.
+ */
+export function ariaPropertyToAttribute(property) {
+    return property
+        .replace('aria', 'aria-')
+        // IDREF attributes also include an "Element" or "Elements" suffix
+        .replace(/Elements?/g, '')
+        .toLowerCase();
+}
+/**
+ * Gets the ARIA property corresponding to a given ARIA attribute.
+ *
+ * @param attribute An ARIA attribute name.
+ * @returns An ARIA mixin property.
+ */
+export function ariaAttributeToProperty(attribute) {
+    return ARIA_ATTRIBUTES_TO_PROPERTIES[attribute];
+}
+/**
+ * Applies default ARIA to an element through ElementInternals if supported. Otherwise, ARIA
+ * attributes are set directly on the element and stored in additional `data-default-*` attributes
+ * for restoration in case attributes are overwritten during the element's lifecycle.
+ *
+ * This fallback is needed for browsers that don't support ARIA in ElementInternals, such as most
+ * recent versions of Firefox.
+ *
+ * Because new attributes may be sprouted on the element, it is necessary to call this after the
+ * element has been connected to the DOM.
+ *
+ * @param element - The element to set up ARIA attributes for.
+ * @param internals - The ElementInternals object to use for setting ARIA attributes if supported.
+ * @param properties - An object containing ARIA properties and their values to set as defaults.
+ * @param options - A `DefaultAriaOptions` object.
+ *
+ * @example
+ * class ButtonComponent extends BaseComponent {
+ *  public readonly internals: ElementInternals;
+ *
+ *  constructor() {
+ *   super();
+ *   this.internals = this.attachInternals();
+ *  }
+ *
+ *  public connectedCallback(): void {
+ *    setDefaultAria(this, this.internals, {
+ *     role: 'button'
+ *    });
+ *   }
+ * }
+ */
+export function setDefaultAria(element, internals, properties, options) {
+    if (supportsElementInternalsAria()) {
+        Object.entries(properties).forEach(([key, value]) => {
+            internals[key] = value;
+        });
+        return;
+    }
+    Object.entries(properties).forEach(([key, value]) => {
+        const ariaAttribute = ariaPropertyToAttribute(key);
+        if ((options === null || options === void 0 ? void 0 : options.overwrite) || !element.hasAttribute(ariaAttribute)) {
+            toggleAttribute(element, value != null, ariaPropertyToAttribute(key), value === null || value === void 0 ? void 0 : value.toString());
+        }
+        if (value != null) {
+            storeDefaultAria(element, key, value);
+        }
+        else {
+            removeDefaultAria(element, key);
+        }
+    });
+}
+/**
+ * Sets a `*Default` property on an element to backup the default value of an ARIA attribute.
+ *
+ * @param element The element to store the default ARIA value on.
+ * @param property The ARIA mixin property.
+ * @param value The default value to store.
+ */
+export function storeDefaultAria(element, property, value) {
+    element[getDefaultAriaPropertyName(property)] = value;
+}
+/**
+ * Removes a `*Default` property from an element.
+ *
+ * @param element The element to remove the default ARIA value from.
+ * @param property The ARIA mixin property.
+ */
+export function removeDefaultAria(element, property) {
+    delete element[getDefaultAriaPropertyName(property)];
+}
+/**
+ * Gets a default ARIA value from an element's `*Default` property.
+ *
+ * @param element The element to retrieve the default ARIA value from.
+ * @param property An ARIA mixin property.
+ * @returns The value of the default ARIA attribute, or null if it does not exist.
+ */
+export function retrieveDefaultAria(element, property) {
+    const value = element[getDefaultAriaPropertyName(property)];
+    return !!value ? value : null;
+}
+/**
+ * Restores the given ARIA attribute of an element to its default value if it exists.
+ *
+ * @param element The element to restore the ARIA attribute on.
+ * @param property The ARIA mixin property.
+ */
+export function restoreDefaultAria(element, property) {
+    const defaultValue = retrieveDefaultAria(element, property);
+    if (defaultValue !== null) {
+        toggleAttribute(element, true, ariaPropertyToAttribute(property), defaultValue.toString());
+    }
+}
+function getDefaultAriaPropertyName(property) {
+    return `_forge_${property}Default`;
+}

package/esm/core/utils/event-utils.d.ts

@@ -11,3 +11,4 @@
  */
 export declare function proxyShadowScrollEvent(shadowEl: Node, proxyEl: Node): () => void;
 export declare function eventIncludesArrowKey(evt: KeyboardEvent): boolean;
+export declare function task(): Promise<void>;

package/esm/core/utils/event-utils.js

@@ -17,3 +17,6 @@ export function proxyShadowScrollEvent(shadowEl, proxyEl) {
 export function eventIncludesArrowKey(evt) {
     return evt.key === 'ArrowLeft' || evt.key === 'ArrowRight' || evt.key === 'ArrowUp' || evt.key === 'ArrowDown';
 }
+export function task() {
+    return new Promise(resolve => setTimeout(resolve));
+}

package/esm/core/utils/feature-detection.d.ts

@@ -8,3 +8,11 @@
  * @returns {boolean}
  */
 export declare function supportsPopover(): boolean;
+/**
+ * Detects if the browser supports ARIA properties in Element Internals.
+ *
+ * This currently always returns false because tooling is not yet able able to detect properties
+ * set on Element Internals.
+ * @returns {boolean}
+ */
+export declare function supportsElementInternalsAria(): boolean;

package/esm/core/utils/feature-detection.js

@@ -10,3 +10,15 @@
 export function supportsPopover() {
     return HTMLElement.prototype.hasOwnProperty('popover');
 }
+/**
+ * Detects if the browser supports ARIA properties in Element Internals.
+ *
+ * This currently always returns false because tooling is not yet able able to detect properties
+ * set on Element Internals.
+ * @returns {boolean}
+ */
+export function supportsElementInternalsAria() {
+    // TODO: return whether the user agent actually supports this when tooling is able to detect it
+    // return ElementInternals.prototype.hasOwnProperty('role');
+    return false;
+}

package/esm/core/utils/form-utils.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export type FormValue = File | string | FormData;
+export type FormRestoreState = File | string | Array<[string, FormDataEntryValue]>;
+export type FormRestoreReason = 'restore' | 'autocomplete';
+export type InputType = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'select' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';
+export type InputValidationProp = keyof InputValidationProps;
+export type ValidityStateFlag = Exclude<keyof ValidityState, 'valid'>;
+export interface InputValidationProps {
+    checked: boolean | null;
+    disabled: boolean | null;
+    max: number | null;
+    maxLength: number | null;
+    min: number | null;
+    minLength: number | null;
+    multiple: boolean | null;
+    pattern: string | null;
+    required: boolean | null;
+    step: number | null;
+    value: string | null;
+}

package/{dist/esm/chunks/chunk.U6FJJGO3.js → esm/core/utils/form-utils.js}

@@ -3,4 +3,4 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-//# sourceMappingURL=chunk.U6FJJGO3.js.map
+export {};

package/esm/core/utils/index.d.ts

@@ -6,6 +6,7 @@
 export * from './date-utils';
 export * from './event-utils';
 export * from './feature-detection';
+export * from './form-utils';
 export * from './reflect-utils';
 export * from './svg-utils';
 export * from './time-utils';

package/esm/core/utils/index.js

@@ -6,6 +6,7 @@
 export * from './date-utils';
 export * from './event-utils';
 export * from './feature-detection';
+export * from './form-utils';
 export * from './reflect-utils';
 export * from './svg-utils';
 export * from './time-utils';

package/esm/core/utils/mixin-utils.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { MixinBase } from '../../constants';
+type MixinFunction<T extends MixinBase = MixinBase, R extends T = T & MixinBase> = (Base: T) => R;
+type UnionToIntersection<T> = (T extends any ? (x: T) => any : never) extends (x: infer R) => any ? R : never;
+type MixinReturnValue<T extends MixinFunction<any, any>[]> = UnionToIntersection<{
+    [K in keyof T]: T[K] extends MixinFunction<any, infer U> ? U : never;
+}[number]>;
+/**
+ * Combines multiple mixins into a single component class.
+ *
+ * @param base - The base mixin to start with.
+ * @param mixins - The mixins to combine.
+ * @returns The combined component class.
+ */
+export declare function combineMixins<T extends MixinBase, K extends MixinFunction<T, any>[]>(base: T, ...mixins: K): MixinReturnValue<K>;
+export {};

package/esm/core/utils/mixin-utils.js

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+/**
+ * Combines multiple mixins into a single component class.
+ *
+ * @param base - The base mixin to start with.
+ * @param mixins - The mixins to combine.
+ * @returns The combined component class.
+ */
+export function combineMixins(base, ...mixins) {
+    return mixins.reduce((acc, cur) => cur(acc), base);
+}

package/esm/core/utils/reflect-utils.d.ts

@@ -38,7 +38,7 @@ export declare function getPartPrefixedAttributes(part: string, attributes: stri
  * @param callback A function to handle forwarded attributes.
  * @returns A `MutationObserver`.
  */
-export declare function forwardAttributes(from: HTMLElement, attributes: string[], callback: AttributeForwardingCallback): MutationObserver;
+export declare function forwardAttributes(from: HTMLElement, attributes: string[], callback: AttributeForwardingCallback, genericize?: boolean): MutationObserver;
 /**
  * Clones attributes from one element to another.
  * @param from The source element to clone attributes from.

package/esm/core/utils/reflect-utils.js

@@ -98,10 +98,10 @@ export function getPartPrefixedAttributes(part, attributes) {
  * @param callback A function to handle forwarded attributes.
  * @returns A `MutationObserver`.
  */
-export function forwardAttributes(from, attributes, callback) {
+export function forwardAttributes(from, attributes, callback, genericize = true) {
     // Set the source element's role to presentation to prevent duplicated ARIA attributes being
     // seen by assistive technology
-    if (attributes.some(attr => attr.toLowerCase().startsWith('aria-'))) {
+    if (genericize && attributes.some(attr => attr.toLowerCase().startsWith('aria-'))) {
         from.setAttribute('role', 'presentation');
     }
     // Parses an attribute and sends it to the provided callback

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

@@ -35,7 +35,7 @@ export interface IBaseDatePickerComponent<TValue> extends IBaseComponent {
 export declare abstract class BaseDatePickerComponent<TPublicValue, TPrivateValue, TFoundation extends BaseDatePickerFoundation<IBaseDatePickerAdapter, TPublicValue, TPrivateValue>> extends BaseComponent implements IBaseDatePickerComponent<TPublicValue> {
     protected _foundation: TFoundation;
     constructor();
-    connectedCallback(): Promise<void>;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     /** Gets/sets the value of the component. */

package/esm/date-picker/base/base-date-picker.js

@@ -11,13 +11,14 @@ export class BaseDatePickerComponent extends BaseComponent {
     constructor() {
         super();
     }
-    async connectedCallback() {
+    connectedCallback() {
         if (this.querySelector(BASE_DATE_PICKER_CONSTANTS.selectors.INPUT)) {
             this._foundation.initialize();
         }
         else {
-            await ensureChild(this, BASE_DATE_PICKER_CONSTANTS.selectors.INPUT);
-            this._foundation.initialize();
+            ensureChild(this, BASE_DATE_PICKER_CONSTANTS.selectors.INPUT).then(() => {
+                this._foundation.initialize();
+            });
         }
     }
     disconnectedCallback() {

package/esm/index.d.ts

@@ -18,14 +18,14 @@ export * from './button-toggle';
 export * from './calendar';
 export * from './card';
 export * from './checkbox';
-export * from './chips';
 export * from './chip-field';
+export * from './chips';
 export * from './circular-progress';
 export * from './color-picker';
 export * from './constants';
 export * from './core';
-export * from './date-range-picker';
 export * from './date-picker';
+export * from './date-range-picker';
 export * from './dialog';
 export * from './divider';
 export * from './drawer';
@@ -34,6 +34,7 @@ export * from './file-picker';
 export * from './floating-action-button';
 export * from './floating-label';
 export * from './focus-indicator';
+export * from './icon';
 export * from './icon-button';
 export * from './inline-message';
 export * from './keyboard-shortcut';
@@ -56,6 +57,7 @@ export * from './skeleton';
 export * from './slider';
 export * from './split-button';
 export * from './split-view';
+export * from './stack';
 export * from './state-layer';
 export * from './stepper';
 export * from './switch';
@@ -69,8 +71,6 @@ export * from './toolbar';
 export * from './tooltip';
 export * from './utils';
 export * from './view-switcher';
-export * from './icon';
-export * from './stack';
 /**
  * Registers all components in the library with the browser.
  */

package/esm/index.js

@@ -11,6 +11,7 @@
  */
 import { defineCustomElements } from '@tylertech/forge-core';
 import { AccordionComponent } from './accordion';
+import { AppBarComponent, AppBarHelpButtonComponent, AppBarMenuButtonComponent, AppBarNotificationButtonComponent, AppBarProfileButtonComponent, AppBarSearchComponent, ProfileCardComponent } from './app-bar';
 import { AutocompleteComponent } from './autocomplete';
 import { AvatarComponent } from './avatar';
 import { BackdropComponent } from './backdrop';
@@ -19,16 +20,17 @@ import { BannerComponent } from './banner';
 import { BottomSheetComponent } from './bottom-sheet';
 import { BusyIndicatorComponent } from './busy-indicator';
 import { ButtonComponent } from './button';
+import { ButtonAreaComponent } from './button-area';
 import { ButtonToggleComponent, ButtonToggleGroupComponent } from './button-toggle';
 import { CalendarComponent } from './calendar';
 import { CardComponent } from './card';
 import { CheckboxComponent } from './checkbox';
-import { ChipComponent, ChipSetComponent } from './chips';
 import { ChipFieldComponent } from './chip-field';
+import { ChipComponent, ChipSetComponent } from './chips';
 import { CircularProgressComponent } from './circular-progress';
 import { ColorPickerComponent } from './color-picker';
-import { DateRangePickerComponent } from './date-range-picker';
 import { DatePickerComponent } from './date-picker';
+import { DateRangePickerComponent } from './date-range-picker';
 import { DialogComponent } from './dialog';
 import { DividerComponent } from './divider';
 import { DrawerComponent, MiniDrawerComponent, ModalDrawerComponent } from './drawer';
@@ -36,6 +38,7 @@ import { ExpansionPanelComponent } from './expansion-panel';
 import { FilePickerComponent } from './file-picker';
 import { FloatingActionButtonComponent } from './floating-action-button';
 import { FocusIndicatorComponent } from './focus-indicator';
+import { IconComponent } from './icon';
 import { IconButtonComponent } from './icon-button';
 import { InlineMessageComponent } from './inline-message';
 import { KeyboardShortcutComponent } from './keyboard-shortcut';
@@ -45,20 +48,21 @@ import { LinearProgressComponent } from './linear-progress';
 import { ListComponent } from './list';
 import { ListItemComponent } from './list/list-item';
 import { MenuComponent } from './menu';
-import { AppBarComponent, AppBarHelpButtonComponent, AppBarMenuButtonComponent, AppBarNotificationButtonComponent, AppBarProfileButtonComponent, AppBarSearchComponent, ProfileCardComponent } from './app-bar';
 import { OpenIconComponent } from './open-icon';
 import { PageStateComponent } from './page-state';
 import { PaginatorComponent } from './paginator';
 import { PopupComponent } from './popup';
 import { ProductIconComponent } from './product-icon';
 import { QuantityFieldComponent } from './quantity-field';
-import { RadioComponent } from './radio';
+import { RadioComponent, RadioGroupComponent } from './radio';
 import { RippleComponent } from './ripple';
 import { ScaffoldComponent } from './scaffold';
 import { OptionComponent, OptionGroupComponent, SelectComponent } from './select';
+import { SelectDropdownComponent } from './select/select-dropdown';
 import { SkeletonComponent } from './skeleton';
 import { SliderComponent } from './slider';
 import { SplitViewComponent } from './split-view';
+import { StackComponent } from './stack';
 import { StateLayerComponent } from './state-layer';
 import { StepComponent, StepperComponent } from './stepper';
 import { SwitchComponent } from './switch';
@@ -70,10 +74,6 @@ import { ToastComponent } from './toast';
 import { ToolbarComponent } from './toolbar';
 import { TooltipComponent } from './tooltip';
 import { ViewComponent, ViewSwitcherComponent } from './view-switcher';
-import { IconComponent } from './icon';
-import { SelectDropdownComponent } from './select/select-dropdown';
-import { StackComponent } from './stack';
-import { ButtonAreaComponent } from './button-area';
 export * from './accordion';
 export * from './app-bar';
 export * from './autocomplete';
@@ -89,14 +89,14 @@ export * from './button-toggle';
 export * from './calendar';
 export * from './card';
 export * from './checkbox';
-export * from './chips';
 export * from './chip-field';
+export * from './chips';
 export * from './circular-progress';
 export * from './color-picker';
 export * from './constants';
 export * from './core';
-export * from './date-range-picker';
 export * from './date-picker';
+export * from './date-range-picker';
 export * from './dialog';
 export * from './divider';
 export * from './drawer';
@@ -105,6 +105,7 @@ export * from './file-picker';
 export * from './floating-action-button';
 export * from './floating-label';
 export * from './focus-indicator';
+export * from './icon';
 export * from './icon-button';
 export * from './inline-message';
 export * from './keyboard-shortcut';
@@ -127,6 +128,7 @@ export * from './skeleton';
 export * from './slider';
 export * from './split-button';
 export * from './split-view';
+export * from './stack';
 export * from './state-layer';
 export * from './stepper';
 export * from './switch';
@@ -140,26 +142,31 @@ export * from './toolbar';
 export * from './tooltip';
 export * from './utils';
 export * from './view-switcher';
-export * from './icon';
-export * from './stack';
 const CUSTOM_ELEMENTS = [
     AccordionComponent,
+    AppBarComponent,
+    AppBarHelpButtonComponent,
+    AppBarMenuButtonComponent,
+    AppBarNotificationButtonComponent,
+    AppBarProfileButtonComponent,
+    AppBarSearchComponent,
+    AutocompleteComponent,
     AvatarComponent,
     BackdropComponent,
     BadgeComponent,
     BannerComponent,
     BottomSheetComponent,
     BusyIndicatorComponent,
-    ButtonComponent,
     ButtonAreaComponent,
+    ButtonComponent,
     ButtonToggleComponent,
     ButtonToggleGroupComponent,
     CalendarComponent,
     CardComponent,
     CheckboxComponent,
     ChipComponent,
-    ChipSetComponent,
     ChipFieldComponent,
+    ChipSetComponent,
     CircularProgressComponent,
     ColorPickerComponent,
     DatePickerComponent,
@@ -167,15 +174,12 @@ const CUSTOM_ELEMENTS = [
     DialogComponent,
     DividerComponent,
     DrawerComponent,
-    MiniDrawerComponent,
-    ModalDrawerComponent,
     ExpansionPanelComponent,
     FilePickerComponent,
     FloatingActionButtonComponent,
     FocusIndicatorComponent,
-    ProductIconComponent,
-    IconComponent,
     IconButtonComponent,
+    IconComponent,
     InlineMessageComponent,
     KeyboardShortcutComponent,
     LabelComponent,
@@ -184,21 +188,19 @@ const CUSTOM_ELEMENTS = [
     ListComponent,
     ListItemComponent,
     MenuComponent,
-    AppBarComponent,
-    AppBarSearchComponent,
-    AppBarMenuButtonComponent,
-    AppBarNotificationButtonComponent,
-    AppBarHelpButtonComponent,
-    AppBarProfileButtonComponent,
-    ProfileCardComponent,
+    MiniDrawerComponent,
+    ModalDrawerComponent,
     OpenIconComponent,
     OptionComponent,
     OptionGroupComponent,
     PageStateComponent,
     PaginatorComponent,
     PopupComponent,
+    ProductIconComponent,
+    ProfileCardComponent,
     QuantityFieldComponent,
     RadioComponent,
+    RadioGroupComponent,
     RippleComponent,
     ScaffoldComponent,
     SelectComponent,
@@ -208,8 +210,8 @@ const CUSTOM_ELEMENTS = [
     SplitViewComponent,
     StackComponent,
     StateLayerComponent,
-    StepperComponent,
     StepComponent,
+    StepperComponent,
     SwitchComponent,
     TabBarComponent,
     TabComponent,
@@ -219,9 +221,8 @@ const CUSTOM_ELEMENTS = [
     ToastComponent,
     ToolbarComponent,
     TooltipComponent,
-    ViewSwitcherComponent,
     ViewComponent,
-    AutocompleteComponent
+    ViewSwitcherComponent
 ];
 /**
  * Registers all components in the library with the browser.

package/esm/label/label-adapter.d.ts

@@ -14,6 +14,7 @@ export interface ILabelAdapter extends IBaseAdapter {
     clickTarget(): void;
     updateTargetLabel(): void;
     addSlotChangeListener(callback: EventListener): void;
+    removerSlotChangeListener(callback: EventListener): void;
     addMutationObserver(callback: MutationCallback): void;
     removeMutationObserver(): void;
 }
@@ -36,6 +37,7 @@ export declare class LabelAdapter extends BaseAdapter<ILabelComponent> implement
      */
     updateTargetLabel(): void;
     addSlotChangeListener(callback: EventListener): void;
+    removerSlotChangeListener(callback: EventListener): void;
     addMutationObserver(callback: MutationCallback): void;
     removeMutationObserver(): void;
     /**