@esri/calcite-components 1.0.0-beta.86 → 1.0.0-beta.89

package/dist/collection/components/accordion-item/accordion-item.css

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -115,38 +115,33 @@
   background-color: var(--calcite-accordion-item-background, var(--calcite-ui-foreground-1));
 }
 
-:host .accordion-item-header {
+:host .header-content {
   outline-color: transparent;
 }
 
-:host(:focus) .accordion-item-header {
+:host(:focus) .header-content {
   outline: 2px solid transparent;
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
 
-:host([active]), 
 :host([expanded]) {
   color: var(--calcite-ui-text-1);
 }
-:host([active]) .accordion-item-content, 
-:host([expanded]) .accordion-item-content {
+:host([expanded]) .content {
   display: block;
   color: var(--calcite-ui-text-1);
 }
-:host([active]) .accordion-item-header,
-:host([expanded]) .accordion-item-header {
-  border-bottom-color: transparent;
+:host([expanded]) .header {
+  border-block-end-color: transparent;
 }
 
-:host .accordion-item-header {
+:host .header {
   display: flex;
-  cursor: pointer;
-  align-items: center;
-  flex-direction: var(--calcite-accordion-item-flex-direction);
+  align-items: stretch;
 }
 
-:host .accordion-item-icon {
+:host .icon {
   position: relative;
   margin: 0px;
   display: inline-flex;
@@ -157,128 +152,136 @@
   margin-inline-start: var(--calcite-accordion-item-icon-spacing-end);
 }
 
-:host .accordion-item-content,
-:host .accordion-item-header {
+.content {
   padding: var(--calcite-accordion-item-padding);
-  border-bottom: 1px solid var(--calcite-accordion-item-border, var(--calcite-ui-border-2));
 }
 
-:host .accordion-item-header * {
+: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);
 }
 
-:host .accordion-item-content {
+:host .content {
   display: none;
-  padding-top: 0px;
+  padding-block-start: 0px;
   color: var(--calcite-ui-text-3);
   text-align: initial;
 }
 
-:host .accordion-item-expand-icon {
+: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 .accordion-item-expand-icon {
+.calcite--rtl .expand-icon {
   transform: rotate(var(--calcite-accordion-item-icon-rotation-rtl));
 }
 
-:host([active]) .accordion-item-expand-icon, 
-:host([expanded]) .accordion-item-expand-icon {
+:host([expanded]) .expand-icon {
   color: var(--calcite-ui-text-1);
   transform: rotate(var(--calcite-accordion-item-active-icon-rotation));
 }
 
-:host([active]) .calcite--rtl .accordion-item-expand-icon,
-:host([expanded]) .calcite--rtl .accordion-item-expand-icon {
+:host([expanded]) .calcite--rtl .expand-icon {
   transform: rotate(var(--calcite-accordion-item-active-icon-rotation-rtl));
 }
 
-:host .accordion-item-header-text {
-  margin-top: 0px;
-  margin-bottom: 0px;
+:host .header-text {
+  margin-block: 0px;
   flex-grow: 1;
   flex-direction: column;
-  padding-top: 0px;
-  padding-bottom: 0px;
+  padding-block: 0px;
   text-align: initial;
   margin-inline-end: auto;
 }
 
-:host .accordion-item-heading, 
-:host .accordion-item-description {
+:host .heading, 
+:host .description {
   display: flex;
-  width: 100%;
+  inline-size: 100%;
 }
 
-:host .accordion-item-heading {
+:host .heading {
   font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-2);
 }
 
-:host .accordion-item-description {
-  margin-top: 0.25rem;
+:host .description {
+  margin-block-start: 0.25rem;
   color: var(--calcite-ui-text-3);
 }
 
-:host(:focus) .accordion-item-heading, 
-:host(:hover) .accordion-item-heading {
+:host(:focus) .heading, 
+:host(:hover) .heading {
   color: var(--calcite-ui-text-1);
 }
-:host(:focus) .accordion-item-icon, 
-:host(:hover) .accordion-item-icon {
+:host(:focus) .icon, 
+:host(:hover) .icon {
   color: var(--calcite-ui-text-1);
 }
-:host(:focus) .accordion-item-expand-icon, 
-:host(:hover) .accordion-item-expand-icon {
+:host(:focus) .expand-icon, 
+:host(:hover) .expand-icon {
   color: var(--calcite-ui-text-1);
 }
-:host(:focus) .accordion-item-description, 
-:host(:hover) .accordion-item-description {
+:host(:focus) .description, 
+:host(:hover) .description {
   color: var(--calcite-ui-text-2);
 }
 
-:host(:focus) .accordion-item-heading, 
-:host(:active) .accordion-item-heading, 
-:host([active]) .accordion-item-heading, 
-:host([expanded]) .accordion-item-heading {
+:host(:focus) .heading, 
+:host(:active) .heading, 
+:host([expanded]) .heading {
   color: var(--calcite-ui-text-1);
 }
-:host(:focus) .accordion-item-icon, 
-:host(:active) .accordion-item-icon, 
-:host([active]) .accordion-item-icon, 
-:host([expanded]) .accordion-item-icon {
+:host(:focus) .icon, 
+:host(:active) .icon, 
+:host([expanded]) .icon {
   color: var(--calcite-ui-text-1);
 }
-:host(:focus) .accordion-item-expand-icon, 
-:host(:active) .accordion-item-expand-icon, 
-:host([active]) .accordion-item-expand-icon, 
-:host([expanded]) .accordion-item-expand-icon {
+:host(:focus) .expand-icon, 
+:host(:active) .expand-icon, 
+:host([expanded]) .expand-icon {
   color: var(--calcite-ui-text-1);
 }
-:host(:focus) .accordion-item-description, 
-:host(:active) .accordion-item-description, 
-:host([active]) .accordion-item-description, 
-:host([expanded]) .accordion-item-description {
+: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]) .accordion-item-header {
-    border-bottom: none;
+  :host([expanded]) .header {
+    border-block-end: none;
   }
-  :host([expanded]) .accordion-item-heading {
+  :host([expanded]) .heading {
     /** give visual indicator of expanded state since subtle color changes can't be done **/
     font-weight: bolder;
   }
 
-  :host(:hover) .accordion-item-heading,
-:host(:focus) .accordion-item-heading {
+  :host(:hover) .heading,
+:host(:focus) .heading {
     /** give visual indicator of expandability/click-ability since subtle color changes can't be done **/
     text-decoration: underline;
   }

package/dist/collection/components/accordion-item/accordion-item.js

@@ -1,12 +1,13 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.86
+ * v1.0.0-beta.89
  */
-import { Component, Element, Event, h, Host, Listen, Prop } from "@stencil/core";
-import { getElementDir, getElementProp, toAriaBoolean } from "../../utils/dom";
+import { Component, Element, Event, h, Host, Listen, Prop, Watch } from "@stencil/core";
+import { getElementDir, getElementProp, getSlotted, toAriaBoolean } from "../../utils/dom";
+import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { CSS_UTILITY } from "../../utils/resources";
-import { guid } from "../../utils/guid";
+import { SLOTS, CSS } from "./resources";
 /**
  * @slot - A slot for adding custom content, including nested `calcite-accordion-item`s.
  */
@@ -25,17 +26,17 @@ export class AccordionItem {
     this.active = false;
     /** When true, item is expanded */
     this.expanded = false;
-    //--------------------------------------------------------------------------
-    //
-    //  Private State/Props
-    //
-    //--------------------------------------------------------------------------
-    this.guid = guid();
     /** what icon position does the parent accordion specify */
     this.iconPosition = "end";
     /** handle clicks on item header */
     this.itemHeaderClickHandler = () => this.emitRequestedItem();
   }
+  activeHandler(value) {
+    this.expanded = value;
+  }
+  expandedHandler(value) {
+    this.active = value;
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -46,6 +47,12 @@ export class AccordionItem {
     this.selectionMode = getElementProp(this.el, "selection-mode", "multi");
     this.iconType = getElementProp(this.el, "icon-type", "chevron");
     this.iconPosition = getElementProp(this.el, "icon-position", this.iconPosition);
+    const isExpanded = this.active || this.expanded;
+    if (isExpanded) {
+      this.activeHandler(isExpanded);
+      this.expandedHandler(isExpanded);
+    }
+    connectConditionalSlotComponent(this);
   }
   componentDidLoad() {
     this.itemPosition = this.getItemPosition();
@@ -54,30 +61,48 @@ export class AccordionItem {
       position: this.itemPosition
     });
   }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderActionsStart() {
+    const { el } = this;
+    return getSlotted(el, SLOTS.actionsStart) ? (h("div", { class: CSS.actionsStart },
+      h("slot", { name: SLOTS.actionsStart }))) : null;
+  }
+  renderActionsEnd() {
+    const { el } = this;
+    return getSlotted(el, SLOTS.actionsEnd) ? (h("div", { class: CSS.actionsEnd },
+      h("slot", { name: SLOTS.actionsEnd }))) : null;
+  }
   render() {
     const dir = getElementDir(this.el);
-    const iconEl = h("calcite-icon", { class: "accordion-item-icon", icon: this.icon, scale: "s" });
-    const { guid } = this;
-    const regionId = `${guid}-region`;
-    const buttonId = `${guid}-button`;
-    return (h(Host, { tabindex: "0" },
+    const iconEl = h("calcite-icon", { class: CSS.icon, icon: this.icon, scale: "s" });
+    return (h(Host, null,
       h("div", { class: {
           [`icon-position--${this.iconPosition}`]: true,
           [`icon-type--${this.iconType}`]: true
         } },
-        h("div", { "aria-controls": regionId, "aria-expanded": toAriaBoolean(this.active), class: { "accordion-item-header": true, [CSS_UTILITY.rtl]: dir === "rtl" }, id: buttonId, onClick: this.itemHeaderClickHandler, role: "button" },
-          this.icon ? iconEl : null,
-          h("div", { class: "accordion-item-header-text" },
-            h("span", { class: "accordion-item-heading" }, this.heading || this.itemTitle),
-            this.itemSubtitle ? (h("span", { class: "accordion-item-description" }, this.description || this.itemSubtitle)) : null),
-          h("calcite-icon", { class: "accordion-item-expand-icon", icon: this.iconType === "chevron"
-              ? "chevronDown"
-              : this.iconType === "caret"
-                ? "caretDown"
-                : this.expanded || this.active
-                  ? "minus"
-                  : "plus", scale: "s" })),
-        h("div", { "aria-expanded": toAriaBoolean(this.expanded || this.active), "aria-labelledby": buttonId, class: "accordion-item-content", id: regionId, role: "region" },
+        h("div", { class: { [CSS.header]: true, [CSS_UTILITY.rtl]: dir === "rtl" } },
+          this.renderActionsStart(),
+          h("div", { "aria-expanded": toAriaBoolean(this.active || this.expanded), class: CSS.headerContent, onClick: this.itemHeaderClickHandler, role: "button", tabindex: "0" },
+            this.icon ? iconEl : null,
+            h("div", { class: CSS.headerText },
+              h("span", { class: CSS.heading }, this.heading || this.itemTitle),
+              this.itemSubtitle || this.description ? (h("span", { class: CSS.description }, this.description || this.itemSubtitle)) : null),
+            h("calcite-icon", { class: CSS.expandIcon, icon: this.iconType === "chevron"
+                ? "chevronDown"
+                : this.iconType === "caret"
+                  ? "caretDown"
+                  : this.expanded || this.active
+                    ? "minus"
+                    : "plus", scale: "s" })),
+          this.renderActionsEnd()),
+        h("div", { class: CSS.content },
           h("slot", null)))));
   }
   //--------------------------------------------------------------------------
@@ -85,13 +110,13 @@ export class AccordionItem {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  keyDownHandler(e) {
-    if (e.target === this.el) {
-      switch (e.key) {
+  keyDownHandler(event) {
+    if (event.target === this.el) {
+      switch (event.key) {
         case " ":
         case "Enter":
           this.emitRequestedItem();
-          e.preventDefault();
+          event.preventDefault();
           break;
         case "ArrowUp":
         case "ArrowDown":
@@ -99,9 +124,9 @@ export class AccordionItem {
         case "End":
           this.calciteInternalAccordionItemKeyEvent.emit({
             parent: this.parent,
-            item: e
+            item: event
           });
-          e.preventDefault();
+          event.preventDefault();
           break;
       }
     }
@@ -124,16 +149,13 @@ export class AccordionItem {
     switch (this.selectionMode) {
       case "multi":
         if (this.el === this.requestedAccordionItem) {
-          this.active = !this.active;
           this.expanded = !this.expanded;
         }
         break;
       case "single":
-        this.active = this.el === this.requestedAccordionItem ? !this.active : false;
         this.expanded = this.el === this.requestedAccordionItem ? !this.expanded : false;
         break;
       case "single-persist":
-        this.active = this.el === this.requestedAccordionItem;
         this.expanded = this.el === this.requestedAccordionItem;
         break;
     }
@@ -300,9 +322,14 @@ export class AccordionItem {
         "text": ""
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        "original": "ItemKeyEvent",
+        "resolved": "ItemKeyEvent",
+        "references": {
+          "ItemKeyEvent": {
+            "location": "import",
+            "path": "./interfaces"
+          }
+        }
       }
     }, {
       "method": "calciteInternalAccordionItemSelect",
@@ -318,9 +345,14 @@ export class AccordionItem {
         "text": ""
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        "original": "RequestedItem",
+        "resolved": "RequestedItem",
+        "references": {
+          "RequestedItem": {
+            "location": "import",
+            "path": "./interfaces"
+          }
+        }
       }
     }, {
       "method": "calciteInternalAccordionItemClose",
@@ -336,8 +368,8 @@ export class AccordionItem {
         "text": ""
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }, {
@@ -354,12 +386,24 @@ export class AccordionItem {
         "text": ""
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        "original": "RegistryEntry",
+        "resolved": "RegistryEntry",
+        "references": {
+          "RegistryEntry": {
+            "location": "import",
+            "path": "./interfaces"
+          }
+        }
       }
     }]; }
   static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "active",
+      "methodName": "activeHandler"
+    }, {
+      "propName": "expanded",
+      "methodName": "expandedHandler"
+    }]; }
   static get listeners() { return [{
       "name": "keydown",
       "method": "keyDownHandler",

package/dist/collection/components/accordion-item/interfaces.js

@@ -0,0 +1,6 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.89
+ */
+export {};

package/dist/collection/components/accordion-item/resources.js

@@ -0,0 +1,21 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.89
+ */
+export const SLOTS = {
+  actionsStart: "actions-start",
+  actionsEnd: "actions-end"
+};
+export const CSS = {
+  icon: "icon",
+  header: "header",
+  headerContent: "header-content",
+  actionsStart: "actions-start",
+  actionsEnd: "actions-end",
+  headerText: "header-text",
+  heading: "heading",
+  description: "description",
+  expandIcon: "expand-icon",
+  content: "content"
+};

package/dist/collection/components/action/action.css

@@ -82,13 +82,21 @@
 }
 
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
   display: none;
 }
 
+:host([disabled]) {
+  pointer-events: none;
+  cursor: default;
+  -webkit-user-select: none;
+          user-select: none;
+  opacity: var(--calcite-ui-opacity-disabled);
+}
+
 /**
 * CSS Custom Properties
 *
@@ -102,13 +110,6 @@
   --calcite-action-indicator-color: var(--calcite-ui-brand);
 }
 
-:host([disabled]) {
-  pointer-events: none;
-  cursor: default;
-  -webkit-user-select: none;
-          user-select: none;
-  opacity: var(--calcite-ui-opacity-disabled);
-}
 :host([disabled]) ::slotted([calcite-hydrated][disabled]),
 :host([disabled]) [calcite-hydrated][disabled] {
   /* prevent opacity stacking */
@@ -119,7 +120,7 @@
   position: relative;
   margin: 0px;
   display: flex;
-  width: auto;
+  inline-size: auto;
   cursor: pointer;
   align-items: center;
   justify-content: flex-start;
@@ -156,31 +157,32 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 1rem;
-  min-height: 1rem;
+  min-inline-size: 1rem;
+  min-block-size: 1rem;
 }
 .button .text-container {
   margin: 0px;
-  width: 0px;
+  inline-size: 0px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  line-height: 1rem;
+  line-height: 1.5rem;
   opacity: 0;
   transition-property: opacity;
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-property: margin;
-  transition-property: width;
+  transition-property: inline-size;
 }
 .button .text-container--visible {
-  width: auto;
+  inline-size: auto;
   flex: 1 1 auto;
   opacity: 1;
 }
 
 :host([scale=s]) .button {
-  padding: 0.5rem;
+  padding-inline: 0.5rem;
+  padding-block: 0.25rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
   font-weight: var(--calcite-font-weight-normal);
@@ -190,7 +192,8 @@
 }
 
 :host([scale=m]) .button {
-  padding: 1rem;
+  padding-inline: 1rem;
+  padding-block: 0.75rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
   font-weight: var(--calcite-font-weight-normal);
@@ -225,8 +228,7 @@
 :host([scale=s][compact]) .button, 
 :host([scale=m][compact]) .button, 
 :host([scale=l][compact]) .button {
-  padding-left: 0px;
-  padding-right: 0px;
+  padding-inline: 0px;
 }
 
 .slot-container {
@@ -238,7 +240,7 @@
 }
 
 .button--text-visible {
-  width: 100%;
+  inline-size: 100%;
 }
 
 :host([active]) .button, 
@@ -315,8 +317,8 @@
   content: "";
   position: absolute;
   z-index: 10;
-  height: 0.5rem;
-  width: 0.5rem;
+  block-size: 0.5rem;
+  inline-size: 0.5rem;
   border-radius: 9999px;
   border-width: 2px;
   background-color: var(--calcite-action-indicator-color);

package/dist/collection/components/action/action.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.86
+ * v1.0.0-beta.89
  */
 import { Component, Element, Event, Host, Method, Prop, h, forceUpdate } from "@stencil/core";
 import { CSS, TEXT } from "./resources";
@@ -411,8 +411,8 @@ export class Action {
         "text": "Emits when the component has been clicked."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }

package/dist/collection/components/action/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.86
+ * v1.0.0-beta.89
  */
 export const CSS = {
   button: "button",