From b628ae9a153f77498c4bcbe4d93d21ff7a27c0d7 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Fri, 15 Oct 2021 10:16:07 -0700
Subject: [PATCH 01/15] fix(action)!: deprecating outline appearance (#3263)

---
 src/components/calcite-action/calcite-action.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/calcite-action/calcite-action.tsx b/src/components/calcite-action/calcite-action.tsx
index 79987b55be0..832355bbd68 100755
--- a/src/components/calcite-action/calcite-action.tsx
+++ b/src/components/calcite-action/calcite-action.tsx
@@ -35,7 +35,7 @@ export class CalciteAction {
   //
   // --------------------------------------------------------------------------
   /** Specify the appearance style of the action, defaults to solid. */
-  @Prop({ reflect: true }) appearance: Appearance = "solid";
+  @Prop({ reflect: true }) appearance: Extract<"solid" | "clear", Appearance> = "solid";
 
   /**
    * Indicates whether the action is highlighted.

From 663a779f58d83d541c9051d9254942b4c248bd50 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Fri, 15 Oct 2021 10:57:30 -0700
Subject: [PATCH 02/15] docs(conventions): fixing grammar errors (#3261)

---
 conventions/README.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/conventions/README.md b/conventions/README.md
index cd315f7fcd0..cdc7211f8d1 100644
--- a/conventions/README.md
+++ b/conventions/README.md
@@ -205,18 +205,18 @@ Calcite Components broadly targets two groups of projects inside Esri:
 - **Sites** like [esri.com](https://esri.com) and [developers.arcgis.com](https://developers.arcgis.com).
 - **Apps** like [ArcGIS Online](https://arcgis.com), [Vector Tile Style Editor](https://developers.arcgis.com/vector-tile-style-editor), [Workforce](https://www.esri.com/en-us/arcgis/products/workforce/overview), [ArcGIS Hub](https://hub.arcgis.com) etc...
 
-Components should present the the minimum possible implementation to be usable by both sites and apps and leave as much as possible to users.
+Components should present the minimum possible implementation to be usable by both sites and apps and leave as much as possible to users.
 
 It is generally agreed on that components should not:
 
-- Make network requests. Authentication and the exact environment of the request is difficult to mange and better left to the specific application or site.
-- Manage routing or manipulate the URL. managing the URL is the the domain and the specific site or app.
+- Make network requests. Authentication and the exact environment of the request is difficult to manage and better left to the specific application or site.
+- Manage routing or manipulate the URL. Managing the URL is the domain of the specific site or app.
 - Implement any feature which can easily be achieved with simple CSS and HTML. E.x. it was decided that `<calcite-switch>` should not support `text` or `position` properties because those could be easily duplicated with CSS ([ref](https://github.com/ArcGIS/calcite-components/pull/24#discussion_r289424140))
 - Implement any component which might replace a browser feature, without adding functionality that goes above and beyond what browser defaults would provide.
 
 However components are allowed to:
 
-- Use or implement `localStorage` if there is specific use case.
+- Use or implement `localStorage` if there is a specific use case.
 - Communicate with other components if a specific use case exists.
 
 **Discussed In**:

From 6a1c9041d26925691333f1431ba023482089ab53 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Fri, 15 Oct 2021 11:32:49 -0700
Subject: [PATCH 03/15] fix(action): fixing RTL display bugs by replacing
 getElementDir and RTL CSS classes with CSS logical properties (#3140)

---
 .storybook/resources.ts                       |  22 +-
 .../calcite-action-bar.e2e.ts                 |  16 -
 .../calcite-action-pad.e2e.ts                 |  16 -
 .../calcite-action/calcite-action.scss        | 126 ++---
 .../calcite-action/calcite-action.stories.ts  | 476 +++++++++++++++++-
 .../calcite-action/calcite-action.tsx         |  14 +-
 src/demos/calcite-action.html                 |  68 +++
 7 files changed, 574 insertions(+), 164 deletions(-)

diff --git a/.storybook/resources.ts b/.storybook/resources.ts
index eb3ad7b44e2..169f2624635 100644
--- a/.storybook/resources.ts
+++ b/.storybook/resources.ts
@@ -1,4 +1,4 @@
-import { Appearance, Position, Scale } from "../src/components/interfaces";
+import { Alignment, Appearance, Position, Scale } from "../src/components/interfaces";
 
 interface AttributeMetadata<T> {
   values: T[];
@@ -6,26 +6,32 @@ interface AttributeMetadata<T> {
 }
 
 interface CommonAttributes {
+  alignment: AttributeMetadata<Alignment>;
+  appearance: AttributeMetadata<Appearance>;
   scale: AttributeMetadata<Scale>;
   position: AttributeMetadata<Position>;
-  appearance: AttributeMetadata<Appearance>;
 }
 
 const positionOptions: Position[] = ["start", "end"];
 const scaleOptions: Scale[] = ["s", "m", "l"];
+const alignmentOptions: Alignment[] = ["start", "center", "end"];
 const appearanceOptions: Appearance[] = ["solid", "clear", "outline"];
 
 export const ATTRIBUTES: CommonAttributes = {
-  scale: {
-    values: scaleOptions,
-    defaultValue: scaleOptions[1]
+  alignment: {
+    values: alignmentOptions,
+    defaultValue: alignmentOptions[0]
+  },
+  appearance: {
+    values: appearanceOptions,
+    defaultValue: appearanceOptions[0]
   },
   position: {
     values: positionOptions,
     defaultValue: positionOptions[0]
   },
-  appearance: {
-    values: appearanceOptions,
-    defaultValue: appearanceOptions[0]
+  scale: {
+    values: scaleOptions,
+    defaultValue: scaleOptions[1]
   }
 };
diff --git a/src/components/calcite-action-bar/calcite-action-bar.e2e.ts b/src/components/calcite-action-bar/calcite-action-bar.e2e.ts
index e098080a873..81e19396fb0 100755
--- a/src/components/calcite-action-bar/calcite-action-bar.e2e.ts
+++ b/src/components/calcite-action-bar/calcite-action-bar.e2e.ts
@@ -135,22 +135,6 @@ describe("calcite-action-bar", () => {
       expect(textEnabled).toBe(true);
     });
 
-    describe("when el direction is 'rtl'", () => {
-      it("should render child action expand toggle with correct class", async () => {
-        const page = await newE2EPage();
-        await page.setContent(html`
-          <calcite-action-bar dir="rtl">
-            <calcite-action text="Add" icon="plus"></calcite-action>
-          </calcite-action-bar>
-        `);
-        const buttonGroup = await page.find(`calcite-action-bar >>> .${CSS.actionGroupBottom}`);
-        const actionEl = await buttonGroup.find("calcite-action");
-        await actionEl.click();
-        const button = await actionEl.shadowRoot.querySelector("button");
-        expect(button).toHaveClass(CSS_UTILITY.rtl);
-      });
-    });
-
     it("should not have bottomGroup when not expandable", async () => {
       const page = await newE2EPage();
 
diff --git a/src/components/calcite-action-pad/calcite-action-pad.e2e.ts b/src/components/calcite-action-pad/calcite-action-pad.e2e.ts
index fcecb59519b..e58a144e858 100755
--- a/src/components/calcite-action-pad/calcite-action-pad.e2e.ts
+++ b/src/components/calcite-action-pad/calcite-action-pad.e2e.ts
@@ -117,22 +117,6 @@ describe("calcite-action-pad", () => {
     });
   });
 
-  describe("when el direction is 'rtl'", () => {
-    it("should render child action expand toggle with correct class", async () => {
-      const page = await newE2EPage();
-      await page.setContent(`
-        <calcite-action-pad dir='rtl'>
-          <calcite-action text="Add" icon="plus"></calcite-action>
-        </calcite-action-pad>
-      `);
-      const buttonGroup = await page.find(`calcite-action-pad >>> .${CSS.actionGroupBottom}`);
-      const actionEl = await buttonGroup.find("calcite-action");
-      await actionEl.click();
-      const button = await actionEl.shadowRoot.querySelector("button");
-      expect(button).toHaveClass(CSS_UTILITY.rtl);
-    });
-  });
-
   it("should not have bottomGroup when not expandable", async () => {
     const page = await newE2EPage();
 
diff --git a/src/components/calcite-action/calcite-action.scss b/src/components/calcite-action/calcite-action.scss
index e5bc331ac8d..08bea30fefb 100755
--- a/src/components/calcite-action/calcite-action.scss
+++ b/src/components/calcite-action/calcite-action.scss
@@ -69,7 +69,7 @@
     @apply font-normal p-2 text--2h;
   }
   .button--text-visible .icon-container {
-    @apply mr-2;
+    margin-inline-end: theme("spacing.2");
   }
 }
 
@@ -78,7 +78,7 @@
     @apply font-normal p-4 text--1h;
   }
   .button--text-visible .icon-container {
-    @apply mr-3;
+    margin-inline-end: theme("spacing.3");
   }
 }
 
@@ -87,7 +87,7 @@
     @apply font-normal p-5 text-0h;
   }
   .button--text-visible .icon-container {
-    @apply mr-4;
+    margin-inline-end: theme("spacing.4");
   }
 }
 
@@ -123,37 +123,6 @@
 
 .button--text-visible {
   @apply w-full;
-
-  .icon-container {
-    @apply m-0;
-  }
-  .text-container--visible {
-    @apply m-0 mr-2;
-  }
-}
-
-.button--text-visible.calcite--rtl {
-  .text-container--visible {
-    @apply m-0 ml-2;
-  }
-}
-
-:host([scale="s"]) {
-  .button--text-visible.calcite--rtl .icon-container {
-    @apply m-0 ml-2;
-  }
-}
-
-:host([scale="m"]) {
-  .button--text-visible.calcite--rtl .icon-container {
-    @apply m-0 ml-3;
-  }
-}
-
-:host([scale="l"]) {
-  .button--text-visible.calcite--rtl .icon-container {
-    @apply m-0 ml-4;
-  }
 }
 
 :host([active]) .button,
@@ -216,64 +185,45 @@
   @apply opacity-disabled bg-foreground-3;
 }
 
-:host([indicator]) .button--text-visible,
-:host([indicator][scale="s"]) .button--text-visible,
-:host([indicator][scale="l"]) .button--text-visible {
-  @apply pr-4;
-}
-
-:host([indicator]) .button::after {
-  content: "";
-  @apply absolute
-    border-2
-    bg-brand
-    rounded-full
-    h-2
-    w-2
-    z-10;
-  border-color: theme("colors.background.foreground.1");
-  bottom: theme("spacing.2");
-  right: theme("spacing.2");
-}
-
-:host([indicator][scale="s"]) .button::after {
-  bottom: theme("spacing.1");
-  right: theme("spacing.1");
-}
-
-:host([indicator][scale="l"]) .button::after {
-  bottom: theme("spacing.2");
-  right: theme("spacing.2");
-}
-
-:host([indicator]) .calcite--rtl::after {
-  @apply right-auto;
-  left: theme("spacing.1");
-}
-
-:host([indicator]) .button--text-visible.calcite--rtl {
-  @apply pr-3 pl-4;
+:host([indicator]) {
+  .button::after {
+    content: "";
+    @apply absolute
+      border-2
+      bg-brand
+      rounded-full
+      h-2
+      w-2
+      z-10;
+    border-color: theme("colors.background.foreground.1");
+    inset-block-end: theme("spacing.3");
+    inset-inline-end: theme("spacing.3");
+  }
+  .button--text-visible {
+    &::after {
+      inset-block-end: auto;
+    }
+    .text-container--visible {
+      margin-inline-end: theme("spacing.4");
+    }
+  }
+  .button:hover::after,
+  .button:focus::after {
+    border-color: theme("colors.background.foreground.1");
+  }
 }
 
-:host([indicator]) .button:hover::after,
-:host([indicator]) .button:focus::after {
-  border-color: theme("colors.background.foreground.1");
+:host([indicator][scale="s"]) {
+  .button::after {
+    inset-block-end: theme("spacing.1");
+    inset-inline-end: theme("spacing.1");
+  }
+  .button--text-visible::after {
+    inset-block-end: auto;
+    inset-inline-end: theme("spacing.2");
+  }
 }
 
 :host([indicator][active]) .button::after {
   border-color: theme("colors.background.foreground.3");
 }
-
-:host([indicator]) .button--text-visible::after,
-:host([indicator][scale="s"]) .button--text-visible::after,
-:host([indicator][scale="l"]) .button--text-visible::after {
-  @apply bottom-auto;
-  right: theme("spacing.2");
-}
-
-:host([indicator]) .button--text-visible.calcite--rtl::after,
-:host([indicator][scale="s"]) .button--text-visible.calcite--rtl::after,
-:host([indicator][scale="l"]) .button--text-visible.calcite--rtl::after {
-  @apply right-auto;
-  left: theme("spacing.2");
-}
diff --git a/src/components/calcite-action/calcite-action.stories.ts b/src/components/calcite-action/calcite-action.stories.ts
index aba11a1bed9..115cfb1112f 100644
--- a/src/components/calcite-action/calcite-action.stories.ts
+++ b/src/components/calcite-action/calcite-action.stories.ts
@@ -3,11 +3,13 @@ import {
   Attribute,
   filterComponentAttributes,
   Attributes,
-  createComponentHTML as create,
-  themesDarkDefault
+  createComponentHTML as create
 } from "../../../.storybook/utils";
 import readme from "./readme.md";
+import { html } from "../../tests/utils";
+import { createSteps, iconNames, stepStory, setTheme, setKnobs } from "../../../.storybook/helpers";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+const { alignment, scale } = ATTRIBUTES;
 
 export default {
   title: "Components/Buttons/Action",
@@ -17,27 +19,40 @@ export default {
 };
 
 const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ exceptions } = { exceptions: [] }) => {
-  const { appearance, scale } = ATTRIBUTES;
-
   return filterComponentAttributes(
     [
+      {
+        name: "active",
+        commit(): Attribute {
+          this.value = boolean("active", false);
+          delete this.build;
+          return this;
+        }
+      },
+      {
+        name: "alignment",
+        commit(): Attribute {
+          this.value = select("alignment", alignment.values, alignment.defaultValue);
+          delete this.build;
+          return this;
+        }
+      },
       {
         name: "appearance",
         commit(): Attribute {
-          this.value = select("appearance", appearance.values, appearance.defaultValue);
+          this.value = select("appearance", ["solid", "clear"], "solid");
           delete this.build;
           return this;
         }
       },
       {
-        name: "active",
+        name: "compact",
         commit(): Attribute {
-          this.value = boolean("active", false);
+          this.value = boolean("compact", false);
           delete this.build;
           return this;
         }
       },
-
       {
         name: "disabled",
         commit(): Attribute {
@@ -49,7 +64,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({
       {
         name: "icon",
         commit(): Attribute {
-          this.value = text("icon", "beaker");
+          this.value = select("icon", ["", ...iconNames], "");
           delete this.build;
           return this;
         }
@@ -101,28 +116,435 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({
           delete this.build;
           return this;
         }
+      },
+      {
+        name: "style",
+        commit(): Attribute {
+          this.value = boolean("textEnabled", true);
+          delete this.build;
+          return this;
+        }
       }
     ],
     exceptions
   );
 };
 
-export const basic = (): string => create("calcite-action", createAttributes());
-export const darkThemeRTL = (): string =>
-  create(
-    "calcite-action",
-    createAttributes({ exceptions: ["dir", "class"] }).concat([
-      {
-        name: "dir",
-        value: "rtl"
-      },
-      {
-        name: "class",
-        value: "calcite-theme-dark"
-      }
-    ])
-  );
+const selector = "calcite-action";
 
-darkThemeRTL.story = {
-  parameters: { themes: themesDarkDefault }
-};
+export const Default = stepStory(
+  (): string => html`<div style="width: 150px">${create("calcite-action", createAttributes())}</div>`,
+
+  createSteps("calcite-action")
+    // No Icon
+    .snapshot("No Icon")
+
+    // Default
+    .executeScript(
+      setKnobs({
+        story: "components-buttons-action--default",
+        knobs: [{ name: "icon", value: "beaker" }]
+      })
+    )
+    .snapshot("Default")
+    .hover(selector)
+    .snapshot("Default Hover")
+    .mouseDown(selector)
+    .snapshot("Default Mouse Down")
+    .mouseUp(selector)
+    .snapshot("Default Mouse Up")
+
+    // Active
+    .executeScript(
+      setKnobs({
+        story: "components-buttons-action--default",
+        knobs: [
+          { name: "active", value: "true" },
+          { name: "icon", value: "beaker" }
+        ]
+      })
+    )
+    .snapshot("Active")
+    .hover(selector)
+    .snapshot("Active Hover")
+    .mouseDown(selector)
+    .snapshot("Active Mouse Down")
+    .mouseUp(selector)
+    .snapshot("Active Mouse Up")
+
+    // Alignment Center
+    .executeScript(
+      setKnobs({
+        story: "components-buttons-action--default",
+        knobs: [
+          { name: "alignment", value: "center" },
+          { name: "icon", value: "beaker" }
+        ]
+      })
+    )
+    .snapshot("Alignment Center")
+
+    // Alignment End
+    .executeScript(
+      setKnobs({
+        story: "components-buttons-action--default",
+        knobs: [
+          { name: "alignment", value: "end" },
+          { name: "icon", value: "beaker" }
+        ]
+      })
+    )
+    .snapshot("Alignment End")
+
+    // Appearance Clear
+    .executeScript(
+      setKnobs({
+        story: "components-buttons-action--default",
+        knobs: [
+          { name: "appearance", value: "clear" },
+          { name: "icon", value: "beaker" }
+        ]
+      })
+    )
+    .snapshot("Appearance Clear")
+    .hover(selector)
+    .snapshot("Appearance Clear Hover")
+    .mouseDown(selector)
+    .snapshot("Appearance Clear Mouse Down")
+    .mouseUp(selector)
+    .snapshot("Appearance Clear Mouse Up")
+
+    // Compact
+    .executeScript(
+      setKnobs({
+        story: "components-buttons-action--default",
+        knobs: [
+          { name: "compact", value: "true" },
+          { name: "icon", value: "beaker" }
+        ]
+      })
+    )
+    .snapshot("Compact Alignment Start")
+    .executeScript(
+      setKnobs({
+        story: "components-buttons-action--default",
+        knobs: [
+          { name: "alignment", value: "end" },
+          { name: "compact", value: "true" },
+          { name: "icon", value: "beaker" }
+        ]
+      })
+    )
+    .snapshot("Compact Alignment End")
+    .executeScript(
+      setKnobs({
+        story: "components-buttons-action--default",
+        knobs: [
+          { name: "compact", value: "true" },
+          { name: "textEnabled", value: "false" },
+          { name: "icon", value: "beaker" }
+        ]
+      })
+    )
+    .snapshot("Compact Text Disabled")
+
+    // Dark
+    .executeScript(
+      setKnobs({
+        story: "components-buttons-action--default",
+        knobs: [
+          { name: "indicator", value: "true" },
+          { name: "icon", value: "beaker" }
+        ]
+      })
+    )
+    .executeScript(setTheme("dark"))
+    .snapshot("Dark")
+    .hover(selector)
+    .snapshot("Dark Hover")
+    .mouseDown(selector)
+    .snapshot("Dark Mouse Down")
+    .mouseUp(selector)
+    .snapshot("Dark Mouse Up")
+    .executeScript(
+      setKnobs({
+        story: "components-buttons-action--default",
+        knobs: [
+          { name: "active", value: "true" },
+          { name: "icon", value: "beaker" },
+          { name: "indicator", value: "true" }
+        ]
+      })
+    )
+    .executeScript(setTheme("dark"))
+    .snapshot("Dark Active")
+    .executeScript(
+      setKnobs({
+        story: "components-buttons-action--default",
+        knobs: [
+          { name: "active", value: "true" },
+          { name: "disabled", value: "true" },
+          { name: "indicator", value: "true" },
+          { name: "icon", value: "beaker" }
+        ]
+      })
+    )
+    .executeScript(setTheme("dark"))
+    .snapshot("Dark Active Disabled")
+
+    // Disabled
+    .executeScript(
+      setKnobs({
+        story: "components-buttons-action--default",
+        knobs: [
+          { name: "active", value: "true" },
+          { name: "disabled", value: "true" },
+          { name: "indicator", value: "true" },
+          { name: "icon", value: "beaker" }
+        ]
+      })
+    )
+    .executeScript(setTheme("light"))
+    .snapshot("Disabled Active")
+    .executeScript(
+      setKnobs({
+        story: "components-buttons-action--default",
+        knobs: [
+          { name: "appearance", value: "solid" },
+          { name: "disabled", value: "true" },
+          { name: "indicator", value: "true" },
+          { name: "icon", value: "beaker" }
+        ]
+      })
+    )
+    .snapshot("Disabled Appearance Solid")
+    .executeScript(
+      setKnobs({
+        story: "components-buttons-action--default",
+        knobs: [
+          { name: "appearance", value: "clear" },
+          { name: "disabled", value: "true" },
+          { name: "indicator", value: "true" },
+          { name: "icon", value: "beaker" }
+        ]
+      })
+    )
+    .snapshot("Disabled Appearance Clear")
+
+    // Indicator
+    .executeScript(
+      setKnobs({
+        story: "components-buttons-action--default",
+        knobs: [
+          { name: "indicator", value: "true" },
+          { name: "icon", value: "beaker" }
+        ]
+      })
+    )
+    .snapshot("Indicator")
+    .executeScript(
+      setKnobs({
+        story: "components-buttons-action--default",
+        knobs: [
+          { name: "indicator", value: "true" },
+          { name: "textEnabled", value: "false" },
+          { name: "icon", value: "beaker" }
+        ]
+      })
+    )
+    .snapshot("Indicator Text Disabled")
+
+    // Loading
+    .executeScript(
+      setKnobs({
+        story: "components-buttons-action--default",
+        knobs: [
+          { name: "loading", value: "true" },
+          { name: "icon", value: "beaker" }
+        ]
+      })
+    )
+    .snapshot("Loading")
+    .executeScript(
+      setKnobs({
+        story: "components-buttons-action--default",
+        knobs: [
+          { name: "loading", value: "true" },
+          { name: "textEnabled", value: "false" },
+          { name: "icon", value: "beaker" }
+        ]
+      })
+    )
+    .snapshot("Loading Text Disabled")
+
+    // RTL
+    .executeScript(
+      setKnobs({
+        story: "components-buttons-action--default",
+        knobs: [
+          { name: "alignment", value: "start" },
+          { name: "icon", value: "beaker" }
+        ]
+      })
+    )
+    .rtl()
+    .snapshot("RTL Alignment Start")
+    .executeScript(
+      setKnobs({
+        story: "components-buttons-action--default",
+        knobs: [
+          { name: "alignment", value: "center" },
+          { name: "icon", value: "beaker" }
+        ]
+      })
+    )
+    .rtl()
+    .snapshot("RTL Alignment Center")
+    .executeScript(
+      setKnobs({
+        story: "components-buttons-action--default",
+        knobs: [
+          { name: "alignment", value: "end" },
+          { name: "icon", value: "beaker" }
+        ]
+      })
+    )
+    .rtl()
+    .snapshot("RTL Alignment End")
+
+    // RTL Indicator
+    .executeScript(
+      setKnobs({
+        story: "components-buttons-action--default",
+        knobs: [
+          { name: "alignment", value: "start" },
+          { name: "indicator", value: "true" },
+          { name: "icon", value: "beaker" }
+        ]
+      })
+    )
+    .rtl()
+    .snapshot("RTL Indicator Alignment Start")
+    .executeScript(
+      setKnobs({
+        story: "components-buttons-action--default",
+        knobs: [
+          { name: "alignment", value: "center" },
+          { name: "indicator", value: "true" },
+          { name: "icon", value: "beaker" }
+        ]
+      })
+    )
+    .rtl()
+    .snapshot("RTL Indicator Alignment Center")
+    .executeScript(
+      setKnobs({
+        story: "components-buttons-action--default",
+        knobs: [
+          { name: "alignment", value: "end" },
+          { name: "indicator", value: "true" },
+          { name: "icon", value: "beaker" }
+        ]
+      })
+    )
+    .rtl()
+    .snapshot("RTL Indicator Alignment End")
+
+    // RTL Loading
+    .executeScript(
+      setKnobs({
+        story: "components-buttons-action--default",
+        knobs: [
+          { name: "alignment", value: "start" },
+          { name: "loading", value: "true" },
+          { name: "icon", value: "beaker" }
+        ]
+      })
+    )
+    .rtl()
+    .snapshot("RTL Loading Alignment Start")
+    .executeScript(
+      setKnobs({
+        story: "components-buttons-action--default",
+        knobs: [
+          { name: "alignment", value: "center" },
+          { name: "loading", value: "true" },
+          { name: "icon", value: "beaker" }
+        ]
+      })
+    )
+    .rtl()
+    .snapshot("RTL Loading Alignment Center")
+    .executeScript(
+      setKnobs({
+        story: "components-buttons-action--default",
+        knobs: [
+          { name: "alignment", value: "end" },
+          { name: "loading", value: "true" },
+          { name: "icon", value: "beaker" }
+        ]
+      })
+    )
+    .rtl()
+    .snapshot("RTL Loading Alignment End")
+
+    // Scale
+    .executeScript(
+      setKnobs({
+        story: "components-buttons-action--default",
+        knobs: [
+          { name: "indicator", value: "true" },
+          { name: "scale", value: "s" },
+          { name: "icon", value: "beaker" }
+        ]
+      })
+    )
+    .snapshot("Scale Small")
+    .executeScript(
+      setKnobs({
+        story: "components-buttons-action--default",
+        knobs: [
+          { name: "indicator", value: "true" },
+          { name: "scale", value: "s" },
+          { name: "textEnabled", value: "false" },
+          { name: "icon", value: "beaker" }
+        ]
+      })
+    )
+    .snapshot("Scale Small Text Disabled")
+    .executeScript(
+      setKnobs({
+        story: "components-buttons-action--default",
+        knobs: [
+          { name: "indicator", value: "true" },
+          { name: "scale", value: "l" },
+          { name: "icon", value: "beaker" }
+        ]
+      })
+    )
+    .snapshot("Scale Large")
+    .executeScript(
+      setKnobs({
+        story: "components-buttons-action--default",
+        knobs: [
+          { name: "indicator", value: "true" },
+          { name: "scale", value: "l" },
+          { name: "textEnabled", value: "false" },
+          { name: "icon", value: "beaker" }
+        ]
+      })
+    )
+    .snapshot("Scale Large Text Disabled")
+
+    // Text
+    .executeScript(
+      setKnobs({
+        story: "components-buttons-action--default",
+        knobs: [
+          { name: "text", value: "A long amount of text" },
+          { name: "icon", value: "beaker" }
+        ]
+      })
+    )
+    .snapshot("Text Overflow")
+);
diff --git a/src/components/calcite-action/calcite-action.tsx b/src/components/calcite-action/calcite-action.tsx
index 832355bbd68..c772c43107d 100755
--- a/src/components/calcite-action/calcite-action.tsx
+++ b/src/components/calcite-action/calcite-action.tsx
@@ -15,9 +15,6 @@ import { Alignment, Appearance, Scale } from "../interfaces";
 
 import { CSS, TEXT } from "./resources";
 
-import { CSS_UTILITY } from "../../utils/resources";
-
-import { getElementDir } from "../../utils/dom";
 import { createObserver } from "../../utils/observers";
 
 /**
@@ -34,8 +31,6 @@ export class CalciteAction {
   //  Properties
   //
   // --------------------------------------------------------------------------
-  /** Specify the appearance style of the action, defaults to solid. */
-  @Prop({ reflect: true }) appearance: Extract<"solid" | "clear", Appearance> = "solid";
 
   /**
    * Indicates whether the action is highlighted.
@@ -47,6 +42,9 @@ export class CalciteAction {
    */
   @Prop({ reflect: true }) alignment?: Alignment;
 
+  /** Specify the appearance style of the action, defaults to solid. */
+  @Prop({ reflect: true }) appearance: Extract<"solid" | "clear", Appearance> = "solid";
+
   /**
    * Compact mode is used internally by components to reduce side padding, e.g. calcite-block-section.
    */
@@ -198,16 +196,14 @@ export class CalciteAction {
   }
 
   render(): VNode {
-    const { compact, disabled, loading, el, textEnabled, label, text } = this;
+    const { compact, disabled, loading, textEnabled, label, text } = this;
 
     const ariaLabel = label || text;
-    const rtl = getElementDir(el) === "rtl";
 
     const buttonClasses = {
       [CSS.button]: true,
       [CSS.buttonTextVisible]: textEnabled,
-      [CSS.buttonCompact]: compact,
-      [CSS_UTILITY.rtl]: rtl
+      [CSS.buttonCompact]: compact
     };
 
     return (
diff --git a/src/demos/calcite-action.html b/src/demos/calcite-action.html
index d9761148b0b..7a46c9cddea 100644
--- a/src/demos/calcite-action.html
+++ b/src/demos/calcite-action.html
@@ -227,6 +227,40 @@
     <!-- alignment center  -->
     <div class="parent">
       <div class="child right-aligned-text">alignment center</div>
+      <div class="child">
+        <calcite-action
+          alignment="center"
+          scale="s"
+          icon="configure-popup"
+          text="hello world 2"
+          text-enabled
+        ></calcite-action>
+      </div>
+
+      <div class="child">
+        <calcite-action
+          alignment="center"
+          scale="m"
+          icon="configure-popup"
+          text="hello world 2"
+          text-enabled
+        ></calcite-action>
+      </div>
+
+      <div class="child">
+        <calcite-action
+          alignment="center"
+          scale="l"
+          icon="configure-popup"
+          text="hello world 2"
+          text-enabled
+        ></calcite-action>
+      </div>
+    </div>
+
+    <!-- alignment center indicator  -->
+    <div class="parent">
+      <div class="child right-aligned-text">alignment center with indicator</div>
       <div class="child">
         <calcite-action
           alignment="center"
@@ -264,6 +298,40 @@
     <!-- alignment end  -->
     <div class="parent">
       <div class="child right-aligned-text">alignment end</div>
+      <div class="child">
+        <calcite-action
+          alignment="end"
+          scale="s"
+          icon="configure-popup"
+          text="hello world 2"
+          text-enabled
+        ></calcite-action>
+      </div>
+
+      <div class="child">
+        <calcite-action
+          alignment="end"
+          scale="m"
+          icon="configure-popup"
+          text="hello world 2"
+          text-enabled
+        ></calcite-action>
+      </div>
+
+      <div class="child">
+        <calcite-action
+          alignment="end"
+          scale="l"
+          icon="configure-popup"
+          text="hello world 2"
+          text-enabled
+        ></calcite-action>
+      </div>
+    </div>
+
+    <!-- alignment end with indicator  -->
+    <div class="parent">
+      <div class="child right-aligned-text">alignment end with indicator</div>
       <div class="child">
         <calcite-action
           alignment="end"

From 13cbc7c27d3ca088877b7e7f32b8abe8d819f520 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Fri, 15 Oct 2021 11:36:00 -0700
Subject: [PATCH 04/15] refactor: Convert SASS division to multiplication where
 possible. #3249 (#3268)

* refactor: Convert SASS division to multiplication where possible. #3249

* use calc

* fix negate
---
 src/assets/styles/_popper.scss                     |  2 +-
 src/components/calcite-loader/calcite-loader.scss  | 12 ++++++------
 src/components/calcite-slider/calcite-slider.scss  | 14 +++++++-------
 .../calcite-tile-select/calcite-tile-select.scss   |  2 +-
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/assets/styles/_popper.scss b/src/assets/styles/_popper.scss
index c279f3a8f40..5694d2c2042 100644
--- a/src/assets/styles/_popper.scss
+++ b/src/assets/styles/_popper.scss
@@ -103,7 +103,7 @@ $popper-default-z-index: 900;
 }
 
 $pointer_size: 8px;
-$pointer_offset: -$pointer_size/2;
+$pointer_offset: -$pointer_size * 0.5;
 
 @mixin popperArrow {
   .arrow,
diff --git a/src/components/calcite-loader/calcite-loader.scss b/src/components/calcite-loader/calcite-loader.scss
index 3f7a1d7a6b2..7cff222afbc 100644
--- a/src/components/calcite-loader/calcite-loader.scss
+++ b/src/components/calcite-loader/calcite-loader.scss
@@ -118,13 +118,13 @@ $loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159;
   height: var(--calcite-loader-size-inline);
   min-height: var(--calcite-loader-size-inline);
   width: var(--calcite-loader-size-inline);
-  margin-right: var(--calcite-loader-size-inline) / 2;
-  vertical-align: -var(--calcite-loader-size-inline) / 5;
+  margin-right: calc(var(--calcite-loader-size-inline) * 0.5);
+  vertical-align: calc(var(--calcite-loader-size-inline) * -1 * 0.2);
 }
 
 :host([inline][dir="rtl"]) {
   @apply mr-0;
-  margin-left: var(--calcite-loader-size-inline) / 2;
+  margin-left: calc(var(--calcite-loader-size-inline) * 0.5);
 }
 
 :host([active][inline]) {
@@ -173,8 +173,8 @@ $loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159;
 */
 @mixin generateSegment($i, $size, $growth, $duration) {
   $circumference: $loader-circumference / $loader-scale * 100%;
-  $length: ($size / 100) * $circumference;
-  $end: $length + ($growth / 100) * $circumference;
+  $length: ($size * 0.01) * $circumference;
+  $end: $length + ($growth * 0.01) * $circumference;
   .loader__svg--#{$i} {
     stroke-dasharray: $length $circumference - $end;
     animation-duration: $duration;
@@ -186,7 +186,7 @@ $loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159;
     }
     50% {
       stroke-dasharray: $end $circumference - $end;
-      stroke-dashoffset: -$circumference / 2 - ($length - $end) / 2;
+      stroke-dashoffset: -$circumference * 0.5 - ($length - $end) * 0.5;
     }
     100% {
       stroke-dasharray: $length $circumference - $length;
diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss
index cc3f362dfdd..8d5f2ae3e13 100644
--- a/src/components/calcite-slider/calcite-slider.scss
+++ b/src/components/calcite-slider/calcite-slider.scss
@@ -1,6 +1,6 @@
 $thumb-size: 28px;
 $handle-size: 14px;
-$thumb-padding: ($thumb-size - $handle-size) / 2;
+$thumb-padding: ($thumb-size - $handle-size) * 0.5;
 $track-height: 2px;
 $tick-height: 4px;
 
@@ -19,8 +19,8 @@ $tick-height: 4px;
 
 .container {
   @apply block relative;
-  padding: $handle-size / 2 0;
-  margin: $handle-size / 2 theme("margin.2");
+  padding: $handle-size * 0.5 0;
+  margin: $handle-size * 0.5 theme("margin.2");
 }
 
 :host([disabled]) {
@@ -295,7 +295,7 @@ $tick-height: 4px;
 
 .tick {
   position: absolute;
-  top: -$tick-height / 2;
+  top: -$tick-height * 0.5;
   width: 2px;
   height: $tick-height;
   left: var(--calcite-ui-border-1-offset);
@@ -314,7 +314,7 @@ $tick-height: 4px;
   font-weight: 500;
   color: var(--calcite-ui-text-2);
   width: 4em;
-  margin: $thumb-size / 2 -2em;
+  margin: $thumb-size * 0.5 -2em;
   text-align: center;
   display: block;
   pointer-events: none;
@@ -322,7 +322,7 @@ $tick-height: 4px;
 
 .tick__label--min {
   left: 0;
-  margin: $thumb-size / 2 -3px;
+  margin: $thumb-size * 0.5 -3px;
   text-align: left;
   transition: opacity 150ms;
 }
@@ -330,7 +330,7 @@ $tick-height: 4px;
 .tick__label--max {
   left: unset;
   right: 0;
-  margin: $thumb-size / 2 -3px;
+  margin: $thumb-size * 0.5 -3px;
   text-align: right;
   transition: opacity 50ms;
 }
diff --git a/src/components/calcite-tile-select/calcite-tile-select.scss b/src/components/calcite-tile-select/calcite-tile-select.scss
index 5696ef59748..c7828ddae40 100644
--- a/src/components/calcite-tile-select/calcite-tile-select.scss
+++ b/src/components/calcite-tile-select/calcite-tile-select.scss
@@ -1,4 +1,4 @@
-$spacing: $baseline/2;
+$spacing: $baseline * 0.5;
 
 .root {
   background-color: var(--calcite-ui-foreground-1);

From 61b460a895a51d762cdf2fcfe2d0a256ed90c9a9 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Fri, 15 Oct 2021 15:11:20 -0700
Subject: [PATCH 05/15] refactor: change onLabelClick to be a class method
 (#3165)

#3161
---
 src/components/calcite-button/calcite-button.tsx              | 4 ++--
 src/components/calcite-checkbox/calcite-checkbox.tsx          | 4 ++--
 src/components/calcite-combobox/calcite-combobox.tsx          | 4 ++--
 .../calcite-inline-editable/calcite-inline-editable.tsx       | 4 ++--
 .../calcite-input-date-picker/calcite-input-date-picker.tsx   | 4 ++--
 .../calcite-input-time-picker/calcite-input-time-picker.tsx   | 4 ++--
 src/components/calcite-input/calcite-input.tsx                | 4 ++--
 src/components/calcite-radio-button/calcite-radio-button.tsx  | 4 ++--
 src/components/calcite-radio-group/calcite-radio-group.tsx    | 4 ++--
 src/components/calcite-rating/calcite-rating.tsx              | 4 ++--
 src/components/calcite-select/calcite-select.tsx              | 4 ++--
 src/components/calcite-slider/calcite-slider.tsx              | 4 ++--
 src/components/calcite-switch/calcite-switch.tsx              | 4 ++--
 13 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/src/components/calcite-button/calcite-button.tsx b/src/components/calcite-button/calcite-button.tsx
index 11a0bf2d6cf..cbc59e1100c 100644
--- a/src/components/calcite-button/calcite-button.tsx
+++ b/src/components/calcite-button/calcite-button.tsx
@@ -253,10 +253,10 @@ export class CalciteButton implements LabelableComponent {
   //
   //--------------------------------------------------------------------------
 
-  onLabelClick = (event: CustomEvent): void => {
+  onLabelClick(event: CustomEvent): void {
     this.handleClick(event);
     this.setFocus();
-  };
+  }
 
   // act on a requested or nearby form based on type
   private handleClick = (e: Event): void => {
diff --git a/src/components/calcite-checkbox/calcite-checkbox.tsx b/src/components/calcite-checkbox/calcite-checkbox.tsx
index 9a1c71da221..ea45f2392ed 100644
--- a/src/components/calcite-checkbox/calcite-checkbox.tsx
+++ b/src/components/calcite-checkbox/calcite-checkbox.tsx
@@ -202,9 +202,9 @@ export class CalciteCheckbox implements LabelableComponent {
     this.calciteInternalCheckboxFocus.emit(true);
   }
 
-  onLabelClick = (): void => {
+  onLabelClick(): void {
     this.toggle();
-  };
+  }
 
   //--------------------------------------------------------------------------
   //
diff --git a/src/components/calcite-combobox/calcite-combobox.tsx b/src/components/calcite-combobox/calcite-combobox.tsx
index dab0e2de99a..c98f66359cc 100644
--- a/src/components/calcite-combobox/calcite-combobox.tsx
+++ b/src/components/calcite-combobox/calcite-combobox.tsx
@@ -305,9 +305,9 @@ export class CalciteCombobox implements LabelableComponent {
   //
   // --------------------------------------------------------------------------
 
-  onLabelClick = (): void => {
+  onLabelClick(): void {
     this.setFocus();
-  };
+  }
 
   keydownHandler = (event: KeyboardEvent): void => {
     const key = getKey(event.key, getElementDir(this.el));
diff --git a/src/components/calcite-inline-editable/calcite-inline-editable.tsx b/src/components/calcite-inline-editable/calcite-inline-editable.tsx
index 0b78c121af3..eb6a96ce7f8 100644
--- a/src/components/calcite-inline-editable/calcite-inline-editable.tsx
+++ b/src/components/calcite-inline-editable/calcite-inline-editable.tsx
@@ -193,9 +193,9 @@ export class CalciteInlineEditable implements LabelableComponent {
     }
   }
 
-  onLabelClick = (): void => {
+  onLabelClick(): void {
     this.setFocus();
-  };
+  }
 
   //--------------------------------------------------------------------------
   //
diff --git a/src/components/calcite-input-date-picker/calcite-input-date-picker.tsx b/src/components/calcite-input-date-picker/calcite-input-date-picker.tsx
index c7605b16aed..b89db1949fa 100644
--- a/src/components/calcite-input-date-picker/calcite-input-date-picker.tsx
+++ b/src/components/calcite-input-date-picker/calcite-input-date-picker.tsx
@@ -400,9 +400,9 @@ export class CalciteInputDatePicker implements LabelableComponent {
   //
   //--------------------------------------------------------------------------
 
-  onLabelClick = (): void => {
+  onLabelClick(): void {
     this.setFocus();
-  };
+  }
 
   transitionEnd = (event: TransitionEvent): void => {
     if (event.propertyName === this.activeTransitionProp) {
diff --git a/src/components/calcite-input-time-picker/calcite-input-time-picker.tsx b/src/components/calcite-input-time-picker/calcite-input-time-picker.tsx
index 38e5a11745c..b0ba4f1112e 100644
--- a/src/components/calcite-input-time-picker/calcite-input-time-picker.tsx
+++ b/src/components/calcite-input-time-picker/calcite-input-time-picker.tsx
@@ -216,9 +216,9 @@ export class CalciteInputTimePicker implements LabelableComponent {
   //
   // --------------------------------------------------------------------------
 
-  onLabelClick = (): void => {
+  onLabelClick(): void {
     this.setFocus();
-  };
+  }
 
   private setCalciteInputEl = (el: HTMLCalciteInputElement): void => {
     this.calciteInputEl = el;
diff --git a/src/components/calcite-input/calcite-input.tsx b/src/components/calcite-input/calcite-input.tsx
index 826202e6a91..625feff3c70 100644
--- a/src/components/calcite-input/calcite-input.tsx
+++ b/src/components/calcite-input/calcite-input.tsx
@@ -380,9 +380,9 @@ export class CalciteInput implements LabelableComponent {
   //
   //--------------------------------------------------------------------------
 
-  onLabelClick = (): void => {
+  onLabelClick(): void {
     this.setFocus();
-  };
+  }
 
   private clearInputValue = (nativeEvent: KeyboardEvent | MouseEvent): void => {
     this.setValue(null, nativeEvent, true);
diff --git a/src/components/calcite-radio-button/calcite-radio-button.tsx b/src/components/calcite-radio-button/calcite-radio-button.tsx
index b44f24a3a5e..0b06e249ec1 100644
--- a/src/components/calcite-radio-button/calcite-radio-button.tsx
+++ b/src/components/calcite-radio-button/calcite-radio-button.tsx
@@ -186,7 +186,7 @@ export class CalciteRadioButton implements LabelableComponent {
     this.toggle();
   };
 
-  onLabelClick = (event: CustomEvent): void => {
+  onLabelClick(event: CustomEvent): void {
     if (!this.disabled && !this.hidden) {
       this.uncheckOtherRadioButtonsInGroup();
       const label = event.currentTarget as HTMLCalciteLabelElement;
@@ -206,7 +206,7 @@ export class CalciteRadioButton implements LabelableComponent {
       this.calciteRadioButtonChange.emit();
       this.setFocus();
     }
-  };
+  }
 
   private checkLastRadioButton(): void {
     const radioButtons = Array.from(this.rootNode.querySelectorAll("calcite-radio-button")).filter(
diff --git a/src/components/calcite-radio-group/calcite-radio-group.tsx b/src/components/calcite-radio-group/calcite-radio-group.tsx
index 948e6a8f7c1..9cf968e3388 100644
--- a/src/components/calcite-radio-group/calcite-radio-group.tsx
+++ b/src/components/calcite-radio-group/calcite-radio-group.tsx
@@ -260,9 +260,9 @@ export class CalciteRadioGroup implements LabelableComponent {
   //
   //--------------------------------------------------------------------------
 
-  onLabelClick = (): void => {
+  onLabelClick(): void {
     this.setFocus();
-  };
+  }
 
   private getItems(): NodeListOf<HTMLCalciteRadioGroupItemElement> {
     return this.el.querySelectorAll("calcite-radio-group-item");
diff --git a/src/components/calcite-rating/calcite-rating.tsx b/src/components/calcite-rating/calcite-rating.tsx
index 1965e07ebfe..34935167699 100644
--- a/src/components/calcite-rating/calcite-rating.tsx
+++ b/src/components/calcite-rating/calcite-rating.tsx
@@ -197,9 +197,9 @@ export class CalciteRating implements LabelableComponent {
   //
   //--------------------------------------------------------------------------
 
-  onLabelClick = (): void => {
+  onLabelClick(): void {
     this.setFocus();
-  };
+  }
 
   private updateValue(value: number) {
     this.value = value;
diff --git a/src/components/calcite-select/calcite-select.tsx b/src/components/calcite-select/calcite-select.tsx
index d82e37dfd18..078c6f9fb7a 100644
--- a/src/components/calcite-select/calcite-select.tsx
+++ b/src/components/calcite-select/calcite-select.tsx
@@ -178,9 +178,9 @@ export class CalciteSelect implements LabelableComponent {
   //
   //--------------------------------------------------------------------------
 
-  onLabelClick = (): void => {
+  onLabelClick(): void {
     this.setFocus();
-  };
+  }
 
   private updateNativeElement(
     optionOrGroup: CalciteOptionOrGroup,
diff --git a/src/components/calcite-slider/calcite-slider.tsx b/src/components/calcite-slider/calcite-slider.tsx
index 6c45e890df2..8cddeb4cb38 100644
--- a/src/components/calcite-slider/calcite-slider.tsx
+++ b/src/components/calcite-slider/calcite-slider.tsx
@@ -839,9 +839,9 @@ export class CalciteSlider implements LabelableComponent {
   //
   //--------------------------------------------------------------------------
 
-  onLabelClick = (): void => {
+  onLabelClick(): void {
     this.setFocus();
-  };
+  }
 
   private shouldMirror(): boolean {
     return this.mirrored && !this.hasHistogram;
diff --git a/src/components/calcite-switch/calcite-switch.tsx b/src/components/calcite-switch/calcite-switch.tsx
index 6b554725968..4b5202bead6 100644
--- a/src/components/calcite-switch/calcite-switch.tsx
+++ b/src/components/calcite-switch/calcite-switch.tsx
@@ -123,12 +123,12 @@ export class CalciteSwitch implements LabelableComponent {
   //
   //--------------------------------------------------------------------------
 
-  onLabelClick = (): void => {
+  onLabelClick(): void {
     if (!this.disabled) {
       this.toggle();
       this.setFocus();
     }
-  };
+  }
 
   private setupInput(): void {
     this.checked && this.inputEl.setAttribute("checked", "");

From 739405a7296b2d1066c5e54f4b503c2484f86bd2 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Fri, 15 Oct 2021 15:12:39 -0700
Subject: [PATCH 06/15] chore(hooks): add pre-push hook to confirm admin-pushes
 from master (#3273)

---
 .husky/pre-push | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100755 .husky/pre-push

diff --git a/.husky/pre-push b/.husky/pre-push
new file mode 100755
index 00000000000..30e85293cb5
--- /dev/null
+++ b/.husky/pre-push
@@ -0,0 +1,19 @@
+#!/bin/bash
+
+# from https://riptutorial.com/git/example/16164/pre-push
+
+protected_branch='master'
+current_branch=$(git symbolic-ref HEAD | sed -e 's,.*/\(.*\),\1,')
+
+if [ $protected_branch = $current_branch ]
+then
+    read -p "You're about to push master, is that what you intended? [y|n] " -n 1 -r < /dev/tty
+    echo
+    if echo $REPLY | grep -E '^[Yy]$' > /dev/null
+    then
+        exit 0
+    fi
+    exit 1
+else
+    exit 0
+fi

From 69ba692687786b784a53734b69ac8ea24133dbe0 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Fri, 15 Oct 2021 17:09:40 -0700
Subject: [PATCH 07/15] feat(output-targets): add custom-elements output target
 (#3224)

---
 conventions/README.md                         |   2 +-
 package.json                                  |   9 +-
 stencil.config.ts                             |   1 +
 .../custom-elements/createBundles.ts          | 101 ------------------
 .../custom-elements/tsconfig-dist-utils.json  |   9 --
 .../output-targets/custom-elements/utils.ts   |  13 ---
 6 files changed, 5 insertions(+), 130 deletions(-)
 delete mode 100644 support/output-targets/custom-elements/createBundles.ts
 delete mode 100644 support/output-targets/custom-elements/tsconfig-dist-utils.json
 delete mode 100644 support/output-targets/custom-elements/utils.ts

diff --git a/conventions/README.md b/conventions/README.md
index cdc7211f8d1..305c15cb60d 100644
--- a/conventions/README.md
+++ b/conventions/README.md
@@ -457,7 +457,7 @@ As a best practice we should follow [Ionic's configuration](https://github.com/i
 
 **Note:** This is highly likely to change as we move closer to our first release and as Stencil improves their documentation around their specific methods and build processes.
 
-Each root component should have a corresponding bundle entry in `stencil.config.ts`. It is important that the root component be listed first (the `util:add-build-extras:build-utils` NPM script depends on this).
+Each root component should have a corresponding bundle entry in `stencil.config.ts`.
 
 ## Unique IDs for Components
 
diff --git a/package.json b/package.json
index 9a2e4f02798..44b33be239c 100644
--- a/package.json
+++ b/package.json
@@ -16,9 +16,9 @@
     "hydrate/"
   ],
   "scripts": {
-    "build": "npm run util:copy-icons && stencil build && npm run util:add-custom-elements-extras",
-    "build:watch": "npm run util:copy-icons && stencil build --watch && npm run util:add-custom-elements-extras:index-mjs",
-    "build:watch-dev": "npm run util:copy-icons && stencil build --dev --watch && npm run util:add-custom-elements-extras:index-mjs",
+    "build": "npm run util:copy-icons && stencil build",
+    "build:watch": "npm run util:copy-icons && stencil build --watch",
+    "build:watch-dev": "npm run util:copy-icons && stencil build --dev --watch",
     "deps:update": "updtr --exclude typescript tailwindcss @types/jest jest jest-cli puppeteer && git add package*.json && git commit -q -m \"build(deps): bump versions\"",
     "docs": "concurrently --kill-others --raw \"npm:util:build-docs && build-storybook --static-dir ./__docs-temp__ --output-dir ./docs\"  \"ts-node ./support/cleanOnProcessExit.ts --path ./__docs-temp__\"",
     "docs:preview": "concurrently --raw \"npm:util:build-docs && start-storybook --static-dir ./__docs-temp__\" \"ts-node ./support/cleanOnProcessExit.ts --path ./__docs-temp__\"",
@@ -42,9 +42,6 @@
     "test:prerender": "stencil build --no-docs --prerender",
     "test:storybook": "concurrently --raw \"npm:util:build-docs && screener-storybook --conf screener.config.js\"",
     "test:watch": "npm run util:run-tests -- --watchAll",
-    "util:add-custom-elements-extras": "npm run util:add-custom-elements-extras:index-mjs && npm run util:add-custom-elements-extras:build-utils",
-    "util:add-custom-elements-extras:index-mjs": "cpy dist/custom-elements/index.js dist/custom-elements/ --rename index.mjs",
-    "util:add-custom-elements-extras:build-utils": "ts-node --project ./tsconfig-node-scripts.json ./support/output-targets/custom-elements/createBundles.ts  && tsc --project ./support/output-targets/custom-elements/tsconfig-dist-utils.json && rimraf ./support/output-targets/custom-elements/bundles",
     "util:build-docs": "npm run util:copy-icons && stencil build --config stencil.storybook.config.ts",
     "util:clean-tested-build": "npm ci && npm test && npm run build",
     "util:copy-icons": "cpy ./node_modules/@esri/calcite-ui-icons/js/*.json ./src/components/calcite-icon/assets/calcite-icon/",
diff --git a/stencil.config.ts b/stencil.config.ts
index 7c84a128362..0c0d6eeb2df 100644
--- a/stencil.config.ts
+++ b/stencil.config.ts
@@ -75,6 +75,7 @@ export const create: () => Config = () => ({
   outputTargets: [
     { type: "dist-hydrate-script" },
     { type: "dist-custom-elements-bundle" },
+    { type: "dist-custom-elements", autoDefineCustomElements: true },
     { type: "dist" },
     { type: "docs-readme" },
     { type: "docs-json", file: "./dist/extras/docs-json.json" },
diff --git a/support/output-targets/custom-elements/createBundles.ts b/support/output-targets/custom-elements/createBundles.ts
deleted file mode 100644
index e1ee19b398c..00000000000
--- a/support/output-targets/custom-elements/createBundles.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import { JsonDocs } from "@stencil/core/internal";
-import { promises as fs } from "fs";
-import { config as componentsConfig } from "../../../stencil.config";
-
-(async () => {
-  console.log("generating component bundles");
-
-  let componentsUsageReport: JsonDocs;
-
-  try {
-    console.log("reading doc");
-
-    componentsUsageReport = JSON.parse(
-      await fs.readFile(`${__dirname}/../../../dist/extras/docs-json.json`, {
-        encoding: "utf8"
-      })
-    );
-  } catch (e) {
-    console.log("an error occurred during setup", e);
-  }
-
-  if (!componentsUsageReport) {
-    console.log("could not generate bundles");
-    process.exit(-1);
-  }
-
-  const bundleDir = `${__dirname}/bundles`;
-
-  try {
-    await fs.mkdir(bundleDir);
-  } catch (e) {
-    console.log("bundle dir already exists");
-  }
-
-  const allConfigComponents = componentsConfig.bundles.reduce(
-    (accumulated, current) => accumulated.concat(current.components),
-    []
-  );
-
-  const allGeneratedComponents = componentsUsageReport.components.map(({ tag }) => tag);
-  const configReferencedComponentsMap = new Map(allGeneratedComponents.map((component) => [component, false]));
-
-  allGeneratedComponents.forEach((tag) => {
-    if (allConfigComponents.includes(tag)) {
-      configReferencedComponentsMap.set(tag, true);
-    }
-  });
-
-  configReferencedComponentsMap.forEach((seen, component) => {
-    if (!seen) {
-      console.warn(
-        `[WARNING] ${component} is not referenced in stencil.config.ts and will not have a bundle generated`
-      );
-    }
-  });
-
-  for (const { components } of componentsConfig.bundles) {
-    const componentNamespacePrefix = /^calcite/;
-    const bundleName = components[0].replace(componentNamespacePrefix, "").replace("-", "");
-    const componentDeps = new Set<string>();
-
-    components.forEach((comp) => {
-      componentDeps.add(comp);
-      addDeps(comp, componentDeps);
-    });
-
-    const allComponents = Array.from(componentDeps);
-
-    const source = `import { ${allComponents.map((component) => toCamelCase(component)).join(", ")} } from "../index";
-import { register } from "../utils";
-register({
-  ${allComponents.map((component) => `"${component}": ${toCamelCase(component)}`).join(",")}
-});
-`;
-
-    const sourceFile = `${bundleDir}/${bundleName}.ts`;
-    await fs.writeFile(sourceFile, source);
-  }
-
-  console.log("component bundles generated");
-
-  function toCamelCase(kebabCased: string): string {
-    return kebabCased
-      .split("-")
-      .map(([firstLetter, ...rest]) => `${firstLetter.toUpperCase()}${rest.join("")}`)
-      .join("");
-  }
-
-  function addDeps(tag: string, candidates: Set<string>): void {
-    const found = componentsUsageReport.components.find((comp: { tag }) => comp.tag === tag);
-
-    if (!found) {
-      return;
-    }
-
-    const { dependencies, dependencyGraph } = found;
-    const depsToCheck = [tag, ...dependencies];
-
-    depsToCheck.forEach((dep: string) => dependencyGraph[dep]?.forEach((d: string) => candidates.add(d)));
-  }
-})();
diff --git a/support/output-targets/custom-elements/tsconfig-dist-utils.json b/support/output-targets/custom-elements/tsconfig-dist-utils.json
deleted file mode 100644
index 8235a425994..00000000000
--- a/support/output-targets/custom-elements/tsconfig-dist-utils.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "extends": "../../../tsconfig-base.json",
-  "compilerOptions": {
-    "declaration": true,
-    "outDir": "../../../dist/custom-elements",
-    "rootDirs": [".", "../../../dist/custom-elements/"]
-  },
-  "include": ["bundles", "utils.ts"]
-}
diff --git a/support/output-targets/custom-elements/utils.ts b/support/output-targets/custom-elements/utils.ts
deleted file mode 100644
index c792aa7ed2a..00000000000
--- a/support/output-targets/custom-elements/utils.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { setAssetPath } from "./index";
-
-export function commitAssetPath(path: string): void {
-  setAssetPath(path);
-}
-
-export function register(tagToConstructor: Record<string, CustomElementConstructor>): void {
-  Object.keys(tagToConstructor).forEach((tag) => {
-    if (!customElements.get(tag)) {
-      customElements.define(tag, tagToConstructor[tag]);
-    }
-  });
-}

From 4639587e82df4c1c9db8adda9df14552b6836236 Mon Sep 17 00:00:00 2001
From: Ben Elan <benelan@users.noreply.github.com>
Date: Fri, 15 Oct 2021 21:49:32 -0700
Subject: [PATCH 08/15] chore(action): allow ember-twiddle repro samples
 (#3244)

---
 .github/need-info.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.github/need-info.yml b/.github/need-info.yml
index 5922f8d4b6e..bf1629a3621 100644
--- a/.github/need-info.yml
+++ b/.github/need-info.yml
@@ -19,5 +19,7 @@ requiredItems:
       - "esri.github.io/calcite-components/?path=/story/components-"
       - "esri.github.io/calcite-components/iframe.html?"
       - "developers.arcgis.com/calcite-design-system/components/"
+      - "ember-twiddle.com/"
+      - "jsfiddle.net/"
 commentFooter: "This issue will be automatically closed in three days if the information is not provided. Thanks for your understanding."
 excludeComments: true

From b1b6ff3efd32bcc9aed1cdc00e4f0ef3eb340fc2 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <anv11827@esri.com>
Date: Mon, 18 Oct 2021 11:02:08 -0500
Subject: [PATCH 09/15] fix(block-section): enable word wrap (#3156)

* fix(block-section): enable text wrap

* revert changes to demo html

* refactor to support safari browser
---
 src/components/calcite-block-section/calcite-block-section.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/calcite-block-section/calcite-block-section.scss b/src/components/calcite-block-section/calcite-block-section.scss
index 9d4a9e4b2f2..c318d270e1f 100644
--- a/src/components/calcite-block-section/calcite-block-section.scss
+++ b/src/components/calcite-block-section/calcite-block-section.scss
@@ -57,6 +57,7 @@
     my-0;
 
   text-align: initial;
+  word-wrap: anywhere;
 }
 
 .toggle--switch {

From bf887f4ad96aab40e36741932d0c702414955673 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 18 Oct 2021 09:34:21 -0700
Subject: [PATCH 10/15] docs: update component READMEs (#3282)

Co-authored-by: jcfranco <jcfranco@users.noreply.github.com>
---
 src/components/calcite-action/readme.md | 30 ++++++++++++-------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/calcite-action/readme.md b/src/components/calcite-action/readme.md
index 8d7e9b238a4..7d6027e5932 100755
--- a/src/components/calcite-action/readme.md
+++ b/src/components/calcite-action/readme.md
@@ -32,21 +32,21 @@ Renders a `calcite-action` that displays only an icon and a tooltip label.
 
 ## Properties
 
-| Property            | Attribute      | Description                                                                                                                         | Type                              | Default        |
-| ------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | -------------- |
-| `active`            | `active`       | Indicates whether the action is highlighted.                                                                                        | `boolean`                         | `false`        |
-| `alignment`         | `alignment`    | Optionally specify the horizontal alignment of button elements with text content.                                                   | `"center" \| "end" \| "start"`    | `undefined`    |
-| `appearance`        | `appearance`   | Specify the appearance style of the action, defaults to solid.                                                                      | `"clear" \| "outline" \| "solid"` | `"solid"`      |
-| `compact`           | `compact`      | Compact mode is used internally by components to reduce side padding, e.g. calcite-block-section.                                   | `boolean`                         | `false`        |
-| `disabled`          | `disabled`     | When true, disabled prevents interaction. This state shows items with lower opacity/grayed.                                         | `boolean`                         | `false`        |
-| `icon`              | `icon`         | The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/. | `string`                          | `undefined`    |
-| `indicator`         | `indicator`    | Indicates unread changes.                                                                                                           | `boolean`                         | `false`        |
-| `intlLoading`       | `intl-loading` | string to override English loading text                                                                                             | `string`                          | `TEXT.loading` |
-| `label`             | `label`        | The label of the action. If no label is provided, the label inherits what's provided for the `text` prop.                           | `string`                          | `undefined`    |
-| `loading`           | `loading`      | When true, content is waiting to be loaded. This state shows a busy indicator.                                                      | `boolean`                         | `false`        |
-| `scale`             | `scale`        | Specifies the size of the action.                                                                                                   | `"l" \| "m" \| "s"`               | `"m"`          |
-| `text` _(required)_ | `text`         | Text that accompanies the action icon.                                                                                              | `string`                          | `undefined`    |
-| `textEnabled`       | `text-enabled` | Indicates whether the text is displayed.                                                                                            | `boolean`                         | `false`        |
+| Property            | Attribute      | Description                                                                                                                         | Type                           | Default        |
+| ------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | -------------- |
+| `active`            | `active`       | Indicates whether the action is highlighted.                                                                                        | `boolean`                      | `false`        |
+| `alignment`         | `alignment`    | Optionally specify the horizontal alignment of button elements with text content.                                                   | `"center" \| "end" \| "start"` | `undefined`    |
+| `appearance`        | `appearance`   | Specify the appearance style of the action, defaults to solid.                                                                      | `"clear" \| "solid"`           | `"solid"`      |
+| `compact`           | `compact`      | Compact mode is used internally by components to reduce side padding, e.g. calcite-block-section.                                   | `boolean`                      | `false`        |
+| `disabled`          | `disabled`     | When true, disabled prevents interaction. This state shows items with lower opacity/grayed.                                         | `boolean`                      | `false`        |
+| `icon`              | `icon`         | The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/. | `string`                       | `undefined`    |
+| `indicator`         | `indicator`    | Indicates unread changes.                                                                                                           | `boolean`                      | `false`        |
+| `intlLoading`       | `intl-loading` | string to override English loading text                                                                                             | `string`                       | `TEXT.loading` |
+| `label`             | `label`        | The label of the action. If no label is provided, the label inherits what's provided for the `text` prop.                           | `string`                       | `undefined`    |
+| `loading`           | `loading`      | When true, content is waiting to be loaded. This state shows a busy indicator.                                                      | `boolean`                      | `false`        |
+| `scale`             | `scale`        | Specifies the size of the action.                                                                                                   | `"l" \| "m" \| "s"`            | `"m"`          |
+| `text` _(required)_ | `text`         | Text that accompanies the action icon.                                                                                              | `string`                       | `undefined`    |
+| `textEnabled`       | `text-enabled` | Indicates whether the text is displayed.                                                                                            | `boolean`                      | `false`        |
 
 ## Events
 

From 6e6ff0b15ae4a1a9b0ef44672b59ce0b8384dda7 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 18 Oct 2021 09:35:02 -0700
Subject: [PATCH 11/15] build: update browserslist db (#3283)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 package-lock.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1f819ee4962..9a7a39f8208 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15545,9 +15545,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001265",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001265.tgz",
-      "integrity": "sha512-YzBnspggWV5hep1m9Z6sZVLOt7vrju8xWooFAgN6BA5qvy98qPAPb7vNUzypFaoh2pb3vlfzbDO8tB57UPGbtw==",
+      "version": "1.0.30001267",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001267.tgz",
+      "integrity": "sha512-r1mjTzAuJ9W8cPBGbbus8E0SKcUP7gn03R14Wk8FlAlqhH9hroy9nLqmpuXlfKEw/oILW+FGz47ipXV2O7x8lg==",
       "dev": true
     },
     "capital-case": {

From eaab12307f016af54d6ae3872785d0970f63cc37 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Mon, 18 Oct 2021 10:27:26 -0700
Subject: [PATCH 12/15] fix(link): Setting the href property after init should
 update rendering (#3222)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(link): Setting the href property after init should update rendering. #2153

* connectedCallback back

* build(deps): bump @storybook/addon-docs from 6.3.10 to 6.3.11 (#3221)

Bumps [@storybook/addon-docs](https://github.com/storybookjs/storybook/tree/HEAD/addons/docs) from 6.3.10 to 6.3.11.
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md)
- [Commits](https://github.com/storybookjs/storybook/commits/v6.3.11/addons/docs)

---
updated-dependencies:
- dependency-name: "@storybook/addon-docs"
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* build(deps): bump eslint-plugin-unicorn from 37.0.0 to 37.0.1 (#3220)

Bumps [eslint-plugin-unicorn](https://github.com/sindresorhus/eslint-plugin-unicorn) from 37.0.0 to 37.0.1.
- [Release notes](https://github.com/sindresorhus/eslint-plugin-unicorn/releases)
- [Commits](https://github.com/sindresorhus/eslint-plugin-unicorn/compare/v37.0.0...v37.0.1)

---
updated-dependencies:
- dependency-name: eslint-plugin-unicorn
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* build(deps): bump @stencil/sass from 1.4.1 to 1.5.2 (#3219)

Bumps [@stencil/sass](https://github.com/ionic-team/stencil-sass) from 1.4.1 to 1.5.2.
- [Release notes](https://github.com/ionic-team/stencil-sass/releases)
- [Commits](https://github.com/ionic-team/stencil-sass/compare/v1.4.1...v1.5.2)

---
updated-dependencies:
- dependency-name: "@stencil/sass"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* build(deps): bump @storybook/cli from 6.3.10 to 6.3.11 (#3217)

Bumps [@storybook/cli](https://github.com/storybookjs/storybook/tree/HEAD/lib/cli) from 6.3.10 to 6.3.11.
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md)
- [Commits](https://github.com/storybookjs/storybook/commits/v6.3.11/lib/cli)

---
updated-dependencies:
- dependency-name: "@storybook/cli"
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* build: add license preamble for distributable code (#2537)

#947

* build(deps): bump @storybook/addon-a11y from 6.3.10 to 6.3.11 (#3218)

Bumps [@storybook/addon-a11y](https://github.com/storybookjs/storybook/tree/HEAD/addons/a11y) from 6.3.10 to 6.3.11.
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md)
- [Commits](https://github.com/storybookjs/storybook/commits/v6.3.11/addons/a11y)

---
updated-dependencies:
- dependency-name: "@storybook/addon-a11y"
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Matt Driscoll <mdriscoll@esri.com>

* feat(block): add loading status to block header (#3158)

* feat(block): add loading status to block header

* add e2e to verify loading class

* feedback changes

* re-trigger codeQL job

* feedback syntax changes

* 1.0.0-next.287 [skip ci]

* fix(combox-item): adjust height of the item to be consistent respective to its scale size (#3144) (#3197)

* fix(combox-item): adjust height of the item to be consistent respective to its scale size (#3144)

* fix(combobox-item): keep the container styling relative to the scale size

* fix(combobox-item): review pr comment suggestion for styling

* refactor(filter): avoid stateful regexp used for filtering

* 1.0.0-next.288 [skip ci]

* build(deps): bump storybook from 6.3.10 to 6.3.11 (#3233)

Bumps [storybook](https://github.com/storybookjs/storybook/tree/HEAD/lib/cli) from 6.3.10 to 6.3.11.
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md)
- [Commits](https://github.com/storybookjs/storybook/commits/v6.3.11/lib/cli)

---
updated-dependencies:
- dependency-name: storybook
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* build(deps): bump @storybook/html from 6.3.10 to 6.3.11 (#3232)

Bumps [@storybook/html](https://github.com/storybookjs/storybook/tree/HEAD/app/html) from 6.3.10 to 6.3.11.
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md)
- [Commits](https://github.com/storybookjs/storybook/commits/v6.3.11/app/html)

---
updated-dependencies:
- dependency-name: "@storybook/html"
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* fix(dropdown): close on outside click when disable-close-on-select is true #3136 (#3227)

* fix(dropdown): remove preventDefault and stopPropagation on click event (#3231)

* fix(dropdown): close on outside click when disable-close-on-select is true #3136

* fix(dropdown): remove preventDefault on click event. #1709

* 1.0.0-next.289 [skip ci]

* fix(combobox): add chevron icon at end of input regardless of selecti… (#3143)

* fix(combobox): add chevron icon at end of input regardless of selection mode (#3055)

* fix(combobox): align the chevron icon to be centered vertically on multiple chips select mode (#3055)

* fix(action-bar): get up-to-date master changes

* feat(combobox): add additional story for multiple with preselected inputs

* fix(combobox): make all the combobox height size consistent scale

* 1.0.0-next.290 [skip ci]

* docs(input-time-picker): value is always 24-hour format (#3245)

* build(deps): bump @storybook/cli from 6.3.11 to 6.3.12 (#3251)

Bumps [@storybook/cli](https://github.com/storybookjs/storybook/tree/HEAD/lib/cli) from 6.3.11 to 6.3.12.
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md)
- [Commits](https://github.com/storybookjs/storybook/commits/v6.3.12/lib/cli)

---
updated-dependencies:
- dependency-name: "@storybook/cli"
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* build(deps): bump eslint from 8.0.0 to 8.0.1 (#3252)

Bumps [eslint](https://github.com/eslint/eslint) from 8.0.0 to 8.0.1.
- [Release notes](https://github.com/eslint/eslint/releases)
- [Changelog](https://github.com/eslint/eslint/blob/master/CHANGELOG.md)
- [Commits](https://github.com/eslint/eslint/compare/v8.0.0...v8.0.1)

---
updated-dependencies:
- dependency-name: eslint
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* build(deps): bump @storybook/addon-docs from 6.3.11 to 6.3.12 (#3254)

Bumps [@storybook/addon-docs](https://github.com/storybookjs/storybook/tree/HEAD/addons/docs) from 6.3.11 to 6.3.12.
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md)
- [Commits](https://github.com/storybookjs/storybook/commits/v6.3.12/addons/docs)

---
updated-dependencies:
- dependency-name: "@storybook/addon-docs"
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* test(input): Skip unstable test. #3257 (#3258)

* build(deps): bump eslint-plugin-jest from 25.0.5 to 25.2.0 (#3256)

Bumps [eslint-plugin-jest](https://github.com/jest-community/eslint-plugin-jest) from 25.0.5 to 25.2.0.
- [Release notes](https://github.com/jest-community/eslint-plugin-jest/releases)
- [Changelog](https://github.com/jest-community/eslint-plugin-jest/blob/main/CHANGELOG.md)
- [Commits](https://github.com/jest-community/eslint-plugin-jest/compare/v25.0.5...v25.2.0)

---
updated-dependencies:
- dependency-name: eslint-plugin-jest
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* build(deps): bump @storybook/html from 6.3.11 to 6.3.12 (#3255)

Bumps [@storybook/html](https://github.com/storybookjs/storybook/tree/HEAD/app/html) from 6.3.11 to 6.3.12.
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md)
- [Commits](https://github.com/storybookjs/storybook/commits/v6.3.12/app/html)

---
updated-dependencies:
- dependency-name: "@storybook/html"
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* build(deps): bump storybook from 6.3.11 to 6.3.12 (#3253)

Bumps [storybook](https://github.com/storybookjs/storybook/tree/HEAD/lib/cli) from 6.3.11 to 6.3.12.
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md)
- [Commits](https://github.com/storybookjs/storybook/commits/v6.3.12/lib/cli)

---
updated-dependencies:
- dependency-name: storybook
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* build(deps): bump ts-jest from 27.0.5 to 27.0.6 (#3259)

Bumps [ts-jest](https://github.com/kulshekhar/ts-jest) from 27.0.5 to 27.0.6.
- [Release notes](https://github.com/kulshekhar/ts-jest/releases)
- [Changelog](https://github.com/kulshekhar/ts-jest/blob/main/CHANGELOG.md)
- [Commits](https://github.com/kulshekhar/ts-jest/compare/v27.0.5...v27.0.6)

---
updated-dependencies:
- dependency-name: ts-jest
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* build(deps): bump @storybook/addon-a11y from 6.3.11 to 6.3.12 (#3260)

Bumps [@storybook/addon-a11y](https://github.com/storybookjs/storybook/tree/HEAD/addons/a11y) from 6.3.11 to 6.3.12.
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md)
- [Commits](https://github.com/storybookjs/storybook/commits/v6.3.12/addons/a11y)

---
updated-dependencies:
- dependency-name: "@storybook/addon-a11y"
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* docs: update component READMEs (#3264)

Co-authored-by: jcfranco <jcfranco@users.noreply.github.com>

* fix(action)!: deprecating outline appearance (#3263)

* docs(conventions): fixing grammar errors (#3261)

* fix(action): fixing RTL display bugs by replacing getElementDir and RTL CSS classes with CSS logical properties (#3140)

* refactor: Convert SASS division to multiplication where possible. #3249 (#3268)

* refactor: Convert SASS division to multiplication where possible. #3249

* use calc

* fix negate

* feat(list, list-item): Add setFocus method. #3275

* fix selector

* fix test

* refactor: change onLabelClick to be a class method (#3165)

#3161

* chore(hooks): add pre-push hook to confirm admin-pushes from master (#3273)

* feat(output-targets): add custom-elements output target (#3224)

* chore(action): allow ember-twiddle repro samples (#3244)

* fix(block-section): enable word wrap (#3156)

* fix(block-section): enable text wrap

* revert changes to demo html

* refactor to support safari browser

* readability

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: JC Franco <jfranco@esri.com>
Co-authored-by: Anveshreddy mekala <anv11827@esri.com>
Co-authored-by: Travis CI User <travis@example.org>
Co-authored-by: Yona N <04l.yona@gmail.com>
Co-authored-by: Ben Elan <benelan@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: jcfranco <jcfranco@users.noreply.github.com>
Co-authored-by: Erik Harper <eharperdicianno@esri.com>
---
 .../calcite-link/calcite-link.e2e.ts          | 22 +++++++++++++++-
 src/components/calcite-link/calcite-link.tsx  |  9 +++++--
 .../calcite-list-item.e2e.ts                  |  7 +++++-
 .../calcite-list-item/calcite-list-item.tsx   | 21 ++++++++++++++--
 .../calcite-list/calcite-list.e2e.ts          | 13 +++++++++-
 src/components/calcite-list/calcite-list.tsx  | 25 ++++++++++++++++++-
 6 files changed, 89 insertions(+), 8 deletions(-)

diff --git a/src/components/calcite-link/calcite-link.e2e.ts b/src/components/calcite-link/calcite-link.e2e.ts
index 1b5d964dbd2..68526a0fb9d 100644
--- a/src/components/calcite-link/calcite-link.e2e.ts
+++ b/src/components/calcite-link/calcite-link.e2e.ts
@@ -1,4 +1,4 @@
-import { E2EPage, newE2EPage } from "@stencil/core/testing";
+import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing";
 import { accessible } from "../../tests/commonTests";
 
 describe("calcite-link", () => {
@@ -25,6 +25,26 @@ describe("calcite-link", () => {
     expect(iconEnd).toBeNull();
   });
 
+  it("should update childElType when href changes", async () => {
+    const page = await newE2EPage({ html: `<calcite-link>Continue</calcite-link>` });
+    const link = await page.find("calcite-link");
+    let elementAsLink: E2EElement;
+    let elementAsSpan: E2EElement;
+
+    elementAsSpan = await page.find("calcite-link >>> span");
+    elementAsLink = await page.find("calcite-link >>> a");
+    expect(elementAsSpan).not.toBeNull();
+    expect(elementAsLink).toBeNull();
+
+    link.setProperty("href", "/");
+    await page.waitForChanges();
+
+    elementAsSpan = await page.find("calcite-link >>> span");
+    elementAsLink = await page.find("calcite-link >>> a");
+    expect(elementAsSpan).toBeNull();
+    expect(elementAsLink).not.toBeNull();
+  });
+
   it("renders as a link with default props", async () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-link href="/">Continue</calcite-link>`);
diff --git a/src/components/calcite-link/calcite-link.tsx b/src/components/calcite-link/calcite-link.tsx
index 6c5f256117b..83e6b6f5165 100644
--- a/src/components/calcite-link/calcite-link.tsx
+++ b/src/components/calcite-link/calcite-link.tsx
@@ -1,4 +1,4 @@
-import { Component, Element, h, Host, Method, Prop, VNode } from "@stencil/core";
+import { Component, Element, h, Host, Method, Prop, State, VNode, Watch } from "@stencil/core";
 import { focusElement, getElementDir } from "../../utils/dom";
 import { FlipContext } from "../interfaces";
 import { CSS_UTILITY } from "../../utils/resources";
@@ -34,6 +34,11 @@ export class CalciteLink {
   /** optionally pass a href - used to determine if the component should render as a link or an anchor */
   @Prop({ reflect: true }) href?: string;
 
+  @Watch("href")
+  hrefHandler(href: string): void {
+    this.childElType = href ? "a" : "span";
+  }
+
   /** optionally pass an icon to display at the end of a button - accepts calcite ui icon names  */
   @Prop({ reflect: true }) iconEnd?: string;
 
@@ -126,7 +131,7 @@ export class CalciteLink {
   private childEl: HTMLAnchorElement | HTMLSpanElement;
 
   /** the node type of the rendered child element */
-  private childElType: "a" | "span" = "span";
+  @State() childElType: "a" | "span" = "span";
 
   //--------------------------------------------------------------------------
   //
diff --git a/src/components/calcite-list-item/calcite-list-item.e2e.ts b/src/components/calcite-list-item/calcite-list-item.e2e.ts
index ccd43c6e3a5..d104756e9fb 100755
--- a/src/components/calcite-list-item/calcite-list-item.e2e.ts
+++ b/src/components/calcite-list-item/calcite-list-item.e2e.ts
@@ -1,11 +1,16 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { hidden, renders } from "../../tests/commonTests";
+import { hidden, renders, focusable } from "../../tests/commonTests";
 import { defaults } from "../../tests/commonTests";
 import { CSS } from "./resources";
 
 describe("calcite-list-item", () => {
   it("renders", async () => renders("calcite-list-item", { display: "flex" }));
 
+  it("is focusable", () =>
+    focusable("calcite-list-item", {
+      shadowFocusTargetSelector: `.${CSS.contentContainerButton}`
+    }));
+
   it("honors hidden attribute", async () => hidden("calcite-list-item"));
 
   it("has property defaults", async () =>
diff --git a/src/components/calcite-list-item/calcite-list-item.tsx b/src/components/calcite-list-item/calcite-list-item.tsx
index b4698f2eb1a..5d200aeb201 100755
--- a/src/components/calcite-list-item/calcite-list-item.tsx
+++ b/src/components/calcite-list-item/calcite-list-item.tsx
@@ -1,4 +1,4 @@
-import { Component, Element, Prop, h, VNode, Host } from "@stencil/core";
+import { Component, Element, Prop, h, VNode, Host, Method } from "@stencil/core";
 import { SLOTS, CSS } from "./resources";
 import { getSlotted } from "../../utils/dom";
 
@@ -49,6 +49,20 @@ export class CalciteListItem {
 
   @Element() el: HTMLCalciteListItemElement;
 
+  focusEl: HTMLButtonElement;
+
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+
+  /** Sets focus on the component. */
+  @Method()
+  async setFocus(): Promise<void> {
+    this.focusEl?.focus();
+  }
+
   // --------------------------------------------------------------------------
   //
   //  Render Methods
@@ -111,11 +125,14 @@ export class CalciteListItem {
       <button
         class={{ [CSS.contentContainer]: true, [CSS.contentContainerButton]: true }}
         disabled={disabled}
+        ref={(focusEl) => (this.focusEl = focusEl)}
       >
         {content}
       </button>
     ) : (
-      <div class={CSS.contentContainer}>{content}</div>
+      <div class={CSS.contentContainer} ref={() => (this.focusEl = null)}>
+        {content}
+      </div>
     );
   }
 
diff --git a/src/components/calcite-list/calcite-list.e2e.ts b/src/components/calcite-list/calcite-list.e2e.ts
index eef8f82b206..9fbca27c8c1 100755
--- a/src/components/calcite-list/calcite-list.e2e.ts
+++ b/src/components/calcite-list/calcite-list.e2e.ts
@@ -1,8 +1,19 @@
-import { accessible, hidden, renders } from "../../tests/commonTests";
+import { accessible, hidden, renders, focusable } from "../../tests/commonTests";
+import { html } from "../../tests/utils";
 
 describe("calcite-list", () => {
   it("renders", async () => renders("calcite-list", { display: "block" }));
 
+  it("is focusable", () =>
+    focusable(
+      html`<calcite-list>
+        <calcite-list-item label="test" description="hello world"></calcite-list-item>
+      </calcite-list>`,
+      {
+        focusTargetSelector: "calcite-list-item"
+      }
+    ));
+
   it("honors hidden attribute", async () => hidden("calcite-list"));
 
   it("should be accessible", async () => {
diff --git a/src/components/calcite-list/calcite-list.tsx b/src/components/calcite-list/calcite-list.tsx
index fb3be9a2389..047218e3cd0 100755
--- a/src/components/calcite-list/calcite-list.tsx
+++ b/src/components/calcite-list/calcite-list.tsx
@@ -1,4 +1,4 @@
-import { Component, h, VNode, Host, Prop } from "@stencil/core";
+import { Component, Element, h, VNode, Host, Prop, Method } from "@stencil/core";
 import { CSS } from "./resources";
 import { HeadingLevel } from "../functional/CalciteHeading";
 
@@ -23,6 +23,29 @@ export class CalciteList {
    */
   @Prop() headingLevel: HeadingLevel;
 
+  // --------------------------------------------------------------------------
+  //
+  //  Private Properties
+  //
+  // --------------------------------------------------------------------------
+
+  @Element() el: HTMLCalciteListElement;
+
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+
+  /** Sets focus on the component. */
+  @Method()
+  async setFocus(): Promise<void> {
+    const firstListItem: HTMLCalciteListItemElement = this.el.querySelector(
+      `calcite-list-item:not([non-interactive])`
+    );
+    firstListItem?.setFocus();
+  }
+
   // --------------------------------------------------------------------------
   //
   //  Render Methods

From cfd1f2a554330cbcd2389efc142de41cf84b9ddb Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Mon, 18 Oct 2021 10:35:05 -0700
Subject: [PATCH 13/15] fix(button): Setting the href property after init
 should update rendering (#3248)

* fix(button): Setting the href property after init should update rendering #3222

* readability
---
 .../calcite-button/calcite-button.e2e.ts      | 22 ++++++++++++++++++-
 .../calcite-button/calcite-button.tsx         |  7 +++++-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/components/calcite-button/calcite-button.e2e.ts b/src/components/calcite-button/calcite-button.e2e.ts
index 770377cb6e3..bb492a5cd07 100644
--- a/src/components/calcite-button/calcite-button.e2e.ts
+++ b/src/components/calcite-button/calcite-button.e2e.ts
@@ -1,4 +1,4 @@
-import { newE2EPage } from "@stencil/core/testing";
+import { E2EElement, newE2EPage } from "@stencil/core/testing";
 import { accessible, HYDRATED_ATTR, labelable } from "../../tests/commonTests";
 import { CSS } from "./resources";
 
@@ -43,6 +43,26 @@ describe("calcite-button", () => {
 
   it("is labelable", async () => labelable("calcite-button"));
 
+  it("should update childElType when href changes", async () => {
+    const page = await newE2EPage({ html: `<calcite-button>Continue</calcite-button>` });
+    const link = await page.find("calcite-button");
+    let elementAsLink: E2EElement;
+    let elementAsSpan: E2EElement;
+
+    elementAsSpan = await page.find("calcite-button >>> button");
+    elementAsLink = await page.find("calcite-button >>> a");
+    expect(elementAsSpan).not.toBeNull();
+    expect(elementAsLink).toBeNull();
+
+    link.setProperty("href", "/");
+    await page.waitForChanges();
+
+    elementAsSpan = await page.find("calcite-button >>> button");
+    elementAsLink = await page.find("calcite-button >>> a");
+    expect(elementAsSpan).toBeNull();
+    expect(elementAsLink).not.toBeNull();
+  });
+
   it("renders as a link with default props", async () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-button href="/">Continue</calcite-button>`);
diff --git a/src/components/calcite-button/calcite-button.tsx b/src/components/calcite-button/calcite-button.tsx
index cbc59e1100c..3b6e0e49cd1 100644
--- a/src/components/calcite-button/calcite-button.tsx
+++ b/src/components/calcite-button/calcite-button.tsx
@@ -53,6 +53,11 @@ export class CalciteButton implements LabelableComponent {
   /** optionally pass a href - used to determine if the component should render as a button or an anchor */
   @Prop({ reflect: true }) href?: string;
 
+  @Watch("href")
+  hrefHandler(href: string): void {
+    this.childElType = href ? "a" : "button";
+  }
+
   /** optionally pass an icon to display at the end of a button - accepts calcite ui icon names  */
   @Prop({ reflect: true }) iconEnd?: string;
 
@@ -227,7 +232,7 @@ export class CalciteButton implements LabelableComponent {
   private childEl?: HTMLElement;
 
   /** the node type of the rendered child element */
-  private childElType?: "a" | "button" = "button";
+  @State() childElType?: "a" | "button" = "button";
 
   /** determine if there is slotted content for styling purposes */
   @State() private hasContent = false;

From bd390579cdb193ff758b30aa54a02dd97d3da58b Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Mon, 18 Oct 2021 10:43:08 -0700
Subject: [PATCH 14/15] fix(tooltip-manager): mousing out of the tooltip should
 close the tooltip. #3171 (#3192)

---
 .../calcite-tooltip-manager/calcite-tooltip-manager.tsx      | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/calcite-tooltip-manager/calcite-tooltip-manager.tsx b/src/components/calcite-tooltip-manager/calcite-tooltip-manager.tsx
index b73795cc81d..ed2179c9d00 100644
--- a/src/components/calcite-tooltip-manager/calcite-tooltip-manager.tsx
+++ b/src/components/calcite-tooltip-manager/calcite-tooltip-manager.tsx
@@ -131,14 +131,15 @@ export class CalciteTooltipManager {
 
   activeTooltipHover = (event: MouseEvent): void => {
     const { tooltipEl, hoverTimeouts } = this;
+    const { type } = event;
 
     if (!tooltipEl) {
       return;
     }
 
-    if (event.composedPath().includes(tooltipEl)) {
+    if (type === "mouseover" && event.composedPath().includes(tooltipEl)) {
       this.clearHoverTimeout(tooltipEl);
-    } else if (!hoverTimeouts.has(tooltipEl)) {
+    } else if (type === "mouseout" && !hoverTimeouts.has(tooltipEl)) {
       this.hoverTooltip({ tooltip: tooltipEl, value: false });
     }
   };

From 4a368b91bb5513bd69a37c2e5d1bbc7a63d77504 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <anv11827@esri.com>
Date: Mon, 18 Oct 2021 13:15:38 -0500
Subject: [PATCH 15/15] fix(slider): slider range value capped to max (#3262)

* fix(slider): slider range max value capped to provided max

* feedback enhancements
---
 src/components/calcite-slider/calcite-slider.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/calcite-slider/calcite-slider.tsx b/src/components/calcite-slider/calcite-slider.tsx
index 8cddeb4cb38..b515d79b3de 100644
--- a/src/components/calcite-slider/calcite-slider.tsx
+++ b/src/components/calcite-slider/calcite-slider.tsx
@@ -613,7 +613,7 @@ export class CalciteSlider implements LabelableComponent {
           "tick__label--max": isMaxTickLabel
         }}
       >
-        {tick.toLocaleString()}
+        {Math.min(tick, this.max).toLocaleString()}
       </span>
     );
     if (this.labelTicks && !this.hasHistogram && !this.isRange) {