npm - @esri/calcite-components - Versions diffs - 1.5.0-next.9 → 1.5.0 - Mend

@esri/calcite-components 1.5.0-next.9 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1762) hide show

package/dist/esm/{FloatingArrow-5dd0030e.js → FloatingArrow-b489af34.js} RENAMED Viewed

@@ -1,18 +1,18 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.9
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0
  */
-import { h } from './index-b92f855d.js';
+import { h } from './index-53d57a76.js';
 const CSS = {
   arrow: "calcite-floating-ui-arrow",
-  arrowStroke: "calcite-floating-ui-arrow__stroke"
+  arrowStroke: "calcite-floating-ui-arrow__stroke",
 };
 const DEFAULTS = {
   width: 12,
   height: 6,
-  strokeWidth: 1
+  strokeWidth: 1,
 };
 /**
  * Renders a SVG element to be used as a floating-ui arrow.
@@ -22,11 +22,11 @@ const DEFAULTS = {
  * @param floatingLayout.floatingLayout
  * @param floatingLayout – The effective floating layout to render the arrow vertically or horizontally. Possible values: `vertical` or `horizontal`.
  *
- * See [floating-ui](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts)
+ * See [floating-ui](https://github.com/Esri/calcite-design-system/blob/main/src/utils/floating-ui.ts)
  * @param floatingLayout.key
  * @param floatingLayout.ref
  */
-const FloatingArrow = ({ floatingLayout, key, ref }) => {
+const FloatingArrow = ({ floatingLayout, key, ref, }) => {
   const { width, height, strokeWidth } = DEFAULTS;
   const svgX = width / 2;
   const isVertical = floatingLayout === "vertical";

package/dist/esm/{Heading-32f55ca1.js → Heading-2b21a618.js} RENAMED Viewed

@@ -1,9 +1,9 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.9
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0
  */
-import { h } from './index-b92f855d.js';
+import { h } from './index-53d57a76.js';
 function constrainHeadingLevel(level) {
   return Math.min(Math.max(Math.ceil(level), 1), 6);

package/dist/esm/{app-globals-95dd7b22.js → app-globals-a48f3e83.js} RENAMED Viewed

@@ -1,9 +1,9 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.9
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0
  */
-import { d as darkMode, a as autoMode } from './resources-52b3e086.js';
+import { d as darkMode, a as autoMode } from './resources-d81f3031.js';
 /**
  * Emits when the mode is dynamically toggled between light and dark on <body> or in OS preferences.
@@ -27,7 +27,7 @@ function initModeChangeEvent() {
   // emits event when toggling between mode classes on <body>
   new MutationObserver(() => modeChangeHandler(getMode())).observe(document.body, {
     attributes: true,
-    attributeFilter: ["class"]
+    attributeFilter: ["class"],
   });
 }

package/dist/esm/{ar-59d029ae.js → ar-15616ec1.js} RENAMED Viewed

@@ -1,23 +1,22 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.9
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0
  */
-import { d as dayjs } from './calcite-input-time-picker.calcite-time-picker-c9e9c87a.js';
-import './index-b92f855d.js';
-import './form-919a36a3.js';
-import './dom-2dd2d006.js';
-import './guid-ab08af0d.js';
-import './resources-52b3e086.js';
-import './interactive-842fb305.js';
-import './browser-b9cc9180.js';
-import './key-fc5e25b9.js';
-import './label-0e424201.js';
-import './loadable-c7eefc56.js';
-import './locale-329bf093.js';
-import './observers-8e90d6d5.js';
-import './focusTrapComponent-624b6807.js';
-import './t9n-56c1ac23.js';
+import { d as dayjs } from './calcite-input-time-picker.calcite-time-picker-489befd9.js';
+import './index-53d57a76.js';
+import './form-840c542d.js';
+import './dom-643f9db5.js';
+import './guid-a50ade63.js';
+import './resources-d81f3031.js';
+import './interactive-42caa6bb.js';
+import './key-9309ba10.js';
+import './label-0a990de0.js';
+import './loadable-a5c3241b.js';
+import './locale-9a7219c0.js';
+import './observers-09626586.js';
+import './focusTrapComponent-ef3b7ceb.js';
+import './t9n-124a9106.js';
 // Arabic [ar]
 var months = 'يناير_فبراير_مارس_أبريل_مايو_يونيو_يوليو_أغسطس_سبتمبر_أكتوبر_نوفمبر_ديسمبر'.split('_');

package/dist/esm/{array-a42c5d08.js → array-4223b6f0.js} RENAMED Viewed

@@ -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.5.0-next.9
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0
  */
 function getRoundRobinIndex(index, total) {
   return (index + total) % total;

package/dist/esm/{bg-f1bc2dcd.js → bg-f4b21801.js} RENAMED Viewed

@@ -1,23 +1,22 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.9
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0
  */
-import { d as dayjs } from './calcite-input-time-picker.calcite-time-picker-c9e9c87a.js';
-import './index-b92f855d.js';
-import './form-919a36a3.js';
-import './dom-2dd2d006.js';
-import './guid-ab08af0d.js';
-import './resources-52b3e086.js';
-import './interactive-842fb305.js';
-import './browser-b9cc9180.js';
-import './key-fc5e25b9.js';
-import './label-0e424201.js';
-import './loadable-c7eefc56.js';
-import './locale-329bf093.js';
-import './observers-8e90d6d5.js';
-import './focusTrapComponent-624b6807.js';
-import './t9n-56c1ac23.js';
+import { d as dayjs } from './calcite-input-time-picker.calcite-time-picker-489befd9.js';
+import './index-53d57a76.js';
+import './form-840c542d.js';
+import './dom-643f9db5.js';
+import './guid-a50ade63.js';
+import './resources-d81f3031.js';
+import './interactive-42caa6bb.js';
+import './key-9309ba10.js';
+import './label-0a990de0.js';
+import './loadable-a5c3241b.js';
+import './locale-9a7219c0.js';
+import './observers-09626586.js';
+import './focusTrapComponent-ef3b7ceb.js';
+import './t9n-124a9106.js';
 // Bulgarian [bg]
 var locale = {

package/dist/esm/{bs-708632b8.js → bs-86d5c10b.js} RENAMED Viewed

@@ -1,23 +1,22 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.9
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0
  */
-import { d as dayjs } from './calcite-input-time-picker.calcite-time-picker-c9e9c87a.js';
-import './index-b92f855d.js';
-import './form-919a36a3.js';
-import './dom-2dd2d006.js';
-import './guid-ab08af0d.js';
-import './resources-52b3e086.js';
-import './interactive-842fb305.js';
-import './browser-b9cc9180.js';
-import './key-fc5e25b9.js';
-import './label-0e424201.js';
-import './loadable-c7eefc56.js';
-import './locale-329bf093.js';
-import './observers-8e90d6d5.js';
-import './focusTrapComponent-624b6807.js';
-import './t9n-56c1ac23.js';
+import { d as dayjs } from './calcite-input-time-picker.calcite-time-picker-489befd9.js';
+import './index-53d57a76.js';
+import './form-840c542d.js';
+import './dom-643f9db5.js';
+import './guid-a50ade63.js';
+import './resources-d81f3031.js';
+import './interactive-42caa6bb.js';
+import './key-9309ba10.js';
+import './label-0a990de0.js';
+import './loadable-a5c3241b.js';
+import './locale-9a7219c0.js';
+import './observers-09626586.js';
+import './focusTrapComponent-ef3b7ceb.js';
+import './t9n-124a9106.js';
 // Bosnian [bs]
 var locale = {

package/dist/esm/{ca-d2dff964.js → ca-f13febc0.js} RENAMED Viewed

@@ -1,23 +1,22 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.9
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0
  */
-import { d as dayjs } from './calcite-input-time-picker.calcite-time-picker-c9e9c87a.js';
-import './index-b92f855d.js';
-import './form-919a36a3.js';
-import './dom-2dd2d006.js';
-import './guid-ab08af0d.js';
-import './resources-52b3e086.js';
-import './interactive-842fb305.js';
-import './browser-b9cc9180.js';
-import './key-fc5e25b9.js';
-import './label-0e424201.js';
-import './loadable-c7eefc56.js';
-import './locale-329bf093.js';
-import './observers-8e90d6d5.js';
-import './focusTrapComponent-624b6807.js';
-import './t9n-56c1ac23.js';
+import { d as dayjs } from './calcite-input-time-picker.calcite-time-picker-489befd9.js';
+import './index-53d57a76.js';
+import './form-840c542d.js';
+import './dom-643f9db5.js';
+import './guid-a50ade63.js';
+import './resources-d81f3031.js';
+import './interactive-42caa6bb.js';
+import './key-9309ba10.js';
+import './label-0a990de0.js';
+import './loadable-a5c3241b.js';
+import './locale-9a7219c0.js';
+import './observers-09626586.js';
+import './focusTrapComponent-ef3b7ceb.js';
+import './t9n-124a9106.js';
 // Catalan [ca]
 var locale = {

package/dist/esm/calcite-accordion_2.entry.js CHANGED Viewed

@@ -1,16 +1,16 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.9
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0
  */
-import { r as registerInstance, c as createEvent, h, a as getElement, H as Host } from './index-b92f855d.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-747df943.js';
-import { v as getElementProp, g as getSlotted, b as getElementDir, t as toAriaBoolean, c as closestElementCrossShadowBoundary } from './dom-2dd2d006.js';
-import { C as CSS_UTILITY } from './resources-52b3e086.js';
-import './observers-8e90d6d5.js';
-import './guid-ab08af0d.js';
+import { r as registerInstance, c as createEvent, h, a as getElement, H as Host } from './index-53d57a76.js';
+import { c as createObserver } from './observers-09626586.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-cc89e8ef.js';
+import { g as getSlotted, b as getElementDir, t as toAriaBoolean } from './dom-643f9db5.js';
+import { C as CSS_UTILITY } from './resources-d81f3031.js';
+import './guid-a50ade63.js';
-const accordionCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}:host([scale=s]){--calcite-accordion-item-spacing-unit:0.25rem;--calcite-accordion-icon-margin:0.5rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){--calcite-accordion-item-spacing-unit:0.5rem;--calcite-accordion-icon-margin:0.75rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){--calcite-accordion-item-spacing-unit:0.75rem;--calcite-accordion-icon-margin:1rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host{position:relative;display:block;max-inline-size:100%;line-height:1.5rem;--calcite-accordion-item-border:var(--calcite-ui-border-2);--calcite-accordion-item-background:var(--calcite-ui-foreground-1)}.accordion--transparent{--calcite-accordion-item-border:transparent;--calcite-accordion-item-background:transparent}.accordion{border-width:1px;border-block-end-width:0px;border-style:solid;border-color:var(--calcite-ui-border-2)}";
+const accordionCss = ":host([scale=s]){--calcite-accordion-item-spacing-unit:0.25rem;--calcite-accordion-icon-margin:0.5rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){--calcite-accordion-item-spacing-unit:0.5rem;--calcite-accordion-icon-margin:0.75rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){--calcite-accordion-item-spacing-unit:0.75rem;--calcite-accordion-icon-margin:1rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host{position:relative;display:block;max-inline-size:100%;line-height:1.5rem;--calcite-accordion-item-border:var(--calcite-ui-border-2);--calcite-accordion-item-background:var(--calcite-ui-foreground-1)}.accordion--transparent{--calcite-accordion-item-border:transparent;--calcite-accordion-item-background:transparent}.accordion{border-width:1px;border-block-end-width:0px;border-style:solid;border-color:var(--calcite-ui-border-2)}:host([hidden]){display:none}[hidden]{display:none}";
 const Accordion = class {
   constructor(hostRef) {
@@ -21,38 +21,34 @@ const Accordion = class {
     //  Private State/Props
     //
     //--------------------------------------------------------------------------
-    /** created list of Accordion items */
-    this.items = [];
-    /** keep track of whether the items have been sorted so we don't re-sort */
-    this.sorted = false;
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    this.sortItems = (items) => items.sort((a, b) => a.position - b.position).map((a) => a.item);
+    this.mutationObserver = createObserver("mutation", () => this.updateAccordionItems());
+    this.accordionParent = undefined;
     this.appearance = "solid";
     this.iconPosition = "end";
     this.iconType = "chevron";
     this.scale = "m";
     this.selectionMode = "multiple";
   }
+  handlePropsChange() {
+    this.updateAccordionItems();
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
-  componentDidLoad() {
-    if (!this.sorted) {
-      this.items = this.sortItems(this.items);
-      this.sorted = true;
-    }
+  connectedCallback() {
+    this.mutationObserver?.observe(this.el, { childList: true });
+    this.updateAccordionItems();
+  }
+  disconnectedCallback() {
+    this.mutationObserver?.disconnect();
   }
   render() {
     const transparent = this.appearance === "transparent";
     return (h("div", { class: {
         "accordion--transparent": transparent,
-        accordion: !transparent
+        accordion: !transparent,
       } }, h("slot", null)));
   }
   //--------------------------------------------------------------------------
@@ -60,31 +56,40 @@ const Accordion = class {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  registerCalciteAccordionItem(event) {
-    const item = {
-      item: event.target,
-      parent: event.detail.parent,
-      position: event.detail.position
-    };
-    if (this.el === item.parent) {
-      this.items.push(item);
-    }
-    event.stopPropagation();
-  }
   updateActiveItemOnChange(event) {
     this.requestedAccordionItem = event.detail.requestedAccordionItem;
     this.calciteInternalAccordionChange.emit({
-      requestedAccordionItem: this.requestedAccordionItem
+      requestedAccordionItem: this.requestedAccordionItem,
     });
     event.stopPropagation();
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  updateAccordionItems() {
+    this.el.querySelectorAll("calcite-accordion-item").forEach((item) => {
+      item.iconPosition = this.iconPosition;
+      item.iconType = this.iconType;
+      item.selectionMode = this.selectionMode;
+      item.scale = this.scale;
+      item.accordionParent = this.el;
+    });
+  }
   get el() { return getElement(this); }
+  static get watchers() { return {
+    "iconPosition": ["handlePropsChange"],
+    "iconType": ["handlePropsChange"],
+    "scale": ["handlePropsChange"],
+    "selectionMode": ["handlePropsChange"]
+  }; }
 };
 Accordion.style = accordionCss;
 const SLOTS = {
   actionsStart: "actions-start",
-  actionsEnd: "actions-end"
+  actionsEnd: "actions-end",
 };
 const CSS = {
   icon: "icon",
@@ -99,29 +104,29 @@ const CSS = {
   content: "content",
   iconStart: "icon--start",
   iconEnd: "icon--end",
-  headerContainer: "header-container"
+  headerContainer: "header-container",
 };
-const accordionItemCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}.icon-position--end,.icon-position--start{--calcite-accordion-item-icon-rotation:calc(90deg * -1);--calcite-accordion-item-active-icon-rotation:0deg;--calcite-accordion-item-icon-rotation-rtl:90deg;--calcite-accordion-item-active-icon-rotation-rtl:0deg}.icon-position--start{--calcite-accordion-item-flex-direction:row-reverse;--calcite-accordion-item-icon-spacing-start:0;--calcite-accordion-item-icon-spacing-end:var(--calcite-accordion-icon-margin)}.icon-position--end{--calcite-accordion-item-flex-direction:row;--calcite-accordion-item-icon-spacing-start:var(--calcite-accordion-icon-margin);--calcite-accordion-item-icon-spacing-end:0}.icon-position--end:not(.icon-type--plus-minus){--calcite-accordion-item-icon-rotation:0deg;--calcite-accordion-item-active-icon-rotation:180deg;--calcite-accordion-item-icon-rotation-rtl:0deg;--calcite-accordion-item-active-icon-rotation-rtl:calc(180deg * -1)}:host{position:relative;display:flex;flex-direction:column;color:var(--calcite-ui-text-3);text-decoration-line:none;background-color:var(--calcite-accordion-item-background, var(--calcite-ui-foreground-1))}:host .header-content{outline-color:transparent}:host(:focus) .header-content{outline:2px solid transparent;outline-offset:2px;outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}:host([expanded]){color:var(--calcite-ui-text-1)}:host([expanded]) .content{display:block;color:var(--calcite-ui-text-1)}:host([expanded]) .header{border-block-end-color:transparent}:host .header{display:flex;align-items:stretch}:host .icon{position:relative;margin:0px;display:inline-flex;color:var(--calcite-ui-text-3);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-inline-end:var(--calcite-accordion-item-icon-spacing-start);margin-inline-start:var(--calcite-accordion-item-icon-spacing-end)}.icon--start{display:flex;align-items:center;margin-inline-end:var(--calcite-accordion-icon-margin)}.icon--end{display:flex;align-items:center;margin-inline-end:var(--calcite-accordion-icon-margin);margin-inline-start:var(--calcite-accordion-icon-margin)}.header-container{inline-size:100%}.content{padding:var(--calcite-accordion-item-padding)}:host .content,:host .header{border-block-end:1px solid var(--calcite-accordion-item-border, var(--calcite-ui-border-2))}:host .header *{display:inline-flex;align-items:center;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);word-wrap:break-word;word-break:break-word}:host .content{display:none;padding-block-start:0px;color:var(--calcite-ui-text-3);text-align:initial}:host .expand-icon{color:var(--calcite-ui-text-3);margin-inline-start:var(--calcite-accordion-item-icon-spacing-start);margin-inline-end:var(--calcite-accordion-item-icon-spacing-end);transform:rotate(var(--calcite-accordion-item-icon-rotation))}.calcite--rtl .expand-icon{transform:rotate(var(--calcite-accordion-item-icon-rotation-rtl))}:host([expanded]) .expand-icon{color:var(--calcite-ui-text-1);transform:rotate(var(--calcite-accordion-item-active-icon-rotation))}:host([expanded]) .calcite--rtl .expand-icon{transform:rotate(var(--calcite-accordion-item-active-icon-rotation-rtl))}:host .header-text{margin-block:0px;flex-grow:1;flex-direction:column;padding-block:0px;text-align:initial;margin-inline-end:auto}:host .heading,:host .description{display:flex;inline-size:100%}:host .heading{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-2)}:host .description{margin-block-start:0.25rem;color:var(--calcite-ui-text-3)}:host(:focus) .heading,:host(:hover) .heading{color:var(--calcite-ui-text-1)}:host(:focus) .icon,:host(:hover) .icon{color:var(--calcite-ui-text-1)}:host(:focus) .expand-icon,:host(:hover) .expand-icon{color:var(--calcite-ui-text-1)}:host(:focus) .description,:host(:hover) .description{color:var(--calcite-ui-text-2)}:host(:focus) .heading,:host(:active) .heading,:host([expanded]) .heading{color:var(--calcite-ui-text-1)}:host(:focus) .icon,:host(:active) .icon,:host([expanded]) .icon{color:var(--calcite-ui-text-1)}:host(:focus) .expand-icon,:host(:active) .expand-icon,:host([expanded]) .expand-icon{color:var(--calcite-ui-text-1)}:host(:focus) .description,:host(:active) .description,:host([expanded]) .description{color:var(--calcite-ui-text-2)}.header-content{flex-grow:1;cursor:pointer;padding:var(--calcite-accordion-item-padding);flex-direction:var(--calcite-accordion-item-flex-direction)}.actions-start,.actions-end{display:flex;align-items:center}@media (forced-colors: active){:host([expanded]) .header{border-block-end:none}:host([expanded]) .heading{font-weight:bolder}:host(:hover) .heading,:host(:focus) .heading{text-decoration:underline}}";
+const accordionItemCss = ".icon-position--end,.icon-position--start{--calcite-accordion-item-icon-rotation:calc(90deg * -1);--calcite-accordion-item-active-icon-rotation:0deg;--calcite-accordion-item-icon-rotation-rtl:90deg;--calcite-accordion-item-active-icon-rotation-rtl:0deg}.icon-position--start{--calcite-accordion-item-flex-direction:row-reverse;--calcite-accordion-item-icon-spacing-start:0;--calcite-accordion-item-icon-spacing-end:var(--calcite-accordion-icon-margin)}.icon-position--end{--calcite-accordion-item-flex-direction:row;--calcite-accordion-item-icon-spacing-start:var(--calcite-accordion-icon-margin);--calcite-accordion-item-icon-spacing-end:0}.icon-position--end:not(.icon-type--plus-minus){--calcite-accordion-item-icon-rotation:0deg;--calcite-accordion-item-active-icon-rotation:180deg;--calcite-accordion-item-icon-rotation-rtl:0deg;--calcite-accordion-item-active-icon-rotation-rtl:calc(180deg * -1)}:host{position:relative;display:flex;flex-direction:column;color:var(--calcite-ui-text-3);text-decoration-line:none;background-color:var(--calcite-accordion-item-background, var(--calcite-ui-foreground-1))}:host .header-content{outline-color:transparent}:host(:focus) .header-content{outline:2px solid transparent;outline-offset:2px;outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}:host([expanded]){color:var(--calcite-ui-text-1)}:host([expanded]) .content{display:block;color:var(--calcite-ui-text-1)}:host([expanded]) .header{border-block-end-color:transparent}:host .header{display:flex;align-items:stretch}:host .icon{position:relative;margin:0px;display:inline-flex;color:var(--calcite-ui-text-3);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-inline-end:var(--calcite-accordion-item-icon-spacing-start);margin-inline-start:var(--calcite-accordion-item-icon-spacing-end)}.icon--start{display:flex;align-items:center;margin-inline-end:var(--calcite-accordion-icon-margin)}.icon--end{display:flex;align-items:center;margin-inline-end:var(--calcite-accordion-icon-margin);margin-inline-start:var(--calcite-accordion-icon-margin)}.header-container{inline-size:100%}.content{padding:var(--calcite-accordion-item-padding)}:host .content,:host .header{border-block-end:1px solid var(--calcite-accordion-item-border, var(--calcite-ui-border-2))}:host .header *{display:inline-flex;align-items:center;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);word-wrap:break-word;word-break:break-word}:host .content{display:none;padding-block-start:0px;color:var(--calcite-ui-text-3);text-align:initial}:host .expand-icon{color:var(--calcite-ui-text-3);margin-inline-start:var(--calcite-accordion-item-icon-spacing-start);margin-inline-end:var(--calcite-accordion-item-icon-spacing-end);transform:rotate(var(--calcite-accordion-item-icon-rotation))}.calcite--rtl .expand-icon{transform:rotate(var(--calcite-accordion-item-icon-rotation-rtl))}:host([expanded]) .expand-icon{color:var(--calcite-ui-text-1);transform:rotate(var(--calcite-accordion-item-active-icon-rotation))}:host([expanded]) .calcite--rtl .expand-icon{transform:rotate(var(--calcite-accordion-item-active-icon-rotation-rtl))}:host .header-text{margin-block:0px;flex-grow:1;flex-direction:column;padding-block:0px;text-align:initial;margin-inline-end:auto}:host .heading,:host .description{display:flex;inline-size:100%}:host .heading{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-2)}:host .description{margin-block-start:0.25rem;color:var(--calcite-ui-text-3)}:host(:focus) .heading,:host(:hover) .heading{color:var(--calcite-ui-text-1)}:host(:focus) .icon,:host(:hover) .icon{color:var(--calcite-ui-text-1)}:host(:focus) .expand-icon,:host(:hover) .expand-icon{color:var(--calcite-ui-text-1)}:host(:focus) .description,:host(:hover) .description{color:var(--calcite-ui-text-2)}:host(:focus) .heading,:host(:active) .heading,:host([expanded]) .heading{color:var(--calcite-ui-text-1)}:host(:focus) .icon,:host(:active) .icon,:host([expanded]) .icon{color:var(--calcite-ui-text-1)}:host(:focus) .expand-icon,:host(:active) .expand-icon,:host([expanded]) .expand-icon{color:var(--calcite-ui-text-1)}:host(:focus) .description,:host(:active) .description,:host([expanded]) .description{color:var(--calcite-ui-text-2)}.header-content{flex-grow:1;cursor:pointer;padding:var(--calcite-accordion-item-padding);flex-direction:var(--calcite-accordion-item-flex-direction)}.actions-start,.actions-end{display:flex;align-items:center}@media (forced-colors: active){:host([expanded]) .header{border-block-end:none}:host([expanded]) .heading{font-weight:bolder}:host(:hover) .heading,:host(:focus) .heading{text-decoration:underline}}:host([hidden]){display:none}[hidden]{display:none}";
 const AccordionItem = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.calciteInternalAccordionItemSelect = createEvent(this, "calciteInternalAccordionItemSelect", 6);
     this.calciteInternalAccordionItemClose = createEvent(this, "calciteInternalAccordionItemClose", 6);
-    this.calciteInternalAccordionItemRegister = createEvent(this, "calciteInternalAccordionItemRegister", 6);
-    /** what icon position does the parent accordion specify */
-    this.iconPosition = "end";
     /** handle clicks on item header */
     this.itemHeaderClickHandler = () => this.emitRequestedItem();
-    /** Specifies the scale of the `accordion-item` controlled by the parent, defaults to m */
-    this.scale = "m";
     this.expanded = false;
     this.heading = undefined;
     this.description = undefined;
     this.iconStart = undefined;
     this.iconEnd = undefined;
     this.iconFlipRtl = undefined;
+    this.iconPosition = undefined;
+    this.iconType = undefined;
+    this.accordionParent = undefined;
+    this.selectionMode = undefined;
+    this.scale = undefined;
   }
   //--------------------------------------------------------------------------
   //
@@ -129,19 +134,8 @@ const AccordionItem = class {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    this.parent = this.el.parentElement;
-    this.iconType = getElementProp(this.el, "icon-type", "chevron");
-    this.iconPosition = getElementProp(this.el, "icon-position", this.iconPosition);
-    this.scale = getElementProp(this.el, "scale", this.scale);
     connectConditionalSlotComponent(this);
   }
-  componentDidLoad() {
-    this.itemPosition = this.getItemPosition();
-    this.calciteInternalAccordionItemRegister.emit({
-      parent: this.parent,
-      position: this.itemPosition
-    });
-  }
   disconnectedCallback() {
     disconnectConditionalSlotComponent(this);
   }
@@ -166,7 +160,7 @@ const AccordionItem = class {
     const { description } = this;
     return (h(Host, null, h("div", { class: {
         [`icon-position--${this.iconPosition}`]: true,
-        [`icon-type--${this.iconType}`]: true
+        [`icon-type--${this.iconType}`]: true,
       } }, h("div", { class: { [CSS.header]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.renderActionsStart(), h("div", { "aria-expanded": toAriaBoolean(this.expanded), class: CSS.headerContent, onClick: this.itemHeaderClickHandler, role: "button", tabindex: "0" }, h("div", { class: CSS.headerContainer }, iconStartEl, h("div", { class: CSS.headerText }, h("span", { class: CSS.heading }, this.heading), description ? h("span", { class: CSS.description }, description) : null), iconEndEl), h("calcite-icon", { class: CSS.expandIcon, icon: this.iconType === "chevron"
         ? "chevronDown"
         : this.iconType === "caret"
@@ -206,7 +200,6 @@ const AccordionItem = class {
   //
   //--------------------------------------------------------------------------
   determineActiveItem() {
-    this.selectionMode = getElementProp(this.el, "selection-mode", "multiple");
     switch (this.selectionMode) {
       case "multiple":
         if (this.el === this.requestedAccordionItem) {
@@ -223,14 +216,9 @@ const AccordionItem = class {
   }
   emitRequestedItem() {
     this.calciteInternalAccordionItemSelect.emit({
-      requestedAccordionItem: this.el
+      requestedAccordionItem: this.el,
     });
   }
-  getItemPosition() {
-    const { el } = this;
-    const items = closestElementCrossShadowBoundary(el, "calcite-accordion")?.querySelectorAll("calcite-accordion-item");
-    return items ? Array.from(items).indexOf(el) : -1;
-  }
   get el() { return getElement(this); }
 };
 AccordionItem.style = accordionItemCss;

package/dist/esm/calcite-action-bar.entry.js CHANGED Viewed

@@ -1,37 +1,42 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.9
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-b92f855d.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-747df943.js';
-import { s as slotChangeGetAssignedElements, g as getSlotted } from './dom-2dd2d006.js';
-import { a as setComponentLoaded, s as setUpLoadableComponent, c as componentLoaded } from './loadable-c7eefc56.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-329bf093.js';
-import { c as createObserver } from './observers-8e90d6d5.js';
-import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-56c1ac23.js';
-import { t as toggleChildActionText, o as overflowActionsDebounceInMs, q as queryActions, g as geActionDimensions, a as overflowActions, E as ExpandToggle, b as getOverflowCount } from './ExpandToggle-58e442a9.js';
-import { d as debounce } from './debounce-c0bf0c59.js';
-import './guid-ab08af0d.js';
-import './resources-52b3e086.js';
-import './key-fc5e25b9.js';
-import './resources-c11c9b89.js';
-import './resources-4f06a4f6.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-53d57a76.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-cc89e8ef.js';
+import { s as slotChangeGetAssignedElements, f as focusFirstTabbable, g as getSlotted } from './dom-643f9db5.js';
+import { a as setComponentLoaded, s as setUpLoadableComponent, c as componentFocusable } from './loadable-a5c3241b.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-9a7219c0.js';
+import { c as createObserver } from './observers-09626586.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-124a9106.js';
+import { t as toggleChildActionText, o as overflowActionsDebounceInMs, q as queryActions, g as geActionDimensions, a as overflowActions, E as ExpandToggle, b as getOverflowCount } from './ExpandToggle-7b175b90.js';
+import { d as debounce } from './debounce-000a3641.js';
+import './guid-a50ade63.js';
+import './resources-d81f3031.js';
+import './key-9309ba10.js';
+import './resources-dd40526d.js';
+import './resources-55f4ce49.js';
 const CSS = {
-  actionGroupBottom: "action-group--bottom"
+  actionGroupBottom: "action-group--bottom",
 };
 const SLOTS = {
   bottomActions: "bottom-actions",
-  expandTooltip: "expand-tooltip"
+  expandTooltip: "expand-tooltip",
 };
-const actionBarCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:host{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}:host{pointer-events:auto;display:inline-flex;align-self:stretch;--calcite-action-bar-expanded-max-width:auto}:host([layout=vertical]){flex-direction:column}:host([layout=horizontal]){flex-direction:row}:host([layout=vertical][overflow-actions-disabled]){overflow-y:auto}:host([layout=horizontal][overflow-actions-disabled]){overflow-x:auto}:host([layout=vertical][expanded]){max-inline-size:var(--calcite-action-bar-expanded-max-width)}::slotted(calcite-action-group){border-block-end:1px solid var(--calcite-ui-border-3)}:host([layout=horizontal]) ::slotted(calcite-action-group){border-block-end:0;border-inline-end:1px solid var(--calcite-ui-border-3)}:host([layout=horizontal][expand-disabled]) ::slotted(calcite-action-group:last-of-type){border-inline-end:0}::slotted(calcite-action-group:last-child){border-block-end:0;border-inline-end:0}.action-group--bottom{flex-grow:1;justify-content:flex-end}";
+const actionBarCss = ":host{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{pointer-events:auto;display:inline-flex;align-self:stretch;--calcite-action-bar-expanded-max-width:auto}:host([layout=vertical]){flex-direction:column}:host([layout=vertical]) .action-group--bottom{margin-block-start:auto}:host([layout=horizontal]){flex-direction:row}:host([layout=horizontal]) .action-group--bottom{margin-inline-start:auto}:host([layout=vertical][overflow-actions-disabled]){overflow-y:auto}:host([layout=horizontal][overflow-actions-disabled]){overflow-x:auto}:host([layout=vertical][expanded]){max-inline-size:var(--calcite-action-bar-expanded-max-width)}::slotted(calcite-action-group){border-block-end:1px solid var(--calcite-ui-border-3)}:host([layout=horizontal]) ::slotted(calcite-action-group){border-block-end:0;border-inline-end:1px solid var(--calcite-ui-border-3)}:host([layout=horizontal][expand-disabled]) ::slotted(calcite-action-group:last-of-type){border-inline-end:0}::slotted(calcite-action-group:last-child){border-block-end:0;border-inline-end:0}.action-group--bottom{justify-content:flex-end}:host([hidden]){display:none}[hidden]{display:none}";
 const ActionBar = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.calciteActionBarToggle = createEvent(this, "calciteActionBarToggle", 6);
+    // --------------------------------------------------------------------------
+    //
+    //  Private Properties
+    //
+    // --------------------------------------------------------------------------
     this.mutationObserver = createObserver("mutation", () => {
       const { el, expanded } = this;
       toggleChildActionText({ el, expanded });
@@ -82,12 +87,12 @@ const ActionBar = class {
         actionWidth,
         height,
         width,
-        groupCount
+        groupCount,
       });
       overflowActions({
         actionGroups,
         expanded,
-        overflowCount
+        overflowCount,
       });
     }, overflowActionsDebounceInMs);
     this.toggleExpand = () => {
@@ -185,8 +190,8 @@ const ActionBar = class {
    * Sets focus on the component's first focusable element.
    */
   async setFocus() {
-    await componentLoaded(this);
-    this.el?.focus();
+    await componentFocusable(this);
+    focusFirstTabbable(this.el);
   }
   updateGroups() {
     this.setGroupLayout(Array.from(this.el.querySelectorAll("calcite-action-group")));
@@ -202,7 +207,7 @@ const ActionBar = class {
   renderBottomActionGroup() {
     const { expanded, expandDisabled, el, position, toggleExpand, scale, layout, messages } = this;
     const tooltip = getSlotted(el, SLOTS.expandTooltip);
-    const expandToggleNode = !expandDisabled ? (h(ExpandToggle, { el: el, expanded: expanded, intlCollapse: messages.collapse, intlExpand: messages.expand, position: position, scale: scale, toggle: toggleExpand, tooltip: tooltip,
+    const expandToggleNode = !expandDisabled ? (h(ExpandToggle, { collapseText: messages.collapse, el: el, expandText: messages.expand, expanded: expanded, position: position, scale: scale, toggle: toggleExpand, tooltip: tooltip,
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.setExpandToggleRef })) : null;
     return getSlotted(el, SLOTS.bottomActions) || expandToggleNode ? (h("calcite-action-group", { class: CSS.actionGroupBottom, layout: layout, scale: scale }, h("slot", { name: SLOTS.bottomActions }), h("slot", { name: SLOTS.expandTooltip }), expandToggleNode)) : null;
@@ -210,7 +215,6 @@ const ActionBar = class {
   render() {
     return (h(Host, { onCalciteActionMenuOpen: this.actionMenuOpenHandler }, h("slot", { onSlotchange: this.handleDefaultSlotChange }), this.renderBottomActionGroup()));
   }
-  static get delegatesFocus() { return true; }
   static get assetsDirs() { return ["assets"]; }
   get el() { return getElement(this); }
   static get watchers() { return {