@esri/calcite-components 1.0.0-next.582 → 1.0.0-next.591

package/dist/collection/components/tab-title/tab-title.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.582
+ * v1.0.0-next.591
  */
 import { Build, Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -47,6 +47,9 @@ export class TabTitle {
     this.mutationObserver = createObserver("mutation", () => this.updateHasText());
     /** determine if there is slotted text for styling purposes */
     this.hasText = false;
+    this.resizeObserver = createObserver("resize", () => {
+      this.calciteInternalTabIconChanged.emit();
+    });
     this.guid = `calcite-tab-title-${guid()}`;
   }
   activeHandler(value) {
@@ -76,12 +79,13 @@ export class TabTitle {
     this.parentTabsEl = this.el.closest("calcite-tabs");
   }
   disconnectedCallback() {
-    var _a, _b;
+    var _a, _b, _c;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     // Dispatching to body in order to be listened by other elements that are still connected to the DOM.
     (_b = document.body) === null || _b === void 0 ? void 0 : _b.dispatchEvent(new CustomEvent("calciteTabTitleUnregister", {
       detail: this.el
     }));
+    (_c = this.resizeObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
   }
   componentWillLoad() {
     if (Build.isBrowser) {
@@ -112,7 +116,7 @@ export class TabTitle {
       h("div", { class: {
           container: true,
           "container--has-text": this.hasText
-        } },
+        }, ref: (el) => { var _a; return (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(el); } },
         this.iconStart ? iconStartEl : null,
         h("slot", null),
         this.iconEnd ? iconEndEl : null)));
@@ -567,6 +571,24 @@ export class TabTitle {
           }
         }
       }
+    }, {
+      "method": "calciteInternalTabIconChanged",
+      "name": "calciteInternalTabIconChanged",
+      "bubbles": true,
+      "cancelable": false,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
     }]; }
   static get methods() { return {
     "getTabIndex": {

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

@@ -1,6 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.582
+ * v1.0.0-next.591
  */
 export {};

package/dist/collection/components/tabs/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.582
+ * v1.0.0-next.591
  */
 export const SLOTS = {
   tabNav: "tab-nav"

package/dist/collection/components/tabs/tabs.css

@@ -67,6 +67,11 @@
   animation-name: in-scale;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --calcite-internal-duration-factor: 0.01;
+  }
+}
 /**
 * Currently only used in Checkbox.
 */

package/dist/collection/components/tabs/tabs.e2e.js

@@ -0,0 +1,281 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { accessible, renders, defaults, hidden } from "../../tests/commonTests";
+import { html } from "../../../support/formatting";
+describe("calcite-tabs", () => {
+    const tabsContent = `
+    <calcite-tab-nav slot="tab-nav">
+      <calcite-tab-title active>Tab 1 Title</calcite-tab-title>
+      <calcite-tab-title>Tab 2 Title</calcite-tab-title>
+      <calcite-tab-title>Tab 3 Title</calcite-tab-title>
+      <calcite-tab-title>Tab 4 Title</calcite-tab-title>
+    </calcite-tab-nav>
+    <calcite-tab active>Tab 1 Content</calcite-tab>
+    <calcite-tab>Tab 2 Content</calcite-tab>
+    <calcite-tab>Tab 3 Content</calcite-tab>
+    <calcite-tab>Tab 4 Content</calcite-tab>
+  `;
+    const tabsSnippet = `<calcite-tabs>${tabsContent}</calcite-tabs>`;
+    it("renders", async () => renders(tabsSnippet, { display: "flex" }));
+    it("honors hidden attribute", async () => hidden("calcite-tabs"));
+    it("has defaults", async () => defaults("calcite-tabs", [
+        { propertyName: "layout", defaultValue: "inline" },
+        { propertyName: "position", defaultValue: "top" },
+        { propertyName: "scale", defaultValue: "m" }
+    ]));
+    it("is accessible", async () => accessible(`<calcite-tabs>${tabsContent}</calcite-tabs>`));
+    it("sets up basic aria attributes", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <calcite-tabs>
+        <calcite-tab-nav slot="tab-nav">
+          <calcite-tab-title id="title-1" active>Tab 1 Title</calcite-tab-title>
+          <calcite-tab-title id="title-2" >Tab 2 Title</calcite-tab-title>
+          <calcite-tab-title id="title-3" >Tab 3 Title</calcite-tab-title>
+          <calcite-tab-title id="title-4" >Tab 4 Title</calcite-tab-title>
+        </calcite-tab-nav>
+
+        <calcite-tab id="tab-1" active>Tab 1 Content</calcite-tab>
+        <calcite-tab id="tab-2">Tab 2 Content</calcite-tab>
+        <calcite-tab id="tab-3">Tab 3 Content</calcite-tab>
+        <calcite-tab id="tab-4">Tab 4 Content</calcite-tab>
+      </calcite-tabs>
+    `);
+        await page.waitForChanges();
+        const tabs = await page.findAll("calcite-tab");
+        const titles = await page.findAll("calcite-tab-title");
+        expect(titles[0]).toEqualAttribute("aria-selected", "true");
+        expect(titles[1]).toEqualAttribute("aria-selected", "false");
+        expect(titles[2]).toEqualAttribute("aria-selected", "false");
+        expect(titles[3]).toEqualAttribute("aria-selected", "false");
+        for (let index = 0; index < tabs.length; index++) {
+            const tab = tabs[index];
+            const title = titles[index];
+            expect(title).toEqualAttribute("aria-controls", tab.id);
+            expect(tab).toEqualAttribute("aria-labelledby", title.id);
+        }
+    });
+    it("keeps aria attributes in sync across DOM mutations", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <calcite-tabs>
+        <calcite-tab-nav slot="tab-nav">
+          <calcite-tab-title active>Tab 1 Title</calcite-tab-title>
+          <calcite-tab-title id="insert-after-title">Tab 2 Title</calcite-tab-title>
+          <calcite-tab-title>Tab 3 Title</calcite-tab-title>
+          <calcite-tab-title>Tab 4 Title</calcite-tab-title>
+        </calcite-tab-nav>
+
+        <calcite-tab active>Tab 1 Content</calcite-tab>
+        <calcite-tab id="insert-after-tab">Tab 2 Content</calcite-tab>
+        <calcite-tab>Tab 3 Content</calcite-tab>
+        <calcite-tab>Tab 4 Content</calcite-tab>
+      </calcite-tabs>
+    `);
+        await page.$eval("calcite-tabs", (element) => {
+            element.ownerDocument
+                .getElementById("insert-after-title")
+                .insertAdjacentHTML("afterend", `<calcite-tab-title id="inserted-title">Test</calcite-tab-title>`);
+            element.ownerDocument
+                .getElementById("insert-after-tab")
+                .insertAdjacentHTML("afterend", `<calcite-tab id="inserted-tab">Test</calcite-tab>`);
+        });
+        await page.waitForChanges();
+        const tabs = await page.findAll("calcite-tab");
+        const titles = await page.findAll("calcite-tab-title");
+        for (let index = 0; index < tabs.length; index++) {
+            const tab = tabs[index];
+            const title = titles[index];
+            expect(title).toEqualAttribute("aria-controls", tab.id);
+            expect(tab).toEqualAttribute("aria-labelledby", title.id);
+        }
+    });
+    describe("when no scale is provided", () => {
+        it("should render itself and child tab elements with default medium scale", async () => {
+            const page = await newE2EPage({
+                html: `<calcite-tabs>${tabsContent}</calcite-tabs>`
+            });
+            expect(await page.find("calcite-tabs")).toEqualAttribute("scale", "m");
+            expect(await page.find("calcite-tab-nav")).toEqualAttribute("scale", "m");
+            expect(await page.find("calcite-tab-title")).toEqualAttribute("scale", "m");
+            expect(await page.find("calcite-tab")).toEqualAttribute("scale", "m");
+        });
+    });
+    describe("when scale is provided", () => {
+        it("should render itself and child tab elements with corresponding scale (small)", async () => {
+            const page = await newE2EPage({
+                html: `<calcite-tabs scale="s">${tabsContent}</calcite-tabs>`
+            });
+            expect(await page.find("calcite-tabs")).toEqualAttribute("scale", "s");
+            expect(await page.find("calcite-tab-nav")).toEqualAttribute("scale", "s");
+            expect(await page.find("calcite-tab-title")).toEqualAttribute("scale", "s");
+            expect(await page.find("calcite-tab")).toEqualAttribute("scale", "s");
+        });
+        it("should render itself and child tab elements with corresponding scale (medium)", async () => {
+            const page = await newE2EPage({
+                html: `<calcite-tabs scale="m">${tabsContent}</calcite-tabs>`
+            });
+            expect(await page.find("calcite-tabs")).toEqualAttribute("scale", "m");
+            expect(await page.find("calcite-tab-nav")).toEqualAttribute("scale", "m");
+            expect(await page.find("calcite-tab-title")).toEqualAttribute("scale", "m");
+            expect(await page.find("calcite-tab")).toEqualAttribute("scale", "m");
+        });
+        it("should render itself and child tab elements with corresponding scale (large)", async () => {
+            const page = await newE2EPage({
+                html: `<calcite-tabs scale="l">${tabsContent}</calcite-tabs>`
+            });
+            expect(await page.find("calcite-tabs")).toEqualAttribute("scale", "l");
+            expect(await page.find("calcite-tab-nav")).toEqualAttribute("scale", "l");
+            expect(await page.find("calcite-tab-title")).toEqualAttribute("scale", "l");
+            expect(await page.find("calcite-tab")).toEqualAttribute("scale", "l");
+        });
+    });
+    describe("when layout is inline and bordered is true", () => {
+        it("should render tabs, tab-nav, and tab-title with bordered attribute", async () => {
+            const page = await newE2EPage({
+                html: `<calcite-tabs bordered>${tabsContent}</calcite-tabs>`
+            });
+            expect(await page.find("calcite-tabs")).toEqualAttribute("bordered", "");
+            expect(await page.find("calcite-tab-nav")).toEqualAttribute("bordered", "");
+            expect(await page.find("calcite-tab-title")).toEqualAttribute("bordered", "");
+            expect(await page.find("calcite-tab")).toEqualAttribute("bordered", null);
+        });
+        it("should render tab-nav's blue active indicator on top", async () => {
+            const page = await newE2EPage({
+                html: `
+        <calcite-tabs bordered>
+          <calcite-tab-nav slot="tab-nav">
+            <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 1 Title</calcite-tab-title>
+            <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right" >Tab 2 Title</calcite-tab-title>
+          </calcite-tab-nav>
+          <calcite-tab>Tab 1 Content</calcite-tab>
+          <calcite-tab>Tab 2 Content</calcite-tab>
+        </calcite-tabs>
+        `
+            });
+            const indicator = await page.find("calcite-tab-nav >>> .tab-nav-active-indicator-container");
+            const indicatorStyles = await indicator.getComputedStyle();
+            expect(indicatorStyles.top).toEqual("0px");
+            expect(indicatorStyles.bottom).not.toEqual("0px");
+        });
+        it("should render tab-nav's blue active indicator on bottom when position is below (deprecated)", async () => {
+            const page = await newE2EPage({
+                html: `
+        <calcite-tabs bordered position="below">
+          <calcite-tab-nav slot="tab-nav">
+            <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 1 Title</calcite-tab-title>
+            <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right" >Tab 2 Title</calcite-tab-title>
+          </calcite-tab-nav>
+          <calcite-tab>Tab 1 Content</calcite-tab>
+          <calcite-tab>Tab 2 Content</calcite-tab>
+        </calcite-tabs>
+        `
+            });
+            const indicator = await page.find("calcite-tab-nav >>> .tab-nav-active-indicator-container");
+            const indicatorStyles = await indicator.getComputedStyle();
+            expect(indicatorStyles.bottom).toEqual("0px");
+            expect(indicatorStyles.top).not.toEqual("0px");
+        });
+        it("should render tab-nav's blue active indicator on bottom when position is bottom", async () => {
+            const page = await newE2EPage({
+                html: `
+        <calcite-tabs bordered position="bottom">
+          <calcite-tab-nav slot="tab-nav">
+            <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 1 Title</calcite-tab-title>
+            <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right" >Tab 2 Title</calcite-tab-title>
+          </calcite-tab-nav>
+          <calcite-tab>Tab 1 Content</calcite-tab>
+          <calcite-tab>Tab 2 Content</calcite-tab>
+        </calcite-tabs>
+        `
+            });
+            const indicator = await page.find("calcite-tab-nav >>> .tab-nav-active-indicator-container");
+            const indicatorStyles = await indicator.getComputedStyle();
+            expect(indicatorStyles.bottom).toEqual("0px");
+            expect(indicatorStyles.top).not.toEqual("0px");
+        });
+    });
+    it("should ignore bordered attribute when layout is center", async () => {
+        const page = await newE2EPage({
+            html: `<calcite-tabs layout="center" bordered>${tabsContent}</calcite-tabs>`
+        });
+        expect(await page.find("calcite-tabs")).not.toHaveAttribute("bordered");
+    });
+    it("item selection should work when placed inside shadow DOM (#992)", async () => {
+        const wrappedTabTemplateHTML = html `
+      <calcite-tabs>
+        <calcite-tab-nav slot="tab-nav">
+          <calcite-tab-title id="title-1" active>Tab 1 Title</calcite-tab-title>
+          <calcite-tab-title id="title-2">Tab 2 Title</calcite-tab-title>
+        </calcite-tab-nav>
+        <calcite-tab id="tab-1" active>Tab 1 Content</calcite-tab>
+        <calcite-tab id="tab-2">Tab 2 Content</calcite-tab>
+      </calcite-tabs>
+    `;
+        const page = await newE2EPage({
+            // load page with the tab template,
+            // so they're available in the browser-evaluated fn below
+            html: wrappedTabTemplateHTML
+        });
+        await page.waitForChanges();
+        const finalSelectedItem = await page.evaluate(async (templateHTML) => {
+            const wrapperName = "tab-wrapping-component";
+            customElements.define(wrapperName, class extends HTMLElement {
+                constructor() {
+                    super();
+                }
+                connectedCallback() {
+                    this.attachShadow({ mode: "open" }).innerHTML = templateHTML;
+                }
+            });
+            document.body.innerHTML = `<${wrapperName}></${wrapperName}>`;
+            const wrapper = document.querySelector(wrapperName);
+            wrapper.shadowRoot.querySelector("#title-2").click();
+            await new Promise((resolve) => requestAnimationFrame(() => resolve()));
+            await new Promise((resolve) => requestAnimationFrame(() => resolve()));
+            const titleTab = wrapper.shadowRoot.querySelector("calcite-tab-title[active]").id;
+            const contentTab = wrapper.shadowRoot.querySelector("calcite-tab[active]").id;
+            return { titleTab, contentTab };
+        }, [wrappedTabTemplateHTML]);
+        expect(finalSelectedItem.titleTab).toBe("title-2");
+        expect(finalSelectedItem.contentTab).toBe("tab-2");
+    });
+    it("item selection should work with nested tabs", async () => {
+        const page = await newE2EPage({
+            html: html `
+        <calcite-tabs id="parentTabs">
+          <calcite-tab-nav slot="tab-nav">
+            <calcite-tab-title id="parentA">Parent 1</calcite-tab-title>
+            <calcite-tab-title>Parent 2</calcite-tab-title>
+          </calcite-tab-nav>
+          <calcite-tab id="parentTabA">
+            <calcite-tabs>
+              <calcite-tab-nav slot="tab-nav">
+                <calcite-tab-title>Child 1</calcite-tab-title>
+                <calcite-tab-title id="kidB">Child 2</calcite-tab-title>
+                <calcite-tab-title>Child 3</calcite-tab-title>
+              </calcite-tab-nav>
+              <calcite-tab>child content 1</calcite-tab>
+              <calcite-tab id="kidBTab">child content 2</calcite-tab>
+              <calcite-tab>child content 3</calcite-tab>
+            </calcite-tabs>
+          </calcite-tab>
+          <calcite-tab>Parent content 2</calcite-tab>
+        </calcite-tabs>
+      `
+        });
+        await page.waitForChanges();
+        const kidB = await page.find("#kidB");
+        await kidB.click();
+        await page.waitForChanges();
+        const parentTabA = await page.find("#parentTabA");
+        const childTitle = (await parentTabA.find("calcite-tab-title[active]")).getAttribute("id");
+        const childContent = (await parentTabA.find("calcite-tab[active]")).getAttribute("id");
+        const parentTabs = await page.find("#parentTabs");
+        const parentTitle = (await parentTabs.find("calcite-tab-title[active]")).getAttribute("id");
+        const parentContent = (await parentTabs.find("calcite-tab[active]")).getAttribute("id");
+        expect(childTitle).toBe("kidB");
+        expect(childContent).toBe("kidBTab");
+        expect(parentTitle).toBe("parentA");
+        expect(parentContent).toBe("parentTabA");
+    });
+});

package/dist/collection/components/tabs/tabs.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.582
+ * v1.0.0-next.591
  */
 import { Component, Prop, h, Element, Listen, State, Fragment } from "@stencil/core";
 import { SLOTS } from "./resources";

package/dist/collection/components/tile/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.582
+ * v1.0.0-next.591
  */
 export const SLOTS = {
   contentStart: "content-start",

package/dist/collection/components/tile/tile.css

@@ -67,6 +67,11 @@
   animation-name: in-scale;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --calcite-internal-duration-factor: 0.01;
+  }
+}
 /**
 * Currently only used in Checkbox.
 */

package/dist/collection/components/tile/tile.e2e.js

@@ -0,0 +1,79 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { accessible, defaults, disabled, hidden, reflects, renders, slots } from "../../tests/commonTests";
+import { SLOTS } from "./resources";
+describe("calcite-tile", () => {
+    it("renders", async () => renders("calcite-tile", { display: "inline-block" }));
+    it("honors hidden attribute", async () => hidden("calcite-tile"));
+    it("is accessible", async () => accessible(`<calcite-tile></calcite-tile>`));
+    it("has defaults", async () => defaults("calcite-tile", [
+        { propertyName: "disabled", defaultValue: false },
+        { propertyName: "embed", defaultValue: false },
+        { propertyName: "focused", defaultValue: false },
+        { propertyName: "hidden", defaultValue: false }
+    ]));
+    it("has slots", async () => slots("calcite-tile", SLOTS));
+    it("reflects", async () => reflects("calcite-tile", [
+        { propertyName: "active", value: true },
+        { propertyName: "disabled", value: true },
+        { propertyName: "embed", value: true },
+        { propertyName: "focused", value: true },
+        { propertyName: "href", value: "http://www.esri.com" },
+        { propertyName: "icon", value: "layers" }
+    ]));
+    it("can be disabled", () => disabled("<calcite-tile heading='test' href='http://www.esri.com'></calcite-tile>"));
+    it("renders without a link by default", async () => {
+        const page = await newE2EPage();
+        await page.setContent("<calcite-tile></calcite-tile>");
+        const link = await page.find("calcite-tile >>> calcite-link");
+        expect(link).toBeNull();
+    });
+    it("renders a link when href attribute is supplied", async () => {
+        const page = await newE2EPage();
+        await page.setContent("<calcite-tile href='http://www.esri.com'></calcite-tile>");
+        const link = await page.find("calcite-tile >>> calcite-link");
+        const anchor = await page.find("calcite-tile >>> calcite-link >>> a");
+        expect(link).toEqualAttribute("href", "http://www.esri.com");
+        expect(anchor).toEqualAttribute("href", "http://www.esri.com");
+    });
+    it("renders heading only when supplied", async () => {
+        const page = await newE2EPage();
+        await page.setContent("<calcite-tile heading='My Calcite Tile'></calcite-tile>");
+        const icon = await page.find("calcite-tile >>> .icon");
+        const heading = await page.find("calcite-tile >>> .heading");
+        const description = await page.find("calcite-tile >>> .description");
+        expect(icon).toBeNull();
+        expect(heading).toEqualText("My Calcite Tile");
+        expect(description).toBeNull();
+    });
+    it("renders icon only when supplied", async () => {
+        const page = await newE2EPage();
+        await page.setContent("<calcite-tile icon='layers'></calcite-tile>");
+        const icon = await page.find("calcite-tile >>> .icon");
+        const heading = await page.find("calcite-tile >>> .heading");
+        const description = await page.find("calcite-tile >>> .description");
+        expect(icon).toBeDefined();
+        expect(heading).toBeNull();
+        expect(description).toBeNull();
+    });
+    it("renders description only when supplied", async () => {
+        const page = await newE2EPage();
+        await page.setContent("<calcite-tile description='My Calcite Tile Description.'></calcite-tile>");
+        const icon = await page.find("calcite-tile >>> .icon");
+        const heading = await page.find("calcite-tile >>> .heading");
+        const description = await page.find("calcite-tile >>> .description");
+        expect(icon).toBeNull();
+        expect(heading).toBeNull();
+        expect(description).toEqualText("My Calcite Tile Description.");
+    });
+    it("renders large icon when only icon and heading are supplied", async () => {
+        const page = await newE2EPage();
+        await page.setContent('<calcite-tile icon="layers" heading="My Large Visual Calcite Tile"></calcite-tile>');
+        const icon = await page.find("calcite-tile >>> calcite-icon");
+        const heading = await page.find("calcite-tile >>> .heading");
+        const description = await page.find("calcite-tile >>> .description");
+        expect(icon).toEqualAttribute("icon", "layers");
+        expect(icon).toEqualAttribute("scale", "l");
+        expect(heading).toEqualText("My Large Visual Calcite Tile");
+        expect(description).toBeNull();
+    });
+});

package/dist/collection/components/tile/tile.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.582
+ * v1.0.0-next.591
  */
 import { Component, Element, Fragment, h, Prop } from "@stencil/core";
 import { SLOTS } from "./resources";

package/dist/collection/components/tile-select/interfaces.js

@@ -1,6 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.582
+ * v1.0.0-next.591
  */
 export {};

package/dist/collection/components/tile-select/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.582
+ * v1.0.0-next.591
  */
 export const CSS = {
   checked: "checked",

package/dist/collection/components/tile-select/tile-select.css

@@ -67,6 +67,11 @@
   animation-name: in-scale;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --calcite-internal-duration-factor: 0.01;
+  }
+}
 /**
 * Currently only used in Checkbox.
 */