@esri/calcite-components 1.0.0-next.686 → 1.0.0-next.688

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-next.686
+ * v1.0.0-next.688
  */
 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-next.686
+ * v1.0.0-next.688
  */
 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-next.686
+ * v1.0.0-next.688
  */
 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-next.686
+ * v1.0.0-next.688
  */
 (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-item/accordion-item.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+import { FlipContext } from "../interfaces";
 import { ItemKeyEvent, RegistryEntry, RequestedItem } from "./interfaces";
 /**
  * @slot - A slot for adding custom content, including nested `calcite-accordion-item`s.
@@ -16,6 +17,8 @@ export declare class AccordionItem implements ConditionalSlotComponent {
   iconStart: string;
   /** Specifies an icon to display at the end of the component. */
   iconEnd: string;
+  /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+  iconFlipRtl: FlipContext;
   /**
    * @internal
    */

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

@@ -29,6 +29,8 @@ export declare class Action implements InteractiveComponent, LocalizedComponent,
   disabled: boolean;
   /** Specifies an icon to display. */
   icon: string;
+  /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+  iconFlipRtl: boolean;
   /**
    * When `true`, displays a visual indicator.
    */

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

@@ -72,10 +72,8 @@ export declare class ActionBar implements ConditionalSlotComponent, LoadableComp
   overflowActions(): Promise<void>;
   /**
    * Sets focus on the component.
-   *
-   * @param focusId
    */
-  setFocus(focusId?: "expand-toggle"): Promise<void>;
+  setFocus(): Promise<void>;
   actionMenuOpenHandler: (event: CustomEvent<void>) => void;
   resizeHandlerEntries: (entries: ResizeObserverEntry[]) => void;
   resizeHandler: (entry: ResizeObserverEntry) => void;

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

@@ -57,10 +57,8 @@ export declare class ActionPad implements ConditionalSlotComponent, LoadableComp
   componentDidLoad(): void;
   /**
    * Sets focus on the component.
-   *
-   * @param focusId
    */
-  setFocus(focusId?: "expand-toggle"): Promise<void>;
+  setFocus(): Promise<void>;
   actionMenuOpenHandler: (event: CustomEvent<void>) => void;
   toggleExpand: () => void;
   setExpandToggleRef: (el: HTMLCalciteActionElement) => void;

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

@@ -33,6 +33,8 @@ export declare class Alert implements OpenCloseComponent, LoadableComponent, T9n
    * pass a Calcite UI Icon name to display a specific icon.
    */
   icon: string | boolean;
+  /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+  iconFlipRtl: boolean;
   /** Specifies an accessible name for the component. */
   label: string;
   /**

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

@@ -1,7 +1,7 @@
 import "form-request-submit-polyfill/form-request-submit-polyfill";
 import { VNode } from "../../stencil-public-runtime";
-import { ButtonAlignment, ButtonAppearance, ButtonColor } from "./interfaces";
-import { FlipContext, Scale, Width } from "../interfaces";
+import { ButtonAlignment } from "./interfaces";
+import { Appearance, FlipContext, Kind, Scale, Width } from "../interfaces";
 import { LabelableComponent } from "../../utils/label";
 import { InteractiveComponent } from "../../utils/interactive";
 import { FormOwner } from "../../utils/form";
@@ -17,11 +17,11 @@ export declare class Button implements LabelableComponent, InteractiveComponent,
   /** Specifies the alignment of the component's elements. */
   alignment: ButtonAlignment;
   /** Specifies the appearance style of the component. */
-  appearance: ButtonAppearance;
+  appearance: Extract<"outline" | "outline-fill" | "solid" | "transparent", Appearance>;
   /** Accessible name for the component. */
   label: string;
-  /** Specifies the color of the component. */
-  color: ButtonColor;
+  /** Specifies the kind of the component (will apply to border and background if applicable). */
+  kind: Extract<"brand" | "danger" | "inverse" | "neutral", Kind>;
   /**  When `true`, interaction is prevented and the component is displayed with lower opacity. */
   disabled: boolean;
   /**
@@ -46,12 +46,6 @@ export declare class Button implements LabelableComponent, InteractiveComponent,
    * @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)
    */
   rel: string;
-  /**
-   * The form ID to associate with the component.
-   *
-   * @deprecated – The property is no longer needed if the component is placed inside a form.
-   */
-  form: string;
   /** When `true`, adds a round style to the component. */
   round: boolean;
   /** Specifies the size of the component. */

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

@@ -1,4 +1,2 @@
-export declare type ButtonColor = "blue" | "inverse" | "neutral" | "red";
-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/chip/chip.d.ts

@@ -1,6 +1,5 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
-import { ChipColor } from "./interfaces";
-import { Appearance, Scale } from "../interfaces";
+import { Appearance, Kind, Scale } from "../interfaces";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { Messages } from "./assets/chip/t9n";
 import { T9nComponent } from "../../utils/t9n";
@@ -12,9 +11,9 @@ import { LoadableComponent } from "../../utils/loadable";
  */
 export declare class Chip implements ConditionalSlotComponent, LoadableComponent, LocalizedComponent, T9nComponent {
   /** Specifies the appearance style of the component. */
-  appearance: Extract<"solid" | "transparent", Appearance>;
-  /** Specifies the color for the component. */
-  color: ChipColor;
+  appearance: Extract<"outline" | "outline-fill" | "solid", Appearance>;
+  /** Specifies the kind of the component (will apply to border and background if applicable). */
+  kind: Extract<"brand" | "inverse" | "neutral", Kind>;
   /** When `true`, a close button is added to the component. */
   closable: boolean;
   /** Specifies an icon to display. */
@@ -53,8 +52,17 @@ export declare class Chip implements ConditionalSlotComponent, LoadableComponent
    */
   calciteChipClose: EventEmitter<void>;
   closeClickHandler: (event: MouseEvent) => void;
+  private updateHasContent;
+  private setupTextContentObserver;
+  private handleSlotImageChange;
+  /** watches for changing text content */
+  private mutationObserver;
   private closeButton;
   private guid;
+  /** determine if there is slotted content for styling purposes */
+  private hasContent;
+  /** determine if there is slotted image for styling purposes */
+  private hasImage;
   renderChipImage(): VNode;
   render(): VNode;
 }

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

@@ -4,6 +4,9 @@ export declare const CSS: {
   imageContainer: string;
   chipIcon: string;
   closeIcon: string;
+  contentSlotted: string;
+  container: string;
+  imageSlotted: string;
 };
 export declare const SLOTS: {
   image: string;

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

@@ -30,6 +30,8 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
   placeholder: string;
   /** Specifies the placeholder icon for the input. */
   placeholderIcon: string;
+  /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+  placeholderIconFlipRtl: boolean;
   /** Specifies the maximum number of `calcite-combobox-item`s (including nested children) to display before displaying a scrollbar. */
   maxItems: number;
   maxItemsHandler(): void;

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

@@ -21,6 +21,8 @@ export declare class ComboboxItem implements ConditionalSlotComponent, Interacti
   guid: string;
   /** Specifies an icon to display. */
   icon: string;
+  /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+  iconFlipRtl: boolean;
   selectedWatchHandler(): void;
   /** The component's text. */
   textLabel: string;

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

@@ -1,17 +1,16 @@
 import { VNode } from "../../stencil-public-runtime";
-import { Appearance, Scale } from "../interfaces";
-import { ButtonColor } from "../button/interfaces";
+import { Appearance, Kind, Scale } from "../interfaces";
 import { InteractiveComponent } from "../../utils/interactive";
 import { LoadableComponent } from "../../utils/loadable";
 export declare class Fab implements InteractiveComponent, LoadableComponent {
   /**
    * Specifies the appearance style of the component.
    */
-  appearance: Extract<"solid" | "outline", Appearance>;
+  appearance: Extract<"solid" | "outline-fill", Appearance>;
   /**
-   * Specifies the color of the component.
+   * Specifies the kind of the component (will apply to border and background).
    */
-  color: ButtonColor;
+  kind: Extract<"brand" | "danger" | "inverse" | "neutral", Kind>;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    */
@@ -22,6 +21,8 @@ export declare class Fab implements InteractiveComponent, LoadableComponent {
    * @default "plus"
    */
   icon: string;
+  /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+  iconFlipRtl: boolean;
   /**
    * Accessible name for the component.
    */

package/dist/types/components/input-message/input-message.d.ts

@@ -7,6 +7,8 @@ export declare class InputMessage {
   el: HTMLCalciteInputMessageElement;
   /** Specifies an icon to display. */
   icon: boolean | string;
+  /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+  iconFlipRtl: boolean;
   /** Specifies the size of the component. */
   scale: Scale;
   /** Specifies the status of the input field, which determines message and icons. */

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

@@ -1,8 +1,8 @@
 export declare type Alignment = "start" | "center" | "end";
-export declare type Appearance = "solid" | "clear" | "outline" | "transparent" | "minimal";
+export declare type Appearance = "clear" | "minimal" | "outline" | "outline-fill" | "solid" | "transparent";
 export declare type Columns = 1 | 2 | 3 | 4 | 5 | 6;
 export declare type FlipContext = "both" | "start" | "end";
-export declare type Kind = "brand" | "danger" | "info" | "warning" | "success";
+export declare type Kind = "brand" | "danger" | "info" | "inverse" | "neutral" | "warning" | "success";
 export declare type Layout = "horizontal" | "vertical" | "grid";
 export declare type LogicalFlowPosition = "inline-start" | "inline-end" | "block-start" | "block-end";
 export declare type Position = "start" | "end";

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

@@ -29,6 +29,8 @@ export declare class Notice implements ConditionalSlotComponent, LoadableCompone
    * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
    */
   icon: string | boolean;
+  /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+  iconFlipRtl: boolean;
   /** Specifies the size of the component. */
   scale: Scale;
   /** Specifies the width of the component. */

package/dist/types/components/pick-list-item/pick-list-item.d.ts

@@ -33,6 +33,8 @@ export declare class PickListItem implements ConditionalSlotComponent, Interacti
    * @see [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/pick-list/resources.ts#L5)
    */
   icon: ICON_TYPES | null;
+  /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+  iconFlipRtl: boolean;
   /**
    * Label and accessible name for the component. Appears next to the icon.
    */

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

@@ -1,6 +1,6 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
-import { ButtonAppearance, ButtonColor, DropdownIconType } from "../button/interfaces";
-import { FlipContext, Scale, Width } from "../interfaces";
+import { DropdownIconType } from "../button/interfaces";
+import { Appearance, FlipContext, Kind, Scale, Width } from "../interfaces";
 import { OverlayPositioning } from "../../utils/floating-ui";
 import { InteractiveComponent } from "../../utils/interactive";
 /**
@@ -9,9 +9,9 @@ import { InteractiveComponent } from "../../utils/interactive";
 export declare class SplitButton implements InteractiveComponent {
   el: HTMLCalciteSplitButtonElement;
   /** Specifies the appearance style of the component. */
-  appearance: ButtonAppearance;
-  /** Specifies the color of the component. */
-  color: ButtonColor;
+  appearance: Extract<"outline" | "outline-fill" | "solid" | "transparent", Appearance>;
+  /** Specifies the kind of the component (will apply to border and background if applicable). */
+  kind: Extract<"brand" | "danger" | "inverse" | "neutral", Kind>;
   /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
   disabled: boolean;
   handleDisabledChange(value: boolean): void;

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

@@ -30,6 +30,8 @@ export declare class StepperItem implements InteractiveComponent, LocalizedCompo
   /** When `true`, displays a status icon in the component's heading. */
   /** @internal */
   icon: boolean;
+  /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+  iconFlipRtl: boolean;
   /** When `true`, displays the step number in the component's heading. */
   /** @internal */
   numbered: boolean;

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

@@ -39,6 +39,8 @@ export declare class Tile implements ConditionalSlotComponent, InteractiveCompon
   href: string;
   /** Specifies an icon to display. */
   icon: string;
+  /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+  iconFlipRtl: boolean;
   connectedCallback(): void;
   disconnectedCallback(): void;
   componentDidRender(): void;

package/dist/types/components/tile-select/tile-select.d.ts

@@ -21,6 +21,8 @@ export declare class TileSelect implements InteractiveComponent, LoadableCompone
   hidden: boolean;
   /** Specifies an icon to display. */
   icon: string;
+  /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+  iconFlipRtl: boolean;
   /** Specifies the name of the component on form submission. */
   name: any;
   nameChanged(newName: string): void;

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

@@ -34,6 +34,8 @@ export declare class ValueListItem implements ConditionalSlotComponent, Interact
    * @see [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/pick-list/resources.ts#L5)
    */
   icon?: ICON_TYPES | null;
+  /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+  iconFlipRtl: boolean;
   /**
    * Label and accessible name for the component. Appears next to the icon.
    */