@esri/calcite-components 1.0.0-next.371 → 1.0.0-next.372

package/dist/cjs/calcite-tree_2.cjs.entry.js

@@ -7,7 +7,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
-const dom = require('./dom-0de9fb18.js');
+const dom = require('./dom-f3df220d.js');
 const conditionalSlot = require('./conditionalSlot-92505fba.js');
 require('./guid-b270f0db.js');
 require('./observers-79bfb8bc.js');

package/dist/cjs/calcite-value-list_2.cjs.entry.js

@@ -8,11 +8,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
 const sortable_esm = require('./sortable.esm-d7a4560b.js');
-const resources = require('./resources-405cc2c4.js');
+const resources = require('./resources-95073e41.js');
 const array = require('./array-a5dedf5a.js');
 const observers = require('./observers-79bfb8bc.js');
 const guid = require('./guid-b270f0db.js');
-const dom = require('./dom-0de9fb18.js');
+const dom = require('./dom-f3df220d.js');
 const conditionalSlot = require('./conditionalSlot-92505fba.js');
 require('./debounce-95979061.js');
 

package/dist/cjs/{dom-0de9fb18.js → dom-f3df220d.js}

@@ -124,9 +124,9 @@ async function focusElement(el) {
   }
   return isCalciteFocusable(el) ? el.setFocus() : el.focus();
 }
-const defaultSlotSelector = "> :not([slot])";
+const defaultSlotSelector = ":not([slot])";
 function getSlotted(element, slotName, options) {
-  if (!Array.isArray(slotName) && typeof slotName !== "string") {
+  if (slotName && !Array.isArray(slotName) && typeof slotName !== "string") {
     options = slotName;
     slotName = null;
   }
@@ -140,12 +140,15 @@ function getSlotted(element, slotName, options) {
   }
   return querySingle(element, slotSelector, options);
 }
+function getDirectChildren(el, selector) {
+  return el ? Array.from(el.children || []).filter((child) => child === null || child === void 0 ? void 0 : child.matches(selector)) : [];
+}
 function queryMultiple(element, slotSelector, options) {
-  let matches = Array.from(element.querySelectorAll(slotSelector));
+  let matches = slotSelector === defaultSlotSelector
+    ? getDirectChildren(element, defaultSlotSelector)
+    : 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);
-  }
+  matches = (options === null || options === void 0 ? void 0 : options.matches) ? matches.filter((el) => el === null || el === void 0 ? void 0 : el.matches(options.matches)) : matches;
   const selector = options === null || options === void 0 ? void 0 : options.selector;
   return selector
     ? matches
@@ -155,11 +158,11 @@ function queryMultiple(element, slotSelector, options) {
     : matches;
 }
 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;
-  }
+  let match = slotSelector === defaultSlotSelector
+    ? getDirectChildren(element, defaultSlotSelector)[0] || null
+    : element.querySelector(slotSelector);
   match = options && options.direct === false ? match : (match === null || match === void 0 ? void 0 : match.parentElement) === element ? match : null;
+  match = (options === null || options === void 0 ? void 0 : options.matches) ? ((match === null || match === void 0 ? void 0 : match.matches(options.matches)) ? match : null) : match;
   const selector = options === null || options === void 0 ? void 0 : options.selector;
   return selector ? match === null || match === void 0 ? void 0 : match.querySelector(selector) : match;
 }

package/dist/cjs/{form-4b7c317e.js → form-237cf392.js}

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-const dom = require('./dom-0de9fb18.js');
+const dom = require('./dom-f3df220d.js');
 const index = require('./index-6b5d2de5.js');
 
 /**

package/dist/cjs/{label-1bca211b.js → label-6b18ca08.js}

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-const dom = require('./dom-0de9fb18.js');
+const dom = require('./dom-f3df220d.js');
 
 /**
  * Exported for testing purposes only

package/dist/cjs/{popper-09105f6f.js → popper-13a2bb46.js}

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-const dom = require('./dom-0de9fb18.js');
+const dom = require('./dom-f3df220d.js');
 
 var top = 'top';
 var bottom = 'bottom';

package/dist/cjs/{resources-9f0994fb.js → resources-11763017.js}

@@ -16,10 +16,11 @@ function getSupportedLocale(lang = "") {
   if (locale.locales.indexOf(lang) > -1) {
     return lang;
   }
-  else {
-    const base = lang.split("-")[0];
-    return locale.locales.indexOf(base) > -1 ? base : "en";
+  lang = lang.toLowerCase();
+  if (lang.includes("-")) {
+    lang = lang.replace(/(\w+)-(\w+)/, (_match, language, region) => `${language}-${region.toUpperCase()}`);
   }
+  return locale.locales.includes(lang) ? lang : "en";
 }
 /**
  * CLDR cache.

package/dist/cjs/{resources-405cc2c4.js → resources-95073e41.js}

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-const dom = require('./dom-0de9fb18.js');
+const dom = require('./dom-f3df220d.js');
 const array = require('./array-a5dedf5a.js');
 const debounce = require('./debounce-95979061.js');
 const index = require('./index-6b5d2de5.js');

package/dist/collection/components/calcite-card/calcite-card.js

@@ -3,7 +3,9 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Event, h, Prop } from "@stencil/core";
+import { getSlotted } from "../../utils/dom";
 import { CSS, SLOTS, TEXT } from "./resources";
+import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /** Cards do not include a grid or bounding container
  * - cards will expand to fit the width of their container
  */
@@ -68,6 +70,12 @@ export class CalciteCard {
   //  Lifecycle
   //
   // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disonnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
   render() {
     return (h("div", { class: "calcite-card-container" },
       this.loading ? (h("div", { class: "calcite-card-loader-container" },
@@ -85,8 +93,7 @@ export class CalciteCard {
     this.calciteCardSelect.emit();
   }
   renderThumbnail() {
-    const hasThumbnail = this.el.querySelector(`[slot=${SLOTS.thumbnail}]`);
-    return hasThumbnail ? (h("div", { class: CSS.thumbnailWrapper },
+    return getSlotted(this.el, SLOTS.thumbnail) ? (h("div", { class: CSS.thumbnailWrapper, key: "thumbnail-wrapper" },
       h("slot", { name: SLOTS.thumbnail }))) : null;
   }
   renderCheckbox() {
@@ -95,16 +102,18 @@ export class CalciteCard {
       h("calcite-checkbox", { checked: this.selected, label: checkboxLabel })));
   }
   renderHeader() {
-    const title = this.el.querySelector(`[slot=${SLOTS.title}]`);
-    const subtitle = this.el.querySelector(`[slot=${SLOTS.subtitle}]`);
+    const { el } = this;
+    const title = getSlotted(el, SLOTS.title);
+    const subtitle = getSlotted(el, SLOTS.subtitle);
     const hasHeader = title || subtitle;
     return hasHeader ? (h("header", { class: CSS.header },
       h("slot", { name: SLOTS.title }),
       h("slot", { name: SLOTS.subtitle }))) : null;
   }
   renderFooter() {
-    const leadingFooter = this.el.querySelector(`[slot=${SLOTS.footerLeading}]`);
-    const trailingFooter = this.el.querySelector(`[slot=${SLOTS.footerTrailing}]`);
+    const { el } = this;
+    const leadingFooter = getSlotted(el, SLOTS.footerLeading);
+    const trailingFooter = getSlotted(el, SLOTS.footerTrailing);
     const hasFooter = leadingFooter || trailingFooter;
     return hasFooter ? (h("footer", { class: CSS.footer },
       h("slot", { name: SLOTS.footerLeading }),

package/dist/collection/components/calcite-combobox/calcite-combobox.js

@@ -565,7 +565,6 @@ export class CalciteCombobox {
       const item = document.createElement(ComboboxItem);
       item.value = value;
       item.textLabel = value;
-      item.guid = `${chipUidPrefix}${guid()}`;
       item.selected = true;
       this.el.appendChild(item);
       this.resetText();
@@ -615,7 +614,9 @@ export class CalciteCombobox {
   focusChip() {
     var _a;
     const guid = (_a = this.selectedItems[this.activeChipIndex]) === null || _a === void 0 ? void 0 : _a.guid;
-    const chip = this.referenceEl.querySelector(`#${chipUidPrefix}${guid}`);
+    const chip = guid
+      ? this.referenceEl.querySelector(`#${chipUidPrefix}${guid}`)
+      : null;
     chip === null || chip === void 0 ? void 0 : chip.setFocus();
   }
   shiftActiveItemIndex(delta) {
@@ -670,7 +671,7 @@ export class CalciteCombobox {
       const ancestors = [...getItemAncestors(item)].reverse();
       const pathLabel = [...ancestors, item].map((el) => el.textLabel);
       const label = selectionMode !== "ancestors" ? item.textLabel : pathLabel.join(" / ");
-      return (h("calcite-chip", { class: chipClasses, dismissLabel: intlRemoveTag, dismissible: true, icon: item.icon, id: `${chipUidPrefix}${item.guid}`, key: item.textLabel, onCalciteChipDismiss: (event) => this.calciteChipDismissHandler(event, item), scale: scale, title: label, value: item.value }, label));
+      return (h("calcite-chip", { class: chipClasses, dismissLabel: intlRemoveTag, dismissible: true, icon: item.icon, id: item.guid ? `${chipUidPrefix}${item.guid}` : null, key: item.textLabel, onCalciteChipDismiss: (event) => this.calciteChipDismissHandler(event, item), scale: scale, title: label, value: item.value }, label));
     });
   }
   renderInput() {
@@ -695,7 +696,7 @@ export class CalciteCombobox {
         }, disabled: disabled, id: `${inputUidPrefix}${guid}`, key: "input", onBlur: this.comboboxBlurHandler, onFocus: this.comboboxFocusHandler, onInput: this.inputHandler, placeholder: placeholder, ref: (el) => (this.textInput = el), type: "text" })));
   }
   renderListBoxOptions() {
-    return this.visibleItems.map((item) => (h("li", { "aria-selected": (!!item.selected).toString(), id: `${itemUidPrefix}${item.guid}`, role: "option", tabindex: "-1" }, item.textLabel)));
+    return this.visibleItems.map((item) => (h("li", { "aria-selected": (!!item.selected).toString(), id: item.guid ? `${itemUidPrefix}${item.guid}` : null, role: "option", tabindex: "-1" }, item.textLabel)));
   }
   renderPopperContainer() {
     const { active, maxScrollerHeight, setMenuEl, setListContainerEl, hideList, open } = this;

package/dist/collection/components/calcite-combobox-item/calcite-combobox-item.js

@@ -3,10 +3,11 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Event, Host, Method, Prop, h, Watch } from "@stencil/core";
-import { getElementProp } from "../../utils/dom";
+import { getElementProp, getSlotted } from "../../utils/dom";
 import { CSS } from "./resources";
 import { guid } from "../../utils/guid";
 import { getAncestors, getDepth } from "../calcite-combobox/utils";
+import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding nested `calcite-combobox-item`s.
  */
@@ -50,9 +51,10 @@ export class CalciteComboboxItem {
   connectedCallback() {
     this.ancestors = getAncestors(this.el);
     this.scale = getElementProp(this.el, "scale", this.scale);
+    connectConditionalSlotComponent(this);
   }
-  componentWillLoad() {
-    this.hasDefaultSlot = this.el.querySelector(":not([slot])") !== null;
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -92,11 +94,11 @@ export class CalciteComboboxItem {
       }, icon: icon || iconPath, scale: "s" }));
   }
   renderChildren() {
-    if (!this.hasDefaultSlot) {
-      return null;
+    if (getSlotted(this.el)) {
+      return (h("ul", { key: "default-slot-container" },
+        h("slot", null)));
     }
-    return (h("ul", null,
-      h("slot", null)));
+    return null;
   }
   render() {
     const isSingleSelect = getElementProp(this.el, "selection-mode", "multi") === "single";

package/dist/collection/components/calcite-date-picker/utils.js

@@ -13,10 +13,11 @@ function getSupportedLocale(lang = "") {
   if (locales.indexOf(lang) > -1) {
     return lang;
   }
-  else {
-    const base = lang.split("-")[0];
-    return locales.indexOf(base) > -1 ? base : "en";
+  lang = lang.toLowerCase();
+  if (lang.includes("-")) {
+    lang = lang.replace(/(\w+)-(\w+)/, (_match, language, region) => `${language}-${region.toUpperCase()}`);
   }
+  return locales.includes(lang) ? lang : "en";
 }
 /**
  * CLDR cache.

package/dist/collection/utils/dom.js

@@ -109,9 +109,9 @@ export async function focusElement(el) {
   }
   return isCalciteFocusable(el) ? el.setFocus() : el.focus();
 }
-const defaultSlotSelector = "> :not([slot])";
+const defaultSlotSelector = ":not([slot])";
 export function getSlotted(element, slotName, options) {
-  if (!Array.isArray(slotName) && typeof slotName !== "string") {
+  if (slotName && !Array.isArray(slotName) && typeof slotName !== "string") {
     options = slotName;
     slotName = null;
   }
@@ -125,12 +125,15 @@ export function getSlotted(element, slotName, options) {
   }
   return querySingle(element, slotSelector, options);
 }
+function getDirectChildren(el, selector) {
+  return el ? Array.from(el.children || []).filter((child) => child === null || child === void 0 ? void 0 : child.matches(selector)) : [];
+}
 function queryMultiple(element, slotSelector, options) {
-  let matches = Array.from(element.querySelectorAll(slotSelector));
+  let matches = slotSelector === defaultSlotSelector
+    ? getDirectChildren(element, defaultSlotSelector)
+    : 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);
-  }
+  matches = (options === null || options === void 0 ? void 0 : options.matches) ? matches.filter((el) => el === null || el === void 0 ? void 0 : el.matches(options.matches)) : matches;
   const selector = options === null || options === void 0 ? void 0 : options.selector;
   return selector
     ? matches
@@ -140,11 +143,11 @@ function queryMultiple(element, slotSelector, options) {
     : matches;
 }
 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;
-  }
+  let match = slotSelector === defaultSlotSelector
+    ? getDirectChildren(element, defaultSlotSelector)[0] || null
+    : element.querySelector(slotSelector);
   match = options && options.direct === false ? match : (match === null || match === void 0 ? void 0 : match.parentElement) === element ? match : null;
+  match = (options === null || options === void 0 ? void 0 : options.matches) ? ((match === null || match === void 0 ? void 0 : match.matches(options.matches)) ? match : null) : match;
   const selector = options === null || options === void 0 ? void 0 : options.selector;
   return selector ? match === null || match === void 0 ? void 0 : match.querySelector(selector) : match;
 }

package/dist/components/calcite-card.js

@@ -3,6 +3,8 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { HTMLElement, createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
+import { b as getSlotted } from './dom.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 import { d as defineCustomElement$4 } from './calcite-checkbox2.js';
 import { d as defineCustomElement$3 } from './calcite-label2.js';
 import { d as defineCustomElement$2 } from './calcite-loader2.js';
@@ -88,6 +90,12 @@ let CalciteCard$1 = class extends HTMLElement {
   //  Lifecycle
   //
   // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disonnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
   render() {
     return (h("div", { class: "calcite-card-container" }, this.loading ? (h("div", { class: "calcite-card-loader-container" }, h("calcite-loader", { active: true, label: this.intlLoading }))) : null, h("section", { "aria-busy": this.loading.toString(), class: { [CSS.container]: true } }, this.selectable ? this.renderCheckbox() : null, this.renderThumbnail(), this.renderHeader(), h("div", { class: "card-content" }, h("slot", null)), this.renderFooter())));
   }
@@ -96,22 +104,23 @@ let CalciteCard$1 = class extends HTMLElement {
     this.calciteCardSelect.emit();
   }
   renderThumbnail() {
-    const hasThumbnail = this.el.querySelector(`[slot=${SLOTS.thumbnail}]`);
-    return hasThumbnail ? (h("div", { class: CSS.thumbnailWrapper }, h("slot", { name: SLOTS.thumbnail }))) : null;
+    return getSlotted(this.el, SLOTS.thumbnail) ? (h("div", { class: CSS.thumbnailWrapper, key: "thumbnail-wrapper" }, h("slot", { name: SLOTS.thumbnail }))) : null;
   }
   renderCheckbox() {
     const checkboxLabel = this.selected ? this.intlDeselect : this.intlSelect;
     return (h("calcite-label", { class: CSS.checkboxWrapper, onClick: this.cardSelectClick, onKeyDown: this.cardSelectKeyDown }, h("calcite-checkbox", { checked: this.selected, label: checkboxLabel })));
   }
   renderHeader() {
-    const title = this.el.querySelector(`[slot=${SLOTS.title}]`);
-    const subtitle = this.el.querySelector(`[slot=${SLOTS.subtitle}]`);
+    const { el } = this;
+    const title = getSlotted(el, SLOTS.title);
+    const subtitle = getSlotted(el, SLOTS.subtitle);
     const hasHeader = title || subtitle;
     return hasHeader ? (h("header", { class: CSS.header }, h("slot", { name: SLOTS.title }), h("slot", { name: SLOTS.subtitle }))) : null;
   }
   renderFooter() {
-    const leadingFooter = this.el.querySelector(`[slot=${SLOTS.footerLeading}]`);
-    const trailingFooter = this.el.querySelector(`[slot=${SLOTS.footerTrailing}]`);
+    const { el } = this;
+    const leadingFooter = getSlotted(el, SLOTS.footerLeading);
+    const trailingFooter = getSlotted(el, SLOTS.footerTrailing);
     const hasFooter = leadingFooter || trailingFooter;
     return hasFooter ? (h("footer", { class: CSS.footer }, h("slot", { name: SLOTS.footerLeading }), h("slot", { name: SLOTS.footerTrailing }))) : null;
   }

package/dist/components/calcite-combobox-item.js

@@ -3,9 +3,10 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
-import { g as getElementProp } from './dom.js';
+import { g as getElementProp, b as getSlotted } from './dom.js';
 import { g as guid } from './guid.js';
 import { e as getAncestors, f as getDepth } from './utils2.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 import { d as defineCustomElement$2 } from './calcite-icon2.js';
 
 const CSS = {
@@ -67,9 +68,10 @@ let CalciteComboboxItem$1 = class extends HTMLElement {
   connectedCallback() {
     this.ancestors = getAncestors(this.el);
     this.scale = getElementProp(this.el, "scale", this.scale);
+    connectConditionalSlotComponent(this);
   }
-  componentWillLoad() {
-    this.hasDefaultSlot = this.el.querySelector(":not([slot])") !== null;
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -109,10 +111,10 @@ let CalciteComboboxItem$1 = class extends HTMLElement {
       }, icon: icon || iconPath, scale: "s" }));
   }
   renderChildren() {
-    if (!this.hasDefaultSlot) {
-      return null;
+    if (getSlotted(this.el)) {
+      return (h("ul", { key: "default-slot-container" }, h("slot", null)));
     }
-    return (h("ul", null, h("slot", null)));
+    return null;
   }
   render() {
     const isSingleSelect = getElementProp(this.el, "selection-mode", "multi") === "single";

package/dist/components/calcite-combobox.js

@@ -714,7 +714,6 @@ let CalciteCombobox$1 = class extends HTMLElement {
       const item = document.createElement(ComboboxItem);
       item.value = value;
       item.textLabel = value;
-      item.guid = `${chipUidPrefix}${guid()}`;
       item.selected = true;
       this.el.appendChild(item);
       this.resetText();
@@ -764,7 +763,9 @@ let CalciteCombobox$1 = class extends HTMLElement {
   focusChip() {
     var _a;
     const guid = (_a = this.selectedItems[this.activeChipIndex]) === null || _a === void 0 ? void 0 : _a.guid;
-    const chip = this.referenceEl.querySelector(`#${chipUidPrefix}${guid}`);
+    const chip = guid
+      ? this.referenceEl.querySelector(`#${chipUidPrefix}${guid}`)
+      : null;
     chip === null || chip === void 0 ? void 0 : chip.setFocus();
   }
   shiftActiveItemIndex(delta) {
@@ -819,7 +820,7 @@ let CalciteCombobox$1 = class extends HTMLElement {
       const ancestors = [...getItemAncestors(item)].reverse();
       const pathLabel = [...ancestors, item].map((el) => el.textLabel);
       const label = selectionMode !== "ancestors" ? item.textLabel : pathLabel.join(" / ");
-      return (h("calcite-chip", { class: chipClasses, dismissLabel: intlRemoveTag, dismissible: true, icon: item.icon, id: `${chipUidPrefix}${item.guid}`, key: item.textLabel, onCalciteChipDismiss: (event) => this.calciteChipDismissHandler(event, item), scale: scale, title: label, value: item.value }, label));
+      return (h("calcite-chip", { class: chipClasses, dismissLabel: intlRemoveTag, dismissible: true, icon: item.icon, id: item.guid ? `${chipUidPrefix}${item.guid}` : null, key: item.textLabel, onCalciteChipDismiss: (event) => this.calciteChipDismissHandler(event, item), scale: scale, title: label, value: item.value }, label));
     });
   }
   renderInput() {
@@ -842,7 +843,7 @@ let CalciteCombobox$1 = class extends HTMLElement {
       }, disabled: disabled, id: `${inputUidPrefix}${guid}`, key: "input", onBlur: this.comboboxBlurHandler, onFocus: this.comboboxFocusHandler, onInput: this.inputHandler, placeholder: placeholder, ref: (el) => (this.textInput = el), type: "text" })));
   }
   renderListBoxOptions() {
-    return this.visibleItems.map((item) => (h("li", { "aria-selected": (!!item.selected).toString(), id: `${itemUidPrefix}${item.guid}`, role: "option", tabindex: "-1" }, item.textLabel)));
+    return this.visibleItems.map((item) => (h("li", { "aria-selected": (!!item.selected).toString(), id: item.guid ? `${itemUidPrefix}${item.guid}` : null, role: "option", tabindex: "-1" }, item.textLabel)));
   }
   renderPopperContainer() {
     const { active, maxScrollerHeight, setMenuEl, setListContainerEl, hideList, open } = this;

package/dist/components/calcite-date-picker2.js

@@ -19,10 +19,11 @@ function getSupportedLocale(lang = "") {
   if (locales.indexOf(lang) > -1) {
     return lang;
   }
-  else {
-    const base = lang.split("-")[0];
-    return locales.indexOf(base) > -1 ? base : "en";
+  lang = lang.toLowerCase();
+  if (lang.includes("-")) {
+    lang = lang.replace(/(\w+)-(\w+)/, (_match, language, region) => `${language}-${region.toUpperCase()}`);
   }
+  return locales.includes(lang) ? lang : "en";
 }
 /**
  * CLDR cache.

package/dist/components/dom.js

@@ -122,9 +122,9 @@ async function focusElement(el) {
   }
   return isCalciteFocusable(el) ? el.setFocus() : el.focus();
 }
-const defaultSlotSelector = "> :not([slot])";
+const defaultSlotSelector = ":not([slot])";
 function getSlotted(element, slotName, options) {
-  if (!Array.isArray(slotName) && typeof slotName !== "string") {
+  if (slotName && !Array.isArray(slotName) && typeof slotName !== "string") {
     options = slotName;
     slotName = null;
   }
@@ -138,12 +138,15 @@ function getSlotted(element, slotName, options) {
   }
   return querySingle(element, slotSelector, options);
 }
+function getDirectChildren(el, selector) {
+  return el ? Array.from(el.children || []).filter((child) => child === null || child === void 0 ? void 0 : child.matches(selector)) : [];
+}
 function queryMultiple(element, slotSelector, options) {
-  let matches = Array.from(element.querySelectorAll(slotSelector));
+  let matches = slotSelector === defaultSlotSelector
+    ? getDirectChildren(element, defaultSlotSelector)
+    : 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);
-  }
+  matches = (options === null || options === void 0 ? void 0 : options.matches) ? matches.filter((el) => el === null || el === void 0 ? void 0 : el.matches(options.matches)) : matches;
   const selector = options === null || options === void 0 ? void 0 : options.selector;
   return selector
     ? matches
@@ -153,11 +156,11 @@ function queryMultiple(element, slotSelector, options) {
     : matches;
 }
 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;
-  }
+  let match = slotSelector === defaultSlotSelector
+    ? getDirectChildren(element, defaultSlotSelector)[0] || null
+    : element.querySelector(slotSelector);
   match = options && options.direct === false ? match : (match === null || match === void 0 ? void 0 : match.parentElement) === element ? match : null;
+  match = (options === null || options === void 0 ? void 0 : options.matches) ? ((match === null || match === void 0 ? void 0 : match.matches(options.matches)) ? match : null) : match;
   const selector = options === null || options === void 0 ? void 0 : options.selector;
   return selector ? match === null || match === void 0 ? void 0 : match.querySelector(selector) : match;
 }