@esri/calcite-components 1.0.0-beta.81 → 1.0.0-beta.82

package/dist/collection/components/popover-manager/popover-manager.js

@@ -1,16 +1,17 @@
 /*!
  * 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.81
+ * v1.0.0-beta.82
  */
-import { Component, Element, h, Listen, Prop } from "@stencil/core";
-import { POPOVER_REFERENCE } from "../popover/resources";
-import { queryElementRoots, queryElementsRoots } from "../../utils/dom";
+import { Component, h, Prop, Element, Watch } from "@stencil/core";
+import { createObserver } from "../../utils/observers";
 /**
  * @slot - A slot for adding elements that reference a 'calcite-popover' by the 'selector' property.
+ * @deprecated No longer required for popover usage.
  */
 export class PopoverManager {
   constructor() {
+    this.mutationObserver = createObserver("mutation", () => this.setAutoClose());
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -20,28 +21,28 @@ export class PopoverManager {
      * CSS Selector to match reference elements for popovers. Reference elements will be identified by this selector in order to open their associated popover.
      * @default `[data-calcite-popover-reference]`
      */
-    this.selector = `[${POPOVER_REFERENCE}]`;
+    this.selector = "[data-calcite-popover-reference]";
     /**
      * Automatically closes any currently open popovers when clicking outside of a popover.
      */
     this.autoClose = false;
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    this.queryPopover = (composedPath) => {
-      const { el } = this;
-      if (!composedPath.includes(el)) {
-        return null;
-      }
-      const referenceElement = composedPath.find((pathEl) => { var _a; return (_a = pathEl === null || pathEl === void 0 ? void 0 : pathEl.hasAttribute) === null || _a === void 0 ? void 0 : _a.call(pathEl, POPOVER_REFERENCE); });
-      if (!referenceElement) {
-        return null;
-      }
-      const id = referenceElement.getAttribute(POPOVER_REFERENCE);
-      return queryElementRoots(el, { id });
-    };
+  }
+  autoCloseHandler() {
+    this.setAutoClose();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    var _a;
+    this.setAutoClose();
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   // --------------------------------------------------------------------------
   //
@@ -51,25 +52,14 @@ export class PopoverManager {
   render() {
     return h("slot", null);
   }
-  //--------------------------------------------------------------------------
+  // --------------------------------------------------------------------------
   //
-  //  Event Listeners
+  //  Private Methods
   //
-  //--------------------------------------------------------------------------
-  closeOpenPopovers(event) {
+  // --------------------------------------------------------------------------
+  setAutoClose() {
     const { autoClose, el } = this;
-    const popoverSelector = "calcite-popover";
-    const composedPath = event.composedPath();
-    const popover = this.queryPopover(composedPath);
-    if (popover) {
-      popover.toggle();
-      return;
-    }
-    if (autoClose) {
-      queryElementsRoots(el, popoverSelector)
-        .filter((popover) => popover.open && !composedPath.includes(popover))
-        .forEach((popover) => popover.toggle(false));
-    }
+    el.querySelectorAll("calcite-popover").forEach((popover) => (popover.autoClose = autoClose));
   }
   static get is() { return "calcite-popover-manager"; }
   static get encapsulation() { return "shadow"; }
@@ -99,7 +89,7 @@ export class PopoverManager {
       },
       "attribute": "selector",
       "reflect": false,
-      "defaultValue": "`[${POPOVER_REFERENCE}]`"
+      "defaultValue": "\"[data-calcite-popover-reference]\""
     },
     "autoClose": {
       "type": "boolean",
@@ -121,11 +111,8 @@ export class PopoverManager {
     }
   }; }
   static get elementRef() { return "el"; }
-  static get listeners() { return [{
-      "name": "click",
-      "method": "closeOpenPopovers",
-      "target": "window",
-      "capture": true,
-      "passive": false
+  static get watchers() { return [{
+      "propName": "autoClose",
+      "methodName": "autoCloseHandler"
     }]; }
 }

package/dist/collection/components/progress/progress.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.81
+ * v1.0.0-beta.82
  */
 import { Component, Element, h, Prop } from "@stencil/core";
 export class Progress {

package/dist/collection/components/radio-button/radio-button.js

@@ -1,11 +1,11 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.82
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
-import { focusElement, getElementDir } from "../../utils/dom";
+import { focusElement, getElementDir, toAriaBoolean } from "../../utils/dom";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { HiddenFormInputSlot, connectForm, disconnectForm } from "../../utils/form";
 import { CSS } from "./resources";
@@ -245,7 +245,7 @@ export class RadioButton {
   render() {
     const tabIndex = this.getTabIndex();
     return (h(Host, { onClick: this.clickHandler, onKeyDown: this.handleKeyDown },
-      h("div", { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), class: CSS.container, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, ref: this.setContainerEl, role: "radio", tabIndex: tabIndex },
+      h("div", { "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: CSS.container, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, ref: this.setContainerEl, role: "radio", tabIndex: tabIndex },
         h("div", { class: "radio" })),
       h(HiddenFormInputSlot, { component: this })));
   }

package/dist/collection/components/radio-button/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.81
+ * v1.0.0-beta.82
  */
 export const CSS = {
   container: "container"

package/dist/collection/components/radio-button-group/radio-button-group.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.82
  */
 import { Component, Host, h, Element, Prop, Watch, Event, Listen } from "@stencil/core";
 import { createObserver } from "../../utils/observers";

package/dist/collection/components/radio-group/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.81
+ * v1.0.0-beta.82
  */
 export {};

package/dist/collection/components/radio-group/radio-group.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.82
  */
 import { Component, Event, h, Listen, Element, Prop, Watch, Host, Build, Method } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";

package/dist/collection/components/radio-group-item/radio-group-item.js

@@ -1,10 +1,10 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.82
  */
 import { Component, h, Prop, Element, Event, Host, Watch } from "@stencil/core";
-import { getElementProp } from "../../utils/dom";
+import { getElementProp, toAriaBoolean } from "../../utils/dom";
 import { SLOTS, CSS } from "./resources";
 export class RadioGroupItem {
   constructor() {
@@ -29,7 +29,7 @@ export class RadioGroupItem {
     const appearance = getElementProp(this.el, "appearance", "solid");
     const layout = getElementProp(this.el, "layout", "horizontal");
     const iconEl = (h("calcite-icon", { class: CSS.radioGroupItemIcon, flipRtl: this.iconFlipRtl, icon: this.icon, scale: "s" }));
-    return (h(Host, { "aria-checked": checked.toString(), role: "radio" },
+    return (h(Host, { "aria-checked": toAriaBoolean(checked), role: "radio" },
       h("label", { class: {
           "label--scale-s": scale === "s",
           "label--scale-m": scale === "m",

package/dist/collection/components/radio-group-item/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.81
+ * v1.0.0-beta.82
  */
 export const SLOTS = {
   input: "input"

package/dist/collection/components/rating/rating.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.81
+ * v1.0.0-beta.82
  */
 import { Component, Element, Event, Fragment, h, Listen, Method, Prop, State } from "@stencil/core";
 import { guid } from "../../utils/guid";

package/dist/collection/components/rating/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.81
+ * v1.0.0-beta.82
  */
 export const TEXT = {
   rating: "Rating",

package/dist/collection/components/scrim/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.81
+ * v1.0.0-beta.82
  */
 export const CSS = {
   scrim: "scrim",

package/dist/collection/components/scrim/scrim.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.81
+ * v1.0.0-beta.82
  */
 import { Component, Element, Prop, h } from "@stencil/core";
 import { CSS, TEXT } from "./resources";

package/dist/collection/components/select/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.81
+ * v1.0.0-beta.82
  */
 export const CSS = {
   icon: "icon",

package/dist/collection/components/select/select.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.81
+ * v1.0.0-beta.82
  */
 import { Component, Element, Event, Fragment, h, Listen, Method, Prop, Watch } from "@stencil/core";
 import { focusElement } from "../../utils/dom";

package/dist/collection/components/shell/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.81
+ * v1.0.0-beta.82
  */
 export const CSS = {
   main: "main",

package/dist/collection/components/shell/shell.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.81
+ * v1.0.0-beta.82
  */
 import { Component, Element, Prop, h, Fragment } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";

package/dist/collection/components/shell-center-row/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.81
+ * v1.0.0-beta.82
  */
 export const CSS = {
   actionBarContainer: "action-bar-container",

package/dist/collection/components/shell-center-row/shell-center-row.css

@@ -92,8 +92,8 @@
 :host {
   display: flex;
   flex: 1 1 auto;
-  background-color: transparent;
   overflow: hidden;
+  background-color: transparent;
 }
 
 .content {

package/dist/collection/components/shell-center-row/shell-center-row.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.81
+ * v1.0.0-beta.82
  */
 import { Component, Element, Prop, h, Fragment } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";

package/dist/collection/components/shell-panel/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.81
+ * v1.0.0-beta.82
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/shell-panel/shell-panel.css

@@ -220,11 +220,11 @@
   margin-top: 0.5rem;
   margin-bottom: auto;
   height: auto;
+  overflow: hidden;
   border-radius: 0.25rem;
   --tw-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
   --tw-shadow-colored: 0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  overflow: hidden;
   max-height: var(--calcite-shell-panel-detached-max-height);
 }
 .content--detached ::slotted(calcite-panel),
@@ -240,7 +240,7 @@
   display: none;
 }
 
-slot[name=action-bar]::slotted(calcite-action-bar), .content ::slotted(calcite-flow), .content ::slotted(calcite-panel) {
+slot[name=action-bar]::slotted(calcite-action-bar), .content ::slotted(calcite-flow), .content ::slotted(calcite-panel:not([dismissed])) {
   border-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);

package/dist/collection/components/shell-panel/shell-panel.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.81
+ * v1.0.0-beta.82
  */
 import { Component, Element, Event, Prop, Watch, h, State, forceUpdate } from "@stencil/core";
 import { CSS, SLOTS, TEXT } from "./resources";
@@ -385,7 +385,10 @@ export class ShellPanel {
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use a resizeObserver on the shell-panel to listen for changes to its size."
+          }],
         "text": "Emitted when collapse has been toggled."
       },
       "complexType": {

package/dist/collection/components/slider/slider.css

@@ -119,6 +119,8 @@
 .container{
   position: relative;
   display: block;
+  overflow-wrap: normal;
+  word-break: normal;
   padding: calc(var(--calcite-slider-handle-size) * 0.5);
   margin: calc(var(--calcite-slider-handle-size) * 0.5) 0;
   --calcite-slider-full-handle-height: calc(
@@ -299,6 +301,33 @@
   height: calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height));
 }
 
+@media (forced-colors: active) {
+  .thumb {
+    outline-width: 0;
+    outline-offset: 0;
+  }
+
+  .handle{
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+
+  .thumb:focus .handle,
+.thumb .handle-extension,
+.thumb:hover .handle-extension,
+.thumb:focus .handle-extension,
+.thumb:active .handle-extension {
+    background-color: canvasText;
+  }
+
+  .track {
+    background-color: canvasText;
+  }
+
+  .track__range {
+    background-color: highlight;
+  }
+}
 .tick{
   position: absolute;
   height: 0.25rem;

package/dist/collection/components/slider/slider.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.81
+ * v1.0.0-beta.82
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";

package/dist/collection/components/sortable-list/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.81
+ * v1.0.0-beta.82
  */
 export const CSS = {
   sortItem: "sort-item",

package/dist/collection/components/sortable-list/sortable-list.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.81
+ * v1.0.0-beta.82
  */
 import Sortable from "sortablejs";
 import { Component, Element, Event, Listen, Prop, State, h } from "@stencil/core";

package/dist/collection/components/split-button/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.81
+ * v1.0.0-beta.82
  */
 export const CSS = {
   container: "split-button__container",

package/dist/collection/components/split-button/split-button.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.82
  */
 import { Component, Element, Event, h, Prop, Watch } from "@stencil/core";
 import { CSS } from "./resources";

package/dist/collection/components/stepper/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.82
+ */
+export {};