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

package/dist/collection/components/action-bar/action-bar.css

@@ -82,7 +82,7 @@
 }
 
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -94,7 +94,7 @@
   display: inline-flex;
   flex-direction: column;
   align-self: stretch;
-  max-width: 15vw;
+  max-inline-size: 15vw;
   background: transparent;
 }
 
@@ -103,22 +103,22 @@
 }
 
 :host([expanded]) {
-  max-width: 20vw;
+  max-inline-size: 20vw;
 }
 
 ::slotted(calcite-action-group) {
   border-width: 0px;
-  border-bottom-width: 1px;
+  border-block-end-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);
 }
 
 ::slotted(calcite-action-group:last-child) {
-  border-bottom-width: 0px;
+  border-block-end-width: 0px;
 }
 
 .action-group--bottom {
   flex-grow: 1;
   justify-content: flex-end;
-  padding-bottom: 0px;
+  padding-block-end: 0px;
 }

package/dist/collection/components/action-bar/action-bar.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.86
+ * v1.0.0-beta.87
  */
 import { Component, Element, Event, Host, Prop, Watch, h, Method } from "@stencil/core";
 import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle";
@@ -336,8 +336,8 @@ export class ActionBar {
         "text": "Emits when the `expanded` property is toggled."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }

package/dist/collection/components/action-bar/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.86
+ * v1.0.0-beta.87
  */
 export const CSS = {
   actionGroupBottom: "action-group--bottom"

package/dist/collection/components/action-bar/utils.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.86
+ * v1.0.0-beta.87
  */
 import { forceUpdate } from "@stencil/core";
 import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources";

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

@@ -82,7 +82,7 @@
 }
 
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -128,7 +128,7 @@
 }
 
 :host(:first-child) {
-  padding-top: 0px;
+  padding-block-start: 0px;
 }
 
 :host([layout=horizontal]) {

package/dist/collection/components/action-group/action-group.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.86
+ * v1.0.0-beta.87
  */
-import { Component, h, Prop, Watch, Element } from "@stencil/core";
-import { SLOTS, TEXT, ICONS } from "./resources";
+import { Component, Element, h, Prop, Watch } from "@stencil/core";
+import { ICONS, SLOTS, TEXT } from "./resources";
 import { Fragment } from "@stencil/core/internal";
 import { getSlotted } from "../../utils/dom";
 import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources";

package/dist/collection/components/action-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-beta.86
+ * v1.0.0-beta.87
  */
 export const SLOTS = {
   menuActions: "menu-actions",

package/dist/collection/components/action-menu/action-menu.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]) {
@@ -100,7 +100,7 @@
 
 .default-trigger {
   position: relative;
-  height: 100%;
+  block-size: 100%;
   flex: 0 1 auto;
   align-self: stretch;
 }
@@ -108,7 +108,7 @@
 slot[name=trigger]::slotted(calcite-action), 
 calcite-action::slotted([slot=trigger]) {
   position: relative;
-  height: 100%;
+  block-size: 100%;
   flex: 0 1 auto;
   align-self: stretch;
 }

package/dist/collection/components/action-menu/action-menu.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.86
+ * v1.0.0-beta.87
  */
 import { Component, h, Element, Event, Listen, Prop, Watch, Method, State } from "@stencil/core";
 import { CSS, SLOTS, ICONS } from "./resources";
@@ -38,7 +38,7 @@ export class ActionMenu {
     /**
      * Determines where the component will be positioned relative to the `referenceElement`.
      *
-     * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)
+     * @see [LogicalPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts#L25)
      */
     this.placement = "auto";
     this.actionElements = [];
@@ -79,7 +79,6 @@ export class ActionMenu {
       }
       menuButtonEl.addEventListener("click", this.menuButtonClick);
       menuButtonEl.addEventListener("keydown", this.menuButtonKeyDown);
-      menuButtonEl.addEventListener("keyup", this.menuButtonKeyUp);
     };
     this.disconnectMenuButtonEl = () => {
       const { menuButtonEl } = this;
@@ -88,7 +87,6 @@ export class ActionMenu {
       }
       menuButtonEl.removeEventListener("click", this.menuButtonClick);
       menuButtonEl.removeEventListener("keydown", this.menuButtonKeyDown);
-      menuButtonEl.removeEventListener("keyup", this.menuButtonKeyUp);
     };
     this.setDefaultMenuButtonEl = (el) => {
       this.defaultMenuButtonEl = el;
@@ -141,7 +139,7 @@ export class ActionMenu {
       this.actionElements = actionElements;
       this.connectMenuButtonEl();
     };
-    this.menuButtonKeyUp = (event) => {
+    this.menuButtonKeyDown = (event) => {
       const { key } = event;
       const { actionElements } = this;
       if (!this.isValidKey(key, SUPPORTED_BUTTON_NAV_KEYS)) {
@@ -154,13 +152,6 @@ export class ActionMenu {
       this.toggleOpen(true);
       this.handleActionNavigation(key, actionElements);
     };
-    this.menuButtonKeyDown = (event) => {
-      const { key } = event;
-      if (!this.isValidKey(key, SUPPORTED_BUTTON_NAV_KEYS)) {
-        return;
-      }
-      event.preventDefault();
-    };
     this.menuActionsContainerKeyDown = (event) => {
       const { key } = event;
       const { actionElements, activeMenuItemIndex } = this;
@@ -174,24 +165,16 @@ export class ActionMenu {
         action ? action.click() : this.toggleOpen(false);
         return;
       }
-      if (this.isValidKey(key, SUPPORTED_MENU_NAV_KEYS)) {
-        event.preventDefault();
-      }
-    };
-    this.menuActionsContainerKeyUp = (event) => {
-      const { key } = event;
-      const { actionElements } = this;
       if (key === "Escape") {
         this.toggleOpen(false);
         return;
       }
-      if (!this.isValidKey(key, SUPPORTED_MENU_NAV_KEYS)) {
-        return;
-      }
-      event.preventDefault();
       if (!actionElements.length) {
         return;
       }
+      if (this.isValidKey(key, SUPPORTED_MENU_NAV_KEYS)) {
+        event.preventDefault();
+      }
       this.handleActionNavigation(key, actionElements);
     };
     this.handleActionNavigation = (key, actions) => {
@@ -277,7 +260,7 @@ export class ActionMenu {
     const activeAction = actionElements[activeMenuItemIndex];
     const activeDescendantId = (activeAction === null || activeAction === void 0 ? void 0 : activeAction.id) || null;
     return (h("calcite-popover", { disablePointer: true, flipPlacements: flipPlacements, label: label, offsetDistance: 0, open: open, overlayPositioning: overlayPositioning, placement: placement, referenceElement: menuButtonEl },
-      h("div", { "aria-activedescendant": activeDescendantId, "aria-labelledby": menuButtonEl === null || menuButtonEl === void 0 ? void 0 : menuButtonEl.id, class: CSS.menu, id: menuId, onClick: this.handleCalciteActionClick, onKeyDown: this.menuActionsContainerKeyDown, onKeyUp: this.menuActionsContainerKeyUp, ref: (el) => (this.menuEl = el), role: "menu", tabIndex: -1 },
+      h("div", { "aria-activedescendant": activeDescendantId, "aria-labelledby": menuButtonEl === null || menuButtonEl === void 0 ? void 0 : menuButtonEl.id, class: CSS.menu, id: menuId, onClick: this.handleCalciteActionClick, onKeyDown: this.menuActionsContainerKeyDown, ref: (el) => (this.menuEl = el), role: "menu", tabIndex: -1 },
         h("slot", null))));
   }
   render() {
@@ -320,12 +303,12 @@ export class ActionMenu {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "ComputedPlacement[]",
-        "resolved": "ComputedPlacement[]",
+        "original": "EffectivePlacement[]",
+        "resolved": "Placement[]",
         "references": {
-          "ComputedPlacement": {
+          "EffectivePlacement": {
             "location": "import",
-            "path": "../../utils/popper"
+            "path": "../../utils/floating-ui"
           }
         }
       },
@@ -380,7 +363,7 @@ export class ActionMenu {
         "references": {
           "OverlayPositioning": {
             "location": "import",
-            "path": "../../utils/popper"
+            "path": "../../utils/floating-ui"
           }
         }
       },
@@ -398,12 +381,12 @@ export class ActionMenu {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "PopperPlacement",
-        "resolved": "Placement | PlacementRtl | VariationRtl",
+        "original": "LogicalPlacement",
+        "resolved": "Placement | AutoPlacement | VariationPlacement | DeprecatedPlacement",
         "references": {
-          "PopperPlacement": {
+          "LogicalPlacement": {
             "location": "import",
-            "path": "../../utils/popper"
+            "path": "../../utils/floating-ui"
           }
         }
       },
@@ -412,7 +395,7 @@ export class ActionMenu {
       "docs": {
         "tags": [{
             "name": "see",
-            "text": "[PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)"
+            "text": "[LogicalPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts#L25)"
           }],
         "text": "Determines where the component will be positioned relative to the `referenceElement`."
       },
@@ -454,12 +437,17 @@ export class ActionMenu {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emits when the `open` property has changed."
+        "text": "Emits when the `open` property has changed.\n\n**Note:**: The event payload is deprecated, please use the `open` property on the component instead"
       },
       "complexType": {
-        "original": "any",
+        "original": "DeprecatedEventPayload",
         "resolved": "any",
-        "references": {}
+        "references": {
+          "DeprecatedEventPayload": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
       }
     }]; }
   static get methods() { return {

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

package/dist/collection/components/action-pad/action-pad.css

@@ -82,7 +82,7 @@
 }
 
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -108,17 +108,16 @@
 }
 
 :host([expanded]) {
-  max-width: 20vw;
+  max-inline-size: 20vw;
   background: transparent;
 }
 
 ::slotted(calcite-action-group) {
   border-width: 0px;
-  border-bottom-width: 1px;
+  border-block-end-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);
-  padding-bottom: 0px;
-  padding-top: 0px;
+  padding-block: 0px;
 }
 
 .container {
@@ -130,18 +129,18 @@
   --tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);
   --tw-shadow-colored: 0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  max-width: 15vw;
+  max-inline-size: 15vw;
 }
 
 .action-group--bottom {
   flex-grow: 1;
   justify-content: flex-end;
-  padding-bottom: 0px;
+  padding-block-end: 0px;
 }
 
 :host([layout=horizontal]) .container {
   flex-direction: row;
-  max-width: unset;
+  max-inline-size: unset;
 }
 :host([layout=horizontal]) .container .action-group--bottom {
   padding: 0px;
@@ -153,5 +152,5 @@
 }
 
 ::slotted(calcite-action-group:last-child) {
-  border-bottom-width: 0px;
+  border-block-end-width: 0px;
 }

package/dist/collection/components/action-pad/action-pad.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.86
+ * v1.0.0-beta.87
  */
 import { Component, Element, Event, Host, Prop, Watch, h, Method } from "@stencil/core";
 import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle";
@@ -269,8 +269,8 @@ export class ActionPad {
         "text": "Emits when the `expanded` property is toggled."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }

package/dist/collection/components/action-pad/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.86
+ * v1.0.0-beta.87
  */
 export const CSS = {
   actionGroupBottom: "action-group--bottom",

package/dist/collection/components/alert/alert.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]) {
@@ -106,8 +106,7 @@
   line-height: 1.375;
 }
 :host([scale=s]) .alert-queue-count {
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
+  margin-inline: 0.5rem;
 }
 :host([scale=s]) .container {
   --calcite-alert-min-height: 3.5rem;
@@ -137,8 +136,7 @@
   line-height: 1.375;
 }
 :host([scale=m]) .alert-queue-count {
-  margin-left: 0.75rem;
-  margin-right: 0.75rem;
+  margin-inline: 0.75rem;
 }
 :host([scale=m]) .container {
   --calcite-alert-min-height: 4.1875rem;
@@ -151,7 +149,7 @@
 }
 :host([scale=l]) slot[name=title]::slotted(*), 
 :host([scale=l]) *::slotted([slot=title]) {
-  margin-bottom: 0.25rem;
+  margin-block-end: 0.25rem;
   font-size: var(--calcite-font-size-1);
   line-height: 1.375;
 }
@@ -166,8 +164,7 @@
   line-height: 1.375;
 }
 :host([scale=l]) .alert-queue-count {
-  margin-left: 1rem;
-  margin-right: 1rem;
+  margin-inline: 1rem;
 }
 :host([scale=l]) .container {
   --calcite-alert-min-height: 5.625rem;
@@ -180,10 +177,8 @@
 :host .container {
   pointer-events: none;
   position: fixed;
-  margin-top: 0px;
-  margin-bottom: 0px;
-  margin-left: auto;
-  margin-right: auto;
+  margin-block: 0px;
+  margin-inline: auto;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -193,14 +188,13 @@
   --tw-shadow-colored: 0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   border-radius: var(--calcite-border-radius);
-  border-top: 0px solid transparent;
-  border-left: 1px solid var(--calcite-ui-border-3);
-  border-right: 1px solid var(--calcite-ui-border-3);
-  border-bottom: 1px solid var(--calcite-ui-border-3);
-  min-height: var(--calcite-alert-min-height);
-  width: var(--calcite-alert-width);
-  max-width: calc(100% - (var(--calcite-alert-edge-distance) * 2 + 2px));
-  max-height: 0;
+  border-block-start: 0px solid transparent;
+  border-inline: 1px solid var(--calcite-ui-border-3);
+  border-block-end: 1px solid var(--calcite-ui-border-3);
+  min-block-size: var(--calcite-alert-min-height);
+  inline-size: var(--calcite-alert-width);
+  max-inline-size: calc(100% - (var(--calcite-alert-edge-distance) * 2 + 2px));
+  max-block-size: 0;
   z-index: 101;
   transition: var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out;
 }
@@ -232,7 +226,7 @@
 
 .container {
   display: flex;
-  width: 100%;
+  inline-size: 100%;
   align-items: center;
   justify-content: center;
 }
@@ -246,8 +240,8 @@
 }
 
 :host([active]) .container:not(.queued) {
-  max-height: 100%;
-  border-top-width: 2px;
+  max-block-size: 100%;
+  border-block-start-width: 2px;
   opacity: 1;
   pointer-events: initial;
 }
@@ -285,16 +279,16 @@ slot[name=link]::slotted(*),
 
 .alert-content {
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
-  padding: var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-large);
+  padding-inline: var(--calcite-alert-spacing-token-large);
   flex: 0 0 auto;
   overflow-wrap: break-word;
   background-color: var(--calcite-ui-foreground-1);
   flex: 1 1 auto;
-  min-width: 0;
+  min-inline-size: 0;
   padding-block: var(--calcite-alert-spacing-token-small);
   padding-inline: 0 var(--calcite-alert-spacing-token-small);
-  border-bottom-left-radius: var(--calcite-border-radius);
-  border-bottom-right-radius: var(--calcite-border-radius);
+  border-end-start-radius: var(--calcite-border-radius);
+  border-end-end-radius: var(--calcite-border-radius);
 }
 .alert-content:first-of-type:not(:only-child) {
   padding-inline-start: var(--calcite-alert-spacing-token-large);
@@ -305,27 +299,27 @@ slot[name=link]::slotted(*),
 
 .alert-icon {
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
-  padding: var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-large);
+  padding-block: var(--calcite-alert-spacing-token-small);
+  padding-inline: var(--calcite-alert-spacing-token-large);
   flex: 0 0 auto;
   display: flex;
   align-items: center;
   align-self: stretch;
   background-color: var(--calcite-ui-foreground-1);
-  padding-top: 0px;
-  padding-bottom: 0px;
+  padding-block: 0px;
 }
 
 .alert-close {
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
-  padding: var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-large);
+  padding-block: var(--calcite-alert-spacing-token-small);
+  padding-inline: var(--calcite-alert-spacing-token-large);
   flex: 0 0 auto;
   cursor: pointer;
   align-self: stretch;
   overflow: hidden;
   border-style: none;
   background-color: var(--calcite-ui-foreground-1);
-  padding-top: 0px;
-  padding-bottom: 0px;
+  padding-block: 0px;
   color: var(--calcite-ui-text-3);
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -353,9 +347,8 @@ slot[name=link]::slotted(*),
   color: var(--calcite-ui-text-2);
   opacity: 0;
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
-  border-left: 0px solid transparent;
-  border-right: 0px solid transparent;
-  border-top-right-radius: 0;
+  border-inline: 0px solid transparent;
+  border-start-end-radius: 0;
 }
 .alert-queue-count.active {
   visibility: visible;
@@ -368,21 +361,20 @@ slot[name=link]::slotted(*),
 
 .alert-dismiss-progress {
   position: absolute;
-  left: 0px;
-  right: 0px;
+  inset-inline: 0px;
   display: block;
-  width: 100%;
+  inline-size: 100%;
   overflow: hidden;
-  top: -2px;
-  height: 2px;
+  inset-block-start: -2px;
+  block-size: 2px;
   z-index: 103;
   border-radius: var(--calcite-border-radius) var(--calcite-border-radius) 0 0;
 }
 .alert-dismiss-progress:after {
   position: absolute;
-  top: 0px;
+  inset-block-start: 0px;
   display: block;
-  height: 2px;
+  block-size: 2px;
   content: "";
   background-color: var(--calcite-alert-dismiss-progress-background);
   z-index: 104;
@@ -390,28 +382,28 @@ slot[name=link]::slotted(*),
 }
 
 :host([color=blue]) .container {
-  border-top-color: var(--calcite-ui-info);
+  border-block-start-color: var(--calcite-ui-info);
 }
 :host([color=blue]) .container .alert-icon {
   color: var(--calcite-ui-info);
 }
 
 :host([color=red]) .container {
-  border-top-color: var(--calcite-ui-danger);
+  border-block-start-color: var(--calcite-ui-danger);
 }
 :host([color=red]) .container .alert-icon {
   color: var(--calcite-ui-danger);
 }
 
 :host([color=yellow]) .container {
-  border-top-color: var(--calcite-ui-warning);
+  border-block-start-color: var(--calcite-ui-warning);
 }
 :host([color=yellow]) .container .alert-icon {
   color: var(--calcite-ui-warning);
 }
 
 :host([color=green]) .container {
-  border-top-color: var(--calcite-ui-success);
+  border-block-start-color: var(--calcite-ui-success);
 }
 :host([color=green]) .container .alert-icon {
   color: var(--calcite-ui-success);
@@ -431,11 +423,11 @@ slot[name=link]::slotted(*),
 
 @keyframes dismissProgress {
   0% {
-    width: 0px;
+    inline-size: 0px;
     opacity: 0.75;
   }
   100% {
-    width: 100%;
+    inline-size: 100%;
     opacity: 1;
   }
 }