@vonage/vivid 5.2.0 → 5.3.0

package/bundled/localized.js

@@ -1,5 +1,5 @@
 import { o as J } from "./vivid-element.js";
-const s = "Play", l = "Pause", c = "Replay", d = "Duration", u = "LIVE", p = "Loaded", b = "Progress", g = "Fullscreen", m = "Mute", h = "Unmute", y = "Subtitles", f = "Captions", L = "Chapters", S = "Descriptions", P = "Close", T = "Text", w = "White", v = "Black", k = "Red", C = "Green", M = "Blue", D = "Yellow", B = "Magenta", E = "Cyan", x = "Background", F = "Window", $ = "Transparent", A = "Opaque", R = "None", O = "Raised", I = "Depressed", Y = "Uniform", N = "Casual", W = "Script", U = "Reset", z = "Done", V = "Color", G = "Opacity", H = {
+const s = "Play", l = "Pause", c = "Replay", d = "Duration", u = "LIVE", p = "Loaded", b = "Progress", g = "Fullscreen", m = "Mute", h = "Unmute", y = "Subtitles", L = "Captions", f = "Chapters", S = "Descriptions", P = "Close", T = "Text", k = "White", w = "Black", C = "Red", v = "Green", M = "Blue", D = "Yellow", B = "Magenta", E = "Cyan", x = "Background", F = "Window", $ = "Transparent", A = "Opaque", O = "None", R = "Raised", I = "Depressed", Y = "Uniform", N = "Casual", W = "Script", U = "Reset", z = "Done", V = "Color", G = "Opacity", H = {
   "Audio Player": "Audio Player",
   "Video Player": "Video Player",
   Play: s,
@@ -23,9 +23,9 @@ const s = "Play", l = "Pause", c = "Replay", d = "Duration", u = "LIVE", p = "Lo
   "Playback Rate": "Playback Rate",
   Subtitles: y,
   "subtitles off": "subtitles off",
-  Captions: f,
+  Captions: L,
   "captions off": "captions off",
-  Chapters: L,
+  Chapters: f,
   Descriptions: S,
   "descriptions off": "descriptions off",
   "Audio Track": "Audio Track",
@@ -50,10 +50,10 @@ const s = "Play", l = "Pause", c = "Replay", d = "Duration", u = "LIVE", p = "Lo
   "subtitles settings": "subtitles settings",
   "descriptions settings": "descriptions settings",
   Text: T,
-  White: w,
-  Black: v,
-  Red: k,
-  Green: C,
+  White: k,
+  Black: w,
+  Red: C,
+  Green: v,
   Blue: M,
   Yellow: D,
   Magenta: B,
@@ -65,8 +65,8 @@ const s = "Play", l = "Pause", c = "Replay", d = "Duration", u = "LIVE", p = "Lo
   Opaque: A,
   "Font Size": "Font Size",
   "Text Edge Style": "Text Edge Style",
-  None: R,
-  Raised: O,
+  None: O,
+  Raised: R,
   Depressed: I,
   Uniform: Y,
   "Drop shadow": "Drop shadow",
@@ -98,11 +98,11 @@ const s = "Play", l = "Pause", c = "Replay", d = "Duration", u = "LIVE", p = "Lo
 }, j = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Background: x,
-  Black: v,
+  Black: w,
   Blue: M,
-  Captions: f,
+  Captions: L,
   Casual: N,
-  Chapters: L,
+  Chapters: f,
   Close: P,
   Color: V,
   Cyan: E,
@@ -111,19 +111,19 @@ const s = "Play", l = "Pause", c = "Replay", d = "Duration", u = "LIVE", p = "Lo
   Done: z,
   Duration: d,
   Fullscreen: g,
-  Green: C,
+  Green: v,
   LIVE: u,
   Loaded: p,
   Magenta: B,
   Mute: m,
-  None: R,
+  None: O,
   Opacity: G,
   Opaque: A,
   Pause: l,
   Play: s,
   Progress: b,
-  Raised: O,
-  Red: k,
+  Raised: R,
+  Red: C,
   Replay: c,
   Reset: U,
   Script: W,
@@ -132,7 +132,7 @@ const s = "Play", l = "Pause", c = "Replay", d = "Duration", u = "LIVE", p = "Lo
   Transparent: $,
   Uniform: Y,
   Unmute: h,
-  White: w,
+  White: k,
   Window: F,
   Yellow: D,
   default: H
@@ -351,11 +351,11 @@ const s = "Play", l = "Pause", c = "Replay", d = "Duration", u = "LIVE", p = "Lo
     ),
     optionFocusedMessage: (
       /* istanbul ignore next */
-      (e, t, a, n) => `Option ${e} focused, ${n ? "selected, " : ""}${t} of ${a}.`
+      (e, o, a, r) => `Option ${e} focused, ${r ? "selected, " : ""}${o} of ${a}.`
     ),
     maxSelectedMessage: (
       /* istanbul ignore next */
-      (e, t) => `${e} of ${t} selected.`
+      (e, o) => `${e} of ${o} selected.`
     )
   },
   richTextEditor: {
@@ -420,21 +420,32 @@ const s = "Play", l = "Pause", c = "Replay", d = "Duration", u = "LIVE", p = "Lo
       (e) => e ? `Show more information about ${e}` : "Show more information"
     )
   },
-  simpleColorPicker: {
-    colorPaletteLabel: "Color palette",
+  baseColorPicker: {
     colorSwatchLabel: (
       /* istanbul ignore next */
-      (e, t, a) => {
-        let n = t ? `Select ${t}, hex: ${e}` : `Select ${e}`;
-        return a && (n += ", selected."), n;
+      (e, o, a) => {
+        let r = o ? `Select ${o}, hex: ${e}` : `Select ${e}`;
+        return a && (r += ", selected."), r;
       }
     )
+  },
+  simpleColorPicker: {
+    colorPaletteLabel: "Color palette"
+  },
+  colorPicker: {
+    popupLabel: "Color Picker",
+    swatchesLabel: "Saved colors:",
+    pickerButtonLabel: "Open Color Picker",
+    saveButtonLabel: "Save current color",
+    closeButtonLabel: "Close Color Picker",
+    copyButtonLabel: "Copy Color to Clipboard",
+    copyErrorText: "Copy failed. Clipboard access was blocked. Try again."
   }
 };
-var K = Object.defineProperty, Z = (e, t, a, n) => {
-  for (var o = void 0, i = e.length - 1, r; i >= 0; i--)
-    (r = e[i]) && (o = r(t, a, o) || o);
-  return o && K(t, a, o), o;
+var K = Object.defineProperty, Z = (e, o, a, r) => {
+  for (var t = void 0, i = e.length - 1, n; i >= 0; i--)
+    (n = e[i]) && (t = n(o, a, t) || t);
+  return t && K(o, a, t), t;
 };
 class _ {
   constructor() {
@@ -445,7 +456,7 @@ Z([
   J
 ], _.prototype, "locale");
 const Q = new _(), ee = (e) => {
-  class t extends e {
+  class o extends e {
     /**
      * @internal
      */
@@ -453,7 +464,7 @@ const Q = new _(), ee = (e) => {
       return Q.locale;
     }
   }
-  return t;
+  return o;
 };
 export {
   ee as L

package/bundled/mixins.cjs

@@ -1,33 +1,33 @@
-"use strict";const a=require("./vivid-element.cjs"),y=require("./definition2.cjs"),T=require("./definition12.cjs"),_=require("./class-names.cjs"),m=require("./when.cjs"),$=require("./localized.cjs"),x=require("./slotted.cjs"),F=":host{display:contents}.message{display:flex;contain:inline-size;font:var(--vvd-typography-base-condensed);gap:4px;grid-column:1/-1}.message.none-message{display:none}.message.helper-message{color:var(--_low-ink-color)}.message.error-message,.message.success-message{color:var(--vvd-color-canvas-text)}slot{display:inline}.icon{font-size:16px}.error-message .icon{color:var(--vvd-color-alert-500)}.success-message .icon{color:var(--vvd-color-success-500)}.announcement{display:contents}";var I=Object.defineProperty,D=(e,t,s,o)=>{for(var n=void 0,i=e.length-1,c;i>=0;i--)(c=e[i])&&(n=c(t,s,n)||n);return n&&I(t,s,n),n};class d extends $.Localized(a.VividElement){constructor(){super(...arguments),this.type="none"}}D([a.attr],d.prototype,"type");function g(e,t,s){const o=e.tagFor(y.Icon);return a.html`<${o} class="icon" name="${t}" label="${n=>n.locale.feedbackMessage[s]}"></${o}>`}function w(e){const t={none:"",helper:"",error:g(e,"info-line","errorIconText"),success:g(e,"check-circle-line","successIconText")};return a.html`${s=>t[s.type]}`}const b=e=>e==="error",C=e=>{const t=a.html`<div
-		class="${s=>_.classNames("message",`${s.type}-message`)}"
+"use strict";const _=require("./normalize.cjs"),a=require("./vivid-element.cjs"),y=require("./definition2.cjs"),$=require("./definition13.cjs"),m=require("./when.cjs"),F=require("./class-names.cjs"),I=require("./localized.cjs"),f=require("./slotted.cjs"),D=":host{display:contents}.message{display:flex;contain:inline-size;font:var(--vvd-typography-base-condensed);gap:4px;grid-column:1/-1}.message.none-message{display:none}.message.helper-message{color:var(--_low-ink-color)}.message.error-message,.message.success-message{color:var(--vvd-color-canvas-text)}slot{display:inline}.icon{font-size:16px}.error-message .icon{color:var(--vvd-color-alert-500)}.success-message .icon{color:var(--vvd-color-success-500)}.announcement{display:contents}";var w=Object.defineProperty,C=(t,e,i,s)=>{for(var n=void 0,r=t.length-1,c;r>=0;r--)(c=t[r])&&(n=c(e,i,n)||n);return n&&w(e,i,n),n};class l extends I.Localized(a.VividElement){constructor(){super(...arguments),this.type="none"}}C([a.attr],l.prototype,"type");function g(t,e,i){const s=t.tagFor(y.Icon);return a.html`<${s} class="icon" name="${e}" label="${n=>n.locale.feedbackMessage[i]}"></${s}>`}function B(t){const e={none:"",helper:"",error:g(t,"info-line","errorIconText"),success:g(t,"check-circle-line","successIconText")};return a.html`${i=>e[i.type]}`}const b=t=>t==="error",M=t=>{const e=a.html`<div
+		class="${i=>F.classNames("message",`${i.type}-message`)}"
 	>
-		${w(e)}<slot></slot>
-	</div>`;return a.html`${m.when(s=>!b(s.type),t)}
+		${B(t)}<slot></slot>
+	</div>`;return a.html`${m.when(i=>!b(i.type),e)}
 		<span class="announcement" role="status" aria-live="polite">
-			${m.when(s=>b(s.type),t)}
-		</span>`},S=a.defineVividComponent("feedback-message",d,C,[y.iconDefinition,T.visuallyHiddenDefinition],{styles:F});class M{constructor(t,s){this.source=null,this.templateBindingObserver=a.Observable.binding(t,this,s)}bind(t,s){this.source=t,this.context=s,this.insertionPoint||(this.insertionPoint=document.createComment(""),t.appendChild(this.insertionPoint)),this.handleChange()}unbind(){this.source=null,this.view.unbind(),this.templateBindingObserver.disconnect()}handleChange(){this.instantiateTemplate(this.templateBindingObserver.observe(this.source,this.context))}instantiateTemplate(t){this.view&&this.view.dispose(),this.view=t.create(),this.view.bind(this.source,this.context),this.view.insertBefore(this.insertionPoint)}}class B extends a.HTMLDirective{constructor(t){super(),this.templateBinding=t,this.createPlaceholder=a.DOM.createBlockPlaceholder,this.isTemplateBindingVolatile=a.Observable.isVolatileBinding(t)}createBehavior(){return new M(this.templateBinding,this.isTemplateBindingVolatile)}}function f(e){const t=typeof e=="function"?e:()=>e;return new B(t)}const r=[];for(let e=0;e<256;++e)r.push((e+256).toString(16).slice(1));function H(e,t=0){return(r[e[t+0]]+r[e[t+1]]+r[e[t+2]]+r[e[t+3]]+"-"+r[e[t+4]]+r[e[t+5]]+"-"+r[e[t+6]]+r[e[t+7]]+"-"+r[e[t+8]]+r[e[t+9]]+"-"+r[e[t+10]]+r[e[t+11]]+r[e[t+12]]+r[e[t+13]]+r[e[t+14]]+r[e[t+15]]).toLowerCase()}let h;const O=new Uint8Array(16);function U(){if(!h){if(typeof crypto>"u"||!crypto.getRandomValues)throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");h=crypto.getRandomValues.bind(crypto)}return h(O)}const L=typeof crypto<"u"&&crypto.randomUUID&&crypto.randomUUID.bind(crypto),v={randomUUID:L};function P(e,t,s){if(v.randomUUID&&!e)return v.randomUUID();e=e||{};const o=e.random??e.rng?.()??U();if(o.length<16)throw new Error("Random bytes length must be >= 16");return o[6]=o[6]&15|64,o[8]=o[8]&63|128,H(o)}const p=()=>P();var V=Object.defineProperty,u=(e,t,s,o)=>{for(var n=void 0,i=e.length-1,c;i>=0;i--)(c=e[i])&&(n=c(t,s,n)||n);return n&&V(t,s,n),n};const k=e=>{class t extends e{get _feedbackDescribedBy(){return"feedback slotted-helper-text-feedback"}_internalFeedback(){const o=this._helperTextSlottedContent?.length?"":this.helperText,n=this.errorValidationMessage,i=this.successText;return i?{type:"success",message:i}:n?{type:"error",message:n}:o?{type:"helper",message:o}:{type:"none",message:""}}_slottedHelperTextFeedbackType(){return this._internalFeedback().type==="none"&&this._helperTextSlottedContent?.length?"helper":"none"}_getFeedbackTemplate(o){const n=o.tagFor(d);return a.html`
-				<${n} id="feedback" :type="${i=>i._internalFeedback().type}">
-					${i=>i._internalFeedback().message}
+			${m.when(i=>b(i.type),e)}
+		</span>`},S=a.defineVividComponent("feedback-message",l,M,[y.iconDefinition,$.visuallyHiddenDefinition],{styles:D});class H{constructor(e){this.source=null,this.templateBindingObserver=e.templateBinding.createObserver(this,e)}bind(e){this.source=e.source,this.context=e.context,this.controller=e,this.insertionPoint||(this.insertionPoint=document.createComment(""),this.source.appendChild(this.insertionPoint)),this.templateBindingObserver.bind(e),this.handleChange(this.source,this.templateBindingObserver)}handleChange(e,i){if(i===this.templateBindingObserver){const s=this.templateBindingObserver.bind(this.controller);this.instantiateTemplate(s)}}instantiateTemplate(e){this.view&&this.view.dispose(),this.view=e.create(),this.view.bind(this.source,this.context),this.view.insertBefore(this.insertionPoint)}}class x{constructor(e){this.targetNodeId="",this.templateBinding=e,this.dataBinding=e}createHTML(e){return a.Markup.comment(e(this))}createBehavior(){return new H(this)}}a.HTMLDirective.define(x);function k(t){const e=_.normalizeBinding(t);return new x(e)}const o=[];for(let t=0;t<256;++t)o.push((t+256).toString(16).slice(1));function O(t,e=0){return(o[t[e+0]]+o[t[e+1]]+o[t[e+2]]+o[t[e+3]]+"-"+o[t[e+4]]+o[t[e+5]]+"-"+o[t[e+6]]+o[t[e+7]]+"-"+o[t[e+8]]+o[t[e+9]]+"-"+o[t[e+10]]+o[t[e+11]]+o[t[e+12]]+o[t[e+13]]+o[t[e+14]]+o[t[e+15]]).toLowerCase()}let h;const L=new Uint8Array(16);function U(){if(!h){if(typeof crypto>"u"||!crypto.getRandomValues)throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");h=crypto.getRandomValues.bind(crypto)}return h(L)}const R=typeof crypto<"u"&&crypto.randomUUID&&crypto.randomUUID.bind(crypto),v={randomUUID:R};function q(t,e,i){if(v.randomUUID&&!t)return v.randomUUID();t=t||{};const s=t.random??t.rng?.()??U();if(s.length<16)throw new Error("Random bytes length must be >= 16");return s[6]=s[6]&15|64,s[8]=s[8]&63|128,O(s)}const p=()=>q();var P=Object.defineProperty,u=(t,e,i,s)=>{for(var n=void 0,r=t.length-1,c;r>=0;r--)(c=t[r])&&(n=c(e,i,n)||n);return n&&P(e,i,n),n};const T=t=>{class e extends t{get _feedbackDescribedBy(){return"feedback slotted-helper-text-feedback"}_internalFeedback(){const s=this._helperTextSlottedContent?.length?"":this.helperText,n=this.errorValidationMessage,r=this.successText;return r?{type:"success",message:r}:n?{type:"error",message:n}:s?{type:"helper",message:s}:{type:"none",message:""}}_slottedHelperTextFeedbackType(){return this._internalFeedback().type==="none"&&this._helperTextSlottedContent?.length?"helper":"none"}_getFeedbackTemplate(s){const n=s.tagFor(l);return a.html`
+				<${n} id="feedback" :type="${r=>r._internalFeedback().type}">
+					${r=>r._internalFeedback().message}
 				</${n}>
 				<${n}
 					id="slotted-helper-text-feedback"
-					:type="${i=>i._slottedHelperTextFeedbackType()}"
+					:type="${r=>r._slottedHelperTextFeedbackType()}"
 				>
-					<slot name="helper-text" ${x.slotted("_helperTextSlottedContent")}></slot>
+					<slot name="helper-text" ${f.slotted("_helperTextSlottedContent")}></slot>
 				</${n}>
-			`}}return u([a.attr({attribute:"helper-text"})],t.prototype,"helperText"),u([a.observable],t.prototype,"_helperTextSlottedContent"),t},R=e=>{const t=()=>`vvd-feedback-${p()}`,s=()=>`vvd-slotted-feedback-${p()}`;class o extends k(e){constructor(){super(...arguments),this._slottedHelperTextIds=[],this._feedbackId=t()}_helperTextSlottedContentChanged(i,c){for(const l of c)l.id||(l.id=s());this._slottedHelperTextIds=c.map(l=>l.id)}get _feedbackDescribedBy(){return[this._feedbackId,...this._slottedHelperTextIds].join(" ")}_getFeedbackTemplate(i){const c=i.tagFor(d);return a.html`
+			`}}return u([a.attr({attribute:"helper-text"})],e.prototype,"helperText"),u([a.observable],e.prototype,"_helperTextSlottedContent"),e},V=t=>{const e=()=>`vvd-feedback-${p()}`,i=()=>`vvd-slotted-feedback-${p()}`;class s extends T(t){constructor(){super(...arguments),this._slottedHelperTextIds=[],this._feedbackId=e()}_helperTextSlottedContentChanged(r,c){for(const d of c)d.id||(d.id=i());this._slottedHelperTextIds=c.map(d=>d.id)}get _feedbackDescribedBy(){return[this._feedbackId,...this._slottedHelperTextIds].join(" ")}_getFeedbackTemplate(r){const c=r.tagFor(l);return a.html`
 				<slot name="_feedback"></slot>
-				${f(a.html`<${c}
+				${k(a.html`<${c}
 					slot="_feedback"
-					id="${l=>l._feedbackId}"
-					:type="${l=>l._internalFeedback().type}"
+					id="${d=>d._feedbackId}"
+					:type="${d=>d._internalFeedback().type}"
 				>
-					${l=>l._internalFeedback().message}
+					${d=>d._internalFeedback().message}
 				</${c}>`)}
-				<${c} :type="${l=>l._slottedHelperTextFeedbackType()}">
+				<${c} :type="${d=>d._slottedHelperTextFeedbackType()}">
 					<slot
 						name="helper-text"
-						${x.slotted("_helperTextSlottedContent")}
+						${f.slotted("_helperTextSlottedContent")}
 					></slot>
 				</${c}>
-			`}}return u([a.observable],o.prototype,"_slottedHelperTextIds"),o};exports.WithFeedback=k;exports.WithLightDOMFeedback=R;exports.feedbackMessageDefinition=S;exports.generateRandomId=p;exports.renderInLightDOM=f;
+			`}}return u([a.observable],s.prototype,"_slottedHelperTextIds"),s};exports.WithFeedback=T;exports.WithLightDOMFeedback=V;exports.feedbackMessageDefinition=S;exports.generateRandomId=p;exports.renderInLightDOM=k;

package/bundled/mixins.js

@@ -1,102 +1,108 @@
-import { d as k, h as d, V as _, a as y, H as $, D as F, O as f, o as x } from "./vivid-element.js";
-import { i as I, I as D } from "./definition2.js";
-import { v as w } from "./definition12.js";
-import { c as C } from "./class-names.js";
-import { w as u } from "./when.js";
-import { L as S } from "./localized.js";
-import { s as T } from "./slotted.js";
-const H = ":host{display:contents}.message{display:flex;contain:inline-size;font:var(--vvd-typography-base-condensed);gap:4px;grid-column:1/-1}.message.none-message{display:none}.message.helper-message{color:var(--_low-ink-color)}.message.error-message,.message.success-message{color:var(--vvd-color-canvas-text)}slot{display:inline}.icon{font-size:16px}.error-message .icon{color:var(--vvd-color-alert-500)}.success-message .icon{color:var(--vvd-color-success-500)}.announcement{display:contents}";
-var B = Object.defineProperty, U = (e, t, s, o) => {
-  for (var n = void 0, r = e.length - 1, a; r >= 0; r--)
-    (a = e[r]) && (n = a(t, s, n) || n);
-  return n && B(t, s, n), n;
+import { n as k } from "./normalize.js";
+import { d as _, h as d, V as $, a as y, M as F, H as I, o as f } from "./vivid-element.js";
+import { i as w, I as D } from "./definition2.js";
+import { v as C } from "./definition13.js";
+import { w as m } from "./when.js";
+import { c as B } from "./class-names.js";
+import { L as H } from "./localized.js";
+import { s as x } from "./slotted.js";
+const S = ":host{display:contents}.message{display:flex;contain:inline-size;font:var(--vvd-typography-base-condensed);gap:4px;grid-column:1/-1}.message.none-message{display:none}.message.helper-message{color:var(--_low-ink-color)}.message.error-message,.message.success-message{color:var(--vvd-color-canvas-text)}slot{display:inline}.icon{font-size:16px}.error-message .icon{color:var(--vvd-color-alert-500)}.success-message .icon{color:var(--vvd-color-success-500)}.announcement{display:contents}";
+var M = Object.defineProperty, O = (t, e, o, s) => {
+  for (var n = void 0, r = t.length - 1, a; r >= 0; r--)
+    (a = t[r]) && (n = a(e, o, n) || n);
+  return n && M(e, o, n), n;
 };
-class l extends S(_) {
+class l extends H($) {
   constructor() {
     super(...arguments), this.type = "none";
   }
 }
-U([
+O([
   y
 ], l.prototype, "type");
-function m(e, t, s) {
-  const o = e.tagFor(D);
-  return d`<${o} class="icon" name="${t}" label="${(n) => n.locale.feedbackMessage[s]}"></${o}>`;
+function u(t, e, o) {
+  const s = t.tagFor(D);
+  return d`<${s} class="icon" name="${e}" label="${(n) => n.locale.feedbackMessage[o]}"></${s}>`;
 }
-function V(e) {
-  const t = {
+function U(t) {
+  const e = {
     none: "",
     helper: "",
-    error: m(e, "info-line", "errorIconText"),
-    success: m(e, "check-circle-line", "successIconText")
+    error: u(t, "info-line", "errorIconText"),
+    success: u(t, "check-circle-line", "successIconText")
   };
-  return d`${(s) => t[s.type]}`;
+  return d`${(o) => e[o.type]}`;
 }
-const g = (e) => e === "error", M = (e) => {
-  const t = d`<div
-		class="${(s) => C("message", `${s.type}-message`)}"
+const g = (t) => t === "error", L = (t) => {
+  const e = d`<div
+		class="${(o) => B("message", `${o.type}-message`)}"
 	>
-		${V(e)}<slot></slot>
+		${U(t)}<slot></slot>
 	</div>`;
-  return d`${u((s) => !g(s.type), t)}
+  return d`${m((o) => !g(o.type), e)}
 		<span class="announcement" role="status" aria-live="polite">
-			${u((s) => g(s.type), t)}
+			${m((o) => g(o.type), e)}
 		</span>`;
-}, Z = k(
+}, ee = _(
   "feedback-message",
   l,
-  M,
-  [I, w],
+  L,
+  [w, C],
   {
-    styles: H
+    styles: S
   }
 );
 class P {
-  constructor(t, s) {
-    this.source = null, this.templateBindingObserver = f.binding(
-      t,
+  constructor(e) {
+    this.source = null, this.templateBindingObserver = e.templateBinding.createObserver(
       this,
-      s
+      e
     );
   }
-  bind(t, s) {
-    this.source = t, this.context = s, this.insertionPoint || (this.insertionPoint = document.createComment(""), t.appendChild(this.insertionPoint)), this.handleChange();
-  }
-  unbind() {
-    this.source = null, this.view.unbind(), this.templateBindingObserver.disconnect();
+  bind(e) {
+    this.source = e.source, this.context = e.context, this.controller = e, this.insertionPoint || (this.insertionPoint = document.createComment(""), this.source.appendChild(this.insertionPoint)), this.templateBindingObserver.bind(e), this.handleChange(this.source, this.templateBindingObserver);
   }
+  // unbind(): void {
+  // 	this.source = null;
+  // 	if (this.view) {
+  // 		this.view.unbind();
+  // 	}
+  // 	// The observer will be automatically cleaned up when the behavior is destroyed
+  // }
   /**
    * Handles change of the template itself.
    */
-  handleChange() {
-    this.instantiateTemplate(
-      this.templateBindingObserver.observe(this.source, this.context)
-    );
+  handleChange(e, o) {
+    if (o === this.templateBindingObserver) {
+      const s = this.templateBindingObserver.bind(this.controller);
+      this.instantiateTemplate(s);
+    }
   }
-  instantiateTemplate(t) {
-    this.view && this.view.dispose(), this.view = t.create(), this.view.bind(this.source, this.context), this.view.insertBefore(this.insertionPoint);
+  instantiateTemplate(e) {
+    this.view && this.view.dispose(), this.view = e.create(), this.view.bind(this.source, this.context), this.view.insertBefore(this.insertionPoint);
   }
 }
-class L extends $ {
-  constructor(t) {
-    super(), this.templateBinding = t, this.createPlaceholder = F.createBlockPlaceholder, this.isTemplateBindingVolatile = f.isVolatileBinding(t);
+class T {
+  constructor(e) {
+    this.targetNodeId = "", this.templateBinding = e, this.dataBinding = e;
+  }
+  createHTML(e) {
+    return F.comment(e(this));
   }
   createBehavior() {
-    return new P(
-      this.templateBinding,
-      this.isTemplateBindingVolatile
-    );
+    return new P(this);
   }
 }
-function O(e) {
-  const t = typeof e == "function" ? e : () => e;
-  return new L(t);
+I.define(T);
+function R(t) {
+  const e = k(t);
+  return new T(e);
 }
 const i = [];
-for (let e = 0; e < 256; ++e)
-  i.push((e + 256).toString(16).slice(1));
-function R(e, t = 0) {
-  return (i[e[t + 0]] + i[e[t + 1]] + i[e[t + 2]] + i[e[t + 3]] + "-" + i[e[t + 4]] + i[e[t + 5]] + "-" + i[e[t + 6]] + i[e[t + 7]] + "-" + i[e[t + 8]] + i[e[t + 9]] + "-" + i[e[t + 10]] + i[e[t + 11]] + i[e[t + 12]] + i[e[t + 13]] + i[e[t + 14]] + i[e[t + 15]]).toLowerCase();
+for (let t = 0; t < 256; ++t)
+  i.push((t + 256).toString(16).slice(1));
+function V(t, e = 0) {
+  return (i[t[e + 0]] + i[t[e + 1]] + i[t[e + 2]] + i[t[e + 3]] + "-" + i[t[e + 4]] + i[t[e + 5]] + "-" + i[t[e + 6]] + i[t[e + 7]] + "-" + i[t[e + 8]] + i[t[e + 9]] + "-" + i[t[e + 10]] + i[t[e + 11]] + i[t[e + 12]] + i[t[e + 13]] + i[t[e + 14]] + i[t[e + 15]]).toLowerCase();
 }
 let p;
 const E = new Uint8Array(16);
@@ -109,23 +115,23 @@ function W() {
   return p(E);
 }
 const j = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), b = { randomUUID: j };
-function z(e, t, s) {
-  if (b.randomUUID && !e)
+function z(t, e, o) {
+  if (b.randomUUID && !t)
     return b.randomUUID();
-  e = e || {};
-  const o = e.random ?? e.rng?.() ?? W();
-  if (o.length < 16)
+  t = t || {};
+  const s = t.random ?? t.rng?.() ?? W();
+  if (s.length < 16)
     throw new Error("Random bytes length must be >= 16");
-  return o[6] = o[6] & 15 | 64, o[8] = o[8] & 63 | 128, R(o);
+  return s[6] = s[6] & 15 | 64, s[8] = s[8] & 63 | 128, V(s);
 }
 const v = () => z();
-var A = Object.defineProperty, h = (e, t, s, o) => {
-  for (var n = void 0, r = e.length - 1, a; r >= 0; r--)
-    (a = e[r]) && (n = a(t, s, n) || n);
-  return n && A(t, s, n), n;
+var A = Object.defineProperty, h = (t, e, o, s) => {
+  for (var n = void 0, r = t.length - 1, a; r >= 0; r--)
+    (a = t[r]) && (n = a(e, o, n) || n);
+  return n && A(e, o, n), n;
 };
-const N = (e) => {
-  class t extends e {
+const N = (t) => {
+  class e extends t {
     /**
      * Ids of the feedback content that the control should use for aria-describedby.
      *
@@ -138,8 +144,8 @@ const N = (e) => {
      * @internal
      */
     _internalFeedback() {
-      const o = this._helperTextSlottedContent?.length ? "" : this.helperText, n = this.errorValidationMessage, r = this.successText;
-      return r ? { type: "success", message: r } : n ? { type: "error", message: n } : o ? { type: "helper", message: o } : { type: "none", message: "" };
+      const s = this._helperTextSlottedContent?.length ? "" : this.helperText, n = this.errorValidationMessage, r = this.successText;
+      return r ? { type: "success", message: r } : n ? { type: "error", message: n } : s ? { type: "helper", message: s } : { type: "none", message: "" };
     }
     /**
      * @internal
@@ -150,8 +156,8 @@ const N = (e) => {
     /**
      * @internal
      */
-    _getFeedbackTemplate(o) {
-      const n = o.tagFor(l);
+    _getFeedbackTemplate(s) {
+      const n = s.tagFor(l);
       return d`
 				<${n} id="feedback" :type="${(r) => r._internalFeedback().type}">
 					${(r) => r._internalFeedback().message}
@@ -160,28 +166,28 @@ const N = (e) => {
 					id="slotted-helper-text-feedback"
 					:type="${(r) => r._slottedHelperTextFeedbackType()}"
 				>
-					<slot name="helper-text" ${T("_helperTextSlottedContent")}></slot>
+					<slot name="helper-text" ${x("_helperTextSlottedContent")}></slot>
 				</${n}>
 			`;
     }
   }
   return h([
     y({ attribute: "helper-text" })
-  ], t.prototype, "helperText"), h([
-    x
-  ], t.prototype, "_helperTextSlottedContent"), t;
-}, ee = (e) => {
-  const t = () => `vvd-feedback-${v()}`, s = () => `vvd-slotted-feedback-${v()}`;
-  class o extends N(e) {
+  ], e.prototype, "helperText"), h([
+    f
+  ], e.prototype, "_helperTextSlottedContent"), e;
+}, te = (t) => {
+  const e = () => `vvd-feedback-${v()}`, o = () => `vvd-slotted-feedback-${v()}`;
+  class s extends N(t) {
     constructor() {
-      super(...arguments), this._slottedHelperTextIds = [], this._feedbackId = t();
+      super(...arguments), this._slottedHelperTextIds = [], this._feedbackId = e();
     }
     /**
      * @internal
      */
     _helperTextSlottedContentChanged(r, a) {
       for (const c of a)
-        c.id || (c.id = s());
+        c.id || (c.id = o());
       this._slottedHelperTextIds = a.map((c) => c.id);
     }
     /**
@@ -197,7 +203,7 @@ const N = (e) => {
       const a = r.tagFor(l);
       return d`
 				<slot name="_feedback"></slot>
-				${O(d`<${a}
+				${R(d`<${a}
 					slot="_feedback"
 					id="${(c) => c._feedbackId}"
 					:type="${(c) => c._internalFeedback().type}"
@@ -207,20 +213,20 @@ const N = (e) => {
 				<${a} :type="${(c) => c._slottedHelperTextFeedbackType()}">
 					<slot
 						name="helper-text"
-						${T("_helperTextSlottedContent")}
+						${x("_helperTextSlottedContent")}
 					></slot>
 				</${a}>
 			`;
     }
   }
   return h([
-    x
-  ], o.prototype, "_slottedHelperTextIds"), o;
+    f
+  ], s.prototype, "_slottedHelperTextIds"), s;
 };
 export {
   N as W,
-  ee as a,
-  Z as f,
+  te as a,
+  ee as f,
   v as g,
-  O as r
+  R as r
 };

package/bundled/normalize.cjs

@@ -0,0 +1 @@
+"use strict";const i=require("./vivid-element.cjs");function e(n){return i.isFunction(n)?i.oneWay(n):n instanceof i.Binding?n:i.oneTime(()=>n)}exports.normalizeBinding=e;

package/bundled/normalize.js

@@ -0,0 +1,7 @@
+import { g as i, u as o, f as s, B as r } from "./vivid-element.js";
+function a(n) {
+  return s(n) ? i(n) : n instanceof r ? n : o(() => n);
+}
+export {
+  a as n
+};

package/bundled/picker-field.template.cjs

@@ -1,4 +1,4 @@
-"use strict";const _=require("./index.cjs"),v=require("./mixins.cjs"),g=require("./form-associated.cjs"),r=require("./vivid-element.cjs"),$=require("./with-contextual-help.cjs"),x=require("./with-error-text.cjs"),m=require("./form-element.cjs"),k=require("./localized.cjs"),F=require("./definition9.cjs"),E=require("./definition13.cjs"),y=require("./definition3.cjs"),p=require("./ref.cjs"),h=require("./slotted.cjs"),f=require("./class-names.cjs"),b=new WeakSet,C=l=>{b.add(l)},O=l=>{class t extends l{_trappedFocus(a,i){if(!b.has(a)&&a.key==="Tab"){const s=i(),o=s[0],e=s[s.length-1];if(a.shiftKey){if(this.shadowRoot.activeElement===o)return e.focus(),!0}else if(this.shadowRoot.activeElement===e)return o.focus(),!0}return!1}}return t},T=":host{display:inline-block}.base{display:inline-block;inline-size:100%}.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column}.dialog--padded{padding:12px;gap:12px}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;gap:8px}.dialog .footer--with-separator{border-top:1px solid var(--vvd-color-neutral-200)}";var P=Object.defineProperty,u=(l,t,n,a)=>{for(var i=void 0,s=l.length-1,o;s>=0;s--)(o=l[s])&&(i=o(t,n,i)||i);return i&&P(t,n,i),i};class c extends $.WithContextualHelp(v.WithFeedback(x.WithErrorText(m.FormElement(O(k.Localized(g.FormAssociated(r.VividElement))))))){constructor(){super(),this.readOnly=!1,this.#e=()=>{this.$emit("focus",void 0,{bubbles:!1})},this.#t=()=>{this.$emit("blur",void 0,{bubbles:!1})},this.proxy=document.createElement("input"),this.#l={handleChange:()=>{this._updatePresentationValue()}},this._popupOpen=!1,this.#o=t=>{if(!this._popupOpen)return;const n=t.composedPath();[this._dialogEl,this._pickerButtonEl].some(i=>n.includes(i))||this._closePopup(!1)},this._presentationValue="",this.value=""}readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly,this.validate())}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#o),this.addEventListener("focusin",this.#e),this.addEventListener("focusout",this.#t),this.#s()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.#o),this.removeEventListener("focusin",this.#e),this.removeEventListener("focusout",this.#t),this.#n()}#e;#t;validate(){this.proxy&&this.proxy.setCustomValidity(this._getCustomValidationError()??""),super.validate(this._textFieldEl?.querySelector("input")??void 0)}#l;#i;#s(){this.#i=r.Observable.binding(()=>this.locale,this.#l),this.#i.observe(this,r.defaultExecutionContext)}#n(){this.#i.disconnect()}#o;#a(){this.readOnly||(this._popupOpen=!0)}_closePopup(t=!0){this._popupOpen=!1,t&&this._textFieldEl.focus()}_onBaseKeyDown(t){return this._popupOpen&&_.handleEscapeKeyAndStopPropogation(t)?(this._closePopup(),!1):!this._trappedFocus(t,()=>this._focusableElsWithinDialog())}_presentationValueChanged(){this.dirtyValue=!0,this.validate()}_onTextFieldInput(t){const n=t.currentTarget;this._presentationValue=n.value}_onPickerButtonClick(){this._popupOpen?this._closePopup():this.#a()}_onOkClick(){this._closePopup()}_onClearClick(){this.$emit("clear-click")}}u([r.attr({attribute:"readonly",mode:"boolean"})],c.prototype,"readOnly");u([r.observable],c.prototype,"_popupOpen");u([r.observable],c.prototype,"_presentationValue");const q=(l,t,{withSeparator:n,padded:a})=>{const i=l.tagFor(F.Popup),s=l.tagFor(E.TextField),o=l.tagFor(y.Button);return r.html`
+"use strict";const _=require("./index.cjs"),v=require("./mixins.cjs"),g=require("./form-associated.cjs"),r=require("./vivid-element.cjs"),$=require("./with-contextual-help.cjs"),x=require("./with-error-text.cjs"),m=require("./form-element.cjs"),k=require("./localized.cjs"),F=require("./definition9.cjs"),E=require("./definition10.cjs"),y=require("./definition3.cjs"),p=require("./ref.cjs"),h=require("./slotted.cjs"),f=require("./class-names.cjs"),b=new WeakSet,C=l=>{b.add(l)},O=l=>{class t extends l{_trappedFocus(a,i){if(!b.has(a)&&a.key==="Tab"){const s=i(),o=s[0],e=s[s.length-1];if(a.shiftKey){if(this.shadowRoot.activeElement===o)return e.focus(),!0}else if(this.shadowRoot.activeElement===e)return o.focus(),!0}return!1}}return t},T=":host{display:inline-block}.base{display:inline-block;inline-size:100%}.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column}.dialog--padded{padding:12px;gap:12px}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;gap:8px}.dialog .footer--with-separator{border-top:1px solid var(--vvd-color-neutral-200)}";var P=Object.defineProperty,u=(l,t,n,a)=>{for(var i=void 0,s=l.length-1,o;s>=0;s--)(o=l[s])&&(i=o(t,n,i)||i);return i&&P(t,n,i),i};class c extends $.WithContextualHelp(v.WithFeedback(x.WithErrorText(m.FormElement(O(k.Localized(g.FormAssociated(r.VividElement))))))){constructor(){super(),this.readOnly=!1,this.#e=()=>{this.$emit("focus",void 0,{bubbles:!1})},this.#t=()=>{this.$emit("blur",void 0,{bubbles:!1})},this.proxy=document.createElement("input"),this.#l={handleChange:()=>{this._updatePresentationValue()}},this._popupOpen=!1,this.#o=t=>{if(!this._popupOpen)return;const n=t.composedPath();[this._dialogEl,this._pickerButtonEl].some(i=>n.includes(i))||this._closePopup(!1)},this._presentationValue="",this.value=""}readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly,this.validate())}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#o),this.addEventListener("focusin",this.#e),this.addEventListener("focusout",this.#t),this.#s()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.#o),this.removeEventListener("focusin",this.#e),this.removeEventListener("focusout",this.#t),this.#n()}#e;#t;validate(){this.proxy&&this.proxy.setCustomValidity(this._getCustomValidationError()??""),super.validate(this._textFieldEl?.querySelector("input")??void 0)}#l;#i;#s(){this.#i=r.Observable.binding(()=>this.locale,this.#l),this.#i.observe(this,r.ExecutionContext.default)}#n(){this.#i.dispose()}#o;#a(){this.readOnly||(this._popupOpen=!0)}_closePopup(t=!0){this._popupOpen=!1,t&&this._textFieldEl.focus()}_onBaseKeyDown(t){return this._popupOpen&&_.handleEscapeKeyAndStopPropogation(t)?(this._closePopup(),!1):!this._trappedFocus(t,()=>this._focusableElsWithinDialog())}_presentationValueChanged(){this.dirtyValue=!0,this.validate()}_onTextFieldInput(t){const n=t.currentTarget;this._presentationValue=n.value}_onPickerButtonClick(){this._popupOpen?this._closePopup():this.#a()}_onOkClick(){this._closePopup()}_onClearClick(){this.$emit("clear-click")}}u([r.attr({attribute:"readonly",mode:"boolean"})],c.prototype,"readOnly");u([r.observable],c.prototype,"_popupOpen");u([r.observable],c.prototype,"_presentationValue");const q=(l,t,{withSeparator:n,padded:a})=>{const i=l.tagFor(F.Popup),s=l.tagFor(E.TextField),o=l.tagFor(y.Button);return r.html`
 		<div class='base' @keydown='${(e,{event:d})=>e._onBaseKeyDown(d)}'>
 			<${s} id='text-field'
 				${p.ref("_textFieldEl")}

package/bundled/picker-field.template.js

@@ -1,13 +1,13 @@
 import { h as b } from "./index.js";
 import { W as _ } from "./mixins.js";
 import { F as g } from "./form-associated.js";
-import { V as v, O as $, b as x, a as k, o as f, h as F } from "./vivid-element.js";
+import { V as v, O as $, E as x, a as k, o as f, h as F } from "./vivid-element.js";
 import { W as y } from "./with-contextual-help.js";
 import { W as C } from "./with-error-text.js";
 import { F as E } from "./form-element.js";
 import { L as O } from "./localized.js";
 import { P as T } from "./definition9.js";
-import { T as P } from "./definition13.js";
+import { T as P } from "./definition10.js";
 import { B as L } from "./definition3.js";
 import { r as p } from "./ref.js";
 import { s as u } from "./slotted.js";
@@ -95,10 +95,10 @@ class c extends y(
     this.#o = $.binding(
       () => this.locale,
       this.#s
-    ), this.#o.observe(this, x);
+    ), this.#o.observe(this, x.default);
   }
   #a() {
-    this.#o.disconnect();
+    this.#o.dispose();
   }
   #i;
   #n() {

package/bundled/ref.cjs

@@ -1 +1 @@
-"use strict";const i=require("./vivid-element.cjs");class s{constructor(e,r){this.target=e,this.propertyName=r}bind(e){e[this.propertyName]=this.target}unbind(){}}function n(t){return new i.AttachedBehaviorHTMLDirective("fast-ref",s,t)}exports.ref=n;
+"use strict";const i=require("./vivid-element.cjs");class s extends i.StatelessAttachedAttributeDirective{bind(t){t.source[this.options]=t.targets[this.targetNodeId]}}i.HTMLDirective.define(s);const r=e=>new s(e);exports.ref=r;