@odx/foundation 1.0.0-beta.67 → 1.0.0-beta.68

package/dist/components/dropdown/dropdown.d.ts

@@ -1,6 +1,5 @@
 import { PopoverPlacementOptions, ValuesOf } from '../../lib/main.js';
 import { PropertyValues, TemplateResult } from 'lit';
-import { OdxPopover } from '../popover/popover.js';
 import { PopoverHost } from '../popover/popover-host.js';
 declare global {
     interface HTMLElementTagNameMap {
@@ -14,7 +13,6 @@ export declare const DropdownPlacement: {
 };
 export declare class OdxDropdown extends PopoverHost {
     #private;
-    popoverElement: OdxPopover;
     matchReferenceWidth: boolean;
     placement: DropdownPlacement;
     get options(): PopoverPlacementOptions;

package/dist/components/popover/popover-host.d.ts

@@ -1,12 +1,15 @@
 import { CanBeDisabled, CustomElement, Placement, PopoverPlacementOptions } from '../../lib/main.js';
+import { OdxPopover } from './popover.js';
 declare const PopoverHost_base: import('../../lib/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
 export declare class PopoverHost extends PopoverHost_base {
     #private;
     static readonly styles: import('lit').CSSResult;
     private isOpen;
+    popoverElement: OdxPopover;
     referenceElement: HTMLElement | null;
     anchor: string;
     placement: Placement;
+    fpsLimit: number;
     get options(): PopoverPlacementOptions;
     constructor();
     connectedCallback(): void;
@@ -14,7 +17,7 @@ export declare class PopoverHost extends PopoverHost_base {
     mountPopover(referenceElement: HTMLElement | null): void;
     unmountPopover(_referenceElement: HTMLElement): void;
     isPopoverOpen(): boolean;
-    showPopover(): void;
+    showPopover(): Promise<void>;
     hidePopover(): void;
     togglePopover(state?: boolean): boolean;
     canPopoverShow?(): boolean;

package/dist/components/popover/popover.d.ts

@@ -6,6 +6,7 @@ declare global {
     }
 }
 export declare class OdxPopover extends CustomElement {
+    arrowElement: HTMLElement;
     showArrow: boolean;
     protected render(): TemplateResult;
 }

package/dist/components/tooltip/tooltip.d.ts

@@ -23,7 +23,6 @@ export declare const TooltipPlacement: Pick<{
 }, "TOP" | "RIGHT" | "BOTTOM" | "LEFT">;
 export declare class OdxTooltip extends PopoverHost {
     #private;
-    manual: boolean;
     show: boolean;
     timeout?: number;
     placement: TooltipPlacement;

package/dist/components.js

@@ -201,7 +201,7 @@ const _OdxActionButton = class _OdxActionButton extends OdxButton {
       ${when(
       !this.replaceContent && this.statusMessage,
       (statusMessage) => html`
-          <odx-tooltip anchor=${this.id} placement="top" .manual=${true} .show=${this.isStatusMessageShown} timeout=${this.statusMessageTimeout}>
+          <odx-tooltip anchor=${this.id} placement="top" .popover=${"manual"} .show=${this.isStatusMessageShown} timeout=${this.statusMessageTimeout}>
             <odx-text size="sm" strong>${statusMessage}</odx-text>
           </odx-tooltip>
         `
@@ -915,7 +915,7 @@ __decorateClass([
 ], _OdxCircularProgressBar.prototype, "size", 2);
 let OdxCircularProgressBar = _OdxCircularProgressBar;
 
-const styles$X = "@layer base{:host{--max-block-size: 100%;--max-inline-size: 100%;--_popover-color-background: var(--odx-color-background-level-2);--_popover-color-foreground: var(--odx-color-foreground-rest);--_popover-min-block-size: inherit;--_popover-max-block-size: 100%;--_popover-min-inline-size: inherit;--_popover-max-inline-size: 100%;--_popover-transition: var(--odx-popover-transition, var(--odx-motion-duration-default));--_popover-offset: var(--odx-size-50);--_popover-shadow: var(--odx-popover-shadow, var(--odx-shadow-level-1));--_popover-outer-padding: var(--odx-size-75);--_max-block-size: min(var(--_popover-max-block-size), var(--max-block-size));--_max-inline-size: min(var(--_popover-max-inline-size), var(--max-inline-size));top:var(--_popover-position-y);left:var(--_popover-position-x);transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y));transition:opacity var(--_popover-transition),transform var(--_popover-transition) allow-discrete,overlay var(--_popover-transition) allow-discrete,display var(--_popover-transition) allow-discrete;opacity:0;margin:0;background-color:transparent;max-block-size:var(--_max-block-size);max-inline-size:var(--_max-inline-size)}:host(:popover-open){display:flex;transform:translate(0);opacity:1;@starting-style{transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y));opacity:0}}}@layer state{:host,:host([popover-placement^=\"top\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: calc(-1 * var(--_popover-offset));padding-block:var(--_popover-outer-padding) var(--_popover-offset);max-block-size:calc(var(--_max-block-size) - var(--_popover-outer-padding))}:host([popover-placement^=\"right\"]){--_popover-transition-offset-x: var(--_popover-offset);--_popover-transition-offset-y: 0;padding-inline:var(--_popover-offset) var(--_popover-outer-padding);max-inline-size:calc(var(--_max-inline-size) - var(--_popover-outer-padding))}:host([popover-placement^=\"bottom\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: var(--_popover-offset);padding-block:var(--_popover-offset) var(--_popover-outer-padding);max-block-size:calc(var(--_max-block-size) - var(--_popover-outer-padding))}:host([popover-placement^=\"left\"]){--_popover-transition-offset-x: calc(-1 * var(--_popover-offset));--_popover-transition-offset-y: 0;padding-inline:var(--_popover-outer-padding) var(--_popover-offset);max-inline-size:calc(var(--_max-inline-size) - var(--_popover-outer-padding))}}";
+const styles$X = "@layer base{:host{--max-block-size: 100%;--max-inline-size: 100%;--_popover-color-background: var(--odx-color-background-level-2);--_popover-color-foreground: var(--odx-color-foreground-rest);--_popover-min-block-size: inherit;--_popover-max-block-size: 100%;--_popover-min-inline-size: inherit;--_popover-max-inline-size: 100%;--_popover-transition: var(--odx-popover-transition, var(--odx-motion-duration-default));--_popover-offset: var(--odx-size-50);--_popover-shadow: var(--odx-popover-shadow, var(--odx-shadow-level-1));--_popover-outer-padding: var(--odx-size-75);--_popover-arrow-size: var(--odx-size-50);--_popover-arrow-offset: calc(var(--_popover-offset) - var(--_popover-arrow-size) / 2);--_max-block-size: min(var(--_popover-max-block-size), var(--max-block-size));--_max-inline-size: min(var(--_popover-max-inline-size), var(--max-inline-size));top:var(--_popover-position-y);left:var(--_popover-position-x);transform:translate3d(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y),0);transition:opacity var(--_popover-transition),transform var(--_popover-transition) allow-discrete,overlay var(--_popover-transition) allow-discrete,display var(--_popover-transition) allow-discrete;opacity:0;margin:0;background-color:transparent;max-block-size:var(--_max-block-size);max-inline-size:var(--_max-inline-size)}:host(:popover-open){display:flex;transform:translate(0);opacity:1;@starting-style{transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y));opacity:0}}odx-popover::part(arrow){transform:rotate(45deg)}}@layer state{:host([popover-placement^=\"top\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: calc(-1 * var(--_popover-offset));padding-block:var(--_popover-outer-padding) var(--_popover-offset);max-block-size:calc(var(--_max-block-size) - var(--_popover-outer-padding));odx-popover::part(arrow){bottom:var(--_popover-arrow-offset)}}:host([popover-placement^=\"right\"]){--_popover-transition-offset-x: var(--_popover-offset);--_popover-transition-offset-y: 0;padding-inline:var(--_popover-offset) var(--_popover-outer-padding);max-inline-size:calc(var(--_max-inline-size) - var(--_popover-outer-padding));odx-popover::part(arrow){left:var(--_popover-arrow-offset)}}:host([popover-placement^=\"bottom\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: var(--_popover-offset);--_popover-arrow-offset-y: calc(var(--_popover-offset) - 6px);padding-block:var(--_popover-offset) var(--_popover-outer-padding);max-block-size:calc(var(--_max-block-size) - var(--_popover-outer-padding));odx-popover::part(arrow){top:var(--_popover-arrow-offset)}}:host([popover-placement^=\"left\"]){--_popover-transition-offset-x: calc(-1 * var(--_popover-offset));--_popover-transition-offset-y: 0;--_popover-arrow-offset-x: calc(var(--_popover-offset) - var(--_arrow-size) / 2);--_popover-arrow-offset-y: 0;padding-inline:var(--_popover-offset) var(--_popover-outer-padding);max-inline-size:calc(var(--_max-inline-size) - var(--_popover-outer-padding));odx-popover::part(arrow){right:var(--_popover-offset)}}}";
 
 class PopoverHost extends CanBeDisabled(CustomElement) {
   constructor() {
@@ -924,6 +924,7 @@ class PopoverHost extends CanBeDisabled(CustomElement) {
     this.referenceElement = null;
     this.anchor = "";
     this.placement = Placement.BOTTOM;
+    this.fpsLimit = 60;
     this.#handleToggle = async ({ newState }) => {
       if (this.isOpen) {
         this.onBeforePopoverShow?.();
@@ -946,7 +947,7 @@ class PopoverHost extends CanBeDisabled(CustomElement) {
   #positionUpdater;
   #observer;
   get options() {
-    return PopoverPlacementOptions({ placement: this.placement });
+    return PopoverPlacementOptions({ arrowElement: this.popoverElement.arrowElement, placement: this.placement });
   }
   connectedCallback() {
     super.connectedCallback();
@@ -971,8 +972,9 @@ class PopoverHost extends CanBeDisabled(CustomElement) {
   isPopoverOpen() {
     return this.isOpen;
   }
-  showPopover() {
+  async showPopover() {
     if (!this.referenceElement || this.isOpen || this.disabled || this.canPopoverShow?.() === false) return;
+    await 0;
     computePopoverPlacement(this.referenceElement, this, this.options);
     super.showPopover();
     this.isOpen = true;
@@ -980,8 +982,7 @@ class PopoverHost extends CanBeDisabled(CustomElement) {
     this.#positionUpdater = autoUpdate(
       this.referenceElement,
       this,
-      throttle(() => this.referenceElement && computePopoverPlacement(this.referenceElement, this, this.options), 1e3 / 30),
-      { animationFrame: true }
+      throttle(() => this.referenceElement && computePopoverPlacement(this.referenceElement, this, this.options), 1e3 / this.fpsLimit)
     );
   }
   hidePopover() {
@@ -1022,6 +1023,9 @@ class PopoverHost extends CanBeDisabled(CustomElement) {
 __decorateClass([
   state()
 ], PopoverHost.prototype, "isOpen", 2);
+__decorateClass([
+  query("odx-popover", true)
+], PopoverHost.prototype, "popoverElement", 2);
 __decorateClass([
   state()
 ], PopoverHost.prototype, "referenceElement", 2);
@@ -1031,6 +1035,9 @@ __decorateClass([
 __decorateClass([
   property({ reflect: true, useDefault: true })
 ], PopoverHost.prototype, "placement", 2);
+__decorateClass([
+  property({ attribute: false })
+], PopoverHost.prototype, "fpsLimit", 2);
 
 const styles$W = ":host{--_popover-offset: var(--odx-size-37)}";
 
@@ -1108,9 +1115,6 @@ const _OdxDropdown = class _OdxDropdown extends PopoverHost {
   #handleClick;
   #handleKeyboardEvent;
 };
-__decorateClass([
-  query("odx-popover", true)
-], _OdxDropdown.prototype, "popoverElement", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true, useDefault: true, attribute: "match-reference-width" })
 ], _OdxDropdown.prototype, "matchReferenceWidth", 2);
@@ -1281,7 +1285,7 @@ const _OdxAutocomplete = class _OdxAutocomplete extends FormControl {
   render() {
     return html`
       <slot name="control" @slotchange=${this.#handleControlSlotChange}></slot>
-      <odx-dropdown part="dropdown" role="listbox" tabindex="-1" ?disabled=${this.disabled} match-reference-width popover="manual">
+      <odx-dropdown part="dropdown" role="listbox" tabindex="-1" ?disabled=${this.disabled} match-reference-width .popover="${"manual"}">
         <odx-highlight minlength=${this.minQueryLength} selector="odx-option" subtle .root=${this}>
           <odx-stack gap="xs">
             <slot></slot>
@@ -2842,7 +2846,7 @@ __decorateClass([
 ], _OdxPagination.prototype, "totalItems", 2);
 let OdxPagination = _OdxPagination;
 
-const styles$s = ":host{--_arrow-size: var(--odx-size-50);--_outer-padding: var(--odx-size-75);--_border-radius: var(--odx-popover-border-radius, var(--odx-border-radius-controls));display:flex;border-radius:var(--_border-radius);box-shadow:var(--_popover-shadow);background-color:var(--_popover-color-background)}[part~=base]{display:flex;position:relative;inset-block-start:0!important;inset-inline-start:0!important;flex-direction:column;z-index:2;border-radius:inherit;block-size:fit-content;min-block-size:var(--_popover-min-block-size);max-block-size:100%;min-inline-size:var(--_popover-min-inline-size);max-inline-size:100%;overflow:auto;scrollbar-width:thin;scroll-behavior:smooth;scroll-padding-block:calc(var(--odx-size-150) + var(--_outer-padding))}[part~=content]{display:flex;flex-direction:column;padding:var(--_outer-padding);color:var(--_popover-color-foreground)}[part~=arrow]{position:absolute;inset:0;transform:translate3d(var(--_popover-arrow-position-x),var(--_popover-arrow-position-y),0) rotate(45deg);z-index:3;border-radius:var(--odx-border-radius-sm);background-color:inherit;block-size:var(--_arrow-size);inline-size:var(--_arrow-size)}";
+const styles$s = ":host{display:flex;border-radius:var(--odx-border-radius-controls);box-shadow:var(--_popover-shadow);background-color:var(--_popover-color-background)}[part~=base]{display:flex;position:relative;inset-block-start:0!important;inset-inline-start:0!important;flex-direction:column;z-index:2;border-radius:inherit;block-size:fit-content;min-block-size:var(--_popover-min-block-size);max-block-size:100%;min-inline-size:var(--_popover-min-inline-size);max-inline-size:100%;overflow:auto;scrollbar-width:thin;scroll-behavior:smooth;scroll-padding-block:calc(var(--odx-size-150) + var(--_popover-outer-padding))}[part~=content]{display:flex;flex-direction:column;padding:var(--odx-size-75);color:var(--_popover-color-foreground)}[part~=arrow]{position:absolute;z-index:3;background-color:inherit;block-size:var(--_popover-arrow-size);inline-size:var(--_popover-arrow-size)}";
 
 const _OdxPopover = class _OdxPopover extends CustomElement {
   constructor() {
@@ -2863,6 +2867,9 @@ const _OdxPopover = class _OdxPopover extends CustomElement {
     `;
   }
 };
+__decorateClass([
+  query('[part="arrow"]')
+], _OdxPopover.prototype, "arrowElement", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true, useDefault: true })
 ], _OdxPopover.prototype, "showArrow", 2);
@@ -4224,13 +4231,12 @@ __decorateClass([
 ], _OdxToggleContent.prototype, "hidden", 2);
 let OdxToggleContent = _OdxToggleContent;
 
-const styles$1 = ":host{--_popover-color-background: var(--odx-color-background-level-3);--_popover-color-foreground: var(--odx-color-foreground-inverse-static)}:host(:not([interactive])){pointer-events:none}odx-popover{--_border-radius: var(--odx-border-radius-md);--_outer-padding: var(--odx-size-25);padding-inline:var(--odx-size-50)}";
+const styles$1 = ":host{--_popover-color-background: var(--odx-color-background-level-3);--_popover-color-foreground: var(--odx-color-foreground-inverse-static)}:host(:not([interactive])){pointer-events:none;user-select:none}odx-popover{border-radius:var(--odx-border-radius-md);&::part(content){padding-block:var(--odx-size-25);padding-inline:var(--odx-size-50)}}";
 
 const TooltipPlacement = pick(Placement, ["TOP", "RIGHT", "BOTTOM", "LEFT"]);
 const _OdxTooltip = class _OdxTooltip extends PopoverHost {
   constructor() {
     super(...arguments);
-    this.manual = false;
     this.show = false;
     this.placement = TooltipPlacement.TOP;
     this.interactive = false;
@@ -4266,10 +4272,10 @@ const _OdxTooltip = class _OdxTooltip extends PopoverHost {
     clearTimeout(this.#timeout);
   }
   mountPopover(referenceElement) {
-    super.mountPopover(referenceElement);
     if (!referenceElement) return;
+    super.mountPopover(referenceElement);
     this.#updateAriaAttributes(referenceElement, this.id);
-    if (this.manual) return;
+    if (this.popover === "manual") return;
     this.addEventListener("mouseleave", this.#handleMouseEvents);
     referenceElement.addEventListener("mouseenter", this.#handleMouseEvents);
     referenceElement.addEventListener("mouseleave", this.#handleReferenceMouseLeave);
@@ -4291,7 +4297,7 @@ const _OdxTooltip = class _OdxTooltip extends PopoverHost {
   }
   render() {
     return html`
-      <odx-popover>
+      <odx-popover showArrow>
         <slot></slot>
       </odx-popover>
     `;
@@ -4301,7 +4307,7 @@ const _OdxTooltip = class _OdxTooltip extends PopoverHost {
     if (props.has("id") && this.referenceElement) {
       this.#updateAriaAttributes(this.referenceElement, this.id);
     }
-    if (props.has("show") && (this.show || this.manual)) {
+    if (props.has("show") && this.popover === "manual") {
       this.togglePopover(this.show);
     }
   }
@@ -4317,10 +4323,7 @@ const _OdxTooltip = class _OdxTooltip extends PopoverHost {
   #handleKeyboardFocus;
 };
 __decorateClass([
-  property({ type: Boolean, attribute: false })
-], _OdxTooltip.prototype, "manual", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: false })
+  property({ type: Boolean })
 ], _OdxTooltip.prototype, "show", 2);
 __decorateClass([
   property({ type: Number })

package/dist/lib/utils/compute-popover-placement.d.ts

@@ -7,7 +7,6 @@ export interface PopoverPlacementOptions {
     matchReferenceWidth: boolean;
     minHeight?: number | null;
     offset: number;
-    outerPadding: number;
 }
 export declare function PopoverPlacementOptions(options?: Partial<PopoverPlacementOptions>): PopoverPlacementOptions;
 export declare function computePopoverPlacement(referenceElement: ReferenceElement, floatingElement: HTMLElement, options: PopoverPlacementOptions): Promise<void>;

package/dist/main.js

@@ -1109,14 +1109,13 @@ function PopoverPlacementOptions(options) {
     fallbackAxisSideDirection: "end",
     matchReferenceWidth: false,
     offset: 0,
-    outerPadding: 24,
     ...options
   };
 }
 async function computePopoverPlacement(referenceElement, floatingElement, options) {
-  const { arrowElement, placement, offset: offset$1, matchReferenceWidth, enableFallback, fallbackAxisSideDirection, minHeight, outerPadding } = options;
+  const { arrowElement, placement, offset: offset$1, matchReferenceWidth, enableFallback, fallbackAxisSideDirection, minHeight } = options;
   const arrowSize = arrowElement?.offsetWidth ?? 0;
-  const arrowMiddleware = arrowElement ? arrow({ element: arrowElement, padding: arrowSize * 3 }) : void 0;
+  const arrowMiddleware = arrowElement ? arrow({ element: arrowElement, padding: arrowSize * 2 }) : void 0;
   const flipMiddleWare = enableFallback ? flip({ fallbackAxisSideDirection }) : void 0;
   floatingElement.setAttribute("popover-placement", placement);
   const result = await computePosition(referenceElement, floatingElement, {
@@ -1139,20 +1138,14 @@ async function computePopoverPlacement(referenceElement, floatingElement, option
       hide()
     ]
   });
-  let arrowPositionX = null;
-  let arrowPositionY = null;
   if (arrowElement && result.middlewareData.arrow) {
-    const popoverSide = placement.split("-")[0];
-    const { arrow: arrow2 } = result.middlewareData;
-    const arrowOffsetX = popoverSide === "left" ? floatingElement.offsetWidth - outerPadding - 0.5 * arrowSize : outerPadding - 0.5 * arrowSize;
-    const arrowOffsetY = popoverSide === "top" ? floatingElement.offsetHeight - outerPadding - 0.5 * arrowSize : outerPadding - 0.5 * arrowSize;
-    arrowPositionX = arrow2.x ?? arrowOffsetX;
-    arrowPositionY = arrow2.y ?? arrowOffsetY;
+    Object.assign(arrowElement.style, {
+      left: toPx(result.middlewareData.arrow.x),
+      top: toPx(result.middlewareData.arrow.y)
+    });
   }
   floatingElement.style.setProperty("--_popover-position-x", toPx(result.x));
   floatingElement.style.setProperty("--_popover-position-y", toPx(result.y));
-  floatingElement.style.setProperty("--_popover-arrow-position-x", toPx(arrowPositionX));
-  floatingElement.style.setProperty("--_popover-arrow-position-y", toPx(arrowPositionY));
 }
 function positionUpdater(referenceElement, floatingElement, options) {
   return autoUpdate(

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@odx/foundation",
   "description": "A library of Web Component building blocks for ODX",
-  "version": "1.0.0-beta.67",
+  "version": "1.0.0-beta.68",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",