q2-tecton-elements 1.13.0-alpha.0 → 1.13.0

package/dist/q2-tecton-elements/q2-tecton-elements.esm.js

@@ -1 +1 @@
-import{p as e,b as a}from"./p-080839ed.js";(()=>{const a=import.meta.url,l={};return""!==a&&(l.resourcesUrl=new URL(".",a).href),e(l)})().then((e=>a([["p-bb2e110a",[[1,"q2-icon",{type:[513],label:[513]}]]],["p-06fff43d",[[1,"q2-calendar",{value:[1537],label:[513],hideLabel:[516,"hide-label"],ariaLabel:[513,"aria-label"],optional:[516],disabled:[516],invalid:[1540],typeable:[516],placeholder:[513],buttonLabel:[513,"button-label"],disabledMsg:[513,"disabled-msg"],calendarLabel:[513,"calendar-label"],disclaimer:[513],displayFormat:[513,"display-format"],startDate:[513,"start-date"],endDate:[513,"end-date"],cutoffTime:[513,"cutoff-time"],daysOfWeekChecksum:[514,"days-of-week-checksum"],popDirection:[513,"pop-direction"],assume:[513],errors:[1040],invalidDates:[16],validDates:[16],onsuccess:[16],dropdownOpen:[32],keyboardSelection:[32],typedValue:[32],dateList:[32],hintMessage:[32],hintMessageType:[32]},[[0,"change","defaultChangeHandler"],[0,"error","defaultErrorHandler"],[0,"success","defaultSuccessHandler"],[0,"focus","delegateFocus"]]]]],["p-7e030e92",[[1,"q2-dropdown",{type:[513],icon:[513],label:[513],hideLabel:[516,"hide-label"],ariaLabel:[513,"aria-label"],disabled:[516],popDirection:[513,"pop-direction"],name:[513],context:[513],contextValue:[513,"context-value"],resolvedType:[513,"resolved-type"],dropdownOpen:[32]},[[0,"focus","delegateFocus"]]]]],["p-db6f90ac",[[1,"q2-select",{label:[513],hideLabel:[516,"hide-label"],value:[1025],ariaLabel:[513,"aria-label"],selectedOptions:[1032,"selected-options"],disabled:[516],invalid:[516],errors:[16],multiple:[516],minRows:[2,"min-rows"],popDirection:[513,"pop-direction"],searchable:[516],multilineOptions:[516,"multiline-options"],optional:[516],dropdownOpen:[32],onlyShowingSelected:[32],activeOptionId:[32],searchText:[32],hasCustomDisplay:[32],inputFocused:[32],statusMessage:[32]},[[0,"change","onHostElementChange"],[0,"input","onHostElementInput"],[0,"focus","delegateFocus"],[0,"click","clickHandler"],[0,"keydown","keydownHandler"]]]]],["p-75e87cca",[[1,"q2-editable-field",{value:[1537],editing:[1540],label:[1537],hideLabel:[1540,"hide-label"],ariaLabel:[1537,"aria-label"],type:[513],formatModifier:[513,"format-modifier"],truncated:[513],maxlength:[514],persistentLabel:[516,"persistent-label"],hints:[16],errors:[16]},[[0,"change","onHostElementChange"],[0,"focus","delegateFocus"]]]]],["p-c5e55b9f",[[4,"q2-carousel",{autoPlay:[516,"auto-play"],fullWidthPanes:[516,"full-width-panes"],hidePagination:[516,"hide-pagination"],showNavigationArrows:[516,"show-navigation-arrows"],ariaLabel:[513,"aria-label"],label:[513],index:[1538],universalCarouselOptions:[32],fullWidthDisplayOptions:[32],activePaneIndex:[32],applyFocus:[32],applyPaginationFocus:[32],autoPlayInProgress:[32],compactMode:[32],carouselWrapperWidth:[32]},[[0,"change","onHostElementChange"],[0,"clickCarouselPane","carouselPaneClicked"],[0,"focus","delegateFocus"]]]]],["p-9b50c3c3",[[1,"q2-section",{label:[513],collapsible:[516],noCollapseIcon:[516,"no-collapse-icon"],expanded:[1540],contentHeight:[32],hasYieldedHeader:[32]},[[0,"change","defaultChangeHandler"],[0,"focus","delegateFocus"]]]]],["p-b281c349",[[1,"q2-stepper",{currentStep:[1538,"current-step"],stepCount:[1026,"step-count"],lastEnabledStep:[1026,"last-enabled-step"],scrollEnabled:[32],showScrollLeft:[32],showScrollRight:[32]},[[0,"change","defaultChangeHandler"],[0,"focus","delegateFocus"]]]]],["p-ac859fcc",[[1,"q2-tab-container",{value:[1537],type:[513],name:[513],color:[513],noPrint:[516,"no-print"],hasLeft:[32],hasRight:[32],scrollEnabled:[32],showScrollLeft:[32],showScrollRight:[32],tabs:[32]},[[0,"change","defaultChangeHandler"],[9,"resize","onResize"],[0,"focus","onFocus"]]]]],["p-df182f61",[[1,"q2-avatar",{name:[513],initials:[513],src:[513],icon:[1],badSrc:[32]}]]],["p-768e3a5d",[[1,"q2-checkbox",{checked:[1540],type:[513],label:[513],hideLabel:[516,"hide-label"],ariaLabel:[513,"aria-label"],indeterminate:[516],disabled:[516],value:[513],name:[513],hasError:[516,"has-error"],groupDisabled:[516,"group-disabled"],alignment:[513]},[[0,"change","defaultChangeHandler"],[0,"focus","delegateFocus"]]]]],["p-95a73559",[[1,"q2-checkbox-group",{label:[513],value:[1040],disabled:[516],optional:[516],hasError:[516,"has-error"]},[[0,"change","onHostElementChange"]]]]],["p-6702eb4d",[[1,"q2-option",{role:[513],tabindex:[513],display:[513],value:[513],disabled:[516],optionId:[513,"option-id"],disabledGroup:[516,"disabled-group"],selected:[516],hidden:[516],multiline:[516],active:[516],_multiSelectHidden:[516,"_multiselecthidden"]}]]],["p-29a37091",[[1,"q2-radio-group",{label:[513],value:[1025],disabled:[516],name:[513],optional:[516],tilelayout:[516],tileAlignment:[513,"tile-alignment"],hasError:[516,"has-error"]},[[0,"change","onHostElementChange"],[0,"focus","delegateFocus"],[0,"keydown","keydownHandler"]]]]],["p-50967020",[[1,"q2-textarea",{value:[1025],label:[513],hideLabel:[516,"hide-label"],hideMessages:[516,"hide-messages"],optional:[516],placeholder:[513],disabled:[516],readonly:[516],spellcheck:[516],maxlength:[1538],rows:[514],cols:[514],resize:[513],errors:[16],hints:[16],hasFocus:[32],downParams:[32]},[[0,"focus","onHostElementFocus"],[0,"change","onHostElementChange"]]]]],["p-7e6fc65d",[[4,"q2-carousel-pane",{index:[2],siblingCount:[2,"sibling-count"],isActivePane:[516,"is-active-pane"],label:[513]}]]],["p-32ad664c",[[0,"q2-loading-element",{shape:[513],width:[513],height:[513],borderRadius:[513,"border-radius"]}]]],["p-fbf7c5e6",[[1,"q2-loc",{value:[513],substitutions:[16]}]]],["p-07a5d703",[[1,"q2-optgroup",{disabled:[516],label:[513],hidden:[32]}]]],["p-ccbe9158",[[1,"q2-radio",{label:[513],hideLabel:[516,"hide-label"],value:[513],disabled:[516],checked:[516],name:[513],ariaLabel:[513,"aria-label"],groupDisabled:[4,"group-disabled"],groupTileLayout:[4,"group-tile-layout"]},[[0,"click","onHostClick"],[0,"focus","delegateFocus"]]]]],["p-843b1ee9",[[1,"q2-stepper-pane",{label:[513],description:[513],isActive:[516,"is-active"]}]]],["p-750bcd33",[[1,"q2-tab-pane",{value:[513],label:[513],name:[513],selected:[516],index:[2],guid:[2]}]]],["p-8ea2c4f7",[[1,"tecton-tab-pane",{value:[513],label:[513],name:[513],selected:[516],index:[2],guid:[2],provided:[516],url:[513],moduleId:[513,"module-id"],minHeight:[513,"min-height"],authPayload:[16],showForm:[4,"show-form"],_showForm:[32]}]]],["p-a6f8d09a",[[1,"q2-dropdown-item",{disabled:[516],removable:[516],separator:[516],label:[513],ariaLabel:[513,"aria-label"],value:[513]},[[0,"focus","onHostElementFocus"]]]]],["p-fa6eea5c",[[1,"q2-message",{type:[513],appearance:[513],description:[516],presentToggle:[32],present:[64]},[[0,"focus","delegateFocus"]]]]],["p-943c7745",[[1,"q2-input",{value:[1025],label:[513],hideLabel:[516,"hide-label"],type:[513],placeholder:[513],disabled:[516],autocomplete:[513],autocorrect:[513],autocapitalize:[513],hideMessages:[516,"hide-messages"],iconLeft:[513,"icon-left"],iconRight:[513,"icon-right"],readonly:[516],clearable:[516],optional:[516],formatModifier:[513,"format-modifier"],maxlength:[1538],pseudo:[516],showVisibilityToggle:[516,"show-visibility-toggle"],textHidden:[1540,"text-hidden"],ariaControls:[1,"aria-controls"],role:[1],ariaOwns:[1,"aria-owns"],ariaLabel:[513,"aria-label"],ariaHaspopup:[1,"aria-haspopup"],ariaExpanded:[4,"aria-expanded"],ariaActivedescendant:[8,"aria-activedescendant"],errors:[16],hints:[16],formattedValueObject:[32],hasFocus:[32]},[[0,"focus","onHostElementFocus"],[0,"change","onHostElementChange"]]]]],["p-9024859f",[[0,"click-elsewhere"]]],["p-9a977ee6",[[1,"q2-btn",{ariaExpanded:[4,"aria-expanded"],ariaHasPopup:[8,"aria-has-popup"],ariaControls:[1,"aria-controls"],ariaSelected:[4,"aria-selected"],label:[513],hideLabel:[516,"hide-label"],ariaLabel:[513,"aria-label"],tabIndex:[2,"tab-index"],intent:[513],disabled:[516],type:[513],loading:[516],badge:[516],active:[516],fab:[516],iconPosition:[32]},[[2,"click","disable"],[0,"focus","delegateFocus"]]],[1,"q2-loading",{type:[513],shape:[513],modifiers:[513],counts:[513],label:[513],ariaLabel:[513,"aria-label"],inline:[516]}]]]],e)));
+import{p as e,b as a}from"./p-2caa89fd.js";(()=>{const a=import.meta.url,l={};return""!==a&&(l.resourcesUrl=new URL(".",a).href),e(l)})().then((e=>a(JSON.parse('[["p-430a979b",[[1,"q2-icon",{"type":[513],"label":[513]}]]],["p-123cdfb9",[[1,"q2-calendar",{"value":[1537],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"optional":[516],"disabled":[516],"readonly":[516],"invalid":[1540],"typeable":[516],"placeholder":[513],"buttonLabel":[513,"button-label"],"disabledMsg":[513,"disabled-msg"],"calendarLabel":[513,"calendar-label"],"disclaimer":[513],"displayFormat":[513,"display-format"],"startDate":[513,"start-date"],"endDate":[513,"end-date"],"cutoffTime":[513,"cutoff-time"],"daysOfWeekChecksum":[514,"days-of-week-checksum"],"popDirection":[513,"pop-direction"],"assume":[513],"errors":[1040],"invalidDates":[16],"validDates":[16],"onsuccess":[16],"dropdownOpen":[32],"keyboardSelection":[32],"typedValue":[32],"dateList":[32],"hintMessage":[32],"hintMessageType":[32]},[[0,"change","defaultChangeHandler"],[0,"error","defaultErrorHandler"],[0,"success","defaultSuccessHandler"],[0,"focus","delegateFocus"]]]]],["p-ede12fc1",[[1,"q2-dropdown",{"type":[513],"icon":[513],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"disabled":[516],"popDirection":[513,"pop-direction"],"name":[513],"context":[513],"contextValue":[513,"context-value"],"resolvedType":[513,"resolved-type"],"dropdownOpen":[32]},[[0,"focus","delegateFocus"]]]]],["p-ae4fed23",[[1,"q2-select",{"label":[513],"hideLabel":[516,"hide-label"],"value":[1025],"ariaLabel":[513,"aria-label"],"selectedOptions":[1032,"selected-options"],"disabled":[516],"readonly":[516],"invalid":[516],"errors":[16],"multiple":[516],"minRows":[2,"min-rows"],"popDirection":[513,"pop-direction"],"searchable":[516],"multilineOptions":[516,"multiline-options"],"optional":[516],"dropdownOpen":[32],"onlyShowingSelected":[32],"activeOptionId":[32],"searchText":[32],"hasCustomDisplay":[32],"inputFocused":[32],"statusMessage":[32]},[[0,"change","onHostElementChange"],[0,"input","onHostElementInput"],[0,"focus","delegateFocus"],[0,"click","clickHandler"],[0,"keydown","keydownHandler"]]]]],["p-00e8f782",[[1,"q2-editable-field",{"value":[1537],"editing":[1540],"label":[1537],"hideLabel":[1540,"hide-label"],"ariaLabel":[1537,"aria-label"],"type":[513],"formatModifier":[513,"format-modifier"],"truncated":[513],"maxlength":[514],"persistentLabel":[516,"persistent-label"],"hints":[16],"errors":[16]},[[0,"change","onHostElementChange"],[0,"focus","delegateFocus"]]]]],["p-a4ae89cc",[[1,"q2-pagination",{"recordType":[1,"record-type"],"perPage":[2,"per-page"],"total":[514],"page":[1538],"pages":[1538],"recordsOnly":[1540,"records-only"],"pagesOnly":[1540,"pages-only"],"isSmall":[32]},[[0,"focus","onHostElementFocus"]]]]],["p-1dfaee64",[[4,"q2-carousel",{"autoPlay":[516,"auto-play"],"fullWidthPanes":[516,"full-width-panes"],"hidePagination":[516,"hide-pagination"],"showNavigationArrows":[516,"show-navigation-arrows"],"ariaLabel":[513,"aria-label"],"label":[513],"index":[1538],"universalCarouselOptions":[32],"fullWidthDisplayOptions":[32],"activePaneIndex":[32],"applyFocus":[32],"applyPaginationFocus":[32],"autoPlayInProgress":[32],"compactMode":[32],"carouselWrapperWidth":[32]},[[0,"change","onHostElementChange"],[0,"clickCarouselPane","carouselPaneClicked"],[0,"focus","delegateFocus"]]]]],["p-4ab30466",[[1,"q2-section",{"label":[513],"collapsible":[516],"noCollapseIcon":[516,"no-collapse-icon"],"expanded":[1540],"contentHeight":[32],"hasYieldedHeader":[32]},[[0,"change","defaultChangeHandler"],[0,"focus","delegateFocus"]]]]],["p-2846ab94",[[1,"q2-stepper",{"currentStep":[1538,"current-step"],"stepCount":[1026,"step-count"],"lastEnabledStep":[1026,"last-enabled-step"],"scrollEnabled":[32],"showScrollLeft":[32],"showScrollRight":[32]},[[0,"change","defaultChangeHandler"],[0,"focus","delegateFocus"]]]]],["p-6fec9235",[[1,"q2-tab-container",{"value":[1537],"type":[513],"name":[513],"color":[513],"noPrint":[516,"no-print"],"hasLeft":[32],"hasRight":[32],"scrollEnabled":[32],"showScrollLeft":[32],"showScrollRight":[32],"tabs":[32]},[[0,"change","defaultChangeHandler"],[9,"resize","onResize"],[0,"focus","onFocus"]]]]],["p-0900bec1",[[1,"q2-card",{"title":[513],"description":[513],"avatarName":[513,"avatar-name"],"avatarInitials":[513,"avatar-initials"],"avatarIcon":[513,"avatar-icon"],"avatarSrc":[513,"avatar-src"],"isSmall":[516,"is-small"],"bar":[513],"isTouch":[516,"is-touch"],"url":[513],"target":[513],"isAutoTouch":[32],"isAutoSmall":[32]},[[0,"focus","onHostElementFocus"]]]]],["p-148391d6",[[1,"q2-pill",{"disabled":[516],"active":[1540],"open":[1540],"multiple":[516],"label":[513],"value":[513],"theme":[513],"selectedOptions":[1040],"hasOptions":[32]},[[0,"focus","delegateFocus"],[0,"optionListState","optionListStateEvent"]]]]],["p-5bbf2bfe",[[1,"q2-tag",{"open":[1540],"role":[513],"label":[513],"theme":[513],"hasOptions":[32]},[[0,"focus","delegateFocus"],[0,"optionListState","optionListStateEvent"]]]]],["p-50e218c7",[[1,"q2-checkbox",{"checked":[1540],"type":[513],"label":[1537],"hideLabel":[1540,"hide-label"],"ariaLabel":[1537,"aria-label"],"indeterminate":[516],"disabled":[516],"readonly":[516],"value":[513],"name":[513],"hasError":[516,"has-error"],"groupDisabled":[516,"group-disabled"],"alignment":[513]},[[0,"change","defaultChangeHandler"],[0,"focus","delegateFocus"]]]]],["p-3fe98e3e",[[1,"q2-checkbox-group",{"label":[513],"value":[1040],"disabled":[516],"readonly":[516],"optional":[516],"hasError":[516,"has-error"]},[[0,"change","onHostElementChange"]]]]],["p-2bc1de01",[[1,"q2-option",{"role":[513],"tabindex":[513],"display":[513],"value":[513],"disabled":[516],"optionId":[513,"option-id"],"disabledGroup":[516,"disabled-group"],"selected":[516],"hidden":[516],"multiline":[516],"active":[516],"noSelect":[516,"_no-select"],"_multiSelectHidden":[516,"_multiselecthidden"]}]]],["p-d52b435e",[[1,"q2-radio-group",{"label":[513],"value":[1025],"disabled":[516],"name":[513],"optional":[516],"readonly":[516],"tilelayout":[516],"tileAlignment":[513,"tile-alignment"],"hasError":[516,"has-error"]},[[0,"change","onHostElementChange"],[0,"focus","delegateFocus"],[0,"keydown","keydownHandler"]]]]],["p-27736b6b",[[1,"q2-stepper-vertical",{"currentStepId":[1537,"current-step-id"],"structuredPanes":[32]},[[0,"change","defaultChangeHandler"],[0,"focus","delegateFocus"],[0,"statusChange","statusChangeHandler"]]]]],["p-a5562aaa",[[1,"q2-textarea",{"value":[1025],"label":[513],"hideLabel":[516,"hide-label"],"hideMessages":[516,"hide-messages"],"optional":[516],"placeholder":[513],"disabled":[516],"readonly":[516],"spellcheck":[516],"maxlength":[1538],"rows":[514],"cols":[514],"resize":[513],"errors":[16],"hints":[16],"hasFocus":[32],"downParams":[32]},[[0,"focus","onHostElementFocus"],[0,"change","onHostElementChange"]]]]],["p-327cca41",[[1,"q2-badge",{"value":[514],"maxLength":[514,"max-length"],"position":[513],"size":[513],"theme":[513],"status":[513]}]]],["p-45eb7739",[[4,"q2-carousel-pane",{"index":[2],"siblingCount":[2,"sibling-count"],"isActivePane":[516,"is-active-pane"],"label":[513]}]]],["p-221abbf6",[[0,"q2-loading-element",{"shape":[513],"width":[513],"height":[513],"borderRadius":[513,"border-radius"]}]]],["p-1305ec5f",[[1,"q2-loc",{"value":[513],"substitutions":[16]}]]],["p-e0e7ae8b",[[1,"q2-optgroup",{"disabled":[516],"label":[513],"hidden":[32]}]]],["p-3abcb09d",[[1,"q2-radio",{"label":[513],"hideLabel":[516,"hide-label"],"value":[513],"disabled":[516],"checked":[516],"name":[513],"ariaLabel":[513,"aria-label"],"groupDisabled":[4,"group-disabled"],"groupReadonly":[4,"group-readonly"],"groupTileLayout":[4,"group-tile-layout"]},[[0,"click","onHostClick"],[0,"focus","delegateFocus"]]]]],["p-c20cbb2d",[[1,"q2-stepper-pane",{"label":[513],"description":[513],"isActive":[516,"is-active"],"showWithChildren":[516,"show-with-children"],"status":[513],"isChildActive":[32]},[[0,"activeChange","checkForActiveChildren"]]]]],["p-49b2abc4",[[1,"q2-tab-pane",{"value":[513],"label":[513],"name":[513],"selected":[516],"index":[2],"guid":[2]}]]],["p-2c15414c",[[1,"tecton-tab-pane",{"value":[513],"label":[513],"name":[513],"selected":[516],"index":[2],"guid":[2],"provided":[516],"url":[513],"moduleId":[513,"module-id"],"minHeight":[513,"min-height"],"authPayload":[16],"showForm":[4,"show-form"],"_showForm":[32]}]]],["p-d33e152c",[[1,"q2-dropdown-item",{"disabled":[516],"removable":[516],"separator":[516],"label":[513],"ariaLabel":[513,"aria-label"],"value":[513]},[[0,"focus","onHostElementFocus"]]]]],["p-fdfbe75b",[[1,"q2-avatar",{"name":[513],"initials":[513],"src":[513],"icon":[1],"badSrc":[32]}]]],["p-10264ecb",[[1,"q2-message",{"type":[513],"appearance":[513],"description":[516],"presentToggle":[32],"present":[64]},[[0,"focus","delegateFocus"]]]]],["p-3a420dbf",[[1,"q2-option-list",{"role":[513],"direction":[513],"open":[1540],"customSearch":[516,"custom-search"],"noSelect":[516,"no-select"],"align":[513],"selectedOptions":[1040],"multiple":[516],"disabled":[516],"type":[1],"hasOptions":[32],"toggle":[64],"setDefaultActiveElement":[64],"setActiveElement":[64],"handleExternalKeydown":[64]},[[0,"focus","delegateFocus"],[0,"click","handleClick"]]]]],["p-d5218cd6",[[0,"click-elsewhere"]]],["p-b2302cd3",[[1,"q2-btn",{"ariaExpanded":[1,"aria-expanded"],"ariaHasPopup":[1,"aria-has-popup"],"ariaControls":[1,"aria-controls"],"ariaSelected":[1,"aria-selected"],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"tabIndex":[2,"tab-index"],"intent":[513],"disabled":[516],"type":[513],"loading":[516],"badge":[516],"active":[516],"fab":[516],"iconPosition":[32]},[[2,"click","disable"],[0,"focus","delegateFocus"]]],[1,"q2-loading",{"type":[513],"shape":[513],"modifiers":[513],"counts":[513],"label":[513],"ariaLabel":[513,"aria-label"],"inline":[516]}]]],["p-ca7a3380",[[1,"q2-input",{"value":[1025],"label":[513],"hideLabel":[516,"hide-label"],"type":[513],"placeholder":[513],"disabled":[516],"autocomplete":[513],"autocorrect":[513],"autocapitalize":[513],"hideMessages":[516,"hide-messages"],"iconLeft":[513,"icon-left"],"iconRight":[513,"icon-right"],"readonly":[516],"clearable":[516],"optional":[516],"min":[514],"max":[514],"formatModifier":[513,"format-modifier"],"maxlength":[1538],"pseudo":[516],"showVisibilityToggle":[516,"show-visibility-toggle"],"textHidden":[1540,"text-hidden"],"ariaControls":[1,"aria-controls"],"role":[1],"ariaOwns":[1,"aria-owns"],"ariaLabel":[513,"aria-label"],"ariaHaspopup":[1,"aria-haspopup"],"ariaExpanded":[1,"aria-expanded"],"ariaActivedescendant":[8,"aria-activedescendant"],"current":[1],"errors":[16],"hints":[16],"formattedValueObject":[32],"hasFocus":[32]},[[0,"focus","onHostElementFocus"],[0,"change","onHostElementChange"]]]]]]'),e)));

package/dist/test/elements/q2-tag-test.js

@@ -0,0 +1,151 @@
+import { setup, getFocusedAttribute } from '../helpers';
+describe('q2-tag', () => {
+  let page;
+  let tag;
+  let optionList;
+  let controlBtn;
+  let allOptions;
+  let optionContainer;
+  let clickSpy;
+  let changeSpy;
+  const getFocusedValue = async (page) => {
+    return page.$eval('body', () => document.activeElement.getAttribute('value'));
+  };
+  it('does not render button or dropdown by default', async () => {
+    page = await setup({
+      html: `<q2-tag label="My tag"></q2-tag>`,
+    });
+    optionList = await page.find('q2-tag >>> q2-option-list');
+    controlBtn = await page.find('q2-tag >>> button');
+    expect(controlBtn).toBeNull();
+    expect(optionList).toBeNull();
+  });
+  describe('when options are provided', () => {
+    beforeEach(async () => {
+      page = await setup({
+        html: `
+                    <q2-tag label="My tag">
+                        <q2-option value="1">Option 1</q2-option>
+                        <q2-option value="2">Option 2</q2-option>
+                        <q2-option value="3">Option 3</q2-option>
+                    </q2-tag>
+                `,
+      });
+      tag = await page.find('q2-tag');
+      allOptions = await page.findAll('q2-option');
+      optionList = await page.find('q2-tag >>> q2-option-list');
+      optionContainer = await page.find('q2-tag >>> q2-option-list >>> .options');
+      controlBtn = await page.find('q2-tag >>> button');
+      clickSpy = await tag.spyOnEvent('click');
+      changeSpy = await tag.spyOnEvent('change');
+    });
+    it('can select option via keyboard', async () => {
+      const tagWrapper = await page.find('q2-tag >>> .tag-wrapper');
+      expect(tagWrapper.classList.contains('has-options')).toBe(true);
+      expect(optionList).not.toHaveAttribute('open');
+      await controlBtn.press('ArrowDown');
+      await page.waitForChanges();
+      expect(tag).toHaveAttribute('open');
+      expect(optionList).toHaveAttribute('open');
+      expect(await getFocusedValue(page)).toEqual('1');
+      await optionContainer.press('ArrowDown');
+      await page.waitForChanges();
+      expect(await getFocusedValue(page)).toEqual('2');
+      await allOptions[1].press(' ');
+      await page.waitForChanges();
+      expect(tag).not.toHaveAttribute('open');
+      expect(optionList).not.toHaveAttribute('open');
+      expect(clickSpy).toHaveReceivedEventDetail({
+        value: '2',
+      });
+      expect(changeSpy).not.toHaveReceivedEvent();
+    });
+    it('can select option via mouse', async () => {
+      const tagWrapper = await page.find('q2-tag >>> .tag-wrapper');
+      expect(tagWrapper.classList.contains('has-options')).toBe(true);
+      expect(optionList).not.toHaveAttribute('open');
+      await controlBtn.click();
+      await page.waitForChanges();
+      expect(tag).toHaveAttribute('open');
+      expect(optionList).toHaveAttribute('open');
+      await allOptions[1].click();
+      await page.waitForChanges();
+      expect(tag).not.toHaveAttribute('open');
+      expect(optionList).not.toHaveAttribute('open');
+      expect(clickSpy).toHaveReceivedEventDetail({
+        value: '2',
+      });
+      expect(changeSpy).not.toHaveReceivedEvent();
+    });
+    describe('when keyboard is pressed', () => {
+      it('opens list and focuses first option on ArrowDown', async () => {
+        await controlBtn.press('ArrowDown');
+        await page.waitForChanges();
+        expect(tag).toHaveAttribute('open');
+        expect(optionList).toHaveAttribute('open');
+        expect(await getFocusedAttribute(page, 'value')).toEqual('1');
+      });
+      it('opens list and focuses first option on ArrowUp', async () => {
+        await controlBtn.press('ArrowUp');
+        await page.waitForChanges();
+        expect(tag).toHaveAttribute('open');
+        expect(optionList).toHaveAttribute('open');
+        expect(await getFocusedAttribute(page, 'value')).toEqual('1');
+      });
+      it('opens list and focuses first option on Enter', async () => {
+        await controlBtn.press('Enter');
+        await page.waitForChanges();
+        expect(tag).toHaveAttribute('open');
+        expect(optionList).toHaveAttribute('open');
+        expect(await getFocusedAttribute(page, 'value')).toEqual('1');
+      });
+      it('opens list and focuses first option on Space', async () => {
+        await controlBtn.press(' ');
+        await page.waitForChanges();
+        expect(tag).toHaveAttribute('open');
+        expect(optionList).toHaveAttribute('open');
+        expect(await getFocusedValue(page)).toEqual('1');
+      });
+      it('opens list and focuses last option on Home', async () => {
+        await controlBtn.press('Home');
+        await page.waitForChanges();
+        expect(tag).toHaveAttribute('open');
+        expect(optionList).toHaveAttribute('open');
+        expect(await getFocusedAttribute(page, 'value')).toEqual('1');
+      });
+      it('opens list and focuses last option on End', async () => {
+        await controlBtn.press('End');
+        await page.waitForChanges();
+        expect(tag).toHaveAttribute('open');
+        expect(optionList).toHaveAttribute('open');
+        expect(await getFocusedAttribute(page, 'value')).toEqual('3');
+      });
+    });
+  });
+  describe('focus', () => {
+    let page;
+    let tag;
+    beforeEach(async () => {
+      page = await setup({
+        html: `
+                    <q2-tag label="My tag">
+                        <q2-option value="1">Option 1</q2-option>
+                        <q2-option value="2">Option 2</q2-option>
+                        <q2-option value="3">Option 3</q2-option>
+                    </q2-tag>
+                `,
+      });
+      tag = await page.find('q2-tag');
+    });
+    it('focuses active option and opens the list when focus event is dispatched', async function () {
+      await tag.triggerEvent('focus');
+      await page.waitForChanges();
+      expect(await getFocusedAttribute(page, 'test-id')).toEqual('btn-control');
+    });
+    it('focuses active option and opens the list when element.focus() is called', async function () {
+      await tag.focus();
+      await page.waitForChanges();
+      expect(await getFocusedAttribute(page, 'test-id')).toEqual('btn-control');
+    });
+  });
+});

package/dist/test/helpers.js

@@ -25,7 +25,7 @@ export async function dispatchEvent(page, selectors, eventType, eventInit) {
       animationEnd: AnimationEvent,
       slotchange: Event,
       load: Event,
-      paste: ClipboardEvent
+      paste: ClipboardEvent,
     };
     let eventInit = passedEventInit;
     if (passedEventType === 'paste' && 'pastedValue' in passedEventInit) {
@@ -33,7 +33,7 @@ export async function dispatchEvent(page, selectors, eventType, eventInit) {
       clipboardData.getData = () => passedEventInit.pastedValue;
       eventInit = {
         bubbles: true,
-        clipboardData
+        clipboardData,
       };
     }
     const eventType = eventTypeDict[passedEventType] || Event;
@@ -58,7 +58,7 @@ export async function setTestStrings(page, strings) {
   }, strings);
 }
 export async function promiseMap(arr, fn) {
-  let promises = arr.map(fn);
+  const promises = arr.map(fn);
   return Promise.all(promises);
 }
 export function offsetTimezone(date) {
@@ -69,14 +69,17 @@ export async function setup(pageOptions) {
   const page = await newE2EPage(pageOptions);
   await page.evaluate(function () {
     this.TectonElements = this.TectonElements || {};
-    this.TectonElements.loc = (key, substitutions) => {
+    this.TectonElements.loc = (key, subs) => {
       const string = (this.TEST_STRINGS && this.TEST_STRINGS[key]) || key;
-      if (Array.isArray(substitutions)) {
+      if (Array.isArray(subs)) {
         const regex = /({[0-9]})/g;
         return string.replace(regex, match => {
-          return substitutions[parseInt(match[1])];
+          return subs[parseInt(match[1])];
         });
       }
+      else if (typeof subs === 'object') {
+        return Object.entries(subs).reduce((accum, [key, value]) => accum.replace(`{${key}}`, value), string);
+      }
       return string;
     };
   });
@@ -86,7 +89,7 @@ export function setWindowHeight(height) {
   Object.defineProperty(window, 'innerHeight', {
     writable: true,
     configurable: true,
-    value: height
+    value: height,
   });
   window.dispatchEvent(new Event('resize'));
   expect(window.innerHeight).toBe(height);
@@ -101,10 +104,18 @@ export function makeDomRect(customAttributes) {
     top: 0,
     x: 0,
     y: 0,
-    toJSON: () => ({})
+    toJSON: () => ({}),
   };
   return Object.assign(Object.assign({}, defaults), customAttributes);
 }
+export const base64Image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=';
 export async function getActiveElementTestId(page) {
-  return await page.$eval('body', () => { var _a, _b; return (_b = (_a = document.activeElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement.getAttribute('test-id')) !== null && _b !== void 0 ? _b : null; });
+  return page.$eval('body', () => { var _a, _b; return (_b = (_a = document.activeElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement.getAttribute('test-id')) !== null && _b !== void 0 ? _b : null; });
+}
+export async function getFocusedAttribute(page, attribute) {
+  return page.$eval('body', (_, attribute) => {
+    var _a, _b, _c;
+    const activeElement = (_b = (_a = document.activeElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) !== null && _b !== void 0 ? _b : document.activeElement;
+    return (_c = activeElement === null || activeElement === void 0 ? void 0 : activeElement.getAttribute(attribute)) !== null && _c !== void 0 ? _c : null;
+  }, attribute);
 }

package/dist/types/components/q2-badge/index.d.ts

@@ -0,0 +1,13 @@
+import { ComponentInterface } from '../../stencil-public-runtime';
+export declare class Q2Badge implements ComponentInterface {
+  value: number;
+  maxLength: number | undefined;
+  position: 'right' | 'left' | undefined;
+  size: 'default' | 'large' | undefined;
+  theme: 'primary' | 'secondary' | 'tertiary' | undefined;
+  status: 'info' | 'alert' | 'warning' | 'success' | undefined;
+  hostElement: HTMLElement;
+  get badgeText(): string;
+  generateMarkup(): any;
+  render(): any;
+}

package/dist/types/components/q2-btn/index.d.ts

@@ -1,9 +1,9 @@
 import { ComponentInterface } from '../../stencil-public-runtime';
 export declare class Q2Btn implements ComponentInterface {
-  ariaExpanded: boolean;
-  ariaHasPopup: boolean | string;
+  ariaExpanded: string;
+  ariaHasPopup: string;
   ariaControls: string;
-  ariaSelected: boolean;
+  ariaSelected: string;
   label: string;
   hideLabel: boolean;
   ariaLabel: string;

package/dist/types/components/q2-calendar/helpers.d.ts

@@ -14,6 +14,7 @@ export declare function validateInput(input: string, validDays: number[], validD
 invalidDates: string[], // black list
 startDate: string, endDate: string, formatString: string, assume: string): InputValidation;
 export declare function handleMissingZeros(input: any): string;
+export declare function reorderDateString(input: string): string;
 export declare function firstDayOfWeekInMonth(month: number, year: number): number;
 export declare function getDays(): string[];
 export declare function getDaysOfWeek(): string[];

package/dist/types/components/q2-calendar/index.d.ts

@@ -12,6 +12,7 @@ export declare class Q2Calendar implements ComponentInterface {
   ariaLabel: string;
   optional: boolean;
   disabled: boolean;
+  readonly: boolean;
   invalid: boolean;
   typeable: boolean;
   placeholder: string;
@@ -47,7 +48,7 @@ export declare class Q2Calendar implements ComponentInterface {
   hintMessage: string;
   hintMessageType: 'info' | 'error' | 'danger' | 'warning' | 'success';
   selectedMonthYear: ISelectedMonthYear;
-  scheduledAfterRender: Array<() => void>;
+  scheduledAfterRender: (() => void)[];
   privatePopDirection: 'up' | 'down';
   dropdownContainer?: HTMLDivElement;
   resizeIframe(): void;

package/dist/types/components/q2-calendar/validation.d.ts

@@ -17,7 +17,7 @@ export declare function getDayState(dayInMonth: Date, dateValidators: IDateValid
   isStartDate: boolean;
   isEndDate: boolean;
 };
-export declare function generateClassesForCalDay({ isInvalid, isSelected, isEndDate, isStartDate, isToday, isIncompleteDate }: {
+export declare function generateClassesForCalDay({ isInvalid, isSelected, isEndDate, isStartDate, isToday, isIncompleteDate, }: {
   isInvalid: boolean;
   isSelected: boolean;
   isEndDate: boolean;

package/dist/types/components/q2-card/index.d.ts

@@ -0,0 +1,35 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+export declare class Q2Card implements ComponentInterface {
+  title: string;
+  description: string;
+  avatarName: string;
+  avatarInitials: string;
+  avatarIcon: string;
+  avatarSrc: string;
+  isSmall: boolean;
+  bar: string;
+  isTouch: boolean;
+  url: string;
+  target: '_self' | '_blank' | '_parent' | '_top';
+  isAutoTouch: boolean;
+  isAutoSmall: boolean;
+  hostElement: HTMLElement;
+  click: EventEmitter;
+  clickableElement: HTMLElement;
+  containerElement: HTMLElement;
+  avatarElement: HTMLElement;
+  resizeObserver: ResizeObserver;
+  barColor: string;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  willDestroyElement(): void;
+  handleClick: (event: MouseEvent) => boolean;
+  onHostElementFocus(event: any): void;
+  checkBar(): void;
+  determineAutoTouch(): void;
+  determineAutoSmall(): void;
+  generateAvatar(): any;
+  generateContent(): any;
+  generateContainerClasses(): string;
+  render(): any;
+}

package/dist/types/components/q2-checkbox/index.d.ts

@@ -7,6 +7,7 @@ export declare class Q2Checkbox implements ComponentInterface {
   ariaLabel: string;
   indeterminate: boolean;
   disabled: boolean;
+  readonly: boolean;
   value: string;
   name: string;
   hasError: boolean;
@@ -21,8 +22,9 @@ export declare class Q2Checkbox implements ComponentInterface {
   delegateFocus(event: FocusEvent): void;
   ariaLabelObserver(): void;
   change: EventEmitter;
-  onInputChange: (event: Event) => void;
+  onInputClick: (event: Event) => void;
   onControlClick: (event: Event) => void;
+  onKeyDown: (event: KeyboardEvent) => void;
   render(): any;
   generateCheckboxSVG(): any;
   generateCheckBoxSVGFill(): any;

package/dist/types/components/q2-checkbox-group/index.d.ts

@@ -3,6 +3,7 @@ export declare class Q2CheckboxGroup implements ComponentInterface {
   label: string;
   value: object;
   disabled: boolean;
+  readonly: boolean;
   optional: boolean;
   hasError: boolean;
   hostElement: HTMLElement;

package/dist/types/components/q2-dropdown/index.d.ts

@@ -14,7 +14,7 @@ export declare class Q2Dropdown implements ComponentInterface {
   resolvedType: string;
   dropdownOpen: boolean;
   hostElement: HTMLElement;
-  scheduledAfterRender: Array<() => void>;
+  scheduledAfterRender: (() => void)[];
   privatePopDirection: 'down' | 'up';
   controlElement?: HTMLQ2BtnElement;
   dropdownContainer?: HTMLDivElement;

package/dist/types/components/q2-editable-field/index.d.ts

@@ -12,7 +12,7 @@ export declare class Q2EditableField {
   persistentLabel: boolean;
   hints: string[];
   errors: string[];
-  scheduledAfterRender: Array<() => void>;
+  scheduledAfterRender: (() => void)[];
   hostElement: HTMLElement;
   q2InputElement: HTMLQ2InputElement;
   q2EditBtnElement: HTMLQ2BtnElement;

package/dist/types/components/q2-input/formatting/credit-card.d.ts

@@ -4,9 +4,7 @@ interface FormattedCreditCardObject extends IFormatterValueObject {
   leftIcon: string;
   leftIconMuted: boolean;
 }
-interface Formatter {
-  (value: string): FormattedCreditCardObject;
-}
+declare type Formatter = (value: string) => FormattedCreditCardObject;
 declare function format(value: string): FormattedCreditCardObject;
 declare function detectCreditCardTypeFromValue(value: string): string;
 declare const formatCreditCard: {

package/dist/types/components/q2-input/index.d.ts

@@ -16,6 +16,8 @@ export declare class Q2Input {
   readonly: boolean;
   clearable: boolean;
   optional: boolean;
+  min: number;
+  max: number;
   formatModifier: string;
   maxlength: number;
   pseudo: boolean;
@@ -26,13 +28,14 @@ export declare class Q2Input {
   ariaOwns: string;
   ariaLabel: string;
   ariaHaspopup: string;
-  ariaExpanded: boolean;
+  ariaExpanded: string;
   ariaActivedescendant: any;
+  current: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false';
   errors: string[];
   hints: string[];
   formattedValueObject: IFormatterValueObject;
   hasFocus: boolean;
-  scheduledAfterRender: Array<() => void>;
+  scheduledAfterRender: (() => void)[];
   valueOnFocus: string;
   componentWillLoad(): void;
   componentDidLoad(): void;

package/dist/types/components/q2-option/index.d.ts

@@ -1,4 +1,4 @@
-import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import { ComponentInterface } from '../../stencil-public-runtime';
 export declare class Q2Option implements ComponentInterface {
   role: string;
   tabindex: string;
@@ -11,9 +11,8 @@ export declare class Q2Option implements ComponentInterface {
   hidden: boolean;
   multiline: boolean;
   active: boolean;
+  noSelect: boolean;
   _multiSelectHidden: boolean;
   hostElement: HTMLElement;
-  click: EventEmitter;
-  onClick: (event: MouseEvent) => void;
   render(): any;
 }

package/dist/types/components/q2-option-list/index.d.ts

@@ -0,0 +1,62 @@
+import { Event, ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+export interface IOptionValue {
+  value: string;
+  display?: string;
+}
+export declare class Q2OptionList implements ComponentInterface {
+  role: 'listbox' | 'menu';
+  direction: 'up' | 'down';
+  open: boolean;
+  customSearch: boolean;
+  noSelect: boolean;
+  align: 'left' | 'right';
+  selectedOptions: IOptionValue[];
+  multiple: boolean;
+  disabled: boolean;
+  type: 'menu' | 'listbox';
+  change: EventEmitter<{
+    value: string;
+    values: IOptionValue[];
+  }>;
+  optionListState: EventEmitter<{
+    open: boolean;
+  }>;
+  hasOptions: boolean;
+  contentElement: HTMLElement;
+  activeIndex: number;
+  scheduledAfterRender: (() => void)[];
+  searchString: string;
+  searchStringTimer: number;
+  hostElement: HTMLElement;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  componentDidRender(): void;
+  get allOptions(): HTMLQ2OptionElement[];
+  checkOptions(): void;
+  getRootSlot(element: Element): any;
+  scrollToActiveOption(): void;
+  resizeIframe(): void;
+  openDropdownWithActiveElement(activeIndex: number): void;
+  getDefaultActiveIndex(): number;
+  updateSingleOptionAttrs(): void;
+  updateMultipleOptionAttrs(): void;
+  setActiveOption(): void;
+  setFocusedOption(): void;
+  getNextVisibleIndex(direction: any): any;
+  selectOption(selectedValue: string): void;
+  adjustActiveOptionAndScroll(numToAdd: number): void;
+  resetTimer(): void;
+  searchAndFocus(key: string): void;
+  selectedOptionsUpdated(): void;
+  openChanged(newValue: boolean): void;
+  delegateFocus(event: FocusEvent): void;
+  handleClick(event: MouseEvent): void;
+  toggle(): void;
+  setDefaultActiveElement(): void;
+  setActiveElement(index: number): void;
+  handleExternalKeydown(event: KeyboardEvent): void;
+  keydownHandler: (event: KeyboardEvent, ignoreSelectionEvents?: boolean) => void;
+  focusoutHandler: (event: FocusEvent) => void;
+  clickHandler: (event: Event) => void;
+  render(): any;
+}

package/dist/types/components/q2-pagination/index.d.ts

@@ -0,0 +1,30 @@
+import { ComponentInterface } from '../../stencil-public-runtime';
+export declare class Q2Pagination implements ComponentInterface {
+  recordType: string;
+  perPage: number;
+  total: number;
+  page: number;
+  pages: number;
+  recordsOnly: boolean;
+  pagesOnly: boolean;
+  hostElement: HTMLElement;
+  change: any;
+  isSmall: boolean;
+  inputField: HTMLQ2InputElement;
+  containerElement: HTMLElement;
+  containerWidth: number;
+  resizeObserver: ResizeObserver;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  onHostElementFocus(event: any): void;
+  get isFullViewHidden(): boolean;
+  get pageWithDefault(): number;
+  get perPageWithDefault(): number;
+  get totalWithDefault(): number;
+  get recordTypeWithDefault(): string;
+  get currentRange(): string;
+  get totalPages(): number;
+  handlePageChange: (page: number) => void;
+  checkSize(): void;
+  render(): any;
+}

package/dist/types/components/q2-pill/index.d.ts

@@ -0,0 +1,39 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import { IOptionValue } from '../q2-option-list';
+export declare class Q2Pill implements ComponentInterface {
+  disabled: boolean;
+  active: boolean;
+  open: boolean;
+  multiple: boolean;
+  label: string;
+  value: string;
+  theme: 'primary' | 'secondary' | 'tertiary';
+  selectedOptions: IOptionValue[];
+  hasOptions: boolean;
+  hostElement: HTMLElement;
+  change: EventEmitter<{
+    value: string;
+    values: IOptionValue[];
+    active: boolean;
+  }>;
+  scheduledAfterRender: (() => void)[];
+  primaryBtn: HTMLButtonElement;
+  optionList: HTMLQ2OptionListElement;
+  mutationObserver: MutationObserver;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  componentDidRender(): void;
+  disconnectedCallback(): void;
+  get buttonContent(): string;
+  determineHasOptions: () => void;
+  clearSelectedOptions: () => void;
+  delegateFocus(event: FocusEvent): void;
+  optionListStateEvent({ detail: { open } }: CustomEvent): void;
+  handleClick: (event: MouseEvent) => void;
+  handleKeydown: (event: KeyboardEvent) => void;
+  handleChange: (event: any) => void;
+  handleFocusout: (event: FocusEvent) => void;
+  handleWrapperClick: () => void;
+  generateIcon(): any;
+  render(): any;
+}

package/dist/types/components/q2-radio/index.d.ts

@@ -8,16 +8,19 @@ export declare class Q2Radio implements ComponentInterface {
   name: string;
   ariaLabel: string;
   groupDisabled: boolean;
+  groupReadonly: boolean;
   groupTileLayout: boolean;
   hostElement: HTMLElement;
   id: string;
   inputField: HTMLInputElement;
+  isLoaded: boolean;
   change: EventEmitter;
   componentWillLoad(): void;
   componentDidLoad(): void;
   ariaLabelObserver(): void;
+  checkedObserver(): void;
   onHostClick(event: Event): void;
   delegateFocus(event: FocusEvent): void;
-  inputChange: (event: Event) => void;
+  inputChange: (event: Event) => boolean;
   render(): any;
 }