@vonage/vivid 5.15.1 → 5.17.0

package/bundled/definition8.js

@@ -1,135 +1,153 @@
-import { I as m, i as u } from "./definition2.js";
-import { V as f, a as d, o as p, h as s, c as x, d as k } from "./vivid-element.js";
-import { W as y, f as _ } from "./mixins.js";
-import { D as g, d as C } from "./delegates-aria.js";
-import { C as w } from "./form-associated.js";
-import { W as $ } from "./with-error-text.js";
-import { W as z } from "./with-success-text.js";
-import { F as O } from "./form-element.js";
-import { w as v } from "./when.js";
-import { s as F } from "./slotted.js";
-import { c as T } from "./class-names.js";
-const B = ':host{display:inline-flex;flex-direction:column;gap:4px;vertical-align:middle;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-checkbox-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-checkbox-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}@media(hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}@media(hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base{display:inline-flex;align-items:start;gap:8px;vertical-align:middle}.base:focus-visible{outline:none}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:focus-visible .control{--focus-stroke-gap-color: transparent}.base:focus-visible .control:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - 4px)}.base:not(.checked) .indicator.checkmark{display:none}.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{display:flex;flex-wrap:wrap;align-items:center;color:var(--vvd-color-canvas-text);column-gap:4px;cursor:pointer;font:var(--vvd-typography-base)}.hide-label label{display:none}.icon{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.6);line-height:1}';
-var D = Object.defineProperty, c = (o, a, e, n) => {
-  for (var r = void 0, i = o.length - 1, l; i >= 0; i--)
-    (l = o[i]) && (r = l(a, e, r) || r);
-  return r && D(a, e, r), r;
+import { T as e, d as t, l as n, o as r, s as i, t as a, u as o } from "./vivid-element.js";
+import { t as s } from "./ref.js";
+import { t as c } from "./when.js";
+import { t as l } from "./decorate.js";
+import { t as u } from "./class-names.js";
+import { i as d, t as f } from "./definition6.js";
+import { r as p, t as m } from "./definition7.js";
+import { a as h, c as g, i as _, l as v, n as y, o as b, r as x, s as S, t as C, u as w } from "./floating-ui.dom.js";
+//#region src/lib/popup/popup.ts
+var T = {
+	Flip: "flip",
+	AutoPlacementHorizontal: "auto-placement-horizontal",
+	AutoPlacementVertical: "auto-placement-vertical"
+}, E = {
+	[T.Flip]: h(),
+	[T.AutoPlacementHorizontal]: y({ allowedPlacements: [
+		"bottom",
+		"top",
+		"bottom-start",
+		"bottom-end",
+		"top-start",
+		"top-end"
+	] }),
+	[T.AutoPlacementVertical]: y({ allowedPlacements: [
+		"left",
+		"right",
+		"left-start",
+		"left-end",
+		"right-start",
+		"right-end"
+	] })
+}, D = class extends a {
+	constructor(...e) {
+		super(...e), this.open = !1, this.dismissible = !1, this.arrow = !1, this.alternate = !1, this.placementStrategy = T.Flip, this.animationFrame = !1, this.strategy = "fixed", this.offset = null;
+	}
+	get #e() {
+		let e = [
+			S(),
+			E[this.placementStrategy],
+			b(),
+			w({ apply({ availableWidth: e, availableHeight: t, elements: n }) {
+				Object.assign(n.floating.style, {
+					maxWidth: `${e}px`,
+					maxHeight: `${t}px`
+				});
+			} }),
+			v()
+		], t = this.offset ?? 0;
+		return this.arrow && (t += 12, e = [...e, C({
+			element: this.arrowEl,
+			padding: 10
+		})]), t > 0 && e.unshift(g(t)), e;
+	}
+	#t;
+	openChanged(e, t) {
+		this.#r(), this.#n(), this.$emit(t ? "vwc-popup:open" : "vwc-popup:close");
+	}
+	animationFrameChanged() {
+		this.#n();
+	}
+	anchorChanged() {
+		this.#n();
+	}
+	strategyChanged() {
+		this.#r();
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.#r(), this.#n();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.#n();
+	}
+	#n() {
+		this.#t?.(), this.isConnected && (this.open && this.controlEl && this.controlEl.classList.add("open"), this.anchorEl && this.open && this.popupEl && (this.#t = x(this.anchorEl, this.popupEl, this.#a, { animationFrame: this.animationFrame })));
+	}
+	#r() {
+		this.popupEl && this.strategy === "fixed" && (this.open ? this.popupEl.showPopover() : this.popupEl.hidePopover());
+	}
+	#i;
+	#a = () => (this.#i = this.updatePosition(), this.#i);
+	async updatePosition() {
+		if (!this.open || !this.anchorEl) return;
+		let e = await _(this.anchorEl, this.popupEl, {
+			placement: this.placement,
+			strategy: this.strategy,
+			middleware: this.#e
+		});
+		this.#o(e), this.arrow && this.#s(e);
+	}
+	#o(e) {
+		let { x: t, y: n } = e, { referenceHidden: r } = e.middlewareData.hide;
+		Object.assign(this.popupEl.style, {
+			left: `${t}px`,
+			top: `${n}px`,
+			visibility: r ? "hidden" : "visible"
+		});
+	}
+	#s(e) {
+		let { x: t, y: n } = e.middlewareData.arrow, r = {
+			left: "calc(100% - 4px)",
+			right: "-4px",
+			top: "calc(100% - 4px)",
+			bottom: "-4px"
+		}, i = e.placement.split("-")[0];
+		Object.assign(this.arrowEl.style, {
+			left: t ? `${t}px` : r[i],
+			top: n ? `${n}px` : r[i]
+		});
+	}
+	get anchorEl() {
+		return this.anchor ?? null;
+	}
+	show() {
+		return this.open = !0, this.#i ?? Promise.resolve();
+	}
+	hide() {
+		this.open = !1;
+	}
 };
-const E = " ";
-class t extends g(
-  y(
-    $(
-      z(O(w(f)))
-    )
-  )
-) {
-  constructor() {
-    super(), this.tabindex = null, this.proxy = document.createElement("input"), this.initialValue = "on", this.defaultSlottedNodes = [], this.indeterminate = !1, this.keypressHandler = (a) => a.target instanceof HTMLAnchorElement ? !0 : (!this.disabled && !this.readOnly && a.key === E && (this.indeterminate && (this.indeterminate = !1), this.checked = !this.checked), !1), this.clickHandler = (a) => a.target instanceof HTMLAnchorElement ? !0 : (!this.disabled && !this.readOnly && (this.indeterminate && (this.indeterminate = !1), this.checked = !this.checked), !1), this.proxy.setAttribute("type", "checkbox");
-  }
-  // Map to proxy element
-  /**
-   * @internal
-   */
-  readOnlyChanged() {
-    this.proxy instanceof HTMLInputElement && (this.proxy.readOnly = this.readOnly);
-  }
-  /**
-   * @internal
-   */
-  ariaCheckedChanged(a, e) {
-    super.ariaCheckedChanged(a, e), this.ariaChecked === "mixed" ? this.indeterminate = !0 : (this.indeterminate = !1, this.checked = this.ariaChecked === "true");
-  }
-  /**
-   * @internal
-   */
-  checkedChanged(a, e) {
-    super.checkedChanged(a, e), this.ariaChecked = e == !0 ? "true" : "false", a !== void 0 && this.$emit("input");
-  }
+l([n({ mode: "boolean" })], D.prototype, "open", void 0), l([n({ mode: "boolean" })], D.prototype, "dismissible", void 0), l([n({ mode: "boolean" })], D.prototype, "arrow", void 0), l([n({ mode: "boolean" })], D.prototype, "alternate", void 0), l([n({ mode: "fromView" })], D.prototype, "placement", void 0), l([n({
+	mode: "boolean",
+	attribute: "animation-frame"
+})], D.prototype, "animationFrame", void 0), l([n({ mode: "fromView" })], D.prototype, "strategy", void 0), l([n({
+	attribute: "offset",
+	converter: o
+})], D.prototype, "offset", void 0), l([e], D.prototype, "anchor", void 0);
+//#endregion
+//#region src/lib/popup/popup.scss?inline
+var O = ":host{display:var(--_popup-display,inline)}.control{border-radius:inherit;background:var(--vvd-color-surface-4dp);contain:layout}.control:not(.open){display:none}.popup-wrapper{white-space:initial;--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.popup-wrapper ::-webkit-scrollbar{width:4px}.popup-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.popup-wrapper ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.popup-wrapper{z-index:var(--_popup-z-index,10);border:none;border-radius:8px;inline-size:max-content;min-inline-size:fit-content;margin:0;padding:0;overflow:visible}.popup-wrapper:not(.absolute){position:fixed}.popup-wrapper.absolute{position:absolute;top:0;left:0}.popup-content{color:var(--vvd-color-canvas-text);display:grid}.dismissible .popup-content{grid-template-columns:1fr auto;align-content:start}.arrow{z-index:-1;background:var(--vvd-color-surface-4dp);width:8px;height:8px;position:absolute;transform:rotate(45deg)}.dismissible-button{align-self:flex-start;margin-block-start:4px;margin-inline-end:4px}", k = ({ open: e, dismissible: t, alternate: n }) => u("control", ["open", !!e], ["dismissible", !!t], ["alternate", !!n]);
+function A(e) {
+	return e.strategy && e.strategy === "fixed" ? "manual" : null;
 }
-c([
-  d({ attribute: "tabindex" })
-], t.prototype, "tabindex");
-c([
-  d
-], t.prototype, "connotation");
-c([
-  d({ attribute: "readonly", mode: "boolean" })
-], t.prototype, "readOnly");
-c([
-  p
-], t.prototype, "defaultSlottedNodes");
-c([
-  d({ attribute: "indeterminate", mode: "boolean" })
-], t.prototype, "indeterminate");
-c([
-  p
-], t.prototype, "slottedContent");
-const H = ({
-  connotation: o,
-  readOnly: a,
-  checked: e,
-  disabled: n,
-  indeterminate: r,
-  errorValidationMessage: i,
-  successText: l,
-  label: b,
-  slottedContent: h
-}) => T(
-  "base",
-  [`connotation-${o}`, !!o],
-  ["readonly", !!a],
-  ["checked", !!e || !!r],
-  ["disabled", !!n],
-  ["error connotation-alert", !!i],
-  ["success connotation-success", !!l],
-  ["hide-label", !b && !h?.length]
-), A = (o) => {
-  const a = o.tagFor(m);
-  return s`<template>
-		<div
-			class="${H}"
-			aria-describedby="${(e) => e._feedbackDescribedBy}"
-			${C({
-    role: "checkbox",
-    ariaChecked: (e) => e.indeterminate ? "mixed" : e.checked,
-    ariaRequired: (e) => e.required,
-    ariaDisabled: (e) => e.disabled,
-    ariaReadOnly: (e) => e.readOnly
-  })}
-			tabindex="${(e) => e.tabindex !== null ? e.tabindex : e.disabled ? null : 0}"
-			@keypress="${(e, n) => e.keypressHandler(n.event)}"
-			@click="${(e, n) => e.clickHandler(n.event)}"
-		>
-			<div class="control">
-				${v(
-    (e) => e.checked && !e.indeterminate,
-    s`<${a} name="check-solid" class="icon"></${a}>`
-  )}
-				${v(
-    (e) => e.indeterminate,
-    s`<${a} name="minus-solid" class="icon"></${a}>`
-  )}
+//#endregion
+//#region src/lib/popup/definition.ts
+var j = r("popup", D, (e) => {
+	let n = e.tagFor(p), r = e.tagFor(d);
+	return t`
+  <${n}>
+		<div popover="${A}" class="popup-wrapper ${(e) => e.strategy}" ${s("popupEl")} part="popup-base">
+			<div ${s("controlEl")} class="${k}" aria-hidden="${(e) => e.open ? "false" : "true"}"
+				part="${(e) => e.alternate ? "vvd-theme-alternate" : ""}">
+				<div class="popup-content">
+					<slot></slot>
+					${c((e) => e.dismissible, t`<${r} size="condensed" @click="${(e) => e.open = !1}"
+						class="dismissible-button" icon="close-small-solid" shape="pill"></${r}>`)}
+				</div>
+				${c((e) => e.arrow, t`<div class="arrow" ${s("arrowEl")}></div>`)}
 			</div>
-			${s`<label
-				>${(e) => e.label}<slot ${F("slottedContent")}></slot
-			></label>`}
-		</div>
-		${(e) => e._getFeedbackTemplate(o)}
-	</template>`;
-}, W = k(
-  "checkbox",
-  t,
-  A,
-  [u, _],
-  {
-    styles: B,
-    shadowOptions: {
-      delegatesFocus: !0
-    }
-  }
-), J = x(W);
-export {
-  t as C,
-  W as c,
-  J as r
-};
+    </div>
+  </${n}>`;
+}, [m, f], { styles: O }), M = i(j);
+//#endregion
+export { D as i, M as n, T as r, j as t };

package/bundled/definition9.cjs

@@ -1,14 +1,12 @@
-"use strict";const m=require("./definition3.cjs"),f=require("./definition4.cjs"),r=require("./vivid-element.cjs"),s=require("./floating-ui.dom.cjs"),d=require("./ref.cjs"),h=require("./when.cjs"),g=require("./class-names.cjs");var v=Object.defineProperty,l=(i,t,o,e)=>{for(var a=void 0,p=i.length-1,u;p>=0;p--)(u=i[p])&&(a=u(t,o,a)||a);return a&&v(t,o,a),a};const c={Flip:"flip",AutoPlacementHorizontal:"auto-placement-horizontal",AutoPlacementVertical:"auto-placement-vertical"},w={[c.Flip]:s.flip(),[c.AutoPlacementHorizontal]:s.autoPlacement({allowedPlacements:["bottom","top","bottom-start","bottom-end","top-start","top-end"]}),[c.AutoPlacementVertical]:s.autoPlacement({allowedPlacements:["left","right","left-start","left-end","right-start","right-end"]})};class n extends r.VividElement{constructor(){super(...arguments),this.open=!1,this.dismissible=!1,this.arrow=!1,this.alternate=!1,this.placementStrategy=c.Flip,this.animationFrame=!1,this.strategy="fixed",this.offset=null,this.#a=()=>(this.#o=this.updatePosition(),this.#o)}get#i(){let t=[s.inline(),w[this.placementStrategy],s.hide(),s.size({apply({availableWidth:e,availableHeight:a,elements:p}){Object.assign(p.floating.style,{maxWidth:`${e}px`,maxHeight:`${a}px`})}}),s.shift()],o=this.offset??0;return this.arrow&&(o+=12,t=[...t,s.arrow({element:this.arrowEl,padding:10})]),o>0&&t.unshift(s.offset(o)),t}#r;openChanged(t,o){this.#e(),this.#t(),this.$emit(o?"vwc-popup:open":"vwc-popup:close")}animationFrameChanged(){this.#t()}anchorChanged(){this.#t()}strategyChanged(){this.#e()}connectedCallback(){super.connectedCallback(),this.#e(),this.#t()}disconnectedCallback(){super.disconnectedCallback(),this.#t()}#t(){this.#r?.(),this.open&&this.controlEl&&this.controlEl.classList.add("open"),this.anchorEl&&this.open&&this.popupEl&&(this.#r=s.autoUpdate(this.anchorEl,this.popupEl,this.#a,{animationFrame:this.animationFrame}))}#e(){this.popupEl&&this.strategy==="fixed"&&(this.open?this.popupEl.showPopover():this.popupEl.hidePopover())}#o;#a;async updatePosition(){if(!this.open||!this.anchorEl)return;const t=await s.computePosition(this.anchorEl,this.popupEl,{placement:this.placement,strategy:this.strategy,middleware:this.#i});this.#s(t),this.arrow&&this.#n(t)}#s(t){const{x:o,y:e}=t,{referenceHidden:a}=t.middlewareData.hide;Object.assign(this.popupEl.style,{left:`${o}px`,top:`${e}px`,visibility:a?"hidden":"visible"})}#n(t){const{x:o,y:e}=t.middlewareData.arrow,a={left:"calc(100% - 4px)",right:"-4px",top:"calc(100% - 4px)",bottom:"-4px"},p=t.placement.split("-")[0];Object.assign(this.arrowEl.style,{left:o?`${o}px`:a[p],top:e?`${e}px`:a[p]})}get anchorEl(){return this.anchor??null}show(){return this.open=!0,this.#o??Promise.resolve()}hide(){this.open=!1}}l([r.attr({mode:"boolean"})],n.prototype,"open");l([r.attr({mode:"boolean"})],n.prototype,"dismissible");l([r.attr({mode:"boolean"})],n.prototype,"arrow");l([r.attr({mode:"boolean"})],n.prototype,"alternate");l([r.attr({mode:"fromView"})],n.prototype,"placement");l([r.attr({mode:"boolean",attribute:"animation-frame"})],n.prototype,"animationFrame");l([r.attr({mode:"fromView"})],n.prototype,"strategy");l([r.attr({attribute:"offset",converter:r.nullableNumberConverter})],n.prototype,"offset");l([r.observable],n.prototype,"anchor");const y=":host{display:var(--_popup-display, inline)}.control{border-radius:inherit;background:var(--vvd-color-surface-4dp);contain:layout}.control:not(.open){display:none}.popup-wrapper{white-space:initial;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.popup-wrapper{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.popup-wrapper ::-webkit-scrollbar{width:4px}.popup-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.popup-wrapper ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.popup-wrapper{z-index:var(--_popup-z-index, 10);overflow:visible;padding:0;border:none;border-radius:8px;margin:0;inline-size:max-content;min-inline-size:fit-content}.popup-wrapper:not(.absolute){position:fixed}.popup-wrapper.absolute{position:absolute;top:0;left:0}.popup-content{display:grid;color:var(--vvd-color-canvas-text)}.dismissible .popup-content{align-content:start;grid-template-columns:1fr auto}.arrow{position:absolute;z-index:-1;width:8px;height:8px;background:var(--vvd-color-surface-4dp);transform:rotate(45deg)}.dismissible-button{align-self:flex-start;margin-block-start:4px;margin-inline-end:4px}",x=({open:i,dismissible:t,alternate:o})=>g.classNames("control",["open",!!i],["dismissible",!!t],["alternate",!!o]);function P(i){return i.strategy&&i.strategy==="fixed"?"manual":null}const $=i=>{const t=i.tagFor(f.Elevation),o=i.tagFor(m.Button);return r.html`
-  <${t}>
-		<div popover="${P}" class="popup-wrapper ${e=>e.strategy}" ${d.ref("popupEl")} part="popup-base">
-			<div ${d.ref("controlEl")} class="${x}" aria-hidden="${e=>e.open?"false":"true"}"
-				part="${e=>e.alternate?"vvd-theme-alternate":""}">
-				<div class="popup-content">
-					<slot></slot>
-					${h.when(e=>e.dismissible,r.html`<${o} size="condensed" @click="${e=>e.open=!1}"
-						class="dismissible-button" icon="close-small-solid" shape="pill"></${o}>`)}
-				</div>
-				${h.when(e=>e.arrow,r.html`<div class="arrow" ${d.ref("arrowEl")}></div>`)}
-			</div>
-    </div>
-  </${t}>`},b=r.defineVividComponent("popup",n,$,[f.elevationDefinition,m.buttonDefinition],{styles:y}),E=r.createRegisterFunction(b);exports.PlacementStrategy=c;exports.Popup=n;exports.popupDefinition=b;exports.registerPopup=E;
+const e=require(`./vivid-element.cjs`),t=require(`./decorate.cjs`),n=require(`./class-names.cjs`),r=require(`./definition8.cjs`),i=require(`./anchored.cjs`),a=require(`./dialog.cjs`);var o=`:host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size,auto);box-sizing:border-box;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);max-inline-size:var(--tooltip-max-inline-size,30ch);padding:8px 12px}`,s=class extends i.t(e.t){constructor(...e){super(...e),this.open=!1}connectedCallback(){super.connectedCallback(),this.#a()}disconnectedCallback(){super.disconnectedCallback(),this.#a()}_anchorElChanged(e,t){e&&this.#t(e),t&&this.#e(t)}#e(e){e.addEventListener(`mouseover`,this.#n),e.addEventListener(`mouseout`,this.#r),e.addEventListener(`focusin`,this.#n),e.addEventListener(`focusout`,this.#r),e.setAttribute(`aria-haspopup`,`true`),e.setAttribute(`aria-expanded`,String(this.open))}#t(e){e.removeEventListener(`mouseover`,this.#n),e.removeEventListener(`mouseout`,this.#r),e.removeEventListener(`focusin`,this.#n),e.removeEventListener(`focusout`,this.#r),e.removeAttribute(`aria-haspopup`),e.removeAttribute(`aria-expanded`)}#n=()=>{this.open=!0,this.#i()};#r=()=>{this.open=!1,this.#i()};#i(){this._anchorEl&&this._anchorEl.setAttribute(`aria-expanded`,String(this.open))}#a(){document.removeEventListener(`keydown`,this.#o),this.open&&this.isConnected&&document.addEventListener(`keydown`,this.#o)}#o=e=>{e.key===`Escape`&&this.#r()};openChanged(e){e!==void 0&&this.#a()}};t.t([e.l],s.prototype,`text`,void 0),t.t([e.l({mode:`fromView`})],s.prototype,`placement`,void 0),t.t([e.l({mode:`boolean`})],s.prototype,`open`,void 0);var c=({open:e})=>n.t(`control`,[`open`,!!e]),l=e.o(`tooltip`,s,t=>{let n=t.tagFor(r.i);return e.d`
+${i.n()}
+<${n} class="${c}" arrow alternate
+	:placement=${e=>e.placement}
+	:anchor="${e=>e._anchorEl}"
+	:open="${e=>e.open}"
+	@keydown="${(e,t)=>{e.open&&a.t(t.event)&&(e.open=!1)}}"
+  exportparts="vvd-theme-alternate">
+  <div part="vvd-theme-alternate" class="tooltip" role="tooltip">
+		${e=>e.text}
+  </div>
+</${n}>`},[r.t],{styles:o}),u=e.s(l);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return u}});

package/bundled/definition9.js

@@ -1,236 +1,68 @@
-import { B as b, b as f } from "./definition3.js";
-import { E as g, e as v } from "./definition4.js";
-import { V as w, a as l, n as y, o as x, h as c, c as P, d as E } from "./vivid-element.js";
-import { i as $, h as k, s as C, a as F, b as z, o as V, c as A, d as _, e as u, f as D } from "./floating-ui.dom.js";
-import { r as d } from "./ref.js";
-import { w as m } from "./when.js";
-import { c as B } from "./class-names.js";
-var j = Object.defineProperty, s = (r, t, e, o) => {
-  for (var a = void 0, p = r.length - 1, h; p >= 0; p--)
-    (h = r[p]) && (a = h(t, e, a) || a);
-  return a && j(t, e, a), a;
-};
-const n = {
-  Flip: "flip",
-  AutoPlacementHorizontal: "auto-placement-horizontal",
-  AutoPlacementVertical: "auto-placement-vertical"
-}, H = {
-  [n.Flip]: D(),
-  [n.AutoPlacementHorizontal]: u({
-    allowedPlacements: [
-      "bottom",
-      "top",
-      "bottom-start",
-      "bottom-end",
-      "top-start",
-      "top-end"
-    ]
-  }),
-  [n.AutoPlacementVertical]: u({
-    allowedPlacements: [
-      "left",
-      "right",
-      "left-start",
-      "left-end",
-      "right-start",
-      "right-end"
-    ]
-  })
-};
-class i extends w {
-  constructor() {
-    super(...arguments), this.open = !1, this.dismissible = !1, this.arrow = !1, this.alternate = !1, this.placementStrategy = n.Flip, this.animationFrame = !1, this.strategy = "fixed", this.offset = null, this.#r = () => (this.#e = this.updatePosition(), this.#e);
-  }
-  get #i() {
-    let t = [
-      $(),
-      H[this.placementStrategy],
-      k(),
-      C({
-        apply({ availableWidth: o, availableHeight: a, elements: p }) {
-          Object.assign(p.floating.style, {
-            maxWidth: `${o}px`,
-            maxHeight: `${a}px`
-          });
-        }
-      }),
-      F()
-    ], e = this.offset ?? 0;
-    return this.arrow && (e += 12, t = [
-      ...t,
-      z({ element: this.arrowEl, padding: 10 })
-    ]), e > 0 && t.unshift(V(e)), t;
-  }
-  #a;
-  openChanged(t, e) {
-    this.#o(), this.#t(), this.$emit(e ? "vwc-popup:open" : "vwc-popup:close");
-  }
-  /**
-   * @internal
-   */
-  animationFrameChanged() {
-    this.#t();
-  }
-  /**
-   * @internal
-   */
-  anchorChanged() {
-    this.#t();
-  }
-  /**
-   * @internal
-   */
-  strategyChanged() {
-    this.#o();
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.#o(), this.#t();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.#t();
-  }
-  #t() {
-    this.#a?.(), this.open && this.controlEl && this.controlEl.classList.add("open"), this.anchorEl && this.open && this.popupEl && (this.#a = A(
-      this.anchorEl,
-      this.popupEl,
-      this.#r,
-      {
-        animationFrame: this.animationFrame
-      }
-    ));
-  }
-  #o() {
-    this.popupEl && this.strategy === "fixed" && (this.open ? this.popupEl.showPopover() : this.popupEl.hidePopover());
-  }
-  #e;
-  #r;
-  /**
-   * Updates popup's position
-   *
-   * @public
-   */
-  async updatePosition() {
-    if (!this.open || !this.anchorEl)
-      return;
-    const t = await _(this.anchorEl, this.popupEl, {
-      placement: this.placement,
-      strategy: this.strategy,
-      middleware: this.#i
-    });
-    this.#s(t), this.arrow && this.#p(t);
-  }
-  #s(t) {
-    const { x: e, y: o } = t, { referenceHidden: a } = t.middlewareData.hide;
-    Object.assign(this.popupEl.style, {
-      left: `${e}px`,
-      top: `${o}px`,
-      visibility: a ? "hidden" : "visible"
-    });
-  }
-  #p(t) {
-    const { x: e, y: o } = t.middlewareData.arrow, a = {
-      left: "calc(100% - 4px)",
-      right: "-4px",
-      top: "calc(100% - 4px)",
-      bottom: "-4px"
-    }, p = t.placement.split("-")[0];
-    Object.assign(this.arrowEl.style, {
-      left: e ? `${e}px` : a[p],
-      top: o ? `${o}px` : a[p]
-    });
-  }
-  get anchorEl() {
-    return this.anchor ?? null;
-  }
-  /**
-   * Shows the popup.
-   * Unlike toggling the `open` attribute, show() will wait for the popup to become visible and positioned correctly.
-   */
-  show() {
-    return this.open = !0, this.#e ?? Promise.resolve();
-  }
-  hide() {
-    this.open = !1;
-  }
-}
-s([
-  l({
-    mode: "boolean"
-  })
-], i.prototype, "open");
-s([
-  l({
-    mode: "boolean"
-  })
-], i.prototype, "dismissible");
-s([
-  l({
-    mode: "boolean"
-  })
-], i.prototype, "arrow");
-s([
-  l({
-    mode: "boolean"
-  })
-], i.prototype, "alternate");
-s([
-  l({ mode: "fromView" })
-], i.prototype, "placement");
-s([
-  l({ mode: "boolean", attribute: "animation-frame" })
-], i.prototype, "animationFrame");
-s([
-  l({ mode: "fromView" })
-], i.prototype, "strategy");
-s([
-  l({ attribute: "offset", converter: y })
-], i.prototype, "offset");
-s([
-  x
-], i.prototype, "anchor");
-const O = ":host{display:var(--_popup-display, inline)}.control{border-radius:inherit;background:var(--vvd-color-surface-4dp);contain:layout}.control:not(.open){display:none}.popup-wrapper{white-space:initial;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.popup-wrapper{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.popup-wrapper ::-webkit-scrollbar{width:4px}.popup-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.popup-wrapper ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.popup-wrapper{z-index:var(--_popup-z-index, 10);overflow:visible;padding:0;border:none;border-radius:8px;margin:0;inline-size:max-content;min-inline-size:fit-content}.popup-wrapper:not(.absolute){position:fixed}.popup-wrapper.absolute{position:absolute;top:0;left:0}.popup-content{display:grid;color:var(--vvd-color-canvas-text)}.dismissible .popup-content{align-content:start;grid-template-columns:1fr auto}.arrow{position:absolute;z-index:-1;width:8px;height:8px;background:var(--vvd-color-surface-4dp);transform:rotate(45deg)}.dismissible-button{align-self:flex-start;margin-block-start:4px;margin-inline-end:4px}", S = ({ open: r, dismissible: t, alternate: e }) => B(
-  "control",
-  ["open", !!r],
-  ["dismissible", !!t],
-  ["alternate", !!e]
-);
-function U(r) {
-  return r.strategy && r.strategy === "fixed" ? "manual" : null;
-}
-const T = (r) => {
-  const t = r.tagFor(g), e = r.tagFor(b);
-  return c`
-  <${t}>
-		<div popover="${U}" class="popup-wrapper ${(o) => o.strategy}" ${d("popupEl")} part="popup-base">
-			<div ${d("controlEl")} class="${S}" aria-hidden="${(o) => o.open ? "false" : "true"}"
-				part="${(o) => o.alternate ? "vvd-theme-alternate" : ""}">
-				<div class="popup-content">
-					<slot></slot>
-					${m(
-    (o) => o.dismissible,
-    c`<${e} size="condensed" @click="${(o) => o.open = !1}"
-						class="dismissible-button" icon="close-small-solid" shape="pill"></${e}>`
-  )}
-				</div>
-				${m(
-    (o) => o.arrow,
-    c`<div class="arrow" ${d("arrowEl")}></div>`
-  )}
-			</div>
-    </div>
-  </${t}>`;
-}, N = E(
-  "popup",
-  i,
-  T,
-  [v, f],
-  {
-    styles: O
-  }
-), G = P(N);
-export {
-  i as P,
-  n as a,
-  N as p,
-  G as r
+import { d as e, l as t, o as n, s as r, t as i } from "./vivid-element.js";
+import { t as a } from "./decorate.js";
+import { t as o } from "./class-names.js";
+import { i as s, t as c } from "./definition8.js";
+import { n as l, t as u } from "./anchored.js";
+import { t as d } from "./dialog.js";
+//#region src/lib/tooltip/tooltip.scss?inline
+var f = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size,auto);box-sizing:border-box;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);max-inline-size:var(--tooltip-max-inline-size,30ch);padding:8px 12px}", p = class extends u(i) {
+	constructor(...e) {
+		super(...e), this.open = !1;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.#a();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.#a();
+	}
+	_anchorElChanged(e, t) {
+		e && this.#t(e), t && this.#e(t);
+	}
+	#e(e) {
+		e.addEventListener("mouseover", this.#n), e.addEventListener("mouseout", this.#r), e.addEventListener("focusin", this.#n), e.addEventListener("focusout", this.#r), e.setAttribute("aria-haspopup", "true"), e.setAttribute("aria-expanded", String(this.open));
+	}
+	#t(e) {
+		e.removeEventListener("mouseover", this.#n), e.removeEventListener("mouseout", this.#r), e.removeEventListener("focusin", this.#n), e.removeEventListener("focusout", this.#r), e.removeAttribute("aria-haspopup"), e.removeAttribute("aria-expanded");
+	}
+	#n = () => {
+		this.open = !0, this.#i();
+	};
+	#r = () => {
+		this.open = !1, this.#i();
+	};
+	#i() {
+		this._anchorEl && this._anchorEl.setAttribute("aria-expanded", String(this.open));
+	}
+	#a() {
+		document.removeEventListener("keydown", this.#o), this.open && this.isConnected && document.addEventListener("keydown", this.#o);
+	}
+	#o = (e) => {
+		/* v8 ignore else -- @preserve */
+		e.key === "Escape" && this.#r();
+	};
+	openChanged(e) {
+		e !== void 0 && this.#a();
+	}
 };
+a([t], p.prototype, "text", void 0), a([t({ mode: "fromView" })], p.prototype, "placement", void 0), a([t({ mode: "boolean" })], p.prototype, "open", void 0);
+//#endregion
+//#region src/lib/tooltip/tooltip.template.ts
+var m = ({ open: e }) => o("control", ["open", !!e]), h = n("tooltip", p, (t) => {
+	let n = t.tagFor(s);
+	return e`
+${l()}
+<${n} class="${m}" arrow alternate
+	:placement=${(e) => e.placement}
+	:anchor="${(e) => e._anchorEl}"
+	:open="${(e) => e.open}"
+	@keydown="${(e, t) => {
+		e.open && d(t.event) && (e.open = !1);
+	}}"
+  exportparts="vvd-theme-alternate">
+  <div part="vvd-theme-alternate" class="tooltip" role="tooltip">
+		${(e) => e.text}
+  </div>
+</${n}>`;
+}, [c], { styles: f }), g = r(h);
+//#endregion
+export { h as n, p as r, g as t };