@esri/calcite-components 1.0.0-beta.70 → 1.0.0-beta.74

package/dist/collection/components/calcite-value-list-item/calcite-value-list-item.css

@@ -1,53 +1,48 @@
 /* mixins & extensions */
-
 @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: 300ms;
+  --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 {
@@ -75,9 +70,8 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -85,65 +79,64 @@
 }
 
 :host {
+  margin-bottom: 1px;
   box-sizing: border-box;
+  display: flex;
   background-color: var(--calcite-ui-foreground-1);
-  color: var(--calcite-ui-text-2);
   font-size: var(--calcite-font-size--1);
-  margin-bottom: 1px;
-  display: flex;
-  box-shadow: 0 1px 0 var(--calcite-ui-border-3);
-  transition: background-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
+  color: var(--calcite-ui-text-2);
+  --tw-shadow: 0 1px 0 var(--calcite-ui-border-3);
+  --tw-shadow-colored: 0 1px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  transition: background-color var(--calcite-animation-timing), box-shadow var(--calcite-animation-timing);
 }
-
 :host * {
   box-sizing: border-box;
 }
 
 calcite-pick-list-item {
-  box-shadow: none;
-  flex-grow: 1;
   position: relative;
-  margin: 0;
+  margin: 0px;
+  flex-grow: 1;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-:host([active]),
-:host([selected]) {
-  box-shadow: 0 0 0 1px var(--calcite-ui-brand);
+:host([active]), :host([selected]) {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
 .handle {
   display: flex;
+  cursor: move;
   align-items: center;
   justify-content: center;
-  padding-top: 0;
-  padding-bottom: 0;
+  border-style: none;
+  background-color: transparent;
+  padding-top: 0px;
+  padding-bottom: 0px;
   padding-left: 0.25rem;
   padding-right: 0.25rem;
-  background-color: transparent;
-  border-style: none;
-  color: var(--calcite-ui-text-1);
-  cursor: move;
   color: var(--calcite-ui-border-1);
   outline-offset: 0;
   outline-color: transparent;
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
-
 .handle:hover {
   background-color: var(--calcite-ui-foreground-2);
   color: var(--calcite-ui-text-1);
 }
-
 .handle:focus {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
-
 .handle--activated {
   background-color: var(--calcite-ui-foreground-3);
   color: var(--calcite-ui-text-1);
 }
-
 .handle calcite-icon {
   color: inherit;
 }

package/dist/collection/components/functional/CalciteExpandToggle.js

@@ -39,6 +39,6 @@ export const CalciteExpandToggle = ({ expanded, intlExpand, intlCollapse, toggle
   const end = getCalcitePosition(position, el) === "end";
   const expandIcon = end ? icons[1] : icons[0];
   const collapseIcon = end ? icons[0] : icons[1];
-  const actionNode = (h("calcite-action", { dir: rtl ? "rtl" : "ltr", icon: expanded ? expandIcon : collapseIcon, onClick: toggle, ref: (referenceElement) => setTooltipReference({ tooltip, referenceElement, expanded, ref }), scale: scale, text: expandText, textEnabled: expanded }));
+  const actionNode = (h("calcite-action", { icon: expanded ? expandIcon : collapseIcon, onClick: toggle, ref: (referenceElement) => setTooltipReference({ tooltip, referenceElement, expanded, ref }), scale: scale, text: expandText, textEnabled: expanded }));
   return tooltip ? h("calcite-tooltip-manager", null, actionNode) : actionNode;
 };

package/dist/collection/demos/_assets/demo-form.js

@@ -0,0 +1,23 @@
+class DemoForm extends HTMLElement {
+    connectedCallback() {
+        this.addEventListener("submit", this.onFormSubmit);
+        this.addEventListener("formdata", this.onFormData);
+    }
+    disconnectedCallback() {
+        this.removeEventListener("submit", this.onFormSubmit);
+        this.removeEventListener("formdata", this.onFormData);
+    }
+    onFormSubmit(event) {
+        event.preventDefault();
+        new FormData(event.target);
+    }
+    onFormData(event) {
+        const data = {};
+        for (const pair of event.formData.entries()) {
+            data[pair[0]] = pair[1];
+        }
+        console.log(data);
+        alert(JSON.stringify(data, null, 2));
+    }
+}
+customElements.define("demo-form", DemoForm);

package/dist/collection/demos/_assets/demo-template.js

@@ -0,0 +1,13 @@
+const toggleDir = () => {
+    document.dir = document.dir === "rtl" ? "ltr" : "rtl";
+};
+const toggleTheme = () => {
+    document.body.classList.toggle("calcite-theme-dark");
+};
+const loadDemoToggles = () => {
+    document.querySelectorAll("h1:not(#demo-heading)").forEach((h1) => h1.remove());
+    document.getElementById("demo-heading").textContent = document.title;
+    document.getElementById("toggle-dir").addEventListener("calciteSwitchChange", toggleDir);
+    document.getElementById("toggle-theme").addEventListener("calciteSwitchChange", toggleTheme);
+};
+document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", loadDemoToggles) : loadDemoToggles();

package/dist/collection/demos/_assets/head.js

@@ -0,0 +1,45 @@
+(() => {
+    const DEMO_ROOT = "demos";
+    const ASSETS_PATH = "demos/_assets";
+    const CSS = [`${ASSETS_PATH}/demos.css`, "build/calcite.css"];
+    const urlParams = new URLSearchParams(window.location.search);
+    const DISABLE_HEADER_URL_PARAM = "header-disabled";
+    const SCRIPTS = [
+        {
+            src: "build/calcite.esm.js",
+            type: "module"
+        }
+    ];
+    const parseTemplate = (text) => {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(text, "text/html");
+        return doc.head.querySelector("template");
+    };
+    const loadHeader = async () => {
+        const root = window.location.pathname.split(DEMO_ROOT).shift();
+        const response = await window.fetch(`${root}${ASSETS_PATH}/demo-template.html`);
+        const text = await response.text();
+        const template = parseTemplate(text);
+        const firstChild = document.body.firstChild;
+        firstChild && document.body.insertBefore(template.content, firstChild);
+    };
+    if (window.location.pathname.includes("/demos/") && !urlParams.has(DISABLE_HEADER_URL_PARAM)) {
+        document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", loadHeader) : loadHeader();
+    }
+    const ROOT = window.location.pathname.split(DEMO_ROOT).shift();
+    function loadCss(url) {
+        const link = document.createElement("link");
+        link.rel = "stylesheet";
+        link.href = ROOT + url;
+        document.head.appendChild(link);
+    }
+    function loadScript(script) {
+        const scriptElement = document.createElement("script");
+        Object.keys(script).forEach((key) => {
+            scriptElement[key] = key === "src" ? ROOT + script[key] : script[key];
+        });
+        document.head.appendChild(scriptElement);
+    }
+    CSS.forEach(loadCss);
+    SCRIPTS.forEach(loadScript);
+})();

package/dist/collection/demos/_assets/locales.js

@@ -0,0 +1,223 @@
+const locales = [
+    { name: "Afrikaans", locale: "af" },
+    { name: "Albanian", locale: "sq" },
+    { name: "Albanian (Albania)", locale: "sq-AL" },
+    { name: "Amharic", locale: "am" },
+    { name: "Arabic", locale: "ar", dir: "rtl" },
+    { name: "Arabic (Algeria)", locale: "ar-DZ", dir: "rtl" },
+    { name: "Arabic (Bahrain)", locale: "ar-BH", dir: "rtl" },
+    { name: "Arabic (Egypt)", locale: "ar-EG", dir: "rtl" },
+    { name: "Arabic (Iraq)", locale: "ar-IQ", dir: "rtl" },
+    { name: "Arabic (Jordan)", locale: "ar-JO", dir: "rtl" },
+    { name: "Arabic (Kuwait)", locale: "ar-KW", dir: "rtl" },
+    { name: "Arabic (Lebanon)", locale: "ar-LB", dir: "rtl" },
+    { name: "Arabic (Libya)", locale: "ar-LY", dir: "rtl" },
+    { name: "Arabic (Morocco)", locale: "ar-MA", dir: "rtl" },
+    { name: "Arabic (Oman)", locale: "ar-OM", dir: "rtl" },
+    { name: "Arabic (Qatar)", locale: "ar-QA", dir: "rtl" },
+    { name: "Arabic (Saudi Arabia)", locale: "ar-SA", dir: "rtl" },
+    { name: "Arabic (Sudan)", locale: "ar-SD", dir: "rtl" },
+    { name: "Arabic (Syria)", locale: "ar-SY", dir: "rtl" },
+    { name: "Arabic (Tunisia)", locale: "ar-TN", dir: "rtl" },
+    { name: "Arabic (United Arab Emirates)", locale: "ar-AE", dir: "rtl" },
+    { name: "Arabic (Yemen)", locale: "ar-YE", dir: "rtl" },
+    { name: "Armenian (Armenia)", locale: "hy-AM" },
+    { name: "Assamese", locale: "as" },
+    { name: "Azeri (Cyrillic)", locale: "az" },
+    { name: "Azeri (Latin)", locale: "az" },
+    { name: "Basque", locale: "eu" },
+    { name: "Belarusian", locale: "be" },
+    { name: "Belarusian (Belarus)", locale: "be-BY" },
+    { name: "Bengali", locale: "bn" },
+    { name: "Bengali (Bangladesh)", locale: "bn-BD" },
+    { name: "Bengali (India)", locale: "bn-IN" },
+    { name: "Bosnian", locale: "bs" },
+    { name: "Bulgarian", locale: "bg" },
+    { name: "Bulgarian (Bulgaria)", locale: "bg-BG" },
+    { name: "Burmese", locale: "my" },
+    { name: "Catalan", locale: "ca" },
+    { name: "Catalan (Spain)", locale: "ca-ES" },
+    { name: "Chinese", locale: "zh" },
+    { name: "Chinese (China)", locale: "zh-CN" },
+    { name: "Chinese (Hong Kong)", locale: "zh-HK" },
+    { name: "Chinese (Macau SAR)", locale: "zh-MO" },
+    { name: "Chinese (Singapore)", locale: "zh-SG" },
+    { name: "Chinese (Taiwan)", locale: "zh-TW" },
+    { name: "Croatian", locale: "hr" },
+    { name: "Croatian (Croatia)", locale: "hr-HR" },
+    { name: "Czech", locale: "cs" },
+    { name: "Czech (Czech Republic)", locale: "cs-CZ" },
+    { name: "Danish", locale: "da" },
+    { name: "Danish (Denmark)", locale: "da-DK" },
+    { name: "Divehi", locale: "dv" },
+    { name: "Dutch", locale: "nl" },
+    { name: "Dutch (Belgium)", locale: "nl-BE" },
+    { name: "Dutch (Netherlands)", locale: "nl-NL" },
+    { name: "English", locale: "en" },
+    { name: "English (Australia)", locale: "en-AU" },
+    { name: "English (Belize)", locale: "en-BZ" },
+    { name: "English (Canada)", locale: "en-CA" },
+    { name: "English (Caribbean)", locale: "en-CB" },
+    { name: "English (Great Britain)", locale: "en-GB" },
+    { name: "English (India)", locale: "en-IN" },
+    { name: "English (Ireland)", locale: "en-IE" },
+    { name: "English (Jamaica)", locale: "en-JM" },
+    { name: "English (Malta)", locale: "en-MT" },
+    { name: "English (New Zealand)", locale: "en-NZ" },
+    { name: "English (Philippines)", locale: "en-PH" },
+    { name: "English (South Africa)", locale: "en-ZA" },
+    { name: "English (Singapore)", locale: "en-SG" },
+    { name: "English (Trinidad)", locale: "en-TT" },
+    { name: "English (United States)", locale: "en-US" },
+    { name: "English (South Africa)", locale: "en-ZA" },
+    { name: "Estonian", locale: "et" },
+    { name: "Estonian (Estonia)", locale: "et-EE" },
+    { name: "Faroese", locale: "fo" },
+    { name: "Farsi (Persian)", locale: "fa" },
+    { name: "Finnish", locale: "fi" },
+    { name: "Finnish (Finland)", locale: "fi-FI" },
+    { name: "French", locale: "fr" },
+    { name: "French (Belgium)", locale: "fr-BE" },
+    { name: "French (Canada)", locale: "fr-CA" },
+    { name: "French (Switzerland)", locale: "fr-CH" },
+    { name: "French (France)", locale: "fr-FR" },
+    { name: "French (Luxembourg)", locale: "fr-LU" },
+    { name: "Gaelic (Ireland)", locale: "gd-IE" },
+    { name: "Gaelic (Scotland)", locale: "gd" },
+    { name: "Galician", locale: "gl" },
+    { name: "Georgian", locale: "ka" },
+    { name: "German", locale: "de" },
+    { name: "German (Austria)", locale: "de-AT" },
+    { name: "German (Germany)", locale: "de-DE" },
+    { name: "German (Liechtenstein)", locale: "de-LI" },
+    { name: "German (Luxembourg)", locale: "de-LU" },
+    { name: "German (Switzerland)", locale: "de-CH" },
+    { name: "Greek", locale: "el" },
+    { name: "Greek (Cyprus)", locale: "el-CY" },
+    { name: "Greek (Greece)", locale: "el-GR" },
+    { name: "Guarani (Paraguay)", locale: "gu" },
+    { name: "Gujarati", locale: "gn" },
+    { name: "Hebrew", locale: "iw" },
+    { name: "Hebrew (Israel)", locale: "iw-IL" },
+    { name: "Hindi (India)", locale: "hi-IN" },
+    { name: "Hungarian", locale: "hu" },
+    { name: "Hungarian (Hungary)", locale: "hu-HU" },
+    { name: "Icelandic", locale: "is" },
+    { name: "Icelandic (Iceland)", locale: "is-IS" },
+    { name: "Indonesian (ISO 639)", locale: "in" },
+    { name: "Indonesian (Indonesia) (ISO 639)", locale: "in-ID" },
+    { name: "Indonesian (ISO 3166)", locale: "id" },
+    { name: "Indonesian (Indonesia) (ISO 3166)", locale: "id-ID" },
+    { name: "Irish", locale: "ga" },
+    { name: "Irish (Ireland)", locale: "ga-IE" },
+    { name: "Italian", locale: "it" },
+    { name: "Italian (Italy)", locale: "it-IT" },
+    { name: "Italian (Switzerland)", locale: "it-CH" },
+    { name: "Japanese", locale: "ja" },
+    { name: "Japanese (Japan)", locale: "ja-JP" },
+    { name: "Kannada", locale: "kn" },
+    { name: "Kashmiri", locale: "ks" },
+    { name: "Kazakh", locale: "kk" },
+    { name: "Khmer", locale: "km" },
+    { name: "Korean", locale: "ko" },
+    { name: "Korean (South Korea)", locale: "ko-KR" },
+    { name: "Lao", locale: "lo" },
+    { name: "Latin", locale: "la" },
+    { name: "Latvian", locale: "lv" },
+    { name: "Latvian (Latvia)", locale: "lv-LV" },
+    { name: "Lithuanian", locale: "lt" },
+    { name: "Lithuanian (Lithuania)", locale: "lt-LT" },
+    { name: "Macedonian", locale: "mk" },
+    { name: "Macedonian (Macedonia)", locale: "mk-MK" },
+    { name: "Malay", locale: "ms" },
+    { name: "Malay (Brunei)", locale: "ms-BN" },
+    { name: "Malay (Malaysia)", locale: "ms-MY" },
+    { name: "Malayalam", locale: "ml" },
+    { name: "Maltese", locale: "mt" },
+    { name: "Maltese (Malta)", locale: "mt-MT" },
+    { name: "Maori", locale: "mi" },
+    { name: "Marathi", locale: "mr" },
+    { name: "Mongolian", locale: "mn" },
+    { name: "Nepali", locale: "ne" },
+    { name: "Norwegian", locale: "no" },
+    { name: "Norwegian (Bokml)", locale: "nb" },
+    { name: "Norwegian (Norway)", locale: "no-NO" },
+    { name: "Norwegian (Norway, Nynorsk)", locale: "no-NY" },
+    { name: "Oriya", locale: "or" },
+    { name: "Polish", locale: "pl" },
+    { name: "Polish (Poland)", locale: "pl-PL" },
+    { name: "Portuguese", locale: "pt" },
+    { name: "Portuguese (Brazil)", locale: "pt-BR" },
+    { name: "Portuguese (Portugal)", locale: "pt-PT" },
+    { name: "Punjabi", locale: "pa" },
+    { name: "Raeto-Romance", locale: "rm" },
+    { name: "Romanian", locale: "ro" },
+    { name: "Romanian (Moldova)", locale: "ro-MO" },
+    { name: "Romanian (Romania)", locale: "ro-RO" },
+    { name: "Russian", locale: "ru" },
+    { name: "Russian (Moldova)", locale: "ru-MO" },
+    { name: "Russian (Russia)", locale: "ru-RU" },
+    { name: "Sanskrit", locale: "sa" },
+    { name: "Serbian", locale: "sr" },
+    { name: "Serbian (Cyrillic, Latin)", locale: "sr-SP" },
+    { name: "Serbian (Bosnia and Herzegovina)", locale: "sr-BA" },
+    { name: "Serbian (Montenegro)", locale: "sr-ME" },
+    { name: "Serbian (Serbia)", locale: "sr-RS" },
+    { name: "Serbian (Serbia and Montenegro)", locale: "sr-CS" },
+    { name: "Setsuana", locale: "tn" },
+    { name: "Sindhi", locale: "sd" },
+    { name: "Sinhala", locale: "si" },
+    { name: "Slovak", locale: "sk" },
+    { name: "Slovak (Slovakia)", locale: "sk-SK" },
+    { name: "Slovenian", locale: "sl" },
+    { name: "Slovenian (Slovenia)", locale: "sl-SI" },
+    { name: "Somali", locale: "so" },
+    { name: "Sorbian", locale: "sb" },
+    { name: "Spanish", locale: "es" },
+    { name: "Spanish (Argentina)", locale: "es-AR" },
+    { name: "Spanish (Bolivia)", locale: "es-BO" },
+    { name: "Spanish (Chile)", locale: "es-CL" },
+    { name: "Spanish (Colombia)", locale: "es-CO" },
+    { name: "Spanish (Costa Rica)", locale: "es-CR" },
+    { name: "Spanish (Dominican Republic)", locale: "es-DO" },
+    { name: "Spanish (Ecuador)", locale: "es-EC" },
+    { name: "Spanish (El Salvador)", locale: "es-SV" },
+    { name: "Spanish (Guatemala)", locale: "es-GT" },
+    { name: "Spanish (Honduras)", locale: "es-HN" },
+    { name: "Spanish (Mexico)", locale: "es-MX" },
+    { name: "Spanish (Nicaragua)", locale: "es-NI" },
+    { name: "Spanish (Panama)", locale: "es-PA" },
+    { name: "Spanish (Paraguay)", locale: "es-PY" },
+    { name: "Spanish (Peru)", locale: "es-PE" },
+    { name: "Spanish (Puerto Rico)", locale: "es-PR" },
+    { name: "Spanish (Spain)", locale: "es-ES" },
+    { name: "Spanish (United States)", locale: "es-US" },
+    { name: "Spanish (Uruguay)", locale: "es-UY" },
+    { name: "Spanish (Venezuela)", locale: "es-VE" },
+    { name: "Swahili", locale: "sw" },
+    { name: "Swedish", locale: "sv" },
+    { name: "Swedish (Finland)", locale: "sv-FI" },
+    { name: "Swedish (Sweden)", locale: "sv-SE" },
+    { name: "Tajik", locale: "tg" },
+    { name: "Tamil", locale: "ta" },
+    { name: "Tatar", locale: "tt" },
+    { name: "Telugu", locale: "te" },
+    { name: "Thai", locale: "th" },
+    { name: "Thai (Thailand)", locale: "th-TH" },
+    { name: "Thai (Thai Digits)", locale: "th-TH-u-nu-thai" },
+    { name: "Tibetan", locale: "bo" },
+    { name: "Tsonga", locale: "ts" },
+    { name: "Turkish", locale: "tr" },
+    { name: "Turkish (Turkey)", locale: "tr-TR" },
+    { name: "Turkmen", locale: "tk" },
+    { name: "Ukrainian", locale: "uk" },
+    { name: "Ukrainian (Ukraine)", locale: "uk-UA" },
+    { name: "Urdu", locale: "ur" },
+    { name: "Uzbek (Cyrillic, Latin)", locale: "uz-UZ" },
+    { name: "Vietnamese", locale: "vi" },
+    { name: "Vietnamese (Vietnam)", locale: "vi-VN" },
+    { name: "Welsh", locale: "cy" },
+    { name: "Xhosa", locale: "xh" },
+    { name: "Yiddish", locale: "yi" },
+    { name: "Zulu", locale: "zu" }
+];

package/dist/collection/utils/conditionalSlot.js

@@ -0,0 +1,26 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { forceUpdate } from "@stencil/core";
+const slotChangedMap = new WeakMap();
+function onSlotChange() {
+  forceUpdate(this);
+}
+const eventType = "slotchange";
+/**
+ * Helper to set up a conditional slot component on connectedCallback.
+ */
+export function connectConditionalSlotComponent(component) {
+  const boundSlotChange = onSlotChange.bind(component);
+  component.el.shadowRoot.addEventListener(eventType, boundSlotChange);
+  slotChangedMap.set(component, boundSlotChange);
+}
+/**
+ * Helper to tear down a conditional slot component on disconnectedCallback.
+ */
+export function disconnectConditionalSlotComponent(component) {
+  const boundSlotChange = slotChangedMap.get(component);
+  component.el.shadowRoot.removeEventListener(eventType, boundSlotChange);
+  slotChangedMap.delete(component);
+}

package/dist/collection/utils/dom.js

@@ -21,7 +21,8 @@ export function nodeListToArray(nodeList) {
   return Array.isArray(nodeList) ? nodeList : Array.from(nodeList);
 }
 export function getThemeName(el) {
-  return closestElementCrossShadowBoundary(el, `.${CSS_UTILITY.darkTheme}`) ? "dark" : "light";
+  const closestElWithTheme = closestElementCrossShadowBoundary(el, `.${CSS_UTILITY.darkTheme}, .${CSS_UTILITY.lightTheme}`);
+  return (closestElWithTheme === null || closestElWithTheme === void 0 ? void 0 : closestElWithTheme.classList.contains("calcite-theme-dark")) ? "dark" : "light";
 }
 export function getElementDir(el) {
   const prop = "dir";
@@ -40,10 +41,14 @@ export function getRootNode(el) {
 export function getHost(root) {
   return root.host || null;
 }
-// Queries an element's rootNode and any ancestor rootNodes.
-// based on https://stackoverflow.com/q/54520554/194216
+/**
+ * This helper queries an element's rootNodes and any ancestor rootNodes.
+ *
+ * @returns {Element[]} The elements.
+ */
 export function queryElementsRoots(element, selector) {
   // Gets the rootNode and any ancestor rootNodes (shadowRoot or document) of an element and queries them for a selector.
+  // Based on: https://stackoverflow.com/q/54520554/194216
   function queryFromAll(el, allResults) {
     if (!el) {
       return allResults;
@@ -60,10 +65,16 @@ export function queryElementsRoots(element, selector) {
   }
   return queryFromAll(element, []);
 }
-// Queries an element's rootNode and any ancestor rootNodes.
-// based on https://stackoverflow.com/q/54520554/194216
-export function queryElementRoots(element, selector) {
+/**
+ * This helper queries an element's rootNode and any ancestor rootNodes.
+ *
+ * If both an 'id' and 'selector' are supplied, 'id' will take precedence over 'selector'.
+ *
+ * @returns {Element} The element.
+ */
+export function queryElementRoots(element, { selector, id }) {
   // Gets the rootNode and any ancestor rootNodes (shadowRoot or document) of an element and queries them for a selector.
+  // Based on: https://stackoverflow.com/q/54520554/194216
   function queryFrom(el) {
     if (!el) {
       return null;
@@ -72,7 +83,11 @@ export function queryElementRoots(element, selector) {
       el = el.assignedSlot;
     }
     const rootNode = getRootNode(el);
-    const found = rootNode.querySelector(selector);
+    const found = id
+      ? rootNode.getElementById(id)
+      : selector
+        ? rootNode.querySelector(selector)
+        : null;
     const host = getHost(rootNode);
     return found ? found : host ? queryFrom(host) : null;
   }
@@ -94,8 +109,17 @@ export async function focusElement(el) {
   }
   return isCalciteFocusable(el) ? el.setFocus() : el.focus();
 }
+const defaultSlotSelector = "> :not([slot])";
 export function getSlotted(element, slotName, options) {
-  const slotSelector = `[slot="${slotName}"]`;
+  if (!Array.isArray(slotName) && typeof slotName !== "string") {
+    options = slotName;
+    slotName = null;
+  }
+  const slotSelector = slotName
+    ? Array.isArray(slotName)
+      ? slotName.map((name) => `[slot="${name}"]`).join(",")
+      : `[slot="${slotName}"]`
+    : defaultSlotSelector;
   if (options === null || options === void 0 ? void 0 : options.all) {
     return queryMultiple(element, slotSelector, options);
   }
@@ -104,6 +128,9 @@ export function getSlotted(element, slotName, options) {
 function queryMultiple(element, slotSelector, options) {
   let matches = Array.from(element.querySelectorAll(slotSelector));
   matches = options && options.direct === false ? matches : matches.filter((el) => el.parentElement === element);
+  if (slotSelector === defaultSlotSelector) {
+    matches = matches.filter((match) => match === null || match === void 0 ? void 0 : match.assignedSlot);
+  }
   const selector = options === null || options === void 0 ? void 0 : options.selector;
   return selector
     ? matches
@@ -114,9 +141,12 @@ function queryMultiple(element, slotSelector, options) {
 }
 function querySingle(element, slotSelector, options) {
   let match = element.querySelector(slotSelector);
+  if (slotSelector === defaultSlotSelector) {
+    match = (match === null || match === void 0 ? void 0 : match.assignedSlot) ? match : null;
+  }
   match = options && options.direct === false ? match : (match === null || match === void 0 ? void 0 : match.parentElement) === element ? match : null;
   const selector = options === null || options === void 0 ? void 0 : options.selector;
-  return selector ? match.querySelector(selector) : match;
+  return selector ? match === null || match === void 0 ? void 0 : match.querySelector(selector) : match;
 }
 export function filterDirectChildren(el, selector) {
   return Array.from(el.children).filter((child) => child.matches(selector));

package/dist/collection/utils/interactive.js

@@ -0,0 +1,20 @@
+/**
+ * This helper updates the host element to prevent keyboard interaction on its subtree and sets the appropriate aria attribute for accessibility.
+ *
+ * This should be used in the `componentDidRender` lifecycle hook.
+ *
+ * **Notes**
+ *
+ * * this util is not needed for simple components whose root element or elements are an interactive component (custom element or native control). For those cases, set the `disabled` props on the root components instead.
+ * * technically, users can override `tabindex` and restore keyboard navigation, but this will be considered user error
+ */
+export function updateHostInteraction(component) {
+    // intentionally using attribute to avoid making host tabbable when !disabled
+    if (component.disabled) {
+        component.el.setAttribute("tabindex", "-1");
+    }
+    else {
+        component.el.removeAttribute("tabindex");
+    }
+    component.el.setAttribute("aria-disabled", component.disabled.toString());
+}

package/dist/collection/utils/key.js

@@ -2,30 +2,7 @@
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
-/**
- * Standardize key property of keyboard event (mostly for ie11)
- */
-export function getKey(key, dir) {
-  const lookup = {
-    Up: "ArrowUp",
-    Down: "ArrowDown",
-    Left: "ArrowLeft",
-    Right: "ArrowRight",
-    Spacebar: " ",
-    Esc: "Escape"
-  };
-  const adjustedKey = lookup[key] || key;
-  const isRTL = dir === "rtl";
-  if (isRTL && adjustedKey === "ArrowLeft") {
-    return "ArrowRight";
-  }
-  if (isRTL && adjustedKey === "ArrowRight") {
-    return "ArrowLeft";
-  }
-  return adjustedKey;
-}
 export function isActivationKey(key) {
-  key = getKey(key);
   return key === "Enter" || key === " ";
 }
 export const numberKeys = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];