@vonage/vivid 4.31.0 → 5.1.0

package/bundled/definition5.js

@@ -0,0 +1,345 @@
+import { p as v } from "./definition9.js";
+import { V as b, a, o as s, n as m, v as g, c as k, d as f } from "./vivid-element.js";
+import { a as y, k as _, b as z, h as x, c as w, g as M } from "./key-codes.js";
+import { i as d, l as T, r as D, d as O, S as L } from "./slider.template.js";
+import { D as C } from "./delegates-aria.js";
+import { F as E } from "./form-associated.js";
+import { O as u } from "./aria.js";
+import { L as V } from "./localized.js";
+import { l as N } from "./numbers.js";
+var c;
+(function(l) {
+  l.ltr = "ltr", l.rtl = "rtl";
+})(c || (c = {}));
+const F = ':host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary: var(--vvd-slider-cta-primary, var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-slider-accent-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start: 1px;border-bottom-left-radius:0;border-top-left-radius:0}.control.horizontal .track .mark{position:absolute;block-size:6px;inline-size:100%;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{position:absolute;block-size:100%;inline-size:6px;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start: 1px;border-radius:0}.control.disabled{--_track-background-color: var(--vvd-color-neutral-100);--_track-start-background-color: var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color: var(--vvd-color-neutral-300);--_track-start-background-color: var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline:none;touch-action:none}.thumb-container.focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,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));--focus-stroke-gap-color: transparent;--_thumb-interaction-indicator-alpha: .05;border-radius:50%}.control.horizontal .thumb-container{transform:translate(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}@media (hover: hover){.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha: .12}}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha: .25}.thumb-container:before{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:"";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha, 0);transition:opacity .2s ease-out 0s}.thumb-container:after{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:"";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2)}.popup{pointer-events:none}.tooltip{width:auto;padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}:host([internal-part]) .thumb-container{opacity:0;transition:opacity .2s ease}:host([internal-part]) .control.horizontal .track{top:16px;block-size:4px;overflow:hidden}:host([internal-part]) .control:focus .thumb-container{opacity:1}@media (hover: hover){:host([internal-part]) .control:hover .thumb-container{opacity:1}}', S = (l) => {
+  const t = l.closest("[dir]");
+  return t !== null && t.dir === "rtl" ? c.rtl : c.ltr;
+};
+var P = Object.defineProperty, W = Object.getOwnPropertyDescriptor, o = (l, t, i, r) => {
+  for (var n = r > 1 ? void 0 : r ? W(t, i) : t, h = l.length - 1, p; h >= 0; h--)
+    (p = l[h]) && (n = (r ? p(t, i, n) : p(n)) || n);
+  return r && n && P(t, i, n), n;
+};
+const $ = {
+  singleValue: "single-value"
+};
+class e extends V(
+  C(E(b))
+) {
+  constructor() {
+    super(...arguments), this.proxy = document.createElement("input"), this.direction = c.ltr, this.isDragging = !1, this.trackWidth = 0, this.trackMinWidth = 0, this.trackHeight = 0, this.trackLeft = 0, this.trackMinHeight = 0, this.valueTextFormatter = (t) => parseFloat(t).toLocaleString(this.locale.lang), this.min = 0, this.max = 10, this.step = 1, this.orientation = u.horizontal, this.mode = $.singleValue, this.keypressHandler = (t) => {
+      if (this._focusVisible = !0, !this.readOnly) {
+        if (t.key === y)
+          t.preventDefault(), this.value = `${this.min}`;
+        else if (t.key === _)
+          t.preventDefault(), this.value = `${this.max}`;
+        else if (!t.shiftKey)
+          switch (t.key) {
+            case M:
+            case w:
+              t.preventDefault(), this.increment();
+              break;
+            case x:
+            case z:
+              t.preventDefault(), this.decrement();
+              break;
+          }
+      }
+    }, this.setupTrackConstraints = () => {
+      const t = this.track.getBoundingClientRect();
+      this.trackWidth = this.track.clientWidth, this.trackMinWidth = this.track.clientLeft, this.trackHeight = t.bottom, this.trackMinHeight = t.top, this.trackLeft = this.getBoundingClientRect().left, this.trackWidth === 0 && (this.trackWidth = 1);
+    }, this.setupListeners = (t = !1) => {
+      const i = t ? "removeEventListener" : "addEventListener";
+      this[i]("keydown", this.keypressHandler), this[i]("mousedown", this.handleMouseDown), this.thumb[i](
+        "mousedown",
+        this.handleThumbMouseDown,
+        {
+          passive: !0
+        }
+      ), this.thumb[i](
+        "touchstart",
+        this.handleThumbMouseDown,
+        {
+          passive: !0
+        }
+      ), t && (this.handleMouseDown(null), this.handleThumbMouseDown(null));
+    }, this.initialValue = "", this.handleThumbMouseDown = (t) => {
+      if (t) {
+        if (this.readOnly || this.disabled || t.defaultPrevented)
+          return;
+        this.#i = !0, t.target.focus(), this.#i = !1;
+      }
+      const i = t !== null ? "addEventListener" : "removeEventListener";
+      window[i]("mouseup", this.handleWindowMouseUp), window[i]("mousemove", this.handleMouseMove, {
+        passive: !0
+      }), window[i]("touchmove", this.handleMouseMove, {
+        passive: !0
+      }), window[i]("touchend", this.handleWindowMouseUp), this.isDragging = t !== null;
+    }, this.handleMouseMove = (t) => {
+      if (this.readOnly || this.disabled || t.defaultPrevented)
+        return;
+      const i = "TouchEvent" in window && t instanceof TouchEvent ? t.touches[0] : t, r = this.#r(i);
+      this.value = `${this.#t(r)}`;
+    }, this.handleWindowMouseUp = (t) => {
+      this.stopDragging();
+    }, this.stopDragging = () => {
+      this.isDragging = !1, this.handleMouseDown(null), this.handleThumbMouseDown(null);
+    }, this.handleMouseDown = (t) => {
+      const i = t !== null ? "addEventListener" : "removeEventListener";
+      if ((t === null || !this.disabled && !this.readOnly) && (window[i]("mouseup", this.handleWindowMouseUp), window.document[i](
+        "mouseleave",
+        this.handleWindowMouseUp
+      ), window[i]("mousemove", this.handleMouseMove), t)) {
+        t.preventDefault(), this.setupTrackConstraints(), this.#i = !0, t.target.focus(), this.#i = !1;
+        const r = this.#r(t);
+        this.value = `${this.#t(r)}`, this.isDragging = !0;
+      }
+    }, this.markers = !1, this.pin = !1, this._focusVisible = !1, this._hoveringOnThumb = !1, this.#i = !1, this._onFocusIn = () => {
+      this.#i || (this._focusVisible = !0);
+    }, this._onFocusOut = () => {
+      this._focusVisible = !1;
+    }, this.#e = () => {
+      this._hoveringOnThumb = !0;
+    }, this.#o = () => {
+      this._hoveringOnThumb = !1;
+    };
+  }
+  // Map to proxy element
+  /**
+   * @internal
+   */
+  readOnlyChanged() {
+    this.proxy instanceof HTMLInputElement && (this.proxy.readOnly = this.readOnly);
+  }
+  /**
+   * The value property, typed as a number.
+   *
+   * @public
+   */
+  get valueAsNumber() {
+    return parseFloat(this.value);
+  }
+  set valueAsNumber(t) {
+    this.value = t.toString();
+  }
+  /**
+   * @internal
+   */
+  valueChanged(t, i) {
+    if (super.valueChanged(t, i), this.$fastController.isConnected) {
+      const r = parseFloat(i), n = this.#t(r).toString();
+      if (n !== i) {
+        this.value = n;
+        return;
+      }
+      this.setThumbPositionForOrientation(this.direction), this.$emit("change");
+    }
+  }
+  // Map to proxy element.
+  /**
+   * @internal
+   */
+  minChanged() {
+    this.proxy instanceof HTMLInputElement && (this.proxy.min = `${this.min}`), this.validate();
+  }
+  // Map to proxy element.
+  /**
+   * @internal
+   */
+  maxChanged() {
+    this.proxy instanceof HTMLInputElement && (this.proxy.max = `${this.max}`), this.validate();
+  }
+  // Map to proxy element.
+  /**
+   * @internal
+   */
+  stepChanged() {
+    this.proxy instanceof HTMLInputElement && (this.proxy.step = `${this.step}`), this.updateStepMultiplier(), this.validate();
+  }
+  /**
+   * @internal
+   */
+  orientationChanged() {
+    this.$fastController.isConnected && this.setThumbPositionForOrientation(this.direction);
+  }
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback(), this.proxy.setAttribute("type", "range"), this.direction = S(this), this.updateStepMultiplier(), this.setupTrackConstraints(), this.setupListeners(), this.setupDefaultValue(), this.setThumbPositionForOrientation(this.direction), this.#s();
+  }
+  /**
+   * @internal
+   */
+  disconnectedCallback() {
+    this.setupListeners(!0), this.#a();
+  }
+  /**
+   * Increment the value by the step
+   *
+   * @public
+   */
+  increment() {
+    const t = this.direction !== c.rtl && this.orientation !== u.vertical ? Number(this.value) + Number(this.step) : Number(this.value) - Number(this.step);
+    this.value = this.#t(t).toString();
+  }
+  /**
+   * Decrement the value by the step
+   *
+   * @public
+   */
+  decrement() {
+    const t = this.direction !== c.rtl && this.orientation !== u.vertical ? Number(this.value) - Number(this.step) : Number(this.value) + Number(this.step);
+    this.value = this.#t(t).toString();
+  }
+  /**
+   * Places the thumb based on the current value
+   *
+   * @public
+   * @param direction - writing mode
+   */
+  setThumbPositionForOrientation(t) {
+    const i = this.#n(this.valueAsNumber);
+    this.orientation === u.horizontal ? this.position = this.isDragging ? `right: ${i}%; transition: none;` : `right: ${i}%; transition: right 0.2s ease;` : this.position = this.isDragging ? `bottom: ${i}%; transition: none;` : `bottom: ${i}%; transition: bottom 0.2s ease;`;
+  }
+  #n(t) {
+    return (1 - d(this.min, this.max, t)) * 100;
+  }
+  /**
+   * Update the step multiplier used to ensure rounding errors from steps that
+   * are not whole numbers
+   */
+  updateStepMultiplier() {
+    const t = this.step + "", i = this.step % 1 ? t.length - t.indexOf(".") - 1 : 0;
+    this.stepMultiplier = Math.pow(10, i);
+  }
+  get midpoint() {
+    return `${this.#t((this.max + this.min) / 2)}`;
+  }
+  setupDefaultValue() {
+    if (typeof this.value == "string")
+      if (this.value.length === 0)
+        this.initialValue = this.midpoint;
+      else {
+        const t = parseFloat(this.value);
+        !Number.isNaN(t) && (t < this.min || t > this.max) && (this.value = this.midpoint);
+      }
+  }
+  #r(t) {
+    const i = this.track.getBoundingClientRect(), [r, n, h] = this.orientation === u.horizontal ? [
+      this.track.clientLeft,
+      this.track.clientWidth,
+      t.pageX - document.documentElement.scrollLeft - this.getBoundingClientRect().left
+    ] : [
+      i.top,
+      i.bottom,
+      t.pageY - document.documentElement.scrollTop
+    ];
+    return T(this.min, this.max, d(r, n, h));
+  }
+  #t(t) {
+    return N(
+      this.min,
+      this.max,
+      D(t - this.min, this.step) + this.min
+    );
+  }
+  get _isThumbPopupOpen() {
+    return this._focusVisible || this._hoveringOnThumb || this.isDragging;
+  }
+  #i;
+  #s() {
+    this.thumb.addEventListener("mouseover", this.#e, {
+      passive: !0
+    }), this.thumb.addEventListener("mouseout", this.#o, {
+      passive: !0
+    });
+  }
+  #a() {
+    this.thumb.removeEventListener("mouseover", this.#e), this.thumb.removeEventListener("mouseout", this.#o);
+  }
+  #e;
+  #o;
+}
+o([
+  a({ attribute: "readonly", mode: "boolean" })
+], e.prototype, "readOnly", 2);
+o([
+  s
+], e.prototype, "direction", 2);
+o([
+  s
+], e.prototype, "isDragging", 2);
+o([
+  s
+], e.prototype, "position", 2);
+o([
+  s
+], e.prototype, "trackWidth", 2);
+o([
+  s
+], e.prototype, "trackMinWidth", 2);
+o([
+  s
+], e.prototype, "trackHeight", 2);
+o([
+  s
+], e.prototype, "trackLeft", 2);
+o([
+  s
+], e.prototype, "trackMinHeight", 2);
+o([
+  s
+], e.prototype, "valueTextFormatter", 2);
+o([
+  a({ converter: m })
+], e.prototype, "min", 2);
+o([
+  a({ converter: m })
+], e.prototype, "max", 2);
+o([
+  a({ converter: O })
+], e.prototype, "step", 2);
+o([
+  a
+], e.prototype, "orientation", 2);
+o([
+  a
+], e.prototype, "mode", 2);
+o([
+  a({
+    mode: "boolean"
+  })
+], e.prototype, "markers", 2);
+o([
+  a({ mode: "boolean" })
+], e.prototype, "pin", 2);
+o([
+  a
+], e.prototype, "connotation", 2);
+o([
+  s
+], e.prototype, "_focusVisible", 2);
+o([
+  s
+], e.prototype, "_hoveringOnThumb", 2);
+o([
+  g
+], e.prototype, "_isThumbPopupOpen", 1);
+const A = f(
+  "slider",
+  e,
+  L,
+  [v],
+  {
+    styles: F,
+    shadowOptions: {
+      delegatesFocus: !0
+    }
+  }
+), q = k(A);
+export {
+  e as S,
+  q as r,
+  A as s
+};

package/bundled/definition6.cjs

@@ -0,0 +1,31 @@
+"use strict";const f=require("./definition9.cjs"),c=require("./definition7.cjs"),i=require("./vivid-element.cjs"),x=require("./anchored.cjs"),v=require("./delegates-aria.cjs"),I=require("./divider.cjs"),u=require("./key-codes.cjs"),b=require("./index.cjs"),y=require("./ref.cjs"),E=require("./class-names.cjs"),h=require("./slotted.cjs"),k=":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.base{display:flex;overflow:hidden auto;box-sizing:border-box;flex-direction:column;padding:4px;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);min-inline-size:var(--menu-min-inline-size)}@media not all and (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size, 300px)}}@media (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size)}}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[data-vvd-component=menuitem]:focus-visible){box-shadow:0 0 0 4px color-mix(in srgb,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));--focus-stroke-gap-color: transparent;display:block}.header{padding-block-start:4px;padding-inline:8px}.hide-header .header{display:none}.body{display:flex;flex-direction:column;row-gap:1px}.hide-body .body{display:none}.action-items{display:flex;justify-content:flex-end;gap:8px;padding-block-end:4px;padding-inline:12px}.hide-actions .action-items{display:none}";var C=Object.defineProperty,d=(o,e,n,a)=>{for(var t=void 0,s=o.length-1,l;s>=0;s--)(l=o[s])&&(t=l(e,n,t)||t);return t&&C(e,n,t),t};const $=o=>o instanceof c.MenuItem&&o.controlType==="checkbox",p=o=>o instanceof c.MenuItem&&o.controlType==="radio",m=o=>o instanceof I.Divider?!0:o.role==="separator",_=o=>o instanceof c.MenuItem?!0:!!(o.role&&o.role in c.MenuItemRole);class r extends x.Anchored(v.DelegatesAria(i.VividElement)){constructor(){super(...arguments),this.expandedItem=null,this.focusIndex=-1,this.handleFocusOut=e=>{!this.contains(e.relatedTarget)&&this.menuItems!==void 0&&this.menuItems.length&&(this.collapseExpandedItem(),this.menuItems[this.focusIndex].setAttribute("tabindex","-1"),this.menuItems[0].setAttribute("tabindex","0"),this.focusIndex=0)},this.handleItemFocus=e=>{const n=e.target;this.menuItems!==void 0&&n!==this.menuItems[this.focusIndex]&&(this.menuItems[this.focusIndex].setAttribute("tabindex","-1"),this.focusIndex=this.menuItems.indexOf(n),n.setAttribute("tabindex","0"))},this.handleExpandedChanged=e=>{const n=e.target;this.expandedItem!==null&&n===this.expandedItem&&n.expanded===!1&&(this.expandedItem=null),n.expanded&&(this.expandedItem=n)},this.removeItemListeners=()=>{this.menuItems!==void 0&&this.menuItems.forEach(e=>{e.removeEventListener("expanded-change",this.handleExpandedChanged),e.removeEventListener("focus",this.handleItemFocus)})},this.setItems=()=>{const e=this.domChildren();this.removeItemListeners(),this.menuItems=e.filter(_),this.menuItems.length&&(this.focusIndex=0),this.menuItems.forEach((n,a)=>{n instanceof c.MenuItem&&(n._isPresentational=!1),n.setAttribute("tabindex",a===0?"0":"-1"),n.addEventListener("expanded-change",this.handleExpandedChanged),n.addEventListener("focus",this.handleItemFocus)})},this.placement="bottom",this.autoDismiss=!1,this.positionStrategy="fixed",this.open=!1,this.#t=()=>{if(this.#e==="off"||this.#e==="legacy"&&this.open)return;const e=!this.open;i.DOM.queueUpdate(()=>this.open=e)},this._onFocusout=e=>{const n=e.relatedTarget,a=!this.contains(n)&&!this._anchorEl?.contains(n);this.autoDismiss&&a&&(this.open=!1)}}itemsChanged(){this.$fastController.isConnected&&this.menuItems!==void 0&&this.setItems()}connectedCallback(){super.connectedCallback(),i.DOM.queueUpdate(()=>{this.setItems()})}disconnectedCallback(){super.disconnectedCallback(),this.removeItemListeners(),this.menuItems=void 0}focus(){const e=this.querySelector('[autofocus]:not([slot="anchor"])');e instanceof HTMLElement?e.focus():this.setFocus(0)}collapseExpandedItem(){this.expandedItem!==null&&(this.expandedItem.expanded=!1,this.expandedItem=null)}handleMenuKeyDown(e){if(!(e.defaultPrevented||this.menuItems===void 0))switch(e.key){case u.keyArrowDown:this.setFocus(this.focusIndex+1);return;case u.keyArrowUp:this.setFocus(this.focusIndex-1);return;case u.keyEnd:this.setFocus(this.menuItems.length-1);return;case u.keyHome:this.setFocus(0);return;default:return!0}}domChildren(){return Array.from(this.children).filter(e=>!e.hasAttribute("hidden")).filter(e=>!e.hasAttribute("slot"))}setFocus(e){if(this.menuItems!==void 0&&e>=0&&e<this.menuItems.length){const n=this.menuItems[e];this.focusIndex>-1&&this.menuItems.length>=this.focusIndex-1&&this.menuItems[this.focusIndex].setAttribute("tabindex","-1"),this.focusIndex=e,n.setAttribute("tabindex","0"),n.focus()}}get#e(){return this.trigger??"auto"}openChanged(e,n){n&&this._popupEl?.show().then(()=>this.focus()),n?this.$emit("open",void 0,{bubbles:!1}):this.$emit("close",void 0,{bubbles:!1}),this._anchorEl&&this.#n(this._anchorEl)}_anchorElChanged(e,n){e&&this.#o(e),n&&this.#s(n)}#s(e){e.addEventListener("click",this.#t,!0),e.addEventListener("focusout",this._onFocusout),e.ariaHasPopup="menu",this.#n(e)}#n(e){e.ariaExpanded=this.open.toString(),e.dataset.expanded=this.open.toString()}#o(e){e.removeEventListener("click",this.#t,!0),e.removeEventListener("focusout",this._onFocusout),e.ariaHasPopup=null,e.ariaExpanded=null,delete e.dataset.expanded}#t;_onChange(e){if(this.menuItems===void 0||!(e.target instanceof Element))return;this.#e==="auto"&&!$(e.target)&&(this.open=!1);const n=this.domChildren(),a=n.indexOf(e.target);if(a!==-1){if(p(e.target)&&e.target.checked){for(let t=a-1;t>=0;--t){const s=n[t];if(p(s)&&(s.checked=!1),m(s))break}for(let t=a+1;t<=n.length-1;++t){const s=n[t];if(p(s)&&(s.checked=!1),m(s))break}}return!0}}}d([i.observable],r.prototype,"items");d([i.attr({mode:"fromView"})],r.prototype,"placement");d([i.attr],r.prototype,"trigger");d([i.attr({mode:"boolean",attribute:"auto-dismiss"})],r.prototype,"autoDismiss");d([i.attr({mode:"fromView",attribute:"position-strategy"})],r.prototype,"positionStrategy");d([i.attr({mode:"boolean"})],r.prototype,"open");d([i.observable],r.prototype,"headerSlottedContent");d([i.observable],r.prototype,"actionItemsSlottedContent");d([i.observable],r.prototype,"_popupOffset");const A=({headerSlottedContent:o,actionItemsSlottedContent:e,items:n})=>E.classNames("base",["hide-header",!o?.length],["hide-actions",!e?.length],["hide-body",n&&!n.length]);function w(o,e){return o.open&&b.handleEscapeKeyAndStopPropogation(e)&&(o.open=!1),!0}const F=o=>{const e=o.tagFor(f.Popup),n=x.anchorSlotTemplateFactory();function a(t,s,l){s.stopPropagation(),t.open=l}return i.html`
+		<template @change="${(t,s)=>t._onChange(s.event)}"
+							@focusout="${(t,s)=>t._onFocusout(s.event)}">
+			${n}
+			<${e}
+				${y.ref("_popupEl")}
+				:placement=${t=>t.placement}
+				:open=${t=>t.open}
+				:anchor=${t=>t._anchorEl}
+				:strategy="${t=>t.positionStrategy}"
+				:offset=${t=>t._popupOffset}
+				@keydown="${(t,s)=>w(t,s.event)}"
+				@vwc-popup:open="${(t,s)=>a(t,s.event,!0)}"
+				@vwc-popup:close="${(t,s)=>a(t,s.event,!1)}"
+			>
+			<div class="${A}">
+				<div class="header">
+					<slot name="header" ${h.slotted("headerSlottedContent")}></slot>
+				</div>
+				<div
+					class="body"
+					${v.delegateAria({role:"menu"})}
+					@keydown="${(t,s)=>t.handleMenuKeyDown(s.event)}"
+					@focusout="${(t,s)=>t.handleFocusOut(s.event)}"
+				>
+					<slot ${h.slotted("items")}></slot>
+				</div>
+				<footer class="action-items"><slot name="action-items"  ${h.slotted("actionItemsSlottedContent")}></slot></footer>
+			</div>
+		</${e}>
+	</template>`},g=i.defineVividComponent(c.menuName,r,F,[f.popupDefinition,c.menuItemDefinition],{styles:k}),M=i.createRegisterFunction(g);exports.Menu=r;exports.menuDefinition=g;exports.registerMenu=M;

package/bundled/definition6.js

@@ -0,0 +1,265 @@
+import { P as x, p as v } from "./definition9.js";
+import { M as l, a as g, m as I, b } from "./definition7.js";
+import { D as m, V as y, o as h, a as d, h as E, c as k, d as C } from "./vivid-element.js";
+import { A as $, a as _ } from "./anchored.js";
+import { D as A, d as w } from "./delegates-aria.js";
+import { D as F } from "./divider.js";
+import { a as D, k as S, c as M, b as L } from "./key-codes.js";
+import { h as P } from "./index.js";
+import { r as z } from "./ref.js";
+import { c as T } from "./class-names.js";
+import { s as u } from "./slotted.js";
+const O = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.base{display:flex;overflow:hidden auto;box-sizing:border-box;flex-direction:column;padding:4px;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);min-inline-size:var(--menu-min-inline-size)}@media not all and (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size, 300px)}}@media (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size)}}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[data-vvd-component=menuitem]:focus-visible){box-shadow:0 0 0 4px color-mix(in srgb,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));--focus-stroke-gap-color: transparent;display:block}.header{padding-block-start:4px;padding-inline:8px}.hide-header .header{display:none}.body{display:flex;flex-direction:column;row-gap:1px}.hide-body .body{display:none}.action-items{display:flex;justify-content:flex-end;gap:8px;padding-block-end:4px;padding-inline:12px}.hide-actions .action-items{display:none}";
+var H = Object.defineProperty, r = (o, e, s, i) => {
+  for (var t = void 0, n = o.length - 1, c; n >= 0; n--)
+    (c = o[n]) && (t = c(e, s, t) || t);
+  return t && H(e, s, t), t;
+};
+const K = (o) => o instanceof l && o.controlType === "checkbox", p = (o) => o instanceof l && o.controlType === "radio", f = (o) => o instanceof F ? !0 : o.role === "separator", q = (o) => o instanceof l ? !0 : !!(o.role && o.role in g);
+class a extends $(A(y)) {
+  constructor() {
+    super(...arguments), this.expandedItem = null, this.focusIndex = -1, this.handleFocusOut = (e) => {
+      !this.contains(e.relatedTarget) && this.menuItems !== void 0 && this.menuItems.length && (this.collapseExpandedItem(), this.menuItems[this.focusIndex].setAttribute("tabindex", "-1"), this.menuItems[0].setAttribute("tabindex", "0"), this.focusIndex = 0);
+    }, this.handleItemFocus = (e) => {
+      const s = e.target;
+      this.menuItems !== void 0 && s !== this.menuItems[this.focusIndex] && (this.menuItems[this.focusIndex].setAttribute("tabindex", "-1"), this.focusIndex = this.menuItems.indexOf(s), s.setAttribute("tabindex", "0"));
+    }, this.handleExpandedChanged = (e) => {
+      const s = e.target;
+      this.expandedItem !== null && s === this.expandedItem && s.expanded === !1 && (this.expandedItem = null), s.expanded && (this.expandedItem = s);
+    }, this.removeItemListeners = () => {
+      this.menuItems !== void 0 && this.menuItems.forEach((e) => {
+        e.removeEventListener("expanded-change", this.handleExpandedChanged), e.removeEventListener(
+          "focus",
+          this.handleItemFocus
+        );
+      });
+    }, this.setItems = () => {
+      const e = this.domChildren();
+      this.removeItemListeners(), this.menuItems = e.filter(q), this.menuItems.length && (this.focusIndex = 0), this.menuItems.forEach((s, i) => {
+        s instanceof l && (s._isPresentational = !1), s.setAttribute("tabindex", i === 0 ? "0" : "-1"), s.addEventListener("expanded-change", this.handleExpandedChanged), s.addEventListener("focus", this.handleItemFocus);
+      });
+    }, this.placement = "bottom", this.autoDismiss = !1, this.positionStrategy = "fixed", this.open = !1, this.#t = () => {
+      if (this.#e === "off" || this.#e === "legacy" && this.open)
+        return;
+      const e = !this.open;
+      m.queueUpdate(() => this.open = e);
+    }, this._onFocusout = (e) => {
+      const s = e.relatedTarget, i = !this.contains(s) && !this._anchorEl?.contains(s);
+      this.autoDismiss && i && (this.open = !1);
+    };
+  }
+  /**
+   * @internal
+   */
+  itemsChanged() {
+    this.$fastController.isConnected && this.menuItems !== void 0 && this.setItems();
+  }
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback(), m.queueUpdate(() => {
+      this.setItems();
+    });
+  }
+  /**
+   * @internal
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeItemListeners(), this.menuItems = void 0;
+  }
+  /**
+   * Moves focus into the menu. If there is a child with the `autofocus` attribute, it will be focused.
+   * Otherwise, the first focusable child will be focused.
+   *
+   * @public
+   */
+  focus() {
+    const e = this.querySelector(
+      '[autofocus]:not([slot="anchor"])'
+    );
+    e instanceof HTMLElement ? e.focus() : this.setFocus(0);
+  }
+  /**
+   * Collapses any expanded Menu Items.
+   *
+   * @public
+   */
+  collapseExpandedItem() {
+    this.expandedItem !== null && (this.expandedItem.expanded = !1, this.expandedItem = null);
+  }
+  /**
+   * @internal
+   */
+  handleMenuKeyDown(e) {
+    if (!(e.defaultPrevented || this.menuItems === void 0))
+      switch (e.key) {
+        case L:
+          this.setFocus(this.focusIndex + 1);
+          return;
+        case M:
+          this.setFocus(this.focusIndex - 1);
+          return;
+        case S:
+          this.setFocus(this.menuItems.length - 1);
+          return;
+        case D:
+          this.setFocus(0);
+          return;
+        default:
+          return !0;
+      }
+  }
+  /**
+   * get an array of valid DOM children
+   */
+  domChildren() {
+    return Array.from(this.children).filter((e) => !e.hasAttribute("hidden")).filter((e) => !e.hasAttribute("slot"));
+  }
+  setFocus(e) {
+    if (this.menuItems !== void 0 && e >= 0 && e < this.menuItems.length) {
+      const s = this.menuItems[e];
+      this.focusIndex > -1 && this.menuItems.length >= this.focusIndex - 1 && this.menuItems[this.focusIndex].setAttribute("tabindex", "-1"), this.focusIndex = e, s.setAttribute("tabindex", "0"), s.focus();
+    }
+  }
+  get #e() {
+    return this.trigger ?? "auto";
+  }
+  openChanged(e, s) {
+    s && this._popupEl?.show().then(() => this.focus()), s ? this.$emit("open", void 0, { bubbles: !1 }) : this.$emit("close", void 0, { bubbles: !1 }), this._anchorEl && this.#s(this._anchorEl);
+  }
+  /**
+   * @internal
+   */
+  _anchorElChanged(e, s) {
+    e && this.#o(e), s && this.#n(s);
+  }
+  #n(e) {
+    e.addEventListener("click", this.#t, !0), e.addEventListener("focusout", this._onFocusout), e.ariaHasPopup = "menu", this.#s(e);
+  }
+  #s(e) {
+    e.ariaExpanded = this.open.toString(), e.dataset.expanded = this.open.toString();
+  }
+  #o(e) {
+    e.removeEventListener("click", this.#t, !0), e.removeEventListener("focusout", this._onFocusout), e.ariaHasPopup = null, e.ariaExpanded = null, delete e.dataset.expanded;
+  }
+  #t;
+  /**
+   * @internal
+   */
+  _onChange(e) {
+    if (this.menuItems === void 0 || !(e.target instanceof Element))
+      return;
+    this.#e === "auto" && !K(e.target) && (this.open = !1);
+    const s = this.domChildren(), i = s.indexOf(e.target);
+    if (i !== -1) {
+      if (p(e.target) && e.target.checked) {
+        for (let t = i - 1; t >= 0; --t) {
+          const n = s[t];
+          if (p(n) && (n.checked = !1), f(n))
+            break;
+        }
+        for (let t = i + 1; t <= s.length - 1; ++t) {
+          const n = s[t];
+          if (p(n) && (n.checked = !1), f(n))
+            break;
+        }
+      }
+      return !0;
+    }
+  }
+}
+r([
+  h
+], a.prototype, "items");
+r([
+  d({ mode: "fromView" })
+], a.prototype, "placement");
+r([
+  d
+], a.prototype, "trigger");
+r([
+  d({ mode: "boolean", attribute: "auto-dismiss" })
+], a.prototype, "autoDismiss");
+r([
+  d({ mode: "fromView", attribute: "position-strategy" })
+], a.prototype, "positionStrategy");
+r([
+  d({ mode: "boolean" })
+], a.prototype, "open");
+r([
+  h
+], a.prototype, "headerSlottedContent");
+r([
+  h
+], a.prototype, "actionItemsSlottedContent");
+r([
+  h
+], a.prototype, "_popupOffset");
+const R = ({
+  headerSlottedContent: o,
+  actionItemsSlottedContent: e,
+  items: s
+}) => T(
+  "base",
+  ["hide-header", !o?.length],
+  ["hide-actions", !e?.length],
+  ["hide-body", s && !s.length]
+);
+function U(o, e) {
+  return o.open && P(e) && (o.open = !1), !0;
+}
+const V = (o) => {
+  const e = o.tagFor(x), s = _();
+  function i(t, n, c) {
+    n.stopPropagation(), t.open = c;
+  }
+  return E`
+		<template @change="${(t, n) => t._onChange(n.event)}"
+							@focusout="${(t, n) => t._onFocusout(n.event)}">
+			${s}
+			<${e}
+				${z("_popupEl")}
+				:placement=${(t) => t.placement}
+				:open=${(t) => t.open}
+				:anchor=${(t) => t._anchorEl}
+				:strategy="${(t) => t.positionStrategy}"
+				:offset=${(t) => t._popupOffset}
+				@keydown="${(t, n) => U(t, n.event)}"
+				@vwc-popup:open="${(t, n) => i(t, n.event, !0)}"
+				@vwc-popup:close="${(t, n) => i(t, n.event, !1)}"
+			>
+			<div class="${R}">
+				<div class="header">
+					<slot name="header" ${u("headerSlottedContent")}></slot>
+				</div>
+				<div
+					class="body"
+					${w({
+    role: "menu"
+  })}
+					@keydown="${(t, n) => t.handleMenuKeyDown(n.event)}"
+					@focusout="${(t, n) => t.handleFocusOut(n.event)}"
+				>
+					<slot ${u("items")}></slot>
+				</div>
+				<footer class="action-items"><slot name="action-items"  ${u(
+    "actionItemsSlottedContent"
+  )}></slot></footer>
+			</div>
+		</${e}>
+	</template>`;
+}, j = C(
+  b,
+  a,
+  V,
+  [v, I],
+  {
+    styles: O
+  }
+), se = k(j);
+export {
+  a as M,
+  j as m,
+  se as r
+};