@nectary/components 5.33.0 → 5.35.0

package/bundle.ts

@@ -28,6 +28,9 @@ export * from './file-drop/index.js'
 export * from './file-picker/index.js'
 export * from './file-status/index.js'
 export * from './flag/index.js'
+export * from './floating-panel/index.js'
+export * from './floating-panel-button/index.js'
+export * from './floating-panel-icon-button/index.js'
 export * from './grid-item/index.js'
 export * from './grid/index.js'
 export * from './help-tooltip/index.js'

package/button-group-item/index.js

@@ -14,7 +14,15 @@ class ButtonGroupItem extends NectaryElement {
     this.#$sinchButton = shadowRoot.querySelector("#sinch-button-element");
   }
   static get observedAttributes() {
-    return ["type", "size", "text", "disabled", "toggled"];
+    return [
+      // eslint-disable-next-line @nectary/observed-attribute-accessor -- baseline backlog: missing set type
+      "type",
+      // eslint-disable-next-line @nectary/observed-attribute-accessor -- baseline backlog: missing set size
+      "size",
+      "text",
+      "disabled",
+      "toggled"
+    ];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     updateAttribute(this.#$sinchButton, name, newVal);

package/card-v2/index.js

@@ -92,7 +92,12 @@ class CardV2 extends NectaryElement {
     }
   }
   static get observedAttributes() {
-    return ["clickable", "disabled", "selected"];
+    return [
+      // eslint-disable-next-line @nectary/observed-attribute-accessor -- baseline backlog: clickable missing set/get pair
+      "clickable",
+      "disabled",
+      "selected"
+    ];
   }
   attributeChangedCallback(name, _oldVal, newVal) {
     switch (name) {

package/date-picker/index.js

@@ -95,7 +95,9 @@ class DatePicker extends NectaryElement {
       "max",
       "locale",
       "range",
+      // eslint-disable-next-line @nectary/observed-attribute-accessor -- baseline backlog: missing set prevYearAriaLabel
       "prev-year-aria-label",
+      // eslint-disable-next-line @nectary/observed-attribute-accessor -- baseline backlog: missing set nextYearAriaLabel
       "next-year-aria-label",
       "prev-month-aria-label",
       "next-month-aria-label"

package/dialog/index.js

@@ -68,6 +68,7 @@ class Dialog extends NectaryElement {
     return [
       "caption",
       "open",
+      // eslint-disable-next-line @nectary/observed-attribute-accessor -- baseline backlog: missing set closeAriaLabel
       "close-aria-label",
       "hide-close-button",
       "prevent-close"

package/floating-panel/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/floating-panel/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-floating-panel");

package/floating-panel/index.d.ts

@@ -0,0 +1,41 @@
+import { NectaryElement } from '../utils';
+import '../action-menu';
+import '../action-menu-option';
+import '../floating-panel-icon-button';
+import '../floating-panel-button';
+import '../icon';
+import '../popover';
+export * from './types';
+export declare class FloatingPanel extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    get panelRect(): import("../types").TRect;
+    get closeButtonRect(): import("../types").TRect;
+    get ctaButtonRect(): import("../types").TRect;
+    set open(value: boolean);
+    get open(): boolean;
+    set noOfItemsSelected(value: string | null);
+    get noOfItemsSelected(): string | null;
+    set ctaLabel(value: string | null);
+    get ctaLabel(): string | null;
+    set itemsSelectedSingularLabel(value: string | null);
+    get itemsSelectedSingularLabel(): string | null;
+    set itemsSelectedPluralLabel(value: string | null);
+    get itemsSelectedPluralLabel(): string | null;
+    set itemsSelectedCompactLabel(value: string | null);
+    get itemsSelectedCompactLabel(): string | null;
+    set selectAllLabel(value: string | null);
+    get selectAllLabel(): string | null;
+    set selectAllShortLabel(value: string | null);
+    get selectAllShortLabel(): string | null;
+    set clearAllLabel(value: string | null);
+    get clearAllLabel(): string | null;
+    set allSelected(value: boolean);
+    get allSelected(): boolean;
+    set actions(value: string | null);
+    get actions(): string | null;
+}

package/floating-panel/index.js

@@ -0,0 +1,502 @@
+import { isSinchActionMenuOption } from "../action-menu-option/utils.js";
+import { isAttrEqual, getBooleanAttribute, getAttribute, shouldReduceMotion, updateBooleanAttribute, updateAttribute } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import { getRect } from "../utils/rect.js";
+import { throttleAnimationFrame } from "../utils/throttle.js";
+import { getReactEventHandler } from "../utils/get-react-event-handler.js";
+import "../action-menu/index.js";
+import "../action-menu-option/index.js";
+import "../floating-panel-icon-button/index.js";
+import "../floating-panel-button/index.js";
+import "../icon/index.js";
+import "../popover/index.js";
+const templateHTML = '<style>:host{display:block;max-width:100%;min-width:0}@keyframes panel-slide-in{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes panel-slide-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}dialog{display:flex;align-items:center;box-sizing:border-box;height:40px;padding:0;overflow:visible;width:fit-content;max-width:100%;min-width:0;background-color:var(--sinch-comp-floating-panel-color-background,var(--sinch-sys-color-primary-default));border:none;border-radius:var(--sinch-comp-floating-panel-shape-radius);box-shadow:var(--sinch-comp-floating-panel-shadow);color:var(--sinch-comp-floating-panel-color-text,var(--sinch-sys-color-primary-foreground))}dialog.closing,dialog.opening{overflow:hidden}dialog:not([open]){display:none}dialog.opening{animation:panel-slide-in .2s ease-out forwards}dialog.closing{animation:panel-slide-out .2s ease-in forwards}#items-selected{display:flex;align-items:baseline;gap:10px;padding:0 8px;white-space:nowrap}#cta{display:flex}#no-of-items-selected{font:var(--sinch-comp-floating-panel-font-bold)}#items-selected-label{font:var(--sinch-comp-floating-panel-font-regular)}#left-actions{display:flex;align-items:center}#divider{width:1px;align-self:stretch;background-color:var(--sinch-comp-floating-panel-color-divider)}#actions-end{display:flex;align-items:center;flex-shrink:1;min-width:0}#right-actions{display:flex;align-items:center}#right-actions-overflow{display:none;align-items:center;flex-shrink:0}:host([data-density=compact]) #right-actions,:host([data-density=extra-compact]) #right-actions{display:none}:host([data-density=compact]) #right-actions-overflow,:host([data-density=extra-compact]) #right-actions-overflow{display:flex}#actions-popover{display:block;--sinch-comp-pop-z-index:2147483000}#overflow-trigger{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}#overflow-menu-surface{box-sizing:border-box;display:block;min-width:var(--sinch-comp-floating-panel-overflow-menu-min-width,220px);width:max-content;max-width:min(var(--sinch-comp-floating-panel-overflow-menu-max-width,288px),calc(100vw - 24px))}#overflow-menu-surface sinch-action-menu{display:block;width:100%}#right-actions sinch-floating-panel-icon-button:last-child:active,#right-actions sinch-floating-panel-icon-button:last-child:focus,#right-actions sinch-floating-panel-icon-button:last-child:hover{--sinch-button-shape-radius-top-right:var(--sinch-comp-floating-panel-shape-radius);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-floating-panel-shape-radius)}@media (prefers-reduced-motion){dialog.closing,dialog.opening{animation:none}}</style><dialog id="wrapper" role="toolbar" aria-label="Bulk actions"><div id="left-actions"><sinch-floating-panel-icon-button id="close-btn" icon="fa-xmark" aria-label="Close selection" class="edge-start"></sinch-floating-panel-icon-button></div><div id="divider" role="separator" aria-orientation="vertical"></div><div id="items-selected" aria-live="polite" aria-atomic="true"><span id="no-of-items-selected"></span> <span id="items-selected-label"></span></div><div id="cta"><sinch-floating-panel-button id="cta-btn" text=""></sinch-floating-panel-button></div><div id="actions-end"><div id="right-actions" role="group" aria-label="Actions"></div><div id="right-actions-overflow"><sinch-popover id="actions-popover" orientation="bottom-right" allow-scroll aria-label="More actions"><sinch-floating-panel-icon-button slot="target" id="overflow-trigger" icon="fa-ellipsis" aria-label="More actions" class="edge-end"></sinch-floating-panel-icon-button><div id="overflow-menu-surface" slot="content"><sinch-action-menu id="overflow-menu" aria-label="Actions" rows="5"></sinch-action-menu></div></sinch-popover></div></div></dialog>';
+const template = document.createElement("template");
+template.innerHTML = templateHTML;
+const MAX_ACTIONS = 5;
+const WIDTH_COMPACT = 400;
+const WIDTH_EXTRA_COMPACT = 320;
+const DEFAULT_ITEMS_SELECTED_SINGULAR_LABEL = "item selected";
+const DEFAULT_ITEMS_SELECTED_PLURAL_LABEL = "items selected";
+const DEFAULT_ITEMS_SELECTED_COMPACT_LABEL = "selected";
+const DEFAULT_SELECT_ALL_LABEL = "Select all {count} items";
+const DEFAULT_SELECT_ALL_SHORT_LABEL = "Select all";
+const DEFAULT_CLEAR_ALL_LABEL = "Clear all";
+const applyCountPlaceholder = (template2, count) => {
+  if (count === null || count === "") {
+    return template2.replace(/\{count\} ?/g, "").replace(/ {2,}/g, " ").trim();
+  }
+  return template2.replaceAll("{count}", count);
+};
+const sanitizeAttr = (value) => value.replaceAll("&", "&amp;").replaceAll('"', "&quot;").replaceAll("<", "&lt;");
+const isValidAction = (value) => {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  const { name, icon, label } = value;
+  return typeof name === "string" && name !== "" && typeof icon === "string" && icon !== "" && (label === void 0 || typeof label === "string");
+};
+const DEFAULT_ACTIONS = [
+  { name: "export", icon: "fa-file-export", label: "Export" },
+  { name: "clone", icon: "fa-clone", label: "Duplicate" },
+  { name: "delete", icon: "fa-trash", label: "Delete" }
+];
+class FloatingPanel extends NectaryElement {
+  #$dialog;
+  #$noOfItemsSelected;
+  #$itemsSelectedLabel;
+  #$rightActions;
+  #$rightActionsOverflow;
+  #$overflowMenu;
+  #$actionsPopover;
+  #$overflowTrigger;
+  #$closeBtn;
+  #$ctaBtn;
+  #controller = null;
+  #hideController = null;
+  #resizeObserver = null;
+  #resizeThrottle = null;
+  #overflowDismissController = null;
+  #density = "default";
+  /** After touch `pointerup` toggles the menu, ignore the synthetic `click` (WebKit). */
+  #suppressOverflowClickUntil = 0;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$dialog = shadowRoot.querySelector("#wrapper");
+    this.#$noOfItemsSelected = shadowRoot.querySelector("#no-of-items-selected");
+    this.#$itemsSelectedLabel = shadowRoot.querySelector("#items-selected-label");
+    this.#$rightActions = shadowRoot.querySelector("#right-actions");
+    this.#$rightActionsOverflow = shadowRoot.querySelector("#right-actions-overflow");
+    this.#$overflowMenu = shadowRoot.querySelector("#overflow-menu");
+    this.#$actionsPopover = shadowRoot.querySelector("#actions-popover");
+    this.#$overflowTrigger = shadowRoot.querySelector("#overflow-trigger");
+    this.#$closeBtn = shadowRoot.querySelector("#close-btn");
+    this.#$ctaBtn = shadowRoot.querySelector("#cta-btn");
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "region");
+    this.setAttribute("aria-label", "Bulk actions toolbar");
+    this.#controller = new AbortController();
+    const { signal } = this.#controller;
+    this.#$closeBtn.addEventListener("click", this.#onClose, { signal });
+    this.#$ctaBtn.addEventListener("click", this.#onSelectAll, { signal });
+    this.#$rightActions.addEventListener("click", this.#onActionClick, { signal });
+    this.#$overflowMenu.addEventListener("-click", this.#onOverflowMenuClick, { signal, capture: true });
+    this.shadowRoot.addEventListener("click", this.#onToolbarShadowClickCapture, { capture: true, signal });
+    this.shadowRoot.addEventListener("pointerup", this.#onOverflowTriggerPointerUp, { signal });
+    this.#$actionsPopover.addEventListener("-close", this.#onActionsPopoverClose, { signal });
+    this.#resizeThrottle = throttleAnimationFrame(() => {
+      if (!this.isDomConnected || !this.#$dialog.open) {
+        return;
+      }
+      const width = this.#$dialog.getBoundingClientRect().width;
+      this.#updateDensityFromWidth(width);
+    });
+    this.#resizeObserver = new ResizeObserver(() => {
+      this.#resizeThrottle?.fn();
+    });
+    this.#resizeObserver.observe(this.#$dialog);
+    this.addEventListener("-close", this.#onCloseReact, { signal });
+    this.addEventListener("-select-all", this.#onSelectAllReact, { signal });
+    this.addEventListener("-action", this.#onActionReact, { signal });
+    if (!this.hasAttribute("actions")) {
+      this.#renderActions(null);
+    }
+    if (this.hasAttribute("open")) {
+      this.#show();
+    }
+    this.#syncDensityAndLabel();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#hideController?.abort();
+    this.#hideController = null;
+    this.#overflowDismissController?.abort();
+    this.#overflowDismissController = null;
+    this.#resizeThrottle?.cancel();
+    this.#resizeThrottle = null;
+    this.#resizeObserver?.disconnect();
+    this.#resizeObserver = null;
+    this.#controller.abort();
+    this.#controller = null;
+  }
+  static get observedAttributes() {
+    return [
+      "open",
+      "no-of-items-selected",
+      "cta-label",
+      "items-selected-singular-label",
+      "items-selected-plural-label",
+      "items-selected-compact-label",
+      "select-all-label",
+      "select-all-short-label",
+      "clear-all-label",
+      "actions",
+      "all-selected"
+    ];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (isAttrEqual(oldVal, newVal)) {
+      return;
+    }
+    switch (name) {
+      case "open": {
+        if (newVal !== null) {
+          this.#show();
+        } else {
+          this.#hide();
+        }
+        break;
+      }
+      case "no-of-items-selected": {
+        this.#$noOfItemsSelected.textContent = newVal;
+        this.#updateItemsSelectedLabel();
+        break;
+      }
+      case "cta-label":
+      case "select-all-label":
+      case "select-all-short-label":
+      case "clear-all-label": {
+        this.#updateCtaText(getBooleanAttribute(this, "all-selected"));
+        break;
+      }
+      case "items-selected-singular-label":
+      case "items-selected-plural-label":
+      case "items-selected-compact-label": {
+        this.#updateItemsSelectedLabel();
+        break;
+      }
+      case "actions": {
+        this.#renderActions(newVal);
+        break;
+      }
+      case "all-selected": {
+        this.#updateCtaText(newVal !== null);
+        break;
+      }
+    }
+  }
+  #updateItemsSelectedLabel() {
+    if (this.#density === "extra-compact") {
+      this.#$itemsSelectedLabel.textContent = getAttribute(this, "items-selected-compact-label") ?? DEFAULT_ITEMS_SELECTED_COMPACT_LABEL;
+      return;
+    }
+    const raw = getAttribute(this, "no-of-items-selected");
+    const n = raw === null || raw === "" ? NaN : Number(raw);
+    const singular = Number.isFinite(n) && n === 1;
+    this.#$itemsSelectedLabel.textContent = singular ? getAttribute(this, "items-selected-singular-label") ?? DEFAULT_ITEMS_SELECTED_SINGULAR_LABEL : getAttribute(this, "items-selected-plural-label") ?? DEFAULT_ITEMS_SELECTED_PLURAL_LABEL;
+  }
+  #updateDensityFromWidth(width) {
+    if (!this.#$dialog.open || width <= 0) {
+      return;
+    }
+    let next;
+    if (width <= WIDTH_EXTRA_COMPACT) {
+      next = "extra-compact";
+    } else if (width <= WIDTH_COMPACT) {
+      next = "compact";
+    } else {
+      next = "default";
+    }
+    if (next === this.#density) {
+      return;
+    }
+    this.#density = next;
+    if (next === "default") {
+      this.removeAttribute("data-density");
+      this.#closeOverflowMenu();
+    } else {
+      this.setAttribute("data-density", next);
+    }
+    this.#syncDensityAndLabel();
+  }
+  #syncDensityAndLabel() {
+    this.#updateItemsSelectedLabel();
+    this.#updateCtaText(getBooleanAttribute(this, "all-selected"));
+  }
+  #show() {
+    this.#hideController?.abort();
+    this.#hideController = null;
+    this.#$dialog.show();
+    this.#$dialog.classList.remove("closing");
+    if (shouldReduceMotion()) {
+      queueMicrotask(() => {
+        const { width } = this.#$dialog.getBoundingClientRect();
+        this.#updateDensityFromWidth(width);
+      });
+      return;
+    }
+    this.#$dialog.classList.add("opening");
+    this.#$dialog.addEventListener("animationend", () => {
+      this.#$dialog.classList.remove("opening");
+    }, { once: true });
+    queueMicrotask(() => {
+      const { width } = this.#$dialog.getBoundingClientRect();
+      this.#updateDensityFromWidth(width);
+    });
+  }
+  #hide() {
+    this.#closeOverflowMenu();
+    this.#hideController?.abort();
+    if (shouldReduceMotion()) {
+      this.#$dialog.close();
+      return;
+    }
+    this.#hideController = new AbortController();
+    this.#$dialog.classList.remove("opening");
+    this.#$dialog.classList.add("closing");
+    this.#$dialog.addEventListener("animationend", () => {
+      this.#hideController = null;
+      this.#$dialog.classList.remove("closing");
+      this.#$dialog.close();
+    }, { once: true, signal: this.#hideController.signal });
+  }
+  #updateCtaText(allSelected) {
+    if (allSelected) {
+      this.#$ctaBtn.setAttribute("text", getAttribute(this, "clear-all-label") ?? DEFAULT_CLEAR_ALL_LABEL);
+      return;
+    }
+    if (this.#density !== "default") {
+      this.#$ctaBtn.setAttribute("text", getAttribute(this, "select-all-short-label") ?? DEFAULT_SELECT_ALL_SHORT_LABEL);
+      return;
+    }
+    const template2 = getAttribute(this, "select-all-label") ?? DEFAULT_SELECT_ALL_LABEL;
+    this.#$ctaBtn.setAttribute("text", applyCountPlaceholder(template2, getAttribute(this, "cta-label")));
+  }
+  #renderActions(json) {
+    this.#$rightActions.innerHTML = "";
+    this.#$overflowMenu.innerHTML = "";
+    let actions;
+    if (json === null) {
+      actions = DEFAULT_ACTIONS;
+    } else {
+      try {
+        const parsed = JSON.parse(json);
+        if (!Array.isArray(parsed)) {
+          return;
+        }
+        actions = parsed.filter(isValidAction);
+      } catch {
+        return;
+      }
+    }
+    const sliced = actions.slice(0, MAX_ACTIONS);
+    this.#$rightActions.innerHTML = sliced.map((action) => {
+      const safeName = sanitizeAttr(action.name);
+      const safeIcon = sanitizeAttr(action.icon);
+      const safeLabel = sanitizeAttr(action.label ?? action.name);
+      return `<sinch-floating-panel-icon-button data-action="${safeName}" icon="${safeIcon}" aria-label="${safeLabel}"></sinch-floating-panel-icon-button>`;
+    }).join("");
+    this.#$overflowMenu.innerHTML = sliced.map((action) => {
+      const safeName = sanitizeAttr(action.name);
+      const safeIcon = sanitizeAttr(action.icon);
+      const safeLabel = sanitizeAttr(action.label ?? action.name);
+      return `<sinch-action-menu-option data-action="${safeName}" text="${safeLabel}" aria-label="${safeLabel}"><sinch-icon icons-version="2" name="${safeIcon}" slot="icon"></sinch-icon></sinch-action-menu-option>`;
+    }).join("");
+  }
+  /**
+   * Fires the generic `-action` event (detail = action name) plus a per-action
+   * `-${action}` convenience event. The per-action event lets consumers bind
+   * directly to a specific action (e.g. `on-archive`) without switching on
+   * `e.detail` — and it works for any user-defined action, not just the
+   * built-in defaults. React handlers are forwarded by `#onActionReact`.
+   */
+  #dispatchAction(action) {
+    this.dispatchEvent(new CustomEvent("-action", { detail: action }));
+    this.dispatchEvent(new CustomEvent(`-${action}`));
+  }
+  #onClose = () => {
+    this.dispatchEvent(new CustomEvent("-close"));
+  };
+  #onSelectAll = () => {
+    this.dispatchEvent(new CustomEvent("-select-all"));
+  };
+  #onActionClick = (e) => {
+    const btn = e.target.closest("sinch-floating-panel-icon-button[data-action]");
+    if (btn === null) {
+      return;
+    }
+    const action = btn.dataset.action;
+    if (action === void 0) {
+      return;
+    }
+    this.#dispatchAction(action);
+  };
+  #onOverflowMenuClick = (e) => {
+    if (!isSinchActionMenuOption(e.target)) {
+      return;
+    }
+    const action = e.target.dataset.action;
+    if (action === void 0) {
+      return;
+    }
+    this.#closeOverflowMenu();
+    this.#dispatchAction(action);
+  };
+  /**
+   * Safari/WebKit often does not deliver a bubbling click from sinch-button (shadow) to the overflow host;
+   * capture on our shadow + composedPath() matches Chrome and Safari. Touch: pointerup (see below).
+   */
+  #onToolbarShadowClickCapture = (e) => {
+    if (this.#density === "default") {
+      return;
+    }
+    if (!(e instanceof MouseEvent)) {
+      return;
+    }
+    if (e.button !== 0) {
+      return;
+    }
+    if (!e.composedPath().includes(this.#$overflowTrigger)) {
+      return;
+    }
+    if (performance.now() < this.#suppressOverflowClickUntil) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+    e.stopPropagation();
+    this.#toggleOverflowMenu();
+  };
+  #onOverflowTriggerPointerUp = (e) => {
+    if (this.#density === "default") {
+      return;
+    }
+    if (!(e instanceof PointerEvent)) {
+      return;
+    }
+    if (!e.isPrimary || e.pointerType === "mouse" && e.button !== 0) {
+      return;
+    }
+    if (e.pointerType === "mouse") {
+      return;
+    }
+    if (!e.composedPath().includes(this.#$overflowTrigger)) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    this.#suppressOverflowClickUntil = performance.now() + 400;
+    this.#toggleOverflowMenu();
+  };
+  #toggleOverflowMenu() {
+    if (this.#$actionsPopover.open) {
+      this.#closeOverflowMenu();
+    } else {
+      this.#$actionsPopover.open = true;
+      this.#overflowDismissController = new AbortController();
+      document.addEventListener("click", this.#onDocumentClickDismiss, {
+        signal: this.#overflowDismissController.signal,
+        capture: true
+      });
+    }
+  }
+  #closeOverflowMenu() {
+    this.#$actionsPopover.open = false;
+    this.#overflowDismissController?.abort();
+    this.#overflowDismissController = null;
+  }
+  #onDocumentClickDismiss = (e) => {
+    if (e.composedPath().includes(this.#$rightActionsOverflow)) {
+      return;
+    }
+    this.#closeOverflowMenu();
+  };
+  #onActionsPopoverClose = () => {
+    this.#closeOverflowMenu();
+  };
+  #onCloseReact = (e) => {
+    getReactEventHandler(this, "on-close")?.(e);
+  };
+  #onSelectAllReact = (e) => {
+    getReactEventHandler(this, "on-select-all")?.(e);
+  };
+  #onActionReact = (e) => {
+    getReactEventHandler(this, "on-action")?.(e);
+    if (e instanceof CustomEvent && typeof e.detail === "string") {
+      getReactEventHandler(this, `on-${e.detail}`)?.(e);
+    }
+  };
+  get panelRect() {
+    return getRect(this.#$dialog);
+  }
+  get closeButtonRect() {
+    return getRect(this.#$closeBtn);
+  }
+  get ctaButtonRect() {
+    return getRect(this.#$ctaBtn);
+  }
+  set open(value) {
+    updateBooleanAttribute(this, "open", value);
+  }
+  get open() {
+    return getBooleanAttribute(this, "open");
+  }
+  set noOfItemsSelected(value) {
+    updateAttribute(this, "no-of-items-selected", value);
+  }
+  get noOfItemsSelected() {
+    return getAttribute(this, "no-of-items-selected");
+  }
+  set ctaLabel(value) {
+    updateAttribute(this, "cta-label", value);
+  }
+  get ctaLabel() {
+    return getAttribute(this, "cta-label");
+  }
+  set itemsSelectedSingularLabel(value) {
+    updateAttribute(this, "items-selected-singular-label", value);
+  }
+  get itemsSelectedSingularLabel() {
+    return getAttribute(this, "items-selected-singular-label");
+  }
+  set itemsSelectedPluralLabel(value) {
+    updateAttribute(this, "items-selected-plural-label", value);
+  }
+  get itemsSelectedPluralLabel() {
+    return getAttribute(this, "items-selected-plural-label");
+  }
+  set itemsSelectedCompactLabel(value) {
+    updateAttribute(this, "items-selected-compact-label", value);
+  }
+  get itemsSelectedCompactLabel() {
+    return getAttribute(this, "items-selected-compact-label");
+  }
+  set selectAllLabel(value) {
+    updateAttribute(this, "select-all-label", value);
+  }
+  get selectAllLabel() {
+    return getAttribute(this, "select-all-label");
+  }
+  set selectAllShortLabel(value) {
+    updateAttribute(this, "select-all-short-label", value);
+  }
+  get selectAllShortLabel() {
+    return getAttribute(this, "select-all-short-label");
+  }
+  set clearAllLabel(value) {
+    updateAttribute(this, "clear-all-label", value);
+  }
+  get clearAllLabel() {
+    return getAttribute(this, "clear-all-label");
+  }
+  set allSelected(value) {
+    updateBooleanAttribute(this, "all-selected", value);
+  }
+  get allSelected() {
+    return getBooleanAttribute(this, "all-selected");
+  }
+  set actions(value) {
+    updateAttribute(this, "actions", value);
+  }
+  get actions() {
+    return getAttribute(this, "actions");
+  }
+}
+defineCustomElement("sinch-floating-panel", FloatingPanel);
+export {
+  FloatingPanel
+};