@esri/calcite-components 1.7.0-next.1 → 1.7.0-next.11

package/dist/extras/vscode-data.json

@@ -221,6 +221,10 @@
         "value": ""
       },
       "attributes": [
+        {
+          "name": "actions-end-group-label",
+          "description": "Specifies the accessible label for the last action-group."
+        },
         {
           "name": "expand-disabled",
           "description": "When `true`, the expand-toggling behavior is disabled."
@@ -289,6 +293,10 @@
           "name": "expanded",
           "description": "When `true`, the component is expanded."
         },
+        {
+          "name": "label",
+          "description": "Specifies the label of the component. Required for accessibility."
+        },
         {
           "name": "layout",
           "description": "Indicates the layout of the component.",
@@ -461,6 +469,10 @@
         "value": "The `calcite-action-pad` component is made up of `calcite-action`s in the form of clickable icons. This does not have an expandable option and is a smaller and simpler component than `calcite-action-bar`."
       },
       "attributes": [
+        {
+          "name": "actions-end-group-label",
+          "description": "Specifies the accessible label for the last action-group."
+        },
         {
           "name": "expand-disabled",
           "description": "When `true`, the expand-toggling behavior is disabled."
@@ -1643,7 +1655,7 @@
         },
         {
           "name": "selection-mode",
-          "description": "specify the selection mode\n- multiple: allow any number of selected items (default)\n- single: only one selection)\n- ancestors: like multiple, but show ancestors of selected items as selected, only deepest children shown in chips",
+          "description": "Specifies the selection mode:\n- \"multiple\" allows any number of selected items (default),\n- \"single\" allows only one selection,\n- \"single-persist\" allow and require one open item,\n- \"ancestors\" is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips.",
           "values": [
             {
               "name": "ancestors"
@@ -1653,6 +1665,9 @@
             },
             {
               "name": "single"
+            },
+            {
+              "name": "single-persist"
             }
           ]
         },
@@ -2082,24 +2097,9 @@
           "name": "group-title",
           "description": "Specifies and displays a group title."
         },
-        {
-          "name": "scale",
-          "description": "Specifies the size of the component.",
-          "values": [
-            {
-              "name": "l"
-            },
-            {
-              "name": "m"
-            },
-            {
-              "name": "s"
-            }
-          ]
-        },
         {
           "name": "selection-mode",
-          "description": "Specifies the component's selection mode, where\n`\"multiple\"` allows any number of (or no) selected `calcite-dropdown-item`s,\n`\"single\"` allows and requires one selected `calcite-dropdown-item`, and\n`\"none\"` does not allow selection on `calcite-dropdown-item`s.",
+          "description": "Specifies the selection mode for `calcite-dropdown-item` children, defaults to `single`:\n- `multiple` allows any number of selected items,\n- `single` allows only one selection (default),\n- `none` doesn't allow for any selection.",
           "values": [
             {
               "name": "multiple"
@@ -5322,6 +5322,95 @@
         }
       ]
     },
+    {
+      "name": "calcite-sheet",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "display-mode",
+          "description": "Specifies the display mode - `\"float\"` (content is separated detached),\nor `\"overlay\"` (displays on top of center content).",
+          "values": [
+            {
+              "name": "float"
+            },
+            {
+              "name": "overlay"
+            }
+          ]
+        },
+        {
+          "name": "escape-disabled",
+          "description": "When `true`, disables the default close on escape behavior."
+        },
+        {
+          "name": "focus-trap-disabled",
+          "description": "When `true`, prevents focus trapping."
+        },
+        {
+          "name": "height-scale",
+          "description": "When `position` is `\"block-start\"` or `\"block-end\"`, specifies the height of the component.",
+          "values": [
+            {
+              "name": "l"
+            },
+            {
+              "name": "m"
+            },
+            {
+              "name": "s"
+            }
+          ]
+        },
+        {
+          "name": "label",
+          "description": "Specifies the label of the component."
+        },
+        {
+          "name": "open",
+          "description": "When `true`, displays and positions the component."
+        },
+        {
+          "name": "outside-close-disabled",
+          "description": "When `true`, disables the closing of the component when clicked outside."
+        },
+        {
+          "name": "position",
+          "description": "Determines where the component will be positioned.",
+          "values": [
+            {
+              "name": "block-end"
+            },
+            {
+              "name": "block-start"
+            },
+            {
+              "name": "inline-end"
+            },
+            {
+              "name": "inline-start"
+            }
+          ]
+        },
+        {
+          "name": "width-scale",
+          "description": "When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the width of the component.",
+          "values": [
+            {
+              "name": "l"
+            },
+            {
+              "name": "m"
+            },
+            {
+              "name": "s"
+            }
+          ]
+        }
+      ]
+    },
     {
       "name": "calcite-shell",
       "description": {

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-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.1
+ * v1.7.0-next.11
  */
 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-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.1
+ * v1.7.0-next.11
  */
 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-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.1
+ * v1.7.0-next.11
  */
 export * from '../esm/polyfills/index.js';
 export * from '../esm/loader.js';

package/dist/loader/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.1
+ * v1.7.0-next.11
  */
 (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';

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

@@ -12,6 +12,10 @@ import { ActionBarMessages } from "./assets/action-bar/t9n";
  * @slot expand-tooltip - A slot to set the `calcite-tooltip` for the expand toggle.
  */
 export declare class ActionBar implements ConditionalSlotComponent, LoadableComponent, LocalizedComponent, T9nComponent {
+  /**
+   * Specifies the accessible label for the last action-group.
+   */
+  actionsEndGroupLabel: string;
   /**
    * When `true`, the expand-toggling behavior is disabled.
    */

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

@@ -18,6 +18,10 @@ export declare class ActionGroup implements ConditionalSlotComponent, LoadableCo
    */
   expanded: boolean;
   expandedHandler(): void;
+  /**
+   * Specifies the label of the component. Required for accessibility.
+   */
+  label: string;
   /**
    * Indicates the layout of the component.
    *

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

@@ -5,3 +5,6 @@ export declare const SLOTS: {
 export declare const ICONS: {
   menu: string;
 };
+export declare const CSS: {
+  container: string;
+};

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

@@ -10,6 +10,10 @@ import { ActionPadMessages } from "./assets/action-pad/t9n";
  * @slot expand-tooltip - A slot to set the `calcite-tooltip` for the expand toggle.
  */
 export declare class ActionPad implements ConditionalSlotComponent, LoadableComponent, LocalizedComponent, T9nComponent {
+  /**
+   * Specifies the accessible label for the last action-group.
+   */
+  actionsEndGroupLabel: string;
   /**
    * When `true`, the expand-toggling behavior is disabled.
    */

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

@@ -69,14 +69,16 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
    */
   required: boolean;
   /**
-   * specify the selection mode
-   * - multiple: allow any number of selected items (default)
-   * - single: only one selection)
-   * - ancestors: like multiple, but show ancestors of selected items as selected, only deepest children shown in chips
+   * Specifies the selection mode:
+   * - "multiple" allows any number of selected items (default),
+   * - "single" allows only one selection,
+   * - "single-persist" allow and require one open item,
+   * - "ancestors" is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips.
    */
-  selectionMode: Extract<"single" | "ancestors" | "multiple", SelectionMode>;
+  selectionMode: Extract<"single" | "single-persist" | "ancestors" | "multiple", SelectionMode>;
   /** Specifies the size of the component. */
   scale: Scale;
+  handlePropsChange(): void;
   /** The component's value(s) from the selected `calcite-combobox-item`(s). */
   value: string | string[];
   valueHandler(value: string | string[]): void;
@@ -204,7 +206,7 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
   updateAncestors(item: HTMLCalciteComboboxItemElement): void;
   getFilteredItems(): HTMLCalciteComboboxItemElement[];
   getSelectedItems(): HTMLCalciteComboboxItemElement[];
-  updateItems: () => void;
+  private updateItems;
   getData(): ItemData[];
   getNeedsIcon(): boolean;
   resetText(): void;

package/dist/types/components/combobox/utils.d.ts

@@ -1,6 +1,8 @@
 import { ComboboxChildElement } from "./interfaces";
+import { Combobox } from "./combobox";
 export declare function getAncestors(element: HTMLElement): ComboboxChildElement[];
 export declare function getItemAncestors(item: HTMLCalciteComboboxItemElement): HTMLCalciteComboboxItemElement[];
 export declare function getItemChildren(item: HTMLCalciteComboboxItemElement): HTMLCalciteComboboxItemElement[];
 export declare function hasActiveChildren(node: HTMLCalciteComboboxItemElement): boolean;
 export declare function getDepth(element: HTMLElement): number;
+export declare function isSingleLike(selectionMode: Combobox["selectionMode"]): boolean;

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

@@ -2,7 +2,7 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { InteractiveComponent } from "../../utils/interactive";
 import { ComboboxChildElement } from "../combobox/interfaces";
-import { Scale } from "../interfaces";
+import { Scale, SelectionMode } from "../interfaces";
 /**
  * @slot - A slot for adding nested `calcite-combobox-item`s.
  */
@@ -32,10 +32,23 @@ export declare class ComboboxItem implements ConditionalSlotComponent, Interacti
    * When `true`, omits the component from the `calcite-combobox` filtered search results.
    */
   filterDisabled: boolean;
-  el: HTMLCalciteComboboxItemElement;
-  isNested: boolean;
-  /** Specifies the scale of the combobox-item controlled by parent, defaults to m */
+  /**
+   * Specifies the selection mode:
+   * - "multiple" allows any number of selected items (default),
+   * - "single" allows only one selection,
+   * - "single-persist" allow and require one open item,
+   * - "ancestors" is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips.
+   *
+   * @internal
+   */
+  selectionMode: Extract<"single" | "single-persist" | "ancestors" | "multiple", SelectionMode>;
+  /**
+   * Specifies the size of the component inherited from the `calcite-combobox`, defaults to `m`.
+   *
+   * @internal
+   */
   scale: Scale;
+  el: HTMLCalciteComboboxItemElement;
   connectedCallback(): void;
   disconnectedCallback(): void;
   componentDidRender(): void;

package/dist/types/components/combobox-item-group/combobox-item-group.d.ts

@@ -15,9 +15,14 @@ export declare class ComboboxItemGroup {
   ancestors: ComboboxChildElement[];
   /** Specifies the title of the component. */
   label: string;
+  /**
+   * Specifies the size of the component inherited from the `calcite-combobox`, defaults to `m`.
+   *
+   * @internal
+   */
+  scale: Scale;
   connectedCallback(): void;
   el: HTMLCalciteComboboxItemGroupElement;
   guid: string;
-  scale: Scale;
   render(): VNode;
 }

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

@@ -56,10 +56,6 @@ export declare class Dropdown implements InteractiveComponent, LoadableComponent
    */
   placement: MenuPlacement;
   placementHandler(): void;
-  /**
-   * Specifies the size of the component.
-   */
-  scale: Scale;
   /**
    * Specifies the component's selected items.
    *
@@ -74,6 +70,9 @@ export declare class Dropdown implements InteractiveComponent, LoadableComponent
    * Specifies the width of the component.
    */
   width: Scale;
+  /** Specifies the size of the component. */
+  scale: Scale;
+  handlePropsChange(): void;
   /** Sets focus on the component's first focusable element. */
   setFocus(): Promise<void>;
   connectedCallback(): void;

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

@@ -8,20 +8,24 @@ export declare class DropdownGroup {
   /** Specifies and displays a group title. */
   groupTitle: string;
   /**
-   * Specifies the component's selection mode, where
-   * `"multiple"` allows any number of (or no) selected `calcite-dropdown-item`s,
-   * `"single"` allows and requires one selected `calcite-dropdown-item`, and
-   * `"none"` does not allow selection on `calcite-dropdown-item`s.
+   * Specifies the size of the component inherited from the parent `calcite-dropdown`, defaults to `m`.
+   *
+   * @internal
    */
-  selectionMode: Extract<"single" | "none" | "multiple", SelectionMode>;
+  scale: Scale;
   /**
-   * Specifies the size of the component.
+   * Specifies the selection mode for `calcite-dropdown-item` children, defaults to `single`:
+   * - `multiple` allows any number of selected items,
+   * - `single` allows only one selection (default),
+   * - `none` doesn't allow for any selection.
    */
-  scale: Scale;
+  selectionMode: Extract<"none" | "single" | "multiple", SelectionMode>;
+  handlePropsChange(): void;
   /**
    * @internal
    */
   calciteInternalDropdownItemChange: EventEmitter<RequestedItem>;
+  connectedCallback(): void;
   componentWillLoad(): void;
   render(): VNode;
   updateActiveItemOnChange(event: CustomEvent): void;
@@ -32,5 +36,7 @@ export declare class DropdownGroup {
   private requestedDropdownGroup;
   /** the requested item */
   private requestedDropdownItem;
+  private updateItems;
+  mutationObserver: import("../../utils/observers").ExtendedMutationObserver;
   private getGroupPosition;
 }

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

@@ -1,7 +1,7 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ItemKeyboardEvent } from "../dropdown/interfaces";
 import { RequestedItem } from "../dropdown-group/interfaces";
-import { FlipContext, Scale } from "../interfaces";
+import { FlipContext, Scale, SelectionMode } from "../interfaces";
 import { LoadableComponent } from "../../utils/loadable";
 /**
  * @slot - A slot for adding text.
@@ -39,6 +39,21 @@ export declare class DropdownItem implements LoadableComponent {
   calciteInternalDropdownCloseRequest: EventEmitter<void>;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
+  /**
+   * Specifies the selection mode inherited from `calcite-dropdown-group`, defaults to `single`:
+   * - `multiple` allows any number of selected items,
+   * - `single` allows only one selection (default),
+   * - `none` doesn't allow for any selection.
+   *
+   * @internal
+   */
+  selectionMode: Extract<"none" | "single" | "multiple", SelectionMode>;
+  /**
+   * Specifies the size of the component inherited from `calcite-dropdown`, defaults to `m`.
+   *
+   * @internal
+   */
+  scale: Scale;
   componentWillLoad(): void;
   componentDidLoad(): void;
   connectedCallback(): void;
@@ -53,12 +68,8 @@ export declare class DropdownItem implements LoadableComponent {
   private requestedDropdownGroup;
   /** requested item */
   private requestedDropdownItem;
-  /** what selection mode is the parent dropdown group in */
-  private selectionMode;
   /** if href is requested, track the rendered child link*/
   private childLink;
-  /** Specifies the scale of dropdown-item controlled by the parent, defaults to m */
-  scale: Scale;
   private initialize;
   private determineActiveItem;
   private emitRequestedItem;

package/dist/types/components/dropdown-item/resources.d.ts

@@ -1,8 +1,6 @@
 export declare const CSS: {
+  container: string;
   containerLink: string;
-  containerSmall: string;
-  containerMedium: string;
-  containerLarge: string;
   containerMulti: string;
   containerSingle: string;
   containerNone: string;

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

@@ -133,7 +133,11 @@ export declare class List implements InteractiveComponent, LoadableComponent, So
   mutationObserver: import("../../utils/observers").ExtendedMutationObserver;
   parentListEl: HTMLCalciteListElement;
   sortable: Sortable;
-  /** Sets focus on the component's first focusable element. */
+  /**
+   * Sets focus on the component's first focusable element.
+   *
+   * @returns {Promise<void>}
+   */
   setFocus(): Promise<void>;
   render(): VNode;
   private connectObserver;

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

@@ -19,8 +19,14 @@ import { ModalMessages } from "./assets/modal/t9n";
 export declare class Modal implements ConditionalSlotComponent, OpenCloseComponent, FocusTrapComponent, LoadableComponent, LocalizedComponent, T9nComponent {
   /** When `true`, displays and positions the component.  */
   open: boolean;
+  /**
+   * We use an internal property to handle styles for when a modal is actually opened, not just when the open attribute is applied. This is a property because we need to apply styles to the host element and to keep the styles present while beforeClose is.
+   *
+   * @internal
+   */
+  opened: boolean;
   /** Passes a function to run before the component closes. */
-  beforeClose: (el: HTMLElement) => Promise<void>;
+  beforeClose: (el: HTMLCalciteModalElement) => Promise<void>;
   /** When `true`, disables the component's close button. */
   closeButtonDisabled: boolean;
   /**
@@ -70,6 +76,7 @@ export declare class Modal implements ConditionalSlotComponent, OpenCloseCompone
   renderContentBottom(): VNode;
   renderCloseButton(): VNode;
   renderStyle(): VNode;
+  ignoreOpenChange: boolean;
   el: HTMLCalciteModalElement;
   modalContent: HTMLDivElement;
   initialOverflowCSS: string;
@@ -86,12 +93,6 @@ export declare class Modal implements ConditionalSlotComponent, OpenCloseCompone
   hasFooter: boolean;
   hasContentTop: boolean;
   hasContentBottom: boolean;
-  /**
-   * We use internal variable to make sure initially open modal can transition from closed state when rendered
-   *
-   * @private
-   */
-  isOpen: boolean;
   effectiveLocale: string;
   effectiveLocaleChange(): void;
   defaultMessages: ModalMessages;
@@ -129,9 +130,9 @@ export declare class Modal implements ConditionalSlotComponent, OpenCloseCompone
   private openEnd;
   /** Open the modal */
   private openModal;
-  handleOutsideClose: () => void;
+  private handleOutsideClose;
   /** Close the modal, first running the `beforeClose` method */
-  close: () => Promise<void>;
+  closeModal: () => Promise<void>;
   private removeOverflowHiddenClass;
   private handleMutationObserver;
   private updateFooterVisibility;

package/dist/types/components/rating/interfaces.d.ts

@@ -2,14 +2,13 @@ import { Scale } from "../interfaces";
 export interface Star {
   average: boolean;
   checked: boolean;
-  focused: boolean;
   fraction: number;
   hovered: boolean;
   id: string;
-  idx: number;
   partial: boolean;
   selected: boolean;
   value: number;
+  tabIndex: number;
 }
 export interface StarIconProps {
   full: boolean;

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

@@ -60,8 +60,6 @@ export declare class Rating implements LabelableComponent, FormComponent, Intera
   effectiveLocaleChange(): void;
   defaultMessages: RatingMessages;
   hoverValue: number;
-  focusValue: number;
-  hasFocus: boolean;
   connectedCallback(): void;
   componentWillLoad(): Promise<void>;
   componentWillRender(): void;
@@ -72,13 +70,19 @@ export declare class Rating implements LabelableComponent, FormComponent, Intera
   onLabelClick(): void;
   private handleRatingPointerOver;
   private handleRatingPointerOut;
-  private handleRatingFocusIn;
-  private handleRatingFocusLeave;
   private handleHostKeyDown;
-  private handleInputKeyDown;
+  private handleLabelKeyDown;
   private handleInputChange;
   private handleLabelPointerOver;
   private handleLabelPointerDown;
+  private handleLabelClick;
+  private handleLabelFocus;
+  private updateFocus;
+  private getTabIndex;
+  private setLabelEl;
+  private getValueFromLabelEvent;
+  getNextRatingValue(currentValue: number): number;
+  getPreviousRatingValue(currentValue: number): number;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   el: HTMLCalciteRatingElement;
@@ -87,9 +91,8 @@ export declare class Rating implements LabelableComponent, FormComponent, Intera
   defaultValue: Rating["value"];
   private emit;
   private guid;
-  private inputRefs;
-  private inputFocusRef;
   private isKeyboardInteraction;
+  private labelElements;
   private max;
   private starsMap;
 }

package/dist/types/components/segmented-control/segmented-control.d.ts

@@ -24,16 +24,17 @@ export declare class SegmentedControl implements LabelableComponent, FormCompone
    * @internal
    */
   required: boolean;
-  /** Defines the layout of the component. */
-  layout: Layout;
   /**
    * Specifies the name of the component.
    *
    * Required to pass the component's `value` on form submission.
    */
   name: string;
+  /** Defines the layout of the component. */
+  layout: Layout;
   /** Specifies the size of the component. */
   scale: Scale;
+  handlePropsChange(): void;
   /** The component's `selectedItem` value. */
   value: string;
   valueHandler(value: string): void;
@@ -63,7 +64,10 @@ export declare class SegmentedControl implements LabelableComponent, FormCompone
   labelEl: HTMLCalciteLabelElement;
   formEl: HTMLFormElement;
   defaultValue: SegmentedControl["value"];
+  private mutationObserver;
+  private handleItemPropChange;
   onLabelClick(): void;
   private getItems;
   private selectItem;
+  private setUpItems;
 }

package/dist/types/components/segmented-control-item/segmented-control-item.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Appearance, Layout, Scale } from "../interfaces";
 export declare class SegmentedControlItem {
   /** When `true`, the component is checked. */
   checked: boolean;
@@ -13,6 +14,24 @@ export declare class SegmentedControlItem {
    * The component's value.
    */
   value: any | null;
+  /**
+   * Specifies the appearance style of the component inherited from parent `calcite-segmented-control`, defaults to `solid`.
+   *
+   * @internal
+   */
+  appearance: Extract<"outline" | "outline-fill" | "solid", Appearance>;
+  /**
+   * Defines the layout of the component inherited from parent `calcite-segmented-control`, defaults to `horizontal`.
+   *
+   * @internal
+   */
+  layout: Layout;
+  /**
+   * Specifies the size of the component inherited from the `calcite-segmented-control`, defaults to `m`.
+   *
+   * @internal
+   */
+  scale: Scale;
   render(): VNode;
   el: HTMLCalciteSegmentedControlItemElement;
   /**

package/dist/types/components/sheet/interfaces.d.ts

@@ -0,0 +1 @@
+export type DisplayMode = "float" | "overlay";