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

package/dist/collection/components/calcite-date-picker-month/calcite-date-picker-month.js

@@ -4,7 +4,6 @@
  */
 import { Component, Element, Prop, Host, Event, h, Listen } from "@stencil/core";
 import { inRange, sameDate, dateFromRange } from "../../utils/date";
-import { getElementDir } from "../../utils/dom";
 export class CalciteDatePickerMonth {
   constructor() {
     /** Date currently active.*/
@@ -98,20 +97,19 @@ export class CalciteDatePickerMonth {
     const curMonDays = this.getCurrentMonthDays(month, year);
     const prevMonDays = this.getPrevMonthdays(month, year, startOfWeek);
     const nextMonDays = this.getNextMonthDays(month, year, startOfWeek);
-    const dir = getElementDir(this.el);
     const days = [
       ...prevMonDays.map((day) => {
         const date = new Date(year, month - 1, day);
-        return this.renderDateDay(false, day, dir, date);
+        return this.renderDateDay(false, day, date);
       }),
       ...curMonDays.map((day) => {
         const date = new Date(year, month, day);
         const active = sameDate(date, this.activeDate);
-        return this.renderDateDay(active, day, dir, date, true, true);
+        return this.renderDateDay(active, day, date, true, true);
       }),
       ...nextMonDays.map((day) => {
         const date = new Date(year, month + 1, day);
-        return this.renderDateDay(false, day, dir, date);
+        return this.renderDateDay(false, day, date);
       })
     ];
     const weeks = [];
@@ -224,7 +222,7 @@ export class CalciteDatePickerMonth {
   /**
    * Render calcite-date-picker-day
    */
-  renderDateDay(active, day, dir, date, currentMonth, ref) {
+  renderDateDay(active, day, date, currentMonth, ref) {
     var _a;
     const isFocusedOnStart = this.isFocusedOnStart();
     const isHoverInRange = this.isHoverInRange() ||
@@ -234,7 +232,7 @@ export class CalciteDatePickerMonth {
         "hover--outside-range": this.startDate && !isHoverInRange,
         "focused--start": isFocusedOnStart,
         "focused--end": !isFocusedOnStart
-      }, currentMonth: currentMonth, day: day, dir: dir, disabled: !inRange(date, this.min, this.max), endOfRange: this.isEndOfRange(date), highlighted: this.betweenSelectedRange(date), key: date.toDateString(), localeData: this.localeData, onCalciteDayHover: this.dayHover, onCalciteDaySelect: this.daySelect, range: !!this.startDate && !!this.endDate && !sameDate(this.startDate, this.endDate), rangeHover: this.isRangeHover(date), ref: (el) => {
+      }, currentMonth: currentMonth, day: day, disabled: !inRange(date, this.min, this.max), endOfRange: this.isEndOfRange(date), highlighted: this.betweenSelectedRange(date), key: date.toDateString(), localeData: this.localeData, onCalciteDayHover: this.dayHover, onCalciteDaySelect: this.daySelect, range: !!this.startDate && !!this.endDate && !sameDate(this.startDate, this.endDate), rangeHover: this.isRangeHover(date), ref: (el) => {
         // when moving via keyboard, focus must be updated on active date
         if (ref && active && this.activeFocus) {
           el === null || el === void 0 ? void 0 : el.focus();

package/dist/collection/components/calcite-date-picker-month-header/calcite-date-picker-month-header.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-date-picker-month-header/calcite-date-picker-month-header.js

@@ -3,7 +3,6 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Prop, Event, h, State, Watch, Fragment } from "@stencil/core";
-import { getElementDir } from "../../utils/dom";
 import { dateFromRange, nextMonth, prevMonth, localizeNumber, parseNumber, getOrder } from "../../utils/date";
 import { CalciteHeading } from "../functional/CalciteHeading";
 export class CalciteDatePickerMonthHeader {
@@ -68,10 +67,9 @@ export class CalciteDatePickerMonthHeader {
     this.setNextPrevMonthDates();
   }
   render() {
-    const dir = getElementDir(this.el);
-    return (h("div", { class: "header", dir: dir }, this.renderContent(dir)));
+    return h("div", { class: "header" }, this.renderContent());
   }
-  renderContent(dir) {
+  renderContent() {
     var _a;
     if (!this.activeDate || !this.localeData) {
       return null;
@@ -86,7 +84,7 @@ export class CalciteDatePickerMonthHeader {
     const suffix = (_a = this.localeData.year) === null || _a === void 0 ? void 0 : _a.suffix;
     return (h(Fragment, null,
       h("a", { "aria-disabled": (this.prevMonthDate.getMonth() === activeMonth).toString(), "aria-label": this.intlPrevMonth, class: "chevron", href: "#", onClick: this.prevMonthClick, onKeyDown: this.prevMonthKeydown, role: "button", tabindex: this.prevMonthDate.getMonth() === activeMonth ? -1 : 0 },
-        h("calcite-icon", { dir: dir, "flip-rtl": true, icon: "chevron-left", scale: iconScale })),
+        h("calcite-icon", { "flip-rtl": true, icon: "chevron-left", scale: iconScale })),
       h("div", { class: { text: true, "text--reverse": reverse } },
         h(CalciteHeading, { class: "month", level: this.headingLevel }, localizedMonth),
         h("span", { class: "year-wrap" },
@@ -98,7 +96,7 @@ export class CalciteDatePickerMonthHeader {
             h("span", { "aria-hidden": "true", class: "suffix__invisible" }, localizedYear),
             " " + suffix)))),
       h("a", { "aria-disabled": (this.nextMonthDate.getMonth() === activeMonth).toString(), "aria-label": this.intlNextMonth, class: "chevron", href: "#", onClick: this.nextMonthClick, onKeyDown: this.nextMonthKeydown, role: "button", tabindex: this.nextMonthDate.getMonth() === activeMonth ? -1 : 0 },
-        h("calcite-icon", { dir: dir, "flip-rtl": true, icon: "chevron-right", scale: iconScale }))));
+        h("calcite-icon", { "flip-rtl": true, icon: "chevron-right", scale: iconScale }))));
   }
   setNextPrevMonthDates() {
     if (!this.activeDate) {

package/dist/collection/components/calcite-dropdown/calcite-dropdown.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 {
@@ -174,31 +178,4 @@
 
 :host([width=l]) {
   --calcite-dropdown-width: 16rem;
-}
-
-:host([scale=s]) {
-  --calcite-dropdown-group-padding: 0.5rem 0;
-  --calcite-dropdown-item-padding: 0.25rem 0.75rem 0.25rem 1.5rem;
-}
-
-:host([scale=m]) {
-  --calcite-dropdown-group-padding: 0.5rem 0;
-  --calcite-dropdown-item-padding: 0.5rem 0.75rem 0.5rem 1.5rem;
-}
-
-:host([scale=l]) {
-  --calcite-dropdown-group-padding: 0.75rem 0;
-  --calcite-dropdown-item-padding: 0.5rem 0.75rem 0.5rem 1.5rem;
-}
-
-:host([scale=s]) .calcite--rtl {
-  --calcite-dropdown-item-padding: 0.25rem 1.5rem 0.25rem 0.75rem;
-}
-
-:host([scale=m]) .calcite--rtl {
-  --calcite-dropdown-item-padding: 0.5rem 1.5rem 0.5rem 0.75rem;
-}
-
-:host([scale=l]) .calcite--rtl {
-  --calcite-dropdown-item-padding: 0.5rem 1.5rem 0.5rem 0.75rem;
 }

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

@@ -3,10 +3,9 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
-import { focusElement, getElementDir } from "../../utils/dom";
+import { focusElement } from "../../utils/dom";
 import { createPopper, CSS as PopperCSS, updatePopper } from "../../utils/popper";
 import { DefaultDropdownPlacement, SLOTS } from "./resources";
-import { CSS_UTILITY } from "../../utils/resources";
 import { createObserver } from "../../utils/observers";
 /**
  * @slot - A slot for adding `calcite-dropdown-group`s or `calcite-dropdown-item`s.
@@ -157,9 +156,8 @@ export class CalciteDropdown {
   }
   render() {
     const { active } = this;
-    const dir = getElementDir(this.el);
     return (h(Host, { tabIndex: this.disabled ? -1 : null },
-      h("div", { class: { ["calcite-dropdown-trigger-container"]: true, [CSS_UTILITY.rtl]: dir === "rtl" }, onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl },
+      h("div", { class: "calcite-dropdown-trigger-container", onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl },
         h("slot", { "aria-expanded": active.toString(), "aria-haspopup": "true", name: SLOTS.dropdownTrigger })),
       h("div", { "aria-hidden": (!active).toString(), class: "calcite-dropdown-wrapper", ref: this.setMenuEl },
         h("div", { class: {

package/dist/collection/components/calcite-dropdown-group/calcite-dropdown-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-dropdown-group/calcite-dropdown-group.js

@@ -3,7 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Event, h, Host, Listen, Prop } from "@stencil/core";
-import { getElementDir, getElementProp } from "../../utils/dom";
+import { getElementProp } from "../../utils/dom";
 import { CSS } from "./resources";
 /**
  * @slot - A slot for adding `calcite-dropdown-item`s.
@@ -23,7 +23,6 @@ export class CalciteDropdownGroup {
     this.groupPosition = this.getGroupPosition();
   }
   render() {
-    const dir = getElementDir(this.el);
     const scale = this.scale || getElementProp(this.el, "scale", "m");
     const groupTitle = this.groupTitle ? (h("span", { "aria-hidden": "true", class: "dropdown-title" }, this.groupTitle)) : null;
     const dropdownSeparator = this.groupPosition > 0 ? h("div", { class: "dropdown-separator", role: "separator" }) : null;
@@ -33,7 +32,7 @@ export class CalciteDropdownGroup {
           [CSS.containerSmall]: scale === "s",
           [CSS.containerMedium]: scale === "m",
           [CSS.containerLarge]: scale === "l"
-        }, dir: dir, title: this.groupTitle },
+        }, title: this.groupTitle },
         dropdownSeparator,
         groupTitle,
         h("slot", null))));

package/dist/collection/components/calcite-dropdown-item/calcite-dropdown-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 {
@@ -87,43 +91,28 @@
 .container--s {
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
-  padding-right: 0.5rem;
-  padding-left: 1.5rem;
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
+  padding-inline-end: 0.5rem;
+  padding-inline-start: 1.5rem;
 }
 
 .container--m {
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
-  padding-right: 0.75rem;
-  padding-left: 2rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
+  padding-inline-end: 0.75rem;
+  padding-inline-start: 2rem;
 }
 
 .container--l {
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
-  padding-right: 1rem;
-  padding-left: 2.5rem;
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
-}
-
-.container--s.calcite--rtl {
-  padding-right: 1.5rem;
-  padding-left: 0.5rem;
-}
-
-.container--m.calcite--rtl {
-  padding-right: 2rem;
-  padding-left: 0.75rem;
-}
-
-.container--l.calcite--rtl {
-  padding-right: 2.5rem;
-  padding-left: 1rem;
+  padding-inline-end: 1rem;
+  padding-inline-start: 2.5rem;
 }
 
 :host {
@@ -148,13 +137,8 @@
 }
 
 .dropdown-item-content {
-  margin-right: auto;
-  margin-left: 0.25rem;
-}
-
-.calcite--rtl .dropdown-item-content {
-  margin-left: auto;
-  margin-right: 0;
+  padding-inline-end: auto;
+  padding-inline-start: 0.25rem;
 }
 
 :host,
@@ -190,28 +174,28 @@
 .container--s .dropdown-link {
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
-  padding-right: 0.5rem;
-  padding-left: 1.5rem;
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
+  padding-inline-end: 0.5rem;
+  padding-inline-start: 1.5rem;
 }
 
 .container--m .dropdown-link {
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
-  padding-right: 0.75rem;
-  padding-left: 2rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
+  padding-inline-end: 0.75rem;
+  padding-inline-start: 2rem;
 }
 
 .container--l .dropdown-link {
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
-  padding-right: 1rem;
-  padding-left: 2.5rem;
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
+  padding-inline-end: 1rem;
+  padding-inline-start: 2.5rem;
 }
 
 :host(:hover) .container,
@@ -241,16 +225,6 @@
   opacity: 1;
 }
 
-.calcite--rtl:before {
-  left: unset;
-  right: 1rem;
-}
-
-.calcite--rtl .dropdown-link {
-  padding-right: 0;
-  padding-left: 0;
-}
-
 :host([active]) .container:not(.container--none-selection),
 :host([active]) .container--link .dropdown-link {
   color: var(--calcite-ui-text-1);
@@ -274,31 +248,15 @@
 }
 
 .container--s:before {
-  left: 0.5rem;
+  inset-inline-start: 0.5rem;
 }
 
 .container--m:before {
-  left: 0.75rem;
+  inset-inline-start: 0.75rem;
 }
 
 .container--l:before {
-  left: 1rem;
-}
-
-.calcite--rtl:before {
-  left: unset;
-}
-
-.container--s.calcite--rtl:before {
-  right: 0.5rem;
-}
-
-.container--m.calcite--rtl:before {
-  right: 0.75rem;
-}
-
-.container--l.calcite--rtl:before {
-  right: 1rem;
+  inset-inline-start: 1rem;
 }
 
 .dropdown-item-icon {
@@ -310,32 +268,15 @@
 }
 
 .container--s .dropdown-item-icon {
-  left: 0.25rem;
+  inset-inline-start: 0.25rem;
 }
 
 .container--m .dropdown-item-icon {
-  left: 0.5rem;
+  inset-inline-start: 0.5rem;
 }
 
 .container--l .dropdown-item-icon {
-  left: 0.75rem;
-}
-
-.calcite--rtl .dropdown-item-icon {
-  left: unset;
-  margin-left: 0;
-}
-
-.container--s.calcite--rtl .dropdown-item-icon {
-  right: 0.25rem;
-}
-
-.container--m.calcite--rtl .dropdown-item-icon {
-  right: 0.5rem;
-}
-
-.container--l.calcite--rtl .dropdown-item-icon {
-  right: 0.75rem;
+  inset-inline-start: 0.75rem;
 }
 
 :host(:hover) .dropdown-item-icon {
@@ -349,65 +290,28 @@
 }
 
 .container--s .dropdown-item-icon-start {
-  margin-right: 0.5rem;
-  margin-left: 0.25rem;
+  margin-inline-end: 0.5rem;
+  margin-inline-start: 0.25rem;
 }
 
 .container--s .dropdown-item-icon-end {
-  margin-left: 0.5rem;
+  margin-inline-start: 0.5rem;
 }
 
 .container--m .dropdown-item-icon-start {
-  margin-right: 0.75rem;
-  margin-left: 0.25rem;
+  margin-inline-end: 0.75rem;
+  margin-inline-start: 0.25rem;
 }
 
 .container--m .dropdown-item-icon-end {
-  margin-left: 0.75rem;
+  margin-inline-start: 0.75rem;
 }
 
 .container--l .dropdown-item-icon-start {
-  margin-right: 1rem;
-  margin-left: 0.25rem;
+  margin-inline-end: 1rem;
+  margin-inline-start: 0.25rem;
 }
 
 .container--l .dropdown-item-icon-end {
-  margin-left: 1rem;
-}
-
-.calcite--rtl .dropdown-item-icon-start {
-  margin-right: 0;
-}
-
-.calcite--rtl .dropdown-item-icon-end {
-  margin-left: 0;
-}
-
-.container--s.calcite--rtl .dropdown-item-icon-start {
-  margin-left: 0.5rem;
-}
-
-.container--s.calcite--rtl .dropdown-item-icon-end {
-  margin-right: 0.5rem;
-}
-
-.container--m.calcite--rtl .dropdown-item-icon-start {
-  margin-left: 0.75rem;
-}
-
-.container--m.calcite--rtl .dropdown-item-icon-end {
-  margin-right: 0.75rem;
-}
-
-.container--l.calcite--rtl .dropdown-item-icon-start {
-  margin-left: 1rem;
-}
-
-.container--l.calcite--rtl .dropdown-item-icon-end {
-  margin-right: 1rem;
-}
-
-.calcite--rtl calcite-icon {
-  margin-right: 0;
-  margin-left: 0.75rem;
+  margin-inline-start: 1rem;
 }

package/dist/collection/components/calcite-dropdown-item/calcite-dropdown-item.js

@@ -3,8 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop } from "@stencil/core";
-import { getElementDir, getElementProp } from "../../utils/dom";
-import { CSS_UTILITY } from "../../utils/resources";
+import { getElementProp } from "../../utils/dom";
 import { CSS } from "./resources";
 /**
  * @slot - A slot for adding text.
@@ -41,12 +40,11 @@ export class CalciteDropdownItem {
     }
   }
   render() {
-    const dir = getElementDir(this.el);
     const scale = getElementProp(this.el, "scale", "m");
-    const iconStartEl = (h("calcite-icon", { class: "dropdown-item-icon-start", dir: dir, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
+    const iconStartEl = (h("calcite-icon", { class: "dropdown-item-icon-start", flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
     const contentNode = (h("span", { class: "dropdown-item-content" },
       h("slot", null)));
-    const iconEndEl = (h("calcite-icon", { class: "dropdown-item-icon-end", dir: dir, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
+    const iconEndEl = (h("calcite-icon", { class: "dropdown-item-icon-end", flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
     const slottedContent = this.iconStart && this.iconEnd
       ? [iconStartEl, contentNode, iconEndEl]
       : this.iconStart
@@ -66,7 +64,6 @@ export class CalciteDropdownItem {
     return (h(Host, { "aria-checked": itemAria, role: itemRole, tabindex: "0" },
       h("div", { class: {
           container: true,
-          [CSS_UTILITY.rtl]: dir === "rtl",
           [CSS.containerLink]: !!this.href,
           [CSS.containerSmall]: scale === "s",
           [CSS.containerMedium]: scale === "m",

package/dist/collection/components/calcite-fab/calcite-fab.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-fab/calcite-fab.js

@@ -4,7 +4,7 @@
  */
 import { Component, Element, Method, Prop, h } from "@stencil/core";
 import { CSS, ICONS } from "./resources";
-import { focusElement, getElementDir } from "../../utils/dom";
+import { focusElement } from "../../utils/dom";
 export class CalciteFab {
   constructor() {
     // --------------------------------------------------------------------------
@@ -57,10 +57,9 @@ export class CalciteFab {
   //
   // --------------------------------------------------------------------------
   render() {
-    const { appearance, color, disabled, el, loading, scale, textEnabled, icon, label, text } = this;
+    const { appearance, color, disabled, loading, scale, textEnabled, icon, label, text } = this;
     const title = !textEnabled ? label || text || null : null;
-    const dir = getElementDir(el);
-    return (h("calcite-button", { appearance: appearance === "solid" ? "solid" : "outline", class: CSS.button, color: color, dir: dir, disabled: disabled, iconStart: icon, label: label, loading: loading, ref: (buttonEl) => {
+    return (h("calcite-button", { appearance: appearance === "solid" ? "solid" : "outline", class: CSS.button, color: color, disabled: disabled, iconStart: icon, label: label, loading: loading, ref: (buttonEl) => {
         this.buttonEl = buttonEl;
       }, round: true, scale: scale, title: title, width: "auto" }, this.textEnabled ? this.text : null));
   }

package/dist/collection/components/calcite-filter/calcite-filter.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 {
@@ -145,42 +149,24 @@ calcite-input {
 
 .search-icon {
   display: flex;
-  left: 0;
   position: absolute;
   color: var(--calcite-ui-text-2);
+  inset-inline-start: 0;
   transition: left 150ms ease-in-out, right 150ms ease-in-out, opacity 150ms ease-in-out;
 }
 
-.calcite--rtl .search-icon {
-  right: 0;
-}
-
 input[type=text]:focus {
   border-color: var(--calcite-ui-brand);
   outline: 2px solid transparent;
   outline-offset: 2px;
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
+  padding-inline: 0.25rem;
 }
 
 input[type=text]:focus ~ .search-icon {
-  left: calc(1rem * -1);
+  inset-inline-start: calc(1rem * -1);
   opacity: 0;
 }
 
-.calcite--rtl input[type=text] {
-  padding-left: 0.25rem;
-  padding-right: 1.5rem;
-}
-
-.calcite--rtl input[type=text]:focus {
-  padding-right: 1.25rem;
-}
-
-.calcite--rtl input[type=text]:focus ~ .search-icon {
-  right: calc(1rem * -1);
-}
-
 .clear-button {
   color: var(--calcite-ui-text-2);
   background-color: transparent;