@esri/calcite-components 1.0.0-beta.81 → 1.0.0-beta.84

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.81
+ * v1.0.0-beta.84
  */
 import "form-request-submit-polyfill/form-request-submit-polyfill";
 import { Component, Element, h, Method, Prop, Build, State, Watch } from "@stencil/core";
@@ -10,6 +10,7 @@ import { closestElementCrossShadowBoundary } from "../../utils/dom";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { createObserver } from "../../utils/observers";
 import { updateHostInteraction } from "../../utils/interactive";
+import { submitForm, resetForm } from "../../utils/form";
 /** Passing a 'href' will render an anchor link, instead of a button. Role will be set to link, or button, depending on this. */
 /** It is the consumers responsibility to add aria information, rel, target, for links, and any button attributes for form submission */
 /** @slot - A slot for adding text. */
@@ -28,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;
@@ -44,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;
@@ -52,16 +55,16 @@ export class Button {
     this.hasLoader = false;
     // act on a requested or nearby form based on type
     this.handleClick = () => {
-      const { formEl, type } = this;
+      const { type } = this;
       if (this.href) {
         return;
       }
       // this.type refers to type attribute, not child element type
       if (type === "submit") {
-        formEl === null || formEl === void 0 ? void 0 : formEl.requestSubmit();
+        submitForm(this);
       }
       else if (type === "reset") {
-        formEl === null || formEl === void 0 ? void 0 : formEl.reset();
+        resetForm(this);
       }
     };
   }
@@ -126,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.81
+ * v1.0.0-beta.84
  */
 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.81
+ * v1.0.0-beta.84
  */
 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.81
+ * v1.0.0-beta.84
  */
 import { Component, Element, Event, h, Prop } from "@stencil/core";
-import { getSlotted } from "../../utils/dom";
+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,
-      h("section", { "aria-busy": this.loading.toString(), class: { [CSS.container]: true } },
+      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 [{

package/dist/collection/components/card/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.81
+ * v1.0.0-beta.84
  */
 export const CSS = {
   container: "container",
@@ -9,8 +9,8 @@ export const CSS = {
   footer: "footer",
   title: "title",
   subtitle: "subtitle",
-  thumbnailWrapper: "thumbnail-wrapper",
-  checkboxWrapper: "checkbox-wrapper"
+  checkboxWrapper: "checkbox-wrapper",
+  thumbnailWrapper: "thumbnail-wrapper"
 };
 export const SLOTS = {
   thumbnail: "thumbnail",

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

@@ -105,25 +105,27 @@
           user-select: none;
   -webkit-tap-highlight-color: transparent;
 }
+:host .check-svg,
+:host .toggle {
+  width: var(--calcite-checkbox-size);
+  height: var(--calcite-checkbox-size);
+}
 :host .check-svg {
   pointer-events: none;
   box-sizing: border-box;
   display: block;
+  overflow: hidden;
   background-color: var(--calcite-ui-foreground-1);
   fill: currentColor;
   stroke: currentColor;
   stroke-width: 1;
-  transition-property: all;
-  transition-duration: 150ms;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  overflow: hidden;
-  width: var(--calcite-checkbox-size);
-  height: var(--calcite-checkbox-size);
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   box-shadow: inset 0 0 0 1px var(--calcite-ui-border-input);
   color: var(--calcite-ui-background);
 }
 
-:host([checked]) .check-svg, :host([indeterminate]) .check-svg {
+: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);
 }
@@ -133,10 +135,12 @@
   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: var(--calcite-animation-timing);
+.toggle {
+  outline-color: transparent;
+}
+.toggle:active,  .toggle:focus,  .toggle:focus-visible {
+  outline: 2px solid var(--calcite-ui-brand);
+  outline-offset: 2px;
 }
 
 :host([disabled]) {

package/dist/collection/components/checkbox/checkbox.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.81
+ * v1.0.0-beta.84
  */
 import { Component, Element, Event, h, Host, Method, Prop } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -9,6 +9,7 @@ import { HiddenFormInputSlot } from "../../utils/form";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { connectForm, disconnectForm } from "../../utils/form";
 import { updateHostInteraction } from "../../utils/interactive";
+import { toAriaBoolean } from "../../utils/dom";
 export class Checkbox {
   constructor() {
     //--------------------------------------------------------------------------
@@ -22,6 +23,7 @@ export class Checkbox {
     this.disabled = false;
     /**
      * The hovered state of the checkbox.
+     *
      * @internal
      */
     this.hovered = false;
@@ -29,7 +31,7 @@ export class Checkbox {
      * True if the checkbox is initially indeterminate,
      * which is independent from its checked state
      * https://css-tricks.com/indeterminate-checkboxes/
-     * */
+     */
     this.indeterminate = false;
     /**
      * When true, makes the component required for form-submission.
@@ -118,7 +120,7 @@ export class Checkbox {
   // --------------------------------------------------------------------------
   render() {
     return (h(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler },
-      h("div", { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), class: "toggle", onBlur: this.onToggleBlur, onFocus: this.onToggleFocus, ref: (toggleEl) => (this.toggleEl = toggleEl), role: "checkbox", tabIndex: this.disabled ? undefined : 0 },
+      h("div", { "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: "toggle", onBlur: this.onToggleBlur, onFocus: this.onToggleFocus, ref: (toggleEl) => (this.toggleEl = toggleEl), role: "checkbox", tabIndex: this.disabled ? undefined : 0 },
         h("svg", { class: "check-svg", viewBox: "0 0 16 16" },
           h("path", { d: this.getPath() })),
         h("slot", null)),

package/dist/collection/components/chip/chip.css

@@ -84,7 +84,7 @@
   --calcite-chip-spacing-unit-l: 0.5rem;
   --calcite-chip-spacing-unit-s: 0.25rem;
 }
-:host([scale=s]) .chip-image-container {
+:host([scale=s]) .image-container {
   height: 1.25rem;
   width: 1.25rem;
 }
@@ -95,7 +95,7 @@
   --calcite-chip-spacing-unit-l: 0.75rem;
   --calcite-chip-spacing-unit-s: 6px;
 }
-:host([scale=m]) .chip-image-container {
+:host([scale=m]) .image-container {
   height: 1.5rem;
   width: 1.5rem;
   padding-inline-start: 0.25rem;
@@ -107,10 +107,10 @@
   --calcite-chip-spacing-unit-l: 1rem;
   --calcite-chip-spacing-unit-s: 0.5rem;
 }
-:host([scale=l]) .chip-image-container {
+:host([scale=l]) .image-container {
   height: 2rem;
   width: 2rem;
-  padding-left: 0.25rem;
+  padding-inline-start: 0.25rem;
 }
 
 :host {
@@ -162,13 +162,8 @@
   border-style: none;
   background-color: transparent;
   color: var(--calcite-ui-text-1);
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
-  transition-property: all;
-  transition-duration: var(--calcite-animation-timing);
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   -webkit-appearance: none;
   border-start-start-radius: 0;
   border-start-end-radius: 50px;
@@ -191,21 +186,21 @@
   background-color: var(--calcite-chip-transparent-press);
 }
 
-.chip-image-container {
+.image-container {
   display: inline-flex;
-  border-radius: 50%;
   overflow: hidden;
+  border-radius: 50%;
 }
 
 :host slot[name=image]::slotted(*) {
   display: flex;
   height: 100%;
   width: 100%;
-  border-radius: 50%;
   overflow: hidden;
+  border-radius: 50%;
 }
 
-.calcite-chip--icon {
+.chip-icon {
   position: relative;
   margin-top: 0px;
   margin-bottom: 0px;
@@ -250,41 +245,48 @@
   color: var(--calcite-ui-text-1);
 }
 :host([color=grey][appearance=solid]) button,
-:host([color=grey][appearance=solid]) calcite-icon {
+:host([color=grey][appearance=solid]) .close-icon {
   color: var(--calcite-ui-text-3);
 }
+:host([color=grey][appearance=solid]) .chip-icon {
+  color: var(--calcite-ui-icon-color, var(--calcite-ui-text-3));
+}
 
 :host([color=blue][appearance=clear]) {
   border-color: var(--calcite-ui-info);
 }
-:host([color=blue][appearance=clear]) .calcite-chip--icon {
-  color: var(--calcite-ui-info);
+:host([color=blue][appearance=clear]) .chip-icon {
+  color: var(--calcite-ui-icon-color, var(--calcite-ui-info));
 }
 
 :host([color=red][appearance=clear]) {
   border-color: var(--calcite-ui-danger);
 }
-:host([color=red][appearance=clear]) .calcite-chip--icon {
-  color: var(--calcite-ui-danger);
+:host([color=red][appearance=clear]) .chip-icon {
+  color: var(--calcite-ui-icon-color, var(--calcite-ui-danger));
 }
 
 :host([color=yellow][appearance=clear]) {
   border-color: var(--calcite-ui-warning);
 }
-:host([color=yellow][appearance=clear]) .calcite-chip--icon {
-  color: var(--calcite-ui-warning);
+:host([color=yellow][appearance=clear]) .chip-icon {
+  color: var(--calcite-ui-icon-color, var(--calcite-ui-warning));
 }
 
 :host([color=green][appearance=clear]) {
   border-color: var(--calcite-ui-success);
 }
-:host([color=green][appearance=clear]) .calcite-chip--icon {
-  color: var(--calcite-ui-success);
+:host([color=green][appearance=clear]) .chip-icon {
+  color: var(--calcite-ui-icon-color, var(--calcite-ui-success));
 }
 
 :host([color=grey][appearance=clear]) {
   border-color: var(--calcite-ui-border-1);
 }
-:host([color=grey][appearance=clear]) .calcite-chip--icon {
-  color: var(--calcite-ui-text-3);
+:host([color=grey][appearance=clear]) .chip-icon {
+  color: var(--calcite-ui-icon-color, var(--calcite-ui-text-3));
+}
+
+:host([closed]) {
+  display: none;
 }

package/dist/collection/components/chip/chip.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.81
+ * v1.0.0-beta.84
  */
 import { Component, h, Prop, Event, Element, Method } from "@stencil/core";
 import { getSlotted } from "../../utils/dom";
@@ -25,7 +25,9 @@ export class Chip {
     this.color = "grey";
     /** Optionally show a button the user can click to dismiss the chip */
     this.dismissible = false;
-    /** Aria label for the "x" button
+    /**
+     * Aria label for the "x" button
+     *
      * @default "Close"
      */
     this.dismissLabel = TEXT.close;
@@ -33,6 +35,8 @@ export class Chip {
     this.iconFlipRtl = false;
     /** specify the scale of the chip, defaults to m */
     this.scale = "m";
+    /** When true, hides the chip  */
+    this.closed = false;
     // --------------------------------------------------------------------------
     //
     //  Private Methods
@@ -41,6 +45,7 @@ export class Chip {
     this.closeClickHandler = (event) => {
       event.preventDefault();
       this.calciteChipDismiss.emit(this.el);
+      this.closed = true;
     };
     this.guid = guid();
   }
@@ -73,13 +78,13 @@ export class Chip {
   renderChipImage() {
     const { el } = this;
     const hasChipImage = getSlotted(el, SLOTS.image);
-    return hasChipImage ? (h("div", { class: CSS.chipImageContainer, key: "image" },
+    return hasChipImage ? (h("div", { class: CSS.imageContainer, key: "image" },
       h("slot", { name: SLOTS.image }))) : null;
   }
   render() {
-    const iconEl = (h("calcite-icon", { class: CSS.calciteChipIcon, flipRtl: this.iconFlipRtl, icon: this.icon, scale: "s" }));
+    const iconEl = (h("calcite-icon", { class: CSS.chipIcon, flipRtl: this.iconFlipRtl, icon: this.icon, scale: "s" }));
     const closeButton = (h("button", { "aria-describedby": this.guid, "aria-label": this.dismissLabel, class: CSS.close, onClick: this.closeClickHandler, ref: (el) => (this.closeButton = el) },
-      h("calcite-icon", { icon: ICONS.close, scale: "s" })));
+      h("calcite-icon", { class: CSS.closeIcon, icon: ICONS.close, scale: "s" })));
     return (h("div", { class: "container" },
       this.renderChipImage(),
       this.icon ? iconEl : null,
@@ -258,6 +263,24 @@ export class Chip {
       },
       "attribute": "value",
       "reflect": false
+    },
+    "closed": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, hides the chip"
+      },
+      "attribute": "closed",
+      "reflect": true,
+      "defaultValue": "false"
     }
   }; }
   static get events() { return [{

package/dist/collection/components/chip/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.81
+ * v1.0.0-beta.84
  */
 export {};

package/dist/collection/components/chip/resources.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.81
+ * v1.0.0-beta.84
  */
 export const CSS = {
   title: "title",
   close: "close",
-  chipImageContainer: "chip-image-container",
-  calciteChipIcon: "calcite-chip--icon"
+  imageContainer: "image-container",
+  chipIcon: "chip-icon",
+  closeIcon: "close-icon"
 };
 export const TEXT = {
   close: "Close"

package/dist/collection/components/color-picker/color-picker.css

@@ -180,26 +180,18 @@
 .scope {
   pointer-events: none;
   position: absolute;
-  margin-bottom: 0px;
-  margin-right: 0px;
-  height: 0.5rem;
-  width: 0.5rem;
-  padding: 0px;
   font-size: var(--calcite-font-size--1);
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
-  margin-top: -0.25rem;
-  margin-left: -0.25rem;
-  outline-offset: 10px;
+  outline-offset: 14px;
 }
 .scope:focus {
   outline: 2px solid var(--calcite-ui-brand);
-  outline-offset: 12px;
+  outline-offset: 16px;
 }
 
 .color-field-and-slider {
   margin-bottom: -16px;
+  touch-action: none;
 }
 .color-field-and-slider--interactive {
   cursor: pointer;
@@ -260,7 +252,6 @@
 .saved-color {
   outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
   cursor: pointer;
 }
 .saved-color:focus {