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

package/dist/components/calcite-alert.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
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { s as slotChangeHasAssignedElement, e as setRequestedIcon, t as toAriaBoolean, b as getSlotted } from './dom.js';
@@ -79,6 +79,7 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.autoCloseDuration = this.autoClose ? "medium" : null;
     this.kind = "brand";
     this.icon = undefined;
+    this.iconFlipRtl = false;
     this.label = undefined;
     this.numberingSystem = undefined;
     this.placement = "bottom";
@@ -155,7 +156,7 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     const queueNumber = this.queueLength > 2 ? this.queueLength - 1 : 1;
     const queueText = numberStringFormatter.numberFormatter.format(queueNumber);
     const queueCount = (h("div", { class: `${this.queueLength > 1 ? "active " : ""}alert-queue-count` }, h("calcite-chip", { scale: this.scale, value: queueText }, queueText)));
-    const { open, autoClose, label, placement, queued, requestedIcon } = this;
+    const { open, autoClose, label, placement, queued, requestedIcon, iconFlipRtl } = this;
     const role = autoClose ? "alert" : "alertdialog";
     const hidden = !open;
     const slotNode = (h("slot", { key: "actionsEndSlot", name: SLOTS.actionsEnd, onSlotchange: this.actionsEndSlotChangeHandler }));
@@ -163,7 +164,7 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         container: true,
         queued,
         [placement]: true
-      }, onPointerOut: this.autoClose && this.autoCloseTimeoutId ? this.handleMouseLeave : null, onPointerOver: this.autoClose && this.autoCloseTimeoutId ? this.handleMouseOver : null, ref: this.setTransitionEl }, requestedIcon ? (h("div", { class: "alert-icon" }, h("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, h("div", { class: "alert-content" }, h("slot", { name: SLOTS.title }), h("slot", { name: SLOTS.message }), h("slot", { name: SLOTS.link })), h("div", { class: CSS.actionsEnd, hidden: !hasEndActions }, slotNode), this.queueLength > 1 ? queueCount : null, closeButton, open && !queued && autoClose ? h("div", { class: "alert-dismiss-progress" }) : null)));
+      }, onPointerOut: this.autoClose && this.autoCloseTimeoutId ? this.handleMouseLeave : null, onPointerOver: this.autoClose && this.autoCloseTimeoutId ? this.handleMouseOver : null, ref: this.setTransitionEl }, requestedIcon ? (h("div", { class: "alert-icon" }, h("calcite-icon", { flipRtl: iconFlipRtl, icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, h("div", { class: "alert-content" }, h("slot", { name: SLOTS.title }), h("slot", { name: SLOTS.message }), h("slot", { name: SLOTS.link })), h("div", { class: CSS.actionsEnd, hidden: !hasEndActions }, slotNode), this.queueLength > 1 ? queueCount : null, closeButton, open && !queued && autoClose ? h("div", { class: "alert-dismiss-progress" }) : null)));
   }
   // when an alert is opened or closed, update queue and determine active alert
   alertSync(event) {
@@ -252,6 +253,7 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "autoCloseDuration": [513, "auto-close-duration"],
     "kind": [513],
     "icon": [520],
+    "iconFlipRtl": [516, "icon-flip-rtl"],
     "label": [1],
     "numberingSystem": [513, "numbering-system"],
     "placement": [513],

package/dist/components/calcite-avatar.js

@@ -1,11 +1,11 @@
 /*!
  * 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
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client/index.js';
 import { h as hexToRGB, i as isValidHex } from './utils.js';
-import { h as getThemeName } from './dom.js';
+import { f as getThemeName } from './dom.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
 /**

package/dist/components/calcite-block-section.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
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { c as getElementDir, t as toAriaBoolean } from './dom.js';

package/dist/components/calcite-block.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
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { b as getSlotted, t as toAriaBoolean } from './dom.js';

package/dist/components/calcite-button.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
  */
 import { B as Button, d as defineCustomElement$1 } from './button.js';
 

package/dist/components/calcite-card.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
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { t as toAriaBoolean, b as getSlotted } from './dom.js';

package/dist/components/calcite-checkbox.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
  */
 import { C as Checkbox, d as defineCustomElement$1 } from './checkbox.js';
 

package/dist/components/calcite-chip.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
  */
 import { C as Chip, d as defineCustomElement$1 } from './chip.js';
 

package/dist/components/calcite-color-picker-hex-input.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
  */
 import { c as ColorPickerHexInput, d as defineCustomElement$1 } from './color-picker-hex-input.js';
 

package/dist/components/calcite-color-picker-swatch.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
  */
 import { C as ColorPickerSwatch, d as defineCustomElement$1 } from './color-picker-swatch.js';
 

package/dist/components/calcite-color-picker.js

@@ -1,12 +1,12 @@
 /*!
  * 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
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { c as color, d as defineCustomElement$a } from './color-picker-swatch.js';
 import { D as DEFAULT_COLOR, H as HSV_LIMITS, C as CSS, a as DIMENSIONS, d as defineCustomElement$b, b as DEFAULT_STORAGE_KEY_PREFIX, R as RGB_LIMITS } from './color-picker-hex-input.js';
-import { i as isPrimaryPointerButton, c as getElementDir, f as focusElement } from './dom.js';
+import { i as isPrimaryPointerButton, c as getElementDir } from './dom.js';
 import { n as normalizeHex, C as CSSColorMode, p as parseMode, c as colorEqual } from './utils.js';
 import { c as clamp } from './math.js';
 import { u as updateHostInteraction } from './interactive.js';
@@ -529,7 +529,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   /** Sets focus on the component. */
   async setFocus() {
     await componentLoaded(this);
-    return focusElement(this.colorFieldScopeNode);
+    this.el.focus();
   }
   //--------------------------------------------------------------------------
   //
@@ -597,7 +597,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       } }, messages.hex), h("calcite-color-picker-hex-input", { allowEmpty: allowEmpty, class: CSS.control, numberingSystem: this.numberingSystem, onCalciteColorPickerHexInputChange: this.handleHexInputChange, scale: hexInputScale, value: selectedColorInHex }))), hideChannels ? null : (h("calcite-tabs", { class: {
         [CSS.colorModeContainer]: true,
         [CSS.splitSection]: true
-      }, scale: hexInputScale }, h("calcite-tab-nav", { slot: "title-group" }, this.renderChannelsTabTitle("rgb"), this.renderChannelsTabTitle("hsv")), this.renderChannelsTab("rgb"), this.renderChannelsTab("hsv"))))), hideSaved ? null : (h("div", { class: { [CSS.savedColorsSection]: true, [CSS.section]: true } }, h("div", { class: CSS.header }, h("label", null, messages.saved), h("div", { class: CSS.savedColorsButtons }, h("calcite-button", { appearance: "transparent", class: CSS.deleteColor, color: "neutral", disabled: noColor, iconStart: "minus", label: messages.deleteColor, onClick: this.deleteColor, scale: hexInputScale, type: "button" }), h("calcite-button", { appearance: "transparent", class: CSS.saveColor, color: "neutral", disabled: noColor, iconStart: "plus", label: messages.saveColor, onClick: this.saveColor, scale: hexInputScale, type: "button" }))), savedColors.length > 0 ? (h("div", { class: CSS.savedColors }, [
+      }, scale: hexInputScale }, h("calcite-tab-nav", { slot: "title-group" }, this.renderChannelsTabTitle("rgb"), this.renderChannelsTabTitle("hsv")), this.renderChannelsTab("rgb"), this.renderChannelsTab("hsv"))))), hideSaved ? null : (h("div", { class: { [CSS.savedColorsSection]: true, [CSS.section]: true } }, h("div", { class: CSS.header }, h("label", null, messages.saved), h("div", { class: CSS.savedColorsButtons }, h("calcite-button", { appearance: "transparent", class: CSS.deleteColor, disabled: noColor, iconStart: "minus", kind: "neutral", label: messages.deleteColor, onClick: this.deleteColor, scale: hexInputScale, type: "button" }), h("calcite-button", { appearance: "transparent", class: CSS.saveColor, disabled: noColor, iconStart: "plus", kind: "neutral", label: messages.saveColor, onClick: this.saveColor, scale: hexInputScale, type: "button" }))), savedColors.length > 0 ? (h("div", { class: CSS.savedColors }, [
       ...savedColors.map((color) => (h("calcite-color-picker-swatch", { active: selectedColorInHex === color, class: CSS.savedColor, color: color, key: color, onClick: this.handleSavedColorSelect, onKeyDown: this.handleSavedColorKeyDown, scale: scale, tabIndex: 0 })))
     ])) : null))));
   }
@@ -783,6 +783,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       .array()
       .map((value) => Math.floor(value));
   }
+  static get delegatesFocus() { return true; }
   static get assetsDirs() { return ["assets"]; }
   get el() { return this; }
   static get watchers() { return {
@@ -794,7 +795,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "effectiveLocale": ["effectiveLocaleChange"]
   }; }
   static get style() { return colorPickerCss; }
-}, [1, "calcite-color-picker", {
+}, [17, "calcite-color-picker", {
     "allowEmpty": [516, "allow-empty"],
     "appearance": [513],
     "color": [1040],

package/dist/components/calcite-combobox-item-group.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
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client/index.js';
 import { d as getAncestors, e as getDepth } from './utils2.js';

package/dist/components/calcite-combobox-item.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
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { g as getElementProp, b as getSlotted } from './dom.js';
@@ -48,6 +48,7 @@ const ComboboxItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.ancestors = undefined;
     this.guid = guid();
     this.icon = undefined;
+    this.iconFlipRtl = false;
     this.textLabel = undefined;
     this.value = undefined;
     this.filterDisabled = undefined;
@@ -94,7 +95,7 @@ const ComboboxItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   //
   // --------------------------------------------------------------------------
   renderIcon(isSingle) {
-    const { icon, disabled, selected } = this;
+    const { icon, disabled, selected, iconFlipRtl } = this;
     const level = `${CSS.icon}--indent`;
     const defaultIcon = isSingle ? "dot" : "check";
     const iconPath = disabled ? "circle-disallowed" : defaultIcon;
@@ -108,7 +109,7 @@ const ComboboxItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         [CSS.custom]: !!icon,
         [CSS.iconActive]: icon && selected,
         [level]: true
-      }, icon: icon || iconPath, scale: "s" }));
+      }, flipRtl: iconFlipRtl, icon: icon || iconPath, scale: "s" }));
   }
   renderChildren() {
     if (getSlotted(this.el)) {
@@ -139,6 +140,7 @@ const ComboboxItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "ancestors": [1040],
     "guid": [513],
     "icon": [513],
+    "iconFlipRtl": [516, "icon-flip-rtl"],
     "textLabel": [513, "text-label"],
     "value": [8],
     "filterDisabled": [516, "filter-disabled"],

package/dist/components/calcite-combobox.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
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { f as filter } from './filter2.js';
@@ -319,6 +319,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.label = undefined;
     this.placeholder = undefined;
     this.placeholderIcon = undefined;
+    this.placeholderIconFlipRtl = false;
     this.maxItems = 0;
     this.name = undefined;
     this.allowCustomValues = undefined;
@@ -739,7 +740,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       const ancestors = [...getItemAncestors(item)].reverse();
       const pathLabel = [...ancestors, item].map((el) => el.textLabel);
       const label = selectionMode !== "ancestors" ? item.textLabel : pathLabel.join(" / ");
-      return (h("calcite-chip", { class: chipClasses, closable: true, icon: item.icon, id: item.guid ? `${chipUidPrefix}${item.guid}` : null, key: item.textLabel, messageOverrides: { dismissLabel: messages.removeTag }, onCalciteChipClose: () => this.calciteChipCloseHandler(item), scale: scale, title: label, value: item.value }, label));
+      return (h("calcite-chip", { class: chipClasses, closable: true, icon: item.icon, iconFlipRtl: item.iconFlipRtl, id: item.guid ? `${chipUidPrefix}${item.guid}` : null, key: item.textLabel, messageOverrides: { dismissLabel: messages.removeTag }, onCalciteChipClose: () => this.calciteChipCloseHandler(item), scale: scale, title: label, value: item.value }, label));
     });
   }
   renderInput() {
@@ -777,14 +778,14 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }, ref: setFloatingEl }, h("div", { class: classes, ref: setContainerEl }, h("ul", { class: { list: true, "list--hide": !open } }, h("slot", null)))));
   }
   renderIconStart() {
-    const { selectedItems, placeholderIcon, selectionMode } = this;
+    const { selectedItems, placeholderIcon, selectionMode, placeholderIconFlipRtl } = this;
     const selectedItem = selectedItems[0];
     const selectedIcon = selectedItem?.icon;
     const singleSelectionMode = selectionMode === "single";
     const iconAtStart = !this.open && selectedItem
       ? !!selectedIcon && singleSelectionMode
       : !!this.placeholderIcon && (!selectedItem || singleSelectionMode);
-    return (iconAtStart && (h("span", { class: "icon-start" }, h("calcite-icon", { class: "selected-icon", icon: !this.open && selectedItem ? selectedIcon : placeholderIcon, scale: "s" }))));
+    return (iconAtStart && (h("span", { class: "icon-start" }, h("calcite-icon", { class: "selected-icon", flipRtl: this.open && selectedItem ? selectedItem.iconFlipRtl : placeholderIconFlipRtl, icon: !this.open && selectedItem ? selectedIcon : placeholderIcon, scale: "s" }))));
   }
   renderIconEnd() {
     const { open } = this;
@@ -820,6 +821,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "label": [1],
     "placeholder": [1],
     "placeholderIcon": [513, "placeholder-icon"],
+    "placeholderIconFlipRtl": [516, "placeholder-icon-flip-rtl"],
     "maxItems": [514, "max-items"],
     "name": [513],
     "allowCustomValues": [516, "allow-custom-values"],

package/dist/components/calcite-date-picker-day.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
  */
 import { D as DatePickerDay, d as defineCustomElement$1 } from './date-picker-day.js';
 

package/dist/components/calcite-date-picker-month-header.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
  */
 import { D as DatePickerMonthHeader, d as defineCustomElement$1 } from './date-picker-month-header.js';
 

package/dist/components/calcite-date-picker-month.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
  */
 import { D as DatePickerMonth, d as defineCustomElement$1 } from './date-picker-month.js';
 

package/dist/components/calcite-date-picker.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
  */
 import { D as DatePicker, d as defineCustomElement$1 } from './date-picker.js';
 

package/dist/components/calcite-dropdown-group.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
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { g as getElementProp } from './dom.js';
@@ -64,9 +64,10 @@ const DropdownGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   getGroupPosition() {
     return Array.prototype.indexOf.call(this.el.parentElement.querySelectorAll("calcite-dropdown-group"), this.el);
   }
+  static get delegatesFocus() { return true; }
   get el() { return this; }
   static get style() { return dropdownGroupCss; }
-}, [1, "calcite-dropdown-group", {
+}, [17, "calcite-dropdown-group", {
     "groupTitle": [513, "group-title"],
     "selectionMode": [513, "selection-mode"],
     "scale": [513]

package/dist/components/calcite-dropdown-item.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
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { g as getElementProp, t as toAriaBoolean } from './dom.js';

package/dist/components/calcite-dropdown.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
  */
 import { D as Dropdown, d as defineCustomElement$1 } from './dropdown.js';
 

package/dist/components/calcite-fab.js

@@ -1,10 +1,10 @@
 /*!
  * 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
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client/index.js';
-import { f as focusElement } from './dom.js';
+import { h as focusElement } from './dom.js';
 import { u as updateHostInteraction } from './interactive.js';
 import { a as setUpLoadableComponent, s as setComponentLoaded, c as componentLoaded } from './loadable.js';
 import { d as defineCustomElement$4 } from './button.js';
@@ -25,10 +25,11 @@ const Fab = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.appearance = "outline";
-    this.color = "neutral";
+    this.appearance = "solid";
+    this.kind = "brand";
     this.disabled = false;
     this.icon = ICONS.plus;
+    this.iconFlipRtl = false;
     this.label = undefined;
     this.loading = false;
     this.scale = "m";
@@ -65,9 +66,9 @@ const Fab = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //
   // --------------------------------------------------------------------------
   render() {
-    const { appearance, color, disabled, loading, scale, textEnabled, icon, label, text } = this;
+    const { appearance, kind, disabled, loading, scale, textEnabled, icon, label, text, iconFlipRtl } = this;
     const title = !textEnabled ? label || text || null : null;
-    return (h("calcite-button", { appearance: appearance === "solid" ? "solid" : "outline", class: CSS.button, color: color, disabled: disabled, iconStart: icon, label: label, loading: loading, ref: (buttonEl) => {
+    return (h("calcite-button", { appearance: appearance === "solid" ? "solid" : "outline-fill", class: CSS.button, disabled: disabled, iconFlipRtl: iconFlipRtl ? "start" : null, iconStart: icon, kind: kind, label: label, loading: loading, ref: (buttonEl) => {
         this.buttonEl = buttonEl;
       }, round: true, scale: scale, title: title, type: "button", width: "auto" }, this.textEnabled ? this.text : null));
   }
@@ -75,9 +76,10 @@ const Fab = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   static get style() { return fabCss; }
 }, [1, "calcite-fab", {
     "appearance": [513],
-    "color": [513],
+    "kind": [513],
     "disabled": [516],
     "icon": [513],
+    "iconFlipRtl": [516, "icon-flip-rtl"],
     "label": [1],
     "loading": [516],
     "scale": [513],

package/dist/components/calcite-filter.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
  */
 import { F as Filter, d as defineCustomElement$1 } from './filter.js';
 

package/dist/components/calcite-flow-item.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
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { c as getElementDir } from './dom.js';

package/dist/components/calcite-flow.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
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client/index.js';
 import { c as createObserver } from './observers.js';

package/dist/components/calcite-graph.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
  */
 import { G as Graph, d as defineCustomElement$1 } from './graph.js';
 

package/dist/components/calcite-handle.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
  */
 import { H as Handle, d as defineCustomElement$1 } from './handle.js';
 

package/dist/components/calcite-icon.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
  */
 import { I as Icon, d as defineCustomElement$1 } from './icon.js';
 

package/dist/components/calcite-inline-editable.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
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { g as getElementProp, b as getSlotted } from './dom.js';
@@ -162,12 +162,12 @@ const InlineEditable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     updateHostInteraction(this);
   }
   render() {
-    return (h("div", { class: CSS.wrapper, onClick: this.enableEditingHandler, onKeyDown: this.escapeKeyHandler }, h("div", { class: CSS.inputWrapper }, h("slot", null)), h("div", { class: CSS.controlsWrapper }, h("calcite-button", { appearance: "transparent", class: CSS.enableEditingButton, color: "neutral", disabled: this.disabled, iconStart: "pencil", label: this.messages.enableEditing, onClick: this.enableEditingHandler, ref: (el) => (this.enableEditingButton = el), scale: this.scale, style: {
+    return (h("div", { class: CSS.wrapper, onClick: this.enableEditingHandler, onKeyDown: this.escapeKeyHandler }, h("div", { class: CSS.inputWrapper }, h("slot", null)), h("div", { class: CSS.controlsWrapper }, h("calcite-button", { appearance: "transparent", class: CSS.enableEditingButton, disabled: this.disabled, iconStart: "pencil", kind: "neutral", label: this.messages.enableEditing, onClick: this.enableEditingHandler, ref: (el) => (this.enableEditingButton = el), scale: this.scale, style: {
         opacity: this.editingEnabled ? "0" : "1",
         width: this.editingEnabled ? "0" : "inherit"
       }, type: "button" }), this.shouldShowControls && [
-      h("div", { class: CSS.cancelEditingButtonWrapper }, h("calcite-button", { appearance: "transparent", class: CSS.cancelEditingButton, color: "neutral", disabled: this.disabled, iconStart: "x", label: this.messages.cancelEditing, onClick: this.cancelEditingHandler, ref: (el) => (this.cancelEditingButton = el), scale: this.scale, type: "button" })),
-      h("calcite-button", { appearance: "solid", class: CSS.confirmChangesButton, color: "blue", disabled: this.disabled, iconStart: "check", label: this.messages.confirmChanges, loading: this.loading, onClick: this.confirmChangesHandler, ref: (el) => (this.confirmEditingButton = el), scale: this.scale, type: "button" })
+      h("div", { class: CSS.cancelEditingButtonWrapper }, h("calcite-button", { appearance: "transparent", class: CSS.cancelEditingButton, disabled: this.disabled, iconStart: "x", kind: "neutral", label: this.messages.cancelEditing, onClick: this.cancelEditingHandler, ref: (el) => (this.cancelEditingButton = el), scale: this.scale, type: "button" })),
+      h("calcite-button", { appearance: "solid", class: CSS.confirmChangesButton, disabled: this.disabled, iconStart: "check", kind: "brand", label: this.messages.confirmChanges, loading: this.loading, onClick: this.confirmChangesHandler, ref: (el) => (this.confirmEditingButton = el), scale: this.scale, type: "button" })
     ])));
   }
   //--------------------------------------------------------------------------
@@ -190,12 +190,7 @@ const InlineEditable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   //--------------------------------------------------------------------------
   async setFocus() {
     await componentLoaded(this);
-    if (this.editingEnabled) {
-      this.inputElement?.setFocus();
-    }
-    else {
-      this.enableEditingButton?.setFocus();
-    }
+    this.el?.focus();
   }
   //--------------------------------------------------------------------------
   //
@@ -224,6 +219,7 @@ const InlineEditable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   get shouldShowControls() {
     return this.editingEnabled && this.controls;
   }
+  static get delegatesFocus() { return true; }
   static get assetsDirs() { return ["assets"]; }
   get el() { return this; }
   static get watchers() { return {
@@ -233,7 +229,7 @@ const InlineEditable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     "effectiveLocale": ["effectiveLocaleChange"]
   }; }
   static get style() { return inlineEditableCss; }
-}, [1, "calcite-inline-editable", {
+}, [17, "calcite-inline-editable", {
     "disabled": [516],
     "editingEnabled": [1540, "editing-enabled"],
     "loading": [1540],

package/dist/components/calcite-input-date-picker.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
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Build } from '@stencil/core/internal/client/index.js';
 import { g as getValueAsDateRange, a as getLocaleData, d as defineCustomElement$8 } from './date-picker.js';
@@ -346,7 +346,7 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   /** Sets focus on the component. */
   async setFocus() {
     await componentLoaded(this);
-    this.startInput?.setFocus();
+    this.el.focus();
   }
   /**
    * Updates the position of the component.
@@ -566,6 +566,7 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   warnAboutInvalidValue(value) {
     console.warn(`The specified value "${value}" does not conform to the required format, "yyyy-MM-dd".`);
   }
+  static get delegatesFocus() { return true; }
   get el() { return this; }
   static get watchers() { return {
     "disabled": ["handleDisabledAndReadOnlyChange"],
@@ -584,7 +585,7 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     "effectiveLocale": ["loadLocaleData"]
   }; }
   static get style() { return inputDatePickerCss; }
-}, [1, "calcite-input-date-picker", {
+}, [17, "calcite-input-date-picker", {
     "disabled": [516],
     "readOnly": [516, "read-only"],
     "value": [1025],

package/dist/components/calcite-input-message.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
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client/index.js';
 import { e as setRequestedIcon, g as getElementProp } from './dom.js';
@@ -22,6 +22,7 @@ const InputMessage = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.__registerHost();
     this.__attachShadow();
     this.icon = undefined;
+    this.iconFlipRtl = false;
     this.scale = "m";
     this.status = "idle";
   }
@@ -48,7 +49,7 @@ const InputMessage = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   //--------------------------------------------------------------------------
   renderIcon(iconName) {
     if (iconName) {
-      return h("calcite-icon", { class: "calcite-input-message-icon", icon: iconName, scale: "s" });
+      return (h("calcite-icon", { class: "calcite-input-message-icon", flipRtl: this.iconFlipRtl, icon: iconName, scale: "s" }));
     }
   }
   get el() { return this; }
@@ -59,6 +60,7 @@ const InputMessage = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   static get style() { return inputMessageCss; }
 }, [1, "calcite-input-message", {
     "icon": [520],
+    "iconFlipRtl": [516, "icon-flip-rtl"],
     "scale": [1537],
     "status": [1537]
   }]);

package/dist/components/calcite-input-number.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
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { b as getSlotted, i as isPrimaryPointerButton, e as setRequestedIcon, g as getElementProp, c as getElementDir, C as CSS_UTILITY } from './dom.js';