@esri/calcite-components 1.0.0-beta.93 → 1.0.0-beta.94

package/dist/cjs/calcite-action-pad.cjs.entry.js

@@ -1,137 +1,137 @@
 /*!
  * 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.93
+ * v1.0.0-beta.94
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-afcc8e68.js');
-const ExpandToggle = require('./ExpandToggle-b2290d64.js');
-const dom = require('./dom-9d34fe95.js');
-const conditionalSlot = require('./conditionalSlot-06657c5b.js');
-require('./resources-4b7ed703.js');
-require('./resources-2de8b619.js');
-require('./resources-96e885bd.js');
-require('./guid-d157229c.js');
-require('./observers-70ca1a5f.js');
+const index = require('./index-1dbd01a1.js');
+const ExpandToggle = require('./ExpandToggle-6a0c6592.js');
+const dom = require('./dom-72e6c4dd.js');
+const conditionalSlot = require('./conditionalSlot-6019633f.js');
+require('./resources-8e0523cb.js');
+require('./resources-95894101.js');
+require('./resources-ed85e818.js');
+require('./guid-938d9fa3.js');
+require('./observers-b128b31a.js');
 
-const CSS = {
-  actionGroupBottom: "action-group--bottom",
-  container: "container"
-};
-const TEXT = {
-  expand: "Expand",
-  collapse: "Collapse"
-};
-const SLOTS = {
-  expandTooltip: "expand-tooltip"
+const CSS = {
+  actionGroupBottom: "action-group--bottom",
+  container: "container"
+};
+const TEXT = {
+  expand: "Expand",
+  collapse: "Collapse"
+};
+const SLOTS = {
+  expandTooltip: "expand-tooltip"
 };
 
 const actionPadCss = "@-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}:host{-webkit-box-sizing:border-box;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 *{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:block}@keyframes in{0%{opacity:0}100%{opacity:1}}:host{-webkit-animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;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:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;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);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.action-group--bottom{-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:end;justify-content:flex-end;-webkit-padding-after:0px;padding-block-end:0px}:host([layout=horizontal]) .container{-ms-flex-direction:row;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}";
 
-const ActionPad = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.calciteActionPadToggle = index.createEvent(this, "calciteActionPadToggle", 6);
-    // --------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    // --------------------------------------------------------------------------
-    /**
-     * When true, the expand-toggling behavior is disabled.
-     */
-    this.expandDisabled = false;
-    /**
-     * When true, the component is expanded.
-     */
-    this.expanded = false;
-    /**
-     * Indicates the layout of the component.
-     */
-    this.layout = "vertical";
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    this.actionMenuOpenChangeHandler = (event) => {
-      if (event.detail) {
-        const composedPath = event.composedPath();
-        Array.from(this.el.querySelectorAll("calcite-action-group")).forEach((group) => {
-          if (!composedPath.includes(group)) {
-            group.menuOpen = false;
-          }
-        });
-      }
-    };
-    this.toggleExpand = () => {
-      this.expanded = !this.expanded;
-      this.calciteActionPadToggle.emit();
-    };
-    this.setExpandToggleRef = (el) => {
-      this.expandToggleEl = el;
-    };
-  }
-  expandedHandler(expanded) {
-    ExpandToggle.toggleChildActionText({ parent: this.el, expanded });
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  // --------------------------------------------------------------------------
-  connectedCallback() {
-    conditionalSlot.connectConditionalSlotComponent(this);
-  }
-  disconnectedCallback() {
-    conditionalSlot.disconnectConditionalSlotComponent(this);
-  }
-  componentWillLoad() {
-    const { el, expanded } = this;
-    ExpandToggle.toggleChildActionText({ parent: el, expanded });
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Methods
-  //
-  // --------------------------------------------------------------------------
-  /**
-   * Sets focus on the component.
-   *
-   * @param focusId
-   */
-  async setFocus(focusId) {
-    var _a;
-    if (focusId === "expand-toggle") {
-      await dom.focusElement(this.expandToggleEl);
-      return;
-    }
-    (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Component Methods
-  //
-  // --------------------------------------------------------------------------
-  renderBottomActionGroup() {
-    const { expanded, expandDisabled, intlExpand, intlCollapse, el, position, toggleExpand, scale, layout } = this;
-    const tooltip = dom.getSlotted(el, SLOTS.expandTooltip);
-    const expandLabel = intlExpand || TEXT.expand;
-    const collapseLabel = intlCollapse || TEXT.collapse;
-    const expandToggleNode = !expandDisabled ? (index.h(ExpandToggle.ExpandToggle, { el: el, expanded: expanded, intlCollapse: collapseLabel, intlExpand: expandLabel, position: position, ref: this.setExpandToggleRef, scale: scale, toggle: toggleExpand, tooltip: tooltip })) : null;
-    return expandToggleNode ? (index.h("calcite-action-group", { class: CSS.actionGroupBottom, layout: layout, scale: scale }, index.h("slot", { name: SLOTS.expandTooltip }), expandToggleNode)) : null;
-  }
-  render() {
-    return (index.h(index.Host, { onCalciteActionMenuOpenChange: this.actionMenuOpenChangeHandler }, index.h("div", { class: CSS.container }, index.h("slot", null), this.renderBottomActionGroup())));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "expanded": ["expandedHandler"]
-  }; }
-};
+const ActionPad = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.calciteActionPadToggle = index.createEvent(this, "calciteActionPadToggle", 6);
+    // --------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    // --------------------------------------------------------------------------
+    /**
+     * When true, the expand-toggling behavior is disabled.
+     */
+    this.expandDisabled = false;
+    /**
+     * When true, the component is expanded.
+     */
+    this.expanded = false;
+    /**
+     * Indicates the layout of the component.
+     */
+    this.layout = "vertical";
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.actionMenuOpenChangeHandler = (event) => {
+      if (event.detail) {
+        const composedPath = event.composedPath();
+        Array.from(this.el.querySelectorAll("calcite-action-group")).forEach((group) => {
+          if (!composedPath.includes(group)) {
+            group.menuOpen = false;
+          }
+        });
+      }
+    };
+    this.toggleExpand = () => {
+      this.expanded = !this.expanded;
+      this.calciteActionPadToggle.emit();
+    };
+    this.setExpandToggleRef = (el) => {
+      this.expandToggleEl = el;
+    };
+  }
+  expandedHandler(expanded) {
+    ExpandToggle.toggleChildActionText({ parent: this.el, expanded });
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    conditionalSlot.connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    conditionalSlot.disconnectConditionalSlotComponent(this);
+  }
+  componentWillLoad() {
+    const { el, expanded } = this;
+    ExpandToggle.toggleChildActionText({ parent: el, expanded });
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Methods
+  //
+  // --------------------------------------------------------------------------
+  /**
+   * Sets focus on the component.
+   *
+   * @param focusId
+   */
+  async setFocus(focusId) {
+    var _a;
+    if (focusId === "expand-toggle") {
+      await dom.focusElement(this.expandToggleEl);
+      return;
+    }
+    (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Component Methods
+  //
+  // --------------------------------------------------------------------------
+  renderBottomActionGroup() {
+    const { expanded, expandDisabled, intlExpand, intlCollapse, el, position, toggleExpand, scale, layout } = this;
+    const tooltip = dom.getSlotted(el, SLOTS.expandTooltip);
+    const expandLabel = intlExpand || TEXT.expand;
+    const collapseLabel = intlCollapse || TEXT.collapse;
+    const expandToggleNode = !expandDisabled ? (index.h(ExpandToggle.ExpandToggle, { el: el, expanded: expanded, intlCollapse: collapseLabel, intlExpand: expandLabel, position: position, ref: this.setExpandToggleRef, scale: scale, toggle: toggleExpand, tooltip: tooltip })) : null;
+    return expandToggleNode ? (index.h("calcite-action-group", { class: CSS.actionGroupBottom, layout: layout, scale: scale }, index.h("slot", { name: SLOTS.expandTooltip }), expandToggleNode)) : null;
+  }
+  render() {
+    return (index.h(index.Host, { onCalciteActionMenuOpenChange: this.actionMenuOpenChangeHandler }, index.h("div", { class: CSS.container }, index.h("slot", null), this.renderBottomActionGroup())));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "expanded": ["expandedHandler"]
+  }; }
+};
 ActionPad.style = actionPadCss;
 
 exports.calcite_action_pad = ActionPad;

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

@@ -1,158 +1,172 @@
 /*!
  * 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.93
+ * v1.0.0-beta.94
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-afcc8e68.js');
-const observers = require('./observers-70ca1a5f.js');
-const interactive = require('./interactive-4157d28f.js');
-const dom = require('./dom-9d34fe95.js');
-require('./resources-96e885bd.js');
-require('./guid-d157229c.js');
+const index = require('./index-1dbd01a1.js');
+const observers = require('./observers-b128b31a.js');
+const interactive = require('./interactive-2c577d02.js');
+const dom = require('./dom-72e6c4dd.js');
+require('./resources-ed85e818.js');
+require('./guid-938d9fa3.js');
 
-const CSS = {
-  button: "button",
-  buttonTextVisible: "button--text-visible",
-  buttonCompact: "button--compact",
-  iconContainer: "icon-container",
-  slotContainer: "slot-container",
-  slotContainerHidden: "slot-container--hidden",
-  textContainer: "text-container",
-  textContainerVisible: "text-container--visible"
-};
-const TEXT = {
-  loading: "Loading"
+const CSS = {
+  button: "button",
+  buttonTextVisible: "button--text-visible",
+  buttonCompact: "button--compact",
+  iconContainer: "icon-container",
+  slotContainer: "slot-container",
+  slotContainerHidden: "slot-container--hidden",
+  textContainer: "text-container",
+  textContainerVisible: "text-container--visible"
+};
+const TEXT = {
+  loading: "Loading"
+};
+const SLOTS = {
+  tooltip: "tooltip"
 };
 
 const actionCss = "@-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}:host{-webkit-box-sizing:border-box;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 *{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}: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{display:-ms-flexbox;display:flex;background-color:transparent;--calcite-action-indicator-color:var(--calcite-ui-brand)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.button{position:relative;margin:0px;display:-ms-flexbox;display:flex;inline-size:auto;cursor:pointer;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;border-style:none;background-color:var(--calcite-ui-foreground-1);fill:var(--calcite-ui-text-3);font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-3);outline-color:transparent;text-align:unset;-ms-flex:1 0 auto;flex:1 0 auto}.button:hover{background-color:var(--calcite-ui-foreground-2);fill:var(--calcite-ui-text-1);color:var(--calcite-ui-text-1)}.button:focus{background-color:var(--calcite-ui-foreground-2);fill:var(--calcite-ui-text-1);color:var(--calcite-ui-text-1);outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.button:active{background-color:var(--calcite-ui-foreground-3)}.button .icon-container{pointer-events:none;margin:0px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-inline-size:1rem;min-block-size:1rem}.button .text-container{margin:0px;inline-size:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5rem;opacity:0;-webkit-transition-property:opacity;transition-property:opacity;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-property:margin;transition-property:margin;-webkit-transition-property:inline-size;transition-property:inline-size}.button .text-container--visible{inline-size:auto;-ms-flex:1 1 auto;flex:1 1 auto;opacity:1}:host([scale=s]) .button{padding-inline:0.5rem;padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=s]) .button--text-visible .icon-container{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}:host([scale=m]) .button{padding-inline:1rem;padding-block:0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=m]) .button--text-visible .icon-container{-webkit-margin-end:0.75rem;margin-inline-end:0.75rem}:host([scale=l]) .button{padding:1.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=l]) .button--text-visible .icon-container{-webkit-margin-end:1rem;margin-inline-end:1rem}:host([alignment=center]) .button{-ms-flex-pack:center;justify-content:center}:host([alignment=end]) .button{-ms-flex-pack:end;justify-content:flex-end}:host([alignment=center]) .button .text-container--visible,:host([alignment=end]) .button .text-container--visible{-ms-flex:0 1 auto;flex:0 1 auto}:host([scale=s][compact]) .button,:host([scale=m][compact]) .button,:host([scale=l][compact]) .button{padding-inline:0px}.slot-container{display:-ms-flexbox;display:flex}.slot-container--hidden{display:none}.button--text-visible{inline-size:100%}:host([active]) .button,:host([active]) .button:hover,:host([active]) .button:focus,:host([active][loading]) .button{background-color:var(--calcite-ui-foreground-3);fill:var(--calcite-ui-text-1);color:var(--calcite-ui-text-1)}:host([active]) .button:active{background-color:var(--calcite-ui-foreground-1)}:host([appearance=clear]) .button,:host([appearance=transparent]) .button{background-color:transparent;-webkit-transition-property:-webkit-box-shadow;transition-property:-webkit-box-shadow;transition-property:box-shadow;transition-property:box-shadow, -webkit-box-shadow;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host([appearance=clear]) .button:hover,:host([appearance=clear]) .button:focus,:host([appearance=transparent]) .button:hover,:host([appearance=transparent]) .button:focus{background-color:transparent;-webkit-box-shadow:0 0 0 2px var(--calcite-ui-border-1) inset;box-shadow:0 0 0 2px var(--calcite-ui-border-1) inset}:host([active][appearance=clear]) .button,:host([active][appearance=clear]) .button:hover,:host([active][appearance=clear]) .button:focus,:host([active][appearance=transparent]) .button,:host([active][appearance=transparent]) .button:hover,:host([active][appearance=transparent]) .button:focus{background-color:var(--calcite-ui-foreground-3);fill:var(--calcite-ui-text-1);color:var(--calcite-ui-text-1)}:host([appearance=clear][loading]) .button,:host([appearance=clear][disabled]) .button,:host([appearance=transparent][loading]) .button,:host([appearance=transparent][disabled]) .button{background-color:transparent}:host([loading]) .button,:host([loading]) .button:hover,:host([loading]) .button:focus{background-color:var(--calcite-ui-foreground-1)}:host([loading]) .button .text-container,:host([loading]) .button:hover .text-container,:host([loading]) .button:focus .text-container{opacity:var(--calcite-ui-opacity-disabled)}:host([loading]) calcite-loader[inline]{color:var(--calcite-ui-text-3);-webkit-margin-end:0px;margin-inline-end:0px}:host([disabled]) .button,:host([disabled]) .button:hover,:host([disabled]) .button:focus{cursor:default;background-color:var(--calcite-ui-foreground-1);opacity:var(--calcite-ui-opacity-disabled)}:host([disabled][active]) .button,:host([disabled][active]) .button:hover,:host([disabled][active]) .button:focus{background-color:var(--calcite-ui-foreground-3);opacity:var(--calcite-ui-opacity-disabled)}:host([indicator]) .button::after{content:\"\";position:absolute;block-size:0.5rem;inline-size:0.5rem;border-radius:9999px;border-width:2px;background-color:var(--calcite-action-indicator-color);border-color:var(--calcite-ui-foreground-1);inset-block-end:0.75rem;inset-inline-end:0.75rem}:host([indicator]) .button--text-visible::after{inset-block-end:auto}:host([indicator]) .button--text-visible .text-container--visible{-webkit-margin-end:1rem;margin-inline-end:1rem}:host([indicator]) .button:hover::after,:host([indicator]) .button:focus::after{border-color:var(--calcite-ui-foreground-1)}:host([indicator][scale=s]) .button::after{inset-block-end:0.25rem;inset-inline-end:0.25rem}:host([indicator][scale=s]) .button--text-visible::after{inset-block-end:auto;inset-inline-end:0.5rem}:host([indicator][active]) .button::after{border-color:var(--calcite-ui-foreground-3)}";
 
-const Action = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.calciteActionClick = index.createEvent(this, "calciteActionClick", 6);
-    // --------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    // --------------------------------------------------------------------------
-    /**
-     * When true, the component is highlighted.
-     */
-    this.active = false;
-    /** Specifies the appearance of the component. */
-    this.appearance = "solid";
-    /**
-     * When true, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`.
-     */
-    this.compact = false;
-    /**
-     * When true, interaction is prevented and the component is displayed with lower opacity.
-     */
-    this.disabled = false;
-    /**
-     * When true, indicates unread changes.
-     */
-    this.indicator = false;
-    /**
-     * Specifies the text label to display while loading.
-     *
-     * @default "Loading"
-     */
-    this.intlLoading = TEXT.loading;
-    /**
-     * When true, a busy indicator is displayed.
-     */
-    this.loading = false;
-    /**
-     * Specifies the size of the component.
-     */
-    this.scale = "m";
-    /**
-     * Indicates whether the text is displayed.
-     */
-    this.textEnabled = false;
-    this.mutationObserver = observers.createObserver("mutation", () => index.forceUpdate(this));
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    this.calciteActionClickHandler = () => {
-      if (!this.disabled) {
-        this.calciteActionClick.emit();
-      }
-    };
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  // --------------------------------------------------------------------------
-  connectedCallback() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-  }
-  componentDidRender() {
-    interactive.updateHostInteraction(this);
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Methods
-  //
-  // --------------------------------------------------------------------------
-  /** Sets focus on the component. */
-  async setFocus() {
-    var _a;
-    (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.focus();
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Render Methods
-  //
-  // --------------------------------------------------------------------------
-  renderTextContainer() {
-    const { text, textEnabled } = this;
-    const textContainerClasses = {
-      [CSS.textContainer]: true,
-      [CSS.textContainerVisible]: textEnabled
-    };
-    return text ? (index.h("div", { class: textContainerClasses, key: "text-container" }, text)) : null;
-  }
-  renderIconContainer() {
-    var _a;
-    const { loading, icon, scale, el, intlLoading } = this;
-    const iconScale = scale === "l" ? "m" : "s";
-    const loaderScale = scale === "l" ? "l" : "m";
-    const calciteLoaderNode = loading ? (index.h("calcite-loader", { active: true, inline: true, label: intlLoading, scale: loaderScale })) : null;
-    const calciteIconNode = icon ? index.h("calcite-icon", { icon: icon, scale: iconScale }) : null;
-    const iconNode = calciteLoaderNode || calciteIconNode;
-    const hasIconToDisplay = iconNode || ((_a = el.children) === null || _a === void 0 ? void 0 : _a.length);
-    const slotContainerNode = (index.h("div", { class: {
-        [CSS.slotContainer]: true,
-        [CSS.slotContainerHidden]: loading
-      } }, index.h("slot", null)));
-    return hasIconToDisplay ? (index.h("div", { "aria-hidden": "true", class: CSS.iconContainer, key: "icon-container" }, iconNode, slotContainerNode)) : null;
-  }
-  render() {
-    const { compact, disabled, loading, textEnabled, label, text } = this;
-    const ariaLabel = label || text;
-    const buttonClasses = {
-      [CSS.button]: true,
-      [CSS.buttonTextVisible]: textEnabled,
-      [CSS.buttonCompact]: compact
-    };
-    return (index.h(index.Host, { onClick: this.calciteActionClickHandler }, index.h("button", { "aria-busy": dom.toAriaBoolean(loading), "aria-disabled": dom.toAriaBoolean(disabled), "aria-label": ariaLabel, class: buttonClasses, disabled: disabled, ref: (buttonEl) => (this.buttonEl = buttonEl) }, this.renderIconContainer(), this.renderTextContainer())));
-  }
-  get el() { return index.getElement(this); }
-};
+const Action = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.calciteActionClick = index.createEvent(this, "calciteActionClick", 6);
+    // --------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    // --------------------------------------------------------------------------
+    /**
+     * When true, the component is highlighted.
+     */
+    this.active = false;
+    /** Specifies the appearance of the component. */
+    this.appearance = "solid";
+    /**
+     * When true, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`.
+     */
+    this.compact = false;
+    /**
+     * When true, interaction is prevented and the component is displayed with lower opacity.
+     */
+    this.disabled = false;
+    /**
+     * When true, indicates unread changes.
+     */
+    this.indicator = false;
+    /**
+     * Specifies the text label to display while loading.
+     *
+     * @default "Loading"
+     */
+    this.intlLoading = TEXT.loading;
+    /**
+     * When true, a busy indicator is displayed.
+     */
+    this.loading = false;
+    /**
+     * Specifies the size of the component.
+     */
+    this.scale = "m";
+    /**
+     * Indicates whether the text is displayed.
+     */
+    this.textEnabled = false;
+    this.mutationObserver = observers.createObserver("mutation", () => index.forceUpdate(this));
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.handleTooltipSlotChange = (event) => {
+      const tooltips = event.target
+        .assignedElements({
+        flatten: true
+      })
+        .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-tooltip"));
+      const tooltip = tooltips[0];
+      if (tooltip) {
+        tooltip.referenceElement = this.buttonEl;
+      }
+    };
+    this.calciteActionClickHandler = () => {
+      if (!this.disabled) {
+        this.calciteActionClick.emit();
+      }
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
+  componentDidRender() {
+    interactive.updateHostInteraction(this);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Methods
+  //
+  // --------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    var _a;
+    (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderTextContainer() {
+    const { text, textEnabled } = this;
+    const textContainerClasses = {
+      [CSS.textContainer]: true,
+      [CSS.textContainerVisible]: textEnabled
+    };
+    return text ? (index.h("div", { class: textContainerClasses, key: "text-container" }, text)) : null;
+  }
+  renderIconContainer() {
+    var _a;
+    const { loading, icon, scale, el, intlLoading } = this;
+    const iconScale = scale === "l" ? "m" : "s";
+    const loaderScale = scale === "l" ? "l" : "m";
+    const calciteLoaderNode = loading ? (index.h("calcite-loader", { active: true, inline: true, label: intlLoading, scale: loaderScale })) : null;
+    const calciteIconNode = icon ? index.h("calcite-icon", { icon: icon, scale: iconScale }) : null;
+    const iconNode = calciteLoaderNode || calciteIconNode;
+    const hasIconToDisplay = iconNode || ((_a = el.children) === null || _a === void 0 ? void 0 : _a.length);
+    const slotContainerNode = (index.h("div", { class: {
+        [CSS.slotContainer]: true,
+        [CSS.slotContainerHidden]: loading
+      } }, index.h("slot", null)));
+    return hasIconToDisplay ? (index.h("div", { "aria-hidden": "true", class: CSS.iconContainer, key: "icon-container" }, iconNode, slotContainerNode)) : null;
+  }
+  render() {
+    const { compact, disabled, loading, textEnabled, label, text } = this;
+    const ariaLabel = label || text;
+    const buttonClasses = {
+      [CSS.button]: true,
+      [CSS.buttonTextVisible]: textEnabled,
+      [CSS.buttonCompact]: compact
+    };
+    return (index.h(index.Host, { onClick: this.calciteActionClickHandler }, index.h("button", { "aria-busy": dom.toAriaBoolean(loading), "aria-disabled": dom.toAriaBoolean(disabled), "aria-label": ariaLabel, class: buttonClasses, disabled: disabled, ref: (buttonEl) => (this.buttonEl = buttonEl) }, this.renderIconContainer(), this.renderTextContainer()), index.h("slot", { name: SLOTS.tooltip, onSlotchange: this.handleTooltipSlotChange })));
+  }
+  get el() { return index.getElement(this); }
+};
 Action.style = actionCss;
 
 exports.calcite_action = Action;