@nectary/components 5.33.0 → 5.35.0

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;
+}

package/floating-panel-button/index.js

@@ -0,0 +1,43 @@
+import { isAttrEqual, updateAttribute, getAttribute } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import "../button/index.js";
+const templateHTML = '<style>:host{display:flex;flex-shrink:0;height:100%;min-height:40px;color:var(--sinch-comp-floating-panel-color-text,var(--sinch-sys-color-primary-foreground))}sinch-button{height:100%;padding:0;white-space:nowrap;--sinch-button-shape-radius-base:0;--sinch-comp-button-color-subtle-secondary-default-border-initial:var(--sinch-sys-color-basic-transparent);--sinch-comp-button-color-subtle-secondary-disabled-border-initial:var(--sinch-sys-color-basic-transparent);--sinch-comp-button-spacing-padding-m:16px;--sinch-comp-button-color-subtle-secondary-default-text-initial:var(--sinch-comp-floating-panel-color-button-text-initial, var(--sinch-sys-color-primary-foreground));--sinch-comp-button-color-subtle-secondary-default-background-initial:var(--sinch-comp-floating-panel-color-button-background-initial, transparent);--sinch-comp-button-color-subtle-secondary-default-background-hover:var(--sinch-comp-floating-panel-color-button-background-hover);--sinch-comp-button-color-subtle-secondary-default-background-active:var(--sinch-comp-floating-panel-color-button-background-active);--sinch-comp-button-shadow-subtle-hover:none;--sinch-comp-button-shadow-subtle-active:none}sinch-button:focus-visible{--sinch-comp-button-color-subtle-secondary-default-background-initial:var(--sinch-comp-floating-panel-color-button-background-hover);--sinch-comp-button-shadow-subtle-focus:none}</style><sinch-button id="button" type="subtle-secondary"></sinch-button>';
+const template = document.createElement("template");
+template.innerHTML = templateHTML;
+class FloatingPanelButton extends NectaryElement {
+  #$button;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$button = shadowRoot.querySelector("#button");
+  }
+  static get observedAttributes() {
+    return ["text", "aria-label"];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (isAttrEqual(oldVal, newVal)) {
+      return;
+    }
+    if (name === "text") {
+      this.#$button.setAttribute("text", newVal ?? "");
+    }
+    if (name === "aria-label") {
+      if (newVal !== null) {
+        this.#$button.setAttribute("aria-label", newVal);
+      } else {
+        this.#$button.removeAttribute("aria-label");
+      }
+    }
+  }
+  set text(value) {
+    updateAttribute(this, "text", value);
+  }
+  get text() {
+    return getAttribute(this, "text");
+  }
+}
+defineCustomElement("sinch-floating-panel-button", FloatingPanelButton);
+export {
+  FloatingPanelButton
+};

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

@@ -0,0 +1,35 @@
+import type { NectaryComponentReact, NectaryComponentReactByType, NectaryComponentVanilla, NectaryComponentVanillaByType } from '../types';
+export type TSinchFloatingPanelButtonProps = {
+    /** The button label text */
+    text?: string;
+    'aria-label'?: string;
+};
+export type TSinchFloatingPanelButtonEvents = Record<string, never>;
+export type TSinchFloatingPanelButtonStyle = Record<string, never>;
+export type TSinchFloatingPanelButton = {
+    props: TSinchFloatingPanelButtonProps;
+    events: TSinchFloatingPanelButtonEvents;
+    style: TSinchFloatingPanelButtonStyle;
+};
+export type TSinchFloatingPanelButtonElement = NectaryComponentVanillaByType<TSinchFloatingPanelButton>;
+export type TSinchFloatingPanelButtonReact = NectaryComponentReactByType<TSinchFloatingPanelButton>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-floating-panel-button': TSinchFloatingPanelButton;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-floating-panel-button': NectaryComponentVanilla<'sinch-floating-panel-button'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-floating-panel-button': NectaryComponentReact<'sinch-floating-panel-button'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-floating-panel-button': NectaryComponentReact<'sinch-floating-panel-button'>;
+        }
+    }
+}

package/floating-panel-button/types.js

@@ -0,0 +1 @@
+

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

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

package/floating-panel-icon-button/index.js

@@ -0,0 +1,50 @@
+import { isAttrEqual, updateAttribute, getAttribute } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import "../button/index.js";
+import "../icon/index.js";
+const templateHTML = '<style>:host{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;box-sizing:border-box;cursor:pointer}sinch-button{display:flex;align-items:center;justify-content:center;width:100%;height:100%;--sinch-button-shape-radius-base:0;--sinch-comp-button-color-subtle-secondary-default-border-initial:var(--sinch-sys-color-basic-transparent);--sinch-comp-button-color-subtle-secondary-disabled-border-initial:var(--sinch-sys-color-basic-transparent);--sinch-comp-button-color-subtle-secondary-default-background-initial:transparent;--sinch-comp-button-color-subtle-secondary-default-icon-initial:var(--sinch-comp-floating-panel-color-text, var(--sinch-sys-color-primary-foreground));--sinch-comp-button-color-subtle-secondary-default-text-initial:var(--sinch-comp-floating-panel-color-text, var(--sinch-sys-color-primary-foreground));--sinch-comp-button-color-subtle-secondary-default-background-hover:var(--sinch-comp-floating-panel-color-button-background-hover);--sinch-comp-button-color-subtle-secondary-default-background-active:var(--sinch-comp-floating-panel-color-button-background-active);--sinch-comp-button-shadow-subtle-hover:none;--sinch-comp-button-shadow-subtle-active:none}sinch-button:focus-visible{--sinch-comp-button-color-subtle-secondary-default-background-initial:var(--sinch-comp-floating-panel-color-button-background-hover);--sinch-comp-button-shadow-subtle-focus:none}:host(.edge-start:active) sinch-button,:host(.edge-start:focus) sinch-button,:host(.edge-start:hover) sinch-button{--sinch-button-shape-radius-top-left:var(--sinch-comp-floating-panel-shape-radius);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-floating-panel-shape-radius)}:host(.edge-end:active) sinch-button,:host(.edge-end:focus) sinch-button,:host(.edge-end:hover) sinch-button{--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)}sinch-icon{--sinch-global-color-icon:var(--sinch-comp-floating-panel-color-text, var(--sinch-sys-color-primary-foreground));--sinch-global-size-icon:var(--sinch-comp-floating-panel-size-button-icon)}</style><sinch-button id="button" type="subtle-secondary"><sinch-icon id="icon" icons-version="2" slot="icon"></sinch-icon></sinch-button>';
+const template = document.createElement("template");
+template.innerHTML = templateHTML;
+class FloatingPanelIconButton extends NectaryElement {
+  #$icon;
+  #$button;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$icon = shadowRoot.querySelector("#icon");
+    this.#$button = shadowRoot.querySelector("#button");
+  }
+  static get observedAttributes() {
+    return ["icon", "aria-label"];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (isAttrEqual(oldVal, newVal)) {
+      return;
+    }
+    if (name === "icon") {
+      if (newVal !== null) {
+        this.#$icon.setAttribute("name", newVal);
+      } else {
+        this.#$icon.removeAttribute("name");
+      }
+    }
+    if (name === "aria-label") {
+      if (newVal !== null) {
+        this.#$button.setAttribute("aria-label", newVal);
+      } else {
+        this.#$button.removeAttribute("aria-label");
+      }
+    }
+  }
+  set icon(value) {
+    updateAttribute(this, "icon", value);
+  }
+  get icon() {
+    return getAttribute(this, "icon");
+  }
+}
+defineCustomElement("sinch-floating-panel-icon-button", FloatingPanelIconButton);
+export {
+  FloatingPanelIconButton
+};

package/floating-panel-icon-button/types.d.ts

@@ -0,0 +1,35 @@
+import type { NectaryComponentReact, NectaryComponentReactByType, NectaryComponentVanilla, NectaryComponentVanillaByType } from '../types';
+export type TSinchFloatingPanelIconButtonProps = {
+    /** The icon name */
+    icon?: string;
+    'aria-label'?: string;
+};
+export type TSinchFloatingPanelIconButtonEvents = Record<string, never>;
+export type TSinchFloatingPanelIconButtonStyle = Record<string, never>;
+export type TSinchFloatingPanelIconButton = {
+    props: TSinchFloatingPanelIconButtonProps;
+    events: TSinchFloatingPanelIconButtonEvents;
+    style: TSinchFloatingPanelIconButtonStyle;
+};
+export type TSinchFloatingPanelIconButtonElement = NectaryComponentVanillaByType<TSinchFloatingPanelIconButton>;
+export type TSinchFloatingPanelIconButtonReact = NectaryComponentReactByType<TSinchFloatingPanelIconButton>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-floating-panel-icon-button': TSinchFloatingPanelIconButton;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-floating-panel-icon-button': NectaryComponentVanilla<'sinch-floating-panel-icon-button'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-floating-panel-icon-button': NectaryComponentReact<'sinch-floating-panel-icon-button'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-floating-panel-icon-button': NectaryComponentReact<'sinch-floating-panel-icon-button'>;
+        }
+    }
+}

package/floating-panel-icon-button/types.js

@@ -0,0 +1 @@
+

package/icon/index.js

@@ -14,13 +14,39 @@ class Icon extends NectaryElement {
   static get observedAttributes() {
     return ["name", "icons-version"];
   }
+  /* Font class is now set before the text content. Covered by new regression tests.
+  
+    Before:
+    1. textContent = "fa-clone" → Safari renders the text using the default font
+     (Material Icons)
+    2. _matchNameToFont() → switches font-family to Sinch Icons Zero To D via
+    class
+  
+    After:
+    1. _matchNameToFont() → sets the correct font-family class first
+    2. textContent = "fa-clone" → Safari renders the text using the correct font
+     from the start
+  
+    Reasoning:
+    * Safari caches the ligature layout from the first paint. When
+    the text was set in Material Icons (which doesn't have these ligatures),
+    Safari calculated glyph positions for individual characters. When the font
+    then switched to Sinch Icons, Safari reused some of that cached layout
+    instead of fully recalculating — shifting certain glyphs to the right.
+    * _matchNameToFont() reads this.name via getAttribute(this,
+    'name'), which reads the HTML attribute — not textContent. The attribute is
+    already set when the callback fires (that's what triggers the callback), so
+    the method gets the correct name regardless of when textContent is set.
+    */
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case "name": {
-        this.#$icon.textContent = newVal;
-        updateAttribute(this.#$icon, "aria-label", newVal);
-        if (getAttribute(this, "icons-version", "1") !== "1") {
-          this._matchNameToFont();
+        {
+          this.#$icon.textContent = newVal;
+          updateAttribute(this.#$icon, "aria-label", newVal);
+          if (getAttribute(this, "icons-version", "1") !== "1") {
+            this._matchNameToFont();
+          }
         }
         break;
       }

package/input/index.js

@@ -173,18 +173,24 @@ class Input extends NectaryElement {
       "value",
       "placeholder",
       "mask",
+      // eslint-disable-next-line @nectary/observed-attribute-accessor -- baseline backlog: missing set max
       "max",
+      // eslint-disable-next-line @nectary/observed-attribute-accessor -- baseline backlog: missing set min
       "min",
       "invalid",
       "disabled",
       "size",
+      // eslint-disable-next-line @nectary/observed-attribute-accessor -- baseline backlog: missing set step
       "step",
       "autocomplete",
+      // eslint-disable-next-line @nectary/observed-attribute-accessor -- baseline backlog: missing set readonly
       "readonly",
       "autofocus",
       "data-size",
       "aria-label",
+      // eslint-disable-next-line @nectary/observed-attribute-accessor -- baseline backlog: missing set maxlength
       "maxlength",
+      // eslint-disable-next-line @nectary/observed-attribute-accessor -- baseline backlog: missing set required
       "required"
     ];
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.33.0",
+  "version": "5.35.0",
   "files": [
     "**/*/*.css",
     "**/*/*.json",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.15",
-    "@nectary/assets": "3.6.9"
+    "@nectary/assets": "3.6.10"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.15",
@@ -40,6 +40,6 @@
     "vite": "^7.0.6"
   },
   "peerDependencies": {
-    "@nectary/theme-base": "1.15.1"
+    "@nectary/theme-base": "1.16.0"
   }
 }

package/pop/index.js

@@ -8,7 +8,7 @@ import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { isTargetEqual } from "../utils/event-target.js";
 import { getPlacementContext, toLocalRect } from "../utils/placement.js";
 import { orientationValues, disableOverscroll, enableOverscroll, getAnchorPosition, clampPosition } from "./utils.js";
-const templateHTML = '<style>:host{display:contents;position:relative}dialog{position:fixed;left:0;top:0;transform:translate(var(--sinch-pop-offset-x),var(--sinch-pop-offset-y));margin:0;outline:0;padding:0;border:none;box-sizing:border-box;max-width:unset;max-height:unset;z-index:1;background:0 0;overflow:visible}dialog:not([open]){display:none}dialog::backdrop{background-color:transparent}#content{position:relative;z-index:1}#target-open{display:flex;flex-direction:column;position:absolute;left:0;top:0}#focus{display:none;position:absolute;width:0;height:0}</style><slot id="target" name="target" aria-haspopup="dialog" aria-expanded="false"></slot><div id="focus"></div><dialog id="dialog"><div id="target-open"><slot name="target-open"></slot></div><div id="content"><slot name="content"></slot></div></dialog>';
+const templateHTML = '<style>:host{display:contents;position:relative}dialog{position:fixed;left:0;top:0;transform:translate(var(--sinch-pop-offset-x),var(--sinch-pop-offset-y));margin:0;outline:0;padding:0;border:none;box-sizing:border-box;max-width:unset;max-height:unset;z-index:var(--sinch-comp-pop-z-index,1);background:0 0;overflow:visible}dialog:not([open]){display:none}dialog::backdrop{background-color:transparent}#content{position:relative;z-index:var(--sinch-comp-pop-z-index,1)}#target-open{display:flex;flex-direction:column;position:absolute;left:0;top:0}#focus{display:none;position:absolute;width:0;height:0}</style><slot id="target" name="target" aria-haspopup="dialog" aria-expanded="false"></slot><div id="focus"></div><dialog id="dialog"><div id="target-open"><slot name="target-open"></slot></div><div id="content"><slot name="content"></slot></div></dialog>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Pop extends NectaryElement {

package/select-menu/index.js

@@ -113,8 +113,11 @@ class SelectMenu extends NectaryElement {
       "rows",
       "multiple",
       "searchable",
+      // eslint-disable-next-line @nectary/observed-attribute-accessor -- baseline backlog: missing set searchValue
       "search-value",
+      // eslint-disable-next-line @nectary/observed-attribute-accessor -- baseline backlog: missing set searchPlaceholder
       "search-placeholder",
+      // eslint-disable-next-line @nectary/observed-attribute-accessor -- baseline backlog: missing set searchAutocomplete
       "search-autocomplete"
     ];
   }

package/sheet-title/index.js

@@ -33,7 +33,12 @@ class SheetTitle extends NectaryElement {
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ["title", "description", "close-aria-label"];
+    return [
+      "title",
+      "description",
+      // eslint-disable-next-line @nectary/observed-attribute-accessor -- baseline backlog: close-aria-label missing set/get pair
+      "close-aria-label"
+    ];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (isAttrEqual(oldVal, newVal)) {

package/skeleton/index.js

@@ -59,7 +59,10 @@ class Skeleton extends NectaryElement {
     this.#observer = null;
   }
   static get observedAttributes() {
-    return ["card"];
+    return [
+      // eslint-disable-next-line @nectary/observed-attribute-accessor -- baseline backlog: card missing set/get pair
+      "card"
+    ];
   }
   attributeChangedCallback(name, _oldVal, newVal) {
     if (name === "card") {

package/standalone.d.ts

@@ -27,6 +27,9 @@ import './file-drop/index.js';
 import './file-picker/index.js';
 import './file-status/index.js';
 import './flag/index.js';
+import './floating-panel/index.js';
+import './floating-panel-button/index.js';
+import './floating-panel-icon-button/index.js';
 import './grid-item/index.js';
 import './grid/index.js';
 import './help-tooltip/index.js';

package/standalone.js

@@ -28,6 +28,9 @@ import "./file-drop/index.js";
 import "./file-picker/index.js";
 import "./file-status/index.js";
 import "./flag/index.js";
+import "./floating-panel/index.js";
+import "./floating-panel-button/index.js";
+import "./floating-panel-icon-button/index.js";
 import "./grid-item/index.js";
 import "./grid/index.js";
 import "./help-tooltip/index.js";

package/standalone.ts

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

package/title/index.js

@@ -16,7 +16,12 @@ class Title extends NectaryElement {
     this.setAttribute("role", "heading");
   }
   static get observedAttributes() {
-    return ["text", "level", "ellipsis"];
+    return [
+      "text",
+      // eslint-disable-next-line @nectary/observed-attribute-accessor -- baseline backlog: level missing set/get pair
+      "level",
+      "ellipsis"
+    ];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {

package/tooltip/index.js

@@ -111,14 +111,18 @@ class Tooltip extends NectaryElement {
   }
   static get observedAttributes() {
     return [
+      // eslint-disable-next-line @nectary/observed-attribute-accessor -- baseline backlog: missing set isOpened
       "is-opened",
       "text",
       "orientation",
+      // eslint-disable-next-line @nectary/observed-attribute-accessor -- baseline backlog: missing set textAlign
       "text-align",
       "type",
       "aria-label",
       "aria-description",
+      // eslint-disable-next-line @nectary/observed-attribute-accessor -- baseline backlog: getter exists but missing set showOutsideViewport
       "show-outside-viewport",
+      // eslint-disable-next-line @nectary/observed-attribute-accessor -- baseline backlog: missing set allowScroll
       "allow-scroll"
     ];
   }
@@ -623,19 +627,19 @@ class Tooltip extends NectaryElement {
     let offsetX = 0;
     let offsetY = 0;
     if (orientation.startsWith("top")) {
-      if (bottomEdge > targetRect.y + OVERLAP_TOLERANCE) {
+      if (bottomEdge > targetRect.y + OVERLAP_TOLERANCE && topEdge < targetBottom) {
         offsetY = targetRect.y - bottomEdge;
       }
     } else if (orientation.startsWith("bottom")) {
-      if (topEdge < targetBottom - OVERLAP_TOLERANCE) {
+      if (topEdge < targetBottom - OVERLAP_TOLERANCE && bottomEdge > targetRect.y) {
         offsetY = targetBottom - topEdge;
       }
     } else if (orientation === "left") {
-      if (rightEdge > targetRect.x + OVERLAP_TOLERANCE) {
+      if (rightEdge > targetRect.x + OVERLAP_TOLERANCE && leftEdge < targetRight) {
         offsetX = targetRect.x - rightEdge;
       }
     } else if (orientation === "right") {
-      if (leftEdge < targetRight - OVERLAP_TOLERANCE) {
+      if (leftEdge < targetRight - OVERLAP_TOLERANCE && rightEdge > targetRect.x) {
         offsetX = targetRight - leftEdge;
       }
     }

package/utils/component-names.d.ts

@@ -1,3 +1,3 @@
-export declare const BASE_COMPONENT_NAMES_LIST: readonly ["accordion-item", "accordion", "action-menu-option", "action-menu", "alert", "avatar", "badge", "button-group-item", "button-group", "button", "card-container", "card-v2-title", "card-v2", "checkbox", "chip", "code-tag", "color-menu-option", "color-menu", "color-swatch", "date-picker", "dialog", "emoji-picker", "emoji", "field", "field-v2", "file-drop", "file-picker", "file-status", "flag", "grid-item", "grid", "help-tooltip", "icon", "inline-alert", "input", "link", "list-item", "list", "pagination", "persistent-overlay", "pop", "popover", "progress-stepper-item", "progress-stepper", "progress", "radio-option", "radio", "rich-text", "rich-textarea", "rich-textarea-chip", "segment-collapse", "segmented-control-option", "segmented-control", "segmented-icon-control-option", "segmented-icon-control", "select-button", "select-menu-option", "select-menu", "sheet", "sheet-title", "skeleton-item", "skeleton", "spinner", "stop-events", "table-body", "table-cell", "table-head-cell", "table-head", "table-row", "table", "tabs-icon-option", "tabs-option", "tabs", "tag", "text", "textarea", "time-picker", "title", "toast-manager", "toast", "toggle", "tooltip"];
-export declare const BASE_COMPONENT_NAMES: Set<"pop" | "button" | "dialog" | "input" | "link" | "progress" | "table" | "textarea" | "title" | "accordion-item" | "accordion" | "action-menu-option" | "action-menu" | "alert" | "avatar" | "badge" | "button-group-item" | "button-group" | "card-container" | "card-v2-title" | "card-v2" | "checkbox" | "chip" | "code-tag" | "color-menu-option" | "color-menu" | "color-swatch" | "date-picker" | "emoji-picker" | "emoji" | "field" | "field-v2" | "file-drop" | "file-picker" | "file-status" | "flag" | "grid-item" | "grid" | "help-tooltip" | "icon" | "inline-alert" | "list-item" | "list" | "pagination" | "persistent-overlay" | "popover" | "progress-stepper-item" | "progress-stepper" | "radio-option" | "radio" | "rich-text" | "rich-textarea" | "rich-textarea-chip" | "segment-collapse" | "segmented-control-option" | "segmented-control" | "segmented-icon-control-option" | "segmented-icon-control" | "select-button" | "select-menu-option" | "select-menu" | "sheet" | "sheet-title" | "skeleton-item" | "skeleton" | "spinner" | "stop-events" | "table-body" | "table-cell" | "table-head-cell" | "table-head" | "table-row" | "tabs-icon-option" | "tabs-option" | "tabs" | "tag" | "text" | "time-picker" | "toast-manager" | "toast" | "toggle" | "tooltip">;
+export declare const BASE_COMPONENT_NAMES_LIST: readonly ["accordion-item", "accordion", "action-menu-option", "action-menu", "alert", "avatar", "badge", "button-group-item", "button-group", "button", "card-container", "card-v2-title", "card-v2", "checkbox", "chip", "code-tag", "color-menu-option", "color-menu", "color-swatch", "date-picker", "dialog", "emoji-picker", "emoji", "field", "field-v2", "file-drop", "file-picker", "file-status", "flag", "floating-panel", "floating-panel-button", "floating-panel-icon-button", "grid-item", "grid", "help-tooltip", "icon", "inline-alert", "input", "link", "list-item", "list", "pagination", "persistent-overlay", "pop", "popover", "progress-stepper-item", "progress-stepper", "progress", "radio-option", "radio", "rich-text", "rich-textarea", "rich-textarea-chip", "segment-collapse", "segmented-control-option", "segmented-control", "segmented-icon-control-option", "segmented-icon-control", "select-button", "select-menu-option", "select-menu", "sheet", "sheet-title", "skeleton-item", "skeleton", "spinner", "stop-events", "table-body", "table-cell", "table-head-cell", "table-head", "table-row", "table", "tabs-icon-option", "tabs-option", "tabs", "tag", "text", "textarea", "time-picker", "title", "toast-manager", "toast", "toggle", "tooltip"];
+export declare const BASE_COMPONENT_NAMES: Set<"pop" | "button" | "dialog" | "input" | "link" | "progress" | "table" | "textarea" | "title" | "accordion-item" | "accordion" | "action-menu-option" | "action-menu" | "alert" | "avatar" | "badge" | "button-group-item" | "button-group" | "card-container" | "card-v2-title" | "card-v2" | "checkbox" | "chip" | "code-tag" | "color-menu-option" | "color-menu" | "color-swatch" | "date-picker" | "emoji-picker" | "emoji" | "field" | "field-v2" | "file-drop" | "file-picker" | "file-status" | "flag" | "floating-panel" | "floating-panel-button" | "floating-panel-icon-button" | "grid-item" | "grid" | "help-tooltip" | "icon" | "inline-alert" | "list-item" | "list" | "pagination" | "persistent-overlay" | "popover" | "progress-stepper-item" | "progress-stepper" | "radio-option" | "radio" | "rich-text" | "rich-textarea" | "rich-textarea-chip" | "segment-collapse" | "segmented-control-option" | "segmented-control" | "segmented-icon-control-option" | "segmented-icon-control" | "select-button" | "select-menu-option" | "select-menu" | "sheet" | "sheet-title" | "skeleton-item" | "skeleton" | "spinner" | "stop-events" | "table-body" | "table-cell" | "table-head-cell" | "table-head" | "table-row" | "tabs-icon-option" | "tabs-option" | "tabs" | "tag" | "text" | "time-picker" | "toast-manager" | "toast" | "toggle" | "tooltip">;
 export type ComponentName = `sinch-${typeof BASE_COMPONENT_NAMES_LIST[number]}`;

package/utils/component-names.js

@@ -28,6 +28,9 @@ const BASE_COMPONENT_NAMES_LIST = [
   "file-picker",
   "file-status",
   "flag",
+  "floating-panel",
+  "floating-panel-button",
+  "floating-panel-icon-button",
   "grid-item",
   "grid",
   "help-tooltip",

package/utils/element.d.ts

@@ -37,6 +37,9 @@ declare const BASE_COMPONENT_NAMES_LIST: readonly [
 	"file-picker",
 	"file-status",
 	"flag",
+	"floating-panel",
+	"floating-panel-button",
+	"floating-panel-icon-button",
 	"grid-item",
 	"grid",
 	"help-tooltip",