@politiet/sheriff-web-components 2.7.0 → 2.7.2

package/dist/sds-tooltip/sds-tooltip.js

@@ -0,0 +1,140 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { guardedCustomElement } from '../utils/guarded-custom-element';
+import { styles } from './sds-tooltip.styles';
+import '../shared/positioning.js';
+import { SDSEventDispatcherMixin } from '../mixins/sds-event-dispatcher-mixin';
+let SDSTooltip = class SDSTooltip extends SDSEventDispatcherMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.placement = 'top';
+        this.triggers = [];
+        this.cleanups = [];
+        this.onSelfMouseEnter = () => {
+            clearTimeout(this.hoverTimeout);
+        };
+        this.onSelfMouseLeave = () => this.hide();
+        this.onKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                this.hide();
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'tooltip');
+        this.setAttribute('popover', 'manual');
+        // Avoid screen readers entering the tooltip
+        // Rather set the tooltip's text as an aria-label on the trigger element
+        this.setAttribute('aria-hidden', 'true');
+        this.dataset.placement = this.placement;
+        this.bindTriggers();
+        // Defer to allow triggers to complete their first render
+        requestAnimationFrame(() => this.syncTriggerLabels());
+    }
+    updated(changed) {
+        if (changed.has('placement')) {
+            this.dataset.placement = this.placement;
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        clearTimeout(this.hoverTimeout);
+        document.removeEventListener('keydown', this.onKeyDown);
+        for (const cleanup of this.cleanups) {
+            cleanup();
+        }
+        this.cleanups = [];
+        this.triggers = [];
+        this.activeTrigger = undefined;
+    }
+    render() {
+        return html `<slot @slotchange=${this.syncTriggerLabels}></slot>`;
+    }
+    syncTriggerLabels() {
+        const text = this.textContent?.trim() ?? '';
+        if (!text) {
+            return;
+        }
+        this.triggers.map((trigger) => {
+            const element = trigger.shadowRoot?.querySelector('button, a') ?? trigger;
+            this.cleanups.push(() => element.removeAttribute('aria-label'));
+            element.setAttribute('aria-label', text);
+        });
+    }
+    bindTriggers() {
+        if (!this.id)
+            return;
+        this.triggers = [...document.querySelectorAll('[aria-describedby]')].filter((trigger) => {
+            const describedBy = trigger.getAttribute('aria-describedby');
+            // `aria-describedby` is a space-separated ID list, e.g. "field-help tooltip-id".
+            // `/\s+/` splits on one or more whitespace characters so we can match this tooltip's id.
+            return describedBy?.split(/\s+/).includes(this.id) ?? false;
+        });
+        for (const trigger of this.triggers) {
+            const onMouseEnter = () => this.show(trigger);
+            const onMouseLeave = () => this.scheduleHide();
+            const onFocusIn = () => this.show(trigger);
+            const onFocusOut = () => this.hide();
+            trigger.addEventListener('mouseenter', onMouseEnter);
+            trigger.addEventListener('mouseleave', onMouseLeave);
+            trigger.addEventListener('focusin', onFocusIn);
+            trigger.addEventListener('focusout', onFocusOut);
+            this.cleanups.push(() => {
+                trigger.removeEventListener('mouseenter', onMouseEnter);
+                trigger.removeEventListener('mouseleave', onMouseLeave);
+                trigger.removeEventListener('focusin', onFocusIn);
+                trigger.removeEventListener('focusout', onFocusOut);
+            });
+        }
+        // Hovering the tooltip itself keeps it open (MDN pattern)
+        this.addEventListener('mouseenter', this.onSelfMouseEnter);
+        this.addEventListener('mouseleave', this.onSelfMouseLeave);
+        this.cleanups.push(() => {
+            this.removeEventListener('mouseenter', this.onSelfMouseEnter);
+            this.removeEventListener('mouseleave', this.onSelfMouseLeave);
+        });
+    }
+    show(trigger) {
+        clearTimeout(this.hoverTimeout);
+        if (!this.matches(':popover-open')) {
+            this.showPopover();
+        }
+        if (this.activeTrigger !== trigger) {
+            this.activeTrigger = trigger;
+            this.dispatchSheriffEvent('toggle', trigger);
+        }
+        document.addEventListener('keydown', this.onKeyDown);
+    }
+    hide() {
+        clearTimeout(this.hoverTimeout);
+        try {
+            this.hidePopover();
+        }
+        catch {
+            // Already hidden
+        }
+        this.activeTrigger = undefined;
+        document.removeEventListener('keydown', this.onKeyDown);
+    }
+    scheduleHide() {
+        clearTimeout(this.hoverTimeout);
+        // Grace period to let cursor travel from trigger to tooltip
+        this.hoverTimeout = setTimeout(() => this.hide(), 200);
+    }
+};
+SDSTooltip.styles = [styles];
+__decorate([
+    property({ type: String, reflect: true })
+], SDSTooltip.prototype, "placement", void 0);
+SDSTooltip = __decorate([
+    guardedCustomElement('sds-tooltip')
+], SDSTooltip);
+export { SDSTooltip };
+//# sourceMappingURL=sds-tooltip.js.map

package/dist/sds-tooltip/sds-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-tooltip.js","sourceRoot":"","sources":["../../src/sds-tooltip/sds-tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-tooltip.styles';\nimport '../shared/positioning.js';\nimport { SDSEventDispatcherMixin } from '../mixins/sds-event-dispatcher-mixin';\n\ntype SDSTooltipPlacement = 'top' | 'bottom' | 'left' | 'right';\n\nexport interface SDSTooltipProps {\n\tid: string;\n\tplacement?: SDSTooltipPlacement;\n}\n\n@guardedCustomElement('sds-tooltip')\nexport class SDSTooltip extends SDSEventDispatcherMixin(LitElement) {\n\tstatic override styles = [styles];\n\n\t@property({ type: String, reflect: true })\n\tplacement: SDSTooltipPlacement = 'top';\n\n\tprivate triggers: HTMLElement[] = [];\n\tprivate cleanups: (() => void)[] = [];\n\tprivate hoverTimeout: ReturnType<typeof setTimeout> | undefined;\n\tprivate activeTrigger: HTMLElement | undefined;\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis.setAttribute('role', 'tooltip');\n\t\tthis.setAttribute('popover', 'manual');\n\t\t// Avoid screen readers entering the tooltip\n\t\t// Rather set the tooltip's text as an aria-label on the trigger element\n\t\tthis.setAttribute('aria-hidden', 'true');\n\t\tthis.dataset.placement = this.placement;\n\t\tthis.bindTriggers();\n\t\t// Defer to allow triggers to complete their first render\n\t\trequestAnimationFrame(() => this.syncTriggerLabels());\n\t}\n\n\toverride updated(changed: Map<string, unknown>) {\n\t\tif (changed.has('placement')) {\n\t\t\tthis.dataset.placement = this.placement;\n\t\t}\n\t}\n\n\toverride disconnectedCallback() {\n\t\tsuper.disconnectedCallback();\n\t\tclearTimeout(this.hoverTimeout);\n\t\tdocument.removeEventListener('keydown', this.onKeyDown);\n\t\tfor (const cleanup of this.cleanups) {\n\t\t\tcleanup();\n\t\t}\n\t\tthis.cleanups = [];\n\t\tthis.triggers = [];\n\t\tthis.activeTrigger = undefined;\n\t}\n\n\toverride render() {\n\t\treturn html`<slot @slotchange=${this.syncTriggerLabels}></slot>`;\n\t}\n\n\tprivate syncTriggerLabels() {\n\t\tconst text = this.textContent?.trim() ?? '';\n\t\tif (!text) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.triggers.map((trigger) => {\n\t\t\tconst element = trigger.shadowRoot?.querySelector<HTMLElement>('button, a') ?? trigger;\n\t\t\tthis.cleanups.push(() => element.removeAttribute('aria-label'));\n\t\t\telement.setAttribute('aria-label', text);\n\t\t});\n\t}\n\n\tprivate bindTriggers() {\n\t\tif (!this.id) return;\n\n\t\tthis.triggers = [...document.querySelectorAll<HTMLElement>('[aria-describedby]')].filter((trigger) => {\n\t\t\tconst describedBy = trigger.getAttribute('aria-describedby');\n\t\t\t// `aria-describedby` is a space-separated ID list, e.g. \"field-help tooltip-id\".\n\t\t\t// `/\\s+/` splits on one or more whitespace characters so we can match this tooltip's id.\n\t\t\treturn describedBy?.split(/\\s+/).includes(this.id) ?? false;\n\t\t});\n\n\t\tfor (const trigger of this.triggers) {\n\t\t\tconst onMouseEnter = () => this.show(trigger);\n\t\t\tconst onMouseLeave = () => this.scheduleHide();\n\t\t\tconst onFocusIn = () => this.show(trigger);\n\t\t\tconst onFocusOut = () => this.hide();\n\n\t\t\ttrigger.addEventListener('mouseenter', onMouseEnter);\n\t\t\ttrigger.addEventListener('mouseleave', onMouseLeave);\n\t\t\ttrigger.addEventListener('focusin', onFocusIn);\n\t\t\ttrigger.addEventListener('focusout', onFocusOut);\n\n\t\t\tthis.cleanups.push(() => {\n\t\t\t\ttrigger.removeEventListener('mouseenter', onMouseEnter);\n\t\t\t\ttrigger.removeEventListener('mouseleave', onMouseLeave);\n\t\t\t\ttrigger.removeEventListener('focusin', onFocusIn);\n\t\t\t\ttrigger.removeEventListener('focusout', onFocusOut);\n\t\t\t});\n\t\t}\n\n\t\t// Hovering the tooltip itself keeps it open (MDN pattern)\n\t\tthis.addEventListener('mouseenter', this.onSelfMouseEnter);\n\t\tthis.addEventListener('mouseleave', this.onSelfMouseLeave);\n\t\tthis.cleanups.push(() => {\n\t\t\tthis.removeEventListener('mouseenter', this.onSelfMouseEnter);\n\t\t\tthis.removeEventListener('mouseleave', this.onSelfMouseLeave);\n\t\t});\n\t}\n\n\tprivate onSelfMouseEnter = () => {\n\t\tclearTimeout(this.hoverTimeout);\n\t};\n\tprivate onSelfMouseLeave = () => this.hide();\n\n\tprivate show(trigger: HTMLElement) {\n\t\tclearTimeout(this.hoverTimeout);\n\n\t\tif (!this.matches(':popover-open')) {\n\t\t\tthis.showPopover();\n\t\t}\n\n\t\tif (this.activeTrigger !== trigger) {\n\t\t\tthis.activeTrigger = trigger;\n\t\t\tthis.dispatchSheriffEvent('toggle', trigger);\n\t\t}\n\n\t\tdocument.addEventListener('keydown', this.onKeyDown);\n\t}\n\n\tprivate hide() {\n\t\tclearTimeout(this.hoverTimeout);\n\n\t\ttry {\n\t\t\tthis.hidePopover();\n\t\t} catch {\n\t\t\t// Already hidden\n\t\t}\n\n\t\tthis.activeTrigger = undefined;\n\t\tdocument.removeEventListener('keydown', this.onKeyDown);\n\t}\n\n\tprivate scheduleHide() {\n\t\tclearTimeout(this.hoverTimeout);\n\t\t// Grace period to let cursor travel from trigger to tooltip\n\t\tthis.hoverTimeout = setTimeout(() => this.hide(), 200);\n\t}\n\n\tprivate onKeyDown = (e: KeyboardEvent) => {\n\t\tif (e.key === 'Escape') {\n\t\t\tthis.hide();\n\t\t}\n\t};\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-tooltip': SDSTooltip;\n\t}\n}\n"]}

package/dist/sds-tooltip/sds-tooltip.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=sds-tooltip.styles.d.ts.map

package/dist/sds-tooltip/sds-tooltip.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-tooltip.styles.d.ts","sourceRoot":"","sources":["../../src/sds-tooltip/sds-tooltip.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,yBAmFlB,CAAC"}

package/dist/sds-tooltip/sds-tooltip.styles.js

@@ -0,0 +1,87 @@
+import { css, unsafeCSS } from 'lit';
+import stylesheet from './assets/tooltip-styles';
+export const styles = css `
+	${unsafeCSS(stylesheet)}
+
+	:host {
+		--dsc-tooltip-background: var(--sds-tooltip-background, var(--sds-color-neutral-text-default));
+		--dsc-tooltip-color: var(--sds-tooltip-text-color, var(--sds-color-neutral-background-default));
+		--dsc-tooltip-border-radius: var(--sds-tooltip-border-radius, var(--sds-radius-sm));
+		--dsc-tooltip-padding: var(--sds-tooltip-padding, var(--sds-spacing-4xs) var(--sds-spacing-3xs));
+		--dsc-tooltip-arrow-size: var(--sds-tooltip-arrow-size, 8px);
+
+		--_sds-tooltip-max-width: var(--sds-tooltip-max-width, 30ch);
+		--_sds-tooltip-font-size: var(--sds-tooltip-font-size, var(--sds-components-font-size-content-sm, 0.875rem));
+		--_sds-tooltip-line-height: var(--sds-tooltip-line-height, var(--sds-components-line-height-squeezed-sm, 1.125rem));
+
+		slot {
+			max-width: var(--_sds-tooltip-max-width);
+			font-size: var(--_sds-tooltip-font-size);
+			line-height: var(--_sds-tooltip-line-height);
+		}
+	}
+
+	/* Note: Designsystem's tooltip.css uses nested CSS selectors that do not work in the shadow DOM.
+	   These rules ensure that arrow positioning works for our tooltip.
+	   Do not remove unless the CSS selectors from Designsystem work out of the box. */
+	:host([data-floating|='top'])::before {
+		rotate: 45deg;
+		top: 100%;
+	}
+	:host([data-floating|='right'])::before {
+		left: 0;
+		rotate: 135deg;
+	}
+	:host([data-floating|='bottom'])::before {
+		rotate: -135deg;
+		top: 0;
+	}
+	:host([data-floating|='left'])::before {
+		left: 100%;
+		rotate: -45deg;
+	}
+
+	:host([data-floating='top'])::after,
+	:host([data-floating='bottom'])::after {
+		height: var(--dsc-tooltip-arrow-size);
+		left: 0;
+		width: 100%;
+	}
+	:host([data-floating='top'])::after {
+		top: 100%;
+	}
+	:host([data-floating='bottom'])::after {
+		top: calc(var(--dsc-tooltip-arrow-size) * -1);
+	}
+	:host([data-floating='left'])::after,
+	:host([data-floating='right'])::after {
+		height: 100%;
+		top: 0;
+		width: var(--dsc-tooltip-arrow-size);
+	}
+	:host([data-floating='right'])::after {
+		left: calc(var(--dsc-tooltip-arrow-size) * -1);
+	}
+	:host([data-floating='left'])::after {
+		left: 100%;
+	}
+
+	@keyframes ds-fade-in {
+		from {
+			opacity: 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:host {
+			animation: none;
+		}
+	}
+
+	@media (forced-colors: active) {
+		:host {
+			border: 1px solid CanvasText;
+		}
+	}
+`;
+//# sourceMappingURL=sds-tooltip.styles.js.map

package/dist/sds-tooltip/sds-tooltip.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-tooltip.styles.js","sourceRoot":"","sources":["../../src/sds-tooltip/sds-tooltip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,UAAU,MAAM,yBAAyB,CAAC;AAEjD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;GACtB,SAAS,CAAC,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFvB,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport stylesheet from './assets/tooltip-styles';\n\nexport const styles = css`\n\t${unsafeCSS(stylesheet)}\n\n\t:host {\n\t\t--dsc-tooltip-background: var(--sds-tooltip-background, var(--sds-color-neutral-text-default));\n\t\t--dsc-tooltip-color: var(--sds-tooltip-text-color, var(--sds-color-neutral-background-default));\n\t\t--dsc-tooltip-border-radius: var(--sds-tooltip-border-radius, var(--sds-radius-sm));\n\t\t--dsc-tooltip-padding: var(--sds-tooltip-padding, var(--sds-spacing-4xs) var(--sds-spacing-3xs));\n\t\t--dsc-tooltip-arrow-size: var(--sds-tooltip-arrow-size, 8px);\n\n\t\t--_sds-tooltip-max-width: var(--sds-tooltip-max-width, 30ch);\n\t\t--_sds-tooltip-font-size: var(--sds-tooltip-font-size, var(--sds-components-font-size-content-sm, 0.875rem));\n\t\t--_sds-tooltip-line-height: var(--sds-tooltip-line-height, var(--sds-components-line-height-squeezed-sm, 1.125rem));\n\n\t\tslot {\n\t\t\tmax-width: var(--_sds-tooltip-max-width);\n\t\t\tfont-size: var(--_sds-tooltip-font-size);\n\t\t\tline-height: var(--_sds-tooltip-line-height);\n\t\t}\n\t}\n\n\t/* Note: Designsystem's tooltip.css uses nested CSS selectors that do not work in the shadow DOM.\n\t   These rules ensure that arrow positioning works for our tooltip.\n\t   Do not remove unless the CSS selectors from Designsystem work out of the box. */\n\t:host([data-floating|='top'])::before {\n\t\trotate: 45deg;\n\t\ttop: 100%;\n\t}\n\t:host([data-floating|='right'])::before {\n\t\tleft: 0;\n\t\trotate: 135deg;\n\t}\n\t:host([data-floating|='bottom'])::before {\n\t\trotate: -135deg;\n\t\ttop: 0;\n\t}\n\t:host([data-floating|='left'])::before {\n\t\tleft: 100%;\n\t\trotate: -45deg;\n\t}\n\n\t:host([data-floating='top'])::after,\n\t:host([data-floating='bottom'])::after {\n\t\theight: var(--dsc-tooltip-arrow-size);\n\t\tleft: 0;\n\t\twidth: 100%;\n\t}\n\t:host([data-floating='top'])::after {\n\t\ttop: 100%;\n\t}\n\t:host([data-floating='bottom'])::after {\n\t\ttop: calc(var(--dsc-tooltip-arrow-size) * -1);\n\t}\n\t:host([data-floating='left'])::after,\n\t:host([data-floating='right'])::after {\n\t\theight: 100%;\n\t\ttop: 0;\n\t\twidth: var(--dsc-tooltip-arrow-size);\n\t}\n\t:host([data-floating='right'])::after {\n\t\tleft: calc(var(--dsc-tooltip-arrow-size) * -1);\n\t}\n\t:host([data-floating='left'])::after {\n\t\tleft: 100%;\n\t}\n\n\t@keyframes ds-fade-in {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t:host {\n\t\t\tanimation: none;\n\t\t}\n\t}\n\n\t@media (forced-colors: active) {\n\t\t:host {\n\t\t\tborder: 1px solid CanvasText;\n\t\t}\n\t}\n`;\n"]}

package/dist/shared/assets/positioning.js

@@ -0,0 +1 @@
+const t={passive:!0,capture:!0},e=(t,e,n)=>void 0===n?t.getAttribute(e)??null:(null===n?t.removeAttribute(e):t.getAttribute(e)!==n&&t.setAttribute(e,n),null),n=(t,e)=>getComputedStyle(t).getPropertyValue(e).trim(),o=(t,...e)=>{let[n,...o]=e;for(let e of n.split(" "))t.addEventListener(e,...o);return()=>i(t,...e)},i=(t,...e)=>{let[n,...o]=e;for(let e of n.split(" "))t.removeEventListener(e,...o)},r=(t,e)=>{typeof window<"u"&&typeof document<"u"&&(window._dsHotReloadCleanup||(window._dsHotReloadCleanup=new Map),window._dsHotReloadCleanup?.get(t)?.map(t=>t()),window._dsHotReloadCleanup?.set(t,e()))};let l;const s=()=>{"complete"===document.readyState&&(l||(l=((t,n)=>{let o=document.createElement(t);if(n)for(let[t,i]of Object.entries(n))e(o,t,i);return o})("div",{"aria-live":"assertive"}),l.style.overflow="hidden",l.style.position="fixed",l.style.whiteSpace="nowrap",l.style.width="1px"),l.isConnected||document.body.appendChild(l))};r("announce",()=>[o(document,"focus mouseover",s,t)]);const c=Math.min,a=Math.max,f=Math.round,u=Math.floor,d=t=>({x:t,y:t}),h={left:"right",right:"left",bottom:"top",top:"bottom"};function p(t,e,n){return a(t,c(e,n))}function m(t,e){return"function"==typeof t?t(e):t}function g(t){return t.split("-")[0]}function y(t){return t.split("-")[1]}function w(t){return"x"===t?"y":"x"}function x(t){return"y"===t?"height":"width"}function v(t){const e=t[0];return"t"===e||"b"===e?"y":"x"}function b(t){return w(v(t))}function R(t){return t.includes("start")?t.replace("start","end"):t.replace("end","start")}const A=["left","right"],L=["right","left"],T=["top","bottom"],C=["bottom","top"];function E(t,e,n,o){const i=y(t);let r=function(t,e,n){switch(t){case"top":case"bottom":return n?e?L:A:e?A:L;case"left":case"right":return e?T:C;default:return[]}}(g(t),"start"===n,o);return i&&(r=r.map(t=>t+"-"+i),e&&(r=r.concat(r.map(R)))),r}function S(t){const e=g(t);return h[e]+t.slice(e.length)}function D(t){const{x:e,y:n,width:o,height:i}=t;return{width:o,height:i,top:n,left:e,right:e+o,bottom:n+i,x:e,y:n}}function O(t,e,n){let{reference:o,floating:i}=t;const r=v(e),l=b(e),s=x(l),c=g(e),a="y"===r,f=o.x+o.width/2-i.width/2,u=o.y+o.height/2-i.height/2,d=o[s]/2-i[s]/2;let h;switch(c){case"top":h={x:f,y:o.y-i.height};break;case"bottom":h={x:f,y:o.y+o.height};break;case"right":h={x:o.x+o.width,y:u};break;case"left":h={x:o.x-i.width,y:u};break;default:h={x:o.x,y:o.y}}switch(y(e)){case"start":h[l]-=d*(n&&a?-1:1);break;case"end":h[l]+=d*(n&&a?-1:1)}return h}async function P(t,e){var n;void 0===e&&(e={});const{x:o,y:i,platform:r,rects:l,elements:s,strategy:c}=t,{boundary:a="clippingAncestors",rootBoundary:f="viewport",elementContext:u="floating",altBoundary:d=!1,padding:h=0}=m(e,t),p=function(t){return"number"!=typeof t?function(t){return{top:0,right:0,bottom:0,left:0,...t}}(t):{top:t,right:t,bottom:t,left:t}}(h),g=s[d?"floating"===u?"reference":"floating":u],y=D(await r.getClippingRect({element:null==(n=await(null==r.isElement?void 0:r.isElement(g)))||n?g:g.contextElement||await(null==r.getDocumentElement?void 0:r.getDocumentElement(s.floating)),boundary:a,rootBoundary:f,strategy:c})),w="floating"===u?{x:o,y:i,width:l.floating.width,height:l.floating.height}:l.reference,x=await(null==r.getOffsetParent?void 0:r.getOffsetParent(s.floating)),v=await(null==r.isElement?void 0:r.isElement(x))&&await(null==r.getScale?void 0:r.getScale(x))||{x:1,y:1},b=D(r.convertOffsetParentRelativeRectToViewportRelativeRect?await r.convertOffsetParentRelativeRectToViewportRelativeRect({elements:s,rect:w,offsetParent:x,strategy:c}):w);return{top:(y.top-b.top+p.top)/v.y,bottom:(b.bottom-y.bottom+p.bottom)/v.y,left:(y.left-b.left+p.left)/v.x,right:(b.right-y.right+p.right)/v.x}}const H=new Set(["left","top"]);function F(){return"undefined"!=typeof window}function M(t){return k(t)?(t.nodeName||"").toLowerCase():"#document"}function W(t){var e;return(null==t||null==(e=t.ownerDocument)?void 0:e.defaultView)||window}function $(t){var e;return null==(e=(k(t)?t.ownerDocument:t.document)||window.document)?void 0:e.documentElement}function k(t){return!!F()&&(t instanceof Node||t instanceof W(t).Node)}function B(t){return!!F()&&(t instanceof Element||t instanceof W(t).Element)}function V(t){return!!F()&&(t instanceof HTMLElement||t instanceof W(t).HTMLElement)}function _(t){return!(!F()||"undefined"==typeof ShadowRoot)&&(t instanceof ShadowRoot||t instanceof W(t).ShadowRoot)}function z(t){const{overflow:e,overflowX:n,overflowY:o,display:i}=Q(t);return/auto|scroll|overlay|hidden|clip/.test(e+o+n)&&"inline"!==i&&"contents"!==i}function N(t){return/^(table|td|th)$/.test(M(t))}function j(t){try{if(t.matches(":popover-open"))return!0}catch(t){}try{return t.matches(":modal")}catch(t){return!1}}const q=/transform|translate|scale|rotate|perspective|filter/,I=/paint|layout|strict|content/,X=t=>!!t&&"none"!==t;let Y;function G(t){const e=B(t)?Q(t):t;return X(e.transform)||X(e.translate)||X(e.scale)||X(e.rotate)||X(e.perspective)||!J()&&(X(e.backdropFilter)||X(e.filter))||q.test(e.willChange||"")||I.test(e.contain||"")}function J(){return null==Y&&(Y="undefined"!=typeof CSS&&CSS.supports&&CSS.supports("-webkit-backdrop-filter","none")),Y}function K(t){return/^(html|body|#document)$/.test(M(t))}function Q(t){return W(t).getComputedStyle(t)}function U(t){return B(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.scrollX,scrollTop:t.scrollY}}function Z(t){if("html"===M(t))return t;const e=t.assignedSlot||t.parentNode||_(t)&&t.host||$(t);return _(e)?e.host:e}function tt(t){const e=Z(t);return K(e)?t.ownerDocument?t.ownerDocument.body:t.body:V(e)&&z(e)?e:tt(e)}function et(t,e,n){var o;void 0===e&&(e=[]),void 0===n&&(n=!0);const i=tt(t),r=i===(null==(o=t.ownerDocument)?void 0:o.body),l=W(i);if(r){const t=nt(l);return e.concat(l,l.visualViewport||[],z(i)?i:[],t&&n?et(t):[])}return e.concat(i,et(i,[],n))}function nt(t){return t.parent&&Object.getPrototypeOf(t.parent)?t.frameElement:null}function ot(t){const e=Q(t);let n=parseFloat(e.width)||0,o=parseFloat(e.height)||0;const i=V(t),r=i?t.offsetWidth:n,l=i?t.offsetHeight:o,s=f(n)!==r||f(o)!==l;return s&&(n=r,o=l),{width:n,height:o,$:s}}function it(t){return B(t)?t:t.contextElement}function rt(t){const e=it(t);if(!V(e))return d(1);const n=e.getBoundingClientRect(),{width:o,height:i,$:r}=ot(e);let l=(r?f(n.width):n.width)/o,s=(r?f(n.height):n.height)/i;return l&&Number.isFinite(l)||(l=1),s&&Number.isFinite(s)||(s=1),{x:l,y:s}}const lt=d(0);function st(t){const e=W(t);return J()&&e.visualViewport?{x:e.visualViewport.offsetLeft,y:e.visualViewport.offsetTop}:lt}function ct(t,e,n,o){void 0===e&&(e=!1),void 0===n&&(n=!1);const i=t.getBoundingClientRect(),r=it(t);let l=d(1);e&&(o?B(o)&&(l=rt(o)):l=rt(t));const s=function(t,e,n){return void 0===e&&(e=!1),!(!n||e&&n!==W(t))&&e}(r,n,o)?st(r):d(0);let c=(i.left+s.x)/l.x,a=(i.top+s.y)/l.y,f=i.width/l.x,u=i.height/l.y;if(r){const t=W(r),e=o&&B(o)?W(o):o;let n=t,i=nt(n);for(;i&&o&&e!==n;){const t=rt(i),e=i.getBoundingClientRect(),o=Q(i),r=e.left+(i.clientLeft+parseFloat(o.paddingLeft))*t.x,l=e.top+(i.clientTop+parseFloat(o.paddingTop))*t.y;c*=t.x,a*=t.y,f*=t.x,u*=t.y,c+=r,a+=l,n=W(i),i=nt(n)}}return D({width:f,height:u,x:c,y:a})}function at(t,e){const n=U(t).scrollLeft;return e?e.left+n:ct($(t)).left+n}function ft(t,e){const n=t.getBoundingClientRect();return{x:n.left+e.scrollLeft-at(t,n),y:n.top+e.scrollTop}}function ut(t,e,n){let o;if("viewport"===e)o=function(t,e){const n=W(t),o=$(t),i=n.visualViewport;let r=o.clientWidth,l=o.clientHeight,s=0,c=0;if(i){r=i.width,l=i.height;const t=J();(!t||t&&"fixed"===e)&&(s=i.offsetLeft,c=i.offsetTop)}const a=at(o);if(a<=0){const t=o.ownerDocument,e=t.body,n=getComputedStyle(e),i="CSS1Compat"===t.compatMode&&parseFloat(n.marginLeft)+parseFloat(n.marginRight)||0,l=Math.abs(o.clientWidth-e.clientWidth-i);l<=25&&(r-=l)}else a<=25&&(r+=a);return{width:r,height:l,x:s,y:c}}(t,n);else if("document"===e)o=function(t){const e=$(t),n=U(t),o=t.ownerDocument.body,i=a(e.scrollWidth,e.clientWidth,o.scrollWidth,o.clientWidth),r=a(e.scrollHeight,e.clientHeight,o.scrollHeight,o.clientHeight);let l=-n.scrollLeft+at(t);const s=-n.scrollTop;return"rtl"===Q(o).direction&&(l+=a(e.clientWidth,o.clientWidth)-i),{width:i,height:r,x:l,y:s}}($(t));else if(B(e))o=function(t,e){const n=ct(t,!0,"fixed"===e),o=n.top+t.clientTop,i=n.left+t.clientLeft,r=V(t)?rt(t):d(1);return{width:t.clientWidth*r.x,height:t.clientHeight*r.y,x:i*r.x,y:o*r.y}}(e,n);else{const n=st(t);o={x:e.x-n.x,y:e.y-n.y,width:e.width,height:e.height}}return D(o)}function dt(t,e){const n=Z(t);return!(n===e||!B(n)||K(n))&&("fixed"===Q(n).position||dt(n,e))}function ht(t,e,n){const o=V(e),i=$(e),r="fixed"===n,l=ct(t,!0,r,e);let s={scrollLeft:0,scrollTop:0};const c=d(0);function a(){c.x=at(i)}if(o||!o&&!r)if(("body"!==M(e)||z(i))&&(s=U(e)),o){const t=ct(e,!0,r,e);c.x=t.x+e.clientLeft,c.y=t.y+e.clientTop}else i&&a();r&&!o&&i&&a();const f=!i||o||r?d(0):ft(i,s);return{x:l.left+s.scrollLeft-c.x-f.x,y:l.top+s.scrollTop-c.y-f.y,width:l.width,height:l.height}}function pt(t){return"static"===Q(t).position}function mt(t,e){if(!V(t)||"fixed"===Q(t).position)return null;if(e)return e(t);let n=t.offsetParent;return $(t)===n&&(n=n.ownerDocument.body),n}function gt(t,e){const n=W(t);if(j(t))return n;if(!V(t)){let e=Z(t);for(;e&&!K(e);){if(B(e)&&!pt(e))return e;e=Z(e)}return n}let o=mt(t,e);for(;o&&N(o)&&pt(o);)o=mt(o,e);return o&&K(o)&&pt(o)&&!G(o)?n:o||function(t){let e=Z(t);for(;V(e)&&!K(e);){if(G(e))return e;if(j(e))return null;e=Z(e)}return null}(t)||n}const yt={convertOffsetParentRelativeRectToViewportRelativeRect:function(t){let{elements:e,rect:n,offsetParent:o,strategy:i}=t;const r="fixed"===i,l=$(o),s=!!e&&j(e.floating);if(o===l||s&&r)return n;let c={scrollLeft:0,scrollTop:0},a=d(1);const f=d(0),u=V(o);if((u||!u&&!r)&&(("body"!==M(o)||z(l))&&(c=U(o)),u)){const t=ct(o);a=rt(o),f.x=t.x+o.clientLeft,f.y=t.y+o.clientTop}const h=!l||u||r?d(0):ft(l,c);return{width:n.width*a.x,height:n.height*a.y,x:n.x*a.x-c.scrollLeft*a.x+f.x+h.x,y:n.y*a.y-c.scrollTop*a.y+f.y+h.y}},getDocumentElement:$,getClippingRect:function(t){let{element:e,boundary:n,rootBoundary:o,strategy:i}=t;const r=[..."clippingAncestors"===n?j(e)?[]:function(t,e){const n=e.get(t);if(n)return n;let o=et(t,[],!1).filter(t=>B(t)&&"body"!==M(t)),i=null;const r="fixed"===Q(t).position;let l=r?Z(t):t;for(;B(l)&&!K(l);){const e=Q(l),n=G(l);n||"fixed"!==e.position||(i=null),(r?!n&&!i:!n&&"static"===e.position&&i&&("absolute"===i.position||"fixed"===i.position)||z(l)&&!n&&dt(t,l))?o=o.filter(t=>t!==l):i=e,l=Z(l)}return e.set(t,o),o}(e,this._c):[].concat(n),o],l=ut(e,r[0],i);let s=l.top,f=l.right,u=l.bottom,d=l.left;for(let t=1;t<r.length;t++){const n=ut(e,r[t],i);s=a(n.top,s),f=c(n.right,f),u=c(n.bottom,u),d=a(n.left,d)}return{width:f-d,height:u-s,x:d,y:s}},getOffsetParent:gt,getElementRects:async function(t){const e=this.getOffsetParent||gt,n=this.getDimensions,o=await n(t.floating);return{reference:ht(t.reference,await e(t.floating),t.strategy),floating:{x:0,y:0,width:o.width,height:o.height}}},getClientRects:function(t){return Array.from(t.getClientRects())},getDimensions:function(t){const{width:e,height:n}=ot(t);return{width:e,height:n}},getScale:rt,isElement:B,isRTL:function(t){return"rtl"===Q(t).direction}};function wt(t,e){return t.x===e.x&&t.y===e.y&&t.width===e.width&&t.height===e.height}function xt(t,e,n,o){void 0===o&&(o={});const{ancestorScroll:i=!0,ancestorResize:r=!0,elementResize:l="function"==typeof ResizeObserver,layoutShift:s="function"==typeof IntersectionObserver,animationFrame:f=!1}=o,d=it(t),h=i||r?[...d?et(d):[],...e?et(e):[]]:[];h.forEach(t=>{i&&t.addEventListener("scroll",n,{passive:!0}),r&&t.addEventListener("resize",n)});const p=d&&s?function(t,e){let n,o=null;const i=$(t);function r(){var t;clearTimeout(n),null==(t=o)||t.disconnect(),o=null}return function l(s,f){void 0===s&&(s=!1),void 0===f&&(f=1),r();const d=t.getBoundingClientRect(),{left:h,top:p,width:m,height:g}=d;if(s||e(),!m||!g)return;const y={rootMargin:-u(p)+"px "+-u(i.clientWidth-(h+m))+"px "+-u(i.clientHeight-(p+g))+"px "+-u(h)+"px",threshold:a(0,c(1,f))||1};let w=!0;function x(e){const o=e[0].intersectionRatio;if(o!==f){if(!w)return l();o?l(!1,o):n=setTimeout(()=>{l(!1,1e-7)},1e3)}1!==o||wt(d,t.getBoundingClientRect())||l(),w=!1}try{o=new IntersectionObserver(x,{...y,root:i.ownerDocument})}catch(t){o=new IntersectionObserver(x,y)}o.observe(t)}(!0),r}(d,n):null;let m,g=-1,y=null;l&&(y=new ResizeObserver(t=>{let[o]=t;o&&o.target===d&&y&&e&&(y.unobserve(e),cancelAnimationFrame(g),g=requestAnimationFrame(()=>{var t;null==(t=y)||t.observe(e)})),n()}),d&&!f&&y.observe(d),e&&y.observe(e));let w=f?ct(t):null;return f&&function e(){const o=ct(t);w&&!wt(w,o)&&n();w=o,m=requestAnimationFrame(e)}(),n(),()=>{var t;h.forEach(t=>{i&&t.removeEventListener("scroll",n),r&&t.removeEventListener("resize",n)}),null==p||p(),null==(t=y)||t.disconnect(),y=null,f&&cancelAnimationFrame(m)}}const vt=function(t){return void 0===t&&(t=0),{name:"offset",options:t,async fn(e){var n,o;const{x:i,y:r,placement:l,middlewareData:s}=e,c=await async function(t,e){const{placement:n,platform:o,elements:i}=t,r=await(null==o.isRTL?void 0:o.isRTL(i.floating)),l=g(n),s=y(n),c="y"===v(n),a=H.has(l)?-1:1,f=r&&c?-1:1,u=m(e,t);let{mainAxis:d,crossAxis:h,alignmentAxis:p}="number"==typeof u?{mainAxis:u,crossAxis:0,alignmentAxis:null}:{mainAxis:u.mainAxis||0,crossAxis:u.crossAxis||0,alignmentAxis:u.alignmentAxis};return s&&"number"==typeof p&&(h="end"===s?-1*p:p),c?{x:h*f,y:d*a}:{x:d*a,y:h*f}}(e,t);return l===(null==(n=s.offset)?void 0:n.placement)&&null!=(o=s.arrow)&&o.alignmentOffset?{}:{x:i+c.x,y:r+c.y,data:{...c,placement:l}}}}},bt=function(t){return void 0===t&&(t={}),{name:"shift",options:t,async fn(e){const{x:n,y:o,placement:i,platform:r}=e,{mainAxis:l=!0,crossAxis:s=!1,limiter:c={fn:t=>{let{x:e,y:n}=t;return{x:e,y:n}}},...a}=m(t,e),f={x:n,y:o},u=await r.detectOverflow(e,a),d=v(g(i)),h=w(d);let y=f[h],x=f[d];if(l){const t="y"===h?"bottom":"right";y=p(y+u["y"===h?"top":"left"],y,y-u[t])}if(s){const t="y"===d?"bottom":"right";x=p(x+u["y"===d?"top":"left"],x,x-u[t])}const b=c.fn({...e,[h]:y,[d]:x});return{...b,data:{x:b.x-n,y:b.y-o,enabled:{[h]:l,[d]:s}}}}}},Rt=function(t){return void 0===t&&(t={}),{name:"flip",options:t,async fn(e){var n,o;const{placement:i,middlewareData:r,rects:l,initialPlacement:s,platform:c,elements:a}=e,{mainAxis:f=!0,crossAxis:u=!0,fallbackPlacements:d,fallbackStrategy:h="bestFit",fallbackAxisSideDirection:p="none",flipAlignment:w=!0,...A}=m(t,e);if(null!=(n=r.arrow)&&n.alignmentOffset)return{};const L=g(i),T=v(s),C=g(s)===s,D=await(null==c.isRTL?void 0:c.isRTL(a.floating)),O=d||(C||!w?[S(s)]:function(t){const e=S(t);return[R(t),e,R(e)]}(s)),P="none"!==p;!d&&P&&O.push(...E(s,w,p,D));const H=[s,...O],F=await c.detectOverflow(e,A),M=[];let W=(null==(o=r.flip)?void 0:o.overflows)||[];if(f&&M.push(F[L]),u){const t=function(t,e,n){void 0===n&&(n=!1);const o=y(t),i=b(t),r=x(i);let l="x"===i?o===(n?"end":"start")?"right":"left":"start"===o?"bottom":"top";return e.reference[r]>e.floating[r]&&(l=S(l)),[l,S(l)]}(i,l,D);M.push(F[t[0]],F[t[1]])}if(W=[...W,{placement:i,overflows:M}],!M.every(t=>t<=0)){var $,k;const t=((null==($=r.flip)?void 0:$.index)||0)+1,e=H[t];if(e){if(!("alignment"===u&&T!==v(e))||W.every(t=>v(t.placement)!==T||t.overflows[0]>0))return{data:{index:t,overflows:W},reset:{placement:e}}}let n=null==(k=W.filter(t=>t.overflows[0]<=0).sort((t,e)=>t.overflows[1]-e.overflows[1])[0])?void 0:k.placement;if(!n)switch(h){case"bestFit":{var B;const t=null==(B=W.filter(t=>{if(P){const e=v(t.placement);return e===T||"y"===e}return!0}).map(t=>[t.placement,t.overflows.filter(t=>t>0).reduce((t,e)=>t+e,0)]).sort((t,e)=>t[1]-e[1])[0])?void 0:B[0];t&&(n=t);break}case"initialPlacement":n=s}if(i!==n)return{reset:{placement:n}}}return{}}}},At=function(t){return void 0===t&&(t={}),{name:"size",options:t,async fn(e){var n,o;const{placement:i,rects:r,platform:l,elements:s}=e,{apply:f=()=>{},...u}=m(t,e),d=await l.detectOverflow(e,u),h=g(i),p=y(i),w="y"===v(i),{width:x,height:b}=r.floating;let R,A;"top"===h||"bottom"===h?(R=h,A=p===(await(null==l.isRTL?void 0:l.isRTL(s.floating))?"start":"end")?"left":"right"):(A=h,R="end"===p?"top":"bottom");const L=b-d.top-d.bottom,T=x-d.left-d.right,C=c(b-d[R],L),E=c(x-d[A],T),S=!e.middlewareData.shift;let D=C,O=E;if(null!=(n=e.middlewareData.shift)&&n.enabled.x&&(O=T),null!=(o=e.middlewareData.shift)&&o.enabled.y&&(D=L),S&&!p){const t=a(d.left,0),e=a(d.right,0),n=a(d.top,0),o=a(d.bottom,0);w?O=x-2*(0!==t||0!==e?t+e:a(d.left,d.right)):D=b-2*(0!==n||0!==o?n+o:a(d.top,d.bottom))}await f({...e,availableWidth:O,availableHeight:D});const P=await l.getDimensions(s.floating);return x!==P.width||b!==P.height?{reset:{rects:!0}}:{}}}},Lt=function(t){return void 0===t&&(t={}),{options:t,fn(e){const{x:n,y:o,placement:i,rects:r,middlewareData:l}=e,{offset:s=0,mainAxis:c=!0,crossAxis:a=!0}=m(t,e),f={x:n,y:o},u=v(i),d=w(u);let h=f[d],p=f[u];const y=m(s,e),x="number"==typeof y?{mainAxis:y,crossAxis:0}:{mainAxis:0,crossAxis:0,...y};if(c){const t="y"===d?"height":"width",e=r.reference[d]-r.floating[t]+x.mainAxis,n=r.reference[d]+r.reference[t]-x.mainAxis;h<e?h=e:h>n&&(h=n)}if(a){var b,R;const t="y"===d?"width":"height",e=H.has(g(i)),n=r.reference[u]-r.floating[t]+(e&&(null==(b=l.offset)?void 0:b[u])||0)+(e?0:x.crossAxis),o=r.reference[u]+r.reference[t]+(e?0:(null==(R=l.offset)?void 0:R[u])||0)-(e?x.crossAxis:0);p<n?p=n:p>o&&(p=o)}return{[d]:h,[u]:p}}}},Tt=(t,e,n)=>{const o=new Map,i={platform:yt,...n},r={...i.platform,_c:o};return(async(t,e,n)=>{const{placement:o="bottom",strategy:i="absolute",middleware:r=[],platform:l}=n,s=l.detectOverflow?l:{...l,detectOverflow:P},c=await(null==l.isRTL?void 0:l.isRTL(e));let a=await l.getElementRects({reference:t,floating:e,strategy:i}),{x:f,y:u}=O(a,o,c),d=o,h=0;const p={};for(let n=0;n<r.length;n++){const m=r[n];if(!m)continue;const{name:g,fn:y}=m,{x:w,y:x,data:v,reset:b}=await y({x:f,y:u,initialPlacement:o,placement:d,strategy:i,middlewareData:p,rects:a,platform:s,elements:{reference:t,floating:e}});f=null!=w?w:f,u=null!=x?x:u,p[g]={...p[g],...v},b&&h<50&&(h++,"object"==typeof b&&(b.placement&&(d=b.placement),b.rects&&(a=!0===b.rects?await l.getElementRects({reference:t,floating:e,strategy:i}):b.rects),({x:f,y:u}=O(a,d,c))),n=-1)}return{x:f,y:u,placement:d,strategy:i,middlewareData:p}})(t,e,{...i,platform:r})},Ct="data-placement",Et="data-autoplacement",St=new Map;function Dt(t){let{newState:o,oldState:i,target:r,source:l=t.detail}=t,s=r instanceof HTMLElement&&null!==e(r,"popover")&&n(r,"--_ds-floating");if(!s)return;if("closed"===o)return St.get(r)?.();if(!l){let t=r.getRootNode(),e=`[popovertarget="${r.id}"],[commandfor="${r.id}"]`;l=r.id&&t?.querySelector?.(e)||void 0}if(!l||l===r||i&&i===o)return;let c=n(r,"--_ds-floating-overscroll"),a=e(r,Ct)||e(l,Ct)||s,f=e(r,Et)||e(l,Et),u=parseFloat(getComputedStyle(r,"::before").height)||0,d=a.match(/left|right/gi)?"Height":"Width",h=l[`offset${d}`]/2+u;if("none"===a)return;let p={strategy:"absolute",placement:a,middleware:[vt(u||0),bt({padding:10,limiter:Lt({offset:{mainAxis:h}})}),Ht(),..."false"===f?[]:[Rt({padding:10,crossAxis:!1})],...c?[At({apply({availableHeight:t}){"fit"===c&&(r.style.width=`${l.clientWidth}px`),r.style.maxHeight=`${Math.max(50,t-20)}px`}})]:[]]},m=xt(l,r,async()=>{if(!l?.isConnected)return St.get(r)?.();let{x:t,y:e}=await Tt(l,r,p);r.style.translate=`${t}px ${e}px`});St.set(r,()=>St.delete(r)&&m())}let Ot;const Pt=({type:t})=>{if("mousedown"===t&&(Ot=!1),"scroll"===t&&!1===Ot&&(Ot=!0),"mouseup"===t&&Ot)for(let[t]of St)t.showPopover()};r("popover",()=>[o(document,"mousedown scroll mouseup",Pt,!0),o(document,"toggle ds-toggle-source",Dt,t)]);const Ht=()=>({name:"arrowPseudo",fn(t){let n=t.elements.floating,o=t.rects.reference,i=`${Math.round(o.width/2+o.x-t.x)}px`,r=`${Math.round(o.height/2+o.y-t.y)}px`;return n.style.setProperty("--_ds-floating-arrow-x",i),n.style.setProperty("--_ds-floating-arrow-y",r),e(n,"data-floating",t.placement),t}});

package/dist/shared/positioning.d.ts

@@ -0,0 +1,2 @@
+import './assets/positioning.js';
+//# sourceMappingURL=positioning.d.ts.map

package/dist/shared/positioning.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"positioning.d.ts","sourceRoot":"","sources":["../../src/shared/positioning.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC"}

package/dist/shared/positioning.js

@@ -0,0 +1,2 @@
+import './assets/positioning.js';
+//# sourceMappingURL=positioning.js.map

package/dist/shared/positioning.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"positioning.js","sourceRoot":"","sources":["../../src/shared/positioning.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC","sourcesContent":["import './assets/positioning.js';\n"]}