@esri/calcite-components 1.0.0-beta.84 → 1.0.0-beta.87

package/dist/collection/components/accordion/accordion.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.84
+ * v1.0.0-beta.87
  */
 import { Component, Element, Event, h, Listen, Prop } from "@stencil/core";
 /**
@@ -62,12 +62,12 @@ export class Accordion {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  calciteInternalAccordionItemKeyEvent(e) {
-    const item = e.detail.item;
-    const parent = e.detail.parent;
+  calciteInternalAccordionItemKeyEvent(event) {
+    const item = event.detail.item;
+    const parent = event.detail.parent;
     if (this.el === parent) {
       const key = item.key;
-      const itemToFocus = e.target;
+      const itemToFocus = event.target;
       const isFirstItem = this.itemIndex(itemToFocus) === 0;
       const isLastItem = this.itemIndex(itemToFocus) === this.items.length - 1;
       switch (key) {
@@ -95,18 +95,18 @@ export class Accordion {
           break;
       }
     }
-    e.stopPropagation();
+    event.stopPropagation();
   }
-  registerCalciteAccordionItem(e) {
+  registerCalciteAccordionItem(event) {
     const item = {
-      item: e.target,
-      parent: e.detail.parent,
-      position: e.detail.position
+      item: event.target,
+      parent: event.detail.parent,
+      position: event.detail.position
     };
     if (this.el === item.parent) {
       this.items.push(item);
     }
-    e.stopPropagation();
+    event.stopPropagation();
   }
   updateActiveItemOnChange(event) {
     this.requestedAccordionItem = event.detail.requestedAccordionItem;
@@ -128,18 +128,18 @@ export class Accordion {
     const lastItem = this.items[this.items.length - 1];
     this.focusElement(lastItem);
   }
-  focusNextItem(e) {
-    const index = this.itemIndex(e);
+  focusNextItem(el) {
+    const index = this.itemIndex(el);
     const nextItem = this.items[index + 1] || this.items[0];
     this.focusElement(nextItem);
   }
-  focusPrevItem(e) {
-    const index = this.itemIndex(e);
+  focusPrevItem(el) {
+    const index = this.itemIndex(el);
     const prevItem = this.items[index - 1] || this.items[this.items.length - 1];
     this.focusElement(prevItem);
   }
-  itemIndex(e) {
-    return this.items.indexOf(e);
+  itemIndex(el) {
+    return this.items.indexOf(el);
   }
   focusElement(item) {
     const target = item;
@@ -274,9 +274,14 @@ export class Accordion {
         "text": ""
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        "original": "RequestedItem",
+        "resolved": "RequestedItem",
+        "references": {
+          "RequestedItem": {
+            "location": "import",
+            "path": "./interfaces"
+          }
+        }
       }
     }]; }
   static get elementRef() { return "el"; }

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

@@ -1,6 +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.84
+ * v1.0.0-beta.87
  */
 export {};

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]) {
@@ -112,42 +112,36 @@
   color: var(--calcite-ui-text-3);
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
-  outline: 2px solid transparent;
-  outline-offset: 2px;
   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;
@@ -158,113 +152,137 @@
   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]) .header {
+    border-block-end: none;
+  }
+  :host([expanded]) .heading {
+    /** give visual indicator of expanded state since subtle color changes can't be done **/
+    font-weight: bolder;
+  }
+
+  :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.84
+ * v1.0.0-beta.87
  */
-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.87
+ */
+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.87
+ */
+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"
+};