@sebgroup/green-core 3.30.0 → 3.31.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/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;

package/components/tooltip/tooltip.styles.js

@@ -0,0 +1,120 @@
+import "../../chunks/chunk.H2T4A5YY.js";
+import { css } from "lit";
+const style = css`
+  @layer base {
+    :host {
+      --_max-width: 28ch;
+      --_padding-block: var(--gds-sys-space-2xs);
+      --_padding-inline: var(--gds-sys-space-s);
+      --_radius: var(--gds-sys-radius-max);
+      --_enter-duration: var(--gds-sys-motion-duration-fastest);
+      --_exit-duration: calc(var(--_enter-duration) / 2);
+      --_scale-from: 0.6;
+      /* Same zero-velocity curves as the indeterminate progress, so motion settles instead of stopping */
+      --_easing-lead: cubic-bezier(0.2, 0, 0.3, 1);
+      --_easing-trail: cubic-bezier(0.7, 0, 0.8, 1);
+
+      /* Reset the UA popover styles, the host is positioned by Floating UI */
+      position: fixed;
+      inset: auto;
+      margin: 0;
+      padding: 0;
+      border: 0;
+      background: transparent;
+      color: inherit;
+      overflow: visible;
+      width: max-content;
+      height: auto;
+      pointer-events: auto;
+      /* Keeps the host rendered, and in the top layer, until the exit transition has finished */
+      transition:
+        display var(--_exit-duration) allow-discrete,
+        overlay var(--_exit-duration) allow-discrete;
+    }
+
+    :host(:not([open])) {
+      display: none;
+    }
+
+    /* Without the Popover API there is no top layer to render in */
+    @supports not selector(:popover-open) {
+      :host {
+        z-index: 1060;
+      }
+    }
+
+    .container {
+      box-sizing: border-box;
+      /* The text width stays the same when the padding grows on wrapped text */
+      max-inline-size: min(
+        calc(var(--_max-width) + 2 * var(--_padding-inline)),
+        calc(100vw - var(--gds-sys-space-m))
+      );
+      padding: var(--_padding-block) var(--_padding-inline);
+      border-radius: var(--_radius);
+      background-color: var(--gds-sys-color-l3-neutral-03);
+      color: var(--gds-sys-color-content-neutral-03);
+      font: var(--gds-sys-text-detail-s-regular);
+      overflow-wrap: break-word;
+    }
+
+    .container.multiline {
+      --_padding-block: var(--gds-sys-space-s);
+      --_padding-inline: var(--gds-sys-space-s);
+      --_radius: var(--gds-sys-radius-s);
+    }
+
+    /* The bubble grows from the edge that faces the trigger */
+    .side-top {
+      transform-origin: 50% 100%;
+    }
+    .side-bottom {
+      transform-origin: 50% 0;
+    }
+    .side-left {
+      transform-origin: 100% 50%;
+    }
+    .side-right {
+      transform-origin: 0 50%;
+    }
+
+    :host([open]) .container {
+      scale: 1;
+      opacity: 1;
+      transition:
+        scale var(--_enter-duration) var(--_easing-lead),
+        opacity var(--_enter-duration) var(--_easing-lead);
+    }
+
+    :host(:not([open])) .container {
+      scale: var(--_scale-from);
+      opacity: 0;
+      transition:
+        scale var(--_exit-duration) var(--_easing-trail),
+        opacity var(--_exit-duration) var(--_easing-trail);
+    }
+
+    @starting-style {
+      :host([open]) .container {
+        scale: var(--_scale-from);
+        opacity: 0;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :host {
+        --_scale-from: 1;
+      }
+    }
+
+    @media (forced-colors: active) {
+      .container {
+        border: var(--gds-sys-space-5xs) solid CanvasText;
+      }
+    }
+  }
+`;
+var tooltip_styles_default = style;
+export {
+  tooltip_styles_default as default
+};