@esri/calcite-components 1.0.0-beta.92 → 1.0.0-beta.94

package/dist/loader/cdn.js

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

package/dist/loader/index.cjs.js

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

package/dist/loader/index.es2017.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.92
+ * v1.0.0-beta.94
  */
 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-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.92
+ * v1.0.0-beta.94
  */
 (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/accordion/interfaces.d.ts

@@ -1,4 +1,4 @@
-export declare type AccordionAppearance = "default" | "minimal" | "transparent";
+export declare type AccordionAppearance = "default" | "minimal" | "transparent" | "solid";
 export interface RequestedItem {
   requestedAccordionItem: HTMLCalciteAccordionItemElement;
 }

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

@@ -32,8 +32,18 @@ export declare class AccordionItem implements ConditionalSlotComponent {
   heading?: string;
   /** Specifies a description for the component. */
   description: string;
-  /** Specifies an icon to display - accepts Calcite UI icon names. */
+  /**
+   * Specifies an icon to display - accepts Calcite UI icon names.
+   *
+   * @deprecated use `iconStart` or `iconEnd` properties instead
+   */
   icon?: string;
+  iconHandler(value: string): void;
+  /**Specified an icon to display at the start - accepts Calcite UI icon names. */
+  iconStart?: string;
+  iconStartHandler(value: string): void;
+  /**Specified an icon to display at the end - accepts Calcite UI icon names. */
+  iconEnd?: string;
   /**
    * @internal
    */

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

@@ -13,4 +13,7 @@ export declare const CSS: {
   description: string;
   expandIcon: string;
   content: string;
+  iconStart: string;
+  iconEnd: string;
+  headerContainer: string;
 };

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

@@ -1,4 +1,4 @@
-import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Event, EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Alignment, Appearance, Scale } from "../interfaces";
 import { InteractiveComponent } from "../../utils/interactive";
 /**
@@ -72,5 +72,6 @@ export declare class Action implements InteractiveComponent {
   renderTextContainer(): VNode;
   renderIconContainer(): VNode;
   render(): VNode;
+  handleTooltipSlotChange: (event: Event) => void;
   calciteActionClickHandler: () => void;
 }

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

@@ -11,3 +11,6 @@ export declare const CSS: {
 export declare const TEXT: {
   loading: string;
 };
+export declare const SLOTS: {
+  tooltip: string;
+};

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

@@ -1,4 +1,4 @@
 export declare type ButtonColor = "blue" | "inverse" | "neutral" | "red";
-export declare type ButtonAppearance = "solid" | "outline" | "clear" | "transparent";
+export declare type ButtonAppearance = "solid" | "outline" | "clear" | "transparent" | "minimal";
 export declare type ButtonAlignment = "start" | "end" | "center" | "space-between" | "icon-start-space-between" | "icon-end-space-between";
 export declare type DropdownIconType = "chevron" | "caret" | "ellipsis" | "overflow";

package/dist/types/components/color-picker/color-picker.d.ts

@@ -12,7 +12,7 @@ export declare class ColorPicker implements InteractiveComponent {
    * When true, clearing the input and blurring will restore the last valid color set. When false, it will set it to empty.
    */
   allowEmpty: boolean;
-  /** specify the appearance - default (containing border), or minimal (no containing border) */
+  /** specify the appearance - solid (containing border), or minimal (no containing border) */
   appearance: ColorAppearance;
   /**
    * Internal prop for advanced use-cases.

package/dist/types/components/color-picker/interfaces.d.ts

@@ -1,5 +1,5 @@
 import type Color from "color";
-export declare type ColorAppearance = "default" | "minimal";
+export declare type ColorAppearance = "default" | "minimal" | "solid";
 export declare type ColorMode = "rgb" | "hsv";
 export declare type InternalColor = Color;
 export declare type ColorValue = string | RGB | RGBA | HSV | HSVA | HSL | HSLA;

package/dist/types/components/color-picker-hex-input/color-picker-hex-input.d.ts

@@ -40,6 +40,7 @@ export declare class ColorPickerHexInput {
   private onCalciteInternalInputBlur;
   private onInputChange;
   protected onInputKeyDown(event: KeyboardEvent): void;
+  private onPaste;
   private inputNode;
   /**
    * The last valid/selected color. Used as a fallback if an invalid hex code is entered.

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

@@ -151,6 +151,7 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
   private ignoreSelectedEventsFlag;
   openTransitionProp: string;
   transitionEl: HTMLDivElement;
+  debouncedReposition: import("lodash").DebouncedFunc<() => Promise<void>>;
   setFilteredPlacements: () => void;
   getValue: () => string | string[];
   onLabelClick: () => void;

package/dist/types/components/date-picker/utils.d.ts

@@ -46,3 +46,9 @@ export declare const requestCache: Record<string, Promise<DateLocaleData>>;
  * @public
  */
 export declare function getLocaleData(lang: string): Promise<DateLocaleData>;
+/**
+ *  Maps value to valueAsDate
+ *
+ * @param value
+ */
+export declare function getValueAsDateRange(value: string[]): Date[];

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

@@ -1,3 +1,4 @@
+/// <reference types="lodash" />
 import { Event, EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ItemKeyboardEvent, Selection } from "./interfaces";
 import { OverlayPositioning, FloatingUIComponent, EffectivePlacement, MenuPlacement } from "../../utils/floating-ui";
@@ -105,6 +106,7 @@ export declare class Dropdown implements InteractiveComponent, OpenCloseComponen
   transitionEl: HTMLDivElement;
   guid: string;
   defaultAssignedElements: Element[];
+  debouncedReposition: import("lodash").DebouncedFunc<() => Promise<void>>;
   slotChangeHandler: (event: Event) => void;
   setFilteredPlacements: () => void;
   updateTriggers: (event: Event) => void;

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

@@ -1,22 +1,22 @@
 import { VNode } from "../../stencil-public-runtime";
 import { FlowDirection } from "./interfaces";
 /**
- * @slot - A slot for adding `calcite-panel`s to the flow.
+ * @slot - A slot for adding `calcite-flow-item` or `calcite-panel`s (deprecated) to the flow.
  */
 export declare class Flow {
   /**
-   * Removes the currently active `calcite-panel`.
+   * Removes the currently active `calcite-flow-item` or `calcite-panel`.
    */
-  back(): Promise<HTMLCalcitePanelElement>;
+  back(): Promise<HTMLCalciteFlowItemElement>;
   el: HTMLCalciteFlowElement;
-  panelCount: number;
   flowDirection: FlowDirection;
-  panels: HTMLCalcitePanelElement[];
-  panelItemMutationObserver: MutationObserver;
+  itemCount: number;
+  items: HTMLCalciteFlowItemElement[];
+  itemMutationObserver: MutationObserver;
   connectedCallback(): void;
   disconnectedCallback(): void;
-  handleCalcitePanelBackClick(): void;
-  getFlowDirection: (oldPanelCount: number, newPanelCount: number) => FlowDirection | null;
+  handleItemBackClick(): void;
+  getFlowDirection: (oldFlowItemCount: number, newFlowItemCount: number) => FlowDirection | null;
   updateFlowProps: () => void;
   render(): VNode;
 }

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

@@ -0,0 +1,101 @@
+import { VNode, EventEmitter } from "../../stencil-public-runtime";
+import { HeadingLevel } from "../functional/Heading";
+import { Scale } from "../interfaces";
+import { InteractiveComponent } from "../../utils/interactive";
+/**
+ * @slot - A slot for adding custom content.
+ * @slot header-actions-start - A slot for adding actions or content to the start side of the header.
+ * @slot header-actions-end - A slot for adding actions or content to the end side of the header.
+ * @slot header-content - A slot for adding custom content to the header.
+ * @slot header-menu-actions - A slot for adding an overflow menu with actions inside a `calcite-dropdown`.
+ * @slot fab - A slot for adding a `calcite-fab` (floating action button) to perform an action.
+ * @slot footer-actions - A slot for adding buttons to the footer.
+ * @slot footer - A slot for adding custom content to the footer.
+ */
+export declare class FlowItem implements InteractiveComponent {
+  /** When true, displays a close button in the trailing side of the header */
+  closable: boolean;
+  /** When true, flow-item will be hidden */
+  closed: boolean;
+  /**
+   * When provided, this method will be called before it is removed from the parent flow.
+   */
+  beforeBack?: () => Promise<void>;
+  /** A description for the component. */
+  description: string;
+  /**
+   *  When true, interaction is prevented and the component is displayed with lower opacity.
+   */
+  disabled: boolean;
+  /**
+   * The component header text.
+   */
+  heading?: string;
+  /**
+   * Specifies the number at which section headings should start.
+   */
+  headingLevel: HeadingLevel;
+  /**
+   * Specifies the maximum height of the component.
+   */
+  heightScale?: Scale;
+  /**
+   * Accessible name for the component's back button. The back button will only be shown when 'showBackButton' is true.
+   */
+  intlBack?: string;
+  /**
+   * Accessible name for the component's close button. The close button will only be shown when 'dismissible' is true.
+   */
+  intlClose?: string;
+  /**
+   * Accessible name for the component's actions menu.
+   */
+  intlOptions?: string;
+  /**
+   * When true, a busy indicator is displayed.
+   */
+  loading: boolean;
+  /**
+   * When true, the action menu items in the `header-menu-actions` slot are open.
+   */
+  menuOpen: boolean;
+  /**
+   * When true, displays a back button in the header.
+   */
+  showBackButton: boolean;
+  /**
+   * Specifies the width of the component.
+   */
+  widthScale?: Scale;
+  componentDidRender(): void;
+  /**
+   * Fires when the back button is clicked.
+   */
+  calciteFlowItemBackClick: EventEmitter<void>;
+  el: HTMLCalciteFlowItemElement;
+  containerEl: HTMLCalcitePanelElement;
+  backButtonEl: HTMLCalciteActionElement;
+  /**
+   * Sets focus on the component.
+   */
+  setFocus(): Promise<void>;
+  /**
+   * Scrolls the component's content to a specified set of coordinates.
+   *
+   * ```
+   *   myCalciteFlowItem.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).
+   *   });
+   * ```
+   *
+   * @param options
+   */
+  scrollContentTo(options?: ScrollToOptions): Promise<void>;
+  backButtonClick: () => void;
+  setBackRef: (node: HTMLCalciteActionElement) => void;
+  getBackLabel: () => string;
+  renderBackButton(): VNode;
+  render(): VNode;
+}

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

@@ -0,0 +1,19 @@
+export declare const CSS: {
+  backButton: string;
+};
+export declare const ICONS: {
+  backLeft: string;
+  backRight: string;
+};
+export declare const TEXT: {
+  back: string;
+};
+export declare const SLOTS: {
+  headerActionsStart: string;
+  headerActionsEnd: string;
+  headerMenuActions: string;
+  headerContent: string;
+  fab: string;
+  footer: string;
+  footerActions: string;
+};

package/dist/types/components/input-date-picker/input-date-picker.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="lodash" />
 import { VNode, EventEmitter } from "../../stencil-public-runtime";
 import { HeadingLevel } from "../functional/Heading";
 import { LabelableComponent } from "../../utils/label";
@@ -181,6 +182,7 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
   openTransitionProp: string;
   transitionEl: HTMLDivElement;
   setReferenceEl(): void;
+  debouncedReposition: import("lodash").DebouncedFunc<() => Promise<void>>;
   setFilteredPlacements: () => void;
   private setTransitionEl;
   onLabelClick(): void;

package/dist/types/components/input-time-picker/input-time-picker.d.ts

@@ -1,14 +1,21 @@
 import { VNode, EventEmitter } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
-import { LogicalPlacement } from "../../utils/floating-ui";
+import { FloatingUIComponent, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui";
 import { LabelableComponent } from "../../utils/label";
 import { FormComponent } from "../../utils/form";
 import { InteractiveComponent } from "../../utils/interactive";
-export declare class InputTimePicker implements LabelableComponent, FormComponent, InteractiveComponent {
+export declare class InputTimePicker implements LabelableComponent, FormComponent, InteractiveComponent, FloatingUIComponent {
   el: HTMLCalciteInputTimePickerElement;
-  /** The active state of the time input */
+  /**
+   * The active state of the time input
+   *
+   * @deprecated Use open instead.
+   */
   active: boolean;
-  activeHandler(): void;
+  activeHandler(value: boolean): void;
+  /** When true, displays the `calcite-time-picker` component.*/
+  open: boolean;
+  openHandler(value: boolean): void;
   /** The disabled state of the time input */
   disabled: boolean;
   /**
@@ -59,6 +66,13 @@ export declare class InputTimePicker implements LabelableComponent, FormComponen
   required: boolean;
   /** The scale (size) of the time input */
   scale: Scale;
+  /**
+   * Determines the type of positioning to use for the overlaid content.
+   *
+   * Using the "absolute" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The "fixed" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is "fixed".
+   *
+   */
+  overlayPositioning: OverlayPositioning;
   /**
    * Determines where the popover will be positioned relative to the input.
    *

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

@@ -1,5 +1,5 @@
 export declare type Alignment = "start" | "center" | "end";
-export declare type Appearance = "solid" | "clear" | "outline";
+export declare type Appearance = "solid" | "clear" | "outline" | "transparent" | "minimal";
 export declare type Columns = 1 | 2 | 3 | 4 | 5 | 6;
 export declare type FlipContext = "both" | "start" | "end";
 export declare type Layout = "horizontal" | "vertical" | "grid";

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

@@ -29,9 +29,11 @@ export declare class Link implements InteractiveComponent {
   target?: string;
   componentDidRender(): void;
   render(): VNode;
+  clickHandler(event: PointerEvent): void;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   /** the rendered child element */
   private childEl;
+  private childElClickHandler;
   private storeTagRef;
 }

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

@@ -61,6 +61,12 @@ export declare class Modal implements ConditionalSlotComponent, OpenCloseCompone
   hasFooter: boolean;
   closeButtonEl: HTMLButtonElement;
   contentId: string;
+  /**
+   * We use internal variable to make sure initially open modal can transition from closed state when rendered
+   *
+   * @private
+   */
+  isOpen: boolean;
   modalContent: HTMLDivElement;
   private mutationObserver;
   previousActiveElement: HTMLElement;

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

@@ -1,5 +1,6 @@
 export declare const CSS: {
   modal: string;
+  modalOpen: string;
   title: string;
   header: string;
   footer: string;

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

@@ -7,8 +7,18 @@ export interface PaginationDetail {
   num: number;
 }
 export declare class Pagination implements GlobalAttrComponent {
+  /**
+   * When true, number values are displayed with a group separator corresponding to the language and country format.
+   */
+  groupSeparator: boolean;
   /** Specifies the number of items per page. */
   num: number;
+  /**
+   * Specifies the Unicode numeral system used by the component for localization.
+   *
+   * @mdn [numberingSystem](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/numberingSystem)
+   */
+  numberingSystem?: string;
   /** Specifies the starting item number. */
   start: number;
   /** Specifies the total number of items. */
@@ -53,6 +63,12 @@ export declare class Pagination implements GlobalAttrComponent {
   private showLeftEllipsis;
   private showRightEllipsis;
   private emitUpdate;
+  /**
+   * Returns a string representing the localized label value based on groupSeparator prop being on or off.
+   *
+   * @param value
+   */
+  private determineGroupSeparator;
   renderPages(): VNode[];
   renderPage(start: number): VNode;
   renderLeftEllipsis(): VNode;

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

@@ -1,7 +1,6 @@
-import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Event, EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
 import { HeadingLevel } from "../functional/Heading";
-import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { InteractiveComponent } from "../../utils/interactive";
 /**
  * @slot - A slot for adding custom content.
@@ -13,7 +12,7 @@ import { InteractiveComponent } from "../../utils/interactive";
  * @slot footer-actions - A slot for adding buttons to the footer.
  * @slot footer - A slot for adding custom content to the footer.
  */
-export declare class Panel implements ConditionalSlotComponent, InteractiveComponent {
+export declare class Panel implements InteractiveComponent {
   /**
    * When true, hides the component.
    *
@@ -26,6 +25,8 @@ export declare class Panel implements ConditionalSlotComponent, InteractiveCompo
   closedHandler(value: boolean): void;
   /**
    * When provided, this method will be called before it is removed from the parent flow.
+   *
+   * @deprecated use `calcite-flow-item` instead.
    */
   beforeBack?: () => Promise<void>;
   /**
@@ -48,10 +49,14 @@ export declare class Panel implements ConditionalSlotComponent, InteractiveCompo
   headingLevel: HeadingLevel;
   /**
    * When true, displays a back button in the header.
+   *
+   * @deprecated use `calcite-flow-item` instead.
    */
   showBackButton: boolean;
   /**
    * Accessible name for the component's back button. The back button will only be shown when 'showBackButton' is true.
+   *
+   * @deprecated use `calcite-flow-item` instead.
    */
   intlBack?: string;
   /**
@@ -97,6 +102,13 @@ export declare class Panel implements ConditionalSlotComponent, InteractiveCompo
   containerEl: HTMLElement;
   panelScrollEl: HTMLElement;
   resizeObserver: ResizeObserver;
+  hasStartActions: boolean;
+  hasEndActions: boolean;
+  hasMenuItems: boolean;
+  hasHeaderContent: boolean;
+  hasFooterContent: boolean;
+  hasFooterActions: boolean;
+  hasFab: boolean;
   connectedCallback(): void;
   disconnectedCallback(): void;
   /**
@@ -115,6 +127,8 @@ export declare class Panel implements ConditionalSlotComponent, InteractiveCompo
   calcitePanelScroll: EventEmitter<void>;
   /**
    * Fires when the back button is clicked.
+   *
+   * @deprecated use `calcite-flow-item` instead.
    */
   calcitePanelBackClick: EventEmitter<void>;
   resizeHandler: () => void;
@@ -125,12 +139,19 @@ export declare class Panel implements ConditionalSlotComponent, InteractiveCompo
   close: () => void;
   panelScrollHandler: () => void;
   backButtonClick: () => void;
+  handleHeaderActionsStartSlotChange: (event: Event) => void;
+  handleHeaderActionsEndSlotChange: (event: Event) => void;
+  handleHeaderMenuActionsSlotChange: (event: Event) => void;
+  handleHeaderContentSlotChange: (event: Event) => void;
+  handleFooterSlotChange: (event: Event) => void;
+  handleFooterActionsSlotChange: (event: Event) => void;
+  handleFabSlotChange: (event: Event) => void;
   /**
    * Sets focus on the component.
    *
    * @param focusId
    */
-  setFocus(focusId?: "dismiss-button" | "back-button"): Promise<void>;
+  setFocus(focusId?: "back-button" | "dismiss-button"): Promise<void>;
   /**
    * Scrolls the component's content to a specified set of coordinates.
    *

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

@@ -14,10 +14,6 @@ export declare const CSS: {
   contentHeight: string;
   fabContainer: string;
   footer: string;
-  menuContainer: string;
-  menuButton: string;
-  menu: string;
-  menuOpen: string;
 };
 export declare const ICONS: {
   close: string;

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

@@ -1,3 +1,4 @@
+/// <reference types="lodash" />
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { OverlayPositioning, FloatingUIComponent, LogicalPlacement, EffectivePlacement, ReferenceElement } from "../../utils/floating-ui";
 import { OpenCloseComponent } from "../../utils/openCloseComponent";
@@ -104,8 +105,8 @@ export declare class Popover implements FloatingUIComponent, OpenCloseComponent
   guid: string;
   openTransitionProp: string;
   transitionEl: HTMLDivElement;
+  hasLoaded: boolean;
   connectedCallback(): void;
-  componentWillLoad(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;
   /** Fires when the component is requested to be closed and before the closing transition begins. */
@@ -130,9 +131,10 @@ export declare class Popover implements FloatingUIComponent, OpenCloseComponent
    * @param value
    */
   toggle(value?: boolean): Promise<void>;
+  debouncedReposition: import("lodash").DebouncedFunc<() => Promise<void>>;
   private setTransitionEl;
   setFilteredPlacements: () => void;
-  setUpReferenceElement: () => void;
+  setUpReferenceElement: (warn?: boolean) => void;
   getId: () => string;
   setExpandedAttr: () => void;
   addReferences: () => void;

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

@@ -5,12 +5,24 @@ export declare class RadioGroupItem {
   /** When true, the component is checked. */
   checked: boolean;
   protected handleCheckedChange(): void;
-  /** Specifies an icon to display - accepts Calcite UI icon names. */
+  /**
+   * Optionally pass an icon to display - accepts Calcite UI icon names
+   *
+   * @deprecated Use either iconStart or iconEnd but do not combine them with icon & iconPosition.
+   */
   icon?: string;
   /** When true, the icon will be flipped when the element direction is right-to-left ("rtl"). */
   iconFlipRtl: boolean;
-  /** When used with "icon", specifies its position. */
+  /**
+   * Optionally used with icon, select where to position the icon
+   *
+   * @deprecated Use either iconStart or iconEnd but do not combine them with icon & iconPosition.
+   */
   iconPosition?: Position;
+  /** Optionally pass an icon to display at the start - accepts Calcite UI icon names */
+  iconStart?: string;
+  /** Optionally pass an icon to display at the end - accepts Calcite UI icon names */
+  iconEnd?: string;
   /**
    * The component's value.
    */

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

@@ -0,0 +1,7 @@
+export declare const CSS: {
+  handleLabel: string;
+  handleLabelMinValue: string;
+  handleLabelValue: string;
+  tickMin: string;
+  tickMax: string;
+};