@sebgroup/green-core 3.30.0 → 3.32.0

package/components/coachmark/coachmark.component.js

@@ -43,7 +43,9 @@ let GdsCoachmark = class extends GdsElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    document.addEventListener("click", () => {
+    document.addEventListener("click", (event) => {
+      const clickedOtherCoachmark = event.composedPath().some((node) => node instanceof GdsCoachmark && node !== this);
+      if (clickedOtherCoachmark) return;
       setTimeout(() => {
         __privateMethod(this, _GdsCoachmark_instances, updateCoachmarks_fn).call(this);
         __privateMethod(this, _GdsCoachmark_instances, closeCoachMark_fn).call(this);

package/components/form-summary/summary.component.d.ts

@@ -8,6 +8,9 @@ import { GdsElement } from '../../gds-element';
  * in a consolidated manner. It provides a clear indication of what went wrong and what needs to be corrected.
  *
  * @slot header - Optional slot for customizing the header of the summary.
+ *
+ * @event gds-control-focus - Fired when an item in the summary is clicked, before focus moves to the related control.
+ * The detail object contains the control. Can be cancelled with event.preventDefault() to handle focus yourself.
  */
 export declare class GdsFormSummary extends GdsElement {
     #private;

package/components/form-summary/summary.component.js

@@ -7,9 +7,7 @@ import {
 } from "../../chunks/chunk.H2T4A5YY.js";
 var _form, _formObserver, _GdsFormSummary_instances, renderControlItem_fn, groupByFieldset_fn, getFormControls_fn, getErrorControls_fn, renderArrowIcon_fn;
 import { msg, str } from "@lit/localize";
-import { nothing } from "lit";
 import { property, queryAsync } from "lit/decorators.js";
-import { until } from "lit/directives/until.js";
 import { when } from "lit/directives/when.js";
 import { GdsElement } from "../../gds-element.js";
 import { gdsCustomElement, html } from "../../scoping.js";
@@ -43,9 +41,9 @@ let GdsFormSummary = class extends GdsElement {
    * Focuses the first focusable element in the summary.
    */
   focus(options) {
-    this._elRoot.then((el) => {
-      const firstFocusable = el.querySelector(
-        '[gds-element="gds-button"]'
+    void this._elRoot.then((el) => {
+      const firstFocusable = el?.querySelector(
+        'li.item:not([inert]) [gds-element="gds-button"]'
       );
       if (firstFocusable) {
         firstFocusable.focus(options);
@@ -89,7 +87,6 @@ let GdsFormSummary = class extends GdsElement {
           border-color="negative-01"
           border-radius="m"
           overflow="hidden"
-          aria-describedby="description"
           aria-label=${msg(`Form error summary`)}
         >
           <gds-flex gap="0" flex-direction="column">
@@ -137,6 +134,7 @@ _form = new WeakMap();
 _formObserver = new WeakMap();
 _GdsFormSummary_instances = new WeakSet();
 renderControlItem_fn = function(el) {
+  const label = el.dataset.label || el.label || el.ariaLabel;
   return html`<li
       class="item"
       ?inert=${!(el.ariaInvalid === "true" || el.invalid)}
@@ -155,20 +153,23 @@ renderControlItem_fn = function(el) {
         padding="xs s"
         @click=${(e) => {
     e.preventDefault();
-    el.focus();
+    const proceed = this.dispatchCustomEvent("gds-control-focus", {
+      detail: { control: el },
+      bubbles: false,
+      composed: false
+    });
+    if (proceed) el.focus();
   }}
       >
         <div>
-          <gds-div font-weight="book"
-            >${el.dataset.label || el.label || el.ariaLabel}</gds-div
-          >
+          <gds-div font-weight="book">${label}</gds-div>
         </div>
         <gds-button
           size="xs"
           rank="secondary"
-          label=${`Move focus to ${el.label} field`}
+          label=${msg(str`Move focus to ${label} field`)}
         >
-          ${until(__privateMethod(this, _GdsFormSummary_instances, renderArrowIcon_fn).call(this, el), nothing)}
+          ${__privateMethod(this, _GdsFormSummary_instances, renderArrowIcon_fn).call(this, el)}
         </gds-button>
       </gds-card>
     </li>`;
@@ -204,10 +205,10 @@ getErrorControls_fn = function() {
     (el) => el.ariaInvalid === "true" || el.invalid
   );
 };
-renderArrowIcon_fn = async function(el) {
-  const selfTop = (await this._elRoot).getBoundingClientRect().top;
-  const elTop = el.getBoundingClientRect().top;
-  const isAbove = elTop < selfTop;
+renderArrowIcon_fn = function(el) {
+  const isAbove = Boolean(
+    this.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_PRECEDING
+  );
   return when(
     isAbove,
     () => html`<gds-icon-arrow-up></gds-icon-arrow-up>`,

package/components/index.d.ts

@@ -48,4 +48,5 @@ export * from './tabs';
 export * from './table';
 export * from './textarea';
 export * from './theme';
+export * from './tooltip';
 export * from './video';

package/components/index.js

@@ -48,4 +48,5 @@ export * from "./tabs/index.js";
 export * from "./table/index.js";
 export * from "./textarea/index.js";
 export * from "./theme/index.js";
+export * from "./tooltip/index.js";
 export * from "./video/index.js";

package/components/popover/popover.component.js

@@ -5,7 +5,7 @@ import {
   __privateMethod,
   __privateSet
 } from "../../chunks/chunk.H2T4A5YY.js";
-var _GdsPopover_instances, handleTriggerSlotChange_fn, _autoPositionCleanupFn, _isMobileViewport, _backdropEl, _clickOutsideTarget, registerClickOutside_fn, unregisterClickOutside_fn, _handleCancel, _dispatchUiStateEvent, _handleCloseButton, registerTriggerEvents_fn, unregisterTriggerEvents_fn, setupTriggerAttributes_fn, registerAutoPositioning_fn, _handleTriggerKeyDown, _handleTriggerClick, _focusFirstSlottedChild, _handleClickOutside, _handlePageScroll;
+var _GdsPopover_instances, handleTriggerSlotChange_fn, _autoPositionCleanupFn, _isMobileViewport, _backdropEl, _clickOutsideTarget, _hideVirtKbAfterGesture, cancelPendingVirtKbHide_fn, registerClickOutside_fn, unregisterClickOutside_fn, _handleCancel, _dispatchUiStateEvent, _handleCloseButton, registerTriggerEvents_fn, unregisterTriggerEvents_fn, setupTriggerAttributes_fn, registerAutoPositioning_fn, _handleTriggerKeyDown, _handleTriggerClick, _focusFirstSlottedChild, _handleClickOutside, _handlePageScroll;
 import { localized, msg } from "@lit/localize";
 import { property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
@@ -67,6 +67,9 @@ let GdsPopover = class extends GdsElement {
     // The node the click outside listener is currently attached to. Kept so that removal always
     // targets the same node it was added to, even if the resolved target would differ by then.
     __privateAdd(this, _clickOutsideTarget);
+    __privateAdd(this, _hideVirtKbAfterGesture, () => {
+      this._isVirtKbVisible = false;
+    });
     __privateAdd(this, _handleCancel, () => {
       if (__privateGet(this, _dispatchUiStateEvent).call(this, "cancel")) this.open = false;
     });
@@ -165,9 +168,15 @@ let GdsPopover = class extends GdsElement {
       const t = e.target;
       if (t === this) return;
       if (t.tagName === "INPUT" || t.tagName === "TEXTAREA") {
+        __privateMethod(this, _GdsPopover_instances, cancelPendingVirtKbHide_fn).call(this);
         this._isVirtKbVisible = true;
       } else {
-        this._isVirtKbVisible = false;
+        __privateMethod(this, _GdsPopover_instances, cancelPendingVirtKbHide_fn).call(this);
+        window.addEventListener(
+          "pointerup",
+          __privateGet(this, _hideVirtKbAfterGesture),
+          { once: true }
+        );
       }
     });
     this.addEventListener("blurin", (_) => {
@@ -178,6 +187,7 @@ let GdsPopover = class extends GdsElement {
     super.disconnectedCallback();
     __privateMethod(this, _GdsPopover_instances, unregisterTriggerEvents_fn).call(this);
     __privateMethod(this, _GdsPopover_instances, unregisterClickOutside_fn).call(this);
+    __privateMethod(this, _GdsPopover_instances, cancelPendingVirtKbHide_fn).call(this);
     window.removeEventListener("scroll", __privateGet(this, _handlePageScroll));
   }
   render() {
@@ -270,6 +280,10 @@ _autoPositionCleanupFn = new WeakMap();
 _isMobileViewport = new WeakMap();
 _backdropEl = new WeakMap();
 _clickOutsideTarget = new WeakMap();
+_hideVirtKbAfterGesture = new WeakMap();
+cancelPendingVirtKbHide_fn = function() {
+  window.removeEventListener("pointerup", __privateGet(this, _hideVirtKbAfterGesture));
+};
 registerClickOutside_fn = function() {
   if (!this.open || !this.isConnected) return;
   __privateMethod(this, _GdsPopover_instances, unregisterClickOutside_fn).call(this);

package/components/tooltip/index.d.ts

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

package/components/tooltip/index.js

@@ -0,0 +1 @@
+export * from "./tooltip.js";

package/components/tooltip/tooltip.component.d.ts

@@ -0,0 +1,52 @@
+import { Placement } from '@floating-ui/dom';
+import { GdsElement } from '../../gds-element';
+export type TooltipUIStateChangeReason = 'show' | 'close' | 'cancel';
+/**
+ * @element gds-tooltip
+ *
+ * A tooltip shows short, supplementary text about an element on hover or keyboard focus.
+ *
+ * Point the tooltip at its trigger with the `for` attribute, using the id of the trigger element.
+ * The tooltip is linked to the trigger through `aria-describedby`, so it does not replace the
+ * accessible name of the trigger. An icon-only button still needs its own label.
+ *
+ * Use a popover instead when the content is interactive or needs to stay open.
+ *
+ * @event gds-ui-state - Fired when the tooltip is about to open or close. Can be cancelled to prevent the state change. The `detail` object contains the `open` boolean for the resulting state, and the `reason` string, which is one of `show`, `close` or `cancel`.
+ *
+ * @slot - The tooltip text.
+ *
+ * @status beta
+ */
+export declare class GdsTooltip extends GdsElement {
+    #private;
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    /**
+     * Whether the tooltip is visible.
+     */
+    open: boolean;
+    /**
+     * The id of the trigger element. The id is resolved in the same document or shadow root as the tooltip.
+     */
+    for?: string;
+    /**
+     * The preferred placement of the tooltip relative to the trigger. The tooltip flips and shifts
+     * automatically when there is not enough space.
+     * Accepts any of the placements supported by Floating UI.
+     */
+    placement: Placement;
+    /**
+     * Delay in milliseconds before the tooltip opens on hover. Keyboard focus opens it without delay,
+     * and so does hovering another trigger right after a tooltip was shown.
+     */
+    delay: number;
+    private _side?;
+    private _multiline;
+    private _elContainer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): any;
+    private _handleForChange;
+    private _handleOpenChange;
+    private _handlePlacementChange;
+}

package/components/tooltip/tooltip.component.js

@@ -0,0 +1,339 @@
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet
+} from "../../chunks/chunk.H2T4A5YY.js";
+var _trigger, _autoUpdateCleanup, _showTimeout, _hideTimeout, _triggerObserver, _resizeObserver, _suppressed, _GdsTooltip_instances, observeLineCount_fn, resolveTrigger_fn, connectTrigger_fn, disconnectTrigger_fn, observeTriggerReplacement_fn, triggerObservationRoot_fn, describedByAttr_fn, startPositioning_fn, stopPositioning_fn, updatePosition_fn, show_fn, hide_fn, dispatchUiStateEvent_fn, _handleTriggerPointerEnter, _handleTriggerPointerLeave, _handleTriggerPointerDown, _handleTriggerFocusIn, _handleTriggerFocusOut, _scheduleHide, _cancelHide, _handleDocumentKeydown;
+import { property, query, state } from "lit/decorators.js";
+import {
+  autoUpdate,
+  computePosition,
+  flip,
+  hide,
+  offset,
+  shift
+} from "@floating-ui/dom";
+import { GdsElement } from "../../gds-element.js";
+import { gdsCustomElement, html } from "../../scoping.js";
+import { tokens } from "../../tokens.style.js";
+import { watch } from "../../utils/decorators/index.js";
+import { randomId } from "../../utils/helpers/id.js";
+import TooltipStyles from "./tooltip.styles.js";
+const HIDE_DELAY = 100;
+const SKIP_DELAY_WINDOW = 300;
+const openTooltips = /* @__PURE__ */ new Set();
+let lastClosedAt = 0;
+let GdsTooltip = class extends GdsElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _GdsTooltip_instances);
+    this.open = false;
+    this.placement = "top";
+    this.delay = 300;
+    this._multiline = false;
+    __privateAdd(this, _trigger);
+    __privateAdd(this, _autoUpdateCleanup);
+    __privateAdd(this, _showTimeout);
+    __privateAdd(this, _hideTimeout);
+    __privateAdd(this, _triggerObserver);
+    __privateAdd(this, _resizeObserver);
+    // Set by pressing the trigger, so the tooltip stays out of the way until the pointer leaves.
+    __privateAdd(this, _suppressed, false);
+    __privateAdd(this, _handleTriggerPointerEnter, (e) => {
+      if (e.pointerType === "touch" || __privateGet(this, _suppressed)) return;
+      __privateGet(this, _cancelHide).call(this);
+      clearTimeout(__privateGet(this, _showTimeout));
+      const skipDelay = openTooltips.size > 0 || Date.now() - lastClosedAt < SKIP_DELAY_WINDOW;
+      if (skipDelay) __privateMethod(this, _GdsTooltip_instances, show_fn).call(this);
+      else __privateSet(this, _showTimeout, setTimeout(() => __privateMethod(this, _GdsTooltip_instances, show_fn).call(this), this.delay));
+    });
+    __privateAdd(this, _handleTriggerPointerLeave, () => {
+      __privateSet(this, _suppressed, false);
+      __privateGet(this, _scheduleHide).call(this);
+    });
+    __privateAdd(this, _handleTriggerPointerDown, () => {
+      __privateSet(this, _suppressed, true);
+      __privateMethod(this, _GdsTooltip_instances, hide_fn).call(this, "close");
+    });
+    __privateAdd(this, _handleTriggerFocusIn, (e) => {
+      if (__privateGet(this, _suppressed)) return;
+      const focused = e.composedPath()[0];
+      if (focused instanceof Element && !focused.matches(":focus-visible")) return;
+      __privateGet(this, _cancelHide).call(this);
+      __privateMethod(this, _GdsTooltip_instances, show_fn).call(this);
+    });
+    __privateAdd(this, _handleTriggerFocusOut, (e) => {
+      const next = e.relatedTarget;
+      if (next instanceof Node && __privateGet(this, _trigger)?.contains(next)) return;
+      __privateSet(this, _suppressed, false);
+      __privateMethod(this, _GdsTooltip_instances, hide_fn).call(this, "close");
+    });
+    __privateAdd(this, _scheduleHide, () => {
+      clearTimeout(__privateGet(this, _showTimeout));
+      clearTimeout(__privateGet(this, _hideTimeout));
+      __privateSet(this, _hideTimeout, setTimeout(() => __privateMethod(this, _GdsTooltip_instances, hide_fn).call(this, "close"), HIDE_DELAY));
+    });
+    __privateAdd(this, _cancelHide, () => {
+      clearTimeout(__privateGet(this, _hideTimeout));
+    });
+    __privateAdd(this, _handleDocumentKeydown, (e) => {
+      if (e.key === "Escape" && __privateMethod(this, _GdsTooltip_instances, hide_fn).call(this, "cancel")) {
+        e.preventDefault();
+      }
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "tooltip");
+    this.setAttribute("popover", "manual");
+    if (!this.id) this.id = randomId();
+    this.addEventListener("pointerenter", __privateGet(this, _cancelHide));
+    this.addEventListener("pointerleave", __privateGet(this, _scheduleHide));
+    this.updateComplete.then(() => {
+      __privateMethod(this, _GdsTooltip_instances, connectTrigger_fn).call(this);
+      __privateMethod(this, _GdsTooltip_instances, observeTriggerReplacement_fn).call(this);
+      __privateMethod(this, _GdsTooltip_instances, observeLineCount_fn).call(this);
+      this._handleOpenChange();
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("pointerenter", __privateGet(this, _cancelHide));
+    this.removeEventListener("pointerleave", __privateGet(this, _scheduleHide));
+    clearTimeout(__privateGet(this, _showTimeout));
+    clearTimeout(__privateGet(this, _hideTimeout));
+    __privateGet(this, _triggerObserver)?.disconnect();
+    __privateSet(this, _triggerObserver, void 0);
+    __privateGet(this, _resizeObserver)?.disconnect();
+    __privateSet(this, _resizeObserver, void 0);
+    __privateMethod(this, _GdsTooltip_instances, stopPositioning_fn).call(this);
+    __privateMethod(this, _GdsTooltip_instances, disconnectTrigger_fn).call(this);
+    document.removeEventListener("keydown", __privateGet(this, _handleDocumentKeydown));
+    openTooltips.delete(this);
+  }
+  render() {
+    const side = this._side ?? this.placement.split("-")[0];
+    return html`<div
+      class="container side-${side} ${this._multiline ? "multiline" : ""}"
+    >
+      <slot></slot>
+    </div>`;
+  }
+  _handleForChange() {
+    if (!this.isConnected) return;
+    this.updateComplete.then(() => __privateMethod(this, _GdsTooltip_instances, connectTrigger_fn).call(this));
+  }
+  _handleOpenChange() {
+    this.updateComplete.then(() => {
+      if (!this.isConnected) return;
+      const supportsPopover = typeof this.showPopover === "function";
+      const isShowing = supportsPopover && this.matches(":popover-open");
+      if (this.open) {
+        openTooltips.add(this);
+        if (supportsPopover && !isShowing) this.showPopover();
+        __privateMethod(this, _GdsTooltip_instances, startPositioning_fn).call(this);
+        document.addEventListener("keydown", __privateGet(this, _handleDocumentKeydown));
+      } else {
+        if (openTooltips.delete(this)) lastClosedAt = Date.now();
+        if (isShowing) this.hidePopover();
+        __privateMethod(this, _GdsTooltip_instances, stopPositioning_fn).call(this);
+        document.removeEventListener("keydown", __privateGet(this, _handleDocumentKeydown));
+      }
+    });
+  }
+  _handlePlacementChange() {
+    this._side = void 0;
+    if (!this.open) return;
+    this.updateComplete.then(() => __privateMethod(this, _GdsTooltip_instances, startPositioning_fn).call(this));
+  }
+};
+_trigger = new WeakMap();
+_autoUpdateCleanup = new WeakMap();
+_showTimeout = new WeakMap();
+_hideTimeout = new WeakMap();
+_triggerObserver = new WeakMap();
+_resizeObserver = new WeakMap();
+_suppressed = new WeakMap();
+_GdsTooltip_instances = new WeakSet();
+// The content box excludes padding, so the padding change cannot flip the result back.
+observeLineCount_fn = function() {
+  __privateGet(this, _resizeObserver)?.disconnect();
+  __privateSet(this, _resizeObserver, new ResizeObserver(([entry]) => {
+    const lineHeight = parseFloat(
+      getComputedStyle(this._elContainer).lineHeight
+    );
+    this._multiline = entry.contentRect.height > lineHeight * 1.5;
+  }));
+  __privateGet(this, _resizeObserver).observe(this._elContainer);
+};
+resolveTrigger_fn = function() {
+  if (!this.for) return void 0;
+  const root = this.getRootNode();
+  return root.getElementById?.(this.for) ?? this.ownerDocument.getElementById(this.for) ?? void 0;
+};
+connectTrigger_fn = function() {
+  const trigger = __privateMethod(this, _GdsTooltip_instances, resolveTrigger_fn).call(this);
+  if (trigger === __privateGet(this, _trigger)) return;
+  __privateMethod(this, _GdsTooltip_instances, disconnectTrigger_fn).call(this);
+  __privateSet(this, _trigger, trigger);
+  if (!trigger) return;
+  trigger.addEventListener("pointerenter", __privateGet(this, _handleTriggerPointerEnter));
+  trigger.addEventListener("pointerleave", __privateGet(this, _handleTriggerPointerLeave));
+  trigger.addEventListener("pointerdown", __privateGet(this, _handleTriggerPointerDown));
+  trigger.addEventListener("focusin", __privateGet(this, _handleTriggerFocusIn));
+  trigger.addEventListener("focusout", __privateGet(this, _handleTriggerFocusOut));
+  const attr = __privateMethod(this, _GdsTooltip_instances, describedByAttr_fn).call(this, trigger);
+  const ids = (trigger.getAttribute(attr) ?? "").split(/\s+/).filter(Boolean);
+  if (!ids.includes(this.id)) {
+    trigger.setAttribute(attr, [...ids, this.id].join(" "));
+  }
+  if (this.open) __privateMethod(this, _GdsTooltip_instances, startPositioning_fn).call(this);
+};
+disconnectTrigger_fn = function() {
+  const trigger = __privateGet(this, _trigger);
+  if (!trigger) return;
+  trigger.removeEventListener("pointerenter", __privateGet(this, _handleTriggerPointerEnter));
+  trigger.removeEventListener("pointerleave", __privateGet(this, _handleTriggerPointerLeave));
+  trigger.removeEventListener("pointerdown", __privateGet(this, _handleTriggerPointerDown));
+  trigger.removeEventListener("focusin", __privateGet(this, _handleTriggerFocusIn));
+  trigger.removeEventListener("focusout", __privateGet(this, _handleTriggerFocusOut));
+  const attr = __privateMethod(this, _GdsTooltip_instances, describedByAttr_fn).call(this, trigger);
+  const ids = (trigger.getAttribute(attr) ?? "").split(/\s+/).filter((id) => id && id !== this.id);
+  if (ids.length) trigger.setAttribute(attr, ids.join(" "));
+  else trigger.removeAttribute(attr);
+  __privateMethod(this, _GdsTooltip_instances, stopPositioning_fn).call(this);
+  __privateSet(this, _trigger, void 0);
+  __privateSet(this, _suppressed, false);
+};
+// Re-resolves the trigger when it is re-rendered, replaced, or its id changes.
+observeTriggerReplacement_fn = function() {
+  __privateGet(this, _triggerObserver)?.disconnect();
+  __privateSet(this, _triggerObserver, new MutationObserver(() => {
+    if (this.for) __privateMethod(this, _GdsTooltip_instances, connectTrigger_fn).call(this);
+  }));
+  __privateGet(this, _triggerObserver).observe(__privateMethod(this, _GdsTooltip_instances, triggerObservationRoot_fn).call(this), {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ["id"]
+  });
+};
+// Narrows the observer to the nearest ancestor shared with the trigger, so a document-wide
+// mutation elsewhere doesn't re-run this tooltip's reconnect logic. Falls back to the tooltip's
+// own parent when the trigger hasn't resolved yet.
+triggerObservationRoot_fn = function() {
+  const trigger = __privateGet(this, _trigger) ?? __privateMethod(this, _GdsTooltip_instances, resolveTrigger_fn).call(this);
+  if (!trigger) return this.parentNode ?? this.getRootNode();
+  const ancestors = /* @__PURE__ */ new Set();
+  ancestors.add(this);
+  for (let n = this.parentNode; n; n = n.parentNode)
+    ancestors.add(n);
+  for (let n = trigger; n; n = n.parentNode) {
+    if (ancestors.has(n)) return n;
+  }
+  return this.getRootNode();
+};
+// GDS elements forward `gds-aria-*` to the element that carries their semantics.
+describedByAttr_fn = function(trigger) {
+  return trigger.nodeName.startsWith("GDS-") ? "gds-aria-describedby" : "aria-describedby";
+};
+startPositioning_fn = function() {
+  __privateMethod(this, _GdsTooltip_instances, stopPositioning_fn).call(this);
+  const trigger = __privateGet(this, _trigger);
+  if (!trigger || !this.open) return;
+  __privateSet(this, _autoUpdateCleanup, autoUpdate(
+    trigger,
+    this,
+    () => __privateMethod(this, _GdsTooltip_instances, updatePosition_fn).call(this, trigger)
+  ));
+};
+stopPositioning_fn = function() {
+  var _a;
+  (_a = __privateGet(this, _autoUpdateCleanup)) == null ? void 0 : _a.call(this);
+  __privateSet(this, _autoUpdateCleanup, void 0);
+};
+updatePosition_fn = async function(trigger) {
+  const { x, y, placement, middlewareData } = await computePosition(
+    trigger,
+    this,
+    {
+      placement: this.placement,
+      strategy: "fixed",
+      middleware: [offset(8), flip(), shift({ padding: 8 }), hide()]
+    }
+  );
+  this._side = placement.split("-")[0];
+  Object.assign(this.style, {
+    left: `${x}px`,
+    top: `${y}px`,
+    visibility: middlewareData.hide?.referenceHidden ? "hidden" : ""
+  });
+};
+show_fn = function() {
+  clearTimeout(__privateGet(this, _showTimeout));
+  if (this.open) return;
+  if (__privateMethod(this, _GdsTooltip_instances, dispatchUiStateEvent_fn).call(this, "show")) this.open = true;
+};
+hide_fn = function(reason) {
+  clearTimeout(__privateGet(this, _showTimeout));
+  clearTimeout(__privateGet(this, _hideTimeout));
+  if (!this.open) return false;
+  if (!__privateMethod(this, _GdsTooltip_instances, dispatchUiStateEvent_fn).call(this, reason)) return false;
+  this.open = false;
+  return true;
+};
+dispatchUiStateEvent_fn = function(reason) {
+  return this.dispatchCustomEvent("gds-ui-state", {
+    detail: { open: reason === "show", reason },
+    bubbles: false,
+    composed: false,
+    cancelable: true
+  });
+};
+_handleTriggerPointerEnter = new WeakMap();
+_handleTriggerPointerLeave = new WeakMap();
+_handleTriggerPointerDown = new WeakMap();
+_handleTriggerFocusIn = new WeakMap();
+_handleTriggerFocusOut = new WeakMap();
+_scheduleHide = new WeakMap();
+_cancelHide = new WeakMap();
+_handleDocumentKeydown = new WeakMap();
+GdsTooltip.styles = [tokens, TooltipStyles];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], GdsTooltip.prototype, "open", 2);
+__decorateClass([
+  property({ attribute: "for" })
+], GdsTooltip.prototype, "for", 2);
+__decorateClass([
+  property()
+], GdsTooltip.prototype, "placement", 2);
+__decorateClass([
+  property({ type: Number })
+], GdsTooltip.prototype, "delay", 2);
+__decorateClass([
+  state()
+], GdsTooltip.prototype, "_side", 2);
+__decorateClass([
+  state()
+], GdsTooltip.prototype, "_multiline", 2);
+__decorateClass([
+  query(".container")
+], GdsTooltip.prototype, "_elContainer", 2);
+__decorateClass([
+  watch("for")
+], GdsTooltip.prototype, "_handleForChange", 1);
+__decorateClass([
+  watch("open")
+], GdsTooltip.prototype, "_handleOpenChange", 1);
+__decorateClass([
+  watch("placement")
+], GdsTooltip.prototype, "_handlePlacementChange", 1);
+GdsTooltip = __decorateClass([
+  gdsCustomElement("gds-tooltip")
+], GdsTooltip);
+export {
+  GdsTooltip
+};

package/components/tooltip/tooltip.d.ts

@@ -0,0 +1,2 @@
+import { GdsTooltip } from './tooltip.component';
+export { GdsTooltip };

package/components/tooltip/tooltip.js

@@ -0,0 +1,6 @@
+import "../../chunks/chunk.H2T4A5YY.js";
+import { GdsTooltip } from "./tooltip.component.js";
+GdsTooltip.define();
+export {
+  GdsTooltip
+};

package/components/tooltip/tooltip.styles.d.ts

@@ -0,0 +1,2 @@
+declare const style: import("lit").CSSResult;
+export default style;