@esri/calcite-components 1.0.0-beta.95 → 1.0.0-beta.97

package/dist/index.js

@@ -1 +1 @@
-export * from './esm-es5/index.js';
+export * from './esm/index.js';

package/dist/loader/cdn.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.95
+ * v1.0.0-beta.97
  */
 module.exports = require('../cjs/loader.cjs.js');
 module.exports.applyPolyfills = function() { return Promise.resolve() };

package/dist/loader/index.cjs.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.95
+ * v1.0.0-beta.97
  */
 module.exports = require('../cjs/loader.cjs.js');
 module.exports.applyPolyfills = function() { return Promise.resolve() };

package/dist/loader/index.es2017.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.95
+ * v1.0.0-beta.97
  */
 export * from '../esm/polyfills/index.js';
 export * from '../esm/loader.js';

package/dist/loader/index.js

@@ -1,8 +1,8 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.95
+ * v1.0.0-beta.97
  */
 (function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
 export * from '../esm/polyfills/index.js';
-export * from '../esm-es5/loader.js';
+export * from '../esm/loader.js';

package/dist/loader/package.json

@@ -1,5 +1,6 @@
 {
   "name": "calcite-loader",
+  "private": true,
   "typings": "./index.d.ts",
   "module": "./index.js",
   "main": "./index.cjs.js",

package/dist/types/components/accordion/accordion.d.ts

@@ -15,8 +15,8 @@ export declare class Accordion {
   /** Specifies the size of the component. */
   scale: Scale;
   /**
-   * Specifies the selection mode - "multi" (allow any number of open items), "single" (allow one open item),
-   * or "single-persist" (allow and require one open item).
+   * Specifies the selection mode - `"multi"` (allow any number of open items), `"single"` (allow one open item),
+   * or `"single-persist"` (allow and require one open item).
    */
   selectionMode: "multi" | "single" | "single-persist";
   /**

package/dist/types/components/accordion-item/accordion-item.d.ts

@@ -7,13 +7,13 @@ import { ItemKeyEvent, RegistryEntry, RequestedItem } from "./interfaces";
 export declare class AccordionItem implements ConditionalSlotComponent {
   el: HTMLCalciteAccordionItemElement;
   /**
-   * When true, the component is active.
+   * When `true`, the component is active.
    *
-   * @deprecated use expanded instead
+   * @deprecated use `expanded` instead.
    */
   active: boolean;
   activeHandler(value: boolean): void;
-  /** When true, item is expanded */
+  /** When `true`, the component is expanded. */
   expanded: boolean;
   expandedHandler(value: boolean): void;
   /**
@@ -33,16 +33,16 @@ export declare class AccordionItem implements ConditionalSlotComponent {
   /** Specifies a description for the component. */
   description: string;
   /**
-   * Specifies an icon to display - accepts Calcite UI icon names.
+   * Specifies an icon to display.
    *
-   * @deprecated use `iconStart` or `iconEnd` properties instead
+   * @deprecated use `iconStart` or `iconEnd` instead.
    */
   icon?: string;
   iconHandler(value: string): void;
-  /**Specified an icon to display at the start - accepts Calcite UI icon names. */
+  /** Specifies an icon to display at the start of the component. */
   iconStart?: string;
   iconStartHandler(value: string): void;
-  /**Specified an icon to display at the end - accepts Calcite UI icon names. */
+  /** Specifies an icon to display at the end of the component. */
   iconEnd?: string;
   /**
    * @internal

package/dist/types/components/action/action.d.ts

@@ -6,7 +6,7 @@ import { InteractiveComponent } from "../../utils/interactive";
  */
 export declare class Action implements InteractiveComponent {
   /**
-   * When true, the component is highlighted.
+   * When `true`, the component is highlighted.
    */
   active: boolean;
   /**
@@ -16,17 +16,17 @@ export declare class Action implements InteractiveComponent {
   /** Specifies the appearance of the component. */
   appearance: Extract<"solid" | "clear", Appearance>;
   /**
-   * When true, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`.
+   * When `true`, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`.
    */
   compact: boolean;
   /**
-   * When true, interaction is prevented and the component is displayed with lower opacity.
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
    */
   disabled: boolean;
-  /** Specifies an icon to display - accepts Calcite UI icon names.  */
+  /** Specifies an icon to display. */
   icon?: string;
   /**
-   * When true, indicates unread changes.
+   * When `true`, indicates unread changes.
    */
   indicator: boolean;
   /**
@@ -40,7 +40,7 @@ export declare class Action implements InteractiveComponent {
    */
   label?: string;
   /**
-   * When true, a busy indicator is displayed.
+   * When `true`, a busy indicator is displayed.
    */
   loading: boolean;
   /**
@@ -58,12 +58,12 @@ export declare class Action implements InteractiveComponent {
   /**
    * Emits when the component has been clicked.
    *
-   * @deprecated use onClick instead.
+   * @deprecated use `onClick` instead.
    */
   calciteActionClick: EventEmitter<void>;
   el: HTMLCalciteActionElement;
   buttonEl: HTMLButtonElement;
-  mutationObserver: MutationObserver;
+  mutationObserver: import("../../utils/observers").ExtendedMutationObserver;
   connectedCallback(): void;
   disconnectedCallback(): void;
   componentDidRender(): void;

package/dist/types/components/action/assets/action/t9n/index.d.ts

@@ -0,0 +1,3 @@
+export type Messages = {
+  loading: string;
+};

package/dist/types/components/action-bar/action-bar.d.ts

@@ -8,12 +8,12 @@ import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
  */
 export declare class ActionBar implements ConditionalSlotComponent {
   /**
-   * When true, the expand-toggling behavior is disabled.
+   * When `true`, the expand-toggling behavior is disabled.
    */
   expandDisabled: boolean;
   expandHandler(): void;
   /**
-   * When true, the component is expanded.
+   * When `true`, the component is expanded.
    */
   expanded: boolean;
   expandedHandler(expanded: boolean): void;
@@ -47,7 +47,7 @@ export declare class ActionBar implements ConditionalSlotComponent {
    */
   calciteActionBarToggle: EventEmitter<void>;
   el: HTMLCalciteActionBarElement;
-  mutationObserver: MutationObserver;
+  mutationObserver: import("../../utils/observers").ExtendedMutationObserver;
   resizeObserver: ResizeObserver;
   expandToggleEl: HTMLCalciteActionElement;
   componentDidLoad(): void;

package/dist/types/components/action-bar/assets/action-bar/t9n/index.d.ts

@@ -0,0 +1,4 @@
+export type Messages = {
+  expand: string;
+  collapse: string;
+};

package/dist/types/components/action-group/action-group.d.ts

@@ -9,7 +9,7 @@ import { CalciteActionMenuCustomEvent } from "../../components";
  */
 export declare class ActionGroup implements ConditionalSlotComponent {
   /**
-   * When true, the component is expanded.
+   * When `true`, the component is expanded.
    */
   expanded: boolean;
   expandedHandler(): void;
@@ -26,7 +26,7 @@ export declare class ActionGroup implements ConditionalSlotComponent {
    */
   intlMore?: string;
   /**
-   * When true, the `calcite-action-menu` is open.
+   * When `true`, the `calcite-action-menu` is open.
    */
   menuOpen: boolean;
   /**

package/dist/types/components/action-group/assets/action-group/t9n/index.d.ts

@@ -0,0 +1,3 @@
+export type Messages = {
+  more: string;
+};

package/dist/types/components/action-menu/action-menu.d.ts

@@ -10,7 +10,7 @@ import { LogicalPlacement, EffectivePlacement, OverlayPositioning } from "../../
 export declare class ActionMenu {
   disconnectedCallback(): void;
   /**
-   * When true, the component is expanded.
+   * When `true`, the component is expanded.
    */
   expanded: boolean;
   expandedHandler(): void;
@@ -23,14 +23,15 @@ export declare class ActionMenu {
    */
   label: string;
   /**
-   * When true, the component is open.
+   * When `true`, the component is open.
    */
   open: boolean;
   openHandler(open: boolean): void;
   /**
    * Determines the type of positioning to use for the overlaid content.
    *
-   * Using the "absolute" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The "fixed" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is "fixed".
+   * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
+   * `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
    *
    */
   overlayPositioning: OverlayPositioning;
@@ -50,7 +51,7 @@ export declare class ActionMenu {
    * **Note:**: The event payload is deprecated, please use the `open` property on the component instead
    */
   calciteActionMenuOpenChange: EventEmitter<DeprecatedEventPayload>;
-  closeCalciteActionMenuOnClick(event: Event): void;
+  closeCalciteActionMenuOnClick(event: PointerEvent): void;
   el: HTMLCalciteActionMenuElement;
   menuButtonEl: HTMLCalciteActionElement;
   slottedMenuButtonEl: HTMLCalciteActionElement;
@@ -72,7 +73,7 @@ export declare class ActionMenu {
   renderMenuItems(): VNode;
   render(): VNode;
   handleCalciteActionClick: () => void;
-  menuButtonClick: () => void;
+  menuButtonClick: (event: PointerEvent) => void;
   updateTooltip: (event: Event) => void;
   setTooltipReferenceElement: () => void;
   updateAction: (action: HTMLCalciteActionElement, index: number) => void;
@@ -80,8 +81,7 @@ export declare class ActionMenu {
   handleDefaultSlotChange: (event: Event) => void;
   isValidKey(key: string, supportedKeys: string[]): boolean;
   menuButtonKeyDown: (event: KeyboardEvent) => void;
-  menuActionsContainerKeyDown: (event: KeyboardEvent) => void;
-  handleActionNavigation: (key: string, actions: HTMLCalciteActionElement[]) => void;
+  handleActionNavigation: (event: KeyboardEvent, key: string, actions: HTMLCalciteActionElement[]) => void;
   toggleOpenEnd: () => void;
   toggleOpen: (value?: boolean) => void;
 }

package/dist/types/components/action-pad/action-pad.d.ts

@@ -7,11 +7,11 @@ import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
  */
 export declare class ActionPad implements ConditionalSlotComponent {
   /**
-   * When true, the expand-toggling behavior is disabled.
+   * When `true`, the expand-toggling behavior is disabled.
    */
   expandDisabled: boolean;
   /**
-   * When true, the component is expanded.
+   * When `true`, the component is expanded.
    */
   expanded: boolean;
   expandedHandler(expanded: boolean): void;

package/dist/types/components/action-pad/assets/action-pad/t9n/index.d.ts

@@ -0,0 +1,4 @@
+export type Messages = {
+  expand: string;
+  collapse: string;
+};

package/dist/types/components/alert/alert.d.ts

@@ -2,6 +2,7 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
 import { AlertDuration, AlertPlacement, StatusColor, Sync } from "./interfaces";
 import { OpenCloseComponent } from "../../utils/openCloseComponent";
+import { LocalizedComponent, NumberingSystem } from "../../utils/locale";
 /**
  * Alerts are meant to provide a way to communicate urgent or important information to users, frequently as a result of an action they took in your app. Alerts are positioned
  * at the bottom of the page. Multiple opened alerts will be added to a queue, allowing users to dismiss them in the order they are provided.
@@ -11,26 +12,26 @@ import { OpenCloseComponent } from "../../utils/openCloseComponent";
  * @slot message - A slot for adding main text to the component.
  * @slot link - A slot for optionally adding an action to take from the alert (undo, try again, link to page, etc.)
  */
-export declare class Alert implements OpenCloseComponent {
+export declare class Alert implements OpenCloseComponent, LocalizedComponent {
   el: HTMLCalciteAlertElement;
   /**
-   * When true, opens the combobox
+   * When `true`, displays and positions the component.
    *
-   * @deprecated use open instead
+   * @deprecated use `open` instead.
    */
   active: boolean;
-  /** When true, opens the dropdown */
+  /** When `true`, displays and positions the component. */
   open: boolean;
   activeHandler(value: boolean): void;
   openHandler(value: boolean): void;
-  /** When true, the component closes automatically (recommended for passive, non-blocking alerts). */
+  /** When `true`, the component closes automatically (recommended for passive, non-blocking alerts). */
   autoDismiss: boolean;
   /** Specifies the duration before the component automatically closes (only use with `autoDismiss`). */
   autoDismissDuration: AlertDuration;
   /** Specifies the color for the component (will apply to top border and icon). */
   color: StatusColor;
   /**
-   * When true, shows a default recommended icon. Alternatively,
+   * When `true`, shows a default recommended icon. Alternatively,
    * pass a Calcite UI Icon name to display a specific icon.
    */
   icon: string | boolean;
@@ -42,6 +43,10 @@ export declare class Alert implements OpenCloseComponent {
   intlClose: string;
   /** Specifies an accessible name for the component. */
   label: string;
+  /**
+   * Specifies the Unicode numeral system used by the component for localization.
+   */
+  numberingSystem?: NumberingSystem;
   /** Specifies the placement of the component */
   placement: AlertPlacement;
   /** Specifies the size of the component. */
@@ -76,6 +81,7 @@ export declare class Alert implements OpenCloseComponent {
   alertRegister(): void;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
+  effectiveLocale: string;
   /** the list of queued alerts */
   queue: HTMLCalciteAlertElement[];
   /** the count of queued alerts */

package/dist/types/components/alert/assets/alert/t9n/index.d.ts

@@ -0,0 +1,3 @@
+export type Messages = {
+  close: string;
+};

package/dist/types/components/block/assets/block/t9n/index.d.ts

@@ -0,0 +1,6 @@
+export type Messages = {
+  collapse: string;
+  expand: string;
+  loading: string;
+  options: string;
+};

package/dist/types/components/block/block.d.ts

@@ -4,78 +4,80 @@ import { Status } from "../interfaces";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { InteractiveComponent } from "../../utils/interactive";
 /**
- * @slot - A slot for adding content to the block.
- * @slot icon - A slot for adding a leading header icon.
+ * @slot - A slot for adding content to the component.
+ * @slot icon - A slot for adding a leading header icon with `calcite-icon`.
  * @slot control - A slot for adding a single HTML input element in a header.
- * @slot header-menu-actions - a slot for adding an overflow menu with actions inside a dropdown.
+ * @slot header-menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a dropdown.
  */
 export declare class Block implements ConditionalSlotComponent, InteractiveComponent {
   /**
-   * When true, this block will be collapsible.
+   * When `true`, the component is collapsible.
    */
   collapsible: boolean;
   /**
-   * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
    */
   disabled: boolean;
   /**
-   * When true, displays a drag handle in the header.
+   * When `true`, displays a drag handle in the header.
    */
   dragHandle: boolean;
   /**
-   * Block heading.
+   * The component header text.
    */
   heading: string;
   /**
-   * Number at which section headings should start for this component.
+   * Specifies the number at which section headings should start.
    */
   headingLevel: HeadingLevel;
   /**
-   * Aria-label for collapsing the toggle and tooltip used for the toggle when expanded.
+   * Accessible name for the component's collapse button.
    *
    * @default "Collapse"
    */
   intlCollapse?: string;
   /**
-   * Aria-label for expanding the toggle and tooltip used for the toggle when collapsed.
+   * Accessible name for the component's expand button.
    *
    * @default "Expand"
    */
   intlExpand?: string;
   /**
-   * string to override English loading text
+   * Accessible name when the component is loading.
    *
    * @default "Loading"
    */
   intlLoading?: string;
   /**
-   * Text string used for the actions menu
+   * Accessible name for the component's options button.
    *
    * @default "Options"
    */
   intlOptions?: string;
   /**
-   * When true, content is waiting to be loaded. This state shows a busy indicator.
+   * When `true`, a busy indicator is displayed.
    */
   loading: boolean;
   /**
-   * When true, the block's content will be displayed.
+   * When `true`, expands the component and its contents.
    */
   open: boolean;
   /**
-   * Block status. Updates or adds icon to show related icon and color.
+   * Displays a status-related indicator icon.
    */
   status?: Status;
   /**
-   * Block summary.
+   * A description for the component, which displays below the heading.
    *
-   * @deprecated use description instead
+   * @deprecated use `description` instead
    */
   summary: string;
-  /**Block description */
+  /**
+   * A description for the component, which displays below the heading.
+   */
   description: string;
   /**
-   * When true, removes padding for the slotted content
+   * When `true`, removes padding for the slotted content.
    *
    * @deprecated Use `--calcite-block-padding` CSS variable instead.
    */
@@ -86,7 +88,7 @@ export declare class Block implements ConditionalSlotComponent, InteractiveCompo
   connectedCallback(): void;
   disconnectedCallback(): void;
   /**
-   * Emitted when the header has been clicked.
+   * Emits when the component's header is clicked.
    */
   calciteBlockToggle: EventEmitter<void>;
   onHeaderClick: () => void;

package/dist/types/components/block/resources.d.ts

@@ -1,6 +1,7 @@
 export declare const CSS: {
-  article: string;
+  container: string;
   content: string;
+  contentSpaced: string;
   headerContainer: string;
   icon: string;
   statusIcon: string;

package/dist/types/components/block-section/assets/block-section/t9n/index.d.ts

@@ -0,0 +1,4 @@
+export type Messages = {
+  collapse: string;
+  expand: string;
+};

package/dist/types/components/block-section/block-section.d.ts

@@ -2,39 +2,41 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { BlockSectionToggleDisplay } from "./interfaces";
 import { Status } from "../interfaces";
 /**
- * @slot - A slot for adding content to the block section.
+ * @slot - A slot for adding content to the component.
  */
 export declare class BlockSection {
   /**
-   * Tooltip used for the toggle when expanded.
+   * Accessible name for the component's collapse button.
    */
   intlCollapse?: string;
   /**
-   * Tooltip used for the toggle when collapsed.
+   * Accessible name for the component's expand button.
    */
   intlExpand?: string;
   /**
-   * When true, the block's section content will be displayed.
+   * When `true`, expands the component and its contents.
    */
   open: boolean;
   /**
-   * BlockSection status. Adds indicator to show valid or invalid status.
+   * Displays a status-related indicator icon.
    */
   status?: Status;
   /**
-   * Text displayed in the button.
+   * The component header text.
    */
   text: string;
   /**
-   * This property determines the look of the section toggle.
-   * If the value is "switch", a toggle-switch will be displayed.
-   * If the value is "button", a clickable header is displayed.
+   * Specifies the component's toggle display -
+   *
+   * `"button"` (selectable header), or
+   *
+   * `"switch"` (toggle switch).
    */
   toggleDisplay: BlockSectionToggleDisplay;
   el: HTMLCalciteBlockSectionElement;
   private guid;
   /**
-   * Emitted when the header has been clicked.
+   * Emits when the header has been clicked.
    */
   calciteBlockSectionToggle: EventEmitter<void>;
   handleHeaderKeyDown: (event: KeyboardEvent) => void;

package/dist/types/components/button/assets/button/t9n/index.d.ts

@@ -0,0 +1,3 @@
+export type Messages = {
+  loading: string;
+};

package/dist/types/components/button/button.d.ts

@@ -10,53 +10,69 @@ import { FormOwner } from "../../utils/form";
 /** @slot - A slot for adding text. */
 export declare class Button implements LabelableComponent, InteractiveComponent, FormOwner {
   el: HTMLCalciteButtonElement;
-  /** optionally specify alignment of button elements. */
+  /** Specifies the alignment of the component's elements. */
   alignment?: ButtonAlignment;
-  /** specify the appearance style of the button, defaults to solid. */
+  /** Specifies the appearance style of the component. */
   appearance: ButtonAppearance;
-  /** Applies to the aria-label attribute on the button or hyperlink */
+  /** Accessible name for the component. */
   label?: string;
-  /** specify the color of the button, defaults to blue */
+  /** Specifies the color of the component. */
   color: ButtonColor;
-  /** is the button disabled  */
+  /**  When `true`, interaction is prevented and the component is displayed with lower opacity. */
   disabled: boolean;
-  /** optionally pass a href - used to determine if the component should render as a button or an anchor */
+  /**
+   * Specifies the URL of the linked resource, which can be set as an absolute or relative path.
+   */
   href?: string;
-  /** optionally pass an icon to display at the end of a button - accepts calcite ui icon names  */
+  /** Specifies an icon to display at the end of the component. */
   iconEnd?: string;
-  /** flip the icon(s) in rtl */
+  /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   iconFlipRtl?: FlipContext;
-  /** optionally pass an icon to display at the start of a button - accepts calcite ui icon names  */
+  /** Specifies an icon to display at the start of the component. */
   iconStart?: string;
   /**
-   * string to override English loading text
+   * Accessible name when the component is loading.
    *
    * @default "Loading"
    */
   intlLoading?: string;
-  /** optionally add a calcite-loader component to the button, disabling interaction.  */
+  /**
+   * When `true`, a busy indicator is displayed and interaction is disabled.
+   */
   loading: boolean;
-  /** The name attribute to apply to the button */
+  /** Specifies the name of the component on form submission. */
   name?: string;
-  /** The rel attribute to apply to the hyperlink */
+  /**
+   * Defines the relationship between the `href` value and the current document.
+   *
+   * @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)
+   */
   rel?: string;
   /**
-   * The form ID to associate with the component
+   * The form ID to associate with the component.
    *
-   * @deprecated – this property is no longer needed if placed inside a form.
+   * @deprecated – The property is no longer needed if the component is placed inside a form.
    */
   form?: string;
-  /** optionally add a round style to the button  */
+  /** When `true`, adds a round style to the component. */
   round: boolean;
-  /** specify the scale of the button, defaults to m */
+  /** Specifies the size of the component. */
   scale: Scale;
-  /** is the button a child of a calcite-split-button */
+  /** Specifies if the component is a child of a `calcite-split-button`. */
   splitChild?: "primary" | "secondary" | false;
-  /** The target attribute to apply to the hyperlink */
+  /**
+   * Specifies where to open the linked document defined in the `href` property.
+   *
+   * @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)
+   */
   target?: string;
-  /** The type attribute to apply to the button */
+  /**
+   * Specifies the default behavior of the button.
+   *
+   * @mdn [type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type)
+   */
   type: string;
-  /** specify the width of the button, defaults to auto */
+  /** Specifies the width of the component. */
   width: Width;
   loadingChanged(newValue: boolean, oldValue: boolean): void;
   connectedCallback(): void;