@esri/calcite-components 1.0.0-next.597 → 1.0.0-next.598

package/dist/calcite/p-f52edbbb.entry.js

@@ -1,6 +0,0 @@
-/*!
- * 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.597
- */
-import{r as t,c as e,h as i,H as a,g as s}from"./p-975aba66.js";import{s as o,t as n,g as l}from"./p-7dddc346.js";import{S as r}from"./p-5dc47d03.js";import{c,d}from"./p-1421f9ec.js";import{c as h,d as m,g as u}from"./p-01cb5477.js";import"./p-205462c9.js";import"./p-65e8434d.js";import"./p-034710a1.js";import"./p-0043efc4.js";const p={slow:14e3,medium:1e4,fast:6e3},g=class{constructor(i){t(this,i),this.calciteAlertBeforeClose=e(this,"calciteAlertBeforeClose",6),this.calciteAlertClose=e(this,"calciteAlertClose",6),this.calciteAlertBeforeOpen=e(this,"calciteAlertBeforeOpen",6),this.calciteAlertOpen=e(this,"calciteAlertOpen",6),this.calciteInternalAlertSync=e(this,"calciteInternalAlertSync",6),this.calciteInternalAlertRegister=e(this,"calciteInternalAlertRegister",6),this.active=!1,this.open=!1,this.autoDismiss=!1,this.autoDismissDuration=this.autoDismiss?"medium":null,this.color="blue",this.intlClose="Close",this.placement="bottom",this.scale="m",this.effectiveLocale="",this.queue=[],this.queueLength=0,this.queued=!1,this.autoDismissTimeoutId=null,this.trackTimer=Date.now(),this.openTransitionProp="opacity",this.setTransitionEl=t=>{this.transitionEl=t,c(this)},this.closeAlert=()=>{this.autoDismissTimeoutId=null,this.queued=!1,this.open=!1,this.queue=this.queue.filter((t=>t!==this.el)),this.determineActiveAlert(),this.calciteInternalAlertSync.emit({queue:this.queue})}}activeHandler(t){this.open=t}openHandler(t){this.open&&!this.queued&&(this.calciteInternalAlertRegister.emit(),this.active=t),this.open||(this.queue=this.queue.filter((t=>t!==this.el)),this.calciteInternalAlertSync.emit({queue:this.queue}),this.active=!1)}updateRequestedIcon(){this.requestedIcon=o(r,this.icon,this.color)}updateDuration(){this.autoDismiss&&this.autoDismissTimeoutId&&(window.clearTimeout(this.autoDismissTimeoutId),this.autoDismissTimeoutId=window.setTimeout((()=>this.closeAlert()),p[this.autoDismissDuration]-(Date.now()-this.trackTimer)))}connectedCallback(){h(this);const t=this.open||this.active;t&&!this.queued&&(this.activeHandler(t),this.openHandler(t),this.calciteInternalAlertRegister.emit()),c(this)}componentWillLoad(){this.requestedIcon=o(r,this.icon,this.color)}disconnectedCallback(){window.clearTimeout(this.autoDismissTimeoutId),d(this),m(this)}render(){const t=i("button",{"aria-label":this.intlClose,class:"alert-close",onClick:this.closeAlert,ref:t=>this.closeButton=t,type:"button"},i("calcite-icon",{icon:"x",scale:"l"===this.scale?"m":"s"})),e=new Intl.NumberFormat(this.effectiveLocale,{minimumFractionDigits:0,maximumFractionDigits:20,numberingSystem:u(this.numberingSystem),signDisplay:"always"}).format(this.queueLength>2?this.queueLength-1:1),s=i("div",{class:(this.queueLength>1?"active ":"")+"alert-queue-count"},i("calcite-chip",{scale:this.scale,value:e},e)),{active:o,autoDismiss:l,label:r,placement:c,queued:d,requestedIcon:h}=this,m=l?"alert":"alertdialog",p=!o;return i(a,{"aria-hidden":n(p),"aria-label":r,"calcite-hydrated-hidden":p,role:m},i("div",{class:{container:!0,queued:d,[c]:!0},ref:this.setTransitionEl},h?i("div",{class:"alert-icon"},i("calcite-icon",{icon:h,scale:"l"===this.scale?"m":"s"})):null,i("div",{class:"alert-content"},i("slot",{name:"title"}),i("slot",{name:"message"}),i("slot",{name:"link"})),s,l?null:t,o&&!d&&l?i("div",{class:"alert-dismiss-progress"}):null))}alertSync(t){this.queue!==t.detail.queue&&(this.queue=t.detail.queue),this.queueLength=this.queue.length,this.determineActiveAlert(),t.stopPropagation()}alertRegister(){this.open&&!this.queue.includes(this.el)&&(this.queued=!0,this.queue.push(this.el)),this.calciteInternalAlertSync.emit({queue:this.queue}),this.determineActiveAlert()}async setFocus(){const t=l(this.el,{selector:"calcite-link"});(this.closeButton||t)&&(t?t.setFocus():this.closeButton&&this.closeButton.focus())}determineActiveAlert(){var t;(null===(t=this.queue)||void 0===t?void 0:t[0])===this.el&&(this.openAlert(),this.autoDismiss&&!this.autoDismissTimeoutId&&(this.trackTimer=Date.now(),this.autoDismissTimeoutId=window.setTimeout((()=>this.closeAlert()),p[this.autoDismissDuration])))}onBeforeOpen(){this.calciteAlertBeforeOpen.emit()}onOpen(){this.calciteAlertOpen.emit()}onBeforeClose(){this.calciteAlertBeforeClose.emit()}onClose(){this.calciteAlertClose.emit()}openAlert(){window.clearTimeout(this.queueTimeout),this.queueTimeout=window.setTimeout((()=>this.queued=!1),300)}get el(){return s(this)}static get watchers(){return{active:["activeHandler"],open:["openHandler"],icon:["updateRequestedIcon"],color:["updateRequestedIcon"],autoDismissDuration:["updateDuration"]}}};g.style='@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([scale=s]){--calcite-alert-width:40em;--calcite-alert-spacing-token-small:0.5rem;--calcite-alert-spacing-token-large:0.75rem}:host([scale=s]) slot[name=title]::slotted(*),:host([scale=s]) *::slotted([slot=title]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=s]) slot[name=message]::slotted(*),:host([scale=s]) *::slotted([slot=message]){font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) slot[name=link]::slotted(*),:host([scale=s]) *::slotted([slot=link]){font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) .alert-queue-count{margin-inline:0.5rem}:host([scale=s]) .container{--calcite-alert-min-height:3.5rem}:host([scale=s]) .alert-close{padding:0.5rem}:host([scale=m]){--calcite-alert-width:50em;--calcite-alert-spacing-token-small:0.75rem;--calcite-alert-spacing-token-large:1rem}:host([scale=m]) slot[name=title]::slotted(*),:host([scale=m]) *::slotted([slot=title]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=m]) slot[name=message]::slotted(*),:host([scale=m]) *::slotted([slot=message]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) slot[name=link]::slotted(*),:host([scale=m]) *::slotted([slot=link]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) .alert-queue-count{margin-inline:0.75rem}:host([scale=m]) .container{--calcite-alert-min-height:4.1875rem}:host([scale=l]){--calcite-alert-width:60em;--calcite-alert-spacing-token-small:1rem;--calcite-alert-spacing-token-large:1.25rem}:host([scale=l]) slot[name=title]::slotted(*),:host([scale=l]) *::slotted([slot=title]){margin-block-end:0.25rem;font-size:var(--calcite-font-size-1);line-height:1.375}:host([scale=l]) slot[name=message]::slotted(*),:host([scale=l]) *::slotted([slot=message]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) slot[name=link]::slotted(*),:host([scale=l]) *::slotted([slot=link]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) .alert-queue-count{margin-inline:1rem}:host([scale=l]) .container{--calcite-alert-min-height:5.625rem}:host{--calcite-alert-edge-distance:2rem;display:block}:host .container{pointer-events:none;position:fixed;z-index:500;margin-block:0px;margin-inline:auto;display:flex;align-items:center;justify-content:center;background-color:var(--calcite-ui-foreground-1);opacity:0;--tw-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);--tw-shadow-colored:0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);border-radius:var(--calcite-border-radius);border-block-start:0px solid transparent;border-inline:1px solid var(--calcite-ui-border-3);border-block-end:1px solid var(--calcite-ui-border-3);min-block-size:var(--calcite-alert-min-height);inline-size:var(--calcite-alert-width);max-inline-size:calc(100% - (var(--calcite-alert-edge-distance) * 2 + 2px));max-block-size:0;transition:var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out}:host .container.bottom,:host .container.top{inset-inline-end:0;inset-inline-start:0}:host .container[class*=bottom]{transform:translate3d(0, var(--calcite-alert-edge-distance), 0);inset-block-end:var(--calcite-alert-edge-distance)}:host .container[class*=top]{transform:translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), 0);inset-block-start:var(--calcite-alert-edge-distance)}:host .container[class*=-start]{inset-inline-start:var(--calcite-alert-edge-distance);inset-inline-end:auto}:host .container[class*=-end]{inset-inline-end:var(--calcite-alert-edge-distance);inset-inline-start:auto}:host([calcite-hydrated-hidden]){visibility:hidden !important;pointer-events:none}.container{display:flex;inline-size:100%;align-items:center;justify-content:center}.alert-close{outline-color:transparent}.alert-close:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}:host([open]) .container:not(.queued){max-block-size:100%;border-block-start-width:2px;opacity:1;pointer-events:initial}:host([open]) .container:not(.queued)[class*=bottom]{transform:translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), inherit)}:host([open]) .container:not(.queued)[class*=top]{transform:translate3d(0, var(--calcite-alert-edge-distance), inherit)}slot[name=title]::slotted(*),*::slotted([slot=title]){font-size:var(--calcite-font-size-0);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}slot[name=message]::slotted(*),*::slotted([slot=message]){margin:0px;display:inline;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-2);margin-inline-end:0.5rem}slot[name=link]::slotted(*),*::slotted([slot=link]){display:inline-flex;color:var(--calcite-ui-text-link)}.alert-content{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;padding-inline:var(--calcite-alert-spacing-token-large);flex:0 0 auto;overflow-wrap:break-word;background-color:var(--calcite-ui-foreground-1);flex:1 1 auto;min-inline-size:0;padding-block:var(--calcite-alert-spacing-token-small);padding-inline:0 var(--calcite-alert-spacing-token-small);border-end-start-radius:var(--calcite-border-radius);border-end-end-radius:var(--calcite-border-radius)}.alert-content:first-of-type:not(:only-child){padding-inline-start:var(--calcite-alert-spacing-token-large)}.alert-content:only-child{padding:var(--calcite-alert-spacing-token-small)}.alert-icon{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;padding-block:var(--calcite-alert-spacing-token-small);padding-inline:var(--calcite-alert-spacing-token-large);flex:0 0 auto;display:flex;align-items:center;align-self:stretch;background-color:var(--calcite-ui-foreground-1);padding-block:0px}.alert-close{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;padding-block:var(--calcite-alert-spacing-token-small);padding-inline:var(--calcite-alert-spacing-token-large);flex:0 0 auto;cursor:pointer;align-self:stretch;overflow:hidden;border-style:none;background-color:var(--calcite-ui-foreground-1);padding-block:0px;color:var(--calcite-ui-text-3);outline:2px solid transparent;outline-offset:2px;border-end-end-radius:var(--calcite-border-radius)}.alert-close:hover,.alert-close:focus{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1)}.alert-close:open{background-color:var(--calcite-ui-foreground-3)}.alert-queue-count{visibility:hidden;display:flex;cursor:default;align-items:center;justify-content:space-around;align-self:stretch;overflow:hidden;background-color:var(--calcite-ui-foreground-1);text-align:center;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-2);opacity:0;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-inline:0px solid transparent;border-start-end-radius:0}.alert-queue-count.active{visibility:visible;opacity:1}:host([auto-dismiss])>.alert-queue-count{border-inline-end:0px solid transparent}.alert-dismiss-progress{position:absolute;display:block;inline-size:100%;overflow:hidden;inset-inline:0;inset-block-start:-2px;block-size:2px;border-radius:var(--calcite-border-radius) var(--calcite-border-radius) 0 0}.alert-dismiss-progress:after{position:absolute;inset-block-start:0px;display:block;block-size:2px;content:"";background-color:var(--calcite-alert-dismiss-progress-background);inset-inline-end:0}:host([color=blue]) .container{border-block-start-color:var(--calcite-ui-info)}:host([color=blue]) .container .alert-icon{color:var(--calcite-ui-info)}:host([color=red]) .container{border-block-start-color:var(--calcite-ui-danger)}:host([color=red]) .container .alert-icon{color:var(--calcite-ui-danger)}:host([color=yellow]) .container{border-block-start-color:var(--calcite-ui-warning)}:host([color=yellow]) .container .alert-icon{color:var(--calcite-ui-warning)}:host([color=green]) .container{border-block-start-color:var(--calcite-ui-success)}:host([color=green]) .container .alert-icon{color:var(--calcite-ui-success)}:host([auto-dismiss-duration=fast]) .alert-dismiss-progress:after{animation:dismissProgress 6000ms ease-out}:host([auto-dismiss-duration=medium]) .alert-dismiss-progress:after{animation:dismissProgress 10000ms ease-out}:host([auto-dismiss-duration=slow]) .alert-dismiss-progress:after{animation:dismissProgress 14000ms ease-out}@keyframes dismissProgress{0%{inline-size:0px;opacity:0.75}100%{inline-size:100%;opacity:1}}';export{g as calcite_alert}

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

@@ -1,183 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { accessible, renders, hidden } from "../../tests/commonTests";
-import { html } from "../../../support/formatting";
-import { CSS } from "../accordion-item/resources";
-describe("calcite-accordion", () => {
-    const accordionContent = html `
-    <calcite-accordion-item heading="Accordion Title 1" id="1"
-      ><calcite-action scale="s" icon="brush-tip" label="Paint" slot="actions-start"></calcite-action>Accordion Item
-      Content
-      <calcite-action scale="s" icon="sound" label="Volume" slot="actions-end"></calcite-action>
-    </calcite-accordion-item>
-    <calcite-accordion-item heading="Accordion Title 1" id="2" active>Accordion Item Content </calcite-accordion-item>
-    <calcite-accordion-item heading="Accordion Title 3" id="3">Accordion Item Content </calcite-accordion-item>
-  `;
-    it("renders", async () => renders("calcite-accordion", { display: "block" }));
-    it("honors hidden attribute", async () => hidden("calcite-accordion"));
-    it("is accessible", async () => accessible(`<calcite-accordion>${accordionContent}</calcite-accordion>`));
-    it("renders default props when none are provided", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-    <calcite-accordion>
-    ${accordionContent}
-    </calcite-accordion>`);
-        const element = await page.find("calcite-accordion");
-        expect(element).toEqualAttribute("appearance", "solid");
-        expect(element).toEqualAttribute("icon-position", "end");
-        expect(element).toEqualAttribute("scale", "m");
-        expect(element).toEqualAttribute("selection-mode", "multi");
-        expect(element).toEqualAttribute("icon-type", "chevron");
-    });
-    it("renders requested props when valid props are provided", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-    <calcite-accordion appearance="minimal" icon-position="start"  scale="l" selection-mode="single-persist" icon-type="caret">
-    ${accordionContent}
-    </calcite-accordion>`);
-        const element = await page.find("calcite-accordion");
-        expect(element).toEqualAttribute("appearance", "minimal");
-        expect(element).toEqualAttribute("icon-position", "start");
-        expect(element).toEqualAttribute("scale", "l");
-        expect(element).toEqualAttribute("selection-mode", "single-persist");
-        expect(element).toEqualAttribute("icon-type", "caret");
-    });
-    it("renders icon if requested", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-    <calcite-accordion appearance="minimal" icon-position="start"  scale="l" selection-mode="single-persist" icon-type="caret">
-    <calcite-accordion-item heading="Accordion Title 1" icon="car" id="1">Accordion Item Content
-    </calcite-accordion-item>
-    <calcite-accordion-item item-title="Accordion Title 1" id="2" expanded>Accordion Item Content 
-    </calcite-accordion-item>
-    <calcite-accordion-item heading="Accordion Title 3" icon="car" id="3">Accordion Item Content
-    </calcite-accordion-item>
-    </calcite-accordion>`);
-        const icon1 = await page.find(`calcite-accordion-item[id='1'] >>> .${CSS.iconStart}`);
-        const icon2 = await page.find(`calcite-accordion-item[id='2'] >>> .${CSS.iconStart}`);
-        const icon3 = await page.find(`calcite-accordion-item[id='3'] >>> .${CSS.iconStart}`);
-        expect(icon1).not.toBe(null);
-        expect(icon2).toBe(null);
-        expect(icon3).not.toBe(null);
-    });
-    it("renders expanded item based on attribute in dom", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-    <calcite-accordion>
-    ${accordionContent}
-    </calcite-accordion>`);
-        const element = await page.find("calcite-accordion");
-        const item1 = await element.find("calcite-accordion-item[id='1']");
-        const item2 = await element.find("calcite-accordion-item[id='2']");
-        const item3 = await element.find("calcite-accordion-item[id='3']");
-        const item1Content = await element.find(`calcite-accordion-item[id='1'] >>> .${CSS.content}`);
-        const item2Content = await element.find(`calcite-accordion-item[id='2'] >>> .${CSS.content}`);
-        const item3Content = await element.find(`calcite-accordion-item[id='3'] >>> .${CSS.content} `);
-        expect(item1).not.toHaveAttribute("expanded");
-        expect(item1).not.toHaveAttribute("active");
-        expect(item2).toHaveAttribute("expanded");
-        expect(item2).toHaveAttribute("active");
-        expect(item3).not.toHaveAttribute("expanded");
-        expect(item3).not.toHaveAttribute("active");
-        expect(await item1Content.isVisible()).toBe(false);
-        expect(await item2Content.isVisible()).toBe(true);
-        expect(await item3Content.isVisible()).toBe(false);
-    });
-    it("renders multiple expanded items when in multi selection mode", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-    <calcite-accordion>
-    ${accordionContent}
-    </calcite-accordion>`);
-        const element = await page.find("calcite-accordion");
-        expect(element).toEqualAttribute("selection-mode", "multi");
-        const item1 = await element.find("calcite-accordion-item[id='1']");
-        const item2 = await element.find("calcite-accordion-item[id='2']");
-        const item3 = await element.find("calcite-accordion-item[id='3']");
-        const item1Content = await element.find(`calcite-accordion-item[id='1'] >>> .${CSS.content}`);
-        const item2Content = await element.find(`calcite-accordion-item[id='2'] >>> .${CSS.content}`);
-        const item3Content = await element.find(`calcite-accordion-item[id='3'] >>> .${CSS.content}`);
-        await item1.click();
-        await item3.click();
-        expect(item1).toHaveAttribute("expanded");
-        expect(item1).toHaveAttribute("active");
-        expect(item2).toHaveAttribute("expanded");
-        expect(item2).toHaveAttribute("active");
-        expect(item3).toHaveAttribute("expanded");
-        expect(item3).toHaveAttribute("active");
-        expect(await item1Content.isVisible()).toBe(true);
-        expect(await item2Content.isVisible()).toBe(true);
-        expect(await item3Content.isVisible()).toBe(true);
-    });
-    it("renders just one expanded item when in single selection mode", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-    <calcite-accordion selection-mode="single">
-    ${accordionContent}
-    </calcite-accordion>`);
-        const element = await page.find("calcite-accordion");
-        expect(element).toEqualAttribute("selection-mode", "single");
-        const item1 = await element.find("calcite-accordion-item[id='1']");
-        const item2 = await element.find("calcite-accordion-item[id='2']");
-        const item3 = await element.find("calcite-accordion-item[id='3']");
-        const item1Content = await element.find(`calcite-accordion-item[id='1'] >>> .${CSS.content}`);
-        const item2Content = await element.find(`calcite-accordion-item[id='2'] >>> .${CSS.content}`);
-        const item3Content = await element.find(`calcite-accordion-item[id='3'] >>> .${CSS.content}`);
-        await item1.click();
-        await item3.click();
-        expect(item1).not.toHaveAttribute("expanded");
-        expect(item1).not.toHaveAttribute("active");
-        expect(item2).not.toHaveAttribute("expanded");
-        expect(item2).not.toHaveAttribute("active");
-        expect(item3).toHaveAttribute("expanded");
-        expect(item3).toHaveAttribute("active");
-        expect(await item1Content.isVisible()).toBe(false);
-        expect(await item2Content.isVisible()).toBe(false);
-        expect(await item3Content.isVisible()).toBe(true);
-    });
-    it("clicking on an accordion with selection-mode=single does not toggle unrelated accordions with the same selection mode", async () => {
-        const page = await newE2EPage({
-            html: html `<calcite-accordion selection-mode="single" id="first"> ${accordionContent} </calcite-accordion>
-        <calcite-accordion selection-mode="single" id="second"> ${accordionContent} </calcite-accordion>`
-        });
-        await page.waitForChanges();
-        const firstAccordion = await page.find("calcite-accordion[id='first']");
-        const item1FirstAccordion = await firstAccordion.find("calcite-accordion-item[id='1']");
-        await item1FirstAccordion.click();
-        await page.waitForChanges();
-        expect(await item1FirstAccordion.getProperty("active")).toBe(true);
-        expect(await item1FirstAccordion.getProperty("expanded")).toBe(true);
-        const secondAccordion = await page.find("calcite-accordion[id='second']");
-        const item1SecondAccordion = await secondAccordion.find("calcite-accordion-item[id='1']");
-        await item1SecondAccordion.click();
-        await page.waitForChanges();
-        expect(await item1SecondAccordion.getProperty("active")).toBe(true);
-        expect(await item1SecondAccordion.getProperty("expanded")).toBe(true);
-        expect(await item1FirstAccordion.getProperty("active")).toBe(true);
-        expect(await item1FirstAccordion.getProperty("expanded")).toBe(true);
-    });
-    it("prevents closing the last expanded item when in single-persist selection mode", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-    <calcite-accordion selection-mode="single-persist">
-    ${accordionContent}
-    </calcite-accordion>`);
-        const element = await page.find("calcite-accordion");
-        expect(element).toEqualAttribute("selection-mode", "single-persist");
-        const item1 = await element.find("calcite-accordion-item[id='1']");
-        const item2 = await element.find("calcite-accordion-item[id='2']");
-        const item3 = await element.find("calcite-accordion-item[id='3']");
-        const item1Content = await element.find(`calcite-accordion-item[id='1'] >>> .${CSS.content}`);
-        const item2Content = await element.find(`calcite-accordion-item[id='2'] >>> .${CSS.content}`);
-        const item3Content = await element.find(`calcite-accordion-item[id='3'] >>> .${CSS.content}`);
-        await item2.click();
-        expect(item1).not.toHaveAttribute("expanded");
-        expect(item1).not.toHaveAttribute("active");
-        expect(item2).toHaveAttribute("expanded");
-        expect(item2).toHaveAttribute("active");
-        expect(item3).not.toHaveAttribute("expanded");
-        expect(item3).not.toHaveAttribute("active");
-        expect(await item1Content.isVisible()).toBe(false);
-        expect(await item2Content.isVisible()).toBe(true);
-        expect(await item3Content.isVisible()).toBe(false);
-    });
-});

package/dist/collection/components/accordion-item/accordion-item.e2e.js

@@ -1,8 +0,0 @@
-import { accessible, renders, slots, hidden } from "../../tests/commonTests";
-import { SLOTS } from "./resources";
-describe("calcite-accordion-item", () => {
-    it("renders", async () => renders("calcite-accordion-item", { display: "flex" }));
-    it("honors hidden attribute", async () => hidden("calcite-accordion-item"));
-    it("is accessible", async () => accessible(`<calcite-accordion-item heading="My Heading"></calcite-accordion-item>`));
-    it("has slots", () => slots("calcite-accordion-item", SLOTS));
-});

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

@@ -1,93 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { accessible, disabled, hidden, renders, slots } from "../../tests/commonTests";
-import { CSS, SLOTS } from "./resources";
-describe("calcite-action", () => {
-    it("renders", async () => renders("calcite-action", { display: "flex" }));
-    it("honors hidden attribute", async () => hidden("calcite-action"));
-    it("can be disabled", () => disabled("calcite-action"));
-    it("has slots", () => slots("calcite-action", SLOTS));
-    it("should have visible text when text is enabled", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-action text="hello world" text-enabled></calcite-action>`);
-        const textContainer = await page.find(`calcite-action >>> .${CSS.textContainer}`);
-        const isVisible = await textContainer.isVisible();
-        expect(isVisible).toBe(true);
-    });
-    it("should not have visible text when text is not enabled", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-action text="hello world"></calcite-action>`);
-        const textContainer = await page.find(`calcite-action >>> .${CSS.textContainer}`);
-        const isVisible = await textContainer.isVisible();
-        expect(isVisible).toBe(false);
-    });
-    it("should have icon container with icon prop", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-action icon="hamburger"></calcite-action>`);
-        const iconContainer = await page.find(`calcite-action >>> .${CSS.iconContainer}`);
-        expect(iconContainer).not.toBeNull();
-    });
-    it("should have icon container with calcite-icon", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-action><calcite-icon icon="hamburger" scale="s"></calcite-icon></calcite-action>`);
-        const iconContainer = await page.find(`calcite-action >>> .${CSS.iconContainer}`);
-        expect(iconContainer).not.toBeNull();
-    });
-    it("should have icon container with calcite-icon: after delay", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-action></calcite-action>`);
-        const action = await page.find("calcite-action");
-        await page.waitForTimeout(1);
-        action.innerHTML = `<calcite-icon icon="hamburger" scale="s"></calcite-icon>`;
-        await page.waitForChanges();
-        const iconContainer = await page.find(`calcite-action >>> .${CSS.iconContainer}`);
-        expect(iconContainer).not.toBeNull();
-    });
-    it("should have icon container with svg", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-action><svg></svg></calcite-action>`);
-        const iconContainer = await page.find(`calcite-action >>> .${CSS.iconContainer}`);
-        expect(iconContainer).not.toBeNull();
-    });
-    it("should not have icon container if no icon present", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-action></calcite-action>`);
-        const iconContainer = await page.find(`calcite-action >>> .${CSS.iconContainer}`);
-        expect(iconContainer).toBeNull();
-    });
-    it("should have icon container if loading", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-action loading></calcite-action>`);
-        const iconContainer = await page.find(`calcite-action >>> .${CSS.iconContainer}`);
-        expect(iconContainer).not.toBeNull();
-    });
-    it("should use text prop for a11y attributes when text is not enabled", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-action text="hello world"></calcite-action>`);
-        const button = await page.find(`calcite-action >>> .${CSS.button}`);
-        expect(button.getAttribute("aria-label")).toBe("hello world");
-    });
-    it("should have label", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-action text="hello world" label="hi"></calcite-action>`);
-        const button = await page.find(`calcite-action >>> .${CSS.button}`);
-        expect(button.getAttribute("aria-label")).toBe("hi");
-    });
-    it("should have appearance=solid", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-action text="hello world"></calcite-action>`);
-        const action = await page.find("calcite-action");
-        expect(action.getAttribute("appearance")).toBe("solid");
-    });
-    it("should be accessible", async () => {
-        await accessible(`<calcite-action text="hello world"></calcite-action>`);
-        await accessible(`<calcite-action text="hello world" disabled text-enabled></calcite-action>`);
-    });
-    it("should have a tooltip", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-action text="hello world"><calcite-tooltip slot="tooltip">Hello World!</calcite-tooltip></calcite-action>`);
-        await page.waitForChanges();
-        const tooltip = await page.find("calcite-tooltip");
-        const referenceElement = await tooltip.getProperty("referenceElement");
-        expect(referenceElement).toBeDefined();
-    });
-});

package/dist/collection/components/action-bar/action-bar.e2e.js

@@ -1,290 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, focusable, hidden, reflects, renders, slots } from "../../tests/commonTests";
-import { CSS, SLOTS } from "./resources";
-import { overflowActionsDebounceInMs } from "./utils";
-import { html } from "../../../support/formatting";
-describe("calcite-action-bar", () => {
-    it("renders", async () => renders("calcite-action-bar", { display: "inline-flex" }));
-    it("honors hidden attribute", async () => hidden("calcite-action-bar"));
-    it("defaults", async () => defaults("calcite-action-bar", [
-        {
-            propertyName: "expandDisabled",
-            defaultValue: false
-        },
-        {
-            propertyName: "expanded",
-            defaultValue: false
-        },
-        {
-            propertyName: "scale",
-            defaultValue: undefined
-        },
-        {
-            propertyName: "layout",
-            defaultValue: "vertical"
-        }
-    ]));
-    it("reflects", async () => reflects("calcite-action-bar", [
-        {
-            propertyName: "expandDisabled",
-            value: true
-        },
-        {
-            propertyName: "expanded",
-            value: true
-        }
-    ]));
-    describe("expand functionality", () => {
-        it("should not modify actions within an action-menu", async () => {
-            const page = await newE2EPage({
-                html: html `<calcite-action-bar expanded>
-          <calcite-action-group>
-            <calcite-action id="my-action" text="Add" label="Add Item" icon="plus"></calcite-action>
-          </calcite-action-group>
-          <calcite-action-group>
-            <calcite-action-menu label="Save and open">
-              <calcite-action id="menu-action" text-enabled text="Save" label="Save" icon="save"></calcite-action>
-            </calcite-action-menu>
-          </calcite-action-group>
-        </calcite-action-bar>`
-            });
-            await page.waitForChanges();
-            const actionBar = await page.find("calcite-action-bar");
-            const actionBarAction = await page.find("#my-action");
-            const menuAction = await page.find("#menu-action");
-            expect(await actionBar.getProperty("expanded")).toBe(true);
-            expect(await actionBarAction.getProperty("textEnabled")).toBe(true);
-            expect(await menuAction.getProperty("textEnabled")).toBe(true);
-            actionBar.setProperty("expanded", false);
-            await page.waitForChanges();
-            expect(await menuAction.getProperty("textEnabled")).toBe(true);
-            expect(await actionBarAction.getProperty("textEnabled")).toBe(false);
-        });
-        it("should be expandable by default", async () => {
-            const page = await newE2EPage();
-            await page.setContent("<calcite-action-bar></calcite-action-bar>");
-            await page.waitForChanges();
-            const expandAction = await page.find("calcite-action-bar >>> calcite-action");
-            expect(expandAction).not.toBeNull();
-        });
-        it("allows disabling expandable behavior", async () => {
-            const page = await newE2EPage();
-            await page.setContent("<calcite-action-bar expand-disabled></calcite-action-bar>");
-            await page.waitForChanges();
-            const expandAction = await page.find("calcite-action-bar >>> calcite-action");
-            expect(expandAction).toBeNull();
-        });
-        it("should toggle expanded", async () => {
-            const page = await newE2EPage({ html: "<calcite-action-bar></calcite-action-bar>" });
-            const bar = await page.find("calcite-action-bar");
-            const buttonGroup = await page.find(`calcite-action-bar >>> .${CSS.actionGroupBottom}`);
-            const button = await buttonGroup.find("calcite-action");
-            expect(button).not.toBeNull();
-            await button.click();
-            expect(bar).toHaveAttribute("expanded");
-        });
-        it("should not fire expanded event when expanded programmatically", async () => {
-            const page = await newE2EPage();
-            await page.setContent("<calcite-action-bar></calcite-action-bar>");
-            const element = await page.find("calcite-action-bar");
-            const eventSpy = await element.spyOnEvent("calciteActionBarToggle");
-            element.setProperty("expanded", true);
-            await page.waitForChanges();
-            expect(eventSpy).not.toHaveReceivedEvent();
-        });
-        it("should fire expanded event on user interaction", async () => {
-            const page = await newE2EPage();
-            await page.setContent("<calcite-action-bar></calcite-action-bar>");
-            const element = await page.find("calcite-action-bar");
-            const eventSpy = await element.spyOnEvent("calciteActionBarToggle");
-            await element.click();
-            await page.waitForChanges();
-            expect(eventSpy).toHaveReceivedEvent();
-        });
-        it("should have child actions be textEnabled when expanded is set", async () => {
-            const page = await newE2EPage();
-            await page.setContent("<calcite-action-bar expanded></calcite-action-bar>");
-            const buttonGroup = await page.find(`calcite-action-bar >>> .${CSS.actionGroupBottom}`);
-            const button = await buttonGroup.find("calcite-action");
-            const textEnabled = await button.getProperty("textEnabled");
-            expect(textEnabled).toBe(true);
-        });
-        it("should not have bottomGroup when not expandable", async () => {
-            const page = await newE2EPage();
-            await page.setContent(html `<calcite-action-bar expand-disabled></calcite-action-bar>`);
-            const buttonGroup = await page.find(`calcite-action-bar >>> .${CSS.actionGroupBottom}`);
-            expect(buttonGroup).toBeNull();
-        });
-        it("should modify textEnabled on actions when expanded and expandDisabled", async () => {
-            const page = await newE2EPage();
-            await page.setContent(html `<calcite-action-bar expand-disabled expanded>
-        <calcite-action-group>
-          <calcite-action id="my-action" text="Add" label="Add Item" icon="plus"></calcite-action>
-        </calcite-action-group>
-      </calcite-action-bar>`);
-            const expandAction = await page.find("calcite-action-bar >>> calcite-action");
-            const action = await page.find("calcite-action");
-            const actionBar = await page.find("calcite-action-bar");
-            const group = await page.find("calcite-action-group");
-            expect(await actionBar.getProperty("expanded")).toBe(true);
-            expect(expandAction).toBeNull();
-            expect(action).not.toBeNull();
-            expect(await group.getProperty("expanded")).toBe(true);
-            expect(await action.getProperty("textEnabled")).toBe(true);
-        });
-        it("should modify textEnabled on actions when expanded is true and new children are added", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-action-bar expanded><calcite-action text="hello"></calcite-action></calcite-action-bar>`);
-            await page.evaluate(() => {
-                const actionBar = document.querySelector("calcite-action-bar");
-                const newAction = document.createElement("calcite-action");
-                newAction.textEnabled = false;
-                newAction.id = "new-child";
-                actionBar.appendChild(newAction);
-            });
-            const action = await page.find("#new-child");
-            const textEnabled = await action.getProperty("textEnabled");
-            expect(textEnabled).toBe(true);
-        });
-    });
-    it("should be accessible", async () => accessible(`
-    <calcite-action-bar>
-      <calcite-action-group>
-        <calcite-action text="Add" icon="plus"></calcite-action>
-      </calcite-action-group>
-    </calcite-action-bar>
-    `));
-    it("should be accessible when expanded", async () => accessible(`
-    <calcite-action-bar expanded>
-      <calcite-action-group>
-        <calcite-action text="Add" icon="plus"></calcite-action>
-      </calcite-action-group>
-    </calcite-action-bar>
-    `));
-    it("should focus on toggle button", async () => focusable(html `
-        <calcite-action-bar>
-          <calcite-action-group>
-            <calcite-action text="Add" icon="plus"></calcite-action>
-          </calcite-action-group>
-        </calcite-action-bar>
-      `, {
-        focusId: "expand-toggle",
-        focusTargetSelector: "calcite-action-bar"
-    }));
-    it("has slots", () => slots("calcite-action-bar", SLOTS));
-    it("should set other 'calcite-action-group' - 'menuOpen' to false", async () => {
-        const page = await newE2EPage();
-        await page.setContent(html `<calcite-action-bar>
-      <calcite-action-group>
-        <calcite-action text="Add" icon="plus"></calcite-action>
-        <calcite-action text="Add" icon="plus"></calcite-action>
-        <calcite-action text="Add" icon="plus"></calcite-action>
-        <calcite-action text="Add" icon="plus" slot="menu-actions"></calcite-action>
-        <calcite-action text="Add" icon="plus" slot="menu-actions"></calcite-action>
-      </calcite-action-group>
-      <calcite-action-group menu-open>
-        <calcite-action text="Add" icon="plus"></calcite-action>
-        <calcite-action text="Add" icon="plus"></calcite-action>
-        <calcite-action text="Add" icon="plus"></calcite-action>
-        <calcite-action text="Add" icon="plus"></calcite-action>
-        <calcite-action text="Add" icon="plus" slot="menu-actions"></calcite-action>
-        <calcite-action text="Add" icon="plus" slot="menu-actions"></calcite-action>
-      </calcite-action-group>
-    </calcite-action-bar>`);
-        const groups = await page.findAll("calcite-action-group");
-        expect(groups).toHaveLength(2);
-        expect(await groups[0].getProperty("menuOpen")).toBe(false);
-        expect(await groups[1].getProperty("menuOpen")).toBe(true);
-        const calciteActionMenuOpenChangeEvent = page.waitForEvent("calciteActionMenuOpenChange");
-        await page.$eval("calcite-action-group", (firstActionGroup) => {
-            firstActionGroup.menuOpen = true;
-            const event = new CustomEvent("calciteActionMenuOpenChange", { bubbles: true, detail: true });
-            firstActionGroup.dispatchEvent(event);
-        });
-        await calciteActionMenuOpenChangeEvent;
-        await page.waitForChanges();
-        expect(groups).toHaveLength(2);
-        expect(await groups[0].getProperty("menuOpen")).toBe(true);
-        expect(await groups[1].getProperty("menuOpen")).toBe(false);
-    });
-    it("should honor scale of expand icon", async () => {
-        const page = await newE2EPage({ html: html `<calcite-action-bar scale="l"></calcite-action-bar>` });
-        const buttonGroup = await page.find(`calcite-action-bar >>> .${CSS.actionGroupBottom}`);
-        const button = await buttonGroup.find("calcite-action");
-        expect(await button.getProperty("scale")).toBe("l");
-    });
-    const dynamicGroupActionsSelector = "#dynamic-group calcite-action";
-    const slottedActionsSelector = "calcite-action[slot='menu-actions']";
-    describe("overflow actions", () => {
-        it("should slot 'menu-actions' on sublist changes", async () => {
-            const page = await newE2EPage({
-                html: html `<div style="width:500px; height:500px;">
-          <calcite-action-bar style="height: 290px">
-            <calcite-action-group id="dynamic-group"
-              ><calcite-action text="Layer properties" icon="sliders-horizontal"></calcite-action>
-              <calcite-action id="second-action" text="Styles" icon="shapes"></calcite-action
-            ></calcite-action-group>
-            <calcite-action-group>
-              <calcite-action text="Save" icon="save" disabled></calcite-action>
-              <calcite-action icon="layers" text="Layers"></calcite-action>
-            </calcite-action-group>
-            <calcite-action-group slot="bottom-actions">
-              <calcite-action text="Tips" icon="lightbulb"></calcite-action>
-            </calcite-action-group>
-          </calcite-action-bar>
-        </div>`
-            });
-            await page.waitForTimeout(overflowActionsDebounceInMs);
-            expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(2);
-            expect(await page.findAll(slottedActionsSelector)).toHaveLength(0);
-            await page.$eval("calcite-action-bar", (element) => {
-                element.ownerDocument.getElementById("second-action").insertAdjacentHTML("afterend", `
-          <calcite-action text="Styles" icon="shapes"></calcite-action>
-          <calcite-action text="Filter" icon="layer-filter"></calcite-action>
-          <calcite-action text="Configure pop-ups" icon="popup"></calcite-action>
-          <calcite-action text="Configure attributes" icon="feature-details"></calcite-action>
-          <calcite-action text="Labels" icon="label" active></calcite-action>
-          <calcite-action text="Table" icon="table"></calcite-action>`);
-            });
-            await page.waitForTimeout(overflowActionsDebounceInMs + 10);
-            await page.waitForChanges();
-            expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8);
-            expect(await page.findAll(slottedActionsSelector)).toHaveLength(7);
-        });
-        it.skip("should slot 'menu-actions' on resize of component", async () => {
-            const page = await newE2EPage({
-                html: html `<div style="width:500px; height:500px;">
-          <calcite-action-bar style="height: 290px">
-            <calcite-action-group id="dynamic-group"
-              ><calcite-action text="Layer properties" icon="sliders-horizontal"></calcite-action>
-              <calcite-action text="Styles" icon="shapes"></calcite-action>
-              <calcite-action text="Styles" icon="shapes"></calcite-action>
-              <calcite-action text="Filter" icon="layer-filter"></calcite-action>
-              <calcite-action text="Configure pop-ups" icon="popup"></calcite-action>
-              <calcite-action text="Configure attributes" icon="feature-details"></calcite-action>
-              <calcite-action text="Labels" icon="label" active></calcite-action>
-              <calcite-action text="Table" icon="table"></calcite-action
-            ></calcite-action-group>
-            <calcite-action-group>
-              <calcite-action text="Save" icon="save" disabled></calcite-action>
-              <calcite-action icon="layers" text="Layers"></calcite-action>
-            </calcite-action-group>
-            <calcite-action-group slot="bottom-actions">
-              <calcite-action text="Tips" icon="lightbulb"></calcite-action>
-            </calcite-action-group>
-          </calcite-action-bar>
-        </div>`
-            });
-            await page.waitForTimeout(overflowActionsDebounceInMs + 10);
-            expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8);
-            expect(await page.findAll(slottedActionsSelector)).toHaveLength(7);
-            await page.$eval("calcite-action-bar", (element) => {
-                element.style.height = "550px";
-            });
-            await page.waitForTimeout(overflowActionsDebounceInMs + 10);
-            await page.waitForChanges();
-            expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8);
-            expect(await page.findAll(slottedActionsSelector)).toHaveLength(2);
-        });
-    });
-});

package/dist/collection/components/action-group/action-group.e2e.js

@@ -1,23 +0,0 @@
-import { accessible, hidden, renders, slots } from "../../tests/commonTests";
-import { newE2EPage } from "@stencil/core/testing";
-import { SLOTS } from "./resources";
-describe("calcite-action-group", () => {
-    it("renders", async () => renders("calcite-action-group", { display: "flex" }));
-    it("honors hidden attribute", async () => hidden("calcite-action-group"));
-    it("should be accessible", async () => accessible(`
-    <calcite-action-group>
-      <calcite-action text="Add" icon="plus"></calcite-action>
-    </calcite-action-group>
-    `));
-    it("has slots", () => slots("calcite-action-group", SLOTS));
-    it("should honor scale of expand icon", async () => {
-        const page = await newE2EPage({
-            html: `<calcite-action-group scale="l">
-      <calcite-action slot="menu-actions" text="Add" icon="plus"></calcite-action>
-      <calcite-action slot="menu-actions" text="Add" icon="plus"></calcite-action>
-      </calcite-action-group>`
-        });
-        const menu = await page.find(`calcite-action-group >>> calcite-action-menu`);
-        expect(await menu.getProperty("scale")).toBe("l");
-    });
-});