@esri/calcite-components 1.0.0-beta.72 → 1.0.0-beta.76

package/dist/types/components/calcite-tree-item/calcite-tree-item.d.ts

@@ -0,0 +1,60 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { TreeItemSelectDetail } from "./interfaces";
+import { TreeSelectionMode } from "../calcite-tree/interfaces";
+import { Scale } from "../interfaces";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+/**
+ * @slot - A slot for adding content to the item.
+ * @slot children - A slot for adding nested `calcite-tree` elements.
+ */
+export declare class CalciteTreeItem implements ConditionalSlotComponent {
+  el: HTMLCalciteTreeItemElement;
+  /** Is the item currently selected */
+  selected: boolean;
+  /** True if the item is in an expanded state */
+  expanded: boolean;
+  expandedHandler(newValue: boolean): void;
+  /** @internal Is the parent of this item expanded? */
+  parentExpanded: boolean;
+  /** @internal What level of depth is this item at? */
+  depth: number;
+  /** @internal Does this tree item have a tree inside it? */
+  hasChildren: boolean;
+  /** @internal Draw lines (set on parent) */
+  lines: boolean;
+  /** Display checkboxes (set on parent)
+   * @internal
+   * @deprecated set "ancestors" selection-mode on parent tree for checkboxes
+   */
+  inputEnabled: boolean;
+  /** @internal Scale of the parent tree, defaults to m */
+  scale: Scale;
+  /**
+   * @internal
+   * In ancestor selection mode,
+   * show as indeterminate when only some children are selected
+   **/
+  indeterminate: boolean;
+  /** @internal Tree selection-mode (set on parent) */
+  selectionMode: TreeSelectionMode;
+  getselectionMode(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  componentWillRender(): void;
+  componentDidLoad(): void;
+  private isSelectionMultiLike;
+  render(): VNode;
+  onClick(e: Event): void;
+  iconClickHandler: (event: MouseEvent) => void;
+  childrenClickHandler: (event: MouseEvent) => void;
+  keyDownHandler(e: KeyboardEvent): void;
+  /**
+   * @internal
+   */
+  calciteTreeItemSelect: EventEmitter<TreeItemSelectDetail>;
+  childrenSlotWrapper: HTMLElement;
+  defaultSlotWrapper: HTMLElement;
+  private parentTreeItem?;
+  private updateParentIsExpanded;
+  private updateAncestorTree;
+}

package/dist/types/components/calcite-value-list/calcite-value-list.d.ts

@@ -0,0 +1,89 @@
+import Sortable from "sortablejs";
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { ICON_TYPES } from "./resources";
+import { ListFocusId, ItemData } from "../calcite-pick-list/shared-list-logic";
+/**
+ * @slot - A slot for adding `calcite-value-list-item` elements. Items are displayed as a vertical list.
+ * @slot menu-actions - A slot for adding a button + menu combo for performing actions like sorting.
+ */
+export declare class CalciteValueList<ItemElement extends HTMLCalciteValueListItemElement = HTMLCalciteValueListItemElement> {
+  /**
+   * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+   */
+  disabled: boolean;
+  /**
+   * When true, the items will be sortable via drag and drop.
+   */
+  dragEnabled: boolean;
+  /**
+   * When true, an input appears at the top of the list that can be used by end users to filter items in the list.
+   */
+  filterEnabled: boolean;
+  /**
+   * Placeholder text for the filter input field.
+   */
+  filterPlaceholder: string;
+  /**
+   * The list's group identifier.
+   *
+   * To drag elements from one list into another, both lists must have the same group value.
+   */
+  group?: string;
+  /**
+   * When true, content is waiting to be loaded. This state shows a busy indicator.
+   */
+  loading: boolean;
+  /**
+   * Multiple Works similar to standard radio buttons and checkboxes.
+   * When true, a user can select multiple items at a time.
+   * When false, only a single item can be selected at a time
+   * and selecting a new item will deselect any other selected items.
+   */
+  multiple: boolean;
+  /**
+   * When true and single-selection is enabled, the selection will change when navigating items via the keyboard.
+   */
+  selectionFollowsFocus: boolean;
+  selectedValues: Map<string, ItemElement>;
+  dataForFilter: ItemData;
+  items: ItemElement[];
+  lastSelectedItem: ItemElement;
+  mutationObserver: MutationObserver;
+  sortable: Sortable;
+  el: HTMLCalciteValueListElement;
+  emitCalciteListChange: () => void;
+  filterEl: HTMLCalciteFilterElement;
+  connectedCallback(): void;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  /**
+   * Emitted when any of the item selections have changed.
+   */
+  calciteListChange: EventEmitter<Map<string, HTMLCalciteValueListItemElement>>;
+  /**
+   * Emitted when the order of the list has changed.
+   */
+  calciteListOrderChange: EventEmitter<any[]>;
+  calciteListItemRemoveHandler(event: CustomEvent<void>): void;
+  calciteListItemChangeHandler(event: CustomEvent): void;
+  calciteListItemPropsChangeHandler(event: CustomEvent): void;
+  calciteListItemValueChangeHandler(event: CustomEvent): void;
+  getItems(): ItemElement[];
+  setUpItems(): void;
+  setUpFilter(): void;
+  setFilterEl: (el: HTMLCalciteFilterElement) => void;
+  setUpDragAndDrop(): void;
+  cleanUpDragAndDrop(): void;
+  deselectRemovedItems: any;
+  deselectSiblingItems: any;
+  selectSiblings: any;
+  handleFilter: any;
+  getItemData: any;
+  keyDownHandler: (event: KeyboardEvent) => void;
+  /** Returns the currently selected items */
+  getSelectedItems(): Promise<Map<string, HTMLCalciteValueListItemElement>>;
+  /** Sets focus on the component. */
+  setFocus(focusId?: ListFocusId): Promise<void>;
+  getIconType(): ICON_TYPES | null;
+  render(): VNode;
+}

package/dist/types/components/calcite-value-list-item/calcite-value-list-item.d.ts

@@ -0,0 +1,79 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { ICON_TYPES } from "../calcite-pick-list/resources";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+/**
+ * @slot actions-end - A slot for adding actions or content to the end side of the item.
+ * @slot actions-start - A slot for adding actions or content to the start side of the item.
+ */
+export declare class CalciteValueListItem implements ConditionalSlotComponent {
+  /**
+   * An optional description for this item. Will appear below the label text.
+   */
+  description?: string;
+  /**
+   * When true, the item cannot be clicked and is visually muted
+   */
+  disabled?: boolean;
+  /**
+   * @internal When false, the item cannot be deselected by user interaction.
+   */
+  disableDeselect: boolean;
+  /**
+   * When true, prevents the content of the list item from user interaction.
+   */
+  nonInteractive: boolean;
+  /**
+   * @internal - stores the activated state of the drag handle.
+   */
+  handleActivated?: boolean;
+  /**
+   * Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null.
+   * @see [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-pick-list/resources.ts#L5)
+   */
+  icon?: ICON_TYPES | null;
+  /**
+   * The main label for this item. Appears next to the icon.
+   */
+  label: string;
+  /**
+   * Used to provide additional metadata to an item, primarily used when the parent list has a filter.
+   */
+  metadata?: Record<string, unknown>;
+  /**
+   * Set this to true to display a remove action that removes the item from the list.
+   */
+  removable: boolean;
+  /**
+   * Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
+   */
+  selected: boolean;
+  /**
+   * The item's associated value.
+   */
+  value: any;
+  el: HTMLCalciteValueListItemElement;
+  pickListItem: HTMLCalcitePickListItemElement;
+  guid: string;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  /**
+   * Used to toggle the selection state. By default this won't trigger an event.
+   * The first argument allows the value to be coerced, rather than swapping values.
+   */
+  toggleSelected(coerce?: boolean): Promise<void>;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  /**
+   * Emitted whenever the remove button is pressed.
+   */
+  calciteListItemRemove: EventEmitter<void>;
+  calciteListItemChangeHandler(event: CustomEvent): void;
+  getPickListRef: (el: HTMLCalcitePickListItemElement) => HTMLCalcitePickListItemElement;
+  handleKeyDown: (event: KeyboardEvent) => void;
+  handleBlur: () => void;
+  handleSelectChange: (event: CustomEvent) => void;
+  renderActionsEnd(): VNode;
+  renderActionsStart(): VNode;
+  renderHandle(): VNode;
+  render(): VNode;
+}

package/dist/types/components/functional/CalciteExpandToggle.d.ts

@@ -0,0 +1,19 @@
+import { FunctionalComponent } from "../../stencil-public-runtime";
+import { Position, Scale } from "../interfaces";
+interface CalciteExpandToggleProps {
+  expanded: boolean;
+  intlExpand: string;
+  intlCollapse: string;
+  el: HTMLElement;
+  position: Position;
+  tooltip?: HTMLCalciteTooltipElement;
+  toggle: () => void;
+  ref?: (el: HTMLElement) => void;
+  scale?: Scale;
+}
+export declare function toggleChildActionText({ parent, expanded }: {
+  parent: HTMLElement;
+  expanded: boolean;
+}): void;
+export declare const CalciteExpandToggle: FunctionalComponent<CalciteExpandToggleProps>;
+export {};

package/dist/types/components.d.ts

@@ -9,7 +9,7 @@ import { AccordionAppearance } from "./components/calcite-accordion/interfaces";
 import { Alignment, Appearance, Columns, FlipContext, Layout, Position, Scale, Status, Width } from "./components/interfaces";
 import { Placement } from "@popperjs/core";
 import { OverlayPositioning, PopperPlacement } from "./utils/popper";
-import { AlertDuration, StatusColor } from "./components/calcite-alert/interfaces";
+import { AlertDuration, AlertPlacement, StatusColor } from "./components/calcite-alert/interfaces";
 import { HeadingLevel } from "./components/functional/CalciteHeading";
 import { BlockSectionToggleDisplay } from "./components/calcite-block-section/interfaces";
 import { ButtonAlignment, ButtonAppearance, ButtonColor, DropdownIconType } from "./components/calcite-button/interfaces";
@@ -300,7 +300,11 @@ export namespace Components {
          */
         "label": string;
         /**
-          * specify the scale of the button, defaults to m
+          * specify the placement of the alert
+         */
+        "placement": AlertPlacement;
+        /**
+          * specify the scale of the alert, defaults to m
          */
         "scale": Scale;
         /**
@@ -814,6 +818,11 @@ export namespace Components {
           * Disable combobox input
          */
         "disabled": boolean;
+        /**
+          * string to override the English "Remove tag" text for when an item is selected.
+          * @default "Remove tag"
+         */
+        "intlRemoveTag": string;
         /**
           * Aria label for combobox (required)
          */
@@ -1327,10 +1336,6 @@ export namespace Components {
           * Array of tuples describing a single data point ([x, y]) These data points should be sorted by x-axis value
          */
         "data": DataSeries;
-        /**
-          * Width of graph in pixels
-         */
-        "height": number;
         /**
           * End of highlight color if highlighting range
          */
@@ -1347,10 +1352,6 @@ export namespace Components {
           * Lowest point of the range
          */
         "min": number;
-        /**
-          * Width of graph in pixels
-         */
-        "width": number;
     }
     interface CalciteHandle {
         "activated": boolean;
@@ -1785,7 +1786,7 @@ export namespace Components {
          */
         "step": number;
         /**
-          * The selected time (always 24-hour format)
+          * The selected time in UTC (always 24-hour format)
          */
         "value": string;
     }
@@ -1816,6 +1817,7 @@ export namespace Components {
         "scale": Scale;
         /**
           * specify the status of the label and any child input / input messages
+          * @deprecated set directly on child element instead
          */
         "status": Status;
     }
@@ -1824,6 +1826,10 @@ export namespace Components {
           * is the link disabled
          */
         "disabled": boolean;
+        /**
+          * Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value: Without a value, the browser will suggest a filename/extension See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download
+         */
+        "download": string | boolean;
         /**
           * optionally pass a href - used to determine if the component should render as a link or an anchor
          */
@@ -2148,6 +2154,10 @@ export namespace Components {
           * Opens the action menu.
          */
         "menuOpen": boolean;
+        /**
+          * Scrolls panel content to a particular set of coordinates.  ```  myCalcitePanel.scrollContentTo({    left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.    top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element    behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).  }); ```
+         */
+        "scrollContentTo": (options?: ScrollToOptions) => Promise<void>;
         /**
           * Sets focus on the component.
          */
@@ -3216,11 +3226,11 @@ export namespace Components {
          */
         "setFocus": (target: TimePart) => Promise<void>;
         /**
-          * number that specifies the granularity that the value must adhere to
+          * number (seconds) that specifies the granularity that the value must adhere to
          */
         "step": number;
         /**
-          * The selected time in UTC
+          * The selected time in UTC (always 24-hour format)
          */
         "value": string;
     }
@@ -3300,12 +3310,12 @@ export namespace Components {
          */
         "label": string;
         /**
-          * Offset the position of the popover away from the reference element.
+          * Offset the position of the tooltip away from the reference element.
           * @default 6
          */
         "offsetDistance": number;
         /**
-          * Offset the position of the popover along the reference element.
+          * Offset the position of the tooltip along the reference element.
          */
         "offsetSkidding": number;
         /**
@@ -4376,7 +4386,11 @@ declare namespace LocalJSX {
          */
         "onCalciteAlertOpen"?: (event: CustomEvent<any>) => void;
         /**
-          * specify the scale of the button, defaults to m
+          * specify the placement of the alert
+         */
+        "placement"?: AlertPlacement;
+        /**
+          * specify the scale of the alert, defaults to m
          */
         "scale"?: Scale;
     }
@@ -4882,6 +4896,11 @@ declare namespace LocalJSX {
           * Disable combobox input
          */
         "disabled"?: boolean;
+        /**
+          * string to override the English "Remove tag" text for when an item is selected.
+          * @default "Remove tag"
+         */
+        "intlRemoveTag"?: string;
         /**
           * Aria label for combobox (required)
          */
@@ -5420,10 +5439,6 @@ declare namespace LocalJSX {
           * Array of tuples describing a single data point ([x, y]) These data points should be sorted by x-axis value
          */
         "data"?: DataSeries;
-        /**
-          * Width of graph in pixels
-         */
-        "height"?: number;
         /**
           * End of highlight color if highlighting range
          */
@@ -5440,10 +5455,6 @@ declare namespace LocalJSX {
           * Lowest point of the range
          */
         "min": number;
-        /**
-          * Width of graph in pixels
-         */
-        "width"?: number;
     }
     interface CalciteHandle {
         /**
@@ -5509,6 +5520,14 @@ declare namespace LocalJSX {
           * specify whether the confirm button should display a loading state, defaults to false
          */
         "loading"?: boolean;
+        /**
+          * Emitted when the cancel button gets clicked.
+         */
+        "onCalciteInlineEditableEditCancel"?: (event: CustomEvent<void>) => void;
+        /**
+          * Emitted when the check button gets clicked.
+         */
+        "onCalciteInlineEditableEditConfirm"?: (event: CustomEvent<void>) => void;
         /**
           * specify the scale of the inline-editable component, defaults to the scale of the wrapped calcite-input or the scale of the closest wrapping component with a set scale
          */
@@ -5725,13 +5744,19 @@ declare namespace LocalJSX {
         "name"?: string;
         /**
           * Trigger calcite date change when a user changes the date.
+          * @deprecated use `calciteInputDatePickerChange` instead.
          */
         "onCalciteDatePickerChange"?: (event: CustomEvent<Date>) => void;
         /**
           * Trigger calcite date change when a user changes the date range.
           * @see  [DateRangeChange](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-date-picker/interfaces.ts#L1)
+          * @deprecated use `calciteInputDatePickerChange` instead.
          */
         "onCalciteDatePickerRangeChange"?: (event: CustomEvent<DateRangeChange>) => void;
+        /**
+          * This event fires when the input date picker value changes.
+         */
+        "onCalciteInputDatePickerChange"?: (event: CustomEvent<void>) => void;
         /**
           * Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value.
          */
@@ -5864,7 +5889,7 @@ declare namespace LocalJSX {
          */
         "step"?: number;
         /**
-          * The selected time (always 24-hour format)
+          * The selected time in UTC (always 24-hour format)
          */
         "value"?: string;
     }
@@ -5895,6 +5920,7 @@ declare namespace LocalJSX {
         "scale"?: Scale;
         /**
           * specify the status of the label and any child input / input messages
+          * @deprecated set directly on child element instead
          */
         "status"?: Status;
     }
@@ -5903,6 +5929,10 @@ declare namespace LocalJSX {
           * is the link disabled
          */
         "disabled"?: boolean;
+        /**
+          * Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value: Without a value, the browser will suggest a filename/extension See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download
+         */
+        "download"?: string | boolean;
         /**
           * optionally pass a href - used to determine if the component should render as a link or an anchor
          */
@@ -6269,7 +6299,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when any of the item selections have changed.
          */
-        "onCalciteListChange"?: (event: CustomEvent<any>) => void;
+        "onCalciteListChange"?: (event: CustomEvent<Map<string, HTMLCalcitePickListItemElement>>) => void;
         /**
           * When true and single-selection is enabled, the selection will change when navigating items via the keyboard.
          */
@@ -7239,11 +7269,11 @@ declare namespace LocalJSX {
          */
         "scale"?: Scale;
         /**
-          * number that specifies the granularity that the value must adhere to
+          * number (seconds) that specifies the granularity that the value must adhere to
          */
         "step"?: number;
         /**
-          * The selected time in UTC
+          * The selected time in UTC (always 24-hour format)
          */
         "value"?: string;
     }
@@ -7323,12 +7353,12 @@ declare namespace LocalJSX {
          */
         "label": string;
         /**
-          * Offset the position of the popover away from the reference element.
+          * Offset the position of the tooltip away from the reference element.
           * @default 6
          */
         "offsetDistance"?: number;
         /**
-          * Offset the position of the popover along the reference element.
+          * Offset the position of the tooltip along the reference element.
          */
         "offsetSkidding"?: number;
         /**
@@ -7424,11 +7454,11 @@ declare namespace LocalJSX {
         /**
           * Emitted when any of the item selections have changed.
          */
-        "onCalciteListChange"?: (event: CustomEvent<any>) => void;
+        "onCalciteListChange"?: (event: CustomEvent<Map<string, HTMLCalciteValueListItemElement>>) => void;
         /**
           * Emitted when the order of the list has changed.
          */
-        "onCalciteListOrderChange"?: (event: CustomEvent<any>) => void;
+        "onCalciteListOrderChange"?: (event: CustomEvent<any[]>) => void;
         /**
           * When true and single-selection is enabled, the selection will change when navigating items via the keyboard.
          */

package/dist/types/preact.d.ts

@@ -147,9 +147,9 @@ declare module "preact/src/jsx" {
 
       "calcite-icon": JSX.CalciteIcon & JSXInternal.HTMLAttributes<HTMLCalciteIconElement>
 
-      "calcite-inline-editable": Omit<JSX.CalciteInlineEditable, "onCalciteInlineEditableEditingCancel" | "onCalciteInlineEditableChangesConfirm" | "onCalciteInlineEditableEnableEditingChange"> & JSXInternal.HTMLAttributes<HTMLCalciteInlineEditableElement> & {
-        "oncalciteInlineEditableEditingCancel"?: (event: CustomEvent<any>) => void;
-        "oncalciteInlineEditableChangesConfirm"?: (event: CustomEvent<any>) => void;
+      "calcite-inline-editable": Omit<JSX.CalciteInlineEditable, "onCalciteInlineEditableEditCancel" | "onCalciteInlineEditableEditConfirm" | "onCalciteInlineEditableEnableEditingChange"> & JSXInternal.HTMLAttributes<HTMLCalciteInlineEditableElement> & {
+        "oncalciteInlineEditableEditCancel"?: (event: CustomEvent<any>) => void;
+        "oncalciteInlineEditableEditConfirm"?: (event: CustomEvent<any>) => void;
         "oncalciteInlineEditableEnableEditingChange"?: (event: CustomEvent<any>) => void;
       }
 
@@ -160,9 +160,10 @@ declare module "preact/src/jsx" {
         "oncalciteInputChange"?: (event: CustomEvent<any>) => void;
       }
 
-      "calcite-input-date-picker": Omit<JSX.CalciteInputDatePicker, "onCalciteDatePickerChange" | "onCalciteDatePickerRangeChange" | "onCalciteInputDatePickerOpen" | "onCalciteInputDatePickerClose"> & JSXInternal.HTMLAttributes<HTMLCalciteInputDatePickerElement> & {
+      "calcite-input-date-picker": Omit<JSX.CalciteInputDatePicker, "onCalciteDatePickerChange" | "onCalciteDatePickerRangeChange" | "onCalciteInputDatePickerChange" | "onCalciteInputDatePickerOpen" | "onCalciteInputDatePickerClose"> & JSXInternal.HTMLAttributes<HTMLCalciteInputDatePickerElement> & {
         "oncalciteDatePickerChange"?: (event: CustomEvent<any>) => void;
         "oncalciteDatePickerRangeChange"?: (event: CustomEvent<any>) => void;
+        "oncalciteInputDatePickerChange"?: (event: CustomEvent<any>) => void;
         "oncalciteInputDatePickerOpen"?: (event: CustomEvent<any>) => void;
         "oncalciteInputDatePickerClose"?: (event: CustomEvent<any>) => void;
       }

package/dist/types/stencil-public-runtime.d.ts

@@ -666,7 +666,7 @@ export declare namespace JSXBase {
         use: JSXBase.SVGAttributes;
         view: JSXBase.SVGAttributes;
     }
-    interface SlotAttributes {
+    interface SlotAttributes extends JSXAttributes {
         name?: string;
         slot?: string;
         onSlotchange?: (event: Event) => void;
@@ -1427,9 +1427,7 @@ export declare namespace JSXBase {
         z?: number | string;
         zoomAndPan?: string;
     }
-    interface DOMAttributes<T = Element> {
-        key?: string | number;
-        ref?: (elm?: T) => void;
+    interface DOMAttributes<T> extends JSXAttributes<T> {
         slot?: string;
         part?: string;
         exportparts?: string;
@@ -1550,6 +1548,10 @@ export declare namespace JSXBase {
         onTransitionEndCapture?: (event: TransitionEvent) => void;
     }
 }
+export interface JSXAttributes<T = Element> {
+    key?: string | number;
+    ref?: (elm?: T) => void;
+}
 export interface CustomElementsDefineOptions {
     exclude?: string[];
     resourcesUrl?: string;

package/dist/types/utils/dom.d.ts

@@ -13,8 +13,23 @@ export declare function getElementDir(el: HTMLElement): Direction;
 export declare function getElementProp(el: Element, prop: string, fallbackValue: any): any;
 export declare function getRootNode(el: Element): HTMLDocument | ShadowRoot;
 export declare function getHost(root: HTMLDocument | ShadowRoot): Element | null;
+/**
+ * This helper queries an element's rootNodes and any ancestor rootNodes.
+ *
+ * @returns {Element[]} The elements.
+ */
 export declare function queryElementsRoots<T extends Element = Element>(element: Element, selector: string): T[];
-export declare function queryElementRoots<T extends Element = Element>(element: Element, selector: string): T | null;
+/**
+ * This helper queries an element's rootNode and any ancestor rootNodes.
+ *
+ * If both an 'id' and 'selector' are supplied, 'id' will take precedence over 'selector'.
+ *
+ * @returns {Element} The element.
+ */
+export declare function queryElementRoots<T extends Element = Element>(element: Element, { selector, id }: {
+  selector?: string;
+  id?: string;
+}): T | null;
 export declare function closestElementCrossShadowBoundary<T extends Element = Element>(element: Element, selector: string): T | null;
 export interface CalciteFocusableElement extends HTMLElement {
   setFocus?: () => Promise<void>;
@@ -24,12 +39,15 @@ export declare function focusElement(el: CalciteFocusableElement): Promise<void>
 interface GetSlottedOptions {
   all?: boolean;
   direct?: boolean;
+  matches?: string;
   selector?: string;
 }
-export declare function getSlotted<T extends Element = Element>(element: Element, slotName: string, options: GetSlottedOptions & {
+export declare function getSlotted<T extends Element = Element>(element: Element, slotName: string | string[] | (GetSlottedOptions & {
+  all: true;
+}), options: GetSlottedOptions & {
   all: true;
 }): T[];
-export declare function getSlotted<T extends Element = Element>(element: Element, slotName: string, options?: GetSlottedOptions): T | null;
+export declare function getSlotted<T extends Element = Element>(element: Element, slotName?: string | string[] | GetSlottedOptions, options?: GetSlottedOptions): T | null;
 export declare function filterDirectChildren<T extends Element>(el: Element, selector: string): T[];
 export declare function setRequestedIcon(iconObject: Record<string, string>, iconValue: string | boolean, matchedValue: string): string;
 export declare function intersects(rect1: DOMRect, rect2: DOMRect): boolean;

package/dist/types/utils/globalAttributes.d.ts

@@ -0,0 +1,35 @@
+declare type AttributeObject = {
+  [k: string]: any;
+};
+declare type AllowedGlobalAttribute = "lang";
+/**
+ * Watches global attributes of a component.
+ *
+ * Derived from: https://gist.github.com/willmartian/b4dd6b57d71dd0438fb9e7c6f4048578
+ */
+export interface GlobalAttrComponent {
+  /**
+   * The host element.
+   */
+  readonly el: HTMLElement;
+  /**
+   * The watched attributes object.
+   * Should be stateful.
+   * '@State() inheritedAttributes = {};'
+   */
+  globalAttributes: AttributeObject;
+}
+/**
+ * Helper to set up listening for changes to global attributes.
+ *
+ * render(): VNode {
+ *   const lang = this.inheritedAttributes['lang'] ?? 'en';
+ *   return <div>My lang is {lang}</div>;
+ * }
+ */
+export declare function watchGlobalAttributes(component: GlobalAttrComponent, attributeFilter: AllowedGlobalAttribute[]): void;
+/**
+ * Helper remove listening for changes to inherited attributes.
+ */
+export declare function unwatchGlobalAttributes(component: GlobalAttrComponent): void;
+export {};