@esri/calcite-components 1.0.0-next.321 → 1.0.0-next.325

package/dist/collection/components/calcite-panel/calcite-panel.js

@@ -4,8 +4,7 @@
  */
 import { Component, Element, Event, Method, Prop, Watch, h, Fragment } from "@stencil/core";
 import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
-import { getElementDir, getElementStyleDir, getSlotted } from "../../utils/dom";
-import { CSS_UTILITY } from "../../utils/resources";
+import { getElementDir, getSlotted } from "../../utils/dom";
 import { CalciteHeading } from "../functional/CalciteHeading";
 import { SLOTS as ACTION_MENU_SLOTS } from "../calcite-action-menu/resources";
 /**
@@ -106,7 +105,7 @@ export class CalcitePanel {
   // --------------------------------------------------------------------------
   renderBackButton() {
     const { el } = this;
-    const rtl = getElementStyleDir(el) === "rtl";
+    const rtl = getElementDir(el) === "rtl";
     const { showBackButton, intlBack, backButtonClick } = this;
     const label = intlBack || TEXT.back;
     const icon = rtl ? ICONS.backRight : ICONS.backLeft;
@@ -200,12 +199,8 @@ export class CalcitePanel {
       h("slot", { name: SLOTS.fab })));
   }
   render() {
-    const { dismissed, disabled, dismissible, el, loading, panelKeyDownHandler } = this;
-    const rtl = getElementDir(el) === "rtl";
-    const panelNode = (h("article", { "aria-busy": loading.toString(), class: {
-        [CSS.container]: true,
-        [CSS_UTILITY.rtl]: rtl
-      }, hidden: dismissible && dismissed, onKeyDown: panelKeyDownHandler, ref: this.setContainerRef, tabIndex: dismissible ? 0 : -1 },
+    const { dismissed, disabled, dismissible, loading, panelKeyDownHandler } = this;
+    const panelNode = (h("article", { "aria-busy": loading.toString(), class: CSS.container, hidden: dismissible && dismissed, onKeyDown: panelKeyDownHandler, ref: this.setContainerRef, tabIndex: dismissible ? 0 : -1 },
       this.renderHeaderNode(),
       this.renderContent(),
       this.renderFooterSlottedContent() || this.renderFooterActions()));

package/dist/collection/components/calcite-pick-list/calcite-pick-list.css

@@ -47,13 +47,17 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-internal-animation-timing-factor: var(--calcite-animation-timing-factor, 1);
+  --calcite-internal-animation-timing: calc(150ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-quick: calc(100ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-animation-timing-factor));
 }
 
 .calcite-animate {
   opacity: 0;
   animation-fill-mode: both;
-  animation-duration: var(--calcite-animation-timing);
+  animation-duration: var(--calcite-internal-animation-timing);
 }
 
 .calcite-animate__in {

package/dist/collection/components/calcite-pick-list/shared-list-render.js

@@ -15,14 +15,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { h, Host } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";
-import { getElementDir } from "../../utils/dom";
 export const List = (_a) => {
-  var { props: { disabled, loading, filterEnabled, dataForFilter, handleFilter, filterPlaceholder, el, setFilterEl } } = _a, rest = __rest(_a, ["props"]);
+  var { props: { disabled, loading, filterEnabled, dataForFilter, handleFilter, filterPlaceholder, setFilterEl } } = _a, rest = __rest(_a, ["props"]);
   const defaultSlot = h("slot", null);
   return (h(Host, Object.assign({ "aria-busy": loading.toString(), "aria-disabled": disabled.toString(), role: "menu" }, rest),
     h("section", null,
       h("header", { class: { [CSS.sticky]: true } },
-        filterEnabled ? (h("calcite-filter", { "aria-label": filterPlaceholder, dir: getElementDir(el), disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: handleFilter, placeholder: filterPlaceholder, ref: setFilterEl })) : null,
+        filterEnabled ? (h("calcite-filter", { "aria-label": filterPlaceholder, disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: handleFilter, placeholder: filterPlaceholder, ref: setFilterEl })) : null,
         h("slot", { name: SLOTS.menuActions })),
       loading || disabled ? h("calcite-scrim", { loading: loading }) : null,
       defaultSlot)));

package/dist/collection/components/calcite-pick-list-group/calcite-pick-list-group.css

@@ -47,13 +47,17 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-internal-animation-timing-factor: var(--calcite-animation-timing-factor, 1);
+  --calcite-internal-animation-timing: calc(150ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-quick: calc(100ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-animation-timing-factor));
 }
 
 .calcite-animate {
   opacity: 0;
   animation-fill-mode: both;
-  animation-duration: var(--calcite-animation-timing);
+  animation-duration: var(--calcite-internal-animation-timing);
 }
 
 .calcite-animate__in {
@@ -155,10 +159,5 @@ h3.heading {
 }
 
 .container--indented {
-  margin-left: 1.5rem;
-}
-
-.calcite--rtl.container--indented {
-  margin-left: 0;
-  margin-right: 1.5rem;
+  margin-inline-start: 1.5rem;
 }

package/dist/collection/components/calcite-pick-list-group/calcite-pick-list-group.js

@@ -4,9 +4,8 @@
  */
 import { Component, Element, Prop, h, Fragment } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";
-import { CSS_UTILITY } from "../../utils/resources";
 import { HEADING_LEVEL } from "./resources";
-import { getElementDir, getSlotted } from "../../utils/dom";
+import { getSlotted } from "../../utils/dom";
 import { CalciteHeading, constrainHeadingLevel } from "../functional/CalciteHeading";
 /**
  * @slot - A slot for adding `calcite-pick-list-item` elements.
@@ -20,12 +19,10 @@ export class CalcitePickListGroup {
   render() {
     var _a;
     const { el, groupTitle, headingLevel } = this;
-    const rtl = getElementDir(el) === "rtl";
     const hasParentItem = getSlotted(el, SLOTS.parentItem) !== null;
     const sectionClasses = {
       [CSS.container]: true,
-      [CSS.indented]: hasParentItem,
-      [CSS_UTILITY.rtl]: rtl
+      [CSS.indented]: hasParentItem
     };
     const title = groupTitle;
     const parentLevel = (_a = el.closest("calcite-pick-list")) === null || _a === void 0 ? void 0 : _a.headingLevel;

package/dist/collection/components/calcite-pick-list-item/calcite-pick-list-item.css

@@ -49,13 +49,17 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-internal-animation-timing-factor: var(--calcite-animation-timing-factor, 1);
+  --calcite-internal-animation-timing: calc(150ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-quick: calc(100ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-animation-timing-factor));
 }
 
 .calcite-animate {
   opacity: 0;
   animation-fill-mode: both;
-  animation-duration: var(--calcite-animation-timing);
+  animation-duration: var(--calcite-internal-animation-timing);
 }
 
 .calcite-animate__in {
@@ -210,10 +214,5 @@
 }
 
 .actions--start ~ .label {
-  padding-left: 0.25rem;
-}
-
-.calcite--rtl .actions--start ~ .label {
-  padding-left: unset;
-  padding-right: 0.25rem;
+  padding-inline-start: 0.25rem;
 }

package/dist/collection/components/calcite-popover/calcite-popover.css

@@ -47,13 +47,17 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-internal-animation-timing-factor: var(--calcite-animation-timing-factor, 1);
+  --calcite-internal-animation-timing: calc(150ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-quick: calc(100ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-animation-timing-factor));
 }
 
 .calcite-animate {
   opacity: 0;
   animation-fill-mode: both;
-  animation-duration: var(--calcite-animation-timing);
+  animation-duration: var(--calcite-internal-animation-timing);
 }
 
 .calcite-animate__in {
@@ -231,10 +235,6 @@
   width: 100%;
 }
 
-.calcite--rtl .close-button {
-  border-radius: 0.25rem 0 0 0.25rem;
-}
-
 ::slotted(calcite-panel),
 ::slotted(calcite-flow) {
   height: 100%;

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

@@ -6,8 +6,7 @@ import { Component, Element, Event, forceUpdate, Host, Method, Prop, State, Watc
 import { CSS, ARIA_CONTROLS, ARIA_EXPANDED, HEADING_LEVEL, POPOVER_REFERENCE, TEXT } from "./resources";
 import { defaultOffsetDistance, createPopper, updatePopper, CSS as PopperCSS } from "../../utils/popper";
 import { guid } from "../../utils/guid";
-import { getElementDir, queryElementRoots } from "../../utils/dom";
-import { CSS_UTILITY } from "../../utils/resources";
+import { queryElementRoots } from "../../utils/dom";
 import { CalciteHeading } from "../functional/CalciteHeading";
 /**
  * @slot - A slot for adding custom content.
@@ -253,14 +252,12 @@ export class CalcitePopover {
       this.renderCloseButton())) : null;
   }
   render() {
-    const { effectiveReferenceElement, el, heading, label, open, disablePointer } = this;
-    const rtl = getElementDir(el) === "rtl";
+    const { effectiveReferenceElement, heading, label, open, disablePointer } = this;
     const displayed = effectiveReferenceElement && open;
     const hidden = !displayed;
     const arrowNode = !disablePointer ? (h("div", { class: CSS.arrow, ref: (arrowEl) => (this.arrowEl = arrowEl) })) : null;
     return (h(Host, { "aria-hidden": hidden.toString(), "aria-label": label, "calcite-hydrated-hidden": hidden, id: this.getId(), role: "dialog" },
       h("div", { class: {
-          [CSS_UTILITY.rtl]: rtl,
           [PopperCSS.animation]: true,
           [PopperCSS.animationActive]: displayed
         }, onTransitionEnd: this.transitionEnd },

package/dist/collection/components/calcite-popover-manager/calcite-popover-manager.css

@@ -47,13 +47,17 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-internal-animation-timing-factor: var(--calcite-animation-timing-factor, 1);
+  --calcite-internal-animation-timing: calc(150ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-quick: calc(100ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-animation-timing-factor));
 }
 
 .calcite-animate {
   opacity: 0;
   animation-fill-mode: both;
-  animation-duration: var(--calcite-animation-timing);
+  animation-duration: var(--calcite-internal-animation-timing);
 }
 
 .calcite-animate__in {

package/dist/collection/components/calcite-progress/calcite-progress.css

@@ -47,13 +47,17 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-internal-animation-timing-factor: var(--calcite-animation-timing-factor, 1);
+  --calcite-internal-animation-timing: calc(150ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-quick: calc(100ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-animation-timing-factor));
 }
 
 .calcite-animate {
   opacity: 0;
   animation-fill-mode: both;
-  animation-duration: var(--calcite-animation-timing);
+  animation-duration: var(--calcite-internal-animation-timing);
 }
 
 .calcite-animate__in {

package/dist/collection/components/calcite-radio-button/calcite-radio-button.css

@@ -47,13 +47,17 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-internal-animation-timing-factor: var(--calcite-animation-timing-factor, 1);
+  --calcite-internal-animation-timing: calc(150ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-quick: calc(100ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-animation-timing-factor));
 }
 
 .calcite-animate {
   opacity: 0;
   animation-fill-mode: both;
-  animation-duration: var(--calcite-animation-timing);
+  animation-duration: var(--calcite-internal-animation-timing);
 }
 
 .calcite-animate__in {
@@ -95,10 +99,79 @@
   outline-offset: 2px;
 }
 
+:host .radio {
+  background-color: var(--calcite-ui-foreground-1);
+  border-radius: 9999px;
+  cursor: pointer;
+  transition-property: all;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: inset 0 0 0 1px var(--calcite-ui-border-input);
+}
+
+:host([hovered]) .radio,
+:host(:not([checked])[focused]) .radio {
+  box-shadow: inset 0 0 0 2px var(--calcite-ui-brand);
+}
+
 :host([disabled]) {
   cursor: pointer;
 }
 
+:host([disabled]) .radio {
+  cursor: default;
+  opacity: var(--calcite-ui-opacity-disabled);
+}
+
+:host([hovered][disabled]) .radio {
+  box-shadow: inset 0 0 0 1px var(--calcite-ui-border-input);
+}
+
+:host([scale=s]) {
+  --calcite-radio-size: var(--calcite-font-size--2);
+}
+
+:host([scale=m]) {
+  --calcite-radio-size: var(--calcite-font-size--1);
+}
+
+:host([scale=l]) {
+  --calcite-radio-size: var(--calcite-font-size-0);
+}
+
+.radio {
+  height: var(--calcite-radio-size);
+  max-width: var(--calcite-radio-size);
+  min-width: var(--calcite-radio-size);
+}
+
+:host([scale=s][checked]) .radio,
+:host([hovered][scale=s][checked][disabled]) .radio {
+  box-shadow: inset 0 0 0 4px var(--calcite-ui-brand);
+}
+
+:host([scale=s][focused][checked]) .radio {
+  box-shadow: inset 0 0 0 4px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);
+}
+
+:host([scale=m][checked]) .radio,
+:host([hovered][scale=m][checked][disabled]) .radio {
+  box-shadow: inset 0 0 0 5px var(--calcite-ui-brand);
+}
+
+:host([scale=m][focused][checked]) .radio {
+  box-shadow: inset 0 0 0 5px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);
+}
+
+:host([scale=l][checked]) .radio,
+:host([hovered][scale=l][checked][disabled]) .radio {
+  box-shadow: inset 0 0 0 6px var(--calcite-ui-brand);
+}
+
+:host([scale=l][focused][checked]) .radio {
+  box-shadow: inset 0 0 0 6px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);
+}
+
 ::slotted(input[slot=hidden-form-input]) {
   bottom: 0 !important;
   left: 0 !important;

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

@@ -4,7 +4,7 @@
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
-import { focusElement, getElementStyleDir } from "../../utils/dom";
+import { focusElement, getElementDir } from "../../utils/dom";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { HiddenFormInputSlot, connectForm, disconnectForm } from "../../utils/form";
 import { CSS } from "./resources";
@@ -78,7 +78,7 @@ export class CalciteRadioButton {
         return;
       }
       let adjustedKey = key;
-      if (getElementStyleDir(el) === "rtl") {
+      if (getElementDir(el) === "rtl") {
         if (key === "ArrowRight") {
           adjustedKey = "ArrowLeft";
         }
@@ -234,7 +234,7 @@ export class CalciteRadioButton {
   render() {
     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: this.checked || this.isDefaultSelectable() ? 0 : -1 },
-        h("calcite-radio", { checked: this.checked, disabled: this.disabled, focused: this.focused, hidden: this.hidden, hovered: this.hovered, scale: this.scale })),
+        h("div", { class: "radio" })),
       h(HiddenFormInputSlot, { component: this })));
   }
   static get is() { return "calcite-radio-button"; }

package/dist/collection/components/calcite-radio-button-group/calcite-radio-button-group.css

@@ -47,13 +47,17 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-internal-animation-timing-factor: var(--calcite-animation-timing-factor, 1);
+  --calcite-internal-animation-timing: calc(150ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-quick: calc(100ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-animation-timing-factor));
 }
 
 .calcite-animate {
   opacity: 0;
   animation-fill-mode: both;
-  animation-duration: var(--calcite-animation-timing);
+  animation-duration: var(--calcite-internal-animation-timing);
 }
 
 .calcite-animate__in {

package/dist/collection/components/calcite-radio-group/calcite-radio-group.css

@@ -47,13 +47,17 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-internal-animation-timing-factor: var(--calcite-animation-timing-factor, 1);
+  --calcite-internal-animation-timing: calc(150ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-quick: calc(100ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-animation-timing-factor));
 }
 
 .calcite-animate {
   opacity: 0;
   animation-fill-mode: both;
-  animation-duration: var(--calcite-animation-timing);
+  animation-duration: var(--calcite-internal-animation-timing);
 }
 
 .calcite-animate__in {

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

@@ -3,7 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Event, h, Listen, Element, Prop, Watch, Host, Build, Method } from "@stencil/core";
-import { getElementStyleDir } from "../../utils/dom";
+import { getElementDir } from "../../utils/dom";
 import { connectLabel, disconnectLabel } from "../../utils/label";
 import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 /**
@@ -108,7 +108,7 @@ export class CalciteRadioGroup {
       return;
     }
     let adjustedKey = key;
-    if (getElementStyleDir(el) === "rtl") {
+    if (getElementDir(el) === "rtl") {
       if (key === "ArrowRight") {
         adjustedKey = "ArrowLeft";
       }

package/dist/collection/components/calcite-radio-group-item/calcite-radio-group-item.css

@@ -47,13 +47,17 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-internal-animation-timing-factor: var(--calcite-animation-timing-factor, 1);
+  --calcite-internal-animation-timing: calc(150ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-quick: calc(100ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-animation-timing-factor));
 }
 
 .calcite-animate {
   opacity: 0;
   animation-fill-mode: both;
-  animation-duration: var(--calcite-animation-timing);
+  animation-duration: var(--calcite-internal-animation-timing);
 }
 
 .calcite-animate__in {

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

@@ -2,8 +2,8 @@
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
-import { Component, h, Prop, Element, Event, Host, Watch, State } from "@stencil/core";
-import { getElementDir, getElementProp } from "../../utils/dom";
+import { Component, h, Prop, Element, Event, Host, Watch } from "@stencil/core";
+import { getElementProp } from "../../utils/dom";
 import { SLOTS, CSS } from "./resources";
 import { createObserver } from "../../utils/observers";
 export class CalciteRadioGroupItem {
@@ -44,19 +44,12 @@ export class CalciteRadioGroupItem {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
-  componentWillLoad() {
-    // only use default slot content in browsers that support shadow dom
-    // or if ie11 has no label provided (#374)
-    const label = this.el.querySelector("label");
-    this.useFallback = !label || label.textContent === "";
-  }
   render() {
-    const { checked, useFallback, value } = this;
-    const dir = getElementDir(this.el);
+    const { checked, value } = this;
     const scale = getElementProp(this.el, "scale", "m");
     const appearance = getElementProp(this.el, "appearance", "solid");
     const layout = getElementProp(this.el, "layout", "horizontal");
-    const iconEl = (h("calcite-icon", { class: CSS.radioGroupItemIcon, dir: dir, flipRtl: this.iconFlipRtl, icon: this.icon, scale: "s" }));
+    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" },
       h("label", { class: {
           "label--scale-s": scale === "s",
@@ -66,7 +59,7 @@ export class CalciteRadioGroupItem {
           "label--outline": appearance === "outline"
         } },
         this.icon && this.iconPosition === "start" ? iconEl : null,
-        h("slot", null, useFallback ? value : ""),
+        h("slot", null, value),
         h("slot", { name: SLOTS.input }),
         this.icon && this.iconPosition === "end" ? iconEl : null)));
   }
@@ -196,9 +189,6 @@ export class CalciteRadioGroupItem {
       "reflect": false
     }
   }; }
-  static get states() { return {
-    "useFallback": {}
-  }; }
   static get events() { return [{
       "method": "calciteRadioGroupItemChange",
       "name": "calciteRadioGroupItemChange",

package/dist/collection/components/calcite-rating/calcite-rating.css

@@ -47,13 +47,17 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-internal-animation-timing-factor: var(--calcite-animation-timing-factor, 1);
+  --calcite-internal-animation-timing: calc(150ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-quick: calc(100ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-animation-timing-factor));
 }
 
 .calcite-animate {
   opacity: 0;
   animation-fill-mode: both;
-  animation-duration: var(--calcite-animation-timing);
+  animation-duration: var(--calcite-internal-animation-timing);
 }
 
 .calcite-animate__in {
@@ -133,12 +137,7 @@
 
 .wrapper {
   display: inline-block;
-  margin-right: var(--calcite-rating-spacing-unit);
-}
-
-.calcite--rtl .wrapper {
-  margin-right: 0;
-  margin-left: var(--calcite-rating-spacing-unit);
+  margin-inline-end: var(--calcite-rating-spacing-unit);
 }
 
 .star {
@@ -183,13 +182,8 @@
   overflow: hidden;
   pointer-events: none;
   top: 0;
-  left: 0;
   transition: 150ms ease-in-out;
-}
-
-.calcite--rtl .fraction {
-  right: 0;
-  left: auto;
+  inset-inline-start: 0;
 }
 
 calcite-chip {
@@ -207,12 +201,7 @@ calcite-chip {
 }
 
 .number--count:not(:first-child) {
-  margin-left: var(--calcite-rating-spacing-unit);
-}
-
-.calcite--rtl .number--count:not(:first-child) {
-  margin-left: 0;
-  margin-right: var(--calcite-rating-spacing-unit);
+  margin-inline-start: var(--calcite-rating-spacing-unit);
 }
 
 .visually-hidden {

package/dist/collection/components/calcite-rating/calcite-rating.js

@@ -3,12 +3,10 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Event, Fragment, h, Listen, Method, Prop, State } from "@stencil/core";
-import { getElementDir } from "../../utils/dom";
 import { guid } from "../../utils/guid";
 import { connectLabel, disconnectLabel } from "../../utils/label";
 import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 import { TEXT } from "./resources";
-import { CSS_UTILITY } from "../../utils/resources";
 export class CalciteRating {
   constructor() {
     // --------------------------------------------------------------------------
@@ -92,12 +90,11 @@ export class CalciteRating {
   }
   render() {
     const { intlRating, showChip, scale, count, average } = this;
-    const dir = getElementDir(this.el);
     return (h(Fragment, null,
-      h("fieldset", { class: { fieldset: true, [CSS_UTILITY.rtl]: dir === "rtl" }, onBlur: () => (this.hoverValue = null), onMouseLeave: () => (this.hoverValue = null), onTouchEnd: () => (this.hoverValue = null) },
+      h("fieldset", { class: "fieldset", onBlur: () => (this.hoverValue = null), onMouseLeave: () => (this.hoverValue = null), onTouchEnd: () => (this.hoverValue = null) },
         h("legend", { class: "visually-hidden" }, intlRating),
         this.renderStars()),
-      (count || average) && showChip ? (h("calcite-chip", { class: { [CSS_UTILITY.rtl]: dir === "rtl" }, dir: dir, scale: scale, value: count === null || count === void 0 ? void 0 : count.toString() },
+      (count || average) && showChip ? (h("calcite-chip", { scale: scale, value: count === null || count === void 0 ? void 0 : count.toString() },
         !!average && h("span", { class: "number--average" }, average.toString()),
         !!count && h("span", { class: "number--count" },
           "(", count === null || count === void 0 ? void 0 :

package/dist/collection/components/calcite-scrim/calcite-scrim.css

@@ -47,13 +47,17 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-internal-animation-timing-factor: var(--calcite-animation-timing-factor, 1);
+  --calcite-internal-animation-timing: calc(150ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-quick: calc(100ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-animation-timing-factor));
 }
 
 .calcite-animate {
   opacity: 0;
   animation-fill-mode: both;
-  animation-duration: var(--calcite-animation-timing);
+  animation-duration: var(--calcite-internal-animation-timing);
 }
 
 .calcite-animate__in {