@esri/calcite-components 1.0.0-beta.72 → 1.0.0-beta.76

package/dist/cjs/{popper-a7580aca.js → popper-13a2bb46.js}

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-const dom = require('./dom-19822169.js');
+const dom = require('./dom-f3df220d.js');
 
 var top = 'top';
 var bottom = 'bottom';
@@ -489,13 +489,21 @@ function mapToStyles(_ref2) {
       adaptive = _ref2.adaptive,
       roundOffsets = _ref2.roundOffsets,
       isFixed = _ref2.isFixed;
+  var _offsets$x = offsets.x,
+      x = _offsets$x === void 0 ? 0 : _offsets$x,
+      _offsets$y = offsets.y,
+      y = _offsets$y === void 0 ? 0 : _offsets$y;
 
-  var _ref3 = roundOffsets === true ? roundOffsetsByDPR(offsets) : typeof roundOffsets === 'function' ? roundOffsets(offsets) : offsets,
-      _ref3$x = _ref3.x,
-      x = _ref3$x === void 0 ? 0 : _ref3$x,
-      _ref3$y = _ref3.y,
-      y = _ref3$y === void 0 ? 0 : _ref3$y;
+  var _ref3 = typeof roundOffsets === 'function' ? roundOffsets({
+    x: x,
+    y: y
+  }) : {
+    x: x,
+    y: y
+  };
 
+  x = _ref3.x;
+  y = _ref3.y;
   var hasX = offsets.hasOwnProperty('x');
   var hasY = offsets.hasOwnProperty('y');
   var sideX = left;
@@ -540,6 +548,17 @@ function mapToStyles(_ref2) {
     position: position
   }, adaptive && unsetSides);
 
+  var _ref4 = roundOffsets === true ? roundOffsetsByDPR({
+    x: x,
+    y: y
+  }) : {
+    x: x,
+    y: y
+  };
+
+  x = _ref4.x;
+  y = _ref4.y;
+
   if (gpuAcceleration) {
     var _Object$assign;
 
@@ -549,9 +568,9 @@ function mapToStyles(_ref2) {
   return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2));
 }
 
-function computeStyles(_ref4) {
-  var state = _ref4.state,
-      options = _ref4.options;
+function computeStyles(_ref5) {
+  var state = _ref5.state,
+      options = _ref5.options;
   var _options$gpuAccelerat = options.gpuAcceleration,
       gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat,
       _options$adaptive = options.adaptive,
@@ -840,7 +859,7 @@ function getClippingParents(element) {
 
 
   return clippingParents.filter(function (clippingParent) {
-    return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body' && (canEscapeClipping ? getComputedStyle(clippingParent).position !== 'static' : true);
+    return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body';
   });
 } // Gets the maximum area that the element is visible in due to any number of
 // clipping parents

package/dist/cjs/{resources-16974e48.js → resources-6af71952.js}

@@ -4,8 +4,8 @@
  */
 'use strict';
 
-const index = require('./index-6b5d2de5.js');
-const locale = require('./locale-33c458dc.js');
+const index = require('./index-8b0d388b.js');
+const locale = require('./locale-02462821.js');
 
 /**
  * Get supported locale code from raw user input
@@ -16,10 +16,14 @@ function getSupportedLocale(lang = "") {
   if (locale.locales.indexOf(lang) > -1) {
     return lang;
   }
-  else {
-    const base = lang.split("-")[0];
-    return locale.locales.indexOf(base) > -1 ? base : "en";
+  lang = lang.toLowerCase();
+  if (lang.includes("-")) {
+    lang = lang.replace(/(\w+)-(\w+)/, (_match, language, region) => `${language}-${region.toUpperCase()}`);
+    if (!locale.locales.includes(lang)) {
+      lang = lang.split("-")[0];
+    }
   }
+  return locale.locales.includes(lang) ? lang : "en";
 }
 /**
  * CLDR cache.

package/dist/cjs/{resources-6c4b32ef.js → resources-f6847c67.js}

@@ -4,14 +4,15 @@
  */
 'use strict';
 
-const dom = require('./dom-19822169.js');
+const dom = require('./dom-f3df220d.js');
 const array = require('./array-a5dedf5a.js');
 const debounce = require('./debounce-95979061.js');
-const index = require('./index-6b5d2de5.js');
+const index = require('./index-8b0d388b.js');
 
 function mutationObserverCallback() {
   this.setUpItems();
   this.setUpFilter();
+  this.deselectRemovedItems();
 }
 const SUPPORTED_ARROW_KEYS = ["ArrowUp", "ArrowDown"];
 // --------------------------------------------------------------------------
@@ -181,6 +182,15 @@ function setUpItems(tagName) {
     toggleSingleSelectItemTabbing(first, true);
   }
 }
+function deselectRemovedItems() {
+  const selectedValues = this.selectedValues;
+  const itemValues = this.items.map(({ value }) => value);
+  selectedValues.forEach((selectedItem) => {
+    if (!itemValues.includes(selectedItem.value)) {
+      this.selectedValues.delete(selectedItem.value);
+    }
+  });
+}
 function deselectSiblingItems(item) {
   this.items.forEach((currentItem) => {
     if (currentItem.value !== item.value) {
@@ -262,7 +272,7 @@ function getItemData() {
 }
 
 const CSS$1 = {
-  sticky: "sticky"
+  sticky: "sticky-pos"
 };
 exports.ICON_TYPES = void 0;
 (function (ICON_TYPES) {
@@ -333,6 +343,7 @@ exports.calciteListFocusOutHandler = calciteListFocusOutHandler;
 exports.calciteListItemChangeHandler = calciteListItemChangeHandler;
 exports.calciteListItemValueChangeHandler = calciteListItemValueChangeHandler;
 exports.cleanUpObserver = cleanUpObserver;
+exports.deselectRemovedItems = deselectRemovedItems;
 exports.deselectSiblingItems = deselectSiblingItems;
 exports.getItemData = getItemData;
 exports.handleFilter = handleFilter;

package/dist/collection/collection-manifest.json

@@ -1,5 +1,8 @@
 {
   "entries": [
+    "./components/calcite-pagination/calcite-pagination.js",
+    "./components/calcite-pick-list/calcite-pick-list.js",
+    "./components/calcite-value-list/calcite-value-list.js",
     "./components/calcite-accordion/calcite-accordion.js",
     "./components/calcite-accordion-item/calcite-accordion-item.js",
     "./components/calcite-action/calcite-action.js",
@@ -49,10 +52,7 @@
     "./components/calcite-notice/calcite-notice.js",
     "./components/calcite-option/calcite-option.js",
     "./components/calcite-option-group/calcite-option-group.js",
-    "./components/calcite-pagination/calcite-pagination.js",
     "./components/calcite-panel/calcite-panel.js",
-    "./components/calcite-value-list/calcite-value-list.js",
-    "./components/calcite-pick-list/calcite-pick-list.js",
     "./components/calcite-pick-list-group/calcite-pick-list-group.js",
     "./components/calcite-pick-list-item/calcite-pick-list-item.js",
     "./components/calcite-popover/calcite-popover.js",
@@ -93,7 +93,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.12.0",
+    "version": "2.13.0",
     "typescriptVersion": "4.3.5"
   },
   "collections": [],

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,7 @@
+export var StatusIcons;
+(function (StatusIcons) {
+    StatusIcons["green"] = "checkCircle";
+    StatusIcons["yellow"] = "exclamationMarkTriangle";
+    StatusIcons["red"] = "exclamationMarkTriangle";
+    StatusIcons["blue"] = "lightbulb";
+})(StatusIcons || (StatusIcons = {}));

package/dist/collection/components/block-section/interfaces.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -1,51 +1,42 @@
 /* mixins & extensions */
-
 @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-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);
@@ -79,9 +70,8 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -113,25 +103,25 @@
 }
 
 :host {
-  display: block;
   position: relative;
+  display: block;
   max-width: 100%;
   border-width: 1px;
+  border-bottom-width: 0px;
   border-style: solid;
   border-color: var(--calcite-ui-border-2);
-  border-bottom-width: 0;
   line-height: 1.5rem;
   --calcite-accordion-item-border: var(--calcite-ui-border-2);
   --calcite-accordion-item-background: var(--calcite-ui-foreground-1);
 }
 
-:host([appearance=minimal]) {
-  --calcite-accordion-item-padding: var(--calcite-accordion-item-spacing-unit) 0;
+.accordion--transparent {
   border-color: transparent;
+  --calcite-accordion-item-border: transparent;
+  --calcite-accordion-item-background: transparent;
 }
 
-:host([appearance=transparent]) {
+.accordion--minimal {
+  --calcite-accordion-item-padding: var(--calcite-accordion-item-spacing-unit) 0;
   border-color: transparent;
-  --calcite-accordion-item-border: transparent;
-  --calcite-accordion-item-background: transparent;
 }

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

@@ -4,7 +4,7 @@
  */
 import { Component, Element, Event, h, Listen, Prop } from "@stencil/core";
 /**
- * @slot - A slot for adding `calcite-accordion-item`s.
+ * @slot - A slot for adding `calcite-accordion-item`s. `calcite-accordion` cannot be nested, however calcite-accordion-item`s can.
  */
 export class CalciteAccordion {
   constructor() {
@@ -47,7 +47,11 @@ export class CalciteAccordion {
     }
   }
   render() {
-    return h("slot", null);
+    return (h("div", { class: {
+        "accordion--transparent": this.appearance === "transparent",
+        "accordion--minimal": this.appearance === "minimal"
+      } },
+      h("slot", null)));
   }
   //--------------------------------------------------------------------------
   //

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

@@ -1,51 +1,42 @@
 /* mixins & extensions */
-
 @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-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);
@@ -79,9 +70,8 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -90,10 +80,10 @@
 
 .icon-position--end, .icon-position--start {
   /* icon rotation variables */
-  --calcite-accordion-item-icon-rotation: -90deg;
-  --calcite-accordion-item-active-icon-rotation: 0;
+  --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: 0;
+  --calcite-accordion-item-active-icon-rotation-rtl: 0deg;
 }
 
 .icon-position--start {
@@ -109,35 +99,22 @@
 }
 
 .icon-position--end:not(.icon-type--plus-minus) {
-  --calcite-accordion-item-icon-rotation: 0;
+  --calcite-accordion-item-icon-rotation: 0deg;
   --calcite-accordion-item-active-icon-rotation: 180deg;
-  --calcite-accordion-item-icon-rotation-rtl: 0;
-  --calcite-accordion-item-active-icon-rotation-rtl: -180deg;
-}
-
-:host {
-  --calcite-accordion-item-background: var(--calcite-ui-foreground-1);
-}
-
-:host-context([appearance=minimal]) {
-  --calcite-accordion-item-padding: var(--calcite-accordion-item-spacing-unit) 0;
-}
-
-:host-context([appearance=transparent]) {
-  --calcite-accordion-item-border: transparent;
-  --calcite-accordion-item-background: transparent;
+  --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;
-  text-decoration: none;
+  color: var(--calcite-ui-text-3);
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
   outline: 2px solid transparent;
   outline-offset: 2px;
-  position: relative;
-  color: var(--calcite-ui-text-3);
-  background-color: var(--calcite-accordion-item-background);
-  --calcite-accordion-item-border: var(--calcite-ui-border-2);
+  background-color: var(--calcite-accordion-item-background, var(--calcite-ui-foreground-1));
 }
 
 :host .accordion-item-header {
@@ -154,27 +131,25 @@
 :host([active]) {
   color: var(--calcite-ui-text-1);
 }
-
 :host([active]) .accordion-item-content {
   display: block;
   color: var(--calcite-ui-text-1);
 }
-
 :host([active]) .accordion-item-header {
   border-bottom-color: transparent;
 }
 
 :host .accordion-item-header {
   display: flex;
-  align-items: center;
   cursor: pointer;
+  align-items: center;
   flex-direction: var(--calcite-accordion-item-flex-direction);
 }
 
 :host .accordion-item-icon {
-  display: inline-flex;
   position: relative;
-  margin: 0;
+  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);
@@ -185,7 +160,7 @@
 :host .accordion-item-content,
 :host .accordion-item-header {
   padding: var(--calcite-accordion-item-padding);
-  border-bottom: 1px solid var(--calcite-accordion-item-border);
+  border-bottom: 1px solid var(--calcite-accordion-item-border, var(--calcite-ui-border-2));
 }
 
 :host .accordion-item-header * {
@@ -197,8 +172,8 @@
 
 :host .accordion-item-content {
   display: none;
+  padding-top: 0px;
   color: var(--calcite-ui-text-3);
-  padding-top: 0;
   text-align: initial;
 }
 
@@ -223,72 +198,53 @@
 }
 
 :host .accordion-item-header-text {
-  flex-direction: column;
+  margin-top: 0px;
+  margin-bottom: 0px;
   flex-grow: 1;
-  margin-top: 0;
-  margin-bottom: 0;
-  padding-top: 0;
-  padding-bottom: 0;
+  flex-direction: column;
+  padding-top: 0px;
+  padding-bottom: 0px;
   text-align: initial;
   margin-inline-end: auto;
 }
 
-:host .accordion-item-title,
-:host .accordion-item-subtitle {
+:host .accordion-item-title, :host .accordion-item-subtitle {
   display: flex;
   width: 100%;
 }
 
 :host .accordion-item-title {
-  color: var(--calcite-ui-text-2);
   font-weight: var(--calcite-font-weight-medium);
+  color: var(--calcite-ui-text-2);
 }
 
 :host .accordion-item-subtitle {
-  color: var(--calcite-ui-text-3);
   margin-top: 0.25rem;
+  color: var(--calcite-ui-text-3);
 }
 
-:host(:focus) .accordion-item-title,
-:host(:hover) .accordion-item-title {
+:host(:focus) .accordion-item-title, :host(:hover) .accordion-item-title {
   color: var(--calcite-ui-text-1);
 }
-
-:host(:focus) .accordion-item-icon,
-:host(:hover) .accordion-item-icon {
+:host(:focus) .accordion-item-icon, :host(:hover) .accordion-item-icon {
   color: var(--calcite-ui-text-1);
 }
-
-:host(:focus) .accordion-item-expand-icon,
-:host(:hover) .accordion-item-expand-icon {
+:host(:focus) .accordion-item-expand-icon, :host(:hover) .accordion-item-expand-icon {
   color: var(--calcite-ui-text-1);
 }
-
-:host(:focus) .accordion-item-subtitle,
-:host(:hover) .accordion-item-subtitle {
+:host(:focus) .accordion-item-subtitle, :host(:hover) .accordion-item-subtitle {
   color: var(--calcite-ui-text-2);
 }
 
-:host(:focus) .accordion-item-title,
-:host(:active) .accordion-item-title,
-:host([active]) .accordion-item-title {
+:host(:focus) .accordion-item-title, :host(:active) .accordion-item-title, :host([active]) .accordion-item-title {
   color: var(--calcite-ui-text-1);
 }
-
-:host(:focus) .accordion-item-icon,
-:host(:active) .accordion-item-icon,
-:host([active]) .accordion-item-icon {
+:host(:focus) .accordion-item-icon, :host(:active) .accordion-item-icon, :host([active]) .accordion-item-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(:focus) .accordion-item-expand-icon, :host(:active) .accordion-item-expand-icon, :host([active]) .accordion-item-expand-icon {
   color: var(--calcite-ui-text-1);
 }
-
-:host(:focus) .accordion-item-subtitle,
-:host(:active) .accordion-item-subtitle,
-:host([active]) .accordion-item-subtitle {
+:host(:focus) .accordion-item-subtitle, :host(:active) .accordion-item-subtitle, :host([active]) .accordion-item-subtitle {
   color: var(--calcite-ui-text-2);
 }

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

@@ -6,7 +6,7 @@ import { Component, Element, Event, h, Host, Listen, Prop } from "@stencil/core"
 import { getElementDir, getElementProp } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
 /**
- * @slot - A slot for adding custom content.
+ * @slot - A slot for adding custom content, including nested `calcite-accordion-item`s.
  */
 export class CalciteAccordionItem {
   constructor() {