@swisspost/design-system-components 9.0.0-next.8 → 9.0.0

package/dist/types/components/post-popovercontainer/post-popovercontainer.d.ts

@@ -11,59 +11,77 @@ export type PostPopoverElement = HTMLElement & PopoverElement;
  * @slot - Default slot for placing content inside the popovercontainer.
  */
 export declare class PostPopovercontainer {
+    private static readonly STATIC_SIDES;
+    private static readonly PROPERTIES_TO_CLEAR;
     host: HTMLPostPopovercontainerElement;
     private arrowRef;
     private eventTarget;
     private clearAutoUpdate;
     private toggleTimeoutId;
     /**
-     * Fires whenever the popover gets shown or hidden, passing the new state in event.details as a boolean
+     * Fires whenever the popovercontainer gets shown or hidden, passing the new state in event.details as a boolean
      */
     postToggle: EventEmitter<boolean>;
     /**
-     * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
-     * Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted
+     * Defines the placement of the popovercontainer according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
+     * Popovercontainers are automatically flipped to the opposite side if there is not enough available space and are shifted
      * towards the viewport if they would overlap edge boundaries.
      */
     readonly placement?: Placement;
     /**
-     * Gap between the edge of the page and the popover
+     * Gap between the edge of the page and the popovercontainer
      */
     readonly edgeGap?: number;
     /**
-     * Wheter or not to display a little pointer arrow
+     * Animation style
+     */
+    readonly animation?: 'pop-in' | null;
+    /**
+     * Whether or not to display a little pointer arrow
      */
     readonly arrow?: boolean;
+    /**
+     * Enables a safespace through which the cursor can be moved without the popover being disabled
+     */
+    readonly safeSpace?: 'triangle' | 'trapezoid';
+    /**
+     * Updates cursor position for safe space feature when popover is open.
+     * Sets CSS custom properties for dynamic styling of safe area.
+     * @param event MouseEvent with cursor position
+     */
+    private mouseTrackingHandler;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     /**
-     * Programmatically display the tooltip
-     * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
+     * Programmatically display the popovercontainer
+     * @param target An element with [data-popover-target="id"] where the popovercontainer should be shown
      */
     show(target: HTMLElement): Promise<void>;
     /**
-     * Programmatically hide this tooltip
+     * Programmatically hide the popovercontainer
      */
     hide(): Promise<void>;
     /**
-     * Toggle tooltip display
-     * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
+     * Toggle popovercontainer display
+     * @param target An element with [data-popover-target="id"] where the popovercontainer should be shown
      * @param force Pass true to always show or false to always hide
      */
     toggle(target: HTMLElement, force?: boolean): Promise<boolean>;
     /**
-     * Start or stop auto updates based on tooltip events.
-     * Tooltips can be closed or opened with other methods than class members,
+     * Start or stop auto updates based on popovercontainer events.
+     * Popovercontainers can be closed or opened with other methods than class members,
      * therefore listening to the toggle event is safer for cleaning up.
      * @param e ToggleEvent
      */
     private handleToggle;
     /**
      * Start listening for DOM updates, scroll events etc. that have
-     * an influence on tooltip positioning
+     * an influence on popovercontainer positioning
      */
     private startAutoupdates;
     private calculatePosition;
+    private computeMainPosition;
+    private updateSafeSpaceBoundaries;
     render(): any;
 }
 export {};

package/dist/types/components/post-tag/post-tag.d.ts

@@ -14,7 +14,7 @@ export declare class PostTag {
     readonly size: null | 'sm';
     /**
      * Defines the icon `name` inside of the component.
-     * <span className="banner banner-sm banner-info">If not set the icon will not show up.</span>
+     * <span className="alert alert-sm alert-info">If not set the icon will not show up.</span>
      * To learn which icons are available, please visit our <a href="/?path=/docs/5704bdc4-c5b5-45e6-b123-c54d01fce2f1--docs">icon library</a>.
      */
     readonly icon: null | string;

package/dist/types/components/post-tooltip/post-tooltip.d.ts

@@ -1,60 +1,46 @@
 import { Placement } from '@floating-ui/dom';
-import 'long-press-event';
 export declare class PostTooltip {
     private popoverRef;
-    private wasOpenedByFocus;
     host: HTMLPostTooltipElement;
     /**
-     * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
-     * Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted
-     * towards the viewport if they would overlap edge boundaries.
+     * Defines the position of the tooltip relative to its trigger.
+     * Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries.
+     * For supported values and behavior details, see the [Floating UI placement documentation](https://floating-ui.com/docs/computePosition#placement).
      */
     readonly placement?: Placement;
     /**
-     * Wheter or not to display a little pointer arrow
+     * Whether or not to display a little pointer arrow
      */
     readonly arrow?: boolean;
     /**
-     * If `true`, the tooltip is displayed a few milliseconds after it is triggered
+     * Choose a tooltip animation
      */
-    readonly delayed: boolean;
-    validateDelayed(): void;
-    connectedCallback(): void;
-    componentDidLoad(): void;
-    /**
-     * Add interest event listeners, but only once, and start
-     * the accessibility patcher
-     */
-    componentWillLoad(): void;
+    readonly animation?: 'pop-in' | null;
     /**
-     * Remove a bunch of event listeners if the tooltip gets removed from the DOM
-     * and disconnect the accessibility patcher
+     * Indicates the open state of the tooltip
      */
-    disconnectedCallback(): void;
+    open: boolean;
+    validateOpen(): void;
+    componentDidLoad(): void;
     /**
-     * Programmatically display the tooltip
-     * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
-     * @param triggeredByFocus A boolean indicating if the tooltip was triggered by a focus event.
+     * Programmatically display the tooltip.
+     * @param target An element where the tooltip should be shown
      */
-    show(target: HTMLElement, triggeredByFocus?: boolean): Promise<void>;
+    show(target: HTMLElement): Promise<void>;
     /**
-     * Programmatically hide this tooltip
+     * Programmatically hide this tooltip.
      */
     hide(): Promise<void>;
     /**
-     * Toggle tooltip display
-     * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
-     * @param force Pass true to always show or false to always hide
+     * Toggle tooltip display.
+     * @param target An element where the tooltip should be shown
+     * @param [force] Pass true to always show or false to always hide
      */
     toggle(target: HTMLElement, force?: boolean): Promise<void>;
     /**
-     * Pointer or focus is on the tooltip, stop the tooltip from disappearing
-     */
-    private handleInterest;
-    /**
-     * Pointer or focus left the tooltip, initiate the hiding process
-     * Re-enable pointer events when the tooltip is no longer in focus or hovered
+     * Set the open state based on the toggle event.
+     * @param e Popovercontainer toggle event
      */
-    private handleInterestLost;
+    private handleToggle;
     render(): any;
 }

package/dist/types/components/post-tooltip-trigger/post-tooltip-trigger.d.ts

@@ -0,0 +1,47 @@
+import 'long-press-event';
+/**
+ * @slot default - Content to trigger the tooltip. Can contain any focusable element or will be made focusable automatically.
+ */
+export declare class PostTooltipTrigger {
+    host: HTMLPostTooltipTriggerElement;
+    /**
+     * ID of the tooltip element that this trigger is linked to.
+     */
+    for: string;
+    /**
+     * Delay (in milliseconds) before the tooltip is shown.
+     */
+    delay: number;
+    /**
+     * Reference to the element inside the host that will act as the trigger.
+     */
+    private trigger;
+    /**
+     * Timeout ID for the delay.
+     */
+    private delayTimeout;
+    /**
+     * Bound event handlers for proper removal
+     */
+    private boundTriggerHandler;
+    private boundTooltipHandler;
+    constructor();
+    validateControlFor(): void;
+    private get tooltip();
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private handleSlotChange;
+    private cleanupTrigger;
+    private setupTrigger;
+    private attachListeners;
+    private removeListeners;
+    private attachTooltipListeners;
+    private removeTooltipListeners;
+    private handleTriggerEvent;
+    private handleTooltipEvent;
+    private handleEnter;
+    private handleLeave;
+    private interestHandler;
+    private interestLostHandler;
+    render(): any;
+}