@esri/calcite-components 1.0.0-next.529 → 1.0.0-next.531

package/dist/collection/components/date-picker-month/date-picker-month.css

@@ -79,51 +79,43 @@
 }
 
 .calender {
-  margin-bottom: 0.25rem;
+  margin-block-end: 0.25rem;
 }
 
 .week-headers {
   display: flex;
   border-width: 0px;
-  border-top-width: 1px;
+  border-block-start-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);
-  padding-top: 0px;
-  padding-bottom: 0px;
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
+  padding-block: 0px;
+  padding-inline: 0.25rem;
 }
 
 .week-header {
   text-align: center;
   font-weight: var(--calcite-font-weight-bold);
   color: var(--calcite-ui-text-3);
-  width: 14.2857142857%;
+  inline-size: 14.2857142857%;
 }
 
 :host([scale=s]) .week-header {
-  padding-left: 0px;
-  padding-right: 0px;
-  padding-top: 0.5rem;
-  padding-bottom: 0.75rem;
+  padding-inline: 0px;
+  padding-block: 0.5rem 0.75rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
 }
 
 :host([scale=m]) .week-header {
-  padding-left: 0px;
-  padding-right: 0px;
-  padding-top: 0.75rem;
-  padding-bottom: 1rem;
+  padding-inline: 0px;
+  padding-block: 0.75rem 1rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
 }
 
 :host([scale=l]) .week-header {
-  padding-left: 0px;
-  padding-right: 0px;
-  padding-top: 1rem;
-  padding-bottom: 1.25rem;
+  padding-inline: 0px;
+  padding-block: 1rem 1.25rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
@@ -131,10 +123,8 @@
 .week-days {
   display: flex;
   flex-direction: row;
-  padding-top: 0px;
-  padding-bottom: 0px;
-  padding-left: 6px;
-  padding-right: 6px;
+  padding-block: 0px;
+  padding-inline: 6px;
 }
 .week-days:focus {
   outline: 2px solid transparent;

package/dist/collection/components/date-picker-month/date-picker-month.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-next.529
+ * v1.0.0-next.531
  */
 import { Component, Element, Prop, Host, Event, h, Listen } from "@stencil/core";
 import { inRange, sameDate, dateFromRange } from "../../utils/date";

package/dist/collection/components/date-picker-month-header/date-picker-month-header.css

@@ -85,45 +85,39 @@
 .header {
   display: flex;
   justify-content: space-between;
-  padding-top: 0px;
-  padding-bottom: 0px;
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
+  padding-block: 0px;
+  padding-inline: 0.25rem;
 }
 
 :host([scale=s]) .text {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
+  margin-block: 0.5rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
 :host([scale=s]) .chevron {
-  height: 2.25rem;
+  block-size: 2.25rem;
 }
 
 :host([scale=m]) .text {
-  margin-top: 0.75rem;
-  margin-bottom: 0.75rem;
+  margin-block: 0.75rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
 }
 :host([scale=m]) .chevron {
-  height: 3rem;
+  block-size: 3rem;
 }
 
 :host([scale=l]) .text {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+  margin-block: 1rem;
   font-size: var(--calcite-font-size-1);
   line-height: 1.5rem;
 }
 :host([scale=l]) .chevron {
-  height: 3.5rem;
+  block-size: 3.5rem;
 }
 
 .chevron {
-  margin-left: -0.25rem;
-  margin-right: -0.25rem;
+  margin-inline: -0.25rem;
   box-sizing: content-box;
   display: flex;
   flex-grow: 0;
@@ -132,14 +126,13 @@
   justify-content: center;
   border-style: none;
   background-color: var(--calcite-ui-foreground-1);
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
+  padding-inline: 0.25rem;
   color: var(--calcite-ui-text-3);
   outline: 2px solid transparent;
   outline-offset: 2px;
   outline-color: transparent;
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
-  width: 14.2857142857%;
+  inline-size: 14.2857142857%;
 }
 .chevron:focus {
   outline: 2px solid var(--calcite-ui-brand);
@@ -159,9 +152,8 @@
 }
 
 .text {
-  margin-top: auto;
-  margin-bottom: auto;
-  width: 100%;
+  margin-block: auto;
+  inline-size: 100%;
   flex: 1 1 auto;
   align-items: center;
   justify-content: center;
@@ -176,10 +168,8 @@
 .month, 
 .year, 
 .suffix {
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-  margin-top: auto;
-  margin-bottom: auto;
+  margin-inline: 0.25rem;
+  margin-block: auto;
   display: inline-block;
   background-color: var(--calcite-ui-foreground-1);
   font-weight: var(--calcite-font-weight-medium);
@@ -190,7 +180,7 @@
 
 .year {
   position: relative;
-  width: 3rem;
+  inline-size: 3rem;
   border-style: none;
   background-color: transparent;
   text-align: center;
@@ -211,8 +201,8 @@
 }
 
 .year--suffix {
-  width: 4rem;
-  text-align: left;
+  inline-size: 4rem;
+  text-align: start;
 }
 
 .year-wrap {
@@ -221,11 +211,11 @@
 
 .suffix {
   position: absolute;
-  top: 0px;
-  left: 0px;
-  width: 4rem;
+  inset-block-start: 0px;
+  inset-inline-start: 0px;
+  inline-size: 4rem;
   white-space: nowrap;
-  text-align: left;
+  text-align: start;
 }
 
 .suffix__invisible {

package/dist/collection/components/date-picker-month-header/date-picker-month-header.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-next.529
+ * v1.0.0-next.531
  */
 import { Component, Element, Prop, Event, h, State, Watch, Fragment } from "@stencil/core";
 import { dateFromRange, nextMonth, prevMonth, localizeNumber, parseNumber, getOrder } from "../../utils/date";

package/dist/collection/components/date-picker-month-header/resources.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-next.529
+ * v1.0.0-next.531
  */
 export const BUDDHIST_CALENDAR_YEAR_OFFSET = 543;

package/dist/collection/components/dropdown/dropdown.css

@@ -147,12 +147,12 @@
 }
 
 :host .calcite-dropdown-content {
-  width: auto;
+  inline-size: auto;
   overflow-y: auto;
   overflow-x: hidden;
   background-color: var(--calcite-ui-foreground-1);
-  max-height: 90vh;
-  width: var(--calcite-dropdown-width);
+  max-block-size: 90vh;
+  inline-size: var(--calcite-dropdown-width);
 }
 
 .calcite-dropdown-trigger-container {
@@ -161,6 +161,13 @@
   flex: 1 1 auto;
 }
 
+@media (forced-colors: active) {
+  /* use real border since box-shadow is removed in high contrast mode */
+  :host([active]) .calcite-dropdown-wrapper,
+:host([open]) .calcite-dropdown-wrapper {
+    border: 1px solid canvasText;
+  }
+}
 :host([width=s]) {
   --calcite-dropdown-width: 12rem;
 }

package/dist/collection/components/dropdown/dropdown.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-next.529
+ * v1.0.0-next.531
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
 import { focusElement, toAriaBoolean } from "../../utils/dom";

package/dist/collection/components/dropdown/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-next.529
+ * v1.0.0-next.531
  */
 export {};

package/dist/collection/components/dropdown/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-next.529
+ * v1.0.0-next.531
  */
 export const SLOTS = {
   dropdownTrigger: "dropdown-trigger"

package/dist/collection/components/dropdown-group/dropdown-group.css

@@ -111,12 +111,12 @@
 }
 
 .dropdown-title {
-  margin-bottom: -1px;
+  margin-block-end: -1px;
   display: block;
   cursor: default;
   overflow-wrap: break-word;
   border-width: 0px;
-  border-bottom-width: 1px;
+  border-block-end-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);
   font-weight: var(--calcite-font-weight-bold);
@@ -125,6 +125,6 @@
 
 .dropdown-separator {
   display: block;
-  height: 1px;
+  block-size: 1px;
   background-color: var(--calcite-ui-border-3);
 }

package/dist/collection/components/dropdown-group/dropdown-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-next.529
+ * v1.0.0-next.531
  */
 import { Component, Element, Event, h, Host, Listen, Prop } from "@stencil/core";
 import { getElementProp } from "../../utils/dom";

package/dist/collection/components/dropdown-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-next.529
+ * v1.0.0-next.531
  */
 export {};

package/dist/collection/components/dropdown-group/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-next.529
+ * v1.0.0-next.531
  */
 export const CSS = {
   containerSmall: "container--s",

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

@@ -79,8 +79,7 @@
 }
 
 .container--s {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
+  padding-block: 0.25rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
   padding-inline-end: 0.5rem;
@@ -88,8 +87,7 @@
 }
 
 .container--m {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  padding-block: 0.5rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
   padding-inline-end: 0.75rem;
@@ -97,8 +95,7 @@
 }
 
 .container--l {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
+  padding-block: 0.75rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
   padding-inline-end: 1rem;
@@ -142,8 +139,6 @@
   color: var(--calcite-ui-text-3);
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
-  outline: 2px solid transparent;
-  outline-offset: 2px;
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   text-align: start;
@@ -161,6 +156,7 @@
 }
 
 :host(:focus) {
+  outline: 2px solid transparent;
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
@@ -177,15 +173,12 @@
   color: var(--calcite-ui-text-3);
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
-  outline: 2px solid transparent;
-  outline-offset: 2px;
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .container--s .dropdown-link {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
+  padding-block: 0.25rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
   padding-inline-end: 0.5rem;
@@ -193,8 +186,7 @@
 }
 
 .container--m .dropdown-link {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  padding-block: 0.5rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
   padding-inline-end: 0.75rem;
@@ -202,8 +194,7 @@
 }
 
 .container--l .dropdown-link {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
+  padding-block: 0.75rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
   padding-inline-end: 1rem;

package/dist/collection/components/dropdown-item/dropdown-item.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-next.529
+ * v1.0.0-next.531
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop } from "@stencil/core";
 import { getElementProp, toAriaBoolean } from "../../utils/dom";

package/dist/collection/components/dropdown-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-next.529
+ * v1.0.0-next.531
  */
 export const CSS = {
   containerLink: "container--link",

package/dist/collection/components/fab/fab.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-next.529
+ * v1.0.0-next.531
  */
 import { Component, Element, Method, Prop, h } from "@stencil/core";
 import { CSS, ICONS } from "./resources";

package/dist/collection/components/fab/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-next.529
+ * v1.0.0-next.531
  */
 export const CSS = {
   button: "button"

package/dist/collection/components/filter/filter.css

@@ -91,7 +91,7 @@
 
 :host {
   display: flex;
-  width: 100%;
+  inline-size: 100%;
 }
 
 :host([disabled]) {
@@ -109,29 +109,26 @@
 
 .container {
   display: flex;
-  width: 100%;
+  inline-size: 100%;
   padding: 0.5rem;
 }
 
 label {
   position: relative;
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-  margin-top: 0px;
-  margin-bottom: 0px;
+  margin-inline: 0.25rem;
+  margin-block: 0px;
   display: flex;
-  width: 100%;
+  inline-size: 100%;
   align-items: center;
   overflow: hidden;
 }
 
 input[type=text] {
-  margin-bottom: 0.25rem;
-  width: 100%;
+  margin-block-end: 0.25rem;
+  inline-size: 100%;
   border-style: none;
   background-color: transparent;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
+  padding-block: 0.25rem;
   font-family: inherit;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
@@ -145,7 +142,7 @@ input[type=text]::-ms-clear {
 }
 
 calcite-input {
-  width: 100%;
+  inline-size: 100%;
 }
 
 .search-icon {
@@ -153,7 +150,7 @@ calcite-input {
   display: flex;
   color: var(--calcite-ui-text-2);
   inset-inline-start: 0;
-  transition: left var(--calcite-animation-timing), right var(--calcite-animation-timing), opacity var(--calcite-animation-timing);
+  transition: inset-inline-start var(--calcite-animation-timing), inset-inline-end var(--calcite-animation-timing), opacity var(--calcite-animation-timing);
 }
 
 input[type=text]:focus {

package/dist/collection/components/filter/filter.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-next.529
+ * v1.0.0-next.531
  */
 import { Component, Element, Event, Prop, h, Method, Fragment, Watch } from "@stencil/core";
 import { debounce, forIn } from "lodash-es";

package/dist/collection/components/filter/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-next.529
+ * v1.0.0-next.531
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/flow/flow.css

@@ -92,7 +92,7 @@
 :host {
   position: relative;
   display: flex;
-  width: 100%;
+  inline-size: 100%;
   flex: 1 1 auto;
   align-items: stretch;
   overflow: hidden;
@@ -102,14 +102,14 @@
   position: relative;
   margin: 0px;
   display: flex;
-  width: 100%;
+  inline-size: 100%;
   flex: 1 1 auto;
   flex-direction: column;
   align-items: stretch;
   padding: 0px;
 }
 :host ::slotted(calcite-panel) {
-  height: 100%;
+  block-size: 100%;
 }
 :host ::slotted(.calcite-match-height:last-child) {
   display: flex;

package/dist/collection/components/flow/flow.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-next.529
+ * v1.0.0-next.531
  */
 import { Component, Element, Listen, Method, State, h } from "@stencil/core";
 import { CSS } from "./resources";

package/dist/collection/components/flow/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-next.529
+ * v1.0.0-next.531
  */
 export {};

package/dist/collection/components/flow/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-next.529
+ * v1.0.0-next.531
  */
 export const CSS = {
   frame: "frame",

package/dist/collection/components/functional/ExpandToggle.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-next.529
+ * v1.0.0-next.531
  */
 import { h } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";

package/dist/collection/components/functional/Heading.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-next.529
+ * v1.0.0-next.531
  */
 import { h } from "@stencil/core";
 export function constrainHeadingLevel(level) {

package/dist/collection/components/graph/graph.css

@@ -80,7 +80,7 @@
 
 :host {
   display: block;
-  height: 100%;
+  block-size: 100%;
 }
 
 .svg {
@@ -88,8 +88,8 @@
   stroke: transparent;
   margin: 0px;
   display: block;
-  height: 100%;
-  width: 100%;
+  block-size: 100%;
+  inline-size: 100%;
   padding: 0px;
 }
 .svg .graph-path--highlight {

package/dist/collection/components/graph/graph.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-next.529
+ * v1.0.0-next.531
  */
 import { Component, Element, Prop, h, forceUpdate } from "@stencil/core";
 import { guid } from "../../utils/guid";

package/dist/collection/components/graph/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-next.529
+ * v1.0.0-next.531
  */
 export {};