@justeattakeaway/pie-tooltip 0.6.0 → 0.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +6 -6
  2. package/custom-elements.json +3 -3
  3. package/dist/index.d.ts +2 -2
  4. package/dist/index.js +30 -30
  5. package/dist/react.d.ts +2 -2
  6. package/package.json +4 -4
  7. package/src/defs.ts +5 -5
  8. package/src/tooltip.scss +17 -59
package/README.md CHANGED
@@ -48,7 +48,7 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
48
48
  |---|---|---|---|
49
49
  | `trigger` | Any string | The `id` of the element the panel is anchored to. The trigger lives elsewhere in the DOM and is never slotted into the tooltip. | `undefined` |
50
50
  | `isOpen` | `true`, `false` | When true, the panel is visible. The component never writes to this property. | `false` |
51
- | `position` | `top`, `top-start`, `top-end`, `bottom`, `bottom-start`, `bottom-end`, `left`, `left-start`, `left-end`, `right`, `right-start`, `right-end` | The side of the trigger the panel sits on, and its alignment along the cross axis. | `top` |
51
+ | `position` | `top-centre`, `top-start`, `top-end`, `bottom-centre`, `bottom-start`, `bottom-end`, `left-centre`, `left-start`, `left-end`, `right-centre`, `right-start`, `right-end` | The side of the trigger the panel sits on, and its alignment along the cross axis. | `top-centre` |
52
52
  | `size` | `default`, `fit-to-content`, `fill-container` | How the panel sizes itself. `default` is a fixed 280px and wraps, `fit-to-content` is as wide as its content, and `fill-container` matches the inline size of the trigger's parent element. Not applied when `type` is `icon`. | `default` |
53
53
  | `variant` | `default`, `inverse` | The colour treatment of the panel. `default` is the dark panel, `inverse` the light one. | `default` |
54
54
  | `type` | `default`, `icon` | The presentation of the panel. `icon` is the compact treatment intended for icon triggers: it has no arrow and is always as wide as its content, so `size` and `--tooltip-width` have no effect on it. | `default` |
@@ -98,13 +98,13 @@ Place the tooltip next to its trigger element in the DOM for the best accessibil
98
98
  `position` names a side and, optionally, an alignment along the opposite axis:
99
99
 
100
100
  ```
101
- top top-start top-end
102
- bottom bottom-start bottom-end
103
- left left-start left-end
104
- right right-start right-end
101
+ top-centre top-start top-end
102
+ bottom-centre bottom-start bottom-end
103
+ left-centre left-start left-end
104
+ right-centre right-start right-end
105
105
  ```
106
106
 
107
- In right-to-left languages, everything on the inline axis mirrors. The alignments follow the reading direction, so `top-start` aligns against the right-hand edge, and `left` and `right` swap: a panel asked for on the left appears on the right. The `-start` and `-end` alignments of `left` and `right` are on the block axis, which has no direction to mirror, so only the side moves.
107
+ In right-to-left languages, everything on the inline axis mirrors. The alignments follow the reading direction, so `top-start` aligns against the right-hand edge, and the `left` and `right` sides swap: a panel asked for on the left appears on the right. The `-start` and `-end` alignments of the `left` and `right` sides are on the block axis, which has no direction to mirror, so only the side moves.
108
108
 
109
109
  ## Sizing
110
110
 
package/custom-elements.json CHANGED
@@ -16,9 +16,9 @@
16
16
  "kind": "variable",
17
17
  "name": "positions",
18
18
  "type": {
19
- "text": "[\n 'top',\n 'top-start',\n 'top-end',\n 'bottom',\n 'bottom-start',\n 'bottom-end',\n 'left',\n 'left-start',\n 'left-end',\n 'right',\n 'right-start',\n 'right-end',\n]"
19
+ "text": "[\n 'top-centre',\n 'top-start',\n 'top-end',\n 'bottom-centre',\n 'bottom-start',\n 'bottom-end',\n 'left-centre',\n 'left-start',\n 'left-end',\n 'right-centre',\n 'right-start',\n 'right-end',\n]"
20
20
  },
21
- "default": "[ 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end', ]"
21
+ "default": "[ 'top-centre', 'top-start', 'top-end', 'bottom-centre', 'bottom-start', 'bottom-end', 'left-centre', 'left-start', 'left-end', 'right-centre', 'right-start', 'right-end', ]"
22
22
  },
23
23
  {
24
24
  "kind": "variable",
@@ -101,7 +101,7 @@
101
101
  "type": {
102
102
  "text": "DefaultProps"
103
103
  },
104
- "default": "{ isOpen: false, position: 'top', size: 'default', variant: 'default', type: 'default', isDismissible: false, headingLevel: 'h2', }"
104
+ "default": "{ isOpen: false, position: 'top-centre', size: 'default', variant: 'default', type: 'default', isDismissible: false, headingLevel: 'h2', }"
105
105
  }
106
106
  ],
107
107
  "exports": [
package/dist/index.d.ts CHANGED
@@ -38,7 +38,7 @@ export declare const ON_TOOLTIP_OPEN_EVENT = "pie-tooltip-open";
38
38
  export declare class PieTooltip extends PieElement implements TooltipProps {
39
39
  trigger: TooltipProps['trigger'];
40
40
  isOpen: boolean;
41
- position: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
41
+ position: "top-centre" | "top-start" | "top-end" | "bottom-centre" | "bottom-start" | "bottom-end" | "left-centre" | "left-start" | "left-end" | "right-centre" | "right-start" | "right-end";
42
42
  size: "default" | "fit-to-content" | "fill-container";
43
43
  variant: "default" | "inverse";
44
44
  type: "default" | "icon";
@@ -89,7 +89,7 @@ export declare class PieTooltip extends PieElement implements TooltipProps {
89
89
  render(): TemplateResult;
90
90
  }
91
91
 
92
- export declare const positions: readonly ["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end", "right", "right-start", "right-end"];
92
+ export declare const positions: readonly ["top-centre", "top-start", "top-end", "bottom-centre", "bottom-start", "bottom-end", "left-centre", "left-start", "left-end", "right-centre", "right-start", "right-end"];
93
93
 
94
94
  export declare const sizes: readonly ["default", "fit-to-content", "fill-container"];
95
95
 
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { LitElement as $, unsafeCSS as E, nothing as b } from "lit";
2
- import { property as v, queryAssignedElements as A, query as L, state as x } from "lit/decorators.js";
2
+ import { property as g, queryAssignedElements as A, query as L, state as x } from "lit/decorators.js";
3
3
  import { classMap as T } from "lit/directives/class-map.js";
4
4
  import { ifDefined as D } from "lit/directives/if-defined.js";
5
5
  import { unsafeStatic as M, html as y } from "lit/static-html.js";
@@ -11,34 +11,34 @@ const w = class w extends $ {
11
11
  this.getAttribute("v") || this.setAttribute("v", w.v);
12
12
  }
13
13
  };
14
- w.v = "0.6.0";
14
+ w.v = "0.7.1";
15
15
  let _ = w;
16
16
  const S = [
17
- "top",
17
+ "top-centre",
18
18
  "top-start",
19
19
  "top-end",
20
- "bottom",
20
+ "bottom-centre",
21
21
  "bottom-start",
22
22
  "bottom-end",
23
- "left",
23
+ "left-centre",
24
24
  "left-start",
25
25
  "left-end",
26
- "right",
26
+ "right-centre",
27
27
  "right-start",
28
28
  "right-end"
29
- ], B = ["default", "fit-to-content", "fill-container"], I = ["default", "inverse"], R = ["default", "icon"], q = ["h2", "h3", "h4", "h5", "h6"], rt = ["hover", "focus", "click"], st = ["tooltip", "dialog"], p = "pie-tooltip", a = "c-tooltip", F = `${p}-open`, V = `${p}-close`, g = {
29
+ ], B = ["default", "fit-to-content", "fill-container"], I = ["default", "inverse"], R = ["default", "icon"], q = ["h2", "h3", "h4", "h5", "h6"], rt = ["hover", "focus", "click"], st = ["tooltip", "dialog"], p = "pie-tooltip", a = "c-tooltip", F = `${p}-open`, V = `${p}-close`, v = {
30
30
  isOpen: !1,
31
- position: "top",
31
+ position: "top-centre",
32
32
  size: "default",
33
33
  variant: "default",
34
34
  type: "default",
35
35
  isDismissible: !1,
36
36
  headingLevel: "h2"
37
- }, H = '*,*:after,*:before{box-sizing:inherit}:host{--tooltip-anchor-top: 0;--tooltip-anchor-left: 0;--tooltip-anchor-width: 0;--tooltip-anchor-height: 0;--tooltip-container-inline-size: 0;--tooltip-offset: var(--dt-spacing-a);--tooltip-arrow-size: 8px;--tooltip-layer-offset: calc(var(--tooltip-offset) + var(--tooltip-arrow-size));position:absolute;top:0;left:0;z-index:var(--dt-z-index-tooltip);display:block;inline-size:0;block-size:0;pointer-events:none}.c-tooltip-origin{position:absolute;top:0;left:0;inline-size:0;block-size:0}.c-tooltip-anchor{position:absolute;top:var(--tooltip-anchor-top);left:var(--tooltip-anchor-left);inline-size:var(--tooltip-anchor-width);block-size:var(--tooltip-anchor-height)}.c-tooltip-layer{position:absolute;display:grid;grid-template-columns:100%;grid-template-rows:100%;visibility:hidden;transition:visibility 0s linear .15s}.c-tooltip-layer.is-open.is-positioned.is-anchorVisible{visibility:visible;transition-delay:0s}.c-tooltip-layer--type-icon{--tooltip-layer-offset: var(--tooltip-offset)}.c-tooltip-layer--top,.c-tooltip-layer--bottom{inset-inline-start:0;inline-size:100%}.c-tooltip-layer--left,.c-tooltip-layer--right{inset-block-start:0;block-size:100%}.c-tooltip-layer--top{inset-block-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--bottom{inset-block-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--left{inset-inline-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--right{inset-inline-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--top-start,.c-tooltip-layer--bottom-start{inset-inline-start:0;inline-size:100%}.c-tooltip-layer--left-start,.c-tooltip-layer--right-start{inset-block-start:0;block-size:100%}.c-tooltip-layer--top-start{inset-block-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--bottom-start{inset-block-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--left-start{inset-inline-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--right-start{inset-inline-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--top-end,.c-tooltip-layer--bottom-end{inset-inline-start:0;inline-size:100%}.c-tooltip-layer--left-end,.c-tooltip-layer--right-end{inset-block-start:0;block-size:100%}.c-tooltip-layer--top-end{inset-block-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--bottom-end{inset-block-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--left-end{inset-inline-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--right-end{inset-inline-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--top{place-items:center}.c-tooltip-layer--top-start{place-items:start}.c-tooltip-layer--top-end{place-items:end}.c-tooltip-layer--bottom{place-items:center}.c-tooltip-layer--bottom-start{place-items:start}.c-tooltip-layer--bottom-end{place-items:end}.c-tooltip-layer--left{place-items:center}.c-tooltip-layer--left-start{place-items:start}.c-tooltip-layer--left-end{place-items:end}.c-tooltip-layer--right{place-items:center}.c-tooltip-layer--right-start{place-items:start}.c-tooltip-layer--right-end{place-items:end}.c-tooltip{--tooltip-inline-size: 280px;--tooltip-max-inline-size: calc(100vw - var(--dt-spacing-d) * 2);--tooltip-background-color: var(--dt-color-container-inverse);--tooltip-content-color: var(--dt-color-content-inverse);--tooltip-border-radius: var(--dt-radius-rounded-b);--tooltip-padding-block: var(--dt-spacing-b);--tooltip-padding-inline: var(--dt-spacing-c);--tooltip-close-size: 32px;--tooltip-motion-duration: .15s;--tooltip-motion-easing: cubic-bezier(.45, 0, .55, 1);--tooltip-motion-translate-x: 0;--tooltip-motion-translate-y: 0;--tooltip-arrow-inset: calc(var(--tooltip-border-radius) + var(--tooltip-arrow-size));--tooltip-arrow-cross-inset: calc(var(--tooltip-arrow-cross-position, 50%) - var(--tooltip-arrow-size));--tooltip-arrow-main-inset-far: calc(100% - 2px) ;--tooltip-arrow-main-inset-near: calc(var(--tooltip-arrow-size) * -1);font-family:var(--dt-font-body-s-family),var(--dt-font-family-secondary),sans-serif;font-weight:var(--dt-font-body-s-weight);font-size:calc(var(--dt-font-body-s-size) * 1px);line-height:calc(var(--dt-font-body-s-line-height) * 1px);position:relative;white-space:normal;text-wrap:wrap;inline-size:var(--tooltip-width, var(--tooltip-inline-size));max-inline-size:var(--tooltip-max-inline-size);padding-block-start:var(--tooltip-padding-block);padding-block-end:var(--tooltip-padding-block);padding-inline-start:var(--tooltip-padding-inline);padding-inline-end:var(--tooltip-padding-inline);border-radius:var(--tooltip-border-radius);background-color:var(--tooltip-background-color);color:var(--tooltip-content-color);pointer-events:auto;opacity:0;transform:translate(var(--tooltip-motion-translate-x),var(--tooltip-motion-translate-y));transition:opacity var(--tooltip-motion-duration) var(--tooltip-motion-easing),transform var(--tooltip-motion-duration) var(--tooltip-motion-easing)}.c-tooltip-layer.is-open.is-positioned.is-anchorVisible .c-tooltip{--tooltip-motion-duration: .2s;opacity:1;transform:translate(0)}.c-tooltip--top{--tooltip-motion-translate-y: 4px}.c-tooltip--bottom{--tooltip-motion-translate-y: -4px}.c-tooltip--left{--tooltip-motion-translate-x: 4px}.c-tooltip--right{--tooltip-motion-translate-x: -4px}.c-tooltip--top-start{--tooltip-motion-translate-y: 4px}.c-tooltip--bottom-start{--tooltip-motion-translate-y: -4px}.c-tooltip--left-start{--tooltip-motion-translate-x: 4px}.c-tooltip--right-start{--tooltip-motion-translate-x: -4px}.c-tooltip--top-end{--tooltip-motion-translate-y: 4px}.c-tooltip--bottom-end{--tooltip-motion-translate-y: -4px}.c-tooltip--left-end{--tooltip-motion-translate-x: 4px}.c-tooltip--right-end{--tooltip-motion-translate-x: -4px}:host(:dir(rtl)) .c-tooltip--left{--tooltip-motion-translate-x: -4px}:host(:dir(rtl)) .c-tooltip--right{--tooltip-motion-translate-x: 4px}:host(:dir(rtl)) .c-tooltip--left-start{--tooltip-motion-translate-x: -4px}:host(:dir(rtl)) .c-tooltip--right-start{--tooltip-motion-translate-x: 4px}:host(:dir(rtl)) .c-tooltip--left-end{--tooltip-motion-translate-x: -4px}:host(:dir(rtl)) .c-tooltip--right-end{--tooltip-motion-translate-x: 4px}@media(prefers-reduced-motion:reduce){.c-tooltip-layer,.c-tooltip{transition:none}}.c-tooltip--inverse{--tooltip-background-color: var(--dt-color-container-default);--tooltip-content-color: var(--dt-color-content-default)}.c-tooltip--size-fit-to-content{--tooltip-inline-size: max-content}.c-tooltip--size-fill-container{--tooltip-inline-size: var(--tooltip-container-inline-size);--tooltip-max-inline-size: none}.c-tooltip--type-icon{--tooltip-border-radius: var(--dt-radius-rounded-e);--tooltip-padding-block: var(--dt-spacing-a);--tooltip-padding-inline: var(--dt-spacing-c);inline-size:max-content}.c-tooltip.is-dismissible{min-block-size:calc(var(--tooltip-close-size) + var(--dt-spacing-b) * 2);padding-inline-end:calc(var(--tooltip-padding-inline) + var(--tooltip-close-size))}.c-tooltip.is-dismissible:not(.has-heading){display:flex;flex-direction:column;justify-content:center}.c-tooltip--top{--tooltip-arrow-cross-position: 50%}.c-tooltip--top-start{--tooltip-arrow-cross-position: var(--tooltip-arrow-inset)}.c-tooltip--top-end{--tooltip-arrow-cross-position: calc(100% - var(--tooltip-arrow-inset))}.c-tooltip--bottom{--tooltip-arrow-cross-position: 50%}.c-tooltip--bottom-start{--tooltip-arrow-cross-position: var(--tooltip-arrow-inset)}.c-tooltip--bottom-end{--tooltip-arrow-cross-position: calc(100% - var(--tooltip-arrow-inset))}.c-tooltip--left{--tooltip-arrow-cross-position: 50%}.c-tooltip--left-start{--tooltip-arrow-cross-position: var(--tooltip-arrow-inset)}.c-tooltip--left-end{--tooltip-arrow-cross-position: calc(100% - var(--tooltip-arrow-inset))}.c-tooltip--right{--tooltip-arrow-cross-position: 50%}.c-tooltip--right-start{--tooltip-arrow-cross-position: var(--tooltip-arrow-inset)}.c-tooltip--right-end{--tooltip-arrow-cross-position: calc(100% - var(--tooltip-arrow-inset))}.c-tooltip-arrow{position:absolute;background-color:var(--tooltip-background-color)}.c-tooltip--top .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(0% 0%,100% 0%,100% 2px,50% 100%,0% 2px);inset-block-start:var(--tooltip-arrow-main-inset-far);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--bottom .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(50% 0%,100% var(--tooltip-arrow-size),100% 100%,0% 100%,0% var(--tooltip-arrow-size));inset-block-start:var(--tooltip-arrow-main-inset-near);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--left .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 0%,2px 0%,100% 50%,2px 100%,0% 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-far)}.c-tooltip--right .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 50%,var(--tooltip-arrow-size) 0%,100% 0%,100% 100%,var(--tooltip-arrow-size) 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-near)}.c-tooltip--top-start .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(0% 0%,100% 0%,100% 2px,50% 100%,0% 2px);inset-block-start:var(--tooltip-arrow-main-inset-far);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--bottom-start .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(50% 0%,100% var(--tooltip-arrow-size),100% 100%,0% 100%,0% var(--tooltip-arrow-size));inset-block-start:var(--tooltip-arrow-main-inset-near);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--left-start .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 0%,2px 0%,100% 50%,2px 100%,0% 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-far)}.c-tooltip--right-start .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 50%,var(--tooltip-arrow-size) 0%,100% 0%,100% 100%,var(--tooltip-arrow-size) 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-near)}.c-tooltip--top-end .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(0% 0%,100% 0%,100% 2px,50% 100%,0% 2px);inset-block-start:var(--tooltip-arrow-main-inset-far);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--bottom-end .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(50% 0%,100% var(--tooltip-arrow-size),100% 100%,0% 100%,0% var(--tooltip-arrow-size));inset-block-start:var(--tooltip-arrow-main-inset-near);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--left-end .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 0%,2px 0%,100% 50%,2px 100%,0% 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-far)}.c-tooltip--right-end .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 50%,var(--tooltip-arrow-size) 0%,100% 0%,100% 100%,var(--tooltip-arrow-size) 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-near)}:host(:dir(rtl)) .c-tooltip--left .c-tooltip-arrow,:host(:dir(rtl)) .c-tooltip--right .c-tooltip-arrow{transform:scaleX(-1)}:host(:dir(rtl)) .c-tooltip--left-start .c-tooltip-arrow,:host(:dir(rtl)) .c-tooltip--right-start .c-tooltip-arrow{transform:scaleX(-1)}:host(:dir(rtl)) .c-tooltip--left-end .c-tooltip-arrow,:host(:dir(rtl)) .c-tooltip--right-end .c-tooltip-arrow{transform:scaleX(-1)}.c-tooltip-heading{font-family:var(--dt-font-body-strong-s-family),var(--dt-font-family-secondary),sans-serif;font-weight:var(--dt-font-body-strong-s-weight);font-size:calc(var(--dt-font-body-strong-s-size) * 1px);line-height:calc(var(--dt-font-body-strong-s-line-height) * 1px);margin-block-start:0;margin-block-end:0}.c-tooltip-content{overflow-wrap:break-word}.c-tooltip-content:focus{outline:none}.c-tooltip.has-action .c-tooltip-action{display:flex;justify-content:flex-end;margin-block-start:var(--dt-spacing-a)}.c-tooltip.is-dismissible.has-action .c-tooltip-action{margin-inline-end:calc(var(--tooltip-close-size) * -1)}.c-tooltip.is-dismissible.has-action .c-tooltip-body{min-block-size:var(--tooltip-close-size)}.c-tooltip.is-dismissible.has-action:not(.has-heading) .c-tooltip-body{display:grid;align-content:center}.c-tooltip-close{position:absolute;inset-block-start:var(--dt-spacing-b);inset-inline-end:var(--dt-spacing-b)}.c-tooltip--top:before{content:"";position:absolute;inset-block-start:100%;block-size:var(--tooltip-layer-offset);inset-inline-start:0;inline-size:100%}.c-tooltip--bottom:before{content:"";position:absolute;inset-block-end:100%;block-size:var(--tooltip-layer-offset);inset-inline-start:0;inline-size:100%}.c-tooltip--left:before{content:"";position:absolute;inset-inline-start:100%;inline-size:var(--tooltip-layer-offset);inset-block-start:0;block-size:100%}.c-tooltip--right:before{content:"";position:absolute;inset-inline-end:100%;inline-size:var(--tooltip-layer-offset);inset-block-start:0;block-size:100%}.c-tooltip--top-start:before{content:"";position:absolute;inset-block-start:100%;block-size:var(--tooltip-layer-offset);inset-inline-start:0;inline-size:100%}.c-tooltip--bottom-start:before{content:"";position:absolute;inset-block-end:100%;block-size:var(--tooltip-layer-offset);inset-inline-start:0;inline-size:100%}.c-tooltip--left-start:before{content:"";position:absolute;inset-inline-start:100%;inline-size:var(--tooltip-layer-offset);inset-block-start:0;block-size:100%}.c-tooltip--right-start:before{content:"";position:absolute;inset-inline-end:100%;inline-size:var(--tooltip-layer-offset);inset-block-start:0;block-size:100%}.c-tooltip--top-end:before{content:"";position:absolute;inset-block-start:100%;block-size:var(--tooltip-layer-offset);inset-inline-start:0;inline-size:100%}.c-tooltip--bottom-end:before{content:"";position:absolute;inset-block-end:100%;block-size:var(--tooltip-layer-offset);inset-inline-start:0;inline-size:100%}.c-tooltip--left-end:before{content:"";position:absolute;inset-inline-start:100%;inline-size:var(--tooltip-layer-offset);inset-block-start:0;block-size:100%}.c-tooltip--right-end:before{content:"";position:absolute;inset-inline-end:100%;inline-size:var(--tooltip-layer-offset);inset-block-start:0;block-size:100%}';
38
- var j = Object.defineProperty, N = Object.getOwnPropertyDescriptor, c = (t, o, i, r) => {
39
- for (var e = r > 1 ? void 0 : r ? N(o, i) : o, s = t.length - 1, n; s >= 0; s--)
37
+ }, H = '*,*:after,*:before{box-sizing:inherit}:host{--tooltip-anchor-top: 0;--tooltip-anchor-left: 0;--tooltip-anchor-width: 0;--tooltip-anchor-height: 0;--tooltip-container-inline-size: 0;--tooltip-offset: var(--dt-spacing-a);--tooltip-arrow-size: 8px;--tooltip-layer-offset: calc(var(--tooltip-offset) + var(--tooltip-arrow-size));position:absolute;top:0;left:0;z-index:var(--dt-z-index-tooltip);display:block;inline-size:0;block-size:0;pointer-events:none}.c-tooltip-origin{position:absolute;top:0;left:0;inline-size:0;block-size:0}.c-tooltip-anchor{position:absolute;top:var(--tooltip-anchor-top);left:var(--tooltip-anchor-left);inline-size:var(--tooltip-anchor-width);block-size:var(--tooltip-anchor-height)}.c-tooltip-layer{position:absolute;display:grid;grid-template-columns:100%;grid-template-rows:100%;visibility:hidden;transition:visibility 0s linear .15s}.c-tooltip-layer.is-open.is-positioned.is-anchorVisible{visibility:visible;transition-delay:0s}.c-tooltip-layer--type-icon{--tooltip-layer-offset: var(--tooltip-offset)}.c-tooltip-layer--top-centre,.c-tooltip-layer--bottom-centre{inset-inline-start:0;inline-size:100%}.c-tooltip-layer--left-centre,.c-tooltip-layer--right-centre{inset-block-start:0;block-size:100%}.c-tooltip-layer--top-centre{inset-block-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--bottom-centre{inset-block-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--left-centre{inset-inline-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--right-centre{inset-inline-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--top-start,.c-tooltip-layer--bottom-start{inset-inline-start:0;inline-size:100%}.c-tooltip-layer--left-start,.c-tooltip-layer--right-start{inset-block-start:0;block-size:100%}.c-tooltip-layer--top-start{inset-block-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--bottom-start{inset-block-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--left-start{inset-inline-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--right-start{inset-inline-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--top-end,.c-tooltip-layer--bottom-end{inset-inline-start:0;inline-size:100%}.c-tooltip-layer--left-end,.c-tooltip-layer--right-end{inset-block-start:0;block-size:100%}.c-tooltip-layer--top-end{inset-block-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--bottom-end{inset-block-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--left-end{inset-inline-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--right-end{inset-inline-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--top-centre{place-items:center}.c-tooltip-layer--top-start{place-items:start}.c-tooltip-layer--top-end{place-items:end}.c-tooltip-layer--bottom-centre{place-items:center}.c-tooltip-layer--bottom-start{place-items:start}.c-tooltip-layer--bottom-end{place-items:end}.c-tooltip-layer--left-centre{place-items:center}.c-tooltip-layer--left-start{place-items:start}.c-tooltip-layer--left-end{place-items:end}.c-tooltip-layer--right-centre{place-items:center}.c-tooltip-layer--right-start{place-items:start}.c-tooltip-layer--right-end{place-items:end}.c-tooltip{--tooltip-inline-size: 280px;--tooltip-max-inline-size: calc(100vw - var(--dt-spacing-d) * 2);--tooltip-background-color: var(--dt-color-container-inverse);--tooltip-content-color: var(--dt-color-content-inverse);--tooltip-border-radius: var(--dt-radius-rounded-b);--tooltip-padding-block: var(--dt-spacing-b);--tooltip-padding-inline: var(--dt-spacing-c);--tooltip-close-size: 32px;--tooltip-close-block-inset: var(--dt-spacing-a-small);--tooltip-motion-duration: .15s;--tooltip-motion-easing: cubic-bezier(.45, 0, .55, 1);--tooltip-motion-translate-x: 0;--tooltip-motion-translate-y: 0;--tooltip-arrow-inset: calc(var(--tooltip-border-radius) + var(--tooltip-arrow-size));--tooltip-arrow-cross-inset: calc(var(--tooltip-arrow-cross-position, 50%) - var(--tooltip-arrow-size));--tooltip-arrow-main-inset-far: calc(100% - 2px) ;--tooltip-arrow-main-inset-near: calc(var(--tooltip-arrow-size) * -1);font-family:var(--dt-font-body-s-family),var(--dt-font-family-secondary),sans-serif;font-weight:var(--dt-font-body-s-weight);font-size:calc(var(--dt-font-body-s-size) * 1px);line-height:calc(var(--dt-font-body-s-line-height) * 1px);position:relative;white-space:normal;text-wrap:wrap;inline-size:var(--tooltip-width, var(--tooltip-inline-size));max-inline-size:var(--tooltip-max-inline-size);padding-block-start:var(--tooltip-padding-block);padding-block-end:var(--tooltip-padding-block);padding-inline-start:var(--tooltip-padding-inline);padding-inline-end:var(--tooltip-padding-inline);border-radius:var(--tooltip-border-radius);background-color:var(--tooltip-background-color);color:var(--tooltip-content-color);pointer-events:auto;opacity:0;transform:translate(var(--tooltip-motion-translate-x),var(--tooltip-motion-translate-y));transition:opacity var(--tooltip-motion-duration) var(--tooltip-motion-easing),transform var(--tooltip-motion-duration) var(--tooltip-motion-easing)}.c-tooltip-layer.is-open.is-positioned.is-anchorVisible .c-tooltip{--tooltip-motion-duration: .2s;opacity:1;transform:translate(0)}.c-tooltip--top-centre{--tooltip-motion-translate-y: 4px}.c-tooltip--bottom-centre{--tooltip-motion-translate-y: -4px}.c-tooltip--left-centre{--tooltip-motion-translate-x: 4px}.c-tooltip--right-centre{--tooltip-motion-translate-x: -4px}.c-tooltip--top-start{--tooltip-motion-translate-y: 4px}.c-tooltip--bottom-start{--tooltip-motion-translate-y: -4px}.c-tooltip--left-start{--tooltip-motion-translate-x: 4px}.c-tooltip--right-start{--tooltip-motion-translate-x: -4px}.c-tooltip--top-end{--tooltip-motion-translate-y: 4px}.c-tooltip--bottom-end{--tooltip-motion-translate-y: -4px}.c-tooltip--left-end{--tooltip-motion-translate-x: 4px}.c-tooltip--right-end{--tooltip-motion-translate-x: -4px}:host(:dir(rtl)) .c-tooltip--left-centre{--tooltip-motion-translate-x: -4px}:host(:dir(rtl)) .c-tooltip--right-centre{--tooltip-motion-translate-x: 4px}:host(:dir(rtl)) .c-tooltip--left-start{--tooltip-motion-translate-x: -4px}:host(:dir(rtl)) .c-tooltip--right-start{--tooltip-motion-translate-x: 4px}:host(:dir(rtl)) .c-tooltip--left-end{--tooltip-motion-translate-x: -4px}:host(:dir(rtl)) .c-tooltip--right-end{--tooltip-motion-translate-x: 4px}@media(prefers-reduced-motion:reduce){.c-tooltip-layer,.c-tooltip{transition:none}}.c-tooltip--inverse{--tooltip-background-color: var(--dt-color-container-default);--tooltip-content-color: var(--dt-color-content-default)}.c-tooltip--size-fit-to-content{--tooltip-inline-size: max-content}.c-tooltip--size-fill-container{--tooltip-inline-size: var(--tooltip-container-inline-size);--tooltip-max-inline-size: none}.c-tooltip--type-icon{--tooltip-border-radius: var(--dt-radius-rounded-e);--tooltip-padding-block: var(--dt-spacing-a);--tooltip-padding-inline: var(--dt-spacing-c);inline-size:max-content}.c-tooltip.is-dismissible{min-block-size:calc(var(--tooltip-close-size) + var(--tooltip-close-block-inset) * 2);padding-inline-end:calc(var(--tooltip-close-size) + var(--dt-spacing-b))}.c-tooltip--top-centre{--tooltip-arrow-cross-position: 50%}.c-tooltip--top-start{--tooltip-arrow-cross-position: var(--tooltip-arrow-inset)}.c-tooltip--top-end{--tooltip-arrow-cross-position: calc(100% - var(--tooltip-arrow-inset))}.c-tooltip--bottom-centre{--tooltip-arrow-cross-position: 50%}.c-tooltip--bottom-start{--tooltip-arrow-cross-position: var(--tooltip-arrow-inset)}.c-tooltip--bottom-end{--tooltip-arrow-cross-position: calc(100% - var(--tooltip-arrow-inset))}.c-tooltip--left-centre{--tooltip-arrow-cross-position: 50%}.c-tooltip--left-start{--tooltip-arrow-cross-position: var(--tooltip-arrow-inset)}.c-tooltip--left-end{--tooltip-arrow-cross-position: calc(100% - var(--tooltip-arrow-inset))}.c-tooltip--right-centre{--tooltip-arrow-cross-position: 50%}.c-tooltip--right-start{--tooltip-arrow-cross-position: var(--tooltip-arrow-inset)}.c-tooltip--right-end{--tooltip-arrow-cross-position: calc(100% - var(--tooltip-arrow-inset))}.c-tooltip-arrow{position:absolute;background-color:var(--tooltip-background-color)}.c-tooltip--top-centre .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(0% 0%,100% 0%,100% 2px,50% 100%,0% 2px);inset-block-start:var(--tooltip-arrow-main-inset-far);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--bottom-centre .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(50% 0%,100% var(--tooltip-arrow-size),100% 100%,0% 100%,0% var(--tooltip-arrow-size));inset-block-start:var(--tooltip-arrow-main-inset-near);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--left-centre .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 0%,2px 0%,100% 50%,2px 100%,0% 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-far)}.c-tooltip--right-centre .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 50%,var(--tooltip-arrow-size) 0%,100% 0%,100% 100%,var(--tooltip-arrow-size) 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-near)}.c-tooltip--top-start .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(0% 0%,100% 0%,100% 2px,50% 100%,0% 2px);inset-block-start:var(--tooltip-arrow-main-inset-far);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--bottom-start .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(50% 0%,100% var(--tooltip-arrow-size),100% 100%,0% 100%,0% var(--tooltip-arrow-size));inset-block-start:var(--tooltip-arrow-main-inset-near);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--left-start .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 0%,2px 0%,100% 50%,2px 100%,0% 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-far)}.c-tooltip--right-start .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 50%,var(--tooltip-arrow-size) 0%,100% 0%,100% 100%,var(--tooltip-arrow-size) 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-near)}.c-tooltip--top-end .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(0% 0%,100% 0%,100% 2px,50% 100%,0% 2px);inset-block-start:var(--tooltip-arrow-main-inset-far);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--bottom-end .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(50% 0%,100% var(--tooltip-arrow-size),100% 100%,0% 100%,0% var(--tooltip-arrow-size));inset-block-start:var(--tooltip-arrow-main-inset-near);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--left-end .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 0%,2px 0%,100% 50%,2px 100%,0% 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-far)}.c-tooltip--right-end .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 50%,var(--tooltip-arrow-size) 0%,100% 0%,100% 100%,var(--tooltip-arrow-size) 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-near)}:host(:dir(rtl)) .c-tooltip--left-centre .c-tooltip-arrow,:host(:dir(rtl)) .c-tooltip--right-centre .c-tooltip-arrow{transform:scaleX(-1)}:host(:dir(rtl)) .c-tooltip--left-start .c-tooltip-arrow,:host(:dir(rtl)) .c-tooltip--right-start .c-tooltip-arrow{transform:scaleX(-1)}:host(:dir(rtl)) .c-tooltip--left-end .c-tooltip-arrow,:host(:dir(rtl)) .c-tooltip--right-end .c-tooltip-arrow{transform:scaleX(-1)}.c-tooltip-heading{font-family:var(--dt-font-body-strong-s-family),var(--dt-font-family-secondary),sans-serif;font-weight:var(--dt-font-body-strong-s-weight);font-size:calc(var(--dt-font-body-strong-s-size) * 1px);line-height:calc(var(--dt-font-body-strong-s-line-height) * 1px);margin-block-start:0;margin-block-end:0}.c-tooltip-content{overflow-wrap:break-word}.c-tooltip-content:focus{outline:none}.c-tooltip.has-action .c-tooltip-action{display:flex;justify-content:flex-end;margin-block-start:var(--dt-spacing-b);margin-inline-end:calc((var(--tooltip-padding-inline) - var(--dt-spacing-b)) * -1)}.c-tooltip.is-dismissible.has-action .c-tooltip-action{margin-inline-end:calc(var(--tooltip-close-size) * -1)}.c-tooltip-close{position:absolute;inset-block-start:var(--tooltip-close-block-inset);inset-inline-end:0}.c-tooltip--top-centre:before{content:"";position:absolute;inset-block-start:100%;block-size:var(--tooltip-layer-offset);inset-inline-start:0;inline-size:100%}.c-tooltip--bottom-centre:before{content:"";position:absolute;inset-block-end:100%;block-size:var(--tooltip-layer-offset);inset-inline-start:0;inline-size:100%}.c-tooltip--left-centre:before{content:"";position:absolute;inset-inline-start:100%;inline-size:var(--tooltip-layer-offset);inset-block-start:0;block-size:100%}.c-tooltip--right-centre:before{content:"";position:absolute;inset-inline-end:100%;inline-size:var(--tooltip-layer-offset);inset-block-start:0;block-size:100%}.c-tooltip--top-start:before{content:"";position:absolute;inset-block-start:100%;block-size:var(--tooltip-layer-offset);inset-inline-start:0;inline-size:100%}.c-tooltip--bottom-start:before{content:"";position:absolute;inset-block-end:100%;block-size:var(--tooltip-layer-offset);inset-inline-start:0;inline-size:100%}.c-tooltip--left-start:before{content:"";position:absolute;inset-inline-start:100%;inline-size:var(--tooltip-layer-offset);inset-block-start:0;block-size:100%}.c-tooltip--right-start:before{content:"";position:absolute;inset-inline-end:100%;inline-size:var(--tooltip-layer-offset);inset-block-start:0;block-size:100%}.c-tooltip--top-end:before{content:"";position:absolute;inset-block-start:100%;block-size:var(--tooltip-layer-offset);inset-inline-start:0;inline-size:100%}.c-tooltip--bottom-end:before{content:"";position:absolute;inset-block-end:100%;block-size:var(--tooltip-layer-offset);inset-inline-start:0;inline-size:100%}.c-tooltip--left-end:before{content:"";position:absolute;inset-inline-start:100%;inline-size:var(--tooltip-layer-offset);inset-block-start:0;block-size:100%}.c-tooltip--right-end:before{content:"";position:absolute;inset-inline-end:100%;inline-size:var(--tooltip-layer-offset);inset-block-start:0;block-size:100%}';
38
+ var N = Object.defineProperty, j = Object.getOwnPropertyDescriptor, c = (t, o, i, r) => {
39
+ for (var e = r > 1 ? void 0 : r ? j(o, i) : o, s = t.length - 1, n; s >= 0; s--)
40
40
  (n = t[s]) && (e = (r ? n(o, i, e) : n(e)) || e);
41
- return r && e && j(o, i, e), e;
41
+ return r && e && N(o, i, e), e;
42
42
  };
43
43
  const X = 5, O = () => new Promise(requestAnimationFrame), U = (t) => {
44
44
  const o = (r) => !!r && r !== "none";
@@ -83,7 +83,7 @@ const X = 5, O = () => new Promise(requestAnimationFrame), U = (t) => {
83
83
  };
84
84
  let l = class extends _ {
85
85
  constructor() {
86
- super(...arguments), this.isOpen = g.isOpen, this.position = g.position, this.size = g.size, this.variant = g.variant, this.type = g.type, this.isDismissible = g.isDismissible, this.headingLevel = g.headingLevel, this.triggers = [], this._isPositioned = !1, this._isAnchorVisible = !0, this._clippedTriggerElement = null, this._triggerClippers = [], this._overlayModeDirty = !0, this._reanchorFrame = 0, this._openedByClick = !1, this._instanceId = crypto.randomUUID();
86
+ super(...arguments), this.isOpen = v.isOpen, this.position = v.position, this.size = v.size, this.variant = v.variant, this.type = v.type, this.isDismissible = v.isDismissible, this.headingLevel = v.headingLevel, this.triggers = [], this._isPositioned = !1, this._isAnchorVisible = !0, this._clippedTriggerElement = null, this._triggerClippers = [], this._overlayModeDirty = !0, this._reanchorFrame = 0, this._openedByClick = !1, this._instanceId = crypto.randomUUID();
87
87
  }
88
88
  get _headingId() {
89
89
  return `pie-tooltip-heading-${this._instanceId}`;
@@ -349,42 +349,42 @@ let l = class extends _ {
349
349
  };
350
350
  l.styles = E(H);
351
351
  c([
352
- v({ type: String })
352
+ g({ type: String })
353
353
  ], l.prototype, "trigger", 2);
354
354
  c([
355
- v({ type: Boolean })
355
+ g({ type: Boolean })
356
356
  ], l.prototype, "isOpen", 2);
357
357
  c([
358
- v({ type: String }),
359
- m(p, S, g.position)
358
+ g({ type: String }),
359
+ m(p, S, v.position)
360
360
  ], l.prototype, "position", 2);
361
361
  c([
362
- v({ type: String }),
363
- m(p, B, g.size)
362
+ g({ type: String }),
363
+ m(p, B, v.size)
364
364
  ], l.prototype, "size", 2);
365
365
  c([
366
- v({ type: String }),
367
- m(p, I, g.variant)
366
+ g({ type: String }),
367
+ m(p, I, v.variant)
368
368
  ], l.prototype, "variant", 2);
369
369
  c([
370
- v({ type: String }),
371
- m(p, R, g.type)
370
+ g({ type: String }),
371
+ m(p, R, v.type)
372
372
  ], l.prototype, "type", 2);
373
373
  c([
374
- v({ type: Boolean })
374
+ g({ type: Boolean })
375
375
  ], l.prototype, "isDismissible", 2);
376
376
  c([
377
- v({ type: String })
377
+ g({ type: String })
378
378
  ], l.prototype, "heading", 2);
379
379
  c([
380
- v({ type: String }),
381
- m(p, q, g.headingLevel)
380
+ g({ type: String }),
381
+ m(p, q, v.headingLevel)
382
382
  ], l.prototype, "headingLevel", 2);
383
383
  c([
384
- v({ type: Object })
384
+ g({ type: Object })
385
385
  ], l.prototype, "aria", 2);
386
386
  c([
387
- v({ type: Array })
387
+ g({ type: Array })
388
388
  ], l.prototype, "triggers", 2);
389
389
  c([
390
390
  A({ slot: "action" })
@@ -410,7 +410,7 @@ export {
410
410
  l as PieTooltip,
411
411
  a as componentClass,
412
412
  p as componentSelector,
413
- g as defaultProps,
413
+ v as defaultProps,
414
414
  q as headingLevels,
415
415
  st as modes,
416
416
  S as positions,
package/dist/react.d.ts CHANGED
@@ -41,7 +41,7 @@ export declare const PieTooltip: React_2.ForwardRefExoticComponent<React_2.Props
41
41
  declare class PieTooltip_2 extends PieElement implements TooltipProps {
42
42
  trigger: TooltipProps['trigger'];
43
43
  isOpen: boolean;
44
- position: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
44
+ position: "top-centre" | "top-start" | "top-end" | "bottom-centre" | "bottom-start" | "bottom-end" | "left-centre" | "left-start" | "left-end" | "right-centre" | "right-start" | "right-end";
45
45
  size: "default" | "fit-to-content" | "fill-container";
46
46
  variant: "default" | "inverse";
47
47
  type: "default" | "icon";
@@ -97,7 +97,7 @@ declare type PieTooltipEvents = {
97
97
  onPieTooltipClose?: (event: Event) => void;
98
98
  };
99
99
 
100
- export declare const positions: readonly ["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end", "right", "right-start", "right-end"];
100
+ export declare const positions: readonly ["top-centre", "top-start", "top-end", "bottom-centre", "bottom-start", "bottom-end", "left-centre", "left-start", "left-end", "right-centre", "right-start", "right-end"];
101
101
 
102
102
  declare type ReactBaseType = React_2.HTMLAttributes<HTMLElement>;
103
103
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-tooltip",
3
3
  "description": "PIE Design System Tooltip built using Web Components",
4
- "version": "0.6.0",
4
+ "version": "0.7.1",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",
@@ -37,11 +37,11 @@
37
37
  "devDependencies": {
38
38
  "@justeattakeaway/pie-components-config": "0.21.5",
39
39
  "@justeattakeaway/pie-css": "1.9.1",
40
- "@justeattakeaway/pie-monorepo-utils": "0.9.11"
40
+ "@justeattakeaway/pie-monorepo-utils": "0.9.13"
41
41
  },
42
42
  "dependencies": {
43
- "@justeattakeaway/pie-icon-button": "2.8.1",
44
- "@justeattakeaway/pie-icons-webc": "1.29.5",
43
+ "@justeattakeaway/pie-icon-button": "2.8.2",
44
+ "@justeattakeaway/pie-icons-webc": "1.30.0",
45
45
  "@justeattakeaway/pie-webc-core": "22.0.1"
46
46
  },
47
47
  "customElements": "custom-elements.json",
package/src/defs.ts CHANGED
@@ -1,16 +1,16 @@
1
1
  import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
2
2
 
3
3
  export const positions = [
4
- 'top',
4
+ 'top-centre',
5
5
  'top-start',
6
6
  'top-end',
7
- 'bottom',
7
+ 'bottom-centre',
8
8
  'bottom-start',
9
9
  'bottom-end',
10
- 'left',
10
+ 'left-centre',
11
11
  'left-start',
12
12
  'left-end',
13
- 'right',
13
+ 'right-centre',
14
14
  'right-start',
15
15
  'right-end',
16
16
  ] as const;
@@ -80,7 +80,7 @@ export type DefaultProps = ComponentDefaultProps<TooltipProps, keyof Omit<Toolti
80
80
 
81
81
  export const defaultProps: DefaultProps = {
82
82
  isOpen: false,
83
- position: 'top',
83
+ position: 'top-centre',
84
84
  size: 'default',
85
85
  variant: 'default',
86
86
  type: 'default',
package/src/tooltip.scss CHANGED
@@ -1,10 +1,6 @@
1
1
  @use '@justeattakeaway/pie-css/scss' as p;
2
2
 
3
- // All twelve position values are generated explicitly, none inferred.
4
- $tooltip-alignments: ('', '-start', '-end');
5
-
6
- // Zero-size, pinned to the containing block's origin. Trigger position is measured relative
7
- // to this point so the panel resolves against the document rather than the viewport.
3
+ $tooltip-alignments: ('-centre', '-start', '-end');
8
4
 
9
5
  :host {
10
6
  --tooltip-anchor-top: 0;
@@ -13,12 +9,7 @@ $tooltip-alignments: ('', '-start', '-end');
13
9
  --tooltip-anchor-height: 0;
14
10
  --tooltip-container-inline-size: 0;
15
11
  --tooltip-offset: var(--dt-spacing-a);
16
-
17
- // Arrow protrusion depth; base is size × 2 (16px wide × 8px tall).
18
- // Declared on the host so the placement layer can account for it.
19
12
  --tooltip-arrow-size: 8px;
20
-
21
- // Layer must clear both the offset and the arrow so the arrow tip doesn't touch the trigger.
22
13
  --tooltip-layer-offset: calc(var(--tooltip-offset) + var(--tooltip-arrow-size));
23
14
 
24
15
  position: absolute;
@@ -31,7 +22,7 @@ $tooltip-alignments: ('', '-start', '-end');
31
22
  inline-size: 0;
32
23
  block-size: 0;
33
24
 
34
- // Inherits to the anchor; the panel opts back in with `pointer-events: auto`.
25
+ // The host overlays the trigger; only the panel opts back into pointer events.
35
26
  pointer-events: none;
36
27
  }
37
28
 
@@ -44,7 +35,6 @@ $tooltip-alignments: ('', '-start', '-end');
44
35
  block-size: 0;
45
36
  }
46
37
 
47
- // Sized and positioned to match the trigger; the placement layer resolves against this box.
48
38
  .c-tooltip-anchor {
49
39
  position: absolute;
50
40
  top: var(--tooltip-anchor-top);
@@ -54,8 +44,6 @@ $tooltip-alignments: ('', '-start', '-end');
54
44
  block-size: var(--tooltip-anchor-height);
55
45
  }
56
46
 
57
- // Grid so panel alignment uses logical start/center/end. A panel wider than its track overflows
58
- // evenly from center, keeping it centred on the trigger.
59
47
  .c-tooltip-layer {
60
48
  position: absolute;
61
49
 
@@ -65,8 +53,6 @@ $tooltip-alignments: ('', '-start', '-end');
65
53
  visibility: hidden;
66
54
  transition: visibility 0s linear 150ms;
67
55
 
68
- // `is-anchorVisible` is false when the trigger has been scrolled entirely out of a clipping
69
- // ancestor: there is nothing left to point at, so the panel hides rather than float free.
70
56
  &.is-open.is-positioned.is-anchorVisible {
71
57
  visibility: visible;
72
58
  transition-delay: 0s;
@@ -100,8 +86,7 @@ $tooltip-alignments: ('', '-start', '-end');
100
86
  inset-block-start: calc(100% + var(--tooltip-layer-offset));
101
87
  }
102
88
 
103
- // `left`/`right` resolve on the inline axis and swap in RTL. Their -start/-end alignments
104
- // are on the block axis, which has no direction to mirror.
89
+ // left/right resolve on the inline axis and swap in RTL; their -start/-end alignments do not.
105
90
  .c-tooltip-layer--left#{$alignment} {
106
91
  inset-inline-end: calc(100% + var(--tooltip-layer-offset));
107
92
  }
@@ -112,7 +97,7 @@ $tooltip-alignments: ('', '-start', '-end');
112
97
  }
113
98
 
114
99
  @each $side in (top, bottom, left, right) {
115
- .c-tooltip-layer--#{$side} {
100
+ .c-tooltip-layer--#{$side}-centre {
116
101
  place-items: center;
117
102
  }
118
103
 
@@ -134,15 +119,12 @@ $tooltip-alignments: ('', '-start', '-end');
134
119
  --tooltip-padding-block: var(--dt-spacing-b);
135
120
  --tooltip-padding-inline: var(--dt-spacing-c);
136
121
  --tooltip-close-size: 32px;
122
+ --tooltip-close-block-inset: var(--dt-spacing-a-small);
137
123
  --tooltip-motion-duration: 150ms;
138
124
  --tooltip-motion-easing: cubic-bezier(0.45, 0, 0.55, 1);
139
125
  --tooltip-motion-translate-x: 0;
140
126
  --tooltip-motion-translate-y: 0;
141
-
142
- // Arrow centre offset from the aligned edge for -start/-end. Clear of the corner radius.
143
127
  --tooltip-arrow-inset: calc(var(--tooltip-border-radius) + var(--tooltip-arrow-size));
144
-
145
- // Centre position → box inset. Percentages resolve per axis, so one declaration covers both.
146
128
  --tooltip-arrow-cross-inset: calc(var(--tooltip-arrow-cross-position, 50%) - var(--tooltip-arrow-size));
147
129
 
148
130
  // 2px overlap into the panel prevents subpixel gaps between arrow and edge.
@@ -153,9 +135,7 @@ $tooltip-alignments: ('', '-start', '-end');
153
135
 
154
136
  position: relative;
155
137
 
156
- // Reset the inherited text layout: a host page that sets `white-space` or `text-wrap` to
157
- // `nowrap` (typical of header action bars) would otherwise reach the slotted content and
158
- // inflate the panel's min-content size past its own inline-size.
138
+ // Resets an inherited `nowrap` from the host page that would inflate the panel's min-content size.
159
139
  white-space: normal;
160
140
  text-wrap: wrap;
161
141
 
@@ -235,7 +215,7 @@ $tooltip-alignments: ('', '-start', '-end');
235
215
  --tooltip-max-inline-size: none;
236
216
  }
237
217
 
238
- // Also declares inline-size to prevent `--tooltip-width` from overriding it.
218
+ // Also declares inline-size so `--tooltip-width` cannot override it.
239
219
  .c-tooltip--type-icon {
240
220
  --tooltip-border-radius: var(--dt-radius-rounded-e);
241
221
  --tooltip-padding-block: var(--dt-spacing-a);
@@ -245,19 +225,12 @@ $tooltip-alignments: ('', '-start', '-end');
245
225
  }
246
226
 
247
227
  .c-tooltip.is-dismissible {
248
- // The close button is taller than one content line; reserve its block size.
249
- min-block-size: calc(var(--tooltip-close-size) + var(--dt-spacing-b) * 2);
250
- padding-inline-end: calc(var(--tooltip-padding-inline) + var(--tooltip-close-size));
251
- }
228
+ // Reserves the close button's box so an empty or one-line panel still fits it.
229
+ min-block-size: calc(var(--tooltip-close-size) + var(--tooltip-close-block-inset) * 2);
252
230
 
253
- .c-tooltip.is-dismissible:not(.has-heading) {
254
- display: flex;
255
- flex-direction: column;
256
- justify-content: center;
231
+ padding-inline-end: calc(var(--tooltip-close-size) + var(--dt-spacing-b));
257
232
  }
258
233
 
259
- // Arrow: clip-path triangle, 16px wide × 8px tall. Both insets are logical so the arrow
260
- // follows the panel when left/right swap in RTL.
261
234
  @mixin tooltip-arrow-clip($direction) {
262
235
  @if $direction == up {
263
236
  inline-size: calc(var(--tooltip-arrow-size) * 2);
@@ -279,7 +252,7 @@ $tooltip-alignments: ('', '-start', '-end');
279
252
  }
280
253
 
281
254
  @each $side in (top, bottom, left, right) {
282
- .c-tooltip--#{$side} {
255
+ .c-tooltip--#{$side}-centre {
283
256
  --tooltip-arrow-cross-position: 50%;
284
257
  }
285
258
 
@@ -349,9 +322,7 @@ $tooltip-alignments: ('', '-start', '-end');
349
322
  overflow-wrap: break-word;
350
323
  }
351
324
 
352
- // The content is the programmatic focus target in dialog mode (see `focusPanel`). It is never
353
- // reached by Tab, which moves between the panel's own controls, so it draws no focus ring of
354
- // its own: the controls inside the panel carry their own focus indicators.
325
+ // Programmatic focus target in dialog mode, never reached by Tab, so it draws no focus ring.
355
326
  .c-tooltip-content:focus {
356
327
  outline: none;
357
328
  }
@@ -359,34 +330,21 @@ $tooltip-alignments: ('', '-start', '-end');
359
330
  .c-tooltip.has-action .c-tooltip-action {
360
331
  display: flex;
361
332
  justify-content: flex-end;
362
- margin-block-start: var(--dt-spacing-a);
333
+ margin-block-start: var(--dt-spacing-b);
334
+ margin-inline-end: calc((var(--tooltip-padding-inline) - var(--dt-spacing-b)) * -1);
363
335
  }
364
336
 
365
337
  .c-tooltip.is-dismissible.has-action .c-tooltip-action {
366
338
  margin-inline-end: calc(var(--tooltip-close-size) * -1);
367
339
  }
368
340
 
369
- // Close button is out of flow; reserving its block size on the body aligns the action row with it.
370
- .c-tooltip.is-dismissible.has-action .c-tooltip-body {
371
- min-block-size: var(--tooltip-close-size);
372
- }
373
-
374
- // No heading means one content line; keep it centred against the close button.
375
- .c-tooltip.is-dismissible.has-action:not(.has-heading) .c-tooltip-body {
376
- display: grid;
377
- align-content: center;
378
- }
379
-
380
341
  .c-tooltip-close {
381
342
  position: absolute;
382
- inset-block-start: var(--dt-spacing-b);
383
- inset-inline-end: var(--dt-spacing-b);
343
+ inset-block-start: var(--tooltip-close-block-inset);
344
+ inset-inline-end: 0;
384
345
  }
385
346
 
386
- // Hover bridge: a transparent pseudo-element extending from each panel edge toward its
387
- // trigger, covering the --tooltip-layer-offset gap. Keeps the hover region intact so
388
- // the pointer can travel from the trigger into the panel without the close timer firing.
389
- // Sized from --tooltip-layer-offset so widening --tooltip-offset cannot open a hole.
347
+ // Hover bridge over the --tooltip-layer-offset gap so the pointer can reach the panel without the close timer firing.
390
348
  @each $alignment in $tooltip-alignments {
391
349
  .c-tooltip--top#{$alignment}::before {
392
350
  content: '';