@esri/calcite-components 1.0.0-beta.82 → 1.0.0-beta.85

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

@@ -91,12 +91,12 @@
   border-radius: 50px;
 }
 
-:host button, :host a {
-  outline-offset: 0;
+:host button, 
+:host a {
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
-:host button:focus, :host a:focus {
+:host button:focus, 
+:host a:focus {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: 2px;
 }
@@ -126,9 +126,10 @@
   font-weight: var(--calcite-font-weight-normal);
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
-  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;
+  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-color var(--calcite-internal-animation-timing-fast) ease-in-out;
 }
-:host button:hover, :host a:hover {
+:host button:hover, 
+:host a:hover {
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
 }
@@ -170,19 +171,23 @@
   width: 100%;
 }
 
-:host([alignment=center]:not([width=auto])) a, :host([alignment=center]:not([width=auto])) button {
+:host([alignment=center]:not([width=auto])) a, 
+:host([alignment=center]:not([width=auto])) button {
   justify-content: center;
 }
 
-:host([alignment=start]:not([width=auto])) a, :host([alignment=start]:not([width=auto])) button {
+:host([alignment=start]:not([width=auto])) a, 
+:host([alignment=start]:not([width=auto])) button {
   justify-content: flex-start;
 }
 
-:host([alignment=end]:not([width=auto])) a, :host([alignment=end]:not([width=auto])) button {
+:host([alignment=end]:not([width=auto])) a, 
+:host([alignment=end]:not([width=auto])) button {
   justify-content: flex-end;
 }
 
-:host([alignment*=space-between]:not([width=auto])) a, :host([alignment*=space-between]:not([width=auto])) button {
+:host([alignment*=space-between]:not([width=auto])) a, 
+:host([alignment*=space-between]:not([width=auto])) button {
   justify-content: space-between;
 }
 
@@ -231,7 +236,8 @@
 :host([loading]) {
   pointer-events: none;
 }
-:host([loading]) button, :host([loading]) a {
+:host([loading]) button, 
+:host([loading]) a {
   pointer-events: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
@@ -280,59 +286,79 @@
 :host([loading]) a.content--slotted .calcite-button--loader calcite-loader {
   margin-inline-end: var(--calcite-button-content-margin);
 }
-:host([loading]) button:not(.content--slotted) .icon--start, :host([loading]) button:not(.content--slotted) .icon--end, :host([loading]) a:not(.content--slotted) .icon--start, :host([loading]) a:not(.content--slotted) .icon--end {
+:host([loading]) button:not(.content--slotted) .icon--start, 
+:host([loading]) button:not(.content--slotted) .icon--end, 
+:host([loading]) a:not(.content--slotted) .icon--start, 
+:host([loading]) a:not(.content--slotted) .icon--end {
   display: none;
 }
 
-:host([appearance=solid]) button, :host([appearance=solid]) a {
+:host([appearance=solid]) button, 
+:host([appearance=solid]) a {
   border-width: 1px;
   border-style: solid;
   border-color: transparent;
 }
 
-:host([appearance=solid][color=blue]) button, :host([appearance=solid][color=blue]) a {
+:host([appearance=solid][color=blue]) button, 
+:host([appearance=solid][color=blue]) a {
   background-color: var(--calcite-ui-brand);
   color: var(--calcite-ui-text-inverse);
 }
-:host([appearance=solid][color=blue]) button:hover, :host([appearance=solid][color=blue]) button:focus, :host([appearance=solid][color=blue]) a:hover, :host([appearance=solid][color=blue]) a:focus {
+:host([appearance=solid][color=blue]) button:hover,  :host([appearance=solid][color=blue]) button:focus, 
+:host([appearance=solid][color=blue]) a:hover, 
+:host([appearance=solid][color=blue]) a:focus {
   background-color: var(--calcite-ui-brand-hover);
 }
-:host([appearance=solid][color=blue]) button:active, :host([appearance=solid][color=blue]) a:active {
+:host([appearance=solid][color=blue]) button:active, 
+:host([appearance=solid][color=blue]) a:active {
   background-color: var(--calcite-ui-brand-press);
 }
-:host([appearance=solid][color=blue]) button calcite-loader, :host([appearance=solid][color=blue]) a calcite-loader {
+:host([appearance=solid][color=blue]) button calcite-loader, 
+:host([appearance=solid][color=blue]) a calcite-loader {
   color: var(--calcite-ui-text-inverse);
 }
 
-:host([appearance=solid][color=red]) button, :host([appearance=solid][color=red]) a {
+:host([appearance=solid][color=red]) button, 
+:host([appearance=solid][color=red]) a {
   background-color: var(--calcite-ui-danger);
   color: var(--calcite-ui-text-inverse);
 }
-:host([appearance=solid][color=red]) button:hover, :host([appearance=solid][color=red]) button:focus, :host([appearance=solid][color=red]) a:hover, :host([appearance=solid][color=red]) a:focus {
+:host([appearance=solid][color=red]) button:hover,  :host([appearance=solid][color=red]) button:focus, 
+:host([appearance=solid][color=red]) a:hover, 
+:host([appearance=solid][color=red]) a:focus {
   background-color: var(--calcite-ui-danger-hover);
 }
-:host([appearance=solid][color=red]) button:active, :host([appearance=solid][color=red]) a:active {
+:host([appearance=solid][color=red]) button:active, 
+:host([appearance=solid][color=red]) a:active {
   background-color: var(--calcite-ui-danger-press);
 }
-:host([appearance=solid][color=red]) button calcite-loader, :host([appearance=solid][color=red]) a calcite-loader {
+:host([appearance=solid][color=red]) button calcite-loader, 
+:host([appearance=solid][color=red]) a calcite-loader {
   color: var(--calcite-ui-text-inverse);
 }
 
-:host([appearance=solid][color=neutral]) button, :host([appearance=solid][color=neutral]) a {
+:host([appearance=solid][color=neutral]) button, 
+:host([appearance=solid][color=neutral]) a {
   background-color: var(--calcite-ui-foreground-3);
   color: var(--calcite-ui-text-1);
 }
-:host([appearance=solid][color=neutral]) button:hover, :host([appearance=solid][color=neutral]) button:focus, :host([appearance=solid][color=neutral]) a:hover, :host([appearance=solid][color=neutral]) a:focus {
+:host([appearance=solid][color=neutral]) button:hover,  :host([appearance=solid][color=neutral]) button:focus, 
+:host([appearance=solid][color=neutral]) a:hover, 
+:host([appearance=solid][color=neutral]) a:focus {
   background-color: var(--calcite-ui-foreground-2);
 }
-:host([appearance=solid][color=neutral]) button:active, :host([appearance=solid][color=neutral]) a:active {
+:host([appearance=solid][color=neutral]) button:active, 
+:host([appearance=solid][color=neutral]) a:active {
   background-color: var(--calcite-ui-foreground-1);
 }
-:host([appearance=solid][color=neutral]) button calcite-loader, :host([appearance=solid][color=neutral]) a calcite-loader {
+:host([appearance=solid][color=neutral]) button calcite-loader, 
+:host([appearance=solid][color=neutral]) a calcite-loader {
   color: var(--calcite-ui-text-1);
 }
 
-:host([appearance=solid][color=inverse]) button, :host([appearance=solid][color=inverse]) a {
+:host([appearance=solid][color=inverse]) button, 
+:host([appearance=solid][color=inverse]) a {
   color: var(--calcite-ui-text-inverse);
   background-color: var(--calcite-ui-inverse);
 }
@@ -345,32 +371,38 @@
 :host([appearance=solid][color=inverse]) a:active {
   background-color: var(--calcite-ui-inverse-press);
 }
-:host([appearance=solid][color=inverse]) button calcite-loader, :host([appearance=solid][color=inverse]) a calcite-loader {
+:host([appearance=solid][color=inverse]) button calcite-loader, 
+:host([appearance=solid][color=inverse]) a calcite-loader {
   color: var(--calcite-ui-text-inverse);
 }
 
-:host([appearance=outline]) button, :host([appearance=outline]) a {
+:host([appearance=outline]) button, 
+:host([appearance=outline]) a {
   border-width: 1px;
   border-style: solid;
   background-color: var(--calcite-ui-foreground-1);
   box-shadow: inset 0 0 0 1px transparent;
 }
 
-:host([appearance=outline][color=blue]) button, :host([appearance=outline][color=blue]) a {
+:host([appearance=outline][color=blue]) button, 
+:host([appearance=outline][color=blue]) a {
   border-color: var(--calcite-ui-brand);
   color: var(--calcite-ui-brand);
 }
-:host([appearance=outline][color=blue]) button:hover, :host([appearance=outline][color=blue]) a:hover {
+:host([appearance=outline][color=blue]) button:hover, 
+:host([appearance=outline][color=blue]) a:hover {
   border-color: var(--calcite-ui-brand-hover);
   color: var(--calcite-ui-brand-hover);
   box-shadow: inset 0 0 0 1px var(--calcite-ui-brand-hover);
 }
-:host([appearance=outline][color=blue]) button:focus, :host([appearance=outline][color=blue]) a:focus {
+:host([appearance=outline][color=blue]) button:focus, 
+:host([appearance=outline][color=blue]) a:focus {
   border-color: var(--calcite-ui-brand);
   color: var(--calcite-ui-brand);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-brand);
 }
-:host([appearance=outline][color=blue]) button:active, :host([appearance=outline][color=blue]) a:active {
+:host([appearance=outline][color=blue]) button:active, 
+:host([appearance=outline][color=blue]) a:active {
   border-color: var(--calcite-ui-brand-press);
   color: var(--calcite-ui-brand-press);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-brand-press);
@@ -380,21 +412,25 @@
   color: var(--calcite-ui-brand);
 }
 
-:host([appearance=outline][color=red]) button, :host([appearance=outline][color=red]) a {
+:host([appearance=outline][color=red]) button, 
+:host([appearance=outline][color=red]) a {
   border-color: var(--calcite-ui-danger);
   color: var(--calcite-ui-danger);
 }
-:host([appearance=outline][color=red]) button:hover, :host([appearance=outline][color=red]) a:hover {
+:host([appearance=outline][color=red]) button:hover, 
+:host([appearance=outline][color=red]) a:hover {
   border-color: var(--calcite-ui-danger-hover);
   color: var(--calcite-ui-danger-hover);
   box-shadow: inset 0 0 0 1px var(--calcite-ui-danger-hover);
 }
-:host([appearance=outline][color=red]) button:focus, :host([appearance=outline][color=red]) a:focus {
+:host([appearance=outline][color=red]) button:focus, 
+:host([appearance=outline][color=red]) a:focus {
   border-color: var(--calcite-ui-danger);
   color: var(--calcite-ui-danger);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-danger);
 }
-:host([appearance=outline][color=red]) button:active, :host([appearance=outline][color=red]) a:active {
+:host([appearance=outline][color=red]) button:active, 
+:host([appearance=outline][color=red]) a:active {
   border-color: var(--calcite-ui-danger-press);
   color: var(--calcite-ui-danger-press);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-danger-press);
@@ -404,7 +440,8 @@
   color: var(--calcite-ui-danger);
 }
 
-:host([appearance=outline][color=neutral]) button, :host([appearance=outline][color=neutral]) a {
+:host([appearance=outline][color=neutral]) button, 
+:host([appearance=outline][color=neutral]) a {
   color: var(--calcite-ui-text-1);
   border-color: var(--calcite-ui-foreground-3);
 }
@@ -420,11 +457,13 @@
 :host([appearance=outline][color=neutral]) a:active {
   box-shadow: inset 0 0 0 2px var(--calcite-ui-foreground-3);
 }
-:host([appearance=outline][color=neutral]) button calcite-loader, :host([appearance=outline][color=neutral]) a calcite-loader {
+:host([appearance=outline][color=neutral]) button calcite-loader, 
+:host([appearance=outline][color=neutral]) a calcite-loader {
   color: var(--calcite-ui-text-1);
 }
 
-:host([appearance=outline][color=inverse]) button, :host([appearance=outline][color=inverse]) a {
+:host([appearance=outline][color=inverse]) button, 
+:host([appearance=outline][color=inverse]) a {
   color: var(--calcite-ui-text-1);
   border-color: var(--calcite-ui-inverse);
 }
@@ -443,32 +482,38 @@
   border-color: var(--calcite-ui-inverse-press);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-inverse-press);
 }
-:host([appearance=outline][color=inverse]) button calcite-loader, :host([appearance=outline][color=inverse]) a calcite-loader {
+:host([appearance=outline][color=inverse]) button calcite-loader, 
+:host([appearance=outline][color=inverse]) a calcite-loader {
   color: var(--calcite-ui-text-1);
 }
 
-:host([appearance=clear]) button, :host([appearance=clear]) a {
+:host([appearance=clear]) button, 
+:host([appearance=clear]) a {
   border-width: 1px;
   border-style: solid;
   background-color: transparent;
   box-shadow: inset 0 0 0 1px transparent;
 }
 
-:host([appearance=clear][color=blue]) button, :host([appearance=clear][color=blue]) a {
+:host([appearance=clear][color=blue]) button, 
+:host([appearance=clear][color=blue]) a {
   border-color: var(--calcite-ui-brand);
   color: var(--calcite-ui-brand);
 }
-:host([appearance=clear][color=blue]) button:hover, :host([appearance=clear][color=blue]) a:hover {
+:host([appearance=clear][color=blue]) button:hover, 
+:host([appearance=clear][color=blue]) a:hover {
   border-color: var(--calcite-ui-brand-hover);
   color: var(--calcite-ui-brand-hover);
   box-shadow: inset 0 0 0 1px var(--calcite-ui-brand-hover);
 }
-:host([appearance=clear][color=blue]) button:focus, :host([appearance=clear][color=blue]) a:focus {
+:host([appearance=clear][color=blue]) button:focus, 
+:host([appearance=clear][color=blue]) a:focus {
   border-color: var(--calcite-ui-brand);
   color: var(--calcite-ui-brand);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-brand);
 }
-:host([appearance=clear][color=blue]) button:active, :host([appearance=clear][color=blue]) a:active {
+:host([appearance=clear][color=blue]) button:active, 
+:host([appearance=clear][color=blue]) a:active {
   border-color: var(--calcite-ui-brand-press);
   color: var(--calcite-ui-brand-press);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-brand-press);
@@ -478,21 +523,25 @@
   color: var(--calcite-ui-brand);
 }
 
-:host([appearance=clear][color=red]) button, :host([appearance=clear][color=red]) a {
+:host([appearance=clear][color=red]) button, 
+:host([appearance=clear][color=red]) a {
   border-color: var(--calcite-ui-danger);
   color: var(--calcite-ui-danger);
 }
-:host([appearance=clear][color=red]) button:hover, :host([appearance=clear][color=red]) a:hover {
+:host([appearance=clear][color=red]) button:hover, 
+:host([appearance=clear][color=red]) a:hover {
   border-color: var(--calcite-ui-danger-hover);
   color: var(--calcite-ui-danger-hover);
   box-shadow: inset 0 0 0 1px var(--calcite-ui-danger-hover);
 }
-:host([appearance=clear][color=red]) button:focus, :host([appearance=clear][color=red]) a:focus {
+:host([appearance=clear][color=red]) button:focus, 
+:host([appearance=clear][color=red]) a:focus {
   border-color: var(--calcite-ui-danger);
   color: var(--calcite-ui-danger);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-danger);
 }
-:host([appearance=clear][color=red]) button:active, :host([appearance=clear][color=red]) a:active {
+:host([appearance=clear][color=red]) button:active, 
+:host([appearance=clear][color=red]) a:active {
   border-color: var(--calcite-ui-danger-press);
   color: var(--calcite-ui-danger-press);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-danger-press);
@@ -502,7 +551,8 @@
   color: var(--calcite-ui-danger);
 }
 
-:host([appearance=clear][color=neutral]) button, :host([appearance=clear][color=neutral]) a {
+:host([appearance=clear][color=neutral]) button, 
+:host([appearance=clear][color=neutral]) a {
   color: var(--calcite-ui-text-1);
   border-color: var(--calcite-ui-foreground-3);
 }
@@ -518,11 +568,13 @@
 :host([appearance=clear][color=neutral]) a:active {
   box-shadow: inset 0 0 0 2px var(--calcite-ui-foreground-3);
 }
-:host([appearance=clear][color=neutral]) button calcite-loader, :host([appearance=clear][color=neutral]) a calcite-loader {
+:host([appearance=clear][color=neutral]) button calcite-loader, 
+:host([appearance=clear][color=neutral]) a calcite-loader {
   color: var(--calcite-ui-text-1);
 }
 
-:host([appearance=clear][color=inverse]) button, :host([appearance=clear][color=inverse]) a {
+:host([appearance=clear][color=inverse]) button, 
+:host([appearance=clear][color=inverse]) a {
   color: var(--calcite-ui-text-1);
   border-color: var(--calcite-ui-inverse);
 }
@@ -541,7 +593,8 @@
   border-color: var(--calcite-ui-inverse-press);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-inverse-press);
 }
-:host([appearance=clear][color=inverse]) button calcite-loader, :host([appearance=clear][color=inverse]) a calcite-loader {
+:host([appearance=clear][color=inverse]) button calcite-loader, 
+:host([appearance=clear][color=inverse]) a calcite-loader {
   color: var(--calcite-ui-text-1);
 }
 
@@ -557,7 +610,8 @@
   border-inline-end-width: 1px;
 }
 
-:host([appearance=transparent]:not(.enable-editing-button)) button, :host([appearance=transparent]:not(.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(.enable-editing-button)) button:hover, :host([appearance=transparent]:not(.enable-editing-button)) button:focus,
@@ -612,7 +666,9 @@
   color: var(--calcite-ui-danger);
 }
 
-: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 {
+: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);
 }
 
@@ -642,11 +698,14 @@
   outline-offset: -2px;
 }
 
-:host([appearance=transparent][color=inverse]) button, :host([appearance=transparent][color=inverse]) a, :host([appearance=transparent][color=inverse]) calcite-loader {
+:host([appearance=transparent][color=inverse]) button, 
+:host([appearance=transparent][color=inverse]) a, 
+:host([appearance=transparent][color=inverse]) calcite-loader {
   color: var(--calcite-ui-text-inverse);
 }
 
-:host([scale=s]) button.content--slotted, :host([scale=s]) a.content--slotted {
+:host([scale=s]) button.content--slotted, 
+:host([scale=s]) a.content--slotted {
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
 }

package/dist/collection/components/button/button.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.82
+ * v1.0.0-beta.85
  */
 import "form-request-submit-polyfill/form-request-submit-polyfill";
 import { Component, Element, h, Method, Prop, Build, State, Watch } from "@stencil/core";
@@ -29,7 +29,9 @@ export class Button {
     this.color = "blue";
     /** is the button disabled  */
     this.disabled = false;
-    /** string to override English loading text
+    /**
+     * string to override English loading text
+     *
      * @default "Loading"
      */
     this.intlLoading = TEXT.loading;
@@ -45,7 +47,7 @@ export class Button {
     this.type = "button";
     /** specify the width of the button, defaults to auto */
     this.width = "auto";
-    /** watches for changing text content **/
+    /** watches for changing text content */
     this.mutationObserver = createObserver("mutation", () => this.updateHasContent());
     /** determine if there is slotted content for styling purposes */
     this.hasContent = false;
@@ -127,7 +129,8 @@ export class Button {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    this.childEl.focus();
+    var _a;
+    (_a = this.childEl) === null || _a === void 0 ? void 0 : _a.focus();
   }
   updateHasContent() {
     var _a, _b;

package/dist/collection/components/button/interfaces.js

@@ -1,6 +1,6 @@
 /*!
  * 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.82
+ * v1.0.0-beta.85
  */
 export {};

package/dist/collection/components/button/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.82
+ * v1.0.0-beta.85
  */
 export const CSS = {
   buttonLoader: "calcite-button--loader",

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

@@ -115,6 +115,7 @@
 }
 
 .container {
+  position: relative;
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
@@ -135,7 +136,8 @@
   align-items: center;
 }
 
-.header, .footer {
+.header, 
+.footer {
   display: flex;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -175,7 +177,8 @@
   border-color: var(--calcite-ui-brand);
 }
 
-slot[name=title]::slotted(*), *::slotted([slot=title]) {
+slot[name=title]::slotted(*), 
+*::slotted([slot=title]) {
   margin: 0px;
   font-size: var(--calcite-font-size--1);
   line-height: 1.375;
@@ -183,7 +186,8 @@ slot[name=title]::slotted(*), *::slotted([slot=title]) {
   color: var(--calcite-ui-text-1);
 }
 
-slot[name=subtitle]::slotted(*), *::slotted([slot=subtitle]) {
+slot[name=subtitle]::slotted(*), 
+*::slotted([slot=subtitle]) {
   margin: 0px;
   margin-top: 0.5rem;
   font-size: var(--calcite-font-size--2);
@@ -192,33 +196,50 @@ slot[name=subtitle]::slotted(*), *::slotted([slot=subtitle]) {
   color: var(--calcite-ui-text-2);
 }
 
-slot[name=thumbnail]::slotted(img), img::slotted([slot=thumbnail]) {
+slot[name=thumbnail]::slotted(img), 
+img::slotted([slot=thumbnail]) {
   min-width: 100%;
   max-width: 100%;
 }
 
-slot[name=footer-leading]::slotted(*), *::slotted([slot=footer-leading]) {
+slot[name=footer-leading]::slotted(*), 
+*::slotted([slot=footer-leading]) {
   align-self: center;
   font-size: var(--calcite-font-size--2);
   line-height: 1.375;
   margin-inline-end: auto;
 }
 
-slot[name=footer-trailing]::slotted(*), *::slotted([slot=footer-trailing]) {
+slot[name=footer-trailing]::slotted(*), 
+*::slotted([slot=footer-trailing]) {
   align-self: center;
   font-size: var(--calcite-font-size--2);
   line-height: 1.375;
 }
 
-.thumbnail-wrapper {
-  font-size: var(--calcite-font-size-0);
-  line-height: 1.375;
-}
-
 .checkbox-wrapper {
   position: absolute;
   margin: 0px;
   padding: 0px;
   top: 0.5rem;
   inset-inline-end: 0.5rem;
+}
+
+.thumbnail-wrapper {
+  display: flex;
+}
+
+.calcite-card-container.inline {
+  flex-direction: row;
+}
+.calcite-card-container.inline > .container {
+  width: 60%;
+}
+.calcite-card-container.inline > .thumbnail-wrapper {
+  width: 40%;
+  align-items: flex-start;
+}
+.calcite-card-container.inline slot[name=thumbnail]::slotted(img), 
+.calcite-card-container.inline img::slotted([slot=thumbnail]) {
+  width: 100%;
 }

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

@@ -1,13 +1,14 @@
 /*!
  * 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.82
+ * v1.0.0-beta.85
  */
 import { Component, Element, Event, h, Prop } from "@stencil/core";
 import { getSlotted, toAriaBoolean } from "../../utils/dom";
 import { CSS, SLOTS, TEXT } from "./resources";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
-/** Cards do not include a grid or bounding container
+/**
+ * Cards do not include a grid or bounding container
  * - cards will expand to fit the width of their container
  */
 /**
@@ -31,18 +32,25 @@ export class Card {
     this.selected = false;
     /** Indicates whether the card is selectable. */
     this.selectable = false;
-    /** string to override English loading text
+    /**
+     * string to override English loading text
+     *
      * @default "Loading"
      */
     this.intlLoading = TEXT.loading;
-    /** string to override English select text for checkbox when selectable is true
+    /**
+     * string to override English select text for checkbox when selectable is true
+     *
      * @default "Select"
      */
     this.intlSelect = TEXT.select;
-    /** string to override English deselect text for checkbox when selectable is true
+    /**
+     * string to override English deselect text for checkbox when selectable is true
+     *
      * @default "Deselect"
      */
     this.intlDeselect = TEXT.deselect;
+    this.thumbnailPosition = "block-start";
     //--------------------------------------------------------------------------
     //
     //  Private State/Props
@@ -78,23 +86,26 @@ export class Card {
     disconnectConditionalSlotComponent(this);
   }
   render() {
-    return (h("div", { class: "calcite-card-container" },
+    const thumbnailInline = this.thumbnailPosition.startsWith("inline");
+    const thumbnailStart = this.thumbnailPosition.endsWith("start");
+    return (h("div", { class: { "calcite-card-container": true, inline: thumbnailInline } },
       this.loading ? (h("div", { class: "calcite-card-loader-container" },
         h("calcite-loader", { active: true, label: this.intlLoading }))) : null,
+      thumbnailStart && this.renderThumbnail(),
       h("section", { "aria-busy": toAriaBoolean(this.loading), class: { [CSS.container]: true } },
         this.selectable ? this.renderCheckbox() : null,
-        this.renderThumbnail(),
         this.renderHeader(),
         h("div", { class: "card-content" },
           h("slot", null)),
-        this.renderFooter())));
+        this.renderFooter()),
+      !thumbnailStart && this.renderThumbnail()));
   }
   selectCard() {
     this.selected = !this.selected;
     this.calciteCardSelect.emit();
   }
   renderThumbnail() {
-    return getSlotted(this.el, SLOTS.thumbnail) ? (h("div", { class: CSS.thumbnailWrapper, key: "thumbnail-wrapper" },
+    return getSlotted(this.el, SLOTS.thumbnail) ? (h("section", { class: CSS.thumbnailWrapper },
       h("slot", { name: SLOTS.thumbnail }))) : null;
   }
   renderCheckbox() {
@@ -245,6 +256,29 @@ export class Card {
       "attribute": "intl-deselect",
       "reflect": false,
       "defaultValue": "TEXT.deselect"
+    },
+    "thumbnailPosition": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "LogicalFlowPosition",
+        "resolved": "\"block-end\" | \"block-start\" | \"inline-end\" | \"inline-start\"",
+        "references": {
+          "LogicalFlowPosition": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "thumbnail-position",
+      "reflect": false,
+      "defaultValue": "\"block-start\""
     }
   }; }
   static get events() { return [{