@nectary/components 5.33.0 → 5.34.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/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
+};

package/floating-panel/types.d.ts

@@ -0,0 +1,80 @@
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export type TSinchFloatingPanelAction = {
+    name: string;
+    icon: string;
+    label?: string;
+};
+export type TSinchFloatingPanelProps = {
+    /** Whether the panel is visible */
+    open?: boolean;
+    /** Number of items currently selected */
+    'no-of-items-selected'?: string;
+    /** Value substituted for `{count}` in `select-all-label` (e.g. total item count or noun). */
+    'cta-label'?: string;
+    /** Suffix after the count when exactly one item is selected. Default: `item selected`. */
+    'items-selected-singular-label'?: string;
+    /** Suffix after the count when zero or many items are selected. Default: `items selected`. */
+    'items-selected-plural-label'?: string;
+    /** Suffix shown at extra-compact density, regardless of count. Default: `selected`. */
+    'items-selected-compact-label'?: string;
+    /** CTA text at default density. `{count}` is replaced with `cta-label` (or removed when empty). Default: `Select all {count} items`. */
+    'select-all-label'?: string;
+    /** CTA text at compact / extra-compact density. Default: `Select all`. */
+    'select-all-short-label'?: string;
+    /** CTA text when `all-selected` is true. Default: `Clear all`. */
+    'clear-all-label'?: string;
+    /** JSON array of action buttons: [{name, icon}] — min 1, max 5 */
+    actions?: string;
+    /** When true, CTA label switches to the `clear-all-label` text. */
+    'all-selected'?: boolean;
+    readonly panelRect?: TRect;
+    readonly closeButtonRect?: TRect;
+    readonly ctaButtonRect?: TRect;
+};
+export type TSinchFloatingPanelEvents = {
+    '-close'?: (e: CustomEvent<void>) => void;
+    '-select-all'?: (e: CustomEvent<void>) => void;
+    /** Fires for every action click; `detail` is the action name. */
+    '-action'?: (e: CustomEvent<string>) => void;
+    /**
+     * Per-action convenience events fire as `-${action.name}` for any configured
+     * action (custom or built-in). The defaults below are listed for autocomplete;
+     * custom actions can be typed via module augmentation.
+     */
+    '-delete'?: (e: CustomEvent<void>) => void;
+    '-clone'?: (e: CustomEvent<void>) => void;
+    '-export'?: (e: CustomEvent<void>) => void;
+};
+export type TSinchFloatingPanelStyle = {
+    '--sinch-comp-floating-panel-color-background'?: string;
+    '--sinch-comp-floating-panel-color-text'?: string;
+    '--sinch-comp-floating-panel-overflow-menu-min-width'?: string;
+    '--sinch-comp-floating-panel-overflow-menu-max-width'?: string;
+};
+export type TSinchFloatingPanel = {
+    props: TSinchFloatingPanelProps;
+    events: TSinchFloatingPanelEvents;
+    style: TSinchFloatingPanelStyle;
+};
+export type TSinchFloatingPanelElement = NectaryComponentVanillaByType<TSinchFloatingPanel>;
+export type TSinchFloatingPanelReact = NectaryComponentReactByType<TSinchFloatingPanel>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-floating-panel': TSinchFloatingPanel;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-floating-panel': NectaryComponentVanilla<'sinch-floating-panel'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-floating-panel': NectaryComponentReact<'sinch-floating-panel'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-floating-panel': NectaryComponentReact<'sinch-floating-panel'>;
+        }
+    }
+}

package/floating-panel/types.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,11 @@
+import { NectaryElement } from '../utils';
+import '../button';
+export * from './types';
+export declare class FloatingPanelButton extends NectaryElement {
+    #private;
+    constructor();
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set text(value: string | null);
+    get text(): string | null;
+}