@esri/calcite-components 1.0.0-next.530 → 1.0.0-next.533

package/dist/collection/components/modal/modal.css

@@ -91,10 +91,7 @@
 */
 :host {
   position: fixed;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
+  inset: 0px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -130,10 +127,7 @@
 .scrim {
   --calcite-scrim-background: rgba(0, 0, 0, 0.75);
   position: fixed;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
+  inset: 0px;
   display: flex;
   overflow-y: hidden;
 }
@@ -144,7 +138,7 @@
   margin: 1.5rem;
   box-sizing: border-box;
   display: flex;
-  width: 100%;
+  inline-size: 100%;
   flex-direction: column;
   overflow: hidden;
   border-radius: 0.25rem;
@@ -172,7 +166,7 @@
   visibility: visible;
   opacity: 1;
   transform: translate3d(0, 0, 0);
-  transition: transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-width var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-height var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);
+  transition: transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-inline-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-block-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);
   transition-delay: 0ms;
 }
 
@@ -181,12 +175,12 @@
  */
 .header {
   display: flex;
-  min-width: 0px;
-  max-width: 100%;
-  border-top-left-radius: 0.25rem;
-  border-top-right-radius: 0.25rem;
+  min-inline-size: 0px;
+  max-inline-size: 100%;
+  border-start-start-radius: 0.25rem;
+  border-start-end-radius: 0.25rem;
   border-width: 0px;
-  border-bottom-width: 1px;
+  border-block-end-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);
   background-color: var(--calcite-ui-foreground-1);
@@ -225,10 +219,11 @@
 .title {
   order: 1;
   display: flex;
-  min-width: 0px;
+  min-inline-size: 0px;
   align-items: center;
   flex: 1 1 auto;
-  padding: var(--calcite-modal-padding) var(--calcite-modal-padding-large);
+  padding-block: var(--calcite-modal-padding);
+  padding-inline: var(--calcite-modal-padding-large);
 }
 
 slot[name=header]::slotted(*), 
@@ -246,21 +241,22 @@ slot[name=header]::slotted(*),
   position: relative;
   box-sizing: border-box;
   display: block;
-  height: 100%;
+  block-size: 100%;
   overflow: auto;
   background-color: var(--calcite-ui-foreground-1);
   padding: 0px;
-  max-height: calc(100vh - 12rem);
+  max-block-size: calc(100vh - 12rem);
   z-index: 1;
 }
 
 .content--spaced {
-  padding: var(--calcite-modal-padding) var(--calcite-modal-padding-large);
+  padding-block: var(--calcite-modal-padding);
+  padding-inline: var(--calcite-modal-padding-large);
 }
 
 .content--no-footer {
-  border-bottom-right-radius: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
+  border-end-end-radius: 0.25rem;
+  border-end-start-radius: 0.25rem;
 }
 
 slot[name=content]::slotted(*),
@@ -276,20 +272,21 @@ slot[name=content]::slotted(*),
  * Footer
  */
 .footer {
-  margin-top: auto;
+  margin-block-start: auto;
   box-sizing: border-box;
   display: flex;
-  width: 100%;
+  inline-size: 100%;
   justify-content: space-between;
-  border-bottom-right-radius: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
+  border-end-end-radius: 0.25rem;
+  border-end-start-radius: 0.25rem;
   border-width: 0px;
-  border-top-width: 1px;
+  border-block-start-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);
   background-color: var(--calcite-ui-foreground-1);
   flex: 0 0 auto;
-  padding: var(--calcite-modal-padding) var(--calcite-modal-padding-large);
+  padding-block: var(--calcite-modal-padding);
+  padding-inline: var(--calcite-modal-padding-large);
   z-index: 2;
 }
 
@@ -304,8 +301,7 @@ slot[name=content]::slotted(*),
 }
 
 .secondary {
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
+  margin-inline: 0.25rem;
   display: block;
 }
 
@@ -317,25 +313,25 @@ slot[name=primary] {
  * Sizes
  */
 :host([width=small]) .modal {
-  width: auto;
+  inline-size: auto;
 }
 
 :host([width=s]) .modal {
-  max-width: 32rem;
+  max-inline-size: 32rem;
 }
 
 @media screen and (max-width: 35rem) {
   :host([width=s]) .modal {
     margin: 0px;
-    height: 100%;
-    max-height: 100%;
-    width: 100%;
-    max-width: 100%;
+    block-size: 100%;
+    max-block-size: 100%;
+    inline-size: 100%;
+    max-inline-size: 100%;
     border-radius: 0px;
   }
   :host([width=s]) .content {
     flex: 1 1 auto;
-    max-height: unset;
+    max-block-size: unset;
   }
 
   :host([width=s][docked]) {
@@ -343,21 +339,21 @@ slot[name=primary] {
   }
 }
 :host([width=m]) .modal {
-  max-width: 48rem;
+  max-inline-size: 48rem;
 }
 
 @media screen and (max-width: 51rem) {
   :host([width=m]) .modal {
     margin: 0px;
-    height: 100%;
-    max-height: 100%;
-    width: 100%;
-    max-width: 100%;
+    block-size: 100%;
+    max-block-size: 100%;
+    inline-size: 100%;
+    max-inline-size: 100%;
     border-radius: 0px;
   }
   :host([width=m]) .content {
     flex: 1 1 auto;
-    max-height: unset;
+    max-block-size: unset;
   }
 
   :host([width=m][docked]) {
@@ -365,21 +361,21 @@ slot[name=primary] {
   }
 }
 :host([width=l]) .modal {
-  max-width: 94rem;
+  max-inline-size: 94rem;
 }
 
 @media screen and (max-width: 97rem) {
   :host([width=l]) .modal {
     margin: 0px;
-    height: 100%;
-    max-height: 100%;
-    width: 100%;
-    max-width: 100%;
+    block-size: 100%;
+    max-block-size: 100%;
+    inline-size: 100%;
+    max-inline-size: 100%;
     border-radius: 0px;
   }
   :host([width=l]) .content {
     flex: 1 1 auto;
-    max-height: unset;
+    max-block-size: unset;
   }
 
   :host([width=l][docked]) {
@@ -394,14 +390,14 @@ slot[name=primary] {
 }
 :host([fullscreen]) .modal {
   margin: 0px;
-  height: 100%;
-  max-height: 100%;
-  width: 100%;
-  max-width: 100%;
+  block-size: 100%;
+  max-block-size: 100%;
+  inline-size: 100%;
+  max-inline-size: 100%;
   transform: translate3D(0, 20px, 0) scale(0.95);
 }
 :host([fullscreen]) .content {
-  max-height: 100%;
+  max-block-size: 100%;
   flex: 1 1 auto;
 }
 
@@ -422,10 +418,10 @@ slot[name=primary] {
  * Docked
  */
 :host([docked]) .modal {
-  height: auto;
+  block-size: auto;
 }
 :host([docked]) .content {
-  height: auto;
+  block-size: auto;
   flex: 1 1 auto;
 }
 @media screen and (max-width: 860px) {
@@ -451,14 +447,14 @@ slot[name=primary] {
 :host([color=red]) .modal, 
 :host([color=blue]) .modal {
   border-width: 0px;
-  border-top-width: 4px;
+  border-block-start-width: 4px;
   border-style: solid;
 }
 :host([color=red]) .header, 
 :host([color=blue]) .header {
   border-radius: 0.25rem;
-  border-bottom-right-radius: 0px;
-  border-bottom-left-radius: 0px;
+  border-end-end-radius: 0px;
+  border-end-start-radius: 0px;
 }
 
 /**
@@ -472,7 +468,7 @@ slot[name=primary] {
 
   .footer {
     position: sticky;
-    bottom: 0px;
+    inset-block-end: 0px;
   }
 }
 /**
@@ -486,6 +482,6 @@ slot[name=primary] {
   .back, 
 .secondary {
     margin: 0px;
-    margin-bottom: 0.25rem;
+    margin-block-end: 0.25rem;
   }
 }

package/dist/collection/components/modal/modal.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.530
+ * v1.0.0-next.533
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { ensureId, focusElement, getSlotted, isCalciteFocusable } from "../../utils/dom";

package/dist/collection/components/modal/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.530
+ * v1.0.0-next.533
  */
 export const CSS = {
   title: "title",

package/dist/collection/components/notice/notice.css

@@ -91,21 +91,18 @@
 }
 :host([scale=s]) .container slot[name=title]::slotted(*), 
 :host([scale=s]) .container *::slotted([slot=title]) {
-  margin-top: 0.125rem;
-  margin-bottom: 0.125rem;
+  margin-block: 0.125rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1.375;
 }
 :host([scale=s]) .container slot[name=message]::slotted(*), 
 :host([scale=s]) .container *::slotted([slot=message]) {
-  margin-top: 0.125rem;
-  margin-bottom: 0.125rem;
+  margin-block: 0.125rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1.375;
 }
 :host([scale=s]) ::slotted(calcite-link) {
-  margin-top: 0.125rem;
-  margin-bottom: 0.125rem;
+  margin-block: 0.125rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1.375;
 }
@@ -119,21 +116,18 @@
 }
 :host([scale=m]) .container slot[name=title]::slotted(*), 
 :host([scale=m]) .container *::slotted([slot=title]) {
-  margin-top: 0.125rem;
-  margin-bottom: 0.125rem;
+  margin-block: 0.125rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.375;
 }
 :host([scale=m]) .container slot[name=message]::slotted(*), 
 :host([scale=m]) .container *::slotted([slot=message]) {
-  margin-top: 0.125rem;
-  margin-bottom: 0.125rem;
+  margin-block: 0.125rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1.375;
 }
 :host([scale=m]) ::slotted(calcite-link) {
-  margin-top: 0.125rem;
-  margin-bottom: 0.125rem;
+  margin-block: 0.125rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1.375;
 }
@@ -144,21 +138,18 @@
 }
 :host([scale=l]) .container slot[name=title]::slotted(*), 
 :host([scale=l]) .container *::slotted([slot=title]) {
-  margin-top: 0.125rem;
-  margin-bottom: 0.125rem;
+  margin-block: 0.125rem;
   font-size: var(--calcite-font-size-1);
   line-height: 1.375;
 }
 :host([scale=l]) .container slot[name=message]::slotted(*), 
 :host([scale=l]) .container *::slotted([slot=message]) {
-  margin-top: 0.125rem;
-  margin-bottom: 0.125rem;
+  margin-block: 0.125rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.375;
 }
 :host([scale=l]) ::slotted(calcite-link) {
-  margin-top: 0.125rem;
-  margin-bottom: 0.125rem;
+  margin-block: 0.125rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.375;
 }
@@ -176,25 +167,23 @@
 }
 
 :host {
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
   display: none;
-  max-width: 100%;
+  max-inline-size: 100%;
   align-items: center;
-  width: var(--calcite-notice-width);
+  inline-size: var(--calcite-notice-width);
 }
 
 .container {
   pointer-events: none;
-  margin-top: 0px;
-  margin-bottom: 0px;
+  margin-block: 0px;
   box-sizing: border-box;
   display: none;
-  width: 100%;
+  inline-size: 100%;
   background-color: var(--calcite-ui-foreground-1);
   opacity: 0;
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
-  max-height: 0;
+  max-block-size: 0;
   text-align: start;
   border-inline-start: 0px solid;
   box-shadow: 0 0 0 0 transparent;
@@ -215,7 +204,7 @@
 :host([active]) .container {
   pointer-events: auto;
   display: flex;
-  max-height: 100%;
+  max-block-size: 100%;
   align-items: center;
   border-width: 2px;
   opacity: 1;
@@ -243,10 +232,11 @@
 .notice-content {
   box-sizing: border-box;
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
-  padding: var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large);
+  padding-block: var(--calcite-notice-spacing-token-small);
+  padding-inline: var(--calcite-notice-spacing-token-large);
   flex: 0 0 auto;
   display: flex;
-  min-width: 0px;
+  min-inline-size: 0px;
   flex-direction: column;
   overflow-wrap: break-word;
   flex: 1 1 0;
@@ -257,7 +247,8 @@
   padding-inline-start: var(--calcite-notice-spacing-token-large);
 }
 .notice-content:only-of-type {
-  padding: var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large);
+  padding-block: var(--calcite-notice-spacing-token-small);
+  padding-inline: var(--calcite-notice-spacing-token-large);
 }
 
 .notice-icon {
@@ -265,7 +256,8 @@
   align-items: center;
   box-sizing: border-box;
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
-  padding: var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large);
+  padding-block: var(--calcite-notice-spacing-token-small);
+  padding-inline: var(--calcite-notice-spacing-token-large);
   flex: 0 0 auto;
 }
 
@@ -281,7 +273,8 @@
   outline-offset: 2px;
   box-sizing: border-box;
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
-  padding: var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large);
+  padding-block: var(--calcite-notice-spacing-token-small);
+  padding-inline: var(--calcite-notice-spacing-token-large);
   flex: 0 0 auto;
   -webkit-appearance: none;
 }

package/dist/collection/components/notice/notice.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.530
+ * v1.0.0-next.533
  */
 import { Component, Element, Event, h, Method, Prop, Watch } from "@stencil/core";
 import { CSS, SLOTS, TEXT } from "./resources";

package/dist/collection/components/notice/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.530
+ * v1.0.0-next.533
  */
 export const TEXT = {
   close: "Close"

package/dist/collection/components/option/option.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.530
+ * v1.0.0-next.533
  */
 import { Component, h, Prop, Element, Event, Watch } from "@stencil/core";
 import { createObserver } from "../../utils/observers";

package/dist/collection/components/option-group/option-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.530
+ * v1.0.0-next.533
  */
 import { Component, h, Prop, Watch, Event, Fragment } from "@stencil/core";
 /**

package/dist/collection/components/pagination/pagination.css

@@ -89,42 +89,39 @@
   --calcite-pagination-spacing: 0.25rem 0.5rem;
 }
 :host([scale=s]) .previous,  :host([scale=s]) .next,  :host([scale=s]) .page {
-  height: 1.5rem;
+  block-size: 1.5rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
 }
 :host([scale=s]) .previous, 
 :host([scale=s]) .next {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
+  padding-inline: 0.25rem;
 }
 
 :host([scale=m]) {
   --calcite-pagination-spacing: 0.5rem 0.75rem;
 }
 :host([scale=m]) .previous,  :host([scale=m]) .next,  :host([scale=m]) .page {
-  height: 2rem;
+  block-size: 2rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
 :host([scale=m]) .previous, 
 :host([scale=m]) .next {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  padding-inline: 0.5rem;
 }
 
 :host([scale=l]) {
   --calcite-pagination-spacing: 0.75rem 1rem;
 }
 :host([scale=l]) .previous,  :host([scale=l]) .next,  :host([scale=l]) .page {
-  height: 2.75rem;
+  block-size: 2.75rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
 }
 :host([scale=l]) .previous, 
 :host([scale=l]) .next {
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-inline: 1rem;
 }
 
 :host {
@@ -154,8 +151,8 @@
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
   color: var(--calcite-ui-text-3);
-  border-top: 2px solid transparent;
-  border-bottom: 2px solid transparent;
+  border-block-start: 2px solid transparent;
+  border-block-end: 2px solid transparent;
 }
 .previous:hover, 
 .next:hover, 
@@ -165,12 +162,12 @@
 }
 
 .page:hover {
-  border-bottom-color: var(--calcite-ui-border-2);
+  border-block-end-color: var(--calcite-ui-border-2);
 }
 .page.is-selected {
   font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-1);
-  border-bottom-color: var(--calcite-ui-brand);
+  border-block-end-color: var(--calcite-ui-brand);
 }
 
 .previous:hover, 

package/dist/collection/components/pagination/pagination.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.530
+ * v1.0.0-next.533
  */
 import { Component, Element, Event, h, Prop, Method, Fragment, State } from "@stencil/core";
 import { unwatchGlobalAttributes, watchGlobalAttributes } from "../../utils/globalAttributes";

package/dist/collection/components/pagination/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.530
+ * v1.0.0-next.533
  */
 export const CSS = {
   page: "page",