@esri/calcite-components 1.6.1-next.0 → 1.6.1-next.2

package/dist/types/components/tree-item/tree-item.d.ts

@@ -9,7 +9,6 @@ import { TreeItemSelectDetail } from "./interfaces";
  * @slot actions-end - A slot for adding actions to the end of the component. It is recommended to use two or fewer actions.
  */
 export declare class TreeItem implements ConditionalSlotComponent, InteractiveComponent {
-  el: HTMLCalciteTreeItemElement;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    */
@@ -60,6 +59,7 @@ export declare class TreeItem implements ConditionalSlotComponent, InteractiveCo
   componentWillLoad(): void;
   componentDidLoad(): void;
   componentDidRender(): void;
+  el: HTMLCalciteTreeItemElement;
   private isSelectionMultiLike;
   render(): VNode;
   onClick(event: Event): void;

package/dist/types/components/value-list/value-list.d.ts

@@ -87,6 +87,7 @@ export declare class ValueList<ItemElement extends HTMLCalciteValueListItemEleme
    * @internal
    */
   messages: ValueListMessages;
+  el: HTMLCalciteValueListElement;
   dataForFilter: ItemData;
   defaultMessages: ValueListMessages;
   effectiveLocale: string;
@@ -96,7 +97,6 @@ export declare class ValueList<ItemElement extends HTMLCalciteValueListItemEleme
   lastSelectedItem: ItemElement;
   mutationObserver: import("../../utils/observers").ExtendedMutationObserver;
   sortable: Sortable;
-  el: HTMLCalciteValueListElement;
   emitCalciteListChange: () => void;
   emitCalciteListFilter: () => void;
   filterEl: HTMLCalciteFilterElement;

package/dist/types/utils/label.d.ts

@@ -27,7 +27,7 @@ export interface LabelableComponent {
  */
 export declare const labelClickEvent = "calciteInternalLabelClick";
 export declare const labelConnectedEvent = "calciteInternalLabelConnected";
-export declare const labelDisconnectedEvent = "calciteInternaLabelDisconnected";
+export declare const labelDisconnectedEvent = "calciteInternalLabelDisconnected";
 /**
  * Helper to set up label interactions on connectedCallback.
  *

package/hydrate/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1-next.0
+ * v1.6.1-next.2
  */
 'use strict';
 
@@ -5863,11 +5863,6 @@ class Accordion {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.calciteInternalAccordionChange = createEvent(this, "calciteInternalAccordionChange", 6);
-    //--------------------------------------------------------------------------
-    //
-    //  Private State/Props
-    //
-    //--------------------------------------------------------------------------
     this.mutationObserver = createObserver();
     this.appearance = "solid";
     this.iconPosition = "end";
@@ -7042,7 +7037,7 @@ class AccordionItem {
     this.calciteInternalAccordionItemClose = createEvent(this, "calciteInternalAccordionItemClose", 6);
     //--------------------------------------------------------------------------
     //
-    //  Private State/Props
+    //  Private Methods
     //
     //--------------------------------------------------------------------------
     /** handle clicks on item header */
@@ -7142,11 +7137,6 @@ class AccordionItem {
     accordionItem.scale = closestAccordionParent.scale;
     event.stopPropagation();
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
   determineActiveItem(selectionMode, requestedItem) {
     switch (selectionMode) {
       case "multiple":
@@ -9580,7 +9570,7 @@ const CSS$13 = {
 };
 const SLOTS$u = {
   actionsEnd: "actions-end",
-  bottomActions: "actions-end",
+  bottomActions: "bottom-actions",
   expandTooltip: "expand-tooltip",
 };
 
@@ -9596,11 +9586,6 @@ class ActionBar {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.calciteActionBarToggle = createEvent(this, "calciteActionBarToggle", 6);
-    // --------------------------------------------------------------------------
-    //
-    //  Private Properties
-    //
-    // --------------------------------------------------------------------------
     this.mutationObserver = createObserver();
     this.resizeObserver = createObserver();
     // --------------------------------------------------------------------------
@@ -9636,7 +9621,7 @@ class ActionBar {
       const actionCount = expandDisabled ? actions.length : actions.length + 1;
       const actionGroups = Array.from(el.querySelectorAll("calcite-action-group"));
       this.setGroupLayout(actionGroups);
-      const groupCount = getSlotted(el, SLOTS$u.actionsEnd) || getSlotted(el, SLOTS$u.bottomActions) || !expandDisabled
+      const groupCount = this.hasActionsEnd || this.hasBottomActions || !expandDisabled
         ? actionGroups.length + 1
         : actionGroups.length;
       const { actionHeight, actionWidth } = geActionDimensions(actions);
@@ -9663,9 +9648,19 @@ class ActionBar {
       this.expandToggleEl = el;
     };
     this.handleDefaultSlotChange = (event) => {
-      const groups = slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-action-group"));
+      const groups = slotChangeGetAssignedElements(event).filter((el) => el.matches("calcite-action-group"));
       this.setGroupLayout(groups);
     };
+    this.handleActionsEndSlotChange = (event) => {
+      this.hasActionsEnd = slotChangeHasAssignedElement(event);
+    };
+    this.handleBottomActionsSlotChange = (event) => {
+      this.hasBottomActions = slotChangeHasAssignedElement(event);
+    };
+    this.handleTooltipSlotChange = (event) => {
+      const tooltips = slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-tooltip"));
+      this.expandTooltip = tooltips[0];
+    };
     this.expandDisabled = false;
     this.expanded = false;
     this.layout = "vertical";
@@ -9675,6 +9670,9 @@ class ActionBar {
     this.messages = undefined;
     this.messageOverrides = undefined;
     this.effectiveLocale = undefined;
+    this.hasActionsEnd = false;
+    this.hasBottomActions = false;
+    this.expandTooltip = undefined;
     this.defaultMessages = undefined;
   }
   expandHandler() {
@@ -9766,13 +9764,10 @@ class ActionBar {
   // --------------------------------------------------------------------------
   renderBottomActionGroup() {
     const { expanded, expandDisabled, el, position, toggleExpand, scale, layout, messages } = this;
-    const tooltip = getSlotted(el, SLOTS$u.expandTooltip);
-    const expandToggleNode = !expandDisabled ? (hAsync(ExpandToggle, { collapseText: messages.collapse, el: el, expandText: messages.expand, expanded: expanded, position: position, scale: scale, toggle: toggleExpand, tooltip: tooltip,
+    const expandToggleNode = !expandDisabled ? (hAsync(ExpandToggle, { collapseText: messages.collapse, el: el, expandText: messages.expand, expanded: expanded, position: position, scale: scale, toggle: toggleExpand, tooltip: this.expandTooltip,
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.setExpandToggleRef })) : null;
-    return getSlotted(el, SLOTS$u.actionsEnd) ||
-      getSlotted(el, SLOTS$u.bottomActions) ||
-      expandToggleNode ? (hAsync("calcite-action-group", { class: CSS$13.actionGroupEnd, layout: layout, scale: scale }, hAsync("slot", { name: SLOTS$u.actionsEnd }), hAsync("slot", { name: SLOTS$u.bottomActions }), hAsync("slot", { name: SLOTS$u.expandTooltip }), expandToggleNode)) : null;
+    return (hAsync("calcite-action-group", { class: CSS$13.actionGroupEnd, hidden: this.expandDisabled && !(this.hasActionsEnd || this.hasBottomActions), layout: layout, scale: scale }, hAsync("slot", { name: SLOTS$u.actionsEnd, onSlotchange: this.handleActionsEndSlotChange }), hAsync("slot", { name: SLOTS$u.bottomActions, onSlotchange: this.handleBottomActionsSlotChange }), hAsync("slot", { name: SLOTS$u.expandTooltip, onSlotchange: this.handleTooltipSlotChange }), expandToggleNode));
   }
   render() {
     return (hAsync(Host, { onCalciteActionMenuOpen: this.actionMenuOpenHandler }, hAsync("slot", { onSlotchange: this.handleDefaultSlotChange }), this.renderBottomActionGroup()));
@@ -9801,6 +9796,9 @@ class ActionBar {
       "messages": [1040],
       "messageOverrides": [1040],
       "effectiveLocale": [32],
+      "hasActionsEnd": [32],
+      "hasBottomActions": [32],
+      "expandTooltip": [32],
       "defaultMessages": [32],
       "overflowActions": [64],
       "setFocus": [64]
@@ -9829,6 +9827,9 @@ class ActionGroup {
     this.setMenuOpen = (event) => {
       this.menuOpen = !!event.target.open;
     };
+    this.handleMenuActionsSlotChange = (event) => {
+      this.hasMenuActions = slotChangeHasAssignedElement(event);
+    };
     this.expanded = false;
     this.layout = "vertical";
     this.columns = undefined;
@@ -9839,6 +9840,7 @@ class ActionGroup {
     this.messageOverrides = undefined;
     this.effectiveLocale = "";
     this.defaultMessages = undefined;
+    this.hasMenuActions = false;
   }
   expandedHandler() {
     this.menuOpen = false;
@@ -9886,15 +9888,9 @@ class ActionGroup {
   //  Component Methods
   //
   // --------------------------------------------------------------------------
-  renderTooltip() {
-    const { el } = this;
-    const hasTooltip = getSlotted(el, SLOTS$w.menuTooltip);
-    return hasTooltip ? hAsync("slot", { name: SLOTS$w.menuTooltip, slot: SLOTS$v.tooltip }) : null;
-  }
   renderMenu() {
-    const { el, expanded, menuOpen, scale, layout, messages, overlayPositioning } = this;
-    const hasMenuItems = getSlotted(el, SLOTS$w.menuActions);
-    return hasMenuItems ? (hAsync("calcite-action-menu", { expanded: expanded, flipPlacements: ["left", "right"], label: messages.more, onCalciteActionMenuOpen: this.setMenuOpen, open: menuOpen, overlayPositioning: overlayPositioning, placement: layout === "horizontal" ? "bottom-start" : "leading-start", scale: scale }, hAsync("calcite-action", { icon: ICONS$j.menu, scale: scale, slot: SLOTS$v.trigger, text: messages.more, textEnabled: expanded }), hAsync("slot", { name: SLOTS$w.menuActions }), this.renderTooltip())) : null;
+    const { expanded, menuOpen, scale, layout, messages, overlayPositioning, hasMenuActions } = this;
+    return (hAsync("calcite-action-menu", { expanded: expanded, flipPlacements: ["left", "right"], hidden: !hasMenuActions, label: messages.more, onCalciteActionMenuOpen: this.setMenuOpen, open: menuOpen, overlayPositioning: overlayPositioning, placement: layout === "horizontal" ? "bottom-start" : "leading-start", scale: scale }, hAsync("calcite-action", { icon: ICONS$j.menu, scale: scale, slot: SLOTS$v.trigger, text: messages.more, textEnabled: expanded }), hAsync("slot", { name: SLOTS$w.menuActions, onSlotchange: this.handleMenuActionsSlotChange }), hAsync("slot", { name: SLOTS$w.menuTooltip, slot: SLOTS$v.tooltip })));
   }
   render() {
     return (hAsync(Fragment, null, hAsync("slot", null), this.renderMenu()));
@@ -9922,6 +9918,7 @@ class ActionGroup {
       "messageOverrides": [1040],
       "effectiveLocale": [32],
       "defaultMessages": [32],
+      "hasMenuActions": [32],
       "setFocus": [64]
     },
     "$listeners$": undefined,
@@ -10269,6 +10266,10 @@ class ActionPad {
       const groups = slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-action-group"));
       this.setGroupLayout(groups);
     };
+    this.handleTooltipSlotChange = (event) => {
+      const tooltips = slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-tooltip"));
+      this.expandTooltip = tooltips[0];
+    };
     this.expandDisabled = false;
     this.expanded = false;
     this.layout = "vertical";
@@ -10276,6 +10277,7 @@ class ActionPad {
     this.scale = undefined;
     this.messages = undefined;
     this.messageOverrides = undefined;
+    this.expandTooltip = undefined;
     this.effectiveLocale = "";
     this.defaultMessages = undefined;
   }
@@ -10340,11 +10342,10 @@ class ActionPad {
   // --------------------------------------------------------------------------
   renderBottomActionGroup() {
     const { expanded, expandDisabled, messages, el, position, toggleExpand, scale, layout } = this;
-    const tooltip = getSlotted(el, SLOTS$t.expandTooltip);
-    const expandToggleNode = !expandDisabled ? (hAsync(ExpandToggle, { collapseText: messages.collapse, el: el, expandText: messages.expand, expanded: expanded, position: position, scale: scale, toggle: toggleExpand, tooltip: tooltip,
+    const expandToggleNode = !expandDisabled ? (hAsync(ExpandToggle, { collapseText: messages.collapse, el: el, expandText: messages.expand, expanded: expanded, position: position, scale: scale, toggle: toggleExpand, tooltip: this.expandTooltip,
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.setExpandToggleRef })) : null;
-    return expandToggleNode ? (hAsync("calcite-action-group", { class: CSS$12.actionGroupEnd, layout: layout, scale: scale }, hAsync("slot", { name: SLOTS$t.expandTooltip }), expandToggleNode)) : null;
+    return expandToggleNode ? (hAsync("calcite-action-group", { class: CSS$12.actionGroupEnd, layout: layout, scale: scale }, hAsync("slot", { name: SLOTS$t.expandTooltip, onSlotchange: this.handleTooltipSlotChange }), expandToggleNode)) : null;
   }
   render() {
     return (hAsync(Host, { onCalciteActionMenuOpen: this.actionMenuOpenHandler }, hAsync("div", { class: CSS$12.container }, hAsync("slot", { onSlotchange: this.handleDefaultSlotChange }), this.renderBottomActionGroup())));
@@ -10370,6 +10371,7 @@ class ActionPad {
       "scale": [513],
       "messages": [1040],
       "messageOverrides": [1040],
+      "expandTooltip": [32],
       "effectiveLocale": [32],
       "defaultMessages": [32],
       "setFocus": [64]
@@ -10411,9 +10413,14 @@ function emitImmediately(component, nonOpenCloseComponent = false) {
 function onToggleOpenCloseComponent(component, nonOpenCloseComponent = false) {
   readTask(() => {
     if (component.transitionEl) {
-      const allTransitionPropsArray = getComputedStyle(component.transitionEl).transition.split(" ");
-      const openTransitionPropIndex = allTransitionPropsArray.findIndex((item) => item === component.openTransitionProp);
-      const transitionDuration = allTransitionPropsArray[openTransitionPropIndex + 1];
+      const { transitionDuration: allDurations, transitionProperty: allProps } = getComputedStyle(component.transitionEl);
+      const allTransitionDurationsArray = allDurations.split(",");
+      const allTransitionPropsArray = allProps.split(",");
+      const openTransitionPropIndex = allTransitionPropsArray.indexOf(component.openTransitionProp);
+      const transitionDuration = allTransitionDurationsArray[openTransitionPropIndex] ??
+        /* Safari will have a single transition value if multiple props share it,
+        so we fall back to it if there's no matching prop duration */
+        allTransitionDurationsArray[0];
       if (transitionDuration === "0s") {
         emitImmediately(component, nonOpenCloseComponent);
         return;
@@ -10824,7 +10831,10 @@ function hexToRGB(hex, hasAlpha = false) {
     return null;
   }
   hex = hex.replace("#", "");
-  let r, g, b, a;
+  let r;
+  let g;
+  let b;
+  let a;
   const isShorthand = hex.length === 3 || hex.length === 4;
   if (isShorthand) {
     const [first, second, third, fourth] = hex.split("");
@@ -11053,7 +11063,7 @@ class Avatar {
     return `hsl(${hue}, 60%, ${l}%)`;
   }
   /**
-   * Use fullname or username to generate initials
+   * Use fullName or username to generate initials
    */
   generateInitials() {
     const { fullName, username } = this;
@@ -11710,7 +11720,7 @@ const HiddenFormInputSlot = ({ component, }) => {
  */
 const labelClickEvent = "calciteInternalLabelClick";
 const labelConnectedEvent = "calciteInternalLabelConnected";
-const labelDisconnectedEvent = "calciteInternaLabelDisconnected";
+const labelDisconnectedEvent = "calciteInternalLabelDisconnected";
 const labelTagName = "calcite-label";
 const onLabelClickMap = new WeakMap();
 const onLabelConnectedMap = new WeakMap();
@@ -13047,11 +13057,6 @@ class Checkbox {
     this.calciteInternalCheckboxBlur = createEvent(this, "calciteInternalCheckboxBlur", 6);
     this.calciteCheckboxChange = createEvent(this, "calciteCheckboxChange", 6);
     this.calciteInternalCheckboxFocus = createEvent(this, "calciteInternalCheckboxFocus", 6);
-    //--------------------------------------------------------------------------
-    //
-    //  Private Properties
-    //
-    //--------------------------------------------------------------------------
     this.checkedPath = "M5.5 12L2 8.689l.637-.636L5.5 10.727l8.022-7.87.637.637z";
     this.indeterminatePath = "M13 8v1H3V8z";
     this.getPath = () => this.indeterminate ? this.indeterminatePath : this.checked ? this.checkedPath : "";
@@ -13446,11 +13451,6 @@ class ChipGroup {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.calciteChipGroupSelect = createEvent(this, "calciteChipGroupSelect", 6);
-    //--------------------------------------------------------------------------
-    //
-    //  Private Properties
-    //
-    //--------------------------------------------------------------------------
     this.mutationObserver = createObserver();
     this.items = [];
     //--------------------------------------------------------------------------
@@ -18874,11 +18874,6 @@ class Combobox {
     this.calciteComboboxClose = createEvent(this, "calciteComboboxClose", 6);
     this.calciteComboboxBeforeOpen = createEvent(this, "calciteComboboxBeforeOpen", 6);
     this.calciteComboboxOpen = createEvent(this, "calciteComboboxOpen", 6);
-    //--------------------------------------------------------------------------
-    //
-    //  Private State/Props
-    //
-    //--------------------------------------------------------------------------
     this.placement = defaultMenuPlacement;
     this.internalValueChangeFlag = false;
     this.textInput = null;
@@ -22669,8 +22664,8 @@ function slopeSingle(p0, p1, m) {
  * Given two points and their tangent slopes,
  * calculate the bezier handle coordinates and return draw command.
  *
- * Translates Hermite Spline to Beziér curve:
- * stackoverflow.com/questions/42574940/
+ * Translates Hermite Spline to Bézier curve:
+ * https://stackoverflow.com/questions/42574940/
  *
  * @param p0
  * @param p1
@@ -22766,11 +22761,6 @@ const graphCss = "/*!@:host*/.sc-calcite-graph-h{display:block;block-size:100%}/
 class Graph {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    //--------------------------------------------------------------------------
-    //
-    //  Private State/Props
-    //
-    //--------------------------------------------------------------------------
     this.graphId = `calcite-graph-${guid()}`;
     this.resizeObserver = createObserver();
     this.data = [];
@@ -25000,7 +24990,7 @@ function connectFocusTrap(component, options) {
       return false;
     },
     ...options?.focusTrapOptions,
-    // the following options are not overrideable
+    // the following options are not overridable
     document: el.ownerDocument,
     tabbableOptions,
     trapStack: focusTrapStack,
@@ -35279,11 +35269,6 @@ class Popover {
     this.calcitePopoverClose = createEvent(this, "calcitePopoverClose", 6);
     this.calcitePopoverBeforeOpen = createEvent(this, "calcitePopoverBeforeOpen", 6);
     this.calcitePopoverOpen = createEvent(this, "calcitePopoverOpen", 6);
-    // --------------------------------------------------------------------------
-    //
-    //  Private Properties
-    //
-    // --------------------------------------------------------------------------
     this.mutationObserver = createObserver();
     this.guid = `calcite-popover-${guid()}`;
     this.openTransitionProp = "opacity";
@@ -35960,11 +35945,6 @@ class RadioButtonGroup {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.calciteRadioButtonGroupChange = createEvent(this, "calciteRadioButtonGroupChange", 6);
-    // --------------------------------------------------------------------------
-    //
-    //  Private Properties
-    //
-    // --------------------------------------------------------------------------
     this.mutationObserver = createObserver();
     //--------------------------------------------------------------------------
     //
@@ -37354,6 +37334,9 @@ class ShellPanel {
       this.actionBars = actionBars;
       this.setActionBarsLayout(actionBars);
     };
+    this.handleHeaderSlotChange = (event) => {
+      this.hasHeader = slotChangeHasAssignedElement(event);
+    };
     this.collapsed = false;
     this.detached = false;
     this.displayMode = "dock";
@@ -37369,6 +37352,7 @@ class ShellPanel {
     this.contentHeight = null;
     this.defaultMessages = undefined;
     this.effectiveLocale = "";
+    this.hasHeader = false;
   }
   handleDetached(value) {
     if (value) {
@@ -37424,9 +37408,7 @@ class ShellPanel {
   //
   // --------------------------------------------------------------------------
   renderHeader() {
-    const { el } = this;
-    const hasHeader = getSlotted(el, SLOTS$6.header);
-    return hasHeader ? (hAsync("div", { class: CSS$d.contentHeader, key: "header" }, hAsync("slot", { name: SLOTS$6.header }))) : null;
+    return (hAsync("div", { class: CSS$d.contentHeader, hidden: !this.hasHeader, key: "header" }, hAsync("slot", { name: SLOTS$6.header, onSlotchange: this.handleHeaderSlotChange })));
   }
   render() {
     const { collapsed, position, initialContentWidth, initialContentHeight, contentWidth, contentWidthMax, contentWidthMin, contentHeight, contentHeightMax, contentHeightMin, resizable, layout, displayMode, } = this;
@@ -37564,7 +37546,8 @@ class ShellPanel {
       "contentWidth": [32],
       "contentHeight": [32],
       "defaultMessages": [32],
-      "effectiveLocale": [32]
+      "effectiveLocale": [32],
+      "hasHeader": [32]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -38840,11 +38823,6 @@ class Stepper {
     registerInstance(this, hostRef);
     this.calciteStepperItemChange = createEvent(this, "calciteStepperItemChange", 6);
     this.calciteInternalStepperItemChange = createEvent(this, "calciteInternalStepperItemChange", 6);
-    //--------------------------------------------------------------------------
-    //
-    //  Private State/Props
-    //
-    //--------------------------------------------------------------------------
     this.itemMap = new Map();
     /** list of sorted Stepper items */
     this.items = [];
@@ -39757,11 +39735,6 @@ class TabTitle {
     this.closeClickHandler = () => {
       this.closeTabTitleAndNotify();
     };
-    //--------------------------------------------------------------------------
-    //
-    //  Private State/Props
-    //
-    //--------------------------------------------------------------------------
     /** watches for changing text content */
     this.mutationObserver = createObserver();
     this.resizeObserver = createObserver();
@@ -40358,12 +40331,12 @@ class TextArea {
     }
   }
   setTextAreaHeight() {
-    const { textAreaHeight, elHeight, footerHeight } = this.getHeightandWidthOfElements();
+    const { textAreaHeight, elHeight, footerHeight } = this.getHeightAndWidthOfElements();
     if (footerHeight > 0 && textAreaHeight + footerHeight != elHeight) {
       this.textAreaEl.style.height = `${elHeight - footerHeight}px`;
     }
   }
-  getHeightandWidthOfElements() {
+  getHeightAndWidthOfElements() {
     const { height: textAreaHeight, width: textAreaWidth } = this.textAreaEl.getBoundingClientRect();
     const { height: elHeight, width: elWidth } = this.el.getBoundingClientRect();
     const { height: footerHeight, width: footerWidth } = this.footerEl?.getBoundingClientRect();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.6.1-next.0",
+  "version": "1.6.1-next.2",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -58,7 +58,8 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Esri/calcite-design-system.git"
+    "url": "git+https://github.com/Esri/calcite-design-system.git",
+    "directory": "packages/calcite-components"
   },
   "dependencies": {
     "@floating-ui/dom": "1.5.1",
@@ -74,8 +75,8 @@
   },
   "devDependencies": {
     "@esri/calcite-design-tokens": "1.0.0",
-    "@esri/calcite-ui-icons": "3.23.3",
-    "@esri/eslint-plugin-calcite-components": "^0.2.3-next.3",
+    "@esri/calcite-ui-icons": "3.23.7",
+    "@esri/eslint-plugin-calcite-components": "^0.2.3-next.4",
     "@stencil-community/eslint-plugin": "0.5.0",
     "@stencil/postcss": "2.1.0",
     "@stencil/react-output-target": "0.5.3",
@@ -86,5 +87,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "d829eda1b82cac7cfa62b9616d05072caead1ca5"
+  "gitHead": "07ee44eacc0866899fa532fd214cd69d76e63412"
 }

package/dist/calcite/p-062744e6.js

@@ -1,6 +0,0 @@
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1-next.0
- */
-import{g as n}from"./p-f15d9496.js";import{g as t}from"./p-f8771181.js";const s={};function o(){throw new Error("could not fetch component message bundle")}function c(n){n.messages={...n.defaultMessages,...n.messageOverrides}}async function a(n){n.defaultMessages=await i(n,n.effectiveLocale),c(n)}async function i(c,a){const{el:i}=c,e=i.tagName.toLowerCase().replace("calcite-","");return async function(t,c){const a=`${c}_${t}`;return s[a]||(s[a]=fetch(n(`./assets/${c}/t9n/messages_${t}.json`)).then((n=>(n.ok||o(),n.json()))).catch((()=>o()))),s[a]}(t(a,"t9n"),e)}async function e(n,t){n.defaultMessages=await i(n,t),c(n)}function f(n){n.onMessagesChange=r}function u(n){n.onMessagesChange=void 0}function r(){c(this)}export{f as c,u as d,a as s,e as u}

package/dist/calcite/p-06fe0cab.js

@@ -1,6 +0,0 @@
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1-next.0
- */
-import{q as t,c as n}from"./p-061d179e.js";const e="calciteInternalLabelClick",c="calciteInternalLabelConnected",o="calciteInternaLabelDisconnected",s="calcite-label",i=new WeakMap,a=new WeakMap,u=new WeakMap,r=new Set;function l(l){const f=(e=>{const{id:c}=e,o=c&&t(e,{selector:`${s}[for="${c}"]`});if(o)return o;const i=n(e,s);return!i||function(t,n){let e;const c="custom-element-ancestor-check",o=c=>{c.stopImmediatePropagation();const o=c.composedPath();e=o.slice(o.indexOf(n),o.indexOf(t))};return t.addEventListener(c,o,{once:!0}),n.dispatchEvent(new CustomEvent(c,{composed:!0,bubbles:!0})),t.removeEventListener(c,o),e.filter((e=>e!==n&&e!==t)).filter((t=>t.tagName?.includes("-"))).length>0}(i,e)?null:i})(l.el);if(i.has(f)||!f&&r.has(l))return;const d=b.bind(l);if(f){l.labelEl=f;const t=m.bind(l);i.set(l.labelEl,t),l.labelEl.addEventListener(e,t),r.delete(l),document.removeEventListener(c,a.get(l)),u.set(l,d),document.addEventListener(o,d)}else r.has(l)||(d(),document.removeEventListener(o,u.get(l)))}function f(t){if(r.delete(t),document.removeEventListener(c,a.get(t)),document.removeEventListener(o,u.get(t)),a.delete(t),u.delete(t),!t.labelEl)return;const n=i.get(t.labelEl);t.labelEl.removeEventListener(e,n),i.delete(t.labelEl)}function d(t){return t.label||t.labelEl?.textContent?.trim()||""}function m(t){this.disabled||this.el.contains(t.detail.sourceEvent.target)||this.onLabelClick(t)}function h(){r.has(this)&&l(this)}function b(){r.add(this);const t=a.get(this)||h.bind(this);a.set(this,t),document.addEventListener(c,t)}export{o as a,l as c,f as d,d as g,c as l}

package/dist/calcite/p-1d92ff6e.entry.js

@@ -1,6 +0,0 @@
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1-next.0
- */
-export{I as calcite_input_time_picker,T as calcite_time_picker}from"./p-cc588aa7.js";import"./p-f15d9496.js";import"./p-5028205f.js";import"./p-061d179e.js";import"./p-cc3a84bf.js";import"./p-62081d3a.js";import"./p-108c4959.js";import"./p-153861d6.js";import"./p-06fe0cab.js";import"./p-4a318ca6.js";import"./p-f8771181.js";import"./p-4841781f.js";import"./p-cf7a6122.js";import"./p-062744e6.js";

package/dist/calcite/p-3a955a5f.js

@@ -1,6 +0,0 @@
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1-next.0
- */
-import{e as t}from"./p-f15d9496.js";function n(t,n=!1){(n?t[t.transitionProp]:t.open)?t.onBeforeOpen():t.onBeforeClose(),(n?t[t.transitionProp]:t.open)?t.onOpen():t.onClose()}function i(i,o=!1){t((()=>{if(i.transitionEl){const s=getComputedStyle(i.transitionEl).transition.split(" "),r=s.findIndex((t=>t===i.openTransitionProp)),e=s[r+1];if("0s"===e)return void n(i,o);const c=setTimeout((()=>{i.transitionEl.removeEventListener("transitionstart",t),i.transitionEl.removeEventListener("transitionend",a),i.transitionEl.removeEventListener("transitioncancel",a),n(i,o)}),1e3*parseFloat(e));function t(n){n.propertyName===i.openTransitionProp&&n.target===i.transitionEl&&(clearTimeout(c),i.transitionEl.removeEventListener("transitionstart",t),(o?i[i.transitionProp]:i.open)?i.onBeforeOpen():i.onBeforeClose())}function a(t){t.propertyName===i.openTransitionProp&&t.target===i.transitionEl&&((o?i[i.transitionProp]:i.open)?i.onOpen():i.onClose(),i.transitionEl.removeEventListener("transitionend",a),i.transitionEl.removeEventListener("transitioncancel",a))}i.transitionEl.addEventListener("transitionstart",t),i.transitionEl.addEventListener("transitionend",a),i.transitionEl.addEventListener("transitioncancel",a)}}))}export{i as o}

package/dist/calcite/p-3b0ed2e8.entry.js

@@ -1,6 +0,0 @@
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1-next.0
- */
-import{r as t,c as i,h as s,H as e,a as o}from"./p-f15d9496.js";import{t as c}from"./p-061d179e.js";import{c as a,d as n,H as h}from"./p-5028205f.js";import{g as r}from"./p-cc3a84bf.js";import{c as l,d,u as p}from"./p-108c4959.js";import{i as u}from"./p-153861d6.js";import{c as b,d as m,g as v}from"./p-06fe0cab.js";import{c as g,s as k,a as f}from"./p-4a318ca6.js";import"./p-62081d3a.js";const x=class{constructor(s){t(this,s),this.calciteInternalCheckboxBlur=i(this,"calciteInternalCheckboxBlur",6),this.calciteCheckboxChange=i(this,"calciteCheckboxChange",6),this.calciteInternalCheckboxFocus=i(this,"calciteInternalCheckboxFocus",6),this.checkedPath="M5.5 12L2 8.689l.637-.636L5.5 10.727l8.022-7.87.637.637z",this.indeterminatePath="M13 8v1H3V8z",this.getPath=()=>this.indeterminate?this.indeterminatePath:this.checked?this.checkedPath:"",this.toggle=()=>{this.disabled||(this.checked=!this.checked,this.setFocus(),this.indeterminate=!1,this.calciteCheckboxChange.emit())},this.keyDownHandler=t=>{u(t.key)&&(this.toggle(),t.preventDefault())},this.clickHandler=()=>{this.disabled||this.toggle()},this.onToggleBlur=()=>{this.calciteInternalCheckboxBlur.emit(!1)},this.onToggleFocus=()=>{this.calciteInternalCheckboxFocus.emit(!0)},this.onLabelClick=()=>{this.toggle()},this.checked=!1,this.disabled=!1,this.form=void 0,this.guid=void 0,this.hovered=!1,this.indeterminate=!1,this.label=void 0,this.name=void 0,this.required=!1,this.scale="m",this.value=void 0}async setFocus(){await g(this),this.toggleEl?.focus()}syncHiddenFormInput(t){t.type="checkbox"}connectedCallback(){this.guid=this.el.id||`calcite-checkbox-${r()}`,l(this),b(this),a(this)}disconnectedCallback(){d(this),m(this),n(this)}componentWillLoad(){k(this)}componentDidLoad(){f(this)}componentDidRender(){p(this)}render(){return s(e,{onClick:this.clickHandler,onKeyDown:this.keyDownHandler},s("div",{"aria-checked":c(this.checked),"aria-label":v(this),class:"toggle",onBlur:this.onToggleBlur,onFocus:this.onToggleFocus,role:"checkbox",tabIndex:this.disabled?void 0:0,ref:t=>this.toggleEl=t},s("svg",{"aria-hidden":"true",class:"check-svg",viewBox:"0 0 16 16"},s("path",{d:this.getPath()})),s("slot",null)),s(h,{component:this}))}get el(){return o(this)}};x.style=":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]){--calcite-checkbox-size:0.75rem}:host([scale=m]){--calcite-checkbox-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-checkbox-size:1rem}:host{position:relative;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host .check-svg,:host .toggle{inline-size:var(--calcite-checkbox-size);block-size:var(--calcite-checkbox-size)}:host .check-svg{pointer-events:none;box-sizing:border-box;display:block;overflow:hidden;background-color:var(--calcite-ui-foreground-1);fill:currentColor;stroke:currentColor;stroke-width:1;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input);color:var(--calcite-ui-background)}:host([checked]) .check-svg,:host([indeterminate]) .check-svg{background-color:var(--calcite-ui-brand);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand)}:host([hovered]) .toggle .check-svg,:host .toggle:hover .check-svg{box-shadow:inset 0 0 0 2px var(--calcite-ui-brand)}.toggle{outline-color:transparent}.toggle:active,.toggle:focus,.toggle:focus-visible{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";export{x as calcite_checkbox}

package/dist/calcite/p-58da84a5.entry.js

@@ -1,6 +0,0 @@
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1-next.0
- */
-import{r as t,c as o,h as a,H as i,a as e}from"./p-f15d9496.js";import{c as s,d as r}from"./p-ec437265.js";import{s as n,g as c}from"./p-061d179e.js";import{s as d,a as l,c as p}from"./p-4a318ca6.js";import{c as h,d as u}from"./p-f8771181.js";import{u as x,c as g,d as m,s as b}from"./p-062744e6.js";import{t as f,E as w}from"./p-1fc71a18.js";import{c as v}from"./p-4841781f.js";import"./p-cc3a84bf.js";import"./p-62081d3a.js";import"./p-153861d6.js";import"./p-0308d74d.js";import"./p-e3e76eb2.js";const y="expand-tooltip",j=class{constructor(a){t(this,a),this.calciteActionPadToggle=o(this,"calciteActionPadToggle",6),this.mutationObserver=v("mutation",(()=>this.setGroupLayout(Array.from(this.el.querySelectorAll("calcite-action-group"))))),this.actionMenuOpenHandler=t=>{if(t.target.menuOpen){const o=t.composedPath();Array.from(this.el.querySelectorAll("calcite-action-group")).forEach((t=>{o.includes(t)||(t.menuOpen=!1)}))}},this.toggleExpand=()=>{this.expanded=!this.expanded,this.calciteActionPadToggle.emit()},this.setExpandToggleRef=t=>{this.expandToggleEl=t},this.handleDefaultSlotChange=t=>{const o=n(t).filter((t=>t?.matches("calcite-action-group")));this.setGroupLayout(o)},this.expandDisabled=!1,this.expanded=!1,this.layout="vertical",this.position=void 0,this.scale=void 0,this.messages=void 0,this.messageOverrides=void 0,this.effectiveLocale="",this.defaultMessages=void 0}expandedHandler(t){f({el:this.el,expanded:t})}layoutHandler(){this.updateGroups()}onMessagesChange(){}effectiveLocaleChange(){x(this,this.effectiveLocale)}connectedCallback(){s(this),h(this),g(this)}disconnectedCallback(){u(this),m(this),r(this)}async componentWillLoad(){d(this);const{el:t,expanded:o}=this;f({el:t,expanded:o}),await b(this)}componentDidLoad(){l(this)}async setFocus(){await p(this),this.el?.focus()}updateGroups(){this.setGroupLayout(Array.from(this.el.querySelectorAll("calcite-action-group")))}setGroupLayout(t){t.forEach((t=>t.layout=this.layout))}renderBottomActionGroup(){const{expanded:t,expandDisabled:o,messages:i,el:e,position:s,toggleExpand:r,scale:n,layout:d}=this,l=c(e,y),p=o?null:a(w,{collapseText:i.collapse,el:e,expandText:i.expand,expanded:t,position:s,scale:n,toggle:r,tooltip:l,ref:this.setExpandToggleRef});return p?a("calcite-action-group",{class:"action-group--end",layout:d,scale:n},a("slot",{name:y}),p):null}render(){return a(i,{onCalciteActionMenuOpen:this.actionMenuOpenHandler},a("div",{class:"container"},a("slot",{onSlotchange:this.handleDefaultSlotChange}),this.renderBottomActionGroup()))}static get delegatesFocus(){return!0}static get assetsDirs(){return["assets"]}get el(){return e(this)}static get watchers(){return{expanded:["expandedHandler"],layout:["layoutHandler"],messageOverrides:["onMessagesChange"],effectiveLocale:["effectiveLocaleChange"]}}};j.style=":host{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{display:block}@keyframes in{0%{opacity:0}100%{opacity:1}}:host{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;border-radius:0.125rem;--calcite-action-pad-expanded-max-width:auto;background:transparent}:host([expanded][layout=vertical]) .container{max-inline-size:var(--calcite-action-pad-expanded-max-width)}::slotted(calcite-action-group){border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);padding-block:0px}.container{display:inline-flex;flex-direction:column;overflow-y:auto;border-radius:0.25rem;background-color:var(--calcite-ui-background);--tw-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);--tw-shadow-colored:0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.action-group--bottom{flex-grow:1;justify-content:flex-end;padding-block-end:0px}:host([layout=horizontal]) .container{flex-direction:row}:host([layout=horizontal]) .container .action-group--bottom{padding:0px}:host([layout=horizontal]) .container ::slotted(calcite-action-group){border-width:0px;padding:0px;border-inline-end-width:1px}::slotted(calcite-action-group:last-child){border-block-end-width:0px}:host([hidden]){display:none}[hidden]{display:none}";export{j as calcite_action_pad}

package/dist/calcite/p-7c181728.entry.js

@@ -1,6 +0,0 @@
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1-next.0
- */
-import{r as t,h as a,a as i}from"./p-f15d9496.js";import{c as e}from"./p-4841781f.js";import{c as s,s as n,a as o}from"./p-4a318ca6.js";const r=class{constructor(a){t(this,a),this.itemMutationObserver=e("mutation",(()=>this.updateFlowProps())),this.getFlowDirection=(t,a)=>t&&a>1||t>1?a<t?"retreating":"advancing":null,this.updateFlowProps=()=>{const{el:t,items:a}=this,i=Array.from(t.querySelectorAll("calcite-flow-item")).filter((a=>a.closest("calcite-flow")===t)),e=a.length,s=i.length,n=i[s-1],o=i[s-2];if(s&&n&&i.forEach((t=>{t.showBackButton=t===n&&s>1,t.hidden=t!==n})),o&&(o.menuOpen=!1),this.items=i,e!==s){const t=this.getFlowDirection(e,s);this.itemCount=s,this.flowDirection=t}},this.flowDirection=null,this.itemCount=0,this.items=[]}async back(){const{items:t}=this,a=t[t.length-1];if(!a)return;const i=a.beforeBack?a.beforeBack:()=>Promise.resolve();return await i.call(a),a.remove(),a}async setFocus(){await s(this);const{items:t}=this;return t[t.length-1]?.setFocus()}connectedCallback(){this.itemMutationObserver?.observe(this.el,{childList:!0,subtree:!0}),this.updateFlowProps()}async componentWillLoad(){n(this)}componentDidLoad(){o(this)}disconnectedCallback(){this.itemMutationObserver?.disconnect()}async handleItemBackClick(){return await this.back(),this.setFocus()}render(){const{flowDirection:t}=this;return a("div",{class:{frame:!0,"frame--advancing":"advancing"===t,"frame--retreating":"retreating"===t}},a("slot",null))}get el(){return i(this)}};r.style=":host{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{position:relative;display:flex;inline-size:100%;flex:1 1 auto;align-items:stretch;overflow:hidden;background-color:transparent}:host .frame{position:relative;margin:0px;display:flex;inline-size:100%;flex:1 1 auto;flex-direction:column;align-items:stretch;padding:0px}:host ::slotted(calcite-flow-item),:host ::slotted(calcite-panel){block-size:100%}:host ::slotted(.calcite-match-height:last-child){display:flex;flex:1 1 auto;overflow:hidden}:host .frame--advancing{animation:calcite-frame-advance var(--calcite-animation-timing)}:host .frame--retreating{animation:calcite-frame-retreat var(--calcite-animation-timing)}@keyframes calcite-frame-advance{0%{--tw-bg-opacity:0.5;transform:translate3d(50px, 0, 0)}100%{--tw-bg-opacity:1;transform:translate3d(0, 0, 0)}}@keyframes calcite-frame-retreat{0%{--tw-bg-opacity:0.5;transform:translate3d(-50px, 0, 0)}100%{--tw-bg-opacity:1;transform:translate3d(0, 0, 0)}}:host([hidden]){display:none}[hidden]{display:none}";export{r as calcite_flow}

package/dist/calcite/p-88324d7d.entry.js

@@ -1,6 +0,0 @@
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1-next.0
- */
-import{r as t,c as i,h as n,F as e,H as o,a}from"./p-f15d9496.js";import{e as s}from"./p-061d179e.js";import{c as r,s as l,a as c}from"./p-4a318ca6.js";import"./p-cc3a84bf.js";import"./p-62081d3a.js";const h="hide",d="logo",u="user",m="progress",v="navigation-secondary",g="navigation-tertiary",p=class{constructor(n){t(this,n),this.calciteNavigationActionSelect=i(this,"calciteNavigationActionSelect",6),this.actionClickHandler=()=>{this.calciteNavigationActionSelect.emit()},this.handleUserSlotChange=t=>{this.isPrimaryLevel()&&(this.userSlotHasElements=s(t))},this.handleLogoSlotChange=t=>{this.isPrimaryLevel()&&(this.logoSlotHasElements=s(t))},this.handleContentStartSlotChange=t=>{this.isPrimaryLevel()&&(this.primaryContentStartSlotHasElements=s(t))},this.handleContentEndSlotChange=t=>{this.isPrimaryLevel()&&(this.primaryContentEndSlotHasElements=s(t))},this.handleContentCenterSlotChange=t=>{this.isPrimaryLevel()&&(this.primaryContentCenterSlotHasElements=s(t))},this.handleSecondarySlotChange=t=>{this.secondarySlotHasElements=s(t)},this.handleTertiarySlotChange=t=>{this.tertiarySlotHasElements=s(t)},this.handleMenuActionSlotChange=t=>{this.isPrimaryLevel()&&(this.navigationActionSlotHasElements=s(t),this.navigationActionSlotHasElements&&(this.navigationAction=!1))},this.handleProgressSlotChange=t=>{this.isPrimaryLevel()&&(this.progressSlotHasElement=s(t))},this.label=void 0,this.navigationAction=!1,this.logoSlotHasElements=void 0,this.navigationActionSlotHasElements=void 0,this.primaryContentCenterSlotHasElements=void 0,this.primaryContentEndSlotHasElements=void 0,this.primaryContentStartSlotHasElements=void 0,this.progressSlotHasElement=void 0,this.secondarySlotHasElements=void 0,this.tertiarySlotHasElements=void 0,this.userSlotHasElements=void 0}async setFocus(){return await r(this),this.navigationActionEl?.setFocus()}componentWillLoad(){l(this)}componentDidLoad(){c(this)}isPrimaryLevel(){return this.el.slot!==v&&this.el.slot!==g}renderMenuAction(){return n("slot",{name:"navigation-action",onSlotchange:this.handleMenuActionSlotChange},this.navigationAction&&n("calcite-action",{icon:"hamburger",onClick:this.actionClickHandler,text:this.label,ref:t=>this.navigationActionEl=t}))}render(){const t=this.el.slot;return n(o,null,n("div",{class:{container:!0,secondary:t===v,tertiary:t===g,primary:this.logoSlotHasElements||this.userSlotHasElements||this.navigationActionSlotHasElements||this.primaryContentCenterSlotHasElements||this.primaryContentEndSlotHasElements||this.primaryContentStartSlotHasElements||this.navigationAction}},n("div",{class:{[h]:!this.progressSlotHasElement,[m]:!0}},n("slot",{name:m,onSlotchange:this.handleProgressSlotChange})),n("div",{class:{"container-content":!0,"progress-bar":this.progressSlotHasElement}},this.renderMenuAction(),n("div",{class:{[h]:!this.logoSlotHasElements,[d]:!0}},n("slot",{name:d,onSlotchange:this.handleLogoSlotChange})),n("slot",{name:"content-start",onSlotchange:this.handleContentStartSlotChange}),n("slot",{name:"content-center",onSlotchange:this.handleContentCenterSlotChange}),n("slot",{name:"content-end",onSlotchange:this.handleContentEndSlotChange}),n("div",{class:{[h]:!this.userSlotHasElements,[u]:!0}},n("slot",{name:u,onSlotchange:this.handleUserSlotChange})))),n(e,null,n("slot",{name:v,onSlotchange:this.handleSecondarySlotChange}),n("slot",{name:g,onSlotchange:this.handleTertiarySlotChange})))}get el(){return a(this)}};p.style=":host([hidden]){display:none}[hidden]{display:none}.container{margin-inline:auto;display:flex;inline-size:100%;flex-direction:column;margin-block:0;margin-inline:auto;background-color:var(--calcite-navigation-background, var(--calcite-ui-foreground-1))}.container.primary,.container.secondary,.container.tertiary{border-block-end:1px solid;border-block-end-color:var(--calcite-navigation-border-color, var(--calcite-ui-border-3))}.user,.logo{display:flex}.hide{display:none}.primary{block-size:4rem}.secondary{block-size:3rem}.tertiary{block-size:3rem}.container-content{margin-inline:auto;display:flex;block-size:100%;inline-size:100%;margin-block:0;inline-size:var(--calcite-navigation-width, 100%);max-inline-size:100%}.container-content.progress-bar{margin-block-start:0.125rem}slot[name]{display:flex;flex-direction:row}slot[name=navigation-secondary]::slotted(calcite-navigation),slot[name=navigation-tertiary]::slotted(calcite-navigation){inline-size:100%}slot[name=content-start]::slotted(*),slot[name=content-center]::slotted(*),slot[name=content-end]::slotted(*){display:flex;flex-direction:row;align-items:center}slot[name=progress],slot[name=progress] calcite-progress{inset-block-start:0;inset-inline:0}slot[name=content-end]{margin-inline-start:auto}slot[name=content-start]{margin-inline-end:auto}slot[name=content-end],slot[name=logo]~slot[name=user],slot[name=user]:only-child{margin-inline-start:auto}slot[name=content-center]{margin-inline-start:auto;margin-inline-end:auto}slot[name=content-start]~slot[name=content-center]{margin-inline-start:0px}slot[name=content-start]~slot[name=content-end],slot[name=content-center]~slot[name=content-end],slot[name=content-center]~slot[name=user],slot[name=content-end]~slot[name=user]{margin:0px}";const f="heading",x="description",b=class{constructor(i){t(this,i),this.active=void 0,this.href=void 0,this.label=void 0,this.rel=void 0,this.description=void 0,this.target=void 0,this.heading=void 0,this.thumbnail=void 0}async setFocus(){await r(this),this.href&&this.el.focus()}componentWillLoad(){l(this)}componentDidLoad(){c(this)}render(){const{heading:t,description:i,thumbnail:e}=this;return n(o,null,n("a",{class:"anchor",href:this.href,rel:this.rel,target:this.target},e&&n("img",{alt:this.label||"",class:"image",src:e}),(t||i)&&n("div",{class:"container"},t&&n("span",{"aria-label":this.heading,class:{[f]:!0,standalone:!this.description},key:f},t),i&&n("span",{"aria-label":this.description,class:x,key:x},i))))}static get delegatesFocus(){return!0}get el(){return a(this)}};b.style=":host{display:inline-flex;outline:2px solid transparent;outline-offset:2px}.anchor{margin:0px;display:flex;cursor:pointer;align-items:center;justify-content:center;font-size:var(--calcite-font-size-0);line-height:1.25rem;text-decoration-line:none;outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-block-end:2px solid transparent}.anchor:hover,.anchor:focus{background-color:var(--calcite-ui-foreground-2)}.anchor:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}.anchor:active{background-color:var(--calcite-ui-foreground-3)}.image{margin:0px;display:flex;block-size:1.75rem;padding-inline:1rem}.image~.container{padding-inline-start:0px}:host(:active) .anchor{color:var(--calcite-ui-text-1)}:host([active]) .anchor{color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-brand);--calcite-ui-icon-color:var(--calcite-ui-brand)}.container{margin-block-start:0.125rem;display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:1rem;text-align:start}.heading{margin-inline-start:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}.standalone{font-size:var(--calcite-font-size-1)}.description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host([hidden]){display:none}[hidden]{display:none}";const y="full-name",k="username",z=class{constructor(i){t(this,i),this.active=void 0,this.fullName=void 0,this.label=void 0,this.textDisabled=!1,this.thumbnail=void 0,this.userId=void 0,this.username=void 0}async setFocus(){await r(this),this.el.focus()}componentWillLoad(){l(this)}componentDidLoad(){c(this)}render(){return n(o,null,n("button",{"aria-label":this.label,class:"button"},n("calcite-avatar",{"full-name":this.fullName,label:this.label,thumbnail:this.thumbnail,"user-id":this.userId,username:this.username}),(this.fullName||this.username)&&!this.textDisabled&&n("div",{class:"text-container"},this.fullName&&n("span",{class:y,key:y},this.fullName),this.username&&n("span",{class:k,key:k},this.username))))}static get delegatesFocus(){return!0}get el(){return a(this)}};z.style=":host{display:inline-flex;outline:2px solid transparent;outline-offset:2px}:host .button{background-color:transparent;border:none;margin:0px;display:flex;cursor:pointer;align-items:center;justify-content:center;font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size-0);line-height:1.25rem;outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-block-end:2px solid transparent}:host(:hover) .button,:host(:focus) .button{background-color:var(--calcite-ui-foreground-2)}:host(:focus) .button{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}:host(:active) .button{background-color:var(--calcite-ui-foreground-3);color:var(--calcite-ui-text-1)}calcite-avatar{padding-inline:1rem}calcite-avatar~.text-container{padding-inline-start:0px}:host([active]) .button{border-color:var(--calcite-ui-brand);color:var(--calcite-ui-text-1);--calcite-ui-icon-color:var(--calcite-ui-brand)}.text-container{margin-block-start:0.125rem;display:flex;flex-direction:column;padding-inline:1rem;text-align:start}.full-name{margin-inline-start:0px;font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}.username{color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host([hidden]){display:none}[hidden]{display:none}";export{p as calcite_navigation,b as calcite_navigation_logo,z as calcite_navigation_user}