@esri/calcite-components 1.0.0-beta.84 → 1.0.0-beta.85

package/dist/components/index.js

@@ -1,96 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.84
+ * v1.0.0-beta.85
  */
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
-export { CalciteAccordion, defineCustomElement as defineCustomElementCalciteAccordion } from './calcite-accordion.js';
-export { CalciteAccordionItem, defineCustomElement as defineCustomElementCalciteAccordionItem } from './calcite-accordion-item.js';
-export { CalciteAction, defineCustomElement as defineCustomElementCalciteAction } from './calcite-action.js';
-export { CalciteActionBar, defineCustomElement as defineCustomElementCalciteActionBar } from './calcite-action-bar.js';
-export { CalciteActionGroup, defineCustomElement as defineCustomElementCalciteActionGroup } from './calcite-action-group.js';
-export { CalciteActionMenu, defineCustomElement as defineCustomElementCalciteActionMenu } from './calcite-action-menu.js';
-export { CalciteActionPad, defineCustomElement as defineCustomElementCalciteActionPad } from './calcite-action-pad.js';
-export { CalciteAlert, defineCustomElement as defineCustomElementCalciteAlert } from './calcite-alert.js';
-export { CalciteAvatar, defineCustomElement as defineCustomElementCalciteAvatar } from './calcite-avatar.js';
-export { CalciteBlock, defineCustomElement as defineCustomElementCalciteBlock } from './calcite-block.js';
-export { CalciteBlockSection, defineCustomElement as defineCustomElementCalciteBlockSection } from './calcite-block-section.js';
-export { CalciteButton, defineCustomElement as defineCustomElementCalciteButton } from './calcite-button.js';
-export { CalciteCard, defineCustomElement as defineCustomElementCalciteCard } from './calcite-card.js';
-export { CalciteCheckbox, defineCustomElement as defineCustomElementCalciteCheckbox } from './calcite-checkbox.js';
-export { CalciteChip, defineCustomElement as defineCustomElementCalciteChip } from './calcite-chip.js';
-export { CalciteColorPicker, defineCustomElement as defineCustomElementCalciteColorPicker } from './calcite-color-picker.js';
-export { CalciteColorPickerHexInput, defineCustomElement as defineCustomElementCalciteColorPickerHexInput } from './calcite-color-picker-hex-input.js';
-export { CalciteColorPickerSwatch, defineCustomElement as defineCustomElementCalciteColorPickerSwatch } from './calcite-color-picker-swatch.js';
-export { CalciteCombobox, defineCustomElement as defineCustomElementCalciteCombobox } from './calcite-combobox.js';
-export { CalciteComboboxItem, defineCustomElement as defineCustomElementCalciteComboboxItem } from './calcite-combobox-item.js';
-export { CalciteComboboxItemGroup, defineCustomElement as defineCustomElementCalciteComboboxItemGroup } from './calcite-combobox-item-group.js';
-export { CalciteDatePicker, defineCustomElement as defineCustomElementCalciteDatePicker } from './calcite-date-picker.js';
-export { CalciteDatePickerDay, defineCustomElement as defineCustomElementCalciteDatePickerDay } from './calcite-date-picker-day.js';
-export { CalciteDatePickerMonth, defineCustomElement as defineCustomElementCalciteDatePickerMonth } from './calcite-date-picker-month.js';
-export { CalciteDatePickerMonthHeader, defineCustomElement as defineCustomElementCalciteDatePickerMonthHeader } from './calcite-date-picker-month-header.js';
-export { CalciteDropdown, defineCustomElement as defineCustomElementCalciteDropdown } from './calcite-dropdown.js';
-export { CalciteDropdownGroup, defineCustomElement as defineCustomElementCalciteDropdownGroup } from './calcite-dropdown-group.js';
-export { CalciteDropdownItem, defineCustomElement as defineCustomElementCalciteDropdownItem } from './calcite-dropdown-item.js';
-export { CalciteFab, defineCustomElement as defineCustomElementCalciteFab } from './calcite-fab.js';
-export { CalciteFilter, defineCustomElement as defineCustomElementCalciteFilter } from './calcite-filter.js';
-export { CalciteFlow, defineCustomElement as defineCustomElementCalciteFlow } from './calcite-flow.js';
-export { CalciteGraph, defineCustomElement as defineCustomElementCalciteGraph } from './calcite-graph.js';
-export { CalciteHandle, defineCustomElement as defineCustomElementCalciteHandle } from './calcite-handle.js';
-export { CalciteIcon, defineCustomElement as defineCustomElementCalciteIcon } from './calcite-icon.js';
-export { CalciteInlineEditable, defineCustomElement as defineCustomElementCalciteInlineEditable } from './calcite-inline-editable.js';
-export { CalciteInput, defineCustomElement as defineCustomElementCalciteInput } from './calcite-input.js';
-export { CalciteInputDatePicker, defineCustomElement as defineCustomElementCalciteInputDatePicker } from './calcite-input-date-picker.js';
-export { CalciteInputMessage, defineCustomElement as defineCustomElementCalciteInputMessage } from './calcite-input-message.js';
-export { CalciteInputTimePicker, defineCustomElement as defineCustomElementCalciteInputTimePicker } from './calcite-input-time-picker.js';
-export { CalciteLabel, defineCustomElement as defineCustomElementCalciteLabel } from './calcite-label.js';
-export { CalciteLink, defineCustomElement as defineCustomElementCalciteLink } from './calcite-link.js';
-export { CalciteList, defineCustomElement as defineCustomElementCalciteList } from './calcite-list.js';
-export { CalciteListItem, defineCustomElement as defineCustomElementCalciteListItem } from './calcite-list-item.js';
-export { CalciteListItemGroup, defineCustomElement as defineCustomElementCalciteListItemGroup } from './calcite-list-item-group.js';
-export { CalciteLoader, defineCustomElement as defineCustomElementCalciteLoader } from './calcite-loader.js';
-export { CalciteModal, defineCustomElement as defineCustomElementCalciteModal } from './calcite-modal.js';
-export { CalciteNotice, defineCustomElement as defineCustomElementCalciteNotice } from './calcite-notice.js';
-export { CalciteOption, defineCustomElement as defineCustomElementCalciteOption } from './calcite-option.js';
-export { CalciteOptionGroup, defineCustomElement as defineCustomElementCalciteOptionGroup } from './calcite-option-group.js';
-export { CalcitePagination, defineCustomElement as defineCustomElementCalcitePagination } from './calcite-pagination.js';
-export { CalcitePanel, defineCustomElement as defineCustomElementCalcitePanel } from './calcite-panel.js';
-export { CalcitePickList, defineCustomElement as defineCustomElementCalcitePickList } from './calcite-pick-list.js';
-export { CalcitePickListGroup, defineCustomElement as defineCustomElementCalcitePickListGroup } from './calcite-pick-list-group.js';
-export { CalcitePickListItem, defineCustomElement as defineCustomElementCalcitePickListItem } from './calcite-pick-list-item.js';
-export { CalcitePopover, defineCustomElement as defineCustomElementCalcitePopover } from './calcite-popover.js';
-export { CalcitePopoverManager, defineCustomElement as defineCustomElementCalcitePopoverManager } from './calcite-popover-manager.js';
-export { CalciteProgress, defineCustomElement as defineCustomElementCalciteProgress } from './calcite-progress.js';
-export { CalciteRadioButton, defineCustomElement as defineCustomElementCalciteRadioButton } from './calcite-radio-button.js';
-export { CalciteRadioButtonGroup, defineCustomElement as defineCustomElementCalciteRadioButtonGroup } from './calcite-radio-button-group.js';
-export { CalciteRadioGroup, defineCustomElement as defineCustomElementCalciteRadioGroup } from './calcite-radio-group.js';
-export { CalciteRadioGroupItem, defineCustomElement as defineCustomElementCalciteRadioGroupItem } from './calcite-radio-group-item.js';
-export { CalciteRating, defineCustomElement as defineCustomElementCalciteRating } from './calcite-rating.js';
-export { CalciteScrim, defineCustomElement as defineCustomElementCalciteScrim } from './calcite-scrim.js';
-export { CalciteSelect, defineCustomElement as defineCustomElementCalciteSelect } from './calcite-select.js';
-export { CalciteShell, defineCustomElement as defineCustomElementCalciteShell } from './calcite-shell.js';
-export { CalciteShellCenterRow, defineCustomElement as defineCustomElementCalciteShellCenterRow } from './calcite-shell-center-row.js';
-export { CalciteShellPanel, defineCustomElement as defineCustomElementCalciteShellPanel } from './calcite-shell-panel.js';
-export { CalciteSlider, defineCustomElement as defineCustomElementCalciteSlider } from './calcite-slider.js';
-export { CalciteSortableList, defineCustomElement as defineCustomElementCalciteSortableList } from './calcite-sortable-list.js';
-export { CalciteSplitButton, defineCustomElement as defineCustomElementCalciteSplitButton } from './calcite-split-button.js';
-export { CalciteStepper, defineCustomElement as defineCustomElementCalciteStepper } from './calcite-stepper.js';
-export { CalciteStepperItem, defineCustomElement as defineCustomElementCalciteStepperItem } from './calcite-stepper-item.js';
-export { CalciteSwitch, defineCustomElement as defineCustomElementCalciteSwitch } from './calcite-switch.js';
-export { CalciteTab, defineCustomElement as defineCustomElementCalciteTab } from './calcite-tab.js';
-export { CalciteTabNav, defineCustomElement as defineCustomElementCalciteTabNav } from './calcite-tab-nav.js';
-export { CalciteTabTitle, defineCustomElement as defineCustomElementCalciteTabTitle } from './calcite-tab-title.js';
-export { CalciteTabs, defineCustomElement as defineCustomElementCalciteTabs } from './calcite-tabs.js';
-export { CalciteTile, defineCustomElement as defineCustomElementCalciteTile } from './calcite-tile.js';
-export { CalciteTileSelect, defineCustomElement as defineCustomElementCalciteTileSelect } from './calcite-tile-select.js';
-export { CalciteTileSelectGroup, defineCustomElement as defineCustomElementCalciteTileSelectGroup } from './calcite-tile-select-group.js';
-export { CalciteTimePicker, defineCustomElement as defineCustomElementCalciteTimePicker } from './calcite-time-picker.js';
-export { CalciteTip, defineCustomElement as defineCustomElementCalciteTip } from './calcite-tip.js';
-export { CalciteTipGroup, defineCustomElement as defineCustomElementCalciteTipGroup } from './calcite-tip-group.js';
-export { CalciteTipManager, defineCustomElement as defineCustomElementCalciteTipManager } from './calcite-tip-manager.js';
-export { CalciteTooltip, defineCustomElement as defineCustomElementCalciteTooltip } from './calcite-tooltip.js';
-export { CalciteTooltipManager, defineCustomElement as defineCustomElementCalciteTooltipManager } from './calcite-tooltip-manager.js';
-export { CalciteTree, defineCustomElement as defineCustomElementCalciteTree } from './calcite-tree.js';
-export { CalciteTreeItem, defineCustomElement as defineCustomElementCalciteTreeItem } from './calcite-tree-item.js';
-export { CalciteValueList, defineCustomElement as defineCustomElementCalciteValueList } from './calcite-value-list.js';
-export { CalciteValueListItem, defineCustomElement as defineCustomElementCalciteValueListItem } from './calcite-value-list-item.js';

package/dist/components/input.js

@@ -1,11 +1,11 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.84
+ * v1.0.0-beta.85
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { T as TEXT$1, b as getSlotted, s as setRequestedIcon, g as getElementProp, a as getElementDir, C as CSS_UTILITY } from './dom.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label2.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label.js';
 import { s as submitForm, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';
 import { d as delocalizeNumberString, i as isValidNumber, p as parseNumberString, g as getDecimalSeparator, l as localizeNumberString, s as sanitizeNumberString } from './locale.js';
 import { n as numberKeys } from './key.js';

package/dist/components/interactive.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.84
+ * v1.0.0-beta.85
  */
 function noopClick() {
   /** noop */

package/dist/components/interfaces.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.84
+ * v1.0.0-beta.85
  */
 var StatusIcons;
 (function (StatusIcons) {

package/dist/components/interfaces2.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.84
+ * v1.0.0-beta.85
  */
 var TreeSelectionMode;
 (function (TreeSelectionMode) {

package/dist/components/key.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.84
+ * v1.0.0-beta.85
  */
 function isActivationKey(key) {
   return key === "Enter" || key === " ";

package/dist/components/label.js

@@ -1,101 +1,126 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.84
+ * v1.0.0-beta.85
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { l as labelConnectedEvent, a as labelDisconnectedEvent } from './label2.js';
+import { q as queryElementRoots, d as closestElementCrossShadowBoundary } from './dom.js';
 
-const CSS = {
-  container: "container"
+/**
+ * Exported for testing purposes only
+ *
+ * @internal
+ */
+const labelClickEvent = "calciteInternalLabelClick";
+const labelConnectedEvent = "calciteInternalLabelConnected";
+const labelDisconnectedEvent = "calciteInternaLabelDisconnected";
+const labelTagName = "calcite-label";
+const onLabelClickMap = new WeakMap();
+const onLabelConnectedMap = new WeakMap();
+const onLabelDisconnectedMap = new WeakMap();
+const unlabeledComponents = new Set();
+const findLabelForComponent = (componentEl) => {
+  const { id } = componentEl;
+  const forLabel = id && queryElementRoots(componentEl, { selector: `${labelTagName}[for="${id}"]` });
+  if (forLabel) {
+    return forLabel;
+  }
+  const parentLabel = closestElementCrossShadowBoundary(componentEl, labelTagName);
+  if (!parentLabel ||
+    // labelable components within other custom elements are not considered labelable
+    hasAncestorCustomElements(parentLabel, componentEl)) {
+    return null;
+  }
+  return parentLabel;
 };
-
-const labelCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:inline}:host([alignment=start]){text-align:start}:host([alignment=end]){text-align:end}:host([alignment=center]){text-align:center}:host([scale=s]) .container{gap:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host(:not([disable-spacing])[scale=s]) .container{margin-bottom:var(--calcite-label-margin-bottom, 0.5rem)}:host([scale=m]) .container{gap:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host(:not([disable-spacing])[scale=m]) .container{margin-bottom:var(--calcite-label-margin-bottom, 0.75rem)}:host([scale=l]) .container{gap:0.5rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host(:not([disable-spacing])[scale=l]) .container{margin-bottom:var(--calcite-label-margin-bottom, 1rem)}:host .container{margin-left:0px;margin-right:0px;margin-top:0px;width:100%;line-height:1.375;color:var(--calcite-ui-text-1)}:host([layout=default]) .container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host([layout=inline]) .container,:host([layout=inline-space-between]) .container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;gap:0.5rem}:host([layout=inline][scale=l]) .container{gap:0.75rem}:host([layout=inline-space-between]) .container{-ms-flex-pack:justify;justify-content:space-between}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled])>.container{pointer-events:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) ::slotted(*){pointer-events:none}:host([disabled]) ::slotted(*[disabled]),:host([disabled]) ::slotted(*[disabled] *){--tw-bg-opacity:1}:host([disabled]) ::slotted(calcite-input-message:not([active])){--tw-bg-opacity:0}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([disable-spacing]) .container{margin:0px;gap:0px}";
-
-const Label = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.calciteInternalLabelClick = createEvent(this, "calciteInternalLabelClick", 3);
-    //--------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    //--------------------------------------------------------------------------
-    /** specify the text alignment of the label */
-    this.alignment = "start";
-    /**
-     * specify the status of the label and any child input / input messages
-     *
-     * @deprecated set directly on child element instead
-     */
-    this.status = "idle";
-    /** specify the scale of the label, defaults to m */
-    this.scale = "m";
-    /** is the wrapped element positioned inline with the label slotted text */
-    this.layout = "default";
-    /**
-     * is the label disabled
-     *
-     * @deprecated use the `disabled` property on the interactive components instead
-     */
-    this.disabled = false;
-    /**
-     * eliminates any space around the label
-     *
-     * @deprecated set the --calcite-label-margin-bottom css variable to 0 instead
-     */
-    this.disableSpacing = false;
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    this.labelClickHandler = (event) => {
-      this.calciteInternalLabelClick.emit({
-        sourceEvent: event
-      });
-    };
+function hasAncestorCustomElements(label, componentEl) {
+  let traversedElements;
+  const customElementAncestorCheckEventType = "custom-element-ancestor-check";
+  const listener = (event) => {
+    event.stopImmediatePropagation();
+    const composedPath = event.composedPath();
+    traversedElements = composedPath.slice(composedPath.indexOf(componentEl), composedPath.indexOf(label));
+  };
+  label.addEventListener(customElementAncestorCheckEventType, listener, { once: true });
+  componentEl.dispatchEvent(new CustomEvent(customElementAncestorCheckEventType, { composed: true, bubbles: true }));
+  label.removeEventListener(customElementAncestorCheckEventType, listener);
+  const ancestorCustomElements = traversedElements
+    .filter((el) => el !== componentEl && el !== label)
+    .filter((el) => { var _a; return (_a = el.tagName) === null || _a === void 0 ? void 0 : _a.includes("-"); });
+  return ancestorCustomElements.length > 0;
+}
+/**
+ * Helper to set up label interactions on connectedCallback.
+ *
+ * @param component
+ */
+function connectLabel(component) {
+  const labelEl = findLabelForComponent(component.el);
+  if (onLabelClickMap.has(labelEl) || (!labelEl && unlabeledComponents.has(component))) {
+    return;
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  connectedCallback() {
-    document.dispatchEvent(new CustomEvent(labelConnectedEvent));
+  const boundOnLabelDisconnected = onLabelDisconnected.bind(component);
+  if (labelEl) {
+    component.labelEl = labelEl;
+    const boundOnLabelClick = onLabelClick.bind(component);
+    onLabelClickMap.set(component.labelEl, boundOnLabelClick);
+    component.labelEl.addEventListener(labelClickEvent, boundOnLabelClick);
+    unlabeledComponents.delete(component);
+    document.removeEventListener(labelConnectedEvent, onLabelConnectedMap.get(component));
+    onLabelDisconnectedMap.set(component, boundOnLabelDisconnected);
+    document.addEventListener(labelDisconnectedEvent, boundOnLabelDisconnected);
   }
-  disconnectedCallback() {
-    document.dispatchEvent(new CustomEvent(labelDisconnectedEvent));
+  else if (!unlabeledComponents.has(component)) {
+    boundOnLabelDisconnected();
+    document.removeEventListener(labelDisconnectedEvent, onLabelDisconnectedMap.get(component));
   }
-  render() {
-    return (h(Host, { onClick: this.labelClickHandler }, h("div", { class: CSS.container }, h("slot", null))));
+}
+/**
+ * Helper to tear down label interactions on disconnectedCallback on labelable components.
+ *
+ * @param component
+ */
+function disconnectLabel(component) {
+  unlabeledComponents.delete(component);
+  document.removeEventListener(labelConnectedEvent, onLabelConnectedMap.get(component));
+  document.removeEventListener(labelDisconnectedEvent, onLabelDisconnectedMap.get(component));
+  onLabelConnectedMap.delete(component);
+  onLabelDisconnectedMap.delete(component);
+  if (!component.labelEl) {
+    return;
   }
-  get el() { return this; }
-  static get style() { return labelCss; }
-}, [1, "calcite-label", {
-    "alignment": [513],
-    "status": [513],
-    "for": [513],
-    "scale": [513],
-    "layout": [513],
-    "disabled": [516],
-    "disableSpacing": [4, "disable-spacing"]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
+  const boundOnLabelClick = onLabelClickMap.get(component.labelEl);
+  component.labelEl.removeEventListener(labelClickEvent, boundOnLabelClick);
+  onLabelClickMap.delete(component.labelEl);
+}
+/**
+ * Helper to get the label text from a component.
+ *
+ * @param component
+ */
+function getLabelText(component) {
+  var _a, _b;
+  return component.label || ((_b = (_a = component.labelEl) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()) || "";
+}
+function onLabelClick(event) {
+  if (this.disabled) {
     return;
   }
-  const components = ["calcite-label"];
-  components.forEach(tagName => { switch (tagName) {
-    case "calcite-label":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Label);
-      }
-      break;
-  } });
+  const containedLabelableChildClicked = this.el.contains(event.detail.sourceEvent.target);
+  if (containedLabelableChildClicked) {
+    return;
+  }
+  this.onLabelClick(event);
+}
+function onLabelConnected() {
+  if (unlabeledComponents.has(this)) {
+    connectLabel(this);
+  }
+}
+function onLabelDisconnected() {
+  unlabeledComponents.add(this);
+  const boundOnLabelConnected = onLabelConnectedMap.get(this) || onLabelConnected.bind(this);
+  onLabelConnectedMap.set(this, boundOnLabelConnected);
+  document.addEventListener(labelConnectedEvent, boundOnLabelConnected);
 }
-defineCustomElement();
 
-export { Label as L, defineCustomElement as d };
+export { labelDisconnectedEvent as a, connectLabel as c, disconnectLabel as d, getLabelText as g, labelConnectedEvent as l };

package/dist/components/label2.js

@@ -1,126 +1,101 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.84
+ * v1.0.0-beta.85
  */
-import { q as queryElementRoots, j as closestElementCrossShadowBoundary } from './dom.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { l as labelConnectedEvent, a as labelDisconnectedEvent } from './label.js';
 
-/**
- * Exported for testing purposes only
- *
- * @internal
- */
-const labelClickEvent = "calciteInternalLabelClick";
-const labelConnectedEvent = "calciteInternalLabelConnected";
-const labelDisconnectedEvent = "calciteInternaLabelDisconnected";
-const labelTagName = "calcite-label";
-const onLabelClickMap = new WeakMap();
-const onLabelConnectedMap = new WeakMap();
-const onLabelDisconnectedMap = new WeakMap();
-const unlabeledComponents = new Set();
-const findLabelForComponent = (componentEl) => {
-  const { id } = componentEl;
-  const forLabel = id && queryElementRoots(componentEl, { selector: `${labelTagName}[for="${id}"]` });
-  if (forLabel) {
-    return forLabel;
-  }
-  const parentLabel = closestElementCrossShadowBoundary(componentEl, labelTagName);
-  if (!parentLabel ||
-    // labelable components within other custom elements are not considered labelable
-    hasAncestorCustomElements(parentLabel, componentEl)) {
-    return null;
-  }
-  return parentLabel;
+const CSS = {
+  container: "container"
 };
-function hasAncestorCustomElements(label, componentEl) {
-  let traversedElements;
-  const customElementAncestorCheckEventType = "custom-element-ancestor-check";
-  const listener = (event) => {
-    event.stopImmediatePropagation();
-    const composedPath = event.composedPath();
-    traversedElements = composedPath.slice(composedPath.indexOf(componentEl), composedPath.indexOf(label));
-  };
-  label.addEventListener(customElementAncestorCheckEventType, listener, { once: true });
-  componentEl.dispatchEvent(new CustomEvent(customElementAncestorCheckEventType, { composed: true, bubbles: true }));
-  label.removeEventListener(customElementAncestorCheckEventType, listener);
-  const ancestorCustomElements = traversedElements
-    .filter((el) => el !== componentEl && el !== label)
-    .filter((el) => { var _a; return (_a = el.tagName) === null || _a === void 0 ? void 0 : _a.includes("-"); });
-  return ancestorCustomElements.length > 0;
-}
-/**
- * Helper to set up label interactions on connectedCallback.
- *
- * @param component
- */
-function connectLabel(component) {
-  const labelEl = findLabelForComponent(component.el);
-  if (onLabelClickMap.has(labelEl) || (!labelEl && unlabeledComponents.has(component))) {
-    return;
+
+const labelCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:inline}:host([alignment=start]){text-align:start}:host([alignment=end]){text-align:end}:host([alignment=center]){text-align:center}:host([scale=s]) .container{gap:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host(:not([disable-spacing])[scale=s]) .container{margin-bottom:var(--calcite-label-margin-bottom, 0.5rem)}:host([scale=m]) .container{gap:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host(:not([disable-spacing])[scale=m]) .container{margin-bottom:var(--calcite-label-margin-bottom, 0.75rem)}:host([scale=l]) .container{gap:0.5rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host(:not([disable-spacing])[scale=l]) .container{margin-bottom:var(--calcite-label-margin-bottom, 1rem)}:host .container{margin-left:0px;margin-right:0px;margin-top:0px;width:100%;line-height:1.375;color:var(--calcite-ui-text-1)}:host([layout=default]) .container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host([layout=inline]) .container,:host([layout=inline-space-between]) .container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;gap:0.5rem}:host([layout=inline][scale=l]) .container{gap:0.75rem}:host([layout=inline-space-between]) .container{-ms-flex-pack:justify;justify-content:space-between}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled])>.container{pointer-events:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) ::slotted(*){pointer-events:none}:host([disabled]) ::slotted(*[disabled]),:host([disabled]) ::slotted(*[disabled] *){--tw-bg-opacity:1}:host([disabled]) ::slotted(calcite-input-message:not([active])){--tw-bg-opacity:0}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([disable-spacing]) .container{margin:0px;gap:0px}";
+
+const Label = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.calciteInternalLabelClick = createEvent(this, "calciteInternalLabelClick", 3);
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /** specify the text alignment of the label */
+    this.alignment = "start";
+    /**
+     * specify the status of the label and any child input / input messages
+     *
+     * @deprecated set directly on child element instead
+     */
+    this.status = "idle";
+    /** specify the scale of the label, defaults to m */
+    this.scale = "m";
+    /** is the wrapped element positioned inline with the label slotted text */
+    this.layout = "default";
+    /**
+     * is the label disabled
+     *
+     * @deprecated use the `disabled` property on the interactive components instead
+     */
+    this.disabled = false;
+    /**
+     * eliminates any space around the label
+     *
+     * @deprecated set the --calcite-label-margin-bottom css variable to 0 instead
+     */
+    this.disableSpacing = false;
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.labelClickHandler = (event) => {
+      this.calciteInternalLabelClick.emit({
+        sourceEvent: event
+      });
+    };
   }
-  const boundOnLabelDisconnected = onLabelDisconnected.bind(component);
-  if (labelEl) {
-    component.labelEl = labelEl;
-    const boundOnLabelClick = onLabelClick.bind(component);
-    onLabelClickMap.set(component.labelEl, boundOnLabelClick);
-    component.labelEl.addEventListener(labelClickEvent, boundOnLabelClick);
-    unlabeledComponents.delete(component);
-    document.removeEventListener(labelConnectedEvent, onLabelConnectedMap.get(component));
-    onLabelDisconnectedMap.set(component, boundOnLabelDisconnected);
-    document.addEventListener(labelDisconnectedEvent, boundOnLabelDisconnected);
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    document.dispatchEvent(new CustomEvent(labelConnectedEvent));
   }
-  else if (!unlabeledComponents.has(component)) {
-    boundOnLabelDisconnected();
-    document.removeEventListener(labelDisconnectedEvent, onLabelDisconnectedMap.get(component));
+  disconnectedCallback() {
+    document.dispatchEvent(new CustomEvent(labelDisconnectedEvent));
   }
-}
-/**
- * Helper to tear down label interactions on disconnectedCallback on labelable components.
- *
- * @param component
- */
-function disconnectLabel(component) {
-  unlabeledComponents.delete(component);
-  document.removeEventListener(labelConnectedEvent, onLabelConnectedMap.get(component));
-  document.removeEventListener(labelDisconnectedEvent, onLabelDisconnectedMap.get(component));
-  onLabelConnectedMap.delete(component);
-  onLabelDisconnectedMap.delete(component);
-  if (!component.labelEl) {
-    return;
+  render() {
+    return (h(Host, { onClick: this.labelClickHandler }, h("div", { class: CSS.container }, h("slot", null))));
   }
-  const boundOnLabelClick = onLabelClickMap.get(component.labelEl);
-  component.labelEl.removeEventListener(labelClickEvent, boundOnLabelClick);
-  onLabelClickMap.delete(component.labelEl);
-}
-/**
- * Helper to get the label text from a component.
- *
- * @param component
- */
-function getLabelText(component) {
-  var _a, _b;
-  return component.label || ((_b = (_a = component.labelEl) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()) || "";
-}
-function onLabelClick(event) {
-  if (this.disabled) {
+  get el() { return this; }
+  static get style() { return labelCss; }
+}, [1, "calcite-label", {
+    "alignment": [513],
+    "status": [513],
+    "for": [513],
+    "scale": [513],
+    "layout": [513],
+    "disabled": [516],
+    "disableSpacing": [4, "disable-spacing"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
     return;
   }
-  const containedLabelableChildClicked = this.el.contains(event.detail.sourceEvent.target);
-  if (containedLabelableChildClicked) {
-    return;
-  }
-  this.onLabelClick(event);
-}
-function onLabelConnected() {
-  if (unlabeledComponents.has(this)) {
-    connectLabel(this);
-  }
-}
-function onLabelDisconnected() {
-  unlabeledComponents.add(this);
-  const boundOnLabelConnected = onLabelConnectedMap.get(this) || onLabelConnected.bind(this);
-  onLabelConnectedMap.set(this, boundOnLabelConnected);
-  document.addEventListener(labelConnectedEvent, boundOnLabelConnected);
+  const components = ["calcite-label"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-label":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Label);
+      }
+      break;
+  } });
 }
+defineCustomElement();
 
-export { labelDisconnectedEvent as a, connectLabel as c, disconnectLabel as d, getLabelText as g, labelConnectedEvent as l };
+export { Label as L, defineCustomElement as d };

package/dist/components/link.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.84
+ * v1.0.0-beta.85
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { a as getElementDir, C as CSS_UTILITY, f as focusElement } from './dom.js';

package/dist/components/loader.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.84
+ * v1.0.0-beta.85
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { g as guid } from './guid.js';

package/dist/components/locale.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.84
+ * v1.0.0-beta.85
  */
 import { n as numberKeys } from './key.js';