@vonage/vivid 4.31.0 → 5.1.0

package/bundled/single-date-picker.js

@@ -0,0 +1,39 @@
+const l = (t) => {
+  class a extends t {
+    /**
+     * @internal
+     */
+    valueChanged(e, i) {
+      super.valueChanged(e, i), this.value && this._adjustSelectedMonthToEnsureVisibilityOf(this._dateValue());
+    }
+    /**
+     * @internal
+     */
+    _onDateClick(e) {
+      this._updateValueDueToUserInteraction(this._withUpdatedDate(e), !1);
+    }
+    /**
+     * @internal
+     */
+    _isDateSelected(e) {
+      return e === this._dateValue();
+    }
+    /**
+     * @internal
+     */
+    _isDateAriaSelected(e) {
+      return this._isDateSelected(e);
+    }
+    /**
+     * @internal
+     */
+    _getSelectedDates() {
+      const e = [];
+      return this.value && e.push(this._dateValue()), e;
+    }
+  }
+  return a;
+};
+export {
+  l as S
+};

package/bundled/single-value-picker.cjs

@@ -0,0 +1 @@
+"use strict";const s=a=>{class i extends a{constructor(){super(...arguments),this._isInternalValueUpdate=!1}valueChanged(e,t){if(super.valueChanged(e,t),this.value&&!this._isValidValue(this.value)){this.value="";return}this._isInternalValueUpdate||this._updatePresentationValue()}_updatePresentationValue(){this.value?this._presentationValue=this._toPresentationValue(this.value):this._presentationValue=""}_updateValueDueToUserInteraction(e,t){this.value!==e&&(this._isInternalValueUpdate=!0,this.value=e,this._isInternalValueUpdate=!1,this.$emit("input")),t||(this._updatePresentationValue(),this.$emit("change"))}_onTextFieldChange(){if(this._presentationValue===""){this._updateValueDueToUserInteraction("",!1);return}try{this._updateValueDueToUserInteraction(this._parsePresentationValue(this._presentationValue),!1)}catch{const t=this._presentationValue;this._updateValueDueToUserInteraction("",!1),this._presentationValue=t;return}}_onTextFieldInput(e){if(super._onTextFieldInput(e),this._presentationValue===""){this._updateValueDueToUserInteraction("",!0);return}try{this._updateValueDueToUserInteraction(this._parsePresentationValue(this._presentationValue),!0)}catch{return}}_isPresentationValueInvalid(){if(this._presentationValue==="")return!1;try{return this._parsePresentationValue(this._presentationValue),!1}catch{return!0}}_onClearClick(){this._updateValueDueToUserInteraction("",!1),super._onClearClick()}}return i};exports.SingleValuePicker=s;

package/bundled/single-value-picker.js

@@ -0,0 +1,87 @@
+const n = (a) => {
+  class i extends a {
+    constructor() {
+      super(...arguments), this._isInternalValueUpdate = !1;
+    }
+    /**
+     * @internal
+     */
+    valueChanged(e, t) {
+      if (super.valueChanged(e, t), this.value && !this._isValidValue(this.value)) {
+        this.value = "";
+        return;
+      }
+      this._isInternalValueUpdate || this._updatePresentationValue();
+    }
+    /**
+     * @internal
+     */
+    _updatePresentationValue() {
+      this.value ? this._presentationValue = this._toPresentationValue(this.value) : this._presentationValue = "";
+    }
+    /**
+     * @internal
+     */
+    _updateValueDueToUserInteraction(e, t) {
+      this.value !== e && (this._isInternalValueUpdate = !0, this.value = e, this._isInternalValueUpdate = !1, this.$emit("input")), t || (this._updatePresentationValue(), this.$emit("change"));
+    }
+    /**
+     * @internal
+     */
+    _onTextFieldChange() {
+      if (this._presentationValue === "") {
+        this._updateValueDueToUserInteraction("", !1);
+        return;
+      }
+      try {
+        this._updateValueDueToUserInteraction(
+          this._parsePresentationValue(this._presentationValue),
+          !1
+        );
+      } catch {
+        const t = this._presentationValue;
+        this._updateValueDueToUserInteraction("", !1), this._presentationValue = t;
+        return;
+      }
+    }
+    /**
+     * @internal
+     */
+    _onTextFieldInput(e) {
+      if (super._onTextFieldInput(e), this._presentationValue === "") {
+        this._updateValueDueToUserInteraction("", !0);
+        return;
+      }
+      try {
+        this._updateValueDueToUserInteraction(
+          this._parsePresentationValue(this._presentationValue),
+          !0
+        );
+      } catch {
+        return;
+      }
+    }
+    /**
+     * @internal
+     */
+    _isPresentationValueInvalid() {
+      if (this._presentationValue === "")
+        return !1;
+      try {
+        return this._parsePresentationValue(this._presentationValue), !1;
+      } catch {
+        return !0;
+      }
+    }
+    /**
+     * @internal
+     */
+    _onClearClick() {
+      this._updateValueDueToUserInteraction("", !1), super._onClearClick();
+    }
+  }
+  return i;
+};
+export {
+  n as S
+};

package/bundled/slider.template.cjs

@@ -0,0 +1,41 @@
+"use strict";const d=require("./numbers.cjs"),r=require("./definition9.cjs"),m=require("./delegates-aria.cjs"),s=require("./class-names.cjs"),i=require("./ref.cjs"),p=require("./when.cjs"),l=require("./aria.cjs"),n=require("./vivid-element.cjs"),v=t=>{const a=t.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);return Math.max(0,(a[1]?a[1].length:0)-(a[2]?+a[2]:0))},h=(t,a)=>{const e=v(a),o=Math.pow(10,e),u=Math.round(t/a)*a;return Math.round(u*o)/o},$=t=>t>0?t:1,g={fromView(t){const a=Number(t);return $(a)},toView(t){return t.toString()}},T=(t,a,e)=>t+(a-t)*e,b=(t,a,e)=>d.limit(0,1,(e-t)/(a-t)),f=({disabled:t,connotation:a})=>s.classNames("control",["disabled",!!t],[`connotation-${a}`,!!a]),V=({_focusVisible:t})=>s.classNames("thumb-container",["focus-visible",t]),c=(t,a)=>{const e=t?["right","center","","100% repeat-x"]:["bottom","top","100%","repeat-y"];return n.html` <div
+		class="mark"
+		style="
+	background: linear-gradient(to ${e[0]}, currentcolor 1px, transparent 0px)
+	0px ${e[1]} / ${e[2]} calc((100% - 1px) / ${a}) ${e[3]}
+	"
+	></div>`},S=t=>{const a=t.tagFor(r.Popup);return n.html`<template
+		@focusin="${e=>e._onFocusIn()}"
+		@focusout="${e=>e._onFocusOut()}"
+	>
+		<div
+			tabindex="${e=>e.disabled?null:0}"
+			class="${f} ${e=>e.orientation}"
+			${m.delegateAria({role:"slider",ariaValueText:e=>e.ariaValueText||e.valueTextFormatter(e.value),ariaValueNow:e=>e.value,ariaValueMin:e=>e.min,ariaValueMax:e=>e.max,ariaDisabled:e=>e.disabled?"true":null,ariaOrientation:e=>e.orientation})}
+		>
+			<div class="positioning-region">
+				<div ${i.ref("track")} class="track">
+					${e=>e.markers?c(e.orientation===l.Orientation.horizontal,Math.floor((e.max-e.min)/e.step)):void 0}
+					<div class="track-start" style="${e=>e.position}"></div>
+				</div>
+				<div
+					${i.ref("thumb")}
+					class="${e=>V(e)}"
+					style="${e=>e.position}"
+				></div>
+				${p.when(e=>e.pin,n.html`<${a}
+					class="popup"
+					arrow
+					alternate
+					:anchor="${e=>e.thumb}"
+					:open=${e=>e._isThumbPopupOpen}
+					:placementStrategy=${e=>e.orientation===l.Orientation.horizontal?r.PlacementStrategy.AutoPlacementHorizontal:r.PlacementStrategy.AutoPlacementVertical}
+					animation-frame
+					exportparts="vvd-theme-alternate"
+					aria-hidden="true"
+				>
+					<div class="tooltip">${e=>e.ariaValueText||e.valueTextFormatter(e.value)}</div>
+				</${a}>`)}
+			</div>
+		</div></template
+	>`};exports.SliderTemplate=S;exports.defaultToOneConverter=g;exports.getMarkersTemplate=c;exports.inverseLerp=b;exports.lerp=T;exports.roundToStepValue=h;

package/bundled/slider.template.js

@@ -0,0 +1,100 @@
+import { l as m } from "./numbers.js";
+import { P as u, a as n } from "./definition9.js";
+import { d as p } from "./delegates-aria.js";
+import { c as l } from "./class-names.js";
+import { r as i } from "./ref.js";
+import { w as d } from "./when.js";
+import { O as s } from "./aria.js";
+import { h as o } from "./vivid-element.js";
+const $ = (a) => {
+  const e = a.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
+  return Math.max(
+    0,
+    // Number of digits right of decimal point.
+    (e[1] ? e[1].length : 0) - // Adjust for scientific notation.
+    (e[2] ? +e[2] : 0)
+  );
+}, w = (a, e) => {
+  const t = $(e), r = Math.pow(10, t), c = Math.round(a / e) * e;
+  return Math.round(c * r) / r;
+}, v = (a) => a > 0 ? a : 1, y = {
+  fromView(a) {
+    const e = Number(a);
+    return v(e);
+  },
+  toView(a) {
+    return a.toString();
+  }
+}, O = (a, e, t) => a + (e - a) * t, F = (a, e, t) => m(0, 1, (t - a) / (e - a)), h = ({ disabled: a, connotation: e }) => l(
+  "control",
+  ["disabled", !!a],
+  [`connotation-${e}`, !!e]
+), g = ({ _focusVisible: a }) => l("thumb-container", ["focus-visible", a]), f = (a, e) => {
+  const t = a ? ["right", "center", "", "100% repeat-x"] : ["bottom", "top", "100%", "repeat-y"];
+  return o` <div
+		class="mark"
+		style="
+	background: linear-gradient(to ${t[0]}, currentcolor 1px, transparent 0px)
+	0px ${t[1]} / ${t[2]} calc((100% - 1px) / ${e}) ${t[3]}
+	"
+	></div>`;
+}, z = (a) => {
+  const e = a.tagFor(u);
+  return o`<template
+		@focusin="${(t) => t._onFocusIn()}"
+		@focusout="${(t) => t._onFocusOut()}"
+	>
+		<div
+			tabindex="${(t) => t.disabled ? null : 0}"
+			class="${h} ${(t) => t.orientation}"
+			${p({
+    role: "slider",
+    ariaValueText: (t) => t.ariaValueText || t.valueTextFormatter(t.value),
+    ariaValueNow: (t) => t.value,
+    ariaValueMin: (t) => t.min,
+    ariaValueMax: (t) => t.max,
+    ariaDisabled: (t) => t.disabled ? "true" : null,
+    ariaOrientation: (t) => t.orientation
+  })}
+		>
+			<div class="positioning-region">
+				<div ${i("track")} class="track">
+					${(t) => t.markers ? f(
+    t.orientation === s.horizontal,
+    Math.floor((t.max - t.min) / t.step)
+  ) : void 0}
+					<div class="track-start" style="${(t) => t.position}"></div>
+				</div>
+				<div
+					${i("thumb")}
+					class="${(t) => g(t)}"
+					style="${(t) => t.position}"
+				></div>
+				${d(
+    (t) => t.pin,
+    o`<${e}
+					class="popup"
+					arrow
+					alternate
+					:anchor="${(t) => t.thumb}"
+					:open=${(t) => t._isThumbPopupOpen}
+					:placementStrategy=${(t) => t.orientation === s.horizontal ? n.AutoPlacementHorizontal : n.AutoPlacementVertical}
+					animation-frame
+					exportparts="vvd-theme-alternate"
+					aria-hidden="true"
+				>
+					<div class="tooltip">${(t) => t.ariaValueText || t.valueTextFormatter(t.value)}</div>
+				</${e}>`
+  )}
+			</div>
+		</div></template
+	>`;
+};
+export {
+  z as S,
+  y as d,
+  f as g,
+  F as i,
+  O as l,
+  w as r
+};

package/bundled/slotted.cjs

@@ -0,0 +1 @@
+"use strict";const o=require("./vivid-element.cjs");function r(e){return e?function(t,s,i){return t.nodeType===1&&t.matches(e)}:function(t,s,i){return t.nodeType===1}}class n{constructor(t,s){this.target=t,this.options=s,this.source=null}bind(t){const s=this.options.property;this.shouldUpdate=o.Observable.getAccessors(t).some(i=>i.name===s),this.source=t,this.updateTarget(this.computeNodes()),this.shouldUpdate&&this.observe()}unbind(){this.updateTarget(o.emptyArray),this.source=null,this.shouldUpdate&&this.disconnect()}handleEvent(){this.updateTarget(this.computeNodes())}computeNodes(){let t=this.getNodes();return this.options.filter!==void 0&&(t=t.filter(this.options.filter)),t}updateTarget(t){this.source[this.options.property]=t}}class d extends n{constructor(t,s){super(t,s)}observe(){this.target.addEventListener("slotchange",this)}disconnect(){this.target.removeEventListener("slotchange",this)}getNodes(){return this.target.assignedNodes(this.options)}}function h(e){return typeof e=="string"&&(e={property:e}),new o.AttachedBehaviorHTMLDirective("fast-slotted",d,e)}exports.NodeObservationBehavior=n;exports.elements=r;exports.slotted=h;

package/bundled/slotted.js

@@ -0,0 +1,81 @@
+import { O as o, e as n, A as r } from "./vivid-element.js";
+function u(e) {
+  return e ? function(t, s, i) {
+    return t.nodeType === 1 && t.matches(e);
+  } : function(t, s, i) {
+    return t.nodeType === 1;
+  };
+}
+class a {
+  /**
+   * Creates an instance of NodeObservationBehavior.
+   * @param target - The target to assign the nodes property on.
+   * @param options - The options to use in configuring node observation.
+   */
+  constructor(t, s) {
+    this.target = t, this.options = s, this.source = null;
+  }
+  /**
+   * Bind this behavior to the source.
+   * @param source - The source to bind to.
+   * @param context - The execution context that the binding is operating within.
+   */
+  bind(t) {
+    const s = this.options.property;
+    this.shouldUpdate = o.getAccessors(t).some((i) => i.name === s), this.source = t, this.updateTarget(this.computeNodes()), this.shouldUpdate && this.observe();
+  }
+  /**
+   * Unbinds this behavior from the source.
+   * @param source - The source to unbind from.
+   */
+  unbind() {
+    this.updateTarget(n), this.source = null, this.shouldUpdate && this.disconnect();
+  }
+  /** @internal */
+  handleEvent() {
+    this.updateTarget(this.computeNodes());
+  }
+  computeNodes() {
+    let t = this.getNodes();
+    return this.options.filter !== void 0 && (t = t.filter(this.options.filter)), t;
+  }
+  updateTarget(t) {
+    this.source[this.options.property] = t;
+  }
+}
+class h extends a {
+  /**
+   * Creates an instance of SlottedBehavior.
+   * @param target - The slot element target to observe.
+   * @param options - The options to use when observing the slot.
+   */
+  constructor(t, s) {
+    super(t, s);
+  }
+  /**
+   * Begins observation of the nodes.
+   */
+  observe() {
+    this.target.addEventListener("slotchange", this);
+  }
+  /**
+   * Disconnects observation of the nodes.
+   */
+  disconnect() {
+    this.target.removeEventListener("slotchange", this);
+  }
+  /**
+   * Retrieves the nodes that should be assigned to the target.
+   */
+  getNodes() {
+    return this.target.assignedNodes(this.options);
+  }
+}
+function c(e) {
+  return typeof e == "string" && (e = { property: e }), new r("fast-slotted", h, e);
+}
+export {
+  a as N,
+  u as e,
+  c as s
+};

package/bundled/strings.cjs

@@ -0,0 +1 @@
+"use strict";let e=0;function n(u=""){return`${u}${e++}`}exports.uniqueId=n;

package/bundled/strings.js

@@ -0,0 +1,7 @@
+let e = 0;
+function n(u = "") {
+  return `${u}${e++}`;
+}
+export {
+  n as u
+};

package/bundled/text-field.cjs

@@ -0,0 +1 @@
+"use strict";const e='.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}:host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@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-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.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-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.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-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.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-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.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.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 8px;--_text-field-pill-border-radius: 24px;display:inline-grid;width:100%;align-items:center;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:"";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;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))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within:after{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;position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}';exports.styles=e;

package/bundled/text-field.js

@@ -0,0 +1,4 @@
+const e = '.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}:host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@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-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.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-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.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-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.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-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.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.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 8px;--_text-field-pill-border-radius: 24px;display:inline-grid;width:100%;align-items:center;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:"";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;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))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within:after{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;position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}';
+export {
+  e as s
+};

package/bundled/time-selection-picker.template.cjs

@@ -0,0 +1,46 @@
+"use strict";const l=require("./vivid-element.cjs"),O=require("./picker-field.template.cjs"),D=require("./single-value-picker.cjs"),N=require("./scrollIntoView.cjs"),C=require("./when.cjs"),H=require("./repeat.cjs"),R=require("./class-names.cjs"),j=require("./localized.cjs"),z=require("./ref.cjs"),S=e=>{const t=e.split(":");if(t.length!==3)return!1;const[o,i,r]=t;if(o.length!==2||i.length!==2||r.length!==2)return!1;const n=parseInt(o,10),s=parseInt(i,10),a=parseInt(r,10);return!(isNaN(n)||isNaN(s)||isNaN(a)||n<0||n>23||s<0||s>59||a<0||a>59)},g=e=>Number.parseInt(e,10),m=e=>e.toString().padStart(2,"0"),c=e=>{const[t,o,i]=e.split(":"),r=g(t),n=g(o),s=g(i);return{hourStr:t,hours:r,minuteStr:o,minutes:n,secondStr:i,seconds:s,meridiem:r<12?"AM":"PM"}},B=(e,t)=>e>t?1:e<t?-1:0,V=e=>e%12||12,U=(e,t)=>e==="AM"&&t<12||e==="PM"&&t>=12,W=(e,t,o)=>{const i=[],r=e?c(e).hours:0,n=t?c(t).hours:23;for(let s=r;s<=n;s++)o&&!U(o,s)||i.push({value:m(s),label:m(o?V(s):s)});return i},K=(e,t,o,i)=>{const r=[];let n=0,s=59;if(o){const{hourStr:a,minutes:p}=c(o);t&&c(t).hourStr===a&&(n=p)}if(i){const{hourStr:a,minutes:p}=c(i);t&&c(t).hourStr===a&&(s=p)}for(let a=n;a<=s;a+=Math.max(1,e??1)){const p=m(a);r.push({value:p,label:p})}return r},G=(e,t,o,i)=>{const r=[];let n=0,s=59;if(o){const a=c(o);t&&(c(t).hourStr===a.hourStr&&c(t).minuteStr)===a.minuteStr&&(n=a.seconds)}if(i){const a=c(i);t&&(c(t).hourStr===a.hourStr&&c(t).minuteStr)===a.minuteStr&&(s=a.seconds)}for(let a=n;a<=s;a+=Math.max(1,e)){const p=m(a);r.push({value:p,label:p})}return r},J=(e,t)=>{const o=[];return(e?c(e).meridiem==="PM":!1)||o.push({value:"AM",label:"AM"}),(t?c(t).meridiem==="AM":!1)||o.push({value:"PM",label:"PM"}),o},P={id:"hours",getLabel:e=>e.locale.timePicker.hoursLabel,getOptions:e=>W(e.min,e.max,e.clock==="12h"?f.getSelectedOptionValue(e)??f.getOptions(e)[0].value:void 0),getSelectedOptionValue:e=>e.value?c(e.value).hourStr:void 0,updatedValue:(e,t)=>{if(e.value){const{minuteStr:o,secondStr:i}=c(e.value);return`${t}:${o}:${i}`}else return`${t}:00:00`}},w={id:"minutes",getLabel:e=>e.locale.timePicker.minutesLabel,getOptions:e=>K(e.minutesStep,e.value,e.min,e.max),getSelectedOptionValue:e=>e.value?c(e.value).minuteStr:void 0,updatedValue:(e,t)=>{if(e.value){const{hourStr:o,secondStr:i}=c(e.value);return`${o}:${t}:${i}`}else return`00:${t}:00`}},x={id:"seconds",getLabel:e=>e.locale.timePicker.secondsLabel,getOptions:e=>G(e.secondsStep,e.value,e.min,e.max),getSelectedOptionValue:e=>e.value?c(e.value).secondStr:void 0,updatedValue:(e,t)=>{if(e.value){const{hourStr:o,minuteStr:i}=c(e.value);return`${o}:${i}:${t}`}else return`00:00:${t}`}},f={id:"meridies",getLabel:e=>e.locale.timePicker.meridiesLabel,getOptions:e=>J(e.min,e.max),getSelectedOptionValue:e=>e.value?c(e.value).meridiem:void 0,updatedValue:(e,t)=>{if(e.value){const{hours:o,minuteStr:i,secondStr:r}=c(e.value);let n=o;return t==="AM"&&o>=12?n-=12:t==="PM"&&o<12&&(n+=12),`${m(n)}:${i}:${r}`}else return t==="AM"?"00:00:00":"12:00:00"}},M=e=>e.secondsStep!==void 0,E=e=>e.clock==="12h",Q=(e,t,o)=>{I(e,t.updatedValue(e,o)),h(e,t.id,o,"start");const n=e.shadowRoot.querySelector(`#${t.id}`)?.closest(".picker-wrapper")?.nextElementSibling?.querySelector(".picker");n?n.focus():e.$emit("last-column-selected",void 0,{bubbles:!1})},X=(e,t,o)=>{const i=t.getOptions(e),r=t.getSelectedOptionValue(e),n={ArrowUp:-1,ArrowDown:1}[o.key];if(n){o.preventDefault();const s=i.findIndex(k=>k.value===r),p=((s===-1?0:s+n)+i.length)%i.length,d=i[p].value;I(e,t.updatedValue(e,d)),h(e,t.id,d,"nearest"),e._clearFocusedClasses()}return!0},h=(e,t,o,i)=>{const r=e.shadowRoot.querySelector(`#${t}-${o}`);r&&N.scrollIntoView(r,r.parentElement,i)},Y=(e,t)=>{if(t.key==="Tab"){const o=e.shadowRoot.querySelectorAll(".picker"),i=t.shiftKey?o[0]:o[o.length-1];e.shadowRoot.activeElement!==i&&O.ignoreEventInFocusTraps(t),e._applyFocusedClass()}return!0},I=(e,t)=>{e.$emit("change",t,{bubbles:!1,composed:!1})},_=e=>l.html`<div class="picker-wrapper">
+		<ul
+			id="${e.id}"
+			class="picker"
+			role="listbox"
+			tabindex="0"
+			aria-label="${e.getLabel}"
+			aria-activedescendant="${t=>e.getSelectedOptionValue(t)?`${e.id}-${e.getSelectedOptionValue(t)}`:void 0}"
+			@keydown="${(t,o)=>X(t,e,o.event)}"
+		>
+			${H.repeat(t=>e.getOptions(t),l.html`<li
+					id="${t=>`${e.id}-${t.value}`}"
+					class="${(t,o)=>R.classNames("option",["selected",e.getSelectedOptionValue(o.parent)===t.value])}"
+					aria-selected="${(t,o)=>e.getSelectedOptionValue(o.parent)===t.value}"
+					role="option"
+					@click="${(t,o)=>Q(o.parent,e,t.value)}"
+				>
+					${t=>t.label}
+				</li>`)}
+		</ul>
+	</div>`,Z=()=>l.html`<div
+		class="time-pickers"
+		@keydown="${(e,{event:t})=>Y(e,t)}"
+		@focusout="${e=>e._onFocusOut()}"
+		@pointerdown="${e=>e._onPointerDown()}"
+	>
+		${_(P)} ${_(w)}
+		${C.when(M,_(x))}
+		${C.when(E,_(f))}
+	</div>`;var ee=Object.defineProperty,v=(e,t,o,i)=>{for(var r=void 0,n=e.length-1,s;n>=0;n--)(s=e[n])&&(r=s(t,o,r)||r);return r&&ee(t,o,r),r};class u extends j.Localized(l.VividElement){constructor(){super(...arguments),this.minutesStep=1,this.clock="24h",this.focusedPickerClass="focused",this._onFocusOut=()=>{this._clearFocusedClasses()},this._onPointerDown=()=>{this._clearFocusedClasses()}}valueChanged(t,o){o!==void 0&&!S(o)&&(this.value=void 0)}scrollSelectedOptionsToTop(){P.getSelectedOptionValue(this)&&h(this,"hours",P.getSelectedOptionValue(this),"start"),w.getSelectedOptionValue(this)&&h(this,"minutes",w.getSelectedOptionValue(this),"start"),M(this)&&x.getSelectedOptionValue(this)&&h(this,"seconds",x.getSelectedOptionValue(this),"start"),E(this)&&f.getSelectedOptionValue(this)&&h(this,"meridies",f.getSelectedOptionValue(this),"start")}focus(t){this.shadowRoot.querySelector(".picker").focus(t),this._applyFocusedClass()}_applyFocusedClass(){const t=this.shadowRoot.querySelectorAll(".picker");requestAnimationFrame(()=>{const o=this.shadowRoot.activeElement;t.forEach(i=>{i===o?i.parentElement?.classList.add(this.focusedPickerClass):i.parentElement?.classList.remove(this.focusedPickerClass)})})}_clearFocusedClasses(){this.shadowRoot.querySelectorAll(".picker").forEach(o=>{o.parentElement?.classList.remove(this.focusedPickerClass)})}}v([l.observable],u.prototype,"value");v([l.observable],u.prototype,"minutesStep");v([l.observable],u.prototype,"secondsStep");v([l.observable],u.prototype,"clock");v([l.observable],u.prototype,"min");v([l.observable],u.prototype,"max");const te=':host{display:inline-block}.time-pickers{display:flex;overflow:hidden;justify-content:center;padding:4px;block-size:calc(28px * var(--_inline-time-picker-num-options-visible) + 4px * (var(--_inline-time-picker-num-options-visible) - 1));gap:4px}.time-pickers .picker-wrapper{position:relative;display:flex;flex-direction:column;border-radius:4px}.time-pickers .picker-wrapper.focused:has(.picker:focus-visible){--focus-stroke-gap-color: transparent;--focus-inset: -2px;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))}.time-pickers .picker{position:relative;display:flex;overflow:hidden scroll;flex-direction:column;padding:0 4px;border-radius:4px;margin:0 -4px;gap:4px;inline-size:50px;list-style:none;scrollbar-width:none}@media (hover: hover){.time-pickers .picker:hover{scrollbar-width:auto}}.time-pickers .picker:after{display:block;flex-shrink:0;block-size:calc(28px * (var(--_inline-time-picker-num-options-visible) - 1) + 4px * (var(--_inline-time-picker-num-options-visible) - 1 - 1));content:""}.time-pickers .picker:focus-visible{outline:none}.time-pickers .option{--_connotation-color-primary: var(--vvd-time-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-time-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-time-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-time-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-time-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-time-picker-accent-pale, var(--vvd-color-neutral-300))}.time-pickers .option{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.time-pickers .option:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.time-pickers .option.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.time-pickers .option:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .option.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .option.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.time-pickers .option.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.time-pickers .option.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.time-pickers .option.selected:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.time-pickers .option.selected.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.time-pickers .option{display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:28px;color:var(--_appearance-color-text);cursor:pointer;font:var(--vvd-typography-base);inline-size:50px}.time-pickers .picker-wrapper:not(.focused) .picker:focus-visible .option.selected{--focus-stroke-gap-color: transparent;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))}',oe=l.defineVividComponent("inline-time-picker",u,Z,[],{styles:te,shadowOptions:{delegatesFocus:!0}}),L=(e,t,o)=>{const i=c(e);let n=`${m(o?V(i.hours):i.hours)}:${i.minuteStr}`;return t&&(n+=`:${i.secondStr}`),o&&(n+=` ${i.meridiem}`),n},T=e=>e>="0"&&e<="9",F=(e,t)=>{const o=e.toLowerCase(),i=[];let r;for(let p=0;p<o.length;p++){const d=o[p];if(d==="a"&&o[p+1]==="m"&&(p++,r="AM"),d==="p"&&o[p+1]==="m"&&(p++,r="PM"),T(d)){let k=d;for(;T(o[p+1]);)p++,k+=o[p];i.push(Number.parseInt(k,10))}}if(i.length===0||i.length>3)throw new Error("Invalid time format");if(r&&(i[0]<1||i[0]>12))throw new Error("Invalid time format");(r||t)&&i[0]===12&&(i[0]=0),r==="PM"&&(i[0]=i[0]+12);const[n,s=0,a=0]=i;if(n>23||s>59||a>59)throw new Error("Invalid value");return[n,s,a].map(m).join(":")};var ie=Object.defineProperty,re=Object.getOwnPropertyDescriptor,b=(e,t,o,i)=>{for(var r=i>1?void 0:i?re(t,o):t,n=e.length-1,s;n>=0;n--)(s=e[n])&&(r=(i?s(t,o,r):s(r))||r);return i&&r&&ie(t,o,r),r};const q=e=>{class t extends e{constructor(){super(...arguments),this.minutesStep=null,this.secondsStep=null,this.#t={handleChange:()=>{this.value&&(this._presentationValue=this._toPresentationValue(this.value))}}}get _displaySeconds(){return this.secondsStep!==null}get _use12hClock(){return this.clock?this.clock==="12h":this.locale.timePicker.defaultTo12HourClock}get _timePlaceholder(){let i="hh:mm";return this._displaySeconds&&(i+=":ss"),this._use12hClock&&(i+=" aa"),i}#t;#e;#o(){this.#e=l.Observable.binding(()=>this._use12hClock,this.#t),this.#e.observe(this,l.defaultExecutionContext)}#i(){this.#e.disconnect()}connectedCallback(){super.connectedCallback(),this.#o()}disconnectedCallback(){super.disconnectedCallback(),this.#i()}_onPickerButtonClick(){super._onPickerButtonClick(),this._popupOpen&&(l.DOM.processUpdates(),this._inlineTimePickerEl.scrollSelectedOptionsToTop())}_onInlineTimePickerChange(i){this._updateValueDueToUserInteraction(this._withUpdatedTime(i.detail),!1)}_onInlineTimePickerLastColumnSelected(){this._closePopup()}}return b([l.attr({attribute:"minutes-step",converter:l.nullableNumberConverter})],t.prototype,"minutesStep",2),b([l.attr({attribute:"seconds-step",converter:l.nullableNumberConverter})],t.prototype,"secondsStep",2),b([l.attr],t.prototype,"clock",2),b([l.volatile],t.prototype,"_use12hClock",1),t};var ne=Object.defineProperty,A=(e,t,o,i)=>{for(var r=void 0,n=e.length-1,s;n>=0;n--)(s=e[n])&&(r=s(t,o,r)||r);return r&&ne(t,o,r),r};const y={fromView:e=>e&&S(e)?e:"",toView(e){return e}};class $ extends q(D.SingleValuePicker(O.PickerField)){constructor(){super(),this._isValidValue=S,this.min="",this.max="",this.proxy.type="time",this.proxy.step="1"}_toPresentationValue(t){return L(t,this._displaySeconds,this._use12hClock)}_parsePresentationValue(t){return F(t,this._use12hClock)}get _timeValue(){return this.value}_withUpdatedTime(t){return t}get _resolvedMinTime(){return this.min||null}get _resolvedMaxTime(){return this.max||null}minChanged(t,o){this.proxy instanceof HTMLInputElement&&(this.proxy.min=o,this.validate())}maxChanged(t,o){this.proxy instanceof HTMLInputElement&&(this.proxy.max=o,this.validate())}get _textFieldPlaceholder(){return this._timePlaceholder}get _pickerButtonIcon(){return"clock-line"}get _pickerButtonLabel(){return this.value?this.locale.timePicker.changeTimeLabel(this._toPresentationValue(this.value)):this.locale.timePicker.chooseTimeLabel}_onPickerButtonClick(){super._onPickerButtonClick(),this._popupOpen&&(l.DOM.processUpdates(),this._focusableElsWithinDialog()[0]?.focus())}get _dialogLabel(){return this.locale.timePicker.chooseTimeLabel}_focusableElsWithinDialog(){return this._dialogEl.querySelectorAll("#inline-time-picker, .vwc-button")}_getCustomValidationError(){return this._isPresentationValueInvalid()?this.locale.timePicker.invalidTimeError:null}}A([l.attr({converter:y})],$.prototype,"min");A([l.attr({converter:y})],$.prototype,"max");const se=(e,t)=>{const o=e.tagFor(u);return l.html`
+		<${o}
+			id='inline-time-picker'
+			${z.ref("_inlineTimePickerEl")}
+			style="--_inline-time-picker-num-options-visible: ${()=>t}"
+			tabindex='1'
+			:value='${i=>i._timeValue||void 0}'
+			:clock='${i=>i._use12hClock?"12h":"24h"}'
+			:min='${i=>i._resolvedMinTime||void 0}'
+			:max='${i=>i._resolvedMaxTime||void 0}'
+			:minutesStep='${i=>i.minutesStep??1}'
+			:secondsStep='${i=>i.secondsStep??void 0}'
+			@change='${(i,r)=>i._onInlineTimePickerChange(r.event)}'
+			@last-column-selected='${i=>i._onInlineTimePickerLastColumnSelected()}'
+		>
+		</${o}>
+	`};exports.TimePicker=$;exports.TimeSelectionPicker=q;exports.TimeSelectionPickerTemplate=se;exports.ValidTimeFilter=y;exports.compareTimeStr=B;exports.formatPresentationTime=L;exports.inlineTimePickerDefinition=oe;exports.isValidTimeStr=S;exports.parsePresentationTime=F;