@esri/calcite-components 3.0.0-next.98 → 3.0.0

package/dist/types/stencil.d.ts

@@ -12,6 +12,7 @@ import type { AutocompleteItem } from "../components/calcite-autocomplete-item";
 import type { AutocompleteItemGroup } from "../components/calcite-autocomplete-item-group";
 import type { Avatar } from "../components/calcite-avatar";
 import type { Block } from "../components/calcite-block";
+import type { BlockGroup } from "../components/calcite-block-group";
 import type { BlockSection } from "../components/calcite-block-section";
 import type { Button } from "../components/calcite-button";
 import type { Card } from "../components/calcite-card";
@@ -162,14 +163,24 @@ interface StencilCalciteAutocompleteItemGroup extends Required<Pick<Autocomplete
 interface StencilCalciteAvatar extends Partial<Pick<Avatar, 'fullName' | 'label' | 'scale' | 'thumbnail' | 'userId' | 'username'>>, StencilJsx.HTMLAttributes<HTMLCalciteAvatarElement> {
 }
 
-interface StencilCalciteBlock extends Partial<Pick<Block, 'collapsible' | 'description' | 'disabled' | 'dragHandle' | 'heading' | 'headingLevel' | 'iconEnd' | 'iconFlipRtl' | 'iconStart' | 'label' | 'loading' | 'menuFlipPlacements' | 'menuPlacement' | 'messageOverrides' | 'open' | 'overlayPositioning' | 'status'>>, StencilJsx.HTMLAttributes<HTMLCalciteBlockElement> {
+interface StencilCalciteBlock extends Partial<Pick<Block, 'collapsible' | 'description' | 'disabled' | 'dragDisabled' | 'dragHandle' | 'heading' | 'headingLevel' | 'iconEnd' | 'iconFlipRtl' | 'iconStart' | 'label' | 'loading' | 'menuFlipPlacements' | 'menuPlacement' | 'messageOverrides' | 'open' | 'overlayPositioning' | 'sortHandleOpen' | 'status'>>, StencilJsx.HTMLAttributes<HTMLCalciteBlockElement> {
   onCalciteBlockBeforeClose?: EventHandler<HTMLCalciteBlockElement["calciteBlockBeforeClose"]>;
   onCalciteBlockBeforeOpen?: EventHandler<HTMLCalciteBlockElement["calciteBlockBeforeOpen"]>;
   onCalciteBlockClose?: EventHandler<HTMLCalciteBlockElement["calciteBlockClose"]>;
   onCalciteBlockOpen?: EventHandler<HTMLCalciteBlockElement["calciteBlockOpen"]>;
+  onCalciteBlockSortHandleBeforeClose?: EventHandler<HTMLCalciteBlockElement["calciteBlockSortHandleBeforeClose"]>;
+  onCalciteBlockSortHandleBeforeOpen?: EventHandler<HTMLCalciteBlockElement["calciteBlockSortHandleBeforeOpen"]>;
+  onCalciteBlockSortHandleClose?: EventHandler<HTMLCalciteBlockElement["calciteBlockSortHandleClose"]>;
+  onCalciteBlockSortHandleOpen?: EventHandler<HTMLCalciteBlockElement["calciteBlockSortHandleOpen"]>;
   onCalciteBlockToggle?: EventHandler<HTMLCalciteBlockElement["calciteBlockToggle"]>;
 }
 
+interface StencilCalciteBlockGroup extends Required<Pick<BlockGroup, 'label'>>, Partial<Pick<BlockGroup, 'canPull' | 'canPut' | 'disabled' | 'dragEnabled' | 'group' | 'loading'>>, StencilJsx.HTMLAttributes<HTMLCalciteBlockGroupElement> {
+  onCalciteBlockGroupDragEnd?: EventHandler<HTMLCalciteBlockGroupElement["calciteBlockGroupDragEnd"]>;
+  onCalciteBlockGroupDragStart?: EventHandler<HTMLCalciteBlockGroupElement["calciteBlockGroupDragStart"]>;
+  onCalciteBlockGroupOrderChange?: EventHandler<HTMLCalciteBlockGroupElement["calciteBlockGroupOrderChange"]>;
+}
+
 interface StencilCalciteBlockSection extends Partial<Pick<BlockSection, 'iconEnd' | 'iconFlipRtl' | 'iconStart' | 'messageOverrides' | 'open' | 'status' | 'text' | 'toggleDisplay'>>, StencilJsx.HTMLAttributes<HTMLCalciteBlockSectionElement> {
   onCalciteBlockSectionToggle?: EventHandler<HTMLCalciteBlockSectionElement["calciteBlockSectionToggle"]>;
 }
@@ -252,7 +263,7 @@ interface StencilCalciteDatePickerMonth extends Partial<Pick<DatePickerMonth, 'a
 interface StencilCalciteDatePickerMonthHeader extends Partial<Pick<DatePickerMonthHeader, 'activeDate' | 'headingLevel' | 'localeData' | 'max' | 'min' | 'monthStyle' | 'scale' | 'selectedDate'>>, StencilJsx.HTMLAttributes<HTMLCalciteDatePickerMonthHeaderElement> {
 }
 
-interface StencilCalciteDialog extends Partial<Pick<Dialog, 'beforeClose' | 'closeDisabled' | 'description' | 'dragEnabled' | 'escapeDisabled' | 'heading' | 'headingLevel' | 'kind' | 'loading' | 'menuOpen' | 'messageOverrides' | 'modal' | 'open' | 'outsideCloseDisabled' | 'overlayPositioning' | 'placement' | 'resizable' | 'scale' | 'width' | 'widthScale'>>, StencilJsx.HTMLAttributes<HTMLCalciteDialogElement> {
+interface StencilCalciteDialog extends Partial<Pick<Dialog, 'beforeClose' | 'closeDisabled' | 'description' | 'dragEnabled' | 'escapeDisabled' | 'focusTrapDisabled' | 'focusTrapOptions' | 'heading' | 'headingLevel' | 'kind' | 'loading' | 'menuOpen' | 'messageOverrides' | 'modal' | 'open' | 'outsideCloseDisabled' | 'overlayPositioning' | 'placement' | 'resizable' | 'scale' | 'width' | 'widthScale'>>, StencilJsx.HTMLAttributes<HTMLCalciteDialogElement> {
   onCalciteDialogBeforeClose?: EventHandler<HTMLCalciteDialogElement["calciteDialogBeforeClose"]>;
   onCalciteDialogBeforeOpen?: EventHandler<HTMLCalciteDialogElement["calciteDialogBeforeOpen"]>;
   onCalciteDialogClose?: EventHandler<HTMLCalciteDialogElement["calciteDialogClose"]>;
@@ -390,7 +401,7 @@ interface StencilCalciteMenuItem extends Required<Pick<MenuItem, 'label'>>, Part
 interface StencilCalciteMeter extends Required<Pick<Meter, 'label'>>, Partial<Pick<Meter, 'appearance' | 'disabled' | 'fillType' | 'form' | 'groupSeparator' | 'high' | 'low' | 'max' | 'min' | 'name' | 'numberingSystem' | 'rangeLabels' | 'rangeLabelType' | 'scale' | 'unitLabel' | 'value' | 'valueLabel' | 'valueLabelType'>>, StencilJsx.HTMLAttributes<HTMLCalciteMeterElement> {
 }
 
-interface StencilCalciteModal extends Partial<Pick<Modal, 'beforeClose' | 'closeButtonDisabled' | 'docked' | 'escapeDisabled' | 'focusTrapDisabled' | 'fullscreen' | 'kind' | 'messageOverrides' | 'open' | 'outsideCloseDisabled' | 'scale' | 'widthScale'>>, StencilJsx.HTMLAttributes<HTMLCalciteModalElement> {
+interface StencilCalciteModal extends Partial<Pick<Modal, 'beforeClose' | 'closeButtonDisabled' | 'docked' | 'escapeDisabled' | 'focusTrapDisabled' | 'focusTrapOptions' | 'fullscreen' | 'kind' | 'messageOverrides' | 'open' | 'outsideCloseDisabled' | 'scale' | 'widthScale'>>, StencilJsx.HTMLAttributes<HTMLCalciteModalElement> {
   onCalciteModalBeforeClose?: EventHandler<HTMLCalciteModalElement["calciteModalBeforeClose"]>;
   onCalciteModalBeforeOpen?: EventHandler<HTMLCalciteModalElement["calciteModalBeforeOpen"]>;
   onCalciteModalClose?: EventHandler<HTMLCalciteModalElement["calciteModalClose"]>;
@@ -430,7 +441,7 @@ interface StencilCalcitePanel extends Partial<Pick<Panel, 'beforeClose' | 'closa
   onCalcitePanelToggle?: EventHandler<HTMLCalcitePanelElement["calcitePanelToggle"]>;
 }
 
-interface StencilCalcitePopover extends Required<Pick<Popover, 'label' | 'referenceElement'>>, Partial<Pick<Popover, 'autoClose' | 'closable' | 'flipDisabled' | 'flipPlacements' | 'focusTrapDisabled' | 'heading' | 'headingLevel' | 'initialFocusTrapFocus' | 'messageOverrides' | 'offsetDistance' | 'offsetSkidding' | 'open' | 'overlayPositioning' | 'placement' | 'pointerDisabled' | 'scale' | 'triggerDisabled'>>, StencilJsx.HTMLAttributes<HTMLCalcitePopoverElement> {
+interface StencilCalcitePopover extends Required<Pick<Popover, 'label' | 'referenceElement'>>, Partial<Pick<Popover, 'autoClose' | 'closable' | 'flipDisabled' | 'flipPlacements' | 'focusTrapDisabled' | 'focusTrapOptions' | 'heading' | 'headingLevel' | 'messageOverrides' | 'offsetDistance' | 'offsetSkidding' | 'open' | 'overlayPositioning' | 'placement' | 'pointerDisabled' | 'scale' | 'triggerDisabled'>>, StencilJsx.HTMLAttributes<HTMLCalcitePopoverElement> {
   onCalcitePopoverBeforeClose?: EventHandler<HTMLCalcitePopoverElement["calcitePopoverBeforeClose"]>;
   onCalcitePopoverBeforeOpen?: EventHandler<HTMLCalcitePopoverElement["calcitePopoverBeforeOpen"]>;
   onCalcitePopoverClose?: EventHandler<HTMLCalcitePopoverElement["calcitePopoverClose"]>;
@@ -466,7 +477,7 @@ interface StencilCalciteSelect extends Required<Pick<Select, 'label'>>, Partial<
   onCalciteSelectChange?: EventHandler<HTMLCalciteSelectElement["calciteSelectChange"]>;
 }
 
-interface StencilCalciteSheet extends Required<Pick<Sheet, 'label'>>, Partial<Pick<Sheet, 'beforeClose' | 'displayMode' | 'escapeDisabled' | 'focusTrapDisabled' | 'height' | 'heightScale' | 'messageOverrides' | 'open' | 'outsideCloseDisabled' | 'position' | 'resizable' | 'width' | 'widthScale'>>, StencilJsx.HTMLAttributes<HTMLCalciteSheetElement> {
+interface StencilCalciteSheet extends Required<Pick<Sheet, 'label'>>, Partial<Pick<Sheet, 'beforeClose' | 'displayMode' | 'escapeDisabled' | 'focusTrapDisabled' | 'focusTrapOptions' | 'height' | 'heightScale' | 'messageOverrides' | 'open' | 'outsideCloseDisabled' | 'position' | 'resizable' | 'width' | 'widthScale'>>, StencilJsx.HTMLAttributes<HTMLCalciteSheetElement> {
   onCalciteSheetBeforeClose?: EventHandler<HTMLCalciteSheetElement["calciteSheetBeforeClose"]>;
   onCalciteSheetBeforeOpen?: EventHandler<HTMLCalciteSheetElement["calciteSheetBeforeOpen"]>;
   onCalciteSheetClose?: EventHandler<HTMLCalciteSheetElement["calciteSheetClose"]>;
@@ -551,7 +562,7 @@ interface StencilCalciteTableRow extends Partial<Pick<TableRow, 'alignment' | 'd
 interface StencilCalciteTabs extends Partial<Pick<Tabs, 'bordered' | 'layout' | 'position' | 'scale'>>, StencilJsx.HTMLAttributes<HTMLCalciteTabsElement> {
 }
 
-interface StencilCalciteTextArea extends Partial<Pick<TextArea, 'columns' | 'disabled' | 'form' | 'groupSeparator' | 'label' | 'maxLength' | 'messageOverrides' | 'minLength' | 'name' | 'numberingSystem' | 'placeholder' | 'readOnly' | 'required' | 'resize' | 'rows' | 'scale' | 'status' | 'validationIcon' | 'validationMessage' | 'value' | 'wrap'>>, StencilJsx.HTMLAttributes<HTMLCalciteTextAreaElement> {
+interface StencilCalciteTextArea extends Partial<Pick<TextArea, 'columns' | 'disabled' | 'form' | 'groupSeparator' | 'label' | 'limitText' | 'maxLength' | 'messageOverrides' | 'minLength' | 'name' | 'numberingSystem' | 'placeholder' | 'readOnly' | 'required' | 'resize' | 'rows' | 'scale' | 'status' | 'validationIcon' | 'validationMessage' | 'value' | 'wrap'>>, StencilJsx.HTMLAttributes<HTMLCalciteTextAreaElement> {
   onCalciteTextAreaChange?: EventHandler<HTMLCalciteTextAreaElement["calciteTextAreaChange"]>;
   onCalciteTextAreaInput?: EventHandler<HTMLCalciteTextAreaElement["calciteTextAreaInput"]>;
 }
@@ -614,6 +625,7 @@ interface ExposedElements {
   "calcite-autocomplete-item-group": StencilCalciteAutocompleteItemGroup;
   "calcite-avatar": StencilCalciteAvatar;
   "calcite-block": StencilCalciteBlock;
+  "calcite-block-group": StencilCalciteBlockGroup;
   "calcite-block-section": StencilCalciteBlockSection;
   "calcite-button": StencilCalciteButton;
   "calcite-card": StencilCalciteCard;

package/dist/utils/component.d.ts

@@ -1,5 +1,8 @@
 import { LitElement } from '@arcgis/lumina';
 import { Scale } from '../components/interfaces';
+import { ComboboxChildElement } from '../components/calcite-combobox/interfaces';
+import { StepperItem } from '../components/calcite-stepper-item/customElement.js';
+import { TableRow } from '../components/calcite-table-row/customElement.js';
 export declare function getIconScale(componentScale: Scale): Extract<Scale, "s" | "m">;
 /**
  * This utility logs a warning message when a required property is missing.
@@ -13,3 +16,4 @@ export declare function getIconScale(componentScale: Scale): Extract<Scale, "s"
  * @param deprecatedProp the deprecated property that is required
  */
 export declare function warnIfMissingRequiredProp<C extends LitElement>(component: C, newProp: keyof C, deprecatedProp: keyof C): void;
+export declare function isHidden<C extends ComboboxChildElement | HTMLCalciteStepperItemElement | HTMLCalciteTableRowElement>(el: C): boolean;

package/dist/utils/focusTrapComponent.d.ts

@@ -5,6 +5,8 @@ export interface FocusTrapComponent {
     el: HTMLElement;
     /** When `true`, prevents focus trapping. */
     focusTrapDisabled?: boolean;
+    /** When defined, provides a condition to disable focus trapping. When `true`, prevents focus trapping. */
+    focusTrapDisabledOverride?: () => boolean;
     /** The focus trap instance. */
     focusTrap: FocusTrap;
     /**
@@ -28,6 +30,13 @@ interface ConnectFocusTrapOptions {
  * @param options
  */
 export declare function connectFocusTrap(component: FocusTrapComponent, options?: ConnectFocusTrapOptions): void;
+/**
+ * Helper to create the FocusTrap options.
+ *
+ * @param hostEl
+ * @param options
+ */
+export declare function createFocusTrapOptions(hostEl: HTMLElement, options?: FocusTrapOptions): FocusTrapOptions;
 /**
  * Helper to activate the FocusTrap component.
  *

package/dist/utils/loadable.d.ts

@@ -2,8 +2,7 @@ import { LitElement } from '@arcgis/lumina';
 /**
  * This helper adds support for knowing when a component has been loaded.
  *
- * Related issue: https://github.com/Esri/calcite-design-system/issues/5369
- * Could be related to Stencil.js issue: https://github.com/ionic-team/stencil/issues/3580
+ * @deprecated this interface is no longer needed, and you can use LitElement.componentOnReady instead
  *
  * Implementing
  *
@@ -18,11 +17,11 @@ import { LitElement } from '@arcgis/lumina';
  *  //
  *  //--------------------------------------------------------------------------
  *
- *  componentWillLoad(): void {
+ *  load(): void {
  *    setUpLoadableComponent(this);
  *  }
  *
- *  componentDidLoad(): void {
+ *  loaded(): void {
  *    setComponentLoaded(this);
  *  }
  *
@@ -37,82 +36,66 @@ import { LitElement } from '@arcgis/lumina';
  *  }
  * ```
  */
-export interface LoadableComponent extends LitElement {
-    /**
-     * Stencil lifecycle method.
-     * https://stenciljs.com/docs/component-lifecycle#componentwillload
-     *
-     * Called once just after the component is first connected to the DOM. Since this method is only called once, it's a good place to load data asynchronously and to setup the state without triggering extra re-renders.
-     */
-    load: () => Promise<void> | void;
-    /**
-     * Stencil lifecycle method.
-     * https://stenciljs.com/docs/component-lifecycle#componentdidload
-     *
-     * Called once just after the component is fully loaded and the first render() occurs.
-     */
-    loaded: () => Promise<void> | void;
+export interface LoadableComponent {
 }
 /**
  * This helper util sets up the component for the ability to know when the component has been loaded.
  *
- * This should be used in the `componentWillLoad` lifecycle hook.
+ * This should be used in the `load` lifecycle hook.
  *
- * ```
- * componentWillLoad(): void {
+ * @deprecated this method is no longer needed, and you can use LitElement.componentOnReady instead
+ *
+ * @example
+ * load(): void {
  *   setUpLoadableComponent(this);
  * }
- * ```
  *
- * @param component
+ * @param _component
  */
-export declare function setUpLoadableComponent(component: LoadableComponent): void;
+export declare function setUpLoadableComponent(_component: LoadableComponent): void;
 /**
  * This helper util lets the loadable component know that it is now loaded.
  *
- * This should be used in the `componentDidLoad` lifecycle hook.
+ * This should be used in the `loaded` lifecycle hook.
  *
- * ```
- * componentDidLoad(): void {
+ * @deprecated this method is no longer needed, and you can use LitElement.componentOnReady instead
+ *
+ * @example
+ * loaded(): void {
  *   setComponentLoaded(this);
  * }
- * ```
  *
- * @param component
+ * @param _component
  */
-export declare function setComponentLoaded(component: LoadableComponent): void;
+export declare function setComponentLoaded(_component: LoadableComponent): void;
 /**
- * This helper util can be used to ensure a component has been loaded (The "componentDidLoad" Stencil lifecycle method has been called).
- *
- * Requires requires `LoadableComponent` to be implemented.
+ * This helper util can be used to ensure a component has been loaded (The "componentOnReady" lifecycle method has been called).
  *
  * A component developer can await this method before proceeding with any logic that requires a component to be loaded first.
  *
- * ```
+ * @deprecated use LitElement.componentOnReady instead
+ *
+ * @example
  * async myMethod(): Promise<void> {
  *   await componentLoaded(this);
  * }
- * ```
  *
  * @param component
  * @returns Promise<void>
  */
-export declare function componentLoaded(component: LoadableComponent): Promise<void>;
+export declare function componentLoaded(component: LitElement): Promise<void>;
 /**
- * This helper util can be used to ensuring the component is loaded and rendered by the browser (The "componentDidLoad" Stencil lifecycle method has been called and any internal elements are focusable).
- *
- * Requires `LoadableComponent` to be implemented.
+ * This helper util can be used to ensuring the component is loaded and rendered by the browser (The "componentOnReady" lifecycle method has been called and any internal elements are focusable).
  *
  * A component developer can await this method before proceeding with any logic that requires a component to be loaded first and then an internal element be focused.
  *
- * ```
+ * @example
  * async setFocus(): Promise<void> {
  *   await componentFocusable(this);
  *   this.internalElement?.focus();
  * }
- * ```
  *
  * @param component
  * @returns Promise<void>
  */
-export declare function componentFocusable(component: LoadableComponent): Promise<void>;
+export declare function componentFocusable(component: LitElement): Promise<void>;

package/dist/utils/openCloseComponent.d.ts

@@ -1,3 +1,4 @@
+import { KebabCase } from 'type-fest';
 /**
  * Defines interface for components with open/close public emitter.
  * All implementations of this interface must handle the following events: `beforeOpen`, `open`, `beforeClose`, `close`.
@@ -5,14 +6,14 @@
 export interface OpenCloseComponent {
     /** The host element. */
     readonly el: HTMLElement;
-    /** When true, the component opens. */
-    open?: boolean;
-    /** When true, the component is open. */
-    opened?: boolean;
-    /** Specifies the name of transitionProp. */
-    transitionProp?: string;
-    /** Specifies property on which active transition is watched for. */
-    openTransitionProp: string;
+    /**
+     * Specifies property on which active transition is watched for.
+     *
+     * This should be used if the component uses a property other than `open` to trigger a transition.
+     */
+    openProp?: string;
+    /** Specifies the name of CSS transition property. */
+    transitionProp?: KebabCase<Extract<keyof CSSStyleDeclaration, string>>;
     /** Specifies element that the transition is allowed to emit on. */
     transitionEl: HTMLElement;
     /** Defines method for `beforeOpen` event handler. */
@@ -25,20 +26,18 @@ export interface OpenCloseComponent {
     onClose: () => void;
 }
 /**
- * Helper to determine globally set transition duration on the given openTransitionProp, which is imported and set in the `@Watch`("open").
- * Used to emit (before)open/close events both for when the opacity transition is present and when there is none (transition-duration is set to 0).
+ * This util helps emit (before)open/close events consistently based on the associated CSS transition property.
+ *
+ * Note: this should be called whenever the component's toggling property changes and would trigger a transition.
  *
  * @example
  * import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
  *
- * async componentWillLoad() {
- * // When component initially renders, if `open` was set we need to trigger on load as watcher doesn't fire.
- * if (this.open) {
- *    onToggleOpenCloseComponent(this);
- * }
- * @Watch ("open")
- * async toggleModal(value: boolean): Promise<void> {
- *    onToggleOpenCloseComponent(this);
+ * override willUpdate(changes: PropertyValues<this>): void {
+ *   if (changes.has("open") && (this.hasUpdated || this.open !== false)) {
+ *     onToggleOpenCloseComponent(this);
+ *   }
+ *   // ...
  * }
  * @param component - OpenCloseComponent uses `open` prop to emit (before)open/close.
  */

package/hydrate/index.d.ts

@@ -11,6 +11,7 @@ import "../dist/components/calcite-autocomplete-item";
 import "../dist/components/calcite-autocomplete-item-group";
 import "../dist/components/calcite-avatar";
 import "../dist/components/calcite-block";
+import "../dist/components/calcite-block-group";
 import "../dist/components/calcite-block-section";
 import "../dist/components/calcite-button";
 import "../dist/components/calcite-card";

package/hydrate/index.js

@@ -11,6 +11,7 @@ import "../dist/components/calcite-autocomplete-item";
 import "../dist/components/calcite-autocomplete-item-group";
 import "../dist/components/calcite-avatar";
 import "../dist/components/calcite-block";
+import "../dist/components/calcite-block-group";
 import "../dist/components/calcite-block-section";
 import "../dist/components/calcite-button";
 import "../dist/components/calcite-card";

package/hydrate/index.mjs

@@ -11,6 +11,7 @@ import "../dist/components/calcite-autocomplete-item";
 import "../dist/components/calcite-autocomplete-item-group";
 import "../dist/components/calcite-avatar";
 import "../dist/components/calcite-block";
+import "../dist/components/calcite-block-group";
 import "../dist/components/calcite-block-section";
 import "../dist/components/calcite-button";
 import "../dist/components/calcite-card";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "3.0.0-next.98",
+  "version": "3.0.0",
   "description": "Web Components for Esri's Calcite Design System.",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "repository": {
@@ -36,12 +36,12 @@
   ],
   "scripts": {
     "build": "npm run util:prep-build-reqs && vite build",
-    "postbuild": "npm run util:generate-t9n-docs-json && npm run util:generate-supported-browsers-json && npm run util:clean-readmes && npm run util:copy-legacy-vscode-data",
+    "postbuild": "npm run util:generate-t9n-docs-json && npm run util:generate-supported-browsers-json && npm run util:copy-legacy-vscode-data",
     "build-storybook": "npm run util:prep-build-reqs && NODE_OPTIONS=--openssl-legacy-provider storybook build --output-dir ./docs --quiet",
     "build:dev": "vite build --mode development",
     "build:watch": "npm run util:prep-build-reqs && vite --mode production",
     "build:watch-dev": "npm run util:prep-build-reqs && vite --mode development",
-    "clean": "npm run util:clean-js-files && npm run util:clean-readmes && rimraf node_modules dist hydrate docs .turbo",
+    "clean": "npm run util:clean-js-files && rimraf node_modules dist hydrate docs .turbo",
     "lint": "concurrently npm:lint:*",
     "lint:html": "prettier --write \"**/*.html\" >/dev/null",
     "lint:json": "prettier --write \"**/*.json\" >/dev/null",
@@ -52,11 +52,10 @@
     "screenshot-tests": "npm run build-storybook",
     "screenshot-tests:preview": "npm run util:prep-build-reqs && NODE_OPTIONS=--openssl-legacy-provider STORYBOOK_SCREENSHOT_LOCAL_BUILD=true storybook dev",
     "screenshot-tests:publish": "npm run screenshot-tests && storybook-to-ghpages --existing-output-dir=docs",
-    "start": "npm run util:clean-js-files && concurrently --kill-others --raw \"trap 'npm run util:clean-js-files' INT TERM EXIT && tsc --project ./tsconfig-demos.json --watch\" \"npm run build:watch-dev\"",
+    "start": "npm run util:clean-js-files && concurrently --kill-others --raw \"trap 'npm run util:clean-js-files' INT TERM EXIT >/dev/null 2>&1 || true && tsc --project ./tsconfig-demos.json --watch\" \"npm run build:watch-dev\"",
     "test": "vitest run",
     "test:watch": "vitest",
     "util:clean-js-files": "rimraf --glob -- *.js {src,.storybook,support}/**/*.js",
-    "util:clean-readmes": "git restore src/components/*/readme.md",
     "util:clean-tested-build": "npm ci && npm test && npm run build",
     "util:copy-legacy-vscode-data": "cpy \"./dist/docs/vscode.html-custom-data.json\" \"./dist/extras/\" --rename=vscode-data.json --flat",
     "util:copy-assets": "npm run util:copy-icons",
@@ -69,10 +68,10 @@
     "util:test-types": "! grep -rnw 'dist/types' -e '<reference types='"
   },
   "dependencies": {
-    "@arcgis/components-controllers": "^4.32.0-next.75",
-    "@arcgis/components-utils": "^4.32.0-next.75",
-    "@arcgis/lumina": "^4.32.0-next.75",
-    "@esri/calcite-ui-icons": "4.0.0-next.7",
+    "@arcgis/components-controllers": "^4.32.0-next.129",
+    "@arcgis/components-utils": "^4.32.0-next.129",
+    "@arcgis/lumina": "^4.32.0-next.129",
+    "@esri/calcite-ui-icons": "4.0.0",
     "@floating-ui/dom": "^1.6.12",
     "@floating-ui/utils": "^0.2.8",
     "@types/color": "^4.2.0",
@@ -88,8 +87,8 @@
     "type-fest": "^4.30.1"
   },
   "devDependencies": {
-    "@esri/calcite-design-tokens": "3.0.0-next.7",
-    "@esri/eslint-plugin-calcite-components": "2.0.0-next.5"
+    "@esri/calcite-design-tokens": "3.0.0",
+    "@esri/eslint-plugin-calcite-components": "2.0.0"
   },
   "volta": {
     "extends": "../../package.json"
@@ -102,5 +101,5 @@
     "dist/docs/vscode.html-custom-data.json"
   ],
   "web-types": "dist/docs/web-types.json",
-  "gitHead": "674d2183ac8c2de9da46f93439994773f0c35826"
+  "gitHead": "e63242f9ee599ca587df864e4f85545746c1157c"
 }

package/readme.md

@@ -1,4 +1,4 @@
-[![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)](https://stenciljs.com/)
+[![Built With Lit](https://img.shields.io/badge/Built%20Wit%20Lit-black?style=flat-square&logo=lit&link=https%3A%2F%2Flit.dev%2F)](https://lit.dev/)
 [![npm package](https://img.shields.io/npm/v/@esri/calcite-components?style=flat-square&color=007AC2)](https://www.npmjs.com/package/@esri/calcite-components)
 [![minified size](https://img.shields.io/bundlephobia/min/@esri/calcite-components?style=flat-square&color=D83020)](https://bundlephobia.com/package/@esri/calcite-components)
 [![downloads per month](https://img.shields.io/npm/dm/@esri/calcite-components?style=flat-square&color=35AC46)](https://www.npmjs.com/package/@esri/calcite-components)
@@ -17,12 +17,12 @@ The most common approach for loading Calcite Components is to use the version ho
 ```html
 <script
   type="module"
-  src="https://cdn.jsdelivr.net/npm/@esri/calcite-components@2.13.2/dist/calcite/calcite.esm.js"
+  src="https://cdn.jsdelivr.net/npm/@esri/calcite-components@3.0.0/dist/calcite/calcite.esm.js"
 ></script>
 <link
   rel="stylesheet"
   type="text/css"
-  href="https://cdn.jsdelivr.net/npm/@esri/calcite-components@2.13.2/dist/calcite/calcite.css"
+  href="https://cdn.jsdelivr.net/npm/@esri/calcite-components@3.0.0/dist/calcite/calcite.css"
 />
 ```
 
@@ -40,45 +40,7 @@ npm install @esri/calcite-components
 
 ### 1. Build
 
-Choose one of the two builds provided by Calcite Components.
-
-#### Custom Elements
-
-[Custom Elements](https://stenciljs.com/docs/custom-elements) is the recommended build when leveraging a frontend framework. To use this build, you will need to set the path to Calcite Components' assets. You can either use local assets, which will be explained in a subsequent step, or assets hosted on the CDN.
-
-```jsx
-import { setAssetPath } from "@esri/calcite-components/dist/components";
-// CDN hosted assets
-setAssetPath("https://cdn.jsdelivr.net/npm/@esri/calcite-components/dist/calcite/assets");
-
-// Local assets
-// setAssetPath(PATH); // PATH depends on framework, more info below
-```
-
-Next, you need to import each component you use from the custom elements build. This will automatically define the custom elements on the window.
-
-```jsx
-import "@esri/calcite-components/dist/components/calcite-button";
-import "@esri/calcite-components/dist/components/calcite-icon";
-import "@esri/calcite-components/dist/components/calcite-slider";
-```
-
-#### Distribution
-
-When using the [Distribution](https://stenciljs.com/docs/distribution) build, you'll need to define the custom elements on the window. You can also choose between local and CDN hosted assets.
-
-```jsx
-import { defineCustomElements } from "@esri/calcite-components/dist/loader";
-// CDN hosted assets
-defineCustomElements(window, {
-  resourcesUrl: "https://cdn.jsdelivr.net/npm/@esri/calcite-components/dist/calcite/assets",
-});
-
-// Local assets
-// defineCustomElements(window);
-```
-
-Since you defined the custom elements on the window, you do not need to import individual components.
+Refer to the [Get started](https://developers.arcgis.com/calcite-design-system/get-started/) page for details on setting up a build.
 
 ### 2. Assets
 
@@ -102,33 +64,7 @@ import "@esri/calcite-components/dist/calcite/calcite.css";
 
 ## TypeScript
 
-Stencil provides a full set of typings for all the components in this repo. To make TypeScript aware of these components, just import the library:
-
-```ts
-import "@esri/calcite-components";
-```
-
-This will provide autocomplete of component names/properties, as well as additional HTML element types:
-
-```ts
-// created elements will implicitly have the correct type already
-const loader = document.createElement("calcite-loader");
-document.body.appendChild(loader);
-loader.active = true;
-
-// you can also explicitly type an element using the generated types
-// the type name will always be formatted like HTML{CamelCaseComponentName}Element
-const loader = document.querySelector(".my-loader-element") as HTMLCalciteLoaderElement;
-loader.active = true;
-```
-
-## `@stencil/core` Version
-
-When using Stencil, make sure the `@stencil/core` version in your project matches the one used by Calcite Components. You may run into type errors if the `@stencil/core` versions are different. You can install the same Stencil version used by `@esri/calcite-components`:
-
-```bash
-npm install @stencil/core@$(npm view @esri/calcite-components dependencies["@stencil/core"])
-```
+Refer to the [TypeScript section of the Framework integration](https://developers.arcgis.com/calcite-design-system/resources/frameworks/#typescript) resource page for guidance on setting up TypeScript.
 
 ## Browser Support
 

package/dist/calcite/22HJHGFC.js

@@ -1,6 +0,0 @@
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v3.0.0-next.98
-*/
-import{a as s,b as o}from"./VUI2CUZB.js";import{a as i}from"./T2I3BMFS.js";import{u as a}from"./UASDTDDX.js";import"./UBUBAUNX.js";import{I as l,d,e as n,v as r,w as e}from"./WWC5WLZF.js";var h=d`:host([disabled]) .content{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) .content *,:host([disabled]) .content ::slotted(*){pointer-events:none}:host{display:flex;flex:1 1 0%;flex-direction:column}.container{display:flex;flex:1 1 auto;align-items:stretch;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}.content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;font-size:var(--calcite-font-size--2);line-height:1.375;padding-inline:var(--calcite-stack-padding-inline, .75rem);padding-block:var(--calcite-stack-padding-block, .5rem)}.content-start{justify-content:flex-start}.content-end{justify-content:flex-end}.content-start,.content-end{flex:0 1 auto}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){margin-inline:.75rem;align-self:center}.actions-start,.actions-end,.content-start,.content-end{display:flex;align-items:center}.actions-start ::slotted(calcite-action),.actions-start ::slotted(calcite-action-menu),.actions-start ::slotted(calcite-handle),.actions-start ::slotted(calcite-dropdown),.actions-end ::slotted(calcite-action),.actions-end ::slotted(calcite-action-menu),.actions-end ::slotted(calcite-handle),.actions-end ::slotted(calcite-dropdown){align-self:stretch;color:inherit}:host([hidden]){display:none}[hidden]{display:none}`,c=class extends r{constructor(){super(...arguments),this.hasActionsEnd=!1,this.hasActionsStart=!1,this.hasContentEnd=!1,this.hasContentStart=!1,this.disabled=!1}static{this.properties={hasActionsEnd:16,hasActionsStart:16,hasContentEnd:16,hasContentStart:16,disabled:7}}static{this.styles=h}handleActionsStartSlotChange(t){this.hasActionsStart=a(t)}handleActionsEndSlotChange(t){this.hasActionsEnd=a(t)}handleContentStartSlotChange(t){this.hasContentStart=a(t)}handleContentEndSlotChange(t){this.hasContentEnd=a(t)}renderActionsStart(){let{hasActionsStart:t}=this;return i("actions-start-container",n`<div class=${e(s.actionsStart)} .hidden=${!t}><slot name=${o.actionsStart} @slotchange=${this.handleActionsStartSlotChange}></slot></div>`)}renderActionsEnd(){let{hasActionsEnd:t}=this;return i("actions-end-container",n`<div class=${e(s.actionsEnd)} .hidden=${!t}><slot name=${o.actionsEnd} @slotchange=${this.handleActionsEndSlotChange}></slot></div>`)}renderContentStart(){let{hasContentStart:t}=this;return n`<div class=${e(s.contentStart)} .hidden=${!t}><slot name=${o.contentStart} @slotchange=${this.handleContentStartSlotChange}></slot></div>`}renderDefaultContent(){return n`<div class=${e(s.content)}><slot></slot></div>`}renderContentEnd(){let{hasContentEnd:t}=this;return n`<div class=${e(s.contentEnd)} .hidden=${!t}><slot name=${o.contentEnd} @slotchange=${this.handleContentEndSlotChange}></slot></div>`}render(){return n`<div class=${e(s.container)}>${this.renderActionsStart()}${this.renderContentStart()}${this.renderDefaultContent()}${this.renderContentEnd()}${this.renderActionsEnd()}</div>`}};l("calcite-stack",c);export{c as Stack};

package/dist/calcite/24UHHCGZ.js

@@ -1,6 +0,0 @@
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v3.0.0-next.98
-*/
-import{a as S,b as x}from"./EU3H7BCA.js";import{a as y,b as O}from"./4MHQTNLP.js";import{a as f}from"./SKMMQQJV.js";import{l as v}from"./UASDTDDX.js";import"./UBUBAUNX.js";import{I as u,d as h,e as m,u as b,v as p,w as g}from"./WWC5WLZF.js";var l={sortItem:"sort-item",container:"container",containerHorizontal:"container--horizontal",containerVertical:"container--vertical"},E=h`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{display:flex;flex:1 1 auto}.container--vertical{flex-direction:column}.container--horizontal{flex-direction:row}:host([hidden]){display:none}[hidden]{display:none}`,d=class extends p{constructor(){super(),this.dragEnabled=!0,this.items=[],this.mutationObserver=f("mutation",()=>{this.setUpSorting()}),this.disabled=!1,this.handleSelector="calcite-handle",this.layout="vertical",this.loading=!1,this.calciteListOrderChange=b({cancelable:!1}),this.listen("calciteHandleNudge",this.calciteHandleNudgeNextHandler)}static{this.properties={canPull:0,canPut:0,disabled:7,dragSelector:3,group:3,handleSelector:3,layout:3,loading:7}}static{this.styles=E}connectedCallback(){super.connectedCallback(),this.setUpSorting(),this.beginObserving()}updated(){y(this)}disconnectedCallback(){super.disconnectedCallback(),x(this),this.endObserving()}calciteHandleNudgeNextHandler(e){this.handleNudgeEvent(e)}onGlobalDragStart(){this.endObserving()}onGlobalDragEnd(){this.beginObserving()}onDragEnd(){}onDragStart(){}onDragSort(){this.items=Array.from(this.el.children),this.calciteListOrderChange.emit()}handleNudgeEvent(e){let{direction:r}=e.detail,t=e.composedPath().find(a=>a.matches(this.handleSelector)),i=this.items.find(a=>a.contains(t)||e.composedPath().includes(a)),c=this.items.length-1,s=this.items.indexOf(i),o=!1,n;r==="up"?s===0?o=!0:n=s-1:s===c?n=0:s===c-1?o=!0:n=s+2,this.endObserving(),o?i.parentElement.appendChild(i):i.parentElement.insertBefore(i,this.items[n]),this.items=Array.from(this.el.children),this.beginObserving(),requestAnimationFrame(()=>v(t)),"selected"in t&&(t.selected=!0)}setUpSorting(){this.items=Array.from(this.el.children),S(this)}beginObserving(){this.mutationObserver?.observe(this.el,{childList:!0,subtree:!0})}endObserving(){this.mutationObserver?.disconnect()}render(){let{disabled:e,layout:r}=this,t=r==="horizontal"||!1;return O({disabled:e,children:m`<div class=${g({[l.container]:!0,[l.containerVertical]:!t,[l.containerHorizontal]:t})}><slot></slot></div>`})}};u("calcite-sortable-list",d);export{d as SortableList};

package/dist/calcite/26RYXNTM.js

@@ -1,6 +0,0 @@
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v3.0.0-next.98
-*/
-import{a as y}from"./SKMMQQJV.js";import{a as A}from"./LJ5WXSCB.js";import{b as f}from"./U7CNRHVY.js";import{v as S,z as l}from"./UASDTDDX.js";import{a as I}from"./UBUBAUNX.js";import{I as v,d as u,e as a,f as b,i as h,u as c,v as g,w as r}from"./WWC5WLZF.js";var p={actionIcon:"action-icon",actionIconStart:"action-icon--start",actionIconEnd:"action-icon--end",actionContainer:"action-container",stepBarContainer:"step-bar-container",singleView:"single-view"},o={stepBar:"step-bar",stepBarActive:"step-bar--active",stepBarComplete:"step-bar--complete",stepBarDisabled:"step-bar--disabled",stepBarError:"step-bar--error",stepBarInActive:"step-bar--inactive"},E=({disabled:d,active:e,complete:t,error:i})=>a`<svg class=${r({[o.stepBar]:!0})}>${b`<rect class=${r({[o.stepBarActive]:e,[o.stepBarComplete]:t,[o.stepBarDisabled]:d,[o.stepBarError]:i,[o.stepBarInActive]:!0})} width=100% x=0 y=0 />`}</svg>`,P=u`:host([scale=s]){--calcite-internal-stepper-item-spacing-unit-s: .25rem;--calcite-internal-stepper-action-block-size: 2.75rem;--calcite-internal-stepper-action-inline-size: 2rem;--calcite-internal-step-bar-gap: .25rem}:host([scale=m]){--calcite-internal-stepper-item-spacing-unit-s: .5rem;--calcite-internal-stepper-action-block-size: 3.25rem;--calcite-internal-stepper-action-inline-size: 2.5rem}:host([scale=l]){--calcite-internal-stepper-item-spacing-unit-s: .75rem;--calcite-internal-stepper-action-block-size: 4rem;--calcite-internal-stepper-action-inline-size: 3rem;--calcite-internal-step-bar-gap: .75rem}:host{display:flex}.container{position:relative;display:flex;inline-size:100%;min-inline-size:fit-content;flex-direction:row;flex-wrap:wrap;align-items:stretch;justify-content:space-between}:host([layout=vertical]) .container{flex:1 1 auto;flex-direction:column}:host([layout=horizontal]) .container,:host([layout=horizontal-single]) .container{display:grid;grid-template-areas:"items" "content";gap:.5rem var(--calcite-internal-stepper-item-spacing-unit-s)}:host([layout=horizontal][scale=s]) .container,:host([layout=horizontal-single][scale=s]) .container{gap:.25rem var(--calcite-internal-stepper-item-spacing-unit-s)}:host([layout=horizontal][scale=l]) .container,:host([layout=horizontal-single][scale=l]) .container{gap:.75rem var(--calcite-internal-stepper-item-spacing-unit-s)}:host([layout=horizontal]) .container.single-view{display:flex;grid-template-columns:none}.action-icon{position:relative;display:flex;flex-grow:0;block-size:var(--calcite-internal-stepper-action-block-size);inline-size:var(--calcite-internal-stepper-action-inline-size)}.action-container{position:absolute;display:flex;justify-content:space-between;padding-block:.25rem;inline-size:100%}.step-bar{display:flex;block-size:100%;inline-size:100%}.step-bar-container{position:absolute;display:flex;align-items:flex-start;justify-content:space-between;block-size:.125rem;inline-size:100%;gap:var(--calcite-internal-step-bar-gap, .5rem)}.step-bar--inactive{fill:var(--calcite-color-border-3, #dfdfdf);fill-opacity:1;block-size:100%}.step-bar--active{fill:var(--calcite-color-brand)}.step-bar--complete{fill:var(--calcite-color-brand);fill-opacity:.5}.step-bar--error{fill:var(--calcite-color-status-danger)}.step-bar--disabled{opacity:.5}:host([hidden]){display:none}[hidden]{display:none}`,m=class extends g{constructor(){super(),this.enabledItems=[],this.guid=`calcite-stepper-action-${I()}`,this.itemMap=new Map,this.items=[],this.multipleViewMode=!1,this.mutationObserver=y("mutation",()=>this.updateItems()),this.icon=!1,this.layout="horizontal",this.messages=A(),this.numbered=!1,this.scale="m",this.selectedItem=null,this.calciteInternalStepperItemChange=c({cancelable:!1}),this.calciteStepperChange=c({cancelable:!1}),this.calciteStepperItemChange=c({cancelable:!1}),this.listen("calciteInternalStepperItemKeyEvent",this.calciteInternalStepperItemKeyEvent),this.listen("calciteInternalStepperItemRegister",this.registerItem),this.listen("calciteInternalStepperItemSelect",this.updateItem),this.listen("calciteStepperItemSelect",this.handleItemSelect)}static{this.properties={currentActivePosition:16,icon:7,layout:3,messageOverrides:0,numbered:7,numberingSystem:3,scale:3,selectedItem:0}}static{this.styles=P}async endStep(){let e=this.getEnabledStepIndex(this.items.length-1,"previous");typeof e=="number"&&this.updateStep(e)}async goToStep(e){let t=e-1;this.currentActivePosition!==t&&this.updateStep(t)}async nextStep(){let e=this.getEnabledStepIndex(this.currentActivePosition+1,"next");typeof e=="number"&&this.updateStep(e)}async prevStep(){let e=this.getEnabledStepIndex(this.currentActivePosition-1,"previous");typeof e=="number"&&this.updateStep(e)}async startStep(){let e=this.getEnabledStepIndex(0,"next");typeof e=="number"&&this.updateStep(e)}connectedCallback(){super.connectedCallback(),this.mutationObserver?.observe(this.el,{childList:!0}),this.updateItems()}willUpdate(e){(e.has("icon")&&(this.hasUpdated||this.icon!==!1)||e.has("layout")&&(this.hasUpdated||this.layout!=="horizontal")||e.has("numbered")&&(this.hasUpdated||this.numbered!==!1)||e.has("scale")&&(this.hasUpdated||this.scale!=="m"))&&(this.updateItems(),this.determineActiveStepper()),e.has("numberingSystem")&&this.setStepperItemNumberingSystem(),e.has("currentActivePosition")&&requestAnimationFrame(()=>{this.determineActiveStepper()})}loaded(){if(typeof this.currentActivePosition!="number"){let e=this.getFirstEnabledStepperPosition();e===0&&(this.currentActivePosition=e),this.calciteInternalStepperItemChange.emit({position:e})}}disconnectedCallback(){super.disconnectedCallback(),this.mutationObserver?.disconnect()}calciteInternalStepperItemKeyEvent(e){let t=e.detail.item,i=e.target;switch(t.key){case"ArrowDown":case"ArrowRight":l(this.enabledItems,i,"next");break;case"ArrowUp":case"ArrowLeft":l(this.enabledItems,i,"previous");break;case"Home":l(this.enabledItems,i,"first");break;case"End":l(this.enabledItems,i,"last");break}e.stopPropagation()}registerItem(e){let t=e.target,{content:i,position:n}=e.detail;this.itemMap.set(t,{position:n,content:i}),this.enabledItems=this.filterItems(),e.stopPropagation()}updateItem(e){let{position:t}=e.detail;typeof t=="number"&&(this.currentActivePosition=t,this.selectedItem=e.target),this.calciteInternalStepperItemChange.emit({position:t})}handleItemSelect(){this.emitItemSelect()}emitItemSelect(){this.calciteStepperItemChange.emit(),this.calciteStepperChange.emit()}updateItems(){this.el.querySelectorAll("calcite-stepper-item").forEach(e=>{e.icon=this.icon,e.numbered=this.numbered,e.layout=this.layout,e.scale=this.scale})}determineActiveStepper(){let{items:e}=this;if(e.length<2)return;let{currentActivePosition:t,layout:i}=this;this.multipleViewMode=i!=="horizontal-single",e.forEach((n,s)=>{n.hidden=i==="horizontal-single"&&s!==(t||0)})}getEnabledStepIndex(e,t="next"){let{items:i,currentActivePosition:n}=this,s=e;for(;i[s]?.disabled&&this.layout!=="horizontal-single";)s=s+(t==="previous"?-1:1);return s!==n&&s<i.length&&s>=0?s:null}updateStep(e){this.currentActivePosition=e,this.calciteInternalStepperItemChange.emit({position:e})}filterItems(){return this.items.filter(e=>!e.disabled)}setStepperItemNumberingSystem(){this.items.forEach(e=>{e.numberingSystem=this.numberingSystem})}handleActionClick(e){let t=this.currentActivePosition;e.target.getAttribute("data-position")==="start"?this.prevStep():this.nextStep(),typeof this.currentActivePosition=="number"&&t!==this.currentActivePosition&&!this.items[this.currentActivePosition].disabled&&this.emitItemSelect()}getFirstEnabledStepperPosition(){let e=this.items.findIndex(t=>!t.disabled);return e>-1?e:0}setContainerEl(e){this.containerEl=e}handleDefaultSlotChange(e){let t=S(e).filter(n=>n?.tagName==="CALCITE-STEPPER-ITEM");this.items=t;let i=Array(t.length).fill("1fr").join(" ");this.containerEl.style.gridTemplateAreas=i,this.containerEl.style.gridTemplateColumns=i,this.setStepperItemNumberingSystem()}render(){return this.el.ariaLabel=this.messages.label,this.el.role="region",a`<div class=${r({container:!0,[p.singleView]:this.layout==="horizontal-single"})} ${f(this.setContainerEl)}>${this.layout==="horizontal-single"&&a`<div class=${r({[p.stepBarContainer]:!0})}>${this.items.map((e,t)=>E({active:t===this.currentActivePosition,complete:e.complete&&t!==this.currentActivePosition&&!e.error,disabled:e.disabled&&t!==this.currentActivePosition,error:e.error&&t!==this.currentActivePosition}))}</div>`||""}${this.layout==="horizontal-single"&&a`<div class=${r({[p.actionContainer]:!0})}>${this.renderAction("start")}${this.renderAction("end")}</div>`||""}<slot @slotchange=${this.handleDefaultSlotChange}></slot></div>`}renderAction(e){let t=e==="start",i=t?"chevron-left":"chevron-right",{currentActivePosition:n,multipleViewMode:s,layout:z}=this,x=this.items.length,C=`${this.guid}-${t?"start":"end"}`;return z==="horizontal-single"&&!s?a`<calcite-action alignment=center appearance=transparent class=${r({[p.actionIcon]:!0})} compact data-position=${e??h} .disabled=${n===0&&t||n===x-1&&!t} .icon=${i} icon-flip-rtl id=${C??h} @click=${this.handleActionClick} .scale=${this.scale} .text=${t?this.messages.previousStep:this.messages.nextStep}></calcite-action>`:null}};v("calcite-stepper",m);export{m as Stepper};

package/dist/calcite/2BDE5BE5.js

@@ -1,6 +0,0 @@
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v3.0.0-next.98
-*/
-import{b}from"./BXSIT4FA.js";import"./V7O3TS4K.js";import{a as s}from"./T2I3BMFS.js";import{a as m,b as u,d as x}from"./3ISRG7GL.js";import{I as f,d as p,e as t,v,w as o,y as e}from"./WWC5WLZF.js";var i={container:"container",containerLink:"container--link",textContainer:"text-container",heading:"heading",description:"description",image:"image",standalone:"standalone",icon:"icon"},$=p`:host{display:inline-flex}.container{margin:0;display:flex;align-items:center;justify-content:center;font-size:var(--calcite-font-size-0);line-height:1.25rem;background-color:var(--calcite-navigation-background-color, var(--calcite-internal-navigation-logo-background-color, var(--calcite-color-foreground-1)));border-block-end:2px solid var(--calcite-color-transparent);transition-property:background-color;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out}.container--link{cursor:pointer;text-decoration-line:none;outline-color:transparent}:host(:focus) .container--link{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.image,.icon{margin:0;display:flex;block-size:1.75rem;padding-inline:1rem;color:var(--calcite-navigation-logo-text-color, var(--calcite-icon-color, var(--calcite-internal-navigation-logo-text-color, inherit)))}.image~.icon{padding-inline-start:0px}.image~.text-container,.icon~.text-container{padding-inline-start:0px}:host([href]:hover),:host([href]:focus){--calcite-internal-navigation-logo-background-color: var(--calcite-color-foreground-2)}:host([href]:active){--calcite-internal-navigation-logo-background-color: var(--calcite-color-foreground-3)}:host([active]) .container{border-block-end-color:var(--calcite-navigation-accent-color, var(--calcite-color-brand))}:host([active]),:host([href]:active){--calcite-internal-navigation-logo-text-color: var(--calcite-color-brand)}.text-container{margin-block-start:.125rem;display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:1rem;text-align:start}.heading{margin-inline-start:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-navigation-logo-heading-text-color, var(--calcite-color-text-1))}.standalone{font-size:var(--calcite-font-size-1)}.description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--calcite-color-text-2);color:var(--calcite-navigation-logo-text-color, var(--calcite-color-text-2));font-size:var(--calcite-font-size--1)}:host([hidden]){display:none}[hidden]{display:none}`,d=class extends v{constructor(){super(...arguments),this.iconFlipRtl=!1}static{this.properties={active:7,description:1,heading:1,headingLevel:11,href:3,icon:3,iconFlipRtl:7,label:1,rel:3,target:3,thumbnail:1}}static{this.shadowRootOptions={mode:"open",delegatesFocus:!0}}static{this.styles=$}async setFocus(){await x(this),this.href&&this.el.focus()}load(){m(this)}loaded(){u(this)}renderIcon(){return t`<calcite-icon class=${o(i.icon)} .flipRtl=${this.iconFlipRtl} .icon=${this.icon} scale=l></calcite-icon>`}renderHeaderContent(){let{heading:n,headingLevel:a,description:r}=this,c=n?s(i.heading,b({class:{[i.heading]:!0,[i.standalone]:!this.description},level:a,children:n})):null,l=r?s(i.description,t`<span class=${o(i.description)}>${r}</span>`):null;return c||l?s(i.textContainer,t`<div class=${o(i.textContainer)}>${c}${l}</div>`):null}render(){let{icon:n,href:a,label:r,rel:c,target:l,thumbnail:g}=this,h=t`${g&&t`<img alt=${(r||"")??e} class=${o(i.image)} src=${g??e}>`||""}${n&&this.renderIcon()||""}${this.renderHeaderContent()}`;return a?t`<a class=${o({[i.container]:!0,[i.containerLink]:!0})} href=${a??e} rel=${c??e} target=${l??e}>${h}</a>`:t`<div class=${o(i.container)}>${h}</div>`}};f("calcite-navigation-logo",d);export{d as NavigationLogo};

package/dist/calcite/2Z66C2UQ.js

@@ -1,6 +0,0 @@
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v3.0.0-next.98
-*/
-import{c as C,e as w,h as $}from"./TMHRMF76.js";import{c as x,d as y,e as z}from"./4YTV42YC.js";import{a as u,b as v}from"./4MHQTNLP.js";import{a as f}from"./RXLZN3RA.js";import{a as d,b as g}from"./U7CNRHVY.js";import{e as b}from"./UASDTDDX.js";import{a as p,b as k,d as m}from"./3ISRG7GL.js";import"./UBUBAUNX.js";import{B as n,I as h,d as c,e as a,f as l,u as t,v as r,w as o,y as i}from"./WWC5WLZF.js";var I={toggle:"toggle",check:"check-svg"},H=c`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]) .check-svg,:host([scale=s]) .toggle{inline-size:var(--calcite-checkbox-size, .75rem);block-size:var(--calcite-checkbox-size, .75rem)}:host([scale=m]) .check-svg,:host([scale=m]) .toggle{inline-size:var(--calcite-checkbox-size, var(--calcite-font-size--1));block-size:var(--calcite-checkbox-size, var(--calcite-font-size--1))}:host([scale=l]) .check-svg,:host([scale=l]) .toggle{inline-size:var(--calcite-checkbox-size, 1rem);block-size:var(--calcite-checkbox-size, 1rem)}:host{position:relative;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host .check-svg{pointer-events:none;box-sizing:border-box;display:block;overflow:hidden;background-color:var(--calcite-color-foreground-1);fill:currentColor;stroke:currentColor;stroke-width:1;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;box-shadow:inset 0 0 0 1px var(--calcite-checkbox-border-color, var(--calcite-color-border-input));color:var(--calcite-checkbox-icon-color, var(--calcite-color-background))}:host([status=invalid]:not([checked])) .check-svg{box-shadow:inset 0 0 0 1px var(--calcite-color-status-danger)}:host([status=invalid]:not([checked])) .toggle:focus{outline:2px solid var(--calcite-color-status-danger);outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([checked]) .check-svg,:host([indeterminate]) .check-svg{background-color:var(--calcite-color-brand);box-shadow:inset 0 0 0 1px var(--calcite-color-brand)}:host([hovered]) .toggle .check-svg,:host .toggle:hover .check-svg{box-shadow:inset 0 0 0 2px var(--calcite-checkbox-border-color-hover, var(--calcite-color-brand))}.toggle{position:relative;outline-color:transparent}.toggle:active,.toggle:focus,.toggle:focus-visible{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.toggle:after,.toggle:before{inset-block-start:50%;inset-inline-start:50%;min-block-size:1.5rem;min-inline-size:1.5rem;position:absolute}.toggle:not(.calcite--rtl):after{content:"";transform:translate(-50%) translateY(-50%)}.toggle.calcite--rtl:before{content:"";transform:translate(50%) translateY(-50%)}@media (forced-colors: active){.check-svg{border:1px solid currentColor}}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`,s=class extends r{constructor(){super(),this.checkedPath="M5.5 12L2 8.689l.637-.636L5.5 10.727l8.022-7.87.637.637z",this.indeterminatePath="M13 8v1H3V8z",this.onLabelClick=()=>{this.toggle()},this.toggleEl=d(),this.checked=!1,this.disabled=!1,this.hovered=!1,this.indeterminate=!1,this.required=!1,this.scale="m",this.status="idle",this.validity={valid:!1,badInput:!1,customError:!1,patternMismatch:!1,rangeOverflow:!1,rangeUnderflow:!1,stepMismatch:!1,tooLong:!1,tooShort:!1,typeMismatch:!1,valueMissing:!1},this.calciteCheckboxChange=t({cancelable:!1}),this.calciteInternalCheckboxBlur=t({cancelable:!1}),this.calciteInternalCheckboxFocus=t({cancelable:!1}),this.listen("click",this.clickHandler),this.listen("keydown",this.keyDownHandler)}static{this.properties={checked:7,disabled:7,form:3,hovered:7,indeterminate:7,label:1,name:3,required:7,scale:3,status:3,validity:0,value:1}}static{this.styles=H}async setFocus(){await m(this),this.toggleEl.value?.focus()}connectedCallback(){super.connectedCallback(),x(this),C(this)}load(){p(this)}updated(){u(this)}loaded(){k(this)}disconnectedCallback(){super.disconnectedCallback(),y(this),w(this)}syncHiddenFormInput(e){e.type="checkbox"}getPath(){return this.indeterminate?this.indeterminatePath:this.checked?this.checkedPath:""}toggle(){this.disabled||(this.checked=!this.checked,this.setFocus(),this.indeterminate=!1,this.calciteCheckboxChange.emit())}keyDownHandler(e){f(e.key)&&(this.toggle(),e.preventDefault())}clickHandler(){this.toggle()}onToggleBlur(){this.calciteInternalCheckboxBlur.emit(!1)}onToggleFocus(){this.calciteInternalCheckboxFocus.emit(!0)}render(){let e=b(this.el)==="rtl";return v({disabled:this.disabled,children:a`<div .ariaChecked=${this.checked} .ariaLabel=${z(this)} class=${o({[I.toggle]:!0,[n.rtl]:e})} @blur=${this.onToggleBlur} @focus=${this.onToggleFocus} role=checkbox tabindex=${(this.disabled?void 0:0)??i} ${g(this.toggleEl)}><svg aria-hidden=true class=${o(I.check)} viewBox="0 0 16 16">${l`<path d=${this.getPath()??i} />`}</svg><slot></slot></div>${$({component:this})}`})}};h("calcite-checkbox",s);export{s as Checkbox};