@esri/calcite-components 1.0.0-beta.69 → 1.0.0-beta.72

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

@@ -3,7 +3,6 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, h, Prop, State } from "@stencil/core";
-import { getElementDir } from "../../utils/dom";
 import { isValidHex } from "../calcite-color-picker/utils";
 import { hexToHue, stringToHex } from "./utils";
 import { getThemeName } from "../../utils/dom";
@@ -38,13 +37,12 @@ export class CalciteAvatar {
   //
   //--------------------------------------------------------------------------
   determineContent() {
-    const dir = getElementDir(this.el);
     if (this.thumbnail && !this.error) {
-      return (h("img", { alt: "", class: "thumbnail", dir: dir, onError: () => (this.error = true), src: this.thumbnail }));
+      return (h("img", { alt: "", class: "thumbnail", onError: () => (this.error = true), src: this.thumbnail }));
     }
     const initials = this.generateInitials();
     const backgroundColor = this.generateFillColor();
-    return (h("span", { class: "background", dir: dir, style: { backgroundColor } }, initials ? (h("span", { "aria-hidden": "true", class: "initials" }, initials)) : (h("calcite-icon", { class: "icon", icon: "user", scale: this.scale }))));
+    return (h("span", { class: "background", style: { backgroundColor } }, initials ? (h("span", { "aria-hidden": "true", class: "initials" }, initials)) : (h("calcite-icon", { class: "icon", icon: "user", scale: this.scale }))));
   }
   /**
    * Generate a valid background color that is consistent and unique to this user

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

@@ -47,7 +47,11 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -190,13 +194,6 @@ h5.heading {
   grid-row: 1/2;
 }
 
-.header-container > .header {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-  padding-left: 0;
-  padding-right: 0;
-}
-
 .toggle {
   display: flex;
   flex-wrap: nowrap;
@@ -204,16 +201,13 @@ h5.heading {
   font-family: inherit;
   align-items: center;
   margin: 0;
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-  padding-left: 0;
-  padding-right: 0;
+  padding: 0;
   border-style: none;
   cursor: pointer;
-  text-align: left;
   outline-offset: 0;
   outline-color: transparent;
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
+  text-align: initial;
   background-color: transparent;
 }
 
@@ -237,10 +231,7 @@ calcite-handle {
 
 .title {
   margin: 0;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  padding-top: 0;
-  padding-bottom: 0;
+  padding: 0.75rem;
 }
 
 .header .title .heading {
@@ -266,7 +257,9 @@ calcite-handle {
 }
 
 .icon {
-  margin-left: 0.75rem;
+  margin-inline-start: 0.75rem;
+  margin-inline-end: 0px;
+  margin-block: 0.75rem;
 }
 
 .status-icon.valid {
@@ -296,12 +289,16 @@ calcite-handle {
 }
 
 .toggle-icon {
-  margin-right: 1rem;
   align-self: center;
+  justify-self: end;
   color: var(--calcite-ui-text-3);
   transition-property: color;
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+  margin-inline-end: 1rem;
+  margin-inline-start: auto;
 }
 
 .toggle:hover .toggle-icon {
@@ -314,7 +311,7 @@ calcite-handle {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   position: relative;
-  animation: in var(--calcite-animation-timing) ease-in-out;
+  animation: in var(--calcite-internal-animation-timing-slow) ease-in-out;
 }
 
 .control-container {
@@ -327,16 +324,6 @@ calcite-action-menu {
   grid-area: menu;
 }
 
-.calcite--rtl .toggle-icon {
-  margin-right: 0;
-  margin-left: 1rem;
-}
-
-.calcite--rtl .icon {
-  margin-left: 0;
-  margin-right: 0.75rem;
-}
-
 :host([open]) {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -356,9 +343,4 @@ calcite-action-menu {
 
 :host([disabled]) .header-container {
   opacity: 0.5;
-}
-
-:host([drag-handle]) .calcite--rtl .title {
-  padding-left: 0;
-  padding-right: 0.25rem;
 }

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

@@ -4,8 +4,7 @@
  */
 import { Component, Element, Event, h, Host, Prop } from "@stencil/core";
 import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
-import { CSS_UTILITY } from "../../utils/resources";
-import { getElementDir, getSlotted } from "../../utils/dom";
+import { getSlotted } from "../../utils/dom";
 import { CalciteHeading } from "../functional/CalciteHeading";
 /**
  * @slot - A slot for adding content to the block.
@@ -81,14 +80,18 @@ export class CalciteBlock {
       }, icon: statusIcon, scale: "m" }));
     return hasIcon ? h("div", { class: CSS.icon }, iconEl) : null;
   }
+  renderTitle() {
+    const { heading, headingLevel, summary } = this;
+    return heading || summary ? (h("div", { class: CSS.title },
+      h(CalciteHeading, { class: CSS.heading, level: headingLevel || HEADING_LEVEL }, heading),
+      summary ? h("div", { class: CSS.summary }, summary) : null)) : null;
+  }
   render() {
-    const { collapsible, disabled, el, heading, intlCollapse, intlExpand, loading, open, summary, intlLoading, headingLevel } = this;
+    const { collapsible, disabled, el, intlCollapse, intlExpand, loading, open, intlLoading } = this;
     const toggleLabel = open ? intlCollapse || TEXT.collapse : intlExpand || TEXT.expand;
     const headerContent = (h("header", { class: CSS.header },
       this.renderIcon(),
-      h("div", { class: CSS.title },
-        h(CalciteHeading, { class: CSS.heading, level: headingLevel || HEADING_LEVEL }, heading),
-        summary ? h("div", { class: CSS.summary }, summary) : null)));
+      this.renderTitle()));
     const hasControl = !!getSlotted(el, SLOTS.control);
     const hasMenuActions = !!getSlotted(el, SLOTS.headerMenuActions);
     const collapseIcon = open ? ICONS.opened : ICONS.closed;
@@ -101,11 +104,9 @@ export class CalciteBlock {
         h("slot", { name: SLOTS.control }))) : null,
       hasMenuActions ? (h("calcite-action-menu", { label: this.intlOptions || TEXT.options },
         h("slot", { name: SLOTS.headerMenuActions }))) : null));
-    const rtl = getElementDir(el) === "rtl";
     return (h(Host, { tabIndex: disabled ? -1 : null },
       h("article", { "aria-busy": loading.toString(), class: {
-          [CSS.article]: true,
-          [CSS_UTILITY.rtl]: rtl
+          [CSS.article]: true
         } },
         headerNode,
         h("div", { class: CSS.content, hidden: !open }, this.renderScrim()))));

package/dist/collection/components/calcite-block-section/calcite-block-section.css

@@ -47,7 +47,11 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -160,11 +164,11 @@
 
 .toggle--switch calcite-switch {
   pointer-events: none;
-  margin-left: 0.25rem;
+  margin-inline-start: 0.25rem;
 }
 
 .toggle--switch .status-icon {
-  margin-left: 0.5rem;
+  margin-inline-start: 0.5rem;
 }
 
 .toggle--switch__content {
@@ -179,14 +183,4 @@
 
 .status-icon.invalid {
   color: var(--calcite-ui-danger);
-}
-
-.calcite--rtl .toggle--switch calcite-switch {
-  margin-left: 0;
-  margin-right: 0.25rem;
-}
-
-.calcite--rtl .toggle--switch .status-icon {
-  margin-left: 0;
-  margin-right: 0.5rem;
 }

package/dist/collection/components/calcite-block-section/calcite-block-section.js

@@ -4,7 +4,6 @@
  */
 import { Component, Element, Event, Prop, h } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
-import { CSS_UTILITY } from "../../utils/resources";
 import { CSS, ICONS, TEXT } from "./resources";
 /**
  * @slot - A slot for adding content to the block section.
@@ -77,7 +76,7 @@ export class CalciteBlockSection {
       h("calcite-icon", { icon: arrowIcon, scale: "s" }),
       h("span", { class: CSS.sectionHeaderText }, text),
       this.renderStatusIcon()));
-    return (h("section", { "aria-expanded": open.toString(), class: { [CSS_UTILITY.rtl]: dir === "rtl" } },
+    return (h("section", { "aria-expanded": open.toString() },
       headerNode,
       h("div", { class: CSS.content, hidden: !open },
         h("slot", null))));

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

@@ -47,7 +47,11 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -135,7 +139,7 @@
   box-sizing: border-box;
   font-family: inherit;
   font-weight: var(--calcite-font-weight-normal);
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
+  transition: color var(--calcite-animation-timing) ease-in-out, background-color var(--calcite-animation-timing) ease-in-out, box-shadow var(--calcite-animation-timing) ease-in-out, outline-offset var(--calcite-internal-animation-timing-fast) ease-in-out, outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;
 }
 
 :host button:hover,
@@ -146,8 +150,16 @@
 .content {
   display: flex;
   flex-basis: auto;
-  margin-left: var(--calcite-button-content-margin);
-  margin-right: var(--calcite-button-content-margin);
+  margin-inline-start: var(--calcite-button-content-margin);
+  margin-inline-end: var(--calcite-button-content-margin);
+}
+
+.icon-start-empty .content {
+  margin-inline-start: unset;
+}
+
+.icon-end-empty .content {
+  margin-inline-end: unset;
 }
 
 :host([scale=m]) button,
@@ -160,24 +172,6 @@
   --calcite-button-content-margin: 1rem;
 }
 
-:host(:not([icon-start])) .content {
-  margin-left: unset;
-}
-
-:host(:not([icon-end])) .content {
-  margin-right: unset;
-}
-
-:host([icon-start]:not([icon-end])) .calcite--rtl .content {
-  margin-left: unset;
-  margin-right: var(--calcite-button-content-margin);
-}
-
-:host([icon-end]:not([icon-start])) .calcite--rtl .content {
-  margin-right: unset;
-  margin-left: var(--calcite-button-content-margin);
-}
-
 :host([width=auto]) {
   width: auto;
 }
@@ -211,7 +205,7 @@
 }
 
 :host([alignment=icon-start-space-between]:not([width=auto])) .icon--start {
-  margin-right: auto;
+  margin-inline-end: auto;
 }
 
 :host([alignment=icon-start-space-between]:not([width=auto])) a,
@@ -220,7 +214,7 @@
 }
 
 :host([alignment=icon-end-space-between]:not([width=auto])) .icon--end {
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 :host([alignment=icon-end-space-between]:not([width=auto])) a,
@@ -228,25 +222,9 @@
   text-align: unset;
 }
 
-:host([alignment=icon-start-space-between]:not([width=auto])) .calcite--rtl .icon--start {
-  margin-right: unset;
-  margin-left: auto;
-}
-
-:host([alignment=icon-end-space-between]:not([width=auto])) .calcite--rtl .icon--end {
-  margin-left: unset;
-  margin-right: auto;
-}
-
 :host([alignment=center]) a:not(.content--slotted) .icon--start + .icon--end,
 :host([alignment=center]) button:not(.content--slotted) .icon--start + .icon--end {
-  margin-left: var(--calcite-button-content-margin);
-}
-
-:host([alignment=center]) a.calcite--rtl:not(.content--slotted) .icon--start + .icon--end,
-:host([alignment=center]) button.calcite--rtl:not(.content--slotted) .icon--start + .icon--end {
-  margin-left: unset;
-  margin-right: var(--calcite-button-content-margin);
+  margin-inline-start: var(--calcite-button-content-margin);
 }
 
 .icon {
@@ -304,7 +282,7 @@
 
 .calcite-button--loader calcite-loader {
   margin: 0;
-  transition: width 300ms ease-in-out, opacity 300ms ease-in-out, transform 300ms ease-in-out;
+  transition: width var(--calcite-internal-animation-timing-slow) ease-in-out, opacity var(--calcite-internal-animation-timing-slow) ease-in-out, transform var(--calcite-internal-animation-timing-slow) ease-in-out;
 }
 
 .calcite-button--loader calcite-loader.loading-in {
@@ -680,41 +658,29 @@
 
 :host([appearance=outline][split-child=primary]) button,
 :host([appearance=clear][split-child=primary]) button {
-  border-right-width: 0;
-  border-left-width: 1px;
-}
-
-:host([appearance=outline][split-child=primary]) button.calcite--rtl,
-:host([appearance=clear][split-child=primary]) button.calcite--rtl {
-  border-left-width: 0;
-  border-right-width: 1px;
+  border-inline-end-width: 0;
+  border-inline-start-width: 1px;
 }
 
 :host([appearance=outline][split-child=secondary]) button,
 :host([appearance=clear][split-child=secondary]) button {
-  border-left-width: 0;
-  border-right-width: 1px;
-}
-
-:host([appearance=outline][split-child=secondary]) button.calcite--rtl,
-:host([appearance=clear][split-child=secondary]) button.calcite--rtl {
-  border-right-width: 0;
-  border-left-width: 1px;
+  border-inline-start-width: 0;
+  border-inline-end-width: 1px;
 }
 
-:host([appearance=transparent]:not(.calcite-inline-editable__enable-editing-button)) button,
-:host([appearance=transparent]:not(.calcite-inline-editable__enable-editing-button)) a {
+:host([appearance=transparent]:not(.enable-editing-button)) button,
+:host([appearance=transparent]:not(.enable-editing-button)) a {
   background-color: transparent;
 }
 
-:host([appearance=transparent]:not(.calcite-inline-editable__enable-editing-button)) button:hover, :host([appearance=transparent]:not(.calcite-inline-editable__enable-editing-button)) button:focus,
-:host([appearance=transparent]:not(.calcite-inline-editable__enable-editing-button)) a:hover,
-:host([appearance=transparent]:not(.calcite-inline-editable__enable-editing-button)) a:focus {
+:host([appearance=transparent]:not(.enable-editing-button)) button:hover, :host([appearance=transparent]:not(.enable-editing-button)) button:focus,
+:host([appearance=transparent]:not(.enable-editing-button)) a:hover,
+:host([appearance=transparent]:not(.enable-editing-button)) a:focus {
   background-color: var(--calcite-button-transparent-hover);
 }
 
-:host([appearance=transparent]:not(.calcite-inline-editable__enable-editing-button)) button:active,
-:host([appearance=transparent]:not(.calcite-inline-editable__enable-editing-button)) a:active {
+:host([appearance=transparent]:not(.enable-editing-button)) button:active,
+:host([appearance=transparent]:not(.enable-editing-button)) a:active {
   background-color: var(--calcite-button-transparent-press);
 }
 
@@ -768,13 +734,13 @@
   color: var(--calcite-ui-danger);
 }
 
-:host([appearance=transparent][color=neutral]:not(.calcite-inline-editable__cancel-editing-button)) button,
-:host([appearance=transparent][color=neutral]:not(.calcite-inline-editable__cancel-editing-button)) a,
-:host([appearance=transparent][color=neutral]:not(.calcite-inline-editable__cancel-editing-button)) calcite-loader {
+:host([appearance=transparent][color=neutral]:not(.cancel-editing-button)) button,
+:host([appearance=transparent][color=neutral]:not(.cancel-editing-button)) a,
+:host([appearance=transparent][color=neutral]:not(.cancel-editing-button)) calcite-loader {
   color: var(--calcite-ui-text-1);
 }
 
-:host([appearance=transparent][color=neutral].calcite-inline-editable__cancel-editing-button) button {
+:host([appearance=transparent][color=neutral].cancel-editing-button) button {
   color: var(--calcite-ui-text-3);
   border-top-width: 1px;
   border-top-color: var(--calcite-ui-border-input);
@@ -784,18 +750,24 @@
   border-top-style: solid;
 }
 
-:host([appearance=transparent][color=neutral].calcite-inline-editable__cancel-editing-button) button:not(.content--slotted) {
+:host([appearance=transparent][color=neutral].cancel-editing-button) button:not(.content--slotted) {
   --calcite-button-padding-y: 0;
 }
 
-:host([appearance=transparent][color=neutral].calcite-inline-editable__cancel-editing-button) button:hover {
+:host([appearance=transparent][color=neutral].cancel-editing-button) button:hover {
   color: var(--calcite-ui-text-1);
 }
 
-:host([appearance=transparent][color=neutral].calcite-inline-editable__enable-editing-button) button {
+:host([appearance=transparent][color=neutral].enable-editing-button) button {
   background-color: transparent;
 }
 
+:host(.confirm-changes-button) button:focus,
+:host(.cancel-editing-button) button:focus,
+:host(.enable-editing-button) button:focus {
+  outline-offset: -2px;
+}
+
 :host([appearance=transparent][color=inverse]) button,
 :host([appearance=transparent][color=inverse]) a,
 :host([appearance=transparent][color=inverse]) calcite-loader {

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

@@ -5,8 +5,7 @@
 import "form-request-submit-polyfill/form-request-submit-polyfill";
 import { Component, Element, h, Method, Prop, Build, State, Watch } from "@stencil/core";
 import { CSS, TEXT } from "./resources";
-import { closestElementCrossShadowBoundary, getElementDir } from "../../utils/dom";
-import { CSS_UTILITY } from "../../utils/resources";
+import { closestElementCrossShadowBoundary } from "../../utils/dom";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { createObserver } from "../../utils/observers";
 /** Passing a 'href' will render an anchor link, instead of a button. Role will be set to link, or button, depending on this. */
@@ -103,15 +102,19 @@ export class CalciteButton {
     }
   }
   render() {
-    const dir = getElementDir(this.el);
     const Tag = this.childElType;
-    const loader = (h("div", { class: CSS.buttonLoader }, this.hasLoader ? (h("calcite-loader", { active: true, class: this.loading ? CSS.loadingIn : CSS.loadingOut, inline: true, label: this.intlLoading, scale: "m" })) : null));
+    const loaderNode = this.hasLoader ? (h("div", { class: CSS.buttonLoader },
+      h("calcite-loader", { active: true, class: this.loading ? CSS.loadingIn : CSS.loadingOut, inline: true, label: this.intlLoading, scale: "m" }))) : null;
     const iconStartEl = (h("calcite-icon", { class: { [CSS.icon]: true, [CSS.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
     const iconEndEl = (h("calcite-icon", { class: { [CSS.icon]: true, [CSS.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
     const contentEl = (h("span", { class: CSS.content },
       h("slot", null)));
-    return (h(Tag, { "aria-label": getLabelText(this), class: { [CSS_UTILITY.rtl]: dir === "rtl", [CSS.contentSlotted]: this.hasContent }, disabled: this.disabled || this.loading, href: this.childElType === "a" && this.href, name: this.childElType === "button" && this.name, onClick: this.handleClick, ref: (el) => (this.childEl = el), rel: this.childElType === "a" && this.rel, tabIndex: this.disabled || this.loading ? -1 : null, target: this.childElType === "a" && this.target, type: this.childElType === "button" && this.type },
-      loader,
+    return (h(Tag, { "aria-label": getLabelText(this), class: {
+        [CSS.contentSlotted]: this.hasContent,
+        [CSS.iconStartEmpty]: !this.iconStart,
+        [CSS.iconEndEmpty]: !this.iconEnd
+      }, disabled: this.disabled || this.loading, href: this.childElType === "a" && this.href, name: this.childElType === "button" && this.name, onClick: this.handleClick, ref: (el) => (this.childEl = el), rel: this.childElType === "a" && this.rel, tabIndex: this.disabled || this.loading ? -1 : null, target: this.childElType === "a" && this.target, type: this.childElType === "button" && this.type },
+      loaderNode,
       this.iconStart ? iconStartEl : null,
       this.hasContent ? contentEl : null,
       this.iconEnd ? iconEndEl : null));

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

@@ -10,7 +10,9 @@ export const CSS = {
   iconStart: "icon--start",
   iconEnd: "icon--end",
   loadingIn: "loading-in",
-  loadingOut: "loading-out"
+  loadingOut: "loading-out",
+  iconStartEmpty: "icon-start-empty",
+  iconEndEmpty: "icon-end-empty"
 };
 export const TEXT = {
   loading: "Loading"

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

@@ -47,7 +47,11 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -226,10 +230,5 @@ slot[name=footer-trailing]::slotted(*),
   margin: 0;
   padding: 0;
   top: 0.5rem;
-  right: 0.5rem;
-}
-
-.calcite--rtl .checkbox-wrapper {
-  right: auto;
-  left: 0.5rem;
+  inset-inline-end: 0.5rem;
 }

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

@@ -4,9 +4,6 @@
  */
 import { Component, Element, Event, h, Prop } from "@stencil/core";
 import { CSS, SLOTS, TEXT } from "./resources";
-import { getElementDir } from "../../utils/dom";
-import { getKey } from "../../utils/key";
-import { CSS_UTILITY } from "../../utils/resources";
 /** Cards do not include a grid or bounding container
  * - cards will expand to fit the width of their container
  */
@@ -57,7 +54,7 @@ export class CalciteCard {
       this.selectCard();
     };
     this.cardSelectKeyDown = (e) => {
-      switch (getKey(e.key)) {
+      switch (e.key) {
         case " ":
         case "Enter":
           this.selectCard();
@@ -72,8 +69,7 @@ export class CalciteCard {
   //
   // --------------------------------------------------------------------------
   render() {
-    const dir = getElementDir(this.el);
-    return (h("div", { class: { "calcite-card-container": true, [CSS_UTILITY.rtl]: dir === "rtl" } },
+    return (h("div", { class: "calcite-card-container" },
       this.loading ? (h("div", { class: "calcite-card-loader-container" },
         h("calcite-loader", { active: true, label: this.intlLoading }))) : null,
       h("section", { "aria-busy": this.loading.toString(), class: { [CSS.container]: true } },

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

@@ -47,7 +47,11 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -131,23 +135,19 @@
   color: var(--calcite-ui-background);
 }
 
-:host ::slotted(input) {
-  width: var(--calcite-checkbox-size);
-  height: var(--calcite-checkbox-size);
-}
-
-:host(:hover) .check-svg,
-:host([hovered]) .check-svg {
-  box-shadow: inset 0 0 0 2px var(--calcite-ui-brand);
-}
-
 :host([checked]) .check-svg,
 :host([indeterminate]) .check-svg {
   background-color: var(--calcite-ui-brand);
   box-shadow: inset 0 0 0 1px var(--calcite-ui-brand);
 }
 
-:host .focused .check-svg {
+:host([hovered]) .toggle .check-svg,
+:host .toggle:hover .check-svg {
+  box-shadow: inset 0 0 0 2px var(--calcite-ui-brand);
+}
+
+:host .toggle:focus .check-svg,
+:host .toggle:active .check-svg {
   box-shadow: inset 0 0 0 1px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);
   transition: 150ms ease-in-out;
 }
@@ -156,4 +156,19 @@
   cursor: default;
   opacity: var(--calcite-ui-opacity-disabled);
   pointer-events: none;
+}
+
+::slotted(input[slot=hidden-form-input]) {
+  bottom: 0 !important;
+  left: 0 !important;
+  margin: 0 !important;
+  opacity: 0 !important;
+  outline: none !important;
+  padding: 0 !important;
+  position: absolute !important;
+  right: 0 !important;
+  top: 0 !important;
+  transform: none !important;
+  -webkit-appearance: none !important;
+  z-index: -1 !important;
 }