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

package/dist/collection/components/tile-select-group/tile-select-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.84
+ * v1.0.0-beta.87
  */
 import { Component, h, Prop, Element } from "@stencil/core";
 import { updateHostInteraction } from "../../utils/interactive";

package/dist/collection/components/time-picker/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.84
+ * v1.0.0-beta.87
  */
 export const CSS = {
   button: "button",

package/dist/collection/components/time-picker/time-picker.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]) {
@@ -118,16 +118,16 @@
   background-color: var(--calcite-ui-foreground-3);
 }
 .time-picker .button.top-left {
-  border-top-left-radius: var(--calcite-border-radius);
+  border-start-start-radius: var(--calcite-border-radius);
 }
 .time-picker .button.bottom-left {
-  border-bottom-left-radius: var(--calcite-border-radius);
+  border-end-start-radius: var(--calcite-border-radius);
 }
 .time-picker .button.top-right {
-  border-top-right-radius: var(--calcite-border-radius);
+  border-start-end-radius: var(--calcite-border-radius);
 }
 .time-picker .button.bottom-right {
-  border-bottom-right-radius: var(--calcite-border-radius);
+  border-end-end-radius: var(--calcite-border-radius);
 }
 .time-picker .button calcite-icon {
   color: var(--calcite-ui-text-3);
@@ -153,10 +153,8 @@
 }
 .time-picker.scale-s .button, 
 .time-picker.scale-s .input {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
+  padding-inline: 0.75rem;
+  padding-block: 0.25rem;
 }
 .time-picker.scale-s:not(.show-meridiem) .delimiter:last-child {
   padding-inline-end: 0.75rem;
@@ -166,10 +164,8 @@
 }
 .time-picker.scale-m .button, 
 .time-picker.scale-m .input {
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  padding-inline: 1rem;
+  padding-block: 0.5rem;
 }
 .time-picker.scale-m:not(.show-meridiem) .delimiter:last-child {
   padding-inline-end: 1rem;
@@ -179,10 +175,8 @@
 }
 .time-picker.scale-l .button, 
 .time-picker.scale-l .input {
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
+  padding-inline: 1.25rem;
+  padding-block: 0.75rem;
 }
 .time-picker.scale-l:not(.show-meridiem) .delimiter:last-child {
   padding-inline-end: 1.25rem;

package/dist/collection/components/time-picker/time-picker.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, h, Prop, Event, Watch, State, Listen, Method } from "@stencil/core";
 import { isActivationKey, numberKeys } from "../../utils/key";

package/dist/collection/components/tip/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.84
+ * v1.0.0-beta.87
  */
 import { HEADING_LEVEL as PARENT_HEADING_LEVEL } from "../tip-manager/resources";
 export const CSS = {

package/dist/collection/components/tip/tip.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]) {
@@ -97,7 +97,7 @@
 }
 
 .container {
-  width: 100%;
+  inline-size: 100%;
   padding: 1rem;
 }
 
@@ -155,7 +155,7 @@ h5.heading {
 }
 
 .header {
-  margin-bottom: 0.5rem;
+  margin-block-end: 0.5rem;
 }
 
 .header .heading {
@@ -172,20 +172,17 @@ h5.heading {
 }
 
 .info {
-  padding-top: 0px;
-  padding-bottom: 0px;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  width: 70%;
+  padding-block: 0px;
+  padding-inline: 1rem;
+  inline-size: 70%;
 }
 .info:only-child {
-  width: 100%;
-  padding-left: 0px;
-  padding-right: 0px;
+  inline-size: 100%;
+  padding-inline: 0px;
 }
 
 ::slotted(p) {
-  margin-top: 0px;
+  margin-block-start: 0px;
 }
 
 ::slotted(a) {
@@ -199,12 +196,12 @@ h5.heading {
 }
 
 .image-frame {
-  width: 25%;
+  inline-size: 25%;
 }
 .image-frame img {
-  max-width: 100%;
+  max-inline-size: 100%;
 }
 
 ::slotted(img) {
-  max-width: 100%;
+  max-inline-size: 100%;
 }

package/dist/collection/components/tip/tip.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, Prop, h, Fragment } from "@stencil/core";
 import { CSS, ICONS, SLOTS, TEXT, HEADING_LEVEL } from "./resources";
@@ -223,8 +223,8 @@ export class Tip {
         "text": "Emitted when the component has been dismissed."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }

package/dist/collection/components/tip-group/tip-group.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]) {
@@ -93,8 +93,7 @@
 }
 
 :host-context(calcite-tip-manager) {
-  margin-top: 0.75rem;
-  margin-bottom: 0.75rem;
+  margin-block: 0.75rem;
 }
 
 :host-context(calcite-tip-manager) ::slotted(calcite-tip) {

package/dist/collection/components/tip-group/tip-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.84
+ * v1.0.0-beta.87
  */
 import { Component, Prop, h } from "@stencil/core";
 /**

package/dist/collection/components/tip-manager/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.84
+ * v1.0.0-beta.87
  */
 export const CSS = {
   header: "header",

package/dist/collection/components/tip-manager/tip-manager.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]) {
@@ -147,11 +147,10 @@ h5.heading {
 
 .header {
   border-width: 0px;
-  border-bottom-width: 1px;
+  border-block-end-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);
-  padding-top: 0px;
-  padding-bottom: 0px;
+  padding-block: 0px;
   padding-inline-end: 0px;
   padding-inline-start: 1rem;
 }
@@ -167,7 +166,7 @@ h5.heading {
   position: relative;
   overflow: hidden;
   outline-color: transparent;
-  min-height: 150px;
+  min-block-size: 150px;
 }
 .container:focus {
   outline: 2px solid var(--calcite-ui-brand);
@@ -175,7 +174,7 @@ h5.heading {
 }
 
 .tip-container {
-  margin-top: 1px;
+  margin-block-start: 1px;
   display: flex;
   align-items: flex-start;
   justify-content: center;
@@ -183,7 +182,7 @@ h5.heading {
   outline-color: transparent;
   animation-name: none;
   animation-duration: var(--calcite-animation-timing);
-  height: var(--calcite-tip-manager-height);
+  block-size: var(--calcite-tip-manager-height);
 }
 .tip-container:focus {
   outline: 2px solid var(--calcite-ui-brand);
@@ -193,7 +192,7 @@ h5.heading {
 ::slotted(calcite-tip) {
   border-style: none;
   padding: 0.75rem;
-  max-width: var(--calcite-tip-max-width);
+  max-inline-size: var(--calcite-tip-max-width);
 }
 
 .tip-container--advancing {
@@ -209,17 +208,13 @@ h5.heading {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-left: 0px;
-  padding-right: 0px;
-  padding-top: 0.75rem;
-  padding-bottom: 0.5rem;
+  padding-inline: 0px;
+  padding-block: 0.75rem 0.5rem;
 }
 
 .page-position {
-  margin-top: 0px;
-  margin-bottom: 0px;
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
+  margin-block: 0px;
+  margin-inline: 0.5rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
 }

package/dist/collection/components/tip-manager/tip-manager.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, Method, Prop, State, Watch, h } from "@stencil/core";
 import { CSS, ICONS, TEXT, HEADING_LEVEL } from "./resources";
@@ -34,7 +34,7 @@ export class TipManager {
     this.nextClicked = () => {
       this.nextTip();
     };
-    this.tipManagerKeyUpHandler = (event) => {
+    this.tipManagerKeyDownHandler = (event) => {
       if (event.target !== this.container) {
         return;
       }
@@ -154,7 +154,7 @@ export class TipManager {
     if (total === 0) {
       return null;
     }
-    return (h("section", { "aria-hidden": toAriaBoolean(closed), class: CSS.container, hidden: closed, onKeyUp: this.tipManagerKeyUpHandler, ref: this.storeContainerRef, tabIndex: 0 },
+    return (h("section", { "aria-hidden": toAriaBoolean(closed), class: CSS.container, hidden: closed, onKeyDown: this.tipManagerKeyDownHandler, ref: this.storeContainerRef, tabIndex: 0 },
       h("header", { class: CSS.header },
         h(Heading, { class: CSS.heading, level: headingLevel || HEADING_LEVEL }, groupTitle),
         h("calcite-action", { class: CSS.close, onClick: this.hideTipManager, scale: "m", text: closeLabel },
@@ -323,8 +323,8 @@ export class TipManager {
         "text": "Emitted when the `calcite-tip-manager` has been toggled open or closed."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }, {
@@ -338,8 +338,8 @@ export class TipManager {
         "text": "Emitted when the `calcite-tip-manager` has been closed."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }

package/dist/collection/components/tooltip/TooltipManager.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 { TOOLTIP_DELAY_MS } from "./resources";
 export default class TooltipManager {

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

package/dist/collection/components/tooltip/tooltip.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]) {
@@ -85,10 +85,10 @@
   transform: scale(0);
 }
 
-.calcite-popper-anim {
+.calcite-floating-ui-anim {
   position: relative;
   z-index: 1;
-  transition: var(--calcite-popper-transition);
+  transition: var(--calcite-floating-ui-transition);
   visibility: hidden;
   transition-property: transform, visibility, opacity;
   opacity: 0;
@@ -96,33 +96,28 @@
   border-radius: 0.25rem;
 }
 
-:host([data-popper-placement^=bottom]) .calcite-popper-anim {
+:host([data-placement^=bottom]) .calcite-floating-ui-anim {
   transform: translateY(-5px);
 }
 
-:host([data-popper-placement^=top]) .calcite-popper-anim {
+:host([data-placement^=top]) .calcite-floating-ui-anim {
   transform: translateY(5px);
 }
 
-:host([data-popper-placement^=left]) .calcite-popper-anim {
+:host([data-placement^=left]) .calcite-floating-ui-anim {
   transform: translateX(5px);
 }
 
-:host([data-popper-placement^=right]) .calcite-popper-anim {
+:host([data-placement^=right]) .calcite-floating-ui-anim {
   transform: translateX(-5px);
 }
 
-:host([data-popper-placement]) .calcite-popper-anim--active {
+:host([data-placement]) .calcite-floating-ui-anim--active {
   opacity: 1;
   visibility: visible;
   transform: translate(0);
 }
 
-:host([data-popper-placement][data-popper-reference-hidden]) {
-  pointer-events: none;
-  opacity: 0;
-}
-
 :host([calcite-hydrated-hidden]) {
   visibility: hidden !important;
   pointer-events: none;
@@ -131,8 +126,8 @@
 .arrow,
 .arrow::before {
   position: absolute;
-  width: 8px;
-  height: 8px;
+  inline-size: 8px;
+  block-size: 8px;
   z-index: -1;
 }
 
@@ -145,20 +140,22 @@
   background: var(--calcite-ui-foreground-1);
 }
 
-:host([data-popper-placement^=top]) .arrow {
-  bottom: -4px;
+:host([data-placement^=top]) .arrow {
+  inset-block-end: -4px;
 }
 
-:host([data-popper-placement^=bottom]) .arrow {
-  top: -4px;
+:host([data-placement^=bottom]) .arrow {
+  inset-block-start: -4px;
 }
 
-:host([data-popper-placement^=left]) .arrow {
-  right: -4px;
+:host([data-placement^=left]) .arrow {
+  direction: ltr;
+  inset-inline-end: -4px;
 }
 
-:host([data-popper-placement^=right]) .arrow {
-  left: -4px;
+:host([data-placement^=right]) .arrow {
+  direction: ltr;
+  inset-inline-start: -4px;
 }
 
 .container {
@@ -166,20 +163,18 @@
   overflow: hidden;
   border-radius: 0.25rem;
   background-color: var(--calcite-ui-foreground-1);
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-block: 0.75rem;
+  padding-inline: 1rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1.375;
   font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-1);
-  max-width: 20rem;
-  max-height: 20rem;
+  max-inline-size: 20rem;
+  max-block-size: 20rem;
   text-align: start;
 }
 
-.calcite-popper-anim {
+.calcite-floating-ui-anim {
   border-radius: 0.25rem;
   border-width: 1px;
   border-style: solid;