@vonage/vivid 5.23.1-preview.0 → 5.24.0

package/range-slider/index.js

@@ -3,21 +3,21 @@ import { A as t, d as n, h as r, m as i, p as a, t as o, u as s } from "../bundl
 import { t as c } from "../bundled/ref.js";
 import { t as l } from "../bundled/when.js";
 import { t as u } from "../bundled/decorate.js";
-import { t as d } from "../bundled/form-element.js";
-import { t as f } from "../bundled/aria.js";
-import { t as p } from "../bundled/class-names.js";
-import { i as m, n as h, r as g, t as _ } from "../bundled/key-codes.js";
-import { n as v } from "../bundled/numbers.js";
-import { n as y } from "../bundled/form-associated.js";
-import { i as b, r as x, t as S } from "../bundled/definition8.js";
+import { t as d } from "../bundled/aria.js";
+import { t as f } from "../bundled/class-names.js";
+import { i as p, n as m, r as h, t as g } from "../bundled/key-codes.js";
+import { n as _ } from "../bundled/numbers.js";
+import { n as v } from "../bundled/form-associated.js";
+import { i as y, r as b, t as x } from "../bundled/definition8.js";
+import { t as S } from "../bundled/form-element.js";
 import { a as C, i as w, n as T, o as E, r as D } from "../bundled/slider.template.js";
 //#region src/lib/range-slider/range-slider.scss?inline
-var O = ":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;--_thumb-size:12px;--_thumb-interaction-indicator-size:36px;--_track-start-inset-inline-start:0;--_track-start-inset-block-start:0;cursor:pointer;user-select:none;outline:none}.control .positioning-region{position:relative}.control .track{background:var(--_track-background-color);border-radius:4px;position:absolute}.control .track-start{border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;position:absolute;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));min-inline-size:var(--_thumb-size);margin-inline-start:calc(var(--_thumb-size) / 2)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:2px;left:0;right:0}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start:1px;border-top-left-radius:0;border-bottom-left-radius:0}.control.horizontal .track .mark{block-size:6px;inline-size:100%;position:absolute;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{block-size:100%;inline-size:6px;position:absolute;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{block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);touch-action:none;border-radius:50%;outline:none;position:absolute}.thumb-container.focus-visible{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));--focus-stroke-gap-color:transparent;--_thumb-interaction-indicator-alpha:.05;border-radius:50%}.control.horizontal .thumb-container{transform:translateX(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{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;display:block;position:absolute}.thumb-container:after{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);display:block;position:absolute}.popup{pointer-events:none}.tooltip{width:auto;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);padding:8px 12px}:host([internal-part]) .thumb-container{opacity:0;transition:opacity .2s}:host([internal-part]) .control.horizontal .track{block-size:4px;top:16px;overflow:hidden}:host([internal-part]) .control:focus .thumb-container{opacity:1}@media (hover:hover){:host([internal-part]) .control:hover .thumb-container{opacity:1}}.control,:host([markers]) .control.horizontal .track-start,:host([markers]) .control.vertical .track-start{--_track-start-inset-inline-start:auto;--_track-start-inset-block-start:auto}", k = {
+var O = ":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;--_thumb-size:12px;--_thumb-interaction-indicator-size:36px;--_track-start-inset-inline-start:0;--_track-start-inset-block-start:0;cursor:pointer;user-select:none;outline:none}.control .positioning-region{position:relative}.control .track{background:var(--_track-background-color);border-radius:4px;position:absolute}.control .track-start{border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;position:absolute;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));min-inline-size:var(--_thumb-size);margin-inline-start:calc(var(--_thumb-size) / 2)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:2px;left:0;right:0}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start:1px;border-top-left-radius:0;border-bottom-left-radius:0}.control.horizontal .track .mark{block-size:6px;inline-size:100%;position:absolute;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{block-size:100%;inline-size:6px;position:absolute;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{block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);touch-action:none;border-radius:50%;outline:none;position:absolute}.thumb-container.focus-visible{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));--focus-stroke-gap-color:transparent;--_thumb-interaction-indicator-alpha:.05;border-radius:50%}.control.horizontal .thumb-container{transform:translateX(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{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);display:block;position:absolute}@media (prefers-reduced-motion:no-preference){.thumb-container:before{transition:opacity .2s ease-out}}.thumb-container:after{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);display:block;position:absolute}.popup{pointer-events:none}.tooltip{width:auto;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);padding:8px 12px}:host([internal-part]) .thumb-container{opacity:0}@media (prefers-reduced-motion:no-preference){:host([internal-part]) .thumb-container{transition:opacity .2s}}:host([internal-part]) .control.horizontal .track{block-size:4px;top:16px;overflow:hidden}:host([internal-part]) .control:focus .thumb-container{opacity:1}@media (hover:hover){:host([internal-part]) .control:hover .thumb-container{opacity:1}}.control,:host([markers]) .control.horizontal .track-start,:host([markers]) .control.vertical .track-start{--_track-start-inset-inline-start:auto;--_track-start-inset-block-start:auto}", k = {
 	Increment: 1,
 	Decrement: -1
-}, A = class extends e(d(y(o))) {
+}, A = class extends e(S(v(o))) {
 	constructor(...e) {
-		super(...e), this.#e = !1, this.start = "", this.end = "", this.min = 0, this.max = 10, this.step = 1, this.orientation = f.horizontal, this.ariaStartLabel = null, this.ariaEndLabel = null, this.markers = !1, this.pin = !1, this.valueTextFormatter = (e) => parseFloat(e).toLocaleString(this.locale.lang), this.proxy = document.createElement("input"), this._trackEl = null, this._startThumbEl = null, this._endThumbEl = null, this._draggingThumb = !1, this._visiblyFocusedThumb = null, this._hoveredThumb = null, this._startThumbCss = "", this._endThumbCss = "", this._selectedRangeCss = "", this.#f = !1, this.#g = (e) => {
+		super(...e), this.#e = !1, this.start = "", this.end = "", this.min = 0, this.max = 10, this.step = 1, this.orientation = d.horizontal, this.ariaStartLabel = null, this.ariaEndLabel = null, this.markers = !1, this.pin = !1, this.valueTextFormatter = (e) => parseFloat(e).toLocaleString(this.locale.lang), this.proxy = document.createElement("input"), this._trackEl = null, this._startThumbEl = null, this._endThumbEl = null, this._draggingThumb = !1, this._visiblyFocusedThumb = null, this._hoveredThumb = null, this._startThumbCss = "", this._endThumbCss = "", this._selectedRangeCss = "", this.#f = !1, this.#g = (e) => {
 			this.#f || (this._visiblyFocusedThumb = this.#s(e)), this.#f = !1;
 		}, this.#_ = () => {
 			this._visiblyFocusedThumb = null;
@@ -38,12 +38,12 @@ var O = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-s
 			else {
 				if (e.shiftKey) return;
 				switch (e.key) {
+					case h:
 					case g:
-					case _:
 						e.preventDefault(), this.#n(t, k.Increment);
 						break;
-					case h:
 					case m:
+					case p:
 						e.preventDefault(), this.#n(t, k.Decrement);
 						break;
 				}
@@ -137,14 +137,14 @@ var O = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-s
 		return this.#o(e.target);
 	}
 	#c() {
-		let e = this.#l(this.startAsNumber), t = this.#l(this.endAsNumber), [n, r] = this.orientation === f.horizontal ? ["right", "width"] : ["bottom", "height"], i = `transition: ${this._draggingThumb ? "none" : "all 0.2s ease"};`;
+		let e = this.#l(this.startAsNumber), t = this.#l(this.endAsNumber), [n, r] = this.orientation === d.horizontal ? ["right", "width"] : ["bottom", "height"], i = `transition: ${this._draggingThumb ? "none" : "all 0.2s ease"};`;
 		this._startThumbCss = `${n}: ${e}%; ${i}`, this._endThumbCss = `${n}: ${t}%; ${i}`, this._selectedRangeCss = `${n}: ${t}%; ${r}: ${e - t}%; ${i}`;
 	}
 	#l(e) {
 		return (1 - D(this.min, this.max, e)) * 100;
 	}
 	#u(e) {
-		let t = this._trackEl.getBoundingClientRect(), [n, r, i] = this.orientation === f.horizontal ? [
+		let t = this._trackEl.getBoundingClientRect(), [n, r, i] = this.orientation === d.horizontal ? [
 			this._trackEl.clientLeft,
 			this._trackEl.clientWidth,
 			e.pageX - document.documentElement.scrollLeft - this.getBoundingClientRect().left
@@ -156,7 +156,7 @@ var O = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-s
 		return w(this.min, this.max, D(n, r, i));
 	}
 	#d(e, t) {
-		return v(this.#a[e].min, this.#a[e].max, E(t - this.min, this.step) + this.min);
+		return _(this.#a[e].min, this.#a[e].max, E(t - this.min, this.step) + this.min);
 	}
 	#f;
 	#p(e) {
@@ -210,24 +210,26 @@ u([t], A.prototype, "start", void 0), u([i({
 })], A.prototype, "initialEnd", void 0), u([i({ attribute: "current-end" })], A.prototype, "currentEnd", void 0), u([i({ converter: r })], A.prototype, "min", void 0), u([i({ converter: r })], A.prototype, "max", void 0), u([i({ converter: C })], A.prototype, "step", void 0), u([i], A.prototype, "orientation", void 0), u([i({ attribute: "aria-start-label" })], A.prototype, "ariaStartLabel", void 0), u([i({ attribute: "aria-end-label" })], A.prototype, "ariaEndLabel", void 0), u([i({ mode: "boolean" })], A.prototype, "markers", void 0), u([i], A.prototype, "connotation", void 0), u([i({ mode: "boolean" })], A.prototype, "pin", void 0), u([t], A.prototype, "valueTextFormatter", void 0), u([t], A.prototype, "_draggingThumb", void 0), u([t], A.prototype, "_visiblyFocusedThumb", void 0), u([t], A.prototype, "_hoveredThumb", void 0), u([t], A.prototype, "_startThumbCss", void 0), u([t], A.prototype, "_endThumbCss", void 0), u([t], A.prototype, "_selectedRangeCss", void 0);
 //#endregion
 //#region src/lib/range-slider/range-slider.template.ts
-var j = ({ disabled: e, connotation: t }) => p("control", ["disabled", e], [`connotation-${t}`, !!t]), M = (e) => ({ _visiblyFocusedThumb: t }) => p("thumb-container", ["focus-visible", t === e]);
+var j = (e) => ({ _visiblyFocusedThumb: t }) => f("thumb-container", ["focus-visible", t === e]);
 //#endregion
 //#region src/lib/range-slider/index.ts
 n(s("range-slider", A, (e) => {
-	let t = e.tagFor(b);
+	let t = e.tagFor(y);
 	return a` <template
 		@mousedown="${(e, t) => e._onMouseDown(t.event)}"
 	>
-		<div class="${j} ${(e) => e.orientation}">
+		<div
+			class="${(e) => f("control", ["disabled", e.disabled], [`connotation-${e.connotation}`, !!e.connotation])} ${(e) => e.orientation}"
+		>
 			<div class="positioning-region">
 				<div ${c("_trackEl")} class="track">
 					<div class="track-start" style="${(e) => e._selectedRangeCss}"></div>
-					${l((e) => e.markers, a`${(e) => T(e.orientation === f.horizontal, Math.floor((e.max - e.min) / e.step))}`)}
+					${l((e) => e.markers, a`${(e) => T(e.orientation === d.horizontal, Math.floor((e.max - e.min) / e.step))}`)}
 				</div>
 				<div
 					id="start-thumb"
 					${c("_startThumbEl")}
-					class="${M("start")}"
+					class="${j("start")}"
 					style="${(e) => e._startThumbCss}"
 					role="slider"
 					tabindex="${(e) => e.disabled ? null : 0}"
@@ -245,7 +247,7 @@ n(s("range-slider", A, (e) => {
 					alternate
 					:anchor="${(e) => e._startThumbEl}"
 					:open=${(e) => e._isThumbPopupOpen("start")}
-					:placementStrategy=${(e) => e.orientation === f.horizontal ? x.AutoPlacementHorizontal : x.AutoPlacementVertical}
+					:placementStrategy=${(e) => e.orientation === d.horizontal ? b.AutoPlacementHorizontal : b.AutoPlacementVertical}
 					animation-frame
 					exportparts="vvd-theme-alternate"
 					aria-hidden="true"
@@ -255,7 +257,7 @@ n(s("range-slider", A, (e) => {
 				<div
 					id="end-thumb"
 					${c("_endThumbEl")}
-					class="${M("end")}"
+					class="${j("end")}"
 					style="${(e) => e._endThumbCss}"
 					role="slider"
 					tabindex="${(e) => e.disabled ? null : 0}"
@@ -273,7 +275,7 @@ n(s("range-slider", A, (e) => {
 					alternate
 					:anchor="${(e) => e._endThumbEl}"
 					:open=${(e) => e._isThumbPopupOpen("end")}
-					:placementStrategy=${(e) => e.orientation === f.horizontal ? x.AutoPlacementHorizontal : x.AutoPlacementVertical}
+					:placementStrategy=${(e) => e.orientation === d.horizontal ? b.AutoPlacementHorizontal : b.AutoPlacementVertical}
 					animation-frame
 					exportparts="vvd-theme-alternate"
 					aria-hidden="true"
@@ -283,7 +285,7 @@ n(s("range-slider", A, (e) => {
 			</div>
 		</div>
 	</template>`;
-}, [S], {
+}, [x], {
 	styles: O,
 	shadowOptions: { delegatesFocus: !0 }
 }))();

package/rich-text-editor/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition60.cjs");
+const require_definition = require("../unbundled/definition61.cjs");
 exports.RteAlignmentFeature = require_definition.RteAlignmentFeature;
 exports.RteAtomFeature = require_definition.RteAtomFeature;
 exports.RteBase = require_definition.RteBase;

package/rich-text-editor/definition.js

@@ -1,2 +1,2 @@
-import { A as RichTextEditor, C as RtePlaceholderFeature, D as RteConfig, E as RteBase, O as RteHtmlSerializer, S as RteHardBreakFeature, T as RteTextBlockPickerFeature, _ as RteStrikethroughFeature, a as RteKeyboardShortcutsFeature, b as RteBoldFeature, c as RteToolbarButtonFeature, d as RteInlineImageFeature, f as RteLinkFeature, g as RteMonospaceFeature, h as RteTextColorPickerFeature, i as RteSuggestFeature, k as RteHtmlParser, l as RteDropHandlerFeature, m as RteListFeature, n as richTextEditorDefinition, o as RteInputRuleFeature, p as RteAlignmentFeature, r as RteCharacterCountFeature, s as RteAtomFeature, t as registerRichTextEditor, u as RteFileHandlerFeature, v as RteUnderlineFeature, w as RteToolbarFeature, x as RteFontSizePickerFeature, y as RteItalicFeature } from "../unbundled/definition60.js";
+import { A as RichTextEditor, C as RtePlaceholderFeature, D as RteConfig, E as RteBase, O as RteHtmlSerializer, S as RteHardBreakFeature, T as RteTextBlockPickerFeature, _ as RteStrikethroughFeature, a as RteKeyboardShortcutsFeature, b as RteBoldFeature, c as RteToolbarButtonFeature, d as RteInlineImageFeature, f as RteLinkFeature, g as RteMonospaceFeature, h as RteTextColorPickerFeature, i as RteSuggestFeature, k as RteHtmlParser, l as RteDropHandlerFeature, m as RteListFeature, n as richTextEditorDefinition, o as RteInputRuleFeature, p as RteAlignmentFeature, r as RteCharacterCountFeature, s as RteAtomFeature, t as registerRichTextEditor, u as RteFileHandlerFeature, v as RteUnderlineFeature, w as RteToolbarFeature, x as RteFontSizePickerFeature, y as RteItalicFeature } from "../unbundled/definition61.js";
 export { RteAlignmentFeature, RteAtomFeature, RteBase, RteBoldFeature, RteCharacterCountFeature, RteConfig, RteDropHandlerFeature, RteFileHandlerFeature, RteFontSizePickerFeature, RteHardBreakFeature, RteHtmlParser, RteHtmlSerializer, RteInlineImageFeature, RteInputRuleFeature, RteItalicFeature, RteKeyboardShortcutsFeature, RteLinkFeature, RteListFeature, RteMonospaceFeature, RtePlaceholderFeature, RteStrikethroughFeature, RteSuggestFeature, RteTextBlockPickerFeature, RteTextColorPickerFeature, RteToolbarButtonFeature, RteToolbarFeature, RteUnderlineFeature, RichTextEditor as VwcRichTextEditorElement, registerRichTextEditor, richTextEditorDefinition };